@wix/design-system-tokens 1.112.3 → 1.114.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 (14) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/all.css +5 -1
  3. package/all.st.css +10 -2
  4. package/component.st.css +8 -2
  5. package/package.json +2 -2
  6. package/semantic.st.css +2 -0
  7. package/studio/all.css +5 -1
  8. package/studio/all.st.css +10 -2
  9. package/studio/component.st.css +8 -2
  10. package/studio/semantic.st.css +2 -0
  11. package/wixel/all.css +5 -1
  12. package/wixel/all.st.css +10 -2
  13. package/wixel/component.st.css +8 -2
  14. package/wixel/semantic.st.css +2 -0
package/CHANGELOG.md CHANGED
@@ -1,3 +1,16 @@
1
+ ## 1.114.0 - 2025-06-17
2
+
3
+ ### Features
4
+
5
+ - feat(tokens): add & implement new token for modal padding [14988](https://github.com/wix-private/wix-design-systems/pull/14988)
6
+ - feat(tokens): new component-level token for Table List item [14985](https://github.com/wix-private/wix-design-systems/pull/14985)
7
+
8
+ ## 1.113.0 - 2025-06-13
9
+
10
+ ### Features
11
+
12
+ - feat(tokens): implement new tokens for picasso [14971](https://github.com/wix-private/wix-design-systems/pull/14971)
13
+
1
14
  ## 1.112.0 - 2025-06-07
2
15
 
3
16
  ### Features
package/all.css CHANGED
@@ -311,6 +311,7 @@
311
311
  --wds-border-radius-surface-modal-backdrop: var(--wds-border-radius-0);
312
312
  --wds-border-radius-surface-modal: var(--wds-border-radius-400);
313
313
  --wds-border-radius-surface-default: var(--wds-border-radius-400);
314
+ --wds-space-viewport-spacing: var(--wds-space-800);
314
315
  --wds-space-padding-vertical-xx-tiny: var(--wds-space-50);
315
316
  --wds-space-padding-vertical-x-tiny: var(--wds-space-100);
316
317
  --wds-space-padding-vertical-tiny: var(--wds-space-200);
@@ -1301,6 +1302,7 @@
1301
1302
  --wds-toggle-button-fill-inverted-hover: var(--wds-color-fill-standard-tertiary-hover);
1302
1303
  --wds-toggle-button-fill-inverted-disabled: var(--wds-color-fill-standard-tertiary-disabled);
1303
1304
  --wds-toggle-button-fill-inverted: var(--wds-color-fill-standard-tertiary);
1305
+ --wds-toast-background-fill: var(--wds-color-fill-dark-primary);
1304
1306
  --wds-timeline-title-font-size: var(--wds-font-size-body-small);
1305
1307
  --wds-thumbnail-title-font-size-tiny: var(--wds-font-size-body-tiny);
1306
1308
  --wds-thumbnail-subtitle-font-size-tiny: var(--wds-font-size-body-tiny);
@@ -1309,10 +1311,12 @@
1309
1311
  --wds-tabs-selection-fill-secondary: var(--wds-color-fill-standard-primary);
1310
1312
  --wds-tabs-selection-fill-primary: var(--wds-color-fill-standard-primary);
1311
1313
  --wds-tabs-label-font-size-small: var(--wds-font-size-body-small);
1314
+ --wds-table-list-item-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
1315
+ --wds-table-list-item-fill-active: var(--wds-color-fill-standard-tertiary-active);
1316
+ --wds-table-list-item-fill: var(--wds-color-fill-standard-tertiary);
1312
1317
  --wds-status-toast-text-font-size: var(--wds-font-size-body-medium);
1313
1318
  --wds-status-toast-text-fill: var(--wds-color-text-standard-primary-light);
1314
1319
  --wds-status-toast-info-icon-fill: var(--wds-color-text-standard-primary-light);
1315
- --wds-status-toast-background-fill: var(--wds-color-fill-dark-primary);
1316
1320
  --wds-slider-track-color: var(--wds-color-fill-standard-secondary);
1317
1321
  --wds-slider-slider-knob-color-hover: var(--wds-color-fill-standard-primary);
1318
1322
  --wds-slider-slider-knob-color: var(--wds-color-fill-standard-primary);
package/all.st.css CHANGED
@@ -1328,7 +1328,7 @@
1328
1328
  @property st-global(--wds-space-padding-vertical-tiny);
1329
1329
  @property st-global(--wds-space-padding-vertical-x-tiny);
1330
1330
  @property st-global(--wds-space-padding-vertical-xx-tiny);
1331
- @property st-global(--wds-status-toast-background-fill);
1331
+ @property st-global(--wds-space-viewport-spacing);
1332
1332
  @property st-global(--wds-status-toast-info-icon-fill);
1333
1333
  @property st-global(--wds-status-toast-text-fill);
1334
1334
  @property st-global(--wds-status-toast-text-font-line-height);
@@ -1350,6 +1350,9 @@
1350
1350
  @property st-global(--wds-swatches-swatch-size-tiny);
1351
1351
  @property st-global(--wds-swatches-swatch-size-x-tiny);
1352
1352
  @property st-global(--wds-table-list-item-border-radius);
1353
+ @property st-global(--wds-table-list-item-fill);
1354
+ @property st-global(--wds-table-list-item-fill-active);
1355
+ @property st-global(--wds-table-list-item-fill-hover);
1353
1356
  @property st-global(--wds-table-list-item-gap);
1354
1357
  @property st-global(--wds-table-list-item-indentation-level-2);
1355
1358
  @property st-global(--wds-table-list-item-indentation-level-3);
@@ -1403,6 +1406,7 @@
1403
1406
  @property st-global(--wds-thumbnail-title-padding-top);
1404
1407
  @property st-global(--wds-timeline-title-font-line-height);
1405
1408
  @property st-global(--wds-timeline-title-font-size);
1409
+ @property st-global(--wds-toast-background-fill);
1406
1410
  @property st-global(--wds-toggle-button-border-radius-square-large);
1407
1411
  @property st-global(--wds-toggle-button-border-radius-square-medium);
1408
1412
  @property st-global(--wds-toggle-button-border-radius-square-small);
@@ -2883,7 +2887,7 @@
2883
2887
  --wds-space-padding-vertical-tiny: 12px;
2884
2888
  --wds-space-padding-vertical-x-tiny: 6px;
2885
2889
  --wds-space-padding-vertical-xx-tiny: 3px;
2886
- --wds-status-toast-background-fill: #000624;
2890
+ --wds-space-viewport-spacing: 48px;
2887
2891
  --wds-status-toast-info-icon-fill: #ffffff;
2888
2892
  --wds-status-toast-text-fill: #ffffff;
2889
2893
  --wds-status-toast-text-font-line-height: 24px;
@@ -2905,6 +2909,9 @@
2905
2909
  --wds-swatches-swatch-size-tiny: 24px;
2906
2910
  --wds-swatches-swatch-size-x-tiny: 18px;
2907
2911
  --wds-table-list-item-border-radius: 0;
2912
+ --wds-table-list-item-fill: #ffffff;
2913
+ --wds-table-list-item-fill-active: #d6e6fe;
2914
+ --wds-table-list-item-fill-hover: #e7f0ff;
2908
2915
  --wds-table-list-item-gap: 24px;
2909
2916
  --wds-table-list-item-indentation-level-2: 12px;
2910
2917
  --wds-table-list-item-indentation-level-3: 36px;
@@ -2958,6 +2965,7 @@
2958
2965
  --wds-thumbnail-title-padding-top: 6px;
2959
2966
  --wds-timeline-title-font-line-height: 18px;
2960
2967
  --wds-timeline-title-font-size: 14px;
2968
+ --wds-toast-background-fill: #000624;
2961
2969
  --wds-toggle-button-border-radius-square-large: 6px;
2962
2970
  --wds-toggle-button-border-radius-square-medium: 6px;
2963
2971
  --wds-toggle-button-border-radius-square-small: 4px;
package/component.st.css CHANGED
@@ -704,7 +704,6 @@
704
704
  @property st-global(--wds-social-post-preview-content-padding-vertical);
705
705
  @property st-global(--wds-social-preview-content-padding-horizontal);
706
706
  @property st-global(--wds-social-preview-content-padding-vertical);
707
- @property st-global(--wds-status-toast-background-fill);
708
707
  @property st-global(--wds-status-toast-info-icon-fill);
709
708
  @property st-global(--wds-status-toast-text-fill);
710
709
  @property st-global(--wds-status-toast-text-font-line-height);
@@ -726,6 +725,9 @@
726
725
  @property st-global(--wds-swatches-swatch-size-tiny);
727
726
  @property st-global(--wds-swatches-swatch-size-x-tiny);
728
727
  @property st-global(--wds-table-list-item-border-radius);
728
+ @property st-global(--wds-table-list-item-fill);
729
+ @property st-global(--wds-table-list-item-fill-active);
730
+ @property st-global(--wds-table-list-item-fill-hover);
729
731
  @property st-global(--wds-table-list-item-gap);
730
732
  @property st-global(--wds-table-list-item-indentation-level-2);
731
733
  @property st-global(--wds-table-list-item-indentation-level-3);
@@ -779,6 +781,7 @@
779
781
  @property st-global(--wds-thumbnail-title-padding-top);
780
782
  @property st-global(--wds-timeline-title-font-line-height);
781
783
  @property st-global(--wds-timeline-title-font-size);
784
+ @property st-global(--wds-toast-background-fill);
782
785
  @property st-global(--wds-toggle-button-border-radius-square-large);
783
786
  @property st-global(--wds-toggle-button-border-radius-square-medium);
784
787
  @property st-global(--wds-toggle-button-border-radius-square-small);
@@ -1633,7 +1636,6 @@
1633
1636
  --wds-social-post-preview-content-padding-vertical: 12px;
1634
1637
  --wds-social-preview-content-padding-horizontal: 12px;
1635
1638
  --wds-social-preview-content-padding-vertical: 9px;
1636
- --wds-status-toast-background-fill: #000624;
1637
1639
  --wds-status-toast-info-icon-fill: #ffffff;
1638
1640
  --wds-status-toast-text-fill: #ffffff;
1639
1641
  --wds-status-toast-text-font-line-height: 24px;
@@ -1655,6 +1657,9 @@
1655
1657
  --wds-swatches-swatch-size-tiny: 24px;
1656
1658
  --wds-swatches-swatch-size-x-tiny: 18px;
1657
1659
  --wds-table-list-item-border-radius: 0;
1660
+ --wds-table-list-item-fill: #ffffff;
1661
+ --wds-table-list-item-fill-active: #d6e6fe;
1662
+ --wds-table-list-item-fill-hover: #e7f0ff;
1658
1663
  --wds-table-list-item-gap: 24px;
1659
1664
  --wds-table-list-item-indentation-level-2: 12px;
1660
1665
  --wds-table-list-item-indentation-level-3: 36px;
@@ -1708,6 +1713,7 @@
1708
1713
  --wds-thumbnail-title-padding-top: 6px;
1709
1714
  --wds-timeline-title-font-line-height: 18px;
1710
1715
  --wds-timeline-title-font-size: 14px;
1716
+ --wds-toast-background-fill: #000624;
1711
1717
  --wds-toggle-button-border-radius-square-large: 6px;
1712
1718
  --wds-toggle-button-border-radius-square-medium: 6px;
1713
1719
  --wds-toggle-button-border-radius-square-small: 4px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wix/design-system-tokens",
3
- "version": "1.112.3",
3
+ "version": "1.114.0",
4
4
  "packageManager": "yarn@3.5.0",
5
5
  "author": "augustinasv@wix.com",
6
6
  "license": "MIT",
@@ -33,5 +33,5 @@
33
33
  "groupId": "com.wixpress"
34
34
  }
35
35
  },
36
- "falconPackageHash": "de502179e739747f955bfc70d935ace5458a50791669c8e17ede96e8"
36
+ "falconPackageHash": "6c61677236ad16d68cd5776689a22f985c4053d34ae3c6082be70a48"
37
37
  }
package/semantic.st.css CHANGED
@@ -421,6 +421,7 @@
421
421
  @property st-global(--wds-space-padding-vertical-tiny);
422
422
  @property st-global(--wds-space-padding-vertical-x-tiny);
423
423
  @property st-global(--wds-space-padding-vertical-xx-tiny);
424
+ @property st-global(--wds-space-viewport-spacing);
424
425
  @property st-global(--wds-width-default);
425
426
  @property st-global(--wds-width-default-2);
426
427
 
@@ -848,6 +849,7 @@
848
849
  --wds-space-padding-vertical-tiny: 12px;
849
850
  --wds-space-padding-vertical-x-tiny: 6px;
850
851
  --wds-space-padding-vertical-xx-tiny: 3px;
852
+ --wds-space-viewport-spacing: 48px;
851
853
  --wds-width-default: 1px;
852
854
  --wds-width-default-2: 1px;
853
855
  }
package/studio/all.css CHANGED
@@ -344,6 +344,7 @@
344
344
  --wds-border-radius-surface-modal-backdrop: var(--wds-border-radius-0);
345
345
  --wds-border-radius-surface-modal: var(--wds-border-radius-200);
346
346
  --wds-border-radius-surface-default: var(--wds-border-radius-200);
347
+ --wds-space-viewport-spacing: var(--wds-space-1200);
347
348
  --wds-space-padding-vertical-xx-tiny: var(--wds-space-100);
348
349
  --wds-space-padding-vertical-x-tiny: var(--wds-space-200);
349
350
  --wds-space-padding-vertical-tiny: var(--wds-space-300);
@@ -1328,6 +1329,7 @@
1328
1329
  --wds-toggle-button-fill-inverted-hover: var(--wds-color-fill-standard-tertiary-hover);
1329
1330
  --wds-toggle-button-fill-inverted-disabled: var(--wds-color-fill-standard-tertiary-disabled);
1330
1331
  --wds-toggle-button-fill-inverted: var(--wds-color-fill-standard-tertiary);
1332
+ --wds-toast-background-fill: var(--wds-color-fill-dark-primary);
1331
1333
  --wds-timeline-title-font-size: var(--wds-font-size-body-tiny);
1332
1334
  --wds-thumbnail-title-font-size-tiny: var(--wds-font-size-body-tiny);
1333
1335
  --wds-thumbnail-subtitle-font-size-tiny: var(--wds-font-size-body-tiny);
@@ -1337,10 +1339,12 @@
1337
1339
  --wds-tabs-selection-fill-secondary: var(--wds-color-fill-standard-primary);
1338
1340
  --wds-tabs-selection-fill-primary: var(--wds-color-fill-standard-primary);
1339
1341
  --wds-tabs-label-font-size-small: var(--wds-font-size-body-tiny);
1342
+ --wds-table-list-item-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
1343
+ --wds-table-list-item-fill-active: var(--wds-color-fill-standard-tertiary-active);
1344
+ --wds-table-list-item-fill: var(--wds-color-fill-standard-tertiary);
1340
1345
  --wds-status-toast-text-font-size: var(--wds-font-size-body-medium);
1341
1346
  --wds-status-toast-text-fill: var(--wds-color-text-standard-primary-light);
1342
1347
  --wds-status-toast-info-icon-fill: var(--wds-color-text-standard-primary-light);
1343
- --wds-status-toast-background-fill: var(--wds-color-fill-dark-primary);
1344
1348
  --wds-slider-track-color: var(--wds-color-fill-standard-secondary);
1345
1349
  --wds-slider-slider-knob-color-hover: var(--wds-color-fill-standard-primary-hover);
1346
1350
  --wds-slider-slider-knob-color: var(--wds-color-fill-standard-primary);
package/studio/all.st.css CHANGED
@@ -1316,7 +1316,7 @@
1316
1316
  @property st-global(--wds-space-padding-vertical-tiny);
1317
1317
  @property st-global(--wds-space-padding-vertical-x-tiny);
1318
1318
  @property st-global(--wds-space-padding-vertical-xx-tiny);
1319
- @property st-global(--wds-status-toast-background-fill);
1319
+ @property st-global(--wds-space-viewport-spacing);
1320
1320
  @property st-global(--wds-status-toast-info-icon-fill);
1321
1321
  @property st-global(--wds-status-toast-text-fill);
1322
1322
  @property st-global(--wds-status-toast-text-font-line-height);
@@ -1338,6 +1338,9 @@
1338
1338
  @property st-global(--wds-swatches-swatch-size-tiny);
1339
1339
  @property st-global(--wds-swatches-swatch-size-x-tiny);
1340
1340
  @property st-global(--wds-table-list-item-border-radius);
1341
+ @property st-global(--wds-table-list-item-fill);
1342
+ @property st-global(--wds-table-list-item-fill-active);
1343
+ @property st-global(--wds-table-list-item-fill-hover);
1341
1344
  @property st-global(--wds-table-list-item-gap);
1342
1345
  @property st-global(--wds-table-list-item-indentation-level-2);
1343
1346
  @property st-global(--wds-table-list-item-indentation-level-3);
@@ -1391,6 +1394,7 @@
1391
1394
  @property st-global(--wds-thumbnail-title-padding-top);
1392
1395
  @property st-global(--wds-timeline-title-font-line-height);
1393
1396
  @property st-global(--wds-timeline-title-font-size);
1397
+ @property st-global(--wds-toast-background-fill);
1394
1398
  @property st-global(--wds-toggle-button-border-radius-square-large);
1395
1399
  @property st-global(--wds-toggle-button-border-radius-square-medium);
1396
1400
  @property st-global(--wds-toggle-button-border-radius-square-small);
@@ -2867,7 +2871,7 @@
2867
2871
  --wds-space-padding-vertical-tiny: 12px;
2868
2872
  --wds-space-padding-vertical-x-tiny: 8px;
2869
2873
  --wds-space-padding-vertical-xx-tiny: 4px;
2870
- --wds-status-toast-background-fill: #131720;
2874
+ --wds-space-viewport-spacing: 48px;
2871
2875
  --wds-status-toast-info-icon-fill: #ffffff;
2872
2876
  --wds-status-toast-text-fill: #ffffff;
2873
2877
  --wds-status-toast-text-font-line-height: 24px;
@@ -2889,6 +2893,9 @@
2889
2893
  --wds-swatches-swatch-size-tiny: 24px;
2890
2894
  --wds-swatches-swatch-size-x-tiny: 18px;
2891
2895
  --wds-table-list-item-border-radius: 0;
2896
+ --wds-table-list-item-fill: #ffffff;
2897
+ --wds-table-list-item-fill-active: #dce9ff;
2898
+ --wds-table-list-item-fill-hover: #f7f8f8;
2892
2899
  --wds-table-list-item-gap: 24px;
2893
2900
  --wds-table-list-item-indentation-level-2: 12px;
2894
2901
  --wds-table-list-item-indentation-level-3: 28px;
@@ -2942,6 +2949,7 @@
2942
2949
  --wds-thumbnail-title-padding-top: 4px;
2943
2950
  --wds-timeline-title-font-line-height: 16px;
2944
2951
  --wds-timeline-title-font-size: 12px;
2952
+ --wds-toast-background-fill: #131720;
2945
2953
  --wds-toggle-button-border-radius-square-large: 6px;
2946
2954
  --wds-toggle-button-border-radius-square-medium: 6px;
2947
2955
  --wds-toggle-button-border-radius-square-small: 4px;
package/studio/component.st.css CHANGED
@@ -696,7 +696,6 @@
696
696
  @property st-global(--wds-social-post-preview-content-padding-vertical);
697
697
  @property st-global(--wds-social-preview-content-padding-horizontal);
698
698
  @property st-global(--wds-social-preview-content-padding-vertical);
699
- @property st-global(--wds-status-toast-background-fill);
700
699
  @property st-global(--wds-status-toast-info-icon-fill);
701
700
  @property st-global(--wds-status-toast-text-fill);
702
701
  @property st-global(--wds-status-toast-text-font-line-height);
@@ -718,6 +717,9 @@
718
717
  @property st-global(--wds-swatches-swatch-size-tiny);
719
718
  @property st-global(--wds-swatches-swatch-size-x-tiny);
720
719
  @property st-global(--wds-table-list-item-border-radius);
720
+ @property st-global(--wds-table-list-item-fill);
721
+ @property st-global(--wds-table-list-item-fill-active);
722
+ @property st-global(--wds-table-list-item-fill-hover);
721
723
  @property st-global(--wds-table-list-item-gap);
722
724
  @property st-global(--wds-table-list-item-indentation-level-2);
723
725
  @property st-global(--wds-table-list-item-indentation-level-3);
@@ -771,6 +773,7 @@
771
773
  @property st-global(--wds-thumbnail-title-padding-top);
772
774
  @property st-global(--wds-timeline-title-font-line-height);
773
775
  @property st-global(--wds-timeline-title-font-size);
776
+ @property st-global(--wds-toast-background-fill);
774
777
  @property st-global(--wds-toggle-button-border-radius-square-large);
775
778
  @property st-global(--wds-toggle-button-border-radius-square-medium);
776
779
  @property st-global(--wds-toggle-button-border-radius-square-small);
@@ -1625,7 +1628,6 @@
1625
1628
  --wds-social-post-preview-content-padding-vertical: 12px;
1626
1629
  --wds-social-preview-content-padding-horizontal: 12px;
1627
1630
  --wds-social-preview-content-padding-vertical: 8px;
1628
- --wds-status-toast-background-fill: #131720;
1629
1631
  --wds-status-toast-info-icon-fill: #ffffff;
1630
1632
  --wds-status-toast-text-fill: #ffffff;
1631
1633
  --wds-status-toast-text-font-line-height: 24px;
@@ -1647,6 +1649,9 @@
1647
1649
  --wds-swatches-swatch-size-tiny: 24px;
1648
1650
  --wds-swatches-swatch-size-x-tiny: 18px;
1649
1651
  --wds-table-list-item-border-radius: 0;
1652
+ --wds-table-list-item-fill: #ffffff;
1653
+ --wds-table-list-item-fill-active: #dce9ff;
1654
+ --wds-table-list-item-fill-hover: #f7f8f8;
1650
1655
  --wds-table-list-item-gap: 24px;
1651
1656
  --wds-table-list-item-indentation-level-2: 12px;
1652
1657
  --wds-table-list-item-indentation-level-3: 28px;
@@ -1700,6 +1705,7 @@
1700
1705
  --wds-thumbnail-title-padding-top: 4px;
1701
1706
  --wds-timeline-title-font-line-height: 16px;
1702
1707
  --wds-timeline-title-font-size: 12px;
1708
+ --wds-toast-background-fill: #131720;
1703
1709
  --wds-toggle-button-border-radius-square-large: 6px;
1704
1710
  --wds-toggle-button-border-radius-square-medium: 6px;
1705
1711
  --wds-toggle-button-border-radius-square-small: 4px;
package/studio/semantic.st.css CHANGED
@@ -417,6 +417,7 @@
417
417
  @property st-global(--wds-space-padding-vertical-tiny);
418
418
  @property st-global(--wds-space-padding-vertical-x-tiny);
419
419
  @property st-global(--wds-space-padding-vertical-xx-tiny);
420
+ @property st-global(--wds-space-viewport-spacing);
420
421
  @property st-global(--wds-width-default);
421
422
  @property st-global(--wds-width-default-2);
422
423
 
@@ -840,6 +841,7 @@
840
841
  --wds-space-padding-vertical-tiny: 12px;
841
842
  --wds-space-padding-vertical-x-tiny: 8px;
842
843
  --wds-space-padding-vertical-xx-tiny: 4px;
844
+ --wds-space-viewport-spacing: 48px;
843
845
  --wds-width-default: 1px;
844
846
  --wds-width-default-2: 1px;
845
847
  }
package/wixel/all.css CHANGED
@@ -347,6 +347,7 @@
347
347
  --wds-border-radius-surface-modal-backdrop: var(--wds-border-radius-0);
348
348
  --wds-border-radius-surface-modal: var(--wds-border-radius-600);
349
349
  --wds-border-radius-surface-default: var(--wds-border-radius-600);
350
+ --wds-space-viewport-spacing: var(--wds-space-1200);
350
351
  --wds-space-padding-vertical-xx-tiny: var(--wds-space-100);
351
352
  --wds-space-padding-vertical-x-tiny: var(--wds-space-200);
352
353
  --wds-space-padding-vertical-tiny: var(--wds-space-300);
@@ -1336,6 +1337,7 @@
1336
1337
  --wds-toggle-button-fill-inverted-selected: var(--wds-color-fill-standard-primary);
1337
1338
  --wds-toggle-button-fill-inverted-hover: var(--wds-color-fill-standard-secondary-hover);
1338
1339
  --wds-toggle-button-fill-inverted: var(--wds-color-fill-standard-secondary);
1340
+ --wds-toast-background-fill: var(--wds-color-fill-surface-overlay-dark);
1339
1341
  --wds-timeline-title-font-size: var(--wds-font-size-body-tiny);
1340
1342
  --wds-thumbnail-title-font-size-tiny: var(--wds-font-size-body-tiny);
1341
1343
  --wds-thumbnail-subtitle-font-size-tiny: var(--wds-font-size-body-extra-tiny);
@@ -1347,10 +1349,12 @@
1347
1349
  --wds-tabs-selection-fill-primary: var(--wds-color-fill-standard-primary);
1348
1350
  --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%);
1349
1351
  --wds-tabs-label-font-size-small: var(--wds-font-size-body-tiny);
1352
+ --wds-table-list-item-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
1353
+ --wds-table-list-item-fill-active: var(--wds-color-fill-standard-tertiary-active);
1354
+ --wds-table-list-item-fill: var(--wds-color-fill-standard-tertiary);
1350
1355
  --wds-status-toast-text-font-size: var(--wds-font-size-body-tiny);
1351
1356
  --wds-status-toast-text-fill: var(--wds-color-text-standard-primary-light);
1352
1357
  --wds-status-toast-info-icon-fill: var(--wds-color-text-standard-primary-light);
1353
- --wds-status-toast-background-fill: var(--wds-color-fill-dark-primary);
1354
1358
  --wds-slider-slider-knob-color-hover: var(--wds-color-fill-standard-primary-hover);
1355
1359
  --wds-sidebar-item-title: var(--wds-color-text-standard-secondary-light);
1356
1360
  --wds-sidebar-item-text-neutral-disabled: var(--wds-color-text-disabled);
package/wixel/all.st.css CHANGED
@@ -1326,7 +1326,7 @@
1326
1326
  @property st-global(--wds-space-padding-vertical-tiny);
1327
1327
  @property st-global(--wds-space-padding-vertical-x-tiny);
1328
1328
  @property st-global(--wds-space-padding-vertical-xx-tiny);
1329
- @property st-global(--wds-status-toast-background-fill);
1329
+ @property st-global(--wds-space-viewport-spacing);
1330
1330
  @property st-global(--wds-status-toast-info-icon-fill);
1331
1331
  @property st-global(--wds-status-toast-text-fill);
1332
1332
  @property st-global(--wds-status-toast-text-font-line-height);
@@ -1347,6 +1347,9 @@
1347
1347
  @property st-global(--wds-swatches-swatch-size-small);
1348
1348
  @property st-global(--wds-swatches-swatch-size-tiny);
1349
1349
  @property st-global(--wds-table-list-item-border-radius);
1350
+ @property st-global(--wds-table-list-item-fill);
1351
+ @property st-global(--wds-table-list-item-fill-active);
1352
+ @property st-global(--wds-table-list-item-fill-hover);
1350
1353
  @property st-global(--wds-table-list-item-gap);
1351
1354
  @property st-global(--wds-table-list-item-indentation-level-2);
1352
1355
  @property st-global(--wds-table-list-item-indentation-level-3);
@@ -1400,6 +1403,7 @@
1400
1403
  @property st-global(--wds-thumbnail-title-padding-top);
1401
1404
  @property st-global(--wds-timeline-title-font-line-height);
1402
1405
  @property st-global(--wds-timeline-title-font-size);
1406
+ @property st-global(--wds-toast-background-fill);
1403
1407
  @property st-global(--wds-toggle-button-border-radius-square-large);
1404
1408
  @property st-global(--wds-toggle-button-border-radius-square-medium);
1405
1409
  @property st-global(--wds-toggle-button-border-radius-square-small);
@@ -2886,7 +2890,7 @@
2886
2890
  --wds-space-padding-vertical-tiny: 12px;
2887
2891
  --wds-space-padding-vertical-x-tiny: 8px;
2888
2892
  --wds-space-padding-vertical-xx-tiny: 4px;
2889
- --wds-status-toast-background-fill: #131720;
2893
+ --wds-space-viewport-spacing: 48px;
2890
2894
  --wds-status-toast-info-icon-fill: #ffffff;
2891
2895
  --wds-status-toast-text-fill: #ffffff;
2892
2896
  --wds-status-toast-text-font-line-height: 16px;
@@ -2907,6 +2911,9 @@
2907
2911
  --wds-swatches-swatch-size-small: 32px;
2908
2912
  --wds-swatches-swatch-size-tiny: 28px;
2909
2913
  --wds-table-list-item-border-radius: 12px;
2914
+ --wds-table-list-item-fill: #ffffff;
2915
+ --wds-table-list-item-fill-active: #eef0ff;
2916
+ --wds-table-list-item-fill-hover: #f4f6ff;
2910
2917
  --wds-table-list-item-gap: 24px;
2911
2918
  --wds-table-list-item-indentation-level-2: 12px;
2912
2919
  --wds-table-list-item-indentation-level-3: 28px;
@@ -2960,6 +2967,7 @@
2960
2967
  --wds-thumbnail-title-padding-top: 6px;
2961
2968
  --wds-timeline-title-font-line-height: 16px;
2962
2969
  --wds-timeline-title-font-size: 12px;
2970
+ --wds-toast-background-fill: #131720;
2963
2971
  --wds-toggle-button-border-radius-square-large: 8px;
2964
2972
  --wds-toggle-button-border-radius-square-medium: 8px;
2965
2973
  --wds-toggle-button-border-radius-square-small: 8px;
package/wixel/component.st.css CHANGED
@@ -702,7 +702,6 @@
702
702
  @property st-global(--wds-social-post-preview-content-padding-vertical);
703
703
  @property st-global(--wds-social-preview-content-padding-horizontal);
704
704
  @property st-global(--wds-social-preview-content-padding-vertical);
705
- @property st-global(--wds-status-toast-background-fill);
706
705
  @property st-global(--wds-status-toast-info-icon-fill);
707
706
  @property st-global(--wds-status-toast-text-fill);
708
707
  @property st-global(--wds-status-toast-text-font-line-height);
@@ -723,6 +722,9 @@
723
722
  @property st-global(--wds-swatches-swatch-size-small);
724
723
  @property st-global(--wds-swatches-swatch-size-tiny);
725
724
  @property st-global(--wds-table-list-item-border-radius);
725
+ @property st-global(--wds-table-list-item-fill);
726
+ @property st-global(--wds-table-list-item-fill-active);
727
+ @property st-global(--wds-table-list-item-fill-hover);
726
728
  @property st-global(--wds-table-list-item-gap);
727
729
  @property st-global(--wds-table-list-item-indentation-level-2);
728
730
  @property st-global(--wds-table-list-item-indentation-level-3);
@@ -776,6 +778,7 @@
776
778
  @property st-global(--wds-thumbnail-title-padding-top);
777
779
  @property st-global(--wds-timeline-title-font-line-height);
778
780
  @property st-global(--wds-timeline-title-font-size);
781
+ @property st-global(--wds-toast-background-fill);
779
782
  @property st-global(--wds-toggle-button-border-radius-square-large);
780
783
  @property st-global(--wds-toggle-button-border-radius-square-medium);
781
784
  @property st-global(--wds-toggle-button-border-radius-square-small);
@@ -1636,7 +1639,6 @@
1636
1639
  --wds-social-post-preview-content-padding-vertical: 12px;
1637
1640
  --wds-social-preview-content-padding-horizontal: 12px;
1638
1641
  --wds-social-preview-content-padding-vertical: 8px;
1639
- --wds-status-toast-background-fill: #131720;
1640
1642
  --wds-status-toast-info-icon-fill: #ffffff;
1641
1643
  --wds-status-toast-text-fill: #ffffff;
1642
1644
  --wds-status-toast-text-font-line-height: 16px;
@@ -1657,6 +1659,9 @@
1657
1659
  --wds-swatches-swatch-size-small: 32px;
1658
1660
  --wds-swatches-swatch-size-tiny: 28px;
1659
1661
  --wds-table-list-item-border-radius: 12px;
1662
+ --wds-table-list-item-fill: #ffffff;
1663
+ --wds-table-list-item-fill-active: #eef0ff;
1664
+ --wds-table-list-item-fill-hover: #f4f6ff;
1660
1665
  --wds-table-list-item-gap: 24px;
1661
1666
  --wds-table-list-item-indentation-level-2: 12px;
1662
1667
  --wds-table-list-item-indentation-level-3: 28px;
@@ -1710,6 +1715,7 @@
1710
1715
  --wds-thumbnail-title-padding-top: 6px;
1711
1716
  --wds-timeline-title-font-line-height: 16px;
1712
1717
  --wds-timeline-title-font-size: 12px;
1718
+ --wds-toast-background-fill: #131720;
1713
1719
  --wds-toggle-button-border-radius-square-large: 8px;
1714
1720
  --wds-toggle-button-border-radius-square-medium: 8px;
1715
1721
  --wds-toggle-button-border-radius-square-small: 8px;
package/wixel/semantic.st.css CHANGED
@@ -421,6 +421,7 @@
421
421
  @property st-global(--wds-space-padding-vertical-tiny);
422
422
  @property st-global(--wds-space-padding-vertical-x-tiny);
423
423
  @property st-global(--wds-space-padding-vertical-xx-tiny);
424
+ @property st-global(--wds-space-viewport-spacing);
424
425
  @property st-global(--wds-width-default);
425
426
  @property st-global(--wds-width-default-2);
426
427
 
@@ -848,6 +849,7 @@
848
849
  --wds-space-padding-vertical-tiny: 12px;
849
850
  --wds-space-padding-vertical-x-tiny: 8px;
850
851
  --wds-space-padding-vertical-xx-tiny: 4px;
852
+ --wds-space-viewport-spacing: 48px;
851
853
  --wds-width-default: 0;
852
854
  --wds-width-default-2: 0;
853
855
  }