@wix/design-system-tokens 1.129.0 → 1.131.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 (26) hide show
  1. package/CHANGELOG.md +32 -0
  2. package/all.css +86 -22
  3. package/all.scss +86 -22
  4. package/all.st.css +224 -96
  5. package/component.st.css +173 -59
  6. package/foundation.st.css +15 -15
  7. package/odeditor/all.css +84 -51
  8. package/odeditor/all.scss +84 -51
  9. package/odeditor/all.st.css +159 -93
  10. package/odeditor/component.st.css +112 -60
  11. package/odeditor/foundation.st.css +16 -16
  12. package/odeditor/semantic.st.css +31 -17
  13. package/package.json +2 -2
  14. package/semantic.st.css +36 -22
  15. package/studio/all.css +98 -33
  16. package/studio/all.scss +98 -33
  17. package/studio/all.st.css +264 -134
  18. package/studio/component.st.css +186 -70
  19. package/studio/foundation.st.css +17 -17
  20. package/studio/semantic.st.css +61 -47
  21. package/wixel/all.css +105 -29
  22. package/wixel/all.scss +105 -29
  23. package/wixel/all.st.css +247 -95
  24. package/wixel/component.st.css +178 -64
  25. package/wixel/foundation.st.css +10 -10
  26. package/wixel/semantic.st.css +59 -21
package/wixel/component.st.css CHANGED
@@ -13,7 +13,16 @@
13
13
  @property st-global(--wds-accordion-title-font-size-small);
14
14
  @property st-global(--wds-accordion-title-font-weight);
15
15
  @property st-global(--wds-accordion-title-font-weight-small);
16
+ @property st-global(--wds-add-item-border-color);
17
+ @property st-global(--wds-add-item-border-color-disabled);
18
+ @property st-global(--wds-add-item-border-color-hover);
19
+ @property st-global(--wds-add-item-border-dashed-radius);
16
20
  @property st-global(--wds-add-item-border-radius);
21
+ @property st-global(--wds-add-item-fill);
22
+ @property st-global(--wds-add-item-fill-disabled);
23
+ @property st-global(--wds-add-item-fill-hover);
24
+ @property st-global(--wds-add-item-fill-pressed);
25
+ @property st-global(--wds-add-item-label-color);
17
26
  @property st-global(--wds-add-item-padding-horizontal-large);
18
27
  @property st-global(--wds-add-item-padding-horizontal-tiny);
19
28
  @property st-global(--wds-add-item-padding-vertical-large);
@@ -37,6 +46,32 @@
37
46
  @property st-global(--wds-badge-border-radius-medium);
38
47
  @property st-global(--wds-badge-border-radius-small);
39
48
  @property st-global(--wds-badge-border-radius-tiny);
49
+ @property st-global(--wds-badge-label-font-line-height-small);
50
+ @property st-global(--wds-badge-label-font-size-small);
51
+ @property st-global(--wds-badge-outline-dark-border-color);
52
+ @property st-global(--wds-badge-outline-dark-fill);
53
+ @property st-global(--wds-badge-outline-dark-label-color);
54
+ @property st-global(--wds-badge-outline-destructive-border-color);
55
+ @property st-global(--wds-badge-outline-destructive-fill);
56
+ @property st-global(--wds-badge-outline-destructive-label-color);
57
+ @property st-global(--wds-badge-outline-neutral-border-color);
58
+ @property st-global(--wds-badge-outline-neutral-fill);
59
+ @property st-global(--wds-badge-outline-neutral-label-color);
60
+ @property st-global(--wds-badge-outline-premium-border-color);
61
+ @property st-global(--wds-badge-outline-premium-fill);
62
+ @property st-global(--wds-badge-outline-premium-label-color);
63
+ @property st-global(--wds-badge-outline-standard-border-color);
64
+ @property st-global(--wds-badge-outline-standard-fill);
65
+ @property st-global(--wds-badge-outline-standard-label-color);
66
+ @property st-global(--wds-badge-outline-success-border-color);
67
+ @property st-global(--wds-badge-outline-success-fill);
68
+ @property st-global(--wds-badge-outline-success-label-color);
69
+ @property st-global(--wds-badge-outline-urgent-border-color);
70
+ @property st-global(--wds-badge-outline-urgent-fill);
71
+ @property st-global(--wds-badge-outline-urgent-label-color);
72
+ @property st-global(--wds-badge-outline-warning-border-color);
73
+ @property st-global(--wds-badge-outline-warning-fill);
74
+ @property st-global(--wds-badge-outline-warning-label-color);
40
75
  @property st-global(--wds-badge-padding-horizontal-medium);
41
76
  @property st-global(--wds-badge-padding-horizontal-small);
42
77
  @property st-global(--wds-badge-padding-horizontal-tiny);
@@ -317,6 +352,11 @@
317
352
  @property st-global(--wds-field-set-label-font-weight);
318
353
  @property st-global(--wds-field-set-label-gap-small);
319
354
  @property st-global(--wds-field-set-label-gap-tiny);
355
+ @property st-global(--wds-fill-button-border-color);
356
+ @property st-global(--wds-fill-button-border-width);
357
+ @property st-global(--wds-fill-button-fill);
358
+ @property st-global(--wds-fill-button-fill-hover);
359
+ @property st-global(--wds-fill-button-icon-color);
320
360
  @property st-global(--wds-floating-helper-main-action-padding-top);
321
361
  @property st-global(--wds-floating-helper-padding-horizontal);
322
362
  @property st-global(--wds-floating-helper-padding-vertical);
@@ -521,12 +561,15 @@
521
561
  @property st-global(--wds-internal-thumbnail-illustration-size-small);
522
562
  @property st-global(--wds-internal-thumbnail-illustration-size-tiny);
523
563
  @property st-global(--wds-linear-progress-bar-border-radius);
564
+ @property st-global(--wds-linear-progress-bar-label-font-letter-spacing);
565
+ @property st-global(--wds-linear-progress-bar-label-font-line-height);
566
+ @property st-global(--wds-linear-progress-bar-value-gap);
567
+ @property st-global(--wds-list-item-action-affix-margin);
524
568
  @property st-global(--wds-list-item-action-border-radius);
525
569
  @property st-global(--wds-list-item-action-fill);
526
570
  @property st-global(--wds-list-item-action-fill-active);
527
571
  @property st-global(--wds-list-item-action-fill-hover);
528
- @property st-global(--wds-list-item-action-gap-medium);
529
- @property st-global(--wds-list-item-action-gap-small);
572
+ @property st-global(--wds-list-item-action-gap);
530
573
  @property st-global(--wds-list-item-action-label-fill-active);
531
574
  @property st-global(--wds-list-item-action-label-font-line-height-medium);
532
575
  @property st-global(--wds-list-item-action-label-font-line-height-small);
@@ -560,10 +603,13 @@
560
603
  @property st-global(--wds-list-item-padding-vertical-tiny);
561
604
  @property st-global(--wds-list-item-padding-vertical-x-tiny);
562
605
  @property st-global(--wds-list-item-padding-vertical-xx-tiny);
606
+ @property st-global(--wds-list-item-section-divider-padding-horizontal);
563
607
  @property st-global(--wds-list-item-section-fill);
564
608
  @property st-global(--wds-list-item-section-font-line-height);
565
609
  @property st-global(--wds-list-item-section-font-size);
610
+ @property st-global(--wds-list-item-section-font-weight);
566
611
  @property st-global(--wds-list-item-section-padding-horizontal);
612
+ @property st-global(--wds-list-item-section-title-label-fill);
567
613
  @property st-global(--wds-list-item-select-active-fill);
568
614
  @property st-global(--wds-list-item-select-active-fill-active);
569
615
  @property st-global(--wds-list-item-select-active-fill-active-screen-small);
@@ -584,6 +630,7 @@
584
630
  @property st-global(--wds-list-item-select-fill-active);
585
631
  @property st-global(--wds-list-item-select-fill-disabled);
586
632
  @property st-global(--wds-list-item-select-fill-hover);
633
+ @property st-global(--wds-list-item-select-gap);
587
634
  @property st-global(--wds-list-item-select-icon-padding-horizontal-medium);
588
635
  @property st-global(--wds-list-item-select-icon-padding-horizontal-small);
589
636
  @property st-global(--wds-list-item-select-icon-padding-vertical-medium);
@@ -592,8 +639,9 @@
592
639
  @property st-global(--wds-list-item-select-label-font-line-height-small);
593
640
  @property st-global(--wds-list-item-select-label-font-size-medium);
594
641
  @property st-global(--wds-list-item-select-label-font-size-small);
642
+ @property st-global(--wds-list-item-select-label-font-weight-active);
595
643
  @property st-global(--wds-list-item-select-label-font-weight-medium);
596
- @property st-global(--wds-list-item-select-label-font-weight-small);
644
+ @property st-global(--wds-list-item-select-label-hover-font-weight-medium);
597
645
  @property st-global(--wds-list-item-select-padding-horizontal-medium);
598
646
  @property st-global(--wds-list-item-select-padding-horizontal-small);
599
647
  @property st-global(--wds-list-item-select-padding-left-medium);
@@ -613,7 +661,6 @@
613
661
  @property st-global(--wds-list-item-select-suffix-pressed);
614
662
  @property st-global(--wds-list-item-select-title);
615
663
  @property st-global(--wds-list-item-select-title-disabled);
616
- @property st-global(--wds-list-item-select-title-pressed);
617
664
  @property st-global(--wds-loader-fill);
618
665
  @property st-global(--wds-loader-fill-error);
619
666
  @property st-global(--wds-loader-fill-light);
@@ -648,6 +695,8 @@
648
695
  @property st-global(--wds-mobile-modal-footer-padding-horizontal);
649
696
  @property st-global(--wds-mobile-modal-footer-padding-vertical);
650
697
  @property st-global(--wds-multiselect-icon-fill);
698
+ @property st-global(--wds-nestable-list-fill);
699
+ @property st-global(--wds-nestable-list-paddings);
651
700
  @property st-global(--wds-notification-fill-error);
652
701
  @property st-global(--wds-notification-fill-premium);
653
702
  @property st-global(--wds-notification-fill-standard);
@@ -750,6 +799,8 @@
750
799
  @property st-global(--wds-segmented-toggle-border-width);
751
800
  @property st-global(--wds-segmented-toggle-border-width-default);
752
801
  @property st-global(--wds-segmented-toggle-border-width-selected);
802
+ @property st-global(--wds-segmented-toggle-container-border-radius-medium);
803
+ @property st-global(--wds-segmented-toggle-container-border-radius-small);
753
804
  @property st-global(--wds-segmented-toggle-fill);
754
805
  @property st-global(--wds-segmented-toggle-fill-default);
755
806
  @property st-global(--wds-segmented-toggle-fill-disabled);
@@ -824,11 +875,13 @@
824
875
  @property st-global(--wds-side-panel-floating-title-font-line-height);
825
876
  @property st-global(--wds-side-panel-floating-title-font-size);
826
877
  @property st-global(--wds-side-panel-footer-border-width);
878
+ @property st-global(--wds-side-panel-footer-divider-height);
827
879
  @property st-global(--wds-side-panel-footer-fill);
828
880
  @property st-global(--wds-side-panel-footer-padding-horizontal);
829
881
  @property st-global(--wds-side-panel-footer-padding-vertical);
830
882
  @property st-global(--wds-side-panel-footnote-padding-horizontal);
831
883
  @property st-global(--wds-side-panel-footnote-padding-vertical);
884
+ @property st-global(--wds-side-panel-header-divider-height);
832
885
  @property st-global(--wds-side-panel-header-padding-left);
833
886
  @property st-global(--wds-side-panel-header-padding-right);
834
887
  @property st-global(--wds-side-panel-header-padding-vertical);
@@ -918,12 +971,10 @@
918
971
  @property st-global(--wds-social-post-preview-content-padding-vertical);
919
972
  @property st-global(--wds-social-preview-content-padding-horizontal);
920
973
  @property st-global(--wds-social-preview-content-padding-vertical);
921
- @property st-global(--wds-status-toast-horizontal-padding);
922
974
  @property st-global(--wds-status-toast-info-icon-fill);
923
975
  @property st-global(--wds-status-toast-text-fill);
924
976
  @property st-global(--wds-status-toast-text-font-line-height);
925
977
  @property st-global(--wds-status-toast-text-font-size);
926
- @property st-global(--wds-status-toast-vertical-padding);
927
978
  @property st-global(--wds-status-toast-width);
928
979
  @property st-global(--wds-stepper-prefix-size-circle);
929
980
  @property st-global(--wds-stepper-prefix-size-number);
@@ -939,6 +990,7 @@
939
990
  @property st-global(--wds-swatches-swatch-size-medium);
940
991
  @property st-global(--wds-swatches-swatch-size-small);
941
992
  @property st-global(--wds-swatches-swatch-size-tiny);
993
+ @property st-global(--wds-table-list-item-border-color);
942
994
  @property st-global(--wds-table-list-item-border-radius);
943
995
  @property st-global(--wds-table-list-item-drag-handle-color);
944
996
  @property st-global(--wds-table-list-item-fill);
@@ -1000,6 +1052,7 @@
1000
1052
  @property st-global(--wds-thumbnail-illustration-fill-1);
1001
1053
  @property st-global(--wds-thumbnail-illustration-fill-2);
1002
1054
  @property st-global(--wds-thumbnail-illustration-fill-3);
1055
+ @property st-global(--wds-thumbnail-overlay-fill);
1003
1056
  @property st-global(--wds-thumbnail-subtitle-fill);
1004
1057
  @property st-global(--wds-thumbnail-subtitle-font-line-height-tiny);
1005
1058
  @property st-global(--wds-thumbnail-subtitle-font-size-tiny);
@@ -1010,6 +1063,8 @@
1010
1063
  @property st-global(--wds-timeline-title-font-line-height);
1011
1064
  @property st-global(--wds-timeline-title-font-size);
1012
1065
  @property st-global(--wds-toast-background-fill);
1066
+ @property st-global(--wds-toast-horizontal-padding);
1067
+ @property st-global(--wds-toast-vertical-padding);
1013
1068
  @property st-global(--wds-toggle-button-border-color-dark);
1014
1069
  @property st-global(--wds-toggle-button-border-color-dark-disabled);
1015
1070
  @property st-global(--wds-toggle-button-border-color-dark-hover);
@@ -1154,6 +1209,8 @@
1154
1209
  @property st-global(--wds-tooltip-padding-vertical-medium);
1155
1210
  @property st-global(--wds-tooltip-padding-vertical-small);
1156
1211
  @property st-global(--wds-tooltip-text-fill);
1212
+ @property st-global(--wds-variable-input-padding-vertical-small);
1213
+ @property st-global(--wds-variable-input-padding-vertical-tiny);
1157
1214
  @property st-global(--wds-vertical-tabs-action-padding-horizontal-medium);
1158
1215
  @property st-global(--wds-vertical-tabs-action-padding-horizontal-small);
1159
1216
  @property st-global(--wds-vertical-tabs-action-padding-horizontal-tiny);
@@ -1235,7 +1292,7 @@
1235
1292
  .root {
1236
1293
  --wds-accordion-background-fill-light: #ffffff;
1237
1294
  --wds-accordion-background-fill-light-hover: #ffffff;
1238
- --wds-accordion-border-radius: 0;
1295
+ --wds-accordion-border-radius: 0px;
1239
1296
  --wds-accordion-caret-fill: #000624;
1240
1297
  --wds-accordion-caret-fill-hover: #4a57ff;
1241
1298
  --wds-accordion-inner-content-fill: #f4f6ff;
@@ -1248,7 +1305,16 @@
1248
1305
  --wds-accordion-title-font-size-small: 12px;
1249
1306
  --wds-accordion-title-font-weight: 600;
1250
1307
  --wds-accordion-title-font-weight-small: 600;
1308
+ --wds-add-item-border-color: #bac4ff;
1309
+ --wds-add-item-border-color-disabled: rgba(38, 37, 36, 0.1000);
1310
+ --wds-add-item-border-color-hover: #7489ff;
1311
+ --wds-add-item-border-dashed-radius: 2px;
1251
1312
  --wds-add-item-border-radius: 12px;
1313
+ --wds-add-item-fill: #f4f6ff;
1314
+ --wds-add-item-fill-disabled: rgba(38, 37, 36, 0.0500);
1315
+ --wds-add-item-fill-hover: #f4f6ff;
1316
+ --wds-add-item-fill-pressed: #eef0ff;
1317
+ --wds-add-item-label-color: #4a57ff;
1252
1318
  --wds-add-item-padding-horizontal-large: 28px;
1253
1319
  --wds-add-item-padding-horizontal-tiny: 12px;
1254
1320
  --wds-add-item-padding-vertical-large: 28px;
@@ -1272,12 +1338,38 @@
1272
1338
  --wds-badge-border-radius-medium: 2px;
1273
1339
  --wds-badge-border-radius-small: 2px;
1274
1340
  --wds-badge-border-radius-tiny: 2px;
1341
+ --wds-badge-label-font-line-height-small: 20px;
1342
+ --wds-badge-label-font-size-small: 14px;
1343
+ --wds-badge-outline-dark-border-color: #868aa5;
1344
+ --wds-badge-outline-dark-fill: #ffffff;
1345
+ --wds-badge-outline-dark-label-color: #595d70;
1346
+ --wds-badge-outline-destructive-border-color: #f69891;
1347
+ --wds-badge-outline-destructive-fill: #ffffff;
1348
+ --wds-badge-outline-destructive-label-color: #ee4437;
1349
+ --wds-badge-outline-neutral-border-color: #868aa5;
1350
+ --wds-badge-outline-neutral-fill: #ffffff;
1351
+ --wds-badge-outline-neutral-label-color: #acafc4;
1352
+ --wds-badge-outline-premium-border-color: #cf8cf1;
1353
+ --wds-badge-outline-premium-fill: #ffffff;
1354
+ --wds-badge-outline-premium-label-color: #9a27d5;
1355
+ --wds-badge-outline-standard-border-color: #bac4ff;
1356
+ --wds-badge-outline-standard-fill: #ffffff;
1357
+ --wds-badge-outline-standard-label-color: #4a57ff;
1358
+ --wds-badge-outline-success-border-color: #87cea5;
1359
+ --wds-badge-outline-success-fill: #ffffff;
1360
+ --wds-badge-outline-success-label-color: #25a55a;
1361
+ --wds-badge-outline-urgent-border-color: #fca88f;
1362
+ --wds-badge-outline-urgent-fill: #ffffff;
1363
+ --wds-badge-outline-urgent-label-color: #f96132;
1364
+ --wds-badge-outline-warning-border-color: #fcd29d;
1365
+ --wds-badge-outline-warning-fill: #ffffff;
1366
+ --wds-badge-outline-warning-label-color: #f9ad4d;
1275
1367
  --wds-badge-padding-horizontal-medium: 12px;
1276
1368
  --wds-badge-padding-horizontal-small: 8px;
1277
1369
  --wds-badge-padding-horizontal-tiny: 4px;
1278
- --wds-badge-padding-vertical-medium: 4px;
1279
- --wds-badge-padding-vertical-small: 2px;
1280
- --wds-badge-padding-vertical-tiny: 0;
1370
+ --wds-badge-padding-vertical-medium: 2px;
1371
+ --wds-badge-padding-vertical-small: 0px;
1372
+ --wds-badge-padding-vertical-tiny: 0px;
1281
1373
  --wds-badge-size-medium: 24px;
1282
1374
  --wds-badge-size-small: 20px;
1283
1375
  --wds-badge-size-tiny: 16px;
@@ -1415,7 +1507,7 @@
1415
1507
  --wds-card-gallery-item-border-radius-100: 12px;
1416
1508
  --wds-card-gallery-item-content-margin-vertical: 4px;
1417
1509
  --wds-card-gallery-item-fill: #eef0ff;
1418
- --wds-card-gallery-item-image-border-radius-bottom: 0;
1510
+ --wds-card-gallery-item-image-border-radius-bottom: 0px;
1419
1511
  --wds-card-gallery-item-overlay-fill: rgba(76, 73, 251, 0.1500);
1420
1512
  --wds-card-gallery-item-padding-left-medium: 18px;
1421
1513
  --wds-card-gallery-item-padding-left-small: 12px;
@@ -1552,6 +1644,11 @@
1552
1644
  --wds-field-set-label-font-weight: 500;
1553
1645
  --wds-field-set-label-gap-small: 8px;
1554
1646
  --wds-field-set-label-gap-tiny: 6px;
1647
+ --wds-fill-button-border-color: #dce2ff;
1648
+ --wds-fill-button-border-width: 0px;
1649
+ --wds-fill-button-fill: #eef0ff;
1650
+ --wds-fill-button-fill-hover: #dce2ff;
1651
+ --wds-fill-button-icon-color: #4a57ff;
1555
1652
  --wds-floating-helper-main-action-padding-top: 16px;
1556
1653
  --wds-floating-helper-padding-horizontal: 32px;
1557
1654
  --wds-floating-helper-padding-vertical: 28px;
@@ -1682,7 +1779,7 @@
1682
1779
  --wds-icon-button-color-text-standard-tertiary-disabled: rgba(38, 37, 36, 0.3000);
1683
1780
  --wds-icon-button-color-text-standard-tertiary-hover: #4a57ff;
1684
1781
  --wds-image-border-radius-default: 4px;
1685
- --wds-image-border-radius-none: 0;
1782
+ --wds-image-border-radius-none: 0px;
1686
1783
  --wds-info-icon-fill: #4a57ff;
1687
1784
  --wds-info-icon-fill-hover: #4a57ff;
1688
1785
  --wds-input-area-border-radius-default-medium: 12px;
@@ -1755,23 +1852,26 @@
1755
1852
  --wds-internal-thumbnail-illustration-size-medium: 72px;
1756
1853
  --wds-internal-thumbnail-illustration-size-small: 51px;
1757
1854
  --wds-internal-thumbnail-illustration-size-tiny: 38px;
1758
- --wds-linear-progress-bar-border-radius: 0;
1855
+ --wds-linear-progress-bar-border-radius: 0px;
1856
+ --wds-linear-progress-bar-label-font-letter-spacing: 1px;
1857
+ --wds-linear-progress-bar-label-font-line-height: 16px;
1858
+ --wds-linear-progress-bar-value-gap: 12px;
1859
+ --wds-list-item-action-affix-margin: 4px;
1759
1860
  --wds-list-item-action-border-radius: 8px;
1760
1861
  --wds-list-item-action-fill: #ffffff;
1761
1862
  --wds-list-item-action-fill-active: #eef0ff;
1762
1863
  --wds-list-item-action-fill-hover: #f4f6ff;
1763
- --wds-list-item-action-gap-medium: 6px;
1764
- --wds-list-item-action-gap-small: 6px;
1864
+ --wds-list-item-action-gap: 0px;
1765
1865
  --wds-list-item-action-label-fill-active: #4a57ff;
1766
1866
  --wds-list-item-action-label-font-line-height-medium: 20px;
1767
1867
  --wds-list-item-action-label-font-line-height-small: 16px;
1768
1868
  --wds-list-item-action-label-font-size-medium: 14px;
1769
1869
  --wds-list-item-action-label-font-size-small: 12px;
1770
- --wds-list-item-action-padding-horizontal-medium: 8px;
1771
- --wds-list-item-action-padding-horizontal-small: 8px;
1772
- --wds-list-item-action-padding-vertical-medium: 12px;
1870
+ --wds-list-item-action-padding-horizontal-medium: 12px;
1871
+ --wds-list-item-action-padding-horizontal-small: 12px;
1872
+ --wds-list-item-action-padding-vertical-medium: 6px;
1773
1873
  --wds-list-item-action-padding-vertical-medium-screen-small: 8px;
1774
- --wds-list-item-action-padding-vertical-small: 12px;
1874
+ --wds-list-item-action-padding-vertical-small: 6px;
1775
1875
  --wds-list-item-action-padding-vertical-small-screen-small: 8px;
1776
1876
  --wds-list-item-action-subtitle-fill-active: #868aa5;
1777
1877
  --wds-list-item-action-subtitle-font-line-height: 16px;
@@ -1795,10 +1895,13 @@
1795
1895
  --wds-list-item-padding-vertical-tiny: 12px;
1796
1896
  --wds-list-item-padding-vertical-x-tiny: 8px;
1797
1897
  --wds-list-item-padding-vertical-xx-tiny: 4px;
1898
+ --wds-list-item-section-divider-padding-horizontal: 16px;
1798
1899
  --wds-list-item-section-fill: #ffffff;
1799
1900
  --wds-list-item-section-font-line-height: 16px;
1800
1901
  --wds-list-item-section-font-size: 12px;
1902
+ --wds-list-item-section-font-weight: 700;
1801
1903
  --wds-list-item-section-padding-horizontal: 16px;
1904
+ --wds-list-item-section-title-label-fill: #868aa5;
1802
1905
  --wds-list-item-select-active-fill: #eef0ff;
1803
1906
  --wds-list-item-select-active-fill-active: #bac4ff;
1804
1907
  --wds-list-item-select-active-fill-active-screen-small: #bac4ff;
@@ -1813,12 +1916,13 @@
1813
1916
  --wds-list-item-select-active-title-disabled: rgba(38, 37, 36, 0.3000);
1814
1917
  --wds-list-item-select-active-title-disabled-screen-small: rgba(38, 37, 36, 0.3000);
1815
1918
  --wds-list-item-select-active-title-screen-small: #4a57ff;
1816
- --wds-list-item-select-affix-margin: 6px;
1919
+ --wds-list-item-select-affix-margin: 4px;
1817
1920
  --wds-list-item-select-border-radius: 8px;
1818
1921
  --wds-list-item-select-fill: #ffffff;
1819
1922
  --wds-list-item-select-fill-active: #eef0ff;
1820
1923
  --wds-list-item-select-fill-disabled: #ffffff;
1821
1924
  --wds-list-item-select-fill-hover: #f4f6ff;
1925
+ --wds-list-item-select-gap: 0px;
1822
1926
  --wds-list-item-select-icon-padding-horizontal-medium: 12px;
1823
1927
  --wds-list-item-select-icon-padding-horizontal-small: 12px;
1824
1928
  --wds-list-item-select-icon-padding-vertical-medium: 4px;
@@ -1827,17 +1931,18 @@
1827
1931
  --wds-list-item-select-label-font-line-height-small: 16px;
1828
1932
  --wds-list-item-select-label-font-size-medium: 14px;
1829
1933
  --wds-list-item-select-label-font-size-small: 12px;
1934
+ --wds-list-item-select-label-font-weight-active: 400;
1830
1935
  --wds-list-item-select-label-font-weight-medium: 400;
1831
- --wds-list-item-select-label-font-weight-small: 400;
1832
- --wds-list-item-select-padding-horizontal-medium: 8px;
1833
- --wds-list-item-select-padding-horizontal-small: 8px;
1936
+ --wds-list-item-select-label-hover-font-weight-medium: 400;
1937
+ --wds-list-item-select-padding-horizontal-medium: 12px;
1938
+ --wds-list-item-select-padding-horizontal-small: 12px;
1834
1939
  --wds-list-item-select-padding-left-medium: 12px;
1835
1940
  --wds-list-item-select-padding-left-small: 12px;
1836
1941
  --wds-list-item-select-padding-right-medium: 16px;
1837
1942
  --wds-list-item-select-padding-right-small: 16px;
1838
- --wds-list-item-select-padding-vertical-medium: 4px;
1943
+ --wds-list-item-select-padding-vertical-medium: 6px;
1839
1944
  --wds-list-item-select-padding-vertical-medium-screen-small: 8px;
1840
- --wds-list-item-select-padding-vertical-small: 12px;
1945
+ --wds-list-item-select-padding-vertical-small: 6px;
1841
1946
  --wds-list-item-select-padding-vertical-small-screen-small: 8px;
1842
1947
  --wds-list-item-select-subtitle: #868aa5;
1843
1948
  --wds-list-item-select-subtitle-disabled: rgba(38, 37, 36, 0.3000);
@@ -1848,7 +1953,6 @@
1848
1953
  --wds-list-item-select-suffix-pressed: #868aa5;
1849
1954
  --wds-list-item-select-title: #000624;
1850
1955
  --wds-list-item-select-title-disabled: rgba(38, 37, 36, 0.3000);
1851
- --wds-list-item-select-title-pressed: #000624;
1852
1956
  --wds-loader-fill: #eef0ff;
1853
1957
  --wds-loader-fill-error: #ee4437;
1854
1958
  --wds-loader-fill-light: #ffffff;
@@ -1883,6 +1987,8 @@
1883
1987
  --wds-mobile-modal-footer-padding-horizontal: 24px;
1884
1988
  --wds-mobile-modal-footer-padding-vertical: 24px;
1885
1989
  --wds-multiselect-icon-fill: #595d70;
1990
+ --wds-nestable-list-fill: #ffffff;
1991
+ --wds-nestable-list-paddings: 0px;
1886
1992
  --wds-notification-fill-error: #f1695f;
1887
1993
  --wds-notification-fill-premium: #c161f0;
1888
1994
  --wds-notification-fill-standard: #7489ff;
@@ -1927,9 +2033,9 @@
1927
2033
  --wds-radio-group-gap-horizontal-small: 16px;
1928
2034
  --wds-radio-group-gap-vertical-medium: 12px;
1929
2035
  --wds-radio-group-gap-vertical-small: 6px;
1930
- --wds-radio-group-item-padding-default-horizontal: 0;
1931
- --wds-radio-group-item-padding-default-horizontal-screen-small: 0;
1932
- --wds-radio-group-item-padding-default-vertical: 0;
2036
+ --wds-radio-group-item-padding-default-horizontal: 0px;
2037
+ --wds-radio-group-item-padding-default-horizontal-screen-small: 0px;
2038
+ --wds-radio-group-item-padding-default-vertical: 0px;
1933
2039
  --wds-radio-group-item-padding-default-vertical-screen-small: 12px;
1934
2040
  --wds-radio-group-item-padding-filled-horizontal: 16px;
1935
2041
  --wds-radio-group-item-padding-filled-horizontal-screen-small: 16px;
@@ -1985,6 +2091,8 @@
1985
2091
  --wds-segmented-toggle-border-width: 0px;
1986
2092
  --wds-segmented-toggle-border-width-default: 0px;
1987
2093
  --wds-segmented-toggle-border-width-selected: 0px;
2094
+ --wds-segmented-toggle-container-border-radius-medium: 8px;
2095
+ --wds-segmented-toggle-container-border-radius-small: 8px;
1988
2096
  --wds-segmented-toggle-fill: #eef0ff;
1989
2097
  --wds-segmented-toggle-fill-default: #eef0ff;
1990
2098
  --wds-segmented-toggle-fill-disabled: #e5e5e5;
@@ -1999,7 +2107,7 @@
1999
2107
  --wds-segmented-toggle-label-font-line-height-small: 16px;
2000
2108
  --wds-segmented-toggle-label-font-size-medium: 14px;
2001
2109
  --wds-segmented-toggle-label-font-size-small: 12px;
2002
- --wds-segmented-toggle-padding-container: 0;
2110
+ --wds-segmented-toggle-padding-container: 0px;
2003
2111
  --wds-segmented-toggle-padding-horizontal-medium: 16px;
2004
2112
  --wds-segmented-toggle-padding-horizontal-small: 12px;
2005
2113
  --wds-segmented-toggle-padding-vertical-medium: 8px;
@@ -2059,11 +2167,13 @@
2059
2167
  --wds-side-panel-floating-title-font-line-height: 24px;
2060
2168
  --wds-side-panel-floating-title-font-size: 16px;
2061
2169
  --wds-side-panel-footer-border-width: 2px;
2170
+ --wds-side-panel-footer-divider-height: 1px;
2062
2171
  --wds-side-panel-footer-fill: rgba(255, 255, 255, 0.0000);
2063
2172
  --wds-side-panel-footer-padding-horizontal: 24px;
2064
2173
  --wds-side-panel-footer-padding-vertical: 16px;
2065
2174
  --wds-side-panel-footnote-padding-horizontal: 24px;
2066
2175
  --wds-side-panel-footnote-padding-vertical: 8px;
2176
+ --wds-side-panel-header-divider-height: 1px;
2067
2177
  --wds-side-panel-header-padding-left: 24px;
2068
2178
  --wds-side-panel-header-padding-right: 8px;
2069
2179
  --wds-side-panel-header-padding-vertical: 16px;
@@ -2153,12 +2263,10 @@
2153
2263
  --wds-social-post-preview-content-padding-vertical: 12px;
2154
2264
  --wds-social-preview-content-padding-horizontal: 12px;
2155
2265
  --wds-social-preview-content-padding-vertical: 8px;
2156
- --wds-status-toast-horizontal-padding: 8px;
2157
2266
  --wds-status-toast-info-icon-fill: #ffffff;
2158
2267
  --wds-status-toast-text-fill: #ffffff;
2159
2268
  --wds-status-toast-text-font-line-height: 16px;
2160
2269
  --wds-status-toast-text-font-size: 12px;
2161
- --wds-status-toast-vertical-padding: 6px;
2162
2270
  --wds-status-toast-width: 600px;
2163
2271
  --wds-stepper-prefix-size-circle: 28px;
2164
2272
  --wds-stepper-prefix-size-number: 24px;
@@ -2174,6 +2282,7 @@
2174
2282
  --wds-swatches-swatch-size-medium: 44px;
2175
2283
  --wds-swatches-swatch-size-small: 32px;
2176
2284
  --wds-swatches-swatch-size-tiny: 28px;
2285
+ --wds-table-list-item-border-color: #dce2ff;
2177
2286
  --wds-table-list-item-border-radius: 12px;
2178
2287
  --wds-table-list-item-drag-handle-color: #4a57ff;
2179
2288
  --wds-table-list-item-fill: #ffffff;
@@ -2184,8 +2293,8 @@
2184
2293
  --wds-table-list-item-indentation-level-3: 28px;
2185
2294
  --wds-table-list-item-paddings: 4px;
2186
2295
  --wds-table-toolbar-padding-horizontal: 24px;
2187
- --wds-tabs-border-radius: 0;
2188
- --wds-tabs-gap-horizontal: 0;
2296
+ --wds-tabs-border-radius: 0px;
2297
+ --wds-tabs-gap-horizontal: 0px;
2189
2298
  --wds-tabs-item-fill-active: rgba(38, 37, 36, 0.0000);
2190
2299
  --wds-tabs-item-fill-hover: rgba(38, 37, 36, 0.0000);
2191
2300
  --wds-tabs-item-gap-medium: 8px;
@@ -2217,7 +2326,7 @@
2217
2326
  --wds-tag-padding-vertical-large: 2px;
2218
2327
  --wds-tag-padding-vertical-medium: 4px;
2219
2328
  --wds-tag-padding-vertical-small: 2px;
2220
- --wds-tag-padding-vertical-tiny: 0;
2329
+ --wds-tag-padding-vertical-tiny: 0px;
2221
2330
  --wds-tag-size-large: 32px;
2222
2331
  --wds-tag-size-medium: 28px;
2223
2332
  --wds-tag-size-small: 24px;
@@ -2227,7 +2336,7 @@
2227
2336
  --wds-text-button-font-weight-thin: 400;
2228
2337
  --wds-thumbnail-border-color: #e2e3ea;
2229
2338
  --wds-thumbnail-border-radius: 12px;
2230
- --wds-thumbnail-border-width-default: 0;
2339
+ --wds-thumbnail-border-width-default: 0px;
2231
2340
  --wds-thumbnail-checkmark-disabled: #bebebe;
2232
2341
  --wds-thumbnail-fill: #eef0ff;
2233
2342
  --wds-thumbnail-fill-hover: #dce2ff;
@@ -2235,6 +2344,7 @@
2235
2344
  --wds-thumbnail-illustration-fill-1: #868aa5;
2236
2345
  --wds-thumbnail-illustration-fill-2: #000624;
2237
2346
  --wds-thumbnail-illustration-fill-3: #f7f8f8;
2347
+ --wds-thumbnail-overlay-fill: rgba(38, 37, 36, 0.1000);
2238
2348
  --wds-thumbnail-subtitle-fill: #acafc4;
2239
2349
  --wds-thumbnail-subtitle-font-line-height-tiny: 14px;
2240
2350
  --wds-thumbnail-subtitle-font-size-tiny: 10px;
@@ -2245,6 +2355,8 @@
2245
2355
  --wds-timeline-title-font-line-height: 16px;
2246
2356
  --wds-timeline-title-font-size: 12px;
2247
2357
  --wds-toast-background-fill: #000624;
2358
+ --wds-toast-horizontal-padding: 8px;
2359
+ --wds-toast-vertical-padding: 6px;
2248
2360
  --wds-toggle-button-border-color-dark: #e2e3ea;
2249
2361
  --wds-toggle-button-border-color-dark-disabled: rgba(38, 37, 36, 0.1000);
2250
2362
  --wds-toggle-button-border-color-dark-hover: #dce2ff;
@@ -2276,14 +2388,14 @@
2276
2388
  --wds-toggle-button-fill-standard-selected: #eef0ff;
2277
2389
  --wds-toggle-button-fill-standard-selected-disabled: #bebebe;
2278
2390
  --wds-toggle-button-fill-standard-selected-hover: #dce2ff;
2279
- --wds-toggle-button-inner-shadow-blur-primary: 0;
2280
- --wds-toggle-button-inner-shadow-blur-secondary: 0;
2391
+ --wds-toggle-button-inner-shadow-blur-primary: 0px;
2392
+ --wds-toggle-button-inner-shadow-blur-secondary: 0px;
2281
2393
  --wds-toggle-button-inner-shadow-fill-primary: rgba(255, 255, 255, 0.0000);
2282
2394
  --wds-toggle-button-inner-shadow-fill-secondary: rgba(255, 255, 255, 0.0000);
2283
- --wds-toggle-button-inner-shadow-x-primary: 0;
2284
- --wds-toggle-button-inner-shadow-x-secondary: 0;
2285
- --wds-toggle-button-inner-shadow-y-primary: 0;
2286
- --wds-toggle-button-inner-shadow-y-secondary: 0;
2395
+ --wds-toggle-button-inner-shadow-x-primary: 0px;
2396
+ --wds-toggle-button-inner-shadow-x-secondary: 0px;
2397
+ --wds-toggle-button-inner-shadow-y-primary: 0px;
2398
+ --wds-toggle-button-inner-shadow-y-secondary: 0px;
2287
2399
  --wds-toggle-button-label-fill-dark-default: #000624;
2288
2400
  --wds-toggle-button-label-fill-dark-disabled: rgba(38, 37, 36, 0.3000);
2289
2401
  --wds-toggle-button-label-fill-dark-hover: #595d70;
@@ -2318,30 +2430,30 @@
2318
2430
  --wds-toggle-button-padding-small-round: 16px;
2319
2431
  --wds-toggle-button-padding-tiny: 12px;
2320
2432
  --wds-toggle-button-padding-tiny-round: 12px;
2321
- --wds-toggle-button-shadow-blur-primary: 0;
2322
- --wds-toggle-button-shadow-blur-primary-inverted: 0;
2323
- --wds-toggle-button-shadow-blur-secondary: 0;
2324
- --wds-toggle-button-shadow-blur-secondary-inverted: 0;
2325
- --wds-toggle-button-shadow-blur-tertiary: 0;
2326
- --wds-toggle-button-shadow-blur-tertiary-inverted: 0;
2433
+ --wds-toggle-button-shadow-blur-primary: 0px;
2434
+ --wds-toggle-button-shadow-blur-primary-inverted: 0px;
2435
+ --wds-toggle-button-shadow-blur-secondary: 0px;
2436
+ --wds-toggle-button-shadow-blur-secondary-inverted: 0px;
2437
+ --wds-toggle-button-shadow-blur-tertiary: 0px;
2438
+ --wds-toggle-button-shadow-blur-tertiary-inverted: 0px;
2327
2439
  --wds-toggle-button-shadow-fill-primary: rgba(38, 37, 36, 0.0000);
2328
2440
  --wds-toggle-button-shadow-fill-primary-inverted: rgba(38, 37, 36, 0.0000);
2329
2441
  --wds-toggle-button-shadow-fill-secondary: rgba(38, 37, 36, 0.0000);
2330
2442
  --wds-toggle-button-shadow-fill-secondary-inverted: rgba(38, 37, 36, 0.0000);
2331
2443
  --wds-toggle-button-shadow-fill-tertiary: rgba(38, 37, 36, 0.0000);
2332
2444
  --wds-toggle-button-shadow-fill-tertiary-inverted: rgba(38, 37, 36, 0.0000);
2333
- --wds-toggle-button-shadow-x-primary: 0;
2334
- --wds-toggle-button-shadow-x-primary-inverted: 0;
2335
- --wds-toggle-button-shadow-x-secondary: 0;
2336
- --wds-toggle-button-shadow-x-secondary-inverted: 0;
2337
- --wds-toggle-button-shadow-x-tertiary: 0;
2338
- --wds-toggle-button-shadow-x-tertiary-inverted: 0;
2339
- --wds-toggle-button-shadow-y-primary: 0;
2340
- --wds-toggle-button-shadow-y-primary-inverted: 0;
2341
- --wds-toggle-button-shadow-y-secondary: 0;
2342
- --wds-toggle-button-shadow-y-secondary-inverted: 0;
2343
- --wds-toggle-button-shadow-y-tertiary: 0;
2344
- --wds-toggle-button-shadow-y-tertiary-inverted: 0;
2445
+ --wds-toggle-button-shadow-x-primary: 0px;
2446
+ --wds-toggle-button-shadow-x-primary-inverted: 0px;
2447
+ --wds-toggle-button-shadow-x-secondary: 0px;
2448
+ --wds-toggle-button-shadow-x-secondary-inverted: 0px;
2449
+ --wds-toggle-button-shadow-x-tertiary: 0px;
2450
+ --wds-toggle-button-shadow-x-tertiary-inverted: 0px;
2451
+ --wds-toggle-button-shadow-y-primary: 0px;
2452
+ --wds-toggle-button-shadow-y-primary-inverted: 0px;
2453
+ --wds-toggle-button-shadow-y-secondary: 0px;
2454
+ --wds-toggle-button-shadow-y-secondary-inverted: 0px;
2455
+ --wds-toggle-button-shadow-y-tertiary: 0px;
2456
+ --wds-toggle-button-shadow-y-tertiary-inverted: 0px;
2345
2457
  --wds-toggle-switch-border-error-disabled: rgba(38, 37, 36, 0.0000);
2346
2458
  --wds-toggle-switch-border-standard-disabled: rgba(38, 37, 36, 0.0000);
2347
2459
  --wds-toggle-switch-border-success-disabled: rgba(38, 37, 36, 0.0000);
@@ -2370,7 +2482,7 @@
2370
2482
  --wds-toggle-switch-knob-size-large: 20px;
2371
2483
  --wds-toggle-switch-knob-size-medium: 16px;
2372
2484
  --wds-toggle-switch-knob-size-small: 12px;
2373
- --wds-toggle-switch-knob-text-height: 0;
2485
+ --wds-toggle-switch-knob-text-height: 0px;
2374
2486
  --wds-toggle-switch-padding: 1px;
2375
2487
  --wds-toggle-switch-shadow: 0 2px 1px rgba(38, 37, 36, 0.0000), 0 0 3px rgba(38, 37, 36, 0.3000);
2376
2488
  --wds-toggle-switch-width-large: 40px;
@@ -2389,15 +2501,17 @@
2389
2501
  --wds-tooltip-padding-vertical-medium: 8px;
2390
2502
  --wds-tooltip-padding-vertical-small: 6px;
2391
2503
  --wds-tooltip-text-fill: #ffffff;
2504
+ --wds-variable-input-padding-vertical-small: 4px;
2505
+ --wds-variable-input-padding-vertical-tiny: 4px;
2392
2506
  --wds-vertical-tabs-action-padding-horizontal-medium: 24px;
2393
2507
  --wds-vertical-tabs-action-padding-horizontal-small: 24px;
2394
2508
  --wds-vertical-tabs-action-padding-horizontal-tiny: 24px;
2395
2509
  --wds-vertical-tabs-action-padding-vertical-medium: 12px;
2396
2510
  --wds-vertical-tabs-action-padding-vertical-small: 12px;
2397
2511
  --wds-vertical-tabs-action-padding-vertical-tiny: 4px;
2398
- --wds-vertical-tabs-action-radius: 0;
2399
- --wds-vertical-tabs-gaps-horizontal: 0;
2400
- --wds-vertical-tabs-gaps-vertical: 0;
2512
+ --wds-vertical-tabs-action-radius: 0px;
2513
+ --wds-vertical-tabs-gaps-horizontal: 0px;
2514
+ --wds-vertical-tabs-gaps-vertical: 0px;
2401
2515
  --wds-vertical-tabs-icon-fill: #4a57ff;
2402
2516
  --wds-vertical-tabs-icon-fill-active: #000624;
2403
2517
  --wds-vertical-tabs-icon-fill-disabled: rgba(38, 37, 36, 0.3000);
package/wixel/foundation.st.css CHANGED
@@ -220,7 +220,7 @@
220
220
  @property st-global(--wds-space-2400);
221
221
 
222
222
  .root {
223
- --wds-background-blur-0: 0;
223
+ --wds-background-blur-0: 0px;
224
224
  --wds-background-blur-10: 4px;
225
225
  --wds-background-blur-50: 8px;
226
226
  --wds-background-blur-150: 12px;
@@ -229,7 +229,7 @@
229
229
  --wds-background-blur-300: 24px;
230
230
  --wds-background-blur-350: 28px;
231
231
  --wds-background-blur-375: 30px;
232
- --wds-border-radius-0: 0;
232
+ --wds-border-radius-0: 0px;
233
233
  --wds-border-radius-100: 2px;
234
234
  --wds-border-radius-200: 4px;
235
235
  --wds-border-radius-300: 6px;
@@ -345,7 +345,7 @@
345
345
  --wds-color-yellow-600: #fef6ed;
346
346
  --wds-font-family-default: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
347
347
  --wds-font-family-display: "Madefor Display", "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
348
- --wds-font-letter-spacing-0: 0;
348
+ --wds-font-letter-spacing-0: 0px;
349
349
  --wds-font-letter-spacing-100: 1px;
350
350
  --wds-font-line-height-50: 14px;
351
351
  --wds-font-line-height-100: 16px;
@@ -367,11 +367,11 @@
367
367
  --wds-font-weight-medium: 500;
368
368
  --wds-font-weight-regular: 400;
369
369
  --wds-font-weight-semi-bold: 600;
370
- --wds-shadow-100: 0;
371
- --wds-shadow-200: 0;
370
+ --wds-shadow-100: 0px;
371
+ --wds-shadow-200: 0px;
372
372
  --wds-shadow-300: 0 2px 18px rgba(38, 37, 36, 0.1000), 0 6px 6px rgba(38, 37, 36, 0.0000);
373
- --wds-shadow-400: 0;
374
- --wds-shadow-blur-0: 0;
373
+ --wds-shadow-400: 0px;
374
+ --wds-shadow-blur-0: 0px;
375
375
  --wds-shadow-blur-25: 2px;
376
376
  --wds-shadow-blur-35: 3px;
377
377
  --wds-shadow-blur-50: 4px;
@@ -400,9 +400,9 @@
400
400
  --wds-shadow-inner-400-right: -32px 0 24px -24px rgba(38, 37, 36, 0.2000) inset, -8px 0 6px -6px rgba(38, 37, 36, 0.0500) inset;
401
401
  --wds-shadow-inner-400-top: 0 32px 24px -24px rgba(38, 37, 36, 0.2000) inset, 0 8px 6px -6px rgba(38, 37, 36, 0.0500) inset;
402
402
  --wds-shadow-inner-400-vertical: 0 22px 18px -18px rgba(38, 37, 36, 0.1000) inset, 0 -8px 6px -6px rgba(38, 37, 36, 0.0500) inset, 0 -22px 18px -18px rgba(38, 37, 36, 0.1000) inset, 0 -8px 6px -6px rgba(38, 37, 36, 0.0500) inset;
403
- --wds-shadow-x-0: 0;
403
+ --wds-shadow-x-0: 0px;
404
404
  --wds-shadow-x-25: 1px;
405
- --wds-shadow-y-0: 0;
405
+ --wds-shadow-y-0: 0px;
406
406
  --wds-shadow-y-25: 1px;
407
407
  --wds-shadow-y-50: 2px;
408
408
  --wds-shadow-y-100: 1px;
@@ -410,7 +410,7 @@
410
410
  --wds-shadow-y-200: 2px;
411
411
  --wds-shadow-y-300: 10px;
412
412
  --wds-shadow-y-350: 10px;
413
- --wds-space-0: 0;
413
+ --wds-space-0: 0px;
414
414
  --wds-space-25: 1px;
415
415
  --wds-space-50: 2px;
416
416
  --wds-space-100: 4px;