@calliopelabs/ui 0.3.1 → 0.4.0

package/README.md

@@ -75,9 +75,9 @@ const NAV: NavModel = [
 export const astrolift = defineProduct({ ...astroliftBrand, nav: NAV });
 ```
 
-Astrolift AI: leaf green on the deep planet green sidebar (`#04231a`), all six grounds, graphite by default (mist when the system runs light), and its eight named themes.
+Astrolift AI: leaf green on the deep planet green sidebar (`#04231a`), six grounds (every one but navy), graphite by default (mist when the system runs light), and its eight named themes.
 
-Zentinelle AI: teal (`#37efed`, `#0d7470` on light grounds) on the navy sidebar (`#0b0b19`), a true black ground by default, the family accents beside teal, and no emerald ground. Its seven areas gate rows by role:
+Zentinelle AI: teal (`#37efed`, `#0d7470` on light grounds) on the navy sidebar (`#0b0b19`), a true black ground by default, the family accents beside teal, and no emerald or navy ground. Its seven areas gate rows by role:
 
 ```ts
 import { defineProduct, zentinelleBrand, type NavModel } from "@calliopelabs/ui";
@@ -116,6 +116,8 @@ const NAV: NavModel = [
 export const zentinelle = defineProduct({ ...zentinelleBrand, nav: NAV });
 ```
 
+Calliope AI Workbench (`workbenchBrand`): Workbench blue (`#8fb8e8`, `#2f5d94` on light grounds) on a navy sidebar (`#0e1730`), its own navy ground by default (mist when the system runs light), the family accents beside its blue, and no emerald ground.
+
 `defineProduct` validates the config and throws on anything that would paint wrong: a colour that is not lowercase `#rrggbb`, a default ground the product does not offer, a brand accent key the family already uses.
 
 ## Wire the shell
@@ -265,7 +267,7 @@ The package fetches nothing. `DataTable` reads a `TableController`: rows, state,
 
 ## Appearance
 
-The person sets four axes, per product: the **ground** (black, charcoal, graphite, emerald, paper, mist; it decides light or dark), the **accent** (the product's own, a family accent, or any colour that stands 3:1 off the ground), the **density** (`compact` hairline rows or boxed `cards`) and the **corners** (0, 2, 4 or 10 px). `AppearancePicker` is the settings UI for all four.
+The person sets four axes, per product: the **ground** (black, charcoal, graphite, emerald, navy, paper, mist; it decides light or dark), the **accent** (the product's own, a family accent, or any colour that stands 3:1 off the ground), the **density** (`compact` hairline rows or boxed `cards`) and the **corners** (0, 2, 4 or 10 px). `AppearancePicker` is the settings UI for all four.
 
 - Precedence: a locked org theme, then the person's choice, then the org default, then the product default. Until someone picks a ground, light or dark follows the system.
 - An org policy that arrives after sign-in goes in through `useAppearance().setPolicy`. An app that keeps the preference on its server passes `onChange` and hands the server's copy back through `applyServerAppearance`.

package/dist/appearance/brands.d.ts

@@ -94,24 +94,25 @@ export declare const zentinelleBrand: {
 };
 /**
  * Calliope AI Workbench (JunoHub, the installer's default theme, the desktop
- * splash): teal on navy. From junohub `custom.css` (--calliope-primary,
- * --calliope-dark) and the installer's workbench theme. Dark only today.
+ * splash): a sober light blue on navy. The navy comes from junohub `custom.css`
+ * (--calliope-dark); the hub's teal and violet are retired. Dark only today, so
+ * it defaults to its own navy ground, which no other product offers.
  */
 export declare const workbenchBrand: {
     readonly id: "workbench";
     readonly name: "Calliope AI Workbench";
     readonly accent: {
-        readonly key: "workbench-teal";
-        readonly label: "Workbench teal";
-        readonly dark: "#0af0ce";
+        readonly key: "workbench-blue";
+        readonly label: "Workbench blue";
+        readonly dark: "#8fb8e8";
         readonly onDark: "#0b1120";
-        readonly light: "#0b7a69";
+        readonly light: "#2f5d94";
         readonly onLight: "#f3fbf7";
     };
-    readonly sidebar: "#0b1120";
-    readonly grounds: readonly ["black", "charcoal", "graphite", "paper", "mist"];
+    readonly sidebar: "#0e1730";
+    readonly grounds: readonly ["navy", "black", "charcoal", "graphite", "paper", "mist"];
     readonly defaultGround: {
-        readonly dark: "charcoal";
+        readonly dark: "navy";
         readonly light: "mist";
     };
 };

package/dist/appearance/brands.js

@@ -67,24 +67,25 @@ export const zentinelleBrand = {
  */
 /**
  * Calliope AI Workbench (JunoHub, the installer's default theme, the desktop
- * splash): teal on navy. From junohub `custom.css` (--calliope-primary,
- * --calliope-dark) and the installer's workbench theme. Dark only today.
+ * splash): a sober light blue on navy. The navy comes from junohub `custom.css`
+ * (--calliope-dark); the hub's teal and violet are retired. Dark only today, so
+ * it defaults to its own navy ground, which no other product offers.
  */
 export const workbenchBrand = {
     id: "workbench",
     name: "Calliope AI Workbench",
     accent: {
-        key: "workbench-teal",
-        label: "Workbench teal",
-        dark: "#0af0ce",
+        key: "workbench-blue",
+        label: "Workbench blue",
+        dark: "#8fb8e8",
         onDark: "#0b1120",
         // derived: the hub has no light ground
-        light: "#0b7a69",
+        light: "#2f5d94",
         onLight: "#f3fbf7",
     },
-    sidebar: "#0b1120",
-    grounds: ["black", "charcoal", "graphite", "paper", "mist"],
-    defaultGround: { dark: "charcoal", light: "mist" },
+    sidebar: "#0e1730",
+    grounds: ["navy", "black", "charcoal", "graphite", "paper", "mist"],
+    defaultGround: { dark: "navy", light: "mist" },
 };
 /**
  * Calliope AI Chat Studio: blue, from `sql-agent-ui/src/index.css` (--brand

package/dist/appearance/product.d.ts

@@ -36,7 +36,7 @@ export interface ProductConfig {
     accent: FamilyAccent | BrandAccent;
     /** The brand surface: the sidebar on dark grounds (graphite and light grounds stay neutral). */
     sidebar: string;
-    /** The grounds offered, in picker order. All six when absent. */
+    /** The grounds offered, in picker order. All seven when absent. */
     grounds?: readonly Ground[];
     /** The ground until someone chooses: one per mode, following the operating system. */
     defaultGround?: {

package/dist/styles/theme.css

@@ -200,6 +200,22 @@
   --sidebar-border: rgba(255, 255, 255, 0.08);
 }
 
+/* Ground: Navy (dark) */
+[data-mode="dark"][data-ground="navy"] {
+  --background: #0b1120;
+  --card: #152141;
+  --popover: #1a284a;
+  --secondary: #1d2b50;
+  --muted: #182545;
+  --accent: #213157;
+  --muted-foreground: #97a6c2;
+  --border: rgba(255, 255, 255, 0.1);
+  --input: rgba(255, 255, 255, 0.1);
+  --sidebar: var(--brand-sidebar, #152141);
+  --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;

package/dist/theme/tokens.d.ts

@@ -32,6 +32,10 @@ export declare const GROUNDS: {
         readonly label: "Emerald";
         readonly mode: "dark";
     };
+    readonly navy: {
+        readonly label: "Navy";
+        readonly mode: "dark";
+    };
     readonly paper: {
         readonly label: "Paper";
         readonly mode: "light";

package/dist/theme/tokens.js

@@ -19,6 +19,7 @@ export const GROUNDS = {
     charcoal: { label: "Charcoal", mode: "dark" },
     graphite: { label: "Graphite", mode: "dark" },
     emerald: { label: "Emerald", mode: "dark" },
+    navy: { label: "Navy", mode: "dark" },
     paper: { label: "Paper", mode: "light" },
     mist: { label: "Mist", mode: "light" },
 };
@@ -82,6 +83,27 @@ export const SURFACES = {
         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",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@calliopelabs/ui",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "Calliope AI shared operator UI: app shell, navigation, page frame, data table and list patterns, status colours, design tokens and appearance for Astrolift AI and Zentinelle AI.",
   "keywords": [
     "calliope-ai",