@nova-design-system/nova-base 3.22.0 → 3.24.0

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 (19) hide show
  1. package/assets/icons/icon-sprite.svg +1 -1
  2. package/assets/nova-fonts.css +10 -1
  3. package/dist/cjs/generated/nova-tailwind-components.js +1 -2
  4. package/dist/css/nova-utils.css +1 -3
  5. package/dist/css/ocean.css +217 -108
  6. package/dist/css/spark.css +217 -108
  7. package/dist/generated/nova-tailwind-components.d.ts +0 -1
  8. package/dist/generated/nova-tailwind-components.js +1 -2
  9. package/dist/js/ocean_dark.d.ts +46 -30
  10. package/dist/js/ocean_dark.js +52 -36
  11. package/dist/js/ocean_light.d.ts +46 -30
  12. package/dist/js/ocean_light.js +46 -30
  13. package/dist/js/spacings.d.ts +123 -46
  14. package/dist/js/spacings.js +124 -47
  15. package/dist/js/spark_dark.d.ts +46 -30
  16. package/dist/js/spark_dark.js +53 -37
  17. package/dist/js/spark_light.d.ts +46 -30
  18. package/dist/js/spark_light.js +46 -30
  19. package/package.json +2 -1
package/assets/nova-fonts.css CHANGED
@@ -1,3 +1,12 @@
1
+ @import 'https://fonts.googleapis.com/css2?family=Outfit:wght@400&display=swap';
2
+
3
+ :root {
4
+ --font-family-base: 'TT Norms Pro', montserrat, sans-serif;
5
+ --nv-sidebarlogo-font-family: 'Outfit', var(--font-family-base);
6
+ --nv-sidebarlogo-font-weight: 400;
7
+ --nv-sidebarlogo-font-size: 2rem;
8
+ }
9
+
1
10
  body {
2
- font-family: 'TT Norms Pro', Arial, sans-serif;
11
+ font-family: var(--font-family-base);
3
12
  }
package/dist/cjs/generated/nova-tailwind-components.js CHANGED
@@ -131,7 +131,6 @@ exports.NOVA_TAILWIND_COMPONENTS = {
131
131
  'boxShadow': '0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)'
132
132
  },
133
133
  '.nv-fieldtext > .input-wrapper .input-container:has(input:read-only)': {
134
- 'opacity': '0.5',
135
134
  'backgroundColor': 'var(--components-form-field-background-readonly)',
136
135
  'borderColor': 'var(--nv-field-border-readonly)'
137
136
  },
@@ -151,7 +150,7 @@ exports.NOVA_TAILWIND_COMPONENTS = {
151
150
  'overflow': 'hidden',
152
151
  'backgroundColor': 'transparent',
153
152
  'color': 'var(--components-form-field-content-text)',
154
- 'padding': 'var(--form-field-padding-y) var(--form-field-padding-x)',
153
+ 'padding': 'calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x)',
155
154
  'fontSize': 'var(--form-field-font-size)',
156
155
  'fontStyle': 'normal',
157
156
  'fontWeight': 'var(--font-weight-medium-emphasis)',
package/dist/css/nova-utils.css CHANGED
@@ -7611,13 +7611,11 @@ h6 {
7611
7611
  }
7612
7612
 
7613
7613
  .nv-fieldtext > .input-wrapper .input-container:has(input:-moz-read-only) {
7614
- opacity: 0.5;
7615
7614
  background-color: var(--components-form-field-background-readonly);
7616
7615
  border-color: var(--nv-field-border-readonly);
7617
7616
  }
7618
7617
 
7619
7618
  .nv-fieldtext > .input-wrapper .input-container:has(input:read-only) {
7620
- opacity: 0.5;
7621
7619
  background-color: var(--components-form-field-background-readonly);
7622
7620
  border-color: var(--nv-field-border-readonly);
7623
7621
  }
@@ -7640,7 +7638,7 @@ h6 {
7640
7638
  overflow: hidden;
7641
7639
  background-color: transparent;
7642
7640
  color: var(--components-form-field-content-text);
7643
- padding: var(--form-field-padding-y) var(--form-field-padding-x);
7641
+ padding: calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x);
7644
7642
  font-size: var(--form-field-font-size);
7645
7643
  font-style: normal;
7646
7644
  font-weight: var(--font-weight-medium-emphasis);
package/dist/css/ocean.css CHANGED
@@ -9,15 +9,6 @@
9
9
  --components-button-destructive-low-background: rgba(255, 255, 255, 0);
10
10
  --components-button-destructive-medium-background: rgba(255, 255, 255, 0);
11
11
  --components-loader-white-background: rgba(255, 255, 255, 0.2);
12
- --components-list-native-item-background-title: rgba(255, 255, 255, 0);
13
- --components-list-native-item-background-disabled: rgba(255, 255, 255, 0);
14
- --components-list-native-item-background-hover: #4e7fdf;
15
- --components-list-native-item-background-default: rgba(255, 255, 255, 0);
16
- --components-list-native-item-content-disabled: rgba(255, 255, 255, 0.5);
17
- --components-list-native-border: #767578;
18
- --components-list-native-separator: #838086;
19
- --components-list-native-item-title-content: rgba(255, 255, 255, 0.5);
20
- --components-list-native-background: #565558;
21
12
  --components-form-opacity-disabled: 50%;
22
13
  --components-form-opacity-default: 100%;
23
14
  --components-button-gr-as-complementary-border-hover: rgba(255, 255, 255, 0);
@@ -66,7 +57,7 @@
66
57
  --color-transparent: rgba(255, 255, 255, 0);
67
58
  --color-white: #ffffff;
68
59
  --color-black: #000000;
69
- --color-interaction-container-neutral-background: rgba(255, 255, 255, 0);
60
+ --color-interaction-container-neutral-background: rgba(0, 0, 0, 0);
70
61
  --components-toggle-shape-hover: var(--color-gray-ocean-300);
71
62
  --components-toggle-shape-default: var(--color-gray-ocean-400);
72
63
  --components-toggle-background-disabled-checked: var(--color-gray-ocean-600);
@@ -77,8 +68,15 @@
77
68
  --components-toggle-border-default: var(--color-gray-ocean-400);
78
69
  --components-tooltip-border: var(--color-gray-ocean-50);
79
70
  --components-tooltip-background: var(--color-gray-ocean-50);
71
+ --components-splitter-old-border: var(--color-transparent);
72
+ --components-splitter-old-background: var(--color-interaction-container-neutral-background);
80
73
  --components-popover-background: var(--color-gray-ocean-900);
81
74
  --components-menu-contextual-item-background: var(--color-interaction-container-neutral-background);
75
+ --components-list-dropdown-group-title-background: var(--color-transparent);
76
+ --components-list-dropdown-item-background-disabled: var(--color-interaction-container-neutral-background);
77
+ --components-list-dropdown-item-background-default: var(--color-interaction-container-neutral-background);
78
+ --components-list-select-option-background-disabled: var(--color-interaction-container-neutral-background);
79
+ --components-list-select-option-background-default: var(--color-interaction-container-neutral-background);
82
80
  --components-field-time-background-default: var(--color-interaction-container-neutral-background);
83
81
  --components-datagrid-body-background-default: var(--color-interaction-container-neutral-background);
84
82
  --components-datagrid-header-background: var(--color-interaction-container-neutral-background);
@@ -104,11 +102,6 @@
104
102
  --components-loader-brand-foreground: var(--color-petrol-500);
105
103
  --components-loader-brand-background: var(--color-petrol-900);
106
104
  --components-loader-white-foreground: var(--color-base-white);
107
- --components-list-dropdown-group-title-background: var(--color-transparent);
108
- --components-list-dropdown-item-background-disabled: var(--color-interaction-container-neutral-background);
109
- --components-list-dropdown-item-background-default: var(--color-interaction-container-neutral-background);
110
- --components-list-native-item-content-hover: var(--color-base-white);
111
- --components-list-native-item-content-default: var(--color-base-white);
112
105
  --components-form-shape-foreground-default: var(--color-base-black);
113
106
  --components-form-shape-background-selected: var(--color-petrol-500);
114
107
  --components-form-shape-background-disabled: var(--color-gray-ocean-700);
@@ -341,9 +334,20 @@
341
334
  --components-toggle-border-default-checked: var(--color-interaction-container-branded-high-border);
342
335
  --components-tooltip-supporting-text: var(--color-content-inverted-medium-text);
343
336
  --components-tooltip-text: var(--color-content-inverted-high-text);
337
+ --components-splitter-handle-background-hover: var(--color-interaction-container-branded-high-background-active);
338
+ --components-splitter-handle-background-active: var(--color-interaction-container-branded-high-background-active);
339
+ --components-splitter-handle-background: var(--color-content-low-border);
340
+ --components-splitter-line-background-hover: var(--color-interaction-container-branded-low-background-active);
341
+ --components-splitter-line-background-active: var(--color-interaction-container-branded-high-background-active);
342
+ --components-splitter-line-background: var(--color-level-10-background);
343
+ --components-splitter-old-border-active: var(--color-interaction-container-neutral-border-active);
344
+ --components-splitter-old-background-active: var(--color-interaction-container-neutral-background-active);
344
345
  --components-slider-handler-border-focus: var(--components-form-field-background-checked);
345
346
  --components-slider-handler-background-focus: var(--components-form-field-background-checked);
346
347
  --components-slider-track-background: var(--color-content-low-border);
348
+ --components-sidebar-border: var(--color-content-low-border);
349
+ --components-sidebar-divider: var(--color-content-low-border);
350
+ --components-sidebar-background: var(--color-level-00-background);
347
351
  --components-popover-supporting-text: var(--color-content-low-text);
348
352
  --components-popover-text: var(--color-content-inverted-medium-text);
349
353
  --components-popover-border: var(--color-content-low-border);
@@ -369,6 +373,29 @@
369
373
  --components-menu-contextual-item-shortcut: var(--color-content-lower-text);
370
374
  --components-menu-contextual-border: var(--color-content-low-border);
371
375
  --components-menu-contextual-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-group-title-content: var(--color-content-medium-text);
379
+ --components-list-dropdown-item-background-active: var(--color-interaction-container-neutral-background-active);
380
+ --components-list-dropdown-item-description-disabled: var(--color-content-lower-text);
381
+ --components-list-dropdown-item-description-hover: var(--color-content-medium-text);
382
+ --components-list-dropdown-item-description-default: var(--color-content-low-text);
383
+ --components-list-dropdown-item-label-active: 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-item-border-active: var(--color-interaction-container-neutral-border-active);
388
+ --components-list-dropdown-header-background: var(--color-level-10-background);
389
+ --components-list-dropdown-background: var(--color-level-00-background);
390
+ --components-list-select-hr: var(--color-content-low-border);
391
+ --components-list-select-border: var(--color-content-low-border);
392
+ --components-list-select-optgroup-content: var(--color-content-lower-text);
393
+ --components-list-select-option-background-active: var(--color-interaction-container-neutral-background-active);
394
+ --components-list-select-option-content-active: var(--color-interaction-container-neutral-text-active);
395
+ --components-list-select-option-content-disabled: var(--color-content-lower-text);
396
+ --components-list-select-option-content-hover: var(--color-content-high-text);
397
+ --components-list-select-option-content-default: var(--color-content-medium-text);
398
+ --components-list-select-background: var(--color-level-00-background);
372
399
  --components-calendar-background: var(--color-level-00-background);
373
400
  --components-calendar-weeks-text-hover: var(--color-content-high-text);
374
401
  --components-calendar-weeks-text: var(--color-content-high-text);
@@ -403,7 +430,6 @@
403
430
  --components-buttongroup-high-background: var(--color-interaction-container-branded-high-background);
404
431
  --components-buttongroup-high-border: var(--color-interaction-container-branded-high-border);
405
432
  --components-breadcrumb-text-hover: var(--color-interaction-link-low-text-hover);
406
- --components-breadcrumb-text-active: var(--color-content-high-text);
407
433
  --components-avatar-content-10: var(--color-rainbow-10-icon);
408
434
  --components-avatar-content-9: var(--color-rainbow-9-text);
409
435
  --components-avatar-content-8: var(--color-rainbow-8-text);
@@ -459,20 +485,6 @@
459
485
  --components-button-destructive-lower-text: var(--color-dont-use-content);
460
486
  --components-button-destructive-lower-background-hover: var(--color-dont-use-background);
461
487
  --components-button-destructive-lower-background: var(--color-dont-use-background);
462
- --components-list-dropdown-border: var(--color-content-low-border);
463
- --components-list-dropdown-separator: var(--color-content-low-border);
464
- --components-list-dropdown-group-title-content: var(--color-content-medium-text);
465
- --components-list-dropdown-item-background-active: var(--color-interaction-container-neutral-background-active);
466
- --components-list-dropdown-item-description-disabled: var(--color-content-lower-text);
467
- --components-list-dropdown-item-description-hover: var(--color-content-medium-text);
468
- --components-list-dropdown-item-description-default: var(--color-content-low-text);
469
- --components-list-dropdown-item-label-active: var(--color-content-low-text);
470
- --components-list-dropdown-item-label-disabled: var(--color-content-low-text);
471
- --components-list-dropdown-item-label-hover: var(--color-content-high-text);
472
- --components-list-dropdown-item-label-default: var(--color-content-medium-text);
473
- --components-list-dropdown-item-border-active: var(--color-interaction-container-neutral-border-active);
474
- --components-list-dropdown-header-background: var(--color-level-10-background);
475
- --components-list-dropdown-background: var(--color-level-00-background);
476
488
  --components-form-shape-foreground-disabled-error: var(--color-feedback-error-low-icon);
477
489
  --components-form-shape-foreground-switch-dot: var(--color-content-medium-border);
478
490
  --components-form-shape-border-success: var(--color-feedback-success-low-border);
@@ -567,6 +579,8 @@
567
579
  --components-toggle-shape-disabled: var(--color-interaction-container-neutral-icon);
568
580
  --components-toggle-background-hover: var(--color-interaction-container-neutral-background-hover);
569
581
  --components-toggle-background-default: var(--color-interaction-container-branded-low-background);
582
+ --components-splitter-old-border-hover: var(--color-interaction-container-neutral-border-hover);
583
+ --components-splitter-old-background-hover: var(--color-interaction-container-neutral-background-hover);
570
584
  --components-slider-handler-border-readonly: var(--components-form-field-background-readonly);
571
585
  --components-slider-handler-border-disabled: var(--components-form-field-background-disabled);
572
586
  --components-slider-handler-border-error: var(--components-form-field-background-error);
@@ -586,6 +600,8 @@
586
600
  --components-menu-contextual-item-content-hover: var(--color-interaction-container-neutral-text-hover);
587
601
  --components-menu-contextual-item-content: var(--color-interaction-container-neutral-text);
588
602
  --components-menu-contextual-item-background-hover: var(--color-interaction-container-neutral-background-hover);
603
+ --components-list-dropdown-item-background-hover: var(--color-interaction-container-neutral-background-hover);
604
+ --components-list-select-option-background-hover: var(--color-interaction-container-neutral-background-hover);
589
605
  --components-calendar-cell-text-hover: var(--color-interaction-container-neutral-text-hover);
590
606
  --components-calendar-cell-text: var(--color-interaction-container-neutral-text);
591
607
  --components-calendar-cell-background-today: var(--color-interaction-container-branded-low-background);
@@ -598,8 +614,8 @@
598
614
  --components-buttongroup-lower-border: var(--color-interaction-container-neutral-border);
599
615
  --components-buttongroup-low-background: var(--color-interaction-container-branded-low-background);
600
616
  --components-buttongroup-medium-background: var(--color-interaction-container-branded-low-background);
617
+ --components-breadcrumb-text-current: var(--color-interaction-link-high-text-disabled);
601
618
  --components-breadcrumb-text: var(--color-interaction-link-low-text);
602
- --components-list-dropdown-item-background-hover: var(--color-interaction-container-neutral-background-hover);
603
619
  --components-form-shape-foreground-disabled: var(--components-form-shape-border-default);
604
620
  --components-button-medium-background: var(--color-interaction-container-branded-low-background);
605
621
  --components-button-lower-text-hover: var(--color-interaction-container-neutral-text-hover);
@@ -643,15 +659,6 @@
643
659
  --components-button-destructive-low-background: rgba(255, 255, 255, 0);
644
660
  --components-button-destructive-medium-background: rgba(255, 255, 255, 0);
645
661
  --components-loader-white-background: rgba(255, 255, 255, 0.2);
646
- --components-list-native-item-background-title: rgba(255, 255, 255, 0);
647
- --components-list-native-item-background-disabled: rgba(255, 255, 255, 0);
648
- --components-list-native-item-background-hover: #4e7fdf;
649
- --components-list-native-item-background-default: rgba(255, 255, 255, 0);
650
- --components-list-native-item-content-disabled: rgba(255, 255, 255, 0.5);
651
- --components-list-native-border: #767578;
652
- --components-list-native-separator: #838086;
653
- --components-list-native-item-title-content: rgba(255, 255, 255, 0.5);
654
- --components-list-native-background: #565558;
655
662
  --components-form-opacity-disabled: 50%;
656
663
  --components-form-opacity-default: 100%;
657
664
  --components-button-gr-as-complementary-border-hover: rgba(255, 255, 255, 0);
@@ -711,8 +718,15 @@
711
718
  --components-toggle-border-default: var(--color-gray-spark-300);
712
719
  --components-tooltip-border: var(--color-gray-ocean-900);
713
720
  --components-tooltip-background: var(--color-gray-ocean-900);
721
+ --components-splitter-old-border: var(--color-transparent);
722
+ --components-splitter-old-background: var(--color-interaction-container-neutral-background);
714
723
  --components-popover-background: var(--color-gray-ocean-00);
715
724
  --components-menu-contextual-item-background: var(--color-interaction-container-neutral-background);
725
+ --components-list-dropdown-group-title-background: var(--color-transparent);
726
+ --components-list-dropdown-item-background-disabled: var(--color-interaction-container-neutral-background);
727
+ --components-list-dropdown-item-background-default: var(--color-interaction-container-neutral-background);
728
+ --components-list-select-option-background-disabled: var(--color-interaction-container-neutral-background);
729
+ --components-list-select-option-background-default: var(--color-interaction-container-neutral-background);
716
730
  --components-field-time-background-default: var(--color-interaction-container-neutral-background);
717
731
  --components-datagrid-body-background-default: var(--color-interaction-container-neutral-background);
718
732
  --components-datagrid-header-background: var(--color-interaction-container-neutral-background);
@@ -738,11 +752,6 @@
738
752
  --components-loader-brand-foreground: var(--color-petrol-500);
739
753
  --components-loader-brand-background: var(--color-petrol-50);
740
754
  --components-loader-white-foreground: var(--color-base-white);
741
- --components-list-dropdown-group-title-background: var(--color-transparent);
742
- --components-list-dropdown-item-background-disabled: var(--color-interaction-container-neutral-background);
743
- --components-list-dropdown-item-background-default: var(--color-interaction-container-neutral-background);
744
- --components-list-native-item-content-hover: var(--color-base-white);
745
- --components-list-native-item-content-default: var(--color-base-white);
746
755
  --components-form-shape-foreground-default: var(--color-base-white);
747
756
  --components-form-shape-background-selected: var(--color-petrol-600);
748
757
  --components-form-shape-background-disabled: var(--color-gray-ocean-75);
@@ -975,9 +984,20 @@
975
984
  --components-toggle-border-default-checked: var(--color-interaction-container-branded-high-border);
976
985
  --components-tooltip-supporting-text: var(--color-content-inverted-medium-text);
977
986
  --components-tooltip-text: var(--color-content-inverted-high-text);
987
+ --components-splitter-handle-background-hover: var(--color-interaction-container-branded-high-background-active);
988
+ --components-splitter-handle-background-active: var(--color-interaction-container-branded-high-background-active);
989
+ --components-splitter-handle-background: var(--color-content-low-border);
990
+ --components-splitter-line-background-hover: var(--color-interaction-container-branded-low-background-active);
991
+ --components-splitter-line-background-active: var(--color-interaction-container-branded-high-background-active);
992
+ --components-splitter-line-background: var(--color-level-10-background);
993
+ --components-splitter-old-border-active: var(--color-interaction-container-neutral-border-active);
994
+ --components-splitter-old-background-active: var(--color-interaction-container-neutral-background-active);
978
995
  --components-slider-handler-border-focus: var(--components-form-field-background-checked);
979
996
  --components-slider-handler-background-focus: var(--components-form-field-background-checked);
980
997
  --components-slider-track-background: var(--color-content-low-border);
998
+ --components-sidebar-border: var(--color-content-low-border);
999
+ --components-sidebar-divider: var(--color-content-low-border);
1000
+ --components-sidebar-background: var(--color-level-00-background);
981
1001
  --components-popover-supporting-text: var(--color-content-low-text);
982
1002
  --components-popover-text: var(--color-content-medium-text);
983
1003
  --components-popover-border: var(--color-content-low-border);
@@ -1003,6 +1023,29 @@
1003
1023
  --components-menu-contextual-item-shortcut: var(--color-content-lower-text);
1004
1024
  --components-menu-contextual-border: var(--color-content-low-border);
1005
1025
  --components-menu-contextual-background: var(--color-level-00-background);
1026
+ --components-list-dropdown-border: var(--color-content-low-border);
1027
+ --components-list-dropdown-separator: var(--color-content-low-border);
1028
+ --components-list-dropdown-group-title-content: var(--color-content-medium-text);
1029
+ --components-list-dropdown-item-background-active: var(--color-interaction-container-neutral-background-active);
1030
+ --components-list-dropdown-item-description-disabled: var(--color-content-lower-text);
1031
+ --components-list-dropdown-item-description-hover: var(--color-content-medium-text);
1032
+ --components-list-dropdown-item-description-default: var(--color-content-low-text);
1033
+ --components-list-dropdown-item-label-active: var(--color-content-low-text);
1034
+ --components-list-dropdown-item-label-disabled: var(--color-content-low-text);
1035
+ --components-list-dropdown-item-label-hover: var(--color-content-high-text);
1036
+ --components-list-dropdown-item-label-default: var(--color-content-medium-text);
1037
+ --components-list-dropdown-item-border-active: var(--color-interaction-container-neutral-border-active);
1038
+ --components-list-dropdown-header-background: var(--color-level-10-background);
1039
+ --components-list-dropdown-background: var(--color-level-00-background);
1040
+ --components-list-select-hr: var(--color-content-low-border);
1041
+ --components-list-select-border: var(--color-content-low-border);
1042
+ --components-list-select-optgroup-content: var(--color-content-lower-text);
1043
+ --components-list-select-option-background-active: var(--color-interaction-container-neutral-background-active);
1044
+ --components-list-select-option-content-active: var(--color-interaction-container-neutral-text-active);
1045
+ --components-list-select-option-content-disabled: var(--color-content-lower-text);
1046
+ --components-list-select-option-content-hover: var(--color-content-high-text);
1047
+ --components-list-select-option-content-default: var(--color-content-medium-text);
1048
+ --components-list-select-background: var(--color-level-00-background);
1006
1049
  --components-calendar-background: var(--color-level-00-background);
1007
1050
  --components-calendar-weeks-text-hover: var(--color-content-high-text);
1008
1051
  --components-calendar-weeks-text: var(--color-content-high-text);
@@ -1037,7 +1080,6 @@
1037
1080
  --components-buttongroup-high-background: var(--color-interaction-container-branded-high-background);
1038
1081
  --components-buttongroup-high-border: var(--color-interaction-container-branded-high-border);
1039
1082
  --components-breadcrumb-text-hover: var(--color-interaction-link-low-text-hover);
1040
- --components-breadcrumb-text-active: var(--color-content-high-text);
1041
1083
  --components-avatar-content-10: var(--color-rainbow-10-icon);
1042
1084
  --components-avatar-content-9: var(--color-rainbow-9-text);
1043
1085
  --components-avatar-content-8: var(--color-rainbow-8-text);
@@ -1093,20 +1135,6 @@
1093
1135
  --components-button-destructive-lower-text: var(--color-dont-use-content);
1094
1136
  --components-button-destructive-lower-background-hover: var(--color-dont-use-background);
1095
1137
  --components-button-destructive-lower-background: var(--color-dont-use-background);
1096
- --components-list-dropdown-border: var(--color-content-low-border);
1097
- --components-list-dropdown-separator: var(--color-content-low-border);
1098
- --components-list-dropdown-group-title-content: var(--color-content-medium-text);
1099
- --components-list-dropdown-item-background-active: var(--color-interaction-container-neutral-background-active);
1100
- --components-list-dropdown-item-description-disabled: var(--color-content-lower-text);
1101
- --components-list-dropdown-item-description-hover: var(--color-content-medium-text);
1102
- --components-list-dropdown-item-description-default: var(--color-content-low-text);
1103
- --components-list-dropdown-item-label-active: var(--color-content-low-text);
1104
- --components-list-dropdown-item-label-disabled: var(--color-content-low-text);
1105
- --components-list-dropdown-item-label-hover: var(--color-content-high-text);
1106
- --components-list-dropdown-item-label-default: var(--color-content-medium-text);
1107
- --components-list-dropdown-item-border-active: var(--color-interaction-container-neutral-border-active);
1108
- --components-list-dropdown-header-background: var(--color-level-10-background);
1109
- --components-list-dropdown-background: var(--color-level-00-background);
1110
1138
  --components-form-shape-foreground-disabled-error: var(--color-feedback-error-low-icon);
1111
1139
  --components-form-shape-foreground-switch-dot: var(--color-content-medium-border);
1112
1140
  --components-form-shape-border-success: var(--color-feedback-success-low-border);
@@ -1201,6 +1229,8 @@
1201
1229
  --components-toggle-shape-disabled: var(--color-interaction-container-neutral-icon);
1202
1230
  --components-toggle-background-hover: var(--color-interaction-container-neutral-background-hover);
1203
1231
  --components-toggle-background-default: var(--color-interaction-container-branded-low-background);
1232
+ --components-splitter-old-border-hover: var(--color-interaction-container-neutral-border-hover);
1233
+ --components-splitter-old-background-hover: var(--color-interaction-container-neutral-background-hover);
1204
1234
  --components-slider-handler-border-readonly: var(--components-form-field-background-readonly);
1205
1235
  --components-slider-handler-border-disabled: var(--components-form-field-background-disabled);
1206
1236
  --components-slider-handler-border-error: var(--components-form-field-background-error);
@@ -1220,6 +1250,8 @@
1220
1250
  --components-menu-contextual-item-content-hover: var(--color-interaction-container-neutral-text-hover);
1221
1251
  --components-menu-contextual-item-content: var(--color-interaction-container-neutral-text);
1222
1252
  --components-menu-contextual-item-background-hover: var(--color-interaction-container-neutral-background-hover);
1253
+ --components-list-dropdown-item-background-hover: var(--color-interaction-container-neutral-background-hover);
1254
+ --components-list-select-option-background-hover: var(--color-interaction-container-neutral-background-hover);
1223
1255
  --components-calendar-cell-text-hover: var(--color-interaction-container-neutral-text-hover);
1224
1256
  --components-calendar-cell-text: var(--color-interaction-container-neutral-text);
1225
1257
  --components-calendar-cell-background-today: var(--color-interaction-container-branded-low-background);
@@ -1232,8 +1264,8 @@
1232
1264
  --components-buttongroup-lower-border: var(--color-interaction-container-neutral-border);
1233
1265
  --components-buttongroup-low-background: var(--color-interaction-container-branded-low-background);
1234
1266
  --components-buttongroup-medium-background: var(--color-interaction-container-branded-low-background);
1267
+ --components-breadcrumb-text-current: var(--color-interaction-link-high-text-disabled);
1235
1268
  --components-breadcrumb-text: var(--color-interaction-link-low-text);
1236
- --components-list-dropdown-item-background-hover: var(--color-interaction-container-neutral-background-hover);
1237
1269
  --components-form-shape-foreground-disabled: var(--components-form-shape-border-default);
1238
1270
  --components-button-medium-background: var(--color-interaction-container-branded-low-background);
1239
1271
  --components-button-lower-text-hover: var(--color-interaction-container-neutral-text-hover);
@@ -1531,7 +1563,6 @@
1531
1563
  */
1532
1564
 
1533
1565
  :root {
1534
- --slider-tick-radius: 1.0000px;
1535
1566
  --global-typography-legend-font-style: uppercase;
1536
1567
  --global-typography-label-font-style: normal;
1537
1568
  --global-typography-small-font-style: normal;
@@ -1559,22 +1590,42 @@
1559
1590
  --togglegroup-xs-button-radius: 1.0000px;
1560
1591
  --togglegroup-xs-button-padding-y: 1.0000px;
1561
1592
  --togglegroup-xs-padding: 3.0000px;
1593
+ --splitter-old-stroke: 1.0000px;
1594
+ --slider-tick-radius: 1.0000px;
1595
+ --sidebar-reduced-width: 68.0000px;
1596
+ --sidebar-notification-bullet-font-size: 9.0000px;
1597
+ --sidebar-width: 312.0000px;
1562
1598
  --popover-shadow-2-x: 0.0000px;
1563
1599
  --popover-shadow-1-blur: 1.0000px;
1564
1600
  --popover-shadow-1-x: 0.0000px;
1565
1601
  --popover-font-weight: 500;
1602
+ --navigation-primary-notification-bullet-font-size: 9.0000px;
1603
+ --navigation-reduced-max-width: 100.0000px;
1604
+ --navigation-width: 312.0000px;
1566
1605
  --menu-contextual-item-font-weight: 500;
1567
1606
  --menu-contextual-divider-padding-bottom: 3.0000px;
1568
1607
  --form-max-width: 480.0000px;
1569
1608
  --form-field-badge-gap: 0.0000px;
1570
- --list-native-separator-padding-y: 3.0000px;
1571
- --list-native-separator-padding-x: 9.0000px;
1609
+ --list-select-hr-padding-y: 3.0000px;
1610
+ --list-select-hr-padding-x: 9.0000px;
1572
1611
  --icon-stroke-xl: 1.9000px;
1573
1612
  --icon-stroke-lg: 1.8000px;
1574
1613
  --icon-stroke-md: 1.6000px;
1575
1614
  --icon-stroke-sm: 1.4000px;
1576
1615
  --icon-stroke-xs: 1.2000px;
1577
1616
  --calendar-cell-dot-size: 3.0000px;
1617
+ --drawer-size-full-width: 1372.0000px;
1618
+ --drawer-size-lg-max-width: 1024.0000px;
1619
+ --drawer-size-lg-width: 992.0000px;
1620
+ --drawer-size-lg-min-width: 960.0000px;
1621
+ --drawer-size-md-max-width: 960.0000px;
1622
+ --drawer-size-md-width: 800.0000px;
1623
+ --drawer-size-md-min-width: 640.0000px;
1624
+ --drawer-size-sm-max-width: 480.0000px;
1625
+ --drawer-size-sm-width: 400.0000px;
1626
+ --drawer-size-sm-min-width: 320.0000px;
1627
+ --drawer-radius-top-right: 0.0000px;
1628
+ --drawer-radius-bottom-right: 0.0000px;
1578
1629
  --button-lg-ring-radius: 9.0000px;
1579
1630
  --button-md-ring-radius: 7.0000px;
1580
1631
  --button-sm-ring-radius: 5.0000px;
@@ -1590,6 +1641,17 @@
1590
1641
  --buttongroup-sm-button-padding-y: 4.0000px;
1591
1642
  --buttongroup-xs-button-radius: 1.0000px;
1592
1643
  --buttongroup-xs-padding: 2.0000px;
1644
+ --avatar-xl-font-size: 28.0000px;
1645
+ --avatar-lg-font-size: 22.0000px;
1646
+ --avatar-md-font-size: 18.0000px;
1647
+ --avatar-sm-font-size: 13.0000px;
1648
+ --avatar-xs-font-size: 10.0000px;
1649
+ --splitter-handle-radius: var(--radius-rounded-md);
1650
+ --splitter-handle-wide-hover: var(--spacing-2);
1651
+ --splitter-handle-wide: var(--spacing-1);
1652
+ --splitter-handle-long: var(--spacing-6);
1653
+ --splitter-gutter: var(--spacing-6);
1654
+ --splitter-line-width: var(--spacing-1);
1593
1655
  --pagination-table-padding-y: var(--spacing-2);
1594
1656
  --pagination-table-padding-x: var(--spacing-3);
1595
1657
  --pagination-table-padding-left: var(--spacing-3);
@@ -1615,14 +1677,6 @@
1615
1677
  --notification-gap-x-title: var(--spacing-2);
1616
1678
  --notification-gap-x: var(--spacing-3);
1617
1679
  --notification-icon-size: var(--spacing-5);
1618
- --navigation-primary-item-bullet-size: var(--spacing-5);
1619
- --navigation-primary-item-bullet-font-size: var(--font-size-xs);
1620
- --navigation-primary-item-radius: var(--radius-rounded-md);
1621
- --navigation-primary-item-icon-size: var(--spacing-5);
1622
- --navigation-primary-item-font-size: var(--font-size-md);
1623
- --navigation-primary-item-padding-y: var(--spacing-2);
1624
- --navigation-primary-item-padding-x: var(--spacing-3);
1625
- --navigation-primary-item-gap-x: var(--spacing-2);
1626
1680
  --loader-size-xl: var(--spacing-8);
1627
1681
  --loader-size-lg: var(--spacing-7);
1628
1682
  --loader-size-md: var(--spacing-6);
@@ -1664,21 +1718,6 @@
1664
1718
  --badge-height: var(--spacing-6);
1665
1719
  --badge-gap-icon-only-x: var(--spacing-0-5);
1666
1720
  --badge-gap-x: var(--spacing-1);
1667
- --avatar-xl-size: var(--spacing-16);
1668
- --avatar-xl-icon-size: var(--spacing-11);
1669
- --avatar-xl-font-size: var(--spacing-8);
1670
- --avatar-lg-size: var(--spacing-12);
1671
- --avatar-lg-icon-size: var(--spacing-8);
1672
- --avatar-lg-font-size: var(--spacing-6);
1673
- --avatar-md-size: var(--spacing-10);
1674
- --avatar-md-icon-size: var(--spacing-7);
1675
- --avatar-md-font-size: var(--spacing-5);
1676
- --avatar-sm-size: var(--spacing-8);
1677
- --avatar-sm-icon-size: var(--spacing-5);
1678
- --avatar-sm-font-size: var(--spacing-4);
1679
- --avatar-xs-size: var(--spacing-6);
1680
- --avatar-xs-icon-size: var(--spacing-4);
1681
- --avatar-xs-font-size: var(--spacing-3);
1682
1721
  --alert-message-line-height: var(--line-height-sm);
1683
1722
  --alert-message-font-weight: var(--font-weight-low-emphasis);
1684
1723
  --alert-message-font-size: var(--font-size-sm);
@@ -1693,15 +1732,6 @@
1693
1732
  --alert-icon-position-x: var(--spacing-4);
1694
1733
  --alert-gap-x: var(--spacing-3);
1695
1734
  --alert-icon-size: var(--spacing-5);
1696
- --slider-track-radius: var(--radius-rounded-sm);
1697
- --slider-track-padding-x: var(--spacing-3);
1698
- --slider-track-height: var(--spacing-1);
1699
- --slider-handler-stroke: var(--spacing-0-5);
1700
- --slider-handler-size-inner: var(--spacing-4);
1701
- --slider-handler-size-max: var(--spacing-6);
1702
- --slider-handler-size-min: var(--spacing-5);
1703
- --slider-tick-width: var(--spacing-0-5);
1704
- --slider-tick-height: var(--spacing-1);
1705
1735
  --global-typography-legend-font-weight: var(--font-weight-medium-emphasis);
1706
1736
  --global-typography-legend-line-height: var(--line-height-xs);
1707
1737
  --global-typography-legend-font-size: var(--font-size-xs);
@@ -1737,6 +1767,8 @@
1737
1767
  --tooltip-padding-y: var(--spacing-3);
1738
1768
  --tooltip-padding-x: var(--spacing-3);
1739
1769
  --tooltip-font-size: var(--font-size-sm);
1770
+ --togglegroup-inner-space: var(--spacing-1-5);
1771
+ --togglegroup-stroke: var(--spacing-px);
1740
1772
  --togglegroup-lg-height: var(--spacing-12);
1741
1773
  --togglegroup-lg-gap: var(--spacing-0-5);
1742
1774
  --togglegroup-lg-radius: var(--radius-rounded-lg);
@@ -1749,6 +1781,47 @@
1749
1781
  --togglegroup-xs-height: var(--spacing-6);
1750
1782
  --togglegroup-xs-gap: var(--spacing-0-5);
1751
1783
  --togglegroup-xs-radius: var(--radius-rounded-sm);
1784
+ --splitter-old-handler-radius: var(--radius-rounded-md);
1785
+ --splitter-old-handler-wide: var(--spacing-3);
1786
+ --splitter-old-handler-long: var(--spacing-6);
1787
+ --slider-track-radius: var(--radius-rounded-sm);
1788
+ --slider-track-padding-x: var(--spacing-3);
1789
+ --slider-track-height: var(--spacing-1);
1790
+ --slider-handler-size-inner: var(--spacing-4);
1791
+ --slider-handler-size-max: var(--spacing-6);
1792
+ --slider-handler-size-min: var(--spacing-5);
1793
+ --slider-handler-stroke: var(--spacing-0-5);
1794
+ --slider-tick-width: var(--spacing-0-5);
1795
+ --slider-tick-height: var(--spacing-1);
1796
+ --sidebar-divider-size: var(--spacing-px);
1797
+ --sidebar-sub-item-padding-left: var(--spacing-7);
1798
+ --sidebar-item-radius: var(--radius-rounded-md);
1799
+ --sidebar-item-padding-y-collapsed: var(--spacing-2-5);
1800
+ --sidebar-item-padding-y: var(--spacing-2);
1801
+ --sidebar-item-padding-x-collapsed: var(--spacing-2-5);
1802
+ --sidebar-item-padding-x: var(--spacing-3);
1803
+ --sidebar-item-icon-size: var(--spacing-5);
1804
+ --sidebar-item-gap-x: var(--spacing-2);
1805
+ --sidebar-item-font-size: var(--font-size-md);
1806
+ --sidebar-title-padding-y: var(--spacing-1);
1807
+ --sidebar-title-padding-x: var(--spacing-3);
1808
+ --sidebar-title-font-size: var(--font-size-sm);
1809
+ --sidebar-collapsible-button-position-right: var(--spacing-4);
1810
+ --sidebar-collapsible-button-position-top: var(--spacing-8);
1811
+ --sidebar-collapsible-button-padding: var(--spacing-2);
1812
+ --sidebar-collapsible-button-icon-size: var(--spacing-4);
1813
+ --sidebar-section-gap-y-collapsed: var(--spacing-1);
1814
+ --sidebar-section-gap-y: var(--spacing-0-5);
1815
+ --sidebar-group-gap-y: var(--spacing-1);
1816
+ --sidebar-footer-gap-y: var(--spacing-5);
1817
+ --sidebar-width-collapsed: var(--spacing-20);
1818
+ --sidebar-padding-y: var(--spacing-6);
1819
+ --sidebar-padding-x-collapsed: var(--spacing-5);
1820
+ --sidebar-padding-x: var(--spacing-6);
1821
+ --sidebar-gap-y: var(--spacing-3);
1822
+ --sidebar-notification-bullet-size-reduced: var(--spacing-1-5);
1823
+ --sidebar-notification-bullet-size: var(--spacing-4);
1824
+ --sidebar-notification-bullet-font-weight: var(--font-weight-medium-emphasis);
1752
1825
  --popover-radius: var(--radius-rounded-md);
1753
1826
  --popover-padding-y: var(--spacing-2);
1754
1827
  --popover-padding-x: var(--spacing-2);
@@ -1761,6 +1834,21 @@
1761
1834
  --popover-shadow-1-opacity: var(--shadow-color-opacity-3);
1762
1835
  --popover-shadow-1-spread: var(--shadow-spread-lg-1);
1763
1836
  --popover-shadow-1-y: var(--shadow-y-axis-none);
1837
+ --navigation-gap-y: var(--spacing-3);
1838
+ --navigation-primary-separator-size: var(--spacing-px);
1839
+ --navigation-primary-sub-item-padding-left-x: var(--spacing-7);
1840
+ --navigation-primary-item-radius: var(--radius-rounded-md);
1841
+ --navigation-primary-item-icon-size: var(--spacing-5);
1842
+ --navigation-primary-item-font-size: var(--font-size-md);
1843
+ --navigation-primary-item-padding-y: var(--spacing-2);
1844
+ --navigation-primary-item-padding-x: var(--spacing-3);
1845
+ --navigation-primary-item-gap-x: var(--spacing-2);
1846
+ --navigation-primary-title-font-size: var(--font-size-sm);
1847
+ --navigation-primary-title-padding-y: var(--spacing-1);
1848
+ --navigation-primary-title-padding-x: var(--spacing-3);
1849
+ --navigation-primary-notification-bullet-font-weight: var(--font-weight-medium-emphasis);
1850
+ --navigation-primary-notification-bullet-size-reduced: var(--spacing-1-5);
1851
+ --navigation-primary-notification-bullet-size: var(--spacing-4);
1764
1852
  --menu-contextual-radius: var(--radius-rounded-md);
1765
1853
  --menu-contextual-padding-y: var(--spacing-1);
1766
1854
  --menu-contextual-padding-x: var(--spacing-1);
@@ -1822,7 +1910,7 @@
1822
1910
  --form-field-badge-padding-y: var(--spacing-0-5);
1823
1911
  --form-field-badge-padding-x: var(--spacing-1);
1824
1912
  --list-multiselect-padding: var(--spacing-3);
1825
- --list-dropdown-sub-item-padding-left: var(--spacing-10);
1913
+ --list-dropdown-sub-item-padding-left: var(--spacing-4);
1826
1914
  --list-dropdown-separator-padding-y: var(--spacing-0-5);
1827
1915
  --list-dropdown-separator-padding-x: var(--spacing-0);
1828
1916
  --list-dropdown-padding: var(--spacing-2);
@@ -1837,17 +1925,20 @@
1837
1925
  --list-dropdown-line-height: var(--line-height-base);
1838
1926
  --list-dropdown-font-size: var(--font-size-md);
1839
1927
  --list-dropdown-icon-size: var(--spacing-5);
1840
- --list-native-sub-item-padding-left: var(--spacing-8);
1841
- --list-native-padding: var(--spacing-2);
1842
- --list-native-radius: var(--radius-rounded-md);
1843
- --list-native-gap-y: var(--spacing-0-5);
1844
- --list-native-item-radius: var(--radius-rounded-md);
1845
- --list-native-item-padding-y: var(--spacing-0);
1846
- --list-native-item-padding-right: var(--spacing-2);
1847
- --list-native-item-padding-left: var(--spacing-5);
1848
- --list-native-line-height: var(--line-height-base);
1849
- --list-native-font-size: var(--font-size-md);
1850
- --list-native-icon-size: var(--spacing-5);
1928
+ --list-select-optgroup-padding-y: var(--spacing-2);
1929
+ --list-select-optgroup-gap: var(--spacing-0-5);
1930
+ --list-select-optgroup-option-margin-top: var(--spacing-1);
1931
+ --list-select-optgroup-option-padding-left: var(--spacing-5);
1932
+ --list-select-padding: var(--spacing-2);
1933
+ --list-select-radius: var(--radius-rounded-md);
1934
+ --list-select-gap-y: var(--spacing-0-5);
1935
+ --list-select-option-radius: var(--radius-rounded-md);
1936
+ --list-select-option-padding: var(--spacing-2);
1937
+ --list-select-option-padding-right: var(--spacing-2);
1938
+ --list-select-option-padding-left: var(--spacing-5);
1939
+ --list-select-line-height: var(--line-height-base);
1940
+ --list-select-font-size: var(--font-size-md);
1941
+ --list-select-icon-size: var(--spacing-5);
1851
1942
  --icon-size-xl: var(--spacing-7);
1852
1943
  --icon-size-lg: var(--spacing-6);
1853
1944
  --icon-size-md: var(--spacing-5);
@@ -1876,6 +1967,14 @@
1876
1967
  --calendar-cell-line-height: var(--line-height-sm);
1877
1968
  --calendar-cell-font-weight: var(--font-weight-low-emphasis);
1878
1969
  --calendar-cell-font-size: var(--font-size-sm);
1970
+ --drawer-padding-y: var(--spacing-6);
1971
+ --drawer-padding-x: var(--spacing-6);
1972
+ --drawer-header-padding-right: var(--spacing-8);
1973
+ --drawer-gap-y: var(--spacing-6);
1974
+ --drawer-dismissible-position-right: var(--spacing-6);
1975
+ --drawer-dismissible-position-top: var(--spacing-6);
1976
+ --drawer-radius-top-left: var(--radius-rounded-2xl);
1977
+ --drawer-radius-bottom-left: var(--radius-rounded-2xl);
1879
1978
  --button-lg-padding-y: var(--spacing-2-5);
1880
1979
  --button-lg-padding-x: var(--spacing-4);
1881
1980
  --button-lg-line-height: var(--line-height-lg);
@@ -1925,5 +2024,15 @@
1925
2024
  --buttongroup-xs-gap: var(--spacing-px);
1926
2025
  --buttongroup-xs-radius: var(--radius-rounded-sm);
1927
2026
  --buttongroup-xs-button-padding-y: var(--spacing-0-5);
2027
+ --avatar-xl-size: var(--spacing-16);
2028
+ --avatar-xl-icon-size: var(--spacing-11);
2029
+ --avatar-lg-size: var(--spacing-12);
2030
+ --avatar-lg-icon-size: var(--spacing-8);
2031
+ --avatar-md-size: var(--spacing-10);
2032
+ --avatar-md-icon-size: var(--spacing-7);
2033
+ --avatar-sm-size: var(--spacing-8);
2034
+ --avatar-sm-icon-size: var(--spacing-5);
2035
+ --avatar-xs-size: var(--spacing-6);
2036
+ --avatar-xs-icon-size: var(--spacing-4);
1928
2037
  }
1929
2038