@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-dark/all.css CHANGED
@@ -350,13 +350,13 @@
350
350
  --wds-toggle-button-inner-shadow-blur-secondary: 1px;
351
351
  --wds-toggle-button-inner-shadow-blur-primary: 1px;
352
352
  --wds-tabs-selection-height: 3px;
353
- --wds-table-toolbar-padding-block-end: 16px;
354
353
  --wds-table-toolbar-padding-block-start: 24px;
354
+ --wds-table-toolbar-padding-block-end: 16px;
355
+ --wds-table-toolbar-item-gap: 8px;
356
+ --wds-table-toolbar-icon-button-gap: 2px;
355
357
  --wds-table-toolbar-divider-gap-group-start: 16px;
356
358
  --wds-table-toolbar-divider-gap: 16px;
357
- --wds-table-toolbar-icon-button-gap: 2px;
358
359
  --wds-table-toolbar-button-gap: 8px;
359
- --wds-table-toolbar-item-gap: 8px;
360
360
  --wds-swatches-swatch-size-tiny: 22px;
361
361
  --wds-status-toast-width: 600px;
362
362
  --wds-statistics-widget-value-font-letter-spacing: -0.5px;
@@ -373,9 +373,12 @@
373
373
  --wds-sidebar-scrollbar-fill-dark-hover: #9c9ea6;
374
374
  --wds-sidebar-scrollbar-fill-dark-default: #717379;
375
375
  --wds-sidebar-scrollbar-fill-dark-active: #b8b9bc;
376
+ --wds-sidebar-minimized-width: 62px;
376
377
  --wds-sidebar-minimize-tooltip-fill-dark-default: #333850;
377
378
  --wds-sidebar-minimize-action-fill-dark-default: #42454c;
379
+ --wds-sidebar-item-text-line-clamp: 1;
378
380
  --wds-sidebar-item-text-dark-disabled: #898b8f;
381
+ --wds-sidebar-item-level-3-divider-display: none;
379
382
  --wds-sidebar-item-level-2-fill-light-default: #eaf7ff;
380
383
  --wds-sidebar-item-level-2-fill-dark-default: #1f222b;
381
384
  --wds-sidebar-item-level-1-fill-dark-hover: #2b2e36;
@@ -406,6 +409,7 @@
406
409
  --wds-loader-stroke-width-large: 2px;
407
410
  --wds-list-item-select-min-height-medium: auto;
408
411
  --wds-list-item-action-subtitle-offset: 0px;
412
+ --wds-internal-animations-enabled: false;
409
413
  --wds-internal-thumbnail-illustration-size-tiny: 38px;
410
414
  --wds-internal-thumbnail-illustration-size-small: 51px;
411
415
  --wds-internal-thumbnail-illustration-size-medium: 72px;
@@ -1095,7 +1099,12 @@
1095
1099
  --wds-skeleton-border-radius-rectangle: var(--wds-border-radius-200);
1096
1100
  --wds-skeleton-border-radius-line: var(--wds-border-radius-200);
1097
1101
  --wds-skeleton-border-radius-circle: var(--wds-border-radius-full);
1102
+ --wds-sidebar-padding-top: var(--wds-space-600);
1103
+ --wds-sidebar-padding-start: var(--wds-space-300);
1104
+ --wds-sidebar-padding-end: var(--wds-space-150);
1105
+ --wds-sidebar-padding-bottom: var(--wds-space-600);
1098
1106
  --wds-sidebar-navigation-arrow-fill-neutral: var(--wds-color-white);
1107
+ --wds-sidebar-minimized-padding-inline: var(--wds-space-350);
1099
1108
  --wds-sidebar-minimize-tooltip-text-neutral-default: var(--wds-color-black-200);
1100
1109
  --wds-sidebar-minimize-tooltip-text-light-default: var(--wds-color-black-200);
1101
1110
  --wds-sidebar-minimize-tooltip-text-dark-default: var(--wds-color-white);
@@ -1109,13 +1118,19 @@
1109
1118
  --wds-sidebar-item-text-neutral-active: var(--wds-color-blue-0);
1110
1119
  --wds-sidebar-item-text-light-active: var(--wds-color-blue-0);
1111
1120
  --wds-sidebar-item-text-dark-active: var(--wds-color-white);
1121
+ --wds-sidebar-item-suffix-gap: var(--wds-space-250);
1112
1122
  --wds-sidebar-item-prefix-padding-end: var(--wds-space-300);
1123
+ --wds-sidebar-item-prefix-gap: var(--wds-space-200);
1124
+ --wds-sidebar-item-padding-inline-end: var(--wds-space-200);
1113
1125
  --wds-sidebar-item-minimized-paddings-vertical: var(--wds-space-200);
1114
1126
  --wds-sidebar-item-minimized-paddings-horizontal: var(--wds-space-475);
1115
1127
  --wds-sidebar-item-level-3-padding-top: var(--wds-space-150);
1116
1128
  --wds-sidebar-item-level-3-padding-start: var(--wds-space-1300);
1117
1129
  --wds-sidebar-item-level-3-padding-end: var(--wds-space-475);
1118
1130
  --wds-sidebar-item-level-3-padding-bottom: var(--wds-space-150);
1131
+ --wds-sidebar-item-level-3-indent-with-prefix: var(--wds-space-1300);
1132
+ --wds-sidebar-item-level-3-indent-first-level-with-prefix: var(--wds-space-1300);
1133
+ --wds-sidebar-item-level-3-indent: var(--wds-space-1300);
1119
1134
  --wds-sidebar-item-level-3-divider-padding-top: var(--wds-space-200);
1120
1135
  --wds-sidebar-item-level-3-divider-padding-end: var(--wds-space-300);
1121
1136
  --wds-sidebar-item-level-3-divider-padding-bottom: var(--wds-space-200);
@@ -1123,19 +1138,27 @@
1123
1138
  --wds-sidebar-item-level-2-padding-start: var(--wds-space-1300);
1124
1139
  --wds-sidebar-item-level-2-padding-end: var(--wds-space-475);
1125
1140
  --wds-sidebar-item-level-2-padding-bottom: var(--wds-space-150);
1141
+ --wds-sidebar-item-level-2-indent-with-prefix: var(--wds-space-1050);
1142
+ --wds-sidebar-item-level-2-indent-first-level-with-prefix: var(--wds-space-1050);
1143
+ --wds-sidebar-item-level-2-indent: var(--wds-space-1050);
1126
1144
  --wds-sidebar-item-level-2-fill-neutral-default: var(--wds-color-black-700);
1127
1145
  --wds-sidebar-item-level-1-padding-top: var(--wds-space-200);
1128
1146
  --wds-sidebar-item-level-1-padding-start: var(--wds-space-600);
1129
1147
  --wds-sidebar-item-level-1-padding-end: var(--wds-space-475);
1130
1148
  --wds-sidebar-item-level-1-padding-bottom: var(--wds-space-200);
1149
+ --wds-sidebar-item-level-1-indent-with-prefix: var(--wds-space-200);
1150
+ --wds-sidebar-item-level-1-indent: var(--wds-space-350);
1131
1151
  --wds-sidebar-item-level-1-fill-neutral-hover: var(--wds-color-blue-400);
1132
1152
  --wds-sidebar-item-level-1-fill-neutral-default: var(--wds-color-black-700);
1133
1153
  --wds-sidebar-item-level-1-fill-neutral-active: var(--wds-color-blue-300);
1134
- --wds-sidebar-item-level-1-fill-light-hover: var(--wds-color-blue-400);
1154
+ --wds-sidebar-item-level-1-fill-light-hover: var(--wds-color-black-600);
1135
1155
  --wds-sidebar-item-level-1-fill-light-default: var(--wds-color-white);
1136
- --wds-sidebar-item-level-1-fill-light-active: var(--wds-color-blue-300);
1156
+ --wds-sidebar-item-level-1-fill-light-active: var(--wds-color-black-550);
1137
1157
  --wds-sidebar-item-content-gap: var(--wds-space-200);
1138
1158
  --wds-sidebar-header-margin-bottom: var(--wds-space-300);
1159
+ --wds-sidebar-divider-padding-top: var(--wds-space-300);
1160
+ --wds-sidebar-divider-padding-inline: var(--wds-space-200);
1161
+ --wds-sidebar-divider-padding-bottom: var(--wds-space-300);
1139
1162
  --wds-sidebar-divider-fill-neutral-default: var(--wds-color-black-550);
1140
1163
  --wds-sidebar-divider-fill-light-default: var(--wds-color-black-550);
1141
1164
  --wds-side-panel-title-font-letter-spacing: var(--wds-font-letter-spacing-heading-3);
@@ -1917,6 +1940,7 @@
1917
1940
  --wds-slider-slider-knob-color-disabled: var(--wds-color-fill-standard-tertiary);
1918
1941
  --wds-slider-slider-knob-color: var(--wds-color-fill-standard-tertiary);
1919
1942
  --wds-sidebar-item-title: var(--wds-color-text-standard-secondary-light);
1943
+ --wds-sidebar-item-text-font-size: var(--wds-font-size-body-small);
1920
1944
  --wds-sidebar-item-text-neutral-disabled: var(--wds-color-text-disabled);
1921
1945
  --wds-sidebar-item-text-neutral-default: var(--wds-color-text-standard-secondary);
1922
1946
  --wds-sidebar-item-text-light-disabled: var(--wds-color-text-disabled);
@@ -2296,6 +2320,7 @@
2296
2320
  --wds-status-toast-text-font-line-height: var(--wds-font-line-height-body-small);
2297
2321
  --wds-statistics-widget-value-font-line-height-tiny: var(--wds-font-line-height-heading-2);
2298
2322
  --wds-statistics-widget-description-font-line-height: var(--wds-font-line-height-body-tiny);
2323
+ --wds-sidebar-item-text-line-height: var(--wds-font-line-height-body-small);
2299
2324
  --wds-side-panel-title-font-line-height: var(--wds-font-line-height-body-small);
2300
2325
  --wds-side-panel-subtitle-font-line-height: var(--wds-font-line-height-body-tiny);
2301
2326
  --wds-side-panel-floating-title-font-line-height: var(--wds-font-line-height-body-small);
package/odeditor-dark/all.scss CHANGED
@@ -95,9 +95,12 @@
95
95
  --wds-sidebar-scrollbar-fill-dark-hover: #9c9ea6;
96
96
  --wds-sidebar-scrollbar-fill-dark-default: #717379;
97
97
  --wds-sidebar-scrollbar-fill-dark-active: #b8b9bc;
98
+ --wds-sidebar-minimized-width: 62px;
98
99
  --wds-sidebar-minimize-tooltip-fill-dark-default: #333850;
99
100
  --wds-sidebar-minimize-action-fill-dark-default: #42454c;
101
+ --wds-sidebar-item-text-line-clamp: 1;
100
102
  --wds-sidebar-item-text-dark-disabled: #898b8f;
103
+ --wds-sidebar-item-level-3-divider-display: none;
101
104
  --wds-sidebar-item-level-2-fill-light-default: #eaf7ff;
102
105
  --wds-sidebar-item-level-2-fill-dark-default: #1f222b;
103
106
  --wds-sidebar-item-level-1-fill-dark-hover: #2b2e36;
@@ -176,6 +179,7 @@
176
179
  --wds-internal-image-height-small: 60px;
177
180
  --wds-internal-image-height-medium: 84px;
178
181
  --wds-internal-image-height-large: 120px;
182
+ --wds-internal-animations-enabled: false;
179
183
  --wds-input-shadow-focus-warning: transparent;
180
184
  --wds-input-shadow-focus-standard: transparent;
181
185
  --wds-input-shadow-focus-destructive: transparent;
@@ -688,7 +692,12 @@
688
692
  --wds-skeleton-border-radius-rectangle: var(--wds-border-radius-200);
689
693
  --wds-skeleton-border-radius-line: var(--wds-border-radius-200);
690
694
  --wds-skeleton-border-radius-circle: var(--wds-border-radius-full);
695
+ --wds-sidebar-padding-top: var(--wds-space-600);
696
+ --wds-sidebar-padding-start: var(--wds-space-300);
697
+ --wds-sidebar-padding-end: var(--wds-space-150);
698
+ --wds-sidebar-padding-bottom: var(--wds-space-600);
691
699
  --wds-sidebar-navigation-arrow-fill-neutral: var(--wds-color-white);
700
+ --wds-sidebar-minimized-padding-inline: var(--wds-space-350);
692
701
  --wds-sidebar-minimize-tooltip-text-neutral-default: var(--wds-color-black-200);
693
702
  --wds-sidebar-minimize-tooltip-text-light-default: var(--wds-color-black-200);
694
703
  --wds-sidebar-minimize-tooltip-text-dark-default: var(--wds-color-white);
@@ -702,13 +711,19 @@
702
711
  --wds-sidebar-item-text-neutral-active: var(--wds-color-blue-0);
703
712
  --wds-sidebar-item-text-light-active: var(--wds-color-blue-0);
704
713
  --wds-sidebar-item-text-dark-active: var(--wds-color-white);
714
+ --wds-sidebar-item-suffix-gap: var(--wds-space-250);
705
715
  --wds-sidebar-item-prefix-padding-end: var(--wds-space-300);
716
+ --wds-sidebar-item-prefix-gap: var(--wds-space-200);
717
+ --wds-sidebar-item-padding-inline-end: var(--wds-space-200);
706
718
  --wds-sidebar-item-minimized-paddings-vertical: var(--wds-space-200);
707
719
  --wds-sidebar-item-minimized-paddings-horizontal: var(--wds-space-475);
708
720
  --wds-sidebar-item-level-3-padding-top: var(--wds-space-150);
709
721
  --wds-sidebar-item-level-3-padding-start: var(--wds-space-1300);
710
722
  --wds-sidebar-item-level-3-padding-end: var(--wds-space-475);
711
723
  --wds-sidebar-item-level-3-padding-bottom: var(--wds-space-150);
724
+ --wds-sidebar-item-level-3-indent-with-prefix: var(--wds-space-1300);
725
+ --wds-sidebar-item-level-3-indent-first-level-with-prefix: var(--wds-space-1300);
726
+ --wds-sidebar-item-level-3-indent: var(--wds-space-1300);
712
727
  --wds-sidebar-item-level-3-divider-padding-top: var(--wds-space-200);
713
728
  --wds-sidebar-item-level-3-divider-padding-end: var(--wds-space-300);
714
729
  --wds-sidebar-item-level-3-divider-padding-bottom: var(--wds-space-200);
@@ -716,19 +731,27 @@
716
731
  --wds-sidebar-item-level-2-padding-start: var(--wds-space-1300);
717
732
  --wds-sidebar-item-level-2-padding-end: var(--wds-space-475);
718
733
  --wds-sidebar-item-level-2-padding-bottom: var(--wds-space-150);
734
+ --wds-sidebar-item-level-2-indent-with-prefix: var(--wds-space-1050);
735
+ --wds-sidebar-item-level-2-indent-first-level-with-prefix: var(--wds-space-1050);
736
+ --wds-sidebar-item-level-2-indent: var(--wds-space-1050);
719
737
  --wds-sidebar-item-level-2-fill-neutral-default: var(--wds-color-black-700);
720
738
  --wds-sidebar-item-level-1-padding-top: var(--wds-space-200);
721
739
  --wds-sidebar-item-level-1-padding-start: var(--wds-space-600);
722
740
  --wds-sidebar-item-level-1-padding-end: var(--wds-space-475);
723
741
  --wds-sidebar-item-level-1-padding-bottom: var(--wds-space-200);
742
+ --wds-sidebar-item-level-1-indent-with-prefix: var(--wds-space-200);
743
+ --wds-sidebar-item-level-1-indent: var(--wds-space-350);
724
744
  --wds-sidebar-item-level-1-fill-neutral-hover: var(--wds-color-blue-400);
725
745
  --wds-sidebar-item-level-1-fill-neutral-default: var(--wds-color-black-700);
726
746
  --wds-sidebar-item-level-1-fill-neutral-active: var(--wds-color-blue-300);
727
- --wds-sidebar-item-level-1-fill-light-hover: var(--wds-color-blue-400);
747
+ --wds-sidebar-item-level-1-fill-light-hover: var(--wds-color-black-600);
728
748
  --wds-sidebar-item-level-1-fill-light-default: var(--wds-color-white);
729
- --wds-sidebar-item-level-1-fill-light-active: var(--wds-color-blue-300);
749
+ --wds-sidebar-item-level-1-fill-light-active: var(--wds-color-black-550);
730
750
  --wds-sidebar-item-content-gap: var(--wds-space-200);
731
751
  --wds-sidebar-header-margin-bottom: var(--wds-space-300);
752
+ --wds-sidebar-divider-padding-top: var(--wds-space-300);
753
+ --wds-sidebar-divider-padding-inline: var(--wds-space-200);
754
+ --wds-sidebar-divider-padding-bottom: var(--wds-space-300);
732
755
  --wds-sidebar-divider-fill-neutral-default: var(--wds-color-black-550);
733
756
  --wds-sidebar-divider-fill-light-default: var(--wds-color-black-550);
734
757
  --wds-side-panel-title-font-letter-spacing: var(--wds-font-letter-spacing-heading-3);
@@ -1906,6 +1929,7 @@
1906
1929
  --wds-sidebar-item-text-neutral-default: var(--wds-color-text-standard-secondary);
1907
1930
  --wds-sidebar-item-text-light-disabled: var(--wds-color-text-disabled);
1908
1931
  --wds-sidebar-item-text-light-default: var(--wds-color-text-standard-secondary);
1932
+ --wds-sidebar-item-text-font-size: var(--wds-font-size-body-small);
1909
1933
  --wds-sidebar-item-text-dark-default: var(--wds-color-text-standard-primary);
1910
1934
  --wds-sidebar-header-text-dark-default: var(--wds-color-text-standard-primary);
1911
1935
  --wds-side-panel-title-font-size: var(--wds-font-size-body-small);
@@ -2296,6 +2320,7 @@
2296
2320
  --wds-status-toast-text-font-line-height: var(--wds-font-line-height-body-small);
2297
2321
  --wds-statistics-widget-value-font-line-height-tiny: var(--wds-font-line-height-heading-2);
2298
2322
  --wds-statistics-widget-description-font-line-height: var(--wds-font-line-height-body-tiny);
2323
+ --wds-sidebar-item-text-line-height: var(--wds-font-line-height-body-small);
2299
2324
  --wds-side-panel-title-font-line-height: var(--wds-font-line-height-body-small);
2300
2325
  --wds-side-panel-subtitle-font-line-height: var(--wds-font-line-height-body-tiny);
2301
2326
  --wds-side-panel-floating-title-font-line-height: var(--wds-font-line-height-body-small);
package/odeditor-dark/all.st.css CHANGED
@@ -1229,6 +1229,7 @@
1229
1229
  @property st-global(--wds-input-value-font-size-tiny);
1230
1230
  @property st-global(--wds-internal-angle-input-knob-offset);
1231
1231
  @property st-global(--wds-internal-angle-input-knob-offset-bottom);
1232
+ @property st-global(--wds-internal-animations-enabled);
1232
1233
  @property st-global(--wds-internal-button-border-width);
1233
1234
  @property st-global(--wds-internal-image-height-large);
1234
1235
  @property st-global(--wds-internal-image-height-medium);
@@ -1825,6 +1826,9 @@
1825
1826
  @property st-global(--wds-sidebar-divider-fill-dark-default);
1826
1827
  @property st-global(--wds-sidebar-divider-fill-light-default);
1827
1828
  @property st-global(--wds-sidebar-divider-fill-neutral-default);
1829
+ @property st-global(--wds-sidebar-divider-padding-bottom);
1830
+ @property st-global(--wds-sidebar-divider-padding-inline);
1831
+ @property st-global(--wds-sidebar-divider-padding-top);
1828
1832
  @property st-global(--wds-sidebar-header-margin-bottom);
1829
1833
  @property st-global(--wds-sidebar-header-text-dark-default);
1830
1834
  @property st-global(--wds-sidebar-item-content-gap);
@@ -1837,6 +1841,8 @@
1837
1841
  @property st-global(--wds-sidebar-item-level-1-fill-neutral-active);
1838
1842
  @property st-global(--wds-sidebar-item-level-1-fill-neutral-default);
1839
1843
  @property st-global(--wds-sidebar-item-level-1-fill-neutral-hover);
1844
+ @property st-global(--wds-sidebar-item-level-1-indent);
1845
+ @property st-global(--wds-sidebar-item-level-1-indent-with-prefix);
1840
1846
  @property st-global(--wds-sidebar-item-level-1-padding-bottom);
1841
1847
  @property st-global(--wds-sidebar-item-level-1-padding-end);
1842
1848
  @property st-global(--wds-sidebar-item-level-1-padding-start);
@@ -1844,26 +1850,39 @@
1844
1850
  @property st-global(--wds-sidebar-item-level-2-fill-dark-default);
1845
1851
  @property st-global(--wds-sidebar-item-level-2-fill-light-default);
1846
1852
  @property st-global(--wds-sidebar-item-level-2-fill-neutral-default);
1853
+ @property st-global(--wds-sidebar-item-level-2-indent);
1854
+ @property st-global(--wds-sidebar-item-level-2-indent-first-level-with-prefix);
1855
+ @property st-global(--wds-sidebar-item-level-2-indent-with-prefix);
1847
1856
  @property st-global(--wds-sidebar-item-level-2-padding-bottom);
1848
1857
  @property st-global(--wds-sidebar-item-level-2-padding-end);
1849
1858
  @property st-global(--wds-sidebar-item-level-2-padding-start);
1850
1859
  @property st-global(--wds-sidebar-item-level-2-padding-top);
1860
+ @property st-global(--wds-sidebar-item-level-3-divider-display);
1851
1861
  @property st-global(--wds-sidebar-item-level-3-divider-padding-bottom);
1852
1862
  @property st-global(--wds-sidebar-item-level-3-divider-padding-end);
1853
1863
  @property st-global(--wds-sidebar-item-level-3-divider-padding-top);
1864
+ @property st-global(--wds-sidebar-item-level-3-indent);
1865
+ @property st-global(--wds-sidebar-item-level-3-indent-first-level-with-prefix);
1866
+ @property st-global(--wds-sidebar-item-level-3-indent-with-prefix);
1854
1867
  @property st-global(--wds-sidebar-item-level-3-padding-bottom);
1855
1868
  @property st-global(--wds-sidebar-item-level-3-padding-end);
1856
1869
  @property st-global(--wds-sidebar-item-level-3-padding-start);
1857
1870
  @property st-global(--wds-sidebar-item-level-3-padding-top);
1858
1871
  @property st-global(--wds-sidebar-item-minimized-paddings-horizontal);
1859
1872
  @property st-global(--wds-sidebar-item-minimized-paddings-vertical);
1873
+ @property st-global(--wds-sidebar-item-padding-inline-end);
1874
+ @property st-global(--wds-sidebar-item-prefix-gap);
1860
1875
  @property st-global(--wds-sidebar-item-prefix-padding-end);
1876
+ @property st-global(--wds-sidebar-item-suffix-gap);
1861
1877
  @property st-global(--wds-sidebar-item-text-dark-active);
1862
1878
  @property st-global(--wds-sidebar-item-text-dark-default);
1863
1879
  @property st-global(--wds-sidebar-item-text-dark-disabled);
1880
+ @property st-global(--wds-sidebar-item-text-font-size);
1864
1881
  @property st-global(--wds-sidebar-item-text-light-active);
1865
1882
  @property st-global(--wds-sidebar-item-text-light-default);
1866
1883
  @property st-global(--wds-sidebar-item-text-light-disabled);
1884
+ @property st-global(--wds-sidebar-item-text-line-clamp);
1885
+ @property st-global(--wds-sidebar-item-text-line-height);
1867
1886
  @property st-global(--wds-sidebar-item-text-neutral-active);
1868
1887
  @property st-global(--wds-sidebar-item-text-neutral-default);
1869
1888
  @property st-global(--wds-sidebar-item-text-neutral-disabled);
@@ -1880,7 +1899,13 @@
1880
1899
  @property st-global(--wds-sidebar-minimize-tooltip-text-dark-default);
1881
1900
  @property st-global(--wds-sidebar-minimize-tooltip-text-light-default);
1882
1901
  @property st-global(--wds-sidebar-minimize-tooltip-text-neutral-default);
1902
+ @property st-global(--wds-sidebar-minimized-padding-inline);
1903
+ @property st-global(--wds-sidebar-minimized-width);
1883
1904
  @property st-global(--wds-sidebar-navigation-arrow-fill-neutral);
1905
+ @property st-global(--wds-sidebar-padding-bottom);
1906
+ @property st-global(--wds-sidebar-padding-end);
1907
+ @property st-global(--wds-sidebar-padding-start);
1908
+ @property st-global(--wds-sidebar-padding-top);
1884
1909
  @property st-global(--wds-sidebar-scrollbar-fill-dark-active);
1885
1910
  @property st-global(--wds-sidebar-scrollbar-fill-dark-default);
1886
1911
  @property st-global(--wds-sidebar-scrollbar-fill-dark-hover);
@@ -3575,6 +3600,7 @@
3575
3600
  --wds-input-value-font-size-tiny: 12px;
3576
3601
  --wds-internal-angle-input-knob-offset: 2px;
3577
3602
  --wds-internal-angle-input-knob-offset-bottom: 4px;
3603
+ --wds-internal-animations-enabled: false;
3578
3604
  --wds-internal-button-border-width: 1px;
3579
3605
  --wds-internal-image-height-large: 120px;
3580
3606
  --wds-internal-image-height-medium: 84px;
@@ -4171,18 +4197,23 @@
4171
4197
  --wds-sidebar-divider-fill-dark-default: #42454c;
4172
4198
  --wds-sidebar-divider-fill-light-default: #666565;
4173
4199
  --wds-sidebar-divider-fill-neutral-default: #666565;
4200
+ --wds-sidebar-divider-padding-bottom: 12px;
4201
+ --wds-sidebar-divider-padding-inline: 8px;
4202
+ --wds-sidebar-divider-padding-top: 12px;
4174
4203
  --wds-sidebar-header-margin-bottom: 12px;
4175
4204
  --wds-sidebar-header-text-dark-default: #FFFFFF;
4176
4205
  --wds-sidebar-item-content-gap: 8px;
4177
4206
  --wds-sidebar-item-level-1-fill-dark-active: #42454c;
4178
4207
  --wds-sidebar-item-level-1-fill-dark-default: #131720;
4179
4208
  --wds-sidebar-item-level-1-fill-dark-hover: #2b2e36;
4180
- --wds-sidebar-item-level-1-fill-light-active: #3F4D6E;
4209
+ --wds-sidebar-item-level-1-fill-light-active: #666565;
4181
4210
  --wds-sidebar-item-level-1-fill-light-default: #212122;
4182
- --wds-sidebar-item-level-1-fill-light-hover: #2D354E;
4211
+ --wds-sidebar-item-level-1-fill-light-hover: #454544;
4183
4212
  --wds-sidebar-item-level-1-fill-neutral-active: #3F4D6E;
4184
4213
  --wds-sidebar-item-level-1-fill-neutral-default: #3A3A3B;
4185
4214
  --wds-sidebar-item-level-1-fill-neutral-hover: #2D354E;
4215
+ --wds-sidebar-item-level-1-indent: 14px;
4216
+ --wds-sidebar-item-level-1-indent-with-prefix: 8px;
4186
4217
  --wds-sidebar-item-level-1-padding-bottom: 8px;
4187
4218
  --wds-sidebar-item-level-1-padding-end: 18px;
4188
4219
  --wds-sidebar-item-level-1-padding-start: 24px;
@@ -4190,26 +4221,39 @@
4190
4221
  --wds-sidebar-item-level-2-fill-dark-default: #1f222b;
4191
4222
  --wds-sidebar-item-level-2-fill-light-default: #eaf7ff;
4192
4223
  --wds-sidebar-item-level-2-fill-neutral-default: #3A3A3B;
4224
+ --wds-sidebar-item-level-2-indent: 42px;
4225
+ --wds-sidebar-item-level-2-indent-first-level-with-prefix: 42px;
4226
+ --wds-sidebar-item-level-2-indent-with-prefix: 42px;
4193
4227
  --wds-sidebar-item-level-2-padding-bottom: 6px;
4194
4228
  --wds-sidebar-item-level-2-padding-end: 18px;
4195
4229
  --wds-sidebar-item-level-2-padding-start: 52px;
4196
4230
  --wds-sidebar-item-level-2-padding-top: 6px;
4231
+ --wds-sidebar-item-level-3-divider-display: none;
4197
4232
  --wds-sidebar-item-level-3-divider-padding-bottom: 8px;
4198
4233
  --wds-sidebar-item-level-3-divider-padding-end: 12px;
4199
4234
  --wds-sidebar-item-level-3-divider-padding-top: 8px;
4235
+ --wds-sidebar-item-level-3-indent: 52px;
4236
+ --wds-sidebar-item-level-3-indent-first-level-with-prefix: 52px;
4237
+ --wds-sidebar-item-level-3-indent-with-prefix: 52px;
4200
4238
  --wds-sidebar-item-level-3-padding-bottom: 6px;
4201
4239
  --wds-sidebar-item-level-3-padding-end: 18px;
4202
4240
  --wds-sidebar-item-level-3-padding-start: 52px;
4203
4241
  --wds-sidebar-item-level-3-padding-top: 6px;
4204
4242
  --wds-sidebar-item-minimized-paddings-horizontal: 18px;
4205
4243
  --wds-sidebar-item-minimized-paddings-vertical: 8px;
4244
+ --wds-sidebar-item-padding-inline-end: 8px;
4245
+ --wds-sidebar-item-prefix-gap: 8px;
4206
4246
  --wds-sidebar-item-prefix-padding-end: 12px;
4247
+ --wds-sidebar-item-suffix-gap: 10px;
4207
4248
  --wds-sidebar-item-text-dark-active: #212122;
4208
4249
  --wds-sidebar-item-text-dark-default: #FFFFFF;
4209
4250
  --wds-sidebar-item-text-dark-disabled: #898b8f;
4251
+ --wds-sidebar-item-text-font-size: 14px;
4210
4252
  --wds-sidebar-item-text-light-active: #E0E7FF;
4211
4253
  --wds-sidebar-item-text-light-default: #D4D3D2;
4212
4254
  --wds-sidebar-item-text-light-disabled: #878685;
4255
+ --wds-sidebar-item-text-line-clamp: 1;
4256
+ --wds-sidebar-item-text-line-height: 18px;
4213
4257
  --wds-sidebar-item-text-neutral-active: #E0E7FF;
4214
4258
  --wds-sidebar-item-text-neutral-default: #D4D3D2;
4215
4259
  --wds-sidebar-item-text-neutral-disabled: #878685;
@@ -4226,7 +4270,13 @@
4226
4270
  --wds-sidebar-minimize-tooltip-text-dark-default: #212122;
4227
4271
  --wds-sidebar-minimize-tooltip-text-light-default: #D4D3D2;
4228
4272
  --wds-sidebar-minimize-tooltip-text-neutral-default: #D4D3D2;
4273
+ --wds-sidebar-minimized-padding-inline: 14px;
4274
+ --wds-sidebar-minimized-width: 62px;
4229
4275
  --wds-sidebar-navigation-arrow-fill-neutral: #212122;
4276
+ --wds-sidebar-padding-bottom: 24px;
4277
+ --wds-sidebar-padding-end: 6px;
4278
+ --wds-sidebar-padding-start: 12px;
4279
+ --wds-sidebar-padding-top: 24px;
4230
4280
  --wds-sidebar-scrollbar-fill-dark-active: #b8b9bc;
4231
4281
  --wds-sidebar-scrollbar-fill-dark-default: #717379;
4232
4282
  --wds-sidebar-scrollbar-fill-dark-hover: #9c9ea6;
package/odeditor-dark/component.st.css CHANGED
@@ -1125,6 +1125,9 @@
1125
1125
  @property st-global(--wds-sidebar-divider-fill-dark-default);
1126
1126
  @property st-global(--wds-sidebar-divider-fill-light-default);
1127
1127
  @property st-global(--wds-sidebar-divider-fill-neutral-default);
1128
+ @property st-global(--wds-sidebar-divider-padding-bottom);
1129
+ @property st-global(--wds-sidebar-divider-padding-inline);
1130
+ @property st-global(--wds-sidebar-divider-padding-top);
1128
1131
  @property st-global(--wds-sidebar-header-margin-bottom);
1129
1132
  @property st-global(--wds-sidebar-header-text-dark-default);
1130
1133
  @property st-global(--wds-sidebar-item-content-gap);
@@ -1137,6 +1140,8 @@
1137
1140
  @property st-global(--wds-sidebar-item-level-1-fill-neutral-active);
1138
1141
  @property st-global(--wds-sidebar-item-level-1-fill-neutral-default);
1139
1142
  @property st-global(--wds-sidebar-item-level-1-fill-neutral-hover);
1143
+ @property st-global(--wds-sidebar-item-level-1-indent);
1144
+ @property st-global(--wds-sidebar-item-level-1-indent-with-prefix);
1140
1145
  @property st-global(--wds-sidebar-item-level-1-padding-bottom);
1141
1146
  @property st-global(--wds-sidebar-item-level-1-padding-end);
1142
1147
  @property st-global(--wds-sidebar-item-level-1-padding-start);
@@ -1144,26 +1149,39 @@
1144
1149
  @property st-global(--wds-sidebar-item-level-2-fill-dark-default);
1145
1150
  @property st-global(--wds-sidebar-item-level-2-fill-light-default);
1146
1151
  @property st-global(--wds-sidebar-item-level-2-fill-neutral-default);
1152
+ @property st-global(--wds-sidebar-item-level-2-indent);
1153
+ @property st-global(--wds-sidebar-item-level-2-indent-first-level-with-prefix);
1154
+ @property st-global(--wds-sidebar-item-level-2-indent-with-prefix);
1147
1155
  @property st-global(--wds-sidebar-item-level-2-padding-bottom);
1148
1156
  @property st-global(--wds-sidebar-item-level-2-padding-end);
1149
1157
  @property st-global(--wds-sidebar-item-level-2-padding-start);
1150
1158
  @property st-global(--wds-sidebar-item-level-2-padding-top);
1159
+ @property st-global(--wds-sidebar-item-level-3-divider-display);
1151
1160
  @property st-global(--wds-sidebar-item-level-3-divider-padding-bottom);
1152
1161
  @property st-global(--wds-sidebar-item-level-3-divider-padding-end);
1153
1162
  @property st-global(--wds-sidebar-item-level-3-divider-padding-top);
1163
+ @property st-global(--wds-sidebar-item-level-3-indent);
1164
+ @property st-global(--wds-sidebar-item-level-3-indent-first-level-with-prefix);
1165
+ @property st-global(--wds-sidebar-item-level-3-indent-with-prefix);
1154
1166
  @property st-global(--wds-sidebar-item-level-3-padding-bottom);
1155
1167
  @property st-global(--wds-sidebar-item-level-3-padding-end);
1156
1168
  @property st-global(--wds-sidebar-item-level-3-padding-start);
1157
1169
  @property st-global(--wds-sidebar-item-level-3-padding-top);
1158
1170
  @property st-global(--wds-sidebar-item-minimized-paddings-horizontal);
1159
1171
  @property st-global(--wds-sidebar-item-minimized-paddings-vertical);
1172
+ @property st-global(--wds-sidebar-item-padding-inline-end);
1173
+ @property st-global(--wds-sidebar-item-prefix-gap);
1160
1174
  @property st-global(--wds-sidebar-item-prefix-padding-end);
1175
+ @property st-global(--wds-sidebar-item-suffix-gap);
1161
1176
  @property st-global(--wds-sidebar-item-text-dark-active);
1162
1177
  @property st-global(--wds-sidebar-item-text-dark-default);
1163
1178
  @property st-global(--wds-sidebar-item-text-dark-disabled);
1179
+ @property st-global(--wds-sidebar-item-text-font-size);
1164
1180
  @property st-global(--wds-sidebar-item-text-light-active);
1165
1181
  @property st-global(--wds-sidebar-item-text-light-default);
1166
1182
  @property st-global(--wds-sidebar-item-text-light-disabled);
1183
+ @property st-global(--wds-sidebar-item-text-line-clamp);
1184
+ @property st-global(--wds-sidebar-item-text-line-height);
1167
1185
  @property st-global(--wds-sidebar-item-text-neutral-active);
1168
1186
  @property st-global(--wds-sidebar-item-text-neutral-default);
1169
1187
  @property st-global(--wds-sidebar-item-text-neutral-disabled);
@@ -1180,7 +1198,13 @@
1180
1198
  @property st-global(--wds-sidebar-minimize-tooltip-text-dark-default);
1181
1199
  @property st-global(--wds-sidebar-minimize-tooltip-text-light-default);
1182
1200
  @property st-global(--wds-sidebar-minimize-tooltip-text-neutral-default);
1201
+ @property st-global(--wds-sidebar-minimized-padding-inline);
1202
+ @property st-global(--wds-sidebar-minimized-width);
1183
1203
  @property st-global(--wds-sidebar-navigation-arrow-fill-neutral);
1204
+ @property st-global(--wds-sidebar-padding-bottom);
1205
+ @property st-global(--wds-sidebar-padding-end);
1206
+ @property st-global(--wds-sidebar-padding-start);
1207
+ @property st-global(--wds-sidebar-padding-top);
1184
1208
  @property st-global(--wds-sidebar-scrollbar-fill-dark-active);
1185
1209
  @property st-global(--wds-sidebar-scrollbar-fill-dark-default);
1186
1210
  @property st-global(--wds-sidebar-scrollbar-fill-dark-hover);
@@ -2723,18 +2747,23 @@
2723
2747
  --wds-sidebar-divider-fill-dark-default: #42454c;
2724
2748
  --wds-sidebar-divider-fill-light-default: #666565;
2725
2749
  --wds-sidebar-divider-fill-neutral-default: #666565;
2750
+ --wds-sidebar-divider-padding-bottom: 12px;
2751
+ --wds-sidebar-divider-padding-inline: 8px;
2752
+ --wds-sidebar-divider-padding-top: 12px;
2726
2753
  --wds-sidebar-header-margin-bottom: 12px;
2727
2754
  --wds-sidebar-header-text-dark-default: #FFFFFF;
2728
2755
  --wds-sidebar-item-content-gap: 8px;
2729
2756
  --wds-sidebar-item-level-1-fill-dark-active: #42454c;
2730
2757
  --wds-sidebar-item-level-1-fill-dark-default: #131720;
2731
2758
  --wds-sidebar-item-level-1-fill-dark-hover: #2b2e36;
2732
- --wds-sidebar-item-level-1-fill-light-active: #3F4D6E;
2759
+ --wds-sidebar-item-level-1-fill-light-active: #666565;
2733
2760
  --wds-sidebar-item-level-1-fill-light-default: #212122;
2734
- --wds-sidebar-item-level-1-fill-light-hover: #2D354E;
2761
+ --wds-sidebar-item-level-1-fill-light-hover: #454544;
2735
2762
  --wds-sidebar-item-level-1-fill-neutral-active: #3F4D6E;
2736
2763
  --wds-sidebar-item-level-1-fill-neutral-default: #3A3A3B;
2737
2764
  --wds-sidebar-item-level-1-fill-neutral-hover: #2D354E;
2765
+ --wds-sidebar-item-level-1-indent: 14px;
2766
+ --wds-sidebar-item-level-1-indent-with-prefix: 8px;
2738
2767
  --wds-sidebar-item-level-1-padding-bottom: 8px;
2739
2768
  --wds-sidebar-item-level-1-padding-end: 18px;
2740
2769
  --wds-sidebar-item-level-1-padding-start: 24px;
@@ -2742,26 +2771,39 @@
2742
2771
  --wds-sidebar-item-level-2-fill-dark-default: #1f222b;
2743
2772
  --wds-sidebar-item-level-2-fill-light-default: #eaf7ff;
2744
2773
  --wds-sidebar-item-level-2-fill-neutral-default: #3A3A3B;
2774
+ --wds-sidebar-item-level-2-indent: 42px;
2775
+ --wds-sidebar-item-level-2-indent-first-level-with-prefix: 42px;
2776
+ --wds-sidebar-item-level-2-indent-with-prefix: 42px;
2745
2777
  --wds-sidebar-item-level-2-padding-bottom: 6px;
2746
2778
  --wds-sidebar-item-level-2-padding-end: 18px;
2747
2779
  --wds-sidebar-item-level-2-padding-start: 52px;
2748
2780
  --wds-sidebar-item-level-2-padding-top: 6px;
2781
+ --wds-sidebar-item-level-3-divider-display: none;
2749
2782
  --wds-sidebar-item-level-3-divider-padding-bottom: 8px;
2750
2783
  --wds-sidebar-item-level-3-divider-padding-end: 12px;
2751
2784
  --wds-sidebar-item-level-3-divider-padding-top: 8px;
2785
+ --wds-sidebar-item-level-3-indent: 52px;
2786
+ --wds-sidebar-item-level-3-indent-first-level-with-prefix: 52px;
2787
+ --wds-sidebar-item-level-3-indent-with-prefix: 52px;
2752
2788
  --wds-sidebar-item-level-3-padding-bottom: 6px;
2753
2789
  --wds-sidebar-item-level-3-padding-end: 18px;
2754
2790
  --wds-sidebar-item-level-3-padding-start: 52px;
2755
2791
  --wds-sidebar-item-level-3-padding-top: 6px;
2756
2792
  --wds-sidebar-item-minimized-paddings-horizontal: 18px;
2757
2793
  --wds-sidebar-item-minimized-paddings-vertical: 8px;
2794
+ --wds-sidebar-item-padding-inline-end: 8px;
2795
+ --wds-sidebar-item-prefix-gap: 8px;
2758
2796
  --wds-sidebar-item-prefix-padding-end: 12px;
2797
+ --wds-sidebar-item-suffix-gap: 10px;
2759
2798
  --wds-sidebar-item-text-dark-active: #212122;
2760
2799
  --wds-sidebar-item-text-dark-default: #FFFFFF;
2761
2800
  --wds-sidebar-item-text-dark-disabled: #898b8f;
2801
+ --wds-sidebar-item-text-font-size: 14px;
2762
2802
  --wds-sidebar-item-text-light-active: #E0E7FF;
2763
2803
  --wds-sidebar-item-text-light-default: #D4D3D2;
2764
2804
  --wds-sidebar-item-text-light-disabled: #878685;
2805
+ --wds-sidebar-item-text-line-clamp: 1;
2806
+ --wds-sidebar-item-text-line-height: 18px;
2765
2807
  --wds-sidebar-item-text-neutral-active: #E0E7FF;
2766
2808
  --wds-sidebar-item-text-neutral-default: #D4D3D2;
2767
2809
  --wds-sidebar-item-text-neutral-disabled: #878685;
@@ -2778,7 +2820,13 @@
2778
2820
  --wds-sidebar-minimize-tooltip-text-dark-default: #212122;
2779
2821
  --wds-sidebar-minimize-tooltip-text-light-default: #D4D3D2;
2780
2822
  --wds-sidebar-minimize-tooltip-text-neutral-default: #D4D3D2;
2823
+ --wds-sidebar-minimized-padding-inline: 14px;
2824
+ --wds-sidebar-minimized-width: 62px;
2781
2825
  --wds-sidebar-navigation-arrow-fill-neutral: #212122;
2826
+ --wds-sidebar-padding-bottom: 24px;
2827
+ --wds-sidebar-padding-end: 6px;
2828
+ --wds-sidebar-padding-start: 12px;
2829
+ --wds-sidebar-padding-top: 24px;
2782
2830
  --wds-sidebar-scrollbar-fill-dark-active: #b8b9bc;
2783
2831
  --wds-sidebar-scrollbar-fill-dark-default: #717379;
2784
2832
  --wds-sidebar-scrollbar-fill-dark-hover: #9c9ea6;
package/odeditor-dark/foundation.st.css CHANGED
@@ -162,6 +162,7 @@
162
162
  @property st-global(--wds-font-weight-medium);
163
163
  @property st-global(--wds-font-weight-regular);
164
164
  @property st-global(--wds-font-weight-semi-bold);
165
+ @property st-global(--wds-internal-animations-enabled);
165
166
  @property st-global(--wds-shadow-100);
166
167
  @property st-global(--wds-shadow-200);
167
168
  @property st-global(--wds-shadow-300);
@@ -406,6 +407,7 @@
406
407
  --wds-font-weight-medium: 500;
407
408
  --wds-font-weight-regular: 400;
408
409
  --wds-font-weight-semi-bold: 600;
410
+ --wds-internal-animations-enabled: false;
409
411
  --wds-shadow-100: 0 2px 1px rgba(0, 0, 0, .5), 0 0 3px rgba(0, 0, 0, .1);
410
412
  --wds-shadow-200: 0 2px 4px rgba(0, 0, 0, .05), 0 0 6px rgba(0, 0, 0, .1);
411
413
  --wds-shadow-300: 0 12px 30px 0 rgba(0, 0, 0, .3), 0 0px 0px 0 rgba(0, 0, 0, .3);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wix/design-system-tokens",
3
- "version": "1.220.1",
3
+ "version": "1.221.0",
4
4
  "scripts": {
5
5
  "build": "cp -r tokens/* .",
6
6
  "figma-to-dictionary": "ts-node src/scripts/figma-to-dictionary.ts",
@@ -36,5 +36,5 @@
36
36
  "author": "augustinasv@wix.com",
37
37
  "description": "Design system tokens",
38
38
  "packageManager": "yarn@3.5.0",
39
- "falconPackageHash": "f271b30503169fa117634456ff9595e2945b15f1fe75e57a3c81774f"
39
+ "falconPackageHash": "61c01963f69a01f3e0502207a7f294863997c6967cd28ae3724ca505"
40
40
  }