@ttoss/fsl-theme 1.1.13 → 1.1.14

package/dist/{esm/chunk-4Q4P3JBB.js → tokenRegistry-DjgSN3oU.mjs}

@@ -1,9 +1,16 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-
-// src/roots/tokenRegistry.ts
-var TOKEN_PATH_REGISTRY = [
-// -- Core dataviz (longer/more-specific entries first) --------------------
-{
+//#region src/roots/tokenRegistry.ts
+/**
+* Ordered registry of token path prefixes → CSS var prefix + DTCG type.
+*
+* Convention:
+*   - Core tokens:     `--tt-core-<family>-<subpath>`
+*   - Semantic tokens: `--tt-<family>-<subpath>`
+*
+* Longer (more specific) prefixes come first so that consumers using
+* first-match lookup get the correct result.
+*/
+const TOKEN_PATH_REGISTRY = [{
   path: "core.dataviz.color.",
   cssPrefix: "--tt-core-dataviz-color-",
   dtcgType: "color"
@@ -15,9 +22,7 @@ var TOKEN_PATH_REGISTRY = [
   path: "core.dataviz.",
   cssPrefix: "--tt-core-dataviz-",
   dtcgType: "string"
-},
-// -- Semantic dataviz (longer/more-specific entries first) ----------------
-{
+}, {
   path: "semantic.dataviz.color.",
   cssPrefix: "--tt-dataviz-",
   dtcgType: "color"
@@ -37,9 +42,7 @@ var TOKEN_PATH_REGISTRY = [
   path: "semantic.dataviz.",
   cssPrefix: "--tt-dataviz-",
   dtcgType: "string"
-},
-// -- Core paths -----------------------------------------------------------
-{
+}, {
   path: "core.colors.",
   cssPrefix: "--tt-core-colors-",
   dtcgType: "color"
@@ -83,9 +86,7 @@ var TOKEN_PATH_REGISTRY = [
   path: "core.spacing.",
   cssPrefix: "--tt-core-spacing-",
   dtcgType: "dimension"
-},
-// CSS keywords (auto, fit-content, etc.) are not DTCG dimensions — more-specific entry first.
-{
+}, {
   path: "core.sizing.behavior.",
   cssPrefix: "--tt-core-sizing-behavior-",
   dtcgType: "string"
@@ -125,9 +126,7 @@ var TOKEN_PATH_REGISTRY = [
   path: "core.breakpoints.",
   cssPrefix: "--tt-core-breakpoints-",
   dtcgType: "dimension"
-},
-// -- Semantic paths -------------------------------------------------------
-{
+}, {
   path: "semantic.colors.",
   cssPrefix: "--tt-colors-",
   dtcgType: "color"
@@ -176,10 +175,14 @@ var TOKEN_PATH_REGISTRY = [
   cssPrefix: "--tt-z-index-",
   dtcgType: "number"
 }];
-var CSS_PATH_PREFIXES = TOKEN_PATH_REGISTRY.map(e => {
+/** Derived lookup table: `[path, cssPrefix]` pairs. */
+const CSS_PATH_PREFIXES = TOKEN_PATH_REGISTRY.map(e => {
   return [e.path, e.cssPrefix];
 });
-var DTCG_TYPE_PREFIXES = TOKEN_PATH_REGISTRY.map(e => {
+/** Derived lookup table: `[path, dtcgType]` pairs. */
+const DTCG_TYPE_PREFIXES = TOKEN_PATH_REGISTRY.map(e => {
   return [e.path, e.dtcgType];
 });
-export { CSS_PATH_PREFIXES, DTCG_TYPE_PREFIXES };
+
+//#endregion
+export { DTCG_TYPE_PREFIXES as n, CSS_PATH_PREFIXES as t };

package/dist/tokenRegistry-OhaJ9sPJ.cjs

@@ -0,0 +1,199 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+//#region src/roots/tokenRegistry.ts
+/**
+* Ordered registry of token path prefixes → CSS var prefix + DTCG type.
+*
+* Convention:
+*   - Core tokens:     `--tt-core-<family>-<subpath>`
+*   - Semantic tokens: `--tt-<family>-<subpath>`
+*
+* Longer (more specific) prefixes come first so that consumers using
+* first-match lookup get the correct result.
+*/
+const TOKEN_PATH_REGISTRY = [{
+  path: "core.dataviz.color.",
+  cssPrefix: "--tt-core-dataviz-color-",
+  dtcgType: "color"
+}, {
+  path: "core.dataviz.opacity.",
+  cssPrefix: "--tt-core-dataviz-opacity-",
+  dtcgType: "number"
+}, {
+  path: "core.dataviz.",
+  cssPrefix: "--tt-core-dataviz-",
+  dtcgType: "string"
+}, {
+  path: "semantic.dataviz.color.",
+  cssPrefix: "--tt-dataviz-",
+  dtcgType: "color"
+}, {
+  path: "semantic.dataviz.encoding.opacity.",
+  cssPrefix: "--tt-dataviz-",
+  dtcgType: "number"
+}, {
+  path: "semantic.dataviz.geo.",
+  cssPrefix: "--tt-dataviz-",
+  dtcgType: "color"
+}, {
+  path: "semantic.dataviz.encoding.",
+  cssPrefix: "--tt-dataviz-",
+  dtcgType: "string"
+}, {
+  path: "semantic.dataviz.",
+  cssPrefix: "--tt-dataviz-",
+  dtcgType: "string"
+}, {
+  path: "core.colors.",
+  cssPrefix: "--tt-core-colors-",
+  dtcgType: "color"
+}, {
+  path: "core.elevation.emphatic.",
+  cssPrefix: "--tt-core-elevation-emphatic-",
+  dtcgType: "shadow"
+}, {
+  path: "core.elevation.level.",
+  cssPrefix: "--tt-core-elevation-",
+  dtcgType: "shadow"
+}, {
+  path: "core.font.family.",
+  cssPrefix: "--tt-core-font-family-",
+  dtcgType: "fontFamily"
+}, {
+  path: "core.font.weight.",
+  cssPrefix: "--tt-core-font-weight-",
+  dtcgType: "fontWeight"
+}, {
+  path: "core.font.leading.",
+  cssPrefix: "--tt-core-font-leading-",
+  dtcgType: "number"
+}, {
+  path: "core.font.tracking.",
+  cssPrefix: "--tt-core-font-tracking-",
+  dtcgType: "dimension"
+}, {
+  path: "core.font.optical.",
+  cssPrefix: "--tt-core-font-optical-",
+  dtcgType: "string"
+}, {
+  path: "core.font.numeric.",
+  cssPrefix: "--tt-core-font-numeric-",
+  dtcgType: "string"
+}, {
+  path: "core.font.scale.",
+  cssPrefix: "--tt-core-font-scale-",
+  dtcgType: "dimension"
+}, {
+  path: "core.spacing.",
+  cssPrefix: "--tt-core-spacing-",
+  dtcgType: "dimension"
+}, {
+  path: "core.sizing.behavior.",
+  cssPrefix: "--tt-core-sizing-behavior-",
+  dtcgType: "string"
+}, {
+  path: "core.sizing.",
+  cssPrefix: "--tt-core-sizing-",
+  dtcgType: "dimension"
+}, {
+  path: "core.radii.",
+  cssPrefix: "--tt-core-radii-",
+  dtcgType: "dimension"
+}, {
+  path: "core.border.width.",
+  cssPrefix: "--tt-core-border-width-",
+  dtcgType: "dimension"
+}, {
+  path: "core.border.style.",
+  cssPrefix: "--tt-core-border-style-",
+  dtcgType: "string"
+}, {
+  path: "core.opacity.",
+  cssPrefix: "--tt-core-opacity-",
+  dtcgType: "number"
+}, {
+  path: "core.motion.duration.",
+  cssPrefix: "--tt-core-motion-duration-",
+  dtcgType: "duration"
+}, {
+  path: "core.motion.easing.",
+  cssPrefix: "--tt-core-motion-easing-",
+  dtcgType: "string"
+}, {
+  path: "core.zIndex.level.",
+  cssPrefix: "--tt-core-z-index-",
+  dtcgType: "number"
+}, {
+  path: "core.breakpoints.",
+  cssPrefix: "--tt-core-breakpoints-",
+  dtcgType: "dimension"
+}, {
+  path: "semantic.colors.",
+  cssPrefix: "--tt-colors-",
+  dtcgType: "color"
+}, {
+  path: "semantic.elevation.",
+  cssPrefix: "--tt-elevation-",
+  dtcgType: "shadow"
+}, {
+  path: "semantic.text.",
+  cssPrefix: "--tt-text-",
+  dtcgType: "string"
+}, {
+  path: "semantic.spacing.",
+  cssPrefix: "--tt-spacing-",
+  dtcgType: "dimension"
+}, {
+  path: "semantic.sizing.",
+  cssPrefix: "--tt-sizing-",
+  dtcgType: "dimension"
+}, {
+  path: "semantic.radii.",
+  cssPrefix: "--tt-radii-",
+  dtcgType: "dimension"
+}, {
+  path: "semantic.focus.",
+  cssPrefix: "--tt-focus-",
+  dtcgType: "string"
+}, {
+  path: "semantic.overlay.",
+  cssPrefix: "--tt-overlay-",
+  dtcgType: "color"
+}, {
+  path: "semantic.border.",
+  cssPrefix: "--tt-border-",
+  dtcgType: "string"
+}, {
+  path: "semantic.opacity.",
+  cssPrefix: "--tt-opacity-",
+  dtcgType: "number"
+}, {
+  path: "semantic.motion.",
+  cssPrefix: "--tt-motion-",
+  dtcgType: "string"
+}, {
+  path: "semantic.zIndex.layer.",
+  cssPrefix: "--tt-z-index-",
+  dtcgType: "number"
+}];
+/** Derived lookup table: `[path, cssPrefix]` pairs. */
+const CSS_PATH_PREFIXES = TOKEN_PATH_REGISTRY.map(e => {
+  return [e.path, e.cssPrefix];
+});
+/** Derived lookup table: `[path, dtcgType]` pairs. */
+const DTCG_TYPE_PREFIXES = TOKEN_PATH_REGISTRY.map(e => {
+  return [e.path, e.dtcgType];
+});
+
+//#endregion
+Object.defineProperty(exports, 'CSS_PATH_PREFIXES', {
+  enumerable: true,
+  get: function () {
+    return CSS_PATH_PREFIXES;
+  }
+});
+Object.defineProperty(exports, 'DTCG_TYPE_PREFIXES', {
+  enumerable: true,
+  get: function () {
+    return DTCG_TYPE_PREFIXES;
+  }
+});

package/dist/vars.cjs

@@ -0,0 +1,127 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+Object.defineProperty(exports, Symbol.toStringTag, {
+  value: 'Module'
+});
+const require_helpers = require('./helpers-4p4-QVt_.cjs');
+const require_baseBundle = require('./baseBundle-iEFf5nqT.cjs');
+const require_toCssVars = require('./toCssVars-DudHKvt2.cjs');
+
+//#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-action-primary-background-default)'
+* ```
+*/
+const 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 (require_helpers.isPlainObject(value)) result[key] = walk(value, fullPath);else if (typeof value === "string" || typeof value === "number") result[key] = `var(${require_toCssVars.toCssVarName(fullPath)})`;
+    }
+    return result;
+  };
+  return walk(theme.semantic, "semantic");
+};
+
+//#endregion
+//#region src/vars.ts
+/**
+* Static map of all semantic tokens as typed CSS `var(--tt-*)` references.
+*
+* Every leaf value is a CSS Custom Property reference string — zero runtime
+* overhead, full autocomplete, structural parity with `SemanticTokens`.
+*
+* The var names are stable across themes and modes: only the values behind
+* the CSS vars change when the theme or mode switches. Components reference
+* the vars; CSS (generated by `toCssVars`) carries the values.
+*
+* ## Usage with Ark UI / CSS-in-JS
+*
+* ```tsx
+* import { vars } from '@ttoss/fsl-theme/vars';
+*
+* <Button style={{ background: vars.colors.action.primary.background.default }} />
+* // → background: 'var(--tt-action-primary-background-default)'
+* ```
+*
+* ## Usage in CSS / CSS Modules
+*
+* ```css
+* .button {
+*   background: var(--tt-action-primary-background-default);
+*   color: var(--tt-action-primary-text-default);
+* }
+* ```
+*
+* (For plain CSS you can use the var names directly — `vars` is most valuable
+* when you need TypeScript autocomplete in inline styles or CSS-in-JS.)
+*
+* ## Usage in Tailwind plugins / PostCSS
+*
+* ```ts
+* import { toCssVarName } from '@ttoss/fsl-theme/css';
+* // toCssVarName gives you the raw CSS property name without `var()`.
+* ```
+*
+* ## Limitations
+*
+* `vars` reflects the semantic token shape of the **default theme**. If your
+* project extends `SemanticTokens` with custom token families (e.g. a
+* `dataviz` palette, project-specific component tokens), those extra leaves
+* won't appear on this export.
+*
+* ### Typed extension recipe
+*
+* Build your own typed vars object using the public `buildVarsMap` helper
+* together with `CssVarsMap`:
+*
+* ```ts
+* // my-theme.ts
+* import { createTheme, type SemanticTokens } from '@ttoss/fsl-theme';
+* import { buildVarsMap, type CssVarsMap } from '@ttoss/fsl-theme/vars';
+*
+* // 1. Extend the semantic shape structurally.
+* type MySemanticTokens = SemanticTokens & {
+*   colors: SemanticTokens['colors'] & {
+*     brandX: { primary: { default: string } };
+*   };
+* };
+*
+* const myTheme = createTheme({ ... });
+*
+* // 2. Build a typed mirror of the extended shape.
+* export const myVars: CssVarsMap<MySemanticTokens> =
+*   buildVarsMap(myTheme.base) as CssVarsMap<MySemanticTokens>;
+*
+* myVars.colors.brandX.primary.default;
+* // → 'var(--tt-colors-brandx-primary-default)'
+* ```
+*
+* For one-off custom keys where the extra structure is trivial, use
+* `toCssVarName` from `'@ttoss/fsl-theme/css'` to construct individual var
+* references without declaring a full extended type.
+*
+* @see {@link toCssVarName}        — for raw CSS property names (without `var()`)
+* @see {@link useResolvedTokens}  — for resolved raw values in non-CSS environments (React Native, canvas, PDF)
+*/
+const vars = buildVarsMap(require_baseBundle.baseBundle.base);
+
+//#endregion
+exports.buildVarsMap = buildVarsMap;
+exports.vars = vars;

package/dist/{vars.d.ts → vars.d.cts}

@@ -1,5 +1,7 @@
-import { T as ThemeTokens, S as SemanticTokens } from './Types-6tR0_2Ss.js';
 
+import { i as ThemeTokens, n as SemanticTokens } from "./Types-BiBa17RL.cjs";
+
+//#region src/roots/toVars.d.ts
 /**
  * Transforms a token-tree type into an identical structure where every leaf
  * value becomes `string` (a CSS `var(--tt-*)` reference).
@@ -19,9 +21,7 @@ import { T as ThemeTokens, S as SemanticTokens } from './Types-6tR0_2Ss.js';
  * // → { action: { primary: { background: { default: string } } } }
  * ```
  */
-type CssVarsMap<T> = {
-    [K in keyof T as K extends `$${string}` ? never : K]: NonNullable<T[K]> extends string | number ? string : undefined extends T[K] ? CssVarsMap<NonNullable<T[K]>> | undefined : CssVarsMap<NonNullable<T[K]>>;
-};
+type CssVarsMap<T> = { [K in keyof T as K extends `$${string}` ? never : K]: NonNullable<T[K]> extends string | number ? string : undefined extends T[K] ? CssVarsMap<NonNullable<T[K]>> | undefined : CssVarsMap<NonNullable<T[K]>> };
 /**
  * Build a deeply-nested CSS var-reference map from a theme's semantic layer.
  *
@@ -42,7 +42,8 @@ type CssVarsMap<T> = {
  * ```
  */
 declare const buildVarsMap: (theme: ThemeTokens) => CssVarsMap<ThemeTokens["semantic"]>;
-
+//#endregion
+//#region src/vars.d.ts
 /**
  * Static map of all semantic tokens as typed CSS `var(--tt-*)` references.
  *
@@ -123,5 +124,5 @@ declare const buildVarsMap: (theme: ThemeTokens) => CssVarsMap<ThemeTokens["sema
  * @see {@link useResolvedTokens}  — for resolved raw values in non-CSS environments (React Native, canvas, PDF)
  */
 declare const vars: CssVarsMap<SemanticTokens>;
-
-export { type CssVarsMap, buildVarsMap, vars };
+//#endregion
+export { type CssVarsMap, buildVarsMap, vars };

package/dist/vars.d.mts

@@ -0,0 +1,128 @@
+
+import { i as ThemeTokens, n as SemanticTokens } from "./Types-BiBa17RL.mjs";
+
+//#region src/roots/toVars.d.ts
+/**
+ * Transforms a token-tree type into an identical structure where every leaf
+ * value becomes `string` (a CSS `var(--tt-*)` reference).
+ *
+ * Keys starting with `$` (e.g. `$deprecated`) are excluded — they are
+ * metadata, not consumable tokens.
+ *
+ * Optional keys in the source type remain optional in the mapped type, so
+ * theme extensions such as `dataviz?` are typed as `CssVarsMap<...> | undefined`
+ * and TypeScript will require callers to guard against `undefined` before
+ * accessing their members.
+ *
+ * @example
+ * ```ts
+ * type Colors = { action: { primary: { background: { default: TokenRef } } } };
+ * type ColorVars = CssVarsMap<Colors>;
+ * // → { action: { primary: { background: { default: string } } } }
+ * ```
+ */
+type CssVarsMap<T> = { [K in keyof T as K extends `$${string}` ? never : K]: NonNullable<T[K]> extends string | number ? string : undefined extends T[K] ? CssVarsMap<NonNullable<T[K]>> | undefined : CssVarsMap<NonNullable<T[K]>> };
+/**
+ * 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-action-primary-background-default)'
+ * ```
+ */
+declare const buildVarsMap: (theme: ThemeTokens) => CssVarsMap<ThemeTokens["semantic"]>;
+//#endregion
+//#region src/vars.d.ts
+/**
+ * Static map of all semantic tokens as typed CSS `var(--tt-*)` references.
+ *
+ * Every leaf value is a CSS Custom Property reference string — zero runtime
+ * overhead, full autocomplete, structural parity with `SemanticTokens`.
+ *
+ * The var names are stable across themes and modes: only the values behind
+ * the CSS vars change when the theme or mode switches. Components reference
+ * the vars; CSS (generated by `toCssVars`) carries the values.
+ *
+ * ## Usage with Ark UI / CSS-in-JS
+ *
+ * ```tsx
+ * import { vars } from '@ttoss/fsl-theme/vars';
+ *
+ * <Button style={{ background: vars.colors.action.primary.background.default }} />
+ * // → background: 'var(--tt-action-primary-background-default)'
+ * ```
+ *
+ * ## Usage in CSS / CSS Modules
+ *
+ * ```css
+ * .button {
+ *   background: var(--tt-action-primary-background-default);
+ *   color: var(--tt-action-primary-text-default);
+ * }
+ * ```
+ *
+ * (For plain CSS you can use the var names directly — `vars` is most valuable
+ * when you need TypeScript autocomplete in inline styles or CSS-in-JS.)
+ *
+ * ## Usage in Tailwind plugins / PostCSS
+ *
+ * ```ts
+ * import { toCssVarName } from '@ttoss/fsl-theme/css';
+ * // toCssVarName gives you the raw CSS property name without `var()`.
+ * ```
+ *
+ * ## Limitations
+ *
+ * `vars` reflects the semantic token shape of the **default theme**. If your
+ * project extends `SemanticTokens` with custom token families (e.g. a
+ * `dataviz` palette, project-specific component tokens), those extra leaves
+ * won't appear on this export.
+ *
+ * ### Typed extension recipe
+ *
+ * Build your own typed vars object using the public `buildVarsMap` helper
+ * together with `CssVarsMap`:
+ *
+ * ```ts
+ * // my-theme.ts
+ * import { createTheme, type SemanticTokens } from '@ttoss/fsl-theme';
+ * import { buildVarsMap, type CssVarsMap } from '@ttoss/fsl-theme/vars';
+ *
+ * // 1. Extend the semantic shape structurally.
+ * type MySemanticTokens = SemanticTokens & {
+ *   colors: SemanticTokens['colors'] & {
+ *     brandX: { primary: { default: string } };
+ *   };
+ * };
+ *
+ * const myTheme = createTheme({ ... });
+ *
+ * // 2. Build a typed mirror of the extended shape.
+ * export const myVars: CssVarsMap<MySemanticTokens> =
+ *   buildVarsMap(myTheme.base) as CssVarsMap<MySemanticTokens>;
+ *
+ * myVars.colors.brandX.primary.default;
+ * // → 'var(--tt-colors-brandx-primary-default)'
+ * ```
+ *
+ * For one-off custom keys where the extra structure is trivial, use
+ * `toCssVarName` from `'@ttoss/fsl-theme/css'` to construct individual var
+ * references without declaring a full extended type.
+ *
+ * @see {@link toCssVarName}        — for raw CSS property names (without `var()`)
+ * @see {@link useResolvedTokens}  — for resolved raw values in non-CSS environments (React Native, canvas, PDF)
+ */
+declare const vars: CssVarsMap<SemanticTokens>;
+//#endregion
+export { type CssVarsMap, buildVarsMap, vars };

package/dist/vars.mjs

@@ -0,0 +1,123 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import { o as isPlainObject } from "./helpers-CaswNJMy.mjs";
+import { t as baseBundle } from "./baseBundle-DxvXyhGa.mjs";
+import { t as toCssVarName } from "./toCssVars-CYZCe-on.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-action-primary-background-default)'
+* ```
+*/
+const 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
+//#region src/vars.ts
+/**
+* Static map of all semantic tokens as typed CSS `var(--tt-*)` references.
+*
+* Every leaf value is a CSS Custom Property reference string — zero runtime
+* overhead, full autocomplete, structural parity with `SemanticTokens`.
+*
+* The var names are stable across themes and modes: only the values behind
+* the CSS vars change when the theme or mode switches. Components reference
+* the vars; CSS (generated by `toCssVars`) carries the values.
+*
+* ## Usage with Ark UI / CSS-in-JS
+*
+* ```tsx
+* import { vars } from '@ttoss/fsl-theme/vars';
+*
+* <Button style={{ background: vars.colors.action.primary.background.default }} />
+* // → background: 'var(--tt-action-primary-background-default)'
+* ```
+*
+* ## Usage in CSS / CSS Modules
+*
+* ```css
+* .button {
+*   background: var(--tt-action-primary-background-default);
+*   color: var(--tt-action-primary-text-default);
+* }
+* ```
+*
+* (For plain CSS you can use the var names directly — `vars` is most valuable
+* when you need TypeScript autocomplete in inline styles or CSS-in-JS.)
+*
+* ## Usage in Tailwind plugins / PostCSS
+*
+* ```ts
+* import { toCssVarName } from '@ttoss/fsl-theme/css';
+* // toCssVarName gives you the raw CSS property name without `var()`.
+* ```
+*
+* ## Limitations
+*
+* `vars` reflects the semantic token shape of the **default theme**. If your
+* project extends `SemanticTokens` with custom token families (e.g. a
+* `dataviz` palette, project-specific component tokens), those extra leaves
+* won't appear on this export.
+*
+* ### Typed extension recipe
+*
+* Build your own typed vars object using the public `buildVarsMap` helper
+* together with `CssVarsMap`:
+*
+* ```ts
+* // my-theme.ts
+* import { createTheme, type SemanticTokens } from '@ttoss/fsl-theme';
+* import { buildVarsMap, type CssVarsMap } from '@ttoss/fsl-theme/vars';
+*
+* // 1. Extend the semantic shape structurally.
+* type MySemanticTokens = SemanticTokens & {
+*   colors: SemanticTokens['colors'] & {
+*     brandX: { primary: { default: string } };
+*   };
+* };
+*
+* const myTheme = createTheme({ ... });
+*
+* // 2. Build a typed mirror of the extended shape.
+* export const myVars: CssVarsMap<MySemanticTokens> =
+*   buildVarsMap(myTheme.base) as CssVarsMap<MySemanticTokens>;
+*
+* myVars.colors.brandX.primary.default;
+* // → 'var(--tt-colors-brandx-primary-default)'
+* ```
+*
+* For one-off custom keys where the extra structure is trivial, use
+* `toCssVarName` from `'@ttoss/fsl-theme/css'` to construct individual var
+* references without declaring a full extended type.
+*
+* @see {@link toCssVarName}        — for raw CSS property names (without `var()`)
+* @see {@link useResolvedTokens}  — for resolved raw values in non-CSS environments (React Native, canvas, PDF)
+*/
+const vars = buildVarsMap(baseBundle.base);
+
+//#endregion
+export { buildVarsMap, vars };