@neuravision/construct 2.1.1 → 2.1.2

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 (66) hide show
  1. package/CHANGELOG.md +46 -0
  2. package/README.md +13 -0
  3. package/behaviors/combobox.js +43 -4
  4. package/behaviors/dropdown.js +16 -2
  5. package/behaviors/index.d.ts +2 -0
  6. package/behaviors/internal/dialog-controller.js +79 -9
  7. package/behaviors/internal/dom.js +38 -7
  8. package/behaviors/internal/overlay.js +4 -4
  9. package/behaviors/internal/popup-layer.js +2 -0
  10. package/behaviors/popover.js +21 -12
  11. package/behaviors/select-menu.js +20 -2
  12. package/behaviors/tabs.js +13 -2
  13. package/behaviors/toggle-group.js +37 -5
  14. package/behaviors/tooltip.js +26 -2
  15. package/components/README.md +40 -0
  16. package/components/_shared.css +11 -0
  17. package/components/accordion.css +8 -0
  18. package/components/app-shell-v2.css +7 -0
  19. package/components/app-shell.css +7 -0
  20. package/components/banner.css +32 -1
  21. package/components/card.css +23 -9
  22. package/components/chart.css +26 -0
  23. package/components/checkbox.css +32 -0
  24. package/components/chip.css +29 -1
  25. package/components/combobox.css +21 -0
  26. package/components/datepicker.css +55 -8
  27. package/components/datum.css +84 -11
  28. package/components/dropdown.css +23 -3
  29. package/components/field.css +6 -4
  30. package/components/file-upload.css +1 -1
  31. package/components/list.css +28 -2
  32. package/components/navbar.css +14 -1
  33. package/components/pagination.css +18 -0
  34. package/components/progress-bar.css +22 -1
  35. package/components/select-menu.css +8 -0
  36. package/components/select.css +8 -0
  37. package/components/sidebar.css +15 -2
  38. package/components/skip-link.css +6 -2
  39. package/components/slider.css +5 -0
  40. package/components/switch.css +62 -2
  41. package/components/table.css +53 -4
  42. package/components/tabs.css +55 -3
  43. package/components/toast.css +10 -1
  44. package/components/toggle-group.css +16 -5
  45. package/components/toolbar.css +17 -1
  46. package/components/tree.css +30 -0
  47. package/docs/behaviors.md +26 -5
  48. package/docs/guidelines.md +30 -2
  49. package/foundations.css +6 -0
  50. package/package.json +7 -3
  51. package/schemas/components.schema.json +16 -1
  52. package/schemas/semantic.schema.json +2 -1
  53. package/schemas/theme.schema.json +1 -1
  54. package/scripts/build-tokens.mjs +87 -5
  55. package/themes/README.md +37 -0
  56. package/themes/walnut.theme.json +106 -0
  57. package/tokens/README.md +10 -2
  58. package/tokens/components.json +10 -0
  59. package/tokens/semantic.dark.json +4 -3
  60. package/tokens/semantic.high-contrast-dark.json +94 -0
  61. package/tokens/semantic.high-contrast.json +3 -2
  62. package/tokens/semantic.light.json +2 -1
  63. package/tokens/tokens.css +431 -33
  64. package/tokens/tokens.js +432 -133
  65. package/tokens/tokens.json +432 -133
  66. package/tokens/tokens.ts +432 -133
package/tokens/tokens.css CHANGED
@@ -102,28 +102,28 @@
102
102
  --font-weight-semibold: 600;
103
103
  --font-weight-bold: 700;
104
104
  --font-weight-extrabold: 800;
105
- --font-size-2xs: 10px;
106
- --font-size-xs: 12px;
107
- --font-size-sm: 14px;
108
- --font-size-md: 16px;
109
- --font-size-lg: 18px;
110
- --font-size-xl: 20px;
111
- --font-size-2xl: 24px;
112
- --font-size-3xl: 28px;
113
- --font-size-4xl: 32px;
114
- --font-size-5xl: 40px;
115
- --font-size-6xl: 48px;
116
- --line-height-2xs: 14px;
117
- --line-height-xs: 16px;
118
- --line-height-sm: 20px;
119
- --line-height-md: 24px;
120
- --line-height-lg: 28px;
121
- --line-height-xl: 32px;
122
- --line-height-2xl: 36px;
123
- --line-height-3xl: 40px;
124
- --line-height-4xl: 44px;
125
- --line-height-5xl: 52px;
126
- --line-height-6xl: 60px;
105
+ --font-size-2xs: 0.625rem;
106
+ --font-size-xs: 0.75rem;
107
+ --font-size-sm: 0.875rem;
108
+ --font-size-md: 1rem;
109
+ --font-size-lg: 1.125rem;
110
+ --font-size-xl: 1.25rem;
111
+ --font-size-2xl: 1.5rem;
112
+ --font-size-3xl: 1.75rem;
113
+ --font-size-4xl: 2rem;
114
+ --font-size-5xl: 2.5rem;
115
+ --font-size-6xl: 3rem;
116
+ --line-height-2xs: 0.875rem;
117
+ --line-height-xs: 1rem;
118
+ --line-height-sm: 1.25rem;
119
+ --line-height-md: 1.5rem;
120
+ --line-height-lg: 1.75rem;
121
+ --line-height-xl: 2rem;
122
+ --line-height-2xl: 2.25rem;
123
+ --line-height-3xl: 2.5rem;
124
+ --line-height-4xl: 2.75rem;
125
+ --line-height-5xl: 3.25rem;
126
+ --line-height-6xl: 3.75rem;
127
127
  --letter-spacing-tight: -0.3px;
128
128
  --letter-spacing-normal: 0px;
129
129
  --letter-spacing-wide: 0.3px;
@@ -261,6 +261,7 @@
261
261
  --color-brand-accent: var(--color-orange-500);
262
262
  --color-brand-accent-hover: var(--color-orange-400);
263
263
  --color-brand-accent-active: var(--color-orange-300);
264
+ --color-brand-accent-strong: var(--color-orange-600);
264
265
  --color-brand-on-accent: var(--color-stone-950);
265
266
  --color-text-primary: var(--color-stone-950);
266
267
  --color-text-secondary: var(--color-stone-700);
@@ -274,7 +275,7 @@
274
275
  --color-bg-subtle: var(--color-bg-surface);
275
276
  --color-border-subtle: var(--color-stone-200);
276
277
  --color-border-default: var(--color-stone-500);
277
- --color-border-strong: var(--color-stone-500);
278
+ --color-border-strong: var(--color-stone-600);
278
279
  --color-border-muted: var(--color-border-subtle);
279
280
  --color-state-info: var(--color-ocean-600);
280
281
  --color-state-success: var(--color-green-700);
@@ -371,6 +372,14 @@
371
372
  --component-meter-height: var(--space-3);
372
373
  --component-meter-radius: var(--radius-pill);
373
374
  --component-meter-track: var(--color-bg-muted);
375
+ --component-datum-edge-width: var(--border-thick);
376
+ --component-datum-tick-width: 24px;
377
+ --component-datum-tick-height: 3px;
378
+ --component-datum-origin-length: 48px;
379
+ --component-datum-mark-size: 18px;
380
+ --component-datum-scale-height: 9px;
381
+ --component-datum-scale-minor-step: 12px;
382
+ --component-datum-scale-major-step: 60px;
374
383
  }
375
384
 
376
385
  [data-theme="light"] {
@@ -382,6 +391,7 @@
382
391
  --color-brand-accent: var(--color-orange-500);
383
392
  --color-brand-accent-hover: var(--color-orange-400);
384
393
  --color-brand-accent-active: var(--color-orange-300);
394
+ --color-brand-accent-strong: var(--color-orange-600);
385
395
  --color-brand-on-accent: var(--color-stone-950);
386
396
  --color-text-primary: var(--color-stone-950);
387
397
  --color-text-secondary: var(--color-stone-700);
@@ -395,7 +405,7 @@
395
405
  --color-bg-subtle: var(--color-bg-surface);
396
406
  --color-border-subtle: var(--color-stone-200);
397
407
  --color-border-default: var(--color-stone-500);
398
- --color-border-strong: var(--color-stone-500);
408
+ --color-border-strong: var(--color-stone-600);
399
409
  --color-border-muted: var(--color-border-subtle);
400
410
  --color-state-info: var(--color-ocean-600);
401
411
  --color-state-success: var(--color-green-700);
@@ -537,6 +547,14 @@
537
547
  --component-meter-height: var(--space-3);
538
548
  --component-meter-radius: var(--radius-pill);
539
549
  --component-meter-track: var(--color-bg-muted);
550
+ --component-datum-edge-width: var(--border-thick);
551
+ --component-datum-tick-width: 24px;
552
+ --component-datum-tick-height: 3px;
553
+ --component-datum-origin-length: 48px;
554
+ --component-datum-mark-size: 18px;
555
+ --component-datum-scale-height: 9px;
556
+ --component-datum-scale-minor-step: 12px;
557
+ --component-datum-scale-major-step: 60px;
540
558
  }
541
559
 
542
560
  [data-theme="dark"] {
@@ -548,6 +566,7 @@
548
566
  --color-brand-accent: var(--color-orange-400);
549
567
  --color-brand-accent-hover: var(--color-orange-300);
550
568
  --color-brand-accent-active: var(--color-orange-500);
569
+ --color-brand-accent-strong: var(--color-orange-400);
551
570
  --color-brand-on-accent: var(--color-stone-950);
552
571
  --color-text-primary: var(--color-stone-0);
553
572
  --color-text-secondary: var(--color-stone-200);
@@ -559,9 +578,9 @@
559
578
  --color-bg-elevated: var(--color-stone-700);
560
579
  --color-bg-muted: var(--color-stone-900);
561
580
  --color-bg-subtle: var(--color-bg-surface);
562
- --color-border-subtle: var(--color-stone-700);
581
+ --color-border-subtle: var(--color-stone-600);
563
582
  --color-border-default: var(--color-stone-400);
564
- --color-border-strong: var(--color-stone-500);
583
+ --color-border-strong: var(--color-stone-300);
565
584
  --color-border-muted: var(--color-border-subtle);
566
585
  --color-state-info: var(--color-ocean-300);
567
586
  --color-state-success: var(--color-green-300);
@@ -579,7 +598,7 @@
579
598
  --color-state-info-text: var(--color-ocean-200);
580
599
  --color-state-success-text: var(--color-green-200);
581
600
  --color-state-warning-text: var(--color-amber-200);
582
- --color-state-danger-text: var(--color-red-200);
601
+ --color-state-danger-text: var(--color-red-100);
583
602
  --color-overlay-scrim: rgba(8, 6, 4, 0.72);
584
603
  --color-focus-ring: var(--color-orange-400);
585
604
  --color-avatar-seed-1-bg: var(--color-ocean-800);
@@ -703,6 +722,14 @@
703
722
  --component-meter-height: var(--space-3);
704
723
  --component-meter-radius: var(--radius-pill);
705
724
  --component-meter-track: var(--color-bg-muted);
725
+ --component-datum-edge-width: var(--border-thick);
726
+ --component-datum-tick-width: 24px;
727
+ --component-datum-tick-height: 3px;
728
+ --component-datum-origin-length: 48px;
729
+ --component-datum-mark-size: 18px;
730
+ --component-datum-scale-height: 9px;
731
+ --component-datum-scale-minor-step: 12px;
732
+ --component-datum-scale-major-step: 60px;
706
733
  }
707
734
 
708
735
  [data-theme="high-contrast"] {
@@ -714,6 +741,7 @@
714
741
  --color-brand-accent: var(--color-orange-700);
715
742
  --color-brand-accent-hover: var(--color-orange-800);
716
743
  --color-brand-accent-active: var(--color-orange-900);
744
+ --color-brand-accent-strong: var(--color-orange-800);
717
745
  --color-brand-on-accent: var(--color-stone-0);
718
746
  --color-text-primary: var(--color-stone-950);
719
747
  --color-text-secondary: var(--color-stone-800);
@@ -723,9 +751,9 @@
723
751
  --color-bg-canvas: var(--color-stone-0);
724
752
  --color-bg-surface: var(--color-stone-0);
725
753
  --color-bg-elevated: var(--color-stone-0);
726
- --color-bg-muted: var(--color-stone-50);
754
+ --color-bg-muted: var(--color-stone-200);
727
755
  --color-bg-subtle: var(--color-bg-surface);
728
- --color-border-subtle: var(--color-stone-400);
756
+ --color-border-subtle: var(--color-stone-500);
729
757
  --color-border-default: var(--color-stone-700);
730
758
  --color-border-strong: var(--color-stone-950);
731
759
  --color-border-muted: var(--color-border-subtle);
@@ -869,6 +897,189 @@
869
897
  --component-meter-height: var(--space-3);
870
898
  --component-meter-radius: var(--radius-pill);
871
899
  --component-meter-track: var(--color-bg-muted);
900
+ --component-datum-edge-width: var(--border-thick);
901
+ --component-datum-tick-width: 24px;
902
+ --component-datum-tick-height: 3px;
903
+ --component-datum-origin-length: 48px;
904
+ --component-datum-mark-size: 18px;
905
+ --component-datum-scale-height: 9px;
906
+ --component-datum-scale-minor-step: 12px;
907
+ --component-datum-scale-major-step: 60px;
908
+ }
909
+
910
+ [data-theme="high-contrast-dark"] {
911
+ color-scheme: var(--theme-color-scheme);
912
+ /* Semantic (high-contrast-dark) */
913
+ --color-brand-primary: var(--color-stone-0);
914
+ --color-brand-primary-hover: var(--color-stone-100);
915
+ --color-brand-primary-active: var(--color-stone-200);
916
+ --color-brand-accent: var(--color-orange-300);
917
+ --color-brand-accent-hover: var(--color-orange-200);
918
+ --color-brand-accent-active: var(--color-orange-400);
919
+ --color-brand-accent-strong: var(--color-orange-300);
920
+ --color-brand-on-accent: var(--color-stone-950);
921
+ --color-text-primary: var(--color-stone-0);
922
+ --color-text-secondary: var(--color-stone-100);
923
+ --color-text-muted: var(--color-stone-200);
924
+ --color-text-inverse: var(--color-stone-950);
925
+ --color-text-on-primary: var(--color-stone-950);
926
+ --color-bg-canvas: var(--color-stone-950);
927
+ --color-bg-surface: var(--color-stone-950);
928
+ --color-bg-elevated: var(--color-stone-900);
929
+ --color-bg-muted: var(--color-stone-800);
930
+ --color-bg-subtle: var(--color-bg-surface);
931
+ --color-border-subtle: var(--color-stone-500);
932
+ --color-border-default: var(--color-stone-300);
933
+ --color-border-strong: var(--color-stone-0);
934
+ --color-border-muted: var(--color-border-subtle);
935
+ --color-state-info: var(--color-ocean-200);
936
+ --color-state-success: var(--color-green-200);
937
+ --color-state-warning: var(--color-amber-200);
938
+ --color-state-danger: var(--color-red-200);
939
+ --color-state-on-solid: var(--color-stone-950);
940
+ --color-state-info-surface: var(--color-ocean-900);
941
+ --color-state-success-surface: var(--color-green-900);
942
+ --color-state-warning-surface: var(--color-amber-900);
943
+ --color-state-danger-surface: var(--color-red-900);
944
+ --color-state-info-border: var(--color-ocean-300);
945
+ --color-state-success-border: var(--color-green-300);
946
+ --color-state-warning-border: var(--color-amber-300);
947
+ --color-state-danger-border: var(--color-red-300);
948
+ --color-state-info-text: var(--color-ocean-100);
949
+ --color-state-success-text: var(--color-green-100);
950
+ --color-state-warning-text: var(--color-amber-100);
951
+ --color-state-danger-text: var(--color-red-100);
952
+ --color-overlay-scrim: rgba(0, 0, 0, 0.82);
953
+ --color-focus-ring: var(--color-orange-300);
954
+ --color-avatar-seed-1-bg: var(--color-ocean-900);
955
+ --color-avatar-seed-1-fg: var(--color-ocean-100);
956
+ --color-avatar-seed-2-bg: var(--color-teal-900);
957
+ --color-avatar-seed-2-fg: var(--color-teal-100);
958
+ --color-avatar-seed-3-bg: var(--color-amber-900);
959
+ --color-avatar-seed-3-fg: var(--color-amber-100);
960
+ --color-avatar-seed-4-bg: var(--color-red-900);
961
+ --color-avatar-seed-4-fg: var(--color-red-100);
962
+ --color-avatar-seed-5-bg: var(--color-green-900);
963
+ --color-avatar-seed-5-fg: var(--color-green-100);
964
+ --color-avatar-seed-6-bg: var(--color-purple-900);
965
+ --color-avatar-seed-6-fg: var(--color-purple-100);
966
+ --color-avatar-seed-7-bg: var(--color-pink-900);
967
+ --color-avatar-seed-7-fg: var(--color-pink-100);
968
+ --color-avatar-seed-8-bg: var(--color-stone-800);
969
+ --color-avatar-seed-8-fg: var(--color-stone-100);
970
+ --color-chart-series-1: var(--color-ocean-200);
971
+ --color-chart-series-2: var(--color-amber-200);
972
+ --color-chart-series-3: var(--color-green-200);
973
+ --color-chart-series-4: var(--color-purple-200);
974
+ --color-chart-series-5: var(--color-pink-200);
975
+ --color-chart-series-6: var(--color-teal-200);
976
+ --color-chart-series-7: var(--color-red-200);
977
+ --color-chart-series-8: var(--color-stone-200);
978
+ --theme-color-scheme: dark;
979
+ --font-family-heading: var(--font-family-brand);
980
+ --font-family-body: var(--font-family-text);
981
+ --font-family-code: var(--font-family-mono);
982
+ --type-display-font-family: var(--font-family-heading);
983
+ --type-display-font-size: var(--font-size-6xl);
984
+ --type-display-line-height: var(--line-height-6xl);
985
+ --type-display-font-weight: var(--font-weight-extrabold);
986
+ --type-display-letter-spacing: var(--letter-spacing-tight);
987
+ --type-h1-font-family: var(--font-family-heading);
988
+ --type-h1-font-size: var(--font-size-5xl);
989
+ --type-h1-line-height: var(--line-height-5xl);
990
+ --type-h1-font-weight: var(--font-weight-bold);
991
+ --type-h1-letter-spacing: var(--letter-spacing-tight);
992
+ --type-h2-font-family: var(--font-family-heading);
993
+ --type-h2-font-size: var(--font-size-4xl);
994
+ --type-h2-line-height: var(--line-height-4xl);
995
+ --type-h2-font-weight: var(--font-weight-semibold);
996
+ --type-h2-letter-spacing: var(--letter-spacing-normal);
997
+ --type-h3-font-family: var(--font-family-heading);
998
+ --type-h3-font-size: var(--font-size-3xl);
999
+ --type-h3-line-height: var(--line-height-3xl);
1000
+ --type-h3-font-weight: var(--font-weight-semibold);
1001
+ --type-h3-letter-spacing: var(--letter-spacing-normal);
1002
+ --type-h4-font-family: var(--font-family-heading);
1003
+ --type-h4-font-size: var(--font-size-2xl);
1004
+ --type-h4-line-height: var(--line-height-2xl);
1005
+ --type-h4-font-weight: var(--font-weight-semibold);
1006
+ --type-h4-letter-spacing: var(--letter-spacing-normal);
1007
+ --type-body-font-family: var(--font-family-body);
1008
+ --type-body-font-size: var(--font-size-md);
1009
+ --type-body-line-height: var(--line-height-md);
1010
+ --type-body-font-weight: var(--font-weight-regular);
1011
+ --type-body-letter-spacing: var(--letter-spacing-normal);
1012
+ --type-body-sm-font-family: var(--font-family-body);
1013
+ --type-body-sm-font-size: var(--font-size-sm);
1014
+ --type-body-sm-line-height: var(--line-height-sm);
1015
+ --type-body-sm-font-weight: var(--font-weight-regular);
1016
+ --type-body-sm-letter-spacing: var(--letter-spacing-normal);
1017
+ --type-label-font-family: var(--font-family-body);
1018
+ --type-label-font-size: var(--font-size-sm);
1019
+ --type-label-line-height: var(--line-height-sm);
1020
+ --type-label-font-weight: var(--font-weight-semibold);
1021
+ --type-label-letter-spacing: var(--letter-spacing-wide);
1022
+ --type-caption-font-family: var(--font-family-body);
1023
+ --type-caption-font-size: var(--font-size-xs);
1024
+ --type-caption-line-height: var(--line-height-xs);
1025
+ --type-caption-font-weight: var(--font-weight-regular);
1026
+ --type-caption-letter-spacing: var(--letter-spacing-normal);
1027
+ --radius-control: var(--radius-md);
1028
+ --radius-card: var(--radius-lg);
1029
+ --radius-modal: var(--radius-xl);
1030
+ --radius-pill: var(--radius-round);
1031
+ --shadow-card: var(--shadow-sm);
1032
+ --shadow-dropdown: var(--shadow-md);
1033
+ --shadow-modal: var(--shadow-lg);
1034
+ /* Component (high-contrast-dark) */
1035
+ --component-button-background: var(--color-brand-primary);
1036
+ --component-button-background-hover: var(--color-brand-primary-hover);
1037
+ --component-button-background-active: var(--color-brand-primary-active);
1038
+ --component-button-border: var(--color-brand-primary);
1039
+ --component-button-color: var(--color-text-on-primary);
1040
+ --component-button-height: var(--control-height-md);
1041
+ --component-button-padding-x: var(--space-6);
1042
+ --component-button-font-size: var(--font-size-sm);
1043
+ --component-button-line-height: var(--line-height-sm);
1044
+ --component-button-font-weight: var(--font-weight-semibold);
1045
+ --component-button-radius: var(--radius-control);
1046
+ --component-button-gap: var(--space-3);
1047
+ --component-button-loading-spinner-size: var(--icon-md);
1048
+ --component-control-background: var(--color-bg-elevated);
1049
+ --component-control-background-hover: var(--color-bg-surface);
1050
+ --component-control-background-disabled: var(--color-bg-muted);
1051
+ --component-control-border: var(--color-border-default);
1052
+ --component-control-border-hover: var(--color-border-strong);
1053
+ --component-control-border-focus: var(--color-focus-ring);
1054
+ --component-control-text: var(--color-text-primary);
1055
+ --component-control-placeholder: var(--color-text-muted);
1056
+ --component-control-radius: var(--radius-control);
1057
+ --component-card-background: var(--color-bg-elevated);
1058
+ --component-card-border: var(--color-border-subtle);
1059
+ --component-card-radius: var(--radius-card);
1060
+ --component-card-padding: var(--space-6);
1061
+ --component-card-shadow: var(--shadow-card);
1062
+ --component-card-shadow-hover: var(--shadow-dropdown);
1063
+ --component-status-gap: var(--space-2);
1064
+ --component-status-font-size: var(--font-size-sm);
1065
+ --component-status-icon-size: var(--icon-sm);
1066
+ --component-metric-background: var(--color-bg-elevated);
1067
+ --component-metric-border: var(--color-border-subtle);
1068
+ --component-metric-radius: var(--radius-card);
1069
+ --component-metric-padding: var(--space-6);
1070
+ --component-metric-value-font-size: var(--font-size-2xl);
1071
+ --component-metric-label-font-size: var(--font-size-sm);
1072
+ --component-meter-height: var(--space-3);
1073
+ --component-meter-radius: var(--radius-pill);
1074
+ --component-meter-track: var(--color-bg-muted);
1075
+ --component-datum-edge-width: var(--border-thick);
1076
+ --component-datum-tick-width: 24px;
1077
+ --component-datum-tick-height: 3px;
1078
+ --component-datum-origin-length: 48px;
1079
+ --component-datum-mark-size: 18px;
1080
+ --component-datum-scale-height: 9px;
1081
+ --component-datum-scale-minor-step: 12px;
1082
+ --component-datum-scale-major-step: 60px;
872
1083
  }
873
1084
 
874
1085
  @media (prefers-color-scheme: dark) {
@@ -880,6 +1091,7 @@
880
1091
  --color-brand-accent: var(--color-orange-400);
881
1092
  --color-brand-accent-hover: var(--color-orange-300);
882
1093
  --color-brand-accent-active: var(--color-orange-500);
1094
+ --color-brand-accent-strong: var(--color-orange-400);
883
1095
  --color-text-primary: var(--color-stone-0);
884
1096
  --color-text-secondary: var(--color-stone-200);
885
1097
  --color-text-muted: var(--color-stone-300);
@@ -888,8 +1100,9 @@
888
1100
  --color-bg-surface: var(--color-stone-800);
889
1101
  --color-bg-elevated: var(--color-stone-700);
890
1102
  --color-bg-muted: var(--color-stone-900);
891
- --color-border-subtle: var(--color-stone-700);
1103
+ --color-border-subtle: var(--color-stone-600);
892
1104
  --color-border-default: var(--color-stone-400);
1105
+ --color-border-strong: var(--color-stone-300);
893
1106
  --color-state-info: var(--color-ocean-300);
894
1107
  --color-state-success: var(--color-green-300);
895
1108
  --color-state-warning: var(--color-amber-300);
@@ -906,7 +1119,7 @@
906
1119
  --color-state-info-text: var(--color-ocean-200);
907
1120
  --color-state-success-text: var(--color-green-200);
908
1121
  --color-state-warning-text: var(--color-amber-200);
909
- --color-state-danger-text: var(--color-red-200);
1122
+ --color-state-danger-text: var(--color-red-100);
910
1123
  --color-overlay-scrim: rgba(8, 6, 4, 0.72);
911
1124
  --color-focus-ring: var(--color-orange-400);
912
1125
  --color-avatar-seed-1-bg: var(--color-ocean-800);
@@ -946,6 +1159,7 @@
946
1159
  --color-brand-accent: var(--color-orange-700);
947
1160
  --color-brand-accent-hover: var(--color-orange-800);
948
1161
  --color-brand-accent-active: var(--color-orange-900);
1162
+ --color-brand-accent-strong: var(--color-orange-800);
949
1163
  --color-brand-on-accent: var(--color-stone-0);
950
1164
  --color-text-primary: var(--color-stone-950);
951
1165
  --color-text-secondary: var(--color-stone-800);
@@ -955,9 +1169,9 @@
955
1169
  --color-bg-canvas: var(--color-stone-0);
956
1170
  --color-bg-surface: var(--color-stone-0);
957
1171
  --color-bg-elevated: var(--color-stone-0);
958
- --color-bg-muted: var(--color-stone-50);
1172
+ --color-bg-muted: var(--color-stone-200);
959
1173
  --color-bg-subtle: var(--color-bg-surface);
960
- --color-border-subtle: var(--color-stone-400);
1174
+ --color-border-subtle: var(--color-stone-500);
961
1175
  --color-border-default: var(--color-stone-700);
962
1176
  --color-border-strong: var(--color-stone-950);
963
1177
  --color-border-muted: var(--color-border-subtle);
@@ -1101,5 +1315,189 @@
1101
1315
  --component-meter-height: var(--space-3);
1102
1316
  --component-meter-radius: var(--radius-pill);
1103
1317
  --component-meter-track: var(--color-bg-muted);
1318
+ --component-datum-edge-width: var(--border-thick);
1319
+ --component-datum-tick-width: 24px;
1320
+ --component-datum-tick-height: 3px;
1321
+ --component-datum-origin-length: 48px;
1322
+ --component-datum-mark-size: 18px;
1323
+ --component-datum-scale-height: 9px;
1324
+ --component-datum-scale-minor-step: 12px;
1325
+ --component-datum-scale-major-step: 60px;
1326
+ }
1327
+ }
1328
+
1329
+ @media (prefers-contrast: more) and (prefers-color-scheme: dark) {
1330
+ :root:not([data-theme]) {
1331
+ /* Semantic (high-contrast-dark (system)) */
1332
+ --color-brand-primary: var(--color-stone-0);
1333
+ --color-brand-primary-hover: var(--color-stone-100);
1334
+ --color-brand-primary-active: var(--color-stone-200);
1335
+ --color-brand-accent: var(--color-orange-300);
1336
+ --color-brand-accent-hover: var(--color-orange-200);
1337
+ --color-brand-accent-active: var(--color-orange-400);
1338
+ --color-brand-accent-strong: var(--color-orange-300);
1339
+ --color-brand-on-accent: var(--color-stone-950);
1340
+ --color-text-primary: var(--color-stone-0);
1341
+ --color-text-secondary: var(--color-stone-100);
1342
+ --color-text-muted: var(--color-stone-200);
1343
+ --color-text-inverse: var(--color-stone-950);
1344
+ --color-text-on-primary: var(--color-stone-950);
1345
+ --color-bg-canvas: var(--color-stone-950);
1346
+ --color-bg-surface: var(--color-stone-950);
1347
+ --color-bg-elevated: var(--color-stone-900);
1348
+ --color-bg-muted: var(--color-stone-800);
1349
+ --color-bg-subtle: var(--color-bg-surface);
1350
+ --color-border-subtle: var(--color-stone-500);
1351
+ --color-border-default: var(--color-stone-300);
1352
+ --color-border-strong: var(--color-stone-0);
1353
+ --color-border-muted: var(--color-border-subtle);
1354
+ --color-state-info: var(--color-ocean-200);
1355
+ --color-state-success: var(--color-green-200);
1356
+ --color-state-warning: var(--color-amber-200);
1357
+ --color-state-danger: var(--color-red-200);
1358
+ --color-state-on-solid: var(--color-stone-950);
1359
+ --color-state-info-surface: var(--color-ocean-900);
1360
+ --color-state-success-surface: var(--color-green-900);
1361
+ --color-state-warning-surface: var(--color-amber-900);
1362
+ --color-state-danger-surface: var(--color-red-900);
1363
+ --color-state-info-border: var(--color-ocean-300);
1364
+ --color-state-success-border: var(--color-green-300);
1365
+ --color-state-warning-border: var(--color-amber-300);
1366
+ --color-state-danger-border: var(--color-red-300);
1367
+ --color-state-info-text: var(--color-ocean-100);
1368
+ --color-state-success-text: var(--color-green-100);
1369
+ --color-state-warning-text: var(--color-amber-100);
1370
+ --color-state-danger-text: var(--color-red-100);
1371
+ --color-overlay-scrim: rgba(0, 0, 0, 0.82);
1372
+ --color-focus-ring: var(--color-orange-300);
1373
+ --color-avatar-seed-1-bg: var(--color-ocean-900);
1374
+ --color-avatar-seed-1-fg: var(--color-ocean-100);
1375
+ --color-avatar-seed-2-bg: var(--color-teal-900);
1376
+ --color-avatar-seed-2-fg: var(--color-teal-100);
1377
+ --color-avatar-seed-3-bg: var(--color-amber-900);
1378
+ --color-avatar-seed-3-fg: var(--color-amber-100);
1379
+ --color-avatar-seed-4-bg: var(--color-red-900);
1380
+ --color-avatar-seed-4-fg: var(--color-red-100);
1381
+ --color-avatar-seed-5-bg: var(--color-green-900);
1382
+ --color-avatar-seed-5-fg: var(--color-green-100);
1383
+ --color-avatar-seed-6-bg: var(--color-purple-900);
1384
+ --color-avatar-seed-6-fg: var(--color-purple-100);
1385
+ --color-avatar-seed-7-bg: var(--color-pink-900);
1386
+ --color-avatar-seed-7-fg: var(--color-pink-100);
1387
+ --color-avatar-seed-8-bg: var(--color-stone-800);
1388
+ --color-avatar-seed-8-fg: var(--color-stone-100);
1389
+ --color-chart-series-1: var(--color-ocean-200);
1390
+ --color-chart-series-2: var(--color-amber-200);
1391
+ --color-chart-series-3: var(--color-green-200);
1392
+ --color-chart-series-4: var(--color-purple-200);
1393
+ --color-chart-series-5: var(--color-pink-200);
1394
+ --color-chart-series-6: var(--color-teal-200);
1395
+ --color-chart-series-7: var(--color-red-200);
1396
+ --color-chart-series-8: var(--color-stone-200);
1397
+ --theme-color-scheme: dark;
1398
+ --font-family-heading: var(--font-family-brand);
1399
+ --font-family-body: var(--font-family-text);
1400
+ --font-family-code: var(--font-family-mono);
1401
+ --type-display-font-family: var(--font-family-heading);
1402
+ --type-display-font-size: var(--font-size-6xl);
1403
+ --type-display-line-height: var(--line-height-6xl);
1404
+ --type-display-font-weight: var(--font-weight-extrabold);
1405
+ --type-display-letter-spacing: var(--letter-spacing-tight);
1406
+ --type-h1-font-family: var(--font-family-heading);
1407
+ --type-h1-font-size: var(--font-size-5xl);
1408
+ --type-h1-line-height: var(--line-height-5xl);
1409
+ --type-h1-font-weight: var(--font-weight-bold);
1410
+ --type-h1-letter-spacing: var(--letter-spacing-tight);
1411
+ --type-h2-font-family: var(--font-family-heading);
1412
+ --type-h2-font-size: var(--font-size-4xl);
1413
+ --type-h2-line-height: var(--line-height-4xl);
1414
+ --type-h2-font-weight: var(--font-weight-semibold);
1415
+ --type-h2-letter-spacing: var(--letter-spacing-normal);
1416
+ --type-h3-font-family: var(--font-family-heading);
1417
+ --type-h3-font-size: var(--font-size-3xl);
1418
+ --type-h3-line-height: var(--line-height-3xl);
1419
+ --type-h3-font-weight: var(--font-weight-semibold);
1420
+ --type-h3-letter-spacing: var(--letter-spacing-normal);
1421
+ --type-h4-font-family: var(--font-family-heading);
1422
+ --type-h4-font-size: var(--font-size-2xl);
1423
+ --type-h4-line-height: var(--line-height-2xl);
1424
+ --type-h4-font-weight: var(--font-weight-semibold);
1425
+ --type-h4-letter-spacing: var(--letter-spacing-normal);
1426
+ --type-body-font-family: var(--font-family-body);
1427
+ --type-body-font-size: var(--font-size-md);
1428
+ --type-body-line-height: var(--line-height-md);
1429
+ --type-body-font-weight: var(--font-weight-regular);
1430
+ --type-body-letter-spacing: var(--letter-spacing-normal);
1431
+ --type-body-sm-font-family: var(--font-family-body);
1432
+ --type-body-sm-font-size: var(--font-size-sm);
1433
+ --type-body-sm-line-height: var(--line-height-sm);
1434
+ --type-body-sm-font-weight: var(--font-weight-regular);
1435
+ --type-body-sm-letter-spacing: var(--letter-spacing-normal);
1436
+ --type-label-font-family: var(--font-family-body);
1437
+ --type-label-font-size: var(--font-size-sm);
1438
+ --type-label-line-height: var(--line-height-sm);
1439
+ --type-label-font-weight: var(--font-weight-semibold);
1440
+ --type-label-letter-spacing: var(--letter-spacing-wide);
1441
+ --type-caption-font-family: var(--font-family-body);
1442
+ --type-caption-font-size: var(--font-size-xs);
1443
+ --type-caption-line-height: var(--line-height-xs);
1444
+ --type-caption-font-weight: var(--font-weight-regular);
1445
+ --type-caption-letter-spacing: var(--letter-spacing-normal);
1446
+ --radius-control: var(--radius-md);
1447
+ --radius-card: var(--radius-lg);
1448
+ --radius-modal: var(--radius-xl);
1449
+ --radius-pill: var(--radius-round);
1450
+ --shadow-card: var(--shadow-sm);
1451
+ --shadow-dropdown: var(--shadow-md);
1452
+ --shadow-modal: var(--shadow-lg);
1453
+ /* Component (high-contrast-dark (system)) */
1454
+ --component-button-background: var(--color-brand-primary);
1455
+ --component-button-background-hover: var(--color-brand-primary-hover);
1456
+ --component-button-background-active: var(--color-brand-primary-active);
1457
+ --component-button-border: var(--color-brand-primary);
1458
+ --component-button-color: var(--color-text-on-primary);
1459
+ --component-button-height: var(--control-height-md);
1460
+ --component-button-padding-x: var(--space-6);
1461
+ --component-button-font-size: var(--font-size-sm);
1462
+ --component-button-line-height: var(--line-height-sm);
1463
+ --component-button-font-weight: var(--font-weight-semibold);
1464
+ --component-button-radius: var(--radius-control);
1465
+ --component-button-gap: var(--space-3);
1466
+ --component-button-loading-spinner-size: var(--icon-md);
1467
+ --component-control-background: var(--color-bg-elevated);
1468
+ --component-control-background-hover: var(--color-bg-surface);
1469
+ --component-control-background-disabled: var(--color-bg-muted);
1470
+ --component-control-border: var(--color-border-default);
1471
+ --component-control-border-hover: var(--color-border-strong);
1472
+ --component-control-border-focus: var(--color-focus-ring);
1473
+ --component-control-text: var(--color-text-primary);
1474
+ --component-control-placeholder: var(--color-text-muted);
1475
+ --component-control-radius: var(--radius-control);
1476
+ --component-card-background: var(--color-bg-elevated);
1477
+ --component-card-border: var(--color-border-subtle);
1478
+ --component-card-radius: var(--radius-card);
1479
+ --component-card-padding: var(--space-6);
1480
+ --component-card-shadow: var(--shadow-card);
1481
+ --component-card-shadow-hover: var(--shadow-dropdown);
1482
+ --component-status-gap: var(--space-2);
1483
+ --component-status-font-size: var(--font-size-sm);
1484
+ --component-status-icon-size: var(--icon-sm);
1485
+ --component-metric-background: var(--color-bg-elevated);
1486
+ --component-metric-border: var(--color-border-subtle);
1487
+ --component-metric-radius: var(--radius-card);
1488
+ --component-metric-padding: var(--space-6);
1489
+ --component-metric-value-font-size: var(--font-size-2xl);
1490
+ --component-metric-label-font-size: var(--font-size-sm);
1491
+ --component-meter-height: var(--space-3);
1492
+ --component-meter-radius: var(--radius-pill);
1493
+ --component-meter-track: var(--color-bg-muted);
1494
+ --component-datum-edge-width: var(--border-thick);
1495
+ --component-datum-tick-width: 24px;
1496
+ --component-datum-tick-height: 3px;
1497
+ --component-datum-origin-length: 48px;
1498
+ --component-datum-mark-size: 18px;
1499
+ --component-datum-scale-height: 9px;
1500
+ --component-datum-scale-minor-step: 12px;
1501
+ --component-datum-scale-major-step: 60px;
1104
1502
  }
1105
1503
  }