@wix/design-system-tokens 1.113.0 → 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 +7 -0
  2. package/all.css +4 -0
  3. package/all.st.css +8 -0
  4. package/component.st.css +6 -0
  5. package/package.json +2 -2
  6. package/semantic.st.css +2 -0
  7. package/studio/all.css +4 -0
  8. package/studio/all.st.css +8 -0
  9. package/studio/component.st.css +6 -0
  10. package/studio/semantic.st.css +2 -0
  11. package/wixel/all.css +4 -0
  12. package/wixel/all.st.css +8 -0
  13. package/wixel/component.st.css +6 -0
  14. package/wixel/semantic.st.css +2 -0
package/CHANGELOG.md CHANGED
@@ -1,3 +1,10 @@
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
+
1
8
  ## 1.113.0 - 2025-06-13
2
9
 
3
10
  ### 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);
@@ -1310,6 +1311,9 @@
1310
1311
  --wds-tabs-selection-fill-secondary: var(--wds-color-fill-standard-primary);
1311
1312
  --wds-tabs-selection-fill-primary: var(--wds-color-fill-standard-primary);
1312
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);
1313
1317
  --wds-status-toast-text-font-size: var(--wds-font-size-body-medium);
1314
1318
  --wds-status-toast-text-fill: var(--wds-color-text-standard-primary-light);
1315
1319
  --wds-status-toast-info-icon-fill: var(--wds-color-text-standard-primary-light);
package/all.st.css CHANGED
@@ -1328,6 +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-space-viewport-spacing);
1331
1332
  @property st-global(--wds-status-toast-info-icon-fill);
1332
1333
  @property st-global(--wds-status-toast-text-fill);
1333
1334
  @property st-global(--wds-status-toast-text-font-line-height);
@@ -1349,6 +1350,9 @@
1349
1350
  @property st-global(--wds-swatches-swatch-size-tiny);
1350
1351
  @property st-global(--wds-swatches-swatch-size-x-tiny);
1351
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);
1352
1356
  @property st-global(--wds-table-list-item-gap);
1353
1357
  @property st-global(--wds-table-list-item-indentation-level-2);
1354
1358
  @property st-global(--wds-table-list-item-indentation-level-3);
@@ -2883,6 +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;
2890
+ --wds-space-viewport-spacing: 48px;
2886
2891
  --wds-status-toast-info-icon-fill: #ffffff;
2887
2892
  --wds-status-toast-text-fill: #ffffff;
2888
2893
  --wds-status-toast-text-font-line-height: 24px;
@@ -2904,6 +2909,9 @@
2904
2909
  --wds-swatches-swatch-size-tiny: 24px;
2905
2910
  --wds-swatches-swatch-size-x-tiny: 18px;
2906
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;
2907
2915
  --wds-table-list-item-gap: 24px;
2908
2916
  --wds-table-list-item-indentation-level-2: 12px;
2909
2917
  --wds-table-list-item-indentation-level-3: 36px;
package/component.st.css CHANGED
@@ -725,6 +725,9 @@
725
725
  @property st-global(--wds-swatches-swatch-size-tiny);
726
726
  @property st-global(--wds-swatches-swatch-size-x-tiny);
727
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);
728
731
  @property st-global(--wds-table-list-item-gap);
729
732
  @property st-global(--wds-table-list-item-indentation-level-2);
730
733
  @property st-global(--wds-table-list-item-indentation-level-3);
@@ -1654,6 +1657,9 @@
1654
1657
  --wds-swatches-swatch-size-tiny: 24px;
1655
1658
  --wds-swatches-swatch-size-x-tiny: 18px;
1656
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;
1657
1663
  --wds-table-list-item-gap: 24px;
1658
1664
  --wds-table-list-item-indentation-level-2: 12px;
1659
1665
  --wds-table-list-item-indentation-level-3: 36px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wix/design-system-tokens",
3
- "version": "1.113.0",
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": "03d6135e3d1f6f3ea64142a49b9e107b2a6515790b357810af85f3a9"
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);
@@ -1338,6 +1339,9 @@
1338
1339
  --wds-tabs-selection-fill-secondary: var(--wds-color-fill-standard-primary);
1339
1340
  --wds-tabs-selection-fill-primary: var(--wds-color-fill-standard-primary);
1340
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);
1341
1345
  --wds-status-toast-text-font-size: var(--wds-font-size-body-medium);
1342
1346
  --wds-status-toast-text-fill: var(--wds-color-text-standard-primary-light);
1343
1347
  --wds-status-toast-info-icon-fill: var(--wds-color-text-standard-primary-light);
package/studio/all.st.css CHANGED
@@ -1316,6 +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-space-viewport-spacing);
1319
1320
  @property st-global(--wds-status-toast-info-icon-fill);
1320
1321
  @property st-global(--wds-status-toast-text-fill);
1321
1322
  @property st-global(--wds-status-toast-text-font-line-height);
@@ -1337,6 +1338,9 @@
1337
1338
  @property st-global(--wds-swatches-swatch-size-tiny);
1338
1339
  @property st-global(--wds-swatches-swatch-size-x-tiny);
1339
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);
1340
1344
  @property st-global(--wds-table-list-item-gap);
1341
1345
  @property st-global(--wds-table-list-item-indentation-level-2);
1342
1346
  @property st-global(--wds-table-list-item-indentation-level-3);
@@ -2867,6 +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;
2874
+ --wds-space-viewport-spacing: 48px;
2870
2875
  --wds-status-toast-info-icon-fill: #ffffff;
2871
2876
  --wds-status-toast-text-fill: #ffffff;
2872
2877
  --wds-status-toast-text-font-line-height: 24px;
@@ -2888,6 +2893,9 @@
2888
2893
  --wds-swatches-swatch-size-tiny: 24px;
2889
2894
  --wds-swatches-swatch-size-x-tiny: 18px;
2890
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;
2891
2899
  --wds-table-list-item-gap: 24px;
2892
2900
  --wds-table-list-item-indentation-level-2: 12px;
2893
2901
  --wds-table-list-item-indentation-level-3: 28px;
package/studio/component.st.css CHANGED
@@ -717,6 +717,9 @@
717
717
  @property st-global(--wds-swatches-swatch-size-tiny);
718
718
  @property st-global(--wds-swatches-swatch-size-x-tiny);
719
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);
720
723
  @property st-global(--wds-table-list-item-gap);
721
724
  @property st-global(--wds-table-list-item-indentation-level-2);
722
725
  @property st-global(--wds-table-list-item-indentation-level-3);
@@ -1646,6 +1649,9 @@
1646
1649
  --wds-swatches-swatch-size-tiny: 24px;
1647
1650
  --wds-swatches-swatch-size-x-tiny: 18px;
1648
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;
1649
1655
  --wds-table-list-item-gap: 24px;
1650
1656
  --wds-table-list-item-indentation-level-2: 12px;
1651
1657
  --wds-table-list-item-indentation-level-3: 28px;
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);
@@ -1348,6 +1349,9 @@
1348
1349
  --wds-tabs-selection-fill-primary: var(--wds-color-fill-standard-primary);
1349
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%);
1350
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);
1351
1355
  --wds-status-toast-text-font-size: var(--wds-font-size-body-tiny);
1352
1356
  --wds-status-toast-text-fill: var(--wds-color-text-standard-primary-light);
1353
1357
  --wds-status-toast-info-icon-fill: var(--wds-color-text-standard-primary-light);
package/wixel/all.st.css CHANGED
@@ -1326,6 +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-space-viewport-spacing);
1329
1330
  @property st-global(--wds-status-toast-info-icon-fill);
1330
1331
  @property st-global(--wds-status-toast-text-fill);
1331
1332
  @property st-global(--wds-status-toast-text-font-line-height);
@@ -1346,6 +1347,9 @@
1346
1347
  @property st-global(--wds-swatches-swatch-size-small);
1347
1348
  @property st-global(--wds-swatches-swatch-size-tiny);
1348
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);
1349
1353
  @property st-global(--wds-table-list-item-gap);
1350
1354
  @property st-global(--wds-table-list-item-indentation-level-2);
1351
1355
  @property st-global(--wds-table-list-item-indentation-level-3);
@@ -2886,6 +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;
2893
+ --wds-space-viewport-spacing: 48px;
2889
2894
  --wds-status-toast-info-icon-fill: #ffffff;
2890
2895
  --wds-status-toast-text-fill: #ffffff;
2891
2896
  --wds-status-toast-text-font-line-height: 16px;
@@ -2906,6 +2911,9 @@
2906
2911
  --wds-swatches-swatch-size-small: 32px;
2907
2912
  --wds-swatches-swatch-size-tiny: 28px;
2908
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;
2909
2917
  --wds-table-list-item-gap: 24px;
2910
2918
  --wds-table-list-item-indentation-level-2: 12px;
2911
2919
  --wds-table-list-item-indentation-level-3: 28px;
package/wixel/component.st.css CHANGED
@@ -722,6 +722,9 @@
722
722
  @property st-global(--wds-swatches-swatch-size-small);
723
723
  @property st-global(--wds-swatches-swatch-size-tiny);
724
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);
725
728
  @property st-global(--wds-table-list-item-gap);
726
729
  @property st-global(--wds-table-list-item-indentation-level-2);
727
730
  @property st-global(--wds-table-list-item-indentation-level-3);
@@ -1656,6 +1659,9 @@
1656
1659
  --wds-swatches-swatch-size-small: 32px;
1657
1660
  --wds-swatches-swatch-size-tiny: 28px;
1658
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;
1659
1665
  --wds-table-list-item-gap: 24px;
1660
1666
  --wds-table-list-item-indentation-level-2: 12px;
1661
1667
  --wds-table-list-item-indentation-level-3: 28px;
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
  }