@gsk_poc/untitled-ui-base 0.1.15 → 0.1.17

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 +1 -1
  2. package/styles/styles/theme.css +0 -430
  3. package/styles/styles/tokens.css +0 -807
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gsk_poc/untitled-ui-base",
3
- "version": "0.1.15",
3
+ "version": "0.1.17",
4
4
  "description": "GSK wrapper for Untitled UI React components with custom design tokens",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.js",
package/styles/styles/theme.css DELETED
@@ -1,430 +0,0 @@
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
- }
package/styles/styles/tokens.css DELETED
@@ -1,807 +0,0 @@
1
- /**
2
- * Do not edit directly, this file was auto-generated.
3
- */
4
-
5
- :root {
6
- --colors-base-white: #ffffff;
7
- --colors-base-black: #000000;
8
- --colors-base-transparent: rgba(255, 255, 255, 0);
9
- --colors-gray-light-mode-25: #fdfdfc;
10
- --colors-gray-light-mode-50: #f7f6f5;
11
- --colors-gray-light-mode-100: #f0efed;
12
- --colors-gray-light-mode-200: #e4e3e1;
13
- --colors-gray-light-mode-300: #d7d3d0;
14
- --colors-gray-light-mode-400: #a9a29d;
15
- --colors-gray-light-mode-500: #79716b;
16
- --colors-gray-light-mode-600: #57534e;
17
- --colors-gray-light-mode-700: #44403c;
18
- --colors-gray-light-mode-800: #292524;
19
- --colors-gray-light-mode-900: #151515;
20
- --colors-gray-light-mode-950: #151515;
21
- --colors-gray-dark-mode-25: #fafafa;
22
- --colors-gray-dark-mode-50: #f7f7f7;
23
- --colors-gray-dark-mode-100: #f0f0f1;
24
- --colors-gray-dark-mode-200: #ececed;
25
- --colors-gray-dark-mode-300: #cecfd2;
26
- --colors-gray-dark-mode-400: #94979c;
27
- --colors-gray-dark-mode-500: #85888e;
28
- --colors-gray-dark-mode-600: #61656c;
29
- --colors-gray-dark-mode-700: #373a41;
30
- --colors-gray-dark-mode-800: #22262f;
31
- --colors-gray-dark-mode-900: #13161b;
32
- --colors-gray-dark-mode-950: #0c0e12;
33
- --colors-gray-dark-mode-alpha-25: rgba(255, 255, 255, 0.98);
34
- --colors-gray-dark-mode-alpha-50: rgba(255, 255, 255, 0.96);
35
- --colors-gray-dark-mode-alpha-100: rgba(255, 255, 255, 0.94);
36
- --colors-gray-dark-mode-alpha-200: rgba(255, 255, 255, 0.92);
37
- --colors-gray-dark-mode-alpha-300: rgba(255, 255, 255, 0.8);
38
- --colors-gray-dark-mode-alpha-400: rgba(255, 255, 255, 0.56);
39
- --colors-gray-dark-mode-alpha-500: rgba(255, 255, 255, 0.5);
40
- --colors-gray-dark-mode-alpha-600: rgba(255, 255, 255, 0.35);
41
- --colors-gray-dark-mode-alpha-700: rgba(255, 255, 255, 0.16);
42
- --colors-gray-dark-mode-alpha-800: rgba(255, 255, 255, 0.08);
43
- --colors-gray-dark-mode-alpha-900: rgba(255, 255, 255, 0.04);
44
- --colors-gray-dark-mode-alpha-950: rgba(255, 255, 255, 0);
45
- --colors-gray-blue-25: #fcfcfd;
46
- --colors-gray-blue-50: #f8f9fc;
47
- --colors-gray-blue-100: #eaecf5;
48
- --colors-gray-blue-200: #d5d9eb;
49
- --colors-gray-blue-300: #b3b8db;
50
- --colors-gray-blue-400: #717bbc;
51
- --colors-gray-blue-500: #4e5ba6;
52
- --colors-gray-blue-600: #3e4784;
53
- --colors-gray-blue-700: #363f72;
54
- --colors-gray-blue-800: #293056;
55
- --colors-gray-blue-900: #101323;
56
- --colors-gray-blue-950: #0d0f1c;
57
- --colors-gray-cool-25: #fcfcfd;
58
- --colors-gray-cool-50: #f9f9fb;
59
- --colors-gray-cool-100: #eff1f5;
60
- --colors-gray-cool-200: #dcdfea;
61
- --colors-gray-cool-300: #b9c0d4;
62
- --colors-gray-cool-400: #7d89b0;
63
- --colors-gray-cool-500: #5d6b98;
64
- --colors-gray-cool-600: #4a5578;
65
- --colors-gray-cool-700: #404968;
66
- --colors-gray-cool-800: #30374f;
67
- --colors-gray-cool-900: #111322;
68
- --colors-gray-cool-950: #0e101b;
69
- --colors-gray-modern-25: #fcfcfd;
70
- --colors-gray-modern-50: #f8fafc;
71
- --colors-gray-modern-100: #eef2f6;
72
- --colors-gray-modern-200: #e3e8ef;
73
- --colors-gray-modern-300: #cdd5df;
74
- --colors-gray-modern-400: #9aa4b2;
75
- --colors-gray-modern-500: #697586;
76
- --colors-gray-modern-600: #4b5565;
77
- --colors-gray-modern-700: #364152;
78
- --colors-gray-modern-800: #202939;
79
- --colors-gray-modern-900: #121926;
80
- --colors-gray-modern-950: #0d121c;
81
- --colors-gray-neutral-25: #fcfcfd;
82
- --colors-gray-neutral-50: #f9fafb;
83
- --colors-gray-neutral-100: #f3f4f6;
84
- --colors-gray-neutral-200: #e5e7eb;
85
- --colors-gray-neutral-300: #d2d6db;
86
- --colors-gray-neutral-400: #9da4ae;
87
- --colors-gray-neutral-500: #6c737f;
88
- --colors-gray-neutral-600: #4d5761;
89
- --colors-gray-neutral-700: #384250;
90
- --colors-gray-neutral-800: #1f2a37;
91
- --colors-gray-neutral-900: #111927;
92
- --colors-gray-neutral-950: #0d121c;
93
- --colors-gray-iron-25: #fcfcfc;
94
- --colors-gray-iron-50: #fafafa;
95
- --colors-gray-iron-100: #f4f4f5;
96
- --colors-gray-iron-200: #e4e4e7;
97
- --colors-gray-iron-300: #d1d1d6;
98
- --colors-gray-iron-400: #a0a0ab;
99
- --colors-gray-iron-500: #70707b;
100
- --colors-gray-iron-600: #51525c;
101
- --colors-gray-iron-700: #3f3f46;
102
- --colors-gray-iron-800: #26272b;
103
- --colors-gray-iron-900: #1a1a1e;
104
- --colors-gray-iron-950: #131316;
105
- --colors-gray-true-25: #fcfcfc;
106
- --colors-gray-true-50: #f7f7f7;
107
- --colors-gray-true-100: #f5f5f5;
108
- --colors-gray-true-200: #e5e5e5;
109
- --colors-gray-true-300: #d6d6d6;
110
- --colors-gray-true-400: #a3a3a3;
111
- --colors-gray-true-500: #737373;
112
- --colors-gray-true-600: #525252;
113
- --colors-gray-true-700: #424242;
114
- --colors-gray-true-800: #292929;
115
- --colors-gray-true-900: #141414;
116
- --colors-gray-true-950: #0f0f0f;
117
- --colors-gray-warm-25: #fdfdfc;
118
- --colors-gray-warm-50: #fafaf9;
119
- --colors-gray-warm-100: #f5f5f4;
120
- --colors-gray-warm-200: #e7e5e4;
121
- --colors-gray-warm-300: #d7d3d0;
122
- --colors-gray-warm-400: #a9a29d;
123
- --colors-gray-warm-500: #79716b;
124
- --colors-gray-warm-600: #57534e;
125
- --colors-gray-warm-700: #44403c;
126
- --colors-gray-warm-800: #292524;
127
- --colors-gray-warm-900: #1c1917;
128
- --colors-gray-warm-950: #171412;
129
- --colors-brand-25: #fef8f5;
130
- --colors-brand-50: #fef4f0;
131
- --colors-brand-100: #fde0d6;
132
- --colors-brand-200: #fac2ad;
133
- --colors-brand-300: #f8a385;
134
- --colors-brand-400: #f7855c;
135
- --colors-brand-500: #f67547;
136
- --colors-brand-600: #874fff;
137
- --colors-brand-700: #dc3e05;
138
- --colors-brand-800: #c33704;
139
- --colors-brand-900: #a53208;
140
- --colors-brand-950: #8a2500;
141
- --colors-error-25: #fffbfa;
142
- --colors-error-50: #fef3f2;
143
- --colors-error-100: #fee4e2;
144
- --colors-error-200: #fecdca;
145
- --colors-error-300: #fda29b;
146
- --colors-error-400: #f97066;
147
- --colors-error-500: #f04438;
148
- --colors-error-600: #c83629;
149
- --colors-error-700: #b42318;
150
- --colors-error-800: #912018;
151
- --colors-error-900: #7a271a;
152
- --colors-error-950: #55160c;
153
- --colors-warning-25: #fffcf5;
154
- --colors-warning-50: #fffaeb;
155
- --colors-warning-100: #fef0c7;
156
- --colors-warning-200: #fedf89;
157
- --colors-warning-300: #fec84b;
158
- --colors-warning-400: #ffc709;
159
- --colors-warning-500: #ffc709;
160
- --colors-warning-600: #ffc709;
161
- --colors-warning-700: #ffc709;
162
- --colors-warning-800: #ffc709;
163
- --colors-warning-900: #ffc709;
164
- --colors-warning-950: #ffc709;
165
- --colors-success-25: #f6fef9;
166
- --colors-success-50: #ecfdf3;
167
- --colors-success-100: #dcfae6;
168
- --colors-success-200: #abefc6;
169
- --colors-success-300: #75e0a7;
170
- --colors-success-400: #47cd89;
171
- --colors-success-500: #17b26a;
172
- --colors-success-600: #448422;
173
- --colors-success-700: #067647;
174
- --colors-success-800: #085d3a;
175
- --colors-success-900: #074d31;
176
- --colors-success-950: #053321;
177
- --colors-moss-25: #fafdf7;
178
- --colors-moss-50: #f5fbee;
179
- --colors-moss-100: #e6f4d7;
180
- --colors-moss-200: #ceeab0;
181
- --colors-moss-300: #acdc79;
182
- --colors-moss-400: #86cb3c;
183
- --colors-moss-500: #669f2a;
184
- --colors-moss-600: #4f7a21;
185
- --colors-moss-700: #3f621a;
186
- --colors-moss-800: #335015;
187
- --colors-moss-900: #2b4212;
188
- --colors-moss-950: #1a280b;
189
- --colors-green-25: #f6fef9;
190
- --colors-green-50: #edfcf2;
191
- --colors-green-100: #d3f8df;
192
- --colors-green-200: #aaf0c4;
193
- --colors-green-300: #73e2a3;
194
- --colors-green-400: #3ccb7f;
195
- --colors-green-500: #16b364;
196
- --colors-green-600: #099250;
197
- --colors-green-700: #087443;
198
- --colors-green-800: #095c37;
199
- --colors-green-900: #084c2e;
200
- --colors-green-950: #052e1c;
201
- --colors-green-light-25: #fafef5;
202
- --colors-green-light-50: #f3fee7;
203
- --colors-green-light-100: #e3fbcc;
204
- --colors-green-light-200: #d0f8ab;
205
- --colors-green-light-300: #a6ef67;
206
- --colors-green-light-400: #85e13a;
207
- --colors-green-light-500: #66c61c;
208
- --colors-green-light-600: #4ca30d;
209
- --colors-green-light-700: #3b7c0f;
210
- --colors-green-light-800: #326212;
211
- --colors-green-light-900: #2b5314;
212
- --colors-green-light-950: #15290a;
213
- --colors-teal-25: #f6fefc;
214
- --colors-teal-50: #f0fdf9;
215
- --colors-teal-100: #ccfbef;
216
- --colors-teal-200: #99f6e0;
217
- --colors-teal-300: #5fe9d0;
218
- --colors-teal-400: #2ed3b7;
219
- --colors-teal-500: #15b79e;
220
- --colors-teal-600: #0e9384;
221
- --colors-teal-700: #107569;
222
- --colors-teal-800: #125d56;
223
- --colors-teal-900: #134e48;
224
- --colors-teal-950: #0a2926;
225
- --colors-cyan-25: #f5feff;
226
- --colors-cyan-50: #ecfdff;
227
- --colors-cyan-100: #cff9fe;
228
- --colors-cyan-200: #a5f0fc;
229
- --colors-cyan-300: #67e3f9;
230
- --colors-cyan-400: #22ccee;
231
- --colors-cyan-500: #06aed4;
232
- --colors-cyan-600: #088ab2;
233
- --colors-cyan-700: #0e7090;
234
- --colors-cyan-800: #155b75;
235
- --colors-cyan-900: #164c63;
236
- --colors-cyan-950: #0d2d3a;
237
- --colors-blue-25: #f5faff;
238
- --colors-blue-50: #eff8ff;
239
- --colors-blue-100: #d1e9ff;
240
- --colors-blue-200: #b2ddff;
241
- --colors-blue-300: #84caff;
242
- --colors-blue-400: #53b1fd;
243
- --colors-blue-500: #2e90fa;
244
- --colors-blue-600: #1570ef;
245
- --colors-blue-700: #175cd3;
246
- --colors-blue-800: #1849a9;
247
- --colors-blue-900: #194185;
248
- --colors-blue-950: #102a56;
249
- --colors-blue-light-25: #f5fbff;
250
- --colors-blue-light-50: #f0f9ff;
251
- --colors-blue-light-100: #e0f2fe;
252
- --colors-blue-light-200: #b9e6fe;
253
- --colors-blue-light-300: #7cd4fd;
254
- --colors-blue-light-400: #36bffa;
255
- --colors-blue-light-500: #0ba5ec;
256
- --colors-blue-light-600: #0086c9;
257
- --colors-blue-light-700: #026aa2;
258
- --colors-blue-light-800: #065986;
259
- --colors-blue-light-900: #0b4a6f;
260
- --colors-blue-light-950: #062c41;
261
- --colors-blue-dark-25: #f5f8ff;
262
- --colors-blue-dark-50: #eff4ff;
263
- --colors-blue-dark-100: #d1e0ff;
264
- --colors-blue-dark-200: #b2ccff;
265
- --colors-blue-dark-300: #84adff;
266
- --colors-blue-dark-400: #528bff;
267
- --colors-blue-dark-500: #2970ff;
268
- --colors-blue-dark-600: #155eef;
269
- --colors-blue-dark-700: #004eeb;
270
- --colors-blue-dark-800: #0040c1;
271
- --colors-blue-dark-900: #00359e;
272
- --colors-blue-dark-950: #002266;
273
- --colors-indigo-25: #f5f8ff;
274
- --colors-indigo-50: #eef4ff;
275
- --colors-indigo-100: #e0eaff;
276
- --colors-indigo-200: #c7d7fe;
277
- --colors-indigo-300: #a4bcfd;
278
- --colors-indigo-400: #8098f9;
279
- --colors-indigo-500: #6172f3;
280
- --colors-indigo-600: #444ce7;
281
- --colors-indigo-700: #3538cd;
282
- --colors-indigo-800: #2d31a6;
283
- --colors-indigo-900: #2d3282;
284
- --colors-indigo-950: #1f235b;
285
- --colors-violet-25: #fbfaff;
286
- --colors-violet-50: #f5f3ff;
287
- --colors-violet-100: #ece9fe;
288
- --colors-violet-200: #ddd6fe;
289
- --colors-violet-300: #c3b5fd;
290
- --colors-violet-400: #a48afb;
291
- --colors-violet-500: #875bf7;
292
- --colors-violet-600: #7839ee;
293
- --colors-violet-700: #6927da;
294
- --colors-violet-800: #5720b7;
295
- --colors-violet-900: #491c96;
296
- --colors-violet-950: #2e125e;
297
- --colors-purple-25: #fafaff;
298
- --colors-purple-50: #f4f3ff;
299
- --colors-purple-100: #ebe9fe;
300
- --colors-purple-200: #d9d6fe;
301
- --colors-purple-300: #bdb4fe;
302
- --colors-purple-400: #9b8afb;
303
- --colors-purple-500: #7a5af8;
304
- --colors-purple-600: #6938ef;
305
- --colors-purple-700: #5925dc;
306
- --colors-purple-800: #4a1fb8;
307
- --colors-purple-900: #3e1c96;
308
- --colors-purple-950: #27115f;
309
- --colors-fuchsia-25: #fefaff;
310
- --colors-fuchsia-50: #fdf4ff;
311
- --colors-fuchsia-100: #fbe8ff;
312
- --colors-fuchsia-200: #f6d0fe;
313
- --colors-fuchsia-300: #eeaafd;
314
- --colors-fuchsia-400: #e478fa;
315
- --colors-fuchsia-500: #d444f1;
316
- --colors-fuchsia-600: #ba24d5;
317
- --colors-fuchsia-700: #9f1ab1;
318
- --colors-fuchsia-800: #821890;
319
- --colors-fuchsia-900: #6f1877;
320
- --colors-fuchsia-950: #47104c;
321
- --colors-pink-25: #fef6fb;
322
- --colors-pink-50: #fdf2fa;
323
- --colors-pink-100: #fce7f6;
324
- --colors-pink-200: #fcceee;
325
- --colors-pink-300: #faa7e0;
326
- --colors-pink-400: #f670c7;
327
- --colors-pink-500: #ee46bc;
328
- --colors-pink-600: #dd2590;
329
- --colors-pink-700: #c11574;
330
- --colors-pink-800: #9e165f;
331
- --colors-pink-900: #851651;
332
- --colors-pink-950: #4e0d30;
333
- --colors-rosé-25: #fff5f6;
334
- --colors-rosé-50: #fff1f3;
335
- --colors-rosé-100: #ffe4e8;
336
- --colors-rosé-200: #fecdd6;
337
- --colors-rosé-300: #fea3b4;
338
- --colors-rosé-400: #fd6f8e;
339
- --colors-rosé-500: #f63d68;
340
- --colors-rosé-600: #e31b54;
341
- --colors-rosé-700: #c01048;
342
- --colors-rosé-800: #a11043;
343
- --colors-rosé-900: #89123e;
344
- --colors-rosé-950: #510b24;
345
- --colors-orange-25: #fefaf5;
346
- --colors-orange-50: #fef6ee;
347
- --colors-orange-100: #fdead7;
348
- --colors-orange-200: #f9dbaf;
349
- --colors-orange-300: #f7b27a;
350
- --colors-orange-400: #f38744;
351
- --colors-orange-500: #ef6820;
352
- --colors-orange-600: #e04f16;
353
- --colors-orange-700: #b93815;
354
- --colors-orange-800: #932f19;
355
- --colors-orange-900: #772917;
356
- --colors-orange-950: #511c10;
357
- --colors-orange-dark-25: #fff9f5;
358
- --colors-orange-dark-50: #fff4ed;
359
- --colors-orange-dark-100: #ffe6d5;
360
- --colors-orange-dark-200: #ffd6ae;
361
- --colors-orange-dark-300: #ff9c66;
362
- --colors-orange-dark-400: #ff692e;
363
- --colors-orange-dark-500: #ff4405;
364
- --colors-orange-dark-600: #e62e05;
365
- --colors-orange-dark-700: #bc1b06;
366
- --colors-orange-dark-800: #97180c;
367
- --colors-orange-dark-900: #771a0d;
368
- --colors-orange-dark-950: #57130a;
369
- --colors-yellow-25: #fefdf0;
370
- --colors-yellow-50: #fefbe8;
371
- --colors-yellow-100: #fef7c3;
372
- --colors-yellow-200: #feee95;
373
- --colors-yellow-300: #fde272;
374
- --colors-yellow-400: #fac515;
375
- --colors-yellow-500: #eaaa08;
376
- --colors-yellow-600: #ca8504;
377
- --colors-yellow-700: #a15c07;
378
- --colors-yellow-800: #854a0e;
379
- --colors-yellow-900: #713b12;
380
- --colors-yellow-950: #542c0d;
381
- --colors-text-text-primary-900: #151515;
382
- --colors-text-text-primary-on-brand: #ffffff;
383
- --colors-text-text-secondary-700: #44403c;
384
- --colors-text-text-secondary-hover: #151515;
385
- --colors-text-text-secondary-on-brand: #fef8f5;
386
- --colors-text-text-tertiary-600: #57534e;
387
- --colors-text-text-tertiary-hover: #44403c;
388
- --colors-text-text-tertiary-on-brand: #fef8f5;
389
- --colors-text-text-quaternary-500: #79716b;
390
- --colors-text-text-quaternary-on-brand: #fef8f5;
391
- --colors-text-text-white: #ffffff;
392
- --colors-text-text-disabled: #d7d3d0;
393
- --colors-text-text-placeholder: #a9a29d;
394
- --colors-text-text-placeholder-subtle: #d7d3d0;
395
- --colors-text-text-brand-primary-900: #a53208;
396
- --colors-text-text-brand-secondary-700: #dc3e05;
397
- --colors-text-text-brand-secondary-hover: #c33704;
398
- --colors-text-text-brand-tertiary-600: #874fff;
399
- --colors-text-text-brand-tertiary-alt: #874fff;
400
- --colors-text-text-error-primary-600: #c83629;
401
- --colors-text-text-error-primary-hover: #b42318;
402
- --colors-text-text-warning-primary-600: #ffc709;
403
- --colors-text-text-success-primary-600: #448422;
404
- --colors-border-border-primary: #d7d3d0;
405
- --colors-border-border-secondary: #e4e3e1;
406
- --colors-border-border-secondary-alt: rgba(0, 0, 0, 0.08);
407
- --colors-border-border-tertiary: #f0efed;
408
- --colors-border-border-disabled: #d7d3d0;
409
- --colors-border-border-disabled-subtle: #e4e3e1;
410
- --colors-border-border-brand: #f67547;
411
- --colors-border-border-brand-alt: #874fff;
412
- --colors-border-border-error: #f04438;
413
- --colors-border-border-error-subtle: #fda29b;
414
- --colors-foreground-fg-primary-900: #151515;
415
- --colors-foreground-fg-secondary-700: #44403c;
416
- --colors-foreground-fg-secondary-hover: #292524;
417
- --colors-foreground-fg-tertiary-600: #57534e;
418
- --colors-foreground-fg-tertiary-hover: #44403c;
419
- --colors-foreground-fg-quaternary-400: #79716b;
420
- --colors-foreground-fg-quaternary-hover: #79716b;
421
- --colors-foreground-fg-white: #ffffff;
422
- --colors-foreground-fg-disabled: #d7d3d0;
423
- --colors-foreground-fg-disabled-subtle: #e4e3e1;
424
- --colors-foreground-fg-brand-primary-600: #874fff;
425
- --colors-foreground-fg-brand-primary-alt: #874fff;
426
- --colors-foreground-fg-brand-secondary-500: #f67547;
427
- --colors-foreground-fg-brand-secondary-alt: #f67547;
428
- --colors-foreground-fg-brand-secondary-hover: #874fff;
429
- --colors-foreground-fg-error-primary: #c83629;
430
- --colors-foreground-fg-error-secondary: #f04438;
431
- --colors-foreground-fg-warning-primary: #ffc709;
432
- --colors-foreground-fg-warning-secondary: #ffc709;
433
- --colors-foreground-fg-success-primary: #448422;
434
- --colors-foreground-fg-success-secondary: #17b26a;
435
- --colors-background-bg-primary: #ffffff;
436
- --colors-background-bg-primary-alt: #ffffff;
437
- --colors-background-bg-primary-hover: #f7f6f5;
438
- --colors-background-bg-primary-solid: #151515;
439
- --colors-background-bg-secondary: #f7f6f5;
440
- --colors-background-bg-secondary-alt: #f7f6f5;
441
- --colors-background-bg-secondary-hover: #f0efed;
442
- --colors-background-bg-secondary-subtle: #fdfdfc;
443
- --colors-background-bg-secondary-solid: #57534e;
444
- --colors-background-bg-tertiary: #f0efed;
445
- --colors-background-bg-quaternary: #e4e3e1;
446
- --colors-background-bg-active: #f7f6f5;
447
- --colors-background-bg-disabled: #f0efed;
448
- --colors-background-bg-disabled-subtle: #f7f6f5;
449
- --colors-background-bg-overlay: #e4e3e1;
450
- --colors-background-bg-brand-primary: #fef4f0;
451
- --colors-background-bg-brand-primary-alt: #fef4f0;
452
- --colors-background-bg-brand-secondary: #fde0d6;
453
- --colors-background-bg-brand-solid: #874fff;
454
- --colors-background-bg-brand-solid-hover: #dc3e05;
455
- --colors-background-bg-brand-section: #874fff;
456
- --colors-background-bg-brand-section-subtle: #dc3e05;
457
- --colors-background-bg-error-primary: #fef3f2;
458
- --colors-background-bg-error-secondary: #fee4e2;
459
- --colors-background-bg-error-solid: #c83629;
460
- --colors-background-bg-error-solid-hover: #b42318;
461
- --colors-background-bg-warning-primary: #fffaeb;
462
- --colors-background-bg-warning-secondary: #fef0c7;
463
- --colors-background-bg-warning-solid: #ffc709;
464
- --colors-background-bg-success-primary: #ecfdf3;
465
- --colors-background-bg-success-secondary: #dcfae6;
466
- --colors-background-bg-success-solid: #448422;
467
- --colors-effects-focus-rings-focus-ring: #151515;
468
- --colors-effects-focus-rings-focus-ring-error: #f04438;
469
- --colors-effects-shadows-shadow-xs: rgba(10, 13, 18, 0.05);
470
- --colors-effects-shadows-shadow-sm-01: rgba(10, 13, 18, 0.1);
471
- --colors-effects-shadows-shadow-sm-02: rgba(10, 13, 18, 0.1);
472
- --colors-effects-shadows-shadow-md-01: rgba(10, 13, 18, 0.1);
473
- --colors-effects-shadows-shadow-md-02: rgba(10, 13, 18, 0.06);
474
- --colors-effects-shadows-shadow-lg-01: rgba(10, 13, 18, 0.08);
475
- --colors-effects-shadows-shadow-lg-02: rgba(10, 13, 18, 0.03);
476
- --colors-effects-shadows-shadow-lg-03: rgba(10, 13, 18, 0.04);
477
- --colors-effects-shadows-shadow-xl-01: rgba(10, 13, 18, 0.08);
478
- --colors-effects-shadows-shadow-xl-02: rgba(10, 13, 18, 0.03);
479
- --colors-effects-shadows-shadow-xl-03: rgba(10, 13, 18, 0.04);
480
- --colors-effects-shadows-shadow-2xl-01: rgba(10, 13, 18, 0.18);
481
- --colors-effects-shadows-shadow-2xl-02: rgba(10, 13, 18, 0.04);
482
- --colors-effects-shadows-shadow-3xl-01: rgba(10, 13, 18, 0.14);
483
- --colors-effects-shadows-shadow-3xl-02: rgba(10, 13, 18, 0.04);
484
- --colors-effects-shadows-shadow-skeumorphic-inner: rgba(10, 13, 18, 0.05);
485
- --colors-effects-shadows-shadow-skeumorphic-inner-border: rgba(10, 13, 18, 0.18);
486
- --colors-effects-portfolio-mockups-shadow-main-centre-md: rgba(10, 13, 18, 0.14);
487
- --colors-effects-portfolio-mockups-shadow-main-centre-lg: rgba(10, 13, 18, 0.18);
488
- --colors-effects-portfolio-mockups-shadow-overlay-lg: rgba(10, 13, 18, 0.12);
489
- --colors-effects-portfolio-mockups-shadow-grid-md: rgba(10, 13, 18, 0.08);
490
- --spacing-0-0px: 0px;
491
- --spacing-1-4px: 4px;
492
- --spacing-2-8px: 8px;
493
- --spacing-3-12px: 12px;
494
- --spacing-4-16px: 16px;
495
- --spacing-5-20px: 20px;
496
- --spacing-6-24px: 24px;
497
- --spacing-8-32px: 32px;
498
- --spacing-10-40px: 40px;
499
- --spacing-12-48px: 48px;
500
- --spacing-16-64px: 64px;
501
- --spacing-20-80px: 80px;
502
- --spacing-24-96px: 96px;
503
- --spacing-32-128px: 128px;
504
- --spacing-40-160px: 160px;
505
- --spacing-48-192px: 192px;
506
- --spacing-56-224px: 224px;
507
- --spacing-64-256px: 256px;
508
- --spacing-80-320px: 320px;
509
- --spacing-96-384px: 384px;
510
- --spacing-120-480px: 480px;
511
- --spacing-140-560px: 560px;
512
- --spacing-160-640px: 640px;
513
- --spacing-180-720px: 720px;
514
- --spacing-192-768px: 768px;
515
- --spacing-256-1-024px: 1024px;
516
- --spacing-320-1-280px: 1280px;
517
- --spacing-360-1-440px: 1440px;
518
- --spacing-400-1-600px: 1600px;
519
- --spacing-480-1-920px: 1920px;
520
- --spacing-0-5-2px: 2px;
521
- --spacing-1-5-6px: 6px;
522
- --width-move-width-lg: 1024px;
523
- --width-move-width-md: 768px;
524
- --component-colors-alpha-alpha-white-10: rgba(255, 255, 255, 0.1);
525
- --component-colors-alpha-alpha-white-20: rgba(255, 255, 255, 0.2);
526
- --component-colors-alpha-alpha-white-30: rgba(255, 255, 255, 0.3);
527
- --component-colors-alpha-alpha-white-40: rgba(255, 255, 255, 0.4);
528
- --component-colors-alpha-alpha-white-50: rgba(255, 255, 255, 0.5);
529
- --component-colors-alpha-alpha-white-60: rgba(255, 255, 255, 0.6);
530
- --component-colors-alpha-alpha-white-70: rgba(255, 255, 255, 0.7);
531
- --component-colors-alpha-alpha-white-80: rgba(255, 255, 255, 0.8);
532
- --component-colors-alpha-alpha-white-90: rgba(255, 255, 255, 0.9);
533
- --component-colors-alpha-alpha-white-100: #ffffff;
534
- --component-colors-alpha-alpha-black-10: rgba(0, 0, 0, 0.1);
535
- --component-colors-alpha-alpha-black-20: rgba(0, 0, 0, 0.2);
536
- --component-colors-alpha-alpha-black-30: rgba(0, 0, 0, 0.3);
537
- --component-colors-alpha-alpha-black-40: rgba(0, 0, 0, 0.4);
538
- --component-colors-alpha-alpha-black-50: rgba(0, 0, 0, 0.5);
539
- --component-colors-alpha-alpha-black-60: rgba(0, 0, 0, 0.6);
540
- --component-colors-alpha-alpha-black-70: rgba(0, 0, 0, 0.7);
541
- --component-colors-alpha-alpha-black-80: rgba(0, 0, 0, 0.8);
542
- --component-colors-alpha-alpha-black-90: rgba(0, 0, 0, 0.9);
543
- --component-colors-alpha-alpha-black-100: #000000;
544
- --component-colors-utility-gray-utility-gray-50: #f7f6f5;
545
- --component-colors-utility-gray-utility-gray-100: #f0efed;
546
- --component-colors-utility-gray-utility-gray-200: #e4e3e1;
547
- --component-colors-utility-gray-utility-gray-300: #d7d3d0;
548
- --component-colors-utility-gray-utility-gray-400: #a9a29d;
549
- --component-colors-utility-gray-utility-gray-500: #79716b;
550
- --component-colors-utility-gray-utility-gray-600: #57534e;
551
- --component-colors-utility-gray-utility-gray-700: #44403c;
552
- --component-colors-utility-gray-utility-gray-800: #292524;
553
- --component-colors-utility-gray-utility-gray-900: #151515;
554
- --component-colors-utility-gray-blue-utility-gray-blue-50: #f8f9fc;
555
- --component-colors-utility-gray-blue-utility-gray-blue-100: #eaecf5;
556
- --component-colors-utility-gray-blue-utility-gray-blue-200: #d5d9eb;
557
- --component-colors-utility-gray-blue-utility-gray-blue-300: #b3b8db;
558
- --component-colors-utility-gray-blue-utility-gray-blue-400: #717bbc;
559
- --component-colors-utility-gray-blue-utility-gray-blue-500: #4e5ba6;
560
- --component-colors-utility-gray-blue-utility-gray-blue-600: #3e4784;
561
- --component-colors-utility-gray-blue-utility-gray-blue-700: #363f72;
562
- --component-colors-utility-brand-utility-brand-50: #fef4f0;
563
- --component-colors-utility-brand-utility-brand-50-alt: #fef4f0;
564
- --component-colors-utility-brand-utility-brand-100: #fde0d6;
565
- --component-colors-utility-brand-utility-brand-100-alt: #fde0d6;
566
- --component-colors-utility-brand-utility-brand-200: #fac2ad;
567
- --component-colors-utility-brand-utility-brand-200-alt: #fac2ad;
568
- --component-colors-utility-brand-utility-brand-300: #f8a385;
569
- --component-colors-utility-brand-utility-brand-300-alt: #f8a385;
570
- --component-colors-utility-brand-utility-brand-400: #f7855c;
571
- --component-colors-utility-brand-utility-brand-400-alt: #f7855c;
572
- --component-colors-utility-brand-utility-brand-500: #f67547;
573
- --component-colors-utility-brand-utility-brand-500-alt: #f67547;
574
- --component-colors-utility-brand-utility-brand-600: #874fff;
575
- --component-colors-utility-brand-utility-brand-600-alt: #874fff;
576
- --component-colors-utility-brand-utility-brand-700: #dc3e05;
577
- --component-colors-utility-brand-utility-brand-700-alt: #dc3e05;
578
- --component-colors-utility-brand-utility-brand-800: #c33704;
579
- --component-colors-utility-brand-utility-brand-800-alt: #c33704;
580
- --component-colors-utility-brand-utility-brand-900: #a53208;
581
- --component-colors-utility-brand-utility-brand-900-alt: #a53208;
582
- --component-colors-utility-error-utility-error-50: #fef3f2;
583
- --component-colors-utility-error-utility-error-100: #fee4e2;
584
- --component-colors-utility-error-utility-error-200: #fecdca;
585
- --component-colors-utility-error-utility-error-300: #fda29b;
586
- --component-colors-utility-error-utility-error-400: #f97066;
587
- --component-colors-utility-error-utility-error-500: #f04438;
588
- --component-colors-utility-error-utility-error-600: #c83629;
589
- --component-colors-utility-error-utility-error-700: #b42318;
590
- --component-colors-utility-warning-utility-warning-50: #fffaeb;
591
- --component-colors-utility-warning-utility-warning-100: #fef0c7;
592
- --component-colors-utility-warning-utility-warning-200: #fedf89;
593
- --component-colors-utility-warning-utility-warning-300: #fec84b;
594
- --component-colors-utility-warning-utility-warning-400: #ffc709;
595
- --component-colors-utility-warning-utility-warning-500: #ffc709;
596
- --component-colors-utility-warning-utility-warning-600: #ffc709;
597
- --component-colors-utility-warning-utility-warning-700: #ffc709;
598
- --component-colors-utility-success-utility-success-50: #ecfdf3;
599
- --component-colors-utility-success-utility-success-100: #dcfae6;
600
- --component-colors-utility-success-utility-success-200: #abefc6;
601
- --component-colors-utility-success-utility-success-300: #75e0a7;
602
- --component-colors-utility-success-utility-success-400: #47cd89;
603
- --component-colors-utility-success-utility-success-500: #17b26a;
604
- --component-colors-utility-success-utility-success-600: #448422;
605
- --component-colors-utility-success-utility-success-700: #067647;
606
- --component-colors-utility-green-utility-green-50: #edfcf2;
607
- --component-colors-utility-green-utility-green-100: #d3f8df;
608
- --component-colors-utility-green-utility-green-200: #aaf0c4;
609
- --component-colors-utility-green-utility-green-300: #73e2a3;
610
- --component-colors-utility-green-utility-green-400: #3ccb7f;
611
- --component-colors-utility-green-utility-green-500: #16b364;
612
- --component-colors-utility-green-utility-green-600: #099250;
613
- --component-colors-utility-green-utility-green-700: #087443;
614
- --component-colors-utility-blue-light-utility-blue-light-50: #f0f9ff;
615
- --component-colors-utility-blue-light-utility-blue-light-100: #e0f2fe;
616
- --component-colors-utility-blue-light-utility-blue-light-200: #b9e6fe;
617
- --component-colors-utility-blue-light-utility-blue-light-300: #7cd4fd;
618
- --component-colors-utility-blue-light-utility-blue-light-400: #36bffa;
619
- --component-colors-utility-blue-light-utility-blue-light-500: #0ba5ec;
620
- --component-colors-utility-blue-light-utility-blue-light-600: #0086c9;
621
- --component-colors-utility-blue-light-utility-blue-light-700: #026aa2;
622
- --component-colors-utility-blue-utility-blue-50: #eff8ff;
623
- --component-colors-utility-blue-utility-blue-100: #d1e9ff;
624
- --component-colors-utility-blue-utility-blue-200: #b2ddff;
625
- --component-colors-utility-blue-utility-blue-300: #84caff;
626
- --component-colors-utility-blue-utility-blue-400: #53b1fd;
627
- --component-colors-utility-blue-utility-blue-500: #2e90fa;
628
- --component-colors-utility-blue-utility-blue-600: #1570ef;
629
- --component-colors-utility-blue-utility-blue-700: #175cd3;
630
- --component-colors-utility-blue-dark-utility-blue-dark-50: #eff4ff;
631
- --component-colors-utility-blue-dark-utility-blue-dark-100: #d1e0ff;
632
- --component-colors-utility-blue-dark-utility-blue-dark-200: #b2ccff;
633
- --component-colors-utility-blue-dark-utility-blue-dark-300: #84adff;
634
- --component-colors-utility-blue-dark-utility-blue-dark-400: #528bff;
635
- --component-colors-utility-blue-dark-utility-blue-dark-500: #2970ff;
636
- --component-colors-utility-blue-dark-utility-blue-dark-600: #155eef;
637
- --component-colors-utility-blue-dark-utility-blue-dark-700: #004eeb;
638
- --component-colors-utility-indigo-utility-indigo-50: #eef4ff;
639
- --component-colors-utility-indigo-utility-indigo-100: #e0eaff;
640
- --component-colors-utility-indigo-utility-indigo-200: #c7d7fe;
641
- --component-colors-utility-indigo-utility-indigo-300: #a4bcfd;
642
- --component-colors-utility-indigo-utility-indigo-400: #8098f9;
643
- --component-colors-utility-indigo-utility-indigo-500: #6172f3;
644
- --component-colors-utility-indigo-utility-indigo-600: #444ce7;
645
- --component-colors-utility-indigo-utility-indigo-700: #3538cd;
646
- --component-colors-utility-purple-utility-purple-50: #f4f3ff;
647
- --component-colors-utility-purple-utility-purple-100: #ebe9fe;
648
- --component-colors-utility-purple-utility-purple-200: #d9d6fe;
649
- --component-colors-utility-purple-utility-purple-300: #bdb4fe;
650
- --component-colors-utility-purple-utility-purple-400: #9b8afb;
651
- --component-colors-utility-purple-utility-purple-500: #7a5af8;
652
- --component-colors-utility-purple-utility-purple-600: #6938ef;
653
- --component-colors-utility-purple-utility-purple-700: #5925dc;
654
- --component-colors-utility-fuchsia-utility-fuchsia-50: #fdf4ff;
655
- --component-colors-utility-fuchsia-utility-fuchsia-100: #fbe8ff;
656
- --component-colors-utility-fuchsia-utility-fuchsia-200: #f6d0fe;
657
- --component-colors-utility-fuchsia-utility-fuchsia-300: #eeaafd;
658
- --component-colors-utility-fuchsia-utility-fuchsia-400: #e478fa;
659
- --component-colors-utility-fuchsia-utility-fuchsia-500: #d444f1;
660
- --component-colors-utility-fuchsia-utility-fuchsia-600: #ba24d5;
661
- --component-colors-utility-fuchsia-utility-fuchsia-700: #9f1ab1;
662
- --component-colors-utility-pink-utility-pink-50: #fdf2fa;
663
- --component-colors-utility-pink-utility-pink-100: #fce7f6;
664
- --component-colors-utility-pink-utility-pink-200: #fcceee;
665
- --component-colors-utility-pink-utility-pink-300: #faa7e0;
666
- --component-colors-utility-pink-utility-pink-400: #f670c7;
667
- --component-colors-utility-pink-utility-pink-500: #ee46bc;
668
- --component-colors-utility-pink-utility-pink-600: #dd2590;
669
- --component-colors-utility-pink-utility-pink-700: #c11574;
670
- --component-colors-utility-orange-dark-utility-orange-dark-50: #fff4ed;
671
- --component-colors-utility-orange-dark-utility-orange-dark-100: #ffe6d5;
672
- --component-colors-utility-orange-dark-utility-orange-dark-200: #ffd6ae;
673
- --component-colors-utility-orange-dark-utility-orange-dark-300: #ff9c66;
674
- --component-colors-utility-orange-dark-utility-orange-dark-400: #ff692e;
675
- --component-colors-utility-orange-dark-utility-orange-dark-500: #ff4405;
676
- --component-colors-utility-orange-dark-utility-orange-dark-600: #e62e05;
677
- --component-colors-utility-orange-dark-utility-orange-dark-700: #bc1b06;
678
- --component-colors-utility-orange-utility-orange-50: #fef6ee;
679
- --component-colors-utility-orange-utility-orange-100: #fdead7;
680
- --component-colors-utility-orange-utility-orange-200: #f9dbaf;
681
- --component-colors-utility-orange-utility-orange-300: #f7b27a;
682
- --component-colors-utility-orange-utility-orange-400: #f38744;
683
- --component-colors-utility-orange-utility-orange-500: #ef6820;
684
- --component-colors-utility-orange-utility-orange-600: #e04f16;
685
- --component-colors-utility-orange-utility-orange-700: #b93815;
686
- --component-colors-utility-yellow-utility-yellow-50: #fefbe8;
687
- --component-colors-utility-yellow-utility-yellow-100: #fef7c3;
688
- --component-colors-utility-yellow-utility-yellow-200: #feee95;
689
- --component-colors-utility-yellow-utility-yellow-300: #fde272;
690
- --component-colors-utility-yellow-utility-yellow-400: #fac515;
691
- --component-colors-utility-yellow-utility-yellow-500: #eaaa08;
692
- --component-colors-utility-yellow-utility-yellow-600: #ca8504;
693
- --component-colors-utility-yellow-utility-yellow-700: #a15c07;
694
- --component-colors-components-app-store-badges-app-store-badge-border: #a6a6a6;
695
- --component-colors-components-avatars-avatar-styles-bg-neutral: #e0e0e0;
696
- --component-colors-components-buttons-button-primary-icon: #fde0d6;
697
- --component-colors-components-buttons-button-primary-icon-hover: #fac2ad;
698
- --component-colors-components-buttons-button-destructive-primary-icon: #fda29b;
699
- --component-colors-components-buttons-button-destructive-primary-icon-hover: #fecdca;
700
- --component-colors-components-buttons-primary-button-primary-fg: #ffffff;
701
- --component-colors-components-buttons-primary-button-primary-bg: #874fff;
702
- --component-colors-components-buttons-primary-button-primary-border: rgba(255, 255, 255, 0.12);
703
- --component-colors-components-buttons-secondary-button-secondary-fg: #44403c;
704
- --component-colors-components-buttons-tertiary-color-button-tertiary-color-fg: #dc3e05;
705
- --component-colors-components-buttons-tertiary-error-button-tertiary-error-fg: #b42318;
706
- --component-colors-components-footers-footer-button-fg: #fac2ad;
707
- --component-colors-components-footers-footer-button-fg-hover: #ffffff;
708
- --component-colors-components-icons-icons-icon-fg-brand: #874fff;
709
- --component-colors-components-icons-icons-icon-fg-brand-on-brand: #fac2ad;
710
- --component-colors-components-icons-featured-icons-featured-icon-light-fg-brand: #874fff;
711
- --component-colors-components-icons-featured-icons-featured-icon-light-fg-gray: #79716b;
712
- --component-colors-components-icons-featured-icons-featured-icon-light-fg-error: #c83629;
713
- --component-colors-components-icons-featured-icons-featured-icon-light-fg-warning: #ffc709;
714
- --component-colors-components-icons-featured-icons-featured-icon-light-fg-success: #448422;
715
- --component-colors-components-icons-featured-icons-dark-featured-icon-dark-fg-brand: #ffffff;
716
- --component-colors-components-mockups-screen-mockup-border: #151515;
717
- --component-colors-components-sliders-slider-handle-bg: #ffffff;
718
- --component-colors-components-sliders-slider-handle-border: #874fff;
719
- --component-colors-components-toggles-toggle-button-fg-disabled: #f7f6f5;
720
- --component-colors-components-toggles-toggle-border: #d7d3d0;
721
- --component-colors-components-toggles-toggle-slim-border-pressed: #874fff;
722
- --component-colors-components-toggles-toggle-slim-border-pressed-hover: #dc3e05;
723
- --component-colors-components-tooltips-tooltip-supporting-text: #d7d3d0;
724
- --component-colors-components-text-editor-text-editor-icon-fg: #a9a29d;
725
- --component-colors-components-text-editor-text-editor-icon-fg-active: #79716b;
726
- --component-colors-components-header-sections-brand-header-header-brand-text-secondary: #fac2ad;
727
- --container-padding-mobile: 16px;
728
- --container-padding-desktop: 32px;
729
- --container-max-width-desktop: 1280px;
730
- --approach-2-container-max-width: 1280px;
731
- --width-xxs: 320px;
732
- --width-xs: 384px;
733
- --width-sm: 480px;
734
- --width-md: 560px;
735
- --width-lg: 640px;
736
- --width-xl: 768px;
737
- --width-2xl: 1024px;
738
- --width-3xl: 1280px;
739
- --width-4xl: 1440px;
740
- --width-5xl: 1600px;
741
- --width-6xl: 1920px;
742
- --paragraph-max-width: 720px;
743
- --spacing-none: 0px;
744
- --spacing-xxs: 2px;
745
- --spacing-xs: 4px;
746
- --spacing-sm: 6px;
747
- --spacing-md: 8px;
748
- --spacing-lg: 12px;
749
- --spacing-xl: 16px;
750
- --spacing-2xl: 20px;
751
- --spacing-3xl: 24px;
752
- --spacing-4xl: 32px;
753
- --spacing-5xl: 40px;
754
- --spacing-6xl: 48px;
755
- --spacing-7xl: 64px;
756
- --spacing-8xl: 80px;
757
- --spacing-9xl: 96px;
758
- --spacing-10xl: 128px;
759
- --spacing-11xl: 160px;
760
- --font-family-font-family-display: GSK Precision;
761
- --font-family-font-family-body: Arial;
762
- --font-weight-regular: Regular;
763
- --font-weight-regular-italic: Italic;
764
- --font-weight-medium: Regular;
765
- --font-weight-medium-italic: Italic;
766
- --font-weight-semibold: Regular;
767
- --font-weight-semibold-italic: Italic;
768
- --font-weight-bold: Bold;
769
- --font-weight-bold-italic: Bold Italic;
770
- --font-size-text-3xs: 8px;
771
- --font-size-text-2xs: 10px;
772
- --font-size-text-xs: 12px;
773
- --font-size-text-sm: 14px;
774
- --font-size-text-md: 16px;
775
- --font-size-text-lg: 18px;
776
- --font-size-text-xl: 20px;
777
- --font-size-display-xs: 24px;
778
- --font-size-display-sm: 30px;
779
- --font-size-display-md: 36px;
780
- --font-size-display-lg: 48px;
781
- --font-size-display-xl: 60px;
782
- --font-size-display-2xl: 72px;
783
- --line-height-text-3xs: 10px;
784
- --line-height-text-2xs: 12px;
785
- --line-height-text-xs: 18px;
786
- --line-height-text-sm: 20px;
787
- --line-height-text-md: 24px;
788
- --line-height-text-lg: 28px;
789
- --line-height-text-xl: 30px;
790
- --line-height-display-xs: 32px;
791
- --line-height-display-sm: 38px;
792
- --line-height-display-md: 44px;
793
- --line-height-display-lg: 60px;
794
- --line-height-display-xl: 72px;
795
- --line-height-display-2xl: 90px;
796
- --radius-none: 0;
797
- --radius-xxs: 0.125rem;
798
- --radius-xs: 0.25rem;
799
- --radius-sm: 0.375rem;
800
- --radius-md: 0.5rem;
801
- --radius-lg: 0.625rem;
802
- --radius-xl: 0.75rem;
803
- --radius-2xl: 1rem;
804
- --radius-3xl: 1.25rem;
805
- --radius-4xl: 1.5rem;
806
- --radius-full: 9999px;
807
- }