@wix/design-system-tokens 1.241.0 → 1.242.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 (30) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/all.css +16 -0
  3. package/all.scss +16 -0
  4. package/all.st.css +32 -0
  5. package/bm-dark/all.css +16 -0
  6. package/bm-dark/all.scss +16 -0
  7. package/bm-dark/all.st.css +32 -0
  8. package/bm-dark/foundation.st.css +32 -0
  9. package/bm-light/all.css +16 -0
  10. package/bm-light/all.scss +16 -0
  11. package/bm-light/all.st.css +32 -0
  12. package/bm-light/foundation.st.css +32 -0
  13. package/foundation.st.css +32 -0
  14. package/odeditor/all.css +16 -0
  15. package/odeditor/all.scss +16 -0
  16. package/odeditor/all.st.css +32 -0
  17. package/odeditor/foundation.st.css +32 -0
  18. package/odeditor-dark/all.css +16 -0
  19. package/odeditor-dark/all.scss +16 -0
  20. package/odeditor-dark/all.st.css +32 -0
  21. package/odeditor-dark/foundation.st.css +32 -0
  22. package/package.json +2 -2
  23. package/studio/all.css +16 -0
  24. package/studio/all.scss +16 -0
  25. package/studio/all.st.css +32 -0
  26. package/studio/foundation.st.css +32 -0
  27. package/studio2-light/all.css +16 -0
  28. package/studio2-light/all.scss +16 -0
  29. package/studio2-light/all.st.css +32 -0
  30. package/studio2-light/foundation.st.css +32 -0
package/CHANGELOG.md CHANGED
@@ -1,3 +1,9 @@
1
+ ## 1.242.0
2
+
3
+ ### Minor Changes
4
+
5
+ - [#17751](https://github.com/wix-private/wix-design-systems/pull/17751) [`fa43bf7`](https://github.com/wix-private/wix-design-systems/commit/fa43bf76227707d8539fec41ced754c2af126387) - Add a motion duration scale to all themes: sixteen steps from `--wds-motion-duration-100` (`50ms`) to `--wds-motion-duration-1600` (`800ms`), following the same step naming as the spacing scale, for timing transitions and animations consistently.
6
+
1
7
  ## 1.241.0
2
8
 
3
9
  ### Minor Changes
package/all.css CHANGED
@@ -68,6 +68,22 @@
68
68
  --wds-motion-easing-300: cubic-bezier(0.4, 0, 0.2, 1);
69
69
  --wds-motion-easing-200: cubic-bezier(0.42, 0, 0.58, 1);
70
70
  --wds-motion-easing-100: linear;
71
+ --wds-motion-duration-1600: 800ms;
72
+ --wds-motion-duration-1500: 750ms;
73
+ --wds-motion-duration-1400: 700ms;
74
+ --wds-motion-duration-1300: 650ms;
75
+ --wds-motion-duration-1200: 600ms;
76
+ --wds-motion-duration-1100: 550ms;
77
+ --wds-motion-duration-1000: 500ms;
78
+ --wds-motion-duration-900: 450ms;
79
+ --wds-motion-duration-800: 400ms;
80
+ --wds-motion-duration-700: 350ms;
81
+ --wds-motion-duration-600: 300ms;
82
+ --wds-motion-duration-500: 250ms;
83
+ --wds-motion-duration-400: 200ms;
84
+ --wds-motion-duration-300: 150ms;
85
+ --wds-motion-duration-200: 100ms;
86
+ --wds-motion-duration-100: 50ms;
71
87
  --wds-font-weight-semi-bold: 600;
72
88
  --wds-font-weight-regular: 400;
73
89
  --wds-font-weight-medium: 500;
package/all.scss CHANGED
@@ -145,6 +145,22 @@
145
145
  --wds-motion-easing-300: cubic-bezier(0.4, 0, 0.2, 1);
146
146
  --wds-motion-easing-200: cubic-bezier(0.42, 0, 0.58, 1);
147
147
  --wds-motion-easing-100: linear;
148
+ --wds-motion-duration-1600: 800ms;
149
+ --wds-motion-duration-1500: 750ms;
150
+ --wds-motion-duration-1400: 700ms;
151
+ --wds-motion-duration-1300: 650ms;
152
+ --wds-motion-duration-1200: 600ms;
153
+ --wds-motion-duration-1100: 550ms;
154
+ --wds-motion-duration-1000: 500ms;
155
+ --wds-motion-duration-900: 450ms;
156
+ --wds-motion-duration-800: 400ms;
157
+ --wds-motion-duration-700: 350ms;
158
+ --wds-motion-duration-600: 300ms;
159
+ --wds-motion-duration-500: 250ms;
160
+ --wds-motion-duration-400: 200ms;
161
+ --wds-motion-duration-300: 150ms;
162
+ --wds-motion-duration-200: 100ms;
163
+ --wds-motion-duration-100: 50ms;
148
164
  --wds-message-modal-close-button-fill: transparent;
149
165
  --wds-marketing-page-overline-divider-margin-top: 17px;
150
166
  --wds-marketing-page-overline-divider-display: block;
package/all.st.css CHANGED
@@ -1749,6 +1749,22 @@
1749
1749
  @property st-global(--wds-mobile-modal-content-padding-vertical);
1750
1750
  @property st-global(--wds-mobile-modal-footer-padding-horizontal);
1751
1751
  @property st-global(--wds-mobile-modal-footer-padding-vertical);
1752
+ @property st-global(--wds-motion-duration-100);
1753
+ @property st-global(--wds-motion-duration-200);
1754
+ @property st-global(--wds-motion-duration-300);
1755
+ @property st-global(--wds-motion-duration-400);
1756
+ @property st-global(--wds-motion-duration-500);
1757
+ @property st-global(--wds-motion-duration-600);
1758
+ @property st-global(--wds-motion-duration-700);
1759
+ @property st-global(--wds-motion-duration-800);
1760
+ @property st-global(--wds-motion-duration-900);
1761
+ @property st-global(--wds-motion-duration-1000);
1762
+ @property st-global(--wds-motion-duration-1100);
1763
+ @property st-global(--wds-motion-duration-1200);
1764
+ @property st-global(--wds-motion-duration-1300);
1765
+ @property st-global(--wds-motion-duration-1400);
1766
+ @property st-global(--wds-motion-duration-1500);
1767
+ @property st-global(--wds-motion-duration-1600);
1752
1768
  @property st-global(--wds-motion-easing-100);
1753
1769
  @property st-global(--wds-motion-easing-200);
1754
1770
  @property st-global(--wds-motion-easing-300);
@@ -4540,6 +4556,22 @@
4540
4556
  --wds-mobile-modal-content-padding-vertical: 24px;
4541
4557
  --wds-mobile-modal-footer-padding-horizontal: 24px;
4542
4558
  --wds-mobile-modal-footer-padding-vertical: 24px;
4559
+ --wds-motion-duration-100: 50ms;
4560
+ --wds-motion-duration-200: 100ms;
4561
+ --wds-motion-duration-300: 150ms;
4562
+ --wds-motion-duration-400: 200ms;
4563
+ --wds-motion-duration-500: 250ms;
4564
+ --wds-motion-duration-600: 300ms;
4565
+ --wds-motion-duration-700: 350ms;
4566
+ --wds-motion-duration-800: 400ms;
4567
+ --wds-motion-duration-900: 450ms;
4568
+ --wds-motion-duration-1000: 500ms;
4569
+ --wds-motion-duration-1100: 550ms;
4570
+ --wds-motion-duration-1200: 600ms;
4571
+ --wds-motion-duration-1300: 650ms;
4572
+ --wds-motion-duration-1400: 700ms;
4573
+ --wds-motion-duration-1500: 750ms;
4574
+ --wds-motion-duration-1600: 800ms;
4543
4575
  --wds-motion-easing-100: linear;
4544
4576
  --wds-motion-easing-200: cubic-bezier(0.42, 0, 0.58, 1);
4545
4577
  --wds-motion-easing-300: cubic-bezier(0.4, 0, 0.2, 1);
package/bm-dark/all.css CHANGED
@@ -88,6 +88,22 @@
88
88
  --wds-motion-easing-300: cubic-bezier(0.4, 0, 0.2, 1);
89
89
  --wds-motion-easing-200: cubic-bezier(0.42, 0, 0.58, 1);
90
90
  --wds-motion-easing-100: linear;
91
+ --wds-motion-duration-1600: 800ms;
92
+ --wds-motion-duration-1500: 750ms;
93
+ --wds-motion-duration-1400: 700ms;
94
+ --wds-motion-duration-1300: 650ms;
95
+ --wds-motion-duration-1200: 600ms;
96
+ --wds-motion-duration-1100: 550ms;
97
+ --wds-motion-duration-1000: 500ms;
98
+ --wds-motion-duration-900: 450ms;
99
+ --wds-motion-duration-800: 400ms;
100
+ --wds-motion-duration-700: 350ms;
101
+ --wds-motion-duration-600: 300ms;
102
+ --wds-motion-duration-500: 250ms;
103
+ --wds-motion-duration-400: 200ms;
104
+ --wds-motion-duration-300: 150ms;
105
+ --wds-motion-duration-200: 100ms;
106
+ --wds-motion-duration-100: 50ms;
91
107
  --wds-font-weight-heading-3: 700;
92
108
  --wds-font-weight-semi-bold: 600;
93
109
  --wds-font-weight-regular: 400;
package/bm-dark/all.scss CHANGED
@@ -161,6 +161,22 @@
161
161
  --wds-motion-easing-300: cubic-bezier(0.4, 0, 0.2, 1);
162
162
  --wds-motion-easing-200: cubic-bezier(0.42, 0, 0.58, 1);
163
163
  --wds-motion-easing-100: linear;
164
+ --wds-motion-duration-1600: 800ms;
165
+ --wds-motion-duration-1500: 750ms;
166
+ --wds-motion-duration-1400: 700ms;
167
+ --wds-motion-duration-1300: 650ms;
168
+ --wds-motion-duration-1200: 600ms;
169
+ --wds-motion-duration-1100: 550ms;
170
+ --wds-motion-duration-1000: 500ms;
171
+ --wds-motion-duration-900: 450ms;
172
+ --wds-motion-duration-800: 400ms;
173
+ --wds-motion-duration-700: 350ms;
174
+ --wds-motion-duration-600: 300ms;
175
+ --wds-motion-duration-500: 250ms;
176
+ --wds-motion-duration-400: 200ms;
177
+ --wds-motion-duration-300: 150ms;
178
+ --wds-motion-duration-200: 100ms;
179
+ --wds-motion-duration-100: 50ms;
164
180
  --wds-marketing-page-title-line-height: 38px;
165
181
  --wds-marketing-page-overline-divider-display: none;
166
182
  --wds-marketing-page-image-top-title-subtitle-gap: 16px;
package/bm-dark/all.st.css CHANGED
@@ -1727,6 +1727,22 @@
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-duration-100);
1731
+ @property st-global(--wds-motion-duration-200);
1732
+ @property st-global(--wds-motion-duration-300);
1733
+ @property st-global(--wds-motion-duration-400);
1734
+ @property st-global(--wds-motion-duration-500);
1735
+ @property st-global(--wds-motion-duration-600);
1736
+ @property st-global(--wds-motion-duration-700);
1737
+ @property st-global(--wds-motion-duration-800);
1738
+ @property st-global(--wds-motion-duration-900);
1739
+ @property st-global(--wds-motion-duration-1000);
1740
+ @property st-global(--wds-motion-duration-1100);
1741
+ @property st-global(--wds-motion-duration-1200);
1742
+ @property st-global(--wds-motion-duration-1300);
1743
+ @property st-global(--wds-motion-duration-1400);
1744
+ @property st-global(--wds-motion-duration-1500);
1745
+ @property st-global(--wds-motion-duration-1600);
1730
1746
  @property st-global(--wds-motion-easing-100);
1731
1747
  @property st-global(--wds-motion-easing-200);
1732
1748
  @property st-global(--wds-motion-easing-300);
@@ -4509,6 +4525,22 @@
4509
4525
  --wds-mobile-modal-content-padding-vertical: 24px;
4510
4526
  --wds-mobile-modal-footer-padding-horizontal: 24px;
4511
4527
  --wds-mobile-modal-footer-padding-vertical: 24px;
4528
+ --wds-motion-duration-100: 50ms;
4529
+ --wds-motion-duration-200: 100ms;
4530
+ --wds-motion-duration-300: 150ms;
4531
+ --wds-motion-duration-400: 200ms;
4532
+ --wds-motion-duration-500: 250ms;
4533
+ --wds-motion-duration-600: 300ms;
4534
+ --wds-motion-duration-700: 350ms;
4535
+ --wds-motion-duration-800: 400ms;
4536
+ --wds-motion-duration-900: 450ms;
4537
+ --wds-motion-duration-1000: 500ms;
4538
+ --wds-motion-duration-1100: 550ms;
4539
+ --wds-motion-duration-1200: 600ms;
4540
+ --wds-motion-duration-1300: 650ms;
4541
+ --wds-motion-duration-1400: 700ms;
4542
+ --wds-motion-duration-1500: 750ms;
4543
+ --wds-motion-duration-1600: 800ms;
4512
4544
  --wds-motion-easing-100: linear;
4513
4545
  --wds-motion-easing-200: cubic-bezier(0.42, 0, 0.58, 1);
4514
4546
  --wds-motion-easing-300: cubic-bezier(0.4, 0, 0.2, 1);
package/bm-dark/foundation.st.css CHANGED
@@ -167,6 +167,22 @@
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-duration-100);
171
+ @property st-global(--wds-motion-duration-200);
172
+ @property st-global(--wds-motion-duration-300);
173
+ @property st-global(--wds-motion-duration-400);
174
+ @property st-global(--wds-motion-duration-500);
175
+ @property st-global(--wds-motion-duration-600);
176
+ @property st-global(--wds-motion-duration-700);
177
+ @property st-global(--wds-motion-duration-800);
178
+ @property st-global(--wds-motion-duration-900);
179
+ @property st-global(--wds-motion-duration-1000);
180
+ @property st-global(--wds-motion-duration-1100);
181
+ @property st-global(--wds-motion-duration-1200);
182
+ @property st-global(--wds-motion-duration-1300);
183
+ @property st-global(--wds-motion-duration-1400);
184
+ @property st-global(--wds-motion-duration-1500);
185
+ @property st-global(--wds-motion-duration-1600);
170
186
  @property st-global(--wds-motion-easing-100);
171
187
  @property st-global(--wds-motion-easing-200);
172
188
  @property st-global(--wds-motion-easing-300);
@@ -421,6 +437,22 @@
421
437
  --wds-font-weight-regular: 400;
422
438
  --wds-font-weight-semi-bold: 600;
423
439
  --wds-internal-theme: bm-dark;
440
+ --wds-motion-duration-100: 50ms;
441
+ --wds-motion-duration-200: 100ms;
442
+ --wds-motion-duration-300: 150ms;
443
+ --wds-motion-duration-400: 200ms;
444
+ --wds-motion-duration-500: 250ms;
445
+ --wds-motion-duration-600: 300ms;
446
+ --wds-motion-duration-700: 350ms;
447
+ --wds-motion-duration-800: 400ms;
448
+ --wds-motion-duration-900: 450ms;
449
+ --wds-motion-duration-1000: 500ms;
450
+ --wds-motion-duration-1100: 550ms;
451
+ --wds-motion-duration-1200: 600ms;
452
+ --wds-motion-duration-1300: 650ms;
453
+ --wds-motion-duration-1400: 700ms;
454
+ --wds-motion-duration-1500: 750ms;
455
+ --wds-motion-duration-1600: 800ms;
424
456
  --wds-motion-easing-100: linear;
425
457
  --wds-motion-easing-200: cubic-bezier(0.42, 0, 0.58, 1);
426
458
  --wds-motion-easing-300: cubic-bezier(0.4, 0, 0.2, 1);
package/bm-light/all.css CHANGED
@@ -88,6 +88,22 @@
88
88
  --wds-motion-easing-300: cubic-bezier(0.4, 0, 0.2, 1);
89
89
  --wds-motion-easing-200: cubic-bezier(0.42, 0, 0.58, 1);
90
90
  --wds-motion-easing-100: linear;
91
+ --wds-motion-duration-1600: 800ms;
92
+ --wds-motion-duration-1500: 750ms;
93
+ --wds-motion-duration-1400: 700ms;
94
+ --wds-motion-duration-1300: 650ms;
95
+ --wds-motion-duration-1200: 600ms;
96
+ --wds-motion-duration-1100: 550ms;
97
+ --wds-motion-duration-1000: 500ms;
98
+ --wds-motion-duration-900: 450ms;
99
+ --wds-motion-duration-800: 400ms;
100
+ --wds-motion-duration-700: 350ms;
101
+ --wds-motion-duration-600: 300ms;
102
+ --wds-motion-duration-500: 250ms;
103
+ --wds-motion-duration-400: 200ms;
104
+ --wds-motion-duration-300: 150ms;
105
+ --wds-motion-duration-200: 100ms;
106
+ --wds-motion-duration-100: 50ms;
91
107
  --wds-font-weight-heading-3: 700;
92
108
  --wds-font-weight-semi-bold: 600;
93
109
  --wds-font-weight-regular: 400;
package/bm-light/all.scss CHANGED
@@ -161,6 +161,22 @@
161
161
  --wds-motion-easing-300: cubic-bezier(0.4, 0, 0.2, 1);
162
162
  --wds-motion-easing-200: cubic-bezier(0.42, 0, 0.58, 1);
163
163
  --wds-motion-easing-100: linear;
164
+ --wds-motion-duration-1600: 800ms;
165
+ --wds-motion-duration-1500: 750ms;
166
+ --wds-motion-duration-1400: 700ms;
167
+ --wds-motion-duration-1300: 650ms;
168
+ --wds-motion-duration-1200: 600ms;
169
+ --wds-motion-duration-1100: 550ms;
170
+ --wds-motion-duration-1000: 500ms;
171
+ --wds-motion-duration-900: 450ms;
172
+ --wds-motion-duration-800: 400ms;
173
+ --wds-motion-duration-700: 350ms;
174
+ --wds-motion-duration-600: 300ms;
175
+ --wds-motion-duration-500: 250ms;
176
+ --wds-motion-duration-400: 200ms;
177
+ --wds-motion-duration-300: 150ms;
178
+ --wds-motion-duration-200: 100ms;
179
+ --wds-motion-duration-100: 50ms;
164
180
  --wds-marketing-page-title-line-height: 38px;
165
181
  --wds-marketing-page-overline-divider-display: none;
166
182
  --wds-marketing-page-image-top-title-subtitle-gap: 16px;
package/bm-light/all.st.css CHANGED
@@ -1727,6 +1727,22 @@
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-duration-100);
1731
+ @property st-global(--wds-motion-duration-200);
1732
+ @property st-global(--wds-motion-duration-300);
1733
+ @property st-global(--wds-motion-duration-400);
1734
+ @property st-global(--wds-motion-duration-500);
1735
+ @property st-global(--wds-motion-duration-600);
1736
+ @property st-global(--wds-motion-duration-700);
1737
+ @property st-global(--wds-motion-duration-800);
1738
+ @property st-global(--wds-motion-duration-900);
1739
+ @property st-global(--wds-motion-duration-1000);
1740
+ @property st-global(--wds-motion-duration-1100);
1741
+ @property st-global(--wds-motion-duration-1200);
1742
+ @property st-global(--wds-motion-duration-1300);
1743
+ @property st-global(--wds-motion-duration-1400);
1744
+ @property st-global(--wds-motion-duration-1500);
1745
+ @property st-global(--wds-motion-duration-1600);
1730
1746
  @property st-global(--wds-motion-easing-100);
1731
1747
  @property st-global(--wds-motion-easing-200);
1732
1748
  @property st-global(--wds-motion-easing-300);
@@ -4509,6 +4525,22 @@
4509
4525
  --wds-mobile-modal-content-padding-vertical: 24px;
4510
4526
  --wds-mobile-modal-footer-padding-horizontal: 24px;
4511
4527
  --wds-mobile-modal-footer-padding-vertical: 24px;
4528
+ --wds-motion-duration-100: 50ms;
4529
+ --wds-motion-duration-200: 100ms;
4530
+ --wds-motion-duration-300: 150ms;
4531
+ --wds-motion-duration-400: 200ms;
4532
+ --wds-motion-duration-500: 250ms;
4533
+ --wds-motion-duration-600: 300ms;
4534
+ --wds-motion-duration-700: 350ms;
4535
+ --wds-motion-duration-800: 400ms;
4536
+ --wds-motion-duration-900: 450ms;
4537
+ --wds-motion-duration-1000: 500ms;
4538
+ --wds-motion-duration-1100: 550ms;
4539
+ --wds-motion-duration-1200: 600ms;
4540
+ --wds-motion-duration-1300: 650ms;
4541
+ --wds-motion-duration-1400: 700ms;
4542
+ --wds-motion-duration-1500: 750ms;
4543
+ --wds-motion-duration-1600: 800ms;
4512
4544
  --wds-motion-easing-100: linear;
4513
4545
  --wds-motion-easing-200: cubic-bezier(0.42, 0, 0.58, 1);
4514
4546
  --wds-motion-easing-300: cubic-bezier(0.4, 0, 0.2, 1);
package/bm-light/foundation.st.css CHANGED
@@ -167,6 +167,22 @@
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-duration-100);
171
+ @property st-global(--wds-motion-duration-200);
172
+ @property st-global(--wds-motion-duration-300);
173
+ @property st-global(--wds-motion-duration-400);
174
+ @property st-global(--wds-motion-duration-500);
175
+ @property st-global(--wds-motion-duration-600);
176
+ @property st-global(--wds-motion-duration-700);
177
+ @property st-global(--wds-motion-duration-800);
178
+ @property st-global(--wds-motion-duration-900);
179
+ @property st-global(--wds-motion-duration-1000);
180
+ @property st-global(--wds-motion-duration-1100);
181
+ @property st-global(--wds-motion-duration-1200);
182
+ @property st-global(--wds-motion-duration-1300);
183
+ @property st-global(--wds-motion-duration-1400);
184
+ @property st-global(--wds-motion-duration-1500);
185
+ @property st-global(--wds-motion-duration-1600);
170
186
  @property st-global(--wds-motion-easing-100);
171
187
  @property st-global(--wds-motion-easing-200);
172
188
  @property st-global(--wds-motion-easing-300);
@@ -421,6 +437,22 @@
421
437
  --wds-font-weight-regular: 400;
422
438
  --wds-font-weight-semi-bold: 600;
423
439
  --wds-internal-theme: bm-light;
440
+ --wds-motion-duration-100: 50ms;
441
+ --wds-motion-duration-200: 100ms;
442
+ --wds-motion-duration-300: 150ms;
443
+ --wds-motion-duration-400: 200ms;
444
+ --wds-motion-duration-500: 250ms;
445
+ --wds-motion-duration-600: 300ms;
446
+ --wds-motion-duration-700: 350ms;
447
+ --wds-motion-duration-800: 400ms;
448
+ --wds-motion-duration-900: 450ms;
449
+ --wds-motion-duration-1000: 500ms;
450
+ --wds-motion-duration-1100: 550ms;
451
+ --wds-motion-duration-1200: 600ms;
452
+ --wds-motion-duration-1300: 650ms;
453
+ --wds-motion-duration-1400: 700ms;
454
+ --wds-motion-duration-1500: 750ms;
455
+ --wds-motion-duration-1600: 800ms;
424
456
  --wds-motion-easing-100: linear;
425
457
  --wds-motion-easing-200: cubic-bezier(0.42, 0, 0.58, 1);
426
458
  --wds-motion-easing-300: cubic-bezier(0.4, 0, 0.2, 1);
package/foundation.st.css CHANGED
@@ -166,6 +166,22 @@
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-duration-100);
170
+ @property st-global(--wds-motion-duration-200);
171
+ @property st-global(--wds-motion-duration-300);
172
+ @property st-global(--wds-motion-duration-400);
173
+ @property st-global(--wds-motion-duration-500);
174
+ @property st-global(--wds-motion-duration-600);
175
+ @property st-global(--wds-motion-duration-700);
176
+ @property st-global(--wds-motion-duration-800);
177
+ @property st-global(--wds-motion-duration-900);
178
+ @property st-global(--wds-motion-duration-1000);
179
+ @property st-global(--wds-motion-duration-1100);
180
+ @property st-global(--wds-motion-duration-1200);
181
+ @property st-global(--wds-motion-duration-1300);
182
+ @property st-global(--wds-motion-duration-1400);
183
+ @property st-global(--wds-motion-duration-1500);
184
+ @property st-global(--wds-motion-duration-1600);
169
185
  @property st-global(--wds-motion-easing-100);
170
186
  @property st-global(--wds-motion-easing-200);
171
187
  @property st-global(--wds-motion-easing-300);
@@ -417,6 +433,22 @@
417
433
  --wds-font-weight-regular: 400;
418
434
  --wds-font-weight-semi-bold: 600;
419
435
  --wds-internal-theme: default;
436
+ --wds-motion-duration-100: 50ms;
437
+ --wds-motion-duration-200: 100ms;
438
+ --wds-motion-duration-300: 150ms;
439
+ --wds-motion-duration-400: 200ms;
440
+ --wds-motion-duration-500: 250ms;
441
+ --wds-motion-duration-600: 300ms;
442
+ --wds-motion-duration-700: 350ms;
443
+ --wds-motion-duration-800: 400ms;
444
+ --wds-motion-duration-900: 450ms;
445
+ --wds-motion-duration-1000: 500ms;
446
+ --wds-motion-duration-1100: 550ms;
447
+ --wds-motion-duration-1200: 600ms;
448
+ --wds-motion-duration-1300: 650ms;
449
+ --wds-motion-duration-1400: 700ms;
450
+ --wds-motion-duration-1500: 750ms;
451
+ --wds-motion-duration-1600: 800ms;
420
452
  --wds-motion-easing-100: linear;
421
453
  --wds-motion-easing-200: cubic-bezier(0.42, 0, 0.58, 1);
422
454
  --wds-motion-easing-300: cubic-bezier(0.4, 0, 0.2, 1);
package/odeditor/all.css CHANGED
@@ -88,6 +88,22 @@
88
88
  --wds-motion-easing-300: cubic-bezier(0.4, 0, 0.2, 1);
89
89
  --wds-motion-easing-200: cubic-bezier(0.42, 0, 0.58, 1);
90
90
  --wds-motion-easing-100: linear;
91
+ --wds-motion-duration-1600: 800ms;
92
+ --wds-motion-duration-1500: 750ms;
93
+ --wds-motion-duration-1400: 700ms;
94
+ --wds-motion-duration-1300: 650ms;
95
+ --wds-motion-duration-1200: 600ms;
96
+ --wds-motion-duration-1100: 550ms;
97
+ --wds-motion-duration-1000: 500ms;
98
+ --wds-motion-duration-900: 450ms;
99
+ --wds-motion-duration-800: 400ms;
100
+ --wds-motion-duration-700: 350ms;
101
+ --wds-motion-duration-600: 300ms;
102
+ --wds-motion-duration-500: 250ms;
103
+ --wds-motion-duration-400: 200ms;
104
+ --wds-motion-duration-300: 150ms;
105
+ --wds-motion-duration-200: 100ms;
106
+ --wds-motion-duration-100: 50ms;
91
107
  --wds-font-weight-heading-3: 700;
92
108
  --wds-font-weight-semi-bold: 600;
93
109
  --wds-font-weight-regular: 400;
package/odeditor/all.scss CHANGED
@@ -160,6 +160,22 @@
160
160
  --wds-motion-easing-300: cubic-bezier(0.4, 0, 0.2, 1);
161
161
  --wds-motion-easing-200: cubic-bezier(0.42, 0, 0.58, 1);
162
162
  --wds-motion-easing-100: linear;
163
+ --wds-motion-duration-1600: 800ms;
164
+ --wds-motion-duration-1500: 750ms;
165
+ --wds-motion-duration-1400: 700ms;
166
+ --wds-motion-duration-1300: 650ms;
167
+ --wds-motion-duration-1200: 600ms;
168
+ --wds-motion-duration-1100: 550ms;
169
+ --wds-motion-duration-1000: 500ms;
170
+ --wds-motion-duration-900: 450ms;
171
+ --wds-motion-duration-800: 400ms;
172
+ --wds-motion-duration-700: 350ms;
173
+ --wds-motion-duration-600: 300ms;
174
+ --wds-motion-duration-500: 250ms;
175
+ --wds-motion-duration-400: 200ms;
176
+ --wds-motion-duration-300: 150ms;
177
+ --wds-motion-duration-200: 100ms;
178
+ --wds-motion-duration-100: 50ms;
163
179
  --wds-marketing-page-title-line-height: 38px;
164
180
  --wds-marketing-page-overline-divider-display: none;
165
181
  --wds-marketing-page-image-top-title-subtitle-gap: 16px;
package/odeditor/all.st.css CHANGED
@@ -1727,6 +1727,22 @@
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-duration-100);
1731
+ @property st-global(--wds-motion-duration-200);
1732
+ @property st-global(--wds-motion-duration-300);
1733
+ @property st-global(--wds-motion-duration-400);
1734
+ @property st-global(--wds-motion-duration-500);
1735
+ @property st-global(--wds-motion-duration-600);
1736
+ @property st-global(--wds-motion-duration-700);
1737
+ @property st-global(--wds-motion-duration-800);
1738
+ @property st-global(--wds-motion-duration-900);
1739
+ @property st-global(--wds-motion-duration-1000);
1740
+ @property st-global(--wds-motion-duration-1100);
1741
+ @property st-global(--wds-motion-duration-1200);
1742
+ @property st-global(--wds-motion-duration-1300);
1743
+ @property st-global(--wds-motion-duration-1400);
1744
+ @property st-global(--wds-motion-duration-1500);
1745
+ @property st-global(--wds-motion-duration-1600);
1730
1746
  @property st-global(--wds-motion-easing-100);
1731
1747
  @property st-global(--wds-motion-easing-200);
1732
1748
  @property st-global(--wds-motion-easing-300);
@@ -4509,6 +4525,22 @@
4509
4525
  --wds-mobile-modal-content-padding-vertical: 24px;
4510
4526
  --wds-mobile-modal-footer-padding-horizontal: 24px;
4511
4527
  --wds-mobile-modal-footer-padding-vertical: 24px;
4528
+ --wds-motion-duration-100: 50ms;
4529
+ --wds-motion-duration-200: 100ms;
4530
+ --wds-motion-duration-300: 150ms;
4531
+ --wds-motion-duration-400: 200ms;
4532
+ --wds-motion-duration-500: 250ms;
4533
+ --wds-motion-duration-600: 300ms;
4534
+ --wds-motion-duration-700: 350ms;
4535
+ --wds-motion-duration-800: 400ms;
4536
+ --wds-motion-duration-900: 450ms;
4537
+ --wds-motion-duration-1000: 500ms;
4538
+ --wds-motion-duration-1100: 550ms;
4539
+ --wds-motion-duration-1200: 600ms;
4540
+ --wds-motion-duration-1300: 650ms;
4541
+ --wds-motion-duration-1400: 700ms;
4542
+ --wds-motion-duration-1500: 750ms;
4543
+ --wds-motion-duration-1600: 800ms;
4512
4544
  --wds-motion-easing-100: linear;
4513
4545
  --wds-motion-easing-200: cubic-bezier(0.42, 0, 0.58, 1);
4514
4546
  --wds-motion-easing-300: cubic-bezier(0.4, 0, 0.2, 1);
package/odeditor/foundation.st.css CHANGED
@@ -167,6 +167,22 @@
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-duration-100);
171
+ @property st-global(--wds-motion-duration-200);
172
+ @property st-global(--wds-motion-duration-300);
173
+ @property st-global(--wds-motion-duration-400);
174
+ @property st-global(--wds-motion-duration-500);
175
+ @property st-global(--wds-motion-duration-600);
176
+ @property st-global(--wds-motion-duration-700);
177
+ @property st-global(--wds-motion-duration-800);
178
+ @property st-global(--wds-motion-duration-900);
179
+ @property st-global(--wds-motion-duration-1000);
180
+ @property st-global(--wds-motion-duration-1100);
181
+ @property st-global(--wds-motion-duration-1200);
182
+ @property st-global(--wds-motion-duration-1300);
183
+ @property st-global(--wds-motion-duration-1400);
184
+ @property st-global(--wds-motion-duration-1500);
185
+ @property st-global(--wds-motion-duration-1600);
170
186
  @property st-global(--wds-motion-easing-100);
171
187
  @property st-global(--wds-motion-easing-200);
172
188
  @property st-global(--wds-motion-easing-300);
@@ -421,6 +437,22 @@
421
437
  --wds-font-weight-regular: 400;
422
438
  --wds-font-weight-semi-bold: 600;
423
439
  --wds-internal-theme: odeditor;
440
+ --wds-motion-duration-100: 50ms;
441
+ --wds-motion-duration-200: 100ms;
442
+ --wds-motion-duration-300: 150ms;
443
+ --wds-motion-duration-400: 200ms;
444
+ --wds-motion-duration-500: 250ms;
445
+ --wds-motion-duration-600: 300ms;
446
+ --wds-motion-duration-700: 350ms;
447
+ --wds-motion-duration-800: 400ms;
448
+ --wds-motion-duration-900: 450ms;
449
+ --wds-motion-duration-1000: 500ms;
450
+ --wds-motion-duration-1100: 550ms;
451
+ --wds-motion-duration-1200: 600ms;
452
+ --wds-motion-duration-1300: 650ms;
453
+ --wds-motion-duration-1400: 700ms;
454
+ --wds-motion-duration-1500: 750ms;
455
+ --wds-motion-duration-1600: 800ms;
424
456
  --wds-motion-easing-100: linear;
425
457
  --wds-motion-easing-200: cubic-bezier(0.42, 0, 0.58, 1);
426
458
  --wds-motion-easing-300: cubic-bezier(0.4, 0, 0.2, 1);
package/odeditor-dark/all.css CHANGED
@@ -90,6 +90,22 @@
90
90
  --wds-motion-easing-300: cubic-bezier(0.4, 0, 0.2, 1);
91
91
  --wds-motion-easing-200: cubic-bezier(0.42, 0, 0.58, 1);
92
92
  --wds-motion-easing-100: linear;
93
+ --wds-motion-duration-1600: 800ms;
94
+ --wds-motion-duration-1500: 750ms;
95
+ --wds-motion-duration-1400: 700ms;
96
+ --wds-motion-duration-1300: 650ms;
97
+ --wds-motion-duration-1200: 600ms;
98
+ --wds-motion-duration-1100: 550ms;
99
+ --wds-motion-duration-1000: 500ms;
100
+ --wds-motion-duration-900: 450ms;
101
+ --wds-motion-duration-800: 400ms;
102
+ --wds-motion-duration-700: 350ms;
103
+ --wds-motion-duration-600: 300ms;
104
+ --wds-motion-duration-500: 250ms;
105
+ --wds-motion-duration-400: 200ms;
106
+ --wds-motion-duration-300: 150ms;
107
+ --wds-motion-duration-200: 100ms;
108
+ --wds-motion-duration-100: 50ms;
93
109
  --wds-font-weight-heading-3: 700;
94
110
  --wds-font-weight-semi-bold: 600;
95
111
  --wds-font-weight-regular: 400;
package/odeditor-dark/all.scss CHANGED
@@ -175,6 +175,22 @@
175
175
  --wds-motion-easing-300: cubic-bezier(0.4, 0, 0.2, 1);
176
176
  --wds-motion-easing-200: cubic-bezier(0.42, 0, 0.58, 1);
177
177
  --wds-motion-easing-100: linear;
178
+ --wds-motion-duration-1600: 800ms;
179
+ --wds-motion-duration-1500: 750ms;
180
+ --wds-motion-duration-1400: 700ms;
181
+ --wds-motion-duration-1300: 650ms;
182
+ --wds-motion-duration-1200: 600ms;
183
+ --wds-motion-duration-1100: 550ms;
184
+ --wds-motion-duration-1000: 500ms;
185
+ --wds-motion-duration-900: 450ms;
186
+ --wds-motion-duration-800: 400ms;
187
+ --wds-motion-duration-700: 350ms;
188
+ --wds-motion-duration-600: 300ms;
189
+ --wds-motion-duration-500: 250ms;
190
+ --wds-motion-duration-400: 200ms;
191
+ --wds-motion-duration-300: 150ms;
192
+ --wds-motion-duration-200: 100ms;
193
+ --wds-motion-duration-100: 50ms;
178
194
  --wds-marketing-page-overline-divider-margin-top: 17px;
179
195
  --wds-marketing-page-overline-divider-display: block;
180
196
  --wds-marketing-page-image-top-title-subtitle-gap: 16px;
package/odeditor-dark/all.st.css CHANGED
@@ -1733,6 +1733,22 @@
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-duration-100);
1737
+ @property st-global(--wds-motion-duration-200);
1738
+ @property st-global(--wds-motion-duration-300);
1739
+ @property st-global(--wds-motion-duration-400);
1740
+ @property st-global(--wds-motion-duration-500);
1741
+ @property st-global(--wds-motion-duration-600);
1742
+ @property st-global(--wds-motion-duration-700);
1743
+ @property st-global(--wds-motion-duration-800);
1744
+ @property st-global(--wds-motion-duration-900);
1745
+ @property st-global(--wds-motion-duration-1000);
1746
+ @property st-global(--wds-motion-duration-1100);
1747
+ @property st-global(--wds-motion-duration-1200);
1748
+ @property st-global(--wds-motion-duration-1300);
1749
+ @property st-global(--wds-motion-duration-1400);
1750
+ @property st-global(--wds-motion-duration-1500);
1751
+ @property st-global(--wds-motion-duration-1600);
1736
1752
  @property st-global(--wds-motion-easing-100);
1737
1753
  @property st-global(--wds-motion-easing-200);
1738
1754
  @property st-global(--wds-motion-easing-300);
@@ -4515,6 +4531,22 @@
4515
4531
  --wds-mobile-modal-content-padding-vertical: 24px;
4516
4532
  --wds-mobile-modal-footer-padding-horizontal: 24px;
4517
4533
  --wds-mobile-modal-footer-padding-vertical: 24px;
4534
+ --wds-motion-duration-100: 50ms;
4535
+ --wds-motion-duration-200: 100ms;
4536
+ --wds-motion-duration-300: 150ms;
4537
+ --wds-motion-duration-400: 200ms;
4538
+ --wds-motion-duration-500: 250ms;
4539
+ --wds-motion-duration-600: 300ms;
4540
+ --wds-motion-duration-700: 350ms;
4541
+ --wds-motion-duration-800: 400ms;
4542
+ --wds-motion-duration-900: 450ms;
4543
+ --wds-motion-duration-1000: 500ms;
4544
+ --wds-motion-duration-1100: 550ms;
4545
+ --wds-motion-duration-1200: 600ms;
4546
+ --wds-motion-duration-1300: 650ms;
4547
+ --wds-motion-duration-1400: 700ms;
4548
+ --wds-motion-duration-1500: 750ms;
4549
+ --wds-motion-duration-1600: 800ms;
4518
4550
  --wds-motion-easing-100: linear;
4519
4551
  --wds-motion-easing-200: cubic-bezier(0.42, 0, 0.58, 1);
4520
4552
  --wds-motion-easing-300: cubic-bezier(0.4, 0, 0.2, 1);
package/odeditor-dark/foundation.st.css CHANGED
@@ -168,6 +168,22 @@
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-duration-100);
172
+ @property st-global(--wds-motion-duration-200);
173
+ @property st-global(--wds-motion-duration-300);
174
+ @property st-global(--wds-motion-duration-400);
175
+ @property st-global(--wds-motion-duration-500);
176
+ @property st-global(--wds-motion-duration-600);
177
+ @property st-global(--wds-motion-duration-700);
178
+ @property st-global(--wds-motion-duration-800);
179
+ @property st-global(--wds-motion-duration-900);
180
+ @property st-global(--wds-motion-duration-1000);
181
+ @property st-global(--wds-motion-duration-1100);
182
+ @property st-global(--wds-motion-duration-1200);
183
+ @property st-global(--wds-motion-duration-1300);
184
+ @property st-global(--wds-motion-duration-1400);
185
+ @property st-global(--wds-motion-duration-1500);
186
+ @property st-global(--wds-motion-duration-1600);
171
187
  @property st-global(--wds-motion-easing-100);
172
188
  @property st-global(--wds-motion-easing-200);
173
189
  @property st-global(--wds-motion-easing-300);
@@ -423,6 +439,22 @@
423
439
  --wds-font-weight-regular: 400;
424
440
  --wds-font-weight-semi-bold: 600;
425
441
  --wds-internal-theme: odeditor-dark;
442
+ --wds-motion-duration-100: 50ms;
443
+ --wds-motion-duration-200: 100ms;
444
+ --wds-motion-duration-300: 150ms;
445
+ --wds-motion-duration-400: 200ms;
446
+ --wds-motion-duration-500: 250ms;
447
+ --wds-motion-duration-600: 300ms;
448
+ --wds-motion-duration-700: 350ms;
449
+ --wds-motion-duration-800: 400ms;
450
+ --wds-motion-duration-900: 450ms;
451
+ --wds-motion-duration-1000: 500ms;
452
+ --wds-motion-duration-1100: 550ms;
453
+ --wds-motion-duration-1200: 600ms;
454
+ --wds-motion-duration-1300: 650ms;
455
+ --wds-motion-duration-1400: 700ms;
456
+ --wds-motion-duration-1500: 750ms;
457
+ --wds-motion-duration-1600: 800ms;
426
458
  --wds-motion-easing-100: linear;
427
459
  --wds-motion-easing-200: cubic-bezier(0.42, 0, 0.58, 1);
428
460
  --wds-motion-easing-300: cubic-bezier(0.4, 0, 0.2, 1);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wix/design-system-tokens",
3
- "version": "1.241.0",
3
+ "version": "1.242.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": "57606cb36a2acb830db5f28668980ca748c5bc9b5a66acbec88b55b8"
38
+ "falconPackageHash": "1c810389dcb23732a1aaeac767039c6e83ca22976008cd40b9403e38"
39
39
  }
package/studio/all.css CHANGED
@@ -80,6 +80,22 @@
80
80
  --wds-motion-easing-300: cubic-bezier(0.4, 0, 0.2, 1);
81
81
  --wds-motion-easing-200: cubic-bezier(0.42, 0, 0.58, 1);
82
82
  --wds-motion-easing-100: linear;
83
+ --wds-motion-duration-1600: 800ms;
84
+ --wds-motion-duration-1500: 750ms;
85
+ --wds-motion-duration-1400: 700ms;
86
+ --wds-motion-duration-1300: 650ms;
87
+ --wds-motion-duration-1200: 600ms;
88
+ --wds-motion-duration-1100: 550ms;
89
+ --wds-motion-duration-1000: 500ms;
90
+ --wds-motion-duration-900: 450ms;
91
+ --wds-motion-duration-800: 400ms;
92
+ --wds-motion-duration-700: 350ms;
93
+ --wds-motion-duration-600: 300ms;
94
+ --wds-motion-duration-500: 250ms;
95
+ --wds-motion-duration-400: 200ms;
96
+ --wds-motion-duration-300: 150ms;
97
+ --wds-motion-duration-200: 100ms;
98
+ --wds-motion-duration-100: 50ms;
83
99
  --wds-font-weight-semi-bold: 600;
84
100
  --wds-font-weight-regular: 400;
85
101
  --wds-font-weight-medium: 500;
package/studio/all.scss CHANGED
@@ -148,6 +148,22 @@
148
148
  --wds-motion-easing-300: cubic-bezier(0.4, 0, 0.2, 1);
149
149
  --wds-motion-easing-200: cubic-bezier(0.42, 0, 0.58, 1);
150
150
  --wds-motion-easing-100: linear;
151
+ --wds-motion-duration-1600: 800ms;
152
+ --wds-motion-duration-1500: 750ms;
153
+ --wds-motion-duration-1400: 700ms;
154
+ --wds-motion-duration-1300: 650ms;
155
+ --wds-motion-duration-1200: 600ms;
156
+ --wds-motion-duration-1100: 550ms;
157
+ --wds-motion-duration-1000: 500ms;
158
+ --wds-motion-duration-900: 450ms;
159
+ --wds-motion-duration-800: 400ms;
160
+ --wds-motion-duration-700: 350ms;
161
+ --wds-motion-duration-600: 300ms;
162
+ --wds-motion-duration-500: 250ms;
163
+ --wds-motion-duration-400: 200ms;
164
+ --wds-motion-duration-300: 150ms;
165
+ --wds-motion-duration-200: 100ms;
166
+ --wds-motion-duration-100: 50ms;
151
167
  --wds-message-modal-close-button-fill: transparent;
152
168
  --wds-marketing-page-overline-divider-margin-top: 17px;
153
169
  --wds-marketing-page-overline-divider-display: block;
package/studio/all.st.css CHANGED
@@ -1745,6 +1745,22 @@
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-duration-100);
1749
+ @property st-global(--wds-motion-duration-200);
1750
+ @property st-global(--wds-motion-duration-300);
1751
+ @property st-global(--wds-motion-duration-400);
1752
+ @property st-global(--wds-motion-duration-500);
1753
+ @property st-global(--wds-motion-duration-600);
1754
+ @property st-global(--wds-motion-duration-700);
1755
+ @property st-global(--wds-motion-duration-800);
1756
+ @property st-global(--wds-motion-duration-900);
1757
+ @property st-global(--wds-motion-duration-1000);
1758
+ @property st-global(--wds-motion-duration-1100);
1759
+ @property st-global(--wds-motion-duration-1200);
1760
+ @property st-global(--wds-motion-duration-1300);
1761
+ @property st-global(--wds-motion-duration-1400);
1762
+ @property st-global(--wds-motion-duration-1500);
1763
+ @property st-global(--wds-motion-duration-1600);
1748
1764
  @property st-global(--wds-motion-easing-100);
1749
1765
  @property st-global(--wds-motion-easing-200);
1750
1766
  @property st-global(--wds-motion-easing-300);
@@ -4523,6 +4539,22 @@
4523
4539
  --wds-mobile-modal-content-padding-vertical: 24px;
4524
4540
  --wds-mobile-modal-footer-padding-horizontal: 24px;
4525
4541
  --wds-mobile-modal-footer-padding-vertical: 24px;
4542
+ --wds-motion-duration-100: 50ms;
4543
+ --wds-motion-duration-200: 100ms;
4544
+ --wds-motion-duration-300: 150ms;
4545
+ --wds-motion-duration-400: 200ms;
4546
+ --wds-motion-duration-500: 250ms;
4547
+ --wds-motion-duration-600: 300ms;
4548
+ --wds-motion-duration-700: 350ms;
4549
+ --wds-motion-duration-800: 400ms;
4550
+ --wds-motion-duration-900: 450ms;
4551
+ --wds-motion-duration-1000: 500ms;
4552
+ --wds-motion-duration-1100: 550ms;
4553
+ --wds-motion-duration-1200: 600ms;
4554
+ --wds-motion-duration-1300: 650ms;
4555
+ --wds-motion-duration-1400: 700ms;
4556
+ --wds-motion-duration-1500: 750ms;
4557
+ --wds-motion-duration-1600: 800ms;
4526
4558
  --wds-motion-easing-100: linear;
4527
4559
  --wds-motion-easing-200: cubic-bezier(0.42, 0, 0.58, 1);
4528
4560
  --wds-motion-easing-300: cubic-bezier(0.4, 0, 0.2, 1);
package/studio/foundation.st.css CHANGED
@@ -166,6 +166,22 @@
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-duration-100);
170
+ @property st-global(--wds-motion-duration-200);
171
+ @property st-global(--wds-motion-duration-300);
172
+ @property st-global(--wds-motion-duration-400);
173
+ @property st-global(--wds-motion-duration-500);
174
+ @property st-global(--wds-motion-duration-600);
175
+ @property st-global(--wds-motion-duration-700);
176
+ @property st-global(--wds-motion-duration-800);
177
+ @property st-global(--wds-motion-duration-900);
178
+ @property st-global(--wds-motion-duration-1000);
179
+ @property st-global(--wds-motion-duration-1100);
180
+ @property st-global(--wds-motion-duration-1200);
181
+ @property st-global(--wds-motion-duration-1300);
182
+ @property st-global(--wds-motion-duration-1400);
183
+ @property st-global(--wds-motion-duration-1500);
184
+ @property st-global(--wds-motion-duration-1600);
169
185
  @property st-global(--wds-motion-easing-100);
170
186
  @property st-global(--wds-motion-easing-200);
171
187
  @property st-global(--wds-motion-easing-300);
@@ -417,6 +433,22 @@
417
433
  --wds-font-weight-regular: 400;
418
434
  --wds-font-weight-semi-bold: 600;
419
435
  --wds-internal-theme: studio;
436
+ --wds-motion-duration-100: 50ms;
437
+ --wds-motion-duration-200: 100ms;
438
+ --wds-motion-duration-300: 150ms;
439
+ --wds-motion-duration-400: 200ms;
440
+ --wds-motion-duration-500: 250ms;
441
+ --wds-motion-duration-600: 300ms;
442
+ --wds-motion-duration-700: 350ms;
443
+ --wds-motion-duration-800: 400ms;
444
+ --wds-motion-duration-900: 450ms;
445
+ --wds-motion-duration-1000: 500ms;
446
+ --wds-motion-duration-1100: 550ms;
447
+ --wds-motion-duration-1200: 600ms;
448
+ --wds-motion-duration-1300: 650ms;
449
+ --wds-motion-duration-1400: 700ms;
450
+ --wds-motion-duration-1500: 750ms;
451
+ --wds-motion-duration-1600: 800ms;
420
452
  --wds-motion-easing-100: linear;
421
453
  --wds-motion-easing-200: cubic-bezier(0.42, 0, 0.58, 1);
422
454
  --wds-motion-easing-300: cubic-bezier(0.4, 0, 0.2, 1);
package/studio2-light/all.css CHANGED
@@ -88,6 +88,22 @@
88
88
  --wds-motion-easing-300: cubic-bezier(0.4, 0, 0.2, 1);
89
89
  --wds-motion-easing-200: cubic-bezier(0.42, 0, 0.58, 1);
90
90
  --wds-motion-easing-100: linear;
91
+ --wds-motion-duration-1600: 800ms;
92
+ --wds-motion-duration-1500: 750ms;
93
+ --wds-motion-duration-1400: 700ms;
94
+ --wds-motion-duration-1300: 650ms;
95
+ --wds-motion-duration-1200: 600ms;
96
+ --wds-motion-duration-1100: 550ms;
97
+ --wds-motion-duration-1000: 500ms;
98
+ --wds-motion-duration-900: 450ms;
99
+ --wds-motion-duration-800: 400ms;
100
+ --wds-motion-duration-700: 350ms;
101
+ --wds-motion-duration-600: 300ms;
102
+ --wds-motion-duration-500: 250ms;
103
+ --wds-motion-duration-400: 200ms;
104
+ --wds-motion-duration-300: 150ms;
105
+ --wds-motion-duration-200: 100ms;
106
+ --wds-motion-duration-100: 50ms;
91
107
  --wds-font-weight-heading-3: 700;
92
108
  --wds-font-weight-semi-bold: 600;
93
109
  --wds-font-weight-regular: 400;
package/studio2-light/all.scss CHANGED
@@ -173,6 +173,22 @@
173
173
  --wds-motion-easing-300: cubic-bezier(0.4, 0, 0.2, 1);
174
174
  --wds-motion-easing-200: cubic-bezier(0.42, 0, 0.58, 1);
175
175
  --wds-motion-easing-100: linear;
176
+ --wds-motion-duration-1600: 800ms;
177
+ --wds-motion-duration-1500: 750ms;
178
+ --wds-motion-duration-1400: 700ms;
179
+ --wds-motion-duration-1300: 650ms;
180
+ --wds-motion-duration-1200: 600ms;
181
+ --wds-motion-duration-1100: 550ms;
182
+ --wds-motion-duration-1000: 500ms;
183
+ --wds-motion-duration-900: 450ms;
184
+ --wds-motion-duration-800: 400ms;
185
+ --wds-motion-duration-700: 350ms;
186
+ --wds-motion-duration-600: 300ms;
187
+ --wds-motion-duration-500: 250ms;
188
+ --wds-motion-duration-400: 200ms;
189
+ --wds-motion-duration-300: 150ms;
190
+ --wds-motion-duration-200: 100ms;
191
+ --wds-motion-duration-100: 50ms;
176
192
  --wds-marketing-page-overline-divider-margin-top: 17px;
177
193
  --wds-marketing-page-overline-divider-display: block;
178
194
  --wds-marketing-page-image-top-title-subtitle-gap: 16px;
package/studio2-light/all.st.css CHANGED
@@ -1729,6 +1729,22 @@
1729
1729
  @property st-global(--wds-mobile-modal-content-padding-vertical);
1730
1730
  @property st-global(--wds-mobile-modal-footer-padding-horizontal);
1731
1731
  @property st-global(--wds-mobile-modal-footer-padding-vertical);
1732
+ @property st-global(--wds-motion-duration-100);
1733
+ @property st-global(--wds-motion-duration-200);
1734
+ @property st-global(--wds-motion-duration-300);
1735
+ @property st-global(--wds-motion-duration-400);
1736
+ @property st-global(--wds-motion-duration-500);
1737
+ @property st-global(--wds-motion-duration-600);
1738
+ @property st-global(--wds-motion-duration-700);
1739
+ @property st-global(--wds-motion-duration-800);
1740
+ @property st-global(--wds-motion-duration-900);
1741
+ @property st-global(--wds-motion-duration-1000);
1742
+ @property st-global(--wds-motion-duration-1100);
1743
+ @property st-global(--wds-motion-duration-1200);
1744
+ @property st-global(--wds-motion-duration-1300);
1745
+ @property st-global(--wds-motion-duration-1400);
1746
+ @property st-global(--wds-motion-duration-1500);
1747
+ @property st-global(--wds-motion-duration-1600);
1732
1748
  @property st-global(--wds-motion-easing-100);
1733
1749
  @property st-global(--wds-motion-easing-200);
1734
1750
  @property st-global(--wds-motion-easing-300);
@@ -4509,6 +4525,22 @@
4509
4525
  --wds-mobile-modal-content-padding-vertical: 24px;
4510
4526
  --wds-mobile-modal-footer-padding-horizontal: 24px;
4511
4527
  --wds-mobile-modal-footer-padding-vertical: 24px;
4528
+ --wds-motion-duration-100: 50ms;
4529
+ --wds-motion-duration-200: 100ms;
4530
+ --wds-motion-duration-300: 150ms;
4531
+ --wds-motion-duration-400: 200ms;
4532
+ --wds-motion-duration-500: 250ms;
4533
+ --wds-motion-duration-600: 300ms;
4534
+ --wds-motion-duration-700: 350ms;
4535
+ --wds-motion-duration-800: 400ms;
4536
+ --wds-motion-duration-900: 450ms;
4537
+ --wds-motion-duration-1000: 500ms;
4538
+ --wds-motion-duration-1100: 550ms;
4539
+ --wds-motion-duration-1200: 600ms;
4540
+ --wds-motion-duration-1300: 650ms;
4541
+ --wds-motion-duration-1400: 700ms;
4542
+ --wds-motion-duration-1500: 750ms;
4543
+ --wds-motion-duration-1600: 800ms;
4512
4544
  --wds-motion-easing-100: linear;
4513
4545
  --wds-motion-easing-200: cubic-bezier(0.42, 0, 0.58, 1);
4514
4546
  --wds-motion-easing-300: cubic-bezier(0.4, 0, 0.2, 1);
package/studio2-light/foundation.st.css CHANGED
@@ -167,6 +167,22 @@
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-duration-100);
171
+ @property st-global(--wds-motion-duration-200);
172
+ @property st-global(--wds-motion-duration-300);
173
+ @property st-global(--wds-motion-duration-400);
174
+ @property st-global(--wds-motion-duration-500);
175
+ @property st-global(--wds-motion-duration-600);
176
+ @property st-global(--wds-motion-duration-700);
177
+ @property st-global(--wds-motion-duration-800);
178
+ @property st-global(--wds-motion-duration-900);
179
+ @property st-global(--wds-motion-duration-1000);
180
+ @property st-global(--wds-motion-duration-1100);
181
+ @property st-global(--wds-motion-duration-1200);
182
+ @property st-global(--wds-motion-duration-1300);
183
+ @property st-global(--wds-motion-duration-1400);
184
+ @property st-global(--wds-motion-duration-1500);
185
+ @property st-global(--wds-motion-duration-1600);
170
186
  @property st-global(--wds-motion-easing-100);
171
187
  @property st-global(--wds-motion-easing-200);
172
188
  @property st-global(--wds-motion-easing-300);
@@ -421,6 +437,22 @@
421
437
  --wds-font-weight-regular: 400;
422
438
  --wds-font-weight-semi-bold: 600;
423
439
  --wds-internal-theme: studio2-light;
440
+ --wds-motion-duration-100: 50ms;
441
+ --wds-motion-duration-200: 100ms;
442
+ --wds-motion-duration-300: 150ms;
443
+ --wds-motion-duration-400: 200ms;
444
+ --wds-motion-duration-500: 250ms;
445
+ --wds-motion-duration-600: 300ms;
446
+ --wds-motion-duration-700: 350ms;
447
+ --wds-motion-duration-800: 400ms;
448
+ --wds-motion-duration-900: 450ms;
449
+ --wds-motion-duration-1000: 500ms;
450
+ --wds-motion-duration-1100: 550ms;
451
+ --wds-motion-duration-1200: 600ms;
452
+ --wds-motion-duration-1300: 650ms;
453
+ --wds-motion-duration-1400: 700ms;
454
+ --wds-motion-duration-1500: 750ms;
455
+ --wds-motion-duration-1600: 800ms;
424
456
  --wds-motion-easing-100: linear;
425
457
  --wds-motion-easing-200: cubic-bezier(0.42, 0, 0.58, 1);
426
458
  --wds-motion-easing-300: cubic-bezier(0.4, 0, 0.2, 1);