@wix/design-system-tokens 1.85.0 → 1.86.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 (17) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/all.css +27 -6
  3. package/all.st.css +51 -9
  4. package/component.st.css +31 -7
  5. package/foundation.st.css +18 -2
  6. package/package.json +3 -3
  7. package/semantic.st.css +2 -0
  8. package/studio/all.css +28 -8
  9. package/studio/all.st.css +51 -11
  10. package/studio/component.st.css +31 -9
  11. package/studio/foundation.st.css +18 -2
  12. package/studio/semantic.st.css +2 -0
  13. package/wixel/all.css +72 -51
  14. package/wixel/all.st.css +130 -88
  15. package/wixel/component.st.css +102 -80
  16. package/wixel/foundation.st.css +21 -3
  17. package/wixel/semantic.st.css +7 -5
package/wixel/component.st.css CHANGED
@@ -57,6 +57,7 @@
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-hover);
60
61
  @property st-global(--wds-button-fill-standard-secondary);
61
62
  @property st-global(--wds-button-fill-standard-secondary-hover);
62
63
  @property st-global(--wds-button-font-line-height-large);
@@ -78,14 +79,17 @@
78
79
  @property st-global(--wds-button-icon-offset-tiny);
79
80
  @property st-global(--wds-button-label-font-size-large);
80
81
  @property st-global(--wds-button-outline-hover);
82
+ @property st-global(--wds-button-padding-horizontal-extra-large);
81
83
  @property st-global(--wds-button-padding-horizontal-large);
82
84
  @property st-global(--wds-button-padding-horizontal-medium);
83
85
  @property st-global(--wds-button-padding-horizontal-small);
84
86
  @property st-global(--wds-button-padding-horizontal-tiny);
87
+ @property st-global(--wds-button-padding-vertical-extra-large);
85
88
  @property st-global(--wds-button-padding-vertical-large);
86
89
  @property st-global(--wds-button-padding-vertical-medium);
87
90
  @property st-global(--wds-button-padding-vertical-small);
88
91
  @property st-global(--wds-button-padding-vertical-tiny);
92
+ @property st-global(--wds-button-size-extra-large);
89
93
  @property st-global(--wds-button-size-large);
90
94
  @property st-global(--wds-button-size-large-screen-small);
91
95
  @property st-global(--wds-button-size-medium);
@@ -202,6 +206,9 @@
202
206
  @property st-global(--wds-custom-modal-header-title-font-size);
203
207
  @property st-global(--wds-divider-fill-color-light-1);
204
208
  @property st-global(--wds-divider-fill-color-light-2);
209
+ @property st-global(--wds-divider-fill-color-light-primary);
210
+ @property st-global(--wds-divider-fill-color-light-secondary);
211
+ @property st-global(--wds-divider-gradient-border);
205
212
  @property st-global(--wds-dock-background-fill);
206
213
  @property st-global(--wds-dock-background-fill-active);
207
214
  @property st-global(--wds-dock-background-fill-disabled);
@@ -315,6 +322,7 @@
315
322
  @property st-global(--wds-internal-thumbnail-illustration-size-small);
316
323
  @property st-global(--wds-internal-thumbnail-illustration-size-tiny);
317
324
  @property st-global(--wds-linear-progress-bar-border-radius);
325
+ @property st-global(--wds-list-item-action-affix-margin);
318
326
  @property st-global(--wds-list-item-action-border-radius);
319
327
  @property st-global(--wds-list-item-action-label-font-line-height-medium);
320
328
  @property st-global(--wds-list-item-action-label-font-line-height-small);
@@ -326,7 +334,6 @@
326
334
  @property st-global(--wds-list-item-action-padding-vertical-medium-screen-small);
327
335
  @property st-global(--wds-list-item-action-padding-vertical-small);
328
336
  @property st-global(--wds-list-item-action-padding-vertical-small-screen-small);
329
- @property st-global(--wds-list-item-action-prefix-margin);
330
337
  @property st-global(--wds-list-item-action-subtitle-font-line-height-medium);
331
338
  @property st-global(--wds-list-item-action-subtitle-font-size-medium);
332
339
  @property st-global(--wds-list-item-gap-columns);
@@ -361,6 +368,7 @@
361
368
  @property st-global(--wds-list-item-select-active-title-disabled);
362
369
  @property st-global(--wds-list-item-select-active-title-disabled-screen-small);
363
370
  @property st-global(--wds-list-item-select-active-title-screen-small);
371
+ @property st-global(--wds-list-item-select-affix-margin);
364
372
  @property st-global(--wds-list-item-select-border-radius);
365
373
  @property st-global(--wds-list-item-select-fill);
366
374
  @property st-global(--wds-list-item-select-fill-active);
@@ -384,7 +392,6 @@
384
392
  @property st-global(--wds-list-item-select-padding-vertical-medium-screen-small);
385
393
  @property st-global(--wds-list-item-select-padding-vertical-small);
386
394
  @property st-global(--wds-list-item-select-padding-vertical-small-screen-small);
387
- @property st-global(--wds-list-item-select-prefix-margin);
388
395
  @property st-global(--wds-list-item-select-subtitle);
389
396
  @property st-global(--wds-list-item-select-subtitle-disabled);
390
397
  @property st-global(--wds-list-item-select-subtitle-font-line-height-medium);
@@ -695,6 +702,10 @@
695
702
  @property st-global(--wds-tabs-padding-horizontal-small);
696
703
  @property st-global(--wds-tabs-padding-vertical-medium);
697
704
  @property st-global(--wds-tabs-padding-vertical-small);
705
+ @property st-global(--wds-tabs-selection-border);
706
+ @property st-global(--wds-tabs-selection-fill-primary);
707
+ @property st-global(--wds-tabs-selection-fill-secondary);
708
+ @property st-global(--wds-tabs-selection-height);
698
709
  @property st-global(--wds-tag-border-radius-large);
699
710
  @property st-global(--wds-tag-border-radius-medium);
700
711
  @property st-global(--wds-tag-border-radius-small);
@@ -760,40 +771,40 @@
760
771
  @property st-global(--wds-toggle-button-padding-horizontal-small-round);
761
772
  @property st-global(--wds-toggle-button-padding-horizontal-tiny);
762
773
  @property st-global(--wds-toggle-button-padding-horizontal-tiny-round);
763
- @property st-global(--wds-toggle-button-toggle-switch-border-error-disabled);
764
- @property st-global(--wds-toggle-button-toggle-switch-border-standard-disabled);
765
- @property st-global(--wds-toggle-button-toggle-switch-border-success-disabled);
766
- @property st-global(--wds-toggle-button-toggle-switch-border-urgent-disabled);
767
- @property st-global(--wds-toggle-button-toggle-switch-fill-error);
768
- @property st-global(--wds-toggle-button-toggle-switch-fill-error-active);
769
- @property st-global(--wds-toggle-button-toggle-switch-fill-error-active-hover);
770
- @property st-global(--wds-toggle-button-toggle-switch-fill-error-disabled);
771
- @property st-global(--wds-toggle-button-toggle-switch-fill-error-hover);
772
- @property st-global(--wds-toggle-button-toggle-switch-fill-standard);
773
- @property st-global(--wds-toggle-button-toggle-switch-fill-standard-active);
774
- @property st-global(--wds-toggle-button-toggle-switch-fill-standard-active-hover);
775
- @property st-global(--wds-toggle-button-toggle-switch-fill-standard-disabled);
776
- @property st-global(--wds-toggle-button-toggle-switch-fill-standard-hover);
777
- @property st-global(--wds-toggle-button-toggle-switch-fill-success);
778
- @property st-global(--wds-toggle-button-toggle-switch-fill-success-active);
779
- @property st-global(--wds-toggle-button-toggle-switch-fill-success-active-hover);
780
- @property st-global(--wds-toggle-button-toggle-switch-fill-success-disabled);
781
- @property st-global(--wds-toggle-button-toggle-switch-fill-success-hover);
782
- @property st-global(--wds-toggle-button-toggle-switch-fill-urgent);
783
- @property st-global(--wds-toggle-button-toggle-switch-fill-urgent-active);
784
- @property st-global(--wds-toggle-button-toggle-switch-fill-urgent-active-hover);
785
- @property st-global(--wds-toggle-button-toggle-switch-fill-urgent-disabled);
786
- @property st-global(--wds-toggle-button-toggle-switch-fill-urgent-hover);
787
- @property st-global(--wds-toggle-button-toggle-switch-icon);
788
- @property st-global(--wds-toggle-button-toggle-switch-knob-size-large);
789
- @property st-global(--wds-toggle-button-toggle-switch-knob-size-medium);
790
- @property st-global(--wds-toggle-button-toggle-switch-knob-size-small);
791
- @property st-global(--wds-toggle-button-toggle-switch-knob-text-height);
792
- @property st-global(--wds-toggle-button-toggle-switch-padding);
793
- @property st-global(--wds-toggle-button-toggle-switch-shadow);
794
- @property st-global(--wds-toggle-button-toggle-switch-width-large);
795
- @property st-global(--wds-toggle-button-toggle-switch-width-medium);
796
- @property st-global(--wds-toggle-button-toggle-switch-width-small);
774
+ @property st-global(--wds-toggle-switch-border-error-disabled);
775
+ @property st-global(--wds-toggle-switch-border-standard-disabled);
776
+ @property st-global(--wds-toggle-switch-border-success-disabled);
777
+ @property st-global(--wds-toggle-switch-border-urgent-disabled);
778
+ @property st-global(--wds-toggle-switch-fill-error);
779
+ @property st-global(--wds-toggle-switch-fill-error-active);
780
+ @property st-global(--wds-toggle-switch-fill-error-active-hover);
781
+ @property st-global(--wds-toggle-switch-fill-error-disabled);
782
+ @property st-global(--wds-toggle-switch-fill-error-hover);
783
+ @property st-global(--wds-toggle-switch-fill-standard);
784
+ @property st-global(--wds-toggle-switch-fill-standard-active);
785
+ @property st-global(--wds-toggle-switch-fill-standard-active-hover);
786
+ @property st-global(--wds-toggle-switch-fill-standard-disabled);
787
+ @property st-global(--wds-toggle-switch-fill-standard-hover);
788
+ @property st-global(--wds-toggle-switch-fill-success);
789
+ @property st-global(--wds-toggle-switch-fill-success-active);
790
+ @property st-global(--wds-toggle-switch-fill-success-active-hover);
791
+ @property st-global(--wds-toggle-switch-fill-success-disabled);
792
+ @property st-global(--wds-toggle-switch-fill-success-hover);
793
+ @property st-global(--wds-toggle-switch-fill-urgent);
794
+ @property st-global(--wds-toggle-switch-fill-urgent-active);
795
+ @property st-global(--wds-toggle-switch-fill-urgent-active-hover);
796
+ @property st-global(--wds-toggle-switch-fill-urgent-disabled);
797
+ @property st-global(--wds-toggle-switch-fill-urgent-hover);
798
+ @property st-global(--wds-toggle-switch-icon);
799
+ @property st-global(--wds-toggle-switch-knob-size-large);
800
+ @property st-global(--wds-toggle-switch-knob-size-medium);
801
+ @property st-global(--wds-toggle-switch-knob-size-small);
802
+ @property st-global(--wds-toggle-switch-knob-text-height);
803
+ @property st-global(--wds-toggle-switch-padding);
804
+ @property st-global(--wds-toggle-switch-shadow);
805
+ @property st-global(--wds-toggle-switch-width-large);
806
+ @property st-global(--wds-toggle-switch-width-medium);
807
+ @property st-global(--wds-toggle-switch-width-small);
797
808
  @property st-global(--wds-tooltip-background-fill);
798
809
  @property st-global(--wds-tooltip-border-radius);
799
810
  @property st-global(--wds-tooltip-border-radius-medium);
@@ -936,8 +947,9 @@
936
947
  --wds-button-border-radius-tiny: 8px;
937
948
  --wds-button-fill-gradient-hover-primary: #4a2ae9;
938
949
  --wds-button-fill-gradient-hover-secondary: #526cff;
950
+ --wds-button-fill-standard-primary-hover: linear-gradient(105deg, #526cff 17%, #4a2ae9 75%);
939
951
  --wds-button-fill-standard-secondary: #ffffff;
940
- --wds-button-fill-standard-secondary-hover: #f4f6ff;
952
+ --wds-button-fill-standard-secondary-hover: linear-gradient(105deg, #526cff 17%, #4a2ae9 75%);
941
953
  --wds-button-font-line-height-large: 20px;
942
954
  --wds-button-font-line-height-medium: 20px;
943
955
  --wds-button-font-line-height-small: 16px;
@@ -956,24 +968,27 @@
956
968
  --wds-button-icon-offset-small: 12px;
957
969
  --wds-button-icon-offset-tiny: 12px;
958
970
  --wds-button-label-font-size-large: 14px;
959
- --wds-button-outline-hover: #d6dcff;
971
+ --wds-button-outline-hover: transparent;
972
+ --wds-button-padding-horizontal-extra-large: 24px;
960
973
  --wds-button-padding-horizontal-large: 24px;
961
974
  --wds-button-padding-horizontal-medium: 20px;
962
975
  --wds-button-padding-horizontal-small: 16px;
963
976
  --wds-button-padding-horizontal-tiny: 12px;
977
+ --wds-button-padding-vertical-extra-large: 14px;
964
978
  --wds-button-padding-vertical-large: 10px;
965
979
  --wds-button-padding-vertical-medium: 8px;
966
980
  --wds-button-padding-vertical-small: 6px;
967
981
  --wds-button-padding-vertical-tiny: 6px;
968
- --wds-button-size-large: 48px;
982
+ --wds-button-size-extra-large: 48px;
983
+ --wds-button-size-large: 42px;
969
984
  --wds-button-size-large-screen-small: 44px;
970
- --wds-button-size-medium: 42px;
985
+ --wds-button-size-medium: 38px;
971
986
  --wds-button-size-medium-screen-small: 40px;
972
- --wds-button-size-small: 36px;
987
+ --wds-button-size-small: 32px;
973
988
  --wds-button-size-small-screen-small: 36px;
974
- --wds-button-size-tiny: 28px;
989
+ --wds-button-size-tiny: 24px;
975
990
  --wds-button-size-tiny-screen-small: 32px;
976
- --wds-button-size-x-tiny: 24px;
991
+ --wds-button-size-x-tiny: 20px;
977
992
  --wds-button-text-hover: #526cff;
978
993
  --wds-button-text-standard-primary: #131720;
979
994
  --wds-button-text-standard-primary-hover: #131720;
@@ -1028,7 +1043,7 @@
1028
1043
  --wds-circular-progress-bar-size-medium: 52px;
1029
1044
  --wds-circular-progress-bar-size-small: 24px;
1030
1045
  --wds-circular-progress-bar-size-tiny: 18px;
1031
- --wds-close-button-standard-fill-active: #526cff;
1046
+ --wds-close-button-standard-fill-active: #4a2ae9;
1032
1047
  --wds-close-button-standard-fill-disabled: #e5e5e5;
1033
1048
  --wds-close-button-standard-fill-hover: #bac5ff;
1034
1049
  --wds-close-button-standard-filled-fill: #d6dcff;
@@ -1081,6 +1096,9 @@
1081
1096
  --wds-custom-modal-header-title-font-size: 14px;
1082
1097
  --wds-divider-fill-color-light-1: #d6dcff;
1083
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);
1100
+ --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%);
1084
1102
  --wds-dock-background-fill: #eef0ff;
1085
1103
  --wds-dock-background-fill-active: #d6dcff;
1086
1104
  --wds-dock-background-fill-disabled: #e5e5e5;
@@ -1194,6 +1212,7 @@
1194
1212
  --wds-internal-thumbnail-illustration-size-small: 51px;
1195
1213
  --wds-internal-thumbnail-illustration-size-tiny: 38px;
1196
1214
  --wds-linear-progress-bar-border-radius: 0;
1215
+ --wds-list-item-action-affix-margin: 6px;
1197
1216
  --wds-list-item-action-border-radius: 8px;
1198
1217
  --wds-list-item-action-label-font-line-height-medium: 20px;
1199
1218
  --wds-list-item-action-label-font-line-height-small: 16px;
@@ -1205,7 +1224,6 @@
1205
1224
  --wds-list-item-action-padding-vertical-medium-screen-small: 8px;
1206
1225
  --wds-list-item-action-padding-vertical-small: 12px;
1207
1226
  --wds-list-item-action-padding-vertical-small-screen-small: 8px;
1208
- --wds-list-item-action-prefix-margin: 6px;
1209
1227
  --wds-list-item-action-subtitle-font-line-height-medium: 16px;
1210
1228
  --wds-list-item-action-subtitle-font-size-medium: 12px;
1211
1229
  --wds-list-item-gap-columns: 24px;
@@ -1240,6 +1258,7 @@
1240
1258
  --wds-list-item-select-active-title-disabled: rgba(38, 37, 36, 0.3000);
1241
1259
  --wds-list-item-select-active-title-disabled-screen-small: rgba(38, 37, 36, 0.3000);
1242
1260
  --wds-list-item-select-active-title-screen-small: #526cff;
1261
+ --wds-list-item-select-affix-margin: 6px;
1243
1262
  --wds-list-item-select-border-radius: 8px;
1244
1263
  --wds-list-item-select-fill: #ffffff;
1245
1264
  --wds-list-item-select-fill-active: #eef0ff;
@@ -1263,7 +1282,6 @@
1263
1282
  --wds-list-item-select-padding-vertical-medium-screen-small: 8px;
1264
1283
  --wds-list-item-select-padding-vertical-small: 12px;
1265
1284
  --wds-list-item-select-padding-vertical-small-screen-small: 8px;
1266
- --wds-list-item-select-prefix-margin: 6px;
1267
1285
  --wds-list-item-select-subtitle: #868aa5;
1268
1286
  --wds-list-item-select-subtitle-disabled: rgba(38, 37, 36, 0.3000);
1269
1287
  --wds-list-item-select-subtitle-font-line-height-medium: 16px;
@@ -1574,6 +1592,10 @@
1574
1592
  --wds-tabs-padding-horizontal-small: 12px;
1575
1593
  --wds-tabs-padding-vertical-medium: 16px;
1576
1594
  --wds-tabs-padding-vertical-small: 12px;
1595
+ --wds-tabs-selection-border: linear-gradient(90deg, rgba(255, 255, 255, 0.0000) 0%, #526cff 20%, #526cff 80%, rgba(255, 255, 255, 0.0000) 100%);
1596
+ --wds-tabs-selection-fill-primary: #526cff;
1597
+ --wds-tabs-selection-fill-secondary: rgba(255, 255, 255, 0.0000);
1598
+ --wds-tabs-selection-height: 1px;
1577
1599
  --wds-tag-border-radius-large: 4px;
1578
1600
  --wds-tag-border-radius-medium: 4px;
1579
1601
  --wds-tag-border-radius-small: 4px;
@@ -1639,40 +1661,40 @@
1639
1661
  --wds-toggle-button-padding-horizontal-small-round: 16px;
1640
1662
  --wds-toggle-button-padding-horizontal-tiny: 12px;
1641
1663
  --wds-toggle-button-padding-horizontal-tiny-round: 12px;
1642
- --wds-toggle-button-toggle-switch-border-error-disabled: rgba(38, 37, 36, 0.0000);
1643
- --wds-toggle-button-toggle-switch-border-standard-disabled: rgba(38, 37, 36, 0.0000);
1644
- --wds-toggle-button-toggle-switch-border-success-disabled: rgba(38, 37, 36, 0.0000);
1645
- --wds-toggle-button-toggle-switch-border-urgent-disabled: rgba(38, 37, 36, 0.0000);
1646
- --wds-toggle-button-toggle-switch-fill-error: #131720;
1647
- --wds-toggle-button-toggle-switch-fill-error-active: #ee4437;
1648
- --wds-toggle-button-toggle-switch-fill-error-active-hover: #ca3a2f;
1649
- --wds-toggle-button-toggle-switch-fill-error-disabled: #bebebe;
1650
- --wds-toggle-button-toggle-switch-fill-error-hover: #42454c;
1651
- --wds-toggle-button-toggle-switch-fill-standard: #bac5ff;
1652
- --wds-toggle-button-toggle-switch-fill-standard-active: #526cff;
1653
- --wds-toggle-button-toggle-switch-fill-standard-active-hover: #4c49fb;
1654
- --wds-toggle-button-toggle-switch-fill-standard-disabled: #bebebe;
1655
- --wds-toggle-button-toggle-switch-fill-standard-hover: #9aa9ff;
1656
- --wds-toggle-button-toggle-switch-fill-success: #131720;
1657
- --wds-toggle-button-toggle-switch-fill-success-active: #25a55a;
1658
- --wds-toggle-button-toggle-switch-fill-success-active-hover: #1f8c4d;
1659
- --wds-toggle-button-toggle-switch-fill-success-disabled: #bebebe;
1660
- --wds-toggle-button-toggle-switch-fill-success-hover: #42454c;
1661
- --wds-toggle-button-toggle-switch-fill-urgent: #131720;
1662
- --wds-toggle-button-toggle-switch-fill-urgent-active: #f96132;
1663
- --wds-toggle-button-toggle-switch-fill-urgent-active-hover: #d4522b;
1664
- --wds-toggle-button-toggle-switch-fill-urgent-disabled: #bebebe;
1665
- --wds-toggle-button-toggle-switch-fill-urgent-hover: #42454c;
1666
- --wds-toggle-button-toggle-switch-icon: false;
1667
- --wds-toggle-button-toggle-switch-knob-size-large: 20px;
1668
- --wds-toggle-button-toggle-switch-knob-size-medium: 16px;
1669
- --wds-toggle-button-toggle-switch-knob-size-small: 12px;
1670
- --wds-toggle-button-toggle-switch-knob-text-height: 0;
1671
- --wds-toggle-button-toggle-switch-padding: 1px;
1672
- --wds-toggle-button-toggle-switch-shadow: true;
1673
- --wds-toggle-button-toggle-switch-width-large: 40px;
1674
- --wds-toggle-button-toggle-switch-width-medium: 32px;
1675
- --wds-toggle-button-toggle-switch-width-small: 24px;
1664
+ --wds-toggle-switch-border-error-disabled: rgba(38, 37, 36, 0.0000);
1665
+ --wds-toggle-switch-border-standard-disabled: rgba(38, 37, 36, 0.0000);
1666
+ --wds-toggle-switch-border-success-disabled: rgba(38, 37, 36, 0.0000);
1667
+ --wds-toggle-switch-border-urgent-disabled: rgba(38, 37, 36, 0.0000);
1668
+ --wds-toggle-switch-fill-error: #131720;
1669
+ --wds-toggle-switch-fill-error-active: #ee4437;
1670
+ --wds-toggle-switch-fill-error-active-hover: #ca3a2f;
1671
+ --wds-toggle-switch-fill-error-disabled: #bebebe;
1672
+ --wds-toggle-switch-fill-error-hover: #42454c;
1673
+ --wds-toggle-switch-fill-standard: #bac5ff;
1674
+ --wds-toggle-switch-fill-standard-active: #526cff;
1675
+ --wds-toggle-switch-fill-standard-active-hover: #4c49fb;
1676
+ --wds-toggle-switch-fill-standard-disabled: #bebebe;
1677
+ --wds-toggle-switch-fill-standard-hover: #9aa9ff;
1678
+ --wds-toggle-switch-fill-success: #131720;
1679
+ --wds-toggle-switch-fill-success-active: #25a55a;
1680
+ --wds-toggle-switch-fill-success-active-hover: #1f8c4d;
1681
+ --wds-toggle-switch-fill-success-disabled: #bebebe;
1682
+ --wds-toggle-switch-fill-success-hover: #42454c;
1683
+ --wds-toggle-switch-fill-urgent: #131720;
1684
+ --wds-toggle-switch-fill-urgent-active: #f96132;
1685
+ --wds-toggle-switch-fill-urgent-active-hover: #d4522b;
1686
+ --wds-toggle-switch-fill-urgent-disabled: #bebebe;
1687
+ --wds-toggle-switch-fill-urgent-hover: #42454c;
1688
+ --wds-toggle-switch-icon: false;
1689
+ --wds-toggle-switch-knob-size-large: 20px;
1690
+ --wds-toggle-switch-knob-size-medium: 16px;
1691
+ --wds-toggle-switch-knob-size-small: 12px;
1692
+ --wds-toggle-switch-knob-text-height: 0;
1693
+ --wds-toggle-switch-padding: 1px;
1694
+ --wds-toggle-switch-shadow: true;
1695
+ --wds-toggle-switch-width-large: 40px;
1696
+ --wds-toggle-switch-width-medium: 32px;
1697
+ --wds-toggle-switch-width-small: 24px;
1676
1698
  --wds-tooltip-background-fill: #ffffff;
1677
1699
  --wds-tooltip-border-radius: 8px;
1678
1700
  --wds-tooltip-border-radius-medium: 8px;
package/wixel/foundation.st.css CHANGED
@@ -1,4 +1,12 @@
1
- @property st-global(--wds-background-blur-100);
1
+ @property st-global(--wds-background-blur-0);
2
+ @property st-global(--wds-background-blur-10);
3
+ @property st-global(--wds-background-blur-50);
4
+ @property st-global(--wds-background-blur-150);
5
+ @property st-global(--wds-background-blur-200);
6
+ @property st-global(--wds-background-blur-250);
7
+ @property st-global(--wds-background-blur-300);
8
+ @property st-global(--wds-background-blur-350);
9
+ @property st-global(--wds-background-blur-375);
2
10
  @property st-global(--wds-border-radius-0);
3
11
  @property st-global(--wds-border-radius-100);
4
12
  @property st-global(--wds-border-radius-200);
@@ -178,6 +186,7 @@
178
186
  @property st-global(--wds-space-800);
179
187
  @property st-global(--wds-space-850);
180
188
  @property st-global(--wds-space-900);
189
+ @property st-global(--wds-space-950);
181
190
  @property st-global(--wds-space-1000);
182
191
  @property st-global(--wds-space-1050);
183
192
  @property st-global(--wds-space-1100);
@@ -190,7 +199,15 @@
190
199
  @property st-global(--wds-space-2400);
191
200
 
192
201
  .root {
193
- --wds-background-blur-100: 30px;
202
+ --wds-background-blur-0: 0;
203
+ --wds-background-blur-10: 4px;
204
+ --wds-background-blur-50: 8px;
205
+ --wds-background-blur-150: 12px;
206
+ --wds-background-blur-200: 16px;
207
+ --wds-background-blur-250: 20px;
208
+ --wds-background-blur-300: 24px;
209
+ --wds-background-blur-350: 28px;
210
+ --wds-background-blur-375: 30px;
194
211
  --wds-border-radius-0: 0;
195
212
  --wds-border-radius-100: 2px;
196
213
  --wds-border-radius-200: 4px;
@@ -326,7 +343,7 @@
326
343
  --wds-font-weight-semi-bold: 600;
327
344
  --wds-shadow-100: 0;
328
345
  --wds-shadow-200: 0;
329
- --wds-shadow-300: 0;
346
+ --wds-shadow-300: 0 2px 18px rgba(38, 37, 36, 0.1000), 0 6px 6px rgba(38, 37, 36, 0.0000);
330
347
  --wds-shadow-400: 0;
331
348
  --wds-shadow-blur-50: 4px;
332
349
  --wds-shadow-blur-100: 4px;
@@ -370,6 +387,7 @@
370
387
  --wds-space-800: 32px;
371
388
  --wds-space-850: 34px;
372
389
  --wds-space-900: 36px;
390
+ --wds-space-950: 38px;
373
391
  --wds-space-1000: 40px;
374
392
  --wds-space-1050: 42px;
375
393
  --wds-space-1100: 44px;
package/wixel/semantic.st.css CHANGED
@@ -4,6 +4,7 @@
4
4
  @property st-global(--wds-border-radius-surface-overlay);
5
5
  @property st-global(--wds-border-radius-surface-raised);
6
6
  @property st-global(--wds-border-radius-surface-sunken);
7
+ @property st-global(--wds-border-width-default);
7
8
  @property st-global(--wds-color-border-ai-primary);
8
9
  @property st-global(--wds-color-border-ai-primary-active);
9
10
  @property st-global(--wds-color-border-ai-primary-disabled);
@@ -426,6 +427,7 @@
426
427
  --wds-border-radius-surface-overlay: 12px;
427
428
  --wds-border-radius-surface-raised: 12px;
428
429
  --wds-border-radius-surface-sunken: 0;
430
+ --wds-border-width-default: 0;
429
431
  --wds-color-border-ai-primary: #ffffff;
430
432
  --wds-color-border-ai-primary-active: #ffffff;
431
433
  --wds-color-border-ai-primary-disabled: #ffffff;
@@ -679,7 +681,7 @@
679
681
  --wds-color-fill-standard-light-secondary-disabled: rgba(255, 255, 255, 0.3000);
680
682
  --wds-color-fill-standard-light-secondary-hover: #9aa9ff;
681
683
  --wds-color-fill-standard-primary: #526cff;
682
- --wds-color-fill-standard-primary-active: #526cff;
684
+ --wds-color-fill-standard-primary-active: #4a2ae9;
683
685
  --wds-color-fill-standard-primary-disabled: #bebebe;
684
686
  --wds-color-fill-standard-primary-hover: #4c49fb;
685
687
  --wds-color-fill-standard-secondary: #eef0ff;
@@ -822,10 +824,10 @@
822
824
  --wds-shadow-focus-spread: 0;
823
825
  --wds-shadow-focus-standard: #bac5ff;
824
826
  --wds-shadow-focus-warning: #fdead2;
825
- --wds-shadow-surface-modal: 0;
826
- --wds-shadow-surface-overlay: 0;
827
- --wds-shadow-surface-overlay-dark: 0;
828
- --wds-shadow-surface-raised: 0;
827
+ --wds-shadow-surface-modal: 0 10px 10px rgba(38, 37, 36, 0.2000), 0 8px 8px rgba(38, 37, 36, 0.0000);
828
+ --wds-shadow-surface-overlay: 0 2px 18px rgba(38, 37, 36, 0.1000), 0 6px 6px rgba(38, 37, 36, 0.0000);
829
+ --wds-shadow-surface-overlay-dark: 0 10px 18px rgba(38, 37, 36, 0.1000), 0 6px 6px rgba(38, 37, 36, 0.0000);
830
+ --wds-shadow-surface-raised: 0 1px 4px rgba(38, 37, 36, 0.3000), 0 2px 4px rgba(38, 37, 36, 0.0000);
829
831
  --wds-space-padding-horizontal-large: 24px;
830
832
  --wds-space-padding-horizontal-medium: 20px;
831
833
  --wds-space-padding-horizontal-small: 16px;