@calliopelabs/ui 0.12.0 → 0.14.0

package/dist/theme/tokens.generated.js

@@ -0,0 +1,357 @@
+/*
+ * @calliopelabs/ui design tokens, as TypeScript constants.
+ * Generated by `npm run theme` from tokens/*.json. Do not edit by hand.
+ */
+export const TOKENS = {
+    "core": {
+        "radius": "2px",
+        "motion-fast": "120ms",
+        "motion-base": "200ms",
+        "motion-slow": "320ms"
+    },
+    "mode": {
+        "dark": {
+            "surface": {
+                "background": "#000000",
+                "card": "#0a0a0a",
+                "popover": "#141414",
+                "secondary": "#161616",
+                "muted": "#111111",
+                "accent": "#1b1b1b",
+                "mutedForeground": "#848b88",
+                "border": "rgba(255, 255, 255, 0.1)",
+                "input": "rgba(255, 255, 255, 0.1)",
+                "sidebar": "brand",
+                "sidebarAccent": "color-mix(in oklab, var(--primary) 16%, transparent)",
+                "sidebarBorder": "rgba(255, 255, 255, 0.08)"
+            },
+            "foreground": "#f0f2f1",
+            "destructive": "#ff6b6b",
+            "chart": {
+                "chart-2": "#8fd82a",
+                "chart-3": "#cbf39d",
+                "chart-4": "#e0b34a",
+                "chart-5": "#0b6644"
+            },
+            "sidebarForeground": "#f0f2f1",
+            "status": {
+                "success": {
+                    "base": "#8fd82a",
+                    "fg": "#a6e34d",
+                    "bg": "rgba(143, 216, 42, 0.1)",
+                    "border": "rgba(143, 216, 42, 0.35)"
+                },
+                "warning": {
+                    "base": "#f0c34e",
+                    "fg": "#f0c34e",
+                    "bg": "rgba(240, 195, 78, 0.1)",
+                    "border": "rgba(240, 195, 78, 0.35)"
+                },
+                "info": {
+                    "base": "#2f9e52",
+                    "fg": "#5cbb79",
+                    "bg": "rgba(47, 158, 82, 0.14)",
+                    "border": "rgba(47, 158, 82, 0.4)"
+                },
+                "danger": {
+                    "base": "#ff6b6b",
+                    "fg": "#ff8a8a",
+                    "bg": "rgba(255, 107, 107, 0.1)",
+                    "border": "rgba(255, 107, 107, 0.35)"
+                }
+            }
+        },
+        "light": {
+            "surface": {
+                "background": "#fafaf9",
+                "card": "#ffffff",
+                "popover": "#ffffff",
+                "secondary": "#f1f1f0",
+                "muted": "#f1f1f0",
+                "accent": "#f3ebe5",
+                "mutedForeground": "#5c5b58",
+                "border": "#dfdedc",
+                "input": "#dfdedc",
+                "sidebar": "#f4f3f1",
+                "sidebarAccent": "#f3ebe5",
+                "sidebarBorder": "#dfdedc"
+            },
+            "foreground": "#1e1d1b",
+            "destructive": "#d40c1a",
+            "chart": {
+                "chart-2": "#5c9c1a",
+                "chart-3": "#8a7a5c",
+                "chart-4": "#b8860b",
+                "chart-5": "#26803f"
+            },
+            "sidebarForeground": "#1e1d1b",
+            "status": {
+                "success": {
+                    "base": "#508d23",
+                    "fg": "#305a12",
+                    "bg": "#e3f5da",
+                    "border": "#b4d7a2"
+                },
+                "warning": {
+                    "base": "#cb7a00",
+                    "fg": "#824c12",
+                    "bg": "#fef0d4",
+                    "border": "#e8c184"
+                },
+                "info": {
+                    "base": "#2f8543",
+                    "fg": "#1b622d",
+                    "bg": "#e2f4e3",
+                    "border": "#acd8b1"
+                },
+                "danger": {
+                    "base": "#df2225",
+                    "fg": "#bb0916",
+                    "bg": "#ffeae9",
+                    "border": "#ffb1aa"
+                }
+            }
+        }
+    },
+    "ground": {
+        "black": {
+            "background": "#000000",
+            "card": "#0a0a0a",
+            "popover": "#141414",
+            "secondary": "#161616",
+            "muted": "#111111",
+            "accent": "#1b1b1b",
+            "mutedForeground": "#848b88",
+            "border": "rgba(255, 255, 255, 0.1)",
+            "input": "rgba(255, 255, 255, 0.1)",
+            "sidebar": "brand",
+            "sidebarAccent": "color-mix(in oklab, var(--primary) 16%, transparent)",
+            "sidebarBorder": "rgba(255, 255, 255, 0.08)"
+        },
+        "charcoal": {
+            "background": "#0e0f10",
+            "card": "#161819",
+            "popover": "#1e2022",
+            "secondary": "#202325",
+            "muted": "#191b1c",
+            "accent": "#232628",
+            "mutedForeground": "#8b9194",
+            "border": "rgba(255, 255, 255, 0.1)",
+            "input": "rgba(255, 255, 255, 0.1)",
+            "sidebar": "brand",
+            "sidebarAccent": "color-mix(in oklab, var(--primary) 16%, transparent)",
+            "sidebarBorder": "rgba(255, 255, 255, 0.08)"
+        },
+        "graphite": {
+            "background": "#111214",
+            "card": "#18191b",
+            "popover": "#202124",
+            "secondary": "#222326",
+            "muted": "#1b1c1e",
+            "accent": "#26272a",
+            "mutedForeground": "#8e9296",
+            "border": "rgba(255, 255, 255, 0.09)",
+            "input": "rgba(255, 255, 255, 0.1)",
+            "sidebar": "#161719",
+            "sidebarAccent": "color-mix(in oklab, var(--primary) 14%, transparent)",
+            "sidebarBorder": "rgba(255, 255, 255, 0.07)"
+        },
+        "emerald": {
+            "background": "#050b08",
+            "card": "#0a1310",
+            "popover": "#0d1814",
+            "secondary": "#121d18",
+            "muted": "#101a15",
+            "accent": "#16261f",
+            "mutedForeground": "#8ba199",
+            "border": "rgba(255, 255, 255, 0.1)",
+            "input": "rgba(255, 255, 255, 0.1)",
+            "sidebar": "brand",
+            "sidebarAccent": "color-mix(in oklab, var(--primary) 16%, transparent)",
+            "sidebarBorder": "rgba(255, 255, 255, 0.08)"
+        },
+        "navy": {
+            "background": "#0b1120",
+            "card": "#152141",
+            "popover": "#1a284a",
+            "secondary": "#1d2b50",
+            "muted": "#182545",
+            "accent": "#213157",
+            "mutedForeground": "#97a6c2",
+            "border": "rgba(255, 255, 255, 0.1)",
+            "input": "rgba(255, 255, 255, 0.1)",
+            "sidebar": "brand",
+            "sidebarAccent": "color-mix(in oklab, var(--primary) 16%, transparent)",
+            "sidebarBorder": "rgba(255, 255, 255, 0.08)"
+        },
+        "paper": {
+            "background": "#faf6ee",
+            "card": "#fffdf9",
+            "popover": "#fffdf9",
+            "secondary": "#f3eee4",
+            "muted": "#f3eee4",
+            "accent": "#f0e6da",
+            "mutedForeground": "#5c5b58",
+            "border": "#dedad2",
+            "input": "#dedad2",
+            "sidebar": "#f5f0e4",
+            "sidebarAccent": "#f0e6da",
+            "sidebarBorder": "#dedad2"
+        },
+        "mist": {
+            "background": "#f2f7f9",
+            "card": "#ffffff",
+            "popover": "#ffffff",
+            "secondary": "#e9eff2",
+            "muted": "#e9eff2",
+            "accent": "#dfeaf0",
+            "mutedForeground": "#5c5b58",
+            "border": "#d6dcdf",
+            "input": "#d6dcdf",
+            "sidebar": "#e9f1f5",
+            "sidebarAccent": "#dfeaf0",
+            "sidebarBorder": "#d6dcdf"
+        }
+    },
+    "accent": {
+        "green": {
+            "dark": "#2f9e52",
+            "onDark": "#04241b",
+            "light": "#26803f",
+            "onLight": "#f3fbf7"
+        },
+        "copper": {
+            "dark": "#c97b4a",
+            "onDark": "#140a04",
+            "light": "#9c5730",
+            "onLight": "#f3fbf7",
+            "chart": {
+                "dark": {
+                    "chart-3": "#d9c7a3",
+                    "chart-5": "#2f9e52"
+                }
+            }
+        },
+        "ice": {
+            "dark": "#6e9fc4",
+            "onDark": "#06131c",
+            "light": "#3d6f95",
+            "onLight": "#f3fbf7",
+            "chart": {
+                "dark": {
+                    "chart-3": "#b9d4e4",
+                    "chart-5": "#2f9e52"
+                }
+            }
+        },
+        "periwinkle": {
+            "dark": "#8b8fd9",
+            "onDark": "#0b0c1a",
+            "light": "#5a5fae",
+            "onLight": "#f3fbf7",
+            "chart": {
+                "dark": {
+                    "chart-3": "#c3c5ec",
+                    "chart-5": "#2f9e52"
+                }
+            }
+        },
+        "amber": {
+            "dark": "#e0b34a",
+            "onDark": "#1a1204",
+            "light": "#8a6410",
+            "onLight": "#f3fbf7",
+            "chart": {
+                "dark": {
+                    "chart-4": "#c97b4a"
+                }
+            }
+        }
+    },
+    "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"
+        },
+        "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"
+        }
+    },
+    "brand": {
+        "astrolift": {
+            "sidebar": "#04231a"
+        },
+        "zentinelle": {
+            "sidebar": "#0b0b19",
+            "accent": {
+                "dark": "#37efed",
+                "onDark": "#0b0b19",
+                "light": "#0d7470",
+                "onLight": "#f3fbf7"
+            }
+        },
+        "workbench": {
+            "sidebar": "#0e1730",
+            "accent": {
+                "dark": "#8fb8e8",
+                "onDark": "#0b1120",
+                "light": "#2f5d94",
+                "onLight": "#f3fbf7"
+            }
+        },
+        "chat-studio": {
+            "sidebar": "#080808",
+            "accent": {
+                "dark": "#8ab4f8",
+                "onDark": "#0c0c0c",
+                "light": "#1d4ed8",
+                "onLight": "#ffffff"
+            }
+        },
+        "loadr": {
+            "sidebar": "#181825",
+            "accent": {
+                "dark": "#89b4fa",
+                "onDark": "#11111b",
+                "light": "#1e66f5",
+                "onLight": "#ffffff"
+            }
+        },
+        "cykick": {
+            "sidebar": "#07090e",
+            "accent": {
+                "dark": "#22d3ee",
+                "onDark": "#07090e",
+                "light": "#0e7490",
+                "onLight": "#ffffff"
+            }
+        }
+    }
+};

package/dist/theme/tokens.js

@@ -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
@@ -14,6 +15,7 @@
  * oklch(0.66 0.16 70) to oklch(0.65 0.16 70) so a warning dot clears 3:1 on
  * paper and mist.
  */
+import { TOKENS } from "./tokens.generated.js";
 export const GROUNDS = {
     black: { label: "Black", mode: "dark" },
     charcoal: { label: "Charcoal", mode: "dark" },
@@ -24,234 +26,25 @@ export const GROUNDS = {
     mist: { label: "Mist", mode: "light" },
 };
 export const GROUND_KEYS = Object.keys(GROUNDS);
-const PRIMARY_TINT_16 = "color-mix(in oklab, var(--primary) 16%, transparent)";
-const PRIMARY_TINT_14 = "color-mix(in oklab, var(--primary) 14%, transparent)";
-export const SURFACES = {
-    black: {
-        background: "#000000",
-        card: "#0a0a0a",
-        popover: "#141414",
-        secondary: "#161616",
-        muted: "#111111",
-        accent: "#1b1b1b",
-        mutedForeground: "#848b88",
-        border: "rgba(255, 255, 255, 0.1)",
-        input: "rgba(255, 255, 255, 0.1)",
-        sidebar: "brand",
-        sidebarAccent: PRIMARY_TINT_16,
-        sidebarBorder: "rgba(255, 255, 255, 0.08)",
-    },
-    charcoal: {
-        background: "#0e0f10",
-        card: "#161819",
-        popover: "#1e2022",
-        secondary: "#202325",
-        muted: "#191b1c",
-        accent: "#232628",
-        mutedForeground: "#8b9194",
-        border: "rgba(255, 255, 255, 0.1)",
-        input: "rgba(255, 255, 255, 0.1)",
-        sidebar: "brand",
-        sidebarAccent: PRIMARY_TINT_16,
-        sidebarBorder: "rgba(255, 255, 255, 0.08)",
-    },
-    graphite: {
-        background: "#111214",
-        card: "#18191b",
-        popover: "#202124",
-        secondary: "#222326",
-        muted: "#1b1c1e",
-        accent: "#26272a",
-        mutedForeground: "#8e9296",
-        border: "rgba(255, 255, 255, 0.09)",
-        input: "rgba(255, 255, 255, 0.1)",
-        sidebar: "#161719",
-        sidebarAccent: PRIMARY_TINT_14,
-        sidebarBorder: "rgba(255, 255, 255, 0.07)",
-    },
-    emerald: {
-        background: "#050b08",
-        card: "#0a1310",
-        popover: "#0d1814",
-        secondary: "#121d18",
-        muted: "#101a15",
-        accent: "#16261f",
-        mutedForeground: "#8ba199",
-        border: "rgba(255, 255, 255, 0.1)",
-        input: "rgba(255, 255, 255, 0.1)",
-        sidebar: "brand",
-        sidebarAccent: PRIMARY_TINT_16,
-        sidebarBorder: "rgba(255, 255, 255, 0.08)",
-    },
-    /*
-     * Workbench's navy, from JunoHub's palette: page #0b1120 and card
-     * rgba(22, 35, 69, 0.9) composited on the page, with the neutral hairlines
-     * every other dark ground uses. Its text colours are not carried over: foreground is per mode,
-     * and the hub's muted text (#e6e9ee) is not muted, so muted text is a
-     * navy-tinted grey that reads on every panel.
-     */
-    navy: {
-        background: "#0b1120",
-        card: "#152141",
-        popover: "#1a284a",
-        secondary: "#1d2b50",
-        muted: "#182545",
-        accent: "#213157",
-        mutedForeground: "#97a6c2",
-        border: "rgba(255, 255, 255, 0.1)",
-        input: "rgba(255, 255, 255, 0.1)",
-        sidebar: "brand",
-        sidebarAccent: PRIMARY_TINT_16,
-        sidebarBorder: "rgba(255, 255, 255, 0.08)",
-    },
-    paper: {
-        background: "#faf6ee",
-        card: "#fffdf9",
-        popover: "#fffdf9",
-        secondary: "#f3eee4",
-        muted: "#f3eee4",
-        accent: "#f0e6da",
-        mutedForeground: "#5c5b58",
-        border: "#dedad2",
-        input: "#dedad2",
-        sidebar: "#f5f0e4",
-        sidebarAccent: "#f0e6da",
-        sidebarBorder: "#dedad2",
-    },
-    mist: {
-        background: "#f2f7f9",
-        card: "#ffffff",
-        popover: "#ffffff",
-        secondary: "#e9eff2",
-        muted: "#e9eff2",
-        accent: "#dfeaf0",
-        mutedForeground: "#5c5b58",
-        border: "#d6dcdf",
-        input: "#d6dcdf",
-        sidebar: "#e9f1f5",
-        sidebarAccent: "#dfeaf0",
-        sidebarBorder: "#d6dcdf",
-    },
-};
+export const SURFACES = TOKENS.ground;
 /**
  * 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 const BASE_SURFACES = {
-    dark: SURFACES.black,
-    light: {
-        background: "#fafaf9",
-        card: "#ffffff",
-        popover: "#ffffff",
-        secondary: "#f1f1f0",
-        muted: "#f1f1f0",
-        accent: "#f3ebe5",
-        mutedForeground: "#5c5b58",
-        border: "#dfdedc",
-        input: "#dfdedc",
-        sidebar: "#f4f3f1",
-        sidebarAccent: "#f3ebe5",
-        sidebarBorder: "#dfdedc",
-    },
-};
-export const MODE_TOKENS = {
-    dark: {
-        foreground: "#f0f2f1",
-        destructive: "#ff6b6b",
-        chart: {
-            "chart-2": "#8fd82a",
-            "chart-3": "#cbf39d",
-            "chart-4": "#e0b34a",
-            "chart-5": "#0b6644",
-        },
-        sidebarForeground: "#f0f2f1",
-        status: {
-            success: {
-                base: "#8fd82a",
-                fg: "#a6e34d",
-                bg: "rgba(143, 216, 42, 0.1)",
-                border: "rgba(143, 216, 42, 0.35)",
-            },
-            warning: {
-                base: "#f0c34e",
-                fg: "#f0c34e",
-                bg: "rgba(240, 195, 78, 0.1)",
-                border: "rgba(240, 195, 78, 0.35)",
-            },
-            info: {
-                base: "#2f9e52",
-                fg: "#5cbb79",
-                bg: "rgba(47, 158, 82, 0.14)",
-                border: "rgba(47, 158, 82, 0.4)",
-            },
-            danger: {
-                base: "#ff6b6b",
-                fg: "#ff8a8a",
-                bg: "rgba(255, 107, 107, 0.1)",
-                border: "rgba(255, 107, 107, 0.35)",
-            },
-        },
-    },
-    light: {
-        foreground: "#1e1d1b",
-        destructive: "#d40c1a",
-        chart: {
-            "chart-2": "#5c9c1a",
-            "chart-3": "#8a7a5c",
-            "chart-4": "#b8860b",
-            "chart-5": "#26803f",
-        },
-        sidebarForeground: "#1e1d1b",
-        status: {
-            success: { base: "#508d23", fg: "#305a12", bg: "#e3f5da", border: "#b4d7a2" },
-            warning: { base: "#cb7a00", fg: "#824c12", bg: "#fef0d4", border: "#e8c184" },
-            info: { base: "#2f8543", fg: "#1b622d", bg: "#e2f4e3", border: "#acd8b1" },
-            danger: { base: "#df2225", fg: "#bb0916", bg: "#ffeae9", border: "#ffb1aa" },
-        },
-    },
+    dark: TOKENS.mode.dark.surface,
+    light: TOKENS.mode.light.surface,
 };
+const { surface: _dark, ...DARK } = TOKENS.mode.dark;
+const { surface: _light, ...LIGHT } = TOKENS.mode.light;
+export const MODE_TOKENS = { dark: DARK, light: LIGHT };
 export const ACCENTS = {
-    green: {
-        label: "Green",
-        dark: "#2f9e52",
-        onDark: "#04241b",
-        light: "#26803f",
-        onLight: "#f3fbf7",
-    },
-    copper: {
-        label: "Copper",
-        dark: "#c97b4a",
-        onDark: "#140a04",
-        light: "#9c5730",
-        onLight: "#f3fbf7",
-        chart: { dark: { "chart-3": "#d9c7a3", "chart-5": "#2f9e52" } },
-    },
-    ice: {
-        label: "Ice",
-        dark: "#6e9fc4",
-        onDark: "#06131c",
-        light: "#3d6f95",
-        onLight: "#f3fbf7",
-        chart: { dark: { "chart-3": "#b9d4e4", "chart-5": "#2f9e52" } },
-    },
-    periwinkle: {
-        label: "Periwinkle",
-        dark: "#8b8fd9",
-        onDark: "#0b0c1a",
-        light: "#5a5fae",
-        onLight: "#f3fbf7",
-        chart: { dark: { "chart-3": "#c3c5ec", "chart-5": "#2f9e52" } },
-    },
-    amber: {
-        label: "Amber",
-        dark: "#e0b34a",
-        onDark: "#1a1204",
-        light: "#8a6410",
-        onLight: "#f3fbf7",
-        // Amber is the accent here, so the amber series moves to copper.
-        chart: { dark: { "chart-4": "#c97b4a" } },
-    },
+    green: { label: "Green", ...TOKENS.accent.green },
+    copper: { label: "Copper", ...TOKENS.accent.copper },
+    ice: { label: "Ice", ...TOKENS.accent.ice },
+    periwinkle: { label: "Periwinkle", ...TOKENS.accent.periwinkle },
+    amber: { label: "Amber", ...TOKENS.accent.amber },
 };
 export const ACCENT_KEYS = Object.keys(ACCENTS);
 /** The accent a mode paints when nothing chooses one. */
@@ -266,51 +59,14 @@ export const DENSITIES = {
     compact: {
         label: "Compact",
         hint: "Dense rows with hairline dividers",
-        tokens: {
-            "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",
-        },
+        tokens: TOKENS.density.compact,
     },
     cards: {
         label: "Cards",
         hint: "Boxed items that flow into columns",
-        tokens: {
-            "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",
-        },
+        tokens: TOKENS.density.cards,
     },
 };
 export const DENSITY_KEYS = Object.keys(DENSITIES);
 /** Mode-independent tokens. `--radius` is the corners setting (2px shipped). */
-export const STATIC_TOKENS = {
-    radius: "2px",
-    "motion-fast": "120ms",
-    "motion-base": "200ms",
-    "motion-slow": "320ms",
-};
+export const STATIC_TOKENS = TOKENS.core;