@wix/design-system-tokens 1.218.0 → 1.219.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 (27) hide show
  1. package/CHANGELOG.md +34 -4
  2. package/all.css +26 -0
  3. package/all.scss +26 -0
  4. package/all.st.css +52 -0
  5. package/component.st.css +50 -0
  6. package/odeditor/all.css +29 -3
  7. package/odeditor/all.scss +29 -3
  8. package/odeditor/all.st.css +55 -3
  9. package/odeditor/component.st.css +53 -3
  10. package/odeditor/semantic.st.css +2 -0
  11. package/odeditor-dark/all.css +38 -12
  12. package/odeditor-dark/all.scss +38 -12
  13. package/odeditor-dark/all.st.css +65 -13
  14. package/odeditor-dark/component.st.css +61 -11
  15. package/odeditor-dark/semantic.st.css +4 -2
  16. package/package.json +2 -2
  17. package/semantic.st.css +2 -0
  18. package/studio/all.css +26 -0
  19. package/studio/all.scss +26 -0
  20. package/studio/all.st.css +52 -0
  21. package/studio/component.st.css +50 -0
  22. package/studio/semantic.st.css +2 -0
  23. package/wixel/all.css +26 -0
  24. package/wixel/all.scss +26 -0
  25. package/wixel/all.st.css +52 -0
  26. package/wixel/component.st.css +50 -0
  27. package/wixel/semantic.st.css +2 -0
package/CHANGELOG.md CHANGED
@@ -1,3 +1,35 @@
1
+ ## 1.219.1
2
+
3
+ ### Patch Changes
4
+
5
+ - [#16680](https://github.com/wix-private/wix-design-systems/pull/16680) [`1bcc73b`](https://github.com/wix-private/wix-design-systems/commit/1bcc73b176aae2a200e81d61865f2bd906f36608) - Add `--wds-accordion-padding-horizontal-large` (16px) and `--wds-accordion-padding-horizontal-medium` (12px) component tokens in Studio 2.0 (odeditor-dark); the semantic `--wds-space-padding-horizontal-*` scale is unaffected.
6
+
7
+ - [#16680](https://github.com/wix-private/wix-design-systems/pull/16680) [`1bcc73b`](https://github.com/wix-private/wix-design-systems/commit/1bcc73b176aae2a200e81d61865f2bd906f36608) - Add `--wds-badge-solid-neutral-success-label-color`, `--wds-badge-solid-neutral-danger-label-color` and `--wds-badge-solid-warning-light-label-color`: `--wds-color-text-standard-primary` in light themes, `--wds-color-text-standard-secondary` (white) in Studio 2.0 (odeditor-dark).
8
+
9
+ - [#16680](https://github.com/wix-private/wix-design-systems/pull/16680) [`1bcc73b`](https://github.com/wix-private/wix-design-systems/commit/1bcc73b176aae2a200e81d61865f2bd906f36608) - Fix `--wds-illustration-color-6` in Studio 2.0 (odeditor-dark): it now resolves to `#002294` (blue) instead of `#EAEFFF`, matching the Figma illustrations library. Affects illustrations such as BookingsStrip and ImagePositionLeft whose detail shapes rendered too light in dark theme.
10
+
11
+ - [#16661](https://github.com/wix-private/wix-design-systems/pull/16661) [`286e414`](https://github.com/wix-private/wix-design-systems/commit/286e414c0fbcad2de68fb9187831368ed78bb798) - Surface overlay blur: `--wds-color-fill-surface-overlay-blur` in Studio 2.0 (odeditor-dark) changed from `rgba(33, 33, 34, 0.96)` to `rgba(33, 33, 34, 0.98)` — affects popovers and side panels.
12
+
13
+ - [#16660](https://github.com/wix-private/wix-design-systems/pull/16660) [`8539804`](https://github.com/wix-private/wix-design-systems/commit/853980426902e9a19758b2a9ddc6c6197cdaff5f) - Popover: `--wds-popover-border-fill` in Studio 2.0 (odeditor-dark) now resolves to `--wds-color-black-750` (`#2D2D2E`) instead of `--wds-color-black-700` (`#3A3A3B`).
14
+
15
+ - [#16611](https://github.com/wix-private/wix-design-systems/pull/16611) [`9990b46`](https://github.com/wix-private/wix-design-systems/commit/9990b463c8654f35201d80404f8e720fe04b55ac) - Modal help-button token changes in Harmony (odeditor) and Studio 2.0 (odeditor-dark): added `--wds-message-modal-help-button-icon-size` (`var(--wds-space-475)` in those themes, `var(--wds-space-400)` in the default theme, `var(--wds-space-600)` in Studio (studio) and Wixel (wixel)); `--wds-message-modal-help-button-size` changed from `var(--wds-space-700)` to `var(--wds-space-600)`; `--wds-announcement-modal-help-button-fill` changed from `var(--wds-color-fill-dark-secondary)` to `transparent`; added `--wds-message-modal-text-font-weight` (`var(--wds-font-weight-regular)` in those themes, `var(--wds-font-weight-medium)` everywhere else, matching their current rendering). No other tokens affected.
16
+
17
+ - [#16690](https://github.com/wix-private/wix-design-systems/pull/16690) [`dfbd2bb`](https://github.com/wix-private/wix-design-systems/commit/dfbd2bbc17fa0f0ef971b4934f0d04bc26739dc8) - Add `--wds-page-header-breadcrumbs-offset-small/medium/large` tokens, the negative inline-start offset Page.Header applies to a breadcrumb trail so the first crumb's text lines up with the page title. Values mirror each theme's own `--wds-breadcrumbs-padding-horizontal-*`: default `-6px`/`-9px`/`-15px`, Studio `-4px`/`-8px`/`-16px`, and `0` for Harmony (odeditor), Studio 2.0 (odeditor-dark) and Wixel, which keep their current rendering. No other tokens affected.
18
+
19
+ - [#16680](https://github.com/wix-private/wix-design-systems/pull/16680) [`1bcc73b`](https://github.com/wix-private/wix-design-systems/commit/1bcc73b176aae2a200e81d61865f2bd906f36608) - Add `--wds-top-banner-content-color` token: light content on themes with the purple banner fill, dark content on Harmony (odeditor)'s light fill.
20
+
21
+ ## 1.219.0 - 2026-07-28
22
+
23
+ ### Visual Breaking Changes
24
+
25
+ - breaking(Avatar): add seventh color to rotation and 20px tiny size [Harmony, Studio 2.0] [16637](https://github.com/wix-private/wix-design-systems/pull/16637)
26
+
27
+ ### Bug Fixes
28
+
29
+ - fix(CustomModalLayout): align close button with the design [Harmony] [16623](https://github.com/wix-private/wix-design-systems/pull/16623)
30
+ - fix(StatisticsWidget): align typography and gaps with Figma [Harmony] [Studio 2.0] [16635](https://github.com/wix-private/wix-design-systems/pull/16635)
31
+ - fix(Card): subtitle 12px, title-subtitle gap, top-aligned suffix, content paddings [Harmony, Studio 2.0] [16634](https://github.com/wix-private/wix-design-systems/pull/16634)
32
+
1
33
  ## 1.213.0 - 2026-07-17
2
34
 
3
35
  ### Bug Fixes
@@ -342,7 +374,7 @@
342
374
 
343
375
  ### Visual Breaking Changes
344
376
 
345
- - breaking(AddItem): add token [15282](https://github.com/wix-private/wix-design-systems/pull/15282)
377
+ - breaking(AddItem): add token [15282](https://github.com/wix-private/wix-design-systems/pull/15282)
346
378
  - breaking(TableListItem): update border color & radius [15278](https://github.com/wix-private/wix-design-systems/pull/15278)
347
379
  - breaking(SegmentedToggle): e3 container border radius [15280](https://github.com/wix-private/wix-design-systems/pull/15280)
348
380
  - breaking(NestableListItem): add tokens [15255](https://github.com/wix-private/wix-design-systems/pull/15255)
@@ -444,7 +476,7 @@
444
476
 
445
477
  ### Features
446
478
 
447
- - feat(Tooltip): tokenization [15155](https://github.com/wix-private/wix-design-systems/pull/15155)
479
+ - feat(Tooltip): tokenization [15155](https://github.com/wix-private/wix-design-systems/pull/15155)
448
480
 
449
481
  ## 1.124.0 - 2025-08-04
450
482
 
@@ -728,5 +760,3 @@
728
760
  ### Bug Fixes
729
761
 
730
762
  - fix(InputArea): fix vertical padding tokens adjusted to sum up to correct height [13204](https://github.com/wix-private/wix-design-systems/pull/13204)
731
-
732
-
package/all.css CHANGED
@@ -289,6 +289,8 @@
289
289
  --wds-swatches-swatch-active-border-radius-small: 5px;
290
290
  --wds-swatches-swatch-active-border-radius-medium: 9px;
291
291
  --wds-status-toast-width: 600px;
292
+ --wds-statistics-widget-trend-space-top: 5px;
293
+ --wds-statistics-widget-description-info-gap: 6px;
292
294
  --wds-slider-track-size-transparent: 8px;
293
295
  --wds-slider-track-size: 4px;
294
296
  --wds-slider-slider-knob-size-transparent: 16px;
@@ -321,6 +323,9 @@
321
323
  --wds-radio-size: 16px;
322
324
  --wds-radio-dot-size: 10px;
323
325
  --wds-page-header-title-minimised-line-height: 30px;
326
+ --wds-page-header-breadcrumbs-offset-small: -6px;
327
+ --wds-page-header-breadcrumbs-offset-medium: -9px;
328
+ --wds-page-header-breadcrumbs-offset-large: -15px;
324
329
  --wds-page-header-back-button-gap: 8px;
325
330
  --wds-message-modal-close-button-fill: transparent;
326
331
  --wds-marketing-layout-title-font-size-tiny: 20px;
@@ -361,6 +366,7 @@
361
366
  --wds-google-preview-favicon-border-fill: #E6E6E6;
362
367
  --wds-google-preview-favicon-background-fill: #F1F3F4;
363
368
  --wds-editable-title-marker-line-style: dashed;
369
+ --wds-custom-modal-close-button-fill: transparent;
364
370
  --wds-counter-badge-padding-horizontal-tiny: 4px;
365
371
  --wds-counter-badge-padding-horizontal-medium: 8px;
366
372
  --wds-counter-badge-font-size-tiny: 10px;
@@ -370,6 +376,7 @@
370
376
  --wds-close-button-standard-filled-fill: transparent;
371
377
  --wds-circular-progress-bar-border-width: 4px;
372
378
  --wds-checkbox-size: 16px;
379
+ --wds-card-header-suffix-align: center;
373
380
  --wds-card-divider-opacity: 1;
374
381
  --wds-card-base-shadow: none;
375
382
  --wds-button-outline-hover: transparent;
@@ -382,6 +389,7 @@
382
389
  --wds-breadcrumbs-height-large: 36px;
383
390
  --wds-breadcrumbs-divider-margin-horizontal: 8px;
384
391
  --wds-avatar-group-gap-condensed: -3px;
392
+ --wds-avatar-size-tiny: 18px;
385
393
  --wds-announcement-modal-help-button-fill: transparent;
386
394
  --wds-announcement-modal-footnote-content-alignment: center;
387
395
  --wds-announcement-modal-close-button-icon-size: 12px;
@@ -604,6 +612,7 @@
604
612
  --wds-color-fill-surface-sunken: var(--wds-color-black-700);
605
613
  --wds-color-fill-surface-success: var(--wds-color-green-500);
606
614
  --wds-color-fill-surface-standard: var(--wds-color-blue-500);
615
+ --wds-color-fill-surface-stage: var(--wds-color-black-700);
607
616
  --wds-color-fill-surface-raised: var(--wds-color-white);
608
617
  --wds-color-fill-surface-premium: var(--wds-color-purple-500);
609
618
  --wds-color-fill-surface-overlay-dark: var(--wds-color-black-100);
@@ -1018,6 +1027,9 @@
1018
1027
  --wds-swatches-fill-border-disabled: var(--wds-color-black-100-transparent-0);
1019
1028
  --wds-stepper-prefix-size-number: var(--wds-space-400);
1020
1029
  --wds-stepper-prefix-size-circle: var(--wds-space-500);
1030
+ --wds-statistics-widget-value-font-weight-tiny: var(--wds-font-weight-bold);
1031
+ --wds-statistics-widget-value-font-letter-spacing: var(--wds-font-letter-spacing-0);
1032
+ --wds-statistics-widget-value-font-family-tiny: var(--wds-font-family-default);
1021
1033
  --wds-social-preview-content-padding-vertical: var(--wds-space-150);
1022
1034
  --wds-social-preview-content-padding-horizontal: var(--wds-space-200);
1023
1035
  --wds-social-post-preview-content-padding-vertical: var(--wds-space-200);
@@ -1225,12 +1237,14 @@
1225
1237
  --wds-message-modal-top-controls-paddings: var(--wds-space-100);
1226
1238
  --wds-message-modal-top-controls-gap: var(--wds-space-50);
1227
1239
  --wds-message-modal-title-font-family: var(--wds-font-family-default);
1240
+ --wds-message-modal-text-font-weight: var(--wds-font-weight-medium);
1228
1241
  --wds-message-modal-padding-vertical: var(--wds-space-400);
1229
1242
  --wds-message-modal-padding-horizontal: var(--wds-space-400);
1230
1243
  --wds-message-modal-illustration-margin-top: var(--wds-space-300);
1231
1244
  --wds-message-modal-illustration-margin-start: var(--wds-space-400);
1232
1245
  --wds-message-modal-illustration-content-gap: var(--wds-space-400);
1233
1246
  --wds-message-modal-help-button-size: var(--wds-space-500);
1247
+ --wds-message-modal-help-button-icon-size: var(--wds-space-400);
1234
1248
  --wds-message-modal-content-gap: var(--wds-space-200);
1235
1249
  --wds-message-modal-close-button-size: var(--wds-space-500);
1236
1250
  --wds-message-modal-close-button-icon-size: var(--wds-space-200);
@@ -1406,6 +1420,8 @@
1406
1420
  --wds-custom-modal-footer-padding-horizontal: var(--wds-space-400);
1407
1421
  --wds-custom-modal-content-padding-vertical: var(--wds-space-400);
1408
1422
  --wds-custom-modal-content-padding-horizontal: var(--wds-space-400);
1423
+ --wds-custom-modal-close-button-size: var(--wds-space-500);
1424
+ --wds-custom-modal-close-button-icon-size: var(--wds-space-200);
1409
1425
  --wds-custom-modal-border-radius: var(--wds-border-radius-400);
1410
1426
  --wds-counter-badge-size-tiny: var(--wds-space-350);
1411
1427
  --wds-counter-badge-size-small: var(--wds-space-300);
@@ -1544,6 +1560,7 @@
1544
1560
  --wds-badge-border-radius-small: var(--wds-border-radius-100);
1545
1561
  --wds-badge-border-radius-medium: var(--wds-border-radius-100);
1546
1562
  --wds-avatar-group-gap-default: var(--wds-space-100);
1563
+ --wds-avatar-color-7-fill: var(--wds-color-fill-accent-12);
1547
1564
  --wds-announcement-modal-top-controls-padding-top: var(--wds-space-300);
1548
1565
  --wds-announcement-modal-top-controls-padding-end: var(--wds-space-200);
1549
1566
  --wds-announcement-modal-top-controls-gap: var(--wds-space-50);
@@ -1622,6 +1639,7 @@
1622
1639
  --wds-vertical-tabs-icon-fill-disabled: var(--wds-color-text-disabled);
1623
1640
  --wds-vertical-tabs-icon-fill-active: var(--wds-color-text-standard-primary);
1624
1641
  --wds-vertical-tabs-icon-fill: var(--wds-color-text-primary);
1642
+ --wds-top-banner-content-color: var(--wds-color-text-standard-primary-light);
1625
1643
  --wds-tooltip-text-fill: var(--wds-color-text-standard-primary-light);
1626
1644
  --wds-tooltip-label-font-size-medium: var(--wds-font-size-body-small);
1627
1645
  --wds-tooltip-border-radius: var(--wds-border-radius-surface-overlay);
@@ -1736,6 +1754,8 @@
1736
1754
  --wds-swatches-fill-border-no-value: var(--wds-color-border-standard-secondary);
1737
1755
  --wds-status-toast-text-font-size: var(--wds-font-size-body-medium);
1738
1756
  --wds-status-toast-info-icon-fill: var(--wds-color-text-standard-primary-light);
1757
+ --wds-statistics-widget-value-font-size-tiny: var(--wds-font-size-body-medium);
1758
+ --wds-statistics-widget-description-font-size: var(--wds-font-size-body-small);
1739
1759
  --wds-slider-track-color: var(--wds-color-fill-standard-secondary);
1740
1760
  --wds-slider-slider-knob-color-hover: var(--wds-color-fill-standard-primary-hover);
1741
1761
  --wds-slider-slider-knob-color: var(--wds-color-fill-standard-primary);
@@ -2173,6 +2193,9 @@
2173
2193
  --wds-button-border-dark-secondary-active: var(--wds-color-fill-dark-primary);
2174
2194
  --wds-button-border-dark-secondary: var(--wds-color-border-dark-primary);
2175
2195
  --wds-breadcrumbs-on-grey-text-fill-active: var(--wds-color-text-standard-primary);
2196
+ --wds-badge-solid-warning-light-label-color: var(--wds-color-text-standard-secondary);
2197
+ --wds-badge-solid-neutral-success-label-color: var(--wds-color-text-standard-secondary);
2198
+ --wds-badge-solid-neutral-danger-label-color: var(--wds-color-text-standard-secondary);
2176
2199
  --wds-badge-outline-warning-label-color: var(--wds-color-text-warning);
2177
2200
  --wds-badge-outline-warning-fill: var(--wds-color-fill-warning-tertiary);
2178
2201
  --wds-badge-outline-warning-border-color: var(--wds-color-border-warning-primary);
@@ -2219,6 +2242,7 @@
2219
2242
  --wds-accordion-title-font-size-medium: var(--wds-font-size-body-medium);
2220
2243
  --wds-accordion-title-fill-hover: var(--wds-color-text-standard-primary);
2221
2244
  --wds-accordion-title-fill: var(--wds-color-text-standard-primary);
2245
+ --wds-accordion-padding-horizontal-medium: var(--wds-space-padding-horizontal-medium);
2222
2246
  --wds-accordion-padding-horizontal-large: var(--wds-space-padding-horizontal-large);
2223
2247
  --wds-accordion-inner-content-shadow-last: var(--wds-shadow-inner-300-top);
2224
2248
  --wds-accordion-inner-content-padding-bottom: var(--wds-space-padding-vertical-small);
@@ -2240,6 +2264,8 @@
2240
2264
  --wds-tabs-label-line-height-small: var(--wds-font-line-height-body-small);
2241
2265
  --wds-tabs-label-line-height-medium: var(--wds-font-line-height-body-medium);
2242
2266
  --wds-status-toast-text-font-line-height: var(--wds-font-line-height-body-medium);
2267
+ --wds-statistics-widget-value-font-line-height-tiny: var(--wds-font-line-height-body-medium);
2268
+ --wds-statistics-widget-description-font-line-height: var(--wds-font-line-height-body-small);
2243
2269
  --wds-side-panel-title-font-line-height: var(--wds-font-line-height-heading-3);
2244
2270
  --wds-side-panel-subtitle-font-line-height: var(--wds-font-line-height-body-medium);
2245
2271
  --wds-side-panel-floating-title-font-line-height: var(--wds-font-line-height-body-medium);
package/all.scss CHANGED
@@ -14,6 +14,8 @@
14
14
  --wds-swatches-swatch-active-border-radius-small: 5px;
15
15
  --wds-swatches-swatch-active-border-radius-medium: 9px;
16
16
  --wds-status-toast-width: 600px;
17
+ --wds-statistics-widget-trend-space-top: 5px;
18
+ --wds-statistics-widget-description-info-gap: 6px;
17
19
  --wds-space-2400: 144px;
18
20
  --wds-space-1700: 102px;
19
21
  --wds-space-1600: 96px;
@@ -104,6 +106,9 @@
104
106
  --wds-radio-size: 16px;
105
107
  --wds-radio-dot-size: 10px;
106
108
  --wds-page-header-title-minimised-line-height: 30px;
109
+ --wds-page-header-breadcrumbs-offset-small: -6px;
110
+ --wds-page-header-breadcrumbs-offset-medium: -9px;
111
+ --wds-page-header-breadcrumbs-offset-large: -15px;
107
112
  --wds-page-header-back-button-gap: 8px;
108
113
  --wds-message-modal-close-button-fill: transparent;
109
114
  --wds-marketing-layout-title-font-size-tiny: 20px;
@@ -161,6 +166,7 @@
161
166
  --wds-font-family-display: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
162
167
  --wds-font-family-default: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
163
168
  --wds-editable-title-marker-line-style: dashed;
169
+ --wds-custom-modal-close-button-fill: transparent;
164
170
  --wds-counter-badge-padding-horizontal-tiny: 4px;
165
171
  --wds-counter-badge-padding-horizontal-medium: 8px;
166
172
  --wds-counter-badge-font-size-tiny: 10px;
@@ -343,6 +349,7 @@
343
349
  --wds-close-button-standard-filled-fill: transparent;
344
350
  --wds-circular-progress-bar-border-width: 4px;
345
351
  --wds-checkbox-size: 16px;
352
+ --wds-card-header-suffix-align: center;
346
353
  --wds-card-divider-opacity: 1;
347
354
  --wds-card-base-shadow: none;
348
355
  --wds-button-outline-hover: transparent;
@@ -381,6 +388,7 @@
381
388
  --wds-background-blur-100: 0px;
382
389
  --wds-background-blur-50: 0px;
383
390
  --wds-background-blur-0: 0px;
391
+ --wds-avatar-size-tiny: 18px;
384
392
  --wds-avatar-group-gap-condensed: -3px;
385
393
  --wds-announcement-modal-help-button-fill: transparent;
386
394
  --wds-announcement-modal-footnote-content-alignment: center;
@@ -578,6 +586,9 @@
578
586
  --wds-swatches-fill-border-disabled: var(--wds-color-black-100-transparent-0);
579
587
  --wds-stepper-prefix-size-number: var(--wds-space-400);
580
588
  --wds-stepper-prefix-size-circle: var(--wds-space-500);
589
+ --wds-statistics-widget-value-font-weight-tiny: var(--wds-font-weight-bold);
590
+ --wds-statistics-widget-value-font-letter-spacing: var(--wds-font-letter-spacing-0);
591
+ --wds-statistics-widget-value-font-family-tiny: var(--wds-font-family-default);
581
592
  --wds-space-viewport-spacing: var(--wds-space-800);
582
593
  --wds-space-padding-vertical-xx-tiny: var(--wds-space-50);
583
594
  --wds-space-padding-vertical-x-tiny: var(--wds-space-100);
@@ -873,12 +884,14 @@
873
884
  --wds-message-modal-top-controls-paddings: var(--wds-space-100);
874
885
  --wds-message-modal-top-controls-gap: var(--wds-space-50);
875
886
  --wds-message-modal-title-font-family: var(--wds-font-family-default);
887
+ --wds-message-modal-text-font-weight: var(--wds-font-weight-medium);
876
888
  --wds-message-modal-padding-vertical: var(--wds-space-400);
877
889
  --wds-message-modal-padding-horizontal: var(--wds-space-400);
878
890
  --wds-message-modal-illustration-margin-top: var(--wds-space-300);
879
891
  --wds-message-modal-illustration-margin-start: var(--wds-space-400);
880
892
  --wds-message-modal-illustration-content-gap: var(--wds-space-400);
881
893
  --wds-message-modal-help-button-size: var(--wds-space-500);
894
+ --wds-message-modal-help-button-icon-size: var(--wds-space-400);
882
895
  --wds-message-modal-content-gap: var(--wds-space-200);
883
896
  --wds-message-modal-close-button-size: var(--wds-space-500);
884
897
  --wds-message-modal-close-button-icon-size: var(--wds-space-200);
@@ -1096,6 +1109,8 @@
1096
1109
  --wds-custom-modal-footer-padding-horizontal: var(--wds-space-400);
1097
1110
  --wds-custom-modal-content-padding-vertical: var(--wds-space-400);
1098
1111
  --wds-custom-modal-content-padding-horizontal: var(--wds-space-400);
1112
+ --wds-custom-modal-close-button-size: var(--wds-space-500);
1113
+ --wds-custom-modal-close-button-icon-size: var(--wds-space-200);
1099
1114
  --wds-custom-modal-border-radius: var(--wds-border-radius-400);
1100
1115
  --wds-counter-badge-size-tiny: var(--wds-space-350);
1101
1116
  --wds-counter-badge-size-small: var(--wds-space-300);
@@ -1196,6 +1211,7 @@
1196
1211
  --wds-color-fill-surface-sunken: var(--wds-color-black-700);
1197
1212
  --wds-color-fill-surface-success: var(--wds-color-green-500);
1198
1213
  --wds-color-fill-surface-standard: var(--wds-color-blue-500);
1214
+ --wds-color-fill-surface-stage: var(--wds-color-black-700);
1199
1215
  --wds-color-fill-surface-raised: var(--wds-color-white);
1200
1216
  --wds-color-fill-surface-premium: var(--wds-color-purple-500);
1201
1217
  --wds-color-fill-surface-overlay-dark: var(--wds-color-black-100);
@@ -1544,6 +1560,7 @@
1544
1560
  --wds-background-blur-surface-overlay: var(--wds-background-blur-0);
1545
1561
  --wds-background-blur-modal: var(--wds-background-blur-0);
1546
1562
  --wds-avatar-group-gap-default: var(--wds-space-100);
1563
+ --wds-avatar-color-7-fill: var(--wds-color-fill-accent-12);
1547
1564
  --wds-announcement-modal-top-controls-padding-top: var(--wds-space-300);
1548
1565
  --wds-announcement-modal-top-controls-padding-end: var(--wds-space-200);
1549
1566
  --wds-announcement-modal-top-controls-gap: var(--wds-space-50);
@@ -1604,6 +1621,7 @@
1604
1621
  --wds-vertical-tabs-icon-fill-disabled: var(--wds-color-text-disabled);
1605
1622
  --wds-vertical-tabs-icon-fill-active: var(--wds-color-text-standard-primary);
1606
1623
  --wds-vertical-tabs-icon-fill: var(--wds-color-text-primary);
1624
+ --wds-top-banner-content-color: var(--wds-color-text-standard-primary-light);
1607
1625
  --wds-tooltip-text-fill: var(--wds-color-text-standard-primary-light);
1608
1626
  --wds-tooltip-label-font-size-medium: var(--wds-font-size-body-small);
1609
1627
  --wds-tooltip-border-radius: var(--wds-border-radius-surface-overlay);
@@ -1718,6 +1736,8 @@
1718
1736
  --wds-swatches-fill-border-no-value: var(--wds-color-border-standard-secondary);
1719
1737
  --wds-status-toast-text-font-size: var(--wds-font-size-body-medium);
1720
1738
  --wds-status-toast-info-icon-fill: var(--wds-color-text-standard-primary-light);
1739
+ --wds-statistics-widget-value-font-size-tiny: var(--wds-font-size-body-medium);
1740
+ --wds-statistics-widget-description-font-size: var(--wds-font-size-body-small);
1721
1741
  --wds-slider-track-color: var(--wds-color-fill-standard-secondary);
1722
1742
  --wds-slider-slider-knob-color-hover: var(--wds-color-fill-standard-primary-hover);
1723
1743
  --wds-slider-slider-knob-color: var(--wds-color-fill-standard-primary);
@@ -2173,6 +2193,9 @@
2173
2193
  --wds-button-border-dark-secondary-active: var(--wds-color-fill-dark-primary);
2174
2194
  --wds-button-border-dark-secondary: var(--wds-color-border-dark-primary);
2175
2195
  --wds-breadcrumbs-on-grey-text-fill-active: var(--wds-color-text-standard-primary);
2196
+ --wds-badge-solid-warning-light-label-color: var(--wds-color-text-standard-secondary);
2197
+ --wds-badge-solid-neutral-success-label-color: var(--wds-color-text-standard-secondary);
2198
+ --wds-badge-solid-neutral-danger-label-color: var(--wds-color-text-standard-secondary);
2176
2199
  --wds-badge-outline-warning-label-color: var(--wds-color-text-warning);
2177
2200
  --wds-badge-outline-warning-fill: var(--wds-color-fill-warning-tertiary);
2178
2201
  --wds-badge-outline-warning-border-color: var(--wds-color-border-warning-primary);
@@ -2219,6 +2242,7 @@
2219
2242
  --wds-accordion-title-font-size-medium: var(--wds-font-size-body-medium);
2220
2243
  --wds-accordion-title-fill-hover: var(--wds-color-text-standard-primary);
2221
2244
  --wds-accordion-title-fill: var(--wds-color-text-standard-primary);
2245
+ --wds-accordion-padding-horizontal-medium: var(--wds-space-padding-horizontal-medium);
2222
2246
  --wds-accordion-padding-horizontal-large: var(--wds-space-padding-horizontal-large);
2223
2247
  --wds-accordion-inner-content-shadow-last: var(--wds-shadow-inner-300-top);
2224
2248
  --wds-accordion-inner-content-padding-bottom: var(--wds-space-padding-vertical-small);
@@ -2240,6 +2264,8 @@
2240
2264
  --wds-tabs-label-line-height-small: var(--wds-font-line-height-body-small);
2241
2265
  --wds-tabs-label-line-height-medium: var(--wds-font-line-height-body-medium);
2242
2266
  --wds-status-toast-text-font-line-height: var(--wds-font-line-height-body-medium);
2267
+ --wds-statistics-widget-value-font-line-height-tiny: var(--wds-font-line-height-body-medium);
2268
+ --wds-statistics-widget-description-font-line-height: var(--wds-font-line-height-body-small);
2243
2269
  --wds-side-panel-title-font-line-height: var(--wds-font-line-height-heading-3);
2244
2270
  --wds-side-panel-subtitle-font-line-height: var(--wds-font-line-height-body-medium);
2245
2271
  --wds-side-panel-floating-title-font-line-height: var(--wds-font-line-height-body-medium);
package/all.st.css CHANGED
@@ -12,6 +12,7 @@
12
12
  @property st-global(--wds-accordion-inner-content-shadow);
13
13
  @property st-global(--wds-accordion-inner-content-shadow-last);
14
14
  @property st-global(--wds-accordion-padding-horizontal-large);
15
+ @property st-global(--wds-accordion-padding-horizontal-medium);
15
16
  @property st-global(--wds-accordion-title-fill);
16
17
  @property st-global(--wds-accordion-title-fill-hover);
17
18
  @property st-global(--wds-accordion-title-font-line-height-medium);
@@ -66,8 +67,10 @@
66
67
  @property st-global(--wds-announcement-modal-top-controls-gap);
67
68
  @property st-global(--wds-announcement-modal-top-controls-padding-end);
68
69
  @property st-global(--wds-announcement-modal-top-controls-padding-top);
70
+ @property st-global(--wds-avatar-color-7-fill);
69
71
  @property st-global(--wds-avatar-group-gap-condensed);
70
72
  @property st-global(--wds-avatar-group-gap-default);
73
+ @property st-global(--wds-avatar-size-tiny);
71
74
  @property st-global(--wds-avatar-text-fill);
72
75
  @property st-global(--wds-background-blur-0);
73
76
  @property st-global(--wds-background-blur-50);
@@ -119,6 +122,9 @@
119
122
  @property st-global(--wds-badge-size-medium);
120
123
  @property st-global(--wds-badge-size-small);
121
124
  @property st-global(--wds-badge-size-tiny);
125
+ @property st-global(--wds-badge-solid-neutral-danger-label-color);
126
+ @property st-global(--wds-badge-solid-neutral-success-label-color);
127
+ @property st-global(--wds-badge-solid-warning-light-label-color);
122
128
  @property st-global(--wds-border-radius-0);
123
129
  @property st-global(--wds-border-radius-100);
124
130
  @property st-global(--wds-border-radius-200);
@@ -320,6 +326,7 @@
320
326
  @property st-global(--wds-card-header-divider-width);
321
327
  @property st-global(--wds-card-header-padding-horizontal);
322
328
  @property st-global(--wds-card-header-padding-vertical);
329
+ @property st-global(--wds-card-header-suffix-align);
323
330
  @property st-global(--wds-card-header-title-subtitle-gap);
324
331
  @property st-global(--wds-card-shadow);
325
332
  @property st-global(--wds-card-subtitle-color);
@@ -722,6 +729,7 @@
722
729
  @property st-global(--wds-color-fill-surface-overlay-dark);
723
730
  @property st-global(--wds-color-fill-surface-premium);
724
731
  @property st-global(--wds-color-fill-surface-raised);
732
+ @property st-global(--wds-color-fill-surface-stage);
725
733
  @property st-global(--wds-color-fill-surface-standard);
726
734
  @property st-global(--wds-color-fill-surface-success);
727
735
  @property st-global(--wds-color-fill-surface-sunken);
@@ -898,6 +906,9 @@
898
906
  @property st-global(--wds-counter-badge-size-small);
899
907
  @property st-global(--wds-counter-badge-size-tiny);
900
908
  @property st-global(--wds-custom-modal-border-radius);
909
+ @property st-global(--wds-custom-modal-close-button-fill);
910
+ @property st-global(--wds-custom-modal-close-button-icon-size);
911
+ @property st-global(--wds-custom-modal-close-button-size);
901
912
  @property st-global(--wds-custom-modal-content-padding-horizontal);
902
913
  @property st-global(--wds-custom-modal-content-padding-vertical);
903
914
  @property st-global(--wds-custom-modal-footer-padding-horizontal);
@@ -1429,6 +1440,7 @@
1429
1440
  @property st-global(--wds-message-modal-close-button-icon-size);
1430
1441
  @property st-global(--wds-message-modal-close-button-size);
1431
1442
  @property st-global(--wds-message-modal-content-gap);
1443
+ @property st-global(--wds-message-modal-help-button-icon-size);
1432
1444
  @property st-global(--wds-message-modal-help-button-size);
1433
1445
  @property st-global(--wds-message-modal-illustration-content-gap);
1434
1446
  @property st-global(--wds-message-modal-illustration-margin-start);
@@ -1437,6 +1449,7 @@
1437
1449
  @property st-global(--wds-message-modal-padding-vertical);
1438
1450
  @property st-global(--wds-message-modal-text-font-line-height);
1439
1451
  @property st-global(--wds-message-modal-text-font-size);
1452
+ @property st-global(--wds-message-modal-text-font-weight);
1440
1453
  @property st-global(--wds-message-modal-title-font-family);
1441
1454
  @property st-global(--wds-message-modal-title-font-line-height);
1442
1455
  @property st-global(--wds-message-modal-title-font-size);
@@ -1458,6 +1471,9 @@
1458
1471
  @property st-global(--wds-notification-padding-vertical);
1459
1472
  @property st-global(--wds-number-input-icon-fill);
1460
1473
  @property st-global(--wds-page-header-back-button-gap);
1474
+ @property st-global(--wds-page-header-breadcrumbs-offset-large);
1475
+ @property st-global(--wds-page-header-breadcrumbs-offset-medium);
1476
+ @property st-global(--wds-page-header-breadcrumbs-offset-small);
1461
1477
  @property st-global(--wds-page-header-padding-horizontal);
1462
1478
  @property st-global(--wds-page-header-padding-horizontal-small);
1463
1479
  @property st-global(--wds-page-header-padding-vertical);
@@ -1928,6 +1944,15 @@
1928
1944
  @property st-global(--wds-space-padding-vertical-x-tiny);
1929
1945
  @property st-global(--wds-space-padding-vertical-xx-tiny);
1930
1946
  @property st-global(--wds-space-viewport-spacing);
1947
+ @property st-global(--wds-statistics-widget-description-font-line-height);
1948
+ @property st-global(--wds-statistics-widget-description-font-size);
1949
+ @property st-global(--wds-statistics-widget-description-info-gap);
1950
+ @property st-global(--wds-statistics-widget-trend-space-top);
1951
+ @property st-global(--wds-statistics-widget-value-font-family-tiny);
1952
+ @property st-global(--wds-statistics-widget-value-font-letter-spacing);
1953
+ @property st-global(--wds-statistics-widget-value-font-line-height-tiny);
1954
+ @property st-global(--wds-statistics-widget-value-font-size-tiny);
1955
+ @property st-global(--wds-statistics-widget-value-font-weight-tiny);
1931
1956
  @property st-global(--wds-status-toast-info-icon-fill);
1932
1957
  @property st-global(--wds-status-toast-text-font-line-height);
1933
1958
  @property st-global(--wds-status-toast-text-font-size);
@@ -2205,6 +2230,7 @@
2205
2230
  @property st-global(--wds-tooltip-text-fill);
2206
2231
  @property st-global(--wds-top-banner-border-color);
2207
2232
  @property st-global(--wds-top-banner-border-radius);
2233
+ @property st-global(--wds-top-banner-content-color);
2208
2234
  @property st-global(--wds-top-banner-content-gap);
2209
2235
  @property st-global(--wds-top-banner-dismiss-gap);
2210
2236
  @property st-global(--wds-top-banner-fill);
@@ -2309,6 +2335,7 @@
2309
2335
  --wds-accordion-inner-content-shadow: 0 22px 18px -18px rgba(0, 6, 36, .1) inset, 0 -8px 6px -6px rgba(0, 6, 36, .05) inset, 0 -22px 18px -18px rgba(0, 6, 36, .1) inset, 0 -8px 6px -6px rgba(0, 6, 36, .05) inset;
2310
2336
  --wds-accordion-inner-content-shadow-last: 0 22px 18px -18px rgba(0, 6, 36, .1) inset, 0 -8px 6px -6px rgba(0, 6, 36, .05) inset;
2311
2337
  --wds-accordion-padding-horizontal-large: 24px;
2338
+ --wds-accordion-padding-horizontal-medium: 18px;
2312
2339
  --wds-accordion-title-fill: #000624;
2313
2340
  --wds-accordion-title-fill-hover: #000624;
2314
2341
  --wds-accordion-title-font-line-height-medium: 24px;
@@ -2363,8 +2390,10 @@
2363
2390
  --wds-announcement-modal-top-controls-gap: 3px;
2364
2391
  --wds-announcement-modal-top-controls-padding-end: 12px;
2365
2392
  --wds-announcement-modal-top-controls-padding-top: 18px;
2393
+ --wds-avatar-color-7-fill: #ACAFC4;
2366
2394
  --wds-avatar-group-gap-condensed: -3px;
2367
2395
  --wds-avatar-group-gap-default: 6px;
2396
+ --wds-avatar-size-tiny: 18px;
2368
2397
  --wds-avatar-text-fill: #ffffff;
2369
2398
  --wds-background-blur-0: 0px;
2370
2399
  --wds-background-blur-50: 0px;
@@ -2416,6 +2445,9 @@
2416
2445
  --wds-badge-size-medium: 24px;
2417
2446
  --wds-badge-size-small: 18px;
2418
2447
  --wds-badge-size-tiny: 18px;
2448
+ --wds-badge-solid-neutral-danger-label-color: #44485f;
2449
+ --wds-badge-solid-neutral-success-label-color: #44485f;
2450
+ --wds-badge-solid-warning-light-label-color: #44485f;
2419
2451
  --wds-border-radius-0: 0px;
2420
2452
  --wds-border-radius-100: 2px;
2421
2453
  --wds-border-radius-200: 4px;
@@ -2617,6 +2649,7 @@
2617
2649
  --wds-card-header-divider-width: 0px;
2618
2650
  --wds-card-header-padding-horizontal: 24px;
2619
2651
  --wds-card-header-padding-vertical: 18px;
2652
+ --wds-card-header-suffix-align: center;
2620
2653
  --wds-card-header-title-subtitle-gap: 0px;
2621
2654
  --wds-card-shadow: 0 0 6px rgba(0, 6, 36, .1), 0 2px 4px rgba(0, 6, 36, .1);
2622
2655
  --wds-card-subtitle-color: #44485f;
@@ -3019,6 +3052,7 @@
3019
3052
  --wds-color-fill-surface-overlay-dark: #000624;
3020
3053
  --wds-color-fill-surface-premium: #f1e0f9;
3021
3054
  --wds-color-fill-surface-raised: #ffffff;
3055
+ --wds-color-fill-surface-stage: #eceff3;
3022
3056
  --wds-color-fill-surface-standard: #e7f0ff;
3023
3057
  --wds-color-fill-surface-success: #e1f4eb;
3024
3058
  --wds-color-fill-surface-sunken: #eceff3;
@@ -3195,6 +3229,9 @@
3195
3229
  --wds-counter-badge-size-small: 18px;
3196
3230
  --wds-counter-badge-size-tiny: 21px;
3197
3231
  --wds-custom-modal-border-radius: 8px;
3232
+ --wds-custom-modal-close-button-fill: transparent;
3233
+ --wds-custom-modal-close-button-icon-size: 12px;
3234
+ --wds-custom-modal-close-button-size: 30px;
3198
3235
  --wds-custom-modal-content-padding-horizontal: 24px;
3199
3236
  --wds-custom-modal-content-padding-vertical: 24px;
3200
3237
  --wds-custom-modal-footer-padding-horizontal: 24px;
@@ -3726,6 +3763,7 @@
3726
3763
  --wds-message-modal-close-button-icon-size: 12px;
3727
3764
  --wds-message-modal-close-button-size: 30px;
3728
3765
  --wds-message-modal-content-gap: 12px;
3766
+ --wds-message-modal-help-button-icon-size: 24px;
3729
3767
  --wds-message-modal-help-button-size: 30px;
3730
3768
  --wds-message-modal-illustration-content-gap: 24px;
3731
3769
  --wds-message-modal-illustration-margin-start: 24px;
@@ -3734,6 +3772,7 @@
3734
3772
  --wds-message-modal-padding-vertical: 24px;
3735
3773
  --wds-message-modal-text-font-line-height: 24px;
3736
3774
  --wds-message-modal-text-font-size: 16px;
3775
+ --wds-message-modal-text-font-weight: 500;
3737
3776
  --wds-message-modal-title-font-family: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
3738
3777
  --wds-message-modal-title-font-line-height: 28px;
3739
3778
  --wds-message-modal-title-font-size: 21px;
@@ -3755,6 +3794,9 @@
3755
3794
  --wds-notification-padding-vertical: 9px;
3756
3795
  --wds-number-input-icon-fill: #116dff;
3757
3796
  --wds-page-header-back-button-gap: 8px;
3797
+ --wds-page-header-breadcrumbs-offset-large: -15px;
3798
+ --wds-page-header-breadcrumbs-offset-medium: -9px;
3799
+ --wds-page-header-breadcrumbs-offset-small: -6px;
3758
3800
  --wds-page-header-padding-horizontal: 48px;
3759
3801
  --wds-page-header-padding-horizontal-small: 24px;
3760
3802
  --wds-page-header-padding-vertical: 24px;
@@ -4225,6 +4267,15 @@
4225
4267
  --wds-space-padding-vertical-x-tiny: 6px;
4226
4268
  --wds-space-padding-vertical-xx-tiny: 3px;
4227
4269
  --wds-space-viewport-spacing: 48px;
4270
+ --wds-statistics-widget-description-font-line-height: 18px;
4271
+ --wds-statistics-widget-description-font-size: 14px;
4272
+ --wds-statistics-widget-description-info-gap: 6px;
4273
+ --wds-statistics-widget-trend-space-top: 5px;
4274
+ --wds-statistics-widget-value-font-family-tiny: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
4275
+ --wds-statistics-widget-value-font-letter-spacing: 0px;
4276
+ --wds-statistics-widget-value-font-line-height-tiny: 24px;
4277
+ --wds-statistics-widget-value-font-size-tiny: 16px;
4278
+ --wds-statistics-widget-value-font-weight-tiny: 700;
4228
4279
  --wds-status-toast-info-icon-fill: #ffffff;
4229
4280
  --wds-status-toast-text-font-line-height: 24px;
4230
4281
  --wds-status-toast-text-font-size: 16px;
@@ -4502,6 +4553,7 @@
4502
4553
  --wds-tooltip-text-fill: #ffffff;
4503
4554
  --wds-top-banner-border-color: rgba(255, 255, 255, 0);
4504
4555
  --wds-top-banner-border-radius: 0px;
4556
+ --wds-top-banner-content-color: #ffffff;
4505
4557
  --wds-top-banner-content-gap: 12px;
4506
4558
  --wds-top-banner-dismiss-gap: 12px;
4507
4559
  --wds-top-banner-fill: #c161f0;