@signalflare-ai/ui 0.5.0 → 1.0.0

package/scripts/theme-generator/config.ts

@@ -3,10 +3,10 @@
  *
  * Single source of truth for all semantic color tokens and typography.
  * This config is used to generate:
- * - theme-sf.css (base theme)
+ * - theme-sf.css (base theme — neutral, WCAG-tuned)
  * - theme-fedramp.css (fedramp overrides)
- * - theme-minimal.css (minimal/borderless overrides)
- * - Any future theme files
+ * - theme-minimal.css (minimal overrides)
+ * - theme-blue-tint.css (prior sf look — blue-tinted dark surfaces)
  *
  * Token naming:
  * - Key = current token name used in codebase
@@ -21,16 +21,20 @@ export const THEME_CONFIG: ThemeConfig = {
    * Used with: text-{token}
    * CSS variable: --text-color-{token}
    *
-   * Core text colors (default, inverse, strong) reference navigator vars.
-   * Everything else uses original sf defaults.
+   * The `sf` slot is the unconditional baseline (no selector).
+   * Other keys are opt-in overrides applied under [data-theme="..."].
    */
   text: {
     "sf-default": {
       newName: "",
       theme: {
         sf: {
-          light: "var(--foreground, oklch(0.145 0 0))",
-          dark: "var(--foreground, oklch(0.985 0 0))",
+          light: "oklch(0.145 0 0)",
+          dark: "oklch(0.985 0 0)",
+        },
+        blueTint: {
+          light: "oklch(0.145 0 0)",
+          dark: "oklch(0.985 0 0)",
         },
       },
     },
@@ -38,8 +42,8 @@ export const THEME_CONFIG: ThemeConfig = {
       newName: "",
       theme: {
         sf: {
-          light: "var(--primary-foreground, oklch(0.985 0 0))",
-          dark: "var(--primary-foreground, oklch(0.145 0 0))",
+          light: "oklch(0.985 0 0)",
+          dark: "oklch(0.145 0 0)",
         },
       },
     },
@@ -47,39 +51,51 @@ export const THEME_CONFIG: ThemeConfig = {
       newName: "",
       theme: {
         sf: {
-          light: "var(--muted-foreground, oklch(0.556 0 0))",
-          dark: "var(--muted-foreground, oklch(0.65 0 0))",
+          light: "oklch(0.45 0 0)",
+          dark: "oklch(0.80 0 0)",
         },
         minimal: {
           light: "oklch(0.50 0 0)",
           dark: "oklch(0.55 0 0)",
         },
+        blueTint: {
+          light: "oklch(0.556 0 0)",
+          dark: "oklch(0.65 0 0)",
+        },
       },
     },
     "sf-subtle": {
       newName: "",
       theme: {
         sf: {
-          light: "var(--color-neutral-500, oklch(55.6% 0 0))",
-          dark: "var(--color-neutral-50, oklch(98.5% 0 0))",
+          light: "oklch(0.45 0 0)",
+          dark: "oklch(0.72 0 0)",
         },
         minimal: {
           light: "oklch(0.55 0 0)",
           dark: "oklch(0.45 0 0)",
         },
+        blueTint: {
+          light: "var(--color-neutral-500, oklch(55.6% 0 0))",
+          dark: "var(--color-neutral-50, oklch(98.5% 0 0))",
+        },
       },
     },
     "sf-inactive": {
       newName: "",
       theme: {
         sf: {
-          light: "var(--color-neutral-400, oklch(70.8% 0 0))",
-          dark: "var(--color-neutral-600, oklch(70.8% 0 0))",
+          light: "oklch(0.55 0 0)",
+          dark: "oklch(0.60 0 0)",
         },
         minimal: {
           light: "oklch(0.65 0 0)",
           dark: "oklch(0.35 0 0)",
         },
+        blueTint: {
+          light: "var(--color-neutral-400, oklch(70.8% 0 0))",
+          dark: "var(--color-neutral-600, oklch(70.8% 0 0))",
+        },
       },
     },
     "sf-brand": {
@@ -113,26 +129,34 @@ export const THEME_CONFIG: ThemeConfig = {
       newName: "",
       theme: {
         sf: {
-          light: "var(--destructive, oklch(0.577 0.245 27.325))",
-          dark: "var(--destructive, oklch(0.55 0.18 25))",
+          light: "oklch(0.50 0.15 25)",
+          dark: "oklch(0.68 0.16 25)",
         },
         minimal: {
           light: "oklch(0.55 0.12 25)",
           dark: "oklch(0.55 0.10 25)",
         },
+        blueTint: {
+          light: "oklch(0.577 0.245 27.325)",
+          dark: "oklch(0.55 0.18 25)",
+        },
       },
     },
     "sf-warning": {
       newName: "",
       theme: {
         sf: {
-          light: "var(--color-yellow-800, oklch(47.6% 0.114 61.907))",
-          dark: "var(--color-yellow-400, oklch(85.2% 0.199 91.936))",
+          light: "oklch(0.45 0.10 66)",
+          dark: "oklch(0.78 0.12 80)",
         },
         minimal: {
           light: "oklch(0.55 0.08 66)",
           dark: "oklch(0.65 0.08 66)",
         },
+        blueTint: {
+          light: "var(--color-yellow-800, oklch(47.6% 0.114 61.907))",
+          dark: "var(--color-yellow-400, oklch(85.2% 0.199 91.936))",
+        },
       },
     },
   },
@@ -141,18 +165,14 @@ export const THEME_CONFIG: ThemeConfig = {
    * Color tokens
    * Used with: bg-{token}, border-{token}, ring-{token}, etc.
    * CSS variable: --color-{token}
-   *
-   * Surface colors (base, contrast), borders (line, interact, ring),
-   * and brand reference navigator vars.
-   * Everything else uses original sf defaults.
    */
   color: {
     "sf-canvas": {
       newName: "",
       theme: {
         sf: {
-          light: "var(--color-neutral-50, oklch(0.985 0 0))",
-          dark: "var(--color-neutral-950, oklch(0.14 0 0))",
+          light: "oklch(0.95 0 0)",
+          dark: "oklch(0.10 0 0)",
         },
         fedramp: {
           light: "#5b697c",
@@ -162,14 +182,18 @@ export const THEME_CONFIG: ThemeConfig = {
           light: "oklch(0.95 0 0)",
           dark: "oklch(0.10 0 0)",
         },
+        blueTint: {
+          light: "var(--color-neutral-50, oklch(0.985 0 0))",
+          dark: "var(--color-neutral-950, oklch(0.14 0 0))",
+        },
       },
     },
     "sf-base": {
       newName: "",
       theme: {
         sf: {
-          light: "var(--background, oklch(1 0 0))",
-          dark: "var(--background, oklch(0.21 0.005 252))",
+          light: "oklch(0.97 0 0)",
+          dark: "oklch(0.14 0 0)",
         },
         fedramp: {
           light: "#5b697c",
@@ -179,92 +203,122 @@ export const THEME_CONFIG: ThemeConfig = {
           light: "oklch(0.97 0 0)",
           dark: "oklch(0.14 0 0)",
         },
+        blueTint: {
+          light: "oklch(1 0 0)",
+          dark: "oklch(0.21 0.005 252)",
+        },
       },
     },
     "sf-elevated": {
       newName: "",
       theme: {
         sf: {
-          light: "var(--color-neutral-25, oklch(0.99 0 0))",
-          dark: "var(--background, oklch(0.21 0.005 252))",
+          light: "oklch(1 0 0)",
+          dark: "oklch(0.22 0 0)",
         },
         minimal: {
           light: "oklch(1 0 0)",
           dark: "oklch(0.22 0 0)",
         },
+        blueTint: {
+          light: "oklch(0.99 0 0)",
+          dark: "oklch(0.24 0.005 252)",
+        },
       },
     },
     "sf-recessed": {
       newName: "",
       theme: {
         sf: {
-          light: "var(--color-neutral-250, oklch(0.9 0 0))",
-          dark: "var(--color-neutral-750, oklch(0.31 0 0))",
+          light: "oklch(0.92 0 0)",
+          dark: "oklch(0.10 0 0)",
         },
         minimal: {
           light: "oklch(0.92 0 0)",
           dark: "oklch(0.10 0 0)",
         },
+        blueTint: {
+          light: "var(--color-neutral-250, oklch(0.9 0 0))",
+          dark: "var(--color-neutral-750, oklch(0.31 0 0))",
+        },
       },
     },
     "sf-overlay": {
       newName: "",
       theme: {
         sf: {
-          light: "var(--color-neutral-50, oklch(98.5% 0 0))",
-          dark: "var(--color-neutral-950, oklch(0.10 0 0))",
+          light: "oklch(0.93 0 0)",
+          dark: "oklch(0.10 0 0)",
         },
         minimal: {
           light: "oklch(0.93 0 0)",
           dark: "oklch(0.10 0 0)",
         },
+        blueTint: {
+          light: "var(--color-neutral-50, oklch(98.5% 0 0))",
+          dark: "var(--color-neutral-950, oklch(0.10 0 0))",
+        },
       },
     },
     "sf-contrast": {
       newName: "",
       theme: {
         sf: {
-          light: "var(--primary, oklch(0.205 0 0))",
-          dark: "var(--primary, oklch(0.55 0.01 40))",
+          light: "oklch(0.35 0 0)",
+          dark: "oklch(0.75 0 0)",
         },
         minimal: {
           light: "oklch(0.35 0 0)",
           dark: "oklch(0.75 0 0)",
         },
+        blueTint: {
+          light: "oklch(0.205 0 0)",
+          dark: "oklch(0.55 0.01 40)",
+        },
       },
     },
     "sf-control": {
       newName: "",
       theme: {
         sf: {
-          light: "var(--color-white, #fff)",
-          dark: "var(--color-neutral-900, oklch(21% 0.006 285.885))",
+          light: "oklch(0.95 0 0)",
+          dark: "oklch(0.17 0 0)",
         },
         minimal: {
           light: "oklch(0.95 0 0)",
           dark: "oklch(0.17 0 0)",
         },
+        blueTint: {
+          light: "var(--color-white, #fff)",
+          dark: "var(--color-neutral-900, oklch(21% 0.006 285.885))",
+        },
       },
     },
     "sf-tint": {
       newName: "",
       theme: {
         sf: {
-          light: "var(--color-neutral-150, oklch(0.96 0 0))",
-          dark: "var(--color-neutral-850, oklch(0.23 0 0))",
+          light: "oklch(0.94 0 0)",
+          dark: "oklch(0.19 0 0)",
         },
         minimal: {
           light: "oklch(0.94 0 0)",
           dark: "oklch(0.19 0 0)",
         },
+        blueTint: {
+          light: "var(--color-neutral-150, oklch(0.96 0 0))",
+          dark: "var(--color-neutral-850, oklch(0.23 0 0))",
+        },
       },
     },
     "sf-interact": {
       newName: "",
       theme: {
         sf: {
-          light: "var(--border, oklch(0.922 0 0))",
-          dark: "var(--border, oklch(0.3 0.015 250))",
+          /* Interactive boundary (form controls, checkbox/radio idle).
+             More visible than sf-line so controls read as actionable. */
+          light: "oklch(0.80 0 0)",
+          dark: "oklch(0.38 0 0)",
         },
       },
     },
@@ -272,73 +326,95 @@ export const THEME_CONFIG: ThemeConfig = {
       newName: "",
       theme: {
         sf: {
-          light: "var(--color-neutral-200, oklch(92.2% 0 0))",
-          dark: "var(--color-neutral-800, oklch(26.9% 0 0))",
+          light: "oklch(0.91 0 0)",
+          dark: "oklch(0.27 0 0)",
         },
         minimal: {
           light: "oklch(0.91 0 0)",
           dark: "oklch(0.27 0 0)",
         },
+        blueTint: {
+          light: "var(--color-neutral-200, oklch(92.2% 0 0))",
+          dark: "var(--color-neutral-800, oklch(26.9% 0 0))",
+        },
       },
     },
     "sf-fill-hover": {
       newName: "",
       theme: {
         sf: {
-          light: "var(--color-neutral-200, oklch(92.2% 0 0))",
-          dark: "var(--color-neutral-700, oklch(37.1% 0 0))",
+          light: "oklch(0.88 0 0)",
+          dark: "oklch(0.31 0 0)",
         },
         minimal: {
           light: "oklch(0.88 0 0)",
           dark: "oklch(0.31 0 0)",
         },
+        blueTint: {
+          light: "var(--color-neutral-200, oklch(92.2% 0 0))",
+          dark: "var(--color-neutral-700, oklch(37.1% 0 0))",
+        },
       },
     },
     "sf-brand": {
       newName: "",
       theme: {
         sf: {
-          light: "oklch(0.5772 0.2324 260)",
-          dark: "oklch(0.5772 0.2324 260)",
+          light: "oklch(0.55 0.06 260)",
+          dark: "oklch(0.55 0.06 260)",
         },
         minimal: {
           light: "oklch(0.55 0.06 260)",
           dark: "oklch(0.55 0.06 260)",
         },
+        blueTint: {
+          light: "oklch(0.5772 0.2324 260)",
+          dark: "oklch(0.5772 0.2324 260)",
+        },
       },
     },
     "sf-brand-hover": {
       newName: "",
       theme: {
         sf: {
-          light: "var(--color-blue-700, oklch(48.8% 0.243 264.376))",
-          dark: "var(--color-blue-700, oklch(48.8% 0.243 264.376))",
+          light: "oklch(0.48 0.05 264)",
+          dark: "oklch(0.48 0.05 264)",
         },
         minimal: {
           light: "oklch(0.48 0.05 264)",
           dark: "oklch(0.48 0.05 264)",
         },
+        blueTint: {
+          light: "var(--color-blue-700, oklch(48.8% 0.243 264.376))",
+          dark: "var(--color-blue-700, oklch(48.8% 0.243 264.376))",
+        },
       },
     },
     "sf-line": {
       newName: "",
       theme: {
         sf: {
-          light: "var(--border, oklch(0.922 0 0))",
-          dark: "var(--border, oklch(0.3 0.015 250))",
+          /* Flat/minimal aesthetic: near-invisible by design. Decorative only —
+             contrast carried by text + sf-ring (focus) + surface elevation. */
+          light: "oklch(0.85 0 0 / 0.5)",
+          dark: "oklch(0.25 0 0 / 0.5)",
         },
         minimal: {
           light: "oklch(0.85 0 0 / 0.5)",
           dark: "oklch(0.25 0 0 / 0.5)",
         },
+        blueTint: {
+          light: "oklch(0.922 0 0)",
+          dark: "oklch(0.3 0.015 250)",
+        },
       },
     },
     "sf-ring": {
       newName: "",
       theme: {
         sf: {
-          light: "var(--ring, oklch(0.708 0 0))",
-          dark: "var(--ring, oklch(0.465 0.015 250))",
+          light: "oklch(0.55 0 0)",
+          dark: "oklch(0.60 0 0)",
         },
         fedramp: {
           light: "#c8d4e5",
@@ -348,19 +424,27 @@ export const THEME_CONFIG: ThemeConfig = {
           light: "oklch(0.65 0 0)",
           dark: "oklch(0.45 0 0)",
         },
+        blueTint: {
+          light: "oklch(0.708 0 0)",
+          dark: "oklch(0.465 0.015 250)",
+        },
       },
     },
     "sf-tip-shadow": {
       newName: "",
       theme: {
         sf: {
-          light: "var(--color-gray-200, oklch(92.8% 0.006 264.531))",
+          light: "transparent",
           dark: "transparent",
         },
         minimal: {
           light: "transparent",
           dark: "transparent",
         },
+        blueTint: {
+          light: "var(--color-gray-200, oklch(92.8% 0.006 264.531))",
+          dark: "transparent",
+        },
       },
     },
     "sf-tip-stroke": {
@@ -368,90 +452,259 @@ export const THEME_CONFIG: ThemeConfig = {
       theme: {
         sf: {
           light: "transparent",
-          dark: "var(--color-neutral-800, oklch(26.9% 0 0))",
+          dark: "transparent",
         },
         minimal: {
           light: "transparent",
           dark: "transparent",
         },
+        blueTint: {
+          light: "transparent",
+          dark: "var(--color-neutral-800, oklch(26.9% 0 0))",
+        },
       },
     },
     "sf-info": {
       newName: "",
       theme: {
         sf: {
-          light: "var(--color-blue-500, oklch(62.3% 0.214 259.815))",
-          dark: "var(--color-blue-700, oklch(48.8% 0.243 264.376))",
+          light: "oklch(0.55 0.06 260)",
+          dark: "oklch(0.55 0.06 260)",
         },
         minimal: {
           light: "oklch(0.55 0.06 260)",
           dark: "oklch(0.55 0.06 260)",
         },
+        blueTint: {
+          light: "var(--color-blue-500, oklch(62.3% 0.214 259.815))",
+          dark: "var(--color-blue-700, oklch(48.8% 0.243 264.376))",
+        },
       },
     },
     "sf-info-tint": {
       newName: "",
       theme: {
         sf: {
-          light: "var(--color-blue-300, oklch(80.9% 0.105 251.813))",
-          dark: "var(--color-blue-900, oklch(37.9% 0.146 265.522))",
+          light: "oklch(0.88 0.02 260)",
+          dark: "oklch(0.12 0.03 260)",
         },
         minimal: {
           light: "oklch(0.94 0.01 260)",
           dark: "oklch(0.20 0.02 260)",
         },
+        blueTint: {
+          light: "var(--color-blue-300, oklch(80.9% 0.105 251.813))",
+          dark: "var(--color-blue-900, oklch(37.9% 0.146 265.522))",
+        },
       },
     },
     "sf-warning": {
       newName: "",
       theme: {
         sf: {
-          light: "var(--color-yellow-500, oklch(79.5% 0.184 86.047))",
-          dark: "var(--color-yellow-700, oklch(55.4% 0.135 66.442))",
+          light: "oklch(0.55 0.08 66)",
+          dark: "oklch(0.65 0.08 66)",
         },
         minimal: {
           light: "oklch(0.55 0.08 66)",
           dark: "oklch(0.65 0.08 66)",
         },
+        blueTint: {
+          light: "var(--color-yellow-500, oklch(79.5% 0.184 86.047))",
+          dark: "var(--color-yellow-700, oklch(55.4% 0.135 66.442))",
+        },
       },
     },
     "sf-warning-tint": {
       newName: "",
       theme: {
         sf: {
-          light: "var(--color-yellow-300, oklch(90.5% 0.182 98.111))",
-          dark: "var(--color-yellow-900, oklch(42.1% 0.095 57.708))",
+          light: "oklch(0.94 0.02 60)",
+          dark: "oklch(0.22 0.03 60)",
         },
         minimal: {
           light: "oklch(0.94 0.02 60)",
           dark: "oklch(0.22 0.03 60)",
         },
+        blueTint: {
+          light: "var(--color-yellow-300, oklch(90.5% 0.182 98.111))",
+          dark: "var(--color-yellow-900, oklch(42.1% 0.095 57.708))",
+        },
       },
     },
     "sf-danger": {
       newName: "",
       theme: {
         sf: {
-          light: "var(--destructive, oklch(0.577 0.245 27.325))",
-          dark: "var(--destructive, oklch(0.55 0.18 25))",
+          light: "oklch(0.55 0.12 25)",
+          dark: "oklch(0.55 0.10 25)",
         },
         minimal: {
           light: "oklch(0.55 0.12 25)",
           dark: "oklch(0.55 0.10 25)",
         },
+        blueTint: {
+          light: "oklch(0.577 0.245 27.325)",
+          dark: "oklch(0.55 0.18 25)",
+        },
       },
     },
     "sf-danger-tint": {
       newName: "",
       theme: {
         sf: {
-          light: "var(--color-red-300, oklch(80.8% 0.114 19.571))",
-          dark: "var(--color-red-900, oklch(39.6% 0.141 25.723))",
+          light: "oklch(0.94 0.02 25)",
+          dark: "oklch(0.16 0.04 25)",
         },
         minimal: {
           light: "oklch(0.94 0.02 25)",
           dark: "oklch(0.20 0.04 25)",
         },
+        blueTint: {
+          light: "var(--color-red-300, oklch(80.8% 0.114 19.571))",
+          dark: "var(--color-red-900, oklch(39.6% 0.141 25.723))",
+        },
+      },
+    },
+    "sf-success": {
+      newName: "",
+      description:
+        "Success signal color (previously hardcoded in the shadcn bridge)",
+      theme: {
+        sf: {
+          light: "oklch(0.723 0.219 149.579)",
+          dark: "oklch(0.723 0.219 149.579)",
+        },
+      },
+    },
+    "sf-chart-1": {
+      newName: "",
+      description: "Chart series 1 (shadcn chart-1 equivalent)",
+      theme: {
+        sf: {
+          light: "oklch(0.646 0.222 41.116)",
+          dark: "oklch(0.646 0.222 41.116)",
+        },
+      },
+    },
+    "sf-chart-2": {
+      newName: "",
+      description: "Chart series 2 (shadcn chart-2 equivalent)",
+      theme: {
+        sf: {
+          light: "oklch(0.6 0.118 184.704)",
+          dark: "oklch(0.6 0.118 184.704)",
+        },
+      },
+    },
+    "sf-chart-3": {
+      newName: "",
+      description: "Chart series 3 (shadcn chart-3 equivalent)",
+      theme: {
+        sf: {
+          light: "oklch(0.398 0.07 227.392)",
+          dark: "oklch(0.398 0.07 227.392)",
+        },
+      },
+    },
+    "sf-chart-4": {
+      newName: "",
+      description: "Chart series 4 (shadcn chart-4 equivalent)",
+      theme: {
+        sf: {
+          light: "oklch(0.828 0.189 84.429)",
+          dark: "oklch(0.828 0.189 84.429)",
+        },
+      },
+    },
+    "sf-chart-5": {
+      newName: "",
+      description: "Chart series 5 (shadcn chart-5 equivalent)",
+      theme: {
+        sf: {
+          light: "oklch(0.769 0.188 70.08)",
+          dark: "oklch(0.769 0.188 70.08)",
+        },
+      },
+    },
+    "sf-syntax-keyword": {
+      newName: "",
+      description: "sugar-high syntax: keywords",
+      theme: {
+        sf: {
+          light: "oklch(0.52 0.20 265)",
+          dark: "oklch(0.72 0.19 255)",
+        },
+      },
+    },
+    "sf-syntax-identifier": {
+      newName: "",
+      description: "sugar-high syntax: identifiers",
+      theme: {
+        sf: {
+          light: "oklch(0.38 0.13 150)",
+          dark: "oklch(0.75 0.15 155)",
+        },
+      },
+    },
+    "sf-syntax-string": {
+      newName: "",
+      description: "sugar-high syntax: strings",
+      theme: {
+        sf: {
+          light: "oklch(0.48 0.16 25)",
+          dark: "oklch(0.72 0.14 60)",
+        },
+      },
+    },
+    "sf-syntax-comment": {
+      newName: "",
+      description: "sugar-high syntax: comments",
+      theme: {
+        sf: {
+          light: "oklch(0.62 0 0)",
+          dark: "oklch(0.55 0 0)",
+        },
+      },
+    },
+    "sf-syntax-jsxliterals": {
+      newName: "",
+      description: "sugar-high syntax: JSX literals",
+      theme: {
+        sf: {
+          light: "oklch(0.52 0.20 265)",
+          dark: "oklch(0.72 0.19 255)",
+        },
+      },
+    },
+    "sf-syntax-property": {
+      newName: "",
+      description: "sugar-high syntax: property access",
+      theme: {
+        sf: {
+          light: "oklch(0.38 0.12 220)",
+          dark: "oklch(0.72 0.12 215)",
+        },
+      },
+    },
+    "sf-syntax-entity": {
+      newName: "",
+      description: "sugar-high syntax: entities",
+      theme: {
+        sf: {
+          light: "oklch(0.46 0.18 30)",
+          dark: "oklch(0.75 0.15 55)",
+        },
+      },
+    },
+    "sf-syntax-sign": {
+      newName: "",
+      description: "sugar-high syntax: operators/signs",
+      theme: {
+        sf: {
+          light: "oklch(0.45 0 0)",
+          dark: "oklch(0.70 0 0)",
+        },
       },
     },
   },
@@ -462,7 +715,6 @@ export const THEME_CONFIG: ThemeConfig = {
    * CSS variables: --text-{size}, --text-{size}--line-height
    *
    * Note: Typography is NOT theme-dependent (no light/dark mode).
-   * Values are the same across color modes but may differ per theme.
    */
   typography: {
     xs: {
@@ -517,14 +769,30 @@ export const THEME_CONFIG: ThemeConfig = {
 };
 
 /** List of all available themes */
-export const AVAILABLE_THEMES = ["sf", "fedramp", "minimal"] as const;
+export const AVAILABLE_THEMES = [
+  "sf",
+  "fedramp",
+  "minimal",
+  "blueTint",
+] as const;
 export type AvailableTheme = (typeof AVAILABLE_THEMES)[number];
 
 /**
- * Extra raw CSS lines appended inside [data-theme="..."] for each theme.
- * Used for overrides that don't fit the token system (e.g. Tailwind shadow vars).
+ * Extra raw CSS lines per theme. For the baseline `sf` entry, these are
+ * emitted into a `:root { ... }` block in theme-sf.css (so they always apply).
+ * For other themes, they are appended inside the [data-theme="..."] override.
  */
 export const THEME_EXTRAS: Record<string, string[]> = {
+  sf: [
+    "/* Shadow overrides — flatten all elevation for the minimal-derived default */",
+    "--shadow-2xs: 0 0 0 0 transparent;",
+    "--shadow-xs: 0 0 0 0 transparent;",
+    "--shadow-sm: 0 0 0 0 transparent;",
+    "--shadow-md: 0 0 0 0 transparent;",
+    "--shadow-lg: 0 0 0 0 transparent;",
+    "--shadow-xl: 0 0 0 0 transparent;",
+    "--shadow-2xl: 0 0 0 0 transparent;",
+  ],
   minimal: [
     "/* Shadow overrides — flatten all elevation */",
     "--shadow-2xs: 0 0 0 0 transparent;",