@calliopelabs/ui 0.0.0-stage → 0.3.1

package/dist/styles/preset.css

@@ -0,0 +1,175 @@
+/*
+ * @calliopelabs/ui Tailwind 4 preset.
+ *
+ *   @import "tailwindcss";
+ *   @import "@calliopelabs/ui/preset.css";
+ *
+ * It brings the theme tokens, maps them onto Tailwind's colour, radius, font,
+ * type and motion scales, points Tailwind at this package's components so
+ * their classes are generated, and sets the family's base layer.
+ */
+@import "./theme.css";
+
+/* The package's own components: their classes are generated with the app's. */
+@source "../";
+
+/* Dark follows the ground, not the OS: `data-mode` on <html> says which. */
+@custom-variant dark (&:where([data-mode="dark"], [data-mode="dark"] *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-surface-0: var(--surface-0);
+  --color-surface-1: var(--surface-1);
+  --color-surface-2: var(--surface-2);
+
+  /* Semantic status: solid base, -fg text on the tint, -bg fill, -border hairline. */
+  --color-success: var(--success);
+  --color-success-fg: var(--success-fg);
+  --color-success-bg: var(--success-bg);
+  --color-success-border: var(--success-border);
+  --color-warning: var(--warning);
+  --color-warning-fg: var(--warning-fg);
+  --color-warning-bg: var(--warning-bg);
+  --color-warning-border: var(--warning-border);
+  --color-info: var(--info);
+  --color-info-fg: var(--info-fg);
+  --color-info-bg: var(--info-bg);
+  --color-info-border: var(--info-border);
+  --color-danger: var(--danger);
+  --color-danger-fg: var(--danger-fg);
+  --color-danger-bg: var(--danger-bg);
+  --color-danger-border: var(--danger-border);
+
+  /* IBM Plex Sans for UI, IBM Plex Mono for anything technical, DM Sans for headings. */
+  --font-sans: var(--font-plex-sans, "IBM Plex Sans"), system-ui, sans-serif;
+  --font-mono:
+    var(--font-plex-mono, "IBM Plex Mono"), ui-monospace, SFMono-Regular, Menlo, monospace;
+  --font-head: var(--font-dm-sans, "DM Sans"), system-ui, sans-serif;
+
+  /* `rounded-lg` is the corners setting itself; clamped so 0px never goes negative. */
+  --radius-sm: max(0px, calc(var(--radius) - 4px));
+  --radius-md: max(0px, calc(var(--radius) - 2px));
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
+}
+
+@theme {
+  /* The micro step below xs, for eyebrows, counts and table heads. */
+  --text-2xs: 0.6875rem;
+  --text-2xs--line-height: 1rem;
+
+  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+  --ease-emphasized: cubic-bezier(0.3, 0, 0, 1);
+
+  /* Overlays arrive calmly and leave at once. */
+  --animate-cui-fade-in: cui-fade-in var(--motion-fast) var(--ease-standard);
+  --animate-cui-pop-in: cui-pop-in var(--motion-base) var(--ease-emphasized);
+  --animate-cui-slide-in-right: cui-slide-in-right var(--motion-base) var(--ease-emphasized);
+  --animate-cui-slide-in-left: cui-slide-in-left var(--motion-base) var(--ease-emphasized);
+  --animate-cui-slide-in-bottom: cui-slide-in-bottom var(--motion-base) var(--ease-emphasized);
+  /* A table's rows being replaced: a short bar travelling along the top edge. */
+  --animate-cui-progress: cui-progress 1.4s var(--ease-standard) infinite;
+
+  @keyframes cui-fade-in {
+    from {
+      opacity: 0;
+    }
+  }
+  /* `transform` composes with the `translate` that centres a dialog. */
+  @keyframes cui-pop-in {
+    from {
+      opacity: 0;
+      transform: scale(0.98);
+    }
+  }
+  @keyframes cui-slide-in-right {
+    from {
+      transform: translateX(1.5rem);
+      opacity: 0;
+    }
+  }
+  @keyframes cui-slide-in-left {
+    from {
+      transform: translateX(-1.5rem);
+      opacity: 0;
+    }
+  }
+  @keyframes cui-progress {
+    from {
+      translate: -100% 0;
+    }
+    to {
+      translate: 300% 0;
+    }
+  }
+  @keyframes cui-slide-in-bottom {
+    from {
+      transform: translateY(1.5rem);
+      opacity: 0;
+    }
+  }
+}
+
+@layer base {
+  *,
+  ::before,
+  ::after {
+    border-color: var(--border);
+    outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
+  }
+
+  body {
+    @apply bg-background font-sans text-foreground;
+  }
+
+  h1,
+  h2,
+  h3 {
+    @apply font-head;
+  }
+
+  /* Motion is never the only carrier of meaning; with reduced motion it stops. */
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    ::before,
+    ::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }
+}

package/dist/styles/theme.css

@@ -0,0 +1,339 @@
+/*
+ * @calliopelabs/ui theme tokens.
+ * Generated by `npm run theme` from src/theme/tokens.ts. Do not edit by hand.
+ *
+ * The appearance axes ride on attributes of <html>, set before first paint by
+ * AppearanceScript and kept in step by AppearanceProvider:
+ *   data-mode     dark | light (follows the ground)
+ *   data-ground   the surface ramp
+ *   data-accent   a family accent, the product's brand accent, or custom
+ *   data-density  compact | cards (any element may carry its own)
+ *   --radius      the corners setting, inline
+ * Semantic status tokens are defined per mode only: no ground and no accent
+ * may change what ok, warn, info or error look like.
+ */
+
+/* Mode-independent tokens */
+:root {
+  --radius: 2px;
+  --motion-fast: 120ms;
+  --motion-base: 200ms;
+  --motion-slow: 320ms;
+}
+
+/* Dark: black ground, green accent */
+:root,
+[data-mode="dark"] {
+  color-scheme: dark;
+  --background: #000000;
+  --card: #0a0a0a;
+  --popover: #141414;
+  --secondary: #161616;
+  --muted: #111111;
+  --accent: #1b1b1b;
+  --muted-foreground: #848b88;
+  --border: rgba(255, 255, 255, 0.1);
+  --input: rgba(255, 255, 255, 0.1);
+  --sidebar: var(--brand-sidebar, #0a0a0a);
+  --sidebar-accent: color-mix(in oklab, var(--primary) 16%, transparent);
+  --sidebar-border: rgba(255, 255, 255, 0.08);
+  --foreground: #f0f2f1;
+  --card-foreground: #f0f2f1;
+  --popover-foreground: #f0f2f1;
+  --secondary-foreground: #f0f2f1;
+  --accent-foreground: #f0f2f1;
+  --brand-primary: #2f9e52;
+  --brand-on-primary: #04241b;
+  --primary: var(--brand-primary);
+  --primary-foreground: var(--brand-on-primary);
+  --destructive: #ff6b6b;
+  --ring: var(--brand-primary);
+  --chart-1: var(--brand-primary);
+  --chart-2: #8fd82a;
+  --chart-3: #cbf39d;
+  --chart-4: #e0b34a;
+  --chart-5: #0b6644;
+  --sidebar-foreground: #f0f2f1;
+  --sidebar-primary: var(--brand-primary);
+  --sidebar-primary-foreground: var(--brand-on-primary);
+  --sidebar-accent-foreground: #f0f2f1;
+  --sidebar-ring: var(--brand-primary);
+  --surface-0: var(--background);
+  --surface-1: var(--card);
+  --surface-2: var(--popover);
+  --success: #8fd82a;
+  --success-fg: #a6e34d;
+  --success-bg: rgba(143, 216, 42, 0.1);
+  --success-border: rgba(143, 216, 42, 0.35);
+  --warning: #f0c34e;
+  --warning-fg: #f0c34e;
+  --warning-bg: rgba(240, 195, 78, 0.1);
+  --warning-border: rgba(240, 195, 78, 0.35);
+  --info: #2f9e52;
+  --info-fg: #5cbb79;
+  --info-bg: rgba(47, 158, 82, 0.14);
+  --info-border: rgba(47, 158, 82, 0.4);
+  --danger: #ff6b6b;
+  --danger-fg: #ff8a8a;
+  --danger-bg: rgba(255, 107, 107, 0.1);
+  --danger-border: rgba(255, 107, 107, 0.35);
+}
+
+/* Light: neutral ground, green accent */
+[data-mode="light"] {
+  color-scheme: light;
+  --background: #fafaf9;
+  --card: #ffffff;
+  --popover: #ffffff;
+  --secondary: #f1f1f0;
+  --muted: #f1f1f0;
+  --accent: #f3ebe5;
+  --muted-foreground: #5c5b58;
+  --border: #dfdedc;
+  --input: #dfdedc;
+  --sidebar: #f4f3f1;
+  --sidebar-accent: #f3ebe5;
+  --sidebar-border: #dfdedc;
+  --foreground: #1e1d1b;
+  --card-foreground: #1e1d1b;
+  --popover-foreground: #1e1d1b;
+  --secondary-foreground: #1e1d1b;
+  --accent-foreground: #1e1d1b;
+  --brand-primary: #26803f;
+  --brand-on-primary: #f3fbf7;
+  --primary: var(--brand-primary);
+  --primary-foreground: var(--brand-on-primary);
+  --destructive: #d40c1a;
+  --ring: var(--brand-primary);
+  --chart-1: var(--brand-primary);
+  --chart-2: #5c9c1a;
+  --chart-3: #8a7a5c;
+  --chart-4: #b8860b;
+  --chart-5: #26803f;
+  --sidebar-foreground: #1e1d1b;
+  --sidebar-primary: var(--brand-primary);
+  --sidebar-primary-foreground: var(--brand-on-primary);
+  --sidebar-accent-foreground: #1e1d1b;
+  --sidebar-ring: var(--brand-primary);
+  --surface-0: var(--background);
+  --surface-1: var(--card);
+  --surface-2: var(--popover);
+  --success: #508d23;
+  --success-fg: #305a12;
+  --success-bg: #e3f5da;
+  --success-border: #b4d7a2;
+  --warning: #cb7a00;
+  --warning-fg: #824c12;
+  --warning-bg: #fef0d4;
+  --warning-border: #e8c184;
+  --info: #2f8543;
+  --info-fg: #1b622d;
+  --info-bg: #e2f4e3;
+  --info-border: #acd8b1;
+  --danger: #df2225;
+  --danger-fg: #bb0916;
+  --danger-bg: #ffeae9;
+  --danger-border: #ffb1aa;
+}
+
+/* Ground: Black (dark) */
+[data-mode="dark"][data-ground="black"] {
+  --background: #000000;
+  --card: #0a0a0a;
+  --popover: #141414;
+  --secondary: #161616;
+  --muted: #111111;
+  --accent: #1b1b1b;
+  --muted-foreground: #848b88;
+  --border: rgba(255, 255, 255, 0.1);
+  --input: rgba(255, 255, 255, 0.1);
+  --sidebar: var(--brand-sidebar, #0a0a0a);
+  --sidebar-accent: color-mix(in oklab, var(--primary) 16%, transparent);
+  --sidebar-border: rgba(255, 255, 255, 0.08);
+}
+
+/* Ground: Charcoal (dark) */
+[data-mode="dark"][data-ground="charcoal"] {
+  --background: #0e0f10;
+  --card: #161819;
+  --popover: #1e2022;
+  --secondary: #202325;
+  --muted: #191b1c;
+  --accent: #232628;
+  --muted-foreground: #8b9194;
+  --border: rgba(255, 255, 255, 0.1);
+  --input: rgba(255, 255, 255, 0.1);
+  --sidebar: var(--brand-sidebar, #161819);
+  --sidebar-accent: color-mix(in oklab, var(--primary) 16%, transparent);
+  --sidebar-border: rgba(255, 255, 255, 0.08);
+}
+
+/* Ground: Graphite (dark) */
+[data-mode="dark"][data-ground="graphite"] {
+  --background: #111214;
+  --card: #18191b;
+  --popover: #202124;
+  --secondary: #222326;
+  --muted: #1b1c1e;
+  --accent: #26272a;
+  --muted-foreground: #8e9296;
+  --border: rgba(255, 255, 255, 0.09);
+  --input: rgba(255, 255, 255, 0.1);
+  --sidebar: #161719;
+  --sidebar-accent: color-mix(in oklab, var(--primary) 14%, transparent);
+  --sidebar-border: rgba(255, 255, 255, 0.07);
+}
+
+/* Ground: Emerald (dark) */
+[data-mode="dark"][data-ground="emerald"] {
+  --background: #050b08;
+  --card: #0a1310;
+  --popover: #0d1814;
+  --secondary: #121d18;
+  --muted: #101a15;
+  --accent: #16261f;
+  --muted-foreground: #8ba199;
+  --border: rgba(255, 255, 255, 0.1);
+  --input: rgba(255, 255, 255, 0.1);
+  --sidebar: var(--brand-sidebar, #0a1310);
+  --sidebar-accent: color-mix(in oklab, var(--primary) 16%, transparent);
+  --sidebar-border: rgba(255, 255, 255, 0.08);
+}
+
+/* Ground: Paper (light) */
+[data-mode="light"][data-ground="paper"] {
+  --background: #faf6ee;
+  --card: #fffdf9;
+  --popover: #fffdf9;
+  --secondary: #f3eee4;
+  --muted: #f3eee4;
+  --accent: #f0e6da;
+  --muted-foreground: #5c5b58;
+  --border: #dedad2;
+  --input: #dedad2;
+  --sidebar: #f5f0e4;
+  --sidebar-accent: #f0e6da;
+  --sidebar-border: #dedad2;
+}
+
+/* Ground: Mist (light) */
+[data-mode="light"][data-ground="mist"] {
+  --background: #f2f7f9;
+  --card: #ffffff;
+  --popover: #ffffff;
+  --secondary: #e9eff2;
+  --muted: #e9eff2;
+  --accent: #dfeaf0;
+  --muted-foreground: #5c5b58;
+  --border: #d6dcdf;
+  --input: #d6dcdf;
+  --sidebar: #e9f1f5;
+  --sidebar-accent: #dfeaf0;
+  --sidebar-border: #d6dcdf;
+}
+
+/* Accent: Green (dark) */
+[data-mode="dark"][data-accent="green"] {
+  --brand-primary: #2f9e52;
+  --brand-on-primary: #04241b;
+}
+
+/* Accent: Green (light) */
+[data-mode="light"][data-accent="green"] {
+  --brand-primary: #26803f;
+  --brand-on-primary: #f3fbf7;
+}
+
+/* Accent: Copper (dark) */
+[data-mode="dark"][data-accent="copper"] {
+  --brand-primary: #c97b4a;
+  --brand-on-primary: #140a04;
+  --chart-3: #d9c7a3;
+  --chart-5: #2f9e52;
+}
+
+/* Accent: Copper (light) */
+[data-mode="light"][data-accent="copper"] {
+  --brand-primary: #9c5730;
+  --brand-on-primary: #f3fbf7;
+}
+
+/* Accent: Ice (dark) */
+[data-mode="dark"][data-accent="ice"] {
+  --brand-primary: #6e9fc4;
+  --brand-on-primary: #06131c;
+  --chart-3: #b9d4e4;
+  --chart-5: #2f9e52;
+}
+
+/* Accent: Ice (light) */
+[data-mode="light"][data-accent="ice"] {
+  --brand-primary: #3d6f95;
+  --brand-on-primary: #f3fbf7;
+}
+
+/* Accent: Periwinkle (dark) */
+[data-mode="dark"][data-accent="periwinkle"] {
+  --brand-primary: #8b8fd9;
+  --brand-on-primary: #0b0c1a;
+  --chart-3: #c3c5ec;
+  --chart-5: #2f9e52;
+}
+
+/* Accent: Periwinkle (light) */
+[data-mode="light"][data-accent="periwinkle"] {
+  --brand-primary: #5a5fae;
+  --brand-on-primary: #f3fbf7;
+}
+
+/* Accent: Amber (dark) */
+[data-mode="dark"][data-accent="amber"] {
+  --brand-primary: #e0b34a;
+  --brand-on-primary: #1a1204;
+  --chart-4: #c97b4a;
+}
+
+/* Accent: Amber (light) */
+[data-mode="light"][data-accent="amber"] {
+  --brand-primary: #8a6410;
+  --brand-on-primary: #f3fbf7;
+}
+
+/* Density: Compact, dense rows with hairline dividers */
+:root,
+[data-density="compact"] {
+  --row-pad-y: 0.5rem;
+  --row-pad-x: 0.75rem;
+  --stack-gap: 0.75rem;
+  --panel-pad: 1rem;
+  --list-columns: minmax(0, 1fr);
+  --list-gap: 0px;
+  --list-frame-border: 1px;
+  --list-frame-radius: var(--radius);
+  --list-item-border: 0px;
+  --list-item-radius: 0px;
+  --list-item-bg: transparent;
+  --list-item-pad: var(--row-pad-y) var(--row-pad-x);
+  --list-item-direction: row;
+  --list-item-align: center;
+  --list-item-trail: auto;
+}
+
+/* Density: Cards, boxed items that flow into columns */
+[data-density="cards"] {
+  --row-pad-y: 0.9rem;
+  --row-pad-x: 1rem;
+  --stack-gap: 1rem;
+  --panel-pad: 1.25rem;
+  --list-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
+  --list-gap: var(--stack-gap);
+  --list-frame-border: 0px;
+  --list-frame-radius: 0px;
+  --list-item-border: 1px;
+  --list-item-radius: var(--radius);
+  --list-item-bg: var(--card);
+  --list-item-pad: var(--panel-pad);
+  --list-item-direction: column;
+  --list-item-align: stretch;
+  --list-item-trail: 0px;
+}

package/dist/theme/contrast.d.ts

@@ -0,0 +1,8 @@
+/** Relative luminance of a `#rrggbb` colour (WCAG 2.2). */
+export declare function luminance(hex: string): number;
+/** The WCAG contrast ratio between two `#rrggbb` colours, 1 to 21. */
+export declare function contrastRatio(a: string, b: string): number;
+/** WCAG 2.2 §1.4.11: a control or a status mark stands 3:1 off what it sits on. */
+export declare const MIN_NON_TEXT_CONTRAST = 3;
+/** WCAG 2.2 §1.4.3: body text stands 4.5:1 off its background. */
+export declare const MIN_TEXT_CONTRAST = 4.5;

package/dist/theme/contrast.js

@@ -0,0 +1,18 @@
+/** Relative luminance of a `#rrggbb` colour (WCAG 2.2). */
+export function luminance(hex) {
+    const n = parseInt(hex.slice(1), 16);
+    const [r, g, b] = [(n >> 16) & 255, (n >> 8) & 255, n & 255].map((c) => {
+        const s = c / 255;
+        return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+    });
+    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+/** The WCAG contrast ratio between two `#rrggbb` colours, 1 to 21. */
+export function contrastRatio(a, b) {
+    const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x);
+    return (hi + 0.05) / (lo + 0.05);
+}
+/** WCAG 2.2 §1.4.11: a control or a status mark stands 3:1 off what it sits on. */
+export const MIN_NON_TEXT_CONTRAST = 3;
+/** WCAG 2.2 §1.4.3: body text stands 4.5:1 off its background. */
+export const MIN_TEXT_CONTRAST = 4.5;

package/dist/theme/css.d.ts

@@ -0,0 +1,23 @@
+import { type Mode } from "./tokens.js";
+type Declarations = readonly (readonly [property: string, value: string])[];
+/** The accent tokens one accent paints in one mode. */
+export declare function accentDeclarations(mode: Mode, accent: {
+    dark: string;
+    onDark: string;
+    light: string;
+    onLight: string;
+}, chart?: Partial<Record<string, string>>): Declarations;
+/** The whole of theme.css. */
+export declare function renderThemeCss(): string;
+/** The brand tokens a product adds on top of theme.css: its sidebar, and its own accent when it has one. */
+export declare function renderProductCss(product: {
+    sidebar: string;
+    brandAccent?: {
+        key: string;
+        dark: string;
+        onDark: string;
+        light: string;
+        onLight: string;
+    } | null;
+}): string;
+export {};

package/dist/theme/css.js

@@ -0,0 +1,116 @@
+import { ACCENTS, ACCENT_KEYS, BASE_SURFACES, DEFAULT_ACCENT, DENSITIES, GROUNDS, GROUND_KEYS, MODE_TOKENS, STATIC_TOKENS, SURFACES, } from "./tokens.js";
+const STATUS_NAMES = ["success", "warning", "info", "danger"];
+function block(selector, declarations, comment) {
+    const head = comment ? `/* ${comment} */\n` : "";
+    const body = declarations.map(([property, value]) => `  ${property}: ${value};`).join("\n");
+    return `${head}${selector} {\n${body}\n}`;
+}
+function surfaceDeclarations(s) {
+    return [
+        ["--background", s.background],
+        ["--card", s.card],
+        ["--popover", s.popover],
+        ["--secondary", s.secondary],
+        ["--muted", s.muted],
+        ["--accent", s.accent],
+        ["--muted-foreground", s.mutedForeground],
+        ["--border", s.border],
+        ["--input", s.input],
+        ["--sidebar", s.sidebar === "brand" ? `var(--brand-sidebar, ${s.card})` : s.sidebar],
+        ["--sidebar-accent", s.sidebarAccent],
+        ["--sidebar-border", s.sidebarBorder],
+    ];
+}
+function modeDeclarations(mode) {
+    const m = MODE_TOKENS[mode];
+    const accent = ACCENTS[DEFAULT_ACCENT];
+    return [
+        ["color-scheme", mode],
+        ...surfaceDeclarations(BASE_SURFACES[mode]),
+        ["--foreground", m.foreground],
+        ["--card-foreground", m.foreground],
+        ["--popover-foreground", m.foreground],
+        ["--secondary-foreground", m.foreground],
+        ["--accent-foreground", m.foreground],
+        ["--brand-primary", mode === "dark" ? accent.dark : accent.light],
+        ["--brand-on-primary", mode === "dark" ? accent.onDark : accent.onLight],
+        ["--primary", "var(--brand-primary)"],
+        ["--primary-foreground", "var(--brand-on-primary)"],
+        ["--destructive", m.destructive],
+        ["--ring", "var(--brand-primary)"],
+        ["--chart-1", "var(--brand-primary)"],
+        ...Object.entries(m.chart).map(([key, value]) => [`--${key}`, value]),
+        ["--sidebar-foreground", m.sidebarForeground],
+        ["--sidebar-primary", "var(--brand-primary)"],
+        ["--sidebar-primary-foreground", "var(--brand-on-primary)"],
+        ["--sidebar-accent-foreground", m.foreground],
+        ["--sidebar-ring", "var(--brand-primary)"],
+        ["--surface-0", "var(--background)"],
+        ["--surface-1", "var(--card)"],
+        ["--surface-2", "var(--popover)"],
+        ...STATUS_NAMES.flatMap((name) => {
+            const s = m.status[name];
+            return [
+                [`--${name}`, s.base],
+                [`--${name}-fg`, s.fg],
+                [`--${name}-bg`, s.bg],
+                [`--${name}-border`, s.border],
+            ];
+        }),
+    ];
+}
+/** The accent tokens one accent paints in one mode. */
+export function accentDeclarations(mode, accent, chart) {
+    return [
+        ["--brand-primary", mode === "dark" ? accent.dark : accent.light],
+        ["--brand-on-primary", mode === "dark" ? accent.onDark : accent.onLight],
+        ...Object.entries(chart ?? {}).map(([key, value]) => [`--${key}`, value ?? ""]),
+    ];
+}
+const HEADER = `/*
+ * @calliopelabs/ui theme tokens.
+ * Generated by \`npm run theme\` from src/theme/tokens.ts. Do not edit by hand.
+ *
+ * The appearance axes ride on attributes of <html>, set before first paint by
+ * AppearanceScript and kept in step by AppearanceProvider:
+ *   data-mode     dark | light (follows the ground)
+ *   data-ground   the surface ramp
+ *   data-accent   a family accent, the product's brand accent, or custom
+ *   data-density  compact | cards (any element may carry its own)
+ *   --radius      the corners setting, inline
+ * Semantic status tokens are defined per mode only: no ground and no accent
+ * may change what ok, warn, info or error look like.
+ */`;
+/** The whole of theme.css. */
+export function renderThemeCss() {
+    const blocks = [HEADER];
+    blocks.push(block(":root", Object.entries(STATIC_TOKENS).map(([key, value]) => [`--${key}`, value]), "Mode-independent tokens"));
+    blocks.push(block(':root,\n[data-mode="dark"]', modeDeclarations("dark"), "Dark: black ground, green accent"));
+    blocks.push(block('[data-mode="light"]', modeDeclarations("light"), "Light: neutral ground, green accent"));
+    for (const ground of GROUND_KEYS) {
+        const { mode, label } = GROUNDS[ground];
+        blocks.push(block(`[data-mode="${mode}"][data-ground="${ground}"]`, surfaceDeclarations(SURFACES[ground]), `Ground: ${label} (${mode})`));
+    }
+    for (const key of ACCENT_KEYS) {
+        const accent = ACCENTS[key];
+        const chart = "chart" in accent ? accent.chart : {};
+        for (const mode of ["dark", "light"]) {
+            blocks.push(block(`[data-mode="${mode}"][data-accent="${key}"]`, accentDeclarations(mode, accent, chart[mode]), `Accent: ${accent.label} (${mode})`));
+        }
+    }
+    blocks.push(block(':root,\n[data-density="compact"]', Object.entries(DENSITIES.compact.tokens).map(([key, value]) => [`--${key}`, value]), `Density: ${DENSITIES.compact.label}, ${DENSITIES.compact.hint.toLowerCase()}`));
+    blocks.push(block('[data-density="cards"]', Object.entries(DENSITIES.cards.tokens).map(([key, value]) => [`--${key}`, value]), `Density: ${DENSITIES.cards.label}, ${DENSITIES.cards.hint.toLowerCase()}`));
+    return `${blocks.join("\n\n")}\n`;
+}
+/** The brand tokens a product adds on top of theme.css: its sidebar, and its own accent when it has one. */
+export function renderProductCss(product) {
+    const inline = (selector, declarations) => `${selector}{${declarations.map(([property, value]) => `${property}:${value}`).join(";")}}`;
+    const rules = [inline(":root", [["--brand-sidebar", product.sidebar]])];
+    const accent = product.brandAccent;
+    if (accent) {
+        for (const mode of ["dark", "light"]) {
+            rules.push(inline(`[data-mode="${mode}"][data-accent="${accent.key}"]`, accentDeclarations(mode, accent)));
+        }
+    }
+    return rules.join("");
+}