@aziontech/theme 1.13.0 → 2.0.1

package/src/scripts/compile-theme.js

@@ -0,0 +1,117 @@
+/**
+ * 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, feedback/*) against the
+ * primitives + brand + (pre-resolved) surfaces. Emits two blocks (light + dark).
+ */
+
+import { brandPrimitives, primitives as colorPrimitives } from '../tokens/primitives/colors/colors.js';
+import { accent } from '../tokens/theme/accent.js';
+import { background } from '../tokens/theme/background.js';
+import { border } from '../tokens/theme/border.js';
+import { danger } from '../tokens/theme/feedback/danger.js';
+import { info } from '../tokens/theme/feedback/info.js';
+import { success } from '../tokens/theme/feedback/success.js';
+import { warning } from '../tokens/theme/feedback/warning.js';
+import { primary } from '../tokens/theme/primary.js';
+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';
+
+const VARIANTS = ['light', 'dark'];
+
+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 = (ref, surfacesResolved) => {
+  if (ref.startsWith('primitives.')) {
+    const v = getValueByPath(colorPrimitives, ref.slice('primitives.'.length));
+    return typeof v === 'string' || typeof v === 'number' ? String(v) : null;
+  }
+  if (ref.startsWith('brand.primary.primary-')) {
+    const shade = ref.slice('brand.primary.primary-'.length);
+    return brandPrimitives.primary[shade] ?? null;
+  }
+  if (ref.startsWith('brand.accent.accent-')) {
+    const shade = ref.slice('brand.accent.accent-'.length);
+    return brandPrimitives.accent[shade] ?? null;
+  }
+  if (ref.startsWith('brand.absolute.')) {
+    const name = ref.slice('brand.absolute.'.length);
+    return brandPrimitives.absolute[name] ?? null;
+  }
+  if (ref.startsWith('theme.surfaces.')) {
+    const key = ref.slice('theme.surfaces.'.length);
+    return surfacesResolved[key] ?? null;
+  }
+  return null;
+};
+
+const resolveGroup = (group, surfacesResolved) => {
+  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);
+  });
+  return result;
+};
+
+const compileVariant = (variant) => {
+  // 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);
+  });
+
+  const vars = {};
+  Object.entries(surfacesResolved).forEach(([k, v]) => {
+    vars[`--${k}`] = v;
+  });
+
+  const groups = [
+    primary[variant],
+    secondary[variant],
+    accent[variant],
+    background[variant],
+    border[variant],
+    text[variant],
+    ring[variant],
+    success[variant],
+    warning[variant],
+    danger[variant],
+    info[variant],
+  ];
+  groups.forEach((g) => Object.assign(vars, resolveGroup(g, surfacesResolved)));
+  return vars;
+};
+
+export const compileThemeVars = () => Object.fromEntries(VARIANTS.map((v) => [v, compileVariant(v)]));
+
+export const compileThemeCss = () => {
+  const { light, dark } = compileThemeVars();
+  const fmt = (vars) =>
+    Object.entries(vars)
+      .map(([k, v]) => `  ${k}: ${v};`)
+      .join('\n');
+  return [
+    `:root, [data-theme=light], .azion.azion-light {\n${fmt(light)}\n}`,
+    `[data-theme=dark], .dark, .azion.azion-dark {\n${fmt(dark)}\n}`,
+  ].join('\n\n');
+};
+
+export const injectThemeCss = () => {
+  const style = document.createElement('style');
+  style.setAttribute('data-azion-theme', 'true');
+  style.textContent = compileThemeCss();
+  document.head.appendChild(style);
+  return style;
+};

package/src/{tokens/build → scripts}/css-vars.js

@@ -1,12 +1,13 @@
 /**
- * CSS variables initializer for tokens.
+ * CSS variables initializer for semantic tokens.
+ *
+ * Reads the single source-of-truth in `tokens/semantic/colors.js` and resolves
+ * its `tokenRef(...)` entries against the primitive trees, producing a flat
+ * `{ light, dark }` map of CSS variable names → resolved color values.
  */
 
-import { primitives } from '../primitives/colors.js';
-import { surfacePrimitives, brandPrimitives } from '../primitives/brand.js';
-import { textSemantic } from '../semantic/text.js';
-import { backgroundSemantic } from '../semantic/backgrounds.js';
-import { borderSemantic } from '../semantic/borders.js';
+import { brandPrimitives,primitives, surfacePrimitives } from '../tokens/primitives/colors/colors.js';
+import { semanticColorsData } from '../tokens/semantic/colors.js';
 import { resolveRefsToCssVars } from './resolve.js';
 
 export const createCssVars = () =>
@@ -14,9 +15,9 @@ export const createCssVars = () =>
     primitives,
     surfacePrimitives,
     brandPrimitives,
-    textSemantic,
-    backgroundSemantic,
-    borderSemantic,
+    textSemantic: semanticColorsData.text,
+    backgroundSemantic: semanticColorsData.background,
+    borderSemantic: semanticColorsData.border,
   });
 
 export const cssVarsString = () => {

package/src/{tokens/build → scripts}/resolve.js

@@ -37,7 +37,9 @@ export const resolveRefsToCssVars = (tokens) => {
     surfacePrimitives: tokens.surfacePrimitives,
     brandPrimitives: tokens.brandPrimitives,
   };
+
   const baseForVars = { primitives: tokens.primitives, surfacePrimitives: tokens.surfacePrimitives };
+
   const lightSemantic = {
     text: tokens.textSemantic.light,
     background: tokens.backgroundSemantic.light,

package/src/tests/primitives.html

@@ -0,0 +1,293 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Primitives — Compile &amp; Inject Test</title>
+    <style>
+      :root { color-scheme: dark; }
+      body {
+        font-family: ui-sans-serif, system-ui, sans-serif;
+        margin: 2rem;
+        background: #fafafa;
+        color: #171717;
+      }
+      h1 { margin: 0 0 0.25rem; font-size: 1.25rem; }
+      h2 {
+        font-size: 0.875rem;
+        text-transform: uppercase;
+        letter-spacing: 0.04em;
+        color: #525252;
+        margin: 2rem 0 0.75rem;
+      }
+      .meta { color: #525252; font-size: 0.875rem; margin-bottom: 1rem; }
+      .count { color: #16833f; font-weight: 600; }
+      code {
+        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+        font-size: 0.8rem;
+      }
+      pre {
+        background: #fff;
+        border: 1px solid #e5e5e5;
+        border-radius: 6px;
+        padding: 1rem;
+        max-height: 70vh;
+        overflow: auto;
+        font-size: 0.75rem;
+        line-height: 1.5;
+        white-space: pre;
+      }
+
+      /* Sections */
+      .grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+        gap: 0.5rem;
+      }
+      .card {
+        border: 1px solid #e5e5e5;
+        border-radius: 6px;
+        overflow: hidden;
+        background: #fff;
+        font-size: 0.7rem;
+      }
+      .card .swatch { height: 48px; }
+      .card .label { padding: 4px 6px; font-family: ui-monospace, monospace; }
+      .card .value { padding: 0 6px 6px; color: #737373; font-family: ui-monospace, monospace; }
+
+      /* Spacing/size demo */
+      .scale-row { display: flex; align-items: center; gap: 0.75rem; padding: 4px 0; font-size: 0.75rem; }
+      .scale-row .bar { background: #FE601F; height: 12px; border-radius: 2px; }
+      .scale-row .name { width: 80px; font-family: ui-monospace, monospace; }
+      .scale-row .v { color: #737373; font-family: ui-monospace, monospace; }
+
+      /* Radius demo */
+      .radius-card .swatch { background: #e5e5e5; }
+
+      /* Type demo */
+      .type-row { display: flex; align-items: baseline; gap: 0.75rem; padding: 6px 0; border-bottom: 1px dashed #e5e5e5; }
+      .type-row .name { width: 120px; font-family: ui-monospace, monospace; font-size: 0.7rem; color: #525252; }
+      .type-row .sample { flex: 1; }
+      .type-row .v { color: #737373; font-family: ui-monospace, monospace; font-size: 0.7rem; }
+
+      /* Blur demo */
+      .blur-card .swatch {
+        background: linear-gradient(135deg, #FE601F, #8A84EC);
+        position: relative;
+      }
+      .blur-card .swatch::after {
+        content: "";
+        position: absolute;
+        inset: 0;
+        backdrop-filter: blur(var(--demo-blur, 0));
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Primitives — Compile &amp; Inject Test</h1>
+    <p class="meta">
+      <span class="count" id="count">…</span> CSS variables injected via
+      <code>&lt;style data-azion-primitives&gt;</code>
+    </p>
+
+    <h2>Colors</h2>
+    <div class="grid" id="colors"></div>
+
+    <h2>Spacing</h2>
+    <div id="spacing"></div>
+
+    <h2>Size</h2>
+    <div id="size"></div>
+
+    <h2>Radius</h2>
+    <div class="grid" id="radius"></div>
+
+    <h2>Container</h2>
+    <div id="container"></div>
+
+    <h2>Font Family</h2>
+    <div id="font-family"></div>
+
+    <h2>Font Size + Line Height</h2>
+    <div id="typography"></div>
+
+    <h2>Blur</h2>
+    <div class="grid" id="blur"></div>
+
+    <h2>Opacity</h2>
+    <div class="grid" id="opacity"></div>
+
+    <h2>Breakpoints / Border / Ring-offset</h2>
+    <pre id="misc"></pre>
+
+    <h2>Full Generated CSS</h2>
+    <pre id="css"></pre>
+
+    <script type="module">
+      import {
+        compilePrimitivesCss,
+        compilePrimitivesVars,
+        injectPrimitivesCss,
+      } from '../scripts/compile-primitives.js';
+
+      const styleTag = injectPrimitivesCss();
+      const vars = compilePrimitivesVars();
+      const css = compilePrimitivesCss();
+
+      document.getElementById('count').textContent = Object.keys(vars).length;
+      document.getElementById('css').textContent = css;
+
+      const entriesStartingWith = (prefix) =>
+        Object.entries(vars).filter(([k]) => k.startsWith(prefix));
+      const entriesMatching = (regex) =>
+        Object.entries(vars).filter(([k]) => regex.test(k));
+
+      // --- Colors (skip alpha for clarity)
+      const colorEntries = entriesStartingWith('--color-')
+        .filter(([k]) => !k.startsWith('--color-alpha-'));
+      const colorsEl = document.getElementById('colors');
+      colorEntries.forEach(([name, value]) => {
+        const el = document.createElement('div');
+        el.className = 'card';
+        el.innerHTML = `
+          <div class="swatch" style="background: var(${name});"></div>
+          <div class="label">${name.replace('--color-', '')}</div>
+          <div class="value">${value}</div>
+        `;
+        colorsEl.appendChild(el);
+      });
+
+      // --- Spacing
+      const spacingEntries = entriesStartingWith('--spacing-');
+      const spacingEl = document.getElementById('spacing');
+      spacingEntries.forEach(([name, value]) => {
+        const row = document.createElement('div');
+        row.className = 'scale-row';
+        row.innerHTML = `
+          <span class="name">${name.replace('--', '')}</span>
+          <span class="bar" style="width: var(${name});"></span>
+          <span class="v">${value}</span>
+        `;
+        spacingEl.appendChild(row);
+      });
+
+      // --- Size
+      const sizeEntries = entriesStartingWith('--size-');
+      const sizeEl = document.getElementById('size');
+      sizeEntries.forEach(([name, value]) => {
+        const row = document.createElement('div');
+        row.className = 'scale-row';
+        row.innerHTML = `
+          <span class="name">${name.replace('--', '')}</span>
+          <span class="bar" style="width: var(${name});"></span>
+          <span class="v">${value}</span>
+        `;
+        sizeEl.appendChild(row);
+      });
+
+      // --- Radius
+      const radiusEntries = entriesStartingWith('--radius-');
+      const radiusEl = document.getElementById('radius');
+      radiusEntries.forEach(([name, value]) => {
+        const el = document.createElement('div');
+        el.className = 'card radius-card';
+        el.innerHTML = `
+          <div class="swatch" style="border-radius: var(${name});"></div>
+          <div class="label">${name.replace('--', '')}</div>
+          <div class="value">${value}</div>
+        `;
+        radiusEl.appendChild(el);
+      });
+
+      // --- Container
+      const containerEntries = entriesStartingWith('--container-');
+      const containerEl = document.getElementById('container');
+      containerEntries.forEach(([name, value]) => {
+        const row = document.createElement('div');
+        row.className = 'scale-row';
+        row.innerHTML = `
+          <span class="name">${name.replace('--', '')}</span>
+          <span class="bar" style="width: min(var(${name}), 100%);"></span>
+          <span class="v">${value}</span>
+        `;
+        containerEl.appendChild(row);
+      });
+
+      // --- Font family
+      const fontFamilyEntries = entriesStartingWith('--font-')
+        .filter(([name]) => !name.startsWith('--font-weight-'));
+      const fontFamilyEl = document.getElementById('font-family');
+      fontFamilyEntries.forEach(([name, value]) => {
+        const row = document.createElement('div');
+        row.className = 'type-row';
+        row.innerHTML = `
+          <span class="name">${name.replace('--', '')}</span>
+          <span class="sample" style="font-family: var(${name});">The quick brown fox jumps over the lazy dog</span>
+          <span class="v">${value}</span>
+        `;
+        fontFamilyEl.appendChild(row);
+      });
+
+      // --- Font size + line height
+      const fontSizeEntries = entriesStartingWith('--font-size-');
+      const typographyEl = document.getElementById('typography');
+      fontSizeEntries.forEach(([name, value]) => {
+        const row = document.createElement('div');
+        row.className = 'type-row';
+        row.innerHTML = `
+          <span class="name">${name.replace('--', '')}</span>
+          <span class="sample" style="font-size: var(${name}); line-height: 1.2;">Aa Bb 123</span>
+          <span class="v">${value}</span>
+        `;
+        typographyEl.appendChild(row);
+      });
+      const lineHeightEntries = entriesStartingWith('--line-height-');
+      lineHeightEntries.forEach(([name, value]) => {
+        const row = document.createElement('div');
+        row.className = 'type-row';
+        row.innerHTML = `
+          <span class="name">${name.replace('--', '')}</span>
+          <span class="sample" style="line-height: var(${name}); font-size: 14px;">line A<br/>line B</span>
+          <span class="v">${value}</span>
+        `;
+        typographyEl.appendChild(row);
+      });
+
+      // --- Blur
+      const blurEntries = entriesStartingWith('--blur-');
+      const blurEl = document.getElementById('blur');
+      blurEntries.forEach(([name, value]) => {
+        const el = document.createElement('div');
+        el.className = 'card blur-card';
+        el.innerHTML = `
+          <div class="swatch" style="--demo-blur: var(${name});"></div>
+          <div class="label">${name.replace('--', '')}</div>
+          <div class="value">${value}</div>
+        `;
+        blurEl.appendChild(el);
+      });
+
+      // --- Opacity
+      const opacityEntries = entriesStartingWith('--opacity-');
+      const opacityEl = document.getElementById('opacity');
+      opacityEntries.forEach(([name, value]) => {
+        const el = document.createElement('div');
+        el.className = 'card';
+        el.innerHTML = `
+          <div class="swatch" style="background: #FE601F; opacity: var(${name});"></div>
+          <div class="label">${name.replace('--', '')}</div>
+          <div class="value">${value}</div>
+        `;
+        opacityEl.appendChild(el);
+      });
+
+      // --- Misc (breakpoints, border, ring-offset)
+      const misc = entriesMatching(/^--(breakpoint|border|ring-offset)/);
+      document.getElementById('misc').textContent = misc
+        .map(([k, v]) => `${k}: ${v};`)
+        .join('\n');
+
+      console.info('[primitives] injected', styleTag);
+      console.info('[primitives] vars', vars);
+    </script>
+  </body>
+</html>