@aziontech/theme 2.6.0 → 4.0.0

package/src/scripts/compile-primitives.js

@@ -7,33 +7,33 @@
  * but for primitives only — no semantic light/dark split.
  */
 
-import { primitives as colorPrimitives } from '../tokens/primitives/colors/colors.js';
-import { animate } from '../tokens/primitives/animations/animate.js';
-import { ease } from '../tokens/primitives/animations/ease.js';
-import { borderWidths } from '../tokens/primitives/border-widths.js';
-import { breakpoints } from '../tokens/primitives/breakpoints.js';
-import { blur } from '../tokens/primitives/effects/blur.js';
-import { dropShadow } from '../tokens/primitives/effects/drop-shadow.js';
-import { insetShadow } from '../tokens/primitives/effects/inset-shadow.js';
-import { opacity } from '../tokens/primitives/effects/opacity.js';
-import { perspective } from '../tokens/primitives/effects/perspective.js';
-import { shadow } from '../tokens/primitives/effects/shadow.js';
-import { ringOffset } from '../tokens/primitives/ring-offset.js';
-import { aspectVideo } from '../tokens/primitives/shape/aspect-video.js';
-import { container } from '../tokens/primitives/shape/container.js';
-import { height } from '../tokens/primitives/shape/height.js';
-import { radius } from '../tokens/primitives/shape/radius.js';
-import { shape as shapeAliases } from '../tokens/primitives/shape/shape.js';
-import { size } from '../tokens/primitives/shape/size.js';
-import { spacing } from '../tokens/primitives/shape/spacing.js';
-import { width } from '../tokens/primitives/shape/width.js';
-import { fontFamily } from '../tokens/primitives/typography/font-family.js';
-import { fontSize } from '../tokens/primitives/typography/font-size.js';
-import { fontWeight } from '../tokens/primitives/typography/font-weight.js';
-import { leading } from '../tokens/primitives/typography/leading.js';
-import { lineHeight } from '../tokens/primitives/typography/line-height.js';
-import { tracking } from '../tokens/primitives/typography/tracking.js';
-import { isTokenRef } from './refs.js';
+import { primitives as colorPrimitives } from '../tokens/primitives/colors/colors.js'
+import { animate } from '../tokens/primitives/animations/animate.js'
+import { ease } from '../tokens/primitives/animations/ease.js'
+import { borderWidths } from '../tokens/primitives/border-widths.js'
+import { breakpoints } from '../tokens/primitives/breakpoints.js'
+import { blur } from '../tokens/primitives/effects/blur.js'
+import { dropShadow } from '../tokens/primitives/effects/drop-shadow.js'
+import { insetShadow } from '../tokens/primitives/effects/inset-shadow.js'
+import { opacity } from '../tokens/primitives/effects/opacity.js'
+import { perspective } from '../tokens/primitives/effects/perspective.js'
+import { shadow } from '../tokens/primitives/effects/shadow.js'
+import { ringOffset } from '../tokens/primitives/ring-offset.js'
+import { aspectVideo } from '../tokens/primitives/shape/aspect-video.js'
+import { container } from '../tokens/primitives/shape/container.js'
+import { height } from '../tokens/primitives/shape/height.js'
+import { radius } from '../tokens/primitives/shape/radius.js'
+import { shape as shapeAliases } from '../tokens/primitives/shape/shape.js'
+import { size } from '../tokens/primitives/shape/size.js'
+import { spacing } from '../tokens/primitives/shape/spacing.js'
+import { width } from '../tokens/primitives/shape/width.js'
+import { fontFamily } from '../tokens/primitives/typography/font-family.js'
+import { fontSize } from '../tokens/primitives/typography/font-size.js'
+import { fontWeight } from '../tokens/primitives/typography/font-weight.js'
+import { leading } from '../tokens/primitives/typography/leading.js'
+import { lineHeight } from '../tokens/primitives/typography/line-height.js'
+import { tracking } from '../tokens/primitives/typography/tracking.js'
+import { isTokenRef } from './refs.js'
 
 /**
  * Returns two trees:
@@ -43,13 +43,13 @@ import { isTokenRef } from './refs.js';
  *     wrappers removed, so emitted CSS vars are flat (no group prefix).
  */
 export const buildTrees = () => {
-  const { brand, ...restColors } = colorPrimitives;
+  const { brand, ...restColors } = colorPrimitives
   const color = {
     ...restColors,
-    primary: brand.primary,
-    accent: brand.accent,
-    absolute: brand.absolute,
-  };
+    'brand-primary': brand.primary,
+    'brand-accent': brand.accent,
+    absolute: brand.absolute
+  }
 
   const shape = {
     container,
@@ -59,25 +59,25 @@ export const buildTrees = () => {
     spacing,
     width,
     'aspect-video': aspectVideo,
-    ...shapeAliases,
-  };
+    ...shapeAliases
+  }
   const typography = {
     font: fontFamily,
     text: fontSize,
     'font-weight': fontWeight,
     leading,
     'line-height': lineHeight,
-    tracking,
-  };
+    tracking
+  }
   const effects = {
     blur,
     'drop-shadow': dropShadow,
     shadow,
     'inset-shadow': insetShadow,
     opacity,
-    perspective,
-  };
-  const animations = { ease, animate };
+    perspective
+  }
+  const animations = { ease, animate }
 
   const refsTree = {
     color,
@@ -87,8 +87,8 @@ export const buildTrees = () => {
     typography,
     effects,
     animations,
-    'ring-offset': ringOffset['ring-offset'],
-  };
+    'ring-offset': ringOffset['ring-offset']
+  }
 
   const varsTree = {
     color,
@@ -98,68 +98,68 @@ export const buildTrees = () => {
     ...typography,
     ...effects,
     ...animations,
-    'ring-offset': ringOffset['ring-offset'],
-  };
+    'ring-offset': ringOffset['ring-offset']
+  }
 
-  return { refsTree, varsTree };
-};
+  return { refsTree, varsTree }
+}
 
 const getValueByPath = (obj, path) =>
   path.split('.').reduce((acc, key) => {
-    if (acc && typeof acc === 'object' && key in acc) return acc[key];
-    return undefined;
-  }, obj);
+    if (acc && typeof acc === 'object' && key in acc) return acc[key]
+    return undefined
+  }, obj)
 
 const resolveRef = (refPath, refsTree) => {
-  const direct = getValueByPath(refsTree, refPath);
-  if (typeof direct === 'string' || typeof direct === 'number') return String(direct);
-  return null;
-};
+  const direct = getValueByPath(refsTree, refPath)
+  if (typeof direct === 'string' || typeof direct === 'number') return String(direct)
+  return null
+}
 
 // A leaf key of `DEFAULT` collapses to the parent prefix (Tailwind convention),
 // so `{ radius: { DEFAULT: '4px' } }` emits `--radius: 4px;`.
 const varNameFor = (path) => {
-  const segments = path[path.length - 1] === 'DEFAULT' ? path.slice(0, -1) : path;
-  return `--${segments.join('-')}`;
-};
+  const segments = path[path.length - 1] === 'DEFAULT' ? path.slice(0, -1) : path
+  return `--${segments.join('-')}`
+}
 
 export const flatten = (obj, refsTree, prefix = []) => {
-  const result = {};
+  const result = {}
   Object.entries(obj).forEach(([key, value]) => {
-    const nextPath = [...prefix, key];
+    const nextPath = [...prefix, key]
     if (isTokenRef(value)) {
-      const resolved = resolveRef(value.__ref, refsTree);
-      result[varNameFor(nextPath)] = resolved ?? value.__ref;
-      return;
+      const resolved = resolveRef(value.__ref, refsTree)
+      result[varNameFor(nextPath)] = resolved ?? value.__ref
+      return
     }
     if (value && typeof value === 'object' && !Array.isArray(value)) {
-      Object.assign(result, flatten(value, refsTree, nextPath));
-      return;
+      Object.assign(result, flatten(value, refsTree, nextPath))
+      return
     }
     if (typeof value === 'string' || typeof value === 'number') {
-      result[varNameFor(nextPath)] = String(value);
+      result[varNameFor(nextPath)] = String(value)
     }
-  });
-  return result;
-};
+  })
+  return result
+}
 
 export const compilePrimitivesVars = () => {
-  const { refsTree, varsTree } = buildTrees();
-  return flatten(varsTree, refsTree);
-};
+  const { refsTree, varsTree } = buildTrees()
+  return flatten(varsTree, refsTree)
+}
 
 export const compilePrimitivesCss = () => {
-  const vars = compilePrimitivesVars();
+  const vars = compilePrimitivesVars()
   const body = Object.entries(vars)
     .map(([k, v]) => `  ${k}: ${v};`)
-    .join('\n');
-  return `:root, [data-theme=light], .azion.azion-light {\n${body}\n}`;
-};
+    .join('\n')
+  return `:root, [data-theme=light], .azion.azion-light {\n${body}\n}`
+}
 
 export const injectPrimitivesCss = () => {
-  const style = document.createElement('style');
-  style.setAttribute('data-azion-primitives', 'true');
-  style.textContent = compilePrimitivesCss();
-  document.head.appendChild(style);
-  return style;
-};
+  const style = document.createElement('style')
+  style.setAttribute('data-azion-primitives', 'true')
+  style.textContent = compilePrimitivesCss()
+  document.head.appendChild(style)
+  return style
+}

package/src/scripts/compile-theme.js

@@ -2,80 +2,85 @@
  * Compile semantic theme tokens into a light/dark CSS variables stylesheet.
  *
  * Resolves `tokenRef(...)` aliases from `tokens/theme/*` (primary, secondary,
- * accent, surfaces, background, border, text, ring, feedback/*) against the
+ * accent, surfaces, background, border, text, ring, code-sintax, feedback/*)
+ * against the
  * primitives + brand + (pre-resolved) surfaces. Emits two blocks (light + dark).
  */
 
-import { brandPrimitives, primitives as colorPrimitives } from '../tokens/primitives/colors/colors.js';
-import { accent } from '../tokens/theme/accent.js';
-import { background } from '../tokens/theme/background.js';
-import { border } from '../tokens/theme/border.js';
-import { danger } from '../tokens/theme/feedback/danger.js';
-import { info } from '../tokens/theme/feedback/info.js';
-import { success } from '../tokens/theme/feedback/success.js';
-import { warning } from '../tokens/theme/feedback/warning.js';
-import { primary } from '../tokens/theme/primary.js';
-import { ring } from '../tokens/theme/ring.js';
-import { secondary } from '../tokens/theme/secondary.js';
-import { surfaces } from '../tokens/theme/surfaces.js';
-import { text } from '../tokens/theme/text.js';
-import { isTokenRef } from './refs.js';
+import {
+  brandPrimitives,
+  primitives as colorPrimitives
+} from '../tokens/primitives/colors/colors.js'
+import { accent } from '../tokens/theme/accent.js'
+import { background } from '../tokens/theme/background.js'
+import { codeSintax } from '../tokens/theme/code-sintax.js'
+import { border } from '../tokens/theme/border.js'
+import { danger } from '../tokens/theme/feedback/danger.js'
+import { info } from '../tokens/theme/feedback/info.js'
+import { success } from '../tokens/theme/feedback/success.js'
+import { warning } from '../tokens/theme/feedback/warning.js'
+import { primary } from '../tokens/theme/primary.js'
+import { ring } from '../tokens/theme/ring.js'
+import { secondary } from '../tokens/theme/secondary.js'
+import { surfaces } from '../tokens/theme/surfaces.js'
+import { text } from '../tokens/theme/text.js'
+import { isTokenRef } from './refs.js'
 
-const VARIANTS = ['light', 'dark'];
+const VARIANTS = ['light', 'dark']
 
 const getValueByPath = (obj, path) =>
   path.split('.').reduce((acc, key) => {
-    if (acc && typeof acc === 'object' && key in acc) return acc[key];
-    return undefined;
-  }, obj);
+    if (acc && typeof acc === 'object' && key in acc) return acc[key]
+    return undefined
+  }, obj)
 
 const resolveRef = (ref, surfacesResolved) => {
   if (ref.startsWith('primitives.')) {
-    const v = getValueByPath(colorPrimitives, ref.slice('primitives.'.length));
-    return typeof v === 'string' || typeof v === 'number' ? String(v) : null;
+    const v = getValueByPath(colorPrimitives, ref.slice('primitives.'.length))
+    return typeof v === 'string' || typeof v === 'number' ? String(v) : null
   }
   if (ref.startsWith('brand.primary.primary-')) {
-    const shade = ref.slice('brand.primary.primary-'.length);
-    return brandPrimitives.primary[shade] ?? null;
+    const shade = ref.slice('brand.primary.primary-'.length)
+    return brandPrimitives.primary[shade] ?? null
   }
   if (ref.startsWith('brand.accent.accent-')) {
-    const shade = ref.slice('brand.accent.accent-'.length);
-    return brandPrimitives.accent[shade] ?? null;
+    const shade = ref.slice('brand.accent.accent-'.length)
+    return brandPrimitives.accent[shade] ?? null
   }
   if (ref.startsWith('brand.absolute.')) {
-    const name = ref.slice('brand.absolute.'.length);
-    return brandPrimitives.absolute[name] ?? null;
+    const name = ref.slice('brand.absolute.'.length)
+    return brandPrimitives.absolute[name] ?? null
   }
   if (ref.startsWith('theme.surfaces.')) {
-    const key = ref.slice('theme.surfaces.'.length);
-    return surfacesResolved[key] ?? null;
+    const key = ref.slice('theme.surfaces.'.length)
+    return surfacesResolved[key] ?? null
   }
-  return null;
-};
+  return null
+}
 
 const resolveGroup = (group, surfacesResolved) => {
-  const result = {};
+  const result = {}
   Object.entries(group).forEach(([key, value]) => {
-    if (!isTokenRef(value)) return;
-    const resolved = resolveRef(value.__ref, surfacesResolved);
-    if (resolved != null) result[`--${key}`] = String(resolved);
-  });
-  return result;
-};
+    if (!isTokenRef(value)) return
+    const resolved = resolveRef(value.__ref, surfacesResolved)
+    if (resolved != null) result[`--${key}`] = String(resolved)
+  })
+  return result
+}
 
 const compileVariant = (variant) => {
   // Surfaces resolved first — other groups depend on them.
-  const surfacesResolved = {};
+  const surfacesResolved = {}
   Object.entries(surfaces[variant]).forEach(([key, value]) => {
-    if (!isTokenRef(value)) return;
-    const v = resolveRef(value.__ref, {});
-    if (v != null) surfacesResolved[key] = String(v);
-  });
+    if (!isTokenRef(value)) return
+    const v = resolveRef(value.__ref, {})
+    if (v != null) surfacesResolved[key] = String(v)
+  })
 
-  const vars = {};
+  const vars = {}
   Object.entries(surfacesResolved).forEach(([k, v]) => {
-    vars[`--${k}`] = v;
-  });
+    vars[`--${k}`] = v
+  })
 
   const groups = [
     primary[variant],
@@ -85,33 +90,35 @@ const compileVariant = (variant) => {
     border[variant],
     text[variant],
     ring[variant],
+    codeSintax[variant],
     success[variant],
     warning[variant],
     danger[variant],
-    info[variant],
-  ];
-  groups.forEach((g) => Object.assign(vars, resolveGroup(g, surfacesResolved)));
-  return vars;
-};
+    info[variant]
+  ]
+  groups.forEach((g) => Object.assign(vars, resolveGroup(g, surfacesResolved)))
+  return vars
+}
 
-export const compileThemeVars = () => Object.fromEntries(VARIANTS.map((v) => [v, compileVariant(v)]));
+export const compileThemeVars = () =>
+  Object.fromEntries(VARIANTS.map((v) => [v, compileVariant(v)]))
 
 export const compileThemeCss = () => {
-  const { light, dark } = compileThemeVars();
+  const { light, dark } = compileThemeVars()
   const fmt = (vars) =>
     Object.entries(vars)
       .map(([k, v]) => `  ${k}: ${v};`)
-      .join('\n');
+      .join('\n')
   return [
     `:root, [data-theme=light], .azion.azion-light {\n${fmt(light)}\n}`,
-    `[data-theme=dark], .dark, .azion.azion-dark {\n${fmt(dark)}\n}`,
-  ].join('\n\n');
-};
+    `[data-theme=dark], .dark, .azion.azion-dark {\n${fmt(dark)}\n}`
+  ].join('\n\n')
+}
 
 export const injectThemeCss = () => {
-  const style = document.createElement('style');
-  style.setAttribute('data-azion-theme', 'true');
-  style.textContent = compileThemeCss();
-  document.head.appendChild(style);
-  return style;
-};
+  const style = document.createElement('style')
+  style.setAttribute('data-azion-theme', 'true')
+  style.textContent = compileThemeCss()
+  document.head.appendChild(style)
+  return style
+}

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

@@ -1 +1 @@
-{"version":3,"file":"css-vars.d.ts","sourceRoot":"","sources":["css-vars.js"],"names":[],"mappings":"AAYO;;;EAQH;AAEG,wCAWN;AAEM,kDAMN"}
+{"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

@@ -6,9 +6,13 @@
  * `{ 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';
+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({
@@ -17,26 +21,26 @@ export const createCssVars = () =>
     brandPrimitives,
     textSemantic: semanticColorsData.text,
     backgroundSemantic: semanticColorsData.background,
-    borderSemantic: semanticColorsData.border,
-  });
+    borderSemantic: semanticColorsData.border
+  })
 
 export const cssVarsString = () => {
-  const { light, dark } = createCssVars();
+  const { light, dark } = createCssVars()
   const format = (vars) =>
     Object.entries(vars)
       .map(([key, value]) => `  ${key}: ${value};`)
-      .join('\n');
+      .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');
-};
+    `[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;
-};
+  const style = document.createElement('style')
+  style.setAttribute('data-azion-tokens', 'true')
+  style.textContent = cssVarsString()
+  document.head.appendChild(style)
+  return style
+}

package/src/scripts/refs.js

@@ -2,6 +2,6 @@
  * Token reference helpers.
  */
 
-export const tokenRef = (path) => ({ __ref: path });
+export const tokenRef = (path) => ({ __ref: path })
 
-export const isTokenRef = (value) => typeof value === 'object' && value !== null && '__ref' in value;
+export const isTokenRef = (value) => typeof value === 'object' && value !== null && '__ref' in value

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

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

package/src/scripts/resolve.js

@@ -2,103 +2,106 @@
  * Resolve token refs to CSS variable map.
  */
 
-import { isTokenRef } from './refs.js';
+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 acc[key]
     }
-    return undefined;
-  }, obj);
+    return undefined
+  }, obj)
 
 const flattenToCssVars = (obj, prefix = []) => {
-  const result = {};
+  const result = {}
   Object.entries(obj).forEach(([key, value]) => {
-    const nextPath = [...prefix, key];
+    const nextPath = [...prefix, key]
     if (value && typeof value === 'object' && !Array.isArray(value) && !isTokenRef(value)) {
-      Object.assign(result, flattenToCssVars(value, nextPath));
-      return;
+      Object.assign(result, flattenToCssVars(value, nextPath))
+      return
     }
     if (isTokenRef(value)) {
-      result[`--${nextPath.join('-')}`] = value.__ref;
-      return;
+      result[`--${nextPath.join('-')}`] = value.__ref
+      return
     }
     if (typeof value === 'string' || typeof value === 'number') {
-      result[`--${nextPath.join('-')}`] = String(value);
+      result[`--${nextPath.join('-')}`] = String(value)
     }
-  });
-  return result;
-};
+  })
+  return result
+}
 
 export const resolveRefsToCssVars = (tokens) => {
   const baseForResolve = {
     primitives: tokens.primitives,
     surfacePrimitives: tokens.surfacePrimitives,
-    brandPrimitives: tokens.brandPrimitives,
-  };
+    brandPrimitives: tokens.brandPrimitives
+  }
 
-  const baseForVars = { primitives: tokens.primitives, surfacePrimitives: tokens.surfacePrimitives };
+  const baseForVars = { primitives: tokens.primitives, surfacePrimitives: tokens.surfacePrimitives }
 
   const lightSemantic = {
     text: tokens.textSemantic.light,
     background: tokens.backgroundSemantic.light,
-    border: tokens.borderSemantic.light,
-  };
+    border: tokens.borderSemantic.light
+  }
   const darkSemantic = {
     text: tokens.textSemantic.dark,
     background: tokens.backgroundSemantic.dark,
-    border: tokens.borderSemantic.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;
+      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;
+      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;
+      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;
+      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;
-  };
+    return null
+  }
 
   const resolveSemantic = (semantic) => {
-    const flattened = flattenToCssVars(semantic);
+    const flattened = flattenToCssVars(semantic)
     return Object.fromEntries(
       Object.entries(flattened).map(([key, value]) => {
         if (value.startsWith('brand.')) {
-          return [key, resolveBrandRef(value) ?? value];
+          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];
+          const resolved = getValueByPath(baseForResolve, value)
+          return [
+            key,
+            typeof resolved === 'string' || typeof resolved === 'number' ? String(resolved) : value
+          ]
         }
-        return [key, value];
+        return [key, value]
       })
-    );
-  };
+    )
+  }
 
   return {
     light: {
       ...flattenToCssVars(baseForVars),
-      ...resolveSemantic(lightSemantic),
+      ...resolveSemantic(lightSemantic)
     },
     dark: {
       ...flattenToCssVars(baseForVars),
-      ...resolveSemantic(darkSemantic),
-    },
-  };
-};
+      ...resolveSemantic(darkSemantic)
+    }
+  }
+}