@wix/design-system-tokens 1.112.3 → 1.113.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 (11) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/all.css +1 -1
  3. package/all.st.css +2 -2
  4. package/component.st.css +2 -2
  5. package/package.json +2 -2
  6. package/studio/all.css +1 -1
  7. package/studio/all.st.css +2 -2
  8. package/studio/component.st.css +2 -2
  9. package/wixel/all.css +1 -1
  10. package/wixel/all.st.css +2 -2
  11. package/wixel/component.st.css +2 -2
package/CHANGELOG.md CHANGED
@@ -1,3 +1,9 @@
1
+ ## 1.113.0 - 2025-06-13
2
+
3
+ ### Features
4
+
5
+ - feat(tokens): implement new tokens for picasso [14971](https://github.com/wix-private/wix-design-systems/pull/14971)
6
+
1
7
  ## 1.112.0 - 2025-06-07
2
8
 
3
9
  ### Features
package/all.css CHANGED
@@ -1301,6 +1301,7 @@
1301
1301
  --wds-toggle-button-fill-inverted-hover: var(--wds-color-fill-standard-tertiary-hover);
1302
1302
  --wds-toggle-button-fill-inverted-disabled: var(--wds-color-fill-standard-tertiary-disabled);
1303
1303
  --wds-toggle-button-fill-inverted: var(--wds-color-fill-standard-tertiary);
1304
+ --wds-toast-background-fill: var(--wds-color-fill-dark-primary);
1304
1305
  --wds-timeline-title-font-size: var(--wds-font-size-body-small);
1305
1306
  --wds-thumbnail-title-font-size-tiny: var(--wds-font-size-body-tiny);
1306
1307
  --wds-thumbnail-subtitle-font-size-tiny: var(--wds-font-size-body-tiny);
@@ -1312,7 +1313,6 @@
1312
1313
  --wds-status-toast-text-font-size: var(--wds-font-size-body-medium);
1313
1314
  --wds-status-toast-text-fill: var(--wds-color-text-standard-primary-light);
1314
1315
  --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
1316
  --wds-slider-track-color: var(--wds-color-fill-standard-secondary);
1317
1317
  --wds-slider-slider-knob-color-hover: var(--wds-color-fill-standard-primary);
1318
1318
  --wds-slider-slider-knob-color: var(--wds-color-fill-standard-primary);
package/all.st.css CHANGED
@@ -1328,7 +1328,6 @@
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);
1332
1331
  @property st-global(--wds-status-toast-info-icon-fill);
1333
1332
  @property st-global(--wds-status-toast-text-fill);
1334
1333
  @property st-global(--wds-status-toast-text-font-line-height);
@@ -1403,6 +1402,7 @@
1403
1402
  @property st-global(--wds-thumbnail-title-padding-top);
1404
1403
  @property st-global(--wds-timeline-title-font-line-height);
1405
1404
  @property st-global(--wds-timeline-title-font-size);
1405
+ @property st-global(--wds-toast-background-fill);
1406
1406
  @property st-global(--wds-toggle-button-border-radius-square-large);
1407
1407
  @property st-global(--wds-toggle-button-border-radius-square-medium);
1408
1408
  @property st-global(--wds-toggle-button-border-radius-square-small);
@@ -2883,7 +2883,6 @@
2883
2883
  --wds-space-padding-vertical-tiny: 12px;
2884
2884
  --wds-space-padding-vertical-x-tiny: 6px;
2885
2885
  --wds-space-padding-vertical-xx-tiny: 3px;
2886
- --wds-status-toast-background-fill: #000624;
2887
2886
  --wds-status-toast-info-icon-fill: #ffffff;
2888
2887
  --wds-status-toast-text-fill: #ffffff;
2889
2888
  --wds-status-toast-text-font-line-height: 24px;
@@ -2958,6 +2957,7 @@
2958
2957
  --wds-thumbnail-title-padding-top: 6px;
2959
2958
  --wds-timeline-title-font-line-height: 18px;
2960
2959
  --wds-timeline-title-font-size: 14px;
2960
+ --wds-toast-background-fill: #000624;
2961
2961
  --wds-toggle-button-border-radius-square-large: 6px;
2962
2962
  --wds-toggle-button-border-radius-square-medium: 6px;
2963
2963
  --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);
@@ -779,6 +778,7 @@
779
778
  @property st-global(--wds-thumbnail-title-padding-top);
780
779
  @property st-global(--wds-timeline-title-font-line-height);
781
780
  @property st-global(--wds-timeline-title-font-size);
781
+ @property st-global(--wds-toast-background-fill);
782
782
  @property st-global(--wds-toggle-button-border-radius-square-large);
783
783
  @property st-global(--wds-toggle-button-border-radius-square-medium);
784
784
  @property st-global(--wds-toggle-button-border-radius-square-small);
@@ -1633,7 +1633,6 @@
1633
1633
  --wds-social-post-preview-content-padding-vertical: 12px;
1634
1634
  --wds-social-preview-content-padding-horizontal: 12px;
1635
1635
  --wds-social-preview-content-padding-vertical: 9px;
1636
- --wds-status-toast-background-fill: #000624;
1637
1636
  --wds-status-toast-info-icon-fill: #ffffff;
1638
1637
  --wds-status-toast-text-fill: #ffffff;
1639
1638
  --wds-status-toast-text-font-line-height: 24px;
@@ -1708,6 +1707,7 @@
1708
1707
  --wds-thumbnail-title-padding-top: 6px;
1709
1708
  --wds-timeline-title-font-line-height: 18px;
1710
1709
  --wds-timeline-title-font-size: 14px;
1710
+ --wds-toast-background-fill: #000624;
1711
1711
  --wds-toggle-button-border-radius-square-large: 6px;
1712
1712
  --wds-toggle-button-border-radius-square-medium: 6px;
1713
1713
  --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.113.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": "03d6135e3d1f6f3ea64142a49b9e107b2a6515790b357810af85f3a9"
37
37
  }
package/studio/all.css CHANGED
@@ -1328,6 +1328,7 @@
1328
1328
  --wds-toggle-button-fill-inverted-hover: var(--wds-color-fill-standard-tertiary-hover);
1329
1329
  --wds-toggle-button-fill-inverted-disabled: var(--wds-color-fill-standard-tertiary-disabled);
1330
1330
  --wds-toggle-button-fill-inverted: var(--wds-color-fill-standard-tertiary);
1331
+ --wds-toast-background-fill: var(--wds-color-fill-dark-primary);
1331
1332
  --wds-timeline-title-font-size: var(--wds-font-size-body-tiny);
1332
1333
  --wds-thumbnail-title-font-size-tiny: var(--wds-font-size-body-tiny);
1333
1334
  --wds-thumbnail-subtitle-font-size-tiny: var(--wds-font-size-body-tiny);
@@ -1340,7 +1341,6 @@
1340
1341
  --wds-status-toast-text-font-size: var(--wds-font-size-body-medium);
1341
1342
  --wds-status-toast-text-fill: var(--wds-color-text-standard-primary-light);
1342
1343
  --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
1344
  --wds-slider-track-color: var(--wds-color-fill-standard-secondary);
1345
1345
  --wds-slider-slider-knob-color-hover: var(--wds-color-fill-standard-primary-hover);
1346
1346
  --wds-slider-slider-knob-color: var(--wds-color-fill-standard-primary);
package/studio/all.st.css CHANGED
@@ -1316,7 +1316,6 @@
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);
1320
1319
  @property st-global(--wds-status-toast-info-icon-fill);
1321
1320
  @property st-global(--wds-status-toast-text-fill);
1322
1321
  @property st-global(--wds-status-toast-text-font-line-height);
@@ -1391,6 +1390,7 @@
1391
1390
  @property st-global(--wds-thumbnail-title-padding-top);
1392
1391
  @property st-global(--wds-timeline-title-font-line-height);
1393
1392
  @property st-global(--wds-timeline-title-font-size);
1393
+ @property st-global(--wds-toast-background-fill);
1394
1394
  @property st-global(--wds-toggle-button-border-radius-square-large);
1395
1395
  @property st-global(--wds-toggle-button-border-radius-square-medium);
1396
1396
  @property st-global(--wds-toggle-button-border-radius-square-small);
@@ -2867,7 +2867,6 @@
2867
2867
  --wds-space-padding-vertical-tiny: 12px;
2868
2868
  --wds-space-padding-vertical-x-tiny: 8px;
2869
2869
  --wds-space-padding-vertical-xx-tiny: 4px;
2870
- --wds-status-toast-background-fill: #131720;
2871
2870
  --wds-status-toast-info-icon-fill: #ffffff;
2872
2871
  --wds-status-toast-text-fill: #ffffff;
2873
2872
  --wds-status-toast-text-font-line-height: 24px;
@@ -2942,6 +2941,7 @@
2942
2941
  --wds-thumbnail-title-padding-top: 4px;
2943
2942
  --wds-timeline-title-font-line-height: 16px;
2944
2943
  --wds-timeline-title-font-size: 12px;
2944
+ --wds-toast-background-fill: #131720;
2945
2945
  --wds-toggle-button-border-radius-square-large: 6px;
2946
2946
  --wds-toggle-button-border-radius-square-medium: 6px;
2947
2947
  --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);
@@ -771,6 +770,7 @@
771
770
  @property st-global(--wds-thumbnail-title-padding-top);
772
771
  @property st-global(--wds-timeline-title-font-line-height);
773
772
  @property st-global(--wds-timeline-title-font-size);
773
+ @property st-global(--wds-toast-background-fill);
774
774
  @property st-global(--wds-toggle-button-border-radius-square-large);
775
775
  @property st-global(--wds-toggle-button-border-radius-square-medium);
776
776
  @property st-global(--wds-toggle-button-border-radius-square-small);
@@ -1625,7 +1625,6 @@
1625
1625
  --wds-social-post-preview-content-padding-vertical: 12px;
1626
1626
  --wds-social-preview-content-padding-horizontal: 12px;
1627
1627
  --wds-social-preview-content-padding-vertical: 8px;
1628
- --wds-status-toast-background-fill: #131720;
1629
1628
  --wds-status-toast-info-icon-fill: #ffffff;
1630
1629
  --wds-status-toast-text-fill: #ffffff;
1631
1630
  --wds-status-toast-text-font-line-height: 24px;
@@ -1700,6 +1699,7 @@
1700
1699
  --wds-thumbnail-title-padding-top: 4px;
1701
1700
  --wds-timeline-title-font-line-height: 16px;
1702
1701
  --wds-timeline-title-font-size: 12px;
1702
+ --wds-toast-background-fill: #131720;
1703
1703
  --wds-toggle-button-border-radius-square-large: 6px;
1704
1704
  --wds-toggle-button-border-radius-square-medium: 6px;
1705
1705
  --wds-toggle-button-border-radius-square-small: 4px;
package/wixel/all.css CHANGED
@@ -1336,6 +1336,7 @@
1336
1336
  --wds-toggle-button-fill-inverted-selected: var(--wds-color-fill-standard-primary);
1337
1337
  --wds-toggle-button-fill-inverted-hover: var(--wds-color-fill-standard-secondary-hover);
1338
1338
  --wds-toggle-button-fill-inverted: var(--wds-color-fill-standard-secondary);
1339
+ --wds-toast-background-fill: var(--wds-color-fill-surface-overlay-dark);
1339
1340
  --wds-timeline-title-font-size: var(--wds-font-size-body-tiny);
1340
1341
  --wds-thumbnail-title-font-size-tiny: var(--wds-font-size-body-tiny);
1341
1342
  --wds-thumbnail-subtitle-font-size-tiny: var(--wds-font-size-body-extra-tiny);
@@ -1350,7 +1351,6 @@
1350
1351
  --wds-status-toast-text-font-size: var(--wds-font-size-body-tiny);
1351
1352
  --wds-status-toast-text-fill: var(--wds-color-text-standard-primary-light);
1352
1353
  --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
1354
  --wds-slider-slider-knob-color-hover: var(--wds-color-fill-standard-primary-hover);
1355
1355
  --wds-sidebar-item-title: var(--wds-color-text-standard-secondary-light);
1356
1356
  --wds-sidebar-item-text-neutral-disabled: var(--wds-color-text-disabled);
package/wixel/all.st.css CHANGED
@@ -1326,7 +1326,6 @@
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);
1330
1329
  @property st-global(--wds-status-toast-info-icon-fill);
1331
1330
  @property st-global(--wds-status-toast-text-fill);
1332
1331
  @property st-global(--wds-status-toast-text-font-line-height);
@@ -1400,6 +1399,7 @@
1400
1399
  @property st-global(--wds-thumbnail-title-padding-top);
1401
1400
  @property st-global(--wds-timeline-title-font-line-height);
1402
1401
  @property st-global(--wds-timeline-title-font-size);
1402
+ @property st-global(--wds-toast-background-fill);
1403
1403
  @property st-global(--wds-toggle-button-border-radius-square-large);
1404
1404
  @property st-global(--wds-toggle-button-border-radius-square-medium);
1405
1405
  @property st-global(--wds-toggle-button-border-radius-square-small);
@@ -2886,7 +2886,6 @@
2886
2886
  --wds-space-padding-vertical-tiny: 12px;
2887
2887
  --wds-space-padding-vertical-x-tiny: 8px;
2888
2888
  --wds-space-padding-vertical-xx-tiny: 4px;
2889
- --wds-status-toast-background-fill: #131720;
2890
2889
  --wds-status-toast-info-icon-fill: #ffffff;
2891
2890
  --wds-status-toast-text-fill: #ffffff;
2892
2891
  --wds-status-toast-text-font-line-height: 16px;
@@ -2960,6 +2959,7 @@
2960
2959
  --wds-thumbnail-title-padding-top: 6px;
2961
2960
  --wds-timeline-title-font-line-height: 16px;
2962
2961
  --wds-timeline-title-font-size: 12px;
2962
+ --wds-toast-background-fill: #131720;
2963
2963
  --wds-toggle-button-border-radius-square-large: 8px;
2964
2964
  --wds-toggle-button-border-radius-square-medium: 8px;
2965
2965
  --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);
@@ -776,6 +775,7 @@
776
775
  @property st-global(--wds-thumbnail-title-padding-top);
777
776
  @property st-global(--wds-timeline-title-font-line-height);
778
777
  @property st-global(--wds-timeline-title-font-size);
778
+ @property st-global(--wds-toast-background-fill);
779
779
  @property st-global(--wds-toggle-button-border-radius-square-large);
780
780
  @property st-global(--wds-toggle-button-border-radius-square-medium);
781
781
  @property st-global(--wds-toggle-button-border-radius-square-small);
@@ -1636,7 +1636,6 @@
1636
1636
  --wds-social-post-preview-content-padding-vertical: 12px;
1637
1637
  --wds-social-preview-content-padding-horizontal: 12px;
1638
1638
  --wds-social-preview-content-padding-vertical: 8px;
1639
- --wds-status-toast-background-fill: #131720;
1640
1639
  --wds-status-toast-info-icon-fill: #ffffff;
1641
1640
  --wds-status-toast-text-fill: #ffffff;
1642
1641
  --wds-status-toast-text-font-line-height: 16px;
@@ -1710,6 +1709,7 @@
1710
1709
  --wds-thumbnail-title-padding-top: 6px;
1711
1710
  --wds-timeline-title-font-line-height: 16px;
1712
1711
  --wds-timeline-title-font-size: 12px;
1712
+ --wds-toast-background-fill: #131720;
1713
1713
  --wds-toggle-button-border-radius-square-large: 8px;
1714
1714
  --wds-toggle-button-border-radius-square-medium: 8px;
1715
1715
  --wds-toggle-button-border-radius-square-small: 8px;