@tangle-network/brand 0.6.0 → 0.8.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## 0.8.0
+
+### Minor Changes
+
+- 46592b3: Calmer chat/run design + named multi-theme system.
+
+  - `ChatMessage`/`RunGroup`: role labels move above the bubble (plain text-xs), avatar circles removed (`avatar`/`hideAvatar` are deprecated no-ops), `InlineToolItem` rows are taller with quiet inline failed/running text instead of uppercase pills. `ToolCallStep`/`ToolCallFeed` stories leave Storybook (source adapters remain).
+  - `@tangle-network/brand` adds `themes.css`: `[data-theme]` scopes (`aubergine`, `aubergine-light`, `arena`, `arena-light`, `tangle-light`) that re-skin every component through the `@theme` semantic mappings, plus a `Foundations/Theme Showcase` story.
+
+## 0.7.0
+
+### Minor Changes
+
+- e199bc7: Fix the dark theme being unresponsive to token changes + harsh on dark surfaces — root cause was the `@theme` layer.
+
+  - **Single source of truth for semantic tokens.** `theme.css` now maps every shadcn/MD3 utility token (`--color-background/card/border/muted/popover/secondary/accent/destructive/ring/input` + `--color-surface-container*`) onto the `tokens.css` spine via `var()`, instead of leaving them undefined (forcing every app to re-define them) and hardcoding a now-stale `--color-depth-*` copy. Editing the spine in `tokens.css` now actually flows through to `bg-card` / `border-border` / `bg-muted` everywhere.
+  - **Comfortable dark surface ladder.** Lift the canvas off near-black (`#0b0b0d` → `#15151a`) and spread the surface/depth/MD3 ladder so panels separate by _fill_, with the border softened (`13%` → `16%` lightness) so it recedes instead of reading as a bright outline on black.
+
 ## 0.6.0
 
 ### Minor Changes

package/README.md

@@ -2,7 +2,9 @@
 
 Single source of truth for the Tangle design system. Design tokens, logo, and a Tailwind v4 theme preset, shared across every Tangle app (`tangle-website`, `sandbox-ui`, `evals`, `agent-builder`, product surfaces).
 
-**Scope:** tokens, not components. Components live in `@tangle-network/sandbox-ui`.
+**Scope:** tokens, not components. Shared components live in `@tangle-network/ui`; product-specific components stay in their product repos.
+
+For the broader visual, copy, graphic, and component standards, see the repo-level [brand guidelines](../../docs/brand-guidelines.md).
 
 ## Install
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/brand",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "description": "Tangle brand system — design tokens, logo, Tailwind v4 theme. Single source of truth for every Tangle app.",
   "type": "module",
   "license": "MIT",

package/src/styles/index.css

@@ -7,4 +7,5 @@
 
 @import "./tokens.css";
 @import "./theme.css";
+@import "./themes.css";
 @import "./globals.css";

package/src/styles/theme.css

@@ -52,16 +52,47 @@
   --color-brand-glow: #A5AAFC;
   --color-brand-emerald: #10B981;
 
-  /* Depth stack — flat neutral spine (Tangle Quiet) */
-  --color-depth-1: #0b0b0d;
-  --color-depth-2: #141416;
-  --color-depth-3: #1a1a1d;
-  --color-depth-4: #202023;
+  /* Depth stack — REFERENCE the spine in tokens.css (single source; was a stale
+     hardcoded copy that drifted from --depth-* and broke theme retunes). */
+  --color-depth-1: var(--depth-1);
+  --color-depth-2: var(--depth-2);
+  --color-depth-3: var(--depth-3);
+  --color-depth-4: var(--depth-4);
+
+  /* Semantic surface + text roles — map the shadcn/MD3 utility names onto the
+     tokens.css spine so `bg-card` / `border-border` / `bg-muted` /
+     `bg-surface-container*` / `text-muted-foreground` resolve from ONE source
+     here, instead of every consuming app re-defining them (the drift you hit).
+     Apps may still override locally; absent an override these are the defaults. */
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+  --color-surface-container-lowest: var(--md3-surface-container-lowest);
+  --color-surface-container-low: var(--md3-surface-container-low);
+  --color-surface-container: var(--md3-surface-container);
+  --color-surface-container-high: var(--md3-surface-container-high);
+  --color-surface-container-highest: var(--md3-surface-container-highest);
 
   /* Semantic text — use as `text-fg`, `text-fg-muted`, `text-fg-dim` */
-  --color-fg: #ececee;
-  --color-fg-muted: #9a9aa2;
-  --color-fg-dim: #6b6b73;
+  --color-fg: var(--text-primary);
+  --color-fg-muted: var(--text-muted);
+  --color-fg-dim: var(--text-dim);
 
   /* Status — use as `text-status-running`, `bg-status-stopped` */
   --color-status-running: #10B981;

package/src/styles/themes.css

@@ -0,0 +1,107 @@
+/* Named brand themes. Each scope overrides only the spine tokens in tokens.css;
+ * components re-skin automatically because they reference the semantic tokens
+ * (bg-card / border-border / surface-container, mapped in theme.css). Apply with
+ * data-theme="<name>" on a wrapper (or <html>). The default :root / .dark spine
+ * is the neutral "tangle" theme; "<name>-light" scopes are the light variants. */
+
+/* ───────────────────────── Aubergine (bazaar) — dark purple ──────────────── */
+[data-theme="aubergine"] {
+  --hsl-background: 258 43% 7%;   --hsl-foreground: 258 50% 97%;
+  --hsl-card: 258 39% 19%;        --hsl-card-foreground: 258 50% 97%;
+  --hsl-popover: 258 37% 25%;     --hsl-popover-foreground: 258 50% 97%;
+  --hsl-primary: 232 100% 75%;    --hsl-primary-foreground: 258 45% 8%;
+  --hsl-secondary: 257 42% 13%;   --hsl-muted: 257 42% 13%;
+  --hsl-muted-foreground: 258 22% 64%;
+  --hsl-accent: 258 39% 19%;      --hsl-border: 258 28% 27%;
+  --hsl-input: 257 42% 13%;       --hsl-ring: 232 100% 75%;
+  --depth-1: #0f0a1a; --depth-2: #1a1330; --depth-3: #271d42; --depth-4: #362858;
+  --bg-root: #0f0a1a; --bg-card: var(--depth-3); --bg-input: var(--depth-2);
+  --md3-surface-container-lowest: #140d24; --md3-surface-container-low: #1a1330;
+  --md3-surface-container: #221842; --md3-surface-container-high: #271d42;
+  --md3-surface-container-highest: #362858; --md3-outline-variant: #392d52;
+  --border-subtle: rgba(183,157,255,0.10); --border-default: rgba(183,157,255,0.18);
+  --border-hover: rgba(183,157,255,0.34); --accent-text: #b69dff;
+  --brand-primary: #8090ff; --brand-glow: #b69dff;
+  --text-primary: #f4f1fd; --text-secondary: #c6bcdf; --text-muted: #998fb6; --text-dim: #6c6289;
+}
+[data-theme="aubergine-light"] {
+  --hsl-background: 258 60% 96%;  --hsl-foreground: 258 45% 11%;
+  --hsl-card: 0 0% 100%;          --hsl-card-foreground: 258 45% 11%;
+  --hsl-popover: 0 0% 100%;       --hsl-popover-foreground: 258 45% 11%;
+  --hsl-primary: 258 70% 50%;     --hsl-primary-foreground: 0 0% 100%;
+  --hsl-secondary: 258 45% 92%;   --hsl-muted: 258 45% 92%;
+  --hsl-muted-foreground: 258 18% 42%;
+  --hsl-accent: 258 45% 92%;      --hsl-border: 258 30% 88%;
+  --hsl-input: 258 30% 88%;       --hsl-ring: 258 70% 50%;
+  --depth-1: #f4f1fc; --depth-2: #ece6f8; --depth-3: #ffffff; --depth-4: #ffffff;
+  --bg-root: #f4f1fc; --bg-card: #ffffff; --bg-input: #ece6f8;
+  --md3-surface-container-lowest: #ffffff; --md3-surface-container-low: #faf8fe;
+  --md3-surface-container: #f4f1fc; --md3-surface-container-high: #ece6f8;
+  --md3-surface-container-highest: #e4dcf4; --md3-outline-variant: #e0d8f0;
+  --border-subtle: rgba(60,32,110,0.10); --border-default: rgba(60,32,110,0.16);
+  --border-hover: rgba(60,32,110,0.30); --accent-text: #6d28d9;
+  --brand-primary: #6d28d9; --brand-glow: #8b5cf6;
+  --text-primary: #160f22; --text-secondary: #3f3460; --text-muted: #6c6289; --text-dim: #8a82a6;
+}
+
+/* ───────────────────────── Arena — emerald / green accent ────────────────── */
+[data-theme="arena"] {
+  --hsl-background: 160 16% 6%;   --hsl-foreground: 150 20% 96%;
+  --hsl-card: 158 14% 12%;        --hsl-card-foreground: 150 20% 96%;
+  --hsl-popover: 158 13% 16%;     --hsl-popover-foreground: 150 20% 96%;
+  --hsl-primary: 160 84% 39%;     --hsl-primary-foreground: 160 60% 8%;
+  --hsl-secondary: 158 12% 12%;   --hsl-muted: 158 12% 12%;
+  --hsl-muted-foreground: 152 12% 62%;
+  --hsl-accent: 158 14% 14%;      --hsl-border: 158 14% 18%;
+  --hsl-input: 158 12% 12%;       --hsl-ring: 160 84% 45%;
+  --depth-1: #0a0f0c; --depth-2: #131b16; --depth-3: #1b261f; --depth-4: #233328;
+  --bg-root: #0a0f0c; --bg-card: var(--depth-3); --bg-input: var(--depth-2);
+  --md3-surface-container-lowest: #070b08; --md3-surface-container-low: #131b16;
+  --md3-surface-container: #182019; --md3-surface-container-high: #1b261f;
+  --md3-surface-container-highest: #233328; --md3-outline-variant: #2a3a31;
+  --border-subtle: rgba(52,211,153,0.10); --border-default: rgba(52,211,153,0.18);
+  --border-hover: rgba(52,211,153,0.32); --accent-text: #34d399;
+  --brand-primary: #10b981; --brand-glow: #34d399;
+  --text-primary: #ecfdf5; --text-secondary: #c2e8d6; --text-muted: #8fb6a3; --text-dim: #5f8472;
+}
+[data-theme="arena-light"] {
+  --hsl-background: 150 30% 96%;  --hsl-foreground: 158 30% 10%;
+  --hsl-card: 0 0% 100%;          --hsl-card-foreground: 158 30% 10%;
+  --hsl-popover: 0 0% 100%;       --hsl-popover-foreground: 158 30% 10%;
+  --hsl-primary: 160 84% 30%;     --hsl-primary-foreground: 0 0% 100%;
+  --hsl-secondary: 150 25% 92%;   --hsl-muted: 150 25% 92%;
+  --hsl-muted-foreground: 158 14% 40%;
+  --hsl-accent: 150 25% 92%;      --hsl-border: 150 20% 86%;
+  --hsl-input: 150 20% 86%;       --hsl-ring: 160 84% 30%;
+  --depth-1: #f0f6f2; --depth-2: #e6f0ea; --depth-3: #ffffff; --depth-4: #ffffff;
+  --bg-root: #f0f6f2; --bg-card: #ffffff; --bg-input: #e6f0ea;
+  --md3-surface-container-lowest: #ffffff; --md3-surface-container-low: #f6fbf8;
+  --md3-surface-container: #f0f6f2; --md3-surface-container-high: #e6f0ea;
+  --md3-surface-container-highest: #dcebe2; --md3-outline-variant: #d7e8de;
+  --border-subtle: rgba(6,95,70,0.10); --border-default: rgba(6,95,70,0.16);
+  --border-hover: rgba(6,95,70,0.30); --accent-text: #047857;
+  --brand-primary: #059669; --brand-glow: #10b981;
+  --text-primary: #06231a; --text-secondary: #285048; --text-muted: #5f8472; --text-dim: #82a699;
+}
+
+/* ───────────────────────── Tangle (neutral) — light variant alias ─────────── */
+/* dark = default :root spine; this is its light mode for the showcase. */
+[data-theme="tangle-light"] {
+  --hsl-background: 240 33% 98%;  --hsl-foreground: 245 32% 14%;
+  --hsl-card: 0 0% 100%;          --hsl-card-foreground: 245 32% 14%;
+  --hsl-popover: 0 0% 100%;       --hsl-popover-foreground: 245 32% 14%;
+  --hsl-primary: 239 84% 60%;     --hsl-primary-foreground: 0 0% 100%;
+  --hsl-secondary: 240 30% 95%;   --hsl-muted: 240 28% 95%;
+  --hsl-muted-foreground: 240 8% 42%;
+  --hsl-accent: 240 30% 95%;      --hsl-border: 240 20% 90%;
+  --hsl-input: 240 20% 90%;       --hsl-ring: 239 84% 60%;
+  --depth-1: #f4f4f9; --depth-2: #edecf4; --depth-3: #ffffff; --depth-4: #ffffff;
+  --bg-root: #f4f4f9; --bg-card: #ffffff; --bg-input: #edecf4;
+  --md3-surface-container-lowest: #ffffff; --md3-surface-container-low: #f8f8fc;
+  --md3-surface-container: #f4f4f9; --md3-surface-container-high: #edecf4;
+  --md3-surface-container-highest: #e5e4ee; --md3-outline-variant: #e2e1ec;
+  --border-subtle: rgba(20,20,40,0.08); --border-default: rgba(20,20,40,0.14);
+  --border-hover: rgba(20,20,40,0.26); --accent-text: #4f46e5;
+  --brand-primary: #6366f1; --brand-glow: #818cf8;
+  --text-primary: #15131f; --text-secondary: #3f3a52; --text-muted: #6a6680; --text-dim: #9490a6;
+}

package/src/styles/tokens.css

@@ -9,15 +9,15 @@
 [data-sandbox-ui],
 [data-theme="dark"],
 .dark {
-  --md3-surface: #0a0a14;
-  --md3-surface-dim: #07070d;
-  --md3-surface-bright: #1b1a2c;
-  --md3-surface-container-lowest: #000001;
-  --md3-surface-container-low: #0d0c18;
-  --md3-surface-container: #11101e;
-  --md3-surface-container-high: #171624;
-  --md3-surface-container-highest: #1f1e30;
-  --md3-surface-variant: #1f1e30;
+  --md3-surface: #16161f;
+  --md3-surface-dim: #111119;
+  --md3-surface-bright: #2a2940;
+  --md3-surface-container-lowest: #101017;
+  --md3-surface-container-low: #16161f;
+  --md3-surface-container: #1c1b27;
+  --md3-surface-container-high: #232231;
+  --md3-surface-container-highest: #2c2b3d;
+  --md3-surface-variant: #2c2b3d;
   --md3-on-surface: #fdfdfd;
   --md3-on-surface-variant: #aaa8b8;
 
@@ -36,8 +36,8 @@
   --md3-on-secondary-container: #E8E5FF;
 
   --md3-tertiary: #10B981;
-  --md3-outline: #434260;
-  --md3-outline-variant: #2A293D;
+  --md3-outline: #4a4965;
+  --md3-outline-variant: #34324a;
 
   --md3-error: #ff5277;
   --md3-error-dim: #eb2855;
@@ -51,24 +51,24 @@
   --md3-surface-tint: #818CF8;
 
   /* Semantic HSL bridge — flat neutral spine (Tangle Quiet) */
-  --hsl-background: 240 8% 5%;     /* #0b0b0d */
+  --hsl-background: 240 7% 9%;     /* #15151a canvas — lifted off pure black */
   --hsl-foreground: 240 6% 93%;    /* #ececee */
-  --hsl-card: 240 5% 8%;           /* #141416 surface */
+  --hsl-card: 240 5% 13%;          /* #1f1f23 surface, clearly above canvas */
   --hsl-card-foreground: 240 6% 93%;
-  --hsl-popover: 240 4% 13%;       /* #202023 elevated */
+  --hsl-popover: 240 5% 17%;       /* #28282d elevated */
   --hsl-popover-foreground: 240 6% 93%;
   --hsl-primary: 239 84% 67%;
   --hsl-primary-foreground: 0 0% 100%;
-  --hsl-secondary: 240 5% 11%;     /* #1a1a1d surface-2 */
+  --hsl-secondary: 240 5% 15%;     /* #242428 surface-2 */
   --hsl-secondary-foreground: 240 6% 93%;
-  --hsl-muted: 240 5% 11%;         /* #1a1a1d — neutral hover well */
-  --hsl-muted-foreground: 240 4% 62%;  /* #9a9aa2 text-muted */
-  --hsl-accent: 240 5% 11%;        /* neutral hover (indigo lives in accent-surface-strong) */
+  --hsl-muted: 240 5% 15%;         /* #242428 — neutral hover well */
+  --hsl-muted-foreground: 240 4% 64%;  /* #9c9ca6 text-muted */
+  --hsl-accent: 240 5% 15%;        /* neutral hover (indigo lives in accent-surface-strong) */
   --hsl-accent-foreground: 240 6% 93%;
   --hsl-destructive: 348 90% 60%;
   --hsl-destructive-foreground: 0 0% 100%;
-  --hsl-border: 240 3% 13%;        /* hairline ≈ rgba(255,255,255,0.07) */
-  --hsl-input: 240 5% 11%;
+  --hsl-border: 240 5% 16%;        /* soft edge — fill carries separation, not the line */
+  --hsl-input: 240 5% 15%;
   --hsl-ring: 239 84% 67%;
   --hsl-success: 160 84% 39%;
   --hsl-warning: 40 94% 56%;
@@ -100,20 +100,20 @@
   --info: var(--hsl-info);
 
   /* Sidebar tokens — flat surface + hairline */
-  --sidebar-background: 240 5% 8%;   /* #141416 surface */
+  --sidebar-background: 240 6% 11%;  /* #1a1a1f surface */
   --sidebar-foreground: 240 6% 93%;
   --sidebar-primary: 239 84% 67%;
   --sidebar-primary-foreground: 0 0% 100%;
-  --sidebar-accent: 240 5% 11%;      /* neutral hover */
+  --sidebar-accent: 240 5% 15%;      /* neutral hover */
   --sidebar-accent-foreground: 240 6% 93%;
-  --sidebar-border: 240 3% 13%;      /* hairline */
+  --sidebar-border: 240 5% 16%;      /* soft edge */
   --sidebar-ring: 239 84% 67%;
 
   /* Depth scale — flat neutral spine (Tangle Quiet) */
-  --depth-1: #0b0b0d;
-  --depth-2: #141416;
-  --depth-3: #1a1a1d;
-  --depth-4: #202023;
+  --depth-1: #15151a;
+  --depth-2: #1f1f23;
+  --depth-3: #26262b;
+  --depth-4: #2e2e34;
 
   /* Status colors */
   --status-running: #10B981;
@@ -172,7 +172,7 @@
   --accent-text: #b9bffb;
 
   /* Surfaces — flat single-neutral (no radial mesh) */
-  --bg-root: #0b0b0d;
+  --bg-root: #15151a;
   --bg-dark: var(--depth-1);
   --bg-card: var(--depth-2);
   --bg-elevated: var(--depth-4);