@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.
Files changed (22) hide show
  1. package/dist/css/mccs.css +136 -42
  2. package/dist/css/nova-utils.css +100 -0
  3. package/dist/css/ocean.css +150 -56
  4. package/dist/css/spark.css +148 -54
  5. package/dist/js/mccs_dark.d.ts +63 -22
  6. package/dist/js/mccs_dark.js +63 -22
  7. package/dist/js/mccs_light.d.ts +63 -22
  8. package/dist/js/mccs_light.js +64 -23
  9. package/dist/js/ocean_dark.d.ts +69 -28
  10. package/dist/js/ocean_dark.js +69 -28
  11. package/dist/js/ocean_light.d.ts +69 -28
  12. package/dist/js/ocean_light.js +69 -28
  13. package/dist/js/spacings.d.ts +12 -0
  14. package/dist/js/spacings.js +12 -0
  15. package/dist/js/spark_dark.d.ts +67 -26
  16. package/dist/js/spark_dark.js +69 -28
  17. package/dist/js/spark_light.d.ts +67 -26
  18. package/dist/js/spark_light.js +69 -28
  19. package/dist/lib/cjs/generated/nova-tailwind-tokens.js +69 -0
  20. package/dist/lib/generated/nova-tailwind-tokens.d.ts +69 -0
  21. package/dist/lib/generated/nova-tailwind-tokens.js +69 -0
  22. package/package.json +1 -1
package/dist/css/spark.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: rgba(255, 255, 255, 0);
@@ -24,12 +25,13 @@
24
25
  --components-button-lower-border-hover-2: rgba(255, 255, 255, 0);
25
26
  --components-button-lower-border-2: rgba(255, 255, 255, 0);
26
27
  --components-button-lower-border-hover: rgba(255, 255, 255, 0);
28
+ --components-button-lower-border-active: rgba(255, 255, 255, 0);
27
29
  --components-button-lower-border: rgba(255, 255, 255, 0);
28
- --components-button-lower-background-hover: rgba(255, 255, 255, 0.1);
29
- --components-button-lower-background: rgba(255, 255, 255, 0);
30
30
  --components-button-low-border-hover: rgba(255, 255, 255, 0);
31
+ --components-button-low-border-active: rgba(255, 255, 255, 0);
31
32
  --components-button-low-border: rgba(255, 255, 255, 0);
32
33
  --components-button-low-background: rgba(255, 255, 255, 0);
34
+ --components-button-high-border-active: rgba(255, 255, 255, 0);
33
35
  --components-button-high-border-hover: rgba(255, 255, 255, 0);
34
36
  --components-button-high-border: rgba(255, 255, 255, 0);
35
37
  --components-wpf-components-2: #ffffff;
@@ -63,11 +65,15 @@
63
65
  --color-interaction-container-neutral-background-hover: rgba(255, 255, 255, 0.1);
64
66
  --color-interaction-container-neutral-background: rgba(255, 255, 255, 0);
65
67
  --color-interaction-container-branded-low-background: rgba(255, 255, 255, 0);
68
+ --color-interaction-container-branded-high-border-hover: rgba(255, 255, 255, 0);
69
+ --color-interaction-container-branded-high-border-active: rgba(255, 255, 255, 0);
70
+ --color-interaction-container-branded-high-border: rgba(255, 255, 255, 0);
66
71
  --components-menu-contextual-item-background-hover: var(--color-interaction-container-neutral-background-hover);
67
72
  --components-menu-contextual-item-background: var(--color-interaction-container-neutral-background);
68
73
  --components-tooltip-border: var(--color-gray-spark-50);
69
74
  --components-tooltip-background: var(--color-gray-spark-50);
70
75
  --components-popover-background: var(--color-gray-spark-900);
76
+ --components-overlay-background: var(--color-gray-spark-650);
71
77
  --components-button-destructive-high-icon-hover: var(--color-base-black);
72
78
  --components-button-destructive-high-icon: var(--color-base-black);
73
79
  --components-button-destructive-high-text-hover: var(--color-base-black);
@@ -108,6 +114,8 @@
108
114
  --components-button-gr-as-complementary-text: var(--color-base-white);
109
115
  --components-button-gr-as-complementary-background-hover: var(--color-gray-spark-400);
110
116
  --components-button-gr-as-complementary-background: var(--color-gray-spark-450);
117
+ --components-button-lower-background-hover: var(--color-interaction-container-neutral-background-hover);
118
+ --components-button-lower-background: var(--color-interaction-container-neutral-background);
111
119
  --color-dont-use-background: var(--color-gray-spark-900);
112
120
  --color-dont-use-content: var(--color-gray-spark-750);
113
121
  --color-dont-use-border: var(--color-gray-spark-750);
@@ -228,33 +236,51 @@
228
236
  --color-content-high-icon: var(--color-gray-spark-50);
229
237
  --color-content-high-text: var(--color-gray-spark-50);
230
238
  --color-content-high-border: var(--color-gray-spark-300);
239
+ --color-level-inverted-05-background: var(--color-gray-spark-25);
240
+ --color-level-inverted-00-background: var(--color-gray-spark-00);
241
+ --color-level-inverted-40-background: var(--color-gray-spark-00);
242
+ --color-level-inverted-30-background: var(--color-gray-spark-50);
243
+ --color-level-inverted-20-background: var(--color-gray-spark-00);
244
+ --color-level-inverted-15-background: var(--color-gray-spark-75);
245
+ --color-level-inverted-10-background: var(--color-gray-spark-50);
231
246
  --color-level-05-background: var(--color-gray-spark-850);
232
247
  --color-level-00-background: var(--color-gray-spark-900);
233
248
  --color-level-40-background: var(--color-gray-spark-500);
234
249
  --color-level-30-background: var(--color-gray-spark-600);
235
250
  --color-level-20-background: var(--color-gray-spark-700);
251
+ --color-level-15-background: var(--color-gray-spark-750);
236
252
  --color-level-10-background: var(--color-gray-spark-800);
253
+ --color-interaction-link-inverted-icon-hover: var(--color-orange-500);
254
+ --color-interaction-link-inverted-text-hover: var(--color-orange-500);
237
255
  --color-interaction-link-low-icon-hover: var(--color-orange-500);
238
256
  --color-interaction-link-low-text-hover: var(--color-orange-500);
239
257
  --color-interaction-link-high-icon-hover: var(--color-orange-400);
240
258
  --color-interaction-link-high-icon: var(--color-orange-500);
241
259
  --color-interaction-link-high-text-hover: var(--color-orange-400);
242
260
  --color-interaction-link-high-text: var(--color-orange-500);
243
- --color-interaction-container-branded-high-border-hover: var(--color-orange-400);
244
- --color-interaction-container-branded-high-border: var(--color-orange-500);
245
- --color-interaction-container-branded-high-icon-hover: var(--color-base-black);
246
- --color-interaction-container-branded-high-icon: var(--color-base-black);
261
+ --color-interaction-container-neutral-text-active: var(--color-orange-400);
262
+ --color-interaction-container-neutral-icon-active: var(--color-orange-400);
263
+ --color-interaction-container-neutral-background-active: var(--color-orange-900);
264
+ --color-interaction-container-branded-low-text-hover: var(--color-orange-400);
265
+ --color-interaction-container-branded-low-text-active: var(--color-orange-400);
266
+ --color-interaction-container-branded-low-text: var(--color-orange-500);
267
+ --color-interaction-container-branded-low-icon-hover: var(--color-orange-400);
268
+ --color-interaction-container-branded-low-icon-active: var(--color-orange-400);
269
+ --color-interaction-container-branded-low-icon: var(--color-orange-500);
270
+ --color-interaction-container-branded-low-border-hover: var(--color-orange-400);
271
+ --color-interaction-container-branded-low-border-active: var(--color-orange-400);
272
+ --color-interaction-container-branded-low-border: var(--color-orange-500);
273
+ --color-interaction-container-branded-low-background-hover: var(--color-orange-900);
274
+ --color-interaction-container-branded-low-background-active: var(--color-orange-900);
247
275
  --color-interaction-container-branded-high-text-hover: var(--color-base-black);
276
+ --color-interaction-container-branded-high-text-active: var(--color-base-black);
248
277
  --color-interaction-container-branded-high-text: var(--color-base-black);
278
+ --color-interaction-container-branded-high-icon-hover: var(--color-base-black);
279
+ --color-interaction-container-branded-high-icon-active: var(--color-base-black);
280
+ --color-interaction-container-branded-high-icon: var(--color-base-black);
249
281
  --color-interaction-container-branded-high-background-hover: var(--color-orange-400);
282
+ --color-interaction-container-branded-high-background-active: var(--color-orange-400);
250
283
  --color-interaction-container-branded-high-background: var(--color-orange-500);
251
- --color-interaction-container-branded-low-border-hover: var(--color-orange-400);
252
- --color-interaction-container-branded-low-border: var(--color-orange-500);
253
- --color-interaction-container-branded-low-icon-hover: var(--color-orange-400);
254
- --color-interaction-container-branded-low-icon: var(--color-orange-500);
255
- --color-interaction-container-branded-low-text-hover: var(--color-orange-400);
256
- --color-interaction-container-branded-low-text: var(--color-orange-500);
257
- --color-interaction-container-branded-low-background-hover: var(--color-orange-900);
258
284
  --components-menu-contextual-item-content-disabled: var(--color-content-lower-text);
259
285
  --components-menu-contextual-item-shortcut: var(--color-content-lower-text);
260
286
  --components-menu-contextual-border: var(--color-content-low-border);
@@ -374,43 +400,58 @@
374
400
  --components-form-text-label-default: var(--color-content-high-text);
375
401
  --components-form-text-info-icon: var(--color-content-low-text);
376
402
  --components-form-text-required: var(--color-feedback-error-low-icon);
377
- --components-button-medium-border-hover: var(--color-interaction-container-branded-low-border-hover);
378
- --components-button-medium-border: var(--color-interaction-container-branded-low-border);
379
- --components-button-medium-icon-hover: var(--color-interaction-container-branded-low-icon-hover);
380
- --components-button-medium-icon: var(--color-interaction-container-branded-low-icon);
381
403
  --components-button-medium-text-hover: var(--color-interaction-container-branded-low-text-hover);
404
+ --components-button-medium-text-active: var(--color-interaction-container-branded-low-text-active);
382
405
  --components-button-medium-text: var(--color-interaction-container-branded-low-text);
406
+ --components-button-medium-icon-hover: var(--color-interaction-container-branded-low-icon-hover);
407
+ --components-button-medium-icon-active: var(--color-interaction-container-branded-low-icon-active);
408
+ --components-button-medium-icon: var(--color-interaction-container-branded-low-icon);
409
+ --components-button-medium-border-hover: var(--color-interaction-container-branded-low-border-hover);
410
+ --components-button-medium-border-active: var(--color-interaction-container-branded-low-border-hover);
411
+ --components-button-medium-border: var(--color-interaction-container-branded-low-border);
383
412
  --components-button-medium-background-hover: var(--color-interaction-container-branded-low-background-hover);
384
- --components-button-lower-icon-hover: var(--color-content-high-text);
385
- --components-button-lower-icon: var(--color-content-medium-text);
386
- --components-button-lower-text-hover: var(--color-content-high-text);
387
- --components-button-lower-text: var(--color-content-medium-text);
388
- --components-button-low-icon-hover: var(--color-interaction-container-branded-low-icon-hover);
389
- --components-button-low-icon: var(--color-interaction-container-branded-low-icon);
413
+ --components-button-medium-background-active: var(--color-interaction-container-branded-low-background-active);
414
+ --components-button-lower-text-active: var(--color-interaction-container-neutral-text-active);
415
+ --components-button-lower-icon-active: var(--color-interaction-container-neutral-icon-active);
416
+ --components-button-lower-background-active: var(--color-interaction-container-neutral-background-active);
390
417
  --components-button-low-text-hover: var(--color-interaction-container-branded-low-text-hover);
418
+ --components-button-low-text-active: var(--color-interaction-container-branded-low-text-active);
391
419
  --components-button-low-text: var(--color-interaction-container-branded-low-text);
420
+ --components-button-low-icon-hover: var(--color-interaction-container-branded-low-icon-hover);
421
+ --components-button-low-icon-active: var(--color-interaction-container-branded-low-icon-active);
422
+ --components-button-low-icon: var(--color-interaction-container-branded-low-icon);
392
423
  --components-button-low-background-hover: var(--color-interaction-container-branded-low-background-hover);
424
+ --components-button-low-background-active: var(--color-interaction-container-branded-low-background-active);
393
425
  --components-button-high-icon-hover: var(--color-interaction-container-branded-high-icon-hover);
426
+ --components-button-high-icon-active: var(--color-interaction-container-branded-high-icon-active);
394
427
  --components-button-high-icon: var(--color-interaction-container-branded-high-icon);
395
428
  --components-button-high-text-hover: var(--color-interaction-container-branded-high-text-hover);
429
+ --components-button-high-text-active: var(--color-interaction-container-branded-high-text-active);
396
430
  --components-button-high-text: var(--color-interaction-container-branded-high-text);
397
431
  --components-button-high-background-hover: var(--color-interaction-container-branded-high-background-hover);
432
+ --components-button-high-background-active: var(--color-interaction-container-branded-high-background-active);
398
433
  --components-button-high-background: var(--color-interaction-container-branded-high-background);
399
434
  --color-focus-success: var(--color-feedback-success-low-border);
400
435
  --color-focus-destructive: var(--color-feedback-error-high-border);
436
+ --color-interaction-link-inverted-icon: var(--color-content-inverted-medium-icon);
437
+ --color-interaction-link-inverted-text: var(--color-content-inverted-medium-text);
401
438
  --color-interaction-link-low-icon: var(--color-content-high-text);
402
439
  --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
440
  --color-interaction-container-neutral-text-hover: var(--color-content-medium-text);
408
441
  --color-interaction-container-neutral-text: var(--color-content-low-text);
442
+ --color-interaction-container-neutral-icon-hover: var(--color-content-medium-text);
443
+ --color-interaction-container-neutral-icon: var(--color-content-low-text);
444
+ --color-interaction-container-neutral-border-hover: var(--color-content-medium-text);
445
+ --color-interaction-container-neutral-border: var(--color-content-low-text);
409
446
  --components-menu-contextual-item-content-hover: var(--color-interaction-container-neutral-text-hover);
410
447
  --components-menu-contextual-item-content: var(--color-interaction-container-neutral-text);
411
448
  --components-list-custom-item-content-hover: var(--color-interaction-container-neutral-text-hover);
412
449
  --components-list-custom-item-content-default: var(--color-interaction-container-neutral-text);
413
450
  --components-form-shape-foreground-disabled: var(--components-form-shape-border-default);
451
+ --components-button-lower-text-hover: var(--color-interaction-container-neutral-text-hover);
452
+ --components-button-lower-text: var(--color-interaction-container-neutral-text);
453
+ --components-button-lower-icon-hover: var(--color-interaction-container-neutral-icon-hover);
454
+ --components-button-lower-icon: var(--color-interaction-container-neutral-icon);
414
455
  }
415
456
 
416
457
  :root {
@@ -441,6 +482,7 @@
441
482
  */
442
483
 
443
484
  :root {
485
+ --components-overlay-opacity: 55px;
444
486
  --components-button-destructive-low-border-hover: rgba(255, 255, 255, 0);
445
487
  --components-button-destructive-low-border: rgba(255, 255, 255, 0);
446
488
  --components-button-destructive-low-background: rgba(255, 255, 255, 0);
@@ -462,12 +504,12 @@
462
504
  --components-button-lower-border-hover-2: rgba(255, 255, 255, 0);
463
505
  --components-button-lower-border-2: rgba(255, 255, 255, 0);
464
506
  --components-button-lower-border-hover: rgba(255, 255, 255, 0);
507
+ --components-button-lower-border-active: rgba(255, 255, 255, 0);
465
508
  --components-button-lower-border: rgba(255, 255, 255, 0);
466
- --components-button-lower-background: rgba(255, 255, 255, 0);
467
509
  --components-button-low-border-hover: rgba(255, 255, 255, 0);
510
+ --components-button-low-border-active: rgba(255, 255, 255, 0);
468
511
  --components-button-low-border: rgba(255, 255, 255, 0);
469
512
  --components-button-low-background: rgba(255, 255, 255, 0);
470
- --components-button-high-border-hover: rgba(255, 255, 255, 0);
471
513
  --components-button-high-border: rgba(255, 255, 255, 0);
472
514
  --components-wpf-components-2: #ffffff;
473
515
  --shadow-y-axis-2xl: 25px;
@@ -500,11 +542,15 @@
500
542
  --color-interaction-container-neutral-background-hover: rgba(165, 165, 165, 0.12);
501
543
  --color-interaction-container-neutral-background: rgba(255, 255, 255, 0);
502
544
  --color-interaction-container-branded-low-background: rgba(255, 255, 255, 0);
545
+ --color-interaction-container-branded-high-border-hover: rgba(255, 255, 255, 0);
546
+ --color-interaction-container-branded-high-border-active: rgba(255, 255, 255, 0);
547
+ --color-interaction-container-branded-high-border: rgba(255, 255, 255, 0);
503
548
  --components-menu-contextual-item-background-hover: var(--color-interaction-container-neutral-background-hover);
504
549
  --components-menu-contextual-item-background: var(--color-interaction-container-neutral-background);
505
550
  --components-tooltip-border: var(--color-gray-spark-900);
506
551
  --components-tooltip-background: var(--color-gray-spark-900);
507
552
  --components-popover-background: var(--color-gray-spark-50);
553
+ --components-overlay-background: var(--color-gray-spark-850);
508
554
  --components-button-destructive-high-icon-hover: var(--color-base-white);
509
555
  --components-button-destructive-high-icon: var(--color-base-white);
510
556
  --components-button-destructive-high-text-hover: var(--color-base-white);
@@ -546,6 +592,9 @@
546
592
  --components-button-gr-as-complementary-background-hover: var(--color-gray-spark-300);
547
593
  --components-button-gr-as-complementary-background: var(--color-gray-spark-200);
548
594
  --components-button-lower-background-hover: var(--color-interaction-container-neutral-background-hover);
595
+ --components-button-lower-background: var(--color-interaction-container-neutral-background);
596
+ --components-button-high-border-active: var(--color-interaction-container-branded-high-border-active);
597
+ --components-button-high-border-hover: var(--color-interaction-container-branded-high-border-hover);
549
598
  --color-dont-use-background: var(--color-gray-spark-50);
550
599
  --color-dont-use-content: var(--color-gray-spark-100);
551
600
  --color-dont-use-border: var(--color-gray-spark-100);
@@ -666,33 +715,51 @@
666
715
  --color-content-high-icon: var(--color-gray-spark-800);
667
716
  --color-content-high-text: var(--color-gray-spark-800);
668
717
  --color-content-high-border: var(--color-gray-spark-300);
718
+ --color-level-inverted-05-background: var(--color-gray-spark-850);
719
+ --color-level-inverted-00-background: var(--color-gray-spark-900);
720
+ --color-level-inverted-40-background: var(--color-gray-spark-500);
721
+ --color-level-inverted-30-background: var(--color-gray-spark-600);
722
+ --color-level-inverted-20-background: var(--color-gray-spark-700);
723
+ --color-level-inverted-15-background: var(--color-gray-spark-750);
724
+ --color-level-inverted-10-background: var(--color-gray-spark-800);
669
725
  --color-level-05-background: var(--color-gray-spark-25);
670
726
  --color-level-00-background: var(--color-gray-spark-00);
671
727
  --color-level-40-background: var(--color-gray-spark-00);
672
728
  --color-level-30-background: var(--color-gray-spark-50);
673
729
  --color-level-20-background: var(--color-gray-spark-00);
730
+ --color-level-15-background: var(--color-gray-spark-75);
674
731
  --color-level-10-background: var(--color-gray-spark-50);
732
+ --color-interaction-link-inverted-icon-hover: var(--color-orange-500);
733
+ --color-interaction-link-inverted-text-hover: var(--color-orange-500);
675
734
  --color-interaction-link-low-icon-hover: var(--color-orange-500);
676
735
  --color-interaction-link-low-text-hover: var(--color-orange-500);
677
736
  --color-interaction-link-high-icon-hover: var(--color-orange-600);
678
737
  --color-interaction-link-high-icon: var(--color-orange-500);
679
738
  --color-interaction-link-high-text-hover: var(--color-orange-600);
680
739
  --color-interaction-link-high-text: var(--color-orange-500);
681
- --color-interaction-container-branded-high-border-hover: var(--color-orange-600);
682
- --color-interaction-container-branded-high-border: var(--color-orange-500);
683
- --color-interaction-container-branded-high-icon-hover: var(--color-base-white);
684
- --color-interaction-container-branded-high-icon: var(--color-base-white);
740
+ --color-interaction-container-neutral-text-active: var(--color-orange-600);
741
+ --color-interaction-container-neutral-icon-active: var(--color-orange-600);
742
+ --color-interaction-container-neutral-background-active: var(--color-orange-50);
743
+ --color-interaction-container-branded-low-text-hover: var(--color-orange-600);
744
+ --color-interaction-container-branded-low-text-active: var(--color-orange-600);
745
+ --color-interaction-container-branded-low-text: var(--color-orange-500);
746
+ --color-interaction-container-branded-low-icon-hover: var(--color-orange-600);
747
+ --color-interaction-container-branded-low-icon-active: var(--color-orange-600);
748
+ --color-interaction-container-branded-low-icon: var(--color-orange-500);
749
+ --color-interaction-container-branded-low-border-hover: var(--color-orange-600);
750
+ --color-interaction-container-branded-low-border-active: var(--color-orange-600);
751
+ --color-interaction-container-branded-low-border: var(--color-orange-500);
752
+ --color-interaction-container-branded-low-background-hover: var(--color-orange-50);
753
+ --color-interaction-container-branded-low-background-active: var(--color-orange-50);
685
754
  --color-interaction-container-branded-high-text-hover: var(--color-base-white);
755
+ --color-interaction-container-branded-high-text-active: var(--color-base-white);
686
756
  --color-interaction-container-branded-high-text: var(--color-base-white);
757
+ --color-interaction-container-branded-high-icon-hover: var(--color-base-white);
758
+ --color-interaction-container-branded-high-icon-active: var(--color-base-white);
759
+ --color-interaction-container-branded-high-icon: var(--color-base-white);
687
760
  --color-interaction-container-branded-high-background-hover: var(--color-orange-600);
761
+ --color-interaction-container-branded-high-background-active: var(--color-orange-600);
688
762
  --color-interaction-container-branded-high-background: var(--color-orange-500);
689
- --color-interaction-container-branded-low-border-hover: var(--color-orange-600);
690
- --color-interaction-container-branded-low-border: var(--color-orange-500);
691
- --color-interaction-container-branded-low-icon-hover: var(--color-orange-600);
692
- --color-interaction-container-branded-low-icon: var(--color-orange-500);
693
- --color-interaction-container-branded-low-text-hover: var(--color-orange-600);
694
- --color-interaction-container-branded-low-text: var(--color-orange-500);
695
- --color-interaction-container-branded-low-background-hover: var(--color-orange-50);
696
763
  --components-menu-contextual-item-content-disabled: var(--color-content-lower-text);
697
764
  --components-menu-contextual-item-shortcut: var(--color-content-lower-text);
698
765
  --components-menu-contextual-border: var(--color-content-low-border);
@@ -812,43 +879,58 @@
812
879
  --components-form-text-label-default: var(--color-content-high-text);
813
880
  --components-form-text-info-icon: var(--color-content-low-text);
814
881
  --components-form-text-required: var(--color-feedback-error-low-icon);
815
- --components-button-medium-border-hover: var(--color-interaction-container-branded-low-border-hover);
816
- --components-button-medium-border: var(--color-interaction-container-branded-low-border);
817
- --components-button-medium-icon-hover: var(--color-interaction-container-branded-low-icon-hover);
818
- --components-button-medium-icon: var(--color-interaction-container-branded-low-icon);
819
882
  --components-button-medium-text-hover: var(--color-interaction-container-branded-low-text-hover);
883
+ --components-button-medium-text-active: var(--color-interaction-container-branded-low-text-active);
820
884
  --components-button-medium-text: var(--color-interaction-container-branded-low-text);
885
+ --components-button-medium-icon-hover: var(--color-interaction-container-branded-low-icon-hover);
886
+ --components-button-medium-icon-active: var(--color-interaction-container-branded-low-icon-active);
887
+ --components-button-medium-icon: var(--color-interaction-container-branded-low-icon);
888
+ --components-button-medium-border-hover: var(--color-interaction-container-branded-low-border-hover);
889
+ --components-button-medium-border-active: var(--color-interaction-container-branded-low-border-hover);
890
+ --components-button-medium-border: var(--color-interaction-container-branded-low-border);
821
891
  --components-button-medium-background-hover: var(--color-interaction-container-branded-low-background-hover);
822
- --components-button-lower-icon-hover: var(--color-content-high-text);
823
- --components-button-lower-icon: var(--color-content-medium-text);
824
- --components-button-lower-text-hover: var(--color-content-high-text);
825
- --components-button-lower-text: var(--color-content-medium-text);
826
- --components-button-low-icon-hover: var(--color-interaction-container-branded-low-icon-hover);
827
- --components-button-low-icon: var(--color-interaction-container-branded-low-icon);
892
+ --components-button-medium-background-active: var(--color-interaction-container-branded-low-background-active);
893
+ --components-button-lower-text-active: var(--color-interaction-container-neutral-text-active);
894
+ --components-button-lower-icon-active: var(--color-interaction-container-neutral-icon-active);
895
+ --components-button-lower-background-active: var(--color-interaction-container-neutral-background-active);
828
896
  --components-button-low-text-hover: var(--color-interaction-container-branded-low-text-hover);
897
+ --components-button-low-text-active: var(--color-interaction-container-branded-low-text-active);
829
898
  --components-button-low-text: var(--color-interaction-container-branded-low-text);
899
+ --components-button-low-icon-hover: var(--color-interaction-container-branded-low-icon-hover);
900
+ --components-button-low-icon-active: var(--color-interaction-container-branded-low-icon-active);
901
+ --components-button-low-icon: var(--color-interaction-container-branded-low-icon);
830
902
  --components-button-low-background-hover: var(--color-interaction-container-branded-low-background-hover);
903
+ --components-button-low-background-active: var(--color-interaction-container-branded-low-background-active);
831
904
  --components-button-high-icon-hover: var(--color-interaction-container-branded-high-icon-hover);
905
+ --components-button-high-icon-active: var(--color-interaction-container-branded-high-icon-active);
832
906
  --components-button-high-icon: var(--color-interaction-container-branded-high-icon);
833
907
  --components-button-high-text-hover: var(--color-interaction-container-branded-high-text-hover);
908
+ --components-button-high-text-active: var(--color-interaction-container-branded-high-text-active);
834
909
  --components-button-high-text: var(--color-interaction-container-branded-high-text);
835
910
  --components-button-high-background-hover: var(--color-interaction-container-branded-high-background-hover);
911
+ --components-button-high-background-active: var(--color-interaction-container-branded-high-background-active);
836
912
  --components-button-high-background: var(--color-interaction-container-branded-high-background);
837
913
  --color-focus-success: var(--color-feedback-success-low-border);
838
914
  --color-focus-destructive: var(--color-feedback-error-high-border);
915
+ --color-interaction-link-inverted-icon: var(--color-content-inverted-medium-icon);
916
+ --color-interaction-link-inverted-text: var(--color-content-inverted-medium-text);
839
917
  --color-interaction-link-low-icon: var(--color-content-high-text);
840
918
  --color-interaction-link-low-text: var(--color-content-high-text);
841
- --color-interaction-container-neutral-border-hover: var(--color-content-medium-text);
842
- --color-interaction-container-neutral-border: var(--color-content-low-text);
843
- --color-interaction-container-neutral-icon-hover: var(--color-content-medium-text);
844
- --color-interaction-container-neutral-icon: var(--color-content-low-text);
845
919
  --color-interaction-container-neutral-text-hover: var(--color-content-medium-text);
846
920
  --color-interaction-container-neutral-text: var(--color-content-low-text);
921
+ --color-interaction-container-neutral-icon-hover: var(--color-content-medium-text);
922
+ --color-interaction-container-neutral-icon: var(--color-content-low-text);
923
+ --color-interaction-container-neutral-border-hover: var(--color-content-medium-text);
924
+ --color-interaction-container-neutral-border: var(--color-content-low-text);
847
925
  --components-menu-contextual-item-content-hover: var(--color-interaction-container-neutral-text-hover);
848
926
  --components-menu-contextual-item-content: var(--color-interaction-container-neutral-text);
849
927
  --components-list-custom-item-content-hover: var(--color-interaction-container-neutral-text-hover);
850
928
  --components-list-custom-item-content-default: var(--color-interaction-container-neutral-text);
851
929
  --components-form-shape-foreground-disabled: var(--components-form-shape-border-default);
930
+ --components-button-lower-text-hover: var(--color-interaction-container-neutral-text-hover);
931
+ --components-button-lower-text: var(--color-interaction-container-neutral-text);
932
+ --components-button-lower-icon-hover: var(--color-interaction-container-neutral-icon-hover);
933
+ --components-button-lower-icon: var(--color-interaction-container-neutral-icon);
852
934
  }
853
935
 
854
936
  /**
@@ -1241,6 +1323,18 @@
1241
1323
  --focus-outline-stroke: var(--spacing-0-5);
1242
1324
  --focus-outline-offset: var(--spacing-0-5);
1243
1325
  --focus-field-stroke: var(--spacing-px);
1326
+ --dialog-footer-padding-x: var(--spacing-6);
1327
+ --dialog-footer-padding-bottom: var(--spacing-6);
1328
+ --dialog-footer-padding-top: var(--spacing-2);
1329
+ --dialog-footer-gap-y: var(--spacing-3);
1330
+ --dialog-body-padding-y: var(--spacing-2);
1331
+ --dialog-body-padding-x: var(--spacing-6);
1332
+ --dialog-header-padding-x: var(--spacing-6);
1333
+ --dialog-header-padding-bottom: var(--spacing-2);
1334
+ --dialog-header-padding-top: var(--spacing-6);
1335
+ --dialog-header-gap-y: var(--spacing-0);
1336
+ --dialog-dismissible-position-right: var(--spacing-3);
1337
+ --dialog-dismissible-position-top: var(--spacing-5);
1244
1338
  --badge-radius: var(--radius-rounded-full);
1245
1339
  --badge-padding-y: var(--spacing-1);
1246
1340
  --badge-padding-x: var(--spacing-2);
package/dist/js/mccs_dark.d.ts CHANGED
@@ -3,29 +3,40 @@
3
3
  */
4
4
 
5
5
  export const ColorInteractionContainerBrandedLowBackground : string;
6
+ export const ColorInteractionContainerBrandedLowBackgroundActive : string;
6
7
  export const ColorInteractionContainerBrandedLowBackgroundHover : string;
7
- export const ColorInteractionContainerBrandedLowText : string;
8
- export const ColorInteractionContainerBrandedLowTextHover : string;
9
- export const ColorInteractionContainerBrandedLowIcon : string;
10
- export const ColorInteractionContainerBrandedLowIconHover : string;
11
8
  export const ColorInteractionContainerBrandedLowBorder : string;
9
+ export const ColorInteractionContainerBrandedLowBorderActive : string;
12
10
  export const ColorInteractionContainerBrandedLowBorderHover : string;
11
+ export const ColorInteractionContainerBrandedLowIcon : string;
12
+ export const ColorInteractionContainerBrandedLowIconActive : string;
13
+ export const ColorInteractionContainerBrandedLowIconHover : string;
14
+ export const ColorInteractionContainerBrandedLowText : string;
15
+ export const ColorInteractionContainerBrandedLowTextActive : string;
16
+ export const ColorInteractionContainerBrandedLowTextHover : string;
13
17
  export const ColorInteractionContainerBrandedHighBackground : string;
18
+ export const ColorInteractionContainerBrandedHighBackgroundActive : string;
14
19
  export const ColorInteractionContainerBrandedHighBackgroundHover : string;
15
- export const ColorInteractionContainerBrandedHighText : string;
16
- export const ColorInteractionContainerBrandedHighTextHover : string;
17
- export const ColorInteractionContainerBrandedHighIcon : string;
18
- export const ColorInteractionContainerBrandedHighIconHover : string;
19
20
  export const ColorInteractionContainerBrandedHighBorder : string;
21
+ export const ColorInteractionContainerBrandedHighBorderActive : string;
20
22
  export const ColorInteractionContainerBrandedHighBorderHover : string;
23
+ export const ColorInteractionContainerBrandedHighIcon : string;
24
+ export const ColorInteractionContainerBrandedHighIconActive : string;
25
+ export const ColorInteractionContainerBrandedHighIconHover : string;
26
+ export const ColorInteractionContainerBrandedHighText : string;
27
+ export const ColorInteractionContainerBrandedHighTextActive : string;
28
+ export const ColorInteractionContainerBrandedHighTextHover : string;
21
29
  export const ColorInteractionContainerNeutralBackground : string;
22
30
  export const ColorInteractionContainerNeutralBackgroundHover : string;
23
- export const ColorInteractionContainerNeutralText : string;
24
- export const ColorInteractionContainerNeutralTextHover : string;
25
- export const ColorInteractionContainerNeutralIcon : string;
26
- export const ColorInteractionContainerNeutralIconHover : string;
31
+ export const ColorInteractionContainerNeutralBackgroundActive : string;
27
32
  export const ColorInteractionContainerNeutralBorder : string;
28
33
  export const ColorInteractionContainerNeutralBorderHover : string;
34
+ export const ColorInteractionContainerNeutralIcon : string;
35
+ export const ColorInteractionContainerNeutralIconActive : string;
36
+ export const ColorInteractionContainerNeutralIconHover : string;
37
+ export const ColorInteractionContainerNeutralText : string;
38
+ export const ColorInteractionContainerNeutralTextActive : string;
39
+ export const ColorInteractionContainerNeutralTextHover : string;
29
40
  export const ColorInteractionLinkHighText : string;
30
41
  export const ColorInteractionLinkHighTextHover : string;
31
42
  export const ColorInteractionLinkHighIcon : string;
@@ -34,13 +45,25 @@ export const ColorInteractionLinkLowText : string;
34
45
  export const ColorInteractionLinkLowTextHover : string;
35
46
  export const ColorInteractionLinkLowIcon : string;
36
47
  export const ColorInteractionLinkLowIconHover : string;
48
+ export const ColorInteractionLinkInvertedText : string;
49
+ export const ColorInteractionLinkInvertedTextHover : string;
50
+ export const ColorInteractionLinkInvertedIcon : string;
51
+ export const ColorInteractionLinkInvertedIconHover : string;
37
52
  export const ColorBlack : string;
38
53
  export const ColorLevel10Background : string;
54
+ export const ColorLevel15Background : string;
39
55
  export const ColorLevel20Background : string;
40
56
  export const ColorLevel30Background : string;
41
57
  export const ColorLevel40Background : string;
42
58
  export const ColorLevel00Background : string;
43
59
  export const ColorLevel05Background : string;
60
+ export const ColorLevelInverted10Background : string;
61
+ export const ColorLevelInverted15Background : string;
62
+ export const ColorLevelInverted20Background : string;
63
+ export const ColorLevelInverted30Background : string;
64
+ export const ColorLevelInverted40Background : string;
65
+ export const ColorLevelInverted00Background : string;
66
+ export const ColorLevelInverted05Background : string;
44
67
  export const ColorContentHighBorder : string;
45
68
  export const ColorContentHighText : string;
46
69
  export const ColorContentHighIcon : string;
@@ -192,30 +215,42 @@ export const ShadowYAxis2xl : string;
192
215
  export const ComponentsWpfComponents2 : string;
193
216
  export const ComponentsButtonHighBorder : string;
194
217
  export const ComponentsButtonHighBorderHover : string;
218
+ export const ComponentsButtonHighBorderActive : string;
195
219
  export const ComponentsButtonHighBackground : string;
220
+ export const ComponentsButtonHighBackgroundActive : string;
196
221
  export const ComponentsButtonHighBackgroundHover : string;
197
222
  export const ComponentsButtonHighText : string;
223
+ export const ComponentsButtonHighTextActive : string;
198
224
  export const ComponentsButtonHighTextHover : string;
199
225
  export const ComponentsButtonHighIcon : string;
226
+ export const ComponentsButtonHighIconActive : string;
200
227
  export const ComponentsButtonHighIconHover : string;
201
228
  export const ComponentsButtonLowBackground : string;
229
+ export const ComponentsButtonLowBackgroundActive : string;
202
230
  export const ComponentsButtonLowBackgroundHover : string;
203
- export const ComponentsButtonLowText : string;
204
- export const ComponentsButtonLowTextHover : string;
205
- export const ComponentsButtonLowIcon : string;
206
- export const ComponentsButtonLowIconHover : string;
207
231
  export const ComponentsButtonLowBorder : string;
232
+ export const ComponentsButtonLowBorderActive : string;
208
233
  export const ComponentsButtonLowBorderHover : string;
234
+ export const ComponentsButtonLowIcon : string;
235
+ export const ComponentsButtonLowIconActive : string;
236
+ export const ComponentsButtonLowIconHover : string;
237
+ export const ComponentsButtonLowText : string;
238
+ export const ComponentsButtonLowTextActive : string;
239
+ export const ComponentsButtonLowTextHover : string;
209
240
  export const ComponentsButtonLowerBorder : string;
241
+ export const ComponentsButtonLowerBorderActive : string;
210
242
  export const ComponentsButtonLowerBorderHover : string;
211
243
  export const ComponentsButtonLowerBorder2 : string;
212
244
  export const ComponentsButtonLowerBorderHover2 : string;
213
245
  export const ComponentsButtonLowerBackground : string;
246
+ export const ComponentsButtonLowerBackgroundActive : string;
214
247
  export const ComponentsButtonLowerBackgroundHover : string;
215
- export const ComponentsButtonLowerText : string;
216
- export const ComponentsButtonLowerTextHover : string;
217
248
  export const ComponentsButtonLowerIcon : string;
249
+ export const ComponentsButtonLowerIconActive : string;
218
250
  export const ComponentsButtonLowerIconHover : string;
251
+ export const ComponentsButtonLowerText : string;
252
+ export const ComponentsButtonLowerTextActive : string;
253
+ export const ComponentsButtonLowerTextHover : string;
219
254
  export const ComponentsButtonGrAsComplementaryBorder : string;
220
255
  export const ComponentsButtonGrAsComplementaryBorderHover : string;
221
256
  export const ComponentsButtonGrAsComplementaryBackground : string;
@@ -225,13 +260,17 @@ export const ComponentsButtonGrAsComplementaryTextHover : string;
225
260
  export const ComponentsButtonGrAsComplementaryIcon : string;
226
261
  export const ComponentsButtonGrAsComplementaryIconHover : string;
227
262
  export const ComponentsButtonMediumBackground : string;
263
+ export const ComponentsButtonMediumBackgroundActive : string;
228
264
  export const ComponentsButtonMediumBackgroundHover : string;
229
- export const ComponentsButtonMediumText : string;
230
- export const ComponentsButtonMediumTextHover : string;
231
- export const ComponentsButtonMediumIcon : string;
232
- export const ComponentsButtonMediumIconHover : string;
233
265
  export const ComponentsButtonMediumBorder : string;
266
+ export const ComponentsButtonMediumBorderActive : string;
234
267
  export const ComponentsButtonMediumBorderHover : string;
268
+ export const ComponentsButtonMediumIcon : string;
269
+ export const ComponentsButtonMediumIconActive : string;
270
+ export const ComponentsButtonMediumIconHover : string;
271
+ export const ComponentsButtonMediumText : string;
272
+ export const ComponentsButtonMediumTextActive : string;
273
+ export const ComponentsButtonMediumTextHover : string;
235
274
  export const ComponentsFormOpacityDefault : string;
236
275
  export const ComponentsFormOpacityDisabled : string;
237
276
  export const ComponentsFormTextRequired : string;
@@ -330,6 +369,8 @@ export const ComponentsButtonDestructiveLowerIcon : string;
330
369
  export const ComponentsButtonDestructiveLowerIconHover : string;
331
370
  export const ComponentsButtonDestructiveLowerBorder : string;
332
371
  export const ComponentsButtonDestructiveLowerBorderHover : string;
372
+ export const ComponentsOverlayOpacity : string;
373
+ export const ComponentsOverlayBackground : string;
333
374
  export const ComponentsAlertInformationBackground : string;
334
375
  export const ComponentsAlertInformationIcon : string;
335
376
  export const ComponentsAlertInformationBorder : string;