@neuravision/construct 1.3.1 → 2.0.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 (29) hide show
  1. package/components/_shared.css +1 -1
  2. package/components/app-shell-v2.css +7 -7
  3. package/components/banner.css +3 -3
  4. package/components/button.css +3 -3
  5. package/components/card.css +1 -1
  6. package/components/checkbox.css +11 -11
  7. package/components/chip.css +13 -13
  8. package/components/combobox.css +1 -1
  9. package/components/dropdown.css +4 -4
  10. package/components/file-upload.css +1 -1
  11. package/components/list.css +4 -1
  12. package/components/navbar.css +8 -8
  13. package/components/pagination.css +3 -3
  14. package/components/progress-bar.css +1 -1
  15. package/components/select-menu.css +1 -1
  16. package/components/sidebar.css +4 -2
  17. package/components/slider.css +2 -2
  18. package/components/spinner.css +1 -1
  19. package/components/switch.css +2 -2
  20. package/components/tabs.css +1 -1
  21. package/components/toggle-group.css +2 -2
  22. package/components/tree.css +2 -2
  23. package/docs/guidelines.md +2 -2
  24. package/foundations.css +2 -2
  25. package/package.json +1 -1
  26. package/tokens/tokens.css +184 -158
  27. package/tokens/tokens.js +333 -292
  28. package/tokens/tokens.json +300 -275
  29. package/tokens/tokens.ts +333 -292
package/tokens/tokens.css CHANGED
@@ -1,28 +1,38 @@
1
1
  /* Generated by design/scripts/build-tokens.mjs. Do not edit directly. */
2
2
  :root {
3
3
  /* Color primitives */
4
- --color-slate-0: #FFFFFF;
5
- --color-slate-50: #F5F7FA;
6
- --color-slate-100: #E9EEF4;
7
- --color-slate-200: #D3DDE7;
8
- --color-slate-300: #B7C6D6;
9
- --color-slate-400: #8EA3B8;
10
- --color-slate-500: #6B8399;
11
- --color-slate-600: #4E667B;
12
- --color-slate-700: #364C5F;
13
- --color-slate-800: #263747;
14
- --color-slate-900: #172533;
15
- --color-slate-950: #0E1720;
16
- --color-ocean-50: #E9F4F7;
17
- --color-ocean-100: #CFE5EC;
18
- --color-ocean-200: #A5CBD8;
19
- --color-ocean-300: #78B1C4;
20
- --color-ocean-400: #4D97AF;
21
- --color-ocean-500: #2E7E96;
22
- --color-ocean-600: #21657A;
23
- --color-ocean-700: #174C5D;
24
- --color-ocean-800: #103745;
25
- --color-ocean-900: #0B2631;
4
+ --color-stone-0: #FFFFFF;
5
+ --color-stone-50: #FAFAF8;
6
+ --color-stone-100: #F1F0EB;
7
+ --color-stone-200: #E4E2DB;
8
+ --color-stone-300: #D3D0C7;
9
+ --color-stone-400: #B4AFA1;
10
+ --color-stone-500: #8E887A;
11
+ --color-stone-600: #66604E;
12
+ --color-stone-700: #4B473E;
13
+ --color-stone-800: #353128;
14
+ --color-stone-900: #211E18;
15
+ --color-stone-950: #16130F;
16
+ --color-orange-50: #FFF1EA;
17
+ --color-orange-100: #FFDFCE;
18
+ --color-orange-200: #FFBE9C;
19
+ --color-orange-300: #FF9462;
20
+ --color-orange-400: #FB6E2E;
21
+ --color-orange-500: #F4581C;
22
+ --color-orange-600: #DD4A0F;
23
+ --color-orange-700: #B23C0C;
24
+ --color-orange-800: #882D09;
25
+ --color-orange-900: #5C1E06;
26
+ --color-ocean-50: #EAF1FB;
27
+ --color-ocean-100: #CFE0F4;
28
+ --color-ocean-200: #A6C6EA;
29
+ --color-ocean-300: #76A6DC;
30
+ --color-ocean-400: #4584CC;
31
+ --color-ocean-500: #2A68B5;
32
+ --color-ocean-600: #1F5BA6;
33
+ --color-ocean-700: #184780;
34
+ --color-ocean-800: #123356;
35
+ --color-ocean-900: #0C2238;
26
36
  --color-teal-50: #E7F7F6;
27
37
  --color-teal-100: #C5ECEA;
28
38
  --color-teal-200: #93DAD6;
@@ -33,26 +43,26 @@
33
43
  --color-teal-700: #115F5C;
34
44
  --color-teal-800: #0D4744;
35
45
  --color-teal-900: #0A3533;
36
- --color-amber-50: #FFF6E5;
37
- --color-amber-100: #FFE8BF;
38
- --color-amber-200: #FFD180;
39
- --color-amber-300: #FFB74D;
40
- --color-amber-400: #FF9E1A;
41
- --color-amber-500: #E88300;
42
- --color-amber-600: #B86600;
43
- --color-amber-700: #8A4D00;
44
- --color-amber-800: #5E3500;
45
- --color-amber-900: #3D2300;
46
- --color-red-50: #FDECEC;
47
- --color-red-100: #F8CACA;
48
- --color-red-200: #F3A3A3;
49
- --color-red-300: #EB7575;
50
- --color-red-400: #DE4A4A;
51
- --color-red-500: #C93535;
52
- --color-red-600: #A22828;
53
- --color-red-700: #7C1F1F;
54
- --color-red-800: #561717;
55
- --color-red-900: #361010;
46
+ --color-amber-50: #FBF3D6;
47
+ --color-amber-100: #F6E3A6;
48
+ --color-amber-200: #EDC85F;
49
+ --color-amber-300: #DFAB1F;
50
+ --color-amber-400: #C8930A;
51
+ --color-amber-500: #A87A00;
52
+ --color-amber-600: #876200;
53
+ --color-amber-700: #694B00;
54
+ --color-amber-800: #4B3500;
55
+ --color-amber-900: #2F2100;
56
+ --color-red-50: #FCE9ED;
57
+ --color-red-100: #F7C6CF;
58
+ --color-red-200: #EF98A8;
59
+ --color-red-300: #E4647C;
60
+ --color-red-400: #D43B57;
61
+ --color-red-500: #BE1F3D;
62
+ --color-red-600: #9C1631;
63
+ --color-red-700: #771025;
64
+ --color-red-800: #530B19;
65
+ --color-red-900: #330610;
56
66
  --color-green-50: #E8F6EF;
57
67
  --color-green-100: #C7EAD9;
58
68
  --color-green-200: #9EDCC0;
@@ -84,13 +94,14 @@
84
94
  --color-pink-800: #461020;
85
95
  --color-pink-900: #29080F;
86
96
  /* Typography */
87
- --font-family-brand: "Sora", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
88
- --font-family-text: "Source Sans 3", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
97
+ --font-family-brand: "Manrope", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
98
+ --font-family-text: "Manrope", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
89
99
  --font-family-mono: "JetBrains Mono", "SFMono-Regular", Menlo, monospace;
90
100
  --font-weight-regular: 400;
91
101
  --font-weight-medium: 500;
92
102
  --font-weight-semibold: 600;
93
103
  --font-weight-bold: 700;
104
+ --font-weight-extrabold: 800;
94
105
  --font-size-xs: 12px;
95
106
  --font-size-sm: 14px;
96
107
  --font-size-md: 16px;
@@ -118,7 +129,7 @@
118
129
  --type-display-font-family: var(--font-family-heading);
119
130
  --type-display-font-size: var(--font-size-6xl);
120
131
  --type-display-line-height: var(--line-height-6xl);
121
- --type-display-font-weight: var(--font-weight-bold);
132
+ --type-display-font-weight: var(--font-weight-extrabold);
122
133
  --type-display-letter-spacing: var(--letter-spacing-tight);
123
134
  --type-h1-font-family: var(--font-family-heading);
124
135
  --type-h1-font-size: var(--font-size-5xl);
@@ -213,11 +224,11 @@
213
224
  --grid-gap-md: 24px;
214
225
  --grid-gap-lg: 32px;
215
226
  /* Shadows */
216
- --shadow-xs: 0 1px 2px rgba(10, 25, 41, 0.08);
217
- --shadow-sm: 0 2px 6px rgba(10, 25, 41, 0.10);
218
- --shadow-md: 0 8px 20px rgba(10, 25, 41, 0.12);
219
- --shadow-lg: 0 16px 36px rgba(10, 25, 41, 0.14);
220
- --shadow-xl: 0 24px 56px rgba(10, 25, 41, 0.18);
227
+ --shadow-xs: 0 1px 2px rgba(28, 20, 10, 0.07);
228
+ --shadow-sm: 0 2px 6px rgba(28, 20, 10, 0.09);
229
+ --shadow-md: 0 8px 20px rgba(28, 20, 10, 0.11);
230
+ --shadow-lg: 0 16px 36px rgba(28, 20, 10, 0.13);
231
+ --shadow-xl: 0 24px 56px rgba(28, 20, 10, 0.17);
221
232
  /* Motion */
222
233
  --duration-fast: 120ms;
223
234
  --duration-normal: 200ms;
@@ -241,27 +252,30 @@
241
252
  --bp-lg: 1200px;
242
253
  --bp-xl: 1536px;
243
254
  /* Semantic (light) */
244
- --color-brand-primary: var(--color-ocean-600);
245
- --color-brand-primary-hover: var(--color-ocean-700);
246
- --color-brand-primary-active: var(--color-ocean-800);
247
- --color-brand-accent: var(--color-teal-600);
248
- --color-brand-accent-hover: var(--color-teal-700);
249
- --color-brand-accent-active: var(--color-teal-800);
250
- --color-text-primary: var(--color-slate-950);
251
- --color-text-secondary: var(--color-slate-700);
252
- --color-text-muted: var(--color-slate-600);
253
- --color-text-inverse: var(--color-slate-0);
254
- --color-bg-canvas: var(--color-slate-0);
255
- --color-bg-surface: var(--color-slate-50);
256
- --color-bg-elevated: var(--color-slate-0);
257
- --color-bg-muted: var(--color-slate-100);
258
- --color-border-subtle: var(--color-slate-200);
259
- --color-border-default: var(--color-slate-300);
260
- --color-border-strong: var(--color-slate-500);
255
+ --color-brand-primary: var(--color-stone-950);
256
+ --color-brand-primary-hover: var(--color-stone-800);
257
+ --color-brand-primary-active: var(--color-stone-900);
258
+ --color-brand-accent: var(--color-orange-500);
259
+ --color-brand-accent-hover: var(--color-orange-600);
260
+ --color-brand-accent-active: var(--color-orange-700);
261
+ --color-brand-on-accent: var(--color-stone-950);
262
+ --color-text-primary: var(--color-stone-950);
263
+ --color-text-secondary: var(--color-stone-700);
264
+ --color-text-muted: var(--color-stone-600);
265
+ --color-text-inverse: var(--color-stone-0);
266
+ --color-text-on-primary: var(--color-stone-0);
267
+ --color-bg-canvas: var(--color-stone-50);
268
+ --color-bg-surface: var(--color-stone-100);
269
+ --color-bg-elevated: var(--color-stone-0);
270
+ --color-bg-muted: var(--color-stone-200);
271
+ --color-border-subtle: var(--color-stone-200);
272
+ --color-border-default: var(--color-stone-300);
273
+ --color-border-strong: var(--color-stone-500);
261
274
  --color-state-info: var(--color-ocean-600);
262
275
  --color-state-success: var(--color-green-500);
263
276
  --color-state-warning: var(--color-amber-400);
264
277
  --color-state-danger: var(--color-red-500);
278
+ --color-state-on-solid: var(--color-stone-0);
265
279
  --color-state-info-surface: var(--color-ocean-50);
266
280
  --color-state-success-surface: var(--color-green-50);
267
281
  --color-state-warning-surface: var(--color-amber-50);
@@ -274,8 +288,8 @@
274
288
  --color-state-success-text: var(--color-green-700);
275
289
  --color-state-warning-text: var(--color-amber-700);
276
290
  --color-state-danger-text: var(--color-red-700);
277
- --color-overlay-scrim: rgba(14, 23, 32, 0.6);
278
- --color-focus-ring: var(--color-teal-600);
291
+ --color-overlay-scrim: rgba(22, 19, 15, 0.58);
292
+ --color-focus-ring: var(--color-orange-600);
279
293
  --color-avatar-seed-1-bg: var(--color-ocean-100);
280
294
  --color-avatar-seed-1-fg: var(--color-ocean-800);
281
295
  --color-avatar-seed-2-bg: var(--color-teal-100);
@@ -290,8 +304,8 @@
290
304
  --color-avatar-seed-6-fg: var(--color-purple-800);
291
305
  --color-avatar-seed-7-bg: var(--color-pink-100);
292
306
  --color-avatar-seed-7-fg: var(--color-pink-800);
293
- --color-avatar-seed-8-bg: var(--color-slate-200);
294
- --color-avatar-seed-8-fg: var(--color-slate-800);
307
+ --color-avatar-seed-8-bg: var(--color-stone-200);
308
+ --color-avatar-seed-8-fg: var(--color-stone-800);
295
309
  --color-chart-series-1: var(--color-ocean-600);
296
310
  --color-chart-series-2: var(--color-amber-600);
297
311
  --color-chart-series-3: var(--color-green-600);
@@ -299,7 +313,7 @@
299
313
  --color-chart-series-5: var(--color-pink-500);
300
314
  --color-chart-series-6: var(--color-teal-600);
301
315
  --color-chart-series-7: var(--color-red-500);
302
- --color-chart-series-8: var(--color-slate-600);
316
+ --color-chart-series-8: var(--color-stone-600);
303
317
  --theme-color-scheme: light;
304
318
  --font-family-heading: var(--font-family-brand);
305
319
  --font-family-body: var(--font-family-text);
@@ -315,27 +329,30 @@
315
329
 
316
330
  [data-theme="dark"] {
317
331
  /* Semantic (dark) */
318
- --color-brand-primary: var(--color-ocean-400);
319
- --color-brand-primary-hover: var(--color-ocean-300);
320
- --color-brand-primary-active: var(--color-ocean-500);
321
- --color-brand-accent: var(--color-teal-400);
322
- --color-brand-accent-hover: var(--color-teal-300);
323
- --color-brand-accent-active: var(--color-teal-500);
324
- --color-text-primary: var(--color-slate-0);
325
- --color-text-secondary: var(--color-slate-200);
326
- --color-text-muted: var(--color-slate-400);
327
- --color-text-inverse: var(--color-slate-0);
328
- --color-bg-canvas: var(--color-slate-950);
329
- --color-bg-surface: var(--color-slate-800);
330
- --color-bg-elevated: var(--color-slate-700);
331
- --color-bg-muted: var(--color-slate-900);
332
- --color-border-subtle: var(--color-slate-700);
333
- --color-border-default: var(--color-slate-600);
334
- --color-border-strong: var(--color-slate-500);
332
+ --color-brand-primary: var(--color-stone-100);
333
+ --color-brand-primary-hover: var(--color-stone-0);
334
+ --color-brand-primary-active: var(--color-stone-200);
335
+ --color-brand-accent: var(--color-orange-400);
336
+ --color-brand-accent-hover: var(--color-orange-300);
337
+ --color-brand-accent-active: var(--color-orange-500);
338
+ --color-brand-on-accent: var(--color-stone-950);
339
+ --color-text-primary: var(--color-stone-0);
340
+ --color-text-secondary: var(--color-stone-200);
341
+ --color-text-muted: var(--color-stone-400);
342
+ --color-text-inverse: var(--color-stone-0);
343
+ --color-text-on-primary: var(--color-stone-950);
344
+ --color-bg-canvas: var(--color-stone-950);
345
+ --color-bg-surface: var(--color-stone-800);
346
+ --color-bg-elevated: var(--color-stone-700);
347
+ --color-bg-muted: var(--color-stone-900);
348
+ --color-border-subtle: var(--color-stone-700);
349
+ --color-border-default: var(--color-stone-600);
350
+ --color-border-strong: var(--color-stone-500);
335
351
  --color-state-info: var(--color-ocean-300);
336
352
  --color-state-success: var(--color-green-300);
337
353
  --color-state-warning: var(--color-amber-300);
338
354
  --color-state-danger: var(--color-red-300);
355
+ --color-state-on-solid: var(--color-stone-950);
339
356
  --color-state-info-surface: var(--color-ocean-900);
340
357
  --color-state-success-surface: var(--color-green-900);
341
358
  --color-state-warning-surface: var(--color-amber-900);
@@ -348,8 +365,8 @@
348
365
  --color-state-success-text: var(--color-green-200);
349
366
  --color-state-warning-text: var(--color-amber-200);
350
367
  --color-state-danger-text: var(--color-red-200);
351
- --color-overlay-scrim: rgba(8, 14, 20, 0.7);
352
- --color-focus-ring: var(--color-teal-300);
368
+ --color-overlay-scrim: rgba(8, 6, 4, 0.72);
369
+ --color-focus-ring: var(--color-orange-400);
353
370
  --color-avatar-seed-1-bg: var(--color-ocean-800);
354
371
  --color-avatar-seed-1-fg: var(--color-ocean-200);
355
372
  --color-avatar-seed-2-bg: var(--color-teal-800);
@@ -364,8 +381,8 @@
364
381
  --color-avatar-seed-6-fg: var(--color-purple-200);
365
382
  --color-avatar-seed-7-bg: var(--color-pink-800);
366
383
  --color-avatar-seed-7-fg: var(--color-pink-200);
367
- --color-avatar-seed-8-bg: var(--color-slate-700);
368
- --color-avatar-seed-8-fg: var(--color-slate-200);
384
+ --color-avatar-seed-8-bg: var(--color-stone-700);
385
+ --color-avatar-seed-8-fg: var(--color-stone-200);
369
386
  --color-chart-series-1: var(--color-ocean-300);
370
387
  --color-chart-series-2: var(--color-amber-300);
371
388
  --color-chart-series-3: var(--color-green-300);
@@ -373,33 +390,36 @@
373
390
  --color-chart-series-5: var(--color-pink-300);
374
391
  --color-chart-series-6: var(--color-teal-300);
375
392
  --color-chart-series-7: var(--color-red-300);
376
- --color-chart-series-8: var(--color-slate-300);
393
+ --color-chart-series-8: var(--color-stone-300);
377
394
  --theme-color-scheme: dark;
378
395
  }
379
396
 
380
397
  [data-theme="high-contrast"] {
381
398
  /* Semantic (high-contrast) */
382
- --color-brand-primary: var(--color-ocean-800);
383
- --color-brand-primary-hover: var(--color-ocean-900);
384
- --color-brand-primary-active: var(--color-ocean-700);
385
- --color-brand-accent: var(--color-teal-700);
386
- --color-brand-accent-hover: var(--color-teal-800);
387
- --color-brand-accent-active: var(--color-teal-600);
388
- --color-text-primary: var(--color-slate-950);
389
- --color-text-secondary: var(--color-slate-800);
390
- --color-text-muted: var(--color-slate-700);
391
- --color-text-inverse: var(--color-slate-0);
392
- --color-bg-canvas: var(--color-slate-0);
393
- --color-bg-surface: var(--color-slate-0);
394
- --color-bg-elevated: var(--color-slate-0);
395
- --color-bg-muted: var(--color-slate-50);
396
- --color-border-subtle: var(--color-slate-400);
397
- --color-border-default: var(--color-slate-700);
398
- --color-border-strong: var(--color-slate-950);
399
+ --color-brand-primary: var(--color-stone-950);
400
+ --color-brand-primary-hover: var(--color-stone-900);
401
+ --color-brand-primary-active: var(--color-stone-800);
402
+ --color-brand-accent: var(--color-orange-700);
403
+ --color-brand-accent-hover: var(--color-orange-800);
404
+ --color-brand-accent-active: var(--color-orange-600);
405
+ --color-brand-on-accent: var(--color-stone-0);
406
+ --color-text-primary: var(--color-stone-950);
407
+ --color-text-secondary: var(--color-stone-800);
408
+ --color-text-muted: var(--color-stone-700);
409
+ --color-text-inverse: var(--color-stone-0);
410
+ --color-text-on-primary: var(--color-stone-0);
411
+ --color-bg-canvas: var(--color-stone-0);
412
+ --color-bg-surface: var(--color-stone-0);
413
+ --color-bg-elevated: var(--color-stone-0);
414
+ --color-bg-muted: var(--color-stone-50);
415
+ --color-border-subtle: var(--color-stone-400);
416
+ --color-border-default: var(--color-stone-700);
417
+ --color-border-strong: var(--color-stone-950);
399
418
  --color-state-info: var(--color-ocean-800);
400
419
  --color-state-success: var(--color-green-700);
401
420
  --color-state-warning: var(--color-amber-700);
402
421
  --color-state-danger: var(--color-red-700);
422
+ --color-state-on-solid: var(--color-stone-0);
403
423
  --color-state-info-surface: var(--color-ocean-100);
404
424
  --color-state-success-surface: var(--color-green-100);
405
425
  --color-state-warning-surface: var(--color-amber-100);
@@ -413,7 +433,7 @@
413
433
  --color-state-warning-text: var(--color-amber-800);
414
434
  --color-state-danger-text: var(--color-red-800);
415
435
  --color-overlay-scrim: rgba(14, 23, 32, 0.7);
416
- --color-focus-ring: var(--color-amber-700);
436
+ --color-focus-ring: var(--color-orange-700);
417
437
  --color-avatar-seed-1-bg: var(--color-ocean-50);
418
438
  --color-avatar-seed-1-fg: var(--color-ocean-900);
419
439
  --color-avatar-seed-2-bg: var(--color-teal-50);
@@ -428,8 +448,8 @@
428
448
  --color-avatar-seed-6-fg: var(--color-purple-900);
429
449
  --color-avatar-seed-7-bg: var(--color-pink-50);
430
450
  --color-avatar-seed-7-fg: var(--color-pink-900);
431
- --color-avatar-seed-8-bg: var(--color-slate-50);
432
- --color-avatar-seed-8-fg: var(--color-slate-950);
451
+ --color-avatar-seed-8-bg: var(--color-stone-50);
452
+ --color-avatar-seed-8-fg: var(--color-stone-950);
433
453
  --color-chart-series-1: var(--color-ocean-800);
434
454
  --color-chart-series-2: var(--color-amber-700);
435
455
  --color-chart-series-3: var(--color-green-700);
@@ -437,34 +457,37 @@
437
457
  --color-chart-series-5: var(--color-pink-700);
438
458
  --color-chart-series-6: var(--color-teal-700);
439
459
  --color-chart-series-7: var(--color-red-700);
440
- --color-chart-series-8: var(--color-slate-800);
460
+ --color-chart-series-8: var(--color-stone-800);
441
461
  --theme-color-scheme: light;
442
462
  }
443
463
 
444
464
  @media (prefers-color-scheme: dark) {
445
465
  :root:not([data-theme]) {
446
466
  /* Semantic (dark (system)) */
447
- --color-brand-primary: var(--color-ocean-400);
448
- --color-brand-primary-hover: var(--color-ocean-300);
449
- --color-brand-primary-active: var(--color-ocean-500);
450
- --color-brand-accent: var(--color-teal-400);
451
- --color-brand-accent-hover: var(--color-teal-300);
452
- --color-brand-accent-active: var(--color-teal-500);
453
- --color-text-primary: var(--color-slate-0);
454
- --color-text-secondary: var(--color-slate-200);
455
- --color-text-muted: var(--color-slate-400);
456
- --color-text-inverse: var(--color-slate-0);
457
- --color-bg-canvas: var(--color-slate-950);
458
- --color-bg-surface: var(--color-slate-800);
459
- --color-bg-elevated: var(--color-slate-700);
460
- --color-bg-muted: var(--color-slate-900);
461
- --color-border-subtle: var(--color-slate-700);
462
- --color-border-default: var(--color-slate-600);
463
- --color-border-strong: var(--color-slate-500);
467
+ --color-brand-primary: var(--color-stone-100);
468
+ --color-brand-primary-hover: var(--color-stone-0);
469
+ --color-brand-primary-active: var(--color-stone-200);
470
+ --color-brand-accent: var(--color-orange-400);
471
+ --color-brand-accent-hover: var(--color-orange-300);
472
+ --color-brand-accent-active: var(--color-orange-500);
473
+ --color-brand-on-accent: var(--color-stone-950);
474
+ --color-text-primary: var(--color-stone-0);
475
+ --color-text-secondary: var(--color-stone-200);
476
+ --color-text-muted: var(--color-stone-400);
477
+ --color-text-inverse: var(--color-stone-0);
478
+ --color-text-on-primary: var(--color-stone-950);
479
+ --color-bg-canvas: var(--color-stone-950);
480
+ --color-bg-surface: var(--color-stone-800);
481
+ --color-bg-elevated: var(--color-stone-700);
482
+ --color-bg-muted: var(--color-stone-900);
483
+ --color-border-subtle: var(--color-stone-700);
484
+ --color-border-default: var(--color-stone-600);
485
+ --color-border-strong: var(--color-stone-500);
464
486
  --color-state-info: var(--color-ocean-300);
465
487
  --color-state-success: var(--color-green-300);
466
488
  --color-state-warning: var(--color-amber-300);
467
489
  --color-state-danger: var(--color-red-300);
490
+ --color-state-on-solid: var(--color-stone-950);
468
491
  --color-state-info-surface: var(--color-ocean-900);
469
492
  --color-state-success-surface: var(--color-green-900);
470
493
  --color-state-warning-surface: var(--color-amber-900);
@@ -477,8 +500,8 @@
477
500
  --color-state-success-text: var(--color-green-200);
478
501
  --color-state-warning-text: var(--color-amber-200);
479
502
  --color-state-danger-text: var(--color-red-200);
480
- --color-overlay-scrim: rgba(8, 14, 20, 0.7);
481
- --color-focus-ring: var(--color-teal-300);
503
+ --color-overlay-scrim: rgba(8, 6, 4, 0.72);
504
+ --color-focus-ring: var(--color-orange-400);
482
505
  --color-avatar-seed-1-bg: var(--color-ocean-800);
483
506
  --color-avatar-seed-1-fg: var(--color-ocean-200);
484
507
  --color-avatar-seed-2-bg: var(--color-teal-800);
@@ -493,8 +516,8 @@
493
516
  --color-avatar-seed-6-fg: var(--color-purple-200);
494
517
  --color-avatar-seed-7-bg: var(--color-pink-800);
495
518
  --color-avatar-seed-7-fg: var(--color-pink-200);
496
- --color-avatar-seed-8-bg: var(--color-slate-700);
497
- --color-avatar-seed-8-fg: var(--color-slate-200);
519
+ --color-avatar-seed-8-bg: var(--color-stone-700);
520
+ --color-avatar-seed-8-fg: var(--color-stone-200);
498
521
  --color-chart-series-1: var(--color-ocean-300);
499
522
  --color-chart-series-2: var(--color-amber-300);
500
523
  --color-chart-series-3: var(--color-green-300);
@@ -502,7 +525,7 @@
502
525
  --color-chart-series-5: var(--color-pink-300);
503
526
  --color-chart-series-6: var(--color-teal-300);
504
527
  --color-chart-series-7: var(--color-red-300);
505
- --color-chart-series-8: var(--color-slate-300);
528
+ --color-chart-series-8: var(--color-stone-300);
506
529
  --theme-color-scheme: dark;
507
530
  }
508
531
  }
@@ -510,27 +533,30 @@
510
533
  @media (prefers-contrast: more) {
511
534
  :root:not([data-theme]) {
512
535
  /* Semantic (high-contrast (system)) */
513
- --color-brand-primary: var(--color-ocean-800);
514
- --color-brand-primary-hover: var(--color-ocean-900);
515
- --color-brand-primary-active: var(--color-ocean-700);
516
- --color-brand-accent: var(--color-teal-700);
517
- --color-brand-accent-hover: var(--color-teal-800);
518
- --color-brand-accent-active: var(--color-teal-600);
519
- --color-text-primary: var(--color-slate-950);
520
- --color-text-secondary: var(--color-slate-800);
521
- --color-text-muted: var(--color-slate-700);
522
- --color-text-inverse: var(--color-slate-0);
523
- --color-bg-canvas: var(--color-slate-0);
524
- --color-bg-surface: var(--color-slate-0);
525
- --color-bg-elevated: var(--color-slate-0);
526
- --color-bg-muted: var(--color-slate-50);
527
- --color-border-subtle: var(--color-slate-400);
528
- --color-border-default: var(--color-slate-700);
529
- --color-border-strong: var(--color-slate-950);
536
+ --color-brand-primary: var(--color-stone-950);
537
+ --color-brand-primary-hover: var(--color-stone-900);
538
+ --color-brand-primary-active: var(--color-stone-800);
539
+ --color-brand-accent: var(--color-orange-700);
540
+ --color-brand-accent-hover: var(--color-orange-800);
541
+ --color-brand-accent-active: var(--color-orange-600);
542
+ --color-brand-on-accent: var(--color-stone-0);
543
+ --color-text-primary: var(--color-stone-950);
544
+ --color-text-secondary: var(--color-stone-800);
545
+ --color-text-muted: var(--color-stone-700);
546
+ --color-text-inverse: var(--color-stone-0);
547
+ --color-text-on-primary: var(--color-stone-0);
548
+ --color-bg-canvas: var(--color-stone-0);
549
+ --color-bg-surface: var(--color-stone-0);
550
+ --color-bg-elevated: var(--color-stone-0);
551
+ --color-bg-muted: var(--color-stone-50);
552
+ --color-border-subtle: var(--color-stone-400);
553
+ --color-border-default: var(--color-stone-700);
554
+ --color-border-strong: var(--color-stone-950);
530
555
  --color-state-info: var(--color-ocean-800);
531
556
  --color-state-success: var(--color-green-700);
532
557
  --color-state-warning: var(--color-amber-700);
533
558
  --color-state-danger: var(--color-red-700);
559
+ --color-state-on-solid: var(--color-stone-0);
534
560
  --color-state-info-surface: var(--color-ocean-100);
535
561
  --color-state-success-surface: var(--color-green-100);
536
562
  --color-state-warning-surface: var(--color-amber-100);
@@ -544,7 +570,7 @@
544
570
  --color-state-warning-text: var(--color-amber-800);
545
571
  --color-state-danger-text: var(--color-red-800);
546
572
  --color-overlay-scrim: rgba(14, 23, 32, 0.7);
547
- --color-focus-ring: var(--color-amber-700);
573
+ --color-focus-ring: var(--color-orange-700);
548
574
  --color-avatar-seed-1-bg: var(--color-ocean-50);
549
575
  --color-avatar-seed-1-fg: var(--color-ocean-900);
550
576
  --color-avatar-seed-2-bg: var(--color-teal-50);
@@ -559,8 +585,8 @@
559
585
  --color-avatar-seed-6-fg: var(--color-purple-900);
560
586
  --color-avatar-seed-7-bg: var(--color-pink-50);
561
587
  --color-avatar-seed-7-fg: var(--color-pink-900);
562
- --color-avatar-seed-8-bg: var(--color-slate-50);
563
- --color-avatar-seed-8-fg: var(--color-slate-950);
588
+ --color-avatar-seed-8-bg: var(--color-stone-50);
589
+ --color-avatar-seed-8-fg: var(--color-stone-950);
564
590
  --color-chart-series-1: var(--color-ocean-800);
565
591
  --color-chart-series-2: var(--color-amber-700);
566
592
  --color-chart-series-3: var(--color-green-700);
@@ -568,7 +594,7 @@
568
594
  --color-chart-series-5: var(--color-pink-700);
569
595
  --color-chart-series-6: var(--color-teal-700);
570
596
  --color-chart-series-7: var(--color-red-700);
571
- --color-chart-series-8: var(--color-slate-800);
597
+ --color-chart-series-8: var(--color-stone-800);
572
598
  --theme-color-scheme: light;
573
599
  }
574
600
  }