@nova-design-system/nova-base 3.0.0-beta.36 → 3.0.0-beta.38

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 (31) hide show
  1. package/assets/icons/icon-sprite.svg +1 -1
  2. package/dist/cjs/generated/nova-tailwind-components.js +128 -17
  3. package/dist/cjs/plugin/nova-plugin.js +4 -0
  4. package/dist/cjs/plugin/nova-theme.js +1 -0
  5. package/dist/css/mccs.css +155 -120
  6. package/dist/css/nova-utils.css +153 -100
  7. package/dist/css/ocean.css +179 -138
  8. package/dist/css/spark.css +181 -140
  9. package/dist/generated/nova-tailwind-components.d.ts +112 -1
  10. package/dist/generated/nova-tailwind-components.js +128 -17
  11. package/dist/js/mccs_dark.d.ts +37 -20
  12. package/dist/js/mccs_dark.js +41 -24
  13. package/dist/js/mccs_light.d.ts +37 -20
  14. package/dist/js/mccs_light.js +40 -23
  15. package/dist/js/ocean_dark.d.ts +49 -32
  16. package/dist/js/ocean_dark.js +53 -36
  17. package/dist/js/ocean_light.d.ts +49 -32
  18. package/dist/js/ocean_light.js +52 -35
  19. package/dist/js/primitives.d.ts +0 -6
  20. package/dist/js/primitives.js +0 -6
  21. package/dist/js/spacings.d.ts +75 -62
  22. package/dist/js/spacings.js +77 -64
  23. package/dist/js/spark_dark.d.ts +49 -32
  24. package/dist/js/spark_dark.js +53 -36
  25. package/dist/js/spark_light.d.ts +49 -32
  26. package/dist/js/spark_light.js +54 -37
  27. package/dist/plugin/nova-plugin.d.ts +1 -0
  28. package/dist/plugin/nova-plugin.js +4 -0
  29. package/dist/plugin/nova-theme.d.ts +1 -0
  30. package/dist/plugin/nova-theme.js +1 -0
  31. package/package.json +7 -2
package/dist/css/spark.css CHANGED
@@ -3,7 +3,7 @@
3
3
  */
4
4
 
5
5
  .dark:root {
6
- --components-overlay-opacity: 75px;
6
+ --components-overlay-opacity: 75%;
7
7
  --components-button-destructive-low-border-hover: rgba(255, 255, 255, 0);
8
8
  --components-button-destructive-low-border: rgba(255, 255, 255, 0);
9
9
  --components-button-destructive-low-background: rgba(255, 255, 255, 0);
@@ -18,8 +18,8 @@
18
18
  --components-list-native-separator: #838086;
19
19
  --components-list-native-item-title-content: rgba(255, 255, 255, 0.5);
20
20
  --components-list-native-background: #565558;
21
- --components-form-opacity-disabled: 50px;
22
- --components-form-opacity-default: 100px;
21
+ --components-form-opacity-disabled: 50%;
22
+ --components-form-opacity-default: 100%;
23
23
  --components-button-gr-as-complementary-border-hover: rgba(255, 255, 255, 0);
24
24
  --components-button-gr-as-complementary-border: rgba(255, 255, 255, 0);
25
25
  --components-button-lower-border-hover-2: rgba(255, 255, 255, 0);
@@ -34,7 +34,6 @@
34
34
  --components-button-high-border-active: rgba(255, 255, 255, 0);
35
35
  --components-button-high-border-hover: rgba(255, 255, 255, 0);
36
36
  --components-button-high-border: rgba(255, 255, 255, 0);
37
- --components-wpf-components-2: #ffffff;
38
37
  --shadow-y-axis-2xl: 25px;
39
38
  --shadow-y-axis-xl-2: 20px;
40
39
  --shadow-y-axis-xl-1: 10px;
@@ -61,18 +60,21 @@
61
60
  --shadow-color-opacity-2: rgba(14, 14, 14, 0.14);
62
61
  --shadow-color-opacity-1: rgba(14, 14, 14, 0.09);
63
62
  --shadow-color-opacity-0: rgba(255, 255, 255, 0.09);
63
+ --opacity-disabled-2: 0%;
64
+ --opacity-disabled: 50%;
65
+ --color-transparent: rgba(255, 255, 255, 0);
66
+ --color-white: #ffffff;
64
67
  --color-black: #000000;
65
68
  --color-interaction-container-neutral-background-hover: rgba(255, 255, 255, 0.1);
66
69
  --color-interaction-container-neutral-background: rgba(255, 255, 255, 0);
67
70
  --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);
71
- --components-menu-contextual-item-background-hover: var(--color-interaction-container-neutral-background-hover);
72
- --components-menu-contextual-item-background: var(--color-interaction-container-neutral-background);
73
71
  --components-tooltip-border: var(--color-gray-spark-50);
74
72
  --components-tooltip-background: var(--color-gray-spark-50);
75
73
  --components-popover-background: var(--color-gray-spark-900);
74
+ --components-menu-contextual-item-background-hover: var(--color-interaction-container-neutral-background-hover);
75
+ --components-menu-contextual-item-background: var(--color-interaction-container-neutral-background);
76
+ --components-field-time-background-hover: var(--color-interaction-container-neutral-background-hover);
77
+ --components-field-time-background-default: var(--color-interaction-container-neutral-background);
76
78
  --components-overlay-background: var(--color-gray-spark-650);
77
79
  --components-button-destructive-high-icon-hover: var(--color-base-black);
78
80
  --components-button-destructive-high-icon: var(--color-base-black);
@@ -95,10 +97,10 @@
95
97
  --components-loader-brand-foreground: var(--color-orange-500);
96
98
  --components-loader-brand-background: var(--color-orange-900);
97
99
  --components-loader-white-foreground: var(--color-base-white);
98
- --components-list-custom-item-background-title: var(--color-interaction-container-neutral-background);
99
- --components-list-custom-item-background-disabled: var(--color-interaction-container-neutral-background);
100
- --components-list-custom-item-background-hover: var(--color-interaction-container-neutral-background-hover);
101
- --components-list-custom-item-background-default: var(--color-interaction-container-neutral-background);
100
+ --components-list-dropdown-item-background-title: var(--color-interaction-container-neutral-background);
101
+ --components-list-dropdown-item-background-disabled: var(--color-interaction-container-neutral-background);
102
+ --components-list-dropdown-item-background-hover: var(--color-interaction-container-neutral-background-hover);
103
+ --components-list-dropdown-item-background-default: var(--color-interaction-container-neutral-background);
102
104
  --components-list-native-item-content-hover: var(--color-base-white);
103
105
  --components-list-native-item-content-default: var(--color-base-white);
104
106
  --components-form-shape-foreground-default: var(--color-base-white);
@@ -226,7 +228,7 @@
226
228
  --color-content-inverted-medium-text: var(--color-gray-spark-550);
227
229
  --color-content-inverted-high-icon: var(--color-gray-spark-800);
228
230
  --color-content-inverted-high-text: var(--color-gray-spark-800);
229
- --color-content-lower-text: var(--color-gray-spark-500);
231
+ --color-content-lower-text: var(--color-gray-spark-400);
230
232
  --color-content-low-icon: var(--color-gray-spark-350);
231
233
  --color-content-low-text: var(--color-gray-spark-350);
232
234
  --color-content-low-border: var(--color-gray-spark-500);
@@ -261,6 +263,18 @@
261
263
  --color-interaction-container-neutral-text-active: var(--color-orange-400);
262
264
  --color-interaction-container-neutral-icon-active: var(--color-orange-400);
263
265
  --color-interaction-container-neutral-background-active: var(--color-orange-900);
266
+ --color-interaction-container-branded-high-text-hover: var(--color-base-black);
267
+ --color-interaction-container-branded-high-text-active: var(--color-base-black);
268
+ --color-interaction-container-branded-high-text: var(--color-base-black);
269
+ --color-interaction-container-branded-high-icon-hover: var(--color-base-black);
270
+ --color-interaction-container-branded-high-icon-active: var(--color-base-black);
271
+ --color-interaction-container-branded-high-icon: var(--color-base-black);
272
+ --color-interaction-container-branded-high-border-hover: var(--color-orange-600);
273
+ --color-interaction-container-branded-high-border-active: var(--color-orange-600);
274
+ --color-interaction-container-branded-high-border: var(--color-orange-500);
275
+ --color-interaction-container-branded-high-background-hover: var(--color-orange-400);
276
+ --color-interaction-container-branded-high-background-active: var(--color-orange-400);
277
+ --color-interaction-container-branded-high-background: var(--color-orange-500);
264
278
  --color-interaction-container-branded-low-text-hover: var(--color-orange-400);
265
279
  --color-interaction-container-branded-low-text-active: var(--color-orange-400);
266
280
  --color-interaction-container-branded-low-text: var(--color-orange-500);
@@ -272,24 +286,15 @@
272
286
  --color-interaction-container-branded-low-border: var(--color-orange-500);
273
287
  --color-interaction-container-branded-low-background-hover: var(--color-orange-900);
274
288
  --color-interaction-container-branded-low-background-active: var(--color-orange-900);
275
- --color-interaction-container-branded-high-text-hover: var(--color-base-black);
276
- --color-interaction-container-branded-high-text-active: var(--color-base-black);
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);
281
- --color-interaction-container-branded-high-background-hover: var(--color-orange-400);
282
- --color-interaction-container-branded-high-background-active: var(--color-orange-400);
283
- --color-interaction-container-branded-high-background: var(--color-orange-500);
284
- --components-menu-contextual-item-content-disabled: var(--color-content-lower-text);
285
- --components-menu-contextual-item-shortcut: var(--color-content-lower-text);
286
- --components-menu-contextual-border: var(--color-content-low-border);
287
- --components-menu-contextual-background: var(--color-level-00-background);
288
289
  --components-tooltip-supporting-text: var(--color-content-inverted-medium-text);
289
290
  --components-tooltip-text: var(--color-content-inverted-high-text);
290
291
  --components-popover-supporting-text: var(--color-content-low-text);
291
292
  --components-popover-text: var(--color-content-medium-text);
292
293
  --components-popover-border: var(--color-content-low-border);
294
+ --components-menu-contextual-item-content-disabled: var(--color-content-lower-text);
295
+ --components-menu-contextual-item-shortcut: var(--color-content-lower-text);
296
+ --components-menu-contextual-border: var(--color-content-low-border);
297
+ --components-menu-contextual-background: var(--color-level-00-background);
293
298
  --components-notification-neutral-icon: var(--color-feedback-neutral-low-icon);
294
299
  --components-notification-neutral-border: var(--color-feedback-neutral-low-border);
295
300
  --components-notification-neutral-background: var(--color-level-20-background);
@@ -307,6 +312,12 @@
307
312
  --components-notification-information-border: var(--color-feedback-information-low-border);
308
313
  --components-notification-information-icon: var(--color-feedback-information-low-icon);
309
314
  --components-notification-information-background: var(--color-level-20-background);
315
+ --components-breadcrumb-text-hover: var(--color-interaction-link-low-text-hover);
316
+ --components-breadcrumb-text-active: var(--color-content-medium-text);
317
+ --components-breadcrumb-text: var(--color-content-low-text);
318
+ --components-field-time-border-active: var(--color-interaction-container-neutral-icon-active);
319
+ --components-field-time-text-active: var(--color-interaction-container-neutral-text-active);
320
+ --components-field-time-background-active: var(--color-interaction-container-neutral-background-active);
310
321
  --components-avatar-content-10: var(--color-rainbow-10-icon);
311
322
  --components-avatar-content-9: var(--color-rainbow-9-text);
312
323
  --components-avatar-content-8: var(--color-rainbow-8-text);
@@ -362,11 +373,17 @@
362
373
  --components-button-destructive-lower-text: var(--color-dont-use-content);
363
374
  --components-button-destructive-lower-background-hover: var(--color-dont-use-background);
364
375
  --components-button-destructive-lower-background: var(--color-dont-use-background);
365
- --components-list-custom-border: var(--color-content-low-border);
366
- --components-list-custom-separator: var(--color-content-low-border);
367
- --components-list-custom-item-title-content: var(--color-content-low-text);
368
- --components-list-custom-item-content-disabled: var(--color-content-low-text);
369
- --components-list-custom-background: var(--color-level-00-background);
376
+ --components-list-dropdown-border: var(--color-content-low-border);
377
+ --components-list-dropdown-separator: var(--color-content-low-border);
378
+ --components-list-dropdown-item-title-content: var(--color-content-medium-text);
379
+ --components-list-dropdown-item-description-disabled: var(--color-content-lower-text);
380
+ --components-list-dropdown-item-description-hover: var(--color-content-medium-text);
381
+ --components-list-dropdown-item-description-default: var(--color-content-low-text);
382
+ --components-list-dropdown-item-label-disabled: var(--color-content-low-text);
383
+ --components-list-dropdown-item-label-hover: var(--color-content-high-text);
384
+ --components-list-dropdown-item-label-default: var(--color-content-medium-text);
385
+ --components-list-dropdown-header-background: var(--color-level-10-background);
386
+ --components-list-dropdown-background: var(--color-level-00-background);
370
387
  --components-form-shape-foreground-disabled-error: var(--color-feedback-error-high-background);
371
388
  --components-form-shape-foreground-switch-dot: var(--color-content-medium-border);
372
389
  --components-form-shape-border-success: var(--color-feedback-success-low-border);
@@ -445,8 +462,8 @@
445
462
  --color-interaction-container-neutral-border: var(--color-content-low-text);
446
463
  --components-menu-contextual-item-content-hover: var(--color-interaction-container-neutral-text-hover);
447
464
  --components-menu-contextual-item-content: var(--color-interaction-container-neutral-text);
448
- --components-list-custom-item-content-hover: var(--color-interaction-container-neutral-text-hover);
449
- --components-list-custom-item-content-default: var(--color-interaction-container-neutral-text);
465
+ --components-field-time-text-hover: var(--color-interaction-container-neutral-icon-hover);
466
+ --components-field-time-text-default: var(--color-interaction-container-neutral-text);
450
467
  --components-form-shape-foreground-disabled: var(--components-form-shape-border-default);
451
468
  --components-button-lower-text-hover: var(--color-interaction-container-neutral-text-hover);
452
469
  --components-button-lower-text: var(--color-interaction-container-neutral-text);
@@ -482,7 +499,7 @@
482
499
  */
483
500
 
484
501
  :root {
485
- --components-overlay-opacity: 55px;
502
+ --components-overlay-opacity: 55%;
486
503
  --components-button-destructive-low-border-hover: rgba(255, 255, 255, 0);
487
504
  --components-button-destructive-low-border: rgba(255, 255, 255, 0);
488
505
  --components-button-destructive-low-background: rgba(255, 255, 255, 0);
@@ -497,8 +514,8 @@
497
514
  --components-list-native-separator: #838086;
498
515
  --components-list-native-item-title-content: rgba(255, 255, 255, 0.5);
499
516
  --components-list-native-background: #565558;
500
- --components-form-opacity-disabled: 50px;
501
- --components-form-opacity-default: 100px;
517
+ --components-form-opacity-disabled: 50%;
518
+ --components-form-opacity-default: 100%;
502
519
  --components-button-gr-as-complementary-border-hover: rgba(255, 255, 255, 0);
503
520
  --components-button-gr-as-complementary-border: rgba(255, 255, 255, 0);
504
521
  --components-button-lower-border-hover-2: rgba(255, 255, 255, 0);
@@ -511,7 +528,6 @@
511
528
  --components-button-low-border: rgba(255, 255, 255, 0);
512
529
  --components-button-low-background: rgba(255, 255, 255, 0);
513
530
  --components-button-high-border: rgba(255, 255, 255, 0);
514
- --components-wpf-components-2: #ffffff;
515
531
  --shadow-y-axis-2xl: 25px;
516
532
  --shadow-y-axis-xl-2: 20px;
517
533
  --shadow-y-axis-xl-1: 10px;
@@ -538,18 +554,21 @@
538
554
  --shadow-color-opacity-2: rgba(14, 14, 14, 0.1);
539
555
  --shadow-color-opacity-1: rgba(14, 14, 14, 0.06);
540
556
  --shadow-color-opacity-0: rgba(0, 0, 0, 0.06);
557
+ --opacity-disabled-2: 50%;
558
+ --opacity-disabled: 50%;
559
+ --color-transparent: rgba(255, 255, 255, 0);
560
+ --color-white: #ffffff;
541
561
  --color-black: #000000;
542
562
  --color-interaction-container-neutral-background-hover: rgba(165, 165, 165, 0.12);
543
563
  --color-interaction-container-neutral-background: rgba(255, 255, 255, 0);
544
564
  --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);
548
- --components-menu-contextual-item-background-hover: var(--color-interaction-container-neutral-background-hover);
549
- --components-menu-contextual-item-background: var(--color-interaction-container-neutral-background);
550
565
  --components-tooltip-border: var(--color-gray-spark-900);
551
566
  --components-tooltip-background: var(--color-gray-spark-900);
552
- --components-popover-background: var(--color-gray-spark-50);
567
+ --components-popover-background: var(--color-gray-spark-00);
568
+ --components-menu-contextual-item-background-hover: var(--color-interaction-container-neutral-background-hover);
569
+ --components-menu-contextual-item-background: var(--color-interaction-container-neutral-background);
570
+ --components-field-time-background-hover: var(--color-interaction-container-neutral-background-hover);
571
+ --components-field-time-background-default: var(--color-interaction-container-neutral-background);
553
572
  --components-overlay-background: var(--color-gray-spark-850);
554
573
  --components-button-destructive-high-icon-hover: var(--color-base-white);
555
574
  --components-button-destructive-high-icon: var(--color-base-white);
@@ -572,10 +591,10 @@
572
591
  --components-loader-brand-foreground: var(--color-orange-500);
573
592
  --components-loader-brand-background: var(--color-orange-50);
574
593
  --components-loader-white-foreground: var(--color-base-white);
575
- --components-list-custom-item-background-title: var(--color-interaction-container-neutral-background);
576
- --components-list-custom-item-background-disabled: var(--color-interaction-container-neutral-background);
577
- --components-list-custom-item-background-hover: var(--color-interaction-container-neutral-background-hover);
578
- --components-list-custom-item-background-default: var(--color-interaction-container-neutral-background);
594
+ --components-list-dropdown-item-background-title: var(--color-interaction-container-neutral-background);
595
+ --components-list-dropdown-item-background-disabled: var(--color-interaction-container-neutral-background);
596
+ --components-list-dropdown-item-background-hover: var(--color-interaction-container-neutral-background-hover);
597
+ --components-list-dropdown-item-background-default: var(--color-interaction-container-neutral-background);
579
598
  --components-list-native-item-content-hover: var(--color-base-white);
580
599
  --components-list-native-item-content-default: var(--color-base-white);
581
600
  --components-form-shape-foreground-default: var(--color-base-white);
@@ -593,8 +612,6 @@
593
612
  --components-button-gr-as-complementary-background: var(--color-gray-spark-200);
594
613
  --components-button-lower-background-hover: var(--color-interaction-container-neutral-background-hover);
595
614
  --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);
598
615
  --color-dont-use-background: var(--color-gray-spark-50);
599
616
  --color-dont-use-content: var(--color-gray-spark-100);
600
617
  --color-dont-use-border: var(--color-gray-spark-100);
@@ -740,6 +757,18 @@
740
757
  --color-interaction-container-neutral-text-active: var(--color-orange-600);
741
758
  --color-interaction-container-neutral-icon-active: var(--color-orange-600);
742
759
  --color-interaction-container-neutral-background-active: var(--color-orange-50);
760
+ --color-interaction-container-branded-high-text-hover: var(--color-base-white);
761
+ --color-interaction-container-branded-high-text-active: var(--color-base-white);
762
+ --color-interaction-container-branded-high-text: var(--color-base-white);
763
+ --color-interaction-container-branded-high-icon-hover: var(--color-base-white);
764
+ --color-interaction-container-branded-high-icon-active: var(--color-base-white);
765
+ --color-interaction-container-branded-high-icon: var(--color-base-white);
766
+ --color-interaction-container-branded-high-border-hover: var(--color-orange-600);
767
+ --color-interaction-container-branded-high-border-active: var(--color-orange-600);
768
+ --color-interaction-container-branded-high-border: var(--color-orange-500);
769
+ --color-interaction-container-branded-high-background-hover: var(--color-orange-600);
770
+ --color-interaction-container-branded-high-background-active: var(--color-orange-600);
771
+ --color-interaction-container-branded-high-background: var(--color-orange-500);
743
772
  --color-interaction-container-branded-low-text-hover: var(--color-orange-600);
744
773
  --color-interaction-container-branded-low-text-active: var(--color-orange-600);
745
774
  --color-interaction-container-branded-low-text: var(--color-orange-500);
@@ -751,24 +780,15 @@
751
780
  --color-interaction-container-branded-low-border: var(--color-orange-500);
752
781
  --color-interaction-container-branded-low-background-hover: var(--color-orange-50);
753
782
  --color-interaction-container-branded-low-background-active: var(--color-orange-50);
754
- --color-interaction-container-branded-high-text-hover: var(--color-base-white);
755
- --color-interaction-container-branded-high-text-active: var(--color-base-white);
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);
760
- --color-interaction-container-branded-high-background-hover: var(--color-orange-600);
761
- --color-interaction-container-branded-high-background-active: var(--color-orange-600);
762
- --color-interaction-container-branded-high-background: var(--color-orange-500);
763
- --components-menu-contextual-item-content-disabled: var(--color-content-lower-text);
764
- --components-menu-contextual-item-shortcut: var(--color-content-lower-text);
765
- --components-menu-contextual-border: var(--color-content-low-border);
766
- --components-menu-contextual-background: var(--color-level-00-background);
767
783
  --components-tooltip-supporting-text: var(--color-content-inverted-medium-text);
768
784
  --components-tooltip-text: var(--color-content-inverted-high-text);
769
785
  --components-popover-supporting-text: var(--color-content-low-text);
770
786
  --components-popover-text: var(--color-content-medium-text);
771
787
  --components-popover-border: var(--color-content-low-border);
788
+ --components-menu-contextual-item-content-disabled: var(--color-content-lower-text);
789
+ --components-menu-contextual-item-shortcut: var(--color-content-lower-text);
790
+ --components-menu-contextual-border: var(--color-content-low-border);
791
+ --components-menu-contextual-background: var(--color-level-00-background);
772
792
  --components-notification-neutral-icon: var(--color-feedback-neutral-low-icon);
773
793
  --components-notification-neutral-border: var(--color-feedback-neutral-low-border);
774
794
  --components-notification-neutral-background: var(--color-level-00-background);
@@ -786,6 +806,12 @@
786
806
  --components-notification-information-border: var(--color-feedback-information-low-border);
787
807
  --components-notification-information-icon: var(--color-feedback-information-low-icon);
788
808
  --components-notification-information-background: var(--color-level-00-background);
809
+ --components-breadcrumb-text-hover: var(--color-interaction-link-low-text-hover);
810
+ --components-breadcrumb-text-active: var(--color-content-medium-text);
811
+ --components-breadcrumb-text: var(--color-content-low-text);
812
+ --components-field-time-border-active: var(--color-interaction-container-neutral-icon-active);
813
+ --components-field-time-text-active: var(--color-interaction-container-neutral-text-active);
814
+ --components-field-time-background-active: var(--color-interaction-container-neutral-background-active);
789
815
  --components-avatar-content-10: var(--color-rainbow-10-icon);
790
816
  --components-avatar-content-9: var(--color-rainbow-9-text);
791
817
  --components-avatar-content-8: var(--color-rainbow-8-text);
@@ -841,11 +867,17 @@
841
867
  --components-button-destructive-lower-text: var(--color-dont-use-content);
842
868
  --components-button-destructive-lower-background-hover: var(--color-dont-use-background);
843
869
  --components-button-destructive-lower-background: var(--color-dont-use-background);
844
- --components-list-custom-border: var(--color-content-low-border);
845
- --components-list-custom-separator: var(--color-content-low-border);
846
- --components-list-custom-item-title-content: var(--color-content-low-text);
847
- --components-list-custom-item-content-disabled: var(--color-content-low-text);
848
- --components-list-custom-background: var(--color-level-00-background);
870
+ --components-list-dropdown-border: var(--color-content-low-border);
871
+ --components-list-dropdown-separator: var(--color-content-low-border);
872
+ --components-list-dropdown-item-title-content: var(--color-content-medium-text);
873
+ --components-list-dropdown-item-description-disabled: var(--color-content-lower-text);
874
+ --components-list-dropdown-item-description-hover: var(--color-content-medium-text);
875
+ --components-list-dropdown-item-description-default: var(--color-content-low-text);
876
+ --components-list-dropdown-item-label-disabled: var(--color-content-low-text);
877
+ --components-list-dropdown-item-label-hover: var(--color-content-high-text);
878
+ --components-list-dropdown-item-label-default: var(--color-content-medium-text);
879
+ --components-list-dropdown-header-background: var(--color-level-10-background);
880
+ --components-list-dropdown-background: var(--color-level-00-background);
849
881
  --components-form-shape-foreground-disabled-error: var(--color-feedback-error-high-background);
850
882
  --components-form-shape-foreground-switch-dot: var(--color-content-medium-border);
851
883
  --components-form-shape-border-success: var(--color-feedback-success-low-border);
@@ -907,6 +939,8 @@
907
939
  --components-button-high-text-hover: var(--color-interaction-container-branded-high-text-hover);
908
940
  --components-button-high-text-active: var(--color-interaction-container-branded-high-text-active);
909
941
  --components-button-high-text: var(--color-interaction-container-branded-high-text);
942
+ --components-button-high-border-active: var(--color-interaction-container-branded-high-border-active);
943
+ --components-button-high-border-hover: var(--color-interaction-container-branded-high-border-hover);
910
944
  --components-button-high-background-hover: var(--color-interaction-container-branded-high-background-hover);
911
945
  --components-button-high-background-active: var(--color-interaction-container-branded-high-background-active);
912
946
  --components-button-high-background: var(--color-interaction-container-branded-high-background);
@@ -924,8 +958,8 @@
924
958
  --color-interaction-container-neutral-border: var(--color-content-low-text);
925
959
  --components-menu-contextual-item-content-hover: var(--color-interaction-container-neutral-text-hover);
926
960
  --components-menu-contextual-item-content: var(--color-interaction-container-neutral-text);
927
- --components-list-custom-item-content-hover: var(--color-interaction-container-neutral-text-hover);
928
- --components-list-custom-item-content-default: var(--color-interaction-container-neutral-text);
961
+ --components-field-time-text-hover: var(--color-interaction-container-neutral-text-hover);
962
+ --components-field-time-text-default: var(--color-interaction-container-neutral-text);
929
963
  --components-form-shape-foreground-disabled: var(--components-form-shape-border-default);
930
964
  --components-button-lower-text-hover: var(--color-interaction-container-neutral-text-hover);
931
965
  --components-button-lower-text: var(--color-interaction-container-neutral-text);
@@ -1052,12 +1086,6 @@
1052
1086
  --color-turquoise-200: #b8d6d2;
1053
1087
  --color-turquoise-100: #d2e5e3;
1054
1088
  --color-turquoise-50: #ecf4f3;
1055
- --color-red-mccs-00: #ff6161;
1056
- --color-red-mccs-500: #450000;
1057
- --color-red-mccs-400: #7d0000;
1058
- --color-red-mccs-300: #ae0303;
1059
- --color-red-mccs-200: #d00202;
1060
- --color-red-mccs-100: #ff3838;
1061
1089
  --color-red-900: #3d0909;
1062
1090
  --color-red-800: #610e0e;
1063
1091
  --color-red-700: #851313;
@@ -1240,6 +1268,7 @@
1240
1268
  --popover-font-weight: 500;
1241
1269
  --menu-contextual-item-font-weight: 500;
1242
1270
  --menu-contextual-divider-padding-bottom: 3px;
1271
+ --form-field-badge-gap: 0px;
1243
1272
  --list-native-separator-padding-y: 3px;
1244
1273
  --list-native-separator-padding-x: 9px;
1245
1274
  --button-lg-ring-radius: 9px;
@@ -1263,6 +1292,14 @@
1263
1292
  --notification-gap-x-title: var(--spacing-2);
1264
1293
  --notification-gap-x: var(--spacing-3);
1265
1294
  --notification-icon-size: var(--spacing-5);
1295
+ --navigation-primary-item-bullet-size: var(--spacing-5);
1296
+ --navigation-primary-item-bullet-font-size: var(--font-size-xs);
1297
+ --navigation-primary-item-radius: var(--radius-rounded-md);
1298
+ --navigation-primary-item-icon-size: var(--spacing-5);
1299
+ --navigation-primary-item-font-size: var(--font-size-md);
1300
+ --navigation-primary-item-padding-y: var(--spacing-2);
1301
+ --navigation-primary-item-padding-x: var(--spacing-3);
1302
+ --navigation-primary-item-gap-x: var(--spacing-2);
1266
1303
  --icon-xl: var(--spacing-7);
1267
1304
  --icon-lg: var(--spacing-6);
1268
1305
  --icon-md: var(--spacing-5);
@@ -1273,53 +1310,6 @@
1273
1310
  --loader-size-md: var(--spacing-6);
1274
1311
  --loader-size-sm: var(--spacing-5);
1275
1312
  --loader-size-xs: var(--spacing-4);
1276
- --form-toggle-width: var(--spacing-9);
1277
- --form-toggle-switch-dot-selected: var(--spacing-3-5);
1278
- --form-toggle-switch-dot-default: var(--spacing-3);
1279
- --form-toggle-padding-selected: var(--spacing-0-5);
1280
- --form-toggle-padding-default: var(--spacing-1);
1281
- --form-toggle-radius: var(--radius-rounded-full);
1282
- --form-toggle-padding-top: var(--spacing-0);
1283
- --form-toggle-height: var(--spacing-5);
1284
- --form-toggle-border-width: var(--spacing-0-5);
1285
- --form-radio-ring-radius: var(--radius-rounded-full);
1286
- --form-radio-size: var(--spacing-5);
1287
- --form-radio-padding-top: var(--spacing-0);
1288
- --form-radio-inner-circle-size: var(--spacing-2);
1289
- --form-radio-inner-circle-padding: var(--spacing-1-5);
1290
- --form-radio-border-width: var(--spacing-0-5);
1291
- --form-checkbox-icon-stroke: var(--spacing-0-5);
1292
- --form-checkbox-ring-radius: var(--radius-rounded-lg);
1293
- --form-checkbox-size: var(--spacing-5);
1294
- --form-checkbox-radius: var(--radius-rounded-md);
1295
- --form-checkbox-padding-top: var(--spacing-0);
1296
- --form-checkbox-icon-size: var(--spacing-3-5);
1297
- --form-checkbox-border-width: var(--spacing-0-5);
1298
- --form-field-inner-button-padding-y: var(--spacing-2-5);
1299
- --form-field-inner-button-padding-x-int: var(--spacing-1-5);
1300
- --form-field-inner-button-padding-x-ext: var(--spacing-2-5);
1301
- --form-field-leading-trailing-line-height: var(--line-height-base);
1302
- --form-field-leading-trailing-icon-size: var(--spacing-5);
1303
- --form-field-leading-trailing-font-size: var(--font-size-sm);
1304
- --form-field-radius: var(--radius-rounded-md);
1305
- --form-field-padding-y: var(--spacing-2);
1306
- --form-field-padding-x-icon-button: var(--spacing-10);
1307
- --form-field-padding-x: var(--spacing-2);
1308
- --form-field-line-height: var(--line-height-base);
1309
- --form-field-gap-inner: var(--spacing-2);
1310
- --form-field-gap: var(--spacing-2);
1311
- --form-field-icon-size: var(--spacing-5);
1312
- --form-field-font-weight: var(--font-weight-medium-emphasis);
1313
- --form-field-font-size: var(--font-size-md);
1314
- --form-label-font-weight: var(--font-weight-medium-emphasis);
1315
- --form-label-line-height: var(--line-height-sm);
1316
- --form-label-gap: var(--spacing-1);
1317
- --form-label-font-size: var(--font-size-sm);
1318
- --form-description-font-weight: var(--font-weight-low-emphasis);
1319
- --form-description-line-height: var(--line-height-sm);
1320
- --form-description-font-size: var(--font-size-sm);
1321
- --form-gap-y: var(--spacing-1);
1322
- --form-gap-x: var(--spacing-3);
1323
1313
  --focus-outline-stroke: var(--spacing-0-5);
1324
1314
  --focus-outline-offset: var(--spacing-0-5);
1325
1315
  --focus-field-stroke: var(--spacing-px);
@@ -1335,6 +1325,7 @@
1335
1325
  --dialog-header-gap-y: var(--spacing-0);
1336
1326
  --dialog-dismissible-position-right: var(--spacing-3);
1337
1327
  --dialog-dismissible-position-top: var(--spacing-5);
1328
+ --breadcrumb-padding-y: var(--spacing-1);
1338
1329
  --badge-radius: var(--radius-rounded-full);
1339
1330
  --badge-padding-y: var(--spacing-1);
1340
1331
  --badge-padding-x: var(--spacing-2);
@@ -1403,8 +1394,8 @@
1403
1394
  --tooltip-padding-x: var(--spacing-3);
1404
1395
  --tooltip-font-size: var(--font-size-sm);
1405
1396
  --popover-radius: var(--radius-rounded-md);
1406
- --popover-padding-y: var(--spacing-3);
1407
- --popover-padding-x: var(--spacing-3);
1397
+ --popover-padding-y: var(--spacing-2);
1398
+ --popover-padding-x: var(--spacing-2);
1408
1399
  --popover-gap-y: var(--spacing-1);
1409
1400
  --popover-font-size: var(--font-size-sm);
1410
1401
  --popover-shadow-2-opacity: var(--shadow-color-opacity-2);
@@ -1425,21 +1416,71 @@
1425
1416
  --menu-contextual-item-font-size: var(--font-size-sm);
1426
1417
  --menu-contextual-divider-padding-x: var(--spacing-2-5);
1427
1418
  --menu-contextual-divider-padding-top: var(--spacing-1);
1428
- --list-custom-sub-item-padding-left: var(--spacing-10);
1429
- --list-custom-separator-padding-y: var(--spacing-0-5);
1430
- --list-custom-separator-padding-x: var(--spacing-0);
1431
- --list-custom-padding: var(--spacing-2);
1432
- --list-custom-radius: var(--radius-rounded-md);
1433
- --list-custom-gap-y: var(--spacing-0-5);
1434
- --list-custom-item-radius: var(--radius-rounded-md);
1435
- --list-custom-item-gap-x: var(--spacing-3);
1436
- --list-custom-item-padding-y: var(--spacing-2);
1437
- --list-custom-item-padding-x: var(--spacing-2);
1438
- --list-custom-item-padding-right: var(--spacing-2);
1439
- --list-custom-item-padding-left: var(--spacing-8);
1440
- --list-custom-line-height: var(--line-height-base);
1441
- --list-custom-font-size: var(--font-size-md);
1442
- --list-custom-icon-size: var(--spacing-5);
1419
+ --form-toggle-width: var(--spacing-9);
1420
+ --form-toggle-switch-dot-selected: var(--spacing-3-5);
1421
+ --form-toggle-switch-dot-default: var(--spacing-3);
1422
+ --form-toggle-padding-selected: var(--spacing-0-5);
1423
+ --form-toggle-padding-default: var(--spacing-1);
1424
+ --form-toggle-radius: var(--radius-rounded-full);
1425
+ --form-toggle-padding-top: var(--spacing-0);
1426
+ --form-toggle-height: var(--spacing-5);
1427
+ --form-toggle-border-width: var(--spacing-0-5);
1428
+ --form-radio-ring-radius: var(--radius-rounded-full);
1429
+ --form-radio-size: var(--spacing-5);
1430
+ --form-radio-padding-top: var(--spacing-0);
1431
+ --form-radio-inner-circle-size: var(--spacing-2);
1432
+ --form-radio-inner-circle-padding: var(--spacing-1-5);
1433
+ --form-radio-border-width: var(--spacing-0-5);
1434
+ --form-checkbox-icon-stroke: var(--spacing-0-5);
1435
+ --form-checkbox-ring-radius: var(--radius-rounded-lg);
1436
+ --form-checkbox-size: var(--spacing-5);
1437
+ --form-checkbox-radius: var(--radius-rounded-md);
1438
+ --form-checkbox-padding-top: var(--spacing-0);
1439
+ --form-checkbox-icon-size: var(--spacing-3-5);
1440
+ --form-checkbox-border-width: var(--spacing-0-5);
1441
+ --form-label-font-weight: var(--font-weight-medium-emphasis);
1442
+ --form-label-line-height: var(--line-height-sm);
1443
+ --form-label-gap: var(--spacing-1);
1444
+ --form-label-font-size: var(--font-size-sm);
1445
+ --form-description-font-weight: var(--font-weight-low-emphasis);
1446
+ --form-description-line-height: var(--line-height-sm);
1447
+ --form-description-font-size: var(--font-size-sm);
1448
+ --form-gap-y: var(--spacing-1);
1449
+ --form-gap-x: var(--spacing-3);
1450
+ --form-field-inner-button-padding-y: var(--spacing-2-5);
1451
+ --form-field-inner-button-padding-x-int: var(--spacing-1-5);
1452
+ --form-field-inner-button-padding-x-ext: var(--spacing-2-5);
1453
+ --form-field-leading-trailing-line-height: var(--line-height-base);
1454
+ --form-field-leading-trailing-icon-size: var(--spacing-5);
1455
+ --form-field-leading-trailing-font-size: var(--font-size-sm);
1456
+ --form-field-radius: var(--radius-rounded-md);
1457
+ --form-field-padding-y: var(--spacing-2);
1458
+ --form-field-padding-x-icon-button: var(--spacing-10);
1459
+ --form-field-padding-x: var(--spacing-2);
1460
+ --form-field-line-height: var(--line-height-base);
1461
+ --form-field-gap-inner: var(--spacing-2);
1462
+ --form-field-gap: var(--spacing-2);
1463
+ --form-field-icon-size: var(--spacing-5);
1464
+ --form-field-font-weight: var(--font-weight-medium-emphasis);
1465
+ --form-field-font-size: var(--font-size-md);
1466
+ --form-field-badge-padding-y: var(--spacing-0-5);
1467
+ --form-field-badge-padding-x: var(--spacing-1);
1468
+ --list-multiselect-padding: var(--spacing-3);
1469
+ --list-dropdown-sub-item-padding-left: var(--spacing-10);
1470
+ --list-dropdown-separator-padding-y: var(--spacing-0-5);
1471
+ --list-dropdown-separator-padding-x: var(--spacing-0);
1472
+ --list-dropdown-padding: var(--spacing-2);
1473
+ --list-dropdown-radius: var(--radius-rounded-md);
1474
+ --list-dropdown-gap-y: var(--spacing-0-5);
1475
+ --list-dropdown-item-radius: var(--radius-rounded-md);
1476
+ --list-dropdown-item-gap-x: var(--spacing-3);
1477
+ --list-dropdown-item-padding-y: var(--spacing-2);
1478
+ --list-dropdown-item-padding-x: var(--spacing-2);
1479
+ --list-dropdown-item-padding-right: var(--spacing-2);
1480
+ --list-dropdown-item-padding-left: var(--spacing-8);
1481
+ --list-dropdown-line-height: var(--line-height-base);
1482
+ --list-dropdown-font-size: var(--font-size-md);
1483
+ --list-dropdown-icon-size: var(--spacing-5);
1443
1484
  --list-native-sub-item-padding-left: var(--spacing-8);
1444
1485
  --list-native-padding: var(--spacing-2);
1445
1486
  --list-native-radius: var(--radius-rounded-md);