@gtivr4/a1-design-system-react 0.1.0 → 0.2.3

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 (108) hide show
  1. package/package.json +1 -1
  2. package/src/color-scheme.css +586 -24
  3. package/src/components/accordion/Accordion.jsx +80 -0
  4. package/src/components/accordion/accordion.css +118 -0
  5. package/src/components/banner/Banner.jsx +66 -0
  6. package/src/components/banner/banner.css +205 -0
  7. package/src/components/bleed/Bleed.jsx +27 -0
  8. package/src/components/bleed/bleed.css +5 -0
  9. package/src/components/blockquote/Blockquote.jsx +40 -0
  10. package/src/components/blockquote/blockquote.css +166 -0
  11. package/src/components/breadcrumb/Breadcrumb.jsx +82 -0
  12. package/src/components/breadcrumb/breadcrumb.css +133 -0
  13. package/src/components/button/button.css +42 -12
  14. package/src/components/button-container/ButtonContainer.jsx +20 -1
  15. package/src/components/button-container/button-container.css +19 -1
  16. package/src/components/calendar/Calendar.jsx +383 -0
  17. package/src/components/calendar/calendar.css +225 -0
  18. package/src/components/card/Card.jsx +50 -12
  19. package/src/components/card/card.css +178 -14
  20. package/src/components/checkbox-group/CheckboxGroup.jsx +120 -0
  21. package/src/components/checkbox-group/checkbox-group.css +304 -0
  22. package/src/components/cluster/Cluster.jsx +52 -0
  23. package/src/components/cluster/cluster.css +9 -0
  24. package/src/components/code/Code.jsx +135 -0
  25. package/src/components/code/code.css +60 -0
  26. package/src/components/data-table/DataTable.jsx +721 -0
  27. package/src/components/data-table/DataTableFilters.jsx +339 -0
  28. package/src/components/data-table/data-table-filters.css +259 -0
  29. package/src/components/data-table/data-table.css +425 -0
  30. package/src/components/dialog/Dialog.jsx +45 -2
  31. package/src/components/dialog/dialog.css +13 -4
  32. package/src/components/divider/Divider.jsx +64 -0
  33. package/src/components/divider/divider.css +170 -0
  34. package/src/components/field/CreditCardField.jsx +131 -0
  35. package/src/components/field/DateField.jsx +11 -0
  36. package/src/components/field/NumberField.jsx +11 -0
  37. package/src/components/field/PhoneField.jsx +107 -0
  38. package/src/components/field/SelectField.jsx +86 -0
  39. package/src/components/field/TextField.jsx +83 -0
  40. package/src/components/field/TextareaField.jsx +147 -0
  41. package/src/components/field/TimeField.jsx +11 -0
  42. package/src/components/field/ZipField.jsx +114 -0
  43. package/src/components/field/credit-card.css +30 -0
  44. package/src/components/field/field.css +380 -0
  45. package/src/components/field/textarea-field.css +185 -0
  46. package/src/components/field-row/FieldRow.jsx +23 -0
  47. package/src/components/field-row/field-row.css +51 -0
  48. package/src/components/fieldset/Fieldset.jsx +49 -0
  49. package/src/components/fieldset/fieldset.css +75 -0
  50. package/src/components/figure/Figure.jsx +63 -0
  51. package/src/components/figure/figure.css +97 -0
  52. package/src/components/grid/Grid.jsx +36 -2
  53. package/src/components/grid/grid.css +129 -4
  54. package/src/components/heading/Heading.jsx +41 -1
  55. package/src/components/heading/heading.css +65 -4
  56. package/src/components/icon/icon.css +1 -0
  57. package/src/components/icon-button/icon-button.css +1 -0
  58. package/src/components/inline/inline.css +51 -0
  59. package/src/components/inline-editable/InlineEditable.jsx +77 -0
  60. package/src/components/inline-editable/inline-editable.css +47 -0
  61. package/src/components/inset/Inset.jsx +27 -0
  62. package/src/components/inset/inset.css +6 -0
  63. package/src/components/labels/Labels.jsx +5 -5
  64. package/src/components/link/Link.jsx +2 -3
  65. package/src/components/link/link.css +30 -1
  66. package/src/components/list/List.jsx +92 -0
  67. package/src/components/list/list.css +178 -0
  68. package/src/components/menu/Menu.jsx +243 -10
  69. package/src/components/menu/menu.css +157 -17
  70. package/src/components/message/Message.jsx +25 -50
  71. package/src/components/message/message.css +50 -33
  72. package/src/components/notification/Notification.jsx +1 -1
  73. package/src/components/page-layout/PageLayout.jsx +16 -1
  74. package/src/components/page-layout/page-layout.css +97 -4
  75. package/src/components/page-nav/PageNav.jsx +110 -0
  76. package/src/components/page-nav/page-nav.css +167 -0
  77. package/src/components/paragraph/Paragraph.jsx +35 -2
  78. package/src/components/paragraph/paragraph.css +38 -1
  79. package/src/components/radio-group/RadioGroup.jsx +121 -0
  80. package/src/components/radio-group/radio-group.css +268 -0
  81. package/src/components/section/Section.jsx +108 -0
  82. package/src/components/section/section.css +280 -0
  83. package/src/components/segmented-control/SegmentedControl.jsx +4 -0
  84. package/src/components/segmented-control/segmented.css +13 -0
  85. package/src/components/side-nav/SideNav.jsx +29 -9
  86. package/src/components/side-nav/scrim.css +1 -1
  87. package/src/components/side-nav/side-nav.css +70 -32
  88. package/src/components/snackbar/Snackbar.jsx +56 -0
  89. package/src/components/snackbar/snackbar.css +113 -0
  90. package/src/components/spacer/Spacer.jsx +36 -0
  91. package/src/components/spacer/spacer.css +44 -0
  92. package/src/components/stack/Stack.jsx +100 -0
  93. package/src/components/stack/stack.css +37 -0
  94. package/src/components/switch/Switch.jsx +114 -0
  95. package/src/components/switch/switch.css +276 -0
  96. package/src/components/system-banner/SystemBanner.jsx +57 -0
  97. package/src/components/system-banner/system-banner.css +118 -0
  98. package/src/components/tabs/Tabs.jsx +96 -28
  99. package/src/components/tabs/tabs.css +352 -15
  100. package/src/components/token-select/TokenSelect.jsx +159 -0
  101. package/src/components/token-select/token-select.css +110 -0
  102. package/src/components/top-header/TopHeader.jsx +641 -0
  103. package/src/components/top-header/top-header.css +337 -0
  104. package/src/illustrations/ComponentThumbnails.jsx +227 -0
  105. package/src/index.js +41 -5
  106. package/src/themes.css +256 -5
  107. package/src/utilities/spacing.css +8 -0
  108. package/src/utilities/sr-only.css +16 -0
package/src/color-scheme.css CHANGED
@@ -1,19 +1,275 @@
1
1
  /* Base design system color scheme switching — not a theme.
2
2
  Edit this file directly; do not generate from system/themes/. */
3
3
 
4
+ /* ─── Global box model reset ────────────────────────────────────────────────
5
+ Declared here so the design system is self-contained: border and padding are
6
+ always included within declared sizes regardless of any host-app reset. */
7
+
8
+ *, *::before, *::after {
9
+ box-sizing: border-box;
10
+ }
11
+
12
+ /* ─── Form field interaction tokens — light mode defaults ────────────────────
13
+ Single source of truth for hover, active, and read-only states across all
14
+ form field components. Overridden in every dark-mode context below.
15
+ Components reference --a1-field-* directly; never --component-field-*. */
16
+
17
+ :root {
18
+ --a1-field-hover-background: var(--base-color-neutral-50);
19
+ --a1-field-hover-border-color: var(--base-color-neutral-600);
20
+ --a1-field-active-background: var(--base-color-neutral-100);
21
+ --a1-field-active-border-color: var(--base-color-neutral-700);
22
+ --a1-field-read-only-background: var(--base-color-info-50);
23
+ --a1-field-read-only-border-color: var(--base-color-info-200);
24
+ --a1-field-read-only-text: var(--base-color-info-1000);
25
+ }
26
+
27
+ /* ─── .a1-inverse: dark island on a light page ───────────────────────────────
28
+ Defined before the system dark-mode media query so the media query can
29
+ override it (same specificity, later source order wins).
30
+ On a light page: .a1-inverse = dark.
31
+ On a dark page (system or .a1-theme-dark): .a1-inverse = light (see below). */
32
+
33
+ .a1-inverse {
34
+ color-scheme: dark;
35
+ --semantic-color-surface-page: var(--base-color-neutral-900);
36
+ --semantic-color-surface-panel: var(--base-color-neutral-800);
37
+ --semantic-color-surface-raised: var(--base-color-neutral-700);
38
+ --semantic-color-text-default: var(--base-color-neutral-50);
39
+ --semantic-color-text-muted: var(--base-color-neutral-300);
40
+ --semantic-color-text-inverse: var(--base-color-neutral-900);
41
+ --semantic-color-surface-inverse: var(--base-color-neutral-0);
42
+ --semantic-color-text-accent: var(--base-color-accent-300);
43
+ --semantic-color-border-subtle: var(--base-color-neutral-700);
44
+ --semantic-color-border-default: var(--base-color-neutral-600);
45
+ --semantic-color-border-strong: var(--base-color-neutral-400);
46
+ --semantic-color-action-background: var(--base-color-accent-400);
47
+ --semantic-color-action-background-hover: var(--base-color-accent-300);
48
+ --semantic-color-action-background-pressed: var(--base-color-accent-500);
49
+ --semantic-color-action-foreground: var(--base-color-accent-1000);
50
+ --semantic-color-action-foreground-pressed: var(--base-color-accent-1000);
51
+ --semantic-color-action-surface: var(--base-color-accent-900);
52
+ --semantic-color-action-border: var(--base-color-accent-500);
53
+ --semantic-color-status-info-background: var(--base-color-info-400);
54
+ --semantic-color-status-info-surface: var(--base-color-info-900);
55
+ --semantic-color-status-info-border: var(--base-color-info-500);
56
+ --semantic-color-status-info-foreground: var(--base-color-info-1000);
57
+ --semantic-color-status-error-background: var(--base-color-error-400);
58
+ --semantic-color-status-error-surface: var(--base-color-error-900);
59
+ --semantic-color-status-error-border: var(--base-color-error-500);
60
+ --semantic-color-status-error-foreground: var(--base-color-neutral-900);
61
+ --semantic-color-status-warn-background: var(--base-color-warn-400);
62
+ --semantic-color-status-warn-surface: var(--base-color-warn-900);
63
+ --semantic-color-status-warn-border: var(--base-color-warn-500);
64
+ --semantic-color-status-warn-foreground: var(--base-color-neutral-900);
65
+ --semantic-color-status-warn-text: var(--base-color-warn-300);
66
+ --semantic-color-status-error-text: var(--base-color-error-300);
67
+ --semantic-color-status-success-background: var(--base-color-success-400);
68
+ --semantic-color-status-success-surface: var(--base-color-success-900);
69
+ --semantic-color-status-success-border: var(--base-color-success-500);
70
+ --semantic-color-status-success-foreground: var(--base-color-neutral-900);
71
+ --component-scrim-color: var(--component-scrim-color-dark);
72
+ --component-button-primary-background: var(--base-color-accent-200);
73
+ --component-button-primary-background-hover: var(--base-color-accent-100);
74
+ --component-button-primary-background-pressed: var(--base-color-accent-50);
75
+ --component-button-primary-foreground: var(--base-color-accent-900);
76
+ --component-button-primary-foreground-hover: var(--base-color-accent-800);
77
+ --component-button-primary-foreground-pressed: var(--base-color-accent-700);
78
+ --component-button-primary-border: var(--base-color-accent-200);
79
+ --component-button-secondary-background: var(--base-color-accent-900);
80
+ --component-button-secondary-background-hover: var(--base-color-accent-800);
81
+ --component-button-secondary-background-pressed: var(--base-color-accent-700);
82
+ --component-button-secondary-foreground: var(--base-color-accent-200);
83
+ --component-button-secondary-foreground-hover: var(--base-color-accent-100);
84
+ --component-button-secondary-foreground-pressed: var(--base-color-accent-50);
85
+ --component-button-secondary-border: var(--base-color-accent-200);
86
+ --component-button-secondary-border-hover: var(--base-color-accent-100);
87
+ --component-button-secondary-border-pressed: var(--base-color-accent-50);
88
+ --component-button-tertiary-background: var(--base-color-accent-900);
89
+ --component-button-tertiary-background-hover: var(--base-color-accent-800);
90
+ --component-button-tertiary-background-pressed: var(--base-color-accent-700);
91
+ --component-button-tertiary-foreground: var(--base-color-accent-200);
92
+ --component-button-tertiary-foreground-hover: var(--base-color-accent-100);
93
+ --component-button-tertiary-foreground-pressed: var(--base-color-accent-50);
94
+ --component-button-tertiary-border: var(--base-color-accent-900);
95
+ --component-button-tertiary-border-hover: var(--base-color-accent-800);
96
+ --component-button-tertiary-border-pressed: var(--base-color-accent-700);
97
+ --a1-field-hover-background: var(--base-color-neutral-800);
98
+ --a1-field-hover-border-color: var(--base-color-neutral-300);
99
+ --a1-field-active-background: var(--base-color-neutral-700);
100
+ --a1-field-active-border-color: var(--base-color-neutral-200);
101
+ --a1-field-read-only-background: var(--base-color-info-800);
102
+ --a1-field-read-only-border-color: var(--base-color-info-600);
103
+ --a1-field-read-only-text: var(--base-color-info-50);
104
+ }
105
+
106
+ /* ─── System dark mode (OS-level preference) ─────────────────────────────────
107
+ Activates when the OS prefers dark and no explicit class overrides it.
108
+ .a1-inverse restore comes after the standalone .a1-inverse rule above,
109
+ so it wins and correctly flips the island back to light in dark mode. */
110
+
111
+ @media (prefers-color-scheme: dark) {
112
+ :root {
113
+ color-scheme: dark;
114
+ --semantic-color-surface-page: var(--base-color-neutral-900);
115
+ --semantic-color-surface-panel: var(--base-color-neutral-800);
116
+ --semantic-color-surface-raised: var(--base-color-neutral-700);
117
+ --semantic-color-text-default: var(--base-color-neutral-50);
118
+ --semantic-color-text-muted: var(--base-color-neutral-300);
119
+ --semantic-color-text-inverse: var(--base-color-neutral-900);
120
+ --semantic-color-surface-inverse: var(--base-color-neutral-0);
121
+ --semantic-color-text-accent: var(--base-color-accent-300);
122
+ --semantic-color-border-subtle: var(--base-color-neutral-700);
123
+ --semantic-color-border-default: var(--base-color-neutral-600);
124
+ --semantic-color-border-strong: var(--base-color-neutral-400);
125
+ --semantic-color-action-background: var(--base-color-accent-400);
126
+ --semantic-color-action-background-hover: var(--base-color-accent-300);
127
+ --semantic-color-action-background-pressed: var(--base-color-accent-500);
128
+ --semantic-color-action-foreground: var(--base-color-accent-1000);
129
+ --semantic-color-action-foreground-pressed: var(--base-color-accent-1000);
130
+ --semantic-color-action-surface: var(--base-color-accent-900);
131
+ --semantic-color-action-border: var(--base-color-accent-500);
132
+ --semantic-color-status-info-background: var(--base-color-info-400);
133
+ --semantic-color-status-info-surface: var(--base-color-info-900);
134
+ --semantic-color-status-info-border: var(--base-color-info-500);
135
+ --semantic-color-status-info-foreground: var(--base-color-info-1000);
136
+ --semantic-color-status-error-background: var(--base-color-error-400);
137
+ --semantic-color-status-error-surface: var(--base-color-error-900);
138
+ --semantic-color-status-error-border: var(--base-color-error-500);
139
+ --semantic-color-status-error-foreground: var(--base-color-neutral-900);
140
+ --semantic-color-status-warn-background: var(--base-color-warn-400);
141
+ --semantic-color-status-warn-surface: var(--base-color-warn-900);
142
+ --semantic-color-status-warn-border: var(--base-color-warn-500);
143
+ --semantic-color-status-warn-foreground: var(--base-color-neutral-900);
144
+ --semantic-color-status-warn-text: var(--base-color-warn-300);
145
+ --semantic-color-status-error-text: var(--base-color-error-300);
146
+ --semantic-color-status-success-background: var(--base-color-success-400);
147
+ --semantic-color-status-success-surface: var(--base-color-success-900);
148
+ --semantic-color-status-success-border: var(--base-color-success-500);
149
+ --semantic-color-status-success-foreground: var(--base-color-neutral-900);
150
+ --component-scrim-color: var(--component-scrim-color-dark);
151
+ --component-button-primary-background: var(--base-color-accent-200);
152
+ --component-button-primary-background-hover: var(--base-color-accent-100);
153
+ --component-button-primary-background-pressed: var(--base-color-accent-50);
154
+ --component-button-primary-foreground: var(--base-color-accent-900);
155
+ --component-button-primary-foreground-hover: var(--base-color-accent-800);
156
+ --component-button-primary-foreground-pressed: var(--base-color-accent-700);
157
+ --component-button-primary-border: var(--base-color-accent-200);
158
+ --component-button-secondary-background: var(--base-color-accent-900);
159
+ --component-button-secondary-background-hover: var(--base-color-accent-800);
160
+ --component-button-secondary-background-pressed: var(--base-color-accent-700);
161
+ --component-button-secondary-foreground: var(--base-color-accent-200);
162
+ --component-button-secondary-foreground-hover: var(--base-color-accent-100);
163
+ --component-button-secondary-foreground-pressed: var(--base-color-accent-50);
164
+ --component-button-secondary-border: var(--base-color-accent-200);
165
+ --component-button-secondary-border-hover: var(--base-color-accent-100);
166
+ --component-button-secondary-border-pressed: var(--base-color-accent-50);
167
+ --component-button-tertiary-background: var(--base-color-accent-900);
168
+ --component-button-tertiary-background-hover: var(--base-color-accent-800);
169
+ --component-button-tertiary-background-pressed: var(--base-color-accent-700);
170
+ --component-button-tertiary-foreground: var(--base-color-accent-200);
171
+ --component-button-tertiary-foreground-hover: var(--base-color-accent-100);
172
+ --component-button-tertiary-foreground-pressed: var(--base-color-accent-50);
173
+ --component-button-tertiary-border: var(--base-color-accent-900);
174
+ --component-button-tertiary-border-hover: var(--base-color-accent-800);
175
+ --component-button-tertiary-border-pressed: var(--base-color-accent-700);
176
+ --a1-field-hover-background: var(--base-color-neutral-800);
177
+ --a1-field-hover-border-color: var(--base-color-neutral-300);
178
+ --a1-field-active-background: var(--base-color-neutral-700);
179
+ --a1-field-active-border-color: var(--base-color-neutral-200);
180
+ --a1-field-read-only-background: var(--base-color-info-800);
181
+ --a1-field-read-only-border-color: var(--base-color-info-600);
182
+ --a1-field-read-only-text: var(--base-color-info-50);
183
+ }
184
+
185
+ /* .a1-inverse inside a system-dark page inverts back to light */
186
+ .a1-inverse {
187
+ color-scheme: light;
188
+ --semantic-color-surface-page: var(--base-color-neutral-0);
189
+ --semantic-color-surface-panel: var(--base-color-neutral-50);
190
+ --semantic-color-surface-raised: var(--base-color-neutral-100);
191
+ --semantic-color-text-default: var(--base-color-neutral-900);
192
+ --semantic-color-text-muted: var(--base-color-neutral-600);
193
+ --semantic-color-text-inverse: var(--base-color-neutral-0);
194
+ --semantic-color-text-accent: var(--base-color-accent-500);
195
+ --semantic-color-border-subtle: var(--base-color-neutral-200);
196
+ --semantic-color-border-default: var(--base-color-neutral-300);
197
+ --semantic-color-border-strong: var(--base-color-neutral-500);
198
+ --semantic-color-action-background: var(--base-color-accent-500);
199
+ --semantic-color-action-background-hover: var(--base-color-accent-600);
200
+ --semantic-color-action-background-pressed: var(--base-color-accent-800);
201
+ --semantic-color-action-foreground: var(--base-color-accent-100);
202
+ --semantic-color-action-foreground-pressed: var(--base-color-accent-300);
203
+ --semantic-color-action-surface: var(--base-color-accent-50);
204
+ --semantic-color-action-border: var(--base-color-accent-300);
205
+ --semantic-color-status-info-background: var(--base-color-info-500);
206
+ --semantic-color-status-info-surface: var(--base-color-info-50);
207
+ --semantic-color-status-info-border: var(--base-color-info-300);
208
+ --semantic-color-status-info-foreground: var(--base-color-info-0);
209
+ --semantic-color-status-error-background: var(--base-color-error-500);
210
+ --semantic-color-status-error-surface: var(--base-color-error-50);
211
+ --semantic-color-status-error-border: var(--base-color-error-300);
212
+ --semantic-color-status-error-foreground: var(--base-color-error-0);
213
+ --semantic-color-status-warn-background: var(--base-color-warn-500);
214
+ --semantic-color-status-warn-surface: var(--base-color-warn-50);
215
+ --semantic-color-status-warn-border: var(--base-color-warn-300);
216
+ --semantic-color-status-warn-foreground: var(--base-color-warn-0);
217
+ --semantic-color-status-warn-text: var(--base-color-warn-600);
218
+ --semantic-color-status-error-text: var(--base-color-error-600);
219
+ --semantic-color-status-success-background: var(--base-color-success-600);
220
+ --semantic-color-status-success-surface: var(--base-color-success-50);
221
+ --semantic-color-status-success-border: var(--base-color-success-300);
222
+ --semantic-color-status-success-foreground: var(--base-color-success-0);
223
+ --component-scrim-color: rgba(15, 0, 42, 0.6);
224
+ --component-button-primary-background: var(--base-color-accent-500);
225
+ --component-button-primary-background-hover: var(--base-color-accent-600);
226
+ --component-button-primary-background-pressed: var(--base-color-accent-800);
227
+ --component-button-primary-foreground: var(--base-color-accent-0);
228
+ --component-button-primary-foreground-hover: var(--base-color-accent-50);
229
+ --component-button-primary-foreground-pressed: var(--base-color-accent-100);
230
+ --component-button-primary-border: var(--base-color-accent-500);
231
+ --component-button-secondary-background: var(--base-color-accent-0);
232
+ --component-button-secondary-background-hover: var(--base-color-accent-50);
233
+ --component-button-secondary-background-pressed: var(--base-color-accent-100);
234
+ --component-button-secondary-foreground: var(--base-color-accent-600);
235
+ --component-button-secondary-foreground-hover: var(--base-color-accent-700);
236
+ --component-button-secondary-foreground-pressed: var(--base-color-accent-800);
237
+ --component-button-secondary-border: var(--base-color-accent-500);
238
+ --component-button-secondary-border-hover: var(--base-color-accent-700);
239
+ --component-button-secondary-border-pressed: var(--base-color-accent-800);
240
+ --component-button-tertiary-background: var(--base-color-accent-0);
241
+ --component-button-tertiary-background-hover: var(--base-color-accent-50);
242
+ --component-button-tertiary-background-pressed: var(--base-color-accent-100);
243
+ --component-button-tertiary-foreground: var(--base-color-accent-600);
244
+ --component-button-tertiary-foreground-hover: var(--base-color-accent-700);
245
+ --component-button-tertiary-foreground-pressed: var(--base-color-accent-800);
246
+ --component-button-tertiary-border: var(--base-color-accent-0);
247
+ --component-button-tertiary-border-hover: var(--base-color-accent-50);
248
+ --component-button-tertiary-border-pressed: var(--base-color-accent-100);
249
+ --a1-field-hover-background: var(--base-color-neutral-50);
250
+ --a1-field-hover-border-color: var(--base-color-neutral-600);
251
+ --a1-field-active-background: var(--base-color-neutral-100);
252
+ --a1-field-active-border-color: var(--base-color-neutral-700);
253
+ --a1-field-read-only-background: var(--base-color-info-50);
254
+ --a1-field-read-only-border-color: var(--base-color-info-200);
255
+ --a1-field-read-only-text: var(--base-color-info-1000);
256
+ }
257
+ }
258
+
4
259
  /* ─── Dark ───────────────────────────────────────────────────────────────────
5
260
  Apply .a1-theme-dark to <html> for global dark mode.
6
- .a1-inverse on any container also activates dark colors. */
261
+ Placed after the media query so explicit class always wins regardless of OS. */
7
262
 
8
- .a1-theme-dark, .a1-inverse {
263
+ html.a1-theme-dark {
9
264
  color-scheme: dark;
10
- --semantic-color-surface-page: var(--base-color-neutral-900);
11
- --semantic-color-surface-panel: var(--base-color-neutral-800);
12
- --semantic-color-surface-raised: var(--base-color-neutral-700);
13
- --semantic-color-surface-inverse: var(--base-color-neutral-0);
265
+ --semantic-color-surface-page: var(--base-color-neutral-900);
266
+ --semantic-color-surface-panel: var(--base-color-neutral-800);
267
+ --semantic-color-surface-raised: var(--base-color-neutral-700);
14
268
  --semantic-color-text-default: var(--base-color-neutral-50);
15
- --semantic-color-text-muted: var(--base-color-neutral-400);
269
+ --semantic-color-text-muted: var(--base-color-neutral-300);
16
270
  --semantic-color-text-inverse: var(--base-color-neutral-900);
271
+ --semantic-color-surface-inverse: var(--base-color-neutral-0);
272
+ --semantic-color-text-accent: var(--base-color-accent-300);
17
273
  --semantic-color-border-subtle: var(--base-color-neutral-700);
18
274
  --semantic-color-border-default: var(--base-color-neutral-600);
19
275
  --semantic-color-border-strong: var(--base-color-neutral-400);
@@ -36,11 +292,13 @@
36
292
  --semantic-color-status-warn-surface: var(--base-color-warn-900);
37
293
  --semantic-color-status-warn-border: var(--base-color-warn-500);
38
294
  --semantic-color-status-warn-foreground: var(--base-color-neutral-900);
295
+ --semantic-color-status-warn-text: var(--base-color-warn-300);
296
+ --semantic-color-status-error-text: var(--base-color-error-300);
39
297
  --semantic-color-status-success-background: var(--base-color-success-400);
40
298
  --semantic-color-status-success-surface: var(--base-color-success-900);
41
299
  --semantic-color-status-success-border: var(--base-color-success-500);
42
300
  --semantic-color-status-success-foreground: var(--base-color-neutral-900);
43
- --component-scrim-color: rgba(181, 160, 255, 0.6);
301
+ --component-scrim-color: var(--component-scrim-color-dark);
44
302
  --component-button-primary-background: var(--base-color-accent-200);
45
303
  --component-button-primary-background-hover: var(--base-color-accent-100);
46
304
  --component-button-primary-background-pressed: var(--base-color-accent-50);
@@ -66,19 +324,26 @@
66
324
  --component-button-tertiary-border: var(--base-color-accent-900);
67
325
  --component-button-tertiary-border-hover: var(--base-color-accent-800);
68
326
  --component-button-tertiary-border-pressed: var(--base-color-accent-700);
327
+ --a1-field-hover-background: var(--base-color-neutral-800);
328
+ --a1-field-hover-border-color: var(--base-color-neutral-300);
329
+ --a1-field-active-background: var(--base-color-neutral-700);
330
+ --a1-field-active-border-color: var(--base-color-neutral-200);
331
+ --a1-field-read-only-background: var(--base-color-info-800);
332
+ --a1-field-read-only-border-color: var(--base-color-info-600);
333
+ --a1-field-read-only-text: var(--base-color-info-50);
69
334
  }
70
335
 
71
336
  /* Light restore inside a dark context (.a1-inverse or .a1-theme-light nested under .a1-theme-dark) */
72
- .a1-theme-dark .a1-inverse,
73
- .a1-theme-dark .a1-theme-light {
337
+ html.a1-theme-dark .a1-inverse,
338
+ html.a1-theme-dark .a1-theme-light {
74
339
  color-scheme: light;
75
- --semantic-color-surface-page: var(--base-color-neutral-0);
76
- --semantic-color-surface-panel: var(--base-color-neutral-50);
77
- --semantic-color-surface-raised: var(--base-color-neutral-100);
78
- --semantic-color-surface-inverse: var(--base-color-neutral-900);
340
+ --semantic-color-surface-page: var(--base-color-neutral-0);
341
+ --semantic-color-surface-panel: var(--base-color-neutral-50);
342
+ --semantic-color-surface-raised: var(--base-color-neutral-100);
79
343
  --semantic-color-text-default: var(--base-color-neutral-900);
80
344
  --semantic-color-text-muted: var(--base-color-neutral-600);
81
345
  --semantic-color-text-inverse: var(--base-color-neutral-0);
346
+ --semantic-color-text-accent: var(--base-color-accent-500);
82
347
  --semantic-color-border-subtle: var(--base-color-neutral-200);
83
348
  --semantic-color-border-default: var(--base-color-neutral-300);
84
349
  --semantic-color-border-strong: var(--base-color-neutral-500);
@@ -101,7 +366,9 @@
101
366
  --semantic-color-status-warn-surface: var(--base-color-warn-50);
102
367
  --semantic-color-status-warn-border: var(--base-color-warn-300);
103
368
  --semantic-color-status-warn-foreground: var(--base-color-warn-0);
104
- --semantic-color-status-success-background: var(--base-color-success-500);
369
+ --semantic-color-status-warn-text: var(--base-color-warn-600);
370
+ --semantic-color-status-error-text: var(--base-color-error-600);
371
+ --semantic-color-status-success-background: var(--base-color-success-600);
105
372
  --semantic-color-status-success-surface: var(--base-color-success-50);
106
373
  --semantic-color-status-success-border: var(--base-color-success-300);
107
374
  --semantic-color-status-success-foreground: var(--base-color-success-0);
@@ -131,16 +398,23 @@
131
398
  --component-button-tertiary-border: var(--base-color-accent-0);
132
399
  --component-button-tertiary-border-hover: var(--base-color-accent-50);
133
400
  --component-button-tertiary-border-pressed: var(--base-color-accent-100);
401
+ --a1-field-hover-background: var(--base-color-neutral-50);
402
+ --a1-field-hover-border-color: var(--base-color-neutral-600);
403
+ --a1-field-active-background: var(--base-color-neutral-100);
404
+ --a1-field-active-border-color: var(--base-color-neutral-700);
405
+ --a1-field-read-only-background: var(--base-color-info-50);
406
+ --a1-field-read-only-border-color: var(--base-color-info-200);
407
+ --a1-field-read-only-text: var(--base-color-info-1000);
134
408
  }
135
409
 
136
- .a1-theme-dark .a1-notification--default,
410
+ html.a1-theme-dark .a1-notification--default,
137
411
  .a1-inverse .a1-notification--default {
138
412
  --a1-notification-background: var(--base-color-neutral-500);
139
413
  --a1-notification-foreground: var(--base-color-neutral-0);
140
414
  }
141
415
 
142
- .a1-theme-dark .a1-inverse .a1-notification--default,
143
- .a1-theme-dark .a1-theme-light .a1-notification--default {
416
+ html.a1-theme-dark .a1-inverse .a1-notification--default,
417
+ html.a1-theme-dark .a1-theme-light .a1-notification--default {
144
418
  --a1-notification-background: var(--base-color-neutral-600);
145
419
  --a1-notification-foreground: var(--base-color-neutral-0);
146
420
  }
@@ -148,12 +422,11 @@
148
422
  /* ─── Light ──────────────────────────────────────────────────────────────────
149
423
  Use .a1-theme-light to explicitly force light mode, e.g. inside a dark container. */
150
424
 
151
- .a1-theme-light {
425
+ html.a1-theme-light {
152
426
  color-scheme: light;
153
- --semantic-color-surface-page: var(--base-color-neutral-0);
154
- --semantic-color-surface-panel: var(--base-color-neutral-50);
155
- --semantic-color-surface-raised: var(--base-color-neutral-100);
156
- --semantic-color-surface-inverse: var(--base-color-neutral-900);
427
+ --semantic-color-surface-page: var(--base-color-neutral-0);
428
+ --semantic-color-surface-panel: var(--base-color-neutral-50);
429
+ --semantic-color-surface-raised: var(--base-color-neutral-100);
157
430
  --semantic-color-text-default: var(--base-color-neutral-900);
158
431
  --semantic-color-text-muted: var(--base-color-neutral-600);
159
432
  --semantic-color-text-inverse: var(--base-color-neutral-0);
@@ -180,7 +453,9 @@
180
453
  --semantic-color-status-warn-surface: var(--base-color-warn-50);
181
454
  --semantic-color-status-warn-border: var(--base-color-warn-300);
182
455
  --semantic-color-status-warn-foreground: var(--base-color-warn-0);
183
- --semantic-color-status-success-background: var(--base-color-success-500);
456
+ --semantic-color-status-warn-text: var(--base-color-warn-600);
457
+ --semantic-color-status-error-text: var(--base-color-error-600);
458
+ --semantic-color-status-success-background: var(--base-color-success-600);
184
459
  --semantic-color-status-success-surface: var(--base-color-success-50);
185
460
  --semantic-color-status-success-border: var(--base-color-success-300);
186
461
  --semantic-color-status-success-foreground: var(--base-color-success-0);
@@ -210,4 +485,291 @@
210
485
  --component-button-tertiary-border: var(--base-color-accent-0);
211
486
  --component-button-tertiary-border-hover: var(--base-color-accent-50);
212
487
  --component-button-tertiary-border-pressed: var(--base-color-accent-100);
488
+ --a1-field-hover-background: var(--base-color-neutral-50);
489
+ --a1-field-hover-border-color: var(--base-color-neutral-600);
490
+ --a1-field-active-background: var(--base-color-neutral-100);
491
+ --a1-field-active-border-color: var(--base-color-neutral-700);
492
+ --a1-field-read-only-background: var(--base-color-info-50);
493
+ --a1-field-read-only-border-color: var(--base-color-info-200);
494
+ --a1-field-read-only-text: var(--base-color-info-1000);
495
+ }
496
+
497
+ /* ─── .a1-theme-light .a1-inverse ───────────────────────────────────────────
498
+ When .a1-theme-light forces light mode on <html> but the OS prefers dark,
499
+ the system dark media query (0,1,0) would flip .a1-inverse sections to light.
500
+ This compound rule (0,2,1) overrides that and keeps inverse sections dark. */
501
+
502
+ html.a1-theme-light .a1-inverse {
503
+ color-scheme: dark;
504
+ --semantic-color-surface-page: var(--base-color-neutral-900);
505
+ --semantic-color-surface-panel: var(--base-color-neutral-800);
506
+ --semantic-color-surface-raised: var(--base-color-neutral-700);
507
+ --semantic-color-text-default: var(--base-color-neutral-50);
508
+ --semantic-color-text-muted: var(--base-color-neutral-300);
509
+ --semantic-color-text-inverse: var(--base-color-neutral-900);
510
+ --semantic-color-surface-inverse: var(--base-color-neutral-0);
511
+ --semantic-color-text-accent: var(--base-color-accent-300);
512
+ --semantic-color-border-subtle: var(--base-color-neutral-700);
513
+ --semantic-color-border-default: var(--base-color-neutral-600);
514
+ --semantic-color-border-strong: var(--base-color-neutral-400);
515
+ --semantic-color-action-background: var(--base-color-accent-400);
516
+ --semantic-color-action-background-hover: var(--base-color-accent-300);
517
+ --semantic-color-action-background-pressed: var(--base-color-accent-500);
518
+ --semantic-color-action-foreground: var(--base-color-accent-1000);
519
+ --semantic-color-action-foreground-pressed: var(--base-color-accent-1000);
520
+ --semantic-color-action-surface: var(--base-color-accent-900);
521
+ --semantic-color-action-border: var(--base-color-accent-500);
522
+ --semantic-color-status-info-background: var(--base-color-info-400);
523
+ --semantic-color-status-info-surface: var(--base-color-info-900);
524
+ --semantic-color-status-info-border: var(--base-color-info-500);
525
+ --semantic-color-status-info-foreground: var(--base-color-info-1000);
526
+ --semantic-color-status-error-background: var(--base-color-error-400);
527
+ --semantic-color-status-error-surface: var(--base-color-error-900);
528
+ --semantic-color-status-error-border: var(--base-color-error-500);
529
+ --semantic-color-status-error-foreground: var(--base-color-neutral-900);
530
+ --semantic-color-status-warn-background: var(--base-color-warn-400);
531
+ --semantic-color-status-warn-surface: var(--base-color-warn-900);
532
+ --semantic-color-status-warn-border: var(--base-color-warn-500);
533
+ --semantic-color-status-warn-foreground: var(--base-color-neutral-900);
534
+ --semantic-color-status-warn-text: var(--base-color-warn-300);
535
+ --semantic-color-status-error-text: var(--base-color-error-300);
536
+ --semantic-color-status-success-background: var(--base-color-success-400);
537
+ --semantic-color-status-success-surface: var(--base-color-success-900);
538
+ --semantic-color-status-success-border: var(--base-color-success-500);
539
+ --semantic-color-status-success-foreground: var(--base-color-neutral-900);
540
+ --component-scrim-color: var(--component-scrim-color-dark);
541
+ --component-button-primary-background: var(--base-color-accent-200);
542
+ --component-button-primary-background-hover: var(--base-color-accent-100);
543
+ --component-button-primary-background-pressed: var(--base-color-accent-50);
544
+ --component-button-primary-foreground: var(--base-color-accent-900);
545
+ --component-button-primary-foreground-hover: var(--base-color-accent-800);
546
+ --component-button-primary-foreground-pressed: var(--base-color-accent-700);
547
+ --component-button-primary-border: var(--base-color-accent-200);
548
+ --component-button-secondary-background: var(--base-color-accent-900);
549
+ --component-button-secondary-background-hover: var(--base-color-accent-800);
550
+ --component-button-secondary-background-pressed: var(--base-color-accent-700);
551
+ --component-button-secondary-foreground: var(--base-color-accent-200);
552
+ --component-button-secondary-foreground-hover: var(--base-color-accent-100);
553
+ --component-button-secondary-foreground-pressed: var(--base-color-accent-50);
554
+ --component-button-secondary-border: var(--base-color-accent-200);
555
+ --component-button-secondary-border-hover: var(--base-color-accent-100);
556
+ --component-button-secondary-border-pressed: var(--base-color-accent-50);
557
+ --component-button-tertiary-background: var(--base-color-accent-900);
558
+ --component-button-tertiary-background-hover: var(--base-color-accent-800);
559
+ --component-button-tertiary-background-pressed: var(--base-color-accent-700);
560
+ --component-button-tertiary-foreground: var(--base-color-accent-200);
561
+ --component-button-tertiary-foreground-hover: var(--base-color-accent-100);
562
+ --component-button-tertiary-foreground-pressed: var(--base-color-accent-50);
563
+ --component-button-tertiary-border: var(--base-color-accent-900);
564
+ --component-button-tertiary-border-hover: var(--base-color-accent-800);
565
+ --component-button-tertiary-border-pressed: var(--base-color-accent-700);
566
+ --a1-field-hover-background: var(--base-color-neutral-800);
567
+ --a1-field-hover-border-color: var(--base-color-neutral-300);
568
+ --a1-field-active-background: var(--base-color-neutral-700);
569
+ --a1-field-active-border-color: var(--base-color-neutral-200);
570
+ --a1-field-read-only-background: var(--base-color-info-800);
571
+ --a1-field-read-only-border-color: var(--base-color-info-600);
572
+ --a1-field-read-only-text: var(--base-color-info-50);
573
+ }
574
+
575
+ /* ─── Reduced motion ─────────────────────────────────────────────────────────
576
+ When OS requests reduced motion, collapse all duration tokens to 0ms so any
577
+ CSS transition built on tokens becomes instant. .a1-reduce-motion mirrors
578
+ this for Storybook preview and testing without changing OS settings. */
579
+
580
+ @media (prefers-reduced-motion: reduce) {
581
+ :root {
582
+ --semantic-motion-duration-quick: 0ms;
583
+ --semantic-motion-duration-fast: 0ms;
584
+ --semantic-motion-duration-normal: 0ms;
585
+ --semantic-motion-duration-slow: 0ms;
586
+ --semantic-motion-duration-slower: 0ms;
587
+ --semantic-motion-duration-slowest: 0ms;
588
+ }
589
+ }
590
+
591
+ html.a1-reduce-motion {
592
+ --semantic-motion-duration-quick: 0ms;
593
+ --semantic-motion-duration-fast: 0ms;
594
+ --semantic-motion-duration-normal: 0ms;
595
+ --semantic-motion-duration-slow: 0ms;
596
+ --semantic-motion-duration-slower: 0ms;
597
+ --semantic-motion-duration-slowest: 0ms;
598
+ }
599
+
600
+ /* ─── Contrast: more ─────────────────────────────────────────────────────────
601
+ Responds to the OS prefers-contrast: more preference.
602
+ .a1-contrast-more mirrors it for Storybook and explicit simulation.
603
+ The compound dark-mode rule uses specificity (0,2,0) to override the
604
+ individual (0,1,0) class rules when both dark and more-contrast are active. */
605
+
606
+ @media (prefers-contrast: more) {
607
+ :root {
608
+ /* Interactive elements — one step deeper in the ramp */
609
+ --semantic-color-action-background: var(--base-color-accent-600);
610
+ --semantic-color-action-background-hover: var(--base-color-accent-700);
611
+ --semantic-color-action-background-pressed: var(--base-color-accent-900);
612
+ --semantic-color-action-surface: var(--base-color-accent-100);
613
+ --semantic-color-action-border: var(--base-color-accent-400);
614
+ --semantic-color-text-accent: var(--base-color-accent-600);
615
+ --semantic-color-text-muted: var(--base-color-neutral-700);
616
+
617
+ /* Component button backgrounds and borders (hardcoded in tokens.css; must be explicit) */
618
+ --component-button-primary-background: var(--base-color-accent-600);
619
+ --component-button-primary-background-hover: var(--base-color-accent-700);
620
+ --component-button-primary-background-pressed: var(--base-color-accent-900);
621
+ --component-button-primary-border: var(--base-color-accent-600);
622
+ --component-button-secondary-border: var(--base-color-accent-600);
623
+ --component-button-secondary-border-hover: var(--base-color-accent-700);
624
+ --component-button-secondary-border-pressed: var(--base-color-accent-800);
625
+ --component-button-tertiary-border: var(--base-color-neutral-300);
626
+ --component-button-tertiary-border-hover: var(--base-color-neutral-400);
627
+ --component-button-tertiary-border-pressed: var(--base-color-neutral-400);
628
+
629
+ /* Borders — one step more visible */
630
+ --semantic-color-border-subtle: var(--base-color-neutral-300);
631
+ --semantic-color-border-default: var(--base-color-neutral-400);
632
+ --semantic-color-border-strong: var(--base-color-neutral-600);
633
+
634
+ /* Border widths — +1px on interactive and structural components */
635
+ --component-button-secondary-border-width: 2px;
636
+ --component-button-tertiary-border-width: 2px;
637
+ --component-card-border-width: 2px;
638
+ --component-data-table-border-width: 2px;
639
+ --component-dialog-border-width: 2px;
640
+ --component-dialog-footer-border-width: 2px;
641
+ --component-field-border-width: 2px;
642
+ --component-menu-border-width: 2px;
643
+ --component-message-banner-border-width: 2px;
644
+ --component-message-badge-border-width: 2px;
645
+ --component-pagination-border-width: 2px;
646
+ --component-segmented-border-width: 2px;
647
+ --component-side-nav-border-width: 2px;
648
+ --component-tab-border-width: 2px;
649
+ --component-top-header-border-width: 2px;
650
+ }
651
+
652
+ /* Dark mode + system more-contrast: step toward lighter (higher contrast on dark bg) */
653
+ html.a1-theme-dark {
654
+ --semantic-color-action-background: var(--base-color-accent-300);
655
+ --semantic-color-action-background-hover: var(--base-color-accent-200);
656
+ --semantic-color-action-background-pressed: var(--base-color-accent-400);
657
+ --semantic-color-action-surface: var(--base-color-accent-800);
658
+ --semantic-color-action-border: var(--base-color-accent-400);
659
+ --semantic-color-text-accent: var(--base-color-accent-200);
660
+ --semantic-color-text-muted: var(--base-color-neutral-200);
661
+ --component-button-primary-background: var(--base-color-accent-100);
662
+ --component-button-primary-background-hover: var(--base-color-accent-50);
663
+ --component-button-primary-background-pressed: var(--base-color-accent-200);
664
+ --component-button-primary-border: var(--base-color-accent-100);
665
+ --semantic-color-border-subtle: var(--base-color-neutral-600);
666
+ --semantic-color-border-default: var(--base-color-neutral-500);
667
+ --semantic-color-border-strong: var(--base-color-neutral-300);
668
+ }
669
+ }
670
+
671
+ /* Explicit simulation class — mirrors the @media block above */
672
+ html.a1-contrast-more {
673
+ --semantic-color-action-background: var(--base-color-accent-600);
674
+ --semantic-color-action-background-hover: var(--base-color-accent-700);
675
+ --semantic-color-action-background-pressed: var(--base-color-accent-900);
676
+ --semantic-color-action-surface: var(--base-color-accent-100);
677
+ --semantic-color-action-border: var(--base-color-accent-400);
678
+ --semantic-color-text-accent: var(--base-color-accent-600);
679
+ --semantic-color-text-muted: var(--base-color-neutral-700);
680
+ --component-button-primary-background: var(--base-color-accent-600);
681
+ --component-button-primary-background-hover: var(--base-color-accent-700);
682
+ --component-button-primary-background-pressed: var(--base-color-accent-900);
683
+ --component-button-primary-border: var(--base-color-accent-600);
684
+ --component-button-secondary-border: var(--base-color-accent-600);
685
+ --component-button-secondary-border-hover: var(--base-color-accent-700);
686
+ --component-button-secondary-border-pressed: var(--base-color-accent-800);
687
+ --component-button-tertiary-border: var(--base-color-neutral-300);
688
+ --component-button-tertiary-border-hover: var(--base-color-neutral-400);
689
+ --component-button-tertiary-border-pressed: var(--base-color-neutral-400);
690
+ --semantic-color-border-subtle: var(--base-color-neutral-300);
691
+ --semantic-color-border-default: var(--base-color-neutral-400);
692
+ --semantic-color-border-strong: var(--base-color-neutral-600);
693
+ --component-button-secondary-border-width: 2px;
694
+ --component-button-tertiary-border-width: 2px;
695
+ --component-card-border-width: 2px;
696
+ --component-data-table-border-width: 2px;
697
+ --component-dialog-border-width: 2px;
698
+ --component-dialog-footer-border-width: 2px;
699
+ --component-field-border-width: 2px;
700
+ --component-menu-border-width: 2px;
701
+ --component-message-banner-border-width: 2px;
702
+ --component-message-badge-border-width: 2px;
703
+ --component-pagination-border-width: 2px;
704
+ --component-segmented-border-width: 2px;
705
+ --component-side-nav-border-width: 2px;
706
+ --component-tab-border-width: 2px;
707
+ --component-top-header-border-width: 2px;
708
+ }
709
+
710
+ /* Dark mode + explicit more-contrast — (0,2,1) beats individual class rules */
711
+ html.a1-theme-dark.a1-contrast-more,
712
+ html.a1-contrast-more.a1-theme-dark {
713
+ --semantic-color-action-background: var(--base-color-accent-300);
714
+ --semantic-color-action-background-hover: var(--base-color-accent-200);
715
+ --semantic-color-action-background-pressed: var(--base-color-accent-400);
716
+ --semantic-color-action-surface: var(--base-color-accent-800);
717
+ --semantic-color-action-border: var(--base-color-accent-400);
718
+ --semantic-color-text-accent: var(--base-color-accent-200);
719
+ --semantic-color-text-muted: var(--base-color-neutral-200);
720
+ --component-button-primary-background: var(--base-color-accent-100);
721
+ --component-button-primary-background-hover: var(--base-color-accent-50);
722
+ --component-button-primary-background-pressed: var(--base-color-accent-200);
723
+ --component-button-primary-border: var(--base-color-accent-100);
724
+ --semantic-color-border-subtle: var(--base-color-neutral-600);
725
+ --semantic-color-border-default: var(--base-color-neutral-500);
726
+ --semantic-color-border-strong: var(--base-color-neutral-300);
727
+ }
728
+
729
+ /* Contrast-more inside inverse sections — light mode context (dark inverse bg).
730
+ One step lighter for higher contrast against the dark surface. (0,2,0). */
731
+
732
+ html.a1-contrast-more .a1-inverse {
733
+ --semantic-color-action-background: var(--base-color-accent-300);
734
+ --semantic-color-action-background-hover: var(--base-color-accent-200);
735
+ --semantic-color-action-background-pressed: var(--base-color-accent-400);
736
+ --semantic-color-action-border: var(--base-color-accent-300);
737
+ --semantic-color-text-accent: var(--base-color-accent-200);
738
+ --semantic-color-text-muted: var(--base-color-neutral-200);
739
+ --component-button-primary-background: var(--base-color-accent-100);
740
+ --component-button-primary-background-hover: var(--base-color-accent-50);
741
+ --component-button-primary-background-pressed: var(--base-color-accent-200);
742
+ --component-button-primary-border: var(--base-color-accent-100);
743
+ }
744
+
745
+ /* Dark mode + contrast-more inside inverse sections — the inverse is now LIGHT,
746
+ so contrast direction flips: one step darker, same as light-mode contrast-more.
747
+ Specificity (0,3,0) beats .a1-contrast-more .a1-inverse above. */
748
+
749
+ html.a1-theme-dark.a1-contrast-more .a1-inverse,
750
+ html.a1-contrast-more.a1-theme-dark .a1-inverse {
751
+ --semantic-color-action-background: var(--base-color-accent-600);
752
+ --semantic-color-action-background-hover: var(--base-color-accent-700);
753
+ --semantic-color-action-background-pressed: var(--base-color-accent-900);
754
+ --semantic-color-action-border: var(--base-color-accent-400);
755
+ --semantic-color-text-accent: var(--base-color-accent-600);
756
+ --semantic-color-text-muted: var(--base-color-neutral-700);
757
+ --component-button-primary-background: var(--base-color-accent-600);
758
+ --component-button-primary-background-hover: var(--base-color-accent-700);
759
+ --component-button-primary-background-pressed: var(--base-color-accent-900);
760
+ --component-button-primary-border: var(--base-color-accent-600);
761
+ --semantic-color-border-subtle: var(--base-color-neutral-300);
762
+ --semantic-color-border-default: var(--base-color-neutral-400);
763
+ --semantic-color-border-strong: var(--base-color-neutral-600);
764
+ }
765
+
766
+ /* ─── Accessible theme — dark mode border override ───────────────────────────
767
+ Specificity (0,2,0) beats individual .a1-theme-accessible and .a1-theme-dark
768
+ rules (0,1,0 each), ensuring accessible borders stay two steps lighter than
769
+ the dark-mode defaults (neutral-700→500 and neutral-600→400). */
770
+
771
+ html.a1-theme-accessible.a1-theme-dark,
772
+ html.a1-theme-dark.a1-theme-accessible {
773
+ --semantic-color-border-subtle: var(--base-color-neutral-500);
774
+ --semantic-color-border-default: var(--base-color-neutral-400);
213
775
  }