@wix/design-system-tokens 1.185.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 +4 -0
  3. package/all.scss +4 -0
  4. package/all.st.css +8 -0
  5. package/component.st.css +8 -0
  6. package/odeditor/all.css +5 -0
  7. package/odeditor/all.scss +5 -0
  8. package/odeditor/all.st.css +10 -0
  9. package/odeditor/component.st.css +10 -0
  10. package/odeditor-dark/all.css +17 -12
  11. package/odeditor-dark/all.scss +17 -12
  12. package/odeditor-dark/all.st.css +22 -12
  13. package/odeditor-dark/component.st.css +22 -12
  14. package/package.json +6 -8
  15. package/studio/all.css +7 -3
  16. package/studio/all.scss +7 -3
  17. package/studio/all.st.css +11 -3
  18. package/studio/component.st.css +11 -3
  19. package/wixel/all.css +4 -0
  20. package/wixel/all.scss +4 -0
  21. package/wixel/all.st.css +8 -0
  22. package/wixel/component.st.css +8 -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);
@@ -1882,6 +1883,8 @@
1882
1883
  --wds-dock-foreground-fill: var(--wds-color-fill-standard-secondary-hover);
1883
1884
  --wds-dock-background-fill-disabled: var(--wds-color-fill-standard-secondary-disabled);
1884
1885
  --wds-divider-vertical-fill-color-light: var(--wds-color-border-dark-secondary);
1886
+ --wds-divider-fill-light: var(--wds-color-border-dark-secondary);
1887
+ --wds-divider-fill-dark: var(--wds-color-border-dark-primary-active);
1885
1888
  --wds-divider-fill-color-light-secondary: var(--wds-color-border-dark-secondary);
1886
1889
  --wds-divider-fill-color-light-primary: var(--wds-color-border-dark-secondary);
1887
1890
  --wds-divider-fill-color-light: var(--wds-color-border-dark-secondary);
@@ -2065,6 +2068,7 @@
2065
2068
  --wds-tabs-label-line-height-small: var(--wds-font-line-height-body-small);
2066
2069
  --wds-status-toast-text-font-line-height: var(--wds-font-line-height-body-medium);
2067
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);
2068
2072
  --wds-side-panel-floating-title-font-line-height: var(--wds-font-line-height-body-medium);
2069
2073
  --wds-segmented-toggle-label-font-line-height-small: var(--wds-font-line-height-body-small);
2070
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);
@@ -1881,6 +1882,8 @@
1881
1882
  --wds-dock-foreground-fill: var(--wds-color-fill-standard-secondary-hover);
1882
1883
  --wds-dock-background-fill-disabled: var(--wds-color-fill-standard-secondary-disabled);
1883
1884
  --wds-divider-vertical-fill-color-light: var(--wds-color-border-dark-secondary);
1885
+ --wds-divider-fill-light: var(--wds-color-border-dark-secondary);
1886
+ --wds-divider-fill-dark: var(--wds-color-border-dark-primary-active);
1884
1887
  --wds-divider-fill-color-light-secondary: var(--wds-color-border-dark-secondary);
1885
1888
  --wds-divider-fill-color-light-primary: var(--wds-color-border-dark-secondary);
1886
1889
  --wds-divider-fill-color-light: var(--wds-color-border-dark-secondary);
@@ -2065,6 +2068,7 @@
2065
2068
  --wds-tabs-label-line-height-small: var(--wds-font-line-height-body-small);
2066
2069
  --wds-status-toast-text-font-line-height: var(--wds-font-line-height-body-medium);
2067
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);
2068
2072
  --wds-side-panel-floating-title-font-line-height: var(--wds-font-line-height-body-medium);
2069
2073
  --wds-segmented-toggle-label-font-line-height-small: var(--wds-font-line-height-body-small);
2070
2074
  --wds-radio-label-font-line-height-small: var(--wds-font-line-height-body-small);
package/all.st.css CHANGED
@@ -854,6 +854,8 @@
854
854
  @property st-global(--wds-divider-fill-color-light);
855
855
  @property st-global(--wds-divider-fill-color-light-primary);
856
856
  @property st-global(--wds-divider-fill-color-light-secondary);
857
+ @property st-global(--wds-divider-fill-dark);
858
+ @property st-global(--wds-divider-fill-light);
857
859
  @property st-global(--wds-divider-gradient-border);
858
860
  @property st-global(--wds-divider-vertical-fill-color-light);
859
861
  @property st-global(--wds-dock-background-fill);
@@ -1631,6 +1633,8 @@
1631
1633
  @property st-global(--wds-side-panel-header-padding-left);
1632
1634
  @property st-global(--wds-side-panel-header-padding-right);
1633
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);
1634
1638
  @property st-global(--wds-side-panel-title-font-letter-spacing);
1635
1639
  @property st-global(--wds-side-panel-title-font-line-height);
1636
1640
  @property st-global(--wds-side-panel-title-font-size);
@@ -2963,6 +2967,8 @@
2963
2967
  --wds-divider-fill-color-light: #dfe5eb;
2964
2968
  --wds-divider-fill-color-light-primary: #dfe5eb;
2965
2969
  --wds-divider-fill-color-light-secondary: #dfe5eb;
2970
+ --wds-divider-fill-dark: #44485f;
2971
+ --wds-divider-fill-light: #dfe5eb;
2966
2972
  --wds-divider-gradient-border: linear-gradient(90deg, #dfe5eb 0%, #dfe5eb 16%, #dfe5eb 84%, #dfe5eb 100%);
2967
2973
  --wds-divider-vertical-fill-color-light: #dfe5eb;
2968
2974
  --wds-dock-background-fill: #e7f0ff;
@@ -3740,6 +3746,8 @@
3740
3746
  --wds-side-panel-header-padding-left: 24px;
3741
3747
  --wds-side-panel-header-padding-right: 9px;
3742
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;
3743
3751
  --wds-side-panel-title-font-letter-spacing: 0px;
3744
3752
  --wds-side-panel-title-font-line-height: 24px;
3745
3753
  --wds-side-panel-title-font-size: 18px;
package/component.st.css CHANGED
@@ -355,6 +355,8 @@
355
355
  @property st-global(--wds-divider-fill-color-light);
356
356
  @property st-global(--wds-divider-fill-color-light-primary);
357
357
  @property st-global(--wds-divider-fill-color-light-secondary);
358
+ @property st-global(--wds-divider-fill-dark);
359
+ @property st-global(--wds-divider-fill-light);
358
360
  @property st-global(--wds-divider-gradient-border);
359
361
  @property st-global(--wds-divider-vertical-fill-color-light);
360
362
  @property st-global(--wds-dock-background-fill);
@@ -954,6 +956,8 @@
954
956
  @property st-global(--wds-side-panel-header-padding-left);
955
957
  @property st-global(--wds-side-panel-header-padding-right);
956
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);
957
961
  @property st-global(--wds-side-panel-title-font-letter-spacing);
958
962
  @property st-global(--wds-side-panel-title-font-line-height);
959
963
  @property st-global(--wds-side-panel-title-font-size);
@@ -1741,6 +1745,8 @@
1741
1745
  --wds-divider-fill-color-light: #dfe5eb;
1742
1746
  --wds-divider-fill-color-light-primary: #dfe5eb;
1743
1747
  --wds-divider-fill-color-light-secondary: #dfe5eb;
1748
+ --wds-divider-fill-dark: #44485f;
1749
+ --wds-divider-fill-light: #dfe5eb;
1744
1750
  --wds-divider-gradient-border: linear-gradient(90deg, #dfe5eb 0%, #dfe5eb 16%, #dfe5eb 84%, #dfe5eb 100%);
1745
1751
  --wds-divider-vertical-fill-color-light: #dfe5eb;
1746
1752
  --wds-dock-background-fill: #e7f0ff;
@@ -2340,6 +2346,8 @@
2340
2346
  --wds-side-panel-header-padding-left: 24px;
2341
2347
  --wds-side-panel-header-padding-right: 9px;
2342
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;
2343
2351
  --wds-side-panel-title-font-letter-spacing: 0px;
2344
2352
  --wds-side-panel-title-font-line-height: 24px;
2345
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);
@@ -1879,6 +1881,8 @@
1879
1881
  --wds-dock-point-fill-hover: var(--wds-color-fill-dark-secondary-active);
1880
1882
  --wds-dock-point-fill-fill: var(--wds-color-text-standard-secondary-light);
1881
1883
  --wds-dock-point-fill-active: var(--wds-color-fill-standard-primary);
1884
+ --wds-divider-fill-light: var(--wds-color-border-dark-secondary);
1885
+ --wds-divider-fill-dark: var(--wds-color-border-dark-primary-active);
1882
1886
  --wds-divider-fill-color-light-secondary: var(--wds-color-border-dark-secondary);
1883
1887
  --wds-divider-fill-color-light-primary: var(--wds-color-border-dark-secondary);
1884
1888
  --wds-date-picker-icon-fill-disabled: var(--wds-color-text-disabled);
@@ -2011,6 +2015,7 @@
2011
2015
  --wds-subtitle-font-line-height-medium: var(--wds-font-line-height-body-tiny);
2012
2016
  --wds-status-toast-text-font-line-height: var(--wds-font-line-height-body-small);
2013
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);
2014
2019
  --wds-side-panel-floating-title-font-line-height: var(--wds-font-line-height-heading-3);
2015
2020
  --wds-segmented-toggle-label-font-line-height-small: var(--wds-font-line-height-body-small);
2016
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);
@@ -1877,6 +1879,8 @@
1877
1879
  --wds-dock-point-fill-hover: var(--wds-color-fill-dark-secondary-active);
1878
1880
  --wds-dock-point-fill-fill: var(--wds-color-text-standard-secondary-light);
1879
1881
  --wds-dock-point-fill-active: var(--wds-color-fill-standard-primary);
1882
+ --wds-divider-fill-light: var(--wds-color-border-dark-secondary);
1883
+ --wds-divider-fill-dark: var(--wds-color-border-dark-primary-active);
1880
1884
  --wds-divider-fill-color-light-secondary: var(--wds-color-border-dark-secondary);
1881
1885
  --wds-divider-fill-color-light-primary: var(--wds-color-border-dark-secondary);
1882
1886
  --wds-date-picker-icon-fill-disabled: var(--wds-color-text-disabled);
@@ -2011,6 +2015,7 @@
2011
2015
  --wds-subtitle-font-line-height-medium: var(--wds-font-line-height-body-tiny);
2012
2016
  --wds-status-toast-text-font-line-height: var(--wds-font-line-height-body-small);
2013
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);
2014
2019
  --wds-side-panel-floating-title-font-line-height: var(--wds-font-line-height-heading-3);
2015
2020
  --wds-segmented-toggle-label-font-line-height-small: var(--wds-font-line-height-body-small);
2016
2021
  --wds-section-helper-text-font-line-height: var(--wds-font-line-height-body-tiny);
package/odeditor/all.st.css CHANGED
@@ -836,6 +836,8 @@
836
836
  @property st-global(--wds-date-picker-icon-fill-disabled);
837
837
  @property st-global(--wds-divider-fill-color-light-primary);
838
838
  @property st-global(--wds-divider-fill-color-light-secondary);
839
+ @property st-global(--wds-divider-fill-dark);
840
+ @property st-global(--wds-divider-fill-light);
839
841
  @property st-global(--wds-dock-area-fill);
840
842
  @property st-global(--wds-dock-point-fill-active);
841
843
  @property st-global(--wds-dock-point-fill-fill);
@@ -1131,6 +1133,7 @@
1131
1133
  @property st-global(--wds-linear-progress-bar-value-gap);
1132
1134
  @property st-global(--wds-list-item-action-affix-margin);
1133
1135
  @property st-global(--wds-list-item-action-border-radius);
1136
+ @property st-global(--wds-list-item-action-fill);
1134
1137
  @property st-global(--wds-list-item-action-fill-active);
1135
1138
  @property st-global(--wds-list-item-action-fill-hover);
1136
1139
  @property st-global(--wds-list-item-action-gap);
@@ -1574,6 +1577,8 @@
1574
1577
  @property st-global(--wds-side-panel-header-padding-left);
1575
1578
  @property st-global(--wds-side-panel-header-padding-right);
1576
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);
1577
1582
  @property st-global(--wds-side-panel-title-font-letter-spacing);
1578
1583
  @property st-global(--wds-side-panel-title-font-line-height);
1579
1584
  @property st-global(--wds-side-panel-title-font-size);
@@ -2888,6 +2893,8 @@
2888
2893
  --wds-date-picker-icon-fill-disabled: #a8a6a5;
2889
2894
  --wds-divider-fill-color-light-primary: #dedede;
2890
2895
  --wds-divider-fill-color-light-secondary: #dedede;
2896
+ --wds-divider-fill-dark: #383838;
2897
+ --wds-divider-fill-light: #dedede;
2891
2898
  --wds-dock-area-fill: #f8f6f6;
2892
2899
  --wds-dock-point-fill-active: #2f5dff;
2893
2900
  --wds-dock-point-fill-fill: #767574;
@@ -3183,6 +3190,7 @@
3183
3190
  --wds-linear-progress-bar-value-gap: 4px;
3184
3191
  --wds-list-item-action-affix-margin: 4px;
3185
3192
  --wds-list-item-action-border-radius: 8px;
3193
+ --wds-list-item-action-fill: #ffffff;
3186
3194
  --wds-list-item-action-fill-active: #f0efef;
3187
3195
  --wds-list-item-action-fill-hover: #f8f6f6;
3188
3196
  --wds-list-item-action-gap: 2px;
@@ -3626,6 +3634,8 @@
3626
3634
  --wds-side-panel-header-padding-left: 16px;
3627
3635
  --wds-side-panel-header-padding-right: 12px;
3628
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;
3629
3639
  --wds-side-panel-title-font-letter-spacing: -0.50;
3630
3640
  --wds-side-panel-title-font-line-height: 24px;
3631
3641
  --wds-side-panel-title-font-size: 16px;
package/odeditor/component.st.css CHANGED
@@ -342,6 +342,8 @@
342
342
  @property st-global(--wds-date-picker-icon-fill-disabled);
343
343
  @property st-global(--wds-divider-fill-color-light-primary);
344
344
  @property st-global(--wds-divider-fill-color-light-secondary);
345
+ @property st-global(--wds-divider-fill-dark);
346
+ @property st-global(--wds-divider-fill-light);
345
347
  @property st-global(--wds-dock-area-fill);
346
348
  @property st-global(--wds-dock-point-fill-active);
347
349
  @property st-global(--wds-dock-point-fill-fill);
@@ -567,6 +569,7 @@
567
569
  @property st-global(--wds-linear-progress-bar-value-gap);
568
570
  @property st-global(--wds-list-item-action-affix-margin);
569
571
  @property st-global(--wds-list-item-action-border-radius);
572
+ @property st-global(--wds-list-item-action-fill);
570
573
  @property st-global(--wds-list-item-action-fill-active);
571
574
  @property st-global(--wds-list-item-action-fill-hover);
572
575
  @property st-global(--wds-list-item-action-gap);
@@ -901,6 +904,8 @@
901
904
  @property st-global(--wds-side-panel-header-padding-left);
902
905
  @property st-global(--wds-side-panel-header-padding-right);
903
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);
904
909
  @property st-global(--wds-side-panel-title-font-letter-spacing);
905
910
  @property st-global(--wds-side-panel-title-font-line-height);
906
911
  @property st-global(--wds-side-panel-title-font-size);
@@ -1674,6 +1679,8 @@
1674
1679
  --wds-date-picker-icon-fill-disabled: #a8a6a5;
1675
1680
  --wds-divider-fill-color-light-primary: #dedede;
1676
1681
  --wds-divider-fill-color-light-secondary: #dedede;
1682
+ --wds-divider-fill-dark: #383838;
1683
+ --wds-divider-fill-light: #dedede;
1677
1684
  --wds-dock-area-fill: #f8f6f6;
1678
1685
  --wds-dock-point-fill-active: #2f5dff;
1679
1686
  --wds-dock-point-fill-fill: #767574;
@@ -1899,6 +1906,7 @@
1899
1906
  --wds-linear-progress-bar-value-gap: 4px;
1900
1907
  --wds-list-item-action-affix-margin: 4px;
1901
1908
  --wds-list-item-action-border-radius: 8px;
1909
+ --wds-list-item-action-fill: #ffffff;
1902
1910
  --wds-list-item-action-fill-active: #f0efef;
1903
1911
  --wds-list-item-action-fill-hover: #f8f6f6;
1904
1912
  --wds-list-item-action-gap: 2px;
@@ -2233,6 +2241,8 @@
2233
2241
  --wds-side-panel-header-padding-left: 16px;
2234
2242
  --wds-side-panel-header-padding-right: 12px;
2235
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;
2236
2246
  --wds-side-panel-title-font-letter-spacing: -0.50;
2237
2247
  --wds-side-panel-title-font-line-height: 24px;
2238
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);
@@ -1345,6 +1349,8 @@
1345
1349
  --wds-dropdown-layout-option-size-big: var(--wds-space-1000);
1346
1350
  --wds-dropdown-list-paddings: var(--wds-space-200);
1347
1351
  --wds-dock-area-fill: var(--wds-color-black-750);
1352
+ --wds-divider-fill-light: var(--wds-color-black-750);
1353
+ --wds-divider-fill-dark: var(--wds-color-black-700);
1348
1354
  --wds-custom-modal-header-padding-vertical: var(--wds-space-600);
1349
1355
  --wds-custom-modal-header-padding-right: var(--wds-space-500);
1350
1356
  --wds-custom-modal-header-padding-left: var(--wds-space-600);
@@ -1654,7 +1660,7 @@
1654
1660
  --wds-thumbnail-border-color-disabled: var(--wds-color-border-standard-primary-disabled);
1655
1661
  --wds-thumbnail-border-color: var(--wds-color-border-dark-secondary);
1656
1662
  --wds-tag-label-font-size-small: var(--wds-font-size-body-tiny);
1657
- --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);
1658
1664
  --wds-tabs-label-fill-active: var(--wds-color-text-standard-primary);
1659
1665
  --wds-tabs-item-fill-active: var(--wds-color-fill-dark-secondary);
1660
1666
  --wds-table-list-item-fill-hover: var(--wds-color-fill-dark-tertiary-hover);
@@ -1680,9 +1686,10 @@
1680
1686
  --wds-sidebar-item-text-light-default: var(--wds-color-text-standard-secondary);
1681
1687
  --wds-sidebar-item-text-dark-default: var(--wds-color-text-standard-primary);
1682
1688
  --wds-sidebar-header-text-dark-default: var(--wds-color-text-standard-primary);
1683
- --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);
1684
1691
  --wds-side-panel-footer-fill: var(--wds-color-fill-surface-modal);
1685
- --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);
1686
1693
  --wds-selector-button-text-fill-standard: var(--wds-color-text-primary);
1687
1694
  --wds-selector-button-text-fill-pressed-standard: var(--wds-color-text-primary);
1688
1695
  --wds-selector-button-text-fill-pressed-dark: var(--wds-color-text-primary);
@@ -1748,7 +1755,6 @@
1748
1755
  --wds-list-item-select-fill-hover: var(--wds-color-fill-dark-tertiary-hover);
1749
1756
  --wds-list-item-select-fill-disabled: var(--wds-color-fill-standard-tertiary);
1750
1757
  --wds-list-item-select-fill-active: var(--wds-color-fill-standard-tertiary);
1751
- --wds-list-item-select-fill: var(--wds-color-fill-standard-tertiary);
1752
1758
  --wds-list-item-select-active-title-screen-small: var(--wds-color-text-standard-primary);
1753
1759
  --wds-list-item-select-active-title-disabled-screen-small: var(--wds-color-text-disabled);
1754
1760
  --wds-list-item-select-active-title-disabled: var(--wds-color-text-disabled);
@@ -1762,8 +1768,6 @@
1762
1768
  --wds-list-item-select-active-fill: var(--wds-color-fill-dark-tertiary-active);
1763
1769
  --wds-list-item-section-title-label-fill: var(--wds-color-text-placeholder);
1764
1770
  --wds-list-item-section-font-size: var(--wds-font-size-body-small);
1765
- --wds-list-item-section-fill-neutral: var(--wds-color-fill-standard-tertiary);
1766
- --wds-list-item-section-fill: var(--wds-color-fill-standard-tertiary);
1767
1771
  --wds-list-item-action-suffix-fill-active: var(--wds-color-text-standard-primary);
1768
1772
  --wds-list-item-action-suffix-fill: var(--wds-color-text-standard-primary);
1769
1773
  --wds-list-item-action-subtitle-font-size: var(--wds-font-size-body-tiny);
@@ -1870,13 +1874,13 @@
1870
1874
  --wds-icon-button-color-border-dark-secondary: var(--wds-color-border-dark-primary);
1871
1875
  --wds-form-field-label-font-size-tiny: var(--wds-font-size-body-extra-tiny);
1872
1876
  --wds-form-field-label-font-size-small: var(--wds-font-size-body-tiny);
1873
- --wds-form-field-label-fill: var(--wds-color-text-standard-secondary);
1877
+ --wds-form-field-label-fill: var(--wds-color-text-standard-primary);
1874
1878
  --wds-fill-button-icon-color: var(--wds-color-text-standard-primary);
1875
1879
  --wds-fill-button-fill-hover: var(--wds-color-fill-standard-tertiary);
1876
1880
  --wds-fill-button-fill: var(--wds-color-fill-standard-tertiary);
1877
1881
  --wds-field-set-label-font-size-tiny: var(--wds-font-size-body-extra-tiny);
1878
1882
  --wds-field-set-label-font-size-small: var(--wds-font-size-body-tiny);
1879
- --wds-field-set-label-fill: var(--wds-color-text-standard-secondary);
1883
+ --wds-field-set-label-fill: var(--wds-color-text-standard-primary);
1880
1884
  --wds-dropdown-icon-fill-disabled: var(--wds-color-text-disabled);
1881
1885
  --wds-dropdown-icon-fill: var(--wds-color-text-standard-secondary);
1882
1886
  --wds-drag-handle-fill: var(--wds-color-text-standard-primary);
@@ -2012,11 +2016,12 @@
2012
2016
  --wds-thumbnail-title-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
2013
2017
  --wds-thumbnail-subtitle-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
2014
2018
  --wds-tag-label-font-line-height-small: var(--wds-font-line-height-body-tiny);
2015
- --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);
2016
2020
  --wds-subtitle-font-line-height-medium: var(--wds-font-line-height-body-tiny);
2017
2021
  --wds-status-toast-text-font-line-height: var(--wds-font-line-height-body-small);
2018
- --wds-side-panel-title-font-line-height: var(--wds-font-line-height-heading-3);
2019
- --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);
2020
2025
  --wds-segmented-toggle-label-font-line-height-small: var(--wds-font-line-height-body-small);
2021
2026
  --wds-section-helper-text-font-line-height: var(--wds-font-line-height-body-tiny);
2022
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);
@@ -1045,6 +1049,8 @@
1045
1049
  --wds-dropdown-layout-option-size-small: var(--wds-space-800);
1046
1050
  --wds-dropdown-layout-option-size-big: var(--wds-space-1000);
1047
1051
  --wds-dock-area-fill: var(--wds-color-black-750);
1052
+ --wds-divider-fill-light: var(--wds-color-black-750);
1053
+ --wds-divider-fill-dark: var(--wds-color-black-700);
1048
1054
  --wds-custom-modal-header-padding-vertical: var(--wds-space-600);
1049
1055
  --wds-custom-modal-header-padding-right: var(--wds-space-500);
1050
1056
  --wds-custom-modal-header-padding-left: var(--wds-space-600);
@@ -1639,7 +1645,7 @@
1639
1645
  --wds-thumbnail-border-color-disabled: var(--wds-color-border-standard-primary-disabled);
1640
1646
  --wds-thumbnail-border-color: var(--wds-color-border-dark-secondary);
1641
1647
  --wds-tag-label-font-size-small: var(--wds-font-size-body-tiny);
1642
- --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);
1643
1649
  --wds-tabs-label-fill-active: var(--wds-color-text-standard-primary);
1644
1650
  --wds-tabs-item-fill-active: var(--wds-color-fill-dark-secondary);
1645
1651
  --wds-table-list-item-fill-hover: var(--wds-color-fill-dark-tertiary-hover);
@@ -1665,9 +1671,10 @@
1665
1671
  --wds-sidebar-item-text-light-default: var(--wds-color-text-standard-secondary);
1666
1672
  --wds-sidebar-item-text-dark-default: var(--wds-color-text-standard-primary);
1667
1673
  --wds-sidebar-header-text-dark-default: var(--wds-color-text-standard-primary);
1668
- --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);
1669
1676
  --wds-side-panel-footer-fill: var(--wds-color-fill-surface-modal);
1670
- --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);
1671
1678
  --wds-shadow-surface-raised: var(--wds-shadow-200);
1672
1679
  --wds-shadow-surface-overlay-dark: var(--wds-shadow-300);
1673
1680
  --wds-shadow-surface-overlay: var(--wds-shadow-300);
@@ -1738,7 +1745,6 @@
1738
1745
  --wds-list-item-select-fill-hover: var(--wds-color-fill-dark-tertiary-hover);
1739
1746
  --wds-list-item-select-fill-disabled: var(--wds-color-fill-standard-tertiary);
1740
1747
  --wds-list-item-select-fill-active: var(--wds-color-fill-standard-tertiary);
1741
- --wds-list-item-select-fill: var(--wds-color-fill-standard-tertiary);
1742
1748
  --wds-list-item-select-active-title-screen-small: var(--wds-color-text-standard-primary);
1743
1749
  --wds-list-item-select-active-title-disabled-screen-small: var(--wds-color-text-disabled);
1744
1750
  --wds-list-item-select-active-title-disabled: var(--wds-color-text-disabled);
@@ -1752,8 +1758,6 @@
1752
1758
  --wds-list-item-select-active-fill: var(--wds-color-fill-dark-tertiary-active);
1753
1759
  --wds-list-item-section-title-label-fill: var(--wds-color-text-placeholder);
1754
1760
  --wds-list-item-section-font-size: var(--wds-font-size-body-small);
1755
- --wds-list-item-section-fill-neutral: var(--wds-color-fill-standard-tertiary);
1756
- --wds-list-item-section-fill: var(--wds-color-fill-standard-tertiary);
1757
1761
  --wds-list-item-action-suffix-fill-active: var(--wds-color-text-standard-primary);
1758
1762
  --wds-list-item-action-suffix-fill: var(--wds-color-text-standard-primary);
1759
1763
  --wds-list-item-action-subtitle-font-size: var(--wds-font-size-body-tiny);
@@ -1860,7 +1864,7 @@
1860
1864
  --wds-icon-button-color-border-dark-secondary: var(--wds-color-border-dark-primary);
1861
1865
  --wds-form-field-label-font-size-tiny: var(--wds-font-size-body-extra-tiny);
1862
1866
  --wds-form-field-label-font-size-small: var(--wds-font-size-body-tiny);
1863
- --wds-form-field-label-fill: var(--wds-color-text-standard-secondary);
1867
+ --wds-form-field-label-fill: var(--wds-color-text-standard-primary);
1864
1868
  --wds-font-line-height-heading-6: var(--wds-font-line-height-100);
1865
1869
  --wds-font-line-height-heading-5: var(--wds-font-line-height-100);
1866
1870
  --wds-font-line-height-heading-4: var(--wds-font-line-height-300);
@@ -1876,7 +1880,7 @@
1876
1880
  --wds-fill-button-fill: var(--wds-color-fill-standard-tertiary);
1877
1881
  --wds-field-set-label-font-size-tiny: var(--wds-font-size-body-extra-tiny);
1878
1882
  --wds-field-set-label-font-size-small: var(--wds-font-size-body-tiny);
1879
- --wds-field-set-label-fill: var(--wds-color-text-standard-secondary);
1883
+ --wds-field-set-label-fill: var(--wds-color-text-standard-primary);
1880
1884
  --wds-dropdown-icon-fill-disabled: var(--wds-color-text-disabled);
1881
1885
  --wds-dropdown-icon-fill: var(--wds-color-text-standard-secondary);
1882
1886
  --wds-drag-handle-fill: var(--wds-color-text-standard-primary);
@@ -2012,11 +2016,12 @@
2012
2016
  --wds-thumbnail-title-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
2013
2017
  --wds-thumbnail-subtitle-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
2014
2018
  --wds-tag-label-font-line-height-small: var(--wds-font-line-height-body-tiny);
2015
- --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);
2016
2020
  --wds-subtitle-font-line-height-medium: var(--wds-font-line-height-body-tiny);
2017
2021
  --wds-status-toast-text-font-line-height: var(--wds-font-line-height-body-small);
2018
- --wds-side-panel-title-font-line-height: var(--wds-font-line-height-heading-3);
2019
- --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);
2020
2025
  --wds-segmented-toggle-label-font-line-height-small: var(--wds-font-line-height-body-small);
2021
2026
  --wds-section-helper-text-font-line-height: var(--wds-font-line-height-body-tiny);
2022
2027
  --wds-radio-label-font-line-height-small: var(--wds-font-line-height-body-tiny);
package/odeditor-dark/all.st.css CHANGED
@@ -841,6 +841,8 @@
841
841
  @property st-global(--wds-date-picker-icon-fill-disabled);
842
842
  @property st-global(--wds-divider-fill-color-light-primary);
843
843
  @property st-global(--wds-divider-fill-color-light-secondary);
844
+ @property st-global(--wds-divider-fill-dark);
845
+ @property st-global(--wds-divider-fill-light);
844
846
  @property st-global(--wds-dock-area-fill);
845
847
  @property st-global(--wds-dock-point-fill-active);
846
848
  @property st-global(--wds-dock-point-fill-fill);
@@ -1136,6 +1138,7 @@
1136
1138
  @property st-global(--wds-linear-progress-bar-value-gap);
1137
1139
  @property st-global(--wds-list-item-action-affix-margin);
1138
1140
  @property st-global(--wds-list-item-action-border-radius);
1141
+ @property st-global(--wds-list-item-action-fill);
1139
1142
  @property st-global(--wds-list-item-action-fill-active);
1140
1143
  @property st-global(--wds-list-item-action-fill-hover);
1141
1144
  @property st-global(--wds-list-item-action-gap);
@@ -1579,6 +1582,8 @@
1579
1582
  @property st-global(--wds-side-panel-header-padding-left);
1580
1583
  @property st-global(--wds-side-panel-header-padding-right);
1581
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);
1582
1587
  @property st-global(--wds-side-panel-title-font-letter-spacing);
1583
1588
  @property st-global(--wds-side-panel-title-font-line-height);
1584
1589
  @property st-global(--wds-side-panel-title-font-size);
@@ -2898,6 +2903,8 @@
2898
2903
  --wds-date-picker-icon-fill-disabled: #878685;
2899
2904
  --wds-divider-fill-color-light-primary: #454544;
2900
2905
  --wds-divider-fill-color-light-secondary: #454544;
2906
+ --wds-divider-fill-dark: #3A3A3B;
2907
+ --wds-divider-fill-light: #2D2D2E;
2901
2908
  --wds-dock-area-fill: #2D2D2E;
2902
2909
  --wds-dock-point-fill-active: #82B0FF;
2903
2910
  --wds-dock-point-fill-fill: #A09E9D;
@@ -2915,7 +2922,7 @@
2915
2922
  --wds-field-set-gap-large: 16px;
2916
2923
  --wds-field-set-gap-medium: 12px;
2917
2924
  --wds-field-set-gap-small: 8px;
2918
- --wds-field-set-label-fill: #D4D3D2;
2925
+ --wds-field-set-label-fill: #FFFFFF;
2919
2926
  --wds-field-set-label-font-line-height-small: 16px;
2920
2927
  --wds-field-set-label-font-line-height-tiny: 12px;
2921
2928
  --wds-field-set-label-font-size-small: 12px;
@@ -2988,7 +2995,7 @@
2988
2995
  --wds-font-weight-medium: 500;
2989
2996
  --wds-font-weight-regular: 400;
2990
2997
  --wds-font-weight-semi-bold: 600;
2991
- --wds-form-field-label-fill: #D4D3D2;
2998
+ --wds-form-field-label-fill: #FFFFFF;
2992
2999
  --wds-form-field-label-font-size-small: 12px;
2993
3000
  --wds-form-field-label-font-size-tiny: 10px;
2994
3001
  --wds-form-field-label-font-weight: 500;
@@ -3193,6 +3200,7 @@
3193
3200
  --wds-linear-progress-bar-value-gap: 4px;
3194
3201
  --wds-list-item-action-affix-margin: 4px;
3195
3202
  --wds-list-item-action-border-radius: 8px;
3203
+ --wds-list-item-action-fill: rgba(0, 0, 0, 0);
3196
3204
  --wds-list-item-action-fill-active: #2D2D2E;
3197
3205
  --wds-list-item-action-fill-hover: #3A3A3B;
3198
3206
  --wds-list-item-action-gap: 2px;
@@ -3215,11 +3223,11 @@
3215
3223
  --wds-list-item-action-suffix-fill-active: #FFFFFF;
3216
3224
  --wds-list-item-action-title-font-weight: 500;
3217
3225
  --wds-list-item-action-title-font-weight-active: 600;
3218
- --wds-list-item-section-divider-padding-bottom: 0px;
3226
+ --wds-list-item-section-divider-padding-bottom: 8px;
3219
3227
  --wds-list-item-section-divider-padding-horizontal: 0px;
3220
3228
  --wds-list-item-section-divider-padding-top: 8px;
3221
- --wds-list-item-section-fill: #212122;
3222
- --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);
3223
3231
  --wds-list-item-section-font-line-height: 18px;
3224
3232
  --wds-list-item-section-font-size: 14px;
3225
3233
  --wds-list-item-section-font-weight: 600;
@@ -3244,7 +3252,7 @@
3244
3252
  --wds-list-item-select-active-title-screen-small: #FFFFFF;
3245
3253
  --wds-list-item-select-affix-margin: 4px;
3246
3254
  --wds-list-item-select-border-radius: 8px;
3247
- --wds-list-item-select-fill: #212122;
3255
+ --wds-list-item-select-fill: rgba(0, 0, 0, 0);
3248
3256
  --wds-list-item-select-fill-active: #212122;
3249
3257
  --wds-list-item-select-fill-disabled: #212122;
3250
3258
  --wds-list-item-select-fill-hover: #3A3A3B;
@@ -3621,8 +3629,8 @@
3621
3629
  --wds-side-panel-floating-header-padding-vertical: 16px;
3622
3630
  --wds-side-panel-floating-max-height: 576px;
3623
3631
  --wds-side-panel-floating-title-font-family: "Madefor Display", Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
3624
- --wds-side-panel-floating-title-font-line-height: 24px;
3625
- --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;
3626
3634
  --wds-side-panel-footer-background-blur: 0px;
3627
3635
  --wds-side-panel-footer-border-fill: rgba(0, 0, 0, 0);
3628
3636
  --wds-side-panel-footer-border-width: 0px;
@@ -3636,9 +3644,11 @@
3636
3644
  --wds-side-panel-header-padding-left: 16px;
3637
3645
  --wds-side-panel-header-padding-right: 12px;
3638
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;
3639
3649
  --wds-side-panel-title-font-letter-spacing: -0.50;
3640
- --wds-side-panel-title-font-line-height: 24px;
3641
- --wds-side-panel-title-font-size: 16px;
3650
+ --wds-side-panel-title-font-line-height: 18px;
3651
+ --wds-side-panel-title-font-size: 14px;
3642
3652
  --wds-sidebar-clear-button-fill: #5a5d63;
3643
3653
  --wds-sidebar-divider-fill-dark-default: #42454c;
3644
3654
  --wds-sidebar-divider-fill-light-default: #666565;
@@ -3820,10 +3830,10 @@
3820
3830
  --wds-tabs-item-gap-small: 6px;
3821
3831
  --wds-tabs-label-fill: #A8A6A5;
3822
3832
  --wds-tabs-label-fill-active: #FFFFFF;
3823
- --wds-tabs-label-font-size-small: 14px;
3833
+ --wds-tabs-label-font-size-small: 12px;
3824
3834
  --wds-tabs-label-font-weight: 500;
3825
3835
  --wds-tabs-label-font-weight-active: 600;
3826
- --wds-tabs-label-line-height-small: 18px;
3836
+ --wds-tabs-label-line-height-small: 16px;
3827
3837
  --wds-tabs-padding-horizontal-medium: 16px;
3828
3838
  --wds-tabs-padding-horizontal-small: 8px;
3829
3839
  --wds-tabs-padding-vertical-medium: 7px;
package/odeditor-dark/component.st.css CHANGED
@@ -345,6 +345,8 @@
345
345
  @property st-global(--wds-date-picker-icon-fill-disabled);
346
346
  @property st-global(--wds-divider-fill-color-light-primary);
347
347
  @property st-global(--wds-divider-fill-color-light-secondary);
348
+ @property st-global(--wds-divider-fill-dark);
349
+ @property st-global(--wds-divider-fill-light);
348
350
  @property st-global(--wds-dock-area-fill);
349
351
  @property st-global(--wds-dock-point-fill-active);
350
352
  @property st-global(--wds-dock-point-fill-fill);
@@ -570,6 +572,7 @@
570
572
  @property st-global(--wds-linear-progress-bar-value-gap);
571
573
  @property st-global(--wds-list-item-action-affix-margin);
572
574
  @property st-global(--wds-list-item-action-border-radius);
575
+ @property st-global(--wds-list-item-action-fill);
573
576
  @property st-global(--wds-list-item-action-fill-active);
574
577
  @property st-global(--wds-list-item-action-fill-hover);
575
578
  @property st-global(--wds-list-item-action-gap);
@@ -904,6 +907,8 @@
904
907
  @property st-global(--wds-side-panel-header-padding-left);
905
908
  @property st-global(--wds-side-panel-header-padding-right);
906
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);
907
912
  @property st-global(--wds-side-panel-title-font-letter-spacing);
908
913
  @property st-global(--wds-side-panel-title-font-line-height);
909
914
  @property st-global(--wds-side-panel-title-font-size);
@@ -1680,6 +1685,8 @@
1680
1685
  --wds-date-picker-icon-fill-disabled: #878685;
1681
1686
  --wds-divider-fill-color-light-primary: #454544;
1682
1687
  --wds-divider-fill-color-light-secondary: #454544;
1688
+ --wds-divider-fill-dark: #3A3A3B;
1689
+ --wds-divider-fill-light: #2D2D2E;
1683
1690
  --wds-dock-area-fill: #2D2D2E;
1684
1691
  --wds-dock-point-fill-active: #82B0FF;
1685
1692
  --wds-dock-point-fill-fill: #A09E9D;
@@ -1697,7 +1704,7 @@
1697
1704
  --wds-field-set-gap-large: 16px;
1698
1705
  --wds-field-set-gap-medium: 12px;
1699
1706
  --wds-field-set-gap-small: 8px;
1700
- --wds-field-set-label-fill: #D4D3D2;
1707
+ --wds-field-set-label-fill: #FFFFFF;
1701
1708
  --wds-field-set-label-font-line-height-small: 16px;
1702
1709
  --wds-field-set-label-font-line-height-tiny: 12px;
1703
1710
  --wds-field-set-label-font-size-small: 12px;
@@ -1713,7 +1720,7 @@
1713
1720
  --wds-floating-helper-main-action-padding-top: 16px;
1714
1721
  --wds-floating-helper-padding-horizontal: 32px;
1715
1722
  --wds-floating-helper-padding-vertical: 28px;
1716
- --wds-form-field-label-fill: #D4D3D2;
1723
+ --wds-form-field-label-fill: #FFFFFF;
1717
1724
  --wds-form-field-label-font-size-small: 12px;
1718
1725
  --wds-form-field-label-font-size-tiny: 10px;
1719
1726
  --wds-form-field-label-font-weight: 500;
@@ -1905,6 +1912,7 @@
1905
1912
  --wds-linear-progress-bar-value-gap: 4px;
1906
1913
  --wds-list-item-action-affix-margin: 4px;
1907
1914
  --wds-list-item-action-border-radius: 8px;
1915
+ --wds-list-item-action-fill: rgba(0, 0, 0, 0);
1908
1916
  --wds-list-item-action-fill-active: #2D2D2E;
1909
1917
  --wds-list-item-action-fill-hover: #3A3A3B;
1910
1918
  --wds-list-item-action-gap: 2px;
@@ -1927,11 +1935,11 @@
1927
1935
  --wds-list-item-action-suffix-fill-active: #FFFFFF;
1928
1936
  --wds-list-item-action-title-font-weight: 500;
1929
1937
  --wds-list-item-action-title-font-weight-active: 600;
1930
- --wds-list-item-section-divider-padding-bottom: 0px;
1938
+ --wds-list-item-section-divider-padding-bottom: 8px;
1931
1939
  --wds-list-item-section-divider-padding-horizontal: 0px;
1932
1940
  --wds-list-item-section-divider-padding-top: 8px;
1933
- --wds-list-item-section-fill: #212122;
1934
- --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);
1935
1943
  --wds-list-item-section-font-line-height: 18px;
1936
1944
  --wds-list-item-section-font-size: 14px;
1937
1945
  --wds-list-item-section-font-weight: 600;
@@ -1956,7 +1964,7 @@
1956
1964
  --wds-list-item-select-active-title-screen-small: #FFFFFF;
1957
1965
  --wds-list-item-select-affix-margin: 4px;
1958
1966
  --wds-list-item-select-border-radius: 8px;
1959
- --wds-list-item-select-fill: #212122;
1967
+ --wds-list-item-select-fill: rgba(0, 0, 0, 0);
1960
1968
  --wds-list-item-select-fill-active: #212122;
1961
1969
  --wds-list-item-select-fill-disabled: #212122;
1962
1970
  --wds-list-item-select-fill-hover: #3A3A3B;
@@ -2224,8 +2232,8 @@
2224
2232
  --wds-side-panel-floating-header-padding-vertical: 16px;
2225
2233
  --wds-side-panel-floating-max-height: 576px;
2226
2234
  --wds-side-panel-floating-title-font-family: "Madefor Display", Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
2227
- --wds-side-panel-floating-title-font-line-height: 24px;
2228
- --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;
2229
2237
  --wds-side-panel-footer-background-blur: 0px;
2230
2238
  --wds-side-panel-footer-border-fill: rgba(0, 0, 0, 0);
2231
2239
  --wds-side-panel-footer-border-width: 0px;
@@ -2239,9 +2247,11 @@
2239
2247
  --wds-side-panel-header-padding-left: 16px;
2240
2248
  --wds-side-panel-header-padding-right: 12px;
2241
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;
2242
2252
  --wds-side-panel-title-font-letter-spacing: -0.50;
2243
- --wds-side-panel-title-font-line-height: 24px;
2244
- --wds-side-panel-title-font-size: 16px;
2253
+ --wds-side-panel-title-font-line-height: 18px;
2254
+ --wds-side-panel-title-font-size: 14px;
2245
2255
  --wds-sidebar-clear-button-fill: #5a5d63;
2246
2256
  --wds-sidebar-divider-fill-dark-default: #42454c;
2247
2257
  --wds-sidebar-divider-fill-light-default: #666565;
@@ -2378,10 +2388,10 @@
2378
2388
  --wds-tabs-item-gap-small: 6px;
2379
2389
  --wds-tabs-label-fill: #A8A6A5;
2380
2390
  --wds-tabs-label-fill-active: #FFFFFF;
2381
- --wds-tabs-label-font-size-small: 14px;
2391
+ --wds-tabs-label-font-size-small: 12px;
2382
2392
  --wds-tabs-label-font-weight: 500;
2383
2393
  --wds-tabs-label-font-weight-active: 600;
2384
- --wds-tabs-label-line-height-small: 18px;
2394
+ --wds-tabs-label-line-height-small: 16px;
2385
2395
  --wds-tabs-padding-horizontal-medium: 16px;
2386
2396
  --wds-tabs-padding-horizontal-small: 8px;
2387
2397
  --wds-tabs-padding-vertical-medium: 7px;
package/package.json CHANGED
@@ -1,24 +1,22 @@
1
1
  {
2
2
  "name": "@wix/design-system-tokens",
3
- "version": "1.185.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",
7
7
  "generate": "ts-node src/generate.ts && yarn run lint && yarn run build",
8
8
  "lint": "yarn run eslint ./src --fix",
9
- "test": "jest",
10
- "test:watch": "jest --watch",
9
+ "test": "vitest run",
10
+ "test:watch": "vitest",
11
11
  "ts": "tsc --noEmit"
12
12
  },
13
13
  "devDependencies": {
14
- "@types/jest": "^27.5.2",
15
14
  "eslint": "^9.21.0",
16
15
  "eslint-plugin-jsonc": "^2.18.2",
17
- "jest": "^27.5.1",
18
16
  "style-dictionary": "^3.9.2",
19
- "ts-jest": "^29.2.5",
20
17
  "ts-node": "^10.9.2",
21
- "typescript": "^5.8.3"
18
+ "typescript": "^5.8.3",
19
+ "vitest": "^4.1.3"
22
20
  },
23
21
  "wix": {
24
22
  "artifact": {
@@ -34,5 +32,5 @@
34
32
  "author": "augustinasv@wix.com",
35
33
  "description": "Design system tokens",
36
34
  "packageManager": "yarn@3.5.0",
37
- "falconPackageHash": "508fb53e4fa4374c5ece203b9429d1bddbfecfe08fe8804895a26b05"
35
+ "falconPackageHash": "6cbb741975315b2fab5b4796cd619f2b91726a966d185b4a14cabc46"
38
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);
@@ -1894,6 +1895,8 @@
1894
1895
  --wds-dock-foreground-fill-active: var(--wds-color-fill-standard-primary);
1895
1896
  --wds-dock-foreground-fill: var(--wds-color-fill-standard-secondary-hover);
1896
1897
  --wds-divider-vertical-fill-color-light: var(--wds-color-border-dark-secondary);
1898
+ --wds-divider-fill-light: var(--wds-color-border-dark-secondary);
1899
+ --wds-divider-fill-dark: var(--wds-color-border-dark-primary-active);
1897
1900
  --wds-divider-fill-color-light-secondary: var(--wds-color-border-dark-secondary);
1898
1901
  --wds-divider-fill-color-light-primary: var(--wds-color-border-dark-secondary);
1899
1902
  --wds-divider-fill-color-light: var(--wds-color-border-dark-secondary);
@@ -2059,7 +2062,8 @@
2059
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%);
2060
2063
  --wds-tabs-label-line-height-small: var(--wds-font-line-height-body-tiny);
2061
2064
  --wds-status-toast-text-font-line-height: var(--wds-font-line-height-body-medium);
2062
- --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);
2063
2067
  --wds-side-panel-floating-title-font-line-height: var(--wds-font-line-height-body-medium);
2064
2068
  --wds-segmented-toggle-label-font-line-height-small: var(--wds-font-line-height-body-tiny);
2065
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);
@@ -1893,6 +1894,8 @@
1893
1894
  --wds-dock-foreground-fill-active: var(--wds-color-fill-standard-primary);
1894
1895
  --wds-dock-foreground-fill: var(--wds-color-fill-standard-secondary-hover);
1895
1896
  --wds-divider-vertical-fill-color-light: var(--wds-color-border-dark-secondary);
1897
+ --wds-divider-fill-light: var(--wds-color-border-dark-secondary);
1898
+ --wds-divider-fill-dark: var(--wds-color-border-dark-primary-active);
1896
1899
  --wds-divider-fill-color-light-secondary: var(--wds-color-border-dark-secondary);
1897
1900
  --wds-divider-fill-color-light-primary: var(--wds-color-border-dark-secondary);
1898
1901
  --wds-divider-fill-color-light: var(--wds-color-border-dark-secondary);
@@ -2059,7 +2062,8 @@
2059
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%);
2060
2063
  --wds-tabs-label-line-height-small: var(--wds-font-line-height-body-tiny);
2061
2064
  --wds-status-toast-text-font-line-height: var(--wds-font-line-height-body-medium);
2062
- --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);
2063
2067
  --wds-side-panel-floating-title-font-line-height: var(--wds-font-line-height-body-medium);
2064
2068
  --wds-segmented-toggle-label-font-line-height-small: var(--wds-font-line-height-body-tiny);
2065
2069
  --wds-radio-label-font-line-height-small: var(--wds-font-line-height-body-tiny);
package/studio/all.st.css CHANGED
@@ -846,6 +846,8 @@
846
846
  @property st-global(--wds-divider-fill-color-light);
847
847
  @property st-global(--wds-divider-fill-color-light-primary);
848
848
  @property st-global(--wds-divider-fill-color-light-secondary);
849
+ @property st-global(--wds-divider-fill-dark);
850
+ @property st-global(--wds-divider-fill-light);
849
851
  @property st-global(--wds-divider-gradient-border);
850
852
  @property st-global(--wds-divider-vertical-fill-color-light);
851
853
  @property st-global(--wds-dock-background-fill);
@@ -1619,6 +1621,8 @@
1619
1621
  @property st-global(--wds-side-panel-header-padding-left);
1620
1622
  @property st-global(--wds-side-panel-header-padding-right);
1621
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);
1622
1626
  @property st-global(--wds-side-panel-title-font-letter-spacing);
1623
1627
  @property st-global(--wds-side-panel-title-font-line-height);
1624
1628
  @property st-global(--wds-side-panel-title-font-size);
@@ -2945,6 +2949,8 @@
2945
2949
  --wds-divider-fill-color-light: #e2e3ea;
2946
2950
  --wds-divider-fill-color-light-primary: #e2e3ea;
2947
2951
  --wds-divider-fill-color-light-secondary: #e2e3ea;
2952
+ --wds-divider-fill-dark: #2b2e36;
2953
+ --wds-divider-fill-light: #e2e3ea;
2948
2954
  --wds-divider-gradient-border: linear-gradient(90deg, #e2e3ea 0%, #e2e3ea 16%, #e2e3ea 84%, #e2e3ea 100%);
2949
2955
  --wds-divider-vertical-fill-color-light: #e2e3ea;
2950
2956
  --wds-dock-background-fill: #ebf2ff;
@@ -3718,9 +3724,11 @@
3718
3724
  --wds-side-panel-header-padding-left: 24px;
3719
3725
  --wds-side-panel-header-padding-right: 8px;
3720
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;
3721
3729
  --wds-side-panel-title-font-letter-spacing: 0px;
3722
- --wds-side-panel-title-font-line-height: 24px;
3723
- --wds-side-panel-title-font-size: 18px;
3730
+ --wds-side-panel-title-font-line-height: 28px;
3731
+ --wds-side-panel-title-font-size: 20px;
3724
3732
  --wds-sidebar-clear-button-fill: #5a5d63;
3725
3733
  --wds-sidebar-divider-fill-dark-default: #42454C;
3726
3734
  --wds-sidebar-divider-fill-light-default: #cfd1dc;
@@ -3896,7 +3904,7 @@
3896
3904
  --wds-tabs-item-gap-small: 6px;
3897
3905
  --wds-tabs-label-fill: #131720;
3898
3906
  --wds-tabs-label-fill-active: #116dff;
3899
- --wds-tabs-label-font-size-small: 12px;
3907
+ --wds-tabs-label-font-size-small: 14px;
3900
3908
  --wds-tabs-label-font-weight: 400;
3901
3909
  --wds-tabs-label-font-weight-active: 400;
3902
3910
  --wds-tabs-label-line-height-small: 16px;
package/studio/component.st.css CHANGED
@@ -351,6 +351,8 @@
351
351
  @property st-global(--wds-divider-fill-color-light);
352
352
  @property st-global(--wds-divider-fill-color-light-primary);
353
353
  @property st-global(--wds-divider-fill-color-light-secondary);
354
+ @property st-global(--wds-divider-fill-dark);
355
+ @property st-global(--wds-divider-fill-light);
354
356
  @property st-global(--wds-divider-gradient-border);
355
357
  @property st-global(--wds-divider-vertical-fill-color-light);
356
358
  @property st-global(--wds-dock-background-fill);
@@ -946,6 +948,8 @@
946
948
  @property st-global(--wds-side-panel-header-padding-left);
947
949
  @property st-global(--wds-side-panel-header-padding-right);
948
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);
949
953
  @property st-global(--wds-side-panel-title-font-letter-spacing);
950
954
  @property st-global(--wds-side-panel-title-font-line-height);
951
955
  @property st-global(--wds-side-panel-title-font-size);
@@ -1731,6 +1735,8 @@
1731
1735
  --wds-divider-fill-color-light: #e2e3ea;
1732
1736
  --wds-divider-fill-color-light-primary: #e2e3ea;
1733
1737
  --wds-divider-fill-color-light-secondary: #e2e3ea;
1738
+ --wds-divider-fill-dark: #2b2e36;
1739
+ --wds-divider-fill-light: #e2e3ea;
1734
1740
  --wds-divider-gradient-border: linear-gradient(90deg, #e2e3ea 0%, #e2e3ea 16%, #e2e3ea 84%, #e2e3ea 100%);
1735
1741
  --wds-divider-vertical-fill-color-light: #e2e3ea;
1736
1742
  --wds-dock-background-fill: #ebf2ff;
@@ -2326,9 +2332,11 @@
2326
2332
  --wds-side-panel-header-padding-left: 24px;
2327
2333
  --wds-side-panel-header-padding-right: 8px;
2328
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;
2329
2337
  --wds-side-panel-title-font-letter-spacing: 0px;
2330
- --wds-side-panel-title-font-line-height: 24px;
2331
- --wds-side-panel-title-font-size: 18px;
2338
+ --wds-side-panel-title-font-line-height: 28px;
2339
+ --wds-side-panel-title-font-size: 20px;
2332
2340
  --wds-sidebar-clear-button-fill: #5a5d63;
2333
2341
  --wds-sidebar-divider-fill-dark-default: #42454C;
2334
2342
  --wds-sidebar-divider-fill-light-default: #cfd1dc;
@@ -2460,7 +2468,7 @@
2460
2468
  --wds-tabs-item-gap-small: 6px;
2461
2469
  --wds-tabs-label-fill: #131720;
2462
2470
  --wds-tabs-label-fill-active: #116dff;
2463
- --wds-tabs-label-font-size-small: 12px;
2471
+ --wds-tabs-label-font-size-small: 14px;
2464
2472
  --wds-tabs-label-font-weight: 400;
2465
2473
  --wds-tabs-label-font-weight-active: 400;
2466
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);
@@ -1851,6 +1852,8 @@
1851
1852
  --wds-dock-foreground-fill-hover: var(--wds-color-fill-standard-secondary-active);
1852
1853
  --wds-dock-foreground-fill-active: var(--wds-color-fill-standard-primary);
1853
1854
  --wds-dock-foreground-fill: var(--wds-color-fill-standard-secondary-hover);
1855
+ --wds-divider-fill-light: var(--wds-color-border-dark-secondary);
1856
+ --wds-divider-fill-dark: var(--wds-color-border-dark-primary-active);
1854
1857
  --wds-divider-fill-color-light-primary: var(--wds-color-border-standard-secondary);
1855
1858
  --wds-custom-modal-header-subtitle-font-size: var(--wds-font-size-body-small);
1856
1859
  --wds-custom-modal-footnote-text-font-size: var(--wds-font-size-body-tiny);
@@ -2001,6 +2004,7 @@
2001
2004
  --wds-tabs-label-line-height-small: var(--wds-font-line-height-body-tiny);
2002
2005
  --wds-status-toast-text-font-line-height: var(--wds-font-line-height-body-tiny);
2003
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);
2004
2008
  --wds-side-panel-floating-title-font-line-height: var(--wds-font-line-height-body-medium);
2005
2009
  --wds-segmented-toggle-label-font-line-height-small: var(--wds-font-line-height-body-tiny);
2006
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);
@@ -1850,6 +1851,8 @@
1850
1851
  --wds-dock-foreground-fill-hover: var(--wds-color-fill-standard-secondary-active);
1851
1852
  --wds-dock-foreground-fill-active: var(--wds-color-fill-standard-primary);
1852
1853
  --wds-dock-foreground-fill: var(--wds-color-fill-standard-secondary-hover);
1854
+ --wds-divider-fill-light: var(--wds-color-border-dark-secondary);
1855
+ --wds-divider-fill-dark: var(--wds-color-border-dark-primary-active);
1853
1856
  --wds-divider-fill-color-light-primary: var(--wds-color-border-standard-secondary);
1854
1857
  --wds-custom-modal-header-subtitle-font-size: var(--wds-font-size-body-small);
1855
1858
  --wds-custom-modal-footnote-text-font-size: var(--wds-font-size-body-tiny);
@@ -2001,6 +2004,7 @@
2001
2004
  --wds-tabs-label-line-height-small: var(--wds-font-line-height-body-tiny);
2002
2005
  --wds-status-toast-text-font-line-height: var(--wds-font-line-height-body-tiny);
2003
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);
2004
2008
  --wds-side-panel-floating-title-font-line-height: var(--wds-font-line-height-body-medium);
2005
2009
  --wds-segmented-toggle-label-font-line-height-small: var(--wds-font-line-height-body-tiny);
2006
2010
  --wds-section-helper-text-font-line-height: var(--wds-font-line-height-body-tiny);
package/wixel/all.st.css CHANGED
@@ -826,6 +826,8 @@
826
826
  @property st-global(--wds-divider-fill-color-light);
827
827
  @property st-global(--wds-divider-fill-color-light-primary);
828
828
  @property st-global(--wds-divider-fill-color-light-secondary);
829
+ @property st-global(--wds-divider-fill-dark);
830
+ @property st-global(--wds-divider-fill-light);
829
831
  @property st-global(--wds-divider-gradient-border);
830
832
  @property st-global(--wds-divider-vertical-fill-color-light);
831
833
  @property st-global(--wds-dock-background-fill);
@@ -1574,6 +1576,8 @@
1574
1576
  @property st-global(--wds-side-panel-header-padding-left);
1575
1577
  @property st-global(--wds-side-panel-header-padding-right);
1576
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);
1577
1581
  @property st-global(--wds-side-panel-title-font-letter-spacing);
1578
1582
  @property st-global(--wds-side-panel-title-font-line-height);
1579
1583
  @property st-global(--wds-side-panel-title-font-size);
@@ -2873,6 +2877,8 @@
2873
2877
  --wds-divider-fill-color-light: linear-gradient(90deg, rgba(244, 247, 255, 0.0000) 0%, #dce2ff 16%, #dce2ff 84%, rgba(244, 247, 255, 0.0000) 100%);
2874
2878
  --wds-divider-fill-color-light-primary: #dce2ff;
2875
2879
  --wds-divider-fill-color-light-secondary: rgba(244, 247, 255, 0.0000);
2880
+ --wds-divider-fill-dark: #2b2e36;
2881
+ --wds-divider-fill-light: #e2e3ea;
2876
2882
  --wds-divider-gradient-border: linear-gradient(90deg, rgba(244, 247, 255, 0.0000) 0%, #dce2ff 16%, #dce2ff 84%, rgba(244, 247, 255, 0.0000) 100%);
2877
2883
  --wds-divider-vertical-fill-color-light: linear-gradient(0deg, rgba(244, 247, 255, 0.0000) 0%, #dce2ff 16%, #dce2ff 84%, rgba(244, 247, 255, 0.0000) 100%);
2878
2884
  --wds-dock-background-fill: #eef0ff;
@@ -3621,6 +3627,8 @@
3621
3627
  --wds-side-panel-header-padding-left: 24px;
3622
3628
  --wds-side-panel-header-padding-right: 8px;
3623
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;
3624
3632
  --wds-side-panel-title-font-letter-spacing: -0.50;
3625
3633
  --wds-side-panel-title-font-line-height: 24px;
3626
3634
  --wds-side-panel-title-font-size: 18px;
package/wixel/component.st.css CHANGED
@@ -334,6 +334,8 @@
334
334
  @property st-global(--wds-divider-fill-color-light);
335
335
  @property st-global(--wds-divider-fill-color-light-primary);
336
336
  @property st-global(--wds-divider-fill-color-light-secondary);
337
+ @property st-global(--wds-divider-fill-dark);
338
+ @property st-global(--wds-divider-fill-light);
337
339
  @property st-global(--wds-divider-gradient-border);
338
340
  @property st-global(--wds-divider-vertical-fill-color-light);
339
341
  @property st-global(--wds-dock-background-fill);
@@ -919,6 +921,8 @@
919
921
  @property st-global(--wds-side-panel-header-padding-left);
920
922
  @property st-global(--wds-side-panel-header-padding-right);
921
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);
922
926
  @property st-global(--wds-side-panel-title-font-letter-spacing);
923
927
  @property st-global(--wds-side-panel-title-font-line-height);
924
928
  @property st-global(--wds-side-panel-title-font-size);
@@ -1680,6 +1684,8 @@
1680
1684
  --wds-divider-fill-color-light: linear-gradient(90deg, rgba(244, 247, 255, 0.0000) 0%, #dce2ff 16%, #dce2ff 84%, rgba(244, 247, 255, 0.0000) 100%);
1681
1685
  --wds-divider-fill-color-light-primary: #dce2ff;
1682
1686
  --wds-divider-fill-color-light-secondary: rgba(244, 247, 255, 0.0000);
1687
+ --wds-divider-fill-dark: #2b2e36;
1688
+ --wds-divider-fill-light: #e2e3ea;
1683
1689
  --wds-divider-gradient-border: linear-gradient(90deg, rgba(244, 247, 255, 0.0000) 0%, #dce2ff 16%, #dce2ff 84%, rgba(244, 247, 255, 0.0000) 100%);
1684
1690
  --wds-divider-vertical-fill-color-light: linear-gradient(0deg, rgba(244, 247, 255, 0.0000) 0%, #dce2ff 16%, #dce2ff 84%, rgba(244, 247, 255, 0.0000) 100%);
1685
1691
  --wds-dock-background-fill: #eef0ff;
@@ -2265,6 +2271,8 @@
2265
2271
  --wds-side-panel-header-padding-left: 24px;
2266
2272
  --wds-side-panel-header-padding-right: 8px;
2267
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;
2268
2276
  --wds-side-panel-title-font-letter-spacing: -0.50;
2269
2277
  --wds-side-panel-title-font-line-height: 24px;
2270
2278
  --wds-side-panel-title-font-size: 18px;