@neuravision/construct 1.3.1 → 2.0.1

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 +9 -9
  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 +185 -158
  27. package/tokens/tokens.js +339 -292
  28. package/tokens/tokens.json +303 -275
  29. package/tokens/tokens.ts +339 -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);
@@ -212,12 +223,13 @@
212
223
  --grid-gap-sm: 16px;
213
224
  --grid-gap-md: 24px;
214
225
  --grid-gap-lg: 32px;
226
+ --navbar-height: 56px;
215
227
  /* 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);
228
+ --shadow-xs: 0 1px 2px rgba(28, 20, 10, 0.07);
229
+ --shadow-sm: 0 2px 6px rgba(28, 20, 10, 0.09);
230
+ --shadow-md: 0 8px 20px rgba(28, 20, 10, 0.11);
231
+ --shadow-lg: 0 16px 36px rgba(28, 20, 10, 0.13);
232
+ --shadow-xl: 0 24px 56px rgba(28, 20, 10, 0.17);
221
233
  /* Motion */
222
234
  --duration-fast: 120ms;
223
235
  --duration-normal: 200ms;
@@ -241,27 +253,30 @@
241
253
  --bp-lg: 1200px;
242
254
  --bp-xl: 1536px;
243
255
  /* 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);
256
+ --color-brand-primary: var(--color-stone-950);
257
+ --color-brand-primary-hover: var(--color-stone-800);
258
+ --color-brand-primary-active: var(--color-stone-900);
259
+ --color-brand-accent: var(--color-orange-500);
260
+ --color-brand-accent-hover: var(--color-orange-600);
261
+ --color-brand-accent-active: var(--color-orange-700);
262
+ --color-brand-on-accent: var(--color-stone-950);
263
+ --color-text-primary: var(--color-stone-950);
264
+ --color-text-secondary: var(--color-stone-700);
265
+ --color-text-muted: var(--color-stone-600);
266
+ --color-text-inverse: var(--color-stone-0);
267
+ --color-text-on-primary: var(--color-stone-0);
268
+ --color-bg-canvas: var(--color-stone-50);
269
+ --color-bg-surface: var(--color-stone-100);
270
+ --color-bg-elevated: var(--color-stone-0);
271
+ --color-bg-muted: var(--color-stone-200);
272
+ --color-border-subtle: var(--color-stone-200);
273
+ --color-border-default: var(--color-stone-300);
274
+ --color-border-strong: var(--color-stone-500);
261
275
  --color-state-info: var(--color-ocean-600);
262
276
  --color-state-success: var(--color-green-500);
263
277
  --color-state-warning: var(--color-amber-400);
264
278
  --color-state-danger: var(--color-red-500);
279
+ --color-state-on-solid: var(--color-stone-0);
265
280
  --color-state-info-surface: var(--color-ocean-50);
266
281
  --color-state-success-surface: var(--color-green-50);
267
282
  --color-state-warning-surface: var(--color-amber-50);
@@ -274,8 +289,8 @@
274
289
  --color-state-success-text: var(--color-green-700);
275
290
  --color-state-warning-text: var(--color-amber-700);
276
291
  --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);
292
+ --color-overlay-scrim: rgba(22, 19, 15, 0.58);
293
+ --color-focus-ring: var(--color-orange-600);
279
294
  --color-avatar-seed-1-bg: var(--color-ocean-100);
280
295
  --color-avatar-seed-1-fg: var(--color-ocean-800);
281
296
  --color-avatar-seed-2-bg: var(--color-teal-100);
@@ -290,8 +305,8 @@
290
305
  --color-avatar-seed-6-fg: var(--color-purple-800);
291
306
  --color-avatar-seed-7-bg: var(--color-pink-100);
292
307
  --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);
308
+ --color-avatar-seed-8-bg: var(--color-stone-200);
309
+ --color-avatar-seed-8-fg: var(--color-stone-800);
295
310
  --color-chart-series-1: var(--color-ocean-600);
296
311
  --color-chart-series-2: var(--color-amber-600);
297
312
  --color-chart-series-3: var(--color-green-600);
@@ -299,7 +314,7 @@
299
314
  --color-chart-series-5: var(--color-pink-500);
300
315
  --color-chart-series-6: var(--color-teal-600);
301
316
  --color-chart-series-7: var(--color-red-500);
302
- --color-chart-series-8: var(--color-slate-600);
317
+ --color-chart-series-8: var(--color-stone-600);
303
318
  --theme-color-scheme: light;
304
319
  --font-family-heading: var(--font-family-brand);
305
320
  --font-family-body: var(--font-family-text);
@@ -315,27 +330,30 @@
315
330
 
316
331
  [data-theme="dark"] {
317
332
  /* 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);
333
+ --color-brand-primary: var(--color-stone-100);
334
+ --color-brand-primary-hover: var(--color-stone-0);
335
+ --color-brand-primary-active: var(--color-stone-200);
336
+ --color-brand-accent: var(--color-orange-400);
337
+ --color-brand-accent-hover: var(--color-orange-300);
338
+ --color-brand-accent-active: var(--color-orange-500);
339
+ --color-brand-on-accent: var(--color-stone-950);
340
+ --color-text-primary: var(--color-stone-0);
341
+ --color-text-secondary: var(--color-stone-200);
342
+ --color-text-muted: var(--color-stone-400);
343
+ --color-text-inverse: var(--color-stone-0);
344
+ --color-text-on-primary: var(--color-stone-950);
345
+ --color-bg-canvas: var(--color-stone-950);
346
+ --color-bg-surface: var(--color-stone-800);
347
+ --color-bg-elevated: var(--color-stone-700);
348
+ --color-bg-muted: var(--color-stone-900);
349
+ --color-border-subtle: var(--color-stone-700);
350
+ --color-border-default: var(--color-stone-600);
351
+ --color-border-strong: var(--color-stone-500);
335
352
  --color-state-info: var(--color-ocean-300);
336
353
  --color-state-success: var(--color-green-300);
337
354
  --color-state-warning: var(--color-amber-300);
338
355
  --color-state-danger: var(--color-red-300);
356
+ --color-state-on-solid: var(--color-stone-950);
339
357
  --color-state-info-surface: var(--color-ocean-900);
340
358
  --color-state-success-surface: var(--color-green-900);
341
359
  --color-state-warning-surface: var(--color-amber-900);
@@ -348,8 +366,8 @@
348
366
  --color-state-success-text: var(--color-green-200);
349
367
  --color-state-warning-text: var(--color-amber-200);
350
368
  --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);
369
+ --color-overlay-scrim: rgba(8, 6, 4, 0.72);
370
+ --color-focus-ring: var(--color-orange-400);
353
371
  --color-avatar-seed-1-bg: var(--color-ocean-800);
354
372
  --color-avatar-seed-1-fg: var(--color-ocean-200);
355
373
  --color-avatar-seed-2-bg: var(--color-teal-800);
@@ -364,8 +382,8 @@
364
382
  --color-avatar-seed-6-fg: var(--color-purple-200);
365
383
  --color-avatar-seed-7-bg: var(--color-pink-800);
366
384
  --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);
385
+ --color-avatar-seed-8-bg: var(--color-stone-700);
386
+ --color-avatar-seed-8-fg: var(--color-stone-200);
369
387
  --color-chart-series-1: var(--color-ocean-300);
370
388
  --color-chart-series-2: var(--color-amber-300);
371
389
  --color-chart-series-3: var(--color-green-300);
@@ -373,33 +391,36 @@
373
391
  --color-chart-series-5: var(--color-pink-300);
374
392
  --color-chart-series-6: var(--color-teal-300);
375
393
  --color-chart-series-7: var(--color-red-300);
376
- --color-chart-series-8: var(--color-slate-300);
394
+ --color-chart-series-8: var(--color-stone-300);
377
395
  --theme-color-scheme: dark;
378
396
  }
379
397
 
380
398
  [data-theme="high-contrast"] {
381
399
  /* 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);
400
+ --color-brand-primary: var(--color-stone-950);
401
+ --color-brand-primary-hover: var(--color-stone-900);
402
+ --color-brand-primary-active: var(--color-stone-800);
403
+ --color-brand-accent: var(--color-orange-700);
404
+ --color-brand-accent-hover: var(--color-orange-800);
405
+ --color-brand-accent-active: var(--color-orange-600);
406
+ --color-brand-on-accent: var(--color-stone-0);
407
+ --color-text-primary: var(--color-stone-950);
408
+ --color-text-secondary: var(--color-stone-800);
409
+ --color-text-muted: var(--color-stone-700);
410
+ --color-text-inverse: var(--color-stone-0);
411
+ --color-text-on-primary: var(--color-stone-0);
412
+ --color-bg-canvas: var(--color-stone-0);
413
+ --color-bg-surface: var(--color-stone-0);
414
+ --color-bg-elevated: var(--color-stone-0);
415
+ --color-bg-muted: var(--color-stone-50);
416
+ --color-border-subtle: var(--color-stone-400);
417
+ --color-border-default: var(--color-stone-700);
418
+ --color-border-strong: var(--color-stone-950);
399
419
  --color-state-info: var(--color-ocean-800);
400
420
  --color-state-success: var(--color-green-700);
401
421
  --color-state-warning: var(--color-amber-700);
402
422
  --color-state-danger: var(--color-red-700);
423
+ --color-state-on-solid: var(--color-stone-0);
403
424
  --color-state-info-surface: var(--color-ocean-100);
404
425
  --color-state-success-surface: var(--color-green-100);
405
426
  --color-state-warning-surface: var(--color-amber-100);
@@ -413,7 +434,7 @@
413
434
  --color-state-warning-text: var(--color-amber-800);
414
435
  --color-state-danger-text: var(--color-red-800);
415
436
  --color-overlay-scrim: rgba(14, 23, 32, 0.7);
416
- --color-focus-ring: var(--color-amber-700);
437
+ --color-focus-ring: var(--color-orange-700);
417
438
  --color-avatar-seed-1-bg: var(--color-ocean-50);
418
439
  --color-avatar-seed-1-fg: var(--color-ocean-900);
419
440
  --color-avatar-seed-2-bg: var(--color-teal-50);
@@ -428,8 +449,8 @@
428
449
  --color-avatar-seed-6-fg: var(--color-purple-900);
429
450
  --color-avatar-seed-7-bg: var(--color-pink-50);
430
451
  --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);
452
+ --color-avatar-seed-8-bg: var(--color-stone-50);
453
+ --color-avatar-seed-8-fg: var(--color-stone-950);
433
454
  --color-chart-series-1: var(--color-ocean-800);
434
455
  --color-chart-series-2: var(--color-amber-700);
435
456
  --color-chart-series-3: var(--color-green-700);
@@ -437,34 +458,37 @@
437
458
  --color-chart-series-5: var(--color-pink-700);
438
459
  --color-chart-series-6: var(--color-teal-700);
439
460
  --color-chart-series-7: var(--color-red-700);
440
- --color-chart-series-8: var(--color-slate-800);
461
+ --color-chart-series-8: var(--color-stone-800);
441
462
  --theme-color-scheme: light;
442
463
  }
443
464
 
444
465
  @media (prefers-color-scheme: dark) {
445
466
  :root:not([data-theme]) {
446
467
  /* 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);
468
+ --color-brand-primary: var(--color-stone-100);
469
+ --color-brand-primary-hover: var(--color-stone-0);
470
+ --color-brand-primary-active: var(--color-stone-200);
471
+ --color-brand-accent: var(--color-orange-400);
472
+ --color-brand-accent-hover: var(--color-orange-300);
473
+ --color-brand-accent-active: var(--color-orange-500);
474
+ --color-brand-on-accent: var(--color-stone-950);
475
+ --color-text-primary: var(--color-stone-0);
476
+ --color-text-secondary: var(--color-stone-200);
477
+ --color-text-muted: var(--color-stone-400);
478
+ --color-text-inverse: var(--color-stone-0);
479
+ --color-text-on-primary: var(--color-stone-950);
480
+ --color-bg-canvas: var(--color-stone-950);
481
+ --color-bg-surface: var(--color-stone-800);
482
+ --color-bg-elevated: var(--color-stone-700);
483
+ --color-bg-muted: var(--color-stone-900);
484
+ --color-border-subtle: var(--color-stone-700);
485
+ --color-border-default: var(--color-stone-600);
486
+ --color-border-strong: var(--color-stone-500);
464
487
  --color-state-info: var(--color-ocean-300);
465
488
  --color-state-success: var(--color-green-300);
466
489
  --color-state-warning: var(--color-amber-300);
467
490
  --color-state-danger: var(--color-red-300);
491
+ --color-state-on-solid: var(--color-stone-950);
468
492
  --color-state-info-surface: var(--color-ocean-900);
469
493
  --color-state-success-surface: var(--color-green-900);
470
494
  --color-state-warning-surface: var(--color-amber-900);
@@ -477,8 +501,8 @@
477
501
  --color-state-success-text: var(--color-green-200);
478
502
  --color-state-warning-text: var(--color-amber-200);
479
503
  --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);
504
+ --color-overlay-scrim: rgba(8, 6, 4, 0.72);
505
+ --color-focus-ring: var(--color-orange-400);
482
506
  --color-avatar-seed-1-bg: var(--color-ocean-800);
483
507
  --color-avatar-seed-1-fg: var(--color-ocean-200);
484
508
  --color-avatar-seed-2-bg: var(--color-teal-800);
@@ -493,8 +517,8 @@
493
517
  --color-avatar-seed-6-fg: var(--color-purple-200);
494
518
  --color-avatar-seed-7-bg: var(--color-pink-800);
495
519
  --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);
520
+ --color-avatar-seed-8-bg: var(--color-stone-700);
521
+ --color-avatar-seed-8-fg: var(--color-stone-200);
498
522
  --color-chart-series-1: var(--color-ocean-300);
499
523
  --color-chart-series-2: var(--color-amber-300);
500
524
  --color-chart-series-3: var(--color-green-300);
@@ -502,7 +526,7 @@
502
526
  --color-chart-series-5: var(--color-pink-300);
503
527
  --color-chart-series-6: var(--color-teal-300);
504
528
  --color-chart-series-7: var(--color-red-300);
505
- --color-chart-series-8: var(--color-slate-300);
529
+ --color-chart-series-8: var(--color-stone-300);
506
530
  --theme-color-scheme: dark;
507
531
  }
508
532
  }
@@ -510,27 +534,30 @@
510
534
  @media (prefers-contrast: more) {
511
535
  :root:not([data-theme]) {
512
536
  /* 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);
537
+ --color-brand-primary: var(--color-stone-950);
538
+ --color-brand-primary-hover: var(--color-stone-900);
539
+ --color-brand-primary-active: var(--color-stone-800);
540
+ --color-brand-accent: var(--color-orange-700);
541
+ --color-brand-accent-hover: var(--color-orange-800);
542
+ --color-brand-accent-active: var(--color-orange-600);
543
+ --color-brand-on-accent: var(--color-stone-0);
544
+ --color-text-primary: var(--color-stone-950);
545
+ --color-text-secondary: var(--color-stone-800);
546
+ --color-text-muted: var(--color-stone-700);
547
+ --color-text-inverse: var(--color-stone-0);
548
+ --color-text-on-primary: var(--color-stone-0);
549
+ --color-bg-canvas: var(--color-stone-0);
550
+ --color-bg-surface: var(--color-stone-0);
551
+ --color-bg-elevated: var(--color-stone-0);
552
+ --color-bg-muted: var(--color-stone-50);
553
+ --color-border-subtle: var(--color-stone-400);
554
+ --color-border-default: var(--color-stone-700);
555
+ --color-border-strong: var(--color-stone-950);
530
556
  --color-state-info: var(--color-ocean-800);
531
557
  --color-state-success: var(--color-green-700);
532
558
  --color-state-warning: var(--color-amber-700);
533
559
  --color-state-danger: var(--color-red-700);
560
+ --color-state-on-solid: var(--color-stone-0);
534
561
  --color-state-info-surface: var(--color-ocean-100);
535
562
  --color-state-success-surface: var(--color-green-100);
536
563
  --color-state-warning-surface: var(--color-amber-100);
@@ -544,7 +571,7 @@
544
571
  --color-state-warning-text: var(--color-amber-800);
545
572
  --color-state-danger-text: var(--color-red-800);
546
573
  --color-overlay-scrim: rgba(14, 23, 32, 0.7);
547
- --color-focus-ring: var(--color-amber-700);
574
+ --color-focus-ring: var(--color-orange-700);
548
575
  --color-avatar-seed-1-bg: var(--color-ocean-50);
549
576
  --color-avatar-seed-1-fg: var(--color-ocean-900);
550
577
  --color-avatar-seed-2-bg: var(--color-teal-50);
@@ -559,8 +586,8 @@
559
586
  --color-avatar-seed-6-fg: var(--color-purple-900);
560
587
  --color-avatar-seed-7-bg: var(--color-pink-50);
561
588
  --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);
589
+ --color-avatar-seed-8-bg: var(--color-stone-50);
590
+ --color-avatar-seed-8-fg: var(--color-stone-950);
564
591
  --color-chart-series-1: var(--color-ocean-800);
565
592
  --color-chart-series-2: var(--color-amber-700);
566
593
  --color-chart-series-3: var(--color-green-700);
@@ -568,7 +595,7 @@
568
595
  --color-chart-series-5: var(--color-pink-700);
569
596
  --color-chart-series-6: var(--color-teal-700);
570
597
  --color-chart-series-7: var(--color-red-700);
571
- --color-chart-series-8: var(--color-slate-800);
598
+ --color-chart-series-8: var(--color-stone-800);
572
599
  --theme-color-scheme: light;
573
600
  }
574
601
  }