@tangle-network/brand 0.7.0 → 0.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/README.md +3 -1
  3. package/package.json +1 -1
  4. package/src/styles/index.css +1 -0
  5. package/src/styles/themes.css +107 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,14 @@
1
1
  # Changelog
2
2
 
3
+ ## 0.8.0
4
+
5
+ ### Minor Changes
6
+
7
+ - 46592b3: Calmer chat/run design + named multi-theme system.
8
+
9
+ - `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).
10
+ - `@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.
11
+
3
12
  ## 0.7.0
4
13
 
5
14
  ### Minor Changes
package/README.md CHANGED
@@ -2,7 +2,9 @@
2
2
 
3
3
  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).
4
4
 
5
- **Scope:** tokens, not components. Components live in `@tangle-network/sandbox-ui`.
5
+ **Scope:** tokens, not components. Shared components live in `@tangle-network/ui`; product-specific components stay in their product repos.
6
+
7
+ For the broader visual, copy, graphic, and component standards, see the repo-level [brand guidelines](../../docs/brand-guidelines.md).
6
8
 
7
9
  ## Install
8
10
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tangle-network/brand",
3
- "version": "0.7.0",
3
+ "version": "0.8.0",
4
4
  "description": "Tangle brand system — design tokens, logo, Tailwind v4 theme. Single source of truth for every Tangle app.",
5
5
  "type": "module",
6
6
  "license": "MIT",
package/src/styles/index.css CHANGED
@@ -7,4 +7,5 @@
7
7
 
8
8
  @import "./tokens.css";
9
9
  @import "./theme.css";
10
+ @import "./themes.css";
10
11
  @import "./globals.css";
package/src/styles/themes.css ADDED
@@ -0,0 +1,107 @@
1
+ /* Named brand themes. Each scope overrides only the spine tokens in tokens.css;
2
+ * components re-skin automatically because they reference the semantic tokens
3
+ * (bg-card / border-border / surface-container, mapped in theme.css). Apply with
4
+ * data-theme="<name>" on a wrapper (or <html>). The default :root / .dark spine
5
+ * is the neutral "tangle" theme; "<name>-light" scopes are the light variants. */
6
+
7
+ /* ───────────────────────── Aubergine (bazaar) — dark purple ──────────────── */
8
+ [data-theme="aubergine"] {
9
+ --hsl-background: 258 43% 7%; --hsl-foreground: 258 50% 97%;
10
+ --hsl-card: 258 39% 19%; --hsl-card-foreground: 258 50% 97%;
11
+ --hsl-popover: 258 37% 25%; --hsl-popover-foreground: 258 50% 97%;
12
+ --hsl-primary: 232 100% 75%; --hsl-primary-foreground: 258 45% 8%;
13
+ --hsl-secondary: 257 42% 13%; --hsl-muted: 257 42% 13%;
14
+ --hsl-muted-foreground: 258 22% 64%;
15
+ --hsl-accent: 258 39% 19%; --hsl-border: 258 28% 27%;
16
+ --hsl-input: 257 42% 13%; --hsl-ring: 232 100% 75%;
17
+ --depth-1: #0f0a1a; --depth-2: #1a1330; --depth-3: #271d42; --depth-4: #362858;
18
+ --bg-root: #0f0a1a; --bg-card: var(--depth-3); --bg-input: var(--depth-2);
19
+ --md3-surface-container-lowest: #140d24; --md3-surface-container-low: #1a1330;
20
+ --md3-surface-container: #221842; --md3-surface-container-high: #271d42;
21
+ --md3-surface-container-highest: #362858; --md3-outline-variant: #392d52;
22
+ --border-subtle: rgba(183,157,255,0.10); --border-default: rgba(183,157,255,0.18);
23
+ --border-hover: rgba(183,157,255,0.34); --accent-text: #b69dff;
24
+ --brand-primary: #8090ff; --brand-glow: #b69dff;
25
+ --text-primary: #f4f1fd; --text-secondary: #c6bcdf; --text-muted: #998fb6; --text-dim: #6c6289;
26
+ }
27
+ [data-theme="aubergine-light"] {
28
+ --hsl-background: 258 60% 96%; --hsl-foreground: 258 45% 11%;
29
+ --hsl-card: 0 0% 100%; --hsl-card-foreground: 258 45% 11%;
30
+ --hsl-popover: 0 0% 100%; --hsl-popover-foreground: 258 45% 11%;
31
+ --hsl-primary: 258 70% 50%; --hsl-primary-foreground: 0 0% 100%;
32
+ --hsl-secondary: 258 45% 92%; --hsl-muted: 258 45% 92%;
33
+ --hsl-muted-foreground: 258 18% 42%;
34
+ --hsl-accent: 258 45% 92%; --hsl-border: 258 30% 88%;
35
+ --hsl-input: 258 30% 88%; --hsl-ring: 258 70% 50%;
36
+ --depth-1: #f4f1fc; --depth-2: #ece6f8; --depth-3: #ffffff; --depth-4: #ffffff;
37
+ --bg-root: #f4f1fc; --bg-card: #ffffff; --bg-input: #ece6f8;
38
+ --md3-surface-container-lowest: #ffffff; --md3-surface-container-low: #faf8fe;
39
+ --md3-surface-container: #f4f1fc; --md3-surface-container-high: #ece6f8;
40
+ --md3-surface-container-highest: #e4dcf4; --md3-outline-variant: #e0d8f0;
41
+ --border-subtle: rgba(60,32,110,0.10); --border-default: rgba(60,32,110,0.16);
42
+ --border-hover: rgba(60,32,110,0.30); --accent-text: #6d28d9;
43
+ --brand-primary: #6d28d9; --brand-glow: #8b5cf6;
44
+ --text-primary: #160f22; --text-secondary: #3f3460; --text-muted: #6c6289; --text-dim: #8a82a6;
45
+ }
46
+
47
+ /* ───────────────────────── Arena — emerald / green accent ────────────────── */
48
+ [data-theme="arena"] {
49
+ --hsl-background: 160 16% 6%; --hsl-foreground: 150 20% 96%;
50
+ --hsl-card: 158 14% 12%; --hsl-card-foreground: 150 20% 96%;
51
+ --hsl-popover: 158 13% 16%; --hsl-popover-foreground: 150 20% 96%;
52
+ --hsl-primary: 160 84% 39%; --hsl-primary-foreground: 160 60% 8%;
53
+ --hsl-secondary: 158 12% 12%; --hsl-muted: 158 12% 12%;
54
+ --hsl-muted-foreground: 152 12% 62%;
55
+ --hsl-accent: 158 14% 14%; --hsl-border: 158 14% 18%;
56
+ --hsl-input: 158 12% 12%; --hsl-ring: 160 84% 45%;
57
+ --depth-1: #0a0f0c; --depth-2: #131b16; --depth-3: #1b261f; --depth-4: #233328;
58
+ --bg-root: #0a0f0c; --bg-card: var(--depth-3); --bg-input: var(--depth-2);
59
+ --md3-surface-container-lowest: #070b08; --md3-surface-container-low: #131b16;
60
+ --md3-surface-container: #182019; --md3-surface-container-high: #1b261f;
61
+ --md3-surface-container-highest: #233328; --md3-outline-variant: #2a3a31;
62
+ --border-subtle: rgba(52,211,153,0.10); --border-default: rgba(52,211,153,0.18);
63
+ --border-hover: rgba(52,211,153,0.32); --accent-text: #34d399;
64
+ --brand-primary: #10b981; --brand-glow: #34d399;
65
+ --text-primary: #ecfdf5; --text-secondary: #c2e8d6; --text-muted: #8fb6a3; --text-dim: #5f8472;
66
+ }
67
+ [data-theme="arena-light"] {
68
+ --hsl-background: 150 30% 96%; --hsl-foreground: 158 30% 10%;
69
+ --hsl-card: 0 0% 100%; --hsl-card-foreground: 158 30% 10%;
70
+ --hsl-popover: 0 0% 100%; --hsl-popover-foreground: 158 30% 10%;
71
+ --hsl-primary: 160 84% 30%; --hsl-primary-foreground: 0 0% 100%;
72
+ --hsl-secondary: 150 25% 92%; --hsl-muted: 150 25% 92%;
73
+ --hsl-muted-foreground: 158 14% 40%;
74
+ --hsl-accent: 150 25% 92%; --hsl-border: 150 20% 86%;
75
+ --hsl-input: 150 20% 86%; --hsl-ring: 160 84% 30%;
76
+ --depth-1: #f0f6f2; --depth-2: #e6f0ea; --depth-3: #ffffff; --depth-4: #ffffff;
77
+ --bg-root: #f0f6f2; --bg-card: #ffffff; --bg-input: #e6f0ea;
78
+ --md3-surface-container-lowest: #ffffff; --md3-surface-container-low: #f6fbf8;
79
+ --md3-surface-container: #f0f6f2; --md3-surface-container-high: #e6f0ea;
80
+ --md3-surface-container-highest: #dcebe2; --md3-outline-variant: #d7e8de;
81
+ --border-subtle: rgba(6,95,70,0.10); --border-default: rgba(6,95,70,0.16);
82
+ --border-hover: rgba(6,95,70,0.30); --accent-text: #047857;
83
+ --brand-primary: #059669; --brand-glow: #10b981;
84
+ --text-primary: #06231a; --text-secondary: #285048; --text-muted: #5f8472; --text-dim: #82a699;
85
+ }
86
+
87
+ /* ───────────────────────── Tangle (neutral) — light variant alias ─────────── */
88
+ /* dark = default :root spine; this is its light mode for the showcase. */
89
+ [data-theme="tangle-light"] {
90
+ --hsl-background: 240 33% 98%; --hsl-foreground: 245 32% 14%;
91
+ --hsl-card: 0 0% 100%; --hsl-card-foreground: 245 32% 14%;
92
+ --hsl-popover: 0 0% 100%; --hsl-popover-foreground: 245 32% 14%;
93
+ --hsl-primary: 239 84% 60%; --hsl-primary-foreground: 0 0% 100%;
94
+ --hsl-secondary: 240 30% 95%; --hsl-muted: 240 28% 95%;
95
+ --hsl-muted-foreground: 240 8% 42%;
96
+ --hsl-accent: 240 30% 95%; --hsl-border: 240 20% 90%;
97
+ --hsl-input: 240 20% 90%; --hsl-ring: 239 84% 60%;
98
+ --depth-1: #f4f4f9; --depth-2: #edecf4; --depth-3: #ffffff; --depth-4: #ffffff;
99
+ --bg-root: #f4f4f9; --bg-card: #ffffff; --bg-input: #edecf4;
100
+ --md3-surface-container-lowest: #ffffff; --md3-surface-container-low: #f8f8fc;
101
+ --md3-surface-container: #f4f4f9; --md3-surface-container-high: #edecf4;
102
+ --md3-surface-container-highest: #e5e4ee; --md3-outline-variant: #e2e1ec;
103
+ --border-subtle: rgba(20,20,40,0.08); --border-default: rgba(20,20,40,0.14);
104
+ --border-hover: rgba(20,20,40,0.26); --accent-text: #4f46e5;
105
+ --brand-primary: #6366f1; --brand-glow: #818cf8;
106
+ --text-primary: #15131f; --text-secondary: #3f3a52; --text-muted: #6a6680; --text-dim: #9490a6;
107
+ }