@wix/design-system-tokens 1.220.1 → 1.221.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 (27) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/all.css +28 -3
  3. package/all.scss +25 -0
  4. package/all.st.css +50 -0
  5. package/component.st.css +48 -0
  6. package/foundation.st.css +2 -0
  7. package/odeditor/all.css +30 -5
  8. package/odeditor/all.scss +27 -2
  9. package/odeditor/all.st.css +52 -2
  10. package/odeditor/component.st.css +50 -2
  11. package/odeditor/foundation.st.css +2 -0
  12. package/odeditor-dark/all.css +30 -5
  13. package/odeditor-dark/all.scss +27 -2
  14. package/odeditor-dark/all.st.css +52 -2
  15. package/odeditor-dark/component.st.css +50 -2
  16. package/odeditor-dark/foundation.st.css +2 -0
  17. package/package.json +2 -2
  18. package/studio/all.css +28 -3
  19. package/studio/all.scss +25 -0
  20. package/studio/all.st.css +50 -0
  21. package/studio/component.st.css +48 -0
  22. package/studio/foundation.st.css +2 -0
  23. package/wixel/all.css +28 -3
  24. package/wixel/all.scss +25 -0
  25. package/wixel/all.st.css +50 -0
  26. package/wixel/component.st.css +48 -0
  27. package/wixel/foundation.st.css +2 -0
package/CHANGELOG.md CHANGED
@@ -1,3 +1,23 @@
1
+ ## 1.221.0
2
+
3
+ ### Minor Changes
4
+
5
+ - [#16749](https://github.com/wix-private/wix-design-systems/pull/16749) [`6c581a4`](https://github.com/wix-private/wix-design-systems/commit/6c581a4dbdcfa28f8f84bbb5570a754a894ebbda) - Add `--wds-internal-animations-enabled`, an internal flag declaring whether the loaded theme uses expressive motion (`true` in Harmony (odeditor), `false` elsewhere). Not part of the public theming contract.
6
+
7
+ ## 1.220.2
8
+
9
+ ### Patch Changes
10
+
11
+ - [#16713](https://github.com/wix-private/wix-design-systems/pull/16713) [`67029ed`](https://github.com/wix-private/wix-design-systems/commit/67029ed65a22a98c1e6fdb744bb1e5d5c6963610) - `SidebarDividerNext` uses 12px block and 8px inline padding in Harmony (odeditor) and Studio 2.0 (odeditor-dark) (`--wds-sidebar-divider-padding-*`), and the vertical rule third-level sidebar items used to render is hidden (`--wds-sidebar-item-level-3-divider-display`).
12
+
13
+ - [#16713](https://github.com/wix-private/wix-design-systems/pull/16713) [`67029ed`](https://github.com/wix-private/wix-design-systems/commit/67029ed65a22a98c1e6fdb744bb1e5d5c6963610) - Sidebar item hover and selected fills are a step darker in Harmony (odeditor) and Studio 2.0 (odeditor-dark) to match the spec: hover is now #E8E7E7 and selected #DEDEDE, at every nesting level (`--wds-sidebar-item-level-1-fill-light-hover`, `--wds-sidebar-item-level-1-fill-light-active`).
14
+
15
+ - [#16713](https://github.com/wix-private/wix-design-systems/pull/16713) [`67029ed`](https://github.com/wix-private/wix-design-systems/commit/67029ed65a22a98c1e6fdb744bb1e5d5c6963610) - Sidebar items below the first level render at 14px/18px instead of 12px/15px in Harmony (odeditor) and Studio 2.0 (odeditor-dark), so every row is 30px tall instead of 27px (`--wds-sidebar-item-text-font-size`, `--wds-sidebar-item-text-line-height`). A label too long for its row is now truncated with an ellipsis on one line rather than wrapping onto a second (`--wds-sidebar-item-text-line-clamp`).
16
+
17
+ - [#16713](https://github.com/wix-private/wix-design-systems/pull/16713) [`67029ed`](https://github.com/wix-private/wix-design-systems/commit/67029ed65a22a98c1e6fdb744bb1e5d5c6963610) - The minimized sidebar rail is 62px wide in Harmony (odeditor) and Studio 2.0 (odeditor-dark) instead of 54px (`--wds-sidebar-minimized-width`), and its items are inset symmetrically so a hovered item reads as a centred 34px button rather than a full-width bar (`--wds-sidebar-minimized-padding-inline`). Default, Studio and Wixel keep the 54px rail.
18
+
19
+ - [#16713](https://github.com/wix-private/wix-design-systems/pull/16713) [`67029ed`](https://github.com/wix-private/wix-design-systems/commit/67029ed65a22a98c1e6fdb744bb1e5d5c6963610) - SidebarNext spacing now follows the BM Reimagined spec in Harmony (odeditor) and Studio 2.0 (odeditor-dark). The shell has insets of 24px top and bottom, 12px start and 6px end (`--wds-sidebar-padding-*`), so items sit 229px wide inside a 255px sidebar instead of running edge to edge. First-level items indent 8px with an icon and 14px without, second-level items 42px and third-level 52px (`--wds-sidebar-item-level-*-indent`), each with an 8px inline-end inset (`--wds-sidebar-item-padding-inline-end`). The gap between a first-level icon and its label narrows from 12px to 8px (`--wds-sidebar-item-prefix-gap`) and gaps between suffix elements widen from 6px to 10px (`--wds-sidebar-item-suffix-gap`).
20
+
1
21
  ## 1.220.1
2
22
 
3
23
  ## 1.220.0
package/all.css CHANGED
@@ -286,13 +286,13 @@
286
286
  --wds-toggle-button-shadow-spread-tertiary: -0.75px;
287
287
  --wds-toggle-button-shadow-spread-secondary: -1.5px;
288
288
  --wds-tabs-selection-height: 3px;
289
- --wds-table-toolbar-padding-block-end: 15px;
290
289
  --wds-table-toolbar-padding-block-start: 15px;
290
+ --wds-table-toolbar-padding-block-end: 15px;
291
+ --wds-table-toolbar-item-gap: 12px;
292
+ --wds-table-toolbar-icon-button-gap: 6px;
291
293
  --wds-table-toolbar-divider-gap-group-start: 24px;
292
294
  --wds-table-toolbar-divider-gap: 12px;
293
- --wds-table-toolbar-icon-button-gap: 6px;
294
295
  --wds-table-toolbar-button-gap: 6px;
295
- --wds-table-toolbar-item-gap: 12px;
296
296
  --wds-swatches-swatch-active-border-radius-small: 5px;
297
297
  --wds-swatches-swatch-active-border-radius-medium: 9px;
298
298
  --wds-status-toast-width: 600px;
@@ -315,12 +315,16 @@
315
315
  --wds-sidebar-scrollbar-fill-dark-active: #b8b9bc;
316
316
  --wds-sidebar-minimize-tooltip-fill-dark-default: #333850;
317
317
  --wds-sidebar-minimize-action-fill-dark-default: #42454C;
318
+ --wds-sidebar-item-text-line-clamp: 2;
318
319
  --wds-sidebar-item-text-dark-disabled: #898B8F;
320
+ --wds-sidebar-item-level-3-divider-display: block;
319
321
  --wds-sidebar-item-level-2-fill-light-default: #EAF7FF;
320
322
  --wds-sidebar-item-level-2-fill-dark-default: #1F222B;
321
323
  --wds-sidebar-item-level-1-fill-dark-hover: #2B2E36;
322
324
  --wds-sidebar-item-level-1-fill-dark-default: #131720;
323
325
  --wds-sidebar-item-level-1-fill-dark-active: #42454C;
326
+ --wds-sidebar-divider-padding-top: 8px;
327
+ --wds-sidebar-divider-padding-inline: 20px;
324
328
  --wds-sidebar-divider-fill-dark-default: #42454C;
325
329
  --wds-sidebar-clear-button-fill: #5a5d63;
326
330
  --wds-side-panel-standard-shadow: none;
@@ -354,6 +358,7 @@
354
358
  --wds-loader-stroke-width-large: 4px;
355
359
  --wds-list-item-select-min-height-medium: auto;
356
360
  --wds-list-item-action-subtitle-offset: 0px;
361
+ --wds-internal-animations-enabled: false;
357
362
  --wds-internal-thumbnail-illustration-size-tiny: 38px;
358
363
  --wds-internal-thumbnail-illustration-size-small: 51px;
359
364
  --wds-internal-thumbnail-illustration-size-medium: 72px;
@@ -1062,7 +1067,13 @@
1062
1067
  --wds-skeleton-border-radius-rectangle: var(--wds-border-radius-300);
1063
1068
  --wds-skeleton-border-radius-line: var(--wds-border-radius-full);
1064
1069
  --wds-skeleton-border-radius-circle: var(--wds-border-radius-full);
1070
+ --wds-sidebar-padding-top: var(--wds-space-0);
1071
+ --wds-sidebar-padding-start: var(--wds-space-0);
1072
+ --wds-sidebar-padding-end: var(--wds-space-0);
1073
+ --wds-sidebar-padding-bottom: var(--wds-space-0);
1065
1074
  --wds-sidebar-navigation-arrow-fill-neutral: var(--wds-color-black-100);
1075
+ --wds-sidebar-minimized-width: var(--wds-space-900);
1076
+ --wds-sidebar-minimized-padding-inline: var(--wds-space-0);
1066
1077
  --wds-sidebar-minimize-tooltip-text-neutral-default: var(--wds-color-black-200);
1067
1078
  --wds-sidebar-minimize-tooltip-text-light-default: var(--wds-color-black-200);
1068
1079
  --wds-sidebar-minimize-tooltip-text-dark-default: var(--wds-color-white);
@@ -1074,17 +1085,24 @@
1074
1085
  --wds-sidebar-minimize-action-fill-neutral-default: var(--wds-color-blue-400);
1075
1086
  --wds-sidebar-minimize-action-fill-light-default: var(--wds-color-blue-400);
1076
1087
  --wds-sidebar-item-title: var(--wds-color-black-400);
1088
+ --wds-sidebar-item-text-line-height: var(--wds-space-250);
1077
1089
  --wds-sidebar-item-text-neutral-active: var(--wds-color-blue-0);
1078
1090
  --wds-sidebar-item-text-light-active: var(--wds-color-blue-0);
1079
1091
  --wds-sidebar-item-text-dark-default: var(--wds-color-black-550);
1080
1092
  --wds-sidebar-item-text-dark-active: var(--wds-color-white);
1093
+ --wds-sidebar-item-suffix-gap: var(--wds-space-100);
1094
+ --wds-sidebar-item-prefix-gap: var(--wds-space-200);
1081
1095
  --wds-sidebar-item-prefix-padding-end: var(--wds-space-200);
1096
+ --wds-sidebar-item-padding-inline-end: var(--wds-space-300);
1082
1097
  --wds-sidebar-item-minimized-paddings-vertical: var(--wds-space-150);
1083
1098
  --wds-sidebar-item-minimized-paddings-horizontal: var(--wds-space-300);
1084
1099
  --wds-sidebar-item-level-3-padding-top: var(--wds-space-100);
1085
1100
  --wds-sidebar-item-level-3-padding-start: var(--wds-space-900);
1086
1101
  --wds-sidebar-item-level-3-padding-end: var(--wds-space-300);
1087
1102
  --wds-sidebar-item-level-3-padding-bottom: var(--wds-space-100);
1103
+ --wds-sidebar-item-level-3-indent-with-prefix: var(--wds-space-800);
1104
+ --wds-sidebar-item-level-3-indent-first-level-with-prefix: var(--wds-space-900);
1105
+ --wds-sidebar-item-level-3-indent: var(--wds-space-500);
1088
1106
  --wds-sidebar-item-level-3-divider-padding-top: var(--wds-space-150);
1089
1107
  --wds-sidebar-item-level-3-divider-padding-end: var(--wds-space-200);
1090
1108
  --wds-sidebar-item-level-3-divider-padding-bottom: var(--wds-space-150);
@@ -1092,11 +1110,16 @@
1092
1110
  --wds-sidebar-item-level-2-padding-start: var(--wds-space-900);
1093
1111
  --wds-sidebar-item-level-2-padding-end: var(--wds-space-300);
1094
1112
  --wds-sidebar-item-level-2-padding-bottom: var(--wds-space-100);
1113
+ --wds-sidebar-item-level-2-indent-with-prefix: var(--wds-space-300);
1114
+ --wds-sidebar-item-level-2-indent-first-level-with-prefix: var(--wds-space-900);
1115
+ --wds-sidebar-item-level-2-indent: var(--wds-space-500);
1095
1116
  --wds-sidebar-item-level-2-fill-neutral-default: var(--wds-color-black-700);
1096
1117
  --wds-sidebar-item-level-1-padding-top: var(--wds-space-150);
1097
1118
  --wds-sidebar-item-level-1-padding-start: var(--wds-space-400);
1098
1119
  --wds-sidebar-item-level-1-padding-end: var(--wds-space-300);
1099
1120
  --wds-sidebar-item-level-1-padding-bottom: var(--wds-space-150);
1121
+ --wds-sidebar-item-level-1-indent-with-prefix: var(--wds-space-300);
1122
+ --wds-sidebar-item-level-1-indent: var(--wds-space-400);
1100
1123
  --wds-sidebar-item-level-1-fill-neutral-hover: var(--wds-color-blue-400);
1101
1124
  --wds-sidebar-item-level-1-fill-neutral-default: var(--wds-color-black-700);
1102
1125
  --wds-sidebar-item-level-1-fill-neutral-active: var(--wds-color-blue-300);
@@ -1105,6 +1128,7 @@
1105
1128
  --wds-sidebar-item-level-1-fill-light-active: var(--wds-color-blue-300);
1106
1129
  --wds-sidebar-item-content-gap: var(--wds-space-100);
1107
1130
  --wds-sidebar-header-margin-bottom: var(--wds-space-200);
1131
+ --wds-sidebar-divider-padding-bottom: var(--wds-space-150);
1108
1132
  --wds-sidebar-divider-fill-neutral-default: var(--wds-color-black-550);
1109
1133
  --wds-sidebar-divider-fill-light-default: var(--wds-color-black-550);
1110
1134
  --wds-side-panel-title-font-letter-spacing: var(--wds-font-letter-spacing-0);
@@ -1789,6 +1813,7 @@
1789
1813
  --wds-slider-track-color: var(--wds-color-fill-standard-secondary);
1790
1814
  --wds-slider-slider-knob-color-hover: var(--wds-color-fill-standard-primary-hover);
1791
1815
  --wds-slider-slider-knob-color: var(--wds-color-fill-standard-primary);
1816
+ --wds-sidebar-item-text-font-size: var(--wds-font-size-body-tiny);
1792
1817
  --wds-sidebar-item-text-neutral-disabled: var(--wds-color-text-disabled);
1793
1818
  --wds-sidebar-item-text-neutral-default: var(--wds-color-text-standard-secondary);
1794
1819
  --wds-sidebar-item-text-light-disabled: var(--wds-color-text-disabled);
package/all.scss CHANGED
@@ -70,12 +70,16 @@
70
70
  --wds-sidebar-scrollbar-fill-dark-active: #b8b9bc;
71
71
  --wds-sidebar-minimize-tooltip-fill-dark-default: #333850;
72
72
  --wds-sidebar-minimize-action-fill-dark-default: #42454C;
73
+ --wds-sidebar-item-text-line-clamp: 2;
73
74
  --wds-sidebar-item-text-dark-disabled: #898B8F;
75
+ --wds-sidebar-item-level-3-divider-display: block;
74
76
  --wds-sidebar-item-level-2-fill-light-default: #EAF7FF;
75
77
  --wds-sidebar-item-level-2-fill-dark-default: #1F222B;
76
78
  --wds-sidebar-item-level-1-fill-dark-hover: #2B2E36;
77
79
  --wds-sidebar-item-level-1-fill-dark-default: #131720;
78
80
  --wds-sidebar-item-level-1-fill-dark-active: #42454C;
81
+ --wds-sidebar-divider-padding-top: 8px;
82
+ --wds-sidebar-divider-padding-inline: 20px;
79
83
  --wds-sidebar-divider-fill-dark-default: #42454C;
80
84
  --wds-sidebar-clear-button-fill: #5a5d63;
81
85
  --wds-side-panel-standard-shadow: none;
@@ -149,6 +153,7 @@
149
153
  --wds-internal-image-height-medium: 84px;
150
154
  --wds-internal-image-height-large: 120px;
151
155
  --wds-internal-color-picker-width: 240px;
156
+ --wds-internal-animations-enabled: false;
152
157
  --wds-input-width-tiny: 48px;
153
158
  --wds-input-width-small: 54px;
154
159
  --wds-input-width-medium: 72px;
@@ -635,7 +640,13 @@
635
640
  --wds-skeleton-border-radius-rectangle: var(--wds-border-radius-300);
636
641
  --wds-skeleton-border-radius-line: var(--wds-border-radius-full);
637
642
  --wds-skeleton-border-radius-circle: var(--wds-border-radius-full);
643
+ --wds-sidebar-padding-top: var(--wds-space-0);
644
+ --wds-sidebar-padding-start: var(--wds-space-0);
645
+ --wds-sidebar-padding-end: var(--wds-space-0);
646
+ --wds-sidebar-padding-bottom: var(--wds-space-0);
638
647
  --wds-sidebar-navigation-arrow-fill-neutral: var(--wds-color-black-100);
648
+ --wds-sidebar-minimized-width: var(--wds-space-900);
649
+ --wds-sidebar-minimized-padding-inline: var(--wds-space-0);
639
650
  --wds-sidebar-minimize-tooltip-text-neutral-default: var(--wds-color-black-200);
640
651
  --wds-sidebar-minimize-tooltip-text-light-default: var(--wds-color-black-200);
641
652
  --wds-sidebar-minimize-tooltip-text-dark-default: var(--wds-color-white);
@@ -648,16 +659,23 @@
648
659
  --wds-sidebar-minimize-action-fill-light-default: var(--wds-color-blue-400);
649
660
  --wds-sidebar-item-title: var(--wds-color-black-400);
650
661
  --wds-sidebar-item-text-neutral-active: var(--wds-color-blue-0);
662
+ --wds-sidebar-item-text-line-height: var(--wds-space-250);
651
663
  --wds-sidebar-item-text-light-active: var(--wds-color-blue-0);
652
664
  --wds-sidebar-item-text-dark-default: var(--wds-color-black-550);
653
665
  --wds-sidebar-item-text-dark-active: var(--wds-color-white);
666
+ --wds-sidebar-item-suffix-gap: var(--wds-space-100);
654
667
  --wds-sidebar-item-prefix-padding-end: var(--wds-space-200);
668
+ --wds-sidebar-item-prefix-gap: var(--wds-space-200);
669
+ --wds-sidebar-item-padding-inline-end: var(--wds-space-300);
655
670
  --wds-sidebar-item-minimized-paddings-vertical: var(--wds-space-150);
656
671
  --wds-sidebar-item-minimized-paddings-horizontal: var(--wds-space-300);
657
672
  --wds-sidebar-item-level-3-padding-top: var(--wds-space-100);
658
673
  --wds-sidebar-item-level-3-padding-start: var(--wds-space-900);
659
674
  --wds-sidebar-item-level-3-padding-end: var(--wds-space-300);
660
675
  --wds-sidebar-item-level-3-padding-bottom: var(--wds-space-100);
676
+ --wds-sidebar-item-level-3-indent-with-prefix: var(--wds-space-800);
677
+ --wds-sidebar-item-level-3-indent-first-level-with-prefix: var(--wds-space-900);
678
+ --wds-sidebar-item-level-3-indent: var(--wds-space-500);
661
679
  --wds-sidebar-item-level-3-divider-padding-top: var(--wds-space-150);
662
680
  --wds-sidebar-item-level-3-divider-padding-end: var(--wds-space-200);
663
681
  --wds-sidebar-item-level-3-divider-padding-bottom: var(--wds-space-150);
@@ -665,11 +683,16 @@
665
683
  --wds-sidebar-item-level-2-padding-start: var(--wds-space-900);
666
684
  --wds-sidebar-item-level-2-padding-end: var(--wds-space-300);
667
685
  --wds-sidebar-item-level-2-padding-bottom: var(--wds-space-100);
686
+ --wds-sidebar-item-level-2-indent-with-prefix: var(--wds-space-300);
687
+ --wds-sidebar-item-level-2-indent-first-level-with-prefix: var(--wds-space-900);
688
+ --wds-sidebar-item-level-2-indent: var(--wds-space-500);
668
689
  --wds-sidebar-item-level-2-fill-neutral-default: var(--wds-color-black-700);
669
690
  --wds-sidebar-item-level-1-padding-top: var(--wds-space-150);
670
691
  --wds-sidebar-item-level-1-padding-start: var(--wds-space-400);
671
692
  --wds-sidebar-item-level-1-padding-end: var(--wds-space-300);
672
693
  --wds-sidebar-item-level-1-padding-bottom: var(--wds-space-150);
694
+ --wds-sidebar-item-level-1-indent-with-prefix: var(--wds-space-300);
695
+ --wds-sidebar-item-level-1-indent: var(--wds-space-400);
673
696
  --wds-sidebar-item-level-1-fill-neutral-hover: var(--wds-color-blue-400);
674
697
  --wds-sidebar-item-level-1-fill-neutral-default: var(--wds-color-black-700);
675
698
  --wds-sidebar-item-level-1-fill-neutral-active: var(--wds-color-blue-300);
@@ -678,6 +701,7 @@
678
701
  --wds-sidebar-item-level-1-fill-light-active: var(--wds-color-blue-300);
679
702
  --wds-sidebar-item-content-gap: var(--wds-space-100);
680
703
  --wds-sidebar-header-margin-bottom: var(--wds-space-200);
704
+ --wds-sidebar-divider-padding-bottom: var(--wds-space-150);
681
705
  --wds-sidebar-divider-fill-neutral-default: var(--wds-color-black-550);
682
706
  --wds-sidebar-divider-fill-light-default: var(--wds-color-black-550);
683
707
  --wds-side-panel-title-font-letter-spacing: var(--wds-font-letter-spacing-0);
@@ -1775,6 +1799,7 @@
1775
1799
  --wds-sidebar-item-text-neutral-default: var(--wds-color-text-standard-secondary);
1776
1800
  --wds-sidebar-item-text-light-disabled: var(--wds-color-text-disabled);
1777
1801
  --wds-sidebar-item-text-light-default: var(--wds-color-text-standard-secondary);
1802
+ --wds-sidebar-item-text-font-size: var(--wds-font-size-body-tiny);
1778
1803
  --wds-sidebar-header-text-dark-default: var(--wds-color-text-standard-primary-light);
1779
1804
  --wds-side-panel-title-font-size: var(--wds-font-size-heading-3);
1780
1805
  --wds-side-panel-subtitle-font-size: var(--wds-font-size-body-medium);
package/all.st.css CHANGED
@@ -1244,6 +1244,7 @@
1244
1244
  @property st-global(--wds-input-width-medium);
1245
1245
  @property st-global(--wds-input-width-small);
1246
1246
  @property st-global(--wds-input-width-tiny);
1247
+ @property st-global(--wds-internal-animations-enabled);
1247
1248
  @property st-global(--wds-internal-color-picker-padding-horizontal);
1248
1249
  @property st-global(--wds-internal-color-picker-padding-vertical);
1249
1250
  @property st-global(--wds-internal-color-picker-width);
@@ -1849,6 +1850,9 @@
1849
1850
  @property st-global(--wds-sidebar-divider-fill-dark-default);
1850
1851
  @property st-global(--wds-sidebar-divider-fill-light-default);
1851
1852
  @property st-global(--wds-sidebar-divider-fill-neutral-default);
1853
+ @property st-global(--wds-sidebar-divider-padding-bottom);
1854
+ @property st-global(--wds-sidebar-divider-padding-inline);
1855
+ @property st-global(--wds-sidebar-divider-padding-top);
1852
1856
  @property st-global(--wds-sidebar-header-margin-bottom);
1853
1857
  @property st-global(--wds-sidebar-header-text-dark-default);
1854
1858
  @property st-global(--wds-sidebar-item-content-gap);
@@ -1861,6 +1865,8 @@
1861
1865
  @property st-global(--wds-sidebar-item-level-1-fill-neutral-active);
1862
1866
  @property st-global(--wds-sidebar-item-level-1-fill-neutral-default);
1863
1867
  @property st-global(--wds-sidebar-item-level-1-fill-neutral-hover);
1868
+ @property st-global(--wds-sidebar-item-level-1-indent);
1869
+ @property st-global(--wds-sidebar-item-level-1-indent-with-prefix);
1864
1870
  @property st-global(--wds-sidebar-item-level-1-padding-bottom);
1865
1871
  @property st-global(--wds-sidebar-item-level-1-padding-end);
1866
1872
  @property st-global(--wds-sidebar-item-level-1-padding-start);
@@ -1868,26 +1874,39 @@
1868
1874
  @property st-global(--wds-sidebar-item-level-2-fill-dark-default);
1869
1875
  @property st-global(--wds-sidebar-item-level-2-fill-light-default);
1870
1876
  @property st-global(--wds-sidebar-item-level-2-fill-neutral-default);
1877
+ @property st-global(--wds-sidebar-item-level-2-indent);
1878
+ @property st-global(--wds-sidebar-item-level-2-indent-first-level-with-prefix);
1879
+ @property st-global(--wds-sidebar-item-level-2-indent-with-prefix);
1871
1880
  @property st-global(--wds-sidebar-item-level-2-padding-bottom);
1872
1881
  @property st-global(--wds-sidebar-item-level-2-padding-end);
1873
1882
  @property st-global(--wds-sidebar-item-level-2-padding-start);
1874
1883
  @property st-global(--wds-sidebar-item-level-2-padding-top);
1884
+ @property st-global(--wds-sidebar-item-level-3-divider-display);
1875
1885
  @property st-global(--wds-sidebar-item-level-3-divider-padding-bottom);
1876
1886
  @property st-global(--wds-sidebar-item-level-3-divider-padding-end);
1877
1887
  @property st-global(--wds-sidebar-item-level-3-divider-padding-top);
1888
+ @property st-global(--wds-sidebar-item-level-3-indent);
1889
+ @property st-global(--wds-sidebar-item-level-3-indent-first-level-with-prefix);
1890
+ @property st-global(--wds-sidebar-item-level-3-indent-with-prefix);
1878
1891
  @property st-global(--wds-sidebar-item-level-3-padding-bottom);
1879
1892
  @property st-global(--wds-sidebar-item-level-3-padding-end);
1880
1893
  @property st-global(--wds-sidebar-item-level-3-padding-start);
1881
1894
  @property st-global(--wds-sidebar-item-level-3-padding-top);
1882
1895
  @property st-global(--wds-sidebar-item-minimized-paddings-horizontal);
1883
1896
  @property st-global(--wds-sidebar-item-minimized-paddings-vertical);
1897
+ @property st-global(--wds-sidebar-item-padding-inline-end);
1898
+ @property st-global(--wds-sidebar-item-prefix-gap);
1884
1899
  @property st-global(--wds-sidebar-item-prefix-padding-end);
1900
+ @property st-global(--wds-sidebar-item-suffix-gap);
1885
1901
  @property st-global(--wds-sidebar-item-text-dark-active);
1886
1902
  @property st-global(--wds-sidebar-item-text-dark-default);
1887
1903
  @property st-global(--wds-sidebar-item-text-dark-disabled);
1904
+ @property st-global(--wds-sidebar-item-text-font-size);
1888
1905
  @property st-global(--wds-sidebar-item-text-light-active);
1889
1906
  @property st-global(--wds-sidebar-item-text-light-default);
1890
1907
  @property st-global(--wds-sidebar-item-text-light-disabled);
1908
+ @property st-global(--wds-sidebar-item-text-line-clamp);
1909
+ @property st-global(--wds-sidebar-item-text-line-height);
1891
1910
  @property st-global(--wds-sidebar-item-text-neutral-active);
1892
1911
  @property st-global(--wds-sidebar-item-text-neutral-default);
1893
1912
  @property st-global(--wds-sidebar-item-text-neutral-disabled);
@@ -1904,7 +1923,13 @@
1904
1923
  @property st-global(--wds-sidebar-minimize-tooltip-text-dark-default);
1905
1924
  @property st-global(--wds-sidebar-minimize-tooltip-text-light-default);
1906
1925
  @property st-global(--wds-sidebar-minimize-tooltip-text-neutral-default);
1926
+ @property st-global(--wds-sidebar-minimized-padding-inline);
1927
+ @property st-global(--wds-sidebar-minimized-width);
1907
1928
  @property st-global(--wds-sidebar-navigation-arrow-fill-neutral);
1929
+ @property st-global(--wds-sidebar-padding-bottom);
1930
+ @property st-global(--wds-sidebar-padding-end);
1931
+ @property st-global(--wds-sidebar-padding-start);
1932
+ @property st-global(--wds-sidebar-padding-top);
1908
1933
  @property st-global(--wds-sidebar-scrollbar-fill-dark-active);
1909
1934
  @property st-global(--wds-sidebar-scrollbar-fill-dark-default);
1910
1935
  @property st-global(--wds-sidebar-scrollbar-fill-dark-hover);
@@ -3616,6 +3641,7 @@
3616
3641
  --wds-input-width-medium: 72px;
3617
3642
  --wds-input-width-small: 54px;
3618
3643
  --wds-input-width-tiny: 48px;
3644
+ --wds-internal-animations-enabled: false;
3619
3645
  --wds-internal-color-picker-padding-horizontal: 18px;
3620
3646
  --wds-internal-color-picker-padding-vertical: 12px;
3621
3647
  --wds-internal-color-picker-width: 240px;
@@ -4221,6 +4247,9 @@
4221
4247
  --wds-sidebar-divider-fill-dark-default: #42454C;
4222
4248
  --wds-sidebar-divider-fill-light-default: #cfd1dc;
4223
4249
  --wds-sidebar-divider-fill-neutral-default: #cfd1dc;
4250
+ --wds-sidebar-divider-padding-bottom: 9px;
4251
+ --wds-sidebar-divider-padding-inline: 20px;
4252
+ --wds-sidebar-divider-padding-top: 8px;
4224
4253
  --wds-sidebar-header-margin-bottom: 12px;
4225
4254
  --wds-sidebar-header-text-dark-default: #ffffff;
4226
4255
  --wds-sidebar-item-content-gap: 6px;
@@ -4233,6 +4262,8 @@
4233
4262
  --wds-sidebar-item-level-1-fill-neutral-active: #a8caff;
4234
4263
  --wds-sidebar-item-level-1-fill-neutral-default: #eceff3;
4235
4264
  --wds-sidebar-item-level-1-fill-neutral-hover: #d6e6fe;
4265
+ --wds-sidebar-item-level-1-indent: 24px;
4266
+ --wds-sidebar-item-level-1-indent-with-prefix: 18px;
4236
4267
  --wds-sidebar-item-level-1-padding-bottom: 9px;
4237
4268
  --wds-sidebar-item-level-1-padding-end: 18px;
4238
4269
  --wds-sidebar-item-level-1-padding-start: 24px;
@@ -4240,26 +4271,39 @@
4240
4271
  --wds-sidebar-item-level-2-fill-dark-default: #1F222B;
4241
4272
  --wds-sidebar-item-level-2-fill-light-default: #EAF7FF;
4242
4273
  --wds-sidebar-item-level-2-fill-neutral-default: #eceff3;
4274
+ --wds-sidebar-item-level-2-indent: 30px;
4275
+ --wds-sidebar-item-level-2-indent-first-level-with-prefix: 54px;
4276
+ --wds-sidebar-item-level-2-indent-with-prefix: 18px;
4243
4277
  --wds-sidebar-item-level-2-padding-bottom: 6px;
4244
4278
  --wds-sidebar-item-level-2-padding-end: 18px;
4245
4279
  --wds-sidebar-item-level-2-padding-start: 54px;
4246
4280
  --wds-sidebar-item-level-2-padding-top: 6px;
4281
+ --wds-sidebar-item-level-3-divider-display: block;
4247
4282
  --wds-sidebar-item-level-3-divider-padding-bottom: 9px;
4248
4283
  --wds-sidebar-item-level-3-divider-padding-end: 12px;
4249
4284
  --wds-sidebar-item-level-3-divider-padding-top: 9px;
4285
+ --wds-sidebar-item-level-3-indent: 30px;
4286
+ --wds-sidebar-item-level-3-indent-first-level-with-prefix: 54px;
4287
+ --wds-sidebar-item-level-3-indent-with-prefix: 48px;
4250
4288
  --wds-sidebar-item-level-3-padding-bottom: 6px;
4251
4289
  --wds-sidebar-item-level-3-padding-end: 18px;
4252
4290
  --wds-sidebar-item-level-3-padding-start: 54px;
4253
4291
  --wds-sidebar-item-level-3-padding-top: 6px;
4254
4292
  --wds-sidebar-item-minimized-paddings-horizontal: 18px;
4255
4293
  --wds-sidebar-item-minimized-paddings-vertical: 9px;
4294
+ --wds-sidebar-item-padding-inline-end: 18px;
4295
+ --wds-sidebar-item-prefix-gap: 12px;
4256
4296
  --wds-sidebar-item-prefix-padding-end: 12px;
4297
+ --wds-sidebar-item-suffix-gap: 6px;
4257
4298
  --wds-sidebar-item-text-dark-active: #ffffff;
4258
4299
  --wds-sidebar-item-text-dark-default: #cfd1dc;
4259
4300
  --wds-sidebar-item-text-dark-disabled: #898B8F;
4301
+ --wds-sidebar-item-text-font-size: 12px;
4260
4302
  --wds-sidebar-item-text-light-active: #084ebd;
4261
4303
  --wds-sidebar-item-text-light-default: #44485f;
4262
4304
  --wds-sidebar-item-text-light-disabled: rgba(0, 6, 36, .3);
4305
+ --wds-sidebar-item-text-line-clamp: 2;
4306
+ --wds-sidebar-item-text-line-height: 15px;
4263
4307
  --wds-sidebar-item-text-neutral-active: #084ebd;
4264
4308
  --wds-sidebar-item-text-neutral-default: #44485f;
4265
4309
  --wds-sidebar-item-text-neutral-disabled: rgba(0, 6, 36, .3);
@@ -4276,7 +4320,13 @@
4276
4320
  --wds-sidebar-minimize-tooltip-text-dark-default: #ffffff;
4277
4321
  --wds-sidebar-minimize-tooltip-text-light-default: #44485f;
4278
4322
  --wds-sidebar-minimize-tooltip-text-neutral-default: #44485f;
4323
+ --wds-sidebar-minimized-padding-inline: 0px;
4324
+ --wds-sidebar-minimized-width: 54px;
4279
4325
  --wds-sidebar-navigation-arrow-fill-neutral: #000624;
4326
+ --wds-sidebar-padding-bottom: 0px;
4327
+ --wds-sidebar-padding-end: 0px;
4328
+ --wds-sidebar-padding-start: 0px;
4329
+ --wds-sidebar-padding-top: 0px;
4280
4330
  --wds-sidebar-scrollbar-fill-dark-active: #b8b9bc;
4281
4331
  --wds-sidebar-scrollbar-fill-dark-default: #717379;
4282
4332
  --wds-sidebar-scrollbar-fill-dark-hover: #9C9EA6;
package/component.st.css CHANGED
@@ -1159,6 +1159,9 @@
1159
1159
  @property st-global(--wds-sidebar-divider-fill-dark-default);
1160
1160
  @property st-global(--wds-sidebar-divider-fill-light-default);
1161
1161
  @property st-global(--wds-sidebar-divider-fill-neutral-default);
1162
+ @property st-global(--wds-sidebar-divider-padding-bottom);
1163
+ @property st-global(--wds-sidebar-divider-padding-inline);
1164
+ @property st-global(--wds-sidebar-divider-padding-top);
1162
1165
  @property st-global(--wds-sidebar-header-margin-bottom);
1163
1166
  @property st-global(--wds-sidebar-header-text-dark-default);
1164
1167
  @property st-global(--wds-sidebar-item-content-gap);
@@ -1171,6 +1174,8 @@
1171
1174
  @property st-global(--wds-sidebar-item-level-1-fill-neutral-active);
1172
1175
  @property st-global(--wds-sidebar-item-level-1-fill-neutral-default);
1173
1176
  @property st-global(--wds-sidebar-item-level-1-fill-neutral-hover);
1177
+ @property st-global(--wds-sidebar-item-level-1-indent);
1178
+ @property st-global(--wds-sidebar-item-level-1-indent-with-prefix);
1174
1179
  @property st-global(--wds-sidebar-item-level-1-padding-bottom);
1175
1180
  @property st-global(--wds-sidebar-item-level-1-padding-end);
1176
1181
  @property st-global(--wds-sidebar-item-level-1-padding-start);
@@ -1178,26 +1183,39 @@
1178
1183
  @property st-global(--wds-sidebar-item-level-2-fill-dark-default);
1179
1184
  @property st-global(--wds-sidebar-item-level-2-fill-light-default);
1180
1185
  @property st-global(--wds-sidebar-item-level-2-fill-neutral-default);
1186
+ @property st-global(--wds-sidebar-item-level-2-indent);
1187
+ @property st-global(--wds-sidebar-item-level-2-indent-first-level-with-prefix);
1188
+ @property st-global(--wds-sidebar-item-level-2-indent-with-prefix);
1181
1189
  @property st-global(--wds-sidebar-item-level-2-padding-bottom);
1182
1190
  @property st-global(--wds-sidebar-item-level-2-padding-end);
1183
1191
  @property st-global(--wds-sidebar-item-level-2-padding-start);
1184
1192
  @property st-global(--wds-sidebar-item-level-2-padding-top);
1193
+ @property st-global(--wds-sidebar-item-level-3-divider-display);
1185
1194
  @property st-global(--wds-sidebar-item-level-3-divider-padding-bottom);
1186
1195
  @property st-global(--wds-sidebar-item-level-3-divider-padding-end);
1187
1196
  @property st-global(--wds-sidebar-item-level-3-divider-padding-top);
1197
+ @property st-global(--wds-sidebar-item-level-3-indent);
1198
+ @property st-global(--wds-sidebar-item-level-3-indent-first-level-with-prefix);
1199
+ @property st-global(--wds-sidebar-item-level-3-indent-with-prefix);
1188
1200
  @property st-global(--wds-sidebar-item-level-3-padding-bottom);
1189
1201
  @property st-global(--wds-sidebar-item-level-3-padding-end);
1190
1202
  @property st-global(--wds-sidebar-item-level-3-padding-start);
1191
1203
  @property st-global(--wds-sidebar-item-level-3-padding-top);
1192
1204
  @property st-global(--wds-sidebar-item-minimized-paddings-horizontal);
1193
1205
  @property st-global(--wds-sidebar-item-minimized-paddings-vertical);
1206
+ @property st-global(--wds-sidebar-item-padding-inline-end);
1207
+ @property st-global(--wds-sidebar-item-prefix-gap);
1194
1208
  @property st-global(--wds-sidebar-item-prefix-padding-end);
1209
+ @property st-global(--wds-sidebar-item-suffix-gap);
1195
1210
  @property st-global(--wds-sidebar-item-text-dark-active);
1196
1211
  @property st-global(--wds-sidebar-item-text-dark-default);
1197
1212
  @property st-global(--wds-sidebar-item-text-dark-disabled);
1213
+ @property st-global(--wds-sidebar-item-text-font-size);
1198
1214
  @property st-global(--wds-sidebar-item-text-light-active);
1199
1215
  @property st-global(--wds-sidebar-item-text-light-default);
1200
1216
  @property st-global(--wds-sidebar-item-text-light-disabled);
1217
+ @property st-global(--wds-sidebar-item-text-line-clamp);
1218
+ @property st-global(--wds-sidebar-item-text-line-height);
1201
1219
  @property st-global(--wds-sidebar-item-text-neutral-active);
1202
1220
  @property st-global(--wds-sidebar-item-text-neutral-default);
1203
1221
  @property st-global(--wds-sidebar-item-text-neutral-disabled);
@@ -1214,7 +1232,13 @@
1214
1232
  @property st-global(--wds-sidebar-minimize-tooltip-text-dark-default);
1215
1233
  @property st-global(--wds-sidebar-minimize-tooltip-text-light-default);
1216
1234
  @property st-global(--wds-sidebar-minimize-tooltip-text-neutral-default);
1235
+ @property st-global(--wds-sidebar-minimized-padding-inline);
1236
+ @property st-global(--wds-sidebar-minimized-width);
1217
1237
  @property st-global(--wds-sidebar-navigation-arrow-fill-neutral);
1238
+ @property st-global(--wds-sidebar-padding-bottom);
1239
+ @property st-global(--wds-sidebar-padding-end);
1240
+ @property st-global(--wds-sidebar-padding-start);
1241
+ @property st-global(--wds-sidebar-padding-top);
1218
1242
  @property st-global(--wds-sidebar-scrollbar-fill-dark-active);
1219
1243
  @property st-global(--wds-sidebar-scrollbar-fill-dark-default);
1220
1244
  @property st-global(--wds-sidebar-scrollbar-fill-dark-hover);
@@ -2795,6 +2819,9 @@
2795
2819
  --wds-sidebar-divider-fill-dark-default: #42454C;
2796
2820
  --wds-sidebar-divider-fill-light-default: #cfd1dc;
2797
2821
  --wds-sidebar-divider-fill-neutral-default: #cfd1dc;
2822
+ --wds-sidebar-divider-padding-bottom: 9px;
2823
+ --wds-sidebar-divider-padding-inline: 20px;
2824
+ --wds-sidebar-divider-padding-top: 8px;
2798
2825
  --wds-sidebar-header-margin-bottom: 12px;
2799
2826
  --wds-sidebar-header-text-dark-default: #ffffff;
2800
2827
  --wds-sidebar-item-content-gap: 6px;
@@ -2807,6 +2834,8 @@
2807
2834
  --wds-sidebar-item-level-1-fill-neutral-active: #a8caff;
2808
2835
  --wds-sidebar-item-level-1-fill-neutral-default: #eceff3;
2809
2836
  --wds-sidebar-item-level-1-fill-neutral-hover: #d6e6fe;
2837
+ --wds-sidebar-item-level-1-indent: 24px;
2838
+ --wds-sidebar-item-level-1-indent-with-prefix: 18px;
2810
2839
  --wds-sidebar-item-level-1-padding-bottom: 9px;
2811
2840
  --wds-sidebar-item-level-1-padding-end: 18px;
2812
2841
  --wds-sidebar-item-level-1-padding-start: 24px;
@@ -2814,26 +2843,39 @@
2814
2843
  --wds-sidebar-item-level-2-fill-dark-default: #1F222B;
2815
2844
  --wds-sidebar-item-level-2-fill-light-default: #EAF7FF;
2816
2845
  --wds-sidebar-item-level-2-fill-neutral-default: #eceff3;
2846
+ --wds-sidebar-item-level-2-indent: 30px;
2847
+ --wds-sidebar-item-level-2-indent-first-level-with-prefix: 54px;
2848
+ --wds-sidebar-item-level-2-indent-with-prefix: 18px;
2817
2849
  --wds-sidebar-item-level-2-padding-bottom: 6px;
2818
2850
  --wds-sidebar-item-level-2-padding-end: 18px;
2819
2851
  --wds-sidebar-item-level-2-padding-start: 54px;
2820
2852
  --wds-sidebar-item-level-2-padding-top: 6px;
2853
+ --wds-sidebar-item-level-3-divider-display: block;
2821
2854
  --wds-sidebar-item-level-3-divider-padding-bottom: 9px;
2822
2855
  --wds-sidebar-item-level-3-divider-padding-end: 12px;
2823
2856
  --wds-sidebar-item-level-3-divider-padding-top: 9px;
2857
+ --wds-sidebar-item-level-3-indent: 30px;
2858
+ --wds-sidebar-item-level-3-indent-first-level-with-prefix: 54px;
2859
+ --wds-sidebar-item-level-3-indent-with-prefix: 48px;
2824
2860
  --wds-sidebar-item-level-3-padding-bottom: 6px;
2825
2861
  --wds-sidebar-item-level-3-padding-end: 18px;
2826
2862
  --wds-sidebar-item-level-3-padding-start: 54px;
2827
2863
  --wds-sidebar-item-level-3-padding-top: 6px;
2828
2864
  --wds-sidebar-item-minimized-paddings-horizontal: 18px;
2829
2865
  --wds-sidebar-item-minimized-paddings-vertical: 9px;
2866
+ --wds-sidebar-item-padding-inline-end: 18px;
2867
+ --wds-sidebar-item-prefix-gap: 12px;
2830
2868
  --wds-sidebar-item-prefix-padding-end: 12px;
2869
+ --wds-sidebar-item-suffix-gap: 6px;
2831
2870
  --wds-sidebar-item-text-dark-active: #ffffff;
2832
2871
  --wds-sidebar-item-text-dark-default: #cfd1dc;
2833
2872
  --wds-sidebar-item-text-dark-disabled: #898B8F;
2873
+ --wds-sidebar-item-text-font-size: 12px;
2834
2874
  --wds-sidebar-item-text-light-active: #084ebd;
2835
2875
  --wds-sidebar-item-text-light-default: #44485f;
2836
2876
  --wds-sidebar-item-text-light-disabled: rgba(0, 6, 36, .3);
2877
+ --wds-sidebar-item-text-line-clamp: 2;
2878
+ --wds-sidebar-item-text-line-height: 15px;
2837
2879
  --wds-sidebar-item-text-neutral-active: #084ebd;
2838
2880
  --wds-sidebar-item-text-neutral-default: #44485f;
2839
2881
  --wds-sidebar-item-text-neutral-disabled: rgba(0, 6, 36, .3);
@@ -2850,7 +2892,13 @@
2850
2892
  --wds-sidebar-minimize-tooltip-text-dark-default: #ffffff;
2851
2893
  --wds-sidebar-minimize-tooltip-text-light-default: #44485f;
2852
2894
  --wds-sidebar-minimize-tooltip-text-neutral-default: #44485f;
2895
+ --wds-sidebar-minimized-padding-inline: 0px;
2896
+ --wds-sidebar-minimized-width: 54px;
2853
2897
  --wds-sidebar-navigation-arrow-fill-neutral: #000624;
2898
+ --wds-sidebar-padding-bottom: 0px;
2899
+ --wds-sidebar-padding-end: 0px;
2900
+ --wds-sidebar-padding-start: 0px;
2901
+ --wds-sidebar-padding-top: 0px;
2854
2902
  --wds-sidebar-scrollbar-fill-dark-active: #b8b9bc;
2855
2903
  --wds-sidebar-scrollbar-fill-dark-default: #717379;
2856
2904
  --wds-sidebar-scrollbar-fill-dark-hover: #9C9EA6;
package/foundation.st.css CHANGED
@@ -160,6 +160,7 @@
160
160
  @property st-global(--wds-font-weight-medium);
161
161
  @property st-global(--wds-font-weight-regular);
162
162
  @property st-global(--wds-font-weight-semi-bold);
163
+ @property st-global(--wds-internal-animations-enabled);
163
164
  @property st-global(--wds-shadow-100);
164
165
  @property st-global(--wds-shadow-200);
165
166
  @property st-global(--wds-shadow-300);
@@ -400,6 +401,7 @@
400
401
  --wds-font-weight-medium: 500;
401
402
  --wds-font-weight-regular: 400;
402
403
  --wds-font-weight-semi-bold: 600;
404
+ --wds-internal-animations-enabled: false;
403
405
  --wds-shadow-100: 0 0 3px rgba(0, 6, 36, .1), 0 2px 1px rgba(0, 6, 36, .5);
404
406
  --wds-shadow-200: 0 0 6px rgba(0, 6, 36, .1), 0 2px 4px rgba(0, 6, 36, .1);
405
407
  --wds-shadow-300: 0 0 18px rgba(0, 6, 36, .1), 0 6px 6px rgba(0, 6, 36, .05);