@wix/design-system-tokens 1.133.0 → 1.134.1

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 +9 -0
  2. package/all.css +11 -10
  3. package/all.scss +11 -10
  4. package/all.st.css +22 -20
  5. package/component.st.css +18 -2
  6. package/foundation.st.css +4 -2
  7. package/odeditor/all.css +32 -31
  8. package/odeditor/all.scss +31 -30
  9. package/odeditor/all.st.css +50 -48
  10. package/odeditor/component.st.css +32 -16
  11. package/odeditor/foundation.st.css +12 -10
  12. package/odeditor/semantic.st.css +6 -22
  13. package/package.json +2 -2
  14. package/semantic.st.css +0 -16
  15. package/studio/all.css +11 -10
  16. package/studio/all.scss +11 -10
  17. package/studio/all.st.css +22 -20
  18. package/studio/component.st.css +18 -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,12 @@
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
+
1
10
  ## 1.133.0 - 2025-09-12
2
11
 
3
12
  ### Visual Breaking Changes
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;
@@ -589,7 +584,6 @@
589
584
  --wds-color-fill-stage-master-primary-disabled: var(--wds-color-black-100-transparent-30);
590
585
  --wds-color-fill-stage-master-primary-active: var(--wds-color-orange-100);
591
586
  --wds-color-fill-stage-master-primary: var(--wds-color-orange-100);
592
- --wds-color-fill-stage-interactions-disabled: var(--wds-color-black-100-transparent-30);
593
587
  --wds-color-fill-stage-element-secondary-hover: var(--wds-color-blue-300);
594
588
  --wds-color-fill-stage-element-secondary-disabled: var(--wds-color-black-100-transparent-10);
595
589
  --wds-color-fill-stage-element-secondary-active: var(--wds-color-blue-200);
@@ -598,7 +592,6 @@
598
592
  --wds-color-fill-stage-element-primary-disabled: var(--wds-color-black-100-transparent-30);
599
593
  --wds-color-fill-stage-element-primary-active: var(--wds-color-blue-0);
600
594
  --wds-color-fill-stage-element-primary: var(--wds-color-blue-100);
601
- --wds-color-fill-stage-cms-disabled: var(--wds-color-black-100-transparent-30);
602
595
  --wds-color-fill-stage-anchor-disabled: var(--wds-color-black-100-transparent-30);
603
596
  --wds-color-fill-social-youtube-disabled: var(--wds-color-black-100-transparent-30);
604
597
  --wds-color-fill-social-xcorp-disabled: var(--wds-color-black-100-transparent-30);
@@ -912,7 +905,6 @@
912
905
  --wds-table-list-item-gap: var(--wds-space-400);
913
906
  --wds-table-list-item-border-radius: var(--wds-border-radius-0);
914
907
  --wds-table-toolbar-padding-horizontal: var(--wds-space-400);
915
- --wds-swatches-swatch-size-x-tiny: var(--wds-space-300);
916
908
  --wds-swatches-swatch-size-tiny: var(--wds-space-400);
917
909
  --wds-swatches-swatch-size-small: var(--wds-space-500);
918
910
  --wds-swatches-swatch-size-medium: var(--wds-space-600);
@@ -923,6 +915,7 @@
923
915
  --wds-swatches-list-padding-vertical: var(--wds-space-200);
924
916
  --wds-swatches-list-padding-horizontal: var(--wds-space-300);
925
917
  --wds-swatches-list-gap: var(--wds-space-200);
918
+ --wds-swatches-fill-border-disabled: var(--wds-color-black-100-transparent-0);
926
919
  --wds-stepper-prefix-size-number: var(--wds-space-400);
927
920
  --wds-stepper-prefix-size-circle: var(--wds-space-500);
928
921
  --wds-social-preview-content-padding-vertical: var(--wds-space-150);
@@ -991,6 +984,7 @@
991
984
  --wds-side-panel-footer-padding-horizontal: var(--wds-space-400);
992
985
  --wds-side-panel-footer-divider-height: var(--wds-border-width-100);
993
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);
994
988
  --wds-side-panel-floating-header-padding-vertical: var(--wds-space-200);
995
989
  --wds-side-panel-floating-header-padding-right: var(--wds-space-150);
996
990
  --wds-side-panel-floating-header-padding-left: var(--wds-space-400);
@@ -1296,6 +1290,7 @@
1296
1290
  --wds-checkbox-group-gap-vertical: var(--wds-space-200);
1297
1291
  --wds-checkbox-border-radius: var(--wds-border-radius-200);
1298
1292
  --wds-checkbox-border-active-hover: var(--wds-color-black-100-transparent-0);
1293
+ --wds-carousel-dots-width: var(--wds-space-200);
1299
1294
  --wds-card-gallery-item-padding-vertical-small: var(--wds-space-200);
1300
1295
  --wds-card-gallery-item-padding-vertical-medium: var(--wds-space-300);
1301
1296
  --wds-card-gallery-item-padding-right-small: var(--wds-space-300);
@@ -1550,6 +1545,10 @@
1550
1545
  --wds-table-list-item-fill: var(--wds-color-fill-standard-tertiary);
1551
1546
  --wds-table-list-item-drag-handle-color: var(--wds-color-text-primary);
1552
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);
1553
1552
  --wds-status-toast-text-font-size: var(--wds-font-size-body-medium);
1554
1553
  --wds-status-toast-text-fill: var(--wds-color-text-standard-primary-light);
1555
1554
  --wds-status-toast-info-icon-fill: var(--wds-color-text-standard-primary-light);
@@ -1869,6 +1868,7 @@
1869
1868
  --wds-checkbox-border-active-disabled: var(--wds-color-border-standard-secondary-disabled);
1870
1869
  --wds-checkbox-border-active: var(--wds-color-border-standard-secondary-active);
1871
1870
  --wds-checkbox-border: var(--wds-color-border-standard-secondary-active);
1871
+ --wds-carousel-controls-shadow: var(--wds-shadow-300);
1872
1872
  --wds-card-gallery-item-title-font-size-medium: var(--wds-font-size-heading-4);
1873
1873
  --wds-card-gallery-item-subtitle-font-size-medium: var(--wds-font-size-body-small);
1874
1874
  --wds-card-gallery-item-overlay-fill: var(--wds-color-fill-transparent-primary);
@@ -1967,6 +1967,7 @@
1967
1967
  --wds-badge-label-font-size-small: var(--wds-font-size-body-small);
1968
1968
  --wds-announcement-modal-title-font-size: var(--wds-font-size-heading-1);
1969
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);
1970
1971
  --wds-add-item-title-font-size-small: var(--wds-font-size-body-small);
1971
1972
  --wds-add-item-title-font-size-medium: var(--wds-font-size-body-medium);
1972
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;
@@ -308,6 +302,7 @@
308
302
  --wds-border-width-150: 1.5px;
309
303
  --wds-border-width-100: 1px;
310
304
  --wds-border-radius-full: 1000px;
305
+ --wds-border-radius-1200: 24px;
311
306
  --wds-border-radius-600: 12px;
312
307
  --wds-border-radius-500: 10px;
313
308
  --wds-border-radius-400: 8px;
@@ -321,8 +316,8 @@
321
316
  --wds-background-blur-250: 0px;
322
317
  --wds-background-blur-200: 0px;
323
318
  --wds-background-blur-150: 0px;
319
+ --wds-background-blur-100: 0px;
324
320
  --wds-background-blur-50: 0px;
325
- --wds-background-blur-10: 0px;
326
321
  --wds-background-blur-0: 0px;
327
322
  --wds-avatar-group-gap-condensed: -3px;
328
323
  --wds-width-default-2: var(--wds-border-width-100);
@@ -476,7 +471,6 @@
476
471
  --wds-table-list-item-indentation-level-2: var(--wds-space-200);
477
472
  --wds-table-list-item-gap: var(--wds-space-400);
478
473
  --wds-table-list-item-border-radius: var(--wds-border-radius-0);
479
- --wds-swatches-swatch-size-x-tiny: var(--wds-space-300);
480
474
  --wds-swatches-swatch-size-tiny: var(--wds-space-400);
481
475
  --wds-swatches-swatch-size-small: var(--wds-space-500);
482
476
  --wds-swatches-swatch-size-medium: var(--wds-space-600);
@@ -487,6 +481,7 @@
487
481
  --wds-swatches-list-padding-vertical: var(--wds-space-200);
488
482
  --wds-swatches-list-padding-horizontal: var(--wds-space-300);
489
483
  --wds-swatches-list-gap: var(--wds-space-200);
484
+ --wds-swatches-fill-border-disabled: var(--wds-color-black-100-transparent-0);
490
485
  --wds-stepper-prefix-size-number: var(--wds-space-400);
491
486
  --wds-stepper-prefix-size-circle: var(--wds-space-500);
492
487
  --wds-space-viewport-spacing: var(--wds-space-800);
@@ -569,6 +564,7 @@
569
564
  --wds-side-panel-footer-padding-horizontal: var(--wds-space-400);
570
565
  --wds-side-panel-footer-divider-height: var(--wds-border-width-100);
571
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);
572
568
  --wds-side-panel-floating-header-padding-vertical: var(--wds-space-200);
573
569
  --wds-side-panel-floating-header-padding-right: var(--wds-space-150);
574
570
  --wds-side-panel-floating-header-padding-left: var(--wds-space-400);
@@ -1100,7 +1096,6 @@
1100
1096
  --wds-color-fill-stage-master-primary-disabled: var(--wds-color-black-100-transparent-30);
1101
1097
  --wds-color-fill-stage-master-primary-active: var(--wds-color-orange-100);
1102
1098
  --wds-color-fill-stage-master-primary: var(--wds-color-orange-100);
1103
- --wds-color-fill-stage-interactions-disabled: var(--wds-color-black-100-transparent-30);
1104
1099
  --wds-color-fill-stage-element-secondary-hover: var(--wds-color-blue-300);
1105
1100
  --wds-color-fill-stage-element-secondary-disabled: var(--wds-color-black-100-transparent-10);
1106
1101
  --wds-color-fill-stage-element-secondary-active: var(--wds-color-blue-200);
@@ -1109,7 +1104,6 @@
1109
1104
  --wds-color-fill-stage-element-primary-disabled: var(--wds-color-black-100-transparent-30);
1110
1105
  --wds-color-fill-stage-element-primary-active: var(--wds-color-blue-0);
1111
1106
  --wds-color-fill-stage-element-primary: var(--wds-color-blue-100);
1112
- --wds-color-fill-stage-cms-disabled: var(--wds-color-black-100-transparent-30);
1113
1107
  --wds-color-fill-stage-anchor-disabled: var(--wds-color-black-100-transparent-30);
1114
1108
  --wds-color-fill-social-youtube-disabled: var(--wds-color-black-100-transparent-30);
1115
1109
  --wds-color-fill-social-xcorp-disabled: var(--wds-color-black-100-transparent-30);
@@ -1288,6 +1282,7 @@
1288
1282
  --wds-checkbox-group-gap-vertical: var(--wds-space-200);
1289
1283
  --wds-checkbox-border-radius: var(--wds-border-radius-200);
1290
1284
  --wds-checkbox-border-active-hover: var(--wds-color-black-100-transparent-0);
1285
+ --wds-carousel-dots-width: var(--wds-space-200);
1291
1286
  --wds-card-tab-padding-vertical-small: var(--wds-space-300);
1292
1287
  --wds-card-tab-padding-vertical-medium: var(--wds-space-300);
1293
1288
  --wds-card-tab-padding-horizontal-small: var(--wds-space-300);
@@ -1532,6 +1527,10 @@
1532
1527
  --wds-table-list-item-fill: var(--wds-color-fill-standard-tertiary);
1533
1528
  --wds-table-list-item-drag-handle-color: var(--wds-color-text-primary);
1534
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);
1535
1534
  --wds-status-toast-text-font-size: var(--wds-font-size-body-medium);
1536
1535
  --wds-status-toast-text-fill: var(--wds-color-text-standard-primary-light);
1537
1536
  --wds-status-toast-info-icon-fill: var(--wds-color-text-standard-primary-light);
@@ -1869,6 +1868,7 @@
1869
1868
  --wds-checkbox-border-active-disabled: var(--wds-color-border-standard-secondary-disabled);
1870
1869
  --wds-checkbox-border-active: var(--wds-color-border-standard-secondary-active);
1871
1870
  --wds-checkbox-border: var(--wds-color-border-standard-secondary-active);
1871
+ --wds-carousel-controls-shadow: var(--wds-shadow-300);
1872
1872
  --wds-card-gallery-item-title-font-size-medium: var(--wds-font-size-heading-4);
1873
1873
  --wds-card-gallery-item-subtitle-font-size-medium: var(--wds-font-size-body-small);
1874
1874
  --wds-card-gallery-item-overlay-fill: var(--wds-color-fill-transparent-primary);
@@ -1967,6 +1967,7 @@
1967
1967
  --wds-badge-label-font-size-small: var(--wds-font-size-body-small);
1968
1968
  --wds-announcement-modal-title-font-size: var(--wds-font-size-heading-1);
1969
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);
1970
1971
  --wds-add-item-title-font-size-small: var(--wds-font-size-body-small);
1971
1972
  --wds-add-item-title-font-size-medium: var(--wds-font-size-body-medium);
1972
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);
@@ -576,10 +580,6 @@
576
580
  @property st-global(--wds-color-fill-stage-anchor-active);
577
581
  @property st-global(--wds-color-fill-stage-anchor-disabled);
578
582
  @property st-global(--wds-color-fill-stage-anchor-hover);
579
- @property st-global(--wds-color-fill-stage-cms);
580
- @property st-global(--wds-color-fill-stage-cms-active);
581
- @property st-global(--wds-color-fill-stage-cms-disabled);
582
- @property st-global(--wds-color-fill-stage-cms-hover);
583
583
  @property st-global(--wds-color-fill-stage-element-primary);
584
584
  @property st-global(--wds-color-fill-stage-element-primary-active);
585
585
  @property st-global(--wds-color-fill-stage-element-primary-disabled);
@@ -588,10 +588,6 @@
588
588
  @property st-global(--wds-color-fill-stage-element-secondary-active);
589
589
  @property st-global(--wds-color-fill-stage-element-secondary-disabled);
590
590
  @property st-global(--wds-color-fill-stage-element-secondary-hover);
591
- @property st-global(--wds-color-fill-stage-interactions);
592
- @property st-global(--wds-color-fill-stage-interactions-active);
593
- @property st-global(--wds-color-fill-stage-interactions-disabled);
594
- @property st-global(--wds-color-fill-stage-interactions-hover);
595
591
  @property st-global(--wds-color-fill-stage-master-primary);
596
592
  @property st-global(--wds-color-fill-stage-master-primary-active);
597
593
  @property st-global(--wds-color-fill-stage-master-primary-disabled);
@@ -1570,6 +1566,7 @@
1570
1566
  @property st-global(--wds-side-panel-floating-header-padding-right);
1571
1567
  @property st-global(--wds-side-panel-floating-header-padding-vertical);
1572
1568
  @property st-global(--wds-side-panel-floating-max-height);
1569
+ @property st-global(--wds-side-panel-floating-title-font-family);
1573
1570
  @property st-global(--wds-side-panel-floating-title-font-line-height);
1574
1571
  @property st-global(--wds-side-panel-floating-title-font-size);
1575
1572
  @property st-global(--wds-side-panel-footer-border-width);
@@ -1720,6 +1717,11 @@
1720
1717
  @property st-global(--wds-status-toast-width);
1721
1718
  @property st-global(--wds-stepper-prefix-size-circle);
1722
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);
1723
1725
  @property st-global(--wds-swatches-list-gap);
1724
1726
  @property st-global(--wds-swatches-list-padding-horizontal);
1725
1727
  @property st-global(--wds-swatches-list-padding-vertical);
@@ -1732,7 +1734,6 @@
1732
1734
  @property st-global(--wds-swatches-swatch-size-medium);
1733
1735
  @property st-global(--wds-swatches-swatch-size-small);
1734
1736
  @property st-global(--wds-swatches-swatch-size-tiny);
1735
- @property st-global(--wds-swatches-swatch-size-x-tiny);
1736
1737
  @property st-global(--wds-table-list-item-border-color);
1737
1738
  @property st-global(--wds-table-list-item-border-radius);
1738
1739
  @property st-global(--wds-table-list-item-drag-handle-color);
@@ -2077,6 +2078,7 @@
2077
2078
  --wds-add-item-title-font-size-medium: 16px;
2078
2079
  --wds-add-item-title-font-size-small: 14px;
2079
2080
  --wds-announcement-modal-actions-padding: 42px;
2081
+ --wds-announcement-modal-border-radius: 8px;
2080
2082
  --wds-announcement-modal-content-gap: 12px;
2081
2083
  --wds-announcement-modal-padding-horizontal: 78px;
2082
2084
  --wds-announcement-modal-padding-vertical: 48px;
@@ -2087,8 +2089,8 @@
2087
2089
  --wds-avatar-group-gap-condensed: -3px;
2088
2090
  --wds-avatar-group-gap-default: 6px;
2089
2091
  --wds-background-blur-0: 0px;
2090
- --wds-background-blur-10: 0px;
2091
2092
  --wds-background-blur-50: 0px;
2093
+ --wds-background-blur-100: 0px;
2092
2094
  --wds-background-blur-150: 0px;
2093
2095
  --wds-background-blur-200: 0px;
2094
2096
  --wds-background-blur-250: 0px;
@@ -2141,6 +2143,7 @@
2141
2143
  --wds-border-radius-400: 8px;
2142
2144
  --wds-border-radius-500: 10px;
2143
2145
  --wds-border-radius-600: 12px;
2146
+ --wds-border-radius-1200: 24px;
2144
2147
  --wds-border-radius-full: 1000px;
2145
2148
  --wds-border-radius-surface-default: 8px;
2146
2149
  --wds-border-radius-surface-modal: 8px;
@@ -2310,6 +2313,8 @@
2310
2313
  --wds-card-tab-padding-horizontal-small: 18px;
2311
2314
  --wds-card-tab-padding-vertical-medium: 18px;
2312
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;
2313
2318
  --wds-checkbox-border: #116dff;
2314
2319
  --wds-checkbox-border-active: #116dff;
2315
2320
  --wds-checkbox-border-active-disabled: rgba(0, 6, 36, .1);
@@ -2617,10 +2622,6 @@
2617
2622
  --wds-color-fill-stage-anchor-active: #5effff;
2618
2623
  --wds-color-fill-stage-anchor-disabled: rgba(0, 6, 36, .3);
2619
2624
  --wds-color-fill-stage-anchor-hover: #18d2de;
2620
- --wds-color-fill-stage-cms: #2d3034;
2621
- --wds-color-fill-stage-cms-active: #2d3034;
2622
- --wds-color-fill-stage-cms-disabled: rgba(0, 6, 36, .3);
2623
- --wds-color-fill-stage-cms-hover: #2d3034;
2624
2625
  --wds-color-fill-stage-element-primary: #116dff;
2625
2626
  --wds-color-fill-stage-element-primary-active: #084ebd;
2626
2627
  --wds-color-fill-stage-element-primary-disabled: rgba(0, 6, 36, .3);
@@ -2629,10 +2630,6 @@
2629
2630
  --wds-color-fill-stage-element-secondary-active: #5999ff;
2630
2631
  --wds-color-fill-stage-element-secondary-disabled: rgba(0, 6, 36, .1);
2631
2632
  --wds-color-fill-stage-element-secondary-hover: #a8caff;
2632
- --wds-color-fill-stage-interactions: #ff5c9f;
2633
- --wds-color-fill-stage-interactions-active: #ff5c9f;
2634
- --wds-color-fill-stage-interactions-disabled: rgba(0, 6, 36, .3);
2635
- --wds-color-fill-stage-interactions-hover: #ff5c9f;
2636
2633
  --wds-color-fill-stage-master-primary: #fe620f;
2637
2634
  --wds-color-fill-stage-master-primary-active: #fe620f;
2638
2635
  --wds-color-fill-stage-master-primary-disabled: rgba(0, 6, 36, .3);
@@ -3611,6 +3608,7 @@
3611
3608
  --wds-side-panel-floating-header-padding-right: 9px;
3612
3609
  --wds-side-panel-floating-header-padding-vertical: 12px;
3613
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;
3614
3612
  --wds-side-panel-floating-title-font-line-height: 24px;
3615
3613
  --wds-side-panel-floating-title-font-size: 16px;
3616
3614
  --wds-side-panel-footer-border-width: 0px;
@@ -3761,6 +3759,11 @@
3761
3759
  --wds-status-toast-width: 600px;
3762
3760
  --wds-stepper-prefix-size-circle: 30px;
3763
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);
3764
3767
  --wds-swatches-list-gap: 12px;
3765
3768
  --wds-swatches-list-padding-horizontal: 18px;
3766
3769
  --wds-swatches-list-padding-vertical: 12px;
@@ -3773,7 +3776,6 @@
3773
3776
  --wds-swatches-swatch-size-medium: 36px;
3774
3777
  --wds-swatches-swatch-size-small: 30px;
3775
3778
  --wds-swatches-swatch-size-tiny: 24px;
3776
- --wds-swatches-swatch-size-x-tiny: 18px;
3777
3779
  --wds-table-list-item-border-color: #d6e6fe;
3778
3780
  --wds-table-list-item-border-radius: 0px;
3779
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);
@@ -900,6 +903,7 @@
900
903
  @property st-global(--wds-side-panel-floating-header-padding-right);
901
904
  @property st-global(--wds-side-panel-floating-header-padding-vertical);
902
905
  @property st-global(--wds-side-panel-floating-max-height);
906
+ @property st-global(--wds-side-panel-floating-title-font-family);
903
907
  @property st-global(--wds-side-panel-floating-title-font-line-height);
904
908
  @property st-global(--wds-side-panel-floating-title-font-size);
905
909
  @property st-global(--wds-side-panel-footer-border-width);
@@ -1006,6 +1010,11 @@
1006
1010
  @property st-global(--wds-status-toast-width);
1007
1011
  @property st-global(--wds-stepper-prefix-size-circle);
1008
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);
1009
1018
  @property st-global(--wds-swatches-list-gap);
1010
1019
  @property st-global(--wds-swatches-list-padding-horizontal);
1011
1020
  @property st-global(--wds-swatches-list-padding-vertical);
@@ -1018,7 +1027,6 @@
1018
1027
  @property st-global(--wds-swatches-swatch-size-medium);
1019
1028
  @property st-global(--wds-swatches-swatch-size-small);
1020
1029
  @property st-global(--wds-swatches-swatch-size-tiny);
1021
- @property st-global(--wds-swatches-swatch-size-x-tiny);
1022
1030
  @property st-global(--wds-table-list-item-border-color);
1023
1031
  @property st-global(--wds-table-list-item-border-radius);
1024
1032
  @property st-global(--wds-table-list-item-drag-handle-color);
@@ -1361,6 +1369,7 @@
1361
1369
  --wds-add-item-title-font-size-medium: 16px;
1362
1370
  --wds-add-item-title-font-size-small: 14px;
1363
1371
  --wds-announcement-modal-actions-padding: 42px;
1372
+ --wds-announcement-modal-border-radius: 8px;
1364
1373
  --wds-announcement-modal-content-gap: 12px;
1365
1374
  --wds-announcement-modal-padding-horizontal: 78px;
1366
1375
  --wds-announcement-modal-padding-vertical: 48px;
@@ -1561,6 +1570,8 @@
1561
1570
  --wds-card-tab-padding-horizontal-small: 18px;
1562
1571
  --wds-card-tab-padding-vertical-medium: 18px;
1563
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;
1564
1575
  --wds-checkbox-border: #116dff;
1565
1576
  --wds-checkbox-border-active: #116dff;
1566
1577
  --wds-checkbox-border-active-disabled: rgba(0, 6, 36, .1);
@@ -2225,6 +2236,7 @@
2225
2236
  --wds-side-panel-floating-header-padding-right: 9px;
2226
2237
  --wds-side-panel-floating-header-padding-vertical: 12px;
2227
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;
2228
2240
  --wds-side-panel-floating-title-font-line-height: 24px;
2229
2241
  --wds-side-panel-floating-title-font-size: 16px;
2230
2242
  --wds-side-panel-footer-border-width: 0px;
@@ -2331,6 +2343,11 @@
2331
2343
  --wds-status-toast-width: 600px;
2332
2344
  --wds-stepper-prefix-size-circle: 30px;
2333
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);
2334
2351
  --wds-swatches-list-gap: 12px;
2335
2352
  --wds-swatches-list-padding-horizontal: 18px;
2336
2353
  --wds-swatches-list-padding-vertical: 12px;
@@ -2343,7 +2360,6 @@
2343
2360
  --wds-swatches-swatch-size-medium: 36px;
2344
2361
  --wds-swatches-swatch-size-small: 30px;
2345
2362
  --wds-swatches-swatch-size-tiny: 24px;
2346
- --wds-swatches-swatch-size-x-tiny: 18px;
2347
2363
  --wds-table-list-item-border-color: #d6e6fe;
2348
2364
  --wds-table-list-item-border-radius: 0px;
2349
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;