@gtivr4/a1-design-system-react 0.3.0 → 0.4.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 (30) hide show
  1. package/package.json +1 -1
  2. package/src/color-scheme.css +10 -0
  3. package/src/components/choice-group/ChoiceGroup.jsx +2 -0
  4. package/src/components/choice-group/choice-group.css +11 -0
  5. package/src/components/data-table/DataTable.jsx +5 -5
  6. package/src/components/data-table/data-table-filters.css +2 -2
  7. package/src/components/data-table/data-table.css +2 -2
  8. package/src/components/field/SelectField.jsx +1 -1
  9. package/src/components/field/TextField.jsx +1 -1
  10. package/src/components/field/TextareaField.jsx +1 -1
  11. package/src/components/field/field.css +8 -8
  12. package/src/components/field-row/FieldRow.jsx +2 -2
  13. package/src/components/fieldset/Fieldset.jsx +1 -1
  14. package/src/components/grid/Grid.jsx +1 -0
  15. package/src/components/heading/Heading.jsx +1 -1
  16. package/src/components/heading/heading.css +2 -0
  17. package/src/components/notification/Notification.jsx +4 -4
  18. package/src/components/notification/notification.css +1 -1
  19. package/src/components/paragraph/Paragraph.jsx +1 -1
  20. package/src/components/paragraph/paragraph.css +2 -0
  21. package/src/components/section/Section.jsx +9 -9
  22. package/src/components/section/section.css +14 -2
  23. package/src/components/segmented-control/segmented.css +0 -1
  24. package/src/components/status-bar/StatusBar.jsx +92 -0
  25. package/src/components/status-bar/status-bar.css +146 -0
  26. package/src/components/token-select/token-select.css +1 -1
  27. package/src/components/top-header/top-header.css +4 -4
  28. package/src/index.js +1 -0
  29. package/src/themes.css +1 -0
  30. package/src/tokens.css +336 -326
package/src/tokens.css CHANGED
@@ -95,20 +95,20 @@
95
95
  --base-color-success-800: #00250a;
96
96
  --base-color-success-900: #001003;
97
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;
98
+ --base-radius-sm: 0.25rem;
99
+ --base-radius-md: 0.375rem;
100
+ --base-radius-control: 0.375rem;
101
+ --base-radius-lg: 0.5rem;
102
+ --base-radius-xl: 0.75rem;
103
+ --base-space-button-padding-block: 0.625rem;
104
+ --base-space-button-padding-inline: 0.75rem;
105
+ --base-space-button-min-height: 2.5rem;
106
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;
107
+ --base-space-button-border-width: 0;
108
+ --base-space-button-focus-ring-width: 0.1875rem;
109
+ --base-space-button-focus-ring-offset: 0.125rem;
110
110
  --base-space-button-disabled-opacity: 0.55;
111
- --base-space-card-padding: 20px;
111
+ --base-space-card-padding: 1.25rem;
112
112
  --base-space-card-border-width: 1px;
113
113
  --base-shadow-100: 0px 1px 2px 0px rgba(6, 11, 20, 0.05);
114
114
  --base-shadow-200: 0px 1px 3px 0px rgba(6, 11, 20, 0.10), 0px 1px 2px -1px rgba(6, 11, 20, 0.06);
@@ -116,26 +116,26 @@
116
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
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
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;
119
+ --base-spacing-2: 0.125rem;
120
+ --base-spacing-4: 0.25rem;
121
+ --base-spacing-6: 0.375rem;
122
+ --base-spacing-8: 0.5rem;
123
+ --base-spacing-12: 0.75rem;
124
+ --base-spacing-16: 1rem;
125
+ --base-spacing-20: 1.25rem;
126
+ --base-spacing-24: 1.5rem;
127
+ --base-spacing-32: 2rem;
128
+ --base-spacing-40: 2.5rem;
129
+ --base-spacing-64: 4rem;
130
+ --base-spacing-96: 6rem;
131
+ --base-spacing-128: 8rem;
132
+ --base-spacing-neg-4: -0.25rem;
133
+ --base-spacing-neg-8: -0.5rem;
134
+ --base-spacing-neg-12: -0.75rem;
135
+ --base-spacing-neg-16: -1rem;
136
+ --base-spacing-neg-20: -1.25rem;
137
+ --base-spacing-neg-24: -1.5rem;
138
+ --base-spacing-neg-32: -2rem;
139
139
  --base-icon-optical-size: 24;
140
140
  --base-font-size-root: 1rem;
141
141
  --base-font-size-user-small: 0.875rem;
@@ -210,7 +210,7 @@
210
210
  --semantic-color-status-success-surface: #dfffe4;
211
211
  --semantic-color-status-success-border: #78c687;
212
212
  --semantic-color-status-success-foreground: #f5fff6;
213
- --semantic-radius-control: 6px;
213
+ --semantic-radius-control: 0.375rem;
214
214
  --semantic-motion-duration-instant: 0ms;
215
215
  --semantic-motion-duration-quick: 100ms;
216
216
  --semantic-motion-duration-fast: 150ms;
@@ -229,10 +229,10 @@
229
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
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
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;
232
+ --semantic-spacing-gap-xs: 0.5rem;
233
+ --semantic-spacing-gap-sm: 0.75rem;
234
+ --semantic-spacing-gap-md: 1rem;
235
+ --semantic-spacing-gap-lg: 1.5rem;
236
236
  --semantic-font-size-body-xs: 0.75rem;
237
237
  --semantic-font-size-body-sm: 0.875rem;
238
238
  --semantic-font-size-body-md: 1rem;
@@ -264,7 +264,7 @@
264
264
  --component-button-primary-foreground-hover: #f5f3ff;
265
265
  --component-button-primary-foreground-pressed: #e8e4ff;
266
266
  --component-button-primary-border: #7c3aed;
267
- --component-button-primary-border-width: 0px;
267
+ --component-button-primary-border-width: 0;
268
268
  --component-button-secondary-background: #fcfbff;
269
269
  --component-button-secondary-background-hover: #f5f3ff;
270
270
  --component-button-secondary-background-pressed: #e8e4ff;
@@ -286,64 +286,64 @@
286
286
  --component-button-tertiary-border-pressed: #e8e4ff;
287
287
  --component-button-tertiary-border-width: 1px;
288
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;
289
+ --component-button-border-radius: 0.375rem;
290
+ --component-button-pill-border-radius: 624.9375rem;
291
+ --component-button-padding-block: 0.625rem;
292
+ --component-button-padding-inline: 0.75rem;
293
+ --component-button-min-height: 2.5rem;
294
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;
295
+ --component-button-border-width: 0;
296
+ --component-button-focus-ring-width: 0.1875rem;
297
+ --component-button-focus-ring-offset: 0.125rem;
298
298
  --component-button-disabled-opacity: 0.55;
299
- --component-button-icon-size: 20px;
299
+ --component-button-icon-size: 1.25rem;
300
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;
301
+ --component-button-small-height: 1.75rem;
302
+ --component-button-small-border-radius: 0.25rem;
303
+ --component-button-small-icon-size: 1.25rem;
304
304
  --component-button-small-icon-optical-size: 20;
305
- --component-button-medium-icon-size: 24px;
305
+ --component-button-medium-icon-size: 1.5rem;
306
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;
307
+ --component-button-large-height: 3.5rem;
308
+ --component-button-large-secondary-border-width: 0.125rem;
309
+ --component-button-large-icon-size: 2.5rem;
310
310
  --component-button-large-icon-optical-size: 40;
311
311
  --component-button-font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
312
312
  --component-button-font-size: 1rem;
313
313
  --component-button-font-weight: 500;
314
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;
315
+ --component-accordion-trigger-height-sm: 2rem;
316
+ --component-accordion-trigger-height-md: 2.5rem;
317
+ --component-accordion-trigger-height-lg: 3.25rem;
318
+ --component-accordion-padding-inline-sm: 0.5rem;
319
+ --component-accordion-padding-inline-md: 0.75rem;
320
+ --component-accordion-padding-inline-lg: 1rem;
321
+ --component-accordion-icon-size-sm: 1.125rem;
322
+ --component-accordion-icon-size-md: 1.25rem;
323
+ --component-accordion-icon-size-lg: 1.5rem;
324
+ --component-accordion-border-radius: 0.375rem;
325
+ --component-accordion-focus-ring-width: 0.125rem;
326
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;
327
+ --component-blockquote-border-width: 0.25rem;
328
+ --component-blockquote-border-radius: 0.5rem;
329
+ --component-blockquote-padding-block: 1.25rem;
330
+ --component-blockquote-padding-inline: 1.5rem;
331
331
  --component-blockquote-mark-size: 5rem;
332
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;
333
+ --component-calendar-month-gap: 2rem;
334
+ --component-calendar-heading-padding-block: 0.75rem;
335
+ --component-calendar-heading-padding-block-compact: 0.5rem;
336
+ --component-calendar-heading-gap: 0.5rem;
337
+ --component-calendar-cell-padding: 0.25rem;
338
+ --component-calendar-cell-padding-compact: 0.125rem;
339
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;
340
+ --component-calendar-cell-size: 2rem;
341
+ --component-calendar-cell-size-compact: 1.5rem;
342
+ --component-calendar-cell-border-radius: 0.25rem;
343
+ --component-card-padding: 1.25rem;
344
+ --component-card-border-radius: 0.5rem;
345
345
  --component-card-border-width: 1px;
346
- --component-card-icon-size: 20px;
346
+ --component-card-icon-size: 1.25rem;
347
347
  --component-card-icon-optical-size: 20;
348
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
349
  --component-card-title-font-size: 1.25rem;
@@ -352,93 +352,93 @@
352
352
  --component-card-body-font-size: 1rem;
353
353
  --component-card-body-font-weight: 400;
354
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;
355
+ --component-checkbox-group-box-size: 1rem;
356
+ --component-checkbox-group-gap: 0.5rem;
357
+ --component-checkbox-group-item-gap: 0.125rem;
358
+ --component-checkbox-group-group-gap: 0.5rem;
359
+ --component-checkbox-group-items-top-gap: 0.75rem;
360
+ --component-checkbox-group-input-nudge: 0.25rem;
361
+ --component-checkbox-group-row-padding-block: 0.25rem;
362
+ --component-checkbox-group-row-padding-inline: 0.375rem;
363
+ --component-checkbox-group-content-gap: 0.125rem;
364
364
  --component-checkbox-group-icon-size: 75%;
365
365
  --component-checkbox-group-disabled-opacity: 0.6;
366
- --component-checkbox-group-error-accent-width: 3px;
366
+ --component-checkbox-group-error-accent-width: 0.1875rem;
367
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;
368
+ --component-checkbox-group-comfortable-box-size: 1.25rem;
369
+ --component-checkbox-group-comfortable-box-size-md: 1.375rem;
370
+ --component-checkbox-group-comfortable-gap: 0.625rem;
371
+ --component-checkbox-group-comfortable-item-gap: 0.125rem;
372
+ --component-checkbox-group-comfortable-group-gap: 0.625rem;
373
+ --component-checkbox-group-comfortable-items-top-gap: 1rem;
374
+ --component-checkbox-group-comfortable-input-nudge: 0.125rem;
375
+ --component-checkbox-group-comfortable-row-padding-block: 0.375rem;
376
+ --component-checkbox-group-comfortable-row-padding-inline: 0.5rem;
377
+ --component-checkbox-group-compact-box-size: 0.875rem;
378
+ --component-checkbox-group-compact-gap: 0.375rem;
379
+ --component-checkbox-group-compact-item-gap: 0.125rem;
380
+ --component-checkbox-group-compact-group-gap: 0.25rem;
381
+ --component-checkbox-group-compact-items-top-gap: 0.5rem;
382
+ --component-checkbox-group-compact-input-nudge: 0.1875rem;
383
+ --component-checkbox-group-compact-row-padding-block: 0.125rem;
384
+ --component-checkbox-group-compact-row-padding-inline: 0.25rem;
385
+ --component-choice-group-border-radius: 0.5rem;
386
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;
387
+ --component-choice-group-gap-sm: 0.5rem;
388
+ --component-choice-group-gap-md: 0.75rem;
389
+ --component-choice-group-gap-lg: 1rem;
390
+ --component-choice-group-compact-padding: 0.5rem;
391
+ --component-choice-group-compact-icon-size: 1.25rem;
392
+ --component-choice-group-compact-indicator-size: 0.75rem;
393
+ --component-choice-group-compact-content-gap: 0.25rem;
394
+ --component-choice-group-compact-min-width: 6.25rem;
395
+ --component-choice-group-compact-group-gap: 0.25rem;
396
+ --component-choice-group-compact-items-top-gap: 0.5rem;
397
+ --component-choice-group-default-padding: 0.75rem;
398
+ --component-choice-group-default-icon-size: 1.5rem;
399
+ --component-choice-group-default-indicator-size: 1rem;
400
+ --component-choice-group-default-content-gap: 0.375rem;
401
+ --component-choice-group-default-min-width: 8.75rem;
402
+ --component-choice-group-default-group-gap: 0.5rem;
403
+ --component-choice-group-default-items-top-gap: 0.75rem;
404
+ --component-choice-group-comfortable-padding: 1rem;
405
+ --component-choice-group-comfortable-icon-size: 2rem;
406
+ --component-choice-group-comfortable-indicator-size: 1.25rem;
407
+ --component-choice-group-comfortable-content-gap: 0.5rem;
408
+ --component-choice-group-comfortable-min-width: 12.5rem;
409
+ --component-choice-group-comfortable-group-gap: 0.5rem;
410
+ --component-choice-group-comfortable-items-top-gap: 1rem;
411
411
  --component-data-table-border-width: 1px;
412
412
  --component-data-table-header-font-weight: 500;
413
- --component-data-table-focus-ring-width: 2px;
413
+ --component-data-table-focus-ring-width: 0.125rem;
414
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;
415
+ --component-data-table-density-compact-cell-padding-block: 0.375rem;
416
+ --component-data-table-density-compact-cell-padding-inline: 0.75rem;
417
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;
418
+ --component-data-table-density-default-cell-padding-block: 0.75rem;
419
+ --component-data-table-density-default-cell-padding-inline: 1rem;
420
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;
421
+ --component-data-table-density-comfortable-cell-padding-block: 1.25rem;
422
+ --component-data-table-density-comfortable-cell-padding-inline: 1.25rem;
423
423
  --component-data-table-density-comfortable-font-size: 0.875rem;
424
- --component-dialog-padding: 24px;
425
- --component-dialog-border-radius: 12px;
424
+ --component-dialog-padding: 1.5rem;
425
+ --component-dialog-border-radius: 0.75rem;
426
426
  --component-dialog-border-width: 1px;
427
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
428
  --component-dialog-close-offset: -4px;
429
429
  --component-dialog-footer-border-width: 1px;
430
- --component-dialog-width: 560px;
430
+ --component-dialog-width: 35rem;
431
431
  --component-divider-size-xs: 1px;
432
- --component-divider-size-sm: 2px;
433
- --component-divider-size-md: 3px;
434
- --component-divider-size-lg: 4px;
432
+ --component-divider-size-sm: 0.125rem;
433
+ --component-divider-size-md: 0.1875rem;
434
+ --component-divider-size-lg: 0.25rem;
435
435
  --component-field-border-width: 1px;
436
- --component-field-required-border-width: 8px;
437
- --component-field-error-border-width: 2px;
436
+ --component-field-required-border-width: 0.5rem;
437
+ --component-field-error-border-width: 0.125rem;
438
438
  --component-field-label-font-weight: 600;
439
439
  --component-field-focus-ring-color: #b5a0ff;
440
- --component-field-focus-ring-width: 3px;
441
- --component-field-focus-ring-offset: 2px;
440
+ --component-field-focus-ring-width: 0.1875rem;
441
+ --component-field-focus-ring-offset: 0.125rem;
442
442
  --component-field-hover-background: #f0f6fe;
443
443
  --component-field-hover-border-color: #414e61;
444
444
  --component-field-active-background: #e1e8f3;
@@ -446,37 +446,37 @@
446
446
  --component-field-read-only-background: #f0f5ff;
447
447
  --component-field-read-only-border-color: #b9d2ff;
448
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;
449
+ --component-field-comfortable-height: 3.25rem;
450
+ --component-field-comfortable-padding-inline: 1rem;
451
+ --component-field-comfortable-gap: 0.5rem;
452
+ --component-field-comfortable-border-radius: 0.5rem;
453
+ --component-field-default-height: 2.5rem;
454
+ --component-field-default-padding-inline: 0.75rem;
455
+ --component-field-default-gap: 0.375rem;
456
+ --component-field-default-border-radius: 0.375rem;
457
+ --component-field-compact-height: 2rem;
458
+ --component-field-compact-padding-inline: 0.5rem;
459
+ --component-field-compact-gap: 0.25rem;
460
+ --component-field-compact-border-radius: 0.25rem;
461
+ --component-field-chevron-size: 1.25rem;
462
+ --component-field-chevron-size-comfortable: 1.5rem;
463
+ --component-field-chevron-size-compact: 1rem;
464
464
  --component-field-side-label-width: minmax(100px, 160px);
465
465
  --component-field-side-label-width-comfortable: minmax(120px, 200px);
466
- --component-field-accent-compensation: 7px;
467
- --component-field-accent-compensation-compact: 3px;
466
+ --component-field-accent-compensation: 0.4375rem;
467
+ --component-field-accent-compensation-compact: 0.1875rem;
468
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;
469
+ --component-field-compact-accent-border-width: 0.25rem;
470
+ --component-field-textarea-padding-block: 0.625rem;
471
+ --component-field-textarea-padding-block-comfortable: 0.875rem;
472
+ --component-field-textarea-padding-block-compact: 0.375rem;
473
473
  --component-field-credit-card-badge-font-weight: 600;
474
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;
475
+ --component-field-credit-card-badge-padding-block: 0.125rem;
476
+ --component-field-credit-card-badge-padding-inline: 0.375rem;
477
+ --component-field-credit-card-badge-min-width: 2.5rem;
478
478
  --component-field-credit-card-badge-line-height: 1.4;
479
- --component-field-credit-card-detected-offset: 52px;
479
+ --component-field-credit-card-detected-offset: 3.25rem;
480
480
  --component-heading-mark-highlight-background-color: #fff066;
481
481
  --component-heading-mark-highlight-foreground-color: #060b14;
482
482
  --component-heading-mark-highlight-font-weight: 900;
@@ -492,11 +492,11 @@
492
492
  --component-heading-font-weight-display: 900;
493
493
  --component-heading-font-line-height-heading: 1.25em;
494
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;
495
+ --component-icon-button-size: 2.5rem;
496
+ --component-icon-button-icon-size: 1.5rem;
497
+ --component-icon-button-border-radius: 0.375rem;
498
498
  --component-icon-button-icon-optical-size: 24;
499
- --component-icon-button-focus-ring-width: 2px;
499
+ --component-icon-button-focus-ring-width: 0.125rem;
500
500
  --component-icon-button-focus-ring-offset: 1px;
501
501
  --component-inline-padding-block: 0.1em;
502
502
  --component-inline-padding-inline: 0.35em;
@@ -508,106 +508,106 @@
508
508
  --component-link-color: #2563eb;
509
509
  --component-link-color-hover: #0b3fb2;
510
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;
511
+ --component-link-focus-ring-width: 0.125rem;
512
+ --component-link-focus-ring-offset: 0.125rem;
513
+ --component-link-focus-ring-radius: 0.125rem;
514
514
  --component-link-underline-offset: 0.2em;
515
515
  --component-link-icon-gap: 0.25em;
516
- --component-menu-width: 260px;
517
- --component-menu-viewport-offset: 16px;
516
+ --component-menu-width: 16.25rem;
517
+ --component-menu-viewport-offset: 1rem;
518
518
  --component-menu-border-width: 1px;
519
519
  --component-menu-section-label-font-weight: 700;
520
520
  --component-menu-item-font-weight: 400;
521
521
  --component-menu-item-line-height: 1.5;
522
- --component-menu-item-focus-ring-width: 3px;
523
- --component-menu-item-focus-ring-offset: -2px;
522
+ --component-menu-item-focus-ring-width: 0.1875rem;
523
+ --component-menu-item-focus-ring-offset: -0.125rem;
524
524
  --component-menu-item-disabled-opacity: 0.4;
525
- --component-menu-item-icon-size: 18px;
525
+ --component-menu-item-icon-size: 1.125rem;
526
526
  --component-menu-mobile-max-height: 80dvh;
527
- --component-message-banner-padding: 12px;
528
- --component-message-banner-border-radius: 8px;
527
+ --component-message-banner-padding: 0.75rem;
528
+ --component-message-banner-border-radius: 0.5rem;
529
529
  --component-message-banner-border-width: 1px;
530
- --component-message-banner-icon-size: 20px;
530
+ --component-message-banner-icon-size: 1.25rem;
531
531
  --component-message-banner-icon-margin-top: 1px;
532
532
  --component-message-banner-icon-optical-size: 20;
533
533
  --component-message-banner-title-font-weight: 600;
534
- --component-message-banner-dismiss-size: 24px;
534
+ --component-message-banner-dismiss-size: 1.5rem;
535
535
  --component-message-banner-dismiss-offset: -2px;
536
- --component-message-banner-focus-ring-width: 2px;
536
+ --component-message-banner-focus-ring-width: 0.125rem;
537
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;
538
+ --component-message-banner-system-max-width: 80rem;
539
+ --component-message-badge-padding-block: 0.25rem;
540
+ --component-message-badge-padding-inline: 0.5rem;
541
+ --component-message-badge-border-radius: 0.375rem;
542
542
  --component-message-badge-font-weight: 500;
543
543
  --component-message-badge-border-width: 1px;
544
544
  --component-message-badge-line-height: 1;
545
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;
546
+ --component-message-badge-sm-padding-block: 0.125rem;
547
+ --component-message-badge-sm-padding-inline: 0.375rem;
548
+ --component-message-badge-lg-padding-block: 0.5rem;
549
+ --component-message-badge-lg-padding-inline: 0.75rem;
550
+ --component-message-empty-state-icon-size-page: 3rem;
551
+ --component-message-empty-state-icon-size-section: 1.75rem;
552
+ --component-message-empty-state-icon-size-card: 1.25rem;
553
553
  --component-message-empty-state-icon-optical-size-page: 48;
554
554
  --component-message-empty-state-icon-optical-size-section: 28;
555
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;
556
+ --component-message-empty-state-wrap-size-page: 5.5rem;
557
+ --component-message-empty-state-wrap-size-section: 3.5rem;
558
+ --component-message-empty-state-wrap-size-card: 2.25rem;
559
+ --component-message-empty-state-max-width-page: 30rem;
560
+ --component-message-empty-state-max-width-section: 22.5rem;
561
+ --component-notification-height: 1.125rem;
562
+ --component-notification-dot-size: 0.5rem;
563
+ --component-notification-padding-inline: 0.3125rem;
564
+ --component-notification-font-size: 0.6875rem;
565
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;
566
+ --component-notification-ring-width: 0.125rem;
567
+ --component-page-layout-sidebar-width: 17.5rem;
568
+ --component-page-layout-gap: 1.5rem;
569
+ --component-pagination-item-size: 2.25rem;
570
+ --component-pagination-item-size-sm: 1.75rem;
571
+ --component-pagination-gap: 0.25rem;
572
572
  --component-pagination-border-width: 1px;
573
573
  --component-pagination-font-weight-default: 400;
574
574
  --component-pagination-font-weight-active: 500;
575
- --component-pagination-focus-ring-width: 2px;
576
- --component-pagination-focus-ring-offset: 2px;
575
+ --component-pagination-focus-ring-width: 0.125rem;
576
+ --component-pagination-focus-ring-offset: 0.125rem;
577
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;
578
+ --component-pagination-ellipsis-padding-bottom: 0.25rem;
579
+ --component-radio-group-control-size: 1rem;
580
+ --component-radio-group-gap: 0.5rem;
581
+ --component-radio-group-item-gap: 0.125rem;
582
+ --component-radio-group-group-gap: 0.5rem;
583
+ --component-radio-group-items-top-gap: 0.75rem;
584
+ --component-radio-group-input-nudge: 0.25rem;
585
+ --component-radio-group-row-padding-block: 0.25rem;
586
+ --component-radio-group-row-padding-inline: 0.375rem;
587
+ --component-radio-group-content-gap: 0.125rem;
588
588
  --component-radio-group-dot-size: 40%;
589
- --component-radio-group-error-accent-width: 3px;
589
+ --component-radio-group-error-accent-width: 0.1875rem;
590
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;
591
+ --component-radio-group-comfortable-control-size: 1.25rem;
592
+ --component-radio-group-comfortable-control-size-md: 1.375rem;
593
+ --component-radio-group-comfortable-gap: 0.625rem;
594
+ --component-radio-group-comfortable-item-gap: 0.125rem;
595
+ --component-radio-group-comfortable-group-gap: 0.625rem;
596
+ --component-radio-group-comfortable-items-top-gap: 1rem;
597
+ --component-radio-group-comfortable-input-nudge: 0.125rem;
598
+ --component-radio-group-comfortable-row-padding-block: 0.375rem;
599
+ --component-radio-group-comfortable-row-padding-inline: 0.5rem;
600
+ --component-radio-group-compact-control-size: 0.875rem;
601
+ --component-radio-group-compact-gap: 0.375rem;
602
+ --component-radio-group-compact-item-gap: 0.125rem;
603
+ --component-radio-group-compact-group-gap: 0.25rem;
604
+ --component-radio-group-compact-items-top-gap: 0.5rem;
605
+ --component-radio-group-compact-input-nudge: 0.1875rem;
606
+ --component-radio-group-compact-row-padding-block: 0.125rem;
607
+ --component-radio-group-compact-row-padding-inline: 0.25rem;
608
608
  --component-scrim-color: rgba(15, 0, 42, 0.6);
609
609
  --component-scrim-color-dark: rgba(181, 160, 255, 0.6);
610
- --component-scrim-blur: 2px;
610
+ --component-scrim-blur: 0.125rem;
611
611
  --component-section-gradient-edge-width: 78%;
612
612
  --component-section-gradient-edge-height: 62%;
613
613
  --component-section-gradient-center-width: 68%;
@@ -615,99 +615,109 @@
615
615
  --component-section-gradient-strength: 24;
616
616
  --component-section-gradient-strength-inverse: 18;
617
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;
618
+ --component-segmented-padding: 0.1875rem;
619
+ --component-segmented-gap: 0.125rem;
620
+ --component-segmented-segment-padding-block: 0.25rem;
621
+ --component-segmented-segment-padding-inline: 0.75rem;
622
+ --component-segmented-segment-padding-block-sm: 0.125rem;
623
+ --component-segmented-segment-padding-inline-sm: 0.5rem;
624
624
  --component-segmented-border-width: 1px;
625
625
  --component-segmented-font-weight-default: 400;
626
626
  --component-segmented-font-weight-active: 500;
627
- --component-segmented-focus-ring-width: 2px;
627
+ --component-segmented-focus-ring-width: 0.125rem;
628
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;
629
+ --component-side-nav-width: 17.5rem;
630
+ --component-side-nav-padding-block: 0.5rem;
631
+ --component-side-nav-padding-inline: 0.5rem;
632
632
  --component-side-nav-border-width: 1px;
633
- --component-side-nav-header-min-height: 52px;
634
- --component-side-nav-collapsed-width: 52px;
633
+ --component-side-nav-header-min-height: 3.25rem;
634
+ --component-side-nav-collapsed-width: 3.25rem;
635
635
  --component-side-nav-overlay-z-index: 200;
636
636
  --component-side-nav-overlay-shadow-start: 8px 0 40px rgba(0, 0, 0, 0.18);
637
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;
638
+ --component-side-nav-item-height: 2.25rem;
639
+ --component-side-nav-item-padding-inline: 0.5rem;
640
+ --component-side-nav-item-gap: 0.5rem;
641
+ --component-side-nav-item-border-radius: 0.375rem;
642
+ --component-side-nav-item-icon-size: 1.25rem;
643
+ --component-side-nav-item-indent: 1.25rem;
644
+ --component-side-nav-item-focus-ring-width: 0.1875rem;
645
+ --component-side-nav-item-focus-ring-offset: -0.125rem;
646
646
  --component-side-nav-item-font-line-height: 1.5;
647
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;
648
+ --component-side-nav-item-chevron-size: 1.125rem;
649
+ --component-status-bar-sm-height: 0.25rem;
650
+ --component-status-bar-md-height: 0.5rem;
651
+ --component-status-bar-lg-height: 0.75rem;
652
+ --component-status-bar-border-radius: 624.9375rem;
653
+ --component-status-bar-border-width: 0;
654
+ --component-status-bar-border-color: #a6b2c4;
655
+ --component-status-bar-track-background: #e1e8f3;
656
+ --component-status-bar-fill-background: #7c3aed;
657
+ --component-status-bar-label-gap: 0.5rem;
658
+ --component-status-bar-indeterminate-duration: 1400ms;
659
+ --component-switch-track-width: 2.5rem;
660
+ --component-switch-track-height: 1.375rem;
661
+ --component-switch-thumb-size: 1rem;
662
+ --component-switch-gap: 0.1875rem;
663
+ --component-switch-row-gap: 0.375rem;
664
+ --component-switch-row-padding-block: 0.25rem;
665
+ --component-switch-row-padding-inline: 0.375rem;
656
666
  --component-switch-content-gap: 1px;
657
- --component-switch-group-gap: 4px;
667
+ --component-switch-group-gap: 0.25rem;
658
668
  --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
669
  --component-switch-message-error-font-weight: 600;
660
670
  --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;
671
+ --component-switch-comfortable-track-width: 3.5rem;
672
+ --component-switch-comfortable-track-height: 1.75rem;
673
+ --component-switch-comfortable-thumb-size: 1.25rem;
674
+ --component-switch-comfortable-gap: 0.25rem;
675
+ --component-switch-comfortable-row-gap: 0.5rem;
676
+ --component-switch-comfortable-row-padding-block: 0.375rem;
677
+ --component-switch-comfortable-row-padding-inline: 0.5rem;
678
+ --component-switch-comfortable-content-gap: 0.125rem;
679
+ --component-switch-comfortable-group-gap: 0.375rem;
680
+ --component-switch-compact-track-width: 2rem;
681
+ --component-switch-compact-track-height: 1.125rem;
682
+ --component-switch-compact-thumb-size: 0.75rem;
683
+ --component-switch-compact-gap: 0.1875rem;
684
+ --component-switch-compact-row-gap: 0.25rem;
685
+ --component-switch-compact-row-padding-block: 0.125rem;
686
+ --component-switch-compact-row-padding-inline: 0.25rem;
677
687
  --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;
688
+ --component-switch-compact-group-gap: 0.125rem;
689
+ --component-tab-padding-block: 0.5rem;
690
+ --component-tab-padding-inline: 1rem;
691
+ --component-tab-padding-block-sm: 0.25rem;
692
+ --component-tab-padding-inline-sm: 0.75rem;
693
+ --component-tab-indicator-size: 0.125rem;
684
694
  --component-tab-border-width: 1px;
685
695
  --component-tab-font-weight-default: 400;
686
696
  --component-tab-font-weight-active: 500;
687
- --component-tab-focus-ring-width: 2px;
697
+ --component-tab-focus-ring-width: 0.125rem;
688
698
  --component-tab-focus-ring-offset: -2px;
689
699
  --component-tab-z-index-active: 1;
690
700
  --component-tab-margin-bottom: -1px;
691
- --component-tab-scroll-button-width: 32px;
692
- --component-tab-scroll-button-icon-size: 20px;
701
+ --component-tab-scroll-button-width: 2rem;
702
+ --component-tab-scroll-button-icon-size: 1.25rem;
693
703
  --component-tab-icon-size: 1.1em;
694
704
  --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;
705
+ --component-tab-count-min-width: 1.125rem;
706
+ --component-tab-count-height: 1.125rem;
707
+ --component-tab-count-padding-inline: 0.3125rem;
708
+ --component-tab-count-border-radius: 62.4375rem;
709
+ --component-tab-count-font-size: 0.6875rem;
700
710
  --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;
711
+ --component-tab-folder-curve-adjustment: 0.03125rem;
712
+ --component-tab-progress-step-size: 1.5rem;
713
+ --component-tab-progress-step-size-md: 2rem;
714
+ --component-tab-progress-line-height: 0.125rem;
705
715
  --component-tab-progress-step-font-size: 0.75rem;
706
- --component-tab-progress-step-border-width: 2px;
707
- --component-tab-progress-completed-icon-size: 16px;
716
+ --component-tab-progress-step-border-width: 0.125rem;
717
+ --component-tab-progress-completed-icon-size: 1rem;
708
718
  --component-tab-progress-selected-ring: 0 0 0 3px color-mix(in srgb, var(--semantic-color-action-background) 25%, transparent);
709
719
  --component-top-header-height: 64px;
710
- --component-top-header-padding-inline: 24px;
720
+ --component-top-header-padding-inline: 1.5rem;
711
721
  --component-top-header-border-width: 1px;
712
722
  --component-top-header-z-index: 100;
713
723
  --component-paragraph-font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
@@ -770,10 +780,10 @@
770
780
  --brand-a1-font-line-height-body: 1.5em;
771
781
  --brand-a1-font-line-height-heading: 1.25em;
772
782
  --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;
783
+ --container-query-compact-min: 0;
784
+ --container-query-compact-max: 30rem;
785
+ --container-query-standard-min: 30rem;
786
+ --theme-a1-light-button-primary-border-width: 0;
777
787
  --theme-a1-light-button-primary-background: #7c3aed;
778
788
  --theme-a1-light-button-primary-background-hover: #5916b5;
779
789
  --theme-a1-light-button-primary-background-pressed: #230051;
@@ -800,14 +810,14 @@
800
810
  --theme-a1-light-button-tertiary-border: #fcfbff;
801
811
  --theme-a1-light-button-tertiary-border-hover: #f5f3ff;
802
812
  --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;
813
+ --theme-a1-light-button-border-radius: 0.375rem;
814
+ --theme-a1-light-button-padding-block: 0.625rem;
815
+ --theme-a1-light-button-padding-inline: 0.75rem;
816
+ --theme-a1-light-button-min-height: 2.5rem;
807
817
  --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;
818
+ --theme-a1-light-button-border-width: 0;
819
+ --theme-a1-light-button-focus-ring-width: 0.1875rem;
820
+ --theme-a1-light-button-focus-ring-offset: 0.125rem;
811
821
  --theme-a1-light-button-disabled-opacity: 0.55;
812
822
  --theme-a1-light-button-focus-ring: #b5a0ff;
813
823
  --theme-a1-light-color-text-default: #060b14;