@wix/design-system-tokens 1.191.0 → 1.193.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 +12 -0
  2. package/all.css +3 -0
  3. package/all.scss +3 -0
  4. package/all.st.css +6 -0
  5. package/component.st.css +6 -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 +5 -2
  11. package/odeditor-dark/all.scss +5 -2
  12. package/odeditor-dark/all.st.css +7 -1
  13. package/odeditor-dark/component.st.css +7 -1
  14. package/package.json +2 -2
  15. package/studio/all.css +1 -0
  16. package/studio/all.scss +1 -0
  17. package/studio/all.st.css +2 -0
  18. package/studio/component.st.css +2 -0
  19. package/wixel/all.css +1 -0
  20. package/wixel/all.scss +1 -0
  21. package/wixel/all.st.css +2 -0
  22. package/wixel/component.st.css +2 -0
package/CHANGELOG.md CHANGED
@@ -1,3 +1,15 @@
1
+ ## 1.193.0 - 2026-05-13
2
+
3
+ ### Features
4
+
5
+ - feat(Tabs): add label font-size/line-height medium tokens for odeditor [16236](https://github.com/wix-private/wix-design-systems/pull/16236)
6
+
7
+ ## 1.192.0 - 2026-05-08
8
+
9
+ ### Features
10
+
11
+ - feat(Breadcrumbs): add on-grey text-fill-active token and update for odeditor-dark [16226](https://github.com/wix-private/wix-design-systems/pull/16226)
12
+
1
13
  ## 1.191.0 - 2026-05-07
2
14
 
3
15
  ### Features
package/all.css CHANGED
@@ -1592,6 +1592,7 @@
1592
1592
  --wds-tabs-selection-fill-secondary: var(--wds-color-fill-standard-primary);
1593
1593
  --wds-tabs-selection-fill-primary: var(--wds-color-fill-standard-primary);
1594
1594
  --wds-tabs-label-font-size-small: var(--wds-font-size-body-small);
1595
+ --wds-tabs-label-font-size-medium: var(--wds-font-size-body-medium);
1595
1596
  --wds-tabs-label-fill-active: var(--wds-color-text-primary);
1596
1597
  --wds-tabs-label-fill: var(--wds-color-text-standard-primary);
1597
1598
  --wds-table-list-item-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
@@ -2016,6 +2017,7 @@
2016
2017
  --wds-button-border-dark-secondary-disabled: var(--wds-color-border-premium-secondary-disabled);
2017
2018
  --wds-button-border-dark-secondary-active: var(--wds-color-fill-dark-primary);
2018
2019
  --wds-button-border-dark-secondary: var(--wds-color-border-dark-primary);
2020
+ --wds-breadcrumbs-on-grey-text-fill-active: var(--wds-color-text-standard-primary);
2019
2021
  --wds-badge-outline-warning-label-color: var(--wds-color-text-warning);
2020
2022
  --wds-badge-outline-warning-fill: var(--wds-color-fill-warning-tertiary);
2021
2023
  --wds-badge-outline-warning-border-color: var(--wds-color-border-warning-primary);
@@ -2077,6 +2079,7 @@
2077
2079
  --wds-tag-label-font-line-height-small: var(--wds-font-line-height-body-small);
2078
2080
  --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%);
2079
2081
  --wds-tabs-label-line-height-small: var(--wds-font-line-height-body-small);
2082
+ --wds-tabs-label-line-height-medium: var(--wds-font-line-height-body-medium);
2080
2083
  --wds-status-toast-text-font-line-height: var(--wds-font-line-height-body-medium);
2081
2084
  --wds-side-panel-title-font-line-height: var(--wds-font-line-height-heading-3);
2082
2085
  --wds-side-panel-subtitle-font-line-height: var(--wds-font-line-height-body-medium);
package/all.scss CHANGED
@@ -1574,6 +1574,7 @@
1574
1574
  --wds-tabs-selection-fill-secondary: var(--wds-color-fill-standard-primary);
1575
1575
  --wds-tabs-selection-fill-primary: var(--wds-color-fill-standard-primary);
1576
1576
  --wds-tabs-label-font-size-small: var(--wds-font-size-body-small);
1577
+ --wds-tabs-label-font-size-medium: var(--wds-font-size-body-medium);
1577
1578
  --wds-tabs-label-fill-active: var(--wds-color-text-primary);
1578
1579
  --wds-tabs-label-fill: var(--wds-color-text-standard-primary);
1579
1580
  --wds-table-list-item-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
@@ -2016,6 +2017,7 @@
2016
2017
  --wds-button-border-dark-secondary-disabled: var(--wds-color-border-premium-secondary-disabled);
2017
2018
  --wds-button-border-dark-secondary-active: var(--wds-color-fill-dark-primary);
2018
2019
  --wds-button-border-dark-secondary: var(--wds-color-border-dark-primary);
2020
+ --wds-breadcrumbs-on-grey-text-fill-active: var(--wds-color-text-standard-primary);
2019
2021
  --wds-badge-outline-warning-label-color: var(--wds-color-text-warning);
2020
2022
  --wds-badge-outline-warning-fill: var(--wds-color-fill-warning-tertiary);
2021
2023
  --wds-badge-outline-warning-border-color: var(--wds-color-border-warning-primary);
@@ -2077,6 +2079,7 @@
2077
2079
  --wds-tag-label-font-line-height-small: var(--wds-font-line-height-body-small);
2078
2080
  --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%);
2079
2081
  --wds-tabs-label-line-height-small: var(--wds-font-line-height-body-small);
2082
+ --wds-tabs-label-line-height-medium: var(--wds-font-line-height-body-medium);
2080
2083
  --wds-status-toast-text-font-line-height: var(--wds-font-line-height-body-medium);
2081
2084
  --wds-side-panel-title-font-line-height: var(--wds-font-line-height-heading-3);
2082
2085
  --wds-side-panel-subtitle-font-line-height: var(--wds-font-line-height-body-medium);
package/all.st.css CHANGED
@@ -129,6 +129,7 @@
129
129
  @property st-global(--wds-breadcrumbs-font-size-small);
130
130
  @property st-global(--wds-breadcrumbs-on-dark-fill-hover);
131
131
  @property st-global(--wds-breadcrumbs-on-grey-fill-hover);
132
+ @property st-global(--wds-breadcrumbs-on-grey-text-fill-active);
132
133
  @property st-global(--wds-breadcrumbs-on-white-fill-hover);
133
134
  @property st-global(--wds-breadcrumbs-padding-horizontal-large);
134
135
  @property st-global(--wds-breadcrumbs-padding-horizontal-medium);
@@ -1823,9 +1824,11 @@
1823
1824
  @property st-global(--wds-tabs-item-gap-small);
1824
1825
  @property st-global(--wds-tabs-label-fill);
1825
1826
  @property st-global(--wds-tabs-label-fill-active);
1827
+ @property st-global(--wds-tabs-label-font-size-medium);
1826
1828
  @property st-global(--wds-tabs-label-font-size-small);
1827
1829
  @property st-global(--wds-tabs-label-font-weight);
1828
1830
  @property st-global(--wds-tabs-label-font-weight-active);
1831
+ @property st-global(--wds-tabs-label-line-height-medium);
1829
1832
  @property st-global(--wds-tabs-label-line-height-small);
1830
1833
  @property st-global(--wds-tabs-padding-horizontal-medium);
1831
1834
  @property st-global(--wds-tabs-padding-horizontal-small);
@@ -2253,6 +2256,7 @@
2253
2256
  --wds-breadcrumbs-font-size-small: 14px;
2254
2257
  --wds-breadcrumbs-on-dark-fill-hover: rgba(255, 255, 255, .3);
2255
2258
  --wds-breadcrumbs-on-grey-fill-hover: #ffffff;
2259
+ --wds-breadcrumbs-on-grey-text-fill-active: #000624;
2256
2260
  --wds-breadcrumbs-on-white-fill-hover: #e7f0ff;
2257
2261
  --wds-breadcrumbs-padding-horizontal-large: 15px;
2258
2262
  --wds-breadcrumbs-padding-horizontal-medium: 9px;
@@ -3947,9 +3951,11 @@
3947
3951
  --wds-tabs-item-gap-small: 6px;
3948
3952
  --wds-tabs-label-fill: #000624;
3949
3953
  --wds-tabs-label-fill-active: #116dff;
3954
+ --wds-tabs-label-font-size-medium: 16px;
3950
3955
  --wds-tabs-label-font-size-small: 14px;
3951
3956
  --wds-tabs-label-font-weight: 400;
3952
3957
  --wds-tabs-label-font-weight-active: 400;
3958
+ --wds-tabs-label-line-height-medium: 24px;
3953
3959
  --wds-tabs-label-line-height-small: 18px;
3954
3960
  --wds-tabs-padding-horizontal-medium: 18px;
3955
3961
  --wds-tabs-padding-horizontal-small: 12px;
package/component.st.css CHANGED
@@ -95,6 +95,7 @@
95
95
  @property st-global(--wds-breadcrumbs-font-size-small);
96
96
  @property st-global(--wds-breadcrumbs-on-dark-fill-hover);
97
97
  @property st-global(--wds-breadcrumbs-on-grey-fill-hover);
98
+ @property st-global(--wds-breadcrumbs-on-grey-text-fill-active);
98
99
  @property st-global(--wds-breadcrumbs-on-white-fill-hover);
99
100
  @property st-global(--wds-breadcrumbs-padding-horizontal-large);
100
101
  @property st-global(--wds-breadcrumbs-padding-horizontal-medium);
@@ -1102,9 +1103,11 @@
1102
1103
  @property st-global(--wds-tabs-item-gap-small);
1103
1104
  @property st-global(--wds-tabs-label-fill);
1104
1105
  @property st-global(--wds-tabs-label-fill-active);
1106
+ @property st-global(--wds-tabs-label-font-size-medium);
1105
1107
  @property st-global(--wds-tabs-label-font-size-small);
1106
1108
  @property st-global(--wds-tabs-label-font-weight);
1107
1109
  @property st-global(--wds-tabs-label-font-weight-active);
1110
+ @property st-global(--wds-tabs-label-line-height-medium);
1108
1111
  @property st-global(--wds-tabs-label-line-height-small);
1109
1112
  @property st-global(--wds-tabs-padding-horizontal-medium);
1110
1113
  @property st-global(--wds-tabs-padding-horizontal-small);
@@ -1496,6 +1499,7 @@
1496
1499
  --wds-breadcrumbs-font-size-small: 14px;
1497
1500
  --wds-breadcrumbs-on-dark-fill-hover: rgba(255, 255, 255, .3);
1498
1501
  --wds-breadcrumbs-on-grey-fill-hover: #ffffff;
1502
+ --wds-breadcrumbs-on-grey-text-fill-active: #000624;
1499
1503
  --wds-breadcrumbs-on-white-fill-hover: #e7f0ff;
1500
1504
  --wds-breadcrumbs-padding-horizontal-large: 15px;
1501
1505
  --wds-breadcrumbs-padding-horizontal-medium: 9px;
@@ -2503,9 +2507,11 @@
2503
2507
  --wds-tabs-item-gap-small: 6px;
2504
2508
  --wds-tabs-label-fill: #000624;
2505
2509
  --wds-tabs-label-fill-active: #116dff;
2510
+ --wds-tabs-label-font-size-medium: 16px;
2506
2511
  --wds-tabs-label-font-size-small: 14px;
2507
2512
  --wds-tabs-label-font-weight: 400;
2508
2513
  --wds-tabs-label-font-weight-active: 400;
2514
+ --wds-tabs-label-line-height-medium: 24px;
2509
2515
  --wds-tabs-label-line-height-small: 18px;
2510
2516
  --wds-tabs-padding-horizontal-medium: 18px;
2511
2517
  --wds-tabs-padding-horizontal-small: 12px;
package/odeditor/all.css CHANGED
@@ -1647,6 +1647,7 @@
1647
1647
  --wds-thumbnail-border-color: var(--wds-color-border-dark-secondary);
1648
1648
  --wds-tag-label-font-size-small: var(--wds-font-size-body-tiny);
1649
1649
  --wds-tabs-label-font-size-small: var(--wds-font-size-body-small);
1650
+ --wds-tabs-label-font-size-medium: var(--wds-font-size-body-medium);
1650
1651
  --wds-tabs-label-fill-active: var(--wds-color-text-standard-primary);
1651
1652
  --wds-tabs-item-fill-active: var(--wds-color-fill-dark-secondary);
1652
1653
  --wds-table-list-item-fill-hover: var(--wds-color-fill-dark-tertiary-hover);
@@ -1973,6 +1974,7 @@
1973
1974
  --wds-button-border-destructive-secondary-active: var(--wds-color-border-destructive-tertiary-active);
1974
1975
  --wds-button-border-destructive-secondary: var(--wds-color-border-destructive-primary);
1975
1976
  --wds-button-border-dark-secondary: var(--wds-color-border-dark-primary);
1977
+ --wds-breadcrumbs-on-grey-text-fill-active: var(--wds-color-text-standard-primary);
1976
1978
  --wds-badge-outline-urgent-border-color: var(--wds-color-border-urgent-primary);
1977
1979
  --wds-badge-outline-success-border-color: var(--wds-color-border-success-primary);
1978
1980
  --wds-badge-outline-standard-border-color: var(--wds-color-border-standard-primary);
@@ -2020,6 +2022,7 @@
2020
2022
  --wds-thumbnail-subtitle-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
2021
2023
  --wds-tag-label-font-line-height-small: var(--wds-font-line-height-body-tiny);
2022
2024
  --wds-tabs-label-line-height-small: var(--wds-font-line-height-body-small);
2025
+ --wds-tabs-label-line-height-medium: var(--wds-font-line-height-body-medium);
2023
2026
  --wds-subtitle-font-line-height-medium: var(--wds-font-line-height-body-tiny);
2024
2027
  --wds-status-toast-text-font-line-height: var(--wds-font-line-height-body-small);
2025
2028
  --wds-side-panel-title-font-line-height: var(--wds-font-line-height-heading-3);
package/odeditor/all.scss CHANGED
@@ -1628,6 +1628,7 @@
1628
1628
  --wds-thumbnail-border-color: var(--wds-color-border-dark-secondary);
1629
1629
  --wds-tag-label-font-size-small: var(--wds-font-size-body-tiny);
1630
1630
  --wds-tabs-label-font-size-small: var(--wds-font-size-body-small);
1631
+ --wds-tabs-label-font-size-medium: var(--wds-font-size-body-medium);
1631
1632
  --wds-tabs-label-fill-active: var(--wds-color-text-standard-primary);
1632
1633
  --wds-tabs-item-fill-active: var(--wds-color-fill-dark-secondary);
1633
1634
  --wds-table-list-item-fill-hover: var(--wds-color-fill-dark-tertiary-hover);
@@ -1973,6 +1974,7 @@
1973
1974
  --wds-button-border-destructive-secondary-active: var(--wds-color-border-destructive-tertiary-active);
1974
1975
  --wds-button-border-destructive-secondary: var(--wds-color-border-destructive-primary);
1975
1976
  --wds-button-border-dark-secondary: var(--wds-color-border-dark-primary);
1977
+ --wds-breadcrumbs-on-grey-text-fill-active: var(--wds-color-text-standard-primary);
1976
1978
  --wds-badge-outline-urgent-border-color: var(--wds-color-border-urgent-primary);
1977
1979
  --wds-badge-outline-success-border-color: var(--wds-color-border-success-primary);
1978
1980
  --wds-badge-outline-standard-border-color: var(--wds-color-border-standard-primary);
@@ -2020,6 +2022,7 @@
2020
2022
  --wds-thumbnail-subtitle-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
2021
2023
  --wds-tag-label-font-line-height-small: var(--wds-font-line-height-body-tiny);
2022
2024
  --wds-tabs-label-line-height-small: var(--wds-font-line-height-body-small);
2025
+ --wds-tabs-label-line-height-medium: var(--wds-font-line-height-body-medium);
2023
2026
  --wds-subtitle-font-line-height-medium: var(--wds-font-line-height-body-tiny);
2024
2027
  --wds-status-toast-text-font-line-height: var(--wds-font-line-height-body-small);
2025
2028
  --wds-side-panel-title-font-line-height: var(--wds-font-line-height-heading-3);
package/odeditor/all.st.css CHANGED
@@ -130,6 +130,7 @@
130
130
  @property st-global(--wds-breadcrumbs-font-size-small);
131
131
  @property st-global(--wds-breadcrumbs-on-dark-fill-hover);
132
132
  @property st-global(--wds-breadcrumbs-on-grey-fill-hover);
133
+ @property st-global(--wds-breadcrumbs-on-grey-text-fill-active);
133
134
  @property st-global(--wds-breadcrumbs-on-white-fill-hover);
134
135
  @property st-global(--wds-breadcrumbs-padding-horizontal-large);
135
136
  @property st-global(--wds-breadcrumbs-padding-horizontal-medium);
@@ -1771,9 +1772,11 @@
1771
1772
  @property st-global(--wds-tabs-item-gap-small);
1772
1773
  @property st-global(--wds-tabs-label-fill);
1773
1774
  @property st-global(--wds-tabs-label-fill-active);
1775
+ @property st-global(--wds-tabs-label-font-size-medium);
1774
1776
  @property st-global(--wds-tabs-label-font-size-small);
1775
1777
  @property st-global(--wds-tabs-label-font-weight);
1776
1778
  @property st-global(--wds-tabs-label-font-weight-active);
1779
+ @property st-global(--wds-tabs-label-line-height-medium);
1777
1780
  @property st-global(--wds-tabs-label-line-height-small);
1778
1781
  @property st-global(--wds-tabs-padding-horizontal-medium);
1779
1782
  @property st-global(--wds-tabs-padding-horizontal-small);
@@ -2195,6 +2198,7 @@
2195
2198
  --wds-breadcrumbs-font-size-small: 12px;
2196
2199
  --wds-breadcrumbs-on-dark-fill-hover: rgba(255, 255, 255, .3);
2197
2200
  --wds-breadcrumbs-on-grey-fill-hover: #ffffff;
2201
+ --wds-breadcrumbs-on-grey-text-fill-active: #151414;
2198
2202
  --wds-breadcrumbs-on-white-fill-hover: #f0efef;
2199
2203
  --wds-breadcrumbs-padding-horizontal-large: 16px;
2200
2204
  --wds-breadcrumbs-padding-horizontal-medium: 8px;
@@ -3836,9 +3840,11 @@
3836
3840
  --wds-tabs-item-gap-small: 6px;
3837
3841
  --wds-tabs-label-fill: #525150;
3838
3842
  --wds-tabs-label-fill-active: #151414;
3843
+ --wds-tabs-label-font-size-medium: 16px;
3839
3844
  --wds-tabs-label-font-size-small: 14px;
3840
3845
  --wds-tabs-label-font-weight: 500;
3841
3846
  --wds-tabs-label-font-weight-active: 600;
3847
+ --wds-tabs-label-line-height-medium: 24px;
3842
3848
  --wds-tabs-label-line-height-small: 18px;
3843
3849
  --wds-tabs-padding-horizontal-medium: 16px;
3844
3850
  --wds-tabs-padding-horizontal-small: 8px;
package/odeditor/component.st.css CHANGED
@@ -94,6 +94,7 @@
94
94
  @property st-global(--wds-breadcrumbs-font-size-small);
95
95
  @property st-global(--wds-breadcrumbs-on-dark-fill-hover);
96
96
  @property st-global(--wds-breadcrumbs-on-grey-fill-hover);
97
+ @property st-global(--wds-breadcrumbs-on-grey-text-fill-active);
97
98
  @property st-global(--wds-breadcrumbs-on-white-fill-hover);
98
99
  @property st-global(--wds-breadcrumbs-padding-horizontal-large);
99
100
  @property st-global(--wds-breadcrumbs-padding-horizontal-medium);
@@ -1053,9 +1054,11 @@
1053
1054
  @property st-global(--wds-tabs-item-gap-small);
1054
1055
  @property st-global(--wds-tabs-label-fill);
1055
1056
  @property st-global(--wds-tabs-label-fill-active);
1057
+ @property st-global(--wds-tabs-label-font-size-medium);
1056
1058
  @property st-global(--wds-tabs-label-font-size-small);
1057
1059
  @property st-global(--wds-tabs-label-font-weight);
1058
1060
  @property st-global(--wds-tabs-label-font-weight-active);
1061
+ @property st-global(--wds-tabs-label-line-height-medium);
1059
1062
  @property st-global(--wds-tabs-label-line-height-small);
1060
1063
  @property st-global(--wds-tabs-padding-horizontal-medium);
1061
1064
  @property st-global(--wds-tabs-padding-horizontal-small);
@@ -1439,6 +1442,7 @@
1439
1442
  --wds-breadcrumbs-font-size-small: 12px;
1440
1443
  --wds-breadcrumbs-on-dark-fill-hover: rgba(255, 255, 255, .3);
1441
1444
  --wds-breadcrumbs-on-grey-fill-hover: #ffffff;
1445
+ --wds-breadcrumbs-on-grey-text-fill-active: #151414;
1442
1446
  --wds-breadcrumbs-on-white-fill-hover: #f0efef;
1443
1447
  --wds-breadcrumbs-padding-horizontal-large: 16px;
1444
1448
  --wds-breadcrumbs-padding-horizontal-medium: 8px;
@@ -2398,9 +2402,11 @@
2398
2402
  --wds-tabs-item-gap-small: 6px;
2399
2403
  --wds-tabs-label-fill: #525150;
2400
2404
  --wds-tabs-label-fill-active: #151414;
2405
+ --wds-tabs-label-font-size-medium: 16px;
2401
2406
  --wds-tabs-label-font-size-small: 14px;
2402
2407
  --wds-tabs-label-font-weight: 500;
2403
2408
  --wds-tabs-label-font-weight-active: 600;
2409
+ --wds-tabs-label-line-height-medium: 24px;
2404
2410
  --wds-tabs-label-line-height-small: 18px;
2405
2411
  --wds-tabs-padding-horizontal-medium: 16px;
2406
2412
  --wds-tabs-padding-horizontal-small: 8px;
package/odeditor-dark/all.css CHANGED
@@ -1508,7 +1508,7 @@
1508
1508
  --wds-button-border-dark-secondary-hover: var(--wds-color-black-550);
1509
1509
  --wds-button-border-dark-secondary-disabled: var(--wds-color-black-700);
1510
1510
  --wds-button-border-dark-secondary-active: var(--wds-color-black-550);
1511
- --wds-breadcrumbs-text-weight-selected: var(--wds-font-weight-bold);
1511
+ --wds-breadcrumbs-text-weight-selected: var(--wds-font-weight-semi-bold);
1512
1512
  --wds-breadcrumbs-text-weight-default: var(--wds-font-weight-regular);
1513
1513
  --wds-breadcrumbs-text-line-height-small: var(--wds-space-400);
1514
1514
  --wds-breadcrumbs-padding-vertical-small: var(--wds-space-50);
@@ -1521,7 +1521,7 @@
1521
1521
  --wds-breadcrumbs-on-grey-fill-hover: var(--wds-color-white);
1522
1522
  --wds-breadcrumbs-on-dark-fill-hover: var(--wds-color-white-transparent-30);
1523
1523
  --wds-breadcrumbs-font-size-small: var(--wds-font-size-200);
1524
- --wds-breadcrumbs-border-radius: var(--wds-border-radius-100);
1524
+ --wds-breadcrumbs-border-radius: var(--wds-border-radius-300);
1525
1525
  --wds-badge-size-tiny: var(--wds-space-500);
1526
1526
  --wds-badge-size-small: var(--wds-space-600);
1527
1527
  --wds-badge-size-medium: var(--wds-space-700);
@@ -1673,6 +1673,7 @@
1673
1673
  --wds-thumbnail-border-color: var(--wds-color-border-dark-secondary);
1674
1674
  --wds-tag-label-font-size-small: var(--wds-font-size-body-tiny);
1675
1675
  --wds-tabs-label-font-size-small: var(--wds-font-size-body-tiny);
1676
+ --wds-tabs-label-font-size-medium: var(--wds-font-size-body-small);
1676
1677
  --wds-tabs-label-fill-active: var(--wds-color-text-standard-primary);
1677
1678
  --wds-tabs-item-fill-active: var(--wds-color-fill-dark-secondary);
1678
1679
  --wds-table-list-item-fill-hover: var(--wds-color-fill-dark-tertiary-hover);
@@ -1982,6 +1983,7 @@
1982
1983
  --wds-button-border-destructive-secondary-active: var(--wds-color-border-destructive-tertiary-active);
1983
1984
  --wds-button-border-destructive-secondary: var(--wds-color-border-destructive-primary);
1984
1985
  --wds-button-border-dark-secondary: var(--wds-color-border-dark-primary);
1986
+ --wds-breadcrumbs-on-grey-text-fill-active: var(--wds-color-text-primary);
1985
1987
  --wds-badge-outline-urgent-border-color: var(--wds-color-border-urgent-primary);
1986
1988
  --wds-badge-outline-success-border-color: var(--wds-color-border-success-primary);
1987
1989
  --wds-badge-outline-standard-border-color: var(--wds-color-border-standard-primary);
@@ -2030,6 +2032,7 @@
2030
2032
  --wds-thumbnail-subtitle-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
2031
2033
  --wds-tag-label-font-line-height-small: var(--wds-font-line-height-body-tiny);
2032
2034
  --wds-tabs-label-line-height-small: var(--wds-font-line-height-body-tiny);
2035
+ --wds-tabs-label-line-height-medium: var(--wds-font-line-height-body-small);
2033
2036
  --wds-subtitle-font-line-height-medium: var(--wds-font-line-height-body-tiny);
2034
2037
  --wds-status-toast-text-font-line-height: var(--wds-font-line-height-body-small);
2035
2038
  --wds-side-panel-title-font-line-height: var(--wds-font-line-height-body-small);
package/odeditor-dark/all.scss CHANGED
@@ -1497,7 +1497,7 @@
1497
1497
  --wds-button-border-dark-secondary-hover: var(--wds-color-black-550);
1498
1498
  --wds-button-border-dark-secondary-disabled: var(--wds-color-black-700);
1499
1499
  --wds-button-border-dark-secondary-active: var(--wds-color-black-550);
1500
- --wds-breadcrumbs-text-weight-selected: var(--wds-font-weight-bold);
1500
+ --wds-breadcrumbs-text-weight-selected: var(--wds-font-weight-semi-bold);
1501
1501
  --wds-breadcrumbs-text-weight-default: var(--wds-font-weight-regular);
1502
1502
  --wds-breadcrumbs-text-line-height-small: var(--wds-space-400);
1503
1503
  --wds-breadcrumbs-padding-vertical-small: var(--wds-space-50);
@@ -1510,7 +1510,7 @@
1510
1510
  --wds-breadcrumbs-on-grey-fill-hover: var(--wds-color-white);
1511
1511
  --wds-breadcrumbs-on-dark-fill-hover: var(--wds-color-white-transparent-30);
1512
1512
  --wds-breadcrumbs-font-size-small: var(--wds-font-size-200);
1513
- --wds-breadcrumbs-border-radius: var(--wds-border-radius-100);
1513
+ --wds-breadcrumbs-border-radius: var(--wds-border-radius-300);
1514
1514
  --wds-border-width-varied-secondary: var(--wds-border-width-100);
1515
1515
  --wds-border-width-varied: var(--wds-border-width-0);
1516
1516
  --wds-border-width-default: var(--wds-border-width-100);
@@ -1658,6 +1658,7 @@
1658
1658
  --wds-thumbnail-border-color: var(--wds-color-border-dark-secondary);
1659
1659
  --wds-tag-label-font-size-small: var(--wds-font-size-body-tiny);
1660
1660
  --wds-tabs-label-font-size-small: var(--wds-font-size-body-tiny);
1661
+ --wds-tabs-label-font-size-medium: var(--wds-font-size-body-small);
1661
1662
  --wds-tabs-label-fill-active: var(--wds-color-text-standard-primary);
1662
1663
  --wds-tabs-item-fill-active: var(--wds-color-fill-dark-secondary);
1663
1664
  --wds-table-list-item-fill-hover: var(--wds-color-fill-dark-tertiary-hover);
@@ -1982,6 +1983,7 @@
1982
1983
  --wds-button-border-destructive-secondary-active: var(--wds-color-border-destructive-tertiary-active);
1983
1984
  --wds-button-border-destructive-secondary: var(--wds-color-border-destructive-primary);
1984
1985
  --wds-button-border-dark-secondary: var(--wds-color-border-dark-primary);
1986
+ --wds-breadcrumbs-on-grey-text-fill-active: var(--wds-color-text-primary);
1985
1987
  --wds-badge-outline-urgent-border-color: var(--wds-color-border-urgent-primary);
1986
1988
  --wds-badge-outline-success-border-color: var(--wds-color-border-success-primary);
1987
1989
  --wds-badge-outline-standard-border-color: var(--wds-color-border-standard-primary);
@@ -2030,6 +2032,7 @@
2030
2032
  --wds-thumbnail-subtitle-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
2031
2033
  --wds-tag-label-font-line-height-small: var(--wds-font-line-height-body-tiny);
2032
2034
  --wds-tabs-label-line-height-small: var(--wds-font-line-height-body-tiny);
2035
+ --wds-tabs-label-line-height-medium: var(--wds-font-line-height-body-small);
2033
2036
  --wds-subtitle-font-line-height-medium: var(--wds-font-line-height-body-tiny);
2034
2037
  --wds-status-toast-text-font-line-height: var(--wds-font-line-height-body-small);
2035
2038
  --wds-side-panel-title-font-line-height: var(--wds-font-line-height-body-small);
package/odeditor-dark/all.st.css CHANGED
@@ -131,6 +131,7 @@
131
131
  @property st-global(--wds-breadcrumbs-font-size-small);
132
132
  @property st-global(--wds-breadcrumbs-on-dark-fill-hover);
133
133
  @property st-global(--wds-breadcrumbs-on-grey-fill-hover);
134
+ @property st-global(--wds-breadcrumbs-on-grey-text-fill-active);
134
135
  @property st-global(--wds-breadcrumbs-on-white-fill-hover);
135
136
  @property st-global(--wds-breadcrumbs-padding-horizontal-large);
136
137
  @property st-global(--wds-breadcrumbs-padding-horizontal-medium);
@@ -1781,9 +1782,11 @@
1781
1782
  @property st-global(--wds-tabs-item-gap-small);
1782
1783
  @property st-global(--wds-tabs-label-fill);
1783
1784
  @property st-global(--wds-tabs-label-fill-active);
1785
+ @property st-global(--wds-tabs-label-font-size-medium);
1784
1786
  @property st-global(--wds-tabs-label-font-size-small);
1785
1787
  @property st-global(--wds-tabs-label-font-weight);
1786
1788
  @property st-global(--wds-tabs-label-font-weight-active);
1789
+ @property st-global(--wds-tabs-label-line-height-medium);
1787
1790
  @property st-global(--wds-tabs-label-line-height-small);
1788
1791
  @property st-global(--wds-tabs-padding-horizontal-medium);
1789
1792
  @property st-global(--wds-tabs-padding-horizontal-small);
@@ -2202,10 +2205,11 @@
2202
2205
  --wds-border-width-none: 0px;
2203
2206
  --wds-border-width-varied: 0px;
2204
2207
  --wds-border-width-varied-secondary: 1px;
2205
- --wds-breadcrumbs-border-radius: 2px;
2208
+ --wds-breadcrumbs-border-radius: 6px;
2206
2209
  --wds-breadcrumbs-font-size-small: 12px;
2207
2210
  --wds-breadcrumbs-on-dark-fill-hover: rgba(0, 0, 0, .3);
2208
2211
  --wds-breadcrumbs-on-grey-fill-hover: #212122;
2212
+ --wds-breadcrumbs-on-grey-text-fill-active: #82B0FF;
2209
2213
  --wds-breadcrumbs-on-white-fill-hover: #3A3A3B;
2210
2214
  --wds-breadcrumbs-padding-horizontal-large: 16px;
2211
2215
  --wds-breadcrumbs-padding-horizontal-medium: 8px;
@@ -3856,9 +3860,11 @@
3856
3860
  --wds-tabs-item-gap-small: 6px;
3857
3861
  --wds-tabs-label-fill: #A8A6A5;
3858
3862
  --wds-tabs-label-fill-active: #FFFFFF;
3863
+ --wds-tabs-label-font-size-medium: 14px;
3859
3864
  --wds-tabs-label-font-size-small: 12px;
3860
3865
  --wds-tabs-label-font-weight: 500;
3861
3866
  --wds-tabs-label-font-weight-active: 600;
3867
+ --wds-tabs-label-line-height-medium: 18px;
3862
3868
  --wds-tabs-label-line-height-small: 16px;
3863
3869
  --wds-tabs-padding-horizontal-medium: 16px;
3864
3870
  --wds-tabs-padding-horizontal-small: 8px;
package/odeditor-dark/component.st.css CHANGED
@@ -94,6 +94,7 @@
94
94
  @property st-global(--wds-breadcrumbs-font-size-small);
95
95
  @property st-global(--wds-breadcrumbs-on-dark-fill-hover);
96
96
  @property st-global(--wds-breadcrumbs-on-grey-fill-hover);
97
+ @property st-global(--wds-breadcrumbs-on-grey-text-fill-active);
97
98
  @property st-global(--wds-breadcrumbs-on-white-fill-hover);
98
99
  @property st-global(--wds-breadcrumbs-padding-horizontal-large);
99
100
  @property st-global(--wds-breadcrumbs-padding-horizontal-medium);
@@ -1061,9 +1062,11 @@
1061
1062
  @property st-global(--wds-tabs-item-gap-small);
1062
1063
  @property st-global(--wds-tabs-label-fill);
1063
1064
  @property st-global(--wds-tabs-label-fill-active);
1065
+ @property st-global(--wds-tabs-label-font-size-medium);
1064
1066
  @property st-global(--wds-tabs-label-font-size-small);
1065
1067
  @property st-global(--wds-tabs-label-font-weight);
1066
1068
  @property st-global(--wds-tabs-label-font-weight-active);
1069
+ @property st-global(--wds-tabs-label-line-height-medium);
1067
1070
  @property st-global(--wds-tabs-label-line-height-small);
1068
1071
  @property st-global(--wds-tabs-padding-horizontal-medium);
1069
1072
  @property st-global(--wds-tabs-padding-horizontal-small);
@@ -1443,10 +1446,11 @@
1443
1446
  --wds-badge-size-medium: 28px;
1444
1447
  --wds-badge-size-small: 24px;
1445
1448
  --wds-badge-size-tiny: 20px;
1446
- --wds-breadcrumbs-border-radius: 2px;
1449
+ --wds-breadcrumbs-border-radius: 6px;
1447
1450
  --wds-breadcrumbs-font-size-small: 12px;
1448
1451
  --wds-breadcrumbs-on-dark-fill-hover: rgba(0, 0, 0, .3);
1449
1452
  --wds-breadcrumbs-on-grey-fill-hover: #212122;
1453
+ --wds-breadcrumbs-on-grey-text-fill-active: #82B0FF;
1450
1454
  --wds-breadcrumbs-on-white-fill-hover: #3A3A3B;
1451
1455
  --wds-breadcrumbs-padding-horizontal-large: 16px;
1452
1456
  --wds-breadcrumbs-padding-horizontal-medium: 8px;
@@ -2414,9 +2418,11 @@
2414
2418
  --wds-tabs-item-gap-small: 6px;
2415
2419
  --wds-tabs-label-fill: #A8A6A5;
2416
2420
  --wds-tabs-label-fill-active: #FFFFFF;
2421
+ --wds-tabs-label-font-size-medium: 14px;
2417
2422
  --wds-tabs-label-font-size-small: 12px;
2418
2423
  --wds-tabs-label-font-weight: 500;
2419
2424
  --wds-tabs-label-font-weight-active: 600;
2425
+ --wds-tabs-label-line-height-medium: 18px;
2420
2426
  --wds-tabs-label-line-height-small: 16px;
2421
2427
  --wds-tabs-padding-horizontal-medium: 16px;
2422
2428
  --wds-tabs-padding-horizontal-small: 8px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wix/design-system-tokens",
3
- "version": "1.191.0",
3
+ "version": "1.193.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": "6c750bf4055b98873a39b65147b8028e59bf57168dfa3de311d9852f"
35
+ "falconPackageHash": "5d1c8e8df805efb66ef084e9a5fbaf8c4b5bf42e951ca46bef54de4f"
36
36
  }
package/studio/all.css CHANGED
@@ -2008,6 +2008,7 @@
2008
2008
  --wds-button-border-dark-secondary-disabled: var(--wds-color-border-premium-secondary-disabled);
2009
2009
  --wds-button-border-dark-secondary-active: var(--wds-color-border-dark-secondary);
2010
2010
  --wds-button-border-dark-secondary: var(--wds-color-border-dark-primary);
2011
+ --wds-breadcrumbs-on-grey-text-fill-active: var(--wds-color-text-standard-primary);
2011
2012
  --wds-badge-outline-warning-label-color: var(--wds-color-text-warning);
2012
2013
  --wds-badge-outline-warning-fill: var(--wds-color-fill-warning-tertiary);
2013
2014
  --wds-badge-outline-warning-border-color: var(--wds-color-border-warning-primary);
package/studio/all.scss CHANGED
@@ -2008,6 +2008,7 @@
2008
2008
  --wds-button-border-dark-secondary-disabled: var(--wds-color-border-premium-secondary-disabled);
2009
2009
  --wds-button-border-dark-secondary-active: var(--wds-color-border-dark-secondary);
2010
2010
  --wds-button-border-dark-secondary: var(--wds-color-border-dark-primary);
2011
+ --wds-breadcrumbs-on-grey-text-fill-active: var(--wds-color-text-standard-primary);
2011
2012
  --wds-badge-outline-warning-label-color: var(--wds-color-text-warning);
2012
2013
  --wds-badge-outline-warning-fill: var(--wds-color-fill-warning-tertiary);
2013
2014
  --wds-badge-outline-warning-border-color: var(--wds-color-border-warning-primary);
package/studio/all.st.css CHANGED
@@ -129,6 +129,7 @@
129
129
  @property st-global(--wds-breadcrumbs-font-size-small);
130
130
  @property st-global(--wds-breadcrumbs-on-dark-fill-hover);
131
131
  @property st-global(--wds-breadcrumbs-on-grey-fill-hover);
132
+ @property st-global(--wds-breadcrumbs-on-grey-text-fill-active);
132
133
  @property st-global(--wds-breadcrumbs-on-white-fill-hover);
133
134
  @property st-global(--wds-breadcrumbs-padding-horizontal-large);
134
135
  @property st-global(--wds-breadcrumbs-padding-horizontal-medium);
@@ -2240,6 +2241,7 @@
2240
2241
  --wds-breadcrumbs-font-size-small: 12px;
2241
2242
  --wds-breadcrumbs-on-dark-fill-hover: rgba(255, 255, 255, .3);
2242
2243
  --wds-breadcrumbs-on-grey-fill-hover: #ffffff;
2244
+ --wds-breadcrumbs-on-grey-text-fill-active: #131720;
2243
2245
  --wds-breadcrumbs-on-white-fill-hover: #edeef2;
2244
2246
  --wds-breadcrumbs-padding-horizontal-large: 16px;
2245
2247
  --wds-breadcrumbs-padding-horizontal-medium: 8px;
package/studio/component.st.css CHANGED
@@ -95,6 +95,7 @@
95
95
  @property st-global(--wds-breadcrumbs-font-size-small);
96
96
  @property st-global(--wds-breadcrumbs-on-dark-fill-hover);
97
97
  @property st-global(--wds-breadcrumbs-on-grey-fill-hover);
98
+ @property st-global(--wds-breadcrumbs-on-grey-text-fill-active);
98
99
  @property st-global(--wds-breadcrumbs-on-white-fill-hover);
99
100
  @property st-global(--wds-breadcrumbs-padding-horizontal-large);
100
101
  @property st-global(--wds-breadcrumbs-padding-horizontal-medium);
@@ -1487,6 +1488,7 @@
1487
1488
  --wds-breadcrumbs-font-size-small: 12px;
1488
1489
  --wds-breadcrumbs-on-dark-fill-hover: rgba(255, 255, 255, .3);
1489
1490
  --wds-breadcrumbs-on-grey-fill-hover: #ffffff;
1491
+ --wds-breadcrumbs-on-grey-text-fill-active: #131720;
1490
1492
  --wds-breadcrumbs-on-white-fill-hover: #edeef2;
1491
1493
  --wds-breadcrumbs-padding-horizontal-large: 16px;
1492
1494
  --wds-breadcrumbs-padding-horizontal-medium: 8px;
package/wixel/all.css CHANGED
@@ -1950,6 +1950,7 @@
1950
1950
  --wds-button-border-dark-secondary-disabled: var(--wds-color-border-premium-secondary-disabled);
1951
1951
  --wds-button-border-dark-secondary-active: var(--wds-color-fill-dark-primary);
1952
1952
  --wds-button-border-dark-secondary: var(--wds-color-border-dark-primary);
1953
+ --wds-breadcrumbs-on-grey-text-fill-active: var(--wds-color-text-standard-primary);
1953
1954
  --wds-badge-outline-warning-label-color: var(--wds-color-text-warning);
1954
1955
  --wds-badge-outline-warning-fill: var(--wds-color-fill-warning-tertiary);
1955
1956
  --wds-badge-outline-warning-border-color: var(--wds-color-border-warning-primary);
package/wixel/all.scss CHANGED
@@ -1950,6 +1950,7 @@
1950
1950
  --wds-button-border-dark-secondary-disabled: var(--wds-color-border-premium-secondary-disabled);
1951
1951
  --wds-button-border-dark-secondary-active: var(--wds-color-fill-dark-primary);
1952
1952
  --wds-button-border-dark-secondary: var(--wds-color-border-dark-primary);
1953
+ --wds-breadcrumbs-on-grey-text-fill-active: var(--wds-color-text-standard-primary);
1953
1954
  --wds-badge-outline-warning-label-color: var(--wds-color-text-warning);
1954
1955
  --wds-badge-outline-warning-fill: var(--wds-color-fill-warning-tertiary);
1955
1956
  --wds-badge-outline-warning-border-color: var(--wds-color-border-warning-primary);
package/wixel/all.st.css CHANGED
@@ -129,6 +129,7 @@
129
129
  @property st-global(--wds-breadcrumbs-font-size-small);
130
130
  @property st-global(--wds-breadcrumbs-on-dark-fill-hover);
131
131
  @property st-global(--wds-breadcrumbs-on-grey-fill-hover);
132
+ @property st-global(--wds-breadcrumbs-on-grey-text-fill-active);
132
133
  @property st-global(--wds-breadcrumbs-on-white-fill-hover);
133
134
  @property st-global(--wds-breadcrumbs-padding-horizontal-large);
134
135
  @property st-global(--wds-breadcrumbs-padding-horizontal-medium);
@@ -2188,6 +2189,7 @@
2188
2189
  --wds-breadcrumbs-font-size-small: 12px;
2189
2190
  --wds-breadcrumbs-on-dark-fill-hover: rgba(255, 255, 255, 0.3000);
2190
2191
  --wds-breadcrumbs-on-grey-fill-hover: #ffffff;
2192
+ --wds-breadcrumbs-on-grey-text-fill-active: #000624;
2191
2193
  --wds-breadcrumbs-on-white-fill-hover: #edeef2;
2192
2194
  --wds-breadcrumbs-padding-horizontal-large: 16px;
2193
2195
  --wds-breadcrumbs-padding-horizontal-medium: 8px;
package/wixel/component.st.css CHANGED
@@ -95,6 +95,7 @@
95
95
  @property st-global(--wds-breadcrumbs-font-size-small);
96
96
  @property st-global(--wds-breadcrumbs-on-dark-fill-hover);
97
97
  @property st-global(--wds-breadcrumbs-on-grey-fill-hover);
98
+ @property st-global(--wds-breadcrumbs-on-grey-text-fill-active);
98
99
  @property st-global(--wds-breadcrumbs-on-white-fill-hover);
99
100
  @property st-global(--wds-breadcrumbs-padding-horizontal-large);
100
101
  @property st-global(--wds-breadcrumbs-padding-horizontal-medium);
@@ -1453,6 +1454,7 @@
1453
1454
  --wds-breadcrumbs-font-size-small: 12px;
1454
1455
  --wds-breadcrumbs-on-dark-fill-hover: rgba(255, 255, 255, 0.3000);
1455
1456
  --wds-breadcrumbs-on-grey-fill-hover: #ffffff;
1457
+ --wds-breadcrumbs-on-grey-text-fill-active: #000624;
1456
1458
  --wds-breadcrumbs-on-white-fill-hover: #edeef2;
1457
1459
  --wds-breadcrumbs-padding-horizontal-large: 16px;
1458
1460
  --wds-breadcrumbs-padding-horizontal-medium: 8px;