@wix/design-system-tokens 1.128.3 → 1.130.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.
package/CHANGELOG.md CHANGED
@@ -1,3 +1,31 @@
1
+ ## 1.130.0 - 2025-09-01
2
+
3
+ ### Features
4
+
5
+ - feat(Thumbnails): add border prop [15251](https://github.com/wix-private/wix-design-systems/pull/15251)
6
+
7
+ ### Visual Breaking Changes
8
+
9
+ - breaking(AddItem): e3 tokenization [15257](https://github.com/wix-private/wix-design-systems/pull/15257)
10
+ - breaking(FillButton): e3 tokenization [15252](https://github.com/wix-private/wix-design-systems/pull/15252)
11
+ - breaking(VariableInput): e3 tokenization [15243](https://github.com/wix-private/wix-design-systems/pull/15243)
12
+ - breaking(Badge): editor3 tokenization [15223](https://github.com/wix-private/wix-design-systems/pull/15223)
13
+ - breaking(Toast): tokenize & center dismiss button [15242](https://github.com/wix-private/wix-design-systems/pull/15242)
14
+
15
+ ### Bug Fixes
16
+
17
+ - fix(Carousel): previous button placement [15260](https://github.com/wix-private/wix-design-systems/pull/15260)
18
+
19
+ ## 1.129.0 - 2025-08-27
20
+
21
+ ### Bug Fixes
22
+
23
+ - fix(MultiSelect): opening dropdown with only fixedFooter provided [15247](https://github.com/wix-private/wix-design-systems/pull/15247)
24
+
25
+ ### Visual Breaking Changes
26
+
27
+ - breaking(CardGalleryItem): tokenize component [15238](https://github.com/wix-private/wix-design-systems/pull/15238)
28
+
1
29
  ## 1.128.2 - 2025-08-25
2
30
 
3
31
  ### Visual Breaking Changes
package/all.css CHANGED
@@ -28,7 +28,7 @@
28
28
  --wds-space-100: 6px;
29
29
  --wds-space-50: 3px;
30
30
  --wds-space-25: 1px;
31
- --wds-space-0: 0;
31
+ --wds-space-0: 0px;
32
32
  --wds-shadow-spread-secondary-raised: 0;
33
33
  --wds-shadow-focus-spread: 3;
34
34
  --wds-shadow-y-350: 3px;
@@ -40,7 +40,7 @@
40
40
  --wds-shadow-y-25: 2px;
41
41
  --wds-shadow-y-0: 0;
42
42
  --wds-shadow-x-25: 2px;
43
- --wds-shadow-x-0: 0;
43
+ --wds-shadow-x-0: 0px;
44
44
  --wds-shadow-blur-800: 36px;
45
45
  --wds-shadow-blur-500: 24px;
46
46
  --wds-shadow-blur-400: 24px;
@@ -53,7 +53,7 @@
53
53
  --wds-shadow-blur-50: 3px;
54
54
  --wds-shadow-blur-35: 2px;
55
55
  --wds-shadow-blur-25: 1px;
56
- --wds-shadow-blur-0: 0;
56
+ --wds-shadow-blur-0: 0px;
57
57
  --wds-font-weight-semi-bold: 600;
58
58
  --wds-font-weight-regular: 400;
59
59
  --wds-font-weight-medium: 500;
@@ -68,7 +68,7 @@
68
68
  --wds-font-size-200: 12px;
69
69
  --wds-font-size-100: 10px;
70
70
  --wds-font-letter-spacing-100: 1px;
71
- --wds-font-letter-spacing-0: 0;
71
+ --wds-font-letter-spacing-0: 0px;
72
72
  --wds-font-family-display: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
73
73
  --wds-font-family-default: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
74
74
  --wds-color-text-stage-section: #6f56f9;
@@ -238,7 +238,7 @@
238
238
  --wds-breakpoint-small: 490px;
239
239
  --wds-breakpoint-medium: 768px;
240
240
  --wds-breakpoint-large: 1186px;
241
- --wds-border-width-none: 0;
241
+ --wds-border-width-none: 0px;
242
242
  --wds-border-width-200: 2px;
243
243
  --wds-border-width-150: 1.5px;
244
244
  --wds-border-width-100: 1px;
@@ -249,16 +249,16 @@
249
249
  --wds-border-radius-300: 6px;
250
250
  --wds-border-radius-200: 4px;
251
251
  --wds-border-radius-100: 2px;
252
- --wds-border-radius-0: 0;
253
- --wds-background-blur-375: 0;
254
- --wds-background-blur-350: 0;
255
- --wds-background-blur-300: 0;
256
- --wds-background-blur-250: 0;
257
- --wds-background-blur-200: 0;
258
- --wds-background-blur-150: 0;
259
- --wds-background-blur-50: 0;
260
- --wds-background-blur-10: 0;
261
- --wds-background-blur-0: 0;
252
+ --wds-border-radius-0: 0px;
253
+ --wds-background-blur-375: 0px;
254
+ --wds-background-blur-350: 0px;
255
+ --wds-background-blur-300: 0px;
256
+ --wds-background-blur-250: 0px;
257
+ --wds-background-blur-200: 0px;
258
+ --wds-background-blur-150: 0px;
259
+ --wds-background-blur-50: 0px;
260
+ --wds-background-blur-10: 0px;
261
+ --wds-background-blur-0: 0px;
262
262
  --wds-toggle-switch-width-small: 28px;
263
263
  --wds-toggle-switch-width-medium: 34px;
264
264
  --wds-toggle-switch-width-large: 46px;
@@ -482,6 +482,10 @@
482
482
  --wds-color-gradient-light-right-to-left: linear-gradient(270deg, var(--wds-color-white) 0%, var(--wds-color-white-transparent-0) 100%);
483
483
  --wds-color-gradient-light-left-to-right: linear-gradient(90deg, var(--wds-color-white) 0%, var(--wds-color-white-transparent-0) 100%);
484
484
  --wds-color-gradient-light-bottom-to-top: linear-gradient(0deg, var(--wds-color-white) 0%, var(--wds-color-white-transparent-0) 100%);
485
+ --wds-color-fill-warning-tertiary-hover: var(--wds-color-yellow-500);
486
+ --wds-color-fill-warning-tertiary-disabled: var(--wds-color-white);
487
+ --wds-color-fill-warning-tertiary-active: var(--wds-color-yellow-400);
488
+ --wds-color-fill-warning-tertiary: var(--wds-color-white);
485
489
  --wds-color-fill-warning-secondary-hover: var(--wds-color-yellow-300);
486
490
  --wds-color-fill-warning-secondary-disabled: var(--wds-color-black-100-transparent-10);
487
491
  --wds-color-fill-warning-secondary-active: var(--wds-color-yellow-200);
@@ -731,6 +735,8 @@
731
735
  --wds-color-border-premium-primary-disabled: var(--wds-color-black-100-transparent-10);
732
736
  --wds-color-border-premium-primary-active: var(--wds-color-purple-100);
733
737
  --wds-color-border-premium-primary: var(--wds-color-purple-300);
738
+ --wds-color-border-light-primary-disabled: var(--wds-color-white-transparent-30);
739
+ --wds-color-border-light-primary-active: var(--wds-color-white);
734
740
  --wds-color-border-light-hover: var(--wds-color-white-transparent-70);
735
741
  --wds-color-border-light-disabled: var(--wds-color-white-transparent-30);
736
742
  --wds-color-border-light-active: var(--wds-color-white);
@@ -797,6 +803,8 @@
797
803
  --wds-vertical-tabs-action-padding-horizontal-tiny: var(--wds-space-400);
798
804
  --wds-vertical-tabs-action-padding-horizontal-small: var(--wds-space-400);
799
805
  --wds-vertical-tabs-action-padding-horizontal-medium: var(--wds-space-400);
806
+ --wds-variable-input-padding-vertical-tiny: var(--wds-space-50);
807
+ --wds-variable-input-padding-vertical-small: var(--wds-space-100);
800
808
  --wds-tooltip-padding-vertical-small: var(--wds-space-100);
801
809
  --wds-tooltip-padding-vertical-medium: var(--wds-space-200);
802
810
  --wds-tooltip-padding-horizontal-small: var(--wds-space-200);
@@ -852,8 +860,11 @@
852
860
  --wds-toggle-button-border-radius-square-small: var(--wds-border-radius-200);
853
861
  --wds-toggle-button-border-radius-square-medium: var(--wds-border-radius-300);
854
862
  --wds-toggle-button-border-radius-square-large: var(--wds-border-radius-300);
863
+ --wds-toast-vertical-padding: var(--wds-space-150);
864
+ --wds-toast-horizontal-padding: var(--wds-space-200);
855
865
  --wds-thumbnail-title-padding-top: var(--wds-space-100);
856
866
  --wds-thumbnail-title-font-weight-tiny: var(--wds-font-weight-regular);
867
+ --wds-thumbnail-overlay-fill: var(--wds-color-black-100-transparent-0);
857
868
  --wds-thumbnail-illustration-fill-3: var(--wds-color-blue-500);
858
869
  --wds-thumbnail-illustration-fill-2: var(--wds-color-blue-100);
859
870
  --wds-thumbnail-illustration-fill-1: var(--wds-color-blue-250);
@@ -912,8 +923,6 @@
912
923
  --wds-swatches-list-gap: var(--wds-space-200);
913
924
  --wds-stepper-prefix-size-number: var(--wds-space-400);
914
925
  --wds-stepper-prefix-size-circle: var(--wds-space-500);
915
- --wds-status-toast-vertical-padding: var(--wds-space-150);
916
- --wds-status-toast-horizontal-padding: var(--wds-space-200);
917
926
  --wds-social-preview-content-padding-vertical: var(--wds-space-150);
918
927
  --wds-social-preview-content-padding-horizontal: var(--wds-space-200);
919
928
  --wds-social-post-preview-content-padding-vertical: var(--wds-space-200);
@@ -1095,8 +1104,8 @@
1095
1104
  --wds-mobile-modal-footer-padding-horizontal: var(--wds-space-400);
1096
1105
  --wds-mobile-modal-content-padding-vertical: var(--wds-space-400);
1097
1106
  --wds-mobile-modal-content-padding-horizontal: var(--wds-space-400);
1098
- --wds-message-modal-title-font-family: var(--wds-font-family-default);
1099
1107
  --wds-message-modal-top-controls-paddings: var(--wds-space-100);
1108
+ --wds-message-modal-title-font-family: var(--wds-font-family-default);
1100
1109
  --wds-message-modal-padding-vertical: var(--wds-space-400);
1101
1110
  --wds-message-modal-padding-horizontal: var(--wds-space-400);
1102
1111
  --wds-message-modal-content-gap: var(--wds-space-200);
@@ -1129,11 +1138,15 @@
1129
1138
  --wds-list-item-select-padding-left-medium: var(--wds-space-300);
1130
1139
  --wds-list-item-select-padding-horizontal-small: var(--wds-space-300);
1131
1140
  --wds-list-item-select-padding-horizontal-medium: var(--wds-space-300);
1132
- --wds-list-item-select-label-font-weight-small: var(--wds-font-weight-regular);
1141
+ --wds-list-item-select-label-hover-font-weight-medium: var(--wds-font-weight-regular);
1133
1142
  --wds-list-item-select-label-font-weight-medium: var(--wds-font-weight-regular);
1143
+ --wds-list-item-select-label-font-weight-active: var(--wds-font-weight-regular);
1144
+ --wds-list-item-select-gap: var(--wds-space-0);
1134
1145
  --wds-list-item-select-border-radius: var(--wds-border-radius-0);
1135
1146
  --wds-list-item-select-affix-margin: var(--wds-space-100);
1136
1147
  --wds-list-item-section-padding-horizontal: var(--wds-space-400);
1148
+ --wds-list-item-section-font-weight: var(--wds-font-weight-bold);
1149
+ --wds-list-item-section-divider-padding-horizontal: var(--wds-space-400);
1137
1150
  --wds-list-item-action-title-font-weight-active: var(--wds-font-weight-regular);
1138
1151
  --wds-list-item-action-title-font-weight: var(--wds-font-weight-regular);
1139
1152
  --wds-list-item-action-padding-vertical-small-screen-small: var(--wds-space-200);
@@ -1142,9 +1155,9 @@
1142
1155
  --wds-list-item-action-padding-vertical-medium: var(--wds-space-100);
1143
1156
  --wds-list-item-action-padding-horizontal-small: var(--wds-space-300);
1144
1157
  --wds-list-item-action-padding-horizontal-medium: var(--wds-space-300);
1145
- --wds-list-item-action-gap-small: var(--wds-space-100);
1146
- --wds-list-item-action-gap-medium: var(--wds-space-100);
1158
+ --wds-list-item-action-gap: var(--wds-space-0);
1147
1159
  --wds-list-item-action-border-radius: var(--wds-border-radius-0);
1160
+ --wds-list-item-action-affix-margin: var(--wds-space-100);
1148
1161
  --wds-list-item-padding-vertical-xx-tiny: var(--wds-space-50);
1149
1162
  --wds-list-item-padding-vertical-x-tiny: var(--wds-space-100);
1150
1163
  --wds-list-item-padding-vertical-tiny: var(--wds-space-200);
@@ -1207,6 +1220,7 @@
1207
1220
  --wds-floating-helper-padding-vertical: var(--wds-space-500);
1208
1221
  --wds-floating-helper-padding-horizontal: var(--wds-space-600);
1209
1222
  --wds-floating-helper-main-action-padding-top: var(--wds-space-300);
1223
+ --wds-fill-button-border-width: var(--wds-border-width-none);
1210
1224
  --wds-field-set-label-gap-tiny: var(--wds-space-100);
1211
1225
  --wds-field-set-label-gap-small: var(--wds-space-150);
1212
1226
  --wds-field-set-label-font-weight: var(--wds-font-weight-regular);
@@ -1276,6 +1290,8 @@
1276
1290
  --wds-card-gallery-item-padding-right-medium: var(--wds-space-400);
1277
1291
  --wds-card-gallery-item-padding-left-small: var(--wds-space-200);
1278
1292
  --wds-card-gallery-item-padding-left-medium: var(--wds-space-300);
1293
+ --wds-card-gallery-item-image-border-radius-top: var(--wds-border-radius-400);
1294
+ --wds-card-gallery-item-image-border-radius-bottom: var(--wds-border-radius-0);
1279
1295
  --wds-card-gallery-item-content-margin-vertical: var(--wds-space-0);
1280
1296
  --wds-card-gallery-item-border-radius-100: var(--wds-border-radius-400);
1281
1297
  --wds-card-gallery-item-border-radius-0: var(--wds-border-radius-0);
@@ -1361,7 +1377,10 @@
1361
1377
  --wds-add-item-padding-vertical-large: var(--wds-space-500);
1362
1378
  --wds-add-item-padding-horizontal-tiny: var(--wds-space-200);
1363
1379
  --wds-add-item-padding-horizontal-large: var(--wds-space-500);
1380
+ --wds-add-item-fill-disabled: var(--wds-color-black-100-transparent-5);
1381
+ --wds-add-item-fill: var(--wds-color-blue-600);
1364
1382
  --wds-add-item-border-radius: var(--wds-border-radius-400);
1383
+ --wds-add-item-border-dashed-radius: var(--wds-border-radius-100);
1365
1384
  --wds-accordion-title-font-weight-small: var(--wds-font-weight-medium);
1366
1385
  --wds-accordion-title-font-weight: var(--wds-font-weight-medium);
1367
1386
  --wds-accordion-inner-content-padding-top: var(--wds-space-250);
@@ -1596,7 +1615,6 @@
1596
1615
  --wds-loader-fill-light: var(--wds-color-fill-light-primary);
1597
1616
  --wds-loader-fill-error: var(--wds-color-fill-destructive-primary);
1598
1617
  --wds-loader-fill: var(--wds-color-fill-standard-secondary);
1599
- --wds-list-item-select-title-pressed: var(--wds-color-text-standard-primary);
1600
1618
  --wds-list-item-select-title-disabled: var(--wds-color-text-disabled);
1601
1619
  --wds-list-item-select-title: var(--wds-color-text-standard-primary);
1602
1620
  --wds-list-item-select-suffix-pressed: var(--wds-color-text-placeholder);
@@ -1624,6 +1642,7 @@
1624
1642
  --wds-list-item-select-active-fill-active-screen-small: var(--wds-color-fill-standard-tertiary-active);
1625
1643
  --wds-list-item-select-active-fill-active: var(--wds-color-fill-standard-primary-active);
1626
1644
  --wds-list-item-select-active-fill: var(--wds-color-fill-standard-primary);
1645
+ --wds-list-item-section-title-label-fill: var(--wds-color-text-placeholder);
1627
1646
  --wds-list-item-section-font-size: var(--wds-font-size-body-small);
1628
1647
  --wds-list-item-section-fill: var(--wds-color-fill-standard-tertiary);
1629
1648
  --wds-list-item-action-suffix-fill-active: var(--wds-color-text-placeholder);
@@ -1770,11 +1789,16 @@
1770
1789
  --wds-form-field-label-font-size-tiny: var(--wds-font-size-body-tiny);
1771
1790
  --wds-form-field-label-font-size-small: var(--wds-font-size-body-small);
1772
1791
  --wds-form-field-label-fill: var(--wds-color-text-standard-secondary);
1792
+ --wds-fill-button-icon-color: var(--wds-color-text-primary);
1793
+ --wds-fill-button-fill-hover: var(--wds-color-fill-standard-secondary-hover);
1794
+ --wds-fill-button-fill: var(--wds-color-fill-standard-secondary);
1795
+ --wds-fill-button-border-color: var(--wds-color-border-standard-secondary);
1773
1796
  --wds-field-set-label-font-size-tiny: var(--wds-font-size-body-tiny);
1774
1797
  --wds-field-set-label-font-size-small: var(--wds-font-size-body-small);
1775
1798
  --wds-field-set-label-fill: var(--wds-color-text-standard-secondary);
1776
1799
  --wds-dropdown-icon-fill-disabled: var(--wds-color-text-disabled);
1777
1800
  --wds-dropdown-icon-fill: var(--wds-color-text-primary);
1801
+ --wds-drag-handle-fill: var(--wds-color-text-primary);
1778
1802
  --wds-dock-foreground-fill-hover: var(--wds-color-fill-standard-secondary-active);
1779
1803
  --wds-dock-foreground-fill-disabled: var(--wds-color-fill-standard-primary-disabled);
1780
1804
  --wds-dock-foreground-fill-active: var(--wds-color-fill-standard-primary);
@@ -1826,6 +1850,7 @@
1826
1850
  --wds-checkbox-border-active: var(--wds-color-border-standard-secondary-active);
1827
1851
  --wds-checkbox-border: var(--wds-color-border-standard-secondary-active);
1828
1852
  --wds-card-gallery-item-title-font-size-medium: var(--wds-font-size-heading-4);
1853
+ --wds-card-gallery-item-subtitle-font-size-medium: var(--wds-font-size-body-small);
1829
1854
  --wds-card-gallery-item-overlay-fill: var(--wds-color-fill-transparent-primary);
1830
1855
  --wds-card-gallery-item-fill: var(--wds-color-fill-surface-default);
1831
1856
  --wds-button-text-hover: var(--wds-color-text-standard-primary-light);
@@ -1895,10 +1920,40 @@
1895
1920
  --wds-button-border-dark-secondary-disabled: var(--wds-color-border-premium-secondary-disabled);
1896
1921
  --wds-button-border-dark-secondary-active: var(--wds-color-fill-dark-primary);
1897
1922
  --wds-button-border-dark-secondary: var(--wds-color-border-dark-primary);
1923
+ --wds-badge-outline-warning-label-color: var(--wds-color-text-warning);
1924
+ --wds-badge-outline-warning-fill: var(--wds-color-fill-warning-tertiary);
1925
+ --wds-badge-outline-warning-border-color: var(--wds-color-border-warning-primary);
1926
+ --wds-badge-outline-urgent-label-color: var(--wds-color-text-urgent);
1927
+ --wds-badge-outline-urgent-fill: var(--wds-color-fill-urgent-tertiary);
1928
+ --wds-badge-outline-urgent-border-color: var(--wds-color-border-urgent-primary);
1929
+ --wds-badge-outline-success-label-color: var(--wds-color-text-success);
1930
+ --wds-badge-outline-success-fill: var(--wds-color-fill-success-tertiary);
1931
+ --wds-badge-outline-success-border-color: var(--wds-color-border-success-primary);
1932
+ --wds-badge-outline-standard-label-color: var(--wds-color-text-primary);
1933
+ --wds-badge-outline-standard-fill: var(--wds-color-fill-standard-tertiary);
1934
+ --wds-badge-outline-standard-border-color: var(--wds-color-border-standard-primary);
1935
+ --wds-badge-outline-premium-label-color: var(--wds-color-text-premium);
1936
+ --wds-badge-outline-premium-fill: var(--wds-color-fill-premium-tertiary);
1937
+ --wds-badge-outline-premium-border-color: var(--wds-color-border-premium-primary);
1938
+ --wds-badge-outline-neutral-label-color: var(--wds-color-text-standard-secondary-light);
1939
+ --wds-badge-outline-neutral-fill: var(--wds-color-fill-dark-tertiary);
1940
+ --wds-badge-outline-neutral-border-color: var(--wds-color-border-dark-primary);
1941
+ --wds-badge-outline-destructive-label-color: var(--wds-color-text-destructive);
1942
+ --wds-badge-outline-destructive-fill: var(--wds-color-fill-destructive-tertiary);
1943
+ --wds-badge-outline-destructive-border-color: var(--wds-color-border-destructive-primary);
1944
+ --wds-badge-outline-dark-label-color: var(--wds-color-text-standard-secondary);
1945
+ --wds-badge-outline-dark-fill: var(--wds-color-fill-dark-tertiary);
1946
+ --wds-badge-outline-dark-border-color: var(--wds-color-border-dark-primary);
1947
+ --wds-badge-label-font-size-small: var(--wds-font-size-body-small);
1898
1948
  --wds-announcement-modal-title-font-size: var(--wds-font-size-heading-1);
1899
1949
  --wds-announcement-modal-text-font-size: var(--wds-font-size-body-medium);
1900
1950
  --wds-add-item-title-font-size-small: var(--wds-font-size-body-small);
1901
1951
  --wds-add-item-title-font-size-medium: var(--wds-font-size-body-medium);
1952
+ --wds-add-item-label-color: var(--wds-color-text-primary);
1953
+ --wds-add-item-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
1954
+ --wds-add-item-border-color-hover: var(--wds-color-border-standard-primary-hover);
1955
+ --wds-add-item-border-color-disabled: var(--wds-color-border-standard-primary-disabled);
1956
+ --wds-add-item-border-color: var(--wds-color-border-standard-primary);
1902
1957
  --wds-accordion-title-font-size-small: var(--wds-font-size-body-small);
1903
1958
  --wds-accordion-title-font-size-medium: var(--wds-font-size-body-medium);
1904
1959
  --wds-accordion-title-fill-hover: var(--wds-color-text-standard-primary);
@@ -1928,7 +1983,7 @@
1928
1983
  --wds-list-item-select-subtitle-font-line-height-medium: var(--wds-font-line-height-body-small);
1929
1984
  --wds-list-item-select-label-font-line-height-small: var(--wds-font-line-height-body-small);
1930
1985
  --wds-list-item-select-label-font-line-height-medium: var(--wds-font-line-height-body-medium);
1931
- --wds-list-item-section-line-height: var(--wds-font-line-height-body-small);
1986
+ --wds-list-item-section-font-line-height: var(--wds-font-line-height-body-small);
1932
1987
  --wds-list-item-action-subtitle-font-line-height: var(--wds-font-line-height-body-small);
1933
1988
  --wds-list-item-action-label-font-line-height-small: var(--wds-font-line-height-body-small);
1934
1989
  --wds-list-item-action-label-font-line-height-medium: var(--wds-font-line-height-body-medium);
@@ -1945,11 +2000,14 @@
1945
2000
  --wds-custom-modal-footnote-text-font-line-height: var(--wds-font-line-height-body-small);
1946
2001
  --wds-checkbox-label-font-line-height-small: var(--wds-font-line-height-body-small);
1947
2002
  --wds-checkbox-label-font-line-height-medium: var(--wds-font-line-height-body-medium);
2003
+ --wds-card-gallery-item-title-font-line-height-small: var(--wds-font-line-height-body-small);
2004
+ --wds-card-gallery-item-title-font-line-height-medium: var(--wds-font-line-height-heading-4);
1948
2005
  --wds-button-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
1949
2006
  --wds-button-font-line-height-small: var(--wds-font-line-height-body-small);
1950
2007
  --wds-button-font-line-height-medium: var(--wds-font-line-height-body-medium);
1951
2008
  --wds-button-font-line-height-large: var(--wds-font-line-height-body-medium);
1952
2009
  --wds-button-font-line-height-extra-large: var(--wds-font-line-height-body-medium);
2010
+ --wds-badge-label-font-line-height-small: var(--wds-font-line-height-body-small);
1953
2011
  --wds-announcement-modal-title-font-line-height: var(--wds-font-line-height-heading-1);
1954
2012
  --wds-announcement-modal-text-font-line-height: var(--wds-font-line-height-heading-1);
1955
2013
  --wds-add-item-title-font-line-height-tiny: var(--wds-font-line-height-body-small);
package/all.scss CHANGED
@@ -40,7 +40,7 @@
40
40
  --wds-space-100: 6px;
41
41
  --wds-space-50: 3px;
42
42
  --wds-space-25: 1px;
43
- --wds-space-0: 0;
43
+ --wds-space-0: 0px;
44
44
  --wds-slider-track-size-transparent: 8px;
45
45
  --wds-slider-track-size: 4px;
46
46
  --wds-slider-slider-knob-size-transparent: 16px;
@@ -73,7 +73,7 @@
73
73
  --wds-shadow-y-25: 2px;
74
74
  --wds-shadow-y-0: 0;
75
75
  --wds-shadow-x-25: 2px;
76
- --wds-shadow-x-0: 0;
76
+ --wds-shadow-x-0: 0px;
77
77
  --wds-shadow-spread-secondary-raised: 0;
78
78
  --wds-shadow-focus-spread: 3;
79
79
  --wds-shadow-blur-800: 36px;
@@ -88,7 +88,7 @@
88
88
  --wds-shadow-blur-50: 3px;
89
89
  --wds-shadow-blur-35: 2px;
90
90
  --wds-shadow-blur-25: 1px;
91
- --wds-shadow-blur-0: 0;
91
+ --wds-shadow-blur-0: 0px;
92
92
  --wds-section-helper-prefix-offset-margin: 6px;
93
93
  --wds-radio-size: 16px;
94
94
  --wds-radio-dot-size: 10px;
@@ -123,7 +123,7 @@
123
123
  --wds-font-size-200: 12px;
124
124
  --wds-font-size-100: 10px;
125
125
  --wds-font-letter-spacing-100: 1px;
126
- --wds-font-letter-spacing-0: 0;
126
+ --wds-font-letter-spacing-0: 0px;
127
127
  --wds-font-family-display: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
128
128
  --wds-font-family-default: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
129
129
  --wds-composer-sidebar-end-max-width: 240px;
@@ -302,7 +302,7 @@
302
302
  --wds-breakpoint-small: 490px;
303
303
  --wds-breakpoint-medium: 768px;
304
304
  --wds-breakpoint-large: 1186px;
305
- --wds-border-width-none: 0;
305
+ --wds-border-width-none: 0px;
306
306
  --wds-border-width-200: 2px;
307
307
  --wds-border-width-150: 1.5px;
308
308
  --wds-border-width-100: 1px;
@@ -313,16 +313,16 @@
313
313
  --wds-border-radius-300: 6px;
314
314
  --wds-border-radius-200: 4px;
315
315
  --wds-border-radius-100: 2px;
316
- --wds-border-radius-0: 0;
317
- --wds-background-blur-375: 0;
318
- --wds-background-blur-350: 0;
319
- --wds-background-blur-300: 0;
320
- --wds-background-blur-250: 0;
321
- --wds-background-blur-200: 0;
322
- --wds-background-blur-150: 0;
323
- --wds-background-blur-50: 0;
324
- --wds-background-blur-10: 0;
325
- --wds-background-blur-0: 0;
316
+ --wds-border-radius-0: 0px;
317
+ --wds-background-blur-375: 0px;
318
+ --wds-background-blur-350: 0px;
319
+ --wds-background-blur-300: 0px;
320
+ --wds-background-blur-250: 0px;
321
+ --wds-background-blur-200: 0px;
322
+ --wds-background-blur-150: 0px;
323
+ --wds-background-blur-50: 0px;
324
+ --wds-background-blur-10: 0px;
325
+ --wds-background-blur-0: 0px;
326
326
  --wds-avatar-group-gap-condensed: -3px;
327
327
  --wds-width-default-2: var(--wds-border-width-100);
328
328
  --wds-width-default: var(--wds-border-width-100);
@@ -368,6 +368,8 @@
368
368
  --wds-vertical-tabs-action-padding-horizontal-tiny: var(--wds-space-400);
369
369
  --wds-vertical-tabs-action-padding-horizontal-small: var(--wds-space-400);
370
370
  --wds-vertical-tabs-action-padding-horizontal-medium: var(--wds-space-400);
371
+ --wds-variable-input-padding-vertical-tiny: var(--wds-space-50);
372
+ --wds-variable-input-padding-vertical-small: var(--wds-space-100);
371
373
  --wds-tooltip-padding-vertical-small: var(--wds-space-100);
372
374
  --wds-tooltip-padding-vertical-medium: var(--wds-space-200);
373
375
  --wds-tooltip-padding-horizontal-small: var(--wds-space-200);
@@ -423,8 +425,11 @@
423
425
  --wds-toggle-button-border-radius-square-small: var(--wds-border-radius-200);
424
426
  --wds-toggle-button-border-radius-square-medium: var(--wds-border-radius-300);
425
427
  --wds-toggle-button-border-radius-square-large: var(--wds-border-radius-300);
428
+ --wds-toast-vertical-padding: var(--wds-space-150);
429
+ --wds-toast-horizontal-padding: var(--wds-space-200);
426
430
  --wds-thumbnail-title-padding-top: var(--wds-space-100);
427
431
  --wds-thumbnail-title-font-weight-tiny: var(--wds-font-weight-regular);
432
+ --wds-thumbnail-overlay-fill: var(--wds-color-black-100-transparent-0);
428
433
  --wds-thumbnail-illustration-fill-3: var(--wds-color-blue-500);
429
434
  --wds-thumbnail-illustration-fill-2: var(--wds-color-blue-100);
430
435
  --wds-thumbnail-illustration-fill-1: var(--wds-color-blue-250);
@@ -483,8 +488,6 @@
483
488
  --wds-swatches-list-gap: var(--wds-space-200);
484
489
  --wds-stepper-prefix-size-number: var(--wds-space-400);
485
490
  --wds-stepper-prefix-size-circle: var(--wds-space-500);
486
- --wds-status-toast-vertical-padding: var(--wds-space-150);
487
- --wds-status-toast-horizontal-padding: var(--wds-space-200);
488
491
  --wds-space-viewport-spacing: var(--wds-space-800);
489
492
  --wds-space-padding-vertical-xx-tiny: var(--wds-space-50);
490
493
  --wds-space-padding-vertical-x-tiny: var(--wds-space-100);
@@ -782,15 +785,19 @@
782
785
  --wds-list-item-select-padding-left-medium: var(--wds-space-300);
783
786
  --wds-list-item-select-padding-horizontal-small: var(--wds-space-300);
784
787
  --wds-list-item-select-padding-horizontal-medium: var(--wds-space-300);
785
- --wds-list-item-select-label-font-weight-small: var(--wds-font-weight-regular);
788
+ --wds-list-item-select-label-hover-font-weight-medium: var(--wds-font-weight-regular);
786
789
  --wds-list-item-select-label-font-weight-medium: var(--wds-font-weight-regular);
790
+ --wds-list-item-select-label-font-weight-active: var(--wds-font-weight-regular);
787
791
  --wds-list-item-select-icon-padding-vertical-small: var(--wds-space-100);
788
792
  --wds-list-item-select-icon-padding-vertical-medium: var(--wds-space-100);
789
793
  --wds-list-item-select-icon-padding-horizontal-small: var(--wds-space-200);
790
794
  --wds-list-item-select-icon-padding-horizontal-medium: var(--wds-space-200);
795
+ --wds-list-item-select-gap: var(--wds-space-0);
791
796
  --wds-list-item-select-border-radius: var(--wds-border-radius-0);
792
797
  --wds-list-item-select-affix-margin: var(--wds-space-100);
793
798
  --wds-list-item-section-padding-horizontal: var(--wds-space-400);
799
+ --wds-list-item-section-font-weight: var(--wds-font-weight-bold);
800
+ --wds-list-item-section-divider-padding-horizontal: var(--wds-space-400);
794
801
  --wds-list-item-padding-vertical-xx-tiny: var(--wds-space-50);
795
802
  --wds-list-item-padding-vertical-x-tiny: var(--wds-space-100);
796
803
  --wds-list-item-padding-vertical-tiny: var(--wds-space-200);
@@ -814,9 +821,9 @@
814
821
  --wds-list-item-action-padding-vertical-medium: var(--wds-space-100);
815
822
  --wds-list-item-action-padding-horizontal-small: var(--wds-space-300);
816
823
  --wds-list-item-action-padding-horizontal-medium: var(--wds-space-300);
817
- --wds-list-item-action-gap-small: var(--wds-space-100);
818
- --wds-list-item-action-gap-medium: var(--wds-space-100);
824
+ --wds-list-item-action-gap: var(--wds-space-0);
819
825
  --wds-list-item-action-border-radius: var(--wds-border-radius-0);
826
+ --wds-list-item-action-affix-margin: var(--wds-space-100);
820
827
  --wds-linear-progress-bar-border-radius: var(--wds-border-radius-full);
821
828
  --wds-internal-color-picker-padding-vertical: var(--wds-space-200);
822
829
  --wds-internal-color-picker-padding-horizontal: var(--wds-space-300);
@@ -905,6 +912,7 @@
905
912
  --wds-floating-helper-padding-vertical: var(--wds-space-500);
906
913
  --wds-floating-helper-padding-horizontal: var(--wds-space-600);
907
914
  --wds-floating-helper-main-action-padding-top: var(--wds-space-300);
915
+ --wds-fill-button-border-width: var(--wds-border-width-none);
908
916
  --wds-field-set-label-gap-tiny: var(--wds-space-100);
909
917
  --wds-field-set-label-gap-small: var(--wds-space-150);
910
918
  --wds-field-set-label-font-weight: var(--wds-font-weight-regular);
@@ -979,6 +987,10 @@
979
987
  --wds-color-gradient-light-right-to-left: linear-gradient(270deg, var(--wds-color-white) 0%, var(--wds-color-white-transparent-0) 100%);
980
988
  --wds-color-gradient-light-left-to-right: linear-gradient(90deg, var(--wds-color-white) 0%, var(--wds-color-white-transparent-0) 100%);
981
989
  --wds-color-gradient-light-bottom-to-top: linear-gradient(0deg, var(--wds-color-white) 0%, var(--wds-color-white-transparent-0) 100%);
990
+ --wds-color-fill-warning-tertiary-hover: var(--wds-color-yellow-500);
991
+ --wds-color-fill-warning-tertiary-disabled: var(--wds-color-white);
992
+ --wds-color-fill-warning-tertiary-active: var(--wds-color-yellow-400);
993
+ --wds-color-fill-warning-tertiary: var(--wds-color-white);
982
994
  --wds-color-fill-warning-secondary-hover: var(--wds-color-yellow-300);
983
995
  --wds-color-fill-warning-secondary-disabled: var(--wds-color-black-100-transparent-10);
984
996
  --wds-color-fill-warning-secondary-active: var(--wds-color-yellow-200);
@@ -1228,6 +1240,8 @@
1228
1240
  --wds-color-border-premium-primary-disabled: var(--wds-color-black-100-transparent-10);
1229
1241
  --wds-color-border-premium-primary-active: var(--wds-color-purple-100);
1230
1242
  --wds-color-border-premium-primary: var(--wds-color-purple-300);
1243
+ --wds-color-border-light-primary-disabled: var(--wds-color-white-transparent-30);
1244
+ --wds-color-border-light-primary-active: var(--wds-color-white);
1231
1245
  --wds-color-border-light-hover: var(--wds-color-white-transparent-70);
1232
1246
  --wds-color-border-light-disabled: var(--wds-color-white-transparent-30);
1233
1247
  --wds-color-border-light-active: var(--wds-color-white);
@@ -1274,6 +1288,8 @@
1274
1288
  --wds-card-gallery-item-padding-right-medium: var(--wds-space-400);
1275
1289
  --wds-card-gallery-item-padding-left-small: var(--wds-space-200);
1276
1290
  --wds-card-gallery-item-padding-left-medium: var(--wds-space-300);
1291
+ --wds-card-gallery-item-image-border-radius-top: var(--wds-border-radius-400);
1292
+ --wds-card-gallery-item-image-border-radius-bottom: var(--wds-border-radius-0);
1277
1293
  --wds-card-gallery-item-content-margin-vertical: var(--wds-space-0);
1278
1294
  --wds-card-gallery-item-border-radius-100: var(--wds-border-radius-400);
1279
1295
  --wds-card-gallery-item-border-radius-0: var(--wds-border-radius-0);
@@ -1361,7 +1377,10 @@
1361
1377
  --wds-add-item-padding-vertical-large: var(--wds-space-500);
1362
1378
  --wds-add-item-padding-horizontal-tiny: var(--wds-space-200);
1363
1379
  --wds-add-item-padding-horizontal-large: var(--wds-space-500);
1380
+ --wds-add-item-fill-disabled: var(--wds-color-black-100-transparent-5);
1381
+ --wds-add-item-fill: var(--wds-color-blue-600);
1364
1382
  --wds-add-item-border-radius: var(--wds-border-radius-400);
1383
+ --wds-add-item-border-dashed-radius: var(--wds-border-radius-100);
1365
1384
  --wds-accordion-title-font-weight-small: var(--wds-font-weight-medium);
1366
1385
  --wds-accordion-title-font-weight: var(--wds-font-weight-medium);
1367
1386
  --wds-accordion-inner-content-padding-top: var(--wds-space-250);
@@ -1586,7 +1605,6 @@
1586
1605
  --wds-loader-fill-light: var(--wds-color-fill-light-primary);
1587
1606
  --wds-loader-fill-error: var(--wds-color-fill-destructive-primary);
1588
1607
  --wds-loader-fill: var(--wds-color-fill-standard-secondary);
1589
- --wds-list-item-select-title-pressed: var(--wds-color-text-standard-primary);
1590
1608
  --wds-list-item-select-title-disabled: var(--wds-color-text-disabled);
1591
1609
  --wds-list-item-select-title: var(--wds-color-text-standard-primary);
1592
1610
  --wds-list-item-select-suffix-pressed: var(--wds-color-text-placeholder);
@@ -1614,6 +1632,7 @@
1614
1632
  --wds-list-item-select-active-fill-active-screen-small: var(--wds-color-fill-standard-tertiary-active);
1615
1633
  --wds-list-item-select-active-fill-active: var(--wds-color-fill-standard-primary-active);
1616
1634
  --wds-list-item-select-active-fill: var(--wds-color-fill-standard-primary);
1635
+ --wds-list-item-section-title-label-fill: var(--wds-color-text-placeholder);
1617
1636
  --wds-list-item-section-font-size: var(--wds-font-size-body-small);
1618
1637
  --wds-list-item-section-fill: var(--wds-color-fill-standard-tertiary);
1619
1638
  --wds-list-item-action-suffix-fill-active: var(--wds-color-text-placeholder);
@@ -1770,11 +1789,16 @@
1770
1789
  --wds-font-line-height-body-small: var(--wds-font-line-height-200);
1771
1790
  --wds-font-line-height-body-medium: var(--wds-font-line-height-300);
1772
1791
  --wds-font-line-height-body-extra-tiny: var(--wds-font-line-height-100);
1792
+ --wds-fill-button-icon-color: var(--wds-color-text-primary);
1793
+ --wds-fill-button-fill-hover: var(--wds-color-fill-standard-secondary-hover);
1794
+ --wds-fill-button-fill: var(--wds-color-fill-standard-secondary);
1795
+ --wds-fill-button-border-color: var(--wds-color-border-standard-secondary);
1773
1796
  --wds-field-set-label-font-size-tiny: var(--wds-font-size-body-tiny);
1774
1797
  --wds-field-set-label-font-size-small: var(--wds-font-size-body-small);
1775
1798
  --wds-field-set-label-fill: var(--wds-color-text-standard-secondary);
1776
1799
  --wds-dropdown-icon-fill-disabled: var(--wds-color-text-disabled);
1777
1800
  --wds-dropdown-icon-fill: var(--wds-color-text-primary);
1801
+ --wds-drag-handle-fill: var(--wds-color-text-primary);
1778
1802
  --wds-dock-foreground-fill-hover: var(--wds-color-fill-standard-secondary-active);
1779
1803
  --wds-dock-foreground-fill-disabled: var(--wds-color-fill-standard-primary-disabled);
1780
1804
  --wds-dock-foreground-fill-active: var(--wds-color-fill-standard-primary);
@@ -1826,6 +1850,7 @@
1826
1850
  --wds-checkbox-border-active: var(--wds-color-border-standard-secondary-active);
1827
1851
  --wds-checkbox-border: var(--wds-color-border-standard-secondary-active);
1828
1852
  --wds-card-gallery-item-title-font-size-medium: var(--wds-font-size-heading-4);
1853
+ --wds-card-gallery-item-subtitle-font-size-medium: var(--wds-font-size-body-small);
1829
1854
  --wds-card-gallery-item-overlay-fill: var(--wds-color-fill-transparent-primary);
1830
1855
  --wds-card-gallery-item-fill: var(--wds-color-fill-surface-default);
1831
1856
  --wds-button-text-hover: var(--wds-color-text-standard-primary-light);
@@ -1895,10 +1920,40 @@
1895
1920
  --wds-button-border-dark-secondary-disabled: var(--wds-color-border-premium-secondary-disabled);
1896
1921
  --wds-button-border-dark-secondary-active: var(--wds-color-fill-dark-primary);
1897
1922
  --wds-button-border-dark-secondary: var(--wds-color-border-dark-primary);
1923
+ --wds-badge-outline-warning-label-color: var(--wds-color-text-warning);
1924
+ --wds-badge-outline-warning-fill: var(--wds-color-fill-warning-tertiary);
1925
+ --wds-badge-outline-warning-border-color: var(--wds-color-border-warning-primary);
1926
+ --wds-badge-outline-urgent-label-color: var(--wds-color-text-urgent);
1927
+ --wds-badge-outline-urgent-fill: var(--wds-color-fill-urgent-tertiary);
1928
+ --wds-badge-outline-urgent-border-color: var(--wds-color-border-urgent-primary);
1929
+ --wds-badge-outline-success-label-color: var(--wds-color-text-success);
1930
+ --wds-badge-outline-success-fill: var(--wds-color-fill-success-tertiary);
1931
+ --wds-badge-outline-success-border-color: var(--wds-color-border-success-primary);
1932
+ --wds-badge-outline-standard-label-color: var(--wds-color-text-primary);
1933
+ --wds-badge-outline-standard-fill: var(--wds-color-fill-standard-tertiary);
1934
+ --wds-badge-outline-standard-border-color: var(--wds-color-border-standard-primary);
1935
+ --wds-badge-outline-premium-label-color: var(--wds-color-text-premium);
1936
+ --wds-badge-outline-premium-fill: var(--wds-color-fill-premium-tertiary);
1937
+ --wds-badge-outline-premium-border-color: var(--wds-color-border-premium-primary);
1938
+ --wds-badge-outline-neutral-label-color: var(--wds-color-text-standard-secondary-light);
1939
+ --wds-badge-outline-neutral-fill: var(--wds-color-fill-dark-tertiary);
1940
+ --wds-badge-outline-neutral-border-color: var(--wds-color-border-dark-primary);
1941
+ --wds-badge-outline-destructive-label-color: var(--wds-color-text-destructive);
1942
+ --wds-badge-outline-destructive-fill: var(--wds-color-fill-destructive-tertiary);
1943
+ --wds-badge-outline-destructive-border-color: var(--wds-color-border-destructive-primary);
1944
+ --wds-badge-outline-dark-label-color: var(--wds-color-text-standard-secondary);
1945
+ --wds-badge-outline-dark-fill: var(--wds-color-fill-dark-tertiary);
1946
+ --wds-badge-outline-dark-border-color: var(--wds-color-border-dark-primary);
1947
+ --wds-badge-label-font-size-small: var(--wds-font-size-body-small);
1898
1948
  --wds-announcement-modal-title-font-size: var(--wds-font-size-heading-1);
1899
1949
  --wds-announcement-modal-text-font-size: var(--wds-font-size-body-medium);
1900
1950
  --wds-add-item-title-font-size-small: var(--wds-font-size-body-small);
1901
1951
  --wds-add-item-title-font-size-medium: var(--wds-font-size-body-medium);
1952
+ --wds-add-item-label-color: var(--wds-color-text-primary);
1953
+ --wds-add-item-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
1954
+ --wds-add-item-border-color-hover: var(--wds-color-border-standard-primary-hover);
1955
+ --wds-add-item-border-color-disabled: var(--wds-color-border-standard-primary-disabled);
1956
+ --wds-add-item-border-color: var(--wds-color-border-standard-primary);
1902
1957
  --wds-accordion-title-font-size-small: var(--wds-font-size-body-small);
1903
1958
  --wds-accordion-title-font-size-medium: var(--wds-font-size-body-medium);
1904
1959
  --wds-accordion-title-fill-hover: var(--wds-color-text-standard-primary);
@@ -1928,7 +1983,7 @@
1928
1983
  --wds-list-item-select-subtitle-font-line-height-medium: var(--wds-font-line-height-body-small);
1929
1984
  --wds-list-item-select-label-font-line-height-small: var(--wds-font-line-height-body-small);
1930
1985
  --wds-list-item-select-label-font-line-height-medium: var(--wds-font-line-height-body-medium);
1931
- --wds-list-item-section-line-height: var(--wds-font-line-height-body-small);
1986
+ --wds-list-item-section-font-line-height: var(--wds-font-line-height-body-small);
1932
1987
  --wds-list-item-action-subtitle-font-line-height: var(--wds-font-line-height-body-small);
1933
1988
  --wds-list-item-action-label-font-line-height-small: var(--wds-font-line-height-body-small);
1934
1989
  --wds-list-item-action-label-font-line-height-medium: var(--wds-font-line-height-body-medium);
@@ -1945,11 +2000,14 @@
1945
2000
  --wds-custom-modal-footnote-text-font-line-height: var(--wds-font-line-height-body-small);
1946
2001
  --wds-checkbox-label-font-line-height-small: var(--wds-font-line-height-body-small);
1947
2002
  --wds-checkbox-label-font-line-height-medium: var(--wds-font-line-height-body-medium);
2003
+ --wds-card-gallery-item-title-font-line-height-small: var(--wds-font-line-height-body-small);
2004
+ --wds-card-gallery-item-title-font-line-height-medium: var(--wds-font-line-height-heading-4);
1948
2005
  --wds-button-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
1949
2006
  --wds-button-font-line-height-small: var(--wds-font-line-height-body-small);
1950
2007
  --wds-button-font-line-height-medium: var(--wds-font-line-height-body-medium);
1951
2008
  --wds-button-font-line-height-large: var(--wds-font-line-height-body-medium);
1952
2009
  --wds-button-font-line-height-extra-large: var(--wds-font-line-height-body-medium);
2010
+ --wds-badge-label-font-line-height-small: var(--wds-font-line-height-body-small);
1953
2011
  --wds-announcement-modal-title-font-line-height: var(--wds-font-line-height-heading-1);
1954
2012
  --wds-announcement-modal-text-font-line-height: var(--wds-font-line-height-heading-1);
1955
2013
  --wds-add-item-title-font-line-height-tiny: var(--wds-font-line-height-body-small);