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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. package/assets/icons/icon-sprite.svg +1 -1
  2. package/assets/nova-fonts.css +10 -1
  3. package/dist/cjs/generated/nova-tailwind-components.js +8 -1
  4. package/dist/css/nova-utils.css +5 -0
  5. package/dist/css/ocean.css +168 -126
  6. package/dist/css/spark.css +170 -128
  7. package/dist/generated/nova-tailwind-components.d.ts +5 -1
  8. package/dist/generated/nova-tailwind-components.js +8 -1
  9. package/dist/js/ocean_dark.d.ts +64 -64
  10. package/dist/js/ocean_dark.js +71 -71
  11. package/dist/js/ocean_light.d.ts +64 -64
  12. package/dist/js/ocean_light.js +64 -64
  13. package/dist/js/spacings.d.ts +50 -8
  14. package/dist/js/spacings.js +50 -8
  15. package/dist/js/spark_dark.d.ts +64 -64
  16. package/dist/js/spark_dark.js +72 -72
  17. package/dist/js/spark_light.d.ts +64 -64
  18. package/dist/js/spark_light.js +64 -64
  19. package/package.json +2 -1
package/dist/css/spark.css CHANGED
@@ -66,12 +66,10 @@
66
66
  --color-transparent: rgba(255, 255, 255, 0);
67
67
  --color-white: #ffffff;
68
68
  --color-black: #000000;
69
- --color-interaction-container-neutral-background: rgba(255, 255, 255, 0);
70
69
  --components-toggle-shape-hover: var(--color-gray-spark-300);
71
70
  --components-toggle-shape-default: var(--color-gray-spark-400);
72
71
  --components-toggle-background-disabled-checked: var(--color-gray-spark-600);
73
72
  --components-toggle-background-disabled: var(--color-gray-spark-600);
74
- --components-toggle-background-default: var(--color-interaction-container-neutral-background);
75
73
  --components-toggle-border-disabled-checked: var(--color-gray-spark-600);
76
74
  --components-toggle-border-disabled: var(--color-gray-spark-600);
77
75
  --components-toggle-border-hover: var(--color-gray-spark-300);
@@ -79,10 +77,6 @@
79
77
  --components-tooltip-border: var(--color-gray-spark-50);
80
78
  --components-tooltip-background: var(--color-gray-spark-50);
81
79
  --components-popover-background: var(--color-gray-spark-900);
82
- --components-menu-contextual-item-background: var(--color-interaction-container-neutral-background);
83
- --components-field-time-background-default: var(--color-interaction-container-neutral-background);
84
- --components-datagrid-body-background-default: var(--color-interaction-container-neutral-background);
85
- --components-datagrid-header-background: var(--color-interaction-container-neutral-background);
86
80
  --components-overlay-background: var(--color-gray-spark-650);
87
81
  --components-button-destructive-high-icon-hover: var(--color-base-black);
88
82
  --components-button-destructive-high-icon: var(--color-base-black);
@@ -106,8 +100,6 @@
106
100
  --components-loader-brand-background: var(--color-orange-900);
107
101
  --components-loader-white-foreground: var(--color-base-white);
108
102
  --components-list-dropdown-group-title-background: var(--color-transparent);
109
- --components-list-dropdown-item-background-disabled: var(--color-interaction-container-neutral-background);
110
- --components-list-dropdown-item-background-default: var(--color-interaction-container-neutral-background);
111
103
  --components-list-native-item-content-hover: var(--color-base-white);
112
104
  --components-list-native-item-content-default: var(--color-base-white);
113
105
  --components-form-shape-foreground-default: var(--color-base-black);
@@ -122,7 +114,6 @@
122
114
  --components-button-gr-as-complementary-text: var(--color-base-white);
123
115
  --components-button-gr-as-complementary-background-hover: var(--color-gray-spark-400);
124
116
  --components-button-gr-as-complementary-background: var(--color-gray-spark-450);
125
- --components-button-lower-background: var(--color-interaction-container-neutral-background);
126
117
  --color-dont-use-background: var(--color-gray-spark-900);
127
118
  --color-dont-use-content: var(--color-gray-spark-750);
128
119
  --color-dont-use-border: var(--color-gray-spark-750);
@@ -166,6 +157,47 @@
166
157
  --color-rainbow-1-icon: var(--color-amber-500);
167
158
  --color-rainbow-1-border: var(--color-amber-500);
168
159
  --color-rainbow-1-background: var(--color-amber-900);
160
+ --color-interaction-link-inverted-text-visited: var(--color-orange-400);
161
+ --color-interaction-link-inverted-text-hover: var(--color-orange-600);
162
+ --color-interaction-link-inverted-icon-visited: var(--color-orange-400);
163
+ --color-interaction-link-inverted-icon-hover: var(--color-orange-600);
164
+ --color-interaction-link-low-text-visited: var(--color-orange-400);
165
+ --color-interaction-link-low-text-hover: var(--color-orange-400);
166
+ --color-interaction-link-low-icon-visited: var(--color-orange-400);
167
+ --color-interaction-link-low-icon-hover: var(--color-orange-400);
168
+ --color-interaction-link-high-text-visited: var(--color-orange-400);
169
+ --color-interaction-link-high-text-hover: var(--color-orange-400);
170
+ --color-interaction-link-high-text: var(--color-orange-500);
171
+ --color-interaction-link-high-icon-visited: var(--color-orange-400);
172
+ --color-interaction-link-high-icon-hover: var(--color-orange-400);
173
+ --color-interaction-link-high-icon: var(--color-orange-500);
174
+ --color-interaction-container-neutral-text-active: var(--color-orange-400);
175
+ --color-interaction-container-neutral-icon-active: var(--color-orange-400);
176
+ --color-interaction-container-neutral-border-active: var(--color-orange-400);
177
+ --color-interaction-container-neutral-background-active: var(--color-orange-900);
178
+ --color-interaction-container-branded-low-text-hover: var(--color-orange-400);
179
+ --color-interaction-container-branded-low-text-active: var(--color-orange-400);
180
+ --color-interaction-container-branded-low-text: var(--color-orange-500);
181
+ --color-interaction-container-branded-low-icon-hover: var(--color-orange-400);
182
+ --color-interaction-container-branded-low-icon-active: var(--color-orange-400);
183
+ --color-interaction-container-branded-low-icon: var(--color-orange-500);
184
+ --color-interaction-container-branded-low-border-hover: var(--color-orange-400);
185
+ --color-interaction-container-branded-low-border-active: var(--color-orange-400);
186
+ --color-interaction-container-branded-low-border: var(--color-orange-500);
187
+ --color-interaction-container-branded-low-background-hover: var(--color-orange-900);
188
+ --color-interaction-container-branded-low-background-active: var(--color-orange-900);
189
+ --color-interaction-container-branded-high-text-hover: var(--color-base-black);
190
+ --color-interaction-container-branded-high-text-active: var(--color-base-black);
191
+ --color-interaction-container-branded-high-text: var(--color-base-black);
192
+ --color-interaction-container-branded-high-icon-hover: var(--color-base-black);
193
+ --color-interaction-container-branded-high-icon-active: var(--color-base-black);
194
+ --color-interaction-container-branded-high-icon: var(--color-base-black);
195
+ --color-interaction-container-branded-high-border-hover: var(--color-orange-400);
196
+ --color-interaction-container-branded-high-border-active: var(--color-orange-400);
197
+ --color-interaction-container-branded-high-border: var(--color-orange-500);
198
+ --color-interaction-container-branded-high-background-hover: var(--color-orange-400);
199
+ --color-interaction-container-branded-high-background-active: var(--color-orange-400);
200
+ --color-interaction-container-branded-high-background: var(--color-orange-500);
169
201
  --color-focus-brand: var(--color-orange-500);
170
202
  --color-feedback-success-high-contrast-title: var(--color-base-black);
171
203
  --color-feedback-success-high-contrast-text: var(--color-status-green-900);
@@ -292,47 +324,6 @@
292
324
  --color-level-20-background: var(--color-gray-spark-700);
293
325
  --color-level-15-background: var(--color-gray-spark-750);
294
326
  --color-level-10-background: var(--color-gray-spark-800);
295
- --color-interaction-link-inverted-text-visited: var(--color-orange-400);
296
- --color-interaction-link-inverted-text-hover: var(--color-orange-600);
297
- --color-interaction-link-inverted-icon-visited: var(--color-orange-400);
298
- --color-interaction-link-inverted-icon-hover: var(--color-orange-600);
299
- --color-interaction-link-low-text-visited: var(--color-orange-400);
300
- --color-interaction-link-low-text-hover: var(--color-orange-400);
301
- --color-interaction-link-low-icon-visited: var(--color-orange-400);
302
- --color-interaction-link-low-icon-hover: var(--color-orange-400);
303
- --color-interaction-link-high-text-visited: var(--color-orange-400);
304
- --color-interaction-link-high-text-hover: var(--color-orange-400);
305
- --color-interaction-link-high-text: var(--color-orange-500);
306
- --color-interaction-link-high-icon-visited: var(--color-orange-400);
307
- --color-interaction-link-high-icon-hover: var(--color-orange-400);
308
- --color-interaction-link-high-icon: var(--color-orange-500);
309
- --color-interaction-container-branded-low-text-hover: var(--color-orange-400);
310
- --color-interaction-container-branded-low-text-active: var(--color-orange-400);
311
- --color-interaction-container-branded-low-text: var(--color-orange-500);
312
- --color-interaction-container-branded-low-icon-hover: var(--color-orange-400);
313
- --color-interaction-container-branded-low-icon-active: var(--color-orange-400);
314
- --color-interaction-container-branded-low-icon: var(--color-orange-500);
315
- --color-interaction-container-branded-low-border-hover: var(--color-orange-400);
316
- --color-interaction-container-branded-low-border-active: var(--color-orange-400);
317
- --color-interaction-container-branded-low-border: var(--color-orange-500);
318
- --color-interaction-container-branded-low-background-hover: var(--color-orange-900);
319
- --color-interaction-container-branded-low-background-active: var(--color-orange-900);
320
- --color-interaction-container-branded-high-text-hover: var(--color-base-black);
321
- --color-interaction-container-branded-high-text-active: var(--color-base-black);
322
- --color-interaction-container-branded-high-text: var(--color-base-black);
323
- --color-interaction-container-branded-high-icon-hover: var(--color-base-black);
324
- --color-interaction-container-branded-high-icon-active: var(--color-base-black);
325
- --color-interaction-container-branded-high-icon: var(--color-base-black);
326
- --color-interaction-container-branded-high-border-hover: var(--color-orange-400);
327
- --color-interaction-container-branded-high-border-active: var(--color-orange-400);
328
- --color-interaction-container-branded-high-border: var(--color-orange-500);
329
- --color-interaction-container-branded-high-background-hover: var(--color-orange-400);
330
- --color-interaction-container-branded-high-background-active: var(--color-orange-400);
331
- --color-interaction-container-branded-high-background: var(--color-orange-500);
332
- --color-interaction-container-neutral-text-active: var(--color-orange-400);
333
- --color-interaction-container-neutral-icon-active: var(--color-orange-400);
334
- --color-interaction-container-neutral-border-active: var(--color-orange-400);
335
- --color-interaction-container-neutral-background-active: var(--color-orange-900);
336
327
  --components-togglegroup-high-border: var(--color-interaction-container-branded-low-border);
337
328
  --components-toggle-shape-hover-checked: var(--color-interaction-container-branded-high-icon);
338
329
  --components-toggle-shape-default-checked: var(--color-interaction-container-branded-high-icon);
@@ -371,6 +362,10 @@
371
362
  --components-menu-contextual-border: var(--color-content-low-border);
372
363
  --components-menu-contextual-background: var(--color-level-00-background);
373
364
  --components-calendar-background: var(--color-level-00-background);
365
+ --components-calendar-weeks-text-hover: var(--color-content-high-text);
366
+ --components-calendar-weeks-text: var(--color-content-high-text);
367
+ --components-calendar-weeks-background-hover: var(--color-level-15-background);
368
+ --components-calendar-weeks-background: var(--color-level-10-background);
374
369
  --components-calendar-cell-text-today: var(--color-content-high-text);
375
370
  --components-calendar-cell-text-outside-month: var(--color-content-lower-text);
376
371
  --components-calendar-cell-text-in-range: var(--color-interaction-container-branded-low-text-active);
@@ -381,10 +376,6 @@
381
376
  --components-calendar-cell-background-hover: var(--color-interaction-container-branded-low-background-hover);
382
377
  --components-calendar-cell-background-in-range: var(--color-interaction-container-branded-low-background-active);
383
378
  --components-calendar-cell-background-selected: var(--color-interaction-container-branded-high-background-active);
384
- --components-calendar-weeks-text-hover: var(--color-content-high-text);
385
- --components-calendar-weeks-text: var(--color-content-high-text);
386
- --components-calendar-weeks-background-hover: var(--color-level-15-background);
387
- --components-calendar-weeks-background: var(--color-level-10-background);
388
379
  --components-calendar-header-text: var(--color-content-high-text);
389
380
  --components-calendar-border: var(--color-content-low-border);
390
381
  --components-field-time-border-active: var(--color-interaction-container-neutral-icon-active);
@@ -538,11 +529,6 @@
538
529
  --components-button-high-background-hover: var(--color-interaction-container-branded-high-background-hover);
539
530
  --components-button-high-background-active: var(--color-interaction-container-branded-high-background-active);
540
531
  --components-button-high-background: var(--color-interaction-container-branded-high-background);
541
- --color-focus-success: var(--color-feedback-success-low-border);
542
- --color-focus-destructive-in-field: var(--color-feedback-error-low-border);
543
- --color-focus-destructive: var(--color-feedback-error-high-border);
544
- --color-focus-background-inverted: var(--color-level-inverted-00-background);
545
- --color-focus-background: var(--color-level-00-background);
546
532
  --color-interaction-link-inverted-text-inactive: var(--color-content-inverted-low-text);
547
533
  --color-interaction-link-inverted-text: var(--color-content-inverted-medium-text);
548
534
  --color-interaction-link-inverted-icon-disabled: var(--color-content-inverted-low-icon);
@@ -553,7 +539,6 @@
553
539
  --color-interaction-link-low-icon: var(--color-content-high-text);
554
540
  --color-interaction-link-high-text-disabled: var(--color-content-low-text);
555
541
  --color-interaction-link-high-icon-inactive: var(--color-content-low-icon);
556
- --color-interaction-container-branded-low-background: var(--color-level-00-background);
557
542
  --color-interaction-container-neutral-text-hover: var(--color-content-medium-text);
558
543
  --color-interaction-container-neutral-text: var(--color-content-low-text);
559
544
  --color-interaction-container-neutral-icon-hover: var(--color-content-medium-text);
@@ -561,12 +546,20 @@
561
546
  --color-interaction-container-neutral-border-hover: var(--color-content-medium-text);
562
547
  --color-interaction-container-neutral-border: var(--color-content-low-text);
563
548
  --color-interaction-container-neutral-background-hover: var(--color-level-10-background);
549
+ --color-interaction-container-neutral-background: var(--color-level-00-background);
550
+ --color-interaction-container-branded-low-background: var(--color-level-00-background);
551
+ --color-focus-success: var(--color-feedback-success-low-border);
552
+ --color-focus-destructive-in-field: var(--color-feedback-error-low-border);
553
+ --color-focus-destructive: var(--color-feedback-error-high-border);
554
+ --color-focus-background-inverted: var(--color-level-inverted-00-background);
555
+ --color-focus-background: var(--color-level-00-background);
564
556
  --components-togglegroup-low-background: var(--color-interaction-container-branded-low-background);
565
557
  --components-togglegroup-low-border: var(--color-interaction-container-neutral-border);
566
558
  --components-togglegroup-high-background: var(--color-interaction-container-branded-low-background);
567
559
  --components-toggle-shape-disabled-checked: var(--color-interaction-container-neutral-icon);
568
560
  --components-toggle-shape-disabled: var(--color-interaction-container-neutral-icon);
569
561
  --components-toggle-background-hover: var(--color-interaction-container-neutral-background-hover);
562
+ --components-toggle-background-default: var(--color-interaction-container-neutral-background);
570
563
  --components-slider-handler-border-readonly: var(--components-form-field-background-readonly);
571
564
  --components-slider-handler-border-disabled: var(--components-form-field-background-disabled);
572
565
  --components-slider-handler-border-error: var(--components-form-field-background-error);
@@ -586,6 +579,7 @@
586
579
  --components-menu-contextual-item-content-hover: var(--color-interaction-container-neutral-text-hover);
587
580
  --components-menu-contextual-item-content: var(--color-interaction-container-neutral-text);
588
581
  --components-menu-contextual-item-background-hover: var(--color-interaction-container-neutral-background-hover);
582
+ --components-menu-contextual-item-background: var(--color-interaction-container-neutral-background);
589
583
  --components-calendar-cell-text-hover: var(--color-interaction-container-neutral-text-hover);
590
584
  --components-calendar-cell-text: var(--color-interaction-container-neutral-text);
591
585
  --components-calendar-cell-background-today: var(--color-interaction-container-branded-low-background);
@@ -593,13 +587,18 @@
593
587
  --components-field-time-text-hover: var(--color-interaction-container-neutral-icon-hover);
594
588
  --components-field-time-text-default: var(--color-interaction-container-neutral-text);
595
589
  --components-field-time-background-hover: var(--color-interaction-container-neutral-background-hover);
590
+ --components-field-time-background-default: var(--color-interaction-container-neutral-background);
596
591
  --components-datagrid-body-background-hover: var(--color-interaction-container-neutral-background-hover);
592
+ --components-datagrid-body-background-default: var(--color-interaction-container-neutral-background);
593
+ --components-datagrid-header-background: var(--color-interaction-container-neutral-background);
597
594
  --components-buttongroup-lower-background: var(--color-interaction-container-branded-low-background);
598
595
  --components-buttongroup-lower-border: var(--color-interaction-container-neutral-border);
599
596
  --components-buttongroup-low-background: var(--color-interaction-container-branded-low-background);
600
597
  --components-buttongroup-medium-background: var(--color-interaction-container-branded-low-background);
601
598
  --components-breadcrumb-text: var(--color-interaction-link-low-text);
599
+ --components-list-dropdown-item-background-disabled: var(--color-interaction-container-neutral-background);
602
600
  --components-list-dropdown-item-background-hover: var(--color-interaction-container-neutral-background-hover);
601
+ --components-list-dropdown-item-background-default: var(--color-interaction-container-neutral-background);
603
602
  --components-form-shape-foreground-disabled: var(--components-form-shape-border-default);
604
603
  --components-button-medium-background: var(--color-interaction-container-branded-low-background);
605
604
  --components-button-lower-text-hover: var(--color-interaction-container-neutral-text-hover);
@@ -607,6 +606,7 @@
607
606
  --components-button-lower-icon-hover: var(--color-interaction-container-neutral-icon-hover);
608
607
  --components-button-lower-icon: var(--color-interaction-container-neutral-icon);
609
608
  --components-button-lower-background-hover: var(--color-interaction-container-neutral-background-hover);
609
+ --components-button-lower-background: var(--color-interaction-container-neutral-background);
610
610
  }
611
611
 
612
612
  :root {
@@ -698,12 +698,10 @@
698
698
  --color-transparent: rgba(255, 255, 255, 0);
699
699
  --color-white: #ffffff;
700
700
  --color-black: #000000;
701
- --color-interaction-container-neutral-background: rgba(255, 255, 255, 0);
702
701
  --components-toggle-shape-hover: var(--color-gray-spark-400);
703
702
  --components-toggle-shape-default: var(--color-gray-spark-300);
704
703
  --components-toggle-background-disabled-checked: var(--color-gray-spark-150);
705
704
  --components-toggle-background-disabled: var(--color-gray-spark-150);
706
- --components-toggle-background-default: var(--color-interaction-container-neutral-background);
707
705
  --components-toggle-border-disabled-checked: var(--color-gray-spark-150);
708
706
  --components-toggle-border-disabled: var(--color-gray-spark-150);
709
707
  --components-toggle-border-hover: var(--color-gray-spark-400);
@@ -711,10 +709,6 @@
711
709
  --components-tooltip-border: var(--color-gray-spark-900);
712
710
  --components-tooltip-background: var(--color-gray-spark-900);
713
711
  --components-popover-background: var(--color-gray-spark-00);
714
- --components-menu-contextual-item-background: var(--color-interaction-container-neutral-background);
715
- --components-field-time-background-default: var(--color-interaction-container-neutral-background);
716
- --components-datagrid-body-background-default: var(--color-interaction-container-neutral-background);
717
- --components-datagrid-header-background: var(--color-interaction-container-neutral-background);
718
712
  --components-overlay-background: var(--color-gray-spark-850);
719
713
  --components-button-destructive-high-icon-hover: var(--color-base-white);
720
714
  --components-button-destructive-high-icon: var(--color-base-white);
@@ -738,8 +732,6 @@
738
732
  --components-loader-brand-background: var(--color-orange-50);
739
733
  --components-loader-white-foreground: var(--color-base-white);
740
734
  --components-list-dropdown-group-title-background: var(--color-transparent);
741
- --components-list-dropdown-item-background-disabled: var(--color-interaction-container-neutral-background);
742
- --components-list-dropdown-item-background-default: var(--color-interaction-container-neutral-background);
743
735
  --components-list-native-item-content-hover: var(--color-base-white);
744
736
  --components-list-native-item-content-default: var(--color-base-white);
745
737
  --components-form-shape-foreground-default: var(--color-base-white);
@@ -754,7 +746,6 @@
754
746
  --components-button-gr-as-complementary-text: var(--color-base-black);
755
747
  --components-button-gr-as-complementary-background-hover: var(--color-gray-spark-300);
756
748
  --components-button-gr-as-complementary-background: var(--color-gray-spark-200);
757
- --components-button-lower-background: var(--color-interaction-container-neutral-background);
758
749
  --color-dont-use-background: var(--color-gray-spark-50);
759
750
  --color-dont-use-content: var(--color-gray-spark-100);
760
751
  --color-dont-use-border: var(--color-gray-spark-100);
@@ -798,6 +789,47 @@
798
789
  --color-rainbow-1-icon: var(--color-amber-700);
799
790
  --color-rainbow-1-border: var(--color-amber-700);
800
791
  --color-rainbow-1-background: var(--color-amber-50);
792
+ --color-interaction-link-inverted-text-visited: var(--color-orange-700);
793
+ --color-interaction-link-inverted-text-hover: var(--color-orange-500);
794
+ --color-interaction-link-inverted-icon-visited: var(--color-orange-700);
795
+ --color-interaction-link-inverted-icon-hover: var(--color-orange-500);
796
+ --color-interaction-link-low-text-visited: var(--color-orange-700);
797
+ --color-interaction-link-low-text-hover: var(--color-orange-700);
798
+ --color-interaction-link-low-icon-visited: var(--color-orange-700);
799
+ --color-interaction-link-low-icon-hover: var(--color-orange-700);
800
+ --color-interaction-link-high-text-visited: var(--color-orange-700);
801
+ --color-interaction-link-high-text-hover: var(--color-orange-700);
802
+ --color-interaction-link-high-text: var(--color-orange-600);
803
+ --color-interaction-link-high-icon-visited: var(--color-orange-700);
804
+ --color-interaction-link-high-icon-hover: var(--color-orange-700);
805
+ --color-interaction-link-high-icon: var(--color-orange-600);
806
+ --color-interaction-container-neutral-text-active: var(--color-orange-600);
807
+ --color-interaction-container-neutral-icon-active: var(--color-orange-600);
808
+ --color-interaction-container-neutral-border-active: var(--color-orange-600);
809
+ --color-interaction-container-neutral-background-active: var(--color-orange-50);
810
+ --color-interaction-container-branded-low-text-hover: var(--color-orange-600);
811
+ --color-interaction-container-branded-low-text-active: var(--color-orange-600);
812
+ --color-interaction-container-branded-low-text: var(--color-orange-500);
813
+ --color-interaction-container-branded-low-icon-hover: var(--color-orange-600);
814
+ --color-interaction-container-branded-low-icon-active: var(--color-orange-600);
815
+ --color-interaction-container-branded-low-icon: var(--color-orange-500);
816
+ --color-interaction-container-branded-low-border-hover: var(--color-orange-600);
817
+ --color-interaction-container-branded-low-border-active: var(--color-orange-600);
818
+ --color-interaction-container-branded-low-border: var(--color-orange-500);
819
+ --color-interaction-container-branded-low-background-hover: var(--color-orange-50);
820
+ --color-interaction-container-branded-low-background-active: var(--color-orange-50);
821
+ --color-interaction-container-branded-high-text-hover: var(--color-base-white);
822
+ --color-interaction-container-branded-high-text-active: var(--color-base-white);
823
+ --color-interaction-container-branded-high-text: var(--color-base-white);
824
+ --color-interaction-container-branded-high-icon-hover: var(--color-base-white);
825
+ --color-interaction-container-branded-high-icon-active: var(--color-base-white);
826
+ --color-interaction-container-branded-high-icon: var(--color-base-white);
827
+ --color-interaction-container-branded-high-border-hover: var(--color-orange-600);
828
+ --color-interaction-container-branded-high-border-active: var(--color-orange-600);
829
+ --color-interaction-container-branded-high-border: var(--color-orange-500);
830
+ --color-interaction-container-branded-high-background-hover: var(--color-orange-600);
831
+ --color-interaction-container-branded-high-background-active: var(--color-orange-600);
832
+ --color-interaction-container-branded-high-background: var(--color-orange-500);
801
833
  --color-focus-brand: var(--color-orange-500);
802
834
  --color-feedback-success-high-contrast-title: var(--color-base-white);
803
835
  --color-feedback-success-high-contrast-text: var(--color-status-green-50);
@@ -924,47 +956,6 @@
924
956
  --color-level-20-background: var(--color-gray-spark-00);
925
957
  --color-level-15-background: var(--color-gray-spark-75);
926
958
  --color-level-10-background: var(--color-gray-spark-50);
927
- --color-interaction-link-inverted-text-visited: var(--color-orange-700);
928
- --color-interaction-link-inverted-text-hover: var(--color-orange-500);
929
- --color-interaction-link-inverted-icon-visited: var(--color-orange-700);
930
- --color-interaction-link-inverted-icon-hover: var(--color-orange-500);
931
- --color-interaction-link-low-text-visited: var(--color-orange-700);
932
- --color-interaction-link-low-text-hover: var(--color-orange-700);
933
- --color-interaction-link-low-icon-visited: var(--color-orange-700);
934
- --color-interaction-link-low-icon-hover: var(--color-orange-700);
935
- --color-interaction-link-high-text-visited: var(--color-orange-700);
936
- --color-interaction-link-high-text-hover: var(--color-orange-700);
937
- --color-interaction-link-high-text: var(--color-orange-600);
938
- --color-interaction-link-high-icon-visited: var(--color-orange-700);
939
- --color-interaction-link-high-icon-hover: var(--color-orange-700);
940
- --color-interaction-link-high-icon: var(--color-orange-600);
941
- --color-interaction-container-branded-low-text-hover: var(--color-orange-600);
942
- --color-interaction-container-branded-low-text-active: var(--color-orange-600);
943
- --color-interaction-container-branded-low-text: var(--color-orange-500);
944
- --color-interaction-container-branded-low-icon-hover: var(--color-orange-600);
945
- --color-interaction-container-branded-low-icon-active: var(--color-orange-600);
946
- --color-interaction-container-branded-low-icon: var(--color-orange-500);
947
- --color-interaction-container-branded-low-border-hover: var(--color-orange-600);
948
- --color-interaction-container-branded-low-border-active: var(--color-orange-600);
949
- --color-interaction-container-branded-low-border: var(--color-orange-500);
950
- --color-interaction-container-branded-low-background-hover: var(--color-orange-50);
951
- --color-interaction-container-branded-low-background-active: var(--color-orange-50);
952
- --color-interaction-container-branded-high-text-hover: var(--color-base-white);
953
- --color-interaction-container-branded-high-text-active: var(--color-base-white);
954
- --color-interaction-container-branded-high-text: var(--color-base-white);
955
- --color-interaction-container-branded-high-icon-hover: var(--color-base-white);
956
- --color-interaction-container-branded-high-icon-active: var(--color-base-white);
957
- --color-interaction-container-branded-high-icon: var(--color-base-white);
958
- --color-interaction-container-branded-high-border-hover: var(--color-orange-600);
959
- --color-interaction-container-branded-high-border-active: var(--color-orange-600);
960
- --color-interaction-container-branded-high-border: var(--color-orange-500);
961
- --color-interaction-container-branded-high-background-hover: var(--color-orange-600);
962
- --color-interaction-container-branded-high-background-active: var(--color-orange-600);
963
- --color-interaction-container-branded-high-background: var(--color-orange-500);
964
- --color-interaction-container-neutral-text-active: var(--color-orange-600);
965
- --color-interaction-container-neutral-icon-active: var(--color-orange-600);
966
- --color-interaction-container-neutral-border-active: var(--color-orange-600);
967
- --color-interaction-container-neutral-background-active: var(--color-orange-50);
968
959
  --components-togglegroup-high-border: var(--color-interaction-container-branded-low-border);
969
960
  --components-toggle-shape-hover-checked: var(--color-interaction-container-branded-high-icon);
970
961
  --components-toggle-shape-default-checked: var(--color-interaction-container-branded-high-icon);
@@ -1003,6 +994,10 @@
1003
994
  --components-menu-contextual-border: var(--color-content-low-border);
1004
995
  --components-menu-contextual-background: var(--color-level-00-background);
1005
996
  --components-calendar-background: var(--color-level-00-background);
997
+ --components-calendar-weeks-text-hover: var(--color-content-high-text);
998
+ --components-calendar-weeks-text: var(--color-content-high-text);
999
+ --components-calendar-weeks-background-hover: var(--color-level-15-background);
1000
+ --components-calendar-weeks-background: var(--color-level-10-background);
1006
1001
  --components-calendar-cell-text-today: var(--color-content-high-text);
1007
1002
  --components-calendar-cell-text-outside-month: var(--color-content-lower-text);
1008
1003
  --components-calendar-cell-text-in-range: var(--color-interaction-container-branded-low-text-active);
@@ -1012,10 +1007,6 @@
1012
1007
  --components-calendar-cell-background-hover: var(--color-interaction-container-branded-low-background-hover);
1013
1008
  --components-calendar-cell-background-in-range: var(--color-interaction-container-branded-low-background-active);
1014
1009
  --components-calendar-cell-background-selected: var(--color-interaction-container-branded-high-background-active);
1015
- --components-calendar-weeks-text-hover: var(--color-content-high-text);
1016
- --components-calendar-weeks-text: var(--color-content-high-text);
1017
- --components-calendar-weeks-background-hover: var(--color-level-15-background);
1018
- --components-calendar-weeks-background: var(--color-level-10-background);
1019
1010
  --components-calendar-header-text: var(--color-content-high-text);
1020
1011
  --components-calendar-border: var(--color-content-low-border);
1021
1012
  --components-field-time-border-active: var(--color-interaction-container-neutral-icon-active);
@@ -1171,11 +1162,6 @@
1171
1162
  --components-button-high-background-hover: var(--color-interaction-container-branded-high-background-hover);
1172
1163
  --components-button-high-background-active: var(--color-interaction-container-branded-high-background-active);
1173
1164
  --components-button-high-background: var(--color-interaction-container-branded-high-background);
1174
- --color-focus-success: var(--color-feedback-success-low-border);
1175
- --color-focus-destructive-in-field: var(--color-feedback-error-low-border);
1176
- --color-focus-destructive: var(--color-feedback-error-high-border);
1177
- --color-focus-background-inverted: var(--color-level-inverted-00-background);
1178
- --color-focus-background: var(--color-level-00-background);
1179
1165
  --color-interaction-link-inverted-text-inactive: var(--color-content-inverted-low-text);
1180
1166
  --color-interaction-link-inverted-text: var(--color-content-inverted-medium-text);
1181
1167
  --color-interaction-link-inverted-icon-disabled: var(--color-content-inverted-low-icon);
@@ -1186,7 +1172,6 @@
1186
1172
  --color-interaction-link-low-icon: var(--color-content-high-text);
1187
1173
  --color-interaction-link-high-text-disabled: var(--color-content-low-text);
1188
1174
  --color-interaction-link-high-icon-inactive: var(--color-content-low-icon);
1189
- --color-interaction-container-branded-low-background: var(--color-level-00-background);
1190
1175
  --color-interaction-container-neutral-text-hover: var(--color-content-medium-text);
1191
1176
  --color-interaction-container-neutral-text: var(--color-content-low-text);
1192
1177
  --color-interaction-container-neutral-icon-hover: var(--color-content-medium-text);
@@ -1194,12 +1179,20 @@
1194
1179
  --color-interaction-container-neutral-border-hover: var(--color-content-medium-text);
1195
1180
  --color-interaction-container-neutral-border: var(--color-content-low-text);
1196
1181
  --color-interaction-container-neutral-background-hover: var(--color-level-10-background);
1182
+ --color-interaction-container-neutral-background: var(--color-level-00-background);
1183
+ --color-interaction-container-branded-low-background: var(--color-level-00-background);
1184
+ --color-focus-success: var(--color-feedback-success-low-border);
1185
+ --color-focus-destructive-in-field: var(--color-feedback-error-low-border);
1186
+ --color-focus-destructive: var(--color-feedback-error-high-border);
1187
+ --color-focus-background-inverted: var(--color-level-inverted-00-background);
1188
+ --color-focus-background: var(--color-level-00-background);
1197
1189
  --components-togglegroup-low-background: var(--color-interaction-container-branded-low-background);
1198
1190
  --components-togglegroup-low-border: var(--color-interaction-container-neutral-border);
1199
1191
  --components-togglegroup-high-background: var(--color-interaction-container-branded-low-background);
1200
1192
  --components-toggle-shape-disabled-checked: var(--color-interaction-container-neutral-icon);
1201
1193
  --components-toggle-shape-disabled: var(--color-interaction-container-neutral-icon);
1202
1194
  --components-toggle-background-hover: var(--color-interaction-container-neutral-background-hover);
1195
+ --components-toggle-background-default: var(--color-interaction-container-neutral-background);
1203
1196
  --components-slider-handler-border-readonly: var(--components-form-field-background-readonly);
1204
1197
  --components-slider-handler-border-disabled: var(--components-form-field-background-disabled);
1205
1198
  --components-slider-handler-border-error: var(--components-form-field-background-error);
@@ -1219,6 +1212,7 @@
1219
1212
  --components-menu-contextual-item-content-hover: var(--color-interaction-container-neutral-text-hover);
1220
1213
  --components-menu-contextual-item-content: var(--color-interaction-container-neutral-text);
1221
1214
  --components-menu-contextual-item-background-hover: var(--color-interaction-container-neutral-background-hover);
1215
+ --components-menu-contextual-item-background: var(--color-interaction-container-neutral-background);
1222
1216
  --components-calendar-cell-text-hover: var(--color-interaction-container-neutral-text-hover);
1223
1217
  --components-calendar-cell-text: var(--color-interaction-container-neutral-text);
1224
1218
  --components-calendar-cell-dot-hover: var(--color-interaction-container-neutral-icon-hover);
@@ -1227,13 +1221,18 @@
1227
1221
  --components-field-time-text-hover: var(--color-interaction-container-neutral-text-hover);
1228
1222
  --components-field-time-text-default: var(--color-interaction-container-neutral-text);
1229
1223
  --components-field-time-background-hover: var(--color-interaction-container-neutral-background-hover);
1224
+ --components-field-time-background-default: var(--color-interaction-container-neutral-background);
1230
1225
  --components-datagrid-body-background-hover: var(--color-interaction-container-neutral-background-hover);
1226
+ --components-datagrid-body-background-default: var(--color-interaction-container-neutral-background);
1227
+ --components-datagrid-header-background: var(--color-interaction-container-neutral-background);
1231
1228
  --components-buttongroup-lower-background: var(--color-interaction-container-branded-low-background);
1232
1229
  --components-buttongroup-lower-border: var(--color-interaction-container-neutral-border);
1233
1230
  --components-buttongroup-low-background: var(--color-interaction-container-branded-low-background);
1234
1231
  --components-buttongroup-medium-background: var(--color-interaction-container-branded-low-background);
1235
1232
  --components-breadcrumb-text: var(--color-interaction-link-low-text);
1233
+ --components-list-dropdown-item-background-disabled: var(--color-interaction-container-neutral-background);
1236
1234
  --components-list-dropdown-item-background-hover: var(--color-interaction-container-neutral-background-hover);
1235
+ --components-list-dropdown-item-background-default: var(--color-interaction-container-neutral-background);
1237
1236
  --components-form-shape-foreground-disabled: var(--components-form-shape-border-default);
1238
1237
  --components-button-medium-background: var(--color-interaction-container-branded-low-background);
1239
1238
  --components-button-lower-text-hover: var(--color-interaction-container-neutral-text-hover);
@@ -1241,6 +1240,7 @@
1241
1240
  --components-button-lower-icon-hover: var(--color-interaction-container-neutral-icon-hover);
1242
1241
  --components-button-lower-icon: var(--color-interaction-container-neutral-icon);
1243
1242
  --components-button-lower-background-hover: var(--color-interaction-container-neutral-background-hover);
1243
+ --components-button-lower-background: var(--color-interaction-container-neutral-background);
1244
1244
  }
1245
1245
 
1246
1246
  /**
@@ -1559,10 +1559,16 @@
1559
1559
  --togglegroup-xs-button-radius: 1.0000px;
1560
1560
  --togglegroup-xs-button-padding-y: 1.0000px;
1561
1561
  --togglegroup-xs-padding: 3.0000px;
1562
+ --sidebar-primary-notification-bullet-font-size: 9.0000px;
1563
+ --sidebar-reduced-max-width: 100.0000px;
1564
+ --sidebar-width: 312.0000px;
1562
1565
  --popover-shadow-2-x: 0.0000px;
1563
1566
  --popover-shadow-1-blur: 1.0000px;
1564
1567
  --popover-shadow-1-x: 0.0000px;
1565
1568
  --popover-font-weight: 500;
1569
+ --navigation-primary-notification-bullet-font-size: 9.0000px;
1570
+ --navigation-reduced-max-width: 100.0000px;
1571
+ --navigation-width: 312.0000px;
1566
1572
  --menu-contextual-item-font-weight: 500;
1567
1573
  --menu-contextual-divider-padding-bottom: 3.0000px;
1568
1574
  --form-max-width: 480.0000px;
@@ -1590,6 +1596,12 @@
1590
1596
  --buttongroup-sm-button-padding-y: 4.0000px;
1591
1597
  --buttongroup-xs-button-radius: 1.0000px;
1592
1598
  --buttongroup-xs-padding: 2.0000px;
1599
+ --pagination-table-padding-y: var(--spacing-2);
1600
+ --pagination-table-padding-x: var(--spacing-3);
1601
+ --pagination-table-padding-left: var(--spacing-3);
1602
+ --pagination-table-height: var(--spacing-9);
1603
+ --pagination-table-gap-x: var(--spacing-8);
1604
+ --pagination-table-font-size: var(--font-size-sm);
1593
1605
  --notification-title-line-height: var(--line-height-sm);
1594
1606
  --notification-title-font-weight: var(--font-weight-medium-emphasis);
1595
1607
  --notification-title-font-size: var(--font-size-sm);
@@ -1609,14 +1621,6 @@
1609
1621
  --notification-gap-x-title: var(--spacing-2);
1610
1622
  --notification-gap-x: var(--spacing-3);
1611
1623
  --notification-icon-size: var(--spacing-5);
1612
- --navigation-primary-item-bullet-size: var(--spacing-5);
1613
- --navigation-primary-item-bullet-font-size: var(--font-size-xs);
1614
- --navigation-primary-item-radius: var(--radius-rounded-md);
1615
- --navigation-primary-item-icon-size: var(--spacing-5);
1616
- --navigation-primary-item-font-size: var(--font-size-md);
1617
- --navigation-primary-item-padding-y: var(--spacing-2);
1618
- --navigation-primary-item-padding-x: var(--spacing-3);
1619
- --navigation-primary-item-gap-x: var(--spacing-2);
1620
1624
  --loader-size-xl: var(--spacing-8);
1621
1625
  --loader-size-lg: var(--spacing-7);
1622
1626
  --loader-size-md: var(--spacing-6);
@@ -1743,6 +1747,23 @@
1743
1747
  --togglegroup-xs-height: var(--spacing-6);
1744
1748
  --togglegroup-xs-gap: var(--spacing-0-5);
1745
1749
  --togglegroup-xs-radius: var(--radius-rounded-sm);
1750
+ --sidebar-collapsible-button-icon-size: var(--spacing-4);
1751
+ --sidebar-collapsible-button-padding: var(--spacing-2);
1752
+ --sidebar-gap-y: var(--spacing-3);
1753
+ --sidebar-primary-separator-size: var(--spacing-px);
1754
+ --sidebar-primary-sub-item-padding-left-x: var(--spacing-7);
1755
+ --sidebar-primary-item-radius: var(--radius-rounded-md);
1756
+ --sidebar-primary-item-icon-size: var(--spacing-5);
1757
+ --sidebar-primary-item-font-size: var(--font-size-md);
1758
+ --sidebar-primary-item-padding-y: var(--spacing-2);
1759
+ --sidebar-primary-item-padding-x: var(--spacing-3);
1760
+ --sidebar-primary-item-gap-x: var(--spacing-2);
1761
+ --sidebar-primary-title-font-size: var(--font-size-sm);
1762
+ --sidebar-primary-title-padding-y: var(--spacing-1);
1763
+ --sidebar-primary-title-padding-x: var(--spacing-3);
1764
+ --sidebar-primary-notification-bullet-font-weight: var(--font-weight-medium-emphasis);
1765
+ --sidebar-primary-notification-bullet-size-reduced: var(--spacing-1-5);
1766
+ --sidebar-primary-notification-bullet-size: var(--spacing-4);
1746
1767
  --popover-radius: var(--radius-rounded-md);
1747
1768
  --popover-padding-y: var(--spacing-2);
1748
1769
  --popover-padding-x: var(--spacing-2);
@@ -1755,6 +1776,23 @@
1755
1776
  --popover-shadow-1-opacity: var(--shadow-color-opacity-3);
1756
1777
  --popover-shadow-1-spread: var(--shadow-spread-lg-1);
1757
1778
  --popover-shadow-1-y: var(--shadow-y-axis-none);
1779
+ --navigation-collapsible-button-icon-size: var(--spacing-4);
1780
+ --navigation-collapsible-button-padding: var(--spacing-2);
1781
+ --navigation-gap-y: var(--spacing-3);
1782
+ --navigation-primary-separator-size: var(--spacing-px);
1783
+ --navigation-primary-sub-item-padding-left-x: var(--spacing-7);
1784
+ --navigation-primary-item-radius: var(--radius-rounded-md);
1785
+ --navigation-primary-item-icon-size: var(--spacing-5);
1786
+ --navigation-primary-item-font-size: var(--font-size-md);
1787
+ --navigation-primary-item-padding-y: var(--spacing-2);
1788
+ --navigation-primary-item-padding-x: var(--spacing-3);
1789
+ --navigation-primary-item-gap-x: var(--spacing-2);
1790
+ --navigation-primary-title-font-size: var(--font-size-sm);
1791
+ --navigation-primary-title-padding-y: var(--spacing-1);
1792
+ --navigation-primary-title-padding-x: var(--spacing-3);
1793
+ --navigation-primary-notification-bullet-font-weight: var(--font-weight-medium-emphasis);
1794
+ --navigation-primary-notification-bullet-size-reduced: var(--spacing-1-5);
1795
+ --navigation-primary-notification-bullet-size: var(--spacing-4);
1758
1796
  --menu-contextual-radius: var(--radius-rounded-md);
1759
1797
  --menu-contextual-padding-y: var(--spacing-1);
1760
1798
  --menu-contextual-padding-x: var(--spacing-1);
@@ -1875,6 +1913,7 @@
1875
1913
  --button-lg-line-height: var(--line-height-lg);
1876
1914
  --button-lg-icon-size: var(--spacing-6);
1877
1915
  --button-lg-icon-button-padding: var(--spacing-3);
1916
+ --button-lg-height: var(--spacing-12);
1878
1917
  --button-lg-gap: var(--spacing-2);
1879
1918
  --button-lg-font-size: var(--font-size-lg);
1880
1919
  --button-lg-border-radius: var(--radius-rounded-lg);
@@ -1883,6 +1922,7 @@
1883
1922
  --button-md-line-height: var(--line-height-base);
1884
1923
  --button-md-icon-size: var(--spacing-5);
1885
1924
  --button-md-icon-button-padding: var(--spacing-2-5);
1925
+ --button-md-height: var(--spacing-10);
1886
1926
  --button-md-gap: var(--spacing-2);
1887
1927
  --button-md-font-size: var(--font-size-md);
1888
1928
  --button-md-border-radius: var(--radius-rounded-md);
@@ -1891,6 +1931,7 @@
1891
1931
  --button-sm-line-height: var(--line-height-sm);
1892
1932
  --button-sm-icon-size: var(--spacing-4);
1893
1933
  --button-sm-icon-button-padding: var(--spacing-2);
1934
+ --button-sm-height: var(--spacing-8);
1894
1935
  --button-sm-gap: var(--spacing-1-5);
1895
1936
  --button-sm-font-size: var(--font-size-sm);
1896
1937
  --button-sm-border-radius: var(--radius-rounded);
@@ -1899,6 +1940,7 @@
1899
1940
  --button-xs-line-height: var(--line-height-xs);
1900
1941
  --button-xs-icon-size: var(--spacing-3);
1901
1942
  --button-xs-icon-button-padding: var(--spacing-1-5);
1943
+ --button-xs-height: var(--spacing-6);
1902
1944
  --button-xs-gap: var(--spacing-1);
1903
1945
  --button-xs-font-size: var(--font-size-xs);
1904
1946
  --button-xs-border-radius: var(--radius-rounded-sm);
package/dist/generated/nova-tailwind-components.d.ts CHANGED
@@ -213,7 +213,7 @@ export declare const NOVA_TAILWIND_COMPONENTS: {
213
213
  transition: string;
214
214
  userSelect: string;
215
215
  cursor: string;
216
- height: string;
216
+ height: string[];
217
217
  width: string;
218
218
  padding: string;
219
219
  gap: string;
@@ -278,6 +278,7 @@ export declare const NOVA_TAILWIND_COMPONENTS: {
278
278
  gap: string;
279
279
  borderRadius: string;
280
280
  lineHeight: string;
281
+ height: string;
281
282
  fontSize: string;
282
283
  };
283
284
  '.nv-button.size-xs nv-icon > svg': {
@@ -290,6 +291,7 @@ export declare const NOVA_TAILWIND_COMPONENTS: {
290
291
  gap: string;
291
292
  borderRadius: string;
292
293
  lineHeight: string;
294
+ height: string;
293
295
  fontSize: string;
294
296
  };
295
297
  '.nv-button.size-sm nv-icon > svg': {
@@ -302,6 +304,7 @@ export declare const NOVA_TAILWIND_COMPONENTS: {
302
304
  gap: string;
303
305
  borderRadius: string;
304
306
  lineHeight: string;
307
+ height: string;
305
308
  fontSize: string;
306
309
  };
307
310
  '.nv-button.size-md nv-icon > svg': {
@@ -314,6 +317,7 @@ export declare const NOVA_TAILWIND_COMPONENTS: {
314
317
  gap: string;
315
318
  borderRadius: string;
316
319
  lineHeight: string;
320
+ height: string;
317
321
  fontSize: string;
318
322
  };
319
323
  '.nv-button.size-lg nv-icon > svg': {