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

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 (28) hide show
  1. package/dist/cjs/generated/nova-tailwind-components.js +128 -17
  2. package/dist/cjs/plugin/nova-plugin.js +4 -0
  3. package/dist/cjs/plugin/nova-theme.js +1 -0
  4. package/dist/css/mccs.css +44 -23
  5. package/dist/css/nova-utils.css +153 -100
  6. package/dist/css/ocean.css +68 -47
  7. package/dist/css/spark.css +70 -49
  8. package/dist/generated/nova-tailwind-components.d.ts +112 -1
  9. package/dist/generated/nova-tailwind-components.js +128 -17
  10. package/dist/js/mccs_dark.d.ts +15 -9
  11. package/dist/js/mccs_dark.js +18 -12
  12. package/dist/js/mccs_light.d.ts +15 -9
  13. package/dist/js/mccs_light.js +18 -12
  14. package/dist/js/ocean_dark.d.ts +27 -21
  15. package/dist/js/ocean_dark.js +30 -24
  16. package/dist/js/ocean_light.d.ts +27 -21
  17. package/dist/js/ocean_light.js +30 -24
  18. package/dist/js/spacings.d.ts +9 -0
  19. package/dist/js/spacings.js +11 -2
  20. package/dist/js/spark_dark.d.ts +27 -21
  21. package/dist/js/spark_dark.js +30 -24
  22. package/dist/js/spark_light.d.ts +27 -21
  23. package/dist/js/spark_light.js +32 -26
  24. package/dist/plugin/nova-plugin.d.ts +1 -0
  25. package/dist/plugin/nova-plugin.js +4 -0
  26. package/dist/plugin/nova-theme.d.ts +1 -0
  27. package/dist/plugin/nova-theme.js +1 -0
  28. package/package.json +7 -2
package/dist/css/ocean.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);
@@ -35,7 +35,6 @@
35
35
  --components-button-high-border-active: rgba(255, 255, 255, 0);
36
36
  --components-button-high-border-hover: rgba(255, 255, 255, 0);
37
37
  --components-button-high-border: rgba(255, 255, 255, 0);
38
- --components-wpf-components-2: #ffffff;
39
38
  --shadow-y-axis-2xl: 25px;
40
39
  --shadow-y-axis-xl-2: 20px;
41
40
  --shadow-y-axis-xl-1: 10px;
@@ -62,18 +61,19 @@
62
61
  --shadow-color-opacity-2: rgba(11, 15, 17, 0.14);
63
62
  --shadow-color-opacity-1: rgba(11, 15, 17, 0.09);
64
63
  --shadow-color-opacity-0: rgba(11, 15, 17, 0.09);
64
+ --opacity-disabled-2: 0%;
65
+ --opacity-disabled: 50%;
66
+ --color-transparent: rgba(255, 255, 255, 0);
67
+ --color-white: #ffffff;
65
68
  --color-black: #000000;
66
69
  --color-interaction-container-neutral-background-hover: rgba(255, 255, 255, 0.1);
67
70
  --color-interaction-container-neutral-background: rgba(255, 255, 255, 0);
68
71
  --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);
72
- --components-menu-contextual-item-background-hover: var(--color-interaction-container-neutral-background-hover);
73
- --components-menu-contextual-item-background: var(--color-interaction-container-neutral-background);
74
72
  --components-tooltip-border: var(--color-gray-ocean-50);
75
73
  --components-tooltip-background: var(--color-gray-ocean-50);
76
74
  --components-popover-background: var(--color-gray-ocean-900);
75
+ --components-menu-contextual-item-background-hover: var(--color-interaction-container-neutral-background-hover);
76
+ --components-menu-contextual-item-background: var(--color-interaction-container-neutral-background);
77
77
  --components-overlay-background: var(--color-gray-ocean-650);
78
78
  --components-button-destructive-high-icon-hover: var(--color-base-black);
79
79
  --components-button-destructive-high-icon: var(--color-base-black);
@@ -261,6 +261,18 @@
261
261
  --color-interaction-container-neutral-text-active: var(--color-petrol-400);
262
262
  --color-interaction-container-neutral-icon-active: var(--color-petrol-400);
263
263
  --color-interaction-container-neutral-background-active: var(--color-petrol-900);
264
+ --color-interaction-container-branded-high-text-hover: var(--color-base-black);
265
+ --color-interaction-container-branded-high-text-active: var(--color-base-black);
266
+ --color-interaction-container-branded-high-text: var(--color-base-black);
267
+ --color-interaction-container-branded-high-icon-hover: var(--color-base-black);
268
+ --color-interaction-container-branded-high-icon-active: var(--color-base-black);
269
+ --color-interaction-container-branded-high-icon: var(--color-base-black);
270
+ --color-interaction-container-branded-high-border-hover: var(--color-petrol-400);
271
+ --color-interaction-container-branded-high-border-active: var(--color-petrol-400);
272
+ --color-interaction-container-branded-high-border: var(--color-petrol-500);
273
+ --color-interaction-container-branded-high-background-hover: var(--color-petrol-400);
274
+ --color-interaction-container-branded-high-background-active: var(--color-petrol-400);
275
+ --color-interaction-container-branded-high-background: var(--color-petrol-500);
264
276
  --color-interaction-container-branded-low-text-hover: var(--color-petrol-400);
265
277
  --color-interaction-container-branded-low-text-active: var(--color-petrol-400);
266
278
  --color-interaction-container-branded-low-text: var(--color-petrol-500);
@@ -272,24 +284,15 @@
272
284
  --color-interaction-container-branded-low-border: var(--color-petrol-500);
273
285
  --color-interaction-container-branded-low-background-hover: var(--color-petrol-900);
274
286
  --color-interaction-container-branded-low-background-active: var(--color-petrol-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-petrol-400);
282
- --color-interaction-container-branded-high-background-active: var(--color-petrol-400);
283
- --color-interaction-container-branded-high-background: var(--color-petrol-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
287
  --components-tooltip-supporting-text: var(--color-content-inverted-medium-text);
289
288
  --components-tooltip-text: var(--color-content-inverted-high-text);
290
289
  --components-popover-supporting-text: var(--color-content-low-text);
291
290
  --components-popover-text: var(--color-content-inverted-medium-text);
292
291
  --components-popover-border: var(--color-content-low-border);
292
+ --components-menu-contextual-item-content-disabled: var(--color-content-lower-text);
293
+ --components-menu-contextual-item-shortcut: var(--color-content-lower-text);
294
+ --components-menu-contextual-border: var(--color-content-low-border);
295
+ --components-menu-contextual-background: var(--color-level-00-background);
293
296
  --components-notification-neutral-icon: var(--color-feedback-neutral-low-icon);
294
297
  --components-notification-neutral-border: var(--color-feedback-neutral-low-border);
295
298
  --components-notification-neutral-background: var(--color-level-20-background);
@@ -307,6 +310,9 @@
307
310
  --components-notification-information-border: var(--color-feedback-information-low-border);
308
311
  --components-notification-information-icon: var(--color-feedback-information-low-icon);
309
312
  --components-notification-information-background: var(--color-level-20-background);
313
+ --components-breadcrumb-text-hover: var(--color-interaction-link-low-text-hover);
314
+ --components-breadcrumb-text-active: var(--color-content-medium-text);
315
+ --components-breadcrumb-text: var(--color-content-low-text);
310
316
  --components-avatar-content-10: var(--color-rainbow-10-icon);
311
317
  --components-avatar-content-9: var(--color-rainbow-9-text);
312
318
  --components-avatar-content-8: var(--color-rainbow-8-text);
@@ -482,7 +488,7 @@
482
488
  */
483
489
 
484
490
  :root {
485
- --components-overlay-opacity: 55px;
491
+ --components-overlay-opacity: 55%;
486
492
  --components-button-destructive-low-border-hover: rgba(255, 255, 255, 0);
487
493
  --components-button-destructive-low-border: rgba(255, 255, 255, 0);
488
494
  --components-button-destructive-low-background: rgba(255, 255, 255, 0);
@@ -497,8 +503,8 @@
497
503
  --components-list-native-separator: #838086;
498
504
  --components-list-native-item-title-content: rgba(255, 255, 255, 0.5);
499
505
  --components-list-native-background: #565558;
500
- --components-form-opacity-disabled: 50px;
501
- --components-form-opacity-default: 100px;
506
+ --components-form-opacity-disabled: 50%;
507
+ --components-form-opacity-default: 100%;
502
508
  --components-button-gr-as-complementary-border-hover: rgba(255, 255, 255, 0);
503
509
  --components-button-gr-as-complementary-border: rgba(255, 255, 255, 0);
504
510
  --components-button-lower-border-hover-2: rgba(255, 255, 255, 0);
@@ -514,7 +520,6 @@
514
520
  --components-button-high-border-active: rgba(255, 255, 255, 0);
515
521
  --components-button-high-border-hover: rgba(255, 255, 255, 0);
516
522
  --components-button-high-border: rgba(255, 255, 255, 0);
517
- --components-wpf-components-2: #ffffff;
518
523
  --shadow-y-axis-2xl: 25px;
519
524
  --shadow-y-axis-xl-2: 20px;
520
525
  --shadow-y-axis-xl-1: 10px;
@@ -541,18 +546,19 @@
541
546
  --shadow-color-opacity-2: rgba(11, 15, 17, 0.1);
542
547
  --shadow-color-opacity-1: rgba(11, 15, 17, 0.06);
543
548
  --shadow-color-opacity-0: rgba(255, 255, 255, 0.06);
549
+ --opacity-disabled-2: 0%;
550
+ --opacity-disabled: 50%;
551
+ --color-transparent: rgba(255, 255, 255, 0);
552
+ --color-white: #ffffff;
544
553
  --color-black: #000000;
545
554
  --color-interaction-container-neutral-background-hover: rgba(165, 166, 167, 0.12);
546
555
  --color-interaction-container-neutral-background: rgba(255, 255, 255, 0);
547
556
  --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);
551
- --components-menu-contextual-item-background-hover: var(--color-interaction-container-neutral-background-hover);
552
- --components-menu-contextual-item-background: var(--color-interaction-container-neutral-background);
553
557
  --components-tooltip-border: var(--color-gray-ocean-900);
554
558
  --components-tooltip-background: var(--color-gray-ocean-900);
555
- --components-popover-background: var(--color-gray-ocean-50);
559
+ --components-popover-background: var(--color-gray-ocean-00);
560
+ --components-menu-contextual-item-background-hover: var(--color-interaction-container-neutral-background-hover);
561
+ --components-menu-contextual-item-background: var(--color-interaction-container-neutral-background);
556
562
  --components-overlay-background: var(--color-gray-ocean-850);
557
563
  --components-button-destructive-high-icon-hover: var(--color-base-white);
558
564
  --components-button-destructive-high-icon: var(--color-base-white);
@@ -740,6 +746,18 @@
740
746
  --color-interaction-container-neutral-text-active: var(--color-petrol-700);
741
747
  --color-interaction-container-neutral-icon-active: var(--color-petrol-700);
742
748
  --color-interaction-container-neutral-background-active: var(--color-petrol-50);
749
+ --color-interaction-container-branded-high-text-hover: var(--color-base-white);
750
+ --color-interaction-container-branded-high-text-active: var(--color-base-white);
751
+ --color-interaction-container-branded-high-text: var(--color-base-white);
752
+ --color-interaction-container-branded-high-icon-hover: var(--color-base-white);
753
+ --color-interaction-container-branded-high-icon-active: var(--color-base-white);
754
+ --color-interaction-container-branded-high-icon: var(--color-base-white);
755
+ --color-interaction-container-branded-high-border-hover: var(--color-petrol-700);
756
+ --color-interaction-container-branded-high-border-active: var(--color-petrol-700);
757
+ --color-interaction-container-branded-high-border: var(--color-petrol-600);
758
+ --color-interaction-container-branded-high-background-hover: var(--color-petrol-700);
759
+ --color-interaction-container-branded-high-background-active: var(--color-petrol-700);
760
+ --color-interaction-container-branded-high-background: var(--color-petrol-600);
743
761
  --color-interaction-container-branded-low-text-hover: var(--color-petrol-700);
744
762
  --color-interaction-container-branded-low-text-active: var(--color-petrol-700);
745
763
  --color-interaction-container-branded-low-text: var(--color-petrol-600);
@@ -751,24 +769,15 @@
751
769
  --color-interaction-container-branded-low-border: var(--color-petrol-600);
752
770
  --color-interaction-container-branded-low-background-hover: var(--color-petrol-50);
753
771
  --color-interaction-container-branded-low-background-active: var(--color-petrol-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-petrol-700);
761
- --color-interaction-container-branded-high-background-active: var(--color-petrol-700);
762
- --color-interaction-container-branded-high-background: var(--color-petrol-600);
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
772
  --components-tooltip-supporting-text: var(--color-content-inverted-medium-text);
768
773
  --components-tooltip-text: var(--color-content-inverted-high-text);
769
774
  --components-popover-supporting-text: var(--color-content-low-text);
770
775
  --components-popover-text: var(--color-content-medium-text);
771
776
  --components-popover-border: var(--color-content-low-border);
777
+ --components-menu-contextual-item-content-disabled: var(--color-content-lower-text);
778
+ --components-menu-contextual-item-shortcut: var(--color-content-lower-text);
779
+ --components-menu-contextual-border: var(--color-content-low-border);
780
+ --components-menu-contextual-background: var(--color-level-00-background);
772
781
  --components-notification-neutral-icon: var(--color-feedback-neutral-low-icon);
773
782
  --components-notification-neutral-border: var(--color-feedback-neutral-low-border);
774
783
  --components-notification-neutral-background: var(--color-level-00-background);
@@ -786,6 +795,9 @@
786
795
  --components-notification-information-border: var(--color-feedback-information-low-border);
787
796
  --components-notification-information-icon: var(--color-feedback-information-low-icon);
788
797
  --components-notification-information-background: var(--color-level-00-background);
798
+ --components-breadcrumb-text-hover: var(--color-interaction-link-low-text-hover);
799
+ --components-breadcrumb-text-active: var(--color-content-medium-text);
800
+ --components-breadcrumb-text: var(--color-content-low-text);
789
801
  --components-avatar-content-10: var(--color-rainbow-10-icon);
790
802
  --components-avatar-content-9: var(--color-rainbow-9-text);
791
803
  --components-avatar-content-8: var(--color-rainbow-8-text);
@@ -1263,6 +1275,14 @@
1263
1275
  --notification-gap-x-title: var(--spacing-2);
1264
1276
  --notification-gap-x: var(--spacing-3);
1265
1277
  --notification-icon-size: var(--spacing-5);
1278
+ --navigation-primary-item-bullet-size: var(--spacing-5);
1279
+ --navigation-primary-item-bullet-font-size: var(--font-size-xs);
1280
+ --navigation-primary-item-radius: var(--radius-rounded-md);
1281
+ --navigation-primary-item-icon-size: var(--spacing-5);
1282
+ --navigation-primary-item-font-size: var(--font-size-md);
1283
+ --navigation-primary-item-padding-y: var(--spacing-2);
1284
+ --navigation-primary-item-padding-x: var(--spacing-3);
1285
+ --navigation-primary-item-gap-x: var(--spacing-2);
1266
1286
  --icon-xl: var(--spacing-7);
1267
1287
  --icon-lg: var(--spacing-6);
1268
1288
  --icon-md: var(--spacing-5);
@@ -1335,6 +1355,7 @@
1335
1355
  --dialog-header-gap-y: var(--spacing-0);
1336
1356
  --dialog-dismissible-position-right: var(--spacing-3);
1337
1357
  --dialog-dismissible-position-top: var(--spacing-5);
1358
+ --breadcrumb-padding-y: var(--spacing-1);
1338
1359
  --badge-radius: var(--radius-rounded-full);
1339
1360
  --badge-padding-y: var(--spacing-1);
1340
1361
  --badge-padding-x: var(--spacing-2);
@@ -1403,8 +1424,8 @@
1403
1424
  --tooltip-padding-x: var(--spacing-3);
1404
1425
  --tooltip-font-size: var(--font-size-sm);
1405
1426
  --popover-radius: var(--radius-rounded-md);
1406
- --popover-padding-y: var(--spacing-3);
1407
- --popover-padding-x: var(--spacing-3);
1427
+ --popover-padding-y: var(--spacing-2);
1428
+ --popover-padding-x: var(--spacing-2);
1408
1429
  --popover-gap-y: var(--spacing-1);
1409
1430
  --popover-font-size: var(--font-size-sm);
1410
1431
  --popover-shadow-2-opacity: var(--shadow-color-opacity-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,19 @@
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
76
  --components-overlay-background: var(--color-gray-spark-650);
77
77
  --components-button-destructive-high-icon-hover: var(--color-base-black);
78
78
  --components-button-destructive-high-icon: var(--color-base-black);
@@ -261,6 +261,18 @@
261
261
  --color-interaction-container-neutral-text-active: var(--color-orange-400);
262
262
  --color-interaction-container-neutral-icon-active: var(--color-orange-400);
263
263
  --color-interaction-container-neutral-background-active: var(--color-orange-900);
264
+ --color-interaction-container-branded-high-text-hover: var(--color-base-black);
265
+ --color-interaction-container-branded-high-text-active: var(--color-base-black);
266
+ --color-interaction-container-branded-high-text: var(--color-base-black);
267
+ --color-interaction-container-branded-high-icon-hover: var(--color-base-black);
268
+ --color-interaction-container-branded-high-icon-active: var(--color-base-black);
269
+ --color-interaction-container-branded-high-icon: var(--color-base-black);
270
+ --color-interaction-container-branded-high-border-hover: var(--color-orange-600);
271
+ --color-interaction-container-branded-high-border-active: var(--color-orange-600);
272
+ --color-interaction-container-branded-high-border: var(--color-orange-500);
273
+ --color-interaction-container-branded-high-background-hover: var(--color-orange-400);
274
+ --color-interaction-container-branded-high-background-active: var(--color-orange-400);
275
+ --color-interaction-container-branded-high-background: var(--color-orange-500);
264
276
  --color-interaction-container-branded-low-text-hover: var(--color-orange-400);
265
277
  --color-interaction-container-branded-low-text-active: var(--color-orange-400);
266
278
  --color-interaction-container-branded-low-text: var(--color-orange-500);
@@ -272,24 +284,15 @@
272
284
  --color-interaction-container-branded-low-border: var(--color-orange-500);
273
285
  --color-interaction-container-branded-low-background-hover: var(--color-orange-900);
274
286
  --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
287
  --components-tooltip-supporting-text: var(--color-content-inverted-medium-text);
289
288
  --components-tooltip-text: var(--color-content-inverted-high-text);
290
289
  --components-popover-supporting-text: var(--color-content-low-text);
291
290
  --components-popover-text: var(--color-content-medium-text);
292
291
  --components-popover-border: var(--color-content-low-border);
292
+ --components-menu-contextual-item-content-disabled: var(--color-content-lower-text);
293
+ --components-menu-contextual-item-shortcut: var(--color-content-lower-text);
294
+ --components-menu-contextual-border: var(--color-content-low-border);
295
+ --components-menu-contextual-background: var(--color-level-00-background);
293
296
  --components-notification-neutral-icon: var(--color-feedback-neutral-low-icon);
294
297
  --components-notification-neutral-border: var(--color-feedback-neutral-low-border);
295
298
  --components-notification-neutral-background: var(--color-level-20-background);
@@ -307,6 +310,9 @@
307
310
  --components-notification-information-border: var(--color-feedback-information-low-border);
308
311
  --components-notification-information-icon: var(--color-feedback-information-low-icon);
309
312
  --components-notification-information-background: var(--color-level-20-background);
313
+ --components-breadcrumb-text-hover: var(--color-interaction-link-low-text-hover);
314
+ --components-breadcrumb-text-active: var(--color-content-medium-text);
315
+ --components-breadcrumb-text: var(--color-content-low-text);
310
316
  --components-avatar-content-10: var(--color-rainbow-10-icon);
311
317
  --components-avatar-content-9: var(--color-rainbow-9-text);
312
318
  --components-avatar-content-8: var(--color-rainbow-8-text);
@@ -482,7 +488,7 @@
482
488
  */
483
489
 
484
490
  :root {
485
- --components-overlay-opacity: 55px;
491
+ --components-overlay-opacity: 55%;
486
492
  --components-button-destructive-low-border-hover: rgba(255, 255, 255, 0);
487
493
  --components-button-destructive-low-border: rgba(255, 255, 255, 0);
488
494
  --components-button-destructive-low-background: rgba(255, 255, 255, 0);
@@ -497,8 +503,8 @@
497
503
  --components-list-native-separator: #838086;
498
504
  --components-list-native-item-title-content: rgba(255, 255, 255, 0.5);
499
505
  --components-list-native-background: #565558;
500
- --components-form-opacity-disabled: 50px;
501
- --components-form-opacity-default: 100px;
506
+ --components-form-opacity-disabled: 50%;
507
+ --components-form-opacity-default: 100%;
502
508
  --components-button-gr-as-complementary-border-hover: rgba(255, 255, 255, 0);
503
509
  --components-button-gr-as-complementary-border: rgba(255, 255, 255, 0);
504
510
  --components-button-lower-border-hover-2: rgba(255, 255, 255, 0);
@@ -511,7 +517,6 @@
511
517
  --components-button-low-border: rgba(255, 255, 255, 0);
512
518
  --components-button-low-background: rgba(255, 255, 255, 0);
513
519
  --components-button-high-border: rgba(255, 255, 255, 0);
514
- --components-wpf-components-2: #ffffff;
515
520
  --shadow-y-axis-2xl: 25px;
516
521
  --shadow-y-axis-xl-2: 20px;
517
522
  --shadow-y-axis-xl-1: 10px;
@@ -538,18 +543,19 @@
538
543
  --shadow-color-opacity-2: rgba(14, 14, 14, 0.1);
539
544
  --shadow-color-opacity-1: rgba(14, 14, 14, 0.06);
540
545
  --shadow-color-opacity-0: rgba(0, 0, 0, 0.06);
546
+ --opacity-disabled-2: 50%;
547
+ --opacity-disabled: 50%;
548
+ --color-transparent: rgba(255, 255, 255, 0);
549
+ --color-white: #ffffff;
541
550
  --color-black: #000000;
542
551
  --color-interaction-container-neutral-background-hover: rgba(165, 165, 165, 0.12);
543
552
  --color-interaction-container-neutral-background: rgba(255, 255, 255, 0);
544
553
  --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
554
  --components-tooltip-border: var(--color-gray-spark-900);
551
555
  --components-tooltip-background: var(--color-gray-spark-900);
552
- --components-popover-background: var(--color-gray-spark-50);
556
+ --components-popover-background: var(--color-gray-spark-00);
557
+ --components-menu-contextual-item-background-hover: var(--color-interaction-container-neutral-background-hover);
558
+ --components-menu-contextual-item-background: var(--color-interaction-container-neutral-background);
553
559
  --components-overlay-background: var(--color-gray-spark-850);
554
560
  --components-button-destructive-high-icon-hover: var(--color-base-white);
555
561
  --components-button-destructive-high-icon: var(--color-base-white);
@@ -593,8 +599,6 @@
593
599
  --components-button-gr-as-complementary-background: var(--color-gray-spark-200);
594
600
  --components-button-lower-background-hover: var(--color-interaction-container-neutral-background-hover);
595
601
  --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
602
  --color-dont-use-background: var(--color-gray-spark-50);
599
603
  --color-dont-use-content: var(--color-gray-spark-100);
600
604
  --color-dont-use-border: var(--color-gray-spark-100);
@@ -740,6 +744,18 @@
740
744
  --color-interaction-container-neutral-text-active: var(--color-orange-600);
741
745
  --color-interaction-container-neutral-icon-active: var(--color-orange-600);
742
746
  --color-interaction-container-neutral-background-active: var(--color-orange-50);
747
+ --color-interaction-container-branded-high-text-hover: var(--color-base-white);
748
+ --color-interaction-container-branded-high-text-active: var(--color-base-white);
749
+ --color-interaction-container-branded-high-text: var(--color-base-white);
750
+ --color-interaction-container-branded-high-icon-hover: var(--color-base-white);
751
+ --color-interaction-container-branded-high-icon-active: var(--color-base-white);
752
+ --color-interaction-container-branded-high-icon: var(--color-base-white);
753
+ --color-interaction-container-branded-high-border-hover: var(--color-orange-600);
754
+ --color-interaction-container-branded-high-border-active: var(--color-orange-600);
755
+ --color-interaction-container-branded-high-border: var(--color-orange-500);
756
+ --color-interaction-container-branded-high-background-hover: var(--color-orange-600);
757
+ --color-interaction-container-branded-high-background-active: var(--color-orange-600);
758
+ --color-interaction-container-branded-high-background: var(--color-orange-500);
743
759
  --color-interaction-container-branded-low-text-hover: var(--color-orange-600);
744
760
  --color-interaction-container-branded-low-text-active: var(--color-orange-600);
745
761
  --color-interaction-container-branded-low-text: var(--color-orange-500);
@@ -751,24 +767,15 @@
751
767
  --color-interaction-container-branded-low-border: var(--color-orange-500);
752
768
  --color-interaction-container-branded-low-background-hover: var(--color-orange-50);
753
769
  --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
770
  --components-tooltip-supporting-text: var(--color-content-inverted-medium-text);
768
771
  --components-tooltip-text: var(--color-content-inverted-high-text);
769
772
  --components-popover-supporting-text: var(--color-content-low-text);
770
773
  --components-popover-text: var(--color-content-medium-text);
771
774
  --components-popover-border: var(--color-content-low-border);
775
+ --components-menu-contextual-item-content-disabled: var(--color-content-lower-text);
776
+ --components-menu-contextual-item-shortcut: var(--color-content-lower-text);
777
+ --components-menu-contextual-border: var(--color-content-low-border);
778
+ --components-menu-contextual-background: var(--color-level-00-background);
772
779
  --components-notification-neutral-icon: var(--color-feedback-neutral-low-icon);
773
780
  --components-notification-neutral-border: var(--color-feedback-neutral-low-border);
774
781
  --components-notification-neutral-background: var(--color-level-00-background);
@@ -786,6 +793,9 @@
786
793
  --components-notification-information-border: var(--color-feedback-information-low-border);
787
794
  --components-notification-information-icon: var(--color-feedback-information-low-icon);
788
795
  --components-notification-information-background: var(--color-level-00-background);
796
+ --components-breadcrumb-text-hover: var(--color-interaction-link-low-text-hover);
797
+ --components-breadcrumb-text-active: var(--color-content-medium-text);
798
+ --components-breadcrumb-text: var(--color-content-low-text);
789
799
  --components-avatar-content-10: var(--color-rainbow-10-icon);
790
800
  --components-avatar-content-9: var(--color-rainbow-9-text);
791
801
  --components-avatar-content-8: var(--color-rainbow-8-text);
@@ -907,6 +917,8 @@
907
917
  --components-button-high-text-hover: var(--color-interaction-container-branded-high-text-hover);
908
918
  --components-button-high-text-active: var(--color-interaction-container-branded-high-text-active);
909
919
  --components-button-high-text: var(--color-interaction-container-branded-high-text);
920
+ --components-button-high-border-active: var(--color-interaction-container-branded-high-border-active);
921
+ --components-button-high-border-hover: var(--color-interaction-container-branded-high-border-hover);
910
922
  --components-button-high-background-hover: var(--color-interaction-container-branded-high-background-hover);
911
923
  --components-button-high-background-active: var(--color-interaction-container-branded-high-background-active);
912
924
  --components-button-high-background: var(--color-interaction-container-branded-high-background);
@@ -1263,6 +1275,14 @@
1263
1275
  --notification-gap-x-title: var(--spacing-2);
1264
1276
  --notification-gap-x: var(--spacing-3);
1265
1277
  --notification-icon-size: var(--spacing-5);
1278
+ --navigation-primary-item-bullet-size: var(--spacing-5);
1279
+ --navigation-primary-item-bullet-font-size: var(--font-size-xs);
1280
+ --navigation-primary-item-radius: var(--radius-rounded-md);
1281
+ --navigation-primary-item-icon-size: var(--spacing-5);
1282
+ --navigation-primary-item-font-size: var(--font-size-md);
1283
+ --navigation-primary-item-padding-y: var(--spacing-2);
1284
+ --navigation-primary-item-padding-x: var(--spacing-3);
1285
+ --navigation-primary-item-gap-x: var(--spacing-2);
1266
1286
  --icon-xl: var(--spacing-7);
1267
1287
  --icon-lg: var(--spacing-6);
1268
1288
  --icon-md: var(--spacing-5);
@@ -1335,6 +1355,7 @@
1335
1355
  --dialog-header-gap-y: var(--spacing-0);
1336
1356
  --dialog-dismissible-position-right: var(--spacing-3);
1337
1357
  --dialog-dismissible-position-top: var(--spacing-5);
1358
+ --breadcrumb-padding-y: var(--spacing-1);
1338
1359
  --badge-radius: var(--radius-rounded-full);
1339
1360
  --badge-padding-y: var(--spacing-1);
1340
1361
  --badge-padding-x: var(--spacing-2);
@@ -1403,8 +1424,8 @@
1403
1424
  --tooltip-padding-x: var(--spacing-3);
1404
1425
  --tooltip-font-size: var(--font-size-sm);
1405
1426
  --popover-radius: var(--radius-rounded-md);
1406
- --popover-padding-y: var(--spacing-3);
1407
- --popover-padding-x: var(--spacing-3);
1427
+ --popover-padding-y: var(--spacing-2);
1428
+ --popover-padding-x: var(--spacing-2);
1408
1429
  --popover-gap-y: var(--spacing-1);
1409
1430
  --popover-font-size: var(--font-size-sm);
1410
1431
  --popover-shadow-2-opacity: var(--shadow-color-opacity-2);