@ttoss/fsl-theme 1.1.12 → 1.1.14

package/dist/themes/ventures.cjs

@@ -0,0 +1,34 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+Object.defineProperty(exports, Symbol.toStringTag, {
+  value: 'Module'
+});
+const require_createTheme = require('../createTheme-Cv6RP9D6.cjs');
+const require_withDataviz = require('../withDataviz-B4pVsOwV.cjs');
+
+//#region src/themes/ventures.ts
+const bundle = require_createTheme.createTheme({
+  overrides: {
+    core: {
+      colors: {
+        brand: {
+          50: "#EEF1F8",
+          100: "#CDD5EA",
+          200: "#9BAED5",
+          300: "#6887BF",
+          400: "#3A61A8",
+          500: "#1A3D8F",
+          600: "#142E6E",
+          700: "#0E2050",
+          800: "#081333",
+          900: "#03091A"
+        }
+      }
+    },
+    semantic: {}
+  },
+  alternate: void 0
+});
+const ventures = require_withDataviz.withDataviz(bundle);
+
+//#endregion
+exports.ventures = ventures;

package/dist/themes/ventures.d.cts

@@ -0,0 +1,3 @@
+
+import { t as ventures } from "../index-CsIjfw86.cjs";
+export { ventures };

package/dist/themes/ventures.d.mts

@@ -0,0 +1,3 @@
+
+import { t as ventures } from "../index-nJrjI0BA.mjs";
+export { ventures };

package/dist/{esm/chunk-BXKVVQEP.js → themes/ventures.mjs}

@@ -1,9 +1,9 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import { withDataviz } from "./chunk-FBVUI2PK.js";
-import { createTheme } from "./chunk-SE5Z52RE.js";
+import { n as createTheme } from "../createTheme-BLNYztZU.mjs";
+import { t as withDataviz } from "../withDataviz-DY5s7R51.mjs";
 
-// src/themes/ventures.ts
-var bundle = createTheme({
+//#region src/themes/ventures.ts
+const bundle = createTheme({
   overrides: {
     core: {
       colors: {
@@ -25,5 +25,7 @@ var bundle = createTheme({
   },
   alternate: void 0
 });
-var ventures = withDataviz(bundle);
+const ventures = withDataviz(bundle);
+
+//#endregion
 export { ventures };

package/dist/toCssVars-CYZCe-on.mjs

@@ -0,0 +1,286 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import { a as flattenTheme, i as flattenObject, n as SAFE_ID_RE, r as deepMerge, t as COMPOUND_REF_RE } from "./helpers-CaswNJMy.mjs";
+import { t as CSS_PATH_PREFIXES } from "./tokenRegistry-DjgSN3oU.mjs";
+
+//#region src/roots/toCssVars.ts
+/**
+* Convert a full token path to a CSS custom property name.
+*
+* `core.colors.brand.500` → `--tt-core-colors-brand-500`
+* `semantic.colors.action.primary.background.default` → `--tt-colors-action-primary-background-default`
+*/
+const toCssVarName = tokenPath => {
+  for (const [prefix, cssPrefix] of CSS_PATH_PREFIXES) if (tokenPath.startsWith(prefix)) return `${cssPrefix}${tokenPath.slice(prefix.length).replace(/\./g, "-")}`;
+  return `--tt-${tokenPath.replace(/\./g, "-")}`;
+};
+/**
+* Replace all embedded `{token.path}` refs inside a raw string with `var(--tt-...)` references.
+*
+* Handles compound semantic values like:
+*   `clamp({core.spacing.4}, {core.spacing.6}, {core.spacing.12})`
+*   → `clamp(var(--tt-core-spacing-4), var(--tt-core-spacing-6), var(--tt-core-spacing-12))`
+*/
+const inlineRefsToVars = value => {
+  return value.replace(COMPOUND_REF_RE, (_match, path) => {
+    return `var(${toCssVarName(path)})`;
+  });
+};
+/**
+* Build a flat CSS custom properties record from a ThemeTokens.
+*
+* Core tokens get raw values. Semantic tokens get `var()` references
+* to preserve the cascade relationship at runtime.
+*/
+const buildCssVars = theme => {
+  const vars = {};
+  const {
+    core: coreFlat,
+    semantic: semanticFlat
+  } = flattenTheme(theme);
+  for (const [path, value] of Object.entries(coreFlat)) vars[toCssVarName(path)] = value;
+  for (const [path, value] of Object.entries(semanticFlat)) {
+    const varName = toCssVarName(path);
+    if (typeof value === "string" && value.includes("{")) vars[varName] = inlineRefsToVars(value);else vars[varName] = value;
+  }
+  return vars;
+};
+const sanitizeId = value => {
+  if (!SAFE_ID_RE.test(value)) throw new Error(`Invalid themeId "${value}". Only alphanumeric characters, hyphens, and underscores are allowed.`);
+  return value;
+};
+const buildSelector = ({
+  themeId,
+  mode,
+  selector
+}) => {
+  if (selector) return selector;
+  if (!themeId) return mode ? `:root[data-tt-mode="${mode}"]` : ":root";
+  let s = `[data-tt-theme="${sanitizeId(themeId)}"]`;
+  if (mode) s += `[data-tt-mode="${mode}"]`;
+  return s;
+};
+/** Matches container query length units: cqi, cqb, cqw, cqh, cqmin, cqmax */
+const CQ_UNIT_RE = /cq(?:i|b|w|h|min|max)(?![a-z])/i;
+/** Check if a CSS value contains container query units. */
+const hasCqUnits = value => {
+  return typeof value === "string" && CQ_UNIT_RE.test(value);
+};
+/**
+* Replace container query units with viewport-safe equivalents.
+*
+* cqi → vw, cqb → vh, cqw → vw, cqh → vh, cqmin → vmin, cqmax → vmax
+*/
+const toViewportFallback = value => {
+  return value.replace(/cqmin(?![a-z])/gi, "vmin").replace(/cqmax(?![a-z])/gi, "vmax").replace(/cqi(?![a-z])/gi, "vw").replace(/cqb(?![a-z])/gi, "vh").replace(/cqw(?![a-z])/gi, "vw").replace(/cqh(?![a-z])/gi, "vh");
+};
+/**
+* Extract entries from a CSS vars record whose values contain CQ units.
+*/
+const extractContainerQueryVars = vars => {
+  const cqVars = {};
+  for (const [name, value] of Object.entries(vars)) if (hasCqUnits(value)) cqVars[name] = value;
+  return cqVars;
+};
+/**
+* Build CSS vars for reduced-motion overrides.
+*
+* Derives every `*.duration` path from the theme's `semantic.motion` structure,
+* so adding a new motion role never silently omits it from the
+* `@media (prefers-reduced-motion: reduce)` block.
+*
+* Sets all semantic motion duration vars to `var(--tt-core-motion-duration-none)` (0ms).
+* Emitted inside `@media (prefers-reduced-motion: reduce)`.
+*/
+const buildReducedMotionVars = theme => {
+  const noneVar = `var(${toCssVarName("core.motion.duration.none")})`;
+  const flat = flattenObject(theme.semantic.motion, "semantic.motion");
+  const vars = {};
+  for (const path of Object.keys(flat)) if (path.endsWith(".duration")) vars[toCssVarName(path)] = noneVar;
+  return vars;
+};
+/**
+* Build CSS vars for coarse-pointer hit target overrides.
+*
+* The semantic hit tokens default to fine-pointer values. This record
+* contains the coarse overrides, to be emitted inside
+* `@media (any-pointer: coarse)`.
+*
+* Derives every `*.coarse.*` path from `core.sizing.hit.coarse` dynamically,
+* so adding a new step to `CoreSizeHitScale` never silently omits it here.
+*/
+const buildCoarseHitVars = theme => {
+  const vars = {};
+  for (const [key, value] of Object.entries(theme.core.sizing.hit.coarse)) if (typeof value === "string") vars[toCssVarName(`semantic.sizing.hit.${key}`)] = value;
+  return vars;
+};
+/**
+* Render a complete scoped CSS block from a vars record.
+*
+* Includes the base selector block, optional CQ `@supports` block,
+* coarse-pointer `@media` block, and reduced-motion `@media` block.
+* This is the single implementation shared by `toCssVars` and `bundleToCssVars`.
+*/
+const buildCssBlock = ({
+  selector,
+  vars,
+  containerQueryVars,
+  coarseHitVars,
+  reducedMotionVars,
+  colorScheme
+}) => {
+  /** Maps a vars record to indented CSS declaration lines (4-space, for nested at-rule blocks). */
+  const varLines = v => {
+    return Object.entries(v).map(([name, val]) => {
+      return `    ${name}: ${val};`;
+    });
+  };
+  /** Builds a complete at-rule block, or empty string if the vars record is empty. */
+  const atRuleBlock = (atRule, v) => {
+    const lines = varLines(v);
+    return lines.length > 0 ? `${atRule} {\n  ${selector} {\n${lines.join("\n")}\n  }\n}` : "";
+  };
+  const baseLines = [];
+  if (colorScheme) baseLines.push(`  color-scheme: ${colorScheme};`);
+  for (const [name, value] of Object.entries(vars)) if (hasCqUnits(value)) baseLines.push(`  ${name}: ${toViewportFallback(String(value))};`);else baseLines.push(`  ${name}: ${value};`);
+  const baseBlock = `${selector} {\n${baseLines.join("\n")}\n}`;
+  const cqContent = atRuleBlock("@supports (width: 1cqi)", containerQueryVars);
+  const cqBlock = cqContent ? `\n\n${cqContent}` : "";
+  const coarseBlock = atRuleBlock("@media (any-pointer: coarse)", coarseHitVars);
+  const reducedMotionBlock = atRuleBlock("@media (prefers-reduced-motion: reduce)", reducedMotionVars);
+  return [baseBlock + cqBlock, coarseBlock, reducedMotionBlock].filter(Boolean).join("\n\n");
+};
+/**
+* Internal: convert a single `ThemeTokens` into CSS custom properties.
+* Use the public overloaded `toCssVars()` instead.
+*/
+const toCssVarsBase = (theme, options = {}) => {
+  const cssVars = buildCssVars(theme);
+  const coarseHitVars = buildCoarseHitVars(theme);
+  const reducedMotionVars = buildReducedMotionVars(theme);
+  const containerQueryVars = extractContainerQueryVars(cssVars);
+  const selector = buildSelector(options);
+  const {
+    colorScheme,
+    mode
+  } = options;
+  const effectiveColorScheme = colorScheme ?? mode;
+  return {
+    cssVars,
+    coarseHitVars,
+    reducedMotionVars,
+    containerQueryVars,
+    selector,
+    toCssString: () => {
+      return buildCssBlock({
+        selector,
+        vars: cssVars,
+        containerQueryVars,
+        coarseHitVars,
+        reducedMotionVars,
+        colorScheme: effectiveColorScheme
+      });
+    }
+  };
+};
+/** Type guard: checks if the input is a ThemeBundle. */
+const isThemeBundle = input => {
+  return "baseMode" in input && "base" in input;
+};
+/**
+* Compute a diff record: only entries in `full` whose values differ from `base`.
+*/
+const diffCssVars = ({
+  base,
+  full
+}) => {
+  const diff = {};
+  for (const [key, value] of Object.entries(full)) if (base[key] !== value) diff[key] = value;
+  return diff;
+};
+/**
+* Convert a `ThemeBundle` into scoped CSS custom properties with optimized
+* alternate-mode output (diff-only).
+*
+* @example
+* ```ts
+* import { toCssVars } from '@ttoss/fsl-theme/css';
+* import { createTheme } from '@ttoss/fsl-theme';
+*
+* const myBundle = createTheme();
+* const css = toCssVars(myBundle, { themeId: 'default' }).toCssString();
+* // → base block (all vars) + dark block (only changed vars) + coarse block
+* ```
+*/
+const bundleToCssVars = (bundle, options) => {
+  const {
+    themeId
+  } = options;
+  const {
+    baseMode,
+    base: baseTheme,
+    alternate
+  } = bundle;
+  const alternateMode = baseMode === "light" ? "dark" : "light";
+  const baseResult = toCssVarsBase(baseTheme, {
+    themeId,
+    colorScheme: baseMode
+  });
+  if (!alternate) return {
+    base: baseResult,
+    toCssString: () => {
+      return baseResult.toCssString();
+    }
+  };
+  const alternateTheme = {
+    core: baseTheme.core,
+    semantic: deepMerge(baseTheme.semantic, alternate.semantic)
+  };
+  const fullAlternateVars = buildCssVars(alternateTheme);
+  const diffVars = diffCssVars({
+    base: baseResult.cssVars,
+    full: fullAlternateVars
+  });
+  const alternateSelector = buildSelector({
+    themeId,
+    mode: alternateMode
+  });
+  const altCoarseHitVars = {};
+  const altReducedMotionVars = diffCssVars({
+    base: baseResult.reducedMotionVars,
+    full: buildReducedMotionVars(alternateTheme)
+  });
+  const altContainerQueryVars = extractContainerQueryVars(diffVars);
+  const alternateResult = {
+    cssVars: diffVars,
+    coarseHitVars: altCoarseHitVars,
+    reducedMotionVars: altReducedMotionVars,
+    containerQueryVars: altContainerQueryVars,
+    selector: alternateSelector,
+    toCssString: () => {
+      return buildCssBlock({
+        selector: alternateSelector,
+        vars: diffVars,
+        containerQueryVars: altContainerQueryVars,
+        coarseHitVars: altCoarseHitVars,
+        reducedMotionVars: altReducedMotionVars,
+        colorScheme: alternateMode
+      });
+    }
+  };
+  return {
+    base: baseResult,
+    alternate: alternateResult,
+    toCssString: () => {
+      const parts = [baseResult.toCssString()];
+      if (Object.keys(diffVars).length > 0) parts.push(alternateResult.toCssString());
+      return parts.join("\n\n");
+    }
+  };
+};
+function toCssVars(input, options) {
+  if (isThemeBundle(input)) return bundleToCssVars(input, options ?? {});
+  return toCssVarsBase(input, options);
+}
+
+//#endregion
+export { toCssVars as n, toCssVarName as t };

package/dist/toCssVars-DudHKvt2.cjs

@@ -0,0 +1,297 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+const require_helpers = require('./helpers-4p4-QVt_.cjs');
+const require_tokenRegistry = require('./tokenRegistry-OhaJ9sPJ.cjs');
+
+//#region src/roots/toCssVars.ts
+/**
+* Convert a full token path to a CSS custom property name.
+*
+* `core.colors.brand.500` → `--tt-core-colors-brand-500`
+* `semantic.colors.action.primary.background.default` → `--tt-colors-action-primary-background-default`
+*/
+const toCssVarName = tokenPath => {
+  for (const [prefix, cssPrefix] of require_tokenRegistry.CSS_PATH_PREFIXES) if (tokenPath.startsWith(prefix)) return `${cssPrefix}${tokenPath.slice(prefix.length).replace(/\./g, "-")}`;
+  return `--tt-${tokenPath.replace(/\./g, "-")}`;
+};
+/**
+* Replace all embedded `{token.path}` refs inside a raw string with `var(--tt-...)` references.
+*
+* Handles compound semantic values like:
+*   `clamp({core.spacing.4}, {core.spacing.6}, {core.spacing.12})`
+*   → `clamp(var(--tt-core-spacing-4), var(--tt-core-spacing-6), var(--tt-core-spacing-12))`
+*/
+const inlineRefsToVars = value => {
+  return value.replace(require_helpers.COMPOUND_REF_RE, (_match, path) => {
+    return `var(${toCssVarName(path)})`;
+  });
+};
+/**
+* Build a flat CSS custom properties record from a ThemeTokens.
+*
+* Core tokens get raw values. Semantic tokens get `var()` references
+* to preserve the cascade relationship at runtime.
+*/
+const buildCssVars = theme => {
+  const vars = {};
+  const {
+    core: coreFlat,
+    semantic: semanticFlat
+  } = require_helpers.flattenTheme(theme);
+  for (const [path, value] of Object.entries(coreFlat)) vars[toCssVarName(path)] = value;
+  for (const [path, value] of Object.entries(semanticFlat)) {
+    const varName = toCssVarName(path);
+    if (typeof value === "string" && value.includes("{")) vars[varName] = inlineRefsToVars(value);else vars[varName] = value;
+  }
+  return vars;
+};
+const sanitizeId = value => {
+  if (!require_helpers.SAFE_ID_RE.test(value)) throw new Error(`Invalid themeId "${value}". Only alphanumeric characters, hyphens, and underscores are allowed.`);
+  return value;
+};
+const buildSelector = ({
+  themeId,
+  mode,
+  selector
+}) => {
+  if (selector) return selector;
+  if (!themeId) return mode ? `:root[data-tt-mode="${mode}"]` : ":root";
+  let s = `[data-tt-theme="${sanitizeId(themeId)}"]`;
+  if (mode) s += `[data-tt-mode="${mode}"]`;
+  return s;
+};
+/** Matches container query length units: cqi, cqb, cqw, cqh, cqmin, cqmax */
+const CQ_UNIT_RE = /cq(?:i|b|w|h|min|max)(?![a-z])/i;
+/** Check if a CSS value contains container query units. */
+const hasCqUnits = value => {
+  return typeof value === "string" && CQ_UNIT_RE.test(value);
+};
+/**
+* Replace container query units with viewport-safe equivalents.
+*
+* cqi → vw, cqb → vh, cqw → vw, cqh → vh, cqmin → vmin, cqmax → vmax
+*/
+const toViewportFallback = value => {
+  return value.replace(/cqmin(?![a-z])/gi, "vmin").replace(/cqmax(?![a-z])/gi, "vmax").replace(/cqi(?![a-z])/gi, "vw").replace(/cqb(?![a-z])/gi, "vh").replace(/cqw(?![a-z])/gi, "vw").replace(/cqh(?![a-z])/gi, "vh");
+};
+/**
+* Extract entries from a CSS vars record whose values contain CQ units.
+*/
+const extractContainerQueryVars = vars => {
+  const cqVars = {};
+  for (const [name, value] of Object.entries(vars)) if (hasCqUnits(value)) cqVars[name] = value;
+  return cqVars;
+};
+/**
+* Build CSS vars for reduced-motion overrides.
+*
+* Derives every `*.duration` path from the theme's `semantic.motion` structure,
+* so adding a new motion role never silently omits it from the
+* `@media (prefers-reduced-motion: reduce)` block.
+*
+* Sets all semantic motion duration vars to `var(--tt-core-motion-duration-none)` (0ms).
+* Emitted inside `@media (prefers-reduced-motion: reduce)`.
+*/
+const buildReducedMotionVars = theme => {
+  const noneVar = `var(${toCssVarName("core.motion.duration.none")})`;
+  const flat = require_helpers.flattenObject(theme.semantic.motion, "semantic.motion");
+  const vars = {};
+  for (const path of Object.keys(flat)) if (path.endsWith(".duration")) vars[toCssVarName(path)] = noneVar;
+  return vars;
+};
+/**
+* Build CSS vars for coarse-pointer hit target overrides.
+*
+* The semantic hit tokens default to fine-pointer values. This record
+* contains the coarse overrides, to be emitted inside
+* `@media (any-pointer: coarse)`.
+*
+* Derives every `*.coarse.*` path from `core.sizing.hit.coarse` dynamically,
+* so adding a new step to `CoreSizeHitScale` never silently omits it here.
+*/
+const buildCoarseHitVars = theme => {
+  const vars = {};
+  for (const [key, value] of Object.entries(theme.core.sizing.hit.coarse)) if (typeof value === "string") vars[toCssVarName(`semantic.sizing.hit.${key}`)] = value;
+  return vars;
+};
+/**
+* Render a complete scoped CSS block from a vars record.
+*
+* Includes the base selector block, optional CQ `@supports` block,
+* coarse-pointer `@media` block, and reduced-motion `@media` block.
+* This is the single implementation shared by `toCssVars` and `bundleToCssVars`.
+*/
+const buildCssBlock = ({
+  selector,
+  vars,
+  containerQueryVars,
+  coarseHitVars,
+  reducedMotionVars,
+  colorScheme
+}) => {
+  /** Maps a vars record to indented CSS declaration lines (4-space, for nested at-rule blocks). */
+  const varLines = v => {
+    return Object.entries(v).map(([name, val]) => {
+      return `    ${name}: ${val};`;
+    });
+  };
+  /** Builds a complete at-rule block, or empty string if the vars record is empty. */
+  const atRuleBlock = (atRule, v) => {
+    const lines = varLines(v);
+    return lines.length > 0 ? `${atRule} {\n  ${selector} {\n${lines.join("\n")}\n  }\n}` : "";
+  };
+  const baseLines = [];
+  if (colorScheme) baseLines.push(`  color-scheme: ${colorScheme};`);
+  for (const [name, value] of Object.entries(vars)) if (hasCqUnits(value)) baseLines.push(`  ${name}: ${toViewportFallback(String(value))};`);else baseLines.push(`  ${name}: ${value};`);
+  const baseBlock = `${selector} {\n${baseLines.join("\n")}\n}`;
+  const cqContent = atRuleBlock("@supports (width: 1cqi)", containerQueryVars);
+  const cqBlock = cqContent ? `\n\n${cqContent}` : "";
+  const coarseBlock = atRuleBlock("@media (any-pointer: coarse)", coarseHitVars);
+  const reducedMotionBlock = atRuleBlock("@media (prefers-reduced-motion: reduce)", reducedMotionVars);
+  return [baseBlock + cqBlock, coarseBlock, reducedMotionBlock].filter(Boolean).join("\n\n");
+};
+/**
+* Internal: convert a single `ThemeTokens` into CSS custom properties.
+* Use the public overloaded `toCssVars()` instead.
+*/
+const toCssVarsBase = (theme, options = {}) => {
+  const cssVars = buildCssVars(theme);
+  const coarseHitVars = buildCoarseHitVars(theme);
+  const reducedMotionVars = buildReducedMotionVars(theme);
+  const containerQueryVars = extractContainerQueryVars(cssVars);
+  const selector = buildSelector(options);
+  const {
+    colorScheme,
+    mode
+  } = options;
+  const effectiveColorScheme = colorScheme ?? mode;
+  return {
+    cssVars,
+    coarseHitVars,
+    reducedMotionVars,
+    containerQueryVars,
+    selector,
+    toCssString: () => {
+      return buildCssBlock({
+        selector,
+        vars: cssVars,
+        containerQueryVars,
+        coarseHitVars,
+        reducedMotionVars,
+        colorScheme: effectiveColorScheme
+      });
+    }
+  };
+};
+/** Type guard: checks if the input is a ThemeBundle. */
+const isThemeBundle = input => {
+  return "baseMode" in input && "base" in input;
+};
+/**
+* Compute a diff record: only entries in `full` whose values differ from `base`.
+*/
+const diffCssVars = ({
+  base,
+  full
+}) => {
+  const diff = {};
+  for (const [key, value] of Object.entries(full)) if (base[key] !== value) diff[key] = value;
+  return diff;
+};
+/**
+* Convert a `ThemeBundle` into scoped CSS custom properties with optimized
+* alternate-mode output (diff-only).
+*
+* @example
+* ```ts
+* import { toCssVars } from '@ttoss/fsl-theme/css';
+* import { createTheme } from '@ttoss/fsl-theme';
+*
+* const myBundle = createTheme();
+* const css = toCssVars(myBundle, { themeId: 'default' }).toCssString();
+* // → base block (all vars) + dark block (only changed vars) + coarse block
+* ```
+*/
+const bundleToCssVars = (bundle, options) => {
+  const {
+    themeId
+  } = options;
+  const {
+    baseMode,
+    base: baseTheme,
+    alternate
+  } = bundle;
+  const alternateMode = baseMode === "light" ? "dark" : "light";
+  const baseResult = toCssVarsBase(baseTheme, {
+    themeId,
+    colorScheme: baseMode
+  });
+  if (!alternate) return {
+    base: baseResult,
+    toCssString: () => {
+      return baseResult.toCssString();
+    }
+  };
+  const alternateTheme = {
+    core: baseTheme.core,
+    semantic: require_helpers.deepMerge(baseTheme.semantic, alternate.semantic)
+  };
+  const fullAlternateVars = buildCssVars(alternateTheme);
+  const diffVars = diffCssVars({
+    base: baseResult.cssVars,
+    full: fullAlternateVars
+  });
+  const alternateSelector = buildSelector({
+    themeId,
+    mode: alternateMode
+  });
+  const altCoarseHitVars = {};
+  const altReducedMotionVars = diffCssVars({
+    base: baseResult.reducedMotionVars,
+    full: buildReducedMotionVars(alternateTheme)
+  });
+  const altContainerQueryVars = extractContainerQueryVars(diffVars);
+  const alternateResult = {
+    cssVars: diffVars,
+    coarseHitVars: altCoarseHitVars,
+    reducedMotionVars: altReducedMotionVars,
+    containerQueryVars: altContainerQueryVars,
+    selector: alternateSelector,
+    toCssString: () => {
+      return buildCssBlock({
+        selector: alternateSelector,
+        vars: diffVars,
+        containerQueryVars: altContainerQueryVars,
+        coarseHitVars: altCoarseHitVars,
+        reducedMotionVars: altReducedMotionVars,
+        colorScheme: alternateMode
+      });
+    }
+  };
+  return {
+    base: baseResult,
+    alternate: alternateResult,
+    toCssString: () => {
+      const parts = [baseResult.toCssString()];
+      if (Object.keys(diffVars).length > 0) parts.push(alternateResult.toCssString());
+      return parts.join("\n\n");
+    }
+  };
+};
+function toCssVars(input, options) {
+  if (isThemeBundle(input)) return bundleToCssVars(input, options ?? {});
+  return toCssVarsBase(input, options);
+}
+
+//#endregion
+Object.defineProperty(exports, 'toCssVarName', {
+  enumerable: true,
+  get: function () {
+    return toCssVarName;
+  }
+});
+Object.defineProperty(exports, 'toCssVars', {
+  enumerable: true,
+  get: function () {
+    return toCssVars;
+  }
+});