@wix/design-system-tokens 1.122.0 → 1.124.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 (24) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/README.md +16 -0
  3. package/all.css +71 -19
  4. package/all.scss +81 -21
  5. package/all.st.css +140 -36
  6. package/component.st.css +138 -36
  7. package/foundation.st.css +2 -0
  8. package/odeditor/all.css +98 -22
  9. package/odeditor/all.scss +119 -34
  10. package/odeditor/all.st.css +174 -22
  11. package/odeditor/component.st.css +172 -22
  12. package/odeditor/foundation.st.css +2 -0
  13. package/package.json +4 -4
  14. package/studio/all.css +74 -30
  15. package/studio/all.scss +84 -32
  16. package/studio/all.st.css +144 -56
  17. package/studio/component.st.css +142 -56
  18. package/studio/foundation.st.css +2 -0
  19. package/wixel/all.css +81 -37
  20. package/wixel/all.scss +91 -39
  21. package/wixel/all.st.css +354 -266
  22. package/wixel/component.st.css +296 -210
  23. package/wixel/foundation.st.css +11 -9
  24. package/wixel/semantic.st.css +47 -47
package/studio/all.scss CHANGED
@@ -317,6 +317,7 @@
317
317
  --wds-color-black-100-transparent-50: rgba(19, 23, 32, .5);
318
318
  --wds-color-black-100-transparent-40: rgba(19, 23, 32, .4);
319
319
  --wds-color-black-100-transparent-30: rgba(19, 23, 32, .3);
320
+ --wds-color-black-100-transparent-25: rgba(19, 23, 32, .25);
320
321
  --wds-color-black-100-transparent-20: rgba(19, 23, 32, .2);
321
322
  --wds-color-black-100-transparent-15: rgba(19, 23, 32, 0.15);
322
323
  --wds-color-black-100-transparent-10: rgba(19, 23, 32, .1);
@@ -404,43 +405,60 @@
404
405
  --wds-toggle-switch-border-success-disabled: var(--wds-color-black-100-transparent-0);
405
406
  --wds-toggle-switch-border-standard-disabled: var(--wds-color-black-100-transparent-0);
406
407
  --wds-toggle-switch-border-error-disabled: var(--wds-color-black-100-transparent-0);
408
+ --wds-toggle-button-shadow-y-tertiary-inverted: var(--wds-shadow-y-0);
409
+ --wds-toggle-button-shadow-y-tertiary: var(--wds-shadow-y-0);
410
+ --wds-toggle-button-shadow-y-secondary-inverted: var(--wds-shadow-y-0);
411
+ --wds-toggle-button-shadow-y-secondary: var(--wds-shadow-y-0);
412
+ --wds-toggle-button-shadow-y-primary-inverted: var(--wds-shadow-y-0);
413
+ --wds-toggle-button-shadow-y-primary: var(--wds-shadow-y-0);
414
+ --wds-toggle-button-shadow-x-tertiary-inverted: var(--wds-shadow-x-0);
415
+ --wds-toggle-button-shadow-x-tertiary: var(--wds-shadow-x-0);
416
+ --wds-toggle-button-shadow-x-secondary-inverted: var(--wds-shadow-x-0);
417
+ --wds-toggle-button-shadow-x-secondary: var(--wds-shadow-x-0);
418
+ --wds-toggle-button-shadow-x-primary-inverted: var(--wds-shadow-x-0);
419
+ --wds-toggle-button-shadow-x-primary: var(--wds-shadow-x-0);
420
+ --wds-toggle-button-shadow-fill-tertiary-inverted: var(--wds-color-black-100-transparent-0);
421
+ --wds-toggle-button-shadow-fill-tertiary: var(--wds-color-black-100-transparent-0);
422
+ --wds-toggle-button-shadow-fill-secondary-inverted: var(--wds-color-black-100-transparent-0);
423
+ --wds-toggle-button-shadow-fill-secondary: var(--wds-color-black-100-transparent-0);
424
+ --wds-toggle-button-shadow-fill-primary-inverted: var(--wds-color-black-100-transparent-0);
425
+ --wds-toggle-button-shadow-fill-primary: var(--wds-color-black-100-transparent-0);
426
+ --wds-toggle-button-shadow-blur-tertiary-inverted: var(--wds-shadow-blur-0);
427
+ --wds-toggle-button-shadow-blur-tertiary: var(--wds-shadow-blur-0);
428
+ --wds-toggle-button-shadow-blur-secondary-inverted: var(--wds-shadow-blur-0);
429
+ --wds-toggle-button-shadow-blur-secondary: var(--wds-shadow-blur-0);
430
+ --wds-toggle-button-shadow-blur-primary-inverted: var(--wds-shadow-blur-0);
431
+ --wds-toggle-button-shadow-blur-primary: var(--wds-shadow-blur-0);
432
+ --wds-toggle-button-padding-tiny-round: var(--wds-space-300);
407
433
  --wds-toggle-button-padding-tiny: var(--wds-space-150);
434
+ --wds-toggle-button-padding-small-round: var(--wds-space-400);
408
435
  --wds-toggle-button-padding-small: var(--wds-space-300);
409
- --wds-toggle-button-padding-right-tiny-round: var(--wds-space-300);
410
- --wds-toggle-button-padding-right-tiny: var(--wds-space-150);
411
- --wds-toggle-button-padding-right-small-round: var(--wds-space-400);
412
- --wds-toggle-button-padding-right-small: var(--wds-space-300);
413
- --wds-toggle-button-padding-right-medium-round: var(--wds-space-400);
414
- --wds-toggle-button-padding-right-medium: var(--wds-space-300);
415
- --wds-toggle-button-padding-right-large-round: var(--wds-space-400);
416
- --wds-toggle-button-padding-right-large: var(--wds-space-400);
436
+ --wds-toggle-button-padding-medium-round: var(--wds-space-400);
417
437
  --wds-toggle-button-padding-medium: var(--wds-space-300);
418
- --wds-toggle-button-padding-left-tiny-round: var(--wds-space-150);
419
- --wds-toggle-button-padding-left-tiny: var(--wds-space-100);
420
- --wds-toggle-button-padding-left-small-round: var(--wds-space-300);
421
- --wds-toggle-button-padding-left-small: var(--wds-space-150);
422
- --wds-toggle-button-padding-left-medium-round: var(--wds-space-300);
423
- --wds-toggle-button-padding-left-medium: var(--wds-space-150);
424
- --wds-toggle-button-padding-left-large-round: var(--wds-space-300);
425
- --wds-toggle-button-padding-left-large: var(--wds-space-200);
438
+ --wds-toggle-button-padding-large-round: var(--wds-space-400);
426
439
  --wds-toggle-button-padding-large: var(--wds-space-400);
427
- --wds-toggle-button-padding-horizontal-tiny-round: var(--wds-space-300);
428
- --wds-toggle-button-padding-horizontal-tiny: var(--wds-space-150);
429
- --wds-toggle-button-padding-horizontal-small-round: var(--wds-space-400);
430
- --wds-toggle-button-padding-horizontal-small: var(--wds-space-300);
431
- --wds-toggle-button-padding-horizontal-medium-round: var(--wds-space-400);
432
- --wds-toggle-button-padding-horizontal-medium: var(--wds-space-300);
433
- --wds-toggle-button-padding-horizontal-large-round: var(--wds-space-400);
434
- --wds-toggle-button-padding-horizontal-large: var(--wds-space-400);
435
440
  --wds-toggle-button-label-font-weight-square: var(--wds-font-weight-regular);
441
+ --wds-toggle-button-label-font-weight-round: var(--wds-font-weight-regular);
436
442
  --wds-toggle-button-label-font-weight-pill: var(--wds-font-weight-regular);
437
443
  --wds-toggle-button-label-fill-standard-disabled: var(--wds-color-text-disabled);
444
+ --wds-toggle-button-label-fill-inverted-disabled: var(--wds-color-text-disabled);
445
+ --wds-toggle-button-label-fill-dark-disabled: var(--wds-color-text-disabled);
446
+ --wds-toggle-button-inner-shadow-y-secondary: var(--wds-shadow-y-0);
447
+ --wds-toggle-button-inner-shadow-y-primary: var(--wds-shadow-y-0);
448
+ --wds-toggle-button-inner-shadow-x-secondary: var(--wds-shadow-x-0);
449
+ --wds-toggle-button-inner-shadow-x-primary: var(--wds-shadow-x-0);
450
+ --wds-toggle-button-inner-shadow-fill-secondary: var(--wds-color-white-transparent-0);
451
+ --wds-toggle-button-inner-shadow-fill-primary: var(--wds-color-white-transparent-0);
452
+ --wds-toggle-button-inner-shadow-blur-secondary: var(--wds-shadow-blur-0);
453
+ --wds-toggle-button-inner-shadow-blur-primary: var(--wds-shadow-blur-0);
438
454
  --wds-toggle-button-fill-standard-selected-disabled: var(--wds-color-fill-standard-primary-disabled);
439
455
  --wds-toggle-button-fill-inverted-selected-disabled: var(--wds-color-fill-standard-primary-disabled);
456
+ --wds-toggle-button-fill-dark-selected-disabled: var(--wds-color-fill-standard-primary-disabled);
440
457
  --wds-toggle-button-border-radius-square-tiny: var(--wds-border-radius-200);
441
458
  --wds-toggle-button-border-radius-square-small: var(--wds-border-radius-200);
442
- --wds-toggle-button-border-radius-square-medium: var(--wds-border-radius-300);
443
- --wds-toggle-button-border-radius-square-large: var(--wds-border-radius-300);
459
+ --wds-toggle-button-border-radius-square-medium: var(--wds-border-radius-200);
460
+ --wds-toggle-button-border-radius-square-large: var(--wds-border-radius-200);
461
+ --wds-toggle-button-border-color-standard-disabled: var(--wds-color-fill-standard-secondary-disabled);
444
462
  --wds-thumbnail-title-padding-top: var(--wds-space-100);
445
463
  --wds-thumbnail-title-font-weight-tiny: var(--wds-font-weight-regular);
446
464
  --wds-thumbnail-illustration-fill-3: var(--wds-color-black-750);
@@ -472,8 +490,14 @@
472
490
  --wds-tabs-padding-vertical-medium: var(--wds-space-400);
473
491
  --wds-tabs-padding-horizontal-small: var(--wds-space-300);
474
492
  --wds-tabs-padding-horizontal-medium: var(--wds-space-400);
475
- --wds-tabs-gap-small: var(--wds-space-150);
476
- --wds-tabs-gap-medium: var(--wds-space-200);
493
+ --wds-tabs-label-font-weight-active: var(--wds-font-weight-regular);
494
+ --wds-tabs-label-font-weight: var(--wds-font-weight-regular);
495
+ --wds-tabs-item-gap-small: var(--wds-space-150);
496
+ --wds-tabs-item-gap-medium: var(--wds-space-200);
497
+ --wds-tabs-item-fill-hover: var(--wds-color-black-100-transparent-0);
498
+ --wds-tabs-item-fill-active: var(--wds-color-black-100-transparent-0);
499
+ --wds-tabs-gap-horizontal: var(--wds-space-0);
500
+ --wds-tabs-border-radius: var(--wds-border-radius-0);
477
501
  --wds-table-toolbar-padding-horizontal: var(--wds-space-600);
478
502
  --wds-table-list-item-paddings: var(--wds-space-0);
479
503
  --wds-table-list-item-indentation-level-3: var(--wds-space-700);
@@ -1409,11 +1433,21 @@
1409
1433
  --wds-toggle-button-label-font-size-square-small: var(--wds-font-size-body-tiny);
1410
1434
  --wds-toggle-button-label-font-size-square-medium: var(--wds-font-size-body-tiny);
1411
1435
  --wds-toggle-button-label-font-size-square-large: var(--wds-font-size-body-tiny);
1412
- --wds-toggle-button-label-font-size-pill-small: var(--wds-font-size-body-tiny);
1436
+ --wds-toggle-button-label-font-size-round-small: var(--wds-font-size-body-tiny);
1413
1437
  --wds-toggle-button-label-fill-standard-selected-disabled: var(--wds-color-text-disabled-light);
1414
1438
  --wds-toggle-button-label-fill-standard-selected: var(--wds-color-text-primary);
1415
1439
  --wds-toggle-button-label-fill-standard-hover: var(--wds-color-text-standard-primary);
1416
1440
  --wds-toggle-button-label-fill-standard-default: var(--wds-color-text-standard-primary);
1441
+ --wds-toggle-button-label-fill-inverted-selected-hover: var(--wds-color-text-standard-primary-light);
1442
+ --wds-toggle-button-label-fill-inverted-selected-disabled: var(--wds-color-text-standard-primary-light);
1443
+ --wds-toggle-button-label-fill-inverted-selected: var(--wds-color-text-standard-primary-light);
1444
+ --wds-toggle-button-label-fill-inverted-hover: var(--wds-color-text-standard-primary);
1445
+ --wds-toggle-button-label-fill-inverted-default: var(--wds-color-text-standard-primary);
1446
+ --wds-toggle-button-label-fill-dark-selected-hover: var(--wds-color-text-standard-primary-light);
1447
+ --wds-toggle-button-label-fill-dark-selected-disabled: var(--wds-color-text-disabled-light);
1448
+ --wds-toggle-button-label-fill-dark-selected: var(--wds-color-text-standard-primary-light);
1449
+ --wds-toggle-button-label-fill-dark-hover: var(--wds-color-text-standard-secondary);
1450
+ --wds-toggle-button-label-fill-dark-default: var(--wds-color-text-standard-primary);
1417
1451
  --wds-toggle-button-fill-standard-selected-hover: var(--wds-color-fill-standard-secondary-hover);
1418
1452
  --wds-toggle-button-fill-standard-selected: var(--wds-color-fill-standard-secondary);
1419
1453
  --wds-toggle-button-fill-standard-hover: var(--wds-color-fill-standard-tertiary-hover);
@@ -1424,6 +1458,19 @@
1424
1458
  --wds-toggle-button-fill-inverted-hover: var(--wds-color-fill-standard-tertiary-hover);
1425
1459
  --wds-toggle-button-fill-inverted-disabled: var(--wds-color-fill-standard-tertiary-disabled);
1426
1460
  --wds-toggle-button-fill-inverted: var(--wds-color-fill-standard-tertiary);
1461
+ --wds-toggle-button-fill-dark-selected-hover: var(--wds-color-fill-dark-primary-hover);
1462
+ --wds-toggle-button-fill-dark-selected: var(--wds-color-fill-dark-primary);
1463
+ --wds-toggle-button-fill-dark-hover: var(--wds-color-fill-standard-tertiary-hover);
1464
+ --wds-toggle-button-fill-dark-disabled: var(--wds-color-fill-standard-tertiary-disabled);
1465
+ --wds-toggle-button-fill-dark: var(--wds-color-fill-standard-tertiary);
1466
+ --wds-toggle-button-border-color-standard-hover: var(--wds-color-border-standard-tertiary);
1467
+ --wds-toggle-button-border-color-standard: var(--wds-color-fill-standard-tertiary);
1468
+ --wds-toggle-button-border-color-inverted-hover: var(--wds-color-border-standard-tertiary-hover);
1469
+ --wds-toggle-button-border-color-inverted-disabled: var(--wds-color-border-standard-tertiary-disabled);
1470
+ --wds-toggle-button-border-color-inverted: var(--wds-color-border-standard-tertiary);
1471
+ --wds-toggle-button-border-color-dark-hover: var(--wds-color-border-standard-tertiary-hover);
1472
+ --wds-toggle-button-border-color-dark-disabled: var(--wds-color-border-standard-tertiary-disabled);
1473
+ --wds-toggle-button-border-color-dark: var(--wds-color-border-standard-tertiary);
1427
1474
  --wds-toast-background-fill: var(--wds-color-fill-dark-primary);
1428
1475
  --wds-timeline-title-font-size: var(--wds-font-size-body-tiny);
1429
1476
  --wds-thumbnail-title-font-size-tiny: var(--wds-font-size-body-tiny);
@@ -1435,6 +1482,8 @@
1435
1482
  --wds-tabs-selection-fill-secondary: var(--wds-color-fill-standard-primary);
1436
1483
  --wds-tabs-selection-fill-primary: var(--wds-color-fill-standard-primary);
1437
1484
  --wds-tabs-label-font-size-small: var(--wds-font-size-body-tiny);
1485
+ --wds-tabs-label-fill-active: var(--wds-color-text-primary);
1486
+ --wds-tabs-label-fill: var(--wds-color-text-standard-primary);
1438
1487
  --wds-table-list-item-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
1439
1488
  --wds-table-list-item-fill-active: var(--wds-color-fill-standard-tertiary-active);
1440
1489
  --wds-table-list-item-fill: var(--wds-color-fill-standard-tertiary);
@@ -1671,7 +1720,9 @@
1671
1720
  --wds-circular-progress-bar-foreground-fill-standard: var(--wds-color-fill-standard-primary);
1672
1721
  --wds-circular-progress-bar-foreground-fill-premium: var(--wds-color-fill-premium-primary);
1673
1722
  --wds-circular-progress-bar-foreground-fill-error: var(--wds-color-fill-destructive-primary);
1674
- --wds-checkbox-label-font-size-small: var(--wds-font-size-body-tiny);
1723
+ --wds-checkbox-label-font-size-small: var(--wds-font-size-body-small);
1724
+ --wds-checkbox-label-font-size-medium: var(--wds-font-size-body-medium);
1725
+ --wds-checkbox-label-disabled: var(--wds-color-text-standard-primary);
1675
1726
  --wds-checkbox-icon-disabled: var(--wds-color-text-disabled-light);
1676
1727
  --wds-checkbox-icon: var(--wds-color-text-standard-primary-light);
1677
1728
  --wds-checkbox-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
@@ -1760,7 +1811,7 @@
1760
1811
  --wds-accordion-background-fill-light-hover: var(--wds-color-fill-standard-tertiary-hover);
1761
1812
  --wds-accordion-background-fill-light: var(--wds-color-fill-standard-tertiary);
1762
1813
  --wds-vertical-tabs-section-text-font-line-height-small: var(--wds-font-line-height-body-tiny);
1763
- --wds-toggle-button-label-font-line-height-pill-small: var(--wds-font-line-height-body-tiny);
1814
+ --wds-toggle-button-label-font-line-height-round-small: var(--wds-font-line-height-body-tiny);
1764
1815
  --wds-timeline-title-font-line-height: var(--wds-font-line-height-body-tiny);
1765
1816
  --wds-thumbnail-title-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
1766
1817
  --wds-thumbnail-subtitle-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
@@ -1793,7 +1844,8 @@
1793
1844
  --wds-divider-gradient-border: linear-gradient(90deg, var(--wds-divider-fill-color-light-secondary) 0%, var(--wds-divider-fill-color-light-primary) 16%, var(--wds-divider-fill-color-light-primary) 84%, var(--wds-divider-fill-color-light-secondary) 100%);
1794
1845
  --wds-custom-modal-header-title-font-line-height: var(--wds-font-line-height-body-small);
1795
1846
  --wds-custom-modal-footnote-text-font-line-height: var(--wds-font-line-height-body-tiny);
1796
- --wds-checkbox-label-font-line-height-small: var(--wds-font-line-height-body-tiny);
1847
+ --wds-checkbox-label-font-line-height-small: var(--wds-font-line-height-body-small);
1848
+ --wds-checkbox-label-font-line-height-medium: var(--wds-font-line-height-body-medium);
1797
1849
  --wds-button-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
1798
1850
  --wds-button-font-line-height-large: var(--wds-font-line-height-body-medium);
1799
1851
  --wds-button-font-line-height-extra-large: var(--wds-font-line-height-body-medium);
package/studio/all.st.css CHANGED
@@ -234,7 +234,10 @@
234
234
  @property st-global(--wds-checkbox-group-gap-vertical);
235
235
  @property st-global(--wds-checkbox-icon);
236
236
  @property st-global(--wds-checkbox-icon-disabled);
237
+ @property st-global(--wds-checkbox-label-disabled);
238
+ @property st-global(--wds-checkbox-label-font-line-height-medium);
237
239
  @property st-global(--wds-checkbox-label-font-line-height-small);
240
+ @property st-global(--wds-checkbox-label-font-size-medium);
238
241
  @property st-global(--wds-checkbox-label-font-size-small);
239
242
  @property st-global(--wds-circular-progress-bar-background-fill-error);
240
243
  @property st-global(--wds-circular-progress-bar-background-fill-premium);
@@ -264,6 +267,7 @@
264
267
  @property st-global(--wds-color-black-100-transparent-10);
265
268
  @property st-global(--wds-color-black-100-transparent-15);
266
269
  @property st-global(--wds-color-black-100-transparent-20);
270
+ @property st-global(--wds-color-black-100-transparent-25);
267
271
  @property st-global(--wds-color-black-100-transparent-30);
268
272
  @property st-global(--wds-color-black-100-transparent-40);
269
273
  @property st-global(--wds-color-black-100-transparent-50);
@@ -1634,10 +1638,25 @@
1634
1638
  @property st-global(--wds-timeline-title-font-line-height);
1635
1639
  @property st-global(--wds-timeline-title-font-size);
1636
1640
  @property st-global(--wds-toast-background-fill);
1641
+ @property st-global(--wds-toggle-button-border-color-dark);
1642
+ @property st-global(--wds-toggle-button-border-color-dark-disabled);
1643
+ @property st-global(--wds-toggle-button-border-color-dark-hover);
1644
+ @property st-global(--wds-toggle-button-border-color-inverted);
1645
+ @property st-global(--wds-toggle-button-border-color-inverted-disabled);
1646
+ @property st-global(--wds-toggle-button-border-color-inverted-hover);
1647
+ @property st-global(--wds-toggle-button-border-color-standard);
1648
+ @property st-global(--wds-toggle-button-border-color-standard-disabled);
1649
+ @property st-global(--wds-toggle-button-border-color-standard-hover);
1637
1650
  @property st-global(--wds-toggle-button-border-radius-square-large);
1638
1651
  @property st-global(--wds-toggle-button-border-radius-square-medium);
1639
1652
  @property st-global(--wds-toggle-button-border-radius-square-small);
1640
1653
  @property st-global(--wds-toggle-button-border-radius-square-tiny);
1654
+ @property st-global(--wds-toggle-button-fill-dark);
1655
+ @property st-global(--wds-toggle-button-fill-dark-disabled);
1656
+ @property st-global(--wds-toggle-button-fill-dark-hover);
1657
+ @property st-global(--wds-toggle-button-fill-dark-selected);
1658
+ @property st-global(--wds-toggle-button-fill-dark-selected-disabled);
1659
+ @property st-global(--wds-toggle-button-fill-dark-selected-hover);
1641
1660
  @property st-global(--wds-toggle-button-fill-inverted);
1642
1661
  @property st-global(--wds-toggle-button-fill-inverted-disabled);
1643
1662
  @property st-global(--wds-toggle-button-fill-inverted-hover);
@@ -1650,47 +1669,72 @@
1650
1669
  @property st-global(--wds-toggle-button-fill-standard-selected);
1651
1670
  @property st-global(--wds-toggle-button-fill-standard-selected-disabled);
1652
1671
  @property st-global(--wds-toggle-button-fill-standard-selected-hover);
1672
+ @property st-global(--wds-toggle-button-inner-shadow-blur-primary);
1673
+ @property st-global(--wds-toggle-button-inner-shadow-blur-secondary);
1674
+ @property st-global(--wds-toggle-button-inner-shadow-fill-primary);
1675
+ @property st-global(--wds-toggle-button-inner-shadow-fill-secondary);
1676
+ @property st-global(--wds-toggle-button-inner-shadow-x-primary);
1677
+ @property st-global(--wds-toggle-button-inner-shadow-x-secondary);
1678
+ @property st-global(--wds-toggle-button-inner-shadow-y-primary);
1679
+ @property st-global(--wds-toggle-button-inner-shadow-y-secondary);
1680
+ @property st-global(--wds-toggle-button-label-fill-dark-default);
1681
+ @property st-global(--wds-toggle-button-label-fill-dark-disabled);
1682
+ @property st-global(--wds-toggle-button-label-fill-dark-hover);
1683
+ @property st-global(--wds-toggle-button-label-fill-dark-selected);
1684
+ @property st-global(--wds-toggle-button-label-fill-dark-selected-disabled);
1685
+ @property st-global(--wds-toggle-button-label-fill-dark-selected-hover);
1686
+ @property st-global(--wds-toggle-button-label-fill-inverted-default);
1687
+ @property st-global(--wds-toggle-button-label-fill-inverted-disabled);
1688
+ @property st-global(--wds-toggle-button-label-fill-inverted-hover);
1689
+ @property st-global(--wds-toggle-button-label-fill-inverted-selected);
1690
+ @property st-global(--wds-toggle-button-label-fill-inverted-selected-disabled);
1691
+ @property st-global(--wds-toggle-button-label-fill-inverted-selected-hover);
1653
1692
  @property st-global(--wds-toggle-button-label-fill-standard-default);
1654
1693
  @property st-global(--wds-toggle-button-label-fill-standard-disabled);
1655
1694
  @property st-global(--wds-toggle-button-label-fill-standard-hover);
1656
1695
  @property st-global(--wds-toggle-button-label-fill-standard-selected);
1657
1696
  @property st-global(--wds-toggle-button-label-fill-standard-selected-disabled);
1658
- @property st-global(--wds-toggle-button-label-font-line-height-pill-small);
1659
- @property st-global(--wds-toggle-button-label-font-size-pill-small);
1697
+ @property st-global(--wds-toggle-button-label-font-line-height-round-small);
1698
+ @property st-global(--wds-toggle-button-label-font-size-round-small);
1660
1699
  @property st-global(--wds-toggle-button-label-font-size-square-large);
1661
1700
  @property st-global(--wds-toggle-button-label-font-size-square-medium);
1662
1701
  @property st-global(--wds-toggle-button-label-font-size-square-small);
1663
1702
  @property st-global(--wds-toggle-button-label-font-size-square-tiny);
1664
1703
  @property st-global(--wds-toggle-button-label-font-weight-pill);
1704
+ @property st-global(--wds-toggle-button-label-font-weight-round);
1665
1705
  @property st-global(--wds-toggle-button-label-font-weight-square);
1666
- @property st-global(--wds-toggle-button-padding-horizontal-large);
1667
- @property st-global(--wds-toggle-button-padding-horizontal-large-round);
1668
- @property st-global(--wds-toggle-button-padding-horizontal-medium);
1669
- @property st-global(--wds-toggle-button-padding-horizontal-medium-round);
1670
- @property st-global(--wds-toggle-button-padding-horizontal-small);
1671
- @property st-global(--wds-toggle-button-padding-horizontal-small-round);
1672
- @property st-global(--wds-toggle-button-padding-horizontal-tiny);
1673
- @property st-global(--wds-toggle-button-padding-horizontal-tiny-round);
1674
1706
  @property st-global(--wds-toggle-button-padding-large);
1675
- @property st-global(--wds-toggle-button-padding-left-large);
1676
- @property st-global(--wds-toggle-button-padding-left-large-round);
1677
- @property st-global(--wds-toggle-button-padding-left-medium);
1678
- @property st-global(--wds-toggle-button-padding-left-medium-round);
1679
- @property st-global(--wds-toggle-button-padding-left-small);
1680
- @property st-global(--wds-toggle-button-padding-left-small-round);
1681
- @property st-global(--wds-toggle-button-padding-left-tiny);
1682
- @property st-global(--wds-toggle-button-padding-left-tiny-round);
1707
+ @property st-global(--wds-toggle-button-padding-large-round);
1683
1708
  @property st-global(--wds-toggle-button-padding-medium);
1684
- @property st-global(--wds-toggle-button-padding-right-large);
1685
- @property st-global(--wds-toggle-button-padding-right-large-round);
1686
- @property st-global(--wds-toggle-button-padding-right-medium);
1687
- @property st-global(--wds-toggle-button-padding-right-medium-round);
1688
- @property st-global(--wds-toggle-button-padding-right-small);
1689
- @property st-global(--wds-toggle-button-padding-right-small-round);
1690
- @property st-global(--wds-toggle-button-padding-right-tiny);
1691
- @property st-global(--wds-toggle-button-padding-right-tiny-round);
1709
+ @property st-global(--wds-toggle-button-padding-medium-round);
1692
1710
  @property st-global(--wds-toggle-button-padding-small);
1711
+ @property st-global(--wds-toggle-button-padding-small-round);
1693
1712
  @property st-global(--wds-toggle-button-padding-tiny);
1713
+ @property st-global(--wds-toggle-button-padding-tiny-round);
1714
+ @property st-global(--wds-toggle-button-shadow-blur-primary);
1715
+ @property st-global(--wds-toggle-button-shadow-blur-primary-inverted);
1716
+ @property st-global(--wds-toggle-button-shadow-blur-secondary);
1717
+ @property st-global(--wds-toggle-button-shadow-blur-secondary-inverted);
1718
+ @property st-global(--wds-toggle-button-shadow-blur-tertiary);
1719
+ @property st-global(--wds-toggle-button-shadow-blur-tertiary-inverted);
1720
+ @property st-global(--wds-toggle-button-shadow-fill-primary);
1721
+ @property st-global(--wds-toggle-button-shadow-fill-primary-inverted);
1722
+ @property st-global(--wds-toggle-button-shadow-fill-secondary);
1723
+ @property st-global(--wds-toggle-button-shadow-fill-secondary-inverted);
1724
+ @property st-global(--wds-toggle-button-shadow-fill-tertiary);
1725
+ @property st-global(--wds-toggle-button-shadow-fill-tertiary-inverted);
1726
+ @property st-global(--wds-toggle-button-shadow-x-primary);
1727
+ @property st-global(--wds-toggle-button-shadow-x-primary-inverted);
1728
+ @property st-global(--wds-toggle-button-shadow-x-secondary);
1729
+ @property st-global(--wds-toggle-button-shadow-x-secondary-inverted);
1730
+ @property st-global(--wds-toggle-button-shadow-x-tertiary);
1731
+ @property st-global(--wds-toggle-button-shadow-x-tertiary-inverted);
1732
+ @property st-global(--wds-toggle-button-shadow-y-primary);
1733
+ @property st-global(--wds-toggle-button-shadow-y-primary-inverted);
1734
+ @property st-global(--wds-toggle-button-shadow-y-secondary);
1735
+ @property st-global(--wds-toggle-button-shadow-y-secondary-inverted);
1736
+ @property st-global(--wds-toggle-button-shadow-y-tertiary);
1737
+ @property st-global(--wds-toggle-button-shadow-y-tertiary-inverted);
1694
1738
  @property st-global(--wds-toggle-switch-border-error-disabled);
1695
1739
  @property st-global(--wds-toggle-switch-border-standard-disabled);
1696
1740
  @property st-global(--wds-toggle-switch-border-success-disabled);
@@ -2046,8 +2090,11 @@
2046
2090
  --wds-checkbox-group-gap-vertical: 12px;
2047
2091
  --wds-checkbox-icon: #ffffff;
2048
2092
  --wds-checkbox-icon-disabled: rgba(255, 255, 255, .7);
2049
- --wds-checkbox-label-font-line-height-small: 16px;
2050
- --wds-checkbox-label-font-size-small: 12px;
2093
+ --wds-checkbox-label-disabled: #131720;
2094
+ --wds-checkbox-label-font-line-height-medium: 24px;
2095
+ --wds-checkbox-label-font-line-height-small: 20px;
2096
+ --wds-checkbox-label-font-size-medium: 16px;
2097
+ --wds-checkbox-label-font-size-small: 14px;
2051
2098
  --wds-circular-progress-bar-background-fill-error: #e5e5e5;
2052
2099
  --wds-circular-progress-bar-background-fill-premium: #e5e5e5;
2053
2100
  --wds-circular-progress-bar-background-fill-standard: #e5e5e5;
@@ -2076,6 +2123,7 @@
2076
2123
  --wds-color-black-100-transparent-10: rgba(19, 23, 32, .1);
2077
2124
  --wds-color-black-100-transparent-15: rgba(19, 23, 32, 0.15);
2078
2125
  --wds-color-black-100-transparent-20: rgba(19, 23, 32, .2);
2126
+ --wds-color-black-100-transparent-25: rgba(19, 23, 32, .25);
2079
2127
  --wds-color-black-100-transparent-30: rgba(19, 23, 32, .3);
2080
2128
  --wds-color-black-100-transparent-40: rgba(19, 23, 32, .4);
2081
2129
  --wds-color-black-100-transparent-50: rgba(19, 23, 32, .5);
@@ -3446,10 +3494,25 @@
3446
3494
  --wds-timeline-title-font-line-height: 16px;
3447
3495
  --wds-timeline-title-font-size: 12px;
3448
3496
  --wds-toast-background-fill: #131720;
3449
- --wds-toggle-button-border-radius-square-large: 6px;
3450
- --wds-toggle-button-border-radius-square-medium: 6px;
3497
+ --wds-toggle-button-border-color-dark: #e2e3ea;
3498
+ --wds-toggle-button-border-color-dark-disabled: rgba(19, 23, 32, .1);
3499
+ --wds-toggle-button-border-color-dark-hover: #dce9ff;
3500
+ --wds-toggle-button-border-color-inverted: #e2e3ea;
3501
+ --wds-toggle-button-border-color-inverted-disabled: rgba(19, 23, 32, .1);
3502
+ --wds-toggle-button-border-color-inverted-hover: #dce9ff;
3503
+ --wds-toggle-button-border-color-standard: #ffffff;
3504
+ --wds-toggle-button-border-color-standard-disabled: #e5e5e5;
3505
+ --wds-toggle-button-border-color-standard-hover: #e2e3ea;
3506
+ --wds-toggle-button-border-radius-square-large: 4px;
3507
+ --wds-toggle-button-border-radius-square-medium: 4px;
3451
3508
  --wds-toggle-button-border-radius-square-small: 4px;
3452
3509
  --wds-toggle-button-border-radius-square-tiny: 4px;
3510
+ --wds-toggle-button-fill-dark: #ffffff;
3511
+ --wds-toggle-button-fill-dark-disabled: #ffffff;
3512
+ --wds-toggle-button-fill-dark-hover: #f7f8f8;
3513
+ --wds-toggle-button-fill-dark-selected: #131720;
3514
+ --wds-toggle-button-fill-dark-selected-disabled: #bebebe;
3515
+ --wds-toggle-button-fill-dark-selected-hover: #42454c;
3453
3516
  --wds-toggle-button-fill-inverted: #ffffff;
3454
3517
  --wds-toggle-button-fill-inverted-disabled: #ffffff;
3455
3518
  --wds-toggle-button-fill-inverted-hover: #f7f8f8;
@@ -3462,47 +3525,72 @@
3462
3525
  --wds-toggle-button-fill-standard-selected: #dce9ff;
3463
3526
  --wds-toggle-button-fill-standard-selected-disabled: #bebebe;
3464
3527
  --wds-toggle-button-fill-standard-selected-hover: #c3daff;
3528
+ --wds-toggle-button-inner-shadow-blur-primary: 0;
3529
+ --wds-toggle-button-inner-shadow-blur-secondary: 0;
3530
+ --wds-toggle-button-inner-shadow-fill-primary: rgba(255, 255, 255, 0);
3531
+ --wds-toggle-button-inner-shadow-fill-secondary: rgba(255, 255, 255, 0);
3532
+ --wds-toggle-button-inner-shadow-x-primary: 0;
3533
+ --wds-toggle-button-inner-shadow-x-secondary: 0;
3534
+ --wds-toggle-button-inner-shadow-y-primary: 0;
3535
+ --wds-toggle-button-inner-shadow-y-secondary: 0;
3536
+ --wds-toggle-button-label-fill-dark-default: #131720;
3537
+ --wds-toggle-button-label-fill-dark-disabled: #bebebe;
3538
+ --wds-toggle-button-label-fill-dark-hover: #42454c;
3539
+ --wds-toggle-button-label-fill-dark-selected: #ffffff;
3540
+ --wds-toggle-button-label-fill-dark-selected-disabled: rgba(255, 255, 255, .7);
3541
+ --wds-toggle-button-label-fill-dark-selected-hover: #ffffff;
3542
+ --wds-toggle-button-label-fill-inverted-default: #131720;
3543
+ --wds-toggle-button-label-fill-inverted-disabled: #bebebe;
3544
+ --wds-toggle-button-label-fill-inverted-hover: #131720;
3545
+ --wds-toggle-button-label-fill-inverted-selected: #ffffff;
3546
+ --wds-toggle-button-label-fill-inverted-selected-disabled: #ffffff;
3547
+ --wds-toggle-button-label-fill-inverted-selected-hover: #ffffff;
3465
3548
  --wds-toggle-button-label-fill-standard-default: #131720;
3466
3549
  --wds-toggle-button-label-fill-standard-disabled: #bebebe;
3467
3550
  --wds-toggle-button-label-fill-standard-hover: #131720;
3468
3551
  --wds-toggle-button-label-fill-standard-selected: #116dff;
3469
3552
  --wds-toggle-button-label-fill-standard-selected-disabled: rgba(255, 255, 255, .7);
3470
- --wds-toggle-button-label-font-line-height-pill-small: 16px;
3471
- --wds-toggle-button-label-font-size-pill-small: 12px;
3553
+ --wds-toggle-button-label-font-line-height-round-small: 16px;
3554
+ --wds-toggle-button-label-font-size-round-small: 12px;
3472
3555
  --wds-toggle-button-label-font-size-square-large: 12px;
3473
3556
  --wds-toggle-button-label-font-size-square-medium: 12px;
3474
3557
  --wds-toggle-button-label-font-size-square-small: 12px;
3475
3558
  --wds-toggle-button-label-font-size-square-tiny: 12px;
3476
3559
  --wds-toggle-button-label-font-weight-pill: 400;
3560
+ --wds-toggle-button-label-font-weight-round: 400;
3477
3561
  --wds-toggle-button-label-font-weight-square: 400;
3478
- --wds-toggle-button-padding-horizontal-large: 16px;
3479
- --wds-toggle-button-padding-horizontal-large-round: 16px;
3480
- --wds-toggle-button-padding-horizontal-medium: 12px;
3481
- --wds-toggle-button-padding-horizontal-medium-round: 16px;
3482
- --wds-toggle-button-padding-horizontal-small: 12px;
3483
- --wds-toggle-button-padding-horizontal-small-round: 16px;
3484
- --wds-toggle-button-padding-horizontal-tiny: 6px;
3485
- --wds-toggle-button-padding-horizontal-tiny-round: 12px;
3486
3562
  --wds-toggle-button-padding-large: 16px;
3487
- --wds-toggle-button-padding-left-large: 8px;
3488
- --wds-toggle-button-padding-left-large-round: 12px;
3489
- --wds-toggle-button-padding-left-medium: 6px;
3490
- --wds-toggle-button-padding-left-medium-round: 12px;
3491
- --wds-toggle-button-padding-left-small: 6px;
3492
- --wds-toggle-button-padding-left-small-round: 12px;
3493
- --wds-toggle-button-padding-left-tiny: 4px;
3494
- --wds-toggle-button-padding-left-tiny-round: 6px;
3563
+ --wds-toggle-button-padding-large-round: 16px;
3495
3564
  --wds-toggle-button-padding-medium: 12px;
3496
- --wds-toggle-button-padding-right-large: 16px;
3497
- --wds-toggle-button-padding-right-large-round: 16px;
3498
- --wds-toggle-button-padding-right-medium: 12px;
3499
- --wds-toggle-button-padding-right-medium-round: 16px;
3500
- --wds-toggle-button-padding-right-small: 12px;
3501
- --wds-toggle-button-padding-right-small-round: 16px;
3502
- --wds-toggle-button-padding-right-tiny: 6px;
3503
- --wds-toggle-button-padding-right-tiny-round: 12px;
3565
+ --wds-toggle-button-padding-medium-round: 16px;
3504
3566
  --wds-toggle-button-padding-small: 12px;
3567
+ --wds-toggle-button-padding-small-round: 16px;
3505
3568
  --wds-toggle-button-padding-tiny: 6px;
3569
+ --wds-toggle-button-padding-tiny-round: 12px;
3570
+ --wds-toggle-button-shadow-blur-primary: 0;
3571
+ --wds-toggle-button-shadow-blur-primary-inverted: 0;
3572
+ --wds-toggle-button-shadow-blur-secondary: 0;
3573
+ --wds-toggle-button-shadow-blur-secondary-inverted: 0;
3574
+ --wds-toggle-button-shadow-blur-tertiary: 0;
3575
+ --wds-toggle-button-shadow-blur-tertiary-inverted: 0;
3576
+ --wds-toggle-button-shadow-fill-primary: rgba(19, 23, 32, 0);
3577
+ --wds-toggle-button-shadow-fill-primary-inverted: rgba(19, 23, 32, 0);
3578
+ --wds-toggle-button-shadow-fill-secondary: rgba(19, 23, 32, 0);
3579
+ --wds-toggle-button-shadow-fill-secondary-inverted: rgba(19, 23, 32, 0);
3580
+ --wds-toggle-button-shadow-fill-tertiary: rgba(19, 23, 32, 0);
3581
+ --wds-toggle-button-shadow-fill-tertiary-inverted: rgba(19, 23, 32, 0);
3582
+ --wds-toggle-button-shadow-x-primary: 0;
3583
+ --wds-toggle-button-shadow-x-primary-inverted: 0;
3584
+ --wds-toggle-button-shadow-x-secondary: 0;
3585
+ --wds-toggle-button-shadow-x-secondary-inverted: 0;
3586
+ --wds-toggle-button-shadow-x-tertiary: 0;
3587
+ --wds-toggle-button-shadow-x-tertiary-inverted: 0;
3588
+ --wds-toggle-button-shadow-y-primary: 0;
3589
+ --wds-toggle-button-shadow-y-primary-inverted: 0;
3590
+ --wds-toggle-button-shadow-y-secondary: 0;
3591
+ --wds-toggle-button-shadow-y-secondary-inverted: 0;
3592
+ --wds-toggle-button-shadow-y-tertiary: 0;
3593
+ --wds-toggle-button-shadow-y-tertiary-inverted: 0;
3506
3594
  --wds-toggle-switch-border-error-disabled: rgba(19, 23, 32, 0);
3507
3595
  --wds-toggle-switch-border-standard-disabled: rgba(19, 23, 32, 0);
3508
3596
  --wds-toggle-switch-border-success-disabled: rgba(19, 23, 32, 0);