@tangle-network/sandbox-ui 0.8.4 → 0.10.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 (27) hide show
  1. package/README.md +5 -6
  2. package/dist/auth.js +2 -2
  3. package/dist/chat.js +3 -3
  4. package/dist/{chunk-XXDFEF72.js → chunk-2XCOGNZP.js} +131 -52
  5. package/dist/{chunk-VOUV7GGB.js → chunk-DI3NZ5ZX.js} +8 -22
  6. package/dist/{chunk-BUOQTBTO.js → chunk-JLKYXLFN.js} +1 -1
  7. package/dist/{chunk-2QZ6G7NM.js → chunk-MKTSMWVD.js} +5 -5
  8. package/dist/{chunk-UXQMIR3D.js → chunk-OHPW55EV.js} +1 -1
  9. package/dist/{chunk-WXK43R62.js → chunk-PLTZB5BC.js} +1 -1
  10. package/dist/{chunk-HFMAXUHV.js → chunk-QC4BJEG6.js} +2 -2
  11. package/dist/{chunk-3CJ2SOEI.js → chunk-US6JKJKH.js} +2 -2
  12. package/dist/{chunk-7U2Z23NE.js → chunk-VX3XOUEB.js} +15 -1
  13. package/dist/dashboard.d.ts +25 -4
  14. package/dist/dashboard.js +67 -18
  15. package/dist/globals.css +538 -1038
  16. package/dist/index.d.ts +1 -1
  17. package/dist/index.js +8 -8
  18. package/dist/openui.js +2 -2
  19. package/dist/pages.d.ts +77 -5
  20. package/dist/pages.js +1263 -165
  21. package/dist/primitives.js +2 -2
  22. package/dist/styles.css +538 -1038
  23. package/dist/tokens.css +248 -857
  24. package/dist/{variant-list-C8wx2TqF.d.ts → variant-list-BNwUOSgz.d.ts} +14 -1
  25. package/dist/workspace.d.ts +1 -1
  26. package/dist/workspace.js +4 -4
  27. package/package.json +16 -3
package/dist/tokens.css CHANGED
@@ -1,70 +1,70 @@
1
1
  /* Tangle Sandbox UI design tokens */
2
- /* Brand reference: tangle.tools — deep indigo palette, electric #4a3aff primary */
2
+ /* Brand: warm purple palette, #5B4ED4 primary */
3
3
 
4
4
  /* MD3 surface hierarchy */
5
5
  :root,
6
6
  [data-sandbox-ui] {
7
- --md3-surface: #0a0a0c;
8
- --md3-surface-dim: #070709;
9
- --md3-surface-bright: #1b1b22;
10
- --md3-surface-container-lowest: #000000;
11
- --md3-surface-container-low: #0c0c0f;
12
- --md3-surface-container: #101014;
13
- --md3-surface-container-high: #15151a;
14
- --md3-surface-container-highest: #1e1e24;
15
- --md3-surface-variant: #1e1e24;
7
+ --md3-surface: #0a0a14;
8
+ --md3-surface-dim: #07070d;
9
+ --md3-surface-bright: #1b1a2c;
10
+ --md3-surface-container-lowest: #000001;
11
+ --md3-surface-container-low: #0d0c18;
12
+ --md3-surface-container: #11101e;
13
+ --md3-surface-container-high: #171624;
14
+ --md3-surface-container-highest: #1f1e30;
15
+ --md3-surface-variant: #1f1e30;
16
16
  --md3-on-surface: #fdfdfd;
17
- --md3-on-surface-variant: #b0b0b8;
18
-
19
- --md3-primary: #9b8cff;
20
- --md3-primary-dim: #705bf5;
21
- --md3-primary-container: #5d48e5;
17
+ --md3-on-surface-variant: #aaa8b8;
18
+
19
+ --md3-primary: #818CF8;
20
+ --md3-primary-dim: #6366F1;
21
+ --md3-primary-container: #4F46E5;
22
22
  --md3-on-primary: #ffffff;
23
- --md3-on-primary-container: #efeaff;
24
- --md3-primary-fixed: #ada3ff;
25
- --md3-primary-fixed-dim: #9082ff;
26
-
27
- --md3-secondary: #c4b9f5;
28
- --md3-secondary-dim: #b6ace7;
29
- --md3-secondary-container: #2b234d;
30
- --md3-on-secondary: #e8e4ff;
31
- --md3-on-secondary-container: #e8e4ff;
32
-
33
- --md3-tertiary: #10b981;
34
- --md3-outline: #474858;
35
- --md3-outline-variant: #282937;
36
-
23
+ --md3-on-primary-container: #E0E7FF;
24
+ --md3-primary-fixed: #A5AAFC;
25
+ --md3-primary-fixed-dim: #818CF8;
26
+
27
+ --md3-secondary: #C7D2FE;
28
+ --md3-secondary-dim: #A5B4FC;
29
+ --md3-secondary-container: #312E81;
30
+ --md3-on-secondary: #E8E5FF;
31
+ --md3-on-secondary-container: #E8E5FF;
32
+
33
+ --md3-tertiary: #10B981;
34
+ --md3-outline: #434260;
35
+ --md3-outline-variant: #2A293D;
36
+
37
37
  --md3-error: #ff5277;
38
38
  --md3-error-dim: #eb2855;
39
39
  --md3-error-container: #82042b;
40
40
  --md3-on-error: #ffffff;
41
41
  --md3-on-error-container: #ffbdf2;
42
-
42
+
43
43
  --md3-inverse-surface: #fdfdfd;
44
- --md3-inverse-primary: #4530c5;
44
+ --md3-inverse-primary: #4F46E5;
45
45
  --md3-inverse-on-surface: #000000;
46
- --md3-surface-tint: #9b8cff;
46
+ --md3-surface-tint: #818CF8;
47
47
 
48
48
  /* Semantic HSL bridge */
49
- --hsl-background: 248 52% 5%;
50
- --hsl-foreground: 244 20% 94%;
51
- --hsl-card: 246 42% 12%;
52
- --hsl-card-foreground: 244 20% 94%;
53
- --hsl-popover: 246 40% 15%;
54
- --hsl-popover-foreground: 244 20% 94%;
55
- --hsl-primary: 247 100% 61%;
49
+ --hsl-background: 244 28% 5%;
50
+ --hsl-foreground: 240 18% 94%;
51
+ --hsl-card: 246 30% 11%;
52
+ --hsl-card-foreground: 240 18% 94%;
53
+ --hsl-popover: 246 28% 14%;
54
+ --hsl-popover-foreground: 240 18% 94%;
55
+ --hsl-primary: 239 84% 67%;
56
56
  --hsl-primary-foreground: 0 0% 100%;
57
- --hsl-secondary: 243 25% 19%;
57
+ --hsl-secondary: 248 24% 18%;
58
58
  --hsl-secondary-foreground: 240 16% 90%;
59
- --hsl-muted: 242 22% 16%;
60
- --hsl-muted-foreground: 233 17% 62%;
61
- --hsl-accent: 245 28% 21%;
59
+ --hsl-muted: 246 22% 15%;
60
+ --hsl-muted-foreground: 240 14% 58%;
61
+ --hsl-accent: 248 26% 20%;
62
62
  --hsl-accent-foreground: 240 16% 92%;
63
63
  --hsl-destructive: 348 90% 60%;
64
64
  --hsl-destructive-foreground: 0 0% 100%;
65
- --hsl-border: 236 16% 22%;
66
- --hsl-input: 245 30% 15%;
67
- --hsl-ring: 247 100% 61%;
65
+ --hsl-border: 244 14% 22%;
66
+ --hsl-input: 246 28% 14%;
67
+ --hsl-ring: 239 84% 67%;
68
68
  --hsl-success: 160 84% 39%;
69
69
  --hsl-warning: 40 94% 56%;
70
70
  --hsl-info: 200 88% 56%;
@@ -95,24 +95,24 @@
95
95
  --info: var(--hsl-info);
96
96
 
97
97
  /* Sidebar tokens */
98
- --sidebar-background: 248 52% 5%;
99
- --sidebar-foreground: 244 20% 94%;
100
- --sidebar-primary: 247 100% 61%;
98
+ --sidebar-background: 244 28% 5%;
99
+ --sidebar-foreground: 240 18% 94%;
100
+ --sidebar-primary: 239 84% 67%;
101
101
  --sidebar-primary-foreground: 0 0% 100%;
102
- --sidebar-accent: 245 28% 21%;
102
+ --sidebar-accent: 248 26% 20%;
103
103
  --sidebar-accent-foreground: 240 16% 92%;
104
- --sidebar-border: 236 16% 18%;
105
- --sidebar-ring: 247 100% 61%;
104
+ --sidebar-border: 244 14% 17%;
105
+ --sidebar-ring: 239 84% 67%;
106
106
 
107
- /* Depth scale — Tangle deep indigo surfaces */
108
- --depth-1: #08071A;
109
- --depth-2: #131228;
110
- --depth-3: #1C1A3A;
111
- --depth-4: #26244C;
107
+ /* Depth scale — Tangle deep purple surfaces */
108
+ --depth-1: #0C0B1D;
109
+ --depth-2: #141328;
110
+ --depth-3: #1D1B38;
111
+ --depth-4: #262448;
112
112
 
113
113
  /* Status colors */
114
- --status-running: #10b981;
115
- --status-creating: #8263FF;
114
+ --status-running: #10B981;
115
+ --status-creating: #9B93F0;
116
116
  --status-stopped: #FFB800;
117
117
  --status-warm: #FF8A4C;
118
118
  --status-cold: #4AABFF;
@@ -122,7 +122,7 @@
122
122
  /* Status surface tokens — bg / border / text for each semantic color */
123
123
  --surface-success-bg: #022c22;
124
124
  --surface-success-border: #14532d;
125
- --surface-success-text: #34d399;
125
+ --surface-success-text: #34D399;
126
126
  --surface-warning-bg: #451a03;
127
127
  --surface-warning-border: #78350f;
128
128
  --surface-warning-text: #fbbf24;
@@ -135,9 +135,9 @@
135
135
  --surface-teal-bg: #042f2e;
136
136
  --surface-teal-border: #134e4a;
137
137
  --surface-teal-text: #2dd4bf;
138
- --surface-violet-bg: #2e1065;
139
- --surface-violet-border: #4c1d95;
140
- --surface-violet-text: #a78bfa;
138
+ --surface-violet-bg: #1e1b4b;
139
+ --surface-violet-border: #3730a3;
140
+ --surface-violet-text: #B8B2F5;
141
141
  --surface-orange-bg: #431407;
142
142
  --surface-orange-border: #7c2d12;
143
143
  --surface-orange-text: #fb923c;
@@ -154,73 +154,77 @@
154
154
 
155
155
  /* Mesh gradient — Tangle brand glows */
156
156
  --mesh-teal: rgba(16, 185, 129, 0.05);
157
- --mesh-violet: rgba(130, 99, 255, 0.07);
158
- --mesh-blue: rgba(74, 58, 255, 0.04);
157
+ --mesh-violet: rgba(99, 102, 241, 0.07);
158
+ --mesh-blue: rgba(129, 140, 248, 0.04);
159
159
 
160
- /* Brand gradients — Tangle exact */
161
- --tangle-gradient: linear-gradient(135deg, #8263FF, #4a3aff);
162
- --tangle-gradient-text: linear-gradient(135deg, #A78FFF, #6D6AFF);
163
- --accent-gradient-strong: linear-gradient(135deg, #8263FF, #4a3aff);
164
- --accent-surface-soft: rgba(130, 99, 255, 0.12);
165
- --accent-surface-strong: rgba(130, 99, 255, 0.20);
166
- --accent-text: #A78FFF;
160
+ /* Brand gradients — Tangle */
161
+ --tangle-gradient: linear-gradient(135deg, #6366F1, #818CF8);
162
+ --tangle-gradient-text: linear-gradient(135deg, #A5AAFC, #818CF8);
163
+ --accent-gradient-strong: linear-gradient(135deg, #6366F1, #818CF8);
164
+ --accent-surface-soft: rgba(99, 102, 241, 0.12);
165
+ --accent-surface-strong: rgba(99, 102, 241, 0.20);
166
+ --accent-text: #A5AAFC;
167
167
 
168
168
  /* Surfaces */
169
- --bg-root: radial-gradient(ellipse 70% 50% at 20% 0%, rgba(130, 99, 255, 0.08), transparent),
170
- radial-gradient(ellipse 50% 40% at 80% 10%, rgba(74, 58, 255, 0.06), transparent),
169
+ --bg-root: radial-gradient(ellipse 70% 50% at 20% 0%, rgba(99, 102, 241, 0.08), transparent),
170
+ radial-gradient(ellipse 50% 40% at 80% 10%, rgba(129, 140, 248, 0.06), transparent),
171
171
  linear-gradient(180deg, var(--depth-1), #0D0C1E 100%);
172
172
  --bg-dark: var(--depth-1);
173
173
  --bg-card: hsl(var(--hsl-card));
174
- --bg-elevated: hsl(246 38% 18%);
175
- --bg-section: hsl(246 38% 9%);
174
+ --bg-elevated: hsl(246 28% 17%);
175
+ --bg-section: hsl(246 28% 9%);
176
176
  --bg-input: hsl(var(--hsl-input));
177
- --bg-hover: rgba(130, 99, 255, 0.08);
178
- --bg-selection: rgba(130, 99, 255, 0.18);
177
+ --bg-hover: rgba(99, 102, 241, 0.08);
178
+ --bg-selection: rgba(99, 102, 241, 0.18);
179
179
 
180
180
  /* Text */
181
181
  --text-primary: hsl(var(--hsl-foreground));
182
- --text-secondary: hsl(244 18% 88%);
183
- --text-muted: #8B90B8;
184
- --text-dim: #6B70A0;
185
-
186
- /* Brand accents — Tangle exact */
187
- --brand-primary: #4a3aff;
188
- --brand-strong: #3B2ECC;
189
- --brand-cool: #8263FF;
190
- --brand-glow: #6D6AFF;
191
- --brand-purple: #A78FFF;
192
- --brand-vibrant: #4a3aff;
193
- --brand-emerald: #10b981;
182
+ --text-secondary: hsl(240 16% 85%);
183
+ --text-muted: #8688B0;
184
+ --text-dim: #606294;
185
+
186
+ /* Brand accents — Tangle */
187
+ --brand-primary: #6366F1;
188
+ --brand-strong: #2E2A5E;
189
+ --brand-strong-text: #ffffff;
190
+ --brand-strong-text-muted: rgba(255, 255, 255, 0.7);
191
+ --brand-strong-text-dim: rgba(255, 255, 255, 0.5);
192
+ --brand-cool: #818CF8;
193
+ --brand-glow: #A5AAFC;
194
+ --brand-purple: #C7D2FE;
195
+ --brand-vibrant: #6366F1;
196
+ --brand-emerald: #10B981;
194
197
 
195
198
  /* Borders */
196
- --border-subtle: rgba(107, 112, 148, 0.08);
197
- --border-default: rgba(107, 112, 148, 0.15);
198
- --border-hover: rgba(107, 112, 148, 0.25);
199
- --border-accent: rgba(130, 99, 255, 0.15);
200
- --border-accent-hover: rgba(130, 99, 255, 0.35);
199
+ --border-subtle: rgba(100, 100, 148, 0.10);
200
+ --border-default: rgba(100, 100, 148, 0.18);
201
+ --border-hover: rgba(100, 100, 148, 0.28);
202
+ --border-accent: rgba(99, 102, 241, 0.18);
203
+ --border-accent-hover: rgba(99, 102, 241, 0.35);
201
204
 
202
205
  /* Buttons */
203
- --btn-primary-bg: #4a3aff;
204
- --btn-primary-hover: #5B4DFF;
205
- --btn-cta-bg: #8263FF;
206
+ --btn-primary-bg: #6366F1;
207
+ --btn-primary-hover: #818CF8;
208
+ --btn-primary-text: #ffffff;
209
+ --btn-cta-bg: #818CF8;
206
210
  --btn-cta-text: #FFFFFF;
207
211
 
208
212
  /* Code / runtime syntax */
209
- --code-keyword: #A78FFF;
210
- --code-string: #10b981;
213
+ --code-keyword: #A5AAFC;
214
+ --code-string: #34D399;
211
215
  --code-function: #6D9FFF;
212
216
  --code-number: #FFB347;
213
- --code-success: #10b981;
214
- --code-comment: #6B7094;
217
+ --code-success: #10B981;
218
+ --code-comment: #606294;
215
219
  --code-error: #FF4D6D;
216
220
 
217
221
  /* Shadows */
218
222
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04);
219
223
  --shadow-dropdown: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06);
220
- --shadow-glow: 0 0 32px rgba(130, 99, 255, 0.18);
221
- --shadow-accent: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(130, 99, 255, 0.2);
224
+ --shadow-glow: 0 0 32px rgba(99, 102, 241, 0.18);
225
+ --shadow-accent: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(99, 102, 241, 0.2);
222
226
  --shadow-status-running: 0 0 6px rgba(16, 185, 129, 0.5);
223
- --shadow-status-creating: 0 0 6px rgba(130, 99, 255, 0.5);
227
+ --shadow-status-creating: 0 0 6px rgba(99, 102, 241, 0.5);
224
228
  --shadow-status-error: 0 0 6px rgba(255, 77, 109, 0.5);
225
229
 
226
230
  /* Radii */
@@ -264,7 +268,7 @@
264
268
  --tool-card-py: 0.5rem;
265
269
  --tool-icon-size: 1.75rem;
266
270
 
267
- /* Syntax highlighting — override per-theme in vault/dawn sections */
271
+ /* Syntax highlighting — override per-theme in vault section */
268
272
  --syntax-comment: #6B7094;
269
273
  --syntax-keyword: #A78FFF;
270
274
  --syntax-string: #10b981;
@@ -286,68 +290,87 @@
286
290
  --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
287
291
  }
288
292
 
289
- [data-sandbox-theme="builder"] {
290
- --hsl-primary: 247 100% 61%;
291
- --brand-primary: #4a3aff;
292
- --brand-cool: #6D9FFF;
293
- --brand-glow: #4a3aff;
294
- --tangle-gradient: linear-gradient(135deg, #4a3aff, #6D9FFF);
295
- --accent-gradient-strong: linear-gradient(135deg, #4a3aff, #6D9FFF);
296
- --status-creating: #4a3aff;
297
- }
293
+ [data-sandbox-theme="vault"] {
294
+ /* Light theme — clean professional, warm purple accents */
295
+
296
+ /* MD3 surface hierarchy */
297
+ --md3-surface: #f8f9fb;
298
+ --md3-surface-dim: #d9dae0;
299
+ --md3-surface-bright: #f8f9fb;
300
+ --md3-surface-container-lowest: #ffffff;
301
+ --md3-surface-container-low: #f3f4f7;
302
+ --md3-surface-container: #edeef2;
303
+ --md3-surface-container-high: #e7e8ed;
304
+ --md3-surface-container-highest: #e1e2e8;
305
+ --md3-surface-variant: #e1e2e8;
306
+ --md3-on-surface: #191c24;
307
+ --md3-on-surface-variant: #464858;
308
+
309
+ --md3-primary: #3E349E;
310
+ --md3-primary-dim: #352B88;
311
+ --md3-primary-container: #352B88;
312
+ --md3-on-primary: #ffffff;
313
+ --md3-on-primary-container: #9B93F0;
314
+ --md3-primary-fixed: #E8E5FF;
315
+ --md3-primary-fixed-dim: #C5C0F0;
316
+
317
+ --md3-secondary: #524A78;
318
+ --md3-secondary-dim: #3E3660;
319
+ --md3-secondary-container: #E8E5FF;
320
+ --md3-on-secondary: #ffffff;
321
+ --md3-on-secondary-container: #524A78;
322
+
323
+ --md3-tertiary: #065F46;
324
+ --md3-tertiary-container: #D1FAE5;
325
+ --md3-outline: #6B6E8A;
326
+ --md3-outline-variant: #C7C6D6;
327
+
328
+ --md3-error: #ba1a1a;
329
+ --md3-error-dim: #93000a;
330
+ --md3-error-container: #ffdad6;
331
+ --md3-on-error: #ffffff;
332
+ --md3-on-error-container: #93000a;
298
333
 
299
- [data-sandbox-theme="consumer"] {
300
- --hsl-background: 246 44% 8%;
301
- --hsl-card: 246 36% 13%;
302
- --hsl-input: 246 30% 16%;
303
- --hsl-primary: 160 84% 39%;
304
- --hsl-ring: 160 84% 39%;
305
- --brand-primary: #10b981;
306
- --brand-cool: #10b981;
307
- --brand-glow: #34D399;
308
- --tangle-gradient: linear-gradient(135deg, #10b981, #34D399);
309
- --accent-gradient-strong: linear-gradient(135deg, #10b981, #34D399);
310
- --accent-text: #34D399;
311
- --btn-primary-bg: #10b981;
312
- --btn-primary-hover: #0EA572;
313
- }
334
+ --md3-inverse-surface: #2e2e3e;
335
+ --md3-inverse-primary: #A5AAFC;
336
+ --md3-inverse-on-surface: #f0f1f4;
337
+ --md3-surface-tint: #6366F1;
314
338
 
315
- [data-sandbox-theme="vault"] {
316
- /* Light theme — clean navy/emerald */
317
- --hsl-background: 210 17% 97%;
318
- --hsl-foreground: 210 20% 10%;
339
+ /* Semantic HSL bridge */
340
+ --hsl-background: 225 20% 97%;
341
+ --hsl-foreground: 228 20% 12%;
319
342
  --hsl-card: 0 0% 100%;
320
- --hsl-card-foreground: 210 20% 10%;
343
+ --hsl-card-foreground: 228 20% 12%;
321
344
  --hsl-popover: 0 0% 100%;
322
- --hsl-popover-foreground: 210 20% 10%;
323
- --hsl-primary: 248 100% 35%;
345
+ --hsl-popover-foreground: 228 20% 12%;
346
+ --hsl-primary: 239 84% 67%;
324
347
  --hsl-primary-foreground: 0 0% 100%;
325
- --hsl-secondary: 152 100% 22%;
348
+ --hsl-secondary: 242 22% 42%;
326
349
  --hsl-secondary-foreground: 0 0% 100%;
327
- --hsl-muted: 210 14% 95%;
328
- --hsl-muted-foreground: 215 10% 40%;
329
- --hsl-accent: 210 20% 94%;
330
- --hsl-accent-foreground: 210 20% 10%;
350
+ --hsl-muted: 240 14% 89%;
351
+ --hsl-muted-foreground: 240 10% 36%;
352
+ --hsl-accent: 248 22% 86%;
353
+ --hsl-accent-foreground: 248 38% 30%;
331
354
  --hsl-destructive: 0 72% 41%;
332
355
  --hsl-destructive-foreground: 0 0% 100%;
333
- --hsl-border: 214 18% 88%;
334
- --hsl-input: 214 18% 90%;
335
- --hsl-ring: 248 100% 35%;
336
- --hsl-success: 152 82% 34%;
356
+ --hsl-border: 244 14% 78%;
357
+ --hsl-input: 244 12% 80%;
358
+ --hsl-ring: 239 84% 67%;
359
+ --hsl-success: 160 84% 30%;
337
360
  --hsl-warning: 41 96% 50%;
338
361
  --hsl-info: 212 80% 50%;
339
362
 
340
- --depth-1: #f8f9fa;
341
- --depth-2: #f2f3f5;
342
- --depth-3: #e8eaed;
343
- --depth-4: #dde0e5;
363
+ --depth-1: #f4f4f9;
364
+ --depth-2: #edecf4;
365
+ --depth-3: #e5e4ee;
366
+ --depth-4: #dcdbe8;
344
367
 
345
- --status-running: #2C8C86;
346
- --status-creating: #3B2ECC;
368
+ --status-running: #059669;
369
+ --status-creating: #3E349E;
347
370
  --status-stopped: #B45309;
348
371
  --status-warm: #C05621;
349
372
  --status-cold: #1D6FA4;
350
- --status-error: #C81E34;
373
+ --status-error: #ba1a1a;
351
374
  --status-deleted: #6B6B82;
352
375
 
353
376
  --glass-bg: var(--depth-2);
@@ -371,9 +394,9 @@
371
394
  --surface-teal-bg: #f0fdfa;
372
395
  --surface-teal-border: #99f6e4;
373
396
  --surface-teal-text: #0f766e;
374
- --surface-violet-bg: #f5f3ff;
375
- --surface-violet-border: #ddd6fe;
376
- --surface-violet-text: #6d28d9;
397
+ --surface-violet-bg: #F0EEFF;
398
+ --surface-violet-border: #C5C0F0;
399
+ --surface-violet-text: #3E349E;
377
400
  --surface-orange-bg: #fff7ed;
378
401
  --surface-orange-border: #fed7aa;
379
402
  --surface-orange-text: #c2410c;
@@ -382,720 +405,88 @@
382
405
  --surface-neutral-text: var(--text-muted);
383
406
 
384
407
  /* Sidebar — light */
385
- --sidebar-background: 210 17% 97%;
386
- --sidebar-foreground: 210 20% 10%;
387
- --sidebar-primary: 248 100% 35%;
388
- --sidebar-primary-foreground: 0 0% 100%;
389
- --sidebar-accent: 210 20% 92%;
390
- --sidebar-accent-foreground: 210 20% 10%;
391
- --sidebar-border: 214 18% 88%;
392
- --sidebar-ring: 248 100% 35%;
393
-
394
- --mesh-teal: rgba(44, 140, 134, 0.04);
395
- --mesh-violet: rgba(74, 58, 255, 0.03);
396
- --mesh-blue: rgba(29, 111, 164, 0.03);
397
-
398
- --bg-root: #f8f9fa;
399
- --bg-dark: #f2f3f5;
400
- --bg-card: #ffffff;
401
- --bg-elevated: #ebedf0;
402
- --bg-section: #f2f3f5;
403
- --bg-input: #f0f1f4;
404
- --bg-hover: rgba(74, 58, 255, 0.05);
405
- --bg-selection: rgba(74, 58, 255, 0.08);
406
-
407
- --text-primary: #0F1133;
408
- --text-secondary: #2A2D4A;
409
- --text-muted: #6B7094;
410
- --text-dim: #9DA3C2;
411
-
412
- --brand-primary: #1e116e;
413
- --brand-strong: #211f54;
414
- --brand-cool: #4a3aff;
415
- --brand-glow: #8263FF;
416
- --brand-purple: #4a3aff;
417
- --brand-vibrant: #4a3aff;
418
- --brand-emerald: #10b981;
419
-
420
- --border-subtle: rgba(107, 112, 148, 0.08); /* fixed white-lined issue */
421
- --border-default: rgba(107, 112, 148, 0.15);
422
- --border-hover: rgba(107, 112, 148, 0.25);
423
- --border-accent: rgba(74, 58, 255, 0.15);
424
- --border-accent-hover: rgba(74, 58, 255, 0.35);
425
-
426
- --btn-primary-bg: #1e116e;
427
- --btn-primary-hover: #211f54;
428
- --btn-cta-bg: #4a3aff;
429
- --btn-cta-text: #ffffff;
430
-
431
- --code-keyword: #1e116e;
432
- --code-string: #10b981;
433
- --code-function: #1e116e;
434
- --code-number: #B45309;
435
- --code-success: #10b981;
436
- --code-comment: #6B7094;
437
- --code-error: #C81E34;
438
-
439
- --shadow-card: 0 1px 4px rgba(15, 17, 51, 0.06), 0 0 0 1px rgba(15, 17, 51, 0.05);
440
- --shadow-dropdown: 0 8px 32px rgba(15, 17, 51, 0.10), 0 0 0 1px rgba(15, 17, 51, 0.06);
441
- --shadow-glow: 0 0 32px rgba(74, 58, 255, 0.10);
442
- --shadow-accent: 0 2px 8px rgba(74, 58, 255, 0.12), 0 0 0 1px rgba(74, 58, 255, 0.08);
443
-
444
- --tangle-gradient: linear-gradient(135deg, #1e116e, #4a3aff);
445
- --tangle-gradient-text: linear-gradient(135deg, #1e116e, #4a3aff);
446
- --accent-gradient-strong: linear-gradient(135deg, #1e116e, #4a3aff);
447
- --accent-surface-soft: rgba(74, 58, 255, 0.06);
448
- --accent-surface-strong: rgba(74, 58, 255, 0.12);
449
- --accent-text: #1e116e;
450
-
451
- --font-sans: "Geist", "DM Sans", ui-sans-serif, system-ui, sans-serif;
452
- --font-display: "Outfit", "Geist", sans-serif;
453
- --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
454
-
455
- /* Light syntax highlighting */
456
- --syntax-comment: #8B92B8;
457
- --syntax-keyword: #5B3FCC;
458
- --syntax-string: #059669;
459
- --syntax-function: #2563EB;
460
- --syntax-number: #D97706;
461
- --syntax-meta: #7C3AED;
462
- --syntax-error: #DC2626;
463
- --syntax-variable: #334155;
464
- --syntax-foreground: #1E293B;
465
- }
466
-
467
- /* ── Ocean — cool blue-teal dark theme ── */
468
- [data-sandbox-theme="ocean"] {
469
- --hsl-background: 215 50% 5%;
470
- --hsl-foreground: 210 20% 94%;
471
- --hsl-card: 214 42% 11%;
472
- --hsl-card-foreground: 210 20% 94%;
473
- --hsl-popover: 214 40% 14%;
474
- --hsl-popover-foreground: 210 20% 94%;
475
- --hsl-primary: 199 85% 50%;
476
- --hsl-primary-foreground: 0 0% 100%;
477
- --hsl-secondary: 210 25% 18%;
478
- --hsl-secondary-foreground: 210 16% 90%;
479
- --hsl-muted: 212 22% 15%;
480
- --hsl-muted-foreground: 210 17% 52%;
481
- --hsl-accent: 210 28% 20%;
482
- --hsl-accent-foreground: 210 16% 92%;
483
- --hsl-destructive: 0 85% 58%;
484
- --hsl-destructive-foreground: 0 0% 100%;
485
- --hsl-border: 214 16% 20%;
486
- --hsl-input: 214 30% 14%;
487
- --hsl-ring: 199 85% 50%;
488
- --hsl-success: 160 84% 39%;
489
- --hsl-warning: 40 94% 56%;
490
- --hsl-info: 199 85% 50%;
491
-
492
- --depth-1: #060c14;
493
- --depth-2: #0c1524;
494
- --depth-3: #132035;
495
- --depth-4: #1a2b46;
496
-
497
- --status-running: #10b981;
498
- --status-creating: #0ea5e9;
499
- --status-stopped: #FFB800;
500
- --status-warm: #FF8A4C;
501
- --status-cold: #38bdf8;
502
- --status-error: #ef4444;
503
- --status-deleted: #6B7094;
504
-
505
- --glass-bg: var(--depth-2);
506
- --glass-bg-strong: var(--depth-3);
507
- --glass-border: var(--border-subtle);
508
- --glass-border-hover: var(--border-default);
509
-
510
- --surface-success-bg: #022c22;
511
- --surface-success-border: #14532d;
512
- --surface-success-text: #34d399;
513
- --surface-warning-bg: #451a03;
514
- --surface-warning-border: #78350f;
515
- --surface-warning-text: #fbbf24;
516
- --surface-danger-bg: #450a0a;
517
- --surface-danger-border: #7f1d1d;
518
- --surface-danger-text: #f87171;
519
- --surface-info-bg: #082f49;
520
- --surface-info-border: #0c4a6e;
521
- --surface-info-text: #38bdf8;
522
- --surface-teal-bg: #042f2e;
523
- --surface-teal-border: #134e4a;
524
- --surface-teal-text: #2dd4bf;
525
- --surface-violet-bg: #1e1b4b;
526
- --surface-violet-border: #312e81;
527
- --surface-violet-text: #a5b4fc;
528
- --surface-orange-bg: #431407;
529
- --surface-orange-border: #7c2d12;
530
- --surface-orange-text: #fb923c;
531
- --surface-neutral-bg: var(--depth-3);
532
- --surface-neutral-border: var(--border-subtle);
533
- --surface-neutral-text: var(--text-muted);
534
-
535
- --sidebar-background: 215 50% 5%;
536
- --sidebar-foreground: 210 20% 94%;
537
- --sidebar-primary: 199 85% 50%;
538
- --sidebar-primary-foreground: 0 0% 100%;
539
- --sidebar-accent: 210 28% 20%;
540
- --sidebar-accent-foreground: 210 16% 92%;
541
- --sidebar-border: 214 16% 16%;
542
- --sidebar-ring: 199 85% 50%;
543
-
544
- --mesh-teal: rgba(14, 165, 233, 0.06);
545
- --mesh-violet: rgba(56, 189, 248, 0.04);
546
- --mesh-blue: rgba(14, 165, 233, 0.05);
547
-
548
- --bg-root: radial-gradient(ellipse 70% 50% at 20% 0%, rgba(14, 165, 233, 0.08), transparent),
549
- radial-gradient(ellipse 50% 40% at 80% 10%, rgba(56, 189, 248, 0.05), transparent),
550
- linear-gradient(180deg, var(--depth-1), #0a1628 100%);
551
- --bg-dark: var(--depth-1);
552
- --bg-card: hsl(var(--hsl-card));
553
- --bg-elevated: hsl(214 38% 17%);
554
- --bg-section: hsl(214 38% 8%);
555
- --bg-input: hsl(var(--hsl-input));
556
- --bg-hover: rgba(14, 165, 233, 0.08);
557
- --bg-selection: rgba(14, 165, 233, 0.18);
558
-
559
- --text-primary: hsl(var(--hsl-foreground));
560
- --text-secondary: hsl(210 18% 82%);
561
- --text-muted: #5e7490;
562
- --text-dim: #3d5068;
563
-
564
- --brand-primary: #0ea5e9;
565
- --brand-strong: #0284c7;
566
- --brand-cool: #38bdf8;
567
- --brand-glow: #7dd3fc;
568
- --brand-purple: #38bdf8;
569
- --brand-vibrant: #0ea5e9;
570
- --brand-emerald: #10b981;
571
-
572
- --border-subtle: rgba(94, 116, 144, 0.08);
573
- --border-default: rgba(94, 116, 144, 0.15);
574
- --border-hover: rgba(94, 116, 144, 0.25);
575
- --border-accent: rgba(14, 165, 233, 0.15);
576
- --border-accent-hover: rgba(14, 165, 233, 0.35);
577
-
578
- --btn-primary-bg: #0ea5e9;
579
- --btn-primary-hover: #38bdf8;
580
- --btn-cta-bg: #0ea5e9;
581
- --btn-cta-text: #FFFFFF;
582
-
583
- --code-keyword: #38bdf8;
584
- --code-string: #34d399;
585
- --code-function: #7dd3fc;
586
- --code-number: #fbbf24;
587
- --code-success: #10b981;
588
- --code-comment: #5e7490;
589
- --code-error: #ef4444;
590
-
591
- --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.03);
592
- --shadow-dropdown: 0 8px 32px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.05);
593
- --shadow-glow: 0 0 32px rgba(14, 165, 233, 0.18);
594
- --shadow-accent: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(14, 165, 233, 0.2);
595
-
596
- --tangle-gradient: linear-gradient(135deg, #0ea5e9, #38bdf8);
597
- --tangle-gradient-text: linear-gradient(135deg, #38bdf8, #7dd3fc);
598
- --accent-gradient-strong: linear-gradient(135deg, #0ea5e9, #38bdf8);
599
- --accent-surface-soft: rgba(14, 165, 233, 0.12);
600
- --accent-surface-strong: rgba(14, 165, 233, 0.20);
601
- --accent-text: #38bdf8;
602
-
603
- --md3-primary: #38bdf8;
604
- --md3-primary-dim: #0ea5e9;
605
- --md3-primary-container: #0284c7;
606
- --md3-on-primary: #ffffff;
607
- --md3-on-primary-container: #e0f2fe;
608
- --md3-surface: #0a1020;
609
- --md3-surface-dim: #060c14;
610
- --md3-surface-bright: #1a2540;
611
- --md3-on-surface: #e2e8f0;
612
- --md3-on-surface-variant: #94a3b8;
613
- --md3-error: #ef4444;
614
- --md3-outline: #334155;
615
- --md3-outline-variant: #1e293b;
616
- }
617
-
618
- /* ── Ember — warm amber dark theme ── */
619
- [data-sandbox-theme="ember"] {
620
- --hsl-background: 20 40% 5%;
621
- --hsl-foreground: 30 20% 93%;
622
- --hsl-card: 20 35% 11%;
623
- --hsl-card-foreground: 30 20% 93%;
624
- --hsl-popover: 20 32% 14%;
625
- --hsl-popover-foreground: 30 20% 93%;
626
- --hsl-primary: 25 90% 55%;
627
- --hsl-primary-foreground: 0 0% 100%;
628
- --hsl-secondary: 20 22% 18%;
629
- --hsl-secondary-foreground: 30 16% 90%;
630
- --hsl-muted: 18 20% 15%;
631
- --hsl-muted-foreground: 20 14% 50%;
632
- --hsl-accent: 20 25% 20%;
633
- --hsl-accent-foreground: 30 16% 92%;
634
- --hsl-destructive: 0 85% 55%;
635
- --hsl-destructive-foreground: 0 0% 100%;
636
- --hsl-border: 20 14% 20%;
637
- --hsl-input: 20 25% 14%;
638
- --hsl-ring: 25 90% 55%;
639
- --hsl-success: 160 84% 39%;
640
- --hsl-warning: 45 96% 56%;
641
- --hsl-info: 200 88% 56%;
642
-
643
- --depth-1: #140c06;
644
- --depth-2: #1e150c;
645
- --depth-3: #2a1e14;
646
- --depth-4: #36281c;
647
-
648
- --status-running: #10b981;
649
- --status-creating: #f59e0b;
650
- --status-stopped: #d97706;
651
- --status-warm: #fb923c;
652
- --status-cold: #38bdf8;
653
- --status-error: #ef4444;
654
- --status-deleted: #78716c;
655
-
656
- --glass-bg: var(--depth-2);
657
- --glass-bg-strong: var(--depth-3);
658
- --glass-border: var(--border-subtle);
659
- --glass-border-hover: var(--border-default);
660
-
661
- --surface-success-bg: #052e16;
662
- --surface-success-border: #166534;
663
- --surface-success-text: #4ade80;
664
- --surface-warning-bg: #451a03;
665
- --surface-warning-border: #92400e;
666
- --surface-warning-text: #fbbf24;
667
- --surface-danger-bg: #450a0a;
668
- --surface-danger-border: #991b1b;
669
- --surface-danger-text: #fca5a5;
670
- --surface-info-bg: #082f49;
671
- --surface-info-border: #0c4a6e;
672
- --surface-info-text: #38bdf8;
673
- --surface-teal-bg: #042f2e;
674
- --surface-teal-border: #134e4a;
675
- --surface-teal-text: #2dd4bf;
676
- --surface-violet-bg: #2e1065;
677
- --surface-violet-border: #4c1d95;
678
- --surface-violet-text: #c4b5fd;
679
- --surface-orange-bg: #431407;
680
- --surface-orange-border: #9a3412;
681
- --surface-orange-text: #fdba74;
682
- --surface-neutral-bg: var(--depth-3);
683
- --surface-neutral-border: var(--border-subtle);
684
- --surface-neutral-text: var(--text-muted);
685
-
686
- --sidebar-background: 20 40% 5%;
687
- --sidebar-foreground: 30 20% 93%;
688
- --sidebar-primary: 25 90% 55%;
689
- --sidebar-primary-foreground: 0 0% 100%;
690
- --sidebar-accent: 20 25% 20%;
691
- --sidebar-accent-foreground: 30 16% 92%;
692
- --sidebar-border: 20 14% 16%;
693
- --sidebar-ring: 25 90% 55%;
694
-
695
- --mesh-teal: rgba(245, 158, 11, 0.05);
696
- --mesh-violet: rgba(251, 146, 60, 0.04);
697
- --mesh-blue: rgba(217, 119, 6, 0.04);
698
-
699
- --bg-root: radial-gradient(ellipse 70% 50% at 20% 0%, rgba(245, 158, 11, 0.07), transparent),
700
- radial-gradient(ellipse 50% 40% at 80% 10%, rgba(251, 146, 60, 0.05), transparent),
701
- linear-gradient(180deg, var(--depth-1), #1a1008 100%);
702
- --bg-dark: var(--depth-1);
703
- --bg-card: hsl(var(--hsl-card));
704
- --bg-elevated: hsl(20 30% 16%);
705
- --bg-section: hsl(20 30% 8%);
706
- --bg-input: hsl(var(--hsl-input));
707
- --bg-hover: rgba(245, 158, 11, 0.08);
708
- --bg-selection: rgba(245, 158, 11, 0.18);
709
-
710
- --text-primary: hsl(var(--hsl-foreground));
711
- --text-secondary: hsl(30 16% 80%);
712
- --text-muted: #8c7a68;
713
- --text-dim: #5c4e3e;
714
-
715
- --brand-primary: #f59e0b;
716
- --brand-strong: #d97706;
717
- --brand-cool: #fbbf24;
718
- --brand-glow: #fcd34d;
719
- --brand-purple: #fbbf24;
720
- --brand-vibrant: #f59e0b;
721
- --brand-emerald: #10b981;
722
-
723
- --border-subtle: rgba(140, 122, 104, 0.08);
724
- --border-default: rgba(140, 122, 104, 0.15);
725
- --border-hover: rgba(140, 122, 104, 0.25);
726
- --border-accent: rgba(245, 158, 11, 0.15);
727
- --border-accent-hover: rgba(245, 158, 11, 0.35);
728
-
729
- --btn-primary-bg: #f59e0b;
730
- --btn-primary-hover: #fbbf24;
731
- --btn-cta-bg: #f59e0b;
732
- --btn-cta-text: #000000;
733
-
734
- --code-keyword: #fbbf24;
735
- --code-string: #34d399;
736
- --code-function: #fcd34d;
737
- --code-number: #fb923c;
738
- --code-success: #10b981;
739
- --code-comment: #8c7a68;
740
- --code-error: #ef4444;
741
-
742
- --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.03);
743
- --shadow-dropdown: 0 8px 32px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.05);
744
- --shadow-glow: 0 0 32px rgba(245, 158, 11, 0.15);
745
- --shadow-accent: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(245, 158, 11, 0.2);
746
-
747
- --tangle-gradient: linear-gradient(135deg, #f59e0b, #fbbf24);
748
- --tangle-gradient-text: linear-gradient(135deg, #fbbf24, #fcd34d);
749
- --accent-gradient-strong: linear-gradient(135deg, #f59e0b, #fbbf24);
750
- --accent-surface-soft: rgba(245, 158, 11, 0.12);
751
- --accent-surface-strong: rgba(245, 158, 11, 0.20);
752
- --accent-text: #fbbf24;
753
-
754
- --md3-primary: #fbbf24;
755
- --md3-primary-dim: #f59e0b;
756
- --md3-primary-container: #d97706;
757
- --md3-on-primary: #000000;
758
- --md3-on-primary-container: #fef3c7;
759
- --md3-surface: #120e08;
760
- --md3-surface-dim: #0a0806;
761
- --md3-surface-bright: #2a2218;
762
- --md3-on-surface: #f5f0e8;
763
- --md3-on-surface-variant: #a8998a;
764
- --md3-error: #ef4444;
765
- --md3-outline: #4a3f34;
766
- --md3-outline-variant: #2a2218;
767
- }
768
-
769
- /* ── Forest — emerald green dark theme ── */
770
- [data-sandbox-theme="forest"] {
771
- --hsl-background: 155 35% 5%;
772
- --hsl-foreground: 150 15% 93%;
773
- --hsl-card: 155 30% 10%;
774
- --hsl-card-foreground: 150 15% 93%;
775
- --hsl-popover: 155 28% 13%;
776
- --hsl-popover-foreground: 150 15% 93%;
777
- --hsl-primary: 155 80% 40%;
778
- --hsl-primary-foreground: 0 0% 100%;
779
- --hsl-secondary: 155 20% 17%;
780
- --hsl-secondary-foreground: 150 14% 90%;
781
- --hsl-muted: 152 18% 14%;
782
- --hsl-muted-foreground: 150 14% 48%;
783
- --hsl-accent: 155 22% 19%;
784
- --hsl-accent-foreground: 150 14% 92%;
785
- --hsl-destructive: 0 85% 55%;
786
- --hsl-destructive-foreground: 0 0% 100%;
787
- --hsl-border: 155 12% 19%;
788
- --hsl-input: 155 22% 13%;
789
- --hsl-ring: 155 80% 40%;
790
- --hsl-success: 155 80% 40%;
791
- --hsl-warning: 40 94% 56%;
792
- --hsl-info: 200 88% 56%;
793
-
794
- --depth-1: #060e0a;
795
- --depth-2: #0c1a14;
796
- --depth-3: #14261e;
797
- --depth-4: #1c3228;
798
-
799
- --status-running: #10b981;
800
- --status-creating: #34d399;
801
- --status-stopped: #eab308;
802
- --status-warm: #fb923c;
803
- --status-cold: #38bdf8;
804
- --status-error: #ef4444;
805
- --status-deleted: #6b7280;
806
-
807
- --glass-bg: var(--depth-2);
808
- --glass-bg-strong: var(--depth-3);
809
- --glass-border: var(--border-subtle);
810
- --glass-border-hover: var(--border-default);
811
-
812
- --surface-success-bg: #052e16;
813
- --surface-success-border: #166534;
814
- --surface-success-text: #4ade80;
815
- --surface-warning-bg: #422006;
816
- --surface-warning-border: #854d0e;
817
- --surface-warning-text: #facc15;
818
- --surface-danger-bg: #450a0a;
819
- --surface-danger-border: #991b1b;
820
- --surface-danger-text: #fca5a5;
821
- --surface-info-bg: #082f49;
822
- --surface-info-border: #0c4a6e;
823
- --surface-info-text: #38bdf8;
824
- --surface-teal-bg: #042f2e;
825
- --surface-teal-border: #134e4a;
826
- --surface-teal-text: #2dd4bf;
827
- --surface-violet-bg: #1e1b4b;
828
- --surface-violet-border: #3730a3;
829
- --surface-violet-text: #a5b4fc;
830
- --surface-orange-bg: #431407;
831
- --surface-orange-border: #7c2d12;
832
- --surface-orange-text: #fb923c;
833
- --surface-neutral-bg: var(--depth-3);
834
- --surface-neutral-border: var(--border-subtle);
835
- --surface-neutral-text: var(--text-muted);
836
-
837
- --sidebar-background: 155 35% 5%;
838
- --sidebar-foreground: 150 15% 93%;
839
- --sidebar-primary: 155 80% 40%;
408
+ --sidebar-background: 232 18% 96%;
409
+ --sidebar-foreground: 228 20% 12%;
410
+ --sidebar-primary: 239 84% 67%;
840
411
  --sidebar-primary-foreground: 0 0% 100%;
841
- --sidebar-accent: 155 22% 19%;
842
- --sidebar-accent-foreground: 150 14% 92%;
843
- --sidebar-border: 155 12% 15%;
844
- --sidebar-ring: 155 80% 40%;
845
-
846
- --mesh-teal: rgba(16, 185, 129, 0.06);
847
- --mesh-violet: rgba(52, 211, 153, 0.04);
848
- --mesh-blue: rgba(16, 185, 129, 0.04);
849
-
850
- --bg-root: radial-gradient(ellipse 70% 50% at 20% 0%, rgba(16, 185, 129, 0.08), transparent),
851
- radial-gradient(ellipse 50% 40% at 80% 10%, rgba(52, 211, 153, 0.05), transparent),
852
- linear-gradient(180deg, var(--depth-1), #0a1a12 100%);
853
- --bg-dark: var(--depth-1);
854
- --bg-card: hsl(var(--hsl-card));
855
- --bg-elevated: hsl(155 26% 16%);
856
- --bg-section: hsl(155 26% 8%);
857
- --bg-input: hsl(var(--hsl-input));
858
- --bg-hover: rgba(16, 185, 129, 0.08);
859
- --bg-selection: rgba(16, 185, 129, 0.18);
860
-
861
- --text-primary: hsl(var(--hsl-foreground));
862
- --text-secondary: hsl(150 14% 80%);
863
- --text-muted: #6b8a7a;
864
- --text-dim: #4a6858;
865
-
866
- --brand-primary: #10b981;
867
- --brand-strong: #059669;
868
- --brand-cool: #34d399;
869
- --brand-glow: #6ee7b7;
870
- --brand-purple: #34d399;
871
- --brand-vibrant: #10b981;
872
- --brand-emerald: #10b981;
873
-
874
- --border-subtle: rgba(107, 138, 122, 0.08);
875
- --border-default: rgba(107, 138, 122, 0.15);
876
- --border-hover: rgba(107, 138, 122, 0.25);
877
- --border-accent: rgba(16, 185, 129, 0.15);
878
- --border-accent-hover: rgba(16, 185, 129, 0.35);
879
-
880
- --btn-primary-bg: #10b981;
881
- --btn-primary-hover: #34d399;
882
- --btn-cta-bg: #10b981;
883
- --btn-cta-text: #000000;
884
-
885
- --code-keyword: #34d399;
886
- --code-string: #a5b4fc;
887
- --code-function: #6ee7b7;
888
- --code-number: #fbbf24;
889
- --code-success: #10b981;
890
- --code-comment: #6b8a7a;
891
- --code-error: #ef4444;
892
-
893
- --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.03);
894
- --shadow-dropdown: 0 8px 32px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.05);
895
- --shadow-glow: 0 0 32px rgba(16, 185, 129, 0.18);
896
- --shadow-accent: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(16, 185, 129, 0.2);
897
-
898
- --tangle-gradient: linear-gradient(135deg, #10b981, #34d399);
899
- --tangle-gradient-text: linear-gradient(135deg, #34d399, #6ee7b7);
900
- --accent-gradient-strong: linear-gradient(135deg, #10b981, #34d399);
901
- --accent-surface-soft: rgba(16, 185, 129, 0.12);
902
- --accent-surface-strong: rgba(16, 185, 129, 0.20);
903
- --accent-text: #34d399;
904
-
905
- --md3-primary: #34d399;
906
- --md3-primary-dim: #10b981;
907
- --md3-primary-container: #059669;
908
- --md3-on-primary: #000000;
909
- --md3-on-primary-container: #d1fae5;
910
- --md3-surface: #0a0f0c;
911
- --md3-surface-dim: #060e0a;
912
- --md3-surface-bright: #1a2a22;
913
- --md3-on-surface: #ecfdf5;
914
- --md3-on-surface-variant: #86a896;
915
- --md3-error: #ef4444;
916
- --md3-outline: #2d4a3a;
917
- --md3-outline-variant: #1a2a22;
918
- }
919
-
920
- /* ── Dawn — warm light theme ── */
921
- [data-sandbox-theme="dawn"] {
922
- --hsl-background: 30 25% 96%;
923
- --hsl-foreground: 20 25% 12%;
924
- --hsl-card: 30 20% 100%;
925
- --hsl-card-foreground: 20 25% 12%;
926
- --hsl-popover: 30 20% 100%;
927
- --hsl-popover-foreground: 20 25% 12%;
928
- --hsl-primary: 15 75% 50%;
929
- --hsl-primary-foreground: 0 0% 100%;
930
- --hsl-secondary: 25 60% 30%;
931
- --hsl-secondary-foreground: 0 0% 100%;
932
- --hsl-muted: 30 18% 93%;
933
- --hsl-muted-foreground: 20 10% 42%;
934
- --hsl-accent: 30 22% 92%;
935
- --hsl-accent-foreground: 20 25% 12%;
936
- --hsl-destructive: 0 72% 45%;
937
- --hsl-destructive-foreground: 0 0% 100%;
938
- --hsl-border: 25 18% 86%;
939
- --hsl-input: 25 18% 88%;
940
- --hsl-ring: 15 75% 50%;
941
- --hsl-success: 152 82% 34%;
942
- --hsl-warning: 41 96% 50%;
943
- --hsl-info: 212 80% 50%;
944
-
945
- --depth-1: #faf7f4;
946
- --depth-2: #f5f0eb;
947
- --depth-3: #ebe4dc;
948
- --depth-4: #ddd4ca;
949
-
950
- --status-running: #059669;
951
- --status-creating: #d97706;
952
- --status-stopped: #b45309;
953
- --status-warm: #c2410c;
954
- --status-cold: #0284c7;
955
- --status-error: #dc2626;
956
- --status-deleted: #78716c;
957
-
958
- --glass-bg: var(--depth-2);
959
- --glass-bg-strong: var(--depth-1);
960
- --glass-border: var(--border-subtle);
961
- --glass-border-hover: var(--border-default);
962
-
963
- --surface-success-bg: #f0fdf4;
964
- --surface-success-border: #bbf7d0;
965
- --surface-success-text: #15803d;
966
- --surface-warning-bg: #fffbeb;
967
- --surface-warning-border: #fde68a;
968
- --surface-warning-text: #a16207;
969
- --surface-danger-bg: #fef2f2;
970
- --surface-danger-border: #fecaca;
971
- --surface-danger-text: #b91c1c;
972
- --surface-info-bg: #eff6ff;
973
- --surface-info-border: #bfdbfe;
974
- --surface-info-text: #1d4ed8;
975
- --surface-teal-bg: #f0fdfa;
976
- --surface-teal-border: #99f6e4;
977
- --surface-teal-text: #0f766e;
978
- --surface-violet-bg: #f5f3ff;
979
- --surface-violet-border: #ddd6fe;
980
- --surface-violet-text: #6d28d9;
981
- --surface-orange-bg: #fff7ed;
982
- --surface-orange-border: #fed7aa;
983
- --surface-orange-text: #c2410c;
984
- --surface-neutral-bg: var(--depth-3);
985
- --surface-neutral-border: var(--border-subtle);
986
- --surface-neutral-text: var(--text-muted);
987
-
988
- --sidebar-background: 30 25% 96%;
989
- --sidebar-foreground: 20 25% 12%;
990
- --sidebar-primary: 15 75% 50%;
991
- --sidebar-primary-foreground: 0 0% 100%;
992
- --sidebar-accent: 30 22% 90%;
993
- --sidebar-accent-foreground: 20 25% 12%;
994
- --sidebar-border: 25 18% 86%;
995
- --sidebar-ring: 15 75% 50%;
412
+ --sidebar-accent: 240 18% 90%;
413
+ --sidebar-accent-foreground: 240 38% 30%;
414
+ --sidebar-border: 244 14% 78%;
415
+ --sidebar-ring: 239 84% 67%;
996
416
 
997
417
  --mesh-teal: rgba(5, 150, 105, 0.04);
998
- --mesh-violet: rgba(217, 119, 6, 0.03);
999
- --mesh-blue: rgba(2, 132, 199, 0.03);
418
+ --mesh-violet: rgba(99, 102, 241, 0.03);
419
+ --mesh-blue: rgba(129, 140, 248, 0.03);
1000
420
 
1001
- --bg-root: #faf7f4;
1002
- --bg-dark: #f5f0eb;
421
+ --bg-root: #f4f4f9;
422
+ --bg-dark: #edecf4;
1003
423
  --bg-card: #ffffff;
1004
- --bg-elevated: #ebe4dc;
1005
- --bg-section: #f5f0eb;
1006
- --bg-input: #f2ece5;
1007
- --bg-hover: rgba(217, 119, 6, 0.05);
1008
- --bg-selection: rgba(217, 119, 6, 0.08);
1009
-
1010
- --text-primary: #2a1f14;
1011
- --text-secondary: #4a3f34;
1012
- --text-muted: #8c7a68;
1013
- --text-dim: #b0a090;
1014
-
1015
- --brand-primary: #d97706;
1016
- --brand-strong: #b45309;
1017
- --brand-cool: #f59e0b;
1018
- --brand-glow: #fbbf24;
1019
- --brand-purple: #d97706;
1020
- --brand-vibrant: #ea580c;
424
+ --bg-elevated: #e5e4ee;
425
+ --bg-section: #edecf4;
426
+ --bg-input: #edecf4;
427
+ --bg-hover: rgba(99, 102, 241, 0.05);
428
+ --bg-selection: rgba(99, 102, 241, 0.10);
429
+
430
+ --text-primary: #191c24;
431
+ --text-secondary: #3a3a50;
432
+ --text-muted: #5E5E7A;
433
+ --text-dim: #A0A0B8;
434
+
435
+ --brand-primary: #6366F1;
436
+ --brand-strong: #2E2A5E;
437
+ --brand-strong-text: #ffffff;
438
+ --brand-strong-text-muted: rgba(255, 255, 255, 0.7);
439
+ --brand-strong-text-dim: rgba(255, 255, 255, 0.5);
440
+ --brand-cool: #818CF8;
441
+ --brand-glow: #A5AAFC;
442
+ --brand-purple: #6366F1;
443
+ --brand-vibrant: #6366F1;
1021
444
  --brand-emerald: #059669;
1022
445
 
1023
- --border-subtle: rgba(140, 122, 104, 0.08);
1024
- --border-default: rgba(140, 122, 104, 0.15);
1025
- --border-hover: rgba(140, 122, 104, 0.25);
1026
- --border-accent: rgba(217, 119, 6, 0.15);
1027
- --border-accent-hover: rgba(217, 119, 6, 0.35);
446
+ --border-subtle: rgba(110, 108, 148, 0.20);
447
+ --border-default: rgba(110, 108, 148, 0.35);
448
+ --border-hover: rgba(110, 108, 148, 0.50);
449
+ --border-accent: rgba(99, 102, 241, 0.15);
450
+ --border-accent-hover: rgba(99, 102, 241, 0.30);
1028
451
 
1029
- --btn-primary-bg: #d97706;
1030
- --btn-primary-hover: #b45309;
1031
- --btn-cta-bg: #ea580c;
452
+ --btn-primary-bg: #6366F1;
453
+ --btn-primary-hover: #4F46E5;
454
+ --btn-primary-text: #ffffff;
455
+ --btn-cta-bg: #6366F1;
1032
456
  --btn-cta-text: #ffffff;
1033
457
 
1034
- --code-keyword: #9a3412;
458
+ --code-keyword: #3E349E;
1035
459
  --code-string: #059669;
1036
- --code-function: #b45309;
1037
- --code-number: #c2410c;
460
+ --code-function: #352B88;
461
+ --code-number: #B45309;
1038
462
  --code-success: #059669;
1039
- --code-comment: #8c7a68;
1040
- --code-error: #dc2626;
1041
-
1042
- --shadow-card: 0 1px 4px rgba(42, 31, 20, 0.06), 0 0 0 1px rgba(42, 31, 20, 0.04);
1043
- --shadow-dropdown: 0 8px 32px rgba(42, 31, 20, 0.10), 0 0 0 1px rgba(42, 31, 20, 0.06);
1044
- --shadow-glow: 0 0 32px rgba(217, 119, 6, 0.10);
1045
- --shadow-accent: 0 2px 8px rgba(217, 119, 6, 0.12), 0 0 0 1px rgba(217, 119, 6, 0.08);
1046
-
1047
- --tangle-gradient: linear-gradient(135deg, #d97706, #f59e0b);
1048
- --tangle-gradient-text: linear-gradient(135deg, #b45309, #d97706);
1049
- --accent-gradient-strong: linear-gradient(135deg, #d97706, #f59e0b);
1050
- --accent-surface-soft: rgba(217, 119, 6, 0.06);
1051
- --accent-surface-strong: rgba(217, 119, 6, 0.12);
1052
- --accent-text: #b45309;
1053
-
1054
- --md3-primary: #f59e0b;
1055
- --md3-primary-dim: #d97706;
1056
- --md3-primary-container: #fef3c7;
1057
- --md3-on-primary: #ffffff;
1058
- --md3-on-primary-container: #78350f;
1059
- --md3-surface: #faf7f4;
1060
- --md3-surface-dim: #f5f0eb;
1061
- --md3-surface-bright: #ffffff;
1062
- --md3-on-surface: #2a1f14;
1063
- --md3-on-surface-variant: #78716c;
1064
- --md3-error: #dc2626;
1065
- --md3-outline: #d6d3d1;
1066
- --md3-outline-variant: #e7e5e4;
1067
-
1068
- --font-sans: "Geist", "DM Sans", ui-sans-serif, system-ui, sans-serif;
1069
- --font-display: "Outfit", "Geist", sans-serif;
463
+ --code-comment: #6B6E8A;
464
+ --code-error: #ba1a1a;
465
+
466
+ --shadow-card: 0 1px 3px rgba(25, 28, 36, 0.05), 0 0 0 1px rgba(200, 198, 218, 0.22);
467
+ --shadow-dropdown: 0 8px 32px rgba(25, 28, 36, 0.10), 0 0 0 1px rgba(200, 198, 218, 0.28);
468
+ --shadow-glow: none;
469
+ --shadow-accent: 0 1px 3px rgba(25, 28, 36, 0.05), 0 0 0 1px rgba(99, 102, 241, 0.15);
470
+
471
+ --tangle-gradient: linear-gradient(135deg, #6366F1, #818CF8);
472
+ --tangle-gradient-text: linear-gradient(135deg, #4F46E5, #6366F1);
473
+ --accent-gradient-strong: linear-gradient(135deg, #6366F1, #818CF8);
474
+ --accent-surface-soft: rgba(99, 102, 241, 0.06);
475
+ --accent-surface-strong: rgba(99, 102, 241, 0.12);
476
+ --accent-text: #4F46E5;
477
+
478
+ /* Typography — Manrope (headlines) + Inter (body/labels) */
479
+ --font-sans: "Inter", "Geist", ui-sans-serif, system-ui, sans-serif;
480
+ --font-display: "Manrope", "Inter", sans-serif;
1070
481
  --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
1071
- }
1072
-
1073
- [data-density="compact"] {
1074
- --radius-sm: 4px;
1075
- --radius-md: 6px;
1076
- --radius-lg: 8px;
1077
- --radius-xl: 12px;
1078
- --control-height: 2rem;
1079
- --panel-padding: 0.625rem;
1080
482
 
1081
- --font-size-xs: 0.625rem;
1082
- --font-size-sm: 0.6875rem;
1083
- --font-size-base: 0.8125rem;
1084
- --font-size-lg: 0.875rem;
1085
- --line-height-base: 1.6;
1086
- --avatar-size: 1.5rem;
1087
- --timeline-dot-size: 0.5rem;
1088
-
1089
- --code-padding-x: 0.625rem;
1090
- --code-padding-y: 0.5rem;
1091
- --code-font-size: 0.75rem;
1092
- --code-line-height: 1.4;
1093
- --chat-message-px: 0.75rem;
1094
- --chat-message-py: 0.375rem;
1095
- --chat-input-py: 0.5rem;
1096
- --card-padding: 1rem;
1097
- --tool-card-px: 0.625rem;
1098
- --tool-card-py: 0.375rem;
1099
- --tool-icon-size: 1.5rem;
483
+ /* Tighter border radius for enterprise precision */
484
+ --radius: 0.375rem;
485
+ --radius-sm: 2px;
486
+ --radius-md: 4px;
487
+ --radius-lg: 6px;
488
+ --radius-xl: 8px;
489
+ --radius-pill: 999px;
490
+ --radius-full: 999px;
1100
491
  }
1101
492