@wix/design-system-tokens 1.86.3 → 1.87.1

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 (12) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/all.css +7 -1
  3. package/all.st.css +12 -0
  4. package/component.st.css +12 -0
  5. package/package.json +2 -2
  6. package/studio/all.css +7 -1
  7. package/studio/all.st.css +12 -0
  8. package/studio/component.st.css +12 -0
  9. package/wixel/all.css +16 -7
  10. package/wixel/all.st.css +24 -6
  11. package/wixel/component.st.css +15 -3
  12. package/wixel/semantic.st.css +9 -3
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;
@@ -209,10 +212,10 @@
209
212
  --wds-custom-modal-header-title-font-line-height: 24px;
210
213
  --wds-custom-modal-header-title-font-size: 16px;
211
214
  --wds-divider-fill-color-light: #dfe5eb;
212
- --wds-divider-vertical-fill-color-light: #dfe5eb;
213
215
  --wds-divider-fill-color-light-primary: #dfe5eb;
214
216
  --wds-divider-fill-color-light-secondary: #dfe5eb;
215
217
  --wds-divider-gradient-border: linear-gradient(90deg, #dfe5eb 0%, #dfe5eb 16%, #dfe5eb 84%, #dfe5eb 100%);
218
+ --wds-divider-vertical-fill-color-light: #dfe5eb;
216
219
  --wds-dock-background-fill: #e7f0ff;
217
220
  --wds-dock-background-fill-active: #d6e6fe;
218
221
  --wds-dock-background-fill-disabled: rgba(0, 6, 36, .1);
@@ -266,6 +269,9 @@
266
269
  --wds-info-icon-fill-hover: #116dff;
267
270
  --wds-input-background-fill-default: #ffffff;
268
271
  --wds-input-background-fill-hover: #e7f0ff;
272
+ --wds-input-border-color: #d6e6fe;
273
+ --wds-input-border-color-hover: #a8caff;
274
+ --wds-input-border-color-readonly: #dfe5eb;
269
275
  --wds-input-border-radius-default-large: 6px;
270
276
  --wds-input-border-radius-default-medium: 6px;
271
277
  --wds-input-border-radius-default-small: 6px;
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);
@@ -807,6 +810,9 @@
807
810
  @property st-global(--wds-input-area-padding-vertical-small);
808
811
  @property st-global(--wds-input-background-fill-default);
809
812
  @property st-global(--wds-input-background-fill-hover);
813
+ @property st-global(--wds-input-border-color);
814
+ @property st-global(--wds-input-border-color-hover);
815
+ @property st-global(--wds-input-border-color-readonly);
810
816
  @property st-global(--wds-input-border-radius-default-large);
811
817
  @property st-global(--wds-input-border-radius-default-medium);
812
818
  @property st-global(--wds-input-border-radius-default-small);
@@ -1596,8 +1602,11 @@
1596
1602
  --wds-button-border-radius-tiny: 1000px;
1597
1603
  --wds-button-fill-gradient-hover-primary: #0f62e6;
1598
1604
  --wds-button-fill-gradient-hover-secondary: #0f62e6;
1605
+ --wds-button-fill-standard-primary: #116dff;
1606
+ --wds-button-fill-standard-primary-active: #084ebd;
1599
1607
  --wds-button-fill-standard-primary-hover: #0f62e6;
1600
1608
  --wds-button-fill-standard-secondary: #ffffff;
1609
+ --wds-button-fill-standard-secondary-active: linear-gradient(0deg, #084ebd 0%, #084ebd 100%);
1601
1610
  --wds-button-fill-standard-secondary-hover: #116dff;
1602
1611
  --wds-button-font-line-height-large: 24px;
1603
1612
  --wds-button-font-line-height-medium: 24px;
@@ -2315,6 +2324,9 @@
2315
2324
  --wds-input-area-padding-vertical-small: 6px;
2316
2325
  --wds-input-background-fill-default: #ffffff;
2317
2326
  --wds-input-background-fill-hover: #e7f0ff;
2327
+ --wds-input-border-color: #d6e6fe;
2328
+ --wds-input-border-color-hover: #a8caff;
2329
+ --wds-input-border-color-readonly: #dfe5eb;
2318
2330
  --wds-input-border-radius-default-large: 6px;
2319
2331
  --wds-input-border-radius-default-medium: 6px;
2320
2332
  --wds-input-border-radius-default-small: 6px;
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);
@@ -273,6 +276,9 @@
273
276
  @property st-global(--wds-input-area-padding-vertical-small);
274
277
  @property st-global(--wds-input-background-fill-default);
275
278
  @property st-global(--wds-input-background-fill-hover);
279
+ @property st-global(--wds-input-border-color);
280
+ @property st-global(--wds-input-border-color-hover);
281
+ @property st-global(--wds-input-border-color-readonly);
276
282
  @property st-global(--wds-input-border-radius-default-large);
277
283
  @property st-global(--wds-input-border-radius-default-medium);
278
284
  @property st-global(--wds-input-border-radius-default-small);
@@ -942,8 +948,11 @@
942
948
  --wds-button-border-radius-tiny: 1000px;
943
949
  --wds-button-fill-gradient-hover-primary: #0f62e6;
944
950
  --wds-button-fill-gradient-hover-secondary: #0f62e6;
951
+ --wds-button-fill-standard-primary: #116dff;
952
+ --wds-button-fill-standard-primary-active: #084ebd;
945
953
  --wds-button-fill-standard-primary-hover: #0f62e6;
946
954
  --wds-button-fill-standard-secondary: #ffffff;
955
+ --wds-button-fill-standard-secondary-active: linear-gradient(0deg, #084ebd 0%, #084ebd 100%);
947
956
  --wds-button-fill-standard-secondary-hover: #116dff;
948
957
  --wds-button-font-line-height-large: 24px;
949
958
  --wds-button-font-line-height-medium: 24px;
@@ -1158,6 +1167,9 @@
1158
1167
  --wds-input-area-padding-vertical-small: 6px;
1159
1168
  --wds-input-background-fill-default: #ffffff;
1160
1169
  --wds-input-background-fill-hover: #e7f0ff;
1170
+ --wds-input-border-color: #d6e6fe;
1171
+ --wds-input-border-color-hover: #a8caff;
1172
+ --wds-input-border-color-readonly: #dfe5eb;
1161
1173
  --wds-input-border-radius-default-large: 6px;
1162
1174
  --wds-input-border-radius-default-medium: 6px;
1163
1175
  --wds-input-border-radius-default-small: 6px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wix/design-system-tokens",
3
- "version": "1.86.3",
3
+ "version": "1.87.1",
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": "ecf5d9317e8c193c2c6be6b163e3ae96b8a19ef7cd75baa69396b52b"
36
+ "falconPackageHash": "a71ff8c22457e7f4267d80597b520a664e1da61253c08d8693f78bc5"
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;
@@ -209,10 +212,10 @@
209
212
  --wds-custom-modal-header-title-font-line-height: 20px;
210
213
  --wds-custom-modal-header-title-font-size: 14px;
211
214
  --wds-divider-fill-color-light: #e2e3ea;
212
- --wds-divider-vertical-fill-color-light: #e2e3ea;
213
215
  --wds-divider-fill-color-light-primary: #e2e3ea;
214
216
  --wds-divider-fill-color-light-secondary: #e2e3ea;
215
217
  --wds-divider-gradient-border: linear-gradient(90deg, #e2e3ea 0%, #e2e3ea 16%, #e2e3ea 84%, #e2e3ea 100%);
218
+ --wds-divider-vertical-fill-color-light: #e2e3ea;
216
219
  --wds-dock-background-fill: #ebf2ff;
217
220
  --wds-dock-background-fill-active: #dce9ff;
218
221
  --wds-dock-background-fill-disabled: #e5e5e5;
@@ -266,6 +269,9 @@
266
269
  --wds-info-icon-fill-hover: #116dff;
267
270
  --wds-input-background-fill-default: #ffffff;
268
271
  --wds-input-background-fill-hover: #f7f8f8;
272
+ --wds-input-border-color: #e2e3ea;
273
+ --wds-input-border-color-hover: #868aa5;
274
+ --wds-input-border-color-readonly: #e2e3ea;
269
275
  --wds-input-border-radius-default-large: 4px;
270
276
  --wds-input-border-radius-default-medium: 4px;
271
277
  --wds-input-border-radius-default-small: 4px;
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);
@@ -803,6 +806,9 @@
803
806
  @property st-global(--wds-input-area-padding-vertical-small);
804
807
  @property st-global(--wds-input-background-fill-default);
805
808
  @property st-global(--wds-input-background-fill-hover);
809
+ @property st-global(--wds-input-border-color);
810
+ @property st-global(--wds-input-border-color-hover);
811
+ @property st-global(--wds-input-border-color-readonly);
806
812
  @property st-global(--wds-input-border-radius-default-large);
807
813
  @property st-global(--wds-input-border-radius-default-medium);
808
814
  @property st-global(--wds-input-border-radius-default-small);
@@ -1586,8 +1592,11 @@
1586
1592
  --wds-button-border-radius-tiny: 4px;
1587
1593
  --wds-button-fill-gradient-hover-primary: #0f62e6;
1588
1594
  --wds-button-fill-gradient-hover-secondary: #0f62e6;
1595
+ --wds-button-fill-standard-primary: #116dff;
1596
+ --wds-button-fill-standard-primary-active: #116dff;
1589
1597
  --wds-button-fill-standard-primary-hover: #0f62e6;
1590
1598
  --wds-button-fill-standard-secondary: #ffffff;
1599
+ --wds-button-fill-standard-secondary-active: #116dff;
1591
1600
  --wds-button-fill-standard-secondary-hover: #f7f8f8;
1592
1601
  --wds-button-font-line-height-large: 24px;
1593
1602
  --wds-button-font-line-height-medium: 20px;
@@ -2301,6 +2310,9 @@
2301
2310
  --wds-input-area-padding-vertical-small: 6px;
2302
2311
  --wds-input-background-fill-default: #ffffff;
2303
2312
  --wds-input-background-fill-hover: #f7f8f8;
2313
+ --wds-input-border-color: #e2e3ea;
2314
+ --wds-input-border-color-hover: #868aa5;
2315
+ --wds-input-border-color-readonly: #e2e3ea;
2304
2316
  --wds-input-border-radius-default-large: 4px;
2305
2317
  --wds-input-border-radius-default-medium: 4px;
2306
2318
  --wds-input-border-radius-default-small: 4px;
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);
@@ -273,6 +276,9 @@
273
276
  @property st-global(--wds-input-area-padding-vertical-small);
274
277
  @property st-global(--wds-input-background-fill-default);
275
278
  @property st-global(--wds-input-background-fill-hover);
279
+ @property st-global(--wds-input-border-color);
280
+ @property st-global(--wds-input-border-color-hover);
281
+ @property st-global(--wds-input-border-color-readonly);
276
282
  @property st-global(--wds-input-border-radius-default-large);
277
283
  @property st-global(--wds-input-border-radius-default-medium);
278
284
  @property st-global(--wds-input-border-radius-default-small);
@@ -936,8 +942,11 @@
936
942
  --wds-button-border-radius-tiny: 4px;
937
943
  --wds-button-fill-gradient-hover-primary: #0f62e6;
938
944
  --wds-button-fill-gradient-hover-secondary: #0f62e6;
945
+ --wds-button-fill-standard-primary: #116dff;
946
+ --wds-button-fill-standard-primary-active: #116dff;
939
947
  --wds-button-fill-standard-primary-hover: #0f62e6;
940
948
  --wds-button-fill-standard-secondary: #ffffff;
949
+ --wds-button-fill-standard-secondary-active: #116dff;
941
950
  --wds-button-fill-standard-secondary-hover: #f7f8f8;
942
951
  --wds-button-font-line-height-large: 24px;
943
952
  --wds-button-font-line-height-medium: 20px;
@@ -1152,6 +1161,9 @@
1152
1161
  --wds-input-area-padding-vertical-small: 6px;
1153
1162
  --wds-input-background-fill-default: #ffffff;
1154
1163
  --wds-input-background-fill-hover: #f7f8f8;
1164
+ --wds-input-border-color: #e2e3ea;
1165
+ --wds-input-border-color-hover: #868aa5;
1166
+ --wds-input-border-color-readonly: #e2e3ea;
1155
1167
  --wds-input-border-radius-default-large: 4px;
1156
1168
  --wds-input-border-radius-default-medium: 4px;
1157
1169
  --wds-input-border-radius-default-small: 4px;
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;
@@ -206,10 +209,10 @@
206
209
  --wds-custom-modal-header-title-font-line-height: 20px;
207
210
  --wds-custom-modal-header-title-font-size: 14px;
208
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%);
209
- --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%);
210
212
  --wds-divider-fill-color-light-primary: #d6dcff;
211
213
  --wds-divider-fill-color-light-secondary: rgba(244, 247, 255, 0.0000);
212
214
  --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%);
215
+ --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
216
  --wds-dock-background-fill: #eef0ff;
214
217
  --wds-dock-background-fill-active: #d6dcff;
215
218
  --wds-dock-background-fill-disabled: #e5e5e5;
@@ -263,6 +266,9 @@
263
266
  --wds-info-icon-fill-hover: #526cff;
264
267
  --wds-input-background-fill-default: #eef0ff;
265
268
  --wds-input-background-fill-hover: #d6dcff;
269
+ --wds-input-border-color: #eef0ff;
270
+ --wds-input-border-color-hover: #d6dcff;
271
+ --wds-input-border-color-readonly: #edeef2;
266
272
  --wds-input-border-radius-default-large: 8px;
267
273
  --wds-input-border-radius-default-medium: 8px;
268
274
  --wds-input-border-radius-default-small: 8px;
@@ -802,7 +808,7 @@
802
808
  --wds-toggle-switch-knob-size-small: 12px;
803
809
  --wds-toggle-switch-knob-text-height: 0;
804
810
  --wds-toggle-switch-padding: 1px;
805
- --wds-toggle-switch-shadow: true;
811
+ --wds-toggle-switch-shadow: 0 2px 1px rgba(38, 37, 36, 0.0000), 0 0 3px rgba(38, 37, 36, 0.3000);
806
812
  --wds-toggle-switch-width-large: 40px;
807
813
  --wds-toggle-switch-width-medium: 32px;
808
814
  --wds-toggle-switch-width-small: 24px;
@@ -1450,9 +1456,12 @@
1450
1456
  --wds-shadow-fill-secondary-overlay: rgba(38, 37, 36, 0.0000);
1451
1457
  --wds-shadow-fill-secondary-raised: rgba(38, 37, 36, 0.0000);
1452
1458
  --wds-shadow-fill-secondary-toggle: rgba(38, 37, 36, 0.0000);
1453
- --wds-shadow-focus-destructive: #fbd0cd;
1454
- --wds-shadow-focus-standard: #bac5ff;
1455
- --wds-shadow-focus-warning: #fdead2;
1459
+ --wds-shadow-focus-destructive: 0 0 0 3px #fbd0cd;
1460
+ --wds-shadow-focus-inner-destructive: 0 0 0 3px #fbd0cd inset;
1461
+ --wds-shadow-focus-inner-standard: 0 0 0 3px #bac5ff inset;
1462
+ --wds-shadow-focus-inner-warning: 0 0 0 3px #fdead2 inset;
1463
+ --wds-shadow-focus-standard: 0 0 0 3px #bac5ff;
1464
+ --wds-shadow-focus-warning: 0 0 0 3px #fdead2;
1456
1465
  --wds-shadow-focus-spread: 0;
1457
1466
  --wds-shadow-surface-modal: 0 10px 10px rgba(38, 37, 36, 0.2000), 0 8px 8px rgba(38, 37, 36, 0.0000);
1458
1467
  --wds-shadow-surface-overlay: 0 2px 18px rgba(38, 37, 36, 0.1000), 0 6px 6px rgba(38, 37, 36, 0.0000);
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);
@@ -804,6 +807,9 @@
804
807
  @property st-global(--wds-input-area-padding-vertical-small);
805
808
  @property st-global(--wds-input-background-fill-default);
806
809
  @property st-global(--wds-input-background-fill-hover);
810
+ @property st-global(--wds-input-border-color);
811
+ @property st-global(--wds-input-border-color-hover);
812
+ @property st-global(--wds-input-border-color-readonly);
807
813
  @property st-global(--wds-input-border-radius-default-large);
808
814
  @property st-global(--wds-input-border-radius-default-medium);
809
815
  @property st-global(--wds-input-border-radius-default-small);
@@ -1116,6 +1122,9 @@
1116
1122
  @property st-global(--wds-shadow-fill-secondary-raised);
1117
1123
  @property st-global(--wds-shadow-fill-secondary-toggle);
1118
1124
  @property st-global(--wds-shadow-focus-destructive);
1125
+ @property st-global(--wds-shadow-focus-inner-destructive);
1126
+ @property st-global(--wds-shadow-focus-inner-standard);
1127
+ @property st-global(--wds-shadow-focus-inner-warning);
1119
1128
  @property st-global(--wds-shadow-focus-spread);
1120
1129
  @property st-global(--wds-shadow-focus-standard);
1121
1130
  @property st-global(--wds-shadow-focus-warning);
@@ -1598,8 +1607,11 @@
1598
1607
  --wds-button-border-radius-tiny: 8px;
1599
1608
  --wds-button-fill-gradient-hover-primary: #4a2ae9;
1600
1609
  --wds-button-fill-gradient-hover-secondary: #526cff;
1610
+ --wds-button-fill-standard-primary: linear-gradient(0deg, #526cff 0%, #526cff 100%);
1611
+ --wds-button-fill-standard-primary-active: linear-gradient(0deg, #4a2ae9 0%, #4a2ae9 100%);
1601
1612
  --wds-button-fill-standard-primary-hover: linear-gradient(105deg, #526cff 17%, #4a2ae9 75%);
1602
- --wds-button-fill-standard-secondary: #ffffff;
1613
+ --wds-button-fill-standard-secondary: linear-gradient(0deg, #ffffff 0%, #ffffff 100%);
1614
+ --wds-button-fill-standard-secondary-active: linear-gradient(0deg, #4a2ae9 0%, #4a2ae9 100%);
1603
1615
  --wds-button-fill-standard-secondary-hover: linear-gradient(105deg, #526cff 17%, #4a2ae9 75%);
1604
1616
  --wds-button-font-line-height-large: 20px;
1605
1617
  --wds-button-font-line-height-medium: 20px;
@@ -1640,7 +1652,7 @@
1640
1652
  --wds-button-size-tiny: 24px;
1641
1653
  --wds-button-size-tiny-screen-small: 32px;
1642
1654
  --wds-button-size-x-tiny: 20px;
1643
- --wds-button-text-hover: #526cff;
1655
+ --wds-button-text-hover: #ffffff;
1644
1656
  --wds-button-text-standard-primary: #131720;
1645
1657
  --wds-button-text-standard-primary-hover: #131720;
1646
1658
  --wds-card-border: 4px;
@@ -2314,6 +2326,9 @@
2314
2326
  --wds-input-area-padding-vertical-small: 8px;
2315
2327
  --wds-input-background-fill-default: #eef0ff;
2316
2328
  --wds-input-background-fill-hover: #d6dcff;
2329
+ --wds-input-border-color: #eef0ff;
2330
+ --wds-input-border-color-hover: #d6dcff;
2331
+ --wds-input-border-color-readonly: #edeef2;
2317
2332
  --wds-input-border-radius-default-large: 8px;
2318
2333
  --wds-input-border-radius-default-medium: 8px;
2319
2334
  --wds-input-border-radius-default-small: 8px;
@@ -2625,10 +2640,13 @@
2625
2640
  --wds-shadow-fill-secondary-overlay: rgba(38, 37, 36, 0.0000);
2626
2641
  --wds-shadow-fill-secondary-raised: rgba(38, 37, 36, 0.0000);
2627
2642
  --wds-shadow-fill-secondary-toggle: rgba(38, 37, 36, 0.0000);
2628
- --wds-shadow-focus-destructive: #fbd0cd;
2643
+ --wds-shadow-focus-destructive: 0 0 0 3px #fbd0cd;
2644
+ --wds-shadow-focus-inner-destructive: 0 0 0 3px #fbd0cd inset;
2645
+ --wds-shadow-focus-inner-standard: 0 0 0 3px #bac5ff inset;
2646
+ --wds-shadow-focus-inner-warning: 0 0 0 3px #fdead2 inset;
2629
2647
  --wds-shadow-focus-spread: 0;
2630
- --wds-shadow-focus-standard: #bac5ff;
2631
- --wds-shadow-focus-warning: #fdead2;
2648
+ --wds-shadow-focus-standard: 0 0 0 3px #bac5ff;
2649
+ --wds-shadow-focus-warning: 0 0 0 3px #fdead2;
2632
2650
  --wds-shadow-inner-100: 1px 1px 2px rgba(38, 37, 36, 0.1000) inset, 1px 1px 2px rgba(255, 255, 255, 0.1000);
2633
2651
  --wds-shadow-inner-200: 1px 1px 4px rgba(38, 37, 36, 0.2000) inset;
2634
2652
  --wds-shadow-inner-300: 0 0 18px rgba(38, 37, 36, 0.1000) inset, 0 0 6px rgba(38, 37, 36, 0.0500) inset;
@@ -2929,7 +2947,7 @@
2929
2947
  --wds-toggle-switch-knob-size-small: 12px;
2930
2948
  --wds-toggle-switch-knob-text-height: 0;
2931
2949
  --wds-toggle-switch-padding: 1px;
2932
- --wds-toggle-switch-shadow: true;
2950
+ --wds-toggle-switch-shadow: 0 2px 1px rgba(38, 37, 36, 0.0000), 0 0 3px rgba(38, 37, 36, 0.3000);
2933
2951
  --wds-toggle-switch-width-large: 40px;
2934
2952
  --wds-toggle-switch-width-medium: 32px;
2935
2953
  --wds-toggle-switch-width-small: 24px;
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);
@@ -270,6 +273,9 @@
270
273
  @property st-global(--wds-input-area-padding-vertical-small);
271
274
  @property st-global(--wds-input-background-fill-default);
272
275
  @property st-global(--wds-input-background-fill-hover);
276
+ @property st-global(--wds-input-border-color);
277
+ @property st-global(--wds-input-border-color-hover);
278
+ @property st-global(--wds-input-border-color-readonly);
273
279
  @property st-global(--wds-input-border-radius-default-large);
274
280
  @property st-global(--wds-input-border-radius-default-medium);
275
281
  @property st-global(--wds-input-border-radius-default-small);
@@ -947,8 +953,11 @@
947
953
  --wds-button-border-radius-tiny: 8px;
948
954
  --wds-button-fill-gradient-hover-primary: #4a2ae9;
949
955
  --wds-button-fill-gradient-hover-secondary: #526cff;
956
+ --wds-button-fill-standard-primary: linear-gradient(0deg, #526cff 0%, #526cff 100%);
957
+ --wds-button-fill-standard-primary-active: linear-gradient(0deg, #4a2ae9 0%, #4a2ae9 100%);
950
958
  --wds-button-fill-standard-primary-hover: linear-gradient(105deg, #526cff 17%, #4a2ae9 75%);
951
- --wds-button-fill-standard-secondary: #ffffff;
959
+ --wds-button-fill-standard-secondary: linear-gradient(0deg, #ffffff 0%, #ffffff 100%);
960
+ --wds-button-fill-standard-secondary-active: linear-gradient(0deg, #4a2ae9 0%, #4a2ae9 100%);
952
961
  --wds-button-fill-standard-secondary-hover: linear-gradient(105deg, #526cff 17%, #4a2ae9 75%);
953
962
  --wds-button-font-line-height-large: 20px;
954
963
  --wds-button-font-line-height-medium: 20px;
@@ -989,7 +998,7 @@
989
998
  --wds-button-size-tiny: 24px;
990
999
  --wds-button-size-tiny-screen-small: 32px;
991
1000
  --wds-button-size-x-tiny: 20px;
992
- --wds-button-text-hover: #526cff;
1001
+ --wds-button-text-hover: #ffffff;
993
1002
  --wds-button-text-standard-primary: #131720;
994
1003
  --wds-button-text-standard-primary-hover: #131720;
995
1004
  --wds-card-border: 4px;
@@ -1160,6 +1169,9 @@
1160
1169
  --wds-input-area-padding-vertical-small: 8px;
1161
1170
  --wds-input-background-fill-default: #eef0ff;
1162
1171
  --wds-input-background-fill-hover: #d6dcff;
1172
+ --wds-input-border-color: #eef0ff;
1173
+ --wds-input-border-color-hover: #d6dcff;
1174
+ --wds-input-border-color-readonly: #edeef2;
1163
1175
  --wds-input-border-radius-default-large: 8px;
1164
1176
  --wds-input-border-radius-default-medium: 8px;
1165
1177
  --wds-input-border-radius-default-small: 8px;
@@ -1691,7 +1703,7 @@
1691
1703
  --wds-toggle-switch-knob-size-small: 12px;
1692
1704
  --wds-toggle-switch-knob-text-height: 0;
1693
1705
  --wds-toggle-switch-padding: 1px;
1694
- --wds-toggle-switch-shadow: true;
1706
+ --wds-toggle-switch-shadow: 0 2px 1px rgba(38, 37, 36, 0.0000), 0 0 3px rgba(38, 37, 36, 0.3000);
1695
1707
  --wds-toggle-switch-width-large: 40px;
1696
1708
  --wds-toggle-switch-width-medium: 32px;
1697
1709
  --wds-toggle-switch-width-small: 24px;
package/wixel/semantic.st.css CHANGED
@@ -398,6 +398,9 @@
398
398
  @property st-global(--wds-shadow-fill-secondary-raised);
399
399
  @property st-global(--wds-shadow-fill-secondary-toggle);
400
400
  @property st-global(--wds-shadow-focus-destructive);
401
+ @property st-global(--wds-shadow-focus-inner-destructive);
402
+ @property st-global(--wds-shadow-focus-inner-standard);
403
+ @property st-global(--wds-shadow-focus-inner-warning);
401
404
  @property st-global(--wds-shadow-focus-spread);
402
405
  @property st-global(--wds-shadow-focus-standard);
403
406
  @property st-global(--wds-shadow-focus-warning);
@@ -820,10 +823,13 @@
820
823
  --wds-shadow-fill-secondary-overlay: rgba(38, 37, 36, 0.0000);
821
824
  --wds-shadow-fill-secondary-raised: rgba(38, 37, 36, 0.0000);
822
825
  --wds-shadow-fill-secondary-toggle: rgba(38, 37, 36, 0.0000);
823
- --wds-shadow-focus-destructive: #fbd0cd;
826
+ --wds-shadow-focus-destructive: 0 0 0 3px #fbd0cd;
827
+ --wds-shadow-focus-inner-destructive: 0 0 0 3px #fbd0cd inset;
828
+ --wds-shadow-focus-inner-standard: 0 0 0 3px #bac5ff inset;
829
+ --wds-shadow-focus-inner-warning: 0 0 0 3px #fdead2 inset;
824
830
  --wds-shadow-focus-spread: 0;
825
- --wds-shadow-focus-standard: #bac5ff;
826
- --wds-shadow-focus-warning: #fdead2;
831
+ --wds-shadow-focus-standard: 0 0 0 3px #bac5ff;
832
+ --wds-shadow-focus-warning: 0 0 0 3px #fdead2;
827
833
  --wds-shadow-surface-modal: 0 10px 10px rgba(38, 37, 36, 0.2000), 0 8px 8px rgba(38, 37, 36, 0.0000);
828
834
  --wds-shadow-surface-overlay: 0 2px 18px rgba(38, 37, 36, 0.1000), 0 6px 6px rgba(38, 37, 36, 0.0000);
829
835
  --wds-shadow-surface-overlay-dark: 0 10px 18px rgba(38, 37, 36, 0.1000), 0 6px 6px rgba(38, 37, 36, 0.0000);