@aziontech/theme 2.6.0 → 4.1.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@aziontech/theme",
   "type": "module",
-  "version": "2.6.0",
+  "version": "4.1.0",
   "author": "aziontech",
   "license": "MIT",
   "repository": {
@@ -12,14 +12,11 @@
   "scripts": {
     "pack:dry": "npm pack --dry-run",
     "format": "prettier --write scripts/ src/",
+    "build": "pnpm build:tokens",
     "build:tokens": "node src/scripts/build-tokens.mjs",
-    "build:tokens:v3": "node src/scripts/build-tokens.mjs --target=v3",
-    "build:tokens:v4": "node src/scripts/build-tokens.mjs --target=v4",
-    "build:css:v3": "pnpm build:tokens:v3 && tailwindcss -c dist/v3/tailwind.config.js -i dist/v3/globals.css -o dist/v3/output.css",
-    "test:tokens:v3": "pnpm build:css:v3 && open src/tests/tokens.html",
     "clean:dts": "find src -name '*.d.ts' -delete && find src -name '*.d.ts.map' -delete",
     "build:dts": "pnpm clean:dts && vue-tsc --declaration --emitDeclarationOnly",
-    "prepack": "pnpm build:dts"
+    "prepack": "pnpm build:tokens && pnpm build:dts"
   },
   "publishConfig": {
     "access": "public"
@@ -35,7 +32,6 @@
     "token-generator"
   ],
   "dependencies": {
-    "tailwindcss": "^3.4.17",
     "vue-tsc": "^3.2.5"
   },
   "devDependencies": {
@@ -52,26 +48,13 @@
   "files": [
     "src/",
     "dist/",
-    "LICENSE",
-    "default.js",
-    "tokens.js",
-    "widget.js"
+    "LICENSE"
   ],
   "exports": {
-    ".": "./default.js",
+    ".": "./dist/v4/globals.css",
     "./animations": "./src/tokens/primitives/animations/animate.js",
     "./colors": "./src/tokens/primitives/colors/colors.js",
     "./texts": "./src/tokens/semantic/texts.data.js",
-    "./tailwind-preset": "./dist/v3/tailwind-preset.js",
-    "./tailwind-preset/v3": "./dist/v3/tailwind-preset.js",
-    "./tailwind/semantic-spacings-plugin": "./src/tokens/semantic/spacings.js",
-    "./tailwind/semantic-texts-plugin": "./src/tokens/semantic/texts.js",
-    "./tailwind/semantic-animations-plugin": "./src/tokens/semantic/animations.js",
-    "./globals.css": "./dist/v3/globals.css",
-    "./globals.scss": "./dist/v3/globals.scss",
-    "./v3/globals.css": "./dist/v3/globals.css",
-    "./v3/globals.scss": "./dist/v3/globals.scss",
-    "./v4/globals.css": "./dist/v4/globals.css",
-    "./v4/globals.scss": "./dist/v4/globals.scss"
+    "./theme-colors": "./src/scripts/compile-theme.js"
   }
 }

package/src/scripts/build-tokens.mjs

@@ -1,44 +1,41 @@
 #!/usr/bin/env node
 /**
- * Build design tokens into self-contained stylesheets and Tailwind configs.
+ * Build design tokens into a Tailwind v4 stylesheet.
  *
  * Usage:
- *   node build-tokens.mjs                 # emit both v3 and v4
- *   node build-tokens.mjs --target=v3     # emit dist/v3/ only
- *   node build-tokens.mjs --target=v4     # emit dist/v4/ only
+ *   node build-tokens.mjs
  *
- * v3 output (legacy preset model):
- *   - dist/v3/globals.css         @tailwind directives + @layer + responsive vars
- *   - dist/v3/globals.scss        identical bytes, .scss extension
- *   - dist/v3/tailwind.config.js  full CJS config (content + theme.extend)
- *   - dist/v3/tailwind-preset.js  ESM preset (theme.extend only)
+ * Output:
+ *   - dist/v4/globals.css  @import "tailwindcss" + @theme + :root @media + @keyframes
+ *   - dist/v4/globals.scss identical bytes, .scss extension
  *
- * v4 output (CSS-first):
- *   - dist/v4/globals.css         @import "tailwindcss" + @theme + :root @media
- *   - dist/v4/globals.scss        identical bytes
- *
- * Shared schema: primitives come from `tokens/primitives/**` (already
- * declarative). Semantic responsive tokens come from
- * `tokens/semantic/{containers,spacings,texts}.data.js`.
+ * Inputs:
+ *   - `tokens/primitives/**`    declarative primitives (colors, spacings,
+ *                               typography, breakpoints, animations, …)
+ *   - `tokens/semantic/{containers,spacings,texts}.data.js`
+ *                               responsive-shaped semantic tokens
+ *   - `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, writeFile } from 'node:fs/promises';
+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 { animateExtras, keyframes } from '../tokens/primitives/animations/keyframes.js';
 import { breakpoints } from '../tokens/primitives/breakpoints.js';
 import { buildTrees, flatten } from './compile-primitives.js';
-import { compileThemeCss } from './compile-theme.js';
+import { compileThemeCss, compileThemeVars } from './compile-theme.js';
 import { containersData } from '../tokens/semantic/containers.data.js';
 import { spacingsData } from '../tokens/semantic/spacings.data.js';
 import { textsData } from '../tokens/semantic/texts.data.js';
-import { semanticColors } from '../tokens/semantic/colors.js';
-import { createCssVars } from './css-vars.js';
 
 const BREAKPOINT_ORDER = ['sm', 'md', 'lg', 'xl', '2xl'];
-const V3_SELECTOR = ':root, [data-theme=light], .azion.azion-light';
 
 const kebab = (s) => s.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
 
@@ -90,31 +87,25 @@ const formatStateDecls = (rules) =>
     .map(([prop, val]) => `${kebab(prop)}: ${val}`)
     .join('; ');
 
-const SEMANTIC_PREFIXES = ['--text-', '--background-', '--border-'];
-const isSemanticVar = (key) => SEMANTIC_PREFIXES.some((p) => key.startsWith(p));
-const pickSemantic = (vars) =>
-  Object.fromEntries(Object.entries(vars).filter(([k]) => isSemanticVar(k)));
-
-const buildSemanticColorVars = () => {
-  const { light, dark } = createCssVars();
-  return { light: pickSemantic(light), dark: pickSemantic(dark) };
-};
-
 const buildFlatModel = () => ({
   primitives: flattenPrimitives(),
   containers: flattenSingleValue(containersData, (k) => `--container-${k}`),
   spacings: flattenSingleValue(spacingsData, (k) => `--${k}`),
   texts: flattenBundle(textsData),
-  semanticColors: buildSemanticColorVars(),
 });
 
-// ─── 3. Shared formatting helpers ──────────────────────────────────────────
+// ─── 3. Formatting helpers ─────────────────────────────────────────────────
 const formatVars = (vars, indent) =>
   Object.entries(vars)
     .map(([k, v]) => `${indent}${k}: ${v};`)
     .join('\n');
 
-/** Component classes (.text-*, .gap-*, .px-container) — identical in v3/v4. */
+/**
+ * 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 = [];
 
@@ -131,197 +122,164 @@ const emitComponentClasses = (indent = '  ') => {
   }
 
   lines.push('');
-  lines.push(`${indent}/* ── Texts ── */`);
-  for (const [key, bundle] of Object.entries(textsData)) {
-    const baseProps = Object.keys(bundle).filter((prop) => prop !== 'states');
-    const decls = baseProps
-      .map((prop) => `${kebab(prop)}: var(--${key}-${kebab(prop)});`)
+  lines.push(`${indent}/* ── Animation extras (properties beyond the animation shorthand) ── */`);
+  for (const [selector, decls] of Object.entries(animateExtras)) {
+    const body = Object.entries(decls)
+      .map(([prop, val]) => `${prop}: ${val};`)
       .join(' ');
-    lines.push(`${indent}.${key} { ${decls} }`);
+    lines.push(`${indent}.${selector} { ${body} }`);
+  }
+
+  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)) {
+    const baseProps = Object.keys(bundle).filter((prop) => prop !== 'states');
+    const declLines = baseProps.map(
+      (prop) => `  ${kebab(prop)}: var(--${key}-${kebab(prop)});`,
+    );
+    const nested = [];
     if (bundle.states) {
       for (const [pseudo, rules] of Object.entries(bundle.states)) {
         const pseudoSuffix = pseudoClassName(pseudo);
-        lines.push(`${indent}.${key}:${pseudoSuffix} { ${formatStateDecls(rules)}; }`);
+        nested.push(`  &:${pseudoSuffix} { ${formatStateDecls(rules)}; }`);
       }
     }
+    blocks.push(`@utility ${key} {\n${[...declLines, ...nested].join('\n')}\n}`);
 
     if (bundle.transition) {
-      lines.push(`${indent}@media (prefers-reduced-motion: reduce) {`);
-      lines.push(`${indent}  .${key} { transition: none; }`);
-      lines.push(`${indent}}`);
+      blocks.push(
+        `@media (prefers-reduced-motion: reduce) {\n  .${key} { transition: none; }\n}`,
+      );
     }
   }
-
-  return lines.join('\n');
+  return blocks.join('\n\n');
 };
 
-// ─── 4. v3 emission (@tailwind directives + @layer) ────────────────────────
-const emitMediaBlockV3 = (bp, vars) =>
-  [
-    `  @media (min-width: ${breakpoints[bp]}) {`,
-    `    ${V3_SELECTOR} {`,
-    formatVars(vars, '      '),
-    `    }`,
-    `  }`,
-  ].join('\n');
-
-const V3_DARK_SELECTOR = '[data-theme=dark], .dark, .azion.azion-dark';
-
-const emitCssV3 = () => {
-  const m = buildFlatModel();
-
-  const sections = [
-    { title: 'Primitives', vars: m.primitives },
-    { title: 'Containers', vars: m.containers._ || {} },
-    { title: 'Spacings', vars: m.spacings._ || {} },
-    { title: 'Texts', vars: m.texts._ || {} },
-    { title: 'Semantic colors', vars: m.semanticColors.light },
-  ];
-
-  const baseBody = sections
-    .filter((s) => Object.keys(s.vars).length > 0)
-    .map((s) => `    /* ── ${s.title} ── */\n${formatVars(s.vars, '    ')}`)
-    .join('\n\n');
-
-  const mediaBlocks = [];
-  for (const bp of BREAKPOINT_ORDER) {
-    const merged = {
-      ...(m.containers[bp] || {}),
-      ...(m.spacings[bp] || {}),
-      ...(m.texts[bp] || {}),
-    };
-    if (Object.keys(merged).length > 0) mediaBlocks.push(emitMediaBlockV3(bp, merged));
-  }
-
-  return [
-    '/* generated by build-tokens.mjs — target: v3 — do not edit */',
-    '',
-    '@tailwind components;',
-    '@tailwind utilities;',
-    '',
-    `${V3_SELECTOR} {`,
-    baseBody,
-    '}',
-    '',
-    mediaBlocks.join('\n\n'),
-    '',
-    `${V3_DARK_SELECTOR} {`,
-    `  /* ── Semantic colors (dark) ── */`,
-    formatVars(m.semanticColors.dark, '  '),
-    '}',
-    '',
-    '/* ── Theme semantics (primary, secondary, surfaces, feedback, …) ── */',
-    compileThemeCss(),
-    '',
-    '@layer components {',
-    emitComponentClasses(),
-    '}',
-    '',
-  ].join('\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' },
+  'border-': { utility: (k) => k, prop: 'border-color' },
+  'ring-': { utility: (k) => k, prop: '--tw-ring-color' },
 };
 
-const treeToVars = (tree, prefix) => {
-  const out = {};
-  for (const [key, val] of Object.entries(tree)) {
-    if (val && typeof val === 'object' && !Array.isArray(val)) {
-      out[key] = treeToVars(val, `${prefix}-${key}`);
-    } else {
-      out[key] = `var(${prefix}-${key})`;
+const isCodeSintax = (key) => key.startsWith('code-sintax-');
+
+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) {
+    if (isCodeSintax(key)) continue;
+    const prefixEntry = Object.entries(AXIS_BY_PREFIX).find(([prefix]) =>
+      key.startsWith(prefix),
+    );
+    if (prefixEntry) {
+      const [, axis] = prefixEntry;
+      const utility = axis.utility(key);
+      if (emitted.has(utility)) continue;
+      emitted.add(utility);
+      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
+      const utility = `${prefix}${key}`;
+      if (emitted.has(utility)) continue;
+      emitted.add(utility);
+      blocks.push(`@utility ${utility} { ${axis.prop}: var(--${key}); }`);
     }
   }
-  return out;
-};
-
-const buildPresetData = () => {
-  const { refsTree } = buildTrees();
-  const colors = treeToVars(refsTree.color, '--color');
-  const fontWeight = refsTree.typography?.['font-weight']
-    ? treeToVars(refsTree.typography['font-weight'], '--font-weight')
-    : {};
-  const dropShadow = refsTree.effects?.['drop-shadow']
-    ? treeToVars(refsTree.effects['drop-shadow'], '--drop-shadow')
-    : {};
-  const lineHeight = refsTree.typography?.leading
-    ? treeToVars(refsTree.typography.leading, '--leading')
-    : {};
-  const letterSpacing = refsTree.typography?.tracking
-    ? treeToVars(refsTree.typography.tracking, '--tracking')
-    : {};
-
-  const fontSize = {};
-  for (const [key, bundle] of Object.entries(textsData)) {
-    if (!('fontSize' in bundle)) continue;
-    if (bundle.fontSize === 'inherit') continue;
-    const meta = {};
-    if ('lineHeight' in bundle) meta.lineHeight = `var(--${key}-line-height)`;
-    if ('letterSpacing' in bundle) meta.letterSpacing = `var(--${key}-letter-spacing)`;
-    if ('fontWeight' in bundle) meta.fontWeight = `var(--${key}-font-weight)`;
-    fontSize[key.replace(/^text-/, '')] = [`var(--${key}-font-size)`, meta];
-  }
-
-  return {
-    theme: {
-      extend: {
-        colors,
-        fontSize,
-        fontWeight,
-        dropShadow,
-        lineHeight,
-        letterSpacing,
-        textColor: semanticColors.text,
-        backgroundColor: semanticColors.background,
-        borderColor: semanticColors.border,
-      },
-    },
-  };
+  return blocks.join('\n');
 };
 
-const emitPresetV3 = () => {
-  const data = buildPresetData();
-  return [
-    '/* generated by build-tokens.mjs — target: v3 — do not edit */',
-    `const preset = ${JSON.stringify(data, null, 2)};`,
-    'export default preset;',
-    '',
+/**
+ * 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.
+ */
+const emitBaseLayer = () =>
+  [
+    '@layer base {',
+    '  button:not(:disabled),',
+    '  [role="button"]:not([aria-disabled="true"]),',
+    '  summary {',
+    '    cursor: pointer;',
+    '  }',
+    '}',
   ].join('\n');
-};
 
-const emitTailwindConfigV3 = () => {
-  const data = buildPresetData();
-  const config = {
-    content: ['./src/tests/**/*.html'],
-    darkMode: ['class', '[data-theme="dark"]'],
-    theme: data.theme,
-    plugins: [],
-  };
-  return [
-    '/* generated by build-tokens.mjs — target: v3 — do not edit */',
-    `/** @type {import('tailwindcss').Config} */`,
-    `module.exports = ${JSON.stringify(config, null, 2)};`,
-    '',
-  ].join('\n');
+/** Emit `@keyframes` blocks at the top level of the stylesheet. */
+const emitKeyframes = () => {
+  const blocks = [];
+  for (const [name, steps] of Object.entries(keyframes)) {
+    const body = Object.entries(steps)
+      .map(([step, decls]) => `  ${step} { ${decls}; }`)
+      .join('\n');
+    blocks.push(`@keyframes ${name} {\n${body}\n}`);
+  }
+  return blocks.join('\n\n');
 };
 
-// ─── 5. v4 emission (@import "tailwindcss" + @theme) ───────────────────────
+// ─── 4. v4 emission (@import "tailwindcss" + @theme) ───────────────────────
 /**
- * v4 puts color primitives under `@theme` so Tailwind auto-generates
- * `bg-gray-50`, `text-violet-500`, etc. Semantic tokens stay in plain `:root`
- * (with `@media` overrides) so we keep full control of the component classes.
+ * 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 on v4 conventions used:
- *   - `@theme { --color-* }` → color utilities.
- *   - `@theme { --breakpoint-* }` → screens.
+ * 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 = () => {
   const m = buildFlatModel();
   const primitivesEntries = Object.entries(m.primitives);
 
-  // Split primitives: color/breakpoint go in @theme; everything else (shape,
-  // typography, effects, border, ring-offset) stays in :root.
   const themeVars = {};
   const rootPrimitiveVars = {};
   for (const [k, v] of primitivesEntries) {
@@ -329,6 +287,10 @@ const emitCssV4 = () => {
     else rootPrimitiveVars[k] = v;
   }
 
+  for (const [name, shorthand] of Object.entries(animate)) {
+    themeVars[`--animate-${name}`] = shorthand;
+  }
+
   const semanticBase = {
     ...rootPrimitiveVars,
     ...(m.containers._ || {}),
@@ -354,63 +316,68 @@ const emitCssV4 = () => {
   }
 
   return [
-    '/* generated by build-tokens.mjs — target: v4 — do not edit */',
+    '/* generated by build-tokens.mjs — do not edit */',
     '',
     '@import "tailwindcss";',
     '',
+    '/*',
+    ' * `@aziontech/webkit` components use arbitrary values (`bg-[var(--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',
+    ' * `packages/theme/dist/v4/`; walking up three levels reaches `packages/`).',
+    ' */',
+    '@source "../../../webkit/src";',
+    '',
     '@theme {',
     formatVars(themeVars, '  '),
     '}',
     '',
-    ':root, [data-theme=light], .azion.azion-light {',
+    `${V4_SELECTOR} {`,
     formatVars(semanticBase, '  '),
     '',
     mediaBlocks.join('\n\n'),
     '}',
     '',
+    '/* ── Theme semantics (primary, secondary, surfaces, feedback, …) ── */',
+    compileThemeCss(),
+    '',
+    emitKeyframes(),
+    '',
     '@layer components {',
     emitComponentClasses(),
     '}',
     '',
+    emitTextUtilities(),
+    '',
+    emitSemanticColorUtilities(),
+    '',
+    emitBaseLayer(),
+    '',
   ].join('\n');
 };
 
-// ─── 6. Write to disk ──────────────────────────────────────────────────────
+// ─── 5. Write to disk ──────────────────────────────────────────────────────
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const distRoot = resolve(__dirname, '../../dist');
 
-const writeV3 = async () => {
-  const dir = resolve(distRoot, 'v3');
-  await mkdir(dir, { recursive: true });
-  const css = emitCssV3();
-  await writeFile(resolve(dir, 'globals.css'), css, 'utf8');
-  await writeFile(resolve(dir, 'globals.scss'), css, 'utf8');
-  await writeFile(resolve(dir, 'tailwind-preset.js'), emitPresetV3(), 'utf8');
-  await writeFile(resolve(dir, 'tailwind.config.js'), emitTailwindConfigV3(), 'utf8');
-  console.log(`✓ v3 → ${dir}`);
-};
-
-const writeV4 = async () => {
-  const dir = resolve(distRoot, 'v4');
-  await mkdir(dir, { recursive: true });
-  const css = emitCssV4();
-  await writeFile(resolve(dir, 'globals.css'), css, 'utf8');
-  await writeFile(resolve(dir, 'globals.scss'), css, 'utf8');
-  console.log(`✓ v4 → ${dir}`);
-};
-
-// ─── 7. CLI ────────────────────────────────────────────────────────────────
-const parseTarget = () => {
-  const arg = process.argv.find((a) => a.startsWith('--target='));
-  if (!arg) return 'all';
-  const value = arg.slice('--target='.length).toLowerCase();
-  if (!['v3', 'v4', 'all'].includes(value)) {
-    console.error(`Unknown --target=${value}. Use v3, v4, or all.`);
-    process.exit(1);
-  }
-  return value;
-};
-
-const target = parseTarget();
-if (target === 'v3' || target === 'all') await writeV3();
-if (target === 'v4' || target === 'all') await writeV4();
+const fontsCss = await readFile(
+  resolve(__dirname, '../tokens/primitives/fonts.css'),
+  'utf8',
+);
+
+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)}`;
+await writeFile(resolve(dir, 'globals.css'), css, 'utf8');
+await writeFile(resolve(dir, 'globals.scss'), css, 'utf8');
+console.log(`✓ v4 → ${dir}`);