@nova-design-system/nova-base 3.21.1-beta.0 → 3.22.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 (14) hide show
  1. package/assets/nova-fonts.css +1 -10
  2. package/dist/css/ocean.css +118 -150
  3. package/dist/css/spark.css +120 -152
  4. package/dist/js/ocean_dark.d.ts +60 -60
  5. package/dist/js/ocean_dark.js +67 -67
  6. package/dist/js/ocean_light.d.ts +60 -60
  7. package/dist/js/ocean_light.js +60 -60
  8. package/dist/js/spacings.d.ts +8 -40
  9. package/dist/js/spacings.js +8 -40
  10. package/dist/js/spark_dark.d.ts +60 -60
  11. package/dist/js/spark_dark.js +68 -68
  12. package/dist/js/spark_light.d.ts +60 -60
  13. package/dist/js/spark_light.js +60 -60
  14. package/package.json +1 -2
package/assets/nova-fonts.css CHANGED
@@ -1,12 +1,3 @@
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
-
10
1
  body {
11
- font-family: var(--font-family-base, 'TT Norms Pro', arial, sans-serif);
2
+ font-family: 'TT Norms Pro', Arial, sans-serif;
12
3
  }
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(255, 255, 255, 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);
@@ -77,6 +78,10 @@
77
78
  --components-tooltip-border: var(--color-gray-ocean-50);
78
79
  --components-tooltip-background: var(--color-gray-ocean-50);
79
80
  --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);
80
85
  --components-overlay-background: var(--color-gray-ocean-650);
81
86
  --components-button-destructive-high-icon-hover: var(--color-base-black);
82
87
  --components-button-destructive-high-icon: var(--color-base-black);
@@ -100,6 +105,8 @@
100
105
  --components-loader-brand-background: var(--color-petrol-900);
101
106
  --components-loader-white-foreground: var(--color-base-white);
102
107
  --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);
103
110
  --components-list-native-item-content-hover: var(--color-base-white);
104
111
  --components-list-native-item-content-default: var(--color-base-white);
105
112
  --components-form-shape-foreground-default: var(--color-base-black);
@@ -114,6 +121,7 @@
114
121
  --components-button-gr-as-complementary-text: var(--color-base-white);
115
122
  --components-button-gr-as-complementary-background-hover: var(--color-gray-ocean-350);
116
123
  --components-button-gr-as-complementary-background: var(--color-gray-ocean-450);
124
+ --components-button-lower-background: var(--color-interaction-container-neutral-background);
117
125
  --color-dont-use-background: var(--color-gray-ocean-900);
118
126
  --color-dont-use-content: var(--color-gray-ocean-750);
119
127
  --color-dont-use-border: var(--color-gray-ocean-750);
@@ -157,47 +165,6 @@
157
165
  --color-rainbow-1-icon: var(--color-amber-500);
158
166
  --color-rainbow-1-border: var(--color-amber-500);
159
167
  --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
168
  --color-focus-brand: var(--color-petrol-500);
202
169
  --color-feedback-success-high-contrast-title: var(--color-base-black);
203
170
  --color-feedback-success-high-contrast-text: var(--color-status-green-900);
@@ -324,6 +291,47 @@
324
291
  --color-level-20-background: var(--color-gray-ocean-700);
325
292
  --color-level-15-background: var(--color-gray-ocean-800);
326
293
  --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);
327
335
  --components-togglegroup-high-border: var(--color-interaction-container-branded-low-border);
328
336
  --components-toggle-shape-hover-checked: var(--color-interaction-container-branded-high-icon);
329
337
  --components-toggle-shape-default-checked: var(--color-interaction-container-branded-high-icon);
@@ -529,6 +537,11 @@
529
537
  --components-button-high-background-hover: var(--color-interaction-container-branded-high-background-hover);
530
538
  --components-button-high-background-active: var(--color-interaction-container-branded-high-background-active);
531
539
  --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);
532
545
  --color-interaction-link-inverted-text-inactive: var(--color-content-inverted-low-text);
533
546
  --color-interaction-link-inverted-text: var(--color-content-inverted-medium-text);
534
547
  --color-interaction-link-inverted-icon-disabled: var(--color-content-inverted-low-icon);
@@ -539,6 +552,7 @@
539
552
  --color-interaction-link-low-icon: var(--color-content-high-text);
540
553
  --color-interaction-link-high-text-disabled: var(--color-content-low-text);
541
554
  --color-interaction-link-high-icon-inactive: var(--color-content-low-icon);
555
+ --color-interaction-container-branded-low-background: var(--color-level-00-background);
542
556
  --color-interaction-container-neutral-text-hover: var(--color-content-medium-text);
543
557
  --color-interaction-container-neutral-text: var(--color-content-low-text);
544
558
  --color-interaction-container-neutral-icon-hover: var(--color-content-medium-text);
@@ -546,13 +560,6 @@
546
560
  --color-interaction-container-neutral-border-hover: var(--color-content-medium-text);
547
561
  --color-interaction-container-neutral-border: var(--color-content-low-text);
548
562
  --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
563
  --components-togglegroup-low-background: var(--color-interaction-container-branded-low-background);
557
564
  --components-togglegroup-low-border: var(--color-interaction-container-neutral-border);
558
565
  --components-togglegroup-high-background: var(--color-interaction-container-branded-low-background);
@@ -579,7 +586,6 @@
579
586
  --components-menu-contextual-item-content-hover: var(--color-interaction-container-neutral-text-hover);
580
587
  --components-menu-contextual-item-content: var(--color-interaction-container-neutral-text);
581
588
  --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
589
  --components-calendar-cell-text-hover: var(--color-interaction-container-neutral-text-hover);
584
590
  --components-calendar-cell-text: var(--color-interaction-container-neutral-text);
585
591
  --components-calendar-cell-background-today: var(--color-interaction-container-branded-low-background);
@@ -587,18 +593,13 @@
587
593
  --components-field-time-text-hover: var(--color-interaction-container-neutral-text-hover);
588
594
  --components-field-time-text-default: var(--color-interaction-container-neutral-text);
589
595
  --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
596
  --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
597
  --components-buttongroup-lower-background: var(--color-interaction-container-branded-low-background);
595
598
  --components-buttongroup-lower-border: var(--color-interaction-container-neutral-border);
596
599
  --components-buttongroup-low-background: var(--color-interaction-container-branded-low-background);
597
600
  --components-buttongroup-medium-background: var(--color-interaction-container-branded-low-background);
598
601
  --components-breadcrumb-text: var(--color-interaction-link-low-text);
599
- --components-list-dropdown-item-background-disabled: var(--color-interaction-container-neutral-background);
600
602
  --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
603
  --components-form-shape-foreground-disabled: var(--components-form-shape-border-default);
603
604
  --components-button-medium-background: var(--color-interaction-container-branded-low-background);
604
605
  --components-button-lower-text-hover: var(--color-interaction-container-neutral-text-hover);
@@ -606,7 +607,6 @@
606
607
  --components-button-lower-icon-hover: var(--color-interaction-container-neutral-icon-hover);
607
608
  --components-button-lower-icon: var(--color-interaction-container-neutral-icon);
608
609
  --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,6 +700,7 @@
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);
703
704
  --components-toggle-shape-hover: var(--color-gray-ocean-400);
704
705
  --components-toggle-shape-default: var(--color-gray-ocean-300);
705
706
  --components-toggle-background-disabled-checked: var(--color-gray-ocean-150);
@@ -711,6 +712,10 @@
711
712
  --components-tooltip-border: var(--color-gray-ocean-900);
712
713
  --components-tooltip-background: var(--color-gray-ocean-900);
713
714
  --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);
714
719
  --components-overlay-background: var(--color-gray-ocean-850);
715
720
  --components-button-destructive-high-icon-hover: var(--color-base-white);
716
721
  --components-button-destructive-high-icon: var(--color-base-white);
@@ -734,6 +739,8 @@
734
739
  --components-loader-brand-background: var(--color-petrol-50);
735
740
  --components-loader-white-foreground: var(--color-base-white);
736
741
  --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);
737
744
  --components-list-native-item-content-hover: var(--color-base-white);
738
745
  --components-list-native-item-content-default: var(--color-base-white);
739
746
  --components-form-shape-foreground-default: var(--color-base-white);
@@ -748,6 +755,7 @@
748
755
  --components-button-gr-as-complementary-text: var(--color-base-black);
749
756
  --components-button-gr-as-complementary-background-hover: var(--color-gray-ocean-300);
750
757
  --components-button-gr-as-complementary-background: var(--color-gray-ocean-200);
758
+ --components-button-lower-background: var(--color-interaction-container-neutral-background);
751
759
  --color-dont-use-background: var(--color-gray-ocean-50);
752
760
  --color-dont-use-content: var(--color-gray-ocean-150);
753
761
  --color-dont-use-border: var(--color-gray-ocean-150);
@@ -791,47 +799,6 @@
791
799
  --color-rainbow-1-icon: var(--color-amber-700);
792
800
  --color-rainbow-1-border: var(--color-amber-700);
793
801
  --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
802
  --color-focus-brand: var(--color-petrol-600);
836
803
  --color-feedback-success-high-contrast-title: var(--color-base-white);
837
804
  --color-feedback-success-high-contrast-text: var(--color-status-green-50);
@@ -958,6 +925,47 @@
958
925
  --color-level-20-background: var(--color-gray-ocean-00);
959
926
  --color-level-15-background: var(--color-gray-ocean-75);
960
927
  --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);
961
969
  --components-togglegroup-high-border: var(--color-interaction-container-branded-low-border);
962
970
  --components-toggle-shape-hover-checked: var(--color-interaction-container-branded-high-icon);
963
971
  --components-toggle-shape-default-checked: var(--color-interaction-container-branded-high-icon);
@@ -1163,6 +1171,11 @@
1163
1171
  --components-button-high-background-hover: var(--color-interaction-container-branded-high-background-hover);
1164
1172
  --components-button-high-background-active: var(--color-interaction-container-branded-high-background-active);
1165
1173
  --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);
1166
1179
  --color-interaction-link-inverted-text-inactive: var(--color-content-inverted-low-text);
1167
1180
  --color-interaction-link-inverted-text: var(--color-content-inverted-medium-text);
1168
1181
  --color-interaction-link-inverted-icon-disabled: var(--color-content-inverted-low-icon);
@@ -1173,6 +1186,7 @@
1173
1186
  --color-interaction-link-low-icon: var(--color-content-high-text);
1174
1187
  --color-interaction-link-high-text-disabled: var(--color-content-low-text);
1175
1188
  --color-interaction-link-high-icon-inactive: var(--color-content-low-icon);
1189
+ --color-interaction-container-branded-low-background: var(--color-level-00-background);
1176
1190
  --color-interaction-container-neutral-text-hover: var(--color-content-medium-text);
1177
1191
  --color-interaction-container-neutral-text: var(--color-content-low-text);
1178
1192
  --color-interaction-container-neutral-icon-hover: var(--color-content-medium-text);
@@ -1180,13 +1194,6 @@
1180
1194
  --color-interaction-container-neutral-border-hover: var(--color-content-medium-text);
1181
1195
  --color-interaction-container-neutral-border: var(--color-content-inverted-low-text);
1182
1196
  --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
1197
  --components-togglegroup-low-background: var(--color-interaction-container-branded-low-background);
1191
1198
  --components-togglegroup-low-border: var(--color-interaction-container-neutral-border);
1192
1199
  --components-togglegroup-high-background: var(--color-interaction-container-branded-low-background);
@@ -1213,7 +1220,6 @@
1213
1220
  --components-menu-contextual-item-content-hover: var(--color-interaction-container-neutral-text-hover);
1214
1221
  --components-menu-contextual-item-content: var(--color-interaction-container-neutral-text);
1215
1222
  --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
1223
  --components-calendar-cell-text-hover: var(--color-interaction-container-neutral-text-hover);
1218
1224
  --components-calendar-cell-text: var(--color-interaction-container-neutral-text);
1219
1225
  --components-calendar-cell-background-today: var(--color-interaction-container-branded-low-background);
@@ -1221,18 +1227,13 @@
1221
1227
  --components-field-time-text-hover: var(--color-interaction-container-neutral-text-hover);
1222
1228
  --components-field-time-text-default: var(--color-interaction-container-neutral-text);
1223
1229
  --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
1230
  --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
1231
  --components-buttongroup-lower-background: var(--color-interaction-container-branded-low-background);
1229
1232
  --components-buttongroup-lower-border: var(--color-interaction-container-neutral-border);
1230
1233
  --components-buttongroup-low-background: var(--color-interaction-container-branded-low-background);
1231
1234
  --components-buttongroup-medium-background: var(--color-interaction-container-branded-low-background);
1232
1235
  --components-breadcrumb-text: var(--color-interaction-link-low-text);
1233
- --components-list-dropdown-item-background-disabled: var(--color-interaction-container-neutral-background);
1234
1236
  --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
1237
  --components-form-shape-foreground-disabled: var(--components-form-shape-border-default);
1237
1238
  --components-button-medium-background: var(--color-interaction-container-branded-low-background);
1238
1239
  --components-button-lower-text-hover: var(--color-interaction-container-neutral-text-hover);
@@ -1240,7 +1241,6 @@
1240
1241
  --components-button-lower-icon-hover: var(--color-interaction-container-neutral-icon-hover);
1241
1242
  --components-button-lower-icon: var(--color-interaction-container-neutral-icon);
1242
1243
  --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,16 +1559,10 @@
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;
1565
1562
  --popover-shadow-2-x: 0.0000px;
1566
1563
  --popover-shadow-1-blur: 1.0000px;
1567
1564
  --popover-shadow-1-x: 0.0000px;
1568
1565
  --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;
1572
1566
  --menu-contextual-item-font-weight: 500;
1573
1567
  --menu-contextual-divider-padding-bottom: 3.0000px;
1574
1568
  --form-max-width: 480.0000px;
@@ -1621,6 +1615,14 @@
1621
1615
  --notification-gap-x-title: var(--spacing-2);
1622
1616
  --notification-gap-x: var(--spacing-3);
1623
1617
  --notification-icon-size: var(--spacing-5);
1618
+ --navigation-primary-item-bullet-size: var(--spacing-5);
1619
+ --navigation-primary-item-bullet-font-size: var(--font-size-xs);
1620
+ --navigation-primary-item-radius: var(--radius-rounded-md);
1621
+ --navigation-primary-item-icon-size: var(--spacing-5);
1622
+ --navigation-primary-item-font-size: var(--font-size-md);
1623
+ --navigation-primary-item-padding-y: var(--spacing-2);
1624
+ --navigation-primary-item-padding-x: var(--spacing-3);
1625
+ --navigation-primary-item-gap-x: var(--spacing-2);
1624
1626
  --loader-size-xl: var(--spacing-8);
1625
1627
  --loader-size-lg: var(--spacing-7);
1626
1628
  --loader-size-md: var(--spacing-6);
@@ -1747,23 +1749,6 @@
1747
1749
  --togglegroup-xs-height: var(--spacing-6);
1748
1750
  --togglegroup-xs-gap: var(--spacing-0-5);
1749
1751
  --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);
1767
1752
  --popover-radius: var(--radius-rounded-md);
1768
1753
  --popover-padding-y: var(--spacing-2);
1769
1754
  --popover-padding-x: var(--spacing-2);
@@ -1776,23 +1761,6 @@
1776
1761
  --popover-shadow-1-opacity: var(--shadow-color-opacity-3);
1777
1762
  --popover-shadow-1-spread: var(--shadow-spread-lg-1);
1778
1763
  --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);
1796
1764
  --menu-contextual-radius: var(--radius-rounded-md);
1797
1765
  --menu-contextual-padding-y: var(--spacing-1);
1798
1766
  --menu-contextual-padding-x: var(--spacing-1);