@wix/design-system-tokens 1.86.2 → 1.87.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 +5 -2
  3. package/all.st.css +10 -4
  4. package/component.st.css +10 -4
  5. package/package.json +2 -2
  6. package/studio/all.css +5 -2
  7. package/studio/all.st.css +10 -4
  8. package/studio/component.st.css +10 -4
  9. package/wixel/all.css +9 -6
  10. package/wixel/all.st.css +14 -8
  11. package/wixel/component.st.css +14 -8
package/CHANGELOG.md CHANGED
@@ -1,3 +1,9 @@
1
+ ## 1.87.0 - 2025-03-25
2
+
3
+ ### Bug Fixes
4
+
5
+ - fix(Button): studio hover color fix & new branding fonts [14666](https://github.com/wix-private/wix-design-systems/pull/14666)
6
+
1
7
  ## 1.86.2 - 2025-03-24
2
8
 
3
9
  ### Bug Fixes
package/all.css CHANGED
@@ -58,8 +58,11 @@
58
58
  --wds-button-border-radius-tiny: 1000px;
59
59
  --wds-button-fill-gradient-hover-primary: #0f62e6;
60
60
  --wds-button-fill-gradient-hover-secondary: #0f62e6;
61
+ --wds-button-fill-standard-primary: #116dff;
62
+ --wds-button-fill-standard-primary-active: #084ebd;
61
63
  --wds-button-fill-standard-primary-hover: #0f62e6;
62
64
  --wds-button-fill-standard-secondary: #ffffff;
65
+ --wds-button-fill-standard-secondary-active: linear-gradient(0deg, #084ebd 0%, #084ebd 100%);
63
66
  --wds-button-fill-standard-secondary-hover: #116dff;
64
67
  --wds-button-font-line-height-large: 24px;
65
68
  --wds-button-font-line-height-medium: 24px;
@@ -208,8 +211,8 @@
208
211
  --wds-custom-modal-header-padding-vertical: 18px;
209
212
  --wds-custom-modal-header-title-font-line-height: 24px;
210
213
  --wds-custom-modal-header-title-font-size: 16px;
211
- --wds-divider-fill-color-light-1: #dfe5eb;
212
- --wds-divider-fill-color-light-2: #dfe5eb;
214
+ --wds-divider-fill-color-light: #dfe5eb;
215
+ --wds-divider-vertical-fill-color-light: #dfe5eb;
213
216
  --wds-divider-fill-color-light-primary: #dfe5eb;
214
217
  --wds-divider-fill-color-light-secondary: #dfe5eb;
215
218
  --wds-divider-gradient-border: linear-gradient(90deg, #dfe5eb 0%, #dfe5eb 16%, #dfe5eb 84%, #dfe5eb 100%);
package/all.st.css CHANGED
@@ -88,8 +88,11 @@
88
88
  @property st-global(--wds-button-border-radius-tiny);
89
89
  @property st-global(--wds-button-fill-gradient-hover-primary);
90
90
  @property st-global(--wds-button-fill-gradient-hover-secondary);
91
+ @property st-global(--wds-button-fill-standard-primary);
92
+ @property st-global(--wds-button-fill-standard-primary-active);
91
93
  @property st-global(--wds-button-fill-standard-primary-hover);
92
94
  @property st-global(--wds-button-fill-standard-secondary);
95
+ @property st-global(--wds-button-fill-standard-secondary-active);
93
96
  @property st-global(--wds-button-fill-standard-secondary-hover);
94
97
  @property st-global(--wds-button-font-line-height-large);
95
98
  @property st-global(--wds-button-font-line-height-medium);
@@ -686,11 +689,11 @@
686
689
  @property st-global(--wds-custom-modal-header-padding-vertical);
687
690
  @property st-global(--wds-custom-modal-header-title-font-line-height);
688
691
  @property st-global(--wds-custom-modal-header-title-font-size);
689
- @property st-global(--wds-divider-fill-color-light-1);
690
- @property st-global(--wds-divider-fill-color-light-2);
692
+ @property st-global(--wds-divider-fill-color-light);
691
693
  @property st-global(--wds-divider-fill-color-light-primary);
692
694
  @property st-global(--wds-divider-fill-color-light-secondary);
693
695
  @property st-global(--wds-divider-gradient-border);
696
+ @property st-global(--wds-divider-vertical-fill-color-light);
694
697
  @property st-global(--wds-dock-background-fill);
695
698
  @property st-global(--wds-dock-background-fill-active);
696
699
  @property st-global(--wds-dock-background-fill-disabled);
@@ -1596,8 +1599,11 @@
1596
1599
  --wds-button-border-radius-tiny: 1000px;
1597
1600
  --wds-button-fill-gradient-hover-primary: #0f62e6;
1598
1601
  --wds-button-fill-gradient-hover-secondary: #0f62e6;
1602
+ --wds-button-fill-standard-primary: #116dff;
1603
+ --wds-button-fill-standard-primary-active: #084ebd;
1599
1604
  --wds-button-fill-standard-primary-hover: #0f62e6;
1600
1605
  --wds-button-fill-standard-secondary: #ffffff;
1606
+ --wds-button-fill-standard-secondary-active: linear-gradient(0deg, #084ebd 0%, #084ebd 100%);
1601
1607
  --wds-button-fill-standard-secondary-hover: #116dff;
1602
1608
  --wds-button-font-line-height-large: 24px;
1603
1609
  --wds-button-font-line-height-medium: 24px;
@@ -2194,11 +2200,11 @@
2194
2200
  --wds-custom-modal-header-padding-vertical: 18px;
2195
2201
  --wds-custom-modal-header-title-font-line-height: 24px;
2196
2202
  --wds-custom-modal-header-title-font-size: 16px;
2197
- --wds-divider-fill-color-light-1: #dfe5eb;
2198
- --wds-divider-fill-color-light-2: #dfe5eb;
2203
+ --wds-divider-fill-color-light: #dfe5eb;
2199
2204
  --wds-divider-fill-color-light-primary: #dfe5eb;
2200
2205
  --wds-divider-fill-color-light-secondary: #dfe5eb;
2201
2206
  --wds-divider-gradient-border: linear-gradient(90deg, #dfe5eb 0%, #dfe5eb 16%, #dfe5eb 84%, #dfe5eb 100%);
2207
+ --wds-divider-vertical-fill-color-light: #dfe5eb;
2202
2208
  --wds-dock-background-fill: #e7f0ff;
2203
2209
  --wds-dock-background-fill-active: #d6e6fe;
2204
2210
  --wds-dock-background-fill-disabled: rgba(0, 6, 36, .1);
package/component.st.css CHANGED
@@ -57,8 +57,11 @@
57
57
  @property st-global(--wds-button-border-radius-tiny);
58
58
  @property st-global(--wds-button-fill-gradient-hover-primary);
59
59
  @property st-global(--wds-button-fill-gradient-hover-secondary);
60
+ @property st-global(--wds-button-fill-standard-primary);
61
+ @property st-global(--wds-button-fill-standard-primary-active);
60
62
  @property st-global(--wds-button-fill-standard-primary-hover);
61
63
  @property st-global(--wds-button-fill-standard-secondary);
64
+ @property st-global(--wds-button-fill-standard-secondary-active);
62
65
  @property st-global(--wds-button-fill-standard-secondary-hover);
63
66
  @property st-global(--wds-button-font-line-height-large);
64
67
  @property st-global(--wds-button-font-line-height-medium);
@@ -207,11 +210,11 @@
207
210
  @property st-global(--wds-custom-modal-header-padding-vertical);
208
211
  @property st-global(--wds-custom-modal-header-title-font-line-height);
209
212
  @property st-global(--wds-custom-modal-header-title-font-size);
210
- @property st-global(--wds-divider-fill-color-light-1);
211
- @property st-global(--wds-divider-fill-color-light-2);
213
+ @property st-global(--wds-divider-fill-color-light);
212
214
  @property st-global(--wds-divider-fill-color-light-primary);
213
215
  @property st-global(--wds-divider-fill-color-light-secondary);
214
216
  @property st-global(--wds-divider-gradient-border);
217
+ @property st-global(--wds-divider-vertical-fill-color-light);
215
218
  @property st-global(--wds-dock-background-fill);
216
219
  @property st-global(--wds-dock-background-fill-active);
217
220
  @property st-global(--wds-dock-background-fill-disabled);
@@ -942,8 +945,11 @@
942
945
  --wds-button-border-radius-tiny: 1000px;
943
946
  --wds-button-fill-gradient-hover-primary: #0f62e6;
944
947
  --wds-button-fill-gradient-hover-secondary: #0f62e6;
948
+ --wds-button-fill-standard-primary: #116dff;
949
+ --wds-button-fill-standard-primary-active: #084ebd;
945
950
  --wds-button-fill-standard-primary-hover: #0f62e6;
946
951
  --wds-button-fill-standard-secondary: #ffffff;
952
+ --wds-button-fill-standard-secondary-active: linear-gradient(0deg, #084ebd 0%, #084ebd 100%);
947
953
  --wds-button-fill-standard-secondary-hover: #116dff;
948
954
  --wds-button-font-line-height-large: 24px;
949
955
  --wds-button-font-line-height-medium: 24px;
@@ -1092,11 +1098,11 @@
1092
1098
  --wds-custom-modal-header-padding-vertical: 18px;
1093
1099
  --wds-custom-modal-header-title-font-line-height: 24px;
1094
1100
  --wds-custom-modal-header-title-font-size: 16px;
1095
- --wds-divider-fill-color-light-1: #dfe5eb;
1096
- --wds-divider-fill-color-light-2: #dfe5eb;
1101
+ --wds-divider-fill-color-light: #dfe5eb;
1097
1102
  --wds-divider-fill-color-light-primary: #dfe5eb;
1098
1103
  --wds-divider-fill-color-light-secondary: #dfe5eb;
1099
1104
  --wds-divider-gradient-border: linear-gradient(90deg, #dfe5eb 0%, #dfe5eb 16%, #dfe5eb 84%, #dfe5eb 100%);
1105
+ --wds-divider-vertical-fill-color-light: #dfe5eb;
1100
1106
  --wds-dock-background-fill: #e7f0ff;
1101
1107
  --wds-dock-background-fill-active: #d6e6fe;
1102
1108
  --wds-dock-background-fill-disabled: rgba(0, 6, 36, .1);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wix/design-system-tokens",
3
- "version": "1.86.2",
3
+ "version": "1.87.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": "5e48c393b9d0a4e4d5f475fbee5c05363cb0c38105cfff9db7d9926e"
36
+ "falconPackageHash": "f266262cc4287e1e750f7b65d4a3d9eb5019af5755a48c8a2951c3cc"
37
37
  }
package/studio/all.css CHANGED
@@ -58,8 +58,11 @@
58
58
  --wds-button-border-radius-tiny: 4px;
59
59
  --wds-button-fill-gradient-hover-primary: #0f62e6;
60
60
  --wds-button-fill-gradient-hover-secondary: #0f62e6;
61
+ --wds-button-fill-standard-primary: #116dff;
62
+ --wds-button-fill-standard-primary-active: #116dff;
61
63
  --wds-button-fill-standard-primary-hover: #0f62e6;
62
64
  --wds-button-fill-standard-secondary: #ffffff;
65
+ --wds-button-fill-standard-secondary-active: #116dff;
63
66
  --wds-button-fill-standard-secondary-hover: #f7f8f8;
64
67
  --wds-button-font-line-height-large: 24px;
65
68
  --wds-button-font-line-height-medium: 20px;
@@ -208,8 +211,8 @@
208
211
  --wds-custom-modal-header-padding-vertical: 16px;
209
212
  --wds-custom-modal-header-title-font-line-height: 20px;
210
213
  --wds-custom-modal-header-title-font-size: 14px;
211
- --wds-divider-fill-color-light-1: #e2e3ea;
212
- --wds-divider-fill-color-light-2: #e2e3ea;
214
+ --wds-divider-fill-color-light: #e2e3ea;
215
+ --wds-divider-vertical-fill-color-light: #e2e3ea;
213
216
  --wds-divider-fill-color-light-primary: #e2e3ea;
214
217
  --wds-divider-fill-color-light-secondary: #e2e3ea;
215
218
  --wds-divider-gradient-border: linear-gradient(90deg, #e2e3ea 0%, #e2e3ea 16%, #e2e3ea 84%, #e2e3ea 100%);
package/studio/all.st.css CHANGED
@@ -88,8 +88,11 @@
88
88
  @property st-global(--wds-button-border-radius-tiny);
89
89
  @property st-global(--wds-button-fill-gradient-hover-primary);
90
90
  @property st-global(--wds-button-fill-gradient-hover-secondary);
91
+ @property st-global(--wds-button-fill-standard-primary);
92
+ @property st-global(--wds-button-fill-standard-primary-active);
91
93
  @property st-global(--wds-button-fill-standard-primary-hover);
92
94
  @property st-global(--wds-button-fill-standard-secondary);
95
+ @property st-global(--wds-button-fill-standard-secondary-active);
93
96
  @property st-global(--wds-button-fill-standard-secondary-hover);
94
97
  @property st-global(--wds-button-font-line-height-large);
95
98
  @property st-global(--wds-button-font-line-height-medium);
@@ -682,11 +685,11 @@
682
685
  @property st-global(--wds-custom-modal-header-padding-vertical);
683
686
  @property st-global(--wds-custom-modal-header-title-font-line-height);
684
687
  @property st-global(--wds-custom-modal-header-title-font-size);
685
- @property st-global(--wds-divider-fill-color-light-1);
686
- @property st-global(--wds-divider-fill-color-light-2);
688
+ @property st-global(--wds-divider-fill-color-light);
687
689
  @property st-global(--wds-divider-fill-color-light-primary);
688
690
  @property st-global(--wds-divider-fill-color-light-secondary);
689
691
  @property st-global(--wds-divider-gradient-border);
692
+ @property st-global(--wds-divider-vertical-fill-color-light);
690
693
  @property st-global(--wds-dock-background-fill);
691
694
  @property st-global(--wds-dock-background-fill-active);
692
695
  @property st-global(--wds-dock-background-fill-disabled);
@@ -1586,8 +1589,11 @@
1586
1589
  --wds-button-border-radius-tiny: 4px;
1587
1590
  --wds-button-fill-gradient-hover-primary: #0f62e6;
1588
1591
  --wds-button-fill-gradient-hover-secondary: #0f62e6;
1592
+ --wds-button-fill-standard-primary: #116dff;
1593
+ --wds-button-fill-standard-primary-active: #116dff;
1589
1594
  --wds-button-fill-standard-primary-hover: #0f62e6;
1590
1595
  --wds-button-fill-standard-secondary: #ffffff;
1596
+ --wds-button-fill-standard-secondary-active: #116dff;
1591
1597
  --wds-button-fill-standard-secondary-hover: #f7f8f8;
1592
1598
  --wds-button-font-line-height-large: 24px;
1593
1599
  --wds-button-font-line-height-medium: 20px;
@@ -2180,11 +2186,11 @@
2180
2186
  --wds-custom-modal-header-padding-vertical: 16px;
2181
2187
  --wds-custom-modal-header-title-font-line-height: 20px;
2182
2188
  --wds-custom-modal-header-title-font-size: 14px;
2183
- --wds-divider-fill-color-light-1: #e2e3ea;
2184
- --wds-divider-fill-color-light-2: #e2e3ea;
2189
+ --wds-divider-fill-color-light: #e2e3ea;
2185
2190
  --wds-divider-fill-color-light-primary: #e2e3ea;
2186
2191
  --wds-divider-fill-color-light-secondary: #e2e3ea;
2187
2192
  --wds-divider-gradient-border: linear-gradient(90deg, #e2e3ea 0%, #e2e3ea 16%, #e2e3ea 84%, #e2e3ea 100%);
2193
+ --wds-divider-vertical-fill-color-light: #e2e3ea;
2188
2194
  --wds-dock-background-fill: #ebf2ff;
2189
2195
  --wds-dock-background-fill-active: #dce9ff;
2190
2196
  --wds-dock-background-fill-disabled: #e5e5e5;
package/studio/component.st.css CHANGED
@@ -57,8 +57,11 @@
57
57
  @property st-global(--wds-button-border-radius-tiny);
58
58
  @property st-global(--wds-button-fill-gradient-hover-primary);
59
59
  @property st-global(--wds-button-fill-gradient-hover-secondary);
60
+ @property st-global(--wds-button-fill-standard-primary);
61
+ @property st-global(--wds-button-fill-standard-primary-active);
60
62
  @property st-global(--wds-button-fill-standard-primary-hover);
61
63
  @property st-global(--wds-button-fill-standard-secondary);
64
+ @property st-global(--wds-button-fill-standard-secondary-active);
62
65
  @property st-global(--wds-button-fill-standard-secondary-hover);
63
66
  @property st-global(--wds-button-font-line-height-large);
64
67
  @property st-global(--wds-button-font-line-height-medium);
@@ -207,11 +210,11 @@
207
210
  @property st-global(--wds-custom-modal-header-padding-vertical);
208
211
  @property st-global(--wds-custom-modal-header-title-font-line-height);
209
212
  @property st-global(--wds-custom-modal-header-title-font-size);
210
- @property st-global(--wds-divider-fill-color-light-1);
211
- @property st-global(--wds-divider-fill-color-light-2);
213
+ @property st-global(--wds-divider-fill-color-light);
212
214
  @property st-global(--wds-divider-fill-color-light-primary);
213
215
  @property st-global(--wds-divider-fill-color-light-secondary);
214
216
  @property st-global(--wds-divider-gradient-border);
217
+ @property st-global(--wds-divider-vertical-fill-color-light);
215
218
  @property st-global(--wds-dock-background-fill);
216
219
  @property st-global(--wds-dock-background-fill-active);
217
220
  @property st-global(--wds-dock-background-fill-disabled);
@@ -936,8 +939,11 @@
936
939
  --wds-button-border-radius-tiny: 4px;
937
940
  --wds-button-fill-gradient-hover-primary: #0f62e6;
938
941
  --wds-button-fill-gradient-hover-secondary: #0f62e6;
942
+ --wds-button-fill-standard-primary: #116dff;
943
+ --wds-button-fill-standard-primary-active: #116dff;
939
944
  --wds-button-fill-standard-primary-hover: #0f62e6;
940
945
  --wds-button-fill-standard-secondary: #ffffff;
946
+ --wds-button-fill-standard-secondary-active: #116dff;
941
947
  --wds-button-fill-standard-secondary-hover: #f7f8f8;
942
948
  --wds-button-font-line-height-large: 24px;
943
949
  --wds-button-font-line-height-medium: 20px;
@@ -1086,11 +1092,11 @@
1086
1092
  --wds-custom-modal-header-padding-vertical: 16px;
1087
1093
  --wds-custom-modal-header-title-font-line-height: 20px;
1088
1094
  --wds-custom-modal-header-title-font-size: 14px;
1089
- --wds-divider-fill-color-light-1: #e2e3ea;
1090
- --wds-divider-fill-color-light-2: #e2e3ea;
1095
+ --wds-divider-fill-color-light: #e2e3ea;
1091
1096
  --wds-divider-fill-color-light-primary: #e2e3ea;
1092
1097
  --wds-divider-fill-color-light-secondary: #e2e3ea;
1093
1098
  --wds-divider-gradient-border: linear-gradient(90deg, #e2e3ea 0%, #e2e3ea 16%, #e2e3ea 84%, #e2e3ea 100%);
1099
+ --wds-divider-vertical-fill-color-light: #e2e3ea;
1094
1100
  --wds-dock-background-fill: #ebf2ff;
1095
1101
  --wds-dock-background-fill-active: #dce9ff;
1096
1102
  --wds-dock-background-fill-disabled: #e5e5e5;
package/wixel/all.css CHANGED
@@ -58,8 +58,11 @@
58
58
  --wds-button-border-radius-tiny: 8px;
59
59
  --wds-button-fill-gradient-hover-primary: #4a2ae9;
60
60
  --wds-button-fill-gradient-hover-secondary: #526cff;
61
+ --wds-button-fill-standard-primary: linear-gradient(0deg, #526cff 0%, #526cff 100%);
62
+ --wds-button-fill-standard-primary-active: linear-gradient(0deg, #4a2ae9 0%, #4a2ae9 100%);
61
63
  --wds-button-fill-standard-primary-hover: linear-gradient(105deg, #526cff 17%, #4a2ae9 75%);
62
- --wds-button-fill-standard-secondary: #ffffff;
64
+ --wds-button-fill-standard-secondary: linear-gradient(0deg, #ffffff 0%, #ffffff 100%);
65
+ --wds-button-fill-standard-secondary-active: linear-gradient(0deg, #4a2ae9 0%, #4a2ae9 100%);
63
66
  --wds-button-fill-standard-secondary-hover: linear-gradient(105deg, #526cff 17%, #4a2ae9 75%);
64
67
  --wds-button-font-line-height-large: 20px;
65
68
  --wds-button-font-line-height-medium: 20px;
@@ -102,7 +105,7 @@
102
105
  --wds-button-size-x-tiny: 20px;
103
106
  --wds-button-text-standard-primary: #131720;
104
107
  --wds-button-text-standard-primary-hover: #131720;
105
- --wds-button-text-hover: #526cff;
108
+ --wds-button-text-hover: #ffffff;
106
109
  --wds-card-border: 4px;
107
110
  --wds-card-content-paddings-horizontal: 24px;
108
111
  --wds-card-content-paddings-vertical: 24px;
@@ -205,11 +208,11 @@
205
208
  --wds-custom-modal-header-padding-vertical: 16px;
206
209
  --wds-custom-modal-header-title-font-line-height: 20px;
207
210
  --wds-custom-modal-header-title-font-size: 14px;
208
- --wds-divider-fill-color-light-1: #d6dcff;
209
- --wds-divider-fill-color-light-2: rgba(244, 247, 255, 0.0000);
210
- --wds-divider-fill-color-light-primary: rgba(214, 220, 255, 1);
211
+ --wds-divider-fill-color-light: linear-gradient(90deg, rgba(244, 247, 255, 0.0000) 0%, #d6dcff 16%, #d6dcff 84%, rgba(244, 247, 255, 0.0000) 100%);
212
+ --wds-divider-vertical-fill-color-light: linear-gradient(0deg, rgba(244, 247, 255, 0.0000) 0%, #d6dcff 16%, #d6dcff 84%, rgba(244, 247, 255, 0.0000) 100%);
213
+ --wds-divider-fill-color-light-primary: #d6dcff;
211
214
  --wds-divider-fill-color-light-secondary: rgba(244, 247, 255, 0.0000);
212
- --wds-divider-gradient-border: linear-gradient(90deg, rgba(244, 247, 255, 0.0000) 0%, rgba(214, 220, 255, 1) 16%, rgba(214, 220, 255, 1) 84%, rgba(244, 247, 255, 0.0000) 100%);
215
+ --wds-divider-gradient-border: linear-gradient(90deg, rgba(244, 247, 255, 0.0000) 0%, #d6dcff 16%, #d6dcff 84%, rgba(244, 247, 255, 0.0000) 100%);
213
216
  --wds-dock-background-fill: #eef0ff;
214
217
  --wds-dock-background-fill-active: #d6dcff;
215
218
  --wds-dock-background-fill-disabled: #e5e5e5;
package/wixel/all.st.css CHANGED
@@ -88,8 +88,11 @@
88
88
  @property st-global(--wds-button-border-radius-tiny);
89
89
  @property st-global(--wds-button-fill-gradient-hover-primary);
90
90
  @property st-global(--wds-button-fill-gradient-hover-secondary);
91
+ @property st-global(--wds-button-fill-standard-primary);
92
+ @property st-global(--wds-button-fill-standard-primary-active);
91
93
  @property st-global(--wds-button-fill-standard-primary-hover);
92
94
  @property st-global(--wds-button-fill-standard-secondary);
95
+ @property st-global(--wds-button-fill-standard-secondary-active);
93
96
  @property st-global(--wds-button-fill-standard-secondary-hover);
94
97
  @property st-global(--wds-button-font-line-height-large);
95
98
  @property st-global(--wds-button-font-line-height-medium);
@@ -682,11 +685,11 @@
682
685
  @property st-global(--wds-custom-modal-header-padding-vertical);
683
686
  @property st-global(--wds-custom-modal-header-title-font-line-height);
684
687
  @property st-global(--wds-custom-modal-header-title-font-size);
685
- @property st-global(--wds-divider-fill-color-light-1);
686
- @property st-global(--wds-divider-fill-color-light-2);
688
+ @property st-global(--wds-divider-fill-color-light);
687
689
  @property st-global(--wds-divider-fill-color-light-primary);
688
690
  @property st-global(--wds-divider-fill-color-light-secondary);
689
691
  @property st-global(--wds-divider-gradient-border);
692
+ @property st-global(--wds-divider-vertical-fill-color-light);
690
693
  @property st-global(--wds-dock-background-fill);
691
694
  @property st-global(--wds-dock-background-fill-active);
692
695
  @property st-global(--wds-dock-background-fill-disabled);
@@ -1598,8 +1601,11 @@
1598
1601
  --wds-button-border-radius-tiny: 8px;
1599
1602
  --wds-button-fill-gradient-hover-primary: #4a2ae9;
1600
1603
  --wds-button-fill-gradient-hover-secondary: #526cff;
1604
+ --wds-button-fill-standard-primary: linear-gradient(0deg, #526cff 0%, #526cff 100%);
1605
+ --wds-button-fill-standard-primary-active: linear-gradient(0deg, #4a2ae9 0%, #4a2ae9 100%);
1601
1606
  --wds-button-fill-standard-primary-hover: linear-gradient(105deg, #526cff 17%, #4a2ae9 75%);
1602
- --wds-button-fill-standard-secondary: #ffffff;
1607
+ --wds-button-fill-standard-secondary: linear-gradient(0deg, #ffffff 0%, #ffffff 100%);
1608
+ --wds-button-fill-standard-secondary-active: linear-gradient(0deg, #4a2ae9 0%, #4a2ae9 100%);
1603
1609
  --wds-button-fill-standard-secondary-hover: linear-gradient(105deg, #526cff 17%, #4a2ae9 75%);
1604
1610
  --wds-button-font-line-height-large: 20px;
1605
1611
  --wds-button-font-line-height-medium: 20px;
@@ -1640,7 +1646,7 @@
1640
1646
  --wds-button-size-tiny: 24px;
1641
1647
  --wds-button-size-tiny-screen-small: 32px;
1642
1648
  --wds-button-size-x-tiny: 20px;
1643
- --wds-button-text-hover: #526cff;
1649
+ --wds-button-text-hover: #ffffff;
1644
1650
  --wds-button-text-standard-primary: #131720;
1645
1651
  --wds-button-text-standard-primary-hover: #131720;
1646
1652
  --wds-card-border: 4px;
@@ -2192,11 +2198,11 @@
2192
2198
  --wds-custom-modal-header-padding-vertical: 16px;
2193
2199
  --wds-custom-modal-header-title-font-line-height: 20px;
2194
2200
  --wds-custom-modal-header-title-font-size: 14px;
2195
- --wds-divider-fill-color-light-1: #d6dcff;
2196
- --wds-divider-fill-color-light-2: rgba(244, 247, 255, 0.0000);
2197
- --wds-divider-fill-color-light-primary: rgba(214, 220, 255, 1);
2201
+ --wds-divider-fill-color-light: linear-gradient(90deg, rgba(244, 247, 255, 0.0000) 0%, #d6dcff 16%, #d6dcff 84%, rgba(244, 247, 255, 0.0000) 100%);
2202
+ --wds-divider-fill-color-light-primary: #d6dcff;
2198
2203
  --wds-divider-fill-color-light-secondary: rgba(244, 247, 255, 0.0000);
2199
- --wds-divider-gradient-border: linear-gradient(90deg, rgba(244, 247, 255, 0.0000) 0%, rgba(214, 220, 255, 1) 16%, rgba(214, 220, 255, 1) 84%, rgba(244, 247, 255, 0.0000) 100%);
2204
+ --wds-divider-gradient-border: linear-gradient(90deg, rgba(244, 247, 255, 0.0000) 0%, #d6dcff 16%, #d6dcff 84%, rgba(244, 247, 255, 0.0000) 100%);
2205
+ --wds-divider-vertical-fill-color-light: linear-gradient(0deg, rgba(244, 247, 255, 0.0000) 0%, #d6dcff 16%, #d6dcff 84%, rgba(244, 247, 255, 0.0000) 100%);
2200
2206
  --wds-dock-background-fill: #eef0ff;
2201
2207
  --wds-dock-background-fill-active: #d6dcff;
2202
2208
  --wds-dock-background-fill-disabled: #e5e5e5;
package/wixel/component.st.css CHANGED
@@ -57,8 +57,11 @@
57
57
  @property st-global(--wds-button-border-radius-tiny);
58
58
  @property st-global(--wds-button-fill-gradient-hover-primary);
59
59
  @property st-global(--wds-button-fill-gradient-hover-secondary);
60
+ @property st-global(--wds-button-fill-standard-primary);
61
+ @property st-global(--wds-button-fill-standard-primary-active);
60
62
  @property st-global(--wds-button-fill-standard-primary-hover);
61
63
  @property st-global(--wds-button-fill-standard-secondary);
64
+ @property st-global(--wds-button-fill-standard-secondary-active);
62
65
  @property st-global(--wds-button-fill-standard-secondary-hover);
63
66
  @property st-global(--wds-button-font-line-height-large);
64
67
  @property st-global(--wds-button-font-line-height-medium);
@@ -204,11 +207,11 @@
204
207
  @property st-global(--wds-custom-modal-header-padding-vertical);
205
208
  @property st-global(--wds-custom-modal-header-title-font-line-height);
206
209
  @property st-global(--wds-custom-modal-header-title-font-size);
207
- @property st-global(--wds-divider-fill-color-light-1);
208
- @property st-global(--wds-divider-fill-color-light-2);
210
+ @property st-global(--wds-divider-fill-color-light);
209
211
  @property st-global(--wds-divider-fill-color-light-primary);
210
212
  @property st-global(--wds-divider-fill-color-light-secondary);
211
213
  @property st-global(--wds-divider-gradient-border);
214
+ @property st-global(--wds-divider-vertical-fill-color-light);
212
215
  @property st-global(--wds-dock-background-fill);
213
216
  @property st-global(--wds-dock-background-fill-active);
214
217
  @property st-global(--wds-dock-background-fill-disabled);
@@ -947,8 +950,11 @@
947
950
  --wds-button-border-radius-tiny: 8px;
948
951
  --wds-button-fill-gradient-hover-primary: #4a2ae9;
949
952
  --wds-button-fill-gradient-hover-secondary: #526cff;
953
+ --wds-button-fill-standard-primary: linear-gradient(0deg, #526cff 0%, #526cff 100%);
954
+ --wds-button-fill-standard-primary-active: linear-gradient(0deg, #4a2ae9 0%, #4a2ae9 100%);
950
955
  --wds-button-fill-standard-primary-hover: linear-gradient(105deg, #526cff 17%, #4a2ae9 75%);
951
- --wds-button-fill-standard-secondary: #ffffff;
956
+ --wds-button-fill-standard-secondary: linear-gradient(0deg, #ffffff 0%, #ffffff 100%);
957
+ --wds-button-fill-standard-secondary-active: linear-gradient(0deg, #4a2ae9 0%, #4a2ae9 100%);
952
958
  --wds-button-fill-standard-secondary-hover: linear-gradient(105deg, #526cff 17%, #4a2ae9 75%);
953
959
  --wds-button-font-line-height-large: 20px;
954
960
  --wds-button-font-line-height-medium: 20px;
@@ -989,7 +995,7 @@
989
995
  --wds-button-size-tiny: 24px;
990
996
  --wds-button-size-tiny-screen-small: 32px;
991
997
  --wds-button-size-x-tiny: 20px;
992
- --wds-button-text-hover: #526cff;
998
+ --wds-button-text-hover: #ffffff;
993
999
  --wds-button-text-standard-primary: #131720;
994
1000
  --wds-button-text-standard-primary-hover: #131720;
995
1001
  --wds-card-border: 4px;
@@ -1094,11 +1100,11 @@
1094
1100
  --wds-custom-modal-header-padding-vertical: 16px;
1095
1101
  --wds-custom-modal-header-title-font-line-height: 20px;
1096
1102
  --wds-custom-modal-header-title-font-size: 14px;
1097
- --wds-divider-fill-color-light-1: #d6dcff;
1098
- --wds-divider-fill-color-light-2: rgba(244, 247, 255, 0.0000);
1099
- --wds-divider-fill-color-light-primary: rgba(214, 220, 255, 1);
1103
+ --wds-divider-fill-color-light: linear-gradient(90deg, rgba(244, 247, 255, 0.0000) 0%, #d6dcff 16%, #d6dcff 84%, rgba(244, 247, 255, 0.0000) 100%);
1104
+ --wds-divider-fill-color-light-primary: #d6dcff;
1100
1105
  --wds-divider-fill-color-light-secondary: rgba(244, 247, 255, 0.0000);
1101
- --wds-divider-gradient-border: linear-gradient(90deg, rgba(244, 247, 255, 0.0000) 0%, rgba(214, 220, 255, 1) 16%, rgba(214, 220, 255, 1) 84%, rgba(244, 247, 255, 0.0000) 100%);
1106
+ --wds-divider-gradient-border: linear-gradient(90deg, rgba(244, 247, 255, 0.0000) 0%, #d6dcff 16%, #d6dcff 84%, rgba(244, 247, 255, 0.0000) 100%);
1107
+ --wds-divider-vertical-fill-color-light: linear-gradient(0deg, rgba(244, 247, 255, 0.0000) 0%, #d6dcff 16%, #d6dcff 84%, rgba(244, 247, 255, 0.0000) 100%);
1102
1108
  --wds-dock-background-fill: #eef0ff;
1103
1109
  --wds-dock-background-fill-active: #d6dcff;
1104
1110
  --wds-dock-background-fill-disabled: #e5e5e5;