@nova-design-system/nova-base 3.0.0-beta.33 → 3.0.0-beta.35
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.
- package/dist/css/mccs.css +136 -42
- package/dist/css/nova-utils.css +100 -0
- package/dist/css/ocean.css +150 -56
- package/dist/css/spark.css +148 -54
- package/dist/js/mccs_dark.d.ts +63 -22
- package/dist/js/mccs_dark.js +63 -22
- package/dist/js/mccs_light.d.ts +63 -22
- package/dist/js/mccs_light.js +64 -23
- package/dist/js/ocean_dark.d.ts +69 -28
- package/dist/js/ocean_dark.js +69 -28
- package/dist/js/ocean_light.d.ts +69 -28
- package/dist/js/ocean_light.js +69 -28
- package/dist/js/spacings.d.ts +12 -0
- package/dist/js/spacings.js +12 -0
- package/dist/js/spark_dark.d.ts +67 -26
- package/dist/js/spark_dark.js +69 -28
- package/dist/js/spark_light.d.ts +67 -26
- package/dist/js/spark_light.js +69 -28
- package/dist/lib/cjs/generated/nova-tailwind-tokens.js +69 -0
- package/dist/lib/generated/nova-tailwind-tokens.d.ts +69 -0
- package/dist/lib/generated/nova-tailwind-tokens.js +69 -0
- package/package.json +1 -1
package/dist/css/mccs.css
CHANGED
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
*/
|
|
4
4
|
|
|
5
5
|
.dark:root {
|
|
6
|
+
--components-overlay-opacity: 75px;
|
|
6
7
|
--components-button-destructive-low-border-hover: rgba(255, 255, 255, 0);
|
|
7
8
|
--components-button-destructive-low-border: rgba(255, 255, 255, 0);
|
|
8
9
|
--components-button-destructive-low-background-hover: rgba(255, 255, 255, 0.12);
|
|
@@ -26,8 +27,10 @@
|
|
|
26
27
|
--components-button-lower-border-hover-2: rgba(255, 255, 255, 0);
|
|
27
28
|
--components-button-lower-border-2: rgba(255, 255, 255, 0);
|
|
28
29
|
--components-button-lower-border-hover: rgba(255, 255, 255, 0);
|
|
30
|
+
--components-button-lower-border-active: rgba(255, 255, 255, 0);
|
|
29
31
|
--components-button-lower-border: rgba(255, 255, 255, 0);
|
|
30
32
|
--components-button-low-background: rgba(255, 255, 255, 0);
|
|
33
|
+
--components-button-high-border-active: rgba(255, 255, 255, 0);
|
|
31
34
|
--components-button-high-border-hover: rgba(255, 255, 255, 0);
|
|
32
35
|
--components-button-high-border: rgba(255, 255, 255, 0);
|
|
33
36
|
--components-wpf-components-2: #ffffff;
|
|
@@ -58,15 +61,18 @@
|
|
|
58
61
|
--shadow-color-opacity-1: rgba(11, 15, 17, 0.09);
|
|
59
62
|
--shadow-color-opacity-0: rgba(11, 15, 17, 0.09);
|
|
60
63
|
--color-black: #000000;
|
|
64
|
+
--color-interaction-container-neutral-background-active: rgba(255, 255, 255, 0.1);
|
|
61
65
|
--color-interaction-container-neutral-background-hover: rgba(255, 255, 255, 0.1);
|
|
62
66
|
--color-interaction-container-neutral-background: rgba(255, 255, 255, 0);
|
|
63
67
|
--color-interaction-container-branded-low-background-hover: rgba(255, 255, 255, 0.12);
|
|
68
|
+
--color-interaction-container-branded-low-background-active: rgba(255, 255, 255, 0.12);
|
|
64
69
|
--color-interaction-container-branded-low-background: rgba(255, 255, 255, 0);
|
|
65
70
|
--components-menu-contextual-item-background-hover: var(--color-interaction-container-neutral-background-hover);
|
|
66
71
|
--components-menu-contextual-item-background: var(--color-interaction-container-neutral-background);
|
|
67
72
|
--components-tooltip-border: var(--color-gray-ocean-50);
|
|
68
73
|
--components-tooltip-background: var(--color-gray-ocean-50);
|
|
69
74
|
--components-popover-background: var(--color-gray-ocean-900);
|
|
75
|
+
--components-overlay-background: var(--color-gray-ocean-650);
|
|
70
76
|
--components-button-destructive-high-icon-hover: var(--color-base-black);
|
|
71
77
|
--components-button-destructive-high-icon: var(--color-base-black);
|
|
72
78
|
--components-button-destructive-high-text-hover: var(--color-base-black);
|
|
@@ -99,6 +105,7 @@
|
|
|
99
105
|
--components-form-shape-background-default: var(--color-gray-ocean-400);
|
|
100
106
|
--components-form-field-background-checked: var(--color-petrol-500);
|
|
101
107
|
--components-button-medium-border-hover: var(--components-button-gr-as-complementary-border-hover);
|
|
108
|
+
--components-button-medium-border-active: var(--components-button-gr-as-complementary-border-hover);
|
|
102
109
|
--components-button-medium-border: var(--components-button-gr-as-complementary-border);
|
|
103
110
|
--components-button-gr-as-complementary-icon-hover: var(--color-base-white);
|
|
104
111
|
--components-button-gr-as-complementary-icon: var(--color-base-white);
|
|
@@ -106,9 +113,11 @@
|
|
|
106
113
|
--components-button-gr-as-complementary-text: var(--color-base-white);
|
|
107
114
|
--components-button-gr-as-complementary-background-hover: var(--color-gray-ocean-350);
|
|
108
115
|
--components-button-gr-as-complementary-background: var(--color-gray-ocean-450);
|
|
109
|
-
--components-button-lower-background-hover: var(--color-interaction-container-
|
|
116
|
+
--components-button-lower-background-hover: var(--color-interaction-container-neutral-background-hover);
|
|
117
|
+
--components-button-lower-background-active: var(--color-interaction-container-neutral-background-active);
|
|
110
118
|
--components-button-lower-background: var(--color-interaction-container-branded-low-background);
|
|
111
119
|
--components-button-low-background-hover: var(--color-interaction-container-branded-low-background-hover);
|
|
120
|
+
--components-button-low-background-active: var(--color-interaction-container-branded-low-background-active);
|
|
112
121
|
--color-dont-use-background: var(--color-gray-ocean-900);
|
|
113
122
|
--color-dont-use-content: var(--color-gray-ocean-750);
|
|
114
123
|
--color-dont-use-border: var(--color-gray-ocean-750);
|
|
@@ -229,32 +238,51 @@
|
|
|
229
238
|
--color-content-high-icon: var(--color-gray-ocean-50);
|
|
230
239
|
--color-content-high-text: var(--color-gray-ocean-50);
|
|
231
240
|
--color-content-high-border: var(--color-gray-ocean-300);
|
|
241
|
+
--color-level-inverted-05-background: var(--color-gray-ocean-25);
|
|
242
|
+
--color-level-inverted-00-background: var(--color-gray-ocean-00);
|
|
243
|
+
--color-level-inverted-40-background: var(--color-gray-ocean-00);
|
|
244
|
+
--color-level-inverted-30-background: var(--color-gray-ocean-50);
|
|
245
|
+
--color-level-inverted-20-background: var(--color-gray-ocean-00);
|
|
246
|
+
--color-level-inverted-15-background: var(--color-gray-ocean-75);
|
|
247
|
+
--color-level-inverted-10-background: var(--color-gray-ocean-50);
|
|
232
248
|
--color-level-05-background: var(--color-gray-ocean-850);
|
|
233
249
|
--color-level-00-background: var(--color-gray-ocean-900);
|
|
234
250
|
--color-level-40-background: var(--color-gray-ocean-500);
|
|
235
251
|
--color-level-30-background: var(--color-gray-ocean-600);
|
|
236
252
|
--color-level-20-background: var(--color-gray-ocean-700);
|
|
253
|
+
--color-level-15-background: var(--color-gray-ocean-750);
|
|
237
254
|
--color-level-10-background: var(--color-gray-ocean-800);
|
|
255
|
+
--color-interaction-link-inverted-icon-hover: var(--color-petrol-400);
|
|
256
|
+
--color-interaction-link-inverted-text-hover: var(--color-petrol-400);
|
|
238
257
|
--color-interaction-link-low-icon-hover: var(--color-petrol-400);
|
|
239
258
|
--color-interaction-link-low-text-hover: var(--color-petrol-400);
|
|
240
259
|
--color-interaction-link-high-icon-hover: var(--color-petrol-300);
|
|
241
260
|
--color-interaction-link-high-icon: var(--color-petrol-400);
|
|
242
261
|
--color-interaction-link-high-text-hover: var(--color-petrol-300);
|
|
243
262
|
--color-interaction-link-high-text: var(--color-petrol-400);
|
|
244
|
-
--color-interaction-container-
|
|
245
|
-
--color-interaction-container-
|
|
246
|
-
--color-interaction-container-branded-high-icon-hover: var(--color-base-white);
|
|
247
|
-
--color-interaction-container-branded-high-icon: var(--color-base-white);
|
|
263
|
+
--color-interaction-container-neutral-text-active: var(--color-petrol-300);
|
|
264
|
+
--color-interaction-container-neutral-icon-active: var(--color-petrol-300);
|
|
248
265
|
--color-interaction-container-branded-high-text-hover: var(--color-base-white);
|
|
266
|
+
--color-interaction-container-branded-high-text-active: var(--color-base-white);
|
|
249
267
|
--color-interaction-container-branded-high-text: var(--color-base-white);
|
|
268
|
+
--color-interaction-container-branded-high-icon-hover: var(--color-base-white);
|
|
269
|
+
--color-interaction-container-branded-high-icon-active: var(--color-base-white);
|
|
270
|
+
--color-interaction-container-branded-high-icon: var(--color-base-white);
|
|
271
|
+
--color-interaction-container-branded-high-border-hover: var(--color-petrol-500);
|
|
272
|
+
--color-interaction-container-branded-high-border-active: var(--color-petrol-500);
|
|
273
|
+
--color-interaction-container-branded-high-border: var(--color-petrol-600);
|
|
250
274
|
--color-interaction-container-branded-high-background-hover: var(--color-petrol-500);
|
|
275
|
+
--color-interaction-container-branded-high-background-active: var(--color-petrol-500);
|
|
251
276
|
--color-interaction-container-branded-high-background: var(--color-petrol-600);
|
|
252
|
-
--color-interaction-container-branded-low-border-hover: var(--color-petrol-300);
|
|
253
|
-
--color-interaction-container-branded-low-border: var(--color-petrol-400);
|
|
254
|
-
--color-interaction-container-branded-low-icon-hover: var(--color-petrol-300);
|
|
255
|
-
--color-interaction-container-branded-low-icon: var(--color-petrol-400);
|
|
256
277
|
--color-interaction-container-branded-low-text-hover: var(--color-petrol-300);
|
|
278
|
+
--color-interaction-container-branded-low-text-active: var(--color-petrol-300);
|
|
257
279
|
--color-interaction-container-branded-low-text: var(--color-petrol-400);
|
|
280
|
+
--color-interaction-container-branded-low-icon-hover: var(--color-petrol-300);
|
|
281
|
+
--color-interaction-container-branded-low-icon-active: var(--color-petrol-300);
|
|
282
|
+
--color-interaction-container-branded-low-icon: var(--color-petrol-400);
|
|
283
|
+
--color-interaction-container-branded-low-border-hover: var(--color-petrol-300);
|
|
284
|
+
--color-interaction-container-branded-low-border-active: var(--color-petrol-300);
|
|
285
|
+
--color-interaction-container-branded-low-border: var(--color-petrol-400);
|
|
258
286
|
--components-menu-contextual-item-content-disabled: var(--color-content-lower-text);
|
|
259
287
|
--components-menu-contextual-item-shortcut: var(--color-content-lower-text);
|
|
260
288
|
--components-menu-contextual-border: var(--color-content-low-border);
|
|
@@ -374,38 +402,51 @@
|
|
|
374
402
|
--components-form-text-label-default: var(--color-content-high-text);
|
|
375
403
|
--components-form-text-info-icon: var(--color-content-medium-text);
|
|
376
404
|
--components-form-text-required: var(--color-feedback-error-low-icon);
|
|
377
|
-
--components-button-medium-icon-hover: var(--components-button-gr-as-complementary-icon-hover);
|
|
378
|
-
--components-button-medium-icon: var(--components-button-gr-as-complementary-icon);
|
|
379
405
|
--components-button-medium-text-hover: var(--components-button-gr-as-complementary-text-hover);
|
|
406
|
+
--components-button-medium-text-active: var(--components-button-gr-as-complementary-text-hover);
|
|
380
407
|
--components-button-medium-text: var(--components-button-gr-as-complementary-text);
|
|
408
|
+
--components-button-medium-icon-hover: var(--components-button-gr-as-complementary-icon-hover);
|
|
409
|
+
--components-button-medium-icon-active: var(--components-button-gr-as-complementary-icon-hover);
|
|
410
|
+
--components-button-medium-icon: var(--components-button-gr-as-complementary-icon);
|
|
381
411
|
--components-button-medium-background-hover: var(--components-button-gr-as-complementary-background-hover);
|
|
412
|
+
--components-button-medium-background-active: var(--components-button-gr-as-complementary-background-hover);
|
|
382
413
|
--components-button-medium-background: var(--components-button-gr-as-complementary-background);
|
|
383
|
-
--components-button-lower-icon-hover: var(--color-interaction-container-branded-low-icon-hover);
|
|
384
|
-
--components-button-lower-icon: var(--color-interaction-container-branded-low-icon);
|
|
385
414
|
--components-button-lower-text-hover: var(--color-interaction-container-branded-low-text-hover);
|
|
415
|
+
--components-button-lower-text-active: var(--color-interaction-container-branded-low-text-hover);
|
|
386
416
|
--components-button-lower-text: var(--color-interaction-container-branded-low-text);
|
|
387
|
-
--components-button-
|
|
388
|
-
--components-button-
|
|
389
|
-
--components-button-
|
|
390
|
-
--components-button-low-icon: var(--color-interaction-container-branded-low-icon);
|
|
417
|
+
--components-button-lower-icon-hover: var(--color-interaction-container-branded-low-icon-hover);
|
|
418
|
+
--components-button-lower-icon-active: var(--color-interaction-container-branded-low-icon-hover);
|
|
419
|
+
--components-button-lower-icon: var(--color-interaction-container-branded-low-icon);
|
|
391
420
|
--components-button-low-text-hover: var(--color-interaction-container-branded-low-text-hover);
|
|
421
|
+
--components-button-low-text-active: var(--color-interaction-container-branded-low-text-active);
|
|
392
422
|
--components-button-low-text: var(--color-interaction-container-branded-low-text);
|
|
423
|
+
--components-button-low-icon-hover: var(--color-interaction-container-branded-low-icon-hover);
|
|
424
|
+
--components-button-low-icon-active: var(--color-interaction-container-branded-low-icon-active);
|
|
425
|
+
--components-button-low-icon: var(--color-interaction-container-branded-low-icon);
|
|
426
|
+
--components-button-low-border-hover: var(--color-interaction-container-branded-low-border-hover);
|
|
427
|
+
--components-button-low-border-active: var(--color-interaction-container-branded-low-border-hover);
|
|
428
|
+
--components-button-low-border: var(--color-interaction-container-branded-low-border);
|
|
393
429
|
--components-button-high-icon-hover: var(--color-interaction-container-branded-high-icon-hover);
|
|
430
|
+
--components-button-high-icon-active: var(--color-interaction-container-branded-high-icon-active);
|
|
394
431
|
--components-button-high-icon: var(--color-interaction-container-branded-high-icon);
|
|
395
432
|
--components-button-high-text-hover: var(--color-interaction-container-branded-high-text-hover);
|
|
433
|
+
--components-button-high-text-active: var(--color-interaction-container-branded-high-text-active);
|
|
396
434
|
--components-button-high-text: var(--color-interaction-container-branded-high-text);
|
|
397
435
|
--components-button-high-background-hover: var(--color-interaction-container-branded-high-background-hover);
|
|
436
|
+
--components-button-high-background-active: var(--color-interaction-container-branded-high-background-hover);
|
|
398
437
|
--components-button-high-background: var(--color-interaction-container-branded-high-background);
|
|
399
438
|
--color-focus-success: var(--color-feedback-success-low-border);
|
|
400
439
|
--color-focus-destructive: var(--color-feedback-error-high-border);
|
|
440
|
+
--color-interaction-link-inverted-icon: var(--color-content-inverted-medium-icon);
|
|
441
|
+
--color-interaction-link-inverted-text: var(--color-content-inverted-medium-text);
|
|
401
442
|
--color-interaction-link-low-icon: var(--color-content-high-text);
|
|
402
443
|
--color-interaction-link-low-text: var(--color-content-high-text);
|
|
403
|
-
--color-interaction-container-neutral-border-hover: var(--color-content-medium-text);
|
|
404
|
-
--color-interaction-container-neutral-border: var(--color-content-low-text);
|
|
405
|
-
--color-interaction-container-neutral-icon-hover: var(--color-content-medium-text);
|
|
406
|
-
--color-interaction-container-neutral-icon: var(--color-content-low-text);
|
|
407
444
|
--color-interaction-container-neutral-text-hover: var(--color-content-medium-text);
|
|
408
445
|
--color-interaction-container-neutral-text: var(--color-content-low-text);
|
|
446
|
+
--color-interaction-container-neutral-icon-hover: var(--color-content-medium-text);
|
|
447
|
+
--color-interaction-container-neutral-icon: var(--color-content-low-text);
|
|
448
|
+
--color-interaction-container-neutral-border-hover: var(--color-content-medium-text);
|
|
449
|
+
--color-interaction-container-neutral-border: var(--color-content-low-text);
|
|
409
450
|
--components-menu-contextual-item-content-hover: var(--color-interaction-container-neutral-text-hover);
|
|
410
451
|
--components-menu-contextual-item-content: var(--color-interaction-container-neutral-text);
|
|
411
452
|
--components-list-custom-item-content-hover: var(--color-interaction-container-neutral-text-hover);
|
|
@@ -426,6 +467,7 @@
|
|
|
426
467
|
*/
|
|
427
468
|
|
|
428
469
|
:root {
|
|
470
|
+
--components-overlay-opacity: 55px;
|
|
429
471
|
--components-button-destructive-low-border-hover: rgba(255, 255, 255, 0);
|
|
430
472
|
--components-button-destructive-low-border: rgba(255, 255, 255, 0);
|
|
431
473
|
--components-button-destructive-low-background-hover: rgba(11, 15, 17, 0.08);
|
|
@@ -449,8 +491,10 @@
|
|
|
449
491
|
--components-button-lower-border-hover-2: rgba(255, 255, 255, 0);
|
|
450
492
|
--components-button-lower-border-2: rgba(255, 255, 255, 0);
|
|
451
493
|
--components-button-lower-border-hover: rgba(255, 255, 255, 0);
|
|
494
|
+
--components-button-lower-border-active: rgba(255, 255, 255, 0);
|
|
452
495
|
--components-button-lower-border: rgba(255, 255, 255, 0);
|
|
453
496
|
--components-button-low-background: rgba(255, 255, 255, 0);
|
|
497
|
+
--components-button-high-border-active: rgba(255, 255, 255, 0);
|
|
454
498
|
--components-button-high-border-hover: rgba(255, 255, 255, 0);
|
|
455
499
|
--components-button-high-border: rgba(255, 255, 255, 0);
|
|
456
500
|
--components-wpf-components-2: #ffffff;
|
|
@@ -481,15 +525,18 @@
|
|
|
481
525
|
--shadow-color-opacity-1: rgba(11, 15, 17, 0.06);
|
|
482
526
|
--shadow-color-opacity-0: rgba(255, 255, 255, 0.06);
|
|
483
527
|
--color-black: #000000;
|
|
528
|
+
--color-interaction-container-neutral-background-active: rgba(165, 166, 167, 0.12);
|
|
484
529
|
--color-interaction-container-neutral-background-hover: rgba(165, 166, 167, 0.12);
|
|
485
530
|
--color-interaction-container-neutral-background: rgba(255, 255, 255, 0);
|
|
486
531
|
--color-interaction-container-branded-low-background-hover: rgba(11, 15, 17, 0.08);
|
|
532
|
+
--color-interaction-container-branded-low-background-active: rgba(11, 15, 17, 0.08);
|
|
487
533
|
--color-interaction-container-branded-low-background: rgba(255, 255, 255, 0);
|
|
488
534
|
--components-menu-contextual-item-background-hover: var(--color-interaction-container-neutral-background-hover);
|
|
489
535
|
--components-menu-contextual-item-background: var(--color-interaction-container-neutral-background);
|
|
490
536
|
--components-tooltip-border: var(--color-gray-ocean-900);
|
|
491
537
|
--components-tooltip-background: var(--color-gray-ocean-900);
|
|
492
538
|
--components-popover-background: var(--color-gray-ocean-50);
|
|
539
|
+
--components-overlay-background: var(--color-gray-ocean-850);
|
|
493
540
|
--components-button-destructive-high-icon-hover: var(--color-base-black);
|
|
494
541
|
--components-button-destructive-high-icon: var(--color-base-black);
|
|
495
542
|
--components-button-destructive-high-text-hover: var(--color-base-black);
|
|
@@ -522,6 +569,7 @@
|
|
|
522
569
|
--components-form-shape-background-default: var(--color-gray-ocean-75);
|
|
523
570
|
--components-form-field-background-checked: var(--color-petrol-600);
|
|
524
571
|
--components-button-medium-border-hover: var(--components-button-gr-as-complementary-border-hover);
|
|
572
|
+
--components-button-medium-border-active: var(--components-button-gr-as-complementary-border-hover);
|
|
525
573
|
--components-button-medium-border: var(--components-button-gr-as-complementary-border);
|
|
526
574
|
--components-button-gr-as-complementary-icon-hover: var(--color-base-black);
|
|
527
575
|
--components-button-gr-as-complementary-icon: var(--color-base-black);
|
|
@@ -529,9 +577,11 @@
|
|
|
529
577
|
--components-button-gr-as-complementary-text: var(--color-base-black);
|
|
530
578
|
--components-button-gr-as-complementary-background-hover: var(--color-gray-ocean-300);
|
|
531
579
|
--components-button-gr-as-complementary-background: var(--color-gray-ocean-200);
|
|
532
|
-
--components-button-lower-background-hover: var(--color-interaction-container-
|
|
580
|
+
--components-button-lower-background-hover: var(--color-interaction-container-neutral-background-hover);
|
|
581
|
+
--components-button-lower-background-active: var(--color-interaction-container-neutral-background-active);
|
|
533
582
|
--components-button-lower-background: var(--color-interaction-container-branded-low-background);
|
|
534
583
|
--components-button-low-background-hover: var(--color-interaction-container-branded-low-background-hover);
|
|
584
|
+
--components-button-low-background-active: var(--color-interaction-container-branded-low-background-active);
|
|
535
585
|
--color-dont-use-background: var(--color-gray-ocean-50);
|
|
536
586
|
--color-dont-use-content: var(--color-gray-ocean-150);
|
|
537
587
|
--color-dont-use-border: var(--color-gray-ocean-150);
|
|
@@ -652,32 +702,51 @@
|
|
|
652
702
|
--color-content-high-icon: var(--color-gray-ocean-800);
|
|
653
703
|
--color-content-high-text: var(--color-gray-ocean-800);
|
|
654
704
|
--color-content-high-border: var(--color-gray-ocean-300);
|
|
705
|
+
--color-level-inverted-05-background: var(--color-gray-ocean-850);
|
|
706
|
+
--color-level-inverted-00-background: var(--color-gray-ocean-900);
|
|
707
|
+
--color-level-inverted-40-background: var(--color-gray-ocean-500);
|
|
708
|
+
--color-level-inverted-30-background: var(--color-gray-ocean-600);
|
|
709
|
+
--color-level-inverted-20-background: var(--color-gray-ocean-700);
|
|
710
|
+
--color-level-inverted-15-background: var(--color-gray-ocean-750);
|
|
711
|
+
--color-level-inverted-10-background: var(--color-gray-ocean-800);
|
|
655
712
|
--color-level-05-background: var(--color-gray-ocean-25);
|
|
656
713
|
--color-level-00-background: var(--color-gray-ocean-00);
|
|
657
714
|
--color-level-40-background: var(--color-gray-ocean-00);
|
|
658
715
|
--color-level-30-background: var(--color-gray-ocean-50);
|
|
659
716
|
--color-level-20-background: var(--color-gray-ocean-00);
|
|
717
|
+
--color-level-15-background: var(--color-gray-ocean-75);
|
|
660
718
|
--color-level-10-background: var(--color-gray-ocean-50);
|
|
719
|
+
--color-interaction-link-inverted-icon-hover: var(--color-petrol-600);
|
|
720
|
+
--color-interaction-link-inverted-text-hover: var(--color-petrol-600);
|
|
661
721
|
--color-interaction-link-low-icon-hover: var(--color-petrol-600);
|
|
662
722
|
--color-interaction-link-low-text-hover: var(--color-petrol-600);
|
|
663
723
|
--color-interaction-link-high-icon-hover: var(--color-petrol-700);
|
|
664
724
|
--color-interaction-link-high-icon: var(--color-petrol-600);
|
|
665
725
|
--color-interaction-link-high-text-hover: var(--color-petrol-700);
|
|
666
726
|
--color-interaction-link-high-text: var(--color-petrol-600);
|
|
667
|
-
--color-interaction-container-
|
|
668
|
-
--color-interaction-container-
|
|
669
|
-
--color-interaction-container-branded-high-icon-hover: var(--color-base-black);
|
|
670
|
-
--color-interaction-container-branded-high-icon: var(--color-base-black);
|
|
727
|
+
--color-interaction-container-neutral-text-active: var(--color-petrol-700);
|
|
728
|
+
--color-interaction-container-neutral-icon-active: var(--color-petrol-700);
|
|
671
729
|
--color-interaction-container-branded-high-text-hover: var(--color-base-black);
|
|
730
|
+
--color-interaction-container-branded-high-text-active: var(--color-base-black);
|
|
672
731
|
--color-interaction-container-branded-high-text: var(--color-base-black);
|
|
732
|
+
--color-interaction-container-branded-high-icon-hover: var(--color-base-black);
|
|
733
|
+
--color-interaction-container-branded-high-icon-active: var(--color-base-black);
|
|
734
|
+
--color-interaction-container-branded-high-icon: var(--color-base-black);
|
|
735
|
+
--color-interaction-container-branded-high-border-hover: var(--color-petrol-500);
|
|
736
|
+
--color-interaction-container-branded-high-border-active: var(--color-petrol-500);
|
|
737
|
+
--color-interaction-container-branded-high-border: var(--color-petrol-400);
|
|
673
738
|
--color-interaction-container-branded-high-background-hover: var(--color-petrol-500);
|
|
739
|
+
--color-interaction-container-branded-high-background-active: var(--color-petrol-500);
|
|
674
740
|
--color-interaction-container-branded-high-background: var(--color-petrol-400);
|
|
675
|
-
--color-interaction-container-branded-low-border-hover: var(--color-petrol-700);
|
|
676
|
-
--color-interaction-container-branded-low-border: var(--color-petrol-600);
|
|
677
|
-
--color-interaction-container-branded-low-icon-hover: var(--color-petrol-700);
|
|
678
|
-
--color-interaction-container-branded-low-icon: var(--color-petrol-600);
|
|
679
741
|
--color-interaction-container-branded-low-text-hover: var(--color-petrol-700);
|
|
742
|
+
--color-interaction-container-branded-low-text-active: var(--color-petrol-700);
|
|
680
743
|
--color-interaction-container-branded-low-text: var(--color-petrol-600);
|
|
744
|
+
--color-interaction-container-branded-low-icon-hover: var(--color-petrol-700);
|
|
745
|
+
--color-interaction-container-branded-low-icon-active: var(--color-petrol-700);
|
|
746
|
+
--color-interaction-container-branded-low-icon: var(--color-petrol-600);
|
|
747
|
+
--color-interaction-container-branded-low-border-hover: var(--color-petrol-700);
|
|
748
|
+
--color-interaction-container-branded-low-border-active: var(--color-petrol-700);
|
|
749
|
+
--color-interaction-container-branded-low-border: var(--color-petrol-600);
|
|
681
750
|
--components-menu-contextual-item-content-disabled: var(--color-content-lower-text);
|
|
682
751
|
--components-menu-contextual-item-shortcut: var(--color-content-lower-text);
|
|
683
752
|
--components-menu-contextual-border: var(--color-content-low-border);
|
|
@@ -797,43 +866,56 @@
|
|
|
797
866
|
--components-form-text-label-default: var(--color-content-high-text);
|
|
798
867
|
--components-form-text-info-icon: var(--color-content-low-text);
|
|
799
868
|
--components-form-text-required: var(--color-feedback-error-low-icon);
|
|
800
|
-
--components-button-medium-icon-hover: var(--components-button-gr-as-complementary-icon-hover);
|
|
801
|
-
--components-button-medium-icon: var(--components-button-gr-as-complementary-icon);
|
|
802
869
|
--components-button-medium-text-hover: var(--components-button-gr-as-complementary-text-hover);
|
|
870
|
+
--components-button-medium-text-active: var(--components-button-gr-as-complementary-text-hover);
|
|
803
871
|
--components-button-medium-text: var(--components-button-gr-as-complementary-text);
|
|
872
|
+
--components-button-medium-icon-hover: var(--components-button-gr-as-complementary-icon-hover);
|
|
873
|
+
--components-button-medium-icon-active: var(--components-button-gr-as-complementary-icon-hover);
|
|
874
|
+
--components-button-medium-icon: var(--components-button-gr-as-complementary-icon);
|
|
804
875
|
--components-button-medium-background-hover: var(--components-button-gr-as-complementary-background-hover);
|
|
876
|
+
--components-button-medium-background-active: var(--components-button-gr-as-complementary-background-hover);
|
|
805
877
|
--components-button-medium-background: var(--components-button-gr-as-complementary-background);
|
|
806
|
-
--components-button-lower-icon-hover: var(--color-interaction-container-branded-low-icon-hover);
|
|
807
|
-
--components-button-lower-icon: var(--color-interaction-container-branded-low-icon);
|
|
808
878
|
--components-button-lower-text-hover: var(--color-interaction-container-branded-low-text-hover);
|
|
879
|
+
--components-button-lower-text-active: var(--color-interaction-container-branded-low-text-hover);
|
|
809
880
|
--components-button-lower-text: var(--color-interaction-container-branded-low-text);
|
|
810
|
-
--components-button-
|
|
811
|
-
--components-button-
|
|
812
|
-
--components-button-low-icon-hover: var(--color-interaction-container-branded-low-icon-hover);
|
|
813
|
-
--components-button-low-icon: var(--color-interaction-container-branded-low-icon);
|
|
881
|
+
--components-button-lower-icon-active: var(--color-interaction-container-branded-low-icon-hover);
|
|
882
|
+
--components-button-lower-icon: var(--color-interaction-container-branded-low-icon);
|
|
814
883
|
--components-button-low-text-hover: var(--color-interaction-container-branded-low-text-hover);
|
|
884
|
+
--components-button-low-text-active: var(--color-interaction-container-branded-low-text-active);
|
|
815
885
|
--components-button-low-text: var(--color-interaction-container-branded-low-text);
|
|
886
|
+
--components-button-low-icon-hover: var(--color-interaction-container-branded-low-icon-hover);
|
|
887
|
+
--components-button-low-icon-active: var(--color-interaction-container-branded-low-icon-active);
|
|
888
|
+
--components-button-low-icon: var(--color-interaction-container-branded-low-icon);
|
|
889
|
+
--components-button-low-border-hover: var(--color-interaction-container-branded-low-border-hover);
|
|
890
|
+
--components-button-low-border-active: var(--color-interaction-container-branded-low-border-hover);
|
|
891
|
+
--components-button-low-border: var(--color-interaction-container-branded-low-border);
|
|
816
892
|
--components-button-high-icon-hover: var(--color-interaction-container-branded-high-icon-hover);
|
|
893
|
+
--components-button-high-icon-active: var(--color-interaction-container-branded-high-icon-active);
|
|
817
894
|
--components-button-high-icon: var(--color-interaction-container-branded-high-icon);
|
|
818
895
|
--components-button-high-text-hover: var(--color-interaction-container-branded-high-text-hover);
|
|
896
|
+
--components-button-high-text-active: var(--color-interaction-container-branded-high-text-active);
|
|
819
897
|
--components-button-high-text: var(--color-interaction-container-branded-high-text);
|
|
820
898
|
--components-button-high-background-hover: var(--color-interaction-container-branded-high-background-hover);
|
|
899
|
+
--components-button-high-background-active: var(--color-interaction-container-branded-high-background-hover);
|
|
821
900
|
--components-button-high-background: var(--color-interaction-container-branded-high-background);
|
|
822
901
|
--color-focus-success: var(--color-feedback-success-low-border);
|
|
823
902
|
--color-focus-destructive: var(--color-feedback-error-high-border);
|
|
903
|
+
--color-interaction-link-inverted-icon: var(--color-content-inverted-medium-icon);
|
|
904
|
+
--color-interaction-link-inverted-text: var(--color-content-inverted-medium-text);
|
|
824
905
|
--color-interaction-link-low-icon: var(--color-content-high-text);
|
|
825
906
|
--color-interaction-link-low-text: var(--color-content-high-text);
|
|
826
|
-
--color-interaction-container-neutral-border-hover: var(--color-content-medium-text);
|
|
827
|
-
--color-interaction-container-neutral-border: var(--color-content-inverted-low-text);
|
|
828
|
-
--color-interaction-container-neutral-icon-hover: var(--color-content-medium-text);
|
|
829
|
-
--color-interaction-container-neutral-icon: var(--color-content-low-text);
|
|
830
907
|
--color-interaction-container-neutral-text-hover: var(--color-content-medium-text);
|
|
831
908
|
--color-interaction-container-neutral-text: var(--color-content-low-text);
|
|
909
|
+
--color-interaction-container-neutral-icon-hover: var(--color-content-medium-text);
|
|
910
|
+
--color-interaction-container-neutral-icon: var(--color-content-low-text);
|
|
911
|
+
--color-interaction-container-neutral-border-hover: var(--color-content-medium-text);
|
|
912
|
+
--color-interaction-container-neutral-border: var(--color-content-inverted-low-text);
|
|
832
913
|
--components-menu-contextual-item-content-hover: var(--color-interaction-container-neutral-text-hover);
|
|
833
914
|
--components-menu-contextual-item-content: var(--color-interaction-container-neutral-text);
|
|
834
915
|
--components-list-custom-item-content-hover: var(--color-interaction-container-neutral-text-hover);
|
|
835
916
|
--components-list-custom-item-content-default: var(--color-interaction-container-neutral-text);
|
|
836
917
|
--components-form-shape-foreground-disabled: var(--components-form-shape-border-default);
|
|
918
|
+
--components-button-lower-icon-hover: var(--color-interaction-container-neutral-icon-hover);
|
|
837
919
|
}
|
|
838
920
|
|
|
839
921
|
/**
|
|
@@ -1226,6 +1308,18 @@
|
|
|
1226
1308
|
--focus-outline-stroke: var(--spacing-0-5);
|
|
1227
1309
|
--focus-outline-offset: var(--spacing-0-5);
|
|
1228
1310
|
--focus-field-stroke: var(--spacing-px);
|
|
1311
|
+
--dialog-footer-padding-x: var(--spacing-6);
|
|
1312
|
+
--dialog-footer-padding-bottom: var(--spacing-6);
|
|
1313
|
+
--dialog-footer-padding-top: var(--spacing-2);
|
|
1314
|
+
--dialog-footer-gap-y: var(--spacing-3);
|
|
1315
|
+
--dialog-body-padding-y: var(--spacing-2);
|
|
1316
|
+
--dialog-body-padding-x: var(--spacing-6);
|
|
1317
|
+
--dialog-header-padding-x: var(--spacing-6);
|
|
1318
|
+
--dialog-header-padding-bottom: var(--spacing-2);
|
|
1319
|
+
--dialog-header-padding-top: var(--spacing-6);
|
|
1320
|
+
--dialog-header-gap-y: var(--spacing-0);
|
|
1321
|
+
--dialog-dismissible-position-right: var(--spacing-3);
|
|
1322
|
+
--dialog-dismissible-position-top: var(--spacing-5);
|
|
1229
1323
|
--badge-radius: var(--radius-rounded-full);
|
|
1230
1324
|
--badge-padding-y: var(--spacing-1);
|
|
1231
1325
|
--badge-padding-x: var(--spacing-2);
|
package/dist/css/nova-utils.css
CHANGED
|
@@ -6976,6 +6976,10 @@ h6 {
|
|
|
6976
6976
|
background-color: var(--color-interaction-container-branded-high-background);
|
|
6977
6977
|
}
|
|
6978
6978
|
|
|
6979
|
+
.bg-interaction-container-branded-high-active {
|
|
6980
|
+
background-color: var(--color-interaction-container-branded-high-background-active);
|
|
6981
|
+
}
|
|
6982
|
+
|
|
6979
6983
|
.bg-interaction-container-branded-high-hover {
|
|
6980
6984
|
background-color: var(--color-interaction-container-branded-high-background-hover);
|
|
6981
6985
|
}
|
|
@@ -6984,6 +6988,10 @@ h6 {
|
|
|
6984
6988
|
border-color: var(--color-interaction-container-branded-high-border);
|
|
6985
6989
|
}
|
|
6986
6990
|
|
|
6991
|
+
.border-interaction-container-branded-high-active {
|
|
6992
|
+
border-color: var(--color-interaction-container-branded-high-border-active);
|
|
6993
|
+
}
|
|
6994
|
+
|
|
6987
6995
|
.border-interaction-container-branded-high-hover {
|
|
6988
6996
|
border-color: var(--color-interaction-container-branded-high-border-hover);
|
|
6989
6997
|
}
|
|
@@ -6992,6 +7000,10 @@ h6 {
|
|
|
6992
7000
|
color: var(--color-interaction-container-branded-high-icon);
|
|
6993
7001
|
}
|
|
6994
7002
|
|
|
7003
|
+
.icon-interaction-container-branded-high-active {
|
|
7004
|
+
color: var(--color-interaction-container-branded-high-icon-active);
|
|
7005
|
+
}
|
|
7006
|
+
|
|
6995
7007
|
.icon-interaction-container-branded-high-hover {
|
|
6996
7008
|
color: var(--color-interaction-container-branded-high-icon-hover);
|
|
6997
7009
|
}
|
|
@@ -7000,6 +7012,10 @@ h6 {
|
|
|
7000
7012
|
color: var(--color-interaction-container-branded-high-text);
|
|
7001
7013
|
}
|
|
7002
7014
|
|
|
7015
|
+
.text-interaction-container-branded-high-active {
|
|
7016
|
+
color: var(--color-interaction-container-branded-high-text-active);
|
|
7017
|
+
}
|
|
7018
|
+
|
|
7003
7019
|
.text-interaction-container-branded-high-hover {
|
|
7004
7020
|
color: var(--color-interaction-container-branded-high-text-hover);
|
|
7005
7021
|
}
|
|
@@ -7008,6 +7024,10 @@ h6 {
|
|
|
7008
7024
|
background-color: var(--color-interaction-container-branded-low-background);
|
|
7009
7025
|
}
|
|
7010
7026
|
|
|
7027
|
+
.bg-interaction-container-branded-low-active {
|
|
7028
|
+
background-color: var(--color-interaction-container-branded-low-background-active);
|
|
7029
|
+
}
|
|
7030
|
+
|
|
7011
7031
|
.bg-interaction-container-branded-low-hover {
|
|
7012
7032
|
background-color: var(--color-interaction-container-branded-low-background-hover);
|
|
7013
7033
|
}
|
|
@@ -7016,6 +7036,10 @@ h6 {
|
|
|
7016
7036
|
border-color: var(--color-interaction-container-branded-low-border);
|
|
7017
7037
|
}
|
|
7018
7038
|
|
|
7039
|
+
.border-interaction-container-branded-low-active {
|
|
7040
|
+
border-color: var(--color-interaction-container-branded-low-border-active);
|
|
7041
|
+
}
|
|
7042
|
+
|
|
7019
7043
|
.border-interaction-container-branded-low-hover {
|
|
7020
7044
|
border-color: var(--color-interaction-container-branded-low-border-hover);
|
|
7021
7045
|
}
|
|
@@ -7024,6 +7048,10 @@ h6 {
|
|
|
7024
7048
|
color: var(--color-interaction-container-branded-low-icon);
|
|
7025
7049
|
}
|
|
7026
7050
|
|
|
7051
|
+
.icon-interaction-container-branded-low-active {
|
|
7052
|
+
color: var(--color-interaction-container-branded-low-icon-active);
|
|
7053
|
+
}
|
|
7054
|
+
|
|
7027
7055
|
.icon-interaction-container-branded-low-hover {
|
|
7028
7056
|
color: var(--color-interaction-container-branded-low-icon-hover);
|
|
7029
7057
|
}
|
|
@@ -7032,6 +7060,10 @@ h6 {
|
|
|
7032
7060
|
color: var(--color-interaction-container-branded-low-text);
|
|
7033
7061
|
}
|
|
7034
7062
|
|
|
7063
|
+
.text-interaction-container-branded-low-active {
|
|
7064
|
+
color: var(--color-interaction-container-branded-low-text-active);
|
|
7065
|
+
}
|
|
7066
|
+
|
|
7035
7067
|
.text-interaction-container-branded-low-hover {
|
|
7036
7068
|
color: var(--color-interaction-container-branded-low-text-hover);
|
|
7037
7069
|
}
|
|
@@ -7040,6 +7072,10 @@ h6 {
|
|
|
7040
7072
|
background-color: var(--color-interaction-container-neutral-background);
|
|
7041
7073
|
}
|
|
7042
7074
|
|
|
7075
|
+
.bg-interaction-container-neutral-active {
|
|
7076
|
+
background-color: var(--color-interaction-container-neutral-background-active);
|
|
7077
|
+
}
|
|
7078
|
+
|
|
7043
7079
|
.bg-interaction-container-neutral-hover {
|
|
7044
7080
|
background-color: var(--color-interaction-container-neutral-background-hover);
|
|
7045
7081
|
}
|
|
@@ -7056,6 +7092,10 @@ h6 {
|
|
|
7056
7092
|
color: var(--color-interaction-container-neutral-icon);
|
|
7057
7093
|
}
|
|
7058
7094
|
|
|
7095
|
+
.icon-interaction-container-neutral-active {
|
|
7096
|
+
color: var(--color-interaction-container-neutral-icon-active);
|
|
7097
|
+
}
|
|
7098
|
+
|
|
7059
7099
|
.icon-interaction-container-neutral-hover {
|
|
7060
7100
|
color: var(--color-interaction-container-neutral-icon-hover);
|
|
7061
7101
|
}
|
|
@@ -7064,6 +7104,10 @@ h6 {
|
|
|
7064
7104
|
color: var(--color-interaction-container-neutral-text);
|
|
7065
7105
|
}
|
|
7066
7106
|
|
|
7107
|
+
.text-interaction-container-neutral-active {
|
|
7108
|
+
color: var(--color-interaction-container-neutral-text-active);
|
|
7109
|
+
}
|
|
7110
|
+
|
|
7067
7111
|
.text-interaction-container-neutral-hover {
|
|
7068
7112
|
color: var(--color-interaction-container-neutral-text-hover);
|
|
7069
7113
|
}
|
|
@@ -7084,6 +7128,22 @@ h6 {
|
|
|
7084
7128
|
color: var(--color-interaction-link-high-text-hover);
|
|
7085
7129
|
}
|
|
7086
7130
|
|
|
7131
|
+
.icon-interaction-link-inverted {
|
|
7132
|
+
color: var(--color-interaction-link-inverted-icon);
|
|
7133
|
+
}
|
|
7134
|
+
|
|
7135
|
+
.icon-interaction-link-inverted-hover {
|
|
7136
|
+
color: var(--color-interaction-link-inverted-icon-hover);
|
|
7137
|
+
}
|
|
7138
|
+
|
|
7139
|
+
.text-interaction-link-inverted {
|
|
7140
|
+
color: var(--color-interaction-link-inverted-text);
|
|
7141
|
+
}
|
|
7142
|
+
|
|
7143
|
+
.text-interaction-link-inverted-hover {
|
|
7144
|
+
color: var(--color-interaction-link-inverted-text-hover);
|
|
7145
|
+
}
|
|
7146
|
+
|
|
7087
7147
|
.icon-interaction-link-low {
|
|
7088
7148
|
color: var(--color-interaction-link-low-icon);
|
|
7089
7149
|
}
|
|
@@ -7112,6 +7172,10 @@ h6 {
|
|
|
7112
7172
|
background-color: var(--color-level-10-background);
|
|
7113
7173
|
}
|
|
7114
7174
|
|
|
7175
|
+
.bg-level-15 {
|
|
7176
|
+
background-color: var(--color-level-15-background);
|
|
7177
|
+
}
|
|
7178
|
+
|
|
7115
7179
|
.bg-level-20 {
|
|
7116
7180
|
background-color: var(--color-level-20-background);
|
|
7117
7181
|
}
|
|
@@ -7124,6 +7188,34 @@ h6 {
|
|
|
7124
7188
|
background-color: var(--color-level-40-background);
|
|
7125
7189
|
}
|
|
7126
7190
|
|
|
7191
|
+
.bg-level-inverted-00 {
|
|
7192
|
+
background-color: var(--color-level-inverted-00-background);
|
|
7193
|
+
}
|
|
7194
|
+
|
|
7195
|
+
.bg-level-inverted-05 {
|
|
7196
|
+
background-color: var(--color-level-inverted-05-background);
|
|
7197
|
+
}
|
|
7198
|
+
|
|
7199
|
+
.bg-level-inverted-10 {
|
|
7200
|
+
background-color: var(--color-level-inverted-10-background);
|
|
7201
|
+
}
|
|
7202
|
+
|
|
7203
|
+
.bg-level-inverted-15 {
|
|
7204
|
+
background-color: var(--color-level-inverted-15-background);
|
|
7205
|
+
}
|
|
7206
|
+
|
|
7207
|
+
.bg-level-inverted-20 {
|
|
7208
|
+
background-color: var(--color-level-inverted-20-background);
|
|
7209
|
+
}
|
|
7210
|
+
|
|
7211
|
+
.bg-level-inverted-30 {
|
|
7212
|
+
background-color: var(--color-level-inverted-30-background);
|
|
7213
|
+
}
|
|
7214
|
+
|
|
7215
|
+
.bg-level-inverted-40 {
|
|
7216
|
+
background-color: var(--color-level-inverted-40-background);
|
|
7217
|
+
}
|
|
7218
|
+
|
|
7127
7219
|
.bg-rainbow-1 {
|
|
7128
7220
|
background-color: var(--color-rainbow-1-background);
|
|
7129
7221
|
}
|
|
@@ -7724,6 +7816,14 @@ h6 {
|
|
|
7724
7816
|
color: var(--color-interaction-link-high-text-hover);
|
|
7725
7817
|
}
|
|
7726
7818
|
|
|
7819
|
+
.hover\:icon-interaction-link-inverted-hover:hover {
|
|
7820
|
+
color: var(--color-interaction-link-inverted-icon-hover);
|
|
7821
|
+
}
|
|
7822
|
+
|
|
7823
|
+
.hover\:text-interaction-link-inverted-hover:hover {
|
|
7824
|
+
color: var(--color-interaction-link-inverted-text-hover);
|
|
7825
|
+
}
|
|
7826
|
+
|
|
7727
7827
|
.hover\:icon-interaction-link-low-hover:hover {
|
|
7728
7828
|
color: var(--color-interaction-link-low-icon-hover);
|
|
7729
7829
|
}
|