@ttoss/fsl-theme 2.1.3 → 2.1.4

package/README.md

@@ -290,6 +290,8 @@ export const myVars: CssVarsMap<MySemanticTokens> = buildVarsMap(
 
 For one-off custom keys, use `toCssVarName` from `@ttoss/fsl-theme/css` directly — no extended type required.
 
+The first-party dataviz extension ships its own mirror — import `datavizVars` from `@ttoss/fsl-theme/dataviz` instead of hand-rolling this recipe (e.g. `datavizVars.color.series[1]` → `'var(--tt-dataviz-color-series-1)'`).
+
 ## Next.js (SSR)
 
 ### React 19 App Router (recommended)

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_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 { 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/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 };

package/dist/toVars-BTDr1haK.d.mts

@@ -0,0 +1,46 @@
+
+import { a as ThemeTokens } from "./Types-8o6d09ll.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-colors-action-primary-background-default)'
+ * ```
+ */
+declare const buildVarsMap: (theme: ThemeTokens) => CssVarsMap<ThemeTokens["semantic"]>;
+//#endregion
+export { buildVarsMap as n, CssVarsMap as t };

package/dist/toVars-BcSZEbMb.d.cts

@@ -0,0 +1,46 @@
+
+import { a as ThemeTokens } from "./Types-8o6d09ll.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).
+ *
+ * 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-colors-action-primary-background-default)'
+ * ```
+ */
+declare const buildVarsMap: (theme: ThemeTokens) => CssVarsMap<ThemeTokens["semantic"]>;
+//#endregion
+export { buildVarsMap as n, CssVarsMap as t };

package/dist/toVars-O-E9ryvq.cjs

@@ -0,0 +1,44 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+const require_helpers = require('./helpers-BU40JvFA.cjs');
+const require_toCssVars = require('./toCssVars-NGi4K2Oc.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-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 (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
+Object.defineProperty(exports, 'buildVarsMap', {
+  enumerable: true,
+  get: function () {
+    return buildVarsMap;
+  }
+});

package/dist/vars.cjs

@@ -2,44 +2,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, {
   value: 'Module'
 });
-const require_helpers = require('./helpers-BU40JvFA.cjs');
 const require_baseBundle = require('./baseBundle-DaO6jyk3.cjs');
-const require_toCssVars = require('./toCssVars-NGi4K2Oc.cjs');
+const require_toVars = require('./toVars-O-E9ryvq.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-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 (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.
@@ -84,7 +49,8 @@ var buildVarsMap = theme => {
 * `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.
+* won't appear on this export. The first-party dataviz extension ships its
+* own mirror — `datavizVars` from `@ttoss/fsl-theme/dataviz`.
 *
 * ### Typed extension recipe
 *
@@ -120,8 +86,8 @@ var buildVarsMap = theme => {
 * @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)
 */
-var vars = buildVarsMap(require_baseBundle.baseBundle.base);
+var vars = require_toVars.buildVarsMap(require_baseBundle.baseBundle.base);
 
 //#endregion
-exports.buildVarsMap = buildVarsMap;
+exports.buildVarsMap = require_toVars.buildVarsMap;
 exports.vars = vars;

package/dist/vars.d.cts

@@ -1,48 +1,7 @@
 
-import { a as ThemeTokens, n as SemanticTokens } from "./Types-8o6d09ll.cjs";
+import { n as SemanticTokens } from "./Types-8o6d09ll.cjs";
+import { n as buildVarsMap, t as CssVarsMap } from "./toVars-BcSZEbMb.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).
- *
- * 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-colors-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.
@@ -87,7 +46,8 @@ declare const buildVarsMap: (theme: ThemeTokens) => CssVarsMap<ThemeTokens["sema
  * `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.
+ * won't appear on this export. The first-party dataviz extension ships its
+ * own mirror — `datavizVars` from `@ttoss/fsl-theme/dataviz`.
  *
  * ### Typed extension recipe
  *

package/dist/vars.d.mts

@@ -1,48 +1,7 @@
 
-import { a as ThemeTokens, n as SemanticTokens } from "./Types-8o6d09ll.mjs";
+import { n as SemanticTokens } from "./Types-8o6d09ll.mjs";
+import { n as buildVarsMap, t as CssVarsMap } from "./toVars-BTDr1haK.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-colors-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.
@@ -87,7 +46,8 @@ declare const buildVarsMap: (theme: ThemeTokens) => CssVarsMap<ThemeTokens["sema
  * `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.
+ * won't appear on this export. The first-party dataviz extension ships its
+ * own mirror — `datavizVars` from `@ttoss/fsl-theme/dataviz`.
  *
  * ### Typed extension recipe
  *

package/dist/vars.mjs

@@ -1,42 +1,7 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import { o as isPlainObject } from "./helpers-BXaKe2s3.mjs";
 import { t as baseBundle } from "./baseBundle-BpCf8Cc9.mjs";
-import { t as toCssVarName } from "./toCssVars-CTGqZ_t3.mjs";
+import { t as buildVarsMap } from "./toVars-BDBDTI_F.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
 //#region src/vars.ts
 /**
 * Static map of all semantic tokens as typed CSS `var(--tt-*)` references.
@@ -81,7 +46,8 @@ var buildVarsMap = theme => {
 * `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.
+* won't appear on this export. The first-party dataviz extension ships its
+* own mirror — `datavizVars` from `@ttoss/fsl-theme/dataviz`.
 *
 * ### Typed extension recipe
 *

package/llms.txt

@@ -323,7 +323,7 @@ Never both. Never neither.
 
 **§8 — Optional families have fallback rules:**
 - `elevation.tonal` absent → fall back to `elevation.surface` alone.
-- `dataviz` absent → the consumer's app does not opt in to dataviz; do not generate dataviz components.
+- `dataviz` absent → the consumer's app does not opt in to dataviz; do not generate dataviz components. When present, reference its tokens via `datavizVars` from `@ttoss/fsl-theme/dataviz` (typed `var(--tt-dataviz-*)` mirror).
 - Optional state (e.g. `hover`) absent on a leaf → fall back to `default`.
 
 ## Disambiguation — confusable picks

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/fsl-theme",
-  "version": "2.1.3",
+  "version": "2.1.4",
   "description": "ttoss theme provider for UI.",
   "keywords": [
     "css-variables",