@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/ocean.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,13 +25,16 @@
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
30
  --components-button-low-border-hover: rgba(255, 255, 255, 0);
31
+ --components-button-low-border-active: rgba(255, 255, 255, 0);
29
32
  --components-button-low-border: rgba(255, 255, 255, 0);
30
33
  --components-button-low-background: rgba(255, 255, 255, 0);
34
+ --components-button-medium-background: rgba(255, 255, 255, 0);
35
+ --components-button-high-border-active: rgba(255, 255, 255, 0);
31
36
  --components-button-high-border-hover: rgba(255, 255, 255, 0);
32
37
  --components-button-high-border: rgba(255, 255, 255, 0);
33
- --components-button-medium-background: rgba(255, 255, 255, 0);
34
38
  --components-wpf-components-2: #ffffff;
35
39
  --shadow-y-axis-2xl: 25px;
36
40
  --shadow-y-axis-xl-2: 20px;
@@ -62,11 +66,15 @@
62
66
  --color-interaction-container-neutral-background-hover: rgba(255, 255, 255, 0.1);
63
67
  --color-interaction-container-neutral-background: rgba(255, 255, 255, 0);
64
68
  --color-interaction-container-branded-low-background: rgba(255, 255, 255, 0);
69
+ --color-interaction-container-branded-high-border-hover: rgba(255, 255, 255, 0);
70
+ --color-interaction-container-branded-high-border-active: rgba(255, 255, 255, 0);
71
+ --color-interaction-container-branded-high-border: rgba(255, 255, 255, 0);
65
72
  --components-menu-contextual-item-background-hover: var(--color-interaction-container-neutral-background-hover);
66
73
  --components-menu-contextual-item-background: var(--color-interaction-container-neutral-background);
67
74
  --components-tooltip-border: var(--color-gray-ocean-50);
68
75
  --components-tooltip-background: var(--color-gray-ocean-50);
69
76
  --components-popover-background: var(--color-gray-ocean-900);
77
+ --components-overlay-background: var(--color-gray-ocean-650);
70
78
  --components-button-destructive-high-icon-hover: var(--color-base-black);
71
79
  --components-button-destructive-high-icon: var(--color-base-black);
72
80
  --components-button-destructive-high-text-hover: var(--color-base-black);
@@ -107,7 +115,7 @@
107
115
  --components-button-gr-as-complementary-background-hover: var(--color-gray-ocean-350);
108
116
  --components-button-gr-as-complementary-background: var(--color-gray-ocean-450);
109
117
  --components-button-lower-background-hover: var(--color-interaction-container-neutral-background-hover);
110
- --components-button-lower-background: var(--color-interaction-container-branded-low-background);
118
+ --components-button-lower-background: var(--color-interaction-container-neutral-background);
111
119
  --color-dont-use-background: var(--color-gray-ocean-900);
112
120
  --color-dont-use-content: var(--color-gray-ocean-750);
113
121
  --color-dont-use-border: var(--color-gray-ocean-750);
@@ -228,33 +236,51 @@
228
236
  --color-content-high-icon: var(--color-gray-ocean-50);
229
237
  --color-content-high-text: var(--color-gray-ocean-50);
230
238
  --color-content-high-border: var(--color-gray-ocean-300);
239
+ --color-level-inverted-05-background: var(--color-gray-ocean-25);
240
+ --color-level-inverted-00-background: var(--color-gray-ocean-00);
241
+ --color-level-inverted-40-background: var(--color-gray-ocean-00);
242
+ --color-level-inverted-30-background: var(--color-gray-ocean-50);
243
+ --color-level-inverted-20-background: var(--color-gray-ocean-00);
244
+ --color-level-inverted-15-background: var(--color-gray-ocean-75);
245
+ --color-level-inverted-10-background: var(--color-gray-ocean-50);
231
246
  --color-level-05-background: var(--color-gray-ocean-850);
232
247
  --color-level-00-background: var(--color-gray-ocean-900);
233
248
  --color-level-40-background: var(--color-gray-ocean-500);
234
249
  --color-level-30-background: var(--color-gray-ocean-600);
235
250
  --color-level-20-background: var(--color-gray-ocean-700);
251
+ --color-level-15-background: var(--color-gray-ocean-800);
236
252
  --color-level-10-background: var(--color-gray-ocean-800);
253
+ --color-interaction-link-inverted-icon-hover: var(--color-petrol-500);
254
+ --color-interaction-link-inverted-text-hover: var(--color-petrol-500);
237
255
  --color-interaction-link-low-icon-hover: var(--color-petrol-500);
238
256
  --color-interaction-link-low-text-hover: var(--color-petrol-500);
239
257
  --color-interaction-link-high-icon-hover: var(--color-petrol-400);
240
258
  --color-interaction-link-high-icon: var(--color-petrol-500);
241
259
  --color-interaction-link-high-text-hover: var(--color-petrol-400);
242
260
  --color-interaction-link-high-text: var(--color-petrol-500);
243
- --color-interaction-container-branded-high-border-hover: var(--color-petrol-400);
244
- --color-interaction-container-branded-high-border: var(--color-petrol-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-petrol-400);
262
+ --color-interaction-container-neutral-icon-active: var(--color-petrol-400);
263
+ --color-interaction-container-neutral-background-active: var(--color-petrol-900);
264
+ --color-interaction-container-branded-low-text-hover: var(--color-petrol-400);
265
+ --color-interaction-container-branded-low-text-active: var(--color-petrol-400);
266
+ --color-interaction-container-branded-low-text: var(--color-petrol-500);
267
+ --color-interaction-container-branded-low-icon-hover: var(--color-petrol-400);
268
+ --color-interaction-container-branded-low-icon-active: var(--color-petrol-400);
269
+ --color-interaction-container-branded-low-icon: var(--color-petrol-500);
270
+ --color-interaction-container-branded-low-border-hover: var(--color-petrol-400);
271
+ --color-interaction-container-branded-low-border-active: var(--color-petrol-400);
272
+ --color-interaction-container-branded-low-border: var(--color-petrol-500);
273
+ --color-interaction-container-branded-low-background-hover: var(--color-petrol-900);
274
+ --color-interaction-container-branded-low-background-active: var(--color-petrol-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-petrol-400);
282
+ --color-interaction-container-branded-high-background-active: var(--color-petrol-400);
250
283
  --color-interaction-container-branded-high-background: var(--color-petrol-500);
251
- --color-interaction-container-branded-low-border-hover: var(--color-petrol-400);
252
- --color-interaction-container-branded-low-border: var(--color-petrol-500);
253
- --color-interaction-container-branded-low-icon-hover: var(--color-petrol-400);
254
- --color-interaction-container-branded-low-icon: var(--color-petrol-500);
255
- --color-interaction-container-branded-low-text-hover: var(--color-petrol-400);
256
- --color-interaction-container-branded-low-text: var(--color-petrol-500);
257
- --color-interaction-container-branded-low-background-hover: var(--color-petrol-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-medium-text);
376
402
  --components-form-text-required: var(--color-feedback-error-low-icon);
377
- --components-button-low-icon-hover: var(--color-interaction-container-branded-low-icon-hover);
378
- --components-button-low-icon: var(--color-interaction-container-branded-low-icon);
403
+ --components-button-lower-text-active: var(--color-interaction-container-neutral-text-active);
404
+ --components-button-lower-icon-active: var(--color-interaction-container-neutral-icon-active);
405
+ --components-button-lower-background-active: var(--color-interaction-container-neutral-background-active);
379
406
  --components-button-low-text-hover: var(--color-interaction-container-branded-low-text-hover);
407
+ --components-button-low-text-active: var(--color-interaction-container-branded-low-text-active);
380
408
  --components-button-low-text: var(--color-interaction-container-branded-low-text);
409
+ --components-button-low-icon-hover: var(--color-interaction-container-branded-low-icon-hover);
410
+ --components-button-low-icon-active: var(--color-interaction-container-branded-low-icon-active);
411
+ --components-button-low-icon: var(--color-interaction-container-branded-low-icon);
381
412
  --components-button-low-background-hover: var(--color-interaction-container-branded-low-background-hover);
413
+ --components-button-low-background-active: var(--color-interaction-container-branded-low-background-active);
414
+ --components-button-medium-text-hover: var(--color-interaction-container-branded-low-text-hover);
415
+ --components-button-medium-text-active: var(--color-interaction-container-branded-low-text-active);
416
+ --components-button-medium-text: var(--color-interaction-container-branded-low-text);
417
+ --components-button-medium-icon-hover: var(--color-interaction-container-branded-low-icon-hover);
418
+ --components-button-medium-icon-active: var(--color-interaction-container-branded-low-icon-active);
419
+ --components-button-medium-icon: var(--color-interaction-container-branded-low-icon);
420
+ --components-button-medium-border-hover: var(--color-interaction-container-branded-low-border-hover);
421
+ --components-button-medium-border-active: var(--color-interaction-container-branded-low-border-hover);
422
+ --components-button-medium-border: var(--color-interaction-container-branded-low-border);
423
+ --components-button-medium-background-hover: var(--color-interaction-container-branded-low-background-hover);
424
+ --components-button-medium-background-active: var(--color-interaction-container-branded-low-background-active);
382
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);
383
427
  --components-button-high-icon: var(--color-interaction-container-branded-high-icon);
384
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);
385
430
  --components-button-high-text: var(--color-interaction-container-branded-high-text);
386
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);
387
433
  --components-button-high-background: var(--color-interaction-container-branded-high-background);
388
- --components-button-medium-border-hover: var(--color-interaction-container-branded-low-border-hover);
389
- --components-button-medium-border: var(--color-interaction-container-branded-low-border);
390
- --components-button-medium-icon-hover: var(--color-interaction-container-branded-low-icon-hover);
391
- --components-button-medium-icon: var(--color-interaction-container-branded-low-icon);
392
- --components-button-medium-text-hover: var(--color-interaction-container-branded-low-text-hover);
393
- --components-button-medium-text: var(--color-interaction-container-branded-low-text);
394
- --components-button-medium-background-hover: var(--color-interaction-container-branded-low-background-hover);
395
434
  --color-focus-success: var(--color-feedback-success-low-border);
396
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);
397
438
  --color-interaction-link-low-icon: var(--color-content-high-text);
398
439
  --color-interaction-link-low-text: var(--color-content-high-text);
399
- --color-interaction-container-neutral-border-hover: var(--color-content-medium-text);
400
- --color-interaction-container-neutral-border: var(--color-content-low-text);
401
- --color-interaction-container-neutral-icon-hover: var(--color-content-medium-text);
402
- --color-interaction-container-neutral-icon: var(--color-content-low-text);
403
440
  --color-interaction-container-neutral-text-hover: var(--color-content-medium-text);
404
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);
405
446
  --components-menu-contextual-item-content-hover: var(--color-interaction-container-neutral-text-hover);
406
447
  --components-menu-contextual-item-content: var(--color-interaction-container-neutral-text);
407
448
  --components-list-custom-item-content-hover: var(--color-interaction-container-neutral-text-hover);
408
449
  --components-list-custom-item-content-default: var(--color-interaction-container-neutral-text);
409
450
  --components-form-shape-foreground-disabled: var(--components-form-shape-border-default);
410
- --components-button-lower-icon-hover: var(--color-interaction-container-neutral-icon-hover);
411
- --components-button-lower-icon: var(--color-interaction-container-neutral-icon);
412
451
  --components-button-lower-text-hover: var(--color-interaction-container-neutral-text-hover);
413
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,13 +504,16 @@
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
509
  --components-button-low-border-hover: rgba(255, 255, 255, 0);
510
+ --components-button-low-border-active: rgba(255, 255, 255, 0);
467
511
  --components-button-low-border: rgba(255, 255, 255, 0);
468
512
  --components-button-low-background: rgba(255, 255, 255, 0);
513
+ --components-button-medium-background: rgba(255, 255, 255, 0);
514
+ --components-button-high-border-active: rgba(255, 255, 255, 0);
469
515
  --components-button-high-border-hover: rgba(255, 255, 255, 0);
470
516
  --components-button-high-border: rgba(255, 255, 255, 0);
471
- --components-button-medium-background: rgba(255, 255, 255, 0);
472
517
  --components-wpf-components-2: #ffffff;
473
518
  --shadow-y-axis-2xl: 25px;
474
519
  --shadow-y-axis-xl-2: 20px;
@@ -500,11 +545,15 @@
500
545
  --color-interaction-container-neutral-background-hover: rgba(165, 166, 167, 0.12);
501
546
  --color-interaction-container-neutral-background: rgba(255, 255, 255, 0);
502
547
  --color-interaction-container-branded-low-background: rgba(255, 255, 255, 0);
548
+ --color-interaction-container-branded-high-border-hover: rgba(255, 255, 255, 0);
549
+ --color-interaction-container-branded-high-border-active: rgba(255, 255, 255, 0);
550
+ --color-interaction-container-branded-high-border: rgba(255, 255, 255, 0);
503
551
  --components-menu-contextual-item-background-hover: var(--color-interaction-container-neutral-background-hover);
504
552
  --components-menu-contextual-item-background: var(--color-interaction-container-neutral-background);
505
553
  --components-tooltip-border: var(--color-gray-ocean-900);
506
554
  --components-tooltip-background: var(--color-gray-ocean-900);
507
555
  --components-popover-background: var(--color-gray-ocean-50);
556
+ --components-overlay-background: var(--color-gray-ocean-850);
508
557
  --components-button-destructive-high-icon-hover: var(--color-base-white);
509
558
  --components-button-destructive-high-icon: var(--color-base-white);
510
559
  --components-button-destructive-high-text-hover: var(--color-base-white);
@@ -545,7 +594,7 @@
545
594
  --components-button-gr-as-complementary-background-hover: var(--color-gray-ocean-300);
546
595
  --components-button-gr-as-complementary-background: var(--color-gray-ocean-200);
547
596
  --components-button-lower-background-hover: var(--color-interaction-container-neutral-background-hover);
548
- --components-button-lower-background: var(--color-interaction-container-branded-low-background);
597
+ --components-button-lower-background: var(--color-interaction-container-neutral-background);
549
598
  --color-dont-use-background: var(--color-gray-ocean-50);
550
599
  --color-dont-use-content: var(--color-gray-ocean-150);
551
600
  --color-dont-use-border: var(--color-gray-ocean-150);
@@ -666,33 +715,51 @@
666
715
  --color-content-high-icon: var(--color-gray-ocean-800);
667
716
  --color-content-high-text: var(--color-gray-ocean-800);
668
717
  --color-content-high-border: var(--color-gray-ocean-300);
718
+ --color-level-inverted-05-background: var(--color-gray-ocean-850);
719
+ --color-level-inverted-00-background: var(--color-gray-ocean-900);
720
+ --color-level-inverted-40-background: var(--color-gray-ocean-500);
721
+ --color-level-inverted-30-background: var(--color-gray-ocean-600);
722
+ --color-level-inverted-20-background: var(--color-gray-ocean-700);
723
+ --color-level-inverted-15-background: var(--color-gray-ocean-750);
724
+ --color-level-inverted-10-background: var(--color-gray-ocean-800);
669
725
  --color-level-05-background: var(--color-gray-ocean-25);
670
726
  --color-level-00-background: var(--color-gray-ocean-00);
671
727
  --color-level-40-background: var(--color-gray-ocean-00);
672
728
  --color-level-30-background: var(--color-gray-ocean-50);
673
729
  --color-level-20-background: var(--color-gray-ocean-00);
730
+ --color-level-15-background: var(--color-gray-ocean-75);
674
731
  --color-level-10-background: var(--color-gray-ocean-50);
732
+ --color-interaction-link-inverted-icon-hover: var(--color-petrol-600);
733
+ --color-interaction-link-inverted-text-hover: var(--color-petrol-600);
675
734
  --color-interaction-link-low-icon-hover: var(--color-petrol-600);
676
735
  --color-interaction-link-low-text-hover: var(--color-petrol-600);
677
736
  --color-interaction-link-high-icon-hover: var(--color-petrol-700);
678
737
  --color-interaction-link-high-icon: var(--color-petrol-600);
679
738
  --color-interaction-link-high-text-hover: var(--color-petrol-700);
680
739
  --color-interaction-link-high-text: var(--color-petrol-600);
681
- --color-interaction-container-branded-high-border-hover: var(--color-petrol-700);
682
- --color-interaction-container-branded-high-border: var(--color-petrol-600);
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-petrol-700);
741
+ --color-interaction-container-neutral-icon-active: var(--color-petrol-700);
742
+ --color-interaction-container-neutral-background-active: var(--color-petrol-50);
743
+ --color-interaction-container-branded-low-text-hover: var(--color-petrol-700);
744
+ --color-interaction-container-branded-low-text-active: var(--color-petrol-700);
745
+ --color-interaction-container-branded-low-text: var(--color-petrol-600);
746
+ --color-interaction-container-branded-low-icon-hover: var(--color-petrol-700);
747
+ --color-interaction-container-branded-low-icon-active: var(--color-petrol-700);
748
+ --color-interaction-container-branded-low-icon: var(--color-petrol-600);
749
+ --color-interaction-container-branded-low-border-hover: var(--color-petrol-700);
750
+ --color-interaction-container-branded-low-border-active: var(--color-petrol-700);
751
+ --color-interaction-container-branded-low-border: var(--color-petrol-600);
752
+ --color-interaction-container-branded-low-background-hover: var(--color-petrol-50);
753
+ --color-interaction-container-branded-low-background-active: var(--color-petrol-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-petrol-700);
761
+ --color-interaction-container-branded-high-background-active: var(--color-petrol-700);
688
762
  --color-interaction-container-branded-high-background: var(--color-petrol-600);
689
- --color-interaction-container-branded-low-border-hover: var(--color-petrol-700);
690
- --color-interaction-container-branded-low-border: var(--color-petrol-600);
691
- --color-interaction-container-branded-low-icon-hover: var(--color-petrol-700);
692
- --color-interaction-container-branded-low-icon: var(--color-petrol-600);
693
- --color-interaction-container-branded-low-text-hover: var(--color-petrol-700);
694
- --color-interaction-container-branded-low-text: var(--color-petrol-600);
695
- --color-interaction-container-branded-low-background-hover: var(--color-petrol-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-low-icon-hover: var(--color-interaction-container-branded-low-icon-hover);
816
- --components-button-low-icon: var(--color-interaction-container-branded-low-icon);
882
+ --components-button-lower-text-active: var(--color-interaction-container-neutral-text-active);
883
+ --components-button-lower-icon-active: var(--color-interaction-container-neutral-icon-active);
884
+ --components-button-lower-background-active: var(--color-interaction-container-neutral-background-active);
817
885
  --components-button-low-text-hover: var(--color-interaction-container-branded-low-text-hover);
886
+ --components-button-low-text-active: var(--color-interaction-container-branded-low-text-active);
818
887
  --components-button-low-text: var(--color-interaction-container-branded-low-text);
888
+ --components-button-low-icon-hover: var(--color-interaction-container-branded-low-icon-hover);
889
+ --components-button-low-icon-active: var(--color-interaction-container-branded-low-icon-active);
890
+ --components-button-low-icon: var(--color-interaction-container-branded-low-icon);
819
891
  --components-button-low-background-hover: var(--color-interaction-container-branded-low-background-hover);
892
+ --components-button-low-background-active: var(--color-interaction-container-branded-low-background-active);
893
+ --components-button-medium-text-hover: var(--color-interaction-container-branded-low-text-hover);
894
+ --components-button-medium-text-active: var(--color-interaction-container-branded-low-text-active);
895
+ --components-button-medium-text: var(--color-interaction-container-branded-low-text);
896
+ --components-button-medium-icon-hover: var(--color-interaction-container-branded-low-icon-hover);
897
+ --components-button-medium-icon-active: var(--color-interaction-container-branded-low-icon-active);
898
+ --components-button-medium-icon: var(--color-interaction-container-branded-low-icon);
899
+ --components-button-medium-border-hover: var(--color-interaction-container-branded-low-border-hover);
900
+ --components-button-medium-border-active: var(--color-interaction-container-branded-low-border-hover);
901
+ --components-button-medium-border: var(--color-interaction-container-branded-low-border);
902
+ --components-button-medium-background-hover: var(--color-interaction-container-branded-low-background-hover);
903
+ --components-button-medium-background-active: var(--color-interaction-container-branded-low-background-active);
820
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);
821
906
  --components-button-high-icon: var(--color-interaction-container-branded-high-icon);
822
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);
823
909
  --components-button-high-text: var(--color-interaction-container-branded-high-text);
824
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);
825
912
  --components-button-high-background: var(--color-interaction-container-branded-high-background);
826
- --components-button-medium-border-hover: var(--color-interaction-container-branded-low-border-hover);
827
- --components-button-medium-border: var(--color-interaction-container-branded-low-border);
828
- --components-button-medium-icon-hover: var(--color-interaction-container-branded-low-icon-hover);
829
- --components-button-medium-icon: var(--color-interaction-container-branded-low-icon);
830
- --components-button-medium-text-hover: var(--color-interaction-container-branded-low-text-hover);
831
- --components-button-medium-text: var(--color-interaction-container-branded-low-text);
832
- --components-button-medium-background-hover: var(--color-interaction-container-branded-low-background-hover);
833
913
  --color-focus-success: var(--color-feedback-success-low-border);
834
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);
835
917
  --color-interaction-link-low-icon: var(--color-content-high-text);
836
918
  --color-interaction-link-low-text: var(--color-content-high-text);
837
- --color-interaction-container-neutral-border-hover: var(--color-content-medium-text);
838
- --color-interaction-container-neutral-border: var(--color-content-inverted-low-text);
839
- --color-interaction-container-neutral-icon-hover: var(--color-content-medium-text);
840
- --color-interaction-container-neutral-icon: var(--color-content-low-text);
841
919
  --color-interaction-container-neutral-text-hover: var(--color-content-medium-text);
842
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-inverted-low-text);
843
925
  --components-menu-contextual-item-content-hover: var(--color-interaction-container-neutral-text-hover);
844
926
  --components-menu-contextual-item-content: var(--color-interaction-container-neutral-text);
845
927
  --components-list-custom-item-content-hover: var(--color-interaction-container-neutral-text-hover);
846
928
  --components-list-custom-item-content-default: var(--color-interaction-container-neutral-text);
847
929
  --components-form-shape-foreground-disabled: var(--components-form-shape-border-default);
848
- --components-button-lower-icon-hover: var(--color-interaction-container-neutral-icon-hover);
849
- --components-button-lower-icon: var(--color-interaction-container-neutral-icon);
850
930
  --components-button-lower-text-hover: var(--color-interaction-container-neutral-text-hover);
851
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);