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

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 (7) hide show
  1. package/guidelines/Guidelines.md +228 -0
  2. package/package.json +4 -1
  3. package/src/breakpoints.css +29 -0
  4. package/src/components/choice-group/ChoiceGroup.jsx +205 -0
  5. package/src/components/choice-group/choice-group.css +332 -0
  6. package/src/index.js +1 -0
  7. package/src/tokens.css +945 -0
package/src/tokens.css ADDED
@@ -0,0 +1,945 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ :root {
6
+ --breakpoint-xs-max: 480px;
7
+ --breakpoint-sm-min: 481px;
8
+ --breakpoint-sm-max: 640px;
9
+ --breakpoint-md-min: 641px;
10
+ --breakpoint-md-max: 1024px;
11
+ --breakpoint-lg-min: 1025px;
12
+ --breakpoint-lg-max: 1440px;
13
+ --breakpoint-xl-min: 1441px;
14
+ --base-color-neutral-0: #ffffff;
15
+ --base-color-neutral-50: #f0f6fe;
16
+ --base-color-neutral-100: #e1e8f3;
17
+ --base-color-neutral-200: #c8d2e0;
18
+ --base-color-neutral-300: #a6b2c4;
19
+ --base-color-neutral-400: #8290a5;
20
+ --base-color-neutral-500: #64748b;
21
+ --base-color-neutral-600: #414e61;
22
+ --base-color-neutral-700: #293343;
23
+ --base-color-neutral-800: #151d29;
24
+ --base-color-neutral-900: #060b14;
25
+ --base-color-neutral-1000: #000000;
26
+ --base-color-accent-0: #fcfbff;
27
+ --base-color-accent-50: #f5f3ff;
28
+ --base-color-accent-100: #e8e4ff;
29
+ --base-color-accent-200: #d2c8ff;
30
+ --base-color-accent-300: #b5a0ff;
31
+ --base-color-accent-400: #986eff;
32
+ --base-color-accent-500: #7c3aed;
33
+ --base-color-accent-600: #5916b5;
34
+ --base-color-accent-700: #3d0082;
35
+ --base-color-accent-800: #230051;
36
+ --base-color-accent-900: #0f002a;
37
+ --base-color-accent-1000: #010003;
38
+ --base-color-highlited-0: #fffef2;
39
+ --base-color-highlited-50: #fffbd1;
40
+ --base-color-highlited-100: #fff7a3;
41
+ --base-color-highlited-200: #fff066;
42
+ --base-color-highlited-300: #ffe22e;
43
+ --base-color-highlited-400: #ffc914;
44
+ --base-color-highlited-500: #e3ad00;
45
+ --base-color-highlited-600: #ad8100;
46
+ --base-color-highlited-700: #765700;
47
+ --base-color-highlited-800: #4a3500;
48
+ --base-color-highlited-900: #241900;
49
+ --base-color-highlited-1000: #070400;
50
+ --base-color-info-0: #fafcff;
51
+ --base-color-info-50: #f0f5ff;
52
+ --base-color-info-100: #dce8ff;
53
+ --base-color-info-200: #b9d2ff;
54
+ --base-color-info-300: #87b0ff;
55
+ --base-color-info-400: #5189fd;
56
+ --base-color-info-500: #2563eb;
57
+ --base-color-info-600: #0b3fb2;
58
+ --base-color-info-700: #002582;
59
+ --base-color-info-800: #001451;
60
+ --base-color-info-900: #00062a;
61
+ --base-color-info-1000: #000003;
62
+ --base-color-error-0: #fffbfa;
63
+ --base-color-error-50: #fff2f0;
64
+ --base-color-error-100: #ffe0db;
65
+ --base-color-error-200: #ffbfb6;
66
+ --base-color-error-300: #ff8b7e;
67
+ --base-color-error-400: #ea574d;
68
+ --base-color-error-500: #dc2626;
69
+ --base-color-error-600: #94000b;
70
+ --base-color-error-700: #660005;
71
+ --base-color-error-800: #3e0002;
72
+ --base-color-error-900: #1f0000;
73
+ --base-color-error-1000: #020000;
74
+ --base-color-warn-0: #fffbf8;
75
+ --base-color-warn-50: #fff3ea;
76
+ --base-color-warn-100: #ffe2cc;
77
+ --base-color-warn-200: #fdc498;
78
+ --base-color-warn-300: #e59f68;
79
+ --base-color-warn-400: #ca782e;
80
+ --base-color-warn-500: #d97706;
81
+ --base-color-warn-600: #743d00;
82
+ --base-color-warn-700: #4f2700;
83
+ --base-color-warn-800: #2f1500;
84
+ --base-color-warn-900: #160700;
85
+ --base-color-warn-1000: #010000;
86
+ --base-color-success-0: #f5fff6;
87
+ --base-color-success-50: #dfffe4;
88
+ --base-color-success-100: #c9f5d0;
89
+ --base-color-success-200: #a6e3b0;
90
+ --base-color-success-300: #78c687;
91
+ --base-color-success-400: #42a75c;
92
+ --base-color-success-500: #16a34a;
93
+ --base-color-success-600: #005e26;
94
+ --base-color-success-700: #003f17;
95
+ --base-color-success-800: #00250a;
96
+ --base-color-success-900: #001003;
97
+ --base-color-success-1000: #000100;
98
+ --base-radius-sm: 4px;
99
+ --base-radius-md: 6px;
100
+ --base-radius-control: 6px;
101
+ --base-radius-lg: 8px;
102
+ --base-radius-xl: 12px;
103
+ --base-space-button-padding-block: 10px;
104
+ --base-space-button-padding-inline: 12px;
105
+ --base-space-button-min-height: 40px;
106
+ --base-space-button-gap: 0.5rem;
107
+ --base-space-button-border-width: 0px;
108
+ --base-space-button-focus-ring-width: 3px;
109
+ --base-space-button-focus-ring-offset: 2px;
110
+ --base-space-button-disabled-opacity: 0.55;
111
+ --base-space-card-padding: 20px;
112
+ --base-space-card-border-width: 1px;
113
+ --base-shadow-100: 0px 1px 2px 0px rgba(6, 11, 20, 0.05);
114
+ --base-shadow-200: 0px 1px 3px 0px rgba(6, 11, 20, 0.10), 0px 1px 2px -1px rgba(6, 11, 20, 0.06);
115
+ --base-shadow-300: 0px 4px 6px -1px rgba(6, 11, 20, 0.10), 0px 2px 4px -2px rgba(6, 11, 20, 0.06);
116
+ --base-shadow-400: 0px 10px 15px -3px rgba(6, 11, 20, 0.10), 0px 4px 6px -4px rgba(6, 11, 20, 0.05);
117
+ --base-shadow-500: 0px 20px 25px -5px rgba(6, 11, 20, 0.10), 0px 8px 10px -6px rgba(6, 11, 20, 0.04);
118
+ --base-spacing-1: 1px;
119
+ --base-spacing-2: 2px;
120
+ --base-spacing-4: 4px;
121
+ --base-spacing-6: 6px;
122
+ --base-spacing-8: 8px;
123
+ --base-spacing-12: 12px;
124
+ --base-spacing-16: 16px;
125
+ --base-spacing-20: 20px;
126
+ --base-spacing-24: 24px;
127
+ --base-spacing-32: 32px;
128
+ --base-spacing-40: 40px;
129
+ --base-spacing-64: 64px;
130
+ --base-spacing-96: 96px;
131
+ --base-spacing-128: 128px;
132
+ --base-spacing-neg-4: -4px;
133
+ --base-spacing-neg-8: -8px;
134
+ --base-spacing-neg-12: -12px;
135
+ --base-spacing-neg-16: -16px;
136
+ --base-spacing-neg-20: -20px;
137
+ --base-spacing-neg-24: -24px;
138
+ --base-spacing-neg-32: -32px;
139
+ --base-icon-optical-size: 24;
140
+ --base-font-size-root: 1rem;
141
+ --base-font-size-user-small: 0.875rem;
142
+ --base-font-size-user-medium: 1rem;
143
+ --base-font-size-user-large: 1.125rem;
144
+ --base-font-size-user-xl: 1.25rem;
145
+ --base-font-size-scale-100: 0.75rem;
146
+ --base-font-size-scale-150: 0.875rem;
147
+ --base-font-size-scale-200: 1rem;
148
+ --base-font-size-scale-250: 1.125rem;
149
+ --base-font-size-scale-300: 1.25rem;
150
+ --base-font-size-scale-400: 1.5rem;
151
+ --base-font-size-scale-500: 1.75rem;
152
+ --base-font-size-scale-600: 2rem;
153
+ --base-font-size-scale-700: 2.5rem;
154
+ --base-font-size-scale-800: 3.5rem;
155
+ --base-font-size-scale-900: 4.5rem;
156
+ --base-font-size-scale-1000: 6rem;
157
+ --base-font-size-accessible-scale-100: 0.84375rem;
158
+ --base-font-size-accessible-scale-150: 0.984375rem;
159
+ --base-font-size-accessible-scale-200: 1.125rem;
160
+ --base-font-size-accessible-scale-250: 1.265625rem;
161
+ --base-font-size-accessible-scale-300: 1.40625rem;
162
+ --base-font-size-accessible-scale-400: 1.6875rem;
163
+ --base-font-size-accessible-scale-500: 1.96875rem;
164
+ --base-font-size-accessible-scale-600: 2.25rem;
165
+ --base-font-size-accessible-scale-700: 2.8125rem;
166
+ --base-font-size-accessible-scale-800: 3.9375rem;
167
+ --base-font-size-accessible-scale-900: 5.0625rem;
168
+ --base-font-size-accessible-scale-1000: 6.75rem;
169
+ --base-font-weight-regular: 400;
170
+ --base-font-weight-medium: 500;
171
+ --base-font-weight-semibold: 600;
172
+ --base-font-weight-bold: 700;
173
+ --base-font-weight-extra-bold: 900;
174
+ --base-font-line-height-body: 1.5em;
175
+ --base-font-line-height-heading: 1.25em;
176
+ --base-font-line-height-display: 1.125em;
177
+ --semantic-color-text-default: #060b14;
178
+ --semantic-color-text-muted: #64748b;
179
+ --semantic-color-text-inverse: #ffffff;
180
+ --semantic-color-text-accent: #7c3aed;
181
+ --semantic-color-surface-page: #ffffff;
182
+ --semantic-color-surface-panel: #f0f6fe;
183
+ --semantic-color-surface-raised: #e1e8f3;
184
+ --semantic-color-surface-inverse: #060b14;
185
+ --semantic-color-border-subtle: #c8d2e0;
186
+ --semantic-color-border-default: #a6b2c4;
187
+ --semantic-color-border-strong: #64748b;
188
+ --semantic-color-action-background: #7c3aed;
189
+ --semantic-color-action-background-hover: #5916b5;
190
+ --semantic-color-action-background-pressed: #230051;
191
+ --semantic-color-action-foreground: #e8e4ff;
192
+ --semantic-color-action-foreground-pressed: #b5a0ff;
193
+ --semantic-color-action-surface: #f5f3ff;
194
+ --semantic-color-action-border: #b5a0ff;
195
+ --semantic-color-status-info-background: #2563eb;
196
+ --semantic-color-status-info-surface: #f0f5ff;
197
+ --semantic-color-status-info-border: #87b0ff;
198
+ --semantic-color-status-info-foreground: #fafcff;
199
+ --semantic-color-status-error-background: #dc2626;
200
+ --semantic-color-status-error-surface: #fff2f0;
201
+ --semantic-color-status-error-border: #ff8b7e;
202
+ --semantic-color-status-error-foreground: #fffbfa;
203
+ --semantic-color-status-error-text: #660005; /** Error-colored text or icon on a neutral surface. Darker than background to meet 4.5:1. */
204
+ --semantic-color-status-warn-background: #4f2700;
205
+ --semantic-color-status-warn-surface: #fff3ea;
206
+ --semantic-color-status-warn-border: #e59f68;
207
+ --semantic-color-status-warn-foreground: #fffbf8;
208
+ --semantic-color-status-warn-text: #4f2700; /** Warn-colored text or icon on a neutral surface. Darker than background to meet 4.5:1. */
209
+ --semantic-color-status-success-background: #003f17;
210
+ --semantic-color-status-success-surface: #dfffe4;
211
+ --semantic-color-status-success-border: #78c687;
212
+ --semantic-color-status-success-foreground: #f5fff6;
213
+ --semantic-radius-control: 6px;
214
+ --semantic-motion-duration-instant: 0ms;
215
+ --semantic-motion-duration-quick: 100ms;
216
+ --semantic-motion-duration-fast: 150ms;
217
+ --semantic-motion-duration-normal: 200ms;
218
+ --semantic-motion-duration-slow: 300ms;
219
+ --semantic-motion-duration-slower: 500ms;
220
+ --semantic-motion-duration-slowest: 750ms;
221
+ --semantic-motion-easing-linear: linear;
222
+ --semantic-motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
223
+ --semantic-motion-easing-enter: cubic-bezier(0, 0, 0.2, 1);
224
+ --semantic-motion-easing-exit: cubic-bezier(0.4, 0, 1, 1);
225
+ --semantic-motion-easing-expressive: cubic-bezier(0.34, 1.56, 0.64, 1);
226
+ --semantic-motion-easing-sharp: cubic-bezier(0.4, 0, 0.6, 1);
227
+ --semantic-shadow-xs: 0px 1px 2px 0px rgba(6, 11, 20, 0.05);
228
+ --semantic-shadow-sm: 0px 1px 3px 0px rgba(6, 11, 20, 0.10), 0px 1px 2px -1px rgba(6, 11, 20, 0.06);
229
+ --semantic-shadow-md: 0px 4px 6px -1px rgba(6, 11, 20, 0.10), 0px 2px 4px -2px rgba(6, 11, 20, 0.06);
230
+ --semantic-shadow-lg: 0px 10px 15px -3px rgba(6, 11, 20, 0.10), 0px 4px 6px -4px rgba(6, 11, 20, 0.05);
231
+ --semantic-shadow-xl: 0px 20px 25px -5px rgba(6, 11, 20, 0.10), 0px 8px 10px -6px rgba(6, 11, 20, 0.04);
232
+ --semantic-spacing-gap-xs: 8px;
233
+ --semantic-spacing-gap-sm: 12px;
234
+ --semantic-spacing-gap-md: 16px;
235
+ --semantic-spacing-gap-lg: 24px;
236
+ --semantic-font-size-body-xs: 0.75rem;
237
+ --semantic-font-size-body-sm: 0.875rem;
238
+ --semantic-font-size-body-md: 1rem;
239
+ --semantic-font-size-body-lg: 1.125rem;
240
+ --semantic-font-size-body-xl: 1.25rem;
241
+ --semantic-font-size-heading-xxl: 2.5rem;
242
+ --semantic-font-size-heading-xl: 2rem;
243
+ --semantic-font-size-heading-lg: 1.75rem;
244
+ --semantic-font-size-heading-md: 1.5rem;
245
+ --semantic-font-size-heading-sm: 1.25rem;
246
+ --semantic-font-size-heading-xs: 1.125rem;
247
+ --semantic-font-size-display-sm: 1.5rem;
248
+ --semantic-font-size-display-md: 1.75rem;
249
+ --semantic-font-size-display-lg: 2rem;
250
+ --semantic-font-size-display-xl: 2.5rem;
251
+ --semantic-font-size-display-xxl: 3.5rem;
252
+ --semantic-font-size-display-jumbo: 4.5rem;
253
+ --semantic-font-size-display-x-jumbo: 6rem;
254
+ --semantic-font-weight-body: 400;
255
+ --semantic-font-weight-heading: 700;
256
+ --semantic-font-weight-display: 900;
257
+ --semantic-font-line-height-body: 1.5em;
258
+ --semantic-font-line-height-heading: 1.25em;
259
+ --semantic-font-line-height-display: 1.125em;
260
+ --component-button-primary-background: #7c3aed;
261
+ --component-button-primary-background-hover: #5916b5;
262
+ --component-button-primary-background-pressed: #230051;
263
+ --component-button-primary-foreground: #fcfbff;
264
+ --component-button-primary-foreground-hover: #f5f3ff;
265
+ --component-button-primary-foreground-pressed: #e8e4ff;
266
+ --component-button-primary-border: #7c3aed;
267
+ --component-button-primary-border-width: 0px;
268
+ --component-button-secondary-background: #fcfbff;
269
+ --component-button-secondary-background-hover: #f5f3ff;
270
+ --component-button-secondary-background-pressed: #e8e4ff;
271
+ --component-button-secondary-foreground: #5916b5;
272
+ --component-button-secondary-foreground-hover: #3d0082;
273
+ --component-button-secondary-foreground-pressed: #230051;
274
+ --component-button-secondary-border: #7c3aed;
275
+ --component-button-secondary-border-hover: #3d0082;
276
+ --component-button-secondary-border-pressed: #230051;
277
+ --component-button-secondary-border-width: 1px;
278
+ --component-button-tertiary-background: #fcfbff;
279
+ --component-button-tertiary-background-hover: #f5f3ff;
280
+ --component-button-tertiary-background-pressed: #e8e4ff;
281
+ --component-button-tertiary-foreground: #5916b5;
282
+ --component-button-tertiary-foreground-hover: #3d0082;
283
+ --component-button-tertiary-foreground-pressed: #230051;
284
+ --component-button-tertiary-border: #fcfbff;
285
+ --component-button-tertiary-border-hover: #f5f3ff;
286
+ --component-button-tertiary-border-pressed: #e8e4ff;
287
+ --component-button-tertiary-border-width: 1px;
288
+ --component-button-focus-ring: #b5a0ff;
289
+ --component-button-border-radius: 6px;
290
+ --component-button-pill-border-radius: 9999px;
291
+ --component-button-padding-block: 10px;
292
+ --component-button-padding-inline: 12px;
293
+ --component-button-min-height: 40px;
294
+ --component-button-gap: 0.5rem;
295
+ --component-button-border-width: 0px;
296
+ --component-button-focus-ring-width: 3px;
297
+ --component-button-focus-ring-offset: 2px;
298
+ --component-button-disabled-opacity: 0.55;
299
+ --component-button-icon-size: 20px;
300
+ --component-button-icon-optical-size: 20;
301
+ --component-button-small-height: 28px;
302
+ --component-button-small-border-radius: 4px;
303
+ --component-button-small-icon-size: 20px;
304
+ --component-button-small-icon-optical-size: 20;
305
+ --component-button-medium-icon-size: 24px;
306
+ --component-button-medium-icon-optical-size: 24;
307
+ --component-button-large-height: 56px;
308
+ --component-button-large-secondary-border-width: 2px;
309
+ --component-button-large-icon-size: 40px;
310
+ --component-button-large-icon-optical-size: 40;
311
+ --component-button-font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
312
+ --component-button-font-size: 1rem;
313
+ --component-button-font-weight: 500;
314
+ --component-button-font-line-height: normal;
315
+ --component-accordion-trigger-height-sm: 32px;
316
+ --component-accordion-trigger-height-md: 40px;
317
+ --component-accordion-trigger-height-lg: 52px;
318
+ --component-accordion-padding-inline-sm: 8px;
319
+ --component-accordion-padding-inline-md: 12px;
320
+ --component-accordion-padding-inline-lg: 16px;
321
+ --component-accordion-icon-size-sm: 18px;
322
+ --component-accordion-icon-size-md: 20px;
323
+ --component-accordion-icon-size-lg: 24px;
324
+ --component-accordion-border-radius: 6px;
325
+ --component-accordion-focus-ring-width: 2px;
326
+ --component-accordion-focus-ring-offset: -2px;
327
+ --component-blockquote-border-width: 4px;
328
+ --component-blockquote-border-radius: 8px;
329
+ --component-blockquote-padding-block: 20px;
330
+ --component-blockquote-padding-inline: 24px;
331
+ --component-blockquote-mark-size: 5rem;
332
+ --component-blockquote-cite-font-weight: 500;
333
+ --component-calendar-month-gap: 32px;
334
+ --component-calendar-heading-padding-block: 12px;
335
+ --component-calendar-heading-padding-block-compact: 8px;
336
+ --component-calendar-heading-gap: 8px;
337
+ --component-calendar-cell-padding: 4px;
338
+ --component-calendar-cell-padding-compact: 2px;
339
+ --component-calendar-cell-padding-minimal: 1px;
340
+ --component-calendar-cell-size: 32px;
341
+ --component-calendar-cell-size-compact: 24px;
342
+ --component-calendar-cell-border-radius: 4px;
343
+ --component-card-padding: 20px;
344
+ --component-card-border-radius: 8px;
345
+ --component-card-border-width: 1px;
346
+ --component-card-icon-size: 20px;
347
+ --component-card-icon-optical-size: 20;
348
+ --component-card-shadow: 0px 1px 3px 0px rgba(6, 11, 20, 0.10), 0px 1px 2px -1px rgba(6, 11, 20, 0.06);
349
+ --component-card-title-font-size: 1.25rem;
350
+ --component-card-title-font-weight: 700;
351
+ --component-card-title-font-line-height: 1.25em;
352
+ --component-card-body-font-size: 1rem;
353
+ --component-card-body-font-weight: 400;
354
+ --component-card-body-font-line-height: 1.5em;
355
+ --component-checkbox-group-box-size: 16px;
356
+ --component-checkbox-group-gap: 8px;
357
+ --component-checkbox-group-item-gap: 2px;
358
+ --component-checkbox-group-group-gap: 8px;
359
+ --component-checkbox-group-items-top-gap: 12px;
360
+ --component-checkbox-group-input-nudge: 4px;
361
+ --component-checkbox-group-row-padding-block: 4px;
362
+ --component-checkbox-group-row-padding-inline: 6px;
363
+ --component-checkbox-group-content-gap: 2px;
364
+ --component-checkbox-group-icon-size: 75%;
365
+ --component-checkbox-group-disabled-opacity: 0.6;
366
+ --component-checkbox-group-error-accent-width: 3px;
367
+ --component-checkbox-group-error-message-font-weight: 600;
368
+ --component-checkbox-group-comfortable-box-size: 20px;
369
+ --component-checkbox-group-comfortable-box-size-md: 22px;
370
+ --component-checkbox-group-comfortable-gap: 10px;
371
+ --component-checkbox-group-comfortable-item-gap: 2px;
372
+ --component-checkbox-group-comfortable-group-gap: 10px;
373
+ --component-checkbox-group-comfortable-items-top-gap: 16px;
374
+ --component-checkbox-group-comfortable-input-nudge: 2px;
375
+ --component-checkbox-group-comfortable-row-padding-block: 6px;
376
+ --component-checkbox-group-comfortable-row-padding-inline: 8px;
377
+ --component-checkbox-group-compact-box-size: 14px;
378
+ --component-checkbox-group-compact-gap: 6px;
379
+ --component-checkbox-group-compact-item-gap: 2px;
380
+ --component-checkbox-group-compact-group-gap: 4px;
381
+ --component-checkbox-group-compact-items-top-gap: 8px;
382
+ --component-checkbox-group-compact-input-nudge: 3px;
383
+ --component-checkbox-group-compact-row-padding-block: 2px;
384
+ --component-checkbox-group-compact-row-padding-inline: 4px;
385
+ --component-choice-group-border-radius: 8px;
386
+ --component-choice-group-border-width: 1px;
387
+ --component-choice-group-gap-sm: 8px;
388
+ --component-choice-group-gap-md: 12px;
389
+ --component-choice-group-gap-lg: 16px;
390
+ --component-choice-group-compact-padding: 8px;
391
+ --component-choice-group-compact-icon-size: 20px;
392
+ --component-choice-group-compact-indicator-size: 12px;
393
+ --component-choice-group-compact-content-gap: 4px;
394
+ --component-choice-group-compact-min-width: 100px;
395
+ --component-choice-group-compact-group-gap: 4px;
396
+ --component-choice-group-compact-items-top-gap: 8px;
397
+ --component-choice-group-default-padding: 12px;
398
+ --component-choice-group-default-icon-size: 24px;
399
+ --component-choice-group-default-indicator-size: 16px;
400
+ --component-choice-group-default-content-gap: 6px;
401
+ --component-choice-group-default-min-width: 140px;
402
+ --component-choice-group-default-group-gap: 8px;
403
+ --component-choice-group-default-items-top-gap: 12px;
404
+ --component-choice-group-comfortable-padding: 16px;
405
+ --component-choice-group-comfortable-icon-size: 32px;
406
+ --component-choice-group-comfortable-indicator-size: 20px;
407
+ --component-choice-group-comfortable-content-gap: 8px;
408
+ --component-choice-group-comfortable-min-width: 200px;
409
+ --component-choice-group-comfortable-group-gap: 8px;
410
+ --component-choice-group-comfortable-items-top-gap: 16px;
411
+ --component-data-table-border-width: 1px;
412
+ --component-data-table-header-font-weight: 500;
413
+ --component-data-table-focus-ring-width: 2px;
414
+ --component-data-table-focus-ring-offset: -1px;
415
+ --component-data-table-density-compact-cell-padding-block: 6px;
416
+ --component-data-table-density-compact-cell-padding-inline: 12px;
417
+ --component-data-table-density-compact-font-size: 0.75rem;
418
+ --component-data-table-density-default-cell-padding-block: 12px;
419
+ --component-data-table-density-default-cell-padding-inline: 16px;
420
+ --component-data-table-density-default-font-size: 0.875rem;
421
+ --component-data-table-density-comfortable-cell-padding-block: 20px;
422
+ --component-data-table-density-comfortable-cell-padding-inline: 20px;
423
+ --component-data-table-density-comfortable-font-size: 0.875rem;
424
+ --component-dialog-padding: 24px;
425
+ --component-dialog-border-radius: 12px;
426
+ --component-dialog-border-width: 1px;
427
+ --component-dialog-shadow: 0px 20px 25px -5px rgba(6, 11, 20, 0.10), 0px 8px 10px -6px rgba(6, 11, 20, 0.04);
428
+ --component-dialog-close-offset: -4px;
429
+ --component-dialog-footer-border-width: 1px;
430
+ --component-dialog-width: 560px;
431
+ --component-divider-size-xs: 1px;
432
+ --component-divider-size-sm: 2px;
433
+ --component-divider-size-md: 3px;
434
+ --component-divider-size-lg: 4px;
435
+ --component-field-border-width: 1px;
436
+ --component-field-required-border-width: 8px;
437
+ --component-field-error-border-width: 2px;
438
+ --component-field-label-font-weight: 600;
439
+ --component-field-focus-ring-color: #b5a0ff;
440
+ --component-field-focus-ring-width: 3px;
441
+ --component-field-focus-ring-offset: 2px;
442
+ --component-field-hover-background: #f0f6fe;
443
+ --component-field-hover-border-color: #414e61;
444
+ --component-field-active-background: #e1e8f3;
445
+ --component-field-active-border-color: #293343;
446
+ --component-field-read-only-background: #f0f5ff;
447
+ --component-field-read-only-border-color: #b9d2ff;
448
+ --component-field-read-only-text: #000003;
449
+ --component-field-comfortable-height: 52px;
450
+ --component-field-comfortable-padding-inline: 16px;
451
+ --component-field-comfortable-gap: 8px;
452
+ --component-field-comfortable-border-radius: 8px;
453
+ --component-field-default-height: 40px;
454
+ --component-field-default-padding-inline: 12px;
455
+ --component-field-default-gap: 6px;
456
+ --component-field-default-border-radius: 6px;
457
+ --component-field-compact-height: 32px;
458
+ --component-field-compact-padding-inline: 8px;
459
+ --component-field-compact-gap: 4px;
460
+ --component-field-compact-border-radius: 4px;
461
+ --component-field-chevron-size: 20px;
462
+ --component-field-chevron-size-comfortable: 24px;
463
+ --component-field-chevron-size-compact: 16px;
464
+ --component-field-side-label-width: minmax(100px, 160px);
465
+ --component-field-side-label-width-comfortable: minmax(120px, 200px);
466
+ --component-field-accent-compensation: 7px;
467
+ --component-field-accent-compensation-compact: 3px;
468
+ --component-field-compact-label-font-weight: 500;
469
+ --component-field-compact-accent-border-width: 4px;
470
+ --component-field-textarea-padding-block: 10px;
471
+ --component-field-textarea-padding-block-comfortable: 14px;
472
+ --component-field-textarea-padding-block-compact: 6px;
473
+ --component-field-credit-card-badge-font-weight: 600;
474
+ --component-field-credit-card-badge-border-width: 1px;
475
+ --component-field-credit-card-badge-padding-block: 2px;
476
+ --component-field-credit-card-badge-padding-inline: 6px;
477
+ --component-field-credit-card-badge-min-width: 40px;
478
+ --component-field-credit-card-badge-line-height: 1.4;
479
+ --component-field-credit-card-detected-offset: 52px;
480
+ --component-heading-mark-highlight-background-color: #fff066;
481
+ --component-heading-mark-highlight-foreground-color: #060b14;
482
+ --component-heading-mark-highlight-font-weight: 900;
483
+ --component-heading-mark-highlight-padding-block: 0.02em;
484
+ --component-heading-mark-highlight-padding-inline: 0.14em;
485
+ --component-heading-mark-highlight-shadow: 0px 1px 3px 0px rgba(6, 11, 20, 0.10), 0px 1px 2px -1px rgba(6, 11, 20, 0.06);
486
+ --component-heading-mark-underline-color: #5916b5;
487
+ --component-heading-mark-underline-height: 0.32em;
488
+ --component-heading-mark-underline-offset: -0.16em;
489
+ --component-heading-font-family-heading: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
490
+ --component-heading-font-family-display: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
491
+ --component-heading-font-weight-heading: 700;
492
+ --component-heading-font-weight-display: 900;
493
+ --component-heading-font-line-height-heading: 1.25em;
494
+ --component-heading-font-line-height-display: 1.125em;
495
+ --component-icon-button-size: 40px;
496
+ --component-icon-button-icon-size: 24px;
497
+ --component-icon-button-border-radius: 6px;
498
+ --component-icon-button-icon-optical-size: 24;
499
+ --component-icon-button-focus-ring-width: 2px;
500
+ --component-icon-button-focus-ring-offset: 1px;
501
+ --component-inline-padding-block: 0.1em;
502
+ --component-inline-padding-inline: 0.35em;
503
+ --component-inline-kbd-padding-inline: 0.4em;
504
+ --component-inline-border-radius: 0.2em;
505
+ --component-inline-code-font-size: 0.875em;
506
+ --component-inline-emphasis-font-weight: 500;
507
+ --component-inline-font-family-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
508
+ --component-link-color: #2563eb;
509
+ --component-link-color-hover: #0b3fb2;
510
+ --component-link-color-pressed: #002582;
511
+ --component-link-focus-ring-width: 2px;
512
+ --component-link-focus-ring-offset: 2px;
513
+ --component-link-focus-ring-radius: 2px;
514
+ --component-link-underline-offset: 0.2em;
515
+ --component-link-icon-gap: 0.25em;
516
+ --component-menu-width: 260px;
517
+ --component-menu-viewport-offset: 16px;
518
+ --component-menu-border-width: 1px;
519
+ --component-menu-section-label-font-weight: 700;
520
+ --component-menu-item-font-weight: 400;
521
+ --component-menu-item-line-height: 1.5;
522
+ --component-menu-item-focus-ring-width: 3px;
523
+ --component-menu-item-focus-ring-offset: -2px;
524
+ --component-menu-item-disabled-opacity: 0.4;
525
+ --component-menu-item-icon-size: 18px;
526
+ --component-menu-mobile-max-height: 80dvh;
527
+ --component-message-banner-padding: 12px;
528
+ --component-message-banner-border-radius: 8px;
529
+ --component-message-banner-border-width: 1px;
530
+ --component-message-banner-icon-size: 20px;
531
+ --component-message-banner-icon-margin-top: 1px;
532
+ --component-message-banner-icon-optical-size: 20;
533
+ --component-message-banner-title-font-weight: 600;
534
+ --component-message-banner-dismiss-size: 24px;
535
+ --component-message-banner-dismiss-offset: -2px;
536
+ --component-message-banner-focus-ring-width: 2px;
537
+ --component-message-banner-focus-ring-offset: 1px;
538
+ --component-message-banner-system-max-width: 1280px;
539
+ --component-message-badge-padding-block: 4px;
540
+ --component-message-badge-padding-inline: 8px;
541
+ --component-message-badge-border-radius: 6px;
542
+ --component-message-badge-font-weight: 500;
543
+ --component-message-badge-border-width: 1px;
544
+ --component-message-badge-line-height: 1;
545
+ --component-message-badge-icon-size: 1em;
546
+ --component-message-badge-sm-padding-block: 2px;
547
+ --component-message-badge-sm-padding-inline: 6px;
548
+ --component-message-badge-lg-padding-block: 8px;
549
+ --component-message-badge-lg-padding-inline: 12px;
550
+ --component-message-empty-state-icon-size-page: 48px;
551
+ --component-message-empty-state-icon-size-section: 28px;
552
+ --component-message-empty-state-icon-size-card: 20px;
553
+ --component-message-empty-state-icon-optical-size-page: 48;
554
+ --component-message-empty-state-icon-optical-size-section: 28;
555
+ --component-message-empty-state-icon-optical-size-card: 20;
556
+ --component-message-empty-state-wrap-size-page: 88px;
557
+ --component-message-empty-state-wrap-size-section: 56px;
558
+ --component-message-empty-state-wrap-size-card: 36px;
559
+ --component-message-empty-state-max-width-page: 480px;
560
+ --component-message-empty-state-max-width-section: 360px;
561
+ --component-notification-height: 18px;
562
+ --component-notification-dot-size: 8px;
563
+ --component-notification-padding-inline: 5px;
564
+ --component-notification-font-size: 11px;
565
+ --component-notification-font-weight: 600;
566
+ --component-notification-ring-width: 2px;
567
+ --component-page-layout-sidebar-width: 280px;
568
+ --component-page-layout-gap: 24px;
569
+ --component-pagination-item-size: 36px;
570
+ --component-pagination-item-size-sm: 28px;
571
+ --component-pagination-gap: 4px;
572
+ --component-pagination-border-width: 1px;
573
+ --component-pagination-font-weight-default: 400;
574
+ --component-pagination-font-weight-active: 500;
575
+ --component-pagination-focus-ring-width: 2px;
576
+ --component-pagination-focus-ring-offset: 2px;
577
+ --component-pagination-disabled-opacity: 0.35;
578
+ --component-pagination-ellipsis-padding-bottom: 4px;
579
+ --component-radio-group-control-size: 16px;
580
+ --component-radio-group-gap: 8px;
581
+ --component-radio-group-item-gap: 2px;
582
+ --component-radio-group-group-gap: 8px;
583
+ --component-radio-group-items-top-gap: 12px;
584
+ --component-radio-group-input-nudge: 4px;
585
+ --component-radio-group-row-padding-block: 4px;
586
+ --component-radio-group-row-padding-inline: 6px;
587
+ --component-radio-group-content-gap: 2px;
588
+ --component-radio-group-dot-size: 40%;
589
+ --component-radio-group-error-accent-width: 3px;
590
+ --component-radio-group-error-message-font-weight: 600;
591
+ --component-radio-group-comfortable-control-size: 20px;
592
+ --component-radio-group-comfortable-control-size-md: 22px;
593
+ --component-radio-group-comfortable-gap: 10px;
594
+ --component-radio-group-comfortable-item-gap: 2px;
595
+ --component-radio-group-comfortable-group-gap: 10px;
596
+ --component-radio-group-comfortable-items-top-gap: 16px;
597
+ --component-radio-group-comfortable-input-nudge: 2px;
598
+ --component-radio-group-comfortable-row-padding-block: 6px;
599
+ --component-radio-group-comfortable-row-padding-inline: 8px;
600
+ --component-radio-group-compact-control-size: 14px;
601
+ --component-radio-group-compact-gap: 6px;
602
+ --component-radio-group-compact-item-gap: 2px;
603
+ --component-radio-group-compact-group-gap: 4px;
604
+ --component-radio-group-compact-items-top-gap: 8px;
605
+ --component-radio-group-compact-input-nudge: 3px;
606
+ --component-radio-group-compact-row-padding-block: 2px;
607
+ --component-radio-group-compact-row-padding-inline: 4px;
608
+ --component-scrim-color: rgba(15, 0, 42, 0.6);
609
+ --component-scrim-color-dark: rgba(181, 160, 255, 0.6);
610
+ --component-scrim-blur: 2px;
611
+ --component-section-gradient-edge-width: 78%;
612
+ --component-section-gradient-edge-height: 62%;
613
+ --component-section-gradient-center-width: 68%;
614
+ --component-section-gradient-center-height: 76%;
615
+ --component-section-gradient-strength: 24;
616
+ --component-section-gradient-strength-inverse: 18;
617
+ --component-section-gradient-fade: 72;
618
+ --component-segmented-padding: 3px;
619
+ --component-segmented-gap: 2px;
620
+ --component-segmented-segment-padding-block: 4px;
621
+ --component-segmented-segment-padding-inline: 12px;
622
+ --component-segmented-segment-padding-block-sm: 2px;
623
+ --component-segmented-segment-padding-inline-sm: 8px;
624
+ --component-segmented-border-width: 1px;
625
+ --component-segmented-font-weight-default: 400;
626
+ --component-segmented-font-weight-active: 500;
627
+ --component-segmented-focus-ring-width: 2px;
628
+ --component-segmented-focus-ring-offset: -2px;
629
+ --component-side-nav-width: 280px;
630
+ --component-side-nav-padding-block: 8px;
631
+ --component-side-nav-padding-inline: 8px;
632
+ --component-side-nav-border-width: 1px;
633
+ --component-side-nav-header-min-height: 52px;
634
+ --component-side-nav-collapsed-width: 52px;
635
+ --component-side-nav-overlay-z-index: 200;
636
+ --component-side-nav-overlay-shadow-start: 8px 0 40px rgba(0, 0, 0, 0.18);
637
+ --component-side-nav-overlay-shadow-end: -8px 0 40px rgba(0, 0, 0, 0.18);
638
+ --component-side-nav-item-height: 36px;
639
+ --component-side-nav-item-padding-inline: 8px;
640
+ --component-side-nav-item-gap: 8px;
641
+ --component-side-nav-item-border-radius: 6px;
642
+ --component-side-nav-item-icon-size: 20px;
643
+ --component-side-nav-item-indent: 20px;
644
+ --component-side-nav-item-focus-ring-width: 3px;
645
+ --component-side-nav-item-focus-ring-offset: -2px;
646
+ --component-side-nav-item-font-line-height: 1.5;
647
+ --component-side-nav-item-active-font-weight: 500;
648
+ --component-side-nav-item-chevron-size: 18px;
649
+ --component-switch-track-width: 40px;
650
+ --component-switch-track-height: 22px;
651
+ --component-switch-thumb-size: 16px;
652
+ --component-switch-gap: 3px;
653
+ --component-switch-row-gap: 6px;
654
+ --component-switch-row-padding-block: 4px;
655
+ --component-switch-row-padding-inline: 6px;
656
+ --component-switch-content-gap: 1px;
657
+ --component-switch-group-gap: 4px;
658
+ --component-switch-thumb-shadow: 0px 1px 3px 0px rgba(6, 11, 20, 0.10), 0px 1px 2px -1px rgba(6, 11, 20, 0.06);
659
+ --component-switch-message-error-font-weight: 600;
660
+ --component-switch-accessible-icon-size: 60%;
661
+ --component-switch-comfortable-track-width: 56px;
662
+ --component-switch-comfortable-track-height: 28px;
663
+ --component-switch-comfortable-thumb-size: 20px;
664
+ --component-switch-comfortable-gap: 4px;
665
+ --component-switch-comfortable-row-gap: 8px;
666
+ --component-switch-comfortable-row-padding-block: 6px;
667
+ --component-switch-comfortable-row-padding-inline: 8px;
668
+ --component-switch-comfortable-content-gap: 2px;
669
+ --component-switch-comfortable-group-gap: 6px;
670
+ --component-switch-compact-track-width: 32px;
671
+ --component-switch-compact-track-height: 18px;
672
+ --component-switch-compact-thumb-size: 12px;
673
+ --component-switch-compact-gap: 3px;
674
+ --component-switch-compact-row-gap: 4px;
675
+ --component-switch-compact-row-padding-block: 2px;
676
+ --component-switch-compact-row-padding-inline: 4px;
677
+ --component-switch-compact-content-gap: 1px;
678
+ --component-switch-compact-group-gap: 2px;
679
+ --component-tab-padding-block: 8px;
680
+ --component-tab-padding-inline: 16px;
681
+ --component-tab-padding-block-sm: 4px;
682
+ --component-tab-padding-inline-sm: 12px;
683
+ --component-tab-indicator-size: 2px;
684
+ --component-tab-border-width: 1px;
685
+ --component-tab-font-weight-default: 400;
686
+ --component-tab-font-weight-active: 500;
687
+ --component-tab-focus-ring-width: 2px;
688
+ --component-tab-focus-ring-offset: -2px;
689
+ --component-tab-z-index-active: 1;
690
+ --component-tab-margin-bottom: -1px;
691
+ --component-tab-scroll-button-width: 32px;
692
+ --component-tab-scroll-button-icon-size: 20px;
693
+ --component-tab-icon-size: 1.1em;
694
+ --component-tab-icon-above-size: 1.5em;
695
+ --component-tab-count-min-width: 18px;
696
+ --component-tab-count-height: 18px;
697
+ --component-tab-count-padding-inline: 5px;
698
+ --component-tab-count-border-radius: 999px;
699
+ --component-tab-count-font-size: 11px;
700
+ --component-tab-count-line-height: 1;
701
+ --component-tab-folder-curve-adjustment: 0.5px;
702
+ --component-tab-progress-step-size: 24px;
703
+ --component-tab-progress-step-size-md: 32px;
704
+ --component-tab-progress-line-height: 2px;
705
+ --component-tab-progress-step-font-size: 0.75rem;
706
+ --component-tab-progress-step-border-width: 2px;
707
+ --component-tab-progress-completed-icon-size: 16px;
708
+ --component-tab-progress-selected-ring: 0 0 0 3px color-mix(in srgb, var(--semantic-color-action-background) 25%, transparent);
709
+ --component-top-header-height: 64px;
710
+ --component-top-header-padding-inline: 24px;
711
+ --component-top-header-border-width: 1px;
712
+ --component-top-header-z-index: 100;
713
+ --component-paragraph-font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
714
+ --component-paragraph-font-weight: 400;
715
+ --component-paragraph-font-line-height: 1.75em;
716
+ --brand-a1-color-primary: #7c3aed;
717
+ --brand-a1-color-neutral: #64748b;
718
+ --brand-a1-color-accent: #7c3aed;
719
+ --brand-a1-color-info: #2563eb;
720
+ --brand-a1-color-error: #dc2626;
721
+ --brand-a1-color-warn: #d97706;
722
+ --brand-a1-color-success: #16a34a;
723
+ --brand-a1-button-primary-background: #7c3aed;
724
+ --brand-a1-button-primary-background-hover: #5916b5;
725
+ --brand-a1-button-primary-background-pressed: #230051;
726
+ --brand-a1-button-primary-foreground: #fcfbff;
727
+ --brand-a1-button-primary-foreground-hover: #f5f3ff;
728
+ --brand-a1-button-primary-foreground-pressed: #e8e4ff;
729
+ --brand-a1-button-primary-border: #7c3aed;
730
+ --brand-a1-button-secondary-background: #fcfbff;
731
+ --brand-a1-button-secondary-background-hover: #f5f3ff;
732
+ --brand-a1-button-secondary-background-pressed: #e8e4ff;
733
+ --brand-a1-button-secondary-foreground: #5916b5;
734
+ --brand-a1-button-secondary-foreground-hover: #3d0082;
735
+ --brand-a1-button-secondary-foreground-pressed: #230051;
736
+ --brand-a1-button-secondary-border: #7c3aed;
737
+ --brand-a1-button-secondary-border-hover: #3d0082;
738
+ --brand-a1-button-secondary-border-pressed: #230051;
739
+ --brand-a1-button-tertiary-background: #fcfbff;
740
+ --brand-a1-button-tertiary-background-hover: #f5f3ff;
741
+ --brand-a1-button-tertiary-background-pressed: #e8e4ff;
742
+ --brand-a1-button-tertiary-foreground: #5916b5;
743
+ --brand-a1-button-tertiary-foreground-hover: #3d0082;
744
+ --brand-a1-button-tertiary-foreground-pressed: #230051;
745
+ --brand-a1-button-tertiary-border: #fcfbff;
746
+ --brand-a1-button-tertiary-border-hover: #f5f3ff;
747
+ --brand-a1-button-tertiary-border-pressed: #e8e4ff;
748
+ --brand-a1-button-focus-ring: #b5a0ff;
749
+ --brand-a1-font-size-body-xs: 0.75rem;
750
+ --brand-a1-font-size-body-sm: 0.875rem;
751
+ --brand-a1-font-size-body-md: 1rem;
752
+ --brand-a1-font-size-body-lg: 1.125rem;
753
+ --brand-a1-font-size-body-xl: 1.25rem;
754
+ --brand-a1-font-size-heading-xxl: 2.5rem;
755
+ --brand-a1-font-size-heading-xl: 2rem;
756
+ --brand-a1-font-size-heading-lg: 1.75rem;
757
+ --brand-a1-font-size-heading-md: 1.5rem;
758
+ --brand-a1-font-size-heading-sm: 1.25rem;
759
+ --brand-a1-font-size-heading-xs: 1.125rem;
760
+ --brand-a1-font-size-display-sm: 1.5rem;
761
+ --brand-a1-font-size-display-md: 1.75rem;
762
+ --brand-a1-font-size-display-lg: 2rem;
763
+ --brand-a1-font-size-display-xl: 2.5rem;
764
+ --brand-a1-font-size-display-xxl: 3.5rem;
765
+ --brand-a1-font-size-display-jumbo: 4.5rem;
766
+ --brand-a1-font-size-display-x-jumbo: 6rem;
767
+ --brand-a1-font-weight-body: 400;
768
+ --brand-a1-font-weight-heading: 700;
769
+ --brand-a1-font-weight-display: 900;
770
+ --brand-a1-font-line-height-body: 1.5em;
771
+ --brand-a1-font-line-height-heading: 1.25em;
772
+ --brand-a1-font-line-height-display: 1.125em;
773
+ --container-query-compact-min: 0px;
774
+ --container-query-compact-max: 480px;
775
+ --container-query-standard-min: 480px;
776
+ --theme-a1-light-button-primary-border-width: 0px;
777
+ --theme-a1-light-button-primary-background: #7c3aed;
778
+ --theme-a1-light-button-primary-background-hover: #5916b5;
779
+ --theme-a1-light-button-primary-background-pressed: #230051;
780
+ --theme-a1-light-button-primary-foreground: #fcfbff;
781
+ --theme-a1-light-button-primary-foreground-pressed: #e8e4ff;
782
+ --theme-a1-light-button-primary-border: #7c3aed;
783
+ --theme-a1-light-button-secondary-border-width: 1px;
784
+ --theme-a1-light-button-secondary-background: #fcfbff;
785
+ --theme-a1-light-button-secondary-background-hover: #f5f3ff;
786
+ --theme-a1-light-button-secondary-background-pressed: #e8e4ff;
787
+ --theme-a1-light-button-secondary-foreground: #5916b5;
788
+ --theme-a1-light-button-secondary-foreground-hover: #3d0082;
789
+ --theme-a1-light-button-secondary-foreground-pressed: #230051;
790
+ --theme-a1-light-button-secondary-border: #7c3aed;
791
+ --theme-a1-light-button-secondary-border-hover: #3d0082;
792
+ --theme-a1-light-button-secondary-border-pressed: #230051;
793
+ --theme-a1-light-button-tertiary-border-width: 1px;
794
+ --theme-a1-light-button-tertiary-background: #fcfbff;
795
+ --theme-a1-light-button-tertiary-background-hover: #f5f3ff;
796
+ --theme-a1-light-button-tertiary-background-pressed: #e8e4ff;
797
+ --theme-a1-light-button-tertiary-foreground: #5916b5;
798
+ --theme-a1-light-button-tertiary-foreground-hover: #3d0082;
799
+ --theme-a1-light-button-tertiary-foreground-pressed: #230051;
800
+ --theme-a1-light-button-tertiary-border: #fcfbff;
801
+ --theme-a1-light-button-tertiary-border-hover: #f5f3ff;
802
+ --theme-a1-light-button-tertiary-border-pressed: #e8e4ff;
803
+ --theme-a1-light-button-border-radius: 6px;
804
+ --theme-a1-light-button-padding-block: 10px;
805
+ --theme-a1-light-button-padding-inline: 12px;
806
+ --theme-a1-light-button-min-height: 40px;
807
+ --theme-a1-light-button-gap: 0.5rem;
808
+ --theme-a1-light-button-border-width: 0px;
809
+ --theme-a1-light-button-focus-ring-width: 3px;
810
+ --theme-a1-light-button-focus-ring-offset: 2px;
811
+ --theme-a1-light-button-disabled-opacity: 0.55;
812
+ --theme-a1-light-button-focus-ring: #b5a0ff;
813
+ --theme-a1-light-color-text-default: #060b14;
814
+ --theme-a1-light-color-text-muted: #64748b;
815
+ --theme-a1-light-color-text-inverse: #ffffff;
816
+ --theme-a1-light-color-surface-page: #ffffff;
817
+ --theme-a1-light-color-surface-panel: #f0f6fe;
818
+ --theme-a1-light-color-surface-raised: #e1e8f3;
819
+ --theme-a1-light-color-border-subtle: #c8d2e0;
820
+ --theme-a1-light-color-border-default: #a6b2c4;
821
+ --theme-a1-light-color-border-strong: #64748b;
822
+ --theme-a1-light-color-action-background: #7c3aed;
823
+ --theme-a1-light-color-action-background-hover: #5916b5;
824
+ --theme-a1-light-color-action-background-pressed: #230051;
825
+ --theme-a1-light-color-action-foreground: #e8e4ff;
826
+ --theme-a1-light-color-action-foreground-pressed: #b5a0ff;
827
+ --theme-a1-light-color-action-surface: #f5f3ff;
828
+ --theme-a1-light-color-action-border: #b5a0ff;
829
+ --theme-a1-light-color-status-info-background: #2563eb;
830
+ --theme-a1-light-color-status-info-surface: #f0f5ff;
831
+ --theme-a1-light-color-status-info-border: #87b0ff;
832
+ --theme-a1-light-color-status-info-foreground: #fafcff;
833
+ --theme-a1-light-color-status-error-background: #dc2626;
834
+ --theme-a1-light-color-status-error-surface: #fff2f0;
835
+ --theme-a1-light-color-status-error-border: #ff8b7e;
836
+ --theme-a1-light-color-status-error-foreground: #fffbfa;
837
+ --theme-a1-light-color-status-warn-background: #4f2700;
838
+ --theme-a1-light-color-status-warn-surface: #fff3ea;
839
+ --theme-a1-light-color-status-warn-border: #e59f68;
840
+ --theme-a1-light-color-status-warn-foreground: #fffbf8;
841
+ --theme-a1-light-color-status-success-background: #003f17;
842
+ --theme-a1-light-color-status-success-surface: #dfffe4;
843
+ --theme-a1-light-color-status-success-border: #78c687;
844
+ --theme-a1-light-color-status-success-foreground: #f5fff6;
845
+ --theme-a1-light-font-family-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
846
+ --theme-a1-light-font-family-heading: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
847
+ --theme-a1-light-font-family-display: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
848
+ --theme-a1-light-font-family-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
849
+ --theme-a1-light-font-size-body-xs: 0.75rem;
850
+ --theme-a1-light-font-size-body-sm: 0.875rem;
851
+ --theme-a1-light-font-size-body-md: 1rem;
852
+ --theme-a1-light-font-size-body-lg: 1.125rem;
853
+ --theme-a1-light-font-size-body-xl: 1.25rem;
854
+ --theme-a1-light-font-size-heading-xl: 2rem;
855
+ --theme-a1-light-font-size-heading-lg: 1.75rem;
856
+ --theme-a1-light-font-size-heading-md: 1.5rem;
857
+ --theme-a1-light-font-size-heading-sm: 1.25rem;
858
+ --theme-a1-light-font-size-heading-xs: 1.125rem;
859
+ --theme-a1-light-font-size-display-sm: 1.5rem;
860
+ --theme-a1-light-font-size-display-md: 1.75rem;
861
+ --theme-a1-light-font-size-display-lg: 2rem;
862
+ --theme-a1-light-font-size-display-xl: 2.5rem;
863
+ --theme-a1-light-font-size-display-xxl: 3.5rem;
864
+ --theme-a1-light-font-size-display-jumbo: 4.5rem;
865
+ --theme-a1-light-font-size-display-x-jumbo: 6rem;
866
+ --theme-a1-light-font-weight-body: 400;
867
+ --theme-a1-light-font-weight-heading: 700;
868
+ --theme-a1-light-font-weight-display: 900;
869
+ --theme-a1-light-font-line-height-body: 1.5em;
870
+ --theme-a1-light-font-line-height-heading: 1.25em;
871
+ --theme-a1-light-font-line-height-display: 1.125em;
872
+ --theme-a1-light-font-user-size-small: 0.875rem;
873
+ --theme-a1-light-font-user-size-medium: 1rem;
874
+ --theme-a1-light-font-user-size-large: 1.125rem;
875
+ --theme-a1-light-font-user-size-xl: 1.25rem;
876
+ --theme-a1-accessible-font-family-body: 'Atkinson Hyperlegible', Inter, ui-sans-serif, system-ui, sans-serif;
877
+ --theme-a1-accessible-font-family-heading: 'Atkinson Hyperlegible', Inter, ui-sans-serif, system-ui, sans-serif;
878
+ --theme-a1-accessible-font-family-display: 'Atkinson Hyperlegible', Inter, ui-sans-serif, system-ui, sans-serif;
879
+ --theme-a1-accessible-font-family-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
880
+ --theme-a1-accessible-font-size-body-xs: 0.84375rem;
881
+ --theme-a1-accessible-font-size-body-sm: 0.984375rem;
882
+ --theme-a1-accessible-font-size-body-md: 1.125rem;
883
+ --theme-a1-accessible-font-size-body-lg: 1.265625rem;
884
+ --theme-a1-accessible-font-size-body-xl: 1.40625rem;
885
+ --theme-a1-accessible-font-size-heading-xl: 2.25rem;
886
+ --theme-a1-accessible-font-size-heading-lg: 1.96875rem;
887
+ --theme-a1-accessible-font-size-heading-md: 1.6875rem;
888
+ --theme-a1-accessible-font-size-heading-sm: 1.40625rem;
889
+ --theme-a1-accessible-font-size-heading-xs: 1.265625rem;
890
+ --theme-a1-accessible-font-size-display-sm: 1.6875rem;
891
+ --theme-a1-accessible-font-size-display-md: 1.96875rem;
892
+ --theme-a1-accessible-font-size-display-lg: 2.25rem;
893
+ --theme-a1-accessible-font-size-display-xl: 2.8125rem;
894
+ --theme-a1-accessible-font-size-display-xxl: 3.9375rem;
895
+ --theme-a1-accessible-font-size-display-jumbo: 5.0625rem;
896
+ --theme-a1-accessible-font-size-display-x-jumbo: 6.75rem;
897
+ --theme-a1-accessible-font-weight-body: 400;
898
+ --theme-a1-accessible-font-weight-heading: 700;
899
+ --theme-a1-accessible-font-weight-display: 900;
900
+ --theme-a1-accessible-font-line-height-body: 1.5em;
901
+ --theme-a1-accessible-font-line-height-heading: 1.25em;
902
+ --theme-a1-accessible-font-line-height-display: 1.125em;
903
+ --theme-a1-accessible-font-user-size-small: 0.875rem;
904
+ --theme-a1-accessible-font-user-size-medium: 1rem;
905
+ --theme-a1-accessible-font-user-size-large: 1.125rem;
906
+ --theme-a1-accessible-font-user-size-xl: 1.25rem;
907
+ --theme-a1-catlympics-font-family-body: 'Nunito Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
908
+ --theme-a1-catlympics-font-family-heading: 'Patrick Hand SC', system-ui, -apple-system, sans-serif;
909
+ --theme-a1-catlympics-font-family-display: 'Baloo 2', system-ui, -apple-system, sans-serif;
910
+ --theme-a1-catlympics-font-family-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
911
+ --theme-a1-catlympics-font-weight-body: 400;
912
+ --theme-a1-catlympics-font-weight-heading: 400;
913
+ --theme-a1-catlympics-font-weight-display: 700;
914
+ --theme-a1-heritage-font-family-body: Nunito, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
915
+ --theme-a1-heritage-font-family-heading: 'Libre Baskerville', Georgia, Cambria, 'Times New Roman', serif;
916
+ --theme-a1-heritage-font-family-display: 'Roboto Slab', Rockwell, Clarendon, Georgia, serif;
917
+ --theme-a1-heritage-font-family-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
918
+ --theme-a1-heritage-font-size-body-xs: 0.75rem;
919
+ --theme-a1-heritage-font-size-body-sm: 0.875rem;
920
+ --theme-a1-heritage-font-size-body-md: 1rem;
921
+ --theme-a1-heritage-font-size-body-lg: 1.125rem;
922
+ --theme-a1-heritage-font-size-body-xl: 1.25rem;
923
+ --theme-a1-heritage-font-size-heading-xl: 2rem;
924
+ --theme-a1-heritage-font-size-heading-lg: 1.75rem;
925
+ --theme-a1-heritage-font-size-heading-md: 1.5rem;
926
+ --theme-a1-heritage-font-size-heading-sm: 1.25rem;
927
+ --theme-a1-heritage-font-size-heading-xs: 1.125rem;
928
+ --theme-a1-heritage-font-size-display-sm: 1.5rem;
929
+ --theme-a1-heritage-font-size-display-md: 1.75rem;
930
+ --theme-a1-heritage-font-size-display-lg: 2rem;
931
+ --theme-a1-heritage-font-size-display-xl: 2.5rem;
932
+ --theme-a1-heritage-font-size-display-xxl: 3.5rem;
933
+ --theme-a1-heritage-font-size-display-jumbo: 4.5rem;
934
+ --theme-a1-heritage-font-size-display-x-jumbo: 6rem;
935
+ --theme-a1-heritage-font-weight-body: 400;
936
+ --theme-a1-heritage-font-weight-heading: 400;
937
+ --theme-a1-heritage-font-weight-display: 300;
938
+ --theme-a1-heritage-font-line-height-body: 1.5em;
939
+ --theme-a1-heritage-font-line-height-heading: 1.25em;
940
+ --theme-a1-heritage-font-line-height-display: 1.125em;
941
+ --theme-a1-heritage-font-user-size-small: 0.875rem;
942
+ --theme-a1-heritage-font-user-size-medium: 1rem;
943
+ --theme-a1-heritage-font-user-size-large: 1.125rem;
944
+ --theme-a1-heritage-font-user-size-xl: 1.25rem;
945
+ }