@wix/design-system-tokens 1.123.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 (23) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/all.css +68 -19
  3. package/all.scss +68 -19
  4. package/all.st.css +134 -36
  5. package/component.st.css +132 -36
  6. package/foundation.st.css +2 -0
  7. package/odeditor/all.css +93 -20
  8. package/odeditor/all.scss +93 -20
  9. package/odeditor/all.st.css +166 -20
  10. package/odeditor/component.st.css +164 -20
  11. package/odeditor/foundation.st.css +2 -0
  12. package/package.json +3 -3
  13. package/studio/all.css +69 -28
  14. package/studio/all.scss +69 -28
  15. package/studio/all.st.css +136 -54
  16. package/studio/component.st.css +134 -54
  17. package/studio/foundation.st.css +2 -0
  18. package/wixel/all.css +76 -35
  19. package/wixel/all.scss +76 -35
  20. package/wixel/all.st.css +347 -265
  21. package/wixel/component.st.css +289 -209
  22. package/wixel/foundation.st.css +11 -9
  23. package/wixel/semantic.st.css +47 -47
package/CHANGELOG.md CHANGED
@@ -1,3 +1,9 @@
1
+ ## 1.124.0 - 2025-08-04
2
+
3
+ ### Visual Breaking Changes
4
+
5
+ - breaking(ToggleButton): tokenization for E3 [15143](https://github.com/wix-private/wix-design-systems/pull/15143)
6
+
1
7
  ## 1.123.0 - 2025-07-30
2
8
 
3
9
  ### Visual Breaking Changes
package/all.css CHANGED
@@ -219,6 +219,7 @@
219
219
  --wds-color-black-100-transparent-50: rgba(0, 6, 36, .5);
220
220
  --wds-color-black-100-transparent-40: rgba(0, 6, 36, .4);
221
221
  --wds-color-black-100-transparent-30: rgba(0, 6, 36, .3);
222
+ --wds-color-black-100-transparent-25: rgba(0, 6, 36, .25);
222
223
  --wds-color-black-100-transparent-20: rgba(0, 6, 36, .2);
223
224
  --wds-color-black-100-transparent-15: rgba(0, 6, 36, 0.15);
224
225
  --wds-color-black-100-transparent-10: rgba(0, 6, 36, .1);
@@ -772,28 +773,49 @@
772
773
  --wds-tooltip-border-radius-medium: var(--wds-border-radius-400);
773
774
  --wds-tooltip-border-radius: var(--wds-border-radius-400);
774
775
  --wds-toggle-switch-padding: var(--wds-space-25);
776
+ --wds-toggle-button-shadow-y-tertiary-inverted: var(--wds-shadow-y-0);
777
+ --wds-toggle-button-shadow-y-tertiary: var(--wds-shadow-y-0);
778
+ --wds-toggle-button-shadow-y-secondary-inverted: var(--wds-shadow-y-0);
779
+ --wds-toggle-button-shadow-y-secondary: var(--wds-shadow-y-0);
780
+ --wds-toggle-button-shadow-y-primary-inverted: var(--wds-shadow-y-0);
781
+ --wds-toggle-button-shadow-y-primary: var(--wds-shadow-y-0);
782
+ --wds-toggle-button-shadow-x-tertiary-inverted: var(--wds-shadow-x-0);
783
+ --wds-toggle-button-shadow-x-tertiary: var(--wds-shadow-x-0);
784
+ --wds-toggle-button-shadow-x-secondary-inverted: var(--wds-shadow-x-0);
785
+ --wds-toggle-button-shadow-x-secondary: var(--wds-shadow-x-0);
786
+ --wds-toggle-button-shadow-x-primary-inverted: var(--wds-shadow-x-0);
787
+ --wds-toggle-button-shadow-x-primary: var(--wds-shadow-x-0);
788
+ --wds-toggle-button-shadow-fill-tertiary-inverted: var(--wds-color-black-100-transparent-0);
789
+ --wds-toggle-button-shadow-fill-tertiary: var(--wds-color-black-100-transparent-0);
790
+ --wds-toggle-button-shadow-fill-secondary-inverted: var(--wds-color-black-100-transparent-0);
791
+ --wds-toggle-button-shadow-fill-secondary: var(--wds-color-black-100-transparent-0);
792
+ --wds-toggle-button-shadow-fill-primary-inverted: var(--wds-color-black-100-transparent-0);
793
+ --wds-toggle-button-shadow-fill-primary: var(--wds-color-black-100-transparent-0);
794
+ --wds-toggle-button-shadow-blur-tertiary-inverted: var(--wds-shadow-blur-0);
795
+ --wds-toggle-button-shadow-blur-tertiary: var(--wds-shadow-blur-0);
796
+ --wds-toggle-button-shadow-blur-secondary-inverted: var(--wds-shadow-blur-0);
797
+ --wds-toggle-button-shadow-blur-secondary: var(--wds-shadow-blur-0);
798
+ --wds-toggle-button-shadow-blur-primary-inverted: var(--wds-shadow-blur-0);
799
+ --wds-toggle-button-shadow-blur-primary: var(--wds-shadow-blur-0);
800
+ --wds-toggle-button-padding-tiny-round: var(--wds-space-200);
775
801
  --wds-toggle-button-padding-tiny: var(--wds-space-100);
802
+ --wds-toggle-button-padding-small-round: var(--wds-space-300);
776
803
  --wds-toggle-button-padding-small: var(--wds-space-200);
777
- --wds-toggle-button-padding-right-tiny-round: var(--wds-space-200);
778
- --wds-toggle-button-padding-right-tiny: var(--wds-space-100);
779
- --wds-toggle-button-padding-right-small-round: var(--wds-space-300);
780
- --wds-toggle-button-padding-right-small: var(--wds-space-200);
781
- --wds-toggle-button-padding-right-medium-round: var(--wds-space-400);
782
- --wds-toggle-button-padding-right-medium: var(--wds-space-200);
783
- --wds-toggle-button-padding-right-large-round: var(--wds-space-500);
784
- --wds-toggle-button-padding-right-large: var(--wds-space-300);
804
+ --wds-toggle-button-padding-medium-round: var(--wds-space-400);
785
805
  --wds-toggle-button-padding-medium: var(--wds-space-200);
786
- --wds-toggle-button-padding-left-tiny-round: var(--wds-space-100);
787
- --wds-toggle-button-padding-left-tiny: var(--wds-space-50);
788
- --wds-toggle-button-padding-left-small-round: var(--wds-space-200);
789
- --wds-toggle-button-padding-left-small: var(--wds-space-100);
790
- --wds-toggle-button-padding-left-medium-round: var(--wds-space-200);
791
- --wds-toggle-button-padding-left-medium: var(--wds-space-100);
792
- --wds-toggle-button-padding-left-large-round: var(--wds-space-200);
793
- --wds-toggle-button-padding-left-large: var(--wds-space-150);
806
+ --wds-toggle-button-padding-large-round: var(--wds-space-500);
794
807
  --wds-toggle-button-padding-large: var(--wds-space-300);
795
808
  --wds-toggle-button-label-font-weight-square: var(--wds-font-weight-regular);
809
+ --wds-toggle-button-label-font-weight-round: var(--wds-font-weight-regular);
796
810
  --wds-toggle-button-label-font-weight-pill: var(--wds-font-weight-regular);
811
+ --wds-toggle-button-inner-shadow-y-secondary: var(--wds-shadow-y-0);
812
+ --wds-toggle-button-inner-shadow-y-primary: var(--wds-shadow-y-0);
813
+ --wds-toggle-button-inner-shadow-x-secondary: var(--wds-shadow-x-0);
814
+ --wds-toggle-button-inner-shadow-x-primary: var(--wds-shadow-x-0);
815
+ --wds-toggle-button-inner-shadow-fill-secondary: var(--wds-color-white-transparent-0);
816
+ --wds-toggle-button-inner-shadow-fill-primary: var(--wds-color-white-transparent-0);
817
+ --wds-toggle-button-inner-shadow-blur-secondary: var(--wds-shadow-blur-0);
818
+ --wds-toggle-button-inner-shadow-blur-primary: var(--wds-shadow-blur-0);
797
819
  --wds-toggle-button-border-radius-square-tiny: var(--wds-border-radius-200);
798
820
  --wds-toggle-button-border-radius-square-small: var(--wds-border-radius-200);
799
821
  --wds-toggle-button-border-radius-square-medium: var(--wds-border-radius-300);
@@ -1381,16 +1403,28 @@
1381
1403
  --wds-toggle-button-label-font-size-square-small: var(--wds-font-size-body-tiny);
1382
1404
  --wds-toggle-button-label-font-size-square-medium: var(--wds-font-size-body-tiny);
1383
1405
  --wds-toggle-button-label-font-size-square-large: var(--wds-font-size-body-tiny);
1384
- --wds-toggle-button-label-font-size-pill-small: var(--wds-font-size-body-small);
1406
+ --wds-toggle-button-label-font-size-round-small: var(--wds-font-size-body-small);
1385
1407
  --wds-toggle-button-label-fill-standard-selected-disabled: var(--wds-color-text-disabled-light);
1386
1408
  --wds-toggle-button-label-fill-standard-selected: var(--wds-color-text-primary);
1387
1409
  --wds-toggle-button-label-fill-standard-hover: var(--wds-color-text-primary);
1388
1410
  --wds-toggle-button-label-fill-standard-disabled: var(--wds-color-text-disabled);
1389
1411
  --wds-toggle-button-label-fill-standard-default: var(--wds-color-text-standard-primary);
1412
+ --wds-toggle-button-label-fill-inverted-selected-hover: var(--wds-color-text-standard-primary-light);
1413
+ --wds-toggle-button-label-fill-inverted-selected-disabled: var(--wds-color-text-standard-primary-light);
1414
+ --wds-toggle-button-label-fill-inverted-selected: var(--wds-color-text-standard-primary-light);
1415
+ --wds-toggle-button-label-fill-inverted-hover: var(--wds-color-text-primary);
1416
+ --wds-toggle-button-label-fill-inverted-disabled: var(--wds-color-text-disabled);
1417
+ --wds-toggle-button-label-fill-inverted-default: var(--wds-color-text-standard-primary);
1418
+ --wds-toggle-button-label-fill-dark-selected-hover: var(--wds-color-text-standard-primary-light);
1419
+ --wds-toggle-button-label-fill-dark-selected-disabled: var(--wds-color-text-disabled-light);
1420
+ --wds-toggle-button-label-fill-dark-selected: var(--wds-color-text-standard-primary-light);
1421
+ --wds-toggle-button-label-fill-dark-hover: var(--wds-color-text-standard-secondary);
1422
+ --wds-toggle-button-label-fill-dark-disabled: var(--wds-color-text-disabled);
1423
+ --wds-toggle-button-label-fill-dark-default: var(--wds-color-text-standard-primary);
1390
1424
  --wds-toggle-button-fill-standard-selected-hover: var(--wds-color-fill-standard-secondary-hover);
1391
1425
  --wds-toggle-button-fill-standard-selected-disabled: var(--wds-color-fill-standard-primary-disabled);
1392
1426
  --wds-toggle-button-fill-standard-selected: var(--wds-color-fill-standard-secondary);
1393
- --wds-toggle-button-fill-standard-hover: var(--wds-color-text-standard-primary-light);
1427
+ --wds-toggle-button-fill-standard-hover: var(--wds-color-fill-standard-tertiary);
1394
1428
  --wds-toggle-button-fill-standard-disabled: var(--wds-color-fill-standard-tertiary-disabled);
1395
1429
  --wds-toggle-button-fill-standard: var(--wds-color-fill-standard-tertiary);
1396
1430
  --wds-toggle-button-fill-inverted-selected-hover: var(--wds-color-fill-standard-primary-hover);
@@ -1399,6 +1433,21 @@
1399
1433
  --wds-toggle-button-fill-inverted-hover: var(--wds-color-fill-standard-tertiary-hover);
1400
1434
  --wds-toggle-button-fill-inverted-disabled: var(--wds-color-fill-standard-tertiary-disabled);
1401
1435
  --wds-toggle-button-fill-inverted: var(--wds-color-fill-standard-tertiary);
1436
+ --wds-toggle-button-fill-dark-selected-hover: var(--wds-color-fill-dark-primary-hover);
1437
+ --wds-toggle-button-fill-dark-selected-disabled: var(--wds-color-fill-standard-primary-disabled);
1438
+ --wds-toggle-button-fill-dark-selected: var(--wds-color-fill-dark-primary);
1439
+ --wds-toggle-button-fill-dark-hover: var(--wds-color-fill-dark-tertiary);
1440
+ --wds-toggle-button-fill-dark-disabled: var(--wds-color-fill-standard-tertiary-disabled);
1441
+ --wds-toggle-button-fill-dark: var(--wds-color-fill-dark-tertiary);
1442
+ --wds-toggle-button-border-color-standard-hover: var(--wds-color-border-standard-tertiary-hover);
1443
+ --wds-toggle-button-border-color-standard-disabled: var(--wds-color-border-standard-secondary-disabled);
1444
+ --wds-toggle-button-border-color-standard: var(--wds-color-border-standard-tertiary);
1445
+ --wds-toggle-button-border-color-inverted-hover: var(--wds-color-border-standard-tertiary-hover);
1446
+ --wds-toggle-button-border-color-inverted-disabled: var(--wds-color-border-standard-tertiary-disabled);
1447
+ --wds-toggle-button-border-color-inverted: var(--wds-color-border-standard-tertiary);
1448
+ --wds-toggle-button-border-color-dark-hover: var(--wds-color-border-standard-tertiary-hover);
1449
+ --wds-toggle-button-border-color-dark-disabled: var(--wds-color-border-standard-tertiary-disabled);
1450
+ --wds-toggle-button-border-color-dark: var(--wds-color-border-standard-tertiary);
1402
1451
  --wds-toast-background-fill: var(--wds-color-fill-dark-primary);
1403
1452
  --wds-timeline-title-font-size: var(--wds-font-size-body-small);
1404
1453
  --wds-thumbnail-title-font-size-tiny: var(--wds-font-size-body-tiny);
@@ -1768,7 +1817,7 @@
1768
1817
  --wds-accordion-background-fill-light-hover: var(--wds-color-fill-standard-tertiary-hover);
1769
1818
  --wds-accordion-background-fill-light: var(--wds-color-fill-standard-tertiary);
1770
1819
  --wds-vertical-tabs-section-text-font-line-height-small: var(--wds-font-line-height-body-small);
1771
- --wds-toggle-button-label-font-line-height-pill-small: var(--wds-font-line-height-body-small);
1820
+ --wds-toggle-button-label-font-line-height-round-small: var(--wds-font-line-height-body-small);
1772
1821
  --wds-timeline-title-font-line-height: var(--wds-font-line-height-body-small);
1773
1822
  --wds-thumbnail-title-font-line-height-tiny: var(--wds-font-line-height-body-small);
1774
1823
  --wds-thumbnail-subtitle-font-line-height-tiny: var(--wds-font-line-height-body-small);
package/all.scss CHANGED
@@ -284,6 +284,7 @@
284
284
  --wds-color-black-100-transparent-50: rgba(0, 6, 36, .5);
285
285
  --wds-color-black-100-transparent-40: rgba(0, 6, 36, .4);
286
286
  --wds-color-black-100-transparent-30: rgba(0, 6, 36, .3);
287
+ --wds-color-black-100-transparent-25: rgba(0, 6, 36, .25);
287
288
  --wds-color-black-100-transparent-20: rgba(0, 6, 36, .2);
288
289
  --wds-color-black-100-transparent-15: rgba(0, 6, 36, 0.15);
289
290
  --wds-color-black-100-transparent-10: rgba(0, 6, 36, .1);
@@ -368,28 +369,49 @@
368
369
  --wds-tooltip-border-radius-medium: var(--wds-border-radius-400);
369
370
  --wds-tooltip-border-radius: var(--wds-border-radius-400);
370
371
  --wds-toggle-switch-padding: var(--wds-space-25);
372
+ --wds-toggle-button-shadow-y-tertiary-inverted: var(--wds-shadow-y-0);
373
+ --wds-toggle-button-shadow-y-tertiary: var(--wds-shadow-y-0);
374
+ --wds-toggle-button-shadow-y-secondary-inverted: var(--wds-shadow-y-0);
375
+ --wds-toggle-button-shadow-y-secondary: var(--wds-shadow-y-0);
376
+ --wds-toggle-button-shadow-y-primary-inverted: var(--wds-shadow-y-0);
377
+ --wds-toggle-button-shadow-y-primary: var(--wds-shadow-y-0);
378
+ --wds-toggle-button-shadow-x-tertiary-inverted: var(--wds-shadow-x-0);
379
+ --wds-toggle-button-shadow-x-tertiary: var(--wds-shadow-x-0);
380
+ --wds-toggle-button-shadow-x-secondary-inverted: var(--wds-shadow-x-0);
381
+ --wds-toggle-button-shadow-x-secondary: var(--wds-shadow-x-0);
382
+ --wds-toggle-button-shadow-x-primary-inverted: var(--wds-shadow-x-0);
383
+ --wds-toggle-button-shadow-x-primary: var(--wds-shadow-x-0);
384
+ --wds-toggle-button-shadow-fill-tertiary-inverted: var(--wds-color-black-100-transparent-0);
385
+ --wds-toggle-button-shadow-fill-tertiary: var(--wds-color-black-100-transparent-0);
386
+ --wds-toggle-button-shadow-fill-secondary-inverted: var(--wds-color-black-100-transparent-0);
387
+ --wds-toggle-button-shadow-fill-secondary: var(--wds-color-black-100-transparent-0);
388
+ --wds-toggle-button-shadow-fill-primary-inverted: var(--wds-color-black-100-transparent-0);
389
+ --wds-toggle-button-shadow-fill-primary: var(--wds-color-black-100-transparent-0);
390
+ --wds-toggle-button-shadow-blur-tertiary-inverted: var(--wds-shadow-blur-0);
391
+ --wds-toggle-button-shadow-blur-tertiary: var(--wds-shadow-blur-0);
392
+ --wds-toggle-button-shadow-blur-secondary-inverted: var(--wds-shadow-blur-0);
393
+ --wds-toggle-button-shadow-blur-secondary: var(--wds-shadow-blur-0);
394
+ --wds-toggle-button-shadow-blur-primary-inverted: var(--wds-shadow-blur-0);
395
+ --wds-toggle-button-shadow-blur-primary: var(--wds-shadow-blur-0);
396
+ --wds-toggle-button-padding-tiny-round: var(--wds-space-200);
371
397
  --wds-toggle-button-padding-tiny: var(--wds-space-100);
398
+ --wds-toggle-button-padding-small-round: var(--wds-space-300);
372
399
  --wds-toggle-button-padding-small: var(--wds-space-200);
373
- --wds-toggle-button-padding-right-tiny-round: var(--wds-space-200);
374
- --wds-toggle-button-padding-right-tiny: var(--wds-space-100);
375
- --wds-toggle-button-padding-right-small-round: var(--wds-space-300);
376
- --wds-toggle-button-padding-right-small: var(--wds-space-200);
377
- --wds-toggle-button-padding-right-medium-round: var(--wds-space-400);
378
- --wds-toggle-button-padding-right-medium: var(--wds-space-200);
379
- --wds-toggle-button-padding-right-large-round: var(--wds-space-500);
380
- --wds-toggle-button-padding-right-large: var(--wds-space-300);
400
+ --wds-toggle-button-padding-medium-round: var(--wds-space-400);
381
401
  --wds-toggle-button-padding-medium: var(--wds-space-200);
382
- --wds-toggle-button-padding-left-tiny-round: var(--wds-space-100);
383
- --wds-toggle-button-padding-left-tiny: var(--wds-space-50);
384
- --wds-toggle-button-padding-left-small-round: var(--wds-space-200);
385
- --wds-toggle-button-padding-left-small: var(--wds-space-100);
386
- --wds-toggle-button-padding-left-medium-round: var(--wds-space-200);
387
- --wds-toggle-button-padding-left-medium: var(--wds-space-100);
388
- --wds-toggle-button-padding-left-large-round: var(--wds-space-200);
389
- --wds-toggle-button-padding-left-large: var(--wds-space-150);
402
+ --wds-toggle-button-padding-large-round: var(--wds-space-500);
390
403
  --wds-toggle-button-padding-large: var(--wds-space-300);
391
404
  --wds-toggle-button-label-font-weight-square: var(--wds-font-weight-regular);
405
+ --wds-toggle-button-label-font-weight-round: var(--wds-font-weight-regular);
392
406
  --wds-toggle-button-label-font-weight-pill: var(--wds-font-weight-regular);
407
+ --wds-toggle-button-inner-shadow-y-secondary: var(--wds-shadow-y-0);
408
+ --wds-toggle-button-inner-shadow-y-primary: var(--wds-shadow-y-0);
409
+ --wds-toggle-button-inner-shadow-x-secondary: var(--wds-shadow-x-0);
410
+ --wds-toggle-button-inner-shadow-x-primary: var(--wds-shadow-x-0);
411
+ --wds-toggle-button-inner-shadow-fill-secondary: var(--wds-color-white-transparent-0);
412
+ --wds-toggle-button-inner-shadow-fill-primary: var(--wds-color-white-transparent-0);
413
+ --wds-toggle-button-inner-shadow-blur-secondary: var(--wds-shadow-blur-0);
414
+ --wds-toggle-button-inner-shadow-blur-primary: var(--wds-shadow-blur-0);
393
415
  --wds-toggle-button-border-radius-square-tiny: var(--wds-border-radius-200);
394
416
  --wds-toggle-button-border-radius-square-small: var(--wds-border-radius-200);
395
417
  --wds-toggle-button-border-radius-square-medium: var(--wds-border-radius-300);
@@ -1363,16 +1385,28 @@
1363
1385
  --wds-toggle-button-label-font-size-square-small: var(--wds-font-size-body-tiny);
1364
1386
  --wds-toggle-button-label-font-size-square-medium: var(--wds-font-size-body-tiny);
1365
1387
  --wds-toggle-button-label-font-size-square-large: var(--wds-font-size-body-tiny);
1366
- --wds-toggle-button-label-font-size-pill-small: var(--wds-font-size-body-small);
1388
+ --wds-toggle-button-label-font-size-round-small: var(--wds-font-size-body-small);
1367
1389
  --wds-toggle-button-label-fill-standard-selected-disabled: var(--wds-color-text-disabled-light);
1368
1390
  --wds-toggle-button-label-fill-standard-selected: var(--wds-color-text-primary);
1369
1391
  --wds-toggle-button-label-fill-standard-hover: var(--wds-color-text-primary);
1370
1392
  --wds-toggle-button-label-fill-standard-disabled: var(--wds-color-text-disabled);
1371
1393
  --wds-toggle-button-label-fill-standard-default: var(--wds-color-text-standard-primary);
1394
+ --wds-toggle-button-label-fill-inverted-selected-hover: var(--wds-color-text-standard-primary-light);
1395
+ --wds-toggle-button-label-fill-inverted-selected-disabled: var(--wds-color-text-standard-primary-light);
1396
+ --wds-toggle-button-label-fill-inverted-selected: var(--wds-color-text-standard-primary-light);
1397
+ --wds-toggle-button-label-fill-inverted-hover: var(--wds-color-text-primary);
1398
+ --wds-toggle-button-label-fill-inverted-disabled: var(--wds-color-text-disabled);
1399
+ --wds-toggle-button-label-fill-inverted-default: var(--wds-color-text-standard-primary);
1400
+ --wds-toggle-button-label-fill-dark-selected-hover: var(--wds-color-text-standard-primary-light);
1401
+ --wds-toggle-button-label-fill-dark-selected-disabled: var(--wds-color-text-disabled-light);
1402
+ --wds-toggle-button-label-fill-dark-selected: var(--wds-color-text-standard-primary-light);
1403
+ --wds-toggle-button-label-fill-dark-hover: var(--wds-color-text-standard-secondary);
1404
+ --wds-toggle-button-label-fill-dark-disabled: var(--wds-color-text-disabled);
1405
+ --wds-toggle-button-label-fill-dark-default: var(--wds-color-text-standard-primary);
1372
1406
  --wds-toggle-button-fill-standard-selected-hover: var(--wds-color-fill-standard-secondary-hover);
1373
1407
  --wds-toggle-button-fill-standard-selected-disabled: var(--wds-color-fill-standard-primary-disabled);
1374
1408
  --wds-toggle-button-fill-standard-selected: var(--wds-color-fill-standard-secondary);
1375
- --wds-toggle-button-fill-standard-hover: var(--wds-color-text-standard-primary-light);
1409
+ --wds-toggle-button-fill-standard-hover: var(--wds-color-fill-standard-tertiary);
1376
1410
  --wds-toggle-button-fill-standard-disabled: var(--wds-color-fill-standard-tertiary-disabled);
1377
1411
  --wds-toggle-button-fill-standard: var(--wds-color-fill-standard-tertiary);
1378
1412
  --wds-toggle-button-fill-inverted-selected-hover: var(--wds-color-fill-standard-primary-hover);
@@ -1381,6 +1415,21 @@
1381
1415
  --wds-toggle-button-fill-inverted-hover: var(--wds-color-fill-standard-tertiary-hover);
1382
1416
  --wds-toggle-button-fill-inverted-disabled: var(--wds-color-fill-standard-tertiary-disabled);
1383
1417
  --wds-toggle-button-fill-inverted: var(--wds-color-fill-standard-tertiary);
1418
+ --wds-toggle-button-fill-dark-selected-hover: var(--wds-color-fill-dark-primary-hover);
1419
+ --wds-toggle-button-fill-dark-selected-disabled: var(--wds-color-fill-standard-primary-disabled);
1420
+ --wds-toggle-button-fill-dark-selected: var(--wds-color-fill-dark-primary);
1421
+ --wds-toggle-button-fill-dark-hover: var(--wds-color-fill-dark-tertiary);
1422
+ --wds-toggle-button-fill-dark-disabled: var(--wds-color-fill-standard-tertiary-disabled);
1423
+ --wds-toggle-button-fill-dark: var(--wds-color-fill-dark-tertiary);
1424
+ --wds-toggle-button-border-color-standard-hover: var(--wds-color-border-standard-tertiary-hover);
1425
+ --wds-toggle-button-border-color-standard-disabled: var(--wds-color-border-standard-secondary-disabled);
1426
+ --wds-toggle-button-border-color-standard: var(--wds-color-border-standard-tertiary);
1427
+ --wds-toggle-button-border-color-inverted-hover: var(--wds-color-border-standard-tertiary-hover);
1428
+ --wds-toggle-button-border-color-inverted-disabled: var(--wds-color-border-standard-tertiary-disabled);
1429
+ --wds-toggle-button-border-color-inverted: var(--wds-color-border-standard-tertiary);
1430
+ --wds-toggle-button-border-color-dark-hover: var(--wds-color-border-standard-tertiary-hover);
1431
+ --wds-toggle-button-border-color-dark-disabled: var(--wds-color-border-standard-tertiary-disabled);
1432
+ --wds-toggle-button-border-color-dark: var(--wds-color-border-standard-tertiary);
1384
1433
  --wds-toast-background-fill: var(--wds-color-fill-dark-primary);
1385
1434
  --wds-timeline-title-font-size: var(--wds-font-size-body-small);
1386
1435
  --wds-thumbnail-title-font-size-tiny: var(--wds-font-size-body-tiny);
@@ -1768,7 +1817,7 @@
1768
1817
  --wds-accordion-background-fill-light-hover: var(--wds-color-fill-standard-tertiary-hover);
1769
1818
  --wds-accordion-background-fill-light: var(--wds-color-fill-standard-tertiary);
1770
1819
  --wds-vertical-tabs-section-text-font-line-height-small: var(--wds-font-line-height-body-small);
1771
- --wds-toggle-button-label-font-line-height-pill-small: var(--wds-font-line-height-body-small);
1820
+ --wds-toggle-button-label-font-line-height-round-small: var(--wds-font-line-height-body-small);
1772
1821
  --wds-timeline-title-font-line-height: var(--wds-font-line-height-body-small);
1773
1822
  --wds-thumbnail-title-font-line-height-tiny: var(--wds-font-line-height-body-small);
1774
1823
  --wds-thumbnail-subtitle-font-line-height-tiny: var(--wds-font-line-height-body-small);
package/all.st.css CHANGED
@@ -267,6 +267,7 @@
267
267
  @property st-global(--wds-color-black-100-transparent-10);
268
268
  @property st-global(--wds-color-black-100-transparent-15);
269
269
  @property st-global(--wds-color-black-100-transparent-20);
270
+ @property st-global(--wds-color-black-100-transparent-25);
270
271
  @property st-global(--wds-color-black-100-transparent-30);
271
272
  @property st-global(--wds-color-black-100-transparent-40);
272
273
  @property st-global(--wds-color-black-100-transparent-50);
@@ -1649,10 +1650,25 @@
1649
1650
  @property st-global(--wds-timeline-title-font-line-height);
1650
1651
  @property st-global(--wds-timeline-title-font-size);
1651
1652
  @property st-global(--wds-toast-background-fill);
1653
+ @property st-global(--wds-toggle-button-border-color-dark);
1654
+ @property st-global(--wds-toggle-button-border-color-dark-disabled);
1655
+ @property st-global(--wds-toggle-button-border-color-dark-hover);
1656
+ @property st-global(--wds-toggle-button-border-color-inverted);
1657
+ @property st-global(--wds-toggle-button-border-color-inverted-disabled);
1658
+ @property st-global(--wds-toggle-button-border-color-inverted-hover);
1659
+ @property st-global(--wds-toggle-button-border-color-standard);
1660
+ @property st-global(--wds-toggle-button-border-color-standard-disabled);
1661
+ @property st-global(--wds-toggle-button-border-color-standard-hover);
1652
1662
  @property st-global(--wds-toggle-button-border-radius-square-large);
1653
1663
  @property st-global(--wds-toggle-button-border-radius-square-medium);
1654
1664
  @property st-global(--wds-toggle-button-border-radius-square-small);
1655
1665
  @property st-global(--wds-toggle-button-border-radius-square-tiny);
1666
+ @property st-global(--wds-toggle-button-fill-dark);
1667
+ @property st-global(--wds-toggle-button-fill-dark-disabled);
1668
+ @property st-global(--wds-toggle-button-fill-dark-hover);
1669
+ @property st-global(--wds-toggle-button-fill-dark-selected);
1670
+ @property st-global(--wds-toggle-button-fill-dark-selected-disabled);
1671
+ @property st-global(--wds-toggle-button-fill-dark-selected-hover);
1656
1672
  @property st-global(--wds-toggle-button-fill-inverted);
1657
1673
  @property st-global(--wds-toggle-button-fill-inverted-disabled);
1658
1674
  @property st-global(--wds-toggle-button-fill-inverted-hover);
@@ -1665,39 +1681,72 @@
1665
1681
  @property st-global(--wds-toggle-button-fill-standard-selected);
1666
1682
  @property st-global(--wds-toggle-button-fill-standard-selected-disabled);
1667
1683
  @property st-global(--wds-toggle-button-fill-standard-selected-hover);
1684
+ @property st-global(--wds-toggle-button-inner-shadow-blur-primary);
1685
+ @property st-global(--wds-toggle-button-inner-shadow-blur-secondary);
1686
+ @property st-global(--wds-toggle-button-inner-shadow-fill-primary);
1687
+ @property st-global(--wds-toggle-button-inner-shadow-fill-secondary);
1688
+ @property st-global(--wds-toggle-button-inner-shadow-x-primary);
1689
+ @property st-global(--wds-toggle-button-inner-shadow-x-secondary);
1690
+ @property st-global(--wds-toggle-button-inner-shadow-y-primary);
1691
+ @property st-global(--wds-toggle-button-inner-shadow-y-secondary);
1692
+ @property st-global(--wds-toggle-button-label-fill-dark-default);
1693
+ @property st-global(--wds-toggle-button-label-fill-dark-disabled);
1694
+ @property st-global(--wds-toggle-button-label-fill-dark-hover);
1695
+ @property st-global(--wds-toggle-button-label-fill-dark-selected);
1696
+ @property st-global(--wds-toggle-button-label-fill-dark-selected-disabled);
1697
+ @property st-global(--wds-toggle-button-label-fill-dark-selected-hover);
1698
+ @property st-global(--wds-toggle-button-label-fill-inverted-default);
1699
+ @property st-global(--wds-toggle-button-label-fill-inverted-disabled);
1700
+ @property st-global(--wds-toggle-button-label-fill-inverted-hover);
1701
+ @property st-global(--wds-toggle-button-label-fill-inverted-selected);
1702
+ @property st-global(--wds-toggle-button-label-fill-inverted-selected-disabled);
1703
+ @property st-global(--wds-toggle-button-label-fill-inverted-selected-hover);
1668
1704
  @property st-global(--wds-toggle-button-label-fill-standard-default);
1669
1705
  @property st-global(--wds-toggle-button-label-fill-standard-disabled);
1670
1706
  @property st-global(--wds-toggle-button-label-fill-standard-hover);
1671
1707
  @property st-global(--wds-toggle-button-label-fill-standard-selected);
1672
1708
  @property st-global(--wds-toggle-button-label-fill-standard-selected-disabled);
1673
- @property st-global(--wds-toggle-button-label-font-line-height-pill-small);
1674
- @property st-global(--wds-toggle-button-label-font-size-pill-small);
1709
+ @property st-global(--wds-toggle-button-label-font-line-height-round-small);
1710
+ @property st-global(--wds-toggle-button-label-font-size-round-small);
1675
1711
  @property st-global(--wds-toggle-button-label-font-size-square-large);
1676
1712
  @property st-global(--wds-toggle-button-label-font-size-square-medium);
1677
1713
  @property st-global(--wds-toggle-button-label-font-size-square-small);
1678
1714
  @property st-global(--wds-toggle-button-label-font-size-square-tiny);
1679
1715
  @property st-global(--wds-toggle-button-label-font-weight-pill);
1716
+ @property st-global(--wds-toggle-button-label-font-weight-round);
1680
1717
  @property st-global(--wds-toggle-button-label-font-weight-square);
1681
1718
  @property st-global(--wds-toggle-button-padding-large);
1682
- @property st-global(--wds-toggle-button-padding-left-large);
1683
- @property st-global(--wds-toggle-button-padding-left-large-round);
1684
- @property st-global(--wds-toggle-button-padding-left-medium);
1685
- @property st-global(--wds-toggle-button-padding-left-medium-round);
1686
- @property st-global(--wds-toggle-button-padding-left-small);
1687
- @property st-global(--wds-toggle-button-padding-left-small-round);
1688
- @property st-global(--wds-toggle-button-padding-left-tiny);
1689
- @property st-global(--wds-toggle-button-padding-left-tiny-round);
1719
+ @property st-global(--wds-toggle-button-padding-large-round);
1690
1720
  @property st-global(--wds-toggle-button-padding-medium);
1691
- @property st-global(--wds-toggle-button-padding-right-large);
1692
- @property st-global(--wds-toggle-button-padding-right-large-round);
1693
- @property st-global(--wds-toggle-button-padding-right-medium);
1694
- @property st-global(--wds-toggle-button-padding-right-medium-round);
1695
- @property st-global(--wds-toggle-button-padding-right-small);
1696
- @property st-global(--wds-toggle-button-padding-right-small-round);
1697
- @property st-global(--wds-toggle-button-padding-right-tiny);
1698
- @property st-global(--wds-toggle-button-padding-right-tiny-round);
1721
+ @property st-global(--wds-toggle-button-padding-medium-round);
1699
1722
  @property st-global(--wds-toggle-button-padding-small);
1723
+ @property st-global(--wds-toggle-button-padding-small-round);
1700
1724
  @property st-global(--wds-toggle-button-padding-tiny);
1725
+ @property st-global(--wds-toggle-button-padding-tiny-round);
1726
+ @property st-global(--wds-toggle-button-shadow-blur-primary);
1727
+ @property st-global(--wds-toggle-button-shadow-blur-primary-inverted);
1728
+ @property st-global(--wds-toggle-button-shadow-blur-secondary);
1729
+ @property st-global(--wds-toggle-button-shadow-blur-secondary-inverted);
1730
+ @property st-global(--wds-toggle-button-shadow-blur-tertiary);
1731
+ @property st-global(--wds-toggle-button-shadow-blur-tertiary-inverted);
1732
+ @property st-global(--wds-toggle-button-shadow-fill-primary);
1733
+ @property st-global(--wds-toggle-button-shadow-fill-primary-inverted);
1734
+ @property st-global(--wds-toggle-button-shadow-fill-secondary);
1735
+ @property st-global(--wds-toggle-button-shadow-fill-secondary-inverted);
1736
+ @property st-global(--wds-toggle-button-shadow-fill-tertiary);
1737
+ @property st-global(--wds-toggle-button-shadow-fill-tertiary-inverted);
1738
+ @property st-global(--wds-toggle-button-shadow-x-primary);
1739
+ @property st-global(--wds-toggle-button-shadow-x-primary-inverted);
1740
+ @property st-global(--wds-toggle-button-shadow-x-secondary);
1741
+ @property st-global(--wds-toggle-button-shadow-x-secondary-inverted);
1742
+ @property st-global(--wds-toggle-button-shadow-x-tertiary);
1743
+ @property st-global(--wds-toggle-button-shadow-x-tertiary-inverted);
1744
+ @property st-global(--wds-toggle-button-shadow-y-primary);
1745
+ @property st-global(--wds-toggle-button-shadow-y-primary-inverted);
1746
+ @property st-global(--wds-toggle-button-shadow-y-secondary);
1747
+ @property st-global(--wds-toggle-button-shadow-y-secondary-inverted);
1748
+ @property st-global(--wds-toggle-button-shadow-y-tertiary);
1749
+ @property st-global(--wds-toggle-button-shadow-y-tertiary-inverted);
1701
1750
  @property st-global(--wds-toggle-switch-border-error-disabled);
1702
1751
  @property st-global(--wds-toggle-switch-border-standard-disabled);
1703
1752
  @property st-global(--wds-toggle-switch-border-success-disabled);
@@ -2086,6 +2135,7 @@
2086
2135
  --wds-color-black-100-transparent-10: rgba(0, 6, 36, .1);
2087
2136
  --wds-color-black-100-transparent-15: rgba(0, 6, 36, 0.15);
2088
2137
  --wds-color-black-100-transparent-20: rgba(0, 6, 36, .2);
2138
+ --wds-color-black-100-transparent-25: rgba(0, 6, 36, .25);
2089
2139
  --wds-color-black-100-transparent-30: rgba(0, 6, 36, .3);
2090
2140
  --wds-color-black-100-transparent-40: rgba(0, 6, 36, .4);
2091
2141
  --wds-color-black-100-transparent-50: rgba(0, 6, 36, .5);
@@ -3468,10 +3518,25 @@
3468
3518
  --wds-timeline-title-font-line-height: 18px;
3469
3519
  --wds-timeline-title-font-size: 14px;
3470
3520
  --wds-toast-background-fill: #000624;
3521
+ --wds-toggle-button-border-color-dark: #dfe5eb;
3522
+ --wds-toggle-button-border-color-dark-disabled: rgba(0, 6, 36, .1);
3523
+ --wds-toggle-button-border-color-dark-hover: #d6e6fe;
3524
+ --wds-toggle-button-border-color-inverted: #dfe5eb;
3525
+ --wds-toggle-button-border-color-inverted-disabled: rgba(0, 6, 36, .1);
3526
+ --wds-toggle-button-border-color-inverted-hover: #d6e6fe;
3527
+ --wds-toggle-button-border-color-standard: #dfe5eb;
3528
+ --wds-toggle-button-border-color-standard-disabled: rgba(0, 6, 36, .1);
3529
+ --wds-toggle-button-border-color-standard-hover: #d6e6fe;
3471
3530
  --wds-toggle-button-border-radius-square-large: 6px;
3472
3531
  --wds-toggle-button-border-radius-square-medium: 6px;
3473
3532
  --wds-toggle-button-border-radius-square-small: 4px;
3474
3533
  --wds-toggle-button-border-radius-square-tiny: 4px;
3534
+ --wds-toggle-button-fill-dark: #ffffff;
3535
+ --wds-toggle-button-fill-dark-disabled: #ffffff;
3536
+ --wds-toggle-button-fill-dark-hover: #ffffff;
3537
+ --wds-toggle-button-fill-dark-selected: #000624;
3538
+ --wds-toggle-button-fill-dark-selected-disabled: rgba(0, 6, 36, .3);
3539
+ --wds-toggle-button-fill-dark-selected-hover: #44485f;
3475
3540
  --wds-toggle-button-fill-inverted: #ffffff;
3476
3541
  --wds-toggle-button-fill-inverted-disabled: #ffffff;
3477
3542
  --wds-toggle-button-fill-inverted-hover: #e7f0ff;
@@ -3484,39 +3549,72 @@
3484
3549
  --wds-toggle-button-fill-standard-selected: #d6e6fe;
3485
3550
  --wds-toggle-button-fill-standard-selected-disabled: rgba(0, 6, 36, .3);
3486
3551
  --wds-toggle-button-fill-standard-selected-hover: #a8caff;
3552
+ --wds-toggle-button-inner-shadow-blur-primary: 0;
3553
+ --wds-toggle-button-inner-shadow-blur-secondary: 0;
3554
+ --wds-toggle-button-inner-shadow-fill-primary: rgba(255, 255, 255, 0);
3555
+ --wds-toggle-button-inner-shadow-fill-secondary: rgba(255, 255, 255, 0);
3556
+ --wds-toggle-button-inner-shadow-x-primary: 0;
3557
+ --wds-toggle-button-inner-shadow-x-secondary: 0;
3558
+ --wds-toggle-button-inner-shadow-y-primary: 0;
3559
+ --wds-toggle-button-inner-shadow-y-secondary: 0;
3560
+ --wds-toggle-button-label-fill-dark-default: #000624;
3561
+ --wds-toggle-button-label-fill-dark-disabled: rgba(0, 6, 36, .3);
3562
+ --wds-toggle-button-label-fill-dark-hover: #44485f;
3563
+ --wds-toggle-button-label-fill-dark-selected: #ffffff;
3564
+ --wds-toggle-button-label-fill-dark-selected-disabled: rgba(255, 255, 255, .7);
3565
+ --wds-toggle-button-label-fill-dark-selected-hover: #ffffff;
3566
+ --wds-toggle-button-label-fill-inverted-default: #000624;
3567
+ --wds-toggle-button-label-fill-inverted-disabled: rgba(0, 6, 36, .3);
3568
+ --wds-toggle-button-label-fill-inverted-hover: #116dff;
3569
+ --wds-toggle-button-label-fill-inverted-selected: #ffffff;
3570
+ --wds-toggle-button-label-fill-inverted-selected-disabled: #ffffff;
3571
+ --wds-toggle-button-label-fill-inverted-selected-hover: #ffffff;
3487
3572
  --wds-toggle-button-label-fill-standard-default: #000624;
3488
3573
  --wds-toggle-button-label-fill-standard-disabled: rgba(0, 6, 36, .3);
3489
3574
  --wds-toggle-button-label-fill-standard-hover: #116dff;
3490
3575
  --wds-toggle-button-label-fill-standard-selected: #116dff;
3491
3576
  --wds-toggle-button-label-fill-standard-selected-disabled: rgba(255, 255, 255, .7);
3492
- --wds-toggle-button-label-font-line-height-pill-small: 18px;
3493
- --wds-toggle-button-label-font-size-pill-small: 14px;
3577
+ --wds-toggle-button-label-font-line-height-round-small: 18px;
3578
+ --wds-toggle-button-label-font-size-round-small: 14px;
3494
3579
  --wds-toggle-button-label-font-size-square-large: 12px;
3495
3580
  --wds-toggle-button-label-font-size-square-medium: 12px;
3496
3581
  --wds-toggle-button-label-font-size-square-small: 12px;
3497
3582
  --wds-toggle-button-label-font-size-square-tiny: 12px;
3498
3583
  --wds-toggle-button-label-font-weight-pill: 400;
3584
+ --wds-toggle-button-label-font-weight-round: 400;
3499
3585
  --wds-toggle-button-label-font-weight-square: 400;
3500
3586
  --wds-toggle-button-padding-large: 18px;
3501
- --wds-toggle-button-padding-left-large: 9px;
3502
- --wds-toggle-button-padding-left-large-round: 12px;
3503
- --wds-toggle-button-padding-left-medium: 6px;
3504
- --wds-toggle-button-padding-left-medium-round: 12px;
3505
- --wds-toggle-button-padding-left-small: 6px;
3506
- --wds-toggle-button-padding-left-small-round: 12px;
3507
- --wds-toggle-button-padding-left-tiny: 3px;
3508
- --wds-toggle-button-padding-left-tiny-round: 6px;
3587
+ --wds-toggle-button-padding-large-round: 30px;
3509
3588
  --wds-toggle-button-padding-medium: 12px;
3510
- --wds-toggle-button-padding-right-large: 18px;
3511
- --wds-toggle-button-padding-right-large-round: 30px;
3512
- --wds-toggle-button-padding-right-medium: 12px;
3513
- --wds-toggle-button-padding-right-medium-round: 24px;
3514
- --wds-toggle-button-padding-right-small: 12px;
3515
- --wds-toggle-button-padding-right-small-round: 18px;
3516
- --wds-toggle-button-padding-right-tiny: 6px;
3517
- --wds-toggle-button-padding-right-tiny-round: 12px;
3589
+ --wds-toggle-button-padding-medium-round: 24px;
3518
3590
  --wds-toggle-button-padding-small: 12px;
3591
+ --wds-toggle-button-padding-small-round: 18px;
3519
3592
  --wds-toggle-button-padding-tiny: 6px;
3593
+ --wds-toggle-button-padding-tiny-round: 12px;
3594
+ --wds-toggle-button-shadow-blur-primary: 0;
3595
+ --wds-toggle-button-shadow-blur-primary-inverted: 0;
3596
+ --wds-toggle-button-shadow-blur-secondary: 0;
3597
+ --wds-toggle-button-shadow-blur-secondary-inverted: 0;
3598
+ --wds-toggle-button-shadow-blur-tertiary: 0;
3599
+ --wds-toggle-button-shadow-blur-tertiary-inverted: 0;
3600
+ --wds-toggle-button-shadow-fill-primary: rgba(0, 6, 36, 0);
3601
+ --wds-toggle-button-shadow-fill-primary-inverted: rgba(0, 6, 36, 0);
3602
+ --wds-toggle-button-shadow-fill-secondary: rgba(0, 6, 36, 0);
3603
+ --wds-toggle-button-shadow-fill-secondary-inverted: rgba(0, 6, 36, 0);
3604
+ --wds-toggle-button-shadow-fill-tertiary: rgba(0, 6, 36, 0);
3605
+ --wds-toggle-button-shadow-fill-tertiary-inverted: rgba(0, 6, 36, 0);
3606
+ --wds-toggle-button-shadow-x-primary: 0;
3607
+ --wds-toggle-button-shadow-x-primary-inverted: 0;
3608
+ --wds-toggle-button-shadow-x-secondary: 0;
3609
+ --wds-toggle-button-shadow-x-secondary-inverted: 0;
3610
+ --wds-toggle-button-shadow-x-tertiary: 0;
3611
+ --wds-toggle-button-shadow-x-tertiary-inverted: 0;
3612
+ --wds-toggle-button-shadow-y-primary: 0;
3613
+ --wds-toggle-button-shadow-y-primary-inverted: 0;
3614
+ --wds-toggle-button-shadow-y-secondary: 0;
3615
+ --wds-toggle-button-shadow-y-secondary-inverted: 0;
3616
+ --wds-toggle-button-shadow-y-tertiary: 0;
3617
+ --wds-toggle-button-shadow-y-tertiary-inverted: 0;
3520
3618
  --wds-toggle-switch-border-error-disabled: rgba(0, 6, 36, .1);
3521
3619
  --wds-toggle-switch-border-standard-disabled: rgba(0, 6, 36, .1);
3522
3620
  --wds-toggle-switch-border-success-disabled: rgba(0, 6, 36, .1);