@wix/design-system-tokens 1.76.0 → 1.77.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 +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 +6 -2
  7. package/studio/all.st.css +10 -2
  8. package/studio/component.st.css +10 -2
package/CHANGELOG.md CHANGED
@@ -1,3 +1,9 @@
1
+ ## 1.77.0 - 2025-02-18
2
+
3
+ ### Visual Breaking Changes
4
+
5
+ - breaking(Button): secondary button hover state changes in studio theme [14528](https://github.com/wix-private/wix-design-systems/pull/14528)
6
+
1
7
  ## 1.75.0 - 2025-02-12
2
8
 
3
9
  ### Visual Breaking Changes
package/all.css CHANGED
@@ -38,6 +38,8 @@
38
38
  --wds-button-border-radius-medium: 1000px;
39
39
  --wds-button-border-radius-small: 1000px;
40
40
  --wds-button-border-radius-tiny: 1000px;
41
+ --wds-button-fill-standard-secondary: #ffffff;
42
+ --wds-button-fill-standard-secondary-hover: #116dff;
41
43
  --wds-button-font-line-height-large: 24px;
42
44
  --wds-button-font-line-height-medium: 24px;
43
45
  --wds-button-font-line-height-small: 18px;
@@ -54,6 +56,7 @@
54
56
  --wds-button-icon-offset-medium: 12px;
55
57
  --wds-button-icon-offset-small: 12px;
56
58
  --wds-button-icon-offset-tiny: 12px;
59
+ --wds-button-outline-hover: transparent;
57
60
  --wds-button-padding-horizontal-large: 30px;
58
61
  --wds-button-padding-horizontal-medium: 24px;
59
62
  --wds-button-padding-horizontal-small: 18px;
@@ -71,6 +74,7 @@
71
74
  --wds-button-size-tiny: 24px;
72
75
  --wds-button-size-tiny-screen-small: 36px;
73
76
  --wds-button-size-x-tiny: 18px;
77
+ --wds-button-text-hover: #ffffff;
74
78
  --wds-card-border: 8px;
75
79
  --wds-card-content-paddings-horizontal: 24px;
76
80
  --wds-card-content-paddings-vertical: 24px;
package/all.st.css CHANGED
@@ -54,6 +54,8 @@
54
54
  @property st-global(--wds-button-border-radius-medium);
55
55
  @property st-global(--wds-button-border-radius-small);
56
56
  @property st-global(--wds-button-border-radius-tiny);
57
+ @property st-global(--wds-button-fill-standard-secondary);
58
+ @property st-global(--wds-button-fill-standard-secondary-hover);
57
59
  @property st-global(--wds-button-font-line-height-large);
58
60
  @property st-global(--wds-button-font-line-height-medium);
59
61
  @property st-global(--wds-button-font-line-height-small);
@@ -70,6 +72,7 @@
70
72
  @property st-global(--wds-button-icon-offset-medium);
71
73
  @property st-global(--wds-button-icon-offset-small);
72
74
  @property st-global(--wds-button-icon-offset-tiny);
75
+ @property st-global(--wds-button-outline-hover);
73
76
  @property st-global(--wds-button-padding-horizontal-large);
74
77
  @property st-global(--wds-button-padding-horizontal-medium);
75
78
  @property st-global(--wds-button-padding-horizontal-small);
@@ -87,6 +90,7 @@
87
90
  @property st-global(--wds-button-size-tiny);
88
91
  @property st-global(--wds-button-size-tiny-screen-small);
89
92
  @property st-global(--wds-button-size-x-tiny);
93
+ @property st-global(--wds-button-text-hover);
90
94
  @property st-global(--wds-card-border);
91
95
  @property st-global(--wds-card-content-paddings-horizontal);
92
96
  @property st-global(--wds-card-content-paddings-vertical);
@@ -1240,6 +1244,8 @@
1240
1244
  --wds-button-border-radius-medium: 1000px;
1241
1245
  --wds-button-border-radius-small: 1000px;
1242
1246
  --wds-button-border-radius-tiny: 1000px;
1247
+ --wds-button-fill-standard-secondary: #ffffff;
1248
+ --wds-button-fill-standard-secondary-hover: #116dff;
1243
1249
  --wds-button-font-line-height-large: 24px;
1244
1250
  --wds-button-font-line-height-medium: 24px;
1245
1251
  --wds-button-font-line-height-small: 18px;
@@ -1256,6 +1262,7 @@
1256
1262
  --wds-button-icon-offset-medium: 12px;
1257
1263
  --wds-button-icon-offset-small: 12px;
1258
1264
  --wds-button-icon-offset-tiny: 12px;
1265
+ --wds-button-outline-hover: transparent;
1259
1266
  --wds-button-padding-horizontal-large: 30px;
1260
1267
  --wds-button-padding-horizontal-medium: 24px;
1261
1268
  --wds-button-padding-horizontal-small: 18px;
@@ -1273,6 +1280,7 @@
1273
1280
  --wds-button-size-tiny: 24px;
1274
1281
  --wds-button-size-tiny-screen-small: 36px;
1275
1282
  --wds-button-size-x-tiny: 18px;
1283
+ --wds-button-text-hover: #ffffff;
1276
1284
  --wds-card-border: 8px;
1277
1285
  --wds-card-content-paddings-horizontal: 24px;
1278
1286
  --wds-card-content-paddings-vertical: 24px;
package/component.st.css CHANGED
@@ -37,6 +37,8 @@
37
37
  @property st-global(--wds-button-border-radius-medium);
38
38
  @property st-global(--wds-button-border-radius-small);
39
39
  @property st-global(--wds-button-border-radius-tiny);
40
+ @property st-global(--wds-button-fill-standard-secondary);
41
+ @property st-global(--wds-button-fill-standard-secondary-hover);
40
42
  @property st-global(--wds-button-font-line-height-large);
41
43
  @property st-global(--wds-button-font-line-height-medium);
42
44
  @property st-global(--wds-button-font-line-height-small);
@@ -53,6 +55,7 @@
53
55
  @property st-global(--wds-button-icon-offset-medium);
54
56
  @property st-global(--wds-button-icon-offset-small);
55
57
  @property st-global(--wds-button-icon-offset-tiny);
58
+ @property st-global(--wds-button-outline-hover);
56
59
  @property st-global(--wds-button-padding-horizontal-large);
57
60
  @property st-global(--wds-button-padding-horizontal-medium);
58
61
  @property st-global(--wds-button-padding-horizontal-small);
@@ -70,6 +73,7 @@
70
73
  @property st-global(--wds-button-size-tiny);
71
74
  @property st-global(--wds-button-size-tiny-screen-small);
72
75
  @property st-global(--wds-button-size-x-tiny);
76
+ @property st-global(--wds-button-text-hover);
73
77
  @property st-global(--wds-card-border);
74
78
  @property st-global(--wds-card-content-paddings-horizontal);
75
79
  @property st-global(--wds-card-content-paddings-vertical);
@@ -709,6 +713,8 @@
709
713
  --wds-button-border-radius-medium: 1000px;
710
714
  --wds-button-border-radius-small: 1000px;
711
715
  --wds-button-border-radius-tiny: 1000px;
716
+ --wds-button-fill-standard-secondary: #ffffff;
717
+ --wds-button-fill-standard-secondary-hover: #116dff;
712
718
  --wds-button-font-line-height-large: 24px;
713
719
  --wds-button-font-line-height-medium: 24px;
714
720
  --wds-button-font-line-height-small: 18px;
@@ -725,6 +731,7 @@
725
731
  --wds-button-icon-offset-medium: 12px;
726
732
  --wds-button-icon-offset-small: 12px;
727
733
  --wds-button-icon-offset-tiny: 12px;
734
+ --wds-button-outline-hover: transparent;
728
735
  --wds-button-padding-horizontal-large: 30px;
729
736
  --wds-button-padding-horizontal-medium: 24px;
730
737
  --wds-button-padding-horizontal-small: 18px;
@@ -742,6 +749,7 @@
742
749
  --wds-button-size-tiny: 24px;
743
750
  --wds-button-size-tiny-screen-small: 36px;
744
751
  --wds-button-size-x-tiny: 18px;
752
+ --wds-button-text-hover: #ffffff;
745
753
  --wds-card-border: 8px;
746
754
  --wds-card-content-paddings-horizontal: 24px;
747
755
  --wds-card-content-paddings-vertical: 24px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wix/design-system-tokens",
3
- "version": "1.76.0",
3
+ "version": "1.77.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": "5aa37fedb157585bf51c991abeda79a463fa7927dffc6fe5842da5dc"
36
+ "falconPackageHash": "294999bd458df26612c41bd2b58c23d126e793cfd47829135ede1f6b"
37
37
  }
package/studio/all.css CHANGED
@@ -38,6 +38,8 @@
38
38
  --wds-button-border-radius-medium: 4px;
39
39
  --wds-button-border-radius-small: 4px;
40
40
  --wds-button-border-radius-tiny: 4px;
41
+ --wds-button-fill-standard-secondary: #ffffff;
42
+ --wds-button-fill-standard-secondary-hover: #f7f8f8;
41
43
  --wds-button-font-line-height-large: 24px;
42
44
  --wds-button-font-line-height-medium: 20px;
43
45
  --wds-button-font-line-height-small: 16px;
@@ -54,13 +56,14 @@
54
56
  --wds-button-icon-offset-medium: 18px;
55
57
  --wds-button-icon-offset-small: 12px;
56
58
  --wds-button-icon-offset-tiny: 12px;
59
+ --wds-button-outline-hover: #e2e3ea;
57
60
  --wds-button-padding-horizontal-large: 16px;
58
61
  --wds-button-padding-horizontal-medium: 16px;
59
62
  --wds-button-padding-horizontal-small: 12px;
60
63
  --wds-button-padding-horizontal-tiny: 12px;
61
64
  --wds-button-padding-vertical-large: 6px;
62
- --wds-button-padding-vertical-medium: 4px;
63
- --wds-button-padding-vertical-small: 4px;
65
+ --wds-button-padding-vertical-medium: 6px;
66
+ --wds-button-padding-vertical-small: 6px;
64
67
  --wds-button-padding-vertical-tiny: 2px;
65
68
  --wds-button-size-large: 36px;
66
69
  --wds-button-size-large-screen-small: 44px;
@@ -71,6 +74,7 @@
71
74
  --wds-button-size-tiny: 24px;
72
75
  --wds-button-size-tiny-screen-small: 32px;
73
76
  --wds-button-size-x-tiny: 18px;
77
+ --wds-button-text-hover: #116dff;
74
78
  --wds-card-border: 4px;
75
79
  --wds-card-content-paddings-horizontal: 24px;
76
80
  --wds-card-content-paddings-vertical: 24px;
package/studio/all.st.css CHANGED
@@ -54,6 +54,8 @@
54
54
  @property st-global(--wds-button-border-radius-medium);
55
55
  @property st-global(--wds-button-border-radius-small);
56
56
  @property st-global(--wds-button-border-radius-tiny);
57
+ @property st-global(--wds-button-fill-standard-secondary);
58
+ @property st-global(--wds-button-fill-standard-secondary-hover);
57
59
  @property st-global(--wds-button-font-line-height-large);
58
60
  @property st-global(--wds-button-font-line-height-medium);
59
61
  @property st-global(--wds-button-font-line-height-small);
@@ -70,6 +72,7 @@
70
72
  @property st-global(--wds-button-icon-offset-medium);
71
73
  @property st-global(--wds-button-icon-offset-small);
72
74
  @property st-global(--wds-button-icon-offset-tiny);
75
+ @property st-global(--wds-button-outline-hover);
73
76
  @property st-global(--wds-button-padding-horizontal-large);
74
77
  @property st-global(--wds-button-padding-horizontal-medium);
75
78
  @property st-global(--wds-button-padding-horizontal-small);
@@ -87,6 +90,7 @@
87
90
  @property st-global(--wds-button-size-tiny);
88
91
  @property st-global(--wds-button-size-tiny-screen-small);
89
92
  @property st-global(--wds-button-size-x-tiny);
93
+ @property st-global(--wds-button-text-hover);
90
94
  @property st-global(--wds-card-border);
91
95
  @property st-global(--wds-card-content-paddings-horizontal);
92
96
  @property st-global(--wds-card-content-paddings-vertical);
@@ -1235,6 +1239,8 @@
1235
1239
  --wds-button-border-radius-medium: 4px;
1236
1240
  --wds-button-border-radius-small: 4px;
1237
1241
  --wds-button-border-radius-tiny: 4px;
1242
+ --wds-button-fill-standard-secondary: #ffffff;
1243
+ --wds-button-fill-standard-secondary-hover: #f7f8f8;
1238
1244
  --wds-button-font-line-height-large: 24px;
1239
1245
  --wds-button-font-line-height-medium: 20px;
1240
1246
  --wds-button-font-line-height-small: 16px;
@@ -1251,13 +1257,14 @@
1251
1257
  --wds-button-icon-offset-medium: 18px;
1252
1258
  --wds-button-icon-offset-small: 12px;
1253
1259
  --wds-button-icon-offset-tiny: 12px;
1260
+ --wds-button-outline-hover: #e2e3ea;
1254
1261
  --wds-button-padding-horizontal-large: 16px;
1255
1262
  --wds-button-padding-horizontal-medium: 16px;
1256
1263
  --wds-button-padding-horizontal-small: 12px;
1257
1264
  --wds-button-padding-horizontal-tiny: 12px;
1258
1265
  --wds-button-padding-vertical-large: 6px;
1259
- --wds-button-padding-vertical-medium: 4px;
1260
- --wds-button-padding-vertical-small: 4px;
1266
+ --wds-button-padding-vertical-medium: 6px;
1267
+ --wds-button-padding-vertical-small: 6px;
1261
1268
  --wds-button-padding-vertical-tiny: 2px;
1262
1269
  --wds-button-size-large: 36px;
1263
1270
  --wds-button-size-large-screen-small: 44px;
@@ -1268,6 +1275,7 @@
1268
1275
  --wds-button-size-tiny: 24px;
1269
1276
  --wds-button-size-tiny-screen-small: 32px;
1270
1277
  --wds-button-size-x-tiny: 18px;
1278
+ --wds-button-text-hover: #116dff;
1271
1279
  --wds-card-border: 4px;
1272
1280
  --wds-card-content-paddings-horizontal: 24px;
1273
1281
  --wds-card-content-paddings-vertical: 24px;
package/studio/component.st.css CHANGED
@@ -37,6 +37,8 @@
37
37
  @property st-global(--wds-button-border-radius-medium);
38
38
  @property st-global(--wds-button-border-radius-small);
39
39
  @property st-global(--wds-button-border-radius-tiny);
40
+ @property st-global(--wds-button-fill-standard-secondary);
41
+ @property st-global(--wds-button-fill-standard-secondary-hover);
40
42
  @property st-global(--wds-button-font-line-height-large);
41
43
  @property st-global(--wds-button-font-line-height-medium);
42
44
  @property st-global(--wds-button-font-line-height-small);
@@ -53,6 +55,7 @@
53
55
  @property st-global(--wds-button-icon-offset-medium);
54
56
  @property st-global(--wds-button-icon-offset-small);
55
57
  @property st-global(--wds-button-icon-offset-tiny);
58
+ @property st-global(--wds-button-outline-hover);
56
59
  @property st-global(--wds-button-padding-horizontal-large);
57
60
  @property st-global(--wds-button-padding-horizontal-medium);
58
61
  @property st-global(--wds-button-padding-horizontal-small);
@@ -70,6 +73,7 @@
70
73
  @property st-global(--wds-button-size-tiny);
71
74
  @property st-global(--wds-button-size-tiny-screen-small);
72
75
  @property st-global(--wds-button-size-x-tiny);
76
+ @property st-global(--wds-button-text-hover);
73
77
  @property st-global(--wds-card-border);
74
78
  @property st-global(--wds-card-content-paddings-horizontal);
75
79
  @property st-global(--wds-card-content-paddings-vertical);
@@ -708,6 +712,8 @@
708
712
  --wds-button-border-radius-medium: 4px;
709
713
  --wds-button-border-radius-small: 4px;
710
714
  --wds-button-border-radius-tiny: 4px;
715
+ --wds-button-fill-standard-secondary: #ffffff;
716
+ --wds-button-fill-standard-secondary-hover: #f7f8f8;
711
717
  --wds-button-font-line-height-large: 24px;
712
718
  --wds-button-font-line-height-medium: 20px;
713
719
  --wds-button-font-line-height-small: 16px;
@@ -724,13 +730,14 @@
724
730
  --wds-button-icon-offset-medium: 18px;
725
731
  --wds-button-icon-offset-small: 12px;
726
732
  --wds-button-icon-offset-tiny: 12px;
733
+ --wds-button-outline-hover: #e2e3ea;
727
734
  --wds-button-padding-horizontal-large: 16px;
728
735
  --wds-button-padding-horizontal-medium: 16px;
729
736
  --wds-button-padding-horizontal-small: 12px;
730
737
  --wds-button-padding-horizontal-tiny: 12px;
731
738
  --wds-button-padding-vertical-large: 6px;
732
- --wds-button-padding-vertical-medium: 4px;
733
- --wds-button-padding-vertical-small: 4px;
739
+ --wds-button-padding-vertical-medium: 6px;
740
+ --wds-button-padding-vertical-small: 6px;
734
741
  --wds-button-padding-vertical-tiny: 2px;
735
742
  --wds-button-size-large: 36px;
736
743
  --wds-button-size-large-screen-small: 44px;
@@ -741,6 +748,7 @@
741
748
  --wds-button-size-tiny: 24px;
742
749
  --wds-button-size-tiny-screen-small: 32px;
743
750
  --wds-button-size-x-tiny: 18px;
751
+ --wds-button-text-hover: #116dff;
744
752
  --wds-card-border: 4px;
745
753
  --wds-card-content-paddings-horizontal: 24px;
746
754
  --wds-card-content-paddings-vertical: 24px;