@aziontech/theme 5.2.1 → 5.2.2

package/dist/v4/globals.css

@@ -1066,7 +1066,7 @@
   --border-strong: #FFFFFF;
   --border-selected: #F3652B;
   --text-default: #FAFAFA;
-  --text-muted: #808080;
+  --text-muted: #999999;
   --text-disabled: #4D4D4D;
   --text-link: #3392FF;
   --text-link-hover: #66ADFF;
@@ -1101,7 +1101,7 @@
   --illustration-line-strong: #4D4D4D;
   --illustration-highlight: #FFFFFF;
   --illustration-ink: #FAFAFA;
-  --illustration-ink-muted: #808080;
+  --illustration-ink-muted: #999999;
   --illustration-primary: #F3652B;
   --illustration-accent: #0072F5;
   --illustration-code-punctuation: #999999;

package/dist/v4/globals.scss

@@ -1066,7 +1066,7 @@
   --border-strong: #FFFFFF;
   --border-selected: #F3652B;
   --text-default: #FAFAFA;
-  --text-muted: #808080;
+  --text-muted: #999999;
   --text-disabled: #4D4D4D;
   --text-link: #3392FF;
   --text-link-hover: #66ADFF;
@@ -1101,7 +1101,7 @@
   --illustration-line-strong: #4D4D4D;
   --illustration-highlight: #FFFFFF;
   --illustration-ink: #FAFAFA;
-  --illustration-ink-muted: #808080;
+  --illustration-ink-muted: #999999;
   --illustration-primary: #F3652B;
   --illustration-accent: #0072F5;
   --illustration-code-punctuation: #999999;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@aziontech/theme",
   "type": "module",
-  "version": "5.2.1",
+  "version": "5.2.2",
   "author": "aziontech",
   "license": "MIT",
   "repository": {

package/src/scripts/build-tokens.mjs

@@ -1,30 +1,4 @@
 #!/usr/bin/env node
-/**
- * Build design tokens into a Tailwind v4 stylesheet.
- *
- * Usage:
- *   node build-tokens.mjs
- *
- * Output:
- *   - dist/v4/globals.css  @import "tailwindcss" + @theme + :root @media + @keyframes
- *   - dist/v4/globals.scss identical bytes, .scss extension
- *
- * Inputs:
- *   - `tokens/primitives/**`    declarative primitives (colors, spacings,
- *                               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
- *                               popup-scale-*.
- *
- * No external deps — node:fs/promises, node:path, node:url only.
- */
 
 import { mkdir, readFile, writeFile } from 'node:fs/promises';
 import { dirname, resolve } from 'node:path';
@@ -35,24 +9,19 @@ import { animateExtras, keyframes } from '../tokens/primitives/animations/keyfra
 import { breakpoints } from '../tokens/primitives/breakpoints.js';
 import { compilePrimitivesVars } from './compile-primitives.js';
 import { compileThemeCss, compileThemeVars } from './compile-theme.js';
-import { container } from '../tokens/primitives/shape/container.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 { assertMeasureCommentsMatch } from './measure-comment.mjs';
 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 ──────────────────────────────────────────────────────────
-// compilePrimitivesVars throws on any unresolved tokenRef (see refs.js).
 const flattenPrimitives = () => compilePrimitivesVars();
 
-// ─── 2. Semantic flattening ─────────────────────────────────────────────────
 const splitResponsive = (value) => {
   if (value === null || typeof value !== 'object') return { _: String(value) };
   const out = {};
@@ -103,18 +72,11 @@ const buildFlatModel = () => ({
   texts: flattenBundle(textsData),
 });
 
-// ─── 3. Formatting helpers ─────────────────────────────────────────────────
 const formatVars = (vars, indent) =>
   Object.entries(vars)
     .map(([k, v]) => `${indent}${k}: ${v};`)
     .join('\n');
 
-/**
- * Container / spacing / animation-extra classes — emitted inside `@layer components`.
- * These are used bare (never behind Tailwind variants), so component-layer is fine.
- * Typography classes are NOT here; they ship as `@utility` (see emitTextUtilities)
- * so that variant modifiers like `data-[size=medium]:text-button-md` compile.
- */
 const emitComponentClasses = (indent = '  ') => {
   const lines = [];
 
@@ -142,12 +104,6 @@ const emitComponentClasses = (indent = '  ') => {
   return lines.join('\n');
 };
 
-/**
- * Emit typography classes as Tailwind v4 `@utility` blocks so they participate
- * in variant compilation (`data-[size=medium]:text-button-md`, `hover:text-link`,
- * etc.). `@layer components` classes are opaque to v4's variant resolver and
- * their modifiers silently drop, leaving elements at the inherited 16px.
- */
 const emitTextUtilities = () => {
   const blocks = [];
   for (const [key, bundle] of Object.entries(textsData)) {
@@ -173,26 +129,6 @@ const emitTextUtilities = () => {
   return blocks.join('\n\n');
 };
 
-/**
- * Emit semantic color utilities (`text-*`, `bg-*`, `border-*`, `ring-*`).
- *
- * Tailwind v4's auto-generated color utilities pull from `@theme { --color-* }`,
- * but our semantic tokens live under domain-specific prefixes (`--text-default`,
- * `--bg-canvas`, `--border-default`, `--primary`) so v3's preset generated the
- * classes by axis instead. Without them, `text-primary`, `bg-surface`, and
- * `border-default` (heavily used across the webkit components — unchanged
- * from dev) compile to nothing under v4.
- *
- * Rules:
- *   - Prefix-keyed tokens (`bg-*`, `text-*`, `border-*`, `ring-*`) become one
- *     utility on the matching axis: `@utility bg-canvas { background-color: var(--bg-canvas); }`.
- *   - Bare semantic tokens (`primary`, `accent`, `danger`, `warning`, `success`,
- *     `info`, `secondary`, and their `-mask`/`-selected`/`-contrast`/`-border`
- *     suffixes) become three utilities so a consumer can use `bg-primary`,
- *     `text-primary`, `border-primary` interchangeably.
- *   - `code-sintax-*` tokens are consumer-composed via arbitrary values in code
- *     highlighters and don't need a utility (skipped).
- */
 const AXIS_BY_PREFIX = {
   'bg-': { utility: (k) => k, prop: 'background-color' },
   'text-': { utility: (k) => k, prop: 'color' },
@@ -207,9 +143,6 @@ const emitSemanticColorUtilities = () => {
   const { light } = compileThemeVars();
   const keys = Object.keys(light).map((k) => k.replace(/^--/, ''));
   const blocks = [];
-  // Skip utilities already defined as typography (textsData) — `text-link`
-  // there ships the hover/focus states and would be silently overridden by
-  // a bare color-only utility emitted afterwards.
   const emitted = new Set(Object.keys(textsData));
 
   for (const key of keys) {
@@ -225,9 +158,8 @@ const emitSemanticColorUtilities = () => {
       blocks.push(`@utility ${utility} { ${axis.prop}: var(--${key}); }`);
       continue;
     }
-    // Bare token — expose on all three color axes.
     for (const [prefix, axis] of Object.entries(AXIS_BY_PREFIX)) {
-      if (prefix === 'ring-') continue; // ring is opt-in, not for every token
+      if (prefix === 'ring-') continue;
       const utility = `${prefix}${key}`;
       if (emitted.has(utility)) continue;
       emitted.add(utility);
@@ -237,17 +169,6 @@ const emitSemanticColorUtilities = () => {
   return blocks.join('\n');
 };
 
-/**
- * Restore browser affordances that Tailwind v4's preflight removed.
- * v3 shipped `button { cursor: pointer }` by default; v4 does not, so every
- * 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]) => {
@@ -262,12 +183,6 @@ const emitUtilities = (utilities) =>
     })
     .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 = () =>
@@ -286,7 +201,6 @@ const emitBaseLayer = () =>
     '}',
   ].join('\n');
 
-/** Emit `@keyframes` blocks at the top level of the stylesheet. */
 const emitKeyframes = () => {
   const blocks = [];
   for (const [name, steps] of Object.entries(keyframes)) {
@@ -298,24 +212,6 @@ const emitKeyframes = () => {
   return blocks.join('\n\n');
 };
 
-// ─── 4. v4 emission (@import "tailwindcss" + @theme) ───────────────────────
-/**
- * v4 puts color primitives, breakpoints, and animation shorthands under
- * `@theme` so Tailwind auto-generates `bg-gray-50`, `text-violet-500`,
- * `sm:` screens, and `animate-*` utilities. Semantic tokens stay in plain
- * `:root` (with `@media` overrides) so we keep full control of the
- * component classes.
- *
- * Notes:
- *   - `@theme { --color-* }`      → color utilities.
- *   - `@theme { --breakpoint-* }` → screens (`sm:`, `md:`, …).
- *   - `@theme { --animate-* }`    → `animate-*` utilities (the shorthand
- *                                    references a `@keyframes` emitted
- *                                    later in the file).
- *   - Semantic shape/typography tokens are NOT in @theme — we own their
- *     class definitions in @layer components and they swap responsively
- *     via `:root @media` overrides.
- */
 const V4_SELECTOR = ':root, [data-theme=light], .azion.azion-light';
 
 const emitCssV4 = () => {
@@ -333,12 +229,6 @@ 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;
   }
@@ -418,7 +308,6 @@ const emitCssV4 = () => {
   ].join('\n');
 };
 
-// ─── 5. Write to disk ──────────────────────────────────────────────────────
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const distRoot = resolve(__dirname, '../../dist');
 
@@ -429,21 +318,12 @@ const fontsCss = await readFile(
 
 const dir = resolve(distRoot, 'v4');
 await mkdir(dir, { recursive: true });
-// `@import` must precede every other at-rule (CSS spec); `@font-face` before
-// `@import "tailwindcss"` would silently invalidate the import and skip
-// Tailwind's layer setup / utility generation. Splice fonts in AFTER the
-// import line by looking for the marker in the emitted CSS.
 const rawCss = emitCssV4();
 const IMPORT_LINE = '@import "tailwindcss";';
 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)}`;
-assertMeasureCommentsMatch(
-  await readFile(resolve(__dirname, '../tokens/semantic/layouts.data.js'), 'utf8'),
-  container,
-  'tokens/semantic/layouts.data.js',
-);
 assertNoZeroWithUnit(css, 'globals.css');
 await writeFile(resolve(dir, 'globals.css'), css, 'utf8');
 await writeFile(resolve(dir, 'globals.scss'), css, 'utf8');

package/src/scripts/compile-primitives.js

@@ -1,12 +1,3 @@
-/**
- * Compile all primitives into a single CSS variables stylesheet.
- *
- * Imports every primitive module (colors, shape, typography, effects,
- * breakpoints, border-widths, ring-offset), resolves `tokenRef(...)` aliases,
- * and produces a `:root { ... }` block. Mirrors `injectThemeCss` (compile-theme.js)
- * but for primitives only — no semantic light/dark split.
- */
-
 import { animate } from '../tokens/primitives/animations/animate.js'
 import { ease } from '../tokens/primitives/animations/ease.js'
 import { borderWidths } from '../tokens/primitives/border-widths.js'
@@ -35,13 +26,6 @@ import { lineHeight } from '../tokens/primitives/typography/line-height.js'
 import { tracking } from '../tokens/primitives/typography/tracking.js'
 import { assertResolvedRefs, isTokenRef } from './refs.js'
 
-/**
- * Returns two trees:
- *   - `refsTree`: deep structure preserved so `tokenRef('shape.container.X')`
- *     keeps resolving via path lookup.
- *   - `varsTree`: same data with the `shape` / `typography` / `effects`
- *     wrappers removed, so emitted CSS vars are flat (no group prefix).
- */
 export const buildTrees = () => {
   const { brand, ...restColors } = colorPrimitives
   const color = {
@@ -116,8 +100,6 @@ const resolveRef = (refPath, refsTree) => {
   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('-')}`

package/src/scripts/compile-theme.js

@@ -1,12 +1,3 @@
-/**
- * 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, code-sintax, feedback/*)
- * against the
- * primitives + brand + (pre-resolved) surfaces. Emits two blocks (light + dark).
- */
-
 import {
   brandPrimitives,
   primitives as colorPrimitives
@@ -89,7 +80,6 @@ const resolveGroup = (group, surfacesResolved, variant, unresolved, semanticReso
 }
 
 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

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;AAO7F,wEAIN"}
+{"version":3,"file":"refs.d.ts","sourceRoot":"","sources":["refs.js"],"names":[],"mappings":"AAAO;;EAA4C;AAE5C,gDAA6F;AAE7F,wEAIN"}

package/src/scripts/refs.js

@@ -1,16 +1,7 @@
-/**
- * Token reference helpers.
- */
-
 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')

package/src/scripts/zero-unit.mjs

@@ -1,31 +1,14 @@
-/**
- * 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 = [];
@@ -38,10 +21,8 @@ export const findZeroMisuse = (cssText, regex) => {
   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);

package/src/tokens/README.md

@@ -118,7 +118,6 @@ src/
     ├── compile-primitives.js    # flattens primitive trees into CSS vars
     ├── compile-theme.js         # semantic light/dark compiler (exported as ./theme-colors)
     ├── zero-unit.mjs            # build gate: a zero length carries no unit
-    ├── measure-comment.mjs      # build gate: a `// Npx` comment matches its rung
     └── build-tokens.mjs         # main entrypoint: emits the dist/v4 bundle
 ```
 
@@ -207,12 +206,6 @@ The group also ships `layoutsUtilities`, the container-system classes (`.layout-
 (`md:layout-column`). Each entry is a rule body: a string value is a declaration, an object value is
 a nested rule keyed by a literal selector (`'&:first-child'`).
 
-A measure carries a `// 1620px` annotation for the reader, and **the token value is the source of
-truth for it** — the comment is a convenience, never the decision. `measure-comment.mjs` resolves
-every annotated `var(--container-*)` back to its rung and **fails the build** when the two disagree,
-because nothing else can see this: the annotation is a JS comment, so it never reaches the compiled
-CSS, and no linter resolves a `var()` to the value it names.
-
 ---
 
 ## 🔧 Building & consuming

package/src/tokens/index.js

@@ -1,7 +1,3 @@
-/**
- * Tokens public exports.
- */
-
 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.map

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

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

@@ -37,8 +37,6 @@ export const animate = {
   '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`,
-  // `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`,
   'texture-wave-a': 'textureWaveA 13s linear infinite',
   'texture-wave-b': 'textureWaveB 19s linear infinite',

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

@@ -81,11 +81,6 @@ export namespace keyframes {
         '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;

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

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

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

@@ -1,16 +1,3 @@
-/**
- * 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',
@@ -28,8 +15,6 @@ 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%, 40%': 'background-color: var(--surface-hover); font-weight: 500',
     '100%': 'background-color: transparent; font-weight: 400'
@@ -80,11 +65,6 @@ export const keyframes = {
     '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'
@@ -101,11 +81,6 @@ export const keyframes = {
   }
 }
 
-/**
- * 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)' }

package/src/tokens/primitives/colors/colors.js

@@ -21,11 +21,6 @@ export const primitives = {
     900: '#001833',
     950: '#000C1A'
   },
-  // 250 / 750 / 775 fill the two widest gaps in the ramp so an OPAQUE neutral rule has a step
-  // to live on. The scale jumped 200 → 300 (229 → 178) and 700 → 800 (77 → 26), and the steps
-  // bracketing those gaps are already spoken for by background roles — which is why an opaque
-  // border landed exactly on `--bg-selected` / `--bg-disabled` and disappeared. 700 / 800 / 900
-  // are the dark background anchors and keep their values untouched.
   gray: {
     50: '#FAFAFA',
     100: '#F5F5F5',

package/src/tokens/primitives/shape/container.d.ts.map

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

package/src/tokens/primitives/shape/container.js

@@ -1,34 +1,17 @@
-/*
- * Container widths — a geometric rhythm, not a hand-picked list.
- *
- * The scale is anchored at both ends: `3xs` stays 256px (the narrowest useful
- * field/rail width) and `7xl` is 1620px (the widest page measure). The eleven
- * slots between them are `256 × r^n` with r = (1620 / 256)^(1/12) ≈ 1.1662 —
- * so every neighbouring pair sits at the same ~+16.6% apart and the whole set
- * reads as one progression instead of two grids spliced together (the previous
- * scale stepped +32, then +64, then +96, then +128).
- *
- * Values are rounded to the 4px grid; `7xl` keeps its exact anchor and `4xl`
- * is nudged 4px to land on 1024 (2.6px off the ideal, and a landmark worth
- * keeping). Ratio between neighbours therefore ranges 1.157–1.172.
- *
- * Rounding is 4px, not 8px, because 1620 is not a multiple of 8 — the anchor
- * defines the grid, so a stricter grid could not reach it.
- */
 export const container = {
-  '3xs': '256px', //  ×1     — anchor
-  '2xs': '300px', //  +44
-  xs: '348px', //     +48
-  sm: '408px', //     +60
-  md: '472px', //     +64
-  lg: '552px', //     +80
-  xl: '644px', //     +92
-  '2xl': '752px', //  +108
-  '3xl': '876px', //  +124
-  '4xl': '1024px', // +148
-  '5xl': '1192px', // +168
-  '6xl': '1388px', // +196
-  '7xl': '1620px' //  +232 — anchor
+  '3xs': '256px',
+  '2xs': '300px',
+  xs: '348px',
+  sm: '408px',
+  md: '472px',
+  lg: '552px',
+  xl: '644px',
+  '2xl': '752px',
+  '3xl': '876px',
+  '4xl': '1024px',
+  '5xl': '1192px',
+  '6xl': '1388px',
+  '7xl': '1620px'
 }
 
 export default { container }

package/src/tokens/primitives/typography/tracking.js

@@ -1,9 +1,3 @@
-/**
- * Letter-spacing scale, in `rem` so the emitted CSS carries a single measure
- * unit across the whole token set (font sizes, spacings and tracking are all
- * root-relative). Values are the em-scale numbers kept as-is, so `widest`
- * resolves to a fixed 1.6px instead of 10% of the element's font size.
- */
 export const tracking = {
   tighter: '-0.16rem',
   tight: '-0.025rem',

package/src/tokens/semantic/colors.js

@@ -1,24 +1,3 @@
-/**
- * SEMANTIC COLOR TOKENS
- *
- * Single source of truth for semantic color tokens.
- *
- * - `semanticColorsData`: token refs grouped by category (`text`, `background`,
- *   `border`) and mode (`light`, `dark`). The raw ref source `semanticColors`
- *   derives from; only re-exported via `tokens/index.js` today. Note: its
- *   `backdrop` / `primary-mask` refs point at `alpha` shades that do not exist
- *   (`alpha.neutral`, `alpha.brand`) — fix them before wiring this data to a
- *   compiler, or the unresolved-ref guard will reject it.
- * - `semanticColors`: derived map of `var(--…)` strings, grouped by category,
- *   consumed by `tokens/theme.js` to extend Tailwind's `textColor`,
- *   `backgroundColor`, and `borderColor`. Generates utilities like
- *   `text-default`, `bg-surface`, `border-danger` natively — no plugin needed.
- *
- * Adding a new semantic color: add a key under both `light` and `dark` in the
- * relevant category here. The CSS variable and the Tailwind utility are both
- * derived automatically.
- */
-
 import { tokenRef } from '../../scripts/refs.js'
 
 export const semanticColorsData = {

package/src/tokens/semantic/containers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"containers.d.ts","sourceRoot":"","sources":["containers.js"],"names":[],"mappings":"AAeO,8BAFM,OAAO,oBAAoB,EAAE,MAAM,CAsD/C"}
+{"version":3,"file":"containers.d.ts","sourceRoot":"","sources":["containers.js"],"names":[],"mappings":"AASO,8BADO,OAAO,oBAAoB,EAAE,MAAM,CAqDhD"}

package/src/tokens/semantic/containers.data.d.ts

@@ -1,13 +1,3 @@
-/**
- * Declarative container tokens (mobile-first).
- *
- * Each entry maps a token key to a breakpoint map. `_` is the default;
- * any other key must exist in tokens/primitives/breakpoints.js.
- *
- * Values are ported from the legacy `containers.js` plugin. The `xl` bucket
- * used to be wrapped in `@media (max-width: xl)` — orphan / never matched
- * cleanly — and was corrected to `min-width` here.
- */
 export const containersData: {
     px: {
         _: string;

package/src/tokens/semantic/containers.data.d.ts.map

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