@wix/design-system-tokens 1.89.0 → 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 (17) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/all.css +11 -9
  3. package/all.st.css +20 -16
  4. package/component.st.css +14 -14
  5. package/foundation.st.css +4 -2
  6. package/package.json +2 -2
  7. package/semantic.st.css +2 -0
  8. package/studio/all.css +15 -13
  9. package/studio/all.st.css +24 -20
  10. package/studio/component.st.css +18 -18
  11. package/studio/foundation.st.css +4 -2
  12. package/studio/semantic.st.css +2 -0
  13. package/wixel/all.css +17 -15
  14. package/wixel/all.st.css +26 -22
  15. package/wixel/component.st.css +20 -20
  16. package/wixel/foundation.st.css +4 -2
  17. package/wixel/semantic.st.css +2 -0
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;
@@ -1360,8 +1360,9 @@
1360
1360
  --wds-color-text-success: #25a55a;
1361
1361
  --wds-color-text-urgent: #fe620f;
1362
1362
  --wds-color-text-warning: #ffb700;
1363
+ --wds-color-text-highlight: #d6e6fe;
1363
1364
  --wds-font-family-default: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
1364
- --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;
1365
1366
  --wds-font-letter-spacing-0: 0;
1366
1367
  --wds-font-letter-spacing-100: 1px;
1367
1368
  --wds-font-letter-spacing-heading-1: 0;
@@ -1467,6 +1468,7 @@
1467
1468
  --wds-space-50: 3px;
1468
1469
  --wds-space-100: 6px;
1469
1470
  --wds-space-150: 9px;
1471
+ --wds-space-175: 10px;
1470
1472
  --wds-space-200: 12px;
1471
1473
  --wds-space-250: 15px;
1472
1474
  --wds-space-300: 18px;
package/all.st.css CHANGED
@@ -614,6 +614,7 @@
614
614
  @property st-global(--wds-color-text-destructive);
615
615
  @property st-global(--wds-color-text-disabled);
616
616
  @property st-global(--wds-color-text-disabled-light);
617
+ @property st-global(--wds-color-text-highlight);
617
618
  @property st-global(--wds-color-text-placeholder);
618
619
  @property st-global(--wds-color-text-placeholder-light);
619
620
  @property st-global(--wds-color-text-premium);
@@ -725,7 +726,7 @@
725
726
  @property st-global(--wds-floating-helper-padding-horizontal);
726
727
  @property st-global(--wds-floating-helper-padding-vertical);
727
728
  @property st-global(--wds-font-family-default);
728
- @property st-global(--wds-font-family-heading);
729
+ @property st-global(--wds-font-family-display);
729
730
  @property st-global(--wds-font-letter-spacing-0);
730
731
  @property st-global(--wds-font-letter-spacing-100);
731
732
  @property st-global(--wds-font-letter-spacing-heading-1);
@@ -1058,12 +1059,10 @@
1058
1059
  @property st-global(--wds-section-helper-text-font-size);
1059
1060
  @property st-global(--wds-section-helper-vertical-margin);
1060
1061
  @property st-global(--wds-section-helper-vertical-padding-medium);
1062
+ @property st-global(--wds-segmented-toggle-border-hover);
1061
1063
  @property st-global(--wds-segmented-toggle-border-radius-medium);
1062
1064
  @property st-global(--wds-segmented-toggle-border-radius-small);
1063
- @property st-global(--wds-segmented-toggle-default-fill-default);
1064
- @property st-global(--wds-segmented-toggle-default-fill-hover);
1065
- @property st-global(--wds-segmented-toggle-default-fill-selected);
1066
- @property st-global(--wds-segmented-toggle-default-fill-selected-disabled);
1065
+ @property st-global(--wds-segmented-toggle-border-width-default);
1067
1066
  @property st-global(--wds-segmented-toggle-fill-default);
1068
1067
  @property st-global(--wds-segmented-toggle-fill-hover);
1069
1068
  @property st-global(--wds-segmented-toggle-fill-selected);
@@ -1082,8 +1081,10 @@
1082
1081
  @property st-global(--wds-segmented-toggle-padding-vertical-small);
1083
1082
  @property st-global(--wds-segmented-toggle-size-medium);
1084
1083
  @property st-global(--wds-segmented-toggle-size-small);
1085
- @property st-global(--wds-segmented-toggle-width-default);
1086
- @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);
1087
1088
  @property st-global(--wds-select-area-border-radius);
1088
1089
  @property st-global(--wds-select-area-fill);
1089
1090
  @property st-global(--wds-select-area-fill-active);
@@ -1266,6 +1267,7 @@
1266
1267
  @property st-global(--wds-space-50);
1267
1268
  @property st-global(--wds-space-100);
1268
1269
  @property st-global(--wds-space-150);
1270
+ @property st-global(--wds-space-175);
1269
1271
  @property st-global(--wds-space-200);
1270
1272
  @property st-global(--wds-space-250);
1271
1273
  @property st-global(--wds-space-300);
@@ -2128,6 +2130,7 @@
2128
2130
  --wds-color-text-destructive: #e62214;
2129
2131
  --wds-color-text-disabled: rgba(0, 6, 36, .3);
2130
2132
  --wds-color-text-disabled-light: rgba(255, 255, 255, .7);
2133
+ --wds-color-text-highlight: #d6e6fe;
2131
2134
  --wds-color-text-placeholder: #868aa5;
2132
2135
  --wds-color-text-placeholder-light: #868aa5;
2133
2136
  --wds-color-text-premium: #9a27d5;
@@ -2239,7 +2242,7 @@
2239
2242
  --wds-floating-helper-padding-horizontal: 36px;
2240
2243
  --wds-floating-helper-padding-vertical: 30px;
2241
2244
  --wds-font-family-default: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
2242
- --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;
2243
2246
  --wds-font-letter-spacing-0: 0;
2244
2247
  --wds-font-letter-spacing-100: 1px;
2245
2248
  --wds-font-letter-spacing-heading-1: 0;
@@ -2572,15 +2575,13 @@
2572
2575
  --wds-section-helper-text-font-size: 14px;
2573
2576
  --wds-section-helper-vertical-margin: 6px;
2574
2577
  --wds-section-helper-vertical-padding-medium: 18px;
2578
+ --wds-segmented-toggle-border-hover: #a8caff;
2575
2579
  --wds-segmented-toggle-border-radius-medium: 6px;
2576
2580
  --wds-segmented-toggle-border-radius-small: 6px;
2577
- --wds-segmented-toggle-default-fill-default: #000624;
2578
- --wds-segmented-toggle-default-fill-hover: #000624;
2579
- --wds-segmented-toggle-default-fill-selected: #000624;
2580
- --wds-segmented-toggle-default-fill-selected-disabled: rgba(0, 6, 36, .3);
2581
- --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;
2582
2583
  --wds-segmented-toggle-fill-hover: #e7f0ff;
2583
- --wds-segmented-toggle-fill-selected: rgba(255, 255, 255, 0);
2584
+ --wds-segmented-toggle-fill-selected: #ffffff;
2584
2585
  --wds-segmented-toggle-fill-selected-disabled: rgba(255, 255, 255, 0);
2585
2586
  --wds-segmented-toggle-icononly-padding-horizontal-medium: 6px;
2586
2587
  --wds-segmented-toggle-icononly-padding-horizontal-small: 6px;
@@ -2596,8 +2597,10 @@
2596
2597
  --wds-segmented-toggle-padding-vertical-small: 6px;
2597
2598
  --wds-segmented-toggle-size-medium: 36px;
2598
2599
  --wds-segmented-toggle-size-small: 30px;
2599
- --wds-segmented-toggle-width-default: 1px;
2600
- --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);
2601
2604
  --wds-select-area-border-radius: 8px;
2602
2605
  --wds-select-area-fill: #f4f7ff;
2603
2606
  --wds-select-area-fill-active: #d6e6fe;
@@ -2780,6 +2783,7 @@
2780
2783
  --wds-space-50: 3px;
2781
2784
  --wds-space-100: 6px;
2782
2785
  --wds-space-150: 9px;
2786
+ --wds-space-175: 10px;
2783
2787
  --wds-space-200: 12px;
2784
2788
  --wds-space-250: 15px;
2785
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.0",
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": "1c5e027cfdf54dbb30a01701efe2c32c2f44c1bfc631d1ac636ebece"
36
+ "falconPackageHash": "e541ed00ea1448099d1de134624fa3c73c2f79c7542adb4157a84de4"
37
37
  }
package/semantic.st.css CHANGED
@@ -343,6 +343,7 @@
343
343
  @property st-global(--wds-color-text-destructive);
344
344
  @property st-global(--wds-color-text-disabled);
345
345
  @property st-global(--wds-color-text-disabled-light);
346
+ @property st-global(--wds-color-text-highlight);
346
347
  @property st-global(--wds-color-text-placeholder);
347
348
  @property st-global(--wds-color-text-placeholder-light);
348
349
  @property st-global(--wds-color-text-premium);
@@ -769,6 +770,7 @@
769
770
  --wds-color-text-destructive: #e62214;
770
771
  --wds-color-text-disabled: rgba(0, 6, 36, .3);
771
772
  --wds-color-text-disabled-light: rgba(255, 255, 255, .7);
773
+ --wds-color-text-highlight: #d6e6fe;
772
774
  --wds-color-text-placeholder: #868aa5;
773
775
  --wds-color-text-placeholder-light: #868aa5;
774
776
  --wds-color-text-premium: #9a27d5;
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;
@@ -1354,8 +1354,9 @@
1354
1354
  --wds-color-text-success: #25a55a;
1355
1355
  --wds-color-text-urgent: #f96132;
1356
1356
  --wds-color-text-warning: #f9ad4d;
1357
+ --wds-color-text-highlight: #dce9ff;
1357
1358
  --wds-font-family-default: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
1358
- --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;
1359
1360
  --wds-font-letter-spacing-0: 0;
1360
1361
  --wds-font-letter-spacing-100: 1px;
1361
1362
  --wds-font-letter-spacing-heading-1: 0;
@@ -1461,6 +1462,7 @@
1461
1462
  --wds-space-50: 2px;
1462
1463
  --wds-space-100: 4px;
1463
1464
  --wds-space-150: 6px;
1465
+ --wds-space-175: 7px;
1464
1466
  --wds-space-200: 8px;
1465
1467
  --wds-space-250: 10px;
1466
1468
  --wds-space-300: 12px;
package/studio/all.st.css CHANGED
@@ -610,6 +610,7 @@
610
610
  @property st-global(--wds-color-text-destructive);
611
611
  @property st-global(--wds-color-text-disabled);
612
612
  @property st-global(--wds-color-text-disabled-light);
613
+ @property st-global(--wds-color-text-highlight);
613
614
  @property st-global(--wds-color-text-placeholder);
614
615
  @property st-global(--wds-color-text-placeholder-light);
615
616
  @property st-global(--wds-color-text-premium);
@@ -721,7 +722,7 @@
721
722
  @property st-global(--wds-floating-helper-padding-horizontal);
722
723
  @property st-global(--wds-floating-helper-padding-vertical);
723
724
  @property st-global(--wds-font-family-default);
724
- @property st-global(--wds-font-family-heading);
725
+ @property st-global(--wds-font-family-display);
725
726
  @property st-global(--wds-font-letter-spacing-0);
726
727
  @property st-global(--wds-font-letter-spacing-100);
727
728
  @property st-global(--wds-font-letter-spacing-heading-1);
@@ -1046,12 +1047,10 @@
1046
1047
  @property st-global(--wds-section-helper-prefix-offset-medium);
1047
1048
  @property st-global(--wds-section-helper-text-font-line-height);
1048
1049
  @property st-global(--wds-section-helper-text-font-size);
1050
+ @property st-global(--wds-segmented-toggle-border-hover);
1049
1051
  @property st-global(--wds-segmented-toggle-border-radius-medium);
1050
1052
  @property st-global(--wds-segmented-toggle-border-radius-small);
1051
- @property st-global(--wds-segmented-toggle-default-fill-default);
1052
- @property st-global(--wds-segmented-toggle-default-fill-hover);
1053
- @property st-global(--wds-segmented-toggle-default-fill-selected);
1054
- @property st-global(--wds-segmented-toggle-default-fill-selected-disabled);
1053
+ @property st-global(--wds-segmented-toggle-border-width-default);
1055
1054
  @property st-global(--wds-segmented-toggle-fill-default);
1056
1055
  @property st-global(--wds-segmented-toggle-fill-hover);
1057
1056
  @property st-global(--wds-segmented-toggle-fill-selected);
@@ -1070,8 +1069,10 @@
1070
1069
  @property st-global(--wds-segmented-toggle-padding-vertical-small);
1071
1070
  @property st-global(--wds-segmented-toggle-size-medium);
1072
1071
  @property st-global(--wds-segmented-toggle-size-small);
1073
- @property st-global(--wds-segmented-toggle-width-default);
1074
- @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);
1075
1076
  @property st-global(--wds-select-area-border-radius);
1076
1077
  @property st-global(--wds-select-area-fill);
1077
1078
  @property st-global(--wds-select-area-fill-active);
@@ -1254,6 +1255,7 @@
1254
1255
  @property st-global(--wds-space-50);
1255
1256
  @property st-global(--wds-space-100);
1256
1257
  @property st-global(--wds-space-150);
1258
+ @property st-global(--wds-space-175);
1257
1259
  @property st-global(--wds-space-200);
1258
1260
  @property st-global(--wds-space-250);
1259
1261
  @property st-global(--wds-space-300);
@@ -2118,6 +2120,7 @@
2118
2120
  --wds-color-text-destructive: #ee4437;
2119
2121
  --wds-color-text-disabled: #bebebe;
2120
2122
  --wds-color-text-disabled-light: rgba(255, 255, 255, .7);
2123
+ --wds-color-text-highlight: #dce9ff;
2121
2124
  --wds-color-text-placeholder: #868aa5;
2122
2125
  --wds-color-text-placeholder-light: #868aa5;
2123
2126
  --wds-color-text-premium: #9a27d5;
@@ -2229,7 +2232,7 @@
2229
2232
  --wds-floating-helper-padding-horizontal: 32px;
2230
2233
  --wds-floating-helper-padding-vertical: 28px;
2231
2234
  --wds-font-family-default: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
2232
- --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;
2233
2236
  --wds-font-letter-spacing-0: 0;
2234
2237
  --wds-font-letter-spacing-100: 1px;
2235
2238
  --wds-font-letter-spacing-heading-1: 0;
@@ -2554,32 +2557,32 @@
2554
2557
  --wds-section-helper-prefix-offset-medium: 16px;
2555
2558
  --wds-section-helper-text-font-line-height: 16px;
2556
2559
  --wds-section-helper-text-font-size: 12px;
2560
+ --wds-segmented-toggle-border-hover: #868aa5;
2557
2561
  --wds-segmented-toggle-border-radius-medium: 4px;
2558
2562
  --wds-segmented-toggle-border-radius-small: 4px;
2559
- --wds-segmented-toggle-default-fill-default: #131720;
2560
- --wds-segmented-toggle-default-fill-hover: #131720;
2561
- --wds-segmented-toggle-default-fill-selected: #131720;
2562
- --wds-segmented-toggle-default-fill-selected-disabled: #bebebe;
2563
- --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;
2564
2565
  --wds-segmented-toggle-fill-hover: #f7f8f8;
2565
- --wds-segmented-toggle-fill-selected: rgba(255, 255, 255, 0);
2566
+ --wds-segmented-toggle-fill-selected: #ffffff;
2566
2567
  --wds-segmented-toggle-fill-selected-disabled: rgba(255, 255, 255, 0);
2567
2568
  --wds-segmented-toggle-icononly-padding-horizontal-medium: 4px;
2568
2569
  --wds-segmented-toggle-icononly-padding-horizontal-small: 4px;
2569
2570
  --wds-segmented-toggle-icononly-padding-vertical-medium: 4px;
2570
2571
  --wds-segmented-toggle-icononly-padding-vertical-small: 4px;
2571
- --wds-segmented-toggle-label-font-line-height-medium: 20px;
2572
- --wds-segmented-toggle-label-font-line-height-small: 16px;
2573
- --wds-segmented-toggle-label-font-size-medium: 14px;
2574
- --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;
2575
2576
  --wds-segmented-toggle-padding-horizontal-medium: 16px;
2576
2577
  --wds-segmented-toggle-padding-horizontal-small: 12px;
2577
2578
  --wds-segmented-toggle-padding-vertical-medium: 4px;
2578
2579
  --wds-segmented-toggle-padding-vertical-small: 4px;
2579
2580
  --wds-segmented-toggle-size-medium: 32px;
2580
2581
  --wds-segmented-toggle-size-small: 28px;
2581
- --wds-segmented-toggle-width-default: 0;
2582
- --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;
2583
2586
  --wds-select-area-border-radius: 4px;
2584
2587
  --wds-select-area-fill: #f7f8f8;
2585
2588
  --wds-select-area-fill-active: #dce9ff;
@@ -2762,6 +2765,7 @@
2762
2765
  --wds-space-50: 2px;
2763
2766
  --wds-space-100: 4px;
2764
2767
  --wds-space-150: 6px;
2768
+ --wds-space-175: 7px;
2765
2769
  --wds-space-200: 8px;
2766
2770
  --wds-space-250: 10px;
2767
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/studio/semantic.st.css CHANGED
@@ -339,6 +339,7 @@
339
339
  @property st-global(--wds-color-text-destructive);
340
340
  @property st-global(--wds-color-text-disabled);
341
341
  @property st-global(--wds-color-text-disabled-light);
342
+ @property st-global(--wds-color-text-highlight);
342
343
  @property st-global(--wds-color-text-placeholder);
343
344
  @property st-global(--wds-color-text-placeholder-light);
344
345
  @property st-global(--wds-color-text-premium);
@@ -761,6 +762,7 @@
761
762
  --wds-color-text-destructive: #ee4437;
762
763
  --wds-color-text-disabled: #bebebe;
763
764
  --wds-color-text-disabled-light: rgba(255, 255, 255, .7);
765
+ --wds-color-text-highlight: #dce9ff;
764
766
  --wds-color-text-placeholder: #868aa5;
765
767
  --wds-color-text-placeholder-light: #868aa5;
766
768
  --wds-color-text-premium: #9a27d5;
package/wixel/all.css CHANGED
@@ -456,7 +456,7 @@
456
456
  --wds-pagination-padding-horizontal: 2px;
457
457
  --wds-pagination-padding-vertical: 2px;
458
458
  --wds-palette-border: 1000px;
459
- --wds-popover-border: 4px;
459
+ --wds-popover-border: 12px;
460
460
  --wds-popover-menu-paddings-horizontal: 4px;
461
461
  --wds-popover-menu-paddings-vertical: 4px;
462
462
  --wds-radio-border: #526cff;
@@ -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;
@@ -578,7 +578,7 @@
578
578
  --wds-side-panel-control-layout-divider-border-width: false;
579
579
  --wds-side-panel-field-padding-horizontal: 24px;
580
580
  --wds-side-panel-field-padding-vertical: 12px;
581
- --wds-side-panel-floating-border-radius: 4px;
581
+ --wds-side-panel-floating-border-radius: 12px;
582
582
  --wds-side-panel-floating-header-padding-left: 24px;
583
583
  --wds-side-panel-floating-header-padding-right: 16px;
584
584
  --wds-side-panel-floating-header-padding-vertical: 18px;
@@ -1364,8 +1364,9 @@
1364
1364
  --wds-color-text-success: #25a55a;
1365
1365
  --wds-color-text-urgent: #f96132;
1366
1366
  --wds-color-text-warning: #f9ad4d;
1367
+ --wds-color-text-highlight: #bac5ff;
1367
1368
  --wds-font-family-default: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
1368
- --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;
1369
1370
  --wds-font-letter-spacing-0: 0;
1370
1371
  --wds-font-letter-spacing-100: 1px;
1371
1372
  --wds-font-letter-spacing-heading-1: 0;
@@ -1472,6 +1473,7 @@
1472
1473
  --wds-space-50: 2px;
1473
1474
  --wds-space-100: 4px;
1474
1475
  --wds-space-150: 6px;
1476
+ --wds-space-175: 7px;
1475
1477
  --wds-space-200: 8px;
1476
1478
  --wds-space-250: 10px;
1477
1479
  --wds-space-300: 12px;
package/wixel/all.st.css CHANGED
@@ -610,6 +610,7 @@
610
610
  @property st-global(--wds-color-text-destructive);
611
611
  @property st-global(--wds-color-text-disabled);
612
612
  @property st-global(--wds-color-text-disabled-light);
613
+ @property st-global(--wds-color-text-highlight);
613
614
  @property st-global(--wds-color-text-placeholder);
614
615
  @property st-global(--wds-color-text-placeholder-light);
615
616
  @property st-global(--wds-color-text-premium);
@@ -721,7 +722,7 @@
721
722
  @property st-global(--wds-floating-helper-padding-horizontal);
722
723
  @property st-global(--wds-floating-helper-padding-vertical);
723
724
  @property st-global(--wds-font-family-default);
724
- @property st-global(--wds-font-family-heading);
725
+ @property st-global(--wds-font-family-display);
725
726
  @property st-global(--wds-font-letter-spacing-0);
726
727
  @property st-global(--wds-font-letter-spacing-100);
727
728
  @property st-global(--wds-font-letter-spacing-heading-1);
@@ -1056,12 +1057,10 @@
1056
1057
  @property st-global(--wds-section-helper-text-font-size);
1057
1058
  @property st-global(--wds-section-helper-vertical-margin);
1058
1059
  @property st-global(--wds-section-helper-vertical-padding-medium);
1060
+ @property st-global(--wds-segmented-toggle-border-hover);
1059
1061
  @property st-global(--wds-segmented-toggle-border-radius-medium);
1060
1062
  @property st-global(--wds-segmented-toggle-border-radius-small);
1061
- @property st-global(--wds-segmented-toggle-default-fill-default);
1062
- @property st-global(--wds-segmented-toggle-default-fill-hover);
1063
- @property st-global(--wds-segmented-toggle-default-fill-selected);
1064
- @property st-global(--wds-segmented-toggle-default-fill-selected-disabled);
1063
+ @property st-global(--wds-segmented-toggle-border-width-default);
1065
1064
  @property st-global(--wds-segmented-toggle-fill-default);
1066
1065
  @property st-global(--wds-segmented-toggle-fill-hover);
1067
1066
  @property st-global(--wds-segmented-toggle-fill-selected);
@@ -1080,8 +1079,10 @@
1080
1079
  @property st-global(--wds-segmented-toggle-padding-vertical-small);
1081
1080
  @property st-global(--wds-segmented-toggle-size-medium);
1082
1081
  @property st-global(--wds-segmented-toggle-size-small);
1083
- @property st-global(--wds-segmented-toggle-width-default);
1084
- @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);
1085
1086
  @property st-global(--wds-select-area-border-radius);
1086
1087
  @property st-global(--wds-select-area-fill);
1087
1088
  @property st-global(--wds-select-area-fill-active);
@@ -1264,6 +1265,7 @@
1264
1265
  @property st-global(--wds-space-50);
1265
1266
  @property st-global(--wds-space-100);
1266
1267
  @property st-global(--wds-space-150);
1268
+ @property st-global(--wds-space-175);
1267
1269
  @property st-global(--wds-space-200);
1268
1270
  @property st-global(--wds-space-250);
1269
1271
  @property st-global(--wds-space-300);
@@ -2129,6 +2131,7 @@
2129
2131
  --wds-color-text-destructive: #ee4437;
2130
2132
  --wds-color-text-disabled: rgba(38, 37, 36, 0.3000);
2131
2133
  --wds-color-text-disabled-light: rgba(255, 255, 255, 0.7000);
2134
+ --wds-color-text-highlight: #bac5ff;
2132
2135
  --wds-color-text-placeholder: #868aa5;
2133
2136
  --wds-color-text-placeholder-light: #868aa5;
2134
2137
  --wds-color-text-premium: #9a27d5;
@@ -2240,7 +2243,7 @@
2240
2243
  --wds-floating-helper-padding-horizontal: 32px;
2241
2244
  --wds-floating-helper-padding-vertical: 28px;
2242
2245
  --wds-font-family-default: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
2243
- --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;
2244
2247
  --wds-font-letter-spacing-0: 0;
2245
2248
  --wds-font-letter-spacing-100: 1px;
2246
2249
  --wds-font-letter-spacing-heading-1: 0;
@@ -2508,7 +2511,7 @@
2508
2511
  --wds-pagination-padding-horizontal: 2px;
2509
2512
  --wds-pagination-padding-vertical: 2px;
2510
2513
  --wds-palette-border: 1000px;
2511
- --wds-popover-border: 4px;
2514
+ --wds-popover-border: 12px;
2512
2515
  --wds-popover-menu-paddings-horizontal: 4px;
2513
2516
  --wds-popover-menu-paddings-vertical: 4px;
2514
2517
  --wds-radio-border: #526cff;
@@ -2575,20 +2578,18 @@
2575
2578
  --wds-section-helper-text-font-size: 12px;
2576
2579
  --wds-section-helper-vertical-margin: 6px;
2577
2580
  --wds-section-helper-vertical-padding-medium: 12px;
2581
+ --wds-segmented-toggle-border-hover: #d6dcff;
2578
2582
  --wds-segmented-toggle-border-radius-medium: 8px;
2579
2583
  --wds-segmented-toggle-border-radius-small: 8px;
2580
- --wds-segmented-toggle-default-fill-default: #131720;
2581
- --wds-segmented-toggle-default-fill-hover: #131720;
2582
- --wds-segmented-toggle-default-fill-selected: #ffffff;
2583
- --wds-segmented-toggle-default-fill-selected-disabled: rgba(255, 255, 255, 0.7000);
2584
+ --wds-segmented-toggle-border-width-default: 0;
2584
2585
  --wds-segmented-toggle-fill-default: #eef0ff;
2585
2586
  --wds-segmented-toggle-fill-hover: #d6dcff;
2586
2587
  --wds-segmented-toggle-fill-selected: #526cff;
2587
2588
  --wds-segmented-toggle-fill-selected-disabled: #bebebe;
2588
- --wds-segmented-toggle-icononly-padding-horizontal-medium: 4px;
2589
- --wds-segmented-toggle-icononly-padding-horizontal-small: 4px;
2590
- --wds-segmented-toggle-icononly-padding-vertical-medium: 4px;
2591
- --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;
2592
2593
  --wds-segmented-toggle-label-font-line-height-medium: 20px;
2593
2594
  --wds-segmented-toggle-label-font-line-height-small: 16px;
2594
2595
  --wds-segmented-toggle-label-font-size-medium: 14px;
@@ -2597,10 +2598,12 @@
2597
2598
  --wds-segmented-toggle-padding-horizontal-small: 12px;
2598
2599
  --wds-segmented-toggle-padding-vertical-medium: 8px;
2599
2600
  --wds-segmented-toggle-padding-vertical-small: 4px;
2600
- --wds-segmented-toggle-size-medium: 42px;
2601
- --wds-segmented-toggle-size-small: 36px;
2602
- --wds-segmented-toggle-width-default: 0;
2603
- --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);
2604
2607
  --wds-select-area-border-radius: 4px;
2605
2608
  --wds-select-area-fill: #f7f8f8;
2606
2609
  --wds-select-area-fill-active: #d6dcff;
@@ -2677,7 +2680,7 @@
2677
2680
  --wds-side-panel-control-layout-divider-border-width: false;
2678
2681
  --wds-side-panel-field-padding-horizontal: 24px;
2679
2682
  --wds-side-panel-field-padding-vertical: 12px;
2680
- --wds-side-panel-floating-border-radius: 4px;
2683
+ --wds-side-panel-floating-border-radius: 12px;
2681
2684
  --wds-side-panel-floating-header-padding-left: 24px;
2682
2685
  --wds-side-panel-floating-header-padding-right: 16px;
2683
2686
  --wds-side-panel-floating-header-padding-vertical: 18px;
@@ -2783,6 +2786,7 @@
2783
2786
  --wds-space-50: 2px;
2784
2787
  --wds-space-100: 4px;
2785
2788
  --wds-space-150: 6px;
2789
+ --wds-space-175: 7px;
2786
2790
  --wds-space-200: 8px;
2787
2791
  --wds-space-250: 10px;
2788
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);
@@ -1351,7 +1351,7 @@
1351
1351
  --wds-pagination-padding-horizontal: 2px;
1352
1352
  --wds-pagination-padding-vertical: 2px;
1353
1353
  --wds-palette-border: 1000px;
1354
- --wds-popover-border: 4px;
1354
+ --wds-popover-border: 12px;
1355
1355
  --wds-popover-menu-paddings-horizontal: 4px;
1356
1356
  --wds-popover-menu-paddings-vertical: 4px;
1357
1357
  --wds-radio-border: #526cff;
@@ -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;
@@ -1473,7 +1473,7 @@
1473
1473
  --wds-side-panel-control-layout-divider-border-width: false;
1474
1474
  --wds-side-panel-field-padding-horizontal: 24px;
1475
1475
  --wds-side-panel-field-padding-vertical: 12px;
1476
- --wds-side-panel-floating-border-radius: 4px;
1476
+ --wds-side-panel-floating-border-radius: 12px;
1477
1477
  --wds-side-panel-floating-header-padding-left: 24px;
1478
1478
  --wds-side-panel-floating-header-padding-right: 16px;
1479
1479
  --wds-side-panel-floating-header-padding-vertical: 18px;
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;
package/wixel/semantic.st.css CHANGED
@@ -343,6 +343,7 @@
343
343
  @property st-global(--wds-color-text-destructive);
344
344
  @property st-global(--wds-color-text-disabled);
345
345
  @property st-global(--wds-color-text-disabled-light);
346
+ @property st-global(--wds-color-text-highlight);
346
347
  @property st-global(--wds-color-text-placeholder);
347
348
  @property st-global(--wds-color-text-placeholder-light);
348
349
  @property st-global(--wds-color-text-premium);
@@ -769,6 +770,7 @@
769
770
  --wds-color-text-destructive: #ee4437;
770
771
  --wds-color-text-disabled: rgba(38, 37, 36, 0.3000);
771
772
  --wds-color-text-disabled-light: rgba(255, 255, 255, 0.7000);
773
+ --wds-color-text-highlight: #bac5ff;
772
774
  --wds-color-text-placeholder: #868aa5;
773
775
  --wds-color-text-placeholder-light: #868aa5;
774
776
  --wds-color-text-premium: #9a27d5;