@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/CHANGELOG.md CHANGED
@@ -1,3 +1,17 @@
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
+
8
+ ## 1.86.0 - 2025-03-20
9
+
10
+ ### Visual Breaking Changes
11
+
12
+ - breaking(ToggleSwitch): theme [14639](https://github.com/wix-private/wix-design-systems/pull/14639)
13
+ - breaking(ListItemAction): change List item action font size & line height in both themes [14586](https://github.com/wix-private/wix-design-systems/pull/14586)
14
+
1
15
  ## 1.83.0 - 2025-03-10
2
16
 
3
17
  ### Features
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;
@@ -870,7 +882,15 @@
870
882
  --wds-vertical-tabs-section-title-padding-top-medium: 24px;
871
883
  --wds-vertical-tabs-section-title-padding-top-small: 18px;
872
884
  --wds-vertical-tabs-section-title-padding-top-tiny: 6px;
873
- --wds-background-blur-100: 0;
885
+ --wds-background-blur-0: 0;
886
+ --wds-background-blur-10: 0;
887
+ --wds-background-blur-50: 0;
888
+ --wds-background-blur-150: 0;
889
+ --wds-background-blur-200: 0;
890
+ --wds-background-blur-250: 0;
891
+ --wds-background-blur-300: 0;
892
+ --wds-background-blur-350: 0;
893
+ --wds-background-blur-375: 0;
874
894
  --wds-border-radius-0: 0;
875
895
  --wds-border-radius-100: 2px;
876
896
  --wds-border-radius-200: 4px;
@@ -1482,6 +1502,7 @@
1482
1502
  --wds-border-radius-surface-overlay: 8px;
1483
1503
  --wds-border-radius-surface-raised: 8px;
1484
1504
  --wds-border-radius-surface-sunken: 0;
1505
+ --wds-border-width-default: 1px;
1485
1506
  --wds-width-default: 1px;
1486
1507
  --wds-width-default-2: 1px;
1487
1508
  }
package/all.st.css CHANGED
@@ -25,7 +25,15 @@
25
25
  @property st-global(--wds-announcement-modal-text-font-size);
26
26
  @property st-global(--wds-avatar-group-gap-condensed);
27
27
  @property st-global(--wds-avatar-group-gap-default);
28
- @property st-global(--wds-background-blur-100);
28
+ @property st-global(--wds-background-blur-0);
29
+ @property st-global(--wds-background-blur-10);
30
+ @property st-global(--wds-background-blur-50);
31
+ @property st-global(--wds-background-blur-150);
32
+ @property st-global(--wds-background-blur-200);
33
+ @property st-global(--wds-background-blur-250);
34
+ @property st-global(--wds-background-blur-300);
35
+ @property st-global(--wds-background-blur-350);
36
+ @property st-global(--wds-background-blur-375);
29
37
  @property st-global(--wds-badge-border-radius-medium);
30
38
  @property st-global(--wds-badge-border-radius-small);
31
39
  @property st-global(--wds-badge-border-radius-tiny);
@@ -54,6 +62,7 @@
54
62
  @property st-global(--wds-border-radius-surface-sunken);
55
63
  @property st-global(--wds-border-width-100);
56
64
  @property st-global(--wds-border-width-200);
65
+ @property st-global(--wds-border-width-default);
57
66
  @property st-global(--wds-border-width-none);
58
67
  @property st-global(--wds-breadcrumbs-border-radius);
59
68
  @property st-global(--wds-breadcrumbs-font-size-small);
@@ -79,6 +88,7 @@
79
88
  @property st-global(--wds-button-border-radius-tiny);
80
89
  @property st-global(--wds-button-fill-gradient-hover-primary);
81
90
  @property st-global(--wds-button-fill-gradient-hover-secondary);
91
+ @property st-global(--wds-button-fill-standard-primary-hover);
82
92
  @property st-global(--wds-button-fill-standard-secondary);
83
93
  @property st-global(--wds-button-fill-standard-secondary-hover);
84
94
  @property st-global(--wds-button-font-line-height-large);
@@ -89,6 +99,7 @@
89
99
  @property st-global(--wds-button-font-size-medium);
90
100
  @property st-global(--wds-button-font-size-small);
91
101
  @property st-global(--wds-button-font-size-tiny);
102
+ @property st-global(--wds-button-font-weight-tiny);
92
103
  @property st-global(--wds-button-gap-large);
93
104
  @property st-global(--wds-button-gap-medium);
94
105
  @property st-global(--wds-button-gap-small);
@@ -99,14 +110,17 @@
99
110
  @property st-global(--wds-button-icon-offset-tiny);
100
111
  @property st-global(--wds-button-label-font-size-large);
101
112
  @property st-global(--wds-button-outline-hover);
113
+ @property st-global(--wds-button-padding-horizontal-extra-large);
102
114
  @property st-global(--wds-button-padding-horizontal-large);
103
115
  @property st-global(--wds-button-padding-horizontal-medium);
104
116
  @property st-global(--wds-button-padding-horizontal-small);
105
117
  @property st-global(--wds-button-padding-horizontal-tiny);
118
+ @property st-global(--wds-button-padding-vertical-extra-large);
106
119
  @property st-global(--wds-button-padding-vertical-large);
107
120
  @property st-global(--wds-button-padding-vertical-medium);
108
121
  @property st-global(--wds-button-padding-vertical-small);
109
122
  @property st-global(--wds-button-padding-vertical-tiny);
123
+ @property st-global(--wds-button-size-extra-large);
110
124
  @property st-global(--wds-button-size-large);
111
125
  @property st-global(--wds-button-size-large-screen-small);
112
126
  @property st-global(--wds-button-size-medium);
@@ -674,6 +688,9 @@
674
688
  @property st-global(--wds-custom-modal-header-title-font-size);
675
689
  @property st-global(--wds-divider-fill-color-light-1);
676
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);
677
694
  @property st-global(--wds-dock-background-fill);
678
695
  @property st-global(--wds-dock-background-fill-active);
679
696
  @property st-global(--wds-dock-background-fill-disabled);
@@ -842,6 +859,7 @@
842
859
  @property st-global(--wds-internal-thumbnail-illustration-size-small);
843
860
  @property st-global(--wds-internal-thumbnail-illustration-size-tiny);
844
861
  @property st-global(--wds-linear-progress-bar-border-radius);
862
+ @property st-global(--wds-list-item-action-affix-margin);
845
863
  @property st-global(--wds-list-item-action-border-radius);
846
864
  @property st-global(--wds-list-item-action-label-font-line-height-medium);
847
865
  @property st-global(--wds-list-item-action-label-font-line-height-small);
@@ -853,7 +871,6 @@
853
871
  @property st-global(--wds-list-item-action-padding-vertical-medium-screen-small);
854
872
  @property st-global(--wds-list-item-action-padding-vertical-small);
855
873
  @property st-global(--wds-list-item-action-padding-vertical-small-screen-small);
856
- @property st-global(--wds-list-item-action-prefix-margin);
857
874
  @property st-global(--wds-list-item-action-subtitle-font-line-height-medium);
858
875
  @property st-global(--wds-list-item-action-subtitle-font-size-medium);
859
876
  @property st-global(--wds-list-item-gap-columns);
@@ -888,6 +905,7 @@
888
905
  @property st-global(--wds-list-item-select-active-title-disabled);
889
906
  @property st-global(--wds-list-item-select-active-title-disabled-screen-small);
890
907
  @property st-global(--wds-list-item-select-active-title-screen-small);
908
+ @property st-global(--wds-list-item-select-affix-margin);
891
909
  @property st-global(--wds-list-item-select-border-radius);
892
910
  @property st-global(--wds-list-item-select-fill);
893
911
  @property st-global(--wds-list-item-select-fill-active);
@@ -911,7 +929,6 @@
911
929
  @property st-global(--wds-list-item-select-padding-vertical-medium-screen-small);
912
930
  @property st-global(--wds-list-item-select-padding-vertical-small);
913
931
  @property st-global(--wds-list-item-select-padding-vertical-small-screen-small);
914
- @property st-global(--wds-list-item-select-prefix-margin);
915
932
  @property st-global(--wds-list-item-select-subtitle);
916
933
  @property st-global(--wds-list-item-select-subtitle-disabled);
917
934
  @property st-global(--wds-list-item-select-subtitle-font-line-height-medium);
@@ -1309,6 +1326,10 @@
1309
1326
  @property st-global(--wds-tabs-padding-horizontal-small);
1310
1327
  @property st-global(--wds-tabs-padding-vertical-medium);
1311
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);
1312
1333
  @property st-global(--wds-tag-border-radius-large);
1313
1334
  @property st-global(--wds-tag-border-radius-medium);
1314
1335
  @property st-global(--wds-tag-border-radius-small);
@@ -1512,7 +1533,15 @@
1512
1533
  --wds-announcement-modal-text-font-size: 16px;
1513
1534
  --wds-avatar-group-gap-condensed: -3px;
1514
1535
  --wds-avatar-group-gap-default: 6px;
1515
- --wds-background-blur-100: 0;
1536
+ --wds-background-blur-0: 0;
1537
+ --wds-background-blur-10: 0;
1538
+ --wds-background-blur-50: 0;
1539
+ --wds-background-blur-150: 0;
1540
+ --wds-background-blur-200: 0;
1541
+ --wds-background-blur-250: 0;
1542
+ --wds-background-blur-300: 0;
1543
+ --wds-background-blur-350: 0;
1544
+ --wds-background-blur-375: 0;
1516
1545
  --wds-badge-border-radius-medium: 2px;
1517
1546
  --wds-badge-border-radius-small: 2px;
1518
1547
  --wds-badge-border-radius-tiny: 2px;
@@ -1541,6 +1570,7 @@
1541
1570
  --wds-border-radius-surface-sunken: 0;
1542
1571
  --wds-border-width-100: 1px;
1543
1572
  --wds-border-width-200: 2px;
1573
+ --wds-border-width-default: 1px;
1544
1574
  --wds-border-width-none: 0;
1545
1575
  --wds-breadcrumbs-border-radius: 1000px;
1546
1576
  --wds-breadcrumbs-font-size-small: 14px;
@@ -1566,6 +1596,7 @@
1566
1596
  --wds-button-border-radius-tiny: 1000px;
1567
1597
  --wds-button-fill-gradient-hover-primary: #0f62e6;
1568
1598
  --wds-button-fill-gradient-hover-secondary: #0f62e6;
1599
+ --wds-button-fill-standard-primary-hover: #0f62e6;
1569
1600
  --wds-button-fill-standard-secondary: #ffffff;
1570
1601
  --wds-button-fill-standard-secondary-hover: #116dff;
1571
1602
  --wds-button-font-line-height-large: 24px;
@@ -1576,6 +1607,7 @@
1576
1607
  --wds-button-font-size-medium: 16px;
1577
1608
  --wds-button-font-size-small: 14px;
1578
1609
  --wds-button-font-size-tiny: 12px;
1610
+ --wds-button-font-weight-tiny: 700;
1579
1611
  --wds-button-gap-large: 12px;
1580
1612
  --wds-button-gap-medium: 6px;
1581
1613
  --wds-button-gap-small: 6px;
@@ -1586,14 +1618,17 @@
1586
1618
  --wds-button-icon-offset-tiny: 12px;
1587
1619
  --wds-button-label-font-size-large: 16px;
1588
1620
  --wds-button-outline-hover: transparent;
1621
+ --wds-button-padding-horizontal-extra-large: 36px;
1589
1622
  --wds-button-padding-horizontal-large: 30px;
1590
1623
  --wds-button-padding-horizontal-medium: 24px;
1591
1624
  --wds-button-padding-horizontal-small: 18px;
1592
1625
  --wds-button-padding-horizontal-tiny: 12px;
1626
+ --wds-button-padding-vertical-extra-large: 12px;
1593
1627
  --wds-button-padding-vertical-large: 9px;
1594
1628
  --wds-button-padding-vertical-medium: 6px;
1595
1629
  --wds-button-padding-vertical-small: 6px;
1596
1630
  --wds-button-padding-vertical-tiny: 3px;
1631
+ --wds-button-size-extra-large: 48px;
1597
1632
  --wds-button-size-large: 42px;
1598
1633
  --wds-button-size-large-screen-small: 54px;
1599
1634
  --wds-button-size-medium: 36px;
@@ -2161,6 +2196,9 @@
2161
2196
  --wds-custom-modal-header-title-font-size: 16px;
2162
2197
  --wds-divider-fill-color-light-1: #dfe5eb;
2163
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%);
2164
2202
  --wds-dock-background-fill: #e7f0ff;
2165
2203
  --wds-dock-background-fill-active: #d6e6fe;
2166
2204
  --wds-dock-background-fill-disabled: rgba(0, 6, 36, .1);
@@ -2329,6 +2367,7 @@
2329
2367
  --wds-internal-thumbnail-illustration-size-small: 51px;
2330
2368
  --wds-internal-thumbnail-illustration-size-tiny: 38px;
2331
2369
  --wds-linear-progress-bar-border-radius: 1000px;
2370
+ --wds-list-item-action-affix-margin: 6px;
2332
2371
  --wds-list-item-action-border-radius: 0;
2333
2372
  --wds-list-item-action-label-font-line-height-medium: 24px;
2334
2373
  --wds-list-item-action-label-font-line-height-small: 18px;
@@ -2340,7 +2379,6 @@
2340
2379
  --wds-list-item-action-padding-vertical-medium-screen-small: 12px;
2341
2380
  --wds-list-item-action-padding-vertical-small: 6px;
2342
2381
  --wds-list-item-action-padding-vertical-small-screen-small: 12px;
2343
- --wds-list-item-action-prefix-margin: 6px;
2344
2382
  --wds-list-item-action-subtitle-font-line-height-medium: 18px;
2345
2383
  --wds-list-item-action-subtitle-font-size-medium: 14px;
2346
2384
  --wds-list-item-gap-columns: 24px;
@@ -2375,6 +2413,7 @@
2375
2413
  --wds-list-item-select-active-title-disabled: rgba(255, 255, 255, .7);
2376
2414
  --wds-list-item-select-active-title-disabled-screen-small: rgba(0, 6, 36, .3);
2377
2415
  --wds-list-item-select-active-title-screen-small: #116dff;
2416
+ --wds-list-item-select-affix-margin: 6px;
2378
2417
  --wds-list-item-select-border-radius: 0;
2379
2418
  --wds-list-item-select-fill: #ffffff;
2380
2419
  --wds-list-item-select-fill-active: #d6e6fe;
@@ -2398,7 +2437,6 @@
2398
2437
  --wds-list-item-select-padding-vertical-medium-screen-small: 12px;
2399
2438
  --wds-list-item-select-padding-vertical-small: 6px;
2400
2439
  --wds-list-item-select-padding-vertical-small-screen-small: 12px;
2401
- --wds-list-item-select-prefix-margin: 6px;
2402
2440
  --wds-list-item-select-subtitle: #868aa5;
2403
2441
  --wds-list-item-select-subtitle-disabled: rgba(0, 6, 36, .3);
2404
2442
  --wds-list-item-select-subtitle-font-line-height-medium: 18px;
@@ -2796,6 +2834,10 @@
2796
2834
  --wds-tabs-padding-horizontal-small: 12px;
2797
2835
  --wds-tabs-padding-vertical-medium: 18px;
2798
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;
2799
2841
  --wds-tag-border-radius-large: 1000px;
2800
2842
  --wds-tag-border-radius-medium: 1000px;
2801
2843
  --wds-tag-border-radius-small: 1000px;
@@ -2816,7 +2858,7 @@
2816
2858
  --wds-tag-size-tiny: 18px;
2817
2859
  --wds-testimonial-list-gap: 30px;
2818
2860
  --wds-thumbnail-border-radius: 6px;
2819
- --wds-thumbnail-border-width-default: 1;
2861
+ --wds-thumbnail-border-width-default: 1px;
2820
2862
  --wds-thumbnail-fill: rgba(255, 255, 255, 0);
2821
2863
  --wds-thumbnail-fill-hover: rgba(255, 255, 255, 0);
2822
2864
  --wds-thumbnail-gap: 12px;
@@ -2825,9 +2867,9 @@
2825
2867
  --wds-thumbnail-illustration-fill-3: #e7f0ff;
2826
2868
  --wds-thumbnail-subtitle-fill: #44485f;
2827
2869
  --wds-thumbnail-subtitle-font-line-height-tiny: 18px;
2828
- --wds-thumbnail-subtitle-font-size-tiny: 14px;
2870
+ --wds-thumbnail-subtitle-font-size-tiny: 12px;
2829
2871
  --wds-thumbnail-title-font-line-height-tiny: 18px;
2830
- --wds-thumbnail-title-font-size-tiny: 14px;
2872
+ --wds-thumbnail-title-font-size-tiny: 12px;
2831
2873
  --wds-thumbnail-title-font-weight-tiny: 400;
2832
2874
  --wds-thumbnail-title-padding-top: 6px;
2833
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/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);
@@ -191,7 +199,15 @@
191
199
  @property st-global(--wds-space-2400);
192
200
 
193
201
  .root {
194
- --wds-background-blur-100: 0;
202
+ --wds-background-blur-0: 0;
203
+ --wds-background-blur-10: 0;
204
+ --wds-background-blur-50: 0;
205
+ --wds-background-blur-150: 0;
206
+ --wds-background-blur-200: 0;
207
+ --wds-background-blur-250: 0;
208
+ --wds-background-blur-300: 0;
209
+ --wds-background-blur-350: 0;
210
+ --wds-background-blur-375: 0;
195
211
  --wds-border-radius-0: 0;
196
212
  --wds-border-radius-100: 2px;
197
213
  --wds-border-radius-200: 4px;
package/package.json CHANGED
@@ -1,12 +1,12 @@
1
1
  {
2
2
  "name": "@wix/design-system-tokens",
3
- "version": "1.85.0",
3
+ "version": "1.86.1",
4
4
  "packageManager": "yarn@3.5.0",
5
5
  "author": "augustinasv@wix.com",
6
6
  "license": "MIT",
7
7
  "devDependencies": {
8
8
  "@types/jest": "^27.5.2",
9
- "eslint": "^7.32.0",
9
+ "eslint": "^9.21.0",
10
10
  "eslint-plugin-jsonc": "^2.18.2",
11
11
  "jest": "^27.5.1",
12
12
  "style-dictionary": "^3.9.2",
@@ -33,5 +33,5 @@
33
33
  "groupId": "com.wixpress"
34
34
  }
35
35
  },
36
- "falconPackageHash": "28717798e09bbab586c32a0b3d873444ea902e19ed2f01df168a8c48"
36
+ "falconPackageHash": "551f1b0a2602ef824df2da9319bafa1d40c10d8696d0dac74ab3e944"
37
37
  }
package/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);
@@ -429,6 +430,7 @@
429
430
  --wds-border-radius-surface-overlay: 8px;
430
431
  --wds-border-radius-surface-raised: 8px;
431
432
  --wds-border-radius-surface-sunken: 0;
433
+ --wds-border-width-default: 1px;
432
434
  --wds-color-border-ai-primary: linear-gradient(60deg, #0021FF 0%, #116DFF 65%, #5FF2AE 96%);
433
435
  --wds-color-border-ai-primary-active: #ffffff;
434
436
  --wds-color-border-ai-primary-disabled: #ffffff;