@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/odeditor/all.css CHANGED
@@ -336,13 +336,13 @@
336
336
  --wds-toggle-button-inner-shadow-blur-secondary: 1px;
337
337
  --wds-toggle-button-inner-shadow-blur-primary: 1px;
338
338
  --wds-tabs-selection-height: 3px;
339
- --wds-table-toolbar-padding-block-end: 16px;
340
339
  --wds-table-toolbar-padding-block-start: 24px;
340
+ --wds-table-toolbar-padding-block-end: 16px;
341
+ --wds-table-toolbar-item-gap: 8px;
342
+ --wds-table-toolbar-icon-button-gap: 2px;
341
343
  --wds-table-toolbar-divider-gap-group-start: 16px;
342
344
  --wds-table-toolbar-divider-gap: 16px;
343
- --wds-table-toolbar-icon-button-gap: 2px;
344
345
  --wds-table-toolbar-button-gap: 8px;
345
- --wds-table-toolbar-item-gap: 8px;
346
346
  --wds-swatches-swatch-size-tiny: 22px;
347
347
  --wds-status-toast-width: 600px;
348
348
  --wds-statistics-widget-value-font-letter-spacing: -0.5px;
@@ -357,9 +357,12 @@
357
357
  --wds-sidebar-scrollbar-fill-dark-hover: #9c9ea6;
358
358
  --wds-sidebar-scrollbar-fill-dark-default: #717379;
359
359
  --wds-sidebar-scrollbar-fill-dark-active: #b8b9bc;
360
+ --wds-sidebar-minimized-width: 62px;
360
361
  --wds-sidebar-minimize-tooltip-fill-dark-default: #333850;
361
362
  --wds-sidebar-minimize-action-fill-dark-default: #42454c;
363
+ --wds-sidebar-item-text-line-clamp: 1;
362
364
  --wds-sidebar-item-text-dark-disabled: #898b8f;
365
+ --wds-sidebar-item-level-3-divider-display: none;
363
366
  --wds-sidebar-item-level-2-fill-neutral-default: transparent;
364
367
  --wds-sidebar-item-level-2-fill-light-default: transparent;
365
368
  --wds-sidebar-item-level-2-fill-dark-default: #1f222b;
@@ -393,6 +396,7 @@
393
396
  --wds-loader-stroke-width-large: 2px;
394
397
  --wds-list-item-select-min-height-medium: auto;
395
398
  --wds-list-item-action-subtitle-offset: -2px;
399
+ --wds-internal-animations-enabled: true;
396
400
  --wds-internal-thumbnail-illustration-size-tiny: 38px;
397
401
  --wds-internal-thumbnail-illustration-size-small: 51px;
398
402
  --wds-internal-thumbnail-illustration-size-medium: 72px;
@@ -1089,7 +1093,12 @@
1089
1093
  --wds-sidebar-scrollbar-fill-neutral-default: var(--wds-color-black-550);
1090
1094
  --wds-sidebar-scrollbar-fill-light-hover: var(--wds-color-black-500);
1091
1095
  --wds-sidebar-scrollbar-fill-light-default: var(--wds-color-black-550);
1096
+ --wds-sidebar-padding-top: var(--wds-space-600);
1097
+ --wds-sidebar-padding-start: var(--wds-space-300);
1098
+ --wds-sidebar-padding-end: var(--wds-space-150);
1099
+ --wds-sidebar-padding-bottom: var(--wds-space-600);
1092
1100
  --wds-sidebar-navigation-arrow-fill-neutral: var(--wds-color-white);
1101
+ --wds-sidebar-minimized-padding-inline: var(--wds-space-350);
1093
1102
  --wds-sidebar-minimize-tooltip-text-neutral-default: var(--wds-color-black-200);
1094
1103
  --wds-sidebar-minimize-tooltip-text-light-default: var(--wds-color-black-200);
1095
1104
  --wds-sidebar-minimize-tooltip-text-dark-default: var(--wds-color-white);
@@ -1101,14 +1110,20 @@
1101
1110
  --wds-sidebar-item-text-margin-block: var(--wds-space-150);
1102
1111
  --wds-sidebar-item-text-dark-default: var(--wds-color-black-550);
1103
1112
  --wds-sidebar-item-text-dark-active: var(--wds-color-white);
1113
+ --wds-sidebar-item-suffix-gap: var(--wds-space-250);
1104
1114
  --wds-sidebar-item-prefix-padding-end: var(--wds-space-300);
1105
1115
  --wds-sidebar-item-prefix-margin-block: var(--wds-space-150);
1116
+ --wds-sidebar-item-prefix-gap: var(--wds-space-200);
1117
+ --wds-sidebar-item-padding-inline-end: var(--wds-space-200);
1106
1118
  --wds-sidebar-item-minimized-paddings-vertical: var(--wds-space-200);
1107
1119
  --wds-sidebar-item-minimized-paddings-horizontal: var(--wds-space-475);
1108
1120
  --wds-sidebar-item-level-3-padding-top: var(--wds-space-150);
1109
1121
  --wds-sidebar-item-level-3-padding-start: var(--wds-space-1300);
1110
1122
  --wds-sidebar-item-level-3-padding-end: var(--wds-space-475);
1111
1123
  --wds-sidebar-item-level-3-padding-bottom: var(--wds-space-150);
1124
+ --wds-sidebar-item-level-3-indent-with-prefix: var(--wds-space-1300);
1125
+ --wds-sidebar-item-level-3-indent-first-level-with-prefix: var(--wds-space-1300);
1126
+ --wds-sidebar-item-level-3-indent: var(--wds-space-1300);
1112
1127
  --wds-sidebar-item-level-3-divider-padding-top: var(--wds-space-200);
1113
1128
  --wds-sidebar-item-level-3-divider-padding-end: var(--wds-space-300);
1114
1129
  --wds-sidebar-item-level-3-divider-padding-bottom: var(--wds-space-200);
@@ -1116,18 +1131,26 @@
1116
1131
  --wds-sidebar-item-level-2-padding-start: var(--wds-space-1300);
1117
1132
  --wds-sidebar-item-level-2-padding-end: var(--wds-space-475);
1118
1133
  --wds-sidebar-item-level-2-padding-bottom: var(--wds-space-150);
1134
+ --wds-sidebar-item-level-2-indent-with-prefix: var(--wds-space-1050);
1135
+ --wds-sidebar-item-level-2-indent-first-level-with-prefix: var(--wds-space-1050);
1136
+ --wds-sidebar-item-level-2-indent: var(--wds-space-1050);
1119
1137
  --wds-sidebar-item-level-1-padding-top: var(--wds-space-200);
1120
1138
  --wds-sidebar-item-level-1-padding-start: var(--wds-space-600);
1121
1139
  --wds-sidebar-item-level-1-padding-end: var(--wds-space-475);
1122
1140
  --wds-sidebar-item-level-1-padding-bottom: var(--wds-space-200);
1141
+ --wds-sidebar-item-level-1-indent-with-prefix: var(--wds-space-200);
1142
+ --wds-sidebar-item-level-1-indent: var(--wds-space-350);
1123
1143
  --wds-sidebar-item-level-1-fill-neutral-hover: var(--wds-color-black-700);
1124
1144
  --wds-sidebar-item-level-1-fill-neutral-active: var(--wds-color-black-600);
1125
- --wds-sidebar-item-level-1-fill-light-hover: var(--wds-color-black-700);
1126
- --wds-sidebar-item-level-1-fill-light-active: var(--wds-color-black-600);
1145
+ --wds-sidebar-item-level-1-fill-light-hover: var(--wds-color-black-600);
1146
+ --wds-sidebar-item-level-1-fill-light-active: var(--wds-color-black-550);
1127
1147
  --wds-sidebar-item-context-menu-padding-inline: var(--wds-space-200);
1128
1148
  --wds-sidebar-item-content-gap: var(--wds-space-200);
1129
1149
  --wds-sidebar-item-border-radius: var(--wds-border-radius-400);
1130
1150
  --wds-sidebar-header-margin-bottom: var(--wds-space-300);
1151
+ --wds-sidebar-divider-padding-top: var(--wds-space-300);
1152
+ --wds-sidebar-divider-padding-inline: var(--wds-space-200);
1153
+ --wds-sidebar-divider-padding-bottom: var(--wds-space-300);
1131
1154
  --wds-sidebar-divider-fill-neutral-default: var(--wds-color-black-550);
1132
1155
  --wds-side-panel-title-font-letter-spacing: var(--wds-font-letter-spacing-heading-3);
1133
1156
  --wds-side-panel-subtitle-font-weight: var(--wds-font-weight-medium);
@@ -1901,6 +1924,7 @@
1901
1924
  --wds-sidebar-minimize-action-text-neutral-default: var(--wds-color-text-standard-primary);
1902
1925
  --wds-sidebar-minimize-action-text-light-default: var(--wds-color-text-standard-primary);
1903
1926
  --wds-sidebar-item-title: var(--wds-color-text-standard-secondary-light);
1927
+ --wds-sidebar-item-text-font-size: var(--wds-font-size-body-small);
1904
1928
  --wds-sidebar-item-text-neutral-disabled: var(--wds-color-text-disabled);
1905
1929
  --wds-sidebar-item-text-neutral-default: var(--wds-color-text-standard-secondary);
1906
1930
  --wds-sidebar-item-text-neutral-active: var(--wds-color-text-standard-primary);
@@ -2295,6 +2319,7 @@
2295
2319
  --wds-status-toast-text-font-line-height: var(--wds-font-line-height-body-small);
2296
2320
  --wds-statistics-widget-value-font-line-height-tiny: var(--wds-font-line-height-heading-2);
2297
2321
  --wds-statistics-widget-description-font-line-height: var(--wds-font-line-height-body-tiny);
2322
+ --wds-sidebar-item-text-line-height: var(--wds-font-line-height-body-small);
2298
2323
  --wds-side-panel-title-font-line-height: var(--wds-font-line-height-heading-3);
2299
2324
  --wds-side-panel-subtitle-font-line-height: var(--wds-font-line-height-body-tiny);
2300
2325
  --wds-side-panel-floating-title-font-line-height: var(--wds-font-line-height-heading-3);
package/odeditor/all.scss CHANGED
@@ -83,9 +83,12 @@
83
83
  --wds-sidebar-scrollbar-fill-dark-hover: #9c9ea6;
84
84
  --wds-sidebar-scrollbar-fill-dark-default: #717379;
85
85
  --wds-sidebar-scrollbar-fill-dark-active: #b8b9bc;
86
+ --wds-sidebar-minimized-width: 62px;
86
87
  --wds-sidebar-minimize-tooltip-fill-dark-default: #333850;
87
88
  --wds-sidebar-minimize-action-fill-dark-default: #42454c;
89
+ --wds-sidebar-item-text-line-clamp: 1;
88
90
  --wds-sidebar-item-text-dark-disabled: #898b8f;
91
+ --wds-sidebar-item-level-3-divider-display: none;
89
92
  --wds-sidebar-item-level-2-fill-neutral-default: transparent;
90
93
  --wds-sidebar-item-level-2-fill-light-default: transparent;
91
94
  --wds-sidebar-item-level-2-fill-dark-default: #1f222b;
@@ -164,6 +167,7 @@
164
167
  --wds-internal-image-height-small: 60px;
165
168
  --wds-internal-image-height-medium: 84px;
166
169
  --wds-internal-image-height-large: 120px;
170
+ --wds-internal-animations-enabled: true;
167
171
  --wds-input-shadow-focus-warning: transparent;
168
172
  --wds-input-shadow-focus-standard: transparent;
169
173
  --wds-input-shadow-focus-destructive: transparent;
@@ -682,7 +686,12 @@
682
686
  --wds-sidebar-scrollbar-fill-neutral-default: var(--wds-color-black-550);
683
687
  --wds-sidebar-scrollbar-fill-light-hover: var(--wds-color-black-500);
684
688
  --wds-sidebar-scrollbar-fill-light-default: var(--wds-color-black-550);
689
+ --wds-sidebar-padding-top: var(--wds-space-600);
690
+ --wds-sidebar-padding-start: var(--wds-space-300);
691
+ --wds-sidebar-padding-end: var(--wds-space-150);
692
+ --wds-sidebar-padding-bottom: var(--wds-space-600);
685
693
  --wds-sidebar-navigation-arrow-fill-neutral: var(--wds-color-white);
694
+ --wds-sidebar-minimized-padding-inline: var(--wds-space-350);
686
695
  --wds-sidebar-minimize-tooltip-text-neutral-default: var(--wds-color-black-200);
687
696
  --wds-sidebar-minimize-tooltip-text-light-default: var(--wds-color-black-200);
688
697
  --wds-sidebar-minimize-tooltip-text-dark-default: var(--wds-color-white);
@@ -694,14 +703,20 @@
694
703
  --wds-sidebar-item-text-margin-block: var(--wds-space-150);
695
704
  --wds-sidebar-item-text-dark-default: var(--wds-color-black-550);
696
705
  --wds-sidebar-item-text-dark-active: var(--wds-color-white);
706
+ --wds-sidebar-item-suffix-gap: var(--wds-space-250);
697
707
  --wds-sidebar-item-prefix-padding-end: var(--wds-space-300);
698
708
  --wds-sidebar-item-prefix-margin-block: var(--wds-space-150);
709
+ --wds-sidebar-item-prefix-gap: var(--wds-space-200);
710
+ --wds-sidebar-item-padding-inline-end: var(--wds-space-200);
699
711
  --wds-sidebar-item-minimized-paddings-vertical: var(--wds-space-200);
700
712
  --wds-sidebar-item-minimized-paddings-horizontal: var(--wds-space-475);
701
713
  --wds-sidebar-item-level-3-padding-top: var(--wds-space-150);
702
714
  --wds-sidebar-item-level-3-padding-start: var(--wds-space-1300);
703
715
  --wds-sidebar-item-level-3-padding-end: var(--wds-space-475);
704
716
  --wds-sidebar-item-level-3-padding-bottom: var(--wds-space-150);
717
+ --wds-sidebar-item-level-3-indent-with-prefix: var(--wds-space-1300);
718
+ --wds-sidebar-item-level-3-indent-first-level-with-prefix: var(--wds-space-1300);
719
+ --wds-sidebar-item-level-3-indent: var(--wds-space-1300);
705
720
  --wds-sidebar-item-level-3-divider-padding-top: var(--wds-space-200);
706
721
  --wds-sidebar-item-level-3-divider-padding-end: var(--wds-space-300);
707
722
  --wds-sidebar-item-level-3-divider-padding-bottom: var(--wds-space-200);
@@ -709,18 +724,26 @@
709
724
  --wds-sidebar-item-level-2-padding-start: var(--wds-space-1300);
710
725
  --wds-sidebar-item-level-2-padding-end: var(--wds-space-475);
711
726
  --wds-sidebar-item-level-2-padding-bottom: var(--wds-space-150);
727
+ --wds-sidebar-item-level-2-indent-with-prefix: var(--wds-space-1050);
728
+ --wds-sidebar-item-level-2-indent-first-level-with-prefix: var(--wds-space-1050);
729
+ --wds-sidebar-item-level-2-indent: var(--wds-space-1050);
712
730
  --wds-sidebar-item-level-1-padding-top: var(--wds-space-200);
713
731
  --wds-sidebar-item-level-1-padding-start: var(--wds-space-600);
714
732
  --wds-sidebar-item-level-1-padding-end: var(--wds-space-475);
715
733
  --wds-sidebar-item-level-1-padding-bottom: var(--wds-space-200);
734
+ --wds-sidebar-item-level-1-indent-with-prefix: var(--wds-space-200);
735
+ --wds-sidebar-item-level-1-indent: var(--wds-space-350);
716
736
  --wds-sidebar-item-level-1-fill-neutral-hover: var(--wds-color-black-700);
717
737
  --wds-sidebar-item-level-1-fill-neutral-active: var(--wds-color-black-600);
718
- --wds-sidebar-item-level-1-fill-light-hover: var(--wds-color-black-700);
719
- --wds-sidebar-item-level-1-fill-light-active: var(--wds-color-black-600);
738
+ --wds-sidebar-item-level-1-fill-light-hover: var(--wds-color-black-600);
739
+ --wds-sidebar-item-level-1-fill-light-active: var(--wds-color-black-550);
720
740
  --wds-sidebar-item-context-menu-padding-inline: var(--wds-space-200);
721
741
  --wds-sidebar-item-content-gap: var(--wds-space-200);
722
742
  --wds-sidebar-item-border-radius: var(--wds-border-radius-400);
723
743
  --wds-sidebar-header-margin-bottom: var(--wds-space-300);
744
+ --wds-sidebar-divider-padding-top: var(--wds-space-300);
745
+ --wds-sidebar-divider-padding-inline: var(--wds-space-200);
746
+ --wds-sidebar-divider-padding-bottom: var(--wds-space-300);
724
747
  --wds-sidebar-divider-fill-neutral-default: var(--wds-color-black-550);
725
748
  --wds-side-panel-title-font-letter-spacing: var(--wds-font-letter-spacing-heading-3);
726
749
  --wds-side-panel-subtitle-font-weight: var(--wds-font-weight-medium);
@@ -1889,6 +1912,7 @@
1889
1912
  --wds-sidebar-item-text-light-disabled: var(--wds-color-text-disabled);
1890
1913
  --wds-sidebar-item-text-light-default: var(--wds-color-text-standard-secondary);
1891
1914
  --wds-sidebar-item-text-light-active: var(--wds-color-text-standard-primary);
1915
+ --wds-sidebar-item-text-font-size: var(--wds-font-size-body-small);
1892
1916
  --wds-sidebar-header-text-dark-default: var(--wds-color-text-standard-primary-light);
1893
1917
  --wds-side-panel-title-font-size: var(--wds-font-size-heading-3);
1894
1918
  --wds-side-panel-subtitle-font-size: var(--wds-font-size-body-tiny);
@@ -2295,6 +2319,7 @@
2295
2319
  --wds-status-toast-text-font-line-height: var(--wds-font-line-height-body-small);
2296
2320
  --wds-statistics-widget-value-font-line-height-tiny: var(--wds-font-line-height-heading-2);
2297
2321
  --wds-statistics-widget-description-font-line-height: var(--wds-font-line-height-body-tiny);
2322
+ --wds-sidebar-item-text-line-height: var(--wds-font-line-height-body-small);
2298
2323
  --wds-side-panel-title-font-line-height: var(--wds-font-line-height-heading-3);
2299
2324
  --wds-side-panel-subtitle-font-line-height: var(--wds-font-line-height-body-tiny);
2300
2325
  --wds-side-panel-floating-title-font-line-height: var(--wds-font-line-height-heading-3);
package/odeditor/all.st.css CHANGED
@@ -1225,6 +1225,7 @@
1225
1225
  @property st-global(--wds-input-value-font-size-tiny);
1226
1226
  @property st-global(--wds-internal-angle-input-knob-offset);
1227
1227
  @property st-global(--wds-internal-angle-input-knob-offset-bottom);
1228
+ @property st-global(--wds-internal-animations-enabled);
1228
1229
  @property st-global(--wds-internal-button-border-width);
1229
1230
  @property st-global(--wds-internal-image-height-large);
1230
1231
  @property st-global(--wds-internal-image-height-medium);
@@ -1817,6 +1818,9 @@
1817
1818
  @property st-global(--wds-sidebar-divider-fill-dark-default);
1818
1819
  @property st-global(--wds-sidebar-divider-fill-light-default);
1819
1820
  @property st-global(--wds-sidebar-divider-fill-neutral-default);
1821
+ @property st-global(--wds-sidebar-divider-padding-bottom);
1822
+ @property st-global(--wds-sidebar-divider-padding-inline);
1823
+ @property st-global(--wds-sidebar-divider-padding-top);
1820
1824
  @property st-global(--wds-sidebar-header-margin-bottom);
1821
1825
  @property st-global(--wds-sidebar-header-text-dark-default);
1822
1826
  @property st-global(--wds-sidebar-item-border-radius);
@@ -1831,6 +1835,8 @@
1831
1835
  @property st-global(--wds-sidebar-item-level-1-fill-neutral-active);
1832
1836
  @property st-global(--wds-sidebar-item-level-1-fill-neutral-default);
1833
1837
  @property st-global(--wds-sidebar-item-level-1-fill-neutral-hover);
1838
+ @property st-global(--wds-sidebar-item-level-1-indent);
1839
+ @property st-global(--wds-sidebar-item-level-1-indent-with-prefix);
1834
1840
  @property st-global(--wds-sidebar-item-level-1-padding-bottom);
1835
1841
  @property st-global(--wds-sidebar-item-level-1-padding-end);
1836
1842
  @property st-global(--wds-sidebar-item-level-1-padding-start);
@@ -1838,27 +1844,40 @@
1838
1844
  @property st-global(--wds-sidebar-item-level-2-fill-dark-default);
1839
1845
  @property st-global(--wds-sidebar-item-level-2-fill-light-default);
1840
1846
  @property st-global(--wds-sidebar-item-level-2-fill-neutral-default);
1847
+ @property st-global(--wds-sidebar-item-level-2-indent);
1848
+ @property st-global(--wds-sidebar-item-level-2-indent-first-level-with-prefix);
1849
+ @property st-global(--wds-sidebar-item-level-2-indent-with-prefix);
1841
1850
  @property st-global(--wds-sidebar-item-level-2-padding-bottom);
1842
1851
  @property st-global(--wds-sidebar-item-level-2-padding-end);
1843
1852
  @property st-global(--wds-sidebar-item-level-2-padding-start);
1844
1853
  @property st-global(--wds-sidebar-item-level-2-padding-top);
1854
+ @property st-global(--wds-sidebar-item-level-3-divider-display);
1845
1855
  @property st-global(--wds-sidebar-item-level-3-divider-padding-bottom);
1846
1856
  @property st-global(--wds-sidebar-item-level-3-divider-padding-end);
1847
1857
  @property st-global(--wds-sidebar-item-level-3-divider-padding-top);
1858
+ @property st-global(--wds-sidebar-item-level-3-indent);
1859
+ @property st-global(--wds-sidebar-item-level-3-indent-first-level-with-prefix);
1860
+ @property st-global(--wds-sidebar-item-level-3-indent-with-prefix);
1848
1861
  @property st-global(--wds-sidebar-item-level-3-padding-bottom);
1849
1862
  @property st-global(--wds-sidebar-item-level-3-padding-end);
1850
1863
  @property st-global(--wds-sidebar-item-level-3-padding-start);
1851
1864
  @property st-global(--wds-sidebar-item-level-3-padding-top);
1852
1865
  @property st-global(--wds-sidebar-item-minimized-paddings-horizontal);
1853
1866
  @property st-global(--wds-sidebar-item-minimized-paddings-vertical);
1867
+ @property st-global(--wds-sidebar-item-padding-inline-end);
1868
+ @property st-global(--wds-sidebar-item-prefix-gap);
1854
1869
  @property st-global(--wds-sidebar-item-prefix-margin-block);
1855
1870
  @property st-global(--wds-sidebar-item-prefix-padding-end);
1871
+ @property st-global(--wds-sidebar-item-suffix-gap);
1856
1872
  @property st-global(--wds-sidebar-item-text-dark-active);
1857
1873
  @property st-global(--wds-sidebar-item-text-dark-default);
1858
1874
  @property st-global(--wds-sidebar-item-text-dark-disabled);
1875
+ @property st-global(--wds-sidebar-item-text-font-size);
1859
1876
  @property st-global(--wds-sidebar-item-text-light-active);
1860
1877
  @property st-global(--wds-sidebar-item-text-light-default);
1861
1878
  @property st-global(--wds-sidebar-item-text-light-disabled);
1879
+ @property st-global(--wds-sidebar-item-text-line-clamp);
1880
+ @property st-global(--wds-sidebar-item-text-line-height);
1862
1881
  @property st-global(--wds-sidebar-item-text-margin-block);
1863
1882
  @property st-global(--wds-sidebar-item-text-neutral-active);
1864
1883
  @property st-global(--wds-sidebar-item-text-neutral-default);
@@ -1876,7 +1895,13 @@
1876
1895
  @property st-global(--wds-sidebar-minimize-tooltip-text-dark-default);
1877
1896
  @property st-global(--wds-sidebar-minimize-tooltip-text-light-default);
1878
1897
  @property st-global(--wds-sidebar-minimize-tooltip-text-neutral-default);
1898
+ @property st-global(--wds-sidebar-minimized-padding-inline);
1899
+ @property st-global(--wds-sidebar-minimized-width);
1879
1900
  @property st-global(--wds-sidebar-navigation-arrow-fill-neutral);
1901
+ @property st-global(--wds-sidebar-padding-bottom);
1902
+ @property st-global(--wds-sidebar-padding-end);
1903
+ @property st-global(--wds-sidebar-padding-start);
1904
+ @property st-global(--wds-sidebar-padding-top);
1880
1905
  @property st-global(--wds-sidebar-scrollbar-fill-dark-active);
1881
1906
  @property st-global(--wds-sidebar-scrollbar-fill-dark-default);
1882
1907
  @property st-global(--wds-sidebar-scrollbar-fill-dark-hover);
@@ -3569,6 +3594,7 @@
3569
3594
  --wds-input-value-font-size-tiny: 12px;
3570
3595
  --wds-internal-angle-input-knob-offset: 2px;
3571
3596
  --wds-internal-angle-input-knob-offset-bottom: 4px;
3597
+ --wds-internal-animations-enabled: true;
3572
3598
  --wds-internal-button-border-width: 1px;
3573
3599
  --wds-internal-image-height-large: 120px;
3574
3600
  --wds-internal-image-height-medium: 84px;
@@ -4161,6 +4187,9 @@
4161
4187
  --wds-sidebar-divider-fill-dark-default: #42454c;
4162
4188
  --wds-sidebar-divider-fill-light-default: transparent;
4163
4189
  --wds-sidebar-divider-fill-neutral-default: #dedede;
4190
+ --wds-sidebar-divider-padding-bottom: 12px;
4191
+ --wds-sidebar-divider-padding-inline: 8px;
4192
+ --wds-sidebar-divider-padding-top: 12px;
4164
4193
  --wds-sidebar-header-margin-bottom: 12px;
4165
4194
  --wds-sidebar-header-text-dark-default: #ffffff;
4166
4195
  --wds-sidebar-item-border-radius: 8px;
@@ -4169,12 +4198,14 @@
4169
4198
  --wds-sidebar-item-level-1-fill-dark-active: #42454c;
4170
4199
  --wds-sidebar-item-level-1-fill-dark-default: #131720;
4171
4200
  --wds-sidebar-item-level-1-fill-dark-hover: #2b2e36;
4172
- --wds-sidebar-item-level-1-fill-light-active: #e8e7e7;
4201
+ --wds-sidebar-item-level-1-fill-light-active: #dedede;
4173
4202
  --wds-sidebar-item-level-1-fill-light-default: transparent;
4174
- --wds-sidebar-item-level-1-fill-light-hover: #f0efef;
4203
+ --wds-sidebar-item-level-1-fill-light-hover: #e8e7e7;
4175
4204
  --wds-sidebar-item-level-1-fill-neutral-active: #e8e7e7;
4176
4205
  --wds-sidebar-item-level-1-fill-neutral-default: transparent;
4177
4206
  --wds-sidebar-item-level-1-fill-neutral-hover: #f0efef;
4207
+ --wds-sidebar-item-level-1-indent: 14px;
4208
+ --wds-sidebar-item-level-1-indent-with-prefix: 8px;
4178
4209
  --wds-sidebar-item-level-1-padding-bottom: 8px;
4179
4210
  --wds-sidebar-item-level-1-padding-end: 18px;
4180
4211
  --wds-sidebar-item-level-1-padding-start: 24px;
@@ -4182,27 +4213,40 @@
4182
4213
  --wds-sidebar-item-level-2-fill-dark-default: #1f222b;
4183
4214
  --wds-sidebar-item-level-2-fill-light-default: transparent;
4184
4215
  --wds-sidebar-item-level-2-fill-neutral-default: transparent;
4216
+ --wds-sidebar-item-level-2-indent: 42px;
4217
+ --wds-sidebar-item-level-2-indent-first-level-with-prefix: 42px;
4218
+ --wds-sidebar-item-level-2-indent-with-prefix: 42px;
4185
4219
  --wds-sidebar-item-level-2-padding-bottom: 6px;
4186
4220
  --wds-sidebar-item-level-2-padding-end: 18px;
4187
4221
  --wds-sidebar-item-level-2-padding-start: 52px;
4188
4222
  --wds-sidebar-item-level-2-padding-top: 6px;
4223
+ --wds-sidebar-item-level-3-divider-display: none;
4189
4224
  --wds-sidebar-item-level-3-divider-padding-bottom: 8px;
4190
4225
  --wds-sidebar-item-level-3-divider-padding-end: 12px;
4191
4226
  --wds-sidebar-item-level-3-divider-padding-top: 8px;
4227
+ --wds-sidebar-item-level-3-indent: 52px;
4228
+ --wds-sidebar-item-level-3-indent-first-level-with-prefix: 52px;
4229
+ --wds-sidebar-item-level-3-indent-with-prefix: 52px;
4192
4230
  --wds-sidebar-item-level-3-padding-bottom: 6px;
4193
4231
  --wds-sidebar-item-level-3-padding-end: 18px;
4194
4232
  --wds-sidebar-item-level-3-padding-start: 52px;
4195
4233
  --wds-sidebar-item-level-3-padding-top: 6px;
4196
4234
  --wds-sidebar-item-minimized-paddings-horizontal: 18px;
4197
4235
  --wds-sidebar-item-minimized-paddings-vertical: 8px;
4236
+ --wds-sidebar-item-padding-inline-end: 8px;
4237
+ --wds-sidebar-item-prefix-gap: 8px;
4198
4238
  --wds-sidebar-item-prefix-margin-block: 6px;
4199
4239
  --wds-sidebar-item-prefix-padding-end: 12px;
4240
+ --wds-sidebar-item-suffix-gap: 10px;
4200
4241
  --wds-sidebar-item-text-dark-active: #ffffff;
4201
4242
  --wds-sidebar-item-text-dark-default: #dedede;
4202
4243
  --wds-sidebar-item-text-dark-disabled: #898b8f;
4244
+ --wds-sidebar-item-text-font-size: 14px;
4203
4245
  --wds-sidebar-item-text-light-active: #151414;
4204
4246
  --wds-sidebar-item-text-light-default: #383838;
4205
4247
  --wds-sidebar-item-text-light-disabled: #a8a6a5;
4248
+ --wds-sidebar-item-text-line-clamp: 1;
4249
+ --wds-sidebar-item-text-line-height: 18px;
4206
4250
  --wds-sidebar-item-text-margin-block: 6px;
4207
4251
  --wds-sidebar-item-text-neutral-active: #151414;
4208
4252
  --wds-sidebar-item-text-neutral-default: #383838;
@@ -4220,7 +4264,13 @@
4220
4264
  --wds-sidebar-minimize-tooltip-text-dark-default: #ffffff;
4221
4265
  --wds-sidebar-minimize-tooltip-text-light-default: #383838;
4222
4266
  --wds-sidebar-minimize-tooltip-text-neutral-default: #383838;
4267
+ --wds-sidebar-minimized-padding-inline: 14px;
4268
+ --wds-sidebar-minimized-width: 62px;
4223
4269
  --wds-sidebar-navigation-arrow-fill-neutral: #ffffff;
4270
+ --wds-sidebar-padding-bottom: 24px;
4271
+ --wds-sidebar-padding-end: 6px;
4272
+ --wds-sidebar-padding-start: 12px;
4273
+ --wds-sidebar-padding-top: 24px;
4224
4274
  --wds-sidebar-scrollbar-fill-dark-active: #b8b9bc;
4225
4275
  --wds-sidebar-scrollbar-fill-dark-default: #717379;
4226
4276
  --wds-sidebar-scrollbar-fill-dark-hover: #9c9ea6;
package/odeditor/component.st.css CHANGED
@@ -1118,6 +1118,9 @@
1118
1118
  @property st-global(--wds-sidebar-divider-fill-dark-default);
1119
1119
  @property st-global(--wds-sidebar-divider-fill-light-default);
1120
1120
  @property st-global(--wds-sidebar-divider-fill-neutral-default);
1121
+ @property st-global(--wds-sidebar-divider-padding-bottom);
1122
+ @property st-global(--wds-sidebar-divider-padding-inline);
1123
+ @property st-global(--wds-sidebar-divider-padding-top);
1121
1124
  @property st-global(--wds-sidebar-header-margin-bottom);
1122
1125
  @property st-global(--wds-sidebar-header-text-dark-default);
1123
1126
  @property st-global(--wds-sidebar-item-border-radius);
@@ -1132,6 +1135,8 @@
1132
1135
  @property st-global(--wds-sidebar-item-level-1-fill-neutral-active);
1133
1136
  @property st-global(--wds-sidebar-item-level-1-fill-neutral-default);
1134
1137
  @property st-global(--wds-sidebar-item-level-1-fill-neutral-hover);
1138
+ @property st-global(--wds-sidebar-item-level-1-indent);
1139
+ @property st-global(--wds-sidebar-item-level-1-indent-with-prefix);
1135
1140
  @property st-global(--wds-sidebar-item-level-1-padding-bottom);
1136
1141
  @property st-global(--wds-sidebar-item-level-1-padding-end);
1137
1142
  @property st-global(--wds-sidebar-item-level-1-padding-start);
@@ -1139,27 +1144,40 @@
1139
1144
  @property st-global(--wds-sidebar-item-level-2-fill-dark-default);
1140
1145
  @property st-global(--wds-sidebar-item-level-2-fill-light-default);
1141
1146
  @property st-global(--wds-sidebar-item-level-2-fill-neutral-default);
1147
+ @property st-global(--wds-sidebar-item-level-2-indent);
1148
+ @property st-global(--wds-sidebar-item-level-2-indent-first-level-with-prefix);
1149
+ @property st-global(--wds-sidebar-item-level-2-indent-with-prefix);
1142
1150
  @property st-global(--wds-sidebar-item-level-2-padding-bottom);
1143
1151
  @property st-global(--wds-sidebar-item-level-2-padding-end);
1144
1152
  @property st-global(--wds-sidebar-item-level-2-padding-start);
1145
1153
  @property st-global(--wds-sidebar-item-level-2-padding-top);
1154
+ @property st-global(--wds-sidebar-item-level-3-divider-display);
1146
1155
  @property st-global(--wds-sidebar-item-level-3-divider-padding-bottom);
1147
1156
  @property st-global(--wds-sidebar-item-level-3-divider-padding-end);
1148
1157
  @property st-global(--wds-sidebar-item-level-3-divider-padding-top);
1158
+ @property st-global(--wds-sidebar-item-level-3-indent);
1159
+ @property st-global(--wds-sidebar-item-level-3-indent-first-level-with-prefix);
1160
+ @property st-global(--wds-sidebar-item-level-3-indent-with-prefix);
1149
1161
  @property st-global(--wds-sidebar-item-level-3-padding-bottom);
1150
1162
  @property st-global(--wds-sidebar-item-level-3-padding-end);
1151
1163
  @property st-global(--wds-sidebar-item-level-3-padding-start);
1152
1164
  @property st-global(--wds-sidebar-item-level-3-padding-top);
1153
1165
  @property st-global(--wds-sidebar-item-minimized-paddings-horizontal);
1154
1166
  @property st-global(--wds-sidebar-item-minimized-paddings-vertical);
1167
+ @property st-global(--wds-sidebar-item-padding-inline-end);
1168
+ @property st-global(--wds-sidebar-item-prefix-gap);
1155
1169
  @property st-global(--wds-sidebar-item-prefix-margin-block);
1156
1170
  @property st-global(--wds-sidebar-item-prefix-padding-end);
1171
+ @property st-global(--wds-sidebar-item-suffix-gap);
1157
1172
  @property st-global(--wds-sidebar-item-text-dark-active);
1158
1173
  @property st-global(--wds-sidebar-item-text-dark-default);
1159
1174
  @property st-global(--wds-sidebar-item-text-dark-disabled);
1175
+ @property st-global(--wds-sidebar-item-text-font-size);
1160
1176
  @property st-global(--wds-sidebar-item-text-light-active);
1161
1177
  @property st-global(--wds-sidebar-item-text-light-default);
1162
1178
  @property st-global(--wds-sidebar-item-text-light-disabled);
1179
+ @property st-global(--wds-sidebar-item-text-line-clamp);
1180
+ @property st-global(--wds-sidebar-item-text-line-height);
1163
1181
  @property st-global(--wds-sidebar-item-text-margin-block);
1164
1182
  @property st-global(--wds-sidebar-item-text-neutral-active);
1165
1183
  @property st-global(--wds-sidebar-item-text-neutral-default);
@@ -1177,7 +1195,13 @@
1177
1195
  @property st-global(--wds-sidebar-minimize-tooltip-text-dark-default);
1178
1196
  @property st-global(--wds-sidebar-minimize-tooltip-text-light-default);
1179
1197
  @property st-global(--wds-sidebar-minimize-tooltip-text-neutral-default);
1198
+ @property st-global(--wds-sidebar-minimized-padding-inline);
1199
+ @property st-global(--wds-sidebar-minimized-width);
1180
1200
  @property st-global(--wds-sidebar-navigation-arrow-fill-neutral);
1201
+ @property st-global(--wds-sidebar-padding-bottom);
1202
+ @property st-global(--wds-sidebar-padding-end);
1203
+ @property st-global(--wds-sidebar-padding-start);
1204
+ @property st-global(--wds-sidebar-padding-top);
1181
1205
  @property st-global(--wds-sidebar-scrollbar-fill-dark-active);
1182
1206
  @property st-global(--wds-sidebar-scrollbar-fill-dark-default);
1183
1207
  @property st-global(--wds-sidebar-scrollbar-fill-dark-hover);
@@ -2715,6 +2739,9 @@
2715
2739
  --wds-sidebar-divider-fill-dark-default: #42454c;
2716
2740
  --wds-sidebar-divider-fill-light-default: transparent;
2717
2741
  --wds-sidebar-divider-fill-neutral-default: #dedede;
2742
+ --wds-sidebar-divider-padding-bottom: 12px;
2743
+ --wds-sidebar-divider-padding-inline: 8px;
2744
+ --wds-sidebar-divider-padding-top: 12px;
2718
2745
  --wds-sidebar-header-margin-bottom: 12px;
2719
2746
  --wds-sidebar-header-text-dark-default: #ffffff;
2720
2747
  --wds-sidebar-item-border-radius: 8px;
@@ -2723,12 +2750,14 @@
2723
2750
  --wds-sidebar-item-level-1-fill-dark-active: #42454c;
2724
2751
  --wds-sidebar-item-level-1-fill-dark-default: #131720;
2725
2752
  --wds-sidebar-item-level-1-fill-dark-hover: #2b2e36;
2726
- --wds-sidebar-item-level-1-fill-light-active: #e8e7e7;
2753
+ --wds-sidebar-item-level-1-fill-light-active: #dedede;
2727
2754
  --wds-sidebar-item-level-1-fill-light-default: transparent;
2728
- --wds-sidebar-item-level-1-fill-light-hover: #f0efef;
2755
+ --wds-sidebar-item-level-1-fill-light-hover: #e8e7e7;
2729
2756
  --wds-sidebar-item-level-1-fill-neutral-active: #e8e7e7;
2730
2757
  --wds-sidebar-item-level-1-fill-neutral-default: transparent;
2731
2758
  --wds-sidebar-item-level-1-fill-neutral-hover: #f0efef;
2759
+ --wds-sidebar-item-level-1-indent: 14px;
2760
+ --wds-sidebar-item-level-1-indent-with-prefix: 8px;
2732
2761
  --wds-sidebar-item-level-1-padding-bottom: 8px;
2733
2762
  --wds-sidebar-item-level-1-padding-end: 18px;
2734
2763
  --wds-sidebar-item-level-1-padding-start: 24px;
@@ -2736,27 +2765,40 @@
2736
2765
  --wds-sidebar-item-level-2-fill-dark-default: #1f222b;
2737
2766
  --wds-sidebar-item-level-2-fill-light-default: transparent;
2738
2767
  --wds-sidebar-item-level-2-fill-neutral-default: transparent;
2768
+ --wds-sidebar-item-level-2-indent: 42px;
2769
+ --wds-sidebar-item-level-2-indent-first-level-with-prefix: 42px;
2770
+ --wds-sidebar-item-level-2-indent-with-prefix: 42px;
2739
2771
  --wds-sidebar-item-level-2-padding-bottom: 6px;
2740
2772
  --wds-sidebar-item-level-2-padding-end: 18px;
2741
2773
  --wds-sidebar-item-level-2-padding-start: 52px;
2742
2774
  --wds-sidebar-item-level-2-padding-top: 6px;
2775
+ --wds-sidebar-item-level-3-divider-display: none;
2743
2776
  --wds-sidebar-item-level-3-divider-padding-bottom: 8px;
2744
2777
  --wds-sidebar-item-level-3-divider-padding-end: 12px;
2745
2778
  --wds-sidebar-item-level-3-divider-padding-top: 8px;
2779
+ --wds-sidebar-item-level-3-indent: 52px;
2780
+ --wds-sidebar-item-level-3-indent-first-level-with-prefix: 52px;
2781
+ --wds-sidebar-item-level-3-indent-with-prefix: 52px;
2746
2782
  --wds-sidebar-item-level-3-padding-bottom: 6px;
2747
2783
  --wds-sidebar-item-level-3-padding-end: 18px;
2748
2784
  --wds-sidebar-item-level-3-padding-start: 52px;
2749
2785
  --wds-sidebar-item-level-3-padding-top: 6px;
2750
2786
  --wds-sidebar-item-minimized-paddings-horizontal: 18px;
2751
2787
  --wds-sidebar-item-minimized-paddings-vertical: 8px;
2788
+ --wds-sidebar-item-padding-inline-end: 8px;
2789
+ --wds-sidebar-item-prefix-gap: 8px;
2752
2790
  --wds-sidebar-item-prefix-margin-block: 6px;
2753
2791
  --wds-sidebar-item-prefix-padding-end: 12px;
2792
+ --wds-sidebar-item-suffix-gap: 10px;
2754
2793
  --wds-sidebar-item-text-dark-active: #ffffff;
2755
2794
  --wds-sidebar-item-text-dark-default: #dedede;
2756
2795
  --wds-sidebar-item-text-dark-disabled: #898b8f;
2796
+ --wds-sidebar-item-text-font-size: 14px;
2757
2797
  --wds-sidebar-item-text-light-active: #151414;
2758
2798
  --wds-sidebar-item-text-light-default: #383838;
2759
2799
  --wds-sidebar-item-text-light-disabled: #a8a6a5;
2800
+ --wds-sidebar-item-text-line-clamp: 1;
2801
+ --wds-sidebar-item-text-line-height: 18px;
2760
2802
  --wds-sidebar-item-text-margin-block: 6px;
2761
2803
  --wds-sidebar-item-text-neutral-active: #151414;
2762
2804
  --wds-sidebar-item-text-neutral-default: #383838;
@@ -2774,7 +2816,13 @@
2774
2816
  --wds-sidebar-minimize-tooltip-text-dark-default: #ffffff;
2775
2817
  --wds-sidebar-minimize-tooltip-text-light-default: #383838;
2776
2818
  --wds-sidebar-minimize-tooltip-text-neutral-default: #383838;
2819
+ --wds-sidebar-minimized-padding-inline: 14px;
2820
+ --wds-sidebar-minimized-width: 62px;
2777
2821
  --wds-sidebar-navigation-arrow-fill-neutral: #ffffff;
2822
+ --wds-sidebar-padding-bottom: 24px;
2823
+ --wds-sidebar-padding-end: 6px;
2824
+ --wds-sidebar-padding-start: 12px;
2825
+ --wds-sidebar-padding-top: 24px;
2778
2826
  --wds-sidebar-scrollbar-fill-dark-active: #b8b9bc;
2779
2827
  --wds-sidebar-scrollbar-fill-dark-default: #717379;
2780
2828
  --wds-sidebar-scrollbar-fill-dark-hover: #9c9ea6;
package/odeditor/foundation.st.css CHANGED
@@ -161,6 +161,7 @@
161
161
  @property st-global(--wds-font-weight-medium);
162
162
  @property st-global(--wds-font-weight-regular);
163
163
  @property st-global(--wds-font-weight-semi-bold);
164
+ @property st-global(--wds-internal-animations-enabled);
164
165
  @property st-global(--wds-shadow-100);
165
166
  @property st-global(--wds-shadow-200);
166
167
  @property st-global(--wds-shadow-300);
@@ -404,6 +405,7 @@
404
405
  --wds-font-weight-medium: 500;
405
406
  --wds-font-weight-regular: 400;
406
407
  --wds-font-weight-semi-bold: 600;
408
+ --wds-internal-animations-enabled: true;
407
409
  --wds-shadow-100: 0 2px 1px rgba(19, 23, 32, .5), 0 0 3px rgba(19, 23, 32, .1);
408
410
  --wds-shadow-200: 0 2px 4px rgba(19, 23, 32, .05), 0 0 6px rgba(19, 23, 32, .1);
409
411
  --wds-shadow-300: 0 12px 30px 0 rgba(19, 23, 32, .1), 0 0px 0px 0 rgba(19, 23, 32, 0);