@wix/design-system-tokens 1.161.0 → 1.161.2

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 (27) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/all.css +6 -0
  3. package/all.scss +6 -0
  4. package/all.st.css +12 -0
  5. package/component.st.css +8 -0
  6. package/foundation.st.css +4 -0
  7. package/odeditor/all.css +9 -5
  8. package/odeditor/all.scss +9 -5
  9. package/odeditor/all.st.css +20 -12
  10. package/odeditor/component.st.css +16 -8
  11. package/odeditor/semantic.st.css +4 -4
  12. package/odeditor-dark/all.css +114 -109
  13. package/odeditor-dark/all.scss +114 -109
  14. package/odeditor-dark/all.st.css +1014 -1004
  15. package/odeditor-dark/component.st.css +585 -577
  16. package/odeditor-dark/foundation.st.css +104 -102
  17. package/odeditor-dark/semantic.st.css +325 -325
  18. package/package.json +2 -2
  19. package/studio/all.css +13 -7
  20. package/studio/all.scss +13 -7
  21. package/studio/all.st.css +19 -7
  22. package/studio/component.st.css +15 -7
  23. package/studio/foundation.st.css +4 -0
  24. package/wixel/all.css +4 -0
  25. package/wixel/all.scss +4 -0
  26. package/wixel/all.st.css +8 -0
  27. package/wixel/component.st.css +8 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wix/design-system-tokens",
3
- "version": "1.161.0",
3
+ "version": "1.161.2",
4
4
  "scripts": {
5
5
  "build": "cp -r tokens/* .",
6
6
  "figma-to-dictionary": "ts-node src/scripts/figma-to-dictionary.ts",
@@ -34,5 +34,5 @@
34
34
  "author": "augustinasv@wix.com",
35
35
  "description": "Design system tokens",
36
36
  "packageManager": "yarn@3.5.0",
37
- "falconPackageHash": "de2d6c2a9b81b68207a95cbeb989e502ea5755d02f7f8851beb96fd2"
37
+ "falconPackageHash": "6fc0a6a561071f001d41565b4420cfc6e08563ba86ab79e55f58747e"
38
38
  }
package/studio/all.css CHANGED
@@ -239,6 +239,8 @@
239
239
  --wds-color-black-200-transparent-70: rgba(43, 46, 54, .7);
240
240
  --wds-color-black-200-transparent-60: rgba(43, 46, 54, .6);
241
241
  --wds-color-black-200-transparent-50: rgba(43, 46, 54, .5);
242
+ --wds-color-black-200-transparent-20: rgba(43, 46, 54, .2);
243
+ --wds-color-black-200-transparent-18: rgba(43, 46, 54, 0.18);
242
244
  --wds-color-black-200-transparent-0: rgba(43, 46, 54, 0);
243
245
  --wds-color-black-100-transparent-70: rgba(19, 23, 32, .7);
244
246
  --wds-color-black-100-transparent-50: rgba(19, 23, 32, .5);
@@ -946,6 +948,7 @@
946
948
  --wds-social-preview-content-padding-horizontal: var(--wds-space-300);
947
949
  --wds-social-post-preview-content-padding-vertical: var(--wds-space-300);
948
950
  --wds-social-post-preview-content-padding-horizontal: var(--wds-space-300);
951
+ --wds-slider-track-color-disabled: var(--wds-color-black-500);
949
952
  --wds-slider-track-border-radius-transparent: var(--wds-border-radius-full);
950
953
  --wds-slider-track-border-border-radius: var(--wds-border-radius-full);
951
954
  --wds-slider-slider-mark-size: var(--wds-space-200);
@@ -1261,14 +1264,17 @@
1261
1264
  --wds-image-border-radius-default: var(--wds-border-radius-200);
1262
1265
  --wds-icon-button-color-text-standard-tertiary-disabled: var(--wds-color-text-disabled);
1263
1266
  --wds-icon-button-color-text-standard-secondary-disabled: var(--wds-color-text-disabled);
1267
+ --wds-icon-button-color-text-standard-primary-disabled: var(--wds-color-text-disabled);
1264
1268
  --wds-icon-button-color-text-premium-tertiary-disabled: var(--wds-color-text-disabled);
1265
1269
  --wds-icon-button-color-text-premium-secondary-disabled: var(--wds-color-text-disabled);
1266
1270
  --wds-icon-button-color-text-light-secondary-disabled: var(--wds-color-text-disabled);
1267
1271
  --wds-icon-button-color-text-light-primary-disabled: var(--wds-color-text-disabled);
1268
1272
  --wds-icon-button-color-text-dark-tertiary-disabled: var(--wds-color-text-disabled);
1269
1273
  --wds-icon-button-color-text-dark-secondary-disabled: var(--wds-color-text-disabled);
1270
- --wds-icon-button-color-fill-standard-primary-disabled: var(--wds-color-fill-standard-primary-disabled);
1274
+ --wds-icon-button-color-fill-standard-primary-hover: var(--wds-color-black-750);
1275
+ --wds-icon-button-color-fill-standard-primary-disabled: var(--wds-color-white-transparent-0);
1271
1276
  --wds-icon-button-color-fill-standard-primary-active: var(--wds-color-blue-500);
1277
+ --wds-icon-button-color-fill-standard-primary: var(--wds-color-white-transparent-0);
1272
1278
  --wds-icon-button-color-fill-premium-primary-disabled: var(--wds-color-fill-standard-primary-disabled);
1273
1279
  --wds-icon-button-color-fill-dark-primary-disabled: var(--wds-color-fill-dark-primary-disabled);
1274
1280
  --wds-gallery-item-padding-vertical-small: var(--wds-space-300);
@@ -1663,6 +1669,7 @@
1663
1669
  --wds-section-helper-title-font-size: var(--wds-font-size-body-tiny);
1664
1670
  --wds-section-helper-text-font-line-height: var(--wds-font-line-height-100);
1665
1671
  --wds-section-helper-fill-standard: var(--wds-color-fill-surface-standard);
1672
+ --wds-section-helper-fill-premium: var(--wds-color-fill-surface-premium);
1666
1673
  --wds-section-header-label-font-size-small: var(--wds-font-size-body-small);
1667
1674
  --wds-section-header-label-font-size-medium: var(--wds-font-size-body-medium);
1668
1675
  --wds-section-header-label-fill-neutral: var(--wds-color-text-standard-primary);
@@ -1722,8 +1729,10 @@
1722
1729
  --wds-list-item-action-suffix-fill: var(--wds-color-text-placeholder);
1723
1730
  --wds-list-item-action-subtitle-font-size: var(--wds-font-size-body-tiny);
1724
1731
  --wds-list-item-action-subtitle-fill-active: var(--wds-color-text-placeholder);
1732
+ --wds-list-item-action-subtitle-fill-pressed-destructive: var(--wds-color-text-standard-secondary);
1725
1733
  --wds-list-item-action-label-font-size-small: var(--wds-font-size-body-tiny);
1726
1734
  --wds-list-item-action-label-font-size-medium: var(--wds-font-size-body-small);
1735
+ --wds-list-item-action-label-fill-pressed-destructive: var(--wds-color-text-destructive);
1727
1736
  --wds-list-item-action-label-fill-active: var(--wds-color-text-primary);
1728
1737
  --wds-list-item-action-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
1729
1738
  --wds-list-item-action-fill-active: var(--wds-color-fill-standard-tertiary-active);
@@ -1751,10 +1760,9 @@
1751
1760
  --wds-icon-button-color-text-standard-secondary-hover: var(--wds-color-text-standard-primary-light);
1752
1761
  --wds-icon-button-color-text-standard-secondary-active: var(--wds-color-text-standard-primary-light);
1753
1762
  --wds-icon-button-color-text-standard-secondary: var(--wds-color-text-primary);
1754
- --wds-icon-button-color-text-standard-primary-hover: var(--wds-color-text-standard-primary-light);
1755
- --wds-icon-button-color-text-standard-primary-disabled: var(--wds-color-text-disabled-light);
1756
- --wds-icon-button-color-text-standard-primary-active: var(--wds-color-text-standard-primary-light);
1757
- --wds-icon-button-color-text-standard-primary: var(--wds-color-text-standard-primary-light);
1763
+ --wds-icon-button-color-text-standard-primary-hover: var(--wds-color-text-standard-primary);
1764
+ --wds-icon-button-color-text-standard-primary-active: var(--wds-color-text-primary);
1765
+ --wds-icon-button-color-text-standard-primary: var(--wds-color-text-standard-primary);
1758
1766
  --wds-icon-button-color-text-premium-tertiary-hover: var(--wds-color-text-premium);
1759
1767
  --wds-icon-button-color-text-premium-tertiary-active: var(--wds-color-text-premium);
1760
1768
  --wds-icon-button-color-text-premium-tertiary: var(--wds-color-text-premium);
@@ -1793,8 +1801,6 @@
1793
1801
  --wds-icon-button-color-fill-standard-secondary-disabled: var(--wds-color-fill-standard-tertiary-disabled);
1794
1802
  --wds-icon-button-color-fill-standard-secondary-active: var(--wds-color-fill-standard-primary-active);
1795
1803
  --wds-icon-button-color-fill-standard-secondary: var(--wds-color-fill-standard-tertiary);
1796
- --wds-icon-button-color-fill-standard-primary-hover: var(--wds-color-fill-standard-primary-hover);
1797
- --wds-icon-button-color-fill-standard-primary: var(--wds-color-fill-standard-primary);
1798
1804
  --wds-icon-button-color-fill-premium-tertiary-hover: var(--wds-color-fill-premium-light-secondary-hover);
1799
1805
  --wds-icon-button-color-fill-premium-tertiary-disabled: var(--wds-color-fill-premium-light-secondary-disabled);
1800
1806
  --wds-icon-button-color-fill-premium-tertiary-active: var(--wds-color-fill-premium-light-secondary-active);
package/studio/all.scss CHANGED
@@ -308,6 +308,8 @@
308
308
  --wds-color-black-200-transparent-70: rgba(43, 46, 54, .7);
309
309
  --wds-color-black-200-transparent-60: rgba(43, 46, 54, .6);
310
310
  --wds-color-black-200-transparent-50: rgba(43, 46, 54, .5);
311
+ --wds-color-black-200-transparent-20: rgba(43, 46, 54, .2);
312
+ --wds-color-black-200-transparent-18: rgba(43, 46, 54, 0.18);
311
313
  --wds-color-black-200-transparent-0: rgba(43, 46, 54, 0);
312
314
  --wds-color-black-200: #2b2e36;
313
315
  --wds-color-black-100-transparent-70: rgba(19, 23, 32, .7);
@@ -553,6 +555,7 @@
553
555
  --wds-social-preview-content-padding-horizontal: var(--wds-space-300);
554
556
  --wds-social-post-preview-content-padding-vertical: var(--wds-space-300);
555
557
  --wds-social-post-preview-content-padding-horizontal: var(--wds-space-300);
558
+ --wds-slider-track-color-disabled: var(--wds-color-black-500);
556
559
  --wds-slider-track-border-radius-transparent: var(--wds-border-radius-full);
557
560
  --wds-slider-track-border-border-radius: var(--wds-border-radius-full);
558
561
  --wds-slider-slider-mark-size: var(--wds-space-200);
@@ -956,14 +959,17 @@
956
959
  --wds-image-border-radius-default: var(--wds-border-radius-200);
957
960
  --wds-icon-button-color-text-standard-tertiary-disabled: var(--wds-color-text-disabled);
958
961
  --wds-icon-button-color-text-standard-secondary-disabled: var(--wds-color-text-disabled);
962
+ --wds-icon-button-color-text-standard-primary-disabled: var(--wds-color-text-disabled);
959
963
  --wds-icon-button-color-text-premium-tertiary-disabled: var(--wds-color-text-disabled);
960
964
  --wds-icon-button-color-text-premium-secondary-disabled: var(--wds-color-text-disabled);
961
965
  --wds-icon-button-color-text-light-secondary-disabled: var(--wds-color-text-disabled);
962
966
  --wds-icon-button-color-text-light-primary-disabled: var(--wds-color-text-disabled);
963
967
  --wds-icon-button-color-text-dark-tertiary-disabled: var(--wds-color-text-disabled);
964
968
  --wds-icon-button-color-text-dark-secondary-disabled: var(--wds-color-text-disabled);
965
- --wds-icon-button-color-fill-standard-primary-disabled: var(--wds-color-fill-standard-primary-disabled);
969
+ --wds-icon-button-color-fill-standard-primary-hover: var(--wds-color-black-750);
970
+ --wds-icon-button-color-fill-standard-primary-disabled: var(--wds-color-white-transparent-0);
966
971
  --wds-icon-button-color-fill-standard-primary-active: var(--wds-color-blue-500);
972
+ --wds-icon-button-color-fill-standard-primary: var(--wds-color-white-transparent-0);
967
973
  --wds-icon-button-color-fill-premium-primary-disabled: var(--wds-color-fill-standard-primary-disabled);
968
974
  --wds-icon-button-color-fill-dark-primary-disabled: var(--wds-color-fill-dark-primary-disabled);
969
975
  --wds-gallery-item-padding-vertical-small: var(--wds-space-300);
@@ -1653,6 +1659,7 @@
1653
1659
  --wds-section-helper-title-font-size: var(--wds-font-size-body-tiny);
1654
1660
  --wds-section-helper-text-font-line-height: var(--wds-font-line-height-100);
1655
1661
  --wds-section-helper-fill-standard: var(--wds-color-fill-surface-standard);
1662
+ --wds-section-helper-fill-premium: var(--wds-color-fill-surface-premium);
1656
1663
  --wds-section-header-label-font-size-small: var(--wds-font-size-body-small);
1657
1664
  --wds-section-header-label-font-size-medium: var(--wds-font-size-body-medium);
1658
1665
  --wds-section-header-label-fill-neutral: var(--wds-color-text-standard-primary);
@@ -1711,9 +1718,11 @@
1711
1718
  --wds-list-item-action-suffix-fill-active: var(--wds-color-text-placeholder);
1712
1719
  --wds-list-item-action-suffix-fill: var(--wds-color-text-placeholder);
1713
1720
  --wds-list-item-action-subtitle-font-size: var(--wds-font-size-body-tiny);
1721
+ --wds-list-item-action-subtitle-fill-pressed-destructive: var(--wds-color-text-standard-secondary);
1714
1722
  --wds-list-item-action-subtitle-fill-active: var(--wds-color-text-placeholder);
1715
1723
  --wds-list-item-action-label-font-size-small: var(--wds-font-size-body-tiny);
1716
1724
  --wds-list-item-action-label-font-size-medium: var(--wds-font-size-body-small);
1725
+ --wds-list-item-action-label-fill-pressed-destructive: var(--wds-color-text-destructive);
1717
1726
  --wds-list-item-action-label-fill-active: var(--wds-color-text-primary);
1718
1727
  --wds-list-item-action-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
1719
1728
  --wds-list-item-action-fill-active: var(--wds-color-fill-standard-tertiary-active);
@@ -1741,10 +1750,9 @@
1741
1750
  --wds-icon-button-color-text-standard-secondary-hover: var(--wds-color-text-standard-primary-light);
1742
1751
  --wds-icon-button-color-text-standard-secondary-active: var(--wds-color-text-standard-primary-light);
1743
1752
  --wds-icon-button-color-text-standard-secondary: var(--wds-color-text-primary);
1744
- --wds-icon-button-color-text-standard-primary-hover: var(--wds-color-text-standard-primary-light);
1745
- --wds-icon-button-color-text-standard-primary-disabled: var(--wds-color-text-disabled-light);
1746
- --wds-icon-button-color-text-standard-primary-active: var(--wds-color-text-standard-primary-light);
1747
- --wds-icon-button-color-text-standard-primary: var(--wds-color-text-standard-primary-light);
1753
+ --wds-icon-button-color-text-standard-primary-hover: var(--wds-color-text-standard-primary);
1754
+ --wds-icon-button-color-text-standard-primary-active: var(--wds-color-text-primary);
1755
+ --wds-icon-button-color-text-standard-primary: var(--wds-color-text-standard-primary);
1748
1756
  --wds-icon-button-color-text-premium-tertiary-hover: var(--wds-color-text-premium);
1749
1757
  --wds-icon-button-color-text-premium-tertiary-active: var(--wds-color-text-premium);
1750
1758
  --wds-icon-button-color-text-premium-tertiary: var(--wds-color-text-premium);
@@ -1783,8 +1791,6 @@
1783
1791
  --wds-icon-button-color-fill-standard-secondary-disabled: var(--wds-color-fill-standard-tertiary-disabled);
1784
1792
  --wds-icon-button-color-fill-standard-secondary-active: var(--wds-color-fill-standard-primary-active);
1785
1793
  --wds-icon-button-color-fill-standard-secondary: var(--wds-color-fill-standard-tertiary);
1786
- --wds-icon-button-color-fill-standard-primary-hover: var(--wds-color-fill-standard-primary-hover);
1787
- --wds-icon-button-color-fill-standard-primary: var(--wds-color-fill-standard-primary);
1788
1794
  --wds-icon-button-color-fill-premium-tertiary-hover: var(--wds-color-fill-premium-light-secondary-hover);
1789
1795
  --wds-icon-button-color-fill-premium-tertiary-disabled: var(--wds-color-fill-premium-light-secondary-disabled);
1790
1796
  --wds-icon-button-color-fill-premium-tertiary-active: var(--wds-color-fill-premium-light-secondary-active);
package/studio/all.st.css CHANGED
@@ -346,6 +346,8 @@
346
346
  @property st-global(--wds-color-black-100-transparent-70);
347
347
  @property st-global(--wds-color-black-200);
348
348
  @property st-global(--wds-color-black-200-transparent-0);
349
+ @property st-global(--wds-color-black-200-transparent-18);
350
+ @property st-global(--wds-color-black-200-transparent-20);
349
351
  @property st-global(--wds-color-black-200-transparent-50);
350
352
  @property st-global(--wds-color-black-200-transparent-60);
351
353
  @property st-global(--wds-color-black-200-transparent-70);
@@ -1150,6 +1152,7 @@
1150
1152
  @property st-global(--wds-list-item-action-fill-hover);
1151
1153
  @property st-global(--wds-list-item-action-gap);
1152
1154
  @property st-global(--wds-list-item-action-label-fill-active);
1155
+ @property st-global(--wds-list-item-action-label-fill-pressed-destructive);
1153
1156
  @property st-global(--wds-list-item-action-label-font-line-height-medium);
1154
1157
  @property st-global(--wds-list-item-action-label-font-line-height-small);
1155
1158
  @property st-global(--wds-list-item-action-label-font-size-medium);
@@ -1161,6 +1164,7 @@
1161
1164
  @property st-global(--wds-list-item-action-padding-vertical-small);
1162
1165
  @property st-global(--wds-list-item-action-padding-vertical-small-screen-small);
1163
1166
  @property st-global(--wds-list-item-action-subtitle-fill-active);
1167
+ @property st-global(--wds-list-item-action-subtitle-fill-pressed-destructive);
1164
1168
  @property st-global(--wds-list-item-action-subtitle-font-line-height);
1165
1169
  @property st-global(--wds-list-item-action-subtitle-font-size);
1166
1170
  @property st-global(--wds-list-item-action-suffix-fill);
@@ -1361,6 +1365,7 @@
1361
1365
  @property st-global(--wds-section-helper-action-padding-small);
1362
1366
  @property st-global(--wds-section-helper-border-preview);
1363
1367
  @property st-global(--wds-section-helper-border-radius);
1368
+ @property st-global(--wds-section-helper-fill-premium);
1364
1369
  @property st-global(--wds-section-helper-fill-preview);
1365
1370
  @property st-global(--wds-section-helper-fill-standard);
1366
1371
  @property st-global(--wds-section-helper-fullwidth-horizontal-padding-medium);
@@ -1669,6 +1674,7 @@
1669
1674
  @property st-global(--wds-slider-track-border-border-radius);
1670
1675
  @property st-global(--wds-slider-track-border-radius-transparent);
1671
1676
  @property st-global(--wds-slider-track-color);
1677
+ @property st-global(--wds-slider-track-color-disabled);
1672
1678
  @property st-global(--wds-slider-track-size);
1673
1679
  @property st-global(--wds-slider-track-size-transparent);
1674
1680
  @property st-global(--wds-social-post-preview-content-padding-horizontal);
@@ -2406,6 +2412,8 @@
2406
2412
  --wds-color-black-100-transparent-70: rgba(19, 23, 32, .7);
2407
2413
  --wds-color-black-200: #2b2e36;
2408
2414
  --wds-color-black-200-transparent-0: rgba(43, 46, 54, 0);
2415
+ --wds-color-black-200-transparent-18: rgba(43, 46, 54, 0.18);
2416
+ --wds-color-black-200-transparent-20: rgba(43, 46, 54, .2);
2409
2417
  --wds-color-black-200-transparent-50: rgba(43, 46, 54, .5);
2410
2418
  --wds-color-black-200-transparent-60: rgba(43, 46, 54, .6);
2411
2419
  --wds-color-black-200-transparent-70: rgba(43, 46, 54, .7);
@@ -3053,10 +3061,10 @@
3053
3061
  --wds-icon-button-color-fill-premium-tertiary-active: #e3c3f4;
3054
3062
  --wds-icon-button-color-fill-premium-tertiary-disabled: rgba(255, 255, 255, 0);
3055
3063
  --wds-icon-button-color-fill-premium-tertiary-hover: #f1e0f9;
3056
- --wds-icon-button-color-fill-standard-primary: #116dff;
3064
+ --wds-icon-button-color-fill-standard-primary: rgba(255, 255, 255, 0);
3057
3065
  --wds-icon-button-color-fill-standard-primary-active: #ebf2ff;
3058
- --wds-icon-button-color-fill-standard-primary-disabled: #bebebe;
3059
- --wds-icon-button-color-fill-standard-primary-hover: #0f62e6;
3066
+ --wds-icon-button-color-fill-standard-primary-disabled: rgba(255, 255, 255, 0);
3067
+ --wds-icon-button-color-fill-standard-primary-hover: #f7f8f8;
3060
3068
  --wds-icon-button-color-fill-standard-secondary: #ffffff;
3061
3069
  --wds-icon-button-color-fill-standard-secondary-active: #116dff;
3062
3070
  --wds-icon-button-color-fill-standard-secondary-disabled: #ffffff;
@@ -3101,10 +3109,10 @@
3101
3109
  --wds-icon-button-color-text-premium-tertiary-active: #9a27d5;
3102
3110
  --wds-icon-button-color-text-premium-tertiary-disabled: #bebebe;
3103
3111
  --wds-icon-button-color-text-premium-tertiary-hover: #9a27d5;
3104
- --wds-icon-button-color-text-standard-primary: #ffffff;
3105
- --wds-icon-button-color-text-standard-primary-active: #ffffff;
3106
- --wds-icon-button-color-text-standard-primary-disabled: rgba(255, 255, 255, .7);
3107
- --wds-icon-button-color-text-standard-primary-hover: #ffffff;
3112
+ --wds-icon-button-color-text-standard-primary: #131720;
3113
+ --wds-icon-button-color-text-standard-primary-active: #116dff;
3114
+ --wds-icon-button-color-text-standard-primary-disabled: #bebebe;
3115
+ --wds-icon-button-color-text-standard-primary-hover: #131720;
3108
3116
  --wds-icon-button-color-text-standard-secondary: #116dff;
3109
3117
  --wds-icon-button-color-text-standard-secondary-active: #ffffff;
3110
3118
  --wds-icon-button-color-text-standard-secondary-disabled: #bebebe;
@@ -3210,6 +3218,7 @@
3210
3218
  --wds-list-item-action-fill-hover: #f7f8f8;
3211
3219
  --wds-list-item-action-gap: 0px;
3212
3220
  --wds-list-item-action-label-fill-active: #116dff;
3221
+ --wds-list-item-action-label-fill-pressed-destructive: #ee4437;
3213
3222
  --wds-list-item-action-label-font-line-height-medium: 20px;
3214
3223
  --wds-list-item-action-label-font-line-height-small: 18px;
3215
3224
  --wds-list-item-action-label-font-size-medium: 14px;
@@ -3221,6 +3230,7 @@
3221
3230
  --wds-list-item-action-padding-vertical-small: 6px;
3222
3231
  --wds-list-item-action-padding-vertical-small-screen-small: 8px;
3223
3232
  --wds-list-item-action-subtitle-fill-active: #868aa5;
3233
+ --wds-list-item-action-subtitle-fill-pressed-destructive: #42454c;
3224
3234
  --wds-list-item-action-subtitle-font-line-height: 18px;
3225
3235
  --wds-list-item-action-subtitle-font-size: 12px;
3226
3236
  --wds-list-item-action-suffix-fill: #868aa5;
@@ -3421,6 +3431,7 @@
3421
3431
  --wds-section-helper-action-padding-small: 8px;
3422
3432
  --wds-section-helper-border-preview: #cfd1dc;
3423
3433
  --wds-section-helper-border-radius: 4px;
3434
+ --wds-section-helper-fill-premium: #f1e0f9;
3424
3435
  --wds-section-helper-fill-preview: #edeef2;
3425
3436
  --wds-section-helper-fill-standard: #dce9ff;
3426
3437
  --wds-section-helper-fullwidth-horizontal-padding-medium: 24px;
@@ -3729,6 +3740,7 @@
3729
3740
  --wds-slider-track-border-border-radius: 1000px;
3730
3741
  --wds-slider-track-border-radius-transparent: 1000px;
3731
3742
  --wds-slider-track-color: #dce9ff;
3743
+ --wds-slider-track-color-disabled: #acafc4;
3732
3744
  --wds-slider-track-size: 2px;
3733
3745
  --wds-slider-track-size-transparent: 2px;
3734
3746
  --wds-social-post-preview-content-padding-horizontal: 12px;
package/studio/component.st.css CHANGED
@@ -593,6 +593,7 @@
593
593
  @property st-global(--wds-list-item-action-fill-hover);
594
594
  @property st-global(--wds-list-item-action-gap);
595
595
  @property st-global(--wds-list-item-action-label-fill-active);
596
+ @property st-global(--wds-list-item-action-label-fill-pressed-destructive);
596
597
  @property st-global(--wds-list-item-action-label-font-line-height-medium);
597
598
  @property st-global(--wds-list-item-action-label-font-line-height-small);
598
599
  @property st-global(--wds-list-item-action-label-font-size-medium);
@@ -604,6 +605,7 @@
604
605
  @property st-global(--wds-list-item-action-padding-vertical-small);
605
606
  @property st-global(--wds-list-item-action-padding-vertical-small-screen-small);
606
607
  @property st-global(--wds-list-item-action-subtitle-fill-active);
608
+ @property st-global(--wds-list-item-action-subtitle-fill-pressed-destructive);
607
609
  @property st-global(--wds-list-item-action-subtitle-font-line-height);
608
610
  @property st-global(--wds-list-item-action-subtitle-font-size);
609
611
  @property st-global(--wds-list-item-action-suffix-fill);
@@ -804,6 +806,7 @@
804
806
  @property st-global(--wds-section-helper-action-padding-small);
805
807
  @property st-global(--wds-section-helper-border-preview);
806
808
  @property st-global(--wds-section-helper-border-radius);
809
+ @property st-global(--wds-section-helper-fill-premium);
807
810
  @property st-global(--wds-section-helper-fill-preview);
808
811
  @property st-global(--wds-section-helper-fill-standard);
809
812
  @property st-global(--wds-section-helper-fullwidth-horizontal-padding-medium);
@@ -1004,6 +1007,7 @@
1004
1007
  @property st-global(--wds-slider-track-border-border-radius);
1005
1008
  @property st-global(--wds-slider-track-border-radius-transparent);
1006
1009
  @property st-global(--wds-slider-track-color);
1010
+ @property st-global(--wds-slider-track-color-disabled);
1007
1011
  @property st-global(--wds-slider-track-size);
1008
1012
  @property st-global(--wds-slider-track-size-transparent);
1009
1013
  @property st-global(--wds-social-post-preview-content-padding-horizontal);
@@ -1798,10 +1802,10 @@
1798
1802
  --wds-icon-button-color-fill-premium-tertiary-active: #e3c3f4;
1799
1803
  --wds-icon-button-color-fill-premium-tertiary-disabled: rgba(255, 255, 255, 0);
1800
1804
  --wds-icon-button-color-fill-premium-tertiary-hover: #f1e0f9;
1801
- --wds-icon-button-color-fill-standard-primary: #116dff;
1805
+ --wds-icon-button-color-fill-standard-primary: rgba(255, 255, 255, 0);
1802
1806
  --wds-icon-button-color-fill-standard-primary-active: #ebf2ff;
1803
- --wds-icon-button-color-fill-standard-primary-disabled: #bebebe;
1804
- --wds-icon-button-color-fill-standard-primary-hover: #0f62e6;
1807
+ --wds-icon-button-color-fill-standard-primary-disabled: rgba(255, 255, 255, 0);
1808
+ --wds-icon-button-color-fill-standard-primary-hover: #f7f8f8;
1805
1809
  --wds-icon-button-color-fill-standard-secondary: #ffffff;
1806
1810
  --wds-icon-button-color-fill-standard-secondary-active: #116dff;
1807
1811
  --wds-icon-button-color-fill-standard-secondary-disabled: #ffffff;
@@ -1846,10 +1850,10 @@
1846
1850
  --wds-icon-button-color-text-premium-tertiary-active: #9a27d5;
1847
1851
  --wds-icon-button-color-text-premium-tertiary-disabled: #bebebe;
1848
1852
  --wds-icon-button-color-text-premium-tertiary-hover: #9a27d5;
1849
- --wds-icon-button-color-text-standard-primary: #ffffff;
1850
- --wds-icon-button-color-text-standard-primary-active: #ffffff;
1851
- --wds-icon-button-color-text-standard-primary-disabled: rgba(255, 255, 255, .7);
1852
- --wds-icon-button-color-text-standard-primary-hover: #ffffff;
1853
+ --wds-icon-button-color-text-standard-primary: #131720;
1854
+ --wds-icon-button-color-text-standard-primary-active: #116dff;
1855
+ --wds-icon-button-color-text-standard-primary-disabled: #bebebe;
1856
+ --wds-icon-button-color-text-standard-primary-hover: #131720;
1853
1857
  --wds-icon-button-color-text-standard-secondary: #116dff;
1854
1858
  --wds-icon-button-color-text-standard-secondary-active: #ffffff;
1855
1859
  --wds-icon-button-color-text-standard-secondary-disabled: #bebebe;
@@ -1942,6 +1946,7 @@
1942
1946
  --wds-list-item-action-fill-hover: #f7f8f8;
1943
1947
  --wds-list-item-action-gap: 0px;
1944
1948
  --wds-list-item-action-label-fill-active: #116dff;
1949
+ --wds-list-item-action-label-fill-pressed-destructive: #ee4437;
1945
1950
  --wds-list-item-action-label-font-line-height-medium: 20px;
1946
1951
  --wds-list-item-action-label-font-line-height-small: 18px;
1947
1952
  --wds-list-item-action-label-font-size-medium: 14px;
@@ -1953,6 +1958,7 @@
1953
1958
  --wds-list-item-action-padding-vertical-small: 6px;
1954
1959
  --wds-list-item-action-padding-vertical-small-screen-small: 8px;
1955
1960
  --wds-list-item-action-subtitle-fill-active: #868aa5;
1961
+ --wds-list-item-action-subtitle-fill-pressed-destructive: #42454c;
1956
1962
  --wds-list-item-action-subtitle-font-line-height: 18px;
1957
1963
  --wds-list-item-action-subtitle-font-size: 12px;
1958
1964
  --wds-list-item-action-suffix-fill: #868aa5;
@@ -2153,6 +2159,7 @@
2153
2159
  --wds-section-helper-action-padding-small: 8px;
2154
2160
  --wds-section-helper-border-preview: #cfd1dc;
2155
2161
  --wds-section-helper-border-radius: 4px;
2162
+ --wds-section-helper-fill-premium: #f1e0f9;
2156
2163
  --wds-section-helper-fill-preview: #edeef2;
2157
2164
  --wds-section-helper-fill-standard: #dce9ff;
2158
2165
  --wds-section-helper-fullwidth-horizontal-padding-medium: 24px;
@@ -2353,6 +2360,7 @@
2353
2360
  --wds-slider-track-border-border-radius: 1000px;
2354
2361
  --wds-slider-track-border-radius-transparent: 1000px;
2355
2362
  --wds-slider-track-color: #dce9ff;
2363
+ --wds-slider-track-color-disabled: #acafc4;
2356
2364
  --wds-slider-track-size: 2px;
2357
2365
  --wds-slider-track-size-transparent: 2px;
2358
2366
  --wds-social-post-preview-content-padding-horizontal: 12px;
package/studio/foundation.st.css CHANGED
@@ -38,6 +38,8 @@
38
38
  @property st-global(--wds-color-black-100-transparent-70);
39
39
  @property st-global(--wds-color-black-200);
40
40
  @property st-global(--wds-color-black-200-transparent-0);
41
+ @property st-global(--wds-color-black-200-transparent-18);
42
+ @property st-global(--wds-color-black-200-transparent-20);
41
43
  @property st-global(--wds-color-black-200-transparent-50);
42
44
  @property st-global(--wds-color-black-200-transparent-60);
43
45
  @property st-global(--wds-color-black-200-transparent-70);
@@ -266,6 +268,8 @@
266
268
  --wds-color-black-100-transparent-70: rgba(19, 23, 32, .7);
267
269
  --wds-color-black-200: #2b2e36;
268
270
  --wds-color-black-200-transparent-0: rgba(43, 46, 54, 0);
271
+ --wds-color-black-200-transparent-18: rgba(43, 46, 54, 0.18);
272
+ --wds-color-black-200-transparent-20: rgba(43, 46, 54, .2);
269
273
  --wds-color-black-200-transparent-50: rgba(43, 46, 54, .5);
270
274
  --wds-color-black-200-transparent-60: rgba(43, 46, 54, .6);
271
275
  --wds-color-black-200-transparent-70: rgba(43, 46, 54, .7);
package/wixel/all.css CHANGED
@@ -923,6 +923,7 @@
923
923
  --wds-social-preview-content-padding-horizontal: var(--wds-space-300);
924
924
  --wds-social-post-preview-content-padding-vertical: var(--wds-space-300);
925
925
  --wds-social-post-preview-content-padding-horizontal: var(--wds-space-300);
926
+ --wds-slider-track-color-disabled: var(--wds-color-black-500);
926
927
  --wds-slider-track-color: var(--wds-color-blue-400);
927
928
  --wds-slider-track-border-radius-transparent: var(--wds-border-radius-full);
928
929
  --wds-slider-track-border-border-radius: var(--wds-border-radius-full);
@@ -1611,6 +1612,7 @@
1611
1612
  --wds-segmented-toggle-border-hover: var(--wds-color-fill-standard-secondary-hover);
1612
1613
  --wds-section-helper-text-font-size: var(--wds-font-size-body-tiny);
1613
1614
  --wds-section-helper-fill-standard: var(--wds-color-fill-surface-standard);
1615
+ --wds-section-helper-fill-premium: var(--wds-color-fill-surface-premium);
1614
1616
  --wds-section-header-label-font-size-small: var(--wds-font-size-body-small);
1615
1617
  --wds-section-header-label-font-size-medium: var(--wds-font-size-body-medium);
1616
1618
  --wds-section-header-label-fill-neutral: var(--wds-color-text-standard-primary);
@@ -1675,8 +1677,10 @@
1675
1677
  --wds-list-item-action-suffix-fill: var(--wds-color-text-placeholder);
1676
1678
  --wds-list-item-action-subtitle-font-size: var(--wds-font-size-body-tiny);
1677
1679
  --wds-list-item-action-subtitle-fill-active: var(--wds-color-text-placeholder);
1680
+ --wds-list-item-action-subtitle-fill-pressed-destructive: var(--wds-color-text-standard-secondary);
1678
1681
  --wds-list-item-action-label-font-size-small: var(--wds-font-size-body-tiny);
1679
1682
  --wds-list-item-action-label-font-size-medium: var(--wds-font-size-body-small);
1683
+ --wds-list-item-action-label-fill-pressed-destructive: var(--wds-color-text-destructive);
1680
1684
  --wds-list-item-action-label-fill-active: var(--wds-color-text-primary);
1681
1685
  --wds-list-item-action-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
1682
1686
  --wds-list-item-action-fill-active: var(--wds-color-fill-standard-tertiary-active);
package/wixel/all.scss CHANGED
@@ -545,6 +545,7 @@
545
545
  --wds-social-preview-content-padding-horizontal: var(--wds-space-300);
546
546
  --wds-social-post-preview-content-padding-vertical: var(--wds-space-300);
547
547
  --wds-social-post-preview-content-padding-horizontal: var(--wds-space-300);
548
+ --wds-slider-track-color-disabled: var(--wds-color-black-500);
548
549
  --wds-slider-track-color: var(--wds-color-blue-400);
549
550
  --wds-slider-track-border-radius-transparent: var(--wds-border-radius-full);
550
551
  --wds-slider-track-border-border-radius: var(--wds-border-radius-full);
@@ -1601,6 +1602,7 @@
1601
1602
  --wds-segmented-toggle-border-hover: var(--wds-color-fill-standard-secondary-hover);
1602
1603
  --wds-section-helper-text-font-size: var(--wds-font-size-body-tiny);
1603
1604
  --wds-section-helper-fill-standard: var(--wds-color-fill-surface-standard);
1605
+ --wds-section-helper-fill-premium: var(--wds-color-fill-surface-premium);
1604
1606
  --wds-section-header-label-font-size-small: var(--wds-font-size-body-small);
1605
1607
  --wds-section-header-label-font-size-medium: var(--wds-font-size-body-medium);
1606
1608
  --wds-section-header-label-fill-neutral: var(--wds-color-text-standard-primary);
@@ -1664,9 +1666,11 @@
1664
1666
  --wds-list-item-action-suffix-fill-active: var(--wds-color-text-placeholder);
1665
1667
  --wds-list-item-action-suffix-fill: var(--wds-color-text-placeholder);
1666
1668
  --wds-list-item-action-subtitle-font-size: var(--wds-font-size-body-tiny);
1669
+ --wds-list-item-action-subtitle-fill-pressed-destructive: var(--wds-color-text-standard-secondary);
1667
1670
  --wds-list-item-action-subtitle-fill-active: var(--wds-color-text-placeholder);
1668
1671
  --wds-list-item-action-label-font-size-small: var(--wds-font-size-body-tiny);
1669
1672
  --wds-list-item-action-label-font-size-medium: var(--wds-font-size-body-small);
1673
+ --wds-list-item-action-label-fill-pressed-destructive: var(--wds-color-text-destructive);
1670
1674
  --wds-list-item-action-label-fill-active: var(--wds-color-text-primary);
1671
1675
  --wds-list-item-action-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
1672
1676
  --wds-list-item-action-fill-active: var(--wds-color-fill-standard-tertiary-active);
package/wixel/all.st.css CHANGED
@@ -1133,6 +1133,7 @@
1133
1133
  @property st-global(--wds-list-item-action-fill-hover);
1134
1134
  @property st-global(--wds-list-item-action-gap);
1135
1135
  @property st-global(--wds-list-item-action-label-fill-active);
1136
+ @property st-global(--wds-list-item-action-label-fill-pressed-destructive);
1136
1137
  @property st-global(--wds-list-item-action-label-font-line-height-medium);
1137
1138
  @property st-global(--wds-list-item-action-label-font-line-height-small);
1138
1139
  @property st-global(--wds-list-item-action-label-font-size-medium);
@@ -1144,6 +1145,7 @@
1144
1145
  @property st-global(--wds-list-item-action-padding-vertical-small);
1145
1146
  @property st-global(--wds-list-item-action-padding-vertical-small-screen-small);
1146
1147
  @property st-global(--wds-list-item-action-subtitle-fill-active);
1148
+ @property st-global(--wds-list-item-action-subtitle-fill-pressed-destructive);
1147
1149
  @property st-global(--wds-list-item-action-subtitle-font-line-height);
1148
1150
  @property st-global(--wds-list-item-action-subtitle-font-size);
1149
1151
  @property st-global(--wds-list-item-action-suffix-fill);
@@ -1343,6 +1345,7 @@
1343
1345
  @property st-global(--wds-section-helper-border-preview);
1344
1346
  @property st-global(--wds-section-helper-border-radius);
1345
1347
  @property st-global(--wds-section-helper-close-button-offset);
1348
+ @property st-global(--wds-section-helper-fill-premium);
1346
1349
  @property st-global(--wds-section-helper-fill-preview);
1347
1350
  @property st-global(--wds-section-helper-fill-standard);
1348
1351
  @property st-global(--wds-section-helper-fullwidth-horizontal-padding-medium);
@@ -1627,6 +1630,7 @@
1627
1630
  @property st-global(--wds-slider-track-border-border-radius);
1628
1631
  @property st-global(--wds-slider-track-border-radius-transparent);
1629
1632
  @property st-global(--wds-slider-track-color);
1633
+ @property st-global(--wds-slider-track-color-disabled);
1630
1634
  @property st-global(--wds-slider-track-size);
1631
1635
  @property st-global(--wds-slider-track-size-transparent);
1632
1636
  @property st-global(--wds-social-post-preview-content-padding-horizontal);
@@ -3144,6 +3148,7 @@
3144
3148
  --wds-list-item-action-fill-hover: #f4f6ff;
3145
3149
  --wds-list-item-action-gap: 0px;
3146
3150
  --wds-list-item-action-label-fill-active: #4a57ff;
3151
+ --wds-list-item-action-label-fill-pressed-destructive: #ee4437;
3147
3152
  --wds-list-item-action-label-font-line-height-medium: 20px;
3148
3153
  --wds-list-item-action-label-font-line-height-small: 16px;
3149
3154
  --wds-list-item-action-label-font-size-medium: 14px;
@@ -3155,6 +3160,7 @@
3155
3160
  --wds-list-item-action-padding-vertical-small: 6px;
3156
3161
  --wds-list-item-action-padding-vertical-small-screen-small: 8px;
3157
3162
  --wds-list-item-action-subtitle-fill-active: #868aa5;
3163
+ --wds-list-item-action-subtitle-fill-pressed-destructive: #595d70;
3158
3164
  --wds-list-item-action-subtitle-font-line-height: 16px;
3159
3165
  --wds-list-item-action-subtitle-font-size: 12px;
3160
3166
  --wds-list-item-action-suffix-fill: #868aa5;
@@ -3354,6 +3360,7 @@
3354
3360
  --wds-section-helper-border-preview: #cfd1dc;
3355
3361
  --wds-section-helper-border-radius: 4px;
3356
3362
  --wds-section-helper-close-button-offset: 12px;
3363
+ --wds-section-helper-fill-premium: #f1e0f9;
3357
3364
  --wds-section-helper-fill-preview: #edeef2;
3358
3365
  --wds-section-helper-fill-standard: #dce2ff;
3359
3366
  --wds-section-helper-fullwidth-horizontal-padding-medium: 24px;
@@ -3638,6 +3645,7 @@
3638
3645
  --wds-slider-track-border-border-radius: 1000px;
3639
3646
  --wds-slider-track-border-radius-transparent: 1000px;
3640
3647
  --wds-slider-track-color: #dce2ff;
3648
+ --wds-slider-track-color-disabled: #acafc4;
3641
3649
  --wds-slider-track-size: 4px;
3642
3650
  --wds-slider-track-size-transparent: 4px;
3643
3651
  --wds-social-post-preview-content-padding-horizontal: 12px;
package/wixel/component.st.css CHANGED
@@ -576,6 +576,7 @@
576
576
  @property st-global(--wds-list-item-action-fill-hover);
577
577
  @property st-global(--wds-list-item-action-gap);
578
578
  @property st-global(--wds-list-item-action-label-fill-active);
579
+ @property st-global(--wds-list-item-action-label-fill-pressed-destructive);
579
580
  @property st-global(--wds-list-item-action-label-font-line-height-medium);
580
581
  @property st-global(--wds-list-item-action-label-font-line-height-small);
581
582
  @property st-global(--wds-list-item-action-label-font-size-medium);
@@ -587,6 +588,7 @@
587
588
  @property st-global(--wds-list-item-action-padding-vertical-small);
588
589
  @property st-global(--wds-list-item-action-padding-vertical-small-screen-small);
589
590
  @property st-global(--wds-list-item-action-subtitle-fill-active);
591
+ @property st-global(--wds-list-item-action-subtitle-fill-pressed-destructive);
590
592
  @property st-global(--wds-list-item-action-subtitle-font-line-height);
591
593
  @property st-global(--wds-list-item-action-subtitle-font-size);
592
594
  @property st-global(--wds-list-item-action-suffix-fill);
@@ -786,6 +788,7 @@
786
788
  @property st-global(--wds-section-helper-border-preview);
787
789
  @property st-global(--wds-section-helper-border-radius);
788
790
  @property st-global(--wds-section-helper-close-button-offset);
791
+ @property st-global(--wds-section-helper-fill-premium);
789
792
  @property st-global(--wds-section-helper-fill-preview);
790
793
  @property st-global(--wds-section-helper-fill-standard);
791
794
  @property st-global(--wds-section-helper-fullwidth-horizontal-padding-medium);
@@ -977,6 +980,7 @@
977
980
  @property st-global(--wds-slider-track-border-border-radius);
978
981
  @property st-global(--wds-slider-track-border-radius-transparent);
979
982
  @property st-global(--wds-slider-track-color);
983
+ @property st-global(--wds-slider-track-color-disabled);
980
984
  @property st-global(--wds-slider-track-size);
981
985
  @property st-global(--wds-slider-track-size-transparent);
982
986
  @property st-global(--wds-social-post-preview-content-padding-horizontal);
@@ -1891,6 +1895,7 @@
1891
1895
  --wds-list-item-action-fill-hover: #f4f6ff;
1892
1896
  --wds-list-item-action-gap: 0px;
1893
1897
  --wds-list-item-action-label-fill-active: #4a57ff;
1898
+ --wds-list-item-action-label-fill-pressed-destructive: #ee4437;
1894
1899
  --wds-list-item-action-label-font-line-height-medium: 20px;
1895
1900
  --wds-list-item-action-label-font-line-height-small: 16px;
1896
1901
  --wds-list-item-action-label-font-size-medium: 14px;
@@ -1902,6 +1907,7 @@
1902
1907
  --wds-list-item-action-padding-vertical-small: 6px;
1903
1908
  --wds-list-item-action-padding-vertical-small-screen-small: 8px;
1904
1909
  --wds-list-item-action-subtitle-fill-active: #868aa5;
1910
+ --wds-list-item-action-subtitle-fill-pressed-destructive: #595d70;
1905
1911
  --wds-list-item-action-subtitle-font-line-height: 16px;
1906
1912
  --wds-list-item-action-subtitle-font-size: 12px;
1907
1913
  --wds-list-item-action-suffix-fill: #868aa5;
@@ -2101,6 +2107,7 @@
2101
2107
  --wds-section-helper-border-preview: #cfd1dc;
2102
2108
  --wds-section-helper-border-radius: 4px;
2103
2109
  --wds-section-helper-close-button-offset: 12px;
2110
+ --wds-section-helper-fill-premium: #f1e0f9;
2104
2111
  --wds-section-helper-fill-preview: #edeef2;
2105
2112
  --wds-section-helper-fill-standard: #dce2ff;
2106
2113
  --wds-section-helper-fullwidth-horizontal-padding-medium: 24px;
@@ -2292,6 +2299,7 @@
2292
2299
  --wds-slider-track-border-border-radius: 1000px;
2293
2300
  --wds-slider-track-border-radius-transparent: 1000px;
2294
2301
  --wds-slider-track-color: #dce2ff;
2302
+ --wds-slider-track-color-disabled: #acafc4;
2295
2303
  --wds-slider-track-size: 4px;
2296
2304
  --wds-slider-track-size-transparent: 4px;
2297
2305
  --wds-social-post-preview-content-padding-horizontal: 12px;