@wix/design-system-tokens 1.114.0 → 1.115.0

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 (11) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/all.css +21 -1
  3. package/all.st.css +42 -2
  4. package/component.st.css +42 -2
  5. package/package.json +2 -2
  6. package/studio/all.css +24 -4
  7. package/studio/all.st.css +46 -6
  8. package/studio/component.st.css +46 -6
  9. package/wixel/all.css +22 -2
  10. package/wixel/all.st.css +44 -4
  11. package/wixel/component.st.css +44 -4
package/CHANGELOG.md CHANGED
@@ -1,3 +1,9 @@
1
+ ## 1.115.0 - 2025-06-23
2
+
3
+ ### Visual Breaking Changes
4
+
5
+ - breaking(ToggleButton): token fixes & new component level tokens [14992](https://github.com/wix-private/wix-design-systems/pull/14992)
6
+
1
7
  ## 1.114.0 - 2025-06-17
2
8
 
3
9
  ### Features
package/all.css CHANGED
@@ -716,6 +716,8 @@
716
716
  --wds-tooltip-border-radius-medium: var(--wds-border-radius-400);
717
717
  --wds-tooltip-border-radius: var(--wds-border-radius-400);
718
718
  --wds-toggle-switch-padding: var(--wds-space-25);
719
+ --wds-toggle-button-padding-tiny: var(--wds-space-100);
720
+ --wds-toggle-button-padding-small: var(--wds-space-200);
719
721
  --wds-toggle-button-padding-right-tiny-round: var(--wds-space-200);
720
722
  --wds-toggle-button-padding-right-tiny: var(--wds-space-100);
721
723
  --wds-toggle-button-padding-right-small-round: var(--wds-space-300);
@@ -724,6 +726,7 @@
724
726
  --wds-toggle-button-padding-right-medium: var(--wds-space-200);
725
727
  --wds-toggle-button-padding-right-large-round: var(--wds-space-500);
726
728
  --wds-toggle-button-padding-right-large: var(--wds-space-300);
729
+ --wds-toggle-button-padding-medium: var(--wds-space-200);
727
730
  --wds-toggle-button-padding-left-tiny-round: var(--wds-space-100);
728
731
  --wds-toggle-button-padding-left-tiny: var(--wds-space-50);
729
732
  --wds-toggle-button-padding-left-small-round: var(--wds-space-200);
@@ -732,9 +735,9 @@
732
735
  --wds-toggle-button-padding-left-medium: var(--wds-space-100);
733
736
  --wds-toggle-button-padding-left-large-round: var(--wds-space-200);
734
737
  --wds-toggle-button-padding-left-large: var(--wds-space-150);
738
+ --wds-toggle-button-padding-large: var(--wds-space-300);
735
739
  --wds-toggle-button-label-font-weight-square: var(--wds-font-weight-regular);
736
740
  --wds-toggle-button-label-font-weight-pill: var(--wds-font-weight-regular);
737
- --wds-toggle-button-label-font-weight: var(--wds-font-weight-regular);
738
741
  --wds-toggle-button-border-radius-square-tiny: var(--wds-border-radius-200);
739
742
  --wds-toggle-button-border-radius-square-small: var(--wds-border-radius-200);
740
743
  --wds-toggle-button-border-radius-square-medium: var(--wds-border-radius-300);
@@ -1295,7 +1298,22 @@
1295
1298
  --wds-toggle-switch-border-success-disabled: var(--wds-color-border-success-secondary-disabled);
1296
1299
  --wds-toggle-switch-border-standard-disabled: var(--wds-color-border-standard-secondary-disabled);
1297
1300
  --wds-toggle-switch-border-error-disabled: var(--wds-color-border-destructive-secondary-disabled);
1301
+ --wds-toggle-button-label-font-size-square-tiny: var(--wds-font-size-body-tiny);
1302
+ --wds-toggle-button-label-font-size-square-small: var(--wds-font-size-body-tiny);
1303
+ --wds-toggle-button-label-font-size-square-medium: var(--wds-font-size-body-tiny);
1304
+ --wds-toggle-button-label-font-size-square-large: var(--wds-font-size-body-tiny);
1298
1305
  --wds-toggle-button-label-font-size-pill-small: var(--wds-font-size-body-small);
1306
+ --wds-toggle-button-label-fill-standard-selected-disabled: var(--wds-color-text-disabled-light);
1307
+ --wds-toggle-button-label-fill-standard-selected: var(--wds-color-text-primary);
1308
+ --wds-toggle-button-label-fill-standard-hover: var(--wds-color-text-primary);
1309
+ --wds-toggle-button-label-fill-standard-disabled: var(--wds-color-text-disabled);
1310
+ --wds-toggle-button-label-fill-standard-default: var(--wds-color-text-standard-primary);
1311
+ --wds-toggle-button-fill-standard-selected-hover: var(--wds-color-fill-standard-secondary-hover);
1312
+ --wds-toggle-button-fill-standard-selected-disabled: var(--wds-color-fill-standard-primary-disabled);
1313
+ --wds-toggle-button-fill-standard-selected: var(--wds-color-fill-standard-secondary);
1314
+ --wds-toggle-button-fill-standard-hover: var(--wds-color-text-standard-primary-light);
1315
+ --wds-toggle-button-fill-standard-disabled: var(--wds-color-fill-standard-tertiary-disabled);
1316
+ --wds-toggle-button-fill-standard: var(--wds-color-fill-standard-tertiary);
1299
1317
  --wds-toggle-button-fill-inverted-selected-hover: var(--wds-color-fill-standard-primary-hover);
1300
1318
  --wds-toggle-button-fill-inverted-selected-disabled: var(--wds-color-fill-standard-primary-disabled);
1301
1319
  --wds-toggle-button-fill-inverted-selected: var(--wds-color-fill-standard-primary);
@@ -1338,6 +1356,7 @@
1338
1356
  --wds-segmented-toggle-fill-disabled: var(--wds-color-fill-standard-tertiary-disabled);
1339
1357
  --wds-segmented-toggle-fill-default: var(--wds-color-fill-standard-tertiary);
1340
1358
  --wds-segmented-toggle-border-hover: var(--wds-color-border-standard-secondary-hover);
1359
+ --wds-segmented-toggle-background-fill: var(--wds-color-fill-standard-tertiary);
1341
1360
  --wds-section-helper-text-font-line-height: var(--wds-font-line-height-200);
1342
1361
  --wds-section-helper-fill-preview: var(--wds-color-fill-surface-neutral);
1343
1362
  --wds-section-helper-border-preview: var(--wds-color-border-dark-primary);
@@ -1486,6 +1505,7 @@
1486
1505
  --wds-card-gallery-item-fill: var(--wds-color-fill-surface-default);
1487
1506
  --wds-button-text-hover: var(--wds-color-text-standard-primary-light);
1488
1507
  --wds-button-label-font-size-large: var(--wds-font-size-body-medium);
1508
+ --wds-button-label-fill-transparent-tertiary: var(--wds-color-text-standard-primary-light);
1489
1509
  --wds-button-font-size-tiny: var(--wds-font-size-body-tiny);
1490
1510
  --wds-button-font-size-small: var(--wds-font-size-body-small);
1491
1511
  --wds-button-font-size-medium: var(--wds-font-size-body-medium);
package/all.st.css CHANGED
@@ -111,6 +111,7 @@
111
111
  @property st-global(--wds-button-icon-offset-medium);
112
112
  @property st-global(--wds-button-icon-offset-small);
113
113
  @property st-global(--wds-button-icon-offset-tiny);
114
+ @property st-global(--wds-button-label-fill-transparent-tertiary);
114
115
  @property st-global(--wds-button-label-font-size-large);
115
116
  @property st-global(--wds-button-outline-hover);
116
117
  @property st-global(--wds-button-padding-horizontal-extra-large);
@@ -1082,6 +1083,7 @@
1082
1083
  @property st-global(--wds-section-helper-text-font-size);
1083
1084
  @property st-global(--wds-section-helper-vertical-margin);
1084
1085
  @property st-global(--wds-section-helper-vertical-padding-medium);
1086
+ @property st-global(--wds-segmented-toggle-background-fill);
1085
1087
  @property st-global(--wds-segmented-toggle-border-hover);
1086
1088
  @property st-global(--wds-segmented-toggle-border-radius-medium);
1087
1089
  @property st-global(--wds-segmented-toggle-border-radius-small);
@@ -1417,11 +1419,26 @@
1417
1419
  @property st-global(--wds-toggle-button-fill-inverted-selected);
1418
1420
  @property st-global(--wds-toggle-button-fill-inverted-selected-disabled);
1419
1421
  @property st-global(--wds-toggle-button-fill-inverted-selected-hover);
1422
+ @property st-global(--wds-toggle-button-fill-standard);
1423
+ @property st-global(--wds-toggle-button-fill-standard-disabled);
1424
+ @property st-global(--wds-toggle-button-fill-standard-hover);
1425
+ @property st-global(--wds-toggle-button-fill-standard-selected);
1426
+ @property st-global(--wds-toggle-button-fill-standard-selected-disabled);
1427
+ @property st-global(--wds-toggle-button-fill-standard-selected-hover);
1428
+ @property st-global(--wds-toggle-button-label-fill-standard-default);
1429
+ @property st-global(--wds-toggle-button-label-fill-standard-disabled);
1430
+ @property st-global(--wds-toggle-button-label-fill-standard-hover);
1431
+ @property st-global(--wds-toggle-button-label-fill-standard-selected);
1432
+ @property st-global(--wds-toggle-button-label-fill-standard-selected-disabled);
1420
1433
  @property st-global(--wds-toggle-button-label-font-line-height-pill-small);
1421
1434
  @property st-global(--wds-toggle-button-label-font-size-pill-small);
1422
- @property st-global(--wds-toggle-button-label-font-weight);
1435
+ @property st-global(--wds-toggle-button-label-font-size-square-large);
1436
+ @property st-global(--wds-toggle-button-label-font-size-square-medium);
1437
+ @property st-global(--wds-toggle-button-label-font-size-square-small);
1438
+ @property st-global(--wds-toggle-button-label-font-size-square-tiny);
1423
1439
  @property st-global(--wds-toggle-button-label-font-weight-pill);
1424
1440
  @property st-global(--wds-toggle-button-label-font-weight-square);
1441
+ @property st-global(--wds-toggle-button-padding-large);
1425
1442
  @property st-global(--wds-toggle-button-padding-left-large);
1426
1443
  @property st-global(--wds-toggle-button-padding-left-large-round);
1427
1444
  @property st-global(--wds-toggle-button-padding-left-medium);
@@ -1430,6 +1447,7 @@
1430
1447
  @property st-global(--wds-toggle-button-padding-left-small-round);
1431
1448
  @property st-global(--wds-toggle-button-padding-left-tiny);
1432
1449
  @property st-global(--wds-toggle-button-padding-left-tiny-round);
1450
+ @property st-global(--wds-toggle-button-padding-medium);
1433
1451
  @property st-global(--wds-toggle-button-padding-right-large);
1434
1452
  @property st-global(--wds-toggle-button-padding-right-large-round);
1435
1453
  @property st-global(--wds-toggle-button-padding-right-medium);
@@ -1438,6 +1456,8 @@
1438
1456
  @property st-global(--wds-toggle-button-padding-right-small-round);
1439
1457
  @property st-global(--wds-toggle-button-padding-right-tiny);
1440
1458
  @property st-global(--wds-toggle-button-padding-right-tiny-round);
1459
+ @property st-global(--wds-toggle-button-padding-small);
1460
+ @property st-global(--wds-toggle-button-padding-tiny);
1441
1461
  @property st-global(--wds-toggle-switch-border-error-disabled);
1442
1462
  @property st-global(--wds-toggle-switch-border-standard-disabled);
1443
1463
  @property st-global(--wds-toggle-switch-border-success-disabled);
@@ -1670,6 +1690,7 @@
1670
1690
  --wds-button-icon-offset-medium: 12px;
1671
1691
  --wds-button-icon-offset-small: 12px;
1672
1692
  --wds-button-icon-offset-tiny: 12px;
1693
+ --wds-button-label-fill-transparent-tertiary: #ffffff;
1673
1694
  --wds-button-label-font-size-large: 16px;
1674
1695
  --wds-button-outline-hover: transparent;
1675
1696
  --wds-button-padding-horizontal-extra-large: 36px;
@@ -2641,6 +2662,7 @@
2641
2662
  --wds-section-helper-text-font-size: 14px;
2642
2663
  --wds-section-helper-vertical-margin: 6px;
2643
2664
  --wds-section-helper-vertical-padding-medium: 18px;
2665
+ --wds-segmented-toggle-background-fill: #ffffff;
2644
2666
  --wds-segmented-toggle-border-hover: #a8caff;
2645
2667
  --wds-segmented-toggle-border-radius-medium: 6px;
2646
2668
  --wds-segmented-toggle-border-radius-small: 6px;
@@ -2976,11 +2998,26 @@
2976
2998
  --wds-toggle-button-fill-inverted-selected: #116dff;
2977
2999
  --wds-toggle-button-fill-inverted-selected-disabled: rgba(0, 6, 36, .3);
2978
3000
  --wds-toggle-button-fill-inverted-selected-hover: #0f62e6;
3001
+ --wds-toggle-button-fill-standard: #ffffff;
3002
+ --wds-toggle-button-fill-standard-disabled: #ffffff;
3003
+ --wds-toggle-button-fill-standard-hover: #ffffff;
3004
+ --wds-toggle-button-fill-standard-selected: #d6e6fe;
3005
+ --wds-toggle-button-fill-standard-selected-disabled: rgba(0, 6, 36, .3);
3006
+ --wds-toggle-button-fill-standard-selected-hover: #a8caff;
3007
+ --wds-toggle-button-label-fill-standard-default: #000624;
3008
+ --wds-toggle-button-label-fill-standard-disabled: rgba(0, 6, 36, .3);
3009
+ --wds-toggle-button-label-fill-standard-hover: #116dff;
3010
+ --wds-toggle-button-label-fill-standard-selected: #116dff;
3011
+ --wds-toggle-button-label-fill-standard-selected-disabled: rgba(255, 255, 255, .7);
2979
3012
  --wds-toggle-button-label-font-line-height-pill-small: 18px;
2980
3013
  --wds-toggle-button-label-font-size-pill-small: 14px;
2981
- --wds-toggle-button-label-font-weight: 400;
3014
+ --wds-toggle-button-label-font-size-square-large: 12px;
3015
+ --wds-toggle-button-label-font-size-square-medium: 12px;
3016
+ --wds-toggle-button-label-font-size-square-small: 12px;
3017
+ --wds-toggle-button-label-font-size-square-tiny: 12px;
2982
3018
  --wds-toggle-button-label-font-weight-pill: 400;
2983
3019
  --wds-toggle-button-label-font-weight-square: 400;
3020
+ --wds-toggle-button-padding-large: 18px;
2984
3021
  --wds-toggle-button-padding-left-large: 9px;
2985
3022
  --wds-toggle-button-padding-left-large-round: 12px;
2986
3023
  --wds-toggle-button-padding-left-medium: 6px;
@@ -2989,6 +3026,7 @@
2989
3026
  --wds-toggle-button-padding-left-small-round: 12px;
2990
3027
  --wds-toggle-button-padding-left-tiny: 3px;
2991
3028
  --wds-toggle-button-padding-left-tiny-round: 6px;
3029
+ --wds-toggle-button-padding-medium: 12px;
2992
3030
  --wds-toggle-button-padding-right-large: 18px;
2993
3031
  --wds-toggle-button-padding-right-large-round: 30px;
2994
3032
  --wds-toggle-button-padding-right-medium: 12px;
@@ -2997,6 +3035,8 @@
2997
3035
  --wds-toggle-button-padding-right-small-round: 18px;
2998
3036
  --wds-toggle-button-padding-right-tiny: 6px;
2999
3037
  --wds-toggle-button-padding-right-tiny-round: 12px;
3038
+ --wds-toggle-button-padding-small: 12px;
3039
+ --wds-toggle-button-padding-tiny: 6px;
3000
3040
  --wds-toggle-switch-border-error-disabled: rgba(0, 6, 36, .1);
3001
3041
  --wds-toggle-switch-border-standard-disabled: rgba(0, 6, 36, .1);
3002
3042
  --wds-toggle-switch-border-success-disabled: rgba(0, 6, 36, .1);
package/component.st.css CHANGED
@@ -80,6 +80,7 @@
80
80
  @property st-global(--wds-button-icon-offset-medium);
81
81
  @property st-global(--wds-button-icon-offset-small);
82
82
  @property st-global(--wds-button-icon-offset-tiny);
83
+ @property st-global(--wds-button-label-fill-transparent-tertiary);
83
84
  @property st-global(--wds-button-label-font-size-large);
84
85
  @property st-global(--wds-button-outline-hover);
85
86
  @property st-global(--wds-button-padding-horizontal-extra-large);
@@ -547,6 +548,7 @@
547
548
  @property st-global(--wds-section-helper-text-font-size);
548
549
  @property st-global(--wds-section-helper-vertical-margin);
549
550
  @property st-global(--wds-section-helper-vertical-padding-medium);
551
+ @property st-global(--wds-segmented-toggle-background-fill);
550
552
  @property st-global(--wds-segmented-toggle-border-hover);
551
553
  @property st-global(--wds-segmented-toggle-border-radius-medium);
552
554
  @property st-global(--wds-segmented-toggle-border-radius-small);
@@ -792,11 +794,26 @@
792
794
  @property st-global(--wds-toggle-button-fill-inverted-selected);
793
795
  @property st-global(--wds-toggle-button-fill-inverted-selected-disabled);
794
796
  @property st-global(--wds-toggle-button-fill-inverted-selected-hover);
797
+ @property st-global(--wds-toggle-button-fill-standard);
798
+ @property st-global(--wds-toggle-button-fill-standard-disabled);
799
+ @property st-global(--wds-toggle-button-fill-standard-hover);
800
+ @property st-global(--wds-toggle-button-fill-standard-selected);
801
+ @property st-global(--wds-toggle-button-fill-standard-selected-disabled);
802
+ @property st-global(--wds-toggle-button-fill-standard-selected-hover);
803
+ @property st-global(--wds-toggle-button-label-fill-standard-default);
804
+ @property st-global(--wds-toggle-button-label-fill-standard-disabled);
805
+ @property st-global(--wds-toggle-button-label-fill-standard-hover);
806
+ @property st-global(--wds-toggle-button-label-fill-standard-selected);
807
+ @property st-global(--wds-toggle-button-label-fill-standard-selected-disabled);
795
808
  @property st-global(--wds-toggle-button-label-font-line-height-pill-small);
796
809
  @property st-global(--wds-toggle-button-label-font-size-pill-small);
797
- @property st-global(--wds-toggle-button-label-font-weight);
810
+ @property st-global(--wds-toggle-button-label-font-size-square-large);
811
+ @property st-global(--wds-toggle-button-label-font-size-square-medium);
812
+ @property st-global(--wds-toggle-button-label-font-size-square-small);
813
+ @property st-global(--wds-toggle-button-label-font-size-square-tiny);
798
814
  @property st-global(--wds-toggle-button-label-font-weight-pill);
799
815
  @property st-global(--wds-toggle-button-label-font-weight-square);
816
+ @property st-global(--wds-toggle-button-padding-large);
800
817
  @property st-global(--wds-toggle-button-padding-left-large);
801
818
  @property st-global(--wds-toggle-button-padding-left-large-round);
802
819
  @property st-global(--wds-toggle-button-padding-left-medium);
@@ -805,6 +822,7 @@
805
822
  @property st-global(--wds-toggle-button-padding-left-small-round);
806
823
  @property st-global(--wds-toggle-button-padding-left-tiny);
807
824
  @property st-global(--wds-toggle-button-padding-left-tiny-round);
825
+ @property st-global(--wds-toggle-button-padding-medium);
808
826
  @property st-global(--wds-toggle-button-padding-right-large);
809
827
  @property st-global(--wds-toggle-button-padding-right-large-round);
810
828
  @property st-global(--wds-toggle-button-padding-right-medium);
@@ -813,6 +831,8 @@
813
831
  @property st-global(--wds-toggle-button-padding-right-small-round);
814
832
  @property st-global(--wds-toggle-button-padding-right-tiny);
815
833
  @property st-global(--wds-toggle-button-padding-right-tiny-round);
834
+ @property st-global(--wds-toggle-button-padding-small);
835
+ @property st-global(--wds-toggle-button-padding-tiny);
816
836
  @property st-global(--wds-toggle-switch-border-error-disabled);
817
837
  @property st-global(--wds-toggle-switch-border-standard-disabled);
818
838
  @property st-global(--wds-toggle-switch-border-success-disabled);
@@ -1012,6 +1032,7 @@
1012
1032
  --wds-button-icon-offset-medium: 12px;
1013
1033
  --wds-button-icon-offset-small: 12px;
1014
1034
  --wds-button-icon-offset-tiny: 12px;
1035
+ --wds-button-label-fill-transparent-tertiary: #ffffff;
1015
1036
  --wds-button-label-font-size-large: 16px;
1016
1037
  --wds-button-outline-hover: transparent;
1017
1038
  --wds-button-padding-horizontal-extra-large: 36px;
@@ -1479,6 +1500,7 @@
1479
1500
  --wds-section-helper-text-font-size: 14px;
1480
1501
  --wds-section-helper-vertical-margin: 6px;
1481
1502
  --wds-section-helper-vertical-padding-medium: 18px;
1503
+ --wds-segmented-toggle-background-fill: #ffffff;
1482
1504
  --wds-segmented-toggle-border-hover: #a8caff;
1483
1505
  --wds-segmented-toggle-border-radius-medium: 6px;
1484
1506
  --wds-segmented-toggle-border-radius-small: 6px;
@@ -1724,11 +1746,26 @@
1724
1746
  --wds-toggle-button-fill-inverted-selected: #116dff;
1725
1747
  --wds-toggle-button-fill-inverted-selected-disabled: rgba(0, 6, 36, .3);
1726
1748
  --wds-toggle-button-fill-inverted-selected-hover: #0f62e6;
1749
+ --wds-toggle-button-fill-standard: #ffffff;
1750
+ --wds-toggle-button-fill-standard-disabled: #ffffff;
1751
+ --wds-toggle-button-fill-standard-hover: #ffffff;
1752
+ --wds-toggle-button-fill-standard-selected: #d6e6fe;
1753
+ --wds-toggle-button-fill-standard-selected-disabled: rgba(0, 6, 36, .3);
1754
+ --wds-toggle-button-fill-standard-selected-hover: #a8caff;
1755
+ --wds-toggle-button-label-fill-standard-default: #000624;
1756
+ --wds-toggle-button-label-fill-standard-disabled: rgba(0, 6, 36, .3);
1757
+ --wds-toggle-button-label-fill-standard-hover: #116dff;
1758
+ --wds-toggle-button-label-fill-standard-selected: #116dff;
1759
+ --wds-toggle-button-label-fill-standard-selected-disabled: rgba(255, 255, 255, .7);
1727
1760
  --wds-toggle-button-label-font-line-height-pill-small: 18px;
1728
1761
  --wds-toggle-button-label-font-size-pill-small: 14px;
1729
- --wds-toggle-button-label-font-weight: 400;
1762
+ --wds-toggle-button-label-font-size-square-large: 12px;
1763
+ --wds-toggle-button-label-font-size-square-medium: 12px;
1764
+ --wds-toggle-button-label-font-size-square-small: 12px;
1765
+ --wds-toggle-button-label-font-size-square-tiny: 12px;
1730
1766
  --wds-toggle-button-label-font-weight-pill: 400;
1731
1767
  --wds-toggle-button-label-font-weight-square: 400;
1768
+ --wds-toggle-button-padding-large: 18px;
1732
1769
  --wds-toggle-button-padding-left-large: 9px;
1733
1770
  --wds-toggle-button-padding-left-large-round: 12px;
1734
1771
  --wds-toggle-button-padding-left-medium: 6px;
@@ -1737,6 +1774,7 @@
1737
1774
  --wds-toggle-button-padding-left-small-round: 12px;
1738
1775
  --wds-toggle-button-padding-left-tiny: 3px;
1739
1776
  --wds-toggle-button-padding-left-tiny-round: 6px;
1777
+ --wds-toggle-button-padding-medium: 12px;
1740
1778
  --wds-toggle-button-padding-right-large: 18px;
1741
1779
  --wds-toggle-button-padding-right-large-round: 30px;
1742
1780
  --wds-toggle-button-padding-right-medium: 12px;
@@ -1745,6 +1783,8 @@
1745
1783
  --wds-toggle-button-padding-right-small-round: 18px;
1746
1784
  --wds-toggle-button-padding-right-tiny: 6px;
1747
1785
  --wds-toggle-button-padding-right-tiny-round: 12px;
1786
+ --wds-toggle-button-padding-small: 12px;
1787
+ --wds-toggle-button-padding-tiny: 6px;
1748
1788
  --wds-toggle-switch-border-error-disabled: rgba(0, 6, 36, .1);
1749
1789
  --wds-toggle-switch-border-standard-disabled: rgba(0, 6, 36, .1);
1750
1790
  --wds-toggle-switch-border-success-disabled: rgba(0, 6, 36, .1);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wix/design-system-tokens",
3
- "version": "1.114.0",
3
+ "version": "1.115.0",
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": "6c61677236ad16d68cd5776689a22f985c4053d34ae3c6082be70a48"
36
+ "falconPackageHash": "f62bf2c277b055effd7b4cc2d6f4d549ee0026da619e16f9b1e1a227"
37
37
  }
package/studio/all.css CHANGED
@@ -720,6 +720,8 @@
720
720
  --wds-toggle-switch-border-success-disabled: var(--wds-color-black-100-transparent-0);
721
721
  --wds-toggle-switch-border-standard-disabled: var(--wds-color-black-100-transparent-0);
722
722
  --wds-toggle-switch-border-error-disabled: var(--wds-color-black-100-transparent-0);
723
+ --wds-toggle-button-padding-tiny: var(--wds-space-150);
724
+ --wds-toggle-button-padding-small: var(--wds-space-300);
723
725
  --wds-toggle-button-padding-right-tiny-round: var(--wds-space-300);
724
726
  --wds-toggle-button-padding-right-tiny: var(--wds-space-150);
725
727
  --wds-toggle-button-padding-right-small-round: var(--wds-space-400);
@@ -728,6 +730,7 @@
728
730
  --wds-toggle-button-padding-right-medium: var(--wds-space-300);
729
731
  --wds-toggle-button-padding-right-large-round: var(--wds-space-400);
730
732
  --wds-toggle-button-padding-right-large: var(--wds-space-400);
733
+ --wds-toggle-button-padding-medium: var(--wds-space-300);
731
734
  --wds-toggle-button-padding-left-tiny-round: var(--wds-space-150);
732
735
  --wds-toggle-button-padding-left-tiny: var(--wds-space-100);
733
736
  --wds-toggle-button-padding-left-small-round: var(--wds-space-300);
@@ -736,6 +739,7 @@
736
739
  --wds-toggle-button-padding-left-medium: var(--wds-space-150);
737
740
  --wds-toggle-button-padding-left-large-round: var(--wds-space-300);
738
741
  --wds-toggle-button-padding-left-large: var(--wds-space-200);
742
+ --wds-toggle-button-padding-large: var(--wds-space-400);
739
743
  --wds-toggle-button-padding-horizontal-tiny-round: var(--wds-space-300);
740
744
  --wds-toggle-button-padding-horizontal-tiny: var(--wds-space-150);
741
745
  --wds-toggle-button-padding-horizontal-small-round: var(--wds-space-400);
@@ -745,8 +749,9 @@
745
749
  --wds-toggle-button-padding-horizontal-large-round: var(--wds-space-400);
746
750
  --wds-toggle-button-padding-horizontal-large: var(--wds-space-400);
747
751
  --wds-toggle-button-label-font-weight-square: var(--wds-font-weight-regular);
748
- --wds-toggle-button-label-font-weight-round: var(--wds-font-weight-regular);
749
- --wds-toggle-button-label-font-weight: var(--wds-font-weight-regular);
752
+ --wds-toggle-button-label-font-weight-pill: var(--wds-font-weight-regular);
753
+ --wds-toggle-button-label-fill-standard-disabled: var(--wds-color-text-disabled);
754
+ --wds-toggle-button-fill-standard-selected-disabled: var(--wds-color-fill-standard-primary-disabled);
750
755
  --wds-toggle-button-fill-inverted-selected-disabled: var(--wds-color-fill-standard-primary-disabled);
751
756
  --wds-toggle-button-border-radius-square-tiny: var(--wds-border-radius-200);
752
757
  --wds-toggle-button-border-radius-square-small: var(--wds-border-radius-200);
@@ -1323,7 +1328,20 @@
1323
1328
  --wds-toggle-switch-fill-error-active-hover: var(--wds-color-fill-destructive-primary-hover);
1324
1329
  --wds-toggle-switch-fill-error-active: var(--wds-color-fill-destructive-primary);
1325
1330
  --wds-toggle-switch-fill-error: var(--wds-color-fill-dark-primary);
1326
- --wds-toggle-button-label-font-size-pill-small: var(--wds-font-size-body-small);
1331
+ --wds-toggle-button-label-font-size-square-tiny: var(--wds-font-size-body-tiny);
1332
+ --wds-toggle-button-label-font-size-square-small: var(--wds-font-size-body-tiny);
1333
+ --wds-toggle-button-label-font-size-square-medium: var(--wds-font-size-body-tiny);
1334
+ --wds-toggle-button-label-font-size-square-large: var(--wds-font-size-body-tiny);
1335
+ --wds-toggle-button-label-font-size-pill-small: var(--wds-font-size-body-tiny);
1336
+ --wds-toggle-button-label-fill-standard-selected-disabled: var(--wds-color-text-disabled-light);
1337
+ --wds-toggle-button-label-fill-standard-selected: var(--wds-color-text-primary);
1338
+ --wds-toggle-button-label-fill-standard-hover: var(--wds-color-text-standard-primary);
1339
+ --wds-toggle-button-label-fill-standard-default: var(--wds-color-text-standard-primary);
1340
+ --wds-toggle-button-fill-standard-selected-hover: var(--wds-color-fill-standard-secondary-hover);
1341
+ --wds-toggle-button-fill-standard-selected: var(--wds-color-fill-standard-secondary);
1342
+ --wds-toggle-button-fill-standard-hover: var(--wds-color-fill-standard-tertiary-hover);
1343
+ --wds-toggle-button-fill-standard-disabled: var(--wds-color-fill-standard-tertiary-disabled);
1344
+ --wds-toggle-button-fill-standard: var(--wds-color-fill-standard-tertiary);
1327
1345
  --wds-toggle-button-fill-inverted-selected-hover: var(--wds-color-fill-standard-primary-hover);
1328
1346
  --wds-toggle-button-fill-inverted-selected: var(--wds-color-fill-standard-primary);
1329
1347
  --wds-toggle-button-fill-inverted-hover: var(--wds-color-fill-standard-tertiary-hover);
@@ -1364,6 +1382,7 @@
1364
1382
  --wds-segmented-toggle-fill-disabled: var(--wds-color-fill-standard-tertiary-disabled);
1365
1383
  --wds-segmented-toggle-fill-default: var(--wds-color-fill-standard-tertiary);
1366
1384
  --wds-segmented-toggle-border-hover: var(--wds-color-border-standard-secondary-hover);
1385
+ --wds-segmented-toggle-background-fill: var(--wds-color-fill-standard-tertiary);
1367
1386
  --wds-section-helper-text-font-line-height: var(--wds-font-line-height-100);
1368
1387
  --wds-radio-label-font-size-small: var(--wds-font-size-body-tiny);
1369
1388
  --wds-radio-label-font-size-medium: var(--wds-font-size-body-small);
@@ -1485,6 +1504,7 @@
1485
1504
  --wds-button-text-hover: var(--wds-color-text-primary);
1486
1505
  --wds-button-outline-hover: var(--wds-color-border-standard-secondary);
1487
1506
  --wds-button-label-font-size-large: var(--wds-font-size-body-medium);
1507
+ --wds-button-label-fill-transparent-tertiary: var(--wds-color-text-standard-primary-light);
1488
1508
  --wds-button-font-size-tiny: var(--wds-font-size-body-tiny);
1489
1509
  --wds-button-font-size-small: var(--wds-font-size-body-tiny);
1490
1510
  --wds-button-font-size-medium: var(--wds-font-size-body-small);
@@ -1511,7 +1531,7 @@
1511
1531
  --wds-accordion-background-fill-light-hover: var(--wds-color-fill-standard-tertiary-hover);
1512
1532
  --wds-accordion-background-fill-light: var(--wds-color-fill-standard-tertiary);
1513
1533
  --wds-vertical-tabs-section-text-font-line-height-small: var(--wds-font-line-height-body-tiny);
1514
- --wds-toggle-button-label-font-line-height-pill-small: var(--wds-font-line-height-body-small);
1534
+ --wds-toggle-button-label-font-line-height-pill-small: var(--wds-font-line-height-body-tiny);
1515
1535
  --wds-timeline-title-font-line-height: var(--wds-font-line-height-body-tiny);
1516
1536
  --wds-thumbnail-title-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
1517
1537
  --wds-thumbnail-subtitle-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
package/studio/all.st.css CHANGED
@@ -111,6 +111,7 @@
111
111
  @property st-global(--wds-button-icon-offset-medium);
112
112
  @property st-global(--wds-button-icon-offset-small);
113
113
  @property st-global(--wds-button-icon-offset-tiny);
114
+ @property st-global(--wds-button-label-fill-transparent-tertiary);
114
115
  @property st-global(--wds-button-label-font-size-large);
115
116
  @property st-global(--wds-button-outline-hover);
116
117
  @property st-global(--wds-button-padding-horizontal-extra-large);
@@ -1070,6 +1071,7 @@
1070
1071
  @property st-global(--wds-section-helper-prefix-offset-medium);
1071
1072
  @property st-global(--wds-section-helper-text-font-line-height);
1072
1073
  @property st-global(--wds-section-helper-text-font-size);
1074
+ @property st-global(--wds-segmented-toggle-background-fill);
1073
1075
  @property st-global(--wds-segmented-toggle-border-hover);
1074
1076
  @property st-global(--wds-segmented-toggle-border-radius-medium);
1075
1077
  @property st-global(--wds-segmented-toggle-border-radius-small);
@@ -1405,10 +1407,24 @@
1405
1407
  @property st-global(--wds-toggle-button-fill-inverted-selected);
1406
1408
  @property st-global(--wds-toggle-button-fill-inverted-selected-disabled);
1407
1409
  @property st-global(--wds-toggle-button-fill-inverted-selected-hover);
1410
+ @property st-global(--wds-toggle-button-fill-standard);
1411
+ @property st-global(--wds-toggle-button-fill-standard-disabled);
1412
+ @property st-global(--wds-toggle-button-fill-standard-hover);
1413
+ @property st-global(--wds-toggle-button-fill-standard-selected);
1414
+ @property st-global(--wds-toggle-button-fill-standard-selected-disabled);
1415
+ @property st-global(--wds-toggle-button-fill-standard-selected-hover);
1416
+ @property st-global(--wds-toggle-button-label-fill-standard-default);
1417
+ @property st-global(--wds-toggle-button-label-fill-standard-disabled);
1418
+ @property st-global(--wds-toggle-button-label-fill-standard-hover);
1419
+ @property st-global(--wds-toggle-button-label-fill-standard-selected);
1420
+ @property st-global(--wds-toggle-button-label-fill-standard-selected-disabled);
1408
1421
  @property st-global(--wds-toggle-button-label-font-line-height-pill-small);
1409
1422
  @property st-global(--wds-toggle-button-label-font-size-pill-small);
1410
- @property st-global(--wds-toggle-button-label-font-weight);
1411
- @property st-global(--wds-toggle-button-label-font-weight-round);
1423
+ @property st-global(--wds-toggle-button-label-font-size-square-large);
1424
+ @property st-global(--wds-toggle-button-label-font-size-square-medium);
1425
+ @property st-global(--wds-toggle-button-label-font-size-square-small);
1426
+ @property st-global(--wds-toggle-button-label-font-size-square-tiny);
1427
+ @property st-global(--wds-toggle-button-label-font-weight-pill);
1412
1428
  @property st-global(--wds-toggle-button-label-font-weight-square);
1413
1429
  @property st-global(--wds-toggle-button-padding-horizontal-large);
1414
1430
  @property st-global(--wds-toggle-button-padding-horizontal-large-round);
@@ -1418,6 +1434,7 @@
1418
1434
  @property st-global(--wds-toggle-button-padding-horizontal-small-round);
1419
1435
  @property st-global(--wds-toggle-button-padding-horizontal-tiny);
1420
1436
  @property st-global(--wds-toggle-button-padding-horizontal-tiny-round);
1437
+ @property st-global(--wds-toggle-button-padding-large);
1421
1438
  @property st-global(--wds-toggle-button-padding-left-large);
1422
1439
  @property st-global(--wds-toggle-button-padding-left-large-round);
1423
1440
  @property st-global(--wds-toggle-button-padding-left-medium);
@@ -1426,6 +1443,7 @@
1426
1443
  @property st-global(--wds-toggle-button-padding-left-small-round);
1427
1444
  @property st-global(--wds-toggle-button-padding-left-tiny);
1428
1445
  @property st-global(--wds-toggle-button-padding-left-tiny-round);
1446
+ @property st-global(--wds-toggle-button-padding-medium);
1429
1447
  @property st-global(--wds-toggle-button-padding-right-large);
1430
1448
  @property st-global(--wds-toggle-button-padding-right-large-round);
1431
1449
  @property st-global(--wds-toggle-button-padding-right-medium);
@@ -1434,6 +1452,8 @@
1434
1452
  @property st-global(--wds-toggle-button-padding-right-small-round);
1435
1453
  @property st-global(--wds-toggle-button-padding-right-tiny);
1436
1454
  @property st-global(--wds-toggle-button-padding-right-tiny-round);
1455
+ @property st-global(--wds-toggle-button-padding-small);
1456
+ @property st-global(--wds-toggle-button-padding-tiny);
1437
1457
  @property st-global(--wds-toggle-switch-border-error-disabled);
1438
1458
  @property st-global(--wds-toggle-switch-border-standard-disabled);
1439
1459
  @property st-global(--wds-toggle-switch-border-success-disabled);
@@ -1666,6 +1686,7 @@
1666
1686
  --wds-button-icon-offset-medium: 18px;
1667
1687
  --wds-button-icon-offset-small: 12px;
1668
1688
  --wds-button-icon-offset-tiny: 12px;
1689
+ --wds-button-label-fill-transparent-tertiary: #ffffff;
1669
1690
  --wds-button-label-font-size-large: 16px;
1670
1691
  --wds-button-outline-hover: #e2e3ea;
1671
1692
  --wds-button-padding-horizontal-extra-large: 20px;
@@ -2625,6 +2646,7 @@
2625
2646
  --wds-section-helper-prefix-offset-medium: 16px;
2626
2647
  --wds-section-helper-text-font-line-height: 16px;
2627
2648
  --wds-section-helper-text-font-size: 12px;
2649
+ --wds-segmented-toggle-background-fill: #ffffff;
2628
2650
  --wds-segmented-toggle-border-hover: #868aa5;
2629
2651
  --wds-segmented-toggle-border-radius-medium: 4px;
2630
2652
  --wds-segmented-toggle-border-radius-small: 4px;
@@ -2960,10 +2982,24 @@
2960
2982
  --wds-toggle-button-fill-inverted-selected: #116dff;
2961
2983
  --wds-toggle-button-fill-inverted-selected-disabled: #bebebe;
2962
2984
  --wds-toggle-button-fill-inverted-selected-hover: #0f62e6;
2963
- --wds-toggle-button-label-font-line-height-pill-small: 20px;
2964
- --wds-toggle-button-label-font-size-pill-small: 14px;
2965
- --wds-toggle-button-label-font-weight: 400;
2966
- --wds-toggle-button-label-font-weight-round: 400;
2985
+ --wds-toggle-button-fill-standard: #ffffff;
2986
+ --wds-toggle-button-fill-standard-disabled: #ffffff;
2987
+ --wds-toggle-button-fill-standard-hover: #f7f8f8;
2988
+ --wds-toggle-button-fill-standard-selected: #dce9ff;
2989
+ --wds-toggle-button-fill-standard-selected-disabled: #bebebe;
2990
+ --wds-toggle-button-fill-standard-selected-hover: #c3daff;
2991
+ --wds-toggle-button-label-fill-standard-default: #131720;
2992
+ --wds-toggle-button-label-fill-standard-disabled: #bebebe;
2993
+ --wds-toggle-button-label-fill-standard-hover: #131720;
2994
+ --wds-toggle-button-label-fill-standard-selected: #116dff;
2995
+ --wds-toggle-button-label-fill-standard-selected-disabled: rgba(255, 255, 255, .7);
2996
+ --wds-toggle-button-label-font-line-height-pill-small: 16px;
2997
+ --wds-toggle-button-label-font-size-pill-small: 12px;
2998
+ --wds-toggle-button-label-font-size-square-large: 12px;
2999
+ --wds-toggle-button-label-font-size-square-medium: 12px;
3000
+ --wds-toggle-button-label-font-size-square-small: 12px;
3001
+ --wds-toggle-button-label-font-size-square-tiny: 12px;
3002
+ --wds-toggle-button-label-font-weight-pill: 400;
2967
3003
  --wds-toggle-button-label-font-weight-square: 400;
2968
3004
  --wds-toggle-button-padding-horizontal-large: 16px;
2969
3005
  --wds-toggle-button-padding-horizontal-large-round: 16px;
@@ -2973,6 +3009,7 @@
2973
3009
  --wds-toggle-button-padding-horizontal-small-round: 16px;
2974
3010
  --wds-toggle-button-padding-horizontal-tiny: 6px;
2975
3011
  --wds-toggle-button-padding-horizontal-tiny-round: 12px;
3012
+ --wds-toggle-button-padding-large: 16px;
2976
3013
  --wds-toggle-button-padding-left-large: 8px;
2977
3014
  --wds-toggle-button-padding-left-large-round: 12px;
2978
3015
  --wds-toggle-button-padding-left-medium: 6px;
@@ -2981,6 +3018,7 @@
2981
3018
  --wds-toggle-button-padding-left-small-round: 12px;
2982
3019
  --wds-toggle-button-padding-left-tiny: 4px;
2983
3020
  --wds-toggle-button-padding-left-tiny-round: 6px;
3021
+ --wds-toggle-button-padding-medium: 12px;
2984
3022
  --wds-toggle-button-padding-right-large: 16px;
2985
3023
  --wds-toggle-button-padding-right-large-round: 16px;
2986
3024
  --wds-toggle-button-padding-right-medium: 12px;
@@ -2989,6 +3027,8 @@
2989
3027
  --wds-toggle-button-padding-right-small-round: 16px;
2990
3028
  --wds-toggle-button-padding-right-tiny: 6px;
2991
3029
  --wds-toggle-button-padding-right-tiny-round: 12px;
3030
+ --wds-toggle-button-padding-small: 12px;
3031
+ --wds-toggle-button-padding-tiny: 6px;
2992
3032
  --wds-toggle-switch-border-error-disabled: rgba(19, 23, 32, 0);
2993
3033
  --wds-toggle-switch-border-standard-disabled: rgba(19, 23, 32, 0);
2994
3034
  --wds-toggle-switch-border-success-disabled: rgba(19, 23, 32, 0);
package/studio/component.st.css CHANGED
@@ -80,6 +80,7 @@
80
80
  @property st-global(--wds-button-icon-offset-medium);
81
81
  @property st-global(--wds-button-icon-offset-small);
82
82
  @property st-global(--wds-button-icon-offset-tiny);
83
+ @property st-global(--wds-button-label-fill-transparent-tertiary);
83
84
  @property st-global(--wds-button-label-font-size-large);
84
85
  @property st-global(--wds-button-outline-hover);
85
86
  @property st-global(--wds-button-padding-horizontal-extra-large);
@@ -539,6 +540,7 @@
539
540
  @property st-global(--wds-section-helper-prefix-offset-medium);
540
541
  @property st-global(--wds-section-helper-text-font-line-height);
541
542
  @property st-global(--wds-section-helper-text-font-size);
543
+ @property st-global(--wds-segmented-toggle-background-fill);
542
544
  @property st-global(--wds-segmented-toggle-border-hover);
543
545
  @property st-global(--wds-segmented-toggle-border-radius-medium);
544
546
  @property st-global(--wds-segmented-toggle-border-radius-small);
@@ -784,10 +786,24 @@
784
786
  @property st-global(--wds-toggle-button-fill-inverted-selected);
785
787
  @property st-global(--wds-toggle-button-fill-inverted-selected-disabled);
786
788
  @property st-global(--wds-toggle-button-fill-inverted-selected-hover);
789
+ @property st-global(--wds-toggle-button-fill-standard);
790
+ @property st-global(--wds-toggle-button-fill-standard-disabled);
791
+ @property st-global(--wds-toggle-button-fill-standard-hover);
792
+ @property st-global(--wds-toggle-button-fill-standard-selected);
793
+ @property st-global(--wds-toggle-button-fill-standard-selected-disabled);
794
+ @property st-global(--wds-toggle-button-fill-standard-selected-hover);
795
+ @property st-global(--wds-toggle-button-label-fill-standard-default);
796
+ @property st-global(--wds-toggle-button-label-fill-standard-disabled);
797
+ @property st-global(--wds-toggle-button-label-fill-standard-hover);
798
+ @property st-global(--wds-toggle-button-label-fill-standard-selected);
799
+ @property st-global(--wds-toggle-button-label-fill-standard-selected-disabled);
787
800
  @property st-global(--wds-toggle-button-label-font-line-height-pill-small);
788
801
  @property st-global(--wds-toggle-button-label-font-size-pill-small);
789
- @property st-global(--wds-toggle-button-label-font-weight);
790
- @property st-global(--wds-toggle-button-label-font-weight-round);
802
+ @property st-global(--wds-toggle-button-label-font-size-square-large);
803
+ @property st-global(--wds-toggle-button-label-font-size-square-medium);
804
+ @property st-global(--wds-toggle-button-label-font-size-square-small);
805
+ @property st-global(--wds-toggle-button-label-font-size-square-tiny);
806
+ @property st-global(--wds-toggle-button-label-font-weight-pill);
791
807
  @property st-global(--wds-toggle-button-label-font-weight-square);
792
808
  @property st-global(--wds-toggle-button-padding-horizontal-large);
793
809
  @property st-global(--wds-toggle-button-padding-horizontal-large-round);
@@ -797,6 +813,7 @@
797
813
  @property st-global(--wds-toggle-button-padding-horizontal-small-round);
798
814
  @property st-global(--wds-toggle-button-padding-horizontal-tiny);
799
815
  @property st-global(--wds-toggle-button-padding-horizontal-tiny-round);
816
+ @property st-global(--wds-toggle-button-padding-large);
800
817
  @property st-global(--wds-toggle-button-padding-left-large);
801
818
  @property st-global(--wds-toggle-button-padding-left-large-round);
802
819
  @property st-global(--wds-toggle-button-padding-left-medium);
@@ -805,6 +822,7 @@
805
822
  @property st-global(--wds-toggle-button-padding-left-small-round);
806
823
  @property st-global(--wds-toggle-button-padding-left-tiny);
807
824
  @property st-global(--wds-toggle-button-padding-left-tiny-round);
825
+ @property st-global(--wds-toggle-button-padding-medium);
808
826
  @property st-global(--wds-toggle-button-padding-right-large);
809
827
  @property st-global(--wds-toggle-button-padding-right-large-round);
810
828
  @property st-global(--wds-toggle-button-padding-right-medium);
@@ -813,6 +831,8 @@
813
831
  @property st-global(--wds-toggle-button-padding-right-small-round);
814
832
  @property st-global(--wds-toggle-button-padding-right-tiny);
815
833
  @property st-global(--wds-toggle-button-padding-right-tiny-round);
834
+ @property st-global(--wds-toggle-button-padding-small);
835
+ @property st-global(--wds-toggle-button-padding-tiny);
816
836
  @property st-global(--wds-toggle-switch-border-error-disabled);
817
837
  @property st-global(--wds-toggle-switch-border-standard-disabled);
818
838
  @property st-global(--wds-toggle-switch-border-success-disabled);
@@ -1012,6 +1032,7 @@
1012
1032
  --wds-button-icon-offset-medium: 18px;
1013
1033
  --wds-button-icon-offset-small: 12px;
1014
1034
  --wds-button-icon-offset-tiny: 12px;
1035
+ --wds-button-label-fill-transparent-tertiary: #ffffff;
1015
1036
  --wds-button-label-font-size-large: 16px;
1016
1037
  --wds-button-outline-hover: #e2e3ea;
1017
1038
  --wds-button-padding-horizontal-extra-large: 20px;
@@ -1471,6 +1492,7 @@
1471
1492
  --wds-section-helper-prefix-offset-medium: 16px;
1472
1493
  --wds-section-helper-text-font-line-height: 16px;
1473
1494
  --wds-section-helper-text-font-size: 12px;
1495
+ --wds-segmented-toggle-background-fill: #ffffff;
1474
1496
  --wds-segmented-toggle-border-hover: #868aa5;
1475
1497
  --wds-segmented-toggle-border-radius-medium: 4px;
1476
1498
  --wds-segmented-toggle-border-radius-small: 4px;
@@ -1716,10 +1738,24 @@
1716
1738
  --wds-toggle-button-fill-inverted-selected: #116dff;
1717
1739
  --wds-toggle-button-fill-inverted-selected-disabled: #bebebe;
1718
1740
  --wds-toggle-button-fill-inverted-selected-hover: #0f62e6;
1719
- --wds-toggle-button-label-font-line-height-pill-small: 20px;
1720
- --wds-toggle-button-label-font-size-pill-small: 14px;
1721
- --wds-toggle-button-label-font-weight: 400;
1722
- --wds-toggle-button-label-font-weight-round: 400;
1741
+ --wds-toggle-button-fill-standard: #ffffff;
1742
+ --wds-toggle-button-fill-standard-disabled: #ffffff;
1743
+ --wds-toggle-button-fill-standard-hover: #f7f8f8;
1744
+ --wds-toggle-button-fill-standard-selected: #dce9ff;
1745
+ --wds-toggle-button-fill-standard-selected-disabled: #bebebe;
1746
+ --wds-toggle-button-fill-standard-selected-hover: #c3daff;
1747
+ --wds-toggle-button-label-fill-standard-default: #131720;
1748
+ --wds-toggle-button-label-fill-standard-disabled: #bebebe;
1749
+ --wds-toggle-button-label-fill-standard-hover: #131720;
1750
+ --wds-toggle-button-label-fill-standard-selected: #116dff;
1751
+ --wds-toggle-button-label-fill-standard-selected-disabled: rgba(255, 255, 255, .7);
1752
+ --wds-toggle-button-label-font-line-height-pill-small: 16px;
1753
+ --wds-toggle-button-label-font-size-pill-small: 12px;
1754
+ --wds-toggle-button-label-font-size-square-large: 12px;
1755
+ --wds-toggle-button-label-font-size-square-medium: 12px;
1756
+ --wds-toggle-button-label-font-size-square-small: 12px;
1757
+ --wds-toggle-button-label-font-size-square-tiny: 12px;
1758
+ --wds-toggle-button-label-font-weight-pill: 400;
1723
1759
  --wds-toggle-button-label-font-weight-square: 400;
1724
1760
  --wds-toggle-button-padding-horizontal-large: 16px;
1725
1761
  --wds-toggle-button-padding-horizontal-large-round: 16px;
@@ -1729,6 +1765,7 @@
1729
1765
  --wds-toggle-button-padding-horizontal-small-round: 16px;
1730
1766
  --wds-toggle-button-padding-horizontal-tiny: 6px;
1731
1767
  --wds-toggle-button-padding-horizontal-tiny-round: 12px;
1768
+ --wds-toggle-button-padding-large: 16px;
1732
1769
  --wds-toggle-button-padding-left-large: 8px;
1733
1770
  --wds-toggle-button-padding-left-large-round: 12px;
1734
1771
  --wds-toggle-button-padding-left-medium: 6px;
@@ -1737,6 +1774,7 @@
1737
1774
  --wds-toggle-button-padding-left-small-round: 12px;
1738
1775
  --wds-toggle-button-padding-left-tiny: 4px;
1739
1776
  --wds-toggle-button-padding-left-tiny-round: 6px;
1777
+ --wds-toggle-button-padding-medium: 12px;
1740
1778
  --wds-toggle-button-padding-right-large: 16px;
1741
1779
  --wds-toggle-button-padding-right-large-round: 16px;
1742
1780
  --wds-toggle-button-padding-right-medium: 12px;
@@ -1745,6 +1783,8 @@
1745
1783
  --wds-toggle-button-padding-right-small-round: 16px;
1746
1784
  --wds-toggle-button-padding-right-tiny: 6px;
1747
1785
  --wds-toggle-button-padding-right-tiny-round: 12px;
1786
+ --wds-toggle-button-padding-small: 12px;
1787
+ --wds-toggle-button-padding-tiny: 6px;
1748
1788
  --wds-toggle-switch-border-error-disabled: rgba(19, 23, 32, 0);
1749
1789
  --wds-toggle-switch-border-standard-disabled: rgba(19, 23, 32, 0);
1750
1790
  --wds-toggle-switch-border-success-disabled: rgba(19, 23, 32, 0);
package/wixel/all.css CHANGED
@@ -725,6 +725,10 @@
725
725
  --wds-toggle-switch-border-success-disabled: var(--wds-color-black-100-transparent-0);
726
726
  --wds-toggle-switch-border-standard-disabled: var(--wds-color-black-100-transparent-0);
727
727
  --wds-toggle-switch-border-error-disabled: var(--wds-color-black-100-transparent-0);
728
+ --wds-toggle-button-padding-tiny: var(--wds-space-300);
729
+ --wds-toggle-button-padding-small: var(--wds-space-400);
730
+ --wds-toggle-button-padding-medium: var(--wds-space-500);
731
+ --wds-toggle-button-padding-large: var(--wds-space-600);
728
732
  --wds-toggle-button-padding-horizontal-tiny-round: var(--wds-space-300);
729
733
  --wds-toggle-button-padding-horizontal-tiny: var(--wds-space-300);
730
734
  --wds-toggle-button-padding-horizontal-small-round: var(--wds-space-400);
@@ -750,8 +754,8 @@
750
754
  --wds-toggle-button-padding-horizontal-large-round: var(--wds-space-600);
751
755
  --wds-toggle-button-padding-horizontal-large: var(--wds-space-600);
752
756
  --wds-toggle-button-label-font-weight-square: var(--wds-font-weight-semi-bold);
753
- --wds-toggle-button-label-font-weight-round: var(--wds-font-weight-regular);
754
- --wds-toggle-button-label-font-weight: var(--wds-font-weight-semi-bold);
757
+ --wds-toggle-button-label-font-weight-pill: var(--wds-font-weight-regular);
758
+ --wds-toggle-button-fill-standard-selected-disabled: var(--wds-color-fill-standard-primary-disabled);
755
759
  --wds-toggle-button-fill-inverted-selected-disabled: var(--wds-color-fill-standard-primary-disabled);
756
760
  --wds-toggle-button-fill-inverted-disabled: var(--wds-color-fill-standard-secondary-disabled);
757
761
  --wds-toggle-button-border-radius-square-tiny: var(--wds-border-radius-400);
@@ -1332,7 +1336,21 @@
1332
1336
  --wds-toggle-switch-fill-error-active-hover: var(--wds-color-fill-destructive-primary-hover);
1333
1337
  --wds-toggle-switch-fill-error-active: var(--wds-color-fill-destructive-primary);
1334
1338
  --wds-toggle-switch-fill-error: var(--wds-color-fill-dark-primary);
1339
+ --wds-toggle-button-label-font-size-square-tiny: var(--wds-font-size-body-tiny);
1340
+ --wds-toggle-button-label-font-size-square-small: var(--wds-font-size-body-tiny);
1341
+ --wds-toggle-button-label-font-size-square-medium: var(--wds-font-size-body-tiny);
1342
+ --wds-toggle-button-label-font-size-square-large: var(--wds-font-size-body-tiny);
1335
1343
  --wds-toggle-button-label-font-size-pill-small: var(--wds-font-size-body-tiny);
1344
+ --wds-toggle-button-label-fill-standard-selected-disabled: var(--wds-color-text-disabled-light);
1345
+ --wds-toggle-button-label-fill-standard-selected: var(--wds-color-text-primary);
1346
+ --wds-toggle-button-label-fill-standard-hover: var(--wds-color-text-standard-primary);
1347
+ --wds-toggle-button-label-fill-standard-disabled: var(--wds-color-text-disabled);
1348
+ --wds-toggle-button-label-fill-standard-default: var(--wds-color-text-standard-primary);
1349
+ --wds-toggle-button-fill-standard-selected-hover: var(--wds-color-fill-standard-secondary-hover);
1350
+ --wds-toggle-button-fill-standard-selected: var(--wds-color-fill-standard-secondary);
1351
+ --wds-toggle-button-fill-standard-hover: var(--wds-color-fill-standard-tertiary-hover);
1352
+ --wds-toggle-button-fill-standard-disabled: var(--wds-color-fill-standard-tertiary-disabled);
1353
+ --wds-toggle-button-fill-standard: var(--wds-color-fill-standard-tertiary);
1336
1354
  --wds-toggle-button-fill-inverted-selected-hover: var(--wds-color-fill-standard-primary-hover);
1337
1355
  --wds-toggle-button-fill-inverted-selected: var(--wds-color-fill-standard-primary);
1338
1356
  --wds-toggle-button-fill-inverted-hover: var(--wds-color-fill-standard-secondary-hover);
@@ -1373,6 +1391,7 @@
1373
1391
  --wds-segmented-toggle-fill-hover: var(--wds-color-fill-standard-secondary-hover);
1374
1392
  --wds-segmented-toggle-fill-default: var(--wds-color-fill-standard-secondary);
1375
1393
  --wds-segmented-toggle-border-hover: var(--wds-color-fill-standard-secondary-hover);
1394
+ --wds-segmented-toggle-background-fill: var(--wds-color-fill-standard-secondary);
1376
1395
  --wds-section-helper-text-font-size: var(--wds-font-size-body-tiny);
1377
1396
  --wds-radio-label-font-size-small: var(--wds-font-size-body-tiny);
1378
1397
  --wds-radio-label-font-size-medium: var(--wds-font-size-body-small);
@@ -1493,6 +1512,7 @@
1493
1512
  --wds-card-gallery-item-fill: var(--wds-color-fill-standard-secondary);
1494
1513
  --wds-button-text-hover: var(--wds-color-text-standard-primary-light);
1495
1514
  --wds-button-label-font-size-large: var(--wds-font-size-body-small);
1515
+ --wds-button-label-fill-transparent-tertiary: var(--wds-color-text-standard-primary-light);
1496
1516
  --wds-button-font-size-tiny: var(--wds-font-size-body-extra-tiny);
1497
1517
  --wds-button-font-size-small: var(--wds-font-size-body-tiny);
1498
1518
  --wds-button-font-size-medium: var(--wds-font-size-body-small);
package/wixel/all.st.css CHANGED
@@ -111,6 +111,7 @@
111
111
  @property st-global(--wds-button-icon-offset-medium);
112
112
  @property st-global(--wds-button-icon-offset-small);
113
113
  @property st-global(--wds-button-icon-offset-tiny);
114
+ @property st-global(--wds-button-label-fill-transparent-tertiary);
114
115
  @property st-global(--wds-button-label-font-size-large);
115
116
  @property st-global(--wds-button-outline-hover);
116
117
  @property st-global(--wds-button-padding-horizontal-extra-large);
@@ -1080,6 +1081,7 @@
1080
1081
  @property st-global(--wds-section-helper-text-font-size);
1081
1082
  @property st-global(--wds-section-helper-vertical-margin);
1082
1083
  @property st-global(--wds-section-helper-vertical-padding-medium);
1084
+ @property st-global(--wds-segmented-toggle-background-fill);
1083
1085
  @property st-global(--wds-segmented-toggle-border-hover);
1084
1086
  @property st-global(--wds-segmented-toggle-border-radius-medium);
1085
1087
  @property st-global(--wds-segmented-toggle-border-radius-small);
@@ -1414,10 +1416,24 @@
1414
1416
  @property st-global(--wds-toggle-button-fill-inverted-selected);
1415
1417
  @property st-global(--wds-toggle-button-fill-inverted-selected-disabled);
1416
1418
  @property st-global(--wds-toggle-button-fill-inverted-selected-hover);
1419
+ @property st-global(--wds-toggle-button-fill-standard);
1420
+ @property st-global(--wds-toggle-button-fill-standard-disabled);
1421
+ @property st-global(--wds-toggle-button-fill-standard-hover);
1422
+ @property st-global(--wds-toggle-button-fill-standard-selected);
1423
+ @property st-global(--wds-toggle-button-fill-standard-selected-disabled);
1424
+ @property st-global(--wds-toggle-button-fill-standard-selected-hover);
1425
+ @property st-global(--wds-toggle-button-label-fill-standard-default);
1426
+ @property st-global(--wds-toggle-button-label-fill-standard-disabled);
1427
+ @property st-global(--wds-toggle-button-label-fill-standard-hover);
1428
+ @property st-global(--wds-toggle-button-label-fill-standard-selected);
1429
+ @property st-global(--wds-toggle-button-label-fill-standard-selected-disabled);
1417
1430
  @property st-global(--wds-toggle-button-label-font-line-height-pill-small);
1418
1431
  @property st-global(--wds-toggle-button-label-font-size-pill-small);
1419
- @property st-global(--wds-toggle-button-label-font-weight);
1420
- @property st-global(--wds-toggle-button-label-font-weight-round);
1432
+ @property st-global(--wds-toggle-button-label-font-size-square-large);
1433
+ @property st-global(--wds-toggle-button-label-font-size-square-medium);
1434
+ @property st-global(--wds-toggle-button-label-font-size-square-small);
1435
+ @property st-global(--wds-toggle-button-label-font-size-square-tiny);
1436
+ @property st-global(--wds-toggle-button-label-font-weight-pill);
1421
1437
  @property st-global(--wds-toggle-button-label-font-weight-square);
1422
1438
  @property st-global(--wds-toggle-button-padding-horizontal-large);
1423
1439
  @property st-global(--wds-toggle-button-padding-horizontal-large-round);
@@ -1443,6 +1459,10 @@
1443
1459
  @property st-global(--wds-toggle-button-padding-horizontal-small-round);
1444
1460
  @property st-global(--wds-toggle-button-padding-horizontal-tiny);
1445
1461
  @property st-global(--wds-toggle-button-padding-horizontal-tiny-round);
1462
+ @property st-global(--wds-toggle-button-padding-large);
1463
+ @property st-global(--wds-toggle-button-padding-medium);
1464
+ @property st-global(--wds-toggle-button-padding-small);
1465
+ @property st-global(--wds-toggle-button-padding-tiny);
1446
1466
  @property st-global(--wds-toggle-switch-border-error-disabled);
1447
1467
  @property st-global(--wds-toggle-switch-border-standard-disabled);
1448
1468
  @property st-global(--wds-toggle-switch-border-success-disabled);
@@ -1675,6 +1695,7 @@
1675
1695
  --wds-button-icon-offset-medium: 18px;
1676
1696
  --wds-button-icon-offset-small: 12px;
1677
1697
  --wds-button-icon-offset-tiny: 12px;
1698
+ --wds-button-label-fill-transparent-tertiary: #ffffff;
1678
1699
  --wds-button-label-font-size-large: 14px;
1679
1700
  --wds-button-outline-hover: transparent;
1680
1701
  --wds-button-padding-horizontal-extra-large: 24px;
@@ -2644,6 +2665,7 @@
2644
2665
  --wds-section-helper-text-font-size: 12px;
2645
2666
  --wds-section-helper-vertical-margin: 6px;
2646
2667
  --wds-section-helper-vertical-padding-medium: 12px;
2668
+ --wds-segmented-toggle-background-fill: #eef0ff;
2647
2669
  --wds-segmented-toggle-border-hover: #d6dcff;
2648
2670
  --wds-segmented-toggle-border-radius-medium: 8px;
2649
2671
  --wds-segmented-toggle-border-radius-small: 8px;
@@ -2978,10 +3000,24 @@
2978
3000
  --wds-toggle-button-fill-inverted-selected: #526cff;
2979
3001
  --wds-toggle-button-fill-inverted-selected-disabled: #bebebe;
2980
3002
  --wds-toggle-button-fill-inverted-selected-hover: #4c49fb;
3003
+ --wds-toggle-button-fill-standard: #ffffff;
3004
+ --wds-toggle-button-fill-standard-disabled: #ffffff;
3005
+ --wds-toggle-button-fill-standard-hover: #f4f6ff;
3006
+ --wds-toggle-button-fill-standard-selected: #eef0ff;
3007
+ --wds-toggle-button-fill-standard-selected-disabled: #bebebe;
3008
+ --wds-toggle-button-fill-standard-selected-hover: #d6dcff;
3009
+ --wds-toggle-button-label-fill-standard-default: #131720;
3010
+ --wds-toggle-button-label-fill-standard-disabled: rgba(38, 37, 36, 0.3000);
3011
+ --wds-toggle-button-label-fill-standard-hover: #131720;
3012
+ --wds-toggle-button-label-fill-standard-selected: #526cff;
3013
+ --wds-toggle-button-label-fill-standard-selected-disabled: rgba(255, 255, 255, 0.7000);
2981
3014
  --wds-toggle-button-label-font-line-height-pill-small: 16px;
2982
3015
  --wds-toggle-button-label-font-size-pill-small: 12px;
2983
- --wds-toggle-button-label-font-weight: 600;
2984
- --wds-toggle-button-label-font-weight-round: 400;
3016
+ --wds-toggle-button-label-font-size-square-large: 12px;
3017
+ --wds-toggle-button-label-font-size-square-medium: 12px;
3018
+ --wds-toggle-button-label-font-size-square-small: 12px;
3019
+ --wds-toggle-button-label-font-size-square-tiny: 12px;
3020
+ --wds-toggle-button-label-font-weight-pill: 400;
2985
3021
  --wds-toggle-button-label-font-weight-square: 600;
2986
3022
  --wds-toggle-button-padding-horizontal-large: 24px;
2987
3023
  --wds-toggle-button-padding-horizontal-large-round: 24px;
@@ -3007,6 +3043,10 @@
3007
3043
  --wds-toggle-button-padding-horizontal-small-round: 16px;
3008
3044
  --wds-toggle-button-padding-horizontal-tiny: 12px;
3009
3045
  --wds-toggle-button-padding-horizontal-tiny-round: 12px;
3046
+ --wds-toggle-button-padding-large: 24px;
3047
+ --wds-toggle-button-padding-medium: 20px;
3048
+ --wds-toggle-button-padding-small: 16px;
3049
+ --wds-toggle-button-padding-tiny: 12px;
3010
3050
  --wds-toggle-switch-border-error-disabled: rgba(38, 37, 36, 0.0000);
3011
3051
  --wds-toggle-switch-border-standard-disabled: rgba(38, 37, 36, 0.0000);
3012
3052
  --wds-toggle-switch-border-success-disabled: rgba(38, 37, 36, 0.0000);
package/wixel/component.st.css CHANGED
@@ -80,6 +80,7 @@
80
80
  @property st-global(--wds-button-icon-offset-medium);
81
81
  @property st-global(--wds-button-icon-offset-small);
82
82
  @property st-global(--wds-button-icon-offset-tiny);
83
+ @property st-global(--wds-button-label-fill-transparent-tertiary);
83
84
  @property st-global(--wds-button-label-font-size-large);
84
85
  @property st-global(--wds-button-outline-hover);
85
86
  @property st-global(--wds-button-padding-horizontal-extra-large);
@@ -545,6 +546,7 @@
545
546
  @property st-global(--wds-section-helper-text-font-size);
546
547
  @property st-global(--wds-section-helper-vertical-margin);
547
548
  @property st-global(--wds-section-helper-vertical-padding-medium);
549
+ @property st-global(--wds-segmented-toggle-background-fill);
548
550
  @property st-global(--wds-segmented-toggle-border-hover);
549
551
  @property st-global(--wds-segmented-toggle-border-radius-medium);
550
552
  @property st-global(--wds-segmented-toggle-border-radius-small);
@@ -789,10 +791,24 @@
789
791
  @property st-global(--wds-toggle-button-fill-inverted-selected);
790
792
  @property st-global(--wds-toggle-button-fill-inverted-selected-disabled);
791
793
  @property st-global(--wds-toggle-button-fill-inverted-selected-hover);
794
+ @property st-global(--wds-toggle-button-fill-standard);
795
+ @property st-global(--wds-toggle-button-fill-standard-disabled);
796
+ @property st-global(--wds-toggle-button-fill-standard-hover);
797
+ @property st-global(--wds-toggle-button-fill-standard-selected);
798
+ @property st-global(--wds-toggle-button-fill-standard-selected-disabled);
799
+ @property st-global(--wds-toggle-button-fill-standard-selected-hover);
800
+ @property st-global(--wds-toggle-button-label-fill-standard-default);
801
+ @property st-global(--wds-toggle-button-label-fill-standard-disabled);
802
+ @property st-global(--wds-toggle-button-label-fill-standard-hover);
803
+ @property st-global(--wds-toggle-button-label-fill-standard-selected);
804
+ @property st-global(--wds-toggle-button-label-fill-standard-selected-disabled);
792
805
  @property st-global(--wds-toggle-button-label-font-line-height-pill-small);
793
806
  @property st-global(--wds-toggle-button-label-font-size-pill-small);
794
- @property st-global(--wds-toggle-button-label-font-weight);
795
- @property st-global(--wds-toggle-button-label-font-weight-round);
807
+ @property st-global(--wds-toggle-button-label-font-size-square-large);
808
+ @property st-global(--wds-toggle-button-label-font-size-square-medium);
809
+ @property st-global(--wds-toggle-button-label-font-size-square-small);
810
+ @property st-global(--wds-toggle-button-label-font-size-square-tiny);
811
+ @property st-global(--wds-toggle-button-label-font-weight-pill);
796
812
  @property st-global(--wds-toggle-button-label-font-weight-square);
797
813
  @property st-global(--wds-toggle-button-padding-horizontal-large);
798
814
  @property st-global(--wds-toggle-button-padding-horizontal-large-round);
@@ -818,6 +834,10 @@
818
834
  @property st-global(--wds-toggle-button-padding-horizontal-small-round);
819
835
  @property st-global(--wds-toggle-button-padding-horizontal-tiny);
820
836
  @property st-global(--wds-toggle-button-padding-horizontal-tiny-round);
837
+ @property st-global(--wds-toggle-button-padding-large);
838
+ @property st-global(--wds-toggle-button-padding-medium);
839
+ @property st-global(--wds-toggle-button-padding-small);
840
+ @property st-global(--wds-toggle-button-padding-tiny);
821
841
  @property st-global(--wds-toggle-switch-border-error-disabled);
822
842
  @property st-global(--wds-toggle-switch-border-standard-disabled);
823
843
  @property st-global(--wds-toggle-switch-border-success-disabled);
@@ -1017,6 +1037,7 @@
1017
1037
  --wds-button-icon-offset-medium: 18px;
1018
1038
  --wds-button-icon-offset-small: 12px;
1019
1039
  --wds-button-icon-offset-tiny: 12px;
1040
+ --wds-button-label-fill-transparent-tertiary: #ffffff;
1020
1041
  --wds-button-label-font-size-large: 14px;
1021
1042
  --wds-button-outline-hover: transparent;
1022
1043
  --wds-button-padding-horizontal-extra-large: 24px;
@@ -1482,6 +1503,7 @@
1482
1503
  --wds-section-helper-text-font-size: 12px;
1483
1504
  --wds-section-helper-vertical-margin: 6px;
1484
1505
  --wds-section-helper-vertical-padding-medium: 12px;
1506
+ --wds-segmented-toggle-background-fill: #eef0ff;
1485
1507
  --wds-segmented-toggle-border-hover: #d6dcff;
1486
1508
  --wds-segmented-toggle-border-radius-medium: 8px;
1487
1509
  --wds-segmented-toggle-border-radius-small: 8px;
@@ -1726,10 +1748,24 @@
1726
1748
  --wds-toggle-button-fill-inverted-selected: #526cff;
1727
1749
  --wds-toggle-button-fill-inverted-selected-disabled: #bebebe;
1728
1750
  --wds-toggle-button-fill-inverted-selected-hover: #4c49fb;
1751
+ --wds-toggle-button-fill-standard: #ffffff;
1752
+ --wds-toggle-button-fill-standard-disabled: #ffffff;
1753
+ --wds-toggle-button-fill-standard-hover: #f4f6ff;
1754
+ --wds-toggle-button-fill-standard-selected: #eef0ff;
1755
+ --wds-toggle-button-fill-standard-selected-disabled: #bebebe;
1756
+ --wds-toggle-button-fill-standard-selected-hover: #d6dcff;
1757
+ --wds-toggle-button-label-fill-standard-default: #131720;
1758
+ --wds-toggle-button-label-fill-standard-disabled: rgba(38, 37, 36, 0.3000);
1759
+ --wds-toggle-button-label-fill-standard-hover: #131720;
1760
+ --wds-toggle-button-label-fill-standard-selected: #526cff;
1761
+ --wds-toggle-button-label-fill-standard-selected-disabled: rgba(255, 255, 255, 0.7000);
1729
1762
  --wds-toggle-button-label-font-line-height-pill-small: 16px;
1730
1763
  --wds-toggle-button-label-font-size-pill-small: 12px;
1731
- --wds-toggle-button-label-font-weight: 600;
1732
- --wds-toggle-button-label-font-weight-round: 400;
1764
+ --wds-toggle-button-label-font-size-square-large: 12px;
1765
+ --wds-toggle-button-label-font-size-square-medium: 12px;
1766
+ --wds-toggle-button-label-font-size-square-small: 12px;
1767
+ --wds-toggle-button-label-font-size-square-tiny: 12px;
1768
+ --wds-toggle-button-label-font-weight-pill: 400;
1733
1769
  --wds-toggle-button-label-font-weight-square: 600;
1734
1770
  --wds-toggle-button-padding-horizontal-large: 24px;
1735
1771
  --wds-toggle-button-padding-horizontal-large-round: 24px;
@@ -1755,6 +1791,10 @@
1755
1791
  --wds-toggle-button-padding-horizontal-small-round: 16px;
1756
1792
  --wds-toggle-button-padding-horizontal-tiny: 12px;
1757
1793
  --wds-toggle-button-padding-horizontal-tiny-round: 12px;
1794
+ --wds-toggle-button-padding-large: 24px;
1795
+ --wds-toggle-button-padding-medium: 20px;
1796
+ --wds-toggle-button-padding-small: 16px;
1797
+ --wds-toggle-button-padding-tiny: 12px;
1758
1798
  --wds-toggle-switch-border-error-disabled: rgba(38, 37, 36, 0.0000);
1759
1799
  --wds-toggle-switch-border-standard-disabled: rgba(38, 37, 36, 0.0000);
1760
1800
  --wds-toggle-switch-border-success-disabled: rgba(38, 37, 36, 0.0000);