@wix/design-system-tokens 1.113.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 (14) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/all.css +25 -1
  3. package/all.st.css +50 -2
  4. package/component.st.css +48 -2
  5. package/package.json +2 -2
  6. package/semantic.st.css +2 -0
  7. package/studio/all.css +28 -4
  8. package/studio/all.st.css +54 -6
  9. package/studio/component.st.css +52 -6
  10. package/studio/semantic.st.css +2 -0
  11. package/wixel/all.css +26 -2
  12. package/wixel/all.st.css +52 -4
  13. package/wixel/component.st.css +50 -4
  14. package/wixel/semantic.st.css +2 -0
package/CHANGELOG.md CHANGED
@@ -1,3 +1,16 @@
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
+
7
+ ## 1.114.0 - 2025-06-17
8
+
9
+ ### Features
10
+
11
+ - feat(tokens): add & implement new token for modal padding [14988](https://github.com/wix-private/wix-design-systems/pull/14988)
12
+ - feat(tokens): new component-level token for Table List item [14985](https://github.com/wix-private/wix-design-systems/pull/14985)
13
+
1
14
  ## 1.113.0 - 2025-06-13
2
15
 
3
16
  ### Features
package/all.css CHANGED
@@ -311,6 +311,7 @@
311
311
  --wds-border-radius-surface-modal-backdrop: var(--wds-border-radius-0);
312
312
  --wds-border-radius-surface-modal: var(--wds-border-radius-400);
313
313
  --wds-border-radius-surface-default: var(--wds-border-radius-400);
314
+ --wds-space-viewport-spacing: var(--wds-space-800);
314
315
  --wds-space-padding-vertical-xx-tiny: var(--wds-space-50);
315
316
  --wds-space-padding-vertical-x-tiny: var(--wds-space-100);
316
317
  --wds-space-padding-vertical-tiny: var(--wds-space-200);
@@ -715,6 +716,8 @@
715
716
  --wds-tooltip-border-radius-medium: var(--wds-border-radius-400);
716
717
  --wds-tooltip-border-radius: var(--wds-border-radius-400);
717
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);
718
721
  --wds-toggle-button-padding-right-tiny-round: var(--wds-space-200);
719
722
  --wds-toggle-button-padding-right-tiny: var(--wds-space-100);
720
723
  --wds-toggle-button-padding-right-small-round: var(--wds-space-300);
@@ -723,6 +726,7 @@
723
726
  --wds-toggle-button-padding-right-medium: var(--wds-space-200);
724
727
  --wds-toggle-button-padding-right-large-round: var(--wds-space-500);
725
728
  --wds-toggle-button-padding-right-large: var(--wds-space-300);
729
+ --wds-toggle-button-padding-medium: var(--wds-space-200);
726
730
  --wds-toggle-button-padding-left-tiny-round: var(--wds-space-100);
727
731
  --wds-toggle-button-padding-left-tiny: var(--wds-space-50);
728
732
  --wds-toggle-button-padding-left-small-round: var(--wds-space-200);
@@ -731,9 +735,9 @@
731
735
  --wds-toggle-button-padding-left-medium: var(--wds-space-100);
732
736
  --wds-toggle-button-padding-left-large-round: var(--wds-space-200);
733
737
  --wds-toggle-button-padding-left-large: var(--wds-space-150);
738
+ --wds-toggle-button-padding-large: var(--wds-space-300);
734
739
  --wds-toggle-button-label-font-weight-square: var(--wds-font-weight-regular);
735
740
  --wds-toggle-button-label-font-weight-pill: var(--wds-font-weight-regular);
736
- --wds-toggle-button-label-font-weight: var(--wds-font-weight-regular);
737
741
  --wds-toggle-button-border-radius-square-tiny: var(--wds-border-radius-200);
738
742
  --wds-toggle-button-border-radius-square-small: var(--wds-border-radius-200);
739
743
  --wds-toggle-button-border-radius-square-medium: var(--wds-border-radius-300);
@@ -1294,7 +1298,22 @@
1294
1298
  --wds-toggle-switch-border-success-disabled: var(--wds-color-border-success-secondary-disabled);
1295
1299
  --wds-toggle-switch-border-standard-disabled: var(--wds-color-border-standard-secondary-disabled);
1296
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);
1297
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);
1298
1317
  --wds-toggle-button-fill-inverted-selected-hover: var(--wds-color-fill-standard-primary-hover);
1299
1318
  --wds-toggle-button-fill-inverted-selected-disabled: var(--wds-color-fill-standard-primary-disabled);
1300
1319
  --wds-toggle-button-fill-inverted-selected: var(--wds-color-fill-standard-primary);
@@ -1310,6 +1329,9 @@
1310
1329
  --wds-tabs-selection-fill-secondary: var(--wds-color-fill-standard-primary);
1311
1330
  --wds-tabs-selection-fill-primary: var(--wds-color-fill-standard-primary);
1312
1331
  --wds-tabs-label-font-size-small: var(--wds-font-size-body-small);
1332
+ --wds-table-list-item-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
1333
+ --wds-table-list-item-fill-active: var(--wds-color-fill-standard-tertiary-active);
1334
+ --wds-table-list-item-fill: var(--wds-color-fill-standard-tertiary);
1313
1335
  --wds-status-toast-text-font-size: var(--wds-font-size-body-medium);
1314
1336
  --wds-status-toast-text-fill: var(--wds-color-text-standard-primary-light);
1315
1337
  --wds-status-toast-info-icon-fill: var(--wds-color-text-standard-primary-light);
@@ -1334,6 +1356,7 @@
1334
1356
  --wds-segmented-toggle-fill-disabled: var(--wds-color-fill-standard-tertiary-disabled);
1335
1357
  --wds-segmented-toggle-fill-default: var(--wds-color-fill-standard-tertiary);
1336
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);
1337
1360
  --wds-section-helper-text-font-line-height: var(--wds-font-line-height-200);
1338
1361
  --wds-section-helper-fill-preview: var(--wds-color-fill-surface-neutral);
1339
1362
  --wds-section-helper-border-preview: var(--wds-color-border-dark-primary);
@@ -1482,6 +1505,7 @@
1482
1505
  --wds-card-gallery-item-fill: var(--wds-color-fill-surface-default);
1483
1506
  --wds-button-text-hover: var(--wds-color-text-standard-primary-light);
1484
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);
1485
1509
  --wds-button-font-size-tiny: var(--wds-font-size-body-tiny);
1486
1510
  --wds-button-font-size-small: var(--wds-font-size-body-small);
1487
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);
@@ -1328,6 +1330,7 @@
1328
1330
  @property st-global(--wds-space-padding-vertical-tiny);
1329
1331
  @property st-global(--wds-space-padding-vertical-x-tiny);
1330
1332
  @property st-global(--wds-space-padding-vertical-xx-tiny);
1333
+ @property st-global(--wds-space-viewport-spacing);
1331
1334
  @property st-global(--wds-status-toast-info-icon-fill);
1332
1335
  @property st-global(--wds-status-toast-text-fill);
1333
1336
  @property st-global(--wds-status-toast-text-font-line-height);
@@ -1349,6 +1352,9 @@
1349
1352
  @property st-global(--wds-swatches-swatch-size-tiny);
1350
1353
  @property st-global(--wds-swatches-swatch-size-x-tiny);
1351
1354
  @property st-global(--wds-table-list-item-border-radius);
1355
+ @property st-global(--wds-table-list-item-fill);
1356
+ @property st-global(--wds-table-list-item-fill-active);
1357
+ @property st-global(--wds-table-list-item-fill-hover);
1352
1358
  @property st-global(--wds-table-list-item-gap);
1353
1359
  @property st-global(--wds-table-list-item-indentation-level-2);
1354
1360
  @property st-global(--wds-table-list-item-indentation-level-3);
@@ -1413,11 +1419,26 @@
1413
1419
  @property st-global(--wds-toggle-button-fill-inverted-selected);
1414
1420
  @property st-global(--wds-toggle-button-fill-inverted-selected-disabled);
1415
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);
1416
1433
  @property st-global(--wds-toggle-button-label-font-line-height-pill-small);
1417
1434
  @property st-global(--wds-toggle-button-label-font-size-pill-small);
1418
- @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);
1419
1439
  @property st-global(--wds-toggle-button-label-font-weight-pill);
1420
1440
  @property st-global(--wds-toggle-button-label-font-weight-square);
1441
+ @property st-global(--wds-toggle-button-padding-large);
1421
1442
  @property st-global(--wds-toggle-button-padding-left-large);
1422
1443
  @property st-global(--wds-toggle-button-padding-left-large-round);
1423
1444
  @property st-global(--wds-toggle-button-padding-left-medium);
@@ -1426,6 +1447,7 @@
1426
1447
  @property st-global(--wds-toggle-button-padding-left-small-round);
1427
1448
  @property st-global(--wds-toggle-button-padding-left-tiny);
1428
1449
  @property st-global(--wds-toggle-button-padding-left-tiny-round);
1450
+ @property st-global(--wds-toggle-button-padding-medium);
1429
1451
  @property st-global(--wds-toggle-button-padding-right-large);
1430
1452
  @property st-global(--wds-toggle-button-padding-right-large-round);
1431
1453
  @property st-global(--wds-toggle-button-padding-right-medium);
@@ -1434,6 +1456,8 @@
1434
1456
  @property st-global(--wds-toggle-button-padding-right-small-round);
1435
1457
  @property st-global(--wds-toggle-button-padding-right-tiny);
1436
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);
1437
1461
  @property st-global(--wds-toggle-switch-border-error-disabled);
1438
1462
  @property st-global(--wds-toggle-switch-border-standard-disabled);
1439
1463
  @property st-global(--wds-toggle-switch-border-success-disabled);
@@ -1666,6 +1690,7 @@
1666
1690
  --wds-button-icon-offset-medium: 12px;
1667
1691
  --wds-button-icon-offset-small: 12px;
1668
1692
  --wds-button-icon-offset-tiny: 12px;
1693
+ --wds-button-label-fill-transparent-tertiary: #ffffff;
1669
1694
  --wds-button-label-font-size-large: 16px;
1670
1695
  --wds-button-outline-hover: transparent;
1671
1696
  --wds-button-padding-horizontal-extra-large: 36px;
@@ -2637,6 +2662,7 @@
2637
2662
  --wds-section-helper-text-font-size: 14px;
2638
2663
  --wds-section-helper-vertical-margin: 6px;
2639
2664
  --wds-section-helper-vertical-padding-medium: 18px;
2665
+ --wds-segmented-toggle-background-fill: #ffffff;
2640
2666
  --wds-segmented-toggle-border-hover: #a8caff;
2641
2667
  --wds-segmented-toggle-border-radius-medium: 6px;
2642
2668
  --wds-segmented-toggle-border-radius-small: 6px;
@@ -2883,6 +2909,7 @@
2883
2909
  --wds-space-padding-vertical-tiny: 12px;
2884
2910
  --wds-space-padding-vertical-x-tiny: 6px;
2885
2911
  --wds-space-padding-vertical-xx-tiny: 3px;
2912
+ --wds-space-viewport-spacing: 48px;
2886
2913
  --wds-status-toast-info-icon-fill: #ffffff;
2887
2914
  --wds-status-toast-text-fill: #ffffff;
2888
2915
  --wds-status-toast-text-font-line-height: 24px;
@@ -2904,6 +2931,9 @@
2904
2931
  --wds-swatches-swatch-size-tiny: 24px;
2905
2932
  --wds-swatches-swatch-size-x-tiny: 18px;
2906
2933
  --wds-table-list-item-border-radius: 0;
2934
+ --wds-table-list-item-fill: #ffffff;
2935
+ --wds-table-list-item-fill-active: #d6e6fe;
2936
+ --wds-table-list-item-fill-hover: #e7f0ff;
2907
2937
  --wds-table-list-item-gap: 24px;
2908
2938
  --wds-table-list-item-indentation-level-2: 12px;
2909
2939
  --wds-table-list-item-indentation-level-3: 36px;
@@ -2968,11 +2998,26 @@
2968
2998
  --wds-toggle-button-fill-inverted-selected: #116dff;
2969
2999
  --wds-toggle-button-fill-inverted-selected-disabled: rgba(0, 6, 36, .3);
2970
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);
2971
3012
  --wds-toggle-button-label-font-line-height-pill-small: 18px;
2972
3013
  --wds-toggle-button-label-font-size-pill-small: 14px;
2973
- --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;
2974
3018
  --wds-toggle-button-label-font-weight-pill: 400;
2975
3019
  --wds-toggle-button-label-font-weight-square: 400;
3020
+ --wds-toggle-button-padding-large: 18px;
2976
3021
  --wds-toggle-button-padding-left-large: 9px;
2977
3022
  --wds-toggle-button-padding-left-large-round: 12px;
2978
3023
  --wds-toggle-button-padding-left-medium: 6px;
@@ -2981,6 +3026,7 @@
2981
3026
  --wds-toggle-button-padding-left-small-round: 12px;
2982
3027
  --wds-toggle-button-padding-left-tiny: 3px;
2983
3028
  --wds-toggle-button-padding-left-tiny-round: 6px;
3029
+ --wds-toggle-button-padding-medium: 12px;
2984
3030
  --wds-toggle-button-padding-right-large: 18px;
2985
3031
  --wds-toggle-button-padding-right-large-round: 30px;
2986
3032
  --wds-toggle-button-padding-right-medium: 12px;
@@ -2989,6 +3035,8 @@
2989
3035
  --wds-toggle-button-padding-right-small-round: 18px;
2990
3036
  --wds-toggle-button-padding-right-tiny: 6px;
2991
3037
  --wds-toggle-button-padding-right-tiny-round: 12px;
3038
+ --wds-toggle-button-padding-small: 12px;
3039
+ --wds-toggle-button-padding-tiny: 6px;
2992
3040
  --wds-toggle-switch-border-error-disabled: rgba(0, 6, 36, .1);
2993
3041
  --wds-toggle-switch-border-standard-disabled: rgba(0, 6, 36, .1);
2994
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);
@@ -725,6 +727,9 @@
725
727
  @property st-global(--wds-swatches-swatch-size-tiny);
726
728
  @property st-global(--wds-swatches-swatch-size-x-tiny);
727
729
  @property st-global(--wds-table-list-item-border-radius);
730
+ @property st-global(--wds-table-list-item-fill);
731
+ @property st-global(--wds-table-list-item-fill-active);
732
+ @property st-global(--wds-table-list-item-fill-hover);
728
733
  @property st-global(--wds-table-list-item-gap);
729
734
  @property st-global(--wds-table-list-item-indentation-level-2);
730
735
  @property st-global(--wds-table-list-item-indentation-level-3);
@@ -789,11 +794,26 @@
789
794
  @property st-global(--wds-toggle-button-fill-inverted-selected);
790
795
  @property st-global(--wds-toggle-button-fill-inverted-selected-disabled);
791
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);
792
808
  @property st-global(--wds-toggle-button-label-font-line-height-pill-small);
793
809
  @property st-global(--wds-toggle-button-label-font-size-pill-small);
794
- @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);
795
814
  @property st-global(--wds-toggle-button-label-font-weight-pill);
796
815
  @property st-global(--wds-toggle-button-label-font-weight-square);
816
+ @property st-global(--wds-toggle-button-padding-large);
797
817
  @property st-global(--wds-toggle-button-padding-left-large);
798
818
  @property st-global(--wds-toggle-button-padding-left-large-round);
799
819
  @property st-global(--wds-toggle-button-padding-left-medium);
@@ -802,6 +822,7 @@
802
822
  @property st-global(--wds-toggle-button-padding-left-small-round);
803
823
  @property st-global(--wds-toggle-button-padding-left-tiny);
804
824
  @property st-global(--wds-toggle-button-padding-left-tiny-round);
825
+ @property st-global(--wds-toggle-button-padding-medium);
805
826
  @property st-global(--wds-toggle-button-padding-right-large);
806
827
  @property st-global(--wds-toggle-button-padding-right-large-round);
807
828
  @property st-global(--wds-toggle-button-padding-right-medium);
@@ -810,6 +831,8 @@
810
831
  @property st-global(--wds-toggle-button-padding-right-small-round);
811
832
  @property st-global(--wds-toggle-button-padding-right-tiny);
812
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);
813
836
  @property st-global(--wds-toggle-switch-border-error-disabled);
814
837
  @property st-global(--wds-toggle-switch-border-standard-disabled);
815
838
  @property st-global(--wds-toggle-switch-border-success-disabled);
@@ -1009,6 +1032,7 @@
1009
1032
  --wds-button-icon-offset-medium: 12px;
1010
1033
  --wds-button-icon-offset-small: 12px;
1011
1034
  --wds-button-icon-offset-tiny: 12px;
1035
+ --wds-button-label-fill-transparent-tertiary: #ffffff;
1012
1036
  --wds-button-label-font-size-large: 16px;
1013
1037
  --wds-button-outline-hover: transparent;
1014
1038
  --wds-button-padding-horizontal-extra-large: 36px;
@@ -1476,6 +1500,7 @@
1476
1500
  --wds-section-helper-text-font-size: 14px;
1477
1501
  --wds-section-helper-vertical-margin: 6px;
1478
1502
  --wds-section-helper-vertical-padding-medium: 18px;
1503
+ --wds-segmented-toggle-background-fill: #ffffff;
1479
1504
  --wds-segmented-toggle-border-hover: #a8caff;
1480
1505
  --wds-segmented-toggle-border-radius-medium: 6px;
1481
1506
  --wds-segmented-toggle-border-radius-small: 6px;
@@ -1654,6 +1679,9 @@
1654
1679
  --wds-swatches-swatch-size-tiny: 24px;
1655
1680
  --wds-swatches-swatch-size-x-tiny: 18px;
1656
1681
  --wds-table-list-item-border-radius: 0;
1682
+ --wds-table-list-item-fill: #ffffff;
1683
+ --wds-table-list-item-fill-active: #d6e6fe;
1684
+ --wds-table-list-item-fill-hover: #e7f0ff;
1657
1685
  --wds-table-list-item-gap: 24px;
1658
1686
  --wds-table-list-item-indentation-level-2: 12px;
1659
1687
  --wds-table-list-item-indentation-level-3: 36px;
@@ -1718,11 +1746,26 @@
1718
1746
  --wds-toggle-button-fill-inverted-selected: #116dff;
1719
1747
  --wds-toggle-button-fill-inverted-selected-disabled: rgba(0, 6, 36, .3);
1720
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);
1721
1760
  --wds-toggle-button-label-font-line-height-pill-small: 18px;
1722
1761
  --wds-toggle-button-label-font-size-pill-small: 14px;
1723
- --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;
1724
1766
  --wds-toggle-button-label-font-weight-pill: 400;
1725
1767
  --wds-toggle-button-label-font-weight-square: 400;
1768
+ --wds-toggle-button-padding-large: 18px;
1726
1769
  --wds-toggle-button-padding-left-large: 9px;
1727
1770
  --wds-toggle-button-padding-left-large-round: 12px;
1728
1771
  --wds-toggle-button-padding-left-medium: 6px;
@@ -1731,6 +1774,7 @@
1731
1774
  --wds-toggle-button-padding-left-small-round: 12px;
1732
1775
  --wds-toggle-button-padding-left-tiny: 3px;
1733
1776
  --wds-toggle-button-padding-left-tiny-round: 6px;
1777
+ --wds-toggle-button-padding-medium: 12px;
1734
1778
  --wds-toggle-button-padding-right-large: 18px;
1735
1779
  --wds-toggle-button-padding-right-large-round: 30px;
1736
1780
  --wds-toggle-button-padding-right-medium: 12px;
@@ -1739,6 +1783,8 @@
1739
1783
  --wds-toggle-button-padding-right-small-round: 18px;
1740
1784
  --wds-toggle-button-padding-right-tiny: 6px;
1741
1785
  --wds-toggle-button-padding-right-tiny-round: 12px;
1786
+ --wds-toggle-button-padding-small: 12px;
1787
+ --wds-toggle-button-padding-tiny: 6px;
1742
1788
  --wds-toggle-switch-border-error-disabled: rgba(0, 6, 36, .1);
1743
1789
  --wds-toggle-switch-border-standard-disabled: rgba(0, 6, 36, .1);
1744
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.113.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": "03d6135e3d1f6f3ea64142a49b9e107b2a6515790b357810af85f3a9"
36
+ "falconPackageHash": "f62bf2c277b055effd7b4cc2d6f4d549ee0026da619e16f9b1e1a227"
37
37
  }
package/semantic.st.css CHANGED
@@ -421,6 +421,7 @@
421
421
  @property st-global(--wds-space-padding-vertical-tiny);
422
422
  @property st-global(--wds-space-padding-vertical-x-tiny);
423
423
  @property st-global(--wds-space-padding-vertical-xx-tiny);
424
+ @property st-global(--wds-space-viewport-spacing);
424
425
  @property st-global(--wds-width-default);
425
426
  @property st-global(--wds-width-default-2);
426
427
 
@@ -848,6 +849,7 @@
848
849
  --wds-space-padding-vertical-tiny: 12px;
849
850
  --wds-space-padding-vertical-x-tiny: 6px;
850
851
  --wds-space-padding-vertical-xx-tiny: 3px;
852
+ --wds-space-viewport-spacing: 48px;
851
853
  --wds-width-default: 1px;
852
854
  --wds-width-default-2: 1px;
853
855
  }
package/studio/all.css CHANGED
@@ -344,6 +344,7 @@
344
344
  --wds-border-radius-surface-modal-backdrop: var(--wds-border-radius-0);
345
345
  --wds-border-radius-surface-modal: var(--wds-border-radius-200);
346
346
  --wds-border-radius-surface-default: var(--wds-border-radius-200);
347
+ --wds-space-viewport-spacing: var(--wds-space-1200);
347
348
  --wds-space-padding-vertical-xx-tiny: var(--wds-space-100);
348
349
  --wds-space-padding-vertical-x-tiny: var(--wds-space-200);
349
350
  --wds-space-padding-vertical-tiny: var(--wds-space-300);
@@ -719,6 +720,8 @@
719
720
  --wds-toggle-switch-border-success-disabled: var(--wds-color-black-100-transparent-0);
720
721
  --wds-toggle-switch-border-standard-disabled: var(--wds-color-black-100-transparent-0);
721
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);
722
725
  --wds-toggle-button-padding-right-tiny-round: var(--wds-space-300);
723
726
  --wds-toggle-button-padding-right-tiny: var(--wds-space-150);
724
727
  --wds-toggle-button-padding-right-small-round: var(--wds-space-400);
@@ -727,6 +730,7 @@
727
730
  --wds-toggle-button-padding-right-medium: var(--wds-space-300);
728
731
  --wds-toggle-button-padding-right-large-round: var(--wds-space-400);
729
732
  --wds-toggle-button-padding-right-large: var(--wds-space-400);
733
+ --wds-toggle-button-padding-medium: var(--wds-space-300);
730
734
  --wds-toggle-button-padding-left-tiny-round: var(--wds-space-150);
731
735
  --wds-toggle-button-padding-left-tiny: var(--wds-space-100);
732
736
  --wds-toggle-button-padding-left-small-round: var(--wds-space-300);
@@ -735,6 +739,7 @@
735
739
  --wds-toggle-button-padding-left-medium: var(--wds-space-150);
736
740
  --wds-toggle-button-padding-left-large-round: var(--wds-space-300);
737
741
  --wds-toggle-button-padding-left-large: var(--wds-space-200);
742
+ --wds-toggle-button-padding-large: var(--wds-space-400);
738
743
  --wds-toggle-button-padding-horizontal-tiny-round: var(--wds-space-300);
739
744
  --wds-toggle-button-padding-horizontal-tiny: var(--wds-space-150);
740
745
  --wds-toggle-button-padding-horizontal-small-round: var(--wds-space-400);
@@ -744,8 +749,9 @@
744
749
  --wds-toggle-button-padding-horizontal-large-round: var(--wds-space-400);
745
750
  --wds-toggle-button-padding-horizontal-large: var(--wds-space-400);
746
751
  --wds-toggle-button-label-font-weight-square: var(--wds-font-weight-regular);
747
- --wds-toggle-button-label-font-weight-round: var(--wds-font-weight-regular);
748
- --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);
749
755
  --wds-toggle-button-fill-inverted-selected-disabled: var(--wds-color-fill-standard-primary-disabled);
750
756
  --wds-toggle-button-border-radius-square-tiny: var(--wds-border-radius-200);
751
757
  --wds-toggle-button-border-radius-square-small: var(--wds-border-radius-200);
@@ -1322,7 +1328,20 @@
1322
1328
  --wds-toggle-switch-fill-error-active-hover: var(--wds-color-fill-destructive-primary-hover);
1323
1329
  --wds-toggle-switch-fill-error-active: var(--wds-color-fill-destructive-primary);
1324
1330
  --wds-toggle-switch-fill-error: var(--wds-color-fill-dark-primary);
1325
- --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);
1326
1345
  --wds-toggle-button-fill-inverted-selected-hover: var(--wds-color-fill-standard-primary-hover);
1327
1346
  --wds-toggle-button-fill-inverted-selected: var(--wds-color-fill-standard-primary);
1328
1347
  --wds-toggle-button-fill-inverted-hover: var(--wds-color-fill-standard-tertiary-hover);
@@ -1338,6 +1357,9 @@
1338
1357
  --wds-tabs-selection-fill-secondary: var(--wds-color-fill-standard-primary);
1339
1358
  --wds-tabs-selection-fill-primary: var(--wds-color-fill-standard-primary);
1340
1359
  --wds-tabs-label-font-size-small: var(--wds-font-size-body-tiny);
1360
+ --wds-table-list-item-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
1361
+ --wds-table-list-item-fill-active: var(--wds-color-fill-standard-tertiary-active);
1362
+ --wds-table-list-item-fill: var(--wds-color-fill-standard-tertiary);
1341
1363
  --wds-status-toast-text-font-size: var(--wds-font-size-body-medium);
1342
1364
  --wds-status-toast-text-fill: var(--wds-color-text-standard-primary-light);
1343
1365
  --wds-status-toast-info-icon-fill: var(--wds-color-text-standard-primary-light);
@@ -1360,6 +1382,7 @@
1360
1382
  --wds-segmented-toggle-fill-disabled: var(--wds-color-fill-standard-tertiary-disabled);
1361
1383
  --wds-segmented-toggle-fill-default: var(--wds-color-fill-standard-tertiary);
1362
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);
1363
1386
  --wds-section-helper-text-font-line-height: var(--wds-font-line-height-100);
1364
1387
  --wds-radio-label-font-size-small: var(--wds-font-size-body-tiny);
1365
1388
  --wds-radio-label-font-size-medium: var(--wds-font-size-body-small);
@@ -1481,6 +1504,7 @@
1481
1504
  --wds-button-text-hover: var(--wds-color-text-primary);
1482
1505
  --wds-button-outline-hover: var(--wds-color-border-standard-secondary);
1483
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);
1484
1508
  --wds-button-font-size-tiny: var(--wds-font-size-body-tiny);
1485
1509
  --wds-button-font-size-small: var(--wds-font-size-body-tiny);
1486
1510
  --wds-button-font-size-medium: var(--wds-font-size-body-small);
@@ -1507,7 +1531,7 @@
1507
1531
  --wds-accordion-background-fill-light-hover: var(--wds-color-fill-standard-tertiary-hover);
1508
1532
  --wds-accordion-background-fill-light: var(--wds-color-fill-standard-tertiary);
1509
1533
  --wds-vertical-tabs-section-text-font-line-height-small: var(--wds-font-line-height-body-tiny);
1510
- --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);
1511
1535
  --wds-timeline-title-font-line-height: var(--wds-font-line-height-body-tiny);
1512
1536
  --wds-thumbnail-title-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
1513
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);
@@ -1316,6 +1318,7 @@
1316
1318
  @property st-global(--wds-space-padding-vertical-tiny);
1317
1319
  @property st-global(--wds-space-padding-vertical-x-tiny);
1318
1320
  @property st-global(--wds-space-padding-vertical-xx-tiny);
1321
+ @property st-global(--wds-space-viewport-spacing);
1319
1322
  @property st-global(--wds-status-toast-info-icon-fill);
1320
1323
  @property st-global(--wds-status-toast-text-fill);
1321
1324
  @property st-global(--wds-status-toast-text-font-line-height);
@@ -1337,6 +1340,9 @@
1337
1340
  @property st-global(--wds-swatches-swatch-size-tiny);
1338
1341
  @property st-global(--wds-swatches-swatch-size-x-tiny);
1339
1342
  @property st-global(--wds-table-list-item-border-radius);
1343
+ @property st-global(--wds-table-list-item-fill);
1344
+ @property st-global(--wds-table-list-item-fill-active);
1345
+ @property st-global(--wds-table-list-item-fill-hover);
1340
1346
  @property st-global(--wds-table-list-item-gap);
1341
1347
  @property st-global(--wds-table-list-item-indentation-level-2);
1342
1348
  @property st-global(--wds-table-list-item-indentation-level-3);
@@ -1401,10 +1407,24 @@
1401
1407
  @property st-global(--wds-toggle-button-fill-inverted-selected);
1402
1408
  @property st-global(--wds-toggle-button-fill-inverted-selected-disabled);
1403
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);
1404
1421
  @property st-global(--wds-toggle-button-label-font-line-height-pill-small);
1405
1422
  @property st-global(--wds-toggle-button-label-font-size-pill-small);
1406
- @property st-global(--wds-toggle-button-label-font-weight);
1407
- @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);
1408
1428
  @property st-global(--wds-toggle-button-label-font-weight-square);
1409
1429
  @property st-global(--wds-toggle-button-padding-horizontal-large);
1410
1430
  @property st-global(--wds-toggle-button-padding-horizontal-large-round);
@@ -1414,6 +1434,7 @@
1414
1434
  @property st-global(--wds-toggle-button-padding-horizontal-small-round);
1415
1435
  @property st-global(--wds-toggle-button-padding-horizontal-tiny);
1416
1436
  @property st-global(--wds-toggle-button-padding-horizontal-tiny-round);
1437
+ @property st-global(--wds-toggle-button-padding-large);
1417
1438
  @property st-global(--wds-toggle-button-padding-left-large);
1418
1439
  @property st-global(--wds-toggle-button-padding-left-large-round);
1419
1440
  @property st-global(--wds-toggle-button-padding-left-medium);
@@ -1422,6 +1443,7 @@
1422
1443
  @property st-global(--wds-toggle-button-padding-left-small-round);
1423
1444
  @property st-global(--wds-toggle-button-padding-left-tiny);
1424
1445
  @property st-global(--wds-toggle-button-padding-left-tiny-round);
1446
+ @property st-global(--wds-toggle-button-padding-medium);
1425
1447
  @property st-global(--wds-toggle-button-padding-right-large);
1426
1448
  @property st-global(--wds-toggle-button-padding-right-large-round);
1427
1449
  @property st-global(--wds-toggle-button-padding-right-medium);
@@ -1430,6 +1452,8 @@
1430
1452
  @property st-global(--wds-toggle-button-padding-right-small-round);
1431
1453
  @property st-global(--wds-toggle-button-padding-right-tiny);
1432
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);
1433
1457
  @property st-global(--wds-toggle-switch-border-error-disabled);
1434
1458
  @property st-global(--wds-toggle-switch-border-standard-disabled);
1435
1459
  @property st-global(--wds-toggle-switch-border-success-disabled);
@@ -1662,6 +1686,7 @@
1662
1686
  --wds-button-icon-offset-medium: 18px;
1663
1687
  --wds-button-icon-offset-small: 12px;
1664
1688
  --wds-button-icon-offset-tiny: 12px;
1689
+ --wds-button-label-fill-transparent-tertiary: #ffffff;
1665
1690
  --wds-button-label-font-size-large: 16px;
1666
1691
  --wds-button-outline-hover: #e2e3ea;
1667
1692
  --wds-button-padding-horizontal-extra-large: 20px;
@@ -2621,6 +2646,7 @@
2621
2646
  --wds-section-helper-prefix-offset-medium: 16px;
2622
2647
  --wds-section-helper-text-font-line-height: 16px;
2623
2648
  --wds-section-helper-text-font-size: 12px;
2649
+ --wds-segmented-toggle-background-fill: #ffffff;
2624
2650
  --wds-segmented-toggle-border-hover: #868aa5;
2625
2651
  --wds-segmented-toggle-border-radius-medium: 4px;
2626
2652
  --wds-segmented-toggle-border-radius-small: 4px;
@@ -2867,6 +2893,7 @@
2867
2893
  --wds-space-padding-vertical-tiny: 12px;
2868
2894
  --wds-space-padding-vertical-x-tiny: 8px;
2869
2895
  --wds-space-padding-vertical-xx-tiny: 4px;
2896
+ --wds-space-viewport-spacing: 48px;
2870
2897
  --wds-status-toast-info-icon-fill: #ffffff;
2871
2898
  --wds-status-toast-text-fill: #ffffff;
2872
2899
  --wds-status-toast-text-font-line-height: 24px;
@@ -2888,6 +2915,9 @@
2888
2915
  --wds-swatches-swatch-size-tiny: 24px;
2889
2916
  --wds-swatches-swatch-size-x-tiny: 18px;
2890
2917
  --wds-table-list-item-border-radius: 0;
2918
+ --wds-table-list-item-fill: #ffffff;
2919
+ --wds-table-list-item-fill-active: #dce9ff;
2920
+ --wds-table-list-item-fill-hover: #f7f8f8;
2891
2921
  --wds-table-list-item-gap: 24px;
2892
2922
  --wds-table-list-item-indentation-level-2: 12px;
2893
2923
  --wds-table-list-item-indentation-level-3: 28px;
@@ -2952,10 +2982,24 @@
2952
2982
  --wds-toggle-button-fill-inverted-selected: #116dff;
2953
2983
  --wds-toggle-button-fill-inverted-selected-disabled: #bebebe;
2954
2984
  --wds-toggle-button-fill-inverted-selected-hover: #0f62e6;
2955
- --wds-toggle-button-label-font-line-height-pill-small: 20px;
2956
- --wds-toggle-button-label-font-size-pill-small: 14px;
2957
- --wds-toggle-button-label-font-weight: 400;
2958
- --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;
2959
3003
  --wds-toggle-button-label-font-weight-square: 400;
2960
3004
  --wds-toggle-button-padding-horizontal-large: 16px;
2961
3005
  --wds-toggle-button-padding-horizontal-large-round: 16px;
@@ -2965,6 +3009,7 @@
2965
3009
  --wds-toggle-button-padding-horizontal-small-round: 16px;
2966
3010
  --wds-toggle-button-padding-horizontal-tiny: 6px;
2967
3011
  --wds-toggle-button-padding-horizontal-tiny-round: 12px;
3012
+ --wds-toggle-button-padding-large: 16px;
2968
3013
  --wds-toggle-button-padding-left-large: 8px;
2969
3014
  --wds-toggle-button-padding-left-large-round: 12px;
2970
3015
  --wds-toggle-button-padding-left-medium: 6px;
@@ -2973,6 +3018,7 @@
2973
3018
  --wds-toggle-button-padding-left-small-round: 12px;
2974
3019
  --wds-toggle-button-padding-left-tiny: 4px;
2975
3020
  --wds-toggle-button-padding-left-tiny-round: 6px;
3021
+ --wds-toggle-button-padding-medium: 12px;
2976
3022
  --wds-toggle-button-padding-right-large: 16px;
2977
3023
  --wds-toggle-button-padding-right-large-round: 16px;
2978
3024
  --wds-toggle-button-padding-right-medium: 12px;
@@ -2981,6 +3027,8 @@
2981
3027
  --wds-toggle-button-padding-right-small-round: 16px;
2982
3028
  --wds-toggle-button-padding-right-tiny: 6px;
2983
3029
  --wds-toggle-button-padding-right-tiny-round: 12px;
3030
+ --wds-toggle-button-padding-small: 12px;
3031
+ --wds-toggle-button-padding-tiny: 6px;
2984
3032
  --wds-toggle-switch-border-error-disabled: rgba(19, 23, 32, 0);
2985
3033
  --wds-toggle-switch-border-standard-disabled: rgba(19, 23, 32, 0);
2986
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);
@@ -717,6 +719,9 @@
717
719
  @property st-global(--wds-swatches-swatch-size-tiny);
718
720
  @property st-global(--wds-swatches-swatch-size-x-tiny);
719
721
  @property st-global(--wds-table-list-item-border-radius);
722
+ @property st-global(--wds-table-list-item-fill);
723
+ @property st-global(--wds-table-list-item-fill-active);
724
+ @property st-global(--wds-table-list-item-fill-hover);
720
725
  @property st-global(--wds-table-list-item-gap);
721
726
  @property st-global(--wds-table-list-item-indentation-level-2);
722
727
  @property st-global(--wds-table-list-item-indentation-level-3);
@@ -781,10 +786,24 @@
781
786
  @property st-global(--wds-toggle-button-fill-inverted-selected);
782
787
  @property st-global(--wds-toggle-button-fill-inverted-selected-disabled);
783
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);
784
800
  @property st-global(--wds-toggle-button-label-font-line-height-pill-small);
785
801
  @property st-global(--wds-toggle-button-label-font-size-pill-small);
786
- @property st-global(--wds-toggle-button-label-font-weight);
787
- @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);
788
807
  @property st-global(--wds-toggle-button-label-font-weight-square);
789
808
  @property st-global(--wds-toggle-button-padding-horizontal-large);
790
809
  @property st-global(--wds-toggle-button-padding-horizontal-large-round);
@@ -794,6 +813,7 @@
794
813
  @property st-global(--wds-toggle-button-padding-horizontal-small-round);
795
814
  @property st-global(--wds-toggle-button-padding-horizontal-tiny);
796
815
  @property st-global(--wds-toggle-button-padding-horizontal-tiny-round);
816
+ @property st-global(--wds-toggle-button-padding-large);
797
817
  @property st-global(--wds-toggle-button-padding-left-large);
798
818
  @property st-global(--wds-toggle-button-padding-left-large-round);
799
819
  @property st-global(--wds-toggle-button-padding-left-medium);
@@ -802,6 +822,7 @@
802
822
  @property st-global(--wds-toggle-button-padding-left-small-round);
803
823
  @property st-global(--wds-toggle-button-padding-left-tiny);
804
824
  @property st-global(--wds-toggle-button-padding-left-tiny-round);
825
+ @property st-global(--wds-toggle-button-padding-medium);
805
826
  @property st-global(--wds-toggle-button-padding-right-large);
806
827
  @property st-global(--wds-toggle-button-padding-right-large-round);
807
828
  @property st-global(--wds-toggle-button-padding-right-medium);
@@ -810,6 +831,8 @@
810
831
  @property st-global(--wds-toggle-button-padding-right-small-round);
811
832
  @property st-global(--wds-toggle-button-padding-right-tiny);
812
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);
813
836
  @property st-global(--wds-toggle-switch-border-error-disabled);
814
837
  @property st-global(--wds-toggle-switch-border-standard-disabled);
815
838
  @property st-global(--wds-toggle-switch-border-success-disabled);
@@ -1009,6 +1032,7 @@
1009
1032
  --wds-button-icon-offset-medium: 18px;
1010
1033
  --wds-button-icon-offset-small: 12px;
1011
1034
  --wds-button-icon-offset-tiny: 12px;
1035
+ --wds-button-label-fill-transparent-tertiary: #ffffff;
1012
1036
  --wds-button-label-font-size-large: 16px;
1013
1037
  --wds-button-outline-hover: #e2e3ea;
1014
1038
  --wds-button-padding-horizontal-extra-large: 20px;
@@ -1468,6 +1492,7 @@
1468
1492
  --wds-section-helper-prefix-offset-medium: 16px;
1469
1493
  --wds-section-helper-text-font-line-height: 16px;
1470
1494
  --wds-section-helper-text-font-size: 12px;
1495
+ --wds-segmented-toggle-background-fill: #ffffff;
1471
1496
  --wds-segmented-toggle-border-hover: #868aa5;
1472
1497
  --wds-segmented-toggle-border-radius-medium: 4px;
1473
1498
  --wds-segmented-toggle-border-radius-small: 4px;
@@ -1646,6 +1671,9 @@
1646
1671
  --wds-swatches-swatch-size-tiny: 24px;
1647
1672
  --wds-swatches-swatch-size-x-tiny: 18px;
1648
1673
  --wds-table-list-item-border-radius: 0;
1674
+ --wds-table-list-item-fill: #ffffff;
1675
+ --wds-table-list-item-fill-active: #dce9ff;
1676
+ --wds-table-list-item-fill-hover: #f7f8f8;
1649
1677
  --wds-table-list-item-gap: 24px;
1650
1678
  --wds-table-list-item-indentation-level-2: 12px;
1651
1679
  --wds-table-list-item-indentation-level-3: 28px;
@@ -1710,10 +1738,24 @@
1710
1738
  --wds-toggle-button-fill-inverted-selected: #116dff;
1711
1739
  --wds-toggle-button-fill-inverted-selected-disabled: #bebebe;
1712
1740
  --wds-toggle-button-fill-inverted-selected-hover: #0f62e6;
1713
- --wds-toggle-button-label-font-line-height-pill-small: 20px;
1714
- --wds-toggle-button-label-font-size-pill-small: 14px;
1715
- --wds-toggle-button-label-font-weight: 400;
1716
- --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;
1717
1759
  --wds-toggle-button-label-font-weight-square: 400;
1718
1760
  --wds-toggle-button-padding-horizontal-large: 16px;
1719
1761
  --wds-toggle-button-padding-horizontal-large-round: 16px;
@@ -1723,6 +1765,7 @@
1723
1765
  --wds-toggle-button-padding-horizontal-small-round: 16px;
1724
1766
  --wds-toggle-button-padding-horizontal-tiny: 6px;
1725
1767
  --wds-toggle-button-padding-horizontal-tiny-round: 12px;
1768
+ --wds-toggle-button-padding-large: 16px;
1726
1769
  --wds-toggle-button-padding-left-large: 8px;
1727
1770
  --wds-toggle-button-padding-left-large-round: 12px;
1728
1771
  --wds-toggle-button-padding-left-medium: 6px;
@@ -1731,6 +1774,7 @@
1731
1774
  --wds-toggle-button-padding-left-small-round: 12px;
1732
1775
  --wds-toggle-button-padding-left-tiny: 4px;
1733
1776
  --wds-toggle-button-padding-left-tiny-round: 6px;
1777
+ --wds-toggle-button-padding-medium: 12px;
1734
1778
  --wds-toggle-button-padding-right-large: 16px;
1735
1779
  --wds-toggle-button-padding-right-large-round: 16px;
1736
1780
  --wds-toggle-button-padding-right-medium: 12px;
@@ -1739,6 +1783,8 @@
1739
1783
  --wds-toggle-button-padding-right-small-round: 16px;
1740
1784
  --wds-toggle-button-padding-right-tiny: 6px;
1741
1785
  --wds-toggle-button-padding-right-tiny-round: 12px;
1786
+ --wds-toggle-button-padding-small: 12px;
1787
+ --wds-toggle-button-padding-tiny: 6px;
1742
1788
  --wds-toggle-switch-border-error-disabled: rgba(19, 23, 32, 0);
1743
1789
  --wds-toggle-switch-border-standard-disabled: rgba(19, 23, 32, 0);
1744
1790
  --wds-toggle-switch-border-success-disabled: rgba(19, 23, 32, 0);
package/studio/semantic.st.css CHANGED
@@ -417,6 +417,7 @@
417
417
  @property st-global(--wds-space-padding-vertical-tiny);
418
418
  @property st-global(--wds-space-padding-vertical-x-tiny);
419
419
  @property st-global(--wds-space-padding-vertical-xx-tiny);
420
+ @property st-global(--wds-space-viewport-spacing);
420
421
  @property st-global(--wds-width-default);
421
422
  @property st-global(--wds-width-default-2);
422
423
 
@@ -840,6 +841,7 @@
840
841
  --wds-space-padding-vertical-tiny: 12px;
841
842
  --wds-space-padding-vertical-x-tiny: 8px;
842
843
  --wds-space-padding-vertical-xx-tiny: 4px;
844
+ --wds-space-viewport-spacing: 48px;
843
845
  --wds-width-default: 1px;
844
846
  --wds-width-default-2: 1px;
845
847
  }
package/wixel/all.css CHANGED
@@ -347,6 +347,7 @@
347
347
  --wds-border-radius-surface-modal-backdrop: var(--wds-border-radius-0);
348
348
  --wds-border-radius-surface-modal: var(--wds-border-radius-600);
349
349
  --wds-border-radius-surface-default: var(--wds-border-radius-600);
350
+ --wds-space-viewport-spacing: var(--wds-space-1200);
350
351
  --wds-space-padding-vertical-xx-tiny: var(--wds-space-100);
351
352
  --wds-space-padding-vertical-x-tiny: var(--wds-space-200);
352
353
  --wds-space-padding-vertical-tiny: var(--wds-space-300);
@@ -724,6 +725,10 @@
724
725
  --wds-toggle-switch-border-success-disabled: var(--wds-color-black-100-transparent-0);
725
726
  --wds-toggle-switch-border-standard-disabled: var(--wds-color-black-100-transparent-0);
726
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);
727
732
  --wds-toggle-button-padding-horizontal-tiny-round: var(--wds-space-300);
728
733
  --wds-toggle-button-padding-horizontal-tiny: var(--wds-space-300);
729
734
  --wds-toggle-button-padding-horizontal-small-round: var(--wds-space-400);
@@ -749,8 +754,8 @@
749
754
  --wds-toggle-button-padding-horizontal-large-round: var(--wds-space-600);
750
755
  --wds-toggle-button-padding-horizontal-large: var(--wds-space-600);
751
756
  --wds-toggle-button-label-font-weight-square: var(--wds-font-weight-semi-bold);
752
- --wds-toggle-button-label-font-weight-round: var(--wds-font-weight-regular);
753
- --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);
754
759
  --wds-toggle-button-fill-inverted-selected-disabled: var(--wds-color-fill-standard-primary-disabled);
755
760
  --wds-toggle-button-fill-inverted-disabled: var(--wds-color-fill-standard-secondary-disabled);
756
761
  --wds-toggle-button-border-radius-square-tiny: var(--wds-border-radius-400);
@@ -1331,7 +1336,21 @@
1331
1336
  --wds-toggle-switch-fill-error-active-hover: var(--wds-color-fill-destructive-primary-hover);
1332
1337
  --wds-toggle-switch-fill-error-active: var(--wds-color-fill-destructive-primary);
1333
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);
1334
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);
1335
1354
  --wds-toggle-button-fill-inverted-selected-hover: var(--wds-color-fill-standard-primary-hover);
1336
1355
  --wds-toggle-button-fill-inverted-selected: var(--wds-color-fill-standard-primary);
1337
1356
  --wds-toggle-button-fill-inverted-hover: var(--wds-color-fill-standard-secondary-hover);
@@ -1348,6 +1367,9 @@
1348
1367
  --wds-tabs-selection-fill-primary: var(--wds-color-fill-standard-primary);
1349
1368
  --wds-tabs-selection-border: linear-gradient(90deg, var(--wds-tabs-selection-fill-secondary) 0%, var(--wds-tabs-selection-fill-primary) 20%, var(--wds-tabs-selection-fill-primary) 80%, var(--wds-tabs-selection-fill-secondary) 100%);
1350
1369
  --wds-tabs-label-font-size-small: var(--wds-font-size-body-tiny);
1370
+ --wds-table-list-item-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
1371
+ --wds-table-list-item-fill-active: var(--wds-color-fill-standard-tertiary-active);
1372
+ --wds-table-list-item-fill: var(--wds-color-fill-standard-tertiary);
1351
1373
  --wds-status-toast-text-font-size: var(--wds-font-size-body-tiny);
1352
1374
  --wds-status-toast-text-fill: var(--wds-color-text-standard-primary-light);
1353
1375
  --wds-status-toast-info-icon-fill: var(--wds-color-text-standard-primary-light);
@@ -1369,6 +1391,7 @@
1369
1391
  --wds-segmented-toggle-fill-hover: var(--wds-color-fill-standard-secondary-hover);
1370
1392
  --wds-segmented-toggle-fill-default: var(--wds-color-fill-standard-secondary);
1371
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);
1372
1395
  --wds-section-helper-text-font-size: var(--wds-font-size-body-tiny);
1373
1396
  --wds-radio-label-font-size-small: var(--wds-font-size-body-tiny);
1374
1397
  --wds-radio-label-font-size-medium: var(--wds-font-size-body-small);
@@ -1489,6 +1512,7 @@
1489
1512
  --wds-card-gallery-item-fill: var(--wds-color-fill-standard-secondary);
1490
1513
  --wds-button-text-hover: var(--wds-color-text-standard-primary-light);
1491
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);
1492
1516
  --wds-button-font-size-tiny: var(--wds-font-size-body-extra-tiny);
1493
1517
  --wds-button-font-size-small: var(--wds-font-size-body-tiny);
1494
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);
@@ -1326,6 +1328,7 @@
1326
1328
  @property st-global(--wds-space-padding-vertical-tiny);
1327
1329
  @property st-global(--wds-space-padding-vertical-x-tiny);
1328
1330
  @property st-global(--wds-space-padding-vertical-xx-tiny);
1331
+ @property st-global(--wds-space-viewport-spacing);
1329
1332
  @property st-global(--wds-status-toast-info-icon-fill);
1330
1333
  @property st-global(--wds-status-toast-text-fill);
1331
1334
  @property st-global(--wds-status-toast-text-font-line-height);
@@ -1346,6 +1349,9 @@
1346
1349
  @property st-global(--wds-swatches-swatch-size-small);
1347
1350
  @property st-global(--wds-swatches-swatch-size-tiny);
1348
1351
  @property st-global(--wds-table-list-item-border-radius);
1352
+ @property st-global(--wds-table-list-item-fill);
1353
+ @property st-global(--wds-table-list-item-fill-active);
1354
+ @property st-global(--wds-table-list-item-fill-hover);
1349
1355
  @property st-global(--wds-table-list-item-gap);
1350
1356
  @property st-global(--wds-table-list-item-indentation-level-2);
1351
1357
  @property st-global(--wds-table-list-item-indentation-level-3);
@@ -1410,10 +1416,24 @@
1410
1416
  @property st-global(--wds-toggle-button-fill-inverted-selected);
1411
1417
  @property st-global(--wds-toggle-button-fill-inverted-selected-disabled);
1412
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);
1413
1430
  @property st-global(--wds-toggle-button-label-font-line-height-pill-small);
1414
1431
  @property st-global(--wds-toggle-button-label-font-size-pill-small);
1415
- @property st-global(--wds-toggle-button-label-font-weight);
1416
- @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);
1417
1437
  @property st-global(--wds-toggle-button-label-font-weight-square);
1418
1438
  @property st-global(--wds-toggle-button-padding-horizontal-large);
1419
1439
  @property st-global(--wds-toggle-button-padding-horizontal-large-round);
@@ -1439,6 +1459,10 @@
1439
1459
  @property st-global(--wds-toggle-button-padding-horizontal-small-round);
1440
1460
  @property st-global(--wds-toggle-button-padding-horizontal-tiny);
1441
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);
1442
1466
  @property st-global(--wds-toggle-switch-border-error-disabled);
1443
1467
  @property st-global(--wds-toggle-switch-border-standard-disabled);
1444
1468
  @property st-global(--wds-toggle-switch-border-success-disabled);
@@ -1671,6 +1695,7 @@
1671
1695
  --wds-button-icon-offset-medium: 18px;
1672
1696
  --wds-button-icon-offset-small: 12px;
1673
1697
  --wds-button-icon-offset-tiny: 12px;
1698
+ --wds-button-label-fill-transparent-tertiary: #ffffff;
1674
1699
  --wds-button-label-font-size-large: 14px;
1675
1700
  --wds-button-outline-hover: transparent;
1676
1701
  --wds-button-padding-horizontal-extra-large: 24px;
@@ -2640,6 +2665,7 @@
2640
2665
  --wds-section-helper-text-font-size: 12px;
2641
2666
  --wds-section-helper-vertical-margin: 6px;
2642
2667
  --wds-section-helper-vertical-padding-medium: 12px;
2668
+ --wds-segmented-toggle-background-fill: #eef0ff;
2643
2669
  --wds-segmented-toggle-border-hover: #d6dcff;
2644
2670
  --wds-segmented-toggle-border-radius-medium: 8px;
2645
2671
  --wds-segmented-toggle-border-radius-small: 8px;
@@ -2886,6 +2912,7 @@
2886
2912
  --wds-space-padding-vertical-tiny: 12px;
2887
2913
  --wds-space-padding-vertical-x-tiny: 8px;
2888
2914
  --wds-space-padding-vertical-xx-tiny: 4px;
2915
+ --wds-space-viewport-spacing: 48px;
2889
2916
  --wds-status-toast-info-icon-fill: #ffffff;
2890
2917
  --wds-status-toast-text-fill: #ffffff;
2891
2918
  --wds-status-toast-text-font-line-height: 16px;
@@ -2906,6 +2933,9 @@
2906
2933
  --wds-swatches-swatch-size-small: 32px;
2907
2934
  --wds-swatches-swatch-size-tiny: 28px;
2908
2935
  --wds-table-list-item-border-radius: 12px;
2936
+ --wds-table-list-item-fill: #ffffff;
2937
+ --wds-table-list-item-fill-active: #eef0ff;
2938
+ --wds-table-list-item-fill-hover: #f4f6ff;
2909
2939
  --wds-table-list-item-gap: 24px;
2910
2940
  --wds-table-list-item-indentation-level-2: 12px;
2911
2941
  --wds-table-list-item-indentation-level-3: 28px;
@@ -2970,10 +3000,24 @@
2970
3000
  --wds-toggle-button-fill-inverted-selected: #526cff;
2971
3001
  --wds-toggle-button-fill-inverted-selected-disabled: #bebebe;
2972
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);
2973
3014
  --wds-toggle-button-label-font-line-height-pill-small: 16px;
2974
3015
  --wds-toggle-button-label-font-size-pill-small: 12px;
2975
- --wds-toggle-button-label-font-weight: 600;
2976
- --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;
2977
3021
  --wds-toggle-button-label-font-weight-square: 600;
2978
3022
  --wds-toggle-button-padding-horizontal-large: 24px;
2979
3023
  --wds-toggle-button-padding-horizontal-large-round: 24px;
@@ -2999,6 +3043,10 @@
2999
3043
  --wds-toggle-button-padding-horizontal-small-round: 16px;
3000
3044
  --wds-toggle-button-padding-horizontal-tiny: 12px;
3001
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;
3002
3050
  --wds-toggle-switch-border-error-disabled: rgba(38, 37, 36, 0.0000);
3003
3051
  --wds-toggle-switch-border-standard-disabled: rgba(38, 37, 36, 0.0000);
3004
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);
@@ -722,6 +724,9 @@
722
724
  @property st-global(--wds-swatches-swatch-size-small);
723
725
  @property st-global(--wds-swatches-swatch-size-tiny);
724
726
  @property st-global(--wds-table-list-item-border-radius);
727
+ @property st-global(--wds-table-list-item-fill);
728
+ @property st-global(--wds-table-list-item-fill-active);
729
+ @property st-global(--wds-table-list-item-fill-hover);
725
730
  @property st-global(--wds-table-list-item-gap);
726
731
  @property st-global(--wds-table-list-item-indentation-level-2);
727
732
  @property st-global(--wds-table-list-item-indentation-level-3);
@@ -786,10 +791,24 @@
786
791
  @property st-global(--wds-toggle-button-fill-inverted-selected);
787
792
  @property st-global(--wds-toggle-button-fill-inverted-selected-disabled);
788
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);
789
805
  @property st-global(--wds-toggle-button-label-font-line-height-pill-small);
790
806
  @property st-global(--wds-toggle-button-label-font-size-pill-small);
791
- @property st-global(--wds-toggle-button-label-font-weight);
792
- @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);
793
812
  @property st-global(--wds-toggle-button-label-font-weight-square);
794
813
  @property st-global(--wds-toggle-button-padding-horizontal-large);
795
814
  @property st-global(--wds-toggle-button-padding-horizontal-large-round);
@@ -815,6 +834,10 @@
815
834
  @property st-global(--wds-toggle-button-padding-horizontal-small-round);
816
835
  @property st-global(--wds-toggle-button-padding-horizontal-tiny);
817
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);
818
841
  @property st-global(--wds-toggle-switch-border-error-disabled);
819
842
  @property st-global(--wds-toggle-switch-border-standard-disabled);
820
843
  @property st-global(--wds-toggle-switch-border-success-disabled);
@@ -1014,6 +1037,7 @@
1014
1037
  --wds-button-icon-offset-medium: 18px;
1015
1038
  --wds-button-icon-offset-small: 12px;
1016
1039
  --wds-button-icon-offset-tiny: 12px;
1040
+ --wds-button-label-fill-transparent-tertiary: #ffffff;
1017
1041
  --wds-button-label-font-size-large: 14px;
1018
1042
  --wds-button-outline-hover: transparent;
1019
1043
  --wds-button-padding-horizontal-extra-large: 24px;
@@ -1479,6 +1503,7 @@
1479
1503
  --wds-section-helper-text-font-size: 12px;
1480
1504
  --wds-section-helper-vertical-margin: 6px;
1481
1505
  --wds-section-helper-vertical-padding-medium: 12px;
1506
+ --wds-segmented-toggle-background-fill: #eef0ff;
1482
1507
  --wds-segmented-toggle-border-hover: #d6dcff;
1483
1508
  --wds-segmented-toggle-border-radius-medium: 8px;
1484
1509
  --wds-segmented-toggle-border-radius-small: 8px;
@@ -1656,6 +1681,9 @@
1656
1681
  --wds-swatches-swatch-size-small: 32px;
1657
1682
  --wds-swatches-swatch-size-tiny: 28px;
1658
1683
  --wds-table-list-item-border-radius: 12px;
1684
+ --wds-table-list-item-fill: #ffffff;
1685
+ --wds-table-list-item-fill-active: #eef0ff;
1686
+ --wds-table-list-item-fill-hover: #f4f6ff;
1659
1687
  --wds-table-list-item-gap: 24px;
1660
1688
  --wds-table-list-item-indentation-level-2: 12px;
1661
1689
  --wds-table-list-item-indentation-level-3: 28px;
@@ -1720,10 +1748,24 @@
1720
1748
  --wds-toggle-button-fill-inverted-selected: #526cff;
1721
1749
  --wds-toggle-button-fill-inverted-selected-disabled: #bebebe;
1722
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);
1723
1762
  --wds-toggle-button-label-font-line-height-pill-small: 16px;
1724
1763
  --wds-toggle-button-label-font-size-pill-small: 12px;
1725
- --wds-toggle-button-label-font-weight: 600;
1726
- --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;
1727
1769
  --wds-toggle-button-label-font-weight-square: 600;
1728
1770
  --wds-toggle-button-padding-horizontal-large: 24px;
1729
1771
  --wds-toggle-button-padding-horizontal-large-round: 24px;
@@ -1749,6 +1791,10 @@
1749
1791
  --wds-toggle-button-padding-horizontal-small-round: 16px;
1750
1792
  --wds-toggle-button-padding-horizontal-tiny: 12px;
1751
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;
1752
1798
  --wds-toggle-switch-border-error-disabled: rgba(38, 37, 36, 0.0000);
1753
1799
  --wds-toggle-switch-border-standard-disabled: rgba(38, 37, 36, 0.0000);
1754
1800
  --wds-toggle-switch-border-success-disabled: rgba(38, 37, 36, 0.0000);
package/wixel/semantic.st.css CHANGED
@@ -421,6 +421,7 @@
421
421
  @property st-global(--wds-space-padding-vertical-tiny);
422
422
  @property st-global(--wds-space-padding-vertical-x-tiny);
423
423
  @property st-global(--wds-space-padding-vertical-xx-tiny);
424
+ @property st-global(--wds-space-viewport-spacing);
424
425
  @property st-global(--wds-width-default);
425
426
  @property st-global(--wds-width-default-2);
426
427
 
@@ -848,6 +849,7 @@
848
849
  --wds-space-padding-vertical-tiny: 12px;
849
850
  --wds-space-padding-vertical-x-tiny: 8px;
850
851
  --wds-space-padding-vertical-xx-tiny: 4px;
852
+ --wds-space-viewport-spacing: 48px;
851
853
  --wds-width-default: 0;
852
854
  --wds-width-default-2: 0;
853
855
  }