@aziontech/theme 4.2.0 → 4.3.1

package/src/scripts/build-tokens.mjs

@@ -14,6 +14,10 @@
  *                               typography, breakpoints, animations, …)
  *   - `tokens/semantic/{containers,spacings,texts}.data.js`
  *                               responsive-shaped semantic tokens
+ *   - `tokens/semantic/layouts.data.js`
+ *                               layout tokens (all derived from --spacing-* /
+ *                               --container-*) + the `@utility` blocks that
+ *                               build the container system on them
  *   - `tokens/primitives/animations/{animate,keyframes}.js`
  *                               animation utilities (`--animate-*`) + `@keyframes`
  *                               definitions + extra CSS (transform-origin) for
@@ -26,25 +30,25 @@ import { mkdir, readFile, writeFile } from 'node:fs/promises';
 import { dirname, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
 
-import { animate } from '../tokens/primitives/animations/animate.js';
+import { animate, curve, duration } from '../tokens/primitives/animations/animate.js';
 import { animateExtras, keyframes } from '../tokens/primitives/animations/keyframes.js';
 import { breakpoints } from '../tokens/primitives/breakpoints.js';
-import { buildTrees, flatten } from './compile-primitives.js';
+import { compilePrimitivesVars } from './compile-primitives.js';
 import { compileThemeCss, compileThemeVars } from './compile-theme.js';
 import { containersData } from '../tokens/semantic/containers.data.js';
+import { layoutsData, layoutsUtilities } from '../tokens/semantic/layouts.data.js';
 import { spacingsData } from '../tokens/semantic/spacings.data.js';
 import { textsData } from '../tokens/semantic/texts.data.js';
 import { zIndicesData } from '../tokens/semantic/z-indices.data.js';
+import { assertNoZeroWithUnit } from './zero-unit.mjs';
 
 const BREAKPOINT_ORDER = ['sm', 'md', 'lg', 'xl', '2xl'];
 
 const kebab = (s) => s.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
 
 // ─── 1. Primitives ──────────────────────────────────────────────────────────
-const flattenPrimitives = () => {
-  const { refsTree, varsTree } = buildTrees();
-  return flatten(varsTree, refsTree);
-};
+// compilePrimitivesVars throws on any unresolved tokenRef (see refs.js).
+const flattenPrimitives = () => compilePrimitivesVars();
 
 // ─── 2. Semantic flattening ─────────────────────────────────────────────────
 const splitResponsive = (value) => {
@@ -93,6 +97,7 @@ const buildFlatModel = () => ({
   containers: flattenSingleValue(containersData, (k) => `--container-${k}`),
   spacings: flattenSingleValue(spacingsData, (k) => `--${k}`),
   zIndices: flattenSingleValue(zIndicesData, (k) => `--${k}`),
+  layouts: flattenSingleValue(layoutsData, (k) => `--${k}`),
   texts: flattenBundle(textsData),
 });
 
@@ -235,6 +240,33 @@ const emitSemanticColorUtilities = () => {
  * interactive element loses the hand cursor unless a component overrides it.
  * Disabled controls keep the default cursor.
  */
+/**
+ * Emit a map of `@utility` blocks. A string value is a plain declaration; an object
+ * value is a nested rule keyed by a literal selector (`&:first-child { … }`), the way
+ * the typography utilities nest their `&:hover`.
+ */
+const emitUtilities = (utilities) =>
+  Object.entries(utilities)
+    .map(([name, decls]) => {
+      const body = Object.entries(decls)
+        .map(([prop, value]) =>
+          typeof value === 'object'
+            ? `  ${prop} { ${formatStateDecls(value)}; }`
+            : `  ${prop}: ${value};`,
+        )
+        .join('\n');
+      return `@utility ${name} {\n${body}\n}`;
+    })
+    .join('\n\n');
+
+/**
+ * The container system as `@utility` blocks — same reason as the typography
+ * utilities: `@layer components` classes are opaque to the variant resolver, and a
+ * layout class is exactly the kind a consumer wants behind a variant
+ * (`md:layout-column`).
+ */
+const emitLayoutUtilities = () => emitUtilities(layoutsUtilities);
+
 const emitBaseLayer = () =>
   [
     '@layer base {',
@@ -293,11 +325,25 @@ const emitCssV4 = () => {
     themeVars[`--animate-${name}`] = shorthand;
   }
 
+  // Named `duration-*` / `ease-*` utilities. Without these the design system's
+  // own `duration-moderate-02` / `ease-productive-entrance` classes compile to
+  // NOTHING (Tailwind v4 silently drops an unknown named step), and every
+  // component that declares one falls back to Tailwind's default 150ms `ease`.
+  // The namespaces are fixed by Tailwind: `--transition-duration-*` backs
+  // `duration-*`, `--ease-*` backs `ease-*`.
+  for (const [name, value] of Object.entries(duration)) {
+    themeVars[`--transition-duration-${name}`] = value;
+  }
+  for (const [name, value] of Object.entries(curve)) {
+    themeVars[`--ease-${name}`] = value;
+  }
+
   const semanticBase = {
     ...rootPrimitiveVars,
     ...(m.containers._ || {}),
     ...(m.spacings._ || {}),
     ...(m.zIndices._ || {}),
+    ...(m.layouts._ || {}),
     ...(m.texts._ || {}),
   };
 
@@ -307,6 +353,7 @@ const emitCssV4 = () => {
       ...(m.containers[bp] || {}),
       ...(m.spacings[bp] || {}),
       ...(m.zIndices[bp] || {}),
+      ...(m.layouts[bp] || {}),
       ...(m.texts[bp] || {}),
     };
     if (Object.keys(merged).length === 0) continue;
@@ -325,7 +372,7 @@ const emitCssV4 = () => {
     '@import "tailwindcss";',
     '',
     '/*',
-    ' * `@aziontech/webkit` components use arbitrary values (`bg-[var(--x)]`) that',
+    ' * `@aziontech/webkit` components use arbitrary values (`bg-(--x)`) that',
     ' * Tailwind v4 only picks up when the source files are inside the scan.',
     ' * Auto-detect scans the CWD only, so we point `@source` at the webkit',
     ' * package via a monorepo-relative path (this file is under',
@@ -354,6 +401,8 @@ const emitCssV4 = () => {
     '',
     emitTextUtilities(),
     '',
+    emitLayoutUtilities(),
+    '',
     emitSemanticColorUtilities(),
     '',
     emitBaseLayer(),
@@ -382,6 +431,7 @@ const importIdx = rawCss.indexOf(IMPORT_LINE);
 if (importIdx === -1) throw new Error('emitCssV4 output is missing the tailwind import line');
 const afterImport = importIdx + IMPORT_LINE.length;
 const css = `${rawCss.slice(0, afterImport)}\n\n${fontsCss}${rawCss.slice(afterImport)}`;
+assertNoZeroWithUnit(css, 'globals.css');
 await writeFile(resolve(dir, 'globals.css'), css, 'utf8');
 await writeFile(resolve(dir, 'globals.scss'), css, 'utf8');
 console.log(`✓ v4 → ${dir}`);

package/src/scripts/compile-primitives.js

@@ -3,7 +3,7 @@
  *
  * Imports every primitive module (colors, shape, typography, effects,
  * breakpoints, border-widths, ring-offset), resolves `tokenRef(...)` aliases,
- * and produces a `:root { ... }` block. Mirrors the `injectCssVars` helper
+ * and produces a `:root { ... }` block. Mirrors `injectThemeCss` (compile-theme.js)
  * but for primitives only — no semantic light/dark split.
  */
 
@@ -33,7 +33,7 @@ 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 { assertResolvedRefs, isTokenRef } from './refs.js'
 
 /**
  * Returns two trees:
@@ -123,17 +123,18 @@ const varNameFor = (path) => {
   return `--${segments.join('-')}`
 }
 
-export const flatten = (obj, refsTree, prefix = []) => {
+export const flatten = (obj, refsTree, prefix = [], unresolved = null) => {
   const result = {}
   Object.entries(obj).forEach(([key, value]) => {
     const nextPath = [...prefix, key]
     if (isTokenRef(value)) {
       const resolved = resolveRef(value.__ref, refsTree)
+      if (resolved == null) unresolved?.push(`${varNameFor(nextPath)} → ${value.__ref}`)
       result[varNameFor(nextPath)] = resolved ?? value.__ref
       return
     }
     if (value && typeof value === 'object' && !Array.isArray(value)) {
-      Object.assign(result, flatten(value, refsTree, nextPath))
+      Object.assign(result, flatten(value, refsTree, nextPath, unresolved))
       return
     }
     if (typeof value === 'string' || typeof value === 'number') {
@@ -145,7 +146,10 @@ export const flatten = (obj, refsTree, prefix = []) => {
 
 export const compilePrimitivesVars = () => {
   const { refsTree, varsTree } = buildTrees()
-  return flatten(varsTree, refsTree)
+  const unresolved = []
+  const vars = flatten(varsTree, refsTree, [], unresolved)
+  assertResolvedRefs('primitives', unresolved)
+  return vars
 }
 
 export const compilePrimitivesCss = () => {

package/src/scripts/compile-theme.js

@@ -24,7 +24,7 @@ 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 { assertResolvedRefs, isTokenRef } from './refs.js'
 
 const VARIANTS = ['light', 'dark']
 
@@ -58,23 +58,25 @@ const resolveRef = (ref, surfacesResolved) => {
   return null
 }
 
-const resolveGroup = (group, surfacesResolved) => {
+const resolveGroup = (group, surfacesResolved, variant, unresolved) => {
   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)
+    else unresolved.push(`[${variant}] --${key} → ${value.__ref}`)
   })
   return result
 }
 
-const compileVariant = (variant) => {
+const compileVariant = (variant, unresolved) => {
   // Surfaces resolved first — other groups depend on them.
   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)
+    else unresolved.push(`[${variant}] --${key} → ${value.__ref}`)
   })
 
   const vars = {}
@@ -96,12 +98,16 @@ const compileVariant = (variant) => {
     danger[variant],
     info[variant]
   ]
-  groups.forEach((g) => Object.assign(vars, resolveGroup(g, surfacesResolved)))
+  groups.forEach((g) => Object.assign(vars, resolveGroup(g, surfacesResolved, variant, unresolved)))
   return vars
 }
 
-export const compileThemeVars = () =>
-  Object.fromEntries(VARIANTS.map((v) => [v, compileVariant(v)]))
+export const compileThemeVars = () => {
+  const unresolved = []
+  const vars = Object.fromEntries(VARIANTS.map((v) => [v, compileVariant(v, unresolved)]))
+  assertResolvedRefs('semantic theme tokens', unresolved)
+  return vars
+}
 
 export const compileThemeCss = () => {
   const { light, dark } = compileThemeVars()

package/src/scripts/refs.d.ts

@@ -2,4 +2,5 @@ export function tokenRef(path: any): {
     __ref: any;
 };
 export function isTokenRef(value: any): boolean;
+export function assertResolvedRefs(context: any, unresolved: any): void;
 //# sourceMappingURL=refs.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"refs.d.ts","sourceRoot":"","sources":["refs.js"],"names":[],"mappings":"AAIO;;EAA4C;AAE5C,gDAA6F"}
+{"version":3,"file":"refs.d.ts","sourceRoot":"","sources":["refs.js"],"names":[],"mappings":"AAIO;;EAA4C;AAE5C,gDAA6F;AAO7F,wEAIN"}

package/src/scripts/refs.js

@@ -5,3 +5,14 @@
 export const tokenRef = (path) => ({ __ref: path })
 
 export const isTokenRef = (value) => typeof value === 'object' && value !== null && '__ref' in value
+
+/**
+ * Fail loudly on unresolved refs. A typo'd token must never silently vanish
+ * from the compiled CSS or ship as a raw `path.to.token` string — the compilers
+ * collect every miss and this throws once with the full list.
+ */
+export const assertResolvedRefs = (context, unresolved) => {
+  if (unresolved.length === 0) return
+  const lines = unresolved.map((entry) => `  ${entry}`).join('\n')
+  throw new Error(`[theme] ${unresolved.length} unresolved tokenRef(s) in ${context}:\n${lines}`)
+}

package/src/scripts/zero-unit.mjs

@@ -0,0 +1,64 @@
+/**
+ * Zero-with-unit gate for the compiled token stylesheet — the only check that sees token
+ * values (authored in JS, so no linter does), run on the final CSS before globals.css is
+ * written. A zero length is `0`; inside calc()/min()/max()/clamp() it must carry a unit, and
+ * that unit is `rem` (.claude/rules/styling.md). Mirror of the zero checks in packages/webkit
+ * token-checks.js, kept in sync — LENGTH_UNITS is the same string. Pure: node built-ins only.
+ */
+
+// Opens a math function; balances parens one level deep (a zero nested deeper falls back to
+// the bare-zero check).
+const MATH_FN = '(?:calc|min|max|clamp)\\((?:[^()]|\\([^()]*\\))*';
+
+// Complete CSS length-unit set — must be complete, since a missing unit silently passes.
+export const LENGTH_UNITS =
+  'px|rem|em|ex|rex|ch|rch|cap|rcap|ic|ric|lh|rlh|vw|vh|vi|vb|vmin|vmax|svw|svh|svi|svb|svmin|svmax|lvw|lvh|lvi|lvb|lvmin|lvmax|dvw|dvh|dvi|dvb|dvmin|dvmax|cqw|cqh|cqi|cqb|cqmin|cqmax|cm|mm|Q|in|pt|pc';
+
+// Mutually exclusive, so a value is reported once. Non-global so `.test()` is stateless —
+// findZeroMisuse adds `g` locally to enumerate matches.
+export const ZERO_WITH_UNIT = new RegExp(`(?<![\\w.])(?<!${MATH_FN})0(?:${LENGTH_UNITS})(?![\\w%])`, 'i');
+export const ZERO_UNIT_IN_MATH = new RegExp(
+  `(?<=${MATH_FN})(?<![\\w.])0(?!rem)(?:${LENGTH_UNITS})(?![\\w%])`,
+  'i',
+);
+
+/**
+ * Matches of `regex` in `cssText` as `{ line, n }`. Scans the whole string, not line-by-line,
+ * so a calc() wrapped across newlines is still seen as in-math.
+ */
+export const findZeroMisuse = (cssText, regex) => {
+  const scan = new RegExp(regex.source, `${regex.flags.replace('g', '')}g`);
+  const out = [];
+  for (let m; (m = scan.exec(cssText)); ) {
+    const lineStart = cssText.lastIndexOf('\n', m.index - 1) + 1;
+    const nlIdx = cssText.indexOf('\n', m.index);
+    const lineEnd = nlIdx === -1 ? cssText.length : nlIdx;
+    out.push({ line: cssText.slice(lineStart, lineEnd).trim(), n: cssText.slice(0, m.index).split('\n').length });
+  }
+  return out;
+};
+
+// The `--custom-property` a line declares, to name the token to fix; null off a `--token:` line.
+const tokenOf = (line) => line.match(/(--[\w-]+)\s*:/)?.[1] ?? null;
+
+/** Throw if `cssText` misuses a zero length. `source` names the artifact in the message. */
+export const assertNoZeroWithUnit = (cssText, source = 'globals.css') => {
+  const bare = findZeroMisuse(cssText, ZERO_WITH_UNIT);
+  const inMath = findZeroMisuse(cssText, ZERO_UNIT_IN_MATH);
+  if (bare.length === 0 && inMath.length === 0) return;
+
+  const detail = (rows) => rows.map(({ line, n }) => `  ${source}:${n}  ${line}`).join('\n');
+  const tokens = [...new Set([...bare, ...inMath].map(({ line }) => tokenOf(line)).filter(Boolean))];
+  const parts = [`build:tokens — ${bare.length + inMath.length} token value(s) misuse a zero.`];
+  if (bare.length > 0) {
+    parts.push(`A zero length takes no unit: write '0', not '0px' / '0rem' / '0em'.\n${detail(bare)}`);
+  }
+  if (inMath.length > 0) {
+    parts.push(
+      `Inside calc()/min()/max()/clamp() the zero needs a unit, and that unit is rem: write '0rem'.\n${detail(inMath)}`,
+    );
+  }
+  const grepHint = tokens.length > 0 ? ` — grep the offending token name (${tokens.join(', ')})` : '';
+  parts.push(`Fix the token at its source under src/tokens/**${grepHint}, not the generated ${source}.`);
+  throw new Error(parts.join('\n'));
+};

package/src/tokens/README.md

@@ -39,8 +39,6 @@ tokens/theme/**               ─┤                                    dist/v4/
                                │
 scripts/{compile-primitives,  ─┘
         compile-theme,
-        resolve,
-        css-vars,
         refs}.js  (building blocks used by build-tokens.mjs)
 ```
 
@@ -115,17 +113,11 @@ src/
 │   │   └── animations.js
 │   ├── theme.js                 # Tailwind theme.extend (colors + semantic mappings)
 │   └── index.js                 # public re-exports
-├── scripts/
-│   ├── refs.js                  # tokenRef helper + isTokenRef guard
-│   ├── resolve.js               # resolves `tokenRef` paths to literal values
-│   ├── css-vars.js              # builds light/dark CSS var maps from semantic refs
-│   ├── compile-primitives.js    # flattens primitive trees into CSS vars
-│   ├── compile-theme.js         # legacy theme compiler (used by the harness pages)
-│   └── build-tokens.mjs         # main entrypoint: emits dist/v3 and dist/v4 bundles
-└── tests/
-    ├── primitives.html          # visual harness for all primitives
-    ├── theme.html               # semantic tokens with light/dark toggle
-    └── tokens.html              # combined view
+└── scripts/
+    ├── refs.js                  # tokenRef helper + isTokenRef guard + assertResolvedRefs
+    ├── compile-primitives.js    # flattens primitive trees into CSS vars
+    ├── compile-theme.js         # semantic light/dark compiler (exported as ./theme-colors)
+    └── build-tokens.mjs         # main entrypoint: emits the dist/v4 bundle
 ```
 
 ---
@@ -187,7 +179,31 @@ export const spacingsData = {
 }
 ```
 
-`_` is the base value emitted in `:root`; the breakpoint keys (`sm`, `md`, `lg`, `xl`, `2xl`) become media-query overrides.
+`_` is the base value emitted in `:root`; the breakpoint keys (`sm`, `md`, `lg`, `xl`, `2xl`) become media-query overrides. A bare string is accepted as shorthand for `{ _: value }`.
+
+### Derived groups (`layouts.data.js`)
+
+`semantic/layouts` is a **derived** group: every value is a `var()` reference to `--spacing-*` /
+`--container-*`, never a literal length.
+
+```js
+// tokens/semantic/layouts.data.js
+export const layoutsData = {
+  'layout-boundary-inline': 'var(--spacing-lg)',
+  'layout-measure': 'var(--container-7xl)'
+  // …
+}
+```
+
+That indirection is the whole point, and it is why these carry no breakpoint map of their own: the
+spacing scale is already responsive (`--spacing-lg` is `1rem`, then `1.5rem` from `sm`), and a `var()`
+is substituted at **use** time on the element — so a layout token follows the breakpoint override for
+free. Giving it its own map would duplicate the spacing scale into layout and let the two drift.
+
+The group also ships `layoutsUtilities`, the container-system classes (`.layout-column`,
+`.layout-boundary`, …) emitted as Tailwind v4 `@utility` blocks so they support variants
+(`md:layout-column`). Utilities are shaped exactly like `illustrationsUtilities`: a string value is a
+declaration, an object value is a nested rule keyed by a literal selector (`'&:first-child'`).
 
 ---
 
@@ -216,18 +232,18 @@ Utilities like `text-default`, `bg-surface`, `border-default`, `text-primary`, `
 ### As JS objects (Node / build steps)
 
 ```js
-import { createCssVars, cssVarsString } from '@aziontech/theme'
+import { compileThemeVars, compileThemeCss } from '@aziontech/theme/theme-colors'
 
-createCssVars() // → { light: { '--text-default': '#1A1A1A', … }, dark: { … } }
-cssVarsString() // → ':root, [data-theme=light], .azion.azion-light { … } [data-theme=dark], … { … }'
+compileThemeVars() // → { light: { '--primary': '…', … }, dark: { … } }
+compileThemeCss() // → ':root, [data-theme=light], .azion.azion-light { … }\n\n[data-theme=dark], … { … }'
 ```
 
 ### Injecting at runtime (browser)
 
 ```js
-import { injectCssVars } from '@aziontech/theme'
+import { injectThemeCss } from '@aziontech/theme/theme-colors'
 
-injectCssVars() // appends a <style data-azion-tokens> element to <head>
+injectThemeCss() // appends a <style data-azion-theme> element to <head>
 ```
 
 Only useful if you can't precompile and import `globals.css` — production usage should prefer the static stylesheet.
@@ -306,18 +322,17 @@ Bundles with `fontSize: 'inherit'` are omitted from the Tailwind `fontSize` pres
 
 ## 🔗 Token references (`tokenRef`)
 
-`tokenRef(path)` returns a marker object `{ __ref: path }` that the compiler resolves at build time. Supported path prefixes (see `scripts/resolve.js`):
+`tokenRef(path)` returns a marker object `{ __ref: path }` that the compilers resolve at build time. Primitive-tree refs (`scripts/compile-primitives.js`) resolve against the full primitives tree (e.g. `shape.container.3xs`). Semantic theme refs (`scripts/compile-theme.js`) support these prefixes:
 
-| 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`) |
+| `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`)                                                       |
+| `theme.surfaces.X`        | the variant's pre-resolved surfaces group (`tokens/theme/surfaces.js`)                                 |
 
-Refs of unknown prefixes are left as the raw path string in the output — flag for "this needs resolver support".
+A ref that does not resolve — unknown prefix or dead path — **fails the build**: the compilers collect every miss and throw one aggregated `--var → ref` list (`assertResolvedRefs` in `scripts/refs.js`).
 
 ---
 

package/src/tokens/index.d.ts

@@ -2,5 +2,4 @@ export * from "./primitives/colors/colors.js";
 export * from "./semantic/colors.js";
 export * from "./theme.js";
 export { textsData } from "./semantic/texts.data.js";
-export { createCssVars, cssVarsString, injectCssVars } from "../scripts/css-vars.js";
 //# sourceMappingURL=index.d.ts.map

package/src/tokens/index.js

@@ -2,7 +2,6 @@
  * 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'

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

@@ -25,6 +25,8 @@ export const animate: {
     'fade-out': string;
     'slide-down': string;
     'highlight-fade': string;
+    'page-enter': string;
+    'content-enter': string;
     'popup-scale-in': string;
     'popup-scale-out': string;
     'slide-in-left': string;
@@ -33,8 +35,11 @@ export const animate: {
     'slide-out-right': string;
     'progress-indeterminate': string;
     'progress-indeterminate-short': string;
+    'flow-dash': string;
 };
 export const useWhen: {
+    'page-enter': string;
+    'content-enter': string;
     spin: string;
     ping: string;
     pulse: string;
@@ -53,6 +58,7 @@ export const useWhen: {
     'slide-out-right': string;
     'progress-indeterminate': string;
     'progress-indeterminate-short': string;
+    'flow-dash': 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;;;;;EAKC;AAED;;;;;;;;;EASC;AAED;;;;;;;;;;;;;;;;;;;EAmBC;AAED;;;;;;;;;;;;;;;;;;;EAsBC"}
+{"version":3,"file":"animate.d.ts","sourceRoot":"","sources":["animate.js"],"names":[],"mappings":"AAAA;;;;;EAKC;AAED;;;;;;;;;EASC;AAED;;;;;;;;;;;;;;;;;;;;;;EAwBC;AAED;;;;;;;;;;;;;;;;;;;;;;EA4BC"}

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

@@ -26,7 +26,9 @@ export const animate = {
   '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',
+  'highlight-fade': `highlight ${duration['slow-03']} ease-in forwards`,
+  'page-enter': `pageEnter ${duration['moderate-02']} ${curve['productive-entrance']}`,
+  'content-enter': `contentEnter ${duration['moderate-02']} ${curve['productive-entrance']} var(--content-enter-delay, 0s) backwards`,
   'popup-scale-in': `popupScaleIn ${duration['moderate-01']} ${curve['productive-entrance']}`,
   'popup-scale-out': `popupScaleOut ${duration['fast-02']} ${curve['productive-exit']}`,
   'slide-in-left': `slideInLeft ${duration['moderate-02']} ${curve['productive-entrance']}`,
@@ -34,10 +36,17 @@ export const animate = {
   'slide-in-right': `slideInRight ${duration['moderate-02']} ${curve['productive-entrance']}`,
   'slide-out-right': `slideOutRight ${duration['moderate-01']} ${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`
+  'progress-indeterminate-short': `progressIndeterminateShort ${duration['slow-04']} ${curve['expressive-entrance']} ${duration['slow-03']} infinite`,
+  // `linear` (not a curve token) for the same reason as spin/shimmer: an endlessly
+  // looping animation must not accelerate, or the seam between repeats is visible.
+  'flow-dash': `flowDash ${duration['slow-02']} linear infinite`
 }
 
 export const useWhen = {
+  'page-enter':
+    'A page arriving on a route change — on the CONTENT ZONE only, never the shell. The chrome is the same before and after, and sliding it announces a reload that did not happen. Key it on the route path so a component serving several paths still replays it. Nothing inside the page may animate on mount at the same time: the two run in lockstep and read as one element travelling on a diagonal.',
+  'content-enter':
+    'Content settling INSIDE a page that is already on screen — a loading window resolving, a filtered list swapping, a step changing. Never on first paint of a page whose own entrance is already running (use it after that entrance, or after a wire). Stagger a follower with --content-enter-delay.',
   spin: 'Indeterminate circular spinners (loading icons).',
   ping: 'One-off attention ring radiating from a small element (notification dot).',
   pulse: 'Skeleton/placeholder opacity pulse while content loads.',
@@ -58,7 +67,9 @@ export const useWhen = {
   'slide-in-right': 'Right-anchored panel entering (settings/detail drawer).',
   'slide-out-right': 'Right-anchored panel leaving (pair of slide-in-right).',
   'progress-indeterminate': 'Indeterminate linear progress bar (primary sweep).',
-  'progress-indeterminate-short': 'Indeterminate linear progress bar (secondary short sweep).'
+  'progress-indeterminate-short': 'Indeterminate linear progress bar (secondary short sweep).',
+  'flow-dash':
+    'Flowing connection along an SVG connector stroke in a node-based / network diagram. Set a stroke-dasharray whose cycle divides 24 (e.g. 4 4) so the loop is seamless.'
 }
 
 export default { animate, curve, duration, useWhen }

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

@@ -16,13 +16,21 @@ export namespace keyframes {
         '50%': string;
     };
     let highlight: {
-        '0%': string;
+        '0%, 40%': string;
         '100%': string;
     };
     let shimmer: {
         '0%': string;
         '100%': string;
     };
+    let pageEnter: {
+        '0%': string;
+        '100%': string;
+    };
+    let contentEnter: {
+        '0%': string;
+        '100%': string;
+    };
     let popupScaleIn: {
         '0%': string;
         '100%': string;
@@ -57,6 +65,10 @@ export namespace keyframes {
         '60%': string;
         '100%': string;
     };
+    let flowDash: {
+        '0%': string;
+        '100%': string;
+    };
 }
 /**
  * Utilities that need CSS properties beyond the `animation` shorthand

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

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

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

@@ -28,21 +28,31 @@ export const keyframes = {
     '0%, 100%': 'opacity: 1',
     '50%': 'opacity: 0'
   },
+  // Holds the highlight for the first 40% of the run, then fades it back to
+  // normal over the remaining 60% — a row-flash, not a permanent tint.
   highlight: {
-    '0%': 'background-color: var(--surface-hover); font-weight: 500',
-    '100%': 'background-color: var(--surface-hover); font-weight: 500'
+    '0%, 40%': 'background-color: var(--surface-hover); font-weight: 500',
+    '100%': 'background-color: transparent; font-weight: 400'
   },
   shimmer: {
     '0%': 'background-position: 200% 0',
     '100%': 'background-position: -200% 0'
   },
+  pageEnter: {
+    '0%': 'opacity: 0; translate: calc(var(--page-enter-distance, var(--layout-boundary-inline)) * -1) 0',
+    '100%': 'opacity: 1; translate: 0 0'
+  },
+  contentEnter: {
+    '0%': 'opacity: 0; translate: 0 var(--spacing-xs)',
+    '100%': 'opacity: 1; translate: 0 0'
+  },
   popupScaleIn: {
-    '0%': 'opacity: 0; transform: scale(0.95)',
+    '0%': 'opacity: 0; transform: scale(0.9)',
     '100%': 'opacity: 1; transform: scale(1)'
   },
   popupScaleOut: {
     '0%': 'opacity: 1; transform: scale(1)',
-    '100%': 'opacity: 0; transform: scale(0.95)'
+    '100%': 'opacity: 0; transform: scale(0.9)'
   },
   slideInLeft: {
     '0%': 'transform: translateX(-100%)',
@@ -69,6 +79,15 @@ export const keyframes = {
     '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%'
+  },
+  // Marching dashes along an SVG stroke — the "flowing connection" of a node-based
+  // diagram. The travel distance is 24, so the loop is seamless for any
+  // `stroke-dasharray` whose cycle DIVIDES 24 (`4 4` = 8, `2 4` = 6, `8 4` = 12): the
+  // pattern lands exactly where it started. A cycle that does not divide 24 (`5 5` = 10)
+  // visibly jumps on repeat.
+  flowDash: {
+    '0%': 'stroke-dashoffset: 24',
+    '100%': 'stroke-dashoffset: 0'
   }
 }