feat(board+clock): fix item radius zoom, add clock day/night weather colour (#6726)

apps/nextjs/src/components/board/layout/scaled-board-canvas.module.css

@@ -45,4 +45,13 @@
   --mantine-h4-font-size: calc(1.125rem * var(--board-canvas-ui-scale, 1));
   --mantine-h5-font-size: calc(1rem * var(--board-canvas-ui-scale, 1));
   --mantine-h6-font-size: calc(0.875rem * var(--board-canvas-ui-scale, 1));
+  /* Without these, border-radius tokens (e.g. the board's "Item radius" setting) stay at their
+   * flat rem value while the canvas zoom shrinks the rendered card, so the chosen radius becomes
+   * imperceptibly small on busy/zoomed-out boards - same class of bug as the spacing/font tokens
+   * above, just never ported over to radius. */
+  --mantine-radius-xs: calc(0.25rem * var(--board-canvas-ui-scale, 1));
+  --mantine-radius-sm: calc(0.25rem * var(--board-canvas-ui-scale, 1));
+  --mantine-radius-md: calc(0.5rem * var(--board-canvas-ui-scale, 1));
+  --mantine-radius-lg: calc(0.75rem * var(--board-canvas-ui-scale, 1));
+  --mantine-radius-xl: calc(1rem * var(--board-canvas-ui-scale, 1));
 }

packages/translation/src/lang/en.json

@@ -2430,6 +2430,16 @@
           "label": "Animate weather icon",
           "description": "Animate the weather icon. Disabled by default and always disabled when reduced motion is requested."
         },
+        "colorWeatherByDayNight": {
+          "label": "Color weather by day/night",
+          "description": "Tint the weather icon and temperature with a day color or a night color, based on whether it's currently day or night at the chosen location."
+        },
+        "dayWeatherColor": {
+          "label": "Day color"
+        },
+        "nightWeatherColor": {
+          "label": "Night color"
+        },
         "worldClockCities": {
           "label": "World clock cities",
           "description": "Add and order up to six cities for advanced view."

packages/widgets/src/clock/advanced-view.tsx

@@ -132,6 +132,9 @@ const PrimaryClock = ({ now, options, primary }: Pick<ModeProps, "now" | "option
               locationName={options.weatherLocation.name}
               isFahrenheit={options.isWeatherFormatFahrenheit}
               animateIcon={options.animateWeatherIcon}
+              colorByDayNight={options.colorWeatherByDayNight}
+              dayColor={options.dayWeatherColor}
+              nightColor={options.nightWeatherColor}
               detailed
             />
           </Paper>

packages/widgets/src/clock/component.tsx

@@ -54,6 +54,9 @@ export default function ClockWidget({ options, width, height, displayMode }: Wid
             locationName={options.weatherLocation.name}
             isFahrenheit={options.isWeatherFormatFahrenheit}
             animateIcon={options.animateWeatherIcon}
+            colorByDayNight={options.colorWeatherByDayNight}
+            dayColor={options.dayWeatherColor}
+            nightColor={options.nightWeatherColor}
             detailed={false}
           />
         </Box>

packages/widgets/src/clock/index.ts

@@ -12,6 +12,23 @@ import {
 
 const timeZoneOptions = getTimeZoneOptions();
 
+// Mantine theme color names, used to let users pick their own day/night weather colors.
+const weatherColorOptions: string[] = [
+  "red",
+  "pink",
+  "grape",
+  "violet",
+  "indigo",
+  "blue",
+  "cyan",
+  "teal",
+  "green",
+  "lime",
+  "yellow",
+  "orange",
+  "gray",
+];
+
 export const { definition, componentLoader } = createWidgetDefinition("clock", {
   icon: IconClock,
   supportsAdvancedFocus: true,
@@ -101,6 +118,18 @@ export const { definition, componentLoader } = createWidgetDefinition("clock", {
           defaultValue: false,
           withDescription: true,
         }),
+        colorWeatherByDayNight: factory.switch({
+          defaultValue: false,
+          withDescription: true,
+        }),
+        dayWeatherColor: factory.select({
+          options: weatherColorOptions,
+          defaultValue: "orange",
+        }),
+        nightWeatherColor: factory.select({
+          options: weatherColorOptions,
+          defaultValue: "blue",
+        }),
         worldClockCities: factory.timezoneList({
           defaultValue: defaultWorldClockCities.map((city) => ({ ...city })),
           maxValues: maximumWorldClockCities,
@@ -131,6 +160,15 @@ export const { definition, componentLoader } = createWidgetDefinition("clock", {
         animateWeatherIcon: {
           shouldHide: (options) => !options.showWeather,
         },
+        colorWeatherByDayNight: {
+          shouldHide: (options) => !options.showWeather,
+        },
+        dayWeatherColor: {
+          shouldHide: (options) => !options.showWeather || !options.colorWeatherByDayNight,
+        },
+        nightWeatherColor: {
+          shouldHide: (options) => !options.showWeather || !options.colorWeatherByDayNight,
+        },
       },
     );
   },

packages/widgets/src/clock/weather-summary.tsx

@@ -14,6 +14,9 @@ interface ClockWeatherSummaryProps {
   locationName: string;
   isFahrenheit: boolean;
   animateIcon: boolean;
+  colorByDayNight: boolean;
+  dayColor: string;
+  nightColor: string;
   detailed: boolean;
 }
 
@@ -23,6 +26,9 @@ export const ClockWeatherSummary = ({
   locationName,
   isFahrenheit,
   animateIcon,
+  colorByDayNight,
+  dayColor,
+  nightColor,
   detailed,
 }: ClockWeatherSummaryProps) => {
   const tCommon = useI18n("common");
@@ -46,6 +52,10 @@ export const ClockWeatherSummary = ({
     return `${Math.round(preferred)}${unit}`;
   };
 
+  const weatherColor = colorByDayNight
+    ? `var(--mantine-color-${weather.current.isDay ? dayColor : nightColor}-5)`
+    : undefined;
+
   return (
     <Stack gap={detailed ? 3 : 2} align={detailed ? "flex-start" : "center"}>
       {detailed ? (
@@ -54,9 +64,9 @@ export const ClockWeatherSummary = ({
             animated={animateIcon}
             code={weather.current.weatherCode}
             isDay={weather.current.isDay}
-            style={zoomCompensatedSize(28)}
+            style={{ ...zoomCompensatedSize(28), ...(weatherColor ? { color: weatherColor } : undefined) }}
           />
-          <Text size="sm" fw={600}>
+          <Text size="sm" fw={600} c={weatherColor}>
             {Math.round(temperature)}
             {unit}
           </Text>
@@ -68,9 +78,9 @@ export const ClockWeatherSummary = ({
             animated={animateIcon}
             code={weather.current.weatherCode}
             isDay={weather.current.isDay}
-            style={zoomCompensatedSize(26)}
+            style={{ ...zoomCompensatedSize(26), ...(weatherColor ? { color: weatherColor } : undefined) }}
           />
-          <Text size="xs" c="dimmed">
+          <Text size="xs" c={weatherColor ?? "dimmed"}>
             {Math.round(temperature)}
             {unit}
           </Text>

packages/widgets/src/weather/animated-icon.tsx

@@ -26,7 +26,7 @@ export const AnimatedWeatherIcon = ({ animated = false, code, isDay, size = 26,
   let animationClass = "";
   if (animated && (code !== 0 || isDay !== false)) animationClass = getAnimationClass(code);
   return (
-    <span className={`weather-anim-wrapper ${animationClass}`}>
+    <span className={`weather-anim-wrapper ${animationClass}`} data-is-day={isDay === false ? "false" : "true"}>
       <WeatherIcon code={code} isDay={isDay} size={size} style={style} />
     </span>
   );