@ttoss/fsl-theme 2.1.1 → 2.1.3

package/dist/{createTheme-B7H0xSVp.cjs → createTheme-r7mUCPFX.cjs}

@@ -52,15 +52,17 @@ var baseTheme = {
       },
       neutral: {
         0: "#ffffff",
-        50: "#f8fafc",
-        100: "#f1f5f9",
-        200: "#e2e8f0",
-        300: "#cbd5e1",
-        400: "#94a3b8",
-        500: "#64748b",
-        700: "#334155",
-        900: "#0f172a",
-        1e3: "#020617"
+        50: "#fafafa",
+        100: "#f4f4f5",
+        200: "#e4e4e7",
+        300: "#d4d4d8",
+        400: "#a1a1aa",
+        500: "#71717a",
+        600: "#52525b",
+        700: "#3f3f46",
+        800: "#27272a",
+        900: "#18181b",
+        1e3: "#09090b"
       },
       red: {
         100: "#fee2e2",
@@ -131,7 +133,7 @@ var baseTheme = {
     },
     font: {
       family: {
-        sans: "ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\"",
+        sans: "\"Inter Variable\", Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\"",
         serif: "ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif",
         mono: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace"
       },
@@ -239,16 +241,8 @@ var baseTheme = {
         }
       },
       hit: {
-        fine: {
-          min: "clamp(28px, 1.75rem, 32px)",
-          base: "clamp(32px, 2rem, 40px)",
-          prominent: "clamp(40px, 2.5rem, 48px)"
-        },
-        coarse: {
-          min: "32px",
-          base: "48px",
-          prominent: "56px"
-        }
+        fine: "clamp(32px, 2rem, 36px)",
+        coarse: "48px"
       }
     },
     radii: {
@@ -358,7 +352,7 @@ var baseTheme = {
             focused: "{core.colors.brand.500}",
             disabled: "{core.colors.neutral.200}",
             pressed: "{core.colors.neutral.400}",
-            expanded: "{core.colors.brand.500}"
+            expanded: "{core.colors.neutral.500}"
           },
           text: {
             default: "{core.colors.neutral.900}",
@@ -432,7 +426,7 @@ var baseTheme = {
             focused: "{core.colors.brand.500}",
             disabled: "{core.colors.neutral.200}",
             pressed: "{core.colors.neutral.300}",
-            expanded: "{core.colors.brand.500}"
+            expanded: "{core.colors.neutral.500}"
           },
           text: {
             default: "{core.colors.neutral.700}",
@@ -451,10 +445,10 @@ var baseTheme = {
             hover: "{core.colors.neutral.50}",
             active: "{core.colors.neutral.50}",
             disabled: "{core.colors.neutral.100}",
-            selected: "{core.colors.brand.50}",
+            selected: "{core.colors.neutral.100}",
             droptarget: "{core.colors.neutral.50}",
-            checked: "{core.colors.brand.500}",
-            indeterminate: "{core.colors.brand.300}",
+            checked: "{core.colors.neutral.1000}",
+            indeterminate: "{core.colors.neutral.1000}",
             pressed: "{core.colors.neutral.100}",
             expanded: "{core.colors.neutral.50}",
             invalid: "{core.colors.neutral.0}"
@@ -462,14 +456,14 @@ var baseTheme = {
           border: {
             default: "{core.colors.neutral.300}",
             hover: "{core.colors.neutral.500}",
-            active: "{core.colors.brand.500}",
+            active: "{core.colors.neutral.500}",
             focused: "{core.colors.brand.500}",
             disabled: "{core.colors.neutral.200}",
-            selected: "{core.colors.brand.500}",
-            checked: "{core.colors.brand.500}",
-            indeterminate: "{core.colors.brand.300}",
+            selected: "{core.colors.neutral.1000}",
+            checked: "{core.colors.neutral.1000}",
+            indeterminate: "{core.colors.neutral.1000}",
             pressed: "{core.colors.neutral.500}",
-            expanded: "{core.colors.brand.500}",
+            expanded: "{core.colors.neutral.500}",
             invalid: "{core.colors.red.600}"
           },
           text: {
@@ -477,7 +471,7 @@ var baseTheme = {
             disabled: "{core.colors.neutral.500}",
             checked: "{core.colors.neutral.0}",
             invalid: "{core.colors.neutral.900}",
-            indeterminate: "{core.colors.neutral.900}"
+            indeterminate: "{core.colors.neutral.0}"
           }
         },
         secondary: {
@@ -486,30 +480,30 @@ var baseTheme = {
             hover: "{core.colors.neutral.50}",
             active: "{core.colors.neutral.100}",
             disabled: "{core.colors.neutral.100}",
-            selected: "{core.colors.brand.50}",
+            selected: "{core.colors.neutral.100}",
             droptarget: "{core.colors.neutral.50}",
-            checked: "{core.colors.brand.500}",
-            indeterminate: "{core.colors.brand.300}",
+            checked: "{core.colors.neutral.1000}",
+            indeterminate: "{core.colors.neutral.1000}",
             pressed: "{core.colors.neutral.100}",
             expanded: "{core.colors.neutral.50}"
           },
           border: {
             default: "{core.colors.neutral.200}",
             hover: "{core.colors.neutral.300}",
-            active: "{core.colors.brand.500}",
+            active: "{core.colors.neutral.500}",
             focused: "{core.colors.brand.500}",
             disabled: "{core.colors.neutral.200}",
-            selected: "{core.colors.brand.500}",
-            checked: "{core.colors.brand.500}",
-            indeterminate: "{core.colors.brand.300}",
+            selected: "{core.colors.neutral.1000}",
+            checked: "{core.colors.neutral.1000}",
+            indeterminate: "{core.colors.neutral.1000}",
             pressed: "{core.colors.neutral.300}",
-            expanded: "{core.colors.brand.500}"
+            expanded: "{core.colors.neutral.500}"
           },
           text: {
             default: "{core.colors.neutral.900}",
             disabled: "{core.colors.neutral.500}",
             checked: "{core.colors.neutral.0}",
-            indeterminate: "{core.colors.neutral.900}"
+            indeterminate: "{core.colors.neutral.0}"
           }
         },
         negative: {
@@ -596,7 +590,7 @@ var baseTheme = {
             checked: "{core.colors.neutral.500}",
             indeterminate: "{core.colors.neutral.300}",
             pressed: "{core.colors.neutral.500}",
-            expanded: "{core.colors.brand.500}"
+            expanded: "{core.colors.neutral.500}"
           },
           text: {
             default: "{core.colors.neutral.700}",
@@ -612,8 +606,8 @@ var baseTheme = {
             hover: "{core.colors.neutral.50}",
             active: "{core.colors.neutral.100}",
             disabled: "{core.colors.neutral.100}",
-            selected: "{core.colors.brand.50}",
-            droptarget: "{core.colors.brand.50}",
+            selected: "{core.colors.neutral.100}",
+            droptarget: "{core.colors.neutral.100}",
             visited: "{core.colors.neutral.50}"
           },
           border: {
@@ -622,8 +616,8 @@ var baseTheme = {
             active: "{core.colors.neutral.300}",
             focused: "{core.colors.brand.500}",
             disabled: "{core.colors.neutral.100}",
-            selected: "{core.colors.brand.300}",
-            droptarget: "{core.colors.brand.300}"
+            selected: "{core.colors.neutral.400}",
+            droptarget: "{core.colors.neutral.400}"
           },
           text: {
             default: "{core.colors.neutral.900}",
@@ -637,7 +631,7 @@ var baseTheme = {
             hover: "{core.colors.neutral.100}",
             active: "{core.colors.neutral.200}",
             disabled: "{core.colors.neutral.100}",
-            selected: "{core.colors.brand.50}",
+            selected: "{core.colors.neutral.100}",
             droptarget: "{core.colors.neutral.100}",
             visited: "{core.colors.neutral.100}"
           },
@@ -647,7 +641,7 @@ var baseTheme = {
             active: "{core.colors.neutral.300}",
             focused: "{core.colors.brand.500}",
             disabled: "{core.colors.neutral.100}",
-            selected: "{core.colors.brand.300}"
+            selected: "{core.colors.neutral.400}"
           },
           text: {
             default: "{core.colors.neutral.700}",
@@ -843,16 +837,18 @@ var baseTheme = {
           },
           border: {
             default: "{core.colors.neutral.0}",
-            focused: "{core.colors.brand.500}"
+            focused: "{core.colors.brand.500}",
+            selected: "{core.colors.neutral.1000}",
+            current: "{core.colors.neutral.1000}"
           },
           text: {
-            default: "{core.colors.brand.700}",
-            hover: "{core.colors.brand.900}",
-            active: "{core.colors.brand.900}",
+            default: "{core.colors.neutral.800}",
+            hover: "{core.colors.neutral.1000}",
+            active: "{core.colors.neutral.1000}",
             disabled: "{core.colors.neutral.500}",
-            current: "{core.colors.brand.900}",
+            current: "{core.colors.neutral.1000}",
             visited: "{core.colors.neutral.500}",
-            expanded: "{core.colors.brand.900}"
+            expanded: "{core.colors.neutral.1000}"
           }
         },
         secondary: {
@@ -861,9 +857,9 @@ var baseTheme = {
             hover: "{core.colors.neutral.100}",
             active: "{core.colors.neutral.200}",
             disabled: "{core.colors.neutral.100}",
-            selected: "{core.colors.brand.50}",
+            selected: "{core.colors.neutral.100}",
             droptarget: "{core.colors.neutral.100}",
-            current: "{core.colors.brand.100}",
+            current: "{core.colors.neutral.200}",
             visited: "{core.colors.neutral.100}",
             expanded: "{core.colors.neutral.100}"
           },
@@ -873,15 +869,15 @@ var baseTheme = {
             active: "{core.colors.neutral.300}",
             focused: "{core.colors.brand.500}",
             disabled: "{core.colors.neutral.200}",
-            selected: "{core.colors.brand.400}",
-            current: "{core.colors.brand.500}"
+            selected: "{core.colors.neutral.1000}",
+            current: "{core.colors.neutral.1000}"
           },
           text: {
             default: "{core.colors.neutral.700}",
             hover: "{core.colors.neutral.900}",
             disabled: "{core.colors.neutral.500}",
-            selected: "{core.colors.brand.700}",
-            current: "{core.colors.brand.700}",
+            selected: "{core.colors.neutral.1000}",
+            current: "{core.colors.neutral.1000}",
             visited: "{core.colors.neutral.700}",
             expanded: "{core.colors.neutral.900}"
           }
@@ -953,6 +949,11 @@ var baseTheme = {
         raised: "{core.elevation.level.2}",
         overlay: "{core.elevation.level.3}",
         blocking: "{core.elevation.level.4}"
+      },
+      tonal: {
+        raised: "{core.colors.neutral.0}",
+        overlay: "{core.colors.neutral.0}",
+        blocking: "{core.colors.neutral.0}"
       }
     },
     text: {
@@ -1108,9 +1109,9 @@ var baseTheme = {
     spacing: {
       inset: {
         control: {
-          sm: "{core.spacing.3}",
-          md: "{core.spacing.4}",
-          lg: "{core.spacing.6}"
+          sm: "{core.spacing.1}",
+          md: "{core.spacing.2}",
+          lg: "{core.spacing.4}"
         },
         surface: {
           sm: "{core.spacing.4}",
@@ -1145,11 +1146,7 @@ var baseTheme = {
       }
     },
     sizing: {
-      hit: {
-        min: "{core.sizing.hit.fine.min}",
-        base: "{core.sizing.hit.fine.base}",
-        prominent: "{core.sizing.hit.fine.prominent}"
-      },
+      hit: "{core.sizing.hit.fine}",
       icon: {
         sm: "{core.sizing.ramp.ui.2}",
         md: "{core.sizing.ramp.ui.3}",
@@ -1356,23 +1353,31 @@ var darkAlternate = {
             hover: "{core.colors.neutral.500}",
             active: "{core.colors.neutral.500}",
             disabled: "{core.colors.neutral.900}",
-            selected: "{core.colors.brand.700}",
+            selected: "{core.colors.neutral.800}",
             droptarget: "{core.colors.neutral.700}",
             pressed: "{core.colors.neutral.500}",
             expanded: "{core.colors.neutral.500}",
-            invalid: "{core.colors.neutral.700}"
+            invalid: "{core.colors.neutral.700}",
+            checked: "{core.colors.neutral.0}",
+            indeterminate: "{core.colors.neutral.0}"
           },
           border: {
             default: "{core.colors.neutral.500}",
             hover: "{core.colors.neutral.300}",
+            active: "{core.colors.neutral.300}",
             focused: "{core.colors.brand.500}",
             disabled: "{core.colors.neutral.700}",
-            invalid: "{core.colors.red.300}"
+            invalid: "{core.colors.red.300}",
+            selected: "{core.colors.neutral.300}",
+            checked: "{core.colors.neutral.0}",
+            indeterminate: "{core.colors.neutral.0}"
           },
           text: {
             default: "{core.colors.neutral.0}",
             disabled: "{core.colors.neutral.500}",
-            invalid: "{core.colors.neutral.0}"
+            invalid: "{core.colors.neutral.0}",
+            checked: "{core.colors.neutral.900}",
+            indeterminate: "{core.colors.neutral.900}"
           }
         },
         secondary: {
@@ -1381,27 +1386,30 @@ var darkAlternate = {
             hover: "{core.colors.neutral.500}",
             active: "{core.colors.neutral.500}",
             disabled: "{core.colors.neutral.900}",
-            selected: "{core.colors.brand.700}",
+            selected: "{core.colors.neutral.800}",
             droptarget: "{core.colors.neutral.700}",
             pressed: "{core.colors.neutral.500}",
-            expanded: "{core.colors.neutral.500}"
+            expanded: "{core.colors.neutral.500}",
+            checked: "{core.colors.neutral.0}",
+            indeterminate: "{core.colors.neutral.0}"
           },
           border: {
             default: "{core.colors.neutral.500}",
             hover: "{core.colors.neutral.300}",
-            active: "{core.colors.brand.500}",
+            active: "{core.colors.neutral.300}",
             focused: "{core.colors.brand.500}",
             disabled: "{core.colors.neutral.700}",
-            selected: "{core.colors.brand.500}",
-            checked: "{core.colors.brand.500}",
-            indeterminate: "{core.colors.brand.300}",
+            selected: "{core.colors.neutral.300}",
+            checked: "{core.colors.neutral.0}",
+            indeterminate: "{core.colors.neutral.0}",
             pressed: "{core.colors.neutral.300}",
-            expanded: "{core.colors.brand.500}"
+            expanded: "{core.colors.neutral.300}"
           },
           text: {
             default: "{core.colors.neutral.0}",
             disabled: "{core.colors.neutral.500}",
-            checked: "{core.colors.neutral.0}"
+            checked: "{core.colors.neutral.900}",
+            indeterminate: "{core.colors.neutral.900}"
           }
         },
         negative: {
@@ -1463,7 +1471,7 @@ var darkAlternate = {
             hover: "{core.colors.neutral.700}",
             active: "{core.colors.neutral.700}",
             disabled: "{core.colors.neutral.700}",
-            selected: "{core.colors.brand.900}",
+            selected: "{core.colors.neutral.700}",
             droptarget: "{core.colors.neutral.700}",
             visited: "{core.colors.neutral.700}"
           },
@@ -1481,7 +1489,7 @@ var darkAlternate = {
             hover: "{core.colors.neutral.500}",
             active: "{core.colors.neutral.500}",
             disabled: "{core.colors.neutral.700}",
-            selected: "{core.colors.brand.900}",
+            selected: "{core.colors.neutral.500}",
             droptarget: "{core.colors.neutral.700}",
             visited: "{core.colors.neutral.700}"
           },
@@ -1637,16 +1645,18 @@ var darkAlternate = {
           },
           border: {
             default: "{core.colors.neutral.900}",
-            focused: "{core.colors.brand.400}"
+            focused: "{core.colors.brand.400}",
+            selected: "{core.colors.neutral.0}",
+            current: "{core.colors.neutral.0}"
           },
           text: {
-            default: "{core.colors.brand.300}",
-            hover: "{core.colors.brand.100}",
-            active: "{core.colors.brand.100}",
+            default: "{core.colors.neutral.200}",
+            hover: "{core.colors.neutral.0}",
+            active: "{core.colors.neutral.0}",
             disabled: "{core.colors.neutral.500}",
-            current: "{core.colors.brand.100}",
+            current: "{core.colors.neutral.0}",
             visited: "{core.colors.neutral.300}",
-            expanded: "{core.colors.brand.100}"
+            expanded: "{core.colors.neutral.0}"
           }
         },
         secondary: {
@@ -1654,8 +1664,8 @@ var darkAlternate = {
             default: "{core.colors.neutral.900}",
             hover: "{core.colors.neutral.700}",
             active: "{core.colors.neutral.700}",
-            selected: "{core.colors.brand.900}",
-            current: "{core.colors.brand.900}",
+            selected: "{core.colors.neutral.700}",
+            current: "{core.colors.neutral.700}",
             visited: "{core.colors.neutral.900}",
             expanded: "{core.colors.neutral.700}",
             disabled: "{core.colors.neutral.700}",
@@ -1666,15 +1676,15 @@ var darkAlternate = {
             hover: "{core.colors.neutral.500}",
             active: "{core.colors.neutral.500}",
             focused: "{core.colors.brand.400}",
-            selected: "{core.colors.brand.500}",
-            current: "{core.colors.brand.500}"
+            selected: "{core.colors.neutral.300}",
+            current: "{core.colors.neutral.300}"
           },
           text: {
             default: "{core.colors.neutral.300}",
             hover: "{core.colors.neutral.0}",
             disabled: "{core.colors.neutral.500}",
-            selected: "{core.colors.brand.300}",
-            current: "{core.colors.brand.300}",
+            selected: "{core.colors.neutral.0}",
+            current: "{core.colors.neutral.0}",
             visited: "{core.colors.neutral.300}",
             expanded: "{core.colors.neutral.50}"
           }
@@ -1744,6 +1754,11 @@ var darkAlternate = {
         raised: "{core.elevation.emphatic.2}",
         overlay: "{core.elevation.emphatic.3}",
         blocking: "{core.elevation.emphatic.4}"
+      },
+      tonal: {
+        raised: "{core.colors.neutral.800}",
+        overlay: "{core.colors.neutral.700}",
+        blocking: "{core.colors.neutral.700}"
       }
     }
   }

package/dist/css-BVePVvTJ.mjs

@@ -0,0 +1,96 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import { n as toCssVars } from "./toCssVars-CTGqZ_t3.mjs";
+
+//#region src/roots/preflight.ts
+/**
+* The theme's base stylesheet as a raw CSS string — box-sizing reset, body
+* typography/colour bound to semantic tokens, and the reduced-motion guard.
+* Inject once at the app root. Requires the `--tt-*` custom properties to be
+* present (via `getThemeStylesContent` / `<ThemeStyles>` / `<ThemeProvider>`).
+*/
+var PREFLIGHT_CSS = `*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: var(--tt-text-body-md-font-family, system-ui, sans-serif);
+  font-size: var(--tt-text-body-md-font-size);
+  line-height: var(--tt-text-body-md-line-height);
+  color: var(--tt-colors-informational-primary-text-default);
+  background-color: var(--tt-colors-informational-primary-background-default);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}`;
+/**
+* Returns the theme's base stylesheet — see {@link PREFLIGHT_CSS}. A function
+* for API symmetry with `getThemeStylesContent`; the value is static.
+*
+* @example
+* ```ts
+* import { getPreflightStyles } from '@ttoss/fsl-theme/css';
+* res.type('text/css').send(getPreflightStyles());
+* ```
+*/
+var getPreflightStyles = () => {
+  return PREFLIGHT_CSS;
+};
+
+//#endregion
+//#region src/css.ts
+/**
+* Returns the full CSS string for a theme bundle — all `--tt-*` custom
+* properties, coarse-pointer overrides, reduced-motion overrides, and
+* container query progressive enhancement — ready to inject into a
+* `<style>` tag or serve as a static `.css` file.
+*
+* Symmetric counterpart to `getThemeScriptContent()` for CSS.
+* Use `<ThemeStyles>` from `@ttoss/fsl-theme/react` for React apps.
+*
+* When `themeId` is omitted (canonical 1-theme model), CSS targets `:root` and
+* the alternate mode selector becomes `:root[data-tt-mode="dark"]`. Pass
+* `themeId` only for multi-theme scenarios (Storybook, micro-frontends).
+*
+* @example
+* ```ts
+* // Canonical: no themeId needed (CSS goes to :root)
+* import { createTheme } from '@ttoss/fsl-theme';
+* import { getThemeStylesContent } from '@ttoss/fsl-theme/css';
+*
+* const myBundle = createTheme();
+*
+* app.get('/theme.css', (_, res) => {
+*   res.type('text/css').send(getThemeStylesContent(myBundle));
+* });
+*
+* // Multi-theme: explicit themeId for scoping
+* res.type('text/css').send(getThemeStylesContent(myBundle, 'myTheme'));
+* ```
+*/
+var getThemeStylesContent = (bundle, themeId, options) => {
+  return toCssVars(bundle, {
+    themeId,
+    systemModeFallback: options?.systemModeFallback
+  }).toCssString();
+};
+
+//#endregion
+export { PREFLIGHT_CSS as n, getPreflightStyles as r, getThemeStylesContent as t };

package/dist/css-CKvOE4mT.cjs

@@ -0,0 +1,113 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+const require_toCssVars = require('./toCssVars-NGi4K2Oc.cjs');
+
+//#region src/roots/preflight.ts
+/**
+* The theme's base stylesheet as a raw CSS string — box-sizing reset, body
+* typography/colour bound to semantic tokens, and the reduced-motion guard.
+* Inject once at the app root. Requires the `--tt-*` custom properties to be
+* present (via `getThemeStylesContent` / `<ThemeStyles>` / `<ThemeProvider>`).
+*/
+var PREFLIGHT_CSS = `*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: var(--tt-text-body-md-font-family, system-ui, sans-serif);
+  font-size: var(--tt-text-body-md-font-size);
+  line-height: var(--tt-text-body-md-line-height);
+  color: var(--tt-colors-informational-primary-text-default);
+  background-color: var(--tt-colors-informational-primary-background-default);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}`;
+/**
+* Returns the theme's base stylesheet — see {@link PREFLIGHT_CSS}. A function
+* for API symmetry with `getThemeStylesContent`; the value is static.
+*
+* @example
+* ```ts
+* import { getPreflightStyles } from '@ttoss/fsl-theme/css';
+* res.type('text/css').send(getPreflightStyles());
+* ```
+*/
+var getPreflightStyles = () => {
+  return PREFLIGHT_CSS;
+};
+
+//#endregion
+//#region src/css.ts
+/**
+* Returns the full CSS string for a theme bundle — all `--tt-*` custom
+* properties, coarse-pointer overrides, reduced-motion overrides, and
+* container query progressive enhancement — ready to inject into a
+* `<style>` tag or serve as a static `.css` file.
+*
+* Symmetric counterpart to `getThemeScriptContent()` for CSS.
+* Use `<ThemeStyles>` from `@ttoss/fsl-theme/react` for React apps.
+*
+* When `themeId` is omitted (canonical 1-theme model), CSS targets `:root` and
+* the alternate mode selector becomes `:root[data-tt-mode="dark"]`. Pass
+* `themeId` only for multi-theme scenarios (Storybook, micro-frontends).
+*
+* @example
+* ```ts
+* // Canonical: no themeId needed (CSS goes to :root)
+* import { createTheme } from '@ttoss/fsl-theme';
+* import { getThemeStylesContent } from '@ttoss/fsl-theme/css';
+*
+* const myBundle = createTheme();
+*
+* app.get('/theme.css', (_, res) => {
+*   res.type('text/css').send(getThemeStylesContent(myBundle));
+* });
+*
+* // Multi-theme: explicit themeId for scoping
+* res.type('text/css').send(getThemeStylesContent(myBundle, 'myTheme'));
+* ```
+*/
+var getThemeStylesContent = (bundle, themeId, options) => {
+  return require_toCssVars.toCssVars(bundle, {
+    themeId,
+    systemModeFallback: options?.systemModeFallback
+  }).toCssString();
+};
+
+//#endregion
+Object.defineProperty(exports, 'PREFLIGHT_CSS', {
+  enumerable: true,
+  get: function () {
+    return PREFLIGHT_CSS;
+  }
+});
+Object.defineProperty(exports, 'getPreflightStyles', {
+  enumerable: true,
+  get: function () {
+    return getPreflightStyles;
+  }
+});
+Object.defineProperty(exports, 'getThemeStylesContent', {
+  enumerable: true,
+  get: function () {
+    return getThemeStylesContent;
+  }
+});