@ttoss/fsl-theme 2.1.2 → 2.1.4

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

@@ -52,17 +52,17 @@ var baseTheme = {
       },
       neutral: {
         0: "#ffffff",
-        50: "#f8fafc",
-        100: "#f1f5f9",
-        200: "#e2e8f0",
-        300: "#cbd5e1",
-        400: "#94a3b8",
-        500: "#64748b",
-        600: "#475569",
-        700: "#334155",
-        800: "#1e293b",
-        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",
@@ -133,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"
       },
@@ -352,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}",
@@ -426,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}",
@@ -445,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}"
@@ -456,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: {
@@ -471,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: {
@@ -480,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: {
@@ -590,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}",
@@ -606,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: {
@@ -616,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}",
@@ -631,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}"
           },
@@ -641,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}",
@@ -837,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: {
@@ -855,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}"
           },
@@ -867,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}"
           }
@@ -1351,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: {
@@ -1376,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: {
@@ -1458,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}"
           },
@@ -1476,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}"
           },
@@ -1632,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: {
@@ -1649,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}",
@@ -1661,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}"
           }

package/dist/dataviz/index.cjs

@@ -3,7 +3,9 @@ Object.defineProperty(exports, Symbol.toStringTag, {
   value: 'Module'
 });
 const require_react = require('../react-C1WRCOFF.cjs');
-const require_withDataviz = require('../withDataviz-B-XQ1MDT.cjs');
+const require_baseBundle = require('../baseBundle-DaO6jyk3.cjs');
+const require_withDataviz = require('../withDataviz-BzDgnXPu.cjs');
+const require_toVars = require('../toVars-O-E9ryvq.cjs');
 
 //#region src/dataviz/useDatavizTokens.ts
 /**
@@ -38,8 +40,35 @@ var useDatavizTokens = () => {
   return tokens.dataviz;
 };
 
+//#endregion
+//#region src/dataviz/vars.ts
+/**
+* Typed CSS-var mirror of the dataviz semantic tokens — the extension's
+* counterpart of the foundation's `vars` export.
+*
+* Var names derive from token paths alone, so this map is valid for any
+* theme extended with `withDataviz` (only the values behind the CSS vars
+* change per theme/mode). Chart code references the vars; the CSS emitted
+* by `toCssVars` carries the values.
+*
+* @example
+* ```tsx
+* import { datavizVars } from '@ttoss/fsl-theme/dataviz';
+*
+* <rect fill={datavizVars.color.series[1]} />
+* // → fill: 'var(--tt-dataviz-color-series-1)'
+* ```
+*/
+var datavizVars = require_toVars.buildVarsMap({
+  core: require_baseBundle.baseBundle.base.core,
+  semantic: {
+    dataviz: require_withDataviz.semanticDataviz
+  }
+}).dataviz;
+
 //#endregion
 exports.coreDataviz = require_withDataviz.coreDataviz;
+exports.datavizVars = datavizVars;
 exports.semanticDataviz = require_withDataviz.semanticDataviz;
 exports.useDatavizTokens = useDatavizTokens;
 exports.withDataviz = require_withDataviz.withDataviz;

package/dist/dataviz/index.d.cts

@@ -1,5 +1,6 @@
 
 import { c as SemanticDataviz, i as ThemeBundle, s as CoreDataviz } from "../Types-8o6d09ll.cjs";
+import { t as CssVarsMap } from "../toVars-BcSZEbMb.cjs";
 
 //#region src/dataviz/baseTheme.d.ts
 /**
@@ -39,6 +40,26 @@ declare const semanticDataviz: SemanticDataviz;
  */
 declare const useDatavizTokens: () => SemanticDataviz;
 //#endregion
+//#region src/dataviz/vars.d.ts
+/**
+ * Typed CSS-var mirror of the dataviz semantic tokens — the extension's
+ * counterpart of the foundation's `vars` export.
+ *
+ * Var names derive from token paths alone, so this map is valid for any
+ * theme extended with `withDataviz` (only the values behind the CSS vars
+ * change per theme/mode). Chart code references the vars; the CSS emitted
+ * by `toCssVars` carries the values.
+ *
+ * @example
+ * ```tsx
+ * import { datavizVars } from '@ttoss/fsl-theme/dataviz';
+ *
+ * <rect fill={datavizVars.color.series[1]} />
+ * // → fill: 'var(--tt-dataviz-color-series-1)'
+ * ```
+ */
+declare const datavizVars: CssVarsMap<SemanticDataviz>;
+//#endregion
 //#region src/dataviz/withDataviz.d.ts
 /**
  * Extend a `ThemeBundle` with the dataviz token layer.
@@ -63,4 +84,4 @@ declare const useDatavizTokens: () => SemanticDataviz;
  */
 declare const withDataviz: (bundle: ThemeBundle) => ThemeBundle;
 //#endregion
-export { type CoreDataviz, type SemanticDataviz, coreDataviz, semanticDataviz, useDatavizTokens, withDataviz };
+export { type CoreDataviz, type SemanticDataviz, coreDataviz, datavizVars, semanticDataviz, useDatavizTokens, withDataviz };

package/dist/dataviz/index.d.mts

@@ -1,5 +1,6 @@
 
 import { c as SemanticDataviz, i as ThemeBundle, s as CoreDataviz } from "../Types-8o6d09ll.mjs";
+import { t as CssVarsMap } from "../toVars-BTDr1haK.mjs";
 
 //#region src/dataviz/baseTheme.d.ts
 /**
@@ -39,6 +40,26 @@ declare const semanticDataviz: SemanticDataviz;
  */
 declare const useDatavizTokens: () => SemanticDataviz;
 //#endregion
+//#region src/dataviz/vars.d.ts
+/**
+ * Typed CSS-var mirror of the dataviz semantic tokens — the extension's
+ * counterpart of the foundation's `vars` export.
+ *
+ * Var names derive from token paths alone, so this map is valid for any
+ * theme extended with `withDataviz` (only the values behind the CSS vars
+ * change per theme/mode). Chart code references the vars; the CSS emitted
+ * by `toCssVars` carries the values.
+ *
+ * @example
+ * ```tsx
+ * import { datavizVars } from '@ttoss/fsl-theme/dataviz';
+ *
+ * <rect fill={datavizVars.color.series[1]} />
+ * // → fill: 'var(--tt-dataviz-color-series-1)'
+ * ```
+ */
+declare const datavizVars: CssVarsMap<SemanticDataviz>;
+//#endregion
 //#region src/dataviz/withDataviz.d.ts
 /**
  * Extend a `ThemeBundle` with the dataviz token layer.
@@ -63,4 +84,4 @@ declare const useDatavizTokens: () => SemanticDataviz;
  */
 declare const withDataviz: (bundle: ThemeBundle) => ThemeBundle;
 //#endregion
-export { type CoreDataviz, type SemanticDataviz, coreDataviz, semanticDataviz, useDatavizTokens, withDataviz };
+export { type CoreDataviz, type SemanticDataviz, coreDataviz, datavizVars, semanticDataviz, useDatavizTokens, withDataviz };

package/dist/dataviz/index.mjs

@@ -1,6 +1,8 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import { n as coreDataviz, r as semanticDataviz, t as withDataviz } from "../withDataviz-B3mEhBPh.mjs";
+import { t as baseBundle } from "../baseBundle-BpCf8Cc9.mjs";
+import { n as coreDataviz, r as semanticDataviz, t as withDataviz } from "../withDataviz-BKqs0un0.mjs";
 import { useTokens } from "../react.mjs";
+import { t as buildVarsMap } from "../toVars-BDBDTI_F.mjs";
 
 //#region src/dataviz/useDatavizTokens.ts
 /**
@@ -36,4 +38,30 @@ var useDatavizTokens = () => {
 };
 
 //#endregion
-export { coreDataviz, semanticDataviz, useDatavizTokens, withDataviz };
+//#region src/dataviz/vars.ts
+/**
+* Typed CSS-var mirror of the dataviz semantic tokens — the extension's
+* counterpart of the foundation's `vars` export.
+*
+* Var names derive from token paths alone, so this map is valid for any
+* theme extended with `withDataviz` (only the values behind the CSS vars
+* change per theme/mode). Chart code references the vars; the CSS emitted
+* by `toCssVars` carries the values.
+*
+* @example
+* ```tsx
+* import { datavizVars } from '@ttoss/fsl-theme/dataviz';
+*
+* <rect fill={datavizVars.color.series[1]} />
+* // → fill: 'var(--tt-dataviz-color-series-1)'
+* ```
+*/
+var datavizVars = buildVarsMap({
+  core: baseBundle.base.core,
+  semantic: {
+    dataviz: semanticDataviz
+  }
+}).dataviz;
+
+//#endregion
+export { coreDataviz, datavizVars, semanticDataviz, useDatavizTokens, withDataviz };

package/dist/index.cjs

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, {
   value: 'Module'
 });
-const require_createTheme = require('./createTheme-BzlJdFAG.cjs');
+const require_createTheme = require('./createTheme-r7mUCPFX.cjs');
 const require_themes_bruttal = require('./themes/bruttal.cjs');
 exports.baseTheme = require_createTheme.baseTheme;
 exports.bruttal = require_themes_bruttal.bruttal;

package/dist/index.mjs

@@ -1,4 +1,4 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import { a as darkAlternate, i as baseTheme, n as createTheme } from "./createTheme-gTjIryKH.mjs";
+import { a as darkAlternate, i as baseTheme, n as createTheme } from "./createTheme-C05ONnLw.mjs";
 import { bruttal } from "./themes/bruttal.mjs";
 export { baseTheme, bruttal, createTheme, darkAlternate };

package/dist/themes/bruttal.cjs

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, {
   value: 'Module'
 });
-const require_createTheme = require('../createTheme-BzlJdFAG.cjs');
+const require_createTheme = require('../createTheme-r7mUCPFX.cjs');
 const require_helpers = require('../helpers-BU40JvFA.cjs');
-const require_withDataviz = require('../withDataviz-B-XQ1MDT.cjs');
+const require_withDataviz = require('../withDataviz-BzDgnXPu.cjs');
 
 //#region src/themes/bruttal.ts
 /**

package/dist/themes/bruttal.mjs

@@ -1,7 +1,7 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import { a as darkAlternate, n as createTheme } from "../createTheme-gTjIryKH.mjs";
+import { a as darkAlternate, n as createTheme } from "../createTheme-C05ONnLw.mjs";
 import { r as deepMerge } from "../helpers-BXaKe2s3.mjs";
-import { t as withDataviz } from "../withDataviz-B3mEhBPh.mjs";
+import { t as withDataviz } from "../withDataviz-BKqs0un0.mjs";
 
 //#region src/themes/bruttal.ts
 /**

package/dist/toVars-BDBDTI_F.mjs

@@ -0,0 +1,39 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import { o as isPlainObject } from "./helpers-BXaKe2s3.mjs";
+import { t as toCssVarName } from "./toCssVars-CTGqZ_t3.mjs";
+
+//#region src/roots/toVars.ts
+/**
+* Build a deeply-nested CSS var-reference map from a theme's semantic layer.
+*
+* Walks `theme.semantic` recursively and replaces every leaf value with the
+* corresponding `var(--tt-*)` CSS custom property reference. The resulting
+* object has the exact same shape as `theme.semantic` but with `string` leaves.
+*
+* Keys starting with `$` are skipped (deprecation metadata).
+*
+* @example
+* ```ts
+* import { buildVarsMap } from './roots/toVars';
+* import { baseTheme } from './baseTheme';
+*
+* const vars = buildVarsMap(baseTheme);
+* vars.colors.action.primary.background.default
+* // → 'var(--tt-colors-action-primary-background-default)'
+* ```
+*/
+var buildVarsMap = theme => {
+  const walk = (obj, prefix) => {
+    const result = {};
+    for (const [key, value] of Object.entries(obj)) {
+      if (key.startsWith("$")) continue;
+      const fullPath = `${prefix}.${key}`;
+      if (isPlainObject(value)) result[key] = walk(value, fullPath);else if (typeof value === "string" || typeof value === "number") result[key] = `var(${toCssVarName(fullPath)})`;
+    }
+    return result;
+  };
+  return walk(theme.semantic, "semantic");
+};
+
+//#endregion
+export { buildVarsMap as t };