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

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>