@nova-design-system/nova-base 3.9.0 → 3.10.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 (23) hide show
  1. package/assets/icons/icon-sprite.svg +1 -1
  2. package/dist/cjs/generated/nova-tailwind-components.js +20 -10
  3. package/dist/css/mccs.css +109 -17
  4. package/dist/css/nova-utils.css +10 -0
  5. package/dist/css/ocean.css +189 -97
  6. package/dist/css/spark.css +167 -75
  7. package/dist/generated/nova-tailwind-components.d.ts +10 -0
  8. package/dist/generated/nova-tailwind-components.js +20 -10
  9. package/dist/js/mccs_dark.d.ts +16 -1
  10. package/dist/js/mccs_dark.js +21 -6
  11. package/dist/js/mccs_light.d.ts +16 -1
  12. package/dist/js/mccs_light.js +18 -3
  13. package/dist/js/ocean_dark.d.ts +60 -45
  14. package/dist/js/ocean_dark.js +68 -53
  15. package/dist/js/ocean_light.d.ts +60 -45
  16. package/dist/js/ocean_light.js +66 -51
  17. package/dist/js/spacings.d.ts +67 -5
  18. package/dist/js/spacings.js +67 -5
  19. package/dist/js/spark_dark.d.ts +48 -33
  20. package/dist/js/spark_dark.js +57 -42
  21. package/dist/js/spark_light.d.ts +48 -33
  22. package/dist/js/spark_light.js +54 -39
  23. package/package.json +1 -1
package/dist/css/spark.css CHANGED
@@ -20,6 +20,9 @@
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;
23
26
  --components-button-gr-as-complementary-border-hover: rgba(255, 255, 255, 0);
24
27
  --components-button-gr-as-complementary-border: rgba(255, 255, 255, 0);
25
28
  --components-button-lower-border-hover-2: rgba(255, 255, 255, 0);
@@ -68,21 +71,12 @@
68
71
  --color-transparent: rgba(255, 255, 255, 0);
69
72
  --color-white: #ffffff;
70
73
  --color-black: #000000;
71
- --color-interaction-container-neutral-background-hover: rgba(255, 255, 255, 0.1);
72
74
  --color-interaction-container-neutral-background: rgba(255, 255, 255, 0);
73
- --color-interaction-container-branded-low-background: rgba(255, 255, 255, 0);
74
75
  --components-tooltip-border: var(--color-gray-spark-50);
75
76
  --components-tooltip-background: var(--color-gray-spark-50);
76
77
  --components-popover-background: var(--color-gray-spark-900);
77
- --components-menu-contextual-item-background-hover: var(--color-interaction-container-neutral-background-hover);
78
78
  --components-menu-contextual-item-background: var(--color-interaction-container-neutral-background);
79
- --components-calendar-cell-background-today: var(--color-interaction-container-branded-low-background);
80
- --components-calendar-cell-background: var(--color-interaction-container-branded-low-background);
81
- --components-field-time-background-hover: var(--color-interaction-container-neutral-background-hover);
82
79
  --components-field-time-background-default: var(--color-interaction-container-neutral-background);
83
- --components-datagrid-body-background-hover: var(--color-interaction-container-neutral-background-hover);
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);
@@ -107,7 +101,6 @@
107
101
  --components-loader-white-foreground: var(--color-base-white);
108
102
  --components-list-dropdown-group-title-background: var(--color-transparent);
109
103
  --components-list-dropdown-item-background-disabled: var(--color-interaction-container-neutral-background);
110
- --components-list-dropdown-item-background-hover: var(--color-interaction-container-neutral-background-hover);
111
104
  --components-list-dropdown-item-background-default: var(--color-interaction-container-neutral-background);
112
105
  --components-list-native-item-content-hover: var(--color-base-white);
113
106
  --components-list-native-item-content-default: var(--color-base-white);
@@ -117,14 +110,14 @@
117
110
  --components-form-shape-background-hover: var(--color-gray-spark-350);
118
111
  --components-form-shape-background-default: var(--color-gray-spark-400);
119
112
  --components-form-field-background-checked: var(--color-orange-500);
120
- --components-button-medium-background: var(--color-interaction-container-branded-low-background);
113
+ --components-datagrid-body-background-default: var(--color-interaction-container-neutral-background);
114
+ --components-datagrid-header-background: var(--color-interaction-container-neutral-background);
121
115
  --components-button-gr-as-complementary-icon-hover: var(--color-base-white);
122
116
  --components-button-gr-as-complementary-icon: var(--color-base-white);
123
117
  --components-button-gr-as-complementary-text-hover: var(--color-base-white);
124
118
  --components-button-gr-as-complementary-text: var(--color-base-white);
125
119
  --components-button-gr-as-complementary-background-hover: var(--color-gray-spark-400);
126
120
  --components-button-gr-as-complementary-background: var(--color-gray-spark-450);
127
- --components-button-lower-background-hover: var(--color-interaction-container-neutral-background-hover);
128
121
  --components-button-lower-background: var(--color-interaction-container-neutral-background);
129
122
  --color-dont-use-background: var(--color-gray-spark-900);
130
123
  --color-dont-use-content: var(--color-gray-spark-750);
@@ -274,10 +267,17 @@
274
267
  --color-interaction-link-high-icon-visited: var(--color-orange-400);
275
268
  --color-interaction-link-high-icon-hover: var(--color-orange-400);
276
269
  --color-interaction-link-high-icon: var(--color-orange-500);
277
- --color-interaction-container-neutral-text-active: var(--color-orange-400);
278
- --color-interaction-container-neutral-icon-active: var(--color-orange-400);
279
- --color-interaction-container-neutral-border-active: var(--color-orange-400);
280
- --color-interaction-container-neutral-background-active: var(--color-orange-900);
270
+ --color-interaction-container-branded-low-text-hover: var(--color-orange-400);
271
+ --color-interaction-container-branded-low-text-active: var(--color-orange-400);
272
+ --color-interaction-container-branded-low-text: var(--color-orange-500);
273
+ --color-interaction-container-branded-low-icon-hover: var(--color-orange-400);
274
+ --color-interaction-container-branded-low-icon-active: var(--color-orange-400);
275
+ --color-interaction-container-branded-low-icon: var(--color-orange-500);
276
+ --color-interaction-container-branded-low-border-hover: var(--color-orange-400);
277
+ --color-interaction-container-branded-low-border-active: var(--color-orange-400);
278
+ --color-interaction-container-branded-low-border: var(--color-orange-500);
279
+ --color-interaction-container-branded-low-background-hover: var(--color-orange-900);
280
+ --color-interaction-container-branded-low-background-active: var(--color-orange-900);
281
281
  --color-interaction-container-branded-high-text-hover: var(--color-base-black);
282
282
  --color-interaction-container-branded-high-text-active: var(--color-base-black);
283
283
  --color-interaction-container-branded-high-text: var(--color-base-black);
@@ -290,17 +290,11 @@
290
290
  --color-interaction-container-branded-high-background-hover: var(--color-orange-400);
291
291
  --color-interaction-container-branded-high-background-active: var(--color-orange-400);
292
292
  --color-interaction-container-branded-high-background: var(--color-orange-500);
293
- --color-interaction-container-branded-low-text-hover: var(--color-orange-400);
294
- --color-interaction-container-branded-low-text-active: var(--color-orange-400);
295
- --color-interaction-container-branded-low-text: var(--color-orange-500);
296
- --color-interaction-container-branded-low-icon-hover: var(--color-orange-400);
297
- --color-interaction-container-branded-low-icon-active: var(--color-orange-400);
298
- --color-interaction-container-branded-low-icon: var(--color-orange-500);
299
- --color-interaction-container-branded-low-border-hover: var(--color-orange-400);
300
- --color-interaction-container-branded-low-border-active: var(--color-orange-400);
301
- --color-interaction-container-branded-low-border: var(--color-orange-500);
302
- --color-interaction-container-branded-low-background-hover: var(--color-orange-900);
303
- --color-interaction-container-branded-low-background-active: var(--color-orange-900);
293
+ --color-interaction-container-neutral-text-active: var(--color-orange-400);
294
+ --color-interaction-container-neutral-icon-active: var(--color-orange-400);
295
+ --color-interaction-container-neutral-border-active: var(--color-orange-400);
296
+ --color-interaction-container-neutral-background-active: var(--color-orange-900);
297
+ --components-togglegroup-high-border: var(--color-interaction-container-branded-low-border);
304
298
  --components-tooltip-supporting-text: var(--color-content-inverted-medium-text);
305
299
  --components-tooltip-text: var(--color-content-inverted-high-text);
306
300
  --components-slider-handler-border-focus: var(--components-form-field-background-checked);
@@ -350,15 +344,12 @@
350
344
  --components-field-time-border-active: var(--color-interaction-container-neutral-icon-active);
351
345
  --components-field-time-text-active: var(--color-interaction-container-neutral-text-active);
352
346
  --components-field-time-background-active: var(--color-interaction-container-neutral-background-active);
353
- --components-datagrid-body-background-active: var(--color-interaction-container-neutral-background-active);
354
- --components-datagrid-body-subtext: var(--color-content-low-text);
355
- --components-datagrid-body-text: var(--color-content-high-text);
356
- --components-datagrid-body-border: var(--color-content-low-border);
357
- --components-datagrid-header-text: var(--color-content-low-text);
358
- --components-datagrid-header-border: var(--color-content-medium-border);
347
+ --components-buttongroup-low-border: var(--color-interaction-container-branded-low-border);
348
+ --components-buttongroup-medium-border: var(--color-interaction-container-branded-low-border);
349
+ --components-buttongroup-high-background: var(--color-interaction-container-branded-high-background);
350
+ --components-buttongroup-high-border: var(--color-interaction-container-branded-high-border);
359
351
  --components-breadcrumb-text-hover: var(--color-interaction-link-low-text-hover);
360
- --components-breadcrumb-text-active: var(--color-content-medium-text);
361
- --components-breadcrumb-text: var(--color-content-low-text);
352
+ --components-breadcrumb-text-active: var(--color-content-high-text);
362
353
  --components-avatar-content-10: var(--color-rainbow-10-icon);
363
354
  --components-avatar-content-9: var(--color-rainbow-9-text);
364
355
  --components-avatar-content-8: var(--color-rainbow-8-text);
@@ -461,6 +452,12 @@
461
452
  --components-form-text-label-default: var(--color-content-high-text);
462
453
  --components-form-text-info-icon: var(--color-content-low-text);
463
454
  --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);
464
461
  --components-button-medium-text-hover: var(--color-interaction-container-branded-low-text-hover);
465
462
  --components-button-medium-text-active: var(--color-interaction-container-branded-low-text-active);
466
463
  --components-button-medium-text: var(--color-interaction-container-branded-low-text);
@@ -507,12 +504,17 @@
507
504
  --color-interaction-link-low-icon: var(--color-content-high-text);
508
505
  --color-interaction-link-high-text-disabled: var(--color-content-low-text);
509
506
  --color-interaction-link-high-icon-inactive: var(--color-content-low-icon);
507
+ --color-interaction-container-branded-low-background: var(--color-level-00-background);
510
508
  --color-interaction-container-neutral-text-hover: var(--color-content-medium-text);
511
509
  --color-interaction-container-neutral-text: var(--color-content-low-text);
512
510
  --color-interaction-container-neutral-icon-hover: var(--color-content-medium-text);
513
511
  --color-interaction-container-neutral-icon: var(--color-content-low-text);
514
512
  --color-interaction-container-neutral-border-hover: var(--color-content-medium-text);
515
513
  --color-interaction-container-neutral-border: var(--color-content-low-text);
514
+ --color-interaction-container-neutral-background-hover: var(--color-level-10-background);
515
+ --components-togglegroup-low-background: var(--color-interaction-container-branded-low-background);
516
+ --components-togglegroup-low-border: var(--color-interaction-container-neutral-border);
517
+ --components-togglegroup-high-background: var(--color-interaction-container-branded-low-background);
516
518
  --components-slider-handler-border-readonly: var(--components-form-field-background-readonly);
517
519
  --components-slider-handler-border-disabled: var(--components-form-field-background-disabled);
518
520
  --components-slider-handler-border-error: var(--components-form-field-background-error);
@@ -531,15 +533,28 @@
531
533
  --components-slider-track-filled-default: var(--components-form-field-border-default);
532
534
  --components-menu-contextual-item-content-hover: var(--color-interaction-container-neutral-text-hover);
533
535
  --components-menu-contextual-item-content: var(--color-interaction-container-neutral-text);
536
+ --components-menu-contextual-item-background-hover: var(--color-interaction-container-neutral-background-hover);
534
537
  --components-calendar-cell-text-hover: var(--color-interaction-container-neutral-text-hover);
535
538
  --components-calendar-cell-text: var(--color-interaction-container-neutral-text);
539
+ --components-calendar-cell-background-today: var(--color-interaction-container-branded-low-background);
540
+ --components-calendar-cell-background: var(--color-interaction-container-branded-low-background);
536
541
  --components-field-time-text-hover: var(--color-interaction-container-neutral-icon-hover);
537
542
  --components-field-time-text-default: var(--color-interaction-container-neutral-text);
543
+ --components-field-time-background-hover: var(--color-interaction-container-neutral-background-hover);
544
+ --components-buttongroup-lower-background: var(--color-interaction-container-branded-low-background);
545
+ --components-buttongroup-lower-border: var(--color-interaction-container-neutral-border);
546
+ --components-buttongroup-low-background: var(--color-interaction-container-branded-low-background);
547
+ --components-buttongroup-medium-background: var(--color-interaction-container-branded-low-background);
548
+ --components-breadcrumb-text: var(--color-interaction-link-low-text);
549
+ --components-list-dropdown-item-background-hover: var(--color-interaction-container-neutral-background-hover);
538
550
  --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
+ --components-button-medium-background: var(--color-interaction-container-branded-low-background);
539
553
  --components-button-lower-text-hover: var(--color-interaction-container-neutral-text-hover);
540
554
  --components-button-lower-text: var(--color-interaction-container-neutral-text);
541
555
  --components-button-lower-icon-hover: var(--color-interaction-container-neutral-icon-hover);
542
556
  --components-button-lower-icon: var(--color-interaction-container-neutral-icon);
557
+ --components-button-lower-background-hover: var(--color-interaction-container-neutral-background-hover);
543
558
  }
544
559
 
545
560
  :root {
@@ -587,6 +602,9 @@
587
602
  --components-list-native-background: #565558;
588
603
  --components-form-opacity-disabled: 50%;
589
604
  --components-form-opacity-default: 100%;
605
+ --components-datagrid-body-subtext: #0000ff;
606
+ --components-datagrid-body-text: #ff0000;
607
+ --components-datagrid-header-text: #ff0000;
590
608
  --components-button-gr-as-complementary-border-hover: rgba(255, 255, 255, 0);
591
609
  --components-button-gr-as-complementary-border: rgba(255, 255, 255, 0);
592
610
  --components-button-lower-border-hover-2: rgba(255, 255, 255, 0);
@@ -633,21 +651,12 @@
633
651
  --color-transparent: rgba(255, 255, 255, 0);
634
652
  --color-white: #ffffff;
635
653
  --color-black: #000000;
636
- --color-interaction-container-neutral-background-hover: rgba(165, 165, 165, 0.12);
637
654
  --color-interaction-container-neutral-background: rgba(255, 255, 255, 0);
638
- --color-interaction-container-branded-low-background: rgba(255, 255, 255, 0);
639
655
  --components-tooltip-border: var(--color-gray-spark-900);
640
656
  --components-tooltip-background: var(--color-gray-spark-900);
641
657
  --components-popover-background: var(--color-gray-spark-00);
642
- --components-menu-contextual-item-background-hover: var(--color-interaction-container-neutral-background-hover);
643
658
  --components-menu-contextual-item-background: var(--color-interaction-container-neutral-background);
644
- --components-calendar-cell-background-today: var(--color-interaction-container-branded-low-background);
645
- --components-calendar-cell-background: var(--color-interaction-container-branded-low-background);
646
- --components-field-time-background-hover: var(--color-interaction-container-neutral-background-hover);
647
659
  --components-field-time-background-default: var(--color-interaction-container-neutral-background);
648
- --components-datagrid-body-background-hover: var(--color-interaction-container-neutral-background-hover);
649
- --components-datagrid-body-background-default: var(--color-interaction-container-neutral-background);
650
- --components-datagrid-header-background: var(--color-interaction-container-neutral-background);
651
660
  --components-overlay-background: var(--color-gray-spark-850);
652
661
  --components-button-destructive-high-icon-hover: var(--color-base-white);
653
662
  --components-button-destructive-high-icon: var(--color-base-white);
@@ -672,7 +681,6 @@
672
681
  --components-loader-white-foreground: var(--color-base-white);
673
682
  --components-list-dropdown-group-title-background: var(--color-transparent);
674
683
  --components-list-dropdown-item-background-disabled: var(--color-interaction-container-neutral-background);
675
- --components-list-dropdown-item-background-hover: var(--color-interaction-container-neutral-background-hover);
676
684
  --components-list-dropdown-item-background-default: var(--color-interaction-container-neutral-background);
677
685
  --components-list-native-item-content-hover: var(--color-base-white);
678
686
  --components-list-native-item-content-default: var(--color-base-white);
@@ -682,14 +690,14 @@
682
690
  --components-form-shape-background-hover: var(--color-gray-spark-100);
683
691
  --components-form-shape-background-default: var(--color-gray-spark-75);
684
692
  --components-form-field-background-checked: var(--color-orange-500);
685
- --components-button-medium-background: var(--color-interaction-container-branded-low-background);
693
+ --components-datagrid-body-background-default: var(--color-interaction-container-neutral-background);
694
+ --components-datagrid-header-background: var(--color-interaction-container-neutral-background);
686
695
  --components-button-gr-as-complementary-icon-hover: var(--color-base-black);
687
696
  --components-button-gr-as-complementary-icon: var(--color-base-black);
688
697
  --components-button-gr-as-complementary-text-hover: var(--color-base-black);
689
698
  --components-button-gr-as-complementary-text: var(--color-base-black);
690
699
  --components-button-gr-as-complementary-background-hover: var(--color-gray-spark-300);
691
700
  --components-button-gr-as-complementary-background: var(--color-gray-spark-200);
692
- --components-button-lower-background-hover: var(--color-interaction-container-neutral-background-hover);
693
701
  --components-button-lower-background: var(--color-interaction-container-neutral-background);
694
702
  --color-dont-use-background: var(--color-gray-spark-50);
695
703
  --color-dont-use-content: var(--color-gray-spark-100);
@@ -839,10 +847,17 @@
839
847
  --color-interaction-link-high-icon-visited: var(--color-orange-700);
840
848
  --color-interaction-link-high-icon-hover: var(--color-orange-700);
841
849
  --color-interaction-link-high-icon: var(--color-orange-600);
842
- --color-interaction-container-neutral-text-active: var(--color-orange-600);
843
- --color-interaction-container-neutral-icon-active: var(--color-orange-600);
844
- --color-interaction-container-neutral-border-active: var(--color-orange-600);
845
- --color-interaction-container-neutral-background-active: var(--color-orange-50);
850
+ --color-interaction-container-branded-low-text-hover: var(--color-orange-600);
851
+ --color-interaction-container-branded-low-text-active: var(--color-orange-600);
852
+ --color-interaction-container-branded-low-text: var(--color-orange-500);
853
+ --color-interaction-container-branded-low-icon-hover: var(--color-orange-600);
854
+ --color-interaction-container-branded-low-icon-active: var(--color-orange-600);
855
+ --color-interaction-container-branded-low-icon: var(--color-orange-500);
856
+ --color-interaction-container-branded-low-border-hover: var(--color-orange-600);
857
+ --color-interaction-container-branded-low-border-active: var(--color-orange-600);
858
+ --color-interaction-container-branded-low-border: var(--color-orange-500);
859
+ --color-interaction-container-branded-low-background-hover: var(--color-orange-50);
860
+ --color-interaction-container-branded-low-background-active: var(--color-orange-50);
846
861
  --color-interaction-container-branded-high-text-hover: var(--color-base-white);
847
862
  --color-interaction-container-branded-high-text-active: var(--color-base-white);
848
863
  --color-interaction-container-branded-high-text: var(--color-base-white);
@@ -855,17 +870,11 @@
855
870
  --color-interaction-container-branded-high-background-hover: var(--color-orange-600);
856
871
  --color-interaction-container-branded-high-background-active: var(--color-orange-600);
857
872
  --color-interaction-container-branded-high-background: var(--color-orange-500);
858
- --color-interaction-container-branded-low-text-hover: var(--color-orange-600);
859
- --color-interaction-container-branded-low-text-active: var(--color-orange-600);
860
- --color-interaction-container-branded-low-text: var(--color-orange-500);
861
- --color-interaction-container-branded-low-icon-hover: var(--color-orange-600);
862
- --color-interaction-container-branded-low-icon-active: var(--color-orange-600);
863
- --color-interaction-container-branded-low-icon: var(--color-orange-500);
864
- --color-interaction-container-branded-low-border-hover: var(--color-orange-600);
865
- --color-interaction-container-branded-low-border-active: var(--color-orange-600);
866
- --color-interaction-container-branded-low-border: var(--color-orange-500);
867
- --color-interaction-container-branded-low-background-hover: var(--color-orange-50);
868
- --color-interaction-container-branded-low-background-active: var(--color-orange-50);
873
+ --color-interaction-container-neutral-text-active: var(--color-orange-600);
874
+ --color-interaction-container-neutral-icon-active: var(--color-orange-600);
875
+ --color-interaction-container-neutral-border-active: var(--color-orange-600);
876
+ --color-interaction-container-neutral-background-active: var(--color-orange-50);
877
+ --components-togglegroup-high-border: var(--color-interaction-container-branded-low-border);
869
878
  --components-tooltip-supporting-text: var(--color-content-inverted-medium-text);
870
879
  --components-tooltip-text: var(--color-content-inverted-high-text);
871
880
  --components-slider-handler-border-focus: var(--components-form-field-background-checked);
@@ -914,15 +923,12 @@
914
923
  --components-field-time-border-active: var(--color-interaction-container-neutral-icon-active);
915
924
  --components-field-time-text-active: var(--color-interaction-container-neutral-text-active);
916
925
  --components-field-time-background-active: var(--color-interaction-container-neutral-background-active);
917
- --components-datagrid-body-background-active: var(--color-interaction-container-neutral-background-active);
918
- --components-datagrid-body-subtext: var(--color-content-low-text);
919
- --components-datagrid-body-text: var(--color-content-high-text);
920
- --components-datagrid-body-border: var(--color-content-low-border);
921
- --components-datagrid-header-text: var(--color-content-low-text);
922
- --components-datagrid-header-border: var(--color-content-medium-border);
926
+ --components-buttongroup-low-border: var(--color-interaction-container-branded-low-border);
927
+ --components-buttongroup-medium-border: var(--color-interaction-container-branded-low-border);
928
+ --components-buttongroup-high-background: var(--color-interaction-container-branded-high-background);
929
+ --components-buttongroup-high-border: var(--color-interaction-container-branded-low-border);
923
930
  --components-breadcrumb-text-hover: var(--color-interaction-link-low-text-hover);
924
- --components-breadcrumb-text-active: var(--color-content-medium-text);
925
- --components-breadcrumb-text: var(--color-content-low-text);
931
+ --components-breadcrumb-text-active: var(--color-content-high-text);
926
932
  --components-avatar-content-10: var(--color-rainbow-10-icon);
927
933
  --components-avatar-content-9: var(--color-rainbow-9-text);
928
934
  --components-avatar-content-8: var(--color-rainbow-8-text);
@@ -1025,6 +1031,12 @@
1025
1031
  --components-form-text-label-default: var(--color-content-high-text);
1026
1032
  --components-form-text-info-icon: var(--color-content-low-text);
1027
1033
  --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);
1028
1040
  --components-button-medium-text-hover: var(--color-interaction-container-branded-low-text-hover);
1029
1041
  --components-button-medium-text-active: var(--color-interaction-container-branded-low-text-active);
1030
1042
  --components-button-medium-text: var(--color-interaction-container-branded-low-text);
@@ -1073,12 +1085,17 @@
1073
1085
  --color-interaction-link-low-icon: var(--color-content-high-text);
1074
1086
  --color-interaction-link-high-text-disabled: var(--color-content-low-text);
1075
1087
  --color-interaction-link-high-icon-inactive: var(--color-content-low-icon);
1088
+ --color-interaction-container-branded-low-background: var(--color-level-00-background);
1076
1089
  --color-interaction-container-neutral-text-hover: var(--color-content-medium-text);
1077
1090
  --color-interaction-container-neutral-text: var(--color-content-low-text);
1078
1091
  --color-interaction-container-neutral-icon-hover: var(--color-content-medium-text);
1079
1092
  --color-interaction-container-neutral-icon: var(--color-content-low-text);
1080
1093
  --color-interaction-container-neutral-border-hover: var(--color-content-medium-text);
1081
1094
  --color-interaction-container-neutral-border: var(--color-content-low-text);
1095
+ --color-interaction-container-neutral-background-hover: var(--color-level-10-background);
1096
+ --components-togglegroup-low-background: var(--color-interaction-container-branded-low-background);
1097
+ --components-togglegroup-low-border: var(--color-interaction-container-neutral-border);
1098
+ --components-togglegroup-high-background: var(--color-interaction-container-branded-low-background);
1082
1099
  --components-slider-handler-border-readonly: var(--components-form-field-background-readonly);
1083
1100
  --components-slider-handler-border-disabled: var(--components-form-field-background-disabled);
1084
1101
  --components-slider-handler-border-error: var(--components-form-field-background-error);
@@ -1097,16 +1114,29 @@
1097
1114
  --components-slider-track-filled-default: var(--components-form-field-border-default);
1098
1115
  --components-menu-contextual-item-content-hover: var(--color-interaction-container-neutral-text-hover);
1099
1116
  --components-menu-contextual-item-content: var(--color-interaction-container-neutral-text);
1117
+ --components-menu-contextual-item-background-hover: var(--color-interaction-container-neutral-background-hover);
1100
1118
  --components-calendar-cell-text-hover: var(--color-interaction-container-neutral-text-hover);
1101
1119
  --components-calendar-cell-text: var(--color-interaction-container-neutral-text);
1102
1120
  --components-calendar-cell-dot-hover: var(--color-interaction-container-neutral-icon-hover);
1121
+ --components-calendar-cell-background-today: var(--color-interaction-container-branded-low-background);
1122
+ --components-calendar-cell-background: var(--color-interaction-container-branded-low-background);
1103
1123
  --components-field-time-text-hover: var(--color-interaction-container-neutral-text-hover);
1104
1124
  --components-field-time-text-default: var(--color-interaction-container-neutral-text);
1125
+ --components-field-time-background-hover: var(--color-interaction-container-neutral-background-hover);
1126
+ --components-buttongroup-lower-background: var(--color-interaction-container-branded-low-background);
1127
+ --components-buttongroup-lower-border: var(--color-interaction-container-neutral-border);
1128
+ --components-buttongroup-low-background: var(--color-interaction-container-branded-low-background);
1129
+ --components-buttongroup-medium-background: var(--color-interaction-container-branded-low-background);
1130
+ --components-breadcrumb-text: var(--color-interaction-link-low-text);
1131
+ --components-list-dropdown-item-background-hover: var(--color-interaction-container-neutral-background-hover);
1105
1132
  --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
+ --components-button-medium-background: var(--color-interaction-container-branded-low-background);
1106
1135
  --components-button-lower-text-hover: var(--color-interaction-container-neutral-text-hover);
1107
1136
  --components-button-lower-text: var(--color-interaction-container-neutral-text);
1108
1137
  --components-button-lower-icon-hover: var(--color-interaction-container-neutral-icon-hover);
1109
1138
  --components-button-lower-icon: var(--color-interaction-container-neutral-icon);
1139
+ --components-button-lower-background-hover: var(--color-interaction-container-neutral-background-hover);
1110
1140
  }
1111
1141
 
1112
1142
  /**
@@ -1393,6 +1423,22 @@
1393
1423
  */
1394
1424
 
1395
1425
  :root {
1426
+ --togglegroup-md-iconbutton-padding-y: 7px;
1427
+ --togglegroup-md-button-radius: 3px;
1428
+ --togglegroup-md-button-padding-y: 5px;
1429
+ --togglegroup-md-padding: 3px;
1430
+ --togglegroup-lg-iconbutton-padding-y: 9px;
1431
+ --togglegroup-lg-button-radius: 5px;
1432
+ --togglegroup-lg-button-padding-y: 7px;
1433
+ --togglegroup-lg-padding: 3px;
1434
+ --togglegroup-sm-padding: 3px;
1435
+ --togglegroup-sm-iconbutton-padding-y: 5px;
1436
+ --togglegroup-sm-button-radius: 2px;
1437
+ --togglegroup-sm-button-padding-y: 3px;
1438
+ --togglegroup-xs-iconbutton-padding-y: 3px;
1439
+ --togglegroup-xs-button-radius: 1px;
1440
+ --togglegroup-xs-button-padding-y: 1px;
1441
+ --togglegroup-xs-padding: 3px;
1396
1442
  --slider-tick-radius: 1px;
1397
1443
  --global-typography-legend-font-style: uppercase;
1398
1444
  --global-typography-label-font-style: normal;
@@ -1415,11 +1461,27 @@
1415
1461
  --form-field-badge-gap: 0px;
1416
1462
  --list-native-separator-padding-y: 3px;
1417
1463
  --list-native-separator-padding-x: 9px;
1464
+ --icon-stroke-xl: 1.899999976158142px;
1465
+ --icon-stroke-lg: 1.7999999523162842px;
1466
+ --icon-stroke-md: 1.600000023841858px;
1467
+ --icon-stroke-sm: 1.399999976158142px;
1468
+ --icon-stroke-xs: 1.2000000476837158px;
1418
1469
  --calendar-cell-dot-size: 3px;
1419
1470
  --button-lg-ring-radius: 9px;
1420
1471
  --button-md-ring-radius: 7px;
1421
1472
  --button-sm-ring-radius: 5px;
1422
1473
  --button-xs-ring-radius: 3px;
1474
+ --buttongroup-md-button-radius: 3px;
1475
+ --buttongroup-md-button-padding-y: 5px;
1476
+ --buttongroup-md-padding: 3px;
1477
+ --buttongroup-lg-button-radius: 4px;
1478
+ --buttongroup-lg-button-padding-y: 6px;
1479
+ --buttongroup-lg-padding: 4px;
1480
+ --buttongroup-sm-padding: 2px;
1481
+ --buttongroup-sm-button-radius: 2px;
1482
+ --buttongroup-sm-button-padding-y: 4px;
1483
+ --buttongroup-xs-button-radius: 1px;
1484
+ --buttongroup-xs-padding: 2px;
1423
1485
  --notification-title-line-height: var(--line-height-sm);
1424
1486
  --notification-title-font-weight: var(--font-weight-medium-emphasis);
1425
1487
  --notification-title-font-size: var(--font-size-sm);
@@ -1445,11 +1507,6 @@
1445
1507
  --navigation-primary-item-padding-y: var(--spacing-2);
1446
1508
  --navigation-primary-item-padding-x: var(--spacing-3);
1447
1509
  --navigation-primary-item-gap-x: var(--spacing-2);
1448
- --icon-xl: var(--spacing-7);
1449
- --icon-lg: var(--spacing-6);
1450
- --icon-md: var(--spacing-5);
1451
- --icon-sm: var(--spacing-4);
1452
- --icon-xs: var(--spacing-3);
1453
1510
  --loader-size-xl: var(--spacing-8);
1454
1511
  --loader-size-lg: var(--spacing-7);
1455
1512
  --loader-size-md: var(--spacing-6);
@@ -1470,9 +1527,14 @@
1470
1527
  --dialog-header-gap-y: var(--spacing-0);
1471
1528
  --dialog-dismissible-position-right: var(--spacing-3);
1472
1529
  --dialog-dismissible-position-top: var(--spacing-5);
1530
+ --datagrid-expanded-padding-left: var(--spacing-14);
1531
+ --datagrid-expanded-padding-y: var(--spacing-4);
1532
+ --datagrid-expanded-padding-right: var(--spacing-4);
1533
+ --datagrid-cell-header-chevron-padding-x: var(--spacing-0);
1473
1534
  --datagrid-cell-header-padding-y: var(--spacing-3);
1474
1535
  --datagrid-cell-header-padding-right: var(--spacing-2);
1475
1536
  --datagrid-cell-header-padding-x: var(--spacing-4);
1537
+ --datagrid-cell-body-chevron-padding-x: var(--spacing-0);
1476
1538
  --datagrid-cell-body-actions-padding-y: var(--spacing-1);
1477
1539
  --datagrid-cell-body-padding-y: var(--spacing-2);
1478
1540
  --datagrid-cell-body-actions-gap-x: var(--spacing-2);
@@ -1514,6 +1576,18 @@
1514
1576
  --alert-icon-position-x: var(--spacing-4);
1515
1577
  --alert-gap-x: var(--spacing-3);
1516
1578
  --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);
1517
1591
  --slider-track-radius: var(--radius-rounded-sm);
1518
1592
  --slider-track-padding-x: var(--spacing-3);
1519
1593
  --slider-track-height: var(--spacing-1);
@@ -1657,6 +1731,11 @@
1657
1731
  --list-native-line-height: var(--line-height-base);
1658
1732
  --list-native-font-size: var(--font-size-md);
1659
1733
  --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);
1660
1739
  --calendar-navigation-buttons-gap: var(--spacing-1);
1661
1740
  --calendar-controls-padding-top: var(--spacing-2);
1662
1741
  --calendar-controls-margin-top: var(--spacing-1);
@@ -1712,5 +1791,18 @@
1712
1791
  --button-xs-gap: var(--spacing-1);
1713
1792
  --button-xs-font-size: var(--font-size-xs);
1714
1793
  --button-xs-border-radius: var(--radius-rounded-sm);
1794
+ --buttongroup-md-height: var(--spacing-10);
1795
+ --buttongroup-md-gap: var(--spacing-px);
1796
+ --buttongroup-md-radius: var(--radius-rounded-md);
1797
+ --buttongroup-lg-height: var(--spacing-12);
1798
+ --buttongroup-lg-gap: var(--spacing-px);
1799
+ --buttongroup-lg-radius: var(--radius-rounded-lg);
1800
+ --buttongroup-sm-height: var(--spacing-8);
1801
+ --buttongroup-sm-gap: var(--spacing-px);
1802
+ --buttongroup-sm-radius: var(--radius-rounded);
1803
+ --buttongroup-xs-height: var(--spacing-6);
1804
+ --buttongroup-xs-gap: var(--spacing-px);
1805
+ --buttongroup-xs-radius: var(--radius-rounded-sm);
1806
+ --buttongroup-xs-button-padding-y: var(--spacing-0-5);
1715
1807
  }
1716
1808
 
package/dist/generated/nova-tailwind-components.d.ts CHANGED
@@ -46,6 +46,7 @@ export declare const NOVA_TAILWIND_COMPONENTS: {
46
46
  '.nv-button:focus-visible, .nv-button:has(:focus-visible)': {
47
47
  outline: string;
48
48
  outlineOffset: string;
49
+ zIndex: string;
49
50
  };
50
51
  '.nv-button:disabled:not([disabled=false])': {
51
52
  opacity: string;
@@ -73,6 +74,7 @@ export declare const NOVA_TAILWIND_COMPONENTS: {
73
74
  '.nv-button.danger:focus-visible, .nv-button.danger:has(:focus-visible)': {
74
75
  outline: string;
75
76
  outlineOffset: string;
77
+ zIndex: string;
76
78
  };
77
79
  '.nv-button.size-xs': {
78
80
  padding: string;
@@ -143,6 +145,7 @@ export declare const NOVA_TAILWIND_COMPONENTS: {
143
145
  '.nv-button.emphasis-high:focus-visible, .nv-button.emphasis-high:has(:focus-visible)': {
144
146
  outline: string;
145
147
  outlineOffset: string;
148
+ zIndex: string;
146
149
  };
147
150
  '.nv-button.emphasis-high:disabled:not([disabled=false])': {
148
151
  opacity: string;
@@ -170,6 +173,7 @@ export declare const NOVA_TAILWIND_COMPONENTS: {
170
173
  '.nv-button.emphasis-high.danger:focus-visible, .nv-button.emphasis-high.danger:has(:focus-visible)': {
171
174
  outline: string;
172
175
  outlineOffset: string;
176
+ zIndex: string;
173
177
  };
174
178
  '.nv-button.emphasis-medium': {
175
179
  background: string;
@@ -192,6 +196,7 @@ export declare const NOVA_TAILWIND_COMPONENTS: {
192
196
  '.nv-button.emphasis-medium:focus-visible, .nv-button.emphasis-medium:has(:focus-visible)': {
193
197
  outline: string;
194
198
  outlineOffset: string;
199
+ zIndex: string;
195
200
  };
196
201
  '.nv-button.emphasis-medium:disabled:not([disabled=false])': {
197
202
  opacity: string;
@@ -219,6 +224,7 @@ export declare const NOVA_TAILWIND_COMPONENTS: {
219
224
  '.nv-button.emphasis-medium.danger:focus-visible, .nv-button.emphasis-medium.danger:has(:focus-visible)': {
220
225
  outline: string;
221
226
  outlineOffset: string;
227
+ zIndex: string;
222
228
  };
223
229
  '.nv-button.emphasis-low': {
224
230
  background: string;
@@ -241,6 +247,7 @@ export declare const NOVA_TAILWIND_COMPONENTS: {
241
247
  '.nv-button.emphasis-low:focus-visible, .nv-button.emphasis-low:has(:focus-visible)': {
242
248
  outline: string;
243
249
  outlineOffset: string;
250
+ zIndex: string;
244
251
  };
245
252
  '.nv-button.emphasis-low:disabled:not([disabled=false])': {
246
253
  opacity: string;
@@ -268,6 +275,7 @@ export declare const NOVA_TAILWIND_COMPONENTS: {
268
275
  '.nv-button.emphasis-low.danger:focus-visible, .nv-button.emphasis-low.danger:has(:focus-visible)': {
269
276
  outline: string;
270
277
  outlineOffset: string;
278
+ zIndex: string;
271
279
  };
272
280
  '.nv-button.emphasis-lower': {
273
281
  background: string;
@@ -290,6 +298,7 @@ export declare const NOVA_TAILWIND_COMPONENTS: {
290
298
  '.nv-button.emphasis-lower:focus-visible, .nv-button.emphasis-lower:has(:focus-visible)': {
291
299
  outline: string;
292
300
  outlineOffset: string;
301
+ zIndex: string;
293
302
  };
294
303
  '.nv-button.emphasis-lower:disabled:not([disabled=false])': {
295
304
  opacity: string;
@@ -317,6 +326,7 @@ export declare const NOVA_TAILWIND_COMPONENTS: {
317
326
  '.nv-button.emphasis-lower.danger:focus-visible, .nv-button.emphasis-lower.danger:has(:focus-visible)': {
318
327
  outline: string;
319
328
  outlineOffset: string;
329
+ zIndex: string;
320
330
  };
321
331
  '.nv-button.fluid': {
322
332
  width: string;