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

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 (9) hide show
  1. package/package.json +1 -1
  2. package/src/color-scheme.css +10 -0
  3. package/src/components/data-table/data-table-filters.css +2 -2
  4. package/src/components/data-table/data-table.css +2 -2
  5. package/src/components/section/Section.jsx +1 -1
  6. package/src/components/section/section.css +11 -0
  7. package/src/components/token-select/token-select.css +1 -1
  8. package/src/components/top-header/top-header.css +4 -4
  9. package/src/tokens.css +326 -326
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gtivr4/a1-design-system-react",
3
- "version": "0.3.0",
3
+ "version": "0.3.1",
4
4
  "description": "React components for the A1 token-driven design system.",
5
5
  "type": "module",
6
6
  "main": "./src/index.js",
package/src/color-scheme.css CHANGED
@@ -9,6 +9,16 @@
9
9
  box-sizing: border-box;
10
10
  }
11
11
 
12
+ /* ─── Root typeface ──────────────────────────────────────────────────────────
13
+ Apply the design system body font to the document so unscoped elements
14
+ inherit the correct typeface without requiring any A1 component to be
15
+ rendered first. Without this, the browser default (serif) is used until a
16
+ component's own CSS loads. */
17
+
18
+ body {
19
+ font-family: var(--component-paragraph-font-family);
20
+ }
21
+
12
22
  /* ─── Form field interaction tokens — light mode defaults ────────────────────
13
23
  Single source of truth for hover, active, and read-only states across all
14
24
  form field components. Overridden in every dark-mode context below.
package/src/components/data-table/data-table-filters.css CHANGED
@@ -104,7 +104,7 @@
104
104
  }
105
105
 
106
106
  .a1-dt-filters__chip-icon {
107
- font-size: 18px;
107
+ font-size: var(--component-menu-item-icon-size);
108
108
  flex-shrink: 0;
109
109
  margin-inline-start: -2px;
110
110
  }
@@ -134,7 +134,7 @@
134
134
  border-radius: 9999px;
135
135
  background: var(--semantic-color-action-background);
136
136
  color: var(--semantic-color-action-foreground);
137
- font-size: 11px;
137
+ font-size: var(--component-tab-count-font-size);
138
138
  font-weight: 600;
139
139
  line-height: 1;
140
140
  margin-inline-start: var(--base-spacing-4);
package/src/components/data-table/data-table.css CHANGED
@@ -263,7 +263,7 @@
263
263
  border-radius: 9999px;
264
264
  background: var(--semantic-color-action-background);
265
265
  color: var(--semantic-color-action-foreground);
266
- font-size: 10px;
266
+ font-size: var(--semantic-font-size-body-xs);
267
267
  font-weight: 600;
268
268
  letter-spacing: 0.02em;
269
269
  user-select: none;
@@ -272,7 +272,7 @@
272
272
  .a1-data-table--compact .a1-data-table__avatar {
273
273
  width: 22px;
274
274
  height: 22px;
275
- font-size: 9px;
275
+ font-size: var(--component-notification-font-size);
276
276
  }
277
277
 
278
278
  .a1-data-table__actions {
package/src/components/section/Section.jsx CHANGED
@@ -2,7 +2,7 @@ import "../../themes.css";
2
2
  import "../../color-scheme.css";
3
3
  import "./section.css";
4
4
 
5
- const VALID_PADDING = ["lg", "md", "sm", "none"];
5
+ const VALID_PADDING = ["lg", "md", "sm", "xs", "none"];
6
6
  const VALID_SURFACES = ["page", "panel", "raised"];
7
7
  const VALID_GAPS = ["xs", "sm", "md", "lg"];
8
8
  const VALID_GRADIENTS = ["accent", "highlight", "info", "success", "warn"];
package/src/components/section/section.css CHANGED
@@ -217,6 +217,11 @@
217
217
  padding: 0;
218
218
  }
219
219
 
220
+ .a1-section--padding-xs {
221
+ padding-block: var(--base-spacing-16);
222
+ padding-inline: var(--base-spacing-16);
223
+ }
224
+
220
225
  .a1-section--padding-sm {
221
226
  padding-block: var(--base-spacing-32);
222
227
  padding-inline: var(--base-spacing-24);
@@ -233,12 +238,14 @@
233
238
  }
234
239
 
235
240
  @media (--bp-md-down) {
241
+ .a1-section--padding-xs { padding-block: var(--base-spacing-12); padding-inline: var(--base-spacing-12); }
236
242
  .a1-section--padding-sm { padding-block: var(--base-spacing-24); padding-inline: var(--base-spacing-16); }
237
243
  .a1-section--padding-md { padding-block: var(--base-spacing-40); padding-inline: var(--base-spacing-24); }
238
244
  .a1-section--padding-lg { padding-block: var(--base-spacing-64); padding-inline: var(--base-spacing-40); }
239
245
  }
240
246
 
241
247
  @media (--bp-sm-down) {
248
+ .a1-section--padding-xs { padding-block: var(--base-spacing-8); padding-inline: var(--base-spacing-8); }
242
249
  .a1-section--padding-sm { padding-block: var(--base-spacing-16); padding-inline: var(--base-spacing-12); }
243
250
  .a1-section--padding-md { padding-block: var(--base-spacing-24); padding-inline: var(--base-spacing-16); }
244
251
  .a1-section--padding-lg { padding-block: var(--base-spacing-40); padding-inline: var(--base-spacing-24); }
@@ -251,6 +258,7 @@
251
258
 
252
259
  /* xs: base, no media query */
253
260
  .a1-section--xs-padding-none { padding: 0; }
261
+ .a1-section--xs-padding-xs { padding-block: var(--base-spacing-16); padding-inline: var(--base-spacing-16); }
254
262
  .a1-section--xs-padding-sm { padding-block: var(--base-spacing-32); padding-inline: var(--base-spacing-24); }
255
263
  .a1-section--xs-padding-md { padding-block: var(--base-spacing-64); padding-inline: var(--base-spacing-40); }
256
264
  .a1-section--xs-padding-lg { padding-block: var(--base-spacing-96); padding-inline: var(--base-spacing-64); }
@@ -258,6 +266,7 @@
258
266
  /* sm: ≥481px */
259
267
  @media (--bp-sm-up) {
260
268
  .a1-section--sm-padding-none { padding: 0; }
269
+ .a1-section--sm-padding-xs { padding-block: var(--base-spacing-16); padding-inline: var(--base-spacing-16); }
261
270
  .a1-section--sm-padding-sm { padding-block: var(--base-spacing-32); padding-inline: var(--base-spacing-24); }
262
271
  .a1-section--sm-padding-md { padding-block: var(--base-spacing-64); padding-inline: var(--base-spacing-40); }
263
272
  .a1-section--sm-padding-lg { padding-block: var(--base-spacing-96); padding-inline: var(--base-spacing-64); }
@@ -266,6 +275,7 @@
266
275
  /* md: ≥769px */
267
276
  @media (min-width: 769px) {
268
277
  .a1-section--md-padding-none { padding: 0; }
278
+ .a1-section--md-padding-xs { padding-block: var(--base-spacing-12); padding-inline: var(--base-spacing-12); }
269
279
  .a1-section--md-padding-sm { padding-block: var(--base-spacing-24); padding-inline: var(--base-spacing-16); }
270
280
  .a1-section--md-padding-md { padding-block: var(--base-spacing-40); padding-inline: var(--base-spacing-24); }
271
281
  .a1-section--md-padding-lg { padding-block: var(--base-spacing-64); padding-inline: var(--base-spacing-40); }
@@ -274,6 +284,7 @@
274
284
  /* lg: ≥1025px */
275
285
  @media (--bp-lg-up) {
276
286
  .a1-section--lg-padding-none { padding: 0; }
287
+ .a1-section--lg-padding-xs { padding-block: var(--base-spacing-16); padding-inline: var(--base-spacing-16); }
277
288
  .a1-section--lg-padding-sm { padding-block: var(--base-spacing-32); padding-inline: var(--base-spacing-24); }
278
289
  .a1-section--lg-padding-md { padding-block: var(--base-spacing-64); padding-inline: var(--base-spacing-40); }
279
290
  .a1-section--lg-padding-lg { padding-block: var(--base-spacing-96); padding-inline: var(--base-spacing-64); }
package/src/components/token-select/token-select.css CHANGED
@@ -105,6 +105,6 @@
105
105
 
106
106
  .a1-token-item__check {
107
107
  flex-shrink: 0;
108
- font-size: 16px;
108
+ font-size: var(--semantic-font-size-body-md);
109
109
  color: var(--semantic-color-text-accent);
110
110
  }
package/src/components/top-header/top-header.css CHANGED
@@ -33,7 +33,7 @@
33
33
  border-radius: var(--base-radius-md);
34
34
  color: var(--semantic-color-text-default);
35
35
  cursor: pointer;
36
- font-size: 24px;
36
+ font-size: var(--component-button-medium-icon-size);
37
37
  flex-shrink: 0;
38
38
  transition: background var(--semantic-motion-duration-fast) var(--semantic-motion-easing-standard);
39
39
  }
@@ -157,12 +157,12 @@
157
157
  }
158
158
 
159
159
  .a1-top-header__nav-link-icon {
160
- font-size: 20px;
160
+ font-size: var(--component-side-nav-item-icon-size);
161
161
  flex-shrink: 0;
162
162
  }
163
163
 
164
164
  .a1-top-header__nav-chevron {
165
- font-size: 18px;
165
+ font-size: var(--component-menu-item-icon-size);
166
166
  flex-shrink: 0;
167
167
  margin-inline-start: calc(var(--base-spacing-4) * -1);
168
168
  transition: transform var(--semantic-motion-duration-fast) var(--semantic-motion-easing-standard);
@@ -279,7 +279,7 @@
279
279
  color: var(--semantic-color-status-error-foreground);
280
280
  border-radius: 8px;
281
281
  font-family: var(--component-paragraph-font-family);
282
- font-size: 10px;
282
+ font-size: var(--component-tab-count-font-size);
283
283
  font-weight: 700;
284
284
  line-height: 16px;
285
285
  text-align: center;
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,99 @@
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-switch-track-width: 2.5rem;
650
+ --component-switch-track-height: 1.375rem;
651
+ --component-switch-thumb-size: 1rem;
652
+ --component-switch-gap: 0.1875rem;
653
+ --component-switch-row-gap: 0.375rem;
654
+ --component-switch-row-padding-block: 0.25rem;
655
+ --component-switch-row-padding-inline: 0.375rem;
656
656
  --component-switch-content-gap: 1px;
657
- --component-switch-group-gap: 4px;
657
+ --component-switch-group-gap: 0.25rem;
658
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
659
  --component-switch-message-error-font-weight: 600;
660
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;
661
+ --component-switch-comfortable-track-width: 3.5rem;
662
+ --component-switch-comfortable-track-height: 1.75rem;
663
+ --component-switch-comfortable-thumb-size: 1.25rem;
664
+ --component-switch-comfortable-gap: 0.25rem;
665
+ --component-switch-comfortable-row-gap: 0.5rem;
666
+ --component-switch-comfortable-row-padding-block: 0.375rem;
667
+ --component-switch-comfortable-row-padding-inline: 0.5rem;
668
+ --component-switch-comfortable-content-gap: 0.125rem;
669
+ --component-switch-comfortable-group-gap: 0.375rem;
670
+ --component-switch-compact-track-width: 2rem;
671
+ --component-switch-compact-track-height: 1.125rem;
672
+ --component-switch-compact-thumb-size: 0.75rem;
673
+ --component-switch-compact-gap: 0.1875rem;
674
+ --component-switch-compact-row-gap: 0.25rem;
675
+ --component-switch-compact-row-padding-block: 0.125rem;
676
+ --component-switch-compact-row-padding-inline: 0.25rem;
677
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;
678
+ --component-switch-compact-group-gap: 0.125rem;
679
+ --component-tab-padding-block: 0.5rem;
680
+ --component-tab-padding-inline: 1rem;
681
+ --component-tab-padding-block-sm: 0.25rem;
682
+ --component-tab-padding-inline-sm: 0.75rem;
683
+ --component-tab-indicator-size: 0.125rem;
684
684
  --component-tab-border-width: 1px;
685
685
  --component-tab-font-weight-default: 400;
686
686
  --component-tab-font-weight-active: 500;
687
- --component-tab-focus-ring-width: 2px;
687
+ --component-tab-focus-ring-width: 0.125rem;
688
688
  --component-tab-focus-ring-offset: -2px;
689
689
  --component-tab-z-index-active: 1;
690
690
  --component-tab-margin-bottom: -1px;
691
- --component-tab-scroll-button-width: 32px;
692
- --component-tab-scroll-button-icon-size: 20px;
691
+ --component-tab-scroll-button-width: 2rem;
692
+ --component-tab-scroll-button-icon-size: 1.25rem;
693
693
  --component-tab-icon-size: 1.1em;
694
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;
695
+ --component-tab-count-min-width: 1.125rem;
696
+ --component-tab-count-height: 1.125rem;
697
+ --component-tab-count-padding-inline: 0.3125rem;
698
+ --component-tab-count-border-radius: 62.4375rem;
699
+ --component-tab-count-font-size: 0.6875rem;
700
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;
701
+ --component-tab-folder-curve-adjustment: 0.03125rem;
702
+ --component-tab-progress-step-size: 1.5rem;
703
+ --component-tab-progress-step-size-md: 2rem;
704
+ --component-tab-progress-line-height: 0.125rem;
705
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;
706
+ --component-tab-progress-step-border-width: 0.125rem;
707
+ --component-tab-progress-completed-icon-size: 1rem;
708
708
  --component-tab-progress-selected-ring: 0 0 0 3px color-mix(in srgb, var(--semantic-color-action-background) 25%, transparent);
709
709
  --component-top-header-height: 64px;
710
- --component-top-header-padding-inline: 24px;
710
+ --component-top-header-padding-inline: 1.5rem;
711
711
  --component-top-header-border-width: 1px;
712
712
  --component-top-header-z-index: 100;
713
713
  --component-paragraph-font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
@@ -770,10 +770,10 @@
770
770
  --brand-a1-font-line-height-body: 1.5em;
771
771
  --brand-a1-font-line-height-heading: 1.25em;
772
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;
773
+ --container-query-compact-min: 0;
774
+ --container-query-compact-max: 30rem;
775
+ --container-query-standard-min: 30rem;
776
+ --theme-a1-light-button-primary-border-width: 0;
777
777
  --theme-a1-light-button-primary-background: #7c3aed;
778
778
  --theme-a1-light-button-primary-background-hover: #5916b5;
779
779
  --theme-a1-light-button-primary-background-pressed: #230051;
@@ -800,14 +800,14 @@
800
800
  --theme-a1-light-button-tertiary-border: #fcfbff;
801
801
  --theme-a1-light-button-tertiary-border-hover: #f5f3ff;
802
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;
803
+ --theme-a1-light-button-border-radius: 0.375rem;
804
+ --theme-a1-light-button-padding-block: 0.625rem;
805
+ --theme-a1-light-button-padding-inline: 0.75rem;
806
+ --theme-a1-light-button-min-height: 2.5rem;
807
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;
808
+ --theme-a1-light-button-border-width: 0;
809
+ --theme-a1-light-button-focus-ring-width: 0.1875rem;
810
+ --theme-a1-light-button-focus-ring-offset: 0.125rem;
811
811
  --theme-a1-light-button-disabled-opacity: 0.55;
812
812
  --theme-a1-light-button-focus-ring: #b5a0ff;
813
813
  --theme-a1-light-color-text-default: #060b14;