@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/mccs.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-hover: rgba(255, 255, 255, 0.12);
@@ -20,8 +20,8 @@
20
20
  --components-list-native-separator: #838086;
21
21
  --components-list-native-item-title-content: rgba(255, 255, 255, 0.5);
22
22
  --components-list-native-background: #565558;
23
- --components-form-opacity-disabled: 50px;
24
- --components-form-opacity-default: 100px;
23
+ --components-form-opacity-disabled: 50%;
24
+ --components-form-opacity-default: 100%;
25
25
  --components-button-gr-as-complementary-border-hover: rgba(255, 255, 255, 0);
26
26
  --components-button-gr-as-complementary-border: rgba(255, 255, 255, 0);
27
27
  --components-button-lower-border-hover-2: rgba(255, 255, 255, 0);
@@ -33,7 +33,6 @@
33
33
  --components-button-high-border-active: rgba(255, 255, 255, 0);
34
34
  --components-button-high-border-hover: rgba(255, 255, 255, 0);
35
35
  --components-button-high-border: rgba(255, 255, 255, 0);
36
- --components-wpf-components-2: #ffffff;
37
36
  --shadow-y-axis-2xl: 25px;
38
37
  --shadow-y-axis-xl-2: 20px;
39
38
  --shadow-y-axis-xl-1: 10px;
@@ -60,6 +59,10 @@
60
59
  --shadow-color-opacity-2: rgba(11, 15, 17, 0.14);
61
60
  --shadow-color-opacity-1: rgba(11, 15, 17, 0.09);
62
61
  --shadow-color-opacity-0: rgba(11, 15, 17, 0.09);
62
+ --opacity-disabled-2: 0%;
63
+ --opacity-disabled: 50%;
64
+ --color-transparent: rgba(255, 255, 255, 0);
65
+ --color-white: #ffffff;
63
66
  --color-black: #000000;
64
67
  --color-interaction-container-neutral-background-active: rgba(255, 255, 255, 0.1);
65
68
  --color-interaction-container-neutral-background-hover: rgba(255, 255, 255, 0.1);
@@ -67,11 +70,14 @@
67
70
  --color-interaction-container-branded-low-background-hover: rgba(255, 255, 255, 0.12);
68
71
  --color-interaction-container-branded-low-background-active: rgba(255, 255, 255, 0.12);
69
72
  --color-interaction-container-branded-low-background: rgba(255, 255, 255, 0);
70
- --components-menu-contextual-item-background-hover: var(--color-interaction-container-neutral-background-hover);
71
- --components-menu-contextual-item-background: var(--color-interaction-container-neutral-background);
72
73
  --components-tooltip-border: var(--color-gray-ocean-50);
73
74
  --components-tooltip-background: var(--color-gray-ocean-50);
74
75
  --components-popover-background: var(--color-gray-ocean-900);
76
+ --components-menu-contextual-item-background-hover: var(--color-interaction-container-neutral-background-hover);
77
+ --components-menu-contextual-item-background: var(--color-interaction-container-neutral-background);
78
+ --components-field-time-background-active: var(--color-interaction-container-neutral-background-active);
79
+ --components-field-time-background-hover: var(--color-interaction-container-neutral-background-hover);
80
+ --components-field-time-background-default: var(--color-interaction-container-neutral-background);
75
81
  --components-overlay-background: var(--color-gray-ocean-650);
76
82
  --components-button-destructive-high-icon-hover: var(--color-base-black);
77
83
  --components-button-destructive-high-icon: var(--color-base-black);
@@ -92,10 +98,10 @@
92
98
  --components-loader-brand-foreground: var(--color-petrol-500);
93
99
  --components-loader-brand-background: var(--color-petrol-900);
94
100
  --components-loader-white-foreground: var(--color-base-white);
95
- --components-list-custom-item-background-title: var(--color-interaction-container-neutral-background);
96
- --components-list-custom-item-background-disabled: var(--color-interaction-container-neutral-background);
97
- --components-list-custom-item-background-hover: var(--color-interaction-container-neutral-background-hover);
98
- --components-list-custom-item-background-default: var(--color-interaction-container-neutral-background);
101
+ --components-list-dropdown-item-background-title: var(--color-interaction-container-neutral-background);
102
+ --components-list-dropdown-item-background-disabled: var(--color-interaction-container-neutral-background);
103
+ --components-list-dropdown-item-background-hover: var(--color-interaction-container-neutral-background-hover);
104
+ --components-list-dropdown-item-background-default: var(--color-interaction-container-neutral-background);
99
105
  --components-list-native-item-content-hover: var(--color-base-white);
100
106
  --components-list-native-item-content-default: var(--color-base-white);
101
107
  --components-form-shape-foreground-default: var(--color-base-black);
@@ -228,7 +234,7 @@
228
234
  --color-content-inverted-medium-text: var(--color-gray-ocean-650);
229
235
  --color-content-inverted-high-icon: var(--color-gray-ocean-900);
230
236
  --color-content-inverted-high-text: var(--color-gray-ocean-900);
231
- --color-content-lower-text: var(--color-gray-ocean-450);
237
+ --color-content-lower-text: var(--color-gray-ocean-400);
232
238
  --color-content-low-icon: var(--color-gray-ocean-300);
233
239
  --color-content-low-text: var(--color-gray-ocean-300);
234
240
  --color-content-low-border: var(--color-gray-ocean-500);
@@ -283,15 +289,15 @@
283
289
  --color-interaction-container-branded-low-border-hover: var(--color-petrol-300);
284
290
  --color-interaction-container-branded-low-border-active: var(--color-petrol-300);
285
291
  --color-interaction-container-branded-low-border: var(--color-petrol-400);
286
- --components-menu-contextual-item-content-disabled: var(--color-content-lower-text);
287
- --components-menu-contextual-item-shortcut: var(--color-content-lower-text);
288
- --components-menu-contextual-border: var(--color-content-low-border);
289
- --components-menu-contextual-background: var(--color-level-00-background);
290
292
  --components-tooltip-supporting-text: var(--color-content-inverted-medium-text);
291
293
  --components-tooltip-text: var(--color-content-inverted-high-text);
292
294
  --components-popover-supporting-text: var(--color-content-low-text);
293
295
  --components-popover-text: var(--color-content-inverted-medium-text);
294
296
  --components-popover-border: var(--color-content-low-border);
297
+ --components-menu-contextual-item-content-disabled: var(--color-content-lower-text);
298
+ --components-menu-contextual-item-shortcut: var(--color-content-lower-text);
299
+ --components-menu-contextual-border: var(--color-content-low-border);
300
+ --components-menu-contextual-background: var(--color-level-00-background);
295
301
  --components-notification-neutral-icon: var(--color-feedback-neutral-low-icon);
296
302
  --components-notification-neutral-border: var(--color-feedback-neutral-low-border);
297
303
  --components-notification-neutral-background: var(--color-level-20-background);
@@ -309,6 +315,11 @@
309
315
  --components-notification-information-border: var(--color-feedback-information-low-border);
310
316
  --components-notification-information-icon: var(--color-feedback-information-low-icon);
311
317
  --components-notification-information-background: var(--color-level-20-background);
318
+ --components-breadcrumb-text-hover: var(--color-interaction-link-low-text-hover);
319
+ --components-breadcrumb-text-active: var(--color-content-medium-text);
320
+ --components-breadcrumb-text: var(--color-content-low-text);
321
+ --components-field-time-border-active: var(--color-interaction-container-neutral-icon-active);
322
+ --components-field-time-text-active: var(--color-interaction-container-neutral-text-active);
312
323
  --components-avatar-content-10: var(--color-rainbow-10-icon);
313
324
  --components-avatar-content-9: var(--color-rainbow-9-text);
314
325
  --components-avatar-content-8: var(--color-rainbow-8-text);
@@ -364,11 +375,17 @@
364
375
  --components-button-destructive-lower-text: var(--color-dont-use-content);
365
376
  --components-button-destructive-lower-background-hover: var(--color-dont-use-background);
366
377
  --components-button-destructive-lower-background: var(--color-dont-use-background);
367
- --components-list-custom-border: var(--color-content-low-border);
368
- --components-list-custom-separator: var(--color-content-low-border);
369
- --components-list-custom-item-title-content: var(--color-content-low-text);
370
- --components-list-custom-item-content-disabled: var(--color-content-low-text);
371
- --components-list-custom-background: var(--color-level-00-background);
378
+ --components-list-dropdown-border: var(--color-content-low-border);
379
+ --components-list-dropdown-separator: var(--color-content-low-border);
380
+ --components-list-dropdown-item-title-content: var(--color-content-medium-text);
381
+ --components-list-dropdown-item-description-disabled: var(--color-content-lower-text);
382
+ --components-list-dropdown-item-description-hover: var(--color-content-medium-text);
383
+ --components-list-dropdown-item-description-default: var(--color-content-low-text);
384
+ --components-list-dropdown-item-label-disabled: var(--color-content-low-text);
385
+ --components-list-dropdown-item-label-hover: var(--color-content-high-text);
386
+ --components-list-dropdown-item-label-default: var(--color-content-medium-text);
387
+ --components-list-dropdown-header-background: var(--color-level-10-background);
388
+ --components-list-dropdown-background: var(--color-level-00-background);
372
389
  --components-form-shape-foreground-disabled-error: var(--color-feedback-error-high-background);
373
390
  --components-form-shape-foreground-switch-dot: var(--color-content-medium-border);
374
391
  --components-form-shape-border-success: var(--color-feedback-success-low-border);
@@ -449,25 +466,19 @@
449
466
  --color-interaction-container-neutral-border: var(--color-content-low-text);
450
467
  --components-menu-contextual-item-content-hover: var(--color-interaction-container-neutral-text-hover);
451
468
  --components-menu-contextual-item-content: var(--color-interaction-container-neutral-text);
452
- --components-list-custom-item-content-hover: var(--color-interaction-container-neutral-text-hover);
453
- --components-list-custom-item-content-default: var(--color-interaction-container-neutral-text);
469
+ --components-field-time-text-hover: var(--color-interaction-container-neutral-text-hover);
470
+ --components-field-time-text-default: var(--color-interaction-container-neutral-text);
454
471
  --components-form-shape-foreground-disabled: var(--components-form-shape-border-default);
455
472
  }
456
473
 
457
474
  :root {
458
- --color-red-100: var(--color-red-mccs-100);
459
- --color-red-200: var(--color-red-mccs-200);
460
- --color-red-300: var(--color-red-mccs-300);
461
- --color-red-400: var(--color-red-mccs-400);
462
- --color-red-500: var(--color-red-mccs-500);
463
- --color-red-00: var(--color-red-mccs-00);
464
475
  }
465
476
  /**
466
477
  * Do not edit directly, this file was auto-generated.
467
478
  */
468
479
 
469
480
  :root {
470
- --components-overlay-opacity: 55px;
481
+ --components-overlay-opacity: 55%;
471
482
  --components-button-destructive-low-border-hover: rgba(255, 255, 255, 0);
472
483
  --components-button-destructive-low-border: rgba(255, 255, 255, 0);
473
484
  --components-button-destructive-low-background-hover: rgba(11, 15, 17, 0.08);
@@ -484,8 +495,8 @@
484
495
  --components-list-native-separator: #838086;
485
496
  --components-list-native-item-title-content: rgba(255, 255, 255, 0.5);
486
497
  --components-list-native-background: #565558;
487
- --components-form-opacity-disabled: 50px;
488
- --components-form-opacity-default: 100px;
498
+ --components-form-opacity-disabled: 50%;
499
+ --components-form-opacity-default: 100%;
489
500
  --components-button-gr-as-complementary-border-hover: rgba(255, 255, 255, 0);
490
501
  --components-button-gr-as-complementary-border: rgba(255, 255, 255, 0);
491
502
  --components-button-lower-border-hover-2: rgba(255, 255, 255, 0);
@@ -497,7 +508,6 @@
497
508
  --components-button-high-border-active: rgba(255, 255, 255, 0);
498
509
  --components-button-high-border-hover: rgba(255, 255, 255, 0);
499
510
  --components-button-high-border: rgba(255, 255, 255, 0);
500
- --components-wpf-components-2: #ffffff;
501
511
  --shadow-y-axis-2xl: 25px;
502
512
  --shadow-y-axis-xl-2: 20px;
503
513
  --shadow-y-axis-xl-1: 10px;
@@ -524,6 +534,10 @@
524
534
  --shadow-color-opacity-2: rgba(11, 15, 17, 0.1);
525
535
  --shadow-color-opacity-1: rgba(11, 15, 17, 0.06);
526
536
  --shadow-color-opacity-0: rgba(255, 255, 255, 0.06);
537
+ --opacity-disabled-2: 0%;
538
+ --opacity-disabled: 50%;
539
+ --color-transparent: rgba(255, 255, 255, 0);
540
+ --color-white: #ffffff;
527
541
  --color-black: #000000;
528
542
  --color-interaction-container-neutral-background-active: rgba(165, 166, 167, 0.12);
529
543
  --color-interaction-container-neutral-background-hover: rgba(165, 166, 167, 0.12);
@@ -531,11 +545,14 @@
531
545
  --color-interaction-container-branded-low-background-hover: rgba(11, 15, 17, 0.08);
532
546
  --color-interaction-container-branded-low-background-active: rgba(11, 15, 17, 0.08);
533
547
  --color-interaction-container-branded-low-background: rgba(255, 255, 255, 0);
534
- --components-menu-contextual-item-background-hover: var(--color-interaction-container-neutral-background-hover);
535
- --components-menu-contextual-item-background: var(--color-interaction-container-neutral-background);
536
548
  --components-tooltip-border: var(--color-gray-ocean-900);
537
549
  --components-tooltip-background: var(--color-gray-ocean-900);
538
- --components-popover-background: var(--color-gray-ocean-50);
550
+ --components-popover-background: var(--color-gray-ocean-00);
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
+ --components-field-time-background-active: var(--color-interaction-container-neutral-background-active);
554
+ --components-field-time-background-hover: var(--color-interaction-container-neutral-background-hover);
555
+ --components-field-time-background-default: var(--color-interaction-container-neutral-background);
539
556
  --components-overlay-background: var(--color-gray-ocean-850);
540
557
  --components-button-destructive-high-icon-hover: var(--color-base-black);
541
558
  --components-button-destructive-high-icon: var(--color-base-black);
@@ -556,10 +573,10 @@
556
573
  --components-loader-brand-foreground: var(--color-petrol-500);
557
574
  --components-loader-brand-background: var(--color-petrol-50);
558
575
  --components-loader-white-foreground: var(--color-base-white);
559
- --components-list-custom-item-background-title: var(--color-interaction-container-neutral-background);
560
- --components-list-custom-item-background-disabled: var(--color-interaction-container-neutral-background);
561
- --components-list-custom-item-background-hover: var(--color-interaction-container-neutral-background-hover);
562
- --components-list-custom-item-background-default: var(--color-interaction-container-neutral-background);
576
+ --components-list-dropdown-item-background-title: var(--color-interaction-container-neutral-background);
577
+ --components-list-dropdown-item-background-disabled: var(--color-interaction-container-neutral-background);
578
+ --components-list-dropdown-item-background-hover: var(--color-interaction-container-neutral-background-hover);
579
+ --components-list-dropdown-item-background-default: var(--color-interaction-container-neutral-background);
563
580
  --components-list-native-item-content-hover: var(--color-base-white);
564
581
  --components-list-native-item-content-default: var(--color-base-white);
565
582
  --components-form-shape-foreground-default: var(--color-base-white);
@@ -747,15 +764,15 @@
747
764
  --color-interaction-container-branded-low-border-hover: var(--color-petrol-700);
748
765
  --color-interaction-container-branded-low-border-active: var(--color-petrol-700);
749
766
  --color-interaction-container-branded-low-border: var(--color-petrol-600);
750
- --components-menu-contextual-item-content-disabled: var(--color-content-lower-text);
751
- --components-menu-contextual-item-shortcut: var(--color-content-lower-text);
752
- --components-menu-contextual-border: var(--color-content-low-border);
753
- --components-menu-contextual-background: var(--color-level-00-background);
754
767
  --components-tooltip-supporting-text: var(--color-content-inverted-medium-text);
755
768
  --components-tooltip-text: var(--color-content-inverted-high-text);
756
769
  --components-popover-supporting-text: var(--color-content-low-text);
757
770
  --components-popover-text: var(--color-content-medium-text);
758
771
  --components-popover-border: var(--color-content-low-border);
772
+ --components-menu-contextual-item-content-disabled: var(--color-content-lower-text);
773
+ --components-menu-contextual-item-shortcut: var(--color-content-lower-text);
774
+ --components-menu-contextual-border: var(--color-content-low-border);
775
+ --components-menu-contextual-background: var(--color-level-00-background);
759
776
  --components-notification-neutral-icon: var(--color-feedback-neutral-low-icon);
760
777
  --components-notification-neutral-border: var(--color-feedback-neutral-low-border);
761
778
  --components-notification-neutral-background: var(--color-level-00-background);
@@ -773,6 +790,11 @@
773
790
  --components-notification-information-border: var(--color-feedback-information-low-border);
774
791
  --components-notification-information-icon: var(--color-feedback-information-low-icon);
775
792
  --components-notification-information-background: var(--color-level-00-background);
793
+ --components-breadcrumb-text-hover: var(--color-interaction-link-low-text-hover);
794
+ --components-breadcrumb-text-active: var(--color-content-medium-text);
795
+ --components-breadcrumb-text: var(--color-content-low-text);
796
+ --components-field-time-border-active: var(--color-interaction-container-neutral-icon-active);
797
+ --components-field-time-text-active: var(--color-interaction-container-neutral-text-active);
776
798
  --components-avatar-content-10: var(--color-rainbow-10-icon);
777
799
  --components-avatar-content-9: var(--color-rainbow-9-text);
778
800
  --components-avatar-content-8: var(--color-rainbow-8-text);
@@ -828,11 +850,17 @@
828
850
  --components-button-destructive-lower-text: var(--color-dont-use-content);
829
851
  --components-button-destructive-lower-background-hover: var(--color-dont-use-background);
830
852
  --components-button-destructive-lower-background: var(--color-dont-use-background);
831
- --components-list-custom-border: var(--color-content-low-border);
832
- --components-list-custom-separator: var(--color-content-low-border);
833
- --components-list-custom-item-title-content: var(--color-content-low-text);
834
- --components-list-custom-item-content-disabled: var(--color-content-low-text);
835
- --components-list-custom-background: var(--color-level-00-background);
853
+ --components-list-dropdown-border: var(--color-content-low-border);
854
+ --components-list-dropdown-separator: var(--color-content-low-border);
855
+ --components-list-dropdown-item-title-content: var(--color-content-medium-text);
856
+ --components-list-dropdown-item-description-disabled: var(--color-content-lower-text);
857
+ --components-list-dropdown-item-description-hover: var(--color-content-medium-text);
858
+ --components-list-dropdown-item-description-default: var(--color-content-low-text);
859
+ --components-list-dropdown-item-label-disabled: var(--color-content-low-text);
860
+ --components-list-dropdown-item-label-hover: var(--color-content-high-text);
861
+ --components-list-dropdown-item-label-default: var(--color-content-medium-text);
862
+ --components-list-dropdown-header-background: var(--color-level-10-background);
863
+ --components-list-dropdown-background: var(--color-level-00-background);
836
864
  --components-form-shape-foreground-disabled-error: var(--color-feedback-error-high-background);
837
865
  --components-form-shape-foreground-switch-dot: var(--color-content-medium-border);
838
866
  --components-form-shape-border-success: var(--color-feedback-success-low-border);
@@ -912,8 +940,8 @@
912
940
  --color-interaction-container-neutral-border: var(--color-content-inverted-low-text);
913
941
  --components-menu-contextual-item-content-hover: var(--color-interaction-container-neutral-text-hover);
914
942
  --components-menu-contextual-item-content: var(--color-interaction-container-neutral-text);
915
- --components-list-custom-item-content-hover: var(--color-interaction-container-neutral-text-hover);
916
- --components-list-custom-item-content-default: var(--color-interaction-container-neutral-text);
943
+ --components-field-time-text-hover: var(--color-interaction-container-neutral-text-hover);
944
+ --components-field-time-text-default: var(--color-interaction-container-neutral-text);
917
945
  --components-form-shape-foreground-disabled: var(--components-form-shape-border-default);
918
946
  --components-button-lower-icon-hover: var(--color-interaction-container-neutral-icon-hover);
919
947
  }
@@ -1037,12 +1065,6 @@
1037
1065
  --color-turquoise-200: #b8d6d2;
1038
1066
  --color-turquoise-100: #d2e5e3;
1039
1067
  --color-turquoise-50: #ecf4f3;
1040
- --color-red-mccs-00: #ff6161;
1041
- --color-red-mccs-500: #450000;
1042
- --color-red-mccs-400: #7d0000;
1043
- --color-red-mccs-300: #ae0303;
1044
- --color-red-mccs-200: #d00202;
1045
- --color-red-mccs-100: #ff3838;
1046
1068
  --color-red-900: #3d0909;
1047
1069
  --color-red-800: #610e0e;
1048
1070
  --color-red-700: #851313;
@@ -1225,6 +1247,7 @@
1225
1247
  --popover-font-weight: 500;
1226
1248
  --menu-contextual-item-font-weight: 500;
1227
1249
  --menu-contextual-divider-padding-bottom: 3px;
1250
+ --form-field-badge-gap: 0px;
1228
1251
  --list-native-separator-padding-y: 3px;
1229
1252
  --list-native-separator-padding-x: 9px;
1230
1253
  --button-lg-ring-radius: 9px;
@@ -1248,6 +1271,14 @@
1248
1271
  --notification-gap-x-title: var(--spacing-2);
1249
1272
  --notification-gap-x: var(--spacing-3);
1250
1273
  --notification-icon-size: var(--spacing-5);
1274
+ --navigation-primary-item-bullet-size: var(--spacing-5);
1275
+ --navigation-primary-item-bullet-font-size: var(--font-size-xs);
1276
+ --navigation-primary-item-radius: var(--radius-rounded-md);
1277
+ --navigation-primary-item-icon-size: var(--spacing-5);
1278
+ --navigation-primary-item-font-size: var(--font-size-md);
1279
+ --navigation-primary-item-padding-y: var(--spacing-2);
1280
+ --navigation-primary-item-padding-x: var(--spacing-3);
1281
+ --navigation-primary-item-gap-x: var(--spacing-2);
1251
1282
  --icon-xl: var(--spacing-7);
1252
1283
  --icon-lg: var(--spacing-6);
1253
1284
  --icon-md: var(--spacing-5);
@@ -1258,53 +1289,6 @@
1258
1289
  --loader-size-md: var(--spacing-6);
1259
1290
  --loader-size-sm: var(--spacing-5);
1260
1291
  --loader-size-xs: var(--spacing-4);
1261
- --form-toggle-width: var(--spacing-9);
1262
- --form-toggle-switch-dot-selected: var(--spacing-3-5);
1263
- --form-toggle-switch-dot-default: var(--spacing-3);
1264
- --form-toggle-padding-selected: var(--spacing-0-5);
1265
- --form-toggle-padding-default: var(--spacing-1);
1266
- --form-toggle-radius: var(--radius-rounded-full);
1267
- --form-toggle-padding-top: var(--spacing-0);
1268
- --form-toggle-height: var(--spacing-5);
1269
- --form-toggle-border-width: var(--spacing-0-5);
1270
- --form-radio-ring-radius: var(--radius-rounded-full);
1271
- --form-radio-size: var(--spacing-5);
1272
- --form-radio-padding-top: var(--spacing-0);
1273
- --form-radio-inner-circle-size: var(--spacing-2);
1274
- --form-radio-inner-circle-padding: var(--spacing-1-5);
1275
- --form-radio-border-width: var(--spacing-0-5);
1276
- --form-checkbox-icon-stroke: var(--spacing-0-5);
1277
- --form-checkbox-ring-radius: var(--radius-rounded-lg);
1278
- --form-checkbox-size: var(--spacing-5);
1279
- --form-checkbox-radius: var(--radius-rounded-md);
1280
- --form-checkbox-padding-top: var(--spacing-0);
1281
- --form-checkbox-icon-size: var(--spacing-3-5);
1282
- --form-checkbox-border-width: var(--spacing-0-5);
1283
- --form-field-inner-button-padding-y: var(--spacing-2-5);
1284
- --form-field-inner-button-padding-x-int: var(--spacing-1-5);
1285
- --form-field-inner-button-padding-x-ext: var(--spacing-2-5);
1286
- --form-field-leading-trailing-line-height: var(--line-height-base);
1287
- --form-field-leading-trailing-icon-size: var(--spacing-5);
1288
- --form-field-leading-trailing-font-size: var(--font-size-sm);
1289
- --form-field-radius: var(--radius-rounded-md);
1290
- --form-field-padding-y: var(--spacing-2);
1291
- --form-field-padding-x-icon-button: var(--spacing-10);
1292
- --form-field-padding-x: var(--spacing-2);
1293
- --form-field-line-height: var(--line-height-base);
1294
- --form-field-gap-inner: var(--spacing-2);
1295
- --form-field-gap: var(--spacing-2);
1296
- --form-field-icon-size: var(--spacing-5);
1297
- --form-field-font-weight: var(--font-weight-medium-emphasis);
1298
- --form-field-font-size: var(--font-size-md);
1299
- --form-label-font-weight: var(--font-weight-medium-emphasis);
1300
- --form-label-line-height: var(--line-height-sm);
1301
- --form-label-gap: var(--spacing-1);
1302
- --form-label-font-size: var(--font-size-sm);
1303
- --form-description-font-weight: var(--font-weight-low-emphasis);
1304
- --form-description-line-height: var(--line-height-sm);
1305
- --form-description-font-size: var(--font-size-sm);
1306
- --form-gap-y: var(--spacing-1);
1307
- --form-gap-x: var(--spacing-3);
1308
1292
  --focus-outline-stroke: var(--spacing-0-5);
1309
1293
  --focus-outline-offset: var(--spacing-0-5);
1310
1294
  --focus-field-stroke: var(--spacing-px);
@@ -1320,6 +1304,7 @@
1320
1304
  --dialog-header-gap-y: var(--spacing-0);
1321
1305
  --dialog-dismissible-position-right: var(--spacing-3);
1322
1306
  --dialog-dismissible-position-top: var(--spacing-5);
1307
+ --breadcrumb-padding-y: var(--spacing-1);
1323
1308
  --badge-radius: var(--radius-rounded-full);
1324
1309
  --badge-padding-y: var(--spacing-1);
1325
1310
  --badge-padding-x: var(--spacing-2);
@@ -1388,8 +1373,8 @@
1388
1373
  --tooltip-padding-x: var(--spacing-3);
1389
1374
  --tooltip-font-size: var(--font-size-sm);
1390
1375
  --popover-radius: var(--radius-rounded-md);
1391
- --popover-padding-y: var(--spacing-3);
1392
- --popover-padding-x: var(--spacing-3);
1376
+ --popover-padding-y: var(--spacing-2);
1377
+ --popover-padding-x: var(--spacing-2);
1393
1378
  --popover-gap-y: var(--spacing-1);
1394
1379
  --popover-font-size: var(--font-size-sm);
1395
1380
  --popover-shadow-2-opacity: var(--shadow-color-opacity-2);
@@ -1410,21 +1395,71 @@
1410
1395
  --menu-contextual-item-font-size: var(--font-size-sm);
1411
1396
  --menu-contextual-divider-padding-x: var(--spacing-2-5);
1412
1397
  --menu-contextual-divider-padding-top: var(--spacing-1);
1413
- --list-custom-sub-item-padding-left: var(--spacing-10);
1414
- --list-custom-separator-padding-y: var(--spacing-0-5);
1415
- --list-custom-separator-padding-x: var(--spacing-0);
1416
- --list-custom-padding: var(--spacing-2);
1417
- --list-custom-radius: var(--radius-rounded-md);
1418
- --list-custom-gap-y: var(--spacing-0-5);
1419
- --list-custom-item-radius: var(--radius-rounded-md);
1420
- --list-custom-item-gap-x: var(--spacing-3);
1421
- --list-custom-item-padding-y: var(--spacing-2);
1422
- --list-custom-item-padding-x: var(--spacing-2);
1423
- --list-custom-item-padding-right: var(--spacing-2);
1424
- --list-custom-item-padding-left: var(--spacing-8);
1425
- --list-custom-line-height: var(--line-height-base);
1426
- --list-custom-font-size: var(--font-size-md);
1427
- --list-custom-icon-size: var(--spacing-5);
1398
+ --form-toggle-width: var(--spacing-9);
1399
+ --form-toggle-switch-dot-selected: var(--spacing-3-5);
1400
+ --form-toggle-switch-dot-default: var(--spacing-3);
1401
+ --form-toggle-padding-selected: var(--spacing-0-5);
1402
+ --form-toggle-padding-default: var(--spacing-1);
1403
+ --form-toggle-radius: var(--radius-rounded-full);
1404
+ --form-toggle-padding-top: var(--spacing-0);
1405
+ --form-toggle-height: var(--spacing-5);
1406
+ --form-toggle-border-width: var(--spacing-0-5);
1407
+ --form-radio-ring-radius: var(--radius-rounded-full);
1408
+ --form-radio-size: var(--spacing-5);
1409
+ --form-radio-padding-top: var(--spacing-0);
1410
+ --form-radio-inner-circle-size: var(--spacing-2);
1411
+ --form-radio-inner-circle-padding: var(--spacing-1-5);
1412
+ --form-radio-border-width: var(--spacing-0-5);
1413
+ --form-checkbox-icon-stroke: var(--spacing-0-5);
1414
+ --form-checkbox-ring-radius: var(--radius-rounded-lg);
1415
+ --form-checkbox-size: var(--spacing-5);
1416
+ --form-checkbox-radius: var(--radius-rounded-md);
1417
+ --form-checkbox-padding-top: var(--spacing-0);
1418
+ --form-checkbox-icon-size: var(--spacing-3-5);
1419
+ --form-checkbox-border-width: var(--spacing-0-5);
1420
+ --form-label-font-weight: var(--font-weight-medium-emphasis);
1421
+ --form-label-line-height: var(--line-height-sm);
1422
+ --form-label-gap: var(--spacing-1);
1423
+ --form-label-font-size: var(--font-size-sm);
1424
+ --form-description-font-weight: var(--font-weight-low-emphasis);
1425
+ --form-description-line-height: var(--line-height-sm);
1426
+ --form-description-font-size: var(--font-size-sm);
1427
+ --form-gap-y: var(--spacing-1);
1428
+ --form-gap-x: var(--spacing-3);
1429
+ --form-field-inner-button-padding-y: var(--spacing-2-5);
1430
+ --form-field-inner-button-padding-x-int: var(--spacing-1-5);
1431
+ --form-field-inner-button-padding-x-ext: var(--spacing-2-5);
1432
+ --form-field-leading-trailing-line-height: var(--line-height-base);
1433
+ --form-field-leading-trailing-icon-size: var(--spacing-5);
1434
+ --form-field-leading-trailing-font-size: var(--font-size-sm);
1435
+ --form-field-radius: var(--radius-rounded-md);
1436
+ --form-field-padding-y: var(--spacing-2);
1437
+ --form-field-padding-x-icon-button: var(--spacing-10);
1438
+ --form-field-padding-x: var(--spacing-2);
1439
+ --form-field-line-height: var(--line-height-base);
1440
+ --form-field-gap-inner: var(--spacing-2);
1441
+ --form-field-gap: var(--spacing-2);
1442
+ --form-field-icon-size: var(--spacing-5);
1443
+ --form-field-font-weight: var(--font-weight-medium-emphasis);
1444
+ --form-field-font-size: var(--font-size-md);
1445
+ --form-field-badge-padding-y: var(--spacing-0-5);
1446
+ --form-field-badge-padding-x: var(--spacing-1);
1447
+ --list-multiselect-padding: var(--spacing-3);
1448
+ --list-dropdown-sub-item-padding-left: var(--spacing-10);
1449
+ --list-dropdown-separator-padding-y: var(--spacing-0-5);
1450
+ --list-dropdown-separator-padding-x: var(--spacing-0);
1451
+ --list-dropdown-padding: var(--spacing-2);
1452
+ --list-dropdown-radius: var(--radius-rounded-md);
1453
+ --list-dropdown-gap-y: var(--spacing-0-5);
1454
+ --list-dropdown-item-radius: var(--radius-rounded-md);
1455
+ --list-dropdown-item-gap-x: var(--spacing-3);
1456
+ --list-dropdown-item-padding-y: var(--spacing-2);
1457
+ --list-dropdown-item-padding-x: var(--spacing-2);
1458
+ --list-dropdown-item-padding-right: var(--spacing-2);
1459
+ --list-dropdown-item-padding-left: var(--spacing-8);
1460
+ --list-dropdown-line-height: var(--line-height-base);
1461
+ --list-dropdown-font-size: var(--font-size-md);
1462
+ --list-dropdown-icon-size: var(--spacing-5);
1428
1463
  --list-native-sub-item-padding-left: var(--spacing-8);
1429
1464
  --list-native-padding: var(--spacing-2);
1430
1465
  --list-native-radius: var(--radius-rounded-md);