@nova-design-system/nova-base 3.21.0 → 3.21.1-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/assets/nova-fonts.css +10 -1
  2. package/dist/css/ocean.css +150 -118
  3. package/dist/css/spark.css +152 -120
  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 +40 -8
  9. package/dist/js/spacings.js +40 -8
  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 +2 -1
package/dist/css/spark.css CHANGED
@@ -66,12 +66,10 @@
66
66
  --color-transparent: rgba(255, 255, 255, 0);
67
67
  --color-white: #ffffff;
68
68
  --color-black: #000000;
69
- --color-interaction-container-neutral-background: rgba(255, 255, 255, 0);
70
69
  --components-toggle-shape-hover: var(--color-gray-spark-300);
71
70
  --components-toggle-shape-default: var(--color-gray-spark-400);
72
71
  --components-toggle-background-disabled-checked: var(--color-gray-spark-600);
73
72
  --components-toggle-background-disabled: var(--color-gray-spark-600);
74
- --components-toggle-background-default: var(--color-interaction-container-neutral-background);
75
73
  --components-toggle-border-disabled-checked: var(--color-gray-spark-600);
76
74
  --components-toggle-border-disabled: var(--color-gray-spark-600);
77
75
  --components-toggle-border-hover: var(--color-gray-spark-300);
@@ -79,10 +77,6 @@
79
77
  --components-tooltip-border: var(--color-gray-spark-50);
80
78
  --components-tooltip-background: var(--color-gray-spark-50);
81
79
  --components-popover-background: var(--color-gray-spark-900);
82
- --components-menu-contextual-item-background: var(--color-interaction-container-neutral-background);
83
- --components-field-time-background-default: var(--color-interaction-container-neutral-background);
84
- --components-datagrid-body-background-default: var(--color-interaction-container-neutral-background);
85
- --components-datagrid-header-background: var(--color-interaction-container-neutral-background);
86
80
  --components-overlay-background: var(--color-gray-spark-650);
87
81
  --components-button-destructive-high-icon-hover: var(--color-base-black);
88
82
  --components-button-destructive-high-icon: var(--color-base-black);
@@ -106,8 +100,6 @@
106
100
  --components-loader-brand-background: var(--color-orange-900);
107
101
  --components-loader-white-foreground: var(--color-base-white);
108
102
  --components-list-dropdown-group-title-background: var(--color-transparent);
109
- --components-list-dropdown-item-background-disabled: var(--color-interaction-container-neutral-background);
110
- --components-list-dropdown-item-background-default: var(--color-interaction-container-neutral-background);
111
103
  --components-list-native-item-content-hover: var(--color-base-white);
112
104
  --components-list-native-item-content-default: var(--color-base-white);
113
105
  --components-form-shape-foreground-default: var(--color-base-black);
@@ -122,7 +114,6 @@
122
114
  --components-button-gr-as-complementary-text: var(--color-base-white);
123
115
  --components-button-gr-as-complementary-background-hover: var(--color-gray-spark-400);
124
116
  --components-button-gr-as-complementary-background: var(--color-gray-spark-450);
125
- --components-button-lower-background: var(--color-interaction-container-neutral-background);
126
117
  --color-dont-use-background: var(--color-gray-spark-900);
127
118
  --color-dont-use-content: var(--color-gray-spark-750);
128
119
  --color-dont-use-border: var(--color-gray-spark-750);
@@ -166,6 +157,47 @@
166
157
  --color-rainbow-1-icon: var(--color-amber-500);
167
158
  --color-rainbow-1-border: var(--color-amber-500);
168
159
  --color-rainbow-1-background: var(--color-amber-900);
160
+ --color-interaction-link-inverted-text-visited: var(--color-orange-400);
161
+ --color-interaction-link-inverted-text-hover: var(--color-orange-600);
162
+ --color-interaction-link-inverted-icon-visited: var(--color-orange-400);
163
+ --color-interaction-link-inverted-icon-hover: var(--color-orange-600);
164
+ --color-interaction-link-low-text-visited: var(--color-orange-400);
165
+ --color-interaction-link-low-text-hover: var(--color-orange-400);
166
+ --color-interaction-link-low-icon-visited: var(--color-orange-400);
167
+ --color-interaction-link-low-icon-hover: var(--color-orange-400);
168
+ --color-interaction-link-high-text-visited: var(--color-orange-400);
169
+ --color-interaction-link-high-text-hover: var(--color-orange-400);
170
+ --color-interaction-link-high-text: var(--color-orange-500);
171
+ --color-interaction-link-high-icon-visited: var(--color-orange-400);
172
+ --color-interaction-link-high-icon-hover: var(--color-orange-400);
173
+ --color-interaction-link-high-icon: var(--color-orange-500);
174
+ --color-interaction-container-neutral-text-active: var(--color-orange-400);
175
+ --color-interaction-container-neutral-icon-active: var(--color-orange-400);
176
+ --color-interaction-container-neutral-border-active: var(--color-orange-400);
177
+ --color-interaction-container-neutral-background-active: var(--color-orange-900);
178
+ --color-interaction-container-branded-low-text-hover: var(--color-orange-400);
179
+ --color-interaction-container-branded-low-text-active: var(--color-orange-400);
180
+ --color-interaction-container-branded-low-text: var(--color-orange-500);
181
+ --color-interaction-container-branded-low-icon-hover: var(--color-orange-400);
182
+ --color-interaction-container-branded-low-icon-active: var(--color-orange-400);
183
+ --color-interaction-container-branded-low-icon: var(--color-orange-500);
184
+ --color-interaction-container-branded-low-border-hover: var(--color-orange-400);
185
+ --color-interaction-container-branded-low-border-active: var(--color-orange-400);
186
+ --color-interaction-container-branded-low-border: var(--color-orange-500);
187
+ --color-interaction-container-branded-low-background-hover: var(--color-orange-900);
188
+ --color-interaction-container-branded-low-background-active: var(--color-orange-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-orange-400);
196
+ --color-interaction-container-branded-high-border-active: var(--color-orange-400);
197
+ --color-interaction-container-branded-high-border: var(--color-orange-500);
198
+ --color-interaction-container-branded-high-background-hover: var(--color-orange-400);
199
+ --color-interaction-container-branded-high-background-active: var(--color-orange-400);
200
+ --color-interaction-container-branded-high-background: var(--color-orange-500);
169
201
  --color-focus-brand: var(--color-orange-500);
170
202
  --color-feedback-success-high-contrast-title: var(--color-base-black);
171
203
  --color-feedback-success-high-contrast-text: var(--color-status-green-900);
@@ -292,47 +324,6 @@
292
324
  --color-level-20-background: var(--color-gray-spark-700);
293
325
  --color-level-15-background: var(--color-gray-spark-750);
294
326
  --color-level-10-background: var(--color-gray-spark-800);
295
- --color-interaction-link-inverted-text-visited: var(--color-orange-400);
296
- --color-interaction-link-inverted-text-hover: var(--color-orange-600);
297
- --color-interaction-link-inverted-icon-visited: var(--color-orange-400);
298
- --color-interaction-link-inverted-icon-hover: var(--color-orange-600);
299
- --color-interaction-link-low-text-visited: var(--color-orange-400);
300
- --color-interaction-link-low-text-hover: var(--color-orange-400);
301
- --color-interaction-link-low-icon-visited: var(--color-orange-400);
302
- --color-interaction-link-low-icon-hover: var(--color-orange-400);
303
- --color-interaction-link-high-text-visited: var(--color-orange-400);
304
- --color-interaction-link-high-text-hover: var(--color-orange-400);
305
- --color-interaction-link-high-text: var(--color-orange-500);
306
- --color-interaction-link-high-icon-visited: var(--color-orange-400);
307
- --color-interaction-link-high-icon-hover: var(--color-orange-400);
308
- --color-interaction-link-high-icon: var(--color-orange-500);
309
- --color-interaction-container-branded-low-text-hover: var(--color-orange-400);
310
- --color-interaction-container-branded-low-text-active: var(--color-orange-400);
311
- --color-interaction-container-branded-low-text: var(--color-orange-500);
312
- --color-interaction-container-branded-low-icon-hover: var(--color-orange-400);
313
- --color-interaction-container-branded-low-icon-active: var(--color-orange-400);
314
- --color-interaction-container-branded-low-icon: var(--color-orange-500);
315
- --color-interaction-container-branded-low-border-hover: var(--color-orange-400);
316
- --color-interaction-container-branded-low-border-active: var(--color-orange-400);
317
- --color-interaction-container-branded-low-border: var(--color-orange-500);
318
- --color-interaction-container-branded-low-background-hover: var(--color-orange-900);
319
- --color-interaction-container-branded-low-background-active: var(--color-orange-900);
320
- --color-interaction-container-branded-high-text-hover: var(--color-base-black);
321
- --color-interaction-container-branded-high-text-active: var(--color-base-black);
322
- --color-interaction-container-branded-high-text: var(--color-base-black);
323
- --color-interaction-container-branded-high-icon-hover: var(--color-base-black);
324
- --color-interaction-container-branded-high-icon-active: var(--color-base-black);
325
- --color-interaction-container-branded-high-icon: var(--color-base-black);
326
- --color-interaction-container-branded-high-border-hover: var(--color-orange-400);
327
- --color-interaction-container-branded-high-border-active: var(--color-orange-400);
328
- --color-interaction-container-branded-high-border: var(--color-orange-500);
329
- --color-interaction-container-branded-high-background-hover: var(--color-orange-400);
330
- --color-interaction-container-branded-high-background-active: var(--color-orange-400);
331
- --color-interaction-container-branded-high-background: var(--color-orange-500);
332
- --color-interaction-container-neutral-text-active: var(--color-orange-400);
333
- --color-interaction-container-neutral-icon-active: var(--color-orange-400);
334
- --color-interaction-container-neutral-border-active: var(--color-orange-400);
335
- --color-interaction-container-neutral-background-active: var(--color-orange-900);
336
327
  --components-togglegroup-high-border: var(--color-interaction-container-branded-low-border);
337
328
  --components-toggle-shape-hover-checked: var(--color-interaction-container-branded-high-icon);
338
329
  --components-toggle-shape-default-checked: var(--color-interaction-container-branded-high-icon);
@@ -538,11 +529,6 @@
538
529
  --components-button-high-background-hover: var(--color-interaction-container-branded-high-background-hover);
539
530
  --components-button-high-background-active: var(--color-interaction-container-branded-high-background-active);
540
531
  --components-button-high-background: var(--color-interaction-container-branded-high-background);
541
- --color-focus-success: var(--color-feedback-success-low-border);
542
- --color-focus-destructive-in-field: var(--color-feedback-error-low-border);
543
- --color-focus-destructive: var(--color-feedback-error-high-border);
544
- --color-focus-background-inverted: var(--color-level-inverted-00-background);
545
- --color-focus-background: var(--color-level-00-background);
546
532
  --color-interaction-link-inverted-text-inactive: var(--color-content-inverted-low-text);
547
533
  --color-interaction-link-inverted-text: var(--color-content-inverted-medium-text);
548
534
  --color-interaction-link-inverted-icon-disabled: var(--color-content-inverted-low-icon);
@@ -553,7 +539,6 @@
553
539
  --color-interaction-link-low-icon: var(--color-content-high-text);
554
540
  --color-interaction-link-high-text-disabled: var(--color-content-low-text);
555
541
  --color-interaction-link-high-icon-inactive: var(--color-content-low-icon);
556
- --color-interaction-container-branded-low-background: var(--color-level-00-background);
557
542
  --color-interaction-container-neutral-text-hover: var(--color-content-medium-text);
558
543
  --color-interaction-container-neutral-text: var(--color-content-low-text);
559
544
  --color-interaction-container-neutral-icon-hover: var(--color-content-medium-text);
@@ -561,12 +546,20 @@
561
546
  --color-interaction-container-neutral-border-hover: var(--color-content-medium-text);
562
547
  --color-interaction-container-neutral-border: var(--color-content-low-text);
563
548
  --color-interaction-container-neutral-background-hover: var(--color-level-10-background);
549
+ --color-interaction-container-neutral-background: var(--color-level-00-background);
550
+ --color-interaction-container-branded-low-background: var(--color-level-00-background);
551
+ --color-focus-success: var(--color-feedback-success-low-border);
552
+ --color-focus-destructive-in-field: var(--color-feedback-error-low-border);
553
+ --color-focus-destructive: var(--color-feedback-error-high-border);
554
+ --color-focus-background-inverted: var(--color-level-inverted-00-background);
555
+ --color-focus-background: var(--color-level-00-background);
564
556
  --components-togglegroup-low-background: var(--color-interaction-container-branded-low-background);
565
557
  --components-togglegroup-low-border: var(--color-interaction-container-neutral-border);
566
558
  --components-togglegroup-high-background: var(--color-interaction-container-branded-low-background);
567
559
  --components-toggle-shape-disabled-checked: var(--color-interaction-container-neutral-icon);
568
560
  --components-toggle-shape-disabled: var(--color-interaction-container-neutral-icon);
569
561
  --components-toggle-background-hover: var(--color-interaction-container-neutral-background-hover);
562
+ --components-toggle-background-default: var(--color-interaction-container-neutral-background);
570
563
  --components-slider-handler-border-readonly: var(--components-form-field-background-readonly);
571
564
  --components-slider-handler-border-disabled: var(--components-form-field-background-disabled);
572
565
  --components-slider-handler-border-error: var(--components-form-field-background-error);
@@ -586,6 +579,7 @@
586
579
  --components-menu-contextual-item-content-hover: var(--color-interaction-container-neutral-text-hover);
587
580
  --components-menu-contextual-item-content: var(--color-interaction-container-neutral-text);
588
581
  --components-menu-contextual-item-background-hover: var(--color-interaction-container-neutral-background-hover);
582
+ --components-menu-contextual-item-background: var(--color-interaction-container-neutral-background);
589
583
  --components-calendar-cell-text-hover: var(--color-interaction-container-neutral-text-hover);
590
584
  --components-calendar-cell-text: var(--color-interaction-container-neutral-text);
591
585
  --components-calendar-cell-background-today: var(--color-interaction-container-branded-low-background);
@@ -593,13 +587,18 @@
593
587
  --components-field-time-text-hover: var(--color-interaction-container-neutral-icon-hover);
594
588
  --components-field-time-text-default: var(--color-interaction-container-neutral-text);
595
589
  --components-field-time-background-hover: var(--color-interaction-container-neutral-background-hover);
590
+ --components-field-time-background-default: var(--color-interaction-container-neutral-background);
596
591
  --components-datagrid-body-background-hover: var(--color-interaction-container-neutral-background-hover);
592
+ --components-datagrid-body-background-default: var(--color-interaction-container-neutral-background);
593
+ --components-datagrid-header-background: var(--color-interaction-container-neutral-background);
597
594
  --components-buttongroup-lower-background: var(--color-interaction-container-branded-low-background);
598
595
  --components-buttongroup-lower-border: var(--color-interaction-container-neutral-border);
599
596
  --components-buttongroup-low-background: var(--color-interaction-container-branded-low-background);
600
597
  --components-buttongroup-medium-background: var(--color-interaction-container-branded-low-background);
601
598
  --components-breadcrumb-text: var(--color-interaction-link-low-text);
599
+ --components-list-dropdown-item-background-disabled: var(--color-interaction-container-neutral-background);
602
600
  --components-list-dropdown-item-background-hover: var(--color-interaction-container-neutral-background-hover);
601
+ --components-list-dropdown-item-background-default: var(--color-interaction-container-neutral-background);
603
602
  --components-form-shape-foreground-disabled: var(--components-form-shape-border-default);
604
603
  --components-button-medium-background: var(--color-interaction-container-branded-low-background);
605
604
  --components-button-lower-text-hover: var(--color-interaction-container-neutral-text-hover);
@@ -607,6 +606,7 @@
607
606
  --components-button-lower-icon-hover: var(--color-interaction-container-neutral-icon-hover);
608
607
  --components-button-lower-icon: var(--color-interaction-container-neutral-icon);
609
608
  --components-button-lower-background-hover: var(--color-interaction-container-neutral-background-hover);
609
+ --components-button-lower-background: var(--color-interaction-container-neutral-background);
610
610
  }
611
611
 
612
612
  :root {
@@ -698,12 +698,10 @@
698
698
  --color-transparent: rgba(255, 255, 255, 0);
699
699
  --color-white: #ffffff;
700
700
  --color-black: #000000;
701
- --color-interaction-container-neutral-background: rgba(255, 255, 255, 0);
702
701
  --components-toggle-shape-hover: var(--color-gray-spark-400);
703
702
  --components-toggle-shape-default: var(--color-gray-spark-300);
704
703
  --components-toggle-background-disabled-checked: var(--color-gray-spark-150);
705
704
  --components-toggle-background-disabled: var(--color-gray-spark-150);
706
- --components-toggle-background-default: var(--color-interaction-container-neutral-background);
707
705
  --components-toggle-border-disabled-checked: var(--color-gray-spark-150);
708
706
  --components-toggle-border-disabled: var(--color-gray-spark-150);
709
707
  --components-toggle-border-hover: var(--color-gray-spark-400);
@@ -711,10 +709,6 @@
711
709
  --components-tooltip-border: var(--color-gray-spark-900);
712
710
  --components-tooltip-background: var(--color-gray-spark-900);
713
711
  --components-popover-background: var(--color-gray-spark-00);
714
- --components-menu-contextual-item-background: var(--color-interaction-container-neutral-background);
715
- --components-field-time-background-default: var(--color-interaction-container-neutral-background);
716
- --components-datagrid-body-background-default: var(--color-interaction-container-neutral-background);
717
- --components-datagrid-header-background: var(--color-interaction-container-neutral-background);
718
712
  --components-overlay-background: var(--color-gray-spark-850);
719
713
  --components-button-destructive-high-icon-hover: var(--color-base-white);
720
714
  --components-button-destructive-high-icon: var(--color-base-white);
@@ -738,8 +732,6 @@
738
732
  --components-loader-brand-background: var(--color-orange-50);
739
733
  --components-loader-white-foreground: var(--color-base-white);
740
734
  --components-list-dropdown-group-title-background: var(--color-transparent);
741
- --components-list-dropdown-item-background-disabled: var(--color-interaction-container-neutral-background);
742
- --components-list-dropdown-item-background-default: var(--color-interaction-container-neutral-background);
743
735
  --components-list-native-item-content-hover: var(--color-base-white);
744
736
  --components-list-native-item-content-default: var(--color-base-white);
745
737
  --components-form-shape-foreground-default: var(--color-base-white);
@@ -754,7 +746,6 @@
754
746
  --components-button-gr-as-complementary-text: var(--color-base-black);
755
747
  --components-button-gr-as-complementary-background-hover: var(--color-gray-spark-300);
756
748
  --components-button-gr-as-complementary-background: var(--color-gray-spark-200);
757
- --components-button-lower-background: var(--color-interaction-container-neutral-background);
758
749
  --color-dont-use-background: var(--color-gray-spark-50);
759
750
  --color-dont-use-content: var(--color-gray-spark-100);
760
751
  --color-dont-use-border: var(--color-gray-spark-100);
@@ -798,6 +789,47 @@
798
789
  --color-rainbow-1-icon: var(--color-amber-700);
799
790
  --color-rainbow-1-border: var(--color-amber-700);
800
791
  --color-rainbow-1-background: var(--color-amber-50);
792
+ --color-interaction-link-inverted-text-visited: var(--color-orange-700);
793
+ --color-interaction-link-inverted-text-hover: var(--color-orange-500);
794
+ --color-interaction-link-inverted-icon-visited: var(--color-orange-700);
795
+ --color-interaction-link-inverted-icon-hover: var(--color-orange-500);
796
+ --color-interaction-link-low-text-visited: var(--color-orange-700);
797
+ --color-interaction-link-low-text-hover: var(--color-orange-700);
798
+ --color-interaction-link-low-icon-visited: var(--color-orange-700);
799
+ --color-interaction-link-low-icon-hover: var(--color-orange-700);
800
+ --color-interaction-link-high-text-visited: var(--color-orange-700);
801
+ --color-interaction-link-high-text-hover: var(--color-orange-700);
802
+ --color-interaction-link-high-text: var(--color-orange-600);
803
+ --color-interaction-link-high-icon-visited: var(--color-orange-700);
804
+ --color-interaction-link-high-icon-hover: var(--color-orange-700);
805
+ --color-interaction-link-high-icon: var(--color-orange-600);
806
+ --color-interaction-container-neutral-text-active: var(--color-orange-600);
807
+ --color-interaction-container-neutral-icon-active: var(--color-orange-600);
808
+ --color-interaction-container-neutral-border-active: var(--color-orange-600);
809
+ --color-interaction-container-neutral-background-active: var(--color-orange-50);
810
+ --color-interaction-container-branded-low-text-hover: var(--color-orange-600);
811
+ --color-interaction-container-branded-low-text-active: var(--color-orange-600);
812
+ --color-interaction-container-branded-low-text: var(--color-orange-500);
813
+ --color-interaction-container-branded-low-icon-hover: var(--color-orange-600);
814
+ --color-interaction-container-branded-low-icon-active: var(--color-orange-600);
815
+ --color-interaction-container-branded-low-icon: var(--color-orange-500);
816
+ --color-interaction-container-branded-low-border-hover: var(--color-orange-600);
817
+ --color-interaction-container-branded-low-border-active: var(--color-orange-600);
818
+ --color-interaction-container-branded-low-border: var(--color-orange-500);
819
+ --color-interaction-container-branded-low-background-hover: var(--color-orange-50);
820
+ --color-interaction-container-branded-low-background-active: var(--color-orange-50);
821
+ --color-interaction-container-branded-high-text-hover: var(--color-base-white);
822
+ --color-interaction-container-branded-high-text-active: var(--color-base-white);
823
+ --color-interaction-container-branded-high-text: var(--color-base-white);
824
+ --color-interaction-container-branded-high-icon-hover: var(--color-base-white);
825
+ --color-interaction-container-branded-high-icon-active: var(--color-base-white);
826
+ --color-interaction-container-branded-high-icon: var(--color-base-white);
827
+ --color-interaction-container-branded-high-border-hover: var(--color-orange-600);
828
+ --color-interaction-container-branded-high-border-active: var(--color-orange-600);
829
+ --color-interaction-container-branded-high-border: var(--color-orange-500);
830
+ --color-interaction-container-branded-high-background-hover: var(--color-orange-600);
831
+ --color-interaction-container-branded-high-background-active: var(--color-orange-600);
832
+ --color-interaction-container-branded-high-background: var(--color-orange-500);
801
833
  --color-focus-brand: var(--color-orange-500);
802
834
  --color-feedback-success-high-contrast-title: var(--color-base-white);
803
835
  --color-feedback-success-high-contrast-text: var(--color-status-green-50);
@@ -924,47 +956,6 @@
924
956
  --color-level-20-background: var(--color-gray-spark-00);
925
957
  --color-level-15-background: var(--color-gray-spark-75);
926
958
  --color-level-10-background: var(--color-gray-spark-50);
927
- --color-interaction-link-inverted-text-visited: var(--color-orange-700);
928
- --color-interaction-link-inverted-text-hover: var(--color-orange-500);
929
- --color-interaction-link-inverted-icon-visited: var(--color-orange-700);
930
- --color-interaction-link-inverted-icon-hover: var(--color-orange-500);
931
- --color-interaction-link-low-text-visited: var(--color-orange-700);
932
- --color-interaction-link-low-text-hover: var(--color-orange-700);
933
- --color-interaction-link-low-icon-visited: var(--color-orange-700);
934
- --color-interaction-link-low-icon-hover: var(--color-orange-700);
935
- --color-interaction-link-high-text-visited: var(--color-orange-700);
936
- --color-interaction-link-high-text-hover: var(--color-orange-700);
937
- --color-interaction-link-high-text: var(--color-orange-600);
938
- --color-interaction-link-high-icon-visited: var(--color-orange-700);
939
- --color-interaction-link-high-icon-hover: var(--color-orange-700);
940
- --color-interaction-link-high-icon: var(--color-orange-600);
941
- --color-interaction-container-branded-low-text-hover: var(--color-orange-600);
942
- --color-interaction-container-branded-low-text-active: var(--color-orange-600);
943
- --color-interaction-container-branded-low-text: var(--color-orange-500);
944
- --color-interaction-container-branded-low-icon-hover: var(--color-orange-600);
945
- --color-interaction-container-branded-low-icon-active: var(--color-orange-600);
946
- --color-interaction-container-branded-low-icon: var(--color-orange-500);
947
- --color-interaction-container-branded-low-border-hover: var(--color-orange-600);
948
- --color-interaction-container-branded-low-border-active: var(--color-orange-600);
949
- --color-interaction-container-branded-low-border: var(--color-orange-500);
950
- --color-interaction-container-branded-low-background-hover: var(--color-orange-50);
951
- --color-interaction-container-branded-low-background-active: var(--color-orange-50);
952
- --color-interaction-container-branded-high-text-hover: var(--color-base-white);
953
- --color-interaction-container-branded-high-text-active: var(--color-base-white);
954
- --color-interaction-container-branded-high-text: var(--color-base-white);
955
- --color-interaction-container-branded-high-icon-hover: var(--color-base-white);
956
- --color-interaction-container-branded-high-icon-active: var(--color-base-white);
957
- --color-interaction-container-branded-high-icon: var(--color-base-white);
958
- --color-interaction-container-branded-high-border-hover: var(--color-orange-600);
959
- --color-interaction-container-branded-high-border-active: var(--color-orange-600);
960
- --color-interaction-container-branded-high-border: var(--color-orange-500);
961
- --color-interaction-container-branded-high-background-hover: var(--color-orange-600);
962
- --color-interaction-container-branded-high-background-active: var(--color-orange-600);
963
- --color-interaction-container-branded-high-background: var(--color-orange-500);
964
- --color-interaction-container-neutral-text-active: var(--color-orange-600);
965
- --color-interaction-container-neutral-icon-active: var(--color-orange-600);
966
- --color-interaction-container-neutral-border-active: var(--color-orange-600);
967
- --color-interaction-container-neutral-background-active: var(--color-orange-50);
968
959
  --components-togglegroup-high-border: var(--color-interaction-container-branded-low-border);
969
960
  --components-toggle-shape-hover-checked: var(--color-interaction-container-branded-high-icon);
970
961
  --components-toggle-shape-default-checked: var(--color-interaction-container-branded-high-icon);
@@ -1171,11 +1162,6 @@
1171
1162
  --components-button-high-background-hover: var(--color-interaction-container-branded-high-background-hover);
1172
1163
  --components-button-high-background-active: var(--color-interaction-container-branded-high-background-active);
1173
1164
  --components-button-high-background: var(--color-interaction-container-branded-high-background);
1174
- --color-focus-success: var(--color-feedback-success-low-border);
1175
- --color-focus-destructive-in-field: var(--color-feedback-error-low-border);
1176
- --color-focus-destructive: var(--color-feedback-error-high-border);
1177
- --color-focus-background-inverted: var(--color-level-inverted-00-background);
1178
- --color-focus-background: var(--color-level-00-background);
1179
1165
  --color-interaction-link-inverted-text-inactive: var(--color-content-inverted-low-text);
1180
1166
  --color-interaction-link-inverted-text: var(--color-content-inverted-medium-text);
1181
1167
  --color-interaction-link-inverted-icon-disabled: var(--color-content-inverted-low-icon);
@@ -1186,7 +1172,6 @@
1186
1172
  --color-interaction-link-low-icon: var(--color-content-high-text);
1187
1173
  --color-interaction-link-high-text-disabled: var(--color-content-low-text);
1188
1174
  --color-interaction-link-high-icon-inactive: var(--color-content-low-icon);
1189
- --color-interaction-container-branded-low-background: var(--color-level-00-background);
1190
1175
  --color-interaction-container-neutral-text-hover: var(--color-content-medium-text);
1191
1176
  --color-interaction-container-neutral-text: var(--color-content-low-text);
1192
1177
  --color-interaction-container-neutral-icon-hover: var(--color-content-medium-text);
@@ -1194,12 +1179,20 @@
1194
1179
  --color-interaction-container-neutral-border-hover: var(--color-content-medium-text);
1195
1180
  --color-interaction-container-neutral-border: var(--color-content-low-text);
1196
1181
  --color-interaction-container-neutral-background-hover: var(--color-level-10-background);
1182
+ --color-interaction-container-neutral-background: var(--color-level-00-background);
1183
+ --color-interaction-container-branded-low-background: var(--color-level-00-background);
1184
+ --color-focus-success: var(--color-feedback-success-low-border);
1185
+ --color-focus-destructive-in-field: var(--color-feedback-error-low-border);
1186
+ --color-focus-destructive: var(--color-feedback-error-high-border);
1187
+ --color-focus-background-inverted: var(--color-level-inverted-00-background);
1188
+ --color-focus-background: var(--color-level-00-background);
1197
1189
  --components-togglegroup-low-background: var(--color-interaction-container-branded-low-background);
1198
1190
  --components-togglegroup-low-border: var(--color-interaction-container-neutral-border);
1199
1191
  --components-togglegroup-high-background: var(--color-interaction-container-branded-low-background);
1200
1192
  --components-toggle-shape-disabled-checked: var(--color-interaction-container-neutral-icon);
1201
1193
  --components-toggle-shape-disabled: var(--color-interaction-container-neutral-icon);
1202
1194
  --components-toggle-background-hover: var(--color-interaction-container-neutral-background-hover);
1195
+ --components-toggle-background-default: var(--color-interaction-container-neutral-background);
1203
1196
  --components-slider-handler-border-readonly: var(--components-form-field-background-readonly);
1204
1197
  --components-slider-handler-border-disabled: var(--components-form-field-background-disabled);
1205
1198
  --components-slider-handler-border-error: var(--components-form-field-background-error);
@@ -1219,6 +1212,7 @@
1219
1212
  --components-menu-contextual-item-content-hover: var(--color-interaction-container-neutral-text-hover);
1220
1213
  --components-menu-contextual-item-content: var(--color-interaction-container-neutral-text);
1221
1214
  --components-menu-contextual-item-background-hover: var(--color-interaction-container-neutral-background-hover);
1215
+ --components-menu-contextual-item-background: var(--color-interaction-container-neutral-background);
1222
1216
  --components-calendar-cell-text-hover: var(--color-interaction-container-neutral-text-hover);
1223
1217
  --components-calendar-cell-text: var(--color-interaction-container-neutral-text);
1224
1218
  --components-calendar-cell-dot-hover: var(--color-interaction-container-neutral-icon-hover);
@@ -1227,13 +1221,18 @@
1227
1221
  --components-field-time-text-hover: var(--color-interaction-container-neutral-text-hover);
1228
1222
  --components-field-time-text-default: var(--color-interaction-container-neutral-text);
1229
1223
  --components-field-time-background-hover: var(--color-interaction-container-neutral-background-hover);
1224
+ --components-field-time-background-default: var(--color-interaction-container-neutral-background);
1230
1225
  --components-datagrid-body-background-hover: var(--color-interaction-container-neutral-background-hover);
1226
+ --components-datagrid-body-background-default: var(--color-interaction-container-neutral-background);
1227
+ --components-datagrid-header-background: var(--color-interaction-container-neutral-background);
1231
1228
  --components-buttongroup-lower-background: var(--color-interaction-container-branded-low-background);
1232
1229
  --components-buttongroup-lower-border: var(--color-interaction-container-neutral-border);
1233
1230
  --components-buttongroup-low-background: var(--color-interaction-container-branded-low-background);
1234
1231
  --components-buttongroup-medium-background: var(--color-interaction-container-branded-low-background);
1235
1232
  --components-breadcrumb-text: var(--color-interaction-link-low-text);
1233
+ --components-list-dropdown-item-background-disabled: var(--color-interaction-container-neutral-background);
1236
1234
  --components-list-dropdown-item-background-hover: var(--color-interaction-container-neutral-background-hover);
1235
+ --components-list-dropdown-item-background-default: var(--color-interaction-container-neutral-background);
1237
1236
  --components-form-shape-foreground-disabled: var(--components-form-shape-border-default);
1238
1237
  --components-button-medium-background: var(--color-interaction-container-branded-low-background);
1239
1238
  --components-button-lower-text-hover: var(--color-interaction-container-neutral-text-hover);
@@ -1241,6 +1240,7 @@
1241
1240
  --components-button-lower-icon-hover: var(--color-interaction-container-neutral-icon-hover);
1242
1241
  --components-button-lower-icon: var(--color-interaction-container-neutral-icon);
1243
1242
  --components-button-lower-background-hover: var(--color-interaction-container-neutral-background-hover);
1243
+ --components-button-lower-background: var(--color-interaction-container-neutral-background);
1244
1244
  }
1245
1245
 
1246
1246
  /**
@@ -1559,10 +1559,16 @@
1559
1559
  --togglegroup-xs-button-radius: 1.0000px;
1560
1560
  --togglegroup-xs-button-padding-y: 1.0000px;
1561
1561
  --togglegroup-xs-padding: 3.0000px;
1562
+ --sidebar-primary-notification-bullet-font-size: 9.0000px;
1563
+ --sidebar-reduced-max-width: 100.0000px;
1564
+ --sidebar-width: 312.0000px;
1562
1565
  --popover-shadow-2-x: 0.0000px;
1563
1566
  --popover-shadow-1-blur: 1.0000px;
1564
1567
  --popover-shadow-1-x: 0.0000px;
1565
1568
  --popover-font-weight: 500;
1569
+ --navigation-primary-notification-bullet-font-size: 9.0000px;
1570
+ --navigation-reduced-max-width: 100.0000px;
1571
+ --navigation-width: 312.0000px;
1566
1572
  --menu-contextual-item-font-weight: 500;
1567
1573
  --menu-contextual-divider-padding-bottom: 3.0000px;
1568
1574
  --form-max-width: 480.0000px;
@@ -1615,14 +1621,6 @@
1615
1621
  --notification-gap-x-title: var(--spacing-2);
1616
1622
  --notification-gap-x: var(--spacing-3);
1617
1623
  --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);
1626
1624
  --loader-size-xl: var(--spacing-8);
1627
1625
  --loader-size-lg: var(--spacing-7);
1628
1626
  --loader-size-md: var(--spacing-6);
@@ -1749,6 +1747,23 @@
1749
1747
  --togglegroup-xs-height: var(--spacing-6);
1750
1748
  --togglegroup-xs-gap: var(--spacing-0-5);
1751
1749
  --togglegroup-xs-radius: var(--radius-rounded-sm);
1750
+ --sidebar-collapsible-button-icon-size: var(--spacing-4);
1751
+ --sidebar-collapsible-button-padding: var(--spacing-2);
1752
+ --sidebar-gap-y: var(--spacing-3);
1753
+ --sidebar-primary-separator-size: var(--spacing-px);
1754
+ --sidebar-primary-sub-item-padding-left-x: var(--spacing-7);
1755
+ --sidebar-primary-item-radius: var(--radius-rounded-md);
1756
+ --sidebar-primary-item-icon-size: var(--spacing-5);
1757
+ --sidebar-primary-item-font-size: var(--font-size-md);
1758
+ --sidebar-primary-item-padding-y: var(--spacing-2);
1759
+ --sidebar-primary-item-padding-x: var(--spacing-3);
1760
+ --sidebar-primary-item-gap-x: var(--spacing-2);
1761
+ --sidebar-primary-title-font-size: var(--font-size-sm);
1762
+ --sidebar-primary-title-padding-y: var(--spacing-1);
1763
+ --sidebar-primary-title-padding-x: var(--spacing-3);
1764
+ --sidebar-primary-notification-bullet-font-weight: var(--font-weight-medium-emphasis);
1765
+ --sidebar-primary-notification-bullet-size-reduced: var(--spacing-1-5);
1766
+ --sidebar-primary-notification-bullet-size: var(--spacing-4);
1752
1767
  --popover-radius: var(--radius-rounded-md);
1753
1768
  --popover-padding-y: var(--spacing-2);
1754
1769
  --popover-padding-x: var(--spacing-2);
@@ -1761,6 +1776,23 @@
1761
1776
  --popover-shadow-1-opacity: var(--shadow-color-opacity-3);
1762
1777
  --popover-shadow-1-spread: var(--shadow-spread-lg-1);
1763
1778
  --popover-shadow-1-y: var(--shadow-y-axis-none);
1779
+ --navigation-collapsible-button-icon-size: var(--spacing-4);
1780
+ --navigation-collapsible-button-padding: var(--spacing-2);
1781
+ --navigation-gap-y: var(--spacing-3);
1782
+ --navigation-primary-separator-size: var(--spacing-px);
1783
+ --navigation-primary-sub-item-padding-left-x: var(--spacing-7);
1784
+ --navigation-primary-item-radius: var(--radius-rounded-md);
1785
+ --navigation-primary-item-icon-size: var(--spacing-5);
1786
+ --navigation-primary-item-font-size: var(--font-size-md);
1787
+ --navigation-primary-item-padding-y: var(--spacing-2);
1788
+ --navigation-primary-item-padding-x: var(--spacing-3);
1789
+ --navigation-primary-item-gap-x: var(--spacing-2);
1790
+ --navigation-primary-title-font-size: var(--font-size-sm);
1791
+ --navigation-primary-title-padding-y: var(--spacing-1);
1792
+ --navigation-primary-title-padding-x: var(--spacing-3);
1793
+ --navigation-primary-notification-bullet-font-weight: var(--font-weight-medium-emphasis);
1794
+ --navigation-primary-notification-bullet-size-reduced: var(--spacing-1-5);
1795
+ --navigation-primary-notification-bullet-size: var(--spacing-4);
1764
1796
  --menu-contextual-radius: var(--radius-rounded-md);
1765
1797
  --menu-contextual-padding-y: var(--spacing-1);
1766
1798
  --menu-contextual-padding-x: var(--spacing-1);
package/dist/js/ocean_dark.d.ts CHANGED
@@ -2,66 +2,6 @@
2
2
  * Do not edit directly, this file was auto-generated.
3
3
  */
4
4
 
5
- export const ColorInteractionContainerNeutralBackground : string;
6
- export const ColorInteractionContainerNeutralBackgroundHover : string;
7
- export const ColorInteractionContainerNeutralBackgroundActive : string;
8
- export const ColorInteractionContainerNeutralBorder : string;
9
- export const ColorInteractionContainerNeutralBorderActive : string;
10
- export const ColorInteractionContainerNeutralBorderHover : string;
11
- export const ColorInteractionContainerNeutralIcon : string;
12
- export const ColorInteractionContainerNeutralIconActive : string;
13
- export const ColorInteractionContainerNeutralIconHover : string;
14
- export const ColorInteractionContainerNeutralText : string;
15
- export const ColorInteractionContainerNeutralTextActive : string;
16
- export const ColorInteractionContainerNeutralTextHover : string;
17
- export const ColorInteractionContainerBrandedHighBackground : string;
18
- export const ColorInteractionContainerBrandedHighBackgroundActive : string;
19
- export const ColorInteractionContainerBrandedHighBackgroundHover : string;
20
- export const ColorInteractionContainerBrandedHighBorder : string;
21
- export const ColorInteractionContainerBrandedHighBorderActive : string;
22
- export const ColorInteractionContainerBrandedHighBorderHover : string;
23
- export const ColorInteractionContainerBrandedHighIcon : string;
24
- export const ColorInteractionContainerBrandedHighIconActive : string;
25
- export const ColorInteractionContainerBrandedHighIconHover : string;
26
- export const ColorInteractionContainerBrandedHighText : string;
27
- export const ColorInteractionContainerBrandedHighTextActive : string;
28
- export const ColorInteractionContainerBrandedHighTextHover : string;
29
- export const ColorInteractionContainerBrandedLowBackground : string;
30
- export const ColorInteractionContainerBrandedLowBackgroundActive : string;
31
- export const ColorInteractionContainerBrandedLowBackgroundHover : string;
32
- export const ColorInteractionContainerBrandedLowBorder : string;
33
- export const ColorInteractionContainerBrandedLowBorderActive : string;
34
- export const ColorInteractionContainerBrandedLowBorderHover : string;
35
- export const ColorInteractionContainerBrandedLowIcon : string;
36
- export const ColorInteractionContainerBrandedLowIconActive : string;
37
- export const ColorInteractionContainerBrandedLowIconHover : string;
38
- export const ColorInteractionContainerBrandedLowText : string;
39
- export const ColorInteractionContainerBrandedLowTextActive : string;
40
- export const ColorInteractionContainerBrandedLowTextHover : string;
41
- export const ColorInteractionLinkHighIcon : string;
42
- export const ColorInteractionLinkHighIconHover : string;
43
- export const ColorInteractionLinkHighIconInactive : string;
44
- export const ColorInteractionLinkHighIconVisited : string;
45
- export const ColorInteractionLinkHighText : string;
46
- export const ColorInteractionLinkHighTextHover : string;
47
- export const ColorInteractionLinkHighTextDisabled : string;
48
- export const ColorInteractionLinkHighTextVisited : string;
49
- export const ColorInteractionLinkLowIcon : string;
50
- export const ColorInteractionLinkLowIconHover : string;
51
- export const ColorInteractionLinkLowIconDisabled : string;
52
- export const ColorInteractionLinkLowIconVisited : string;
53
- export const ColorInteractionLinkLowText : string;
54
- export const ColorInteractionLinkLowTextHover : string;
55
- export const ColorInteractionLinkLowTextDisabled : string;
56
- export const ColorInteractionLinkLowTextVisited : string;
57
- export const ColorInteractionLinkInvertedIcon : string;
58
- export const ColorInteractionLinkInvertedIconHover : string;
59
- export const ColorInteractionLinkInvertedIconDisabled : string;
60
- export const ColorInteractionLinkInvertedIconVisited : string;
61
- export const ColorInteractionLinkInvertedText : string;
62
- export const ColorInteractionLinkInvertedTextHover : string;
63
- export const ColorInteractionLinkInvertedTextInactive : string;
64
- export const ColorInteractionLinkInvertedTextVisited : string;
65
5
  export const ColorBlack : string;
66
6
  export const ColorWhite : string;
67
7
  export const ColorTransparent : string;
@@ -196,6 +136,66 @@ export const ColorFocusBackgroundInverted : string;
196
136
  export const ColorFocusDestructive : string;
197
137
  export const ColorFocusDestructiveInField : string;
198
138
  export const ColorFocusSuccess : string;
139
+ export const ColorInteractionContainerBrandedHighBackground : string;
140
+ export const ColorInteractionContainerBrandedHighBackgroundActive : string;
141
+ export const ColorInteractionContainerBrandedHighBackgroundHover : string;
142
+ export const ColorInteractionContainerBrandedHighBorder : string;
143
+ export const ColorInteractionContainerBrandedHighBorderActive : string;
144
+ export const ColorInteractionContainerBrandedHighBorderHover : string;
145
+ export const ColorInteractionContainerBrandedHighIcon : string;
146
+ export const ColorInteractionContainerBrandedHighIconActive : string;
147
+ export const ColorInteractionContainerBrandedHighIconHover : string;
148
+ export const ColorInteractionContainerBrandedHighText : string;
149
+ export const ColorInteractionContainerBrandedHighTextActive : string;
150
+ export const ColorInteractionContainerBrandedHighTextHover : string;
151
+ export const ColorInteractionContainerBrandedLowBackground : string;
152
+ export const ColorInteractionContainerBrandedLowBackgroundActive : string;
153
+ export const ColorInteractionContainerBrandedLowBackgroundHover : string;
154
+ export const ColorInteractionContainerBrandedLowBorder : string;
155
+ export const ColorInteractionContainerBrandedLowBorderActive : string;
156
+ export const ColorInteractionContainerBrandedLowBorderHover : string;
157
+ export const ColorInteractionContainerBrandedLowIcon : string;
158
+ export const ColorInteractionContainerBrandedLowIconActive : string;
159
+ export const ColorInteractionContainerBrandedLowIconHover : string;
160
+ export const ColorInteractionContainerBrandedLowText : string;
161
+ export const ColorInteractionContainerBrandedLowTextActive : string;
162
+ export const ColorInteractionContainerBrandedLowTextHover : string;
163
+ export const ColorInteractionContainerNeutralBackground : string;
164
+ export const ColorInteractionContainerNeutralBackgroundHover : string;
165
+ export const ColorInteractionContainerNeutralBackgroundActive : string;
166
+ export const ColorInteractionContainerNeutralBorder : string;
167
+ export const ColorInteractionContainerNeutralBorderActive : string;
168
+ export const ColorInteractionContainerNeutralBorderHover : string;
169
+ export const ColorInteractionContainerNeutralIcon : string;
170
+ export const ColorInteractionContainerNeutralIconActive : string;
171
+ export const ColorInteractionContainerNeutralIconHover : string;
172
+ export const ColorInteractionContainerNeutralText : string;
173
+ export const ColorInteractionContainerNeutralTextActive : string;
174
+ export const ColorInteractionContainerNeutralTextHover : string;
175
+ export const ColorInteractionLinkHighIcon : string;
176
+ export const ColorInteractionLinkHighIconHover : string;
177
+ export const ColorInteractionLinkHighIconInactive : string;
178
+ export const ColorInteractionLinkHighIconVisited : string;
179
+ export const ColorInteractionLinkHighText : string;
180
+ export const ColorInteractionLinkHighTextHover : string;
181
+ export const ColorInteractionLinkHighTextDisabled : string;
182
+ export const ColorInteractionLinkHighTextVisited : string;
183
+ export const ColorInteractionLinkLowIcon : string;
184
+ export const ColorInteractionLinkLowIconHover : string;
185
+ export const ColorInteractionLinkLowIconDisabled : string;
186
+ export const ColorInteractionLinkLowIconVisited : string;
187
+ export const ColorInteractionLinkLowText : string;
188
+ export const ColorInteractionLinkLowTextHover : string;
189
+ export const ColorInteractionLinkLowTextDisabled : string;
190
+ export const ColorInteractionLinkLowTextVisited : string;
191
+ export const ColorInteractionLinkInvertedIcon : string;
192
+ export const ColorInteractionLinkInvertedIconHover : string;
193
+ export const ColorInteractionLinkInvertedIconDisabled : string;
194
+ export const ColorInteractionLinkInvertedIconVisited : string;
195
+ export const ColorInteractionLinkInvertedText : string;
196
+ export const ColorInteractionLinkInvertedTextHover : string;
197
+ export const ColorInteractionLinkInvertedTextInactive : string;
198
+ export const ColorInteractionLinkInvertedTextVisited : string;
199
199
  export const ColorRainbow1Background : string;
200
200
  export const ColorRainbow1Border : string;
201
201
  export const ColorRainbow1Icon : string;