@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/dist/css/spark.css CHANGED
@@ -66,10 +66,12 @@
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-spark-300);
70
71
  --components-toggle-shape-default: var(--color-gray-spark-400);
71
72
  --components-toggle-background-disabled-checked: var(--color-gray-spark-600);
72
73
  --components-toggle-background-disabled: var(--color-gray-spark-600);
74
+ --components-toggle-background-default: var(--color-interaction-container-neutral-background);
73
75
  --components-toggle-border-disabled-checked: var(--color-gray-spark-600);
74
76
  --components-toggle-border-disabled: var(--color-gray-spark-600);
75
77
  --components-toggle-border-hover: var(--color-gray-spark-300);
@@ -77,6 +79,10 @@
77
79
  --components-tooltip-border: var(--color-gray-spark-50);
78
80
  --components-tooltip-background: var(--color-gray-spark-50);
79
81
  --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);
80
86
  --components-overlay-background: var(--color-gray-spark-650);
81
87
  --components-button-destructive-high-icon-hover: var(--color-base-black);
82
88
  --components-button-destructive-high-icon: var(--color-base-black);
@@ -100,6 +106,8 @@
100
106
  --components-loader-brand-background: var(--color-orange-900);
101
107
  --components-loader-white-foreground: var(--color-base-white);
102
108
  --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);
103
111
  --components-list-native-item-content-hover: var(--color-base-white);
104
112
  --components-list-native-item-content-default: var(--color-base-white);
105
113
  --components-form-shape-foreground-default: var(--color-base-black);
@@ -114,6 +122,7 @@
114
122
  --components-button-gr-as-complementary-text: var(--color-base-white);
115
123
  --components-button-gr-as-complementary-background-hover: var(--color-gray-spark-400);
116
124
  --components-button-gr-as-complementary-background: var(--color-gray-spark-450);
125
+ --components-button-lower-background: var(--color-interaction-container-neutral-background);
117
126
  --color-dont-use-background: var(--color-gray-spark-900);
118
127
  --color-dont-use-content: var(--color-gray-spark-750);
119
128
  --color-dont-use-border: var(--color-gray-spark-750);
@@ -157,47 +166,6 @@
157
166
  --color-rainbow-1-icon: var(--color-amber-500);
158
167
  --color-rainbow-1-border: var(--color-amber-500);
159
168
  --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);
201
169
  --color-focus-brand: var(--color-orange-500);
202
170
  --color-feedback-success-high-contrast-title: var(--color-base-black);
203
171
  --color-feedback-success-high-contrast-text: var(--color-status-green-900);
@@ -324,6 +292,47 @@
324
292
  --color-level-20-background: var(--color-gray-spark-700);
325
293
  --color-level-15-background: var(--color-gray-spark-750);
326
294
  --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);
327
336
  --components-togglegroup-high-border: var(--color-interaction-container-branded-low-border);
328
337
  --components-toggle-shape-hover-checked: var(--color-interaction-container-branded-high-icon);
329
338
  --components-toggle-shape-default-checked: var(--color-interaction-container-branded-high-icon);
@@ -529,6 +538,11 @@
529
538
  --components-button-high-background-hover: var(--color-interaction-container-branded-high-background-hover);
530
539
  --components-button-high-background-active: var(--color-interaction-container-branded-high-background-active);
531
540
  --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);
532
546
  --color-interaction-link-inverted-text-inactive: var(--color-content-inverted-low-text);
533
547
  --color-interaction-link-inverted-text: var(--color-content-inverted-medium-text);
534
548
  --color-interaction-link-inverted-icon-disabled: var(--color-content-inverted-low-icon);
@@ -539,6 +553,7 @@
539
553
  --color-interaction-link-low-icon: var(--color-content-high-text);
540
554
  --color-interaction-link-high-text-disabled: var(--color-content-low-text);
541
555
  --color-interaction-link-high-icon-inactive: var(--color-content-low-icon);
556
+ --color-interaction-container-branded-low-background: var(--color-level-00-background);
542
557
  --color-interaction-container-neutral-text-hover: var(--color-content-medium-text);
543
558
  --color-interaction-container-neutral-text: var(--color-content-low-text);
544
559
  --color-interaction-container-neutral-icon-hover: var(--color-content-medium-text);
@@ -546,20 +561,12 @@
546
561
  --color-interaction-container-neutral-border-hover: var(--color-content-medium-text);
547
562
  --color-interaction-container-neutral-border: var(--color-content-low-text);
548
563
  --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
564
  --components-togglegroup-low-background: var(--color-interaction-container-branded-low-background);
557
565
  --components-togglegroup-low-border: var(--color-interaction-container-neutral-border);
558
566
  --components-togglegroup-high-background: var(--color-interaction-container-branded-low-background);
559
567
  --components-toggle-shape-disabled-checked: var(--color-interaction-container-neutral-icon);
560
568
  --components-toggle-shape-disabled: var(--color-interaction-container-neutral-icon);
561
569
  --components-toggle-background-hover: var(--color-interaction-container-neutral-background-hover);
562
- --components-toggle-background-default: var(--color-interaction-container-neutral-background);
563
570
  --components-slider-handler-border-readonly: var(--components-form-field-background-readonly);
564
571
  --components-slider-handler-border-disabled: var(--components-form-field-background-disabled);
565
572
  --components-slider-handler-border-error: var(--components-form-field-background-error);
@@ -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-icon-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 {
@@ -698,10 +698,12 @@
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);
701
702
  --components-toggle-shape-hover: var(--color-gray-spark-400);
702
703
  --components-toggle-shape-default: var(--color-gray-spark-300);
703
704
  --components-toggle-background-disabled-checked: var(--color-gray-spark-150);
704
705
  --components-toggle-background-disabled: var(--color-gray-spark-150);
706
+ --components-toggle-background-default: var(--color-interaction-container-neutral-background);
705
707
  --components-toggle-border-disabled-checked: var(--color-gray-spark-150);
706
708
  --components-toggle-border-disabled: var(--color-gray-spark-150);
707
709
  --components-toggle-border-hover: var(--color-gray-spark-400);
@@ -709,6 +711,10 @@
709
711
  --components-tooltip-border: var(--color-gray-spark-900);
710
712
  --components-tooltip-background: var(--color-gray-spark-900);
711
713
  --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);
712
718
  --components-overlay-background: var(--color-gray-spark-850);
713
719
  --components-button-destructive-high-icon-hover: var(--color-base-white);
714
720
  --components-button-destructive-high-icon: var(--color-base-white);
@@ -732,6 +738,8 @@
732
738
  --components-loader-brand-background: var(--color-orange-50);
733
739
  --components-loader-white-foreground: var(--color-base-white);
734
740
  --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);
735
743
  --components-list-native-item-content-hover: var(--color-base-white);
736
744
  --components-list-native-item-content-default: var(--color-base-white);
737
745
  --components-form-shape-foreground-default: var(--color-base-white);
@@ -746,6 +754,7 @@
746
754
  --components-button-gr-as-complementary-text: var(--color-base-black);
747
755
  --components-button-gr-as-complementary-background-hover: var(--color-gray-spark-300);
748
756
  --components-button-gr-as-complementary-background: var(--color-gray-spark-200);
757
+ --components-button-lower-background: var(--color-interaction-container-neutral-background);
749
758
  --color-dont-use-background: var(--color-gray-spark-50);
750
759
  --color-dont-use-content: var(--color-gray-spark-100);
751
760
  --color-dont-use-border: var(--color-gray-spark-100);
@@ -789,47 +798,6 @@
789
798
  --color-rainbow-1-icon: var(--color-amber-700);
790
799
  --color-rainbow-1-border: var(--color-amber-700);
791
800
  --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);
833
801
  --color-focus-brand: var(--color-orange-500);
834
802
  --color-feedback-success-high-contrast-title: var(--color-base-white);
835
803
  --color-feedback-success-high-contrast-text: var(--color-status-green-50);
@@ -956,6 +924,47 @@
956
924
  --color-level-20-background: var(--color-gray-spark-00);
957
925
  --color-level-15-background: var(--color-gray-spark-75);
958
926
  --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);
959
968
  --components-togglegroup-high-border: var(--color-interaction-container-branded-low-border);
960
969
  --components-toggle-shape-hover-checked: var(--color-interaction-container-branded-high-icon);
961
970
  --components-toggle-shape-default-checked: var(--color-interaction-container-branded-high-icon);
@@ -1162,6 +1171,11 @@
1162
1171
  --components-button-high-background-hover: var(--color-interaction-container-branded-high-background-hover);
1163
1172
  --components-button-high-background-active: var(--color-interaction-container-branded-high-background-active);
1164
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);
1165
1179
  --color-interaction-link-inverted-text-inactive: var(--color-content-inverted-low-text);
1166
1180
  --color-interaction-link-inverted-text: var(--color-content-inverted-medium-text);
1167
1181
  --color-interaction-link-inverted-icon-disabled: var(--color-content-inverted-low-icon);
@@ -1172,6 +1186,7 @@
1172
1186
  --color-interaction-link-low-icon: var(--color-content-high-text);
1173
1187
  --color-interaction-link-high-text-disabled: var(--color-content-low-text);
1174
1188
  --color-interaction-link-high-icon-inactive: var(--color-content-low-icon);
1189
+ --color-interaction-container-branded-low-background: var(--color-level-00-background);
1175
1190
  --color-interaction-container-neutral-text-hover: var(--color-content-medium-text);
1176
1191
  --color-interaction-container-neutral-text: var(--color-content-low-text);
1177
1192
  --color-interaction-container-neutral-icon-hover: var(--color-content-medium-text);
@@ -1179,20 +1194,12 @@
1179
1194
  --color-interaction-container-neutral-border-hover: var(--color-content-medium-text);
1180
1195
  --color-interaction-container-neutral-border: var(--color-content-low-text);
1181
1196
  --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);
1189
1197
  --components-togglegroup-low-background: var(--color-interaction-container-branded-low-background);
1190
1198
  --components-togglegroup-low-border: var(--color-interaction-container-neutral-border);
1191
1199
  --components-togglegroup-high-background: var(--color-interaction-container-branded-low-background);
1192
1200
  --components-toggle-shape-disabled-checked: var(--color-interaction-container-neutral-icon);
1193
1201
  --components-toggle-shape-disabled: var(--color-interaction-container-neutral-icon);
1194
1202
  --components-toggle-background-hover: var(--color-interaction-container-neutral-background-hover);
1195
- --components-toggle-background-default: var(--color-interaction-container-neutral-background);
1196
1203
  --components-slider-handler-border-readonly: var(--components-form-field-background-readonly);
1197
1204
  --components-slider-handler-border-disabled: var(--components-form-field-background-disabled);
1198
1205
  --components-slider-handler-border-error: var(--components-form-field-background-error);
@@ -1212,7 +1219,6 @@
1212
1219
  --components-menu-contextual-item-content-hover: var(--color-interaction-container-neutral-text-hover);
1213
1220
  --components-menu-contextual-item-content: var(--color-interaction-container-neutral-text);
1214
1221
  --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);
1216
1222
  --components-calendar-cell-text-hover: var(--color-interaction-container-neutral-text-hover);
1217
1223
  --components-calendar-cell-text: var(--color-interaction-container-neutral-text);
1218
1224
  --components-calendar-cell-dot-hover: var(--color-interaction-container-neutral-icon-hover);
@@ -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);
package/dist/js/ocean_dark.d.ts CHANGED
@@ -2,6 +2,66 @@
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;
5
65
  export const ColorBlack : string;
6
66
  export const ColorWhite : string;
7
67
  export const ColorTransparent : string;
@@ -136,66 +196,6 @@ export const ColorFocusBackgroundInverted : string;
136
196
  export const ColorFocusDestructive : string;
137
197
  export const ColorFocusDestructiveInField : string;
138
198
  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;