@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/odeditor/component.st.css CHANGED
@@ -13,15 +13,14 @@
13
13
  @property st-global(--wds-accordion-title-font-size-small);
14
14
  @property st-global(--wds-accordion-title-font-weight-small);
15
15
  @property st-global(--wds-add-item-border-color);
16
- @property st-global(--wds-add-item-border-dashed-dash);
17
- @property st-global(--wds-add-item-border-dashed-gap);
16
+ @property st-global(--wds-add-item-border-color-disabled);
17
+ @property st-global(--wds-add-item-border-color-hover);
18
18
  @property st-global(--wds-add-item-border-dashed-radius);
19
- @property st-global(--wds-add-item-border-disabled);
20
- @property st-global(--wds-add-item-border-hover);
21
19
  @property st-global(--wds-add-item-border-radius);
22
20
  @property st-global(--wds-add-item-fill);
23
21
  @property st-global(--wds-add-item-fill-disabled);
24
22
  @property st-global(--wds-add-item-fill-hover);
23
+ @property st-global(--wds-add-item-fill-pressed);
25
24
  @property st-global(--wds-add-item-label-color);
26
25
  @property st-global(--wds-add-item-padding-horizontal-large);
27
26
  @property st-global(--wds-add-item-padding-horizontal-tiny);
@@ -52,6 +51,8 @@
52
51
  @property st-global(--wds-badge-border-radius-medium);
53
52
  @property st-global(--wds-badge-border-radius-small);
54
53
  @property st-global(--wds-badge-border-radius-tiny);
54
+ @property st-global(--wds-badge-label-font-line-height-small);
55
+ @property st-global(--wds-badge-label-font-size-small);
55
56
  @property st-global(--wds-badge-outline-dark-border-color);
56
57
  @property st-global(--wds-badge-outline-dark-fill);
57
58
  @property st-global(--wds-badge-outline-dark-label-color);
@@ -359,6 +360,11 @@
359
360
  @property st-global(--wds-field-set-label-font-weight);
360
361
  @property st-global(--wds-field-set-label-gap-small);
361
362
  @property st-global(--wds-field-set-label-gap-tiny);
363
+ @property st-global(--wds-fill-button-border-color);
364
+ @property st-global(--wds-fill-button-border-width);
365
+ @property st-global(--wds-fill-button-fill);
366
+ @property st-global(--wds-fill-button-fill-hover);
367
+ @property st-global(--wds-fill-button-icon-color);
362
368
  @property st-global(--wds-floating-helper-main-action-padding-top);
363
369
  @property st-global(--wds-floating-helper-padding-horizontal);
364
370
  @property st-global(--wds-floating-helper-padding-vertical);
@@ -545,7 +551,6 @@
545
551
  @property st-global(--wds-internal-image-width-medium);
546
552
  @property st-global(--wds-internal-image-width-small);
547
553
  @property st-global(--wds-internal-image-width-tiny);
548
- @property st-global(--wds-internal-linear-progress-bar-knob-offset);
549
554
  @property st-global(--wds-internal-thumbnail-illustration-size-large);
550
555
  @property st-global(--wds-internal-thumbnail-illustration-size-medium);
551
556
  @property st-global(--wds-internal-thumbnail-illustration-size-small);
@@ -554,11 +559,11 @@
554
559
  @property st-global(--wds-linear-progress-bar-label-font-letter-spacing);
555
560
  @property st-global(--wds-linear-progress-bar-label-font-line-height);
556
561
  @property st-global(--wds-linear-progress-bar-value-gap);
562
+ @property st-global(--wds-list-item-action-affix-margin);
557
563
  @property st-global(--wds-list-item-action-border-radius);
558
564
  @property st-global(--wds-list-item-action-fill-active);
559
565
  @property st-global(--wds-list-item-action-fill-hover);
560
- @property st-global(--wds-list-item-action-gap-medium);
561
- @property st-global(--wds-list-item-action-gap-small);
566
+ @property st-global(--wds-list-item-action-gap);
562
567
  @property st-global(--wds-list-item-action-label-fill-active);
563
568
  @property st-global(--wds-list-item-action-label-font-line-height-medium);
564
569
  @property st-global(--wds-list-item-action-label-font-line-height-small);
@@ -576,10 +581,13 @@
576
581
  @property st-global(--wds-list-item-action-suffix-fill-active);
577
582
  @property st-global(--wds-list-item-action-title-font-weight);
578
583
  @property st-global(--wds-list-item-action-title-font-weight-active);
584
+ @property st-global(--wds-list-item-section-divider-padding-horizontal);
579
585
  @property st-global(--wds-list-item-section-fill);
586
+ @property st-global(--wds-list-item-section-font-line-height);
580
587
  @property st-global(--wds-list-item-section-font-size);
581
- @property st-global(--wds-list-item-section-line-height);
588
+ @property st-global(--wds-list-item-section-font-weight);
582
589
  @property st-global(--wds-list-item-section-padding-horizontal);
590
+ @property st-global(--wds-list-item-section-title-label-fill);
583
591
  @property st-global(--wds-list-item-select-active-fill);
584
592
  @property st-global(--wds-list-item-select-active-fill-active);
585
593
  @property st-global(--wds-list-item-select-active-fill-active-screen-small);
@@ -598,6 +606,7 @@
598
606
  @property st-global(--wds-list-item-select-fill-active);
599
607
  @property st-global(--wds-list-item-select-fill-disabled);
600
608
  @property st-global(--wds-list-item-select-fill-hover);
609
+ @property st-global(--wds-list-item-select-gap);
601
610
  @property st-global(--wds-list-item-select-icon-padding-horizontal-medium);
602
611
  @property st-global(--wds-list-item-select-icon-padding-horizontal-small);
603
612
  @property st-global(--wds-list-item-select-icon-padding-vertical-medium);
@@ -606,8 +615,9 @@
606
615
  @property st-global(--wds-list-item-select-label-font-line-height-small);
607
616
  @property st-global(--wds-list-item-select-label-font-size-medium);
608
617
  @property st-global(--wds-list-item-select-label-font-size-small);
618
+ @property st-global(--wds-list-item-select-label-font-weight-active);
609
619
  @property st-global(--wds-list-item-select-label-font-weight-medium);
610
- @property st-global(--wds-list-item-select-label-font-weight-small);
620
+ @property st-global(--wds-list-item-select-label-hover-font-weight-medium);
611
621
  @property st-global(--wds-list-item-select-padding-horizontal-medium);
612
622
  @property st-global(--wds-list-item-select-padding-horizontal-small);
613
623
  @property st-global(--wds-list-item-select-padding-left-medium);
@@ -621,10 +631,10 @@
621
631
  @property st-global(--wds-list-item-select-subtitle);
622
632
  @property st-global(--wds-list-item-select-subtitle-disabled);
623
633
  @property st-global(--wds-list-item-select-suffix);
634
+ @property st-global(--wds-list-item-select-suffix-active-font-weight);
624
635
  @property st-global(--wds-list-item-select-suffix-pressed);
625
636
  @property st-global(--wds-list-item-select-title);
626
637
  @property st-global(--wds-list-item-select-title-disabled);
627
- @property st-global(--wds-list-item-select-title-pressed);
628
638
  @property st-global(--wds-loader-fill);
629
639
  @property st-global(--wds-loader-fill-error);
630
640
  @property st-global(--wds-loader-fill-light);
@@ -649,6 +659,8 @@
649
659
  @property st-global(--wds-mobile-modal-footer-padding-horizontal);
650
660
  @property st-global(--wds-mobile-modal-footer-padding-vertical);
651
661
  @property st-global(--wds-multiselect-icon-fill);
662
+ @property st-global(--wds-nestable-list-fill);
663
+ @property st-global(--wds-nestable-list-paddings);
652
664
  @property st-global(--wds-notification-fill-error);
653
665
  @property st-global(--wds-notification-fill-premium);
654
666
  @property st-global(--wds-notification-fill-standard);
@@ -763,6 +775,8 @@
763
775
  @property st-global(--wds-segmented-toggle-border-width-default);
764
776
  @property st-global(--wds-segmented-toggle-border-width-hover);
765
777
  @property st-global(--wds-segmented-toggle-border-width-selected);
778
+ @property st-global(--wds-segmented-toggle-container-border-radius-medium);
779
+ @property st-global(--wds-segmented-toggle-container-border-radius-small);
766
780
  @property st-global(--wds-segmented-toggle-fill);
767
781
  @property st-global(--wds-segmented-toggle-fill-default);
768
782
  @property st-global(--wds-segmented-toggle-fill-disabled);
@@ -842,11 +856,13 @@
842
856
  @property st-global(--wds-side-panel-footer-background-blur);
843
857
  @property st-global(--wds-side-panel-footer-border-fill);
844
858
  @property st-global(--wds-side-panel-footer-border-width);
859
+ @property st-global(--wds-side-panel-footer-divider-height);
845
860
  @property st-global(--wds-side-panel-footer-fill);
846
861
  @property st-global(--wds-side-panel-footer-padding-horizontal);
847
862
  @property st-global(--wds-side-panel-footer-padding-vertical);
848
863
  @property st-global(--wds-side-panel-footnote-padding-horizontal);
849
864
  @property st-global(--wds-side-panel-footnote-padding-vertical);
865
+ @property st-global(--wds-side-panel-header-divider-height);
850
866
  @property st-global(--wds-side-panel-header-padding-left);
851
867
  @property st-global(--wds-side-panel-header-padding-right);
852
868
  @property st-global(--wds-side-panel-header-padding-vertical);
@@ -938,8 +954,11 @@
938
954
  @property st-global(--wds-social-post-preview-content-padding-vertical);
939
955
  @property st-global(--wds-social-preview-content-padding-horizontal);
940
956
  @property st-global(--wds-social-preview-content-padding-vertical);
941
- @property st-global(--wds-status-toast-horizontal-padding);
942
- @property st-global(--wds-status-toast-vertical-padding);
957
+ @property st-global(--wds-status-toast-info-icon-fill);
958
+ @property st-global(--wds-status-toast-text-fill);
959
+ @property st-global(--wds-status-toast-text-font-line-height);
960
+ @property st-global(--wds-status-toast-text-font-size);
961
+ @property st-global(--wds-status-toast-width);
943
962
  @property st-global(--wds-stepper-prefix-size-circle);
944
963
  @property st-global(--wds-stepper-prefix-size-number);
945
964
  @property st-global(--wds-subtitle-font-line-height-medium);
@@ -957,6 +976,7 @@
957
976
  @property st-global(--wds-swatches-swatch-size-medium);
958
977
  @property st-global(--wds-swatches-swatch-size-small);
959
978
  @property st-global(--wds-swatches-swatch-size-tiny);
979
+ @property st-global(--wds-table-list-item-border-color);
960
980
  @property st-global(--wds-table-list-item-border-radius);
961
981
  @property st-global(--wds-table-list-item-controls-padding-medium);
962
982
  @property st-global(--wds-table-list-item-drag-handle-color);
@@ -1024,6 +1044,7 @@
1024
1044
  @property st-global(--wds-thumbnail-illustration-fill-1);
1025
1045
  @property st-global(--wds-thumbnail-illustration-fill-2);
1026
1046
  @property st-global(--wds-thumbnail-illustration-fill-3);
1047
+ @property st-global(--wds-thumbnail-overlay-fill);
1027
1048
  @property st-global(--wds-thumbnail-subtitle-fill);
1028
1049
  @property st-global(--wds-thumbnail-subtitle-font-line-height-tiny);
1029
1050
  @property st-global(--wds-thumbnail-subtitle-font-size-tiny);
@@ -1033,6 +1054,9 @@
1033
1054
  @property st-global(--wds-thumbnail-title-padding-top);
1034
1055
  @property st-global(--wds-timeline-title-font-line-height);
1035
1056
  @property st-global(--wds-timeline-title-font-size);
1057
+ @property st-global(--wds-toast-background-fill);
1058
+ @property st-global(--wds-toast-horizontal-padding);
1059
+ @property st-global(--wds-toast-vertical-padding);
1036
1060
  @property st-global(--wds-toggle-button-border-color-dark);
1037
1061
  @property st-global(--wds-toggle-button-border-color-dark-disabled);
1038
1062
  @property st-global(--wds-toggle-button-border-color-dark-hover);
@@ -1176,6 +1200,8 @@
1176
1200
  @property st-global(--wds-tooltip-padding-vertical-small);
1177
1201
  @property st-global(--wds-tooltip-shadow);
1178
1202
  @property st-global(--wds-tooltip-text-fill);
1203
+ @property st-global(--wds-variable-input-padding-vertical-small);
1204
+ @property st-global(--wds-variable-input-padding-vertical-tiny);
1179
1205
  @property st-global(--wds-vertical-tabs-action-padding-horizontal-medium);
1180
1206
  @property st-global(--wds-vertical-tabs-action-padding-horizontal-small);
1181
1207
  @property st-global(--wds-vertical-tabs-action-padding-horizontal-tiny);
@@ -1259,15 +1285,14 @@
1259
1285
  --wds-accordion-title-font-size-small: 12px;
1260
1286
  --wds-accordion-title-font-weight-small: 500;
1261
1287
  --wds-add-item-border-color: #151414;
1262
- --wds-add-item-border-dashed-dash: 3px;
1263
- --wds-add-item-border-dashed-gap: 8px;
1288
+ --wds-add-item-border-color-disabled: rgba(19, 23, 32, .3);
1289
+ --wds-add-item-border-color-hover: #151414;
1264
1290
  --wds-add-item-border-dashed-radius: 8px;
1265
- --wds-add-item-border-disabled: rgba(19, 23, 32, .3);
1266
- --wds-add-item-border-hover: #151414;
1267
1291
  --wds-add-item-border-radius: 12px;
1268
1292
  --wds-add-item-fill: #f8f6f6;
1269
1293
  --wds-add-item-fill-disabled: rgba(19, 23, 32, .05);
1270
1294
  --wds-add-item-fill-hover: #e8e7e7;
1295
+ --wds-add-item-fill-pressed: #dedede;
1271
1296
  --wds-add-item-label-color: #151414;
1272
1297
  --wds-add-item-padding-horizontal-large: 28px;
1273
1298
  --wds-add-item-padding-horizontal-tiny: 12px;
@@ -1298,10 +1323,12 @@
1298
1323
  --wds-badge-border-radius-medium: 4px;
1299
1324
  --wds-badge-border-radius-small: 4px;
1300
1325
  --wds-badge-border-radius-tiny: 4px;
1326
+ --wds-badge-label-font-line-height-small: 16px;
1327
+ --wds-badge-label-font-size-small: 12px;
1301
1328
  --wds-badge-outline-dark-border-color: #767574;
1302
1329
  --wds-badge-outline-dark-fill: #f0efef;
1303
1330
  --wds-badge-outline-dark-label-color: #383838;
1304
- --wds-badge-outline-destructive-border-color: #767574;
1331
+ --wds-badge-outline-destructive-border-color: #ed8f90;
1305
1332
  --wds-badge-outline-destructive-fill: #fcebeb;
1306
1333
  --wds-badge-outline-destructive-label-color: #be2b2e;
1307
1334
  --wds-badge-outline-neutral-border-color: #a8a6a5;
@@ -1309,7 +1336,7 @@
1309
1336
  --wds-badge-outline-neutral-label-color: #767574;
1310
1337
  --wds-badge-outline-premium-border-color: #acbeff;
1311
1338
  --wds-badge-outline-premium-fill: #eaefff;
1312
- --wds-badge-outline-premium-label-color: #6100cf;
1339
+ --wds-badge-outline-premium-label-color: #2f5dff;
1313
1340
  --wds-badge-outline-standard-border-color: #acbeff;
1314
1341
  --wds-badge-outline-standard-fill: #eaefff;
1315
1342
  --wds-badge-outline-standard-label-color: #1c3fe5;
@@ -1327,7 +1354,7 @@
1327
1354
  --wds-badge-padding-horizontal-tiny: 6px;
1328
1355
  --wds-badge-padding-vertical-medium: 4px;
1329
1356
  --wds-badge-padding-vertical-small: 2px;
1330
- --wds-badge-padding-vertical-tiny: 0;
1357
+ --wds-badge-padding-vertical-tiny: 0px;
1331
1358
  --wds-badge-size-medium: 28px;
1332
1359
  --wds-badge-size-small: 24px;
1333
1360
  --wds-badge-size-tiny: 20px;
@@ -1454,7 +1481,7 @@
1454
1481
  --wds-card-content-paddings-horizontal: 12px;
1455
1482
  --wds-card-content-paddings-vertical: 12px;
1456
1483
  --wds-card-gallery-item-content-margin-horizontal: 8px;
1457
- --wds-card-gallery-item-content-margin-vertical: 0;
1484
+ --wds-card-gallery-item-content-margin-vertical: 0px;
1458
1485
  --wds-card-gallery-item-fill: #ffffff;
1459
1486
  --wds-card-gallery-item-image-border-radius-bottom: 12px;
1460
1487
  --wds-card-gallery-item-overlay-fill: rgba(82, 81, 80, .5);
@@ -1603,8 +1630,13 @@
1603
1630
  --wds-field-set-label-font-size-small: 12px;
1604
1631
  --wds-field-set-label-font-size-tiny: 10px;
1605
1632
  --wds-field-set-label-font-weight: 500;
1606
- --wds-field-set-label-gap-small: 12px;
1633
+ --wds-field-set-label-gap-small: 8px;
1607
1634
  --wds-field-set-label-gap-tiny: 6px;
1635
+ --wds-fill-button-border-color: conic-gradient(from 180deg at 50% 50%, #3747FE 0deg, #4076FD 36deg, #B522FE 72deg, #FF1125 144deg, #F7851A 216deg, #FFCC56 251deg, #37FFC3 324deg, #37A8E8 338deg, #3775D5 352deg, #3747FE 360deg);
1636
+ --wds-fill-button-border-width: 2px;
1637
+ --wds-fill-button-fill: #ffffff;
1638
+ --wds-fill-button-fill-hover: #ffffff;
1639
+ --wds-fill-button-icon-color: #151414;
1608
1640
  --wds-floating-helper-main-action-padding-top: 16px;
1609
1641
  --wds-floating-helper-padding-horizontal: 32px;
1610
1642
  --wds-floating-helper-padding-vertical: 28px;
@@ -1612,7 +1644,7 @@
1612
1644
  --wds-form-field-label-font-size-small: 12px;
1613
1645
  --wds-form-field-label-font-size-tiny: 10px;
1614
1646
  --wds-form-field-label-font-weight: 500;
1615
- --wds-form-field-label-gap-small: 12px;
1647
+ --wds-form-field-label-gap-small: 8px;
1616
1648
  --wds-form-field-label-gap-tiny: 6px;
1617
1649
  --wds-form-field-label-line-height-small: 16px;
1618
1650
  --wds-form-field-label-line-height-tiny: 12px;
@@ -1728,7 +1760,7 @@
1728
1760
  --wds-icon-button-color-text-standard-tertiary-disabled: #a8a6a5;
1729
1761
  --wds-icon-button-color-text-standard-tertiary-hover: #0f2ccf;
1730
1762
  --wds-image-border-radius-default: 8px;
1731
- --wds-image-border-radius-none: 0;
1763
+ --wds-image-border-radius-none: 0px;
1732
1764
  --wds-info-icon-fill: #767574;
1733
1765
  --wds-info-icon-fill-hover: #2f5dff;
1734
1766
  --wds-input-area-border-radius-default-medium: 8px;
@@ -1791,20 +1823,19 @@
1791
1823
  --wds-internal-image-width-medium: 156px;
1792
1824
  --wds-internal-image-width-small: 122px;
1793
1825
  --wds-internal-image-width-tiny: 106px;
1794
- --wds-internal-linear-progress-bar-knob-offset: 4px;
1795
1826
  --wds-internal-thumbnail-illustration-size-large: 114px;
1796
1827
  --wds-internal-thumbnail-illustration-size-medium: 72px;
1797
1828
  --wds-internal-thumbnail-illustration-size-small: 51px;
1798
1829
  --wds-internal-thumbnail-illustration-size-tiny: 38px;
1799
1830
  --wds-linear-progress-bar-border-radius: 2px;
1800
- --wds-linear-progress-bar-label-font-letter-spacing: 0;
1801
- --wds-linear-progress-bar-label-font-line-height: 18px;
1831
+ --wds-linear-progress-bar-label-font-letter-spacing: 0px;
1832
+ --wds-linear-progress-bar-label-font-line-height: 16px;
1802
1833
  --wds-linear-progress-bar-value-gap: 4px;
1834
+ --wds-list-item-action-affix-margin: 4px;
1803
1835
  --wds-list-item-action-border-radius: 8px;
1804
1836
  --wds-list-item-action-fill-active: #f0efef;
1805
1837
  --wds-list-item-action-fill-hover: #f8f6f6;
1806
- --wds-list-item-action-gap-medium: 14px;
1807
- --wds-list-item-action-gap-small: 14px;
1838
+ --wds-list-item-action-gap: 10px;
1808
1839
  --wds-list-item-action-label-fill-active: #151414;
1809
1840
  --wds-list-item-action-label-font-line-height-medium: 24px;
1810
1841
  --wds-list-item-action-label-font-line-height-small: 18px;
@@ -1822,28 +1853,32 @@
1822
1853
  --wds-list-item-action-suffix-fill-active: #151414;
1823
1854
  --wds-list-item-action-title-font-weight: 500;
1824
1855
  --wds-list-item-action-title-font-weight-active: 700;
1856
+ --wds-list-item-section-divider-padding-horizontal: 0px;
1825
1857
  --wds-list-item-section-fill: #ffffff;
1858
+ --wds-list-item-section-font-line-height: 16px;
1826
1859
  --wds-list-item-section-font-size: 12px;
1827
- --wds-list-item-section-line-height: 16px;
1860
+ --wds-list-item-section-font-weight: 600;
1828
1861
  --wds-list-item-section-padding-horizontal: 16px;
1862
+ --wds-list-item-section-title-label-fill: #a8a6a5;
1829
1863
  --wds-list-item-select-active-fill: #ffffff;
1830
1864
  --wds-list-item-select-active-fill-active: #d5dfff;
1831
1865
  --wds-list-item-select-active-fill-active-screen-small: #7896ff;
1832
1866
  --wds-list-item-select-active-fill-disabled: #ffffff;
1833
1867
  --wds-list-item-select-active-fill-hover: #f5f7ff;
1834
1868
  --wds-list-item-select-active-fill-screen-small: #d5dfff;
1835
- --wds-list-item-select-active-subtitle: #1c3fe5;
1869
+ --wds-list-item-select-active-subtitle: #151414;
1836
1870
  --wds-list-item-select-active-subtitle-disabled: #a8a6a5;
1837
- --wds-list-item-select-active-title: #1c3fe5;
1871
+ --wds-list-item-select-active-title: #151414;
1838
1872
  --wds-list-item-select-active-title-disabled: #a8a6a5;
1839
1873
  --wds-list-item-select-active-title-disabled-screen-small: #a8a6a5;
1840
- --wds-list-item-select-active-title-screen-small: #2f5dff;
1841
- --wds-list-item-select-affix-margin: 6px;
1874
+ --wds-list-item-select-active-title-screen-small: #151414;
1875
+ --wds-list-item-select-affix-margin: 4px;
1842
1876
  --wds-list-item-select-border-radius: 8px;
1843
1877
  --wds-list-item-select-fill: #ffffff;
1844
1878
  --wds-list-item-select-fill-active: #ffffff;
1845
1879
  --wds-list-item-select-fill-disabled: #ffffff;
1846
1880
  --wds-list-item-select-fill-hover: #f8f6f6;
1881
+ --wds-list-item-select-gap: 10px;
1847
1882
  --wds-list-item-select-icon-padding-horizontal-medium: 12px;
1848
1883
  --wds-list-item-select-icon-padding-horizontal-small: 12px;
1849
1884
  --wds-list-item-select-icon-padding-vertical-medium: 4px;
@@ -1852,25 +1887,26 @@
1852
1887
  --wds-list-item-select-label-font-line-height-small: 18px;
1853
1888
  --wds-list-item-select-label-font-size-medium: 14px;
1854
1889
  --wds-list-item-select-label-font-size-small: 12px;
1855
- --wds-list-item-select-label-font-weight-medium: 600;
1856
- --wds-list-item-select-label-font-weight-small: 600;
1890
+ --wds-list-item-select-label-font-weight-active: 700;
1891
+ --wds-list-item-select-label-font-weight-medium: 500;
1892
+ --wds-list-item-select-label-hover-font-weight-medium: 600;
1857
1893
  --wds-list-item-select-padding-horizontal-medium: 12px;
1858
- --wds-list-item-select-padding-horizontal-small: 8px;
1894
+ --wds-list-item-select-padding-horizontal-small: 12px;
1859
1895
  --wds-list-item-select-padding-left-medium: 12px;
1860
1896
  --wds-list-item-select-padding-left-small: 12px;
1861
1897
  --wds-list-item-select-padding-right-medium: 16px;
1862
1898
  --wds-list-item-select-padding-right-small: 16px;
1863
1899
  --wds-list-item-select-padding-vertical-medium: 12px;
1864
1900
  --wds-list-item-select-padding-vertical-medium-screen-small: 8px;
1865
- --wds-list-item-select-padding-vertical-small: 6px;
1901
+ --wds-list-item-select-padding-vertical-small: 12px;
1866
1902
  --wds-list-item-select-padding-vertical-small-screen-small: 8px;
1867
1903
  --wds-list-item-select-subtitle: #767574;
1868
1904
  --wds-list-item-select-subtitle-disabled: #a8a6a5;
1869
1905
  --wds-list-item-select-suffix: #151414;
1906
+ --wds-list-item-select-suffix-active-font-weight: 500;
1870
1907
  --wds-list-item-select-suffix-pressed: #1c3fe5;
1871
1908
  --wds-list-item-select-title: #151414;
1872
1909
  --wds-list-item-select-title-disabled: #a8a6a5;
1873
- --wds-list-item-select-title-pressed: #1c3fe5;
1874
1910
  --wds-loader-fill: #d5dfff;
1875
1911
  --wds-loader-fill-error: #df3336;
1876
1912
  --wds-loader-fill-light: #ffffff;
@@ -1895,6 +1931,8 @@
1895
1931
  --wds-mobile-modal-footer-padding-horizontal: 24px;
1896
1932
  --wds-mobile-modal-footer-padding-vertical: 24px;
1897
1933
  --wds-multiselect-icon-fill: #383838;
1934
+ --wds-nestable-list-fill: rgba(255, 255, 255, 0);
1935
+ --wds-nestable-list-paddings: 8px;
1898
1936
  --wds-notification-fill-error: #e55c5e;
1899
1937
  --wds-notification-fill-premium: #8b2df5;
1900
1938
  --wds-notification-fill-standard: #597dff;
@@ -1924,7 +1962,7 @@
1924
1962
  --wds-pagination-padding-vertical: 2px;
1925
1963
  --wds-palette-border: 4px;
1926
1964
  --wds-popover-border-fill: rgba(19, 23, 32, 0);
1927
- --wds-popover-border-width: 0;
1965
+ --wds-popover-border-width: 0px;
1928
1966
  --wds-popover-fill: #ffffff;
1929
1967
  --wds-popover-menu-border-radius: 12px;
1930
1968
  --wds-popover-menu-paddings-horizontal: 8px;
@@ -1948,9 +1986,9 @@
1948
1986
  --wds-radio-group-gap-horizontal-small: 16px;
1949
1987
  --wds-radio-group-gap-vertical-medium: 12px;
1950
1988
  --wds-radio-group-gap-vertical-small: 6px;
1951
- --wds-radio-group-item-padding-default-horizontal: 0;
1952
- --wds-radio-group-item-padding-default-horizontal-screen-small: 0;
1953
- --wds-radio-group-item-padding-default-vertical: 0;
1989
+ --wds-radio-group-item-padding-default-horizontal: 0px;
1990
+ --wds-radio-group-item-padding-default-horizontal-screen-small: 0px;
1991
+ --wds-radio-group-item-padding-default-vertical: 0px;
1954
1992
  --wds-radio-group-item-padding-default-vertical-screen-small: 12px;
1955
1993
  --wds-radio-group-item-padding-filled-horizontal: 16px;
1956
1994
  --wds-radio-group-item-padding-filled-horizontal-screen-small: 16px;
@@ -1968,10 +2006,10 @@
1968
2006
  --wds-scrollbar-fill: #dedede;
1969
2007
  --wds-scrollbar-fill-active: #767574;
1970
2008
  --wds-scrollbar-fill-hover: #767574;
1971
- --wds-search-border-radius-large: 4px;
1972
- --wds-search-border-radius-medium: 4px;
1973
- --wds-search-border-radius-small: 4px;
1974
- --wds-search-border-radius-tiny: 4px;
2009
+ --wds-search-border-radius-large: 1000px;
2010
+ --wds-search-border-radius-medium: 1000px;
2011
+ --wds-search-border-radius-small: 1000px;
2012
+ --wds-search-border-radius-tiny: 1000px;
1975
2013
  --wds-section-header-fill-neutral: #ffffff;
1976
2014
  --wds-section-header-font-weight: 600;
1977
2015
  --wds-section-header-label-fill-neutral: #767574;
@@ -1983,13 +2021,13 @@
1983
2021
  --wds-section-helper-action-padding-small: 8px;
1984
2022
  --wds-section-helper-border-preview: #e8e7e7;
1985
2023
  --wds-section-helper-border-radius: 6px;
1986
- --wds-section-helper-close-button-offset: 0;
2024
+ --wds-section-helper-close-button-offset: 0px;
1987
2025
  --wds-section-helper-fill-preview: #f8f6f6;
1988
2026
  --wds-section-helper-fill-standard: #f5f7ff;
1989
2027
  --wds-section-helper-horizontal-margin: 6px;
1990
2028
  --wds-section-helper-horizontal-padding-medium: 16px;
1991
2029
  --wds-section-helper-horizontal-padding-small: 12px;
1992
- --wds-section-helper-prefix-offset-margin: 0;
2030
+ --wds-section-helper-prefix-offset-margin: 0px;
1993
2031
  --wds-section-helper-prefix-offset-medium: 16px;
1994
2032
  --wds-section-helper-text-font-line-height: 16px;
1995
2033
  --wds-section-helper-text-font-size: 12px;
@@ -2003,12 +2041,14 @@
2003
2041
  --wds-segmented-toggle-border-color-hover: rgba(19, 23, 32, 0);
2004
2042
  --wds-segmented-toggle-border-color-selected: rgba(19, 23, 32, 0);
2005
2043
  --wds-segmented-toggle-border-hover: #acbeff;
2006
- --wds-segmented-toggle-border-radius-medium: 8px;
2007
- --wds-segmented-toggle-border-radius-small: 8px;
2044
+ --wds-segmented-toggle-border-radius-medium: 6px;
2045
+ --wds-segmented-toggle-border-radius-small: 6px;
2008
2046
  --wds-segmented-toggle-border-width: 0px;
2009
2047
  --wds-segmented-toggle-border-width-default: 0px;
2010
2048
  --wds-segmented-toggle-border-width-hover: 0px;
2011
2049
  --wds-segmented-toggle-border-width-selected: 0px;
2050
+ --wds-segmented-toggle-container-border-radius-medium: 8px;
2051
+ --wds-segmented-toggle-container-border-radius-small: 8px;
2012
2052
  --wds-segmented-toggle-fill: #f8f6f6;
2013
2053
  --wds-segmented-toggle-fill-default: #ffffff;
2014
2054
  --wds-segmented-toggle-fill-disabled: #f8f6f6;
@@ -2085,14 +2125,16 @@
2085
2125
  --wds-side-panel-floating-title-font-family: "Madefor Display", Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
2086
2126
  --wds-side-panel-floating-title-font-line-height: 24px;
2087
2127
  --wds-side-panel-floating-title-font-size: 16px;
2088
- --wds-side-panel-footer-background-blur: 0;
2128
+ --wds-side-panel-footer-background-blur: 0px;
2089
2129
  --wds-side-panel-footer-border-fill: rgba(255, 255, 255, 0);
2090
- --wds-side-panel-footer-border-width: 0;
2130
+ --wds-side-panel-footer-border-width: 0px;
2131
+ --wds-side-panel-footer-divider-height: 0;
2091
2132
  --wds-side-panel-footer-fill: #ffffff;
2092
2133
  --wds-side-panel-footer-padding-horizontal: 16px;
2093
2134
  --wds-side-panel-footer-padding-vertical: 16px;
2094
2135
  --wds-side-panel-footnote-padding-horizontal: 16px;
2095
2136
  --wds-side-panel-footnote-padding-vertical: 8px;
2137
+ --wds-side-panel-header-divider-height: 0;
2096
2138
  --wds-side-panel-header-padding-left: 16px;
2097
2139
  --wds-side-panel-header-padding-right: 12px;
2098
2140
  --wds-side-panel-header-padding-vertical: 16px;
@@ -2184,8 +2226,11 @@
2184
2226
  --wds-social-post-preview-content-padding-vertical: 12px;
2185
2227
  --wds-social-preview-content-padding-horizontal: 12px;
2186
2228
  --wds-social-preview-content-padding-vertical: 8px;
2187
- --wds-status-toast-horizontal-padding: 12px;
2188
- --wds-status-toast-vertical-padding: 8px;
2229
+ --wds-status-toast-info-icon-fill: #ffffff;
2230
+ --wds-status-toast-text-fill: #ffffff;
2231
+ --wds-status-toast-text-font-line-height: 18px;
2232
+ --wds-status-toast-text-font-size: 14px;
2233
+ --wds-status-toast-width: 600px;
2189
2234
  --wds-stepper-prefix-size-circle: 28px;
2190
2235
  --wds-stepper-prefix-size-number: 24px;
2191
2236
  --wds-subtitle-font-line-height-medium: 16px;
@@ -2194,15 +2239,16 @@
2194
2239
  --wds-swatches-list-gap: 12px;
2195
2240
  --wds-swatches-list-padding-horizontal: 16px;
2196
2241
  --wds-swatches-list-padding-vertical: 12px;
2197
- --wds-swatches-swatch-active-border-radius-medium: 7px;
2242
+ --wds-swatches-swatch-active-border-radius-medium: 1000px;
2198
2243
  --wds-swatches-swatch-active-border-radius-small: 5px;
2199
- --wds-swatches-swatch-border-radius-medium: 4px;
2244
+ --wds-swatches-swatch-border-radius-medium: 1000px;
2200
2245
  --wds-swatches-swatch-border-radius-small: 2px;
2201
2246
  --wds-swatches-swatch-size-extra-tiny: 18px;
2202
2247
  --wds-swatches-swatch-size-large: 36px;
2203
2248
  --wds-swatches-swatch-size-medium: 32px;
2204
2249
  --wds-swatches-swatch-size-small: 28px;
2205
2250
  --wds-swatches-swatch-size-tiny: 24px;
2251
+ --wds-table-list-item-border-color: #dedede;
2206
2252
  --wds-table-list-item-border-radius: 12px;
2207
2253
  --wds-table-list-item-controls-padding-medium: 8px;
2208
2254
  --wds-table-list-item-drag-handle-color: #151414;
@@ -2212,7 +2258,7 @@
2212
2258
  --wds-table-list-item-gap: 16px;
2213
2259
  --wds-table-list-item-indentation-level-2: 12px;
2214
2260
  --wds-table-list-item-indentation-level-3: 28px;
2215
- --wds-table-list-item-paddings: 0;
2261
+ --wds-table-list-item-paddings: 0px;
2216
2262
  --wds-table-toolbar-padding-horizontal: 24px;
2217
2263
  --wds-tabs-border-radius: 6px;
2218
2264
  --wds-tabs-gap-horizontal: 4px;
@@ -2247,7 +2293,7 @@
2247
2293
  --wds-tag-padding-vertical-large: 2px;
2248
2294
  --wds-tag-padding-vertical-medium: 4px;
2249
2295
  --wds-tag-padding-vertical-small: 2px;
2250
- --wds-tag-padding-vertical-tiny: 0;
2296
+ --wds-tag-padding-vertical-tiny: 0px;
2251
2297
  --wds-tag-size-large: 32px;
2252
2298
  --wds-tag-size-medium: 28px;
2253
2299
  --wds-tag-size-small: 24px;
@@ -2270,6 +2316,7 @@
2270
2316
  --wds-thumbnail-illustration-fill-1: #7896ff;
2271
2317
  --wds-thumbnail-illustration-fill-2: #2f5dff;
2272
2318
  --wds-thumbnail-illustration-fill-3: #eaefff;
2319
+ --wds-thumbnail-overlay-fill: rgba(19, 23, 32, .1);
2273
2320
  --wds-thumbnail-subtitle-fill: #383838;
2274
2321
  --wds-thumbnail-subtitle-font-line-height-tiny: 16px;
2275
2322
  --wds-thumbnail-subtitle-font-size-tiny: 12px;
@@ -2279,6 +2326,9 @@
2279
2326
  --wds-thumbnail-title-padding-top: 4px;
2280
2327
  --wds-timeline-title-font-line-height: 16px;
2281
2328
  --wds-timeline-title-font-size: 12px;
2329
+ --wds-toast-background-fill: #151414;
2330
+ --wds-toast-horizontal-padding: 12px;
2331
+ --wds-toast-vertical-padding: 8px;
2282
2332
  --wds-toggle-button-border-color-dark: rgba(255, 255, 255, 0);
2283
2333
  --wds-toggle-button-border-color-dark-disabled: rgba(255, 255, 255, 0);
2284
2334
  --wds-toggle-button-border-color-dark-hover: rgba(255, 255, 255, 0);
@@ -2346,7 +2396,7 @@
2346
2396
  --wds-toggle-button-label-font-weight-square: 600;
2347
2397
  --wds-toggle-button-padding-large: 24px;
2348
2398
  --wds-toggle-button-padding-large-round: 24px;
2349
- --wds-toggle-button-padding-medium: 20px;
2399
+ --wds-toggle-button-padding-medium: 12px;
2350
2400
  --wds-toggle-button-padding-medium-round: 20px;
2351
2401
  --wds-toggle-button-padding-small: 16px;
2352
2402
  --wds-toggle-button-padding-small-round: 16px;
@@ -2404,7 +2454,7 @@
2404
2454
  --wds-toggle-switch-knob-size-large: 20px;
2405
2455
  --wds-toggle-switch-knob-size-medium: 14px;
2406
2456
  --wds-toggle-switch-knob-size-small: 12px;
2407
- --wds-toggle-switch-knob-text-height: 0;
2457
+ --wds-toggle-switch-knob-text-height: 0px;
2408
2458
  --wds-toggle-switch-padding: 1px;
2409
2459
  --wds-toggle-switch-shadow: 0;
2410
2460
  --wds-toggle-switch-width-large: 40px;
@@ -2422,6 +2472,8 @@
2422
2472
  --wds-tooltip-padding-vertical-small: 6px;
2423
2473
  --wds-tooltip-shadow: rgba(19, 23, 32, 0);
2424
2474
  --wds-tooltip-text-fill: #ffffff;
2475
+ --wds-variable-input-padding-vertical-small: 5px;
2476
+ --wds-variable-input-padding-vertical-tiny: 2px;
2425
2477
  --wds-vertical-tabs-action-padding-horizontal-medium: 24px;
2426
2478
  --wds-vertical-tabs-action-padding-horizontal-small: 12px;
2427
2479
  --wds-vertical-tabs-action-padding-horizontal-tiny: 12px;
package/odeditor/foundation.st.css CHANGED
@@ -223,17 +223,17 @@
223
223
  @property st-global(--wds-space-2400);
224
224
 
225
225
  .root {
226
- --wds-background-blur-0: 0;
227
- --wds-background-blur-10: 0;
228
- --wds-background-blur-50: 0;
229
- --wds-background-blur-150: 0;
230
- --wds-background-blur-200: 0;
231
- --wds-background-blur-250: 0;
232
- --wds-background-blur-300: 0;
233
- --wds-background-blur-350: 0;
234
- --wds-background-blur-375: 0;
226
+ --wds-background-blur-0: 0px;
227
+ --wds-background-blur-10: 0px;
228
+ --wds-background-blur-50: 0px;
229
+ --wds-background-blur-150: 0px;
230
+ --wds-background-blur-200: 0px;
231
+ --wds-background-blur-250: 0px;
232
+ --wds-background-blur-300: 0px;
233
+ --wds-background-blur-350: 0px;
234
+ --wds-background-blur-375: 0px;
235
235
  --wds-background-blur-450: 40px;
236
- --wds-border-radius-0: 0;
236
+ --wds-border-radius-0: 0px;
237
237
  --wds-border-radius-100: 2px;
238
238
  --wds-border-radius-200: 4px;
239
239
  --wds-border-radius-300: 6px;
@@ -245,7 +245,7 @@
245
245
  --wds-border-width-100: 1px;
246
246
  --wds-border-width-150: 1.5px;
247
247
  --wds-border-width-200: 2px;
248
- --wds-border-width-none: 0;
248
+ --wds-border-width-none: 0px;
249
249
  --wds-breakpoint-large: 1186px;
250
250
  --wds-breakpoint-medium: 768px;
251
251
  --wds-breakpoint-small: 490px;
@@ -350,7 +350,7 @@
350
350
  --wds-color-yellow-600: #fef6ed;
351
351
  --wds-font-family-default: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
352
352
  --wds-font-family-display: "Madefor Display", Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
353
- --wds-font-letter-spacing-0: 0;
353
+ --wds-font-letter-spacing-0: 0px;
354
354
  --wds-font-letter-spacing-100: 1px;
355
355
  --wds-font-line-height-50: 14px;
356
356
  --wds-font-line-height-100: 12px;
@@ -376,7 +376,7 @@
376
376
  --wds-shadow-200: 0 2px 4px rgba(19, 23, 32, .05), 0 0 6px rgba(19, 23, 32, .1);
377
377
  --wds-shadow-300: 0 0 6px rgba(19, 23, 32, .05), 0 0 18px rgba(19, 23, 32, .1);
378
378
  --wds-shadow-400: 0 8px 8px rgba(19, 23, 32, .1), 0 3px 24px rgba(19, 23, 32, .2);
379
- --wds-shadow-blur-0: 0;
379
+ --wds-shadow-blur-0: 0px;
380
380
  --wds-shadow-blur-25: 2px;
381
381
  --wds-shadow-blur-35: 3px;
382
382
  --wds-shadow-blur-50: 4px;
@@ -405,9 +405,9 @@
405
405
  --wds-shadow-inner-400-right: -32px 0 24px -24px rgba(19, 23, 32, .2) inset, -8px 0 6px -6px rgba(19, 23, 32, .05) inset;
406
406
  --wds-shadow-inner-400-top: 0 32px 24px -24px rgba(19, 23, 32, .2) inset, 0 8px 6px -6px rgba(19, 23, 32, .05) inset;
407
407
  --wds-shadow-inner-400-vertical: 0 22px 18px -18px rgba(19, 23, 32, .1) inset, 0 -8px 6px -6px rgba(19, 23, 32, .05) inset, 0 -22px 18px -18px rgba(19, 23, 32, .1) inset, 0 -8px 6px -6px rgba(19, 23, 32, .05) inset;
408
- --wds-shadow-x-0: 0;
408
+ --wds-shadow-x-0: 0px;
409
409
  --wds-shadow-x-25: 1px;
410
- --wds-shadow-y-0: 0;
410
+ --wds-shadow-y-0: 0px;
411
411
  --wds-shadow-y-25: 1px;
412
412
  --wds-shadow-y-50: 2px;
413
413
  --wds-shadow-y-100: 4px;
@@ -415,7 +415,7 @@
415
415
  --wds-shadow-y-200: 8px;
416
416
  --wds-shadow-y-300: 12px;
417
417
  --wds-shadow-y-350: 10px;
418
- --wds-space-0: 0;
418
+ --wds-space-0: 0px;
419
419
  --wds-space-25: 1px;
420
420
  --wds-space-50: 2px;
421
421
  --wds-space-100: 4px;