feat: Unify scaling and apply to clock widget

apps/nextjs/src/components/board/items/item-content.tsx

@@ -35,8 +35,9 @@ export const BoardItemContent = ({ item }: BoardItemContentProps) => {
       styles={{
         root: {
           "--opacity": board.opacity / 100,
-          containerType: "size",
           overflow: item.kind === "iframe" ? "hidden" : undefined,
+          "--custom-text-size-scale": item.advancedOptions.customTextSize,
+          "--custom-spacing-scale": item.advancedOptions.customSpacing,
         },
       }}
       p={0}

apps/nextjs/src/components/board/sections/item.module.css

@@ -9,4 +9,22 @@
   }
   background-color: var(--background-color) !important;
   border-color: var(--border-color) !important;
+
+  container-type: size;
+
+  --spacing-base: 0.5cqmin;
+  --mantine-spacing-xs: calc(1 * var(--spacing-base) * var(--custom-spacing-scale));
+  --mantine-spacing-sm: calc(2 * var(--spacing-base) * var(--custom-spacing-scale));
+  --mantine-spacing-md: calc(4 * var(--spacing-base) * var(--custom-spacing-scale));
+  --mantine-spacing-lg: calc(8 * var(--spacing-base) * var(--custom-spacing-scale));
+  --mantine-spacing-xl: calc(16 * var(--spacing-base) * var(--custom-spacing-scale));
+
+  --text-size-base: 5cqmin;
+  --mantine-font-size-xs: calc(1 * var(--text-size-base) * var(--custom-text-size-scale));
+  --mantine-font-size-sm: calc(1.5 * var(--text-size-base) * var(--custom-text-size-scale));
+  --mantine-font-size-md: calc(2.5 * var(--text-size-base) * var(--custom-text-size-scale));
+  --mantine-font-size-lg: calc(4 * var(--text-size-base) * var(--custom-text-size-scale));
+  --mantine-font-size-xl: calc(6 * var(--text-size-base) * var(--custom-text-size-scale));
+
+  --text-lh: 1.35;
 }

packages/translation/src/lang/en.json

@@ -1022,6 +1022,13 @@
         },
         "customCssClasses": {
           "label": "Custom css classes"
+        },
+        "customTextSize":{
+          "label": "Custom Font Size Scale"
+        },
+        "customSpacing":{
+          "label": "Custom Spacing Scale",
+          "description": "Space between and around elements of the widget"
         }
       }
     },

packages/validation/src/shared.ts

@@ -15,6 +15,8 @@ export type BoardItemIntegration = z.infer<typeof integrationSchema>;
 
 export const itemAdvancedOptionsSchema = z.object({
   customCssClasses: z.array(z.string()).default([]),
+  customTextSize: z.number().min(0).max(10).default(1),
+  customSpacing: z.number().min(0).max(10).default(1),
 });
 
 export type BoardItemAdvancedOptions = z.infer<typeof itemAdvancedOptionsSchema>;

packages/widgets/src/clock/component.tsx

@@ -22,19 +22,19 @@ export default function ClockWidget({ options }: WidgetComponentProps<"clock">)
   const timezone = options.useCustomTimezone ? options.timezone : Intl.DateTimeFormat().resolvedOptions().timeZone;
   const time = useCurrentTime(options);
   return (
-    <Stack className="clock-text-stack" h="100%" align="center" justify="center" gap="10cqmin">
+    <Stack className="clock-text-stack" h="100%" align="center" justify="center" gap="lg">
       {options.customTitleToggle && (
-        <Text className="clock-customTitle-text" size="12.5cqmin" ta="center">
+        <Text className="clock-customTitle-text" ta="center">
           {options.customTitle}
         </Text>
       )}
-      <Text className="clock-time-text" fw={700} size="22.5cqmin" lh="1">
+      <Text className="clock-time-text" fw="bold" size="lg" lh={1}>
         {options.customTimeFormat
           ? dayjs(time).tz(timezone).format(customTimeFormat)
           : dayjs(time).tz(timezone).format(timeFormat)}
       </Text>
       {options.showDate && (
-        <Text className="clock-date-text" size="12.5cqmin" p="1cqmin" lineClamp={1}>
+        <Text className="clock-date-text" lineClamp={1}>
           {options.customDateFormat
             ? dayjs(time).tz(timezone).format(customDateFormat)
             : dayjs(time).tz(timezone).format(dateFormat)}

packages/widgets/src/modals/widget-advanced-options-modal.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Button, Group, Stack } from "@mantine/core";
+import { Button, Group, NumberInput, Stack } from "@mantine/core";
 
 import { useForm } from "@homarr/form";
 import { createModal } from "@homarr/modals";
@@ -30,6 +30,23 @@ export const WidgetAdvancedOptionsModal = createModal<InnerProps>(({ actions, in
           label={t("item.edit.field.customCssClasses.label")}
           {...form.getInputProps("customCssClasses")}
         />
+        <NumberInput
+          label={t("item.edit.field.customTextSize.label")}
+          min={0}
+          max={10}
+          step={0.1}
+          defaultValue={1}
+          {...form.getInputProps("customTextSize")}
+        />
+        <NumberInput
+          label={t("item.edit.field.customSpacing.label")}
+          description={t("item.edit.field.customSpacing.description")}
+          min={0}
+          max={10}
+          step={0.1}
+          defaultValue={1}
+          {...form.getInputProps("customSpacing")}
+        />
         <Group justify="end">
           <Button onClick={actions.closeModal} variant="subtle" color="gray">
             {t("common.action.cancel")}

packages/widgets/src/modals/widget-edit-modal.tsx

@@ -60,6 +60,8 @@ export const WidgetEditModal = createModal<ModalProps<WidgetKind>>(({ actions, i
         integrationIds: z.array(z.string()),
         advancedOptions: z.object({
           customCssClasses: z.array(z.string()),
+          customTextSize: z.number().min(0).max(10),
+          customSpacing: z.number().min(0).max(10),
         }),
       }),
     ),