@wix/design-system-tokens 1.132.0 → 1.134.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (26) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/all.css +17 -10
  3. package/all.scss +17 -10
  4. package/all.st.css +34 -20
  5. package/component.st.css +30 -2
  6. package/foundation.st.css +4 -2
  7. package/odeditor/all.css +31 -30
  8. package/odeditor/all.scss +30 -29
  9. package/odeditor/all.st.css +42 -40
  10. package/odeditor/component.st.css +28 -12
  11. package/odeditor/foundation.st.css +11 -9
  12. package/odeditor/semantic.st.css +3 -19
  13. package/package.json +2 -2
  14. package/semantic.st.css +0 -16
  15. package/studio/all.css +17 -10
  16. package/studio/all.scss +17 -10
  17. package/studio/all.st.css +34 -20
  18. package/studio/component.st.css +30 -2
  19. package/studio/foundation.st.css +4 -2
  20. package/studio/semantic.st.css +0 -16
  21. package/wixel/all.css +11 -9
  22. package/wixel/all.scss +11 -9
  23. package/wixel/all.st.css +22 -18
  24. package/wixel/component.st.css +18 -0
  25. package/wixel/foundation.st.css +4 -2
  26. package/wixel/semantic.st.css +0 -16
package/CHANGELOG.md CHANGED
@@ -1,3 +1,18 @@
1
+ ## 1.134.0 - 2025-09-29
2
+
3
+ ### Visual Breaking Changes
4
+
5
+ - breaking(AnnouncementModal): border-radius and backdrop blur adjustments [15332](https://github.com/wix-private/wix-design-systems/pull/15332)
6
+ - breaking(Carousel): dots & shadows for E3 [15320](https://github.com/wix-private/wix-design-systems/pull/15320)
7
+ - breaking(FillPreview): e3 tokenization [15244](https://github.com/wix-private/wix-design-systems/pull/15244)
8
+ - breaking(SidePanel): floating skin title in madefor display [15305](https://github.com/wix-private/wix-design-systems/pull/15305)
9
+
10
+ ## 1.133.0 - 2025-09-12
11
+
12
+ ### Visual Breaking Changes
13
+
14
+ - breaking(CircularProgressBar): e3 tokenization [15265](https://github.com/wix-private/wix-design-systems/pull/15265)
15
+
1
16
  ## 1.132.0 - 2025-09-09
2
17
 
3
18
  ### Features
package/all.css CHANGED
@@ -82,12 +82,6 @@
82
82
  --wds-color-fill-stage-padding-active: #18d9c2;
83
83
  --wds-color-fill-stage-padding: #18d9c2;
84
84
  --wds-color-fill-stage-master-primary-hover: #bf5727;
85
- --wds-color-fill-stage-interactions-hover: #ff5c9f;
86
- --wds-color-fill-stage-interactions-active: #ff5c9f;
87
- --wds-color-fill-stage-interactions: #ff5c9f;
88
- --wds-color-fill-stage-cms-hover: #2d3034;
89
- --wds-color-fill-stage-cms-active: #2d3034;
90
- --wds-color-fill-stage-cms: #2d3034;
91
85
  --wds-color-fill-stage-anchor-hover: #18d2de;
92
86
  --wds-color-fill-stage-anchor-active: #5effff;
93
87
  --wds-color-fill-stage-anchor: #5effff;
@@ -243,6 +237,7 @@
243
237
  --wds-border-width-150: 1.5px;
244
238
  --wds-border-width-100: 1px;
245
239
  --wds-border-radius-full: 1000px;
240
+ --wds-border-radius-1200: 24px;
246
241
  --wds-border-radius-600: 12px;
247
242
  --wds-border-radius-500: 10px;
248
243
  --wds-border-radius-400: 8px;
@@ -256,8 +251,8 @@
256
251
  --wds-background-blur-250: 0px;
257
252
  --wds-background-blur-200: 0px;
258
253
  --wds-background-blur-150: 0px;
254
+ --wds-background-blur-100: 0px;
259
255
  --wds-background-blur-50: 0px;
260
- --wds-background-blur-10: 0px;
261
256
  --wds-background-blur-0: 0px;
262
257
  --wds-toggle-switch-width-small: 28px;
263
258
  --wds-toggle-switch-width-medium: 34px;
@@ -317,6 +312,7 @@
317
312
  --wds-composer-sidebar-end-max-width: 240px;
318
313
  --wds-composer-sidebar-bottom-width: 90px;
319
314
  --wds-color-picker-width: 240px;
315
+ --wds-circular-progress-bar-border-width: 4px;
320
316
  --wds-checkbox-size: 16px;
321
317
  --wds-button-outline-hover: transparent;
322
318
  --wds-button-icon-offset-tiny: 12px;
@@ -588,7 +584,6 @@
588
584
  --wds-color-fill-stage-master-primary-disabled: var(--wds-color-black-100-transparent-30);
589
585
  --wds-color-fill-stage-master-primary-active: var(--wds-color-orange-100);
590
586
  --wds-color-fill-stage-master-primary: var(--wds-color-orange-100);
591
- --wds-color-fill-stage-interactions-disabled: var(--wds-color-black-100-transparent-30);
592
587
  --wds-color-fill-stage-element-secondary-hover: var(--wds-color-blue-300);
593
588
  --wds-color-fill-stage-element-secondary-disabled: var(--wds-color-black-100-transparent-10);
594
589
  --wds-color-fill-stage-element-secondary-active: var(--wds-color-blue-200);
@@ -597,7 +592,6 @@
597
592
  --wds-color-fill-stage-element-primary-disabled: var(--wds-color-black-100-transparent-30);
598
593
  --wds-color-fill-stage-element-primary-active: var(--wds-color-blue-0);
599
594
  --wds-color-fill-stage-element-primary: var(--wds-color-blue-100);
600
- --wds-color-fill-stage-cms-disabled: var(--wds-color-black-100-transparent-30);
601
595
  --wds-color-fill-stage-anchor-disabled: var(--wds-color-black-100-transparent-30);
602
596
  --wds-color-fill-social-youtube-disabled: var(--wds-color-black-100-transparent-30);
603
597
  --wds-color-fill-social-xcorp-disabled: var(--wds-color-black-100-transparent-30);
@@ -911,7 +905,6 @@
911
905
  --wds-table-list-item-gap: var(--wds-space-400);
912
906
  --wds-table-list-item-border-radius: var(--wds-border-radius-0);
913
907
  --wds-table-toolbar-padding-horizontal: var(--wds-space-400);
914
- --wds-swatches-swatch-size-x-tiny: var(--wds-space-300);
915
908
  --wds-swatches-swatch-size-tiny: var(--wds-space-400);
916
909
  --wds-swatches-swatch-size-small: var(--wds-space-500);
917
910
  --wds-swatches-swatch-size-medium: var(--wds-space-600);
@@ -922,6 +915,7 @@
922
915
  --wds-swatches-list-padding-vertical: var(--wds-space-200);
923
916
  --wds-swatches-list-padding-horizontal: var(--wds-space-300);
924
917
  --wds-swatches-list-gap: var(--wds-space-200);
918
+ --wds-swatches-fill-border-disabled: var(--wds-color-black-100-transparent-0);
925
919
  --wds-stepper-prefix-size-number: var(--wds-space-400);
926
920
  --wds-stepper-prefix-size-circle: var(--wds-space-500);
927
921
  --wds-social-preview-content-padding-vertical: var(--wds-space-150);
@@ -990,6 +984,7 @@
990
984
  --wds-side-panel-footer-padding-horizontal: var(--wds-space-400);
991
985
  --wds-side-panel-footer-divider-height: var(--wds-border-width-100);
992
986
  --wds-side-panel-footer-border-width: var(--wds-border-width-none);
987
+ --wds-side-panel-floating-title-font-family: var(--wds-font-family-default);
993
988
  --wds-side-panel-floating-header-padding-vertical: var(--wds-space-200);
994
989
  --wds-side-panel-floating-header-padding-right: var(--wds-space-150);
995
990
  --wds-side-panel-floating-header-padding-left: var(--wds-space-400);
@@ -1288,9 +1283,14 @@
1288
1283
  --wds-circular-progress-bar-size-small: var(--wds-space-500);
1289
1284
  --wds-circular-progress-bar-size-medium: var(--wds-space-900);
1290
1285
  --wds-circular-progress-bar-size-large: var(--wds-space-1700);
1286
+ --wds-circular-progress-bar-label-padding-medium: var(--wds-space-0);
1287
+ --wds-circular-progress-bar-label-padding-large: var(--wds-space-0);
1288
+ --wds-circular-progress-bar-label-font-weight: var(--wds-font-weight-bold);
1289
+ --wds-circular-progress-bar-label-font-size: var(--wds-font-size-100);
1291
1290
  --wds-checkbox-group-gap-vertical: var(--wds-space-200);
1292
1291
  --wds-checkbox-border-radius: var(--wds-border-radius-200);
1293
1292
  --wds-checkbox-border-active-hover: var(--wds-color-black-100-transparent-0);
1293
+ --wds-carousel-dots-width: var(--wds-space-200);
1294
1294
  --wds-card-gallery-item-padding-vertical-small: var(--wds-space-200);
1295
1295
  --wds-card-gallery-item-padding-vertical-medium: var(--wds-space-300);
1296
1296
  --wds-card-gallery-item-padding-right-small: var(--wds-space-300);
@@ -1545,6 +1545,10 @@
1545
1545
  --wds-table-list-item-fill: var(--wds-color-fill-standard-tertiary);
1546
1546
  --wds-table-list-item-drag-handle-color: var(--wds-color-text-primary);
1547
1547
  --wds-table-list-item-border-color: var(--wds-color-border-standard-secondary);
1548
+ --wds-swatches-fill-disabled: var(--wds-color-fill-standard-secondary-disabled);
1549
+ --wds-swatches-fill-border-selected: var(--wds-color-border-standard-secondary-active);
1550
+ --wds-swatches-fill-border-no-value-dash: var(--wds-color-fill-destructive-primary);
1551
+ --wds-swatches-fill-border-no-value: var(--wds-color-border-standard-secondary);
1548
1552
  --wds-status-toast-text-font-size: var(--wds-font-size-body-medium);
1549
1553
  --wds-status-toast-text-fill: var(--wds-color-text-standard-primary-light);
1550
1554
  --wds-status-toast-info-icon-fill: var(--wds-color-text-standard-primary-light);
@@ -1839,6 +1843,7 @@
1839
1843
  --wds-clickable-card-filled-fill-disabled: var(--wds-color-fill-light-primary-disabled);
1840
1844
  --wds-clickable-card-filled-fill-active: var(--wds-color-fill-light-primary-active);
1841
1845
  --wds-clickable-card-filled-fill: var(--wds-color-fill-light-primary);
1846
+ --wds-circular-progress-bar-label-font-line-height: var(--wds-font-line-height-200);
1842
1847
  --wds-circular-progress-bar-foreground-fill-success: var(--wds-color-fill-success-primary);
1843
1848
  --wds-circular-progress-bar-foreground-fill-standard: var(--wds-color-fill-standard-primary);
1844
1849
  --wds-circular-progress-bar-foreground-fill-premium: var(--wds-color-fill-premium-primary);
@@ -1863,6 +1868,7 @@
1863
1868
  --wds-checkbox-border-active-disabled: var(--wds-color-border-standard-secondary-disabled);
1864
1869
  --wds-checkbox-border-active: var(--wds-color-border-standard-secondary-active);
1865
1870
  --wds-checkbox-border: var(--wds-color-border-standard-secondary-active);
1871
+ --wds-carousel-controls-shadow: var(--wds-shadow-300);
1866
1872
  --wds-card-gallery-item-title-font-size-medium: var(--wds-font-size-heading-4);
1867
1873
  --wds-card-gallery-item-subtitle-font-size-medium: var(--wds-font-size-body-small);
1868
1874
  --wds-card-gallery-item-overlay-fill: var(--wds-color-fill-transparent-primary);
@@ -1961,6 +1967,7 @@
1961
1967
  --wds-badge-label-font-size-small: var(--wds-font-size-body-small);
1962
1968
  --wds-announcement-modal-title-font-size: var(--wds-font-size-heading-1);
1963
1969
  --wds-announcement-modal-text-font-size: var(--wds-font-size-body-medium);
1970
+ --wds-announcement-modal-border-radius: var(--wds-border-radius-surface-modal);
1964
1971
  --wds-add-item-title-font-size-small: var(--wds-font-size-body-small);
1965
1972
  --wds-add-item-title-font-size-medium: var(--wds-font-size-body-medium);
1966
1973
  --wds-add-item-label-color: var(--wds-color-text-primary);
package/all.scss CHANGED
@@ -201,12 +201,6 @@
201
201
  --wds-color-fill-stage-padding-active: #18d9c2;
202
202
  --wds-color-fill-stage-padding: #18d9c2;
203
203
  --wds-color-fill-stage-master-primary-hover: #bf5727;
204
- --wds-color-fill-stage-interactions-hover: #ff5c9f;
205
- --wds-color-fill-stage-interactions-active: #ff5c9f;
206
- --wds-color-fill-stage-interactions: #ff5c9f;
207
- --wds-color-fill-stage-cms-hover: #2d3034;
208
- --wds-color-fill-stage-cms-active: #2d3034;
209
- --wds-color-fill-stage-cms: #2d3034;
210
204
  --wds-color-fill-stage-anchor-hover: #18d2de;
211
205
  --wds-color-fill-stage-anchor-active: #5effff;
212
206
  --wds-color-fill-stage-anchor: #5effff;
@@ -292,6 +286,7 @@
292
286
  --wds-color-black-100-transparent-5: rgba(0, 6, 36, .05);
293
287
  --wds-color-black-100-transparent-0: rgba(0, 6, 36, 0);
294
288
  --wds-color-black-100: #000624;
289
+ --wds-circular-progress-bar-border-width: 4px;
295
290
  --wds-checkbox-size: 16px;
296
291
  --wds-button-outline-hover: transparent;
297
292
  --wds-button-icon-offset-tiny: 12px;
@@ -307,6 +302,7 @@
307
302
  --wds-border-width-150: 1.5px;
308
303
  --wds-border-width-100: 1px;
309
304
  --wds-border-radius-full: 1000px;
305
+ --wds-border-radius-1200: 24px;
310
306
  --wds-border-radius-600: 12px;
311
307
  --wds-border-radius-500: 10px;
312
308
  --wds-border-radius-400: 8px;
@@ -320,8 +316,8 @@
320
316
  --wds-background-blur-250: 0px;
321
317
  --wds-background-blur-200: 0px;
322
318
  --wds-background-blur-150: 0px;
319
+ --wds-background-blur-100: 0px;
323
320
  --wds-background-blur-50: 0px;
324
- --wds-background-blur-10: 0px;
325
321
  --wds-background-blur-0: 0px;
326
322
  --wds-avatar-group-gap-condensed: -3px;
327
323
  --wds-width-default-2: var(--wds-border-width-100);
@@ -475,7 +471,6 @@
475
471
  --wds-table-list-item-indentation-level-2: var(--wds-space-200);
476
472
  --wds-table-list-item-gap: var(--wds-space-400);
477
473
  --wds-table-list-item-border-radius: var(--wds-border-radius-0);
478
- --wds-swatches-swatch-size-x-tiny: var(--wds-space-300);
479
474
  --wds-swatches-swatch-size-tiny: var(--wds-space-400);
480
475
  --wds-swatches-swatch-size-small: var(--wds-space-500);
481
476
  --wds-swatches-swatch-size-medium: var(--wds-space-600);
@@ -486,6 +481,7 @@
486
481
  --wds-swatches-list-padding-vertical: var(--wds-space-200);
487
482
  --wds-swatches-list-padding-horizontal: var(--wds-space-300);
488
483
  --wds-swatches-list-gap: var(--wds-space-200);
484
+ --wds-swatches-fill-border-disabled: var(--wds-color-black-100-transparent-0);
489
485
  --wds-stepper-prefix-size-number: var(--wds-space-400);
490
486
  --wds-stepper-prefix-size-circle: var(--wds-space-500);
491
487
  --wds-space-viewport-spacing: var(--wds-space-800);
@@ -568,6 +564,7 @@
568
564
  --wds-side-panel-footer-padding-horizontal: var(--wds-space-400);
569
565
  --wds-side-panel-footer-divider-height: var(--wds-border-width-100);
570
566
  --wds-side-panel-footer-border-width: var(--wds-border-width-none);
567
+ --wds-side-panel-floating-title-font-family: var(--wds-font-family-default);
571
568
  --wds-side-panel-floating-header-padding-vertical: var(--wds-space-200);
572
569
  --wds-side-panel-floating-header-padding-right: var(--wds-space-150);
573
570
  --wds-side-panel-floating-header-padding-left: var(--wds-space-400);
@@ -1099,7 +1096,6 @@
1099
1096
  --wds-color-fill-stage-master-primary-disabled: var(--wds-color-black-100-transparent-30);
1100
1097
  --wds-color-fill-stage-master-primary-active: var(--wds-color-orange-100);
1101
1098
  --wds-color-fill-stage-master-primary: var(--wds-color-orange-100);
1102
- --wds-color-fill-stage-interactions-disabled: var(--wds-color-black-100-transparent-30);
1103
1099
  --wds-color-fill-stage-element-secondary-hover: var(--wds-color-blue-300);
1104
1100
  --wds-color-fill-stage-element-secondary-disabled: var(--wds-color-black-100-transparent-10);
1105
1101
  --wds-color-fill-stage-element-secondary-active: var(--wds-color-blue-200);
@@ -1108,7 +1104,6 @@
1108
1104
  --wds-color-fill-stage-element-primary-disabled: var(--wds-color-black-100-transparent-30);
1109
1105
  --wds-color-fill-stage-element-primary-active: var(--wds-color-blue-0);
1110
1106
  --wds-color-fill-stage-element-primary: var(--wds-color-blue-100);
1111
- --wds-color-fill-stage-cms-disabled: var(--wds-color-black-100-transparent-30);
1112
1107
  --wds-color-fill-stage-anchor-disabled: var(--wds-color-black-100-transparent-30);
1113
1108
  --wds-color-fill-social-youtube-disabled: var(--wds-color-black-100-transparent-30);
1114
1109
  --wds-color-fill-social-xcorp-disabled: var(--wds-color-black-100-transparent-30);
@@ -1280,9 +1275,14 @@
1280
1275
  --wds-circular-progress-bar-size-small: var(--wds-space-500);
1281
1276
  --wds-circular-progress-bar-size-medium: var(--wds-space-900);
1282
1277
  --wds-circular-progress-bar-size-large: var(--wds-space-1700);
1278
+ --wds-circular-progress-bar-label-padding-medium: var(--wds-space-0);
1279
+ --wds-circular-progress-bar-label-padding-large: var(--wds-space-0);
1280
+ --wds-circular-progress-bar-label-font-weight: var(--wds-font-weight-bold);
1281
+ --wds-circular-progress-bar-label-font-size: var(--wds-font-size-100);
1283
1282
  --wds-checkbox-group-gap-vertical: var(--wds-space-200);
1284
1283
  --wds-checkbox-border-radius: var(--wds-border-radius-200);
1285
1284
  --wds-checkbox-border-active-hover: var(--wds-color-black-100-transparent-0);
1285
+ --wds-carousel-dots-width: var(--wds-space-200);
1286
1286
  --wds-card-tab-padding-vertical-small: var(--wds-space-300);
1287
1287
  --wds-card-tab-padding-vertical-medium: var(--wds-space-300);
1288
1288
  --wds-card-tab-padding-horizontal-small: var(--wds-space-300);
@@ -1527,6 +1527,10 @@
1527
1527
  --wds-table-list-item-fill: var(--wds-color-fill-standard-tertiary);
1528
1528
  --wds-table-list-item-drag-handle-color: var(--wds-color-text-primary);
1529
1529
  --wds-table-list-item-border-color: var(--wds-color-border-standard-secondary);
1530
+ --wds-swatches-fill-disabled: var(--wds-color-fill-standard-secondary-disabled);
1531
+ --wds-swatches-fill-border-selected: var(--wds-color-border-standard-secondary-active);
1532
+ --wds-swatches-fill-border-no-value-dash: var(--wds-color-fill-destructive-primary);
1533
+ --wds-swatches-fill-border-no-value: var(--wds-color-border-standard-secondary);
1530
1534
  --wds-status-toast-text-font-size: var(--wds-font-size-body-medium);
1531
1535
  --wds-status-toast-text-fill: var(--wds-color-text-standard-primary-light);
1532
1536
  --wds-status-toast-info-icon-fill: var(--wds-color-text-standard-primary-light);
@@ -1839,6 +1843,7 @@
1839
1843
  --wds-clickable-card-filled-fill-disabled: var(--wds-color-fill-light-primary-disabled);
1840
1844
  --wds-clickable-card-filled-fill-active: var(--wds-color-fill-light-primary-active);
1841
1845
  --wds-clickable-card-filled-fill: var(--wds-color-fill-light-primary);
1846
+ --wds-circular-progress-bar-label-font-line-height: var(--wds-font-line-height-200);
1842
1847
  --wds-circular-progress-bar-foreground-fill-success: var(--wds-color-fill-success-primary);
1843
1848
  --wds-circular-progress-bar-foreground-fill-standard: var(--wds-color-fill-standard-primary);
1844
1849
  --wds-circular-progress-bar-foreground-fill-premium: var(--wds-color-fill-premium-primary);
@@ -1863,6 +1868,7 @@
1863
1868
  --wds-checkbox-border-active-disabled: var(--wds-color-border-standard-secondary-disabled);
1864
1869
  --wds-checkbox-border-active: var(--wds-color-border-standard-secondary-active);
1865
1870
  --wds-checkbox-border: var(--wds-color-border-standard-secondary-active);
1871
+ --wds-carousel-controls-shadow: var(--wds-shadow-300);
1866
1872
  --wds-card-gallery-item-title-font-size-medium: var(--wds-font-size-heading-4);
1867
1873
  --wds-card-gallery-item-subtitle-font-size-medium: var(--wds-font-size-body-small);
1868
1874
  --wds-card-gallery-item-overlay-fill: var(--wds-color-fill-transparent-primary);
@@ -1961,6 +1967,7 @@
1961
1967
  --wds-badge-label-font-size-small: var(--wds-font-size-body-small);
1962
1968
  --wds-announcement-modal-title-font-size: var(--wds-font-size-heading-1);
1963
1969
  --wds-announcement-modal-text-font-size: var(--wds-font-size-body-medium);
1970
+ --wds-announcement-modal-border-radius: var(--wds-border-radius-surface-modal);
1964
1971
  --wds-add-item-title-font-size-small: var(--wds-font-size-body-small);
1965
1972
  --wds-add-item-title-font-size-medium: var(--wds-font-size-body-medium);
1966
1973
  --wds-add-item-label-color: var(--wds-color-text-primary);
package/all.st.css CHANGED
@@ -36,6 +36,7 @@
36
36
  @property st-global(--wds-add-item-title-font-size-medium);
37
37
  @property st-global(--wds-add-item-title-font-size-small);
38
38
  @property st-global(--wds-announcement-modal-actions-padding);
39
+ @property st-global(--wds-announcement-modal-border-radius);
39
40
  @property st-global(--wds-announcement-modal-content-gap);
40
41
  @property st-global(--wds-announcement-modal-padding-horizontal);
41
42
  @property st-global(--wds-announcement-modal-padding-vertical);
@@ -46,8 +47,8 @@
46
47
  @property st-global(--wds-avatar-group-gap-condensed);
47
48
  @property st-global(--wds-avatar-group-gap-default);
48
49
  @property st-global(--wds-background-blur-0);
49
- @property st-global(--wds-background-blur-10);
50
50
  @property st-global(--wds-background-blur-50);
51
+ @property st-global(--wds-background-blur-100);
51
52
  @property st-global(--wds-background-blur-150);
52
53
  @property st-global(--wds-background-blur-200);
53
54
  @property st-global(--wds-background-blur-250);
@@ -100,6 +101,7 @@
100
101
  @property st-global(--wds-border-radius-400);
101
102
  @property st-global(--wds-border-radius-500);
102
103
  @property st-global(--wds-border-radius-600);
104
+ @property st-global(--wds-border-radius-1200);
103
105
  @property st-global(--wds-border-radius-full);
104
106
  @property st-global(--wds-border-radius-surface-default);
105
107
  @property st-global(--wds-border-radius-surface-modal);
@@ -269,6 +271,8 @@
269
271
  @property st-global(--wds-card-tab-padding-horizontal-small);
270
272
  @property st-global(--wds-card-tab-padding-vertical-medium);
271
273
  @property st-global(--wds-card-tab-padding-vertical-small);
274
+ @property st-global(--wds-carousel-controls-shadow);
275
+ @property st-global(--wds-carousel-dots-width);
272
276
  @property st-global(--wds-checkbox-border);
273
277
  @property st-global(--wds-checkbox-border-active);
274
278
  @property st-global(--wds-checkbox-border-active-disabled);
@@ -295,10 +299,16 @@
295
299
  @property st-global(--wds-circular-progress-bar-background-fill-premium);
296
300
  @property st-global(--wds-circular-progress-bar-background-fill-standard);
297
301
  @property st-global(--wds-circular-progress-bar-background-fill-success);
302
+ @property st-global(--wds-circular-progress-bar-border-width);
298
303
  @property st-global(--wds-circular-progress-bar-foreground-fill-error);
299
304
  @property st-global(--wds-circular-progress-bar-foreground-fill-premium);
300
305
  @property st-global(--wds-circular-progress-bar-foreground-fill-standard);
301
306
  @property st-global(--wds-circular-progress-bar-foreground-fill-success);
307
+ @property st-global(--wds-circular-progress-bar-label-font-line-height);
308
+ @property st-global(--wds-circular-progress-bar-label-font-size);
309
+ @property st-global(--wds-circular-progress-bar-label-font-weight);
310
+ @property st-global(--wds-circular-progress-bar-label-padding-large);
311
+ @property st-global(--wds-circular-progress-bar-label-padding-medium);
302
312
  @property st-global(--wds-circular-progress-bar-size-large);
303
313
  @property st-global(--wds-circular-progress-bar-size-medium);
304
314
  @property st-global(--wds-circular-progress-bar-size-small);
@@ -570,10 +580,6 @@
570
580
  @property st-global(--wds-color-fill-stage-anchor-active);
571
581
  @property st-global(--wds-color-fill-stage-anchor-disabled);
572
582
  @property st-global(--wds-color-fill-stage-anchor-hover);
573
- @property st-global(--wds-color-fill-stage-cms);
574
- @property st-global(--wds-color-fill-stage-cms-active);
575
- @property st-global(--wds-color-fill-stage-cms-disabled);
576
- @property st-global(--wds-color-fill-stage-cms-hover);
577
583
  @property st-global(--wds-color-fill-stage-element-primary);
578
584
  @property st-global(--wds-color-fill-stage-element-primary-active);
579
585
  @property st-global(--wds-color-fill-stage-element-primary-disabled);
@@ -582,10 +588,6 @@
582
588
  @property st-global(--wds-color-fill-stage-element-secondary-active);
583
589
  @property st-global(--wds-color-fill-stage-element-secondary-disabled);
584
590
  @property st-global(--wds-color-fill-stage-element-secondary-hover);
585
- @property st-global(--wds-color-fill-stage-interactions);
586
- @property st-global(--wds-color-fill-stage-interactions-active);
587
- @property st-global(--wds-color-fill-stage-interactions-disabled);
588
- @property st-global(--wds-color-fill-stage-interactions-hover);
589
591
  @property st-global(--wds-color-fill-stage-master-primary);
590
592
  @property st-global(--wds-color-fill-stage-master-primary-active);
591
593
  @property st-global(--wds-color-fill-stage-master-primary-disabled);
@@ -1564,6 +1566,7 @@
1564
1566
  @property st-global(--wds-side-panel-floating-header-padding-right);
1565
1567
  @property st-global(--wds-side-panel-floating-header-padding-vertical);
1566
1568
  @property st-global(--wds-side-panel-floating-max-height);
1569
+ @property st-global(--wds-side-panel-floating-title-font-family);
1567
1570
  @property st-global(--wds-side-panel-floating-title-font-line-height);
1568
1571
  @property st-global(--wds-side-panel-floating-title-font-size);
1569
1572
  @property st-global(--wds-side-panel-footer-border-width);
@@ -1714,6 +1717,11 @@
1714
1717
  @property st-global(--wds-status-toast-width);
1715
1718
  @property st-global(--wds-stepper-prefix-size-circle);
1716
1719
  @property st-global(--wds-stepper-prefix-size-number);
1720
+ @property st-global(--wds-swatches-fill-border-disabled);
1721
+ @property st-global(--wds-swatches-fill-border-no-value);
1722
+ @property st-global(--wds-swatches-fill-border-no-value-dash);
1723
+ @property st-global(--wds-swatches-fill-border-selected);
1724
+ @property st-global(--wds-swatches-fill-disabled);
1717
1725
  @property st-global(--wds-swatches-list-gap);
1718
1726
  @property st-global(--wds-swatches-list-padding-horizontal);
1719
1727
  @property st-global(--wds-swatches-list-padding-vertical);
@@ -1726,7 +1734,6 @@
1726
1734
  @property st-global(--wds-swatches-swatch-size-medium);
1727
1735
  @property st-global(--wds-swatches-swatch-size-small);
1728
1736
  @property st-global(--wds-swatches-swatch-size-tiny);
1729
- @property st-global(--wds-swatches-swatch-size-x-tiny);
1730
1737
  @property st-global(--wds-table-list-item-border-color);
1731
1738
  @property st-global(--wds-table-list-item-border-radius);
1732
1739
  @property st-global(--wds-table-list-item-drag-handle-color);
@@ -2071,6 +2078,7 @@
2071
2078
  --wds-add-item-title-font-size-medium: 16px;
2072
2079
  --wds-add-item-title-font-size-small: 14px;
2073
2080
  --wds-announcement-modal-actions-padding: 42px;
2081
+ --wds-announcement-modal-border-radius: 8px;
2074
2082
  --wds-announcement-modal-content-gap: 12px;
2075
2083
  --wds-announcement-modal-padding-horizontal: 78px;
2076
2084
  --wds-announcement-modal-padding-vertical: 48px;
@@ -2081,8 +2089,8 @@
2081
2089
  --wds-avatar-group-gap-condensed: -3px;
2082
2090
  --wds-avatar-group-gap-default: 6px;
2083
2091
  --wds-background-blur-0: 0px;
2084
- --wds-background-blur-10: 0px;
2085
2092
  --wds-background-blur-50: 0px;
2093
+ --wds-background-blur-100: 0px;
2086
2094
  --wds-background-blur-150: 0px;
2087
2095
  --wds-background-blur-200: 0px;
2088
2096
  --wds-background-blur-250: 0px;
@@ -2135,6 +2143,7 @@
2135
2143
  --wds-border-radius-400: 8px;
2136
2144
  --wds-border-radius-500: 10px;
2137
2145
  --wds-border-radius-600: 12px;
2146
+ --wds-border-radius-1200: 24px;
2138
2147
  --wds-border-radius-full: 1000px;
2139
2148
  --wds-border-radius-surface-default: 8px;
2140
2149
  --wds-border-radius-surface-modal: 8px;
@@ -2304,6 +2313,8 @@
2304
2313
  --wds-card-tab-padding-horizontal-small: 18px;
2305
2314
  --wds-card-tab-padding-vertical-medium: 18px;
2306
2315
  --wds-card-tab-padding-vertical-small: 18px;
2316
+ --wds-carousel-controls-shadow: 0 0 18px rgba(0, 6, 36, .1), 0 6px 6px rgba(0, 6, 36, .05);
2317
+ --wds-carousel-dots-width: 12px;
2307
2318
  --wds-checkbox-border: #116dff;
2308
2319
  --wds-checkbox-border-active: #116dff;
2309
2320
  --wds-checkbox-border-active-disabled: rgba(0, 6, 36, .1);
@@ -2330,10 +2341,16 @@
2330
2341
  --wds-circular-progress-bar-background-fill-premium: #e3c3f4;
2331
2342
  --wds-circular-progress-bar-background-fill-standard: #d6e6fe;
2332
2343
  --wds-circular-progress-bar-background-fill-success: #c8e8d6;
2344
+ --wds-circular-progress-bar-border-width: 4px;
2333
2345
  --wds-circular-progress-bar-foreground-fill-error: #e62214;
2334
2346
  --wds-circular-progress-bar-foreground-fill-premium: #9a27d5;
2335
2347
  --wds-circular-progress-bar-foreground-fill-standard: #116dff;
2336
2348
  --wds-circular-progress-bar-foreground-fill-success: #25a55a;
2349
+ --wds-circular-progress-bar-label-font-line-height: 18px;
2350
+ --wds-circular-progress-bar-label-font-size: 10px;
2351
+ --wds-circular-progress-bar-label-font-weight: 700;
2352
+ --wds-circular-progress-bar-label-padding-large: 0px;
2353
+ --wds-circular-progress-bar-label-padding-medium: 0px;
2337
2354
  --wds-circular-progress-bar-size-large: 102px;
2338
2355
  --wds-circular-progress-bar-size-medium: 54px;
2339
2356
  --wds-circular-progress-bar-size-small: 30px;
@@ -2605,10 +2622,6 @@
2605
2622
  --wds-color-fill-stage-anchor-active: #5effff;
2606
2623
  --wds-color-fill-stage-anchor-disabled: rgba(0, 6, 36, .3);
2607
2624
  --wds-color-fill-stage-anchor-hover: #18d2de;
2608
- --wds-color-fill-stage-cms: #2d3034;
2609
- --wds-color-fill-stage-cms-active: #2d3034;
2610
- --wds-color-fill-stage-cms-disabled: rgba(0, 6, 36, .3);
2611
- --wds-color-fill-stage-cms-hover: #2d3034;
2612
2625
  --wds-color-fill-stage-element-primary: #116dff;
2613
2626
  --wds-color-fill-stage-element-primary-active: #084ebd;
2614
2627
  --wds-color-fill-stage-element-primary-disabled: rgba(0, 6, 36, .3);
@@ -2617,10 +2630,6 @@
2617
2630
  --wds-color-fill-stage-element-secondary-active: #5999ff;
2618
2631
  --wds-color-fill-stage-element-secondary-disabled: rgba(0, 6, 36, .1);
2619
2632
  --wds-color-fill-stage-element-secondary-hover: #a8caff;
2620
- --wds-color-fill-stage-interactions: #ff5c9f;
2621
- --wds-color-fill-stage-interactions-active: #ff5c9f;
2622
- --wds-color-fill-stage-interactions-disabled: rgba(0, 6, 36, .3);
2623
- --wds-color-fill-stage-interactions-hover: #ff5c9f;
2624
2633
  --wds-color-fill-stage-master-primary: #fe620f;
2625
2634
  --wds-color-fill-stage-master-primary-active: #fe620f;
2626
2635
  --wds-color-fill-stage-master-primary-disabled: rgba(0, 6, 36, .3);
@@ -3599,6 +3608,7 @@
3599
3608
  --wds-side-panel-floating-header-padding-right: 9px;
3600
3609
  --wds-side-panel-floating-header-padding-vertical: 12px;
3601
3610
  --wds-side-panel-floating-max-height: 576px;
3611
+ --wds-side-panel-floating-title-font-family: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
3602
3612
  --wds-side-panel-floating-title-font-line-height: 24px;
3603
3613
  --wds-side-panel-floating-title-font-size: 16px;
3604
3614
  --wds-side-panel-footer-border-width: 0px;
@@ -3749,6 +3759,11 @@
3749
3759
  --wds-status-toast-width: 600px;
3750
3760
  --wds-stepper-prefix-size-circle: 30px;
3751
3761
  --wds-stepper-prefix-size-number: 24px;
3762
+ --wds-swatches-fill-border-disabled: rgba(0, 6, 36, 0);
3763
+ --wds-swatches-fill-border-no-value: #d6e6fe;
3764
+ --wds-swatches-fill-border-no-value-dash: #e62214;
3765
+ --wds-swatches-fill-border-selected: #116dff;
3766
+ --wds-swatches-fill-disabled: rgba(0, 6, 36, .1);
3752
3767
  --wds-swatches-list-gap: 12px;
3753
3768
  --wds-swatches-list-padding-horizontal: 18px;
3754
3769
  --wds-swatches-list-padding-vertical: 12px;
@@ -3761,7 +3776,6 @@
3761
3776
  --wds-swatches-swatch-size-medium: 36px;
3762
3777
  --wds-swatches-swatch-size-small: 30px;
3763
3778
  --wds-swatches-swatch-size-tiny: 24px;
3764
- --wds-swatches-swatch-size-x-tiny: 18px;
3765
3779
  --wds-table-list-item-border-color: #d6e6fe;
3766
3780
  --wds-table-list-item-border-radius: 0px;
3767
3781
  --wds-table-list-item-drag-handle-color: #116dff;
package/component.st.css CHANGED
@@ -36,6 +36,7 @@
36
36
  @property st-global(--wds-add-item-title-font-size-medium);
37
37
  @property st-global(--wds-add-item-title-font-size-small);
38
38
  @property st-global(--wds-announcement-modal-actions-padding);
39
+ @property st-global(--wds-announcement-modal-border-radius);
39
40
  @property st-global(--wds-announcement-modal-content-gap);
40
41
  @property st-global(--wds-announcement-modal-padding-horizontal);
41
42
  @property st-global(--wds-announcement-modal-padding-vertical);
@@ -236,6 +237,8 @@
236
237
  @property st-global(--wds-card-tab-padding-horizontal-small);
237
238
  @property st-global(--wds-card-tab-padding-vertical-medium);
238
239
  @property st-global(--wds-card-tab-padding-vertical-small);
240
+ @property st-global(--wds-carousel-controls-shadow);
241
+ @property st-global(--wds-carousel-dots-width);
239
242
  @property st-global(--wds-checkbox-border);
240
243
  @property st-global(--wds-checkbox-border-active);
241
244
  @property st-global(--wds-checkbox-border-active-disabled);
@@ -262,10 +265,16 @@
262
265
  @property st-global(--wds-circular-progress-bar-background-fill-premium);
263
266
  @property st-global(--wds-circular-progress-bar-background-fill-standard);
264
267
  @property st-global(--wds-circular-progress-bar-background-fill-success);
268
+ @property st-global(--wds-circular-progress-bar-border-width);
265
269
  @property st-global(--wds-circular-progress-bar-foreground-fill-error);
266
270
  @property st-global(--wds-circular-progress-bar-foreground-fill-premium);
267
271
  @property st-global(--wds-circular-progress-bar-foreground-fill-standard);
268
272
  @property st-global(--wds-circular-progress-bar-foreground-fill-success);
273
+ @property st-global(--wds-circular-progress-bar-label-font-line-height);
274
+ @property st-global(--wds-circular-progress-bar-label-font-size);
275
+ @property st-global(--wds-circular-progress-bar-label-font-weight);
276
+ @property st-global(--wds-circular-progress-bar-label-padding-large);
277
+ @property st-global(--wds-circular-progress-bar-label-padding-medium);
269
278
  @property st-global(--wds-circular-progress-bar-size-large);
270
279
  @property st-global(--wds-circular-progress-bar-size-medium);
271
280
  @property st-global(--wds-circular-progress-bar-size-small);
@@ -894,6 +903,7 @@
894
903
  @property st-global(--wds-side-panel-floating-header-padding-right);
895
904
  @property st-global(--wds-side-panel-floating-header-padding-vertical);
896
905
  @property st-global(--wds-side-panel-floating-max-height);
906
+ @property st-global(--wds-side-panel-floating-title-font-family);
897
907
  @property st-global(--wds-side-panel-floating-title-font-line-height);
898
908
  @property st-global(--wds-side-panel-floating-title-font-size);
899
909
  @property st-global(--wds-side-panel-footer-border-width);
@@ -1000,6 +1010,11 @@
1000
1010
  @property st-global(--wds-status-toast-width);
1001
1011
  @property st-global(--wds-stepper-prefix-size-circle);
1002
1012
  @property st-global(--wds-stepper-prefix-size-number);
1013
+ @property st-global(--wds-swatches-fill-border-disabled);
1014
+ @property st-global(--wds-swatches-fill-border-no-value);
1015
+ @property st-global(--wds-swatches-fill-border-no-value-dash);
1016
+ @property st-global(--wds-swatches-fill-border-selected);
1017
+ @property st-global(--wds-swatches-fill-disabled);
1003
1018
  @property st-global(--wds-swatches-list-gap);
1004
1019
  @property st-global(--wds-swatches-list-padding-horizontal);
1005
1020
  @property st-global(--wds-swatches-list-padding-vertical);
@@ -1012,7 +1027,6 @@
1012
1027
  @property st-global(--wds-swatches-swatch-size-medium);
1013
1028
  @property st-global(--wds-swatches-swatch-size-small);
1014
1029
  @property st-global(--wds-swatches-swatch-size-tiny);
1015
- @property st-global(--wds-swatches-swatch-size-x-tiny);
1016
1030
  @property st-global(--wds-table-list-item-border-color);
1017
1031
  @property st-global(--wds-table-list-item-border-radius);
1018
1032
  @property st-global(--wds-table-list-item-drag-handle-color);
@@ -1355,6 +1369,7 @@
1355
1369
  --wds-add-item-title-font-size-medium: 16px;
1356
1370
  --wds-add-item-title-font-size-small: 14px;
1357
1371
  --wds-announcement-modal-actions-padding: 42px;
1372
+ --wds-announcement-modal-border-radius: 8px;
1358
1373
  --wds-announcement-modal-content-gap: 12px;
1359
1374
  --wds-announcement-modal-padding-horizontal: 78px;
1360
1375
  --wds-announcement-modal-padding-vertical: 48px;
@@ -1555,6 +1570,8 @@
1555
1570
  --wds-card-tab-padding-horizontal-small: 18px;
1556
1571
  --wds-card-tab-padding-vertical-medium: 18px;
1557
1572
  --wds-card-tab-padding-vertical-small: 18px;
1573
+ --wds-carousel-controls-shadow: 0 0 18px rgba(0, 6, 36, .1), 0 6px 6px rgba(0, 6, 36, .05);
1574
+ --wds-carousel-dots-width: 12px;
1558
1575
  --wds-checkbox-border: #116dff;
1559
1576
  --wds-checkbox-border-active: #116dff;
1560
1577
  --wds-checkbox-border-active-disabled: rgba(0, 6, 36, .1);
@@ -1581,10 +1598,16 @@
1581
1598
  --wds-circular-progress-bar-background-fill-premium: #e3c3f4;
1582
1599
  --wds-circular-progress-bar-background-fill-standard: #d6e6fe;
1583
1600
  --wds-circular-progress-bar-background-fill-success: #c8e8d6;
1601
+ --wds-circular-progress-bar-border-width: 4px;
1584
1602
  --wds-circular-progress-bar-foreground-fill-error: #e62214;
1585
1603
  --wds-circular-progress-bar-foreground-fill-premium: #9a27d5;
1586
1604
  --wds-circular-progress-bar-foreground-fill-standard: #116dff;
1587
1605
  --wds-circular-progress-bar-foreground-fill-success: #25a55a;
1606
+ --wds-circular-progress-bar-label-font-line-height: 18px;
1607
+ --wds-circular-progress-bar-label-font-size: 10px;
1608
+ --wds-circular-progress-bar-label-font-weight: 700;
1609
+ --wds-circular-progress-bar-label-padding-large: 0px;
1610
+ --wds-circular-progress-bar-label-padding-medium: 0px;
1588
1611
  --wds-circular-progress-bar-size-large: 102px;
1589
1612
  --wds-circular-progress-bar-size-medium: 54px;
1590
1613
  --wds-circular-progress-bar-size-small: 30px;
@@ -2213,6 +2236,7 @@
2213
2236
  --wds-side-panel-floating-header-padding-right: 9px;
2214
2237
  --wds-side-panel-floating-header-padding-vertical: 12px;
2215
2238
  --wds-side-panel-floating-max-height: 576px;
2239
+ --wds-side-panel-floating-title-font-family: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
2216
2240
  --wds-side-panel-floating-title-font-line-height: 24px;
2217
2241
  --wds-side-panel-floating-title-font-size: 16px;
2218
2242
  --wds-side-panel-footer-border-width: 0px;
@@ -2319,6 +2343,11 @@
2319
2343
  --wds-status-toast-width: 600px;
2320
2344
  --wds-stepper-prefix-size-circle: 30px;
2321
2345
  --wds-stepper-prefix-size-number: 24px;
2346
+ --wds-swatches-fill-border-disabled: rgba(0, 6, 36, 0);
2347
+ --wds-swatches-fill-border-no-value: #d6e6fe;
2348
+ --wds-swatches-fill-border-no-value-dash: #e62214;
2349
+ --wds-swatches-fill-border-selected: #116dff;
2350
+ --wds-swatches-fill-disabled: rgba(0, 6, 36, .1);
2322
2351
  --wds-swatches-list-gap: 12px;
2323
2352
  --wds-swatches-list-padding-horizontal: 18px;
2324
2353
  --wds-swatches-list-padding-vertical: 12px;
@@ -2331,7 +2360,6 @@
2331
2360
  --wds-swatches-swatch-size-medium: 36px;
2332
2361
  --wds-swatches-swatch-size-small: 30px;
2333
2362
  --wds-swatches-swatch-size-tiny: 24px;
2334
- --wds-swatches-swatch-size-x-tiny: 18px;
2335
2363
  --wds-table-list-item-border-color: #d6e6fe;
2336
2364
  --wds-table-list-item-border-radius: 0px;
2337
2365
  --wds-table-list-item-drag-handle-color: #116dff;
package/foundation.st.css CHANGED
@@ -1,6 +1,6 @@
1
1
  @property st-global(--wds-background-blur-0);
2
- @property st-global(--wds-background-blur-10);
3
2
  @property st-global(--wds-background-blur-50);
3
+ @property st-global(--wds-background-blur-100);
4
4
  @property st-global(--wds-background-blur-150);
5
5
  @property st-global(--wds-background-blur-200);
6
6
  @property st-global(--wds-background-blur-250);
@@ -14,6 +14,7 @@
14
14
  @property st-global(--wds-border-radius-400);
15
15
  @property st-global(--wds-border-radius-500);
16
16
  @property st-global(--wds-border-radius-600);
17
+ @property st-global(--wds-border-radius-1200);
17
18
  @property st-global(--wds-border-radius-full);
18
19
  @property st-global(--wds-border-width-100);
19
20
  @property st-global(--wds-border-width-150);
@@ -221,8 +222,8 @@
221
222
 
222
223
  .root {
223
224
  --wds-background-blur-0: 0px;
224
- --wds-background-blur-10: 0px;
225
225
  --wds-background-blur-50: 0px;
226
+ --wds-background-blur-100: 0px;
226
227
  --wds-background-blur-150: 0px;
227
228
  --wds-background-blur-200: 0px;
228
229
  --wds-background-blur-250: 0px;
@@ -236,6 +237,7 @@
236
237
  --wds-border-radius-400: 8px;
237
238
  --wds-border-radius-500: 10px;
238
239
  --wds-border-radius-600: 12px;
240
+ --wds-border-radius-1200: 24px;
239
241
  --wds-border-radius-full: 1000px;
240
242
  --wds-border-width-100: 1px;
241
243
  --wds-border-width-150: 1.5px;