@nova-design-system/nova-base 3.1.0 → 3.3.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 (21) hide show
  1. package/assets/icons/icon-sprite.svg +1 -1
  2. package/dist/cjs/plugin/nova-plugin.js +188 -0
  3. package/dist/css/mccs.css +53 -2
  4. package/dist/css/ocean.css +53 -2
  5. package/dist/css/spark.css +53 -2
  6. package/dist/js/mccs_dark.d.ts +20 -0
  7. package/dist/js/mccs_dark.js +20 -0
  8. package/dist/js/mccs_light.d.ts +20 -0
  9. package/dist/js/mccs_light.js +20 -0
  10. package/dist/js/ocean_dark.d.ts +20 -0
  11. package/dist/js/ocean_dark.js +20 -0
  12. package/dist/js/ocean_light.d.ts +20 -0
  13. package/dist/js/ocean_light.js +21 -1
  14. package/dist/js/spacings.d.ts +11 -0
  15. package/dist/js/spacings.js +11 -0
  16. package/dist/js/spark_dark.d.ts +20 -0
  17. package/dist/js/spark_dark.js +20 -0
  18. package/dist/js/spark_light.d.ts +20 -0
  19. package/dist/js/spark_light.js +21 -1
  20. package/dist/plugin/nova-plugin.js +224 -0
  21. package/package.json +1 -1
package/dist/cjs/plugin/nova-plugin.js CHANGED
@@ -100,6 +100,194 @@ exports.novaTailwindPlugin = (0, plugin_js_1.default)(function (_a) {
100
100
  width: 'revert',
101
101
  }, '.w-unset': {
102
102
  width: 'unset',
103
+ },
104
+ // Typography utilities
105
+ // .typo-{type}-{size}-{weight}
106
+ // Headings
107
+ '.typo-heading-xl-regular': {
108
+ 'font-size': 'var(--font-size-4xl)',
109
+ 'font-weight': '400',
110
+ 'line-height': 'var(--leading-px-10)',
111
+ 'letter-spacing': 'var(--letter-spacing-heading-xl)',
112
+ }, '.typo-heading-xl-medium': {
113
+ 'font-size': 'var(--font-size-4xl)',
114
+ 'font-weight': '500',
115
+ 'line-height': 'var(--leading-px-10)',
116
+ 'letter-spacing': 'var(--letter-spacing-heading-xl)',
117
+ }, '.typo-heading-xl-bold': {
118
+ 'font-size': 'var(--font-size-4xl)',
119
+ 'font-weight': '700',
120
+ 'line-height': 'var(--leading-px-10)',
121
+ 'letter-spacing': 'var(--letter-spacing-heading-xl)',
122
+ }, '.typo-heading-lg-regular': {
123
+ 'font-size': 'var(--font-size-3xl)',
124
+ 'font-weight': '400',
125
+ 'line-height': 'var(--leading-px-8)',
126
+ 'letter-spacing': 'var(--letter-spacing-heading-lg)',
127
+ }, '.typo-heading-lg-medium': {
128
+ 'font-size': 'var(--font-size-3xl)',
129
+ 'font-weight': '500',
130
+ 'line-height': 'var(--leading-px-8)',
131
+ 'letter-spacing': 'var(--letter-spacing-heading-lg)',
132
+ }, '.typo-heading-lg-bold': {
133
+ 'font-size': 'var(--font-size-3xl)',
134
+ 'font-weight': '700',
135
+ 'line-height': 'var(--leading-px-8)',
136
+ 'letter-spacing': 'var(--letter-spacing-heading-lg)',
137
+ }, '.typo-heading-md-regular': {
138
+ 'font-size': 'var(--font-size-2xl)',
139
+ 'font-weight': '400',
140
+ 'line-height': 'var(--leading-px-7)',
141
+ 'letter-spacing': 'var(--letter-spacing-heading-md)',
142
+ }, '.typo-heading-md-medium': {
143
+ 'font-size': 'var(--font-size-2xl)',
144
+ 'font-weight': '500',
145
+ 'line-height': 'var(--leading-px-7)',
146
+ 'letter-spacing': 'var(--letter-spacing-heading-md)',
147
+ }, '.typo-heading-md-bold': {
148
+ 'font-size': 'var(--font-size-2xl)',
149
+ 'font-weight': '700',
150
+ 'line-height': 'var(--leading-px-7)',
151
+ 'letter-spacing': 'var(--letter-spacing-heading-md)',
152
+ }, '.typo-heading-sm-regular': {
153
+ 'font-size': 'var(--font-size-xl)',
154
+ 'font-weight': '400',
155
+ 'line-height': 'var(--leading-px-6)',
156
+ 'letter-spacing': 'var(--letter-spacing-heading-sm)',
157
+ }, '.typo-heading-sm-medium': {
158
+ 'font-size': 'var(--font-size-xl)',
159
+ 'font-weight': '500',
160
+ 'line-height': 'var(--leading-px-6)',
161
+ 'letter-spacing': 'var(--letter-spacing-heading-sm)',
162
+ }, '.typo-heading-sm-bold': {
163
+ 'font-size': 'var(--font-size-xl)',
164
+ 'font-weight': '700',
165
+ 'line-height': 'var(--leading-px-6)',
166
+ 'letter-spacing': 'var(--letter-spacing-heading-sm)',
167
+ }, '.typo-heading-xs-regular': {
168
+ 'font-size': 'var(--font-size-lg)',
169
+ 'font-weight': '400',
170
+ 'line-height': 'var(--leading-px-6)',
171
+ 'letter-spacing': 'var(--letter-spacing-heading-xs)',
172
+ }, '.typo-heading-xs-medium': {
173
+ 'font-size': 'var(--font-size-lg)',
174
+ 'font-weight': '500',
175
+ 'line-height': 'var(--leading-px-6)',
176
+ 'letter-spacing': 'var(--letter-spacing-heading-xs)',
177
+ }, '.typo-heading-xs-bold': {
178
+ 'font-size': 'var(--font-size-lg)',
179
+ 'font-weight': '700',
180
+ 'line-height': 'var(--leading-px-6)',
181
+ 'letter-spacing': 'var(--letter-spacing-heading-xs)',
182
+ },
183
+ // Text
184
+ '.typo-text-xl-regular': {
185
+ 'font-size': 'var(--font-size-xl)',
186
+ 'font-weight': '400',
187
+ 'line-height': 'var(--line-height-xl)',
188
+ }, '.typo-text-xl-medium': {
189
+ 'font-size': 'var(--font-size-xl)',
190
+ 'font-weight': '500',
191
+ 'line-height': 'var(--line-height-xl)',
192
+ }, '.typo-text-xl-bold': {
193
+ 'font-size': 'var(--font-size-xl)',
194
+ 'font-weight': '700',
195
+ 'line-height': 'var(--line-height-xl)',
196
+ }, '.typo-text-lg-regular': {
197
+ 'font-size': 'var(--font-size-lg)',
198
+ 'font-weight': '400',
199
+ 'line-height': 'var(--line-height-lg)',
200
+ }, '.typo-text-lg-medium': {
201
+ 'font-size': 'var(--font-size-lg)',
202
+ 'font-weight': '500',
203
+ 'line-height': 'var(--line-height-lg)',
204
+ }, '.typo-text-lg-bold': {
205
+ 'font-size': 'var(--font-size-lg)',
206
+ 'font-weight': '700',
207
+ 'line-height': 'var(--line-height-lg)',
208
+ }, '.typo-text-md-regular': {
209
+ 'font-size': 'var(--font-size-md)',
210
+ 'font-weight': '400',
211
+ 'line-height': 'var(--line-height-b ase)',
212
+ }, '.typo-text-md-medium': {
213
+ 'font-size': 'var(--font-size-md)',
214
+ 'font-weight': '500',
215
+ 'line-height': 'var(--line-height-base)',
216
+ }, '.typo-text-md-bold': {
217
+ 'font-size': 'var(--font-size-md)',
218
+ 'font-weight': '700',
219
+ 'line-height': 'var(--line-height-base)',
220
+ }, '.typo-text-sm-regular': {
221
+ 'font-size': 'var(--font-size-sm)',
222
+ 'font-weight': '400',
223
+ 'line-height': 'var(--line-height-sm)',
224
+ }, '.typo-text-sm-medium': {
225
+ 'font-size': 'var(--font-size-sm)',
226
+ 'font-weight': '500',
227
+ 'line-height': 'var(--line-height-sm)',
228
+ }, '.typo-text-sm-bold': {
229
+ 'font-size': 'var(--font-size-sm)',
230
+ 'font-weight': '700',
231
+ 'line-height': 'var(--line-height-sm)',
232
+ }, '.typo-text-xs-regular': {
233
+ 'font-size': 'var(--font-size-xs)',
234
+ 'font-weight': '400',
235
+ 'line-height': 'var(--line-height-xs)',
236
+ }, '.typo-text-xs-medium': {
237
+ 'font-size': 'var(--font-size-xs)',
238
+ 'font-weight': '500',
239
+ 'line-height': 'var(--line-height-xs)',
240
+ }, '.typo-text-xs-bold': {
241
+ 'font-size': 'var(--font-size-xs)',
242
+ 'font-weight': '700',
243
+ 'line-height': 'var(--line-height-xs)',
244
+ },
245
+ // Mono
246
+ '.typo-mono-md-regular': {
247
+ 'font-family': 'TT Norms Pro Mono',
248
+ 'font-size': 'var(--font-size-md)',
249
+ 'font-weight': '400',
250
+ 'line-height': 'var(--line-height-base)',
251
+ }, '.typo-mono-md-medium': {
252
+ 'font-family': 'TT Norms Pro Mono',
253
+ 'font-size': 'var(--font-size-md)',
254
+ 'font-weight': '500',
255
+ 'line-height': 'var(--line-height-base)',
256
+ }, '.typo-mono-md-bold': {
257
+ 'font-family': 'TT Norms Pro Mono',
258
+ 'font-size': 'var(--font-size-md)',
259
+ 'font-weight': '700',
260
+ 'line-height': 'var(--line-height-base)',
261
+ }, '.typo-mono-sm-regular': {
262
+ 'font-family': 'TT Norms Pro Mono',
263
+ 'font-size': 'var(--font-size-sm)',
264
+ 'font-weight': '400',
265
+ 'line-height': 'var(--line-height-sm)',
266
+ }, '.typo-mono-sm-medium': {
267
+ 'font-family': 'TT Norms Pro Mono',
268
+ 'font-size': 'var(--font-size-sm)',
269
+ 'font-weight': '500',
270
+ 'line-height': 'var(--line-height-sm)',
271
+ }, '.typo-mono-sm-bold': {
272
+ 'font-family': 'TT Norms Pro Mono',
273
+ 'font-size': 'var(--font-size-sm)',
274
+ 'font-weight': '700',
275
+ 'line-height': 'var(--line-height-sm)',
276
+ }, '.typo-mono-xs-regular': {
277
+ 'font-family': 'TT Norms Pro Mono',
278
+ 'font-size': 'var(--font-size-xs)',
279
+ 'font-weight': '400',
280
+ 'line-height': 'var(--line-height-xs)',
281
+ }, '.typo-mono-xs-medium': {
282
+ 'font-family': 'TT Norms Pro Mono',
283
+ 'font-size': 'var(--font-size-xs)',
284
+ 'font-weight': '500',
285
+ 'line-height': 'var(--line-height-xs)',
286
+ }, '.typo-mono-xs-bold': {
287
+ 'font-family': 'TT Norms Pro Mono',
288
+ 'font-size': 'var(--font-size-xs)',
289
+ 'font-weight': '700',
290
+ 'line-height': 'var(--line-height-xs)',
103
291
  } }));
104
292
  });
105
293
  exports.default = exports.novaTailwindPlugin;
package/dist/css/mccs.css CHANGED
@@ -310,6 +310,9 @@
310
310
  --color-interaction-container-branded-low-border: var(--color-petrol-400);
311
311
  --components-tooltip-supporting-text: var(--color-content-inverted-medium-text);
312
312
  --components-tooltip-text: var(--color-content-inverted-high-text);
313
+ --components-slider-handler-border-focus: var(--components-form-field-background-checked);
314
+ --components-slider-handler-background-focus: var(--components-form-field-background-checked);
315
+ --components-slider-track-background: var(--color-content-low-border);
313
316
  --components-popover-supporting-text: var(--color-content-low-text);
314
317
  --components-popover-text: var(--color-content-inverted-medium-text);
315
318
  --components-popover-border: var(--color-content-low-border);
@@ -449,7 +452,7 @@
449
452
  --components-form-field-border-disabled: var(--color-content-medium-border);
450
453
  --components-form-field-border-default: var(--color-content-medium-border);
451
454
  --components-form-field-background-readonly: var(--color-level-05-background);
452
- --components-form-field-background-error: var(--color-feedback-error-high-background);
455
+ --components-form-field-background-error: var(--color-feedback-error-low-border);
453
456
  --components-form-field-background-disabled: var(--color-level-10-background);
454
457
  --components-form-field-background-hover: var(--color-level-05-background);
455
458
  --components-form-field-background-focus: var(--color-level-00-background);
@@ -494,6 +497,7 @@
494
497
  --components-button-high-background-active: var(--color-interaction-container-branded-high-background-hover);
495
498
  --components-button-high-background: var(--color-interaction-container-branded-high-background);
496
499
  --color-focus-success: var(--color-feedback-success-low-border);
500
+ --color-focus-destructive-in-field: var(--color-feedback-error-low-border);
497
501
  --color-focus-destructive: var(--color-feedback-error-high-border);
498
502
  --color-focus-background-inverted: var(--color-level-inverted-00-background);
499
503
  --color-focus-background: var(--color-level-00-background);
@@ -513,6 +517,22 @@
513
517
  --color-interaction-container-neutral-icon: var(--color-content-low-text);
514
518
  --color-interaction-container-neutral-border-hover: var(--color-content-medium-text);
515
519
  --color-interaction-container-neutral-border: var(--color-content-low-text);
520
+ --components-slider-handler-border-readonly: var(--components-form-field-background-readonly);
521
+ --components-slider-handler-border-disabled: var(--components-form-field-background-disabled);
522
+ --components-slider-handler-border-error: var(--components-form-field-background-error);
523
+ --components-slider-handler-border-hover: var(--components-form-field-background-hover);
524
+ --components-slider-handler-border-default: var(--components-form-field-background-default);
525
+ --components-slider-handler-background-readonly: var(--components-form-field-background-readonly);
526
+ --components-slider-handler-background-disabled: var(--components-form-field-background-disabled);
527
+ --components-slider-handler-background-error: var(--components-form-field-background-error);
528
+ --components-slider-handler-background-hover: var(--components-form-field-background-hover);
529
+ --components-slider-handler-background-default: var(--components-form-field-background-default);
530
+ --components-slider-track-filled-readonly: var(--components-form-field-border-readonly);
531
+ --components-slider-track-filled-disabled: var(--components-form-field-border-disabled);
532
+ --components-slider-track-filled-error: var(--components-form-field-border-error);
533
+ --components-slider-track-filled-focus: var(--components-form-field-border-focus);
534
+ --components-slider-track-filled-hover: var(--components-form-field-border-hover);
535
+ --components-slider-track-filled-default: var(--components-form-field-border-default);
516
536
  --components-menu-contextual-item-content-hover: var(--color-interaction-container-neutral-text-hover);
517
537
  --components-menu-contextual-item-content: var(--color-interaction-container-neutral-text);
518
538
  --components-calendar-cell-text-hover: var(--color-interaction-container-neutral-text-hover);
@@ -836,6 +856,9 @@
836
856
  --color-interaction-container-branded-low-border: var(--color-petrol-600);
837
857
  --components-tooltip-supporting-text: var(--color-content-inverted-medium-text);
838
858
  --components-tooltip-text: var(--color-content-inverted-high-text);
859
+ --components-slider-handler-border-focus: var(--components-form-field-background-checked);
860
+ --components-slider-handler-background-focus: var(--components-form-field-background-checked);
861
+ --components-slider-track-background: var(--color-content-low-border);
839
862
  --components-popover-supporting-text: var(--color-content-low-text);
840
863
  --components-popover-text: var(--color-content-medium-text);
841
864
  --components-popover-border: var(--color-content-low-border);
@@ -975,7 +998,7 @@
975
998
  --components-form-field-border-disabled: var(--color-content-medium-border);
976
999
  --components-form-field-border-default: var(--color-content-medium-border);
977
1000
  --components-form-field-background-readonly: var(--color-level-05-background);
978
- --components-form-field-background-error: var(--color-feedback-error-high-background);
1001
+ --components-form-field-background-error: var(--color-feedback-error-low-border);
979
1002
  --components-form-field-background-disabled: var(--color-level-10-background);
980
1003
  --components-form-field-background-hover: var(--color-level-05-background);
981
1004
  --components-form-field-background-focus: var(--color-level-00-background);
@@ -1019,6 +1042,7 @@
1019
1042
  --components-button-high-background-active: var(--color-interaction-container-branded-high-background-hover);
1020
1043
  --components-button-high-background: var(--color-interaction-container-branded-high-background);
1021
1044
  --color-focus-success: var(--color-feedback-success-low-border);
1045
+ --color-focus-destructive-in-field: var(--color-feedback-error-low-border);
1022
1046
  --color-focus-destructive: var(--color-feedback-error-high-border);
1023
1047
  --color-focus-background-inverted: var(--color-level-inverted-00-background);
1024
1048
  --color-focus-background: var(--color-level-00-background);
@@ -1038,6 +1062,22 @@
1038
1062
  --color-interaction-container-neutral-icon: var(--color-content-low-text);
1039
1063
  --color-interaction-container-neutral-border-hover: var(--color-content-medium-text);
1040
1064
  --color-interaction-container-neutral-border: var(--color-content-inverted-low-text);
1065
+ --components-slider-handler-border-readonly: var(--components-form-field-background-readonly);
1066
+ --components-slider-handler-border-disabled: var(--components-form-field-background-disabled);
1067
+ --components-slider-handler-border-error: var(--components-form-field-background-error);
1068
+ --components-slider-handler-border-hover: var(--components-form-field-background-hover);
1069
+ --components-slider-handler-border-default: var(--components-form-field-background-default);
1070
+ --components-slider-handler-background-readonly: var(--components-form-field-background-readonly);
1071
+ --components-slider-handler-background-disabled: var(--components-form-field-background-disabled);
1072
+ --components-slider-handler-background-error: var(--components-form-field-background-error);
1073
+ --components-slider-handler-background-hover: var(--components-form-field-background-hover);
1074
+ --components-slider-handler-background-default: var(--components-form-field-background-default);
1075
+ --components-slider-track-filled-readonly: var(--components-form-field-border-readonly);
1076
+ --components-slider-track-filled-disabled: var(--components-form-field-border-disabled);
1077
+ --components-slider-track-filled-error: var(--components-form-field-border-error);
1078
+ --components-slider-track-filled-focus: var(--components-form-field-border-focus);
1079
+ --components-slider-track-filled-hover: var(--components-form-field-border-hover);
1080
+ --components-slider-track-filled-default: var(--components-form-field-border-default);
1041
1081
  --components-menu-contextual-item-content-hover: var(--color-interaction-container-neutral-text-hover);
1042
1082
  --components-menu-contextual-item-content: var(--color-interaction-container-neutral-text);
1043
1083
  --components-calendar-cell-text-hover: var(--color-interaction-container-neutral-text-hover);
@@ -1332,6 +1372,7 @@
1332
1372
  */
1333
1373
 
1334
1374
  :root {
1375
+ --slider-tick-radius: 1px;
1335
1376
  --global-typography-legend-font-style: uppercase;
1336
1377
  --global-typography-label-font-style: normal;
1337
1378
  --global-typography-small-font-style: normal;
@@ -1349,6 +1390,7 @@
1349
1390
  --popover-font-weight: 500;
1350
1391
  --menu-contextual-item-font-weight: 500;
1351
1392
  --menu-contextual-divider-padding-bottom: 3px;
1393
+ --form-max-width: 480px;
1352
1394
  --form-field-badge-gap: 0px;
1353
1395
  --list-native-separator-padding-y: 3px;
1354
1396
  --list-native-separator-padding-x: 9px;
@@ -1450,6 +1492,15 @@
1450
1492
  --alert-icon-position-x: var(--spacing-4);
1451
1493
  --alert-gap-x: var(--spacing-3);
1452
1494
  --alert-icon-size: var(--spacing-5);
1495
+ --slider-track-radius: var(--radius-rounded-sm);
1496
+ --slider-track-padding-x: var(--spacing-3);
1497
+ --slider-track-height: var(--spacing-1);
1498
+ --slider-handler-stroke: var(--spacing-0-5);
1499
+ --slider-handler-size-inner: var(--spacing-4);
1500
+ --slider-handler-size-max: var(--spacing-6);
1501
+ --slider-handler-size-min: var(--spacing-5);
1502
+ --slider-tick-width: var(--spacing-0-5);
1503
+ --slider-tick-height: var(--spacing-1);
1453
1504
  --global-typography-legend-font-weight: var(--font-weight-medium-emphasis);
1454
1505
  --global-typography-legend-line-height: var(--line-height-xs);
1455
1506
  --global-typography-legend-font-size: var(--font-size-xs);
package/dist/css/ocean.css CHANGED
@@ -303,6 +303,9 @@
303
303
  --color-interaction-container-branded-low-background-active: var(--color-petrol-900);
304
304
  --components-tooltip-supporting-text: var(--color-content-inverted-medium-text);
305
305
  --components-tooltip-text: var(--color-content-inverted-high-text);
306
+ --components-slider-handler-border-focus: var(--components-form-field-background-checked);
307
+ --components-slider-handler-background-focus: var(--components-form-field-background-checked);
308
+ --components-slider-track-background: var(--color-content-low-border);
306
309
  --components-popover-supporting-text: var(--color-content-low-text);
307
310
  --components-popover-text: var(--color-content-inverted-medium-text);
308
311
  --components-popover-border: var(--color-content-low-border);
@@ -447,7 +450,7 @@
447
450
  --components-form-field-border-disabled: var(--color-content-medium-border);
448
451
  --components-form-field-border-default: var(--color-content-medium-border);
449
452
  --components-form-field-background-readonly: var(--color-level-05-background);
450
- --components-form-field-background-error: var(--color-feedback-error-high-background);
453
+ --components-form-field-background-error: var(--color-feedback-error-low-border);
451
454
  --components-form-field-background-disabled: var(--color-level-10-background);
452
455
  --components-form-field-background-hover: var(--color-level-05-background);
453
456
  --components-form-field-background-focus: var(--color-level-00-background);
@@ -490,6 +493,7 @@
490
493
  --components-button-high-background-active: var(--color-interaction-container-branded-high-background-active);
491
494
  --components-button-high-background: var(--color-interaction-container-branded-high-background);
492
495
  --color-focus-success: var(--color-feedback-success-low-border);
496
+ --color-focus-destructive-in-field: var(--color-feedback-error-low-border);
493
497
  --color-focus-destructive: var(--color-feedback-error-high-border);
494
498
  --color-focus-background-inverted: var(--color-level-inverted-00-background);
495
499
  --color-focus-background: var(--color-level-00-background);
@@ -509,6 +513,22 @@
509
513
  --color-interaction-container-neutral-icon: var(--color-content-low-text);
510
514
  --color-interaction-container-neutral-border-hover: var(--color-content-medium-text);
511
515
  --color-interaction-container-neutral-border: var(--color-content-low-text);
516
+ --components-slider-handler-border-readonly: var(--components-form-field-background-readonly);
517
+ --components-slider-handler-border-disabled: var(--components-form-field-background-disabled);
518
+ --components-slider-handler-border-error: var(--components-form-field-background-error);
519
+ --components-slider-handler-border-hover: var(--components-form-field-background-hover);
520
+ --components-slider-handler-border-default: var(--components-form-field-background-default);
521
+ --components-slider-handler-background-readonly: var(--components-form-field-background-readonly);
522
+ --components-slider-handler-background-disabled: var(--components-form-field-background-disabled);
523
+ --components-slider-handler-background-error: var(--components-form-field-background-error);
524
+ --components-slider-handler-background-hover: var(--components-form-field-background-hover);
525
+ --components-slider-handler-background-default: var(--components-form-field-background-default);
526
+ --components-slider-track-filled-readonly: var(--components-form-field-border-readonly);
527
+ --components-slider-track-filled-disabled: var(--components-form-field-border-disabled);
528
+ --components-slider-track-filled-error: var(--components-form-field-border-error);
529
+ --components-slider-track-filled-focus: var(--components-form-field-border-focus);
530
+ --components-slider-track-filled-hover: var(--components-form-field-border-hover);
531
+ --components-slider-track-filled-default: var(--components-form-field-border-default);
512
532
  --components-menu-contextual-item-content-hover: var(--color-interaction-container-neutral-text-hover);
513
533
  --components-menu-contextual-item-content: var(--color-interaction-container-neutral-text);
514
534
  --components-calendar-cell-text-hover: var(--color-interaction-container-neutral-text-hover);
@@ -850,6 +870,9 @@
850
870
  --color-interaction-container-branded-low-background-active: var(--color-petrol-50);
851
871
  --components-tooltip-supporting-text: var(--color-content-inverted-medium-text);
852
872
  --components-tooltip-text: var(--color-content-inverted-high-text);
873
+ --components-slider-handler-border-focus: var(--components-form-field-background-checked);
874
+ --components-slider-handler-background-focus: var(--components-form-field-background-checked);
875
+ --components-slider-track-background: var(--color-content-low-border);
853
876
  --components-popover-supporting-text: var(--color-content-low-text);
854
877
  --components-popover-text: var(--color-content-medium-text);
855
878
  --components-popover-border: var(--color-content-low-border);
@@ -994,7 +1017,7 @@
994
1017
  --components-form-field-border-disabled: var(--color-content-medium-border);
995
1018
  --components-form-field-border-default: var(--color-content-medium-border);
996
1019
  --components-form-field-background-readonly: var(--color-level-05-background);
997
- --components-form-field-background-error: var(--color-feedback-error-high-background);
1020
+ --components-form-field-background-error: var(--color-feedback-error-low-border);
998
1021
  --components-form-field-background-disabled: var(--color-level-10-background);
999
1022
  --components-form-field-background-hover: var(--color-level-05-background);
1000
1023
  --components-form-field-background-focus: var(--color-level-00-background);
@@ -1037,6 +1060,7 @@
1037
1060
  --components-button-high-background-active: var(--color-interaction-container-branded-high-background-active);
1038
1061
  --components-button-high-background: var(--color-interaction-container-branded-high-background);
1039
1062
  --color-focus-success: var(--color-feedback-success-low-border);
1063
+ --color-focus-destructive-in-field: var(--color-feedback-error-low-border);
1040
1064
  --color-focus-destructive: var(--color-feedback-error-high-border);
1041
1065
  --color-focus-background-inverted: var(--color-level-inverted-00-background);
1042
1066
  --color-focus-background: var(--color-level-00-background);
@@ -1056,6 +1080,22 @@
1056
1080
  --color-interaction-container-neutral-icon: var(--color-content-low-text);
1057
1081
  --color-interaction-container-neutral-border-hover: var(--color-content-medium-text);
1058
1082
  --color-interaction-container-neutral-border: var(--color-content-inverted-low-text);
1083
+ --components-slider-handler-border-readonly: var(--components-form-field-background-readonly);
1084
+ --components-slider-handler-border-disabled: var(--components-form-field-background-disabled);
1085
+ --components-slider-handler-border-error: var(--components-form-field-background-error);
1086
+ --components-slider-handler-border-hover: var(--components-form-field-background-hover);
1087
+ --components-slider-handler-border-default: var(--components-form-field-background-default);
1088
+ --components-slider-handler-background-readonly: var(--components-form-field-background-readonly);
1089
+ --components-slider-handler-background-disabled: var(--components-form-field-background-disabled);
1090
+ --components-slider-handler-background-error: var(--components-form-field-background-error);
1091
+ --components-slider-handler-background-hover: var(--components-form-field-background-hover);
1092
+ --components-slider-handler-background-default: var(--components-form-field-background-default);
1093
+ --components-slider-track-filled-readonly: var(--components-form-field-border-readonly);
1094
+ --components-slider-track-filled-disabled: var(--components-form-field-border-disabled);
1095
+ --components-slider-track-filled-error: var(--components-form-field-border-error);
1096
+ --components-slider-track-filled-focus: var(--components-form-field-border-focus);
1097
+ --components-slider-track-filled-hover: var(--components-form-field-border-hover);
1098
+ --components-slider-track-filled-default: var(--components-form-field-border-default);
1059
1099
  --components-menu-contextual-item-content-hover: var(--color-interaction-container-neutral-text-hover);
1060
1100
  --components-menu-contextual-item-content: var(--color-interaction-container-neutral-text);
1061
1101
  --components-calendar-cell-text-hover: var(--color-interaction-container-neutral-text-hover);
@@ -1353,6 +1393,7 @@
1353
1393
  */
1354
1394
 
1355
1395
  :root {
1396
+ --slider-tick-radius: 1px;
1356
1397
  --global-typography-legend-font-style: uppercase;
1357
1398
  --global-typography-label-font-style: normal;
1358
1399
  --global-typography-small-font-style: normal;
@@ -1370,6 +1411,7 @@
1370
1411
  --popover-font-weight: 500;
1371
1412
  --menu-contextual-item-font-weight: 500;
1372
1413
  --menu-contextual-divider-padding-bottom: 3px;
1414
+ --form-max-width: 480px;
1373
1415
  --form-field-badge-gap: 0px;
1374
1416
  --list-native-separator-padding-y: 3px;
1375
1417
  --list-native-separator-padding-x: 9px;
@@ -1471,6 +1513,15 @@
1471
1513
  --alert-icon-position-x: var(--spacing-4);
1472
1514
  --alert-gap-x: var(--spacing-3);
1473
1515
  --alert-icon-size: var(--spacing-5);
1516
+ --slider-track-radius: var(--radius-rounded-sm);
1517
+ --slider-track-padding-x: var(--spacing-3);
1518
+ --slider-track-height: var(--spacing-1);
1519
+ --slider-handler-stroke: var(--spacing-0-5);
1520
+ --slider-handler-size-inner: var(--spacing-4);
1521
+ --slider-handler-size-max: var(--spacing-6);
1522
+ --slider-handler-size-min: var(--spacing-5);
1523
+ --slider-tick-width: var(--spacing-0-5);
1524
+ --slider-tick-height: var(--spacing-1);
1474
1525
  --global-typography-legend-font-weight: var(--font-weight-medium-emphasis);
1475
1526
  --global-typography-legend-line-height: var(--line-height-xs);
1476
1527
  --global-typography-legend-font-size: var(--font-size-xs);
package/dist/css/spark.css CHANGED
@@ -303,6 +303,9 @@
303
303
  --color-interaction-container-branded-low-background-active: var(--color-orange-900);
304
304
  --components-tooltip-supporting-text: var(--color-content-inverted-medium-text);
305
305
  --components-tooltip-text: var(--color-content-inverted-high-text);
306
+ --components-slider-handler-border-focus: var(--components-form-field-background-checked);
307
+ --components-slider-handler-background-focus: var(--components-form-field-background-checked);
308
+ --components-slider-track-background: var(--color-content-low-border);
306
309
  --components-popover-supporting-text: var(--color-content-low-text);
307
310
  --components-popover-text: var(--color-content-medium-text);
308
311
  --components-popover-border: var(--color-content-low-border);
@@ -447,7 +450,7 @@
447
450
  --components-form-field-border-disabled: var(--color-content-medium-border);
448
451
  --components-form-field-border-default: var(--color-content-medium-border);
449
452
  --components-form-field-background-readonly: var(--color-level-05-background);
450
- --components-form-field-background-error: var(--color-feedback-error-high-background);
453
+ --components-form-field-background-error: var(--color-feedback-error-low-border);
451
454
  --components-form-field-background-disabled: var(--color-level-10-background);
452
455
  --components-form-field-background-hover: var(--color-level-05-background);
453
456
  --components-form-field-background-focus: var(--color-level-00-background);
@@ -490,6 +493,7 @@
490
493
  --components-button-high-background-active: var(--color-interaction-container-branded-high-background-active);
491
494
  --components-button-high-background: var(--color-interaction-container-branded-high-background);
492
495
  --color-focus-success: var(--color-feedback-success-low-border);
496
+ --color-focus-destructive-in-field: var(--color-feedback-error-low-border);
493
497
  --color-focus-destructive: var(--color-feedback-error-high-border);
494
498
  --color-focus-background-inverted: var(--color-level-inverted-00-background);
495
499
  --color-focus-background: var(--color-level-00-background);
@@ -509,6 +513,22 @@
509
513
  --color-interaction-container-neutral-icon: var(--color-content-low-text);
510
514
  --color-interaction-container-neutral-border-hover: var(--color-content-medium-text);
511
515
  --color-interaction-container-neutral-border: var(--color-content-low-text);
516
+ --components-slider-handler-border-readonly: var(--components-form-field-background-readonly);
517
+ --components-slider-handler-border-disabled: var(--components-form-field-background-disabled);
518
+ --components-slider-handler-border-error: var(--components-form-field-background-error);
519
+ --components-slider-handler-border-hover: var(--components-form-field-background-hover);
520
+ --components-slider-handler-border-default: var(--components-form-field-background-default);
521
+ --components-slider-handler-background-readonly: var(--components-form-field-background-readonly);
522
+ --components-slider-handler-background-disabled: var(--components-form-field-background-disabled);
523
+ --components-slider-handler-background-error: var(--components-form-field-background-error);
524
+ --components-slider-handler-background-hover: var(--components-form-field-background-hover);
525
+ --components-slider-handler-background-default: var(--components-form-field-background-default);
526
+ --components-slider-track-filled-readonly: var(--components-form-field-border-readonly);
527
+ --components-slider-track-filled-disabled: var(--components-form-field-border-disabled);
528
+ --components-slider-track-filled-error: var(--components-form-field-border-error);
529
+ --components-slider-track-filled-focus: var(--components-form-field-border-focus);
530
+ --components-slider-track-filled-hover: var(--components-form-field-border-hover);
531
+ --components-slider-track-filled-default: var(--components-form-field-border-default);
512
532
  --components-menu-contextual-item-content-hover: var(--color-interaction-container-neutral-text-hover);
513
533
  --components-menu-contextual-item-content: var(--color-interaction-container-neutral-text);
514
534
  --components-calendar-cell-text-hover: var(--color-interaction-container-neutral-text-hover);
@@ -848,6 +868,9 @@
848
868
  --color-interaction-container-branded-low-background-active: var(--color-orange-50);
849
869
  --components-tooltip-supporting-text: var(--color-content-inverted-medium-text);
850
870
  --components-tooltip-text: var(--color-content-inverted-high-text);
871
+ --components-slider-handler-border-focus: var(--components-form-field-background-checked);
872
+ --components-slider-handler-background-focus: var(--components-form-field-background-checked);
873
+ --components-slider-track-background: var(--color-content-low-border);
851
874
  --components-popover-supporting-text: var(--color-content-low-text);
852
875
  --components-popover-text: var(--color-content-medium-text);
853
876
  --components-popover-border: var(--color-content-low-border);
@@ -991,7 +1014,7 @@
991
1014
  --components-form-field-border-disabled: var(--color-content-medium-border);
992
1015
  --components-form-field-border-default: var(--color-content-medium-border);
993
1016
  --components-form-field-background-readonly: var(--color-level-05-background);
994
- --components-form-field-background-error: var(--color-feedback-error-high-background);
1017
+ --components-form-field-background-error: var(--color-feedback-error-low-border);
995
1018
  --components-form-field-background-disabled: var(--color-level-10-background);
996
1019
  --components-form-field-background-hover: var(--color-level-05-background);
997
1020
  --components-form-field-background-focus: var(--color-level-00-background);
@@ -1036,6 +1059,7 @@
1036
1059
  --components-button-high-background-active: var(--color-interaction-container-branded-high-background-active);
1037
1060
  --components-button-high-background: var(--color-interaction-container-branded-high-background);
1038
1061
  --color-focus-success: var(--color-feedback-success-low-border);
1062
+ --color-focus-destructive-in-field: var(--color-feedback-error-low-border);
1039
1063
  --color-focus-destructive: var(--color-feedback-error-high-border);
1040
1064
  --color-focus-background-inverted: var(--color-level-inverted-00-background);
1041
1065
  --color-focus-background: var(--color-level-00-background);
@@ -1055,6 +1079,22 @@
1055
1079
  --color-interaction-container-neutral-icon: var(--color-content-low-text);
1056
1080
  --color-interaction-container-neutral-border-hover: var(--color-content-medium-text);
1057
1081
  --color-interaction-container-neutral-border: var(--color-content-low-text);
1082
+ --components-slider-handler-border-readonly: var(--components-form-field-background-readonly);
1083
+ --components-slider-handler-border-disabled: var(--components-form-field-background-disabled);
1084
+ --components-slider-handler-border-error: var(--components-form-field-background-error);
1085
+ --components-slider-handler-border-hover: var(--components-form-field-background-hover);
1086
+ --components-slider-handler-border-default: var(--components-form-field-background-default);
1087
+ --components-slider-handler-background-readonly: var(--components-form-field-background-readonly);
1088
+ --components-slider-handler-background-disabled: var(--components-form-field-background-disabled);
1089
+ --components-slider-handler-background-error: var(--components-form-field-background-error);
1090
+ --components-slider-handler-background-hover: var(--components-form-field-background-hover);
1091
+ --components-slider-handler-background-default: var(--components-form-field-background-default);
1092
+ --components-slider-track-filled-readonly: var(--components-form-field-border-readonly);
1093
+ --components-slider-track-filled-disabled: var(--components-form-field-border-disabled);
1094
+ --components-slider-track-filled-error: var(--components-form-field-border-error);
1095
+ --components-slider-track-filled-focus: var(--components-form-field-border-focus);
1096
+ --components-slider-track-filled-hover: var(--components-form-field-border-hover);
1097
+ --components-slider-track-filled-default: var(--components-form-field-border-default);
1058
1098
  --components-menu-contextual-item-content-hover: var(--color-interaction-container-neutral-text-hover);
1059
1099
  --components-menu-contextual-item-content: var(--color-interaction-container-neutral-text);
1060
1100
  --components-calendar-cell-text-hover: var(--color-interaction-container-neutral-text-hover);
@@ -1353,6 +1393,7 @@
1353
1393
  */
1354
1394
 
1355
1395
  :root {
1396
+ --slider-tick-radius: 1px;
1356
1397
  --global-typography-legend-font-style: uppercase;
1357
1398
  --global-typography-label-font-style: normal;
1358
1399
  --global-typography-small-font-style: normal;
@@ -1370,6 +1411,7 @@
1370
1411
  --popover-font-weight: 500;
1371
1412
  --menu-contextual-item-font-weight: 500;
1372
1413
  --menu-contextual-divider-padding-bottom: 3px;
1414
+ --form-max-width: 480px;
1373
1415
  --form-field-badge-gap: 0px;
1374
1416
  --list-native-separator-padding-y: 3px;
1375
1417
  --list-native-separator-padding-x: 9px;
@@ -1471,6 +1513,15 @@
1471
1513
  --alert-icon-position-x: var(--spacing-4);
1472
1514
  --alert-gap-x: var(--spacing-3);
1473
1515
  --alert-icon-size: var(--spacing-5);
1516
+ --slider-track-radius: var(--radius-rounded-sm);
1517
+ --slider-track-padding-x: var(--spacing-3);
1518
+ --slider-track-height: var(--spacing-1);
1519
+ --slider-handler-stroke: var(--spacing-0-5);
1520
+ --slider-handler-size-inner: var(--spacing-4);
1521
+ --slider-handler-size-max: var(--spacing-6);
1522
+ --slider-handler-size-min: var(--spacing-5);
1523
+ --slider-tick-width: var(--spacing-0-5);
1524
+ --slider-tick-height: var(--spacing-1);
1474
1525
  --global-typography-legend-font-weight: var(--font-weight-medium-emphasis);
1475
1526
  --global-typography-legend-line-height: var(--line-height-xs);
1476
1527
  --global-typography-legend-font-size: var(--font-size-xs);
package/dist/js/mccs_dark.d.ts CHANGED
@@ -159,6 +159,7 @@ export const ColorFocusBrand : string;
159
159
  export const ColorFocusBackground : string;
160
160
  export const ColorFocusBackgroundInverted : string;
161
161
  export const ColorFocusDestructive : string;
162
+ export const ColorFocusDestructiveInField : string;
162
163
  export const ColorFocusSuccess : string;
163
164
  export const ColorRainbow1Background : string;
164
165
  export const ColorRainbow1Border : string;
@@ -515,6 +516,25 @@ export const ComponentsPopoverBackground : string;
515
516
  export const ComponentsPopoverBorder : string;
516
517
  export const ComponentsPopoverText : string;
517
518
  export const ComponentsPopoverSupportingText : string;
519
+ export const ComponentsSliderTrackBackground : string;
520
+ export const ComponentsSliderTrackFilledDefault : string;
521
+ export const ComponentsSliderTrackFilledHover : string;
522
+ export const ComponentsSliderTrackFilledFocus : string;
523
+ export const ComponentsSliderTrackFilledError : string;
524
+ export const ComponentsSliderTrackFilledDisabled : string;
525
+ export const ComponentsSliderTrackFilledReadonly : string;
526
+ export const ComponentsSliderHandlerBackgroundDefault : string;
527
+ export const ComponentsSliderHandlerBackgroundHover : string;
528
+ export const ComponentsSliderHandlerBackgroundFocus : string;
529
+ export const ComponentsSliderHandlerBackgroundError : string;
530
+ export const ComponentsSliderHandlerBackgroundDisabled : string;
531
+ export const ComponentsSliderHandlerBackgroundReadonly : string;
532
+ export const ComponentsSliderHandlerBorderDefault : string;
533
+ export const ComponentsSliderHandlerBorderHover : string;
534
+ export const ComponentsSliderHandlerBorderFocus : string;
535
+ export const ComponentsSliderHandlerBorderError : string;
536
+ export const ComponentsSliderHandlerBorderDisabled : string;
537
+ export const ComponentsSliderHandlerBorderReadonly : string;
518
538
  export const ComponentsTooltipBackground : string;
519
539
  export const ComponentsTooltipBorder : string;
520
540
  export const ComponentsTooltipText : string;
package/dist/js/mccs_dark.js CHANGED
@@ -159,6 +159,7 @@ export const ColorFocusBrand = "#4b9eaa";
159
159
  export const ColorFocusBackground = "#0b0f11";
160
160
  export const ColorFocusBackgroundInverted = "#ffffff";
161
161
  export const ColorFocusDestructive = "#ff3d3d";
162
+ export const ColorFocusDestructiveInField = "#ff3d3d";
162
163
  export const ColorFocusSuccess = "#6bde71";
163
164
  export const ColorRainbow1Background = "#432306";
164
165
  export const ColorRainbow1Border = "#f0801a";
@@ -515,6 +516,25 @@ export const ComponentsPopoverBackground = "#0b0f11";
515
516
  export const ComponentsPopoverBorder = "#394d55";
516
517
  export const ComponentsPopoverText = "#27353b";
517
518
  export const ComponentsPopoverSupportingText = "#889499";
519
+ export const ComponentsSliderTrackBackground = "#394d55";
520
+ export const ComponentsSliderTrackFilledDefault = "#617177";
521
+ export const ComponentsSliderTrackFilledHover = "#889499";
522
+ export const ComponentsSliderTrackFilledFocus = "#4b9eaa";
523
+ export const ComponentsSliderTrackFilledError = "#ff3d3d";
524
+ export const ComponentsSliderTrackFilledDisabled = "#617177";
525
+ export const ComponentsSliderTrackFilledReadonly = "#394d55";
526
+ export const ComponentsSliderHandlerBackgroundDefault = "#0b0f11";
527
+ export const ComponentsSliderHandlerBackgroundHover = "#11171a";
528
+ export const ComponentsSliderHandlerBackgroundFocus = "#258998";
529
+ export const ComponentsSliderHandlerBackgroundError = "#ff3d3d";
530
+ export const ComponentsSliderHandlerBackgroundDisabled = "#171f22";
531
+ export const ComponentsSliderHandlerBackgroundReadonly = "#11171a";
532
+ export const ComponentsSliderHandlerBorderDefault = "#0b0f11";
533
+ export const ComponentsSliderHandlerBorderHover = "#11171a";
534
+ export const ComponentsSliderHandlerBorderFocus = "#258998";
535
+ export const ComponentsSliderHandlerBorderError = "#ff3d3d";
536
+ export const ComponentsSliderHandlerBorderDisabled = "#171f22";
537
+ export const ComponentsSliderHandlerBorderReadonly = "#11171a";
518
538
  export const ComponentsTooltipBackground = "#f5f6f7";
519
539
  export const ComponentsTooltipBorder = "#f5f6f7";
520
540
  export const ComponentsTooltipText = "#0b0f11";