@aziontech/theme 4.2.0 → 4.3.1

package/src/tokens/semantic/texts.data.js

@@ -15,10 +15,12 @@
  *   old `mobile` (default, applied >768) → `md` (≥768)
  */
 
+import { curve, duration } from '../primitives/animations/animate.js'
 import { fontFamily } from '../primitives/typography/font-family.js'
 import { fontSize } from '../primitives/typography/font-size.js'
 import { fontWeight } from '../primitives/typography/font-weight.js'
 import { leading } from '../primitives/typography/leading.js'
+import { tracking } from '../primitives/typography/tracking.js'
 
 export const textsData = {
   'text-big-number-md': {
@@ -77,88 +79,106 @@ export const textsData = {
   'text-label-lg': {
     fontSize: fontSize.base,
     lineHeight: leading.normal,
-    fontWeight: fontWeight.medium
+    fontWeight: fontWeight.normal
   },
   'text-label-md': {
     fontSize: fontSize.sm,
     lineHeight: leading.normal,
-    fontWeight: fontWeight.medium
+    fontWeight: fontWeight.normal
   },
   'text-label-sm': {
     fontSize: fontSize.xs,
     lineHeight: leading.normal,
-    fontWeight: fontWeight.medium
+    fontWeight: fontWeight.normal
   },
   'text-label-code-sm': {
     fontFamily: fontFamily.code,
-    fontSize: '0.75rem',
-    lineHeight: '1',
-    fontWeight: '400',
-    letterSpacing: '0'
+    fontSize: fontSize.xs,
+    lineHeight: leading.none,
+    fontWeight: fontWeight.normal,
+    letterSpacing: tracking.normal
+  },
+  'text-body-code-sm': {
+    textWrapStyle: 'pretty',
+    fontFamily: fontFamily.code,
+    fontSize: fontSize.xs,
+    lineHeight: leading.relaxed,
+    fontWeight: fontWeight.normal,
+    letterSpacing: tracking.normal
   },
   'text-label-code-md': {
     fontFamily: fontFamily.code,
-    fontSize: '0.875rem',
-    lineHeight: '1',
-    fontWeight: '400',
-    letterSpacing: '0'
+    fontSize: fontSize.sm,
+    lineHeight: leading.none,
+    fontWeight: fontWeight.normal,
+    letterSpacing: tracking.normal
   },
   'text-label-code-lg': {
     fontFamily: fontFamily.code,
-    fontSize: '1rem',
-    lineHeight: '1',
-    fontWeight: '400',
-    letterSpacing: '0'
+    fontSize: fontSize.base,
+    lineHeight: leading.none,
+    fontWeight: fontWeight.normal,
+    letterSpacing: tracking.normal
   },
   'text-body-lg': {
     fontSize: { _: fontSize.base, md: fontSize.lg },
-    lineHeight: leading.normal
+    fontWeight: fontWeight.normal,
+    lineHeight: leading.snug
   },
   'text-body-md': {
     fontSize: fontSize.base,
-    lineHeight: leading.normal
+    fontWeight: fontWeight.normal,
+    lineHeight: leading.snug
+  },
+  'text-body-prose-md': {
+    fontSize: fontSize.base,
+    fontWeight: fontWeight.normal,
+    lineHeight: leading.relaxed
   },
   'text-body-sm': {
     fontSize: fontSize.sm,
-    lineHeight: leading.normal
+    fontWeight: fontWeight.normal,
+    lineHeight: leading.snug
   },
   'text-body-xs': {
     fontSize: fontSize.xs,
+    fontWeight: fontWeight.normal,
+    lineHeight: leading.snug
+  },
+  'text-body-xxs': {
+    fontSize: fontSize.xs,
+    fontWeight: fontWeight.normal,
     lineHeight: leading.normal
   },
   'text-tag-sm': {
     fontSize: fontSize.xs,
     lineHeight: leading.tight,
-    fontWeight: fontWeight.semibold
+    fontWeight: fontWeight.normal
   },
   'text-tag-md': {
     fontSize: fontSize.xs,
     lineHeight: leading.tight,
-    fontWeight: fontWeight.semibold
-  },
-  'text-body-xxs': {
-    fontSize: fontSize.xs,
-    lineHeight: leading.normal
+    fontWeight: fontWeight.normal
   },
   'text-overline-md': {
     fontFamily: fontFamily.display,
     fontSize: { _: fontSize.xs, sm: fontSize.sm },
     lineHeight: leading.snug,
-    letterSpacing: '0.08em',
+    letterSpacing: tracking.widest,
     textTransform: 'uppercase'
   },
   'text-overline-sm': {
     fontFamily: fontFamily.display,
     fontSize: fontSize.xs,
     lineHeight: leading.snug,
-    letterSpacing: '0.08em',
+    letterSpacing: tracking.widest,
     textTransform: 'uppercase'
   },
   'text-overline-xs': {
     fontFamily: fontFamily.display,
     fontSize: fontSize.xs,
     lineHeight: leading.snug,
-    letterSpacing: '0.08em',
+    letterSpacing: tracking.widest,
     textTransform: 'uppercase'
   },
   'text-button-lg': {
@@ -166,14 +186,14 @@ export const textsData = {
     fontSize: fontSize.sm,
     fontWeight: fontWeight.normal,
     lineHeight: leading.tight,
-    letterSpacing: '0'
+    letterSpacing: tracking.normal
   },
   'text-button-md': {
     fontFamily: fontFamily.sans,
     fontSize: fontSize.xs,
     fontWeight: fontWeight.normal,
     lineHeight: leading.tight,
-    letterSpacing: '0'
+    letterSpacing: tracking.normal
   },
   /** Inline `<a>` in body/heading — inherits parent size; not the navigation Link component. */
   'text-link': {
@@ -181,7 +201,7 @@ export const textsData = {
     lineHeight: 'inherit',
     color: 'var(--text-link)',
     borderRadius: 'var(--shape-elements)',
-    transition: 'all 110ms cubic-bezier(0.39, 0.57, 0.56, 1)',
+    transition: `all ${duration['fast-02']} ${curve['productive-entrance']}`,
     states: {
       hover: {
         color: 'var(--text-link-hover)',

package/src/tokens/semantic/z-indices.data.d.ts

@@ -17,7 +17,7 @@
  *                          such as drawers, modals, and fixed headers.
  *
  * Values are intentionally small and well-spaced to make future additions
- * obvious. Consume as `z-[var(--z-input-*)]` in components — do not
+ * obvious. Consume as `z-(--z-input-*)` in components — do not
  * introduce ad-hoc numeric z-index in input `.vue` files.
  */
 export const zIndicesData: {

package/src/tokens/semantic/z-indices.data.js

@@ -17,7 +17,7 @@
  *                          such as drawers, modals, and fixed headers.
  *
  * Values are intentionally small and well-spaced to make future additions
- * obvious. Consume as `z-[var(--z-input-*)]` in components — do not
+ * obvious. Consume as `z-(--z-input-*)` in components — do not
  * introduce ad-hoc numeric z-index in input `.vue` files.
  */
 

package/src/tokens/theme/accent.js

@@ -1,16 +1,28 @@
 import { tokenRef } from '../../scripts/refs.js'
 
+// The accent family points at the BLUE primitive ramp (`primitives.blue`, the
+// #0072F5 hue). These values mirror the Figma Theme collection's `accent/*`
+// variables 1-to-1 — Figma is the source of truth, and it already aliases its
+// whole `colors/brand/accent/accent-*` ramp onto `colors/blue/*` (it carries no
+// violet primitives at all). The violet mapping this replaces existed only here.
+//
+// Accent is MODE-INVARIANT, exactly as Figma declares it: Light and Dark resolve
+// to the same values. `accent-contrast` stays black — black on blue-500 is
+// 4.73:1, clearing WCAG AA on the filled accent surface.
+//
+// `brand.accent` still holds violet values in code and ships as
+// `--color-brand-accent-*`; only the semantic `--accent*` group turns blue here.
 export const accent = {
   light: {
-    accent: tokenRef('brand.accent.accent-600'),
-    'accent-mask': tokenRef('primitives.alpha.violet.50'),
-    'accent-selected': tokenRef('brand.accent.accent-500'),
+    accent: tokenRef('primitives.blue.500'),
+    'accent-mask': tokenRef('primitives.alpha.blue.100'),
+    'accent-selected': tokenRef('primitives.blue.500'),
     'accent-contrast': tokenRef('primitives.base.black')
   },
   dark: {
-    accent: tokenRef('brand.accent.accent-500'),
-    'accent-mask': tokenRef('primitives.alpha.violet.100'),
-    'accent-selected': tokenRef('brand.accent.accent-500'),
+    accent: tokenRef('primitives.blue.500'),
+    'accent-mask': tokenRef('primitives.alpha.blue.100'),
+    'accent-selected': tokenRef('primitives.blue.500'),
     'accent-contrast': tokenRef('primitives.base.black')
   }
 }

package/src/tokens/theme/background.d.ts

@@ -15,6 +15,12 @@ export namespace background {
         'bg-surface-overlay': {
             __ref: any;
         };
+        'bg-placeholder': {
+            __ref: any;
+        };
+        'bg-placeholder-highlight': {
+            __ref: any;
+        };
         'bg-hover': {
             __ref: any;
         };
@@ -50,6 +56,12 @@ export namespace background {
         'bg-surface-overlay': {
             __ref: any;
         };
+        'bg-placeholder': {
+            __ref: any;
+        };
+        'bg-placeholder-highlight': {
+            __ref: any;
+        };
         'bg-hover': {
             __ref: any;
         };

package/src/tokens/theme/background.js

@@ -7,6 +7,8 @@ export const background = {
     'bg-surface-raised': tokenRef('theme.surfaces.surface-0'),
     'bg-mask': tokenRef('primitives.alpha.black.50'),
     'bg-surface-overlay': tokenRef('theme.surfaces.surface-50'),
+    'bg-placeholder': tokenRef('primitives.alpha.black.100'),
+    'bg-placeholder-highlight': tokenRef('primitives.alpha.white.600'),
     'bg-hover': tokenRef('primitives.alpha.black.100'),
     'bg-active': tokenRef('primitives.alpha.black.50'),
     'bg-backdrop': tokenRef('primitives.alpha.black.800'),
@@ -20,8 +22,15 @@ export const background = {
     'bg-surface-raised': tokenRef('theme.surfaces.surface-900'),
     'bg-mask': tokenRef('primitives.alpha.white.50'),
     'bg-surface-overlay': tokenRef('theme.surfaces.surface-700'),
-    'bg-hover': tokenRef('primitives.alpha.black.200'),
-    'bg-active': tokenRef('primitives.alpha.black.100'),
+    'bg-placeholder': tokenRef('primitives.alpha.white.100'),
+    'bg-placeholder-highlight': tokenRef('primitives.alpha.white.100'),
+    // Interaction overlays LIGHTEN in dark. A black alpha over a dark surface is invisible
+    // (and a literal no-op over `bg-canvas`, which is pure black), so hover/active follow the
+    // same polarity flip `bg-mask` / `bg-placeholder` / `border-default` already make here.
+    // `active` stacks on top of `hover` (the row paints both layers while pressed), so it is
+    // the smaller increment, mirroring light's 8% + 2%.
+    'bg-hover': tokenRef('primitives.alpha.white.100'),
+    'bg-active': tokenRef('primitives.alpha.white.50'),
     'bg-backdrop': tokenRef('primitives.alpha.black.800'),
     'bg-selected': tokenRef('theme.surfaces.surface-800'),
     'bg-contrast': tokenRef('theme.surfaces.surface-50'),

package/src/tokens/theme/border.js

@@ -1,15 +1,37 @@
 import { tokenRef } from '../../scripts/refs.js'
 
+// The neutral rules are OPAQUE steps of the surface palette, not alpha.
+//
+// They used to be `alpha.black.100` / `alpha.white.100` / `alpha.white.50`, which meant one
+// token painted a different colour on every backdrop — the same hairline read four different
+// ways across canvas / surface / raised / overlay — and two rules meeting composited into a
+// brighter line, so any stacked or abutting border doubled. An opaque step gives a rule one
+// identity wherever it is drawn, and makes overlap a no-op.
+//
+// The steps are ones added to fill the ramp's gaps (`gray.150` / `gray.250` / `gray.750` /
+// `gray.775`), NOT the steps that bracket them — `surface-200` (light) and `surface-800` (dark)
+// are what `--bg-selected` and `--bg-disabled` already use, so a border drawn there is exactly
+// its own fill and vanishes. Every pairing a component can produce now clears zero:
+//   light default  surface-250  vs canvas 32 · surface 37 · selected/disabled 11
+//   light muted    surface-150  vs canvas 14 · surface 19 · selected/disabled 7
+//   dark  default  surface-750  vs canvas 43 · surface 33 · raised 23 · selected 17
+//   dark  muted    surface-775  vs canvas 36 · surface 26 · raised 16 · selected 10
+//
+// `muted` sits closer to the background than `default` in BOTH themes — lighter in light,
+// darker in dark. It is a subtler rule, not a second default; it is drawn on `--bg-surface` /
+// `--bg-canvas` (the segmented-button track, the tab-view list, a flow node), never on a
+// selected or disabled fill, which is what lets the light step go as light as it does. Dark
+// cannot go proportionally as subtle: `--bg-surface-raised` sits at 20 and would swallow it.
 export const border = {
   light: {
-    'border-default': tokenRef('primitives.alpha.black.100'),
-    'border-muted': tokenRef('primitives.alpha.black.100'),
+    'border-default': tokenRef('theme.surfaces.surface-250'),
+    'border-muted': tokenRef('theme.surfaces.surface-150'),
     'border-strong': tokenRef('primitives.base.black'),
     'border-selected': tokenRef('brand.primary.primary-500')
   },
   dark: {
-    'border-default': tokenRef('primitives.alpha.white.100'),
-    'border-muted': tokenRef('primitives.alpha.white.50'),
+    'border-default': tokenRef('theme.surfaces.surface-750'),
+    'border-muted': tokenRef('theme.surfaces.surface-775'),
     'border-strong': tokenRef('primitives.base.white'),
     'border-selected': tokenRef('brand.primary.primary-500')
   }

package/src/tokens/theme/code-sintax.d.ts

@@ -12,6 +12,9 @@ export namespace codeSintax {
         'code-sintax-punctuation': {
             __ref: any;
         };
+        'code-sintax-comment': {
+            __ref: any;
+        };
         'code-sintax-function': {
             __ref: any;
         };
@@ -35,6 +38,9 @@ export namespace codeSintax {
         'code-sintax-punctuation': {
             __ref: any;
         };
+        'code-sintax-comment': {
+            __ref: any;
+        };
         'code-sintax-function': {
             __ref: any;
         };

package/src/tokens/theme/code-sintax.js

@@ -10,6 +10,7 @@ export const codeSintax = {
     'code-sintax-line-number': tokenRef('primitives.gray.500'),
     'code-sintax-keyword': tokenRef('primitives.blue.600'),
     'code-sintax-punctuation': tokenRef('primitives.gray.500'),
+    'code-sintax-comment': tokenRef('primitives.gray.500'),
     'code-sintax-function': tokenRef('brand.primary.primary-500'),
     'code-sintax-type': tokenRef('primitives.yellow.700'),
     'code-sintax-string': tokenRef('primitives.blue.600')
@@ -19,6 +20,7 @@ export const codeSintax = {
     'code-sintax-line-number': tokenRef('primitives.gray.400'),
     'code-sintax-keyword': tokenRef('primitives.blue.400'),
     'code-sintax-punctuation': tokenRef('primitives.gray.400'),
+    'code-sintax-comment': tokenRef('primitives.gray.400'),
     'code-sintax-function': tokenRef('brand.primary.primary-500'),
     'code-sintax-type': tokenRef('primitives.yellow.300'),
     'code-sintax-string': tokenRef('primitives.blue.400')

package/src/tokens/theme/feedback/info.js

@@ -3,12 +3,12 @@ import { tokenRef } from '../../../scripts/refs.js'
 export const info = {
   light: {
     info: tokenRef('primitives.blue.100'),
-    'info-border': tokenRef('primitives.alpha.violet.400'),
+    'info-border': tokenRef('primitives.alpha.blue.400'),
     'info-contrast': tokenRef('primitives.blue.700')
   },
   dark: {
     info: tokenRef('primitives.blue.900'),
-    'info-border': tokenRef('primitives.alpha.blue.500'),
+    'info-border': tokenRef('primitives.alpha.blue.400'),
     'info-contrast': tokenRef('primitives.blue.300')
   }
 }

package/src/tokens/theme/surfaces.d.ts

@@ -16,9 +16,15 @@ declare const shared: {
     'surface-100': {
         __ref: any;
     };
+    'surface-150': {
+        __ref: any;
+    };
     'surface-200': {
         __ref: any;
     };
+    'surface-250': {
+        __ref: any;
+    };
     'surface-300': {
         __ref: any;
     };
@@ -34,6 +40,12 @@ declare const shared: {
     'surface-700': {
         __ref: any;
     };
+    'surface-750': {
+        __ref: any;
+    };
+    'surface-775': {
+        __ref: any;
+    };
     'surface-800': {
         __ref: any;
     };

package/src/tokens/theme/surfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"surfaces.d.ts","sourceRoot":"","sources":["surfaces.js"],"names":[],"mappings":";;;;;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAaC"}
+{"version":3,"file":"surfaces.d.ts","sourceRoot":"","sources":["surfaces.js"],"names":[],"mappings":";;;;;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiBC"}

package/src/tokens/theme/surfaces.js

@@ -4,12 +4,16 @@ const shared = {
   'surface-0': tokenRef('primitives.base.white'),
   'surface-50': tokenRef('primitives.gray.50'),
   'surface-100': tokenRef('primitives.gray.100'),
+  'surface-150': tokenRef('primitives.gray.150'),
   'surface-200': tokenRef('primitives.gray.200'),
+  'surface-250': tokenRef('primitives.gray.250'),
   'surface-300': tokenRef('primitives.gray.300'),
   'surface-400': tokenRef('primitives.gray.400'),
   'surface-500': tokenRef('primitives.gray.500'),
   'surface-600': tokenRef('primitives.gray.600'),
   'surface-700': tokenRef('primitives.gray.700'),
+  'surface-750': tokenRef('primitives.gray.750'),
+  'surface-775': tokenRef('primitives.gray.775'),
   'surface-800': tokenRef('primitives.gray.800'),
   'surface-900': tokenRef('primitives.gray.900'),
   'surface-950': tokenRef('primitives.gray.950')

package/src/tokens/theme/text.js

@@ -3,7 +3,7 @@ import { tokenRef } from '../../scripts/refs.js'
 export const text = {
   light: {
     'text-default': tokenRef('primitives.gray.900'),
-    'text-muted': tokenRef('primitives.gray.600'),
+    'text-muted': tokenRef('primitives.gray.500'),
     'text-disabled': tokenRef('primitives.gray.400'),
     'text-link': tokenRef('primitives.blue.600'),
     'text-link-hover': tokenRef('primitives.blue.700'),
@@ -11,7 +11,7 @@ export const text = {
   },
   dark: {
     'text-default': tokenRef('primitives.gray.50'),
-    'text-muted': tokenRef('primitives.gray.400'),
+    'text-muted': tokenRef('primitives.gray.500'),
     'text-disabled': tokenRef('primitives.gray.700'),
     'text-link': tokenRef('primitives.blue.400'),
     'text-link-hover': tokenRef('primitives.blue.300'),

package/src/tokens/theme.d.ts

@@ -77,12 +77,16 @@ export namespace theme {
             let gray: {
                 50: string;
                 100: string;
+                150: string;
                 200: string;
+                250: string;
                 300: string;
                 400: string;
                 500: string;
                 600: string;
                 700: string;
+                750: string;
+                775: string;
                 800: string;
                 900: string;
                 950: string;

package/src/scripts/css-vars.d.ts

@@ -1,7 +0,0 @@
-export function createCssVars(): {
-    light: {};
-    dark: {};
-};
-export function cssVarsString(): string;
-export function injectCssVars(): HTMLStyleElement;
-//# sourceMappingURL=css-vars.d.ts.map

package/src/scripts/css-vars.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"css-vars.d.ts","sourceRoot":"","sources":["css-vars.js"],"names":[],"mappings":"AAgBO;;;EAQH;AAEG,wCAWN;AAEM,kDAMN"}

package/src/scripts/css-vars.js

@@ -1,46 +0,0 @@
-/**
- * CSS variables initializer for semantic tokens.
- *
- * Reads the single source-of-truth in `tokens/semantic/colors.js` and resolves
- * its `tokenRef(...)` entries against the primitive trees, producing a flat
- * `{ light, dark }` map of CSS variable names → resolved color values.
- */
-
-import {
-  brandPrimitives,
-  primitives,
-  surfacePrimitives
-} from '../tokens/primitives/colors/colors.js'
-import { semanticColorsData } from '../tokens/semantic/colors.js'
-import { resolveRefsToCssVars } from './resolve.js'
-
-export const createCssVars = () =>
-  resolveRefsToCssVars({
-    primitives,
-    surfacePrimitives,
-    brandPrimitives,
-    textSemantic: semanticColorsData.text,
-    backgroundSemantic: semanticColorsData.background,
-    borderSemantic: semanticColorsData.border
-  })
-
-export const cssVarsString = () => {
-  const { light, dark } = createCssVars()
-  const format = (vars) =>
-    Object.entries(vars)
-      .map(([key, value]) => `  ${key}: ${value};`)
-      .join('\n')
-
-  return [
-    `:root, [data-theme=light], .azion.azion-light {\n${format(light)}\n}`,
-    `[data-theme=dark], .dark, .azion.azion-dark {\n${format(dark)}\n}`
-  ].join('\n\n')
-}
-
-export const injectCssVars = () => {
-  const style = document.createElement('style')
-  style.setAttribute('data-azion-tokens', 'true')
-  style.textContent = cssVarsString()
-  document.head.appendChild(style)
-  return style
-}

package/src/scripts/resolve.d.ts

@@ -1,5 +0,0 @@
-export function resolveRefsToCssVars(tokens: any): {
-    light: {};
-    dark: {};
-};
-//# sourceMappingURL=resolve.d.ts.map

package/src/scripts/resolve.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"resolve.d.ts","sourceRoot":"","sources":["resolve.js"],"names":[],"mappings":"AAiCO;;;EAyEN"}

package/src/scripts/resolve.js

@@ -1,107 +0,0 @@
-/**
- * Resolve token refs to CSS variable map.
- */
-
-import { isTokenRef } from './refs.js'
-
-const getValueByPath = (obj, path) =>
-  path.split('.').reduce((acc, key) => {
-    if (acc && typeof acc === 'object' && key in acc) {
-      return acc[key]
-    }
-    return undefined
-  }, obj)
-
-const flattenToCssVars = (obj, prefix = []) => {
-  const result = {}
-  Object.entries(obj).forEach(([key, value]) => {
-    const nextPath = [...prefix, key]
-    if (value && typeof value === 'object' && !Array.isArray(value) && !isTokenRef(value)) {
-      Object.assign(result, flattenToCssVars(value, nextPath))
-      return
-    }
-    if (isTokenRef(value)) {
-      result[`--${nextPath.join('-')}`] = value.__ref
-      return
-    }
-    if (typeof value === 'string' || typeof value === 'number') {
-      result[`--${nextPath.join('-')}`] = String(value)
-    }
-  })
-  return result
-}
-
-export const resolveRefsToCssVars = (tokens) => {
-  const baseForResolve = {
-    primitives: tokens.primitives,
-    surfacePrimitives: tokens.surfacePrimitives,
-    brandPrimitives: tokens.brandPrimitives
-  }
-
-  const baseForVars = { primitives: tokens.primitives, surfacePrimitives: tokens.surfacePrimitives }
-
-  const lightSemantic = {
-    text: tokens.textSemantic.light,
-    background: tokens.backgroundSemantic.light,
-    border: tokens.borderSemantic.light
-  }
-  const darkSemantic = {
-    text: tokens.textSemantic.dark,
-    background: tokens.backgroundSemantic.dark,
-    border: tokens.borderSemantic.dark
-  }
-
-  const resolveBrandRef = (ref) => {
-    if (ref.startsWith('brand.surfaces.surface-')) {
-      const shade = ref.replace('brand.surfaces.surface-', '')
-      const resolved = getValueByPath(baseForResolve, `surfacePrimitives.surface.${shade}`)
-      return typeof resolved === 'string' || typeof resolved === 'number' ? String(resolved) : null
-    }
-    if (ref.startsWith('brand.primary.primary-')) {
-      const shade = ref.replace('brand.primary.primary-', '')
-      const resolved = getValueByPath(baseForResolve, `brandPrimitives.primary.${shade}`)
-      return typeof resolved === 'string' || typeof resolved === 'number' ? String(resolved) : null
-    }
-    if (ref.startsWith('brand.accent.accent-')) {
-      const shade = ref.replace('brand.accent.accent-', '')
-      const resolved = getValueByPath(baseForResolve, `brandPrimitives.accent.${shade}`)
-      return typeof resolved === 'string' || typeof resolved === 'number' ? String(resolved) : null
-    }
-    if (ref.startsWith('brand.absolute.')) {
-      const name = ref.replace('brand.absolute.', '')
-      const resolved = getValueByPath(baseForResolve, `brandPrimitives.absolute.${name}`)
-      return typeof resolved === 'string' || typeof resolved === 'number' ? String(resolved) : null
-    }
-    return null
-  }
-
-  const resolveSemantic = (semantic) => {
-    const flattened = flattenToCssVars(semantic)
-    return Object.fromEntries(
-      Object.entries(flattened).map(([key, value]) => {
-        if (value.startsWith('brand.')) {
-          return [key, resolveBrandRef(value) ?? value]
-        }
-        if (value.startsWith('primitives.') || value.startsWith('surfacePrimitives.')) {
-          const resolved = getValueByPath(baseForResolve, value)
-          return [
-            key,
-            typeof resolved === 'string' || typeof resolved === 'number' ? String(resolved) : value
-          ]
-        }
-        return [key, value]
-      })
-    )
-  }
-
-  return {
-    light: {
-      ...flattenToCssVars(baseForVars),
-      ...resolveSemantic(lightSemantic)
-    },
-    dark: {
-      ...flattenToCssVars(baseForVars),
-      ...resolveSemantic(darkSemantic)
-    }
-  }
-}