@aziontech/theme 2.5.0 → 4.0.0

package/src/tokens/README.md

@@ -140,14 +140,14 @@ Plain JS objects with literal values. Theme-invariant.
 // tokens/primitives/colors/brand.js
 export const brandPrimitives = {
   primary: { 50: '#FFF5EF', 100: '#FFE7D8', /* … */ 500: '#FE601F', /* … */ 950: '#401602' },
-  accent:  { 50: '#F6F6FF', /* … */ 500: '#8A84EC', /* … */ 950: '#0B0A19' },
-  absolute: { black: '#0A0A0A', white: '#FCFCFC' },
-};
+  accent: { 50: '#F6F6FF', /* … */ 500: '#8A84EC', /* … */ 950: '#0B0A19' },
+  absolute: { black: '#0A0A0A', white: '#FCFCFC' }
+}
 ```
 
 ```js
 // tokens/primitives/shape/spacing.js
-export const spacing = { 1: '4px', 2: '8px', /* … */ 96: '384px' };
+export const spacing = { 1: '4px', 2: '8px', /* … */ 96: '384px' }
 ```
 
 ### Semantic / theme
@@ -156,22 +156,22 @@ Objects with `light` / `dark` variants. Values are `tokenRef(...)` calls that po
 
 ```js
 // tokens/theme/primary.js
-import { tokenRef } from '../../scripts/refs.js';
+import { tokenRef } from '../../scripts/refs.js'
 
 export const primary = {
   light: {
-    primary:           tokenRef('brand.primary.primary-500'),
-    'primary-mask':    tokenRef('primitives.alpha.orange.100'),
-    'primary-hover':   tokenRef('brand.primary.primary-600'),
-    'primary-contrast': tokenRef('primitives.base.black'),
+    primary: tokenRef('brand.primary.primary-500'),
+    'primary-mask': tokenRef('primitives.alpha.orange.100'),
+    'primary-hover': tokenRef('brand.primary.primary-600'),
+    'primary-contrast': tokenRef('primitives.base.black')
   },
   dark: {
-    primary:           tokenRef('brand.primary.primary-500'),
-    'primary-mask':    tokenRef('primitives.alpha.orange.100'),
-    'primary-hover':   tokenRef('brand.primary.primary-600'),
-    'primary-contrast': tokenRef('primitives.base.white'),
-  },
-};
+    primary: tokenRef('brand.primary.primary-500'),
+    'primary-mask': tokenRef('primitives.alpha.orange.100'),
+    'primary-hover': tokenRef('brand.primary.primary-600'),
+    'primary-contrast': tokenRef('primitives.base.white')
+  }
+}
 ```
 
 ### Responsive semantic data (`*.data.js`)
@@ -182,9 +182,9 @@ Containers, spacings, and texts use a per-breakpoint table that `build-tokens.mj
 // tokens/semantic/spacings.data.js
 export const spacingsData = {
   'gap-sm': { _: '8px', md: '12px', xl: '16px' },
-  'gap-md': { _: '12px', md: '16px', xl: '24px' },
+  'gap-md': { _: '12px', md: '16px', xl: '24px' }
   // …
-};
+}
 ```
 
 `_` is the base value emitted in `:root`; the breakpoint keys (`sm`, `md`, `lg`, `xl`, `2xl`) become media-query overrides.
@@ -196,63 +196,38 @@ export const spacingsData = {
 ### Building the package
 
 ```bash
-# emit both v3 and v4 bundles
+# emit the v4 bundle
 pnpm --filter @aziontech/theme build:tokens
-
-# only one target
-pnpm --filter @aziontech/theme build:tokens:v3
-pnpm --filter @aziontech/theme build:tokens:v4
-
-# v3 + compile final CSS with tailwindcss
-pnpm --filter @aziontech/theme build:css:v3
 ```
 
-Outputs land in `packages/theme/dist/v3/` and `packages/theme/dist/v4/`.
-
-### Consuming in a Tailwind v3 project
+Output lands in `packages/theme/dist/v4/`.
 
-```js
-// tailwind.config.js
-import themePreset from '@aziontech/theme/tailwind-preset/v3'
-
-export default {
-  presets: [themePreset],
-  content: ['./src/**/*.{vue,js,ts,jsx,tsx}'],
-  darkMode: ['class'],
-}
-```
+### Consuming (Tailwind v4)
 
 ```css
 /* main.css */
-@import '@aziontech/theme/v3/globals.css';
-```
-
-Utilities like `text-default`, `bg-surface`, `border-default`, `text-primary`, `gap-md`, `p-md`, `.text-heading-lg`, etc. are then available everywhere.
-
-### Consuming in a Tailwind v4 project
-
-```css
-/* main.css */
-@import '@aziontech/theme/v4/globals.css';
+@import '@aziontech/theme/globals.css';
 ```
 
 No `tailwind.config.js` needed — v4 reads `@theme { … }` directly from the imported CSS.
 
+Utilities like `text-default`, `bg-surface`, `border-default`, `text-primary`, `gap-md`, `p-md`, `.text-heading-lg`, `animate-popup-scale-in`, etc. are then available everywhere.
+
 ### As JS objects (Node / build steps)
 
 ```js
-import { createCssVars, cssVarsString } from '@aziontech/theme';
+import { createCssVars, cssVarsString } from '@aziontech/theme'
 
-createCssVars();   // → { light: { '--text-default': '#1A1A1A', … }, dark: { … } }
-cssVarsString();   // → ':root, [data-theme=light], .azion.azion-light { … } [data-theme=dark], … { … }'
+createCssVars() // → { light: { '--text-default': '#1A1A1A', … }, dark: { … } }
+cssVarsString() // → ':root, [data-theme=light], .azion.azion-light { … } [data-theme=dark], … { … }'
 ```
 
 ### Injecting at runtime (browser)
 
 ```js
-import { injectCssVars } from '@aziontech/theme';
+import { injectCssVars } from '@aziontech/theme'
 
-injectCssVars(); // appends a <style data-azion-tokens> element to <head>
+injectCssVars() // appends a <style data-azion-tokens> element to <head>
 ```
 
 Only useful if you can't precompile and import `globals.css` — production usage should prefer the static stylesheet.
@@ -269,8 +244,8 @@ Only useful if you can't precompile and import `globals.css` — production usag
    ```js
    export const spacing = {
      /* … */
-     128: '512px',   // new
-   };
+     128: '512px' // new
+   }
    ```
 
 3. Rebuild (`pnpm --filter @aziontech/theme build:tokens`). The compiler picks it up and emits `--spacing-128: 512px`.
@@ -285,13 +260,13 @@ Only useful if you can't precompile and import `globals.css` — production usag
    export const border = {
      light: {
        /* … */
-       'border-emphasis': tokenRef('primitives.gray.400'),
+       'border-emphasis': tokenRef('primitives.gray.400')
      },
      dark: {
        /* … */
-       'border-emphasis': tokenRef('primitives.gray.500'),
-     },
-   };
+       'border-emphasis': tokenRef('primitives.gray.500')
+     }
+   }
    ```
 
 3. Rebuild. The new variable lands in both `:root` and `[data-theme=dark]` blocks.
@@ -304,8 +279,8 @@ Only useful if you can't precompile and import `globals.css` — production usag
    // tokens/semantic/spacings.data.js
    export const spacingsData = {
      /* … */
-     'gap-2xl': { _: '32px', md: '40px', xl: '56px' },
-   };
+     'gap-2xl': { _: '32px', md: '40px', xl: '56px' }
+   }
    ```
 
 2. Rebuild. `build-tokens.mjs` emits the base var in `:root`, per-breakpoint `@media` overrides, **and** a matching `.gap-2xl { gap: var(--gap-2xl) }` utility.
@@ -333,14 +308,14 @@ Bundles with `fontSize: 'inherit'` are omitted from the Tailwind `fontSize` pres
 
 `tokenRef(path)` returns a marker object `{ __ref: path }` that the compiler resolves at build time. Supported path prefixes (see `scripts/resolve.js`):
 
-| Prefix | Looks up |
-|---|---|
-| `primitives.X.Y.Z` | `tokens/primitives/colors/colors.js` tree (e.g., `primitives.gray.900`, `primitives.alpha.orange.100`) |
-| `surfacePrimitives.surface.N` | the surface palette (used internally; usually referenced via `brand.surfaces.…`) |
-| `brand.surfaces.surface-N` | `surfacePrimitives.surface[N]` (e.g., `brand.surfaces.surface-100` → `#F5F5F5`) |
-| `brand.primary.primary-N` | `brandPrimitives.primary[N]` (e.g., `brand.primary.primary-500` → `#FE601F`) |
-| `brand.accent.accent-N` | `brandPrimitives.accent[N]` |
-| `brand.absolute.X` | `brandPrimitives.absolute.X` (`black` / `white`) |
+| Prefix                        | Looks up                                                                                               |
+| ----------------------------- | ------------------------------------------------------------------------------------------------------ |
+| `primitives.X.Y.Z`            | `tokens/primitives/colors/colors.js` tree (e.g., `primitives.gray.900`, `primitives.alpha.orange.100`) |
+| `surfacePrimitives.surface.N` | the surface palette (used internally; usually referenced via `brand.surfaces.…`)                       |
+| `brand.surfaces.surface-N`    | `surfacePrimitives.surface[N]` (e.g., `brand.surfaces.surface-100` → `#F5F5F5`)                        |
+| `brand.primary.primary-N`     | `brandPrimitives.primary[N]` (e.g., `brand.primary.primary-500` → `#FE601F`)                           |
+| `brand.accent.accent-N`       | `brandPrimitives.accent[N]`                                                                            |
+| `brand.absolute.X`            | `brandPrimitives.absolute.X` (`black` / `white`)                                                       |
 
 Refs of unknown prefixes are left as the raw path string in the output — flag for "this needs resolver support".
 
@@ -365,11 +340,15 @@ npx http-server packages/theme/src -p 8080
 The compiled CSS targets multiple hooks so the runtime can pick whichever convention the consumer uses:
 
 ```css
-:root, [data-theme=light], .azion.azion-light {
+:root,
+[data-theme='light'],
+.azion.azion-light {
   /* light theme vars */
 }
 
-[data-theme=dark], .dark, .azion.azion-dark {
+[data-theme='dark'],
+.dark,
+.azion.azion-dark {
   /* dark theme vars */
 }
 ```
@@ -378,13 +357,13 @@ Switching is a one-liner:
 
 ```js
 // data-attribute strategy
-document.documentElement.setAttribute('data-theme', 'dark'); // or 'light'
+document.documentElement.setAttribute('data-theme', 'dark') // or 'light'
 
 // Tailwind class strategy
-document.documentElement.classList.toggle('dark');
+document.documentElement.classList.toggle('dark')
 
 // Azion namespaced classes (use one or the other)
-document.documentElement.classList.add('azion', 'azion-dark');
+document.documentElement.classList.add('azion', 'azion-dark')
 ```
 
 All three strategies hit the same set of CSS variables.

package/src/tokens/index.js

@@ -2,8 +2,8 @@
  * Tokens public exports.
  */
 
-export { createCssVars, cssVarsString, injectCssVars } from '../scripts/css-vars.js';
-export * from './primitives/colors/colors.js';
-export * from './semantic/colors.js';
-export { textsData } from './semantic/texts.data.js';
-export * from './theme.js';
+export { createCssVars, cssVarsString, injectCssVars } from '../scripts/css-vars.js'
+export * from './primitives/colors/colors.js'
+export * from './semantic/colors.js'
+export { textsData } from './semantic/texts.data.js'
+export * from './theme.js'

package/src/tokens/primitives/animations/animate.d.ts

@@ -11,14 +11,24 @@ export const duration: {
     'moderate-02': string;
     'slow-01': string;
     'slow-02': string;
+    'slow-03': string;
+    'slow-04': string;
 };
 export const animate: {
     spin: string;
     ping: string;
     pulse: string;
     bounce: string;
+    shimmer: string;
+    blink: string;
+    'fade-in': string;
+    'fade-out': string;
+    'slide-down': string;
+    'highlight-fade': string;
     'popup-scale-in': string;
     'popup-scale-out': string;
+    'progress-indeterminate': string;
+    'progress-indeterminate-short': string;
 };
 declare namespace _default {
     export { animate };

package/src/tokens/primitives/animations/animate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"animate.d.ts","sourceRoot":"","sources":["animate.js"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF;;;;;;;EAOE;AAEF;;;;;;;EAOE"}
+{"version":3,"file":"animate.d.ts","sourceRoot":"","sources":["animate.js"],"names":[],"mappings":"AAAA;;;;;EAKC;AAED;;;;;;;;;EASC;AAED;;;;;;;;;;;;;;;EAeC"}

package/src/tokens/primitives/animations/animate.js

@@ -2,8 +2,8 @@ export const curve = {
   'productive-entrance': 'cubic-bezier(0.39, 0.57, 0.56, 1)',
   'productive-exit': 'cubic-bezier(0.55, 0.09, 0.68, 0.53)',
   'expressive-entrance': 'cubic-bezier(0.17, 0.84, 0.44, 1)',
-  'expressive-exit': 'cubic-bezier(0.95, 0.05, 0.8, 0.04)',
-};
+  'expressive-exit': 'cubic-bezier(0.95, 0.05, 0.8, 0.04)'
+}
 
 export const duration = {
   'fast-01': '70ms',
@@ -12,15 +12,25 @@ export const duration = {
   'moderate-02': '240ms',
   'slow-01': '400ms',
   'slow-02': '700ms',
-};
+  'slow-03': '1100ms',
+  'slow-04': '2100ms'
+}
 
 export const animate = {
   spin: 'spin 1s linear infinite',
   ping: 'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite',
   pulse: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
   bounce: 'bounce 1s infinite',
+  shimmer: 'shimmer 1.6s linear infinite',
+  blink: 'blink 1s step-end infinite',
+  'fade-in': 'fadeIn 220ms ease-in-out',
+  'fade-out': 'fadeOut 220ms ease-in-out',
+  'slide-down': 'slideDown 220ms ease-in-out',
+  'highlight-fade': 'highlight ease-in forwards',
   'popup-scale-in': `popupScaleIn ${duration['moderate-01']} ${curve['productive-entrance']}`,
   'popup-scale-out': `popupScaleOut ${duration['fast-02']} ${curve['productive-exit']}`,
-};
+  'progress-indeterminate': `progressIndeterminate ${duration['slow-04']} ${curve['productive-entrance']} infinite`,
+  'progress-indeterminate-short': `progressIndeterminateShort ${duration['slow-04']} ${curve['expressive-entrance']} ${duration['slow-03']} infinite`
+}
 
-export default { animate, curve, duration };
+export default { animate, curve, duration }

package/src/tokens/primitives/animations/ease.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ease.d.ts","sourceRoot":"","sources":["ease.js"],"names":[],"mappings":"AAAA;;;;EAIE"}
+{"version":3,"file":"ease.d.ts","sourceRoot":"","sources":["ease.js"],"names":[],"mappings":"AAAA;;;;EAIC"}

package/src/tokens/primitives/animations/ease.js

@@ -1,7 +1,7 @@
 export const ease = {
   in: 'cubic-bezier(0.4, 0, 1, 1)',
   out: 'cubic-bezier(0, 0, 0.2, 1)',
-  'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
-};
+  'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)'
+}
 
-export default { ease };
+export default { ease }

package/src/tokens/primitives/animations/keyframes.d.ts

@@ -0,0 +1,63 @@
+export namespace keyframes {
+    let fadeIn: {
+        '0%': string;
+        '100%': string;
+    };
+    let fadeOut: {
+        '0%': string;
+        '100%': string;
+    };
+    let slideDown: {
+        '0%': string;
+        '100%': string;
+    };
+    let blink: {
+        '0%, 100%': string;
+        '50%': string;
+    };
+    let highlight: {
+        '0%': string;
+        '100%': string;
+    };
+    let shimmer: {
+        '0%': string;
+        '100%': string;
+    };
+    let popupScaleIn: {
+        '0%': string;
+        '100%': string;
+    };
+    let popupScaleOut: {
+        '0%': string;
+        '100%': string;
+    };
+    let progressIndeterminate: {
+        '0%': string;
+        '60%': string;
+        '100%': string;
+    };
+    let progressIndeterminateShort: {
+        '0%': string;
+        '60%': string;
+        '100%': string;
+    };
+}
+/**
+ * Utilities that need CSS properties beyond the `animation` shorthand
+ * emitted by Tailwind v4 from `--animate-*`. Serialized into
+ * `@layer components` in `dist/v4/globals.css`.
+ */
+export const animateExtras: {
+    'animate-popup-scale-in': {
+        'transform-origin': string;
+    };
+    'animate-popup-scale-out': {
+        'transform-origin': string;
+    };
+};
+declare namespace _default {
+    export { keyframes };
+    export { animateExtras };
+}
+export default _default;
+//# sourceMappingURL=keyframes.d.ts.map

package/src/tokens/primitives/animations/keyframes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyframes.d.ts","sourceRoot":"","sources":["keyframes.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0DA;;;;GAIG;AACH;;;;;;;EAGE"}

package/src/tokens/primitives/animations/keyframes.js

@@ -0,0 +1,69 @@
+/**
+ * Raw `@keyframes` definitions used by `--animate-*` in `animate.js`.
+ *
+ * Consumed by `scripts/build-tokens.mjs` to emit real `@keyframes` blocks
+ * in the Tailwind v4 `dist/v4/globals.css` output. Tailwind v4 registers
+ * the utility via `@theme { --animate-<name>: ... }`, but does not
+ * generate the `@keyframes` — those live here.
+ *
+ * Values are plain CSS-style declarations (strings), not the camelCase
+ * object form used by the legacy v3 plugin — this way the build script
+ * can serialize them verbatim.
+ */
+
+export const keyframes = {
+  fadeIn: {
+    '0%': 'opacity: 0',
+    '100%': 'opacity: 1',
+  },
+  fadeOut: {
+    '0%': 'opacity: 1',
+    '100%': 'opacity: 0',
+  },
+  slideDown: {
+    '0%': 'height: 0',
+    '100%': 'height: auto',
+  },
+  blink: {
+    '0%, 100%': 'opacity: 1',
+    '50%': 'opacity: 0',
+  },
+  highlight: {
+    '0%': 'background-color: var(--surface-hover); font-weight: 500',
+    '100%': 'background-color: var(--surface-hover); font-weight: 500',
+  },
+  shimmer: {
+    '0%': 'background-position: 200% 0',
+    '100%': 'background-position: -200% 0',
+  },
+  popupScaleIn: {
+    '0%': 'opacity: 0; transform: scale(0.95)',
+    '100%': 'opacity: 1; transform: scale(1)',
+  },
+  popupScaleOut: {
+    '0%': 'opacity: 1; transform: scale(1)',
+    '100%': 'opacity: 0; transform: scale(0.95)',
+  },
+  progressIndeterminate: {
+    '0%': 'inset-inline-start: -35%; inset-inline-end: 100%',
+    '60%': 'inset-inline-start: 100%; inset-inline-end: -90%',
+    '100%': 'inset-inline-start: 100%; inset-inline-end: -90%',
+  },
+  progressIndeterminateShort: {
+    '0%': 'inset-inline-start: -200%; inset-inline-end: 100%',
+    '60%': 'inset-inline-start: 107%; inset-inline-end: -8%',
+    '100%': 'inset-inline-start: 107%; inset-inline-end: -8%',
+  },
+};
+
+/**
+ * Utilities that need CSS properties beyond the `animation` shorthand
+ * emitted by Tailwind v4 from `--animate-*`. Serialized into
+ * `@layer components` in `dist/v4/globals.css`.
+ */
+export const animateExtras = {
+  'animate-popup-scale-in': { 'transform-origin': 'var(--popup-origin, center)' },
+  'animate-popup-scale-out': { 'transform-origin': 'var(--popup-origin, center)' },
+};
+
+export default { keyframes, animateExtras };

package/src/tokens/primitives/border-widths.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"border-widths.d.ts","sourceRoot":"","sources":["border-widths.js"],"names":[],"mappings":"AAAA;;;;;;EAME"}
+{"version":3,"file":"border-widths.d.ts","sourceRoot":"","sources":["border-widths.js"],"names":[],"mappings":"AAAA;;;;;;EAMC"}

package/src/tokens/primitives/border-widths.js

@@ -3,7 +3,7 @@ export const borderWidths = {
   1: '0.8px',
   2: '2px',
   3: '3px',
-  4: '4px',
-};
+  4: '4px'
+}
 
-export default { borderWidths };
+export default { borderWidths }

package/src/tokens/primitives/breakpoints.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"breakpoints.d.ts","sourceRoot":"","sources":["breakpoints.js"],"names":[],"mappings":"AAAA;;;;;;EAME"}
+{"version":3,"file":"breakpoints.d.ts","sourceRoot":"","sources":["breakpoints.js"],"names":[],"mappings":"AAAA;;;;;;EAMC"}

package/src/tokens/primitives/breakpoints.js

@@ -3,7 +3,7 @@ export const breakpoints = {
   md: '768px',
   lg: '1024px',
   xl: '1280px',
-  '2xl': '1536px',
-};
+  '2xl': '1536px'
+}
 
-export default { breakpoints };
+export default { breakpoints }