@wix/design-system-tokens 1.219.2 → 1.220.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 (22) hide show
  1. package/CHANGELOG.md +26 -0
  2. package/all.css +37 -0
  3. package/all.scss +37 -0
  4. package/all.st.css +74 -0
  5. package/component.st.css +74 -0
  6. package/odeditor/all.css +60 -30
  7. package/odeditor/all.scss +60 -30
  8. package/odeditor/all.st.css +90 -30
  9. package/odeditor/component.st.css +90 -30
  10. package/odeditor-dark/all.css +77 -38
  11. package/odeditor-dark/all.scss +77 -38
  12. package/odeditor-dark/all.st.css +116 -38
  13. package/odeditor-dark/component.st.css +116 -38
  14. package/package.json +2 -2
  15. package/studio/all.css +37 -0
  16. package/studio/all.scss +37 -0
  17. package/studio/all.st.css +74 -0
  18. package/studio/component.st.css +74 -0
  19. package/wixel/all.css +37 -0
  20. package/wixel/all.scss +37 -0
  21. package/wixel/all.st.css +74 -0
  22. package/wixel/component.st.css +74 -0
package/CHANGELOG.md CHANGED
@@ -1,3 +1,29 @@
1
+ ## 1.220.0
2
+
3
+ ### Minor Changes
4
+
5
+ - [#16709](https://github.com/wix-private/wix-design-systems/pull/16709) [`52f0e47`](https://github.com/wix-private/wix-design-systems/commit/52f0e475cfe5f86f5a27541c7c0a6ad2744ab8da) - Add Page.Section tokens consumed by the Harmony restyle: `--wds-page-section-title-font-size`, `--wds-page-section-title-font-weight`, `--wds-page-section-title-line-height`, `--wds-page-section-title-letter-spacing`, `--wds-page-section-subtitle-font-size`, `--wds-page-section-subtitle-line-height`, `--wds-page-section-gap`, `--wds-page-section-padding-top`, `--wds-page-section-padding-bottom`, `--wds-page-section-padding-bottom-with-divider` and `--wds-page-section-divider-display`. Harmony (odeditor) carries the new values (heading-3 title, tiny subtitle, 4px gap, 4px bottom padding or 8px with `showDivider`, hidden divider); every other theme, including Studio 2.0 (odeditor-dark), defines them at its currently rendered values, so nothing changes outside Harmony.
6
+
7
+ - [#16706](https://github.com/wix-private/wix-design-systems/pull/16706) [`ffeb35a`](https://github.com/wix-private/wix-design-systems/commit/ffeb35a98b785c219ec18bd0573f188ca6f04a0b) - New `--wds-scrollbar-width` token: 4px in Harmony (odeditor) and Studio 2.0 (odeditor-dark), 6px in all other themes. In Harmony (odeditor), `--wds-scrollbar-fill` changes from `#dedede` to `#a8a6a5`. New `--wds-sidebar-scrollbar-fill-light-hover` and `--wds-sidebar-scrollbar-fill-neutral-hover` tokens, both `#a8a6a5` in Harmony (odeditor).
8
+
9
+ - [#16674](https://github.com/wix-private/wix-design-systems/pull/16674) [`94307e3`](https://github.com/wix-private/wix-design-systems/commit/94307e3a26660de4ead8f6aa0303ce1c03d114e9) - Add two TableListItem tokens.
10
+ - `--wds-table-list-item-fill-hover-draggable` fills a hovered draggable row: `--wds-color-fill-dark-tertiary-hover` in Harmony (odeditor) and Studio 2.0 (odeditor-dark), `--wds-color-blue-500` elsewhere, which preserves the blue those themes render today.
11
+ - `--wds-table-list-item-drag-handle-color-hover` colors the drag handle while the row is hovered: `--wds-color-text-standard-primary` in Harmony (odeditor) and Studio 2.0 (odeditor-dark), `--wds-color-fill-standard-primary` elsewhere, which preserves today's blue.
12
+
13
+ No other tokens affected.
14
+
15
+ - [#16616](https://github.com/wix-private/wix-design-systems/pull/16616) [`b169627`](https://github.com/wix-private/wix-design-systems/commit/b1696279e59f5e4cb6b95892ce06b9a559eb7e66) - Add seven TableToolbar spacing tokens — `--wds-table-toolbar-padding-block-start`, `--wds-table-toolbar-padding-block-end`, `--wds-table-toolbar-item-gap`, `--wds-table-toolbar-button-gap`, `--wds-table-toolbar-icon-button-gap`, `--wds-table-toolbar-divider-gap` and `--wds-table-toolbar-divider-gap-group-start` — covering the toolbar's vertical padding and the gaps between adjacent items, `layout="button"` items, `layout="iconButton"` items and dividers. Only Harmony (odeditor) and Studio 2.0 (odeditor-dark) get new values; every other theme resolves to the spacing the toolbar hardcoded before, and no other tokens are affected.
16
+
17
+ ### Patch Changes
18
+
19
+ - [#16694](https://github.com/wix-private/wix-design-systems/pull/16694) [`f2765b9`](https://github.com/wix-private/wix-design-systems/commit/f2765b9cc102b56723e16240c867bf77d3032eef) - Add `--wds-avatar-group-counter-*` component tokens (fill, fill-gradient-1/2, fill-hover, border-fill, border-width, background-blur) to the default, Studio, and Wixel themes with values matching the current AvatarGroup counter appearance. The Harmony themes (odeditor, odeditor-dark) already defined these tokens; this makes the token set consistent across all themes so the component can consume them.
20
+
21
+ - [#16704](https://github.com/wix-private/wix-design-systems/pull/16704) [`8135a07`](https://github.com/wix-private/wix-design-systems/commit/8135a07f6617457b8f40f45fe9398e650c041a74) - New tokens `--wds-selector-list-item-fill-hover`, `--wds-selector-list-item-fill-active`, and `--wds-selector-list-item-fill-focus` control SelectorList item state backgrounds per theme; in Harmony (odeditor) they resolve to `#f0efef`/`#e8e7e7`/`#f0efef` and in Studio 2.0 (odeditor-dark) to `#3A3A3B`/`#454544`/`#3A3A3B`.
22
+
23
+ - [#16688](https://github.com/wix-private/wix-design-systems/pull/16688) [`67287ad`](https://github.com/wix-private/wix-design-systems/commit/67287ad304d004830f53e2691e9d8a49b3f57898) - MarketingLayout tokens rebuilt against the BM Reimagined definitions spec in Harmony (odeditor) and Studio 2.0 (odeditor-dark). Content insets are now 20px outer / 8px towards the image (`--wds-marketing-layout-padding-*`), image insets 12px (`--wds-marketing-layout-image-padding-*`), title line-height 20px with an 8px gap to the description (`--wds-marketing-layout-title-line-height-*`, `--wds-marketing-layout-title-gap-*`), gap above actions 24px (`--wds-marketing-layout-actions-gap-*`), in-flow badge gap 8px (`--wds-marketing-layout-badge-gap`). Description color changed from `#767574` to `#525150` in Harmony (odeditor) (`--wds-marketing-layout-description-color`); Studio 2.0 (odeditor-dark) now follows the same spec (title 16px/20px bold, description 12px/16px medium `#A8A6A5`, image radius 8px) instead of the legacy default-theme layout.
24
+
25
+ - [#16691](https://github.com/wix-private/wix-design-systems/pull/16691) [`75b18ae`](https://github.com/wix-private/wix-design-systems/commit/75b18ae36c7675ebde9676a44a8157131a59f585) - Add `--wds-statistics-widget-padding-horizontal-tiny/large` and `--wds-statistics-widget-padding-vertical-tiny/large` tokens for the StatisticsWidget item's box and its column divider inset. Default and Studio get `24px` horizontal with `12px`/`18px` vertical; Harmony (odeditor), Studio 2.0 (odeditor-dark) and Wixel get `12px` horizontal with `12px`/`20px` vertical, matching their current rendering. No other tokens affected.
26
+
1
27
  ## 1.219.2
2
28
 
3
29
  ### Patch Changes
package/all.css CHANGED
@@ -286,6 +286,13 @@
286
286
  --wds-toggle-button-shadow-spread-tertiary: -0.75px;
287
287
  --wds-toggle-button-shadow-spread-secondary: -1.5px;
288
288
  --wds-tabs-selection-height: 3px;
289
+ --wds-table-toolbar-padding-block-end: 15px;
290
+ --wds-table-toolbar-padding-block-start: 15px;
291
+ --wds-table-toolbar-divider-gap-group-start: 24px;
292
+ --wds-table-toolbar-divider-gap: 12px;
293
+ --wds-table-toolbar-icon-button-gap: 6px;
294
+ --wds-table-toolbar-button-gap: 6px;
295
+ --wds-table-toolbar-item-gap: 12px;
289
296
  --wds-swatches-swatch-active-border-radius-small: 5px;
290
297
  --wds-swatches-swatch-active-border-radius-medium: 9px;
291
298
  --wds-status-toast-width: 600px;
@@ -299,7 +306,9 @@
299
306
  --wds-slider-slider-knob-shadow: false;
300
307
  --wds-slider-slider-knob-border-width-hover: 12px;
301
308
  --wds-slider-slider-knob-border-width: 4px;
309
+ --wds-sidebar-scrollbar-fill-neutral-hover: #A8CAFF;
302
310
  --wds-sidebar-scrollbar-fill-neutral-default: #A8CAFF;
311
+ --wds-sidebar-scrollbar-fill-light-hover: rgba(0, 6, 36, 0.6600);
303
312
  --wds-sidebar-scrollbar-fill-light-default: #A8CAFF;
304
313
  --wds-sidebar-scrollbar-fill-dark-hover: #9C9EA6;
305
314
  --wds-sidebar-scrollbar-fill-dark-default: #717379;
@@ -320,8 +329,10 @@
320
329
  --wds-side-panel-control-layout-divider-border-width: 1px;
321
330
  --wds-section-helper-prefix-offset-margin: 6px;
322
331
  --wds-search-expandable-padding-small: 5px;
332
+ --wds-scrollbar-width: 6px;
323
333
  --wds-radio-size: 16px;
324
334
  --wds-radio-dot-size: 10px;
335
+ --wds-page-section-divider-display: block;
325
336
  --wds-page-header-title-minimised-line-height: 30px;
326
337
  --wds-page-header-breadcrumbs-offset-small: -6px;
327
338
  --wds-page-header-breadcrumbs-offset-medium: -9px;
@@ -391,6 +402,7 @@
391
402
  --wds-breadcrumbs-height-large: 36px;
392
403
  --wds-breadcrumbs-divider-margin-horizontal: 8px;
393
404
  --wds-avatar-group-gap-condensed: -3px;
405
+ --wds-avatar-group-counter-background-blur: 0px;
394
406
  --wds-avatar-size-tiny: 18px;
395
407
  --wds-announcement-modal-help-button-fill: transparent;
396
408
  --wds-announcement-modal-footnote-content-alignment: center;
@@ -1004,6 +1016,7 @@
1004
1016
  --wds-table-list-item-indentation-level-3: var(--wds-space-600);
1005
1017
  --wds-table-list-item-indentation-level-2: var(--wds-space-200);
1006
1018
  --wds-table-list-item-gap: var(--wds-space-400);
1019
+ --wds-table-list-item-fill-hover-draggable: var(--wds-color-blue-500);
1007
1020
  --wds-table-list-item-fill-highlight: var(--wds-color-blue-600);
1008
1021
  --wds-table-list-item-controls-padding-medium: var(--wds-space-300);
1009
1022
  --wds-table-list-item-controls-gap-medium: var(--wds-space-200);
@@ -1032,6 +1045,10 @@
1032
1045
  --wds-statistics-widget-value-font-weight-tiny: var(--wds-font-weight-bold);
1033
1046
  --wds-statistics-widget-value-font-letter-spacing: var(--wds-font-letter-spacing-0);
1034
1047
  --wds-statistics-widget-value-font-family-tiny: var(--wds-font-family-default);
1048
+ --wds-statistics-widget-padding-vertical-tiny: var(--wds-space-200);
1049
+ --wds-statistics-widget-padding-vertical-large: var(--wds-space-300);
1050
+ --wds-statistics-widget-padding-horizontal-tiny: var(--wds-space-400);
1051
+ --wds-statistics-widget-padding-horizontal-large: var(--wds-space-400);
1035
1052
  --wds-social-preview-content-padding-vertical: var(--wds-space-150);
1036
1053
  --wds-social-preview-content-padding-horizontal: var(--wds-space-200);
1037
1054
  --wds-social-post-preview-content-padding-vertical: var(--wds-space-200);
@@ -1120,6 +1137,7 @@
1120
1137
  --wds-selector-list-item-padding-vertical-medium: var(--wds-space-200);
1121
1138
  --wds-selector-list-item-padding-horizontal-small: var(--wds-space-300);
1122
1139
  --wds-selector-list-item-padding-horizontal-medium: var(--wds-space-400);
1140
+ --wds-selector-list-item-fill-focus: var(--wds-color-blue-500);
1123
1141
  --wds-selector-button-size-small: var(--wds-space-500);
1124
1142
  --wds-selector-button-size-medium: var(--wds-space-600);
1125
1143
  --wds-selector-button-size-large: var(--wds-space-700);
@@ -1217,6 +1235,10 @@
1217
1235
  --wds-pagination-padding-vertical: var(--wds-space-50);
1218
1236
  --wds-pagination-padding-horizontal: var(--wds-space-50);
1219
1237
  --wds-pagination-gap: var(--wds-space-100);
1238
+ --wds-page-section-padding-top: var(--wds-space-400);
1239
+ --wds-page-section-padding-bottom-with-divider: var(--wds-space-0);
1240
+ --wds-page-section-padding-bottom: var(--wds-space-200);
1241
+ --wds-page-section-gap: var(--wds-space-0);
1220
1242
  --wds-page-header-title-minimised-letter-spacing: var(--wds-font-letter-spacing-0);
1221
1243
  --wds-page-header-title-minimised-font-weight: var(--wds-font-weight-medium);
1222
1244
  --wds-page-header-title-actions-gap: var(--wds-space-0);
@@ -1566,6 +1588,7 @@
1566
1588
  --wds-badge-border-radius-small: var(--wds-border-radius-100);
1567
1589
  --wds-badge-border-radius-medium: var(--wds-border-radius-100);
1568
1590
  --wds-avatar-group-gap-default: var(--wds-space-100);
1591
+ --wds-avatar-group-counter-border-width: var(--wds-border-width-200);
1569
1592
  --wds-avatar-color-7-fill: var(--wds-color-fill-accent-12);
1570
1593
  --wds-announcement-modal-top-controls-padding-top: var(--wds-space-300);
1571
1594
  --wds-announcement-modal-top-controls-padding-end: var(--wds-space-200);
@@ -1752,6 +1775,7 @@
1752
1775
  --wds-table-list-item-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
1753
1776
  --wds-table-list-item-fill-active: var(--wds-color-fill-standard-tertiary-active);
1754
1777
  --wds-table-list-item-fill: var(--wds-color-fill-standard-tertiary);
1778
+ --wds-table-list-item-drag-handle-color-hover: var(--wds-color-fill-standard-primary);
1755
1779
  --wds-table-list-item-drag-handle-color: var(--wds-color-text-primary);
1756
1780
  --wds-table-list-item-border-color: var(--wds-color-border-standard-secondary);
1757
1781
  --wds-swatches-fill-disabled: var(--wds-color-fill-standard-secondary-disabled);
@@ -1775,6 +1799,8 @@
1775
1799
  --wds-side-panel-subtitle-fill: var(--wds-color-text-standard-secondary);
1776
1800
  --wds-side-panel-footer-fill: var(--wds-color-fill-surface-modal);
1777
1801
  --wds-side-panel-floating-title-font-size: var(--wds-font-size-body-medium);
1802
+ --wds-selector-list-item-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
1803
+ --wds-selector-list-item-fill-active: var(--wds-color-fill-standard-tertiary-active);
1778
1804
  --wds-selector-button-text-fill-standard: var(--wds-color-text-primary);
1779
1805
  --wds-selector-button-text-fill-pressed-standard: var(--wds-color-text-primary);
1780
1806
  --wds-selector-button-text-fill-pressed-dark: var(--wds-color-text-primary);
@@ -1844,6 +1870,10 @@
1844
1870
  --wds-pagination-fill-active: var(--wds-color-fill-standard-primary);
1845
1871
  --wds-pagination-fill: var(--wds-color-fill-standard-tertiary);
1846
1872
  --wds-pagination-arrow-fill: var(--wds-color-text-primary);
1873
+ --wds-page-section-title-letter-spacing: var(--wds-font-letter-spacing-heading-4);
1874
+ --wds-page-section-title-font-weight: var(--wds-font-weight-heading-4);
1875
+ --wds-page-section-title-font-size: var(--wds-font-size-heading-4);
1876
+ --wds-page-section-subtitle-font-size: var(--wds-font-size-body-medium);
1847
1877
  --wds-page-header-title-minimised-font-size: var(--wds-font-size-body-small);
1848
1878
  --wds-page-header-title-font-weight: var(--wds-font-weight-heading-1);
1849
1879
  --wds-page-header-title-font-size: var(--wds-font-size-heading-1);
@@ -2232,6 +2262,11 @@
2232
2262
  --wds-badge-outline-dark-fill: var(--wds-color-fill-dark-tertiary);
2233
2263
  --wds-badge-outline-dark-border-color: var(--wds-color-border-dark-primary);
2234
2264
  --wds-badge-label-font-size-small: var(--wds-font-size-body-small);
2265
+ --wds-avatar-group-counter-fill-hover: var(--wds-color-fill-light-primary);
2266
+ --wds-avatar-group-counter-fill-gradient-2: var(--wds-color-fill-transparent-tertiary);
2267
+ --wds-avatar-group-counter-fill-gradient-1: var(--wds-color-fill-transparent-tertiary);
2268
+ --wds-avatar-group-counter-fill: var(--wds-color-fill-light-primary);
2269
+ --wds-avatar-group-counter-border-fill: var(--wds-color-fill-dark-secondary-disabled);
2235
2270
  --wds-avatar-text-fill: var(--wds-color-text-standard-primary-light);
2236
2271
  --wds-announcement-modal-title-font-weight: var(--wds-font-weight-heading-1);
2237
2272
  --wds-announcement-modal-title-font-size: var(--wds-font-size-heading-1);
@@ -2283,6 +2318,8 @@
2283
2318
  --wds-segmented-toggle-label-font-line-height-small: var(--wds-font-line-height-body-small);
2284
2319
  --wds-radio-label-font-line-height-small: var(--wds-font-line-height-body-small);
2285
2320
  --wds-radio-label-font-line-height-medium: var(--wds-font-line-height-body-medium);
2321
+ --wds-page-section-title-line-height: var(--wds-font-line-height-heading-4);
2322
+ --wds-page-section-subtitle-line-height: var(--wds-font-line-height-body-medium);
2286
2323
  --wds-page-header-title-line-height: var(--wds-font-line-height-heading-1);
2287
2324
  --wds-page-header-subtitle-line-height: var(--wds-font-line-height-body-medium);
2288
2325
  --wds-message-modal-title-font-line-height: var(--wds-font-line-height-heading-2);
package/all.scss CHANGED
@@ -11,6 +11,13 @@
11
11
  --wds-toggle-button-shadow-spread-tertiary: -0.75px;
12
12
  --wds-toggle-button-shadow-spread-secondary: -1.5px;
13
13
  --wds-tabs-selection-height: 3px;
14
+ --wds-table-toolbar-padding-block-start: 15px;
15
+ --wds-table-toolbar-padding-block-end: 15px;
16
+ --wds-table-toolbar-item-gap: 12px;
17
+ --wds-table-toolbar-icon-button-gap: 6px;
18
+ --wds-table-toolbar-divider-gap-group-start: 24px;
19
+ --wds-table-toolbar-divider-gap: 12px;
20
+ --wds-table-toolbar-button-gap: 6px;
14
21
  --wds-swatches-swatch-active-border-radius-small: 5px;
15
22
  --wds-swatches-swatch-active-border-radius-medium: 9px;
16
23
  --wds-status-toast-width: 600px;
@@ -54,7 +61,9 @@
54
61
  --wds-slider-slider-knob-shadow: false;
55
62
  --wds-slider-slider-knob-border-width-hover: 12px;
56
63
  --wds-slider-slider-knob-border-width: 4px;
64
+ --wds-sidebar-scrollbar-fill-neutral-hover: #A8CAFF;
57
65
  --wds-sidebar-scrollbar-fill-neutral-default: #A8CAFF;
66
+ --wds-sidebar-scrollbar-fill-light-hover: rgba(0, 6, 36, 0.6600);
58
67
  --wds-sidebar-scrollbar-fill-light-default: #A8CAFF;
59
68
  --wds-sidebar-scrollbar-fill-dark-hover: #9C9EA6;
60
69
  --wds-sidebar-scrollbar-fill-dark-default: #717379;
@@ -103,8 +112,10 @@
103
112
  --wds-shadow-blur-0: 0px;
104
113
  --wds-section-helper-prefix-offset-margin: 6px;
105
114
  --wds-search-expandable-padding-small: 5px;
115
+ --wds-scrollbar-width: 6px;
106
116
  --wds-radio-size: 16px;
107
117
  --wds-radio-dot-size: 10px;
118
+ --wds-page-section-divider-display: block;
108
119
  --wds-page-header-title-minimised-line-height: 30px;
109
120
  --wds-page-header-breadcrumbs-offset-small: -6px;
110
121
  --wds-page-header-breadcrumbs-offset-medium: -9px;
@@ -392,6 +403,7 @@
392
403
  --wds-background-blur-0: 0px;
393
404
  --wds-avatar-size-tiny: 18px;
394
405
  --wds-avatar-group-gap-condensed: -3px;
406
+ --wds-avatar-group-counter-background-blur: 0px;
395
407
  --wds-announcement-modal-help-button-fill: transparent;
396
408
  --wds-announcement-modal-footnote-content-alignment: center;
397
409
  --wds-announcement-modal-close-button-icon-size: 12px;
@@ -564,6 +576,7 @@
564
576
  --wds-table-list-item-indentation-level-3: var(--wds-space-600);
565
577
  --wds-table-list-item-indentation-level-2: var(--wds-space-200);
566
578
  --wds-table-list-item-gap: var(--wds-space-400);
579
+ --wds-table-list-item-fill-hover-draggable: var(--wds-color-blue-500);
567
580
  --wds-table-list-item-fill-highlight: var(--wds-color-blue-600);
568
581
  --wds-table-list-item-controls-padding-medium: var(--wds-space-300);
569
582
  --wds-table-list-item-controls-gap-medium: var(--wds-space-200);
@@ -591,6 +604,10 @@
591
604
  --wds-statistics-widget-value-font-weight-tiny: var(--wds-font-weight-bold);
592
605
  --wds-statistics-widget-value-font-letter-spacing: var(--wds-font-letter-spacing-0);
593
606
  --wds-statistics-widget-value-font-family-tiny: var(--wds-font-family-default);
607
+ --wds-statistics-widget-padding-vertical-tiny: var(--wds-space-200);
608
+ --wds-statistics-widget-padding-vertical-large: var(--wds-space-300);
609
+ --wds-statistics-widget-padding-horizontal-tiny: var(--wds-space-400);
610
+ --wds-statistics-widget-padding-horizontal-large: var(--wds-space-400);
594
611
  --wds-space-viewport-spacing: var(--wds-space-800);
595
612
  --wds-space-padding-vertical-xx-tiny: var(--wds-space-50);
596
613
  --wds-space-padding-vertical-x-tiny: var(--wds-space-100);
@@ -767,6 +784,7 @@
767
784
  --wds-selector-list-item-padding-vertical-medium: var(--wds-space-200);
768
785
  --wds-selector-list-item-padding-horizontal-small: var(--wds-space-300);
769
786
  --wds-selector-list-item-padding-horizontal-medium: var(--wds-space-400);
787
+ --wds-selector-list-item-fill-focus: var(--wds-color-blue-500);
770
788
  --wds-selector-button-size-small: var(--wds-space-500);
771
789
  --wds-selector-button-size-medium: var(--wds-space-600);
772
790
  --wds-selector-button-size-large: var(--wds-space-700);
@@ -864,6 +882,10 @@
864
882
  --wds-pagination-padding-vertical: var(--wds-space-50);
865
883
  --wds-pagination-padding-horizontal: var(--wds-space-50);
866
884
  --wds-pagination-gap: var(--wds-space-100);
885
+ --wds-page-section-padding-top: var(--wds-space-400);
886
+ --wds-page-section-padding-bottom-with-divider: var(--wds-space-0);
887
+ --wds-page-section-padding-bottom: var(--wds-space-200);
888
+ --wds-page-section-gap: var(--wds-space-0);
867
889
  --wds-page-header-title-minimised-letter-spacing: var(--wds-font-letter-spacing-0);
868
890
  --wds-page-header-title-minimised-font-weight: var(--wds-font-weight-medium);
869
891
  --wds-page-header-title-actions-gap: var(--wds-space-0);
@@ -1566,6 +1588,7 @@
1566
1588
  --wds-background-blur-surface-overlay: var(--wds-background-blur-0);
1567
1589
  --wds-background-blur-modal: var(--wds-background-blur-0);
1568
1590
  --wds-avatar-group-gap-default: var(--wds-space-100);
1591
+ --wds-avatar-group-counter-border-width: var(--wds-border-width-200);
1569
1592
  --wds-avatar-color-7-fill: var(--wds-color-fill-accent-12);
1570
1593
  --wds-announcement-modal-top-controls-padding-top: var(--wds-space-300);
1571
1594
  --wds-announcement-modal-top-controls-padding-end: var(--wds-space-200);
@@ -1734,6 +1757,7 @@
1734
1757
  --wds-table-list-item-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
1735
1758
  --wds-table-list-item-fill-active: var(--wds-color-fill-standard-tertiary-active);
1736
1759
  --wds-table-list-item-fill: var(--wds-color-fill-standard-tertiary);
1760
+ --wds-table-list-item-drag-handle-color-hover: var(--wds-color-fill-standard-primary);
1737
1761
  --wds-table-list-item-drag-handle-color: var(--wds-color-text-primary);
1738
1762
  --wds-table-list-item-border-color: var(--wds-color-border-standard-secondary);
1739
1763
  --wds-swatches-fill-disabled: var(--wds-color-fill-standard-secondary-disabled);
@@ -1764,6 +1788,8 @@
1764
1788
  --wds-shadow-inner-400-horizontal: var(--wds-shadow-inner-300-left), var(--wds-shadow-inner-300-right);
1765
1789
  --wds-shadow-inner-300-vertical: var(--wds-shadow-inner-300-top), var(--wds-shadow-inner-300-bottom);
1766
1790
  --wds-shadow-inner-300-horizontal: var(--wds-shadow-inner-300-left), var(--wds-shadow-inner-300-right);
1791
+ --wds-selector-list-item-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
1792
+ --wds-selector-list-item-fill-active: var(--wds-color-fill-standard-tertiary-active);
1767
1793
  --wds-selector-button-text-fill-standard: var(--wds-color-text-primary);
1768
1794
  --wds-selector-button-text-fill-pressed-standard: var(--wds-color-text-primary);
1769
1795
  --wds-selector-button-text-fill-pressed-dark: var(--wds-color-text-primary);
@@ -1833,6 +1859,10 @@
1833
1859
  --wds-pagination-fill-active: var(--wds-color-fill-standard-primary);
1834
1860
  --wds-pagination-fill: var(--wds-color-fill-standard-tertiary);
1835
1861
  --wds-pagination-arrow-fill: var(--wds-color-text-primary);
1862
+ --wds-page-section-title-letter-spacing: var(--wds-font-letter-spacing-heading-4);
1863
+ --wds-page-section-title-font-weight: var(--wds-font-weight-heading-4);
1864
+ --wds-page-section-title-font-size: var(--wds-font-size-heading-4);
1865
+ --wds-page-section-subtitle-font-size: var(--wds-font-size-body-medium);
1836
1866
  --wds-page-header-title-minimised-font-size: var(--wds-font-size-body-small);
1837
1867
  --wds-page-header-title-font-weight: var(--wds-font-weight-heading-1);
1838
1868
  --wds-page-header-title-font-size: var(--wds-font-size-heading-1);
@@ -2233,6 +2263,11 @@
2233
2263
  --wds-badge-outline-dark-border-color: var(--wds-color-border-dark-primary);
2234
2264
  --wds-badge-label-font-size-small: var(--wds-font-size-body-small);
2235
2265
  --wds-avatar-text-fill: var(--wds-color-text-standard-primary-light);
2266
+ --wds-avatar-group-counter-fill-hover: var(--wds-color-fill-light-primary);
2267
+ --wds-avatar-group-counter-fill-gradient-2: var(--wds-color-fill-transparent-tertiary);
2268
+ --wds-avatar-group-counter-fill-gradient-1: var(--wds-color-fill-transparent-tertiary);
2269
+ --wds-avatar-group-counter-fill: var(--wds-color-fill-light-primary);
2270
+ --wds-avatar-group-counter-border-fill: var(--wds-color-fill-dark-secondary-disabled);
2236
2271
  --wds-announcement-modal-title-font-weight: var(--wds-font-weight-heading-1);
2237
2272
  --wds-announcement-modal-title-font-size: var(--wds-font-size-heading-1);
2238
2273
  --wds-announcement-modal-text-font-size: var(--wds-font-size-body-small);
@@ -2283,6 +2318,8 @@
2283
2318
  --wds-segmented-toggle-label-font-line-height-small: var(--wds-font-line-height-body-small);
2284
2319
  --wds-radio-label-font-line-height-small: var(--wds-font-line-height-body-small);
2285
2320
  --wds-radio-label-font-line-height-medium: var(--wds-font-line-height-body-medium);
2321
+ --wds-page-section-title-line-height: var(--wds-font-line-height-heading-4);
2322
+ --wds-page-section-subtitle-line-height: var(--wds-font-line-height-body-medium);
2286
2323
  --wds-page-header-title-line-height: var(--wds-font-line-height-heading-1);
2287
2324
  --wds-page-header-subtitle-line-height: var(--wds-font-line-height-body-medium);
2288
2325
  --wds-message-modal-title-font-line-height: var(--wds-font-line-height-heading-2);
package/all.st.css CHANGED
@@ -68,6 +68,13 @@
68
68
  @property st-global(--wds-announcement-modal-top-controls-padding-end);
69
69
  @property st-global(--wds-announcement-modal-top-controls-padding-top);
70
70
  @property st-global(--wds-avatar-color-7-fill);
71
+ @property st-global(--wds-avatar-group-counter-background-blur);
72
+ @property st-global(--wds-avatar-group-counter-border-fill);
73
+ @property st-global(--wds-avatar-group-counter-border-width);
74
+ @property st-global(--wds-avatar-group-counter-fill);
75
+ @property st-global(--wds-avatar-group-counter-fill-gradient-1);
76
+ @property st-global(--wds-avatar-group-counter-fill-gradient-2);
77
+ @property st-global(--wds-avatar-group-counter-fill-hover);
71
78
  @property st-global(--wds-avatar-group-gap-condensed);
72
79
  @property st-global(--wds-avatar-group-gap-default);
73
80
  @property st-global(--wds-avatar-size-tiny);
@@ -1499,6 +1506,17 @@
1499
1506
  @property st-global(--wds-page-header-title-minimised-font-weight);
1500
1507
  @property st-global(--wds-page-header-title-minimised-letter-spacing);
1501
1508
  @property st-global(--wds-page-header-title-minimised-line-height);
1509
+ @property st-global(--wds-page-section-divider-display);
1510
+ @property st-global(--wds-page-section-gap);
1511
+ @property st-global(--wds-page-section-padding-bottom);
1512
+ @property st-global(--wds-page-section-padding-bottom-with-divider);
1513
+ @property st-global(--wds-page-section-padding-top);
1514
+ @property st-global(--wds-page-section-subtitle-font-size);
1515
+ @property st-global(--wds-page-section-subtitle-line-height);
1516
+ @property st-global(--wds-page-section-title-font-size);
1517
+ @property st-global(--wds-page-section-title-font-weight);
1518
+ @property st-global(--wds-page-section-title-letter-spacing);
1519
+ @property st-global(--wds-page-section-title-line-height);
1502
1520
  @property st-global(--wds-pagination-arrow-fill);
1503
1521
  @property st-global(--wds-pagination-fill);
1504
1522
  @property st-global(--wds-pagination-fill-active);
@@ -1553,6 +1571,7 @@
1553
1571
  @property st-global(--wds-scrollbar-fill);
1554
1572
  @property st-global(--wds-scrollbar-fill-active);
1555
1573
  @property st-global(--wds-scrollbar-fill-hover);
1574
+ @property st-global(--wds-scrollbar-width);
1556
1575
  @property st-global(--wds-search-border-radius-large);
1557
1576
  @property st-global(--wds-search-border-radius-medium);
1558
1577
  @property st-global(--wds-search-border-radius-small);
@@ -1672,6 +1691,9 @@
1672
1691
  @property st-global(--wds-selector-button-text-fill-pressed-dark);
1673
1692
  @property st-global(--wds-selector-button-text-fill-pressed-standard);
1674
1693
  @property st-global(--wds-selector-button-text-fill-standard);
1694
+ @property st-global(--wds-selector-list-item-fill-active);
1695
+ @property st-global(--wds-selector-list-item-fill-focus);
1696
+ @property st-global(--wds-selector-list-item-fill-hover);
1675
1697
  @property st-global(--wds-selector-list-item-padding-horizontal-medium);
1676
1698
  @property st-global(--wds-selector-list-item-padding-horizontal-small);
1677
1699
  @property st-global(--wds-selector-list-item-padding-vertical-medium);
@@ -1887,7 +1909,9 @@
1887
1909
  @property st-global(--wds-sidebar-scrollbar-fill-dark-default);
1888
1910
  @property st-global(--wds-sidebar-scrollbar-fill-dark-hover);
1889
1911
  @property st-global(--wds-sidebar-scrollbar-fill-light-default);
1912
+ @property st-global(--wds-sidebar-scrollbar-fill-light-hover);
1890
1913
  @property st-global(--wds-sidebar-scrollbar-fill-neutral-default);
1914
+ @property st-global(--wds-sidebar-scrollbar-fill-neutral-hover);
1891
1915
  @property st-global(--wds-skeleton-border-radius-circle);
1892
1916
  @property st-global(--wds-skeleton-border-radius-line);
1893
1917
  @property st-global(--wds-skeleton-border-radius-rectangle);
@@ -1959,6 +1983,10 @@
1959
1983
  @property st-global(--wds-statistics-widget-description-font-line-height);
1960
1984
  @property st-global(--wds-statistics-widget-description-font-size);
1961
1985
  @property st-global(--wds-statistics-widget-description-info-gap);
1986
+ @property st-global(--wds-statistics-widget-padding-horizontal-large);
1987
+ @property st-global(--wds-statistics-widget-padding-horizontal-tiny);
1988
+ @property st-global(--wds-statistics-widget-padding-vertical-large);
1989
+ @property st-global(--wds-statistics-widget-padding-vertical-tiny);
1962
1990
  @property st-global(--wds-statistics-widget-trend-space-top);
1963
1991
  @property st-global(--wds-statistics-widget-value-font-family-tiny);
1964
1992
  @property st-global(--wds-statistics-widget-value-font-letter-spacing);
@@ -2000,14 +2028,23 @@
2000
2028
  @property st-global(--wds-table-list-item-controls-gap-medium);
2001
2029
  @property st-global(--wds-table-list-item-controls-padding-medium);
2002
2030
  @property st-global(--wds-table-list-item-drag-handle-color);
2031
+ @property st-global(--wds-table-list-item-drag-handle-color-hover);
2003
2032
  @property st-global(--wds-table-list-item-fill);
2004
2033
  @property st-global(--wds-table-list-item-fill-active);
2005
2034
  @property st-global(--wds-table-list-item-fill-highlight);
2006
2035
  @property st-global(--wds-table-list-item-fill-hover);
2036
+ @property st-global(--wds-table-list-item-fill-hover-draggable);
2007
2037
  @property st-global(--wds-table-list-item-gap);
2008
2038
  @property st-global(--wds-table-list-item-indentation-level-2);
2009
2039
  @property st-global(--wds-table-list-item-indentation-level-3);
2010
2040
  @property st-global(--wds-table-list-item-paddings);
2041
+ @property st-global(--wds-table-toolbar-button-gap);
2042
+ @property st-global(--wds-table-toolbar-divider-gap);
2043
+ @property st-global(--wds-table-toolbar-divider-gap-group-start);
2044
+ @property st-global(--wds-table-toolbar-icon-button-gap);
2045
+ @property st-global(--wds-table-toolbar-item-gap);
2046
+ @property st-global(--wds-table-toolbar-padding-block-end);
2047
+ @property st-global(--wds-table-toolbar-padding-block-start);
2011
2048
  @property st-global(--wds-table-toolbar-padding-horizontal);
2012
2049
  @property st-global(--wds-tabs-border-radius);
2013
2050
  @property st-global(--wds-tabs-container-padding-horizontal);
@@ -2403,6 +2440,13 @@
2403
2440
  --wds-announcement-modal-top-controls-padding-end: 12px;
2404
2441
  --wds-announcement-modal-top-controls-padding-top: 18px;
2405
2442
  --wds-avatar-color-7-fill: #ACAFC4;
2443
+ --wds-avatar-group-counter-background-blur: 0px;
2444
+ --wds-avatar-group-counter-border-fill: rgba(0, 6, 36, .1);
2445
+ --wds-avatar-group-counter-border-width: 2px;
2446
+ --wds-avatar-group-counter-fill: #ffffff;
2447
+ --wds-avatar-group-counter-fill-gradient-1: rgba(0, 6, 36, 0);
2448
+ --wds-avatar-group-counter-fill-gradient-2: rgba(0, 6, 36, 0);
2449
+ --wds-avatar-group-counter-fill-hover: #ffffff;
2406
2450
  --wds-avatar-group-gap-condensed: -3px;
2407
2451
  --wds-avatar-group-gap-default: 6px;
2408
2452
  --wds-avatar-size-tiny: 18px;
@@ -3834,6 +3878,17 @@
3834
3878
  --wds-page-header-title-minimised-font-weight: 500;
3835
3879
  --wds-page-header-title-minimised-letter-spacing: 0px;
3836
3880
  --wds-page-header-title-minimised-line-height: 30px;
3881
+ --wds-page-section-divider-display: block;
3882
+ --wds-page-section-gap: 0px;
3883
+ --wds-page-section-padding-bottom: 12px;
3884
+ --wds-page-section-padding-bottom-with-divider: 0px;
3885
+ --wds-page-section-padding-top: 24px;
3886
+ --wds-page-section-subtitle-font-size: 16px;
3887
+ --wds-page-section-subtitle-line-height: 24px;
3888
+ --wds-page-section-title-font-size: 18px;
3889
+ --wds-page-section-title-font-weight: 500;
3890
+ --wds-page-section-title-letter-spacing: 0px;
3891
+ --wds-page-section-title-line-height: 24px;
3837
3892
  --wds-pagination-arrow-fill: #116dff;
3838
3893
  --wds-pagination-fill: #ffffff;
3839
3894
  --wds-pagination-fill-active: #116dff;
@@ -3888,6 +3943,7 @@
3888
3943
  --wds-scrollbar-fill: #a8caff;
3889
3944
  --wds-scrollbar-fill-active: #116dff;
3890
3945
  --wds-scrollbar-fill-hover: #5999ff;
3946
+ --wds-scrollbar-width: 6px;
3891
3947
  --wds-search-border-radius-large: 1000px;
3892
3948
  --wds-search-border-radius-medium: 1000px;
3893
3949
  --wds-search-border-radius-small: 1000px;
@@ -4007,6 +4063,9 @@
4007
4063
  --wds-selector-button-text-fill-pressed-dark: #116dff;
4008
4064
  --wds-selector-button-text-fill-pressed-standard: #116dff;
4009
4065
  --wds-selector-button-text-fill-standard: #116dff;
4066
+ --wds-selector-list-item-fill-active: #d6e6fe;
4067
+ --wds-selector-list-item-fill-focus: #e7f0ff;
4068
+ --wds-selector-list-item-fill-hover: #e7f0ff;
4010
4069
  --wds-selector-list-item-padding-horizontal-medium: 24px;
4011
4070
  --wds-selector-list-item-padding-horizontal-small: 18px;
4012
4071
  --wds-selector-list-item-padding-vertical-medium: 12px;
@@ -4222,7 +4281,9 @@
4222
4281
  --wds-sidebar-scrollbar-fill-dark-default: #717379;
4223
4282
  --wds-sidebar-scrollbar-fill-dark-hover: #9C9EA6;
4224
4283
  --wds-sidebar-scrollbar-fill-light-default: #A8CAFF;
4284
+ --wds-sidebar-scrollbar-fill-light-hover: rgba(0, 6, 36, 0.6600);
4225
4285
  --wds-sidebar-scrollbar-fill-neutral-default: #A8CAFF;
4286
+ --wds-sidebar-scrollbar-fill-neutral-hover: #A8CAFF;
4226
4287
  --wds-skeleton-border-radius-circle: 1000px;
4227
4288
  --wds-skeleton-border-radius-line: 1000px;
4228
4289
  --wds-skeleton-border-radius-rectangle: 6px;
@@ -4294,6 +4355,10 @@
4294
4355
  --wds-statistics-widget-description-font-line-height: 18px;
4295
4356
  --wds-statistics-widget-description-font-size: 14px;
4296
4357
  --wds-statistics-widget-description-info-gap: 6px;
4358
+ --wds-statistics-widget-padding-horizontal-large: 24px;
4359
+ --wds-statistics-widget-padding-horizontal-tiny: 24px;
4360
+ --wds-statistics-widget-padding-vertical-large: 18px;
4361
+ --wds-statistics-widget-padding-vertical-tiny: 12px;
4297
4362
  --wds-statistics-widget-trend-space-top: 5px;
4298
4363
  --wds-statistics-widget-value-font-family-tiny: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
4299
4364
  --wds-statistics-widget-value-font-letter-spacing: 0px;
@@ -4335,14 +4400,23 @@
4335
4400
  --wds-table-list-item-controls-gap-medium: 12px;
4336
4401
  --wds-table-list-item-controls-padding-medium: 18px;
4337
4402
  --wds-table-list-item-drag-handle-color: #116dff;
4403
+ --wds-table-list-item-drag-handle-color-hover: #116dff;
4338
4404
  --wds-table-list-item-fill: #ffffff;
4339
4405
  --wds-table-list-item-fill-active: #d6e6fe;
4340
4406
  --wds-table-list-item-fill-highlight: #f4f7ff;
4341
4407
  --wds-table-list-item-fill-hover: #e7f0ff;
4408
+ --wds-table-list-item-fill-hover-draggable: #e7f0ff;
4342
4409
  --wds-table-list-item-gap: 24px;
4343
4410
  --wds-table-list-item-indentation-level-2: 12px;
4344
4411
  --wds-table-list-item-indentation-level-3: 36px;
4345
4412
  --wds-table-list-item-paddings: 0px;
4413
+ --wds-table-toolbar-button-gap: 6px;
4414
+ --wds-table-toolbar-divider-gap: 12px;
4415
+ --wds-table-toolbar-divider-gap-group-start: 24px;
4416
+ --wds-table-toolbar-icon-button-gap: 6px;
4417
+ --wds-table-toolbar-item-gap: 12px;
4418
+ --wds-table-toolbar-padding-block-end: 15px;
4419
+ --wds-table-toolbar-padding-block-start: 15px;
4346
4420
  --wds-table-toolbar-padding-horizontal: 24px;
4347
4421
  --wds-tabs-border-radius: 0px;
4348
4422
  --wds-tabs-container-padding-horizontal: 0px;