CL-5781: Theme system — light/dark toggle + preset themes

apps/web/package.json

@@ -10,7 +10,7 @@
     "typecheck": "tsc --noEmit",
     "build": "vite build",
     "watch": "vite build --watch",
-    "test": "bun test"
+    "test": "bun test ./test"
   },
   "dependencies": {
     "@corbits/artifact-ui": "workspace:*",
@@ -20,7 +20,7 @@
     "@corbits/command-palette": "workspace:*",
     "@corbits/routines": "workspace:*",
     "@corbits/settings-ui": "workspace:*",
-    "@corbits/react-ui": "github:corbitsdev/react-ui#4b8952c820b44dbf83b423b97a9ad0f4513df1e0",
+    "@corbits/react-ui": "github:corbitsdev/react-ui#bd5057b0f740947ad117fc2c9cbe82bf992423d2",
     "@intx/types": "workspace:*",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-slot": "^1.2.3",

apps/web/src/main.tsx

@@ -2,6 +2,7 @@ import "@corbits/react-ui/styles.css";
 import "./app.css";
 import "./tailwind.css";
 
+import { ThemeProvider } from "@corbits/react-ui";
 import { StrictMode, useCallback, useEffect, useState } from "react";
 import { createRoot } from "react-dom/client";
 
@@ -71,17 +72,26 @@ function Root() {
     void signOut();
   }, []);
 
+  // Per-user storage when signed in so theme preference follows the account;
+  // signed-out / loading share the anonymous host key.
+  const themeStorageKey =
+    session.kind === "signed-in"
+      ? `corbits-theme:${session.user.id}`
+      : "corbits-theme";
+
   return (
-    <App
-      path={path}
-      navigate={navigate}
-      session={session}
-      onSignedIn={handleSignedIn}
-      onSignOut={handleSignOut}
-      onRetry={probe}
-      provisioningError={provisioningError}
-      onRetryProvisioning={handleRetryProvisioning}
-    />
+    <ThemeProvider storageKey={themeStorageKey}>
+      <App
+        path={path}
+        navigate={navigate}
+        session={session}
+        onSignedIn={handleSignedIn}
+        onSignOut={handleSignOut}
+        onRetry={probe}
+        provisioningError={provisioningError}
+        onRetryProvisioning={handleRetryProvisioning}
+      />
+    </ThemeProvider>
   );
 }
 

apps/web/src/shell/docks.tsx

@@ -2,7 +2,7 @@
 // small parts rather than one component so the rail's footer slot can
 // compose them independently of whatever else the shell adds there later.
 
-import { Button } from "@corbits/react-ui";
+import { Button, ThemeToggle } from "@corbits/react-ui";
 import { BenchSwitcher } from "@corbits/bench-ui";
 import { LogOut, Settings } from "lucide-react";
 
@@ -51,8 +51,8 @@ export function BenchDock() {
 }
 
 /** Rail footer: who is signed in (initials avatar, tooltip-only email —
- * never an id) plus settings and sign-out, stacked to fit the narrow rail
- * rather than the wide row the contextual panel used to have room for. */
+ * never an id) plus theme, settings and sign-out, stacked to fit the narrow
+ * rail rather than the wide row the contextual panel used to have room for. */
 export function RailIdentity({
   path,
   user,
@@ -66,6 +66,7 @@ export function RailIdentity({
   const settingsActive = matchesRoute(SETTINGS_PATH, path);
   return (
     <div className="shell-rail-identity">
+      <ThemeToggle />
       <a
         aria-current={settingsActive ? "page" : undefined}
         href={SETTINGS_PATH}

apps/web/test/auth.test.tsx

@@ -3,6 +3,7 @@
 // make, and the signed-out tree contains the auth screen instead of any
 // screen that talks to the hub.
 
+import { ThemeProvider } from "@corbits/react-ui";
 import { afterEach, describe, expect, test } from "bun:test";
 import { renderToStaticMarkup } from "react-dom/server";
 
@@ -52,14 +53,16 @@ const noop = () => undefined;
 
 function renderApp(session: SessionState): string {
   return renderToStaticMarkup(
-    <App
-      path="/"
-      navigate={noop}
-      session={session}
-      onSignedIn={noop}
-      onSignOut={noop}
-      onRetry={noop}
-    />,
+    <ThemeProvider>
+      <App
+        path="/"
+        navigate={noop}
+        session={session}
+        onSignedIn={noop}
+        onSignOut={noop}
+        onRetry={noop}
+      />
+    </ThemeProvider>,
   );
 }
 

apps/web/test/routes.test.tsx

@@ -4,6 +4,7 @@
 // rail-listed pages mark themselves in the rail. Page identity lives in the
 // panel page band (h2.panel-page-title), not a per-page TopBar.
 
+import { ThemeProvider } from "@corbits/react-ui";
 import { describe, expect, test } from "bun:test";
 import { renderToStaticMarkup } from "react-dom/server";
 
@@ -21,14 +22,16 @@ const signedIn: SessionState = {
 
 function renderApp(path: string, session: SessionState = signedIn): string {
   return renderToStaticMarkup(
-    <App
-      path={path}
-      navigate={noNavigate}
-      session={session}
-      onSignedIn={noop}
-      onSignOut={noop}
-      onRetry={noop}
-    />,
+    <ThemeProvider>
+      <App
+        path={path}
+        navigate={noNavigate}
+        session={session}
+        onSignedIn={noop}
+        onSignOut={noop}
+        onRetry={noop}
+      />
+    </ThemeProvider>,
   );
 }
 

apps/web/test/shell-docks.test.tsx

@@ -2,6 +2,7 @@
 // (never an id, never a network-fetched avatar) with the email as a
 // tooltip, and the initials derivation holds up against thin accounts.
 
+import { ThemeProvider } from "@corbits/react-ui";
 import { describe, expect, test } from "bun:test";
 import { renderToStaticMarkup } from "react-dom/server";
 
@@ -13,13 +14,19 @@ const noop = () => undefined;
 
 function renderDock(path: string): string {
   return renderToStaticMarkup(
-    <NavigationProvider navigate={noNavigate}>
-      <RailIdentity
-        path={path}
-        user={{ id: "user_1", name: "Ada Lovelace", email: "ada@example.com" }}
-        onSignOut={noop}
-      />
-    </NavigationProvider>,
+    <ThemeProvider>
+      <NavigationProvider navigate={noNavigate}>
+        <RailIdentity
+          path={path}
+          user={{
+            id: "user_1",
+            name: "Ada Lovelace",
+            email: "ada@example.com",
+          }}
+          onSignOut={noop}
+        />
+      </NavigationProvider>
+    </ThemeProvider>,
   );
 }
 
@@ -39,12 +46,13 @@ describe("initialsOf", () => {
 });
 
 describe("RailIdentity", () => {
-  test("shows the avatar initials, the email, and the settings link", () => {
+  test("shows the avatar initials, the email, settings, and theme toggle", () => {
     const markup = renderDock("/");
     expect(markup).toContain("AL");
     expect(markup).toContain("ada@example.com");
     expect(markup).toContain('href="/settings"');
     expect(markup).toContain("Sign out");
+    expect(markup).toContain("System theme");
     expect(markup).not.toContain("user_1");
   });
 

apps/web/test/tailwind-build.test.ts

@@ -31,12 +31,12 @@ describe("Tailwind production CSS", () => {
   test("emits artifact kind palette classes", () => {
     const css = builtCss();
     for (const color of [
-      "bg-blue-500",
-      "bg-emerald-500",
-      "bg-amber-500",
-      "bg-violet-500",
-      "bg-rose-500",
-      "bg-cyan-500",
+      "bg-\\[var\\(--chart-1\\)\\]",
+      "bg-\\[var\\(--chart-2\\)\\]",
+      "bg-\\[var\\(--chart-3\\)\\]",
+      "bg-\\[var\\(--chart-4\\)\\]",
+      "bg-\\[var\\(--chart-5\\)\\]",
+      "bg-muted",
     ]) {
       expect(css).toContain(color);
     }

apps/web/test/test-query-provider.tsx

@@ -1,6 +1,9 @@
-// Shared QueryClientProvider for component tests that touch useAPIQuery /
-// BenchProvider. retry:false + gcTime:0 keep failures loud and cache-free.
+// Shared providers for component tests that touch useAPIQuery / BenchProvider
+// / ThemeToggle. retry:false + gcTime:0 keep failures loud and cache-free;
+// ThemeProvider is the production root (main.tsx) so shell chrome that calls
+// useTheme can render under the same contract.
 
+import { ThemeProvider } from "@corbits/react-ui";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import type { ReactNode } from "react";
 
@@ -23,5 +26,9 @@ export function TestQueryProvider({
   readonly children: ReactNode;
   readonly client?: QueryClient;
 }) {
-  return <QueryClientProvider client={client}>{children}</QueryClientProvider>;
+  return (
+    <ThemeProvider>
+      <QueryClientProvider client={client}>{children}</QueryClientProvider>
+    </ThemeProvider>
+  );
 }

packages/artifact-ui/src/kind-color.ts

@@ -1,17 +1,16 @@
 // Kind-colored gallery tiles: each artifact kind gets a stable background
-// color so a grid of mixed kinds reads as distinct groups at a glance, the
-// way the reference gallery's fill-per-kind cards do. The mapping is a hash
-// over the kind string rather than a hand-maintained table, so a workflow
-// that emits a brand-new kind still gets a consistent color instead of
-// falling through to an "unknown" gray.
+// drawn from the Corbits chart token series so light/dark (and preset
+// overlays) stay on-brand. The mapping is a hash over the kind string
+// rather than a hand-maintained table, so a workflow that emits a brand-new
+// kind still gets a consistent color instead of falling through to muted.
 
 const PALETTE = [
-  "bg-blue-500",
-  "bg-emerald-500",
-  "bg-amber-500",
-  "bg-violet-500",
-  "bg-rose-500",
-  "bg-cyan-500",
+  "bg-[var(--chart-1)]",
+  "bg-[var(--chart-2)]",
+  "bg-[var(--chart-3)]",
+  "bg-[var(--chart-4)]",
+  "bg-[var(--chart-5)]",
+  "bg-muted",
 ] as const;
 
 function hashKind(kind: string): number {

packages/bench-ui/package.json

@@ -14,7 +14,7 @@
     "test": "bun test"
   },
   "dependencies": {
-    "@corbits/react-ui": "github:corbitsdev/react-ui#4b8952c820b44dbf83b423b97a9ad0f4513df1e0",
+    "@corbits/react-ui": "github:corbitsdev/react-ui#bd5057b0f740947ad117fc2c9cbe82bf992423d2",
     "@intx/types": "workspace:*",
     "arktype": "catalog:",
     "lucide-react": "^1.27.0",

packages/bench-ui/src/styles.css

@@ -64,8 +64,8 @@
   padding: 0.25rem 0;
   background: var(--background);
   box-shadow:
-    0 4px 6px rgb(0 0 0 / 0.07),
-    0 10px 15px rgb(0 0 0 / 0.1);
+    0 4px 6px color-mix(in srgb, var(--foreground) 8%, transparent),
+    0 10px 15px color-mix(in srgb, var(--foreground) 12%, transparent);
 }
 
 .bench-switcher-option,

packages/chat-ui/package.json

@@ -15,7 +15,7 @@
   },
   "dependencies": {
     "@corbits/chat": "workspace:*",
-    "@corbits/react-ui": "github:corbitsdev/react-ui#4b8952c820b44dbf83b423b97a9ad0f4513df1e0",
+    "@corbits/react-ui": "github:corbitsdev/react-ui#bd5057b0f740947ad117fc2c9cbe82bf992423d2",
     "arktype": "catalog:",
     "lucide-react": "^1.27.0",
     "react": "^19.2.0",

packages/chat-ui/src/styles.css

@@ -3,10 +3,9 @@
    `@corbits/react-ui`'s prebuilt stylesheet and the theme's tokens. */
 
 .chat-workspace {
-  /* Summit Blue accent for the agent badge — the one literal allowed by the
-     brand review, defined once here as a token rather than sprinkled at the
-     usage site. Swap this for a consumed theme token if/when one ships. */
-  --chat-agent-accent: #607c9a;
+  /* Agent badge uses the theme chart-1 series so light/dark and preset
+     overlays stay consistent without a package-local hex. */
+  --chat-agent-accent: var(--chart-1);
 
   display: flex;
   flex: 1;

packages/settings-ui/package.json

@@ -16,7 +16,7 @@
   "dependencies": {
     "@corbits/bench-ui": "workspace:*",
     "@corbits/chat-ui": "workspace:*",
-    "@corbits/react-ui": "github:corbitsdev/react-ui#4b8952c820b44dbf83b423b97a9ad0f4513df1e0",
+    "@corbits/react-ui": "github:corbitsdev/react-ui#bd5057b0f740947ad117fc2c9cbe82bf992423d2",
     "@intx/types": "workspace:*",
     "arktype": "catalog:",
     "lucide-react": "^1.27.0",

packages/settings-ui/src/styles.css

@@ -74,7 +74,7 @@
 
 .settings-inline-error {
   margin: 0;
-  color: var(--destructive, #b91c1c);
+  color: var(--destructive);
   font-size: 0.8125rem;
 }