@nova-design-system/nova-base 3.12.0 → 3.14.0-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 (25) hide show
  1. package/assets/icons/icon-sprite.svg +1 -1
  2. package/dist/cjs/generated/nova-tailwind-tokens.js +60 -0
  3. package/dist/css/mccs.css +96 -47
  4. package/dist/css/nova-utils.css +80 -0
  5. package/dist/css/ocean.css +130 -81
  6. package/dist/css/spark.css +130 -81
  7. package/dist/generated/nova-tailwind-tokens.d.ts +60 -0
  8. package/dist/generated/nova-tailwind-tokens.js +60 -0
  9. package/dist/js/mccs_dark.d.ts +30 -6
  10. package/dist/js/mccs_dark.js +30 -6
  11. package/dist/js/mccs_light.d.ts +30 -6
  12. package/dist/js/mccs_light.js +30 -6
  13. package/dist/js/ocean_dark.d.ts +42 -18
  14. package/dist/js/ocean_dark.js +52 -28
  15. package/dist/js/ocean_light.d.ts +42 -18
  16. package/dist/js/ocean_light.js +42 -18
  17. package/dist/js/primitives.d.ts +0 -2
  18. package/dist/js/primitives.js +0 -2
  19. package/dist/js/spacings.d.ts +36 -33
  20. package/dist/js/spacings.js +36 -33
  21. package/dist/js/spark_dark.d.ts +42 -18
  22. package/dist/js/spark_dark.js +52 -28
  23. package/dist/js/spark_light.d.ts +42 -18
  24. package/dist/js/spark_light.js +42 -18
  25. package/package.json +1 -1
package/dist/css/ocean.css CHANGED
@@ -20,13 +20,8 @@
20
20
  --components-list-native-background: #565558;
21
21
  --components-form-opacity-disabled: 50%;
22
22
  --components-form-opacity-default: 100%;
23
- --components-datagrid-body-subtext: #00b4ff;
24
- --components-datagrid-body-text: #ff0000;
25
- --components-datagrid-header-text: #ff0000;
26
23
  --components-button-gr-as-complementary-border-hover: rgba(255, 255, 255, 0);
27
24
  --components-button-gr-as-complementary-border: rgba(255, 255, 255, 0);
28
- --components-button-lower-border-hover-2: rgba(255, 255, 255, 0);
29
- --components-button-lower-border-2: rgba(255, 255, 255, 0);
30
25
  --components-button-lower-border-hover: rgba(255, 255, 255, 0);
31
26
  --components-button-lower-border-active: rgba(255, 255, 255, 0);
32
27
  --components-button-lower-border: rgba(255, 255, 255, 0);
@@ -77,6 +72,8 @@
77
72
  --components-popover-background: var(--color-gray-ocean-900);
78
73
  --components-menu-contextual-item-background: var(--color-interaction-container-neutral-background);
79
74
  --components-field-time-background-default: var(--color-interaction-container-neutral-background);
75
+ --components-datagrid-body-background-default: var(--color-interaction-container-neutral-background);
76
+ --components-datagrid-header-background: var(--color-interaction-container-neutral-background);
80
77
  --components-overlay-background: var(--color-gray-ocean-650);
81
78
  --components-button-destructive-high-icon-hover: var(--color-base-black);
82
79
  --components-button-destructive-high-icon: var(--color-base-black);
@@ -110,8 +107,6 @@
110
107
  --components-form-shape-background-hover: var(--color-gray-ocean-350);
111
108
  --components-form-shape-background-default: var(--color-gray-ocean-400);
112
109
  --components-form-field-background-checked: var(--color-petrol-500);
113
- --components-datagrid-body-background-default: var(--color-interaction-container-neutral-background);
114
- --components-datagrid-header-background: var(--color-interaction-container-neutral-background);
115
110
  --components-button-gr-as-complementary-icon-hover: var(--color-base-white);
116
111
  --components-button-gr-as-complementary-icon: var(--color-base-white);
117
112
  --components-button-gr-as-complementary-text-hover: var(--color-base-white);
@@ -163,6 +158,11 @@
163
158
  --color-rainbow-1-border: var(--color-amber-500);
164
159
  --color-rainbow-1-background: var(--color-amber-900);
165
160
  --color-focus-brand: var(--color-petrol-500);
161
+ --color-feedback-success-high-contrast-title: var(--color-base-black);
162
+ --color-feedback-success-high-contrast-text: var(--color-status-green-900);
163
+ --color-feedback-success-high-contrast-icon: var(--color-base-black);
164
+ --color-feedback-success-high-contrast-border: var(--color-status-green-400);
165
+ --color-feedback-success-high-contrast-background: var(--color-status-green-400);
166
166
  --color-feedback-success-low-text: var(--color-status-green-400);
167
167
  --color-feedback-success-low-icon: var(--color-status-green-400);
168
168
  --color-feedback-success-low-border: var(--color-status-green-400);
@@ -171,6 +171,11 @@
171
171
  --color-feedback-success-high-icon: var(--color-status-green-800);
172
172
  --color-feedback-success-high-border: var(--color-status-green-300);
173
173
  --color-feedback-success-high-background: var(--color-status-green-300);
174
+ --color-feedback-warning-high-contrast-title: var(--color-base-black);
175
+ --color-feedback-warning-high-contrast-text: var(--color-status-yellow-900);
176
+ --color-feedback-warning-high-contrast-icon: var(--color-base-black);
177
+ --color-feedback-warning-high-contrast-border: var(--color-status-yellow-500);
178
+ --color-feedback-warning-high-contrast-background: var(--color-status-yellow-500);
174
179
  --color-feedback-warning-low-text: var(--color-status-yellow-500);
175
180
  --color-feedback-warning-low-icon: var(--color-status-yellow-500);
176
181
  --color-feedback-warning-low-border: var(--color-status-yellow-500);
@@ -179,6 +184,11 @@
179
184
  --color-feedback-warning-high-icon: var(--color-status-yellow-900);
180
185
  --color-feedback-warning-high-border: var(--color-status-yellow-500);
181
186
  --color-feedback-warning-high-background: var(--color-status-yellow-500);
187
+ --color-feedback-neutral-high-contrast-title: var(--color-base-black);
188
+ --color-feedback-neutral-high-contrast-text: var(--color-gray-ocean-900);
189
+ --color-feedback-neutral-high-contrast-icon: var(--color-base-black);
190
+ --color-feedback-neutral-high-contrast-border: var(--color-gray-ocean-250);
191
+ --color-feedback-neutral-high-contrast-background: var(--color-gray-ocean-250);
182
192
  --color-feedback-neutral-low-text: var(--color-gray-ocean-250);
183
193
  --color-feedback-neutral-low-icon: var(--color-gray-ocean-250);
184
194
  --color-feedback-neutral-low-border: var(--color-gray-ocean-250);
@@ -187,6 +197,11 @@
187
197
  --color-feedback-neutral-high-icon: var(--color-gray-ocean-800);
188
198
  --color-feedback-neutral-high-border: var(--color-gray-ocean-250);
189
199
  --color-feedback-neutral-high-background: var(--color-gray-ocean-250);
200
+ --color-feedback-error-high-contrast-title: var(--color-base-black);
201
+ --color-feedback-error-high-contrast-text: var(--color-status-red-900);
202
+ --color-feedback-error-high-contrast-icon: var(--color-base-black);
203
+ --color-feedback-error-high-contrast-border: var(--color-status-red-300);
204
+ --color-feedback-error-high-contrast-background: var(--color-status-red-300);
190
205
  --color-feedback-error-low-text: var(--color-status-red-300);
191
206
  --color-feedback-error-low-icon: var(--color-status-red-300);
192
207
  --color-feedback-error-low-border: var(--color-status-red-300);
@@ -195,6 +210,11 @@
195
210
  --color-feedback-error-high-icon: var(--color-status-red-900);
196
211
  --color-feedback-error-high-border: var(--color-status-red-300);
197
212
  --color-feedback-error-high-background: var(--color-status-red-300);
213
+ --color-feedback-information-high-contrast-title: var(--color-base-black);
214
+ --color-feedback-information-high-contrast-text: var(--color-status-blue-900);
215
+ --color-feedback-information-high-contrast-icon: var(--color-base-black);
216
+ --color-feedback-information-high-contrast-border: var(--color-status-blue-300);
217
+ --color-feedback-information-high-contrast-background: var(--color-status-blue-300);
198
218
  --color-feedback-information-low-text: var(--color-status-blue-300);
199
219
  --color-feedback-information-low-icon: var(--color-status-blue-300);
200
220
  --color-feedback-information-low-border: var(--color-status-blue-300);
@@ -213,16 +233,16 @@
213
233
  --color-chart-3: var(--color-petrol-500);
214
234
  --color-chart-2: var(--color-dark-gray-500);
215
235
  --color-chart-1: var(--color-amber-500);
216
- --color-accent-900: var(--color-orange-900);
217
- --color-accent-800: var(--color-orange-800);
218
- --color-accent-700: var(--color-orange-700);
219
- --color-accent-600: var(--color-orange-600);
220
- --color-accent-500: var(--color-orange-500);
221
- --color-accent-400: var(--color-orange-400);
222
- --color-accent-300: var(--color-orange-300);
223
- --color-accent-200: var(--color-orange-200);
224
- --color-accent-100: var(--color-orange-100);
225
- --color-accent-50: var(--color-orange-50);
236
+ --color-accent-900: var(--color-orange-50);
237
+ --color-accent-800: var(--color-orange-100);
238
+ --color-accent-700: var(--color-orange-200);
239
+ --color-accent-600: var(--color-orange-300);
240
+ --color-accent-500: var(--color-orange-400);
241
+ --color-accent-400: var(--color-orange-500);
242
+ --color-accent-300: var(--color-orange-600);
243
+ --color-accent-200: var(--color-orange-700);
244
+ --color-accent-100: var(--color-orange-800);
245
+ --color-accent-50: var(--color-orange-900);
226
246
  --color-content-inverted-low-icon: var(--color-gray-ocean-450);
227
247
  --color-content-inverted-low-text: var(--color-gray-ocean-450);
228
248
  --color-content-inverted-medium-icon: var(--color-gray-ocean-650);
@@ -316,6 +336,7 @@
316
336
  --components-notification-warning-border: var(--color-feedback-warning-low-border);
317
337
  --components-notification-warning-background: var(--color-level-20-background);
318
338
  --components-notification-content-title: var(--color-content-high-text);
339
+ --components-notification-content-timestamp: var(--color-content-medium-text);
319
340
  --components-notification-content-description: var(--color-content-medium-text);
320
341
  --components-notification-information-border: var(--color-feedback-information-low-border);
321
342
  --components-notification-information-icon: var(--color-feedback-information-low-icon);
@@ -325,6 +346,10 @@
325
346
  --components-menu-contextual-border: var(--color-content-low-border);
326
347
  --components-menu-contextual-background: var(--color-level-00-background);
327
348
  --components-calendar-background: var(--color-level-00-background);
349
+ --components-calendar-weeks-text-hover: var(--color-content-high-text);
350
+ --components-calendar-weeks-text: var(--color-content-high-text);
351
+ --components-calendar-weeks-background-hover: var(--color-level-15-background);
352
+ --components-calendar-weeks-background: var(--color-level-10-background);
328
353
  --components-calendar-cell-text-today: var(--color-content-high-text);
329
354
  --components-calendar-cell-text-outside-month: var(--color-content-lower-text);
330
355
  --components-calendar-cell-text-in-range: var(--color-interaction-container-branded-low-text-active);
@@ -335,15 +360,20 @@
335
360
  --components-calendar-cell-background-hover: var(--color-interaction-container-branded-low-background-hover);
336
361
  --components-calendar-cell-background-in-range: var(--color-interaction-container-branded-low-background-active);
337
362
  --components-calendar-cell-background-selected: var(--color-interaction-container-branded-high-background-active);
338
- --components-calendar-weeks-text-hover: var(--color-content-high-text);
339
- --components-calendar-weeks-text: var(--color-content-high-text);
340
- --components-calendar-weeks-background-hover: var(--color-level-15-background);
341
- --components-calendar-weeks-background: var(--color-level-10-background);
342
363
  --components-calendar-header-text: var(--color-content-high-text);
343
364
  --components-calendar-border: var(--color-content-low-border);
344
365
  --components-field-time-border-active: var(--color-interaction-container-neutral-icon-active);
345
366
  --components-field-time-text-active: var(--color-interaction-container-neutral-text-active);
346
367
  --components-field-time-background-active: var(--color-interaction-container-neutral-background-active);
368
+ --components-datagrid-expander-expander-background: var(--color-level-10-background);
369
+ --components-datagrid-expander-border: var(--color-content-low-border);
370
+ --components-datagrid-expander-content-background: var(--color-level-00-background);
371
+ --components-datagrid-body-background-active: var(--color-interaction-container-neutral-background-active);
372
+ --components-datagrid-body-subtext: var(--color-content-low-text);
373
+ --components-datagrid-body-text: var(--color-content-medium-text);
374
+ --components-datagrid-body-border: var(--color-content-low-border);
375
+ --components-datagrid-header-text: var(--color-content-high-text);
376
+ --components-datagrid-header-border: var(--color-content-medium-border);
347
377
  --components-buttongroup-low-border: var(--color-interaction-container-branded-low-border);
348
378
  --components-buttongroup-medium-border: var(--color-interaction-container-branded-low-border);
349
379
  --components-buttongroup-high-background: var(--color-interaction-container-branded-high-background);
@@ -452,12 +482,6 @@
452
482
  --components-form-text-label-default: var(--color-content-high-text);
453
483
  --components-form-text-info-icon: var(--color-content-medium-text);
454
484
  --components-form-text-required: var(--color-feedback-error-low-icon);
455
- --components-datagrid-expander-expander-background: var(--color-level-10-background);
456
- --components-datagrid-expander-border: var(--color-content-low-border);
457
- --components-datagrid-expander-content-background: var(--color-level-00-background);
458
- --components-datagrid-body-background-active: var(--color-interaction-container-neutral-background-active);
459
- --components-datagrid-body-border: var(--color-content-low-border);
460
- --components-datagrid-header-border: var(--color-content-medium-border);
461
485
  --components-button-medium-text-hover: var(--color-interaction-container-branded-low-text-hover);
462
486
  --components-button-medium-text-active: var(--color-interaction-container-branded-low-text-active);
463
487
  --components-button-medium-text: var(--color-interaction-container-branded-low-text);
@@ -541,6 +565,7 @@
541
565
  --components-field-time-text-hover: var(--color-interaction-container-neutral-text-hover);
542
566
  --components-field-time-text-default: var(--color-interaction-container-neutral-text);
543
567
  --components-field-time-background-hover: var(--color-interaction-container-neutral-background-hover);
568
+ --components-datagrid-body-background-hover: var(--color-interaction-container-neutral-background-hover);
544
569
  --components-buttongroup-lower-background: var(--color-interaction-container-branded-low-background);
545
570
  --components-buttongroup-lower-border: var(--color-interaction-container-neutral-border);
546
571
  --components-buttongroup-low-background: var(--color-interaction-container-branded-low-background);
@@ -548,7 +573,6 @@
548
573
  --components-breadcrumb-text: var(--color-interaction-link-low-text);
549
574
  --components-list-dropdown-item-background-hover: var(--color-interaction-container-neutral-background-hover);
550
575
  --components-form-shape-foreground-disabled: var(--components-form-shape-border-default);
551
- --components-datagrid-body-background-hover: var(--color-interaction-container-neutral-background-hover);
552
576
  --components-button-medium-background: var(--color-interaction-container-branded-low-background);
553
577
  --components-button-lower-text-hover: var(--color-interaction-container-neutral-text-hover);
554
578
  --components-button-lower-text: var(--color-interaction-container-neutral-text);
@@ -602,13 +626,8 @@
602
626
  --components-list-native-background: #565558;
603
627
  --components-form-opacity-disabled: 50%;
604
628
  --components-form-opacity-default: 100%;
605
- --components-datagrid-body-subtext: #0000ff;
606
- --components-datagrid-body-text: #ff0000;
607
- --components-datagrid-header-text: #ff0000;
608
629
  --components-button-gr-as-complementary-border-hover: rgba(255, 255, 255, 0);
609
630
  --components-button-gr-as-complementary-border: rgba(255, 255, 255, 0);
610
- --components-button-lower-border-hover-2: rgba(255, 255, 255, 0);
611
- --components-button-lower-border-2: rgba(255, 255, 255, 0);
612
631
  --components-button-lower-border-hover: rgba(255, 255, 255, 0);
613
632
  --components-button-lower-border-active: rgba(255, 255, 255, 0);
614
633
  --components-button-lower-border: rgba(255, 255, 255, 0);
@@ -659,6 +678,8 @@
659
678
  --components-popover-background: var(--color-gray-ocean-00);
660
679
  --components-menu-contextual-item-background: var(--color-interaction-container-neutral-background);
661
680
  --components-field-time-background-default: var(--color-interaction-container-neutral-background);
681
+ --components-datagrid-body-background-default: var(--color-interaction-container-neutral-background);
682
+ --components-datagrid-header-background: var(--color-interaction-container-neutral-background);
662
683
  --components-overlay-background: var(--color-gray-ocean-850);
663
684
  --components-button-destructive-high-icon-hover: var(--color-base-white);
664
685
  --components-button-destructive-high-icon: var(--color-base-white);
@@ -692,8 +713,6 @@
692
713
  --components-form-shape-background-hover: var(--color-gray-ocean-100);
693
714
  --components-form-shape-background-default: var(--color-gray-ocean-75);
694
715
  --components-form-field-background-checked: var(--color-petrol-600);
695
- --components-datagrid-body-background-default: var(--color-interaction-container-neutral-background);
696
- --components-datagrid-header-background: var(--color-interaction-container-neutral-background);
697
716
  --components-button-gr-as-complementary-icon-hover: var(--color-base-black);
698
717
  --components-button-gr-as-complementary-icon: var(--color-base-black);
699
718
  --components-button-gr-as-complementary-text-hover: var(--color-base-black);
@@ -745,6 +764,11 @@
745
764
  --color-rainbow-1-border: var(--color-amber-700);
746
765
  --color-rainbow-1-background: var(--color-amber-50);
747
766
  --color-focus-brand: var(--color-petrol-600);
767
+ --color-feedback-success-high-contrast-title: var(--color-base-white);
768
+ --color-feedback-success-high-contrast-text: var(--color-status-green-50);
769
+ --color-feedback-success-high-contrast-icon: var(--color-base-white);
770
+ --color-feedback-success-high-contrast-border: var(--color-status-green-600);
771
+ --color-feedback-success-high-contrast-background: var(--color-status-green-600);
748
772
  --color-feedback-success-low-text: var(--color-status-green-600);
749
773
  --color-feedback-success-low-icon: var(--color-status-green-600);
750
774
  --color-feedback-success-low-border: var(--color-status-green-600);
@@ -753,6 +777,11 @@
753
777
  --color-feedback-success-high-icon: var(--color-status-green-800);
754
778
  --color-feedback-success-high-border: var(--color-status-green-400);
755
779
  --color-feedback-success-high-background: var(--color-status-green-400);
780
+ --color-feedback-warning-high-contrast-title: var(--color-base-white);
781
+ --color-feedback-warning-high-contrast-text: var(--color-status-yellow-50);
782
+ --color-feedback-warning-high-contrast-icon: var(--color-base-white);
783
+ --color-feedback-warning-high-contrast-border: var(--color-status-yellow-700);
784
+ --color-feedback-warning-high-contrast-background: var(--color-status-yellow-700);
756
785
  --color-feedback-warning-low-text: var(--color-status-yellow-700);
757
786
  --color-feedback-warning-low-icon: var(--color-status-yellow-700);
758
787
  --color-feedback-warning-low-border: var(--color-status-yellow-700);
@@ -761,6 +790,11 @@
761
790
  --color-feedback-warning-high-icon: var(--color-status-yellow-900);
762
791
  --color-feedback-warning-high-border: var(--color-status-yellow-500);
763
792
  --color-feedback-warning-high-background: var(--color-status-yellow-500);
793
+ --color-feedback-neutral-high-contrast-title: var(--color-base-white);
794
+ --color-feedback-neutral-high-contrast-text: var(--color-gray-ocean-50);
795
+ --color-feedback-neutral-high-contrast-icon: var(--color-base-white);
796
+ --color-feedback-neutral-high-contrast-border: var(--color-gray-ocean-450);
797
+ --color-feedback-neutral-high-contrast-background: var(--color-gray-ocean-450);
764
798
  --color-feedback-neutral-low-text: var(--color-gray-ocean-450);
765
799
  --color-feedback-neutral-low-icon: var(--color-gray-ocean-450);
766
800
  --color-feedback-neutral-low-border: var(--color-gray-ocean-450);
@@ -769,6 +803,11 @@
769
803
  --color-feedback-neutral-high-icon: var(--color-gray-ocean-800);
770
804
  --color-feedback-neutral-high-border: var(--color-gray-ocean-250);
771
805
  --color-feedback-neutral-high-background: var(--color-gray-ocean-250);
806
+ --color-feedback-error-high-contrast-title: var(--color-base-white);
807
+ --color-feedback-error-high-contrast-text: var(--color-status-red-50);
808
+ --color-feedback-error-high-contrast-icon: var(--color-base-white);
809
+ --color-feedback-error-high-contrast-border: var(--color-status-red-600);
810
+ --color-feedback-error-high-contrast-background: var(--color-status-red-600);
772
811
  --color-feedback-error-low-text: var(--color-status-red-600);
773
812
  --color-feedback-error-low-icon: var(--color-status-red-600);
774
813
  --color-feedback-error-low-border: var(--color-status-red-600);
@@ -777,6 +816,11 @@
777
816
  --color-feedback-error-high-icon: var(--color-status-red-900);
778
817
  --color-feedback-error-high-border: var(--color-status-red-300);
779
818
  --color-feedback-error-high-background: var(--color-status-red-300);
819
+ --color-feedback-information-high-contrast-title: var(--color-base-white);
820
+ --color-feedback-information-high-contrast-text: var(--color-status-blue-50);
821
+ --color-feedback-information-high-contrast-icon: var(--color-base-white);
822
+ --color-feedback-information-high-contrast-border: var(--color-status-blue-300);
823
+ --color-feedback-information-high-contrast-background: var(--color-status-blue-300);
780
824
  --color-feedback-information-low-text: var(--color-status-blue-500);
781
825
  --color-feedback-information-low-icon: var(--color-status-blue-500);
782
826
  --color-feedback-information-low-border: var(--color-status-blue-500);
@@ -898,6 +942,7 @@
898
942
  --components-notification-warning-border: var(--color-feedback-warning-low-border);
899
943
  --components-notification-warning-background: var(--color-level-00-background);
900
944
  --components-notification-content-title: var(--color-content-high-text);
945
+ --components-notification-content-timestamp: var(--color-content-medium-text);
901
946
  --components-notification-content-description: var(--color-content-medium-text);
902
947
  --components-notification-information-border: var(--color-feedback-information-low-border);
903
948
  --components-notification-information-icon: var(--color-feedback-information-low-icon);
@@ -907,6 +952,10 @@
907
952
  --components-menu-contextual-border: var(--color-content-low-border);
908
953
  --components-menu-contextual-background: var(--color-level-00-background);
909
954
  --components-calendar-background: var(--color-level-00-background);
955
+ --components-calendar-weeks-text-hover: var(--color-content-high-text);
956
+ --components-calendar-weeks-text: var(--color-content-high-text);
957
+ --components-calendar-weeks-background-hover: var(--color-level-15-background);
958
+ --components-calendar-weeks-background: var(--color-level-10-background);
910
959
  --components-calendar-cell-text-today: var(--color-content-high-text);
911
960
  --components-calendar-cell-text-outside-month: var(--color-content-lower-text);
912
961
  --components-calendar-cell-text-in-range: var(--color-interaction-container-branded-low-text-active);
@@ -917,15 +966,20 @@
917
966
  --components-calendar-cell-background-hover: var(--color-interaction-container-branded-low-background-hover);
918
967
  --components-calendar-cell-background-in-range: var(--color-interaction-container-branded-low-background-active);
919
968
  --components-calendar-cell-background-selected: var(--color-interaction-container-branded-high-background-active);
920
- --components-calendar-weeks-text-hover: var(--color-content-high-text);
921
- --components-calendar-weeks-text: var(--color-content-high-text);
922
- --components-calendar-weeks-background-hover: var(--color-level-15-background);
923
- --components-calendar-weeks-background: var(--color-level-10-background);
924
969
  --components-calendar-header-text: var(--color-content-high-text);
925
970
  --components-calendar-border: var(--color-content-low-border);
926
971
  --components-field-time-border-active: var(--color-interaction-container-neutral-icon-active);
927
972
  --components-field-time-text-active: var(--color-interaction-container-neutral-text-active);
928
973
  --components-field-time-background-active: var(--color-interaction-container-neutral-background-active);
974
+ --components-datagrid-expander-expander-background: var(--color-level-10-background);
975
+ --components-datagrid-expander-border: var(--color-content-low-border);
976
+ --components-datagrid-expander-content-background: var(--color-level-00-background);
977
+ --components-datagrid-body-background-active: var(--color-interaction-container-neutral-background-active);
978
+ --components-datagrid-body-subtext: var(--color-content-low-text);
979
+ --components-datagrid-body-text: var(--color-content-medium-text);
980
+ --components-datagrid-body-border: var(--color-content-low-border);
981
+ --components-datagrid-header-text: var(--color-content-high-text);
982
+ --components-datagrid-header-border: var(--color-content-medium-border);
929
983
  --components-buttongroup-low-border: var(--color-interaction-container-branded-low-border);
930
984
  --components-buttongroup-medium-border: var(--color-interaction-container-branded-low-border);
931
985
  --components-buttongroup-high-background: var(--color-interaction-container-branded-high-background);
@@ -1034,12 +1088,6 @@
1034
1088
  --components-form-text-label-default: var(--color-content-high-text);
1035
1089
  --components-form-text-info-icon: var(--color-content-low-text);
1036
1090
  --components-form-text-required: var(--color-feedback-error-low-icon);
1037
- --components-datagrid-expander-expander-background: var(--color-level-10-background);
1038
- --components-datagrid-expander-border: var(--color-content-low-border);
1039
- --components-datagrid-expander-content-background: var(--color-level-00-background);
1040
- --components-datagrid-body-background-active: var(--color-interaction-container-neutral-background-active);
1041
- --components-datagrid-body-border: var(--color-content-low-border);
1042
- --components-datagrid-header-border: var(--color-content-medium-border);
1043
1091
  --components-button-medium-text-hover: var(--color-interaction-container-branded-low-text-hover);
1044
1092
  --components-button-medium-text-active: var(--color-interaction-container-branded-low-text-active);
1045
1093
  --components-button-medium-text: var(--color-interaction-container-branded-low-text);
@@ -1123,6 +1171,7 @@
1123
1171
  --components-field-time-text-hover: var(--color-interaction-container-neutral-text-hover);
1124
1172
  --components-field-time-text-default: var(--color-interaction-container-neutral-text);
1125
1173
  --components-field-time-background-hover: var(--color-interaction-container-neutral-background-hover);
1174
+ --components-datagrid-body-background-hover: var(--color-interaction-container-neutral-background-hover);
1126
1175
  --components-buttongroup-lower-background: var(--color-interaction-container-branded-low-background);
1127
1176
  --components-buttongroup-lower-border: var(--color-interaction-container-neutral-border);
1128
1177
  --components-buttongroup-low-background: var(--color-interaction-container-branded-low-background);
@@ -1130,7 +1179,6 @@
1130
1179
  --components-breadcrumb-text: var(--color-interaction-link-low-text);
1131
1180
  --components-list-dropdown-item-background-hover: var(--color-interaction-container-neutral-background-hover);
1132
1181
  --components-form-shape-foreground-disabled: var(--components-form-shape-border-default);
1133
- --components-datagrid-body-background-hover: var(--color-interaction-container-neutral-background-hover);
1134
1182
  --components-button-medium-background: var(--color-interaction-container-branded-low-background);
1135
1183
  --components-button-lower-text-hover: var(--color-interaction-container-neutral-text-hover);
1136
1184
  --components-button-lower-text: var(--color-interaction-container-neutral-text);
@@ -1149,8 +1197,6 @@
1149
1197
  --letter-spacing-heading-md: -0.5000px;
1150
1198
  --letter-spacing-heading-sm: -0.2500px;
1151
1199
  --letter-spacing-heading-xs: 0.0000px;
1152
- --spacing-09: 36.0000px;
1153
- --spacing-07: 28.0000px;
1154
1200
  --spacing-3-5: 14.0000px;
1155
1201
  --spacing-2-5: 10.0000px;
1156
1202
  --spacing-1-5: 6.0000px;
@@ -1423,22 +1469,6 @@
1423
1469
  */
1424
1470
 
1425
1471
  :root {
1426
- --togglegroup-md-iconbutton-padding-y: 7.0000px;
1427
- --togglegroup-md-button-radius: 3.0000px;
1428
- --togglegroup-md-button-padding-y: 5.0000px;
1429
- --togglegroup-md-padding: 3.0000px;
1430
- --togglegroup-lg-iconbutton-padding-y: 9.0000px;
1431
- --togglegroup-lg-button-radius: 5.0000px;
1432
- --togglegroup-lg-button-padding-y: 7.0000px;
1433
- --togglegroup-lg-padding: 3.0000px;
1434
- --togglegroup-sm-padding: 3.0000px;
1435
- --togglegroup-sm-iconbutton-padding-y: 5.0000px;
1436
- --togglegroup-sm-button-radius: 2.0000px;
1437
- --togglegroup-sm-button-padding-y: 3.0000px;
1438
- --togglegroup-xs-iconbutton-padding-y: 3.0000px;
1439
- --togglegroup-xs-button-radius: 1.0000px;
1440
- --togglegroup-xs-button-padding-y: 1.0000px;
1441
- --togglegroup-xs-padding: 3.0000px;
1442
1472
  --slider-tick-radius: 1.0000px;
1443
1473
  --global-typography-legend-font-style: uppercase;
1444
1474
  --global-typography-label-font-style: normal;
@@ -1451,6 +1481,22 @@
1451
1481
  --global-typography-h2-font-style: normal;
1452
1482
  --global-typography-h1-font-style: normal;
1453
1483
  --tooltip-font-weight: 500;
1484
+ --togglegroup-lg-iconbutton-padding-y: 9.0000px;
1485
+ --togglegroup-lg-button-radius: 5.0000px;
1486
+ --togglegroup-lg-button-padding-y: 7.0000px;
1487
+ --togglegroup-lg-padding: 3.0000px;
1488
+ --togglegroup-md-iconbutton-padding-y: 7.0000px;
1489
+ --togglegroup-md-button-radius: 3.0000px;
1490
+ --togglegroup-md-button-padding-y: 5.0000px;
1491
+ --togglegroup-md-padding: 3.0000px;
1492
+ --togglegroup-sm-iconbutton-padding-y: 5.0000px;
1493
+ --togglegroup-sm-button-radius: 2.0000px;
1494
+ --togglegroup-sm-button-padding-y: 3.0000px;
1495
+ --togglegroup-sm-padding: 3.0000px;
1496
+ --togglegroup-xs-iconbutton-padding-y: 3.0000px;
1497
+ --togglegroup-xs-button-radius: 1.0000px;
1498
+ --togglegroup-xs-button-padding-y: 1.0000px;
1499
+ --togglegroup-xs-padding: 3.0000px;
1454
1500
  --popover-shadow-2-x: 0.0000px;
1455
1501
  --popover-shadow-1-blur: 1.0000px;
1456
1502
  --popover-shadow-1-x: 0.0000px;
@@ -1494,6 +1540,8 @@
1494
1540
  --notification-border-width-low-emphasis: var(--spacing-px);
1495
1541
  --notification-border-width-high-emphasis: var(--spacing-2);
1496
1542
  --notification-radius: var(--radius-rounded-lg);
1543
+ --notification-padding-left: var(--spacing-6);
1544
+ --notification-padding-right: var(--spacing-6);
1497
1545
  --notification-padding: var(--spacing-4);
1498
1546
  --notification-gap-y: var(--spacing-1);
1499
1547
  --notification-gap-x-title: var(--spacing-2);
@@ -1570,24 +1618,13 @@
1570
1618
  --alert-heading-font-weight: var(--font-weight-medium-emphasis);
1571
1619
  --alert-heading-font-size: var(--font-size-sm);
1572
1620
  --alert-radius: var(--radius-rounded-lg);
1621
+ --alert-padding-right: var(--spacing-8);
1573
1622
  --alert-padding: var(--spacing-4);
1574
1623
  --alert-gap-y: var(--spacing-1);
1575
1624
  --alert-icon-position-y: var(--spacing-4);
1576
1625
  --alert-icon-position-x: var(--spacing-4);
1577
1626
  --alert-gap-x: var(--spacing-3);
1578
1627
  --alert-icon-size: var(--spacing-5);
1579
- --togglegroup-md-height: var(--spacing-10);
1580
- --togglegroup-md-gap: var(--spacing-0-5);
1581
- --togglegroup-md-radius: var(--radius-rounded-md);
1582
- --togglegroup-lg-height: var(--spacing-12);
1583
- --togglegroup-lg-gap: var(--spacing-0-5);
1584
- --togglegroup-lg-radius: var(--radius-rounded-lg);
1585
- --togglegroup-sm-height: var(--spacing-8);
1586
- --togglegroup-sm-gap: var(--spacing-0-5);
1587
- --togglegroup-sm-radius: var(--radius-rounded);
1588
- --togglegroup-xs-height: var(--spacing-6);
1589
- --togglegroup-xs-gap: var(--spacing-0-5);
1590
- --togglegroup-xs-radius: var(--radius-rounded-sm);
1591
1628
  --slider-track-radius: var(--radius-rounded-sm);
1592
1629
  --slider-track-padding-x: var(--spacing-3);
1593
1630
  --slider-track-height: var(--spacing-1);
@@ -1632,6 +1669,18 @@
1632
1669
  --tooltip-padding-y: var(--spacing-3);
1633
1670
  --tooltip-padding-x: var(--spacing-3);
1634
1671
  --tooltip-font-size: var(--font-size-sm);
1672
+ --togglegroup-lg-height: var(--spacing-12);
1673
+ --togglegroup-lg-gap: var(--spacing-0-5);
1674
+ --togglegroup-lg-radius: var(--radius-rounded-lg);
1675
+ --togglegroup-md-height: var(--spacing-10);
1676
+ --togglegroup-md-gap: var(--spacing-0-5);
1677
+ --togglegroup-md-radius: var(--radius-rounded-md);
1678
+ --togglegroup-sm-height: var(--spacing-8);
1679
+ --togglegroup-sm-gap: var(--spacing-0-5);
1680
+ --togglegroup-sm-radius: var(--radius-rounded);
1681
+ --togglegroup-xs-height: var(--spacing-6);
1682
+ --togglegroup-xs-gap: var(--spacing-0-5);
1683
+ --togglegroup-xs-radius: var(--radius-rounded-sm);
1635
1684
  --popover-radius: var(--radius-rounded-md);
1636
1685
  --popover-padding-y: var(--spacing-2);
1637
1686
  --popover-padding-x: var(--spacing-2);
@@ -1731,11 +1780,11 @@
1731
1780
  --list-native-line-height: var(--line-height-base);
1732
1781
  --list-native-font-size: var(--font-size-md);
1733
1782
  --list-native-icon-size: var(--spacing-5);
1734
- --icon-xl: var(--spacing-7);
1735
- --icon-lg: var(--spacing-6);
1736
- --icon-md: var(--spacing-5);
1737
- --icon-sm: var(--spacing-4);
1738
- --icon-xs: var(--spacing-3);
1783
+ --icon-size-xl: var(--spacing-7);
1784
+ --icon-size-lg: var(--spacing-6);
1785
+ --icon-size-md: var(--spacing-5);
1786
+ --icon-size-sm: var(--spacing-4);
1787
+ --icon-size-xs: var(--spacing-3);
1739
1788
  --calendar-navigation-buttons-gap: var(--spacing-1);
1740
1789
  --calendar-controls-padding-top: var(--spacing-2);
1741
1790
  --calendar-controls-margin-top: var(--spacing-1);