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

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 (18) hide show
  1. package/dist/bundle.css +465 -320
  2. package/dist/src/components/code-editor/index.d.ts.map +1 -1
  3. package/dist/src/components/code-editor/index.js +78 -15
  4. package/dist/src/components/code-editor/index.js.map +1 -1
  5. package/dist/src/index.css +293 -91
  6. package/dist/src/shadcn/components/ui/checkbox.js +2 -2
  7. package/dist/src/shadcn/components/ui/checkbox.js.map +1 -1
  8. package/dist/src/shadcn/components/ui/radio-group.js +2 -2
  9. package/dist/src/shadcn/components/ui/radio-group.js.map +1 -1
  10. package/dist/src/shadcn/shadcn.css +4 -4
  11. package/dist/src/tokens.css +25 -9
  12. package/package.json +1 -1
  13. package/src/components/code-editor/index.tsx +76 -15
  14. package/src/index.css +293 -91
  15. package/src/shadcn/components/ui/checkbox.tsx +2 -2
  16. package/src/shadcn/components/ui/radio-group.tsx +2 -2
  17. package/src/shadcn/shadcn.css +4 -4
  18. package/src/tokens.css +25 -9
package/src/components/code-editor/index.tsx CHANGED
@@ -219,6 +219,9 @@ const baseTheme = EditorView.baseTheme({
219
219
  "&.cm-focused": {
220
220
  outline: "none",
221
221
  },
222
+ ".cm-cursor, .cm-dropCursor": {
223
+ borderLeftColor: "var(--color-text-primary)",
224
+ },
222
225
  ".cm-gutter": {
223
226
  fontFamily: "var(--font-family-mono)",
224
227
  },
@@ -247,6 +250,47 @@ const baseTheme = EditorView.baseTheme({
247
250
  },
248
251
  });
249
252
 
253
+ const completionTheme = EditorView.theme({
254
+ ".cm-tooltip.cm-tooltip-autocomplete > ul": {
255
+ maxHeight: "400px",
256
+ },
257
+ ".cm-tooltip.cm-tooltip-autocomplete > ul > li": {
258
+ display: "flex",
259
+ alignItems: "center",
260
+ gap: "8px",
261
+ },
262
+ ".cm-completionLabel": {
263
+ flex: "1",
264
+ minWidth: "0",
265
+ },
266
+ ".cm-completionDetail": {
267
+ color: "var(--color-text-tertiary)",
268
+ fontSize: "12px",
269
+ marginLeft: "auto",
270
+ whiteSpace: "nowrap",
271
+ },
272
+ ".cm-completionInfo": {
273
+ backgroundColor: "var(--color-bg-primary)",
274
+ border: "1px solid var(--color-border-primary)",
275
+ borderRadius: "var(--radius-md)",
276
+ color: "var(--color-text-secondary)",
277
+ fontFamily: "var(--font-family-sans)",
278
+ fontSize: "12px",
279
+ padding: "8px 12px",
280
+ lineHeight: "1.4",
281
+ whiteSpace: "normal",
282
+ maxWidth: "300px",
283
+ },
284
+ ".cm-completion-icon": {
285
+ display: "flex",
286
+ alignItems: "center",
287
+ justifyContent: "center",
288
+ width: "16px",
289
+ height: "16px",
290
+ flexShrink: "0",
291
+ },
292
+ });
293
+
250
294
  const readOnlyTheme = EditorView.theme({
251
295
  "&": {
252
296
  backgroundColor: "var(--color-bg-secondary)",
@@ -534,20 +578,20 @@ const customSearchExtension = [
534
578
  ];
535
579
 
536
580
  const customHighlightStyle = HighlightStyle.define([
537
- { tag: tags.propertyName, color: "#EA4A35" },
538
- { tag: tags.string, color: "#405CBF" },
539
- { tag: tags.number, color: "#00A984" },
540
- { tag: tags.bool, color: "#569cd6" },
541
- { tag: tags.null, color: "#569cd6" },
542
- { tag: tags.keyword, color: "#569cd6" },
543
- { tag: tags.operatorKeyword, color: "#405CBF" },
544
- { tag: tags.controlKeyword, color: "#EA4A35" },
545
- { tag: tags.typeName, color: "#00A984" },
546
- { tag: tags.variableName, color: "#EA4A35" },
547
- { tag: tags.operator, color: "#405CBF" },
548
- { tag: tags.comment, color: "#00A984" },
549
- { tag: tags.lineComment, color: "#00A984" },
550
- { tag: tags.blockComment, color: "#00A984" },
581
+ { tag: tags.propertyName, color: "var(--hs-syntax-property)" },
582
+ { tag: tags.string, color: "var(--hs-syntax-string)" },
583
+ { tag: tags.number, color: "var(--hs-syntax-number)" },
584
+ { tag: tags.bool, color: "var(--hs-syntax-keyword)" },
585
+ { tag: tags.null, color: "var(--hs-syntax-keyword)" },
586
+ { tag: tags.keyword, color: "var(--hs-syntax-keyword)" },
587
+ { tag: tags.operatorKeyword, color: "var(--hs-syntax-string)" },
588
+ { tag: tags.controlKeyword, color: "var(--hs-syntax-property)" },
589
+ { tag: tags.typeName, color: "var(--hs-syntax-number)" },
590
+ { tag: tags.variableName, color: "var(--hs-syntax-property)" },
591
+ { tag: tags.operator, color: "var(--hs-syntax-string)" },
592
+ { tag: tags.comment, color: "var(--hs-syntax-comment)" },
593
+ { tag: tags.lineComment, color: "var(--hs-syntax-comment)" },
594
+ { tag: tags.blockComment, color: "var(--hs-syntax-comment)" },
551
595
  ]);
552
596
 
553
597
  const SQL_KEYWORDS = [
@@ -748,13 +792,27 @@ export function CodeEditor({
748
792
  languageCompartment.current.of([]),
749
793
  bracketMatching(),
750
794
  closeBrackets(),
751
- autocompletion(),
795
+ autocompletion({
796
+ icons: false,
797
+ maxRenderedOptions: 1000,
798
+ addToOptions: [{ render: renderCompletionIcon, position: 20 }],
799
+ optionClass: (_completion) =>
800
+ "!px-2 !py-1 rounded-md aria-selected:!bg-bg-quaternary aria-selected:!text-text-primary hover:!bg-bg-secondary flex items-center gap-2",
801
+ tooltipClass: (_state) =>
802
+ "!bg-bg-primary rounded-md p-2 shadow-md !border-border-primary !typo-body",
803
+ compareCompletions: (a, b) => {
804
+ const aIsProperty = a.type === "property" ? 0 : 1;
805
+ const bIsProperty = b.type === "property" ? 0 : 1;
806
+ return aIsProperty - bIsProperty;
807
+ },
808
+ }),
752
809
  rectangularSelection(),
753
810
  crosshairCursor(),
754
811
  highlightActiveLine(),
755
812
  highlightActiveLineGutter(),
756
813
  highlightSelectionMatches(),
757
814
  themeCompartment.current.of(baseTheme),
815
+ completionTheme,
758
816
  keymap.of([
759
817
  ...closeBracketsKeymap,
760
818
  ...defaultKeymap,
@@ -908,6 +966,9 @@ const editorInputTheme = EditorView.theme({
908
966
  fontSize: "var(--font-size-sm)",
909
967
  color: "var(--color-text-primary)",
910
968
  },
969
+ ".cm-cursor, .cm-dropCursor": {
970
+ borderLeftColor: "var(--color-text-primary)",
971
+ },
911
972
  "&.cm-editor.cm-focused": {
912
973
  outline: "none",
913
974
  },
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
  }