@aziontech/theme 4.1.0 → 4.3.0

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,38 +79,38 @@ 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-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 },
@@ -144,21 +146,21 @@ export const textsData = {
     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 +168,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 +183,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

@@ -0,0 +1,38 @@
+/**
+ * Declarative z-index tokens.
+ *
+ * Intra-input stacking:
+ *
+ *   - `z-input-field`   → native field / interactive foreground (e.g. an
+ *                          `<input>` or trigger button) sitting above the
+ *                          input's own background surface, icons, and
+ *                          adornments so keyboard/mouse focus is never
+ *                          hijacked by a decorative sibling.
+ *   - `z-input-popup`   → inline (non-teleported) overlays anchored to the
+ *                          input — dropdown menus, option lists, popovers —
+ *                          that must sit above surrounding form content but
+ *                          within the current stacking context.
+ *   - `z-input-overlay` → teleported overlays (rendered under `<body>` via
+ *                          `<Teleport>`) that must clear application chrome
+ *                          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
+ * introduce ad-hoc numeric z-index in input `.vue` files.
+ */
+export const zIndicesData: {
+    'z-input-field': {
+        _: string;
+    };
+    'z-input-popup': {
+        _: string;
+    };
+    'z-input-overlay': {
+        _: string;
+    };
+};
+declare namespace _default {
+    export { zIndicesData };
+}
+export default _default;
+//# sourceMappingURL=z-indices.data.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"z-indices.data.d.ts","sourceRoot":"","sources":["z-indices.data.js"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH;;;;;;;;;;EAIE"}

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

@@ -0,0 +1,30 @@
+/**
+ * Declarative z-index tokens.
+ *
+ * Intra-input stacking:
+ *
+ *   - `z-input-field`   → native field / interactive foreground (e.g. an
+ *                          `<input>` or trigger button) sitting above the
+ *                          input's own background surface, icons, and
+ *                          adornments so keyboard/mouse focus is never
+ *                          hijacked by a decorative sibling.
+ *   - `z-input-popup`   → inline (non-teleported) overlays anchored to the
+ *                          input — dropdown menus, option lists, popovers —
+ *                          that must sit above surrounding form content but
+ *                          within the current stacking context.
+ *   - `z-input-overlay` → teleported overlays (rendered under `<body>` via
+ *                          `<Teleport>`) that must clear application chrome
+ *                          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
+ * introduce ad-hoc numeric z-index in input `.vue` files.
+ */
+
+export const zIndicesData = {
+  'z-input-field': { _: '1' },
+  'z-input-popup': { _: '10' },
+  'z-input-overlay': { _: '1100' },
+};
+
+export default { zIndicesData };

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/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/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/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)
-    }
-  }
-}