@nova-design-system/nova-base 3.29.0 → 3.30.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 (32) hide show
  1. package/README.md +25 -32
  2. package/dist/cjs/generated/nova-tailwind-tokens.js +45 -0
  3. package/dist/cjs/plugin/index.js +0 -1
  4. package/dist/cjs/plugin/nova-plugin.js +2 -100
  5. package/dist/cjs/plugin/typography.js +135 -0
  6. package/dist/css/nova-utils.css +26768 -24637
  7. package/dist/css/ocean.css +51 -8
  8. package/dist/css/spark.css +53 -10
  9. package/dist/generated/nova-tailwind-tokens.d.ts +45 -0
  10. package/dist/generated/nova-tailwind-tokens.js +45 -0
  11. package/dist/js/ocean_dark.d.ts +15 -0
  12. package/dist/js/ocean_dark.js +26 -11
  13. package/dist/js/ocean_light.d.ts +15 -0
  14. package/dist/js/ocean_light.js +17 -2
  15. package/dist/js/spacings.d.ts +14 -1
  16. package/dist/js/spacings.js +14 -1
  17. package/dist/js/spark_dark.d.ts +15 -0
  18. package/dist/js/spark_dark.js +29 -14
  19. package/dist/js/spark_light.d.ts +15 -0
  20. package/dist/js/spark_light.js +17 -2
  21. package/dist/plugin/index.d.ts +0 -1
  22. package/dist/plugin/index.js +0 -1
  23. package/dist/plugin/nova-plugin.d.ts +2 -4
  24. package/dist/plugin/nova-plugin.js +2 -99
  25. package/dist/plugin/typography.d.ts +79 -0
  26. package/dist/plugin/typography.js +127 -0
  27. package/generated/figma-to-tailwind-mapping.json +197 -17
  28. package/generated/nova-tailwind-tokens.ts +45 -0
  29. package/package.json +6 -3
  30. package/dist/cjs/plugin/nova-safelist.js +0 -341
  31. package/dist/plugin/nova-safelist.d.ts +0 -26
  32. package/dist/plugin/nova-safelist.js +0 -355
package/dist/css/ocean.css CHANGED
@@ -120,42 +120,52 @@
120
120
  --color-dont-use-border: var(--color-gray-ocean-750);
121
121
  --color-rainbow-10-text: var(--color-gray-ocean-250);
122
122
  --color-rainbow-10-icon: var(--color-gray-ocean-250);
123
+ --color-rainbow-10-border-light: var(--color-gray-ocean-450);
123
124
  --color-rainbow-10-border: var(--color-gray-ocean-250);
124
125
  --color-rainbow-10-background: var(--color-gray-ocean-650);
125
126
  --color-rainbow-9-text: var(--color-lime-500);
126
127
  --color-rainbow-9-icon: var(--color-lime-500);
128
+ --color-rainbow-9-border-light: var(--color-lime-700);
127
129
  --color-rainbow-9-border: var(--color-lime-500);
128
130
  --color-rainbow-9-background: var(--color-lime-900);
129
131
  --color-rainbow-8-text: var(--color-petrol-300);
130
132
  --color-rainbow-8-icon: var(--color-petrol-300);
133
+ --color-rainbow-8-border-light: var(--color-petrol-600);
131
134
  --color-rainbow-8-border: var(--color-petrol-300);
132
- --color-rainbow-8-background: var(--color-petrol-800);
135
+ --color-rainbow-8-background: var(--color-petrol-900);
133
136
  --color-rainbow-7-text: var(--color-green-300);
134
137
  --color-rainbow-7-icon: var(--color-green-300);
138
+ --color-rainbow-7-border-light: var(--color-green-600);
135
139
  --color-rainbow-7-border: var(--color-green-300);
136
140
  --color-rainbow-7-background: var(--color-green-800);
137
141
  --color-rainbow-6-text: var(--color-crimson-200);
138
142
  --color-rainbow-6-icon: var(--color-crimson-200);
143
+ --color-rainbow-6-border-light: var(--color-crimson-600);
139
144
  --color-rainbow-6-border: var(--color-crimson-200);
140
- --color-rainbow-6-background: var(--color-crimson-800);
141
- --color-rainbow-5-text: var(--color-turquoise-500);
142
- --color-rainbow-5-icon: var(--color-turquoise-500);
143
- --color-rainbow-5-border: var(--color-turquoise-500);
145
+ --color-rainbow-6-background: var(--color-crimson-900);
146
+ --color-rainbow-5-text: var(--color-turquoise-400);
147
+ --color-rainbow-5-icon: var(--color-turquoise-400);
148
+ --color-rainbow-5-border-light: var(--color-turquoise-700);
149
+ --color-rainbow-5-border: var(--color-turquoise-400);
144
150
  --color-rainbow-5-background: var(--color-turquoise-900);
145
151
  --color-rainbow-4-text: var(--color-red-200);
146
152
  --color-rainbow-4-icon: var(--color-red-200);
153
+ --color-rainbow-4-border-light: var(--color-red-600);
147
154
  --color-rainbow-4-border: var(--color-red-200);
148
- --color-rainbow-4-background: var(--color-red-800);
155
+ --color-rainbow-4-background: var(--color-red-900);
149
156
  --color-rainbow-3-text: var(--color-yellow-600);
150
157
  --color-rainbow-3-icon: var(--color-yellow-600);
158
+ --color-rainbow-3-border-light: var(--color-yellow-700);
151
159
  --color-rainbow-3-border: var(--color-yellow-600);
152
160
  --color-rainbow-3-background: var(--color-yellow-900);
153
161
  --color-rainbow-2-text: var(--color-orange-400);
154
162
  --color-rainbow-2-icon: var(--color-orange-400);
163
+ --color-rainbow-2-border-light: var(--color-orange-700);
155
164
  --color-rainbow-2-border: var(--color-orange-400);
156
165
  --color-rainbow-2-background: var(--color-orange-900);
157
166
  --color-rainbow-1-text: var(--color-amber-500);
158
167
  --color-rainbow-1-icon: var(--color-amber-500);
168
+ --color-rainbow-1-border-light: var(--color-amber-700);
159
169
  --color-rainbow-1-border: var(--color-amber-500);
160
170
  --color-rainbow-1-background: var(--color-amber-900);
161
171
  --color-focus-brand: var(--color-petrol-500);
@@ -166,6 +176,7 @@
166
176
  --color-feedback-success-high-contrast-background: var(--color-status-green-400);
167
177
  --color-feedback-success-low-text: var(--color-status-green-400);
168
178
  --color-feedback-success-low-icon: var(--color-status-green-400);
179
+ --color-feedback-success-low-border-subtle: var(--color-status-green-700);
169
180
  --color-feedback-success-low-border: var(--color-status-green-400);
170
181
  --color-feedback-success-low-background: var(--color-status-green-900);
171
182
  --color-feedback-success-high-text: var(--color-status-green-800);
@@ -179,6 +190,7 @@
179
190
  --color-feedback-warning-high-contrast-background: var(--color-status-yellow-500);
180
191
  --color-feedback-warning-low-text: var(--color-status-yellow-500);
181
192
  --color-feedback-warning-low-icon: var(--color-status-yellow-500);
193
+ --color-feedback-warning-low-border-subtle: var(--color-status-yellow-700);
182
194
  --color-feedback-warning-low-border: var(--color-status-yellow-500);
183
195
  --color-feedback-warning-low-background: var(--color-status-yellow-900);
184
196
  --color-feedback-warning-high-text: var(--color-status-yellow-900);
@@ -192,6 +204,7 @@
192
204
  --color-feedback-neutral-high-contrast-background: var(--color-gray-ocean-250);
193
205
  --color-feedback-neutral-low-text: var(--color-gray-ocean-250);
194
206
  --color-feedback-neutral-low-icon: var(--color-gray-ocean-250);
207
+ --color-feedback-neutral-low-border-subtle: var(--color-gray-ocean-500);
195
208
  --color-feedback-neutral-low-border: var(--color-gray-ocean-250);
196
209
  --color-feedback-neutral-low-background: var(--color-gray-ocean-800);
197
210
  --color-feedback-neutral-high-text: var(--color-gray-ocean-800);
@@ -205,6 +218,7 @@
205
218
  --color-feedback-error-high-contrast-background: var(--color-status-red-300);
206
219
  --color-feedback-error-low-text: var(--color-status-red-300);
207
220
  --color-feedback-error-low-icon: var(--color-status-red-300);
221
+ --color-feedback-error-low-border-subtle: var(--color-status-red-700);
208
222
  --color-feedback-error-low-border: var(--color-status-red-300);
209
223
  --color-feedback-error-low-background: var(--color-status-red-900);
210
224
  --color-feedback-error-high-text: var(--color-status-red-900);
@@ -218,6 +232,7 @@
218
232
  --color-feedback-information-high-contrast-background: var(--color-status-blue-300);
219
233
  --color-feedback-information-low-text: var(--color-status-blue-300);
220
234
  --color-feedback-information-low-icon: var(--color-status-blue-300);
235
+ --color-feedback-information-low-border-subtle: var(--color-status-blue-700);
221
236
  --color-feedback-information-low-border: var(--color-status-blue-300);
222
237
  --color-feedback-information-low-background: var(--color-status-blue-900);
223
238
  --color-feedback-information-high-text: var(--color-status-blue-800);
@@ -770,42 +785,52 @@
770
785
  --color-dont-use-border: var(--color-gray-ocean-150);
771
786
  --color-rainbow-10-text: var(--color-gray-ocean-500);
772
787
  --color-rainbow-10-icon: var(--color-gray-ocean-500);
788
+ --color-rainbow-10-border-light: var(--color-gray-ocean-150);
773
789
  --color-rainbow-10-border: var(--color-gray-ocean-500);
774
790
  --color-rainbow-10-background: var(--color-gray-ocean-75);
775
791
  --color-rainbow-9-text: var(--color-lime-700);
776
792
  --color-rainbow-9-icon: var(--color-lime-700);
793
+ --color-rainbow-9-border-light: var(--color-lime-100);
777
794
  --color-rainbow-9-border: var(--color-lime-700);
778
795
  --color-rainbow-9-background: var(--color-lime-50);
779
796
  --color-rainbow-8-text: var(--color-petrol-600);
780
797
  --color-rainbow-8-icon: var(--color-petrol-600);
798
+ --color-rainbow-8-border-light: var(--color-petrol-100);
781
799
  --color-rainbow-8-border: var(--color-petrol-600);
782
800
  --color-rainbow-8-background: var(--color-petrol-50);
783
801
  --color-rainbow-7-text: var(--color-green-600);
784
802
  --color-rainbow-7-icon: var(--color-green-600);
803
+ --color-rainbow-7-border-light: var(--color-green-100);
785
804
  --color-rainbow-7-border: var(--color-green-600);
786
805
  --color-rainbow-7-background: var(--color-green-50);
787
806
  --color-rainbow-6-text: var(--color-crimson-400);
788
807
  --color-rainbow-6-icon: var(--color-crimson-400);
808
+ --color-rainbow-6-border-light: var(--color-crimson-100);
789
809
  --color-rainbow-6-border: var(--color-crimson-400);
790
810
  --color-rainbow-6-background: var(--color-crimson-50);
791
811
  --color-rainbow-5-text: var(--color-turquoise-800);
792
812
  --color-rainbow-5-icon: var(--color-turquoise-800);
813
+ --color-rainbow-5-border-light: var(--color-turquoise-100);
793
814
  --color-rainbow-5-border: var(--color-turquoise-800);
794
815
  --color-rainbow-5-background: var(--color-turquoise-50);
795
816
  --color-rainbow-4-text: var(--color-red-500);
796
817
  --color-rainbow-4-icon: var(--color-red-500);
818
+ --color-rainbow-4-border-light: var(--color-red-100);
797
819
  --color-rainbow-4-border: var(--color-red-500);
798
820
  --color-rainbow-4-background: var(--color-red-50);
799
821
  --color-rainbow-3-text: var(--color-yellow-800);
800
822
  --color-rainbow-3-icon: var(--color-yellow-800);
823
+ --color-rainbow-3-border-light: var(--color-yellow-200);
801
824
  --color-rainbow-3-border: var(--color-yellow-800);
802
- --color-rainbow-3-background: var(--color-yellow-100);
825
+ --color-rainbow-3-background: var(--color-yellow-50);
803
826
  --color-rainbow-2-text: var(--color-orange-700);
804
827
  --color-rainbow-2-icon: var(--color-orange-700);
828
+ --color-rainbow-2-border-light: var(--color-orange-100);
805
829
  --color-rainbow-2-border: var(--color-orange-700);
806
830
  --color-rainbow-2-background: var(--color-orange-50);
807
831
  --color-rainbow-1-text: var(--color-amber-700);
808
832
  --color-rainbow-1-icon: var(--color-amber-700);
833
+ --color-rainbow-1-border-light: var(--color-amber-100);
809
834
  --color-rainbow-1-border: var(--color-amber-700);
810
835
  --color-rainbow-1-background: var(--color-amber-50);
811
836
  --color-focus-brand: var(--color-petrol-600);
@@ -816,6 +841,7 @@
816
841
  --color-feedback-success-high-contrast-background: var(--color-status-green-600);
817
842
  --color-feedback-success-low-text: var(--color-status-green-600);
818
843
  --color-feedback-success-low-icon: var(--color-status-green-600);
844
+ --color-feedback-success-low-border-subtle: var(--color-status-green-100);
819
845
  --color-feedback-success-low-border: var(--color-status-green-600);
820
846
  --color-feedback-success-low-background: var(--color-status-green-50);
821
847
  --color-feedback-success-high-text: var(--color-status-green-800);
@@ -829,6 +855,7 @@
829
855
  --color-feedback-warning-high-contrast-background: var(--color-status-yellow-700);
830
856
  --color-feedback-warning-low-text: var(--color-status-yellow-700);
831
857
  --color-feedback-warning-low-icon: var(--color-status-yellow-700);
858
+ --color-feedback-warning-low-border-subtle: var(--color-status-yellow-100);
832
859
  --color-feedback-warning-low-border: var(--color-status-yellow-700);
833
860
  --color-feedback-warning-low-background: var(--color-status-yellow-50);
834
861
  --color-feedback-warning-high-text: var(--color-status-yellow-900);
@@ -842,6 +869,7 @@
842
869
  --color-feedback-neutral-high-contrast-background: var(--color-gray-ocean-450);
843
870
  --color-feedback-neutral-low-text: var(--color-gray-ocean-450);
844
871
  --color-feedback-neutral-low-icon: var(--color-gray-ocean-450);
872
+ --color-feedback-neutral-low-border-subtle: var(--color-gray-ocean-100);
845
873
  --color-feedback-neutral-low-border: var(--color-gray-ocean-450);
846
874
  --color-feedback-neutral-low-background: var(--color-gray-ocean-50);
847
875
  --color-feedback-neutral-high-text: var(--color-gray-ocean-800);
@@ -855,6 +883,7 @@
855
883
  --color-feedback-error-high-contrast-background: var(--color-status-red-600);
856
884
  --color-feedback-error-low-text: var(--color-status-red-600);
857
885
  --color-feedback-error-low-icon: var(--color-status-red-600);
886
+ --color-feedback-error-low-border-subtle: var(--color-status-red-100);
858
887
  --color-feedback-error-low-border: var(--color-status-red-600);
859
888
  --color-feedback-error-low-background: var(--color-status-red-50);
860
889
  --color-feedback-error-high-text: var(--color-status-red-900);
@@ -868,6 +897,7 @@
868
897
  --color-feedback-information-high-contrast-background: var(--color-status-blue-300);
869
898
  --color-feedback-information-low-text: var(--color-status-blue-500);
870
899
  --color-feedback-information-low-icon: var(--color-status-blue-500);
900
+ --color-feedback-information-low-border-subtle: var(--color-status-blue-100);
871
901
  --color-feedback-information-low-border: var(--color-status-blue-500);
872
902
  --color-feedback-information-low-background: var(--color-status-blue-50);
873
903
  --color-feedback-information-high-text: var(--color-status-blue-800);
@@ -1646,12 +1676,25 @@
1646
1676
  --avatar-md-font-size: 18.0000px;
1647
1677
  --avatar-sm-font-size: 13.0000px;
1648
1678
  --avatar-xs-font-size: 10.0000px;
1679
+ --tag-border-radius: var(--radius-rounded);
1680
+ --tag-height: var(--spacing-6);
1681
+ --tag-padding-x: var(--spacing-1-5);
1682
+ --tag-gap-x: var(--spacing-1);
1649
1683
  --splitter-handle-radius: var(--radius-rounded-md);
1650
1684
  --splitter-handle-wide-hover: var(--spacing-2);
1651
1685
  --splitter-handle-wide: var(--spacing-1);
1652
1686
  --splitter-handle-long: var(--spacing-6);
1653
1687
  --splitter-gutter: var(--spacing-6);
1654
1688
  --splitter-line-width: var(--spacing-1);
1689
+ --status-indicator-label-line-height: var(--line-height-xs);
1690
+ --status-indicator-label-size: var(--font-size-xs);
1691
+ --status-indicator-radius: var(--radius-rounded-full);
1692
+ --status-indicator-padding-y: var(--spacing-1);
1693
+ --status-indicator-padding-x: var(--spacing-1-5);
1694
+ --status-indicator-icon-size: var(--spacing-3);
1695
+ --status-indicator-width-icon-only: var(--spacing-6);
1696
+ --status-indicator-height: var(--spacing-6);
1697
+ --status-indicator-gap-x: var(--spacing-0-5);
1655
1698
  --pagination-table-padding-y: var(--spacing-2);
1656
1699
  --pagination-table-padding-x: var(--spacing-3);
1657
1700
  --pagination-table-padding-left: var(--spacing-3);
@@ -1969,8 +2012,8 @@
1969
2012
  --calendar-cell-font-size: var(--font-size-sm);
1970
2013
  --drawer-padding-y: var(--spacing-6);
1971
2014
  --drawer-padding-x: var(--spacing-6);
1972
- --drawer-gap-y: var(--spacing-6);
1973
2015
  --drawer-header-padding-right: var(--spacing-8);
2016
+ --drawer-gap-y: var(--spacing-6);
1974
2017
  --drawer-dismissible-position-right: var(--spacing-6);
1975
2018
  --drawer-dismissible-position-top: var(--spacing-6);
1976
2019
  --drawer-radius-top-left: var(--radius-rounded-2xl);
package/dist/css/spark.css CHANGED
@@ -121,42 +121,52 @@
121
121
  --color-dont-use-border: var(--color-gray-spark-750);
122
122
  --color-rainbow-10-text: var(--color-gray-spark-250);
123
123
  --color-rainbow-10-icon: var(--color-gray-spark-250);
124
+ --color-rainbow-10-border-light: var(--color-gray-spark-450);
124
125
  --color-rainbow-10-border: var(--color-gray-spark-250);
125
126
  --color-rainbow-10-background: var(--color-gray-spark-650);
126
127
  --color-rainbow-9-text: var(--color-lime-500);
127
128
  --color-rainbow-9-icon: var(--color-lime-500);
129
+ --color-rainbow-9-border-light: var(--color-lime-700);
128
130
  --color-rainbow-9-border: var(--color-lime-500);
129
131
  --color-rainbow-9-background: var(--color-lime-900);
130
132
  --color-rainbow-8-text: var(--color-petrol-300);
131
133
  --color-rainbow-8-icon: var(--color-petrol-300);
134
+ --color-rainbow-8-border-light: var(--color-petrol-600);
132
135
  --color-rainbow-8-border: var(--color-petrol-300);
133
- --color-rainbow-8-background: var(--color-petrol-800);
136
+ --color-rainbow-8-background: var(--color-petrol-900);
134
137
  --color-rainbow-7-text: var(--color-green-300);
135
138
  --color-rainbow-7-icon: var(--color-green-300);
139
+ --color-rainbow-7-border-light: var(--color-green-600);
136
140
  --color-rainbow-7-border: var(--color-green-300);
137
- --color-rainbow-7-background: var(--color-green-800);
141
+ --color-rainbow-7-background: var(--color-green-900);
138
142
  --color-rainbow-6-text: var(--color-crimson-200);
139
143
  --color-rainbow-6-icon: var(--color-crimson-200);
144
+ --color-rainbow-6-border-light: var(--color-crimson-600);
140
145
  --color-rainbow-6-border: var(--color-crimson-200);
141
- --color-rainbow-6-background: var(--color-crimson-800);
142
- --color-rainbow-5-text: var(--color-turquoise-500);
143
- --color-rainbow-5-icon: var(--color-turquoise-500);
144
- --color-rainbow-5-border: var(--color-turquoise-500);
146
+ --color-rainbow-6-background: var(--color-crimson-900);
147
+ --color-rainbow-5-text: var(--color-turquoise-400);
148
+ --color-rainbow-5-icon: var(--color-turquoise-400);
149
+ --color-rainbow-5-border-light: var(--color-turquoise-700);
150
+ --color-rainbow-5-border: var(--color-turquoise-400);
145
151
  --color-rainbow-5-background: var(--color-turquoise-900);
146
152
  --color-rainbow-4-text: var(--color-red-200);
147
153
  --color-rainbow-4-icon: var(--color-red-200);
154
+ --color-rainbow-4-border-light: var(--color-red-600);
148
155
  --color-rainbow-4-border: var(--color-red-200);
149
- --color-rainbow-4-background: var(--color-red-800);
156
+ --color-rainbow-4-background: var(--color-red-900);
150
157
  --color-rainbow-3-text: var(--color-yellow-600);
151
158
  --color-rainbow-3-icon: var(--color-yellow-600);
159
+ --color-rainbow-3-border-light: var(--color-yellow-700);
152
160
  --color-rainbow-3-border: var(--color-yellow-600);
153
161
  --color-rainbow-3-background: var(--color-yellow-900);
154
162
  --color-rainbow-2-text: var(--color-orange-400);
155
163
  --color-rainbow-2-icon: var(--color-orange-400);
164
+ --color-rainbow-2-border-light: var(--color-orange-700);
156
165
  --color-rainbow-2-border: var(--color-orange-400);
157
166
  --color-rainbow-2-background: var(--color-orange-900);
158
- --color-rainbow-1-text: var(--color-amber-500);
167
+ --color-rainbow-1-text: var(--color-amber-400);
159
168
  --color-rainbow-1-icon: var(--color-amber-500);
169
+ --color-rainbow-1-border-light: var(--color-amber-700);
160
170
  --color-rainbow-1-border: var(--color-amber-500);
161
171
  --color-rainbow-1-background: var(--color-amber-900);
162
172
  --color-focus-brand: var(--color-orange-500);
@@ -167,6 +177,7 @@
167
177
  --color-feedback-success-high-contrast-background: var(--color-status-green-400);
168
178
  --color-feedback-success-low-text: var(--color-status-green-400);
169
179
  --color-feedback-success-low-icon: var(--color-status-green-400);
180
+ --color-feedback-success-low-border-subtle: var(--color-status-green-700);
170
181
  --color-feedback-success-low-border: var(--color-status-green-400);
171
182
  --color-feedback-success-low-background: var(--color-status-green-900);
172
183
  --color-feedback-success-high-text: var(--color-status-green-800);
@@ -180,6 +191,7 @@
180
191
  --color-feedback-warning-high-contrast-background: var(--color-status-yellow-500);
181
192
  --color-feedback-warning-low-text: var(--color-status-yellow-500);
182
193
  --color-feedback-warning-low-icon: var(--color-status-yellow-500);
194
+ --color-feedback-warning-low-border-subtle: var(--color-status-yellow-700);
183
195
  --color-feedback-warning-low-border: var(--color-status-yellow-500);
184
196
  --color-feedback-warning-low-background: var(--color-status-yellow-900);
185
197
  --color-feedback-warning-high-text: var(--color-status-yellow-900);
@@ -193,6 +205,7 @@
193
205
  --color-feedback-neutral-high-contrast-background: var(--color-gray-spark-250);
194
206
  --color-feedback-neutral-low-text: var(--color-gray-spark-250);
195
207
  --color-feedback-neutral-low-icon: var(--color-gray-spark-250);
208
+ --color-feedback-neutral-low-border-subtle: var(--color-gray-spark-500);
196
209
  --color-feedback-neutral-low-border: var(--color-gray-spark-250);
197
210
  --color-feedback-neutral-low-background: var(--color-gray-spark-800);
198
211
  --color-feedback-neutral-high-text: var(--color-gray-spark-800);
@@ -206,6 +219,7 @@
206
219
  --color-feedback-error-high-contrast-background: var(--color-status-red-300);
207
220
  --color-feedback-error-low-text: var(--color-status-red-300);
208
221
  --color-feedback-error-low-icon: var(--color-status-red-300);
222
+ --color-feedback-error-low-border-subtle: var(--color-status-red-700);
209
223
  --color-feedback-error-low-border: var(--color-status-red-300);
210
224
  --color-feedback-error-low-background: var(--color-status-red-900);
211
225
  --color-feedback-error-high-text: var(--color-status-red-900);
@@ -219,6 +233,7 @@
219
233
  --color-feedback-information-high-contrast-background: var(--color-status-blue-300);
220
234
  --color-feedback-information-low-text: var(--color-status-blue-300);
221
235
  --color-feedback-information-low-icon: var(--color-status-blue-300);
236
+ --color-feedback-information-low-border-subtle: var(--color-status-blue-700);
222
237
  --color-feedback-information-low-border: var(--color-status-blue-300);
223
238
  --color-feedback-information-low-background: var(--color-status-blue-900);
224
239
  --color-feedback-information-high-text: var(--color-status-blue-800);
@@ -769,42 +784,52 @@
769
784
  --color-dont-use-border: var(--color-gray-spark-100);
770
785
  --color-rainbow-10-text: var(--color-gray-spark-500);
771
786
  --color-rainbow-10-icon: var(--color-gray-spark-500);
787
+ --color-rainbow-10-border-light: var(--color-gray-spark-150);
772
788
  --color-rainbow-10-border: var(--color-gray-spark-500);
773
789
  --color-rainbow-10-background: var(--color-gray-spark-75);
774
790
  --color-rainbow-9-text: var(--color-lime-700);
775
791
  --color-rainbow-9-icon: var(--color-lime-700);
792
+ --color-rainbow-9-border-light: var(--color-lime-100);
776
793
  --color-rainbow-9-border: var(--color-lime-700);
777
794
  --color-rainbow-9-background: var(--color-lime-50);
778
795
  --color-rainbow-8-text: var(--color-petrol-600);
779
796
  --color-rainbow-8-icon: var(--color-petrol-600);
797
+ --color-rainbow-8-border-light: var(--color-petrol-100);
780
798
  --color-rainbow-8-border: var(--color-petrol-600);
781
799
  --color-rainbow-8-background: var(--color-petrol-50);
782
800
  --color-rainbow-7-text: var(--color-green-600);
783
801
  --color-rainbow-7-icon: var(--color-green-600);
802
+ --color-rainbow-7-border-light: var(--color-green-100);
784
803
  --color-rainbow-7-border: var(--color-green-600);
785
804
  --color-rainbow-7-background: var(--color-green-50);
786
805
  --color-rainbow-6-text: var(--color-crimson-400);
787
806
  --color-rainbow-6-icon: var(--color-crimson-400);
807
+ --color-rainbow-6-border-light: var(--color-crimson-100);
788
808
  --color-rainbow-6-border: var(--color-crimson-400);
789
809
  --color-rainbow-6-background: var(--color-crimson-50);
790
810
  --color-rainbow-5-text: var(--color-turquoise-800);
791
811
  --color-rainbow-5-icon: var(--color-turquoise-800);
812
+ --color-rainbow-5-border-light: var(--color-turquoise-100);
792
813
  --color-rainbow-5-border: var(--color-turquoise-800);
793
814
  --color-rainbow-5-background: var(--color-turquoise-50);
794
815
  --color-rainbow-4-text: var(--color-red-500);
795
816
  --color-rainbow-4-icon: var(--color-red-500);
817
+ --color-rainbow-4-border-light: var(--color-red-100);
796
818
  --color-rainbow-4-border: var(--color-red-500);
797
819
  --color-rainbow-4-background: var(--color-red-50);
798
820
  --color-rainbow-3-text: var(--color-yellow-800);
799
821
  --color-rainbow-3-icon: var(--color-yellow-800);
822
+ --color-rainbow-3-border-light: var(--color-yellow-200);
800
823
  --color-rainbow-3-border: var(--color-yellow-800);
801
- --color-rainbow-3-background: var(--color-yellow-100);
824
+ --color-rainbow-3-background: var(--color-yellow-50);
802
825
  --color-rainbow-2-text: var(--color-orange-700);
803
826
  --color-rainbow-2-icon: var(--color-orange-700);
827
+ --color-rainbow-2-border-light: var(--color-orange-100);
804
828
  --color-rainbow-2-border: var(--color-orange-700);
805
829
  --color-rainbow-2-background: var(--color-orange-50);
806
830
  --color-rainbow-1-text: var(--color-amber-700);
807
831
  --color-rainbow-1-icon: var(--color-amber-700);
832
+ --color-rainbow-1-border-light: var(--color-amber-100);
808
833
  --color-rainbow-1-border: var(--color-amber-700);
809
834
  --color-rainbow-1-background: var(--color-amber-50);
810
835
  --color-focus-brand: var(--color-orange-500);
@@ -815,6 +840,7 @@
815
840
  --color-feedback-success-high-contrast-background: var(--color-status-green-600);
816
841
  --color-feedback-success-low-text: var(--color-status-green-600);
817
842
  --color-feedback-success-low-icon: var(--color-status-green-600);
843
+ --color-feedback-success-low-border-subtle: var(--color-status-green-100);
818
844
  --color-feedback-success-low-border: var(--color-status-green-600);
819
845
  --color-feedback-success-low-background: var(--color-status-green-50);
820
846
  --color-feedback-success-high-text: var(--color-status-green-800);
@@ -828,6 +854,7 @@
828
854
  --color-feedback-warning-high-contrast-background: var(--color-status-yellow-700);
829
855
  --color-feedback-warning-low-text: var(--color-status-yellow-700);
830
856
  --color-feedback-warning-low-icon: var(--color-status-yellow-700);
857
+ --color-feedback-warning-low-border-subtle: var(--color-status-yellow-100);
831
858
  --color-feedback-warning-low-border: var(--color-status-yellow-700);
832
859
  --color-feedback-warning-low-background: var(--color-status-yellow-50);
833
860
  --color-feedback-warning-high-text: var(--color-status-yellow-900);
@@ -841,6 +868,7 @@
841
868
  --color-feedback-neutral-high-contrast-background: var(--color-gray-spark-450);
842
869
  --color-feedback-neutral-low-text: var(--color-gray-spark-450);
843
870
  --color-feedback-neutral-low-icon: var(--color-gray-spark-450);
871
+ --color-feedback-neutral-low-border-subtle: var(--color-gray-spark-100);
844
872
  --color-feedback-neutral-low-border: var(--color-gray-spark-450);
845
873
  --color-feedback-neutral-low-background: var(--color-gray-spark-50);
846
874
  --color-feedback-neutral-high-text: var(--color-gray-spark-800);
@@ -854,6 +882,7 @@
854
882
  --color-feedback-error-high-contrast-background: var(--color-status-red-600);
855
883
  --color-feedback-error-low-text: var(--color-status-red-600);
856
884
  --color-feedback-error-low-icon: var(--color-status-red-600);
885
+ --color-feedback-error-low-border-subtle: var(--color-status-red-100);
857
886
  --color-feedback-error-low-border: var(--color-status-red-600);
858
887
  --color-feedback-error-low-background: var(--color-status-red-50);
859
888
  --color-feedback-error-high-text: var(--color-status-red-900);
@@ -867,6 +896,7 @@
867
896
  --color-feedback-information-high-contrast-background: var(--color-status-blue-800);
868
897
  --color-feedback-information-low-text: var(--color-status-blue-500);
869
898
  --color-feedback-information-low-icon: var(--color-status-blue-500);
899
+ --color-feedback-information-low-border-subtle: var(--color-status-blue-100);
870
900
  --color-feedback-information-low-border: var(--color-status-blue-500);
871
901
  --color-feedback-information-low-background: var(--color-status-blue-50);
872
902
  --color-feedback-information-high-text: var(--color-status-blue-800);
@@ -1646,12 +1676,25 @@
1646
1676
  --avatar-md-font-size: 18.0000px;
1647
1677
  --avatar-sm-font-size: 13.0000px;
1648
1678
  --avatar-xs-font-size: 10.0000px;
1679
+ --tag-border-radius: var(--radius-rounded);
1680
+ --tag-height: var(--spacing-6);
1681
+ --tag-padding-x: var(--spacing-1-5);
1682
+ --tag-gap-x: var(--spacing-1);
1649
1683
  --splitter-handle-radius: var(--radius-rounded-md);
1650
1684
  --splitter-handle-wide-hover: var(--spacing-2);
1651
1685
  --splitter-handle-wide: var(--spacing-1);
1652
1686
  --splitter-handle-long: var(--spacing-6);
1653
1687
  --splitter-gutter: var(--spacing-6);
1654
1688
  --splitter-line-width: var(--spacing-1);
1689
+ --status-indicator-label-line-height: var(--line-height-xs);
1690
+ --status-indicator-label-size: var(--font-size-xs);
1691
+ --status-indicator-radius: var(--radius-rounded-full);
1692
+ --status-indicator-padding-y: var(--spacing-1);
1693
+ --status-indicator-padding-x: var(--spacing-1-5);
1694
+ --status-indicator-icon-size: var(--spacing-3);
1695
+ --status-indicator-width-icon-only: var(--spacing-6);
1696
+ --status-indicator-height: var(--spacing-6);
1697
+ --status-indicator-gap-x: var(--spacing-0-5);
1655
1698
  --pagination-table-padding-y: var(--spacing-2);
1656
1699
  --pagination-table-padding-x: var(--spacing-3);
1657
1700
  --pagination-table-padding-left: var(--spacing-3);
@@ -1969,8 +2012,8 @@
1969
2012
  --calendar-cell-font-size: var(--font-size-sm);
1970
2013
  --drawer-padding-y: var(--spacing-6);
1971
2014
  --drawer-padding-x: var(--spacing-6);
1972
- --drawer-gap-y: var(--spacing-6);
1973
2015
  --drawer-header-padding-right: var(--spacing-8);
2016
+ --drawer-gap-y: var(--spacing-6);
1974
2017
  --drawer-dismissible-position-right: var(--spacing-6);
1975
2018
  --drawer-dismissible-position-top: var(--spacing-6);
1976
2019
  --drawer-radius-top-left: var(--radius-rounded-2xl);
package/dist/generated/nova-tailwind-tokens.d.ts CHANGED
@@ -87,6 +87,9 @@ export declare const NOVA_TAILWIND_TOKENS: {
87
87
  '.border-feedback-error-low': {
88
88
  'border-color': string;
89
89
  };
90
+ '.border-feedback-error-low-subtle': {
91
+ 'border-color': string;
92
+ };
90
93
  '.icon-feedback-error-low': {
91
94
  color: string;
92
95
  };
@@ -123,6 +126,9 @@ export declare const NOVA_TAILWIND_TOKENS: {
123
126
  '.border-feedback-information-low': {
124
127
  'border-color': string;
125
128
  };
129
+ '.border-feedback-information-low-subtle': {
130
+ 'border-color': string;
131
+ };
126
132
  '.icon-feedback-information-low': {
127
133
  color: string;
128
134
  };
@@ -159,6 +165,9 @@ export declare const NOVA_TAILWIND_TOKENS: {
159
165
  '.border-feedback-neutral-low': {
160
166
  'border-color': string;
161
167
  };
168
+ '.border-feedback-neutral-low-subtle': {
169
+ 'border-color': string;
170
+ };
162
171
  '.icon-feedback-neutral-low': {
163
172
  color: string;
164
173
  };
@@ -195,6 +204,9 @@ export declare const NOVA_TAILWIND_TOKENS: {
195
204
  '.border-feedback-success-low': {
196
205
  'border-color': string;
197
206
  };
207
+ '.border-feedback-success-low-subtle': {
208
+ 'border-color': string;
209
+ };
198
210
  '.icon-feedback-success-low': {
199
211
  color: string;
200
212
  };
@@ -231,6 +243,9 @@ export declare const NOVA_TAILWIND_TOKENS: {
231
243
  '.border-feedback-warning-low': {
232
244
  'border-color': string;
233
245
  };
246
+ '.border-feedback-warning-low-subtle': {
247
+ 'border-color': string;
248
+ };
234
249
  '.icon-feedback-warning-low': {
235
250
  color: string;
236
251
  };
@@ -471,6 +486,9 @@ export declare const NOVA_TAILWIND_TOKENS: {
471
486
  '.border-rainbow-1': {
472
487
  'border-color': string;
473
488
  };
489
+ '.border-rainbow-1-light': {
490
+ 'border-color': string;
491
+ };
474
492
  '.icon-rainbow-1': {
475
493
  color: string;
476
494
  };
@@ -483,6 +501,9 @@ export declare const NOVA_TAILWIND_TOKENS: {
483
501
  '.border-rainbow-10': {
484
502
  'border-color': string;
485
503
  };
504
+ '.border-rainbow-10-light': {
505
+ 'border-color': string;
506
+ };
486
507
  '.icon-rainbow-10': {
487
508
  color: string;
488
509
  };
@@ -495,6 +516,9 @@ export declare const NOVA_TAILWIND_TOKENS: {
495
516
  '.border-rainbow-2': {
496
517
  'border-color': string;
497
518
  };
519
+ '.border-rainbow-2-light': {
520
+ 'border-color': string;
521
+ };
498
522
  '.icon-rainbow-2': {
499
523
  color: string;
500
524
  };
@@ -507,6 +531,9 @@ export declare const NOVA_TAILWIND_TOKENS: {
507
531
  '.border-rainbow-3': {
508
532
  'border-color': string;
509
533
  };
534
+ '.border-rainbow-3-light': {
535
+ 'border-color': string;
536
+ };
510
537
  '.icon-rainbow-3': {
511
538
  color: string;
512
539
  };
@@ -519,6 +546,9 @@ export declare const NOVA_TAILWIND_TOKENS: {
519
546
  '.border-rainbow-4': {
520
547
  'border-color': string;
521
548
  };
549
+ '.border-rainbow-4-light': {
550
+ 'border-color': string;
551
+ };
522
552
  '.icon-rainbow-4': {
523
553
  color: string;
524
554
  };
@@ -531,6 +561,9 @@ export declare const NOVA_TAILWIND_TOKENS: {
531
561
  '.border-rainbow-5': {
532
562
  'border-color': string;
533
563
  };
564
+ '.border-rainbow-5-light': {
565
+ 'border-color': string;
566
+ };
534
567
  '.icon-rainbow-5': {
535
568
  color: string;
536
569
  };
@@ -543,6 +576,9 @@ export declare const NOVA_TAILWIND_TOKENS: {
543
576
  '.border-rainbow-6': {
544
577
  'border-color': string;
545
578
  };
579
+ '.border-rainbow-6-light': {
580
+ 'border-color': string;
581
+ };
546
582
  '.icon-rainbow-6': {
547
583
  color: string;
548
584
  };
@@ -555,6 +591,9 @@ export declare const NOVA_TAILWIND_TOKENS: {
555
591
  '.border-rainbow-7': {
556
592
  'border-color': string;
557
593
  };
594
+ '.border-rainbow-7-light': {
595
+ 'border-color': string;
596
+ };
558
597
  '.icon-rainbow-7': {
559
598
  color: string;
560
599
  };
@@ -567,6 +606,9 @@ export declare const NOVA_TAILWIND_TOKENS: {
567
606
  '.border-rainbow-8': {
568
607
  'border-color': string;
569
608
  };
609
+ '.border-rainbow-8-light': {
610
+ 'border-color': string;
611
+ };
570
612
  '.icon-rainbow-8': {
571
613
  color: string;
572
614
  };
@@ -579,6 +621,9 @@ export declare const NOVA_TAILWIND_TOKENS: {
579
621
  '.border-rainbow-9': {
580
622
  'border-color': string;
581
623
  };
624
+ '.border-rainbow-9-light': {
625
+ 'border-color': string;
626
+ };
582
627
  '.icon-rainbow-9': {
583
628
  color: string;
584
629
  };