@tangle-network/sandbox-ui 1.1.7 → 1.1.10

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 (21) hide show
  1. package/README.md +1 -1
  2. package/dist/{dashboard-ClKA3opr.js → dashboard-DZ6FcC_Z.js} +3 -3
  3. package/dist/dashboard.js +1 -1
  4. package/dist/globals.css +1957 -1556
  5. package/dist/index-CFJ1iJhu.d.ts +26 -0
  6. package/dist/index.d.ts +3 -4
  7. package/dist/index.js +5 -289
  8. package/dist/integrations.d.ts +2 -1
  9. package/dist/integrations.js +6 -1
  10. package/dist/primitives-B-76QdOU.js +23 -0
  11. package/dist/primitives.d.ts +2 -3
  12. package/dist/primitives.js +1 -2
  13. package/dist/styles.css +1957 -1556
  14. package/dist/tailwind.css +4 -17
  15. package/dist/tokens.css +452 -851
  16. package/dist/{workbench-DOgYO3Zg.js → workbench-Ca6ZqAs5.js} +1 -1
  17. package/dist/workbench.js +1 -1
  18. package/package.json +4 -4
  19. package/dist/index-BAEvGqrn.d.ts +0 -26
  20. package/dist/primitives-CiwDp4-0.js +0 -32
  21. package/dist/rolldown-runtime-782esTHO.js +0 -26
package/dist/tokens.css CHANGED
@@ -1,29 +1,5 @@
1
- /* Tangle design tokens — the single palette every Tangle surface renders from.
2
- *
3
- * The surface ladder is near-neutral grey with a faint indigo cast; the indigo
4
- * accent is trim, never field. Each plane steps at least 4.4 OKLCH L off the
5
- * plane it sits on (surface-ladder.test.ts), so a card, a card in a card and a
6
- * field each read by their own fill. Dark adds a 1.5:1 hairline and a top edge
7
- * highlight, because a black shadow on a dark canvas renders as nothing; light
8
- * is white paper on a grey canvas, separated by shadow.
9
- *
10
- * Each colour is declared ONCE, as a role (a plane, an ink tier, one of four
11
- * indigos, one ink per status hue), and every other name of that colour is an
12
- * alias of it, so a retune or a named theme moves one value and every family
13
- * follows: hsl-*, md3-*, depth-*, bg-*, status-*, surface-*, code-* and brand-*.
14
- *
15
- * Apps consume this spine as-is. If a product needs its own accent identity,
16
- * add a named theme in named-themes.css (`data-theme="<name>"`) — do NOT re-declare
17
- * these tokens in the app, or its surfaces silently stop tracking the brand. */
18
-
19
- /* Dark is the default theme (`:root`/`[data-sandbox-ui]`). It also responds to
20
- * the standard `[data-theme="dark"]` / `.dark` switch so any consumer can pin or
21
- * toggle a theme without inventing an ad-hoc `data-sandbox-theme` name. */
22
- /* Seed a complete baseline on every supported boundary BEFORE mode overrides.
23
- * Inherited var() aliases are already substituted at their parent; declaring
24
- * them here lets a nested light/dark/named scope resolve its own palette.
25
- * Light scopes are deliberately included in this baseline, then override it
26
- * below. Named themes only author their product-specific differences. */
1
+ /* palette:begin — generated by scripts/gen-ladders.mjs; edit palette.mjs or palette-template.css. */
2
+ /* Palette layout only. Colour inputs live in palette.mjs; gen-ladders.mjs writes the public stylesheets. */
27
3
  :root,
28
4
  [data-sandbox-ui],
29
5
  [data-sandbox-theme="vault"],
@@ -45,515 +21,295 @@
45
21
  .light,
46
22
  .dark {
47
23
  color-scheme: dark;
48
-
49
- /* ── Planes ─────────────────────────────────────────────────────────────
50
- * One ladder, authored once as HSL channels because the shadcn layer reads
51
- * hsl(var(--hsl-*)); every hex plane below is derived from it, so a step
52
- * moves in one place. OKLCH L x100: page 15.0, card 21.7, raised 26.6,
53
- * raised-2 and overlay 31.6, each at least 4.4 over the plane it sits on.
54
- * The page is lifted off black so near-white ink keeps room for its tiers. */
55
- --hsl-background: 240 33% 6%; /* L0 page #0a0a14 */
56
- --hsl-input: 244 29% 9%; /* L1 chrome (the sidebar) and the legacy field fill #11101e */
57
- --hsl-card: 244 23% 12%; /* L2 card #191826 */
58
- --hsl-secondary: 249 24% 17.5%; /* L3 raised: a card in a card, and the hover well #252237 */
59
- --hsl-popover: 247 21% 23%; /* L4 raised-2 and overlay #312e47: a popover carries body text, so it sits on the top plane the ink ramp reaches */
60
- --hsl-muted: var(--hsl-secondary);
61
- --hsl-accent: var(--hsl-secondary); /* neutral hover; indigo lives in --accent-surface-strong */
62
- /* The floor of the ladder: the recessed page and the terminal well share it
63
- * because dark has no plane below L0 to give them. They stay two tokens
64
- * because they diverge in light, where the well is paper and the page grey. */
65
- --md3-surface-dim: #040408; /* 4.1 L under the L0 panel: the inset workspace surface needs >= 3 */
66
- --md3-surface-container-lowest: var(--md3-surface-dim);
67
- --md3-surface-bright: #232238;
68
- --md3-surface: hsl(var(--hsl-background));
69
- --md3-surface-container-low: hsl(var(--hsl-input));
70
- --md3-surface-container: hsl(var(--hsl-card));
71
- --md3-surface-container-high: hsl(var(--hsl-secondary));
72
- --md3-surface-container-highest: hsl(var(--hsl-popover));
73
- --md3-surface-variant: var(--md3-surface-container-high);
74
- --depth-1: var(--md3-surface);
75
- --depth-2: var(--md3-surface-container);
76
- --depth-3: var(--md3-surface-container-high);
77
- --depth-4: var(--md3-surface-container-highest);
78
- --bg-root: var(--md3-surface);
79
- --bg-dark: var(--depth-1);
80
- --bg-card: var(--depth-2);
81
- --bg-elevated: var(--depth-4);
82
- --bg-section: var(--depth-1);
83
- --bg-input: hsl(var(--hsl-input));
84
- /* Sidebar: L1 chrome, one step BELOW the canvas, so the nav reads as what the
85
- * content sits in front of rather than as another card. */
86
- --sidebar-background: var(--hsl-input);
87
- --sidebar-accent: var(--hsl-secondary);
88
- --md3-inverse-surface: #fdfdfd;
89
- --md3-inverse-on-surface: #000000;
90
-
91
- /* ── Ink ────────────────────────────────────────────────────────────────
92
- * Neutral on purpose: colour in the ink would compete with the one accent.
93
- * Near-white on the canvas is the glare end of the range, so the tiers sit
94
- * below it: 10.6 / 7.8 / 6.4 / 5.4 against the L2 card, solved against the
95
- * WHOLE ladder so the faintest tier still clears the 4.5:1 body floor on the
96
- * overlay plane. tokens.test.ts asserts every tier on every plane. */
97
- --hsl-foreground: 0 0% 90.1961%; /* #e6e6e6 */
98
- --hsl-muted-foreground: 240 5% 68%; /* #a9a9b1: the /70 and /60 caption derivatives still clear the large-text floor on the card */
99
- --text-primary: hsl(var(--hsl-foreground));
100
- --text-secondary: #c7c7c7;
101
- --text-muted: #b5b5b5;
102
- --text-dim: #a5a5a5;
103
- --hsl-card-foreground: var(--hsl-foreground);
104
- --hsl-popover-foreground: var(--hsl-foreground);
105
- --hsl-secondary-foreground: var(--hsl-foreground);
106
- --hsl-accent-foreground: var(--hsl-foreground);
107
- --sidebar-foreground: var(--hsl-foreground);
108
- --sidebar-accent-foreground: var(--hsl-foreground);
109
- --md3-on-surface: var(--text-primary);
110
- --md3-on-surface-variant: var(--text-muted);
111
- --md3-outline: #8e8e8e;
112
-
113
- /* ── Hairline ───────────────────────────────────────────────────────────
114
- * ONE role for every divider, card edge and table rule, so lines never
115
- * disagree. 1.5:1 against the card and 1.3:1 on the raised plane: quiet by
116
- * design, it states where a plane ends without boxing every panel.
117
- * --border-subtle and --border-default are its older names. */
118
- --hsl-border: 244 16% 25%; /* #37364a */
119
- --md3-outline-variant: hsl(var(--hsl-border));
120
- --sidebar-border: var(--hsl-border);
121
- --border-subtle: hsl(var(--hsl-border));
122
- --border-default: hsl(var(--hsl-border));
123
- --border-hover: rgba(255, 255, 255, 0.28);
124
-
125
- /* ── Accent: four indigos, each with one job ────────────────────────────
126
- * fill --hsl-primary carries white at 7.4:1: buttons, the CTA, the selected row at 30%
127
- * mark --brand-primary the brand indigo of the logo and marketing fills; never under text
128
- * line --brand-cool edges, chart accents, the focus ring family
129
- * ink --accent-text the bright indigo as TEXT and icon only: 6.7:1 on the card
130
- * Every other indigo name is one of these four, so a named theme that retints
131
- * the accent retints all of them. The ring is brighter than the fill on
132
- * purpose: it is non-text and must clear 3:1 on the canvas AND the card,
133
- * while the fill is tuned to carry white. */
134
- --hsl-primary: 246 54% 51%; /* fill #4c3fc6 */
135
- --hsl-primary-foreground: 0 0% 100%;
136
- --hsl-ring: 233 100% 87%;
137
- --brand-primary: #7C6CF6;
138
- --brand-cool: #818CF8;
139
- --accent-text: #A5B4FC;
140
- --brand-purple: #C7D2FE; /* the ink, softened: gradient text and ink on the deep field */
141
- --brand-strong: #2E2A5E; /* the deep field the softened ink sits on */
142
- --brand-strong-text: #ffffff;
143
- --brand-strong-text-muted: rgba(255, 255, 255, 0.7);
144
- --brand-strong-text-dim: rgba(255, 255, 255, 0.5);
145
- --brand-glow: var(--accent-text);
146
- --brand-vibrant: var(--brand-primary);
147
- --btn-primary-bg: hsl(var(--hsl-primary));
148
- --btn-primary-hover: #5a50d6;
149
- --btn-primary-text: #ffffff;
150
- --btn-cta-bg: var(--btn-primary-bg);
151
- --btn-cta-text: var(--btn-primary-text);
152
- --sidebar-primary: var(--hsl-primary);
153
- --sidebar-primary-foreground: var(--hsl-primary-foreground);
154
- --sidebar-ring: var(--hsl-ring);
155
- --md3-primary: var(--accent-text);
156
- --md3-primary-dim: var(--brand-primary);
157
- --md3-primary-container: var(--btn-primary-bg);
158
- --md3-on-primary: #ffffff;
159
- --md3-on-primary-container: var(--brand-purple);
160
- --md3-primary-fixed: var(--accent-text);
161
- --md3-primary-fixed-dim: var(--brand-cool);
162
- --md3-secondary: var(--brand-purple);
163
- --md3-secondary-dim: var(--accent-text);
164
- --md3-secondary-container: var(--brand-strong);
165
- --md3-on-secondary: var(--brand-purple);
166
- --md3-on-secondary-container: var(--brand-purple);
167
- --md3-inverse-primary: var(--btn-primary-bg);
168
- --md3-surface-tint: var(--accent-text);
169
- /* Accent wells: soft is the hover neutral, strong the active or selected row. */
170
- --accent-surface-soft: color-mix(in srgb, var(--accent-text) 7%, transparent);
171
- --accent-surface-strong: color-mix(in srgb, var(--btn-primary-bg) 30%, transparent);
172
- --bg-hover: var(--accent-surface-soft);
173
- --bg-selection: color-mix(in srgb, var(--brand-primary) 28%, transparent);
174
- --border-accent: color-mix(in srgb, var(--brand-cool) 35%, transparent);
175
- --border-accent-hover: color-mix(in srgb, var(--brand-cool) 50%, transparent);
176
- /* The indigo spark, kept ONLY for the logo mark and the send button. */
177
- --tangle-gradient: linear-gradient(135deg, var(--btn-primary-bg), var(--accent-text));
178
- --tangle-gradient-text: linear-gradient(135deg, var(--brand-purple), var(--accent-text));
179
- --accent-gradient-strong: linear-gradient(135deg, var(--btn-primary-bg), var(--brand-primary));
180
-
181
- /* ── Status: one ink, one wash, one border per hue ──────────────────────
182
- * The ink is pastel on purpose. A saturated fill vibrates on a 6% canvas,
183
- * and the ink already clears AA on every plane, so it is also the fill: a
184
- * status fill carries dark text, as the destructive one always has. The
185
- * shadcn channels are the source; the surface, status, md3, code and brand
186
- * names of each hue alias them. */
187
- --hsl-success: 154.7 60.2% 60.6%; /* #5ed7a4 */
188
- --hsl-warning: 41.5 88.2% 63.3%; /* #f4c14f */
189
- --hsl-destructive: 2.8 100% 83.1%; /* #ffada9 */
190
- --hsl-destructive-foreground: 0 60% 10%;
191
- --hsl-info: 199.7 100% 70.2%; /* #67cdff */
192
- --surface-success-text: hsl(var(--hsl-success));
193
- --surface-success-bg: #2f5146;
194
- --surface-success-border: #3c7760;
195
- --surface-warning-text: hsl(var(--hsl-warning));
196
- --surface-warning-bg: #4b4232;
197
- --surface-warning-border: #7a6236;
198
- --surface-danger-text: hsl(var(--hsl-destructive));
199
- --surface-danger-bg: #5a3b40;
200
- --surface-danger-border: #7d4d53;
201
- --surface-info-text: hsl(var(--hsl-info));
202
- --surface-info-bg: #2d4e67;
203
- --surface-info-border: #3d7292;
204
- --status-running: var(--surface-success-text);
205
- --status-creating: var(--accent-text);
206
- --status-stopped: var(--surface-warning-text);
207
- --status-warm: var(--surface-orange-text);
208
- --status-cold: var(--surface-info-text);
209
- --status-error: var(--surface-danger-text);
210
- --status-deleted: var(--text-dim);
211
- --brand-emerald: var(--surface-success-text);
212
- --md3-tertiary: var(--surface-success-text);
213
- --md3-tertiary-container: var(--surface-success-bg);
214
- --md3-error: var(--surface-danger-text);
215
- --md3-error-dim: color-mix(in srgb, var(--md3-error) 85%, black);
216
- --md3-error-container: var(--surface-danger-bg);
217
- --md3-on-error: hsl(var(--hsl-destructive-foreground));
218
- --md3-on-error-container: var(--surface-danger-text);
219
- /* ── shadcn aliases: the names @tangle-network/ui and Tailwind read ─────
220
- * Declared once; they re-resolve per theme through the --hsl-* spine. --input
221
- * is the input BORDER and the Switch off-track, a mid-tone that must stay
222
- * visible against a surface, so it is NOT the field fill (--bg-input). */
223
- --background: var(--hsl-background);
224
- --foreground: var(--hsl-foreground);
225
- --card: var(--hsl-card);
226
- --card-foreground: var(--hsl-card-foreground);
227
- --popover: var(--hsl-popover);
228
- --popover-foreground: var(--hsl-popover-foreground);
229
- --primary: var(--hsl-primary);
230
- --primary-foreground: var(--hsl-primary-foreground);
231
- --secondary: var(--hsl-secondary);
232
- --secondary-foreground: var(--hsl-secondary-foreground);
233
- --muted: var(--hsl-muted);
234
- --muted-foreground: var(--hsl-muted-foreground);
235
- --accent: var(--hsl-accent);
236
- --accent-foreground: var(--hsl-accent-foreground);
237
- --destructive: var(--hsl-destructive);
238
- --destructive-foreground: var(--hsl-destructive-foreground);
239
- --border: var(--hsl-border);
240
- --input: var(--hsl-muted-foreground);
241
- --ring: var(--hsl-ring);
242
- --success: var(--hsl-success);
243
- --warning: var(--hsl-warning);
244
- --error: var(--hsl-destructive);
245
- --info: var(--hsl-info);
246
-
24
+ --hsl-background: 246.6667 31.0345% 5.6863%; /* #0b0a13 */
25
+ --hsl-input: 245 26.087% 9.0196%; /* #12111d */
26
+ --hsl-card: 244.2857 22.5806% 12.1569%; /* #191826 */
27
+ --hsl-secondary: 243.3333 20.4545% 17.2549%; /* #242335 */
28
+ --hsl-popover: 242.7273 18.9655% 22.7451%; /* #302f45 */
29
+ --hsl-muted: var(--hsl-secondary); --hsl-accent: var(--hsl-secondary);
30
+ --md3-surface-dim: hsl(240 33.3333% 2.3529%);
31
+ --md3-surface-container-lowest: var(--md3-surface-dim); --md3-surface-bright: hsl(var(--hsl-popover));
32
+ --md3-surface: hsl(var(--hsl-background)); --md3-surface-container-low: hsl(var(--hsl-input));
33
+ --md3-surface-container: hsl(var(--hsl-card)); --md3-surface-container-high: hsl(var(--hsl-secondary));
34
+ --md3-surface-container-highest: hsl(var(--hsl-popover)); --md3-surface-variant: var(--md3-surface-container-high);
35
+ --depth-1: var(--md3-surface); --depth-2: var(--md3-surface-container);
36
+ --depth-3: var(--md3-surface-container-high); --depth-4: var(--md3-surface-container-highest);
37
+ --bg-root: var(--depth-1); --bg-dark: var(--depth-1);
38
+ --bg-card: var(--depth-2); --bg-elevated: var(--depth-4);
39
+ --bg-section: var(--depth-1); --bg-input: hsl(var(--hsl-input));
40
+ --sidebar-background: var(--hsl-input); --sidebar-accent: var(--hsl-secondary);
41
+ --md3-inverse-surface: hsl(0 0% 100%); --md3-inverse-on-surface: hsl(0 0% 0%);
42
+ --hsl-foreground: 0 0% 84.3137%; /* #d7d7d7 */
43
+ --hsl-muted-foreground: 0 0% 67.0588%; /* #ababab */
44
+ --text-primary: hsl(var(--hsl-foreground)); --text-secondary: hsl(0 0% 74.1176%);
45
+ --text-muted: hsl(0 0% 67.0588%); --text-dim: hsl(0 0% 60.3922%);
46
+ --hsl-card-foreground: var(--hsl-foreground); --hsl-popover-foreground: var(--hsl-foreground);
47
+ --hsl-secondary-foreground: var(--hsl-foreground); --hsl-accent-foreground: var(--hsl-foreground);
48
+ --sidebar-foreground: var(--hsl-foreground); --sidebar-accent-foreground: var(--hsl-foreground);
49
+ --md3-on-surface: var(--text-primary); --md3-on-surface-variant: var(--text-muted);
50
+ --md3-outline: hsl(var(--hsl-muted-foreground));
51
+ --hsl-border: 245 18.4615% 25.4902%; /* #37354d */
52
+ --md3-outline-variant: hsl(var(--hsl-border)); --sidebar-border: var(--hsl-border);
53
+ --border-subtle: hsl(var(--hsl-border)); --border-default: hsl(var(--hsl-border));
54
+ --border-hover: rgb(215 215 215 / 0.28);
55
+ --hsl-primary: 245.9504 54.2601% 56.2745%; /* #5f53cc */
56
+ --hsl-primary-foreground: 0 0% 100%; /* #ffffff */ --hsl-ring: 245.5556 93.1034% 88.6275%; /* #ccc7fd */
57
+ --brand-primary: hsl(245.5102 65.3333% 70.5882%); --brand-cool: hsl(246.0465 85.4305% 70.3922%);
58
+ --accent-text: hsl(245.5556 93.1034% 88.6275%); --brand-purple: hsl(245.1429 94.5946% 92.7451%);
59
+ --brand-strong: hsl(246 41.6667% 28.2353%);
60
+ --brand-strong-text: hsl(0 0% 100%); --brand-strong-text-muted: rgba(255, 255, 255, 0.7);
61
+ --brand-strong-text-dim: rgba(255, 255, 255, 0.5); --brand-glow: var(--accent-text);
62
+ --brand-vibrant: var(--brand-primary); --btn-primary-bg: hsl(var(--hsl-primary));
63
+ --btn-primary-hover: hsl(246.055 54.2289% 60.5882%); --btn-primary-text: hsl(0 0% 100%);
64
+ --btn-cta-bg: var(--btn-primary-bg); --btn-cta-text: var(--btn-primary-text);
65
+ --sidebar-primary: var(--hsl-primary); --sidebar-primary-foreground: var(--hsl-primary-foreground);
66
+ --sidebar-ring: var(--hsl-ring); --md3-primary: var(--accent-text);
67
+ --md3-primary-dim: var(--btn-primary-bg); --md3-primary-container: var(--btn-primary-bg);
68
+ --md3-on-primary: hsl(0 0% 100%); --md3-on-primary-container: var(--brand-purple);
69
+ --md3-primary-fixed: var(--accent-text); --md3-primary-fixed-dim: var(--brand-cool);
70
+ --md3-secondary: var(--brand-purple); --md3-secondary-dim: var(--accent-text);
71
+ --md3-secondary-container: var(--brand-strong); --md3-on-secondary: var(--brand-purple);
72
+ --md3-on-secondary-container: var(--brand-purple); --md3-inverse-primary: var(--btn-primary-bg);
73
+ --md3-surface-tint: var(--accent-text); --accent-surface-soft: color-mix(in srgb, var(--accent-text) 7%, transparent);
74
+ --accent-surface-strong: color-mix(in srgb, var(--btn-primary-bg) 30%, transparent); --bg-hover: color-mix(in srgb, var(--accent-text) 7%, transparent);
75
+ --bg-selection: color-mix(in srgb, var(--btn-primary-bg) 28%, transparent); --border-accent: color-mix(in srgb, var(--brand-cool) 35%, transparent);
76
+ --border-accent-hover: color-mix(in srgb, var(--brand-cool) 50%, transparent); --tangle-gradient: linear-gradient(135deg, var(--btn-primary-bg), var(--btn-primary-hover));
77
+ --tangle-gradient-text: linear-gradient(135deg, var(--brand-purple), var(--accent-text)); --accent-gradient-strong: linear-gradient(135deg, var(--btn-primary-bg), var(--btn-primary-hover));
78
+ --hsl-success: 155.1429 64.8148% 78.8235%; /* #a6eccf */
79
+ --hsl-warning: 38.5714 65.1163% 83.1373%; /* #f0dcb8 */
80
+ --hsl-destructive: 0 74.4681% 90.7843%; /* #f9d6d6 */
81
+ --hsl-destructive-foreground: 0 0% 0%; /* #000000 */ --hsl-info: 201.7021 66.1972% 86.0784%; /* #c4e2f3 */
82
+ --surface-success-text: hsl(var(--hsl-success)); --surface-success-bg: #21342c;
83
+ --surface-success-border: #496b5d; --surface-warning-text: hsl(var(--hsl-warning));
84
+ --surface-warning-bg: #362f22; --surface-warning-border: #6e634f;
85
+ --surface-danger-text: hsl(var(--hsl-destructive)); --surface-danger-bg: #412a2a;
86
+ --surface-danger-border: #785e5e; --surface-info-text: hsl(var(--hsl-info));
87
+ --surface-info-bg: #243239; --surface-info-border: #546771;
88
+ --status-running: var(--surface-success-text); --status-creating: var(--accent-text);
89
+ --status-stopped: var(--surface-warning-text); --status-warm: var(--surface-orange-text);
90
+ --status-cold: var(--surface-info-text); --status-error: var(--surface-danger-text);
91
+ --status-deleted: var(--text-dim); --brand-emerald: var(--surface-success-text);
92
+ --md3-tertiary: var(--surface-success-text); --md3-tertiary-container: var(--surface-success-bg);
93
+ --md3-error: var(--surface-danger-text); --md3-error-dim: color-mix(in srgb, var(--md3-error) 85%, black);
94
+ --md3-error-container: var(--surface-danger-bg); --md3-on-error: hsl(var(--hsl-destructive-foreground));
95
+ --md3-on-error-container: var(--surface-danger-text); --background: var(--hsl-background);
96
+ --foreground: var(--hsl-foreground); --card: var(--hsl-card);
97
+ --card-foreground: var(--hsl-card-foreground); --popover: var(--hsl-popover);
98
+ --popover-foreground: var(--hsl-popover-foreground); --primary: var(--hsl-primary);
99
+ --primary-foreground: var(--hsl-primary-foreground); --secondary: var(--hsl-secondary);
100
+ --secondary-foreground: var(--hsl-secondary-foreground); --muted: var(--hsl-muted);
101
+ --muted-foreground: var(--hsl-muted-foreground); --accent: var(--hsl-accent);
102
+ --accent-foreground: var(--hsl-accent-foreground); --destructive: var(--hsl-destructive);
103
+ --destructive-foreground: var(--hsl-destructive-foreground); --border: var(--hsl-border);
104
+ --input: var(--hsl-muted-foreground); --ring: var(--hsl-ring);
105
+ --success: var(--hsl-success); --warning: var(--hsl-warning);
106
+ --error: var(--hsl-destructive); --info: var(--hsl-info);
247
107
  /* tones:begin — generated by scripts/gen-ladders.mjs; edit its CATEGORY map, not these lines. */
248
- --tone-violet-bg: #392751;
249
- --tone-violet-bg-hover: #432b60;
250
- --tone-violet-bg-selected: #4c306c;
251
- --tone-violet-border: #8457aa;
252
- --tone-violet-border-selected: #d19dff;
253
- --tone-violet-text: #ecd9fa;
254
- --tone-violet-icon: #d19dff;
255
- --tone-orange-bg: #432823;
256
- --tone-orange-bg-hover: #512d22;
257
- --tone-orange-bg-selected: #5e3221;
258
- --tone-orange-border: #a35829;
259
- --tone-orange-border-selected: #f76b15;
260
- --tone-orange-text: #ffe0c2;
261
- --tone-orange-icon: #f76b15;
262
- --tone-teal-bg: #18333b;
263
- --tone-teal-bg-hover: #173b42;
264
- --tone-teal-bg-selected: #174448;
265
- --tone-teal-border: #207e73;
266
- --tone-teal-border-selected: #12a594;
267
- --tone-teal-text: #adf0dd;
268
- --tone-teal-icon: #12a594;
269
- --tone-blue-bg: #143051;
270
- --tone-blue-bg-hover: #123861;
271
- --tone-blue-bg-selected: #113e6b;
272
- --tone-blue-border: #2870bd;
273
- --tone-blue-border-selected: #0090ff;
274
- --tone-blue-text: #c2e6ff;
275
- --tone-blue-icon: #0090ff;
276
- --tone-pink-bg: #462243;
277
- --tone-pink-bg-hover: #55254d;
278
- --tone-pink-bg-selected: #612754;
279
- --tone-pink-border: #a84885;
280
- --tone-pink-border-selected: #de51a8;
281
- --tone-pink-text: #fdd1ea;
282
- --tone-pink-icon: #de51a8;
283
- --tone-brown-bg: #372d30;
284
- --tone-brown-bg-hover: #413434;
285
- --tone-brown-bg-selected: #4a3a37;
286
- --tone-brown-border: #7c5f46;
287
- --tone-brown-border-selected: #ad7f58;
288
- --tone-brown-text: #f2e1ca;
289
- --tone-brown-icon: #ad7f58;
290
- --tone-cyan-bg: #143245;
291
- --tone-cyan-bg-hover: #133b4e;
292
- --tone-cyan-bg-selected: #114358;
293
- --tone-cyan-border: #11809c;
294
- --tone-cyan-border-selected: #00a2c7;
295
- --tone-cyan-text: #b6ecf7;
296
- --tone-cyan-icon: #00a2c7;
297
- --tone-lime-bg: #2b302d;
298
- --tone-lime-bg-hover: #32382f;
299
- --tone-lime-bg-selected: #384132;
300
- --tone-lime-border: #577538;
301
- --tone-lime-border-selected: #bdee63;
302
- --tone-lime-text: #e3f7ba;
303
- --tone-lime-icon: #bdee63;
304
- --surface-violet-bg: #392751;
305
- --surface-violet-border: #8457aa;
306
- --surface-violet-text: #d19dff;
307
- --surface-orange-bg: #432823;
308
- --surface-orange-border: #a35829;
309
- --surface-orange-text: #ffa057;
310
- --surface-teal-bg: #18333b;
311
- --surface-teal-border: #207e73;
312
- --surface-teal-text: #0bd8b6;
108
+ --tone-violet-bg: hsl(270.8108 31.6239% 22.9412%);
109
+ --tone-violet-bg-hover: hsl(271.4286 31.3433% 26.2745%);
110
+ --tone-violet-bg-selected: hsl(271.9149 31.5436% 29.2157%);
111
+ --tone-violet-border: hsl(272.1739 27.49% 49.2157%);
112
+ --tone-violet-border-selected: hsl(272.4 79.3651% 75.2941%);
113
+ --tone-violet-text: hsl(272 81.0811% 85.4902%);
114
+ --tone-violet-icon: hsl(272.4 79.3651% 75.2941%);
115
+ --tone-violet-fill: 272.1081 80.0866% 54.7059%;
116
+ --tone-violet-ring: 272.5424 80.8219% 85.6863%;
117
+ --tone-violet-mark: hsl(272.4 79.3651% 75.2941%);
118
+ --tone-violet-line: hsl(272.4 79.3651% 75.2941%);
119
+ --tone-violet-ink: hsl(272.5424 80.8219% 85.6863%);
120
+ --tone-orange-bg: hsl(23.2258 32.6316% 18.6275%);
121
+ --tone-orange-bg-hover: hsl(21.6667 32.7273% 21.5686%);
122
+ --tone-orange-bg-selected: hsl(22.5 32.7869% 23.9216%);
123
+ --tone-orange-border: hsl(22.4176 43.5407% 40.9804%);
124
+ --tone-orange-border-selected: hsl(22.2517 79.8942% 62.9412%);
125
+ --tone-orange-text: hsl(22.5 80% 78.4314%);
126
+ --tone-orange-icon: hsl(22.2517 79.8942% 62.9412%);
127
+ --tone-orange-fill: 22 79.7872% 36.8627%;
128
+ --tone-orange-ring: 22.1429 80.7692% 79.6078%;
129
+ --tone-orange-mark: hsl(22.2517 79.8942% 62.9412%);
130
+ --tone-orange-line: hsl(22.2517 79.8942% 62.9412%);
131
+ --tone-orange-ink: hsl(22.1429 80.7692% 79.6078%);
132
+ --tone-teal-bg: hsl(170.7692 32.5% 15.6863%);
133
+ --tone-teal-bg-hover: hsl(172 32.6087% 18.0392%);
134
+ --tone-teal-bg-selected: hsl(172.5 31.3725% 20%);
135
+ --tone-teal-border: hsl(171.7895 66.4336% 28.0392%);
136
+ --tone-teal-border-selected: hsl(171.9512 79.6117% 40.3922%);
137
+ --tone-teal-text: hsl(171.9 80% 49.0196%);
138
+ --tone-teal-icon: hsl(171.9512 79.6117% 40.3922%);
139
+ --tone-teal-fill: 172.2772 79.5276% 24.902%;
140
+ --tone-teal-ring: 171.7647 80.315% 49.8039%;
141
+ --tone-teal-mark: hsl(171.9512 79.6117% 40.3922%);
142
+ --tone-teal-line: hsl(171.9512 79.6117% 40.3922%);
143
+ --tone-teal-ink: hsl(171.7647 80.315% 49.8039%);
144
+ --tone-blue-bg: hsl(208.125 32.6531% 19.2157%);
145
+ --tone-blue-bg-hover: hsl(208.3333 32.1429% 21.9608%);
146
+ --tone-blue-bg-selected: hsl(208.5 31.746% 24.7059%);
147
+ --tone-blue-border: hsl(209.3023 39.4495% 42.7451%);
148
+ --tone-blue-border-selected: hsl(209.1429 80.4598% 65.8824%);
149
+ --tone-blue-text: hsl(208.9157 80.5825% 79.8039%);
150
+ --tone-blue-icon: hsl(209.1429 80.4598% 65.8824%);
151
+ --tone-blue-fill: 209.0683 80.0995% 39.4118%;
152
+ --tone-blue-ring: 208.4211 79.1667% 81.1765%;
153
+ --tone-blue-mark: hsl(209.1429 80.4598% 65.8824%);
154
+ --tone-blue-line: hsl(209.1429 80.4598% 65.8824%);
155
+ --tone-blue-ink: hsl(208.4211 79.1667% 81.1765%);
156
+ --tone-pink-bg: hsl(322.9412 31.4815% 21.1765%);
157
+ --tone-pink-bg-hover: hsl(322.5 32.2581% 24.3137%);
158
+ --tone-pink-bg-selected: hsl(323.1818 31.8841% 27.0588%);
159
+ --tone-pink-border: hsl(322.7027 31.0924% 46.6667%);
160
+ --tone-pink-border-selected: hsl(322.4348 80.4196% 71.9608%);
161
+ --tone-pink-text: hsl(322.7273 80.4878% 83.9216%);
162
+ --tone-pink-icon: hsl(322.4348 80.4196% 71.9608%);
163
+ --tone-pink-fill: 322 80.3571% 43.9216%;
164
+ --tone-pink-ring: 322.7273 80.4878% 83.9216%;
165
+ --tone-pink-mark: hsl(322.4348 80.4196% 71.9608%);
166
+ --tone-pink-line: hsl(322.4348 80.4196% 71.9608%);
167
+ --tone-pink-ink: hsl(322.7273 80.4878% 83.9216%);
168
+ --tone-brown-bg: hsl(24 31.9149% 18.4314%);
169
+ --tone-brown-bg-hover: hsl(24.7059 31.4815% 21.1765%);
170
+ --tone-brown-bg-selected: hsl(24.6154 32.2314% 23.7255%);
171
+ --tone-brown-border: hsl(24.2553 22.2749% 41.3725%);
172
+ --tone-brown-border-selected: hsl(24 35.5191% 64.1176%);
173
+ --tone-brown-text: hsl(24.6154 35.1351% 78.2353%);
174
+ --tone-brown-icon: hsl(24 35.5191% 64.1176%);
175
+ --tone-brown-fill: 23.662 36.0406% 38.6275%;
176
+ --tone-brown-ring: 25 35.2941% 80%;
177
+ --tone-brown-mark: hsl(24 35.5191% 64.1176%);
178
+ --tone-brown-line: hsl(24 35.5191% 64.1176%);
179
+ --tone-brown-ink: hsl(25 35.2941% 80%);
180
+ --tone-cyan-bg: hsl(192.8571 32.5581% 16.8627%);
181
+ --tone-cyan-bg-hover: hsl(191.25 32.6531% 19.2157%);
182
+ --tone-cyan-bg-selected: hsl(191.6667 32.7273% 21.5686%);
183
+ --tone-cyan-border: hsl(192.3214 68.2927% 32.1569%);
184
+ --tone-cyan-border-selected: hsl(192.0619 80.1653% 47.451%);
185
+ --tone-cyan-text: hsl(191.7188 80% 68.6275%);
186
+ --tone-cyan-icon: hsl(192.0619 80.1653% 47.451%);
187
+ --tone-cyan-fill: 192.3967 80.1325% 29.6078%;
188
+ --tone-cyan-ring: 191.8966 79.4521% 71.3725%;
189
+ --tone-cyan-mark: hsl(192.0619 80.1653% 47.451%);
190
+ --tone-cyan-line: hsl(192.0619 80.1653% 47.451%);
191
+ --tone-cyan-ink: hsl(191.8966 79.4521% 71.3725%);
192
+ --tone-lime-bg: hsl(82.5 30.7692% 15.2941%);
193
+ --tone-lime-bg-hover: hsl(84.8276 32.5843% 17.451%);
194
+ --tone-lime-bg-selected: hsl(84.375 32% 19.6078%);
195
+ --tone-lime-border: hsl(84 52.6316% 29.8039%);
196
+ --tone-lime-border-selected: hsl(84.2647 60.177% 44.3137%);
197
+ --tone-lime-text: hsl(83.6975 59.799% 60.9804%);
198
+ --tone-lime-icon: hsl(84.2647 60.177% 44.3137%);
199
+ --tone-lime-fill: 84.5783 59.7122% 27.2549%;
200
+ --tone-lime-ring: 84 60.4396% 64.3137%;
201
+ --tone-lime-mark: hsl(84.2647 60.177% 44.3137%);
202
+ --tone-lime-line: hsl(84.2647 60.177% 44.3137%);
203
+ --tone-lime-ink: hsl(84 60.4396% 64.3137%);
204
+ --surface-violet-bg: var(--tone-violet-bg);
205
+ --surface-violet-border: var(--tone-violet-border);
206
+ --surface-violet-text: var(--tone-violet-text);
207
+ --surface-orange-bg: var(--tone-orange-bg);
208
+ --surface-orange-border: var(--tone-orange-border);
209
+ --surface-orange-text: var(--tone-orange-text);
210
+ --surface-teal-bg: var(--tone-teal-bg);
211
+ --surface-teal-border: var(--tone-teal-border);
212
+ --surface-teal-text: var(--tone-teal-text);
313
213
  /* tones:end */
314
- /* Run-mix ramp — the fills of a proportional status bar.
315
- *
316
- * Separate from the `--surface-*-text` tones because a 6px bar is read
317
- * differently from a chip: it is told by hue alone, at a size too small to
318
- * carry a glyph or a label, so its slices must ALSO separate from each other
319
- * in greyscale. These five are spaced at least 1.18:1 apart in relative
320
- * luminance — 1.30 in dark, 1.20 in light, where the ramp has less room
321
- * before it runs into the paper — and each clears 3:1 against the track, so
322
- * the mix stays countable with any form of colour blindness and in a
323
- * monochrome screenshot. 1.18 is the floor the gate holds them to.
324
- *
325
- * Ranked by how much the reader needs to tell them apart: succeeded is
326
- * brightest and cancelled quietest, so the two that matter — succeeded and
327
- * failed — sit at opposite ends and can never be confused.
328
- *
329
- * Spacing them by OKLCH lightness does NOT work: that is perceptual, and the
330
- * contrast ratio is computed from relative luminance, so an even perceptual
331
- * ramp left every pair at 1.1:1. Solved in luminance space instead. */
332
- --run-mix-succeeded: #76edb9;
333
- --run-mix-waiting: #e9b642;
334
- --run-mix-failed: #e1918e;
335
- --run-mix-in-flight: #2d9bca;
336
- --run-mix-cancelled: #767d90;
337
-
338
- --surface-neutral-bg: var(--depth-3);
339
- --surface-neutral-border: var(--border-subtle);
214
+ --run-mix-succeeded: hsl(154.9315 59.8361% 47.8431%); --run-mix-waiting: hsl(37.7483 60.1594% 49.2157%);
215
+ --run-mix-failed: hsl(0 60.4278% 63.3333%); --run-mix-in-flight: hsl(200.8889 60% 44.1176%);
216
+ --run-mix-cancelled: hsl(229.2857 11.7647% 46.6667%);
217
+ --surface-neutral-bg: var(--depth-3); --surface-neutral-border: var(--border-subtle);
340
218
  --surface-neutral-text: var(--text-muted);
341
-
342
- /* Legacy glass aliases — mapped to solid depth tokens */
343
- --glass-bg: var(--depth-2);
344
- --glass-bg-strong: var(--depth-3);
345
- --glass-border: var(--border-subtle);
346
- --glass-border-hover: var(--border-hover);
219
+ --glass-bg: var(--depth-2); --glass-bg-strong: var(--depth-3);
220
+ --glass-border: var(--border-subtle); --glass-border-hover: var(--border-hover);
347
221
  --glass-blur: 0px;
348
-
349
- /* Mesh glows — off; depth comes from the ladder, not from glow */
350
- --mesh-teal: transparent;
351
- --mesh-violet: transparent;
222
+ --mesh-teal: transparent; --mesh-violet: transparent;
352
223
  --mesh-blue: transparent;
353
-
354
- /* ── Code ───────────────────────────────────────────────────────────────
355
- * The same inks as the status family and the accent, so a keyword, a
356
- * string and a warning never carry three different purples or ambers.
357
- * Keywords take the categorical violet, not the accent: a keyword is not a
358
- * link. --code-* is the older name for the same roles. */
359
- --code-header-bg: hsl(var(--hsl-background));
360
- --syntax-foreground: var(--text-primary);
361
- --syntax-variable: var(--text-secondary);
362
- --syntax-comment: var(--text-dim);
363
- --syntax-keyword: var(--tone-violet-icon);
364
- --syntax-meta: var(--accent-text);
365
- --syntax-function: var(--surface-info-text);
366
- --syntax-string: var(--surface-success-text);
367
- --syntax-number: var(--surface-warning-text);
368
- --syntax-error: var(--surface-danger-text);
369
- --code-keyword: var(--syntax-keyword);
370
- --code-string: var(--syntax-string);
371
- --code-function: var(--syntax-function);
372
- --code-number: var(--syntax-number);
373
- --code-success: var(--surface-success-text);
374
- --code-comment: var(--syntax-comment);
224
+ --code-header-bg: hsl(var(--hsl-background)); --syntax-foreground: var(--text-primary);
225
+ --syntax-variable: var(--text-secondary); --syntax-comment: var(--text-dim);
226
+ --syntax-keyword: var(--tone-violet-text); --syntax-meta: var(--accent-text);
227
+ --syntax-function: var(--surface-info-text); --syntax-string: var(--surface-success-text);
228
+ --syntax-number: var(--surface-warning-text); --syntax-error: var(--surface-danger-text);
229
+ --code-keyword: var(--syntax-keyword); --code-string: var(--syntax-string);
230
+ --code-function: var(--syntax-function); --code-number: var(--syntax-number);
231
+ --code-success: var(--surface-success-text); --code-comment: var(--syntax-comment);
375
232
  --code-error: var(--syntax-error);
376
-
377
- /* Shadows — flat, no inner ring, no indigo glow */
378
- --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3);
379
- --shadow-dropdown: 0 8px 30px rgba(0, 0, 0, 0.45);
380
- --shadow-glow: none;
381
- --shadow-accent: 0 1px 2px rgba(0, 0, 0, 0.3);
382
- /* The lift above --shadow-dropdown, for a surface that covers the page
383
- rather than sitting beside it: a drawer, a modal, a floating dock.
384
- Two layers — a tight contact shadow plus a wide ambient one.
385
- Alone among the shadows this is derived from --hsl-foreground instead of
386
- a fixed rgba, so it INVERTS with the theme. That is what makes it work in
387
- dark: a black shadow on a dark canvas renders as nothing (see the ladder
388
- note at the top of this file), while the foreground is near-white there,
389
- so the same declaration reads as a soft halo. One definition therefore
390
- serves both themes and the light block does not restate it. */
391
- --shadow-overlay:
392
- 0 2px 6px hsl(var(--hsl-foreground) / 0.1),
393
- 0 16px 40px hsl(var(--hsl-foreground) / 0.16);
394
- /* Scrim and media ink. A scrim dims the page behind a modal or sheet, or
395
- darkens a photo under its caption. It is black in every theme: a dimming
396
- layer that inverted in dark mode would brighten the page it covers.
397
- --on-media is the ink for text set directly on a photo or a scrim. */
398
- --scrim: rgb(0 0 0 / 0.4);
399
- --scrim-strong: rgb(0 0 0 / 0.72);
400
- --on-media: #ffffff;
401
- --shadow-status-running: none;
402
- --shadow-status-creating: none;
403
- --shadow-status-error: none;
404
-
405
- /* Radii */
406
- --radius-sm: 6px;
407
- --radius-md: 8px;
408
- --radius-lg: 10px;
409
- --radius-xl: 12px; /* chrome stays tight (was 16px) */
410
- --radius-pill: 999px;
411
- --radius-full: 999px;
412
- --radius-composer: 26px; /* centered composer pill */
413
- /* Radius by role. New surfaces pick the role they play; system.css repeats
414
- these for pages that load it on its own ladders. */
415
- --radius-tag: 4px;
416
- --radius-chip: 8px;
417
- --radius-field: 12px;
418
- --radius-panel: 16px;
419
- --radius-cover: 20px;
420
- --radius-sheet: 24px;
421
- --radius: 0.5rem; /* 8px chrome default (was 10px) */
422
-
423
- /* Density */
424
- --control-height: 2.25rem;
425
- /* Control scale: Button, IconButton sizes, Input, Textarea and SelectTrigger
426
- share one height and text size per size, so a row of mixed controls aligns.
427
- md is --control-height, the density knob a subtree may override. */
428
- --control-height-sm: 2rem; /* 32px */
429
- --control-height-lg: 2.75rem; /* 44px — touch target */
430
- --control-text-sm: 0.75rem; /* 12px */
431
- --control-text-md: 0.875rem; /* 14px */
432
- --control-text-lg: 1rem; /* 16px — fields never zoom on iOS */
433
- /* Form text: labels name a field; help text describes or reports on it. */
434
- --font-size-label: 0.875rem; /* 14px */
435
- --font-size-help: 0.75rem; /* 12px */
436
- --panel-padding: 1rem;
437
- --content-max-width: 80rem;
438
- /* Shell: every header row in the app shell (sidebar rail, main pane, side
439
- panels, drawers, the assistant) is this tall, so their bottom dividers
440
- share one y. Header content fills the row; it never sets the height.
441
- An inset pane sits one gutter plus its 1px border below the shell top, so
442
- its header is shorter by exactly that amount (see ShellHeader). */
443
- --shell-header-height: 3.5rem; /* 56px */
444
- --shell-inset-gutter: 0.5rem; /* 8px */
445
- /* Transcript: the person's and the agent's messages share one family, size
446
- and leading; they differ only by alignment and surface. */
447
- --transcript-font-size: 1rem; /* 16px: the chat reading size */
233
+ --shadow-color: 0 0% 0%; /* #000000 */ --shadow-card: 0 1px 2px hsl(var(--shadow-color) / 0.3);
234
+ --shadow-dropdown: 0 8px 30px hsl(var(--shadow-color) / 0.45); --shadow-glow: none;
235
+ --shadow-accent: var(--shadow-card); --shadow-overlay: 0 2px 6px hsl(var(--shadow-color) / 0.3), 0 16px 40px hsl(var(--shadow-color) / 0.5);
236
+ --scrim: rgb(0 0 0 / 0.4); --scrim-strong: rgb(0 0 0 / 0.72);
237
+ --on-media: #ffffff; --shadow-status-running: none;
238
+ --shadow-status-creating: none; --shadow-status-error: none;
239
+ --radius-sm: 6px; --radius-md: 8px;
240
+ --radius-lg: 10px; --radius-xl: 12px;
241
+ --radius-pill: 999px; --radius-full: 999px;
242
+ --radius-composer: 26px;
243
+ --radius-tag: 4px; --radius-control: var(--radius-md);
244
+ --radius-card: var(--radius-xl); --radius-container: 16px;
245
+ --radius-chip: var(--radius-control); --radius-field: var(--radius-card);
246
+ --radius-panel: var(--radius-container); --radius-cover: 20px;
247
+ --radius-sheet: 24px; --radius: 0.5rem;
248
+ --control-height: 2.25rem; --control-height-sm: 2rem;
249
+ --control-height-lg: 2.75rem;
250
+ --control-text-sm: 0.75rem;
251
+ --control-text-md: 0.875rem;
252
+ --control-text-lg: 1rem;
253
+ --font-size-label: 0.875rem;
254
+ --font-size-help: 0.75rem;
255
+ --panel-padding: 1rem; --content-max-width: 80rem;
256
+ --shell-header-height: 3.5rem;
257
+ --shell-inset-gutter: 0.5rem;
258
+ --transcript-font-size: 1rem;
448
259
  --transcript-line-height: var(--line-height-base);
449
-
450
- /* Typography scale. Each --font-size-<step> is Tailwind's text-<step>, so a
451
- step name means one size everywhere ("sm" is 14px); 12px is the floor.
452
- Components reference these instead of pixel values; an app may override. */
453
- --font-size-xs: 0.75rem; /* 12px — meta, timestamps, eyebrows */
454
- --font-size-sm: 0.875rem; /* 14px — UI text */
455
- --font-size-base: 1rem; /* 16px — reading text */
456
- --font-size-lg: 1.125rem; /* 18px — emphasized text */
457
- --font-size-xl: 1.25rem; /* 20px — section title (h2) */
458
- /* Display tier — page titles, marketing section heads, and heroes.
459
- Hero sizes are fluid (clamp) so they scale with the viewport without
460
- per-breakpoint overrides; the dense-app sizes above stay fixed. */
461
- --font-size-2xl: 1.5rem; /* 24px — large section title */
462
- --font-size-3xl: 1.875rem; /* 30px — page title (h1) */
463
- --font-size-4xl: 2.25rem; /* 36px — compact marketing section head */
464
- --font-size-hero: clamp(2rem, 1.2rem + 3.2vw, 3rem); /* 32→48px — secondary hero */
465
- --font-size-display: clamp(2.5rem, 1.1rem + 5vw, 4rem); /* 40→64px — primary hero */
466
- --line-height-tight: 1.3;
467
- --line-height-base: 1.6; /* tighter body rhythm (was 1.75) */
468
- --line-height-relaxed: 1.75;
469
- --line-height-display: 1.05; /* heroes — near-solid set */
470
- --line-height-heading: 1.15; /* page/section titles */
471
- /* Letter-spacing — titles tighten, eyebrows/labels open up */
472
- --tracking-tight: -0.02em; /* display + page titles */
473
- --tracking-snug: -0.01em; /* section titles */
474
- --tracking-wide: 0.08em; /* uppercase eyebrows / stat labels */
475
-
476
- /* Expressive roles are opt-in; operational type and controls keep their scale. */
477
- --tracking-display: -0.03em;
478
- --hero-gutter: 1.5rem;
479
- --hero-padding-top: clamp(5rem, 3rem + 5vw, 7rem);
480
- --hero-padding-bottom: clamp(4rem, 2rem + 5vw, 6rem);
481
- --display-max-width: 56rem;
482
- --reading-max-width: 42rem;
483
- --hero-action-gap: 0.75rem;
484
- --hero-content-gap: 1.5rem;
485
- --display-control-height: 2.875rem;
486
- --display-control-radius: 0.625rem;
487
- --display-control-font-size: 0.9375rem;
488
- --display-control-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), 0 4px 16px hsl(var(--primary) / 0.2);
489
- --display-gradient: linear-gradient(135deg, hsl(var(--foreground)) 10%, var(--accent-text) 70%);
490
- --hero-grid-pitch: 3.5rem;
491
- --hero-atmosphere-opacity: 0.16;
492
- --hero-knot-opacity: 0.07;
493
- --duration-expressive-entrance: 300ms;
494
- --duration-expressive-ambient: 14s;
260
+ --font-size-xs: 0.75rem;
261
+ --font-size-sm: 0.875rem;
262
+ --font-size-base: 1rem;
263
+ --font-size-lg: 1.125rem;
264
+ --font-size-xl: 1.25rem;
265
+ --font-size-2xl: 1.5rem;
266
+ --font-size-3xl: 1.875rem;
267
+ --font-size-4xl: 2.25rem;
268
+ --font-size-hero: clamp(2rem, 1.2rem + 3.2vw, 3rem);
269
+ --font-size-display: clamp(2.5rem, 1.1rem + 5vw, 4rem);
270
+ --line-height-tight: 1.3; --line-height-base: 1.6;
271
+ --line-height-relaxed: 1.75; --line-height-display: 1.05;
272
+ --line-height-heading: 1.15;
273
+ --tracking-tight: -0.02em;
274
+ --tracking-snug: -0.01em;
275
+ --tracking-wide: 0.08em;
276
+ --tracking-display: -0.03em; --hero-gutter: 1.5rem;
277
+ --hero-padding-top: clamp(5rem, 3rem + 5vw, 7rem); --hero-padding-bottom: clamp(4rem, 2rem + 5vw, 6rem);
278
+ --display-max-width: 56rem; --reading-max-width: 42rem;
279
+ --hero-action-gap: 0.75rem; --hero-content-gap: 1.5rem;
280
+ --display-control-height: 2.875rem; --display-control-radius: 0.625rem;
281
+ --display-control-font-size: 0.9375rem; --display-control-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), 0 4px 16px hsl(var(--primary) / 0.2);
282
+ --display-gradient: linear-gradient(135deg, hsl(var(--foreground)) 10%, var(--accent-text) 70%); --hero-grid-pitch: 3.5rem;
283
+ --hero-atmosphere-opacity: 0.16; --hero-knot-opacity: 0.07;
284
+ --duration-expressive-entrance: 300ms; --duration-expressive-ambient: 14s;
495
285
  --ease-expressive: cubic-bezier(0.16, 1, 0.3, 1);
496
-
497
- /* Component spacing — override per-app for tighter/looser layouts */
498
- --avatar-size: 2rem; /* 32px — chat avatars */
499
- --timeline-dot-size: 0.625rem; /* 10px — timeline connector dots */
500
- --indicator-dot-size: 0.25rem; /* 4px — thinking indicator dots */
501
- --code-padding-x: 0.75rem;
502
- --code-padding-y: 0.625rem;
503
- --code-font-size: 0.8125rem;
504
- --code-line-height: 1.5;
505
- --chat-message-px: 0.875rem;
506
- --chat-message-py: 0.5rem;
507
- --chat-input-py: 0.625rem;
508
- --card-padding: 1.25rem;
509
- --tool-card-px: 0.75rem;
510
- --tool-card-py: 0.5rem;
286
+ --avatar-size: 2rem;
287
+ --timeline-dot-size: 0.625rem;
288
+ --indicator-dot-size: 0.25rem;
289
+ --code-padding-x: 0.75rem; --code-padding-y: 0.625rem;
290
+ --code-font-size: 0.8125rem; --code-line-height: 1.5;
291
+ --chat-message-px: 0.875rem; --chat-message-py: 0.5rem;
292
+ --chat-input-py: 0.625rem; --card-padding: 1.25rem;
293
+ --tool-card-px: 0.75rem; --tool-card-py: 0.5rem;
511
294
  --tool-icon-size: 1.75rem;
512
-
513
- /* Shared motion vocabulary, previously authored by the light-default Agent
514
- * App consumer. These are tokens only, not automatic animation classes. */
515
- --duration-instant: 90ms;
516
- --duration-fast: 150ms;
517
- --duration-base: 240ms;
518
- --duration-slow: 360ms;
519
- --duration-stream: 420ms;
520
- --duration-arrive: 600ms;
521
- --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
522
- --ease-entrance: cubic-bezier(0.22, 1, 0.36, 1);
523
- --ease-exit: cubic-bezier(0.4, 0, 1, 1);
524
- --ease-expo: cubic-bezier(0.23, 1, 0.32, 1);
525
- --motion-control: var(--duration-fast) var(--ease-standard);
526
- --motion-surface: var(--duration-base) var(--ease-entrance);
527
- --motion-dismiss: var(--duration-instant) var(--ease-exit);
528
- --motion-stream: var(--duration-stream) var(--ease-expo);
529
- --motion-arrive: var(--duration-arrive) var(--ease-expo);
530
-
531
- /* Elapsed interaction thresholds, not animation durations. See
532
- * docs/design-bible.md#interaction. Reduced motion leaves these unchanged. */
533
- --interaction-feedback-budget: 100ms;
534
- --interaction-pending-delay: 200ms;
535
- --interaction-long-work-delay: 1000ms;
536
- --interaction-mutation-budget: 500ms;
537
- --stagger-step: 50ms;
538
- --stagger-index: 0;
539
- --arrive-distance: 8px;
540
- --stream-blur: 4px;
541
-
542
- /* Transitions — retain the existing Brand timings. */
543
- --transition-fast: 0.1s ease;
544
- --transition-default: 0.16s ease;
295
+ --duration-instant: 90ms; --duration-fast: 150ms;
296
+ --duration-base: 240ms; --duration-slow: 360ms;
297
+ --duration-stream: 420ms; --duration-arrive: 600ms;
298
+ --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-entrance: cubic-bezier(0.22, 1, 0.36, 1);
299
+ --ease-exit: cubic-bezier(0.4, 0, 1, 1); --ease-expo: cubic-bezier(0.23, 1, 0.32, 1);
300
+ --motion-control: var(--duration-fast) var(--ease-standard); --motion-surface: var(--duration-base) var(--ease-entrance);
301
+ --motion-dismiss: var(--duration-instant) var(--ease-exit); --motion-stream: var(--duration-stream) var(--ease-expo);
302
+ --motion-arrive: var(--duration-arrive) var(--ease-expo); --duration-ambient: 2000ms;
303
+ --motion-ambient: var(--duration-ambient) ease-in-out;
304
+ --interaction-feedback-budget: 100ms; --interaction-pending-delay: 200ms;
305
+ --interaction-long-work-delay: 1000ms; --interaction-mutation-budget: 500ms;
306
+ --stagger-step: 50ms; --stagger-index: 0;
307
+ --arrive-distance: 8px; --stream-blur: 4px;
308
+ --transition-fast: 0.1s ease; --transition-default: 0.16s ease;
545
309
  --transition-medium: 0.24s ease;
546
-
547
- /* Fonts — unified on Inter (dark + light) */
548
- --font-sans: "Inter Variable", "Inter", "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
549
- --font-display: "Inter Variable", "Inter", "Geist", sans-serif;
310
+ --font-sans: "Inter Variable", "Inter", "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif; --font-display: "Inter Variable", "Inter", "Geist", sans-serif;
550
311
  --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
551
312
  }
552
-
553
- /* Light theme — reachable via the named `vault` theme or the standard
554
- * `[data-theme="light"]` / `.light` switch. Both blocks are single-attribute/
555
- * class selectors, and this one is later in source order, so when an element
556
- * carries both `data-sandbox-ui` (dark) and `data-theme="light"`, light wins. */
557
313
  [data-sandbox-theme="vault"]:where(:not(.dark)),
558
314
  [data-sandbox-theme="dawn"]:where(:not(.dark)),
559
315
  [data-theme="hospitality"]:where(:not(.dark)),
@@ -566,282 +322,181 @@
566
322
  [data-theme="agents-light"],
567
323
  .light {
568
324
  color-scheme: light;
569
-
570
- /* ── Planes: white paper on a cool grey canvas ───────────────────────────
571
- * The light ladder ALTERNATES, and that is deliberate: a raised plane is
572
- * PAPER and a recessed one is a neutral WELL, so the card and the overlay
573
- * are both white and separate by shadow and ring, not by fill. Forcing a
574
- * strictly darkening ladder here is what produced the white-on-white
575
- * flatness this palette replaced. Pinned in tokens.test.ts. */
576
- --hsl-background: 223 23% 94%; /* L0 canvas #eceef3, BELOW the wells */
577
- --hsl-input: 225 29% 97%; /* L1 chrome and field wells #f5f6fa */
578
- --hsl-card: 0 0% 100%; /* L2 card: paper */
579
- --hsl-secondary: 228 25% 94.5%; /* L3 raised: a card in a card #edeff4, 4.8 L under its paper */
580
- --hsl-popover: var(--hsl-card); /* L4 overlay: paper, lifted by shadow, never out-lightening a card */
581
- --md3-surface-dim: #dcdee6; /* the recessed page */
582
- --md3-surface-container-lowest: hsl(var(--hsl-card)); /* insets read as paper */
583
- --md3-surface-bright: #ffffff;
584
- --sidebar-background: var(--hsl-card); /* paper, flat, with a hairline */
585
- --md3-inverse-surface: #2e2e3e;
586
- --md3-inverse-on-surface: #f0f1f4;
587
-
588
- /* ── Ink: neutral grey, so purple stays reserved for interaction ─────────
589
- * 13.7:1 on paper and 11.4:1 on the canvas, AAA with headroom. --text-dim is
590
- * pinned from the CANVAS, the lighter plane that binds the faintest tier:
591
- * 4.6:1 there and 5.6:1 on the card, asserted in tokens.test.ts. */
592
- --hsl-foreground: 0 0% 17.6471%; /* #2d2d2d */
593
- --hsl-muted-foreground: 0 0% 29.8039%; /* #4c4c4c: 3.0:1 at /60 and 8.6:1 at full strength on paper */
594
- --text-secondary: #3f3f3f;
595
- --text-muted: #4c4c4c;
596
- --text-dim: #686868;
597
- --md3-outline: #787878;
598
-
599
- /* ── Hairline: 1.7:1 on paper, 1.4:1 on the canvas ──────────────────────── */
600
- --hsl-border: 244 16% 81%; /* #c8c7d6 */
601
- --border-hover: rgba(0, 0, 0, 0.24);
602
-
603
- /* ── Accent ─────────────────────────────────────────────────────────────
604
- * The fill is the same indigo as dark (it carries white at 7.4:1) and is
605
- * also the ring: on paper it clears 3:1 as a line. The ink is the bright
606
- * indigo at 6.1:1 on paper; the mark is the website's indigo. */
607
- --hsl-ring: var(--hsl-primary);
608
- --brand-primary: #6366F1;
609
- --brand-purple: var(--brand-primary);
610
- --accent-text: #3c32e9;
611
- --md3-primary: var(--accent-text);
612
- --md3-primary-dim: var(--btn-primary-bg);
613
- --md3-on-primary-container: #ffffff;
614
- --md3-primary-fixed: #E8E5FF; /* the accent tint: a chip or a selected row on paper */
615
- --md3-primary-fixed-dim: color-mix(in srgb, var(--md3-primary-fixed) 85%, var(--accent-text));
616
- --md3-secondary: var(--accent-text);
617
- --md3-secondary-dim: var(--btn-primary-bg);
618
- --md3-secondary-container: var(--md3-primary-fixed);
619
- --md3-on-secondary: #ffffff;
620
- --md3-on-secondary-container: var(--accent-text);
621
- --md3-inverse-primary: #A5B4FC;
622
- --md3-surface-tint: var(--brand-primary);
623
- --accent-surface-soft: color-mix(in srgb, var(--btn-primary-bg) 5%, transparent);
624
- --accent-surface-strong: color-mix(in srgb, var(--btn-primary-bg) 13%, transparent);
625
- --bg-selection: color-mix(in srgb, var(--btn-primary-bg) 16%, transparent);
626
- --border-accent: color-mix(in srgb, var(--btn-primary-hover) 18%, transparent);
627
- --border-accent-hover: color-mix(in srgb, var(--btn-primary-hover) 35%, transparent);
628
- --tangle-gradient: linear-gradient(135deg, var(--btn-primary-bg), var(--btn-primary-hover));
629
- --tangle-gradient-text: var(--tangle-gradient);
630
- --accent-gradient-strong: var(--tangle-gradient);
631
-
632
- /* ── Status: the deep inks carry white, so each is its own fill too ─────── */
633
- --hsl-success: 162.9 93.5% 24.3%; /* #047857 */
634
- --hsl-warning: 25.9 90% 35.3%; /* #ab4f09 */
635
- --hsl-destructive: 0 73.7% 41.8%; /* #b91c1c */
636
- --hsl-destructive-foreground: 0 0% 100%;
637
- --hsl-info: 201.3 96.3% 32.2%; /* #0369a1 */
638
- --surface-success-bg: #ecfdf5;
639
- --surface-success-border: #a7f3d0;
640
- --surface-warning-bg: #fffbeb;
641
- --surface-warning-border: #fde68a;
642
- --surface-danger-bg: #fff1f2;
643
- --surface-danger-border: #fecdd3;
644
- --surface-info-bg: #f0f9ff;
645
- --surface-info-border: #bae6fd;
325
+ --hsl-background: 225 26.6667% 94.1176%; /* #eceef4 */
326
+ --hsl-input: 231.4286 46.6667% 97.0588%; /* #f4f5fb */
327
+ --hsl-card: 0 0% 100%; /* #ffffff */
328
+ --hsl-secondary: 225 28.5714% 94.5098%; /* #edeff5 */
329
+ --hsl-popover: 0 0% 100%; /* #ffffff */
330
+ --md3-surface-dim: hsl(231.4286 11.4754% 88.0392%);
331
+ --md3-surface-container-lowest: hsl(var(--hsl-card));
332
+ --md3-surface-bright: hsl(var(--hsl-popover)); --sidebar-background: var(--hsl-card);
333
+ --md3-inverse-surface: hsl(0 0% 18.0392%); --md3-inverse-on-surface: hsl(0 0% 100%);
334
+ --hsl-foreground: 0 0% 24.7059%; /* #3f3f3f */
335
+ --hsl-muted-foreground: 0 0% 36.4706%; /* #5d5d5d */
336
+ --text-secondary: hsl(0 0% 31.3725%); --text-muted: hsl(0 0% 36.4706%);
337
+ --text-dim: hsl(0 0% 41.9608%); --md3-outline: hsl(var(--hsl-muted-foreground));
338
+ --hsl-border: 222.8571 6.6667% 79.4118%; /* #c7c9ce */
339
+ --border-hover: rgb(63 63 63 / 0.28);
340
+ --hsl-ring: 245.9504 54.2601% 56.2745%; /* #5f53cc */ --brand-primary: hsl(245.9091 64.7059% 60%);
341
+ --brand-purple: hsl(246.5217 92% 70.5882%); --accent-text: hsl(246.2264 92.1739% 54.902%);
342
+ --md3-primary: var(--accent-text); --md3-primary-dim: var(--btn-primary-bg);
343
+ --md3-on-primary-container: hsl(0 0% 100%); --md3-primary-fixed: hsl(246.9231 92.8571% 94.5098%);
344
+ --md3-primary-fixed-dim: color-mix(in srgb, var(--md3-primary-fixed) 85%, var(--accent-text)); --md3-secondary: var(--accent-text);
345
+ --md3-secondary-dim: var(--btn-primary-bg); --md3-secondary-container: var(--md3-primary-fixed);
346
+ --md3-on-secondary: hsl(0 0% 100%); --md3-on-secondary-container: var(--accent-text);
347
+ --md3-inverse-primary: hsl(246.0759 64.2276% 75.8824%); --md3-surface-tint: var(--accent-text);
348
+ --accent-surface-soft: color-mix(in srgb, var(--accent-text) 5%, transparent); --accent-surface-strong: color-mix(in srgb, var(--btn-primary-bg) 13%, transparent);
349
+ --bg-selection: color-mix(in srgb, var(--btn-primary-bg) 16%, transparent); --border-accent: color-mix(in srgb, var(--brand-cool) 20%, transparent);
350
+ --border-accent-hover: color-mix(in srgb, var(--brand-cool) 36%, transparent); --tangle-gradient: linear-gradient(135deg, var(--btn-primary-bg), var(--btn-primary-hover));
351
+ --tangle-gradient-text: var(--tangle-gradient); --accent-gradient-strong: linear-gradient(135deg, var(--btn-primary-bg), var(--btn-primary-hover));
352
+ --hsl-success: 154.8148 64.8% 24.5098%; /* #166745 */
353
+ --hsl-warning: 38.2979 65.2778% 28.2353%; /* #775519 */
354
+ --hsl-destructive: 0 75.1244% 39.4118%; /* #b01919 */
355
+ --hsl-destructive-foreground: 0 0% 100%; /* #ffffff */ --hsl-info: 201.1429 65.2174% 31.5686%; /* #1c6085 */
356
+ --surface-success-bg: #f1f6f4; --surface-success-border: #afcbc0;
357
+ --surface-warning-bg: #f7f5f1; --surface-warning-border: #d1c5b0;
358
+ --surface-danger-bg: #faf1f1; --surface-danger-border: #e4b0b0;
359
+ --surface-info-bg: #f1f5f8; --surface-info-border: #b1c8d6;
646
360
  /* tones:begin — generated by scripts/gen-ladders.mjs; edit its CATEGORY map, not these lines. */
647
- --tone-violet-bg: #f7edfe;
648
- --tone-violet-bg-hover: #f2e2fc;
649
- --tone-violet-bg-selected: #ead5f9;
650
- --tone-violet-border: #e0c4f4;
651
- --tone-violet-border-selected: #8e4ec6;
652
- --tone-violet-text: #402060;
653
- --tone-violet-icon: #8e4ec6;
654
- --tone-orange-bg: #ffefd6;
655
- --tone-orange-bg-hover: #ffdfb5;
656
- --tone-orange-bg-selected: #ffd19a;
657
- --tone-orange-border: #ffc182;
658
- --tone-orange-border-selected: #cc4e00;
659
- --tone-orange-text: #582d1d;
660
- --tone-orange-icon: #cc4e00;
661
- --tone-teal-bg: #e0f8f3;
662
- --tone-teal-bg-hover: #ccf3ea;
663
- --tone-teal-bg-selected: #b8eae0;
664
- --tone-teal-border: #a1ded2;
665
- --tone-teal-border-selected: #008573;
666
- --tone-teal-text: #0d3d38;
667
- --tone-teal-icon: #008573;
668
- --tone-blue-bg: #e6f4fe;
669
- --tone-blue-bg-hover: #d5efff;
670
- --tone-blue-bg-selected: #c2e5ff;
671
- --tone-blue-border: #acd8fc;
672
- --tone-blue-border-selected: #0d74ce;
673
- --tone-blue-text: #113264;
674
- --tone-blue-icon: #0d74ce;
675
- --tone-pink-bg: #fee9f5;
676
- --tone-pink-bg-hover: #fbdcef;
677
- --tone-pink-bg-selected: #f6cee7;
678
- --tone-pink-border: #efbfdd;
679
- --tone-pink-border-selected: #cf3897;
680
- --tone-pink-text: #651249;
681
- --tone-pink-icon: #cf3897;
682
- --tone-brown-bg: #f6eee7;
683
- --tone-brown-bg-hover: #f0e4d9;
684
- --tone-brown-bg-selected: #ebdaca;
685
- --tone-brown-border: #e4cdb7;
686
- --tone-brown-border-selected: #815e46;
687
- --tone-brown-text: #3e332e;
688
- --tone-brown-icon: #815e46;
689
- --tone-cyan-bg: #def7f9;
690
- --tone-cyan-bg-hover: #caf1f6;
691
- --tone-cyan-bg-selected: #b5e9f0;
692
- --tone-cyan-border: #9ddde7;
693
- --tone-cyan-border-selected: #107d98;
694
- --tone-cyan-text: #0d3c48;
695
- --tone-cyan-icon: #107d98;
696
- --tone-lime-bg: #eef6d6;
697
- --tone-lime-bg-hover: #e2f0bd;
698
- --tone-lime-bg-selected: #d3e7a6;
699
- --tone-lime-border: #c2da91;
700
- --tone-lime-border-selected: #5c7c2f;
701
- --tone-lime-text: #37401c;
702
- --tone-lime-icon: #5c7c2f;
703
- --surface-violet-bg: #f7edfe;
704
- --surface-violet-border: #e0c4f4;
705
- --surface-violet-text: #8145b5;
706
- --surface-orange-bg: #ffefd6;
707
- --surface-orange-border: #ffc182;
708
- --surface-orange-text: #bc4904;
709
- --surface-teal-bg: #e0f8f3;
710
- --surface-teal-border: #a1ded2;
711
- --surface-teal-text: #017d6d;
361
+ --tone-violet-bg: hsl(272.3077 86.6667% 97.0588%);
362
+ --tone-violet-bg-hover: hsl(272.7273 78.5714% 94.5098%);
363
+ --tone-violet-bg-selected: hsl(270.9091 80.4878% 91.9608%);
364
+ --tone-violet-border: hsl(272.5301 80.5825% 79.8039%);
365
+ --tone-violet-border-selected: hsl(272.1569 80.1047% 62.549%);
366
+ --tone-violet-text: hsl(272.1212 79.8387% 51.3725%);
367
+ --tone-violet-icon: hsl(272.1569 80.1047% 62.549%);
368
+ --tone-violet-fill: 272.1081 80.0866% 54.7059%;
369
+ --tone-violet-ring: 272.1081 80.0866% 54.7059%;
370
+ --tone-violet-mark: hsl(272.1569 80.1047% 62.549%);
371
+ --tone-violet-line: hsl(272.1569 80.1047% 62.549%);
372
+ --tone-violet-ink: hsl(271.8857 79.9087% 42.9412%);
373
+ --tone-orange-bg: hsl(20 42.8571% 95.8824%);
374
+ --tone-orange-bg-hover: hsl(20 47.3684% 92.549%);
375
+ --tone-orange-bg-selected: hsl(20 47.3684% 88.8235%);
376
+ --tone-orange-border: hsl(22.1053 62.9139% 70.3922%);
377
+ --tone-orange-border-selected: hsl(21.9672 79.9127% 44.902%);
378
+ --tone-orange-text: hsl(22.0833 80% 35.2941%);
379
+ --tone-orange-icon: hsl(21.9672 79.9127% 44.902%);
380
+ --tone-orange-fill: 22 79.7872% 36.8627%;
381
+ --tone-orange-ring: 22 79.7872% 36.8627%;
382
+ --tone-orange-mark: hsl(21.9672 79.9127% 44.902%);
383
+ --tone-orange-line: hsl(21.9672 79.9127% 44.902%);
384
+ --tone-orange-ink: hsl(22.314 80.1325% 29.6078%);
385
+ --tone-teal-bg: hsl(171.4286 28% 95.098%);
386
+ --tone-teal-bg-hover: hsl(175 26.087% 90.9804%);
387
+ --tone-teal-bg-selected: hsl(170.5263 27.5362% 86.4706%);
388
+ --tone-teal-border: hsl(171.8182 35.1064% 63.1373%);
389
+ --tone-teal-border-selected: hsl(172.32 79.6178% 30.7843%);
390
+ --tone-teal-text: hsl(172.1212 80.4878% 24.1176%);
391
+ --tone-teal-icon: hsl(172.32 79.6178% 30.7843%);
392
+ --tone-teal-fill: 172.2772 79.5276% 24.902%;
393
+ --tone-teal-ring: 172.2772 79.5276% 24.902%;
394
+ --tone-teal-mark: hsl(172.32 79.6178% 30.7843%);
395
+ --tone-teal-line: hsl(172.32 79.6178% 30.7843%);
396
+ --tone-teal-ink: hsl(172.0482 80.5825% 20.1961%);
397
+ --tone-blue-bg: hsl(210 50% 96.0784%);
398
+ --tone-blue-bg-hover: hsl(208.4211 51.3514% 92.7451%);
399
+ --tone-blue-bg-selected: hsl(208.9655 52.7273% 89.2157%);
400
+ --tone-blue-border: hsl(209.4231 74.2857% 72.549%);
401
+ --tone-blue-border-selected: hsl(209.0909 79.8387% 48.6275%);
402
+ --tone-blue-text: hsl(209.2308 79.5918% 38.4314%);
403
+ --tone-blue-icon: hsl(209.0909 79.8387% 48.6275%);
404
+ --tone-blue-fill: 209.0683 80.0995% 39.4118%;
405
+ --tone-blue-ring: 209.0683 80.0995% 39.4118%;
406
+ --tone-blue-mark: hsl(209.0909 79.8387% 48.6275%);
407
+ --tone-blue-line: hsl(209.0909 79.8387% 48.6275%);
408
+ --tone-blue-ink: hsl(209.0909 80.4878% 32.1569%);
409
+ --tone-pink-bg: hsl(325 66.6667% 96.4706%);
410
+ --tone-pink-bg-hover: hsl(321.8182 64.7059% 93.3333%);
411
+ --tone-pink-bg-selected: hsl(320.625 61.5385% 89.8039%);
412
+ --tone-pink-border: hsl(322.2222 79.4118% 73.3333%);
413
+ --tone-pink-border-selected: hsl(321.7647 80.315% 49.8039%);
414
+ --tone-pink-text: hsl(321.9876 80.0995% 39.4118%);
415
+ --tone-pink-icon: hsl(321.7647 80.315% 49.8039%);
416
+ --tone-pink-fill: 322 80.3571% 43.9216%;
417
+ --tone-pink-ring: 322 80.3571% 43.9216%;
418
+ --tone-pink-mark: hsl(321.7647 80.315% 49.8039%);
419
+ --tone-pink-line: hsl(321.7647 80.315% 49.8039%);
420
+ --tone-pink-ink: hsl(321.9403 79.7619% 32.9412%);
421
+ --tone-brown-bg: hsl(15 20% 96.0784%);
422
+ --tone-brown-bg-hover: hsl(22.5 21.0526% 92.549%);
423
+ --tone-brown-bg-selected: hsl(23.0769 22.807% 88.8235%);
424
+ --tone-brown-border: hsl(23.4783 32.3944% 72.1569%);
425
+ --tone-brown-border-selected: hsl(23.8636 35.7724% 48.2353%);
426
+ --tone-brown-text: hsl(24.3478 35.7513% 37.8431%);
427
+ --tone-brown-icon: hsl(23.8636 35.7724% 48.2353%);
428
+ --tone-brown-fill: 23.662 36.0406% 38.6275%;
429
+ --tone-brown-ring: 23.662 36.0406% 38.6275%;
430
+ --tone-brown-mark: hsl(23.8636 35.7724% 48.2353%);
431
+ --tone-brown-line: hsl(23.8636 35.7724% 48.2353%);
432
+ --tone-brown-ink: hsl(23.3898 36.1963% 31.9608%);
433
+ --tone-cyan-bg: hsl(187.5 33.3333% 95.2941%);
434
+ --tone-cyan-bg-hover: hsl(192 34.8837% 91.5686%);
435
+ --tone-cyan-bg-selected: hsl(193.6364 34.375% 87.451%);
436
+ --tone-cyan-border: hsl(192.3077 44.8276% 65.8824%);
437
+ --tone-cyan-border-selected: hsl(192.1622 80.4348% 36.0784%);
438
+ --tone-cyan-text: hsl(192.4138 79.4521% 28.6275%);
439
+ --tone-cyan-icon: hsl(192.1622 80.4348% 36.0784%);
440
+ --tone-cyan-fill: 192.3967 80.1325% 29.6078%;
441
+ --tone-cyan-ring: 192.3967 80.1325% 29.6078%;
442
+ --tone-cyan-mark: hsl(192.1622 80.4348% 36.0784%);
443
+ --tone-cyan-line: hsl(192.1622 80.4348% 36.0784%);
444
+ --tone-cyan-ink: hsl(192.2449 80.3279% 23.9216%);
445
+ --tone-lime-bg: hsl(90 25% 95.2941%);
446
+ --tone-lime-bg-hover: hsl(84 22.7273% 91.3725%);
447
+ --tone-lime-bg-selected: hsl(84 22.3881% 86.8627%);
448
+ --tone-lime-border: hsl(84.4444 30% 64.7059%);
449
+ --tone-lime-border-selected: hsl(83.8835 59.5376% 33.9216%);
450
+ --tone-lime-text: hsl(83.7037 60% 26.4706%);
451
+ --tone-lime-icon: hsl(83.8835 59.5376% 33.9216%);
452
+ --tone-lime-fill: 84.5783 59.7122% 27.2549%;
453
+ --tone-lime-ring: 84.5783 59.7122% 27.2549%;
454
+ --tone-lime-mark: hsl(83.8835 59.5376% 33.9216%);
455
+ --tone-lime-line: hsl(83.8835 59.5376% 33.9216%);
456
+ --tone-lime-ink: hsl(83.8235 59.6491% 22.3529%);
457
+ --surface-violet-bg: var(--tone-violet-bg);
458
+ --surface-violet-border: var(--tone-violet-border);
459
+ --surface-violet-text: var(--tone-violet-text);
460
+ --surface-orange-bg: var(--tone-orange-bg);
461
+ --surface-orange-border: var(--tone-orange-border);
462
+ --surface-orange-text: var(--tone-orange-text);
463
+ --surface-teal-bg: var(--tone-teal-bg);
464
+ --surface-teal-border: var(--tone-teal-border);
465
+ --surface-teal-text: var(--tone-teal-text);
712
466
  /* tones:end */
713
- /* Run-mix ramp — the fills of a proportional status bar.
714
- *
715
- * Separate from the `--surface-*-text` tones because a 6px bar is read
716
- * differently from a chip: it is told by hue alone, at a size too small to
717
- * carry a glyph or a label, so its slices must ALSO separate from each other
718
- * in greyscale. These five are spaced at least 1.18:1 apart in relative
719
- * luminance — 1.30 in dark, 1.20 in light, where the ramp has less room
720
- * before it runs into the paper — and each clears 3:1 against the track, so
721
- * the mix stays countable with any form of colour blindness and in a
722
- * monochrome screenshot. 1.18 is the floor the gate holds them to.
723
- *
724
- * Ranked by how much the reader needs to tell them apart: succeeded is
725
- * brightest and cancelled quietest, so the two that matter — succeeded and
726
- * failed — sit at opposite ends and can never be confused.
727
- *
728
- * Spacing them by OKLCH lightness does NOT work: that is perceptual, and the
729
- * contrast ratio is computed from relative luminance, so an even perceptual
730
- * ramp left every pair at 1.1:1. Solved in luminance space instead. */
731
- --run-mix-succeeded: #3c9b78;
732
- --run-mix-waiting: #c16227;
733
- --run-mix-failed: #cd342f;
734
- --run-mix-in-flight: #00679e;
735
- --run-mix-cancelled: #515367;
736
-
737
- --glass-bg-strong: var(--depth-1);
738
- --code-header-bg: color-mix(in srgb, hsl(var(--hsl-muted)) 50%, transparent);
739
-
740
- /* Shadows — flat, no inner ring, no glow */
741
- --shadow-card: 0 1px 2px rgba(25, 28, 36, 0.06);
742
- --shadow-dropdown: 0 8px 30px rgba(25, 28, 36, 0.10);
743
- --shadow-glow: none;
744
- --shadow-accent: 0 1px 2px rgba(25, 28, 36, 0.06);
467
+ --run-mix-succeeded: hsl(154.8718 60% 38.2353%); --run-mix-waiting: hsl(38.3193 60.4061% 38.6275%);
468
+ --run-mix-failed: hsl(0 59.6838% 49.6078%); --run-mix-in-flight: hsl(200.7692 60.4651% 33.7255%);
469
+ --run-mix-cancelled: hsl(228.5714 11.8644% 34.7059%);
470
+ --glass-bg-strong: var(--depth-1); --code-header-bg: color-mix(in srgb, hsl(var(--hsl-muted)) 50%, transparent);
471
+ --shadow-color: 220 40% 8%; /* #0c121d */ --shadow-card: 0 1px 2px hsl(var(--shadow-color) / 0.06);
472
+ --shadow-dropdown: 0 8px 30px hsl(var(--shadow-color) / 0.1); --shadow-overlay: 0 2px 6px hsl(var(--shadow-color) / 0.1), 0 16px 40px hsl(var(--shadow-color) / 0.16);
745
473
  }
746
-
747
-
748
- /* Focus and field hover — the palette behind @tangle-network/ui's focus
749
- * treatment (`focusField` / `focusRing` in ui's lib/focus.ts).
750
- *
751
- * A focused field keeps its 1px border and shifts it to --focus-border, with a
752
- * 3px --focus-halo ring outside it. A focused button or tab draws a 1px
753
- * --focus-border line with the same halo beyond it. Both render as box-shadow,
754
- * so they follow border-radius and never move layout.
755
- *
756
- * The BORDER carries the contrast and the halo is decoration. --focus-border is
757
- * the ring at 80%: 4.7:1 on the white light-mode field and 5.7:1 on the dark
758
- * card, so the indicator clears the 3:1 non-text floor (WCAG 1.4.11) in every
759
- * theme, while reading as a tint of the field instead of a hard indigo outline.
760
- * An 18% halo sits near 1.3:1 against the page on purpose: it softens the edge
761
- * and is never the only cue. Gated in focus.test.ts.
762
- *
763
- * Every value is derived from a spine token (--hsl-ring, --surface-danger-text,
764
- * --hsl-border, --hsl-foreground), and a custom property that references
765
- * another is resolved where it is declared. So this rule names every scope that
766
- * can redefine those tokens: a named theme or a light island on a descendant
767
- * gets its own focus colors instead of inheriting the root's. */
768
474
  :root,
769
475
  .dark,
770
476
  .light,
771
477
  [data-sandbox-ui],
772
478
  [data-sandbox-theme],
773
479
  [data-theme] {
774
- --focus-border: hsl(var(--hsl-ring) / 0.8);
775
- --focus-halo: hsl(var(--hsl-ring) / 0.18);
776
- /* The danger INK, not the destructive fill: the fill is tuned to carry white
777
- * text and measures about 2:1 on the dark card. */
778
- --focus-border-danger: color-mix(in srgb, var(--surface-danger-text) 80%, transparent);
779
- --focus-halo-danger: color-mix(in srgb, var(--surface-danger-text) 18%, transparent);
780
- /* A resting hairline one step toward the ink, for hover: darker on light
781
- * paper, lighter on a dark card, never tinted. */
480
+ --focus-border: hsl(var(--hsl-ring) / 0.8); --focus-halo: hsl(var(--hsl-ring) / 0.18);
481
+ --focus-border-danger: color-mix(in srgb, var(--surface-danger-text) 80%, transparent); --focus-halo-danger: color-mix(in srgb, var(--surface-danger-text) 18%, transparent);
782
482
  --border-strong: color-mix(in srgb, hsl(var(--hsl-border)), hsl(var(--hsl-foreground)) 20%);
783
483
  }
784
-
785
- /* Surface ladder and interaction states — the palette behind @tangle-network/ui's
786
- * interaction helpers (`ixControl`, `ixField`, `ixSelected`, `ixRow` … in ui's
787
- * lib/interaction.ts) and the Card primitive's surface context.
788
- *
789
- * LADDER. A card (`[data-slot="card"]`) re-declares two context variables for
790
- * everything inside it, so nesting needs no app selector:
791
- * --card the plane a nested card or `bg-card` box paints: --hsl-raised one
792
- * level in, --hsl-raised-2 two levels in.
793
- * --well the field fill: --well-page on the page, --well-card in a card,
794
- * --well-raised in a card in a card, --well-raised-2 deeper still.
795
- * The canonical ladder is the spine's own planes: raised is L3 (--hsl-secondary),
796
- * raised-2 is L4 (--hsl-popover), and each well is a plane at least 4.4 OKLCH L
797
- * off the level it fills. Dark wells always sit deeper (page + 30% black on the
798
- * page and in a card, the card in a raised plane); light wells take the
799
- * opposite plane (paper on a grey level, the canvas on paper). Dark raised
800
- * planes also carry a 1px top highlight. Hospitality tunes its own ladder; the
801
- * other named themes keep a flat one (below) until theirs is tuned.
802
- *
803
- * INTERACTION. Four states, all from the focus ring hue (--hsl-ring), so one
804
- * green or one indigo marks every interactive thing in a theme:
805
- * hover 1px edge at .45 plus a 4px halo at .16 (--ix-hover)
806
- * press 1px edge at .95 plus a 4px halo at .30 (--ix-press)
807
- * after a mouse-focused control keeps a 1px .60 / 3px .14 ring (--ix-after)
808
- * selected a .13 tint (.18 in dark) with a 1px inset ring at .85
809
- * Keyboard focus-visible keeps --focus-border / --focus-halo above.
810
- *
811
- * Declared on every scope that can redefine --hsl-ring or the ladder, as the
812
- * focus rule is, because a custom property is resolved where it is declared. */
813
484
  :root,
814
485
  .dark,
815
486
  .light,
816
487
  [data-sandbox-ui],
817
488
  [data-sandbox-theme],
818
489
  [data-theme] {
819
- --hsl-raised: var(--hsl-secondary);
820
- --hsl-raised-2: var(--hsl-popover);
821
- --well-page: color-mix(in oklab, hsl(var(--hsl-background)) 70%, black);
822
- --well-card: var(--well-page);
823
- --well-raised: hsl(var(--hsl-card));
824
- --well-raised-2: var(--well-raised);
825
- --well: var(--well-page);
826
- /* The hairline is 1.5:1 by design; a field edge is non-text UI and needs 3:1.
827
- * 45% toward the ink clears 4:1 on the spine card in both modes. */
828
- --field-border: color-mix(in oklab, hsl(var(--hsl-border)), hsl(var(--hsl-foreground)) 45%);
829
- --shadow-raised: var(--shadow-card);
830
- /* A shadow token joins a comma list, so "none" would void the whole list. */
831
- --shadow-well: 0 0 0 0 transparent;
832
- --edge-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.06);
833
- --ix-hover: 0 0 0 1px hsl(var(--hsl-ring) / 0.45), 0 0 0 4px hsl(var(--hsl-ring) / 0.16);
834
- --ix-hover-border: hsl(var(--hsl-ring) / 0.7);
835
- --ix-press: 0 0 0 1px hsl(var(--hsl-ring) / 0.95), 0 0 0 4px hsl(var(--hsl-ring) / 0.3);
836
- --ix-after: 0 0 0 1px hsl(var(--hsl-ring) / 0.6), 0 0 0 3px hsl(var(--hsl-ring) / 0.14);
837
- --ix-sel-ring: hsl(var(--hsl-ring) / 0.85);
838
- --ix-sel-bg: hsl(var(--hsl-ring) / 0.18);
839
- --ix-hover-bg: hsl(var(--hsl-ring) / 0.08);
490
+ --hsl-raised: var(--hsl-secondary); --hsl-raised-2: var(--hsl-popover);
491
+ --well-page: color-mix(in oklab, hsl(var(--hsl-background)) 70%, black); --well-card: var(--well-page);
492
+ --well-raised: hsl(var(--hsl-card)); --well-raised-2: var(--well-raised);
493
+ --well: var(--well-page); --field-border: color-mix(in oklab, hsl(var(--hsl-border)), hsl(var(--hsl-foreground)) 45%);
494
+ --shadow-raised: var(--shadow-card); --shadow-well: 0 0 0 0 transparent;
495
+ --edge-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.06); --ix-hover: 0 0 0 1px hsl(var(--hsl-ring) / 0.45), 0 0 0 4px hsl(var(--hsl-ring) / 0.16);
496
+ --ix-hover-border: hsl(var(--hsl-ring) / 0.7); --ix-press: 0 0 0 1px hsl(var(--hsl-ring) / 0.95), 0 0 0 4px hsl(var(--hsl-ring) / 0.3);
497
+ --ix-after: 0 0 0 1px hsl(var(--hsl-ring) / 0.6), 0 0 0 3px hsl(var(--hsl-ring) / 0.14); --ix-sel-ring: hsl(var(--hsl-ring) / 0.85);
498
+ --ix-sel-bg: hsl(var(--hsl-ring) / 0.18); --ix-hover-bg: hsl(var(--hsl-ring) / 0.08);
840
499
  }
841
-
842
- /* Light planes need less tint for the same step, and take their wells from the
843
- * opposite plane. Same scope list as the chart light rule below; dark is the
844
- * default. */
845
500
  [data-sandbox-theme="vault"]:where(:not(.dark)),
846
501
  [data-sandbox-theme="dawn"]:where(:not(.dark)),
847
502
  [data-theme="hospitality"]:where(:not(.dark)),
@@ -849,81 +504,32 @@
849
504
  [data-theme="light"],
850
505
  .light,
851
506
  [data-theme$="-light"] {
852
- --ix-sel-bg: hsl(var(--hsl-ring) / 0.13);
853
- --ix-hover-bg: hsl(var(--hsl-ring) / 0.07);
854
- --well-page: hsl(var(--hsl-card));
855
- --well-card: hsl(var(--hsl-background));
856
- --well-raised-2: var(--well-card);
857
- --edge-highlight: 0 0 0 0 transparent;
507
+ --ix-sel-bg: hsl(var(--hsl-ring) / 0.13); --ix-hover-bg: hsl(var(--hsl-ring) / 0.07);
508
+ --well-page: hsl(var(--hsl-card)); --well-card: hsl(var(--hsl-background));
509
+ --well-raised-2: var(--well-card); --edge-highlight: 0 0 0 0 transparent;
858
510
  }
859
-
860
- /* Named themes with their own planes keep a flat ladder until each is tuned as
861
- * Hospitality was: a nested card paints the card, and its field the card's well. */
862
- [data-theme="aubergine"], [data-theme="aubergine-light"], [data-theme="arena"], [data-theme="arena-light"],
863
- [data-theme="super"], [data-theme="super-light"], [data-theme="tangle-light"], [data-theme="agents"],
864
- [data-theme="agents-light"], [data-theme="website"], [data-theme="intelligence"] {
865
- --hsl-raised: var(--hsl-card);
866
- --hsl-raised-2: var(--hsl-card);
867
- --well-raised: var(--well-card);
868
- --well-raised-2: var(--well-card);
869
- --edge-highlight: 0 0 0 0 transparent;
870
- }
871
-
872
- /* Surface context: keyed only on the Card primitive's data-slot, never on app
873
- * classes. :where(*) keeps it at the specificity of one attribute, so a theme
874
- * scope opened inside a card still wins. */
875
511
  [data-slot="card"] :where(*) {
876
- --card: var(--hsl-raised);
877
- --well: var(--well-card);
512
+ --card: var(--hsl-raised); --well: var(--well-card);
878
513
  }
879
514
  [data-slot="card"] [data-slot="card"] :where(*) {
880
- --card: var(--hsl-raised-2);
881
- --well: var(--well-raised);
515
+ --card: var(--hsl-raised-2); --well: var(--well-raised);
882
516
  }
883
517
  [data-slot="card"] [data-slot="card"] [data-slot="card"] :where(*) {
884
518
  --well: var(--well-raised-2);
885
519
  }
886
-
887
- /* Chart marks — the palette behind @tangle-network/charts.
888
- *
889
- * One accent marks the measure a reader decides on (a rate bar, a frontier
890
- * point, a solved attempt). One muted grey marks everything secondary. An
891
- * ordinal indigo ramp marks App Grade tiers C < B < A < S; F has no fill and
892
- * draws as a --chart-muted outline, the same mark as an unsolved attempt. No
893
- * categorical palette ships: identity is carried by direct labels.
894
- *
895
- * Contrast against the dark canvas (#0a0a14) and white paper, checked with the
896
- * dataviz palette validator and WCAG ratios:
897
- * ink 14.45 / 13.70, ink-muted 7.34 / 5.56, accent 6.05 / 7.41,
898
- * muted 5.54 / 4.41, grid 1.46 / 1.12 (recessive by design).
899
- * Tiers pass the ordinal checks in both modes: one hue, monotone lightness,
900
- * visible steps. They are iris ladder steps (ladders.css) except #8b87f0 dark
901
- * and #7c7fe3 light, which sit between two steps to keep the gaps even.
902
- *
903
- * The aliases re-resolve on every theme scope, as the focus rule above does,
904
- * so a named theme's ink and hairlines carry into its charts. */
905
520
  :root,
906
521
  .dark,
907
522
  .light,
908
523
  [data-sandbox-ui],
909
524
  [data-sandbox-theme],
910
525
  [data-theme] {
911
- --chart-ink: var(--text-primary);
912
- --chart-ink-muted: var(--text-dim);
913
- --chart-muted: var(--md3-outline);
914
- --chart-grid: var(--md3-surface-container-high);
915
- --chart-rule: var(--md3-outline-variant);
916
- --chart-shade: var(--bg-hover);
917
- --chart-accent: var(--brand-cool);
918
- --chart-tier-c: #4a4a95;
919
- --chart-tier-b: #5b5bd6;
920
- --chart-tier-a: #8b87f0;
921
- --chart-tier-s: #b1a9ff;
526
+ --chart-ink: var(--text-primary); --chart-ink-muted: var(--text-dim);
527
+ --chart-muted: var(--md3-outline); --chart-grid: var(--md3-surface-container-high);
528
+ --chart-rule: var(--md3-outline-variant); --chart-shade: var(--bg-hover);
529
+ --chart-accent: var(--brand-cool); --chart-tier-c: hsl(246.1017 55.1402% 41.9608%);
530
+ --chart-tier-b: hsl(246.1905 54.7826% 54.902%); --chart-tier-a: hsl(245.3933 54.6012% 68.0392%);
531
+ --chart-tier-s: hsl(245.6604 54.6392% 80.9804%);
922
532
  }
923
-
924
- /* Light: the accent is the indigo fill (#4c3fc6, 7.41:1 on white) and the tier
925
- * ramp runs light to dark. `[data-theme$="-light"]` covers the named light
926
- * themes, which would otherwise inherit the dark ramp from :root. */
927
533
  [data-sandbox-theme="vault"]:where(:not(.dark)),
928
534
  [data-sandbox-theme="dawn"]:where(:not(.dark)),
929
535
  [data-theme="hospitality"]:where(:not(.dark)),
@@ -931,16 +537,11 @@
931
537
  [data-theme="light"],
932
538
  .light,
933
539
  [data-theme$="-light"] {
934
- --chart-accent: hsl(var(--hsl-primary));
935
- --chart-tier-c: #9b9ef0;
936
- --chart-tier-b: #7c7fe3;
937
- --chart-tier-a: #5b5bd6;
938
- --chart-tier-s: #272962;
540
+ --chart-accent: hsl(var(--hsl-primary)); --chart-tier-c: hsl(246.2687 54.4715% 75.8824%);
541
+ --chart-tier-b: hsl(246.055 54.7739% 60.9804%); --chart-tier-a: hsl(246.0465 54.8936% 46.0784%);
542
+ --chart-tier-s: hsl(245.5172 54.717% 31.1765%);
939
543
  }
940
-
941
-
942
- /* Motion is opt-in at the component, but its reduced-motion preference is
943
- * shared. Re-declare composites at the same boundary as their durations. */
544
+ @keyframes tangle-breathe { 50% { opacity: 0.45; } }
944
545
  @media (prefers-reduced-motion: reduce) {
945
546
  :root,
946
547
  .dark,
@@ -962,7 +563,6 @@
962
563
  --motion-arrive: var(--duration-arrive) var(--ease-expo);
963
564
  }
964
565
  }
965
-
966
566
  /* tone-scopes:begin — generated by scripts/gen-ladders.mjs; edit its CATEGORY map, not these lines. */
967
567
  [data-tone="violet"],
968
568
  [data-tone="violet"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
@@ -1045,3 +645,4 @@
1045
645
  --tone-icon: var(--tone-lime-icon);
1046
646
  }
1047
647
  /* tone-scopes:end */
648
+ /* palette:end */