@wix/design-system-tokens 1.225.1 → 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 +16 -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 +17 -10
  7. package/odeditor/all.scss +17 -10
  8. package/odeditor/all.st.css +24 -10
  9. package/odeditor/component.st.css +24 -10
  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/component.st.css CHANGED
@@ -349,6 +349,7 @@
349
349
  @property st-global(--wds-card-gallery-item-title-font-weight-small);
350
350
  @property st-global(--wds-card-gallery-item-title-gap);
351
351
  @property st-global(--wds-card-header-divider-width);
352
+ @property st-global(--wds-card-header-padding-bottom);
352
353
  @property st-global(--wds-card-header-padding-horizontal);
353
354
  @property st-global(--wds-card-header-padding-vertical);
354
355
  @property st-global(--wds-card-header-suffix-align);
@@ -890,6 +891,7 @@
890
891
  @property st-global(--wds-marketing-layout-badge-side);
891
892
  @property st-global(--wds-marketing-layout-badge-top);
892
893
  @property st-global(--wds-marketing-layout-border);
894
+ @property st-global(--wds-marketing-layout-content-justify);
893
895
  @property st-global(--wds-marketing-layout-description-color);
894
896
  @property st-global(--wds-marketing-layout-description-font-size-medium);
895
897
  @property st-global(--wds-marketing-layout-description-font-size-small);
@@ -904,6 +906,10 @@
904
906
  @property st-global(--wds-marketing-layout-image-aspect-ratio);
905
907
  @property st-global(--wds-marketing-layout-image-border-radius);
906
908
  @property st-global(--wds-marketing-layout-image-height);
909
+ @property st-global(--wds-marketing-layout-image-hug-padding);
910
+ @property st-global(--wds-marketing-layout-image-max-width-medium);
911
+ @property st-global(--wds-marketing-layout-image-max-width-small);
912
+ @property st-global(--wds-marketing-layout-image-max-width-tiny);
907
913
  @property st-global(--wds-marketing-layout-image-object-fit);
908
914
  @property st-global(--wds-marketing-layout-image-padding-left-medium);
909
915
  @property st-global(--wds-marketing-layout-image-padding-left-small);
@@ -940,6 +946,7 @@
940
946
  @property st-global(--wds-marketing-layout-title-gap-medium);
941
947
  @property st-global(--wds-marketing-layout-title-gap-small);
942
948
  @property st-global(--wds-marketing-layout-title-gap-tiny);
949
+ @property st-global(--wds-marketing-layout-title-letter-spacing-tiny);
943
950
  @property st-global(--wds-marketing-layout-title-line-height-medium);
944
951
  @property st-global(--wds-marketing-layout-title-line-height-small);
945
952
  @property st-global(--wds-marketing-layout-title-line-height-tiny);
@@ -2097,7 +2104,7 @@
2097
2104
  --wds-card-content-padding-medium: 12px;
2098
2105
  --wds-card-content-padding-medium-bottom: 24px;
2099
2106
  --wds-card-content-padding-medium-horizontal: 24px;
2100
- --wds-card-content-padding-medium-top: 4px;
2107
+ --wds-card-content-padding-medium-top: 24px;
2101
2108
  --wds-card-content-paddings-horizontal: 12px;
2102
2109
  --wds-card-content-paddings-vertical: 12px;
2103
2110
  --wds-card-controls-padding-horizontal: 12px;
@@ -2167,6 +2174,7 @@
2167
2174
  --wds-card-gallery-item-title-font-weight-small: 700;
2168
2175
  --wds-card-gallery-item-title-gap: 2px;
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: 24px;
2172
2180
  --wds-card-header-suffix-align: flex-start;
@@ -2708,6 +2716,7 @@
2708
2716
  --wds-marketing-layout-badge-side: auto;
2709
2717
  --wds-marketing-layout-badge-top: auto;
2710
2718
  --wds-marketing-layout-border: 4px;
2719
+ --wds-marketing-layout-content-justify: flex-start;
2711
2720
  --wds-marketing-layout-description-color: #525150;
2712
2721
  --wds-marketing-layout-description-font-size-medium: 12px;
2713
2722
  --wds-marketing-layout-description-font-size-small: 12px;
@@ -2722,6 +2731,10 @@
2722
2731
  --wds-marketing-layout-image-aspect-ratio: 1;
2723
2732
  --wds-marketing-layout-image-border-radius: 8px;
2724
2733
  --wds-marketing-layout-image-height: 100%;
2734
+ --wds-marketing-layout-image-hug-padding: 12px;
2735
+ --wds-marketing-layout-image-max-width-medium: 156px;
2736
+ --wds-marketing-layout-image-max-width-small: 136px;
2737
+ --wds-marketing-layout-image-max-width-tiny: 116px;
2725
2738
  --wds-marketing-layout-image-object-fit: cover;
2726
2739
  --wds-marketing-layout-image-padding-left-medium: 12px;
2727
2740
  --wds-marketing-layout-image-padding-left-small: 12px;
@@ -2758,6 +2771,7 @@
2758
2771
  --wds-marketing-layout-title-gap-medium: 4px;
2759
2772
  --wds-marketing-layout-title-gap-small: 4px;
2760
2773
  --wds-marketing-layout-title-gap-tiny: 2px;
2774
+ --wds-marketing-layout-title-letter-spacing-tiny: -0.5px;
2761
2775
  --wds-marketing-layout-title-line-height-medium: 20px;
2762
2776
  --wds-marketing-layout-title-line-height-small: 20px;
2763
2777
  --wds-marketing-layout-title-line-height-tiny: 20px;
@@ -2843,13 +2857,13 @@
2843
2857
  --wds-padding-vertical-medium: 24px;
2844
2858
  --wds-padding-vertical-small: 24px;
2845
2859
  --wds-padding-vertical-tiny: 20px;
2846
- --wds-page-header-back-button-gap: 0px;
2847
- --wds-page-header-back-button-offset: 4px;
2860
+ --wds-page-header-back-button-gap: 8px;
2861
+ --wds-page-header-back-button-offset: 0px;
2848
2862
  --wds-page-header-breadcrumbs-color: #525150;
2849
2863
  --wds-page-header-breadcrumbs-font-size: 12px;
2850
- --wds-page-header-breadcrumbs-offset-large: 0px;
2851
- --wds-page-header-breadcrumbs-offset-medium: 0px;
2852
- --wds-page-header-breadcrumbs-offset-small: 0px;
2864
+ --wds-page-header-breadcrumbs-offset-large: -8px;
2865
+ --wds-page-header-breadcrumbs-offset-medium: -8px;
2866
+ --wds-page-header-breadcrumbs-offset-small: -8px;
2853
2867
  --wds-page-header-breadcrumbs-selected-font-weight: 500;
2854
2868
  --wds-page-header-divider-color: transparent;
2855
2869
  --wds-page-header-padding-bottom-with-tail: 12px;
@@ -2860,7 +2874,7 @@
2860
2874
  --wds-page-header-subtitle-font-size: 12px;
2861
2875
  --wds-page-header-subtitle-gap: 4px;
2862
2876
  --wds-page-header-subtitle-line-height: 16px;
2863
- --wds-page-header-subtitle-padding-start: 8px;
2877
+ --wds-page-header-subtitle-padding-start: 0px;
2864
2878
  --wds-page-header-title-actions-gap: 40px;
2865
2879
  --wds-page-header-title-font-size: 24px;
2866
2880
  --wds-page-header-title-font-weight: 500;
@@ -2869,7 +2883,7 @@
2869
2883
  --wds-page-header-title-minimised-font-weight: 700;
2870
2884
  --wds-page-header-title-minimised-letter-spacing: -0.5px;
2871
2885
  --wds-page-header-title-minimised-line-height: 24px;
2872
- --wds-page-header-title-padding-start: 8px;
2886
+ --wds-page-header-title-padding-start: 0px;
2873
2887
  --wds-page-section-divider-display: none;
2874
2888
  --wds-page-section-gap: 2px;
2875
2889
  --wds-page-section-padding-bottom: 4px;
@@ -3112,7 +3126,7 @@
3112
3126
  --wds-sidebar-fill-light: #F7F7F7;
3113
3127
  --wds-sidebar-fill-neutral: #F7F7F7;
3114
3128
  --wds-sidebar-footer-fade-height: 60px;
3115
- --wds-sidebar-header-margin-bottom: 12px;
3129
+ --wds-sidebar-header-margin-bottom: 16px;
3116
3130
  --wds-sidebar-header-text-dark-default: #ffffff;
3117
3131
  --wds-sidebar-item-border-radius: 8px;
3118
3132
  --wds-sidebar-item-content-gap: 8px;
@@ -3190,7 +3204,7 @@
3190
3204
  --wds-sidebar-minimized-width: 62px;
3191
3205
  --wds-sidebar-navigation-arrow-fill-neutral: #ffffff;
3192
3206
  --wds-sidebar-padding-bottom: 24px;
3193
- --wds-sidebar-padding-end: 6px;
3207
+ --wds-sidebar-padding-end: 14px;
3194
3208
  --wds-sidebar-padding-start: 12px;
3195
3209
  --wds-sidebar-padding-top: 24px;
3196
3210
  --wds-sidebar-scrollbar-fill-dark-active: #b8b9bc;
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.1",
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": "b7493154eecf10cc824e5c2a7ca59de862ba9a65e22da8de08562b29"
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);