@wix/design-system-tokens 1.201.0 → 1.203.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 +16 -0
  2. package/all.css +18 -4
  3. package/all.scss +14 -0
  4. package/all.st.css +28 -0
  5. package/component.st.css +12 -0
  6. package/foundation.st.css +16 -0
  7. package/odeditor/all.css +24 -6
  8. package/odeditor/all.scss +20 -2
  9. package/odeditor/all.st.css +38 -2
  10. package/odeditor/component.st.css +17 -1
  11. package/odeditor/foundation.st.css +18 -0
  12. package/odeditor/semantic.st.css +3 -1
  13. package/odeditor-dark/all.css +22 -5
  14. package/odeditor-dark/all.scss +18 -1
  15. package/odeditor-dark/all.st.css +35 -1
  16. package/odeditor-dark/component.st.css +17 -1
  17. package/odeditor-dark/foundation.st.css +16 -0
  18. package/odeditor-dark/semantic.st.css +2 -0
  19. package/package.json +2 -2
  20. package/studio/all.css +20 -5
  21. package/studio/all.scss +16 -1
  22. package/studio/all.st.css +31 -1
  23. package/studio/component.st.css +12 -0
  24. package/studio/foundation.st.css +16 -0
  25. package/studio/semantic.st.css +3 -1
  26. package/wixel/all.css +18 -4
  27. package/wixel/all.scss +14 -0
  28. package/wixel/all.st.css +28 -0
  29. package/wixel/component.st.css +12 -0
  30. package/wixel/foundation.st.css +16 -0
package/odeditor/foundation.st.css CHANGED
@@ -16,6 +16,7 @@
16
16
  @property st-global(--wds-border-radius-400);
17
17
  @property st-global(--wds-border-radius-500);
18
18
  @property st-global(--wds-border-radius-600);
19
+ @property st-global(--wds-border-radius-800);
19
20
  @property st-global(--wds-border-radius-1200);
20
21
  @property st-global(--wds-border-radius-full);
21
22
  @property st-global(--wds-border-width-0);
@@ -91,6 +92,14 @@
91
92
  @property st-global(--wds-color-orange-400);
92
93
  @property st-global(--wds-color-orange-500);
93
94
  @property st-global(--wds-color-orange-600);
95
+ @property st-global(--wds-color-pink-0);
96
+ @property st-global(--wds-color-pink-50);
97
+ @property st-global(--wds-color-pink-100);
98
+ @property st-global(--wds-color-pink-200);
99
+ @property st-global(--wds-color-pink-300);
100
+ @property st-global(--wds-color-pink-400);
101
+ @property st-global(--wds-color-pink-500);
102
+ @property st-global(--wds-color-pink-600);
94
103
  @property st-global(--wds-color-purple-0);
95
104
  @property st-global(--wds-color-purple-50);
96
105
  @property st-global(--wds-color-purple-100);
@@ -250,6 +259,7 @@
250
259
  --wds-border-radius-400: 8px;
251
260
  --wds-border-radius-500: 10px;
252
261
  --wds-border-radius-600: 12px;
262
+ --wds-border-radius-800: 16px;
253
263
  --wds-border-radius-1200: 24px;
254
264
  --wds-border-radius-full: 1000px;
255
265
  --wds-border-width-0: 0px;
@@ -325,6 +335,14 @@
325
335
  --wds-color-orange-400: #fbcfbb;
326
336
  --wds-color-orange-500: #fbe3d9;
327
337
  --wds-color-orange-600: #fdf1ec;
338
+ --wds-color-pink-0: #bd22a1;
339
+ --wds-color-pink-50: #e221ac;
340
+ --wds-color-pink-100: #f639d3;
341
+ --wds-color-pink-200: #ff77e6;
342
+ --wds-color-pink-300: #ffa9ef;
343
+ --wds-color-pink-400: #ffc2f3;
344
+ --wds-color-pink-500: #fdd7f2;
345
+ --wds-color-pink-600: #feebfb;
328
346
  --wds-color-purple-0: #5000aa;
329
347
  --wds-color-purple-50: #6100cf;
330
348
  --wds-color-purple-100: #7200f3;
package/odeditor/semantic.st.css CHANGED
@@ -405,6 +405,7 @@
405
405
  @property st-global(--wds-illustration-color-4);
406
406
  @property st-global(--wds-illustration-color-5);
407
407
  @property st-global(--wds-illustration-color-6);
408
+ @property st-global(--wds-illustration-color-7);
408
409
  @property st-global(--wds-illustration-color-background);
409
410
  @property st-global(--wds-inner-shadow-blur-input);
410
411
  @property st-global(--wds-inner-shadow-blur-primary);
@@ -907,6 +908,7 @@
907
908
  --wds-illustration-color-4: #D5DFFF;
908
909
  --wds-illustration-color-5: #EAEFFF;
909
910
  --wds-illustration-color-6: #002294;
911
+ --wds-illustration-color-7: #002294;
910
912
  --wds-illustration-color-background: #F8F6F6;
911
913
  --wds-inner-shadow-blur-input: 3px;
912
914
  --wds-inner-shadow-blur-primary: 2px;
@@ -963,7 +965,7 @@
963
965
  --wds-shadow-surface-modal: 2px 20px 30px rgba(19, 23, 32, .1), 0 0px 0px rgba(19, 23, 32, 0);
964
966
  --wds-shadow-surface-overlay: 0 12px 30px 0 rgba(19, 23, 32, .1), 0 0px 0px 0 rgba(19, 23, 32, 0);
965
967
  --wds-shadow-surface-overlay-dark: 0 12px 30px 0 rgba(19, 23, 32, .1), 0 0px 0px 0 rgba(19, 23, 32, 0);
966
- --wds-shadow-surface-raised: 0 2px 4px rgba(19, 23, 32, .05), 0 0 6px rgba(19, 23, 32, .1);
968
+ --wds-shadow-surface-raised: 1px 4px 4px 0 rgba(19, 23, 32, .05), 0 1px 1px -1.5px rgba(19, 23, 32, .05), 1px 0 2px -0.7px rgba(19, 23, 32, .05), 0 1px 10px 0 rgba(19, 23, 32, .05);
967
969
  --wds-shadow-x-input: 1px;
968
970
  --wds-shadow-x-primary-modal: 2px;
969
971
  --wds-shadow-x-primary-toggle-button: 1px;
package/odeditor-dark/all.css CHANGED
@@ -1,5 +1,6 @@
1
1
  :root, .wds-tokens {
2
2
  --wds-illustration-color-background: #2D2D2E;
3
+ --wds-illustration-color-7: #B8C4FF;
3
4
  --wds-illustration-color-6: #EAEFFF;
4
5
  --wds-illustration-color-5: #EAEFFF;
5
6
  --wds-illustration-color-4: #D5DFFF;
@@ -117,14 +118,14 @@
117
118
  --wds-color-fill-social-xcorp-disabled: #bebebe;
118
119
  --wds-color-fill-social-xcorp-active: #101419;
119
120
  --wds-color-fill-social-xcorp: #101419;
120
- --wds-color-fill-social-tiktok-hover: rgba(1, 1, 1, 0.8000);
121
- --wds-color-fill-social-tiktok-disabled: #bebebe;
122
- --wds-color-fill-social-tiktok-active: #010101;
123
- --wds-color-fill-social-tiktok: #010101;
124
121
  --wds-color-fill-social-twitter-hover: rgba(29, 161, 242, 0.8000);
125
122
  --wds-color-fill-social-twitter-disabled: #bebebe;
126
123
  --wds-color-fill-social-twitter-active: #1da1f2;
127
124
  --wds-color-fill-social-twitter: #1da1f2;
125
+ --wds-color-fill-social-tiktok-hover: rgba(1, 1, 1, 0.8000);
126
+ --wds-color-fill-social-tiktok-disabled: #bebebe;
127
+ --wds-color-fill-social-tiktok-active: #010101;
128
+ --wds-color-fill-social-tiktok: #010101;
128
129
  --wds-color-fill-social-pinterest-hover: rgba(230, 0, 25, 0.8000);
129
130
  --wds-color-fill-social-pinterest-disabled: #bebebe;
130
131
  --wds-color-fill-social-pinterest-active: #e60019;
@@ -200,6 +201,14 @@
200
201
  --wds-color-purple-100: #7200f3;
201
202
  --wds-color-purple-50: #6100cf;
202
203
  --wds-color-purple-0: #5000aa;
204
+ --wds-color-pink-600: #26021f;
205
+ --wds-color-pink-500: #40223d;
206
+ --wds-color-pink-400: #79466f;
207
+ --wds-color-pink-300: #bd22a1;
208
+ --wds-color-pink-200: #ea39ca;
209
+ --wds-color-pink-100: #ff69e4;
210
+ --wds-color-pink-50: #ffa9ef;
211
+ --wds-color-pink-0: #ffc2f3;
203
212
  --wds-color-orange-600: #26130A;
204
213
  --wds-color-orange-500: #512916;
205
214
  --wds-color-orange-400: #7D3F21;
@@ -970,6 +979,7 @@
970
979
  --wds-table-list-item-indentation-level-2: var(--wds-space-300);
971
980
  --wds-table-list-item-gap: var(--wds-space-400);
972
981
  --wds-table-list-item-fill-highlight: var(--wds-color-black-750);
982
+ --wds-table-list-item-fill: var(--wds-color-black-100-transparent-0);
973
983
  --wds-table-list-item-controls-padding-medium: var(--wds-space-200);
974
984
  --wds-table-list-item-border-radius: var(--wds-border-radius-400);
975
985
  --wds-table-list-item-border-color: var(--wds-color-black-550);
@@ -1447,10 +1457,14 @@
1447
1457
  --wds-card-tab-padding-vertical-medium: var(--wds-space-400);
1448
1458
  --wds-card-tab-padding-horizontal-small: var(--wds-space-500);
1449
1459
  --wds-card-tab-padding-horizontal-medium: var(--wds-space-500);
1460
+ --wds-card-header-title-subtitle-gap: var(--wds-space-0);
1450
1461
  --wds-card-header-padding-vertical: var(--wds-space-400);
1451
1462
  --wds-card-header-padding-horizontal: var(--wds-space-600);
1463
+ --wds-card-header-divider-width: var(--wds-border-width-none);
1452
1464
  --wds-card-content-paddings-vertical: var(--wds-space-300);
1453
1465
  --wds-card-content-paddings-horizontal: var(--wds-space-300);
1466
+ --wds-card-content-padding-medium: var(--wds-space-300);
1467
+ --wds-card-content-padding-large: var(--wds-space-300);
1454
1468
  --wds-button-size-x-tiny: var(--wds-space-475);
1455
1469
  --wds-button-size-tiny-screen-small: var(--wds-space-800);
1456
1470
  --wds-button-size-tiny: var(--wds-space-600);
@@ -1693,7 +1707,6 @@
1693
1707
  --wds-tabs-item-fill-active: var(--wds-color-fill-dark-secondary);
1694
1708
  --wds-table-list-item-fill-hover: var(--wds-color-fill-dark-tertiary-hover);
1695
1709
  --wds-table-list-item-fill-active: var(--wds-color-fill-dark-tertiary-active);
1696
- --wds-table-list-item-fill: var(--wds-color-fill-dark-tertiary);
1697
1710
  --wds-table-list-item-drag-handle-color: var(--wds-color-text-standard-primary);
1698
1711
  --wds-swatches-fill-disabled: var(--wds-color-fill-dark-secondary);
1699
1712
  --wds-swatches-fill-border-selected: var(--wds-color-border-dark-primary-active);
@@ -1958,6 +1971,9 @@
1958
1971
  --wds-card-gallery-item-subtitle-font-size-medium: var(--wds-font-size-body-tiny);
1959
1972
  --wds-card-gallery-item-overlay-fill: var(--wds-color-fill-transparent-primary);
1960
1973
  --wds-card-gallery-item-fill: var(--wds-color-fill-surface-default);
1974
+ --wds-card-subtitle-font-size: var(--wds-font-size-body-medium);
1975
+ --wds-card-subtitle-color: var(--wds-color-text-standard-secondary);
1976
+ --wds-card-border-radius: var(--wds-border-radius-surface-raised);
1961
1977
  --wds-button-label-font-size-large: var(--wds-font-size-body-medium);
1962
1978
  --wds-button-label-fill-standard-secondary-hover: var(--wds-color-fill-standard-primary-active);
1963
1979
  --wds-button-label-fill-standard-secondary-active: var(--wds-color-fill-standard-primary-active);
@@ -2078,6 +2094,7 @@
2078
2094
  --wds-checkbox-label-font-line-height-medium: var(--wds-font-line-height-body-small);
2079
2095
  --wds-card-gallery-item-title-font-line-height-small: var(--wds-font-line-height-body-tiny);
2080
2096
  --wds-card-gallery-item-title-font-line-height-medium: var(--wds-font-line-height-body-medium);
2097
+ --wds-card-subtitle-line-height: var(--wds-font-line-height-body-medium);
2081
2098
  --wds-button-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
2082
2099
  --wds-button-font-line-height-small: var(--wds-font-line-height-body-tiny);
2083
2100
  --wds-button-font-line-height-medium: var(--wds-font-line-height-body-medium);
package/odeditor-dark/all.scss CHANGED
@@ -155,6 +155,7 @@
155
155
  --wds-input-shadow-focus-standard: transparent;
156
156
  --wds-input-shadow-focus-destructive: transparent;
157
157
  --wds-illustration-color-background: #2D2D2E;
158
+ --wds-illustration-color-7: #B8C4FF;
158
159
  --wds-illustration-color-6: #EAEFFF;
159
160
  --wds-illustration-color-5: #EAEFFF;
160
161
  --wds-illustration-color-4: #D5DFFF;
@@ -222,6 +223,14 @@
222
223
  --wds-color-purple-100: #7200f3;
223
224
  --wds-color-purple-50: #6100cf;
224
225
  --wds-color-purple-0: #5000aa;
226
+ --wds-color-pink-600: #26021f;
227
+ --wds-color-pink-500: #40223d;
228
+ --wds-color-pink-400: #79466f;
229
+ --wds-color-pink-300: #bd22a1;
230
+ --wds-color-pink-200: #ea39ca;
231
+ --wds-color-pink-100: #ff69e4;
232
+ --wds-color-pink-50: #ffa9ef;
233
+ --wds-color-pink-0: #ffc2f3;
225
234
  --wds-color-picker-width: 236px;
226
235
  --wds-color-orange-600: #26130A;
227
236
  --wds-color-orange-500: #512916;
@@ -550,6 +559,7 @@
550
559
  --wds-table-list-item-indentation-level-2: var(--wds-space-300);
551
560
  --wds-table-list-item-gap: var(--wds-space-400);
552
561
  --wds-table-list-item-fill-highlight: var(--wds-color-black-750);
562
+ --wds-table-list-item-fill: var(--wds-color-black-100-transparent-0);
553
563
  --wds-table-list-item-controls-padding-medium: var(--wds-space-200);
554
564
  --wds-table-list-item-border-radius: var(--wds-border-radius-400);
555
565
  --wds-table-list-item-border-color: var(--wds-color-black-550);
@@ -1426,8 +1436,10 @@
1426
1436
  --wds-card-tab-padding-vertical-medium: var(--wds-space-400);
1427
1437
  --wds-card-tab-padding-horizontal-small: var(--wds-space-500);
1428
1438
  --wds-card-tab-padding-horizontal-medium: var(--wds-space-500);
1439
+ --wds-card-header-title-subtitle-gap: var(--wds-space-0);
1429
1440
  --wds-card-header-padding-vertical: var(--wds-space-400);
1430
1441
  --wds-card-header-padding-horizontal: var(--wds-space-600);
1442
+ --wds-card-header-divider-width: var(--wds-border-width-none);
1431
1443
  --wds-card-gallery-item-padding-vertical-small: var(--wds-space-300);
1432
1444
  --wds-card-gallery-item-padding-vertical-medium: var(--wds-space-475);
1433
1445
  --wds-card-gallery-item-padding-right-small: var(--wds-space-475);
@@ -1440,6 +1452,8 @@
1440
1452
  --wds-card-gallery-item-buttons-gap: var(--wds-space-200);
1441
1453
  --wds-card-content-paddings-vertical: var(--wds-space-300);
1442
1454
  --wds-card-content-paddings-horizontal: var(--wds-space-300);
1455
+ --wds-card-content-padding-medium: var(--wds-space-300);
1456
+ --wds-card-content-padding-large: var(--wds-space-300);
1443
1457
  --wds-button-size-x-tiny: var(--wds-space-475);
1444
1458
  --wds-button-size-tiny-screen-small: var(--wds-space-800);
1445
1459
  --wds-button-size-tiny: var(--wds-space-600);
@@ -1678,7 +1692,6 @@
1678
1692
  --wds-tabs-item-fill-active: var(--wds-color-fill-dark-secondary);
1679
1693
  --wds-table-list-item-fill-hover: var(--wds-color-fill-dark-tertiary-hover);
1680
1694
  --wds-table-list-item-fill-active: var(--wds-color-fill-dark-tertiary-active);
1681
- --wds-table-list-item-fill: var(--wds-color-fill-dark-tertiary);
1682
1695
  --wds-table-list-item-drag-handle-color: var(--wds-color-text-standard-primary);
1683
1696
  --wds-swatches-fill-disabled: var(--wds-color-fill-dark-secondary);
1684
1697
  --wds-swatches-fill-border-selected: var(--wds-color-border-dark-primary-active);
@@ -1954,10 +1967,13 @@
1954
1967
  --wds-checkbox-border-disabled: var(--wds-color-border-transparent-primary);
1955
1968
  --wds-checkbox-border-active: var(--wds-color-border-standard-primary-active);
1956
1969
  --wds-carousel-controls-shadow: 0 var(--wds-shadow-y-primary-modal) var(--wds-shadow-blur-primary-modal) var(--wds-shadow-fill-primary-modal), 0 var(--wds-shadow-blur-secondary-modal) var(--wds-shadow-y-secondary-modal) var(--wds-shadow-fill-secondary-modal);
1970
+ --wds-card-subtitle-font-size: var(--wds-font-size-body-medium);
1971
+ --wds-card-subtitle-color: var(--wds-color-text-standard-secondary);
1957
1972
  --wds-card-gallery-item-title-font-size-medium: var(--wds-font-size-body-medium);
1958
1973
  --wds-card-gallery-item-subtitle-font-size-medium: var(--wds-font-size-body-tiny);
1959
1974
  --wds-card-gallery-item-overlay-fill: var(--wds-color-fill-transparent-primary);
1960
1975
  --wds-card-gallery-item-fill: var(--wds-color-fill-surface-default);
1976
+ --wds-card-border-radius: var(--wds-border-radius-surface-raised);
1961
1977
  --wds-button-label-font-size-large: var(--wds-font-size-body-medium);
1962
1978
  --wds-button-label-fill-standard-secondary-hover: var(--wds-color-fill-standard-primary-active);
1963
1979
  --wds-button-label-fill-standard-secondary-active: var(--wds-color-fill-standard-primary-active);
@@ -2076,6 +2092,7 @@
2076
2092
  --wds-custom-modal-footnote-text-font-line-height: var(--wds-font-line-height-body-tiny);
2077
2093
  --wds-checkbox-label-font-line-height-small: var(--wds-font-line-height-body-tiny);
2078
2094
  --wds-checkbox-label-font-line-height-medium: var(--wds-font-line-height-body-small);
2095
+ --wds-card-subtitle-line-height: var(--wds-font-line-height-body-medium);
2079
2096
  --wds-card-gallery-item-title-font-line-height-small: var(--wds-font-line-height-body-tiny);
2080
2097
  --wds-card-gallery-item-title-font-line-height-medium: var(--wds-font-line-height-body-medium);
2081
2098
  --wds-button-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
package/odeditor-dark/all.st.css CHANGED
@@ -263,6 +263,9 @@
263
263
  @property st-global(--wds-button-size-tiny);
264
264
  @property st-global(--wds-button-size-tiny-screen-small);
265
265
  @property st-global(--wds-button-size-x-tiny);
266
+ @property st-global(--wds-card-border-radius);
267
+ @property st-global(--wds-card-content-padding-large);
268
+ @property st-global(--wds-card-content-padding-medium);
266
269
  @property st-global(--wds-card-content-paddings-horizontal);
267
270
  @property st-global(--wds-card-content-paddings-vertical);
268
271
  @property st-global(--wds-card-gallery-item-buttons-gap);
@@ -281,8 +284,13 @@
281
284
  @property st-global(--wds-card-gallery-item-title-font-line-height-medium);
282
285
  @property st-global(--wds-card-gallery-item-title-font-line-height-small);
283
286
  @property st-global(--wds-card-gallery-item-title-font-size-medium);
287
+ @property st-global(--wds-card-header-divider-width);
284
288
  @property st-global(--wds-card-header-padding-horizontal);
285
289
  @property st-global(--wds-card-header-padding-vertical);
290
+ @property st-global(--wds-card-header-title-subtitle-gap);
291
+ @property st-global(--wds-card-subtitle-color);
292
+ @property st-global(--wds-card-subtitle-font-size);
293
+ @property st-global(--wds-card-subtitle-line-height);
286
294
  @property st-global(--wds-card-tab-padding-horizontal-medium);
287
295
  @property st-global(--wds-card-tab-padding-horizontal-small);
288
296
  @property st-global(--wds-card-tab-padding-vertical-medium);
@@ -757,6 +765,14 @@
757
765
  @property st-global(--wds-color-picker-padding-horizontal);
758
766
  @property st-global(--wds-color-picker-padding-vertical);
759
767
  @property st-global(--wds-color-picker-width);
768
+ @property st-global(--wds-color-pink-0);
769
+ @property st-global(--wds-color-pink-50);
770
+ @property st-global(--wds-color-pink-100);
771
+ @property st-global(--wds-color-pink-200);
772
+ @property st-global(--wds-color-pink-300);
773
+ @property st-global(--wds-color-pink-400);
774
+ @property st-global(--wds-color-pink-500);
775
+ @property st-global(--wds-color-pink-600);
760
776
  @property st-global(--wds-color-purple-0);
761
777
  @property st-global(--wds-color-purple-50);
762
778
  @property st-global(--wds-color-purple-100);
@@ -1074,6 +1090,7 @@
1074
1090
  @property st-global(--wds-illustration-color-4);
1075
1091
  @property st-global(--wds-illustration-color-5);
1076
1092
  @property st-global(--wds-illustration-color-6);
1093
+ @property st-global(--wds-illustration-color-7);
1077
1094
  @property st-global(--wds-illustration-color-background);
1078
1095
  @property st-global(--wds-image-border-radius-default);
1079
1096
  @property st-global(--wds-image-border-radius-none);
@@ -2356,6 +2373,9 @@
2356
2373
  --wds-button-size-tiny: 24px;
2357
2374
  --wds-button-size-tiny-screen-small: 32px;
2358
2375
  --wds-button-size-x-tiny: 18px;
2376
+ --wds-card-border-radius: 12px;
2377
+ --wds-card-content-padding-large: 12px;
2378
+ --wds-card-content-padding-medium: 12px;
2359
2379
  --wds-card-content-paddings-horizontal: 12px;
2360
2380
  --wds-card-content-paddings-vertical: 12px;
2361
2381
  --wds-card-gallery-item-buttons-gap: 8px;
@@ -2374,8 +2394,13 @@
2374
2394
  --wds-card-gallery-item-title-font-line-height-medium: 24px;
2375
2395
  --wds-card-gallery-item-title-font-line-height-small: 16px;
2376
2396
  --wds-card-gallery-item-title-font-size-medium: 16px;
2397
+ --wds-card-header-divider-width: 0px;
2377
2398
  --wds-card-header-padding-horizontal: 24px;
2378
2399
  --wds-card-header-padding-vertical: 16px;
2400
+ --wds-card-header-title-subtitle-gap: 0px;
2401
+ --wds-card-subtitle-color: #D4D3D2;
2402
+ --wds-card-subtitle-font-size: 16px;
2403
+ --wds-card-subtitle-line-height: 24px;
2379
2404
  --wds-card-tab-padding-horizontal-medium: 20px;
2380
2405
  --wds-card-tab-padding-horizontal-small: 20px;
2381
2406
  --wds-card-tab-padding-vertical-medium: 16px;
@@ -2850,6 +2875,14 @@
2850
2875
  --wds-color-picker-padding-horizontal: 16px;
2851
2876
  --wds-color-picker-padding-vertical: 12px;
2852
2877
  --wds-color-picker-width: 236px;
2878
+ --wds-color-pink-0: #ffc2f3;
2879
+ --wds-color-pink-50: #ffa9ef;
2880
+ --wds-color-pink-100: #ff69e4;
2881
+ --wds-color-pink-200: #ea39ca;
2882
+ --wds-color-pink-300: #bd22a1;
2883
+ --wds-color-pink-400: #79466f;
2884
+ --wds-color-pink-500: #40223d;
2885
+ --wds-color-pink-600: #26021f;
2853
2886
  --wds-color-purple-0: #5000aa;
2854
2887
  --wds-color-purple-50: #6100cf;
2855
2888
  --wds-color-purple-100: #7200f3;
@@ -3167,6 +3200,7 @@
3167
3200
  --wds-illustration-color-4: #D5DFFF;
3168
3201
  --wds-illustration-color-5: #EAEFFF;
3169
3202
  --wds-illustration-color-6: #EAEFFF;
3203
+ --wds-illustration-color-7: #B8C4FF;
3170
3204
  --wds-illustration-color-background: #2D2D2E;
3171
3205
  --wds-image-border-radius-default: 8px;
3172
3206
  --wds-image-border-radius-none: 0px;
@@ -3872,7 +3906,7 @@
3872
3906
  --wds-table-list-item-border-radius: 8px;
3873
3907
  --wds-table-list-item-controls-padding-medium: 8px;
3874
3908
  --wds-table-list-item-drag-handle-color: #FFFFFF;
3875
- --wds-table-list-item-fill: #212122;
3909
+ --wds-table-list-item-fill: rgba(255, 255, 255, 0);
3876
3910
  --wds-table-list-item-fill-active: #2D2D2E;
3877
3911
  --wds-table-list-item-fill-highlight: #2D2D2E;
3878
3912
  --wds-table-list-item-fill-hover: #3A3A3B;
package/odeditor-dark/component.st.css CHANGED
@@ -222,6 +222,9 @@
222
222
  @property st-global(--wds-button-size-tiny);
223
223
  @property st-global(--wds-button-size-tiny-screen-small);
224
224
  @property st-global(--wds-button-size-x-tiny);
225
+ @property st-global(--wds-card-border-radius);
226
+ @property st-global(--wds-card-content-padding-large);
227
+ @property st-global(--wds-card-content-padding-medium);
225
228
  @property st-global(--wds-card-content-paddings-horizontal);
226
229
  @property st-global(--wds-card-content-paddings-vertical);
227
230
  @property st-global(--wds-card-gallery-item-buttons-gap);
@@ -240,8 +243,13 @@
240
243
  @property st-global(--wds-card-gallery-item-title-font-line-height-medium);
241
244
  @property st-global(--wds-card-gallery-item-title-font-line-height-small);
242
245
  @property st-global(--wds-card-gallery-item-title-font-size-medium);
246
+ @property st-global(--wds-card-header-divider-width);
243
247
  @property st-global(--wds-card-header-padding-horizontal);
244
248
  @property st-global(--wds-card-header-padding-vertical);
249
+ @property st-global(--wds-card-header-title-subtitle-gap);
250
+ @property st-global(--wds-card-subtitle-color);
251
+ @property st-global(--wds-card-subtitle-font-size);
252
+ @property st-global(--wds-card-subtitle-line-height);
245
253
  @property st-global(--wds-card-tab-padding-horizontal-medium);
246
254
  @property st-global(--wds-card-tab-padding-horizontal-small);
247
255
  @property st-global(--wds-card-tab-padding-vertical-medium);
@@ -1581,6 +1589,9 @@
1581
1589
  --wds-button-size-tiny: 24px;
1582
1590
  --wds-button-size-tiny-screen-small: 32px;
1583
1591
  --wds-button-size-x-tiny: 18px;
1592
+ --wds-card-border-radius: 12px;
1593
+ --wds-card-content-padding-large: 12px;
1594
+ --wds-card-content-padding-medium: 12px;
1584
1595
  --wds-card-content-paddings-horizontal: 12px;
1585
1596
  --wds-card-content-paddings-vertical: 12px;
1586
1597
  --wds-card-gallery-item-buttons-gap: 8px;
@@ -1599,8 +1610,13 @@
1599
1610
  --wds-card-gallery-item-title-font-line-height-medium: 24px;
1600
1611
  --wds-card-gallery-item-title-font-line-height-small: 16px;
1601
1612
  --wds-card-gallery-item-title-font-size-medium: 16px;
1613
+ --wds-card-header-divider-width: 0px;
1602
1614
  --wds-card-header-padding-horizontal: 24px;
1603
1615
  --wds-card-header-padding-vertical: 16px;
1616
+ --wds-card-header-title-subtitle-gap: 0px;
1617
+ --wds-card-subtitle-color: #D4D3D2;
1618
+ --wds-card-subtitle-font-size: 16px;
1619
+ --wds-card-subtitle-line-height: 24px;
1604
1620
  --wds-card-tab-padding-horizontal-medium: 20px;
1605
1621
  --wds-card-tab-padding-horizontal-small: 20px;
1606
1622
  --wds-card-tab-padding-vertical-medium: 16px;
@@ -2406,7 +2422,7 @@
2406
2422
  --wds-table-list-item-border-radius: 8px;
2407
2423
  --wds-table-list-item-controls-padding-medium: 8px;
2408
2424
  --wds-table-list-item-drag-handle-color: #FFFFFF;
2409
- --wds-table-list-item-fill: #212122;
2425
+ --wds-table-list-item-fill: rgba(255, 255, 255, 0);
2410
2426
  --wds-table-list-item-fill-active: #2D2D2E;
2411
2427
  --wds-table-list-item-fill-highlight: #2D2D2E;
2412
2428
  --wds-table-list-item-fill-hover: #3A3A3B;
package/odeditor-dark/foundation.st.css CHANGED
@@ -93,6 +93,14 @@
93
93
  @property st-global(--wds-color-orange-400);
94
94
  @property st-global(--wds-color-orange-500);
95
95
  @property st-global(--wds-color-orange-600);
96
+ @property st-global(--wds-color-pink-0);
97
+ @property st-global(--wds-color-pink-50);
98
+ @property st-global(--wds-color-pink-100);
99
+ @property st-global(--wds-color-pink-200);
100
+ @property st-global(--wds-color-pink-300);
101
+ @property st-global(--wds-color-pink-400);
102
+ @property st-global(--wds-color-pink-500);
103
+ @property st-global(--wds-color-pink-600);
96
104
  @property st-global(--wds-color-purple-0);
97
105
  @property st-global(--wds-color-purple-50);
98
106
  @property st-global(--wds-color-purple-100);
@@ -329,6 +337,14 @@
329
337
  --wds-color-orange-400: #7D3F21;
330
338
  --wds-color-orange-500: #512916;
331
339
  --wds-color-orange-600: #26130A;
340
+ --wds-color-pink-0: #ffc2f3;
341
+ --wds-color-pink-50: #ffa9ef;
342
+ --wds-color-pink-100: #ff69e4;
343
+ --wds-color-pink-200: #ea39ca;
344
+ --wds-color-pink-300: #bd22a1;
345
+ --wds-color-pink-400: #79466f;
346
+ --wds-color-pink-500: #40223d;
347
+ --wds-color-pink-600: #26021f;
332
348
  --wds-color-purple-0: #5000aa;
333
349
  --wds-color-purple-50: #6100cf;
334
350
  --wds-color-purple-100: #7200f3;
package/odeditor-dark/semantic.st.css CHANGED
@@ -405,6 +405,7 @@
405
405
  @property st-global(--wds-illustration-color-4);
406
406
  @property st-global(--wds-illustration-color-5);
407
407
  @property st-global(--wds-illustration-color-6);
408
+ @property st-global(--wds-illustration-color-7);
408
409
  @property st-global(--wds-illustration-color-background);
409
410
  @property st-global(--wds-inner-shadow-blur-input);
410
411
  @property st-global(--wds-inner-shadow-blur-primary);
@@ -907,6 +908,7 @@
907
908
  --wds-illustration-color-4: #D5DFFF;
908
909
  --wds-illustration-color-5: #EAEFFF;
909
910
  --wds-illustration-color-6: #EAEFFF;
911
+ --wds-illustration-color-7: #B8C4FF;
910
912
  --wds-illustration-color-background: #2D2D2E;
911
913
  --wds-inner-shadow-blur-input: 3px;
912
914
  --wds-inner-shadow-blur-primary: 2px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wix/design-system-tokens",
3
- "version": "1.201.0",
3
+ "version": "1.203.0",
4
4
  "scripts": {
5
5
  "build": "cp -r tokens/* .",
6
6
  "figma-to-dictionary": "ts-node src/scripts/figma-to-dictionary.ts",
@@ -32,5 +32,5 @@
32
32
  "author": "augustinasv@wix.com",
33
33
  "description": "Design system tokens",
34
34
  "packageManager": "yarn@3.5.0",
35
- "falconPackageHash": "35c99a066d148fdcd6982f23c23d9c3960c9a0760434d21556383f9e"
35
+ "falconPackageHash": "f9e57f137412fd8f8c55b7217cb8c1f7269ede438e8dbc6cdf793334"
36
36
  }
package/studio/all.css CHANGED
@@ -1,6 +1,7 @@
1
1
  :root, .wds-tokens {
2
2
  --wds-illustration-color-background: #F8F6F6;
3
- --wds-illustration-color-6: #002297;
3
+ --wds-illustration-color-7: #002297;
4
+ --wds-illustration-color-6: #002296;
4
5
  --wds-illustration-color-5: #EAEFF1;
5
6
  --wds-illustration-color-4: #D5DFFF;
6
7
  --wds-illustration-color-3: #B8C4FF;
@@ -119,14 +120,14 @@
119
120
  --wds-color-fill-social-xcorp-disabled: #bebebe;
120
121
  --wds-color-fill-social-xcorp-active: #101419;
121
122
  --wds-color-fill-social-xcorp: #101419;
122
- --wds-color-fill-social-tiktok-hover: rgba(1, 1, 1, .8);
123
- --wds-color-fill-social-tiktok-disabled: #bebebe;
124
- --wds-color-fill-social-tiktok-active: #010101;
125
- --wds-color-fill-social-tiktok: #010101;
126
123
  --wds-color-fill-social-twitter-hover: rgba(29, 161, 242, .8);
127
124
  --wds-color-fill-social-twitter-disabled: #bebebe;
128
125
  --wds-color-fill-social-twitter-active: #1da1f2;
129
126
  --wds-color-fill-social-twitter: #1da1f2;
127
+ --wds-color-fill-social-tiktok-hover: rgba(1, 1, 1, .8);
128
+ --wds-color-fill-social-tiktok-disabled: #bebebe;
129
+ --wds-color-fill-social-tiktok-active: #010101;
130
+ --wds-color-fill-social-tiktok: #010101;
130
131
  --wds-color-fill-social-pinterest-hover: rgba(230, 0, 25, .8);
131
132
  --wds-color-fill-social-pinterest-disabled: #bebebe;
132
133
  --wds-color-fill-social-pinterest-active: #e60019;
@@ -207,6 +208,14 @@
207
208
  --wds-color-purple-100: #9a27d5;
208
209
  --wds-color-purple-50: #8e1dd1;
209
210
  --wds-color-purple-0: #7927a3;
211
+ --wds-color-pink-600: #feebfb;
212
+ --wds-color-pink-500: #fdd7f2;
213
+ --wds-color-pink-400: #ffc2f3;
214
+ --wds-color-pink-300: #ffa9ef;
215
+ --wds-color-pink-200: #ff77e6;
216
+ --wds-color-pink-100: #f639d3;
217
+ --wds-color-pink-50: #e221ac;
218
+ --wds-color-pink-0: #bd22a1;
210
219
  --wds-color-orange-600: #feefea;
211
220
  --wds-color-orange-500: #fee8e1;
212
221
  --wds-color-orange-400: #fdd7cc;
@@ -1422,8 +1431,10 @@
1422
1431
  --wds-card-tab-padding-vertical-medium: var(--wds-space-400);
1423
1432
  --wds-card-tab-padding-horizontal-small: var(--wds-space-500);
1424
1433
  --wds-card-tab-padding-horizontal-medium: var(--wds-space-500);
1434
+ --wds-card-header-title-subtitle-gap: var(--wds-space-0);
1425
1435
  --wds-card-header-padding-vertical: var(--wds-space-400);
1426
1436
  --wds-card-header-padding-horizontal: var(--wds-space-600);
1437
+ --wds-card-header-divider-width: var(--wds-border-width-none);
1427
1438
  --wds-card-content-paddings-vertical: var(--wds-space-600);
1428
1439
  --wds-card-content-paddings-horizontal: var(--wds-space-600);
1429
1440
  --wds-card-content-padding-medium: var(--wds-space-600);
@@ -1951,6 +1962,9 @@
1951
1962
  --wds-card-gallery-item-subtitle-font-size-medium: var(--wds-font-size-body-small);
1952
1963
  --wds-card-gallery-item-overlay-fill: var(--wds-color-fill-transparent-primary);
1953
1964
  --wds-card-gallery-item-fill: var(--wds-color-fill-surface-default);
1965
+ --wds-card-subtitle-font-size: var(--wds-font-size-body-medium);
1966
+ --wds-card-subtitle-color: var(--wds-color-text-standard-secondary);
1967
+ --wds-card-border-radius: var(--wds-border-radius-surface-raised);
1954
1968
  --wds-button-text-hover: var(--wds-color-text-primary);
1955
1969
  --wds-button-outline-hover: var(--wds-color-border-standard-secondary);
1956
1970
  --wds-button-label-fill-transparent-tertiary: var(--wds-color-text-standard-primary-light);
@@ -2114,6 +2128,7 @@
2114
2128
  --wds-checkbox-label-font-line-height-medium: var(--wds-font-line-height-body-medium);
2115
2129
  --wds-card-gallery-item-title-font-line-height-small: var(--wds-font-line-height-body-small);
2116
2130
  --wds-card-gallery-item-title-font-line-height-medium: var(--wds-font-line-height-body-medium);
2131
+ --wds-card-subtitle-line-height: var(--wds-font-line-height-body-medium);
2117
2132
  --wds-button-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
2118
2133
  --wds-button-font-line-height-large: var(--wds-font-line-height-body-medium);
2119
2134
  --wds-button-font-line-height-extra-large: var(--wds-font-line-height-body-medium);
package/studio/all.scss CHANGED
@@ -123,7 +123,8 @@
123
123
  --wds-input-shadow-focus-standard: transparent;
124
124
  --wds-input-shadow-focus-destructive: transparent;
125
125
  --wds-illustration-color-background: #F8F6F6;
126
- --wds-illustration-color-6: #002297;
126
+ --wds-illustration-color-7: #002297;
127
+ --wds-illustration-color-6: #002296;
127
128
  --wds-illustration-color-5: #EAEFF1;
128
129
  --wds-illustration-color-4: #D5DFFF;
129
130
  --wds-illustration-color-3: #B8C4FF;
@@ -187,6 +188,14 @@
187
188
  --wds-color-purple-100: #9a27d5;
188
189
  --wds-color-purple-50: #8e1dd1;
189
190
  --wds-color-purple-0: #7927a3;
191
+ --wds-color-pink-600: #feebfb;
192
+ --wds-color-pink-500: #fdd7f2;
193
+ --wds-color-pink-400: #ffc2f3;
194
+ --wds-color-pink-300: #ffa9ef;
195
+ --wds-color-pink-200: #ff77e6;
196
+ --wds-color-pink-100: #f639d3;
197
+ --wds-color-pink-50: #e221ac;
198
+ --wds-color-pink-0: #bd22a1;
190
199
  --wds-color-picker-width: 236px;
191
200
  --wds-color-orange-600: #feefea;
192
201
  --wds-color-orange-500: #fee8e1;
@@ -1400,8 +1409,10 @@
1400
1409
  --wds-card-tab-padding-vertical-medium: var(--wds-space-400);
1401
1410
  --wds-card-tab-padding-horizontal-small: var(--wds-space-500);
1402
1411
  --wds-card-tab-padding-horizontal-medium: var(--wds-space-500);
1412
+ --wds-card-header-title-subtitle-gap: var(--wds-space-0);
1403
1413
  --wds-card-header-padding-vertical: var(--wds-space-400);
1404
1414
  --wds-card-header-padding-horizontal: var(--wds-space-600);
1415
+ --wds-card-header-divider-width: var(--wds-border-width-none);
1405
1416
  --wds-card-gallery-item-padding-vertical-small: var(--wds-space-300);
1406
1417
  --wds-card-gallery-item-padding-vertical-medium: var(--wds-space-475);
1407
1418
  --wds-card-gallery-item-padding-right-small: var(--wds-space-475);
@@ -1947,10 +1958,13 @@
1947
1958
  --wds-checkbox-border-active: var(--wds-color-border-standard-secondary-active);
1948
1959
  --wds-checkbox-border: var(--wds-color-border-dark-primary);
1949
1960
  --wds-carousel-controls-shadow: var(--wds-shadow-300);
1961
+ --wds-card-subtitle-font-size: var(--wds-font-size-body-medium);
1962
+ --wds-card-subtitle-color: var(--wds-color-text-standard-secondary);
1950
1963
  --wds-card-gallery-item-title-font-size-medium: var(--wds-font-size-body-small);
1951
1964
  --wds-card-gallery-item-subtitle-font-size-medium: var(--wds-font-size-body-small);
1952
1965
  --wds-card-gallery-item-overlay-fill: var(--wds-color-fill-transparent-primary);
1953
1966
  --wds-card-gallery-item-fill: var(--wds-color-fill-surface-default);
1967
+ --wds-card-border-radius: var(--wds-border-radius-surface-raised);
1954
1968
  --wds-button-text-hover: var(--wds-color-text-primary);
1955
1969
  --wds-button-outline-hover: var(--wds-color-border-standard-secondary);
1956
1970
  --wds-button-label-fill-transparent-tertiary: var(--wds-color-text-standard-primary-light);
@@ -2112,6 +2126,7 @@
2112
2126
  --wds-custom-modal-footnote-text-font-line-height: var(--wds-font-line-height-body-tiny);
2113
2127
  --wds-checkbox-label-font-line-height-small: var(--wds-font-line-height-body-small);
2114
2128
  --wds-checkbox-label-font-line-height-medium: var(--wds-font-line-height-body-medium);
2129
+ --wds-card-subtitle-line-height: var(--wds-font-line-height-body-medium);
2115
2130
  --wds-card-gallery-item-title-font-line-height-small: var(--wds-font-line-height-body-small);
2116
2131
  --wds-card-gallery-item-title-font-line-height-medium: var(--wds-font-line-height-body-medium);
2117
2132
  --wds-button-font-line-height-tiny: var(--wds-font-line-height-body-tiny);