@gsk_poc/components 0.1.1 → 0.1.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 (3) hide show
  1. package/package.json +2 -2
  2. package/styles/theme.css +430 -0
  3. package/styles/tokens.css +807 -807
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gsk_poc/components",
3
- "version": "0.1.1",
3
+ "version": "0.1.3",
4
4
  "description": "GSK custom component library with design tokens",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",
@@ -40,7 +40,7 @@
40
40
  "react-dom": "^18.0.0 || ^19.0.0"
41
41
  },
42
42
  "dependencies": {
43
- "@gsk_poc/untitled-ui-base": "^0.1.1",
43
+ "@gsk_poc/untitled-ui-base": "^0.1.3",
44
44
  "@tailwindcss/vite": "^4.1.17",
45
45
  "react-is": "^19.2.1",
46
46
  "tailwind-merge": "^3.4.0",
package/styles/theme.css ADDED
@@ -0,0 +1,430 @@
1
+ /**
2
+ * Theme CSS - Complete Token-Driven Version
3
+ * Auto-generated from design tokens
4
+ * All values reference tokens.css
5
+ */
6
+
7
+ @theme {
8
+ /* FONT FAMILY */
9
+ --font-body: var(--font-family-body);
10
+ --font-display: var(--font-family-display);
11
+ --font-mono: ui-monospace, "Roboto Mono", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
12
+
13
+ /* FONT SIZE & LINE HEIGHT */
14
+ --text-xs: var(--font-size-text-xs);
15
+ --text-xs--line-height: var(--line-height-text-xs);
16
+ --text-sm: var(--font-size-text-sm);
17
+ --text-sm--line-height: var(--line-height-text-sm);
18
+ --text-md: var(--font-size-text-md);
19
+ --text-md--line-height: var(--line-height-text-md);
20
+ --text-lg: var(--font-size-text-lg);
21
+ --text-lg--line-height: var(--line-height-text-lg);
22
+ --text-xl: var(--font-size-text-xl);
23
+ --text-xl--line-height: var(--line-height-text-xl);
24
+ --text-display-xs: var(--font-size-display-xs);
25
+ --text-display-xs--line-height: var(--line-height-display-xs);
26
+ --text-display-sm: var(--font-size-display-sm);
27
+ --text-display-sm--line-height: var(--line-height-display-sm);
28
+ --text-display-md: var(--font-size-display-md);
29
+ --text-display-md--line-height: var(--line-height-display-md);
30
+ --text-display-lg: var(--font-size-display-lg);
31
+ --text-display-lg--line-height: var(--line-height-display-lg);
32
+ --text-display-xl: var(--font-size-display-xl);
33
+ --text-display-xl--line-height: var(--line-height-display-xl);
34
+ --text-display-2xl: var(--font-size-display-2xl);
35
+ --text-display-2xl--line-height: var(--line-height-display-2xl);
36
+
37
+ /* MAX WIDTH */
38
+ --max-width-container: 1280px;
39
+
40
+ /* BREAKPOINTS */
41
+ --breakpoint-xxs: 320px;
42
+ --breakpoint-xs: 600px;
43
+
44
+ /* RADIUS */
45
+ --radius-none: 0px;
46
+ --radius-xs: 0.125rem;
47
+ --radius-sm: 0.25rem;
48
+ --radius-DEFAULT: 0.25rem;
49
+ --radius-md: 0.375rem;
50
+ --radius-lg: 0.5rem;
51
+ --radius-xl: 0.75rem;
52
+ --radius-2xl: 1rem;
53
+ --radius-3xl: 1.5rem;
54
+ --radius-full: 9999px;
55
+
56
+ /* SHADOW */
57
+ --shadow-xs: 0px 1px 2px rgba(10, 13, 18, 0.05);
58
+ --shadow-sm: 0px 1px 3px rgba(10, 13, 18, 0.1), 0px 1px 2px -1px rgba(10, 13, 18, 0.1);
59
+ --shadow-md: 0px 4px 6px -1px rgba(10, 13, 18, 0.1), 0px 2px 4px -2px rgba(10, 13, 18, 0.06);
60
+ --shadow-lg: 0px 12px 16px -4px rgba(10, 13, 18, 0.08), 0px 4px 6px -2px rgba(10, 13, 18, 0.03), 0px 2px 2px -1px rgba(10, 13, 18, 0.04);
61
+ --shadow-xl: 0px 20px 24px -4px rgba(10, 13, 18, 0.08), 0px 8px 8px -4px rgba(10, 13, 18, 0.03), 0px 3px 3px -1.5px rgba(10, 13, 18, 0.04);
62
+ --shadow-2xl: 0px 24px 48px -12px rgba(10, 13, 18, 0.18), 0px 4px 4px -2px rgba(10, 13, 18, 0.04);
63
+ --shadow-3xl: 0px 32px 64px -12px rgba(10, 13, 18, 0.14), 0px 5px 5px -2.5px rgba(10, 13, 18, 0.04);
64
+ --shadow-skeumorphic: 0px 0px 0px 1px rgba(10, 13, 18, 0.18) inset, 0px -2px 0px 0px rgba(10, 13, 18, 0.05) inset;
65
+ --shadow-xs-skeumorphic: var(--shadow-skeumorphic), var(--shadow-xs);
66
+
67
+ /* ANIMATIONS */
68
+ --animate-marquee: marquee 60s linear infinite;
69
+ --animate-caret-blink: caret-blink 1s infinite;
70
+
71
+ @keyframes marquee {
72
+ 0% { transform: translateX(0); }
73
+ 100% { transform: translateX(-100%); }
74
+ }
75
+
76
+ @keyframes caret-blink {
77
+ 0%, 50% { opacity: 1; }
78
+ 51%, 100% { opacity: 0; }
79
+ }
80
+
81
+ /* BASE COLORS */
82
+ --color-transparent: var(--colors-base-transparent);
83
+ --color-white: var(--colors-base-white);
84
+ --color-black: var(--colors-base-black);
85
+ --color-alpha-white: var(--colors-base-white);
86
+ --color-alpha-black: var(--colors-base-black);
87
+
88
+ /* BRAND COLORS */
89
+ --color-brand-25: var(--colors-brand-25);
90
+ --color-brand-50: var(--colors-brand-50);
91
+ --color-brand-100: var(--colors-brand-100);
92
+ --color-brand-200: var(--colors-brand-200);
93
+ --color-brand-300: var(--colors-brand-300);
94
+ --color-brand-400: var(--colors-brand-400);
95
+ --color-brand-500: var(--colors-brand-500);
96
+ --color-brand-600: var(--colors-brand-600);
97
+ --color-brand-700: var(--colors-brand-700);
98
+ --color-brand-800: var(--colors-brand-800);
99
+ --color-brand-900: var(--colors-brand-900);
100
+ --color-brand-950: var(--colors-brand-950);
101
+
102
+ /* ERROR COLORS */
103
+ --color-error-25: var(--colors-error-25);
104
+ --color-error-50: var(--colors-error-50);
105
+ --color-error-100: var(--colors-error-100);
106
+ --color-error-200: var(--colors-error-200);
107
+ --color-error-300: var(--colors-error-300);
108
+ --color-error-400: var(--colors-error-400);
109
+ --color-error-500: var(--colors-error-500);
110
+ --color-error-600: var(--colors-error-600);
111
+ --color-error-700: var(--colors-error-700);
112
+ --color-error-800: var(--colors-error-800);
113
+ --color-error-900: var(--colors-error-900);
114
+ --color-error-950: var(--colors-error-950);
115
+
116
+ /* WARNING COLORS */
117
+ --color-warning-25: var(--colors-warning-25);
118
+ --color-warning-50: var(--colors-warning-50);
119
+ --color-warning-100: var(--colors-warning-100);
120
+ --color-warning-200: var(--colors-warning-200);
121
+ --color-warning-300: var(--colors-warning-300);
122
+ --color-warning-400: var(--colors-warning-400);
123
+ --color-warning-500: var(--colors-warning-500);
124
+ --color-warning-600: var(--colors-warning-600);
125
+ --color-warning-700: var(--colors-warning-700);
126
+ --color-warning-800: var(--colors-warning-800);
127
+ --color-warning-900: var(--colors-warning-900);
128
+ --color-warning-950: var(--colors-warning-950);
129
+
130
+ /* SUCCESS COLORS */
131
+ --color-success-25: var(--colors-success-25);
132
+ --color-success-50: var(--colors-success-50);
133
+ --color-success-100: var(--colors-success-100);
134
+ --color-success-200: var(--colors-success-200);
135
+ --color-success-300: var(--colors-success-300);
136
+ --color-success-400: var(--colors-success-400);
137
+ --color-success-500: var(--colors-success-500);
138
+ --color-success-600: var(--colors-success-600);
139
+ --color-success-700: var(--colors-success-700);
140
+ --color-success-800: var(--colors-success-800);
141
+ --color-success-900: var(--colors-success-900);
142
+ --color-success-950: var(--colors-success-950);
143
+
144
+ /* GRAY COLORS (Light Mode) */
145
+ --color-gray-25: var(--colors-gray-light-mode-25);
146
+ --color-gray-50: var(--colors-gray-light-mode-50);
147
+ --color-gray-100: var(--colors-gray-light-mode-100);
148
+ --color-gray-200: var(--colors-gray-light-mode-200);
149
+ --color-gray-300: var(--colors-gray-light-mode-300);
150
+ --color-gray-400: var(--colors-gray-light-mode-400);
151
+ --color-gray-500: var(--colors-gray-light-mode-500);
152
+ --color-gray-600: var(--colors-gray-light-mode-600);
153
+ --color-gray-700: var(--colors-gray-light-mode-700);
154
+ --color-gray-800: var(--colors-gray-light-mode-800);
155
+ --color-gray-900: var(--colors-gray-light-mode-900);
156
+ --color-gray-950: var(--colors-gray-light-mode-950);
157
+
158
+ /* TEXT COLORS */
159
+ --color-text-white: var(--color-white);
160
+ --color-text-primary: var(--colors-text-text-primary-900);
161
+ --color-text-secondary: var(--colors-text-text-secondary-700);
162
+ --color-text-secondary_hover: var(--colors-text-text-secondary-hover);
163
+ --color-text-tertiary: var(--colors-text-text-tertiary-600);
164
+ --color-text-tertiary_hover: var(--colors-text-text-tertiary-hover);
165
+ --color-text-quaternary: var(--colors-text-text-quaternary-500);
166
+ --color-text-error-primary: var(--colors-text-text-error-primary-600);
167
+ --color-text-error-primary_hover: var(--colors-text-text-error-primary-600);
168
+ --color-text-warning-primary: var(--colors-text-text-warning-primary-600);
169
+ --color-text-success-primary: var(--colors-text-text-success-primary-600);
170
+ --color-text-disabled: var(--colors-text-text-disabled);
171
+ --color-text-placeholder: var(--colors-text-text-placeholder);
172
+ --color-text-placeholder_subtle: var(--colors-text-text-placeholder-subtle);
173
+ --color-text-primary_on-brand: var(--colors-text-text-primary-on-brand);
174
+ --color-text-secondary_on-brand: var(--colors-text-text-secondary-on-brand);
175
+ --color-text-tertiary_on-brand: var(--colors-text-text-tertiary-on-brand);
176
+ --color-text-quaternary_on-brand: var(--colors-text-text-quaternary-on-brand);
177
+ --color-text-brand-primary: var(--colors-text-text-brand-primary-900);
178
+ --color-text-brand-secondary: var(--colors-text-text-brand-secondary-700);
179
+ --color-text-brand-secondary_hover: var(--colors-text-text-brand-secondary-hover);
180
+ --color-text-brand-tertiary: var(--colors-text-text-brand-tertiary-600);
181
+ --color-text-brand-tertiary_alt: var(--colors-text-text-brand-tertiary-alt);
182
+ --color-text-editor-icon-fg: var(--colors-text-text-placeholder);
183
+ --color-text-editor-icon-fg_active: var(--colors-text-text-quaternary-500);
184
+
185
+ /* BORDER COLORS */
186
+ --color-border-primary: var(--colors-border-border-primary);
187
+ --color-border-secondary: var(--colors-border-border-secondary);
188
+ --color-border-secondary_alt: var(--colors-border-border-secondary-alt);
189
+ --color-border-tertiary: var(--colors-border-border-tertiary);
190
+ --color-border-error: var(--colors-border-border-error);
191
+ --color-border-error_subtle: var(--colors-border-border-error-subtle);
192
+ --color-border-disabled: var(--colors-border-border-disabled);
193
+ --color-border-disabled_subtle: var(--colors-border-border-disabled-subtle);
194
+ --color-border-brand: var(--colors-border-border-brand);
195
+ --color-border-brand_alt: var(--colors-border-border-brand-alt);
196
+
197
+ /* FOREGROUND COLORS */
198
+ --color-fg-white: var(--color-white);
199
+ --color-fg-primary: var(--colors-foreground-fg-primary-900);
200
+ --color-fg-secondary: var(--colors-foreground-fg-secondary-700);
201
+ --color-fg-secondary_hover: var(--colors-foreground-fg-secondary-hover);
202
+ --color-fg-tertiary: var(--colors-foreground-fg-tertiary-600);
203
+ --color-fg-tertiary_hover: var(--colors-foreground-fg-tertiary-hover);
204
+ --color-fg-quaternary: var(--colors-foreground-fg-quaternary-400);
205
+ --color-fg-quaternary_hover: var(--colors-foreground-fg-quaternary-hover);
206
+ --color-fg-warning-primary: var(--colors-foreground-fg-warning-primary);
207
+ --color-fg-warning-secondary: var(--colors-foreground-fg-warning-secondary);
208
+ --color-fg-success-primary: var(--colors-foreground-fg-success-primary);
209
+ --color-fg-success-secondary: var(--colors-foreground-fg-success-secondary);
210
+ --color-fg-error-primary: var(--colors-foreground-fg-error-primary);
211
+ --color-fg-error-secondary: var(--colors-foreground-fg-error-secondary);
212
+ --color-fg-disabled: var(--colors-foreground-fg-disabled);
213
+ --color-fg-disabled_subtle: var(--colors-foreground-fg-disabled-subtle);
214
+ --color-fg-brand-primary: var(--colors-foreground-fg-brand-primary-600);
215
+ --color-fg-brand-primary_alt: var(--colors-foreground-fg-brand-primary-alt);
216
+ --color-fg-brand-secondary: var(--colors-foreground-fg-brand-secondary-500);
217
+ --color-fg-brand-secondary_alt: var(--colors-foreground-fg-brand-secondary-alt);
218
+ --color-fg-brand-secondary_hover: var(--colors-foreground-fg-brand-secondary-hover);
219
+
220
+ /* BACKGROUND COLORS */
221
+ --color-bg-primary: var(--colors-background-bg-primary);
222
+ --color-bg-primary-solid: var(--colors-background-bg-primary-solid);
223
+ --color-bg-primary_alt: var(--colors-background-bg-primary-alt);
224
+ --color-bg-primary_hover: var(--colors-background-bg-primary-hover);
225
+ --color-bg-secondary: var(--colors-background-bg-secondary);
226
+ --color-bg-secondary-solid: var(--colors-background-bg-secondary-solid);
227
+ --color-bg-secondary_subtle: var(--colors-background-bg-secondary-subtle);
228
+ --color-bg-secondary_hover: var(--colors-background-bg-secondary-hover);
229
+ --color-bg-secondary_alt: var(--colors-background-bg-secondary-alt);
230
+ --color-bg-tertiary: var(--colors-background-bg-tertiary);
231
+ --color-bg-quaternary: var(--colors-background-bg-quaternary);
232
+ --color-bg-error-primary: var(--colors-background-bg-error-primary);
233
+ --color-bg-error-secondary: var(--colors-background-bg-error-secondary);
234
+ --color-bg-error-solid: var(--colors-background-bg-error-solid);
235
+ --color-bg-error-solid_hover: var(--colors-background-bg-error-solid-hover);
236
+ --color-bg-warning-primary: var(--colors-background-bg-warning-primary);
237
+ --color-bg-warning-secondary: var(--colors-background-bg-warning-secondary);
238
+ --color-bg-warning-solid: var(--colors-background-bg-warning-solid);
239
+ --color-bg-success-primary: var(--colors-background-bg-success-primary);
240
+ --color-bg-success-secondary: var(--colors-background-bg-success-secondary);
241
+ --color-bg-success-solid: var(--colors-background-bg-success-solid);
242
+ --color-bg-disabled: var(--colors-background-bg-disabled);
243
+ --color-bg-disabled_subtle: var(--colors-background-bg-disabled-subtle);
244
+ --color-bg-active: var(--colors-background-bg-active);
245
+ --color-bg-overlay: var(--colors-background-bg-overlay);
246
+ --color-bg-brand-primary: var(--colors-background-bg-brand-primary);
247
+ --color-bg-brand-primary_alt: var(--colors-background-bg-brand-primary-alt);
248
+ --color-bg-brand-secondary: var(--colors-background-bg-brand-secondary);
249
+ --color-bg-brand-solid: var(--colors-background-bg-brand-solid);
250
+ --color-bg-brand-solid_hover: var(--colors-background-bg-brand-solid-hover);
251
+ --color-bg-brand-section: var(--colors-background-bg-brand-section);
252
+ --color-bg-brand-section_subtle: var(--colors-background-bg-brand-section-subtle);
253
+
254
+ /* COMPONENT COLORS */
255
+ --color-app-store-badge-border: rgb(166 166 166);
256
+ --color-avatar-bg: var(--color-gray-100);
257
+ --color-avatar-contrast-border: rgb(0 0 0 / 0.08);
258
+ --color-avatar-profile-photo-border: var(--color-white);
259
+ --color-avatar-styles-bg-neutral: rgb(224 224 224);
260
+ --color-button-destructive-primary-icon: var(--component-colors-components-buttons-button-destructive-primary-icon);
261
+ --color-button-destructive-primary-icon_hover: var(--component-colors-components-buttons-button-destructive-primary-icon-hover);
262
+ --color-button-primary-icon: var(--component-colors-components-buttons-button-primary-icon);
263
+ --color-button-primary-icon_hover: var(--component-colors-components-buttons-button-primary-icon-hover);
264
+ --color-featured-icon-light-fg-brand: var(--colors-foreground-fg-brand-primary-600);
265
+ --color-featured-icon-light-fg-error: var(--colors-text-text-error-primary-600);
266
+ --color-featured-icon-light-fg-gray: var(--colors-text-text-quaternary-500);
267
+ --color-featured-icon-light-fg-success: var(--colors-text-text-success-primary-600);
268
+ --color-featured-icon-light-fg-warning: var(--colors-text-text-warning-primary-600);
269
+ --color-focus-ring-error: var(--colors-effects-focus-rings-focus-ring-error);
270
+ --color-focus-ring: var(--colors-effects-focus-rings-focus-ring);
271
+ --color-footer-button-fg: var(--colors-brand-200);
272
+ --color-footer-button-fg_hover: var(--color-white);
273
+ --color-icon-fg-brand: var(--colors-foreground-fg-brand-primary-600);
274
+ --color-icon-fg-brand_on-brand: var(--colors-brand-200);
275
+ --color-screen-mockup-border: var(--color-gray-900);
276
+ --color-slider-handle-bg: var(--color-white);
277
+ --color-slider-handle-border: var(--colors-foreground-fg-brand-primary-600);
278
+ --color-toggle-border: var(--colors-border-border-primary);
279
+ --color-toggle-button-fg_disabled: var(--color-gray-50);
280
+ --color-toggle-slim-border_pressed-hover: var(--color-bg-brand-solid_hover);
281
+ --color-toggle-slim-border_pressed: var(--color-bg-brand-solid);
282
+ --color-tooltip-supporting-text: var(--colors-border-border-primary);
283
+
284
+ /* BACKGROUND PROPERTY COLORS (Tailwind utilities) */
285
+ --background-color-primary: var(--color-bg-primary);
286
+ --background-color-primary-solid: var(--color-bg-primary-solid);
287
+ --background-color-primary_alt: var(--color-bg-primary_alt);
288
+ --background-color-primary_hover: var(--color-bg-primary_hover);
289
+ --background-color-secondary: var(--color-bg-secondary);
290
+ --background-color-secondary-solid: var(--color-bg-secondary-solid);
291
+ --background-color-secondary_alt: var(--color-bg-secondary_alt);
292
+ --background-color-secondary_hover: var(--color-bg-secondary_hover);
293
+ --background-color-secondary_subtle: var(--color-bg-secondary_subtle);
294
+ --background-color-tertiary: var(--color-bg-tertiary);
295
+ --background-color-quaternary: var(--color-bg-quaternary);
296
+ --background-color-brand-solid: var(--color-bg-brand-solid);
297
+ --background-color-active: var(--color-bg-active);
298
+ --background-color-disabled: var(--color-bg-disabled);
299
+ --background-color-disabled_subtle: var(--color-bg-disabled_subtle);
300
+ --background-color-overlay: var(--color-bg-overlay);
301
+ --background-color-brand-primary: var(--color-bg-brand-primary);
302
+ --background-color-brand-primary_alt: var(--color-bg-brand-primary_alt);
303
+ --background-color-brand-secondary: var(--color-bg-brand-secondary);
304
+ --background-color-brand-solid_hover: var(--color-bg-brand-solid_hover);
305
+ --background-color-brand-section: var(--color-bg-brand-section);
306
+ --background-color-brand-section_subtle: var(--color-bg-brand-section_subtle);
307
+ --background-color-error-primary: var(--color-bg-error-primary);
308
+ --background-color-error-secondary: var(--color-bg-error-secondary);
309
+ --background-color-error-solid: var(--color-bg-error-solid);
310
+ --background-color-error-solid_hover: var(--color-bg-error-solid_hover);
311
+ --background-color-warning-primary: var(--color-bg-warning-primary);
312
+ --background-color-warning-secondary: var(--color-bg-warning-secondary);
313
+ --background-color-warning-solid: var(--color-bg-warning-solid);
314
+ --background-color-success-primary: var(--color-bg-success-primary);
315
+ --background-color-success-secondary: var(--color-bg-success-secondary);
316
+ --background-color-border-tertiary: var(--color-border-tertiary);
317
+ --background-color-success-solid: var(--color-bg-success-solid);
318
+ --background-color-border-brand: var(--color-border-brand);
319
+ --background-color-border-brand_alt: var(--color-border-brand_alt);
320
+
321
+ /* TEXT PROPERTY COLORS */
322
+ --text-color-primary: var(--color-text-primary);
323
+ --text-color-primary_on-brand: var(--color-text-primary_on-brand);
324
+ --text-color-secondary: var(--color-text-secondary);
325
+ --text-color-secondary_hover: var(--color-text-secondary_hover);
326
+ --text-color-secondary_on-brand: var(--color-text-secondary_on-brand);
327
+ --text-color-tertiary: var(--color-text-tertiary);
328
+ --text-color-tertiary_hover: var(--color-text-tertiary_hover);
329
+ --text-color-tertiary_on-brand: var(--color-text-tertiary_on-brand);
330
+ --text-color-quaternary: var(--color-text-quaternary);
331
+ --text-color-quaternary_on-brand: var(--color-text-quaternary_on-brand);
332
+ --text-color-disabled: var(--color-text-disabled);
333
+ --text-color-placeholder: var(--color-text-placeholder);
334
+ --text-color-placeholder_subtle: var(--color-text-placeholder_subtle);
335
+ --text-color-brand-primary: var(--color-text-brand-primary);
336
+ --text-color-brand-secondary: var(--color-text-brand-secondary);
337
+ --text-color-brand-secondary_hover: var(--color-text-brand-secondary_hover);
338
+ --text-color-brand-tertiary: var(--color-text-brand-tertiary);
339
+ --text-color-brand-tertiary_alt: var(--color-text-brand-tertiary_alt);
340
+ --text-color-error-primary: var(--color-text-error-primary);
341
+ --text-color-error-primary_hover: var(--color-text-error-primary_hover);
342
+ --text-color-warning-primary: var(--color-text-warning-primary);
343
+ --text-color-success-primary: var(--color-text-success-primary);
344
+ --text-color-tooltip-supporting-text: var(--color-tooltip-supporting-text);
345
+
346
+ /* BORDER PROPERTY COLORS */
347
+ --border-color-primary: var(--color-border-primary);
348
+ --border-color-secondary: var(--color-border-secondary);
349
+ --border-color-secondary_alt: var(--color-border-secondary_alt);
350
+ --border-color-tertiary: var(--color-border-tertiary);
351
+ --border-color-disabled: var(--color-border-disabled);
352
+ --border-color-disabled_subtle: var(--color-border-disabled_subtle);
353
+ --border-color-error: var(--color-border-error);
354
+ --border-color-error_subtle: var(--color-border-error_subtle);
355
+ --border-color-brand: var(--color-border-brand);
356
+ --border-color-brand_alt: var(--color-border-brand_alt);
357
+ --border-color-brand-solid: var(--color-bg-brand-solid);
358
+ --border-color-brand-solid_hover: var(--color-bg-brand-solid_hover);
359
+
360
+ /* RING PROPERTY COLORS */
361
+ --ring-color-primary: var(--color-border-primary);
362
+ --ring-color-secondary: var(--color-border-secondary);
363
+ --ring-color-secondary_alt: var(--color-border-secondary_alt);
364
+ --ring-color-tertiary: var(--color-border-tertiary);
365
+ --ring-color-error: var(--color-border-error);
366
+ --ring-color-error_subtle: var(--color-border-error_subtle);
367
+ --ring-color-disabled: var(--color-border-disabled);
368
+ --ring-color-disabled_subtle: var(--color-border-disabled_subtle);
369
+ --ring-color-brand: var(--color-border-brand);
370
+ --ring-color-brand-solid: var(--color-bg-brand-solid);
371
+ --ring-color-brand-solid_hover: var(--color-bg-brand-solid_hover);
372
+ --ring-color-brand_alt: var(--color-border-brand_alt);
373
+ --ring-color-bg-brand-solid: var(--color-bg-brand-solid);
374
+
375
+ /* OUTLINE PROPERTY COLORS */
376
+ --outline-color-primary: var(--color-border-primary);
377
+ --outline-color-secondary: var(--color-border-secondary);
378
+ --outline-color-secondary_alt: var(--color-border-secondary_alt);
379
+ --outline-color-tertiary: var(--color-border-tertiary);
380
+ --outline-color-error: var(--color-border-error);
381
+ --outline-color-error_subtle: var(--color-border-error_subtle);
382
+ --outline-color-disabled: var(--color-border-disabled);
383
+ --outline-color-disabled_subtle: var(--color-border-disabled_subtle);
384
+ --outline-color-brand: var(--color-border-brand);
385
+ --outline-color-brand-solid: var(--color-bg-brand-solid);
386
+ --outline-color-brand-solid_hover: var(--color-bg-brand-solid_hover);
387
+ --outline-color-brand_alt: var(--color-border-brand_alt);
388
+ }
389
+
390
+ @layer base {
391
+ /* DARK MODE VARIABLES */
392
+ .dark-mode {
393
+ --color-alpha-white: rgb(12 14 18);
394
+ --color-alpha-black: rgb(255 255 255);
395
+
396
+ /* Gray colors in dark mode */
397
+ --color-gray-25: var(--colors-gray-dark-mode-25);
398
+ --color-gray-50: var(--colors-gray-dark-mode-50);
399
+ --color-gray-100: var(--colors-gray-dark-mode-100);
400
+ --color-gray-200: var(--colors-gray-dark-mode-200);
401
+ --color-gray-300: var(--colors-gray-dark-mode-300);
402
+ --color-gray-400: var(--colors-gray-dark-mode-400);
403
+ --color-gray-500: var(--colors-gray-dark-mode-500);
404
+ --color-gray-600: var(--colors-gray-dark-mode-600);
405
+ --color-gray-700: var(--colors-gray-dark-mode-700);
406
+ --color-gray-800: var(--colors-gray-dark-mode-800);
407
+ --color-gray-900: var(--colors-gray-dark-mode-900);
408
+ --color-gray-950: var(--colors-gray-dark-mode-950);
409
+
410
+ /* Text colors in dark mode */
411
+ --color-text-primary: var(--color-gray-50);
412
+ --color-text-secondary: var(--color-gray-300);
413
+ --color-text-secondary_hover: var(--color-gray-200);
414
+ --color-text-tertiary: var(--color-gray-400);
415
+ --color-text-tertiary_hover: var(--color-gray-300);
416
+ --color-text-quaternary: var(--color-gray-400);
417
+
418
+ /* Background in dark mode */
419
+ --color-bg-primary: var(--color-gray-950);
420
+ --color-bg-secondary: var(--color-gray-900);
421
+ --color-bg-tertiary: var(--color-gray-800);
422
+ --color-bg-brand-solid_hover: var(--colors-brand-500);
423
+
424
+ /* Update Tailwind utilities for dark mode */
425
+ --background-color-brand-solid_hover: var(--color-bg-brand-solid_hover);
426
+ --border-color-brand-solid_hover: var(--color-bg-brand-solid_hover);
427
+ --ring-color-brand-solid_hover: var(--color-bg-brand-solid_hover);
428
+ --outline-color-brand-solid_hover: var(--color-bg-brand-solid_hover);
429
+ }
430
+ }