@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/all.css CHANGED
@@ -58,8 +58,9 @@
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-hover: linear-gradient(105deg, #526cff 17%, #4a2ae9 75%);
61
62
  --wds-button-fill-standard-secondary: #ffffff;
62
- --wds-button-fill-standard-secondary-hover: #f4f6ff;
63
+ --wds-button-fill-standard-secondary-hover: linear-gradient(105deg, #526cff 17%, #4a2ae9 75%);
63
64
  --wds-button-font-line-height-large: 20px;
64
65
  --wds-button-font-line-height-medium: 20px;
65
66
  --wds-button-font-line-height-small: 16px;
@@ -78,24 +79,27 @@
78
79
  --wds-button-icon-offset-small: 12px;
79
80
  --wds-button-icon-offset-tiny: 12px;
80
81
  --wds-button-label-font-size-large: 14px;
81
- --wds-button-outline-hover: #d6dcff;
82
+ --wds-button-outline-hover: transparent;
83
+ --wds-button-padding-horizontal-extra-large: 24px;
82
84
  --wds-button-padding-horizontal-large: 24px;
83
85
  --wds-button-padding-horizontal-medium: 20px;
84
86
  --wds-button-padding-horizontal-small: 16px;
85
87
  --wds-button-padding-horizontal-tiny: 12px;
88
+ --wds-button-padding-vertical-extra-large: 14px;
86
89
  --wds-button-padding-vertical-large: 10px;
87
90
  --wds-button-padding-vertical-medium: 8px;
88
91
  --wds-button-padding-vertical-small: 6px;
89
92
  --wds-button-padding-vertical-tiny: 6px;
90
- --wds-button-size-large: 48px;
93
+ --wds-button-size-extra-large: 48px;
94
+ --wds-button-size-large: 42px;
91
95
  --wds-button-size-large-screen-small: 44px;
92
- --wds-button-size-medium: 42px;
96
+ --wds-button-size-medium: 38px;
93
97
  --wds-button-size-medium-screen-small: 40px;
94
- --wds-button-size-small: 36px;
98
+ --wds-button-size-small: 32px;
95
99
  --wds-button-size-small-screen-small: 36px;
96
- --wds-button-size-tiny: 28px;
100
+ --wds-button-size-tiny: 24px;
97
101
  --wds-button-size-tiny-screen-small: 32px;
98
- --wds-button-size-x-tiny: 24px;
102
+ --wds-button-size-x-tiny: 20px;
99
103
  --wds-button-text-standard-primary: #131720;
100
104
  --wds-button-text-standard-primary-hover: #131720;
101
105
  --wds-button-text-hover: #526cff;
@@ -150,7 +154,7 @@
150
154
  --wds-circular-progress-bar-size-medium: 52px;
151
155
  --wds-circular-progress-bar-size-small: 24px;
152
156
  --wds-circular-progress-bar-size-tiny: 18px;
153
- --wds-close-button-standard-fill-active: #526cff;
157
+ --wds-close-button-standard-fill-active: #4a2ae9;
154
158
  --wds-close-button-standard-fill-disabled: #e5e5e5;
155
159
  --wds-close-button-standard-fill-hover: #bac5ff;
156
160
  --wds-close-button-standard-filled-fill: #d6dcff;
@@ -203,6 +207,9 @@
203
207
  --wds-custom-modal-header-title-font-size: 14px;
204
208
  --wds-divider-fill-color-light-1: #d6dcff;
205
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-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%);
206
213
  --wds-dock-background-fill: #eef0ff;
207
214
  --wds-dock-background-fill-active: #d6dcff;
208
215
  --wds-dock-background-fill-disabled: #e5e5e5;
@@ -331,6 +338,7 @@
331
338
  --wds-list-item-padding-vertical-tiny: 12px;
332
339
  --wds-list-item-padding-vertical-x-tiny: 8px;
333
340
  --wds-list-item-padding-vertical-xx-tiny: 4px;
341
+ --wds-list-item-action-affix-margin: 6px;
334
342
  --wds-list-item-action-border-radius: 8px;
335
343
  --wds-list-item-action-label-font-line-height-medium: 20px;
336
344
  --wds-list-item-action-label-font-line-height-small: 16px;
@@ -342,7 +350,6 @@
342
350
  --wds-list-item-action-padding-vertical-medium-screen-small: 8px;
343
351
  --wds-list-item-action-padding-vertical-small: 12px;
344
352
  --wds-list-item-action-padding-vertical-small-screen-small: 8px;
345
- --wds-list-item-action-prefix-margin: 6px;
346
353
  --wds-list-item-action-subtitle-font-line-height-medium: 16px;
347
354
  --wds-list-item-action-subtitle-font-size-medium: 12px;
348
355
  --wds-list-item-section-font-line-height: 16px;
@@ -362,6 +369,7 @@
362
369
  --wds-list-item-select-active-title-disabled: rgba(38, 37, 36, 0.3000);
363
370
  --wds-list-item-select-active-title-disabled-screen-small: rgba(38, 37, 36, 0.3000);
364
371
  --wds-list-item-select-active-title-screen-small: #526cff;
372
+ --wds-list-item-select-affix-margin: 6px;
365
373
  --wds-list-item-select-border-radius: 8px;
366
374
  --wds-list-item-select-fill: #ffffff;
367
375
  --wds-list-item-select-fill-active: #eef0ff;
@@ -381,7 +389,6 @@
381
389
  --wds-list-item-select-padding-vertical-medium-screen-small: 8px;
382
390
  --wds-list-item-select-padding-vertical-small: 12px;
383
391
  --wds-list-item-select-padding-vertical-small-screen-small: 8px;
384
- --wds-list-item-select-prefix-margin: 6px;
385
392
  --wds-list-item-select-subtitle: #868aa5;
386
393
  --wds-list-item-select-subtitle-disabled: rgba(38, 37, 36, 0.3000);
387
394
  --wds-list-item-select-subtitle-font-line-height-medium: 16px;
@@ -696,6 +703,10 @@
696
703
  --wds-tabs-padding-horizontal-small: 12px;
697
704
  --wds-tabs-padding-vertical-medium: 16px;
698
705
  --wds-tabs-padding-vertical-small: 12px;
706
+ --wds-tabs-selection-fill-primary: #526cff;
707
+ --wds-tabs-selection-fill-secondary: rgba(255, 255, 255, 0.0000);
708
+ --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%);
709
+ --wds-tabs-selection-height: 1px;
699
710
  --wds-tag-border-radius-large: 4px;
700
711
  --wds-tag-border-radius-medium: 4px;
701
712
  --wds-tag-border-radius-small: 4px;
@@ -761,40 +772,40 @@
761
772
  --wds-toggle-button-padding-horizontal-small-round: 16px;
762
773
  --wds-toggle-button-padding-horizontal-tiny: 12px;
763
774
  --wds-toggle-button-padding-horizontal-tiny-round: 12px;
764
- --wds-toggle-button-toggle-switch-border-error-disabled: rgba(38, 37, 36, 0.0000);
765
- --wds-toggle-button-toggle-switch-border-standard-disabled: rgba(38, 37, 36, 0.0000);
766
- --wds-toggle-button-toggle-switch-border-success-disabled: rgba(38, 37, 36, 0.0000);
767
- --wds-toggle-button-toggle-switch-border-urgent-disabled: rgba(38, 37, 36, 0.0000);
768
- --wds-toggle-button-toggle-switch-fill-error: #131720;
769
- --wds-toggle-button-toggle-switch-fill-error-active: #ee4437;
770
- --wds-toggle-button-toggle-switch-fill-error-active-hover: #ca3a2f;
771
- --wds-toggle-button-toggle-switch-fill-error-disabled: #bebebe;
772
- --wds-toggle-button-toggle-switch-fill-error-hover: #42454c;
773
- --wds-toggle-button-toggle-switch-fill-standard: #bac5ff;
774
- --wds-toggle-button-toggle-switch-fill-standard-active: #526cff;
775
- --wds-toggle-button-toggle-switch-fill-standard-active-hover: #4c49fb;
776
- --wds-toggle-button-toggle-switch-fill-standard-disabled: #bebebe;
777
- --wds-toggle-button-toggle-switch-fill-standard-hover: #9aa9ff;
778
- --wds-toggle-button-toggle-switch-fill-success: #131720;
779
- --wds-toggle-button-toggle-switch-fill-success-active: #25a55a;
780
- --wds-toggle-button-toggle-switch-fill-success-active-hover: #1f8c4d;
781
- --wds-toggle-button-toggle-switch-fill-success-disabled: #bebebe;
782
- --wds-toggle-button-toggle-switch-fill-success-hover: #42454c;
783
- --wds-toggle-button-toggle-switch-fill-urgent: #131720;
784
- --wds-toggle-button-toggle-switch-fill-urgent-active: #f96132;
785
- --wds-toggle-button-toggle-switch-fill-urgent-active-hover: #d4522b;
786
- --wds-toggle-button-toggle-switch-fill-urgent-disabled: #bebebe;
787
- --wds-toggle-button-toggle-switch-fill-urgent-hover: #42454c;
788
- --wds-toggle-button-toggle-switch-icon: false;
789
- --wds-toggle-button-toggle-switch-knob-size-large: 20px;
790
- --wds-toggle-button-toggle-switch-knob-size-medium: 16px;
791
- --wds-toggle-button-toggle-switch-knob-size-small: 12px;
792
- --wds-toggle-button-toggle-switch-knob-text-height: 0;
793
- --wds-toggle-button-toggle-switch-padding: 1px;
794
- --wds-toggle-button-toggle-switch-shadow: true;
795
- --wds-toggle-button-toggle-switch-width-large: 40px;
796
- --wds-toggle-button-toggle-switch-width-medium: 32px;
797
- --wds-toggle-button-toggle-switch-width-small: 24px;
775
+ --wds-toggle-switch-border-error-disabled: rgba(38, 37, 36, 0.0000);
776
+ --wds-toggle-switch-border-standard-disabled: rgba(38, 37, 36, 0.0000);
777
+ --wds-toggle-switch-border-success-disabled: rgba(38, 37, 36, 0.0000);
778
+ --wds-toggle-switch-border-urgent-disabled: rgba(38, 37, 36, 0.0000);
779
+ --wds-toggle-switch-fill-error: #131720;
780
+ --wds-toggle-switch-fill-error-active: #ee4437;
781
+ --wds-toggle-switch-fill-error-active-hover: #ca3a2f;
782
+ --wds-toggle-switch-fill-error-disabled: #bebebe;
783
+ --wds-toggle-switch-fill-error-hover: #42454c;
784
+ --wds-toggle-switch-fill-standard: #bac5ff;
785
+ --wds-toggle-switch-fill-standard-active: #526cff;
786
+ --wds-toggle-switch-fill-standard-active-hover: #4c49fb;
787
+ --wds-toggle-switch-fill-standard-disabled: #bebebe;
788
+ --wds-toggle-switch-fill-standard-hover: #9aa9ff;
789
+ --wds-toggle-switch-fill-success: #131720;
790
+ --wds-toggle-switch-fill-success-active: #25a55a;
791
+ --wds-toggle-switch-fill-success-active-hover: #1f8c4d;
792
+ --wds-toggle-switch-fill-success-disabled: #bebebe;
793
+ --wds-toggle-switch-fill-success-hover: #42454c;
794
+ --wds-toggle-switch-fill-urgent: #131720;
795
+ --wds-toggle-switch-fill-urgent-active: #f96132;
796
+ --wds-toggle-switch-fill-urgent-active-hover: #d4522b;
797
+ --wds-toggle-switch-fill-urgent-disabled: #bebebe;
798
+ --wds-toggle-switch-fill-urgent-hover: #42454c;
799
+ --wds-toggle-switch-icon: false;
800
+ --wds-toggle-switch-knob-size-large: 20px;
801
+ --wds-toggle-switch-knob-size-medium: 16px;
802
+ --wds-toggle-switch-knob-size-small: 12px;
803
+ --wds-toggle-switch-knob-text-height: 0;
804
+ --wds-toggle-switch-padding: 1px;
805
+ --wds-toggle-switch-shadow: true;
806
+ --wds-toggle-switch-width-large: 40px;
807
+ --wds-toggle-switch-width-medium: 32px;
808
+ --wds-toggle-switch-width-small: 24px;
798
809
  --wds-tooltip-background-fill: #ffffff;
799
810
  --wds-tooltip-border-radius: 8px;
800
811
  --wds-tooltip-border-radius-medium: 8px;
@@ -876,7 +887,15 @@
876
887
  --wds-vertical-tabs-section-title-padding-top-medium: 24px;
877
888
  --wds-vertical-tabs-section-title-padding-top-small: 16px;
878
889
  --wds-vertical-tabs-section-title-padding-top-tiny: 4px;
879
- --wds-background-blur-100: 30px;
890
+ --wds-background-blur-0: 0;
891
+ --wds-background-blur-10: 4px;
892
+ --wds-background-blur-50: 8px;
893
+ --wds-background-blur-150: 12px;
894
+ --wds-background-blur-200: 16px;
895
+ --wds-background-blur-250: 20px;
896
+ --wds-background-blur-300: 24px;
897
+ --wds-background-blur-350: 28px;
898
+ --wds-background-blur-375: 30px;
880
899
  --wds-border-radius-0: 0;
881
900
  --wds-border-radius-100: 2px;
882
901
  --wds-border-radius-200: 4px;
@@ -1232,7 +1251,7 @@
1232
1251
  --wds-color-fill-stage-section-secondary-disabled: #e5e5e5;
1233
1252
  --wds-color-fill-stage-section-secondary-hover: #bac5ff;
1234
1253
  --wds-color-fill-standard-primary: #526cff;
1235
- --wds-color-fill-standard-primary-active: #526cff;
1254
+ --wds-color-fill-standard-primary-active: #4a2ae9;
1236
1255
  --wds-color-fill-standard-primary-disabled: #bebebe;
1237
1256
  --wds-color-fill-standard-primary-hover: #4c49fb;
1238
1257
  --wds-color-fill-standard-secondary: #eef0ff;
@@ -1397,7 +1416,7 @@
1397
1416
  --wds-font-weight-body-bold: 600;
1398
1417
  --wds-shadow-100: 0;
1399
1418
  --wds-shadow-200: 0;
1400
- --wds-shadow-300: 0;
1419
+ --wds-shadow-300: 0 2px 18px rgba(38, 37, 36, 0.1000), 0 6px 6px rgba(38, 37, 36, 0.0000);
1401
1420
  --wds-shadow-400: 0;
1402
1421
  --wds-shadow-blur-50: 4px;
1403
1422
  --wds-shadow-blur-100: 4px;
@@ -1435,10 +1454,10 @@
1435
1454
  --wds-shadow-focus-standard: #bac5ff;
1436
1455
  --wds-shadow-focus-warning: #fdead2;
1437
1456
  --wds-shadow-focus-spread: 0;
1438
- --wds-shadow-surface-modal: 0;
1439
- --wds-shadow-surface-overlay: 0;
1440
- --wds-shadow-surface-overlay-dark: 0;
1441
- --wds-shadow-surface-raised: 0;
1457
+ --wds-shadow-surface-modal: 0 10px 10px rgba(38, 37, 36, 0.2000), 0 8px 8px rgba(38, 37, 36, 0.0000);
1458
+ --wds-shadow-surface-overlay: 0 2px 18px rgba(38, 37, 36, 0.1000), 0 6px 6px rgba(38, 37, 36, 0.0000);
1459
+ --wds-shadow-surface-overlay-dark: 0 10px 18px rgba(38, 37, 36, 0.1000), 0 6px 6px rgba(38, 37, 36, 0.0000);
1460
+ --wds-shadow-surface-raised: 0 1px 4px rgba(38, 37, 36, 0.3000), 0 2px 4px rgba(38, 37, 36, 0.0000);
1442
1461
  --wds-space-0: 0;
1443
1462
  --wds-space-25: 1px;
1444
1463
  --wds-space-50: 2px;
@@ -1456,6 +1475,7 @@
1456
1475
  --wds-space-800: 32px;
1457
1476
  --wds-space-850: 34px;
1458
1477
  --wds-space-900: 36px;
1478
+ --wds-space-950: 38px;
1459
1479
  --wds-space-1000: 40px;
1460
1480
  --wds-space-1050: 42px;
1461
1481
  --wds-space-1100: 44px;
@@ -1484,6 +1504,7 @@
1484
1504
  --wds-border-radius-surface-overlay: 12px;
1485
1505
  --wds-border-radius-surface-raised: 12px;
1486
1506
  --wds-border-radius-surface-sunken: 0;
1507
+ --wds-border-width-default: 0;
1487
1508
  --wds-width-default: 0;
1488
1509
  --wds-width-default-2: 0;
1489
1510
  }