@streamsai/ui 0.0.0-stage → 0.1.1

package/dist/styles/tokens.css

@@ -0,0 +1,387 @@
+/*
+ * Design tokens — the single source of truth for streams theming.
+ *
+ *   1. primitive  the Vibe palette the Workstreams Figma uses, prefixed --vibe-*.
+ *                 Components never reference these. Light on :root, dark on :root.dark.
+ *   2. semantic   shadcn naming plus our additions. Each points at a primitive via var().
+ *   3. bridge     `@theme inline` in globals.css → Tailwind utilities.
+ *
+ * Dark mode is ONE class, `.dark`, on <html>. ThemeProvider (src/theme) owns it. There is
+ * deliberately no `prefers-color-scheme` media query here: the provider resolves "system"
+ * and writes the class, so a user choice and the OS choice go through the same path.
+ * Keep primitive values in sync with tokens.mjs (tokens.test.ts enforces it).
+ */
+
+/* --- 1. primitive, light ------------------------------------------------- */
+:root {
+  --vibe-primary-color: #0073ea;
+  --vibe-primary-hover-color: #0060b9;
+  --vibe-primary-text-color: #323338;
+  --vibe-secondary-text-color: #676879;
+  --vibe-icon-color: #676879;
+  --vibe-primary-background-color: #ffffff;
+  --vibe-grey-background-color: #f6f7fb;
+  --vibe-primary-surface-color: #edf1fc;
+  --vibe-primary-selected-color: #cce4ff;
+  --vibe-primary-highlighted-color: #f0f7ff;
+  --vibe-primary-background-hover-color: #6768791a;
+  --vibe-layout-border-color: #d0d4e4;
+  --vibe-ui-border-color: #c3c6d4;
+  --vibe-ui-background-color: #e7e9ef;
+  --vibe-disabled-background-color: #ecedf5;
+  --vibe-disabled-text-color: #32333861;
+  --vibe-disabled-text-color-solid: #9595a1;
+  --vibe-placeholder-color: #676879;
+  --vibe-inverted-color-background: #323338;
+  --vibe-text-color-on-inverted: #ffffff;
+  --vibe-text-color-on-primary: #ffffff;
+  --vibe-color-stuck-red: #df2f4a;
+  --vibe-color-purple: #9d50dd;
+  --vibe-color-done-green: #00c875;
+  --vibe-color-done-green-strong: #00854d; /* iOS swipe/action fills */
+  --vibe-color-chili-blue: #66ccff;
+  --vibe-color-aquamarine: #00858a;
+  --vibe-color-done-green-selected-with-opacity: #80e3ba99;
+  --vibe-color-done-green-selected: #80e3ba;
+  --vibe-color-egg-yolk-selected: #ffe580;
+  --vibe-color-egg-yolk-text: #7a5a00; /* amber text on a yellow tint */
+  --vibe-color-egg-yolk-on-selected: #5c4300; /* text on the solid yellow */
+  --vibe-color-winter: #9aadbd;
+  --vibe-color-running-yellow: #f7c55e;
+  --vibe-color-running-halo: #fdeecf;
+  --vibe-color-running-green: #b7cf9f;
+  --vibe-color-running-green-halo: #e9f1e2;
+  --vibe-home-offline-banner: #eceff8;
+  --vibe-home-tile-1: #d4e2c5;
+  --vibe-home-tile-2: #d9e8fb;
+  --vibe-home-tile-3: #fbd4ba;
+  --vibe-home-tile-4: #fadd9e;
+}
+
+/* --- 1b. primitive, dark -------------------------------------------------- */
+:root:where(.dark) {
+  --vibe-primary-color: #0073ea;
+  --vibe-primary-hover-color: #1f76d2;
+  --vibe-primary-text-color: #eeeeee;
+  --vibe-secondary-text-color: #aaaaaa;
+  --vibe-icon-color: #aaaaaa;
+  --vibe-primary-background-color: #1e2026;
+  --vibe-grey-background-color: #111111;
+  --vibe-primary-surface-color: #22283a;
+  --vibe-primary-selected-color: #133774;
+  --vibe-primary-highlighted-color: #1b2436;
+  --vibe-primary-background-hover-color: #63636359;
+  --vibe-layout-border-color: #636363;
+  --vibe-ui-border-color: #636363;
+  --vibe-ui-background-color: #2f3138;
+  --vibe-disabled-background-color: #2a2b31;
+  --vibe-disabled-text-color: #eeeeee61;
+  --vibe-disabled-text-color-solid: #7a7a7a;
+  --vibe-placeholder-color: #aaaaaa;
+  --vibe-inverted-color-background: #eeeeee;
+  --vibe-text-color-on-inverted: #323338;
+  --vibe-text-color-on-primary: #ffffff;
+  --vibe-color-stuck-red: #e8697d;
+  --vibe-color-purple: #b072e6;
+  --vibe-color-done-green: #33d391;
+  --vibe-color-done-green-strong: #00a35c; /* iOS swipe/action fills */
+  --vibe-color-chili-blue: #66ccff;
+  --vibe-color-aquamarine: #4eccc6;
+  --vibe-color-done-green-selected-with-opacity: #80e3ba99;
+  --vibe-color-done-green-selected: #80e3ba;
+  --vibe-color-egg-yolk-selected: #ffe580;
+  --vibe-color-egg-yolk-text: #ffcb00;
+  --vibe-color-egg-yolk-on-selected: #5c4300;
+  --vibe-color-winter: #9aadbd;
+  --vibe-color-running-yellow: #f7c55e;
+  --vibe-color-running-halo: #5f5237;
+  --vibe-color-running-green: #b7cf9f;
+  --vibe-color-running-green-halo: #4c554a;
+  --vibe-home-offline-banner: #22283a;
+  --vibe-home-tile-1: #4a5545;
+  --vibe-home-tile-2: #3a4a60;
+  --vibe-home-tile-3: #62483a;
+  --vibe-home-tile-4: #625433;
+}
+
+/* --- 2. semantic (light and dark share this block: every value is a var()) -- */
+:root {
+  color-scheme: light;
+
+  --background: var(--vibe-primary-background-color);
+  --foreground: var(--vibe-primary-text-color);
+  --card: var(--vibe-primary-background-color);
+  --card-foreground: var(--vibe-primary-text-color);
+  --popover: var(--vibe-primary-background-color);
+  --popover-foreground: var(--vibe-primary-text-color);
+
+  --primary: var(--vibe-primary-color);
+  --primary-hover: var(--vibe-primary-hover-color);
+  --primary-foreground: var(--vibe-text-color-on-primary);
+  --secondary: var(--vibe-ui-background-color);
+  --secondary-foreground: var(--vibe-primary-text-color);
+  --muted: var(--vibe-grey-background-color);
+  --muted-foreground: var(--vibe-secondary-text-color);
+  --accent: var(--vibe-primary-background-hover-color);
+  --accent-foreground: var(--vibe-primary-text-color);
+  --destructive: var(--vibe-color-stuck-red);
+  --destructive-foreground: var(--vibe-text-color-on-primary);
+
+  --border: var(--vibe-layout-border-color);
+  --input: var(--vibe-ui-border-color);
+  --ring: var(--vibe-primary-color);
+
+  /* Ours — the Figma needs these and shadcn has no name for them. */
+  --selected: var(--vibe-primary-selected-color);
+  --selected-foreground: var(--vibe-primary-text-color);
+  --highlight: var(--vibe-primary-highlighted-color);
+  --icon: var(--vibe-icon-color);
+  --disabled: var(--vibe-disabled-background-color);
+  --disabled-foreground: var(--vibe-disabled-text-color);
+  --placeholder: var(--vibe-placeholder-color);
+  --inverted: var(--vibe-inverted-color-background);
+  --inverted-foreground: var(--vibe-text-color-on-inverted);
+  --surface-1: var(
+    --vibe-grey-background-color
+  ); /* one step off the page: sidebar, pills, thread root */
+  --surface-primary: var(
+    --vibe-primary-surface-color
+  ); /* tinted surface: mentions, chips, AI accents */
+  --status-idle: var(--vibe-icon-color);
+  --status-working: var(--vibe-color-purple);
+  --status-done: var(--vibe-color-done-green);
+  --status-stuck: var(--vibe-color-stuck-red);
+  /* The one yellow / green for progress: a cycle run's in-progress and completed accents, in the
+     run bar, the message bar and the segments. Use these, not a new shade. */
+  --warning: var(--vibe-color-egg-yolk-selected);
+  /* Text on solid `--warning` (the number in the current phase's circle). Dark in both themes: the yellow is the same in both. */
+  --warning-foreground: var(--vibe-color-egg-yolk-on-selected);
+  --positive: var(--vibe-color-done-green-selected);
+  /* Text and icons on a white surface that say "done": the answered check in a submitted form. */
+  --positive-foreground: var(--vibe-color-done-green-strong);
+  /* Quieter than muted-foreground: character counters, "No answer". Not for anything that must be read. */
+  --subtle-foreground: var(--vibe-disabled-text-color-solid);
+  /* A stopped run's remaining phases. */
+  --run-stopped: var(--vibe-color-winter);
+  /* Advance chip text on a phase card: dark teal on `--positive` ("Auto advance") and amber on
+     `--warning` ("Human advance"), so the chips match the progress segments. */
+  --accent-teal: var(--vibe-color-aquamarine);
+  --accent-yellow: var(--vibe-color-egg-yolk-text);
+  /* Vibe's aquamarine, following its dark value: the "Auto advance" chip text, on a 10% tint of itself. */
+  --aquamarine: var(--vibe-color-aquamarine);
+  /* Vibe's purple, following its dark value: a condition's badge and icon tile in the cycle builder, on a 12% tint of itself. */
+  --accent-purple: var(--vibe-color-purple);
+  /* Vibe's negative color (stuck red), following its dark value: the "Fill in required fields" chip text, on a 10% tint of itself. */
+  --negative: var(--vibe-color-stuck-red);
+  /* Avatar fallbacks: chili blue for people, purple for agents. */
+  --avatar-person: var(--vibe-color-chili-blue);
+  --avatar-agent: var(--vibe-color-purple);
+
+  /* Mobile Home (iOS Streams tab, mweb /home). Scoped names so the desktop sidebar and the shared
+     `--status-working` purple stay as they are. */
+  --home-canvas: var(--vibe-grey-background-color);
+  --home-card: var(--vibe-primary-background-color);
+  --home-chip: var(--vibe-primary-background-color);
+  --home-chip-selected: var(--vibe-inverted-color-background);
+  --home-chip-selected-foreground: var(--vibe-text-color-on-inverted);
+  --home-skeleton: var(--vibe-ui-background-color);
+  --home-offline-banner: var(--vibe-home-offline-banner);
+  --home-running: var(--vibe-color-running-green);
+  --home-running-halo: var(--vibe-color-running-green-halo);
+  --home-tile-1: var(--vibe-home-tile-1);
+  --home-tile-2: var(--vibe-home-tile-2);
+  --home-tile-3: var(--vibe-home-tile-3);
+  --home-tile-4: var(--vibe-home-tile-4);
+
+  --sidebar: var(--vibe-grey-background-color);
+  --sidebar-foreground: var(--vibe-primary-text-color);
+  --sidebar-primary: var(--vibe-primary-color);
+  --sidebar-primary-foreground: var(--vibe-text-color-on-primary);
+  --sidebar-accent: var(--vibe-primary-background-hover-color);
+  --sidebar-accent-foreground: var(--vibe-primary-text-color);
+  --sidebar-border: var(--vibe-layout-border-color);
+  --sidebar-ring: var(--vibe-primary-color);
+
+  --chart-1: var(--primary);
+  --chart-2: color-mix(in oklab, var(--primary) 76%, var(--background));
+  --chart-3: color-mix(in oklab, var(--primary) 56%, var(--background));
+  --chart-4: color-mix(in oklab, var(--primary) 38%, var(--background));
+  --chart-5: color-mix(in oklab, var(--primary) 24%, var(--background));
+
+  /* Chart card (mcp-apps Chart). Data colours are fixed per palette, the same in light and dark, so
+     a series keeps its colour when the theme flips: the design's four palettes, six slots each. */
+  --chart-vibe-1: #0073ea;
+  --chart-vibe-2: #9d50dd;
+  --chart-vibe-3: #00c875;
+  --chart-vibe-4: #ffcb00;
+  --chart-vibe-5: #df2f4a;
+  --chart-vibe-6: #66ccff;
+  --chart-ocean-1: #0073ea;
+  --chart-ocean-2: #66ccff;
+  --chart-ocean-3: #00858a;
+  --chart-ocean-4: #9aadbd;
+  --chart-ocean-5: #133774;
+  --chart-ocean-6: #80e3ba;
+  --chart-berry-1: #9d50dd;
+  --chart-berry-2: #df2f4a;
+  --chart-berry-3: #ffcb00;
+  --chart-berry-4: #0073ea;
+  --chart-berry-5: #ff642e;
+  --chart-berry-6: #66ccff;
+  --chart-mono-1: #0073ea;
+  --chart-mono-2: #3d8fee;
+  --chart-mono-3: #7aaef3;
+  --chart-mono-4: #a9c7f7;
+  --chart-mono-5: #d4e3fb;
+  --chart-mono-6: #133774;
+  /* Chart furniture follows the theme. */
+  --chart-axis: var(--muted-foreground);
+  --chart-label: var(--foreground);
+  --chart-grid: var(--secondary);
+  --chart-baseline: var(--input);
+  --chart-guide: var(--input);
+  --chart-point-fill: var(--card);
+  --chart-gantt-done: var(--positive);
+  --chart-gantt-done-text: var(--positive-foreground);
+  --chart-gantt-progress: var(--warning);
+  --chart-gantt-progress-text: var(--accent-yellow);
+  --chart-gantt-upcoming: var(--secondary);
+  --chart-gantt-upcoming-text: var(--muted-foreground);
+  --chart-today: var(--primary);
+  --chart-on-fill: #ffffff;
+  --chart-on-fill-soft: rgba(255, 255, 255, 0.85);
+  /* A PNG export is always drawn on white, so it reads the light values of the furniture whatever
+     the theme is. */
+  --chart-export-background: #ffffff;
+  --chart-export-axis: #676879;
+  --chart-export-label: #323338;
+  --chart-export-grid: #e7e9ef;
+  --chart-export-baseline: #c3c6d4;
+  --chart-export-guide: #c3c6d4;
+  --chart-export-point-fill: #ffffff;
+  --chart-export-gantt-done: #80e3ba;
+  --chart-export-gantt-done-text: #00854d;
+  --chart-export-gantt-progress: #ffe580;
+  --chart-export-gantt-progress-text: #7a5a00;
+  --chart-export-gantt-upcoming: #e7e9ef;
+  --chart-export-gantt-upcoming-text: #676879;
+  --chart-export-today: #0073ea;
+
+  --radius: 0.5rem; /* Vibe medium 8px; the bridge derives sm 4px from it */
+
+  /* Type. Figtree for UI text, Poppins for titles. Named --font-ui/--font-heading/--font-code
+   * because a `@theme inline` entry reading `--font-sans: var(--font-sans)` would be circular. */
+  --font-ui: 'Figtree', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+  --font-heading: 'Poppins', var(--font-ui);
+  --font-code: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
+  /* Color-emoji glyphs only (reaction pills). Named -stack so @theme `--font-emoji` is not circular. */
+  --font-emoji-stack: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
+  /* Vibe text scale: Text1 16/22, Text2 14/20 (default), Text3 12/16, H3 18/24. */
+  --type-body-1: 1rem;
+  --type-body-1-lh: 1.375rem;
+  --type-body-2: 0.875rem;
+  --type-body-2-lh: 1.25rem;
+  --type-body-3: 0.75rem;
+  --type-body-3-lh: 1rem;
+  --type-h3: 1.125rem;
+  --type-h3-lh: 1.5rem;
+  --type-h3-tracking: -0.03125rem; /* -0.5px */
+
+  /* Elevation. Figma: XS, Small, Medium. `lg` reuses Medium so shadow-lg keeps working. */
+  --shadow-color: #000000;
+  --elevation-xs: 0 4px 6px -4px color-mix(in srgb, var(--shadow-color) 10%, transparent);
+  --elevation-sm: 0 4px 8px 0 color-mix(in srgb, var(--shadow-color) 20%, transparent);
+  --elevation-md: 0 6px 20px 0 color-mix(in srgb, var(--shadow-color) 20%, transparent);
+  --elevation-lg: var(--elevation-md);
+  /* Small's spread at a lighter tint, for cards resting on a page surface. */
+  --elevation-card: 0 4px 8px 0 color-mix(in srgb, var(--shadow-color) 12%, transparent);
+  /* Tight and a little darker than Small, for a pill that shares its colour with the page (mobile dark). */
+  --elevation-pill: 0 2px 4px 0 color-mix(in srgb, var(--shadow-color) 35%, transparent);
+
+  /* Layout — unchanged, plus the nav width the sidebar reads instead of a JS constant. */
+  --nav-w: 17.5rem; /* 280px, LEFT_SIDEBAR_DEFAULT_WIDTH */
+  --nav-w-icon: 3rem;
+  --content-max: 62rem; /* 992px, the shared reading column (chat, analytics, agents) */
+  --bar-h: 3.5rem; /* 56px, the Figma pane header */
+  --panel-w: 22.5rem; /* 360px, the Figma right pane */
+  --panel-w-lg: 26rem;
+  --chat-min: 20rem;
+  --message-size: 1rem;
+
+  --z-base: 0;
+  --z-sticky: 100;
+  --z-overlay: 300;
+  --z-modal: 400;
+  --z-dropdown: 450;
+  --z-toast: 500;
+
+  /* Mirrors `duration` and `ease` in src/motion/config.ts (the one place motion is tuned;
+   * config.test.ts fails when these drift). Only the CSS exceptions read them: the default
+   * hover transition timing in globals.css and the mobile View Transitions. */
+  --motion-short: 100ms;
+  --motion-fast: 120ms;
+  --motion-base: 200ms;
+  --motion-slow: 320ms;
+  --motion-reveal: 480ms;
+  --motion-ease: cubic-bezier(0.4, 0, 0.2, 1);
+  --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+  --motion-ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --motion-ease-enter: cubic-bezier(0, 0, 0.2, 1);
+  --motion-ease-exit: cubic-bezier(0.6, 0, 1, 1);
+
+  --tap-target: 1.5rem;
+  --safe-area-bottom: 0px;
+
+  --brand-from: #04f6fb;
+  --brand-via: #286afd;
+  --brand-to: #9351fd;
+}
+
+/* --- 2a. syntax highlighting (CodeView) ------------------------------------
+ * The variables Shiki's CSS-variables theme reads (`variablePrefix: '--code-'`). Every value is a
+ * var() of a primitive, so the `.dark` class re-tints them and no dark block is needed. Picked for
+ * contrast on both page backgrounds: done-green-strong rather than done-green for strings. */
+:root {
+  --code-foreground: var(--foreground);
+  --code-background: transparent;
+  --code-token-constant: var(--vibe-color-aquamarine);
+  --code-token-string: var(--vibe-color-done-green-strong);
+  --code-token-comment: var(--vibe-secondary-text-color);
+  --code-token-keyword: var(--vibe-color-purple);
+  --code-token-parameter: var(--vibe-color-egg-yolk-text);
+  --code-token-function: var(--vibe-primary-color);
+  --code-token-string-expression: var(--vibe-color-done-green-strong);
+  --code-token-punctuation: var(--vibe-secondary-text-color);
+  --code-token-link: var(--vibe-primary-color);
+}
+
+/* --- 2b. dark: only what is not a plain var() re-read ---------------------- */
+:root:where(.dark) {
+  color-scheme: dark;
+  --card: var(--vibe-ui-background-color);
+  --popover: var(--vibe-ui-background-color);
+  /* `--positive` / `--warning` stay pastel in dark, so the chip text keeps its light-theme shade. */
+  --accent-teal: #00858a;
+  --accent-yellow: #7a5a00;
+}
+
+/*
+ * --- 2c. semantic: mobile ------------------------------------------------
+ * A deliberate subset, not a second theme. Everything not listed inherits.
+ */
+
+:root:where([data-platform='mobile']) {
+  --radius: 0.875rem;
+  --tap-target: 2.75rem; /* 44px — the platform minimum */
+  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
+}
+
+:root:where(.dark[data-platform='mobile']) {
+  /* Mobile dark sits one step lighter than web dark; OLED pure black smears on scroll. */
+  --background: var(--vibe-ui-background-color);
+  --card: var(--vibe-ui-background-color);
+  --popover: var(--vibe-ui-background-color);
+  /* `--positive` / `--warning` stay pastel in dark, so the chip text keeps its light-theme shade. */
+  --accent-teal: #00858a;
+  --accent-yellow: #7a5a00;
+}

package/dist/styles/tokens.d.mts

@@ -0,0 +1,57 @@
+type ColorPair = { light: string; dark: string }
+
+export declare const colors: {
+  'primary-color': ColorPair
+  'primary-hover-color': ColorPair
+  'primary-text-color': ColorPair
+  'secondary-text-color': ColorPair
+  'icon-color': ColorPair
+  'primary-background-color': ColorPair
+  'grey-background-color': ColorPair
+  'primary-surface-color': ColorPair
+  'primary-selected-color': ColorPair
+  'primary-highlighted-color': ColorPair
+  'layout-border-color': ColorPair
+  'ui-border-color': ColorPair
+  'ui-background-color': ColorPair
+  'disabled-background-color': ColorPair
+  'disabled-text-color-solid': ColorPair
+  'placeholder-color': ColorPair
+  'inverted-color-background': ColorPair
+  'text-color-on-inverted': ColorPair
+  'text-color-on-primary': ColorPair
+  'color-stuck-red': ColorPair
+  'color-purple': ColorPair
+  'color-done-green': ColorPair
+  'color-done-green-strong': ColorPair
+  'color-done-green-selected': ColorPair
+  'color-egg-yolk-selected': ColorPair
+  'color-winter': ColorPair
+  'color-chili-blue': ColorPair
+  'color-running-yellow': ColorPair
+  'color-running-green': ColorPair
+  'color-running-green-halo': ColorPair
+  'color-running-halo': ColorPair
+  'home-offline-banner': ColorPair
+  'home-tile-1': ColorPair
+  'home-tile-2': ColorPair
+  'home-tile-3': ColorPair
+  'home-tile-4': ColorPair
+}
+
+export declare const alphaColors: {
+  'primary-background-hover-color': ColorPair
+  'disabled-text-color': ColorPair
+  'color-done-green-selected-with-opacity': ColorPair
+}
+
+export declare const spacing: {
+  xs: number
+  sm: number
+  md: number
+  lg: number
+  xl: number
+  xxl: number
+  xxxl: number
+}
+export declare const radius: { small: number; medium: number; large: number; full: number }

package/dist/styles/tokens.mjs

@@ -0,0 +1,59 @@
+// Primitive palette shared by tokens.css (web) and apps/iOS/tools/gen-tokens.mjs.
+// Values are the Vibe tokens used by the Workstreams Figma (page "Ready For Dev").
+// Dark values marked `derived` are not in the Figma; see docs/design/vibe-shadcn-parity.md.
+export const colors = {
+  'primary-color': { light: '#0073ea', dark: '#0073ea' },
+  'primary-hover-color': { light: '#0060b9', dark: '#1f76d2' }, // derived dark
+  'primary-text-color': { light: '#323338', dark: '#eeeeee' },
+  'secondary-text-color': { light: '#676879', dark: '#aaaaaa' },
+  'icon-color': { light: '#676879', dark: '#aaaaaa' },
+  'primary-background-color': { light: '#ffffff', dark: '#1e2026' },
+  'grey-background-color': { light: '#f6f7fb', dark: '#111111' },
+  'primary-surface-color': { light: '#edf1fc', dark: '#22283a' }, // derived dark
+  'primary-selected-color': { light: '#cce4ff', dark: '#133774' },
+  'primary-highlighted-color': { light: '#f0f7ff', dark: '#1b2436' }, // derived dark
+  'layout-border-color': { light: '#d0d4e4', dark: '#636363' },
+  'ui-border-color': { light: '#c3c6d4', dark: '#636363' },
+  'ui-background-color': { light: '#e7e9ef', dark: '#2f3138' }, // derived dark
+  'disabled-background-color': { light: '#ecedf5', dark: '#2a2b31' }, // derived dark
+  'disabled-text-color-solid': { light: '#9595a1', dark: '#7a7a7a' }, // derived dark
+  'placeholder-color': { light: '#676879', dark: '#aaaaaa' },
+  'inverted-color-background': { light: '#323338', dark: '#eeeeee' },
+  'text-color-on-inverted': { light: '#ffffff', dark: '#323338' },
+  // Always white: primary stays #0073ea in both schemes (unlike inverted, which flips).
+  'text-color-on-primary': { light: '#ffffff', dark: '#ffffff' },
+  'color-stuck-red': { light: '#df2f4a', dark: '#e8697d' },
+  'color-purple': { light: '#9d50dd', dark: '#b072e6' }, // derived dark
+  'color-done-green': { light: '#00c875', dark: '#33d391' }, // solid form of #80e3ba99
+  'color-done-green-strong': { light: '#00854d', dark: '#00a35c' }, // iOS swipe/action fills
+  // The one yellow / green for run and phase progress (--warning / --positive), and a stopped run's grey-blue.
+  'color-done-green-selected': { light: '#80e3ba', dark: '#80e3ba' },
+  'color-egg-yolk-selected': { light: '#ffe580', dark: '#ffe580' },
+  'color-winter': { light: '#9aadbd', dark: '#9aadbd' },
+  'color-chili-blue': { light: '#66ccff', dark: '#66ccff' }, // a person's square avatar fallback
+  // Mobile Home (iOS Streams tab and mweb /home). Light values are sampled from the design PNG;
+  // dark values are derived from the dark theme until Design supplies them.
+  'color-running-yellow': { light: '#f7c55e', dark: '#f7c55e' }, // a Running session's dot
+  'color-running-green': { light: '#b7cf9f', dark: '#b7cf9f' }, // mweb Running dot: the pastel green from Figma
+  'color-running-green-halo': { light: '#e9f1e2', dark: '#4c554a' }, // that dot at 30% over the card, composited
+  'color-running-halo': { light: '#fdeecf', dark: '#5f5237' }, // that dot at 30% over the card, composited
+  'home-offline-banner': { light: '#eceff8', dark: '#22283a' },
+  // Stream tile backgrounds, the four pastels from the Home design. `homeTileIndex` picks from them
+  // by rendezvous hashing: append a new colour (and bump HOME_TILE_COUNT here and in iOS
+  // HomeTileColor) and only ~1/(N+1) of streams change. Never reorder or insert.
+  'home-tile-1': { light: '#d4e2c5', dark: '#4a5545' }, // green
+  'home-tile-2': { light: '#d9e8fb', dark: '#3a4a60' }, // blue
+  'home-tile-3': { light: '#fbd4ba', dark: '#62483a' }, // peach
+  'home-tile-4': { light: '#fadd9e', dark: '#625433' }, // yellow
+}
+
+// Alpha tokens stay as CSS-only values (hex with alpha); listed so the parity doc and
+// tokens.css agree. Not exported to iOS (SwiftUI colours are opaque there).
+export const alphaColors = {
+  'primary-background-hover-color': { light: '#6768791a', dark: '#63636359' },
+  'disabled-text-color': { light: '#32333861', dark: '#eeeeee61' },
+  'color-done-green-selected-with-opacity': { light: '#80e3ba99', dark: '#80e3ba99' },
+}
+
+export const spacing = { xs: 2, sm: 4, md: 8, lg: 12, xl: 16, xxl: 24, xxxl: 64 }
+export const radius = { small: 4, medium: 8, large: 12, full: 999 }

package/dist/theme/index.d.ts

@@ -0,0 +1,28 @@
+/**
+ * @no-story Context provider — renders no UI; toggles the `dark` class on <html>.
+ */
+import { type ReactNode } from 'react';
+type Theme = 'system' | 'light' | 'dark';
+type ResolvedTheme = 'light' | 'dark';
+declare const THEME_STORAGE_KEY = "streams.theme";
+/**
+ * Inline this in <head> before any stylesheet paints so a stored dark choice never flashes
+ * light. Precedence: native host `colorScheme` (chat webview) → stored theme → OS preference, light
+ * where the browser cannot report one.
+ * Must stay in sync with THEME_STORAGE_KEY and MobileShell's host-follow path.
+ */
+declare const THEME_INIT_SCRIPT = "(function(){try{var n=window.__STREAMS_NATIVE__&&window.__STREAMS_NATIVE__.colorScheme;var t=localStorage.getItem('streams.theme');var d=n==='dark'||(n!=='light'&&n!=='dark'&&(t==='dark'||(t!=='light'&&!!window.matchMedia&&matchMedia('(prefers-color-scheme: dark)').matches)));document.documentElement.classList.toggle('dark',!!d)}catch(e){}})()";
+interface ThemeContextValue {
+    theme: Theme;
+    resolvedTheme: ResolvedTheme;
+    setTheme: (theme: Theme) => void;
+}
+interface ThemeProviderProps {
+    /** Used when nothing is stored. Defaults to `'system'`, which `THEME_INIT_SCRIPT` assumes. */
+    defaultTheme?: Theme;
+    children: ReactNode;
+}
+declare function ThemeProvider({ defaultTheme, children }: ThemeProviderProps): import("react").JSX.Element;
+declare function useTheme(): ThemeContextValue;
+export type { Theme, ResolvedTheme, ThemeProviderProps };
+export { ThemeProvider, useTheme, THEME_STORAGE_KEY, THEME_INIT_SCRIPT };

package/dist/theme/index.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @no-story Context provider — renders no UI; toggles the `dark` class on <html>.
+ */
+import { createContext, useCallback, useContext, useEffect, useMemo, useState, } from 'react';
+const THEME_STORAGE_KEY = 'streams.theme';
+const DARK_QUERY = '(prefers-color-scheme: dark)';
+/**
+ * Inline this in <head> before any stylesheet paints so a stored dark choice never flashes
+ * light. Precedence: native host `colorScheme` (chat webview) → stored theme → OS preference, light
+ * where the browser cannot report one.
+ * Must stay in sync with THEME_STORAGE_KEY and MobileShell's host-follow path.
+ */
+const THEME_INIT_SCRIPT = `(function(){try{var n=window.__STREAMS_NATIVE__&&window.__STREAMS_NATIVE__.colorScheme;var t=localStorage.getItem('${THEME_STORAGE_KEY}');var d=n==='dark'||(n!=='light'&&n!=='dark'&&(t==='dark'||(t!=='light'&&!!window.matchMedia&&matchMedia('${DARK_QUERY}').matches)));document.documentElement.classList.toggle('dark',!!d)}catch(e){}})()`;
+const ThemeContext = createContext(null);
+const isTheme = (v) => v === 'system' || v === 'light' || v === 'dark';
+function readStored() {
+    if (typeof localStorage === 'undefined')
+        return null;
+    const v = localStorage.getItem(THEME_STORAGE_KEY);
+    return isTheme(v) ? v : null;
+}
+function systemPrefersDark() {
+    if (typeof matchMedia === 'undefined')
+        return false;
+    return matchMedia(DARK_QUERY).matches;
+}
+function resolve(theme, systemDark) {
+    if (theme === 'system')
+        return systemDark ? 'dark' : 'light';
+    return theme;
+}
+function applyTheme(resolved) {
+    if (typeof document === 'undefined')
+        return;
+    document.documentElement.classList.toggle('dark', resolved === 'dark');
+}
+function ThemeProvider({ defaultTheme = 'system', children }) {
+    const [theme, setThemeState] = useState(() => readStored() ?? defaultTheme);
+    const [systemDark, setSystemDark] = useState(systemPrefersDark);
+    const resolvedTheme = resolve(theme, systemDark);
+    // Synchronous during render on the client so portals mounted in the same commit see the class.
+    applyTheme(resolvedTheme);
+    useEffect(() => {
+        if (typeof matchMedia === 'undefined')
+            return;
+        const mq = matchMedia(DARK_QUERY);
+        const onChange = (e) => setSystemDark(e.matches);
+        mq.addEventListener('change', onChange);
+        return () => mq.removeEventListener('change', onChange);
+    }, []);
+    const setTheme = useCallback((next) => {
+        setThemeState(next);
+        localStorage.setItem(THEME_STORAGE_KEY, next);
+    }, []);
+    const value = useMemo(() => ({ theme, resolvedTheme, setTheme }), [theme, resolvedTheme, setTheme]);
+    return _jsx(ThemeContext.Provider, { value: value, children: children });
+}
+function useTheme() {
+    const ctx = useContext(ThemeContext);
+    if (ctx === null)
+        throw new Error('useTheme() must be called inside a <ThemeProvider>.');
+    return ctx;
+}
+export { ThemeProvider, useTheme, THEME_STORAGE_KEY, THEME_INIT_SCRIPT };