@wix/design-system-tokens 1.212.0 → 1.213.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 (25) hide show
  1. package/CHANGELOG.md +23 -0
  2. package/all.css +78 -3
  3. package/all.scss +78 -3
  4. package/all.st.css +153 -3
  5. package/component.st.css +153 -3
  6. package/odeditor/all.css +127 -42
  7. package/odeditor/all.scss +127 -42
  8. package/odeditor/all.st.css +213 -43
  9. package/odeditor/component.st.css +201 -31
  10. package/odeditor/foundation.st.css +1 -1
  11. package/odeditor/semantic.st.css +11 -11
  12. package/odeditor-dark/all.css +99 -18
  13. package/odeditor-dark/all.scss +99 -18
  14. package/odeditor-dark/all.st.css +182 -20
  15. package/odeditor-dark/component.st.css +173 -11
  16. package/odeditor-dark/semantic.st.css +9 -9
  17. package/package.json +2 -2
  18. package/studio/all.css +67 -0
  19. package/studio/all.scss +67 -0
  20. package/studio/all.st.css +134 -0
  21. package/studio/component.st.css +134 -0
  22. package/wixel/all.css +67 -0
  23. package/wixel/all.scss +67 -0
  24. package/wixel/all.st.css +134 -0
  25. package/wixel/component.st.css +134 -0
package/CHANGELOG.md CHANGED
@@ -1,3 +1,26 @@
1
+ ## 1.213.0 - 2026-07-17
2
+
3
+ ### Bug Fixes
4
+
5
+ - fix(CardGalleryItem): correct title and subtitle font sizes for Harmony theme [16533](https://github.com/wix-private/wix-design-systems/pull/16533)
6
+
7
+ ### Visual Breaking Changes
8
+
9
+ - breaking(AnnouncementModalLayout): update to harmony design tokens & "Help" icon [16577](https://github.com/wix-private/wix-design-systems/pull/16577)
10
+ - breaking(MessageModalLayout): use tertiary button priority and tiny-normal footnote typography [16578](https://github.com/wix-private/wix-design-systems/pull/16578)
11
+ - breaking(TopBanner): update visual styling [16579](https://github.com/wix-private/wix-design-systems/pull/16579)
12
+ - breaking(Card): hide divider and show default shadow in odeditor themes [16519](https://github.com/wix-private/wix-design-systems/pull/16519)
13
+ - breaking(Page.Header): restyle back button to the close-button style [16552](https://github.com/wix-private/wix-design-systems/pull/16552)
14
+ - breaking(Avatar): update accent colors and the user illustration [16568](https://github.com/wix-private/wix-design-systems/pull/16568)
15
+ - breaking(SidePanel): round standard skin, add shadow, shrink subtitle (Harmony theme) [16566](https://github.com/wix-private/wix-design-systems/pull/16566)
16
+ - breaking(TableListItem): bm reimagined controls spacing and border radius tokens [16559](https://github.com/wix-private/wix-design-systems/pull/16559)
17
+ - breaking(TableActionCell): reduce gap between action buttons (Harmony & Harmony Dark themes) [16564](https://github.com/wix-private/wix-design-systems/pull/16564)
18
+ - breaking(SidebarItemNext): rounded, narrower items for Harmony theme [16562](https://github.com/wix-private/wix-design-systems/pull/16562)
19
+ - breaking(SectionHeader): update token definitions (Harmony & Harmony Dark themes) [16555](https://github.com/wix-private/wix-design-systems/pull/16555)
20
+ - breaking(Breadcrumbs): update Harmony icon [16557](https://github.com/wix-private/wix-design-systems/pull/16557)
21
+ - breaking(Breadcrumbs): update tokens for Harmony theme [16526](https://github.com/wix-private/wix-design-systems/pull/16526)
22
+ - breaking(TagList): increase gap between tags and clear button (Harmony & Harmony Dark themes) [16556](https://github.com/wix-private/wix-design-systems/pull/16556)
23
+
1
24
  ## 1.212.0 - 2026-07-14
2
25
 
3
26
  ### Bug Fixes
package/all.css CHANGED
@@ -274,6 +274,7 @@
274
274
  --wds-background-blur-100: 0px;
275
275
  --wds-background-blur-50: 0px;
276
276
  --wds-background-blur-0: 0px;
277
+ --wds-top-banner-shadow: 0 0 0 transparent;
277
278
  --wds-toggle-switch-width-small: 28px;
278
279
  --wds-toggle-switch-width-medium: 34px;
279
280
  --wds-toggle-switch-width-large: 46px;
@@ -311,12 +312,17 @@
311
312
  --wds-sidebar-item-level-1-fill-dark-active: #42454C;
312
313
  --wds-sidebar-divider-fill-dark-default: #42454C;
313
314
  --wds-sidebar-clear-button-fill: #5a5d63;
315
+ --wds-side-panel-standard-shadow: none;
316
+ --wds-side-panel-standard-overflow: visible;
314
317
  --wds-side-panel-floating-max-height: 576px;
315
318
  --wds-side-panel-control-layout-divider-border-width: 1px;
316
319
  --wds-section-helper-prefix-offset-margin: 6px;
317
320
  --wds-search-expandable-padding-small: 5px;
318
321
  --wds-radio-size: 16px;
319
322
  --wds-radio-dot-size: 10px;
323
+ --wds-page-header-title-minimised-line-height: 30px;
324
+ --wds-page-header-back-button-gap: 8px;
325
+ --wds-message-modal-close-button-fill: transparent;
320
326
  --wds-marketing-layout-title-font-size-tiny: 20px;
321
327
  --wds-marketing-layout-image-border-radius: 0px;
322
328
  --wds-marketing-layout-badge-top: 9px;
@@ -330,6 +336,7 @@
330
336
  --wds-loader-stroke-width-small: 4px;
331
337
  --wds-loader-stroke-width-medium: 4px;
332
338
  --wds-loader-stroke-width-large: 4px;
339
+ --wds-list-item-select-min-height-medium: auto;
333
340
  --wds-list-item-action-subtitle-offset: 0px;
334
341
  --wds-internal-thumbnail-illustration-size-tiny: 38px;
335
342
  --wds-internal-thumbnail-illustration-size-small: 51px;
@@ -353,6 +360,7 @@
353
360
  --wds-google-preview-site-name-fill: #202124;
354
361
  --wds-google-preview-favicon-border-fill: #E6E6E6;
355
362
  --wds-google-preview-favicon-background-fill: #F1F3F4;
363
+ --wds-editable-title-marker-line-style: dashed;
356
364
  --wds-counter-badge-padding-horizontal-tiny: 4px;
357
365
  --wds-counter-badge-padding-horizontal-medium: 8px;
358
366
  --wds-counter-badge-font-size-tiny: 10px;
@@ -361,12 +369,22 @@
361
369
  --wds-color-picker-width: 240px;
362
370
  --wds-circular-progress-bar-border-width: 4px;
363
371
  --wds-checkbox-size: 16px;
372
+ --wds-card-divider-opacity: 1;
373
+ --wds-card-base-shadow: none;
364
374
  --wds-button-outline-hover: transparent;
365
375
  --wds-button-icon-offset-tiny: 12px;
366
376
  --wds-button-icon-offset-small: 12px;
367
377
  --wds-button-icon-offset-medium: 12px;
368
378
  --wds-button-icon-offset-large: 12px;
379
+ --wds-breadcrumbs-height-small: 24px;
380
+ --wds-breadcrumbs-height-medium: 30px;
381
+ --wds-breadcrumbs-height-large: 36px;
382
+ --wds-breadcrumbs-divider-margin-horizontal: 8px;
369
383
  --wds-avatar-group-gap-condensed: -3px;
384
+ --wds-announcement-modal-help-button-fill: transparent;
385
+ --wds-announcement-modal-footnote-content-alignment: center;
386
+ --wds-announcement-modal-close-button-icon-size: 12px;
387
+ --wds-announcement-modal-close-button-fill: transparent;
370
388
  --wds-angle-input-knob-size: 6px;
371
389
  --wds-angle-input-knob-border: 2px;
372
390
  --wds-width-default-2: var(--wds-border-width-100);
@@ -855,7 +873,14 @@
855
873
  --wds-vertical-tabs-action-padding-horizontal-medium: var(--wds-space-400);
856
874
  --wds-variable-input-padding-vertical-tiny: var(--wds-space-50);
857
875
  --wds-variable-input-padding-vertical-small: var(--wds-space-100);
876
+ --wds-top-banner-padding-vertical: var(--wds-space-150);
877
+ --wds-top-banner-padding-horizontal-start: var(--wds-space-200);
878
+ --wds-top-banner-padding-horizontal-end: var(--wds-space-200);
858
879
  --wds-top-banner-fill: var(--wds-color-purple-200);
880
+ --wds-top-banner-dismiss-gap: var(--wds-space-200);
881
+ --wds-top-banner-content-gap: var(--wds-space-200);
882
+ --wds-top-banner-border-radius: var(--wds-border-radius-0);
883
+ --wds-top-banner-border-color: var(--wds-color-white-transparent-0);
859
884
  --wds-tooltip-padding-vertical-small: var(--wds-space-100);
860
885
  --wds-tooltip-padding-vertical-medium: var(--wds-space-200);
861
886
  --wds-tooltip-padding-horizontal-small: var(--wds-space-200);
@@ -930,6 +955,7 @@
930
955
  --wds-text-button-font-weight-thin: var(--wds-font-weight-regular);
931
956
  --wds-text-button-font-weight-normal: var(--wds-font-weight-medium);
932
957
  --wds-testimonial-list-gap: var(--wds-space-500);
958
+ --wds-tag-list-action-gap: var(--wds-space-100);
933
959
  --wds-tag-size-tiny: var(--wds-space-300);
934
960
  --wds-tag-size-small: var(--wds-space-400);
935
961
  --wds-tag-size-medium: var(--wds-space-500);
@@ -967,7 +993,16 @@
967
993
  --wds-table-list-item-indentation-level-2: var(--wds-space-200);
968
994
  --wds-table-list-item-gap: var(--wds-space-400);
969
995
  --wds-table-list-item-fill-highlight: var(--wds-color-blue-600);
996
+ --wds-table-list-item-controls-padding-medium: var(--wds-space-300);
997
+ --wds-table-list-item-controls-gap-medium: var(--wds-space-200);
998
+ --wds-table-list-item-checkbox-offset: var(--wds-space-0);
970
999
  --wds-table-list-item-border-radius: var(--wds-border-radius-0);
1000
+ --wds-table-action-cell-secondary-action-gap-tiny: var(--wds-space-100);
1001
+ --wds-table-action-cell-secondary-action-gap-small: var(--wds-space-200);
1002
+ --wds-table-action-cell-secondary-action-gap-medium: var(--wds-space-200);
1003
+ --wds-table-action-cell-primary-action-gap-tiny: var(--wds-space-100);
1004
+ --wds-table-action-cell-primary-action-gap-small: var(--wds-space-200);
1005
+ --wds-table-action-cell-primary-action-gap-medium: var(--wds-space-200);
971
1006
  --wds-table-toolbar-padding-horizontal: var(--wds-space-400);
972
1007
  --wds-swatches-swatch-size-tiny: var(--wds-space-400);
973
1008
  --wds-swatches-swatch-size-small: var(--wds-space-500);
@@ -1041,10 +1076,13 @@
1041
1076
  --wds-sidebar-divider-fill-neutral-default: var(--wds-color-black-550);
1042
1077
  --wds-sidebar-divider-fill-light-default: var(--wds-color-black-550);
1043
1078
  --wds-side-panel-title-font-letter-spacing: var(--wds-font-letter-spacing-0);
1079
+ --wds-side-panel-subtitle-font-weight: var(--wds-font-weight-regular);
1080
+ --wds-side-panel-standard-corner-radius: var(--wds-border-radius-0);
1044
1081
  --wds-side-panel-header-padding-vertical: var(--wds-space-300);
1045
1082
  --wds-side-panel-header-padding-right: var(--wds-space-150);
1046
1083
  --wds-side-panel-header-padding-left: var(--wds-space-400);
1047
1084
  --wds-side-panel-header-divider-height: var(--wds-border-width-100);
1085
+ --wds-side-panel-header-content-padding-right: var(--wds-space-0);
1048
1086
  --wds-side-panel-footnote-padding-vertical: var(--wds-space-200);
1049
1087
  --wds-side-panel-footnote-padding-horizontal: var(--wds-space-400);
1050
1088
  --wds-side-panel-footer-padding-vertical: var(--wds-space-300);
@@ -1164,6 +1202,9 @@
1164
1202
  --wds-pagination-padding-vertical: var(--wds-space-50);
1165
1203
  --wds-pagination-padding-horizontal: var(--wds-space-50);
1166
1204
  --wds-pagination-gap: var(--wds-space-100);
1205
+ --wds-page-header-title-minimised-letter-spacing: var(--wds-font-letter-spacing-0);
1206
+ --wds-page-header-title-minimised-font-weight: var(--wds-font-weight-medium);
1207
+ --wds-page-header-title-actions-gap: var(--wds-space-0);
1167
1208
  --wds-page-header-padding-vertical-small: var(--wds-space-300);
1168
1209
  --wds-page-header-padding-vertical: var(--wds-space-400);
1169
1210
  --wds-page-header-padding-horizontal-small: var(--wds-space-400);
@@ -1181,10 +1222,17 @@
1181
1222
  --wds-mobile-modal-content-padding-vertical: var(--wds-space-400);
1182
1223
  --wds-mobile-modal-content-padding-horizontal: var(--wds-space-400);
1183
1224
  --wds-message-modal-top-controls-paddings: var(--wds-space-100);
1225
+ --wds-message-modal-top-controls-gap: var(--wds-space-50);
1184
1226
  --wds-message-modal-title-font-family: var(--wds-font-family-default);
1185
1227
  --wds-message-modal-padding-vertical: var(--wds-space-400);
1186
1228
  --wds-message-modal-padding-horizontal: var(--wds-space-400);
1229
+ --wds-message-modal-illustration-margin-top: var(--wds-space-300);
1230
+ --wds-message-modal-illustration-margin-start: var(--wds-space-400);
1231
+ --wds-message-modal-illustration-content-gap: var(--wds-space-400);
1232
+ --wds-message-modal-help-button-size: var(--wds-space-500);
1187
1233
  --wds-message-modal-content-gap: var(--wds-space-200);
1234
+ --wds-message-modal-close-button-size: var(--wds-space-500);
1235
+ --wds-message-modal-close-button-icon-size: var(--wds-space-200);
1188
1236
  --wds-marketing-page-paddings-vertical-medium: var(--wds-space-500);
1189
1237
  --wds-marketing-page-paddings-vertical-large: var(--wds-space-800);
1190
1238
  --wds-marketing-page-paddings-horizontal-medium: var(--wds-space-800);
@@ -1337,6 +1385,9 @@
1337
1385
  --wds-empty-state-section-content-paddings: var(--wds-space-250);
1338
1386
  --wds-empty-state-page-content-paddings: var(--wds-space-300);
1339
1387
  --wds-empty-state-border-radius: var(--wds-border-radius-400);
1388
+ --wds-editable-title-placeholder-fill: var(--wds-color-black-550);
1389
+ --wds-editable-title-marker-fill-active: var(--wds-color-blue-100);
1390
+ --wds-editable-title-marker-fill: var(--wds-color-black-400);
1340
1391
  --wds-dropdown-layout-option-size-small: var(--wds-space-600);
1341
1392
  --wds-dropdown-layout-option-size-big: var(--wds-space-800);
1342
1393
  --wds-dropdown-list-paddings: var(--wds-space-0);
@@ -1346,6 +1397,7 @@
1346
1397
  --wds-custom-modal-header-padding-vertical: var(--wds-space-300);
1347
1398
  --wds-custom-modal-header-padding-right: var(--wds-space-200);
1348
1399
  --wds-custom-modal-header-padding-left: var(--wds-space-400);
1400
+ --wds-custom-modal-footnote-text-font-weight: var(--wds-font-weight-regular);
1349
1401
  --wds-custom-modal-footnote-padding-vertical: var(--wds-space-200);
1350
1402
  --wds-custom-modal-footnote-padding-horizontal: var(--wds-space-400);
1351
1403
  --wds-custom-modal-footnote-link-font-weight: var(--wds-font-weight-medium);
@@ -1398,6 +1450,7 @@
1398
1450
  --wds-checkbox-border-radius: var(--wds-border-radius-200);
1399
1451
  --wds-checkbox-border-active-hover: var(--wds-color-black-100-transparent-0);
1400
1452
  --wds-carousel-dots-width: var(--wds-space-200);
1453
+ --wds-card-gallery-item-title-font-weight-medium: var(--wds-font-weight-medium);
1401
1454
  --wds-card-gallery-item-padding-vertical-small: var(--wds-space-200);
1402
1455
  --wds-card-gallery-item-padding-vertical-medium: var(--wds-space-300);
1403
1456
  --wds-card-gallery-item-padding-right-small: var(--wds-space-300);
@@ -1420,6 +1473,9 @@
1420
1473
  --wds-card-header-divider-width: var(--wds-border-width-none);
1421
1474
  --wds-card-content-paddings-vertical: var(--wds-space-300);
1422
1475
  --wds-card-content-paddings-horizontal: var(--wds-space-400);
1476
+ --wds-card-content-padding-medium-top: var(--wds-space-400);
1477
+ --wds-card-content-padding-medium-horizontal: var(--wds-space-400);
1478
+ --wds-card-content-padding-medium-bottom: var(--wds-space-400);
1423
1479
  --wds-card-content-padding-medium: var(--wds-space-400);
1424
1480
  --wds-card-content-padding-large: var(--wds-space-600);
1425
1481
  --wds-card-border: var(--wds-border-radius-400);
@@ -1487,9 +1543,15 @@
1487
1543
  --wds-badge-border-radius-small: var(--wds-border-radius-100);
1488
1544
  --wds-badge-border-radius-medium: var(--wds-border-radius-100);
1489
1545
  --wds-avatar-group-gap-default: var(--wds-space-100);
1546
+ --wds-announcement-modal-top-controls-padding-top: var(--wds-space-300);
1547
+ --wds-announcement-modal-top-controls-padding-end: var(--wds-space-200);
1548
+ --wds-announcement-modal-top-controls-gap: var(--wds-space-50);
1490
1549
  --wds-announcement-modal-padding-vertical: var(--wds-space-800);
1491
1550
  --wds-announcement-modal-padding-horizontal: var(--wds-space-1300);
1551
+ --wds-announcement-modal-help-button-size: var(--wds-space-500);
1552
+ --wds-announcement-modal-help-button-icon-size: var(--wds-space-400);
1492
1553
  --wds-announcement-modal-content-gap: var(--wds-space-200);
1554
+ --wds-announcement-modal-close-button-size: var(--wds-space-500);
1493
1555
  --wds-announcement-modal-actions-padding: var(--wds-space-700);
1494
1556
  --wds-add-item-padding-vertical-tiny: var(--wds-space-200);
1495
1557
  --wds-add-item-padding-vertical-small: var(--wds-space-300);
@@ -1683,6 +1745,7 @@
1683
1745
  --wds-sidebar-header-text-dark-default: var(--wds-color-text-standard-primary-light);
1684
1746
  --wds-side-panel-title-font-size: var(--wds-font-size-heading-3);
1685
1747
  --wds-side-panel-subtitle-font-size: var(--wds-font-size-body-medium);
1748
+ --wds-side-panel-subtitle-fill: var(--wds-color-text-standard-secondary);
1686
1749
  --wds-side-panel-footer-fill: var(--wds-color-fill-surface-modal);
1687
1750
  --wds-side-panel-floating-title-font-size: var(--wds-font-size-body-medium);
1688
1751
  --wds-selector-button-text-fill-standard: var(--wds-color-text-primary);
@@ -1728,7 +1791,10 @@
1728
1791
  --wds-section-header-label-font-size-small: var(--wds-font-size-body-small);
1729
1792
  --wds-section-header-label-font-size-medium: var(--wds-font-size-body-medium);
1730
1793
  --wds-section-header-label-fill-neutral: var(--wds-color-text-standard-primary);
1794
+ --wds-section-header-fill-standard: var(--wds-color-fill-surface-standard);
1731
1795
  --wds-section-header-fill-neutral: var(--wds-color-fill-surface-neutral);
1796
+ --wds-section-header-fill-light: var(--wds-color-fill-surface-default);
1797
+ --wds-section-header-border-light: var(--wds-color-border-dark-secondary);
1732
1798
  --wds-radio-label-font-size-small: var(--wds-font-size-body-small);
1733
1799
  --wds-radio-label-font-size-medium: var(--wds-font-size-body-medium);
1734
1800
  --wds-radio-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
@@ -1750,6 +1816,10 @@
1750
1816
  --wds-pagination-fill-active: var(--wds-color-fill-standard-primary);
1751
1817
  --wds-pagination-fill: var(--wds-color-fill-standard-tertiary);
1752
1818
  --wds-pagination-arrow-fill: var(--wds-color-text-primary);
1819
+ --wds-page-header-title-minimised-font-size: var(--wds-font-size-body-small);
1820
+ --wds-page-header-title-font-weight: var(--wds-font-weight-heading-1);
1821
+ --wds-page-header-title-font-size: var(--wds-font-size-heading-1);
1822
+ --wds-page-header-subtitle-font-size: var(--wds-font-size-body-medium);
1753
1823
  --wds-number-input-icon-fill: var(--wds-color-text-primary);
1754
1824
  --wds-nestable-list-fill: var(--wds-color-fill-surface-default);
1755
1825
  --wds-multiselect-icon-fill: var(--wds-color-text-primary);
@@ -2019,7 +2089,8 @@
2019
2089
  --wds-checkbox-border-active: var(--wds-color-border-standard-secondary-active);
2020
2090
  --wds-checkbox-border: var(--wds-color-border-standard-secondary-active);
2021
2091
  --wds-carousel-controls-shadow: var(--wds-shadow-300);
2022
- --wds-card-gallery-item-title-font-size-medium: var(--wds-font-size-heading-4);
2092
+ --wds-card-gallery-item-title-font-size-medium: var(--wds-font-size-body-small);
2093
+ --wds-card-gallery-item-subtitle-side-font-size-medium: var(--wds-font-size-body-tiny);
2023
2094
  --wds-card-gallery-item-subtitle-font-size-medium: var(--wds-font-size-body-small);
2024
2095
  --wds-card-gallery-item-overlay-fill: var(--wds-color-fill-transparent-primary);
2025
2096
  --wds-card-gallery-item-fill: var(--wds-color-fill-surface-default);
@@ -2128,8 +2199,9 @@
2128
2199
  --wds-badge-outline-dark-border-color: var(--wds-color-border-dark-primary);
2129
2200
  --wds-badge-label-font-size-small: var(--wds-font-size-body-small);
2130
2201
  --wds-avatar-text-fill: var(--wds-color-text-standard-primary-light);
2202
+ --wds-announcement-modal-title-font-weight: var(--wds-font-weight-heading-1);
2131
2203
  --wds-announcement-modal-title-font-size: var(--wds-font-size-heading-1);
2132
- --wds-announcement-modal-text-font-size: var(--wds-font-size-body-medium);
2204
+ --wds-announcement-modal-text-font-size: var(--wds-font-size-body-small);
2133
2205
  --wds-announcement-modal-border-radius: var(--wds-border-radius-surface-modal);
2134
2206
  --wds-angle-input-ring-border: var(--wds-color-border-dark-secondary);
2135
2207
  --wds-angle-input-knob-fill: var(--wds-color-fill-standard-tertiary);
@@ -2174,6 +2246,8 @@
2174
2246
  --wds-segmented-toggle-label-font-line-height-small: var(--wds-font-line-height-body-small);
2175
2247
  --wds-radio-label-font-line-height-small: var(--wds-font-line-height-body-small);
2176
2248
  --wds-radio-label-font-line-height-medium: var(--wds-font-line-height-body-medium);
2249
+ --wds-page-header-title-line-height: var(--wds-font-line-height-heading-1);
2250
+ --wds-page-header-subtitle-line-height: var(--wds-font-line-height-body-medium);
2177
2251
  --wds-message-modal-title-font-line-height: var(--wds-font-line-height-heading-2);
2178
2252
  --wds-message-modal-text-font-line-height: var(--wds-font-line-height-body-medium);
2179
2253
  --wds-marketing-layout-title-line-height-tiny: var(--wds-font-line-height-body-medium);
@@ -2206,6 +2280,7 @@
2206
2280
  --wds-card-gallery-item-title-font-line-height-small: var(--wds-font-line-height-body-small);
2207
2281
  --wds-card-gallery-item-title-font-line-height-medium: var(--wds-font-line-height-heading-4);
2208
2282
  --wds-card-subtitle-line-height: var(--wds-font-line-height-body-medium);
2283
+ --wds-card-shadow: var(--wds-shadow-surface-raised);
2209
2284
  --wds-button-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
2210
2285
  --wds-button-font-line-height-small: var(--wds-font-line-height-body-small);
2211
2286
  --wds-button-font-line-height-medium: var(--wds-font-line-height-body-medium);
@@ -2213,7 +2288,7 @@
2213
2288
  --wds-button-font-line-height-extra-large: var(--wds-font-line-height-body-medium);
2214
2289
  --wds-badge-label-font-line-height-small: var(--wds-font-line-height-body-small);
2215
2290
  --wds-announcement-modal-title-font-line-height: var(--wds-font-line-height-heading-1);
2216
- --wds-announcement-modal-text-font-line-height: var(--wds-font-line-height-heading-1);
2291
+ --wds-announcement-modal-text-font-line-height: var(--wds-font-line-height-body-small);
2217
2292
  --wds-add-item-title-font-line-height-tiny: var(--wds-font-line-height-body-small);
2218
2293
  --wds-add-item-title-font-line-height-medium: var(--wds-font-line-height-body-medium);
2219
2294
  --wds-accordion-title-font-line-height-small: var(--wds-font-line-height-body-small);
package/all.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  @mixin tokens {
2
+ --wds-top-banner-shadow: 0 0 0 transparent;
2
3
  --wds-toggle-switch-width-small: 28px;
3
4
  --wds-toggle-switch-width-medium: 34px;
4
5
  --wds-toggle-switch-width-large: 46px;
@@ -66,6 +67,8 @@
66
67
  --wds-sidebar-item-level-1-fill-dark-active: #42454C;
67
68
  --wds-sidebar-divider-fill-dark-default: #42454C;
68
69
  --wds-sidebar-clear-button-fill: #5a5d63;
70
+ --wds-side-panel-standard-shadow: none;
71
+ --wds-side-panel-standard-overflow: visible;
69
72
  --wds-side-panel-floating-max-height: 576px;
70
73
  --wds-side-panel-control-layout-divider-border-width: 1px;
71
74
  --wds-shadow-y-600: 20px;
@@ -100,6 +103,9 @@
100
103
  --wds-search-expandable-padding-small: 5px;
101
104
  --wds-radio-size: 16px;
102
105
  --wds-radio-dot-size: 10px;
106
+ --wds-page-header-title-minimised-line-height: 30px;
107
+ --wds-page-header-back-button-gap: 8px;
108
+ --wds-message-modal-close-button-fill: transparent;
103
109
  --wds-marketing-layout-title-font-size-tiny: 20px;
104
110
  --wds-marketing-layout-image-border-radius: 0px;
105
111
  --wds-marketing-layout-badge-top: 9px;
@@ -113,6 +119,7 @@
113
119
  --wds-loader-stroke-width-small: 4px;
114
120
  --wds-loader-stroke-width-medium: 4px;
115
121
  --wds-loader-stroke-width-large: 4px;
122
+ --wds-list-item-select-min-height-medium: auto;
116
123
  --wds-list-item-action-subtitle-offset: 0px;
117
124
  --wds-internal-thumbnail-illustration-size-tiny: 38px;
118
125
  --wds-internal-thumbnail-illustration-size-small: 51px;
@@ -153,6 +160,7 @@
153
160
  --wds-font-letter-spacing-0: 0px;
154
161
  --wds-font-family-display: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
155
162
  --wds-font-family-default: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
163
+ --wds-editable-title-marker-line-style: dashed;
156
164
  --wds-counter-badge-padding-horizontal-tiny: 4px;
157
165
  --wds-counter-badge-padding-horizontal-medium: 8px;
158
166
  --wds-counter-badge-font-size-tiny: 10px;
@@ -334,6 +342,8 @@
334
342
  --wds-color-black-100: #000624;
335
343
  --wds-circular-progress-bar-border-width: 4px;
336
344
  --wds-checkbox-size: 16px;
345
+ --wds-card-divider-opacity: 1;
346
+ --wds-card-base-shadow: none;
337
347
  --wds-button-outline-hover: transparent;
338
348
  --wds-button-icon-offset-tiny: 12px;
339
349
  --wds-button-icon-offset-small: 12px;
@@ -343,6 +353,10 @@
343
353
  --wds-breakpoint-small: 490px;
344
354
  --wds-breakpoint-medium: 768px;
345
355
  --wds-breakpoint-large: 1186px;
356
+ --wds-breadcrumbs-height-small: 24px;
357
+ --wds-breadcrumbs-height-medium: 30px;
358
+ --wds-breadcrumbs-height-large: 36px;
359
+ --wds-breadcrumbs-divider-margin-horizontal: 8px;
346
360
  --wds-border-width-none: 0px;
347
361
  --wds-border-width-200: 2px;
348
362
  --wds-border-width-150: 1.5px;
@@ -367,6 +381,10 @@
367
381
  --wds-background-blur-50: 0px;
368
382
  --wds-background-blur-0: 0px;
369
383
  --wds-avatar-group-gap-condensed: -3px;
384
+ --wds-announcement-modal-help-button-fill: transparent;
385
+ --wds-announcement-modal-footnote-content-alignment: center;
386
+ --wds-announcement-modal-close-button-icon-size: 12px;
387
+ --wds-announcement-modal-close-button-fill: transparent;
370
388
  --wds-angle-input-knob-size: 6px;
371
389
  --wds-angle-input-knob-border: 2px;
372
390
  --wds-width-default-2: var(--wds-border-width-100);
@@ -415,7 +433,14 @@
415
433
  --wds-vertical-tabs-action-padding-horizontal-medium: var(--wds-space-400);
416
434
  --wds-variable-input-padding-vertical-tiny: var(--wds-space-50);
417
435
  --wds-variable-input-padding-vertical-small: var(--wds-space-100);
436
+ --wds-top-banner-padding-vertical: var(--wds-space-150);
437
+ --wds-top-banner-padding-horizontal-start: var(--wds-space-200);
438
+ --wds-top-banner-padding-horizontal-end: var(--wds-space-200);
418
439
  --wds-top-banner-fill: var(--wds-color-purple-200);
440
+ --wds-top-banner-dismiss-gap: var(--wds-space-200);
441
+ --wds-top-banner-content-gap: var(--wds-space-200);
442
+ --wds-top-banner-border-radius: var(--wds-border-radius-0);
443
+ --wds-top-banner-border-color: var(--wds-color-white-transparent-0);
419
444
  --wds-tooltip-padding-vertical-small: var(--wds-space-100);
420
445
  --wds-tooltip-padding-vertical-medium: var(--wds-space-200);
421
446
  --wds-tooltip-padding-horizontal-small: var(--wds-space-200);
@@ -502,6 +527,7 @@
502
527
  --wds-tag-padding-horizontal-small: var(--wds-space-200);
503
528
  --wds-tag-padding-horizontal-medium: var(--wds-space-200);
504
529
  --wds-tag-padding-horizontal-large: var(--wds-space-300);
530
+ --wds-tag-list-action-gap: var(--wds-space-100);
505
531
  --wds-tag-border-radius-tiny: var(--wds-border-radius-full);
506
532
  --wds-tag-border-radius-small: var(--wds-border-radius-full);
507
533
  --wds-tag-border-radius-medium: var(--wds-border-radius-full);
@@ -528,7 +554,16 @@
528
554
  --wds-table-list-item-indentation-level-2: var(--wds-space-200);
529
555
  --wds-table-list-item-gap: var(--wds-space-400);
530
556
  --wds-table-list-item-fill-highlight: var(--wds-color-blue-600);
557
+ --wds-table-list-item-controls-padding-medium: var(--wds-space-300);
558
+ --wds-table-list-item-controls-gap-medium: var(--wds-space-200);
559
+ --wds-table-list-item-checkbox-offset: var(--wds-space-0);
531
560
  --wds-table-list-item-border-radius: var(--wds-border-radius-0);
561
+ --wds-table-action-cell-secondary-action-gap-tiny: var(--wds-space-100);
562
+ --wds-table-action-cell-secondary-action-gap-small: var(--wds-space-200);
563
+ --wds-table-action-cell-secondary-action-gap-medium: var(--wds-space-200);
564
+ --wds-table-action-cell-primary-action-gap-tiny: var(--wds-space-100);
565
+ --wds-table-action-cell-primary-action-gap-small: var(--wds-space-200);
566
+ --wds-table-action-cell-primary-action-gap-medium: var(--wds-space-200);
532
567
  --wds-swatches-swatch-size-tiny: var(--wds-space-400);
533
568
  --wds-swatches-swatch-size-small: var(--wds-space-500);
534
569
  --wds-swatches-swatch-size-medium: var(--wds-space-600);
@@ -615,10 +650,13 @@
615
650
  --wds-sidebar-divider-fill-neutral-default: var(--wds-color-black-550);
616
651
  --wds-sidebar-divider-fill-light-default: var(--wds-color-black-550);
617
652
  --wds-side-panel-title-font-letter-spacing: var(--wds-font-letter-spacing-0);
653
+ --wds-side-panel-subtitle-font-weight: var(--wds-font-weight-regular);
654
+ --wds-side-panel-standard-corner-radius: var(--wds-border-radius-0);
618
655
  --wds-side-panel-header-padding-vertical: var(--wds-space-300);
619
656
  --wds-side-panel-header-padding-right: var(--wds-space-150);
620
657
  --wds-side-panel-header-padding-left: var(--wds-space-400);
621
658
  --wds-side-panel-header-divider-height: var(--wds-border-width-100);
659
+ --wds-side-panel-header-content-padding-right: var(--wds-space-0);
622
660
  --wds-side-panel-footnote-padding-vertical: var(--wds-space-200);
623
661
  --wds-side-panel-footnote-padding-horizontal: var(--wds-space-400);
624
662
  --wds-side-panel-footer-padding-vertical: var(--wds-space-300);
@@ -812,6 +850,9 @@
812
850
  --wds-pagination-padding-vertical: var(--wds-space-50);
813
851
  --wds-pagination-padding-horizontal: var(--wds-space-50);
814
852
  --wds-pagination-gap: var(--wds-space-100);
853
+ --wds-page-header-title-minimised-letter-spacing: var(--wds-font-letter-spacing-0);
854
+ --wds-page-header-title-minimised-font-weight: var(--wds-font-weight-medium);
855
+ --wds-page-header-title-actions-gap: var(--wds-space-0);
815
856
  --wds-page-header-padding-vertical-small: var(--wds-space-300);
816
857
  --wds-page-header-padding-vertical: var(--wds-space-400);
817
858
  --wds-page-header-padding-horizontal-small: var(--wds-space-400);
@@ -829,10 +870,17 @@
829
870
  --wds-mobile-modal-content-padding-vertical: var(--wds-space-400);
830
871
  --wds-mobile-modal-content-padding-horizontal: var(--wds-space-400);
831
872
  --wds-message-modal-top-controls-paddings: var(--wds-space-100);
873
+ --wds-message-modal-top-controls-gap: var(--wds-space-50);
832
874
  --wds-message-modal-title-font-family: var(--wds-font-family-default);
833
875
  --wds-message-modal-padding-vertical: var(--wds-space-400);
834
876
  --wds-message-modal-padding-horizontal: var(--wds-space-400);
877
+ --wds-message-modal-illustration-margin-top: var(--wds-space-300);
878
+ --wds-message-modal-illustration-margin-start: var(--wds-space-400);
879
+ --wds-message-modal-illustration-content-gap: var(--wds-space-400);
880
+ --wds-message-modal-help-button-size: var(--wds-space-500);
835
881
  --wds-message-modal-content-gap: var(--wds-space-200);
882
+ --wds-message-modal-close-button-size: var(--wds-space-500);
883
+ --wds-message-modal-close-button-icon-size: var(--wds-space-200);
836
884
  --wds-marketing-page-paddings-vertical-medium: var(--wds-space-500);
837
885
  --wds-marketing-page-paddings-vertical-large: var(--wds-space-800);
838
886
  --wds-marketing-page-paddings-horizontal-medium: var(--wds-space-800);
@@ -1027,6 +1075,9 @@
1027
1075
  --wds-empty-state-section-content-paddings: var(--wds-space-250);
1028
1076
  --wds-empty-state-page-content-paddings: var(--wds-space-300);
1029
1077
  --wds-empty-state-border-radius: var(--wds-border-radius-400);
1078
+ --wds-editable-title-placeholder-fill: var(--wds-color-black-550);
1079
+ --wds-editable-title-marker-fill-active: var(--wds-color-blue-100);
1080
+ --wds-editable-title-marker-fill: var(--wds-color-black-400);
1030
1081
  --wds-dropdown-list-paddings: var(--wds-space-0);
1031
1082
  --wds-dropdown-layout-option-size-small: var(--wds-space-600);
1032
1083
  --wds-dropdown-layout-option-size-big: var(--wds-space-800);
@@ -1036,6 +1087,7 @@
1036
1087
  --wds-custom-modal-header-padding-vertical: var(--wds-space-300);
1037
1088
  --wds-custom-modal-header-padding-right: var(--wds-space-200);
1038
1089
  --wds-custom-modal-header-padding-left: var(--wds-space-400);
1090
+ --wds-custom-modal-footnote-text-font-weight: var(--wds-font-weight-regular);
1039
1091
  --wds-custom-modal-footnote-padding-vertical: var(--wds-space-200);
1040
1092
  --wds-custom-modal-footnote-padding-horizontal: var(--wds-space-400);
1041
1093
  --wds-custom-modal-footnote-link-font-weight: var(--wds-font-weight-medium);
@@ -1395,6 +1447,7 @@
1395
1447
  --wds-card-header-padding-vertical: var(--wds-space-300);
1396
1448
  --wds-card-header-padding-horizontal: var(--wds-space-400);
1397
1449
  --wds-card-header-divider-width: var(--wds-border-width-none);
1450
+ --wds-card-gallery-item-title-font-weight-medium: var(--wds-font-weight-medium);
1398
1451
  --wds-card-gallery-item-padding-vertical-small: var(--wds-space-200);
1399
1452
  --wds-card-gallery-item-padding-vertical-medium: var(--wds-space-300);
1400
1453
  --wds-card-gallery-item-padding-right-small: var(--wds-space-300);
@@ -1409,6 +1462,9 @@
1409
1462
  --wds-card-gallery-item-border-radius-0: var(--wds-border-radius-0);
1410
1463
  --wds-card-content-paddings-vertical: var(--wds-space-300);
1411
1464
  --wds-card-content-paddings-horizontal: var(--wds-space-400);
1465
+ --wds-card-content-padding-medium-top: var(--wds-space-400);
1466
+ --wds-card-content-padding-medium-horizontal: var(--wds-space-400);
1467
+ --wds-card-content-padding-medium-bottom: var(--wds-space-400);
1412
1468
  --wds-card-content-padding-medium: var(--wds-space-400);
1413
1469
  --wds-card-content-padding-large: var(--wds-space-600);
1414
1470
  --wds-card-border: var(--wds-border-radius-400);
@@ -1487,9 +1543,15 @@
1487
1543
  --wds-background-blur-surface-overlay: var(--wds-background-blur-0);
1488
1544
  --wds-background-blur-modal: var(--wds-background-blur-0);
1489
1545
  --wds-avatar-group-gap-default: var(--wds-space-100);
1546
+ --wds-announcement-modal-top-controls-padding-top: var(--wds-space-300);
1547
+ --wds-announcement-modal-top-controls-padding-end: var(--wds-space-200);
1548
+ --wds-announcement-modal-top-controls-gap: var(--wds-space-50);
1490
1549
  --wds-announcement-modal-padding-vertical: var(--wds-space-800);
1491
1550
  --wds-announcement-modal-padding-horizontal: var(--wds-space-1300);
1551
+ --wds-announcement-modal-help-button-size: var(--wds-space-500);
1552
+ --wds-announcement-modal-help-button-icon-size: var(--wds-space-400);
1492
1553
  --wds-announcement-modal-content-gap: var(--wds-space-200);
1554
+ --wds-announcement-modal-close-button-size: var(--wds-space-500);
1493
1555
  --wds-announcement-modal-actions-padding: var(--wds-space-700);
1494
1556
  --wds-add-item-padding-vertical-tiny: var(--wds-space-200);
1495
1557
  --wds-add-item-padding-vertical-small: var(--wds-space-300);
@@ -1665,6 +1727,7 @@
1665
1727
  --wds-sidebar-header-text-dark-default: var(--wds-color-text-standard-primary-light);
1666
1728
  --wds-side-panel-title-font-size: var(--wds-font-size-heading-3);
1667
1729
  --wds-side-panel-subtitle-font-size: var(--wds-font-size-body-medium);
1730
+ --wds-side-panel-subtitle-fill: var(--wds-color-text-standard-secondary);
1668
1731
  --wds-side-panel-footer-fill: var(--wds-color-fill-surface-modal);
1669
1732
  --wds-side-panel-floating-title-font-size: var(--wds-font-size-body-medium);
1670
1733
  --wds-shadow-surface-raised: var(--wds-shadow-200);
@@ -1717,7 +1780,10 @@
1717
1780
  --wds-section-header-label-font-size-small: var(--wds-font-size-body-small);
1718
1781
  --wds-section-header-label-font-size-medium: var(--wds-font-size-body-medium);
1719
1782
  --wds-section-header-label-fill-neutral: var(--wds-color-text-standard-primary);
1783
+ --wds-section-header-fill-standard: var(--wds-color-fill-surface-standard);
1720
1784
  --wds-section-header-fill-neutral: var(--wds-color-fill-surface-neutral);
1785
+ --wds-section-header-fill-light: var(--wds-color-fill-surface-default);
1786
+ --wds-section-header-border-light: var(--wds-color-border-dark-secondary);
1721
1787
  --wds-radio-label-font-size-small: var(--wds-font-size-body-small);
1722
1788
  --wds-radio-label-font-size-medium: var(--wds-font-size-body-medium);
1723
1789
  --wds-radio-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
@@ -1739,6 +1805,10 @@
1739
1805
  --wds-pagination-fill-active: var(--wds-color-fill-standard-primary);
1740
1806
  --wds-pagination-fill: var(--wds-color-fill-standard-tertiary);
1741
1807
  --wds-pagination-arrow-fill: var(--wds-color-text-primary);
1808
+ --wds-page-header-title-minimised-font-size: var(--wds-font-size-body-small);
1809
+ --wds-page-header-title-font-weight: var(--wds-font-weight-heading-1);
1810
+ --wds-page-header-title-font-size: var(--wds-font-size-heading-1);
1811
+ --wds-page-header-subtitle-font-size: var(--wds-font-size-body-medium);
1742
1812
  --wds-number-input-icon-fill: var(--wds-color-text-primary);
1743
1813
  --wds-nestable-list-fill: var(--wds-color-fill-surface-default);
1744
1814
  --wds-multiselect-icon-fill: var(--wds-color-text-primary);
@@ -2021,7 +2091,8 @@
2021
2091
  --wds-carousel-controls-shadow: var(--wds-shadow-300);
2022
2092
  --wds-card-subtitle-font-size: var(--wds-font-size-body-medium);
2023
2093
  --wds-card-subtitle-color: var(--wds-color-text-standard-secondary);
2024
- --wds-card-gallery-item-title-font-size-medium: var(--wds-font-size-heading-4);
2094
+ --wds-card-gallery-item-title-font-size-medium: var(--wds-font-size-body-small);
2095
+ --wds-card-gallery-item-subtitle-side-font-size-medium: var(--wds-font-size-body-tiny);
2025
2096
  --wds-card-gallery-item-subtitle-font-size-medium: var(--wds-font-size-body-small);
2026
2097
  --wds-card-gallery-item-overlay-fill: var(--wds-color-fill-transparent-primary);
2027
2098
  --wds-card-gallery-item-fill: var(--wds-color-fill-surface-default);
@@ -2128,8 +2199,9 @@
2128
2199
  --wds-badge-outline-dark-border-color: var(--wds-color-border-dark-primary);
2129
2200
  --wds-badge-label-font-size-small: var(--wds-font-size-body-small);
2130
2201
  --wds-avatar-text-fill: var(--wds-color-text-standard-primary-light);
2202
+ --wds-announcement-modal-title-font-weight: var(--wds-font-weight-heading-1);
2131
2203
  --wds-announcement-modal-title-font-size: var(--wds-font-size-heading-1);
2132
- --wds-announcement-modal-text-font-size: var(--wds-font-size-body-medium);
2204
+ --wds-announcement-modal-text-font-size: var(--wds-font-size-body-small);
2133
2205
  --wds-announcement-modal-border-radius: var(--wds-border-radius-surface-modal);
2134
2206
  --wds-angle-input-ring-border: var(--wds-color-border-dark-secondary);
2135
2207
  --wds-angle-input-knob-fill: var(--wds-color-fill-standard-tertiary);
@@ -2174,6 +2246,8 @@
2174
2246
  --wds-segmented-toggle-label-font-line-height-small: var(--wds-font-line-height-body-small);
2175
2247
  --wds-radio-label-font-line-height-small: var(--wds-font-line-height-body-small);
2176
2248
  --wds-radio-label-font-line-height-medium: var(--wds-font-line-height-body-medium);
2249
+ --wds-page-header-title-line-height: var(--wds-font-line-height-heading-1);
2250
+ --wds-page-header-subtitle-line-height: var(--wds-font-line-height-body-medium);
2177
2251
  --wds-message-modal-title-font-line-height: var(--wds-font-line-height-heading-2);
2178
2252
  --wds-message-modal-text-font-line-height: var(--wds-font-line-height-body-medium);
2179
2253
  --wds-marketing-layout-title-line-height-tiny: var(--wds-font-line-height-body-medium);
@@ -2204,6 +2278,7 @@
2204
2278
  --wds-checkbox-label-font-line-height-small: var(--wds-font-line-height-body-small);
2205
2279
  --wds-checkbox-label-font-line-height-medium: var(--wds-font-line-height-body-medium);
2206
2280
  --wds-card-subtitle-line-height: var(--wds-font-line-height-body-medium);
2281
+ --wds-card-shadow: var(--wds-shadow-surface-raised);
2207
2282
  --wds-card-gallery-item-title-font-line-height-small: var(--wds-font-line-height-body-small);
2208
2283
  --wds-card-gallery-item-title-font-line-height-medium: var(--wds-font-line-height-heading-4);
2209
2284
  --wds-button-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
@@ -2213,7 +2288,7 @@
2213
2288
  --wds-button-font-line-height-extra-large: var(--wds-font-line-height-body-medium);
2214
2289
  --wds-badge-label-font-line-height-small: var(--wds-font-line-height-body-small);
2215
2290
  --wds-announcement-modal-title-font-line-height: var(--wds-font-line-height-heading-1);
2216
- --wds-announcement-modal-text-font-line-height: var(--wds-font-line-height-heading-1);
2291
+ --wds-announcement-modal-text-font-line-height: var(--wds-font-line-height-body-small);
2217
2292
  --wds-add-item-title-font-line-height-tiny: var(--wds-font-line-height-body-small);
2218
2293
  --wds-add-item-title-font-line-height-medium: var(--wds-font-line-height-body-medium);
2219
2294
  --wds-accordion-title-font-line-height-small: var(--wds-font-line-height-body-small);