@wix/design-system-tokens 1.89.1 → 1.90.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 (14) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/all.css +10 -9
  3. package/all.st.css +18 -16
  4. package/component.st.css +14 -14
  5. package/foundation.st.css +4 -2
  6. package/package.json +2 -2
  7. package/studio/all.css +14 -13
  8. package/studio/all.st.css +22 -20
  9. package/studio/component.st.css +18 -18
  10. package/studio/foundation.st.css +4 -2
  11. package/wixel/all.css +14 -13
  12. package/wixel/all.st.css +22 -20
  13. package/wixel/component.st.css +18 -18
  14. package/wixel/foundation.st.css +4 -2
package/CHANGELOG.md CHANGED
@@ -1,3 +1,9 @@
1
+ ## 1.90.0 - 2025-04-02
2
+
3
+ ### Visual Breaking Changes
4
+
5
+ - breaking(SegmentedToggle): tokenization for Wixel gaps [14663](https://github.com/wix-private/wix-design-systems/pull/14663)
6
+
1
7
  ## 1.88.0 - 2025-03-28
2
8
 
3
9
  ### Visual Breaking Changes
package/all.css CHANGED
@@ -525,15 +525,13 @@
525
525
  --wds-section-helper-text-font-size: 14px;
526
526
  --wds-section-helper-vertical-margin: 6px;
527
527
  --wds-section-helper-vertical-padding-medium: 18px;
528
+ --wds-segmented-toggle-border-hover: #a8caff;
528
529
  --wds-segmented-toggle-border-radius-medium: 6px;
529
530
  --wds-segmented-toggle-border-radius-small: 6px;
530
- --wds-segmented-toggle-default-fill-default: #000624;
531
- --wds-segmented-toggle-default-fill-hover: #000624;
532
- --wds-segmented-toggle-default-fill-selected: #000624;
533
- --wds-segmented-toggle-default-fill-selected-disabled: rgba(0, 6, 36, .3);
534
- --wds-segmented-toggle-fill-default: rgba(255, 255, 255, 0);
531
+ --wds-segmented-toggle-border-width-default: 1px;
532
+ --wds-segmented-toggle-fill-default: #ffffff;
535
533
  --wds-segmented-toggle-fill-hover: #e7f0ff;
536
- --wds-segmented-toggle-fill-selected: rgba(255, 255, 255, 0);
534
+ --wds-segmented-toggle-fill-selected: #ffffff;
537
535
  --wds-segmented-toggle-fill-selected-disabled: rgba(255, 255, 255, 0);
538
536
  --wds-segmented-toggle-icononly-padding-horizontal-medium: 6px;
539
537
  --wds-segmented-toggle-icononly-padding-horizontal-small: 6px;
@@ -549,8 +547,10 @@
549
547
  --wds-segmented-toggle-padding-vertical-small: 6px;
550
548
  --wds-segmented-toggle-size-medium: 36px;
551
549
  --wds-segmented-toggle-size-small: 30px;
552
- --wds-segmented-toggle-width-default: 1px;
553
- --wds-segmented-toggle-width-selected: 2px;
550
+ --wds-segmented-toggle-value-fill-default: #000624;
551
+ --wds-segmented-toggle-value-fill-hover: #000624;
552
+ --wds-segmented-toggle-value-fill-selected: #000624;
553
+ --wds-segmented-toggle-value-fill-selected-disabled: rgba(0, 6, 36, .3);
554
554
  --wds-select-area-border-radius: 8px;
555
555
  --wds-select-area-fill: #f4f7ff;
556
556
  --wds-select-area-fill-active: #d6e6fe;
@@ -1362,7 +1362,7 @@
1362
1362
  --wds-color-text-warning: #ffb700;
1363
1363
  --wds-color-text-highlight: #d6e6fe;
1364
1364
  --wds-font-family-default: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
1365
- --wds-font-family-heading: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
1365
+ --wds-font-family-display: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
1366
1366
  --wds-font-letter-spacing-0: 0;
1367
1367
  --wds-font-letter-spacing-100: 1px;
1368
1368
  --wds-font-letter-spacing-heading-1: 0;
@@ -1468,6 +1468,7 @@
1468
1468
  --wds-space-50: 3px;
1469
1469
  --wds-space-100: 6px;
1470
1470
  --wds-space-150: 9px;
1471
+ --wds-space-175: 10px;
1471
1472
  --wds-space-200: 12px;
1472
1473
  --wds-space-250: 15px;
1473
1474
  --wds-space-300: 18px;
package/all.st.css CHANGED
@@ -726,7 +726,7 @@
726
726
  @property st-global(--wds-floating-helper-padding-horizontal);
727
727
  @property st-global(--wds-floating-helper-padding-vertical);
728
728
  @property st-global(--wds-font-family-default);
729
- @property st-global(--wds-font-family-heading);
729
+ @property st-global(--wds-font-family-display);
730
730
  @property st-global(--wds-font-letter-spacing-0);
731
731
  @property st-global(--wds-font-letter-spacing-100);
732
732
  @property st-global(--wds-font-letter-spacing-heading-1);
@@ -1059,12 +1059,10 @@
1059
1059
  @property st-global(--wds-section-helper-text-font-size);
1060
1060
  @property st-global(--wds-section-helper-vertical-margin);
1061
1061
  @property st-global(--wds-section-helper-vertical-padding-medium);
1062
+ @property st-global(--wds-segmented-toggle-border-hover);
1062
1063
  @property st-global(--wds-segmented-toggle-border-radius-medium);
1063
1064
  @property st-global(--wds-segmented-toggle-border-radius-small);
1064
- @property st-global(--wds-segmented-toggle-default-fill-default);
1065
- @property st-global(--wds-segmented-toggle-default-fill-hover);
1066
- @property st-global(--wds-segmented-toggle-default-fill-selected);
1067
- @property st-global(--wds-segmented-toggle-default-fill-selected-disabled);
1065
+ @property st-global(--wds-segmented-toggle-border-width-default);
1068
1066
  @property st-global(--wds-segmented-toggle-fill-default);
1069
1067
  @property st-global(--wds-segmented-toggle-fill-hover);
1070
1068
  @property st-global(--wds-segmented-toggle-fill-selected);
@@ -1083,8 +1081,10 @@
1083
1081
  @property st-global(--wds-segmented-toggle-padding-vertical-small);
1084
1082
  @property st-global(--wds-segmented-toggle-size-medium);
1085
1083
  @property st-global(--wds-segmented-toggle-size-small);
1086
- @property st-global(--wds-segmented-toggle-width-default);
1087
- @property st-global(--wds-segmented-toggle-width-selected);
1084
+ @property st-global(--wds-segmented-toggle-value-fill-default);
1085
+ @property st-global(--wds-segmented-toggle-value-fill-hover);
1086
+ @property st-global(--wds-segmented-toggle-value-fill-selected);
1087
+ @property st-global(--wds-segmented-toggle-value-fill-selected-disabled);
1088
1088
  @property st-global(--wds-select-area-border-radius);
1089
1089
  @property st-global(--wds-select-area-fill);
1090
1090
  @property st-global(--wds-select-area-fill-active);
@@ -1267,6 +1267,7 @@
1267
1267
  @property st-global(--wds-space-50);
1268
1268
  @property st-global(--wds-space-100);
1269
1269
  @property st-global(--wds-space-150);
1270
+ @property st-global(--wds-space-175);
1270
1271
  @property st-global(--wds-space-200);
1271
1272
  @property st-global(--wds-space-250);
1272
1273
  @property st-global(--wds-space-300);
@@ -2241,7 +2242,7 @@
2241
2242
  --wds-floating-helper-padding-horizontal: 36px;
2242
2243
  --wds-floating-helper-padding-vertical: 30px;
2243
2244
  --wds-font-family-default: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
2244
- --wds-font-family-heading: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
2245
+ --wds-font-family-display: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
2245
2246
  --wds-font-letter-spacing-0: 0;
2246
2247
  --wds-font-letter-spacing-100: 1px;
2247
2248
  --wds-font-letter-spacing-heading-1: 0;
@@ -2574,15 +2575,13 @@
2574
2575
  --wds-section-helper-text-font-size: 14px;
2575
2576
  --wds-section-helper-vertical-margin: 6px;
2576
2577
  --wds-section-helper-vertical-padding-medium: 18px;
2578
+ --wds-segmented-toggle-border-hover: #a8caff;
2577
2579
  --wds-segmented-toggle-border-radius-medium: 6px;
2578
2580
  --wds-segmented-toggle-border-radius-small: 6px;
2579
- --wds-segmented-toggle-default-fill-default: #000624;
2580
- --wds-segmented-toggle-default-fill-hover: #000624;
2581
- --wds-segmented-toggle-default-fill-selected: #000624;
2582
- --wds-segmented-toggle-default-fill-selected-disabled: rgba(0, 6, 36, .3);
2583
- --wds-segmented-toggle-fill-default: rgba(255, 255, 255, 0);
2581
+ --wds-segmented-toggle-border-width-default: 1px;
2582
+ --wds-segmented-toggle-fill-default: #ffffff;
2584
2583
  --wds-segmented-toggle-fill-hover: #e7f0ff;
2585
- --wds-segmented-toggle-fill-selected: rgba(255, 255, 255, 0);
2584
+ --wds-segmented-toggle-fill-selected: #ffffff;
2586
2585
  --wds-segmented-toggle-fill-selected-disabled: rgba(255, 255, 255, 0);
2587
2586
  --wds-segmented-toggle-icononly-padding-horizontal-medium: 6px;
2588
2587
  --wds-segmented-toggle-icononly-padding-horizontal-small: 6px;
@@ -2598,8 +2597,10 @@
2598
2597
  --wds-segmented-toggle-padding-vertical-small: 6px;
2599
2598
  --wds-segmented-toggle-size-medium: 36px;
2600
2599
  --wds-segmented-toggle-size-small: 30px;
2601
- --wds-segmented-toggle-width-default: 1px;
2602
- --wds-segmented-toggle-width-selected: 2px;
2600
+ --wds-segmented-toggle-value-fill-default: #000624;
2601
+ --wds-segmented-toggle-value-fill-hover: #000624;
2602
+ --wds-segmented-toggle-value-fill-selected: #000624;
2603
+ --wds-segmented-toggle-value-fill-selected-disabled: rgba(0, 6, 36, .3);
2603
2604
  --wds-select-area-border-radius: 8px;
2604
2605
  --wds-select-area-fill: #f4f7ff;
2605
2606
  --wds-select-area-fill-active: #d6e6fe;
@@ -2782,6 +2783,7 @@
2782
2783
  --wds-space-50: 3px;
2783
2784
  --wds-space-100: 6px;
2784
2785
  --wds-space-150: 9px;
2786
+ --wds-space-175: 10px;
2785
2787
  --wds-space-200: 12px;
2786
2788
  --wds-space-250: 15px;
2787
2789
  --wds-space-300: 18px;
package/component.st.css CHANGED
@@ -524,12 +524,10 @@
524
524
  @property st-global(--wds-section-helper-text-font-size);
525
525
  @property st-global(--wds-section-helper-vertical-margin);
526
526
  @property st-global(--wds-section-helper-vertical-padding-medium);
527
+ @property st-global(--wds-segmented-toggle-border-hover);
527
528
  @property st-global(--wds-segmented-toggle-border-radius-medium);
528
529
  @property st-global(--wds-segmented-toggle-border-radius-small);
529
- @property st-global(--wds-segmented-toggle-default-fill-default);
530
- @property st-global(--wds-segmented-toggle-default-fill-hover);
531
- @property st-global(--wds-segmented-toggle-default-fill-selected);
532
- @property st-global(--wds-segmented-toggle-default-fill-selected-disabled);
530
+ @property st-global(--wds-segmented-toggle-border-width-default);
533
531
  @property st-global(--wds-segmented-toggle-fill-default);
534
532
  @property st-global(--wds-segmented-toggle-fill-hover);
535
533
  @property st-global(--wds-segmented-toggle-fill-selected);
@@ -548,8 +546,10 @@
548
546
  @property st-global(--wds-segmented-toggle-padding-vertical-small);
549
547
  @property st-global(--wds-segmented-toggle-size-medium);
550
548
  @property st-global(--wds-segmented-toggle-size-small);
551
- @property st-global(--wds-segmented-toggle-width-default);
552
- @property st-global(--wds-segmented-toggle-width-selected);
549
+ @property st-global(--wds-segmented-toggle-value-fill-default);
550
+ @property st-global(--wds-segmented-toggle-value-fill-hover);
551
+ @property st-global(--wds-segmented-toggle-value-fill-selected);
552
+ @property st-global(--wds-segmented-toggle-value-fill-selected-disabled);
553
553
  @property st-global(--wds-select-area-border-radius);
554
554
  @property st-global(--wds-select-area-fill);
555
555
  @property st-global(--wds-select-area-fill-active);
@@ -1415,15 +1415,13 @@
1415
1415
  --wds-section-helper-text-font-size: 14px;
1416
1416
  --wds-section-helper-vertical-margin: 6px;
1417
1417
  --wds-section-helper-vertical-padding-medium: 18px;
1418
+ --wds-segmented-toggle-border-hover: #a8caff;
1418
1419
  --wds-segmented-toggle-border-radius-medium: 6px;
1419
1420
  --wds-segmented-toggle-border-radius-small: 6px;
1420
- --wds-segmented-toggle-default-fill-default: #000624;
1421
- --wds-segmented-toggle-default-fill-hover: #000624;
1422
- --wds-segmented-toggle-default-fill-selected: #000624;
1423
- --wds-segmented-toggle-default-fill-selected-disabled: rgba(0, 6, 36, .3);
1424
- --wds-segmented-toggle-fill-default: rgba(255, 255, 255, 0);
1421
+ --wds-segmented-toggle-border-width-default: 1px;
1422
+ --wds-segmented-toggle-fill-default: #ffffff;
1425
1423
  --wds-segmented-toggle-fill-hover: #e7f0ff;
1426
- --wds-segmented-toggle-fill-selected: rgba(255, 255, 255, 0);
1424
+ --wds-segmented-toggle-fill-selected: #ffffff;
1427
1425
  --wds-segmented-toggle-fill-selected-disabled: rgba(255, 255, 255, 0);
1428
1426
  --wds-segmented-toggle-icononly-padding-horizontal-medium: 6px;
1429
1427
  --wds-segmented-toggle-icononly-padding-horizontal-small: 6px;
@@ -1439,8 +1437,10 @@
1439
1437
  --wds-segmented-toggle-padding-vertical-small: 6px;
1440
1438
  --wds-segmented-toggle-size-medium: 36px;
1441
1439
  --wds-segmented-toggle-size-small: 30px;
1442
- --wds-segmented-toggle-width-default: 1px;
1443
- --wds-segmented-toggle-width-selected: 2px;
1440
+ --wds-segmented-toggle-value-fill-default: #000624;
1441
+ --wds-segmented-toggle-value-fill-hover: #000624;
1442
+ --wds-segmented-toggle-value-fill-selected: #000624;
1443
+ --wds-segmented-toggle-value-fill-selected-disabled: rgba(0, 6, 36, .3);
1444
1444
  --wds-select-area-border-radius: 8px;
1445
1445
  --wds-select-area-fill: #f4f7ff;
1446
1446
  --wds-select-area-fill-active: #d6e6fe;
package/foundation.st.css CHANGED
@@ -119,7 +119,7 @@
119
119
  @property st-global(--wds-color-yellow-500);
120
120
  @property st-global(--wds-color-yellow-600);
121
121
  @property st-global(--wds-font-family-default);
122
- @property st-global(--wds-font-family-heading);
122
+ @property st-global(--wds-font-family-display);
123
123
  @property st-global(--wds-font-letter-spacing-0);
124
124
  @property st-global(--wds-font-letter-spacing-100);
125
125
  @property st-global(--wds-font-line-height-100);
@@ -174,6 +174,7 @@
174
174
  @property st-global(--wds-space-50);
175
175
  @property st-global(--wds-space-100);
176
176
  @property st-global(--wds-space-150);
177
+ @property st-global(--wds-space-175);
177
178
  @property st-global(--wds-space-200);
178
179
  @property st-global(--wds-space-250);
179
180
  @property st-global(--wds-space-300);
@@ -320,7 +321,7 @@
320
321
  --wds-color-yellow-500: #fff0d1;
321
322
  --wds-color-yellow-600: #fff6e5;
322
323
  --wds-font-family-default: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
323
- --wds-font-family-heading: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
324
+ --wds-font-family-display: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
324
325
  --wds-font-letter-spacing-0: 0;
325
326
  --wds-font-letter-spacing-100: 1px;
326
327
  --wds-font-line-height-100: 12px;
@@ -375,6 +376,7 @@
375
376
  --wds-space-50: 3px;
376
377
  --wds-space-100: 6px;
377
378
  --wds-space-150: 9px;
379
+ --wds-space-175: 10px;
378
380
  --wds-space-200: 12px;
379
381
  --wds-space-250: 15px;
380
382
  --wds-space-300: 18px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wix/design-system-tokens",
3
- "version": "1.89.1",
3
+ "version": "1.90.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": "89b94518d3acb853cee2477f1c2dec40b5cccbf4bcf405a359320006"
36
+ "falconPackageHash": "e541ed00ea1448099d1de134624fa3c73c2f79c7542adb4157a84de4"
37
37
  }
package/studio/all.css CHANGED
@@ -517,32 +517,32 @@
517
517
  --wds-section-helper-prefix-offset-medium: 16px;
518
518
  --wds-section-helper-text-font-line-height: 16px;
519
519
  --wds-section-helper-text-font-size: 12px;
520
+ --wds-segmented-toggle-border-hover: #868aa5;
520
521
  --wds-segmented-toggle-border-radius-medium: 4px;
521
522
  --wds-segmented-toggle-border-radius-small: 4px;
522
- --wds-segmented-toggle-default-fill-default: #131720;
523
- --wds-segmented-toggle-default-fill-hover: #131720;
524
- --wds-segmented-toggle-default-fill-selected: #131720;
525
- --wds-segmented-toggle-default-fill-selected-disabled: #bebebe;
526
- --wds-segmented-toggle-fill-default: rgba(255, 255, 255, 0);
523
+ --wds-segmented-toggle-border-width-default: 1px;
524
+ --wds-segmented-toggle-fill-default: #ffffff;
527
525
  --wds-segmented-toggle-fill-hover: #f7f8f8;
528
- --wds-segmented-toggle-fill-selected: rgba(255, 255, 255, 0);
526
+ --wds-segmented-toggle-fill-selected: #ffffff;
529
527
  --wds-segmented-toggle-fill-selected-disabled: rgba(255, 255, 255, 0);
530
528
  --wds-segmented-toggle-icononly-padding-horizontal-medium: 4px;
531
529
  --wds-segmented-toggle-icononly-padding-horizontal-small: 4px;
532
530
  --wds-segmented-toggle-icononly-padding-vertical-medium: 4px;
533
531
  --wds-segmented-toggle-icononly-padding-vertical-small: 4px;
534
- --wds-segmented-toggle-label-font-line-height-medium: 20px;
535
- --wds-segmented-toggle-label-font-line-height-small: 16px;
536
- --wds-segmented-toggle-label-font-size-medium: 14px;
537
- --wds-segmented-toggle-label-font-size-small: 12px;
532
+ --wds-segmented-toggle-label-font-line-height-medium: 24px;
533
+ --wds-segmented-toggle-label-font-line-height-small: 20px;
534
+ --wds-segmented-toggle-label-font-size-medium: 16px;
535
+ --wds-segmented-toggle-label-font-size-small: 14px;
538
536
  --wds-segmented-toggle-padding-horizontal-medium: 16px;
539
537
  --wds-segmented-toggle-padding-horizontal-small: 12px;
540
538
  --wds-segmented-toggle-padding-vertical-medium: 4px;
541
539
  --wds-segmented-toggle-padding-vertical-small: 4px;
542
540
  --wds-segmented-toggle-size-medium: 32px;
543
541
  --wds-segmented-toggle-size-small: 28px;
544
- --wds-segmented-toggle-width-default: 0;
545
- --wds-segmented-toggle-width-selected: 0;
542
+ --wds-segmented-toggle-value-fill-default: #131720;
543
+ --wds-segmented-toggle-value-fill-hover: #131720;
544
+ --wds-segmented-toggle-value-fill-selected: #131720;
545
+ --wds-segmented-toggle-value-fill-selected-disabled: #bebebe;
546
546
  --wds-select-area-border-radius: 4px;
547
547
  --wds-select-area-fill: #f7f8f8;
548
548
  --wds-select-area-fill-active: #dce9ff;
@@ -1356,7 +1356,7 @@
1356
1356
  --wds-color-text-warning: #f9ad4d;
1357
1357
  --wds-color-text-highlight: #dce9ff;
1358
1358
  --wds-font-family-default: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
1359
- --wds-font-family-heading: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
1359
+ --wds-font-family-display: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
1360
1360
  --wds-font-letter-spacing-0: 0;
1361
1361
  --wds-font-letter-spacing-100: 1px;
1362
1362
  --wds-font-letter-spacing-heading-1: 0;
@@ -1462,6 +1462,7 @@
1462
1462
  --wds-space-50: 2px;
1463
1463
  --wds-space-100: 4px;
1464
1464
  --wds-space-150: 6px;
1465
+ --wds-space-175: 7px;
1465
1466
  --wds-space-200: 8px;
1466
1467
  --wds-space-250: 10px;
1467
1468
  --wds-space-300: 12px;
package/studio/all.st.css CHANGED
@@ -722,7 +722,7 @@
722
722
  @property st-global(--wds-floating-helper-padding-horizontal);
723
723
  @property st-global(--wds-floating-helper-padding-vertical);
724
724
  @property st-global(--wds-font-family-default);
725
- @property st-global(--wds-font-family-heading);
725
+ @property st-global(--wds-font-family-display);
726
726
  @property st-global(--wds-font-letter-spacing-0);
727
727
  @property st-global(--wds-font-letter-spacing-100);
728
728
  @property st-global(--wds-font-letter-spacing-heading-1);
@@ -1047,12 +1047,10 @@
1047
1047
  @property st-global(--wds-section-helper-prefix-offset-medium);
1048
1048
  @property st-global(--wds-section-helper-text-font-line-height);
1049
1049
  @property st-global(--wds-section-helper-text-font-size);
1050
+ @property st-global(--wds-segmented-toggle-border-hover);
1050
1051
  @property st-global(--wds-segmented-toggle-border-radius-medium);
1051
1052
  @property st-global(--wds-segmented-toggle-border-radius-small);
1052
- @property st-global(--wds-segmented-toggle-default-fill-default);
1053
- @property st-global(--wds-segmented-toggle-default-fill-hover);
1054
- @property st-global(--wds-segmented-toggle-default-fill-selected);
1055
- @property st-global(--wds-segmented-toggle-default-fill-selected-disabled);
1053
+ @property st-global(--wds-segmented-toggle-border-width-default);
1056
1054
  @property st-global(--wds-segmented-toggle-fill-default);
1057
1055
  @property st-global(--wds-segmented-toggle-fill-hover);
1058
1056
  @property st-global(--wds-segmented-toggle-fill-selected);
@@ -1071,8 +1069,10 @@
1071
1069
  @property st-global(--wds-segmented-toggle-padding-vertical-small);
1072
1070
  @property st-global(--wds-segmented-toggle-size-medium);
1073
1071
  @property st-global(--wds-segmented-toggle-size-small);
1074
- @property st-global(--wds-segmented-toggle-width-default);
1075
- @property st-global(--wds-segmented-toggle-width-selected);
1072
+ @property st-global(--wds-segmented-toggle-value-fill-default);
1073
+ @property st-global(--wds-segmented-toggle-value-fill-hover);
1074
+ @property st-global(--wds-segmented-toggle-value-fill-selected);
1075
+ @property st-global(--wds-segmented-toggle-value-fill-selected-disabled);
1076
1076
  @property st-global(--wds-select-area-border-radius);
1077
1077
  @property st-global(--wds-select-area-fill);
1078
1078
  @property st-global(--wds-select-area-fill-active);
@@ -1255,6 +1255,7 @@
1255
1255
  @property st-global(--wds-space-50);
1256
1256
  @property st-global(--wds-space-100);
1257
1257
  @property st-global(--wds-space-150);
1258
+ @property st-global(--wds-space-175);
1258
1259
  @property st-global(--wds-space-200);
1259
1260
  @property st-global(--wds-space-250);
1260
1261
  @property st-global(--wds-space-300);
@@ -2231,7 +2232,7 @@
2231
2232
  --wds-floating-helper-padding-horizontal: 32px;
2232
2233
  --wds-floating-helper-padding-vertical: 28px;
2233
2234
  --wds-font-family-default: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
2234
- --wds-font-family-heading: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
2235
+ --wds-font-family-display: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
2235
2236
  --wds-font-letter-spacing-0: 0;
2236
2237
  --wds-font-letter-spacing-100: 1px;
2237
2238
  --wds-font-letter-spacing-heading-1: 0;
@@ -2556,32 +2557,32 @@
2556
2557
  --wds-section-helper-prefix-offset-medium: 16px;
2557
2558
  --wds-section-helper-text-font-line-height: 16px;
2558
2559
  --wds-section-helper-text-font-size: 12px;
2560
+ --wds-segmented-toggle-border-hover: #868aa5;
2559
2561
  --wds-segmented-toggle-border-radius-medium: 4px;
2560
2562
  --wds-segmented-toggle-border-radius-small: 4px;
2561
- --wds-segmented-toggle-default-fill-default: #131720;
2562
- --wds-segmented-toggle-default-fill-hover: #131720;
2563
- --wds-segmented-toggle-default-fill-selected: #131720;
2564
- --wds-segmented-toggle-default-fill-selected-disabled: #bebebe;
2565
- --wds-segmented-toggle-fill-default: rgba(255, 255, 255, 0);
2563
+ --wds-segmented-toggle-border-width-default: 1px;
2564
+ --wds-segmented-toggle-fill-default: #ffffff;
2566
2565
  --wds-segmented-toggle-fill-hover: #f7f8f8;
2567
- --wds-segmented-toggle-fill-selected: rgba(255, 255, 255, 0);
2566
+ --wds-segmented-toggle-fill-selected: #ffffff;
2568
2567
  --wds-segmented-toggle-fill-selected-disabled: rgba(255, 255, 255, 0);
2569
2568
  --wds-segmented-toggle-icononly-padding-horizontal-medium: 4px;
2570
2569
  --wds-segmented-toggle-icononly-padding-horizontal-small: 4px;
2571
2570
  --wds-segmented-toggle-icononly-padding-vertical-medium: 4px;
2572
2571
  --wds-segmented-toggle-icononly-padding-vertical-small: 4px;
2573
- --wds-segmented-toggle-label-font-line-height-medium: 20px;
2574
- --wds-segmented-toggle-label-font-line-height-small: 16px;
2575
- --wds-segmented-toggle-label-font-size-medium: 14px;
2576
- --wds-segmented-toggle-label-font-size-small: 12px;
2572
+ --wds-segmented-toggle-label-font-line-height-medium: 24px;
2573
+ --wds-segmented-toggle-label-font-line-height-small: 20px;
2574
+ --wds-segmented-toggle-label-font-size-medium: 16px;
2575
+ --wds-segmented-toggle-label-font-size-small: 14px;
2577
2576
  --wds-segmented-toggle-padding-horizontal-medium: 16px;
2578
2577
  --wds-segmented-toggle-padding-horizontal-small: 12px;
2579
2578
  --wds-segmented-toggle-padding-vertical-medium: 4px;
2580
2579
  --wds-segmented-toggle-padding-vertical-small: 4px;
2581
2580
  --wds-segmented-toggle-size-medium: 32px;
2582
2581
  --wds-segmented-toggle-size-small: 28px;
2583
- --wds-segmented-toggle-width-default: 0;
2584
- --wds-segmented-toggle-width-selected: 0;
2582
+ --wds-segmented-toggle-value-fill-default: #131720;
2583
+ --wds-segmented-toggle-value-fill-hover: #131720;
2584
+ --wds-segmented-toggle-value-fill-selected: #131720;
2585
+ --wds-segmented-toggle-value-fill-selected-disabled: #bebebe;
2585
2586
  --wds-select-area-border-radius: 4px;
2586
2587
  --wds-select-area-fill: #f7f8f8;
2587
2588
  --wds-select-area-fill-active: #dce9ff;
@@ -2764,6 +2765,7 @@
2764
2765
  --wds-space-50: 2px;
2765
2766
  --wds-space-100: 4px;
2766
2767
  --wds-space-150: 6px;
2768
+ --wds-space-175: 7px;
2767
2769
  --wds-space-200: 8px;
2768
2770
  --wds-space-250: 10px;
2769
2771
  --wds-space-300: 12px;
package/studio/component.st.css CHANGED
@@ -516,12 +516,10 @@
516
516
  @property st-global(--wds-section-helper-prefix-offset-medium);
517
517
  @property st-global(--wds-section-helper-text-font-line-height);
518
518
  @property st-global(--wds-section-helper-text-font-size);
519
+ @property st-global(--wds-segmented-toggle-border-hover);
519
520
  @property st-global(--wds-segmented-toggle-border-radius-medium);
520
521
  @property st-global(--wds-segmented-toggle-border-radius-small);
521
- @property st-global(--wds-segmented-toggle-default-fill-default);
522
- @property st-global(--wds-segmented-toggle-default-fill-hover);
523
- @property st-global(--wds-segmented-toggle-default-fill-selected);
524
- @property st-global(--wds-segmented-toggle-default-fill-selected-disabled);
522
+ @property st-global(--wds-segmented-toggle-border-width-default);
525
523
  @property st-global(--wds-segmented-toggle-fill-default);
526
524
  @property st-global(--wds-segmented-toggle-fill-hover);
527
525
  @property st-global(--wds-segmented-toggle-fill-selected);
@@ -540,8 +538,10 @@
540
538
  @property st-global(--wds-segmented-toggle-padding-vertical-small);
541
539
  @property st-global(--wds-segmented-toggle-size-medium);
542
540
  @property st-global(--wds-segmented-toggle-size-small);
543
- @property st-global(--wds-segmented-toggle-width-default);
544
- @property st-global(--wds-segmented-toggle-width-selected);
541
+ @property st-global(--wds-segmented-toggle-value-fill-default);
542
+ @property st-global(--wds-segmented-toggle-value-fill-hover);
543
+ @property st-global(--wds-segmented-toggle-value-fill-selected);
544
+ @property st-global(--wds-segmented-toggle-value-fill-selected-disabled);
545
545
  @property st-global(--wds-select-area-border-radius);
546
546
  @property st-global(--wds-select-area-fill);
547
547
  @property st-global(--wds-select-area-fill-active);
@@ -1405,32 +1405,32 @@
1405
1405
  --wds-section-helper-prefix-offset-medium: 16px;
1406
1406
  --wds-section-helper-text-font-line-height: 16px;
1407
1407
  --wds-section-helper-text-font-size: 12px;
1408
+ --wds-segmented-toggle-border-hover: #868aa5;
1408
1409
  --wds-segmented-toggle-border-radius-medium: 4px;
1409
1410
  --wds-segmented-toggle-border-radius-small: 4px;
1410
- --wds-segmented-toggle-default-fill-default: #131720;
1411
- --wds-segmented-toggle-default-fill-hover: #131720;
1412
- --wds-segmented-toggle-default-fill-selected: #131720;
1413
- --wds-segmented-toggle-default-fill-selected-disabled: #bebebe;
1414
- --wds-segmented-toggle-fill-default: rgba(255, 255, 255, 0);
1411
+ --wds-segmented-toggle-border-width-default: 1px;
1412
+ --wds-segmented-toggle-fill-default: #ffffff;
1415
1413
  --wds-segmented-toggle-fill-hover: #f7f8f8;
1416
- --wds-segmented-toggle-fill-selected: rgba(255, 255, 255, 0);
1414
+ --wds-segmented-toggle-fill-selected: #ffffff;
1417
1415
  --wds-segmented-toggle-fill-selected-disabled: rgba(255, 255, 255, 0);
1418
1416
  --wds-segmented-toggle-icononly-padding-horizontal-medium: 4px;
1419
1417
  --wds-segmented-toggle-icononly-padding-horizontal-small: 4px;
1420
1418
  --wds-segmented-toggle-icononly-padding-vertical-medium: 4px;
1421
1419
  --wds-segmented-toggle-icononly-padding-vertical-small: 4px;
1422
- --wds-segmented-toggle-label-font-line-height-medium: 20px;
1423
- --wds-segmented-toggle-label-font-line-height-small: 16px;
1424
- --wds-segmented-toggle-label-font-size-medium: 14px;
1425
- --wds-segmented-toggle-label-font-size-small: 12px;
1420
+ --wds-segmented-toggle-label-font-line-height-medium: 24px;
1421
+ --wds-segmented-toggle-label-font-line-height-small: 20px;
1422
+ --wds-segmented-toggle-label-font-size-medium: 16px;
1423
+ --wds-segmented-toggle-label-font-size-small: 14px;
1426
1424
  --wds-segmented-toggle-padding-horizontal-medium: 16px;
1427
1425
  --wds-segmented-toggle-padding-horizontal-small: 12px;
1428
1426
  --wds-segmented-toggle-padding-vertical-medium: 4px;
1429
1427
  --wds-segmented-toggle-padding-vertical-small: 4px;
1430
1428
  --wds-segmented-toggle-size-medium: 32px;
1431
1429
  --wds-segmented-toggle-size-small: 28px;
1432
- --wds-segmented-toggle-width-default: 0;
1433
- --wds-segmented-toggle-width-selected: 0;
1430
+ --wds-segmented-toggle-value-fill-default: #131720;
1431
+ --wds-segmented-toggle-value-fill-hover: #131720;
1432
+ --wds-segmented-toggle-value-fill-selected: #131720;
1433
+ --wds-segmented-toggle-value-fill-selected-disabled: #bebebe;
1434
1434
  --wds-select-area-border-radius: 4px;
1435
1435
  --wds-select-area-fill: #f7f8f8;
1436
1436
  --wds-select-area-fill-active: #dce9ff;
package/studio/foundation.st.css CHANGED
@@ -119,7 +119,7 @@
119
119
  @property st-global(--wds-color-yellow-500);
120
120
  @property st-global(--wds-color-yellow-600);
121
121
  @property st-global(--wds-font-family-default);
122
- @property st-global(--wds-font-family-heading);
122
+ @property st-global(--wds-font-family-display);
123
123
  @property st-global(--wds-font-letter-spacing-0);
124
124
  @property st-global(--wds-font-letter-spacing-100);
125
125
  @property st-global(--wds-font-line-height-100);
@@ -174,6 +174,7 @@
174
174
  @property st-global(--wds-space-50);
175
175
  @property st-global(--wds-space-100);
176
176
  @property st-global(--wds-space-150);
177
+ @property st-global(--wds-space-175);
177
178
  @property st-global(--wds-space-200);
178
179
  @property st-global(--wds-space-250);
179
180
  @property st-global(--wds-space-300);
@@ -320,7 +321,7 @@
320
321
  --wds-color-yellow-500: #fef3e5;
321
322
  --wds-color-yellow-600: #fef6ed;
322
323
  --wds-font-family-default: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
323
- --wds-font-family-heading: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
324
+ --wds-font-family-display: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
324
325
  --wds-font-letter-spacing-0: 0;
325
326
  --wds-font-letter-spacing-100: 1px;
326
327
  --wds-font-line-height-100: 16px;
@@ -375,6 +376,7 @@
375
376
  --wds-space-50: 2px;
376
377
  --wds-space-100: 4px;
377
378
  --wds-space-150: 6px;
379
+ --wds-space-175: 7px;
378
380
  --wds-space-200: 8px;
379
381
  --wds-space-250: 10px;
380
382
  --wds-space-300: 12px;
package/wixel/all.css CHANGED
@@ -523,20 +523,18 @@
523
523
  --wds-section-helper-text-font-size: 12px;
524
524
  --wds-section-helper-vertical-margin: 6px;
525
525
  --wds-section-helper-vertical-padding-medium: 12px;
526
+ --wds-segmented-toggle-border-hover: #d6dcff;
526
527
  --wds-segmented-toggle-border-radius-medium: 8px;
527
528
  --wds-segmented-toggle-border-radius-small: 8px;
528
- --wds-segmented-toggle-default-fill-default: #131720;
529
- --wds-segmented-toggle-default-fill-hover: #131720;
530
- --wds-segmented-toggle-default-fill-selected: #ffffff;
531
- --wds-segmented-toggle-default-fill-selected-disabled: rgba(255, 255, 255, 0.7000);
529
+ --wds-segmented-toggle-border-width-default: 0;
532
530
  --wds-segmented-toggle-fill-default: #eef0ff;
533
531
  --wds-segmented-toggle-fill-hover: #d6dcff;
534
532
  --wds-segmented-toggle-fill-selected: #526cff;
535
533
  --wds-segmented-toggle-fill-selected-disabled: #bebebe;
536
- --wds-segmented-toggle-icononly-padding-horizontal-medium: 4px;
537
- --wds-segmented-toggle-icononly-padding-horizontal-small: 4px;
538
- --wds-segmented-toggle-icononly-padding-vertical-medium: 4px;
539
- --wds-segmented-toggle-icononly-padding-vertical-small: 4px;
534
+ --wds-segmented-toggle-icononly-padding-horizontal-medium: 7px;
535
+ --wds-segmented-toggle-icononly-padding-horizontal-small: 7px;
536
+ --wds-segmented-toggle-icononly-padding-vertical-medium: 7px;
537
+ --wds-segmented-toggle-icononly-padding-vertical-small: 7px;
540
538
  --wds-segmented-toggle-label-font-line-height-medium: 20px;
541
539
  --wds-segmented-toggle-label-font-line-height-small: 16px;
542
540
  --wds-segmented-toggle-label-font-size-medium: 14px;
@@ -545,10 +543,12 @@
545
543
  --wds-segmented-toggle-padding-horizontal-small: 12px;
546
544
  --wds-segmented-toggle-padding-vertical-medium: 8px;
547
545
  --wds-segmented-toggle-padding-vertical-small: 4px;
548
- --wds-segmented-toggle-size-medium: 42px;
549
- --wds-segmented-toggle-size-small: 36px;
550
- --wds-segmented-toggle-width-default: 0;
551
- --wds-segmented-toggle-width-selected: 0;
546
+ --wds-segmented-toggle-size-medium: 38px;
547
+ --wds-segmented-toggle-size-small: 32px;
548
+ --wds-segmented-toggle-value-fill-default: #131720;
549
+ --wds-segmented-toggle-value-fill-hover: #131720;
550
+ --wds-segmented-toggle-value-fill-selected: #ffffff;
551
+ --wds-segmented-toggle-value-fill-selected-disabled: rgba(255, 255, 255, 0.7000);
552
552
  --wds-select-area-border-radius: 4px;
553
553
  --wds-select-area-fill: #f7f8f8;
554
554
  --wds-select-area-fill-active: #d6dcff;
@@ -1366,7 +1366,7 @@
1366
1366
  --wds-color-text-warning: #f9ad4d;
1367
1367
  --wds-color-text-highlight: #bac5ff;
1368
1368
  --wds-font-family-default: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
1369
- --wds-font-family-heading: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
1369
+ --wds-font-family-display: "Madefor Display", "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
1370
1370
  --wds-font-letter-spacing-0: 0;
1371
1371
  --wds-font-letter-spacing-100: 1px;
1372
1372
  --wds-font-letter-spacing-heading-1: 0;
@@ -1473,6 +1473,7 @@
1473
1473
  --wds-space-50: 2px;
1474
1474
  --wds-space-100: 4px;
1475
1475
  --wds-space-150: 6px;
1476
+ --wds-space-175: 7px;
1476
1477
  --wds-space-200: 8px;
1477
1478
  --wds-space-250: 10px;
1478
1479
  --wds-space-300: 12px;
package/wixel/all.st.css CHANGED
@@ -722,7 +722,7 @@
722
722
  @property st-global(--wds-floating-helper-padding-horizontal);
723
723
  @property st-global(--wds-floating-helper-padding-vertical);
724
724
  @property st-global(--wds-font-family-default);
725
- @property st-global(--wds-font-family-heading);
725
+ @property st-global(--wds-font-family-display);
726
726
  @property st-global(--wds-font-letter-spacing-0);
727
727
  @property st-global(--wds-font-letter-spacing-100);
728
728
  @property st-global(--wds-font-letter-spacing-heading-1);
@@ -1057,12 +1057,10 @@
1057
1057
  @property st-global(--wds-section-helper-text-font-size);
1058
1058
  @property st-global(--wds-section-helper-vertical-margin);
1059
1059
  @property st-global(--wds-section-helper-vertical-padding-medium);
1060
+ @property st-global(--wds-segmented-toggle-border-hover);
1060
1061
  @property st-global(--wds-segmented-toggle-border-radius-medium);
1061
1062
  @property st-global(--wds-segmented-toggle-border-radius-small);
1062
- @property st-global(--wds-segmented-toggle-default-fill-default);
1063
- @property st-global(--wds-segmented-toggle-default-fill-hover);
1064
- @property st-global(--wds-segmented-toggle-default-fill-selected);
1065
- @property st-global(--wds-segmented-toggle-default-fill-selected-disabled);
1063
+ @property st-global(--wds-segmented-toggle-border-width-default);
1066
1064
  @property st-global(--wds-segmented-toggle-fill-default);
1067
1065
  @property st-global(--wds-segmented-toggle-fill-hover);
1068
1066
  @property st-global(--wds-segmented-toggle-fill-selected);
@@ -1081,8 +1079,10 @@
1081
1079
  @property st-global(--wds-segmented-toggle-padding-vertical-small);
1082
1080
  @property st-global(--wds-segmented-toggle-size-medium);
1083
1081
  @property st-global(--wds-segmented-toggle-size-small);
1084
- @property st-global(--wds-segmented-toggle-width-default);
1085
- @property st-global(--wds-segmented-toggle-width-selected);
1082
+ @property st-global(--wds-segmented-toggle-value-fill-default);
1083
+ @property st-global(--wds-segmented-toggle-value-fill-hover);
1084
+ @property st-global(--wds-segmented-toggle-value-fill-selected);
1085
+ @property st-global(--wds-segmented-toggle-value-fill-selected-disabled);
1086
1086
  @property st-global(--wds-select-area-border-radius);
1087
1087
  @property st-global(--wds-select-area-fill);
1088
1088
  @property st-global(--wds-select-area-fill-active);
@@ -1265,6 +1265,7 @@
1265
1265
  @property st-global(--wds-space-50);
1266
1266
  @property st-global(--wds-space-100);
1267
1267
  @property st-global(--wds-space-150);
1268
+ @property st-global(--wds-space-175);
1268
1269
  @property st-global(--wds-space-200);
1269
1270
  @property st-global(--wds-space-250);
1270
1271
  @property st-global(--wds-space-300);
@@ -2242,7 +2243,7 @@
2242
2243
  --wds-floating-helper-padding-horizontal: 32px;
2243
2244
  --wds-floating-helper-padding-vertical: 28px;
2244
2245
  --wds-font-family-default: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
2245
- --wds-font-family-heading: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
2246
+ --wds-font-family-display: "Madefor Display", "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
2246
2247
  --wds-font-letter-spacing-0: 0;
2247
2248
  --wds-font-letter-spacing-100: 1px;
2248
2249
  --wds-font-letter-spacing-heading-1: 0;
@@ -2577,20 +2578,18 @@
2577
2578
  --wds-section-helper-text-font-size: 12px;
2578
2579
  --wds-section-helper-vertical-margin: 6px;
2579
2580
  --wds-section-helper-vertical-padding-medium: 12px;
2581
+ --wds-segmented-toggle-border-hover: #d6dcff;
2580
2582
  --wds-segmented-toggle-border-radius-medium: 8px;
2581
2583
  --wds-segmented-toggle-border-radius-small: 8px;
2582
- --wds-segmented-toggle-default-fill-default: #131720;
2583
- --wds-segmented-toggle-default-fill-hover: #131720;
2584
- --wds-segmented-toggle-default-fill-selected: #ffffff;
2585
- --wds-segmented-toggle-default-fill-selected-disabled: rgba(255, 255, 255, 0.7000);
2584
+ --wds-segmented-toggle-border-width-default: 0;
2586
2585
  --wds-segmented-toggle-fill-default: #eef0ff;
2587
2586
  --wds-segmented-toggle-fill-hover: #d6dcff;
2588
2587
  --wds-segmented-toggle-fill-selected: #526cff;
2589
2588
  --wds-segmented-toggle-fill-selected-disabled: #bebebe;
2590
- --wds-segmented-toggle-icononly-padding-horizontal-medium: 4px;
2591
- --wds-segmented-toggle-icononly-padding-horizontal-small: 4px;
2592
- --wds-segmented-toggle-icononly-padding-vertical-medium: 4px;
2593
- --wds-segmented-toggle-icononly-padding-vertical-small: 4px;
2589
+ --wds-segmented-toggle-icononly-padding-horizontal-medium: 7px;
2590
+ --wds-segmented-toggle-icononly-padding-horizontal-small: 7px;
2591
+ --wds-segmented-toggle-icononly-padding-vertical-medium: 7px;
2592
+ --wds-segmented-toggle-icononly-padding-vertical-small: 7px;
2594
2593
  --wds-segmented-toggle-label-font-line-height-medium: 20px;
2595
2594
  --wds-segmented-toggle-label-font-line-height-small: 16px;
2596
2595
  --wds-segmented-toggle-label-font-size-medium: 14px;
@@ -2599,10 +2598,12 @@
2599
2598
  --wds-segmented-toggle-padding-horizontal-small: 12px;
2600
2599
  --wds-segmented-toggle-padding-vertical-medium: 8px;
2601
2600
  --wds-segmented-toggle-padding-vertical-small: 4px;
2602
- --wds-segmented-toggle-size-medium: 42px;
2603
- --wds-segmented-toggle-size-small: 36px;
2604
- --wds-segmented-toggle-width-default: 0;
2605
- --wds-segmented-toggle-width-selected: 0;
2601
+ --wds-segmented-toggle-size-medium: 38px;
2602
+ --wds-segmented-toggle-size-small: 32px;
2603
+ --wds-segmented-toggle-value-fill-default: #131720;
2604
+ --wds-segmented-toggle-value-fill-hover: #131720;
2605
+ --wds-segmented-toggle-value-fill-selected: #ffffff;
2606
+ --wds-segmented-toggle-value-fill-selected-disabled: rgba(255, 255, 255, 0.7000);
2606
2607
  --wds-select-area-border-radius: 4px;
2607
2608
  --wds-select-area-fill: #f7f8f8;
2608
2609
  --wds-select-area-fill-active: #d6dcff;
@@ -2785,6 +2786,7 @@
2785
2786
  --wds-space-50: 2px;
2786
2787
  --wds-space-100: 4px;
2787
2788
  --wds-space-150: 6px;
2789
+ --wds-space-175: 7px;
2788
2790
  --wds-space-200: 8px;
2789
2791
  --wds-space-250: 10px;
2790
2792
  --wds-space-300: 12px;
package/wixel/component.st.css CHANGED
@@ -522,12 +522,10 @@
522
522
  @property st-global(--wds-section-helper-text-font-size);
523
523
  @property st-global(--wds-section-helper-vertical-margin);
524
524
  @property st-global(--wds-section-helper-vertical-padding-medium);
525
+ @property st-global(--wds-segmented-toggle-border-hover);
525
526
  @property st-global(--wds-segmented-toggle-border-radius-medium);
526
527
  @property st-global(--wds-segmented-toggle-border-radius-small);
527
- @property st-global(--wds-segmented-toggle-default-fill-default);
528
- @property st-global(--wds-segmented-toggle-default-fill-hover);
529
- @property st-global(--wds-segmented-toggle-default-fill-selected);
530
- @property st-global(--wds-segmented-toggle-default-fill-selected-disabled);
528
+ @property st-global(--wds-segmented-toggle-border-width-default);
531
529
  @property st-global(--wds-segmented-toggle-fill-default);
532
530
  @property st-global(--wds-segmented-toggle-fill-hover);
533
531
  @property st-global(--wds-segmented-toggle-fill-selected);
@@ -546,8 +544,10 @@
546
544
  @property st-global(--wds-segmented-toggle-padding-vertical-small);
547
545
  @property st-global(--wds-segmented-toggle-size-medium);
548
546
  @property st-global(--wds-segmented-toggle-size-small);
549
- @property st-global(--wds-segmented-toggle-width-default);
550
- @property st-global(--wds-segmented-toggle-width-selected);
547
+ @property st-global(--wds-segmented-toggle-value-fill-default);
548
+ @property st-global(--wds-segmented-toggle-value-fill-hover);
549
+ @property st-global(--wds-segmented-toggle-value-fill-selected);
550
+ @property st-global(--wds-segmented-toggle-value-fill-selected-disabled);
551
551
  @property st-global(--wds-select-area-border-radius);
552
552
  @property st-global(--wds-select-area-fill);
553
553
  @property st-global(--wds-select-area-fill-active);
@@ -1418,20 +1418,18 @@
1418
1418
  --wds-section-helper-text-font-size: 12px;
1419
1419
  --wds-section-helper-vertical-margin: 6px;
1420
1420
  --wds-section-helper-vertical-padding-medium: 12px;
1421
+ --wds-segmented-toggle-border-hover: #d6dcff;
1421
1422
  --wds-segmented-toggle-border-radius-medium: 8px;
1422
1423
  --wds-segmented-toggle-border-radius-small: 8px;
1423
- --wds-segmented-toggle-default-fill-default: #131720;
1424
- --wds-segmented-toggle-default-fill-hover: #131720;
1425
- --wds-segmented-toggle-default-fill-selected: #ffffff;
1426
- --wds-segmented-toggle-default-fill-selected-disabled: rgba(255, 255, 255, 0.7000);
1424
+ --wds-segmented-toggle-border-width-default: 0;
1427
1425
  --wds-segmented-toggle-fill-default: #eef0ff;
1428
1426
  --wds-segmented-toggle-fill-hover: #d6dcff;
1429
1427
  --wds-segmented-toggle-fill-selected: #526cff;
1430
1428
  --wds-segmented-toggle-fill-selected-disabled: #bebebe;
1431
- --wds-segmented-toggle-icononly-padding-horizontal-medium: 4px;
1432
- --wds-segmented-toggle-icononly-padding-horizontal-small: 4px;
1433
- --wds-segmented-toggle-icononly-padding-vertical-medium: 4px;
1434
- --wds-segmented-toggle-icononly-padding-vertical-small: 4px;
1429
+ --wds-segmented-toggle-icononly-padding-horizontal-medium: 7px;
1430
+ --wds-segmented-toggle-icononly-padding-horizontal-small: 7px;
1431
+ --wds-segmented-toggle-icononly-padding-vertical-medium: 7px;
1432
+ --wds-segmented-toggle-icononly-padding-vertical-small: 7px;
1435
1433
  --wds-segmented-toggle-label-font-line-height-medium: 20px;
1436
1434
  --wds-segmented-toggle-label-font-line-height-small: 16px;
1437
1435
  --wds-segmented-toggle-label-font-size-medium: 14px;
@@ -1440,10 +1438,12 @@
1440
1438
  --wds-segmented-toggle-padding-horizontal-small: 12px;
1441
1439
  --wds-segmented-toggle-padding-vertical-medium: 8px;
1442
1440
  --wds-segmented-toggle-padding-vertical-small: 4px;
1443
- --wds-segmented-toggle-size-medium: 42px;
1444
- --wds-segmented-toggle-size-small: 36px;
1445
- --wds-segmented-toggle-width-default: 0;
1446
- --wds-segmented-toggle-width-selected: 0;
1441
+ --wds-segmented-toggle-size-medium: 38px;
1442
+ --wds-segmented-toggle-size-small: 32px;
1443
+ --wds-segmented-toggle-value-fill-default: #131720;
1444
+ --wds-segmented-toggle-value-fill-hover: #131720;
1445
+ --wds-segmented-toggle-value-fill-selected: #ffffff;
1446
+ --wds-segmented-toggle-value-fill-selected-disabled: rgba(255, 255, 255, 0.7000);
1447
1447
  --wds-select-area-border-radius: 4px;
1448
1448
  --wds-select-area-fill: #f7f8f8;
1449
1449
  --wds-select-area-fill-active: #d6dcff;
package/wixel/foundation.st.css CHANGED
@@ -118,7 +118,7 @@
118
118
  @property st-global(--wds-color-yellow-500);
119
119
  @property st-global(--wds-color-yellow-600);
120
120
  @property st-global(--wds-font-family-default);
121
- @property st-global(--wds-font-family-heading);
121
+ @property st-global(--wds-font-family-display);
122
122
  @property st-global(--wds-font-letter-spacing-0);
123
123
  @property st-global(--wds-font-letter-spacing-100);
124
124
  @property st-global(--wds-font-line-height-50);
@@ -174,6 +174,7 @@
174
174
  @property st-global(--wds-space-50);
175
175
  @property st-global(--wds-space-100);
176
176
  @property st-global(--wds-space-150);
177
+ @property st-global(--wds-space-175);
177
178
  @property st-global(--wds-space-200);
178
179
  @property st-global(--wds-space-250);
179
180
  @property st-global(--wds-space-300);
@@ -319,7 +320,7 @@
319
320
  --wds-color-yellow-500: #fef3e5;
320
321
  --wds-color-yellow-600: #fef6ed;
321
322
  --wds-font-family-default: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
322
- --wds-font-family-heading: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
323
+ --wds-font-family-display: "Madefor Display", "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
323
324
  --wds-font-letter-spacing-0: 0;
324
325
  --wds-font-letter-spacing-100: 1px;
325
326
  --wds-font-line-height-50: 14px;
@@ -375,6 +376,7 @@
375
376
  --wds-space-50: 2px;
376
377
  --wds-space-100: 4px;
377
378
  --wds-space-150: 6px;
379
+ --wds-space-175: 7px;
378
380
  --wds-space-200: 8px;
379
381
  --wds-space-250: 10px;
380
382
  --wds-space-300: 12px;