@wix/design-system-tokens 1.111.0 → 1.112.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 +4 -0
  3. package/all.st.css +8 -0
  4. package/component.st.css +8 -0
  5. package/package.json +2 -2
  6. package/studio/all.css +7 -0
  7. package/studio/all.st.css +14 -0
  8. package/studio/component.st.css +14 -0
  9. package/wixel/all.css +4 -0
  10. package/wixel/all.st.css +8 -0
  11. package/wixel/component.st.css +8 -0
package/CHANGELOG.md CHANGED
@@ -1,3 +1,9 @@
1
+ ## 1.112.0 - 2025-06-07
2
+
3
+ ### Features
4
+
5
+ - feat(tokens): new component level token for picasso dark theme [14963](https://github.com/wix-private/wix-design-systems/pull/14963)
6
+
1
7
  ## 1.102.0 - 2025-05-12
2
8
 
3
9
  ### Features
package/all.css CHANGED
@@ -1043,6 +1043,7 @@
1043
1043
  --wds-input-padding-horizontal-small: var(--wds-space-100);
1044
1044
  --wds-input-padding-horizontal-medium: var(--wds-space-100);
1045
1045
  --wds-input-padding-horizontal-large: var(--wds-space-150);
1046
+ --wds-input-border-width-default: var(--wds-border-width-none);
1046
1047
  --wds-input-border-radius-round-tiny: var(--wds-border-radius-full);
1047
1048
  --wds-input-border-radius-round-small: var(--wds-border-radius-full);
1048
1049
  --wds-input-border-radius-round-medium: var(--wds-border-radius-full);
@@ -1309,6 +1310,9 @@
1309
1310
  --wds-tabs-selection-fill-primary: var(--wds-color-fill-standard-primary);
1310
1311
  --wds-tabs-label-font-size-small: var(--wds-font-size-body-small);
1311
1312
  --wds-status-toast-text-font-size: var(--wds-font-size-body-medium);
1313
+ --wds-status-toast-text-fill: var(--wds-color-text-standard-primary-light);
1314
+ --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);
1312
1316
  --wds-slider-track-color: var(--wds-color-fill-standard-secondary);
1313
1317
  --wds-slider-slider-knob-color-hover: var(--wds-color-fill-standard-primary);
1314
1318
  --wds-slider-slider-knob-color: var(--wds-color-fill-standard-primary);
package/all.st.css CHANGED
@@ -844,6 +844,7 @@
844
844
  @property st-global(--wds-input-border-radius-round-medium);
845
845
  @property st-global(--wds-input-border-radius-round-small);
846
846
  @property st-global(--wds-input-border-radius-round-tiny);
847
+ @property st-global(--wds-input-border-width-default);
847
848
  @property st-global(--wds-input-icon-affix-fill);
848
849
  @property st-global(--wds-input-padding-horizontal-large);
849
850
  @property st-global(--wds-input-padding-horizontal-medium);
@@ -1327,6 +1328,9 @@
1327
1328
  @property st-global(--wds-space-padding-vertical-tiny);
1328
1329
  @property st-global(--wds-space-padding-vertical-x-tiny);
1329
1330
  @property st-global(--wds-space-padding-vertical-xx-tiny);
1331
+ @property st-global(--wds-status-toast-background-fill);
1332
+ @property st-global(--wds-status-toast-info-icon-fill);
1333
+ @property st-global(--wds-status-toast-text-fill);
1330
1334
  @property st-global(--wds-status-toast-text-font-line-height);
1331
1335
  @property st-global(--wds-status-toast-text-font-size);
1332
1336
  @property st-global(--wds-status-toast-width);
@@ -2395,6 +2399,7 @@
2395
2399
  --wds-input-border-radius-round-medium: 1000px;
2396
2400
  --wds-input-border-radius-round-small: 1000px;
2397
2401
  --wds-input-border-radius-round-tiny: 1000px;
2402
+ --wds-input-border-width-default: 0;
2398
2403
  --wds-input-icon-affix-fill: #116dff;
2399
2404
  --wds-input-padding-horizontal-large: 9px;
2400
2405
  --wds-input-padding-horizontal-medium: 6px;
@@ -2878,6 +2883,9 @@
2878
2883
  --wds-space-padding-vertical-tiny: 12px;
2879
2884
  --wds-space-padding-vertical-x-tiny: 6px;
2880
2885
  --wds-space-padding-vertical-xx-tiny: 3px;
2886
+ --wds-status-toast-background-fill: #000624;
2887
+ --wds-status-toast-info-icon-fill: #ffffff;
2888
+ --wds-status-toast-text-fill: #ffffff;
2881
2889
  --wds-status-toast-text-font-line-height: 24px;
2882
2890
  --wds-status-toast-text-font-size: 16px;
2883
2891
  --wds-status-toast-width: 600px;
package/component.st.css CHANGED
@@ -309,6 +309,7 @@
309
309
  @property st-global(--wds-input-border-radius-round-medium);
310
310
  @property st-global(--wds-input-border-radius-round-small);
311
311
  @property st-global(--wds-input-border-radius-round-tiny);
312
+ @property st-global(--wds-input-border-width-default);
312
313
  @property st-global(--wds-input-icon-affix-fill);
313
314
  @property st-global(--wds-input-padding-horizontal-large);
314
315
  @property st-global(--wds-input-padding-horizontal-medium);
@@ -703,6 +704,9 @@
703
704
  @property st-global(--wds-social-post-preview-content-padding-vertical);
704
705
  @property st-global(--wds-social-preview-content-padding-horizontal);
705
706
  @property st-global(--wds-social-preview-content-padding-vertical);
707
+ @property st-global(--wds-status-toast-background-fill);
708
+ @property st-global(--wds-status-toast-info-icon-fill);
709
+ @property st-global(--wds-status-toast-text-fill);
706
710
  @property st-global(--wds-status-toast-text-font-line-height);
707
711
  @property st-global(--wds-status-toast-text-font-size);
708
712
  @property st-global(--wds-status-toast-width);
@@ -1234,6 +1238,7 @@
1234
1238
  --wds-input-border-radius-round-medium: 1000px;
1235
1239
  --wds-input-border-radius-round-small: 1000px;
1236
1240
  --wds-input-border-radius-round-tiny: 1000px;
1241
+ --wds-input-border-width-default: 0;
1237
1242
  --wds-input-icon-affix-fill: #116dff;
1238
1243
  --wds-input-padding-horizontal-large: 9px;
1239
1244
  --wds-input-padding-horizontal-medium: 6px;
@@ -1628,6 +1633,9 @@
1628
1633
  --wds-social-post-preview-content-padding-vertical: 12px;
1629
1634
  --wds-social-preview-content-padding-horizontal: 12px;
1630
1635
  --wds-social-preview-content-padding-vertical: 9px;
1636
+ --wds-status-toast-background-fill: #000624;
1637
+ --wds-status-toast-info-icon-fill: #ffffff;
1638
+ --wds-status-toast-text-fill: #ffffff;
1631
1639
  --wds-status-toast-text-font-line-height: 24px;
1632
1640
  --wds-status-toast-text-font-size: 16px;
1633
1641
  --wds-status-toast-width: 600px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wix/design-system-tokens",
3
- "version": "1.111.0",
3
+ "version": "1.112.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": "1a6fcb8f06f99dca3053cff17936d781aae0561106d5a6e1d428fa3e"
36
+ "falconPackageHash": "8b95834f3dd5f5c66b423104adf409e5518d1457a569e4677ae357f6"
37
37
  }
package/studio/all.css CHANGED
@@ -280,6 +280,7 @@
280
280
  --wds-tabs-selection-height: 3px;
281
281
  --wds-swatches-swatch-active-border-radius-small: 5px;
282
282
  --wds-swatches-swatch-active-border-radius-medium: 7px;
283
+ --wds-status-toast-width: 600px;
283
284
  --wds-slider-track-size-transparent: 2px;
284
285
  --wds-slider-track-size: 2px;
285
286
  --wds-slider-slider-knob-size-transparent: 16px;
@@ -1063,6 +1064,7 @@
1063
1064
  --wds-input-padding-horizontal-small: var(--wds-space-100);
1064
1065
  --wds-input-padding-horizontal-medium: var(--wds-space-200);
1065
1066
  --wds-input-padding-horizontal-large: var(--wds-space-200);
1067
+ --wds-input-border-width-default: var(--wds-border-width-none);
1066
1068
  --wds-input-border-radius-round-tiny: var(--wds-border-radius-full);
1067
1069
  --wds-input-border-radius-round-small: var(--wds-border-radius-full);
1068
1070
  --wds-input-border-radius-round-medium: var(--wds-border-radius-full);
@@ -1335,6 +1337,10 @@
1335
1337
  --wds-tabs-selection-fill-secondary: var(--wds-color-fill-standard-primary);
1336
1338
  --wds-tabs-selection-fill-primary: var(--wds-color-fill-standard-primary);
1337
1339
  --wds-tabs-label-font-size-small: var(--wds-font-size-body-tiny);
1340
+ --wds-status-toast-text-font-size: var(--wds-font-size-body-medium);
1341
+ --wds-status-toast-text-fill: var(--wds-color-text-standard-primary-light);
1342
+ --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);
1338
1344
  --wds-slider-track-color: var(--wds-color-fill-standard-secondary);
1339
1345
  --wds-slider-slider-knob-color-hover: var(--wds-color-fill-standard-primary-hover);
1340
1346
  --wds-slider-slider-knob-color: var(--wds-color-fill-standard-primary);
@@ -1507,6 +1513,7 @@
1507
1513
  --wds-thumbnail-subtitle-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
1508
1514
  --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%);
1509
1515
  --wds-tabs-label-line-height-small: var(--wds-font-line-height-body-tiny);
1516
+ --wds-status-toast-text-font-line-height: var(--wds-font-line-height-body-medium);
1510
1517
  --wds-side-panel-title-font-line-height: var(--wds-font-line-height-body-medium);
1511
1518
  --wds-side-panel-floating-title-font-line-height: var(--wds-font-line-height-body-medium);
1512
1519
  --wds-segmented-toggle-label-font-line-height-small: var(--wds-font-line-height-body-small);
package/studio/all.st.css CHANGED
@@ -840,6 +840,7 @@
840
840
  @property st-global(--wds-input-border-radius-round-medium);
841
841
  @property st-global(--wds-input-border-radius-round-small);
842
842
  @property st-global(--wds-input-border-radius-round-tiny);
843
+ @property st-global(--wds-input-border-width-default);
843
844
  @property st-global(--wds-input-icon-affix-fill);
844
845
  @property st-global(--wds-input-padding-horizontal-large);
845
846
  @property st-global(--wds-input-padding-horizontal-medium);
@@ -1315,6 +1316,12 @@
1315
1316
  @property st-global(--wds-space-padding-vertical-tiny);
1316
1317
  @property st-global(--wds-space-padding-vertical-x-tiny);
1317
1318
  @property st-global(--wds-space-padding-vertical-xx-tiny);
1319
+ @property st-global(--wds-status-toast-background-fill);
1320
+ @property st-global(--wds-status-toast-info-icon-fill);
1321
+ @property st-global(--wds-status-toast-text-fill);
1322
+ @property st-global(--wds-status-toast-text-font-line-height);
1323
+ @property st-global(--wds-status-toast-text-font-size);
1324
+ @property st-global(--wds-status-toast-width);
1318
1325
  @property st-global(--wds-stepper-prefix-size-circle);
1319
1326
  @property st-global(--wds-stepper-prefix-size-number);
1320
1327
  @property st-global(--wds-swatches-list-gap);
@@ -2384,6 +2391,7 @@
2384
2391
  --wds-input-border-radius-round-medium: 1000px;
2385
2392
  --wds-input-border-radius-round-small: 1000px;
2386
2393
  --wds-input-border-radius-round-tiny: 1000px;
2394
+ --wds-input-border-width-default: 0;
2387
2395
  --wds-input-icon-affix-fill: #131720;
2388
2396
  --wds-input-padding-horizontal-large: 8px;
2389
2397
  --wds-input-padding-horizontal-medium: 8px;
@@ -2859,6 +2867,12 @@
2859
2867
  --wds-space-padding-vertical-tiny: 12px;
2860
2868
  --wds-space-padding-vertical-x-tiny: 8px;
2861
2869
  --wds-space-padding-vertical-xx-tiny: 4px;
2870
+ --wds-status-toast-background-fill: #131720;
2871
+ --wds-status-toast-info-icon-fill: #ffffff;
2872
+ --wds-status-toast-text-fill: #ffffff;
2873
+ --wds-status-toast-text-font-line-height: 24px;
2874
+ --wds-status-toast-text-font-size: 16px;
2875
+ --wds-status-toast-width: 600px;
2862
2876
  --wds-stepper-prefix-size-circle: 20px;
2863
2877
  --wds-stepper-prefix-size-number: 16px;
2864
2878
  --wds-swatches-list-gap: 12px;
package/studio/component.st.css CHANGED
@@ -309,6 +309,7 @@
309
309
  @property st-global(--wds-input-border-radius-round-medium);
310
310
  @property st-global(--wds-input-border-radius-round-small);
311
311
  @property st-global(--wds-input-border-radius-round-tiny);
312
+ @property st-global(--wds-input-border-width-default);
312
313
  @property st-global(--wds-input-icon-affix-fill);
313
314
  @property st-global(--wds-input-padding-horizontal-large);
314
315
  @property st-global(--wds-input-padding-horizontal-medium);
@@ -695,6 +696,12 @@
695
696
  @property st-global(--wds-social-post-preview-content-padding-vertical);
696
697
  @property st-global(--wds-social-preview-content-padding-horizontal);
697
698
  @property st-global(--wds-social-preview-content-padding-vertical);
699
+ @property st-global(--wds-status-toast-background-fill);
700
+ @property st-global(--wds-status-toast-info-icon-fill);
701
+ @property st-global(--wds-status-toast-text-fill);
702
+ @property st-global(--wds-status-toast-text-font-line-height);
703
+ @property st-global(--wds-status-toast-text-font-size);
704
+ @property st-global(--wds-status-toast-width);
698
705
  @property st-global(--wds-stepper-prefix-size-circle);
699
706
  @property st-global(--wds-stepper-prefix-size-number);
700
707
  @property st-global(--wds-swatches-list-gap);
@@ -1231,6 +1238,7 @@
1231
1238
  --wds-input-border-radius-round-medium: 1000px;
1232
1239
  --wds-input-border-radius-round-small: 1000px;
1233
1240
  --wds-input-border-radius-round-tiny: 1000px;
1241
+ --wds-input-border-width-default: 0;
1234
1242
  --wds-input-icon-affix-fill: #131720;
1235
1243
  --wds-input-padding-horizontal-large: 8px;
1236
1244
  --wds-input-padding-horizontal-medium: 8px;
@@ -1617,6 +1625,12 @@
1617
1625
  --wds-social-post-preview-content-padding-vertical: 12px;
1618
1626
  --wds-social-preview-content-padding-horizontal: 12px;
1619
1627
  --wds-social-preview-content-padding-vertical: 8px;
1628
+ --wds-status-toast-background-fill: #131720;
1629
+ --wds-status-toast-info-icon-fill: #ffffff;
1630
+ --wds-status-toast-text-fill: #ffffff;
1631
+ --wds-status-toast-text-font-line-height: 24px;
1632
+ --wds-status-toast-text-font-size: 16px;
1633
+ --wds-status-toast-width: 600px;
1620
1634
  --wds-stepper-prefix-size-circle: 20px;
1621
1635
  --wds-stepper-prefix-size-number: 16px;
1622
1636
  --wds-swatches-list-gap: 12px;
package/wixel/all.css CHANGED
@@ -1071,6 +1071,7 @@
1071
1071
  --wds-input-padding-horizontal-small: var(--wds-space-250);
1072
1072
  --wds-input-padding-horizontal-medium: var(--wds-space-300);
1073
1073
  --wds-input-padding-horizontal-large: var(--wds-space-200);
1074
+ --wds-input-border-width-default: var(--wds-border-width-none);
1074
1075
  --wds-input-border-radius-round-tiny: var(--wds-border-radius-full);
1075
1076
  --wds-input-border-radius-round-small: var(--wds-border-radius-full);
1076
1077
  --wds-input-border-radius-round-medium: var(--wds-border-radius-full);
@@ -1347,6 +1348,9 @@
1347
1348
  --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%);
1348
1349
  --wds-tabs-label-font-size-small: var(--wds-font-size-body-tiny);
1349
1350
  --wds-status-toast-text-font-size: var(--wds-font-size-body-tiny);
1351
+ --wds-status-toast-text-fill: var(--wds-color-text-standard-primary-light);
1352
+ --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);
1350
1354
  --wds-slider-slider-knob-color-hover: var(--wds-color-fill-standard-primary-hover);
1351
1355
  --wds-sidebar-item-title: var(--wds-color-text-standard-secondary-light);
1352
1356
  --wds-sidebar-item-text-neutral-disabled: var(--wds-color-text-disabled);
package/wixel/all.st.css CHANGED
@@ -841,6 +841,7 @@
841
841
  @property st-global(--wds-input-border-radius-round-medium);
842
842
  @property st-global(--wds-input-border-radius-round-small);
843
843
  @property st-global(--wds-input-border-radius-round-tiny);
844
+ @property st-global(--wds-input-border-width-default);
844
845
  @property st-global(--wds-input-icon-affix-fill);
845
846
  @property st-global(--wds-input-padding-horizontal-large);
846
847
  @property st-global(--wds-input-padding-horizontal-medium);
@@ -1325,6 +1326,9 @@
1325
1326
  @property st-global(--wds-space-padding-vertical-tiny);
1326
1327
  @property st-global(--wds-space-padding-vertical-x-tiny);
1327
1328
  @property st-global(--wds-space-padding-vertical-xx-tiny);
1329
+ @property st-global(--wds-status-toast-background-fill);
1330
+ @property st-global(--wds-status-toast-info-icon-fill);
1331
+ @property st-global(--wds-status-toast-text-fill);
1328
1332
  @property st-global(--wds-status-toast-text-font-line-height);
1329
1333
  @property st-global(--wds-status-toast-text-font-size);
1330
1334
  @property st-global(--wds-status-toast-width);
@@ -2397,6 +2401,7 @@
2397
2401
  --wds-input-border-radius-round-medium: 1000px;
2398
2402
  --wds-input-border-radius-round-small: 1000px;
2399
2403
  --wds-input-border-radius-round-tiny: 1000px;
2404
+ --wds-input-border-width-default: 0;
2400
2405
  --wds-input-icon-affix-fill: #131720;
2401
2406
  --wds-input-padding-horizontal-large: 8px;
2402
2407
  --wds-input-padding-horizontal-medium: 12px;
@@ -2881,6 +2886,9 @@
2881
2886
  --wds-space-padding-vertical-tiny: 12px;
2882
2887
  --wds-space-padding-vertical-x-tiny: 8px;
2883
2888
  --wds-space-padding-vertical-xx-tiny: 4px;
2889
+ --wds-status-toast-background-fill: #131720;
2890
+ --wds-status-toast-info-icon-fill: #ffffff;
2891
+ --wds-status-toast-text-fill: #ffffff;
2884
2892
  --wds-status-toast-text-font-line-height: 16px;
2885
2893
  --wds-status-toast-text-font-size: 12px;
2886
2894
  --wds-status-toast-width: 600px;
package/wixel/component.st.css CHANGED
@@ -306,6 +306,7 @@
306
306
  @property st-global(--wds-input-border-radius-round-medium);
307
307
  @property st-global(--wds-input-border-radius-round-small);
308
308
  @property st-global(--wds-input-border-radius-round-tiny);
309
+ @property st-global(--wds-input-border-width-default);
309
310
  @property st-global(--wds-input-icon-affix-fill);
310
311
  @property st-global(--wds-input-padding-horizontal-large);
311
312
  @property st-global(--wds-input-padding-horizontal-medium);
@@ -701,6 +702,9 @@
701
702
  @property st-global(--wds-social-post-preview-content-padding-vertical);
702
703
  @property st-global(--wds-social-preview-content-padding-horizontal);
703
704
  @property st-global(--wds-social-preview-content-padding-vertical);
705
+ @property st-global(--wds-status-toast-background-fill);
706
+ @property st-global(--wds-status-toast-info-icon-fill);
707
+ @property st-global(--wds-status-toast-text-fill);
704
708
  @property st-global(--wds-status-toast-text-font-line-height);
705
709
  @property st-global(--wds-status-toast-text-font-size);
706
710
  @property st-global(--wds-status-toast-width);
@@ -1236,6 +1240,7 @@
1236
1240
  --wds-input-border-radius-round-medium: 1000px;
1237
1241
  --wds-input-border-radius-round-small: 1000px;
1238
1242
  --wds-input-border-radius-round-tiny: 1000px;
1243
+ --wds-input-border-width-default: 0;
1239
1244
  --wds-input-icon-affix-fill: #131720;
1240
1245
  --wds-input-padding-horizontal-large: 8px;
1241
1246
  --wds-input-padding-horizontal-medium: 12px;
@@ -1631,6 +1636,9 @@
1631
1636
  --wds-social-post-preview-content-padding-vertical: 12px;
1632
1637
  --wds-social-preview-content-padding-horizontal: 12px;
1633
1638
  --wds-social-preview-content-padding-vertical: 8px;
1639
+ --wds-status-toast-background-fill: #131720;
1640
+ --wds-status-toast-info-icon-fill: #ffffff;
1641
+ --wds-status-toast-text-fill: #ffffff;
1634
1642
  --wds-status-toast-text-font-line-height: 16px;
1635
1643
  --wds-status-toast-text-font-size: 12px;
1636
1644
  --wds-status-toast-width: 600px;