@wix/design-system-tokens 1.79.0 → 1.80.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 (8) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/all.css +10 -3
  3. package/all.st.css +17 -3
  4. package/component.st.css +17 -3
  5. package/package.json +2 -2
  6. package/studio/all.css +10 -3
  7. package/studio/all.st.css +17 -3
  8. package/studio/component.st.css +17 -3
package/CHANGELOG.md CHANGED
@@ -1,3 +1,10 @@
1
+ ## 1.80.0 - 2025-03-04
2
+
3
+ ### Visual Breaking Changes
4
+
5
+ - breaking(ListItemSection): list-item-section font size change in studio theme [14558](https://github.com/wix-private/wix-design-systems/pull/14558)
6
+ - breaking(ColorPicker): tokenization [14568](https://github.com/wix-private/wix-design-systems/pull/14568)
7
+
1
8
  ## 1.79.0 - 2025-02-27
2
9
 
3
10
  ### Visual Breaking Changes
package/all.css CHANGED
@@ -121,6 +121,9 @@
121
121
  --wds-close-button-standard-filled-text: #116dff;
122
122
  --wds-close-button-standard-filled-text-disabled: #ffffff;
123
123
  --wds-close-button-standard-filled-text-hover: #116dff;
124
+ --wds-color-picker-padding-horizontal: 18px;
125
+ --wds-color-picker-padding-vertical: 12px;
126
+ --wds-color-picker-width: 240px;
124
127
  --wds-composer-sidebar-bottom-width: 90px;
125
128
  --wds-composer-sidebar-end-max-width: 240px;
126
129
  --wds-composer-sidebar-item-bottom-padding-horizontal-large: 6px;
@@ -266,6 +269,8 @@
266
269
  --wds-list-item-action-padding-vertical-medium-screen-small: 12px;
267
270
  --wds-list-item-action-padding-vertical-small: 6px;
268
271
  --wds-list-item-action-padding-vertical-small-screen-small: 12px;
272
+ --wds-list-item-section-font-size: 14px;
273
+ --wds-list-item-section-line-height: 18px;
269
274
  --wds-list-item-section-padding-horizontal: 24px;
270
275
  --wds-list-item-select-active-fill: #116dff;
271
276
  --wds-list-item-select-active-fill-active: #084ebd;
@@ -527,9 +532,11 @@
527
532
  --wds-swatches-swatch-active-border-radius-small: 5px;
528
533
  --wds-swatches-swatch-border-radius-medium: 6px;
529
534
  --wds-swatches-swatch-border-radius-small: 2px;
530
- --wds-swatches-swatch-size-large: 30px;
531
- --wds-swatches-swatch-size-medium: 24px;
532
- --wds-swatches-swatch-size-small: 18px;
535
+ --wds-swatches-swatch-size-large: 42px;
536
+ --wds-swatches-swatch-size-medium: 36px;
537
+ --wds-swatches-swatch-size-small: 30px;
538
+ --wds-swatches-swatch-size-tiny: 24px;
539
+ --wds-swatches-swatch-size-x-tiny: 18px;
533
540
  --wds-tabs-gap-medium: 6px;
534
541
  --wds-tabs-gap-small: 6px;
535
542
  --wds-tabs-label-font-size-small: 14px;
package/all.st.css CHANGED
@@ -466,6 +466,9 @@
466
466
  @property st-global(--wds-color-orange-400);
467
467
  @property st-global(--wds-color-orange-500);
468
468
  @property st-global(--wds-color-orange-600);
469
+ @property st-global(--wds-color-picker-padding-horizontal);
470
+ @property st-global(--wds-color-picker-padding-vertical);
471
+ @property st-global(--wds-color-picker-width);
469
472
  @property st-global(--wds-color-purple-0);
470
473
  @property st-global(--wds-color-purple-50);
471
474
  @property st-global(--wds-color-purple-100);
@@ -714,6 +717,8 @@
714
717
  @property st-global(--wds-list-item-padding-vertical-tiny);
715
718
  @property st-global(--wds-list-item-padding-vertical-x-tiny);
716
719
  @property st-global(--wds-list-item-padding-vertical-xx-tiny);
720
+ @property st-global(--wds-list-item-section-font-size);
721
+ @property st-global(--wds-list-item-section-line-height);
717
722
  @property st-global(--wds-list-item-section-padding-horizontal);
718
723
  @property st-global(--wds-list-item-select-active-fill);
719
724
  @property st-global(--wds-list-item-select-active-fill-active);
@@ -1044,6 +1049,8 @@
1044
1049
  @property st-global(--wds-swatches-swatch-size-large);
1045
1050
  @property st-global(--wds-swatches-swatch-size-medium);
1046
1051
  @property st-global(--wds-swatches-swatch-size-small);
1052
+ @property st-global(--wds-swatches-swatch-size-tiny);
1053
+ @property st-global(--wds-swatches-swatch-size-x-tiny);
1047
1054
  @property st-global(--wds-tabs-gap-medium);
1048
1055
  @property st-global(--wds-tabs-gap-small);
1049
1056
  @property st-global(--wds-tabs-label-font-size-small);
@@ -1659,6 +1666,9 @@
1659
1666
  --wds-color-orange-400: #fddbc8;
1660
1667
  --wds-color-orange-500: #fee5d7;
1661
1668
  --wds-color-orange-600: #feefe6;
1669
+ --wds-color-picker-padding-horizontal: 18px;
1670
+ --wds-color-picker-padding-vertical: 12px;
1671
+ --wds-color-picker-width: 240px;
1662
1672
  --wds-color-purple-0: #7416a5;
1663
1673
  --wds-color-purple-50: #8e1dd1;
1664
1674
  --wds-color-purple-100: #9a27d5;
@@ -1907,6 +1917,8 @@
1907
1917
  --wds-list-item-padding-vertical-tiny: 12px;
1908
1918
  --wds-list-item-padding-vertical-x-tiny: 6px;
1909
1919
  --wds-list-item-padding-vertical-xx-tiny: 3px;
1920
+ --wds-list-item-section-font-size: 14px;
1921
+ --wds-list-item-section-line-height: 18px;
1910
1922
  --wds-list-item-section-padding-horizontal: 24px;
1911
1923
  --wds-list-item-select-active-fill: #116dff;
1912
1924
  --wds-list-item-select-active-fill-active: #084ebd;
@@ -2234,9 +2246,11 @@
2234
2246
  --wds-swatches-swatch-active-border-radius-small: 5px;
2235
2247
  --wds-swatches-swatch-border-radius-medium: 6px;
2236
2248
  --wds-swatches-swatch-border-radius-small: 2px;
2237
- --wds-swatches-swatch-size-large: 30px;
2238
- --wds-swatches-swatch-size-medium: 24px;
2239
- --wds-swatches-swatch-size-small: 18px;
2249
+ --wds-swatches-swatch-size-large: 42px;
2250
+ --wds-swatches-swatch-size-medium: 36px;
2251
+ --wds-swatches-swatch-size-small: 30px;
2252
+ --wds-swatches-swatch-size-tiny: 24px;
2253
+ --wds-swatches-swatch-size-x-tiny: 18px;
2240
2254
  --wds-tabs-gap-medium: 6px;
2241
2255
  --wds-tabs-gap-small: 6px;
2242
2256
  --wds-tabs-label-font-size-small: 14px;
package/component.st.css CHANGED
@@ -120,6 +120,9 @@
120
120
  @property st-global(--wds-close-button-standard-filled-text);
121
121
  @property st-global(--wds-close-button-standard-filled-text-disabled);
122
122
  @property st-global(--wds-close-button-standard-filled-text-hover);
123
+ @property st-global(--wds-color-picker-padding-horizontal);
124
+ @property st-global(--wds-color-picker-padding-vertical);
125
+ @property st-global(--wds-color-picker-width);
123
126
  @property st-global(--wds-composer-sidebar-bottom-width);
124
127
  @property st-global(--wds-composer-sidebar-end-max-width);
125
128
  @property st-global(--wds-composer-sidebar-item-bottom-padding-horizontal-large);
@@ -265,6 +268,8 @@
265
268
  @property st-global(--wds-list-item-padding-vertical-tiny);
266
269
  @property st-global(--wds-list-item-padding-vertical-x-tiny);
267
270
  @property st-global(--wds-list-item-padding-vertical-xx-tiny);
271
+ @property st-global(--wds-list-item-section-font-size);
272
+ @property st-global(--wds-list-item-section-line-height);
268
273
  @property st-global(--wds-list-item-section-padding-horizontal);
269
274
  @property st-global(--wds-list-item-select-active-fill);
270
275
  @property st-global(--wds-list-item-select-active-fill-active);
@@ -529,6 +534,8 @@
529
534
  @property st-global(--wds-swatches-swatch-size-large);
530
535
  @property st-global(--wds-swatches-swatch-size-medium);
531
536
  @property st-global(--wds-swatches-swatch-size-small);
537
+ @property st-global(--wds-swatches-swatch-size-tiny);
538
+ @property st-global(--wds-swatches-swatch-size-x-tiny);
532
539
  @property st-global(--wds-tabs-gap-medium);
533
540
  @property st-global(--wds-tabs-gap-small);
534
541
  @property st-global(--wds-tabs-label-font-size-small);
@@ -798,6 +805,9 @@
798
805
  --wds-close-button-standard-filled-text: #116dff;
799
806
  --wds-close-button-standard-filled-text-disabled: #ffffff;
800
807
  --wds-close-button-standard-filled-text-hover: #116dff;
808
+ --wds-color-picker-padding-horizontal: 18px;
809
+ --wds-color-picker-padding-vertical: 12px;
810
+ --wds-color-picker-width: 240px;
801
811
  --wds-composer-sidebar-bottom-width: 90px;
802
812
  --wds-composer-sidebar-end-max-width: 240px;
803
813
  --wds-composer-sidebar-item-bottom-padding-horizontal-large: 6px;
@@ -943,6 +953,8 @@
943
953
  --wds-list-item-padding-vertical-tiny: 12px;
944
954
  --wds-list-item-padding-vertical-x-tiny: 6px;
945
955
  --wds-list-item-padding-vertical-xx-tiny: 3px;
956
+ --wds-list-item-section-font-size: 14px;
957
+ --wds-list-item-section-line-height: 18px;
946
958
  --wds-list-item-section-padding-horizontal: 24px;
947
959
  --wds-list-item-select-active-fill: #116dff;
948
960
  --wds-list-item-select-active-fill-active: #084ebd;
@@ -1204,9 +1216,11 @@
1204
1216
  --wds-swatches-swatch-active-border-radius-small: 5px;
1205
1217
  --wds-swatches-swatch-border-radius-medium: 6px;
1206
1218
  --wds-swatches-swatch-border-radius-small: 2px;
1207
- --wds-swatches-swatch-size-large: 30px;
1208
- --wds-swatches-swatch-size-medium: 24px;
1209
- --wds-swatches-swatch-size-small: 18px;
1219
+ --wds-swatches-swatch-size-large: 42px;
1220
+ --wds-swatches-swatch-size-medium: 36px;
1221
+ --wds-swatches-swatch-size-small: 30px;
1222
+ --wds-swatches-swatch-size-tiny: 24px;
1223
+ --wds-swatches-swatch-size-x-tiny: 18px;
1210
1224
  --wds-tabs-gap-medium: 6px;
1211
1225
  --wds-tabs-gap-small: 6px;
1212
1226
  --wds-tabs-label-font-size-small: 14px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wix/design-system-tokens",
3
- "version": "1.79.0",
3
+ "version": "1.80.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": "dd3f7d4e52947c51074f58951bdfeba3c3976efef6bce4f8027520f2"
36
+ "falconPackageHash": "990277769a4f986881badba57e5ece5d55f435c1924fc66c059016d5"
37
37
  }
package/studio/all.css CHANGED
@@ -121,6 +121,9 @@
121
121
  --wds-close-button-standard-filled-text: #ffffff;
122
122
  --wds-close-button-standard-filled-text-disabled: #ffffff;
123
123
  --wds-close-button-standard-filled-text-hover: #ffffff;
124
+ --wds-color-picker-padding-horizontal: 16px;
125
+ --wds-color-picker-padding-vertical: 12px;
126
+ --wds-color-picker-width: 236px;
124
127
  --wds-composer-sidebar-bottom-width: 88px;
125
128
  --wds-composer-sidebar-end-max-width: 240px;
126
129
  --wds-composer-sidebar-item-bottom-padding-horizontal-large: 4px;
@@ -266,6 +269,8 @@
266
269
  --wds-list-item-action-padding-vertical-medium-screen-small: 8px;
267
270
  --wds-list-item-action-padding-vertical-small: 4px;
268
271
  --wds-list-item-action-padding-vertical-small-screen-small: 8px;
272
+ --wds-list-item-section-font-size: 12px;
273
+ --wds-list-item-section-line-height: 16px;
269
274
  --wds-list-item-section-padding-horizontal: 16px;
270
275
  --wds-list-item-select-active-fill: #dce9ff;
271
276
  --wds-list-item-select-active-fill-active: #dce9ff;
@@ -526,9 +531,11 @@
526
531
  --wds-swatches-swatch-active-border-radius-small: 5px;
527
532
  --wds-swatches-swatch-border-radius-medium: 4px;
528
533
  --wds-swatches-swatch-border-radius-small: 2px;
529
- --wds-swatches-swatch-size-large: 28px;
530
- --wds-swatches-swatch-size-medium: 24px;
531
- --wds-swatches-swatch-size-small: 18px;
534
+ --wds-swatches-swatch-size-large: 36px;
535
+ --wds-swatches-swatch-size-medium: 32px;
536
+ --wds-swatches-swatch-size-small: 28px;
537
+ --wds-swatches-swatch-size-tiny: 24px;
538
+ --wds-swatches-swatch-size-x-tiny: 18px;
532
539
  --wds-tabs-gap-medium: 8px;
533
540
  --wds-tabs-gap-small: 6px;
534
541
  --wds-tabs-label-font-size-small: 12px;
package/studio/all.st.css CHANGED
@@ -462,6 +462,9 @@
462
462
  @property st-global(--wds-color-orange-400);
463
463
  @property st-global(--wds-color-orange-500);
464
464
  @property st-global(--wds-color-orange-600);
465
+ @property st-global(--wds-color-picker-padding-horizontal);
466
+ @property st-global(--wds-color-picker-padding-vertical);
467
+ @property st-global(--wds-color-picker-width);
465
468
  @property st-global(--wds-color-purple-0);
466
469
  @property st-global(--wds-color-purple-50);
467
470
  @property st-global(--wds-color-purple-100);
@@ -710,6 +713,8 @@
710
713
  @property st-global(--wds-list-item-padding-vertical-tiny);
711
714
  @property st-global(--wds-list-item-padding-vertical-x-tiny);
712
715
  @property st-global(--wds-list-item-padding-vertical-xx-tiny);
716
+ @property st-global(--wds-list-item-section-font-size);
717
+ @property st-global(--wds-list-item-section-line-height);
713
718
  @property st-global(--wds-list-item-section-padding-horizontal);
714
719
  @property st-global(--wds-list-item-select-active-fill);
715
720
  @property st-global(--wds-list-item-select-active-fill-active);
@@ -1039,6 +1044,8 @@
1039
1044
  @property st-global(--wds-swatches-swatch-size-large);
1040
1045
  @property st-global(--wds-swatches-swatch-size-medium);
1041
1046
  @property st-global(--wds-swatches-swatch-size-small);
1047
+ @property st-global(--wds-swatches-swatch-size-tiny);
1048
+ @property st-global(--wds-swatches-swatch-size-x-tiny);
1042
1049
  @property st-global(--wds-tabs-gap-medium);
1043
1050
  @property st-global(--wds-tabs-gap-small);
1044
1051
  @property st-global(--wds-tabs-label-font-size-small);
@@ -1650,6 +1657,9 @@
1650
1657
  --wds-color-orange-400: #fdd7cc;
1651
1658
  --wds-color-orange-500: #fee8e1;
1652
1659
  --wds-color-orange-600: #feefea;
1660
+ --wds-color-picker-padding-horizontal: 16px;
1661
+ --wds-color-picker-padding-vertical: 12px;
1662
+ --wds-color-picker-width: 236px;
1653
1663
  --wds-color-purple-0: #7927a3;
1654
1664
  --wds-color-purple-50: #8e1dd1;
1655
1665
  --wds-color-purple-100: #9a27d5;
@@ -1898,6 +1908,8 @@
1898
1908
  --wds-list-item-padding-vertical-tiny: 12px;
1899
1909
  --wds-list-item-padding-vertical-x-tiny: 8px;
1900
1910
  --wds-list-item-padding-vertical-xx-tiny: 4px;
1911
+ --wds-list-item-section-font-size: 12px;
1912
+ --wds-list-item-section-line-height: 16px;
1901
1913
  --wds-list-item-section-padding-horizontal: 16px;
1902
1914
  --wds-list-item-select-active-fill: #dce9ff;
1903
1915
  --wds-list-item-select-active-fill-active: #dce9ff;
@@ -2224,9 +2236,11 @@
2224
2236
  --wds-swatches-swatch-active-border-radius-small: 5px;
2225
2237
  --wds-swatches-swatch-border-radius-medium: 4px;
2226
2238
  --wds-swatches-swatch-border-radius-small: 2px;
2227
- --wds-swatches-swatch-size-large: 28px;
2228
- --wds-swatches-swatch-size-medium: 24px;
2229
- --wds-swatches-swatch-size-small: 18px;
2239
+ --wds-swatches-swatch-size-large: 36px;
2240
+ --wds-swatches-swatch-size-medium: 32px;
2241
+ --wds-swatches-swatch-size-small: 28px;
2242
+ --wds-swatches-swatch-size-tiny: 24px;
2243
+ --wds-swatches-swatch-size-x-tiny: 18px;
2230
2244
  --wds-tabs-gap-medium: 8px;
2231
2245
  --wds-tabs-gap-small: 6px;
2232
2246
  --wds-tabs-label-font-size-small: 12px;
package/studio/component.st.css CHANGED
@@ -120,6 +120,9 @@
120
120
  @property st-global(--wds-close-button-standard-filled-text);
121
121
  @property st-global(--wds-close-button-standard-filled-text-disabled);
122
122
  @property st-global(--wds-close-button-standard-filled-text-hover);
123
+ @property st-global(--wds-color-picker-padding-horizontal);
124
+ @property st-global(--wds-color-picker-padding-vertical);
125
+ @property st-global(--wds-color-picker-width);
123
126
  @property st-global(--wds-composer-sidebar-bottom-width);
124
127
  @property st-global(--wds-composer-sidebar-end-max-width);
125
128
  @property st-global(--wds-composer-sidebar-item-bottom-padding-horizontal-large);
@@ -265,6 +268,8 @@
265
268
  @property st-global(--wds-list-item-padding-vertical-tiny);
266
269
  @property st-global(--wds-list-item-padding-vertical-x-tiny);
267
270
  @property st-global(--wds-list-item-padding-vertical-xx-tiny);
271
+ @property st-global(--wds-list-item-section-font-size);
272
+ @property st-global(--wds-list-item-section-line-height);
268
273
  @property st-global(--wds-list-item-section-padding-horizontal);
269
274
  @property st-global(--wds-list-item-select-active-fill);
270
275
  @property st-global(--wds-list-item-select-active-fill-active);
@@ -528,6 +533,8 @@
528
533
  @property st-global(--wds-swatches-swatch-size-large);
529
534
  @property st-global(--wds-swatches-swatch-size-medium);
530
535
  @property st-global(--wds-swatches-swatch-size-small);
536
+ @property st-global(--wds-swatches-swatch-size-tiny);
537
+ @property st-global(--wds-swatches-swatch-size-x-tiny);
531
538
  @property st-global(--wds-tabs-gap-medium);
532
539
  @property st-global(--wds-tabs-gap-small);
533
540
  @property st-global(--wds-tabs-label-font-size-small);
@@ -797,6 +804,9 @@
797
804
  --wds-close-button-standard-filled-text: #ffffff;
798
805
  --wds-close-button-standard-filled-text-disabled: #ffffff;
799
806
  --wds-close-button-standard-filled-text-hover: #ffffff;
807
+ --wds-color-picker-padding-horizontal: 16px;
808
+ --wds-color-picker-padding-vertical: 12px;
809
+ --wds-color-picker-width: 236px;
800
810
  --wds-composer-sidebar-bottom-width: 88px;
801
811
  --wds-composer-sidebar-end-max-width: 240px;
802
812
  --wds-composer-sidebar-item-bottom-padding-horizontal-large: 4px;
@@ -942,6 +952,8 @@
942
952
  --wds-list-item-padding-vertical-tiny: 12px;
943
953
  --wds-list-item-padding-vertical-x-tiny: 8px;
944
954
  --wds-list-item-padding-vertical-xx-tiny: 4px;
955
+ --wds-list-item-section-font-size: 12px;
956
+ --wds-list-item-section-line-height: 16px;
945
957
  --wds-list-item-section-padding-horizontal: 16px;
946
958
  --wds-list-item-select-active-fill: #dce9ff;
947
959
  --wds-list-item-select-active-fill-active: #dce9ff;
@@ -1202,9 +1214,11 @@
1202
1214
  --wds-swatches-swatch-active-border-radius-small: 5px;
1203
1215
  --wds-swatches-swatch-border-radius-medium: 4px;
1204
1216
  --wds-swatches-swatch-border-radius-small: 2px;
1205
- --wds-swatches-swatch-size-large: 28px;
1206
- --wds-swatches-swatch-size-medium: 24px;
1207
- --wds-swatches-swatch-size-small: 18px;
1217
+ --wds-swatches-swatch-size-large: 36px;
1218
+ --wds-swatches-swatch-size-medium: 32px;
1219
+ --wds-swatches-swatch-size-small: 28px;
1220
+ --wds-swatches-swatch-size-tiny: 24px;
1221
+ --wds-swatches-swatch-size-x-tiny: 18px;
1208
1222
  --wds-tabs-gap-medium: 8px;
1209
1223
  --wds-tabs-gap-small: 6px;
1210
1224
  --wds-tabs-label-font-size-small: 12px;