@neuravision/construct 1.2.0 → 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 (31) 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/chart.css +369 -0
  7. package/components/checkbox.css +11 -11
  8. package/components/chip.css +13 -13
  9. package/components/combobox.css +1 -1
  10. package/components/dropdown.css +4 -4
  11. package/components/file-upload.css +1 -1
  12. package/components/index.css +1 -0
  13. package/components/list.css +4 -1
  14. package/components/navbar.css +8 -8
  15. package/components/pagination.css +3 -3
  16. package/components/progress-bar.css +1 -1
  17. package/components/select-menu.css +1 -1
  18. package/components/sidebar.css +4 -2
  19. package/components/slider.css +2 -2
  20. package/components/spinner.css +1 -1
  21. package/components/switch.css +2 -2
  22. package/components/tabs.css +1 -1
  23. package/components/toggle-group.css +2 -2
  24. package/components/tree.css +2 -2
  25. package/docs/guidelines.md +2 -2
  26. package/foundations.css +2 -2
  27. package/package.json +1 -1
  28. package/tokens/tokens.css +219 -153
  29. package/tokens/tokens.js +367 -276
  30. package/tokens/tokens.json +324 -259
  31. package/tokens/tokens.ts +367 -276
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-400);
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,16 @@
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);
309
+ --color-chart-series-1: var(--color-ocean-600);
310
+ --color-chart-series-2: var(--color-amber-600);
311
+ --color-chart-series-3: var(--color-green-600);
312
+ --color-chart-series-4: var(--color-purple-500);
313
+ --color-chart-series-5: var(--color-pink-500);
314
+ --color-chart-series-6: var(--color-teal-600);
315
+ --color-chart-series-7: var(--color-red-500);
316
+ --color-chart-series-8: var(--color-stone-600);
295
317
  --theme-color-scheme: light;
296
318
  --font-family-heading: var(--font-family-brand);
297
319
  --font-family-body: var(--font-family-text);
@@ -307,27 +329,30 @@
307
329
 
308
330
  [data-theme="dark"] {
309
331
  /* Semantic (dark) */
310
- --color-brand-primary: var(--color-ocean-400);
311
- --color-brand-primary-hover: var(--color-ocean-300);
312
- --color-brand-primary-active: var(--color-ocean-500);
313
- --color-brand-accent: var(--color-teal-400);
314
- --color-brand-accent-hover: var(--color-teal-300);
315
- --color-brand-accent-active: var(--color-teal-500);
316
- --color-text-primary: var(--color-slate-0);
317
- --color-text-secondary: var(--color-slate-200);
318
- --color-text-muted: var(--color-slate-400);
319
- --color-text-inverse: var(--color-slate-0);
320
- --color-bg-canvas: var(--color-slate-950);
321
- --color-bg-surface: var(--color-slate-800);
322
- --color-bg-elevated: var(--color-slate-700);
323
- --color-bg-muted: var(--color-slate-900);
324
- --color-border-subtle: var(--color-slate-700);
325
- --color-border-default: var(--color-slate-600);
326
- --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);
327
351
  --color-state-info: var(--color-ocean-300);
328
352
  --color-state-success: var(--color-green-300);
329
353
  --color-state-warning: var(--color-amber-300);
330
354
  --color-state-danger: var(--color-red-300);
355
+ --color-state-on-solid: var(--color-stone-950);
331
356
  --color-state-info-surface: var(--color-ocean-900);
332
357
  --color-state-success-surface: var(--color-green-900);
333
358
  --color-state-warning-surface: var(--color-amber-900);
@@ -340,8 +365,8 @@
340
365
  --color-state-success-text: var(--color-green-200);
341
366
  --color-state-warning-text: var(--color-amber-200);
342
367
  --color-state-danger-text: var(--color-red-200);
343
- --color-overlay-scrim: rgba(8, 14, 20, 0.7);
344
- --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);
345
370
  --color-avatar-seed-1-bg: var(--color-ocean-800);
346
371
  --color-avatar-seed-1-fg: var(--color-ocean-200);
347
372
  --color-avatar-seed-2-bg: var(--color-teal-800);
@@ -356,34 +381,45 @@
356
381
  --color-avatar-seed-6-fg: var(--color-purple-200);
357
382
  --color-avatar-seed-7-bg: var(--color-pink-800);
358
383
  --color-avatar-seed-7-fg: var(--color-pink-200);
359
- --color-avatar-seed-8-bg: var(--color-slate-700);
360
- --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);
386
+ --color-chart-series-1: var(--color-ocean-300);
387
+ --color-chart-series-2: var(--color-amber-300);
388
+ --color-chart-series-3: var(--color-green-300);
389
+ --color-chart-series-4: var(--color-purple-300);
390
+ --color-chart-series-5: var(--color-pink-300);
391
+ --color-chart-series-6: var(--color-teal-300);
392
+ --color-chart-series-7: var(--color-red-300);
393
+ --color-chart-series-8: var(--color-stone-300);
361
394
  --theme-color-scheme: dark;
362
395
  }
363
396
 
364
397
  [data-theme="high-contrast"] {
365
398
  /* Semantic (high-contrast) */
366
- --color-brand-primary: var(--color-ocean-800);
367
- --color-brand-primary-hover: var(--color-ocean-900);
368
- --color-brand-primary-active: var(--color-ocean-700);
369
- --color-brand-accent: var(--color-teal-700);
370
- --color-brand-accent-hover: var(--color-teal-800);
371
- --color-brand-accent-active: var(--color-teal-600);
372
- --color-text-primary: var(--color-slate-950);
373
- --color-text-secondary: var(--color-slate-800);
374
- --color-text-muted: var(--color-slate-700);
375
- --color-text-inverse: var(--color-slate-0);
376
- --color-bg-canvas: var(--color-slate-0);
377
- --color-bg-surface: var(--color-slate-0);
378
- --color-bg-elevated: var(--color-slate-0);
379
- --color-bg-muted: var(--color-slate-50);
380
- --color-border-subtle: var(--color-slate-400);
381
- --color-border-default: var(--color-slate-700);
382
- --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);
383
418
  --color-state-info: var(--color-ocean-800);
384
419
  --color-state-success: var(--color-green-700);
385
420
  --color-state-warning: var(--color-amber-700);
386
421
  --color-state-danger: var(--color-red-700);
422
+ --color-state-on-solid: var(--color-stone-0);
387
423
  --color-state-info-surface: var(--color-ocean-100);
388
424
  --color-state-success-surface: var(--color-green-100);
389
425
  --color-state-warning-surface: var(--color-amber-100);
@@ -397,7 +433,7 @@
397
433
  --color-state-warning-text: var(--color-amber-800);
398
434
  --color-state-danger-text: var(--color-red-800);
399
435
  --color-overlay-scrim: rgba(14, 23, 32, 0.7);
400
- --color-focus-ring: var(--color-amber-400);
436
+ --color-focus-ring: var(--color-orange-700);
401
437
  --color-avatar-seed-1-bg: var(--color-ocean-50);
402
438
  --color-avatar-seed-1-fg: var(--color-ocean-900);
403
439
  --color-avatar-seed-2-bg: var(--color-teal-50);
@@ -412,35 +448,46 @@
412
448
  --color-avatar-seed-6-fg: var(--color-purple-900);
413
449
  --color-avatar-seed-7-bg: var(--color-pink-50);
414
450
  --color-avatar-seed-7-fg: var(--color-pink-900);
415
- --color-avatar-seed-8-bg: var(--color-slate-50);
416
- --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);
453
+ --color-chart-series-1: var(--color-ocean-800);
454
+ --color-chart-series-2: var(--color-amber-700);
455
+ --color-chart-series-3: var(--color-green-700);
456
+ --color-chart-series-4: var(--color-purple-700);
457
+ --color-chart-series-5: var(--color-pink-700);
458
+ --color-chart-series-6: var(--color-teal-700);
459
+ --color-chart-series-7: var(--color-red-700);
460
+ --color-chart-series-8: var(--color-stone-800);
417
461
  --theme-color-scheme: light;
418
462
  }
419
463
 
420
464
  @media (prefers-color-scheme: dark) {
421
465
  :root:not([data-theme]) {
422
466
  /* Semantic (dark (system)) */
423
- --color-brand-primary: var(--color-ocean-400);
424
- --color-brand-primary-hover: var(--color-ocean-300);
425
- --color-brand-primary-active: var(--color-ocean-500);
426
- --color-brand-accent: var(--color-teal-400);
427
- --color-brand-accent-hover: var(--color-teal-300);
428
- --color-brand-accent-active: var(--color-teal-500);
429
- --color-text-primary: var(--color-slate-0);
430
- --color-text-secondary: var(--color-slate-200);
431
- --color-text-muted: var(--color-slate-400);
432
- --color-text-inverse: var(--color-slate-0);
433
- --color-bg-canvas: var(--color-slate-950);
434
- --color-bg-surface: var(--color-slate-800);
435
- --color-bg-elevated: var(--color-slate-700);
436
- --color-bg-muted: var(--color-slate-900);
437
- --color-border-subtle: var(--color-slate-700);
438
- --color-border-default: var(--color-slate-600);
439
- --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);
440
486
  --color-state-info: var(--color-ocean-300);
441
487
  --color-state-success: var(--color-green-300);
442
488
  --color-state-warning: var(--color-amber-300);
443
489
  --color-state-danger: var(--color-red-300);
490
+ --color-state-on-solid: var(--color-stone-950);
444
491
  --color-state-info-surface: var(--color-ocean-900);
445
492
  --color-state-success-surface: var(--color-green-900);
446
493
  --color-state-warning-surface: var(--color-amber-900);
@@ -453,8 +500,8 @@
453
500
  --color-state-success-text: var(--color-green-200);
454
501
  --color-state-warning-text: var(--color-amber-200);
455
502
  --color-state-danger-text: var(--color-red-200);
456
- --color-overlay-scrim: rgba(8, 14, 20, 0.7);
457
- --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);
458
505
  --color-avatar-seed-1-bg: var(--color-ocean-800);
459
506
  --color-avatar-seed-1-fg: var(--color-ocean-200);
460
507
  --color-avatar-seed-2-bg: var(--color-teal-800);
@@ -469,8 +516,16 @@
469
516
  --color-avatar-seed-6-fg: var(--color-purple-200);
470
517
  --color-avatar-seed-7-bg: var(--color-pink-800);
471
518
  --color-avatar-seed-7-fg: var(--color-pink-200);
472
- --color-avatar-seed-8-bg: var(--color-slate-700);
473
- --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);
521
+ --color-chart-series-1: var(--color-ocean-300);
522
+ --color-chart-series-2: var(--color-amber-300);
523
+ --color-chart-series-3: var(--color-green-300);
524
+ --color-chart-series-4: var(--color-purple-300);
525
+ --color-chart-series-5: var(--color-pink-300);
526
+ --color-chart-series-6: var(--color-teal-300);
527
+ --color-chart-series-7: var(--color-red-300);
528
+ --color-chart-series-8: var(--color-stone-300);
474
529
  --theme-color-scheme: dark;
475
530
  }
476
531
  }
@@ -478,27 +533,30 @@
478
533
  @media (prefers-contrast: more) {
479
534
  :root:not([data-theme]) {
480
535
  /* Semantic (high-contrast (system)) */
481
- --color-brand-primary: var(--color-ocean-800);
482
- --color-brand-primary-hover: var(--color-ocean-900);
483
- --color-brand-primary-active: var(--color-ocean-700);
484
- --color-brand-accent: var(--color-teal-700);
485
- --color-brand-accent-hover: var(--color-teal-800);
486
- --color-brand-accent-active: var(--color-teal-600);
487
- --color-text-primary: var(--color-slate-950);
488
- --color-text-secondary: var(--color-slate-800);
489
- --color-text-muted: var(--color-slate-700);
490
- --color-text-inverse: var(--color-slate-0);
491
- --color-bg-canvas: var(--color-slate-0);
492
- --color-bg-surface: var(--color-slate-0);
493
- --color-bg-elevated: var(--color-slate-0);
494
- --color-bg-muted: var(--color-slate-50);
495
- --color-border-subtle: var(--color-slate-400);
496
- --color-border-default: var(--color-slate-700);
497
- --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);
498
555
  --color-state-info: var(--color-ocean-800);
499
556
  --color-state-success: var(--color-green-700);
500
557
  --color-state-warning: var(--color-amber-700);
501
558
  --color-state-danger: var(--color-red-700);
559
+ --color-state-on-solid: var(--color-stone-0);
502
560
  --color-state-info-surface: var(--color-ocean-100);
503
561
  --color-state-success-surface: var(--color-green-100);
504
562
  --color-state-warning-surface: var(--color-amber-100);
@@ -512,7 +570,7 @@
512
570
  --color-state-warning-text: var(--color-amber-800);
513
571
  --color-state-danger-text: var(--color-red-800);
514
572
  --color-overlay-scrim: rgba(14, 23, 32, 0.7);
515
- --color-focus-ring: var(--color-amber-400);
573
+ --color-focus-ring: var(--color-orange-700);
516
574
  --color-avatar-seed-1-bg: var(--color-ocean-50);
517
575
  --color-avatar-seed-1-fg: var(--color-ocean-900);
518
576
  --color-avatar-seed-2-bg: var(--color-teal-50);
@@ -527,8 +585,16 @@
527
585
  --color-avatar-seed-6-fg: var(--color-purple-900);
528
586
  --color-avatar-seed-7-bg: var(--color-pink-50);
529
587
  --color-avatar-seed-7-fg: var(--color-pink-900);
530
- --color-avatar-seed-8-bg: var(--color-slate-50);
531
- --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);
590
+ --color-chart-series-1: var(--color-ocean-800);
591
+ --color-chart-series-2: var(--color-amber-700);
592
+ --color-chart-series-3: var(--color-green-700);
593
+ --color-chart-series-4: var(--color-purple-700);
594
+ --color-chart-series-5: var(--color-pink-700);
595
+ --color-chart-series-6: var(--color-teal-700);
596
+ --color-chart-series-7: var(--color-red-700);
597
+ --color-chart-series-8: var(--color-stone-800);
532
598
  --theme-color-scheme: light;
533
599
  }
534
600
  }