@wix/design-system-tokens 1.186.0 → 1.187.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (22) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/all.css +2 -0
  3. package/all.scss +2 -0
  4. package/all.st.css +4 -0
  5. package/component.st.css +4 -0
  6. package/odeditor/all.css +3 -0
  7. package/odeditor/all.scss +3 -0
  8. package/odeditor/all.st.css +6 -0
  9. package/odeditor/component.st.css +6 -0
  10. package/odeditor-dark/all.css +13 -10
  11. package/odeditor-dark/all.scss +13 -10
  12. package/odeditor-dark/all.st.css +16 -10
  13. package/odeditor-dark/component.st.css +16 -10
  14. package/package.json +2 -2
  15. package/studio/all.css +5 -3
  16. package/studio/all.scss +5 -3
  17. package/studio/all.st.css +7 -3
  18. package/studio/component.st.css +7 -3
  19. package/wixel/all.css +2 -0
  20. package/wixel/all.scss +2 -0
  21. package/wixel/all.st.css +4 -0
  22. package/wixel/component.st.css +4 -0
package/CHANGELOG.md CHANGED
@@ -1,3 +1,10 @@
1
+ ## 1.187.0 - 2026-04-30
2
+
3
+ ### Features
4
+
5
+ - feat(SidePanel): add subtitle token and update header text sizes for odeditor-dark [16208](https://github.com/wix-private/wix-design-systems/pull/16208)
6
+ - feat(ListItemAction): add fill token and update list-item backgrounds for odeditor-dark [16210](https://github.com/wix-private/wix-design-systems/pull/16210)
7
+
1
8
  ## 1.185.0 - 2026-04-22
2
9
 
3
10
  ### Features
package/all.css CHANGED
@@ -1611,6 +1611,7 @@
1611
1611
  --wds-sidebar-item-text-light-default: var(--wds-color-text-standard-secondary);
1612
1612
  --wds-sidebar-header-text-dark-default: var(--wds-color-text-standard-primary-light);
1613
1613
  --wds-side-panel-title-font-size: var(--wds-font-size-heading-3);
1614
+ --wds-side-panel-subtitle-font-size: var(--wds-font-size-body-medium);
1614
1615
  --wds-side-panel-footer-fill: var(--wds-color-fill-surface-modal);
1615
1616
  --wds-side-panel-floating-title-font-size: var(--wds-font-size-body-medium);
1616
1617
  --wds-selector-button-text-fill-standard: var(--wds-color-text-primary);
@@ -2067,6 +2068,7 @@
2067
2068
  --wds-tabs-label-line-height-small: var(--wds-font-line-height-body-small);
2068
2069
  --wds-status-toast-text-font-line-height: var(--wds-font-line-height-body-medium);
2069
2070
  --wds-side-panel-title-font-line-height: var(--wds-font-line-height-heading-3);
2071
+ --wds-side-panel-subtitle-font-line-height: var(--wds-font-line-height-body-medium);
2070
2072
  --wds-side-panel-floating-title-font-line-height: var(--wds-font-line-height-body-medium);
2071
2073
  --wds-segmented-toggle-label-font-line-height-small: var(--wds-font-line-height-body-small);
2072
2074
  --wds-radio-label-font-line-height-small: var(--wds-font-line-height-body-small);
package/all.scss CHANGED
@@ -1593,6 +1593,7 @@
1593
1593
  --wds-sidebar-item-text-light-default: var(--wds-color-text-standard-secondary);
1594
1594
  --wds-sidebar-header-text-dark-default: var(--wds-color-text-standard-primary-light);
1595
1595
  --wds-side-panel-title-font-size: var(--wds-font-size-heading-3);
1596
+ --wds-side-panel-subtitle-font-size: var(--wds-font-size-body-medium);
1596
1597
  --wds-side-panel-footer-fill: var(--wds-color-fill-surface-modal);
1597
1598
  --wds-side-panel-floating-title-font-size: var(--wds-font-size-body-medium);
1598
1599
  --wds-shadow-surface-raised: var(--wds-shadow-200);
@@ -2067,6 +2068,7 @@
2067
2068
  --wds-tabs-label-line-height-small: var(--wds-font-line-height-body-small);
2068
2069
  --wds-status-toast-text-font-line-height: var(--wds-font-line-height-body-medium);
2069
2070
  --wds-side-panel-title-font-line-height: var(--wds-font-line-height-heading-3);
2071
+ --wds-side-panel-subtitle-font-line-height: var(--wds-font-line-height-body-medium);
2070
2072
  --wds-side-panel-floating-title-font-line-height: var(--wds-font-line-height-body-medium);
2071
2073
  --wds-segmented-toggle-label-font-line-height-small: var(--wds-font-line-height-body-small);
2072
2074
  --wds-radio-label-font-line-height-small: var(--wds-font-line-height-body-small);
package/all.st.css CHANGED
@@ -1633,6 +1633,8 @@
1633
1633
  @property st-global(--wds-side-panel-header-padding-left);
1634
1634
  @property st-global(--wds-side-panel-header-padding-right);
1635
1635
  @property st-global(--wds-side-panel-header-padding-vertical);
1636
+ @property st-global(--wds-side-panel-subtitle-font-line-height);
1637
+ @property st-global(--wds-side-panel-subtitle-font-size);
1636
1638
  @property st-global(--wds-side-panel-title-font-letter-spacing);
1637
1639
  @property st-global(--wds-side-panel-title-font-line-height);
1638
1640
  @property st-global(--wds-side-panel-title-font-size);
@@ -3744,6 +3746,8 @@
3744
3746
  --wds-side-panel-header-padding-left: 24px;
3745
3747
  --wds-side-panel-header-padding-right: 9px;
3746
3748
  --wds-side-panel-header-padding-vertical: 18px;
3749
+ --wds-side-panel-subtitle-font-line-height: 24px;
3750
+ --wds-side-panel-subtitle-font-size: 16px;
3747
3751
  --wds-side-panel-title-font-letter-spacing: 0px;
3748
3752
  --wds-side-panel-title-font-line-height: 24px;
3749
3753
  --wds-side-panel-title-font-size: 18px;
package/component.st.css CHANGED
@@ -956,6 +956,8 @@
956
956
  @property st-global(--wds-side-panel-header-padding-left);
957
957
  @property st-global(--wds-side-panel-header-padding-right);
958
958
  @property st-global(--wds-side-panel-header-padding-vertical);
959
+ @property st-global(--wds-side-panel-subtitle-font-line-height);
960
+ @property st-global(--wds-side-panel-subtitle-font-size);
959
961
  @property st-global(--wds-side-panel-title-font-letter-spacing);
960
962
  @property st-global(--wds-side-panel-title-font-line-height);
961
963
  @property st-global(--wds-side-panel-title-font-size);
@@ -2344,6 +2346,8 @@
2344
2346
  --wds-side-panel-header-padding-left: 24px;
2345
2347
  --wds-side-panel-header-padding-right: 9px;
2346
2348
  --wds-side-panel-header-padding-vertical: 18px;
2349
+ --wds-side-panel-subtitle-font-line-height: 24px;
2350
+ --wds-side-panel-subtitle-font-size: 16px;
2347
2351
  --wds-side-panel-title-font-letter-spacing: 0px;
2348
2352
  --wds-side-panel-title-font-line-height: 24px;
2349
2353
  --wds-side-panel-title-font-size: 18px;
package/odeditor/all.css CHANGED
@@ -1672,6 +1672,7 @@
1672
1672
  --wds-sidebar-item-text-light-default: var(--wds-color-text-standard-secondary);
1673
1673
  --wds-sidebar-header-text-dark-default: var(--wds-color-text-standard-primary-light);
1674
1674
  --wds-side-panel-title-font-size: var(--wds-font-size-heading-3);
1675
+ --wds-side-panel-subtitle-font-size: var(--wds-font-size-body-medium);
1675
1676
  --wds-side-panel-footer-fill: var(--wds-color-fill-surface-modal);
1676
1677
  --wds-side-panel-floating-title-font-size: var(--wds-font-size-heading-3);
1677
1678
  --wds-selector-button-text-fill-standard: var(--wds-color-text-primary);
@@ -1766,6 +1767,7 @@
1766
1767
  --wds-list-item-action-label-fill-active: var(--wds-color-text-standard-primary);
1767
1768
  --wds-list-item-action-fill-hover: var(--wds-color-fill-dark-tertiary-hover);
1768
1769
  --wds-list-item-action-fill-active: var(--wds-color-fill-dark-tertiary-active);
1770
+ --wds-list-item-action-fill: var(--wds-color-fill-standard-tertiary);
1769
1771
  --wds-linear-progress-bar-label-font-line-height: var(--wds-font-line-height-200);
1770
1772
  --wds-input-value-font-size-tiny: var(--wds-font-size-body-tiny);
1771
1773
  --wds-input-value-font-size-small: var(--wds-font-size-body-tiny);
@@ -2013,6 +2015,7 @@
2013
2015
  --wds-subtitle-font-line-height-medium: var(--wds-font-line-height-body-tiny);
2014
2016
  --wds-status-toast-text-font-line-height: var(--wds-font-line-height-body-small);
2015
2017
  --wds-side-panel-title-font-line-height: var(--wds-font-line-height-heading-3);
2018
+ --wds-side-panel-subtitle-font-line-height: var(--wds-font-line-height-body-medium);
2016
2019
  --wds-side-panel-floating-title-font-line-height: var(--wds-font-line-height-heading-3);
2017
2020
  --wds-segmented-toggle-label-font-line-height-small: var(--wds-font-line-height-body-small);
2018
2021
  --wds-section-helper-text-font-line-height: var(--wds-font-line-height-body-tiny);
package/odeditor/all.scss CHANGED
@@ -1653,6 +1653,7 @@
1653
1653
  --wds-sidebar-item-text-light-default: var(--wds-color-text-standard-secondary);
1654
1654
  --wds-sidebar-header-text-dark-default: var(--wds-color-text-standard-primary-light);
1655
1655
  --wds-side-panel-title-font-size: var(--wds-font-size-heading-3);
1656
+ --wds-side-panel-subtitle-font-size: var(--wds-font-size-body-medium);
1656
1657
  --wds-side-panel-footer-fill: var(--wds-color-fill-surface-modal);
1657
1658
  --wds-side-panel-floating-title-font-size: var(--wds-font-size-heading-3);
1658
1659
  --wds-shadow-surface-raised: var(--wds-shadow-200);
@@ -1754,6 +1755,7 @@
1754
1755
  --wds-list-item-action-label-fill-active: var(--wds-color-text-standard-primary);
1755
1756
  --wds-list-item-action-fill-hover: var(--wds-color-fill-dark-tertiary-hover);
1756
1757
  --wds-list-item-action-fill-active: var(--wds-color-fill-dark-tertiary-active);
1758
+ --wds-list-item-action-fill: var(--wds-color-fill-standard-tertiary);
1757
1759
  --wds-linear-progress-bar-label-font-line-height: var(--wds-font-line-height-200);
1758
1760
  --wds-input-value-font-size-tiny: var(--wds-font-size-body-tiny);
1759
1761
  --wds-input-value-font-size-small: var(--wds-font-size-body-tiny);
@@ -2013,6 +2015,7 @@
2013
2015
  --wds-subtitle-font-line-height-medium: var(--wds-font-line-height-body-tiny);
2014
2016
  --wds-status-toast-text-font-line-height: var(--wds-font-line-height-body-small);
2015
2017
  --wds-side-panel-title-font-line-height: var(--wds-font-line-height-heading-3);
2018
+ --wds-side-panel-subtitle-font-line-height: var(--wds-font-line-height-body-medium);
2016
2019
  --wds-side-panel-floating-title-font-line-height: var(--wds-font-line-height-heading-3);
2017
2020
  --wds-segmented-toggle-label-font-line-height-small: var(--wds-font-line-height-body-small);
2018
2021
  --wds-section-helper-text-font-line-height: var(--wds-font-line-height-body-tiny);
package/odeditor/all.st.css CHANGED
@@ -1133,6 +1133,7 @@
1133
1133
  @property st-global(--wds-linear-progress-bar-value-gap);
1134
1134
  @property st-global(--wds-list-item-action-affix-margin);
1135
1135
  @property st-global(--wds-list-item-action-border-radius);
1136
+ @property st-global(--wds-list-item-action-fill);
1136
1137
  @property st-global(--wds-list-item-action-fill-active);
1137
1138
  @property st-global(--wds-list-item-action-fill-hover);
1138
1139
  @property st-global(--wds-list-item-action-gap);
@@ -1576,6 +1577,8 @@
1576
1577
  @property st-global(--wds-side-panel-header-padding-left);
1577
1578
  @property st-global(--wds-side-panel-header-padding-right);
1578
1579
  @property st-global(--wds-side-panel-header-padding-vertical);
1580
+ @property st-global(--wds-side-panel-subtitle-font-line-height);
1581
+ @property st-global(--wds-side-panel-subtitle-font-size);
1579
1582
  @property st-global(--wds-side-panel-title-font-letter-spacing);
1580
1583
  @property st-global(--wds-side-panel-title-font-line-height);
1581
1584
  @property st-global(--wds-side-panel-title-font-size);
@@ -3187,6 +3190,7 @@
3187
3190
  --wds-linear-progress-bar-value-gap: 4px;
3188
3191
  --wds-list-item-action-affix-margin: 4px;
3189
3192
  --wds-list-item-action-border-radius: 8px;
3193
+ --wds-list-item-action-fill: #ffffff;
3190
3194
  --wds-list-item-action-fill-active: #f0efef;
3191
3195
  --wds-list-item-action-fill-hover: #f8f6f6;
3192
3196
  --wds-list-item-action-gap: 2px;
@@ -3630,6 +3634,8 @@
3630
3634
  --wds-side-panel-header-padding-left: 16px;
3631
3635
  --wds-side-panel-header-padding-right: 12px;
3632
3636
  --wds-side-panel-header-padding-vertical: 16px;
3637
+ --wds-side-panel-subtitle-font-line-height: 24px;
3638
+ --wds-side-panel-subtitle-font-size: 16px;
3633
3639
  --wds-side-panel-title-font-letter-spacing: -0.50;
3634
3640
  --wds-side-panel-title-font-line-height: 24px;
3635
3641
  --wds-side-panel-title-font-size: 16px;
package/odeditor/component.st.css CHANGED
@@ -569,6 +569,7 @@
569
569
  @property st-global(--wds-linear-progress-bar-value-gap);
570
570
  @property st-global(--wds-list-item-action-affix-margin);
571
571
  @property st-global(--wds-list-item-action-border-radius);
572
+ @property st-global(--wds-list-item-action-fill);
572
573
  @property st-global(--wds-list-item-action-fill-active);
573
574
  @property st-global(--wds-list-item-action-fill-hover);
574
575
  @property st-global(--wds-list-item-action-gap);
@@ -903,6 +904,8 @@
903
904
  @property st-global(--wds-side-panel-header-padding-left);
904
905
  @property st-global(--wds-side-panel-header-padding-right);
905
906
  @property st-global(--wds-side-panel-header-padding-vertical);
907
+ @property st-global(--wds-side-panel-subtitle-font-line-height);
908
+ @property st-global(--wds-side-panel-subtitle-font-size);
906
909
  @property st-global(--wds-side-panel-title-font-letter-spacing);
907
910
  @property st-global(--wds-side-panel-title-font-line-height);
908
911
  @property st-global(--wds-side-panel-title-font-size);
@@ -1903,6 +1906,7 @@
1903
1906
  --wds-linear-progress-bar-value-gap: 4px;
1904
1907
  --wds-list-item-action-affix-margin: 4px;
1905
1908
  --wds-list-item-action-border-radius: 8px;
1909
+ --wds-list-item-action-fill: #ffffff;
1906
1910
  --wds-list-item-action-fill-active: #f0efef;
1907
1911
  --wds-list-item-action-fill-hover: #f8f6f6;
1908
1912
  --wds-list-item-action-gap: 2px;
@@ -2237,6 +2241,8 @@
2237
2241
  --wds-side-panel-header-padding-left: 16px;
2238
2242
  --wds-side-panel-header-padding-right: 12px;
2239
2243
  --wds-side-panel-header-padding-vertical: 16px;
2244
+ --wds-side-panel-subtitle-font-line-height: 24px;
2245
+ --wds-side-panel-subtitle-font-size: 16px;
2240
2246
  --wds-side-panel-title-font-letter-spacing: -0.50;
2241
2247
  --wds-side-panel-title-font-line-height: 24px;
2242
2248
  --wds-side-panel-title-font-size: 16px;
package/odeditor-dark/all.css CHANGED
@@ -1229,6 +1229,7 @@
1229
1229
  --wds-list-item-select-label-font-weight-medium: var(--wds-font-weight-medium);
1230
1230
  --wds-list-item-select-label-font-weight-active: var(--wds-font-weight-bold);
1231
1231
  --wds-list-item-select-gap: var(--wds-space-50);
1232
+ --wds-list-item-select-fill: var(--wds-color-white-transparent-0);
1232
1233
  --wds-list-item-select-border-radius: var(--wds-border-radius-400);
1233
1234
  --wds-list-item-select-affix-margin: var(--wds-space-100);
1234
1235
  --wds-list-item-select-active-fill-hover: var(--wds-color-blue-600);
@@ -1239,9 +1240,11 @@
1239
1240
  --wds-list-item-section-padding-bottom: var(--wds-space-300);
1240
1241
  --wds-list-item-section-font-weight-neutral: var(--wds-font-weight-regular);
1241
1242
  --wds-list-item-section-font-weight: var(--wds-font-weight-semi-bold);
1243
+ --wds-list-item-section-fill-neutral: var(--wds-color-white-transparent-0);
1244
+ --wds-list-item-section-fill: var(--wds-color-white-transparent-0);
1242
1245
  --wds-list-item-section-divider-padding-top: var(--wds-space-200);
1243
1246
  --wds-list-item-section-divider-padding-horizontal: var(--wds-space-0);
1244
- --wds-list-item-section-divider-padding-bottom: var(--wds-space-0);
1247
+ --wds-list-item-section-divider-padding-bottom: var(--wds-space-200);
1245
1248
  --wds-list-item-action-title-font-weight-active: var(--wds-font-weight-bold);
1246
1249
  --wds-list-item-action-title-font-weight: var(--wds-font-weight-medium);
1247
1250
  --wds-list-item-action-padding-vertical-small-screen-small: var(--wds-space-200);
@@ -1252,6 +1255,7 @@
1252
1255
  --wds-list-item-action-padding-horizontal-medium: var(--wds-space-200);
1253
1256
  --wds-list-item-action-label-fill-pressed-destructive: var(--wds-color-red-50);
1254
1257
  --wds-list-item-action-gap: var(--wds-space-50);
1258
+ --wds-list-item-action-fill: var(--wds-color-white-transparent-0);
1255
1259
  --wds-list-item-action-border-radius: var(--wds-border-radius-400);
1256
1260
  --wds-list-item-action-affix-margin: var(--wds-space-100);
1257
1261
  --wds-linear-progress-bar-value-gap: var(--wds-space-100);
@@ -1656,7 +1660,7 @@
1656
1660
  --wds-thumbnail-border-color-disabled: var(--wds-color-border-standard-primary-disabled);
1657
1661
  --wds-thumbnail-border-color: var(--wds-color-border-dark-secondary);
1658
1662
  --wds-tag-label-font-size-small: var(--wds-font-size-body-tiny);
1659
- --wds-tabs-label-font-size-small: var(--wds-font-size-body-small);
1663
+ --wds-tabs-label-font-size-small: var(--wds-font-size-body-tiny);
1660
1664
  --wds-tabs-label-fill-active: var(--wds-color-text-standard-primary);
1661
1665
  --wds-tabs-item-fill-active: var(--wds-color-fill-dark-secondary);
1662
1666
  --wds-table-list-item-fill-hover: var(--wds-color-fill-dark-tertiary-hover);
@@ -1682,9 +1686,10 @@
1682
1686
  --wds-sidebar-item-text-light-default: var(--wds-color-text-standard-secondary);
1683
1687
  --wds-sidebar-item-text-dark-default: var(--wds-color-text-standard-primary);
1684
1688
  --wds-sidebar-header-text-dark-default: var(--wds-color-text-standard-primary);
1685
- --wds-side-panel-title-font-size: var(--wds-font-size-heading-3);
1689
+ --wds-side-panel-title-font-size: var(--wds-font-size-body-small);
1690
+ --wds-side-panel-subtitle-font-size: var(--wds-font-size-body-tiny);
1686
1691
  --wds-side-panel-footer-fill: var(--wds-color-fill-surface-modal);
1687
- --wds-side-panel-floating-title-font-size: var(--wds-font-size-heading-3);
1692
+ --wds-side-panel-floating-title-font-size: var(--wds-font-size-body-small);
1688
1693
  --wds-selector-button-text-fill-standard: var(--wds-color-text-primary);
1689
1694
  --wds-selector-button-text-fill-pressed-standard: var(--wds-color-text-primary);
1690
1695
  --wds-selector-button-text-fill-pressed-dark: var(--wds-color-text-primary);
@@ -1750,7 +1755,6 @@
1750
1755
  --wds-list-item-select-fill-hover: var(--wds-color-fill-dark-tertiary-hover);
1751
1756
  --wds-list-item-select-fill-disabled: var(--wds-color-fill-standard-tertiary);
1752
1757
  --wds-list-item-select-fill-active: var(--wds-color-fill-standard-tertiary);
1753
- --wds-list-item-select-fill: var(--wds-color-fill-standard-tertiary);
1754
1758
  --wds-list-item-select-active-title-screen-small: var(--wds-color-text-standard-primary);
1755
1759
  --wds-list-item-select-active-title-disabled-screen-small: var(--wds-color-text-disabled);
1756
1760
  --wds-list-item-select-active-title-disabled: var(--wds-color-text-disabled);
@@ -1764,8 +1768,6 @@
1764
1768
  --wds-list-item-select-active-fill: var(--wds-color-fill-dark-tertiary-active);
1765
1769
  --wds-list-item-section-title-label-fill: var(--wds-color-text-placeholder);
1766
1770
  --wds-list-item-section-font-size: var(--wds-font-size-body-small);
1767
- --wds-list-item-section-fill-neutral: var(--wds-color-fill-standard-tertiary);
1768
- --wds-list-item-section-fill: var(--wds-color-fill-standard-tertiary);
1769
1771
  --wds-list-item-action-suffix-fill-active: var(--wds-color-text-standard-primary);
1770
1772
  --wds-list-item-action-suffix-fill: var(--wds-color-text-standard-primary);
1771
1773
  --wds-list-item-action-subtitle-font-size: var(--wds-font-size-body-tiny);
@@ -2014,11 +2016,12 @@
2014
2016
  --wds-thumbnail-title-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
2015
2017
  --wds-thumbnail-subtitle-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
2016
2018
  --wds-tag-label-font-line-height-small: var(--wds-font-line-height-body-tiny);
2017
- --wds-tabs-label-line-height-small: var(--wds-font-line-height-body-small);
2019
+ --wds-tabs-label-line-height-small: var(--wds-font-line-height-body-tiny);
2018
2020
  --wds-subtitle-font-line-height-medium: var(--wds-font-line-height-body-tiny);
2019
2021
  --wds-status-toast-text-font-line-height: var(--wds-font-line-height-body-small);
2020
- --wds-side-panel-title-font-line-height: var(--wds-font-line-height-heading-3);
2021
- --wds-side-panel-floating-title-font-line-height: var(--wds-font-line-height-heading-3);
2022
+ --wds-side-panel-title-font-line-height: var(--wds-font-line-height-body-small);
2023
+ --wds-side-panel-subtitle-font-line-height: var(--wds-font-line-height-body-tiny);
2024
+ --wds-side-panel-floating-title-font-line-height: var(--wds-font-line-height-body-small);
2022
2025
  --wds-segmented-toggle-label-font-line-height-small: var(--wds-font-line-height-body-small);
2023
2026
  --wds-section-helper-text-font-line-height: var(--wds-font-line-height-body-tiny);
2024
2027
  --wds-radio-label-font-line-height-small: var(--wds-font-line-height-body-tiny);
package/odeditor-dark/all.scss CHANGED
@@ -889,6 +889,7 @@
889
889
  --wds-list-item-select-icon-padding-horizontal-small: var(--wds-space-300);
890
890
  --wds-list-item-select-icon-padding-horizontal-medium: var(--wds-space-300);
891
891
  --wds-list-item-select-gap: var(--wds-space-50);
892
+ --wds-list-item-select-fill: var(--wds-color-white-transparent-0);
892
893
  --wds-list-item-select-border-radius: var(--wds-border-radius-400);
893
894
  --wds-list-item-select-affix-margin: var(--wds-space-100);
894
895
  --wds-list-item-select-active-fill-hover: var(--wds-color-blue-600);
@@ -899,9 +900,11 @@
899
900
  --wds-list-item-section-padding-bottom: var(--wds-space-300);
900
901
  --wds-list-item-section-font-weight-neutral: var(--wds-font-weight-regular);
901
902
  --wds-list-item-section-font-weight: var(--wds-font-weight-semi-bold);
903
+ --wds-list-item-section-fill-neutral: var(--wds-color-white-transparent-0);
904
+ --wds-list-item-section-fill: var(--wds-color-white-transparent-0);
902
905
  --wds-list-item-section-divider-padding-top: var(--wds-space-200);
903
906
  --wds-list-item-section-divider-padding-horizontal: var(--wds-space-0);
904
- --wds-list-item-section-divider-padding-bottom: var(--wds-space-0);
907
+ --wds-list-item-section-divider-padding-bottom: var(--wds-space-200);
905
908
  --wds-list-item-action-title-font-weight-active: var(--wds-font-weight-bold);
906
909
  --wds-list-item-action-title-font-weight: var(--wds-font-weight-medium);
907
910
  --wds-list-item-action-padding-vertical-small-screen-small: var(--wds-space-200);
@@ -912,6 +915,7 @@
912
915
  --wds-list-item-action-padding-horizontal-medium: var(--wds-space-200);
913
916
  --wds-list-item-action-label-fill-pressed-destructive: var(--wds-color-red-50);
914
917
  --wds-list-item-action-gap: var(--wds-space-50);
918
+ --wds-list-item-action-fill: var(--wds-color-white-transparent-0);
915
919
  --wds-list-item-action-border-radius: var(--wds-border-radius-400);
916
920
  --wds-list-item-action-affix-margin: var(--wds-space-100);
917
921
  --wds-linear-progress-bar-value-gap: var(--wds-space-100);
@@ -1641,7 +1645,7 @@
1641
1645
  --wds-thumbnail-border-color-disabled: var(--wds-color-border-standard-primary-disabled);
1642
1646
  --wds-thumbnail-border-color: var(--wds-color-border-dark-secondary);
1643
1647
  --wds-tag-label-font-size-small: var(--wds-font-size-body-tiny);
1644
- --wds-tabs-label-font-size-small: var(--wds-font-size-body-small);
1648
+ --wds-tabs-label-font-size-small: var(--wds-font-size-body-tiny);
1645
1649
  --wds-tabs-label-fill-active: var(--wds-color-text-standard-primary);
1646
1650
  --wds-tabs-item-fill-active: var(--wds-color-fill-dark-secondary);
1647
1651
  --wds-table-list-item-fill-hover: var(--wds-color-fill-dark-tertiary-hover);
@@ -1667,9 +1671,10 @@
1667
1671
  --wds-sidebar-item-text-light-default: var(--wds-color-text-standard-secondary);
1668
1672
  --wds-sidebar-item-text-dark-default: var(--wds-color-text-standard-primary);
1669
1673
  --wds-sidebar-header-text-dark-default: var(--wds-color-text-standard-primary);
1670
- --wds-side-panel-title-font-size: var(--wds-font-size-heading-3);
1674
+ --wds-side-panel-title-font-size: var(--wds-font-size-body-small);
1675
+ --wds-side-panel-subtitle-font-size: var(--wds-font-size-body-tiny);
1671
1676
  --wds-side-panel-footer-fill: var(--wds-color-fill-surface-modal);
1672
- --wds-side-panel-floating-title-font-size: var(--wds-font-size-heading-3);
1677
+ --wds-side-panel-floating-title-font-size: var(--wds-font-size-body-small);
1673
1678
  --wds-shadow-surface-raised: var(--wds-shadow-200);
1674
1679
  --wds-shadow-surface-overlay-dark: var(--wds-shadow-300);
1675
1680
  --wds-shadow-surface-overlay: var(--wds-shadow-300);
@@ -1740,7 +1745,6 @@
1740
1745
  --wds-list-item-select-fill-hover: var(--wds-color-fill-dark-tertiary-hover);
1741
1746
  --wds-list-item-select-fill-disabled: var(--wds-color-fill-standard-tertiary);
1742
1747
  --wds-list-item-select-fill-active: var(--wds-color-fill-standard-tertiary);
1743
- --wds-list-item-select-fill: var(--wds-color-fill-standard-tertiary);
1744
1748
  --wds-list-item-select-active-title-screen-small: var(--wds-color-text-standard-primary);
1745
1749
  --wds-list-item-select-active-title-disabled-screen-small: var(--wds-color-text-disabled);
1746
1750
  --wds-list-item-select-active-title-disabled: var(--wds-color-text-disabled);
@@ -1754,8 +1758,6 @@
1754
1758
  --wds-list-item-select-active-fill: var(--wds-color-fill-dark-tertiary-active);
1755
1759
  --wds-list-item-section-title-label-fill: var(--wds-color-text-placeholder);
1756
1760
  --wds-list-item-section-font-size: var(--wds-font-size-body-small);
1757
- --wds-list-item-section-fill-neutral: var(--wds-color-fill-standard-tertiary);
1758
- --wds-list-item-section-fill: var(--wds-color-fill-standard-tertiary);
1759
1761
  --wds-list-item-action-suffix-fill-active: var(--wds-color-text-standard-primary);
1760
1762
  --wds-list-item-action-suffix-fill: var(--wds-color-text-standard-primary);
1761
1763
  --wds-list-item-action-subtitle-font-size: var(--wds-font-size-body-tiny);
@@ -2014,11 +2016,12 @@
2014
2016
  --wds-thumbnail-title-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
2015
2017
  --wds-thumbnail-subtitle-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
2016
2018
  --wds-tag-label-font-line-height-small: var(--wds-font-line-height-body-tiny);
2017
- --wds-tabs-label-line-height-small: var(--wds-font-line-height-body-small);
2019
+ --wds-tabs-label-line-height-small: var(--wds-font-line-height-body-tiny);
2018
2020
  --wds-subtitle-font-line-height-medium: var(--wds-font-line-height-body-tiny);
2019
2021
  --wds-status-toast-text-font-line-height: var(--wds-font-line-height-body-small);
2020
- --wds-side-panel-title-font-line-height: var(--wds-font-line-height-heading-3);
2021
- --wds-side-panel-floating-title-font-line-height: var(--wds-font-line-height-heading-3);
2022
+ --wds-side-panel-title-font-line-height: var(--wds-font-line-height-body-small);
2023
+ --wds-side-panel-subtitle-font-line-height: var(--wds-font-line-height-body-tiny);
2024
+ --wds-side-panel-floating-title-font-line-height: var(--wds-font-line-height-body-small);
2022
2025
  --wds-segmented-toggle-label-font-line-height-small: var(--wds-font-line-height-body-small);
2023
2026
  --wds-section-helper-text-font-line-height: var(--wds-font-line-height-body-tiny);
2024
2027
  --wds-radio-label-font-line-height-small: var(--wds-font-line-height-body-tiny);
package/odeditor-dark/all.st.css CHANGED
@@ -1138,6 +1138,7 @@
1138
1138
  @property st-global(--wds-linear-progress-bar-value-gap);
1139
1139
  @property st-global(--wds-list-item-action-affix-margin);
1140
1140
  @property st-global(--wds-list-item-action-border-radius);
1141
+ @property st-global(--wds-list-item-action-fill);
1141
1142
  @property st-global(--wds-list-item-action-fill-active);
1142
1143
  @property st-global(--wds-list-item-action-fill-hover);
1143
1144
  @property st-global(--wds-list-item-action-gap);
@@ -1581,6 +1582,8 @@
1581
1582
  @property st-global(--wds-side-panel-header-padding-left);
1582
1583
  @property st-global(--wds-side-panel-header-padding-right);
1583
1584
  @property st-global(--wds-side-panel-header-padding-vertical);
1585
+ @property st-global(--wds-side-panel-subtitle-font-line-height);
1586
+ @property st-global(--wds-side-panel-subtitle-font-size);
1584
1587
  @property st-global(--wds-side-panel-title-font-letter-spacing);
1585
1588
  @property st-global(--wds-side-panel-title-font-line-height);
1586
1589
  @property st-global(--wds-side-panel-title-font-size);
@@ -3197,6 +3200,7 @@
3197
3200
  --wds-linear-progress-bar-value-gap: 4px;
3198
3201
  --wds-list-item-action-affix-margin: 4px;
3199
3202
  --wds-list-item-action-border-radius: 8px;
3203
+ --wds-list-item-action-fill: rgba(0, 0, 0, 0);
3200
3204
  --wds-list-item-action-fill-active: #2D2D2E;
3201
3205
  --wds-list-item-action-fill-hover: #3A3A3B;
3202
3206
  --wds-list-item-action-gap: 2px;
@@ -3219,11 +3223,11 @@
3219
3223
  --wds-list-item-action-suffix-fill-active: #FFFFFF;
3220
3224
  --wds-list-item-action-title-font-weight: 500;
3221
3225
  --wds-list-item-action-title-font-weight-active: 600;
3222
- --wds-list-item-section-divider-padding-bottom: 0px;
3226
+ --wds-list-item-section-divider-padding-bottom: 8px;
3223
3227
  --wds-list-item-section-divider-padding-horizontal: 0px;
3224
3228
  --wds-list-item-section-divider-padding-top: 8px;
3225
- --wds-list-item-section-fill: #212122;
3226
- --wds-list-item-section-fill-neutral: #212122;
3229
+ --wds-list-item-section-fill: rgba(0, 0, 0, 0);
3230
+ --wds-list-item-section-fill-neutral: rgba(0, 0, 0, 0);
3227
3231
  --wds-list-item-section-font-line-height: 18px;
3228
3232
  --wds-list-item-section-font-size: 14px;
3229
3233
  --wds-list-item-section-font-weight: 600;
@@ -3248,7 +3252,7 @@
3248
3252
  --wds-list-item-select-active-title-screen-small: #FFFFFF;
3249
3253
  --wds-list-item-select-affix-margin: 4px;
3250
3254
  --wds-list-item-select-border-radius: 8px;
3251
- --wds-list-item-select-fill: #212122;
3255
+ --wds-list-item-select-fill: rgba(0, 0, 0, 0);
3252
3256
  --wds-list-item-select-fill-active: #212122;
3253
3257
  --wds-list-item-select-fill-disabled: #212122;
3254
3258
  --wds-list-item-select-fill-hover: #3A3A3B;
@@ -3625,8 +3629,8 @@
3625
3629
  --wds-side-panel-floating-header-padding-vertical: 16px;
3626
3630
  --wds-side-panel-floating-max-height: 576px;
3627
3631
  --wds-side-panel-floating-title-font-family: "Madefor Display", Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
3628
- --wds-side-panel-floating-title-font-line-height: 24px;
3629
- --wds-side-panel-floating-title-font-size: 16px;
3632
+ --wds-side-panel-floating-title-font-line-height: 18px;
3633
+ --wds-side-panel-floating-title-font-size: 14px;
3630
3634
  --wds-side-panel-footer-background-blur: 0px;
3631
3635
  --wds-side-panel-footer-border-fill: rgba(0, 0, 0, 0);
3632
3636
  --wds-side-panel-footer-border-width: 0px;
@@ -3640,9 +3644,11 @@
3640
3644
  --wds-side-panel-header-padding-left: 16px;
3641
3645
  --wds-side-panel-header-padding-right: 12px;
3642
3646
  --wds-side-panel-header-padding-vertical: 16px;
3647
+ --wds-side-panel-subtitle-font-line-height: 16px;
3648
+ --wds-side-panel-subtitle-font-size: 12px;
3643
3649
  --wds-side-panel-title-font-letter-spacing: -0.50;
3644
- --wds-side-panel-title-font-line-height: 24px;
3645
- --wds-side-panel-title-font-size: 16px;
3650
+ --wds-side-panel-title-font-line-height: 18px;
3651
+ --wds-side-panel-title-font-size: 14px;
3646
3652
  --wds-sidebar-clear-button-fill: #5a5d63;
3647
3653
  --wds-sidebar-divider-fill-dark-default: #42454c;
3648
3654
  --wds-sidebar-divider-fill-light-default: #666565;
@@ -3824,10 +3830,10 @@
3824
3830
  --wds-tabs-item-gap-small: 6px;
3825
3831
  --wds-tabs-label-fill: #A8A6A5;
3826
3832
  --wds-tabs-label-fill-active: #FFFFFF;
3827
- --wds-tabs-label-font-size-small: 14px;
3833
+ --wds-tabs-label-font-size-small: 12px;
3828
3834
  --wds-tabs-label-font-weight: 500;
3829
3835
  --wds-tabs-label-font-weight-active: 600;
3830
- --wds-tabs-label-line-height-small: 18px;
3836
+ --wds-tabs-label-line-height-small: 16px;
3831
3837
  --wds-tabs-padding-horizontal-medium: 16px;
3832
3838
  --wds-tabs-padding-horizontal-small: 8px;
3833
3839
  --wds-tabs-padding-vertical-medium: 7px;
package/odeditor-dark/component.st.css CHANGED
@@ -572,6 +572,7 @@
572
572
  @property st-global(--wds-linear-progress-bar-value-gap);
573
573
  @property st-global(--wds-list-item-action-affix-margin);
574
574
  @property st-global(--wds-list-item-action-border-radius);
575
+ @property st-global(--wds-list-item-action-fill);
575
576
  @property st-global(--wds-list-item-action-fill-active);
576
577
  @property st-global(--wds-list-item-action-fill-hover);
577
578
  @property st-global(--wds-list-item-action-gap);
@@ -906,6 +907,8 @@
906
907
  @property st-global(--wds-side-panel-header-padding-left);
907
908
  @property st-global(--wds-side-panel-header-padding-right);
908
909
  @property st-global(--wds-side-panel-header-padding-vertical);
910
+ @property st-global(--wds-side-panel-subtitle-font-line-height);
911
+ @property st-global(--wds-side-panel-subtitle-font-size);
909
912
  @property st-global(--wds-side-panel-title-font-letter-spacing);
910
913
  @property st-global(--wds-side-panel-title-font-line-height);
911
914
  @property st-global(--wds-side-panel-title-font-size);
@@ -1909,6 +1912,7 @@
1909
1912
  --wds-linear-progress-bar-value-gap: 4px;
1910
1913
  --wds-list-item-action-affix-margin: 4px;
1911
1914
  --wds-list-item-action-border-radius: 8px;
1915
+ --wds-list-item-action-fill: rgba(0, 0, 0, 0);
1912
1916
  --wds-list-item-action-fill-active: #2D2D2E;
1913
1917
  --wds-list-item-action-fill-hover: #3A3A3B;
1914
1918
  --wds-list-item-action-gap: 2px;
@@ -1931,11 +1935,11 @@
1931
1935
  --wds-list-item-action-suffix-fill-active: #FFFFFF;
1932
1936
  --wds-list-item-action-title-font-weight: 500;
1933
1937
  --wds-list-item-action-title-font-weight-active: 600;
1934
- --wds-list-item-section-divider-padding-bottom: 0px;
1938
+ --wds-list-item-section-divider-padding-bottom: 8px;
1935
1939
  --wds-list-item-section-divider-padding-horizontal: 0px;
1936
1940
  --wds-list-item-section-divider-padding-top: 8px;
1937
- --wds-list-item-section-fill: #212122;
1938
- --wds-list-item-section-fill-neutral: #212122;
1941
+ --wds-list-item-section-fill: rgba(0, 0, 0, 0);
1942
+ --wds-list-item-section-fill-neutral: rgba(0, 0, 0, 0);
1939
1943
  --wds-list-item-section-font-line-height: 18px;
1940
1944
  --wds-list-item-section-font-size: 14px;
1941
1945
  --wds-list-item-section-font-weight: 600;
@@ -1960,7 +1964,7 @@
1960
1964
  --wds-list-item-select-active-title-screen-small: #FFFFFF;
1961
1965
  --wds-list-item-select-affix-margin: 4px;
1962
1966
  --wds-list-item-select-border-radius: 8px;
1963
- --wds-list-item-select-fill: #212122;
1967
+ --wds-list-item-select-fill: rgba(0, 0, 0, 0);
1964
1968
  --wds-list-item-select-fill-active: #212122;
1965
1969
  --wds-list-item-select-fill-disabled: #212122;
1966
1970
  --wds-list-item-select-fill-hover: #3A3A3B;
@@ -2228,8 +2232,8 @@
2228
2232
  --wds-side-panel-floating-header-padding-vertical: 16px;
2229
2233
  --wds-side-panel-floating-max-height: 576px;
2230
2234
  --wds-side-panel-floating-title-font-family: "Madefor Display", Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
2231
- --wds-side-panel-floating-title-font-line-height: 24px;
2232
- --wds-side-panel-floating-title-font-size: 16px;
2235
+ --wds-side-panel-floating-title-font-line-height: 18px;
2236
+ --wds-side-panel-floating-title-font-size: 14px;
2233
2237
  --wds-side-panel-footer-background-blur: 0px;
2234
2238
  --wds-side-panel-footer-border-fill: rgba(0, 0, 0, 0);
2235
2239
  --wds-side-panel-footer-border-width: 0px;
@@ -2243,9 +2247,11 @@
2243
2247
  --wds-side-panel-header-padding-left: 16px;
2244
2248
  --wds-side-panel-header-padding-right: 12px;
2245
2249
  --wds-side-panel-header-padding-vertical: 16px;
2250
+ --wds-side-panel-subtitle-font-line-height: 16px;
2251
+ --wds-side-panel-subtitle-font-size: 12px;
2246
2252
  --wds-side-panel-title-font-letter-spacing: -0.50;
2247
- --wds-side-panel-title-font-line-height: 24px;
2248
- --wds-side-panel-title-font-size: 16px;
2253
+ --wds-side-panel-title-font-line-height: 18px;
2254
+ --wds-side-panel-title-font-size: 14px;
2249
2255
  --wds-sidebar-clear-button-fill: #5a5d63;
2250
2256
  --wds-sidebar-divider-fill-dark-default: #42454c;
2251
2257
  --wds-sidebar-divider-fill-light-default: #666565;
@@ -2382,10 +2388,10 @@
2382
2388
  --wds-tabs-item-gap-small: 6px;
2383
2389
  --wds-tabs-label-fill: #A8A6A5;
2384
2390
  --wds-tabs-label-fill-active: #FFFFFF;
2385
- --wds-tabs-label-font-size-small: 14px;
2391
+ --wds-tabs-label-font-size-small: 12px;
2386
2392
  --wds-tabs-label-font-weight: 500;
2387
2393
  --wds-tabs-label-font-weight-active: 600;
2388
- --wds-tabs-label-line-height-small: 18px;
2394
+ --wds-tabs-label-line-height-small: 16px;
2389
2395
  --wds-tabs-padding-horizontal-medium: 16px;
2390
2396
  --wds-tabs-padding-horizontal-small: 8px;
2391
2397
  --wds-tabs-padding-vertical-medium: 7px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wix/design-system-tokens",
3
- "version": "1.186.0",
3
+ "version": "1.187.0",
4
4
  "scripts": {
5
5
  "build": "cp -r tokens/* .",
6
6
  "figma-to-dictionary": "ts-node src/scripts/figma-to-dictionary.ts",
@@ -32,5 +32,5 @@
32
32
  "author": "augustinasv@wix.com",
33
33
  "description": "Design system tokens",
34
34
  "packageManager": "yarn@3.5.0",
35
- "falconPackageHash": "c17ef7d69781e724c13d1cb6d16e6ffb70590cdec964d39136bfdba9"
35
+ "falconPackageHash": "6cbb741975315b2fab5b4796cd619f2b91726a966d185b4a14cabc46"
36
36
  }
package/studio/all.css CHANGED
@@ -1640,7 +1640,7 @@
1640
1640
  --wds-tag-label-font-size-small: var(--wds-font-size-body-tiny);
1641
1641
  --wds-tabs-selection-fill-secondary: var(--wds-color-fill-standard-primary);
1642
1642
  --wds-tabs-selection-fill-primary: var(--wds-color-fill-standard-primary);
1643
- --wds-tabs-label-font-size-small: var(--wds-font-size-body-tiny);
1643
+ --wds-tabs-label-font-size-small: var(--wds-font-size-body-small);
1644
1644
  --wds-tabs-label-fill-active: var(--wds-color-text-primary);
1645
1645
  --wds-tabs-label-fill: var(--wds-color-text-standard-primary);
1646
1646
  --wds-table-list-item-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
@@ -1660,7 +1660,8 @@
1660
1660
  --wds-sidebar-item-text-neutral-default: var(--wds-color-text-standard-secondary);
1661
1661
  --wds-sidebar-item-text-light-default: var(--wds-color-text-standard-secondary);
1662
1662
  --wds-sidebar-header-text-dark-default: var(--wds-color-text-standard-primary-light);
1663
- --wds-side-panel-title-font-size: var(--wds-font-size-heading-4);
1663
+ --wds-side-panel-title-font-size: var(--wds-font-size-heading-3);
1664
+ --wds-side-panel-subtitle-font-size: var(--wds-font-size-body-medium);
1664
1665
  --wds-side-panel-footer-fill: var(--wds-color-fill-surface-modal);
1665
1666
  --wds-side-panel-floating-title-font-size: var(--wds-font-size-body-medium);
1666
1667
  --wds-selector-button-text-fill-standard: var(--wds-color-text-primary);
@@ -2061,7 +2062,8 @@
2061
2062
  --wds-tabs-selection-border: linear-gradient(90deg, var(--wds-tabs-selection-fill-secondary) 0%, var(--wds-tabs-selection-fill-primary) 20%, var(--wds-tabs-selection-fill-primary) 80%, var(--wds-tabs-selection-fill-secondary) 100%);
2062
2063
  --wds-tabs-label-line-height-small: var(--wds-font-line-height-body-tiny);
2063
2064
  --wds-status-toast-text-font-line-height: var(--wds-font-line-height-body-medium);
2064
- --wds-side-panel-title-font-line-height: var(--wds-font-line-height-body-medium);
2065
+ --wds-side-panel-title-font-line-height: var(--wds-font-line-height-heading-3);
2066
+ --wds-side-panel-subtitle-font-line-height: var(--wds-font-line-height-body-medium);
2065
2067
  --wds-side-panel-floating-title-font-line-height: var(--wds-font-line-height-body-medium);
2066
2068
  --wds-segmented-toggle-label-font-line-height-small: var(--wds-font-line-height-body-tiny);
2067
2069
  --wds-radio-label-font-line-height-small: var(--wds-font-line-height-body-tiny);
package/studio/all.scss CHANGED
@@ -1624,7 +1624,7 @@
1624
1624
  --wds-tag-label-font-size-small: var(--wds-font-size-body-tiny);
1625
1625
  --wds-tabs-selection-fill-secondary: var(--wds-color-fill-standard-primary);
1626
1626
  --wds-tabs-selection-fill-primary: var(--wds-color-fill-standard-primary);
1627
- --wds-tabs-label-font-size-small: var(--wds-font-size-body-tiny);
1627
+ --wds-tabs-label-font-size-small: var(--wds-font-size-body-small);
1628
1628
  --wds-tabs-label-fill-active: var(--wds-color-text-primary);
1629
1629
  --wds-tabs-label-fill: var(--wds-color-text-standard-primary);
1630
1630
  --wds-table-list-item-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
@@ -1644,7 +1644,8 @@
1644
1644
  --wds-sidebar-item-text-neutral-default: var(--wds-color-text-standard-secondary);
1645
1645
  --wds-sidebar-item-text-light-default: var(--wds-color-text-standard-secondary);
1646
1646
  --wds-sidebar-header-text-dark-default: var(--wds-color-text-standard-primary-light);
1647
- --wds-side-panel-title-font-size: var(--wds-font-size-heading-4);
1647
+ --wds-side-panel-title-font-size: var(--wds-font-size-heading-3);
1648
+ --wds-side-panel-subtitle-font-size: var(--wds-font-size-body-medium);
1648
1649
  --wds-side-panel-footer-fill: var(--wds-color-fill-surface-modal);
1649
1650
  --wds-side-panel-floating-title-font-size: var(--wds-font-size-body-medium);
1650
1651
  --wds-shadow-surface-overlay: var(--wds-shadow-300);
@@ -2061,7 +2062,8 @@
2061
2062
  --wds-tabs-selection-border: linear-gradient(90deg, var(--wds-tabs-selection-fill-secondary) 0%, var(--wds-tabs-selection-fill-primary) 20%, var(--wds-tabs-selection-fill-primary) 80%, var(--wds-tabs-selection-fill-secondary) 100%);
2062
2063
  --wds-tabs-label-line-height-small: var(--wds-font-line-height-body-tiny);
2063
2064
  --wds-status-toast-text-font-line-height: var(--wds-font-line-height-body-medium);
2064
- --wds-side-panel-title-font-line-height: var(--wds-font-line-height-body-medium);
2065
+ --wds-side-panel-title-font-line-height: var(--wds-font-line-height-heading-3);
2066
+ --wds-side-panel-subtitle-font-line-height: var(--wds-font-line-height-body-medium);
2065
2067
  --wds-side-panel-floating-title-font-line-height: var(--wds-font-line-height-body-medium);
2066
2068
  --wds-segmented-toggle-label-font-line-height-small: var(--wds-font-line-height-body-tiny);
2067
2069
  --wds-radio-label-font-line-height-small: var(--wds-font-line-height-body-tiny);
package/studio/all.st.css CHANGED
@@ -1621,6 +1621,8 @@
1621
1621
  @property st-global(--wds-side-panel-header-padding-left);
1622
1622
  @property st-global(--wds-side-panel-header-padding-right);
1623
1623
  @property st-global(--wds-side-panel-header-padding-vertical);
1624
+ @property st-global(--wds-side-panel-subtitle-font-line-height);
1625
+ @property st-global(--wds-side-panel-subtitle-font-size);
1624
1626
  @property st-global(--wds-side-panel-title-font-letter-spacing);
1625
1627
  @property st-global(--wds-side-panel-title-font-line-height);
1626
1628
  @property st-global(--wds-side-panel-title-font-size);
@@ -3722,9 +3724,11 @@
3722
3724
  --wds-side-panel-header-padding-left: 24px;
3723
3725
  --wds-side-panel-header-padding-right: 8px;
3724
3726
  --wds-side-panel-header-padding-vertical: 16px;
3727
+ --wds-side-panel-subtitle-font-line-height: 24px;
3728
+ --wds-side-panel-subtitle-font-size: 16px;
3725
3729
  --wds-side-panel-title-font-letter-spacing: 0px;
3726
- --wds-side-panel-title-font-line-height: 24px;
3727
- --wds-side-panel-title-font-size: 18px;
3730
+ --wds-side-panel-title-font-line-height: 28px;
3731
+ --wds-side-panel-title-font-size: 20px;
3728
3732
  --wds-sidebar-clear-button-fill: #5a5d63;
3729
3733
  --wds-sidebar-divider-fill-dark-default: #42454C;
3730
3734
  --wds-sidebar-divider-fill-light-default: #cfd1dc;
@@ -3900,7 +3904,7 @@
3900
3904
  --wds-tabs-item-gap-small: 6px;
3901
3905
  --wds-tabs-label-fill: #131720;
3902
3906
  --wds-tabs-label-fill-active: #116dff;
3903
- --wds-tabs-label-font-size-small: 12px;
3907
+ --wds-tabs-label-font-size-small: 14px;
3904
3908
  --wds-tabs-label-font-weight: 400;
3905
3909
  --wds-tabs-label-font-weight-active: 400;
3906
3910
  --wds-tabs-label-line-height-small: 16px;
package/studio/component.st.css CHANGED
@@ -948,6 +948,8 @@
948
948
  @property st-global(--wds-side-panel-header-padding-left);
949
949
  @property st-global(--wds-side-panel-header-padding-right);
950
950
  @property st-global(--wds-side-panel-header-padding-vertical);
951
+ @property st-global(--wds-side-panel-subtitle-font-line-height);
952
+ @property st-global(--wds-side-panel-subtitle-font-size);
951
953
  @property st-global(--wds-side-panel-title-font-letter-spacing);
952
954
  @property st-global(--wds-side-panel-title-font-line-height);
953
955
  @property st-global(--wds-side-panel-title-font-size);
@@ -2330,9 +2332,11 @@
2330
2332
  --wds-side-panel-header-padding-left: 24px;
2331
2333
  --wds-side-panel-header-padding-right: 8px;
2332
2334
  --wds-side-panel-header-padding-vertical: 16px;
2335
+ --wds-side-panel-subtitle-font-line-height: 24px;
2336
+ --wds-side-panel-subtitle-font-size: 16px;
2333
2337
  --wds-side-panel-title-font-letter-spacing: 0px;
2334
- --wds-side-panel-title-font-line-height: 24px;
2335
- --wds-side-panel-title-font-size: 18px;
2338
+ --wds-side-panel-title-font-line-height: 28px;
2339
+ --wds-side-panel-title-font-size: 20px;
2336
2340
  --wds-sidebar-clear-button-fill: #5a5d63;
2337
2341
  --wds-sidebar-divider-fill-dark-default: #42454C;
2338
2342
  --wds-sidebar-divider-fill-light-default: #cfd1dc;
@@ -2464,7 +2468,7 @@
2464
2468
  --wds-tabs-item-gap-small: 6px;
2465
2469
  --wds-tabs-label-fill: #131720;
2466
2470
  --wds-tabs-label-fill-active: #116dff;
2467
- --wds-tabs-label-font-size-small: 12px;
2471
+ --wds-tabs-label-font-size-small: 14px;
2468
2472
  --wds-tabs-label-font-weight: 400;
2469
2473
  --wds-tabs-label-font-weight-active: 400;
2470
2474
  --wds-tabs-label-line-height-small: 16px;
package/wixel/all.css CHANGED
@@ -1608,6 +1608,7 @@
1608
1608
  --wds-sidebar-item-text-light-default: var(--wds-color-text-standard-secondary);
1609
1609
  --wds-sidebar-header-text-dark-default: var(--wds-color-text-standard-primary-light);
1610
1610
  --wds-side-panel-title-font-size: var(--wds-font-size-heading-3);
1611
+ --wds-side-panel-subtitle-font-size: var(--wds-font-size-body-medium);
1611
1612
  --wds-side-panel-floating-title-font-size: var(--wds-font-size-body-medium);
1612
1613
  --wds-selector-button-text-fill-standard: var(--wds-color-text-primary);
1613
1614
  --wds-selector-button-text-fill-pressed-standard: var(--wds-color-text-primary);
@@ -2003,6 +2004,7 @@
2003
2004
  --wds-tabs-label-line-height-small: var(--wds-font-line-height-body-tiny);
2004
2005
  --wds-status-toast-text-font-line-height: var(--wds-font-line-height-body-tiny);
2005
2006
  --wds-side-panel-title-font-line-height: var(--wds-font-line-height-heading-3);
2007
+ --wds-side-panel-subtitle-font-line-height: var(--wds-font-line-height-body-medium);
2006
2008
  --wds-side-panel-floating-title-font-line-height: var(--wds-font-line-height-body-medium);
2007
2009
  --wds-segmented-toggle-label-font-line-height-small: var(--wds-font-line-height-body-tiny);
2008
2010
  --wds-section-helper-text-font-line-height: var(--wds-font-line-height-body-tiny);
package/wixel/all.scss CHANGED
@@ -1593,6 +1593,7 @@
1593
1593
  --wds-sidebar-item-text-light-default: var(--wds-color-text-standard-secondary);
1594
1594
  --wds-sidebar-header-text-dark-default: var(--wds-color-text-standard-primary-light);
1595
1595
  --wds-side-panel-title-font-size: var(--wds-font-size-heading-3);
1596
+ --wds-side-panel-subtitle-font-size: var(--wds-font-size-body-medium);
1596
1597
  --wds-side-panel-floating-title-font-size: var(--wds-font-size-body-medium);
1597
1598
  --wds-shadow-inner-400-vertical: var(--wds-shadow-inner-300-top), var(--wds-shadow-inner-300-bottom);
1598
1599
  --wds-shadow-inner-400-horizontal: var(--wds-shadow-inner-300-left), var(--wds-shadow-inner-300-right);
@@ -2003,6 +2004,7 @@
2003
2004
  --wds-tabs-label-line-height-small: var(--wds-font-line-height-body-tiny);
2004
2005
  --wds-status-toast-text-font-line-height: var(--wds-font-line-height-body-tiny);
2005
2006
  --wds-side-panel-title-font-line-height: var(--wds-font-line-height-heading-3);
2007
+ --wds-side-panel-subtitle-font-line-height: var(--wds-font-line-height-body-medium);
2006
2008
  --wds-side-panel-floating-title-font-line-height: var(--wds-font-line-height-body-medium);
2007
2009
  --wds-segmented-toggle-label-font-line-height-small: var(--wds-font-line-height-body-tiny);
2008
2010
  --wds-section-helper-text-font-line-height: var(--wds-font-line-height-body-tiny);
package/wixel/all.st.css CHANGED
@@ -1576,6 +1576,8 @@
1576
1576
  @property st-global(--wds-side-panel-header-padding-left);
1577
1577
  @property st-global(--wds-side-panel-header-padding-right);
1578
1578
  @property st-global(--wds-side-panel-header-padding-vertical);
1579
+ @property st-global(--wds-side-panel-subtitle-font-line-height);
1580
+ @property st-global(--wds-side-panel-subtitle-font-size);
1579
1581
  @property st-global(--wds-side-panel-title-font-letter-spacing);
1580
1582
  @property st-global(--wds-side-panel-title-font-line-height);
1581
1583
  @property st-global(--wds-side-panel-title-font-size);
@@ -3625,6 +3627,8 @@
3625
3627
  --wds-side-panel-header-padding-left: 24px;
3626
3628
  --wds-side-panel-header-padding-right: 8px;
3627
3629
  --wds-side-panel-header-padding-vertical: 16px;
3630
+ --wds-side-panel-subtitle-font-line-height: 24px;
3631
+ --wds-side-panel-subtitle-font-size: 16px;
3628
3632
  --wds-side-panel-title-font-letter-spacing: -0.50;
3629
3633
  --wds-side-panel-title-font-line-height: 24px;
3630
3634
  --wds-side-panel-title-font-size: 18px;
package/wixel/component.st.css CHANGED
@@ -921,6 +921,8 @@
921
921
  @property st-global(--wds-side-panel-header-padding-left);
922
922
  @property st-global(--wds-side-panel-header-padding-right);
923
923
  @property st-global(--wds-side-panel-header-padding-vertical);
924
+ @property st-global(--wds-side-panel-subtitle-font-line-height);
925
+ @property st-global(--wds-side-panel-subtitle-font-size);
924
926
  @property st-global(--wds-side-panel-title-font-letter-spacing);
925
927
  @property st-global(--wds-side-panel-title-font-line-height);
926
928
  @property st-global(--wds-side-panel-title-font-size);
@@ -2269,6 +2271,8 @@
2269
2271
  --wds-side-panel-header-padding-left: 24px;
2270
2272
  --wds-side-panel-header-padding-right: 8px;
2271
2273
  --wds-side-panel-header-padding-vertical: 16px;
2274
+ --wds-side-panel-subtitle-font-line-height: 24px;
2275
+ --wds-side-panel-subtitle-font-size: 16px;
2272
2276
  --wds-side-panel-title-font-letter-spacing: -0.50;
2273
2277
  --wds-side-panel-title-font-line-height: 24px;
2274
2278
  --wds-side-panel-title-font-size: 18px;