@health-samurai/react-components 0.0.0-alpha.13 → 0.0.0-alpha.15

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 (21) hide show
  1. package/dist/bundle.css +468 -326
  2. package/dist/src/components/code-editor/index.d.ts.map +1 -1
  3. package/dist/src/components/code-editor/index.js +110 -26
  4. package/dist/src/components/code-editor/index.js.map +1 -1
  5. package/dist/src/components/fhir-structure-view.js +4 -4
  6. package/dist/src/components/fhir-structure-view.js.map +1 -1
  7. package/dist/src/index.css +293 -91
  8. package/dist/src/shadcn/components/ui/checkbox.js +2 -2
  9. package/dist/src/shadcn/components/ui/checkbox.js.map +1 -1
  10. package/dist/src/shadcn/components/ui/radio-group.js +2 -2
  11. package/dist/src/shadcn/components/ui/radio-group.js.map +1 -1
  12. package/dist/src/shadcn/shadcn.css +4 -4
  13. package/dist/src/tokens.css +25 -9
  14. package/package.json +1 -1
  15. package/src/components/code-editor/index.tsx +99 -22
  16. package/src/components/fhir-structure-view.tsx +4 -4
  17. package/src/index.css +293 -91
  18. package/src/shadcn/components/ui/checkbox.tsx +2 -2
  19. package/src/shadcn/components/ui/radio-group.tsx +2 -2
  20. package/src/shadcn/shadcn.css +4 -4
  21. package/src/tokens.css +25 -9
package/src/index.css CHANGED
@@ -17,8 +17,8 @@
17
17
  stroke-width: 1.5px;
18
18
  }
19
19
 
20
- @theme {
21
- --color-selection: var(--color-blue-300);
20
+ @theme inline {
21
+ --color-selection: var(--hs-selection);
22
22
  --color-ring-red: var(--color-red-200);
23
23
  --color-ring-green: var(--color-green-200);
24
24
  --color-ring-yellow: var(--color-yellow-200);
@@ -26,36 +26,35 @@
26
26
  --color-ring-orange: var(--color-orange-200);
27
27
  --color-ring-pink: var(--color-pink-200);
28
28
  --color-ring-blue: var(--color-blue-300);
29
- --color-ring-red: var(--color-red-200);
30
- --color-text-primary: var(--color-neutral-900);
31
- --color-text-secondary: var(--color-neutral-500);
32
- --color-text-secondary_hover: var(--color-neutral-600);
33
- --color-text-primary_on-brand: var(--color-neutral-50);
34
- --color-text-secondary_on-brand: var(--color-neutral-100);
35
- --color-text-tertiary: var(--color-neutral-400);
36
- --color-text-tertiary_hover: var(--color-neutral-500);
37
- --color-text-quternary: var(--color-neutral-400);
38
- --color-text-quternary_hover: var(--color-neutral-500);
39
- --color-text-quternary_on-brand: var(--color-neutral-200);
40
- --color-text-disabled: var(--color-neutral-300);
41
- --color-text-link: var(--color-blue-500);
42
- --color-text-link_hover: var(--color-blue-700);
43
- --color-text-link_disabled: var(--color-blue-400);
44
- --color-text-brand-primary: var(--color-brand-500);
45
- --color-text-brand-secondary: var(--color-brand-300);
46
- --color-text-brand-secondary_hover: var(--color-brand-400);
47
- --color-text-error-primary: var(--color-red-500);
48
- --color-text-error-secondary: var(--color-red-400);
49
- --color-text-success-primary: var(--color-green-500);
50
- --color-text-warning-primary: var(--color-yellow-700);
51
- --color-text-info-primary: var(--color-blue-600);
29
+ --color-text-primary: var(--hs-text-primary);
30
+ --color-text-secondary: var(--hs-text-secondary);
31
+ --color-text-secondary_hover: var(--hs-text-secondary-hover);
32
+ --color-text-primary_on-brand: var(--hs-text-primary-on-brand);
33
+ --color-text-secondary_on-brand: var(--hs-text-secondary-on-brand);
34
+ --color-text-tertiary: var(--hs-text-tertiary);
35
+ --color-text-tertiary_hover: var(--hs-text-tertiary-hover);
36
+ --color-text-quternary: var(--hs-text-quaternary);
37
+ --color-text-quternary_hover: var(--hs-text-quaternary-hover);
38
+ --color-text-quternary_on-brand: var(--hs-text-quaternary-on-brand);
39
+ --color-text-disabled: var(--hs-text-disabled);
40
+ --color-text-link: var(--hs-text-link);
41
+ --color-text-link_hover: var(--hs-text-link-hover);
42
+ --color-text-link_disabled: var(--hs-text-link-disabled);
43
+ --color-text-brand-primary: var(--hs-text-brand-primary);
44
+ --color-text-brand-secondary: var(--hs-text-brand-secondary);
45
+ --color-text-brand-secondary_hover: var(--hs-text-brand-secondary-hover);
46
+ --color-text-error-primary: var(--hs-text-error-primary);
47
+ --color-text-error-secondary: var(--hs-text-error-secondary);
48
+ --color-text-success-primary: var(--hs-text-success-primary);
49
+ --color-text-warning-primary: var(--hs-text-warning-primary);
50
+ --color-text-info-primary: var(--hs-text-info-primary);
52
51
  --color-white: #ffffff;
53
- --color-border-primary: var(--color-neutral-300);
54
- --color-border-primary_hover: var(--color-neutral-400);
55
- --color-border-secondary: var(--color-neutral-200);
56
- --color-border-separator: var(--color-neutral-200);
57
- --color-border-disabled: var(--color-neutral-100);
58
- --color-border-dark: var(--color-neutral-500);
52
+ --color-border-primary: var(--hs-border-primary);
53
+ --color-border-primary_hover: var(--hs-border-primary-hover);
54
+ --color-border-secondary: var(--hs-border-secondary);
55
+ --color-border-separator: var(--hs-border-separator);
56
+ --color-border-disabled: var(--hs-border-disabled);
57
+ --color-border-dark: var(--hs-border-dark);
59
58
  --color-border-brand: var(--color-brand-500);
60
59
  --color-border-link: var(--color-blue-500);
61
60
  --color-border-error: var(--color-red-500);
@@ -64,79 +63,282 @@
64
63
  --color-border-success: var(--color-green-500);
65
64
  --color-border-warning-primary: var(--color-yellow-500);
66
65
  --color-border-warning-secondary: var(--color-yellow-300);
67
- --color-bg-primary: #ffffff;
68
- --color-bg-primary_inverse: var(--color-neutral-900);
69
- --color-bg-secondary: var(--color-neutral-50);
70
- --color-bg-secondary_inverse: var(--color-neutral-500);
71
- --color-bg-secondary_inverse_hover: var(--color-neutral-600);
72
-
73
- --color-bg-tertiary: var(--color-neutral-100);
74
- --color-bg-tertiary_inverse: var(--color-neutral-400);
75
- --color-bg-quaternary: var(--color-neutral-200);
76
- --color-bg-overlay: var(--color-neutral-900);
77
- --color-bg-disabled: var(--color-neutral-300);
78
- --color-bg-hover: var(--color-blue-200);
79
- --color-bg-dark_tertiary: var(--color-neutral-400);
80
-
81
- --color-bg-brand-primary: var(--color-brand-50);
82
- --color-bg-brand-primary_inverse: var(--color-brand-500);
83
- --color-bg-brand-secondary: var(--color-brand-100);
84
- --color-bg-brand-tertiary: var(--color-brand-200);
85
-
86
- --color-bg-link: var(--color-blue-500);
87
- --color-bg-link_disabled: var(--color-blue-400);
88
- --color-bg-link_hover: var(--color-blue-600);
89
- --color-bg-error-primary: var(--color-red-50);
90
- --color-bg-error-primary_inverse: var(--color-red-500);
91
- --color-bg-error-primary_inverse_hover: var(--color-red-700);
92
- --color-bg-error-secondary: var(--color-red-100);
93
- --color-bg-error-tertiary: var(--color-red-200);
94
- --color-bg-success-primary: var(--color-green-50);
95
- --color-bg-success-primary_inverse: var(--color-green-500);
96
- --color-bg-success-secondary: var(--color-green-100);
97
- --color-bg-warning-primary: var(--color-yellow-50);
98
- --color-bg-warning-primary_inverse: #f4cb00;
99
- --color-bg-warning-secondary: var(--color-yellow-100);
100
- --color-bg-info-primary: var(--color-blue-100);
101
- --color-bg-info-primary_inverse: var(--color-blue-500);
102
- --color-bg-neutral-primary: var(--color-neutral-100);
103
- --color-bg-neutral-primary_inverse: var(--color-neutral-900);
104
- --color-fg-primary: var(--color-neutral-900);
105
- --color-fg-primary_inverse: var(--white);
106
- --color-fg-primary_on-brand: var(--color-neutral-50);
107
- --color-fg-secondary: var(--color-neutral-700);
108
- --color-fg-secondary_inverse: var(--color-neutral-400);
109
- --color-fg-secondary_hover: var(--color-neutral-800);
110
- --color-fg-secondary_on-brand: var(--color-neutral-100);
111
- --color-fg-tertiary: var(--color-neutral-500);
112
- --color-fg-tertiary_hover: var(--color-neutral-600);
113
- --color-fg-tertiary_on-brand: var(--color-neutral-200);
114
- --color-fg-disabled: var(--color-neutral-300);
115
- --color-fg-brand-primary: var(--color-brand-500);
116
- --color-fg-brand-secondary: var(--color-brand-300);
117
- --color-fg-link: var(--color-blue-500);
118
- --color-fg-error-primary: var(--color-red-500);
119
- --color-fg-error-secondary: var(--color-red-400);
120
- --color-fg-success-primary: var(--color-green-500);
121
- --color-fg-success-secondary: var(--color-green-400);
122
- --color-fg-warning-primary: var(--color-yellow-700);
123
- --color-fg-warning-secondary: var(--color-yellow-400);
124
- --color-fg-info-primary: var(--color-blue-600);
125
- --color-fg-neutral-primary: var(--color-neutral-500);
66
+ --color-bg-primary: var(--hs-bg-primary);
67
+ --color-bg-primary_inverse: var(--hs-bg-primary-inverse);
68
+ --color-bg-secondary: var(--hs-bg-secondary);
69
+ --color-bg-secondary_inverse: var(--hs-bg-secondary-inverse);
70
+ --color-bg-secondary_inverse_hover: var(--hs-bg-secondary-inverse-hover);
71
+ --color-bg-tertiary: var(--hs-bg-tertiary);
72
+ --color-bg-tertiary_inverse: var(--hs-bg-tertiary-inverse);
73
+ --color-bg-quaternary: var(--hs-bg-quaternary);
74
+ --color-bg-overlay: var(--hs-bg-overlay);
75
+ --color-bg-disabled: var(--hs-bg-disabled);
76
+ --color-bg-hover: var(--hs-bg-hover);
77
+ --color-bg-dark_tertiary: var(--hs-bg-dark-tertiary);
78
+ --color-bg-brand-primary: var(--hs-bg-brand-primary);
79
+ --color-bg-brand-primary_inverse: var(--hs-bg-brand-primary-inverse);
80
+ --color-bg-brand-secondary: var(--hs-bg-brand-secondary);
81
+ --color-bg-brand-tertiary: var(--hs-bg-brand-tertiary);
82
+ --color-bg-link: var(--hs-bg-link);
83
+ --color-bg-link_disabled: var(--hs-bg-link-disabled);
84
+ --color-bg-link_hover: var(--hs-bg-link-hover);
85
+ --color-bg-error-primary: var(--hs-bg-error-primary);
86
+ --color-bg-error-primary_inverse: var(--hs-bg-error-primary-inverse);
87
+ --color-bg-error-primary_inverse_hover: var(
88
+ --hs-bg-error-primary-inverse-hover
89
+ );
90
+ --color-bg-error-secondary: var(--hs-bg-error-secondary);
91
+ --color-bg-error-tertiary: var(--hs-bg-error-tertiary);
92
+ --color-bg-success-primary: var(--hs-bg-success-primary);
93
+ --color-bg-success-primary_inverse: var(--hs-bg-success-primary-inverse);
94
+ --color-bg-success-secondary: var(--hs-bg-success-secondary);
95
+ --color-bg-warning-primary: var(--hs-bg-warning-primary);
96
+ --color-bg-warning-primary_inverse: var(--hs-bg-warning-primary-inverse);
97
+ --color-bg-warning-secondary: var(--hs-bg-warning-secondary);
98
+ --color-bg-info-primary: var(--hs-bg-info-primary);
99
+ --color-bg-info-primary_inverse: var(--hs-bg-info-primary-inverse);
100
+ --color-bg-neutral-primary: var(--hs-bg-neutral-primary);
101
+ --color-bg-neutral-primary_inverse: var(--hs-bg-neutral-primary-inverse);
102
+ --color-fg-primary: var(--hs-fg-primary);
103
+ --color-fg-primary_inverse: var(--hs-fg-primary-inverse);
104
+ --color-fg-primary_on-brand: var(--hs-fg-primary-on-brand);
105
+ --color-fg-secondary: var(--hs-fg-secondary);
106
+ --color-fg-secondary_inverse: var(--hs-fg-secondary-inverse);
107
+ --color-fg-secondary_hover: var(--hs-fg-secondary-hover);
108
+ --color-fg-secondary_on-brand: var(--hs-fg-secondary-on-brand);
109
+ --color-fg-tertiary: var(--hs-fg-tertiary);
110
+ --color-fg-tertiary_hover: var(--hs-fg-tertiary-hover);
111
+ --color-fg-tertiary_on-brand: var(--hs-fg-tertiary-on-brand);
112
+ --color-fg-disabled: var(--hs-fg-disabled);
113
+ --color-fg-brand-primary: var(--hs-fg-brand-primary);
114
+ --color-fg-brand-secondary: var(--hs-fg-brand-secondary);
115
+ --color-fg-link: var(--hs-fg-link);
116
+ --color-fg-error-primary: var(--hs-fg-error-primary);
117
+ --color-fg-error-secondary: var(--hs-fg-error-secondary);
118
+ --color-fg-success-primary: var(--hs-fg-success-primary);
119
+ --color-fg-success-secondary: var(--hs-fg-success-secondary);
120
+ --color-fg-warning-primary: var(--hs-fg-warning-primary);
121
+ --color-fg-warning-secondary: var(--hs-fg-warning-secondary);
122
+ --color-fg-info-primary: var(--hs-fg-info-primary);
123
+ --color-fg-neutral-primary: var(--hs-fg-neutral-primary);
126
124
  --color-utility-green: var(--color-green-500);
127
125
  --color-utility-yellow: var(--color-yellow-600);
128
126
  --color-utility-blue: var(--color-blue-500);
129
127
  --color-utility-violet: var(--color-violet-500);
130
128
  --color-utility-red: var(--color-red-500);
131
-
132
129
  --font-leading-14: 56px;
133
130
  }
134
131
 
132
+ :root {
133
+ --hs-selection: var(--color-blue-300);
134
+ --hs-text-primary: var(--color-neutral-900);
135
+ --hs-text-secondary: var(--color-neutral-500);
136
+ --hs-text-secondary-hover: var(--color-neutral-600);
137
+ --hs-text-primary-on-brand: var(--color-neutral-50);
138
+ --hs-text-secondary-on-brand: var(--color-neutral-100);
139
+ --hs-text-tertiary: var(--color-neutral-400);
140
+ --hs-text-tertiary-hover: var(--color-neutral-500);
141
+ --hs-text-quaternary: var(--color-neutral-400);
142
+ --hs-text-quaternary-hover: var(--color-neutral-500);
143
+ --hs-text-quaternary-on-brand: var(--color-neutral-200);
144
+ --hs-text-disabled: var(--color-neutral-300);
145
+ --hs-text-link: var(--color-blue-500);
146
+ --hs-text-link-hover: var(--color-blue-700);
147
+ --hs-text-link-disabled: var(--color-blue-400);
148
+ --hs-text-brand-primary: var(--color-brand-500);
149
+ --hs-text-brand-secondary: var(--color-brand-300);
150
+ --hs-text-brand-secondary-hover: var(--color-brand-400);
151
+ --hs-text-error-primary: var(--color-red-500);
152
+ --hs-text-error-secondary: var(--color-red-400);
153
+ --hs-text-success-primary: var(--color-green-500);
154
+ --hs-text-warning-primary: var(--color-yellow-700);
155
+ --hs-text-info-primary: var(--color-blue-600);
156
+ --hs-border-primary: var(--color-neutral-300);
157
+ --hs-border-primary-hover: var(--color-neutral-400);
158
+ --hs-border-secondary: var(--color-neutral-200);
159
+ --hs-border-separator: var(--color-neutral-200);
160
+ --hs-border-disabled: var(--color-neutral-100);
161
+ --hs-border-dark: var(--color-neutral-500);
162
+ --hs-bg-primary: #ffffff;
163
+ --hs-bg-primary-inverse: var(--color-neutral-900);
164
+ --hs-bg-secondary: var(--color-neutral-50);
165
+ --hs-bg-secondary-inverse: var(--color-neutral-500);
166
+ --hs-bg-secondary-inverse-hover: var(--color-neutral-600);
167
+ --hs-bg-tertiary: var(--color-neutral-100);
168
+ --hs-bg-tertiary-inverse: var(--color-neutral-400);
169
+ --hs-bg-quaternary: var(--color-neutral-200);
170
+ --hs-bg-overlay: var(--color-neutral-900);
171
+ --hs-bg-disabled: var(--color-neutral-300);
172
+ --hs-bg-hover: var(--color-blue-200);
173
+ --hs-bg-dark-tertiary: var(--color-neutral-400);
174
+ --hs-bg-brand-primary: var(--color-brand-50);
175
+ --hs-bg-brand-primary-inverse: var(--color-brand-500);
176
+ --hs-bg-brand-secondary: var(--color-brand-100);
177
+ --hs-bg-brand-tertiary: var(--color-brand-200);
178
+ --hs-bg-link: var(--color-blue-500);
179
+ --hs-bg-link-disabled: var(--color-blue-400);
180
+ --hs-bg-link-hover: var(--color-blue-600);
181
+ --hs-bg-error-primary: var(--color-red-50);
182
+ --hs-bg-error-primary-inverse: var(--color-red-500);
183
+ --hs-bg-error-primary-inverse-hover: var(--color-red-700);
184
+ --hs-bg-error-secondary: var(--color-red-100);
185
+ --hs-bg-error-tertiary: var(--color-red-200);
186
+ --hs-bg-success-primary: var(--color-green-50);
187
+ --hs-bg-success-primary-inverse: var(--color-green-500);
188
+ --hs-bg-success-secondary: var(--color-green-100);
189
+ --hs-bg-warning-primary: var(--color-yellow-50);
190
+ --hs-bg-warning-primary-inverse: #f4cb00;
191
+ --hs-bg-warning-secondary: var(--color-yellow-100);
192
+ --hs-bg-info-primary: var(--color-blue-100);
193
+ --hs-bg-info-primary-inverse: var(--color-blue-500);
194
+ --hs-bg-neutral-primary: var(--color-neutral-100);
195
+ --hs-bg-neutral-primary-inverse: var(--color-neutral-900);
196
+ --hs-fg-primary: var(--color-neutral-900);
197
+ --hs-fg-primary-inverse: #ffffff;
198
+ --hs-fg-primary-on-brand: var(--color-neutral-50);
199
+ --hs-fg-secondary: var(--color-neutral-700);
200
+ --hs-fg-secondary-inverse: var(--color-neutral-400);
201
+ --hs-fg-secondary-hover: var(--color-neutral-800);
202
+ --hs-fg-secondary-on-brand: var(--color-neutral-100);
203
+ --hs-fg-tertiary: var(--color-neutral-500);
204
+ --hs-fg-tertiary-hover: var(--color-neutral-600);
205
+ --hs-fg-tertiary-on-brand: var(--color-neutral-200);
206
+ --hs-fg-disabled: var(--color-neutral-300);
207
+ --hs-fg-brand-primary: var(--color-brand-500);
208
+ --hs-fg-brand-secondary: var(--color-brand-300);
209
+ --hs-fg-link: var(--color-blue-500);
210
+ --hs-fg-error-primary: var(--color-red-500);
211
+ --hs-fg-error-secondary: var(--color-red-400);
212
+ --hs-fg-success-primary: var(--color-green-500);
213
+ --hs-fg-success-secondary: var(--color-green-400);
214
+ --hs-fg-warning-primary: var(--color-yellow-700);
215
+ --hs-fg-warning-secondary: var(--color-yellow-400);
216
+ --hs-fg-info-primary: var(--color-blue-600);
217
+ --hs-fg-neutral-primary: var(--color-neutral-500);
218
+ --hs-syntax-property: #ea4a35;
219
+ --hs-syntax-string: #405cbf;
220
+ --hs-syntax-number: #00a984;
221
+ --hs-syntax-keyword: #569cd6;
222
+ --hs-syntax-comment: #00a984;
223
+ }
224
+
135
225
  @theme inline {
136
226
  --font-family-sans: "Inter", system-ui, sans-serif;
137
227
  --font-family-mono: "JetBrains Mono", monospace;
138
228
  }
139
229
 
230
+ .dark {
231
+ /* tokens.css overrides */
232
+ --hs-elements-readable: oklch(0.985 0 0);
233
+ --hs-elements-readable-inv: oklch(0.205 0 0);
234
+ --hs-elements-assistive: oklch(0.556 0 0);
235
+ --hs-elements-disabled: oklch(0.371 0 0);
236
+ --hs-surface-0: oklch(0.178 0 0);
237
+ --hs-surface-1: oklch(0.205 0 0);
238
+ --hs-surface-selected: oklch(0.269 0 0);
239
+ --hs-border-default: oklch(1 0 0 / 10%);
240
+ --hs-separator: oklch(1 0 0 / 8%);
241
+
242
+ /* Selection */
243
+ --hs-selection: var(--color-blue-800);
244
+
245
+ /* Text */
246
+ --hs-text-primary: oklch(0.985 0 0);
247
+ --hs-text-secondary: oklch(0.556 0 0);
248
+ --hs-text-secondary-hover: oklch(0.708 0 0);
249
+ --hs-text-primary-on-brand: oklch(0.985 0 0);
250
+ --hs-text-secondary-on-brand: oklch(0.87 0 0);
251
+ --hs-text-tertiary: oklch(0.45 0 0);
252
+ --hs-text-tertiary-hover: oklch(0.556 0 0);
253
+ --hs-text-quaternary: oklch(0.45 0 0);
254
+ --hs-text-quaternary-hover: oklch(0.556 0 0);
255
+ --hs-text-disabled: oklch(0.371 0 0);
256
+ --hs-text-link: var(--color-blue-400);
257
+ --hs-text-link-hover: var(--color-blue-300);
258
+ --hs-text-link-disabled: var(--color-blue-600);
259
+ --hs-text-brand-primary: var(--color-brand-400);
260
+ --hs-text-brand-secondary: var(--color-brand-300);
261
+ --hs-text-brand-secondary-hover: var(--color-brand-200);
262
+ --hs-text-error-primary: var(--color-red-400);
263
+ --hs-text-error-secondary: var(--color-red-300);
264
+ --hs-text-success-primary: var(--color-green-400);
265
+ --hs-text-warning-primary: var(--color-yellow-500);
266
+ --hs-text-info-primary: var(--color-blue-400);
267
+
268
+ /* Borders */
269
+ --hs-border-primary: oklch(1 0 0 / 12%);
270
+ --hs-border-primary-hover: oklch(1 0 0 / 18%);
271
+ --hs-border-secondary: oklch(1 0 0 / 8%);
272
+ --hs-border-separator: oklch(1 0 0 / 8%);
273
+ --hs-border-disabled: oklch(1 0 0 / 5%);
274
+ --hs-border-dark: oklch(0.556 0 0);
275
+
276
+ /* Backgrounds — primary/secondary swapped */
277
+ --hs-bg-primary: #1a1a1a;
278
+ --hs-bg-primary-inverse: oklch(0.985 0 0);
279
+ --hs-bg-secondary: oklch(0.188 0 0);
280
+ --hs-bg-secondary-inverse: oklch(0.556 0 0);
281
+ --hs-bg-secondary-inverse-hover: oklch(0.708 0 0);
282
+ --hs-bg-tertiary: oklch(0.198 0 0);
283
+ --hs-bg-tertiary-inverse: oklch(0.45 0 0);
284
+ --hs-bg-quaternary: oklch(0.269 0 0);
285
+ --hs-bg-overlay: oklch(0.1 0 0);
286
+ --hs-bg-disabled: oklch(0.269 0 0);
287
+ --hs-bg-hover: var(--color-blue-900);
288
+ --hs-bg-dark-tertiary: oklch(0.371 0 0);
289
+ --hs-bg-brand-primary: var(--color-brand-950);
290
+ --hs-bg-brand-primary-inverse: var(--color-brand-400);
291
+ --hs-bg-brand-secondary: var(--color-brand-900);
292
+ --hs-bg-brand-tertiary: var(--color-brand-800);
293
+ --hs-bg-link: var(--color-blue-500);
294
+ --hs-bg-link-hover: var(--color-blue-400);
295
+ --hs-bg-link-disabled: var(--color-blue-600);
296
+ --hs-bg-error-primary: var(--color-red-950);
297
+ --hs-bg-error-primary-inverse: var(--color-red-500);
298
+ --hs-bg-error-primary-inverse-hover: var(--color-red-400);
299
+ --hs-bg-error-secondary: var(--color-red-900);
300
+ --hs-bg-error-tertiary: var(--color-red-800);
301
+ --hs-bg-success-primary: var(--color-green-950);
302
+ --hs-bg-success-primary-inverse: var(--color-green-500);
303
+ --hs-bg-success-secondary: var(--color-green-900);
304
+ --hs-bg-warning-primary: var(--color-yellow-950);
305
+ --hs-bg-warning-primary-inverse: var(--color-yellow-500);
306
+ --hs-bg-warning-secondary: var(--color-yellow-900);
307
+ --hs-bg-info-primary: var(--color-blue-900);
308
+ --hs-bg-info-primary-inverse: var(--color-blue-400);
309
+ --hs-bg-neutral-primary: oklch(0.205 0 0);
310
+ --hs-bg-neutral-primary-inverse: oklch(0.985 0 0);
311
+
312
+ /* Foreground */
313
+ --hs-fg-primary: oklch(0.985 0 0);
314
+ --hs-fg-primary-inverse: oklch(0.205 0 0);
315
+ --hs-fg-primary-on-brand: oklch(0.985 0 0);
316
+ --hs-fg-secondary: oklch(0.708 0 0);
317
+ --hs-fg-secondary-inverse: oklch(0.371 0 0);
318
+ --hs-fg-secondary-hover: oklch(0.87 0 0);
319
+ --hs-fg-secondary-on-brand: oklch(0.87 0 0);
320
+ --hs-fg-tertiary: oklch(0.556 0 0);
321
+ --hs-fg-tertiary-hover: oklch(0.708 0 0);
322
+ --hs-fg-tertiary-on-brand: oklch(0.708 0 0);
323
+ --hs-fg-disabled: oklch(0.371 0 0);
324
+ --hs-fg-brand-primary: var(--color-brand-400);
325
+ --hs-fg-brand-secondary: var(--color-brand-300);
326
+ --hs-fg-link: var(--color-blue-400);
327
+ --hs-fg-error-primary: var(--color-red-400);
328
+ --hs-fg-error-secondary: var(--color-red-300);
329
+ --hs-fg-success-primary: var(--color-green-400);
330
+ --hs-fg-success-secondary: var(--color-green-300);
331
+ --hs-fg-warning-primary: var(--color-yellow-500);
332
+ --hs-fg-warning-secondary: var(--color-yellow-400);
333
+ --hs-fg-info-primary: var(--color-blue-400);
334
+ --hs-fg-neutral-primary: oklch(0.556 0 0);
335
+ --hs-syntax-property: #f87171;
336
+ --hs-syntax-string: #7cacf8;
337
+ --hs-syntax-number: #34d399;
338
+ --hs-syntax-keyword: #7cacf8;
339
+ --hs-syntax-comment: #6b7280;
340
+ }
341
+
140
342
  .no-scrollbar::-webkit-scrollbar {
141
343
  display: none;
142
344
  }
package/src/shadcn/components/ui/checkbox.tsx CHANGED
@@ -23,7 +23,7 @@ const baseCheckboxStyles = cn(
23
23
  "transition-colors",
24
24
  "duration-200",
25
25
  // Default state
26
- "bg-white",
26
+ "bg-bg-primary",
27
27
  "border-border-dark",
28
28
  // Checked state
29
29
  "data-[state=checked]:bg-[var(--color-fg-link)]",
@@ -35,7 +35,7 @@ const baseCheckboxStyles = cn(
35
35
  "data-[state=indeterminate]:text-white",
36
36
  // Disabled states
37
37
  "disabled:cursor-not-allowed",
38
- "disabled:bg-white",
38
+ "disabled:bg-bg-primary",
39
39
  "disabled:border-[var(--color-fg-disabled)]",
40
40
  "disabled:data-[state=checked]:bg-[var(--color-fg-disabled)]",
41
41
  "disabled:data-[state=checked]:border-[var(--color-fg-disabled)]",
package/src/shadcn/components/ui/radio-group.tsx CHANGED
@@ -30,7 +30,7 @@ const baseRadioGroupItemStyles = cn(
30
30
  "active:scale-90",
31
31
  "active:duration-75",
32
32
  // Default state
33
- "bg-white",
33
+ "bg-bg-primary",
34
34
  "border-[1.5px]",
35
35
  "border-solid",
36
36
  "border-border-primary",
@@ -40,7 +40,7 @@ const baseRadioGroupItemStyles = cn(
40
40
  // Disabled states
41
41
  "disabled:cursor-not-allowed",
42
42
  "disabled:active:scale-100",
43
- "disabled:bg-white",
43
+ "disabled:bg-bg-primary",
44
44
  "disabled:border-border-secondary",
45
45
  "disabled:data-[state=checked]:bg-border-secondary",
46
46
  "disabled:data-[state=checked]:border-border-secondary",
package/src/shadcn/shadcn.css CHANGED
@@ -78,7 +78,7 @@
78
78
  }
79
79
 
80
80
  .dark {
81
- --background: oklch(0.145 0 0);
81
+ --background: var(--color-bg-primary);
82
82
  --foreground: oklch(0.985 0 0);
83
83
  --card: oklch(0.205 0 0);
84
84
  --card-foreground: oklch(0.985 0 0);
@@ -101,11 +101,11 @@
101
101
  --chart-3: oklch(0.769 0.188 70.08);
102
102
  --chart-4: oklch(0.627 0.265 303.9);
103
103
  --chart-5: oklch(0.645 0.246 16.439);
104
- --sidebar: oklch(0.205 0 0);
104
+ --sidebar: var(--color-bg-primary);
105
105
  --sidebar-foreground: oklch(0.985 0 0);
106
106
  --sidebar-primary: oklch(0.488 0.243 264.376);
107
107
  --sidebar-primary-foreground: oklch(0.985 0 0);
108
- --sidebar-accent: oklch(0.269 0 0);
108
+ --sidebar-accent: oklch(0.205 0 0);
109
109
  --sidebar-accent-foreground: oklch(0.985 0 0);
110
110
  --sidebar-border: oklch(1 0 0 / 10%);
111
111
  --sidebar-ring: oklch(0.556 0 0);
@@ -116,7 +116,7 @@
116
116
  @apply border-border outline-ring/50;
117
117
  }
118
118
  body {
119
- @apply bg-background text-foreground;
119
+ @apply bg-background text-foreground caret-foreground;
120
120
  font-family: "Inter", system-ui, sans-serif;
121
121
  }
122
122
  }
package/src/tokens.css CHANGED
@@ -147,34 +147,50 @@
147
147
  --corner-corner-m: 6px;
148
148
  --corner-corner-l: 8px;
149
149
  --corner-corner-xs: 2px;
150
- --color-elements-readable: var(--color-neutral-900);
151
150
  --color-cta: var(--color-brand-600);
152
151
  --color-critical-default: var(--color-red-600);
153
- --color-elements-disabled: var(--color-neutral-300);
154
- --color-elements-assistive: var(--color-neutral-500);
155
- --color-surface-0: var(--color-neutral-50);
156
- --color-border-default: var(--color-neutral-200);
157
- --color-surface-selected: var(--color-neutral-200);
158
152
  --color-cta-hover: var(--color-brand-700);
159
153
  --color-critical-hover: var(--color-red-700);
160
- --color-surface-1: var(--color-neutral-100);
161
154
  --color-border-XS-critical: var(--color-red-50);
162
155
  --color-border-XS-critical-hover: var(--color-red-100);
163
156
  --color-elements-green: var(--color-green-600);
164
157
  --color-elements-yellow: var(--color-yellow-500);
165
158
  --color-border-XS-regular: var(--color-blue-300);
166
159
  --color-border-XS-regular-hover: var(--color-blue-400);
167
- --color-separator: var(--color-neutral-200);
168
160
  --color-surface-info: var(--color-blue-50);
169
161
  --color-surface-warning: var(--color-yellow-50);
170
162
  --color-surface-alert: var(--color-red-50);
171
163
  --color-elements-warning: var(--color-yellow-700);
172
164
  --color-code-red: var(--color-red-600);
173
165
  --color-code-blue: var(--color-blue-500);
174
- --color-elements-readable-inv: var(--color-neutral-50);
175
166
  --color-logo-readable: var(--color-neutral-800);
176
167
  --color-elements-links: var(--color-brand-600);
177
168
  --color-elements-info: var(--color-brand-600);
178
169
  --color-elements-alert: var(--color-red-600);
179
170
  --color-illustrations-solid: var(--color-brand-600);
180
171
  }
172
+
173
+ /* Semantic tokens that need dark mode overrides — use @theme inline + :root so .dark can override */
174
+ @theme inline {
175
+ --color-elements-readable: var(--hs-elements-readable);
176
+ --color-elements-readable-inv: var(--hs-elements-readable-inv);
177
+ --color-elements-assistive: var(--hs-elements-assistive);
178
+ --color-elements-disabled: var(--hs-elements-disabled);
179
+ --color-surface-0: var(--hs-surface-0);
180
+ --color-surface-1: var(--hs-surface-1);
181
+ --color-surface-selected: var(--hs-surface-selected);
182
+ --color-border-default: var(--hs-border-default);
183
+ --color-separator: var(--hs-separator);
184
+ }
185
+
186
+ :root {
187
+ --hs-elements-readable: var(--color-neutral-900);
188
+ --hs-elements-readable-inv: var(--color-neutral-50);
189
+ --hs-elements-assistive: var(--color-neutral-500);
190
+ --hs-elements-disabled: var(--color-neutral-300);
191
+ --hs-surface-0: var(--color-neutral-50);
192
+ --hs-surface-1: var(--color-neutral-100);
193
+ --hs-surface-selected: var(--color-neutral-200);
194
+ --hs-border-default: var(--color-neutral-200);
195
+ --hs-separator: var(--color-neutral-200);
196
+ }