@calliopelabs/ui 0.12.0 → 0.14.0

package/dist/theme/mappings/targets.js

@@ -0,0 +1,222 @@
+import { STATIC_TOKENS } from "../tokens.js";
+import { COLOR_TOKENS, FONTS } from "./palette.js";
+/**
+ * JupyterLab theme variables (`@jupyterlab/theme-light-extension` and
+ * `theme-dark-extension`, `style/variables.css`). Layout colours run from
+ * the page (0) outwards; font colours from strongest (0) to faintest (3);
+ * brand and state colours from the strong end (0, 1) to the pale tint (3).
+ * Left alone: syntax colours (`--jp-mirror-editor-*`), the search
+ * highlight, collaborator and completer colours, and the red "warn" button
+ * set, whose white label the family's dark danger red cannot carry.
+ */
+export const JUPYTERLAB = [
+    { variable: "--jp-layout-color0", token: "background", note: "Main area and notebook" },
+    { variable: "--jp-layout-color1", token: "card", note: "Panels, active tab, toolbars" },
+    { variable: "--jp-layout-color2", token: "secondary", note: "Tab bar, side panel headers" },
+    { variable: "--jp-layout-color3", token: "accent", note: "The hover and selected surface" },
+    { variable: "--jp-layout-color4", token: "muted-foreground", note: "Strongest layout tone" },
+    { variable: "--jp-inverse-layout-color0", token: "foreground" },
+    { variable: "--jp-inverse-layout-color1", token: "foreground" },
+    { variable: "--jp-inverse-layout-color2", token: "muted-foreground" },
+    { variable: "--jp-inverse-layout-color3", token: "muted-foreground" },
+    { variable: "--jp-inverse-layout-color4", token: "muted-foreground" },
+    { variable: "--jp-border-color0", token: "input", note: "Inputs and cell borders" },
+    { variable: "--jp-border-color1", token: "border" },
+    { variable: "--jp-border-color2", token: "border" },
+    { variable: "--jp-border-color3", token: "sidebar-border", note: "The faintest hairline" },
+    { variable: "--jp-inverse-border-color", token: "muted-foreground" },
+    { variable: "--jp-ui-font-color0", token: "foreground" },
+    { variable: "--jp-ui-font-color1", token: "foreground" },
+    { variable: "--jp-ui-font-color2", token: "muted-foreground" },
+    { variable: "--jp-ui-font-color3", token: "muted-foreground", note: "No separate disabled ink" },
+    {
+        variable: "--jp-ui-inverse-font-color0",
+        token: "primary-foreground",
+        note: "Ink on brand fills",
+    },
+    { variable: "--jp-ui-inverse-font-color1", token: "primary-foreground" },
+    { variable: "--jp-ui-inverse-font-color2", token: "primary-foreground" },
+    { variable: "--jp-ui-inverse-font-color3", token: "primary-foreground" },
+    { variable: "--jp-content-font-color0", token: "foreground" },
+    { variable: "--jp-content-font-color1", token: "foreground" },
+    { variable: "--jp-content-font-color2", token: "muted-foreground" },
+    { variable: "--jp-content-font-color3", token: "muted-foreground" },
+    { variable: "--jp-content-link-color", token: "primary" },
+    { variable: "--jp-brand-color0", token: "primary" },
+    { variable: "--jp-brand-color1", token: "primary", note: "Active cell, focus, selection marks" },
+    { variable: "--jp-brand-color2", token: "primary" },
+    { variable: "--jp-brand-color3", token: "sidebar-accent", note: "The accent tint" },
+    { variable: "--jp-brand-color4", token: "sidebar-accent" },
+    { variable: "--jp-accent-color0", token: "chart-2", note: "The family's second series" },
+    { variable: "--jp-accent-color1", token: "chart-2" },
+    { variable: "--jp-accent-color2", token: "chart-2" },
+    { variable: "--jp-accent-color3", token: "chart-2" },
+    ...[
+        ["warn", "warning"],
+        ["error", "danger"],
+        ["success", "success"],
+        ["info", "info"],
+    ].flatMap(([jp, status]) => [
+        { variable: `--jp-${jp}-color0`, token: `${status}-fg`, note: "Text" },
+        { variable: `--jp-${jp}-color1`, token: status, note: "Marks" },
+        { variable: `--jp-${jp}-color2`, token: `${status}-border` },
+        { variable: `--jp-${jp}-color3`, token: `${status}-bg`, note: "Fills" },
+    ]),
+    { variable: "--jp-cell-editor-background", token: "muted" },
+    { variable: "--jp-cell-editor-border-color", token: "border" },
+    { variable: "--jp-cell-editor-active-background", token: "card" },
+    { variable: "--jp-cell-editor-active-border-color", token: "ring" },
+    { variable: "--jp-cell-inprompt-font-color", token: "primary" },
+    { variable: "--jp-cell-outprompt-font-color", token: "chart-4" },
+    { variable: "--jp-notebook-select-background", token: "accent" },
+    { variable: "--jp-notebook-multiselected-color", token: "sidebar-accent" },
+    { variable: "--jp-rendermime-error-background", token: "danger-bg" },
+    { variable: "--jp-rendermime-table-row-background", token: "muted" },
+    { variable: "--jp-rendermime-table-row-hover-background", token: "accent" },
+    { variable: "--jp-toolbar-background", token: "card" },
+    { variable: "--jp-toolbar-border-color", token: "border" },
+    { variable: "--jp-toolbar-active-background", token: "accent" },
+    { variable: "--jp-input-background", token: "background" },
+    { variable: "--jp-input-active-background", token: "background" },
+    { variable: "--jp-input-hover-background", token: "secondary" },
+    { variable: "--jp-input-border-color", token: "input" },
+    { variable: "--jp-input-active-border-color", token: "ring" },
+    { variable: "--jp-input-active-box-shadow-color", token: "sidebar-accent" },
+    { variable: "--jp-editor-selected-background", token: "accent" },
+    { variable: "--jp-editor-selected-focused-background", token: "sidebar-accent" },
+    { variable: "--jp-editor-cursor-color", token: "foreground" },
+    { variable: "--jp-focus-outline-color", token: "ring" },
+    { variable: "--jp-accept-color-normal", token: "primary", note: "Primary dialog button" },
+    { variable: "--jp-accept-color-hover", token: "primary" },
+    { variable: "--jp-accept-color-active", token: "primary" },
+    { variable: "--jp-accept-color-foreground", token: "primary-foreground" },
+    { variable: "--jp-accept-outline-color", token: "ring" },
+    { variable: "--jp-reject-color-normal", token: "secondary", note: "Secondary dialog button" },
+    { variable: "--jp-reject-color-hover", token: "accent" },
+    { variable: "--jp-reject-color-active", token: "accent" },
+    { variable: "--jp-reject-color-foreground", token: "secondary-foreground" },
+    { variable: "--jp-reject-outline-color", token: "border" },
+];
+export const JUPYTERLAB_STATIC = [
+    { variable: "--jp-border-radius", value: STATIC_TOKENS.radius ?? "", from: "--radius" },
+    { variable: "--jp-ui-font-family", value: FONTS.sans, from: "--font-sans" },
+    { variable: "--jp-content-font-family", value: FONTS.sans, from: "--font-sans" },
+    { variable: "--jp-code-font-family", value: FONTS.mono, from: "--font-mono" },
+];
+/**
+ * VS Code theme colours as a webview sees them: `--vscode-` and the colour
+ * id with dots as dashes (https://code.visualstudio.com/api/references/theme-color).
+ * Inside VS Code the host sets these inline on <html>, so they win and the
+ * webview follows the editor's theme; outside it (a browser preview,
+ * Storybook, a test) these values stand in. Left alone: colours the family
+ * has no hue for (`charts.blue`, `charts.purple`, `charts.orange`) and
+ * scrollbars.
+ */
+export const VSCODE = [
+    { variable: "--vscode-foreground", token: "foreground" },
+    { variable: "--vscode-descriptionForeground", token: "muted-foreground" },
+    { variable: "--vscode-disabledForeground", token: "muted-foreground" },
+    { variable: "--vscode-errorForeground", token: "danger-fg" },
+    { variable: "--vscode-focusBorder", token: "ring" },
+    { variable: "--vscode-widget-border", token: "border" },
+    { variable: "--vscode-selection-background", token: "sidebar-accent", note: "The accent tint" },
+    { variable: "--vscode-icon-foreground", token: "foreground" },
+    { variable: "--vscode-textLink-foreground", token: "primary" },
+    { variable: "--vscode-textLink-activeForeground", token: "primary" },
+    { variable: "--vscode-textPreformat-foreground", token: "foreground" },
+    { variable: "--vscode-textBlockQuote-background", token: "muted" },
+    { variable: "--vscode-textCodeBlock-background", token: "muted" },
+    { variable: "--vscode-textSeparator-foreground", token: "border" },
+    { variable: "--vscode-editor-background", token: "background" },
+    { variable: "--vscode-editor-foreground", token: "foreground" },
+    { variable: "--vscode-editorWidget-background", token: "popover" },
+    { variable: "--vscode-editorWidget-foreground", token: "popover-foreground" },
+    { variable: "--vscode-editorWidget-border", token: "border" },
+    { variable: "--vscode-editorHoverWidget-background", token: "popover" },
+    { variable: "--vscode-editorHoverWidget-border", token: "border" },
+    { variable: "--vscode-editorError-foreground", token: "danger" },
+    { variable: "--vscode-editorWarning-foreground", token: "warning" },
+    { variable: "--vscode-editorInfo-foreground", token: "info" },
+    { variable: "--vscode-button-background", token: "primary" },
+    { variable: "--vscode-button-foreground", token: "primary-foreground" },
+    { variable: "--vscode-button-hoverBackground", token: "primary", note: "No separate hover fill" },
+    { variable: "--vscode-button-secondaryBackground", token: "secondary" },
+    { variable: "--vscode-button-secondaryForeground", token: "secondary-foreground" },
+    { variable: "--vscode-button-secondaryHoverBackground", token: "accent" },
+    { variable: "--vscode-input-background", token: "background" },
+    { variable: "--vscode-input-foreground", token: "foreground" },
+    { variable: "--vscode-input-border", token: "input" },
+    { variable: "--vscode-input-placeholderForeground", token: "muted-foreground" },
+    { variable: "--vscode-inputOption-activeBorder", token: "ring" },
+    ...[
+        ["error", "danger"],
+        ["warning", "warning"],
+        ["info", "info"],
+    ].flatMap(([kind, status]) => {
+        const name = `${kind[0]?.toUpperCase()}${kind.slice(1)}`;
+        return [
+            {
+                variable: `--vscode-inputValidation-${kind}Background`,
+                token: `${status}-bg`,
+            },
+            {
+                variable: `--vscode-inputValidation-${kind}Border`,
+                token: `${status}-border`,
+            },
+            { variable: `--vscode-notifications${name}Icon-foreground`, token: status },
+        ];
+    }),
+    { variable: "--vscode-dropdown-background", token: "popover" },
+    { variable: "--vscode-dropdown-foreground", token: "popover-foreground" },
+    { variable: "--vscode-dropdown-border", token: "input" },
+    { variable: "--vscode-checkbox-background", token: "background" },
+    { variable: "--vscode-checkbox-foreground", token: "foreground" },
+    { variable: "--vscode-checkbox-border", token: "input" },
+    { variable: "--vscode-badge-background", token: "secondary", note: "Neutral, like StatusBadge" },
+    { variable: "--vscode-badge-foreground", token: "secondary-foreground" },
+    { variable: "--vscode-progressBar-background", token: "primary" },
+    { variable: "--vscode-list-activeSelectionBackground", token: "accent" },
+    { variable: "--vscode-list-activeSelectionForeground", token: "accent-foreground" },
+    { variable: "--vscode-list-inactiveSelectionBackground", token: "secondary" },
+    { variable: "--vscode-list-hoverBackground", token: "accent" },
+    { variable: "--vscode-list-focusOutline", token: "ring" },
+    { variable: "--vscode-menu-background", token: "popover" },
+    { variable: "--vscode-menu-foreground", token: "popover-foreground" },
+    { variable: "--vscode-menu-selectionBackground", token: "accent" },
+    { variable: "--vscode-quickInput-background", token: "popover" },
+    { variable: "--vscode-quickInput-foreground", token: "popover-foreground" },
+    { variable: "--vscode-notifications-background", token: "popover" },
+    { variable: "--vscode-notifications-foreground", token: "popover-foreground" },
+    { variable: "--vscode-notifications-border", token: "border" },
+    { variable: "--vscode-sideBar-background", token: "sidebar" },
+    { variable: "--vscode-sideBar-foreground", token: "sidebar-foreground" },
+    { variable: "--vscode-sideBar-border", token: "sidebar-border" },
+    { variable: "--vscode-panel-background", token: "card" },
+    { variable: "--vscode-panel-border", token: "border" },
+    { variable: "--vscode-toolbar-hoverBackground", token: "accent" },
+    { variable: "--vscode-testing-iconPassed", token: "success" },
+    { variable: "--vscode-charts-foreground", token: "foreground" },
+    { variable: "--vscode-charts-lines", token: "border" },
+    { variable: "--vscode-charts-red", token: "danger" },
+    { variable: "--vscode-charts-yellow", token: "warning" },
+    { variable: "--vscode-charts-green", token: "success" },
+];
+export const VSCODE_STATIC = [
+    { variable: "--vscode-font-family", value: FONTS.sans, from: "--font-sans" },
+    { variable: "--vscode-editor-font-family", value: FONTS.mono, from: "--font-mono" },
+];
+/** Plain: every colour token under its own name, as concrete values. */
+export const PLAIN = COLOR_TOKENS.map((token) => ({
+    variable: `--${token}`,
+    token,
+}));
+export const PLAIN_STATIC = [
+    ...Object.entries(STATIC_TOKENS).map(([key, value]) => ({
+        variable: `--${key}`,
+        value,
+        from: `--${key}`,
+    })),
+    { variable: "--font-sans", value: FONTS.sans, from: "--font-sans" },
+    { variable: "--font-mono", value: FONTS.mono, from: "--font-mono" },
+    { variable: "--font-head", value: FONTS.head, from: "--font-head" },
+];

package/dist/theme/tokens.d.ts

@@ -1,8 +1,9 @@
 /**
- * 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.
+ * The Calliope AI operator palette, typed. Every value comes from the design
+ * tokens in `tokens/*.json` (through `tokens.generated.ts`, written by
+ * `npm run theme`); this file adds the names, labels and order the code needs.
+ * Every value 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
@@ -120,14 +121,13 @@ export interface AccentSpec {
 }
 export declare const ACCENTS: {
     readonly green: {
-        readonly label: "Green";
         readonly dark: "#2f9e52";
         readonly onDark: "#04241b";
         readonly light: "#26803f";
         readonly onLight: "#f3fbf7";
+        readonly label: "Green";
     };
     readonly copper: {
-        readonly label: "Copper";
         readonly dark: "#c97b4a";
         readonly onDark: "#140a04";
         readonly light: "#9c5730";
@@ -138,9 +138,9 @@ export declare const ACCENTS: {
                 readonly "chart-5": "#2f9e52";
             };
         };
+        readonly label: "Copper";
     };
     readonly ice: {
-        readonly label: "Ice";
         readonly dark: "#6e9fc4";
         readonly onDark: "#06131c";
         readonly light: "#3d6f95";
@@ -151,9 +151,9 @@ export declare const ACCENTS: {
                 readonly "chart-5": "#2f9e52";
             };
         };
+        readonly label: "Ice";
     };
     readonly periwinkle: {
-        readonly label: "Periwinkle";
         readonly dark: "#8b8fd9";
         readonly onDark: "#0b0c1a";
         readonly light: "#5a5fae";
@@ -164,9 +164,9 @@ export declare const ACCENTS: {
                 readonly "chart-5": "#2f9e52";
             };
         };
+        readonly label: "Periwinkle";
     };
     readonly amber: {
-        readonly label: "Amber";
         readonly dark: "#e0b34a";
         readonly onDark: "#1a1204";
         readonly light: "#8a6410";
@@ -176,6 +176,7 @@ export declare const ACCENTS: {
                 readonly "chart-4": "#c97b4a";
             };
         };
+        readonly label: "Amber";
     };
 };
 export type FamilyAccent = keyof typeof ACCENTS;

package/dist/theme/tokens.generated.d.ts

@@ -0,0 +1,353 @@
+export declare const TOKENS: {
+    readonly core: {
+        readonly radius: "2px";
+        readonly "motion-fast": "120ms";
+        readonly "motion-base": "200ms";
+        readonly "motion-slow": "320ms";
+    };
+    readonly mode: {
+        readonly dark: {
+            readonly surface: {
+                readonly background: "#000000";
+                readonly card: "#0a0a0a";
+                readonly popover: "#141414";
+                readonly secondary: "#161616";
+                readonly muted: "#111111";
+                readonly accent: "#1b1b1b";
+                readonly mutedForeground: "#848b88";
+                readonly border: "rgba(255, 255, 255, 0.1)";
+                readonly input: "rgba(255, 255, 255, 0.1)";
+                readonly sidebar: "brand";
+                readonly sidebarAccent: "color-mix(in oklab, var(--primary) 16%, transparent)";
+                readonly sidebarBorder: "rgba(255, 255, 255, 0.08)";
+            };
+            readonly foreground: "#f0f2f1";
+            readonly destructive: "#ff6b6b";
+            readonly chart: {
+                readonly "chart-2": "#8fd82a";
+                readonly "chart-3": "#cbf39d";
+                readonly "chart-4": "#e0b34a";
+                readonly "chart-5": "#0b6644";
+            };
+            readonly sidebarForeground: "#f0f2f1";
+            readonly status: {
+                readonly success: {
+                    readonly base: "#8fd82a";
+                    readonly fg: "#a6e34d";
+                    readonly bg: "rgba(143, 216, 42, 0.1)";
+                    readonly border: "rgba(143, 216, 42, 0.35)";
+                };
+                readonly warning: {
+                    readonly base: "#f0c34e";
+                    readonly fg: "#f0c34e";
+                    readonly bg: "rgba(240, 195, 78, 0.1)";
+                    readonly border: "rgba(240, 195, 78, 0.35)";
+                };
+                readonly info: {
+                    readonly base: "#2f9e52";
+                    readonly fg: "#5cbb79";
+                    readonly bg: "rgba(47, 158, 82, 0.14)";
+                    readonly border: "rgba(47, 158, 82, 0.4)";
+                };
+                readonly danger: {
+                    readonly base: "#ff6b6b";
+                    readonly fg: "#ff8a8a";
+                    readonly bg: "rgba(255, 107, 107, 0.1)";
+                    readonly border: "rgba(255, 107, 107, 0.35)";
+                };
+            };
+        };
+        readonly light: {
+            readonly surface: {
+                readonly background: "#fafaf9";
+                readonly card: "#ffffff";
+                readonly popover: "#ffffff";
+                readonly secondary: "#f1f1f0";
+                readonly muted: "#f1f1f0";
+                readonly accent: "#f3ebe5";
+                readonly mutedForeground: "#5c5b58";
+                readonly border: "#dfdedc";
+                readonly input: "#dfdedc";
+                readonly sidebar: "#f4f3f1";
+                readonly sidebarAccent: "#f3ebe5";
+                readonly sidebarBorder: "#dfdedc";
+            };
+            readonly foreground: "#1e1d1b";
+            readonly destructive: "#d40c1a";
+            readonly chart: {
+                readonly "chart-2": "#5c9c1a";
+                readonly "chart-3": "#8a7a5c";
+                readonly "chart-4": "#b8860b";
+                readonly "chart-5": "#26803f";
+            };
+            readonly sidebarForeground: "#1e1d1b";
+            readonly status: {
+                readonly success: {
+                    readonly base: "#508d23";
+                    readonly fg: "#305a12";
+                    readonly bg: "#e3f5da";
+                    readonly border: "#b4d7a2";
+                };
+                readonly warning: {
+                    readonly base: "#cb7a00";
+                    readonly fg: "#824c12";
+                    readonly bg: "#fef0d4";
+                    readonly border: "#e8c184";
+                };
+                readonly info: {
+                    readonly base: "#2f8543";
+                    readonly fg: "#1b622d";
+                    readonly bg: "#e2f4e3";
+                    readonly border: "#acd8b1";
+                };
+                readonly danger: {
+                    readonly base: "#df2225";
+                    readonly fg: "#bb0916";
+                    readonly bg: "#ffeae9";
+                    readonly border: "#ffb1aa";
+                };
+            };
+        };
+    };
+    readonly ground: {
+        readonly black: {
+            readonly background: "#000000";
+            readonly card: "#0a0a0a";
+            readonly popover: "#141414";
+            readonly secondary: "#161616";
+            readonly muted: "#111111";
+            readonly accent: "#1b1b1b";
+            readonly mutedForeground: "#848b88";
+            readonly border: "rgba(255, 255, 255, 0.1)";
+            readonly input: "rgba(255, 255, 255, 0.1)";
+            readonly sidebar: "brand";
+            readonly sidebarAccent: "color-mix(in oklab, var(--primary) 16%, transparent)";
+            readonly sidebarBorder: "rgba(255, 255, 255, 0.08)";
+        };
+        readonly charcoal: {
+            readonly background: "#0e0f10";
+            readonly card: "#161819";
+            readonly popover: "#1e2022";
+            readonly secondary: "#202325";
+            readonly muted: "#191b1c";
+            readonly accent: "#232628";
+            readonly mutedForeground: "#8b9194";
+            readonly border: "rgba(255, 255, 255, 0.1)";
+            readonly input: "rgba(255, 255, 255, 0.1)";
+            readonly sidebar: "brand";
+            readonly sidebarAccent: "color-mix(in oklab, var(--primary) 16%, transparent)";
+            readonly sidebarBorder: "rgba(255, 255, 255, 0.08)";
+        };
+        readonly graphite: {
+            readonly background: "#111214";
+            readonly card: "#18191b";
+            readonly popover: "#202124";
+            readonly secondary: "#222326";
+            readonly muted: "#1b1c1e";
+            readonly accent: "#26272a";
+            readonly mutedForeground: "#8e9296";
+            readonly border: "rgba(255, 255, 255, 0.09)";
+            readonly input: "rgba(255, 255, 255, 0.1)";
+            readonly sidebar: "#161719";
+            readonly sidebarAccent: "color-mix(in oklab, var(--primary) 14%, transparent)";
+            readonly sidebarBorder: "rgba(255, 255, 255, 0.07)";
+        };
+        readonly emerald: {
+            readonly background: "#050b08";
+            readonly card: "#0a1310";
+            readonly popover: "#0d1814";
+            readonly secondary: "#121d18";
+            readonly muted: "#101a15";
+            readonly accent: "#16261f";
+            readonly mutedForeground: "#8ba199";
+            readonly border: "rgba(255, 255, 255, 0.1)";
+            readonly input: "rgba(255, 255, 255, 0.1)";
+            readonly sidebar: "brand";
+            readonly sidebarAccent: "color-mix(in oklab, var(--primary) 16%, transparent)";
+            readonly sidebarBorder: "rgba(255, 255, 255, 0.08)";
+        };
+        readonly navy: {
+            readonly background: "#0b1120";
+            readonly card: "#152141";
+            readonly popover: "#1a284a";
+            readonly secondary: "#1d2b50";
+            readonly muted: "#182545";
+            readonly accent: "#213157";
+            readonly mutedForeground: "#97a6c2";
+            readonly border: "rgba(255, 255, 255, 0.1)";
+            readonly input: "rgba(255, 255, 255, 0.1)";
+            readonly sidebar: "brand";
+            readonly sidebarAccent: "color-mix(in oklab, var(--primary) 16%, transparent)";
+            readonly sidebarBorder: "rgba(255, 255, 255, 0.08)";
+        };
+        readonly paper: {
+            readonly background: "#faf6ee";
+            readonly card: "#fffdf9";
+            readonly popover: "#fffdf9";
+            readonly secondary: "#f3eee4";
+            readonly muted: "#f3eee4";
+            readonly accent: "#f0e6da";
+            readonly mutedForeground: "#5c5b58";
+            readonly border: "#dedad2";
+            readonly input: "#dedad2";
+            readonly sidebar: "#f5f0e4";
+            readonly sidebarAccent: "#f0e6da";
+            readonly sidebarBorder: "#dedad2";
+        };
+        readonly mist: {
+            readonly background: "#f2f7f9";
+            readonly card: "#ffffff";
+            readonly popover: "#ffffff";
+            readonly secondary: "#e9eff2";
+            readonly muted: "#e9eff2";
+            readonly accent: "#dfeaf0";
+            readonly mutedForeground: "#5c5b58";
+            readonly border: "#d6dcdf";
+            readonly input: "#d6dcdf";
+            readonly sidebar: "#e9f1f5";
+            readonly sidebarAccent: "#dfeaf0";
+            readonly sidebarBorder: "#d6dcdf";
+        };
+    };
+    readonly accent: {
+        readonly green: {
+            readonly dark: "#2f9e52";
+            readonly onDark: "#04241b";
+            readonly light: "#26803f";
+            readonly onLight: "#f3fbf7";
+        };
+        readonly 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 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 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 dark: "#e0b34a";
+            readonly onDark: "#1a1204";
+            readonly light: "#8a6410";
+            readonly onLight: "#f3fbf7";
+            readonly chart: {
+                readonly dark: {
+                    readonly "chart-4": "#c97b4a";
+                };
+            };
+        };
+    };
+    readonly density: {
+        readonly compact: {
+            readonly "row-pad-y": "0.5rem";
+            readonly "row-pad-x": "0.75rem";
+            readonly "stack-gap": "0.75rem";
+            readonly "panel-pad": "1rem";
+            readonly "list-columns": "minmax(0, 1fr)";
+            readonly "list-gap": "0px";
+            readonly "list-frame-border": "1px";
+            readonly "list-frame-radius": "var(--radius)";
+            readonly "list-item-border": "0px";
+            readonly "list-item-radius": "0px";
+            readonly "list-item-bg": "transparent";
+            readonly "list-item-pad": "var(--row-pad-y) var(--row-pad-x)";
+            readonly "list-item-direction": "row";
+            readonly "list-item-align": "center";
+            readonly "list-item-trail": "auto";
+        };
+        readonly cards: {
+            readonly "row-pad-y": "0.9rem";
+            readonly "row-pad-x": "1rem";
+            readonly "stack-gap": "1rem";
+            readonly "panel-pad": "1.25rem";
+            readonly "list-columns": "repeat(auto-fill, minmax(min(100%, 16rem), 1fr))";
+            readonly "list-gap": "var(--stack-gap)";
+            readonly "list-frame-border": "0px";
+            readonly "list-frame-radius": "0px";
+            readonly "list-item-border": "1px";
+            readonly "list-item-radius": "var(--radius)";
+            readonly "list-item-bg": "var(--card)";
+            readonly "list-item-pad": "var(--panel-pad)";
+            readonly "list-item-direction": "column";
+            readonly "list-item-align": "stretch";
+            readonly "list-item-trail": "0px";
+        };
+    };
+    readonly brand: {
+        readonly astrolift: {
+            readonly sidebar: "#04231a";
+        };
+        readonly zentinelle: {
+            readonly sidebar: "#0b0b19";
+            readonly accent: {
+                readonly dark: "#37efed";
+                readonly onDark: "#0b0b19";
+                readonly light: "#0d7470";
+                readonly onLight: "#f3fbf7";
+            };
+        };
+        readonly workbench: {
+            readonly sidebar: "#0e1730";
+            readonly accent: {
+                readonly dark: "#8fb8e8";
+                readonly onDark: "#0b1120";
+                readonly light: "#2f5d94";
+                readonly onLight: "#f3fbf7";
+            };
+        };
+        readonly "chat-studio": {
+            readonly sidebar: "#080808";
+            readonly accent: {
+                readonly dark: "#8ab4f8";
+                readonly onDark: "#0c0c0c";
+                readonly light: "#1d4ed8";
+                readonly onLight: "#ffffff";
+            };
+        };
+        readonly loadr: {
+            readonly sidebar: "#181825";
+            readonly accent: {
+                readonly dark: "#89b4fa";
+                readonly onDark: "#11111b";
+                readonly light: "#1e66f5";
+                readonly onLight: "#ffffff";
+            };
+        };
+        readonly cykick: {
+            readonly sidebar: "#07090e";
+            readonly accent: {
+                readonly dark: "#22d3ee";
+                readonly onDark: "#07090e";
+                readonly light: "#0e7490";
+                readonly onLight: "#ffffff";
+            };
+        };
+    };
+};