@wix/design-system-tokens 1.3.18 → 1.3.20

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 (5) hide show
  1. package/all.st.css +87 -29
  2. package/component.st.css +87 -29
  3. package/package.json +2 -2
  4. package/studio/all.st.css +91 -33
  5. package/studio/component.st.css +91 -33
package/all.st.css CHANGED
@@ -42,6 +42,14 @@
42
42
  @property st-global(--wds-button-border-radius-medium);
43
43
  @property st-global(--wds-button-border-radius-small);
44
44
  @property st-global(--wds-button-border-radius-tiny);
45
+ @property st-global(--wds-button-font-line-height-large);
46
+ @property st-global(--wds-button-font-line-height-medium);
47
+ @property st-global(--wds-button-font-line-height-small);
48
+ @property st-global(--wds-button-font-line-height-tiny);
49
+ @property st-global(--wds-button-font-size-large);
50
+ @property st-global(--wds-button-font-size-medium);
51
+ @property st-global(--wds-button-font-size-small);
52
+ @property st-global(--wds-button-font-size-tiny);
45
53
  @property st-global(--wds-button-gap-large);
46
54
  @property st-global(--wds-button-gap-medium);
47
55
  @property st-global(--wds-button-gap-small);
@@ -72,20 +80,20 @@
72
80
  @property st-global(--wds-card-tab-padding-horizontal-small);
73
81
  @property st-global(--wds-card-tab-padding-vertical-medium);
74
82
  @property st-global(--wds-card-tab-padding-vertical-small);
75
- @property st-global(--wds-checkbox-active);
76
- @property st-global(--wds-checkbox-active-disabled);
77
83
  @property st-global(--wds-checkbox-border);
84
+ @property st-global(--wds-checkbox-border-active);
85
+ @property st-global(--wds-checkbox-border-active-disabled);
86
+ @property st-global(--wds-checkbox-border-active-hover);
87
+ @property st-global(--wds-checkbox-border-disabled);
88
+ @property st-global(--wds-checkbox-border-hover);
78
89
  @property st-global(--wds-checkbox-border-radius);
79
- @property st-global(--wds-checkbox-disabled);
80
- @property st-global(--wds-checkbox-dot-fill-active);
81
- @property st-global(--wds-checkbox-dot-fill-disabled);
82
90
  @property st-global(--wds-checkbox-fill);
83
91
  @property st-global(--wds-checkbox-fill-active);
84
92
  @property st-global(--wds-checkbox-fill-active-disabled);
85
93
  @property st-global(--wds-checkbox-fill-active-hover);
86
94
  @property st-global(--wds-checkbox-fill-disabled);
87
95
  @property st-global(--wds-checkbox-fill-hover);
88
- @property st-global(--wds-checkbox-hover);
96
+ @property st-global(--wds-checkbox-group-gap-vertical);
89
97
  @property st-global(--wds-checkbox-icon);
90
98
  @property st-global(--wds-checkbox-icon-disabled);
91
99
  @property st-global(--wds-circular-progress-bar-background-fill-error);
@@ -520,6 +528,10 @@
520
528
  @property st-global(--wds-field-set-gap-large);
521
529
  @property st-global(--wds-field-set-gap-medium);
522
530
  @property st-global(--wds-field-set-gap-small);
531
+ @property st-global(--wds-field-set-label-font-line-height-small);
532
+ @property st-global(--wds-field-set-label-font-line-height-tiny);
533
+ @property st-global(--wds-field-set-label-font-size-small);
534
+ @property st-global(--wds-field-set-label-font-size-tiny);
523
535
  @property st-global(--wds-field-set-label-gap);
524
536
  @property st-global(--wds-floating-helper-padding-horizontal);
525
537
  @property st-global(--wds-floating-helper-padding-vertical);
@@ -575,6 +587,10 @@
575
587
  @property st-global(--wds-font-weight-heading-6);
576
588
  @property st-global(--wds-font-weight-medium);
577
589
  @property st-global(--wds-font-weight-regular);
590
+ @property st-global(--wds-form-field-label-font-line-height-small);
591
+ @property st-global(--wds-form-field-label-font-line-height-tiny);
592
+ @property st-global(--wds-form-field-label-font-size-small);
593
+ @property st-global(--wds-form-field-label-font-size-tiny);
578
594
  @property st-global(--wds-form-field-label-gap-small);
579
595
  @property st-global(--wds-form-field-label-gap-tiny);
580
596
  @property st-global(--wds-gallery-item-border);
@@ -614,6 +630,14 @@
614
630
  @property st-global(--wds-input-size-medium);
615
631
  @property st-global(--wds-input-size-small);
616
632
  @property st-global(--wds-input-size-tiny);
633
+ @property st-global(--wds-input-value-font-line-height-large);
634
+ @property st-global(--wds-input-value-font-line-height-medium);
635
+ @property st-global(--wds-input-value-font-line-height-small);
636
+ @property st-global(--wds-input-value-font-line-height-tiny);
637
+ @property st-global(--wds-input-value-font-size-large);
638
+ @property st-global(--wds-input-value-font-size-medium);
639
+ @property st-global(--wds-input-value-font-size-small);
640
+ @property st-global(--wds-input-value-font-size-tiny);
617
641
  @property st-global(--wds-input-width-fixed);
618
642
  @property st-global(--wds-input-width-large);
619
643
  @property st-global(--wds-input-width-medium);
@@ -706,6 +730,7 @@
706
730
  @property st-global(--wds-radio-fill-active-disabled);
707
731
  @property st-global(--wds-radio-fill-disabled);
708
732
  @property st-global(--wds-radio-fill-hover);
733
+ @property st-global(--wds-radio-group-gap-vertical);
709
734
  @property st-global(--wds-radio-hover);
710
735
  @property st-global(--wds-search-border-radius-large);
711
736
  @property st-global(--wds-search-border-radius-medium);
@@ -723,14 +748,18 @@
723
748
  @property st-global(--wds-section-helper-fullwidth-vertical-padding-small);
724
749
  @property st-global(--wds-segmented-toggle-border-radius-medium);
725
750
  @property st-global(--wds-segmented-toggle-border-radius-small);
726
- @property st-global(--wds-segmented-toggle-icononly-padings-horizontal-medium);
727
- @property st-global(--wds-segmented-toggle-icononly-padings-horizontal-small);
728
- @property st-global(--wds-segmented-toggle-icononly-padings-vertical-medium);
729
- @property st-global(--wds-segmented-toggle-icononly-padings-vertical-small);
730
- @property st-global(--wds-segmented-toggle-padings-horizontal-medium);
731
- @property st-global(--wds-segmented-toggle-padings-horizontal-small);
732
- @property st-global(--wds-segmented-toggle-padings-vertical-medium);
733
- @property st-global(--wds-segmented-toggle-padings-vertical-small);
751
+ @property st-global(--wds-segmented-toggle-icononly-padding-horizontal-medium);
752
+ @property st-global(--wds-segmented-toggle-icononly-padding-horizontal-small);
753
+ @property st-global(--wds-segmented-toggle-icononly-padding-vertical-medium);
754
+ @property st-global(--wds-segmented-toggle-icononly-padding-vertical-small);
755
+ @property st-global(--wds-segmented-toggle-label-font-line-height-medium);
756
+ @property st-global(--wds-segmented-toggle-label-font-line-height-small);
757
+ @property st-global(--wds-segmented-toggle-label-font-size-medium);
758
+ @property st-global(--wds-segmented-toggle-label-font-size-small);
759
+ @property st-global(--wds-segmented-toggle-padding-horizontal-medium);
760
+ @property st-global(--wds-segmented-toggle-padding-horizontal-small);
761
+ @property st-global(--wds-segmented-toggle-padding-vertical-medium);
762
+ @property st-global(--wds-segmented-toggle-padding-vertical-small);
734
763
  @property st-global(--wds-segmented-toggle-size-medium);
735
764
  @property st-global(--wds-segmented-toggle-size-small);
736
765
  @property st-global(--wds-select-area-border);
@@ -1019,6 +1048,14 @@
1019
1048
  --wds-button-border-radius-medium: 1000px;
1020
1049
  --wds-button-border-radius-small: 1000px;
1021
1050
  --wds-button-border-radius-tiny: 1000px;
1051
+ --wds-button-font-line-height-large: 24px;
1052
+ --wds-button-font-line-height-medium: 24px;
1053
+ --wds-button-font-line-height-small: 18px;
1054
+ --wds-button-font-line-height-tiny: 18px;
1055
+ --wds-button-font-size-large: 16px;
1056
+ --wds-button-font-size-medium: 16px;
1057
+ --wds-button-font-size-small: 14px;
1058
+ --wds-button-font-size-tiny: 12px;
1022
1059
  --wds-button-gap-large: 12px;
1023
1060
  --wds-button-gap-medium: 6px;
1024
1061
  --wds-button-gap-small: 6px;
@@ -1049,20 +1086,20 @@
1049
1086
  --wds-card-tab-padding-horizontal-small: 18px;
1050
1087
  --wds-card-tab-padding-vertical-medium: 18px;
1051
1088
  --wds-card-tab-padding-vertical-small: 18px;
1052
- --wds-checkbox-active: #116dff;
1053
- --wds-checkbox-active-disabled: rgba(0, 6, 36, .1);
1054
1089
  --wds-checkbox-border: #116dff;
1090
+ --wds-checkbox-border-active: #116dff;
1091
+ --wds-checkbox-border-active-disabled: rgba(0, 6, 36, .1);
1092
+ --wds-checkbox-border-active-hover: rgba(0, 6, 36, 0);
1093
+ --wds-checkbox-border-disabled: rgba(0, 6, 36, .1);
1094
+ --wds-checkbox-border-hover: #116dff;
1055
1095
  --wds-checkbox-border-radius: 4px;
1056
- --wds-checkbox-disabled: rgba(0, 6, 36, .1);
1057
- --wds-checkbox-dot-fill-active: #116dff;
1058
- --wds-checkbox-dot-fill-disabled: rgba(0, 6, 36, .3);
1059
1096
  --wds-checkbox-fill: #ffffff;
1060
1097
  --wds-checkbox-fill-active: #116dff;
1061
1098
  --wds-checkbox-fill-active-disabled: rgba(0, 6, 36, .1);
1062
1099
  --wds-checkbox-fill-active-hover: #0f62e6;
1063
1100
  --wds-checkbox-fill-disabled: rgba(0, 6, 36, .1);
1064
1101
  --wds-checkbox-fill-hover: #e7f0ff;
1065
- --wds-checkbox-hover: #116dff;
1102
+ --wds-checkbox-group-gap-vertical: 12px;
1066
1103
  --wds-checkbox-icon: #ffffff;
1067
1104
  --wds-checkbox-icon-disabled: rgba(0, 6, 36, .3);
1068
1105
  --wds-circular-progress-bar-background-fill-error: #fbd0cd;
@@ -1497,6 +1534,10 @@
1497
1534
  --wds-field-set-gap-large: 18px;
1498
1535
  --wds-field-set-gap-medium: 12px;
1499
1536
  --wds-field-set-gap-small: 6px;
1537
+ --wds-field-set-label-font-line-height-small: 18px;
1538
+ --wds-field-set-label-font-line-height-tiny: 18px;
1539
+ --wds-field-set-label-font-size-small: 14px;
1540
+ --wds-field-set-label-font-size-tiny: 12px;
1500
1541
  --wds-field-set-label-gap: 9px;
1501
1542
  --wds-floating-helper-padding-horizontal: 36px;
1502
1543
  --wds-floating-helper-padding-vertical: 30px;
@@ -1552,6 +1593,10 @@
1552
1593
  --wds-font-weight-heading-6: 400;
1553
1594
  --wds-font-weight-medium: 500;
1554
1595
  --wds-font-weight-regular: 400;
1596
+ --wds-form-field-label-font-line-height-small: 18px;
1597
+ --wds-form-field-label-font-line-height-tiny: 18px;
1598
+ --wds-form-field-label-font-size-small: 14px;
1599
+ --wds-form-field-label-font-size-tiny: 12px;
1555
1600
  --wds-form-field-label-gap-small: 9px;
1556
1601
  --wds-form-field-label-gap-tiny: 6px;
1557
1602
  --wds-gallery-item-border: 8px;
@@ -1591,6 +1636,14 @@
1591
1636
  --wds-input-size-medium: 36px;
1592
1637
  --wds-input-size-small: 30px;
1593
1638
  --wds-input-size-tiny: 24px;
1639
+ --wds-input-value-font-line-height-large: 24px;
1640
+ --wds-input-value-font-line-height-medium: 24px;
1641
+ --wds-input-value-font-line-height-small: 18px;
1642
+ --wds-input-value-font-line-height-tiny: 18px;
1643
+ --wds-input-value-font-size-large: 16px;
1644
+ --wds-input-value-font-size-medium: 16px;
1645
+ --wds-input-value-font-size-small: 14px;
1646
+ --wds-input-value-font-size-tiny: 12px;
1594
1647
  --wds-input-width-fixed: 288px;
1595
1648
  --wds-input-width-large: 96px;
1596
1649
  --wds-input-width-medium: 72px;
@@ -1683,6 +1736,7 @@
1683
1736
  --wds-radio-fill-active-disabled: rgba(0, 6, 36, .1);
1684
1737
  --wds-radio-fill-disabled: rgba(0, 6, 36, .1);
1685
1738
  --wds-radio-fill-hover: #e7f0ff;
1739
+ --wds-radio-group-gap-vertical: 12px;
1686
1740
  --wds-radio-hover: #116dff;
1687
1741
  --wds-search-border-radius-large: 1000px;
1688
1742
  --wds-search-border-radius-medium: 1000px;
@@ -1700,20 +1754,24 @@
1700
1754
  --wds-section-helper-fullwidth-vertical-padding-small: 9px;
1701
1755
  --wds-segmented-toggle-border-radius-medium: 6px;
1702
1756
  --wds-segmented-toggle-border-radius-small: 6px;
1703
- --wds-segmented-toggle-icononly-padings-horizontal-medium: 6px;
1704
- --wds-segmented-toggle-icononly-padings-horizontal-small: 6px;
1705
- --wds-segmented-toggle-icononly-padings-vertical-medium: 6px;
1706
- --wds-segmented-toggle-icononly-padings-vertical-small: 6px;
1707
- --wds-segmented-toggle-padings-horizontal-medium: 24px;
1708
- --wds-segmented-toggle-padings-horizontal-small: 12px;
1709
- --wds-segmented-toggle-padings-vertical-medium: 6px;
1710
- --wds-segmented-toggle-padings-vertical-small: 6px;
1757
+ --wds-segmented-toggle-icononly-padding-horizontal-medium: 6px;
1758
+ --wds-segmented-toggle-icononly-padding-horizontal-small: 6px;
1759
+ --wds-segmented-toggle-icononly-padding-vertical-medium: 6px;
1760
+ --wds-segmented-toggle-icononly-padding-vertical-small: 6px;
1761
+ --wds-segmented-toggle-label-font-line-height-medium: 24px;
1762
+ --wds-segmented-toggle-label-font-line-height-small: 18px;
1763
+ --wds-segmented-toggle-label-font-size-medium: 16px;
1764
+ --wds-segmented-toggle-label-font-size-small: 14px;
1765
+ --wds-segmented-toggle-padding-horizontal-medium: 24px;
1766
+ --wds-segmented-toggle-padding-horizontal-small: 12px;
1767
+ --wds-segmented-toggle-padding-vertical-medium: 6px;
1768
+ --wds-segmented-toggle-padding-vertical-small: 6px;
1711
1769
  --wds-segmented-toggle-size-medium: 36px;
1712
1770
  --wds-segmented-toggle-size-small: 30px;
1713
1771
  --wds-select-area-border: 8px;
1714
1772
  --wds-select-area-fill: #f4f7ff;
1715
1773
  --wds-select-area-fill-active: #d6e6fe;
1716
- --wds-select-area-fill-disabled: #ffffff;
1774
+ --wds-select-area-fill-disabled: rgba(255, 255, 255, 0);
1717
1775
  --wds-select-area-fill-hover: #e7f0ff;
1718
1776
  --wds-select-area-padding-horizontal: 18px;
1719
1777
  --wds-select-area-padding-vertical: 12px;
package/component.st.css CHANGED
@@ -29,6 +29,14 @@
29
29
  @property st-global(--wds-button-border-radius-medium);
30
30
  @property st-global(--wds-button-border-radius-small);
31
31
  @property st-global(--wds-button-border-radius-tiny);
32
+ @property st-global(--wds-button-font-line-height-large);
33
+ @property st-global(--wds-button-font-line-height-medium);
34
+ @property st-global(--wds-button-font-line-height-small);
35
+ @property st-global(--wds-button-font-line-height-tiny);
36
+ @property st-global(--wds-button-font-size-large);
37
+ @property st-global(--wds-button-font-size-medium);
38
+ @property st-global(--wds-button-font-size-small);
39
+ @property st-global(--wds-button-font-size-tiny);
32
40
  @property st-global(--wds-button-gap-large);
33
41
  @property st-global(--wds-button-gap-medium);
34
42
  @property st-global(--wds-button-gap-small);
@@ -59,20 +67,20 @@
59
67
  @property st-global(--wds-card-tab-padding-horizontal-small);
60
68
  @property st-global(--wds-card-tab-padding-vertical-medium);
61
69
  @property st-global(--wds-card-tab-padding-vertical-small);
62
- @property st-global(--wds-checkbox-active);
63
- @property st-global(--wds-checkbox-active-disabled);
64
70
  @property st-global(--wds-checkbox-border);
71
+ @property st-global(--wds-checkbox-border-active);
72
+ @property st-global(--wds-checkbox-border-active-disabled);
73
+ @property st-global(--wds-checkbox-border-active-hover);
74
+ @property st-global(--wds-checkbox-border-disabled);
75
+ @property st-global(--wds-checkbox-border-hover);
65
76
  @property st-global(--wds-checkbox-border-radius);
66
- @property st-global(--wds-checkbox-disabled);
67
- @property st-global(--wds-checkbox-dot-fill-active);
68
- @property st-global(--wds-checkbox-dot-fill-disabled);
69
77
  @property st-global(--wds-checkbox-fill);
70
78
  @property st-global(--wds-checkbox-fill-active);
71
79
  @property st-global(--wds-checkbox-fill-active-disabled);
72
80
  @property st-global(--wds-checkbox-fill-active-hover);
73
81
  @property st-global(--wds-checkbox-fill-disabled);
74
82
  @property st-global(--wds-checkbox-fill-hover);
75
- @property st-global(--wds-checkbox-hover);
83
+ @property st-global(--wds-checkbox-group-gap-vertical);
76
84
  @property st-global(--wds-checkbox-icon);
77
85
  @property st-global(--wds-checkbox-icon-disabled);
78
86
  @property st-global(--wds-circular-progress-bar-background-fill-error);
@@ -139,9 +147,17 @@
139
147
  @property st-global(--wds-field-set-gap-large);
140
148
  @property st-global(--wds-field-set-gap-medium);
141
149
  @property st-global(--wds-field-set-gap-small);
150
+ @property st-global(--wds-field-set-label-font-line-height-small);
151
+ @property st-global(--wds-field-set-label-font-line-height-tiny);
152
+ @property st-global(--wds-field-set-label-font-size-small);
153
+ @property st-global(--wds-field-set-label-font-size-tiny);
142
154
  @property st-global(--wds-field-set-label-gap);
143
155
  @property st-global(--wds-floating-helper-padding-horizontal);
144
156
  @property st-global(--wds-floating-helper-padding-vertical);
157
+ @property st-global(--wds-form-field-label-font-line-height-small);
158
+ @property st-global(--wds-form-field-label-font-line-height-tiny);
159
+ @property st-global(--wds-form-field-label-font-size-small);
160
+ @property st-global(--wds-form-field-label-font-size-tiny);
145
161
  @property st-global(--wds-form-field-label-gap-small);
146
162
  @property st-global(--wds-form-field-label-gap-tiny);
147
163
  @property st-global(--wds-gallery-item-border);
@@ -181,6 +197,14 @@
181
197
  @property st-global(--wds-input-size-medium);
182
198
  @property st-global(--wds-input-size-small);
183
199
  @property st-global(--wds-input-size-tiny);
200
+ @property st-global(--wds-input-value-font-line-height-large);
201
+ @property st-global(--wds-input-value-font-line-height-medium);
202
+ @property st-global(--wds-input-value-font-line-height-small);
203
+ @property st-global(--wds-input-value-font-line-height-tiny);
204
+ @property st-global(--wds-input-value-font-size-large);
205
+ @property st-global(--wds-input-value-font-size-medium);
206
+ @property st-global(--wds-input-value-font-size-small);
207
+ @property st-global(--wds-input-value-font-size-tiny);
184
208
  @property st-global(--wds-input-width-fixed);
185
209
  @property st-global(--wds-input-width-large);
186
210
  @property st-global(--wds-input-width-medium);
@@ -273,6 +297,7 @@
273
297
  @property st-global(--wds-radio-fill-active-disabled);
274
298
  @property st-global(--wds-radio-fill-disabled);
275
299
  @property st-global(--wds-radio-fill-hover);
300
+ @property st-global(--wds-radio-group-gap-vertical);
276
301
  @property st-global(--wds-radio-hover);
277
302
  @property st-global(--wds-search-border-radius-large);
278
303
  @property st-global(--wds-search-border-radius-medium);
@@ -290,14 +315,18 @@
290
315
  @property st-global(--wds-section-helper-fullwidth-vertical-padding-small);
291
316
  @property st-global(--wds-segmented-toggle-border-radius-medium);
292
317
  @property st-global(--wds-segmented-toggle-border-radius-small);
293
- @property st-global(--wds-segmented-toggle-icononly-padings-horizontal-medium);
294
- @property st-global(--wds-segmented-toggle-icononly-padings-horizontal-small);
295
- @property st-global(--wds-segmented-toggle-icononly-padings-vertical-medium);
296
- @property st-global(--wds-segmented-toggle-icononly-padings-vertical-small);
297
- @property st-global(--wds-segmented-toggle-padings-horizontal-medium);
298
- @property st-global(--wds-segmented-toggle-padings-horizontal-small);
299
- @property st-global(--wds-segmented-toggle-padings-vertical-medium);
300
- @property st-global(--wds-segmented-toggle-padings-vertical-small);
318
+ @property st-global(--wds-segmented-toggle-icononly-padding-horizontal-medium);
319
+ @property st-global(--wds-segmented-toggle-icononly-padding-horizontal-small);
320
+ @property st-global(--wds-segmented-toggle-icononly-padding-vertical-medium);
321
+ @property st-global(--wds-segmented-toggle-icononly-padding-vertical-small);
322
+ @property st-global(--wds-segmented-toggle-label-font-line-height-medium);
323
+ @property st-global(--wds-segmented-toggle-label-font-line-height-small);
324
+ @property st-global(--wds-segmented-toggle-label-font-size-medium);
325
+ @property st-global(--wds-segmented-toggle-label-font-size-small);
326
+ @property st-global(--wds-segmented-toggle-padding-horizontal-medium);
327
+ @property st-global(--wds-segmented-toggle-padding-horizontal-small);
328
+ @property st-global(--wds-segmented-toggle-padding-vertical-medium);
329
+ @property st-global(--wds-segmented-toggle-padding-vertical-small);
301
330
  @property st-global(--wds-segmented-toggle-size-medium);
302
331
  @property st-global(--wds-segmented-toggle-size-small);
303
332
  @property st-global(--wds-select-area-border);
@@ -522,6 +551,14 @@
522
551
  --wds-button-border-radius-medium: 1000px;
523
552
  --wds-button-border-radius-small: 1000px;
524
553
  --wds-button-border-radius-tiny: 1000px;
554
+ --wds-button-font-line-height-large: 24px;
555
+ --wds-button-font-line-height-medium: 24px;
556
+ --wds-button-font-line-height-small: 18px;
557
+ --wds-button-font-line-height-tiny: 18px;
558
+ --wds-button-font-size-large: 16px;
559
+ --wds-button-font-size-medium: 16px;
560
+ --wds-button-font-size-small: 14px;
561
+ --wds-button-font-size-tiny: 12px;
525
562
  --wds-button-gap-large: 12px;
526
563
  --wds-button-gap-medium: 6px;
527
564
  --wds-button-gap-small: 6px;
@@ -552,20 +589,20 @@
552
589
  --wds-card-tab-padding-horizontal-small: 18px;
553
590
  --wds-card-tab-padding-vertical-medium: 18px;
554
591
  --wds-card-tab-padding-vertical-small: 18px;
555
- --wds-checkbox-active: #116dff;
556
- --wds-checkbox-active-disabled: rgba(0, 6, 36, .1);
557
592
  --wds-checkbox-border: #116dff;
593
+ --wds-checkbox-border-active: #116dff;
594
+ --wds-checkbox-border-active-disabled: rgba(0, 6, 36, .1);
595
+ --wds-checkbox-border-active-hover: rgba(0, 6, 36, 0);
596
+ --wds-checkbox-border-disabled: rgba(0, 6, 36, .1);
597
+ --wds-checkbox-border-hover: #116dff;
558
598
  --wds-checkbox-border-radius: 4px;
559
- --wds-checkbox-disabled: rgba(0, 6, 36, .1);
560
- --wds-checkbox-dot-fill-active: #116dff;
561
- --wds-checkbox-dot-fill-disabled: rgba(0, 6, 36, .3);
562
599
  --wds-checkbox-fill: #ffffff;
563
600
  --wds-checkbox-fill-active: #116dff;
564
601
  --wds-checkbox-fill-active-disabled: rgba(0, 6, 36, .1);
565
602
  --wds-checkbox-fill-active-hover: #0f62e6;
566
603
  --wds-checkbox-fill-disabled: rgba(0, 6, 36, .1);
567
604
  --wds-checkbox-fill-hover: #e7f0ff;
568
- --wds-checkbox-hover: #116dff;
605
+ --wds-checkbox-group-gap-vertical: 12px;
569
606
  --wds-checkbox-icon: #ffffff;
570
607
  --wds-checkbox-icon-disabled: rgba(0, 6, 36, .3);
571
608
  --wds-circular-progress-bar-background-fill-error: #fbd0cd;
@@ -632,9 +669,17 @@
632
669
  --wds-field-set-gap-large: 18px;
633
670
  --wds-field-set-gap-medium: 12px;
634
671
  --wds-field-set-gap-small: 6px;
672
+ --wds-field-set-label-font-line-height-small: 18px;
673
+ --wds-field-set-label-font-line-height-tiny: 18px;
674
+ --wds-field-set-label-font-size-small: 14px;
675
+ --wds-field-set-label-font-size-tiny: 12px;
635
676
  --wds-field-set-label-gap: 9px;
636
677
  --wds-floating-helper-padding-horizontal: 36px;
637
678
  --wds-floating-helper-padding-vertical: 30px;
679
+ --wds-form-field-label-font-line-height-small: 18px;
680
+ --wds-form-field-label-font-line-height-tiny: 18px;
681
+ --wds-form-field-label-font-size-small: 14px;
682
+ --wds-form-field-label-font-size-tiny: 12px;
638
683
  --wds-form-field-label-gap-small: 9px;
639
684
  --wds-form-field-label-gap-tiny: 6px;
640
685
  --wds-gallery-item-border: 8px;
@@ -674,6 +719,14 @@
674
719
  --wds-input-size-medium: 36px;
675
720
  --wds-input-size-small: 30px;
676
721
  --wds-input-size-tiny: 24px;
722
+ --wds-input-value-font-line-height-large: 24px;
723
+ --wds-input-value-font-line-height-medium: 24px;
724
+ --wds-input-value-font-line-height-small: 18px;
725
+ --wds-input-value-font-line-height-tiny: 18px;
726
+ --wds-input-value-font-size-large: 16px;
727
+ --wds-input-value-font-size-medium: 16px;
728
+ --wds-input-value-font-size-small: 14px;
729
+ --wds-input-value-font-size-tiny: 12px;
677
730
  --wds-input-width-fixed: 288px;
678
731
  --wds-input-width-large: 96px;
679
732
  --wds-input-width-medium: 72px;
@@ -766,6 +819,7 @@
766
819
  --wds-radio-fill-active-disabled: rgba(0, 6, 36, .1);
767
820
  --wds-radio-fill-disabled: rgba(0, 6, 36, .1);
768
821
  --wds-radio-fill-hover: #e7f0ff;
822
+ --wds-radio-group-gap-vertical: 12px;
769
823
  --wds-radio-hover: #116dff;
770
824
  --wds-search-border-radius-large: 1000px;
771
825
  --wds-search-border-radius-medium: 1000px;
@@ -783,20 +837,24 @@
783
837
  --wds-section-helper-fullwidth-vertical-padding-small: 9px;
784
838
  --wds-segmented-toggle-border-radius-medium: 6px;
785
839
  --wds-segmented-toggle-border-radius-small: 6px;
786
- --wds-segmented-toggle-icononly-padings-horizontal-medium: 6px;
787
- --wds-segmented-toggle-icononly-padings-horizontal-small: 6px;
788
- --wds-segmented-toggle-icononly-padings-vertical-medium: 6px;
789
- --wds-segmented-toggle-icononly-padings-vertical-small: 6px;
790
- --wds-segmented-toggle-padings-horizontal-medium: 24px;
791
- --wds-segmented-toggle-padings-horizontal-small: 12px;
792
- --wds-segmented-toggle-padings-vertical-medium: 6px;
793
- --wds-segmented-toggle-padings-vertical-small: 6px;
840
+ --wds-segmented-toggle-icononly-padding-horizontal-medium: 6px;
841
+ --wds-segmented-toggle-icononly-padding-horizontal-small: 6px;
842
+ --wds-segmented-toggle-icononly-padding-vertical-medium: 6px;
843
+ --wds-segmented-toggle-icononly-padding-vertical-small: 6px;
844
+ --wds-segmented-toggle-label-font-line-height-medium: 24px;
845
+ --wds-segmented-toggle-label-font-line-height-small: 18px;
846
+ --wds-segmented-toggle-label-font-size-medium: 16px;
847
+ --wds-segmented-toggle-label-font-size-small: 14px;
848
+ --wds-segmented-toggle-padding-horizontal-medium: 24px;
849
+ --wds-segmented-toggle-padding-horizontal-small: 12px;
850
+ --wds-segmented-toggle-padding-vertical-medium: 6px;
851
+ --wds-segmented-toggle-padding-vertical-small: 6px;
794
852
  --wds-segmented-toggle-size-medium: 36px;
795
853
  --wds-segmented-toggle-size-small: 30px;
796
854
  --wds-select-area-border: 8px;
797
855
  --wds-select-area-fill: #f4f7ff;
798
856
  --wds-select-area-fill-active: #d6e6fe;
799
- --wds-select-area-fill-disabled: #ffffff;
857
+ --wds-select-area-fill-disabled: rgba(255, 255, 255, 0);
800
858
  --wds-select-area-fill-hover: #e7f0ff;
801
859
  --wds-select-area-padding-horizontal: 18px;
802
860
  --wds-select-area-padding-vertical: 12px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wix/design-system-tokens",
3
- "version": "1.3.18",
3
+ "version": "1.3.20",
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": "468a19cc0db35110c9f2a504aba47d27c61dbbfa2adf8424fd5e752b"
36
+ "falconPackageHash": "01889e2cb81a4b50021e4137dff197b524bd910b7e7c0c1e4e0fa012"
37
37
  }
package/studio/all.st.css CHANGED
@@ -42,6 +42,14 @@
42
42
  @property st-global(--wds-button-border-radius-medium);
43
43
  @property st-global(--wds-button-border-radius-small);
44
44
  @property st-global(--wds-button-border-radius-tiny);
45
+ @property st-global(--wds-button-font-line-height-large);
46
+ @property st-global(--wds-button-font-line-height-medium);
47
+ @property st-global(--wds-button-font-line-height-small);
48
+ @property st-global(--wds-button-font-line-height-tiny);
49
+ @property st-global(--wds-button-font-size-large);
50
+ @property st-global(--wds-button-font-size-medium);
51
+ @property st-global(--wds-button-font-size-small);
52
+ @property st-global(--wds-button-font-size-tiny);
45
53
  @property st-global(--wds-button-gap-large);
46
54
  @property st-global(--wds-button-gap-medium);
47
55
  @property st-global(--wds-button-gap-small);
@@ -72,20 +80,20 @@
72
80
  @property st-global(--wds-card-tab-padding-horizontal-small);
73
81
  @property st-global(--wds-card-tab-padding-vertical-medium);
74
82
  @property st-global(--wds-card-tab-padding-vertical-small);
75
- @property st-global(--wds-checkbox-active);
76
- @property st-global(--wds-checkbox-active-disabled);
77
83
  @property st-global(--wds-checkbox-border);
84
+ @property st-global(--wds-checkbox-border-active);
85
+ @property st-global(--wds-checkbox-border-active-disabled);
86
+ @property st-global(--wds-checkbox-border-active-hover);
87
+ @property st-global(--wds-checkbox-border-disabled);
88
+ @property st-global(--wds-checkbox-border-hover);
78
89
  @property st-global(--wds-checkbox-border-radius);
79
- @property st-global(--wds-checkbox-disabled);
80
- @property st-global(--wds-checkbox-dot-fill-active);
81
- @property st-global(--wds-checkbox-dot-fill-disabled);
82
90
  @property st-global(--wds-checkbox-fill);
83
91
  @property st-global(--wds-checkbox-fill-active);
84
92
  @property st-global(--wds-checkbox-fill-active-disabled);
85
93
  @property st-global(--wds-checkbox-fill-active-hover);
86
94
  @property st-global(--wds-checkbox-fill-disabled);
87
95
  @property st-global(--wds-checkbox-fill-hover);
88
- @property st-global(--wds-checkbox-hover);
96
+ @property st-global(--wds-checkbox-group-gap-vertical);
89
97
  @property st-global(--wds-checkbox-icon);
90
98
  @property st-global(--wds-checkbox-icon-disabled);
91
99
  @property st-global(--wds-circular-progress-bar-background-fill-error);
@@ -516,6 +524,10 @@
516
524
  @property st-global(--wds-field-set-gap-large);
517
525
  @property st-global(--wds-field-set-gap-medium);
518
526
  @property st-global(--wds-field-set-gap-small);
527
+ @property st-global(--wds-field-set-label-font-line-height-small);
528
+ @property st-global(--wds-field-set-label-font-line-height-tiny);
529
+ @property st-global(--wds-field-set-label-font-size-small);
530
+ @property st-global(--wds-field-set-label-font-size-tiny);
519
531
  @property st-global(--wds-field-set-label-gap);
520
532
  @property st-global(--wds-floating-helper-padding-horizontal);
521
533
  @property st-global(--wds-floating-helper-padding-vertical);
@@ -571,6 +583,10 @@
571
583
  @property st-global(--wds-font-weight-heading-6);
572
584
  @property st-global(--wds-font-weight-medium);
573
585
  @property st-global(--wds-font-weight-regular);
586
+ @property st-global(--wds-form-field-label-font-line-height-small);
587
+ @property st-global(--wds-form-field-label-font-line-height-tiny);
588
+ @property st-global(--wds-form-field-label-font-size-small);
589
+ @property st-global(--wds-form-field-label-font-size-tiny);
574
590
  @property st-global(--wds-form-field-label-gap-small);
575
591
  @property st-global(--wds-form-field-label-gap-tiny);
576
592
  @property st-global(--wds-gallery-item-border);
@@ -610,6 +626,14 @@
610
626
  @property st-global(--wds-input-size-medium);
611
627
  @property st-global(--wds-input-size-small);
612
628
  @property st-global(--wds-input-size-tiny);
629
+ @property st-global(--wds-input-value-font-line-height-large);
630
+ @property st-global(--wds-input-value-font-line-height-medium);
631
+ @property st-global(--wds-input-value-font-line-height-small);
632
+ @property st-global(--wds-input-value-font-line-height-tiny);
633
+ @property st-global(--wds-input-value-font-size-large);
634
+ @property st-global(--wds-input-value-font-size-medium);
635
+ @property st-global(--wds-input-value-font-size-small);
636
+ @property st-global(--wds-input-value-font-size-tiny);
613
637
  @property st-global(--wds-input-width-fixed);
614
638
  @property st-global(--wds-input-width-large);
615
639
  @property st-global(--wds-input-width-medium);
@@ -702,6 +726,7 @@
702
726
  @property st-global(--wds-radio-fill-active-disabled);
703
727
  @property st-global(--wds-radio-fill-disabled);
704
728
  @property st-global(--wds-radio-fill-hover);
729
+ @property st-global(--wds-radio-group-gap-vertical);
705
730
  @property st-global(--wds-radio-hover);
706
731
  @property st-global(--wds-search-border-radius-large);
707
732
  @property st-global(--wds-search-border-radius-medium);
@@ -719,14 +744,18 @@
719
744
  @property st-global(--wds-section-helper-fullwidth-vertical-padding-small);
720
745
  @property st-global(--wds-segmented-toggle-border-radius-medium);
721
746
  @property st-global(--wds-segmented-toggle-border-radius-small);
722
- @property st-global(--wds-segmented-toggle-icononly-padings-horizontal-medium);
723
- @property st-global(--wds-segmented-toggle-icononly-padings-horizontal-small);
724
- @property st-global(--wds-segmented-toggle-icononly-padings-vertical-medium);
725
- @property st-global(--wds-segmented-toggle-icononly-padings-vertical-small);
726
- @property st-global(--wds-segmented-toggle-padings-horizontal-medium);
727
- @property st-global(--wds-segmented-toggle-padings-horizontal-small);
728
- @property st-global(--wds-segmented-toggle-padings-vertical-medium);
729
- @property st-global(--wds-segmented-toggle-padings-vertical-small);
747
+ @property st-global(--wds-segmented-toggle-icononly-padding-horizontal-medium);
748
+ @property st-global(--wds-segmented-toggle-icononly-padding-horizontal-small);
749
+ @property st-global(--wds-segmented-toggle-icononly-padding-vertical-medium);
750
+ @property st-global(--wds-segmented-toggle-icononly-padding-vertical-small);
751
+ @property st-global(--wds-segmented-toggle-label-font-line-height-medium);
752
+ @property st-global(--wds-segmented-toggle-label-font-line-height-small);
753
+ @property st-global(--wds-segmented-toggle-label-font-size-medium);
754
+ @property st-global(--wds-segmented-toggle-label-font-size-small);
755
+ @property st-global(--wds-segmented-toggle-padding-horizontal-medium);
756
+ @property st-global(--wds-segmented-toggle-padding-horizontal-small);
757
+ @property st-global(--wds-segmented-toggle-padding-vertical-medium);
758
+ @property st-global(--wds-segmented-toggle-padding-vertical-small);
730
759
  @property st-global(--wds-segmented-toggle-size-medium);
731
760
  @property st-global(--wds-segmented-toggle-size-small);
732
761
  @property st-global(--wds-select-area-border);
@@ -992,6 +1021,14 @@
992
1021
  --wds-button-border-radius-medium: 4px;
993
1022
  --wds-button-border-radius-small: 4px;
994
1023
  --wds-button-border-radius-tiny: 4px;
1024
+ --wds-button-font-line-height-large: 24px;
1025
+ --wds-button-font-line-height-medium: 20px;
1026
+ --wds-button-font-line-height-small: 16px;
1027
+ --wds-button-font-line-height-tiny: 16px;
1028
+ --wds-button-font-size-large: 16px;
1029
+ --wds-button-font-size-medium: 14px;
1030
+ --wds-button-font-size-small: 12px;
1031
+ --wds-button-font-size-tiny: 12px;
995
1032
  --wds-button-gap-large: 4px;
996
1033
  --wds-button-gap-medium: 4px;
997
1034
  --wds-button-gap-small: 4px;
@@ -1022,20 +1059,20 @@
1022
1059
  --wds-card-tab-padding-horizontal-small: 20px;
1023
1060
  --wds-card-tab-padding-vertical-medium: 16px;
1024
1061
  --wds-card-tab-padding-vertical-small: 16px;
1025
- --wds-checkbox-active: #116dff;
1026
- --wds-checkbox-active-disabled: rgba(19, 23, 32, 0);
1027
1062
  --wds-checkbox-border: #868aa5;
1063
+ --wds-checkbox-border-active: #116dff;
1064
+ --wds-checkbox-border-active-disabled: rgba(19, 23, 32, 0);
1065
+ --wds-checkbox-border-active-hover: rgba(19, 23, 32, 0);
1066
+ --wds-checkbox-border-disabled: rgba(19, 23, 32, .1);
1067
+ --wds-checkbox-border-hover: #868aa5;
1028
1068
  --wds-checkbox-border-radius: 4px;
1029
- --wds-checkbox-disabled: rgba(19, 23, 32, .1);
1030
- --wds-checkbox-dot-fill-active: #ffffff;
1031
- --wds-checkbox-dot-fill-disabled: #ffffff;
1032
1069
  --wds-checkbox-fill: #ffffff;
1033
1070
  --wds-checkbox-fill-active: #116dff;
1034
1071
  --wds-checkbox-fill-active-disabled: #bebebe;
1035
1072
  --wds-checkbox-fill-active-hover: #0f62e6;
1036
1073
  --wds-checkbox-fill-disabled: #e5e5e5;
1037
1074
  --wds-checkbox-fill-hover: #f7f8f8;
1038
- --wds-checkbox-hover: #868aa5;
1075
+ --wds-checkbox-group-gap-vertical: 12px;
1039
1076
  --wds-checkbox-icon: #ffffff;
1040
1077
  --wds-checkbox-icon-disabled: rgba(255, 255, 255, .7);
1041
1078
  --wds-circular-progress-bar-background-fill-error: #e5e5e5;
@@ -1466,6 +1503,10 @@
1466
1503
  --wds-field-set-gap-large: 16px;
1467
1504
  --wds-field-set-gap-medium: 12px;
1468
1505
  --wds-field-set-gap-small: 6px;
1506
+ --wds-field-set-label-font-line-height-small: 16px;
1507
+ --wds-field-set-label-font-line-height-tiny: 16px;
1508
+ --wds-field-set-label-font-size-small: 12px;
1509
+ --wds-field-set-label-font-size-tiny: 11px;
1469
1510
  --wds-field-set-label-gap: 8px;
1470
1511
  --wds-floating-helper-padding-horizontal: 32px;
1471
1512
  --wds-floating-helper-padding-vertical: 28px;
@@ -1521,6 +1562,10 @@
1521
1562
  --wds-font-weight-heading-6: 400;
1522
1563
  --wds-font-weight-medium: 500;
1523
1564
  --wds-font-weight-regular: 400;
1565
+ --wds-form-field-label-font-line-height-small: 16px;
1566
+ --wds-form-field-label-font-line-height-tiny: 16px;
1567
+ --wds-form-field-label-font-size-small: 12px;
1568
+ --wds-form-field-label-font-size-tiny: 11px;
1524
1569
  --wds-form-field-label-gap-small: 8px;
1525
1570
  --wds-form-field-label-gap-tiny: 6px;
1526
1571
  --wds-gallery-item-border: 4px;
@@ -1535,9 +1580,9 @@
1535
1580
  --wds-input-area-border-radius-default-medium: 4px;
1536
1581
  --wds-input-area-border-radius-default-small: 4px;
1537
1582
  --wds-input-area-padding-left-medium: 12px;
1538
- --wds-input-area-padding-left-small: 12px;
1583
+ --wds-input-area-padding-left-small: 8px;
1539
1584
  --wds-input-area-padding-right-medium: 10px;
1540
- --wds-input-area-padding-right-small: 10px;
1585
+ --wds-input-area-padding-right-small: 6px;
1541
1586
  --wds-input-area-padding-vertical-medium: 4px;
1542
1587
  --wds-input-area-padding-vertical-small: 4px;
1543
1588
  --wds-input-border-radius-default-large: 4px;
@@ -1550,8 +1595,8 @@
1550
1595
  --wds-input-border-radius-round-tiny: 1000px;
1551
1596
  --wds-input-padding-horizontal-large: 8px;
1552
1597
  --wds-input-padding-horizontal-medium: 8px;
1553
- --wds-input-padding-horizontal-small: 8px;
1554
- --wds-input-padding-horizontal-tiny: 8px;
1598
+ --wds-input-padding-horizontal-small: 4px;
1599
+ --wds-input-padding-horizontal-tiny: 4px;
1555
1600
  --wds-input-padding-vertical-large: 6px;
1556
1601
  --wds-input-padding-vertical-medium: 4px;
1557
1602
  --wds-input-padding-vertical-small: 4px;
@@ -1560,6 +1605,14 @@
1560
1605
  --wds-input-size-medium: 32px;
1561
1606
  --wds-input-size-small: 28px;
1562
1607
  --wds-input-size-tiny: 24px;
1608
+ --wds-input-value-font-line-height-large: 24px;
1609
+ --wds-input-value-font-line-height-medium: 20px;
1610
+ --wds-input-value-font-line-height-small: 16px;
1611
+ --wds-input-value-font-line-height-tiny: 16px;
1612
+ --wds-input-value-font-size-large: 16px;
1613
+ --wds-input-value-font-size-medium: 14px;
1614
+ --wds-input-value-font-size-small: 12px;
1615
+ --wds-input-value-font-size-tiny: 12px;
1563
1616
  --wds-input-width-fixed: 260px;
1564
1617
  --wds-input-width-large: 96px;
1565
1618
  --wds-input-width-medium: 72px;
@@ -1652,6 +1705,7 @@
1652
1705
  --wds-radio-fill-active-disabled: #bebebe;
1653
1706
  --wds-radio-fill-disabled: #e5e5e5;
1654
1707
  --wds-radio-fill-hover: #f7f8f8;
1708
+ --wds-radio-group-gap-vertical: 12px;
1655
1709
  --wds-radio-hover: #868aa5;
1656
1710
  --wds-search-border-radius-large: 4px;
1657
1711
  --wds-search-border-radius-medium: 4px;
@@ -1669,20 +1723,24 @@
1669
1723
  --wds-section-helper-fullwidth-vertical-padding-small: 6px;
1670
1724
  --wds-segmented-toggle-border-radius-medium: 4px;
1671
1725
  --wds-segmented-toggle-border-radius-small: 4px;
1672
- --wds-segmented-toggle-icononly-padings-horizontal-medium: 4px;
1673
- --wds-segmented-toggle-icononly-padings-horizontal-small: 4px;
1674
- --wds-segmented-toggle-icononly-padings-vertical-medium: 4px;
1675
- --wds-segmented-toggle-icononly-padings-vertical-small: 4px;
1676
- --wds-segmented-toggle-padings-horizontal-medium: 16px;
1677
- --wds-segmented-toggle-padings-horizontal-small: 12px;
1678
- --wds-segmented-toggle-padings-vertical-medium: 4px;
1679
- --wds-segmented-toggle-padings-vertical-small: 4px;
1726
+ --wds-segmented-toggle-icononly-padding-horizontal-medium: 4px;
1727
+ --wds-segmented-toggle-icononly-padding-horizontal-small: 4px;
1728
+ --wds-segmented-toggle-icononly-padding-vertical-medium: 4px;
1729
+ --wds-segmented-toggle-icononly-padding-vertical-small: 4px;
1730
+ --wds-segmented-toggle-label-font-line-height-medium: 20px;
1731
+ --wds-segmented-toggle-label-font-line-height-small: 16px;
1732
+ --wds-segmented-toggle-label-font-size-medium: 14px;
1733
+ --wds-segmented-toggle-label-font-size-small: 12px;
1734
+ --wds-segmented-toggle-padding-horizontal-medium: 16px;
1735
+ --wds-segmented-toggle-padding-horizontal-small: 12px;
1736
+ --wds-segmented-toggle-padding-vertical-medium: 4px;
1737
+ --wds-segmented-toggle-padding-vertical-small: 4px;
1680
1738
  --wds-segmented-toggle-size-medium: 32px;
1681
1739
  --wds-segmented-toggle-size-small: 28px;
1682
1740
  --wds-select-area-border: 4px;
1683
1741
  --wds-select-area-fill: #f7f8f8;
1684
1742
  --wds-select-area-fill-active: #dce9ff;
1685
- --wds-select-area-fill-disabled: #ffffff;
1743
+ --wds-select-area-fill-disabled: rgba(255, 255, 255, 0);
1686
1744
  --wds-select-area-fill-hover: #edeef2;
1687
1745
  --wds-select-area-padding-horizontal: 16px;
1688
1746
  --wds-select-area-padding-vertical: 12px;
package/studio/component.st.css CHANGED
@@ -29,6 +29,14 @@
29
29
  @property st-global(--wds-button-border-radius-medium);
30
30
  @property st-global(--wds-button-border-radius-small);
31
31
  @property st-global(--wds-button-border-radius-tiny);
32
+ @property st-global(--wds-button-font-line-height-large);
33
+ @property st-global(--wds-button-font-line-height-medium);
34
+ @property st-global(--wds-button-font-line-height-small);
35
+ @property st-global(--wds-button-font-line-height-tiny);
36
+ @property st-global(--wds-button-font-size-large);
37
+ @property st-global(--wds-button-font-size-medium);
38
+ @property st-global(--wds-button-font-size-small);
39
+ @property st-global(--wds-button-font-size-tiny);
32
40
  @property st-global(--wds-button-gap-large);
33
41
  @property st-global(--wds-button-gap-medium);
34
42
  @property st-global(--wds-button-gap-small);
@@ -59,20 +67,20 @@
59
67
  @property st-global(--wds-card-tab-padding-horizontal-small);
60
68
  @property st-global(--wds-card-tab-padding-vertical-medium);
61
69
  @property st-global(--wds-card-tab-padding-vertical-small);
62
- @property st-global(--wds-checkbox-active);
63
- @property st-global(--wds-checkbox-active-disabled);
64
70
  @property st-global(--wds-checkbox-border);
71
+ @property st-global(--wds-checkbox-border-active);
72
+ @property st-global(--wds-checkbox-border-active-disabled);
73
+ @property st-global(--wds-checkbox-border-active-hover);
74
+ @property st-global(--wds-checkbox-border-disabled);
75
+ @property st-global(--wds-checkbox-border-hover);
65
76
  @property st-global(--wds-checkbox-border-radius);
66
- @property st-global(--wds-checkbox-disabled);
67
- @property st-global(--wds-checkbox-dot-fill-active);
68
- @property st-global(--wds-checkbox-dot-fill-disabled);
69
77
  @property st-global(--wds-checkbox-fill);
70
78
  @property st-global(--wds-checkbox-fill-active);
71
79
  @property st-global(--wds-checkbox-fill-active-disabled);
72
80
  @property st-global(--wds-checkbox-fill-active-hover);
73
81
  @property st-global(--wds-checkbox-fill-disabled);
74
82
  @property st-global(--wds-checkbox-fill-hover);
75
- @property st-global(--wds-checkbox-hover);
83
+ @property st-global(--wds-checkbox-group-gap-vertical);
76
84
  @property st-global(--wds-checkbox-icon);
77
85
  @property st-global(--wds-checkbox-icon-disabled);
78
86
  @property st-global(--wds-circular-progress-bar-background-fill-error);
@@ -139,9 +147,17 @@
139
147
  @property st-global(--wds-field-set-gap-large);
140
148
  @property st-global(--wds-field-set-gap-medium);
141
149
  @property st-global(--wds-field-set-gap-small);
150
+ @property st-global(--wds-field-set-label-font-line-height-small);
151
+ @property st-global(--wds-field-set-label-font-line-height-tiny);
152
+ @property st-global(--wds-field-set-label-font-size-small);
153
+ @property st-global(--wds-field-set-label-font-size-tiny);
142
154
  @property st-global(--wds-field-set-label-gap);
143
155
  @property st-global(--wds-floating-helper-padding-horizontal);
144
156
  @property st-global(--wds-floating-helper-padding-vertical);
157
+ @property st-global(--wds-form-field-label-font-line-height-small);
158
+ @property st-global(--wds-form-field-label-font-line-height-tiny);
159
+ @property st-global(--wds-form-field-label-font-size-small);
160
+ @property st-global(--wds-form-field-label-font-size-tiny);
145
161
  @property st-global(--wds-form-field-label-gap-small);
146
162
  @property st-global(--wds-form-field-label-gap-tiny);
147
163
  @property st-global(--wds-gallery-item-border);
@@ -181,6 +197,14 @@
181
197
  @property st-global(--wds-input-size-medium);
182
198
  @property st-global(--wds-input-size-small);
183
199
  @property st-global(--wds-input-size-tiny);
200
+ @property st-global(--wds-input-value-font-line-height-large);
201
+ @property st-global(--wds-input-value-font-line-height-medium);
202
+ @property st-global(--wds-input-value-font-line-height-small);
203
+ @property st-global(--wds-input-value-font-line-height-tiny);
204
+ @property st-global(--wds-input-value-font-size-large);
205
+ @property st-global(--wds-input-value-font-size-medium);
206
+ @property st-global(--wds-input-value-font-size-small);
207
+ @property st-global(--wds-input-value-font-size-tiny);
184
208
  @property st-global(--wds-input-width-fixed);
185
209
  @property st-global(--wds-input-width-large);
186
210
  @property st-global(--wds-input-width-medium);
@@ -273,6 +297,7 @@
273
297
  @property st-global(--wds-radio-fill-active-disabled);
274
298
  @property st-global(--wds-radio-fill-disabled);
275
299
  @property st-global(--wds-radio-fill-hover);
300
+ @property st-global(--wds-radio-group-gap-vertical);
276
301
  @property st-global(--wds-radio-hover);
277
302
  @property st-global(--wds-search-border-radius-large);
278
303
  @property st-global(--wds-search-border-radius-medium);
@@ -290,14 +315,18 @@
290
315
  @property st-global(--wds-section-helper-fullwidth-vertical-padding-small);
291
316
  @property st-global(--wds-segmented-toggle-border-radius-medium);
292
317
  @property st-global(--wds-segmented-toggle-border-radius-small);
293
- @property st-global(--wds-segmented-toggle-icononly-padings-horizontal-medium);
294
- @property st-global(--wds-segmented-toggle-icononly-padings-horizontal-small);
295
- @property st-global(--wds-segmented-toggle-icononly-padings-vertical-medium);
296
- @property st-global(--wds-segmented-toggle-icononly-padings-vertical-small);
297
- @property st-global(--wds-segmented-toggle-padings-horizontal-medium);
298
- @property st-global(--wds-segmented-toggle-padings-horizontal-small);
299
- @property st-global(--wds-segmented-toggle-padings-vertical-medium);
300
- @property st-global(--wds-segmented-toggle-padings-vertical-small);
318
+ @property st-global(--wds-segmented-toggle-icononly-padding-horizontal-medium);
319
+ @property st-global(--wds-segmented-toggle-icononly-padding-horizontal-small);
320
+ @property st-global(--wds-segmented-toggle-icononly-padding-vertical-medium);
321
+ @property st-global(--wds-segmented-toggle-icononly-padding-vertical-small);
322
+ @property st-global(--wds-segmented-toggle-label-font-line-height-medium);
323
+ @property st-global(--wds-segmented-toggle-label-font-line-height-small);
324
+ @property st-global(--wds-segmented-toggle-label-font-size-medium);
325
+ @property st-global(--wds-segmented-toggle-label-font-size-small);
326
+ @property st-global(--wds-segmented-toggle-padding-horizontal-medium);
327
+ @property st-global(--wds-segmented-toggle-padding-horizontal-small);
328
+ @property st-global(--wds-segmented-toggle-padding-vertical-medium);
329
+ @property st-global(--wds-segmented-toggle-padding-vertical-small);
301
330
  @property st-global(--wds-segmented-toggle-size-medium);
302
331
  @property st-global(--wds-segmented-toggle-size-small);
303
332
  @property st-global(--wds-select-area-border);
@@ -522,6 +551,14 @@
522
551
  --wds-button-border-radius-medium: 4px;
523
552
  --wds-button-border-radius-small: 4px;
524
553
  --wds-button-border-radius-tiny: 4px;
554
+ --wds-button-font-line-height-large: 24px;
555
+ --wds-button-font-line-height-medium: 20px;
556
+ --wds-button-font-line-height-small: 16px;
557
+ --wds-button-font-line-height-tiny: 16px;
558
+ --wds-button-font-size-large: 16px;
559
+ --wds-button-font-size-medium: 14px;
560
+ --wds-button-font-size-small: 12px;
561
+ --wds-button-font-size-tiny: 12px;
525
562
  --wds-button-gap-large: 4px;
526
563
  --wds-button-gap-medium: 4px;
527
564
  --wds-button-gap-small: 4px;
@@ -552,20 +589,20 @@
552
589
  --wds-card-tab-padding-horizontal-small: 20px;
553
590
  --wds-card-tab-padding-vertical-medium: 16px;
554
591
  --wds-card-tab-padding-vertical-small: 16px;
555
- --wds-checkbox-active: #116dff;
556
- --wds-checkbox-active-disabled: rgba(19, 23, 32, 0);
557
592
  --wds-checkbox-border: #868aa5;
593
+ --wds-checkbox-border-active: #116dff;
594
+ --wds-checkbox-border-active-disabled: rgba(19, 23, 32, 0);
595
+ --wds-checkbox-border-active-hover: rgba(19, 23, 32, 0);
596
+ --wds-checkbox-border-disabled: rgba(19, 23, 32, .1);
597
+ --wds-checkbox-border-hover: #868aa5;
558
598
  --wds-checkbox-border-radius: 4px;
559
- --wds-checkbox-disabled: rgba(19, 23, 32, .1);
560
- --wds-checkbox-dot-fill-active: #ffffff;
561
- --wds-checkbox-dot-fill-disabled: #ffffff;
562
599
  --wds-checkbox-fill: #ffffff;
563
600
  --wds-checkbox-fill-active: #116dff;
564
601
  --wds-checkbox-fill-active-disabled: #bebebe;
565
602
  --wds-checkbox-fill-active-hover: #0f62e6;
566
603
  --wds-checkbox-fill-disabled: #e5e5e5;
567
604
  --wds-checkbox-fill-hover: #f7f8f8;
568
- --wds-checkbox-hover: #868aa5;
605
+ --wds-checkbox-group-gap-vertical: 12px;
569
606
  --wds-checkbox-icon: #ffffff;
570
607
  --wds-checkbox-icon-disabled: rgba(255, 255, 255, .7);
571
608
  --wds-circular-progress-bar-background-fill-error: #e5e5e5;
@@ -632,9 +669,17 @@
632
669
  --wds-field-set-gap-large: 16px;
633
670
  --wds-field-set-gap-medium: 12px;
634
671
  --wds-field-set-gap-small: 6px;
672
+ --wds-field-set-label-font-line-height-small: 16px;
673
+ --wds-field-set-label-font-line-height-tiny: 16px;
674
+ --wds-field-set-label-font-size-small: 12px;
675
+ --wds-field-set-label-font-size-tiny: 11px;
635
676
  --wds-field-set-label-gap: 8px;
636
677
  --wds-floating-helper-padding-horizontal: 32px;
637
678
  --wds-floating-helper-padding-vertical: 28px;
679
+ --wds-form-field-label-font-line-height-small: 16px;
680
+ --wds-form-field-label-font-line-height-tiny: 16px;
681
+ --wds-form-field-label-font-size-small: 12px;
682
+ --wds-form-field-label-font-size-tiny: 11px;
638
683
  --wds-form-field-label-gap-small: 8px;
639
684
  --wds-form-field-label-gap-tiny: 6px;
640
685
  --wds-gallery-item-border: 4px;
@@ -649,9 +694,9 @@
649
694
  --wds-input-area-border-radius-default-medium: 4px;
650
695
  --wds-input-area-border-radius-default-small: 4px;
651
696
  --wds-input-area-padding-left-medium: 12px;
652
- --wds-input-area-padding-left-small: 12px;
697
+ --wds-input-area-padding-left-small: 8px;
653
698
  --wds-input-area-padding-right-medium: 10px;
654
- --wds-input-area-padding-right-small: 10px;
699
+ --wds-input-area-padding-right-small: 6px;
655
700
  --wds-input-area-padding-vertical-medium: 4px;
656
701
  --wds-input-area-padding-vertical-small: 4px;
657
702
  --wds-input-border-radius-default-large: 4px;
@@ -664,8 +709,8 @@
664
709
  --wds-input-border-radius-round-tiny: 1000px;
665
710
  --wds-input-padding-horizontal-large: 8px;
666
711
  --wds-input-padding-horizontal-medium: 8px;
667
- --wds-input-padding-horizontal-small: 8px;
668
- --wds-input-padding-horizontal-tiny: 8px;
712
+ --wds-input-padding-horizontal-small: 4px;
713
+ --wds-input-padding-horizontal-tiny: 4px;
669
714
  --wds-input-padding-vertical-large: 6px;
670
715
  --wds-input-padding-vertical-medium: 4px;
671
716
  --wds-input-padding-vertical-small: 4px;
@@ -674,6 +719,14 @@
674
719
  --wds-input-size-medium: 32px;
675
720
  --wds-input-size-small: 28px;
676
721
  --wds-input-size-tiny: 24px;
722
+ --wds-input-value-font-line-height-large: 24px;
723
+ --wds-input-value-font-line-height-medium: 20px;
724
+ --wds-input-value-font-line-height-small: 16px;
725
+ --wds-input-value-font-line-height-tiny: 16px;
726
+ --wds-input-value-font-size-large: 16px;
727
+ --wds-input-value-font-size-medium: 14px;
728
+ --wds-input-value-font-size-small: 12px;
729
+ --wds-input-value-font-size-tiny: 12px;
677
730
  --wds-input-width-fixed: 260px;
678
731
  --wds-input-width-large: 96px;
679
732
  --wds-input-width-medium: 72px;
@@ -766,6 +819,7 @@
766
819
  --wds-radio-fill-active-disabled: #bebebe;
767
820
  --wds-radio-fill-disabled: #e5e5e5;
768
821
  --wds-radio-fill-hover: #f7f8f8;
822
+ --wds-radio-group-gap-vertical: 12px;
769
823
  --wds-radio-hover: #868aa5;
770
824
  --wds-search-border-radius-large: 4px;
771
825
  --wds-search-border-radius-medium: 4px;
@@ -783,20 +837,24 @@
783
837
  --wds-section-helper-fullwidth-vertical-padding-small: 6px;
784
838
  --wds-segmented-toggle-border-radius-medium: 4px;
785
839
  --wds-segmented-toggle-border-radius-small: 4px;
786
- --wds-segmented-toggle-icononly-padings-horizontal-medium: 4px;
787
- --wds-segmented-toggle-icononly-padings-horizontal-small: 4px;
788
- --wds-segmented-toggle-icononly-padings-vertical-medium: 4px;
789
- --wds-segmented-toggle-icononly-padings-vertical-small: 4px;
790
- --wds-segmented-toggle-padings-horizontal-medium: 16px;
791
- --wds-segmented-toggle-padings-horizontal-small: 12px;
792
- --wds-segmented-toggle-padings-vertical-medium: 4px;
793
- --wds-segmented-toggle-padings-vertical-small: 4px;
840
+ --wds-segmented-toggle-icononly-padding-horizontal-medium: 4px;
841
+ --wds-segmented-toggle-icononly-padding-horizontal-small: 4px;
842
+ --wds-segmented-toggle-icononly-padding-vertical-medium: 4px;
843
+ --wds-segmented-toggle-icononly-padding-vertical-small: 4px;
844
+ --wds-segmented-toggle-label-font-line-height-medium: 20px;
845
+ --wds-segmented-toggle-label-font-line-height-small: 16px;
846
+ --wds-segmented-toggle-label-font-size-medium: 14px;
847
+ --wds-segmented-toggle-label-font-size-small: 12px;
848
+ --wds-segmented-toggle-padding-horizontal-medium: 16px;
849
+ --wds-segmented-toggle-padding-horizontal-small: 12px;
850
+ --wds-segmented-toggle-padding-vertical-medium: 4px;
851
+ --wds-segmented-toggle-padding-vertical-small: 4px;
794
852
  --wds-segmented-toggle-size-medium: 32px;
795
853
  --wds-segmented-toggle-size-small: 28px;
796
854
  --wds-select-area-border: 4px;
797
855
  --wds-select-area-fill: #f7f8f8;
798
856
  --wds-select-area-fill-active: #dce9ff;
799
- --wds-select-area-fill-disabled: #ffffff;
857
+ --wds-select-area-fill-disabled: rgba(255, 255, 255, 0);
800
858
  --wds-select-area-fill-hover: #edeef2;
801
859
  --wds-select-area-padding-horizontal: 16px;
802
860
  --wds-select-area-padding-vertical: 12px;