@nova-design-system/nova-base 3.0.0-beta.47 → 3.1.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 (26) hide show
  1. package/assets/icons/icon-sprite.svg +1 -1
  2. package/dist/cjs/generated/nova-tailwind-tokens.js +36 -0
  3. package/dist/cjs/plugin/nova-plugin.js +0 -2
  4. package/dist/css/mccs.css +53 -27
  5. package/dist/css/nova-utils.css +8361 -8313
  6. package/dist/css/ocean.css +118 -92
  7. package/dist/css/spark.css +119 -93
  8. package/dist/generated/nova-tailwind-tokens.d.ts +36 -0
  9. package/dist/generated/nova-tailwind-tokens.js +36 -0
  10. package/dist/js/mccs_dark.d.ts +22 -10
  11. package/dist/js/mccs_dark.js +27 -15
  12. package/dist/js/mccs_light.d.ts +22 -10
  13. package/dist/js/mccs_light.js +29 -17
  14. package/dist/js/ocean_dark.d.ts +22 -10
  15. package/dist/js/ocean_dark.js +89 -77
  16. package/dist/js/ocean_light.d.ts +22 -10
  17. package/dist/js/ocean_light.js +94 -82
  18. package/dist/js/primitives.js +3 -3
  19. package/dist/js/spacings.d.ts +2 -0
  20. package/dist/js/spacings.js +2 -0
  21. package/dist/js/spark_dark.d.ts +22 -10
  22. package/dist/js/spark_dark.js +89 -77
  23. package/dist/js/spark_light.d.ts +22 -10
  24. package/dist/js/spark_light.js +96 -84
  25. package/dist/plugin/nova-plugin.js +0 -2
  26. package/package.json +1 -1
package/dist/css/spark.css CHANGED
@@ -148,7 +148,7 @@
148
148
  --color-rainbow-6-text: var(--color-crimson-200);
149
149
  --color-rainbow-6-icon: var(--color-crimson-200);
150
150
  --color-rainbow-6-border: var(--color-crimson-200);
151
- --color-rainbow-6-background: var(--color-crimson-700);
151
+ --color-rainbow-6-background: var(--color-crimson-800);
152
152
  --color-rainbow-5-text: var(--color-turquoise-500);
153
153
  --color-rainbow-5-icon: var(--color-turquoise-500);
154
154
  --color-rainbow-5-border: var(--color-turquoise-500);
@@ -170,44 +170,44 @@
170
170
  --color-rainbow-1-border: var(--color-amber-500);
171
171
  --color-rainbow-1-background: var(--color-amber-900);
172
172
  --color-focus-brand: var(--color-orange-500);
173
- --color-feedback-success-low-text: var(--color-status-green-300);
174
- --color-feedback-success-low-icon: var(--color-status-green-300);
175
- --color-feedback-success-low-border: var(--color-status-green-300);
173
+ --color-feedback-success-low-text: var(--color-status-green-400);
174
+ --color-feedback-success-low-icon: var(--color-status-green-400);
175
+ --color-feedback-success-low-border: var(--color-status-green-400);
176
176
  --color-feedback-success-low-background: var(--color-status-green-900);
177
- --color-feedback-success-high-text: var(--color-base-black);
178
- --color-feedback-success-high-icon: var(--color-base-black);
177
+ --color-feedback-success-high-text: var(--color-status-green-800);
178
+ --color-feedback-success-high-icon: var(--color-status-green-800);
179
179
  --color-feedback-success-high-border: var(--color-status-green-300);
180
180
  --color-feedback-success-high-background: var(--color-status-green-300);
181
- --color-feedback-warning-low-text: var(--color-status-yellow-300);
182
- --color-feedback-warning-low-icon: var(--color-status-yellow-300);
183
- --color-feedback-warning-low-border: var(--color-status-yellow-300);
181
+ --color-feedback-warning-low-text: var(--color-status-yellow-500);
182
+ --color-feedback-warning-low-icon: var(--color-status-yellow-500);
183
+ --color-feedback-warning-low-border: var(--color-status-yellow-500);
184
184
  --color-feedback-warning-low-background: var(--color-status-yellow-900);
185
- --color-feedback-warning-high-text: var(--color-base-black);
186
- --color-feedback-warning-high-icon: var(--color-base-black);
187
- --color-feedback-warning-high-border: var(--color-status-yellow-300);
188
- --color-feedback-warning-high-background: var(--color-status-yellow-300);
189
- --color-feedback-neutral-low-text: var(--color-gray-spark-300);
190
- --color-feedback-neutral-low-icon: var(--color-gray-spark-300);
191
- --color-feedback-neutral-low-border: var(--color-gray-spark-300);
192
- --color-feedback-neutral-low-background: var(--color-gray-spark-650);
193
- --color-feedback-neutral-high-text: var(--color-base-black);
194
- --color-feedback-neutral-high-icon: var(--color-base-black);
195
- --color-feedback-neutral-high-border: var(--color-gray-spark-300);
196
- --color-feedback-neutral-high-background: var(--color-gray-spark-300);
197
- --color-feedback-error-low-text: var(--color-status-red-400);
198
- --color-feedback-error-low-icon: var(--color-status-red-400);
199
- --color-feedback-error-low-border: var(--color-status-red-400);
185
+ --color-feedback-warning-high-text: var(--color-status-yellow-900);
186
+ --color-feedback-warning-high-icon: var(--color-status-yellow-900);
187
+ --color-feedback-warning-high-border: var(--color-status-yellow-500);
188
+ --color-feedback-warning-high-background: var(--color-status-yellow-500);
189
+ --color-feedback-neutral-low-text: var(--color-gray-spark-250);
190
+ --color-feedback-neutral-low-icon: var(--color-gray-spark-250);
191
+ --color-feedback-neutral-low-border: var(--color-gray-spark-250);
192
+ --color-feedback-neutral-low-background: var(--color-gray-spark-800);
193
+ --color-feedback-neutral-high-text: var(--color-gray-spark-800);
194
+ --color-feedback-neutral-high-icon: var(--color-gray-spark-800);
195
+ --color-feedback-neutral-high-border: var(--color-gray-spark-250);
196
+ --color-feedback-neutral-high-background: var(--color-gray-spark-250);
197
+ --color-feedback-error-low-text: var(--color-status-red-300);
198
+ --color-feedback-error-low-icon: var(--color-status-red-300);
199
+ --color-feedback-error-low-border: var(--color-status-red-300);
200
200
  --color-feedback-error-low-background: var(--color-status-red-900);
201
- --color-feedback-error-high-text: var(--color-base-black);
202
- --color-feedback-error-high-icon: var(--color-base-black);
203
- --color-feedback-error-high-border: var(--color-status-red-400);
204
- --color-feedback-error-high-background: var(--color-status-red-400);
201
+ --color-feedback-error-high-text: var(--color-status-red-900);
202
+ --color-feedback-error-high-icon: var(--color-status-red-900);
203
+ --color-feedback-error-high-border: var(--color-status-red-300);
204
+ --color-feedback-error-high-background: var(--color-status-red-300);
205
205
  --color-feedback-information-low-text: var(--color-status-blue-300);
206
206
  --color-feedback-information-low-icon: var(--color-status-blue-300);
207
207
  --color-feedback-information-low-border: var(--color-status-blue-300);
208
208
  --color-feedback-information-low-background: var(--color-status-blue-900);
209
- --color-feedback-information-high-text: var(--color-base-black);
210
- --color-feedback-information-high-icon: var(--color-base-black);
209
+ --color-feedback-information-high-text: var(--color-status-blue-800);
210
+ --color-feedback-information-high-icon: var(--color-status-blue-800);
211
211
  --color-feedback-information-high-border: var(--color-status-blue-300);
212
212
  --color-feedback-information-high-background: var(--color-status-blue-300);
213
213
  --color-chart-10: var(--color-crimson-500);
@@ -260,14 +260,20 @@
260
260
  --color-level-20-background: var(--color-gray-spark-700);
261
261
  --color-level-15-background: var(--color-gray-spark-750);
262
262
  --color-level-10-background: var(--color-gray-spark-800);
263
- --color-interaction-link-inverted-icon-hover: var(--color-orange-500);
264
- --color-interaction-link-inverted-text-hover: var(--color-orange-500);
265
- --color-interaction-link-low-icon-hover: var(--color-orange-500);
263
+ --color-interaction-link-inverted-text-visited: var(--color-orange-400);
264
+ --color-interaction-link-inverted-text-hover: var(--color-orange-600);
265
+ --color-interaction-link-inverted-icon-visited: var(--color-orange-400);
266
+ --color-interaction-link-inverted-icon-hover: var(--color-orange-600);
267
+ --color-interaction-link-low-text-visited: var(--color-orange-700);
266
268
  --color-interaction-link-low-text-hover: var(--color-orange-500);
267
- --color-interaction-link-high-icon-hover: var(--color-orange-400);
268
- --color-interaction-link-high-icon: var(--color-orange-500);
269
+ --color-interaction-link-low-icon-visited: var(--color-orange-700);
270
+ --color-interaction-link-low-icon-hover: var(--color-orange-500);
271
+ --color-interaction-link-high-text-visited: var(--color-orange-700);
269
272
  --color-interaction-link-high-text-hover: var(--color-orange-400);
270
273
  --color-interaction-link-high-text: var(--color-orange-500);
274
+ --color-interaction-link-high-icon-visited: var(--color-orange-700);
275
+ --color-interaction-link-high-icon-hover: var(--color-orange-400);
276
+ --color-interaction-link-high-icon: var(--color-orange-500);
271
277
  --color-interaction-container-neutral-text-active: var(--color-orange-400);
272
278
  --color-interaction-container-neutral-icon-active: var(--color-orange-400);
273
279
  --color-interaction-container-neutral-border-active: var(--color-orange-400);
@@ -322,7 +328,11 @@
322
328
  --components-menu-contextual-border: var(--color-content-low-border);
323
329
  --components-menu-contextual-background: var(--color-level-00-background);
324
330
  --components-calendar-background: var(--color-level-00-background);
325
- --components-calendar-cell-text-today: var(--color-interaction-container-neutral-text-active);
331
+ --components-calendar-weeks-text-hover: var(--color-content-high-text);
332
+ --components-calendar-weeks-text: var(--color-content-high-text);
333
+ --components-calendar-weeks-background-hover: var(--color-level-15-background);
334
+ --components-calendar-weeks-background: var(--color-level-10-background);
335
+ --components-calendar-cell-text-today: var(--color-content-high-text);
326
336
  --components-calendar-cell-text-outside-month: var(--color-content-lower-text);
327
337
  --components-calendar-cell-text-in-range: var(--color-interaction-container-branded-low-text-active);
328
338
  --components-calendar-cell-text-selected: var(--color-interaction-container-branded-high-text-active);
@@ -332,10 +342,6 @@
332
342
  --components-calendar-cell-background-hover: var(--color-interaction-container-branded-low-background-hover);
333
343
  --components-calendar-cell-background-in-range: var(--color-interaction-container-branded-low-background-active);
334
344
  --components-calendar-cell-background-selected: var(--color-interaction-container-branded-high-background-active);
335
- --components-calendar-weeks-text-hover: var(--color-content-high-text);
336
- --components-calendar-weeks-text: var(--color-content-high-text);
337
- --components-calendar-weeks-background-hover: var(--color-level-15-background);
338
- --components-calendar-weeks-background: var(--color-level-10-background);
339
345
  --components-calendar-header-text: var(--color-content-high-text);
340
346
  --components-calendar-border: var(--color-content-low-border);
341
347
  --components-field-time-border-active: var(--color-interaction-container-neutral-icon-active);
@@ -487,10 +493,16 @@
487
493
  --color-focus-destructive: var(--color-feedback-error-high-border);
488
494
  --color-focus-background-inverted: var(--color-level-inverted-00-background);
489
495
  --color-focus-background: var(--color-level-00-background);
490
- --color-interaction-link-inverted-icon: var(--color-content-inverted-medium-icon);
496
+ --color-interaction-link-inverted-text-inactive: var(--color-content-inverted-low-text);
491
497
  --color-interaction-link-inverted-text: var(--color-content-inverted-medium-text);
492
- --color-interaction-link-low-icon: var(--color-content-high-text);
498
+ --color-interaction-link-inverted-icon-inactive: var(--color-content-inverted-low-icon);
499
+ --color-interaction-link-inverted-icon: var(--color-content-inverted-medium-icon);
500
+ --color-interaction-link-low-text-inactive: var(--color-content-low-text);
493
501
  --color-interaction-link-low-text: var(--color-content-high-text);
502
+ --color-interaction-link-low-icon-inactive: var(--color-content-low-icon);
503
+ --color-interaction-link-low-icon: var(--color-content-high-text);
504
+ --color-interaction-link-high-text-inactive: var(--color-content-low-text);
505
+ --color-interaction-link-high-icon-inactive: var(--color-content-low-icon);
494
506
  --color-interaction-container-neutral-text-hover: var(--color-content-medium-text);
495
507
  --color-interaction-container-neutral-text: var(--color-content-low-text);
496
508
  --color-interaction-container-neutral-icon-hover: var(--color-content-medium-text);
@@ -685,7 +697,7 @@
685
697
  --color-rainbow-5-text: var(--color-turquoise-800);
686
698
  --color-rainbow-5-icon: var(--color-turquoise-800);
687
699
  --color-rainbow-5-border: var(--color-turquoise-800);
688
- --color-rainbow-5-background: var(--color-turquoise-100);
700
+ --color-rainbow-5-background: var(--color-turquoise-50);
689
701
  --color-rainbow-4-text: var(--color-red-500);
690
702
  --color-rainbow-4-icon: var(--color-red-500);
691
703
  --color-rainbow-4-border: var(--color-red-500);
@@ -698,51 +710,51 @@
698
710
  --color-rainbow-2-icon: var(--color-orange-700);
699
711
  --color-rainbow-2-border: var(--color-orange-700);
700
712
  --color-rainbow-2-background: var(--color-orange-50);
701
- --color-rainbow-1-text: var(--color-amber-600);
702
- --color-rainbow-1-icon: var(--color-amber-600);
703
- --color-rainbow-1-border: var(--color-amber-600);
713
+ --color-rainbow-1-text: var(--color-amber-700);
714
+ --color-rainbow-1-icon: var(--color-amber-700);
715
+ --color-rainbow-1-border: var(--color-amber-700);
704
716
  --color-rainbow-1-background: var(--color-amber-50);
705
717
  --color-focus-brand: var(--color-orange-500);
706
- --color-feedback-success-low-text: var(--color-status-green-500);
707
- --color-feedback-success-low-icon: var(--color-status-green-500);
708
- --color-feedback-success-low-border: var(--color-status-green-500);
718
+ --color-feedback-success-low-text: var(--color-status-green-600);
719
+ --color-feedback-success-low-icon: var(--color-status-green-600);
720
+ --color-feedback-success-low-border: var(--color-status-green-600);
709
721
  --color-feedback-success-low-background: var(--color-status-green-50);
710
- --color-feedback-success-high-text: var(--color-base-white);
711
- --color-feedback-success-high-icon: var(--color-base-white);
722
+ --color-feedback-success-high-text: var(--color-status-green-800);
723
+ --color-feedback-success-high-icon: var(--color-status-green-800);
712
724
  --color-feedback-success-high-border: var(--color-status-green-400);
713
725
  --color-feedback-success-high-background: var(--color-status-green-400);
714
- --color-feedback-warning-low-text: var(--color-status-yellow-500);
715
- --color-feedback-warning-low-icon: var(--color-status-yellow-500);
716
- --color-feedback-warning-low-border: var(--color-status-yellow-500);
726
+ --color-feedback-warning-low-text: var(--color-status-yellow-700);
727
+ --color-feedback-warning-low-icon: var(--color-status-yellow-700);
728
+ --color-feedback-warning-low-border: var(--color-status-yellow-700);
717
729
  --color-feedback-warning-low-background: var(--color-status-yellow-50);
718
- --color-feedback-warning-high-text: var(--color-base-white);
719
- --color-feedback-warning-high-icon: var(--color-base-white);
720
- --color-feedback-warning-high-border: var(--color-status-yellow-400);
721
- --color-feedback-warning-high-background: var(--color-status-yellow-400);
722
- --color-feedback-neutral-low-text: var(--color-gray-spark-400);
723
- --color-feedback-neutral-low-icon: var(--color-gray-spark-400);
724
- --color-feedback-neutral-low-border: var(--color-gray-spark-400);
725
- --color-feedback-neutral-low-background: var(--color-gray-spark-75);
726
- --color-feedback-neutral-high-text: var(--color-base-white);
727
- --color-feedback-neutral-high-icon: var(--color-base-white);
728
- --color-feedback-neutral-high-border: var(--color-gray-spark-400);
729
- --color-feedback-neutral-high-background: var(--color-gray-spark-400);
730
- --color-feedback-error-low-text: var(--color-status-red-500);
731
- --color-feedback-error-low-icon: var(--color-status-red-500);
732
- --color-feedback-error-low-border: var(--color-status-red-500);
730
+ --color-feedback-warning-high-text: var(--color-status-yellow-900);
731
+ --color-feedback-warning-high-icon: var(--color-status-yellow-900);
732
+ --color-feedback-warning-high-border: var(--color-status-yellow-500);
733
+ --color-feedback-warning-high-background: var(--color-status-yellow-500);
734
+ --color-feedback-neutral-low-text: var(--color-gray-spark-450);
735
+ --color-feedback-neutral-low-icon: var(--color-gray-spark-450);
736
+ --color-feedback-neutral-low-border: var(--color-gray-spark-450);
737
+ --color-feedback-neutral-low-background: var(--color-gray-spark-50);
738
+ --color-feedback-neutral-high-text: var(--color-gray-spark-800);
739
+ --color-feedback-neutral-high-icon: var(--color-gray-spark-800);
740
+ --color-feedback-neutral-high-border: var(--color-gray-spark-250);
741
+ --color-feedback-neutral-high-background: var(--color-gray-spark-250);
742
+ --color-feedback-error-low-text: var(--color-status-red-600);
743
+ --color-feedback-error-low-icon: var(--color-status-red-600);
744
+ --color-feedback-error-low-border: var(--color-status-red-600);
733
745
  --color-feedback-error-low-background: var(--color-status-red-50);
734
- --color-feedback-error-high-text: var(--color-base-white);
735
- --color-feedback-error-high-icon: var(--color-base-white);
736
- --color-feedback-error-high-border: var(--color-status-red-500);
737
- --color-feedback-error-high-background: var(--color-status-red-500);
746
+ --color-feedback-error-high-text: var(--color-status-red-900);
747
+ --color-feedback-error-high-icon: var(--color-status-red-900);
748
+ --color-feedback-error-high-border: var(--color-status-red-300);
749
+ --color-feedback-error-high-background: var(--color-status-red-300);
738
750
  --color-feedback-information-low-text: var(--color-status-blue-500);
739
751
  --color-feedback-information-low-icon: var(--color-status-blue-500);
740
752
  --color-feedback-information-low-border: var(--color-status-blue-500);
741
753
  --color-feedback-information-low-background: var(--color-status-blue-50);
742
- --color-feedback-information-high-text: var(--color-base-white);
743
- --color-feedback-information-high-icon: var(--color-base-white);
744
- --color-feedback-information-high-border: var(--color-status-blue-400);
745
- --color-feedback-information-high-background: var(--color-status-blue-400);
754
+ --color-feedback-information-high-text: var(--color-status-blue-800);
755
+ --color-feedback-information-high-icon: var(--color-status-blue-800);
756
+ --color-feedback-information-high-border: var(--color-status-blue-300);
757
+ --color-feedback-information-high-background: var(--color-status-blue-300);
746
758
  --color-chart-10: var(--color-crimson-500);
747
759
  --color-chart-9: var(--color-dark-blue-500);
748
760
  --color-chart-8: var(--color-orange-500);
@@ -793,14 +805,20 @@
793
805
  --color-level-20-background: var(--color-gray-spark-00);
794
806
  --color-level-15-background: var(--color-gray-spark-75);
795
807
  --color-level-10-background: var(--color-gray-spark-50);
796
- --color-interaction-link-inverted-icon-hover: var(--color-orange-500);
808
+ --color-interaction-link-inverted-text-visited: var(--color-orange-700);
797
809
  --color-interaction-link-inverted-text-hover: var(--color-orange-500);
798
- --color-interaction-link-low-icon-hover: var(--color-orange-500);
799
- --color-interaction-link-low-text-hover: var(--color-orange-500);
800
- --color-interaction-link-high-icon-hover: var(--color-orange-600);
801
- --color-interaction-link-high-icon: var(--color-orange-500);
802
- --color-interaction-link-high-text-hover: var(--color-orange-600);
803
- --color-interaction-link-high-text: var(--color-orange-500);
810
+ --color-interaction-link-inverted-icon-visited: var(--color-orange-700);
811
+ --color-interaction-link-inverted-icon-hover: var(--color-orange-500);
812
+ --color-interaction-link-low-text-visited: var(--color-orange-400);
813
+ --color-interaction-link-low-text-hover: var(--color-orange-600);
814
+ --color-interaction-link-low-icon-visited: var(--color-orange-400);
815
+ --color-interaction-link-low-icon-hover: var(--color-orange-600);
816
+ --color-interaction-link-high-text-visited: var(--color-orange-400);
817
+ --color-interaction-link-high-text-hover: var(--color-orange-700);
818
+ --color-interaction-link-high-text: var(--color-orange-600);
819
+ --color-interaction-link-high-icon-visited: var(--color-orange-400);
820
+ --color-interaction-link-high-icon-hover: var(--color-orange-700);
821
+ --color-interaction-link-high-icon: var(--color-orange-600);
804
822
  --color-interaction-container-neutral-text-active: var(--color-orange-600);
805
823
  --color-interaction-container-neutral-icon-active: var(--color-orange-600);
806
824
  --color-interaction-container-neutral-border-active: var(--color-orange-600);
@@ -855,6 +873,10 @@
855
873
  --components-menu-contextual-border: var(--color-content-low-border);
856
874
  --components-menu-contextual-background: var(--color-level-00-background);
857
875
  --components-calendar-background: var(--color-level-00-background);
876
+ --components-calendar-weeks-text-hover: var(--color-content-high-text);
877
+ --components-calendar-weeks-text: var(--color-content-high-text);
878
+ --components-calendar-weeks-background-hover: var(--color-level-15-background);
879
+ --components-calendar-weeks-background: var(--color-level-10-background);
858
880
  --components-calendar-cell-text-today: var(--color-content-high-text);
859
881
  --components-calendar-cell-text-outside-month: var(--color-content-lower-text);
860
882
  --components-calendar-cell-text-in-range: var(--color-interaction-container-branded-low-text-active);
@@ -864,10 +886,6 @@
864
886
  --components-calendar-cell-background-hover: var(--color-interaction-container-branded-low-background-hover);
865
887
  --components-calendar-cell-background-in-range: var(--color-interaction-container-branded-low-background-active);
866
888
  --components-calendar-cell-background-selected: var(--color-interaction-container-branded-high-background-active);
867
- --components-calendar-weeks-text-hover: var(--color-content-high-text);
868
- --components-calendar-weeks-text: var(--color-content-high-text);
869
- --components-calendar-weeks-background-hover: var(--color-level-15-background);
870
- --components-calendar-weeks-background: var(--color-level-10-background);
871
889
  --components-calendar-header-text: var(--color-content-high-text);
872
890
  --components-calendar-border: var(--color-content-low-border);
873
891
  --components-field-time-border-active: var(--color-interaction-container-neutral-icon-active);
@@ -1021,10 +1039,16 @@
1021
1039
  --color-focus-destructive: var(--color-feedback-error-high-border);
1022
1040
  --color-focus-background-inverted: var(--color-level-inverted-00-background);
1023
1041
  --color-focus-background: var(--color-level-00-background);
1024
- --color-interaction-link-inverted-icon: var(--color-content-inverted-medium-icon);
1042
+ --color-interaction-link-inverted-text-inactive: var(--color-content-inverted-low-text);
1025
1043
  --color-interaction-link-inverted-text: var(--color-content-inverted-medium-text);
1026
- --color-interaction-link-low-icon: var(--color-content-high-text);
1044
+ --color-interaction-link-inverted-icon-inactive: var(--color-content-inverted-low-icon);
1045
+ --color-interaction-link-inverted-icon: var(--color-content-inverted-medium-icon);
1046
+ --color-interaction-link-low-text-inactive: var(--color-content-low-text);
1027
1047
  --color-interaction-link-low-text: var(--color-content-high-text);
1048
+ --color-interaction-link-low-icon-inactive: var(--color-content-low-icon);
1049
+ --color-interaction-link-low-icon: var(--color-content-high-text);
1050
+ --color-interaction-link-high-text-inactive: var(--color-content-low-text);
1051
+ --color-interaction-link-high-icon-inactive: var(--color-content-low-icon);
1028
1052
  --color-interaction-container-neutral-text-hover: var(--color-content-medium-text);
1029
1053
  --color-interaction-container-neutral-text: var(--color-content-low-text);
1030
1054
  --color-interaction-container-neutral-icon-hover: var(--color-content-medium-text);
@@ -1154,7 +1178,7 @@
1154
1178
  --color-yellow-200: #ffe286;
1155
1179
  --color-yellow-100: #ffecb3;
1156
1180
  --color-yellow-50: #fff7df;
1157
- --color-turquoise-900: #203330;
1181
+ --color-turquoise-900: #1c2b28;
1158
1182
  --color-turquoise-800: #32504c;
1159
1183
  --color-turquoise-700: #456e68;
1160
1184
  --color-turquoise-600: #578b84;
@@ -1309,8 +1333,8 @@
1309
1333
  --color-crimson-300: #bd597c;
1310
1334
  --color-crimson-200: #cf869f;
1311
1335
  --color-crimson-100: #e0b3c2;
1312
- --color-crimson-50: #f2dfe6;
1313
- --color-amber-900: #482608;
1336
+ --color-crimson-50: #f7e9ee;
1337
+ --color-amber-900: #432306;
1314
1338
  --color-amber-800: #723d0c;
1315
1339
  --color-amber-700: #9c5311;
1316
1340
  --color-amber-600: #c66a15;
@@ -1415,7 +1439,9 @@
1415
1439
  --breadcrumb-padding-y: var(--spacing-1);
1416
1440
  --badge-radius: var(--radius-rounded-full);
1417
1441
  --badge-padding-y: var(--spacing-1);
1442
+ --badge-padding-icon-only-x: var(--spacing-1);
1418
1443
  --badge-padding-x: var(--spacing-2);
1444
+ --badge-gap-icon-only-x: var(--spacing-0);
1419
1445
  --badge-gap-x: var(--spacing-1);
1420
1446
  --avatar-xl-size: var(--spacing-16);
1421
1447
  --avatar-xl-icon-size: var(--spacing-11);
package/dist/generated/nova-tailwind-tokens.d.ts CHANGED
@@ -297,36 +297,72 @@ export declare const NOVA_TAILWIND_TOKENS: {
297
297
  '.icon-interaction-link-high-hover': {
298
298
  color: string;
299
299
  };
300
+ '.icon-interaction-link-high-inactive': {
301
+ color: string;
302
+ };
303
+ '.icon-interaction-link-high-visited': {
304
+ color: string;
305
+ };
300
306
  '.text-interaction-link-high': {
301
307
  color: string;
302
308
  };
303
309
  '.text-interaction-link-high-hover': {
304
310
  color: string;
305
311
  };
312
+ '.text-interaction-link-high-inactive': {
313
+ color: string;
314
+ };
315
+ '.text-interaction-link-high-visited': {
316
+ color: string;
317
+ };
306
318
  '.icon-interaction-link-inverted': {
307
319
  color: string;
308
320
  };
309
321
  '.icon-interaction-link-inverted-hover': {
310
322
  color: string;
311
323
  };
324
+ '.icon-interaction-link-inverted-inactive': {
325
+ color: string;
326
+ };
327
+ '.icon-interaction-link-inverted-visited': {
328
+ color: string;
329
+ };
312
330
  '.text-interaction-link-inverted': {
313
331
  color: string;
314
332
  };
315
333
  '.text-interaction-link-inverted-hover': {
316
334
  color: string;
317
335
  };
336
+ '.text-interaction-link-inverted-inactive': {
337
+ color: string;
338
+ };
339
+ '.text-interaction-link-inverted-visited': {
340
+ color: string;
341
+ };
318
342
  '.icon-interaction-link-low': {
319
343
  color: string;
320
344
  };
321
345
  '.icon-interaction-link-low-hover': {
322
346
  color: string;
323
347
  };
348
+ '.icon-interaction-link-low-inactive': {
349
+ color: string;
350
+ };
351
+ '.icon-interaction-link-low-visited': {
352
+ color: string;
353
+ };
324
354
  '.text-interaction-link-low': {
325
355
  color: string;
326
356
  };
327
357
  '.text-interaction-link-low-hover': {
328
358
  color: string;
329
359
  };
360
+ '.text-interaction-link-low-inactive': {
361
+ color: string;
362
+ };
363
+ '.text-interaction-link-low-visited': {
364
+ color: string;
365
+ };
330
366
  '.bg-level-00': {
331
367
  'background-color': string;
332
368
  };
package/dist/generated/nova-tailwind-tokens.js CHANGED
@@ -298,36 +298,72 @@ export const NOVA_TAILWIND_TOKENS = {
298
298
  '.icon-interaction-link-high-hover': {
299
299
  'color': 'var(--color-interaction-link-high-icon-hover)'
300
300
  },
301
+ '.icon-interaction-link-high-inactive': {
302
+ 'color': 'var(--color-interaction-link-high-icon-inactive)'
303
+ },
304
+ '.icon-interaction-link-high-visited': {
305
+ 'color': 'var(--color-interaction-link-high-icon-visited)'
306
+ },
301
307
  '.text-interaction-link-high': {
302
308
  'color': 'var(--color-interaction-link-high-text)'
303
309
  },
304
310
  '.text-interaction-link-high-hover': {
305
311
  'color': 'var(--color-interaction-link-high-text-hover)'
306
312
  },
313
+ '.text-interaction-link-high-inactive': {
314
+ 'color': 'var(--color-interaction-link-high-text-inactive)'
315
+ },
316
+ '.text-interaction-link-high-visited': {
317
+ 'color': 'var(--color-interaction-link-high-text-visited)'
318
+ },
307
319
  '.icon-interaction-link-inverted': {
308
320
  'color': 'var(--color-interaction-link-inverted-icon)'
309
321
  },
310
322
  '.icon-interaction-link-inverted-hover': {
311
323
  'color': 'var(--color-interaction-link-inverted-icon-hover)'
312
324
  },
325
+ '.icon-interaction-link-inverted-inactive': {
326
+ 'color': 'var(--color-interaction-link-inverted-icon-inactive)'
327
+ },
328
+ '.icon-interaction-link-inverted-visited': {
329
+ 'color': 'var(--color-interaction-link-inverted-icon-visited)'
330
+ },
313
331
  '.text-interaction-link-inverted': {
314
332
  'color': 'var(--color-interaction-link-inverted-text)'
315
333
  },
316
334
  '.text-interaction-link-inverted-hover': {
317
335
  'color': 'var(--color-interaction-link-inverted-text-hover)'
318
336
  },
337
+ '.text-interaction-link-inverted-inactive': {
338
+ 'color': 'var(--color-interaction-link-inverted-text-inactive)'
339
+ },
340
+ '.text-interaction-link-inverted-visited': {
341
+ 'color': 'var(--color-interaction-link-inverted-text-visited)'
342
+ },
319
343
  '.icon-interaction-link-low': {
320
344
  'color': 'var(--color-interaction-link-low-icon)'
321
345
  },
322
346
  '.icon-interaction-link-low-hover': {
323
347
  'color': 'var(--color-interaction-link-low-icon-hover)'
324
348
  },
349
+ '.icon-interaction-link-low-inactive': {
350
+ 'color': 'var(--color-interaction-link-low-icon-inactive)'
351
+ },
352
+ '.icon-interaction-link-low-visited': {
353
+ 'color': 'var(--color-interaction-link-low-icon-visited)'
354
+ },
325
355
  '.text-interaction-link-low': {
326
356
  'color': 'var(--color-interaction-link-low-text)'
327
357
  },
328
358
  '.text-interaction-link-low-hover': {
329
359
  'color': 'var(--color-interaction-link-low-text-hover)'
330
360
  },
361
+ '.text-interaction-link-low-inactive': {
362
+ 'color': 'var(--color-interaction-link-low-text-inactive)'
363
+ },
364
+ '.text-interaction-link-low-visited': {
365
+ 'color': 'var(--color-interaction-link-low-text-visited)'
366
+ },
331
367
  '.bg-level-00': {
332
368
  'background-color': 'var(--color-level-00-background)'
333
369
  },
package/dist/js/mccs_dark.d.ts CHANGED
@@ -38,18 +38,30 @@ export const ColorInteractionContainerNeutralIconHover : string;
38
38
  export const ColorInteractionContainerNeutralText : string;
39
39
  export const ColorInteractionContainerNeutralTextActive : string;
40
40
  export const ColorInteractionContainerNeutralTextHover : string;
41
- export const ColorInteractionLinkHighText : string;
42
- export const ColorInteractionLinkHighTextHover : string;
43
41
  export const ColorInteractionLinkHighIcon : string;
44
42
  export const ColorInteractionLinkHighIconHover : string;
45
- export const ColorInteractionLinkLowText : string;
46
- export const ColorInteractionLinkLowTextHover : string;
43
+ export const ColorInteractionLinkHighIconInactive : string;
44
+ export const ColorInteractionLinkHighIconVisited : string;
45
+ export const ColorInteractionLinkHighText : string;
46
+ export const ColorInteractionLinkHighTextHover : string;
47
+ export const ColorInteractionLinkHighTextInactive : string;
48
+ export const ColorInteractionLinkHighTextVisited : string;
47
49
  export const ColorInteractionLinkLowIcon : string;
48
50
  export const ColorInteractionLinkLowIconHover : string;
49
- export const ColorInteractionLinkInvertedText : string;
50
- export const ColorInteractionLinkInvertedTextHover : string;
51
+ export const ColorInteractionLinkLowIconInactive : string;
52
+ export const ColorInteractionLinkLowIconVisited : string;
53
+ export const ColorInteractionLinkLowText : string;
54
+ export const ColorInteractionLinkLowTextHover : string;
55
+ export const ColorInteractionLinkLowTextInactive : string;
56
+ export const ColorInteractionLinkLowTextVisited : string;
51
57
  export const ColorInteractionLinkInvertedIcon : string;
52
58
  export const ColorInteractionLinkInvertedIconHover : string;
59
+ export const ColorInteractionLinkInvertedIconInactive : 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;
53
65
  export const ColorBlack : string;
54
66
  export const ColorWhite : string;
55
67
  export const ColorTransparent : string;
@@ -455,10 +467,6 @@ export const ComponentsFieldTimeTextActive : string;
455
467
  export const ComponentsFieldTimeBorderActive : string;
456
468
  export const ComponentsCalendarBorder : string;
457
469
  export const ComponentsCalendarHeaderText : string;
458
- export const ComponentsCalendarWeeksBackground : string;
459
- export const ComponentsCalendarWeeksBackgroundHover : string;
460
- export const ComponentsCalendarWeeksText : string;
461
- export const ComponentsCalendarWeeksTextHover : string;
462
470
  export const ComponentsCalendarCellBackground : string;
463
471
  export const ComponentsCalendarCellBackgroundSelected : string;
464
472
  export const ComponentsCalendarCellBackgroundInRange : string;
@@ -473,6 +481,10 @@ export const ComponentsCalendarCellTextInRange : string;
473
481
  export const ComponentsCalendarCellTextHover : string;
474
482
  export const ComponentsCalendarCellTextOutsideMonth : string;
475
483
  export const ComponentsCalendarCellTextToday : string;
484
+ export const ComponentsCalendarWeeksBackground : string;
485
+ export const ComponentsCalendarWeeksBackgroundHover : string;
486
+ export const ComponentsCalendarWeeksText : string;
487
+ export const ComponentsCalendarWeeksTextHover : string;
476
488
  export const ComponentsCalendarBackground : string;
477
489
  export const ComponentsMenuContextualBackground : string;
478
490
  export const ComponentsMenuContextualBorder : string;
package/dist/js/mccs_dark.js CHANGED
@@ -38,18 +38,30 @@ export const ColorInteractionContainerNeutralIconHover = "#bac1c4";
38
38
  export const ColorInteractionContainerNeutralText = "#889499";
39
39
  export const ColorInteractionContainerNeutralTextActive = "#71b2bc";
40
40
  export const ColorInteractionContainerNeutralTextHover = "#bac1c4";
41
- export const ColorInteractionLinkHighText = "#4b9eaa";
42
- export const ColorInteractionLinkHighTextHover = "#71b2bc";
43
41
  export const ColorInteractionLinkHighIcon = "#4b9eaa";
44
42
  export const ColorInteractionLinkHighIconHover = "#71b2bc";
45
- export const ColorInteractionLinkLowText = "#f5f6f7";
46
- export const ColorInteractionLinkLowTextHover = "#4b9eaa";
43
+ export const ColorInteractionLinkHighIconInactive = "#889499";
44
+ export const ColorInteractionLinkHighIconVisited = "#1f717d";
45
+ export const ColorInteractionLinkHighText = "#4b9eaa";
46
+ export const ColorInteractionLinkHighTextHover = "#71b2bc";
47
+ export const ColorInteractionLinkHighTextInactive = "#889499";
48
+ export const ColorInteractionLinkHighTextVisited = "#1f717d";
47
49
  export const ColorInteractionLinkLowIcon = "#f5f6f7";
48
50
  export const ColorInteractionLinkLowIconHover = "#4b9eaa";
49
- export const ColorInteractionLinkInvertedText = "#27353b";
50
- export const ColorInteractionLinkInvertedTextHover = "#4b9eaa";
51
+ export const ColorInteractionLinkLowIconInactive = "#889499";
52
+ export const ColorInteractionLinkLowIconVisited = "#1f717d";
53
+ export const ColorInteractionLinkLowText = "#f5f6f7";
54
+ export const ColorInteractionLinkLowTextHover = "#4b9eaa";
55
+ export const ColorInteractionLinkLowTextInactive = "#889499";
56
+ export const ColorInteractionLinkLowTextVisited = "#1f717d";
51
57
  export const ColorInteractionLinkInvertedIcon = "#27353b";
52
58
  export const ColorInteractionLinkInvertedIconHover = "#4b9eaa";
59
+ export const ColorInteractionLinkInvertedIconInactive = "#3f555e";
60
+ export const ColorInteractionLinkInvertedIconVisited = "#1f717d";
61
+ export const ColorInteractionLinkInvertedText = "#27353b";
62
+ export const ColorInteractionLinkInvertedTextHover = "#4b9eaa";
63
+ export const ColorInteractionLinkInvertedTextInactive = "#3f555e";
64
+ export const ColorInteractionLinkInvertedTextVisited = "#4b9eaa";
53
65
  export const ColorBlack = "#000000";
54
66
  export const ColorWhite = "#ffffff";
55
67
  export const ColorTransparent = "#ffffff";
@@ -148,7 +160,7 @@ export const ColorFocusBackground = "#0b0f11";
148
160
  export const ColorFocusBackgroundInverted = "#ffffff";
149
161
  export const ColorFocusDestructive = "#ff3d3d";
150
162
  export const ColorFocusSuccess = "#6bde71";
151
- export const ColorRainbow1Background = "#482608";
163
+ export const ColorRainbow1Background = "#432306";
152
164
  export const ColorRainbow1Border = "#f0801a";
153
165
  export const ColorRainbow1Icon = "#f0801a";
154
166
  export const ColorRainbow1Text = "#f0801a";
@@ -164,7 +176,7 @@ export const ColorRainbow4Background = "#610e0e";
164
176
  export const ColorRainbow4Border = "#e79494";
165
177
  export const ColorRainbow4Icon = "#e79494";
166
178
  export const ColorRainbow4Text = "#e79494";
167
- export const ColorRainbow5Background = "#203330";
179
+ export const ColorRainbow5Background = "#1c2b28";
168
180
  export const ColorRainbow5Border = "#6aa9a0";
169
181
  export const ColorRainbow5Icon = "#6aa9a0";
170
182
  export const ColorRainbow5Text = "#6aa9a0";
@@ -413,11 +425,11 @@ export const ComponentsDatagridBodySubtext = "#889499";
413
425
  export const ComponentsDatagridBodyBackgroundDefault = "#ffffff";
414
426
  export const ComponentsDatagridBodyBackgroundActive = "#ffffff";
415
427
  export const ComponentsDatagridBodyBackgroundHover = "#ffffff";
416
- export const ComponentsAvatarBackground1 = "#482608";
428
+ export const ComponentsAvatarBackground1 = "#432306";
417
429
  export const ComponentsAvatarBackground2 = "#45190a";
418
430
  export const ComponentsAvatarBackground3 = "#4d3a00";
419
431
  export const ComponentsAvatarBackground4 = "#610e0e";
420
- export const ComponentsAvatarBackground5 = "#203330";
432
+ export const ComponentsAvatarBackground5 = "#1c2b28";
421
433
  export const ComponentsAvatarBackground6 = "#630022";
422
434
  export const ComponentsAvatarBackground7 = "#09400c";
423
435
  export const ComponentsAvatarBackground8 = "#124148";
@@ -455,10 +467,6 @@ export const ComponentsFieldTimeTextActive = "#71b2bc";
455
467
  export const ComponentsFieldTimeBorderActive = "#71b2bc";
456
468
  export const ComponentsCalendarBorder = "#394d55";
457
469
  export const ComponentsCalendarHeaderText = "#f5f6f7";
458
- export const ComponentsCalendarWeeksBackground = "#171f22";
459
- export const ComponentsCalendarWeeksBackgroundHover = "#1e272b";
460
- export const ComponentsCalendarWeeksText = "#eaeef0";
461
- export const ComponentsCalendarWeeksTextHover = "#f5f6f7";
462
470
  export const ComponentsCalendarCellBackground = "#ffffff";
463
471
  export const ComponentsCalendarCellBackgroundSelected = "#258998";
464
472
  export const ComponentsCalendarCellBackgroundInRange = "#ffffff";
@@ -472,7 +480,11 @@ export const ComponentsCalendarCellTextSelected = "#ffffff";
472
480
  export const ComponentsCalendarCellTextInRange = "#71b2bc";
473
481
  export const ComponentsCalendarCellTextHover = "#bac1c4";
474
482
  export const ComponentsCalendarCellTextOutsideMonth = "#617177";
475
- export const ComponentsCalendarCellTextToday = "#71b2bc";
483
+ export const ComponentsCalendarCellTextToday = "#f5f6f7";
484
+ export const ComponentsCalendarWeeksBackground = "#171f22";
485
+ export const ComponentsCalendarWeeksBackgroundHover = "#1e272b";
486
+ export const ComponentsCalendarWeeksText = "#eaeef0";
487
+ export const ComponentsCalendarWeeksTextHover = "#f5f6f7";
476
488
  export const ComponentsCalendarBackground = "#0b0f11";
477
489
  export const ComponentsMenuContextualBackground = "#0b0f11";
478
490
  export const ComponentsMenuContextualBorder = "#394d55";