@wix/design-system-tokens 1.86.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 (13) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/all.css +18 -6
  3. package/all.st.css +31 -7
  4. package/component.st.css +31 -7
  5. package/package.json +2 -2
  6. package/studio/all.css +16 -5
  7. package/studio/all.st.css +29 -7
  8. package/studio/component.st.css +29 -7
  9. package/wixel/all.css +28 -16
  10. package/wixel/all.st.css +42 -18
  11. package/wixel/component.st.css +34 -12
  12. package/wixel/foundation.st.css +3 -1
  13. package/wixel/semantic.st.css +5 -5
package/CHANGELOG.md CHANGED
@@ -1,3 +1,10 @@
1
+ ## 1.86.1 - 2025-03-21
2
+
3
+ ### Visual Breaking Changes
4
+
5
+ - breaking(Tabs): border tokens [14651](https://github.com/wix-private/wix-design-systems/pull/14651)
6
+ - breaking(button): change values of Wixel tokens [14635](https://github.com/wix-private/wix-design-systems/pull/14635)
7
+
1
8
  ## 1.86.0 - 2025-03-20
2
9
 
3
10
  ### Visual Breaking Changes
package/all.css CHANGED
@@ -58,6 +58,7 @@
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-hover: #0f62e6;
61
62
  --wds-button-fill-standard-secondary: #ffffff;
62
63
  --wds-button-fill-standard-secondary-hover: #116dff;
63
64
  --wds-button-font-line-height-large: 24px;
@@ -68,6 +69,7 @@
68
69
  --wds-button-font-size-medium: 16px;
69
70
  --wds-button-font-size-small: 14px;
70
71
  --wds-button-font-size-tiny: 12px;
72
+ --wds-button-font-weight-tiny: 700;
71
73
  --wds-button-gap-large: 12px;
72
74
  --wds-button-gap-medium: 6px;
73
75
  --wds-button-gap-small: 6px;
@@ -78,14 +80,17 @@
78
80
  --wds-button-icon-offset-tiny: 12px;
79
81
  --wds-button-label-font-size-large: 16px;
80
82
  --wds-button-outline-hover: transparent;
83
+ --wds-button-padding-horizontal-extra-large: 36px;
81
84
  --wds-button-padding-horizontal-large: 30px;
82
85
  --wds-button-padding-horizontal-medium: 24px;
83
86
  --wds-button-padding-horizontal-small: 18px;
84
87
  --wds-button-padding-horizontal-tiny: 12px;
88
+ --wds-button-padding-vertical-extra-large: 12px;
85
89
  --wds-button-padding-vertical-large: 9px;
86
90
  --wds-button-padding-vertical-medium: 6px;
87
91
  --wds-button-padding-vertical-small: 6px;
88
92
  --wds-button-padding-vertical-tiny: 3px;
93
+ --wds-button-size-extra-large: 48px;
89
94
  --wds-button-size-large: 42px;
90
95
  --wds-button-size-large-screen-small: 54px;
91
96
  --wds-button-size-medium: 36px;
@@ -205,6 +210,9 @@
205
210
  --wds-custom-modal-header-title-font-size: 16px;
206
211
  --wds-divider-fill-color-light-1: #dfe5eb;
207
212
  --wds-divider-fill-color-light-2: #dfe5eb;
213
+ --wds-divider-fill-color-light-primary: #dfe5eb;
214
+ --wds-divider-fill-color-light-secondary: #dfe5eb;
215
+ --wds-divider-gradient-border: linear-gradient(90deg, #dfe5eb 0%, #dfe5eb 16%, #dfe5eb 84%, #dfe5eb 100%);
208
216
  --wds-dock-background-fill: #e7f0ff;
209
217
  --wds-dock-background-fill-active: #d6e6fe;
210
218
  --wds-dock-background-fill-disabled: rgba(0, 6, 36, .1);
@@ -333,6 +341,7 @@
333
341
  --wds-list-item-padding-vertical-tiny: 12px;
334
342
  --wds-list-item-padding-vertical-x-tiny: 6px;
335
343
  --wds-list-item-padding-vertical-xx-tiny: 3px;
344
+ --wds-list-item-action-affix-margin: 6px;
336
345
  --wds-list-item-action-border-radius: 0;
337
346
  --wds-list-item-action-label-font-line-height-medium: 24px;
338
347
  --wds-list-item-action-label-font-line-height-small: 18px;
@@ -344,7 +353,6 @@
344
353
  --wds-list-item-action-padding-vertical-medium-screen-small: 12px;
345
354
  --wds-list-item-action-padding-vertical-small: 6px;
346
355
  --wds-list-item-action-padding-vertical-small-screen-small: 12px;
347
- --wds-list-item-action-prefix-margin: 6px;
348
356
  --wds-list-item-action-subtitle-font-line-height-medium: 18px;
349
357
  --wds-list-item-action-subtitle-font-size-medium: 14px;
350
358
  --wds-list-item-section-font-size: 14px;
@@ -364,6 +372,7 @@
364
372
  --wds-list-item-select-active-title-disabled: rgba(255, 255, 255, .7);
365
373
  --wds-list-item-select-active-title-disabled-screen-small: rgba(0, 6, 36, .3);
366
374
  --wds-list-item-select-active-title-screen-small: #116dff;
375
+ --wds-list-item-select-affix-margin: 6px;
367
376
  --wds-list-item-select-border-radius: 0;
368
377
  --wds-list-item-select-fill: #ffffff;
369
378
  --wds-list-item-select-fill-active: #d6e6fe;
@@ -383,7 +392,6 @@
383
392
  --wds-list-item-select-padding-vertical-medium-screen-small: 12px;
384
393
  --wds-list-item-select-padding-vertical-small: 6px;
385
394
  --wds-list-item-select-padding-vertical-small-screen-small: 12px;
386
- --wds-list-item-select-prefix-margin: 6px;
387
395
  --wds-list-item-select-subtitle: #868aa5;
388
396
  --wds-list-item-select-subtitle-disabled: rgba(0, 6, 36, .3);
389
397
  --wds-list-item-select-subtitle-font-line-height-medium: 18px;
@@ -698,6 +706,10 @@
698
706
  --wds-tabs-padding-horizontal-small: 12px;
699
707
  --wds-tabs-padding-vertical-medium: 18px;
700
708
  --wds-tabs-padding-vertical-small: 12px;
709
+ --wds-tabs-selection-border: linear-gradient(90deg, #116dff 0%, #116dff 20%, #116dff 80%, #116dff 100%);
710
+ --wds-tabs-selection-fill-primary: #116dff;
711
+ --wds-tabs-selection-fill-secondary: #116dff;
712
+ --wds-tabs-selection-height: 3px;
701
713
  --wds-tag-border-radius-large: 1000px;
702
714
  --wds-tag-border-radius-medium: 1000px;
703
715
  --wds-tag-border-radius-small: 1000px;
@@ -718,7 +730,7 @@
718
730
  --wds-tag-size-tiny: 18px;
719
731
  --wds-testimonial-list-gap: 30px;
720
732
  --wds-thumbnail-border-radius: 6px;
721
- --wds-thumbnail-border-width-default: 1;
733
+ --wds-thumbnail-border-width-default: 1px;
722
734
  --wds-thumbnail-fill: rgba(255, 255, 255, 0);
723
735
  --wds-thumbnail-fill-hover: rgba(255, 255, 255, 0);
724
736
  --wds-thumbnail-gap: 12px;
@@ -727,9 +739,9 @@
727
739
  --wds-thumbnail-illustration-fill-3: #e7f0ff;
728
740
  --wds-thumbnail-subtitle-fill: #44485f;
729
741
  --wds-thumbnail-subtitle-font-line-height-tiny: 18px;
730
- --wds-thumbnail-subtitle-font-size-tiny: 14px;
742
+ --wds-thumbnail-subtitle-font-size-tiny: 12px;
731
743
  --wds-thumbnail-title-font-line-height-tiny: 18px;
732
- --wds-thumbnail-title-font-size-tiny: 14px;
744
+ --wds-thumbnail-title-font-size-tiny: 12px;
733
745
  --wds-thumbnail-title-font-weight-tiny: 400;
734
746
  --wds-thumbnail-title-padding-top: 6px;
735
747
  --wds-timeline-title-font-line-height: 18px;
@@ -755,9 +767,9 @@
755
767
  --wds-toggle-button-padding-right-small-round: 18px;
756
768
  --wds-toggle-button-padding-right-tiny: 6px;
757
769
  --wds-toggle-button-padding-right-tiny-round: 12px;
770
+ --wds-toggle-switch-border-error-disabled: rgba(0, 6, 36, .1);
758
771
  --wds-toggle-switch-border-standard-disabled: rgba(0, 6, 36, .1);
759
772
  --wds-toggle-switch-border-success-disabled: rgba(0, 6, 36, .1);
760
- --wds-toggle-switch-border-error-disabled: rgba(0, 6, 36, .1);
761
773
  --wds-toggle-switch-border-urgent-disabled: rgba(0, 6, 36, .1);
762
774
  --wds-toggle-switch-fill-error: #fbd0cd;
763
775
  --wds-toggle-switch-fill-error-active: #e62214;
package/all.st.css CHANGED
@@ -88,6 +88,7 @@
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-hover);
91
92
  @property st-global(--wds-button-fill-standard-secondary);
92
93
  @property st-global(--wds-button-fill-standard-secondary-hover);
93
94
  @property st-global(--wds-button-font-line-height-large);
@@ -98,6 +99,7 @@
98
99
  @property st-global(--wds-button-font-size-medium);
99
100
  @property st-global(--wds-button-font-size-small);
100
101
  @property st-global(--wds-button-font-size-tiny);
102
+ @property st-global(--wds-button-font-weight-tiny);
101
103
  @property st-global(--wds-button-gap-large);
102
104
  @property st-global(--wds-button-gap-medium);
103
105
  @property st-global(--wds-button-gap-small);
@@ -108,14 +110,17 @@
108
110
  @property st-global(--wds-button-icon-offset-tiny);
109
111
  @property st-global(--wds-button-label-font-size-large);
110
112
  @property st-global(--wds-button-outline-hover);
113
+ @property st-global(--wds-button-padding-horizontal-extra-large);
111
114
  @property st-global(--wds-button-padding-horizontal-large);
112
115
  @property st-global(--wds-button-padding-horizontal-medium);
113
116
  @property st-global(--wds-button-padding-horizontal-small);
114
117
  @property st-global(--wds-button-padding-horizontal-tiny);
118
+ @property st-global(--wds-button-padding-vertical-extra-large);
115
119
  @property st-global(--wds-button-padding-vertical-large);
116
120
  @property st-global(--wds-button-padding-vertical-medium);
117
121
  @property st-global(--wds-button-padding-vertical-small);
118
122
  @property st-global(--wds-button-padding-vertical-tiny);
123
+ @property st-global(--wds-button-size-extra-large);
119
124
  @property st-global(--wds-button-size-large);
120
125
  @property st-global(--wds-button-size-large-screen-small);
121
126
  @property st-global(--wds-button-size-medium);
@@ -683,6 +688,9 @@
683
688
  @property st-global(--wds-custom-modal-header-title-font-size);
684
689
  @property st-global(--wds-divider-fill-color-light-1);
685
690
  @property st-global(--wds-divider-fill-color-light-2);
691
+ @property st-global(--wds-divider-fill-color-light-primary);
692
+ @property st-global(--wds-divider-fill-color-light-secondary);
693
+ @property st-global(--wds-divider-gradient-border);
686
694
  @property st-global(--wds-dock-background-fill);
687
695
  @property st-global(--wds-dock-background-fill-active);
688
696
  @property st-global(--wds-dock-background-fill-disabled);
@@ -851,6 +859,7 @@
851
859
  @property st-global(--wds-internal-thumbnail-illustration-size-small);
852
860
  @property st-global(--wds-internal-thumbnail-illustration-size-tiny);
853
861
  @property st-global(--wds-linear-progress-bar-border-radius);
862
+ @property st-global(--wds-list-item-action-affix-margin);
854
863
  @property st-global(--wds-list-item-action-border-radius);
855
864
  @property st-global(--wds-list-item-action-label-font-line-height-medium);
856
865
  @property st-global(--wds-list-item-action-label-font-line-height-small);
@@ -862,7 +871,6 @@
862
871
  @property st-global(--wds-list-item-action-padding-vertical-medium-screen-small);
863
872
  @property st-global(--wds-list-item-action-padding-vertical-small);
864
873
  @property st-global(--wds-list-item-action-padding-vertical-small-screen-small);
865
- @property st-global(--wds-list-item-action-prefix-margin);
866
874
  @property st-global(--wds-list-item-action-subtitle-font-line-height-medium);
867
875
  @property st-global(--wds-list-item-action-subtitle-font-size-medium);
868
876
  @property st-global(--wds-list-item-gap-columns);
@@ -897,6 +905,7 @@
897
905
  @property st-global(--wds-list-item-select-active-title-disabled);
898
906
  @property st-global(--wds-list-item-select-active-title-disabled-screen-small);
899
907
  @property st-global(--wds-list-item-select-active-title-screen-small);
908
+ @property st-global(--wds-list-item-select-affix-margin);
900
909
  @property st-global(--wds-list-item-select-border-radius);
901
910
  @property st-global(--wds-list-item-select-fill);
902
911
  @property st-global(--wds-list-item-select-fill-active);
@@ -920,7 +929,6 @@
920
929
  @property st-global(--wds-list-item-select-padding-vertical-medium-screen-small);
921
930
  @property st-global(--wds-list-item-select-padding-vertical-small);
922
931
  @property st-global(--wds-list-item-select-padding-vertical-small-screen-small);
923
- @property st-global(--wds-list-item-select-prefix-margin);
924
932
  @property st-global(--wds-list-item-select-subtitle);
925
933
  @property st-global(--wds-list-item-select-subtitle-disabled);
926
934
  @property st-global(--wds-list-item-select-subtitle-font-line-height-medium);
@@ -1318,6 +1326,10 @@
1318
1326
  @property st-global(--wds-tabs-padding-horizontal-small);
1319
1327
  @property st-global(--wds-tabs-padding-vertical-medium);
1320
1328
  @property st-global(--wds-tabs-padding-vertical-small);
1329
+ @property st-global(--wds-tabs-selection-border);
1330
+ @property st-global(--wds-tabs-selection-fill-primary);
1331
+ @property st-global(--wds-tabs-selection-fill-secondary);
1332
+ @property st-global(--wds-tabs-selection-height);
1321
1333
  @property st-global(--wds-tag-border-radius-large);
1322
1334
  @property st-global(--wds-tag-border-radius-medium);
1323
1335
  @property st-global(--wds-tag-border-radius-small);
@@ -1584,6 +1596,7 @@
1584
1596
  --wds-button-border-radius-tiny: 1000px;
1585
1597
  --wds-button-fill-gradient-hover-primary: #0f62e6;
1586
1598
  --wds-button-fill-gradient-hover-secondary: #0f62e6;
1599
+ --wds-button-fill-standard-primary-hover: #0f62e6;
1587
1600
  --wds-button-fill-standard-secondary: #ffffff;
1588
1601
  --wds-button-fill-standard-secondary-hover: #116dff;
1589
1602
  --wds-button-font-line-height-large: 24px;
@@ -1594,6 +1607,7 @@
1594
1607
  --wds-button-font-size-medium: 16px;
1595
1608
  --wds-button-font-size-small: 14px;
1596
1609
  --wds-button-font-size-tiny: 12px;
1610
+ --wds-button-font-weight-tiny: 700;
1597
1611
  --wds-button-gap-large: 12px;
1598
1612
  --wds-button-gap-medium: 6px;
1599
1613
  --wds-button-gap-small: 6px;
@@ -1604,14 +1618,17 @@
1604
1618
  --wds-button-icon-offset-tiny: 12px;
1605
1619
  --wds-button-label-font-size-large: 16px;
1606
1620
  --wds-button-outline-hover: transparent;
1621
+ --wds-button-padding-horizontal-extra-large: 36px;
1607
1622
  --wds-button-padding-horizontal-large: 30px;
1608
1623
  --wds-button-padding-horizontal-medium: 24px;
1609
1624
  --wds-button-padding-horizontal-small: 18px;
1610
1625
  --wds-button-padding-horizontal-tiny: 12px;
1626
+ --wds-button-padding-vertical-extra-large: 12px;
1611
1627
  --wds-button-padding-vertical-large: 9px;
1612
1628
  --wds-button-padding-vertical-medium: 6px;
1613
1629
  --wds-button-padding-vertical-small: 6px;
1614
1630
  --wds-button-padding-vertical-tiny: 3px;
1631
+ --wds-button-size-extra-large: 48px;
1615
1632
  --wds-button-size-large: 42px;
1616
1633
  --wds-button-size-large-screen-small: 54px;
1617
1634
  --wds-button-size-medium: 36px;
@@ -2179,6 +2196,9 @@
2179
2196
  --wds-custom-modal-header-title-font-size: 16px;
2180
2197
  --wds-divider-fill-color-light-1: #dfe5eb;
2181
2198
  --wds-divider-fill-color-light-2: #dfe5eb;
2199
+ --wds-divider-fill-color-light-primary: #dfe5eb;
2200
+ --wds-divider-fill-color-light-secondary: #dfe5eb;
2201
+ --wds-divider-gradient-border: linear-gradient(90deg, #dfe5eb 0%, #dfe5eb 16%, #dfe5eb 84%, #dfe5eb 100%);
2182
2202
  --wds-dock-background-fill: #e7f0ff;
2183
2203
  --wds-dock-background-fill-active: #d6e6fe;
2184
2204
  --wds-dock-background-fill-disabled: rgba(0, 6, 36, .1);
@@ -2347,6 +2367,7 @@
2347
2367
  --wds-internal-thumbnail-illustration-size-small: 51px;
2348
2368
  --wds-internal-thumbnail-illustration-size-tiny: 38px;
2349
2369
  --wds-linear-progress-bar-border-radius: 1000px;
2370
+ --wds-list-item-action-affix-margin: 6px;
2350
2371
  --wds-list-item-action-border-radius: 0;
2351
2372
  --wds-list-item-action-label-font-line-height-medium: 24px;
2352
2373
  --wds-list-item-action-label-font-line-height-small: 18px;
@@ -2358,7 +2379,6 @@
2358
2379
  --wds-list-item-action-padding-vertical-medium-screen-small: 12px;
2359
2380
  --wds-list-item-action-padding-vertical-small: 6px;
2360
2381
  --wds-list-item-action-padding-vertical-small-screen-small: 12px;
2361
- --wds-list-item-action-prefix-margin: 6px;
2362
2382
  --wds-list-item-action-subtitle-font-line-height-medium: 18px;
2363
2383
  --wds-list-item-action-subtitle-font-size-medium: 14px;
2364
2384
  --wds-list-item-gap-columns: 24px;
@@ -2393,6 +2413,7 @@
2393
2413
  --wds-list-item-select-active-title-disabled: rgba(255, 255, 255, .7);
2394
2414
  --wds-list-item-select-active-title-disabled-screen-small: rgba(0, 6, 36, .3);
2395
2415
  --wds-list-item-select-active-title-screen-small: #116dff;
2416
+ --wds-list-item-select-affix-margin: 6px;
2396
2417
  --wds-list-item-select-border-radius: 0;
2397
2418
  --wds-list-item-select-fill: #ffffff;
2398
2419
  --wds-list-item-select-fill-active: #d6e6fe;
@@ -2416,7 +2437,6 @@
2416
2437
  --wds-list-item-select-padding-vertical-medium-screen-small: 12px;
2417
2438
  --wds-list-item-select-padding-vertical-small: 6px;
2418
2439
  --wds-list-item-select-padding-vertical-small-screen-small: 12px;
2419
- --wds-list-item-select-prefix-margin: 6px;
2420
2440
  --wds-list-item-select-subtitle: #868aa5;
2421
2441
  --wds-list-item-select-subtitle-disabled: rgba(0, 6, 36, .3);
2422
2442
  --wds-list-item-select-subtitle-font-line-height-medium: 18px;
@@ -2814,6 +2834,10 @@
2814
2834
  --wds-tabs-padding-horizontal-small: 12px;
2815
2835
  --wds-tabs-padding-vertical-medium: 18px;
2816
2836
  --wds-tabs-padding-vertical-small: 12px;
2837
+ --wds-tabs-selection-border: linear-gradient(90deg, #116dff 0%, #116dff 20%, #116dff 80%, #116dff 100%);
2838
+ --wds-tabs-selection-fill-primary: #116dff;
2839
+ --wds-tabs-selection-fill-secondary: #116dff;
2840
+ --wds-tabs-selection-height: 3px;
2817
2841
  --wds-tag-border-radius-large: 1000px;
2818
2842
  --wds-tag-border-radius-medium: 1000px;
2819
2843
  --wds-tag-border-radius-small: 1000px;
@@ -2834,7 +2858,7 @@
2834
2858
  --wds-tag-size-tiny: 18px;
2835
2859
  --wds-testimonial-list-gap: 30px;
2836
2860
  --wds-thumbnail-border-radius: 6px;
2837
- --wds-thumbnail-border-width-default: 1;
2861
+ --wds-thumbnail-border-width-default: 1px;
2838
2862
  --wds-thumbnail-fill: rgba(255, 255, 255, 0);
2839
2863
  --wds-thumbnail-fill-hover: rgba(255, 255, 255, 0);
2840
2864
  --wds-thumbnail-gap: 12px;
@@ -2843,9 +2867,9 @@
2843
2867
  --wds-thumbnail-illustration-fill-3: #e7f0ff;
2844
2868
  --wds-thumbnail-subtitle-fill: #44485f;
2845
2869
  --wds-thumbnail-subtitle-font-line-height-tiny: 18px;
2846
- --wds-thumbnail-subtitle-font-size-tiny: 14px;
2870
+ --wds-thumbnail-subtitle-font-size-tiny: 12px;
2847
2871
  --wds-thumbnail-title-font-line-height-tiny: 18px;
2848
- --wds-thumbnail-title-font-size-tiny: 14px;
2872
+ --wds-thumbnail-title-font-size-tiny: 12px;
2849
2873
  --wds-thumbnail-title-font-weight-tiny: 400;
2850
2874
  --wds-thumbnail-title-padding-top: 6px;
2851
2875
  --wds-timeline-title-font-line-height: 18px;
package/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);
@@ -67,6 +68,7 @@
67
68
  @property st-global(--wds-button-font-size-medium);
68
69
  @property st-global(--wds-button-font-size-small);
69
70
  @property st-global(--wds-button-font-size-tiny);
71
+ @property st-global(--wds-button-font-weight-tiny);
70
72
  @property st-global(--wds-button-gap-large);
71
73
  @property st-global(--wds-button-gap-medium);
72
74
  @property st-global(--wds-button-gap-small);
@@ -77,14 +79,17 @@
77
79
  @property st-global(--wds-button-icon-offset-tiny);
78
80
  @property st-global(--wds-button-label-font-size-large);
79
81
  @property st-global(--wds-button-outline-hover);
82
+ @property st-global(--wds-button-padding-horizontal-extra-large);
80
83
  @property st-global(--wds-button-padding-horizontal-large);
81
84
  @property st-global(--wds-button-padding-horizontal-medium);
82
85
  @property st-global(--wds-button-padding-horizontal-small);
83
86
  @property st-global(--wds-button-padding-horizontal-tiny);
87
+ @property st-global(--wds-button-padding-vertical-extra-large);
84
88
  @property st-global(--wds-button-padding-vertical-large);
85
89
  @property st-global(--wds-button-padding-vertical-medium);
86
90
  @property st-global(--wds-button-padding-vertical-small);
87
91
  @property st-global(--wds-button-padding-vertical-tiny);
92
+ @property st-global(--wds-button-size-extra-large);
88
93
  @property st-global(--wds-button-size-large);
89
94
  @property st-global(--wds-button-size-large-screen-small);
90
95
  @property st-global(--wds-button-size-medium);
@@ -204,6 +209,9 @@
204
209
  @property st-global(--wds-custom-modal-header-title-font-size);
205
210
  @property st-global(--wds-divider-fill-color-light-1);
206
211
  @property st-global(--wds-divider-fill-color-light-2);
212
+ @property st-global(--wds-divider-fill-color-light-primary);
213
+ @property st-global(--wds-divider-fill-color-light-secondary);
214
+ @property st-global(--wds-divider-gradient-border);
207
215
  @property st-global(--wds-dock-background-fill);
208
216
  @property st-global(--wds-dock-background-fill-active);
209
217
  @property st-global(--wds-dock-background-fill-disabled);
@@ -317,6 +325,7 @@
317
325
  @property st-global(--wds-internal-thumbnail-illustration-size-small);
318
326
  @property st-global(--wds-internal-thumbnail-illustration-size-tiny);
319
327
  @property st-global(--wds-linear-progress-bar-border-radius);
328
+ @property st-global(--wds-list-item-action-affix-margin);
320
329
  @property st-global(--wds-list-item-action-border-radius);
321
330
  @property st-global(--wds-list-item-action-label-font-line-height-medium);
322
331
  @property st-global(--wds-list-item-action-label-font-line-height-small);
@@ -328,7 +337,6 @@
328
337
  @property st-global(--wds-list-item-action-padding-vertical-medium-screen-small);
329
338
  @property st-global(--wds-list-item-action-padding-vertical-small);
330
339
  @property st-global(--wds-list-item-action-padding-vertical-small-screen-small);
331
- @property st-global(--wds-list-item-action-prefix-margin);
332
340
  @property st-global(--wds-list-item-action-subtitle-font-line-height-medium);
333
341
  @property st-global(--wds-list-item-action-subtitle-font-size-medium);
334
342
  @property st-global(--wds-list-item-gap-columns);
@@ -363,6 +371,7 @@
363
371
  @property st-global(--wds-list-item-select-active-title-disabled);
364
372
  @property st-global(--wds-list-item-select-active-title-disabled-screen-small);
365
373
  @property st-global(--wds-list-item-select-active-title-screen-small);
374
+ @property st-global(--wds-list-item-select-affix-margin);
366
375
  @property st-global(--wds-list-item-select-border-radius);
367
376
  @property st-global(--wds-list-item-select-fill);
368
377
  @property st-global(--wds-list-item-select-fill-active);
@@ -386,7 +395,6 @@
386
395
  @property st-global(--wds-list-item-select-padding-vertical-medium-screen-small);
387
396
  @property st-global(--wds-list-item-select-padding-vertical-small);
388
397
  @property st-global(--wds-list-item-select-padding-vertical-small-screen-small);
389
- @property st-global(--wds-list-item-select-prefix-margin);
390
398
  @property st-global(--wds-list-item-select-subtitle);
391
399
  @property st-global(--wds-list-item-select-subtitle-disabled);
392
400
  @property st-global(--wds-list-item-select-subtitle-font-line-height-medium);
@@ -697,6 +705,10 @@
697
705
  @property st-global(--wds-tabs-padding-horizontal-small);
698
706
  @property st-global(--wds-tabs-padding-vertical-medium);
699
707
  @property st-global(--wds-tabs-padding-vertical-small);
708
+ @property st-global(--wds-tabs-selection-border);
709
+ @property st-global(--wds-tabs-selection-fill-primary);
710
+ @property st-global(--wds-tabs-selection-fill-secondary);
711
+ @property st-global(--wds-tabs-selection-height);
700
712
  @property st-global(--wds-tag-border-radius-large);
701
713
  @property st-global(--wds-tag-border-radius-medium);
702
714
  @property st-global(--wds-tag-border-radius-small);
@@ -930,6 +942,7 @@
930
942
  --wds-button-border-radius-tiny: 1000px;
931
943
  --wds-button-fill-gradient-hover-primary: #0f62e6;
932
944
  --wds-button-fill-gradient-hover-secondary: #0f62e6;
945
+ --wds-button-fill-standard-primary-hover: #0f62e6;
933
946
  --wds-button-fill-standard-secondary: #ffffff;
934
947
  --wds-button-fill-standard-secondary-hover: #116dff;
935
948
  --wds-button-font-line-height-large: 24px;
@@ -940,6 +953,7 @@
940
953
  --wds-button-font-size-medium: 16px;
941
954
  --wds-button-font-size-small: 14px;
942
955
  --wds-button-font-size-tiny: 12px;
956
+ --wds-button-font-weight-tiny: 700;
943
957
  --wds-button-gap-large: 12px;
944
958
  --wds-button-gap-medium: 6px;
945
959
  --wds-button-gap-small: 6px;
@@ -950,14 +964,17 @@
950
964
  --wds-button-icon-offset-tiny: 12px;
951
965
  --wds-button-label-font-size-large: 16px;
952
966
  --wds-button-outline-hover: transparent;
967
+ --wds-button-padding-horizontal-extra-large: 36px;
953
968
  --wds-button-padding-horizontal-large: 30px;
954
969
  --wds-button-padding-horizontal-medium: 24px;
955
970
  --wds-button-padding-horizontal-small: 18px;
956
971
  --wds-button-padding-horizontal-tiny: 12px;
972
+ --wds-button-padding-vertical-extra-large: 12px;
957
973
  --wds-button-padding-vertical-large: 9px;
958
974
  --wds-button-padding-vertical-medium: 6px;
959
975
  --wds-button-padding-vertical-small: 6px;
960
976
  --wds-button-padding-vertical-tiny: 3px;
977
+ --wds-button-size-extra-large: 48px;
961
978
  --wds-button-size-large: 42px;
962
979
  --wds-button-size-large-screen-small: 54px;
963
980
  --wds-button-size-medium: 36px;
@@ -1077,6 +1094,9 @@
1077
1094
  --wds-custom-modal-header-title-font-size: 16px;
1078
1095
  --wds-divider-fill-color-light-1: #dfe5eb;
1079
1096
  --wds-divider-fill-color-light-2: #dfe5eb;
1097
+ --wds-divider-fill-color-light-primary: #dfe5eb;
1098
+ --wds-divider-fill-color-light-secondary: #dfe5eb;
1099
+ --wds-divider-gradient-border: linear-gradient(90deg, #dfe5eb 0%, #dfe5eb 16%, #dfe5eb 84%, #dfe5eb 100%);
1080
1100
  --wds-dock-background-fill: #e7f0ff;
1081
1101
  --wds-dock-background-fill-active: #d6e6fe;
1082
1102
  --wds-dock-background-fill-disabled: rgba(0, 6, 36, .1);
@@ -1190,6 +1210,7 @@
1190
1210
  --wds-internal-thumbnail-illustration-size-small: 51px;
1191
1211
  --wds-internal-thumbnail-illustration-size-tiny: 38px;
1192
1212
  --wds-linear-progress-bar-border-radius: 1000px;
1213
+ --wds-list-item-action-affix-margin: 6px;
1193
1214
  --wds-list-item-action-border-radius: 0;
1194
1215
  --wds-list-item-action-label-font-line-height-medium: 24px;
1195
1216
  --wds-list-item-action-label-font-line-height-small: 18px;
@@ -1201,7 +1222,6 @@
1201
1222
  --wds-list-item-action-padding-vertical-medium-screen-small: 12px;
1202
1223
  --wds-list-item-action-padding-vertical-small: 6px;
1203
1224
  --wds-list-item-action-padding-vertical-small-screen-small: 12px;
1204
- --wds-list-item-action-prefix-margin: 6px;
1205
1225
  --wds-list-item-action-subtitle-font-line-height-medium: 18px;
1206
1226
  --wds-list-item-action-subtitle-font-size-medium: 14px;
1207
1227
  --wds-list-item-gap-columns: 24px;
@@ -1236,6 +1256,7 @@
1236
1256
  --wds-list-item-select-active-title-disabled: rgba(255, 255, 255, .7);
1237
1257
  --wds-list-item-select-active-title-disabled-screen-small: rgba(0, 6, 36, .3);
1238
1258
  --wds-list-item-select-active-title-screen-small: #116dff;
1259
+ --wds-list-item-select-affix-margin: 6px;
1239
1260
  --wds-list-item-select-border-radius: 0;
1240
1261
  --wds-list-item-select-fill: #ffffff;
1241
1262
  --wds-list-item-select-fill-active: #d6e6fe;
@@ -1259,7 +1280,6 @@
1259
1280
  --wds-list-item-select-padding-vertical-medium-screen-small: 12px;
1260
1281
  --wds-list-item-select-padding-vertical-small: 6px;
1261
1282
  --wds-list-item-select-padding-vertical-small-screen-small: 12px;
1262
- --wds-list-item-select-prefix-margin: 6px;
1263
1283
  --wds-list-item-select-subtitle: #868aa5;
1264
1284
  --wds-list-item-select-subtitle-disabled: rgba(0, 6, 36, .3);
1265
1285
  --wds-list-item-select-subtitle-font-line-height-medium: 18px;
@@ -1570,6 +1590,10 @@
1570
1590
  --wds-tabs-padding-horizontal-small: 12px;
1571
1591
  --wds-tabs-padding-vertical-medium: 18px;
1572
1592
  --wds-tabs-padding-vertical-small: 12px;
1593
+ --wds-tabs-selection-border: linear-gradient(90deg, #116dff 0%, #116dff 20%, #116dff 80%, #116dff 100%);
1594
+ --wds-tabs-selection-fill-primary: #116dff;
1595
+ --wds-tabs-selection-fill-secondary: #116dff;
1596
+ --wds-tabs-selection-height: 3px;
1573
1597
  --wds-tag-border-radius-large: 1000px;
1574
1598
  --wds-tag-border-radius-medium: 1000px;
1575
1599
  --wds-tag-border-radius-small: 1000px;
@@ -1590,7 +1614,7 @@
1590
1614
  --wds-tag-size-tiny: 18px;
1591
1615
  --wds-testimonial-list-gap: 30px;
1592
1616
  --wds-thumbnail-border-radius: 6px;
1593
- --wds-thumbnail-border-width-default: 1;
1617
+ --wds-thumbnail-border-width-default: 1px;
1594
1618
  --wds-thumbnail-fill: rgba(255, 255, 255, 0);
1595
1619
  --wds-thumbnail-fill-hover: rgba(255, 255, 255, 0);
1596
1620
  --wds-thumbnail-gap: 12px;
@@ -1599,9 +1623,9 @@
1599
1623
  --wds-thumbnail-illustration-fill-3: #e7f0ff;
1600
1624
  --wds-thumbnail-subtitle-fill: #44485f;
1601
1625
  --wds-thumbnail-subtitle-font-line-height-tiny: 18px;
1602
- --wds-thumbnail-subtitle-font-size-tiny: 14px;
1626
+ --wds-thumbnail-subtitle-font-size-tiny: 12px;
1603
1627
  --wds-thumbnail-title-font-line-height-tiny: 18px;
1604
- --wds-thumbnail-title-font-size-tiny: 14px;
1628
+ --wds-thumbnail-title-font-size-tiny: 12px;
1605
1629
  --wds-thumbnail-title-font-weight-tiny: 400;
1606
1630
  --wds-thumbnail-title-padding-top: 6px;
1607
1631
  --wds-timeline-title-font-line-height: 18px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wix/design-system-tokens",
3
- "version": "1.86.0",
3
+ "version": "1.86.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": "8f9abf8e45dc932bf4e95a1c0e621efc375d2814ec8ac0aef9696647"
36
+ "falconPackageHash": "551f1b0a2602ef824df2da9319bafa1d40c10d8696d0dac74ab3e944"
37
37
  }
package/studio/all.css CHANGED
@@ -9,8 +9,8 @@
9
9
  --wds-accordion-title-font-line-height-small: 16px;
10
10
  --wds-accordion-title-font-size-medium: 14px;
11
11
  --wds-accordion-title-font-size-small: 12px;
12
- --wds-accordion-title-font-weight: 700;
13
- --wds-accordion-title-font-weight-small: 700;
12
+ --wds-accordion-title-font-weight: 500;
13
+ --wds-accordion-title-font-weight-small: 500;
14
14
  --wds-add-item-border-radius: 4px;
15
15
  --wds-add-item-padding-horizontal-large: 28px;
16
16
  --wds-add-item-padding-horizontal-tiny: 12px;
@@ -58,6 +58,7 @@
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-hover: #0f62e6;
61
62
  --wds-button-fill-standard-secondary: #ffffff;
62
63
  --wds-button-fill-standard-secondary-hover: #f7f8f8;
63
64
  --wds-button-font-line-height-large: 24px;
@@ -79,14 +80,17 @@
79
80
  --wds-button-icon-offset-tiny: 12px;
80
81
  --wds-button-label-font-size-large: 16px;
81
82
  --wds-button-outline-hover: #e2e3ea;
83
+ --wds-button-padding-horizontal-extra-large: 20px;
82
84
  --wds-button-padding-horizontal-large: 16px;
83
85
  --wds-button-padding-horizontal-medium: 16px;
84
86
  --wds-button-padding-horizontal-small: 12px;
85
87
  --wds-button-padding-horizontal-tiny: 12px;
88
+ --wds-button-padding-vertical-extra-large: 10px;
86
89
  --wds-button-padding-vertical-large: 6px;
87
90
  --wds-button-padding-vertical-medium: 6px;
88
91
  --wds-button-padding-vertical-small: 6px;
89
92
  --wds-button-padding-vertical-tiny: 2px;
93
+ --wds-button-size-extra-large: 40px;
90
94
  --wds-button-size-large: 36px;
91
95
  --wds-button-size-large-screen-small: 44px;
92
96
  --wds-button-size-medium: 32px;
@@ -206,6 +210,9 @@
206
210
  --wds-custom-modal-header-title-font-size: 14px;
207
211
  --wds-divider-fill-color-light-1: #e2e3ea;
208
212
  --wds-divider-fill-color-light-2: #e2e3ea;
213
+ --wds-divider-fill-color-light-primary: #e2e3ea;
214
+ --wds-divider-fill-color-light-secondary: #e2e3ea;
215
+ --wds-divider-gradient-border: linear-gradient(90deg, #e2e3ea 0%, #e2e3ea 16%, #e2e3ea 84%, #e2e3ea 100%);
209
216
  --wds-dock-background-fill: #ebf2ff;
210
217
  --wds-dock-background-fill-active: #dce9ff;
211
218
  --wds-dock-background-fill-disabled: #e5e5e5;
@@ -334,6 +341,7 @@
334
341
  --wds-list-item-padding-vertical-tiny: 12px;
335
342
  --wds-list-item-padding-vertical-x-tiny: 8px;
336
343
  --wds-list-item-padding-vertical-xx-tiny: 4px;
344
+ --wds-list-item-action-affix-margin: 4px;
337
345
  --wds-list-item-action-border-radius: 0;
338
346
  --wds-list-item-action-label-font-line-height-medium: 20px;
339
347
  --wds-list-item-action-label-font-line-height-small: 18px;
@@ -345,7 +353,6 @@
345
353
  --wds-list-item-action-padding-vertical-medium-screen-small: 8px;
346
354
  --wds-list-item-action-padding-vertical-small: 6px;
347
355
  --wds-list-item-action-padding-vertical-small-screen-small: 8px;
348
- --wds-list-item-action-prefix-margin: 4px;
349
356
  --wds-list-item-action-subtitle-font-line-height-medium: 16px;
350
357
  --wds-list-item-action-subtitle-font-size-medium: 12px;
351
358
  --wds-list-item-section-font-size: 12px;
@@ -365,6 +372,7 @@
365
372
  --wds-list-item-select-active-title-disabled: #bebebe;
366
373
  --wds-list-item-select-active-title-disabled-screen-small: #bebebe;
367
374
  --wds-list-item-select-active-title-screen-small: #116dff;
375
+ --wds-list-item-select-affix-margin: 6px;
368
376
  --wds-list-item-select-fill: #ffffff;
369
377
  --wds-list-item-select-fill-active: #dce9ff;
370
378
  --wds-list-item-select-fill-disabled: #ffffff;
@@ -379,7 +387,6 @@
379
387
  --wds-list-item-select-padding-vertical-medium-screen-small: 8px;
380
388
  --wds-list-item-select-padding-vertical-small: 4px;
381
389
  --wds-list-item-select-padding-vertical-small-screen-small: 8px;
382
- --wds-list-item-select-prefix-margin: 6px;
383
390
  --wds-list-item-select-subtitle: #868aa5;
384
391
  --wds-list-item-select-subtitle-disabled: #bebebe;
385
392
  --wds-list-item-select-subtitle-font-line-height-medium: 16px;
@@ -685,6 +692,10 @@
685
692
  --wds-tabs-padding-horizontal-small: 12px;
686
693
  --wds-tabs-padding-vertical-medium: 16px;
687
694
  --wds-tabs-padding-vertical-small: 12px;
695
+ --wds-tabs-selection-border: linear-gradient(90deg, #116dff 0%, #116dff 20%, #116dff 80%, #116dff 100%);
696
+ --wds-tabs-selection-fill-primary: #116dff;
697
+ --wds-tabs-selection-fill-secondary: #116dff;
698
+ --wds-tabs-selection-height: 3px;
688
699
  --wds-tag-border-radius-large: 4px;
689
700
  --wds-tag-border-radius-medium: 4px;
690
701
  --wds-tag-border-radius-small: 4px;
@@ -705,7 +716,7 @@
705
716
  --wds-tag-size-tiny: 20px;
706
717
  --wds-testimonial-list-gap: 24px;
707
718
  --wds-thumbnail-border-radius: 4px;
708
- --wds-thumbnail-border-width-default: 0;
719
+ --wds-thumbnail-border-width-default: 1px;
709
720
  --wds-thumbnail-fill: rgba(255, 255, 255, 0);
710
721
  --wds-thumbnail-fill-hover: rgba(255, 255, 255, 0);
711
722
  --wds-thumbnail-gap: 12px;