@wix/design-system-tokens 1.127.0 → 1.128.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 (19) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/all.css +15 -0
  3. package/all.scss +15 -0
  4. package/all.st.css +30 -0
  5. package/component.st.css +30 -0
  6. package/odeditor/all.css +17 -4
  7. package/odeditor/all.scss +17 -4
  8. package/odeditor/all.st.css +30 -4
  9. package/odeditor/component.st.css +28 -4
  10. package/odeditor/foundation.st.css +2 -0
  11. package/package.json +2 -2
  12. package/studio/all.css +15 -0
  13. package/studio/all.scss +15 -0
  14. package/studio/all.st.css +30 -0
  15. package/studio/component.st.css +30 -0
  16. package/wixel/all.css +15 -0
  17. package/wixel/all.scss +15 -0
  18. package/wixel/all.st.css +30 -0
  19. package/wixel/component.st.css +30 -0
package/CHANGELOG.md CHANGED
@@ -1,3 +1,13 @@
1
+ ## 1.128.0 - 2025-08-22
2
+
3
+ ### Visual Breaking Changes
4
+
5
+ - breaking(SelectorButton): add tokens [15201](https://github.com/wix-private/wix-design-systems/pull/15201)
6
+
7
+ ### Bug Fixes
8
+
9
+ - fix(MessageModal): control buttons [15227](https://github.com/wix-private/wix-design-systems/pull/15227)
10
+
1
11
  ## 1.127.0 - 2025-08-19
2
12
 
3
13
  ### Visual Breaking Changes
package/all.css CHANGED
@@ -1096,6 +1096,7 @@
1096
1096
  --wds-mobile-modal-content-padding-vertical: var(--wds-space-400);
1097
1097
  --wds-mobile-modal-content-padding-horizontal: var(--wds-space-400);
1098
1098
  --wds-message-modal-title-font-family: var(--wds-font-family-default);
1099
+ --wds-message-modal-top-controls-paddings: var(--wds-space-100);
1099
1100
  --wds-message-modal-padding-vertical: var(--wds-space-400);
1100
1101
  --wds-message-modal-padding-horizontal: var(--wds-space-400);
1101
1102
  --wds-message-modal-content-gap: var(--wds-space-200);
@@ -1526,6 +1527,18 @@
1526
1527
  --wds-side-panel-title-font-size: var(--wds-font-size-heading-3);
1527
1528
  --wds-side-panel-footer-fill: var(--wds-color-fill-surface-modal);
1528
1529
  --wds-side-panel-floating-title-font-size: var(--wds-font-size-body-medium);
1530
+ --wds-selector-button-text-fill-pressed: var(--wds-color-text-primary);
1531
+ --wds-selector-button-text-fill-hover: var(--wds-color-text-primary);
1532
+ --wds-selector-button-text-fill-disabled: var(--wds-color-text-disabled);
1533
+ --wds-selector-button-text-fill: var(--wds-color-text-standard-primary);
1534
+ --wds-selector-button-fill-pressed: var(--wds-color-fill-standard-tertiary-active);
1535
+ --wds-selector-button-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
1536
+ --wds-selector-button-fill-disabled: var(--wds-color-fill-standard-tertiary);
1537
+ --wds-selector-button-fill: var(--wds-color-fill-standard-tertiary);
1538
+ --wds-selector-button-border-color-pressed: var(--wds-color-border-standard-secondary-active);
1539
+ --wds-selector-button-border-color-hover: var(--wds-color-border-standard-secondary-hover);
1540
+ --wds-selector-button-border-color-disabled: var(--wds-color-border-standard-secondary-disabled);
1541
+ --wds-selector-button-border-color: var(--wds-color-border-standard-secondary);
1529
1542
  --wds-segmented-toggle-value-fill-selected-disabled: var(--wds-color-text-disabled);
1530
1543
  --wds-segmented-toggle-value-fill-selected: var(--wds-color-text-standard-primary);
1531
1544
  --wds-segmented-toggle-value-fill-hover: var(--wds-color-text-standard-primary);
@@ -1635,7 +1648,9 @@
1635
1648
  --wds-input-border-color-hover: var(--wds-color-border-standard-secondary);
1636
1649
  --wds-input-border-color: var(--wds-color-border-standard-secondary);
1637
1650
  --wds-input-background-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
1651
+ --wds-input-background-fill-disabled: var(--wds-color-fill-standard-tertiary-disabled);
1638
1652
  --wds-input-background-fill-default: var(--wds-color-fill-standard-tertiary);
1653
+ --wds-input-background-fill: var(--wds-color-fill-standard-tertiary);
1639
1654
  --wds-info-icon-fill-hover: var(--wds-color-text-primary);
1640
1655
  --wds-info-icon-fill: var(--wds-color-text-primary);
1641
1656
  --wds-icon-button-color-text-standard-tertiary-hover: var(--wds-color-text-primary);
package/all.scss CHANGED
@@ -752,6 +752,7 @@
752
752
  --wds-mobile-modal-footer-padding-horizontal: var(--wds-space-400);
753
753
  --wds-mobile-modal-content-padding-vertical: var(--wds-space-400);
754
754
  --wds-mobile-modal-content-padding-horizontal: var(--wds-space-400);
755
+ --wds-message-modal-top-controls-paddings: var(--wds-space-100);
755
756
  --wds-message-modal-title-font-family: var(--wds-font-family-default);
756
757
  --wds-message-modal-padding-vertical: var(--wds-space-400);
757
758
  --wds-message-modal-padding-horizontal: var(--wds-space-400);
@@ -1516,6 +1517,18 @@
1516
1517
  --wds-shadow-inner-400-horizontal: var(--wds-shadow-inner-300-left), var(--wds-shadow-inner-300-right);
1517
1518
  --wds-shadow-inner-300-vertical: var(--wds-shadow-inner-300-top), var(--wds-shadow-inner-300-bottom);
1518
1519
  --wds-shadow-inner-300-horizontal: var(--wds-shadow-inner-300-left), var(--wds-shadow-inner-300-right);
1520
+ --wds-selector-button-text-fill-pressed: var(--wds-color-text-primary);
1521
+ --wds-selector-button-text-fill-hover: var(--wds-color-text-primary);
1522
+ --wds-selector-button-text-fill-disabled: var(--wds-color-text-disabled);
1523
+ --wds-selector-button-text-fill: var(--wds-color-text-standard-primary);
1524
+ --wds-selector-button-fill-pressed: var(--wds-color-fill-standard-tertiary-active);
1525
+ --wds-selector-button-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
1526
+ --wds-selector-button-fill-disabled: var(--wds-color-fill-standard-tertiary);
1527
+ --wds-selector-button-fill: var(--wds-color-fill-standard-tertiary);
1528
+ --wds-selector-button-border-color-pressed: var(--wds-color-border-standard-secondary-active);
1529
+ --wds-selector-button-border-color-hover: var(--wds-color-border-standard-secondary-hover);
1530
+ --wds-selector-button-border-color-disabled: var(--wds-color-border-standard-secondary-disabled);
1531
+ --wds-selector-button-border-color: var(--wds-color-border-standard-secondary);
1519
1532
  --wds-segmented-toggle-value-fill-selected-disabled: var(--wds-color-text-disabled);
1520
1533
  --wds-segmented-toggle-value-fill-selected: var(--wds-color-text-standard-primary);
1521
1534
  --wds-segmented-toggle-value-fill-hover: var(--wds-color-text-standard-primary);
@@ -1625,7 +1638,9 @@
1625
1638
  --wds-input-border-color-hover: var(--wds-color-border-standard-secondary);
1626
1639
  --wds-input-border-color: var(--wds-color-border-standard-secondary);
1627
1640
  --wds-input-background-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
1641
+ --wds-input-background-fill-disabled: var(--wds-color-fill-standard-tertiary-disabled);
1628
1642
  --wds-input-background-fill-default: var(--wds-color-fill-standard-tertiary);
1643
+ --wds-input-background-fill: var(--wds-color-fill-standard-tertiary);
1629
1644
  --wds-info-icon-fill-hover: var(--wds-color-text-primary);
1630
1645
  --wds-info-icon-fill: var(--wds-color-text-primary);
1631
1646
  --wds-icon-button-color-text-standard-tertiary-hover: var(--wds-color-text-primary);
package/all.st.css CHANGED
@@ -1022,7 +1022,9 @@
1022
1022
  @property st-global(--wds-input-area-padding-right-small);
1023
1023
  @property st-global(--wds-input-area-padding-vertical-medium);
1024
1024
  @property st-global(--wds-input-area-padding-vertical-small);
1025
+ @property st-global(--wds-input-background-fill);
1025
1026
  @property st-global(--wds-input-background-fill-default);
1027
+ @property st-global(--wds-input-background-fill-disabled);
1026
1028
  @property st-global(--wds-input-background-fill-hover);
1027
1029
  @property st-global(--wds-input-border-color);
1028
1030
  @property st-global(--wds-input-border-color-hover);
@@ -1200,6 +1202,7 @@
1200
1202
  @property st-global(--wds-message-modal-title-font-family);
1201
1203
  @property st-global(--wds-message-modal-title-font-line-height);
1202
1204
  @property st-global(--wds-message-modal-title-font-size);
1205
+ @property st-global(--wds-message-modal-top-controls-paddings);
1203
1206
  @property st-global(--wds-mobile-modal-content-padding-horizontal);
1204
1207
  @property st-global(--wds-mobile-modal-content-padding-vertical);
1205
1208
  @property st-global(--wds-mobile-modal-footer-padding-horizontal);
@@ -1348,6 +1351,14 @@
1348
1351
  @property st-global(--wds-select-area-fill-hover);
1349
1352
  @property st-global(--wds-select-area-padding-horizontal);
1350
1353
  @property st-global(--wds-select-area-padding-vertical);
1354
+ @property st-global(--wds-selector-button-border-color);
1355
+ @property st-global(--wds-selector-button-border-color-disabled);
1356
+ @property st-global(--wds-selector-button-border-color-hover);
1357
+ @property st-global(--wds-selector-button-border-color-pressed);
1358
+ @property st-global(--wds-selector-button-fill);
1359
+ @property st-global(--wds-selector-button-fill-disabled);
1360
+ @property st-global(--wds-selector-button-fill-hover);
1361
+ @property st-global(--wds-selector-button-fill-pressed);
1351
1362
  @property st-global(--wds-selector-button-padding-horizontal-left-large);
1352
1363
  @property st-global(--wds-selector-button-padding-horizontal-left-medium);
1353
1364
  @property st-global(--wds-selector-button-padding-horizontal-left-small);
@@ -1360,6 +1371,10 @@
1360
1371
  @property st-global(--wds-selector-button-size-large);
1361
1372
  @property st-global(--wds-selector-button-size-medium);
1362
1373
  @property st-global(--wds-selector-button-size-small);
1374
+ @property st-global(--wds-selector-button-text-fill);
1375
+ @property st-global(--wds-selector-button-text-fill-disabled);
1376
+ @property st-global(--wds-selector-button-text-fill-hover);
1377
+ @property st-global(--wds-selector-button-text-fill-pressed);
1363
1378
  @property st-global(--wds-selector-list-item-padding-horizontal-medium);
1364
1379
  @property st-global(--wds-selector-list-item-padding-horizontal-small);
1365
1380
  @property st-global(--wds-selector-list-item-padding-vertical-medium);
@@ -2963,7 +2978,9 @@
2963
2978
  --wds-input-area-padding-right-small: 9px;
2964
2979
  --wds-input-area-padding-vertical-medium: 6px;
2965
2980
  --wds-input-area-padding-vertical-small: 6px;
2981
+ --wds-input-background-fill: #ffffff;
2966
2982
  --wds-input-background-fill-default: #ffffff;
2983
+ --wds-input-background-fill-disabled: #ffffff;
2967
2984
  --wds-input-background-fill-hover: #e7f0ff;
2968
2985
  --wds-input-border-color: #d6e6fe;
2969
2986
  --wds-input-border-color-hover: #d6e6fe;
@@ -3141,6 +3158,7 @@
3141
3158
  --wds-message-modal-title-font-family: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
3142
3159
  --wds-message-modal-title-font-line-height: 28px;
3143
3160
  --wds-message-modal-title-font-size: 21px;
3161
+ --wds-message-modal-top-controls-paddings: 6px;
3144
3162
  --wds-mobile-modal-content-padding-horizontal: 24px;
3145
3163
  --wds-mobile-modal-content-padding-vertical: 24px;
3146
3164
  --wds-mobile-modal-footer-padding-horizontal: 24px;
@@ -3289,6 +3307,14 @@
3289
3307
  --wds-select-area-fill-hover: #e7f0ff;
3290
3308
  --wds-select-area-padding-horizontal: 18px;
3291
3309
  --wds-select-area-padding-vertical: 12px;
3310
+ --wds-selector-button-border-color: #d6e6fe;
3311
+ --wds-selector-button-border-color-disabled: rgba(0, 6, 36, .1);
3312
+ --wds-selector-button-border-color-hover: #a8caff;
3313
+ --wds-selector-button-border-color-pressed: #116dff;
3314
+ --wds-selector-button-fill: #ffffff;
3315
+ --wds-selector-button-fill-disabled: #ffffff;
3316
+ --wds-selector-button-fill-hover: #e7f0ff;
3317
+ --wds-selector-button-fill-pressed: #d6e6fe;
3292
3318
  --wds-selector-button-padding-horizontal-left-large: 12px;
3293
3319
  --wds-selector-button-padding-horizontal-left-medium: 12px;
3294
3320
  --wds-selector-button-padding-horizontal-left-small: 12px;
@@ -3301,6 +3327,10 @@
3301
3327
  --wds-selector-button-size-large: 42px;
3302
3328
  --wds-selector-button-size-medium: 36px;
3303
3329
  --wds-selector-button-size-small: 30px;
3330
+ --wds-selector-button-text-fill: #000624;
3331
+ --wds-selector-button-text-fill-disabled: rgba(0, 6, 36, .3);
3332
+ --wds-selector-button-text-fill-hover: #116dff;
3333
+ --wds-selector-button-text-fill-pressed: #116dff;
3304
3334
  --wds-selector-list-item-padding-horizontal-medium: 24px;
3305
3335
  --wds-selector-list-item-padding-horizontal-small: 18px;
3306
3336
  --wds-selector-list-item-padding-vertical-medium: 12px;
package/component.st.css CHANGED
@@ -464,7 +464,9 @@
464
464
  @property st-global(--wds-input-area-padding-right-small);
465
465
  @property st-global(--wds-input-area-padding-vertical-medium);
466
466
  @property st-global(--wds-input-area-padding-vertical-small);
467
+ @property st-global(--wds-input-background-fill);
467
468
  @property st-global(--wds-input-background-fill-default);
469
+ @property st-global(--wds-input-background-fill-disabled);
468
470
  @property st-global(--wds-input-background-fill-hover);
469
471
  @property st-global(--wds-input-border-color);
470
472
  @property st-global(--wds-input-border-color-hover);
@@ -642,6 +644,7 @@
642
644
  @property st-global(--wds-message-modal-title-font-family);
643
645
  @property st-global(--wds-message-modal-title-font-line-height);
644
646
  @property st-global(--wds-message-modal-title-font-size);
647
+ @property st-global(--wds-message-modal-top-controls-paddings);
645
648
  @property st-global(--wds-mobile-modal-content-padding-horizontal);
646
649
  @property st-global(--wds-mobile-modal-content-padding-vertical);
647
650
  @property st-global(--wds-mobile-modal-footer-padding-horizontal);
@@ -790,6 +793,14 @@
790
793
  @property st-global(--wds-select-area-fill-hover);
791
794
  @property st-global(--wds-select-area-padding-horizontal);
792
795
  @property st-global(--wds-select-area-padding-vertical);
796
+ @property st-global(--wds-selector-button-border-color);
797
+ @property st-global(--wds-selector-button-border-color-disabled);
798
+ @property st-global(--wds-selector-button-border-color-hover);
799
+ @property st-global(--wds-selector-button-border-color-pressed);
800
+ @property st-global(--wds-selector-button-fill);
801
+ @property st-global(--wds-selector-button-fill-disabled);
802
+ @property st-global(--wds-selector-button-fill-hover);
803
+ @property st-global(--wds-selector-button-fill-pressed);
793
804
  @property st-global(--wds-selector-button-padding-horizontal-left-large);
794
805
  @property st-global(--wds-selector-button-padding-horizontal-left-medium);
795
806
  @property st-global(--wds-selector-button-padding-horizontal-left-small);
@@ -802,6 +813,10 @@
802
813
  @property st-global(--wds-selector-button-size-large);
803
814
  @property st-global(--wds-selector-button-size-medium);
804
815
  @property st-global(--wds-selector-button-size-small);
816
+ @property st-global(--wds-selector-button-text-fill);
817
+ @property st-global(--wds-selector-button-text-fill-disabled);
818
+ @property st-global(--wds-selector-button-text-fill-hover);
819
+ @property st-global(--wds-selector-button-text-fill-pressed);
805
820
  @property st-global(--wds-selector-list-item-padding-horizontal-medium);
806
821
  @property st-global(--wds-selector-list-item-padding-horizontal-small);
807
822
  @property st-global(--wds-selector-list-item-padding-vertical-medium);
@@ -1696,7 +1711,9 @@
1696
1711
  --wds-input-area-padding-right-small: 9px;
1697
1712
  --wds-input-area-padding-vertical-medium: 6px;
1698
1713
  --wds-input-area-padding-vertical-small: 6px;
1714
+ --wds-input-background-fill: #ffffff;
1699
1715
  --wds-input-background-fill-default: #ffffff;
1716
+ --wds-input-background-fill-disabled: #ffffff;
1700
1717
  --wds-input-background-fill-hover: #e7f0ff;
1701
1718
  --wds-input-border-color: #d6e6fe;
1702
1719
  --wds-input-border-color-hover: #d6e6fe;
@@ -1874,6 +1891,7 @@
1874
1891
  --wds-message-modal-title-font-family: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
1875
1892
  --wds-message-modal-title-font-line-height: 28px;
1876
1893
  --wds-message-modal-title-font-size: 21px;
1894
+ --wds-message-modal-top-controls-paddings: 6px;
1877
1895
  --wds-mobile-modal-content-padding-horizontal: 24px;
1878
1896
  --wds-mobile-modal-content-padding-vertical: 24px;
1879
1897
  --wds-mobile-modal-footer-padding-horizontal: 24px;
@@ -2022,6 +2040,14 @@
2022
2040
  --wds-select-area-fill-hover: #e7f0ff;
2023
2041
  --wds-select-area-padding-horizontal: 18px;
2024
2042
  --wds-select-area-padding-vertical: 12px;
2043
+ --wds-selector-button-border-color: #d6e6fe;
2044
+ --wds-selector-button-border-color-disabled: rgba(0, 6, 36, .1);
2045
+ --wds-selector-button-border-color-hover: #a8caff;
2046
+ --wds-selector-button-border-color-pressed: #116dff;
2047
+ --wds-selector-button-fill: #ffffff;
2048
+ --wds-selector-button-fill-disabled: #ffffff;
2049
+ --wds-selector-button-fill-hover: #e7f0ff;
2050
+ --wds-selector-button-fill-pressed: #d6e6fe;
2025
2051
  --wds-selector-button-padding-horizontal-left-large: 12px;
2026
2052
  --wds-selector-button-padding-horizontal-left-medium: 12px;
2027
2053
  --wds-selector-button-padding-horizontal-left-small: 12px;
@@ -2034,6 +2060,10 @@
2034
2060
  --wds-selector-button-size-large: 42px;
2035
2061
  --wds-selector-button-size-medium: 36px;
2036
2062
  --wds-selector-button-size-small: 30px;
2063
+ --wds-selector-button-text-fill: #000624;
2064
+ --wds-selector-button-text-fill-disabled: rgba(0, 6, 36, .3);
2065
+ --wds-selector-button-text-fill-hover: #116dff;
2066
+ --wds-selector-button-text-fill-pressed: #116dff;
2037
2067
  --wds-selector-list-item-padding-horizontal-medium: 24px;
2038
2068
  --wds-selector-list-item-padding-horizontal-small: 18px;
2039
2069
  --wds-selector-list-item-padding-vertical-medium: 12px;
package/odeditor/all.css CHANGED
@@ -6,6 +6,7 @@
6
6
  --wds-space-1400: 56px;
7
7
  --wds-space-1300: 52px;
8
8
  --wds-space-1200: 48px;
9
+ --wds-space-1150: 46px;
9
10
  --wds-space-1100: 44px;
10
11
  --wds-space-1050: 42px;
11
12
  --wds-space-1000: 40px;
@@ -1014,9 +1015,9 @@
1014
1015
  --wds-selector-list-item-padding-vertical-medium: var(--wds-space-200);
1015
1016
  --wds-selector-list-item-padding-horizontal-small: var(--wds-space-400);
1016
1017
  --wds-selector-list-item-padding-horizontal-medium: var(--wds-space-600);
1017
- --wds-selector-button-size-small: var(--wds-space-700);
1018
- --wds-selector-button-size-medium: var(--wds-space-800);
1019
- --wds-selector-button-size-large: var(--wds-space-900);
1018
+ --wds-selector-button-size-small: var(--wds-space-750);
1019
+ --wds-selector-button-size-medium: var(--wds-space-950);
1020
+ --wds-selector-button-size-large: var(--wds-space-1150);
1020
1021
  --wds-selector-button-padding-vertical-small: var(--wds-space-150);
1021
1022
  --wds-selector-button-padding-vertical-medium: var(--wds-space-150);
1022
1023
  --wds-selector-button-padding-vertical-large: var(--wds-space-150);
@@ -1026,6 +1027,12 @@
1026
1027
  --wds-selector-button-padding-horizontal-left-small: var(--wds-space-300);
1027
1028
  --wds-selector-button-padding-horizontal-left-medium: var(--wds-space-300);
1028
1029
  --wds-selector-button-padding-horizontal-left-large: var(--wds-space-300);
1030
+ --wds-selector-button-fill-pressed: var(--wds-color-black-750);
1031
+ --wds-selector-button-fill-hover: var(--wds-color-black-750);
1032
+ --wds-selector-button-fill-disabled: var(--wds-color-black-750);
1033
+ --wds-selector-button-fill: var(--wds-color-black-750);
1034
+ --wds-selector-button-border-color-disabled: var(--wds-color-black-100-transparent-0);
1035
+ --wds-selector-button-border-color: var(--wds-color-black-100-transparent-0);
1029
1036
  --wds-select-area-padding-vertical: var(--wds-space-300);
1030
1037
  --wds-select-area-padding-horizontal: var(--wds-space-400);
1031
1038
  --wds-select-area-fill-hover: var(--wds-color-black-700);
@@ -1136,6 +1143,7 @@
1136
1143
  --wds-mobile-modal-content-padding-horizontal: var(--wds-space-600);
1137
1144
  --wds-message-modal-title-font-size: var(--wds-font-size-800);
1138
1145
  --wds-message-modal-title-font-family: var(--wds-font-family-display);
1146
+ --wds-message-modal-top-controls-paddings: var(--wds-space-250);
1139
1147
  --wds-message-modal-padding-vertical: var(--wds-space-500);
1140
1148
  --wds-message-modal-padding-horizontal: var(--wds-space-600);
1141
1149
  --wds-message-modal-content-gap: var(--wds-space-300);
@@ -1222,6 +1230,7 @@
1222
1230
  --wds-input-background-fill-hover: var(--wds-color-black-750);
1223
1231
  --wds-input-background-fill-disabled: var(--wds-color-black-750);
1224
1232
  --wds-input-background-fill-default: var(--wds-color-black-750);
1233
+ --wds-input-background-fill: var(--wds-color-black-750);
1225
1234
  --wds-image-border-radius-none: var(--wds-border-radius-0);
1226
1235
  --wds-image-border-radius-default: var(--wds-border-radius-200);
1227
1236
  --wds-icon-button-color-text-standard-tertiary-disabled: var(--wds-color-black-500);
@@ -1581,9 +1590,13 @@
1581
1590
  --wds-side-panel-title-font-size: var(--wds-font-size-heading-3);
1582
1591
  --wds-side-panel-footer-fill: var(--wds-color-fill-surface-modal);
1583
1592
  --wds-side-panel-floating-title-font-size: var(--wds-font-size-heading-3);
1584
- --wds-selector-button-text-fill-hover: var(--wds-color-text-primary);
1593
+ --wds-selector-button-text-fill-pressed: var(--wds-color-text-primary);
1594
+ --wds-selector-button-text-fill-hover: var(--wds-color-text-standard-primary);
1595
+ --wds-selector-button-text-fill-disabled: var(--wds-color-text-disabled);
1585
1596
  --wds-selector-button-text-fill: var(--wds-color-text-standard-primary);
1586
1597
  --wds-selector-button-font-size-small: var(--wds-font-size-body-tiny);
1598
+ --wds-selector-button-border-color-pressed: var(--wds-color-border-standard-secondary-active);
1599
+ --wds-selector-button-border-color-hover: var(--wds-color-border-standard-primary);
1587
1600
  --wds-segmented-toggle-value-fill-selected-disabled: var(--wds-color-text-disabled);
1588
1601
  --wds-segmented-toggle-value-fill-selected: var(--wds-color-text-primary);
1589
1602
  --wds-segmented-toggle-value-fill-hover: var(--wds-color-text-primary);
package/odeditor/all.scss CHANGED
@@ -33,6 +33,7 @@
33
33
  --wds-space-1400: 56px;
34
34
  --wds-space-1300: 52px;
35
35
  --wds-space-1200: 48px;
36
+ --wds-space-1150: 46px;
36
37
  --wds-space-1100: 44px;
37
38
  --wds-space-1050: 42px;
38
39
  --wds-space-1000: 40px;
@@ -682,9 +683,9 @@
682
683
  --wds-selector-list-item-padding-vertical-medium: var(--wds-space-200);
683
684
  --wds-selector-list-item-padding-horizontal-small: var(--wds-space-400);
684
685
  --wds-selector-list-item-padding-horizontal-medium: var(--wds-space-600);
685
- --wds-selector-button-size-small: var(--wds-space-700);
686
- --wds-selector-button-size-medium: var(--wds-space-800);
687
- --wds-selector-button-size-large: var(--wds-space-900);
686
+ --wds-selector-button-size-small: var(--wds-space-750);
687
+ --wds-selector-button-size-medium: var(--wds-space-950);
688
+ --wds-selector-button-size-large: var(--wds-space-1150);
688
689
  --wds-selector-button-padding-vertical-small: var(--wds-space-150);
689
690
  --wds-selector-button-padding-vertical-medium: var(--wds-space-150);
690
691
  --wds-selector-button-padding-vertical-large: var(--wds-space-150);
@@ -694,6 +695,12 @@
694
695
  --wds-selector-button-padding-horizontal-left-small: var(--wds-space-300);
695
696
  --wds-selector-button-padding-horizontal-left-medium: var(--wds-space-300);
696
697
  --wds-selector-button-padding-horizontal-left-large: var(--wds-space-300);
698
+ --wds-selector-button-fill-pressed: var(--wds-color-black-750);
699
+ --wds-selector-button-fill-hover: var(--wds-color-black-750);
700
+ --wds-selector-button-fill-disabled: var(--wds-color-black-750);
701
+ --wds-selector-button-fill: var(--wds-color-black-750);
702
+ --wds-selector-button-border-color-disabled: var(--wds-color-black-100-transparent-0);
703
+ --wds-selector-button-border-color: var(--wds-color-black-100-transparent-0);
697
704
  --wds-select-area-padding-vertical: var(--wds-space-300);
698
705
  --wds-select-area-padding-horizontal: var(--wds-space-400);
699
706
  --wds-select-area-fill-hover: var(--wds-color-black-700);
@@ -802,6 +809,7 @@
802
809
  --wds-mobile-modal-footer-padding-horizontal: var(--wds-space-600);
803
810
  --wds-mobile-modal-content-padding-vertical: var(--wds-space-600);
804
811
  --wds-mobile-modal-content-padding-horizontal: var(--wds-space-600);
812
+ --wds-message-modal-top-controls-paddings: var(--wds-space-250);
805
813
  --wds-message-modal-title-font-size: var(--wds-font-size-800);
806
814
  --wds-message-modal-title-font-family: var(--wds-font-family-display);
807
815
  --wds-message-modal-padding-vertical: var(--wds-space-500);
@@ -882,6 +890,7 @@
882
890
  --wds-input-background-fill-hover: var(--wds-color-black-750);
883
891
  --wds-input-background-fill-disabled: var(--wds-color-black-750);
884
892
  --wds-input-background-fill-default: var(--wds-color-black-750);
893
+ --wds-input-background-fill: var(--wds-color-black-750);
885
894
  --wds-input-area-padding-vertical-small: var(--wds-space-200);
886
895
  --wds-input-area-padding-vertical-medium: var(--wds-space-300);
887
896
  --wds-input-area-padding-right-small: var(--wds-space-150);
@@ -1571,9 +1580,13 @@
1571
1580
  --wds-shadow-inner-400-horizontal: var(--wds-shadow-inner-300-left), var(--wds-shadow-inner-300-right);
1572
1581
  --wds-shadow-inner-300-vertical: var(--wds-shadow-inner-300-top), var(--wds-shadow-inner-300-bottom);
1573
1582
  --wds-shadow-inner-300-horizontal: var(--wds-shadow-inner-300-left), var(--wds-shadow-inner-300-right);
1574
- --wds-selector-button-text-fill-hover: var(--wds-color-text-primary);
1583
+ --wds-selector-button-text-fill-pressed: var(--wds-color-text-primary);
1584
+ --wds-selector-button-text-fill-hover: var(--wds-color-text-standard-primary);
1585
+ --wds-selector-button-text-fill-disabled: var(--wds-color-text-disabled);
1575
1586
  --wds-selector-button-text-fill: var(--wds-color-text-standard-primary);
1576
1587
  --wds-selector-button-font-size-small: var(--wds-font-size-body-tiny);
1588
+ --wds-selector-button-border-color-pressed: var(--wds-color-border-standard-secondary-active);
1589
+ --wds-selector-button-border-color-hover: var(--wds-color-border-standard-primary);
1577
1590
  --wds-segmented-toggle-value-fill-selected-disabled: var(--wds-color-text-disabled);
1578
1591
  --wds-segmented-toggle-value-fill-selected: var(--wds-color-text-primary);
1579
1592
  --wds-segmented-toggle-value-fill-hover: var(--wds-color-text-primary);
package/odeditor/all.st.css CHANGED
@@ -1050,6 +1050,7 @@
1050
1050
  @property st-global(--wds-input-area-padding-right-small);
1051
1051
  @property st-global(--wds-input-area-padding-vertical-medium);
1052
1052
  @property st-global(--wds-input-area-padding-vertical-small);
1053
+ @property st-global(--wds-input-background-fill);
1053
1054
  @property st-global(--wds-input-background-fill-default);
1054
1055
  @property st-global(--wds-input-background-fill-disabled);
1055
1056
  @property st-global(--wds-input-background-fill-hover);
@@ -1199,6 +1200,7 @@
1199
1200
  @property st-global(--wds-message-modal-title-font-family);
1200
1201
  @property st-global(--wds-message-modal-title-font-line-height);
1201
1202
  @property st-global(--wds-message-modal-title-font-size);
1203
+ @property st-global(--wds-message-modal-top-controls-paddings);
1202
1204
  @property st-global(--wds-mobile-modal-content-padding-horizontal);
1203
1205
  @property st-global(--wds-mobile-modal-content-padding-vertical);
1204
1206
  @property st-global(--wds-mobile-modal-footer-padding-horizontal);
@@ -1352,6 +1354,14 @@
1352
1354
  @property st-global(--wds-select-area-fill-hover);
1353
1355
  @property st-global(--wds-select-area-padding-horizontal);
1354
1356
  @property st-global(--wds-select-area-padding-vertical);
1357
+ @property st-global(--wds-selector-button-border-color);
1358
+ @property st-global(--wds-selector-button-border-color-disabled);
1359
+ @property st-global(--wds-selector-button-border-color-hover);
1360
+ @property st-global(--wds-selector-button-border-color-pressed);
1361
+ @property st-global(--wds-selector-button-fill);
1362
+ @property st-global(--wds-selector-button-fill-disabled);
1363
+ @property st-global(--wds-selector-button-fill-hover);
1364
+ @property st-global(--wds-selector-button-fill-pressed);
1355
1365
  @property st-global(--wds-selector-button-font-size-small);
1356
1366
  @property st-global(--wds-selector-button-padding-horizontal-left-large);
1357
1367
  @property st-global(--wds-selector-button-padding-horizontal-left-medium);
@@ -1366,7 +1376,9 @@
1366
1376
  @property st-global(--wds-selector-button-size-medium);
1367
1377
  @property st-global(--wds-selector-button-size-small);
1368
1378
  @property st-global(--wds-selector-button-text-fill);
1379
+ @property st-global(--wds-selector-button-text-fill-disabled);
1369
1380
  @property st-global(--wds-selector-button-text-fill-hover);
1381
+ @property st-global(--wds-selector-button-text-fill-pressed);
1370
1382
  @property st-global(--wds-selector-list-item-padding-horizontal-medium);
1371
1383
  @property st-global(--wds-selector-list-item-padding-horizontal-small);
1372
1384
  @property st-global(--wds-selector-list-item-padding-vertical-medium);
@@ -1611,6 +1623,7 @@
1611
1623
  @property st-global(--wds-space-1000);
1612
1624
  @property st-global(--wds-space-1050);
1613
1625
  @property st-global(--wds-space-1100);
1626
+ @property st-global(--wds-space-1150);
1614
1627
  @property st-global(--wds-space-1200);
1615
1628
  @property st-global(--wds-space-1300);
1616
1629
  @property st-global(--wds-space-1400);
@@ -2992,6 +3005,7 @@
2992
3005
  --wds-input-area-padding-right-small: 6px;
2993
3006
  --wds-input-area-padding-vertical-medium: 12px;
2994
3007
  --wds-input-area-padding-vertical-small: 8px;
3008
+ --wds-input-background-fill: #f8f6f6;
2995
3009
  --wds-input-background-fill-default: #f8f6f6;
2996
3010
  --wds-input-background-fill-disabled: #f8f6f6;
2997
3011
  --wds-input-background-fill-hover: #f8f6f6;
@@ -3141,6 +3155,7 @@
3141
3155
  --wds-message-modal-title-font-family: "Madefor Display", Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
3142
3156
  --wds-message-modal-title-font-line-height: 24px;
3143
3157
  --wds-message-modal-title-font-size: 24px;
3158
+ --wds-message-modal-top-controls-paddings: 10px;
3144
3159
  --wds-mobile-modal-content-padding-horizontal: 24px;
3145
3160
  --wds-mobile-modal-content-padding-vertical: 24px;
3146
3161
  --wds-mobile-modal-footer-padding-horizontal: 24px;
@@ -3294,6 +3309,14 @@
3294
3309
  --wds-select-area-fill-hover: #f0efef;
3295
3310
  --wds-select-area-padding-horizontal: 16px;
3296
3311
  --wds-select-area-padding-vertical: 12px;
3312
+ --wds-selector-button-border-color: rgba(19, 23, 32, 0);
3313
+ --wds-selector-button-border-color-disabled: rgba(19, 23, 32, 0);
3314
+ --wds-selector-button-border-color-hover: #acbeff;
3315
+ --wds-selector-button-border-color-pressed: #2f5dff;
3316
+ --wds-selector-button-fill: #f8f6f6;
3317
+ --wds-selector-button-fill-disabled: #f8f6f6;
3318
+ --wds-selector-button-fill-hover: #f8f6f6;
3319
+ --wds-selector-button-fill-pressed: #f8f6f6;
3297
3320
  --wds-selector-button-font-size-small: 12px;
3298
3321
  --wds-selector-button-padding-horizontal-left-large: 12px;
3299
3322
  --wds-selector-button-padding-horizontal-left-medium: 12px;
@@ -3304,11 +3327,13 @@
3304
3327
  --wds-selector-button-padding-vertical-large: 6px;
3305
3328
  --wds-selector-button-padding-vertical-medium: 6px;
3306
3329
  --wds-selector-button-padding-vertical-small: 6px;
3307
- --wds-selector-button-size-large: 36px;
3308
- --wds-selector-button-size-medium: 32px;
3309
- --wds-selector-button-size-small: 28px;
3330
+ --wds-selector-button-size-large: 46px;
3331
+ --wds-selector-button-size-medium: 38px;
3332
+ --wds-selector-button-size-small: 30px;
3310
3333
  --wds-selector-button-text-fill: #151414;
3311
- --wds-selector-button-text-fill-hover: #2f5dff;
3334
+ --wds-selector-button-text-fill-disabled: #a8a6a5;
3335
+ --wds-selector-button-text-fill-hover: #151414;
3336
+ --wds-selector-button-text-fill-pressed: #2f5dff;
3312
3337
  --wds-selector-list-item-padding-horizontal-medium: 24px;
3313
3338
  --wds-selector-list-item-padding-horizontal-small: 16px;
3314
3339
  --wds-selector-list-item-padding-vertical-medium: 8px;
@@ -3553,6 +3578,7 @@
3553
3578
  --wds-space-1000: 40px;
3554
3579
  --wds-space-1050: 42px;
3555
3580
  --wds-space-1100: 44px;
3581
+ --wds-space-1150: 46px;
3556
3582
  --wds-space-1200: 48px;
3557
3583
  --wds-space-1300: 52px;
3558
3584
  --wds-space-1400: 56px;
package/odeditor/component.st.css CHANGED
@@ -494,6 +494,7 @@
494
494
  @property st-global(--wds-input-area-padding-right-small);
495
495
  @property st-global(--wds-input-area-padding-vertical-medium);
496
496
  @property st-global(--wds-input-area-padding-vertical-small);
497
+ @property st-global(--wds-input-background-fill);
497
498
  @property st-global(--wds-input-background-fill-default);
498
499
  @property st-global(--wds-input-background-fill-disabled);
499
500
  @property st-global(--wds-input-background-fill-hover);
@@ -643,6 +644,7 @@
643
644
  @property st-global(--wds-message-modal-title-font-family);
644
645
  @property st-global(--wds-message-modal-title-font-line-height);
645
646
  @property st-global(--wds-message-modal-title-font-size);
647
+ @property st-global(--wds-message-modal-top-controls-paddings);
646
648
  @property st-global(--wds-mobile-modal-content-padding-horizontal);
647
649
  @property st-global(--wds-mobile-modal-content-padding-vertical);
648
650
  @property st-global(--wds-mobile-modal-footer-padding-horizontal);
@@ -796,6 +798,14 @@
796
798
  @property st-global(--wds-select-area-fill-hover);
797
799
  @property st-global(--wds-select-area-padding-horizontal);
798
800
  @property st-global(--wds-select-area-padding-vertical);
801
+ @property st-global(--wds-selector-button-border-color);
802
+ @property st-global(--wds-selector-button-border-color-disabled);
803
+ @property st-global(--wds-selector-button-border-color-hover);
804
+ @property st-global(--wds-selector-button-border-color-pressed);
805
+ @property st-global(--wds-selector-button-fill);
806
+ @property st-global(--wds-selector-button-fill-disabled);
807
+ @property st-global(--wds-selector-button-fill-hover);
808
+ @property st-global(--wds-selector-button-fill-pressed);
799
809
  @property st-global(--wds-selector-button-font-size-small);
800
810
  @property st-global(--wds-selector-button-padding-horizontal-left-large);
801
811
  @property st-global(--wds-selector-button-padding-horizontal-left-medium);
@@ -810,7 +820,9 @@
810
820
  @property st-global(--wds-selector-button-size-medium);
811
821
  @property st-global(--wds-selector-button-size-small);
812
822
  @property st-global(--wds-selector-button-text-fill);
823
+ @property st-global(--wds-selector-button-text-fill-disabled);
813
824
  @property st-global(--wds-selector-button-text-fill-hover);
825
+ @property st-global(--wds-selector-button-text-fill-pressed);
814
826
  @property st-global(--wds-selector-list-item-padding-horizontal-medium);
815
827
  @property st-global(--wds-selector-list-item-padding-horizontal-small);
816
828
  @property st-global(--wds-selector-list-item-padding-vertical-medium);
@@ -1729,6 +1741,7 @@
1729
1741
  --wds-input-area-padding-right-small: 6px;
1730
1742
  --wds-input-area-padding-vertical-medium: 12px;
1731
1743
  --wds-input-area-padding-vertical-small: 8px;
1744
+ --wds-input-background-fill: #f8f6f6;
1732
1745
  --wds-input-background-fill-default: #f8f6f6;
1733
1746
  --wds-input-background-fill-disabled: #f8f6f6;
1734
1747
  --wds-input-background-fill-hover: #f8f6f6;
@@ -1878,6 +1891,7 @@
1878
1891
  --wds-message-modal-title-font-family: "Madefor Display", Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
1879
1892
  --wds-message-modal-title-font-line-height: 24px;
1880
1893
  --wds-message-modal-title-font-size: 24px;
1894
+ --wds-message-modal-top-controls-paddings: 10px;
1881
1895
  --wds-mobile-modal-content-padding-horizontal: 24px;
1882
1896
  --wds-mobile-modal-content-padding-vertical: 24px;
1883
1897
  --wds-mobile-modal-footer-padding-horizontal: 24px;
@@ -2031,6 +2045,14 @@
2031
2045
  --wds-select-area-fill-hover: #f0efef;
2032
2046
  --wds-select-area-padding-horizontal: 16px;
2033
2047
  --wds-select-area-padding-vertical: 12px;
2048
+ --wds-selector-button-border-color: rgba(19, 23, 32, 0);
2049
+ --wds-selector-button-border-color-disabled: rgba(19, 23, 32, 0);
2050
+ --wds-selector-button-border-color-hover: #acbeff;
2051
+ --wds-selector-button-border-color-pressed: #2f5dff;
2052
+ --wds-selector-button-fill: #f8f6f6;
2053
+ --wds-selector-button-fill-disabled: #f8f6f6;
2054
+ --wds-selector-button-fill-hover: #f8f6f6;
2055
+ --wds-selector-button-fill-pressed: #f8f6f6;
2034
2056
  --wds-selector-button-font-size-small: 12px;
2035
2057
  --wds-selector-button-padding-horizontal-left-large: 12px;
2036
2058
  --wds-selector-button-padding-horizontal-left-medium: 12px;
@@ -2041,11 +2063,13 @@
2041
2063
  --wds-selector-button-padding-vertical-large: 6px;
2042
2064
  --wds-selector-button-padding-vertical-medium: 6px;
2043
2065
  --wds-selector-button-padding-vertical-small: 6px;
2044
- --wds-selector-button-size-large: 36px;
2045
- --wds-selector-button-size-medium: 32px;
2046
- --wds-selector-button-size-small: 28px;
2066
+ --wds-selector-button-size-large: 46px;
2067
+ --wds-selector-button-size-medium: 38px;
2068
+ --wds-selector-button-size-small: 30px;
2047
2069
  --wds-selector-button-text-fill: #151414;
2048
- --wds-selector-button-text-fill-hover: #2f5dff;
2070
+ --wds-selector-button-text-fill-disabled: #a8a6a5;
2071
+ --wds-selector-button-text-fill-hover: #151414;
2072
+ --wds-selector-button-text-fill-pressed: #2f5dff;
2049
2073
  --wds-selector-list-item-padding-horizontal-medium: 24px;
2050
2074
  --wds-selector-list-item-padding-horizontal-small: 16px;
2051
2075
  --wds-selector-list-item-padding-vertical-medium: 8px;
package/odeditor/foundation.st.css CHANGED
@@ -213,6 +213,7 @@
213
213
  @property st-global(--wds-space-1000);
214
214
  @property st-global(--wds-space-1050);
215
215
  @property st-global(--wds-space-1100);
216
+ @property st-global(--wds-space-1150);
216
217
  @property st-global(--wds-space-1200);
217
218
  @property st-global(--wds-space-1300);
218
219
  @property st-global(--wds-space-1400);
@@ -437,6 +438,7 @@
437
438
  --wds-space-1000: 40px;
438
439
  --wds-space-1050: 42px;
439
440
  --wds-space-1100: 44px;
441
+ --wds-space-1150: 46px;
440
442
  --wds-space-1200: 48px;
441
443
  --wds-space-1300: 52px;
442
444
  --wds-space-1400: 56px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wix/design-system-tokens",
3
- "version": "1.127.0",
3
+ "version": "1.128.0",
4
4
  "packageManager": "yarn@3.5.0",
5
5
  "author": "augustinasv@wix.com",
6
6
  "license": "MIT",
@@ -33,5 +33,5 @@
33
33
  "groupId": "com.wixpress"
34
34
  }
35
35
  },
36
- "falconPackageHash": "3e0a5895407cd80f727fb7a204b0cd9886bf97572c6e7ad4f5d895f5"
36
+ "falconPackageHash": "8e2e2e87117874d47eff7bb39444b3ede8279db2bfef9fbf9b82cb22"
37
37
  }
package/studio/all.css CHANGED
@@ -1003,6 +1003,7 @@
1003
1003
  --wds-selector-list-item-padding-vertical-medium: var(--wds-space-200);
1004
1004
  --wds-selector-list-item-padding-horizontal-small: var(--wds-space-400);
1005
1005
  --wds-selector-list-item-padding-horizontal-medium: var(--wds-space-600);
1006
+ --wds-selector-button-text-fill-disabled: var(--wds-color-text-disabled);
1006
1007
  --wds-selector-button-size-small: var(--wds-space-700);
1007
1008
  --wds-selector-button-size-medium: var(--wds-space-800);
1008
1009
  --wds-selector-button-size-large: var(--wds-space-900);
@@ -1116,6 +1117,7 @@
1116
1117
  --wds-mobile-modal-content-padding-vertical: var(--wds-space-600);
1117
1118
  --wds-mobile-modal-content-padding-horizontal: var(--wds-space-600);
1118
1119
  --wds-message-modal-title-font-family: var(--wds-font-family-default);
1120
+ --wds-message-modal-top-controls-paddings: var(--wds-space-100);
1119
1121
  --wds-message-modal-padding-vertical: var(--wds-space-500);
1120
1122
  --wds-message-modal-padding-horizontal: var(--wds-space-600);
1121
1123
  --wds-message-modal-content-gap: var(--wds-space-200);
@@ -1570,6 +1572,17 @@
1570
1572
  --wds-side-panel-title-font-size: var(--wds-font-size-heading-4);
1571
1573
  --wds-side-panel-footer-fill: var(--wds-color-fill-surface-modal);
1572
1574
  --wds-side-panel-floating-title-font-size: var(--wds-font-size-body-medium);
1575
+ --wds-selector-button-text-fill-pressed: var(--wds-color-text-primary);
1576
+ --wds-selector-button-text-fill-hover: var(--wds-color-text-standard-primary);
1577
+ --wds-selector-button-text-fill: var(--wds-color-text-standard-primary);
1578
+ --wds-selector-button-fill-pressed: var(--wds-color-fill-standard-tertiary-active);
1579
+ --wds-selector-button-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
1580
+ --wds-selector-button-fill-disabled: var(--wds-color-fill-standard-tertiary);
1581
+ --wds-selector-button-fill: var(--wds-color-fill-standard-tertiary);
1582
+ --wds-selector-button-border-color-pressed: var(--wds-color-border-standard-secondary-active);
1583
+ --wds-selector-button-border-color-hover: var(--wds-color-border-standard-secondary-hover);
1584
+ --wds-selector-button-border-color-disabled: var(--wds-color-border-standard-secondary-disabled);
1585
+ --wds-selector-button-border-color: var(--wds-color-border-standard-secondary);
1573
1586
  --wds-segmented-toggle-value-fill-selected: var(--wds-color-text-standard-primary);
1574
1587
  --wds-segmented-toggle-value-fill-hover: var(--wds-color-text-standard-primary);
1575
1588
  --wds-segmented-toggle-value-fill-default: var(--wds-color-text-standard-primary);
@@ -1660,7 +1673,9 @@
1660
1673
  --wds-input-border-color-hover: var(--wds-color-border-standard-secondary);
1661
1674
  --wds-input-border-color: var(--wds-color-border-standard-secondary);
1662
1675
  --wds-input-background-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
1676
+ --wds-input-background-fill-disabled: var(--wds-color-fill-standard-tertiary-disabled);
1663
1677
  --wds-input-background-fill-default: var(--wds-color-fill-standard-tertiary);
1678
+ --wds-input-background-fill: var(--wds-color-fill-standard-tertiary);
1664
1679
  --wds-info-icon-fill-hover: var(--wds-color-text-primary);
1665
1680
  --wds-info-icon-fill: var(--wds-color-text-placeholder);
1666
1681
  --wds-icon-button-color-text-standard-tertiary-hover: var(--wds-color-text-primary);
package/studio/all.scss CHANGED
@@ -693,6 +693,7 @@
693
693
  --wds-selector-list-item-padding-vertical-medium: var(--wds-space-200);
694
694
  --wds-selector-list-item-padding-horizontal-small: var(--wds-space-400);
695
695
  --wds-selector-list-item-padding-horizontal-medium: var(--wds-space-600);
696
+ --wds-selector-button-text-fill-disabled: var(--wds-color-text-disabled);
696
697
  --wds-selector-button-size-small: var(--wds-space-700);
697
698
  --wds-selector-button-size-medium: var(--wds-space-800);
698
699
  --wds-selector-button-size-large: var(--wds-space-900);
@@ -805,6 +806,7 @@
805
806
  --wds-mobile-modal-footer-padding-horizontal: var(--wds-space-600);
806
807
  --wds-mobile-modal-content-padding-vertical: var(--wds-space-600);
807
808
  --wds-mobile-modal-content-padding-horizontal: var(--wds-space-600);
809
+ --wds-message-modal-top-controls-paddings: var(--wds-space-100);
808
810
  --wds-message-modal-title-font-family: var(--wds-font-family-default);
809
811
  --wds-message-modal-padding-vertical: var(--wds-space-500);
810
812
  --wds-message-modal-padding-horizontal: var(--wds-space-600);
@@ -1560,6 +1562,17 @@
1560
1562
  --wds-shadow-inner-400-horizontal: var(--wds-shadow-inner-300-left), var(--wds-shadow-inner-300-right);
1561
1563
  --wds-shadow-inner-300-vertical: var(--wds-shadow-inner-300-top), var(--wds-shadow-inner-300-bottom);
1562
1564
  --wds-shadow-inner-300-horizontal: var(--wds-shadow-inner-300-left), var(--wds-shadow-inner-300-right);
1565
+ --wds-selector-button-text-fill-pressed: var(--wds-color-text-primary);
1566
+ --wds-selector-button-text-fill-hover: var(--wds-color-text-standard-primary);
1567
+ --wds-selector-button-text-fill: var(--wds-color-text-standard-primary);
1568
+ --wds-selector-button-fill-pressed: var(--wds-color-fill-standard-tertiary-active);
1569
+ --wds-selector-button-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
1570
+ --wds-selector-button-fill-disabled: var(--wds-color-fill-standard-tertiary);
1571
+ --wds-selector-button-fill: var(--wds-color-fill-standard-tertiary);
1572
+ --wds-selector-button-border-color-pressed: var(--wds-color-border-standard-secondary-active);
1573
+ --wds-selector-button-border-color-hover: var(--wds-color-border-standard-secondary-hover);
1574
+ --wds-selector-button-border-color-disabled: var(--wds-color-border-standard-secondary-disabled);
1575
+ --wds-selector-button-border-color: var(--wds-color-border-standard-secondary);
1563
1576
  --wds-segmented-toggle-value-fill-selected: var(--wds-color-text-standard-primary);
1564
1577
  --wds-segmented-toggle-value-fill-hover: var(--wds-color-text-standard-primary);
1565
1578
  --wds-segmented-toggle-value-fill-default: var(--wds-color-text-standard-primary);
@@ -1650,7 +1663,9 @@
1650
1663
  --wds-input-border-color-hover: var(--wds-color-border-standard-secondary);
1651
1664
  --wds-input-border-color: var(--wds-color-border-standard-secondary);
1652
1665
  --wds-input-background-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
1666
+ --wds-input-background-fill-disabled: var(--wds-color-fill-standard-tertiary-disabled);
1653
1667
  --wds-input-background-fill-default: var(--wds-color-fill-standard-tertiary);
1668
+ --wds-input-background-fill: var(--wds-color-fill-standard-tertiary);
1654
1669
  --wds-info-icon-fill-hover: var(--wds-color-text-primary);
1655
1670
  --wds-info-icon-fill: var(--wds-color-text-placeholder);
1656
1671
  --wds-icon-button-color-text-standard-tertiary-hover: var(--wds-color-text-primary);
package/studio/all.st.css CHANGED
@@ -1018,7 +1018,9 @@
1018
1018
  @property st-global(--wds-input-area-padding-right-small);
1019
1019
  @property st-global(--wds-input-area-padding-vertical-medium);
1020
1020
  @property st-global(--wds-input-area-padding-vertical-small);
1021
+ @property st-global(--wds-input-background-fill);
1021
1022
  @property st-global(--wds-input-background-fill-default);
1023
+ @property st-global(--wds-input-background-fill-disabled);
1022
1024
  @property st-global(--wds-input-background-fill-hover);
1023
1025
  @property st-global(--wds-input-border-color);
1024
1026
  @property st-global(--wds-input-border-color-hover);
@@ -1193,6 +1195,7 @@
1193
1195
  @property st-global(--wds-message-modal-title-font-family);
1194
1196
  @property st-global(--wds-message-modal-title-font-line-height);
1195
1197
  @property st-global(--wds-message-modal-title-font-size);
1198
+ @property st-global(--wds-message-modal-top-controls-paddings);
1196
1199
  @property st-global(--wds-mobile-modal-content-padding-horizontal);
1197
1200
  @property st-global(--wds-mobile-modal-content-padding-vertical);
1198
1201
  @property st-global(--wds-mobile-modal-footer-padding-horizontal);
@@ -1340,6 +1343,14 @@
1340
1343
  @property st-global(--wds-select-area-fill-hover);
1341
1344
  @property st-global(--wds-select-area-padding-horizontal);
1342
1345
  @property st-global(--wds-select-area-padding-vertical);
1346
+ @property st-global(--wds-selector-button-border-color);
1347
+ @property st-global(--wds-selector-button-border-color-disabled);
1348
+ @property st-global(--wds-selector-button-border-color-hover);
1349
+ @property st-global(--wds-selector-button-border-color-pressed);
1350
+ @property st-global(--wds-selector-button-fill);
1351
+ @property st-global(--wds-selector-button-fill-disabled);
1352
+ @property st-global(--wds-selector-button-fill-hover);
1353
+ @property st-global(--wds-selector-button-fill-pressed);
1343
1354
  @property st-global(--wds-selector-button-padding-horizontal-left-large);
1344
1355
  @property st-global(--wds-selector-button-padding-horizontal-left-medium);
1345
1356
  @property st-global(--wds-selector-button-padding-horizontal-left-small);
@@ -1352,6 +1363,10 @@
1352
1363
  @property st-global(--wds-selector-button-size-large);
1353
1364
  @property st-global(--wds-selector-button-size-medium);
1354
1365
  @property st-global(--wds-selector-button-size-small);
1366
+ @property st-global(--wds-selector-button-text-fill);
1367
+ @property st-global(--wds-selector-button-text-fill-disabled);
1368
+ @property st-global(--wds-selector-button-text-fill-hover);
1369
+ @property st-global(--wds-selector-button-text-fill-pressed);
1355
1370
  @property st-global(--wds-selector-list-item-padding-horizontal-medium);
1356
1371
  @property st-global(--wds-selector-list-item-padding-horizontal-small);
1357
1372
  @property st-global(--wds-selector-list-item-padding-vertical-medium);
@@ -2951,7 +2966,9 @@
2951
2966
  --wds-input-area-padding-right-small: 6px;
2952
2967
  --wds-input-area-padding-vertical-medium: 6px;
2953
2968
  --wds-input-area-padding-vertical-small: 6px;
2969
+ --wds-input-background-fill: #ffffff;
2954
2970
  --wds-input-background-fill-default: #ffffff;
2971
+ --wds-input-background-fill-disabled: #ffffff;
2955
2972
  --wds-input-background-fill-hover: #f7f8f8;
2956
2973
  --wds-input-border-color: #e2e3ea;
2957
2974
  --wds-input-border-color-hover: #e2e3ea;
@@ -3126,6 +3143,7 @@
3126
3143
  --wds-message-modal-title-font-family: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
3127
3144
  --wds-message-modal-title-font-line-height: 24px;
3128
3145
  --wds-message-modal-title-font-size: 18px;
3146
+ --wds-message-modal-top-controls-paddings: 4px;
3129
3147
  --wds-mobile-modal-content-padding-horizontal: 24px;
3130
3148
  --wds-mobile-modal-content-padding-vertical: 24px;
3131
3149
  --wds-mobile-modal-footer-padding-horizontal: 24px;
@@ -3273,6 +3291,14 @@
3273
3291
  --wds-select-area-fill-hover: #edeef2;
3274
3292
  --wds-select-area-padding-horizontal: 16px;
3275
3293
  --wds-select-area-padding-vertical: 12px;
3294
+ --wds-selector-button-border-color: #e2e3ea;
3295
+ --wds-selector-button-border-color-disabled: rgba(19, 23, 32, .1);
3296
+ --wds-selector-button-border-color-hover: #868aa5;
3297
+ --wds-selector-button-border-color-pressed: #116dff;
3298
+ --wds-selector-button-fill: #ffffff;
3299
+ --wds-selector-button-fill-disabled: #ffffff;
3300
+ --wds-selector-button-fill-hover: #f7f8f8;
3301
+ --wds-selector-button-fill-pressed: #dce9ff;
3276
3302
  --wds-selector-button-padding-horizontal-left-large: 12px;
3277
3303
  --wds-selector-button-padding-horizontal-left-medium: 12px;
3278
3304
  --wds-selector-button-padding-horizontal-left-small: 12px;
@@ -3285,6 +3311,10 @@
3285
3311
  --wds-selector-button-size-large: 36px;
3286
3312
  --wds-selector-button-size-medium: 32px;
3287
3313
  --wds-selector-button-size-small: 28px;
3314
+ --wds-selector-button-text-fill: #131720;
3315
+ --wds-selector-button-text-fill-disabled: #bebebe;
3316
+ --wds-selector-button-text-fill-hover: #131720;
3317
+ --wds-selector-button-text-fill-pressed: #116dff;
3288
3318
  --wds-selector-list-item-padding-horizontal-medium: 24px;
3289
3319
  --wds-selector-list-item-padding-horizontal-small: 16px;
3290
3320
  --wds-selector-list-item-padding-vertical-medium: 8px;
package/studio/component.st.css CHANGED
@@ -464,7 +464,9 @@
464
464
  @property st-global(--wds-input-area-padding-right-small);
465
465
  @property st-global(--wds-input-area-padding-vertical-medium);
466
466
  @property st-global(--wds-input-area-padding-vertical-small);
467
+ @property st-global(--wds-input-background-fill);
467
468
  @property st-global(--wds-input-background-fill-default);
469
+ @property st-global(--wds-input-background-fill-disabled);
468
470
  @property st-global(--wds-input-background-fill-hover);
469
471
  @property st-global(--wds-input-border-color);
470
472
  @property st-global(--wds-input-border-color-hover);
@@ -639,6 +641,7 @@
639
641
  @property st-global(--wds-message-modal-title-font-family);
640
642
  @property st-global(--wds-message-modal-title-font-line-height);
641
643
  @property st-global(--wds-message-modal-title-font-size);
644
+ @property st-global(--wds-message-modal-top-controls-paddings);
642
645
  @property st-global(--wds-mobile-modal-content-padding-horizontal);
643
646
  @property st-global(--wds-mobile-modal-content-padding-vertical);
644
647
  @property st-global(--wds-mobile-modal-footer-padding-horizontal);
@@ -786,6 +789,14 @@
786
789
  @property st-global(--wds-select-area-fill-hover);
787
790
  @property st-global(--wds-select-area-padding-horizontal);
788
791
  @property st-global(--wds-select-area-padding-vertical);
792
+ @property st-global(--wds-selector-button-border-color);
793
+ @property st-global(--wds-selector-button-border-color-disabled);
794
+ @property st-global(--wds-selector-button-border-color-hover);
795
+ @property st-global(--wds-selector-button-border-color-pressed);
796
+ @property st-global(--wds-selector-button-fill);
797
+ @property st-global(--wds-selector-button-fill-disabled);
798
+ @property st-global(--wds-selector-button-fill-hover);
799
+ @property st-global(--wds-selector-button-fill-pressed);
789
800
  @property st-global(--wds-selector-button-padding-horizontal-left-large);
790
801
  @property st-global(--wds-selector-button-padding-horizontal-left-medium);
791
802
  @property st-global(--wds-selector-button-padding-horizontal-left-small);
@@ -798,6 +809,10 @@
798
809
  @property st-global(--wds-selector-button-size-large);
799
810
  @property st-global(--wds-selector-button-size-medium);
800
811
  @property st-global(--wds-selector-button-size-small);
812
+ @property st-global(--wds-selector-button-text-fill);
813
+ @property st-global(--wds-selector-button-text-fill-disabled);
814
+ @property st-global(--wds-selector-button-text-fill-hover);
815
+ @property st-global(--wds-selector-button-text-fill-pressed);
801
816
  @property st-global(--wds-selector-list-item-padding-horizontal-medium);
802
817
  @property st-global(--wds-selector-list-item-padding-horizontal-small);
803
818
  @property st-global(--wds-selector-list-item-padding-vertical-medium);
@@ -1692,7 +1707,9 @@
1692
1707
  --wds-input-area-padding-right-small: 6px;
1693
1708
  --wds-input-area-padding-vertical-medium: 6px;
1694
1709
  --wds-input-area-padding-vertical-small: 6px;
1710
+ --wds-input-background-fill: #ffffff;
1695
1711
  --wds-input-background-fill-default: #ffffff;
1712
+ --wds-input-background-fill-disabled: #ffffff;
1696
1713
  --wds-input-background-fill-hover: #f7f8f8;
1697
1714
  --wds-input-border-color: #e2e3ea;
1698
1715
  --wds-input-border-color-hover: #e2e3ea;
@@ -1867,6 +1884,7 @@
1867
1884
  --wds-message-modal-title-font-family: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
1868
1885
  --wds-message-modal-title-font-line-height: 24px;
1869
1886
  --wds-message-modal-title-font-size: 18px;
1887
+ --wds-message-modal-top-controls-paddings: 4px;
1870
1888
  --wds-mobile-modal-content-padding-horizontal: 24px;
1871
1889
  --wds-mobile-modal-content-padding-vertical: 24px;
1872
1890
  --wds-mobile-modal-footer-padding-horizontal: 24px;
@@ -2014,6 +2032,14 @@
2014
2032
  --wds-select-area-fill-hover: #edeef2;
2015
2033
  --wds-select-area-padding-horizontal: 16px;
2016
2034
  --wds-select-area-padding-vertical: 12px;
2035
+ --wds-selector-button-border-color: #e2e3ea;
2036
+ --wds-selector-button-border-color-disabled: rgba(19, 23, 32, .1);
2037
+ --wds-selector-button-border-color-hover: #868aa5;
2038
+ --wds-selector-button-border-color-pressed: #116dff;
2039
+ --wds-selector-button-fill: #ffffff;
2040
+ --wds-selector-button-fill-disabled: #ffffff;
2041
+ --wds-selector-button-fill-hover: #f7f8f8;
2042
+ --wds-selector-button-fill-pressed: #dce9ff;
2017
2043
  --wds-selector-button-padding-horizontal-left-large: 12px;
2018
2044
  --wds-selector-button-padding-horizontal-left-medium: 12px;
2019
2045
  --wds-selector-button-padding-horizontal-left-small: 12px;
@@ -2026,6 +2052,10 @@
2026
2052
  --wds-selector-button-size-large: 36px;
2027
2053
  --wds-selector-button-size-medium: 32px;
2028
2054
  --wds-selector-button-size-small: 28px;
2055
+ --wds-selector-button-text-fill: #131720;
2056
+ --wds-selector-button-text-fill-disabled: #bebebe;
2057
+ --wds-selector-button-text-fill-hover: #131720;
2058
+ --wds-selector-button-text-fill-pressed: #116dff;
2029
2059
  --wds-selector-list-item-padding-horizontal-medium: 24px;
2030
2060
  --wds-selector-list-item-padding-horizontal-small: 16px;
2031
2061
  --wds-selector-list-item-padding-vertical-medium: 8px;
package/wixel/all.css CHANGED
@@ -1086,6 +1086,7 @@
1086
1086
  --wds-mobile-modal-content-padding-vertical: var(--wds-space-600);
1087
1087
  --wds-mobile-modal-content-padding-horizontal: var(--wds-space-600);
1088
1088
  --wds-message-modal-title-font-family: var(--wds-font-family-default);
1089
+ --wds-message-modal-top-controls-paddings: var(--wds-space-100);
1089
1090
  --wds-message-modal-padding-vertical: var(--wds-space-500);
1090
1091
  --wds-message-modal-padding-horizontal: var(--wds-space-600);
1091
1092
  --wds-message-modal-content-gap: var(--wds-space-200);
@@ -1531,6 +1532,18 @@
1531
1532
  --wds-sidebar-item-text-light-default: var(--wds-color-text-standard-secondary);
1532
1533
  --wds-side-panel-title-font-size: var(--wds-font-size-heading-3);
1533
1534
  --wds-side-panel-floating-title-font-size: var(--wds-font-size-body-medium);
1535
+ --wds-selector-button-text-fill-pressed: var(--wds-color-text-primary);
1536
+ --wds-selector-button-text-fill-hover: var(--wds-color-text-standard-primary);
1537
+ --wds-selector-button-text-fill-disabled: var(--wds-color-text-disabled);
1538
+ --wds-selector-button-text-fill: var(--wds-color-text-standard-primary);
1539
+ --wds-selector-button-fill-pressed: var(--wds-color-fill-standard-tertiary-active);
1540
+ --wds-selector-button-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
1541
+ --wds-selector-button-fill-disabled: var(--wds-color-fill-standard-tertiary);
1542
+ --wds-selector-button-fill: var(--wds-color-fill-standard-tertiary);
1543
+ --wds-selector-button-border-color-pressed: var(--wds-color-border-standard-secondary-active);
1544
+ --wds-selector-button-border-color-hover: var(--wds-color-border-standard-secondary-hover);
1545
+ --wds-selector-button-border-color-disabled: var(--wds-color-border-standard-secondary-disabled);
1546
+ --wds-selector-button-border-color: var(--wds-color-border-standard-secondary);
1534
1547
  --wds-segmented-toggle-value-fill-selected-disabled: var(--wds-color-text-disabled-light);
1535
1548
  --wds-segmented-toggle-value-fill-selected: var(--wds-color-text-standard-primary-light);
1536
1549
  --wds-segmented-toggle-value-fill-hover: var(--wds-color-text-standard-primary);
@@ -1620,7 +1633,9 @@
1620
1633
  --wds-input-icon-affix-fill: var(--wds-color-text-standard-primary);
1621
1634
  --wds-input-border-color-readonly: var(--wds-color-fill-standard-tertiary-readonly);
1622
1635
  --wds-input-background-fill-hover: var(--wds-color-fill-standard-secondary-hover);
1636
+ --wds-input-background-fill-disabled: var(--wds-color-fill-standard-tertiary-disabled);
1623
1637
  --wds-input-background-fill-default: var(--wds-color-fill-standard-secondary);
1638
+ --wds-input-background-fill: var(--wds-color-fill-standard-tertiary);
1624
1639
  --wds-info-icon-fill-hover: var(--wds-color-text-primary);
1625
1640
  --wds-info-icon-fill: var(--wds-color-text-primary);
1626
1641
  --wds-icon-button-color-text-standard-tertiary-hover: var(--wds-color-text-primary);
package/wixel/all.scss CHANGED
@@ -788,6 +788,7 @@
788
788
  --wds-mobile-modal-footer-padding-horizontal: var(--wds-space-600);
789
789
  --wds-mobile-modal-content-padding-vertical: var(--wds-space-600);
790
790
  --wds-mobile-modal-content-padding-horizontal: var(--wds-space-600);
791
+ --wds-message-modal-top-controls-paddings: var(--wds-space-100);
791
792
  --wds-message-modal-title-font-family: var(--wds-font-family-default);
792
793
  --wds-message-modal-padding-vertical: var(--wds-space-500);
793
794
  --wds-message-modal-padding-horizontal: var(--wds-space-600);
@@ -1521,6 +1522,18 @@
1521
1522
  --wds-shadow-inner-400-horizontal: var(--wds-shadow-inner-300-left), var(--wds-shadow-inner-300-right);
1522
1523
  --wds-shadow-inner-300-vertical: var(--wds-shadow-inner-300-top), var(--wds-shadow-inner-300-bottom);
1523
1524
  --wds-shadow-inner-300-horizontal: var(--wds-shadow-inner-300-left), var(--wds-shadow-inner-300-right);
1525
+ --wds-selector-button-text-fill-pressed: var(--wds-color-text-primary);
1526
+ --wds-selector-button-text-fill-hover: var(--wds-color-text-standard-primary);
1527
+ --wds-selector-button-text-fill-disabled: var(--wds-color-text-disabled);
1528
+ --wds-selector-button-text-fill: var(--wds-color-text-standard-primary);
1529
+ --wds-selector-button-fill-pressed: var(--wds-color-fill-standard-tertiary-active);
1530
+ --wds-selector-button-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
1531
+ --wds-selector-button-fill-disabled: var(--wds-color-fill-standard-tertiary);
1532
+ --wds-selector-button-fill: var(--wds-color-fill-standard-tertiary);
1533
+ --wds-selector-button-border-color-pressed: var(--wds-color-border-standard-secondary-active);
1534
+ --wds-selector-button-border-color-hover: var(--wds-color-border-standard-secondary-hover);
1535
+ --wds-selector-button-border-color-disabled: var(--wds-color-border-standard-secondary-disabled);
1536
+ --wds-selector-button-border-color: var(--wds-color-border-standard-secondary);
1524
1537
  --wds-segmented-toggle-value-fill-selected-disabled: var(--wds-color-text-disabled-light);
1525
1538
  --wds-segmented-toggle-value-fill-selected: var(--wds-color-text-standard-primary-light);
1526
1539
  --wds-segmented-toggle-value-fill-hover: var(--wds-color-text-standard-primary);
@@ -1610,7 +1623,9 @@
1610
1623
  --wds-input-icon-affix-fill: var(--wds-color-text-standard-primary);
1611
1624
  --wds-input-border-color-readonly: var(--wds-color-fill-standard-tertiary-readonly);
1612
1625
  --wds-input-background-fill-hover: var(--wds-color-fill-standard-secondary-hover);
1626
+ --wds-input-background-fill-disabled: var(--wds-color-fill-standard-tertiary-disabled);
1613
1627
  --wds-input-background-fill-default: var(--wds-color-fill-standard-secondary);
1628
+ --wds-input-background-fill: var(--wds-color-fill-standard-tertiary);
1614
1629
  --wds-info-icon-fill-hover: var(--wds-color-text-primary);
1615
1630
  --wds-info-icon-fill: var(--wds-color-text-primary);
1616
1631
  --wds-icon-button-color-text-standard-tertiary-hover: var(--wds-color-text-primary);
package/wixel/all.st.css CHANGED
@@ -995,7 +995,9 @@
995
995
  @property st-global(--wds-input-area-padding-right-small);
996
996
  @property st-global(--wds-input-area-padding-vertical-medium);
997
997
  @property st-global(--wds-input-area-padding-vertical-small);
998
+ @property st-global(--wds-input-background-fill);
998
999
  @property st-global(--wds-input-background-fill-default);
1000
+ @property st-global(--wds-input-background-fill-disabled);
999
1001
  @property st-global(--wds-input-background-fill-hover);
1000
1002
  @property st-global(--wds-input-border-color);
1001
1003
  @property st-global(--wds-input-border-color-hover);
@@ -1174,6 +1176,7 @@
1174
1176
  @property st-global(--wds-message-modal-title-font-family);
1175
1177
  @property st-global(--wds-message-modal-title-font-line-height);
1176
1178
  @property st-global(--wds-message-modal-title-font-size);
1179
+ @property st-global(--wds-message-modal-top-controls-paddings);
1177
1180
  @property st-global(--wds-mobile-modal-content-padding-horizontal);
1178
1181
  @property st-global(--wds-mobile-modal-content-padding-vertical);
1179
1182
  @property st-global(--wds-mobile-modal-footer-padding-horizontal);
@@ -1313,6 +1316,14 @@
1313
1316
  @property st-global(--wds-select-area-fill-hover);
1314
1317
  @property st-global(--wds-select-area-padding-horizontal);
1315
1318
  @property st-global(--wds-select-area-padding-vertical);
1319
+ @property st-global(--wds-selector-button-border-color);
1320
+ @property st-global(--wds-selector-button-border-color-disabled);
1321
+ @property st-global(--wds-selector-button-border-color-hover);
1322
+ @property st-global(--wds-selector-button-border-color-pressed);
1323
+ @property st-global(--wds-selector-button-fill);
1324
+ @property st-global(--wds-selector-button-fill-disabled);
1325
+ @property st-global(--wds-selector-button-fill-hover);
1326
+ @property st-global(--wds-selector-button-fill-pressed);
1316
1327
  @property st-global(--wds-selector-button-padding-horizontal-left-large);
1317
1328
  @property st-global(--wds-selector-button-padding-horizontal-left-medium);
1318
1329
  @property st-global(--wds-selector-button-padding-horizontal-left-small);
@@ -1325,6 +1336,10 @@
1325
1336
  @property st-global(--wds-selector-button-size-large);
1326
1337
  @property st-global(--wds-selector-button-size-medium);
1327
1338
  @property st-global(--wds-selector-button-size-small);
1339
+ @property st-global(--wds-selector-button-text-fill);
1340
+ @property st-global(--wds-selector-button-text-fill-disabled);
1341
+ @property st-global(--wds-selector-button-text-fill-hover);
1342
+ @property st-global(--wds-selector-button-text-fill-pressed);
1328
1343
  @property st-global(--wds-selector-list-item-padding-horizontal-medium);
1329
1344
  @property st-global(--wds-selector-list-item-padding-horizontal-small);
1330
1345
  @property st-global(--wds-selector-list-item-padding-vertical-medium);
@@ -2888,7 +2903,9 @@
2888
2903
  --wds-input-area-padding-right-small: 10px;
2889
2904
  --wds-input-area-padding-vertical-medium: 12px;
2890
2905
  --wds-input-area-padding-vertical-small: 8px;
2906
+ --wds-input-background-fill: #ffffff;
2891
2907
  --wds-input-background-fill-default: #eef0ff;
2908
+ --wds-input-background-fill-disabled: #ffffff;
2892
2909
  --wds-input-background-fill-hover: #dce2ff;
2893
2910
  --wds-input-border-color: #eef0ff;
2894
2911
  --wds-input-border-color-hover: #dce2ff;
@@ -3067,6 +3084,7 @@
3067
3084
  --wds-message-modal-title-font-family: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
3068
3085
  --wds-message-modal-title-font-line-height: 24px;
3069
3086
  --wds-message-modal-title-font-size: 16px;
3087
+ --wds-message-modal-top-controls-paddings: 4px;
3070
3088
  --wds-mobile-modal-content-padding-horizontal: 24px;
3071
3089
  --wds-mobile-modal-content-padding-vertical: 24px;
3072
3090
  --wds-mobile-modal-footer-padding-horizontal: 24px;
@@ -3206,6 +3224,14 @@
3206
3224
  --wds-select-area-fill-hover: #edeef2;
3207
3225
  --wds-select-area-padding-horizontal: 16px;
3208
3226
  --wds-select-area-padding-vertical: 12px;
3227
+ --wds-selector-button-border-color: #dce2ff;
3228
+ --wds-selector-button-border-color-disabled: rgba(38, 37, 36, 0.1000);
3229
+ --wds-selector-button-border-color-hover: #eef0ff;
3230
+ --wds-selector-button-border-color-pressed: #4a57ff;
3231
+ --wds-selector-button-fill: #ffffff;
3232
+ --wds-selector-button-fill-disabled: #ffffff;
3233
+ --wds-selector-button-fill-hover: #f4f6ff;
3234
+ --wds-selector-button-fill-pressed: #eef0ff;
3209
3235
  --wds-selector-button-padding-horizontal-left-large: 12px;
3210
3236
  --wds-selector-button-padding-horizontal-left-medium: 12px;
3211
3237
  --wds-selector-button-padding-horizontal-left-small: 12px;
@@ -3218,6 +3244,10 @@
3218
3244
  --wds-selector-button-size-large: 36px;
3219
3245
  --wds-selector-button-size-medium: 32px;
3220
3246
  --wds-selector-button-size-small: 28px;
3247
+ --wds-selector-button-text-fill: #000624;
3248
+ --wds-selector-button-text-fill-disabled: rgba(38, 37, 36, 0.3000);
3249
+ --wds-selector-button-text-fill-hover: #000624;
3250
+ --wds-selector-button-text-fill-pressed: #4a57ff;
3221
3251
  --wds-selector-list-item-padding-horizontal-medium: 24px;
3222
3252
  --wds-selector-list-item-padding-horizontal-small: 16px;
3223
3253
  --wds-selector-list-item-padding-vertical-medium: 8px;
package/wixel/component.st.css CHANGED
@@ -453,7 +453,9 @@
453
453
  @property st-global(--wds-input-area-padding-right-small);
454
454
  @property st-global(--wds-input-area-padding-vertical-medium);
455
455
  @property st-global(--wds-input-area-padding-vertical-small);
456
+ @property st-global(--wds-input-background-fill);
456
457
  @property st-global(--wds-input-background-fill-default);
458
+ @property st-global(--wds-input-background-fill-disabled);
457
459
  @property st-global(--wds-input-background-fill-hover);
458
460
  @property st-global(--wds-input-border-color);
459
461
  @property st-global(--wds-input-border-color-hover);
@@ -632,6 +634,7 @@
632
634
  @property st-global(--wds-message-modal-title-font-family);
633
635
  @property st-global(--wds-message-modal-title-font-line-height);
634
636
  @property st-global(--wds-message-modal-title-font-size);
637
+ @property st-global(--wds-message-modal-top-controls-paddings);
635
638
  @property st-global(--wds-mobile-modal-content-padding-horizontal);
636
639
  @property st-global(--wds-mobile-modal-content-padding-vertical);
637
640
  @property st-global(--wds-mobile-modal-footer-padding-horizontal);
@@ -771,6 +774,14 @@
771
774
  @property st-global(--wds-select-area-fill-hover);
772
775
  @property st-global(--wds-select-area-padding-horizontal);
773
776
  @property st-global(--wds-select-area-padding-vertical);
777
+ @property st-global(--wds-selector-button-border-color);
778
+ @property st-global(--wds-selector-button-border-color-disabled);
779
+ @property st-global(--wds-selector-button-border-color-hover);
780
+ @property st-global(--wds-selector-button-border-color-pressed);
781
+ @property st-global(--wds-selector-button-fill);
782
+ @property st-global(--wds-selector-button-fill-disabled);
783
+ @property st-global(--wds-selector-button-fill-hover);
784
+ @property st-global(--wds-selector-button-fill-pressed);
774
785
  @property st-global(--wds-selector-button-padding-horizontal-left-large);
775
786
  @property st-global(--wds-selector-button-padding-horizontal-left-medium);
776
787
  @property st-global(--wds-selector-button-padding-horizontal-left-small);
@@ -783,6 +794,10 @@
783
794
  @property st-global(--wds-selector-button-size-large);
784
795
  @property st-global(--wds-selector-button-size-medium);
785
796
  @property st-global(--wds-selector-button-size-small);
797
+ @property st-global(--wds-selector-button-text-fill);
798
+ @property st-global(--wds-selector-button-text-fill-disabled);
799
+ @property st-global(--wds-selector-button-text-fill-hover);
800
+ @property st-global(--wds-selector-button-text-fill-pressed);
786
801
  @property st-global(--wds-selector-list-item-padding-horizontal-medium);
787
802
  @property st-global(--wds-selector-list-item-padding-horizontal-small);
788
803
  @property st-global(--wds-selector-list-item-padding-vertical-medium);
@@ -1665,7 +1680,9 @@
1665
1680
  --wds-input-area-padding-right-small: 10px;
1666
1681
  --wds-input-area-padding-vertical-medium: 12px;
1667
1682
  --wds-input-area-padding-vertical-small: 8px;
1683
+ --wds-input-background-fill: #ffffff;
1668
1684
  --wds-input-background-fill-default: #eef0ff;
1685
+ --wds-input-background-fill-disabled: #ffffff;
1669
1686
  --wds-input-background-fill-hover: #dce2ff;
1670
1687
  --wds-input-border-color: #eef0ff;
1671
1688
  --wds-input-border-color-hover: #dce2ff;
@@ -1844,6 +1861,7 @@
1844
1861
  --wds-message-modal-title-font-family: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
1845
1862
  --wds-message-modal-title-font-line-height: 24px;
1846
1863
  --wds-message-modal-title-font-size: 16px;
1864
+ --wds-message-modal-top-controls-paddings: 4px;
1847
1865
  --wds-mobile-modal-content-padding-horizontal: 24px;
1848
1866
  --wds-mobile-modal-content-padding-vertical: 24px;
1849
1867
  --wds-mobile-modal-footer-padding-horizontal: 24px;
@@ -1983,6 +2001,14 @@
1983
2001
  --wds-select-area-fill-hover: #edeef2;
1984
2002
  --wds-select-area-padding-horizontal: 16px;
1985
2003
  --wds-select-area-padding-vertical: 12px;
2004
+ --wds-selector-button-border-color: #dce2ff;
2005
+ --wds-selector-button-border-color-disabled: rgba(38, 37, 36, 0.1000);
2006
+ --wds-selector-button-border-color-hover: #eef0ff;
2007
+ --wds-selector-button-border-color-pressed: #4a57ff;
2008
+ --wds-selector-button-fill: #ffffff;
2009
+ --wds-selector-button-fill-disabled: #ffffff;
2010
+ --wds-selector-button-fill-hover: #f4f6ff;
2011
+ --wds-selector-button-fill-pressed: #eef0ff;
1986
2012
  --wds-selector-button-padding-horizontal-left-large: 12px;
1987
2013
  --wds-selector-button-padding-horizontal-left-medium: 12px;
1988
2014
  --wds-selector-button-padding-horizontal-left-small: 12px;
@@ -1995,6 +2021,10 @@
1995
2021
  --wds-selector-button-size-large: 36px;
1996
2022
  --wds-selector-button-size-medium: 32px;
1997
2023
  --wds-selector-button-size-small: 28px;
2024
+ --wds-selector-button-text-fill: #000624;
2025
+ --wds-selector-button-text-fill-disabled: rgba(38, 37, 36, 0.3000);
2026
+ --wds-selector-button-text-fill-hover: #000624;
2027
+ --wds-selector-button-text-fill-pressed: #4a57ff;
1998
2028
  --wds-selector-list-item-padding-horizontal-medium: 24px;
1999
2029
  --wds-selector-list-item-padding-horizontal-small: 16px;
2000
2030
  --wds-selector-list-item-padding-vertical-medium: 8px;