@wix/design-system-tokens 1.239.1 → 1.241.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 (36) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/README.md +1 -1
  3. package/all.css +10 -0
  4. package/all.scss +10 -0
  5. package/all.st.css +20 -0
  6. package/bm-dark/all.css +2782 -0
  7. package/bm-dark/all.scss +2782 -0
  8. package/bm-dark/all.st.css +5568 -0
  9. package/bm-dark/component.st.css +4040 -0
  10. package/bm-dark/foundation.st.css +512 -0
  11. package/bm-dark/semantic.st.css +1032 -0
  12. package/bm-light/all.css +2782 -0
  13. package/bm-light/all.scss +2782 -0
  14. package/bm-light/all.st.css +5568 -0
  15. package/bm-light/component.st.css +4040 -0
  16. package/bm-light/foundation.st.css +512 -0
  17. package/bm-light/semantic.st.css +1032 -0
  18. package/foundation.st.css +20 -0
  19. package/odeditor/all.css +23 -13
  20. package/odeditor/all.scss +23 -13
  21. package/odeditor/all.st.css +33 -13
  22. package/odeditor/component.st.css +13 -13
  23. package/odeditor/foundation.st.css +20 -0
  24. package/odeditor-dark/all.css +10 -0
  25. package/odeditor-dark/all.scss +10 -0
  26. package/odeditor-dark/all.st.css +20 -0
  27. package/odeditor-dark/foundation.st.css +20 -0
  28. package/package.json +2 -2
  29. package/studio/all.css +10 -0
  30. package/studio/all.scss +10 -0
  31. package/studio/all.st.css +20 -0
  32. package/studio/foundation.st.css +20 -0
  33. package/studio2-light/all.css +10 -0
  34. package/studio2-light/all.scss +10 -0
  35. package/studio2-light/all.st.css +20 -0
  36. package/studio2-light/foundation.st.css +20 -0
package/foundation.st.css CHANGED
@@ -166,6 +166,16 @@
166
166
  @property st-global(--wds-font-weight-regular);
167
167
  @property st-global(--wds-font-weight-semi-bold);
168
168
  @property st-global(--wds-internal-theme);
169
+ @property st-global(--wds-motion-easing-100);
170
+ @property st-global(--wds-motion-easing-200);
171
+ @property st-global(--wds-motion-easing-300);
172
+ @property st-global(--wds-motion-easing-400);
173
+ @property st-global(--wds-motion-easing-500);
174
+ @property st-global(--wds-motion-easing-600);
175
+ @property st-global(--wds-motion-easing-700);
176
+ @property st-global(--wds-motion-easing-800);
177
+ @property st-global(--wds-motion-easing-900);
178
+ @property st-global(--wds-motion-easing-1000);
169
179
  @property st-global(--wds-shadow-100);
170
180
  @property st-global(--wds-shadow-200);
171
181
  @property st-global(--wds-shadow-300);
@@ -407,6 +417,16 @@
407
417
  --wds-font-weight-regular: 400;
408
418
  --wds-font-weight-semi-bold: 600;
409
419
  --wds-internal-theme: default;
420
+ --wds-motion-easing-100: linear;
421
+ --wds-motion-easing-200: cubic-bezier(0.42, 0, 0.58, 1);
422
+ --wds-motion-easing-300: cubic-bezier(0.4, 0, 0.2, 1);
423
+ --wds-motion-easing-400: cubic-bezier(0.76, 0, 0.24, 1);
424
+ --wds-motion-easing-500: cubic-bezier(0, 0, 0.58, 1);
425
+ --wds-motion-easing-600: cubic-bezier(0, 0, 0.2, 1);
426
+ --wds-motion-easing-700: cubic-bezier(0.25, 1, 0.5, 1);
427
+ --wds-motion-easing-800: cubic-bezier(0.18, 0.89, 0.32, 1.28);
428
+ --wds-motion-easing-900: cubic-bezier(0.26, 0, 0.67, 1);
429
+ --wds-motion-easing-1000: cubic-bezier(0.4, 0, 1, 1);
410
430
  --wds-shadow-100: 0 0 3px rgba(0, 6, 36, .1), 0 2px 1px rgba(0, 6, 36, .5);
411
431
  --wds-shadow-200: 0 0 6px rgba(0, 6, 36, .1), 0 2px 4px rgba(0, 6, 36, .1);
412
432
  --wds-shadow-300: 0 0 18px rgba(0, 6, 36, .1), 0 6px 6px rgba(0, 6, 36, .05);
package/odeditor/all.css CHANGED
@@ -78,6 +78,16 @@
78
78
  --wds-shadow-blur-35: 3px;
79
79
  --wds-shadow-blur-25: 2px;
80
80
  --wds-shadow-blur-0: 0px;
81
+ --wds-motion-easing-1000: cubic-bezier(0.4, 0, 1, 1);
82
+ --wds-motion-easing-900: cubic-bezier(0.26, 0, 0.67, 1);
83
+ --wds-motion-easing-800: cubic-bezier(0.18, 0.89, 0.32, 1.28);
84
+ --wds-motion-easing-700: cubic-bezier(0.25, 1, 0.5, 1);
85
+ --wds-motion-easing-600: cubic-bezier(0, 0, 0.2, 1);
86
+ --wds-motion-easing-500: cubic-bezier(0, 0, 0.58, 1);
87
+ --wds-motion-easing-400: cubic-bezier(0.76, 0, 0.24, 1);
88
+ --wds-motion-easing-300: cubic-bezier(0.4, 0, 0.2, 1);
89
+ --wds-motion-easing-200: cubic-bezier(0.42, 0, 0.58, 1);
90
+ --wds-motion-easing-100: linear;
81
91
  --wds-font-weight-heading-3: 700;
82
92
  --wds-font-weight-semi-bold: 600;
83
93
  --wds-font-weight-regular: 400;
@@ -348,11 +358,10 @@
348
358
  --wds-slider-slider-knob-shadow: false;
349
359
  --wds-slider-slider-knob-border-width-hover: 12px;
350
360
  --wds-slider-slider-knob-border-width: 2px;
351
- --wds-sidebar-submenu-level-2-padding-bottom: 0px;
352
361
  --wds-sidebar-scrollbar-fill-dark-hover: #9c9ea6;
353
362
  --wds-sidebar-scrollbar-fill-dark-default: #717379;
354
363
  --wds-sidebar-scrollbar-fill-dark-active: #b8b9bc;
355
- --wds-sidebar-minimized-width: 62px;
364
+ --wds-sidebar-minimized-width: 54px;
356
365
  --wds-sidebar-minimize-tooltip-fill-dark-default: #333850;
357
366
  --wds-sidebar-minimize-action-fill-dark-default: #42454c;
358
367
  --wds-sidebar-item-text-line-clamp: 1;
@@ -369,7 +378,7 @@
369
378
  --wds-sidebar-divider-fill-light-default: transparent;
370
379
  --wds-sidebar-divider-fill-dark-default: #42454c;
371
380
  --wds-sidebar-clear-button-fill: #5a5d63;
372
- --wds-sidebar-border-outer-fill: #EEEEEE;
381
+ --wds-sidebar-border-outer-fill: #D9D9D9;
373
382
  --wds-sidebar-border-inner-fill: #FFFFFF;
374
383
  --wds-side-panel-standard-overflow: hidden;
375
384
  --wds-side-panel-header-divider-height: 0;
@@ -1191,8 +1200,8 @@
1191
1200
  --wds-swatches-list-gap: var(--wds-space-300);
1192
1201
  --wds-swatches-fill-border-disabled: var(--wds-color-black-100-transparent-5);
1193
1202
  --wds-suffix-active-font-weight: var(--wds-font-weight-semi-bold);
1194
- --wds-stepper-prefix-size-number: var(--wds-space-600);
1195
- --wds-stepper-prefix-size-circle: var(--wds-space-700);
1203
+ --wds-stepper-prefix-size-number: var(--wds-space-475);
1204
+ --wds-stepper-prefix-size-circle: var(--wds-space-550);
1196
1205
  --wds-statistics-widget-value-font-family-tiny: var(--wds-font-family-display);
1197
1206
  --wds-statistics-widget-trend-space-top: var(--wds-space-0);
1198
1207
  --wds-statistics-widget-padding-vertical-tiny: var(--wds-space-300);
@@ -1214,16 +1223,17 @@
1214
1223
  --wds-skeleton-border-radius-rectangle: var(--wds-border-radius-200);
1215
1224
  --wds-skeleton-border-radius-line: var(--wds-border-radius-200);
1216
1225
  --wds-skeleton-border-radius-circle: var(--wds-border-radius-full);
1226
+ --wds-sidebar-submenu-level-2-padding-bottom: var(--wds-space-100);
1217
1227
  --wds-sidebar-scrollbar-fill-neutral-hover: var(--wds-color-black-500);
1218
1228
  --wds-sidebar-scrollbar-fill-neutral-default: var(--wds-color-black-550);
1219
1229
  --wds-sidebar-scrollbar-fill-light-hover: var(--wds-color-black-500);
1220
1230
  --wds-sidebar-scrollbar-fill-light-default: var(--wds-color-black-550);
1221
- --wds-sidebar-padding-top: var(--wds-space-600);
1231
+ --wds-sidebar-padding-top: var(--wds-space-200);
1222
1232
  --wds-sidebar-padding-start: var(--wds-space-300);
1223
- --wds-sidebar-padding-end: var(--wds-space-350);
1224
- --wds-sidebar-padding-bottom: var(--wds-space-600);
1233
+ --wds-sidebar-padding-end: var(--wds-space-300);
1234
+ --wds-sidebar-padding-bottom: var(--wds-space-200);
1225
1235
  --wds-sidebar-navigation-arrow-fill-neutral: var(--wds-color-white);
1226
- --wds-sidebar-minimized-padding-inline: var(--wds-space-400);
1236
+ --wds-sidebar-minimized-padding-inline: var(--wds-space-300);
1227
1237
  --wds-sidebar-minimize-tooltip-text-neutral-default: var(--wds-color-black-200);
1228
1238
  --wds-sidebar-minimize-tooltip-text-light-default: var(--wds-color-black-200);
1229
1239
  --wds-sidebar-minimize-tooltip-text-dark-default: var(--wds-color-white);
@@ -1272,8 +1282,8 @@
1272
1282
  --wds-sidebar-item-context-menu-padding-inline: var(--wds-space-200);
1273
1283
  --wds-sidebar-item-content-gap: var(--wds-space-200);
1274
1284
  --wds-sidebar-item-border-radius: var(--wds-border-radius-400);
1275
- --wds-sidebar-header-margin-bottom: var(--wds-space-400);
1276
- --wds-sidebar-footer-fade-height: var(--wds-space-1500);
1285
+ --wds-sidebar-header-margin-bottom: var(--wds-space-0);
1286
+ --wds-sidebar-footer-fade-height: var(--wds-space-0);
1277
1287
  --wds-sidebar-fill-neutral: var(--wds-color-fill-surface-stage);
1278
1288
  --wds-sidebar-fill-light: var(--wds-color-fill-surface-stage);
1279
1289
  --wds-sidebar-fill-dark: var(--wds-sidebar-item-level-1-fill-dark-default);
@@ -1481,7 +1491,7 @@
1481
1491
  --wds-notification-fill-warning: var(--wds-color-yellow-400);
1482
1492
  --wds-notification-fill-success: var(--wds-color-green-400);
1483
1493
  --wds-notification-fill-standard: var(--wds-color-blue-400);
1484
- --wds-notification-fill-premium: var(--wds-color-iris-500);
1494
+ --wds-notification-fill-premium: var(--wds-color-purple-500);
1485
1495
  --wds-notification-fill-error: var(--wds-color-red-400);
1486
1496
  --wds-notification-border-width: var(--wds-border-width-100);
1487
1497
  --wds-notification-border-radius: var(--wds-border-radius-400);
@@ -2345,7 +2355,7 @@
2345
2355
  --wds-page-header-subtitle-font-size: var(--wds-font-size-body-small);
2346
2356
  --wds-number-input-spacing: var(--wds-form-field-label-gap-tiny);
2347
2357
  --wds-number-input-icon-fill: var(--wds-color-text-standard-secondary);
2348
- --wds-notification-content-color: var(--wds-color-text-standard-secondary);
2358
+ --wds-notification-content-color: var(--wds-color-text-standard-primary);
2349
2359
  --wds-multiselect-icon-fill: var(--wds-color-text-standard-secondary);
2350
2360
  --wds-message-modal-text-font-size: var(--wds-font-size-body-small);
2351
2361
  --wds-message-modal-close-button-fill: var(--wds-color-fill-dark-secondary);
package/odeditor/all.scss CHANGED
@@ -81,11 +81,10 @@
81
81
  --wds-slider-slider-knob-shadow: false;
82
82
  --wds-slider-slider-knob-border-width-hover: 12px;
83
83
  --wds-slider-slider-knob-border-width: 2px;
84
- --wds-sidebar-submenu-level-2-padding-bottom: 0px;
85
84
  --wds-sidebar-scrollbar-fill-dark-hover: #9c9ea6;
86
85
  --wds-sidebar-scrollbar-fill-dark-default: #717379;
87
86
  --wds-sidebar-scrollbar-fill-dark-active: #b8b9bc;
88
- --wds-sidebar-minimized-width: 62px;
87
+ --wds-sidebar-minimized-width: 54px;
89
88
  --wds-sidebar-minimize-tooltip-fill-dark-default: #333850;
90
89
  --wds-sidebar-minimize-action-fill-dark-default: #42454c;
91
90
  --wds-sidebar-item-text-line-clamp: 1;
@@ -102,7 +101,7 @@
102
101
  --wds-sidebar-divider-fill-light-default: transparent;
103
102
  --wds-sidebar-divider-fill-dark-default: #42454c;
104
103
  --wds-sidebar-clear-button-fill: #5a5d63;
105
- --wds-sidebar-border-outer-fill: #EEEEEE;
104
+ --wds-sidebar-border-outer-fill: #D9D9D9;
106
105
  --wds-sidebar-border-inner-fill: #FFFFFF;
107
106
  --wds-side-panel-standard-overflow: hidden;
108
107
  --wds-side-panel-header-divider-height: 0;
@@ -151,6 +150,16 @@
151
150
  --wds-page-header-breadcrumbs-offset-small: -8px;
152
151
  --wds-page-header-breadcrumbs-offset-medium: -8px;
153
152
  --wds-page-header-breadcrumbs-offset-large: -8px;
153
+ --wds-motion-easing-1000: cubic-bezier(0.4, 0, 1, 1);
154
+ --wds-motion-easing-900: cubic-bezier(0.26, 0, 0.67, 1);
155
+ --wds-motion-easing-800: cubic-bezier(0.18, 0.89, 0.32, 1.28);
156
+ --wds-motion-easing-700: cubic-bezier(0.25, 1, 0.5, 1);
157
+ --wds-motion-easing-600: cubic-bezier(0, 0, 0.2, 1);
158
+ --wds-motion-easing-500: cubic-bezier(0, 0, 0.58, 1);
159
+ --wds-motion-easing-400: cubic-bezier(0.76, 0, 0.24, 1);
160
+ --wds-motion-easing-300: cubic-bezier(0.4, 0, 0.2, 1);
161
+ --wds-motion-easing-200: cubic-bezier(0.42, 0, 0.58, 1);
162
+ --wds-motion-easing-100: linear;
154
163
  --wds-marketing-page-title-line-height: 38px;
155
164
  --wds-marketing-page-overline-divider-display: none;
156
165
  --wds-marketing-page-image-top-title-subtitle-gap: 16px;
@@ -776,8 +785,8 @@
776
785
  --wds-swatches-list-gap: var(--wds-space-300);
777
786
  --wds-swatches-fill-border-disabled: var(--wds-color-black-100-transparent-5);
778
787
  --wds-suffix-active-font-weight: var(--wds-font-weight-semi-bold);
779
- --wds-stepper-prefix-size-number: var(--wds-space-600);
780
- --wds-stepper-prefix-size-circle: var(--wds-space-700);
788
+ --wds-stepper-prefix-size-number: var(--wds-space-475);
789
+ --wds-stepper-prefix-size-circle: var(--wds-space-550);
781
790
  --wds-statistics-widget-value-font-family-tiny: var(--wds-font-family-display);
782
791
  --wds-statistics-widget-trend-space-top: var(--wds-space-0);
783
792
  --wds-statistics-widget-padding-vertical-tiny: var(--wds-space-300);
@@ -813,16 +822,17 @@
813
822
  --wds-skeleton-border-radius-rectangle: var(--wds-border-radius-200);
814
823
  --wds-skeleton-border-radius-line: var(--wds-border-radius-200);
815
824
  --wds-skeleton-border-radius-circle: var(--wds-border-radius-full);
825
+ --wds-sidebar-submenu-level-2-padding-bottom: var(--wds-space-100);
816
826
  --wds-sidebar-scrollbar-fill-neutral-hover: var(--wds-color-black-500);
817
827
  --wds-sidebar-scrollbar-fill-neutral-default: var(--wds-color-black-550);
818
828
  --wds-sidebar-scrollbar-fill-light-hover: var(--wds-color-black-500);
819
829
  --wds-sidebar-scrollbar-fill-light-default: var(--wds-color-black-550);
820
- --wds-sidebar-padding-top: var(--wds-space-600);
830
+ --wds-sidebar-padding-top: var(--wds-space-200);
821
831
  --wds-sidebar-padding-start: var(--wds-space-300);
822
- --wds-sidebar-padding-end: var(--wds-space-350);
823
- --wds-sidebar-padding-bottom: var(--wds-space-600);
832
+ --wds-sidebar-padding-end: var(--wds-space-300);
833
+ --wds-sidebar-padding-bottom: var(--wds-space-200);
824
834
  --wds-sidebar-navigation-arrow-fill-neutral: var(--wds-color-white);
825
- --wds-sidebar-minimized-padding-inline: var(--wds-space-400);
835
+ --wds-sidebar-minimized-padding-inline: var(--wds-space-300);
826
836
  --wds-sidebar-minimize-tooltip-text-neutral-default: var(--wds-color-black-200);
827
837
  --wds-sidebar-minimize-tooltip-text-light-default: var(--wds-color-black-200);
828
838
  --wds-sidebar-minimize-tooltip-text-dark-default: var(--wds-color-white);
@@ -871,8 +881,8 @@
871
881
  --wds-sidebar-item-context-menu-padding-inline: var(--wds-space-200);
872
882
  --wds-sidebar-item-content-gap: var(--wds-space-200);
873
883
  --wds-sidebar-item-border-radius: var(--wds-border-radius-400);
874
- --wds-sidebar-header-margin-bottom: var(--wds-space-400);
875
- --wds-sidebar-footer-fade-height: var(--wds-space-1500);
884
+ --wds-sidebar-header-margin-bottom: var(--wds-space-0);
885
+ --wds-sidebar-footer-fade-height: var(--wds-space-0);
876
886
  --wds-sidebar-fill-neutral: var(--wds-color-fill-surface-stage);
877
887
  --wds-sidebar-fill-light: var(--wds-color-fill-surface-stage);
878
888
  --wds-sidebar-fill-dark: var(--wds-sidebar-item-level-1-fill-dark-default);
@@ -1151,7 +1161,7 @@
1151
1161
  --wds-notification-fill-warning: var(--wds-color-yellow-400);
1152
1162
  --wds-notification-fill-success: var(--wds-color-green-400);
1153
1163
  --wds-notification-fill-standard: var(--wds-color-blue-400);
1154
- --wds-notification-fill-premium: var(--wds-color-iris-500);
1164
+ --wds-notification-fill-premium: var(--wds-color-purple-500);
1155
1165
  --wds-notification-fill-error: var(--wds-color-red-400);
1156
1166
  --wds-notification-border-width: var(--wds-border-width-100);
1157
1167
  --wds-notification-border-radius: var(--wds-border-radius-400);
@@ -2314,7 +2324,7 @@
2314
2324
  --wds-page-header-subtitle-font-size: var(--wds-font-size-body-small);
2315
2325
  --wds-number-input-spacing: var(--wds-form-field-label-gap-tiny);
2316
2326
  --wds-number-input-icon-fill: var(--wds-color-text-standard-secondary);
2317
- --wds-notification-content-color: var(--wds-color-text-standard-secondary);
2327
+ --wds-notification-content-color: var(--wds-color-text-standard-primary);
2318
2328
  --wds-multiselect-icon-fill: var(--wds-color-text-standard-secondary);
2319
2329
  --wds-message-modal-text-font-size: var(--wds-font-size-body-small);
2320
2330
  --wds-message-modal-close-button-fill: var(--wds-color-fill-dark-secondary);
package/odeditor/all.st.css CHANGED
@@ -1727,6 +1727,16 @@
1727
1727
  @property st-global(--wds-mobile-modal-content-padding-vertical);
1728
1728
  @property st-global(--wds-mobile-modal-footer-padding-horizontal);
1729
1729
  @property st-global(--wds-mobile-modal-footer-padding-vertical);
1730
+ @property st-global(--wds-motion-easing-100);
1731
+ @property st-global(--wds-motion-easing-200);
1732
+ @property st-global(--wds-motion-easing-300);
1733
+ @property st-global(--wds-motion-easing-400);
1734
+ @property st-global(--wds-motion-easing-500);
1735
+ @property st-global(--wds-motion-easing-600);
1736
+ @property st-global(--wds-motion-easing-700);
1737
+ @property st-global(--wds-motion-easing-800);
1738
+ @property st-global(--wds-motion-easing-900);
1739
+ @property st-global(--wds-motion-easing-1000);
1730
1740
  @property st-global(--wds-multiselect-icon-fill);
1731
1741
  @property st-global(--wds-nestable-list-fill);
1732
1742
  @property st-global(--wds-nestable-list-paddings);
@@ -4499,15 +4509,25 @@
4499
4509
  --wds-mobile-modal-content-padding-vertical: 24px;
4500
4510
  --wds-mobile-modal-footer-padding-horizontal: 24px;
4501
4511
  --wds-mobile-modal-footer-padding-vertical: 24px;
4512
+ --wds-motion-easing-100: linear;
4513
+ --wds-motion-easing-200: cubic-bezier(0.42, 0, 0.58, 1);
4514
+ --wds-motion-easing-300: cubic-bezier(0.4, 0, 0.2, 1);
4515
+ --wds-motion-easing-400: cubic-bezier(0.76, 0, 0.24, 1);
4516
+ --wds-motion-easing-500: cubic-bezier(0, 0, 0.58, 1);
4517
+ --wds-motion-easing-600: cubic-bezier(0, 0, 0.2, 1);
4518
+ --wds-motion-easing-700: cubic-bezier(0.25, 1, 0.5, 1);
4519
+ --wds-motion-easing-800: cubic-bezier(0.18, 0.89, 0.32, 1.28);
4520
+ --wds-motion-easing-900: cubic-bezier(0.26, 0, 0.67, 1);
4521
+ --wds-motion-easing-1000: cubic-bezier(0.4, 0, 1, 1);
4502
4522
  --wds-multiselect-icon-fill: #383838;
4503
4523
  --wds-nestable-list-fill: rgba(255, 255, 255, 0);
4504
4524
  --wds-nestable-list-paddings: 8px;
4505
4525
  --wds-notification-border-color: #ffffff;
4506
4526
  --wds-notification-border-radius: 8px;
4507
4527
  --wds-notification-border-width: 1px;
4508
- --wds-notification-content-color: #383838;
4528
+ --wds-notification-content-color: #151414;
4509
4529
  --wds-notification-fill-error: #f4b8b9;
4510
- --wds-notification-fill-premium: #e7e4fe;
4530
+ --wds-notification-fill-premium: #f1e5fe;
4511
4531
  --wds-notification-fill-standard: #d5dfff;
4512
4532
  --wds-notification-fill-success: #daf3c0;
4513
4533
  --wds-notification-fill-warning: #fdead2;
@@ -4915,7 +4935,7 @@
4915
4935
  --wds-side-panel-title-font-line-height: 24px;
4916
4936
  --wds-side-panel-title-font-size: 16px;
4917
4937
  --wds-sidebar-border-inner-fill: #FFFFFF;
4918
- --wds-sidebar-border-outer-fill: #EEEEEE;
4938
+ --wds-sidebar-border-outer-fill: #D9D9D9;
4919
4939
  --wds-sidebar-clear-button-fill: #5a5d63;
4920
4940
  --wds-sidebar-divider-fill-dark-default: #42454c;
4921
4941
  --wds-sidebar-divider-fill-light-default: transparent;
@@ -4926,8 +4946,8 @@
4926
4946
  --wds-sidebar-fill-dark: #131720;
4927
4947
  --wds-sidebar-fill-light: #F7F7F7;
4928
4948
  --wds-sidebar-fill-neutral: #F7F7F7;
4929
- --wds-sidebar-footer-fade-height: 60px;
4930
- --wds-sidebar-header-margin-bottom: 16px;
4949
+ --wds-sidebar-footer-fade-height: 0px;
4950
+ --wds-sidebar-header-margin-bottom: 0px;
4931
4951
  --wds-sidebar-header-text-dark-default: #ffffff;
4932
4952
  --wds-sidebar-item-border-radius: 8px;
4933
4953
  --wds-sidebar-item-content-gap: 8px;
@@ -5001,13 +5021,13 @@
5001
5021
  --wds-sidebar-minimize-tooltip-text-dark-default: #ffffff;
5002
5022
  --wds-sidebar-minimize-tooltip-text-light-default: #383838;
5003
5023
  --wds-sidebar-minimize-tooltip-text-neutral-default: #383838;
5004
- --wds-sidebar-minimized-padding-inline: 16px;
5005
- --wds-sidebar-minimized-width: 62px;
5024
+ --wds-sidebar-minimized-padding-inline: 12px;
5025
+ --wds-sidebar-minimized-width: 54px;
5006
5026
  --wds-sidebar-navigation-arrow-fill-neutral: #ffffff;
5007
- --wds-sidebar-padding-bottom: 24px;
5008
- --wds-sidebar-padding-end: 14px;
5027
+ --wds-sidebar-padding-bottom: 8px;
5028
+ --wds-sidebar-padding-end: 12px;
5009
5029
  --wds-sidebar-padding-start: 12px;
5010
- --wds-sidebar-padding-top: 24px;
5030
+ --wds-sidebar-padding-top: 8px;
5011
5031
  --wds-sidebar-scrollbar-fill-dark-active: #b8b9bc;
5012
5032
  --wds-sidebar-scrollbar-fill-dark-default: #717379;
5013
5033
  --wds-sidebar-scrollbar-fill-dark-hover: #9c9ea6;
@@ -5015,7 +5035,7 @@
5015
5035
  --wds-sidebar-scrollbar-fill-light-hover: #a8a6a5;
5016
5036
  --wds-sidebar-scrollbar-fill-neutral-default: #dedede;
5017
5037
  --wds-sidebar-scrollbar-fill-neutral-hover: #a8a6a5;
5018
- --wds-sidebar-submenu-level-2-padding-bottom: 0px;
5038
+ --wds-sidebar-submenu-level-2-padding-bottom: 4px;
5019
5039
  --wds-skeleton-border-radius-circle: 1000px;
5020
5040
  --wds-skeleton-border-radius-line: 4px;
5021
5041
  --wds-skeleton-border-radius-rectangle: 4px;
@@ -5106,8 +5126,8 @@
5106
5126
  --wds-status-toast-text-font-line-height: 18px;
5107
5127
  --wds-status-toast-text-font-size: 14px;
5108
5128
  --wds-status-toast-width: 600px;
5109
- --wds-stepper-prefix-size-circle: 28px;
5110
- --wds-stepper-prefix-size-number: 24px;
5129
+ --wds-stepper-prefix-size-circle: 22px;
5130
+ --wds-stepper-prefix-size-number: 18px;
5111
5131
  --wds-subtitle-font-line-height-medium: 16px;
5112
5132
  --wds-subtitle-font-size-medium: 12px;
5113
5133
  --wds-suffix-active-font-weight: 600;
package/odeditor/component.st.css CHANGED
@@ -3156,9 +3156,9 @@
3156
3156
  --wds-notification-border-color: #ffffff;
3157
3157
  --wds-notification-border-radius: 8px;
3158
3158
  --wds-notification-border-width: 1px;
3159
- --wds-notification-content-color: #383838;
3159
+ --wds-notification-content-color: #151414;
3160
3160
  --wds-notification-fill-error: #f4b8b9;
3161
- --wds-notification-fill-premium: #e7e4fe;
3161
+ --wds-notification-fill-premium: #f1e5fe;
3162
3162
  --wds-notification-fill-standard: #d5dfff;
3163
3163
  --wds-notification-fill-success: #daf3c0;
3164
3164
  --wds-notification-fill-warning: #fdead2;
@@ -3455,7 +3455,7 @@
3455
3455
  --wds-side-panel-title-font-line-height: 24px;
3456
3456
  --wds-side-panel-title-font-size: 16px;
3457
3457
  --wds-sidebar-border-inner-fill: #FFFFFF;
3458
- --wds-sidebar-border-outer-fill: #EEEEEE;
3458
+ --wds-sidebar-border-outer-fill: #D9D9D9;
3459
3459
  --wds-sidebar-clear-button-fill: #5a5d63;
3460
3460
  --wds-sidebar-divider-fill-dark-default: #42454c;
3461
3461
  --wds-sidebar-divider-fill-light-default: transparent;
@@ -3466,8 +3466,8 @@
3466
3466
  --wds-sidebar-fill-dark: #131720;
3467
3467
  --wds-sidebar-fill-light: #F7F7F7;
3468
3468
  --wds-sidebar-fill-neutral: #F7F7F7;
3469
- --wds-sidebar-footer-fade-height: 60px;
3470
- --wds-sidebar-header-margin-bottom: 16px;
3469
+ --wds-sidebar-footer-fade-height: 0px;
3470
+ --wds-sidebar-header-margin-bottom: 0px;
3471
3471
  --wds-sidebar-header-text-dark-default: #ffffff;
3472
3472
  --wds-sidebar-item-border-radius: 8px;
3473
3473
  --wds-sidebar-item-content-gap: 8px;
@@ -3541,13 +3541,13 @@
3541
3541
  --wds-sidebar-minimize-tooltip-text-dark-default: #ffffff;
3542
3542
  --wds-sidebar-minimize-tooltip-text-light-default: #383838;
3543
3543
  --wds-sidebar-minimize-tooltip-text-neutral-default: #383838;
3544
- --wds-sidebar-minimized-padding-inline: 16px;
3545
- --wds-sidebar-minimized-width: 62px;
3544
+ --wds-sidebar-minimized-padding-inline: 12px;
3545
+ --wds-sidebar-minimized-width: 54px;
3546
3546
  --wds-sidebar-navigation-arrow-fill-neutral: #ffffff;
3547
- --wds-sidebar-padding-bottom: 24px;
3548
- --wds-sidebar-padding-end: 14px;
3547
+ --wds-sidebar-padding-bottom: 8px;
3548
+ --wds-sidebar-padding-end: 12px;
3549
3549
  --wds-sidebar-padding-start: 12px;
3550
- --wds-sidebar-padding-top: 24px;
3550
+ --wds-sidebar-padding-top: 8px;
3551
3551
  --wds-sidebar-scrollbar-fill-dark-active: #b8b9bc;
3552
3552
  --wds-sidebar-scrollbar-fill-dark-default: #717379;
3553
3553
  --wds-sidebar-scrollbar-fill-dark-hover: #9c9ea6;
@@ -3555,7 +3555,7 @@
3555
3555
  --wds-sidebar-scrollbar-fill-light-hover: #a8a6a5;
3556
3556
  --wds-sidebar-scrollbar-fill-neutral-default: #dedede;
3557
3557
  --wds-sidebar-scrollbar-fill-neutral-hover: #a8a6a5;
3558
- --wds-sidebar-submenu-level-2-padding-bottom: 0px;
3558
+ --wds-sidebar-submenu-level-2-padding-bottom: 4px;
3559
3559
  --wds-skeleton-border-radius-circle: 1000px;
3560
3560
  --wds-skeleton-border-radius-line: 4px;
3561
3561
  --wds-skeleton-border-radius-rectangle: 4px;
@@ -3600,8 +3600,8 @@
3600
3600
  --wds-status-toast-text-font-line-height: 18px;
3601
3601
  --wds-status-toast-text-font-size: 14px;
3602
3602
  --wds-status-toast-width: 600px;
3603
- --wds-stepper-prefix-size-circle: 28px;
3604
- --wds-stepper-prefix-size-number: 24px;
3603
+ --wds-stepper-prefix-size-circle: 22px;
3604
+ --wds-stepper-prefix-size-number: 18px;
3605
3605
  --wds-subtitle-font-line-height-medium: 16px;
3606
3606
  --wds-subtitle-font-size-medium: 12px;
3607
3607
  --wds-suffix-active-font-weight: 600;
package/odeditor/foundation.st.css CHANGED
@@ -167,6 +167,16 @@
167
167
  @property st-global(--wds-font-weight-regular);
168
168
  @property st-global(--wds-font-weight-semi-bold);
169
169
  @property st-global(--wds-internal-theme);
170
+ @property st-global(--wds-motion-easing-100);
171
+ @property st-global(--wds-motion-easing-200);
172
+ @property st-global(--wds-motion-easing-300);
173
+ @property st-global(--wds-motion-easing-400);
174
+ @property st-global(--wds-motion-easing-500);
175
+ @property st-global(--wds-motion-easing-600);
176
+ @property st-global(--wds-motion-easing-700);
177
+ @property st-global(--wds-motion-easing-800);
178
+ @property st-global(--wds-motion-easing-900);
179
+ @property st-global(--wds-motion-easing-1000);
170
180
  @property st-global(--wds-shadow-100);
171
181
  @property st-global(--wds-shadow-200);
172
182
  @property st-global(--wds-shadow-300);
@@ -411,6 +421,16 @@
411
421
  --wds-font-weight-regular: 400;
412
422
  --wds-font-weight-semi-bold: 600;
413
423
  --wds-internal-theme: odeditor;
424
+ --wds-motion-easing-100: linear;
425
+ --wds-motion-easing-200: cubic-bezier(0.42, 0, 0.58, 1);
426
+ --wds-motion-easing-300: cubic-bezier(0.4, 0, 0.2, 1);
427
+ --wds-motion-easing-400: cubic-bezier(0.76, 0, 0.24, 1);
428
+ --wds-motion-easing-500: cubic-bezier(0, 0, 0.58, 1);
429
+ --wds-motion-easing-600: cubic-bezier(0, 0, 0.2, 1);
430
+ --wds-motion-easing-700: cubic-bezier(0.25, 1, 0.5, 1);
431
+ --wds-motion-easing-800: cubic-bezier(0.18, 0.89, 0.32, 1.28);
432
+ --wds-motion-easing-900: cubic-bezier(0.26, 0, 0.67, 1);
433
+ --wds-motion-easing-1000: cubic-bezier(0.4, 0, 1, 1);
414
434
  --wds-shadow-100: 0 2px 1px rgba(19, 23, 32, .5), 0 0 3px rgba(19, 23, 32, .1);
415
435
  --wds-shadow-200: 0 2px 4px rgba(19, 23, 32, .05), 0 0 6px rgba(19, 23, 32, .1);
416
436
  --wds-shadow-300: 0 12px 30px 0 rgba(19, 23, 32, .1), 0 0px 0px 0 rgba(19, 23, 32, 0);
package/odeditor-dark/all.css CHANGED
@@ -80,6 +80,16 @@
80
80
  --wds-shadow-blur-35: 3px;
81
81
  --wds-shadow-blur-25: 2px;
82
82
  --wds-shadow-blur-0: 0px;
83
+ --wds-motion-easing-1000: cubic-bezier(0.4, 0, 1, 1);
84
+ --wds-motion-easing-900: cubic-bezier(0.26, 0, 0.67, 1);
85
+ --wds-motion-easing-800: cubic-bezier(0.18, 0.89, 0.32, 1.28);
86
+ --wds-motion-easing-700: cubic-bezier(0.25, 1, 0.5, 1);
87
+ --wds-motion-easing-600: cubic-bezier(0, 0, 0.2, 1);
88
+ --wds-motion-easing-500: cubic-bezier(0, 0, 0.58, 1);
89
+ --wds-motion-easing-400: cubic-bezier(0.76, 0, 0.24, 1);
90
+ --wds-motion-easing-300: cubic-bezier(0.4, 0, 0.2, 1);
91
+ --wds-motion-easing-200: cubic-bezier(0.42, 0, 0.58, 1);
92
+ --wds-motion-easing-100: linear;
83
93
  --wds-font-weight-heading-3: 700;
84
94
  --wds-font-weight-semi-bold: 600;
85
95
  --wds-font-weight-regular: 400;
package/odeditor-dark/all.scss CHANGED
@@ -165,6 +165,16 @@
165
165
  --wds-page-header-breadcrumbs-offset-small: -8px;
166
166
  --wds-page-header-breadcrumbs-offset-medium: -8px;
167
167
  --wds-page-header-breadcrumbs-offset-large: -8px;
168
+ --wds-motion-easing-1000: cubic-bezier(0.4, 0, 1, 1);
169
+ --wds-motion-easing-900: cubic-bezier(0.26, 0, 0.67, 1);
170
+ --wds-motion-easing-800: cubic-bezier(0.18, 0.89, 0.32, 1.28);
171
+ --wds-motion-easing-700: cubic-bezier(0.25, 1, 0.5, 1);
172
+ --wds-motion-easing-600: cubic-bezier(0, 0, 0.2, 1);
173
+ --wds-motion-easing-500: cubic-bezier(0, 0, 0.58, 1);
174
+ --wds-motion-easing-400: cubic-bezier(0.76, 0, 0.24, 1);
175
+ --wds-motion-easing-300: cubic-bezier(0.4, 0, 0.2, 1);
176
+ --wds-motion-easing-200: cubic-bezier(0.42, 0, 0.58, 1);
177
+ --wds-motion-easing-100: linear;
168
178
  --wds-marketing-page-overline-divider-margin-top: 17px;
169
179
  --wds-marketing-page-overline-divider-display: block;
170
180
  --wds-marketing-page-image-top-title-subtitle-gap: 16px;
package/odeditor-dark/all.st.css CHANGED
@@ -1733,6 +1733,16 @@
1733
1733
  @property st-global(--wds-mobile-modal-content-padding-vertical);
1734
1734
  @property st-global(--wds-mobile-modal-footer-padding-horizontal);
1735
1735
  @property st-global(--wds-mobile-modal-footer-padding-vertical);
1736
+ @property st-global(--wds-motion-easing-100);
1737
+ @property st-global(--wds-motion-easing-200);
1738
+ @property st-global(--wds-motion-easing-300);
1739
+ @property st-global(--wds-motion-easing-400);
1740
+ @property st-global(--wds-motion-easing-500);
1741
+ @property st-global(--wds-motion-easing-600);
1742
+ @property st-global(--wds-motion-easing-700);
1743
+ @property st-global(--wds-motion-easing-800);
1744
+ @property st-global(--wds-motion-easing-900);
1745
+ @property st-global(--wds-motion-easing-1000);
1736
1746
  @property st-global(--wds-multiselect-icon-fill);
1737
1747
  @property st-global(--wds-nestable-list-fill);
1738
1748
  @property st-global(--wds-nestable-list-paddings);
@@ -4505,6 +4515,16 @@
4505
4515
  --wds-mobile-modal-content-padding-vertical: 24px;
4506
4516
  --wds-mobile-modal-footer-padding-horizontal: 24px;
4507
4517
  --wds-mobile-modal-footer-padding-vertical: 24px;
4518
+ --wds-motion-easing-100: linear;
4519
+ --wds-motion-easing-200: cubic-bezier(0.42, 0, 0.58, 1);
4520
+ --wds-motion-easing-300: cubic-bezier(0.4, 0, 0.2, 1);
4521
+ --wds-motion-easing-400: cubic-bezier(0.76, 0, 0.24, 1);
4522
+ --wds-motion-easing-500: cubic-bezier(0, 0, 0.58, 1);
4523
+ --wds-motion-easing-600: cubic-bezier(0, 0, 0.2, 1);
4524
+ --wds-motion-easing-700: cubic-bezier(0.25, 1, 0.5, 1);
4525
+ --wds-motion-easing-800: cubic-bezier(0.18, 0.89, 0.32, 1.28);
4526
+ --wds-motion-easing-900: cubic-bezier(0.26, 0, 0.67, 1);
4527
+ --wds-motion-easing-1000: cubic-bezier(0.4, 0, 1, 1);
4508
4528
  --wds-multiselect-icon-fill: #D4D3D2;
4509
4529
  --wds-nestable-list-fill: rgba(0, 0, 0, 0);
4510
4530
  --wds-nestable-list-paddings: 8px;
package/odeditor-dark/foundation.st.css CHANGED
@@ -168,6 +168,16 @@
168
168
  @property st-global(--wds-font-weight-regular);
169
169
  @property st-global(--wds-font-weight-semi-bold);
170
170
  @property st-global(--wds-internal-theme);
171
+ @property st-global(--wds-motion-easing-100);
172
+ @property st-global(--wds-motion-easing-200);
173
+ @property st-global(--wds-motion-easing-300);
174
+ @property st-global(--wds-motion-easing-400);
175
+ @property st-global(--wds-motion-easing-500);
176
+ @property st-global(--wds-motion-easing-600);
177
+ @property st-global(--wds-motion-easing-700);
178
+ @property st-global(--wds-motion-easing-800);
179
+ @property st-global(--wds-motion-easing-900);
180
+ @property st-global(--wds-motion-easing-1000);
171
181
  @property st-global(--wds-shadow-100);
172
182
  @property st-global(--wds-shadow-200);
173
183
  @property st-global(--wds-shadow-300);
@@ -413,6 +423,16 @@
413
423
  --wds-font-weight-regular: 400;
414
424
  --wds-font-weight-semi-bold: 600;
415
425
  --wds-internal-theme: odeditor-dark;
426
+ --wds-motion-easing-100: linear;
427
+ --wds-motion-easing-200: cubic-bezier(0.42, 0, 0.58, 1);
428
+ --wds-motion-easing-300: cubic-bezier(0.4, 0, 0.2, 1);
429
+ --wds-motion-easing-400: cubic-bezier(0.76, 0, 0.24, 1);
430
+ --wds-motion-easing-500: cubic-bezier(0, 0, 0.58, 1);
431
+ --wds-motion-easing-600: cubic-bezier(0, 0, 0.2, 1);
432
+ --wds-motion-easing-700: cubic-bezier(0.25, 1, 0.5, 1);
433
+ --wds-motion-easing-800: cubic-bezier(0.18, 0.89, 0.32, 1.28);
434
+ --wds-motion-easing-900: cubic-bezier(0.26, 0, 0.67, 1);
435
+ --wds-motion-easing-1000: cubic-bezier(0.4, 0, 1, 1);
416
436
  --wds-shadow-100: 0 2px 1px rgba(0, 0, 0, .5), 0 0 3px rgba(0, 0, 0, .1);
417
437
  --wds-shadow-200: 0 2px 4px rgba(0, 0, 0, .05), 0 0 6px rgba(0, 0, 0, .1);
418
438
  --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.239.1",
3
+ "version": "1.241.0",
4
4
  "scripts": {
5
5
  "build": "cp -r tokens/* .",
6
6
  "figma-to-dictionary": "ts-node src/scripts/figma-to-dictionary.ts",
@@ -35,5 +35,5 @@
35
35
  "license": "MIT",
36
36
  "author": "augustinasv@wix.com",
37
37
  "description": "Design system tokens",
38
- "falconPackageHash": "c1c41e8fd37c41fea0421a71f513757e2c089592f3fd17f15b4919df"
38
+ "falconPackageHash": "57606cb36a2acb830db5f28668980ca748c5bc9b5a66acbec88b55b8"
39
39
  }
package/studio/all.css CHANGED
@@ -70,6 +70,16 @@
70
70
  --wds-shadow-blur-35: 3px;
71
71
  --wds-shadow-blur-25: 2px;
72
72
  --wds-shadow-blur-0: 0px;
73
+ --wds-motion-easing-1000: cubic-bezier(0.4, 0, 1, 1);
74
+ --wds-motion-easing-900: cubic-bezier(0.26, 0, 0.67, 1);
75
+ --wds-motion-easing-800: cubic-bezier(0.18, 0.89, 0.32, 1.28);
76
+ --wds-motion-easing-700: cubic-bezier(0.25, 1, 0.5, 1);
77
+ --wds-motion-easing-600: cubic-bezier(0, 0, 0.2, 1);
78
+ --wds-motion-easing-500: cubic-bezier(0, 0, 0.58, 1);
79
+ --wds-motion-easing-400: cubic-bezier(0.76, 0, 0.24, 1);
80
+ --wds-motion-easing-300: cubic-bezier(0.4, 0, 0.2, 1);
81
+ --wds-motion-easing-200: cubic-bezier(0.42, 0, 0.58, 1);
82
+ --wds-motion-easing-100: linear;
73
83
  --wds-font-weight-semi-bold: 600;
74
84
  --wds-font-weight-regular: 400;
75
85
  --wds-font-weight-medium: 500;
package/studio/all.scss CHANGED
@@ -138,6 +138,16 @@
138
138
  --wds-page-header-breadcrumbs-offset-small: -4px;
139
139
  --wds-page-header-breadcrumbs-offset-medium: -8px;
140
140
  --wds-page-header-breadcrumbs-offset-large: -16px;
141
+ --wds-motion-easing-1000: cubic-bezier(0.4, 0, 1, 1);
142
+ --wds-motion-easing-900: cubic-bezier(0.26, 0, 0.67, 1);
143
+ --wds-motion-easing-800: cubic-bezier(0.18, 0.89, 0.32, 1.28);
144
+ --wds-motion-easing-700: cubic-bezier(0.25, 1, 0.5, 1);
145
+ --wds-motion-easing-600: cubic-bezier(0, 0, 0.2, 1);
146
+ --wds-motion-easing-500: cubic-bezier(0, 0, 0.58, 1);
147
+ --wds-motion-easing-400: cubic-bezier(0.76, 0, 0.24, 1);
148
+ --wds-motion-easing-300: cubic-bezier(0.4, 0, 0.2, 1);
149
+ --wds-motion-easing-200: cubic-bezier(0.42, 0, 0.58, 1);
150
+ --wds-motion-easing-100: linear;
141
151
  --wds-message-modal-close-button-fill: transparent;
142
152
  --wds-marketing-page-overline-divider-margin-top: 17px;
143
153
  --wds-marketing-page-overline-divider-display: block;
package/studio/all.st.css CHANGED
@@ -1745,6 +1745,16 @@
1745
1745
  @property st-global(--wds-mobile-modal-content-padding-vertical);
1746
1746
  @property st-global(--wds-mobile-modal-footer-padding-horizontal);
1747
1747
  @property st-global(--wds-mobile-modal-footer-padding-vertical);
1748
+ @property st-global(--wds-motion-easing-100);
1749
+ @property st-global(--wds-motion-easing-200);
1750
+ @property st-global(--wds-motion-easing-300);
1751
+ @property st-global(--wds-motion-easing-400);
1752
+ @property st-global(--wds-motion-easing-500);
1753
+ @property st-global(--wds-motion-easing-600);
1754
+ @property st-global(--wds-motion-easing-700);
1755
+ @property st-global(--wds-motion-easing-800);
1756
+ @property st-global(--wds-motion-easing-900);
1757
+ @property st-global(--wds-motion-easing-1000);
1748
1758
  @property st-global(--wds-multiselect-icon-fill);
1749
1759
  @property st-global(--wds-nestable-list-fill);
1750
1760
  @property st-global(--wds-nestable-list-paddings);
@@ -4513,6 +4523,16 @@
4513
4523
  --wds-mobile-modal-content-padding-vertical: 24px;
4514
4524
  --wds-mobile-modal-footer-padding-horizontal: 24px;
4515
4525
  --wds-mobile-modal-footer-padding-vertical: 24px;
4526
+ --wds-motion-easing-100: linear;
4527
+ --wds-motion-easing-200: cubic-bezier(0.42, 0, 0.58, 1);
4528
+ --wds-motion-easing-300: cubic-bezier(0.4, 0, 0.2, 1);
4529
+ --wds-motion-easing-400: cubic-bezier(0.76, 0, 0.24, 1);
4530
+ --wds-motion-easing-500: cubic-bezier(0, 0, 0.58, 1);
4531
+ --wds-motion-easing-600: cubic-bezier(0, 0, 0.2, 1);
4532
+ --wds-motion-easing-700: cubic-bezier(0.25, 1, 0.5, 1);
4533
+ --wds-motion-easing-800: cubic-bezier(0.18, 0.89, 0.32, 1.28);
4534
+ --wds-motion-easing-900: cubic-bezier(0.26, 0, 0.67, 1);
4535
+ --wds-motion-easing-1000: cubic-bezier(0.4, 0, 1, 1);
4516
4536
  --wds-multiselect-icon-fill: #42454c;
4517
4537
  --wds-nestable-list-fill: #ffffff;
4518
4538
  --wds-nestable-list-paddings: 0px;