@nova-design-system/nova-base 3.23.0 → 3.25.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 (17) hide show
  1. package/assets/icons/icon-sprite.svg +1 -1
  2. package/dist/cjs/generated/nova-tailwind-components.js +1 -1
  3. package/dist/css/nova-utils.css +1 -1
  4. package/dist/css/ocean.css +82 -75
  5. package/dist/css/spark.css +82 -75
  6. package/dist/generated/nova-tailwind-components.js +1 -1
  7. package/dist/js/ocean_dark.d.ts +31 -30
  8. package/dist/js/ocean_dark.js +31 -30
  9. package/dist/js/ocean_light.d.ts +31 -30
  10. package/dist/js/ocean_light.js +31 -30
  11. package/dist/js/spacings.d.ts +19 -14
  12. package/dist/js/spacings.js +20 -15
  13. package/dist/js/spark_dark.d.ts +31 -30
  14. package/dist/js/spark_dark.js +31 -30
  15. package/dist/js/spark_light.d.ts +31 -30
  16. package/dist/js/spark_light.js +31 -30
  17. package/package.json +1 -1
package/dist/cjs/generated/nova-tailwind-components.js CHANGED
@@ -150,7 +150,7 @@ exports.NOVA_TAILWIND_COMPONENTS = {
150
150
  'overflow': 'hidden',
151
151
  'backgroundColor': 'transparent',
152
152
  'color': 'var(--components-form-field-content-text)',
153
- 'padding': 'var(--form-field-padding-y) var(--form-field-padding-x)',
153
+ 'padding': 'calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x)',
154
154
  'fontSize': 'var(--form-field-font-size)',
155
155
  'fontStyle': 'normal',
156
156
  'fontWeight': 'var(--font-weight-medium-emphasis)',
package/dist/css/nova-utils.css CHANGED
@@ -7638,7 +7638,7 @@ h6 {
7638
7638
  overflow: hidden;
7639
7639
  background-color: transparent;
7640
7640
  color: var(--components-form-field-content-text);
7641
- padding: var(--form-field-padding-y) var(--form-field-padding-x);
7641
+ padding: calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x);
7642
7642
  font-size: var(--form-field-font-size);
7643
7643
  font-style: normal;
7644
7644
  font-weight: var(--font-weight-medium-emphasis);
package/dist/css/ocean.css CHANGED
@@ -9,15 +9,6 @@
9
9
  --components-button-destructive-low-background: rgba(255, 255, 255, 0);
10
10
  --components-button-destructive-medium-background: rgba(255, 255, 255, 0);
11
11
  --components-loader-white-background: rgba(255, 255, 255, 0.2);
12
- --components-list-native-item-background-title: rgba(255, 255, 255, 0);
13
- --components-list-native-item-background-disabled: rgba(255, 255, 255, 0);
14
- --components-list-native-item-background-hover: #4e7fdf;
15
- --components-list-native-item-background-default: rgba(255, 255, 255, 0);
16
- --components-list-native-item-content-disabled: rgba(255, 255, 255, 0.5);
17
- --components-list-native-border: #767578;
18
- --components-list-native-separator: #838086;
19
- --components-list-native-item-title-content: rgba(255, 255, 255, 0.5);
20
- --components-list-native-background: #565558;
21
12
  --components-form-opacity-disabled: 50%;
22
13
  --components-form-opacity-default: 100%;
23
14
  --components-button-gr-as-complementary-border-hover: rgba(255, 255, 255, 0);
@@ -81,6 +72,11 @@
81
72
  --components-splitter-old-background: var(--color-interaction-container-neutral-background);
82
73
  --components-popover-background: var(--color-gray-ocean-900);
83
74
  --components-menu-contextual-item-background: var(--color-interaction-container-neutral-background);
75
+ --components-list-dropdown-group-title-background: var(--color-transparent);
76
+ --components-list-dropdown-item-background-disabled: var(--color-interaction-container-neutral-background);
77
+ --components-list-dropdown-item-background-default: var(--color-interaction-container-neutral-background);
78
+ --components-list-select-option-background-disabled: var(--color-interaction-container-neutral-background);
79
+ --components-list-select-option-background-default: var(--color-interaction-container-neutral-background);
84
80
  --components-field-time-background-default: var(--color-interaction-container-neutral-background);
85
81
  --components-datagrid-body-background-default: var(--color-interaction-container-neutral-background);
86
82
  --components-datagrid-header-background: var(--color-interaction-container-neutral-background);
@@ -106,11 +102,6 @@
106
102
  --components-loader-brand-foreground: var(--color-petrol-500);
107
103
  --components-loader-brand-background: var(--color-petrol-900);
108
104
  --components-loader-white-foreground: var(--color-base-white);
109
- --components-list-dropdown-group-title-background: var(--color-transparent);
110
- --components-list-dropdown-item-background-disabled: var(--color-interaction-container-neutral-background);
111
- --components-list-dropdown-item-background-default: var(--color-interaction-container-neutral-background);
112
- --components-list-native-item-content-hover: var(--color-base-white);
113
- --components-list-native-item-content-default: var(--color-base-white);
114
105
  --components-form-shape-foreground-default: var(--color-base-black);
115
106
  --components-form-shape-background-selected: var(--color-petrol-500);
116
107
  --components-form-shape-background-disabled: var(--color-gray-ocean-700);
@@ -382,6 +373,29 @@
382
373
  --components-menu-contextual-item-shortcut: var(--color-content-lower-text);
383
374
  --components-menu-contextual-border: var(--color-content-low-border);
384
375
  --components-menu-contextual-background: var(--color-level-00-background);
376
+ --components-list-dropdown-border: var(--color-content-low-border);
377
+ --components-list-dropdown-separator: var(--color-content-low-border);
378
+ --components-list-dropdown-group-title-content: var(--color-content-medium-text);
379
+ --components-list-dropdown-item-background-active: var(--color-interaction-container-neutral-background-active);
380
+ --components-list-dropdown-item-description-disabled: var(--color-content-lower-text);
381
+ --components-list-dropdown-item-description-hover: var(--color-content-medium-text);
382
+ --components-list-dropdown-item-description-default: var(--color-content-low-text);
383
+ --components-list-dropdown-item-label-active: var(--color-content-low-text);
384
+ --components-list-dropdown-item-label-disabled: var(--color-content-low-text);
385
+ --components-list-dropdown-item-label-hover: var(--color-content-high-text);
386
+ --components-list-dropdown-item-label-default: var(--color-content-medium-text);
387
+ --components-list-dropdown-item-border-active: var(--color-interaction-container-neutral-border-active);
388
+ --components-list-dropdown-header-background: var(--color-level-10-background);
389
+ --components-list-dropdown-background: var(--color-level-00-background);
390
+ --components-list-select-hr: var(--color-content-low-border);
391
+ --components-list-select-border: var(--color-content-low-border);
392
+ --components-list-select-optgroup-content: var(--color-content-lower-text);
393
+ --components-list-select-option-background-active: var(--color-interaction-container-neutral-background-active);
394
+ --components-list-select-option-content-active: var(--color-interaction-container-neutral-text-active);
395
+ --components-list-select-option-content-disabled: var(--color-content-lower-text);
396
+ --components-list-select-option-content-hover: var(--color-content-high-text);
397
+ --components-list-select-option-content-default: var(--color-content-medium-text);
398
+ --components-list-select-background: var(--color-level-00-background);
385
399
  --components-calendar-background: var(--color-level-00-background);
386
400
  --components-calendar-cell-text-today: var(--color-content-high-text);
387
401
  --components-calendar-cell-text-outside-month: var(--color-content-lower-text);
@@ -416,7 +430,6 @@
416
430
  --components-buttongroup-high-background: var(--color-interaction-container-branded-high-background);
417
431
  --components-buttongroup-high-border: var(--color-interaction-container-branded-high-border);
418
432
  --components-breadcrumb-text-hover: var(--color-interaction-link-low-text-hover);
419
- --components-breadcrumb-text-active: var(--color-content-high-text);
420
433
  --components-avatar-content-10: var(--color-rainbow-10-icon);
421
434
  --components-avatar-content-9: var(--color-rainbow-9-text);
422
435
  --components-avatar-content-8: var(--color-rainbow-8-text);
@@ -472,20 +485,6 @@
472
485
  --components-button-destructive-lower-text: var(--color-dont-use-content);
473
486
  --components-button-destructive-lower-background-hover: var(--color-dont-use-background);
474
487
  --components-button-destructive-lower-background: var(--color-dont-use-background);
475
- --components-list-dropdown-border: var(--color-content-low-border);
476
- --components-list-dropdown-separator: var(--color-content-low-border);
477
- --components-list-dropdown-group-title-content: var(--color-content-medium-text);
478
- --components-list-dropdown-item-background-active: var(--color-interaction-container-neutral-background-active);
479
- --components-list-dropdown-item-description-disabled: var(--color-content-lower-text);
480
- --components-list-dropdown-item-description-hover: var(--color-content-medium-text);
481
- --components-list-dropdown-item-description-default: var(--color-content-low-text);
482
- --components-list-dropdown-item-label-active: var(--color-content-low-text);
483
- --components-list-dropdown-item-label-disabled: var(--color-content-low-text);
484
- --components-list-dropdown-item-label-hover: var(--color-content-high-text);
485
- --components-list-dropdown-item-label-default: var(--color-content-medium-text);
486
- --components-list-dropdown-item-border-active: var(--color-interaction-container-neutral-border-active);
487
- --components-list-dropdown-header-background: var(--color-level-10-background);
488
- --components-list-dropdown-background: var(--color-level-00-background);
489
488
  --components-form-shape-foreground-disabled-error: var(--color-feedback-error-low-icon);
490
489
  --components-form-shape-foreground-switch-dot: var(--color-content-medium-border);
491
490
  --components-form-shape-border-success: var(--color-feedback-success-low-border);
@@ -601,6 +600,8 @@
601
600
  --components-menu-contextual-item-content-hover: var(--color-interaction-container-neutral-text-hover);
602
601
  --components-menu-contextual-item-content: var(--color-interaction-container-neutral-text);
603
602
  --components-menu-contextual-item-background-hover: var(--color-interaction-container-neutral-background-hover);
603
+ --components-list-dropdown-item-background-hover: var(--color-interaction-container-neutral-background-hover);
604
+ --components-list-select-option-background-hover: var(--color-interaction-container-neutral-background-hover);
604
605
  --components-calendar-cell-text-hover: var(--color-interaction-container-neutral-text-hover);
605
606
  --components-calendar-cell-text: var(--color-interaction-container-neutral-text);
606
607
  --components-calendar-cell-background-today: var(--color-interaction-container-branded-low-background);
@@ -613,8 +614,8 @@
613
614
  --components-buttongroup-lower-border: var(--color-interaction-container-neutral-border);
614
615
  --components-buttongroup-low-background: var(--color-interaction-container-branded-low-background);
615
616
  --components-buttongroup-medium-background: var(--color-interaction-container-branded-low-background);
617
+ --components-breadcrumb-text-current: var(--color-interaction-link-high-text-disabled);
616
618
  --components-breadcrumb-text: var(--color-interaction-link-low-text);
617
- --components-list-dropdown-item-background-hover: var(--color-interaction-container-neutral-background-hover);
618
619
  --components-form-shape-foreground-disabled: var(--components-form-shape-border-default);
619
620
  --components-button-medium-background: var(--color-interaction-container-branded-low-background);
620
621
  --components-button-lower-text-hover: var(--color-interaction-container-neutral-text-hover);
@@ -658,15 +659,6 @@
658
659
  --components-button-destructive-low-background: rgba(255, 255, 255, 0);
659
660
  --components-button-destructive-medium-background: rgba(255, 255, 255, 0);
660
661
  --components-loader-white-background: rgba(255, 255, 255, 0.2);
661
- --components-list-native-item-background-title: rgba(255, 255, 255, 0);
662
- --components-list-native-item-background-disabled: rgba(255, 255, 255, 0);
663
- --components-list-native-item-background-hover: #4e7fdf;
664
- --components-list-native-item-background-default: rgba(255, 255, 255, 0);
665
- --components-list-native-item-content-disabled: rgba(255, 255, 255, 0.5);
666
- --components-list-native-border: #767578;
667
- --components-list-native-separator: #838086;
668
- --components-list-native-item-title-content: rgba(255, 255, 255, 0.5);
669
- --components-list-native-background: #565558;
670
662
  --components-form-opacity-disabled: 50%;
671
663
  --components-form-opacity-default: 100%;
672
664
  --components-button-gr-as-complementary-border-hover: rgba(255, 255, 255, 0);
@@ -730,6 +722,11 @@
730
722
  --components-splitter-old-background: var(--color-interaction-container-neutral-background);
731
723
  --components-popover-background: var(--color-gray-ocean-00);
732
724
  --components-menu-contextual-item-background: var(--color-interaction-container-neutral-background);
725
+ --components-list-dropdown-group-title-background: var(--color-transparent);
726
+ --components-list-dropdown-item-background-disabled: var(--color-interaction-container-neutral-background);
727
+ --components-list-dropdown-item-background-default: var(--color-interaction-container-neutral-background);
728
+ --components-list-select-option-background-disabled: var(--color-interaction-container-neutral-background);
729
+ --components-list-select-option-background-default: var(--color-interaction-container-neutral-background);
733
730
  --components-field-time-background-default: var(--color-interaction-container-neutral-background);
734
731
  --components-datagrid-body-background-default: var(--color-interaction-container-neutral-background);
735
732
  --components-datagrid-header-background: var(--color-interaction-container-neutral-background);
@@ -755,11 +752,6 @@
755
752
  --components-loader-brand-foreground: var(--color-petrol-500);
756
753
  --components-loader-brand-background: var(--color-petrol-50);
757
754
  --components-loader-white-foreground: var(--color-base-white);
758
- --components-list-dropdown-group-title-background: var(--color-transparent);
759
- --components-list-dropdown-item-background-disabled: var(--color-interaction-container-neutral-background);
760
- --components-list-dropdown-item-background-default: var(--color-interaction-container-neutral-background);
761
- --components-list-native-item-content-hover: var(--color-base-white);
762
- --components-list-native-item-content-default: var(--color-base-white);
763
755
  --components-form-shape-foreground-default: var(--color-base-white);
764
756
  --components-form-shape-background-selected: var(--color-petrol-600);
765
757
  --components-form-shape-background-disabled: var(--color-gray-ocean-75);
@@ -1031,6 +1023,29 @@
1031
1023
  --components-menu-contextual-item-shortcut: var(--color-content-lower-text);
1032
1024
  --components-menu-contextual-border: var(--color-content-low-border);
1033
1025
  --components-menu-contextual-background: var(--color-level-00-background);
1026
+ --components-list-dropdown-border: var(--color-content-low-border);
1027
+ --components-list-dropdown-separator: var(--color-content-low-border);
1028
+ --components-list-dropdown-group-title-content: var(--color-content-medium-text);
1029
+ --components-list-dropdown-item-background-active: var(--color-interaction-container-neutral-background-active);
1030
+ --components-list-dropdown-item-description-disabled: var(--color-content-lower-text);
1031
+ --components-list-dropdown-item-description-hover: var(--color-content-medium-text);
1032
+ --components-list-dropdown-item-description-default: var(--color-content-low-text);
1033
+ --components-list-dropdown-item-label-active: var(--color-content-low-text);
1034
+ --components-list-dropdown-item-label-disabled: var(--color-content-low-text);
1035
+ --components-list-dropdown-item-label-hover: var(--color-content-high-text);
1036
+ --components-list-dropdown-item-label-default: var(--color-content-medium-text);
1037
+ --components-list-dropdown-item-border-active: var(--color-interaction-container-neutral-border-active);
1038
+ --components-list-dropdown-header-background: var(--color-level-10-background);
1039
+ --components-list-dropdown-background: var(--color-level-00-background);
1040
+ --components-list-select-hr: var(--color-content-low-border);
1041
+ --components-list-select-border: var(--color-content-low-border);
1042
+ --components-list-select-optgroup-content: var(--color-content-lower-text);
1043
+ --components-list-select-option-background-active: var(--color-interaction-container-neutral-background-active);
1044
+ --components-list-select-option-content-active: var(--color-interaction-container-neutral-text-active);
1045
+ --components-list-select-option-content-disabled: var(--color-content-lower-text);
1046
+ --components-list-select-option-content-hover: var(--color-content-high-text);
1047
+ --components-list-select-option-content-default: var(--color-content-medium-text);
1048
+ --components-list-select-background: var(--color-level-00-background);
1034
1049
  --components-calendar-background: var(--color-level-00-background);
1035
1050
  --components-calendar-cell-text-today: var(--color-content-high-text);
1036
1051
  --components-calendar-cell-text-outside-month: var(--color-content-lower-text);
@@ -1065,7 +1080,6 @@
1065
1080
  --components-buttongroup-high-background: var(--color-interaction-container-branded-high-background);
1066
1081
  --components-buttongroup-high-border: var(--color-interaction-container-branded-high-border);
1067
1082
  --components-breadcrumb-text-hover: var(--color-interaction-link-low-text-hover);
1068
- --components-breadcrumb-text-active: var(--color-content-high-text);
1069
1083
  --components-avatar-content-10: var(--color-rainbow-10-icon);
1070
1084
  --components-avatar-content-9: var(--color-rainbow-9-text);
1071
1085
  --components-avatar-content-8: var(--color-rainbow-8-text);
@@ -1121,20 +1135,6 @@
1121
1135
  --components-button-destructive-lower-text: var(--color-dont-use-content);
1122
1136
  --components-button-destructive-lower-background-hover: var(--color-dont-use-background);
1123
1137
  --components-button-destructive-lower-background: var(--color-dont-use-background);
1124
- --components-list-dropdown-border: var(--color-content-low-border);
1125
- --components-list-dropdown-separator: var(--color-content-low-border);
1126
- --components-list-dropdown-group-title-content: var(--color-content-medium-text);
1127
- --components-list-dropdown-item-background-active: var(--color-interaction-container-neutral-background-active);
1128
- --components-list-dropdown-item-description-disabled: var(--color-content-lower-text);
1129
- --components-list-dropdown-item-description-hover: var(--color-content-medium-text);
1130
- --components-list-dropdown-item-description-default: var(--color-content-low-text);
1131
- --components-list-dropdown-item-label-active: var(--color-content-low-text);
1132
- --components-list-dropdown-item-label-disabled: var(--color-content-low-text);
1133
- --components-list-dropdown-item-label-hover: var(--color-content-high-text);
1134
- --components-list-dropdown-item-label-default: var(--color-content-medium-text);
1135
- --components-list-dropdown-item-border-active: var(--color-interaction-container-neutral-border-active);
1136
- --components-list-dropdown-header-background: var(--color-level-10-background);
1137
- --components-list-dropdown-background: var(--color-level-00-background);
1138
1138
  --components-form-shape-foreground-disabled-error: var(--color-feedback-error-low-icon);
1139
1139
  --components-form-shape-foreground-switch-dot: var(--color-content-medium-border);
1140
1140
  --components-form-shape-border-success: var(--color-feedback-success-low-border);
@@ -1250,6 +1250,8 @@
1250
1250
  --components-menu-contextual-item-content-hover: var(--color-interaction-container-neutral-text-hover);
1251
1251
  --components-menu-contextual-item-content: var(--color-interaction-container-neutral-text);
1252
1252
  --components-menu-contextual-item-background-hover: var(--color-interaction-container-neutral-background-hover);
1253
+ --components-list-dropdown-item-background-hover: var(--color-interaction-container-neutral-background-hover);
1254
+ --components-list-select-option-background-hover: var(--color-interaction-container-neutral-background-hover);
1253
1255
  --components-calendar-cell-text-hover: var(--color-interaction-container-neutral-text-hover);
1254
1256
  --components-calendar-cell-text: var(--color-interaction-container-neutral-text);
1255
1257
  --components-calendar-cell-background-today: var(--color-interaction-container-branded-low-background);
@@ -1262,8 +1264,8 @@
1262
1264
  --components-buttongroup-lower-border: var(--color-interaction-container-neutral-border);
1263
1265
  --components-buttongroup-low-background: var(--color-interaction-container-branded-low-background);
1264
1266
  --components-buttongroup-medium-background: var(--color-interaction-container-branded-low-background);
1267
+ --components-breadcrumb-text-current: var(--color-interaction-link-high-text-disabled);
1265
1268
  --components-breadcrumb-text: var(--color-interaction-link-low-text);
1266
- --components-list-dropdown-item-background-hover: var(--color-interaction-container-neutral-background-hover);
1267
1269
  --components-form-shape-foreground-disabled: var(--components-form-shape-border-default);
1268
1270
  --components-button-medium-background: var(--color-interaction-container-branded-low-background);
1269
1271
  --components-button-lower-text-hover: var(--color-interaction-container-neutral-text-hover);
@@ -1604,8 +1606,8 @@
1604
1606
  --menu-contextual-divider-padding-bottom: 3.0000px;
1605
1607
  --form-max-width: 480.0000px;
1606
1608
  --form-field-badge-gap: 0.0000px;
1607
- --list-native-separator-padding-y: 3.0000px;
1608
- --list-native-separator-padding-x: 9.0000px;
1609
+ --list-select-hr-padding-y: 3.0000px;
1610
+ --list-select-hr-padding-x: 9.0000px;
1609
1611
  --icon-stroke-xl: 1.9000px;
1610
1612
  --icon-stroke-lg: 1.8000px;
1611
1613
  --icon-stroke-md: 1.6000px;
@@ -1765,6 +1767,8 @@
1765
1767
  --tooltip-padding-y: var(--spacing-3);
1766
1768
  --tooltip-padding-x: var(--spacing-3);
1767
1769
  --tooltip-font-size: var(--font-size-sm);
1770
+ --togglegroup-inner-space: var(--spacing-1-5);
1771
+ --togglegroup-stroke: var(--spacing-px);
1768
1772
  --togglegroup-lg-height: var(--spacing-12);
1769
1773
  --togglegroup-lg-gap: var(--spacing-0-5);
1770
1774
  --togglegroup-lg-radius: var(--radius-rounded-lg);
@@ -1906,7 +1910,7 @@
1906
1910
  --form-field-badge-padding-y: var(--spacing-0-5);
1907
1911
  --form-field-badge-padding-x: var(--spacing-1);
1908
1912
  --list-multiselect-padding: var(--spacing-3);
1909
- --list-dropdown-sub-item-padding-left: var(--spacing-10);
1913
+ --list-dropdown-sub-item-padding-left: var(--spacing-4);
1910
1914
  --list-dropdown-separator-padding-y: var(--spacing-0-5);
1911
1915
  --list-dropdown-separator-padding-x: var(--spacing-0);
1912
1916
  --list-dropdown-padding: var(--spacing-2);
@@ -1921,17 +1925,20 @@
1921
1925
  --list-dropdown-line-height: var(--line-height-base);
1922
1926
  --list-dropdown-font-size: var(--font-size-md);
1923
1927
  --list-dropdown-icon-size: var(--spacing-5);
1924
- --list-native-sub-item-padding-left: var(--spacing-8);
1925
- --list-native-padding: var(--spacing-2);
1926
- --list-native-radius: var(--radius-rounded-md);
1927
- --list-native-gap-y: var(--spacing-0-5);
1928
- --list-native-item-radius: var(--radius-rounded-md);
1929
- --list-native-item-padding-y: var(--spacing-0);
1930
- --list-native-item-padding-right: var(--spacing-2);
1931
- --list-native-item-padding-left: var(--spacing-5);
1932
- --list-native-line-height: var(--line-height-base);
1933
- --list-native-font-size: var(--font-size-md);
1934
- --list-native-icon-size: var(--spacing-5);
1928
+ --list-select-optgroup-padding-y: var(--spacing-2);
1929
+ --list-select-optgroup-gap: var(--spacing-0-5);
1930
+ --list-select-optgroup-option-margin-top: var(--spacing-1);
1931
+ --list-select-optgroup-option-padding-left: var(--spacing-5);
1932
+ --list-select-padding: var(--spacing-2);
1933
+ --list-select-radius: var(--radius-rounded-md);
1934
+ --list-select-gap-y: var(--spacing-0-5);
1935
+ --list-select-option-radius: var(--radius-rounded-md);
1936
+ --list-select-option-padding: var(--spacing-2);
1937
+ --list-select-option-padding-right: var(--spacing-2);
1938
+ --list-select-option-padding-left: var(--spacing-5);
1939
+ --list-select-line-height: var(--line-height-base);
1940
+ --list-select-font-size: var(--font-size-md);
1941
+ --list-select-icon-size: var(--spacing-5);
1935
1942
  --icon-size-xl: var(--spacing-7);
1936
1943
  --icon-size-lg: var(--spacing-6);
1937
1944
  --icon-size-md: var(--spacing-5);
@@ -1962,8 +1969,8 @@
1962
1969
  --calendar-cell-font-size: var(--font-size-sm);
1963
1970
  --drawer-padding-y: var(--spacing-6);
1964
1971
  --drawer-padding-x: var(--spacing-6);
1965
- --drawer-header-padding-right: var(--spacing-8);
1966
1972
  --drawer-gap-y: var(--spacing-6);
1973
+ --drawer-header-padding-right: var(--spacing-8);
1967
1974
  --drawer-dismissible-position-right: var(--spacing-6);
1968
1975
  --drawer-dismissible-position-top: var(--spacing-6);
1969
1976
  --drawer-radius-top-left: var(--radius-rounded-2xl);
package/dist/css/spark.css CHANGED
@@ -9,15 +9,6 @@
9
9
  --components-button-destructive-low-background: rgba(255, 255, 255, 0);
10
10
  --components-button-destructive-medium-background: rgba(255, 255, 255, 0);
11
11
  --components-loader-white-background: rgba(255, 255, 255, 0.2);
12
- --components-list-native-item-background-title: rgba(255, 255, 255, 0);
13
- --components-list-native-item-background-disabled: rgba(255, 255, 255, 0);
14
- --components-list-native-item-background-hover: #4e7fdf;
15
- --components-list-native-item-background-default: rgba(255, 255, 255, 0);
16
- --components-list-native-item-content-disabled: rgba(255, 255, 255, 0.5);
17
- --components-list-native-border: #767578;
18
- --components-list-native-separator: #838086;
19
- --components-list-native-item-title-content: rgba(255, 255, 255, 0.5);
20
- --components-list-native-background: #565558;
21
12
  --components-form-opacity-disabled: 50%;
22
13
  --components-form-opacity-default: 100%;
23
14
  --components-button-gr-as-complementary-border-hover: rgba(255, 255, 255, 0);
@@ -82,6 +73,11 @@
82
73
  --components-splitter-old-background: var(--color-interaction-container-neutral-background);
83
74
  --components-popover-background: var(--color-gray-spark-900);
84
75
  --components-menu-contextual-item-background: var(--color-interaction-container-neutral-background);
76
+ --components-list-dropdown-group-title-background: var(--color-transparent);
77
+ --components-list-dropdown-item-background-disabled: var(--color-interaction-container-neutral-background);
78
+ --components-list-dropdown-item-background-default: var(--color-interaction-container-neutral-background);
79
+ --components-list-select-option-background-disabled: var(--color-interaction-container-neutral-background);
80
+ --components-list-select-option-background-default: var(--color-interaction-container-neutral-background);
85
81
  --components-field-time-background-default: var(--color-interaction-container-neutral-background);
86
82
  --components-datagrid-body-background-default: var(--color-interaction-container-neutral-background);
87
83
  --components-datagrid-header-background: var(--color-interaction-container-neutral-background);
@@ -107,11 +103,6 @@
107
103
  --components-loader-brand-foreground: var(--color-orange-500);
108
104
  --components-loader-brand-background: var(--color-orange-900);
109
105
  --components-loader-white-foreground: var(--color-base-white);
110
- --components-list-dropdown-group-title-background: var(--color-transparent);
111
- --components-list-dropdown-item-background-disabled: var(--color-interaction-container-neutral-background);
112
- --components-list-dropdown-item-background-default: var(--color-interaction-container-neutral-background);
113
- --components-list-native-item-content-hover: var(--color-base-white);
114
- --components-list-native-item-content-default: var(--color-base-white);
115
106
  --components-form-shape-foreground-default: var(--color-base-black);
116
107
  --components-form-shape-background-selected: var(--color-orange-500);
117
108
  --components-form-shape-background-disabled: var(--color-gray-spark-700);
@@ -383,6 +374,29 @@
383
374
  --components-menu-contextual-item-shortcut: var(--color-content-lower-text);
384
375
  --components-menu-contextual-border: var(--color-content-low-border);
385
376
  --components-menu-contextual-background: var(--color-level-00-background);
377
+ --components-list-dropdown-border: var(--color-content-low-border);
378
+ --components-list-dropdown-separator: var(--color-content-low-border);
379
+ --components-list-dropdown-group-title-content: var(--color-content-medium-text);
380
+ --components-list-dropdown-item-background-active: var(--color-interaction-container-neutral-background-active);
381
+ --components-list-dropdown-item-description-disabled: var(--color-content-lower-text);
382
+ --components-list-dropdown-item-description-hover: var(--color-content-medium-text);
383
+ --components-list-dropdown-item-description-default: var(--color-content-low-text);
384
+ --components-list-dropdown-item-label-active: var(--color-content-low-text);
385
+ --components-list-dropdown-item-label-disabled: var(--color-content-low-text);
386
+ --components-list-dropdown-item-label-hover: var(--color-content-high-text);
387
+ --components-list-dropdown-item-label-default: var(--color-content-medium-text);
388
+ --components-list-dropdown-item-border-active: var(--color-interaction-container-neutral-border-active);
389
+ --components-list-dropdown-header-background: var(--color-level-10-background);
390
+ --components-list-dropdown-background: var(--color-level-00-background);
391
+ --components-list-select-hr: var(--color-content-low-border);
392
+ --components-list-select-border: var(--color-content-low-border);
393
+ --components-list-select-optgroup-content: var(--color-content-lower-text);
394
+ --components-list-select-option-background-active: var(--color-interaction-container-neutral-background-active);
395
+ --components-list-select-option-content-active: var(--color-interaction-container-neutral-text-active);
396
+ --components-list-select-option-content-disabled: var(--color-content-lower-text);
397
+ --components-list-select-option-content-hover: var(--color-content-high-text);
398
+ --components-list-select-option-content-default: var(--color-content-medium-text);
399
+ --components-list-select-background: var(--color-level-00-background);
386
400
  --components-calendar-background: var(--color-level-00-background);
387
401
  --components-calendar-cell-text-today: var(--color-content-high-text);
388
402
  --components-calendar-cell-text-outside-month: var(--color-content-lower-text);
@@ -417,7 +431,6 @@
417
431
  --components-buttongroup-high-background: var(--color-interaction-container-branded-high-background);
418
432
  --components-buttongroup-high-border: var(--color-interaction-container-branded-high-border);
419
433
  --components-breadcrumb-text-hover: var(--color-interaction-link-low-text-hover);
420
- --components-breadcrumb-text-active: var(--color-content-high-text);
421
434
  --components-avatar-content-10: var(--color-rainbow-10-icon);
422
435
  --components-avatar-content-9: var(--color-rainbow-9-text);
423
436
  --components-avatar-content-8: var(--color-rainbow-8-text);
@@ -473,20 +486,6 @@
473
486
  --components-button-destructive-lower-text: var(--color-dont-use-content);
474
487
  --components-button-destructive-lower-background-hover: var(--color-dont-use-background);
475
488
  --components-button-destructive-lower-background: var(--color-dont-use-background);
476
- --components-list-dropdown-border: var(--color-content-low-border);
477
- --components-list-dropdown-separator: var(--color-content-low-border);
478
- --components-list-dropdown-group-title-content: var(--color-content-medium-text);
479
- --components-list-dropdown-item-background-active: var(--color-interaction-container-neutral-background-active);
480
- --components-list-dropdown-item-description-disabled: var(--color-content-lower-text);
481
- --components-list-dropdown-item-description-hover: var(--color-content-medium-text);
482
- --components-list-dropdown-item-description-default: var(--color-content-low-text);
483
- --components-list-dropdown-item-label-active: var(--color-content-low-text);
484
- --components-list-dropdown-item-label-disabled: var(--color-content-low-text);
485
- --components-list-dropdown-item-label-hover: var(--color-content-high-text);
486
- --components-list-dropdown-item-label-default: var(--color-content-medium-text);
487
- --components-list-dropdown-item-border-active: var(--color-interaction-container-neutral-border-active);
488
- --components-list-dropdown-header-background: var(--color-level-10-background);
489
- --components-list-dropdown-background: var(--color-level-00-background);
490
489
  --components-form-shape-foreground-disabled-error: var(--color-feedback-error-low-icon);
491
490
  --components-form-shape-foreground-switch-dot: var(--color-content-medium-border);
492
491
  --components-form-shape-border-success: var(--color-feedback-success-low-border);
@@ -601,6 +600,8 @@
601
600
  --components-menu-contextual-item-content-hover: var(--color-interaction-container-neutral-text-hover);
602
601
  --components-menu-contextual-item-content: var(--color-interaction-container-neutral-text);
603
602
  --components-menu-contextual-item-background-hover: var(--color-interaction-container-neutral-background-hover);
603
+ --components-list-dropdown-item-background-hover: var(--color-interaction-container-neutral-background-hover);
604
+ --components-list-select-option-background-hover: var(--color-interaction-container-neutral-background-hover);
604
605
  --components-calendar-cell-text-hover: var(--color-interaction-container-neutral-text-hover);
605
606
  --components-calendar-cell-text: var(--color-interaction-container-neutral-text);
606
607
  --components-calendar-cell-background-today: var(--color-interaction-container-branded-low-background);
@@ -613,8 +614,8 @@
613
614
  --components-buttongroup-lower-border: var(--color-interaction-container-neutral-border);
614
615
  --components-buttongroup-low-background: var(--color-interaction-container-branded-low-background);
615
616
  --components-buttongroup-medium-background: var(--color-interaction-container-branded-low-background);
617
+ --components-breadcrumb-text-current: var(--color-interaction-link-high-text-disabled);
616
618
  --components-breadcrumb-text: var(--color-interaction-link-low-text);
617
- --components-list-dropdown-item-background-hover: var(--color-interaction-container-neutral-background-hover);
618
619
  --components-form-shape-foreground-disabled: var(--components-form-shape-border-default);
619
620
  --components-button-medium-background: var(--color-interaction-container-branded-low-background);
620
621
  --components-button-lower-text-hover: var(--color-interaction-container-neutral-text-hover);
@@ -658,15 +659,6 @@
658
659
  --components-button-destructive-low-background: rgba(255, 255, 255, 0);
659
660
  --components-button-destructive-medium-background: rgba(255, 255, 255, 0);
660
661
  --components-loader-white-background: rgba(255, 255, 255, 0.2);
661
- --components-list-native-item-background-title: rgba(255, 255, 255, 0);
662
- --components-list-native-item-background-disabled: rgba(255, 255, 255, 0);
663
- --components-list-native-item-background-hover: #4e7fdf;
664
- --components-list-native-item-background-default: rgba(255, 255, 255, 0);
665
- --components-list-native-item-content-disabled: rgba(255, 255, 255, 0.5);
666
- --components-list-native-border: #767578;
667
- --components-list-native-separator: #838086;
668
- --components-list-native-item-title-content: rgba(255, 255, 255, 0.5);
669
- --components-list-native-background: #565558;
670
662
  --components-form-opacity-disabled: 50%;
671
663
  --components-form-opacity-default: 100%;
672
664
  --components-button-gr-as-complementary-border-hover: rgba(255, 255, 255, 0);
@@ -729,6 +721,11 @@
729
721
  --components-splitter-old-background: var(--color-interaction-container-neutral-background);
730
722
  --components-popover-background: var(--color-gray-spark-00);
731
723
  --components-menu-contextual-item-background: var(--color-interaction-container-neutral-background);
724
+ --components-list-dropdown-group-title-background: var(--color-transparent);
725
+ --components-list-dropdown-item-background-disabled: var(--color-interaction-container-neutral-background);
726
+ --components-list-dropdown-item-background-default: var(--color-interaction-container-neutral-background);
727
+ --components-list-select-option-background-disabled: var(--color-interaction-container-neutral-background);
728
+ --components-list-select-option-background-default: var(--color-interaction-container-neutral-background);
732
729
  --components-field-time-background-default: var(--color-interaction-container-neutral-background);
733
730
  --components-datagrid-body-background-default: var(--color-interaction-container-neutral-background);
734
731
  --components-datagrid-header-background: var(--color-interaction-container-neutral-background);
@@ -754,11 +751,6 @@
754
751
  --components-loader-brand-foreground: var(--color-orange-500);
755
752
  --components-loader-brand-background: var(--color-orange-50);
756
753
  --components-loader-white-foreground: var(--color-base-white);
757
- --components-list-dropdown-group-title-background: var(--color-transparent);
758
- --components-list-dropdown-item-background-disabled: var(--color-interaction-container-neutral-background);
759
- --components-list-dropdown-item-background-default: var(--color-interaction-container-neutral-background);
760
- --components-list-native-item-content-hover: var(--color-base-white);
761
- --components-list-native-item-content-default: var(--color-base-white);
762
754
  --components-form-shape-foreground-default: var(--color-base-white);
763
755
  --components-form-shape-background-selected: var(--color-orange-500);
764
756
  --components-form-shape-background-disabled: var(--color-gray-spark-75);
@@ -1030,6 +1022,29 @@
1030
1022
  --components-menu-contextual-item-shortcut: var(--color-content-lower-text);
1031
1023
  --components-menu-contextual-border: var(--color-content-low-border);
1032
1024
  --components-menu-contextual-background: var(--color-level-00-background);
1025
+ --components-list-dropdown-border: var(--color-content-low-border);
1026
+ --components-list-dropdown-separator: var(--color-content-low-border);
1027
+ --components-list-dropdown-group-title-content: var(--color-content-medium-text);
1028
+ --components-list-dropdown-item-background-active: var(--color-interaction-container-neutral-background-active);
1029
+ --components-list-dropdown-item-description-disabled: var(--color-content-low-text);
1030
+ --components-list-dropdown-item-description-hover: var(--color-content-low-text);
1031
+ --components-list-dropdown-item-description-default: var(--color-content-low-text);
1032
+ --components-list-dropdown-item-label-active: var(--color-interaction-container-neutral-text-active);
1033
+ --components-list-dropdown-item-label-disabled: var(--color-content-medium-text);
1034
+ --components-list-dropdown-item-label-hover: var(--color-content-high-text);
1035
+ --components-list-dropdown-item-label-default: var(--color-content-medium-text);
1036
+ --components-list-dropdown-item-border-active: var(--color-interaction-container-neutral-border-active);
1037
+ --components-list-dropdown-header-background: var(--color-level-10-background);
1038
+ --components-list-dropdown-background: var(--color-level-00-background);
1039
+ --components-list-select-hr: var(--color-content-low-border);
1040
+ --components-list-select-border: var(--color-content-low-border);
1041
+ --components-list-select-optgroup-content: var(--color-content-lower-text);
1042
+ --components-list-select-option-background-active: var(--color-interaction-container-neutral-background-active);
1043
+ --components-list-select-option-content-active: var(--color-interaction-container-neutral-text-active);
1044
+ --components-list-select-option-content-disabled: var(--color-content-lower-text);
1045
+ --components-list-select-option-content-hover: var(--color-content-high-text);
1046
+ --components-list-select-option-content-default: var(--color-content-medium-text);
1047
+ --components-list-select-background: var(--color-level-00-background);
1033
1048
  --components-calendar-background: var(--color-level-00-background);
1034
1049
  --components-calendar-cell-text-today: var(--color-content-high-text);
1035
1050
  --components-calendar-cell-text-outside-month: var(--color-content-lower-text);
@@ -1063,7 +1078,6 @@
1063
1078
  --components-buttongroup-high-background: var(--color-interaction-container-branded-high-background);
1064
1079
  --components-buttongroup-high-border: var(--color-interaction-container-branded-low-border);
1065
1080
  --components-breadcrumb-text-hover: var(--color-interaction-link-low-text-hover);
1066
- --components-breadcrumb-text-active: var(--color-content-high-text);
1067
1081
  --components-avatar-content-10: var(--color-rainbow-10-icon);
1068
1082
  --components-avatar-content-9: var(--color-rainbow-9-text);
1069
1083
  --components-avatar-content-8: var(--color-rainbow-8-text);
@@ -1119,20 +1133,6 @@
1119
1133
  --components-button-destructive-lower-text: var(--color-dont-use-content);
1120
1134
  --components-button-destructive-lower-background-hover: var(--color-dont-use-background);
1121
1135
  --components-button-destructive-lower-background: var(--color-dont-use-background);
1122
- --components-list-dropdown-border: var(--color-content-low-border);
1123
- --components-list-dropdown-separator: var(--color-content-low-border);
1124
- --components-list-dropdown-group-title-content: var(--color-content-medium-text);
1125
- --components-list-dropdown-item-background-active: var(--color-interaction-container-neutral-background-active);
1126
- --components-list-dropdown-item-description-disabled: var(--color-content-low-text);
1127
- --components-list-dropdown-item-description-hover: var(--color-content-low-text);
1128
- --components-list-dropdown-item-description-default: var(--color-content-low-text);
1129
- --components-list-dropdown-item-label-active: var(--color-interaction-container-neutral-text-active);
1130
- --components-list-dropdown-item-label-disabled: var(--color-content-medium-text);
1131
- --components-list-dropdown-item-label-hover: var(--color-content-high-text);
1132
- --components-list-dropdown-item-label-default: var(--color-content-medium-text);
1133
- --components-list-dropdown-item-border-active: var(--color-interaction-container-neutral-border-active);
1134
- --components-list-dropdown-header-background: var(--color-level-10-background);
1135
- --components-list-dropdown-background: var(--color-level-00-background);
1136
1136
  --components-form-shape-foreground-disabled-error: var(--color-feedback-error-low-icon);
1137
1137
  --components-form-shape-foreground-switch-dot: var(--color-content-medium-border);
1138
1138
  --components-form-shape-border-success: var(--color-feedback-success-low-border);
@@ -1249,6 +1249,8 @@
1249
1249
  --components-menu-contextual-item-content-hover: var(--color-interaction-container-neutral-text-hover);
1250
1250
  --components-menu-contextual-item-content: var(--color-interaction-container-neutral-text);
1251
1251
  --components-menu-contextual-item-background-hover: var(--color-interaction-container-neutral-background-hover);
1252
+ --components-list-dropdown-item-background-hover: var(--color-interaction-container-neutral-background-hover);
1253
+ --components-list-select-option-background-hover: var(--color-interaction-container-neutral-background-hover);
1252
1254
  --components-calendar-cell-text-hover: var(--color-interaction-container-neutral-text-hover);
1253
1255
  --components-calendar-cell-text: var(--color-interaction-container-neutral-text);
1254
1256
  --components-calendar-cell-dot-hover: var(--color-interaction-container-neutral-icon-hover);
@@ -1262,8 +1264,8 @@
1262
1264
  --components-buttongroup-lower-border: var(--color-interaction-container-neutral-border);
1263
1265
  --components-buttongroup-low-background: var(--color-interaction-container-branded-low-background);
1264
1266
  --components-buttongroup-medium-background: var(--color-interaction-container-branded-low-background);
1267
+ --components-breadcrumb-text-current: var(--color-interaction-link-low-text-disabled);
1265
1268
  --components-breadcrumb-text: var(--color-interaction-link-low-text);
1266
- --components-list-dropdown-item-background-hover: var(--color-interaction-container-neutral-background-hover);
1267
1269
  --components-form-shape-foreground-disabled: var(--components-form-shape-border-default);
1268
1270
  --components-button-medium-background: var(--color-interaction-container-branded-low-background);
1269
1271
  --components-button-lower-text-hover: var(--color-interaction-container-neutral-text-hover);
@@ -1604,8 +1606,8 @@
1604
1606
  --menu-contextual-divider-padding-bottom: 3.0000px;
1605
1607
  --form-max-width: 480.0000px;
1606
1608
  --form-field-badge-gap: 0.0000px;
1607
- --list-native-separator-padding-y: 3.0000px;
1608
- --list-native-separator-padding-x: 9.0000px;
1609
+ --list-select-hr-padding-y: 3.0000px;
1610
+ --list-select-hr-padding-x: 9.0000px;
1609
1611
  --icon-stroke-xl: 1.9000px;
1610
1612
  --icon-stroke-lg: 1.8000px;
1611
1613
  --icon-stroke-md: 1.6000px;
@@ -1765,6 +1767,8 @@
1765
1767
  --tooltip-padding-y: var(--spacing-3);
1766
1768
  --tooltip-padding-x: var(--spacing-3);
1767
1769
  --tooltip-font-size: var(--font-size-sm);
1770
+ --togglegroup-inner-space: var(--spacing-1-5);
1771
+ --togglegroup-stroke: var(--spacing-px);
1768
1772
  --togglegroup-lg-height: var(--spacing-12);
1769
1773
  --togglegroup-lg-gap: var(--spacing-0-5);
1770
1774
  --togglegroup-lg-radius: var(--radius-rounded-lg);
@@ -1906,7 +1910,7 @@
1906
1910
  --form-field-badge-padding-y: var(--spacing-0-5);
1907
1911
  --form-field-badge-padding-x: var(--spacing-1);
1908
1912
  --list-multiselect-padding: var(--spacing-3);
1909
- --list-dropdown-sub-item-padding-left: var(--spacing-10);
1913
+ --list-dropdown-sub-item-padding-left: var(--spacing-4);
1910
1914
  --list-dropdown-separator-padding-y: var(--spacing-0-5);
1911
1915
  --list-dropdown-separator-padding-x: var(--spacing-0);
1912
1916
  --list-dropdown-padding: var(--spacing-2);
@@ -1921,17 +1925,20 @@
1921
1925
  --list-dropdown-line-height: var(--line-height-base);
1922
1926
  --list-dropdown-font-size: var(--font-size-md);
1923
1927
  --list-dropdown-icon-size: var(--spacing-5);
1924
- --list-native-sub-item-padding-left: var(--spacing-8);
1925
- --list-native-padding: var(--spacing-2);
1926
- --list-native-radius: var(--radius-rounded-md);
1927
- --list-native-gap-y: var(--spacing-0-5);
1928
- --list-native-item-radius: var(--radius-rounded-md);
1929
- --list-native-item-padding-y: var(--spacing-0);
1930
- --list-native-item-padding-right: var(--spacing-2);
1931
- --list-native-item-padding-left: var(--spacing-5);
1932
- --list-native-line-height: var(--line-height-base);
1933
- --list-native-font-size: var(--font-size-md);
1934
- --list-native-icon-size: var(--spacing-5);
1928
+ --list-select-optgroup-padding-y: var(--spacing-2);
1929
+ --list-select-optgroup-gap: var(--spacing-0-5);
1930
+ --list-select-optgroup-option-margin-top: var(--spacing-1);
1931
+ --list-select-optgroup-option-padding-left: var(--spacing-5);
1932
+ --list-select-padding: var(--spacing-2);
1933
+ --list-select-radius: var(--radius-rounded-md);
1934
+ --list-select-gap-y: var(--spacing-0-5);
1935
+ --list-select-option-radius: var(--radius-rounded-md);
1936
+ --list-select-option-padding: var(--spacing-2);
1937
+ --list-select-option-padding-right: var(--spacing-2);
1938
+ --list-select-option-padding-left: var(--spacing-5);
1939
+ --list-select-line-height: var(--line-height-base);
1940
+ --list-select-font-size: var(--font-size-md);
1941
+ --list-select-icon-size: var(--spacing-5);
1935
1942
  --icon-size-xl: var(--spacing-7);
1936
1943
  --icon-size-lg: var(--spacing-6);
1937
1944
  --icon-size-md: var(--spacing-5);
@@ -1962,8 +1969,8 @@
1962
1969
  --calendar-cell-font-size: var(--font-size-sm);
1963
1970
  --drawer-padding-y: var(--spacing-6);
1964
1971
  --drawer-padding-x: var(--spacing-6);
1965
- --drawer-header-padding-right: var(--spacing-8);
1966
1972
  --drawer-gap-y: var(--spacing-6);
1973
+ --drawer-header-padding-right: var(--spacing-8);
1967
1974
  --drawer-dismissible-position-right: var(--spacing-6);
1968
1975
  --drawer-dismissible-position-top: var(--spacing-6);
1969
1976
  --drawer-radius-top-left: var(--radius-rounded-2xl);
package/dist/generated/nova-tailwind-components.js CHANGED
@@ -147,7 +147,7 @@ export const NOVA_TAILWIND_COMPONENTS = {
147
147
  'overflow': 'hidden',
148
148
  'backgroundColor': 'transparent',
149
149
  'color': 'var(--components-form-field-content-text)',
150
- 'padding': 'var(--form-field-padding-y) var(--form-field-padding-x)',
150
+ 'padding': 'calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x)',
151
151
  'fontSize': 'var(--form-field-font-size)',
152
152
  'fontStyle': 'normal',
153
153
  'fontWeight': 'var(--font-weight-medium-emphasis)',