@aziontech/theme 1.12.0 → 2.0.0

package/README.md

@@ -4,7 +4,7 @@ A comprehensive design token system and theming solution for Azion's web applica
 
 ## Features
 
-- **Design Tokens**: Primitive and semantic color tokens generated from Figma;
+- **Design Tokens**: Primitives and semantic colors tokens generated from Figma;
 - **Brand Colors**: Azion's official color palette with primary (orange), accent (violet), and surface colors;
 - **Theme Support**: Built-in light and dark mode theming;
 - **Tailwind Integration**: Plugin and preset for seamless Tailwind CSS integration;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@aziontech/theme",
   "type": "module",
-  "version": "1.12.0",
+  "version": "2.0.0",
   "author": "aziontech",
   "license": "MIT",
   "repository": {
@@ -11,7 +11,12 @@
   },
   "scripts": {
     "pack:dry": "npm pack --dry-run",
-    "format": "prettier --write scripts/ src/"
+    "format": "prettier --write scripts/ src/",
+    "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": "npm run build:tokens:v3 && tailwindcss -c dist/v3/tailwind.config.js -i dist/v3/globals.css -o dist/v3/output.css",
+    "test:tokens:v3": "npm run build:css:v3 && open src/tests/tokens.html"
   },
   "publishConfig": {
     "access": "public"
@@ -40,30 +45,23 @@
   },
   "files": [
     "src/",
+    "dist/",
     "LICENSE",
-    "colors-brand.js",
     "default.js",
     "tokens.js",
-    "widget.js",
-    "tailwind-theme.js"
+    "widget.js"
   ],
   "exports": {
     ".": "./default.js",
-    "./widget": "./widget.js",
-    "./tokens": "./tokens.js",
-    "./tokens/primitive": "./tokens.js",
-    "./tokens/brand": "./tokens.js",
-    "./tokens/semantic/text": "./tokens.js",
-    "./tokens/semantic/backgrounds": "./tokens.js",
-    "./tokens/semantic/borders": "./tokens.js",
-    "./tokens/build/preset": "./src/tokens/build/preset.js",
-    "./tokens/build/tailwind-helper": "./src/tokens/build/tailwind-helper.js",
-    "./tokens/build/tailwind-plugin": "./src/tokens/build/tailwind-plugin",
-    "./tokens/build/css-vars.js": "./src/tokens/build/css-vars.js",
-    "./tailwind/tailwind-theme": "./src/tailwind/tailwind-theme.js",
-    "./tailwind/semantic-colors-plugin": "./src/tailwind/semantic-colors-plugin.js",
-    "./tailwind/semantic-texts-plugin": "./src/tailwind/semantic-texts-plugin.js",
-    "./tailwind/semantic-spacing-plugin": "./src/tailwind/semantic-spacing-plugin.js",
-    "./tailwind/semantic-animations-plugin": "./src/tailwind/semantic-animations-plugin.js"
+    "./scripts/compile-primitives": "./src/scripts/compile-primitives.js",
+    "./scripts/compile-theme": "./src/scripts/compile-theme.js",
+    "./tailwind-preset": "./dist/v3/tailwind-preset.js",
+    "./tailwind-preset/v3": "./dist/v3/tailwind-preset.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"
   }
 }

package/src/scripts/build-tokens.mjs

@@ -0,0 +1,391 @@
+#!/usr/bin/env node
+/**
+ * Build design tokens into self-contained stylesheets and Tailwind configs.
+ *
+ * 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
+ *
+ * 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)
+ *
+ * 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`.
+ *
+ * No external deps — node:fs/promises, node:path, node:url only.
+ */
+
+import { mkdir, writeFile } from 'node:fs/promises';
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import { breakpoints } from '../tokens/primitives/breakpoints.js';
+import { buildTrees, flatten } from './compile-primitives.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()}`);
+
+// ─── 1. Primitives ──────────────────────────────────────────────────────────
+const flattenPrimitives = () => {
+  const { refsTree, varsTree } = buildTrees();
+  return flatten(varsTree, refsTree);
+};
+
+// ─── 2. Semantic flattening ─────────────────────────────────────────────────
+const splitResponsive = (value) => {
+  if (value === null || typeof value !== 'object') return { _: String(value) };
+  const out = {};
+  for (const [bp, v] of Object.entries(value)) out[bp] = String(v);
+  return out;
+};
+
+const flattenSingleValue = (data, varNameOf) => {
+  const byBp = {};
+  for (const [key, val] of Object.entries(data)) {
+    for (const [bp, v] of Object.entries(splitResponsive(val))) {
+      (byBp[bp] ||= {})[varNameOf(key)] = v;
+    }
+  }
+  return byBp;
+};
+
+const flattenBundle = (data) => {
+  const byBp = {};
+  for (const [key, bundle] of Object.entries(data)) {
+    for (const [prop, val] of Object.entries(bundle)) {
+      const varName = `--${key}-${kebab(prop)}`;
+      for (const [bp, v] of Object.entries(splitResponsive(val))) {
+        (byBp[bp] ||= {})[varName] = v;
+      }
+    }
+  }
+  return byBp;
+};
+
+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 ──────────────────────────────────────────
+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. */
+const emitComponentClasses = (indent = '  ') => {
+  const lines = [];
+
+  lines.push(`${indent}/* ── Containers ── */`);
+  lines.push(`${indent}.px-container { padding-left: var(--container-px); padding-right: var(--container-px); }`);
+  lines.push(`${indent}.py-container { padding-top: var(--container-py); padding-bottom: var(--container-py); }`);
+  lines.push(`${indent}.max-container-width { max-width: var(--container-max-width); }`);
+
+  lines.push('');
+  lines.push(`${indent}/* ── Spacings ── */`);
+  for (const key of Object.keys(spacingsData)) {
+    lines.push(`${indent}.gap-${key} { gap: var(--${key}); }`);
+    lines.push(`${indent}.p-${key} { padding: var(--${key}); }`);
+  }
+
+  lines.push('');
+  lines.push(`${indent}/* ── Texts ── */`);
+  for (const [key, bundle] of Object.entries(textsData)) {
+    const decls = Object.keys(bundle)
+      .map((prop) => `${kebab(prop)}: var(--${key}-${kebab(prop)});`)
+      .join(' ');
+    lines.push(`${indent}.${key} { ${decls} }`);
+  }
+
+  return lines.join('\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 base;',
+    '@tailwind components;',
+    '@tailwind utilities;',
+    '',
+    '@layer base {',
+    `  ${V3_SELECTOR} {`,
+    baseBody,
+    '  }',
+    '',
+    mediaBlocks.join('\n\n'),
+    '}',
+    '',
+    '@layer base {',
+    `  ${V3_DARK_SELECTOR} {`,
+    `    /* ── Semantic colors (dark) ── */`,
+    formatVars(m.semanticColors.dark, '    '),
+    '  }',
+    '}',
+    '',
+    '@layer components {',
+    emitComponentClasses(),
+    '}',
+    '',
+  ].join('\n');
+};
+
+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})`;
+    }
+  }
+  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;
+    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,
+      },
+    },
+  };
+};
+
+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;',
+    '',
+  ].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');
+};
+
+// ─── 5. 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.
+ *
+ * Notes on v4 conventions used:
+ *   - `@theme { --color-* }` → color utilities.
+ *   - `@theme { --breakpoint-* }` → screens.
+ *   - 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 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) {
+    if (k.startsWith('--color-') || k.startsWith('--breakpoint-')) themeVars[k] = v;
+    else rootPrimitiveVars[k] = v;
+  }
+
+  const semanticBase = {
+    ...rootPrimitiveVars,
+    ...(m.containers._ || {}),
+    ...(m.spacings._ || {}),
+    ...(m.texts._ || {}),
+  };
+
+  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) continue;
+    mediaBlocks.push(
+      [
+        `  @media (min-width: ${breakpoints[bp]}) {`,
+        formatVars(merged, '    '),
+        `  }`,
+      ].join('\n'),
+    );
+  }
+
+  return [
+    '/* generated by build-tokens.mjs — target: v4 — do not edit */',
+    '',
+    '@import "tailwindcss";',
+    '',
+    '@theme {',
+    formatVars(themeVars, '  '),
+    '}',
+    '',
+    ':root, [data-theme=light], .azion.azion-light {',
+    formatVars(semanticBase, '  '),
+    '',
+    mediaBlocks.join('\n\n'),
+    '}',
+    '',
+    '@layer components {',
+    emitComponentClasses(),
+    '}',
+    '',
+  ].join('\n');
+};
+
+// ─── 6. 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();

package/src/scripts/compile-primitives.js

@@ -0,0 +1,165 @@
+/**
+ * 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 the `injectCssVars` helper
+ * but for primitives only — no semantic light/dark split.
+ */
+
+import { primitives as colorPrimitives } from '../tokens/primitives/colors/colors.js';
+import { animate } from '../tokens/primitives/animations/animate.js';
+import { ease } from '../tokens/primitives/animations/ease.js';
+import { borderWidths } from '../tokens/primitives/border-widths.js';
+import { breakpoints } from '../tokens/primitives/breakpoints.js';
+import { blur } from '../tokens/primitives/effects/blur.js';
+import { dropShadow } from '../tokens/primitives/effects/drop-shadow.js';
+import { insetShadow } from '../tokens/primitives/effects/inset-shadow.js';
+import { opacity } from '../tokens/primitives/effects/opacity.js';
+import { perspective } from '../tokens/primitives/effects/perspective.js';
+import { shadow } from '../tokens/primitives/effects/shadow.js';
+import { ringOffset } from '../tokens/primitives/ring-offset.js';
+import { aspectVideo } from '../tokens/primitives/shape/aspect-video.js';
+import { container } from '../tokens/primitives/shape/container.js';
+import { height } from '../tokens/primitives/shape/height.js';
+import { radius } from '../tokens/primitives/shape/radius.js';
+import { shape as shapeAliases } from '../tokens/primitives/shape/shape.js';
+import { size } from '../tokens/primitives/shape/size.js';
+import { spacing } from '../tokens/primitives/shape/spacing.js';
+import { width } from '../tokens/primitives/shape/width.js';
+import { fontFamily } from '../tokens/primitives/typography/font-family.js';
+import { fontSize } from '../tokens/primitives/typography/font-size.js';
+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';
+
+/**
+ * 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 = {
+    ...restColors,
+    primary: brand.primary,
+    accent: brand.accent,
+    absolute: brand.absolute,
+  };
+
+  const shape = {
+    container,
+    height,
+    radius,
+    size,
+    spacing,
+    width,
+    'aspect-video': aspectVideo,
+    ...shapeAliases,
+  };
+  const typography = {
+    font: fontFamily,
+    text: fontSize,
+    'font-weight': fontWeight,
+    leading,
+    'line-height': lineHeight,
+    tracking,
+  };
+  const effects = {
+    blur,
+    'drop-shadow': dropShadow,
+    shadow,
+    'inset-shadow': insetShadow,
+    opacity,
+    perspective,
+  };
+  const animations = { ease, animate };
+
+  const refsTree = {
+    color,
+    breakpoint: breakpoints,
+    border: borderWidths,
+    shape,
+    typography,
+    effects,
+    animations,
+    'ring-offset': ringOffset['ring-offset'],
+  };
+
+  const varsTree = {
+    color,
+    breakpoint: breakpoints,
+    border: borderWidths,
+    ...shape,
+    ...typography,
+    ...effects,
+    ...animations,
+    'ring-offset': ringOffset['ring-offset'],
+  };
+
+  return { refsTree, varsTree };
+};
+
+const getValueByPath = (obj, path) =>
+  path.split('.').reduce((acc, key) => {
+    if (acc && typeof acc === 'object' && key in acc) return acc[key];
+    return undefined;
+  }, obj);
+
+const resolveRef = (refPath, refsTree) => {
+  const direct = getValueByPath(refsTree, refPath);
+  if (typeof direct === 'string' || typeof direct === 'number') return String(direct);
+  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('-')}`;
+};
+
+export const flatten = (obj, refsTree, prefix = []) => {
+  const result = {};
+  Object.entries(obj).forEach(([key, value]) => {
+    const nextPath = [...prefix, key];
+    if (isTokenRef(value)) {
+      const resolved = resolveRef(value.__ref, refsTree);
+      result[varNameFor(nextPath)] = resolved ?? value.__ref;
+      return;
+    }
+    if (value && typeof value === 'object' && !Array.isArray(value)) {
+      Object.assign(result, flatten(value, refsTree, nextPath));
+      return;
+    }
+    if (typeof value === 'string' || typeof value === 'number') {
+      result[varNameFor(nextPath)] = String(value);
+    }
+  });
+  return result;
+};
+
+export const compilePrimitivesVars = () => {
+  const { refsTree, varsTree } = buildTrees();
+  return flatten(varsTree, refsTree);
+};
+
+export const compilePrimitivesCss = () => {
+  const vars = compilePrimitivesVars();
+  const body = Object.entries(vars)
+    .map(([k, v]) => `  ${k}: ${v};`)
+    .join('\n');
+  return `:root, [data-theme=light], .azion.azion-light {\n${body}\n}`;
+};
+
+export const injectPrimitivesCss = () => {
+  const style = document.createElement('style');
+  style.setAttribute('data-azion-primitives', 'true');
+  style.textContent = compilePrimitivesCss();
+  document.head.appendChild(style);
+  return style;
+};