@nova-design-system/nova-base 3.21.1-beta.0 → 3.23.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 (18) hide show
  1. package/assets/nova-fonts.css +3 -3
  2. package/dist/cjs/generated/nova-tailwind-components.js +0 -1
  3. package/dist/css/nova-utils.css +0 -2
  4. package/dist/css/ocean.css +232 -162
  5. package/dist/css/spark.css +234 -164
  6. package/dist/generated/nova-tailwind-components.d.ts +0 -1
  7. package/dist/generated/nova-tailwind-components.js +0 -1
  8. package/dist/js/ocean_dark.d.ts +79 -64
  9. package/dist/js/ocean_dark.js +86 -71
  10. package/dist/js/ocean_light.d.ts +79 -64
  11. package/dist/js/ocean_light.js +79 -64
  12. package/dist/js/spacings.d.ts +84 -44
  13. package/dist/js/spacings.js +84 -44
  14. package/dist/js/spark_dark.d.ts +79 -64
  15. package/dist/js/spark_dark.js +87 -72
  16. package/dist/js/spark_light.d.ts +79 -64
  17. package/dist/js/spark_light.js +79 -64
  18. package/package.json +1 -1
package/dist/css/ocean.css CHANGED
@@ -66,6 +66,7 @@
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(0, 0, 0, 0);
69
70
  --components-toggle-shape-hover: var(--color-gray-ocean-300);
70
71
  --components-toggle-shape-default: var(--color-gray-ocean-400);
71
72
  --components-toggle-background-disabled-checked: var(--color-gray-ocean-600);
@@ -76,7 +77,13 @@
76
77
  --components-toggle-border-default: var(--color-gray-ocean-400);
77
78
  --components-tooltip-border: var(--color-gray-ocean-50);
78
79
  --components-tooltip-background: var(--color-gray-ocean-50);
80
+ --components-splitter-old-border: var(--color-transparent);
81
+ --components-splitter-old-background: var(--color-interaction-container-neutral-background);
79
82
  --components-popover-background: var(--color-gray-ocean-900);
83
+ --components-menu-contextual-item-background: var(--color-interaction-container-neutral-background);
84
+ --components-field-time-background-default: var(--color-interaction-container-neutral-background);
85
+ --components-datagrid-body-background-default: var(--color-interaction-container-neutral-background);
86
+ --components-datagrid-header-background: var(--color-interaction-container-neutral-background);
80
87
  --components-overlay-background: var(--color-gray-ocean-650);
81
88
  --components-button-destructive-high-icon-hover: var(--color-base-black);
82
89
  --components-button-destructive-high-icon: var(--color-base-black);
@@ -100,6 +107,8 @@
100
107
  --components-loader-brand-background: var(--color-petrol-900);
101
108
  --components-loader-white-foreground: var(--color-base-white);
102
109
  --components-list-dropdown-group-title-background: var(--color-transparent);
110
+ --components-list-dropdown-item-background-disabled: var(--color-interaction-container-neutral-background);
111
+ --components-list-dropdown-item-background-default: var(--color-interaction-container-neutral-background);
103
112
  --components-list-native-item-content-hover: var(--color-base-white);
104
113
  --components-list-native-item-content-default: var(--color-base-white);
105
114
  --components-form-shape-foreground-default: var(--color-base-black);
@@ -114,6 +123,7 @@
114
123
  --components-button-gr-as-complementary-text: var(--color-base-white);
115
124
  --components-button-gr-as-complementary-background-hover: var(--color-gray-ocean-350);
116
125
  --components-button-gr-as-complementary-background: var(--color-gray-ocean-450);
126
+ --components-button-lower-background: var(--color-interaction-container-neutral-background);
117
127
  --color-dont-use-background: var(--color-gray-ocean-900);
118
128
  --color-dont-use-content: var(--color-gray-ocean-750);
119
129
  --color-dont-use-border: var(--color-gray-ocean-750);
@@ -157,47 +167,6 @@
157
167
  --color-rainbow-1-icon: var(--color-amber-500);
158
168
  --color-rainbow-1-border: var(--color-amber-500);
159
169
  --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);
201
170
  --color-focus-brand: var(--color-petrol-500);
202
171
  --color-feedback-success-high-contrast-title: var(--color-base-black);
203
172
  --color-feedback-success-high-contrast-text: var(--color-status-green-900);
@@ -324,6 +293,47 @@
324
293
  --color-level-20-background: var(--color-gray-ocean-700);
325
294
  --color-level-15-background: var(--color-gray-ocean-800);
326
295
  --color-level-10-background: var(--color-gray-ocean-800);
296
+ --color-interaction-link-inverted-text-visited: var(--color-petrol-400);
297
+ --color-interaction-link-inverted-text-hover: var(--color-petrol-600);
298
+ --color-interaction-link-inverted-icon-visited: var(--color-petrol-400);
299
+ --color-interaction-link-inverted-icon-hover: var(--color-petrol-600);
300
+ --color-interaction-link-low-text-visited: var(--color-petrol-400);
301
+ --color-interaction-link-low-text-hover: var(--color-petrol-400);
302
+ --color-interaction-link-low-icon-visited: var(--color-petrol-400);
303
+ --color-interaction-link-low-icon-hover: var(--color-petrol-400);
304
+ --color-interaction-link-high-text-visited: var(--color-petrol-400);
305
+ --color-interaction-link-high-text-hover: var(--color-petrol-400);
306
+ --color-interaction-link-high-text: var(--color-petrol-500);
307
+ --color-interaction-link-high-icon-visited: var(--color-petrol-400);
308
+ --color-interaction-link-high-icon-hover: var(--color-petrol-400);
309
+ --color-interaction-link-high-icon: var(--color-petrol-500);
310
+ --color-interaction-container-branded-low-text-hover: var(--color-petrol-400);
311
+ --color-interaction-container-branded-low-text-active: var(--color-petrol-400);
312
+ --color-interaction-container-branded-low-text: var(--color-petrol-500);
313
+ --color-interaction-container-branded-low-icon-hover: var(--color-petrol-400);
314
+ --color-interaction-container-branded-low-icon-active: var(--color-petrol-400);
315
+ --color-interaction-container-branded-low-icon: var(--color-petrol-500);
316
+ --color-interaction-container-branded-low-border-hover: var(--color-petrol-400);
317
+ --color-interaction-container-branded-low-border-active: var(--color-petrol-400);
318
+ --color-interaction-container-branded-low-border: var(--color-petrol-500);
319
+ --color-interaction-container-branded-low-background-hover: var(--color-petrol-900);
320
+ --color-interaction-container-branded-low-background-active: var(--color-petrol-900);
321
+ --color-interaction-container-branded-high-text-hover: var(--color-base-black);
322
+ --color-interaction-container-branded-high-text-active: var(--color-base-black);
323
+ --color-interaction-container-branded-high-text: var(--color-base-black);
324
+ --color-interaction-container-branded-high-icon-hover: var(--color-base-black);
325
+ --color-interaction-container-branded-high-icon-active: var(--color-base-black);
326
+ --color-interaction-container-branded-high-icon: var(--color-base-black);
327
+ --color-interaction-container-branded-high-border-hover: var(--color-petrol-400);
328
+ --color-interaction-container-branded-high-border-active: var(--color-petrol-400);
329
+ --color-interaction-container-branded-high-border: var(--color-petrol-500);
330
+ --color-interaction-container-branded-high-background-hover: var(--color-petrol-400);
331
+ --color-interaction-container-branded-high-background-active: var(--color-petrol-400);
332
+ --color-interaction-container-branded-high-background: var(--color-petrol-500);
333
+ --color-interaction-container-neutral-text-active: var(--color-petrol-400);
334
+ --color-interaction-container-neutral-icon-active: var(--color-petrol-400);
335
+ --color-interaction-container-neutral-border-active: var(--color-petrol-400);
336
+ --color-interaction-container-neutral-background-active: var(--color-petrol-900);
327
337
  --components-togglegroup-high-border: var(--color-interaction-container-branded-low-border);
328
338
  --components-toggle-shape-hover-checked: var(--color-interaction-container-branded-high-icon);
329
339
  --components-toggle-shape-default-checked: var(--color-interaction-container-branded-high-icon);
@@ -333,9 +343,20 @@
333
343
  --components-toggle-border-default-checked: var(--color-interaction-container-branded-high-border);
334
344
  --components-tooltip-supporting-text: var(--color-content-inverted-medium-text);
335
345
  --components-tooltip-text: var(--color-content-inverted-high-text);
346
+ --components-splitter-handle-background-hover: var(--color-interaction-container-branded-high-background-active);
347
+ --components-splitter-handle-background-active: var(--color-interaction-container-branded-high-background-active);
348
+ --components-splitter-handle-background: var(--color-content-low-border);
349
+ --components-splitter-line-background-hover: var(--color-interaction-container-branded-low-background-active);
350
+ --components-splitter-line-background-active: var(--color-interaction-container-branded-high-background-active);
351
+ --components-splitter-line-background: var(--color-level-10-background);
352
+ --components-splitter-old-border-active: var(--color-interaction-container-neutral-border-active);
353
+ --components-splitter-old-background-active: var(--color-interaction-container-neutral-background-active);
336
354
  --components-slider-handler-border-focus: var(--components-form-field-background-checked);
337
355
  --components-slider-handler-background-focus: var(--components-form-field-background-checked);
338
356
  --components-slider-track-background: var(--color-content-low-border);
357
+ --components-sidebar-border: var(--color-content-low-border);
358
+ --components-sidebar-divider: var(--color-content-low-border);
359
+ --components-sidebar-background: var(--color-level-00-background);
339
360
  --components-popover-supporting-text: var(--color-content-low-text);
340
361
  --components-popover-text: var(--color-content-inverted-medium-text);
341
362
  --components-popover-border: var(--color-content-low-border);
@@ -362,10 +383,6 @@
362
383
  --components-menu-contextual-border: var(--color-content-low-border);
363
384
  --components-menu-contextual-background: var(--color-level-00-background);
364
385
  --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);
369
386
  --components-calendar-cell-text-today: var(--color-content-high-text);
370
387
  --components-calendar-cell-text-outside-month: var(--color-content-lower-text);
371
388
  --components-calendar-cell-text-in-range: var(--color-interaction-container-branded-low-text-active);
@@ -376,6 +393,10 @@
376
393
  --components-calendar-cell-background-hover: var(--color-interaction-container-branded-low-background-hover);
377
394
  --components-calendar-cell-background-in-range: var(--color-interaction-container-branded-low-background-active);
378
395
  --components-calendar-cell-background-selected: var(--color-interaction-container-branded-high-background-active);
396
+ --components-calendar-weeks-text-hover: var(--color-content-high-text);
397
+ --components-calendar-weeks-text: var(--color-content-high-text);
398
+ --components-calendar-weeks-background-hover: var(--color-level-15-background);
399
+ --components-calendar-weeks-background: var(--color-level-10-background);
379
400
  --components-calendar-header-text: var(--color-content-high-text);
380
401
  --components-calendar-border: var(--color-content-low-border);
381
402
  --components-field-time-border-active: var(--color-interaction-container-neutral-icon-active);
@@ -529,6 +550,11 @@
529
550
  --components-button-high-background-hover: var(--color-interaction-container-branded-high-background-hover);
530
551
  --components-button-high-background-active: var(--color-interaction-container-branded-high-background-active);
531
552
  --components-button-high-background: var(--color-interaction-container-branded-high-background);
553
+ --color-focus-success: var(--color-feedback-success-low-border);
554
+ --color-focus-destructive-in-field: var(--color-feedback-error-low-border);
555
+ --color-focus-destructive: var(--color-feedback-error-high-border);
556
+ --color-focus-background-inverted: var(--color-level-inverted-00-background);
557
+ --color-focus-background: var(--color-level-00-background);
532
558
  --color-interaction-link-inverted-text-inactive: var(--color-content-inverted-low-text);
533
559
  --color-interaction-link-inverted-text: var(--color-content-inverted-medium-text);
534
560
  --color-interaction-link-inverted-icon-disabled: var(--color-content-inverted-low-icon);
@@ -539,6 +565,7 @@
539
565
  --color-interaction-link-low-icon: var(--color-content-high-text);
540
566
  --color-interaction-link-high-text-disabled: var(--color-content-low-text);
541
567
  --color-interaction-link-high-icon-inactive: var(--color-content-low-icon);
568
+ --color-interaction-container-branded-low-background: var(--color-level-00-background);
542
569
  --color-interaction-container-neutral-text-hover: var(--color-content-medium-text);
543
570
  --color-interaction-container-neutral-text: var(--color-content-low-text);
544
571
  --color-interaction-container-neutral-icon-hover: var(--color-content-medium-text);
@@ -546,13 +573,6 @@
546
573
  --color-interaction-container-neutral-border-hover: var(--color-content-medium-text);
547
574
  --color-interaction-container-neutral-border: var(--color-content-low-text);
548
575
  --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);
556
576
  --components-togglegroup-low-background: var(--color-interaction-container-branded-low-background);
557
577
  --components-togglegroup-low-border: var(--color-interaction-container-neutral-border);
558
578
  --components-togglegroup-high-background: var(--color-interaction-container-branded-low-background);
@@ -560,6 +580,8 @@
560
580
  --components-toggle-shape-disabled: var(--color-interaction-container-neutral-icon);
561
581
  --components-toggle-background-hover: var(--color-interaction-container-neutral-background-hover);
562
582
  --components-toggle-background-default: var(--color-interaction-container-branded-low-background);
583
+ --components-splitter-old-border-hover: var(--color-interaction-container-neutral-border-hover);
584
+ --components-splitter-old-background-hover: var(--color-interaction-container-neutral-background-hover);
563
585
  --components-slider-handler-border-readonly: var(--components-form-field-background-readonly);
564
586
  --components-slider-handler-border-disabled: var(--components-form-field-background-disabled);
565
587
  --components-slider-handler-border-error: var(--components-form-field-background-error);
@@ -579,7 +601,6 @@
579
601
  --components-menu-contextual-item-content-hover: var(--color-interaction-container-neutral-text-hover);
580
602
  --components-menu-contextual-item-content: var(--color-interaction-container-neutral-text);
581
603
  --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);
583
604
  --components-calendar-cell-text-hover: var(--color-interaction-container-neutral-text-hover);
584
605
  --components-calendar-cell-text: var(--color-interaction-container-neutral-text);
585
606
  --components-calendar-cell-background-today: var(--color-interaction-container-branded-low-background);
@@ -587,18 +608,13 @@
587
608
  --components-field-time-text-hover: var(--color-interaction-container-neutral-text-hover);
588
609
  --components-field-time-text-default: var(--color-interaction-container-neutral-text);
589
610
  --components-field-time-background-hover: var(--color-interaction-container-neutral-background-hover);
590
- --components-field-time-background-default: var(--color-interaction-container-neutral-background);
591
611
  --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);
594
612
  --components-buttongroup-lower-background: var(--color-interaction-container-branded-low-background);
595
613
  --components-buttongroup-lower-border: var(--color-interaction-container-neutral-border);
596
614
  --components-buttongroup-low-background: var(--color-interaction-container-branded-low-background);
597
615
  --components-buttongroup-medium-background: var(--color-interaction-container-branded-low-background);
598
616
  --components-breadcrumb-text: var(--color-interaction-link-low-text);
599
- --components-list-dropdown-item-background-disabled: var(--color-interaction-container-neutral-background);
600
617
  --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);
602
618
  --components-form-shape-foreground-disabled: var(--components-form-shape-border-default);
603
619
  --components-button-medium-background: var(--color-interaction-container-branded-low-background);
604
620
  --components-button-lower-text-hover: var(--color-interaction-container-neutral-text-hover);
@@ -606,7 +622,6 @@
606
622
  --components-button-lower-icon-hover: var(--color-interaction-container-neutral-icon-hover);
607
623
  --components-button-lower-icon: var(--color-interaction-container-neutral-icon);
608
624
  --components-button-lower-background-hover: var(--color-interaction-container-neutral-background-hover);
609
- --components-button-lower-background: var(--color-interaction-container-neutral-background);
610
625
  }
611
626
 
612
627
  :root {
@@ -700,6 +715,7 @@
700
715
  --color-transparent: rgba(255, 255, 255, 0);
701
716
  --color-white: #ffffff;
702
717
  --color-black: #000000;
718
+ --color-interaction-container-neutral-background: rgba(255, 255, 255, 0);
703
719
  --components-toggle-shape-hover: var(--color-gray-ocean-400);
704
720
  --components-toggle-shape-default: var(--color-gray-ocean-300);
705
721
  --components-toggle-background-disabled-checked: var(--color-gray-ocean-150);
@@ -710,7 +726,13 @@
710
726
  --components-toggle-border-default: var(--color-gray-spark-300);
711
727
  --components-tooltip-border: var(--color-gray-ocean-900);
712
728
  --components-tooltip-background: var(--color-gray-ocean-900);
729
+ --components-splitter-old-border: var(--color-transparent);
730
+ --components-splitter-old-background: var(--color-interaction-container-neutral-background);
713
731
  --components-popover-background: var(--color-gray-ocean-00);
732
+ --components-menu-contextual-item-background: var(--color-interaction-container-neutral-background);
733
+ --components-field-time-background-default: var(--color-interaction-container-neutral-background);
734
+ --components-datagrid-body-background-default: var(--color-interaction-container-neutral-background);
735
+ --components-datagrid-header-background: var(--color-interaction-container-neutral-background);
714
736
  --components-overlay-background: var(--color-gray-ocean-850);
715
737
  --components-button-destructive-high-icon-hover: var(--color-base-white);
716
738
  --components-button-destructive-high-icon: var(--color-base-white);
@@ -734,6 +756,8 @@
734
756
  --components-loader-brand-background: var(--color-petrol-50);
735
757
  --components-loader-white-foreground: var(--color-base-white);
736
758
  --components-list-dropdown-group-title-background: var(--color-transparent);
759
+ --components-list-dropdown-item-background-disabled: var(--color-interaction-container-neutral-background);
760
+ --components-list-dropdown-item-background-default: var(--color-interaction-container-neutral-background);
737
761
  --components-list-native-item-content-hover: var(--color-base-white);
738
762
  --components-list-native-item-content-default: var(--color-base-white);
739
763
  --components-form-shape-foreground-default: var(--color-base-white);
@@ -748,6 +772,7 @@
748
772
  --components-button-gr-as-complementary-text: var(--color-base-black);
749
773
  --components-button-gr-as-complementary-background-hover: var(--color-gray-ocean-300);
750
774
  --components-button-gr-as-complementary-background: var(--color-gray-ocean-200);
775
+ --components-button-lower-background: var(--color-interaction-container-neutral-background);
751
776
  --color-dont-use-background: var(--color-gray-ocean-50);
752
777
  --color-dont-use-content: var(--color-gray-ocean-150);
753
778
  --color-dont-use-border: var(--color-gray-ocean-150);
@@ -791,47 +816,6 @@
791
816
  --color-rainbow-1-icon: var(--color-amber-700);
792
817
  --color-rainbow-1-border: var(--color-amber-700);
793
818
  --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);
835
819
  --color-focus-brand: var(--color-petrol-600);
836
820
  --color-feedback-success-high-contrast-title: var(--color-base-white);
837
821
  --color-feedback-success-high-contrast-text: var(--color-status-green-50);
@@ -958,6 +942,47 @@
958
942
  --color-level-20-background: var(--color-gray-ocean-00);
959
943
  --color-level-15-background: var(--color-gray-ocean-75);
960
944
  --color-level-10-background: var(--color-gray-ocean-50);
945
+ --color-interaction-link-inverted-text-visited: var(--color-petrol-700);
946
+ --color-interaction-link-inverted-text-hover: var(--color-petrol-500);
947
+ --color-interaction-link-inverted-icon-visited: var(--color-petrol-700);
948
+ --color-interaction-link-inverted-icon-hover: var(--color-petrol-500);
949
+ --color-interaction-link-low-text-visited: var(--color-petrol-700);
950
+ --color-interaction-link-low-text-hover: var(--color-petrol-700);
951
+ --color-interaction-link-low-icon-visited: var(--color-petrol-700);
952
+ --color-interaction-link-low-icon-hover: var(--color-petrol-700);
953
+ --color-interaction-link-high-text-visited: var(--color-petrol-700);
954
+ --color-interaction-link-high-text-hover: var(--color-petrol-700);
955
+ --color-interaction-link-high-text: var(--color-petrol-600);
956
+ --color-interaction-link-high-icon-visited: var(--color-petrol-700);
957
+ --color-interaction-link-high-icon-hover: var(--color-petrol-700);
958
+ --color-interaction-link-high-icon: var(--color-petrol-600);
959
+ --color-interaction-container-branded-low-text-hover: var(--color-petrol-700);
960
+ --color-interaction-container-branded-low-text-active: var(--color-petrol-700);
961
+ --color-interaction-container-branded-low-text: var(--color-petrol-600);
962
+ --color-interaction-container-branded-low-icon-hover: var(--color-petrol-700);
963
+ --color-interaction-container-branded-low-icon-active: var(--color-petrol-700);
964
+ --color-interaction-container-branded-low-icon: var(--color-petrol-600);
965
+ --color-interaction-container-branded-low-border-hover: var(--color-petrol-700);
966
+ --color-interaction-container-branded-low-border-active: var(--color-petrol-700);
967
+ --color-interaction-container-branded-low-border: var(--color-petrol-600);
968
+ --color-interaction-container-branded-low-background-hover: var(--color-petrol-50);
969
+ --color-interaction-container-branded-low-background-active: var(--color-petrol-50);
970
+ --color-interaction-container-branded-high-text-hover: var(--color-base-white);
971
+ --color-interaction-container-branded-high-text-active: var(--color-base-white);
972
+ --color-interaction-container-branded-high-text: var(--color-base-white);
973
+ --color-interaction-container-branded-high-icon-hover: var(--color-base-white);
974
+ --color-interaction-container-branded-high-icon-active: var(--color-base-white);
975
+ --color-interaction-container-branded-high-icon: var(--color-base-white);
976
+ --color-interaction-container-branded-high-border-hover: var(--color-petrol-700);
977
+ --color-interaction-container-branded-high-border-active: var(--color-petrol-700);
978
+ --color-interaction-container-branded-high-border: var(--color-petrol-600);
979
+ --color-interaction-container-branded-high-background-hover: var(--color-petrol-700);
980
+ --color-interaction-container-branded-high-background-active: var(--color-petrol-700);
981
+ --color-interaction-container-branded-high-background: var(--color-petrol-600);
982
+ --color-interaction-container-neutral-text-active: var(--color-petrol-700);
983
+ --color-interaction-container-neutral-icon-active: var(--color-petrol-700);
984
+ --color-interaction-container-neutral-border-active: var(--color-petrol-700);
985
+ --color-interaction-container-neutral-background-active: var(--color-petrol-50);
961
986
  --components-togglegroup-high-border: var(--color-interaction-container-branded-low-border);
962
987
  --components-toggle-shape-hover-checked: var(--color-interaction-container-branded-high-icon);
963
988
  --components-toggle-shape-default-checked: var(--color-interaction-container-branded-high-icon);
@@ -967,9 +992,20 @@
967
992
  --components-toggle-border-default-checked: var(--color-interaction-container-branded-high-border);
968
993
  --components-tooltip-supporting-text: var(--color-content-inverted-medium-text);
969
994
  --components-tooltip-text: var(--color-content-inverted-high-text);
995
+ --components-splitter-handle-background-hover: var(--color-interaction-container-branded-high-background-active);
996
+ --components-splitter-handle-background-active: var(--color-interaction-container-branded-high-background-active);
997
+ --components-splitter-handle-background: var(--color-content-low-border);
998
+ --components-splitter-line-background-hover: var(--color-interaction-container-branded-low-background-active);
999
+ --components-splitter-line-background-active: var(--color-interaction-container-branded-high-background-active);
1000
+ --components-splitter-line-background: var(--color-level-10-background);
1001
+ --components-splitter-old-border-active: var(--color-interaction-container-neutral-border-active);
1002
+ --components-splitter-old-background-active: var(--color-interaction-container-neutral-background-active);
970
1003
  --components-slider-handler-border-focus: var(--components-form-field-background-checked);
971
1004
  --components-slider-handler-background-focus: var(--components-form-field-background-checked);
972
1005
  --components-slider-track-background: var(--color-content-low-border);
1006
+ --components-sidebar-border: var(--color-content-low-border);
1007
+ --components-sidebar-divider: var(--color-content-low-border);
1008
+ --components-sidebar-background: var(--color-level-00-background);
973
1009
  --components-popover-supporting-text: var(--color-content-low-text);
974
1010
  --components-popover-text: var(--color-content-medium-text);
975
1011
  --components-popover-border: var(--color-content-low-border);
@@ -996,10 +1032,6 @@
996
1032
  --components-menu-contextual-border: var(--color-content-low-border);
997
1033
  --components-menu-contextual-background: var(--color-level-00-background);
998
1034
  --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);
1003
1035
  --components-calendar-cell-text-today: var(--color-content-high-text);
1004
1036
  --components-calendar-cell-text-outside-month: var(--color-content-lower-text);
1005
1037
  --components-calendar-cell-text-in-range: var(--color-interaction-container-branded-low-text-active);
@@ -1010,6 +1042,10 @@
1010
1042
  --components-calendar-cell-background-hover: var(--color-interaction-container-branded-low-background-hover);
1011
1043
  --components-calendar-cell-background-in-range: var(--color-interaction-container-branded-low-background-active);
1012
1044
  --components-calendar-cell-background-selected: var(--color-interaction-container-branded-high-background-active);
1045
+ --components-calendar-weeks-text-hover: var(--color-content-high-text);
1046
+ --components-calendar-weeks-text: var(--color-content-high-text);
1047
+ --components-calendar-weeks-background-hover: var(--color-level-15-background);
1048
+ --components-calendar-weeks-background: var(--color-level-10-background);
1013
1049
  --components-calendar-header-text: var(--color-content-high-text);
1014
1050
  --components-calendar-border: var(--color-content-low-border);
1015
1051
  --components-field-time-border-active: var(--color-interaction-container-neutral-icon-active);
@@ -1163,6 +1199,11 @@
1163
1199
  --components-button-high-background-hover: var(--color-interaction-container-branded-high-background-hover);
1164
1200
  --components-button-high-background-active: var(--color-interaction-container-branded-high-background-active);
1165
1201
  --components-button-high-background: var(--color-interaction-container-branded-high-background);
1202
+ --color-focus-success: var(--color-feedback-success-low-border);
1203
+ --color-focus-destructive-in-field: var(--color-feedback-error-low-border);
1204
+ --color-focus-destructive: var(--color-feedback-error-high-border);
1205
+ --color-focus-background-inverted: var(--color-level-inverted-00-background);
1206
+ --color-focus-background: var(--color-level-00-background);
1166
1207
  --color-interaction-link-inverted-text-inactive: var(--color-content-inverted-low-text);
1167
1208
  --color-interaction-link-inverted-text: var(--color-content-inverted-medium-text);
1168
1209
  --color-interaction-link-inverted-icon-disabled: var(--color-content-inverted-low-icon);
@@ -1173,6 +1214,7 @@
1173
1214
  --color-interaction-link-low-icon: var(--color-content-high-text);
1174
1215
  --color-interaction-link-high-text-disabled: var(--color-content-low-text);
1175
1216
  --color-interaction-link-high-icon-inactive: var(--color-content-low-icon);
1217
+ --color-interaction-container-branded-low-background: var(--color-level-00-background);
1176
1218
  --color-interaction-container-neutral-text-hover: var(--color-content-medium-text);
1177
1219
  --color-interaction-container-neutral-text: var(--color-content-low-text);
1178
1220
  --color-interaction-container-neutral-icon-hover: var(--color-content-medium-text);
@@ -1180,13 +1222,6 @@
1180
1222
  --color-interaction-container-neutral-border-hover: var(--color-content-medium-text);
1181
1223
  --color-interaction-container-neutral-border: var(--color-content-inverted-low-text);
1182
1224
  --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);
1190
1225
  --components-togglegroup-low-background: var(--color-interaction-container-branded-low-background);
1191
1226
  --components-togglegroup-low-border: var(--color-interaction-container-neutral-border);
1192
1227
  --components-togglegroup-high-background: var(--color-interaction-container-branded-low-background);
@@ -1194,6 +1229,8 @@
1194
1229
  --components-toggle-shape-disabled: var(--color-interaction-container-neutral-icon);
1195
1230
  --components-toggle-background-hover: var(--color-interaction-container-neutral-background-hover);
1196
1231
  --components-toggle-background-default: var(--color-interaction-container-branded-low-background);
1232
+ --components-splitter-old-border-hover: var(--color-interaction-container-neutral-border-hover);
1233
+ --components-splitter-old-background-hover: var(--color-interaction-container-neutral-background-hover);
1197
1234
  --components-slider-handler-border-readonly: var(--components-form-field-background-readonly);
1198
1235
  --components-slider-handler-border-disabled: var(--components-form-field-background-disabled);
1199
1236
  --components-slider-handler-border-error: var(--components-form-field-background-error);
@@ -1213,7 +1250,6 @@
1213
1250
  --components-menu-contextual-item-content-hover: var(--color-interaction-container-neutral-text-hover);
1214
1251
  --components-menu-contextual-item-content: var(--color-interaction-container-neutral-text);
1215
1252
  --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);
1217
1253
  --components-calendar-cell-text-hover: var(--color-interaction-container-neutral-text-hover);
1218
1254
  --components-calendar-cell-text: var(--color-interaction-container-neutral-text);
1219
1255
  --components-calendar-cell-background-today: var(--color-interaction-container-branded-low-background);
@@ -1221,18 +1257,13 @@
1221
1257
  --components-field-time-text-hover: var(--color-interaction-container-neutral-text-hover);
1222
1258
  --components-field-time-text-default: var(--color-interaction-container-neutral-text);
1223
1259
  --components-field-time-background-hover: var(--color-interaction-container-neutral-background-hover);
1224
- --components-field-time-background-default: var(--color-interaction-container-neutral-background);
1225
1260
  --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);
1228
1261
  --components-buttongroup-lower-background: var(--color-interaction-container-branded-low-background);
1229
1262
  --components-buttongroup-lower-border: var(--color-interaction-container-neutral-border);
1230
1263
  --components-buttongroup-low-background: var(--color-interaction-container-branded-low-background);
1231
1264
  --components-buttongroup-medium-background: var(--color-interaction-container-branded-low-background);
1232
1265
  --components-breadcrumb-text: var(--color-interaction-link-low-text);
1233
- --components-list-dropdown-item-background-disabled: var(--color-interaction-container-neutral-background);
1234
1266
  --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);
1236
1267
  --components-form-shape-foreground-disabled: var(--components-form-shape-border-default);
1237
1268
  --components-button-medium-background: var(--color-interaction-container-branded-low-background);
1238
1269
  --components-button-lower-text-hover: var(--color-interaction-container-neutral-text-hover);
@@ -1240,7 +1271,6 @@
1240
1271
  --components-button-lower-icon-hover: var(--color-interaction-container-neutral-icon-hover);
1241
1272
  --components-button-lower-icon: var(--color-interaction-container-neutral-icon);
1242
1273
  --components-button-lower-background-hover: var(--color-interaction-container-neutral-background-hover);
1243
- --components-button-lower-background: var(--color-interaction-container-neutral-background);
1244
1274
  }
1245
1275
 
1246
1276
  /**
@@ -1531,7 +1561,6 @@
1531
1561
  */
1532
1562
 
1533
1563
  :root {
1534
- --slider-tick-radius: 1.0000px;
1535
1564
  --global-typography-legend-font-style: uppercase;
1536
1565
  --global-typography-label-font-style: normal;
1537
1566
  --global-typography-small-font-style: normal;
@@ -1559,8 +1588,10 @@
1559
1588
  --togglegroup-xs-button-radius: 1.0000px;
1560
1589
  --togglegroup-xs-button-padding-y: 1.0000px;
1561
1590
  --togglegroup-xs-padding: 3.0000px;
1562
- --sidebar-primary-notification-bullet-font-size: 9.0000px;
1563
- --sidebar-reduced-max-width: 100.0000px;
1591
+ --splitter-old-stroke: 1.0000px;
1592
+ --slider-tick-radius: 1.0000px;
1593
+ --sidebar-reduced-width: 68.0000px;
1594
+ --sidebar-notification-bullet-font-size: 9.0000px;
1564
1595
  --sidebar-width: 312.0000px;
1565
1596
  --popover-shadow-2-x: 0.0000px;
1566
1597
  --popover-shadow-1-blur: 1.0000px;
@@ -1581,6 +1612,18 @@
1581
1612
  --icon-stroke-sm: 1.4000px;
1582
1613
  --icon-stroke-xs: 1.2000px;
1583
1614
  --calendar-cell-dot-size: 3.0000px;
1615
+ --drawer-size-full-width: 1372.0000px;
1616
+ --drawer-size-lg-max-width: 1024.0000px;
1617
+ --drawer-size-lg-width: 992.0000px;
1618
+ --drawer-size-lg-min-width: 960.0000px;
1619
+ --drawer-size-md-max-width: 960.0000px;
1620
+ --drawer-size-md-width: 800.0000px;
1621
+ --drawer-size-md-min-width: 640.0000px;
1622
+ --drawer-size-sm-max-width: 480.0000px;
1623
+ --drawer-size-sm-width: 400.0000px;
1624
+ --drawer-size-sm-min-width: 320.0000px;
1625
+ --drawer-radius-top-right: 0.0000px;
1626
+ --drawer-radius-bottom-right: 0.0000px;
1584
1627
  --button-lg-ring-radius: 9.0000px;
1585
1628
  --button-md-ring-radius: 7.0000px;
1586
1629
  --button-sm-ring-radius: 5.0000px;
@@ -1596,6 +1639,17 @@
1596
1639
  --buttongroup-sm-button-padding-y: 4.0000px;
1597
1640
  --buttongroup-xs-button-radius: 1.0000px;
1598
1641
  --buttongroup-xs-padding: 2.0000px;
1642
+ --avatar-xl-font-size: 28.0000px;
1643
+ --avatar-lg-font-size: 22.0000px;
1644
+ --avatar-md-font-size: 18.0000px;
1645
+ --avatar-sm-font-size: 13.0000px;
1646
+ --avatar-xs-font-size: 10.0000px;
1647
+ --splitter-handle-radius: var(--radius-rounded-md);
1648
+ --splitter-handle-wide-hover: var(--spacing-2);
1649
+ --splitter-handle-wide: var(--spacing-1);
1650
+ --splitter-handle-long: var(--spacing-6);
1651
+ --splitter-gutter: var(--spacing-6);
1652
+ --splitter-line-width: var(--spacing-1);
1599
1653
  --pagination-table-padding-y: var(--spacing-2);
1600
1654
  --pagination-table-padding-x: var(--spacing-3);
1601
1655
  --pagination-table-padding-left: var(--spacing-3);
@@ -1662,21 +1716,6 @@
1662
1716
  --badge-height: var(--spacing-6);
1663
1717
  --badge-gap-icon-only-x: var(--spacing-0-5);
1664
1718
  --badge-gap-x: var(--spacing-1);
1665
- --avatar-xl-size: var(--spacing-16);
1666
- --avatar-xl-icon-size: var(--spacing-11);
1667
- --avatar-xl-font-size: var(--spacing-8);
1668
- --avatar-lg-size: var(--spacing-12);
1669
- --avatar-lg-icon-size: var(--spacing-8);
1670
- --avatar-lg-font-size: var(--spacing-6);
1671
- --avatar-md-size: var(--spacing-10);
1672
- --avatar-md-icon-size: var(--spacing-7);
1673
- --avatar-md-font-size: var(--spacing-5);
1674
- --avatar-sm-size: var(--spacing-8);
1675
- --avatar-sm-icon-size: var(--spacing-5);
1676
- --avatar-sm-font-size: var(--spacing-4);
1677
- --avatar-xs-size: var(--spacing-6);
1678
- --avatar-xs-icon-size: var(--spacing-4);
1679
- --avatar-xs-font-size: var(--spacing-3);
1680
1719
  --alert-message-line-height: var(--line-height-sm);
1681
1720
  --alert-message-font-weight: var(--font-weight-low-emphasis);
1682
1721
  --alert-message-font-size: var(--font-size-sm);
@@ -1691,15 +1730,6 @@
1691
1730
  --alert-icon-position-x: var(--spacing-4);
1692
1731
  --alert-gap-x: var(--spacing-3);
1693
1732
  --alert-icon-size: var(--spacing-5);
1694
- --slider-track-radius: var(--radius-rounded-sm);
1695
- --slider-track-padding-x: var(--spacing-3);
1696
- --slider-track-height: var(--spacing-1);
1697
- --slider-handler-stroke: var(--spacing-0-5);
1698
- --slider-handler-size-inner: var(--spacing-4);
1699
- --slider-handler-size-max: var(--spacing-6);
1700
- --slider-handler-size-min: var(--spacing-5);
1701
- --slider-tick-width: var(--spacing-0-5);
1702
- --slider-tick-height: var(--spacing-1);
1703
1733
  --global-typography-legend-font-weight: var(--font-weight-medium-emphasis);
1704
1734
  --global-typography-legend-line-height: var(--line-height-xs);
1705
1735
  --global-typography-legend-font-size: var(--font-size-xs);
@@ -1747,23 +1777,47 @@
1747
1777
  --togglegroup-xs-height: var(--spacing-6);
1748
1778
  --togglegroup-xs-gap: var(--spacing-0-5);
1749
1779
  --togglegroup-xs-radius: var(--radius-rounded-sm);
1750
- --sidebar-collapsible-button-icon-size: var(--spacing-4);
1780
+ --splitter-old-handler-radius: var(--radius-rounded-md);
1781
+ --splitter-old-handler-wide: var(--spacing-3);
1782
+ --splitter-old-handler-long: var(--spacing-6);
1783
+ --slider-track-radius: var(--radius-rounded-sm);
1784
+ --slider-track-padding-x: var(--spacing-3);
1785
+ --slider-track-height: var(--spacing-1);
1786
+ --slider-handler-size-inner: var(--spacing-4);
1787
+ --slider-handler-size-max: var(--spacing-6);
1788
+ --slider-handler-size-min: var(--spacing-5);
1789
+ --slider-handler-stroke: var(--spacing-0-5);
1790
+ --slider-tick-width: var(--spacing-0-5);
1791
+ --slider-tick-height: var(--spacing-1);
1792
+ --sidebar-divider-size: var(--spacing-px);
1793
+ --sidebar-sub-item-padding-left: var(--spacing-7);
1794
+ --sidebar-item-radius: var(--radius-rounded-md);
1795
+ --sidebar-item-padding-y-collapsed: var(--spacing-2-5);
1796
+ --sidebar-item-padding-y: var(--spacing-2);
1797
+ --sidebar-item-padding-x-collapsed: var(--spacing-2-5);
1798
+ --sidebar-item-padding-x: var(--spacing-3);
1799
+ --sidebar-item-icon-size: var(--spacing-5);
1800
+ --sidebar-item-gap-x: var(--spacing-2);
1801
+ --sidebar-item-font-size: var(--font-size-md);
1802
+ --sidebar-title-padding-y: var(--spacing-1);
1803
+ --sidebar-title-padding-x: var(--spacing-3);
1804
+ --sidebar-title-font-size: var(--font-size-sm);
1805
+ --sidebar-collapsible-button-position-right: var(--spacing-4);
1806
+ --sidebar-collapsible-button-position-top: var(--spacing-8);
1751
1807
  --sidebar-collapsible-button-padding: var(--spacing-2);
1808
+ --sidebar-collapsible-button-icon-size: var(--spacing-4);
1809
+ --sidebar-section-gap-y-collapsed: var(--spacing-1);
1810
+ --sidebar-section-gap-y: var(--spacing-0-5);
1811
+ --sidebar-group-gap-y: var(--spacing-1);
1812
+ --sidebar-footer-gap-y: var(--spacing-5);
1813
+ --sidebar-width-collapsed: var(--spacing-20);
1814
+ --sidebar-padding-y: var(--spacing-6);
1815
+ --sidebar-padding-x-collapsed: var(--spacing-5);
1816
+ --sidebar-padding-x: var(--spacing-6);
1752
1817
  --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);
1818
+ --sidebar-notification-bullet-size-reduced: var(--spacing-1-5);
1819
+ --sidebar-notification-bullet-size: var(--spacing-4);
1820
+ --sidebar-notification-bullet-font-weight: var(--font-weight-medium-emphasis);
1767
1821
  --popover-radius: var(--radius-rounded-md);
1768
1822
  --popover-padding-y: var(--spacing-2);
1769
1823
  --popover-padding-x: var(--spacing-2);
@@ -1776,8 +1830,6 @@
1776
1830
  --popover-shadow-1-opacity: var(--shadow-color-opacity-3);
1777
1831
  --popover-shadow-1-spread: var(--shadow-spread-lg-1);
1778
1832
  --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
1833
  --navigation-gap-y: var(--spacing-3);
1782
1834
  --navigation-primary-separator-size: var(--spacing-px);
1783
1835
  --navigation-primary-sub-item-padding-left-x: var(--spacing-7);
@@ -1908,6 +1960,14 @@
1908
1960
  --calendar-cell-line-height: var(--line-height-sm);
1909
1961
  --calendar-cell-font-weight: var(--font-weight-low-emphasis);
1910
1962
  --calendar-cell-font-size: var(--font-size-sm);
1963
+ --drawer-padding-y: var(--spacing-6);
1964
+ --drawer-padding-x: var(--spacing-6);
1965
+ --drawer-header-padding-right: var(--spacing-8);
1966
+ --drawer-gap-y: var(--spacing-6);
1967
+ --drawer-dismissible-position-right: var(--spacing-6);
1968
+ --drawer-dismissible-position-top: var(--spacing-6);
1969
+ --drawer-radius-top-left: var(--radius-rounded-2xl);
1970
+ --drawer-radius-bottom-left: var(--radius-rounded-2xl);
1911
1971
  --button-lg-padding-y: var(--spacing-2-5);
1912
1972
  --button-lg-padding-x: var(--spacing-4);
1913
1973
  --button-lg-line-height: var(--line-height-lg);
@@ -1957,5 +2017,15 @@
1957
2017
  --buttongroup-xs-gap: var(--spacing-px);
1958
2018
  --buttongroup-xs-radius: var(--radius-rounded-sm);
1959
2019
  --buttongroup-xs-button-padding-y: var(--spacing-0-5);
2020
+ --avatar-xl-size: var(--spacing-16);
2021
+ --avatar-xl-icon-size: var(--spacing-11);
2022
+ --avatar-lg-size: var(--spacing-12);
2023
+ --avatar-lg-icon-size: var(--spacing-8);
2024
+ --avatar-md-size: var(--spacing-10);
2025
+ --avatar-md-icon-size: var(--spacing-7);
2026
+ --avatar-sm-size: var(--spacing-8);
2027
+ --avatar-sm-icon-size: var(--spacing-5);
2028
+ --avatar-xs-size: var(--spacing-6);
2029
+ --avatar-xs-icon-size: var(--spacing-4);
1960
2030
  }
1961
2031