improved a lot of things

packages/design-language/src/tokens.ts

@@ -0,0 +1,54 @@
+import type { DesignLanguageFileBody } from './schema.js';
+
+// ── Fluent 2 token mapping ────────────────────────────────────────────────────
+// Maps DLF token names to Fluent 2 (Griffel) CSS custom property names.
+// A token entry with a `fluentToken` field overrides the default Fluent 2 value.
+
+export type FluentTokenMap = Record<string, string>;
+
+/** Extract color token overrides from a DLF as a Fluent 2 token map. */
+export function extractColorTokens(dlf: DesignLanguageFileBody): FluentTokenMap {
+  const out: FluentTokenMap = {};
+  const colors = dlf.tokens?.colors ?? {};
+  for (const [, token] of Object.entries(colors)) {
+    if (!token) continue;
+    if (token.fluentToken) {
+      out[token.fluentToken] = token.value;
+    }
+  }
+  return out;
+}
+
+/** Convert a Fluent 2 token map to CSS custom properties for injection. */
+export function tokensToCssVars(tokens: FluentTokenMap): string {
+  const entries = Object.entries(tokens)
+    .map(([name, value]) => `  --${camelToKebab(name)}: ${value};`)
+    .join('\n');
+  return `:root {\n${entries}\n}`;
+}
+
+/** Convert a DLF to a CSS var block suitable for injection into the renderer iframe. */
+export function dlfToCssVars(dlf: DesignLanguageFileBody): string {
+  return tokensToCssVars(extractColorTokens(dlf));
+}
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+
+function camelToKebab(str: string): string {
+  return str.replace(/([A-Z])/g, m => `-${m.toLowerCase()}`);
+}
+
+/** Build a short human-readable summary of the DLF's token count for logging. */
+export function dlfSummary(dlf: DesignLanguageFileBody): string {
+  const tokenCounts = {
+    colors: Object.keys(dlf.tokens?.colors ?? {}).length,
+    typography: Object.keys(dlf.tokens?.typography ?? {}).length,
+    spacing: Object.keys(dlf.tokens?.spacing ?? {}).length,
+    components: Object.keys(dlf.components ?? {}).length,
+    screens: Object.keys(dlf.screens ?? {}).length,
+  };
+  return Object.entries(tokenCounts)
+    .filter(([, v]) => v > 0)
+    .map(([k, v]) => `${v} ${k}`)
+    .join(', ');
+}