@calliopelabs/ui 0.0.0-stage → 0.1.0

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("");
+}

package/dist/theme/tokens.d.ts

@@ -0,0 +1,195 @@
+/**
+ * The Calliope AI operator palette: one table, and the source of
+ * `src/styles/theme.css` (`npm run theme`). Every value here is either a
+ * ground (the surface ramp), a family accent (action colour and the lead
+ * chart series), a semantic status, or a density step.
+ *
+ * Values come from the Astrolift frontend (`app/globals.css`, origin/main
+ * 8edb40d) and the operator-UI amendment of 2026-08-21: grounds are black
+ * and neutral, the sidebar is the one brand surface, corners are 2px, a
+ * second hue is allowed as accent, and semantic status never moves with the
+ * accent or the ground's tint. Astrolift's light values were oklch; they are
+ * stored here as the sRGB they render to, so the contrast tests can read
+ * them. One value changed on the way: light `warning` went from
+ * oklch(0.66 0.16 70) to oklch(0.65 0.16 70) so a warning dot clears 3:1 on
+ * paper and mist.
+ */
+export type Mode = "dark" | "light";
+export declare const GROUNDS: {
+    readonly black: {
+        readonly label: "Black";
+        readonly mode: "dark";
+    };
+    readonly charcoal: {
+        readonly label: "Charcoal";
+        readonly mode: "dark";
+    };
+    readonly graphite: {
+        readonly label: "Graphite";
+        readonly mode: "dark";
+    };
+    readonly emerald: {
+        readonly label: "Emerald";
+        readonly mode: "dark";
+    };
+    readonly paper: {
+        readonly label: "Paper";
+        readonly mode: "light";
+    };
+    readonly mist: {
+        readonly label: "Mist";
+        readonly mode: "light";
+    };
+};
+export type Ground = keyof typeof GROUNDS;
+export declare const GROUND_KEYS: Ground[];
+/**
+ * The surfaces a ground paints. `sidebar: "brand"` means the product's brand
+ * surface (`--brand-sidebar`, set by the product), falling back to the
+ * ground's own card colour when no product is set. Graphite and the light
+ * grounds keep a neutral sidebar whatever the product, so the brand colour
+ * is spent on the accent there (Astrolift #2286).
+ */
+export interface Surfaces {
+    background: string;
+    card: string;
+    popover: string;
+    secondary: string;
+    muted: string;
+    /** shadcn's name for the hover and selected surface, not the brand accent. */
+    accent: string;
+    mutedForeground: string;
+    border: string;
+    input: string;
+    sidebar: "brand" | string;
+    sidebarAccent: string;
+    sidebarBorder: string;
+}
+export declare const SURFACES: Record<Ground, Surfaces>;
+/**
+ * What a mode paints before a ground refines it: dark starts on black, light
+ * on a neutral white. Every shipped ground overrides these surfaces, so the
+ * light set only shows when no ground is set.
+ */
+export declare const BASE_SURFACES: Record<Mode, Surfaces>;
+export type StatusName = "success" | "warning" | "info" | "danger";
+/**
+ * A status paints four tokens: the solid base (dots, icons, chart series),
+ * `fg` (text and icons on the status tint), `bg` (a subtle callout fill) and
+ * `border` (the tinted hairline). Defined per mode only: no ground and no
+ * accent may redefine them. Info is green; the family permits no blue.
+ */
+export interface StatusTokens {
+    base: string;
+    fg: string;
+    bg: string;
+    border: string;
+}
+export interface ModeTokens {
+    foreground: string;
+    destructive: string;
+    /** chart-1 is always the accent; these are series two to five. */
+    chart: {
+        "chart-2": string;
+        "chart-3": string;
+        "chart-4": string;
+        "chart-5": string;
+    };
+    sidebarForeground: string;
+    status: Record<StatusName, StatusTokens>;
+}
+export declare const MODE_TOKENS: Record<Mode, ModeTokens>;
+/**
+ * The family accents: the action colour, focus ring and lead chart series.
+ * `dark` and `light` are the accent on each mode's grounds; `onDark` and
+ * `onLight` are the ink on a filled accent. A product may add its own brand
+ * accent beside these (Zentinelle teal); none of them reaches status.
+ */
+export interface AccentSpec {
+    label: string;
+    dark: string;
+    onDark: string;
+    light: string;
+    onLight: string;
+    /** Chart series moved so they do not collide with this accent. */
+    chart?: Partial<Record<Mode, Partial<ModeTokens["chart"]>>>;
+}
+export declare const ACCENTS: {
+    readonly green: {
+        readonly label: "Green";
+        readonly dark: "#2f9e52";
+        readonly onDark: "#04241b";
+        readonly light: "#26803f";
+        readonly onLight: "#f3fbf7";
+    };
+    readonly copper: {
+        readonly label: "Copper";
+        readonly dark: "#c97b4a";
+        readonly onDark: "#140a04";
+        readonly light: "#9c5730";
+        readonly onLight: "#f3fbf7";
+        readonly chart: {
+            readonly dark: {
+                readonly "chart-3": "#d9c7a3";
+                readonly "chart-5": "#2f9e52";
+            };
+        };
+    };
+    readonly ice: {
+        readonly label: "Ice";
+        readonly dark: "#6e9fc4";
+        readonly onDark: "#06131c";
+        readonly light: "#3d6f95";
+        readonly onLight: "#f3fbf7";
+        readonly chart: {
+            readonly dark: {
+                readonly "chart-3": "#b9d4e4";
+                readonly "chart-5": "#2f9e52";
+            };
+        };
+    };
+    readonly periwinkle: {
+        readonly label: "Periwinkle";
+        readonly dark: "#8b8fd9";
+        readonly onDark: "#0b0c1a";
+        readonly light: "#5a5fae";
+        readonly onLight: "#f3fbf7";
+        readonly chart: {
+            readonly dark: {
+                readonly "chart-3": "#c3c5ec";
+                readonly "chart-5": "#2f9e52";
+            };
+        };
+    };
+    readonly amber: {
+        readonly label: "Amber";
+        readonly dark: "#e0b34a";
+        readonly onDark: "#1a1204";
+        readonly light: "#8a6410";
+        readonly onLight: "#f3fbf7";
+        readonly chart: {
+            readonly dark: {
+                readonly "chart-4": "#c97b4a";
+            };
+        };
+    };
+};
+export type FamilyAccent = keyof typeof ACCENTS;
+export declare const ACCENT_KEYS: FamilyAccent[];
+/** The accent a mode paints when nothing chooses one. */
+export declare const DEFAULT_ACCENT: FamilyAccent;
+export type Density = "compact" | "cards";
+/**
+ * Density is a layout axis, not padding (operator-UI amendment): `compact`
+ * is one panel of hairline rows, `cards` boxes items and flows them into
+ * responsive columns. Components read these variables, and a subtree can
+ * carry its own `data-density`, so the nearest one wins.
+ */
+export declare const DENSITIES: Record<Density, {
+    label: string;
+    hint: string;
+    tokens: Record<string, string>;
+}>;
+export declare const DENSITY_KEYS: Density[];
+/** Mode-independent tokens. `--radius` is the corners setting (2px shipped). */
+export declare const STATIC_TOKENS: Record<string, string>;