@wix/design-system-tokens 1.225.2 → 1.225.3

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 (23) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/all.css +7 -0
  3. package/all.scss +7 -0
  4. package/all.st.css +14 -0
  5. package/component.st.css +14 -0
  6. package/odeditor/all.css +15 -8
  7. package/odeditor/all.scss +15 -8
  8. package/odeditor/all.st.css +22 -8
  9. package/odeditor/component.st.css +22 -8
  10. package/odeditor-dark/all.css +15 -8
  11. package/odeditor-dark/all.scss +15 -8
  12. package/odeditor-dark/all.st.css +22 -8
  13. package/odeditor-dark/component.st.css +22 -8
  14. package/package.json +2 -2
  15. package/pending-figma-sync/README.md +11 -0
  16. package/studio/all.css +7 -0
  17. package/studio/all.scss +7 -0
  18. package/studio/all.st.css +14 -0
  19. package/studio/component.st.css +14 -0
  20. package/wixel/all.css +7 -0
  21. package/wixel/all.scss +7 -0
  22. package/wixel/all.st.css +14 -0
  23. package/wixel/component.st.css +14 -0
package/odeditor-dark/all.css CHANGED
@@ -404,9 +404,9 @@
404
404
  --wds-radio-dot-size: 4px;
405
405
  --wds-page-section-divider-display: block;
406
406
  --wds-page-header-divider-color: transparent;
407
- --wds-page-header-breadcrumbs-offset-small: 0px;
408
- --wds-page-header-breadcrumbs-offset-medium: 0px;
409
- --wds-page-header-breadcrumbs-offset-large: 0px;
407
+ --wds-page-header-breadcrumbs-offset-small: -8px;
408
+ --wds-page-header-breadcrumbs-offset-medium: -8px;
409
+ --wds-page-header-breadcrumbs-offset-large: -8px;
410
410
  --wds-marketing-page-overline-divider-margin-top: 17px;
411
411
  --wds-marketing-page-overline-divider-display: block;
412
412
  --wds-marketing-page-image-top-title-subtitle-gap: 16px;
@@ -431,9 +431,13 @@
431
431
  --wds-marketing-layout-image-wrapper-contain: none;
432
432
  --wds-marketing-layout-image-width: 100%;
433
433
  --wds-marketing-layout-image-object-fit: fill;
434
+ --wds-marketing-layout-image-max-width-tiny: none;
435
+ --wds-marketing-layout-image-max-width-small: none;
436
+ --wds-marketing-layout-image-max-width-medium: none;
434
437
  --wds-marketing-layout-image-height: auto;
435
438
  --wds-marketing-layout-image-aspect-ratio: auto;
436
439
  --wds-marketing-layout-description-max-width: none;
440
+ --wds-marketing-layout-content-justify: center;
437
441
  --wds-marketing-layout-badge-top: auto;
438
442
  --wds-marketing-layout-badge-side: auto;
439
443
  --wds-marketing-layout-badge-position: static;
@@ -1407,11 +1411,11 @@
1407
1411
  --wds-page-section-padding-bottom-with-divider: var(--wds-space-0);
1408
1412
  --wds-page-section-padding-bottom: var(--wds-space-200);
1409
1413
  --wds-page-section-gap: var(--wds-space-0);
1410
- --wds-page-header-title-padding-start: var(--wds-space-200);
1414
+ --wds-page-header-title-padding-start: var(--wds-space-0);
1411
1415
  --wds-page-header-title-minimised-letter-spacing: var(--wds-font-letter-spacing-0);
1412
1416
  --wds-page-header-title-minimised-font-weight: var(--wds-font-weight-medium);
1413
1417
  --wds-page-header-title-actions-gap: var(--wds-space-0);
1414
- --wds-page-header-subtitle-padding-start: var(--wds-space-200);
1418
+ --wds-page-header-subtitle-padding-start: var(--wds-space-0);
1415
1419
  --wds-page-header-subtitle-gap: var(--wds-space-100);
1416
1420
  --wds-page-header-padding-vertical-small: var(--wds-space-475);
1417
1421
  --wds-page-header-padding-vertical: var(--wds-space-600);
@@ -1421,8 +1425,8 @@
1421
1425
  --wds-page-header-breadcrumbs-selected-font-weight: var(--wds-font-weight-medium);
1422
1426
  --wds-page-header-breadcrumbs-font-size: var(--wds-font-size-200);
1423
1427
  --wds-page-header-breadcrumbs-color: var(--wds-color-black-300);
1424
- --wds-page-header-back-button-offset: var(--wds-space-100);
1425
- --wds-page-header-back-button-gap: var(--wds-space-0);
1428
+ --wds-page-header-back-button-offset: var(--wds-space-0);
1429
+ --wds-page-header-back-button-gap: var(--wds-space-200);
1426
1430
  --wds-padding-vertical-tiny: var(--wds-space-500);
1427
1431
  --wds-padding-vertical-small: var(--wds-space-600);
1428
1432
  --wds-padding-vertical-medium: var(--wds-space-600);
@@ -1480,6 +1484,7 @@
1480
1484
  --wds-marketing-layout-title-line-height-tiny: var(--wds-space-500);
1481
1485
  --wds-marketing-layout-title-line-height-small: var(--wds-space-500);
1482
1486
  --wds-marketing-layout-title-line-height-medium: var(--wds-space-500);
1487
+ --wds-marketing-layout-title-letter-spacing-tiny: var(--wds-font-letter-spacing-0);
1483
1488
  --wds-marketing-layout-title-gap-tiny: var(--wds-space-200);
1484
1489
  --wds-marketing-layout-title-gap-small: var(--wds-space-200);
1485
1490
  --wds-marketing-layout-title-gap-medium: var(--wds-space-200);
@@ -1505,6 +1510,7 @@
1505
1510
  --wds-marketing-layout-image-padding-left-tiny: var(--wds-space-300);
1506
1511
  --wds-marketing-layout-image-padding-left-small: var(--wds-space-300);
1507
1512
  --wds-marketing-layout-image-padding-left-medium: var(--wds-space-300);
1513
+ --wds-marketing-layout-image-hug-padding: var(--wds-space-0);
1508
1514
  --wds-marketing-layout-image-border-radius: var(--wds-border-radius-400);
1509
1515
  --wds-marketing-layout-description-font-weight-tiny: var(--wds-font-weight-medium);
1510
1516
  --wds-marketing-layout-description-font-weight-small: var(--wds-font-weight-medium);
@@ -1785,12 +1791,13 @@
1785
1791
  --wds-card-header-title-subtitle-gap: var(--wds-space-100);
1786
1792
  --wds-card-header-padding-vertical: var(--wds-space-400);
1787
1793
  --wds-card-header-padding-horizontal: var(--wds-space-600);
1794
+ --wds-card-header-padding-bottom: var(--wds-space-0);
1788
1795
  --wds-card-header-divider-width: var(--wds-border-width-none);
1789
1796
  --wds-card-controls-padding-vertical: var(--wds-space-400);
1790
1797
  --wds-card-controls-padding-horizontal: var(--wds-space-600);
1791
1798
  --wds-card-content-paddings-vertical: var(--wds-space-300);
1792
1799
  --wds-card-content-paddings-horizontal: var(--wds-space-300);
1793
- --wds-card-content-padding-medium-top: var(--wds-space-100);
1800
+ --wds-card-content-padding-medium-top: var(--wds-space-600);
1794
1801
  --wds-card-content-padding-medium-horizontal: var(--wds-space-600);
1795
1802
  --wds-card-content-padding-medium-bottom: var(--wds-space-600);
1796
1803
  --wds-card-content-padding-medium: var(--wds-space-300);
package/odeditor-dark/all.scss CHANGED
@@ -163,9 +163,9 @@
163
163
  --wds-radio-dot-size: 4px;
164
164
  --wds-page-section-divider-display: block;
165
165
  --wds-page-header-divider-color: transparent;
166
- --wds-page-header-breadcrumbs-offset-small: 0px;
167
- --wds-page-header-breadcrumbs-offset-medium: 0px;
168
- --wds-page-header-breadcrumbs-offset-large: 0px;
166
+ --wds-page-header-breadcrumbs-offset-small: -8px;
167
+ --wds-page-header-breadcrumbs-offset-medium: -8px;
168
+ --wds-page-header-breadcrumbs-offset-large: -8px;
169
169
  --wds-marketing-page-overline-divider-margin-top: 17px;
170
170
  --wds-marketing-page-overline-divider-display: block;
171
171
  --wds-marketing-page-image-top-title-subtitle-gap: 16px;
@@ -190,9 +190,13 @@
190
190
  --wds-marketing-layout-image-wrapper-contain: none;
191
191
  --wds-marketing-layout-image-width: 100%;
192
192
  --wds-marketing-layout-image-object-fit: fill;
193
+ --wds-marketing-layout-image-max-width-tiny: none;
194
+ --wds-marketing-layout-image-max-width-small: none;
195
+ --wds-marketing-layout-image-max-width-medium: none;
193
196
  --wds-marketing-layout-image-height: auto;
194
197
  --wds-marketing-layout-image-aspect-ratio: auto;
195
198
  --wds-marketing-layout-description-max-width: none;
199
+ --wds-marketing-layout-content-justify: center;
196
200
  --wds-marketing-layout-badge-top: auto;
197
201
  --wds-marketing-layout-badge-side: auto;
198
202
  --wds-marketing-layout-badge-position: static;
@@ -1067,11 +1071,11 @@
1067
1071
  --wds-page-section-padding-bottom-with-divider: var(--wds-space-0);
1068
1072
  --wds-page-section-padding-bottom: var(--wds-space-200);
1069
1073
  --wds-page-section-gap: var(--wds-space-0);
1070
- --wds-page-header-title-padding-start: var(--wds-space-200);
1074
+ --wds-page-header-title-padding-start: var(--wds-space-0);
1071
1075
  --wds-page-header-title-minimised-letter-spacing: var(--wds-font-letter-spacing-0);
1072
1076
  --wds-page-header-title-minimised-font-weight: var(--wds-font-weight-medium);
1073
1077
  --wds-page-header-title-actions-gap: var(--wds-space-0);
1074
- --wds-page-header-subtitle-padding-start: var(--wds-space-200);
1078
+ --wds-page-header-subtitle-padding-start: var(--wds-space-0);
1075
1079
  --wds-page-header-subtitle-gap: var(--wds-space-100);
1076
1080
  --wds-page-header-padding-vertical-small: var(--wds-space-475);
1077
1081
  --wds-page-header-padding-vertical: var(--wds-space-600);
@@ -1081,8 +1085,8 @@
1081
1085
  --wds-page-header-breadcrumbs-selected-font-weight: var(--wds-font-weight-medium);
1082
1086
  --wds-page-header-breadcrumbs-font-size: var(--wds-font-size-200);
1083
1087
  --wds-page-header-breadcrumbs-color: var(--wds-color-black-300);
1084
- --wds-page-header-back-button-offset: var(--wds-space-100);
1085
- --wds-page-header-back-button-gap: var(--wds-space-0);
1088
+ --wds-page-header-back-button-offset: var(--wds-space-0);
1089
+ --wds-page-header-back-button-gap: var(--wds-space-200);
1086
1090
  --wds-padding-vertical-tiny: var(--wds-space-500);
1087
1091
  --wds-padding-vertical-small: var(--wds-space-600);
1088
1092
  --wds-padding-vertical-medium: var(--wds-space-600);
@@ -1140,6 +1144,7 @@
1140
1144
  --wds-marketing-layout-title-line-height-tiny: var(--wds-space-500);
1141
1145
  --wds-marketing-layout-title-line-height-small: var(--wds-space-500);
1142
1146
  --wds-marketing-layout-title-line-height-medium: var(--wds-space-500);
1147
+ --wds-marketing-layout-title-letter-spacing-tiny: var(--wds-font-letter-spacing-0);
1143
1148
  --wds-marketing-layout-title-gap-tiny: var(--wds-space-200);
1144
1149
  --wds-marketing-layout-title-gap-small: var(--wds-space-200);
1145
1150
  --wds-marketing-layout-title-gap-medium: var(--wds-space-200);
@@ -1165,6 +1170,7 @@
1165
1170
  --wds-marketing-layout-image-padding-left-tiny: var(--wds-space-300);
1166
1171
  --wds-marketing-layout-image-padding-left-small: var(--wds-space-300);
1167
1172
  --wds-marketing-layout-image-padding-left-medium: var(--wds-space-300);
1173
+ --wds-marketing-layout-image-hug-padding: var(--wds-space-0);
1168
1174
  --wds-marketing-layout-image-border-radius: var(--wds-border-radius-400);
1169
1175
  --wds-marketing-layout-description-font-weight-tiny: var(--wds-font-weight-medium);
1170
1176
  --wds-marketing-layout-description-font-weight-small: var(--wds-font-weight-medium);
@@ -1750,6 +1756,7 @@
1750
1756
  --wds-card-header-title-subtitle-gap: var(--wds-space-100);
1751
1757
  --wds-card-header-padding-vertical: var(--wds-space-400);
1752
1758
  --wds-card-header-padding-horizontal: var(--wds-space-600);
1759
+ --wds-card-header-padding-bottom: var(--wds-space-0);
1753
1760
  --wds-card-header-divider-width: var(--wds-border-width-none);
1754
1761
  --wds-card-gallery-item-title-font-weight-small: var(--wds-font-weight-medium);
1755
1762
  --wds-card-gallery-item-title-font-weight-medium: var(--wds-font-weight-bold);
@@ -1779,7 +1786,7 @@
1779
1786
  --wds-card-controls-padding-horizontal: var(--wds-space-600);
1780
1787
  --wds-card-content-paddings-vertical: var(--wds-space-300);
1781
1788
  --wds-card-content-paddings-horizontal: var(--wds-space-300);
1782
- --wds-card-content-padding-medium-top: var(--wds-space-100);
1789
+ --wds-card-content-padding-medium-top: var(--wds-space-600);
1783
1790
  --wds-card-content-padding-medium-horizontal: var(--wds-space-600);
1784
1791
  --wds-card-content-padding-medium-bottom: var(--wds-space-600);
1785
1792
  --wds-card-content-padding-medium: var(--wds-space-300);
package/odeditor-dark/all.st.css CHANGED
@@ -391,6 +391,7 @@
391
391
  @property st-global(--wds-card-gallery-item-title-font-weight-small);
392
392
  @property st-global(--wds-card-gallery-item-title-gap);
393
393
  @property st-global(--wds-card-header-divider-width);
394
+ @property st-global(--wds-card-header-padding-bottom);
394
395
  @property st-global(--wds-card-header-padding-horizontal);
395
396
  @property st-global(--wds-card-header-padding-vertical);
396
397
  @property st-global(--wds-card-header-suffix-align);
@@ -1485,6 +1486,7 @@
1485
1486
  @property st-global(--wds-marketing-layout-badge-side);
1486
1487
  @property st-global(--wds-marketing-layout-badge-top);
1487
1488
  @property st-global(--wds-marketing-layout-border);
1489
+ @property st-global(--wds-marketing-layout-content-justify);
1488
1490
  @property st-global(--wds-marketing-layout-description-color);
1489
1491
  @property st-global(--wds-marketing-layout-description-font-size-medium);
1490
1492
  @property st-global(--wds-marketing-layout-description-font-size-small);
@@ -1499,6 +1501,10 @@
1499
1501
  @property st-global(--wds-marketing-layout-image-aspect-ratio);
1500
1502
  @property st-global(--wds-marketing-layout-image-border-radius);
1501
1503
  @property st-global(--wds-marketing-layout-image-height);
1504
+ @property st-global(--wds-marketing-layout-image-hug-padding);
1505
+ @property st-global(--wds-marketing-layout-image-max-width-medium);
1506
+ @property st-global(--wds-marketing-layout-image-max-width-small);
1507
+ @property st-global(--wds-marketing-layout-image-max-width-tiny);
1502
1508
  @property st-global(--wds-marketing-layout-image-object-fit);
1503
1509
  @property st-global(--wds-marketing-layout-image-padding-left-medium);
1504
1510
  @property st-global(--wds-marketing-layout-image-padding-left-small);
@@ -1535,6 +1541,7 @@
1535
1541
  @property st-global(--wds-marketing-layout-title-gap-medium);
1536
1542
  @property st-global(--wds-marketing-layout-title-gap-small);
1537
1543
  @property st-global(--wds-marketing-layout-title-gap-tiny);
1544
+ @property st-global(--wds-marketing-layout-title-letter-spacing-tiny);
1538
1545
  @property st-global(--wds-marketing-layout-title-line-height-medium);
1539
1546
  @property st-global(--wds-marketing-layout-title-line-height-small);
1540
1547
  @property st-global(--wds-marketing-layout-title-line-height-tiny);
@@ -2889,7 +2896,7 @@
2889
2896
  --wds-card-content-padding-medium: 12px;
2890
2897
  --wds-card-content-padding-medium-bottom: 24px;
2891
2898
  --wds-card-content-padding-medium-horizontal: 24px;
2892
- --wds-card-content-padding-medium-top: 4px;
2899
+ --wds-card-content-padding-medium-top: 24px;
2893
2900
  --wds-card-content-paddings-horizontal: 12px;
2894
2901
  --wds-card-content-paddings-vertical: 12px;
2895
2902
  --wds-card-controls-padding-horizontal: 24px;
@@ -2957,6 +2964,7 @@
2957
2964
  --wds-card-gallery-item-title-font-weight-small: 500;
2958
2965
  --wds-card-gallery-item-title-gap: 0px;
2959
2966
  --wds-card-header-divider-width: 0px;
2967
+ --wds-card-header-padding-bottom: 0px;
2960
2968
  --wds-card-header-padding-horizontal: 24px;
2961
2969
  --wds-card-header-padding-vertical: 16px;
2962
2970
  --wds-card-header-suffix-align: flex-start;
@@ -4051,6 +4059,7 @@
4051
4059
  --wds-marketing-layout-badge-side: auto;
4052
4060
  --wds-marketing-layout-badge-top: auto;
4053
4061
  --wds-marketing-layout-border: 4px;
4062
+ --wds-marketing-layout-content-justify: center;
4054
4063
  --wds-marketing-layout-description-color: #A8A6A5;
4055
4064
  --wds-marketing-layout-description-font-size-medium: 12px;
4056
4065
  --wds-marketing-layout-description-font-size-small: 12px;
@@ -4065,6 +4074,10 @@
4065
4074
  --wds-marketing-layout-image-aspect-ratio: auto;
4066
4075
  --wds-marketing-layout-image-border-radius: 8px;
4067
4076
  --wds-marketing-layout-image-height: auto;
4077
+ --wds-marketing-layout-image-hug-padding: 0px;
4078
+ --wds-marketing-layout-image-max-width-medium: none;
4079
+ --wds-marketing-layout-image-max-width-small: none;
4080
+ --wds-marketing-layout-image-max-width-tiny: none;
4068
4081
  --wds-marketing-layout-image-object-fit: fill;
4069
4082
  --wds-marketing-layout-image-padding-left-medium: 12px;
4070
4083
  --wds-marketing-layout-image-padding-left-small: 12px;
@@ -4101,6 +4114,7 @@
4101
4114
  --wds-marketing-layout-title-gap-medium: 8px;
4102
4115
  --wds-marketing-layout-title-gap-small: 8px;
4103
4116
  --wds-marketing-layout-title-gap-tiny: 8px;
4117
+ --wds-marketing-layout-title-letter-spacing-tiny: 0px;
4104
4118
  --wds-marketing-layout-title-line-height-medium: 20px;
4105
4119
  --wds-marketing-layout-title-line-height-small: 20px;
4106
4120
  --wds-marketing-layout-title-line-height-tiny: 20px;
@@ -4186,13 +4200,13 @@
4186
4200
  --wds-padding-vertical-medium: 24px;
4187
4201
  --wds-padding-vertical-small: 24px;
4188
4202
  --wds-padding-vertical-tiny: 20px;
4189
- --wds-page-header-back-button-gap: 0px;
4190
- --wds-page-header-back-button-offset: 4px;
4203
+ --wds-page-header-back-button-gap: 8px;
4204
+ --wds-page-header-back-button-offset: 0px;
4191
4205
  --wds-page-header-breadcrumbs-color: #A8A6A5;
4192
4206
  --wds-page-header-breadcrumbs-font-size: 12px;
4193
- --wds-page-header-breadcrumbs-offset-large: 0px;
4194
- --wds-page-header-breadcrumbs-offset-medium: 0px;
4195
- --wds-page-header-breadcrumbs-offset-small: 0px;
4207
+ --wds-page-header-breadcrumbs-offset-large: -8px;
4208
+ --wds-page-header-breadcrumbs-offset-medium: -8px;
4209
+ --wds-page-header-breadcrumbs-offset-small: -8px;
4196
4210
  --wds-page-header-breadcrumbs-selected-font-weight: 500;
4197
4211
  --wds-page-header-divider-color: transparent;
4198
4212
  --wds-page-header-padding-bottom-with-tail: 12px;
@@ -4203,7 +4217,7 @@
4203
4217
  --wds-page-header-subtitle-font-size: 16px;
4204
4218
  --wds-page-header-subtitle-gap: 4px;
4205
4219
  --wds-page-header-subtitle-line-height: 24px;
4206
- --wds-page-header-subtitle-padding-start: 8px;
4220
+ --wds-page-header-subtitle-padding-start: 0px;
4207
4221
  --wds-page-header-title-actions-gap: 0px;
4208
4222
  --wds-page-header-title-font-size: 32px;
4209
4223
  --wds-page-header-title-font-weight: 400;
@@ -4212,7 +4226,7 @@
4212
4226
  --wds-page-header-title-minimised-font-weight: 500;
4213
4227
  --wds-page-header-title-minimised-letter-spacing: 0px;
4214
4228
  --wds-page-header-title-minimised-line-height: 18px;
4215
- --wds-page-header-title-padding-start: 8px;
4229
+ --wds-page-header-title-padding-start: 0px;
4216
4230
  --wds-page-section-divider-display: block;
4217
4231
  --wds-page-section-gap: 0px;
4218
4232
  --wds-page-section-padding-bottom: 8px;
package/odeditor-dark/component.st.css CHANGED
@@ -350,6 +350,7 @@
350
350
  @property st-global(--wds-card-gallery-item-title-font-weight-small);
351
351
  @property st-global(--wds-card-gallery-item-title-gap);
352
352
  @property st-global(--wds-card-header-divider-width);
353
+ @property st-global(--wds-card-header-padding-bottom);
353
354
  @property st-global(--wds-card-header-padding-horizontal);
354
355
  @property st-global(--wds-card-header-padding-vertical);
355
356
  @property st-global(--wds-card-header-suffix-align);
@@ -893,6 +894,7 @@
893
894
  @property st-global(--wds-marketing-layout-badge-side);
894
895
  @property st-global(--wds-marketing-layout-badge-top);
895
896
  @property st-global(--wds-marketing-layout-border);
897
+ @property st-global(--wds-marketing-layout-content-justify);
896
898
  @property st-global(--wds-marketing-layout-description-color);
897
899
  @property st-global(--wds-marketing-layout-description-font-size-medium);
898
900
  @property st-global(--wds-marketing-layout-description-font-size-small);
@@ -907,6 +909,10 @@
907
909
  @property st-global(--wds-marketing-layout-image-aspect-ratio);
908
910
  @property st-global(--wds-marketing-layout-image-border-radius);
909
911
  @property st-global(--wds-marketing-layout-image-height);
912
+ @property st-global(--wds-marketing-layout-image-hug-padding);
913
+ @property st-global(--wds-marketing-layout-image-max-width-medium);
914
+ @property st-global(--wds-marketing-layout-image-max-width-small);
915
+ @property st-global(--wds-marketing-layout-image-max-width-tiny);
910
916
  @property st-global(--wds-marketing-layout-image-object-fit);
911
917
  @property st-global(--wds-marketing-layout-image-padding-left-medium);
912
918
  @property st-global(--wds-marketing-layout-image-padding-left-small);
@@ -943,6 +949,7 @@
943
949
  @property st-global(--wds-marketing-layout-title-gap-medium);
944
950
  @property st-global(--wds-marketing-layout-title-gap-small);
945
951
  @property st-global(--wds-marketing-layout-title-gap-tiny);
952
+ @property st-global(--wds-marketing-layout-title-letter-spacing-tiny);
946
953
  @property st-global(--wds-marketing-layout-title-line-height-medium);
947
954
  @property st-global(--wds-marketing-layout-title-line-height-small);
948
955
  @property st-global(--wds-marketing-layout-title-line-height-tiny);
@@ -2099,7 +2106,7 @@
2099
2106
  --wds-card-content-padding-medium: 12px;
2100
2107
  --wds-card-content-padding-medium-bottom: 24px;
2101
2108
  --wds-card-content-padding-medium-horizontal: 24px;
2102
- --wds-card-content-padding-medium-top: 4px;
2109
+ --wds-card-content-padding-medium-top: 24px;
2103
2110
  --wds-card-content-paddings-horizontal: 12px;
2104
2111
  --wds-card-content-paddings-vertical: 12px;
2105
2112
  --wds-card-controls-padding-horizontal: 24px;
@@ -2167,6 +2174,7 @@
2167
2174
  --wds-card-gallery-item-title-font-weight-small: 500;
2168
2175
  --wds-card-gallery-item-title-gap: 0px;
2169
2176
  --wds-card-header-divider-width: 0px;
2177
+ --wds-card-header-padding-bottom: 0px;
2170
2178
  --wds-card-header-padding-horizontal: 24px;
2171
2179
  --wds-card-header-padding-vertical: 16px;
2172
2180
  --wds-card-header-suffix-align: flex-start;
@@ -2710,6 +2718,7 @@
2710
2718
  --wds-marketing-layout-badge-side: auto;
2711
2719
  --wds-marketing-layout-badge-top: auto;
2712
2720
  --wds-marketing-layout-border: 4px;
2721
+ --wds-marketing-layout-content-justify: center;
2713
2722
  --wds-marketing-layout-description-color: #A8A6A5;
2714
2723
  --wds-marketing-layout-description-font-size-medium: 12px;
2715
2724
  --wds-marketing-layout-description-font-size-small: 12px;
@@ -2724,6 +2733,10 @@
2724
2733
  --wds-marketing-layout-image-aspect-ratio: auto;
2725
2734
  --wds-marketing-layout-image-border-radius: 8px;
2726
2735
  --wds-marketing-layout-image-height: auto;
2736
+ --wds-marketing-layout-image-hug-padding: 0px;
2737
+ --wds-marketing-layout-image-max-width-medium: none;
2738
+ --wds-marketing-layout-image-max-width-small: none;
2739
+ --wds-marketing-layout-image-max-width-tiny: none;
2727
2740
  --wds-marketing-layout-image-object-fit: fill;
2728
2741
  --wds-marketing-layout-image-padding-left-medium: 12px;
2729
2742
  --wds-marketing-layout-image-padding-left-small: 12px;
@@ -2760,6 +2773,7 @@
2760
2773
  --wds-marketing-layout-title-gap-medium: 8px;
2761
2774
  --wds-marketing-layout-title-gap-small: 8px;
2762
2775
  --wds-marketing-layout-title-gap-tiny: 8px;
2776
+ --wds-marketing-layout-title-letter-spacing-tiny: 0px;
2763
2777
  --wds-marketing-layout-title-line-height-medium: 20px;
2764
2778
  --wds-marketing-layout-title-line-height-small: 20px;
2765
2779
  --wds-marketing-layout-title-line-height-tiny: 20px;
@@ -2845,13 +2859,13 @@
2845
2859
  --wds-padding-vertical-medium: 24px;
2846
2860
  --wds-padding-vertical-small: 24px;
2847
2861
  --wds-padding-vertical-tiny: 20px;
2848
- --wds-page-header-back-button-gap: 0px;
2849
- --wds-page-header-back-button-offset: 4px;
2862
+ --wds-page-header-back-button-gap: 8px;
2863
+ --wds-page-header-back-button-offset: 0px;
2850
2864
  --wds-page-header-breadcrumbs-color: #A8A6A5;
2851
2865
  --wds-page-header-breadcrumbs-font-size: 12px;
2852
- --wds-page-header-breadcrumbs-offset-large: 0px;
2853
- --wds-page-header-breadcrumbs-offset-medium: 0px;
2854
- --wds-page-header-breadcrumbs-offset-small: 0px;
2866
+ --wds-page-header-breadcrumbs-offset-large: -8px;
2867
+ --wds-page-header-breadcrumbs-offset-medium: -8px;
2868
+ --wds-page-header-breadcrumbs-offset-small: -8px;
2855
2869
  --wds-page-header-breadcrumbs-selected-font-weight: 500;
2856
2870
  --wds-page-header-divider-color: transparent;
2857
2871
  --wds-page-header-padding-bottom-with-tail: 12px;
@@ -2862,7 +2876,7 @@
2862
2876
  --wds-page-header-subtitle-font-size: 16px;
2863
2877
  --wds-page-header-subtitle-gap: 4px;
2864
2878
  --wds-page-header-subtitle-line-height: 24px;
2865
- --wds-page-header-subtitle-padding-start: 8px;
2879
+ --wds-page-header-subtitle-padding-start: 0px;
2866
2880
  --wds-page-header-title-actions-gap: 0px;
2867
2881
  --wds-page-header-title-font-size: 32px;
2868
2882
  --wds-page-header-title-font-weight: 400;
@@ -2871,7 +2885,7 @@
2871
2885
  --wds-page-header-title-minimised-font-weight: 500;
2872
2886
  --wds-page-header-title-minimised-letter-spacing: 0px;
2873
2887
  --wds-page-header-title-minimised-line-height: 18px;
2874
- --wds-page-header-title-padding-start: 8px;
2888
+ --wds-page-header-title-padding-start: 0px;
2875
2889
  --wds-page-section-divider-display: block;
2876
2890
  --wds-page-section-gap: 0px;
2877
2891
  --wds-page-section-padding-bottom: 8px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wix/design-system-tokens",
3
- "version": "1.225.2",
3
+ "version": "1.225.3",
4
4
  "scripts": {
5
5
  "build": "cp -r tokens/* .",
6
6
  "figma-to-dictionary": "ts-node src/scripts/figma-to-dictionary.ts",
@@ -36,5 +36,5 @@
36
36
  "author": "augustinasv@wix.com",
37
37
  "description": "Design system tokens",
38
38
  "packageManager": "yarn@3.5.0",
39
- "falconPackageHash": "e1491444146d14072bd1eb31bb3effaae28deea0eb7446d985a845ff"
39
+ "falconPackageHash": "284d98770405e8e771ad41e419fecc51b952fff906ac5a930108481e"
40
40
  }
package/pending-figma-sync/README.md ADDED
@@ -0,0 +1,11 @@
1
+ # Pending Figma sync (per-branch)
2
+
3
+ Tokens created in code that may not exist in Figma yet, one file per branch.
4
+ The `.claude/hooks/figma-token-sync` hook writes `<branch-name>.md` here when
5
+ an edit adds a token path under `src/tokens/`. Keeping one file per branch
6
+ means concurrent PRs never conflict on a shared ledger.
7
+
8
+ At release, `yarn release:version` (`scripts/merge-pending-figma-sync.mjs`)
9
+ appends every row from these files into [`../PENDING_FIGMA_SYNC.md`](../PENDING_FIGMA_SYNC.md),
10
+ de-duped on theme + token, and deletes the files. Don't edit the ledger
11
+ directly for new tokens; let the hook and release handle it.
package/studio/all.css CHANGED
@@ -420,10 +420,14 @@
420
420
  --wds-marketing-layout-image-wrapper-contain: none;
421
421
  --wds-marketing-layout-image-width: 100%;
422
422
  --wds-marketing-layout-image-object-fit: fill;
423
+ --wds-marketing-layout-image-max-width-tiny: none;
424
+ --wds-marketing-layout-image-max-width-small: none;
425
+ --wds-marketing-layout-image-max-width-medium: none;
423
426
  --wds-marketing-layout-image-height: auto;
424
427
  --wds-marketing-layout-image-border-radius: 0px;
425
428
  --wds-marketing-layout-image-aspect-ratio: auto;
426
429
  --wds-marketing-layout-description-max-width: none;
430
+ --wds-marketing-layout-content-justify: center;
427
431
  --wds-marketing-layout-badge-top: 9px;
428
432
  --wds-marketing-layout-badge-side: -3px;
429
433
  --wds-marketing-layout-badge-position: absolute;
@@ -1432,6 +1436,7 @@
1432
1436
  --wds-marketing-page-content-padding-end-medium: var(--wds-space-1200);
1433
1437
  --wds-marketing-page-content-padding-end-large: var(--wds-space-1500);
1434
1438
  --wds-marketing-page-content-actions-gap: var(--wds-space-700);
1439
+ --wds-marketing-layout-title-letter-spacing-tiny: var(--wds-font-letter-spacing-0);
1435
1440
  --wds-marketing-layout-title-gap-tiny: var(--wds-space-100);
1436
1441
  --wds-marketing-layout-title-gap-small: var(--wds-space-100);
1437
1442
  --wds-marketing-layout-title-gap-medium: var(--wds-space-200);
@@ -1455,6 +1460,7 @@
1455
1460
  --wds-marketing-layout-image-padding-left-tiny: var(--wds-space-600);
1456
1461
  --wds-marketing-layout-image-padding-left-small: var(--wds-space-600);
1457
1462
  --wds-marketing-layout-image-padding-left-medium: var(--wds-space-1200);
1463
+ --wds-marketing-layout-image-hug-padding: var(--wds-space-0);
1458
1464
  --wds-marketing-layout-description-font-weight-tiny: var(--wds-font-weight-regular);
1459
1465
  --wds-marketing-layout-description-font-weight-small: var(--wds-font-weight-regular);
1460
1466
  --wds-marketing-layout-description-font-weight-medium: var(--wds-font-weight-regular);
@@ -1728,6 +1734,7 @@
1728
1734
  --wds-card-header-title-subtitle-gap: var(--wds-space-0);
1729
1735
  --wds-card-header-padding-vertical: var(--wds-space-400);
1730
1736
  --wds-card-header-padding-horizontal: var(--wds-space-600);
1737
+ --wds-card-header-padding-bottom: var(--wds-space-400);
1731
1738
  --wds-card-header-divider-width: var(--wds-border-width-none);
1732
1739
  --wds-card-controls-padding-vertical: var(--wds-space-400);
1733
1740
  --wds-card-controls-padding-horizontal: var(--wds-space-600);
package/studio/all.scss CHANGED
@@ -163,10 +163,14 @@
163
163
  --wds-marketing-layout-image-wrapper-contain: none;
164
164
  --wds-marketing-layout-image-width: 100%;
165
165
  --wds-marketing-layout-image-object-fit: fill;
166
+ --wds-marketing-layout-image-max-width-tiny: none;
167
+ --wds-marketing-layout-image-max-width-small: none;
168
+ --wds-marketing-layout-image-max-width-medium: none;
166
169
  --wds-marketing-layout-image-height: auto;
167
170
  --wds-marketing-layout-image-border-radius: 0px;
168
171
  --wds-marketing-layout-image-aspect-ratio: auto;
169
172
  --wds-marketing-layout-description-max-width: none;
173
+ --wds-marketing-layout-content-justify: center;
170
174
  --wds-marketing-layout-badge-top: 9px;
171
175
  --wds-marketing-layout-badge-side: -3px;
172
176
  --wds-marketing-layout-badge-position: absolute;
@@ -1111,6 +1115,7 @@
1111
1115
  --wds-marketing-page-content-padding-end-medium: var(--wds-space-1200);
1112
1116
  --wds-marketing-page-content-padding-end-large: var(--wds-space-1500);
1113
1117
  --wds-marketing-page-content-actions-gap: var(--wds-space-700);
1118
+ --wds-marketing-layout-title-letter-spacing-tiny: var(--wds-font-letter-spacing-0);
1114
1119
  --wds-marketing-layout-title-gap-tiny: var(--wds-space-100);
1115
1120
  --wds-marketing-layout-title-gap-small: var(--wds-space-100);
1116
1121
  --wds-marketing-layout-title-gap-medium: var(--wds-space-200);
@@ -1134,6 +1139,7 @@
1134
1139
  --wds-marketing-layout-image-padding-left-tiny: var(--wds-space-600);
1135
1140
  --wds-marketing-layout-image-padding-left-small: var(--wds-space-600);
1136
1141
  --wds-marketing-layout-image-padding-left-medium: var(--wds-space-1200);
1142
+ --wds-marketing-layout-image-hug-padding: var(--wds-space-0);
1137
1143
  --wds-marketing-layout-description-font-weight-tiny: var(--wds-font-weight-regular);
1138
1144
  --wds-marketing-layout-description-font-weight-small: var(--wds-font-weight-regular);
1139
1145
  --wds-marketing-layout-description-font-weight-medium: var(--wds-font-weight-regular);
@@ -1692,6 +1698,7 @@
1692
1698
  --wds-card-header-title-subtitle-gap: var(--wds-space-0);
1693
1699
  --wds-card-header-padding-vertical: var(--wds-space-400);
1694
1700
  --wds-card-header-padding-horizontal: var(--wds-space-600);
1701
+ --wds-card-header-padding-bottom: var(--wds-space-400);
1695
1702
  --wds-card-header-divider-width: var(--wds-border-width-none);
1696
1703
  --wds-card-gallery-item-title-font-weight-small: var(--wds-font-weight-medium);
1697
1704
  --wds-card-gallery-item-title-font-weight-medium: var(--wds-font-weight-medium);
package/studio/all.st.css CHANGED
@@ -391,6 +391,7 @@
391
391
  @property st-global(--wds-card-gallery-item-title-font-weight-small);
392
392
  @property st-global(--wds-card-gallery-item-title-gap);
393
393
  @property st-global(--wds-card-header-divider-width);
394
+ @property st-global(--wds-card-header-padding-bottom);
394
395
  @property st-global(--wds-card-header-padding-horizontal);
395
396
  @property st-global(--wds-card-header-padding-vertical);
396
397
  @property st-global(--wds-card-header-suffix-align);
@@ -1511,6 +1512,7 @@
1511
1512
  @property st-global(--wds-marketing-layout-badge-side);
1512
1513
  @property st-global(--wds-marketing-layout-badge-top);
1513
1514
  @property st-global(--wds-marketing-layout-border);
1515
+ @property st-global(--wds-marketing-layout-content-justify);
1514
1516
  @property st-global(--wds-marketing-layout-description-color);
1515
1517
  @property st-global(--wds-marketing-layout-description-font-size-medium);
1516
1518
  @property st-global(--wds-marketing-layout-description-font-size-small);
@@ -1525,6 +1527,10 @@
1525
1527
  @property st-global(--wds-marketing-layout-image-aspect-ratio);
1526
1528
  @property st-global(--wds-marketing-layout-image-border-radius);
1527
1529
  @property st-global(--wds-marketing-layout-image-height);
1530
+ @property st-global(--wds-marketing-layout-image-hug-padding);
1531
+ @property st-global(--wds-marketing-layout-image-max-width-medium);
1532
+ @property st-global(--wds-marketing-layout-image-max-width-small);
1533
+ @property st-global(--wds-marketing-layout-image-max-width-tiny);
1528
1534
  @property st-global(--wds-marketing-layout-image-object-fit);
1529
1535
  @property st-global(--wds-marketing-layout-image-padding-left-medium);
1530
1536
  @property st-global(--wds-marketing-layout-image-padding-left-small);
@@ -1561,6 +1567,7 @@
1561
1567
  @property st-global(--wds-marketing-layout-title-gap-medium);
1562
1568
  @property st-global(--wds-marketing-layout-title-gap-small);
1563
1569
  @property st-global(--wds-marketing-layout-title-gap-tiny);
1570
+ @property st-global(--wds-marketing-layout-title-letter-spacing-tiny);
1564
1571
  @property st-global(--wds-marketing-layout-title-line-height-medium);
1565
1572
  @property st-global(--wds-marketing-layout-title-line-height-small);
1566
1573
  @property st-global(--wds-marketing-layout-title-line-height-tiny);
@@ -2965,6 +2972,7 @@
2965
2972
  --wds-card-gallery-item-title-font-weight-small: 500;
2966
2973
  --wds-card-gallery-item-title-gap: 0px;
2967
2974
  --wds-card-header-divider-width: 0px;
2975
+ --wds-card-header-padding-bottom: 16px;
2968
2976
  --wds-card-header-padding-horizontal: 24px;
2969
2977
  --wds-card-header-padding-vertical: 16px;
2970
2978
  --wds-card-header-suffix-align: center;
@@ -4085,6 +4093,7 @@
4085
4093
  --wds-marketing-layout-badge-side: -3px;
4086
4094
  --wds-marketing-layout-badge-top: 9px;
4087
4095
  --wds-marketing-layout-border: 4px;
4096
+ --wds-marketing-layout-content-justify: center;
4088
4097
  --wds-marketing-layout-description-color: #42454c;
4089
4098
  --wds-marketing-layout-description-font-size-medium: 16px;
4090
4099
  --wds-marketing-layout-description-font-size-small: 14px;
@@ -4099,6 +4108,10 @@
4099
4108
  --wds-marketing-layout-image-aspect-ratio: auto;
4100
4109
  --wds-marketing-layout-image-border-radius: 0px;
4101
4110
  --wds-marketing-layout-image-height: auto;
4111
+ --wds-marketing-layout-image-hug-padding: 0px;
4112
+ --wds-marketing-layout-image-max-width-medium: none;
4113
+ --wds-marketing-layout-image-max-width-small: none;
4114
+ --wds-marketing-layout-image-max-width-tiny: none;
4102
4115
  --wds-marketing-layout-image-object-fit: fill;
4103
4116
  --wds-marketing-layout-image-padding-left-medium: 48px;
4104
4117
  --wds-marketing-layout-image-padding-left-small: 24px;
@@ -4135,6 +4148,7 @@
4135
4148
  --wds-marketing-layout-title-gap-medium: 8px;
4136
4149
  --wds-marketing-layout-title-gap-small: 4px;
4137
4150
  --wds-marketing-layout-title-gap-tiny: 4px;
4151
+ --wds-marketing-layout-title-letter-spacing-tiny: 0px;
4138
4152
  --wds-marketing-layout-title-line-height-medium: 28px;
4139
4153
  --wds-marketing-layout-title-line-height-small: 28px;
4140
4154
  --wds-marketing-layout-title-line-height-tiny: 24px;
package/studio/component.st.css CHANGED
@@ -353,6 +353,7 @@
353
353
  @property st-global(--wds-card-gallery-item-title-font-weight-small);
354
354
  @property st-global(--wds-card-gallery-item-title-gap);
355
355
  @property st-global(--wds-card-header-divider-width);
356
+ @property st-global(--wds-card-header-padding-bottom);
356
357
  @property st-global(--wds-card-header-padding-horizontal);
357
358
  @property st-global(--wds-card-header-padding-vertical);
358
359
  @property st-global(--wds-card-header-suffix-align);
@@ -921,6 +922,7 @@
921
922
  @property st-global(--wds-marketing-layout-badge-side);
922
923
  @property st-global(--wds-marketing-layout-badge-top);
923
924
  @property st-global(--wds-marketing-layout-border);
925
+ @property st-global(--wds-marketing-layout-content-justify);
924
926
  @property st-global(--wds-marketing-layout-description-color);
925
927
  @property st-global(--wds-marketing-layout-description-font-size-medium);
926
928
  @property st-global(--wds-marketing-layout-description-font-size-small);
@@ -935,6 +937,10 @@
935
937
  @property st-global(--wds-marketing-layout-image-aspect-ratio);
936
938
  @property st-global(--wds-marketing-layout-image-border-radius);
937
939
  @property st-global(--wds-marketing-layout-image-height);
940
+ @property st-global(--wds-marketing-layout-image-hug-padding);
941
+ @property st-global(--wds-marketing-layout-image-max-width-medium);
942
+ @property st-global(--wds-marketing-layout-image-max-width-small);
943
+ @property st-global(--wds-marketing-layout-image-max-width-tiny);
938
944
  @property st-global(--wds-marketing-layout-image-object-fit);
939
945
  @property st-global(--wds-marketing-layout-image-padding-left-medium);
940
946
  @property st-global(--wds-marketing-layout-image-padding-left-small);
@@ -971,6 +977,7 @@
971
977
  @property st-global(--wds-marketing-layout-title-gap-medium);
972
978
  @property st-global(--wds-marketing-layout-title-gap-small);
973
979
  @property st-global(--wds-marketing-layout-title-gap-tiny);
980
+ @property st-global(--wds-marketing-layout-title-letter-spacing-tiny);
974
981
  @property st-global(--wds-marketing-layout-title-line-height-medium);
975
982
  @property st-global(--wds-marketing-layout-title-line-height-small);
976
983
  @property st-global(--wds-marketing-layout-title-line-height-tiny);
@@ -2182,6 +2189,7 @@
2182
2189
  --wds-card-gallery-item-title-font-weight-small: 500;
2183
2190
  --wds-card-gallery-item-title-gap: 0px;
2184
2191
  --wds-card-header-divider-width: 0px;
2192
+ --wds-card-header-padding-bottom: 16px;
2185
2193
  --wds-card-header-padding-horizontal: 24px;
2186
2194
  --wds-card-header-padding-vertical: 16px;
2187
2195
  --wds-card-header-suffix-align: center;
@@ -2750,6 +2758,7 @@
2750
2758
  --wds-marketing-layout-badge-side: -3px;
2751
2759
  --wds-marketing-layout-badge-top: 9px;
2752
2760
  --wds-marketing-layout-border: 4px;
2761
+ --wds-marketing-layout-content-justify: center;
2753
2762
  --wds-marketing-layout-description-color: #42454c;
2754
2763
  --wds-marketing-layout-description-font-size-medium: 16px;
2755
2764
  --wds-marketing-layout-description-font-size-small: 14px;
@@ -2764,6 +2773,10 @@
2764
2773
  --wds-marketing-layout-image-aspect-ratio: auto;
2765
2774
  --wds-marketing-layout-image-border-radius: 0px;
2766
2775
  --wds-marketing-layout-image-height: auto;
2776
+ --wds-marketing-layout-image-hug-padding: 0px;
2777
+ --wds-marketing-layout-image-max-width-medium: none;
2778
+ --wds-marketing-layout-image-max-width-small: none;
2779
+ --wds-marketing-layout-image-max-width-tiny: none;
2767
2780
  --wds-marketing-layout-image-object-fit: fill;
2768
2781
  --wds-marketing-layout-image-padding-left-medium: 48px;
2769
2782
  --wds-marketing-layout-image-padding-left-small: 24px;
@@ -2800,6 +2813,7 @@
2800
2813
  --wds-marketing-layout-title-gap-medium: 8px;
2801
2814
  --wds-marketing-layout-title-gap-small: 4px;
2802
2815
  --wds-marketing-layout-title-gap-tiny: 4px;
2816
+ --wds-marketing-layout-title-letter-spacing-tiny: 0px;
2803
2817
  --wds-marketing-layout-title-line-height-medium: 28px;
2804
2818
  --wds-marketing-layout-title-line-height-small: 28px;
2805
2819
  --wds-marketing-layout-title-line-height-tiny: 24px;