@nova-design-system/nova-base 3.20.0 → 3.21.1-beta.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 (19) hide show
  1. package/assets/icons/icon-sprite.svg +1 -1
  2. package/assets/nova-fonts.css +10 -1
  3. package/dist/cjs/generated/nova-tailwind-components.js +8 -1
  4. package/dist/css/nova-utils.css +5 -0
  5. package/dist/css/ocean.css +168 -126
  6. package/dist/css/spark.css +170 -128
  7. package/dist/generated/nova-tailwind-components.d.ts +5 -1
  8. package/dist/generated/nova-tailwind-components.js +8 -1
  9. package/dist/js/ocean_dark.d.ts +64 -64
  10. package/dist/js/ocean_dark.js +71 -71
  11. package/dist/js/ocean_light.d.ts +64 -64
  12. package/dist/js/ocean_light.js +64 -64
  13. package/dist/js/spacings.d.ts +50 -8
  14. package/dist/js/spacings.js +50 -8
  15. package/dist/js/spark_dark.d.ts +64 -64
  16. package/dist/js/spark_dark.js +72 -72
  17. package/dist/js/spark_light.d.ts +64 -64
  18. package/dist/js/spark_light.js +64 -64
  19. package/package.json +2 -1
package/assets/nova-fonts.css CHANGED
@@ -1,3 +1,12 @@
1
+ @import 'https://fonts.googleapis.com/css2?family=Outfit:wght@400&display=swap';
2
+
3
+ :root {
4
+ --font-family-base: 'TT Norms Pro', arial, sans-serif;
5
+ --nv-sidebarlogo-font-family: 'Outfit', 'TT Norms Pro', arial, sans-serif;
6
+ --nv-sidebarlogo-font-weight: 400;
7
+ --nv-sidebarlogo-font-size: 2rem;
8
+ }
9
+
1
10
  body {
2
- font-family: 'TT Norms Pro', Arial, sans-serif;
11
+ font-family: var(--font-family-base, 'TT Norms Pro', arial, sans-serif);
3
12
  }
package/dist/cjs/generated/nova-tailwind-components.js CHANGED
@@ -220,7 +220,10 @@ exports.NOVA_TAILWIND_COMPONENTS = {
220
220
  'transition': 'background-color 150ms ease-out',
221
221
  'userSelect': 'none',
222
222
  'cursor': 'pointer',
223
- 'height': 'fit-content',
223
+ 'height': [
224
+ 'fit-content',
225
+ 'var(--button-md-height)'
226
+ ],
224
227
  'width': 'fit-content',
225
228
  'padding': 'var(--button-md-padding-y) var(--button-md-padding-x)',
226
229
  'gap': 'var(--button-md-gap)',
@@ -285,6 +288,7 @@ exports.NOVA_TAILWIND_COMPONENTS = {
285
288
  'gap': 'var(--button-xs-gap)',
286
289
  'borderRadius': 'var(--button-xs-border-radius)',
287
290
  'lineHeight': 'var(--button-xs-line-height)',
291
+ 'height': 'var(--button-xs-height)',
288
292
  'fontSize': 'var(--button-xs-font-size)'
289
293
  },
290
294
  '.nv-button.size-xs nv-icon > svg': {
@@ -297,6 +301,7 @@ exports.NOVA_TAILWIND_COMPONENTS = {
297
301
  'gap': 'var(--button-sm-gap)',
298
302
  'borderRadius': 'var(--button-sm-border-radius)',
299
303
  'lineHeight': 'var(--button-sm-line-height)',
304
+ 'height': 'var(--button-sm-height)',
300
305
  'fontSize': 'var(--button-sm-font-size)'
301
306
  },
302
307
  '.nv-button.size-sm nv-icon > svg': {
@@ -309,6 +314,7 @@ exports.NOVA_TAILWIND_COMPONENTS = {
309
314
  'gap': 'var(--button-md-gap)',
310
315
  'borderRadius': 'var(--button-md-border-radius)',
311
316
  'lineHeight': 'var(--button-md-line-height)',
317
+ 'height': 'var(--button-md-height)',
312
318
  'fontSize': 'var(--button-md-font-size)'
313
319
  },
314
320
  '.nv-button.size-md nv-icon > svg': {
@@ -321,6 +327,7 @@ exports.NOVA_TAILWIND_COMPONENTS = {
321
327
  'gap': 'var(--button-lg-gap)',
322
328
  'borderRadius': 'var(--button-lg-border-radius)',
323
329
  'lineHeight': 'var(--button-lg-line-height)',
330
+ 'height': 'var(--button-lg-height)',
324
331
  'fontSize': 'var(--button-lg-font-size)'
325
332
  },
326
333
  '.nv-button.size-lg nv-icon > svg': {
package/dist/css/nova-utils.css CHANGED
@@ -7730,6 +7730,7 @@ h6 {
7730
7730
  cursor: pointer;
7731
7731
  height: -moz-fit-content;
7732
7732
  height: fit-content;
7733
+ height: var(--button-md-height);
7733
7734
  width: -moz-fit-content;
7734
7735
  width: fit-content;
7735
7736
  padding: var(--button-md-padding-y) var(--button-md-padding-x);
@@ -7807,6 +7808,7 @@ h6 {
7807
7808
  gap: var(--button-xs-gap);
7808
7809
  border-radius: var(--button-xs-border-radius);
7809
7810
  line-height: var(--button-xs-line-height);
7811
+ height: var(--button-xs-height);
7810
7812
  font-size: var(--button-xs-font-size);
7811
7813
  }
7812
7814
 
@@ -7821,6 +7823,7 @@ h6 {
7821
7823
  gap: var(--button-sm-gap);
7822
7824
  border-radius: var(--button-sm-border-radius);
7823
7825
  line-height: var(--button-sm-line-height);
7826
+ height: var(--button-sm-height);
7824
7827
  font-size: var(--button-sm-font-size);
7825
7828
  }
7826
7829
 
@@ -7835,6 +7838,7 @@ h6 {
7835
7838
  gap: var(--button-md-gap);
7836
7839
  border-radius: var(--button-md-border-radius);
7837
7840
  line-height: var(--button-md-line-height);
7841
+ height: var(--button-md-height);
7838
7842
  font-size: var(--button-md-font-size);
7839
7843
  }
7840
7844
 
@@ -7849,6 +7853,7 @@ h6 {
7849
7853
  gap: var(--button-lg-gap);
7850
7854
  border-radius: var(--button-lg-border-radius);
7851
7855
  line-height: var(--button-lg-line-height);
7856
+ height: var(--button-lg-height);
7852
7857
  font-size: var(--button-lg-font-size);
7853
7858
  }
7854
7859
 
package/dist/css/ocean.css CHANGED
@@ -66,7 +66,6 @@
66
66
  --color-transparent: rgba(255, 255, 255, 0);
67
67
  --color-white: #ffffff;
68
68
  --color-black: #000000;
69
- --color-interaction-container-neutral-background: rgba(255, 255, 255, 0);
70
69
  --components-toggle-shape-hover: var(--color-gray-ocean-300);
71
70
  --components-toggle-shape-default: var(--color-gray-ocean-400);
72
71
  --components-toggle-background-disabled-checked: var(--color-gray-ocean-600);
@@ -78,10 +77,6 @@
78
77
  --components-tooltip-border: var(--color-gray-ocean-50);
79
78
  --components-tooltip-background: var(--color-gray-ocean-50);
80
79
  --components-popover-background: var(--color-gray-ocean-900);
81
- --components-menu-contextual-item-background: var(--color-interaction-container-neutral-background);
82
- --components-field-time-background-default: var(--color-interaction-container-neutral-background);
83
- --components-datagrid-body-background-default: var(--color-interaction-container-neutral-background);
84
- --components-datagrid-header-background: var(--color-interaction-container-neutral-background);
85
80
  --components-overlay-background: var(--color-gray-ocean-650);
86
81
  --components-button-destructive-high-icon-hover: var(--color-base-black);
87
82
  --components-button-destructive-high-icon: var(--color-base-black);
@@ -105,8 +100,6 @@
105
100
  --components-loader-brand-background: var(--color-petrol-900);
106
101
  --components-loader-white-foreground: var(--color-base-white);
107
102
  --components-list-dropdown-group-title-background: var(--color-transparent);
108
- --components-list-dropdown-item-background-disabled: var(--color-interaction-container-neutral-background);
109
- --components-list-dropdown-item-background-default: var(--color-interaction-container-neutral-background);
110
103
  --components-list-native-item-content-hover: var(--color-base-white);
111
104
  --components-list-native-item-content-default: var(--color-base-white);
112
105
  --components-form-shape-foreground-default: var(--color-base-black);
@@ -121,7 +114,6 @@
121
114
  --components-button-gr-as-complementary-text: var(--color-base-white);
122
115
  --components-button-gr-as-complementary-background-hover: var(--color-gray-ocean-350);
123
116
  --components-button-gr-as-complementary-background: var(--color-gray-ocean-450);
124
- --components-button-lower-background: var(--color-interaction-container-neutral-background);
125
117
  --color-dont-use-background: var(--color-gray-ocean-900);
126
118
  --color-dont-use-content: var(--color-gray-ocean-750);
127
119
  --color-dont-use-border: var(--color-gray-ocean-750);
@@ -165,6 +157,47 @@
165
157
  --color-rainbow-1-icon: var(--color-amber-500);
166
158
  --color-rainbow-1-border: var(--color-amber-500);
167
159
  --color-rainbow-1-background: var(--color-amber-900);
160
+ --color-interaction-link-inverted-text-visited: var(--color-petrol-400);
161
+ --color-interaction-link-inverted-text-hover: var(--color-petrol-600);
162
+ --color-interaction-link-inverted-icon-visited: var(--color-petrol-400);
163
+ --color-interaction-link-inverted-icon-hover: var(--color-petrol-600);
164
+ --color-interaction-link-low-text-visited: var(--color-petrol-400);
165
+ --color-interaction-link-low-text-hover: var(--color-petrol-400);
166
+ --color-interaction-link-low-icon-visited: var(--color-petrol-400);
167
+ --color-interaction-link-low-icon-hover: var(--color-petrol-400);
168
+ --color-interaction-link-high-text-visited: var(--color-petrol-400);
169
+ --color-interaction-link-high-text-hover: var(--color-petrol-400);
170
+ --color-interaction-link-high-text: var(--color-petrol-500);
171
+ --color-interaction-link-high-icon-visited: var(--color-petrol-400);
172
+ --color-interaction-link-high-icon-hover: var(--color-petrol-400);
173
+ --color-interaction-link-high-icon: var(--color-petrol-500);
174
+ --color-interaction-container-neutral-text-active: var(--color-petrol-400);
175
+ --color-interaction-container-neutral-icon-active: var(--color-petrol-400);
176
+ --color-interaction-container-neutral-border-active: var(--color-petrol-400);
177
+ --color-interaction-container-neutral-background-active: var(--color-petrol-900);
178
+ --color-interaction-container-branded-low-text-hover: var(--color-petrol-400);
179
+ --color-interaction-container-branded-low-text-active: var(--color-petrol-400);
180
+ --color-interaction-container-branded-low-text: var(--color-petrol-500);
181
+ --color-interaction-container-branded-low-icon-hover: var(--color-petrol-400);
182
+ --color-interaction-container-branded-low-icon-active: var(--color-petrol-400);
183
+ --color-interaction-container-branded-low-icon: var(--color-petrol-500);
184
+ --color-interaction-container-branded-low-border-hover: var(--color-petrol-400);
185
+ --color-interaction-container-branded-low-border-active: var(--color-petrol-400);
186
+ --color-interaction-container-branded-low-border: var(--color-petrol-500);
187
+ --color-interaction-container-branded-low-background-hover: var(--color-petrol-900);
188
+ --color-interaction-container-branded-low-background-active: var(--color-petrol-900);
189
+ --color-interaction-container-branded-high-text-hover: var(--color-base-black);
190
+ --color-interaction-container-branded-high-text-active: var(--color-base-black);
191
+ --color-interaction-container-branded-high-text: var(--color-base-black);
192
+ --color-interaction-container-branded-high-icon-hover: var(--color-base-black);
193
+ --color-interaction-container-branded-high-icon-active: var(--color-base-black);
194
+ --color-interaction-container-branded-high-icon: var(--color-base-black);
195
+ --color-interaction-container-branded-high-border-hover: var(--color-petrol-400);
196
+ --color-interaction-container-branded-high-border-active: var(--color-petrol-400);
197
+ --color-interaction-container-branded-high-border: var(--color-petrol-500);
198
+ --color-interaction-container-branded-high-background-hover: var(--color-petrol-400);
199
+ --color-interaction-container-branded-high-background-active: var(--color-petrol-400);
200
+ --color-interaction-container-branded-high-background: var(--color-petrol-500);
168
201
  --color-focus-brand: var(--color-petrol-500);
169
202
  --color-feedback-success-high-contrast-title: var(--color-base-black);
170
203
  --color-feedback-success-high-contrast-text: var(--color-status-green-900);
@@ -291,47 +324,6 @@
291
324
  --color-level-20-background: var(--color-gray-ocean-700);
292
325
  --color-level-15-background: var(--color-gray-ocean-800);
293
326
  --color-level-10-background: var(--color-gray-ocean-800);
294
- --color-interaction-link-inverted-text-visited: var(--color-petrol-400);
295
- --color-interaction-link-inverted-text-hover: var(--color-petrol-600);
296
- --color-interaction-link-inverted-icon-visited: var(--color-petrol-400);
297
- --color-interaction-link-inverted-icon-hover: var(--color-petrol-600);
298
- --color-interaction-link-low-text-visited: var(--color-petrol-400);
299
- --color-interaction-link-low-text-hover: var(--color-petrol-400);
300
- --color-interaction-link-low-icon-visited: var(--color-petrol-400);
301
- --color-interaction-link-low-icon-hover: var(--color-petrol-400);
302
- --color-interaction-link-high-text-visited: var(--color-petrol-400);
303
- --color-interaction-link-high-text-hover: var(--color-petrol-400);
304
- --color-interaction-link-high-text: var(--color-petrol-500);
305
- --color-interaction-link-high-icon-visited: var(--color-petrol-400);
306
- --color-interaction-link-high-icon-hover: var(--color-petrol-400);
307
- --color-interaction-link-high-icon: var(--color-petrol-500);
308
- --color-interaction-container-branded-low-text-hover: var(--color-petrol-400);
309
- --color-interaction-container-branded-low-text-active: var(--color-petrol-400);
310
- --color-interaction-container-branded-low-text: var(--color-petrol-500);
311
- --color-interaction-container-branded-low-icon-hover: var(--color-petrol-400);
312
- --color-interaction-container-branded-low-icon-active: var(--color-petrol-400);
313
- --color-interaction-container-branded-low-icon: var(--color-petrol-500);
314
- --color-interaction-container-branded-low-border-hover: var(--color-petrol-400);
315
- --color-interaction-container-branded-low-border-active: var(--color-petrol-400);
316
- --color-interaction-container-branded-low-border: var(--color-petrol-500);
317
- --color-interaction-container-branded-low-background-hover: var(--color-petrol-900);
318
- --color-interaction-container-branded-low-background-active: var(--color-petrol-900);
319
- --color-interaction-container-branded-high-text-hover: var(--color-base-black);
320
- --color-interaction-container-branded-high-text-active: var(--color-base-black);
321
- --color-interaction-container-branded-high-text: var(--color-base-black);
322
- --color-interaction-container-branded-high-icon-hover: var(--color-base-black);
323
- --color-interaction-container-branded-high-icon-active: var(--color-base-black);
324
- --color-interaction-container-branded-high-icon: var(--color-base-black);
325
- --color-interaction-container-branded-high-border-hover: var(--color-petrol-400);
326
- --color-interaction-container-branded-high-border-active: var(--color-petrol-400);
327
- --color-interaction-container-branded-high-border: var(--color-petrol-500);
328
- --color-interaction-container-branded-high-background-hover: var(--color-petrol-400);
329
- --color-interaction-container-branded-high-background-active: var(--color-petrol-400);
330
- --color-interaction-container-branded-high-background: var(--color-petrol-500);
331
- --color-interaction-container-neutral-text-active: var(--color-petrol-400);
332
- --color-interaction-container-neutral-icon-active: var(--color-petrol-400);
333
- --color-interaction-container-neutral-border-active: var(--color-petrol-400);
334
- --color-interaction-container-neutral-background-active: var(--color-petrol-900);
335
327
  --components-togglegroup-high-border: var(--color-interaction-container-branded-low-border);
336
328
  --components-toggle-shape-hover-checked: var(--color-interaction-container-branded-high-icon);
337
329
  --components-toggle-shape-default-checked: var(--color-interaction-container-branded-high-icon);
@@ -370,6 +362,10 @@
370
362
  --components-menu-contextual-border: var(--color-content-low-border);
371
363
  --components-menu-contextual-background: var(--color-level-00-background);
372
364
  --components-calendar-background: var(--color-level-00-background);
365
+ --components-calendar-weeks-text-hover: var(--color-content-high-text);
366
+ --components-calendar-weeks-text: var(--color-content-high-text);
367
+ --components-calendar-weeks-background-hover: var(--color-level-15-background);
368
+ --components-calendar-weeks-background: var(--color-level-10-background);
373
369
  --components-calendar-cell-text-today: var(--color-content-high-text);
374
370
  --components-calendar-cell-text-outside-month: var(--color-content-lower-text);
375
371
  --components-calendar-cell-text-in-range: var(--color-interaction-container-branded-low-text-active);
@@ -380,10 +376,6 @@
380
376
  --components-calendar-cell-background-hover: var(--color-interaction-container-branded-low-background-hover);
381
377
  --components-calendar-cell-background-in-range: var(--color-interaction-container-branded-low-background-active);
382
378
  --components-calendar-cell-background-selected: var(--color-interaction-container-branded-high-background-active);
383
- --components-calendar-weeks-text-hover: var(--color-content-high-text);
384
- --components-calendar-weeks-text: var(--color-content-high-text);
385
- --components-calendar-weeks-background-hover: var(--color-level-15-background);
386
- --components-calendar-weeks-background: var(--color-level-10-background);
387
379
  --components-calendar-header-text: var(--color-content-high-text);
388
380
  --components-calendar-border: var(--color-content-low-border);
389
381
  --components-field-time-border-active: var(--color-interaction-container-neutral-icon-active);
@@ -537,11 +529,6 @@
537
529
  --components-button-high-background-hover: var(--color-interaction-container-branded-high-background-hover);
538
530
  --components-button-high-background-active: var(--color-interaction-container-branded-high-background-active);
539
531
  --components-button-high-background: var(--color-interaction-container-branded-high-background);
540
- --color-focus-success: var(--color-feedback-success-low-border);
541
- --color-focus-destructive-in-field: var(--color-feedback-error-low-border);
542
- --color-focus-destructive: var(--color-feedback-error-high-border);
543
- --color-focus-background-inverted: var(--color-level-inverted-00-background);
544
- --color-focus-background: var(--color-level-00-background);
545
532
  --color-interaction-link-inverted-text-inactive: var(--color-content-inverted-low-text);
546
533
  --color-interaction-link-inverted-text: var(--color-content-inverted-medium-text);
547
534
  --color-interaction-link-inverted-icon-disabled: var(--color-content-inverted-low-icon);
@@ -552,7 +539,6 @@
552
539
  --color-interaction-link-low-icon: var(--color-content-high-text);
553
540
  --color-interaction-link-high-text-disabled: var(--color-content-low-text);
554
541
  --color-interaction-link-high-icon-inactive: var(--color-content-low-icon);
555
- --color-interaction-container-branded-low-background: var(--color-level-00-background);
556
542
  --color-interaction-container-neutral-text-hover: var(--color-content-medium-text);
557
543
  --color-interaction-container-neutral-text: var(--color-content-low-text);
558
544
  --color-interaction-container-neutral-icon-hover: var(--color-content-medium-text);
@@ -560,6 +546,13 @@
560
546
  --color-interaction-container-neutral-border-hover: var(--color-content-medium-text);
561
547
  --color-interaction-container-neutral-border: var(--color-content-low-text);
562
548
  --color-interaction-container-neutral-background-hover: var(--color-level-10-background);
549
+ --color-interaction-container-neutral-background: var(--color-level-00-background);
550
+ --color-interaction-container-branded-low-background: var(--color-level-00-background);
551
+ --color-focus-success: var(--color-feedback-success-low-border);
552
+ --color-focus-destructive-in-field: var(--color-feedback-error-low-border);
553
+ --color-focus-destructive: var(--color-feedback-error-high-border);
554
+ --color-focus-background-inverted: var(--color-level-inverted-00-background);
555
+ --color-focus-background: var(--color-level-00-background);
563
556
  --components-togglegroup-low-background: var(--color-interaction-container-branded-low-background);
564
557
  --components-togglegroup-low-border: var(--color-interaction-container-neutral-border);
565
558
  --components-togglegroup-high-background: var(--color-interaction-container-branded-low-background);
@@ -586,6 +579,7 @@
586
579
  --components-menu-contextual-item-content-hover: var(--color-interaction-container-neutral-text-hover);
587
580
  --components-menu-contextual-item-content: var(--color-interaction-container-neutral-text);
588
581
  --components-menu-contextual-item-background-hover: var(--color-interaction-container-neutral-background-hover);
582
+ --components-menu-contextual-item-background: var(--color-interaction-container-neutral-background);
589
583
  --components-calendar-cell-text-hover: var(--color-interaction-container-neutral-text-hover);
590
584
  --components-calendar-cell-text: var(--color-interaction-container-neutral-text);
591
585
  --components-calendar-cell-background-today: var(--color-interaction-container-branded-low-background);
@@ -593,13 +587,18 @@
593
587
  --components-field-time-text-hover: var(--color-interaction-container-neutral-text-hover);
594
588
  --components-field-time-text-default: var(--color-interaction-container-neutral-text);
595
589
  --components-field-time-background-hover: var(--color-interaction-container-neutral-background-hover);
590
+ --components-field-time-background-default: var(--color-interaction-container-neutral-background);
596
591
  --components-datagrid-body-background-hover: var(--color-interaction-container-neutral-background-hover);
592
+ --components-datagrid-body-background-default: var(--color-interaction-container-neutral-background);
593
+ --components-datagrid-header-background: var(--color-interaction-container-neutral-background);
597
594
  --components-buttongroup-lower-background: var(--color-interaction-container-branded-low-background);
598
595
  --components-buttongroup-lower-border: var(--color-interaction-container-neutral-border);
599
596
  --components-buttongroup-low-background: var(--color-interaction-container-branded-low-background);
600
597
  --components-buttongroup-medium-background: var(--color-interaction-container-branded-low-background);
601
598
  --components-breadcrumb-text: var(--color-interaction-link-low-text);
599
+ --components-list-dropdown-item-background-disabled: var(--color-interaction-container-neutral-background);
602
600
  --components-list-dropdown-item-background-hover: var(--color-interaction-container-neutral-background-hover);
601
+ --components-list-dropdown-item-background-default: var(--color-interaction-container-neutral-background);
603
602
  --components-form-shape-foreground-disabled: var(--components-form-shape-border-default);
604
603
  --components-button-medium-background: var(--color-interaction-container-branded-low-background);
605
604
  --components-button-lower-text-hover: var(--color-interaction-container-neutral-text-hover);
@@ -607,6 +606,7 @@
607
606
  --components-button-lower-icon-hover: var(--color-interaction-container-neutral-icon-hover);
608
607
  --components-button-lower-icon: var(--color-interaction-container-neutral-icon);
609
608
  --components-button-lower-background-hover: var(--color-interaction-container-neutral-background-hover);
609
+ --components-button-lower-background: var(--color-interaction-container-neutral-background);
610
610
  }
611
611
 
612
612
  :root {
@@ -700,7 +700,6 @@
700
700
  --color-transparent: rgba(255, 255, 255, 0);
701
701
  --color-white: #ffffff;
702
702
  --color-black: #000000;
703
- --color-interaction-container-neutral-background: rgba(255, 255, 255, 0);
704
703
  --components-toggle-shape-hover: var(--color-gray-ocean-400);
705
704
  --components-toggle-shape-default: var(--color-gray-ocean-300);
706
705
  --components-toggle-background-disabled-checked: var(--color-gray-ocean-150);
@@ -712,10 +711,6 @@
712
711
  --components-tooltip-border: var(--color-gray-ocean-900);
713
712
  --components-tooltip-background: var(--color-gray-ocean-900);
714
713
  --components-popover-background: var(--color-gray-ocean-00);
715
- --components-menu-contextual-item-background: var(--color-interaction-container-neutral-background);
716
- --components-field-time-background-default: var(--color-interaction-container-neutral-background);
717
- --components-datagrid-body-background-default: var(--color-interaction-container-neutral-background);
718
- --components-datagrid-header-background: var(--color-interaction-container-neutral-background);
719
714
  --components-overlay-background: var(--color-gray-ocean-850);
720
715
  --components-button-destructive-high-icon-hover: var(--color-base-white);
721
716
  --components-button-destructive-high-icon: var(--color-base-white);
@@ -739,8 +734,6 @@
739
734
  --components-loader-brand-background: var(--color-petrol-50);
740
735
  --components-loader-white-foreground: var(--color-base-white);
741
736
  --components-list-dropdown-group-title-background: var(--color-transparent);
742
- --components-list-dropdown-item-background-disabled: var(--color-interaction-container-neutral-background);
743
- --components-list-dropdown-item-background-default: var(--color-interaction-container-neutral-background);
744
737
  --components-list-native-item-content-hover: var(--color-base-white);
745
738
  --components-list-native-item-content-default: var(--color-base-white);
746
739
  --components-form-shape-foreground-default: var(--color-base-white);
@@ -755,7 +748,6 @@
755
748
  --components-button-gr-as-complementary-text: var(--color-base-black);
756
749
  --components-button-gr-as-complementary-background-hover: var(--color-gray-ocean-300);
757
750
  --components-button-gr-as-complementary-background: var(--color-gray-ocean-200);
758
- --components-button-lower-background: var(--color-interaction-container-neutral-background);
759
751
  --color-dont-use-background: var(--color-gray-ocean-50);
760
752
  --color-dont-use-content: var(--color-gray-ocean-150);
761
753
  --color-dont-use-border: var(--color-gray-ocean-150);
@@ -799,6 +791,47 @@
799
791
  --color-rainbow-1-icon: var(--color-amber-700);
800
792
  --color-rainbow-1-border: var(--color-amber-700);
801
793
  --color-rainbow-1-background: var(--color-amber-50);
794
+ --color-interaction-link-inverted-text-visited: var(--color-petrol-700);
795
+ --color-interaction-link-inverted-text-hover: var(--color-petrol-500);
796
+ --color-interaction-link-inverted-icon-visited: var(--color-petrol-700);
797
+ --color-interaction-link-inverted-icon-hover: var(--color-petrol-500);
798
+ --color-interaction-link-low-text-visited: var(--color-petrol-700);
799
+ --color-interaction-link-low-text-hover: var(--color-petrol-700);
800
+ --color-interaction-link-low-icon-visited: var(--color-petrol-700);
801
+ --color-interaction-link-low-icon-hover: var(--color-petrol-700);
802
+ --color-interaction-link-high-text-visited: var(--color-petrol-700);
803
+ --color-interaction-link-high-text-hover: var(--color-petrol-700);
804
+ --color-interaction-link-high-text: var(--color-petrol-600);
805
+ --color-interaction-link-high-icon-visited: var(--color-petrol-700);
806
+ --color-interaction-link-high-icon-hover: var(--color-petrol-700);
807
+ --color-interaction-link-high-icon: var(--color-petrol-600);
808
+ --color-interaction-container-neutral-text-active: var(--color-petrol-700);
809
+ --color-interaction-container-neutral-icon-active: var(--color-petrol-700);
810
+ --color-interaction-container-neutral-border-active: var(--color-petrol-700);
811
+ --color-interaction-container-neutral-background-active: var(--color-petrol-50);
812
+ --color-interaction-container-branded-low-text-hover: var(--color-petrol-700);
813
+ --color-interaction-container-branded-low-text-active: var(--color-petrol-700);
814
+ --color-interaction-container-branded-low-text: var(--color-petrol-600);
815
+ --color-interaction-container-branded-low-icon-hover: var(--color-petrol-700);
816
+ --color-interaction-container-branded-low-icon-active: var(--color-petrol-700);
817
+ --color-interaction-container-branded-low-icon: var(--color-petrol-600);
818
+ --color-interaction-container-branded-low-border-hover: var(--color-petrol-700);
819
+ --color-interaction-container-branded-low-border-active: var(--color-petrol-700);
820
+ --color-interaction-container-branded-low-border: var(--color-petrol-600);
821
+ --color-interaction-container-branded-low-background-hover: var(--color-petrol-50);
822
+ --color-interaction-container-branded-low-background-active: var(--color-petrol-50);
823
+ --color-interaction-container-branded-high-text-hover: var(--color-base-white);
824
+ --color-interaction-container-branded-high-text-active: var(--color-base-white);
825
+ --color-interaction-container-branded-high-text: var(--color-base-white);
826
+ --color-interaction-container-branded-high-icon-hover: var(--color-base-white);
827
+ --color-interaction-container-branded-high-icon-active: var(--color-base-white);
828
+ --color-interaction-container-branded-high-icon: var(--color-base-white);
829
+ --color-interaction-container-branded-high-border-hover: var(--color-petrol-700);
830
+ --color-interaction-container-branded-high-border-active: var(--color-petrol-700);
831
+ --color-interaction-container-branded-high-border: var(--color-petrol-600);
832
+ --color-interaction-container-branded-high-background-hover: var(--color-petrol-700);
833
+ --color-interaction-container-branded-high-background-active: var(--color-petrol-700);
834
+ --color-interaction-container-branded-high-background: var(--color-petrol-600);
802
835
  --color-focus-brand: var(--color-petrol-600);
803
836
  --color-feedback-success-high-contrast-title: var(--color-base-white);
804
837
  --color-feedback-success-high-contrast-text: var(--color-status-green-50);
@@ -925,47 +958,6 @@
925
958
  --color-level-20-background: var(--color-gray-ocean-00);
926
959
  --color-level-15-background: var(--color-gray-ocean-75);
927
960
  --color-level-10-background: var(--color-gray-ocean-50);
928
- --color-interaction-link-inverted-text-visited: var(--color-petrol-700);
929
- --color-interaction-link-inverted-text-hover: var(--color-petrol-500);
930
- --color-interaction-link-inverted-icon-visited: var(--color-petrol-700);
931
- --color-interaction-link-inverted-icon-hover: var(--color-petrol-500);
932
- --color-interaction-link-low-text-visited: var(--color-petrol-700);
933
- --color-interaction-link-low-text-hover: var(--color-petrol-700);
934
- --color-interaction-link-low-icon-visited: var(--color-petrol-700);
935
- --color-interaction-link-low-icon-hover: var(--color-petrol-700);
936
- --color-interaction-link-high-text-visited: var(--color-petrol-700);
937
- --color-interaction-link-high-text-hover: var(--color-petrol-700);
938
- --color-interaction-link-high-text: var(--color-petrol-600);
939
- --color-interaction-link-high-icon-visited: var(--color-petrol-700);
940
- --color-interaction-link-high-icon-hover: var(--color-petrol-700);
941
- --color-interaction-link-high-icon: var(--color-petrol-600);
942
- --color-interaction-container-branded-low-text-hover: var(--color-petrol-700);
943
- --color-interaction-container-branded-low-text-active: var(--color-petrol-700);
944
- --color-interaction-container-branded-low-text: var(--color-petrol-600);
945
- --color-interaction-container-branded-low-icon-hover: var(--color-petrol-700);
946
- --color-interaction-container-branded-low-icon-active: var(--color-petrol-700);
947
- --color-interaction-container-branded-low-icon: var(--color-petrol-600);
948
- --color-interaction-container-branded-low-border-hover: var(--color-petrol-700);
949
- --color-interaction-container-branded-low-border-active: var(--color-petrol-700);
950
- --color-interaction-container-branded-low-border: var(--color-petrol-600);
951
- --color-interaction-container-branded-low-background-hover: var(--color-petrol-50);
952
- --color-interaction-container-branded-low-background-active: var(--color-petrol-50);
953
- --color-interaction-container-branded-high-text-hover: var(--color-base-white);
954
- --color-interaction-container-branded-high-text-active: var(--color-base-white);
955
- --color-interaction-container-branded-high-text: var(--color-base-white);
956
- --color-interaction-container-branded-high-icon-hover: var(--color-base-white);
957
- --color-interaction-container-branded-high-icon-active: var(--color-base-white);
958
- --color-interaction-container-branded-high-icon: var(--color-base-white);
959
- --color-interaction-container-branded-high-border-hover: var(--color-petrol-700);
960
- --color-interaction-container-branded-high-border-active: var(--color-petrol-700);
961
- --color-interaction-container-branded-high-border: var(--color-petrol-600);
962
- --color-interaction-container-branded-high-background-hover: var(--color-petrol-700);
963
- --color-interaction-container-branded-high-background-active: var(--color-petrol-700);
964
- --color-interaction-container-branded-high-background: var(--color-petrol-600);
965
- --color-interaction-container-neutral-text-active: var(--color-petrol-700);
966
- --color-interaction-container-neutral-icon-active: var(--color-petrol-700);
967
- --color-interaction-container-neutral-border-active: var(--color-petrol-700);
968
- --color-interaction-container-neutral-background-active: var(--color-petrol-50);
969
961
  --components-togglegroup-high-border: var(--color-interaction-container-branded-low-border);
970
962
  --components-toggle-shape-hover-checked: var(--color-interaction-container-branded-high-icon);
971
963
  --components-toggle-shape-default-checked: var(--color-interaction-container-branded-high-icon);
@@ -1004,6 +996,10 @@
1004
996
  --components-menu-contextual-border: var(--color-content-low-border);
1005
997
  --components-menu-contextual-background: var(--color-level-00-background);
1006
998
  --components-calendar-background: var(--color-level-00-background);
999
+ --components-calendar-weeks-text-hover: var(--color-content-high-text);
1000
+ --components-calendar-weeks-text: var(--color-content-high-text);
1001
+ --components-calendar-weeks-background-hover: var(--color-level-15-background);
1002
+ --components-calendar-weeks-background: var(--color-level-10-background);
1007
1003
  --components-calendar-cell-text-today: var(--color-content-high-text);
1008
1004
  --components-calendar-cell-text-outside-month: var(--color-content-lower-text);
1009
1005
  --components-calendar-cell-text-in-range: var(--color-interaction-container-branded-low-text-active);
@@ -1014,10 +1010,6 @@
1014
1010
  --components-calendar-cell-background-hover: var(--color-interaction-container-branded-low-background-hover);
1015
1011
  --components-calendar-cell-background-in-range: var(--color-interaction-container-branded-low-background-active);
1016
1012
  --components-calendar-cell-background-selected: var(--color-interaction-container-branded-high-background-active);
1017
- --components-calendar-weeks-text-hover: var(--color-content-high-text);
1018
- --components-calendar-weeks-text: var(--color-content-high-text);
1019
- --components-calendar-weeks-background-hover: var(--color-level-15-background);
1020
- --components-calendar-weeks-background: var(--color-level-10-background);
1021
1013
  --components-calendar-header-text: var(--color-content-high-text);
1022
1014
  --components-calendar-border: var(--color-content-low-border);
1023
1015
  --components-field-time-border-active: var(--color-interaction-container-neutral-icon-active);
@@ -1171,11 +1163,6 @@
1171
1163
  --components-button-high-background-hover: var(--color-interaction-container-branded-high-background-hover);
1172
1164
  --components-button-high-background-active: var(--color-interaction-container-branded-high-background-active);
1173
1165
  --components-button-high-background: var(--color-interaction-container-branded-high-background);
1174
- --color-focus-success: var(--color-feedback-success-low-border);
1175
- --color-focus-destructive-in-field: var(--color-feedback-error-low-border);
1176
- --color-focus-destructive: var(--color-feedback-error-high-border);
1177
- --color-focus-background-inverted: var(--color-level-inverted-00-background);
1178
- --color-focus-background: var(--color-level-00-background);
1179
1166
  --color-interaction-link-inverted-text-inactive: var(--color-content-inverted-low-text);
1180
1167
  --color-interaction-link-inverted-text: var(--color-content-inverted-medium-text);
1181
1168
  --color-interaction-link-inverted-icon-disabled: var(--color-content-inverted-low-icon);
@@ -1186,7 +1173,6 @@
1186
1173
  --color-interaction-link-low-icon: var(--color-content-high-text);
1187
1174
  --color-interaction-link-high-text-disabled: var(--color-content-low-text);
1188
1175
  --color-interaction-link-high-icon-inactive: var(--color-content-low-icon);
1189
- --color-interaction-container-branded-low-background: var(--color-level-00-background);
1190
1176
  --color-interaction-container-neutral-text-hover: var(--color-content-medium-text);
1191
1177
  --color-interaction-container-neutral-text: var(--color-content-low-text);
1192
1178
  --color-interaction-container-neutral-icon-hover: var(--color-content-medium-text);
@@ -1194,6 +1180,13 @@
1194
1180
  --color-interaction-container-neutral-border-hover: var(--color-content-medium-text);
1195
1181
  --color-interaction-container-neutral-border: var(--color-content-inverted-low-text);
1196
1182
  --color-interaction-container-neutral-background-hover: var(--color-level-10-background);
1183
+ --color-interaction-container-neutral-background: var(--color-level-00-background);
1184
+ --color-interaction-container-branded-low-background: var(--color-level-00-background);
1185
+ --color-focus-success: var(--color-feedback-success-low-border);
1186
+ --color-focus-destructive-in-field: var(--color-feedback-error-low-border);
1187
+ --color-focus-destructive: var(--color-feedback-error-high-border);
1188
+ --color-focus-background-inverted: var(--color-level-inverted-00-background);
1189
+ --color-focus-background: var(--color-level-00-background);
1197
1190
  --components-togglegroup-low-background: var(--color-interaction-container-branded-low-background);
1198
1191
  --components-togglegroup-low-border: var(--color-interaction-container-neutral-border);
1199
1192
  --components-togglegroup-high-background: var(--color-interaction-container-branded-low-background);
@@ -1220,6 +1213,7 @@
1220
1213
  --components-menu-contextual-item-content-hover: var(--color-interaction-container-neutral-text-hover);
1221
1214
  --components-menu-contextual-item-content: var(--color-interaction-container-neutral-text);
1222
1215
  --components-menu-contextual-item-background-hover: var(--color-interaction-container-neutral-background-hover);
1216
+ --components-menu-contextual-item-background: var(--color-interaction-container-neutral-background);
1223
1217
  --components-calendar-cell-text-hover: var(--color-interaction-container-neutral-text-hover);
1224
1218
  --components-calendar-cell-text: var(--color-interaction-container-neutral-text);
1225
1219
  --components-calendar-cell-background-today: var(--color-interaction-container-branded-low-background);
@@ -1227,13 +1221,18 @@
1227
1221
  --components-field-time-text-hover: var(--color-interaction-container-neutral-text-hover);
1228
1222
  --components-field-time-text-default: var(--color-interaction-container-neutral-text);
1229
1223
  --components-field-time-background-hover: var(--color-interaction-container-neutral-background-hover);
1224
+ --components-field-time-background-default: var(--color-interaction-container-neutral-background);
1230
1225
  --components-datagrid-body-background-hover: var(--color-interaction-container-neutral-background-hover);
1226
+ --components-datagrid-body-background-default: var(--color-interaction-container-neutral-background);
1227
+ --components-datagrid-header-background: var(--color-interaction-container-neutral-background);
1231
1228
  --components-buttongroup-lower-background: var(--color-interaction-container-branded-low-background);
1232
1229
  --components-buttongroup-lower-border: var(--color-interaction-container-neutral-border);
1233
1230
  --components-buttongroup-low-background: var(--color-interaction-container-branded-low-background);
1234
1231
  --components-buttongroup-medium-background: var(--color-interaction-container-branded-low-background);
1235
1232
  --components-breadcrumb-text: var(--color-interaction-link-low-text);
1233
+ --components-list-dropdown-item-background-disabled: var(--color-interaction-container-neutral-background);
1236
1234
  --components-list-dropdown-item-background-hover: var(--color-interaction-container-neutral-background-hover);
1235
+ --components-list-dropdown-item-background-default: var(--color-interaction-container-neutral-background);
1237
1236
  --components-form-shape-foreground-disabled: var(--components-form-shape-border-default);
1238
1237
  --components-button-medium-background: var(--color-interaction-container-branded-low-background);
1239
1238
  --components-button-lower-text-hover: var(--color-interaction-container-neutral-text-hover);
@@ -1241,6 +1240,7 @@
1241
1240
  --components-button-lower-icon-hover: var(--color-interaction-container-neutral-icon-hover);
1242
1241
  --components-button-lower-icon: var(--color-interaction-container-neutral-icon);
1243
1242
  --components-button-lower-background-hover: var(--color-interaction-container-neutral-background-hover);
1243
+ --components-button-lower-background: var(--color-interaction-container-neutral-background);
1244
1244
  }
1245
1245
 
1246
1246
  /**
@@ -1559,10 +1559,16 @@
1559
1559
  --togglegroup-xs-button-radius: 1.0000px;
1560
1560
  --togglegroup-xs-button-padding-y: 1.0000px;
1561
1561
  --togglegroup-xs-padding: 3.0000px;
1562
+ --sidebar-primary-notification-bullet-font-size: 9.0000px;
1563
+ --sidebar-reduced-max-width: 100.0000px;
1564
+ --sidebar-width: 312.0000px;
1562
1565
  --popover-shadow-2-x: 0.0000px;
1563
1566
  --popover-shadow-1-blur: 1.0000px;
1564
1567
  --popover-shadow-1-x: 0.0000px;
1565
1568
  --popover-font-weight: 500;
1569
+ --navigation-primary-notification-bullet-font-size: 9.0000px;
1570
+ --navigation-reduced-max-width: 100.0000px;
1571
+ --navigation-width: 312.0000px;
1566
1572
  --menu-contextual-item-font-weight: 500;
1567
1573
  --menu-contextual-divider-padding-bottom: 3.0000px;
1568
1574
  --form-max-width: 480.0000px;
@@ -1590,6 +1596,12 @@
1590
1596
  --buttongroup-sm-button-padding-y: 4.0000px;
1591
1597
  --buttongroup-xs-button-radius: 1.0000px;
1592
1598
  --buttongroup-xs-padding: 2.0000px;
1599
+ --pagination-table-padding-y: var(--spacing-2);
1600
+ --pagination-table-padding-x: var(--spacing-3);
1601
+ --pagination-table-padding-left: var(--spacing-3);
1602
+ --pagination-table-height: var(--spacing-9);
1603
+ --pagination-table-gap-x: var(--spacing-8);
1604
+ --pagination-table-font-size: var(--font-size-sm);
1593
1605
  --notification-title-line-height: var(--line-height-sm);
1594
1606
  --notification-title-font-weight: var(--font-weight-medium-emphasis);
1595
1607
  --notification-title-font-size: var(--font-size-sm);
@@ -1609,14 +1621,6 @@
1609
1621
  --notification-gap-x-title: var(--spacing-2);
1610
1622
  --notification-gap-x: var(--spacing-3);
1611
1623
  --notification-icon-size: var(--spacing-5);
1612
- --navigation-primary-item-bullet-size: var(--spacing-5);
1613
- --navigation-primary-item-bullet-font-size: var(--font-size-xs);
1614
- --navigation-primary-item-radius: var(--radius-rounded-md);
1615
- --navigation-primary-item-icon-size: var(--spacing-5);
1616
- --navigation-primary-item-font-size: var(--font-size-md);
1617
- --navigation-primary-item-padding-y: var(--spacing-2);
1618
- --navigation-primary-item-padding-x: var(--spacing-3);
1619
- --navigation-primary-item-gap-x: var(--spacing-2);
1620
1624
  --loader-size-xl: var(--spacing-8);
1621
1625
  --loader-size-lg: var(--spacing-7);
1622
1626
  --loader-size-md: var(--spacing-6);
@@ -1743,6 +1747,23 @@
1743
1747
  --togglegroup-xs-height: var(--spacing-6);
1744
1748
  --togglegroup-xs-gap: var(--spacing-0-5);
1745
1749
  --togglegroup-xs-radius: var(--radius-rounded-sm);
1750
+ --sidebar-collapsible-button-icon-size: var(--spacing-4);
1751
+ --sidebar-collapsible-button-padding: var(--spacing-2);
1752
+ --sidebar-gap-y: var(--spacing-3);
1753
+ --sidebar-primary-separator-size: var(--spacing-px);
1754
+ --sidebar-primary-sub-item-padding-left-x: var(--spacing-7);
1755
+ --sidebar-primary-item-radius: var(--radius-rounded-md);
1756
+ --sidebar-primary-item-icon-size: var(--spacing-5);
1757
+ --sidebar-primary-item-font-size: var(--font-size-md);
1758
+ --sidebar-primary-item-padding-y: var(--spacing-2);
1759
+ --sidebar-primary-item-padding-x: var(--spacing-3);
1760
+ --sidebar-primary-item-gap-x: var(--spacing-2);
1761
+ --sidebar-primary-title-font-size: var(--font-size-sm);
1762
+ --sidebar-primary-title-padding-y: var(--spacing-1);
1763
+ --sidebar-primary-title-padding-x: var(--spacing-3);
1764
+ --sidebar-primary-notification-bullet-font-weight: var(--font-weight-medium-emphasis);
1765
+ --sidebar-primary-notification-bullet-size-reduced: var(--spacing-1-5);
1766
+ --sidebar-primary-notification-bullet-size: var(--spacing-4);
1746
1767
  --popover-radius: var(--radius-rounded-md);
1747
1768
  --popover-padding-y: var(--spacing-2);
1748
1769
  --popover-padding-x: var(--spacing-2);
@@ -1755,6 +1776,23 @@
1755
1776
  --popover-shadow-1-opacity: var(--shadow-color-opacity-3);
1756
1777
  --popover-shadow-1-spread: var(--shadow-spread-lg-1);
1757
1778
  --popover-shadow-1-y: var(--shadow-y-axis-none);
1779
+ --navigation-collapsible-button-icon-size: var(--spacing-4);
1780
+ --navigation-collapsible-button-padding: var(--spacing-2);
1781
+ --navigation-gap-y: var(--spacing-3);
1782
+ --navigation-primary-separator-size: var(--spacing-px);
1783
+ --navigation-primary-sub-item-padding-left-x: var(--spacing-7);
1784
+ --navigation-primary-item-radius: var(--radius-rounded-md);
1785
+ --navigation-primary-item-icon-size: var(--spacing-5);
1786
+ --navigation-primary-item-font-size: var(--font-size-md);
1787
+ --navigation-primary-item-padding-y: var(--spacing-2);
1788
+ --navigation-primary-item-padding-x: var(--spacing-3);
1789
+ --navigation-primary-item-gap-x: var(--spacing-2);
1790
+ --navigation-primary-title-font-size: var(--font-size-sm);
1791
+ --navigation-primary-title-padding-y: var(--spacing-1);
1792
+ --navigation-primary-title-padding-x: var(--spacing-3);
1793
+ --navigation-primary-notification-bullet-font-weight: var(--font-weight-medium-emphasis);
1794
+ --navigation-primary-notification-bullet-size-reduced: var(--spacing-1-5);
1795
+ --navigation-primary-notification-bullet-size: var(--spacing-4);
1758
1796
  --menu-contextual-radius: var(--radius-rounded-md);
1759
1797
  --menu-contextual-padding-y: var(--spacing-1);
1760
1798
  --menu-contextual-padding-x: var(--spacing-1);
@@ -1875,6 +1913,7 @@
1875
1913
  --button-lg-line-height: var(--line-height-lg);
1876
1914
  --button-lg-icon-size: var(--spacing-6);
1877
1915
  --button-lg-icon-button-padding: var(--spacing-3);
1916
+ --button-lg-height: var(--spacing-12);
1878
1917
  --button-lg-gap: var(--spacing-2);
1879
1918
  --button-lg-font-size: var(--font-size-lg);
1880
1919
  --button-lg-border-radius: var(--radius-rounded-lg);
@@ -1883,6 +1922,7 @@
1883
1922
  --button-md-line-height: var(--line-height-base);
1884
1923
  --button-md-icon-size: var(--spacing-5);
1885
1924
  --button-md-icon-button-padding: var(--spacing-2-5);
1925
+ --button-md-height: var(--spacing-10);
1886
1926
  --button-md-gap: var(--spacing-2);
1887
1927
  --button-md-font-size: var(--font-size-md);
1888
1928
  --button-md-border-radius: var(--radius-rounded-md);
@@ -1891,6 +1931,7 @@
1891
1931
  --button-sm-line-height: var(--line-height-sm);
1892
1932
  --button-sm-icon-size: var(--spacing-4);
1893
1933
  --button-sm-icon-button-padding: var(--spacing-2);
1934
+ --button-sm-height: var(--spacing-8);
1894
1935
  --button-sm-gap: var(--spacing-1-5);
1895
1936
  --button-sm-font-size: var(--font-size-sm);
1896
1937
  --button-sm-border-radius: var(--radius-rounded);
@@ -1899,6 +1940,7 @@
1899
1940
  --button-xs-line-height: var(--line-height-xs);
1900
1941
  --button-xs-icon-size: var(--spacing-3);
1901
1942
  --button-xs-icon-button-padding: var(--spacing-1-5);
1943
+ --button-xs-height: var(--spacing-6);
1902
1944
  --button-xs-gap: var(--spacing-1);
1903
1945
  --button-xs-font-size: var(--font-size-xs);
1904
1946
  --button-xs-border-radius: var(--radius-rounded-sm);