@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/spark.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: #0000ff;
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-spark-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-spark-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-spark-350);
111
108
  --components-form-shape-background-default: var(--color-gray-spark-400);
112
109
  --components-form-field-background-checked: var(--color-orange-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-orange-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-spark-900);
189
+ --color-feedback-neutral-high-contrast-icon: var(--color-base-black);
190
+ --color-feedback-neutral-high-contrast-border: var(--color-gray-spark-250);
191
+ --color-feedback-neutral-high-contrast-background: var(--color-gray-spark-250);
182
192
  --color-feedback-neutral-low-text: var(--color-gray-spark-250);
183
193
  --color-feedback-neutral-low-icon: var(--color-gray-spark-250);
184
194
  --color-feedback-neutral-low-border: var(--color-gray-spark-250);
@@ -187,6 +197,11 @@
187
197
  --color-feedback-neutral-high-icon: var(--color-gray-spark-800);
188
198
  --color-feedback-neutral-high-border: var(--color-gray-spark-250);
189
199
  --color-feedback-neutral-high-background: var(--color-gray-spark-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-petrol-900);
217
- --color-accent-800: var(--color-petrol-800);
218
- --color-accent-700: var(--color-petrol-700);
219
- --color-accent-600: var(--color-petrol-600);
220
- --color-accent-500: var(--color-petrol-500);
221
- --color-accent-400: var(--color-petrol-400);
222
- --color-accent-300: var(--color-petrol-300);
223
- --color-accent-200: var(--color-petrol-200);
224
- --color-accent-100: var(--color-petrol-100);
225
- --color-accent-50: var(--color-petrol-50);
236
+ --color-accent-900: var(--color-petrol-50);
237
+ --color-accent-800: var(--color-petrol-100);
238
+ --color-accent-700: var(--color-petrol-200);
239
+ --color-accent-600: var(--color-petrol-300);
240
+ --color-accent-500: var(--color-petrol-400);
241
+ --color-accent-400: var(--color-petrol-500);
242
+ --color-accent-300: var(--color-petrol-600);
243
+ --color-accent-200: var(--color-petrol-700);
244
+ --color-accent-100: var(--color-petrol-800);
245
+ --color-accent-50: var(--color-petrol-900);
226
246
  --color-content-inverted-low-icon: var(--color-gray-spark-400);
227
247
  --color-content-inverted-low-text: var(--color-gray-spark-400);
228
248
  --color-content-inverted-medium-icon: var(--color-gray-spark-550);
@@ -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-low-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-icon-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);
@@ -657,6 +676,8 @@
657
676
  --components-popover-background: var(--color-gray-spark-00);
658
677
  --components-menu-contextual-item-background: var(--color-interaction-container-neutral-background);
659
678
  --components-field-time-background-default: var(--color-interaction-container-neutral-background);
679
+ --components-datagrid-body-background-default: var(--color-interaction-container-neutral-background);
680
+ --components-datagrid-header-background: var(--color-interaction-container-neutral-background);
660
681
  --components-overlay-background: var(--color-gray-spark-850);
661
682
  --components-button-destructive-high-icon-hover: var(--color-base-white);
662
683
  --components-button-destructive-high-icon: var(--color-base-white);
@@ -690,8 +711,6 @@
690
711
  --components-form-shape-background-hover: var(--color-gray-spark-100);
691
712
  --components-form-shape-background-default: var(--color-gray-spark-75);
692
713
  --components-form-field-background-checked: var(--color-orange-500);
693
- --components-datagrid-body-background-default: var(--color-interaction-container-neutral-background);
694
- --components-datagrid-header-background: var(--color-interaction-container-neutral-background);
695
714
  --components-button-gr-as-complementary-icon-hover: var(--color-base-black);
696
715
  --components-button-gr-as-complementary-icon: var(--color-base-black);
697
716
  --components-button-gr-as-complementary-text-hover: var(--color-base-black);
@@ -743,6 +762,11 @@
743
762
  --color-rainbow-1-border: var(--color-amber-700);
744
763
  --color-rainbow-1-background: var(--color-amber-50);
745
764
  --color-focus-brand: var(--color-orange-500);
765
+ --color-feedback-success-high-contrast-title: var(--color-base-white);
766
+ --color-feedback-success-high-contrast-text: var(--color-status-green-50);
767
+ --color-feedback-success-high-contrast-icon: var(--color-base-white);
768
+ --color-feedback-success-high-contrast-border: var(--color-status-green-600);
769
+ --color-feedback-success-high-contrast-background: var(--color-status-green-600);
746
770
  --color-feedback-success-low-text: var(--color-status-green-600);
747
771
  --color-feedback-success-low-icon: var(--color-status-green-600);
748
772
  --color-feedback-success-low-border: var(--color-status-green-600);
@@ -751,6 +775,11 @@
751
775
  --color-feedback-success-high-icon: var(--color-status-green-800);
752
776
  --color-feedback-success-high-border: var(--color-status-green-400);
753
777
  --color-feedback-success-high-background: var(--color-status-green-400);
778
+ --color-feedback-warning-high-contrast-title: var(--color-base-white);
779
+ --color-feedback-warning-high-contrast-text: var(--color-status-yellow-50);
780
+ --color-feedback-warning-high-contrast-icon: var(--color-base-white);
781
+ --color-feedback-warning-high-contrast-border: var(--color-status-yellow-700);
782
+ --color-feedback-warning-high-contrast-background: var(--color-status-yellow-700);
754
783
  --color-feedback-warning-low-text: var(--color-status-yellow-700);
755
784
  --color-feedback-warning-low-icon: var(--color-status-yellow-700);
756
785
  --color-feedback-warning-low-border: var(--color-status-yellow-700);
@@ -759,6 +788,11 @@
759
788
  --color-feedback-warning-high-icon: var(--color-status-yellow-900);
760
789
  --color-feedback-warning-high-border: var(--color-status-yellow-500);
761
790
  --color-feedback-warning-high-background: var(--color-status-yellow-500);
791
+ --color-feedback-neutral-high-contrast-title: var(--color-base-white);
792
+ --color-feedback-neutral-high-contrast-text: var(--color-gray-spark-50);
793
+ --color-feedback-neutral-high-contrast-icon: var(--color-base-white);
794
+ --color-feedback-neutral-high-contrast-border: var(--color-gray-spark-450);
795
+ --color-feedback-neutral-high-contrast-background: var(--color-gray-spark-450);
762
796
  --color-feedback-neutral-low-text: var(--color-gray-spark-450);
763
797
  --color-feedback-neutral-low-icon: var(--color-gray-spark-450);
764
798
  --color-feedback-neutral-low-border: var(--color-gray-spark-450);
@@ -767,6 +801,11 @@
767
801
  --color-feedback-neutral-high-icon: var(--color-gray-spark-800);
768
802
  --color-feedback-neutral-high-border: var(--color-gray-spark-250);
769
803
  --color-feedback-neutral-high-background: var(--color-gray-spark-250);
804
+ --color-feedback-error-high-contrast-title: var(--color-base-white);
805
+ --color-feedback-error-high-contrast-text: var(--color-status-red-50);
806
+ --color-feedback-error-high-contrast-icon: var(--color-base-white);
807
+ --color-feedback-error-high-contrast-border: var(--color-status-red-600);
808
+ --color-feedback-error-high-contrast-background: var(--color-status-red-600);
770
809
  --color-feedback-error-low-text: var(--color-status-red-600);
771
810
  --color-feedback-error-low-icon: var(--color-status-red-600);
772
811
  --color-feedback-error-low-border: var(--color-status-red-600);
@@ -775,6 +814,11 @@
775
814
  --color-feedback-error-high-icon: var(--color-status-red-900);
776
815
  --color-feedback-error-high-border: var(--color-status-red-300);
777
816
  --color-feedback-error-high-background: var(--color-status-red-300);
817
+ --color-feedback-information-high-contrast-title: var(--color-base-white);
818
+ --color-feedback-information-high-contrast-text: var(--color-status-blue-50);
819
+ --color-feedback-information-high-contrast-icon: var(--color-base-white);
820
+ --color-feedback-information-high-contrast-border: var(--color-status-blue-800);
821
+ --color-feedback-information-high-contrast-background: var(--color-status-blue-800);
778
822
  --color-feedback-information-low-text: var(--color-status-blue-500);
779
823
  --color-feedback-information-low-icon: var(--color-status-blue-500);
780
824
  --color-feedback-information-low-border: var(--color-status-blue-500);
@@ -896,6 +940,7 @@
896
940
  --components-notification-warning-border: var(--color-feedback-warning-low-border);
897
941
  --components-notification-warning-background: var(--color-level-00-background);
898
942
  --components-notification-content-title: var(--color-content-high-text);
943
+ --components-notification-content-timestamp: var(--color-content-medium-text);
899
944
  --components-notification-content-description: var(--color-content-medium-text);
900
945
  --components-notification-information-border: var(--color-feedback-information-low-border);
901
946
  --components-notification-information-icon: var(--color-feedback-information-low-icon);
@@ -905,6 +950,10 @@
905
950
  --components-menu-contextual-border: var(--color-content-low-border);
906
951
  --components-menu-contextual-background: var(--color-level-00-background);
907
952
  --components-calendar-background: var(--color-level-00-background);
953
+ --components-calendar-weeks-text-hover: var(--color-content-high-text);
954
+ --components-calendar-weeks-text: var(--color-content-high-text);
955
+ --components-calendar-weeks-background-hover: var(--color-level-15-background);
956
+ --components-calendar-weeks-background: var(--color-level-10-background);
908
957
  --components-calendar-cell-text-today: var(--color-content-high-text);
909
958
  --components-calendar-cell-text-outside-month: var(--color-content-lower-text);
910
959
  --components-calendar-cell-text-in-range: var(--color-interaction-container-branded-low-text-active);
@@ -914,15 +963,20 @@
914
963
  --components-calendar-cell-background-hover: var(--color-interaction-container-branded-low-background-hover);
915
964
  --components-calendar-cell-background-in-range: var(--color-interaction-container-branded-low-background-active);
916
965
  --components-calendar-cell-background-selected: var(--color-interaction-container-branded-high-background-active);
917
- --components-calendar-weeks-text-hover: var(--color-content-high-text);
918
- --components-calendar-weeks-text: var(--color-content-high-text);
919
- --components-calendar-weeks-background-hover: var(--color-level-15-background);
920
- --components-calendar-weeks-background: var(--color-level-10-background);
921
966
  --components-calendar-header-text: var(--color-content-high-text);
922
967
  --components-calendar-border: var(--color-content-low-border);
923
968
  --components-field-time-border-active: var(--color-interaction-container-neutral-icon-active);
924
969
  --components-field-time-text-active: var(--color-interaction-container-neutral-text-active);
925
970
  --components-field-time-background-active: var(--color-interaction-container-neutral-background-active);
971
+ --components-datagrid-expander-expander-background: var(--color-level-10-background);
972
+ --components-datagrid-expander-border: var(--color-content-low-border);
973
+ --components-datagrid-expander-content-background: var(--color-level-00-background);
974
+ --components-datagrid-body-background-active: var(--color-interaction-container-neutral-background-active);
975
+ --components-datagrid-body-subtext: var(--color-content-low-text);
976
+ --components-datagrid-body-text: var(--color-content-medium-text);
977
+ --components-datagrid-body-border: var(--color-content-low-border);
978
+ --components-datagrid-header-text: var(--color-content-high-text);
979
+ --components-datagrid-header-border: var(--color-content-medium-border);
926
980
  --components-buttongroup-low-border: var(--color-interaction-container-branded-low-border);
927
981
  --components-buttongroup-medium-border: var(--color-interaction-container-branded-low-border);
928
982
  --components-buttongroup-high-background: var(--color-interaction-container-branded-high-background);
@@ -1031,12 +1085,6 @@
1031
1085
  --components-form-text-label-default: var(--color-content-high-text);
1032
1086
  --components-form-text-info-icon: var(--color-content-low-text);
1033
1087
  --components-form-text-required: var(--color-feedback-error-low-icon);
1034
- --components-datagrid-expander-expander-background: var(--color-level-10-background);
1035
- --components-datagrid-expander-border: var(--color-content-low-border);
1036
- --components-datagrid-expander-content-background: var(--color-level-00-background);
1037
- --components-datagrid-body-background-active: var(--color-interaction-container-neutral-background-active);
1038
- --components-datagrid-body-border: var(--color-content-low-border);
1039
- --components-datagrid-header-border: var(--color-content-medium-border);
1040
1088
  --components-button-medium-text-hover: var(--color-interaction-container-branded-low-text-hover);
1041
1089
  --components-button-medium-text-active: var(--color-interaction-container-branded-low-text-active);
1042
1090
  --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);
package/dist/generated/nova-tailwind-tokens.d.ts CHANGED
@@ -63,6 +63,18 @@ export declare const NOVA_TAILWIND_TOKENS: {
63
63
  '.border-feedback-error-high': {
64
64
  'border-color': string;
65
65
  };
66
+ '.bg-feedback-error-high-contrast': {
67
+ 'background-color': string;
68
+ };
69
+ '.border-feedback-error-high-contrast': {
70
+ 'border-color': string;
71
+ };
72
+ '.icon-feedback-error-high-contrast': {
73
+ color: string;
74
+ };
75
+ '.text-feedback-error-high-contrast': {
76
+ color: string;
77
+ };
66
78
  '.icon-feedback-error-high': {
67
79
  color: string;
68
80
  };
@@ -87,6 +99,18 @@ export declare const NOVA_TAILWIND_TOKENS: {
87
99
  '.border-feedback-information-high': {
88
100
  'border-color': string;
89
101
  };
102
+ '.bg-feedback-information-high-contrast': {
103
+ 'background-color': string;
104
+ };
105
+ '.border-feedback-information-high-contrast': {
106
+ 'border-color': string;
107
+ };
108
+ '.icon-feedback-information-high-contrast': {
109
+ color: string;
110
+ };
111
+ '.text-feedback-information-high-contrast': {
112
+ color: string;
113
+ };
90
114
  '.icon-feedback-information-high': {
91
115
  color: string;
92
116
  };
@@ -111,6 +135,18 @@ export declare const NOVA_TAILWIND_TOKENS: {
111
135
  '.border-feedback-neutral-high': {
112
136
  'border-color': string;
113
137
  };
138
+ '.bg-feedback-neutral-high-contrast': {
139
+ 'background-color': string;
140
+ };
141
+ '.border-feedback-neutral-high-contrast': {
142
+ 'border-color': string;
143
+ };
144
+ '.icon-feedback-neutral-high-contrast': {
145
+ color: string;
146
+ };
147
+ '.text-feedback-neutral-high-contrast': {
148
+ color: string;
149
+ };
114
150
  '.icon-feedback-neutral-high': {
115
151
  color: string;
116
152
  };
@@ -135,6 +171,18 @@ export declare const NOVA_TAILWIND_TOKENS: {
135
171
  '.border-feedback-success-high': {
136
172
  'border-color': string;
137
173
  };
174
+ '.bg-feedback-success-high-contrast': {
175
+ 'background-color': string;
176
+ };
177
+ '.border-feedback-success-high-contrast': {
178
+ 'border-color': string;
179
+ };
180
+ '.icon-feedback-success-high-contrast': {
181
+ color: string;
182
+ };
183
+ '.text-feedback-success-high-contrast': {
184
+ color: string;
185
+ };
138
186
  '.icon-feedback-success-high': {
139
187
  color: string;
140
188
  };
@@ -159,6 +207,18 @@ export declare const NOVA_TAILWIND_TOKENS: {
159
207
  '.border-feedback-warning-high': {
160
208
  'border-color': string;
161
209
  };
210
+ '.bg-feedback-warning-high-contrast': {
211
+ 'background-color': string;
212
+ };
213
+ '.border-feedback-warning-high-contrast': {
214
+ 'border-color': string;
215
+ };
216
+ '.icon-feedback-warning-high-contrast': {
217
+ color: string;
218
+ };
219
+ '.text-feedback-warning-high-contrast': {
220
+ color: string;
221
+ };
162
222
  '.icon-feedback-warning-high': {
163
223
  color: string;
164
224
  };
package/dist/generated/nova-tailwind-tokens.js CHANGED
@@ -64,6 +64,18 @@ export const NOVA_TAILWIND_TOKENS = {
64
64
  '.border-feedback-error-high': {
65
65
  'border-color': 'var(--color-feedback-error-high-border)'
66
66
  },
67
+ '.bg-feedback-error-high-contrast': {
68
+ 'background-color': 'var(--color-feedback-error-high-contrast-background)'
69
+ },
70
+ '.border-feedback-error-high-contrast': {
71
+ 'border-color': 'var(--color-feedback-error-high-contrast-border)'
72
+ },
73
+ '.icon-feedback-error-high-contrast': {
74
+ 'color': 'var(--color-feedback-error-high-contrast-icon)'
75
+ },
76
+ '.text-feedback-error-high-contrast': {
77
+ 'color': 'var(--color-feedback-error-high-contrast-text)'
78
+ },
67
79
  '.icon-feedback-error-high': {
68
80
  'color': 'var(--color-feedback-error-high-icon)'
69
81
  },
@@ -88,6 +100,18 @@ export const NOVA_TAILWIND_TOKENS = {
88
100
  '.border-feedback-information-high': {
89
101
  'border-color': 'var(--color-feedback-information-high-border)'
90
102
  },
103
+ '.bg-feedback-information-high-contrast': {
104
+ 'background-color': 'var(--color-feedback-information-high-contrast-background)'
105
+ },
106
+ '.border-feedback-information-high-contrast': {
107
+ 'border-color': 'var(--color-feedback-information-high-contrast-border)'
108
+ },
109
+ '.icon-feedback-information-high-contrast': {
110
+ 'color': 'var(--color-feedback-information-high-contrast-icon)'
111
+ },
112
+ '.text-feedback-information-high-contrast': {
113
+ 'color': 'var(--color-feedback-information-high-contrast-text)'
114
+ },
91
115
  '.icon-feedback-information-high': {
92
116
  'color': 'var(--color-feedback-information-high-icon)'
93
117
  },
@@ -112,6 +136,18 @@ export const NOVA_TAILWIND_TOKENS = {
112
136
  '.border-feedback-neutral-high': {
113
137
  'border-color': 'var(--color-feedback-neutral-high-border)'
114
138
  },
139
+ '.bg-feedback-neutral-high-contrast': {
140
+ 'background-color': 'var(--color-feedback-neutral-high-contrast-background)'
141
+ },
142
+ '.border-feedback-neutral-high-contrast': {
143
+ 'border-color': 'var(--color-feedback-neutral-high-contrast-border)'
144
+ },
145
+ '.icon-feedback-neutral-high-contrast': {
146
+ 'color': 'var(--color-feedback-neutral-high-contrast-icon)'
147
+ },
148
+ '.text-feedback-neutral-high-contrast': {
149
+ 'color': 'var(--color-feedback-neutral-high-contrast-text)'
150
+ },
115
151
  '.icon-feedback-neutral-high': {
116
152
  'color': 'var(--color-feedback-neutral-high-icon)'
117
153
  },
@@ -136,6 +172,18 @@ export const NOVA_TAILWIND_TOKENS = {
136
172
  '.border-feedback-success-high': {
137
173
  'border-color': 'var(--color-feedback-success-high-border)'
138
174
  },
175
+ '.bg-feedback-success-high-contrast': {
176
+ 'background-color': 'var(--color-feedback-success-high-contrast-background)'
177
+ },
178
+ '.border-feedback-success-high-contrast': {
179
+ 'border-color': 'var(--color-feedback-success-high-contrast-border)'
180
+ },
181
+ '.icon-feedback-success-high-contrast': {
182
+ 'color': 'var(--color-feedback-success-high-contrast-icon)'
183
+ },
184
+ '.text-feedback-success-high-contrast': {
185
+ 'color': 'var(--color-feedback-success-high-contrast-text)'
186
+ },
139
187
  '.icon-feedback-success-high': {
140
188
  'color': 'var(--color-feedback-success-high-icon)'
141
189
  },
@@ -160,6 +208,18 @@ export const NOVA_TAILWIND_TOKENS = {
160
208
  '.border-feedback-warning-high': {
161
209
  'border-color': 'var(--color-feedback-warning-high-border)'
162
210
  },
211
+ '.bg-feedback-warning-high-contrast': {
212
+ 'background-color': 'var(--color-feedback-warning-high-contrast-background)'
213
+ },
214
+ '.border-feedback-warning-high-contrast': {
215
+ 'border-color': 'var(--color-feedback-warning-high-contrast-border)'
216
+ },
217
+ '.icon-feedback-warning-high-contrast': {
218
+ 'color': 'var(--color-feedback-warning-high-contrast-icon)'
219
+ },
220
+ '.text-feedback-warning-high-contrast': {
221
+ 'color': 'var(--color-feedback-warning-high-contrast-text)'
222
+ },
163
223
  '.icon-feedback-warning-high': {
164
224
  'color': 'var(--color-feedback-warning-high-icon)'
165
225
  },