@tangle-network/brand 0.7.0 → 0.8.1

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changelog
 
+## 0.8.1
+
+### Patch Changes
+
+- d18fce7: Fix `[data-theme]` scopes not re-skinning components, and lift the aubergine palette off near-black so it reads as purple.
+
+  The named themes changed `--hsl-*` spine vars, but Tailwind utilities (`bg-card`, `bg-primary`, `border-border`, `bg-surface-container*`) read the `--color-*` layer, which is declared only at `:root` — so its computed neutral value was inherited by themed subtrees regardless of the spine override (a double-indirection custom-property inheritance trap). Each `[data-theme]` scope now redeclares the `--color-*` layer directly, forcing it to recompute from that element's own `--hsl-*`. Aubergine's base lightness is raised (~7%→12–20% L, higher saturation) so surfaces read aubergine-purple instead of black.
+
+## 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

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.7.0",
+  "version": "0.8.1",
   "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/themes.css

@@ -0,0 +1,148 @@
+/* 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. */
+
+/* Bridge — the actual re-skin mechanism. Tailwind utilities read the --color-*
+ * layer (theme.css @theme: `bg-card` → var(--color-card) = hsl(var(--card))).
+ * Both --color-* and its --card/--hsl-card source are declared only at :root, so
+ * a descendant [data-theme] that changes --hsl-card never re-substitutes the
+ * :root-computed --color-card the utility consumes — the value is frozen at the
+ * root color (double-indirection inheritance trap). Redeclaring the --color-*
+ * layer directly on any themed element forces each one to recompute from that
+ * element's own --hsl-*. Tokens a theme doesn't override fall back to the
+ * inherited neutral --hsl-* (all defined at :root), so this is always valid. */
+[data-theme] {
+  --color-background: hsl(var(--hsl-background));
+  --color-foreground: hsl(var(--hsl-foreground));
+  --color-card: hsl(var(--hsl-card));
+  --color-card-foreground: hsl(var(--hsl-card-foreground));
+  --color-popover: hsl(var(--hsl-popover));
+  --color-popover-foreground: hsl(var(--hsl-popover-foreground));
+  --color-primary: hsl(var(--hsl-primary));
+  --color-primary-foreground: hsl(var(--hsl-primary-foreground));
+  --color-secondary: hsl(var(--hsl-secondary));
+  --color-secondary-foreground: hsl(var(--hsl-secondary-foreground));
+  --color-muted: hsl(var(--hsl-muted));
+  --color-muted-foreground: hsl(var(--hsl-muted-foreground));
+  --color-accent: hsl(var(--hsl-accent));
+  --color-accent-foreground: hsl(var(--hsl-accent-foreground));
+  --color-destructive: hsl(var(--hsl-destructive));
+  --color-destructive-foreground: hsl(var(--hsl-destructive-foreground));
+  --color-border: hsl(var(--hsl-border));
+  --color-input: hsl(var(--hsl-input));
+  --color-ring: hsl(var(--hsl-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);
+  --color-fg: var(--text-primary);
+  --color-fg-muted: var(--text-muted);
+  --color-fg-dim: var(--text-dim);
+}
+
+/* ───────────────────────── Aubergine (bazaar) — dark purple ──────────────── */
+[data-theme="aubergine"] {
+  /* Base lifted off near-black: at ~7% L the 258 hue read black; ~13-20% L with
+   * higher saturation makes the surfaces read unmistakably aubergine-purple. */
+  --hsl-background: 258 44% 12%;  --hsl-foreground: 258 50% 97%;
+  --hsl-card: 258 40% 20%;        --hsl-card-foreground: 258 50% 97%;
+  --hsl-popover: 258 40% 24%;     --hsl-popover-foreground: 258 50% 97%;
+  --hsl-primary: 250 100% 76%;    --hsl-primary-foreground: 258 45% 10%;
+  --hsl-secondary: 258 38% 17%;   --hsl-muted: 258 38% 17%;
+  --hsl-muted-foreground: 258 26% 70%;
+  --hsl-accent: 258 40% 24%;      --hsl-border: 258 32% 30%;
+  --hsl-input: 258 38% 17%;       --hsl-ring: 250 100% 76%;
+  --depth-1: #1a1230; --depth-2: #241a42; --depth-3: #2f2253; --depth-4: #3d2d68;
+  --bg-root: #1a1230; --bg-card: var(--depth-3); --bg-input: var(--depth-2);
+  --md3-surface-container-lowest: #150e28; --md3-surface-container-low: #241a42;
+  --md3-surface-container: #2a1f4c; --md3-surface-container-high: #2f2253;
+  --md3-surface-container-highest: #3d2d68; --md3-outline-variant: #463571;
+  --border-subtle: rgba(183,157,255,0.12); --border-default: rgba(183,157,255,0.22);
+  --border-hover: rgba(183,157,255,0.40); --accent-text: #c4b0ff;
+  --brand-primary: #8f8bff; --brand-glow: #c4b0ff;
+  --text-primary: #f4f1fd; --text-secondary: #cec4e8; --text-muted: #a99fc8; --text-dim: #786d99;
+}
+[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;
+}