@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/CHANGELOG.md CHANGED
@@ -1,3 +1,13 @@
1
+ ## 1.225.3
2
+
3
+ ### Patch Changes
4
+
5
+ - [#16895](https://github.com/wix-private/wix-design-systems/pull/16895) [`4dd1d0b`](https://github.com/wix-private/wix-design-systems/commit/4dd1d0bf7fa8619f2ef0a99fa4cc5b5a18e44834) - Card.Content now has a full, even 24px padding on all four sides in Harmony (odeditor) and Studio 2.0 (odeditor-dark), so a Card without a Card.Header no longer renders its content flush against the card's top edge. Card.Header gives up its bottom padding to the content in those two themes, unless it is the card's last element, in which case it stays evenly padded. New token `--wds-card-header-padding-bottom` sets Card.Header's bottom padding: `0` in Harmony (odeditor) and Studio 2.0 (odeditor-dark), and equal to `--wds-card-header-padding-vertical` in every other theme.
6
+
7
+ - [#16932](https://github.com/wix-private/wix-design-systems/pull/16932) [`4bf75c1`](https://github.com/wix-private/wix-design-systems/commit/4bf75c1cdd31e8d6450ab15ae7f8e4893eddfb17) - Page header: the horizontal padding, offset and gap tokens changed in Harmony (odeditor) and Studio 2.0 (odeditor-dark), so the breadcrumbs, title, subtitle and back button all align to the page content edge.
8
+
9
+ - [#16842](https://github.com/wix-private/wix-design-systems/pull/16842) [`849e7f6`](https://github.com/wix-private/wix-design-systems/commit/849e7f611e9bdf9b91626bd3f1f7000bb1a9597b) - MarketingLayout: added `--wds-marketing-layout-*` tokens for content alignment, image inset and per-size image width caps, and tiny-title letter spacing; only Harmony (odeditor) diverges, all other themes carry no-op values.
10
+
1
11
  ## 1.225.2
2
12
 
3
13
  ### Patch Changes
package/all.css CHANGED
@@ -377,10 +377,14 @@
377
377
  --wds-marketing-layout-image-wrapper-contain: none;
378
378
  --wds-marketing-layout-image-width: 100%;
379
379
  --wds-marketing-layout-image-object-fit: fill;
380
+ --wds-marketing-layout-image-max-width-tiny: none;
381
+ --wds-marketing-layout-image-max-width-small: none;
382
+ --wds-marketing-layout-image-max-width-medium: none;
380
383
  --wds-marketing-layout-image-height: auto;
381
384
  --wds-marketing-layout-image-border-radius: 0px;
382
385
  --wds-marketing-layout-image-aspect-ratio: auto;
383
386
  --wds-marketing-layout-description-max-width: none;
387
+ --wds-marketing-layout-content-justify: center;
384
388
  --wds-marketing-layout-badge-top: 9px;
385
389
  --wds-marketing-layout-badge-side: -3px;
386
390
  --wds-marketing-layout-badge-position: absolute;
@@ -1405,6 +1409,7 @@
1405
1409
  --wds-marketing-page-content-padding-end-medium: var(--wds-space-800);
1406
1410
  --wds-marketing-page-content-padding-end-large: var(--wds-space-1500);
1407
1411
  --wds-marketing-page-content-actions-gap: var(--wds-space-700);
1412
+ --wds-marketing-layout-title-letter-spacing-tiny: var(--wds-font-letter-spacing-0);
1408
1413
  --wds-marketing-layout-title-gap-tiny: var(--wds-space-100);
1409
1414
  --wds-marketing-layout-title-gap-small: var(--wds-space-100);
1410
1415
  --wds-marketing-layout-title-gap-medium: var(--wds-space-200);
@@ -1428,6 +1433,7 @@
1428
1433
  --wds-marketing-layout-image-padding-left-tiny: var(--wds-space-400);
1429
1434
  --wds-marketing-layout-image-padding-left-small: var(--wds-space-400);
1430
1435
  --wds-marketing-layout-image-padding-left-medium: var(--wds-space-800);
1436
+ --wds-marketing-layout-image-hug-padding: var(--wds-space-0);
1431
1437
  --wds-marketing-layout-description-font-weight-tiny: var(--wds-font-weight-regular);
1432
1438
  --wds-marketing-layout-description-font-weight-small: var(--wds-font-weight-regular);
1433
1439
  --wds-marketing-layout-description-font-weight-medium: var(--wds-font-weight-regular);
@@ -1668,6 +1674,7 @@
1668
1674
  --wds-card-header-title-subtitle-gap: var(--wds-space-0);
1669
1675
  --wds-card-header-padding-vertical: var(--wds-space-300);
1670
1676
  --wds-card-header-padding-horizontal: var(--wds-space-400);
1677
+ --wds-card-header-padding-bottom: var(--wds-space-300);
1671
1678
  --wds-card-header-divider-width: var(--wds-border-width-none);
1672
1679
  --wds-card-controls-padding-vertical: var(--wds-space-300);
1673
1680
  --wds-card-controls-padding-horizontal: var(--wds-space-400);
package/all.scss CHANGED
@@ -160,10 +160,14 @@
160
160
  --wds-marketing-layout-image-wrapper-contain: none;
161
161
  --wds-marketing-layout-image-width: 100%;
162
162
  --wds-marketing-layout-image-object-fit: fill;
163
+ --wds-marketing-layout-image-max-width-tiny: none;
164
+ --wds-marketing-layout-image-max-width-small: none;
165
+ --wds-marketing-layout-image-max-width-medium: none;
163
166
  --wds-marketing-layout-image-height: auto;
164
167
  --wds-marketing-layout-image-border-radius: 0px;
165
168
  --wds-marketing-layout-image-aspect-ratio: auto;
166
169
  --wds-marketing-layout-description-max-width: none;
170
+ --wds-marketing-layout-content-justify: center;
167
171
  --wds-marketing-layout-badge-top: 9px;
168
172
  --wds-marketing-layout-badge-side: -3px;
169
173
  --wds-marketing-layout-badge-position: absolute;
@@ -1052,6 +1056,7 @@
1052
1056
  --wds-marketing-page-content-padding-end-medium: var(--wds-space-800);
1053
1057
  --wds-marketing-page-content-padding-end-large: var(--wds-space-1500);
1054
1058
  --wds-marketing-page-content-actions-gap: var(--wds-space-700);
1059
+ --wds-marketing-layout-title-letter-spacing-tiny: var(--wds-font-letter-spacing-0);
1055
1060
  --wds-marketing-layout-title-gap-tiny: var(--wds-space-100);
1056
1061
  --wds-marketing-layout-title-gap-small: var(--wds-space-100);
1057
1062
  --wds-marketing-layout-title-gap-medium: var(--wds-space-200);
@@ -1075,6 +1080,7 @@
1075
1080
  --wds-marketing-layout-image-padding-left-tiny: var(--wds-space-400);
1076
1081
  --wds-marketing-layout-image-padding-left-small: var(--wds-space-400);
1077
1082
  --wds-marketing-layout-image-padding-left-medium: var(--wds-space-800);
1083
+ --wds-marketing-layout-image-hug-padding: var(--wds-space-0);
1078
1084
  --wds-marketing-layout-description-font-weight-tiny: var(--wds-font-weight-regular);
1079
1085
  --wds-marketing-layout-description-font-weight-small: var(--wds-font-weight-regular);
1080
1086
  --wds-marketing-layout-description-font-weight-medium: var(--wds-font-weight-regular);
@@ -1629,6 +1635,7 @@
1629
1635
  --wds-card-header-title-subtitle-gap: var(--wds-space-0);
1630
1636
  --wds-card-header-padding-vertical: var(--wds-space-300);
1631
1637
  --wds-card-header-padding-horizontal: var(--wds-space-400);
1638
+ --wds-card-header-padding-bottom: var(--wds-space-300);
1632
1639
  --wds-card-header-divider-width: var(--wds-border-width-none);
1633
1640
  --wds-card-gallery-item-title-font-weight-small: var(--wds-font-weight-medium);
1634
1641
  --wds-card-gallery-item-title-font-weight-medium: var(--wds-font-weight-medium);
package/all.st.css CHANGED
@@ -399,6 +399,7 @@
399
399
  @property st-global(--wds-card-gallery-item-title-font-weight-small);
400
400
  @property st-global(--wds-card-gallery-item-title-gap);
401
401
  @property st-global(--wds-card-header-divider-width);
402
+ @property st-global(--wds-card-header-padding-bottom);
402
403
  @property st-global(--wds-card-header-padding-horizontal);
403
404
  @property st-global(--wds-card-header-padding-vertical);
404
405
  @property st-global(--wds-card-header-suffix-align);
@@ -1517,6 +1518,7 @@
1517
1518
  @property st-global(--wds-marketing-layout-badge-side);
1518
1519
  @property st-global(--wds-marketing-layout-badge-top);
1519
1520
  @property st-global(--wds-marketing-layout-border);
1521
+ @property st-global(--wds-marketing-layout-content-justify);
1520
1522
  @property st-global(--wds-marketing-layout-description-color);
1521
1523
  @property st-global(--wds-marketing-layout-description-font-size-medium);
1522
1524
  @property st-global(--wds-marketing-layout-description-font-size-small);
@@ -1531,6 +1533,10 @@
1531
1533
  @property st-global(--wds-marketing-layout-image-aspect-ratio);
1532
1534
  @property st-global(--wds-marketing-layout-image-border-radius);
1533
1535
  @property st-global(--wds-marketing-layout-image-height);
1536
+ @property st-global(--wds-marketing-layout-image-hug-padding);
1537
+ @property st-global(--wds-marketing-layout-image-max-width-medium);
1538
+ @property st-global(--wds-marketing-layout-image-max-width-small);
1539
+ @property st-global(--wds-marketing-layout-image-max-width-tiny);
1534
1540
  @property st-global(--wds-marketing-layout-image-object-fit);
1535
1541
  @property st-global(--wds-marketing-layout-image-padding-left-medium);
1536
1542
  @property st-global(--wds-marketing-layout-image-padding-left-small);
@@ -1567,6 +1573,7 @@
1567
1573
  @property st-global(--wds-marketing-layout-title-gap-medium);
1568
1574
  @property st-global(--wds-marketing-layout-title-gap-small);
1569
1575
  @property st-global(--wds-marketing-layout-title-gap-tiny);
1576
+ @property st-global(--wds-marketing-layout-title-letter-spacing-tiny);
1570
1577
  @property st-global(--wds-marketing-layout-title-line-height-medium);
1571
1578
  @property st-global(--wds-marketing-layout-title-line-height-small);
1572
1579
  @property st-global(--wds-marketing-layout-title-line-height-tiny);
@@ -2988,6 +2995,7 @@
2988
2995
  --wds-card-gallery-item-title-font-weight-small: 500;
2989
2996
  --wds-card-gallery-item-title-gap: 0px;
2990
2997
  --wds-card-header-divider-width: 0px;
2998
+ --wds-card-header-padding-bottom: 18px;
2991
2999
  --wds-card-header-padding-horizontal: 24px;
2992
3000
  --wds-card-header-padding-vertical: 18px;
2993
3001
  --wds-card-header-suffix-align: center;
@@ -4106,6 +4114,7 @@
4106
4114
  --wds-marketing-layout-badge-side: -3px;
4107
4115
  --wds-marketing-layout-badge-top: 9px;
4108
4116
  --wds-marketing-layout-border: 8px;
4117
+ --wds-marketing-layout-content-justify: center;
4109
4118
  --wds-marketing-layout-description-color: #44485f;
4110
4119
  --wds-marketing-layout-description-font-size-medium: 16px;
4111
4120
  --wds-marketing-layout-description-font-size-small: 14px;
@@ -4120,6 +4129,10 @@
4120
4129
  --wds-marketing-layout-image-aspect-ratio: auto;
4121
4130
  --wds-marketing-layout-image-border-radius: 0px;
4122
4131
  --wds-marketing-layout-image-height: auto;
4132
+ --wds-marketing-layout-image-hug-padding: 0px;
4133
+ --wds-marketing-layout-image-max-width-medium: none;
4134
+ --wds-marketing-layout-image-max-width-small: none;
4135
+ --wds-marketing-layout-image-max-width-tiny: none;
4123
4136
  --wds-marketing-layout-image-object-fit: fill;
4124
4137
  --wds-marketing-layout-image-padding-left-medium: 48px;
4125
4138
  --wds-marketing-layout-image-padding-left-small: 24px;
@@ -4156,6 +4169,7 @@
4156
4169
  --wds-marketing-layout-title-gap-medium: 12px;
4157
4170
  --wds-marketing-layout-title-gap-small: 6px;
4158
4171
  --wds-marketing-layout-title-gap-tiny: 6px;
4172
+ --wds-marketing-layout-title-letter-spacing-tiny: 0px;
4159
4173
  --wds-marketing-layout-title-line-height-medium: 28px;
4160
4174
  --wds-marketing-layout-title-line-height-small: 24px;
4161
4175
  --wds-marketing-layout-title-line-height-tiny: 24px;
package/component.st.css CHANGED
@@ -361,6 +361,7 @@
361
361
  @property st-global(--wds-card-gallery-item-title-font-weight-small);
362
362
  @property st-global(--wds-card-gallery-item-title-gap);
363
363
  @property st-global(--wds-card-header-divider-width);
364
+ @property st-global(--wds-card-header-padding-bottom);
364
365
  @property st-global(--wds-card-header-padding-horizontal);
365
366
  @property st-global(--wds-card-header-padding-vertical);
366
367
  @property st-global(--wds-card-header-suffix-align);
@@ -935,6 +936,7 @@
935
936
  @property st-global(--wds-marketing-layout-badge-side);
936
937
  @property st-global(--wds-marketing-layout-badge-top);
937
938
  @property st-global(--wds-marketing-layout-border);
939
+ @property st-global(--wds-marketing-layout-content-justify);
938
940
  @property st-global(--wds-marketing-layout-description-color);
939
941
  @property st-global(--wds-marketing-layout-description-font-size-medium);
940
942
  @property st-global(--wds-marketing-layout-description-font-size-small);
@@ -949,6 +951,10 @@
949
951
  @property st-global(--wds-marketing-layout-image-aspect-ratio);
950
952
  @property st-global(--wds-marketing-layout-image-border-radius);
951
953
  @property st-global(--wds-marketing-layout-image-height);
954
+ @property st-global(--wds-marketing-layout-image-hug-padding);
955
+ @property st-global(--wds-marketing-layout-image-max-width-medium);
956
+ @property st-global(--wds-marketing-layout-image-max-width-small);
957
+ @property st-global(--wds-marketing-layout-image-max-width-tiny);
952
958
  @property st-global(--wds-marketing-layout-image-object-fit);
953
959
  @property st-global(--wds-marketing-layout-image-padding-left-medium);
954
960
  @property st-global(--wds-marketing-layout-image-padding-left-small);
@@ -985,6 +991,7 @@
985
991
  @property st-global(--wds-marketing-layout-title-gap-medium);
986
992
  @property st-global(--wds-marketing-layout-title-gap-small);
987
993
  @property st-global(--wds-marketing-layout-title-gap-tiny);
994
+ @property st-global(--wds-marketing-layout-title-letter-spacing-tiny);
988
995
  @property st-global(--wds-marketing-layout-title-line-height-medium);
989
996
  @property st-global(--wds-marketing-layout-title-line-height-small);
990
997
  @property st-global(--wds-marketing-layout-title-line-height-tiny);
@@ -2213,6 +2220,7 @@
2213
2220
  --wds-card-gallery-item-title-font-weight-small: 500;
2214
2221
  --wds-card-gallery-item-title-gap: 0px;
2215
2222
  --wds-card-header-divider-width: 0px;
2223
+ --wds-card-header-padding-bottom: 18px;
2216
2224
  --wds-card-header-padding-horizontal: 24px;
2217
2225
  --wds-card-header-padding-vertical: 18px;
2218
2226
  --wds-card-header-suffix-align: center;
@@ -2787,6 +2795,7 @@
2787
2795
  --wds-marketing-layout-badge-side: -3px;
2788
2796
  --wds-marketing-layout-badge-top: 9px;
2789
2797
  --wds-marketing-layout-border: 8px;
2798
+ --wds-marketing-layout-content-justify: center;
2790
2799
  --wds-marketing-layout-description-color: #44485f;
2791
2800
  --wds-marketing-layout-description-font-size-medium: 16px;
2792
2801
  --wds-marketing-layout-description-font-size-small: 14px;
@@ -2801,6 +2810,10 @@
2801
2810
  --wds-marketing-layout-image-aspect-ratio: auto;
2802
2811
  --wds-marketing-layout-image-border-radius: 0px;
2803
2812
  --wds-marketing-layout-image-height: auto;
2813
+ --wds-marketing-layout-image-hug-padding: 0px;
2814
+ --wds-marketing-layout-image-max-width-medium: none;
2815
+ --wds-marketing-layout-image-max-width-small: none;
2816
+ --wds-marketing-layout-image-max-width-tiny: none;
2804
2817
  --wds-marketing-layout-image-object-fit: fill;
2805
2818
  --wds-marketing-layout-image-padding-left-medium: 48px;
2806
2819
  --wds-marketing-layout-image-padding-left-small: 24px;
@@ -2837,6 +2850,7 @@
2837
2850
  --wds-marketing-layout-title-gap-medium: 12px;
2838
2851
  --wds-marketing-layout-title-gap-small: 6px;
2839
2852
  --wds-marketing-layout-title-gap-tiny: 6px;
2853
+ --wds-marketing-layout-title-letter-spacing-tiny: 0px;
2840
2854
  --wds-marketing-layout-title-line-height-medium: 28px;
2841
2855
  --wds-marketing-layout-title-line-height-small: 24px;
2842
2856
  --wds-marketing-layout-title-line-height-tiny: 24px;
package/odeditor/all.css CHANGED
@@ -392,9 +392,9 @@
392
392
  --wds-radio-dot-size: 4px;
393
393
  --wds-page-section-divider-display: none;
394
394
  --wds-page-header-divider-color: transparent;
395
- --wds-page-header-breadcrumbs-offset-small: 0px;
396
- --wds-page-header-breadcrumbs-offset-medium: 0px;
397
- --wds-page-header-breadcrumbs-offset-large: 0px;
395
+ --wds-page-header-breadcrumbs-offset-small: -8px;
396
+ --wds-page-header-breadcrumbs-offset-medium: -8px;
397
+ --wds-page-header-breadcrumbs-offset-large: -8px;
398
398
  --wds-marketing-page-title-line-height: 38px;
399
399
  --wds-marketing-page-overline-divider-display: none;
400
400
  --wds-marketing-page-image-top-title-subtitle-gap: 16px;
@@ -415,9 +415,13 @@
415
415
  --wds-marketing-layout-image-wrapper-contain: size;
416
416
  --wds-marketing-layout-image-width: auto;
417
417
  --wds-marketing-layout-image-object-fit: cover;
418
+ --wds-marketing-layout-image-max-width-tiny: 116px;
419
+ --wds-marketing-layout-image-max-width-small: 136px;
420
+ --wds-marketing-layout-image-max-width-medium: 156px;
418
421
  --wds-marketing-layout-image-height: 100%;
419
422
  --wds-marketing-layout-image-aspect-ratio: 1;
420
423
  --wds-marketing-layout-description-max-width: 80%;
424
+ --wds-marketing-layout-content-justify: flex-start;
421
425
  --wds-marketing-layout-badge-top: auto;
422
426
  --wds-marketing-layout-badge-side: auto;
423
427
  --wds-marketing-layout-badge-position: static;
@@ -1392,11 +1396,11 @@
1392
1396
  --wds-page-section-padding-bottom-with-divider: var(--wds-space-200);
1393
1397
  --wds-page-section-padding-bottom: var(--wds-space-100);
1394
1398
  --wds-page-section-gap: var(--wds-space-50);
1395
- --wds-page-header-title-padding-start: var(--wds-space-200);
1399
+ --wds-page-header-title-padding-start: var(--wds-space-0);
1396
1400
  --wds-page-header-title-minimised-letter-spacing: var(--wds-font-letter-spacing-heading-3);
1397
1401
  --wds-page-header-title-minimised-font-weight: var(--wds-font-weight-heading-3);
1398
1402
  --wds-page-header-title-actions-gap: var(--wds-space-1000);
1399
- --wds-page-header-subtitle-padding-start: var(--wds-space-200);
1403
+ --wds-page-header-subtitle-padding-start: var(--wds-space-0);
1400
1404
  --wds-page-header-subtitle-gap: var(--wds-space-100);
1401
1405
  --wds-page-header-subtitle-font-size: var(--wds-font-size-200);
1402
1406
  --wds-page-header-padding-vertical-small: var(--wds-space-475);
@@ -1407,8 +1411,8 @@
1407
1411
  --wds-page-header-breadcrumbs-selected-font-weight: var(--wds-font-weight-medium);
1408
1412
  --wds-page-header-breadcrumbs-font-size: var(--wds-font-size-200);
1409
1413
  --wds-page-header-breadcrumbs-color: var(--wds-color-black-300);
1410
- --wds-page-header-back-button-offset: var(--wds-space-100);
1411
- --wds-page-header-back-button-gap: var(--wds-space-0);
1414
+ --wds-page-header-back-button-offset: var(--wds-space-0);
1415
+ --wds-page-header-back-button-gap: var(--wds-space-200);
1412
1416
  --wds-padding-vertical-tiny: var(--wds-space-500);
1413
1417
  --wds-padding-vertical-small: var(--wds-space-600);
1414
1418
  --wds-padding-vertical-medium: var(--wds-space-600);
@@ -1473,6 +1477,7 @@
1473
1477
  --wds-marketing-layout-title-line-height-tiny: var(--wds-space-500);
1474
1478
  --wds-marketing-layout-title-line-height-small: var(--wds-space-500);
1475
1479
  --wds-marketing-layout-title-line-height-medium: var(--wds-space-500);
1480
+ --wds-marketing-layout-title-letter-spacing-tiny: var(--wds-font-letter-spacing-heading-3);
1476
1481
  --wds-marketing-layout-title-gap-tiny: var(--wds-space-50);
1477
1482
  --wds-marketing-layout-title-gap-small: var(--wds-space-100);
1478
1483
  --wds-marketing-layout-title-gap-medium: var(--wds-space-100);
@@ -1498,6 +1503,7 @@
1498
1503
  --wds-marketing-layout-image-padding-left-tiny: var(--wds-space-300);
1499
1504
  --wds-marketing-layout-image-padding-left-small: var(--wds-space-300);
1500
1505
  --wds-marketing-layout-image-padding-left-medium: var(--wds-space-300);
1506
+ --wds-marketing-layout-image-hug-padding: var(--wds-space-300);
1501
1507
  --wds-marketing-layout-image-border-radius: var(--wds-border-radius-400);
1502
1508
  --wds-marketing-layout-description-font-weight-tiny: var(--wds-font-weight-medium);
1503
1509
  --wds-marketing-layout-description-font-weight-small: var(--wds-font-weight-medium);
@@ -1794,12 +1800,13 @@
1794
1800
  --wds-card-header-title-subtitle-gap: var(--wds-space-100);
1795
1801
  --wds-card-header-padding-vertical: var(--wds-space-600);
1796
1802
  --wds-card-header-padding-horizontal: var(--wds-space-600);
1803
+ --wds-card-header-padding-bottom: var(--wds-space-0);
1797
1804
  --wds-card-header-divider-width: var(--wds-border-width-none);
1798
1805
  --wds-card-controls-padding-vertical: var(--wds-space-300);
1799
1806
  --wds-card-controls-padding-horizontal: var(--wds-space-300);
1800
1807
  --wds-card-content-paddings-vertical: var(--wds-space-300);
1801
1808
  --wds-card-content-paddings-horizontal: var(--wds-space-300);
1802
- --wds-card-content-padding-medium-top: var(--wds-space-100);
1809
+ --wds-card-content-padding-medium-top: var(--wds-space-600);
1803
1810
  --wds-card-content-padding-medium-horizontal: var(--wds-space-600);
1804
1811
  --wds-card-content-padding-medium-bottom: var(--wds-space-600);
1805
1812
  --wds-card-content-padding-medium: var(--wds-space-300);
package/odeditor/all.scss CHANGED
@@ -152,9 +152,9 @@
152
152
  --wds-radio-dot-size: 4px;
153
153
  --wds-page-section-divider-display: none;
154
154
  --wds-page-header-divider-color: transparent;
155
- --wds-page-header-breadcrumbs-offset-small: 0px;
156
- --wds-page-header-breadcrumbs-offset-medium: 0px;
157
- --wds-page-header-breadcrumbs-offset-large: 0px;
155
+ --wds-page-header-breadcrumbs-offset-small: -8px;
156
+ --wds-page-header-breadcrumbs-offset-medium: -8px;
157
+ --wds-page-header-breadcrumbs-offset-large: -8px;
158
158
  --wds-marketing-page-title-line-height: 38px;
159
159
  --wds-marketing-page-overline-divider-display: none;
160
160
  --wds-marketing-page-image-top-title-subtitle-gap: 16px;
@@ -175,9 +175,13 @@
175
175
  --wds-marketing-layout-image-wrapper-contain: size;
176
176
  --wds-marketing-layout-image-width: auto;
177
177
  --wds-marketing-layout-image-object-fit: cover;
178
+ --wds-marketing-layout-image-max-width-tiny: 116px;
179
+ --wds-marketing-layout-image-max-width-small: 136px;
180
+ --wds-marketing-layout-image-max-width-medium: 156px;
178
181
  --wds-marketing-layout-image-height: 100%;
179
182
  --wds-marketing-layout-image-aspect-ratio: 1;
180
183
  --wds-marketing-layout-description-max-width: 80%;
184
+ --wds-marketing-layout-content-justify: flex-start;
181
185
  --wds-marketing-layout-badge-top: auto;
182
186
  --wds-marketing-layout-badge-side: auto;
183
187
  --wds-marketing-layout-badge-position: static;
@@ -1054,11 +1058,11 @@
1054
1058
  --wds-page-section-padding-bottom-with-divider: var(--wds-space-200);
1055
1059
  --wds-page-section-padding-bottom: var(--wds-space-100);
1056
1060
  --wds-page-section-gap: var(--wds-space-50);
1057
- --wds-page-header-title-padding-start: var(--wds-space-200);
1061
+ --wds-page-header-title-padding-start: var(--wds-space-0);
1058
1062
  --wds-page-header-title-minimised-letter-spacing: var(--wds-font-letter-spacing-heading-3);
1059
1063
  --wds-page-header-title-minimised-font-weight: var(--wds-font-weight-heading-3);
1060
1064
  --wds-page-header-title-actions-gap: var(--wds-space-1000);
1061
- --wds-page-header-subtitle-padding-start: var(--wds-space-200);
1065
+ --wds-page-header-subtitle-padding-start: var(--wds-space-0);
1062
1066
  --wds-page-header-subtitle-gap: var(--wds-space-100);
1063
1067
  --wds-page-header-subtitle-font-size: var(--wds-font-size-200);
1064
1068
  --wds-page-header-padding-vertical-small: var(--wds-space-475);
@@ -1069,8 +1073,8 @@
1069
1073
  --wds-page-header-breadcrumbs-selected-font-weight: var(--wds-font-weight-medium);
1070
1074
  --wds-page-header-breadcrumbs-font-size: var(--wds-font-size-200);
1071
1075
  --wds-page-header-breadcrumbs-color: var(--wds-color-black-300);
1072
- --wds-page-header-back-button-offset: var(--wds-space-100);
1073
- --wds-page-header-back-button-gap: var(--wds-space-0);
1076
+ --wds-page-header-back-button-offset: var(--wds-space-0);
1077
+ --wds-page-header-back-button-gap: var(--wds-space-200);
1074
1078
  --wds-padding-vertical-tiny: var(--wds-space-500);
1075
1079
  --wds-padding-vertical-small: var(--wds-space-600);
1076
1080
  --wds-padding-vertical-medium: var(--wds-space-600);
@@ -1135,6 +1139,7 @@
1135
1139
  --wds-marketing-layout-title-line-height-tiny: var(--wds-space-500);
1136
1140
  --wds-marketing-layout-title-line-height-small: var(--wds-space-500);
1137
1141
  --wds-marketing-layout-title-line-height-medium: var(--wds-space-500);
1142
+ --wds-marketing-layout-title-letter-spacing-tiny: var(--wds-font-letter-spacing-heading-3);
1138
1143
  --wds-marketing-layout-title-gap-tiny: var(--wds-space-50);
1139
1144
  --wds-marketing-layout-title-gap-small: var(--wds-space-100);
1140
1145
  --wds-marketing-layout-title-gap-medium: var(--wds-space-100);
@@ -1160,6 +1165,7 @@
1160
1165
  --wds-marketing-layout-image-padding-left-tiny: var(--wds-space-300);
1161
1166
  --wds-marketing-layout-image-padding-left-small: var(--wds-space-300);
1162
1167
  --wds-marketing-layout-image-padding-left-medium: var(--wds-space-300);
1168
+ --wds-marketing-layout-image-hug-padding: var(--wds-space-300);
1163
1169
  --wds-marketing-layout-image-border-radius: var(--wds-border-radius-400);
1164
1170
  --wds-marketing-layout-description-font-weight-tiny: var(--wds-font-weight-medium);
1165
1171
  --wds-marketing-layout-description-font-weight-small: var(--wds-font-weight-medium);
@@ -1748,6 +1754,7 @@
1748
1754
  --wds-card-header-title-subtitle-gap: var(--wds-space-100);
1749
1755
  --wds-card-header-padding-vertical: var(--wds-space-600);
1750
1756
  --wds-card-header-padding-horizontal: var(--wds-space-600);
1757
+ --wds-card-header-padding-bottom: var(--wds-space-0);
1751
1758
  --wds-card-header-divider-width: var(--wds-border-width-none);
1752
1759
  --wds-card-gallery-item-title-font-weight-small: var(--wds-font-weight-heading-3);
1753
1760
  --wds-card-gallery-item-title-font-weight-medium: var(--wds-font-weight-heading-3);
@@ -1788,7 +1795,7 @@
1788
1795
  --wds-card-controls-padding-horizontal: var(--wds-space-300);
1789
1796
  --wds-card-content-paddings-vertical: var(--wds-space-300);
1790
1797
  --wds-card-content-paddings-horizontal: var(--wds-space-300);
1791
- --wds-card-content-padding-medium-top: var(--wds-space-100);
1798
+ --wds-card-content-padding-medium-top: var(--wds-space-600);
1792
1799
  --wds-card-content-padding-medium-horizontal: var(--wds-space-600);
1793
1800
  --wds-card-content-padding-medium-bottom: var(--wds-space-600);
1794
1801
  --wds-card-content-padding-medium: var(--wds-space-300);
package/odeditor/all.st.css CHANGED
@@ -390,6 +390,7 @@
390
390
  @property st-global(--wds-card-gallery-item-title-font-weight-small);
391
391
  @property st-global(--wds-card-gallery-item-title-gap);
392
392
  @property st-global(--wds-card-header-divider-width);
393
+ @property st-global(--wds-card-header-padding-bottom);
393
394
  @property st-global(--wds-card-header-padding-horizontal);
394
395
  @property st-global(--wds-card-header-padding-vertical);
395
396
  @property st-global(--wds-card-header-suffix-align);
@@ -1481,6 +1482,7 @@
1481
1482
  @property st-global(--wds-marketing-layout-badge-side);
1482
1483
  @property st-global(--wds-marketing-layout-badge-top);
1483
1484
  @property st-global(--wds-marketing-layout-border);
1485
+ @property st-global(--wds-marketing-layout-content-justify);
1484
1486
  @property st-global(--wds-marketing-layout-description-color);
1485
1487
  @property st-global(--wds-marketing-layout-description-font-size-medium);
1486
1488
  @property st-global(--wds-marketing-layout-description-font-size-small);
@@ -1495,6 +1497,10 @@
1495
1497
  @property st-global(--wds-marketing-layout-image-aspect-ratio);
1496
1498
  @property st-global(--wds-marketing-layout-image-border-radius);
1497
1499
  @property st-global(--wds-marketing-layout-image-height);
1500
+ @property st-global(--wds-marketing-layout-image-hug-padding);
1501
+ @property st-global(--wds-marketing-layout-image-max-width-medium);
1502
+ @property st-global(--wds-marketing-layout-image-max-width-small);
1503
+ @property st-global(--wds-marketing-layout-image-max-width-tiny);
1498
1504
  @property st-global(--wds-marketing-layout-image-object-fit);
1499
1505
  @property st-global(--wds-marketing-layout-image-padding-left-medium);
1500
1506
  @property st-global(--wds-marketing-layout-image-padding-left-small);
@@ -1531,6 +1537,7 @@
1531
1537
  @property st-global(--wds-marketing-layout-title-gap-medium);
1532
1538
  @property st-global(--wds-marketing-layout-title-gap-small);
1533
1539
  @property st-global(--wds-marketing-layout-title-gap-tiny);
1540
+ @property st-global(--wds-marketing-layout-title-letter-spacing-tiny);
1534
1541
  @property st-global(--wds-marketing-layout-title-line-height-medium);
1535
1542
  @property st-global(--wds-marketing-layout-title-line-height-small);
1536
1543
  @property st-global(--wds-marketing-layout-title-line-height-tiny);
@@ -2886,7 +2893,7 @@
2886
2893
  --wds-card-content-padding-medium: 12px;
2887
2894
  --wds-card-content-padding-medium-bottom: 24px;
2888
2895
  --wds-card-content-padding-medium-horizontal: 24px;
2889
- --wds-card-content-padding-medium-top: 4px;
2896
+ --wds-card-content-padding-medium-top: 24px;
2890
2897
  --wds-card-content-paddings-horizontal: 12px;
2891
2898
  --wds-card-content-paddings-vertical: 12px;
2892
2899
  --wds-card-controls-padding-horizontal: 12px;
@@ -2956,6 +2963,7 @@
2956
2963
  --wds-card-gallery-item-title-font-weight-small: 700;
2957
2964
  --wds-card-gallery-item-title-gap: 2px;
2958
2965
  --wds-card-header-divider-width: 0px;
2966
+ --wds-card-header-padding-bottom: 0px;
2959
2967
  --wds-card-header-padding-horizontal: 24px;
2960
2968
  --wds-card-header-padding-vertical: 24px;
2961
2969
  --wds-card-header-suffix-align: flex-start;
@@ -4047,6 +4055,7 @@
4047
4055
  --wds-marketing-layout-badge-side: auto;
4048
4056
  --wds-marketing-layout-badge-top: auto;
4049
4057
  --wds-marketing-layout-border: 4px;
4058
+ --wds-marketing-layout-content-justify: flex-start;
4050
4059
  --wds-marketing-layout-description-color: #525150;
4051
4060
  --wds-marketing-layout-description-font-size-medium: 12px;
4052
4061
  --wds-marketing-layout-description-font-size-small: 12px;
@@ -4061,6 +4070,10 @@
4061
4070
  --wds-marketing-layout-image-aspect-ratio: 1;
4062
4071
  --wds-marketing-layout-image-border-radius: 8px;
4063
4072
  --wds-marketing-layout-image-height: 100%;
4073
+ --wds-marketing-layout-image-hug-padding: 12px;
4074
+ --wds-marketing-layout-image-max-width-medium: 156px;
4075
+ --wds-marketing-layout-image-max-width-small: 136px;
4076
+ --wds-marketing-layout-image-max-width-tiny: 116px;
4064
4077
  --wds-marketing-layout-image-object-fit: cover;
4065
4078
  --wds-marketing-layout-image-padding-left-medium: 12px;
4066
4079
  --wds-marketing-layout-image-padding-left-small: 12px;
@@ -4097,6 +4110,7 @@
4097
4110
  --wds-marketing-layout-title-gap-medium: 4px;
4098
4111
  --wds-marketing-layout-title-gap-small: 4px;
4099
4112
  --wds-marketing-layout-title-gap-tiny: 2px;
4113
+ --wds-marketing-layout-title-letter-spacing-tiny: -0.5px;
4100
4114
  --wds-marketing-layout-title-line-height-medium: 20px;
4101
4115
  --wds-marketing-layout-title-line-height-small: 20px;
4102
4116
  --wds-marketing-layout-title-line-height-tiny: 20px;
@@ -4182,13 +4196,13 @@
4182
4196
  --wds-padding-vertical-medium: 24px;
4183
4197
  --wds-padding-vertical-small: 24px;
4184
4198
  --wds-padding-vertical-tiny: 20px;
4185
- --wds-page-header-back-button-gap: 0px;
4186
- --wds-page-header-back-button-offset: 4px;
4199
+ --wds-page-header-back-button-gap: 8px;
4200
+ --wds-page-header-back-button-offset: 0px;
4187
4201
  --wds-page-header-breadcrumbs-color: #525150;
4188
4202
  --wds-page-header-breadcrumbs-font-size: 12px;
4189
- --wds-page-header-breadcrumbs-offset-large: 0px;
4190
- --wds-page-header-breadcrumbs-offset-medium: 0px;
4191
- --wds-page-header-breadcrumbs-offset-small: 0px;
4203
+ --wds-page-header-breadcrumbs-offset-large: -8px;
4204
+ --wds-page-header-breadcrumbs-offset-medium: -8px;
4205
+ --wds-page-header-breadcrumbs-offset-small: -8px;
4192
4206
  --wds-page-header-breadcrumbs-selected-font-weight: 500;
4193
4207
  --wds-page-header-divider-color: transparent;
4194
4208
  --wds-page-header-padding-bottom-with-tail: 12px;
@@ -4199,7 +4213,7 @@
4199
4213
  --wds-page-header-subtitle-font-size: 12px;
4200
4214
  --wds-page-header-subtitle-gap: 4px;
4201
4215
  --wds-page-header-subtitle-line-height: 16px;
4202
- --wds-page-header-subtitle-padding-start: 8px;
4216
+ --wds-page-header-subtitle-padding-start: 0px;
4203
4217
  --wds-page-header-title-actions-gap: 40px;
4204
4218
  --wds-page-header-title-font-size: 24px;
4205
4219
  --wds-page-header-title-font-weight: 500;
@@ -4208,7 +4222,7 @@
4208
4222
  --wds-page-header-title-minimised-font-weight: 700;
4209
4223
  --wds-page-header-title-minimised-letter-spacing: -0.5px;
4210
4224
  --wds-page-header-title-minimised-line-height: 24px;
4211
- --wds-page-header-title-padding-start: 8px;
4225
+ --wds-page-header-title-padding-start: 0px;
4212
4226
  --wds-page-section-divider-display: none;
4213
4227
  --wds-page-section-gap: 2px;
4214
4228
  --wds-page-section-padding-bottom: 4px;
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;