@latty-ds/tokens 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Latty Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,225 @@
+# @latty-ds/tokens
+
+Design token package for the Latty Design System. Generates CSS custom properties, a JSON token object, and a browser-runtime API from a single configuration file.
+
+---
+
+## How it works
+
+The build pipeline takes `tokens.config.json` as input and runs in three steps:
+
+```text
+tokens.config.json
+       ↓
+  tsup (compile build script)
+       ↓
+  node dist-scripts/build-tokens.js
+       ↓
+  dist/tokens.css      ← primitive CSS custom properties
+  dist/semantic.css    ← semantic CSS custom properties (var() references)
+  dist/tokens.json     ← full token object (primitives + semantic map)
+  dist/tokens.js       ← ES module export of token object
+       ↓
+  tsc (generate public type definitions)
+       ↓
+  dist/public-types.d.ts
+```
+
+In addition, `tsup` also bundles `src/configure/` into `dist/configure.js` — a browser-safe module that runs the same generation at runtime, so consumers can customise the palette without a build step.
+
+---
+
+## Configuring your palette
+
+Edit `tokens.config.json` to set the base hex for each semantic color. The build generates a full 10-step OKLCH scale (50–900, plus a desaturated muted variant) from each value.
+
+```json
+{
+  "color": {
+    "primary": "#05b8e1",
+    "secondary": "#e26d05",
+    "success": "#22c55e",
+    "warning": "#eeb308",
+    "error": "#ef4444",
+    "info": "#0ea5e9"
+  }
+}
+```
+
+Then rebuild:
+
+```bash
+pnpm --filter @latty-ds/tokens build
+```
+
+---
+
+## Consuming tokens
+
+### Option A — Static CSS import
+
+Import once in your app's global stylesheet. Requires a build step.
+
+```css
+/* Primitive tokens (color scales, spacing, elevation, …) */
+@import '@latty-ds/tokens/tokens.css';
+
+/* Semantic tokens (intent-based, reference primitives via var()) */
+@import '@latty-ds/tokens/semantic.css';
+```
+
+### Option B — Runtime `configure()` (no build step for the consumer)
+
+Call `configure()` once at your app's entry point. It generates the full token set from the provided config and injects it into `document.head`. Useful when the palette must be determined at runtime (e.g. white-labelling, per-tenant theming).
+
+```ts
+import { configure } from '@latty-ds/tokens/configure';
+
+configure({
+  colors: {
+    primary: '#6366f1',
+    secondary: '#f59e0b'
+  },
+  font: { family: 'Inter, sans-serif' },
+  border: { radius: '0.375rem' }
+});
+```
+
+All fields are optional — omitted values fall back to the defaults in `tokens.config.json`. Can be called again to hot-swap the theme; the existing `<style>` element is replaced.
+
+### Option C — SSR (`createStyleSheet`)
+
+For server-side rendering, use `createStyleSheet()` to get the CSS string and inject it yourself.
+
+```ts
+import { createStyleSheet } from '@latty-ds/tokens/configure';
+
+const css = createStyleSheet({ colors: { primary: '#6366f1' } });
+// inject `css` into a <style> tag in your server-rendered HTML
+```
+
+### Option D — JS token object
+
+Import the static token object for programmatic access (e.g. in a Tailwind config or a JS-driven style system).
+
+```ts
+import { tokens } from '@latty-ds/tokens';
+
+console.log(tokens.color.primary['500']); // "#0097be"
+console.log(tokens.spacing.rem['4']); // "1rem"
+console.log(tokens.elevation['2']); // "0 4px 6px -1px rgb(…)"
+```
+
+---
+
+## Token reference
+
+### Primitive tokens (`tokens.css`)
+
+| Prefix                                  | Example                        | Description                       |
+| --------------------------------------- | ------------------------------ | --------------------------------- |
+| `--lt-color-[name]-[step]`              | `--lt-color-primary-500`       | Color palette steps 50–900        |
+| `--lt-color-[name]-muted-[step]`        | `--lt-color-primary-muted-300` | Desaturated variant of each color |
+| `--lt-color-neutral-[step]`             | `--lt-color-neutral-100`       | Greyscale scale                   |
+| `--lt-color-white` / `--lt-color-black` |                                | System colors                     |
+| `--lt-spacing-[n]`                      | `--lt-spacing-4` → `1rem`      | Spacing scale (rem), n = 0–24     |
+| `--lt-spacing-px-[n]`                   | `--lt-spacing-px-4` → `16px`   | Spacing scale (px)                |
+| `--lt-border-radius`                    | `0.5rem`                       | Global border radius              |
+| `--lt-elevation-[n]`                    | `--lt-elevation-2`             | Box shadows, n = 0–5              |
+| `--lt-typography-fontFamily`            | `"Hanken Grotesk", sans-serif` | Base font family                  |
+
+Color names: `primary`, `secondary`, `success`, `warning`, `error`, `info` (each with a `-muted` variant).
+
+### Semantic tokens (`semantic.css`)
+
+Semantic tokens encode intent, not raw values. They reference primitives via `var()` so theming only requires overriding this layer.
+
+| Group                | Example                             | Intent                         |
+| -------------------- | ----------------------------------- | ------------------------------ |
+| `--lt-text-*`        | `--lt-text-default`                 | Foreground / text colors       |
+| `--lt-bg-*`          | `--lt-bg-surface`                   | Background fills               |
+| `--lt-border-*`      | `--lt-border-focus`                 | Stroke colors                  |
+| `--lt-interactive-*` | `--lt-interactive-primary-bg-hover` | Stateful component backgrounds |
+
+Key semantic tokens:
+
+```css
+/* Text */
+--lt-text-default          → --lt-color-neutral-900   /* body text */
+--lt-text-subtle           → --lt-color-neutral-600   /* secondary / captions */
+--lt-text-muted            → --lt-color-neutral-400   /* placeholder, hints */
+--lt-text-inverse          → --lt-color-white         /* text on dark bg */
+--lt-text-[variant]        → --lt-color-[variant]-700 /* colored label text */
+--lt-text-on-[variant]     → white or neutral-900     /* text on solid colored bg */
+
+/* Background */
+--lt-bg-default            → --lt-color-white
+--lt-bg-surface            → --lt-color-neutral-100   /* cards, panels */
+--lt-bg-[variant]          → --lt-color-[variant]-500 /* solid colored bg */
+--lt-bg-[variant]-subtle   → --lt-color-[variant]-100 /* tinted bg (chips, badges) */
+
+/* Border */
+--lt-border-default        → --lt-color-neutral-200
+--lt-border-focus          → --lt-color-primary-400   /* focus ring */
+--lt-border-[variant]      → --lt-color-[variant]-200 /* subtle colored border */
+--lt-border-[variant]-strong → --lt-color-[variant]-500
+
+/* Interactive */
+--lt-interactive-[variant]-bg        → --lt-color-[variant]-500
+--lt-interactive-[variant]-bg-hover  → --lt-color-[variant]-600
+--lt-interactive-[variant]-bg-active → --lt-color-[variant]-700
+```
+
+`[variant]` = `primary` | `secondary` | `success` | `warning` | `error` | `info`
+
+---
+
+## Package exports
+
+| Export                          | File                | Use                                          |
+| ------------------------------- | ------------------- | -------------------------------------------- |
+| `@latty-ds/tokens`              | `dist/index.js`     | JS token object                              |
+| `@latty-ds/tokens/configure`    | `dist/configure.js` | Runtime `configure()` / `createStyleSheet()` |
+| `@latty-ds/tokens/tokens.css`   | `dist/tokens.css`   | Primitive CSS custom properties              |
+| `@latty-ds/tokens/semantic.css` | `dist/semantic.css` | Semantic CSS custom properties               |
+| `@latty-ds/tokens/tokens.json`  | `dist/tokens.json`  | Full token object as JSON                    |
+
+---
+
+## Source structure
+
+```text
+src/
+  constants/       Shared constants (color steps, spacing base, default radius/font)
+  types/           TypeScript type definitions (Tokens, LattyConfig, palette types, …)
+
+  colors/          OKLCH color palette generator (main + muted scales)
+  spacing/         Spacing scale generator (rem + px, 0–24 steps)
+  elevation/       Box-shadow elevation generator (0–5 levels)
+  semantic/        Semantic token map (intent → primitive reference)
+
+  core/            Orchestration — combines generators into a Tokens object;
+                   exports tokensToCss and semanticTokensToCss
+
+  configure/       Public browser-runtime API (configure, createStyleSheet)
+                   Includes unit tests
+
+  build/           Node.js build pipeline (not browser-safe)
+    colors.ts      Color token builder helper
+    tokens.ts      Entry point — reads config, writes dist/ files
+```
+
+---
+
+## Development
+
+```bash
+# Build the package (all three steps)
+pnpm --filter @latty-ds/tokens build
+
+# Run tests
+pnpm test
+
+# Clean dist
+pnpm --filter @latty-ds/tokens clean
+```

package/dist/configure.d.ts

@@ -0,0 +1,54 @@
+interface LattyConfig {
+    /** Built-in names: primary, secondary, success, warning, error, info. Any additional name generates a new palette. */
+    colors?: Record<string, string>;
+    font?: {
+        family?: string;
+    };
+    border?: {
+        radius?: string;
+    };
+    /**
+     * Controls which semantic token layer is emitted.
+     * - `'light'` (default) — light tokens only; ignores OS preference
+     * - `'dark'`   — dark tokens only; ignores OS preference
+     * - `'system'` — light at `:root`, dark inside `@media (prefers-color-scheme: dark)` + `[data-theme]` overrides
+     * - `'auto'`   — alias for `'system'`, deprecated
+     */
+    theme?: 'light' | 'dark' | 'system' | 'auto';
+}
+
+/**
+ * Generates a complete CSS stylesheet string (primitive + semantic tokens)
+ * from the provided config. Useful for SSR — inject the returned string into
+ * a `<style>` tag server-side.
+ */
+declare const createStyleSheet: (userConfig?: LattyConfig) => string;
+/**
+ * Injects design tokens into the document as a `<style>` element.
+ * Call once at your app's entry point — before any components render.
+ *
+ * Add `data-lt` to `<html>` to enable automatic FOUC prevention: configure()
+ * hides the document during token injection and reveals it on the next frame.
+ * For zero FOUC on initial load, also add this one-liner before your module script:
+ * `<style>html[data-lt]:not([data-lt-ready]){visibility:hidden}</style>`
+ *
+ * @example
+ * ```html
+ * <html lang="en" data-lt>
+ *   <head>
+ *     <style>html[data-lt]:not([data-lt-ready]){visibility:hidden}</style>
+ *     <script type="module">
+ *       import { configure } from '@latty-ds/tokens/configure';
+ *       configure({
+ *         colors: { primary: '#6366f1', secondary: '#f59e0b' },
+ *         font:   { family: 'Inter, sans-serif' },
+ *         border: { radius: '0.375rem' },
+ *       });
+ *     </script>
+ *   </head>
+ * </html>
+ * ```
+ */
+declare const configure: (userConfig?: LattyConfig) => void;
+
+export { type LattyConfig, configure, createStyleSheet };

package/dist/configure.js

@@ -0,0 +1,371 @@
+// src/constants/colors.constants.ts
+var STEPS = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
+var L_BY_STEP = {
+  50: 0.93,
+  100: 0.89,
+  200: 0.81,
+  300: 0.76,
+  400: 0.7,
+  500: 0.62,
+  600: 0.54,
+  700: 0.42,
+  800: 0.36,
+  900: 0.27
+};
+var L_BY_STEP_NEUTRAL = {
+  50: 0.985,
+  100: 0.965,
+  200: 0.92,
+  300: 0.84,
+  400: 0.74,
+  500: 0.62,
+  600: 0.52,
+  700: 0.42,
+  800: 0.32,
+  900: 0.22
+};
+
+// src/constants/spacing.constants.ts
+var SPACE_BASE_PX = 4;
+var SPACE_STEPS = 24;
+var REM_BASE_PX = 16;
+
+// src/constants/tokens.constants.ts
+var DEFAULT_BORDER_RADIUS = "0.5rem";
+var DEFAULT_FONT_FAMILY = '"Hanken Grotesk", sans-serif';
+
+// src/spacing/spacing.ts
+var buildSpacing = () => {
+  const px = {};
+  const rem = {};
+  for (let i = 0; i <= SPACE_STEPS; i++) {
+    const v = i * SPACE_BASE_PX;
+    px[i] = `${v}px`;
+    rem[i] = `${v / REM_BASE_PX}rem`;
+  }
+  return { px, rem };
+};
+
+// src/elevation/elevation.ts
+var buildElevation = (neutral) => {
+  const shadowColor = neutral["900"] || "#171717";
+  const hex = shadowColor.replace("#", "");
+  const r = parseInt(hex.substring(0, 2), 16);
+  const g = parseInt(hex.substring(2, 4), 16);
+  const b = parseInt(hex.substring(4, 6), 16);
+  const rgb = `${r} ${g} ${b}`;
+  return {
+    "0": "none",
+    "1": `0 1px 3px 0 rgb(${rgb} / 0.1), 0 1px 2px 0 rgb(${rgb} / 0.06)`,
+    "2": `0 4px 6px -1px rgb(${rgb} / 0.1), 0 2px 4px -1px rgb(${rgb} / 0.06)`,
+    "3": `0 10px 15px -3px rgb(${rgb} / 0.1), 0 4px 6px -2px rgb(${rgb} / 0.05)`,
+    "4": `0 20px 25px -5px rgb(${rgb} / 0.1), 0 10px 10px -5px rgb(${rgb} / 0.04)`,
+    "5": `0 25px 50px -12px rgb(${rgb} / 0.25)`
+  };
+};
+
+// src/colors/palette.ts
+import { formatHex, converter } from "culori";
+var toOklch = converter("oklch");
+var toRgb = converter("rgb");
+var clamp = (n, min, max) => Math.max(min, Math.min(max, n));
+var rampFromBase = (base, opts) => {
+  const chromaScale = opts?.chromaScale ?? 1;
+  const lPivot = opts?.lPivot ?? L_BY_STEP[500];
+  const midBoost = opts?.midBoost ?? 0;
+  const darkClamp = opts?.darkClamp ?? 0.06;
+  const minChromaFactor = opts?.minChromaFactor ?? 0.08;
+  const out = {};
+  const h = (base.h % 360 + 360) % 360;
+  const cMax = clamp(base.c * chromaScale, 0, 0.5);
+  const c500 = L_BY_STEP[500];
+  const c50 = L_BY_STEP[50];
+  const c900 = L_BY_STEP[900];
+  for (const step of STEPS) {
+    const canonical = L_BY_STEP[step];
+    let lTarget;
+    if (canonical >= c500) {
+      const t2 = (canonical - c500) / (c50 - c500);
+      lTarget = lPivot + t2 * (c50 - lPivot);
+    } else {
+      const t2 = (canonical - c500) / (c900 - c500);
+      lTarget = lPivot + t2 * (c900 - lPivot);
+    }
+    lTarget = clamp(lTarget, 0, 1);
+    const t = STEPS.indexOf(step) / (STEPS.length - 1);
+    const peak = clamp(1 - Math.pow(Math.abs(t - 0.55) / 0.55, 1.7), 0, 1);
+    const cMin = cMax * minChromaFactor;
+    let c = clamp(cMin + (cMax - cMin) * peak, 0, 0.5);
+    c = clamp(c * (1 + midBoost * peak), 0, 0.5);
+    if (step >= 800) c = Math.min(c, darkClamp);
+    const color = { mode: "oklch", l: lTarget, c, h };
+    const rgb = toRgb(color);
+    out[step] = formatHex(rgb);
+  }
+  return out;
+};
+var generatePalettes = (hex, useMuted) => {
+  const base = toOklch(hex);
+  if (!base) throw new Error(`Invalid color: ${hex}`);
+  const main = rampFromBase(base, {
+    chromaScale: 1,
+    lPivot: base.l,
+    midBoost: 0,
+    darkClamp: 0.06
+  });
+  main[500] = formatHex(hex) ?? hex;
+  const muted = useMuted ? rampFromBase(base, {
+    chromaScale: 0.2,
+    lPivot: clamp(base.l + 0.04, 0, 1),
+    midBoost: -0.2,
+    darkClamp: 0.045,
+    minChromaFactor: 0.06
+  }) : null;
+  return { main, muted };
+};
+var generateNeutralScale = () => {
+  const out = {};
+  for (const step of STEPS) {
+    const l = L_BY_STEP_NEUTRAL[step];
+    const color = { mode: "oklch", l, c: 0, h: 0 };
+    out[step] = formatHex(toRgb(color));
+  }
+  return out;
+};
+var generateBWColors = () => {
+  return {
+    white: "#FFFFFF",
+    black: "#000000"
+  };
+};
+
+// src/build/colors.ts
+var toStepObj = (pal) => STEPS.reduce((acc, s) => {
+  acc[`${s}`] = pal[s];
+  return acc;
+}, {});
+var buildColorTokens = (cfg) => {
+  const color = {};
+  for (const [name, value] of Object.entries(cfg.color)) {
+    const palettes = generatePalettes(value, true);
+    color[name] = toStepObj(palettes.main);
+    if (palettes.muted) {
+      color[`${name}-muted`] = toStepObj(palettes.muted);
+    }
+  }
+  return color;
+};
+var addSystemColors = (color) => {
+  color.neutral = toStepObj(generateNeutralScale());
+  return { ...color, ...generateBWColors() };
+};
+
+// src/core/generate.ts
+var buildTokens = (cfg) => {
+  let color = buildColorTokens(cfg);
+  color = addSystemColors(color);
+  const spacing = buildSpacing();
+  const border = { radius: DEFAULT_BORDER_RADIUS, square: false };
+  const typography = { fontFamily: DEFAULT_FONT_FAMILY };
+  const elevation = buildElevation(color.neutral);
+  return { color, spacing, border, typography, elevation };
+};
+var tokensToCss = (tokens) => {
+  const lines = [];
+  const walker = (value, parts) => {
+    if (typeof value === "string") {
+      lines.push(`  --lt-${parts.join("-")}: ${value};`);
+      return;
+    }
+    if (!value || typeof value !== "object") return;
+    for (const key of Object.keys(value).sort()) {
+      const next = value[key];
+      if (parts.length === 1 && parts[0] === "spacing" && (key === "rem" || key === "px")) {
+        if (key === "rem") walker(next, ["spacing"]);
+        else walker(next, ["spacing", "px"]);
+        continue;
+      }
+      walker(next, [...parts, key]);
+    }
+  };
+  walker(tokens, []);
+  return `:root{
+${lines.join("\n")}
+}
+`;
+};
+var semanticTokensToCss = (map, wrapper) => {
+  const lines = Object.entries(map).sort(([a], [b]) => a.localeCompare(b)).map(([key, ref]) => `  --lt-${key}: var(--lt-${ref});`);
+  if (!wrapper) {
+    return `/* Semantic tokens */
+:root {
+${lines.join("\n")}
+}
+`;
+  }
+  if (wrapper.startsWith("@")) {
+    const indented = lines.map((l) => "  " + l);
+    return `${wrapper} {
+  :root {
+${indented.join("\n")}
+  }
+}
+`;
+  }
+  return `${wrapper} {
+${lines.join("\n")}
+}
+`;
+};
+
+// src/semantic/semantic-tokens.ts
+var VARIANTS = ["primary", "secondary", "success", "warning", "error", "info"];
+var relativeLuminance = (hex) => {
+  const r = parseInt(hex.slice(1, 3), 16) / 255;
+  const g = parseInt(hex.slice(3, 5), 16) / 255;
+  const b = parseInt(hex.slice(5, 7), 16) / 255;
+  const lin = (c) => c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+  return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
+};
+var accessibleTextOn = (bgHex) => {
+  const L = relativeLuminance(bgHex);
+  const whiteContrast = 1.05 / (L + 0.05);
+  const darkContrast = (L + 0.05) / 0.059;
+  return whiteContrast >= darkContrast ? "color-white" : "color-neutral-900";
+};
+var buildLightSemanticTokens = (opts = {}) => {
+  const map = {};
+  map["text-default"] = "color-neutral-900";
+  map["text-subtle"] = "color-neutral-600";
+  map["text-muted"] = "color-neutral-400";
+  map["text-disabled"] = "color-neutral-400";
+  map["text-inverse"] = "color-white";
+  map["text-neutral"] = "color-neutral-700";
+  for (const v of VARIANTS) {
+    map[`text-${v}`] = `color-${v}-700`;
+    map[`text-on-${v}`] = "color-white";
+    map[`text-on-warning`] = "color-warning-800";
+  }
+  if (opts.primary500) map["text-on-primary"] = accessibleTextOn(opts.primary500);
+  map["bg-default"] = "color-white";
+  map["bg-subtle"] = "color-neutral-50";
+  map["bg-surface"] = "color-neutral-100";
+  map["bg-overlay"] = "color-neutral-200";
+  map["bg-inverse"] = "color-neutral-900";
+  map["bg-neutral-subtle"] = "color-neutral-100";
+  for (const v of VARIANTS) {
+    map[`bg-${v}`] = `color-${v}-500`;
+    map[`bg-${v}-subtle`] = `color-${v}-100`;
+  }
+  map["border-default"] = "color-neutral-200";
+  map["border-strong"] = "color-neutral-400";
+  map["border-subtle"] = "color-neutral-100";
+  map["border-focus"] = "color-primary-200";
+  for (const v of VARIANTS) {
+    map[`border-${v}`] = `color-${v}-200`;
+    map[`border-${v}-strong`] = `color-${v}-500`;
+  }
+  for (const v of VARIANTS) {
+    map[`interactive-${v}-bg`] = `color-${v}-500`;
+    map[`interactive-${v}-bg-hover`] = `color-${v}-600`;
+    map[`interactive-${v}-bg-active`] = `color-${v}-700`;
+  }
+  return map;
+};
+var buildDarkSemanticTokens = (opts = {}) => {
+  const map = {};
+  map["text-default"] = "color-neutral-100";
+  map["text-subtle"] = "color-neutral-300";
+  map["text-muted"] = "color-neutral-500";
+  map["text-disabled"] = "color-neutral-600";
+  map["text-inverse"] = "color-neutral-900";
+  map["text-neutral"] = "color-neutral-200";
+  for (const v of VARIANTS) {
+    map[`text-${v}`] = `color-${v}-300`;
+    map[`text-on-${v}`] = "color-white";
+  }
+  if (opts.primary400) map["text-on-primary"] = accessibleTextOn(opts.primary400);
+  map["bg-default"] = "color-neutral-900";
+  map["bg-subtle"] = "color-neutral-800";
+  map["bg-surface"] = "color-neutral-800";
+  map["bg-overlay"] = "color-neutral-700";
+  map["bg-inverse"] = "color-neutral-50";
+  map["bg-neutral-subtle"] = "color-neutral-800";
+  for (const v of VARIANTS) {
+    map[`bg-${v}`] = `color-${v}-500`;
+    map[`bg-${v}-subtle`] = `color-${v}-900`;
+  }
+  map["border-default"] = "color-neutral-700";
+  map["border-strong"] = "color-neutral-500";
+  map["border-subtle"] = "color-neutral-800";
+  map["border-focus"] = "color-primary-400";
+  for (const v of VARIANTS) {
+    map[`border-${v}`] = `color-${v}-700`;
+    map[`border-${v}-strong`] = `color-${v}-500`;
+  }
+  for (const v of VARIANTS) {
+    map[`interactive-${v}-bg`] = `color-${v}-400`;
+    map[`interactive-${v}-bg-hover`] = `color-${v}-300`;
+    map[`interactive-${v}-bg-active`] = `color-${v}-500`;
+  }
+  return map;
+};
+var buildSemanticTokens = (mode = "light", opts = {}) => mode === "dark" ? buildDarkSemanticTokens(opts) : buildLightSemanticTokens(opts);
+
+// tokens.config.json
+var tokens_config_default = {
+  color: {
+    primary: "#FF8200",
+    secondary: "#5252c5",
+    success: "#22c55e",
+    warning: "#eeb308",
+    error: "#ef4444",
+    info: "#0ea5e9"
+  },
+  border: {
+    radius: "2px"
+  }
+};
+
+// src/configure/configure.ts
+var DEFAULTS = {
+  colors: tokens_config_default.color,
+  font: { family: DEFAULT_FONT_FAMILY },
+  border: { radius: DEFAULT_BORDER_RADIUS }
+};
+var toInternalConfig = (userConfig) => ({
+  color: { ...DEFAULTS.colors, ...userConfig.colors }
+});
+var createStyleSheet = (userConfig = {}) => {
+  const cfg = toInternalConfig(userConfig);
+  let tokens = buildTokens(cfg);
+  if (userConfig.font?.family) {
+    tokens = { ...tokens, typography: { fontFamily: userConfig.font.family } };
+  }
+  if (userConfig.border?.radius) {
+    tokens = { ...tokens, border: { ...tokens.border, radius: userConfig.border.radius } };
+  }
+  const primitives = tokensToCss(tokens);
+  const theme = userConfig.theme ?? "light";
+  const primary = tokens.color.primary;
+  const semanticOpts = { primary500: primary["500"], primary400: primary["400"] };
+  if (theme === "dark") return primitives + "\n" + semanticTokensToCss(buildSemanticTokens("dark", semanticOpts));
+  if (theme === "light") return primitives + "\n" + semanticTokensToCss(buildSemanticTokens("light", semanticOpts));
+  return primitives + "\n" + semanticTokensToCss(buildSemanticTokens("light", semanticOpts)) + "\n" + semanticTokensToCss(buildSemanticTokens("dark", semanticOpts), "@media (prefers-color-scheme: dark)") + "\n" + semanticTokensToCss(buildSemanticTokens("dark", semanticOpts), '[data-theme="dark"]') + "\n" + semanticTokensToCss(buildSemanticTokens("light", semanticOpts), '[data-theme="light"]');
+};
+var configure = (userConfig = {}) => {
+  const root = document.documentElement;
+  root.removeAttribute("data-lt-ready");
+  let style = document.getElementById("lt-tokens");
+  if (!style) {
+    style = document.createElement("style");
+    style.id = "lt-tokens";
+    document.head.prepend(style);
+  }
+  style.textContent = "html[data-lt]:not([data-lt-ready]){visibility:hidden}\n" + createStyleSheet(userConfig);
+  requestAnimationFrame(() => root.setAttribute("data-lt-ready", ""));
+};
+export {
+  configure,
+  createStyleSheet
+};