@wix/design-system-tokens 1.224.3 → 1.225.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 (24) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/all.css +33 -0
  3. package/all.scss +33 -0
  4. package/all.st.css +66 -0
  5. package/component.st.css +66 -0
  6. package/odeditor/all.css +54 -21
  7. package/odeditor/all.scss +54 -21
  8. package/odeditor/all.st.css +96 -30
  9. package/odeditor/component.st.css +91 -25
  10. package/odeditor/foundation.st.css +2 -2
  11. package/odeditor/semantic.st.css +3 -3
  12. package/odeditor-dark/all.css +31 -0
  13. package/odeditor-dark/all.scss +31 -0
  14. package/odeditor-dark/all.st.css +62 -0
  15. package/odeditor-dark/component.st.css +62 -0
  16. package/package.json +2 -2
  17. package/studio/all.css +31 -0
  18. package/studio/all.scss +31 -0
  19. package/studio/all.st.css +62 -0
  20. package/studio/component.st.css +62 -0
  21. package/wixel/all.css +31 -0
  22. package/wixel/all.scss +31 -0
  23. package/wixel/all.st.css +62 -0
  24. package/wixel/component.st.css +62 -0
package/CHANGELOG.md CHANGED
@@ -1,3 +1,23 @@
1
+ ## 1.225.1
2
+
3
+ ### Patch Changes
4
+
5
+ - [#16858](https://github.com/wix-private/wix-design-systems/pull/16858) [`e09ab17`](https://github.com/wix-private/wix-design-systems/commit/e09ab17a6190c72a2dd302ad0ad8835a1235102f) - Harmony (odeditor): `--wds-color-text-placeholder` changed from `#767574` to `#525150` to meet AA contrast (darkens placeholder text across the input family), and `--wds-input-background-fill-disabled` changed from `#F8F6F6` to `#F0EFEF` so disabled inputs are distinguishable from active ones.
6
+
7
+ - [#16861](https://github.com/wix-private/wix-design-systems/pull/16861) [`e109bf4`](https://github.com/wix-private/wix-design-systems/commit/e109bf4f797422749547ef8d1007d7bfdca21402) - In the odeditor theme, Page.Section content gap is reduced from 4px to 2px
8
+
9
+ - [#16860](https://github.com/wix-private/wix-design-systems/pull/16860) [`e4afd60`](https://github.com/wix-private/wix-design-systems/commit/e4afd604d6b56483b826dfa97c044b67fa3f3032) - Add `--wds-trend-indicator-gap`: `2px` in Harmony (odeditor), `4px` in all other themes.
10
+
11
+ ## 1.225.0
12
+
13
+ ### Minor Changes
14
+
15
+ - [#16859](https://github.com/wix-private/wix-design-systems/pull/16859) [`3e9e0a2`](https://github.com/wix-private/wix-design-systems/commit/3e9e0a2fb0def1a0d442ac44482f29e0a112e848) - **Visual breaking change:** Harmony (odeditor) palette: `--wds-color-green-50` changed from `#11664f` to `#3f7b5c` and `--wds-color-yellow-0` from `#d49341` to `#9f6113` — success primary hover and warning primary active fills follow. The Badge token group (outlined border, fill and label colors, plus new solid fill and label-color tokens) darkens outlined borders on every skin and recolors solid success, warning and urgent badges in that theme. New `badge.transparent.*.label-color` tokens darken transparent success, warning and urgent labels in odeditor while resolving to the existing text colors in other themes. New `badge.outline.*.border-color` and `badge.solid.*.fill`/`label-color` tokens for the `neutral-standard`, `neutral-success`, `neutral-danger`, `neutral-light` and `warning-light` skins are defined in all five themes — odeditor gets the new design values, other themes get no-op values that reproduce current rendering.
16
+
17
+ ### Patch Changes
18
+
19
+ - [#16819](https://github.com/wix-private/wix-design-systems/pull/16819) [`5390183`](https://github.com/wix-private/wix-design-systems/commit/5390183b18e99a3feaa05b730dd86f6cde2550af) - New CardGalleryItem tokens, all defined per theme at the current rendering so only Harmony (odeditor) changes: `--wds-card-gallery-item-actions-clearance-top`/`-bottom` (odeditor `36px`/`0`, centring the hover actions below the badge), `--wds-card-gallery-item-settings-menu-offset` (each theme's `--wds-space-200`), and a `--wds-card-gallery-item-secondary-action-*` group (`height`, `min-width`, `border-radius`, `padding-vertical`/`-horizontal`, `fill-hover`/`-active`, `color-hover`/`-active`) that in odeditor styles the secondary hover action as a tertiary button and elsewhere matches the text button it decorates.
20
+
1
21
  ## 1.224.3
2
22
 
3
23
  ### Patch Changes
package/all.css CHANGED
@@ -277,6 +277,7 @@
277
277
  --wds-vertical-tabs-item-padding-horizontal-tiny-offset: 20px;
278
278
  --wds-vertical-tabs-item-padding-horizontal-small-offset: 20px;
279
279
  --wds-vertical-tabs-item-padding-horizontal-medium-offset: 24px;
280
+ --wds-trend-indicator-gap: 4px;
280
281
  --wds-top-banner-shadow: 0 0 0 transparent;
281
282
  --wds-toggle-switch-width-small: 28px;
282
283
  --wds-toggle-switch-width-medium: 34px;
@@ -452,6 +453,11 @@
452
453
  --wds-carousel-controls-border: solid 1px var(--wds-icon-button-color-border-standard-secondary);
453
454
  --wds-card-gallery-item-title-gap: 0px;
454
455
  --wds-card-gallery-item-shadow-hover-side: 0 6px 6px 0 rgba(22, 45, 61, 0.06), 0 0 18px 0 rgba(22, 45, 61, 0.12);
456
+ --wds-card-gallery-item-secondary-action-min-width: auto;
457
+ --wds-card-gallery-item-secondary-action-height: 24px;
458
+ --wds-card-gallery-item-secondary-action-fill-hover: transparent;
459
+ --wds-card-gallery-item-secondary-action-fill-active: transparent;
460
+ --wds-card-gallery-item-secondary-action-border-radius: 2px;
455
461
  --wds-card-gallery-item-overlay-backdrop-filter: none;
456
462
  --wds-card-gallery-item-image-side-size-small: 30px;
457
463
  --wds-card-gallery-item-image-side-size-medium: 40px;
@@ -1631,6 +1637,9 @@
1631
1637
  --wds-card-gallery-item-title-font-weight-medium: var(--wds-font-weight-medium);
1632
1638
  --wds-card-gallery-item-title-font-letter-spacing: var(--wds-font-letter-spacing-0);
1633
1639
  --wds-card-gallery-item-title-font-family: var(--wds-font-family-default);
1640
+ --wds-card-gallery-item-settings-menu-offset: var(--wds-space-200);
1641
+ --wds-card-gallery-item-secondary-action-padding-vertical: var(--wds-space-0);
1642
+ --wds-card-gallery-item-secondary-action-padding-horizontal: var(--wds-space-0);
1634
1643
  --wds-card-gallery-item-padding-vertical-small: var(--wds-space-200);
1635
1644
  --wds-card-gallery-item-padding-vertical-medium: var(--wds-space-300);
1636
1645
  --wds-card-gallery-item-padding-right-small: var(--wds-space-300);
@@ -1646,6 +1655,8 @@
1646
1655
  --wds-card-gallery-item-buttons-gap: var(--wds-space-100);
1647
1656
  --wds-card-gallery-item-border-radius-100: var(--wds-border-radius-400);
1648
1657
  --wds-card-gallery-item-border-radius-0: var(--wds-border-radius-0);
1658
+ --wds-card-gallery-item-actions-clearance-top: var(--wds-space-200);
1659
+ --wds-card-gallery-item-actions-clearance-bottom: var(--wds-space-200);
1649
1660
  --wds-card-gallery-item-action-button-size: var(--wds-space-600);
1650
1661
  --wds-card-gallery-item-action-button-padding-vertical: var(--wds-space-100);
1651
1662
  --wds-card-gallery-item-action-button-padding-horizontal: var(--wds-space-400);
@@ -2320,6 +2331,8 @@
2320
2331
  --wds-card-gallery-item-subtitle-side-font-size-medium: var(--wds-font-size-body-tiny);
2321
2332
  --wds-card-gallery-item-subtitle-font-size-medium: var(--wds-font-size-body-small);
2322
2333
  --wds-card-gallery-item-secondary-action-font-size: var(--wds-font-size-body-medium);
2334
+ --wds-card-gallery-item-secondary-action-color-hover: var(--wds-color-fill-light-primary);
2335
+ --wds-card-gallery-item-secondary-action-color-active: var(--wds-color-fill-light-primary);
2323
2336
  --wds-card-gallery-item-overlay-hover-fill: var(--wds-color-fill-transparent-primary);
2324
2337
  --wds-card-gallery-item-overlay-fill: var(--wds-color-fill-transparent-primary);
2325
2338
  --wds-card-gallery-item-fill: var(--wds-color-fill-surface-default);
@@ -2404,9 +2417,24 @@
2404
2417
  --wds-button-border-dark-secondary-active: var(--wds-color-fill-dark-primary);
2405
2418
  --wds-button-border-dark-secondary: var(--wds-color-border-dark-primary);
2406
2419
  --wds-breadcrumbs-on-grey-text-fill-active: var(--wds-color-text-standard-primary);
2420
+ --wds-badge-transparent-warning-label-color: var(--wds-color-text-warning);
2421
+ --wds-badge-transparent-urgent-label-color: var(--wds-color-text-urgent);
2422
+ --wds-badge-transparent-success-label-color: var(--wds-color-text-success);
2407
2423
  --wds-badge-solid-warning-light-label-color: var(--wds-color-text-standard-secondary);
2424
+ --wds-badge-solid-warning-light-fill: var(--wds-color-fill-warning-secondary);
2425
+ --wds-badge-solid-warning-label-color: var(--wds-color-text-standard-primary-light);
2426
+ --wds-badge-solid-urgent-label-color: var(--wds-color-text-standard-primary-light);
2427
+ --wds-badge-solid-success-label-color: var(--wds-color-text-standard-primary-light);
2428
+ --wds-badge-solid-success-fill: var(--wds-color-fill-success-primary);
2408
2429
  --wds-badge-solid-neutral-success-label-color: var(--wds-color-text-standard-secondary);
2430
+ --wds-badge-solid-neutral-success-fill: var(--wds-color-fill-success-secondary);
2431
+ --wds-badge-solid-neutral-standard-label-color: var(--wds-color-text-standard-secondary);
2432
+ --wds-badge-solid-neutral-standard-fill: var(--wds-color-fill-standard-secondary);
2433
+ --wds-badge-solid-neutral-light-label-color: var(--wds-color-text-standard-secondary);
2434
+ --wds-badge-solid-neutral-light-fill: var(--wds-color-fill-dark-secondary);
2409
2435
  --wds-badge-solid-neutral-danger-label-color: var(--wds-color-text-standard-secondary);
2436
+ --wds-badge-solid-neutral-danger-fill: var(--wds-color-fill-destructive-secondary);
2437
+ --wds-badge-outline-warning-light-border-color: var(--wds-color-border-warning-secondary);
2410
2438
  --wds-badge-outline-warning-label-color: var(--wds-color-text-warning);
2411
2439
  --wds-badge-outline-warning-fill: var(--wds-color-fill-warning-tertiary);
2412
2440
  --wds-badge-outline-warning-border-color: var(--wds-color-border-warning-primary);
@@ -2422,6 +2450,10 @@
2422
2450
  --wds-badge-outline-premium-label-color: var(--wds-color-text-premium);
2423
2451
  --wds-badge-outline-premium-fill: var(--wds-color-fill-premium-tertiary);
2424
2452
  --wds-badge-outline-premium-border-color: var(--wds-color-border-premium-primary);
2453
+ --wds-badge-outline-neutral-success-border-color: var(--wds-color-border-success-secondary);
2454
+ --wds-badge-outline-neutral-standard-border-color: var(--wds-color-border-standard-secondary);
2455
+ --wds-badge-outline-neutral-light-border-color: var(--wds-color-border-dark-secondary);
2456
+ --wds-badge-outline-neutral-danger-border-color: var(--wds-color-border-destructive-secondary);
2425
2457
  --wds-badge-outline-neutral-label-color: var(--wds-color-text-standard-secondary-light);
2426
2458
  --wds-badge-outline-neutral-fill: var(--wds-color-fill-dark-tertiary);
2427
2459
  --wds-badge-outline-neutral-border-color: var(--wds-color-border-dark-primary);
@@ -2516,6 +2548,7 @@
2516
2548
  --wds-input-value-font-line-height-small: var(--wds-font-line-height-body-small);
2517
2549
  --wds-input-value-font-line-height-medium: var(--wds-font-line-height-body-medium);
2518
2550
  --wds-input-value-font-line-height-large: var(--wds-font-line-height-body-medium);
2551
+ --wds-form-field-label-readonly: var(--wds-form-field-label-fill);
2519
2552
  --wds-form-field-label-line-height-tiny: var(--wds-font-line-height-body-tiny);
2520
2553
  --wds-form-field-label-line-height-small: var(--wds-font-line-height-body-small);
2521
2554
  --wds-field-set-label-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
package/all.scss CHANGED
@@ -2,6 +2,7 @@
2
2
  --wds-vertical-tabs-item-padding-horizontal-tiny-offset: 20px;
3
3
  --wds-vertical-tabs-item-padding-horizontal-small-offset: 20px;
4
4
  --wds-vertical-tabs-item-padding-horizontal-medium-offset: 24px;
5
+ --wds-trend-indicator-gap: 4px;
5
6
  --wds-top-banner-shadow: 0 0 0 transparent;
6
7
  --wds-toggle-switch-width-small: 28px;
7
8
  --wds-toggle-switch-width-medium: 34px;
@@ -426,6 +427,11 @@
426
427
  --wds-card-header-suffix-align: center;
427
428
  --wds-card-gallery-item-title-gap: 0px;
428
429
  --wds-card-gallery-item-shadow-hover-side: 0 6px 6px 0 rgba(22, 45, 61, 0.06), 0 0 18px 0 rgba(22, 45, 61, 0.12);
430
+ --wds-card-gallery-item-secondary-action-min-width: auto;
431
+ --wds-card-gallery-item-secondary-action-height: 24px;
432
+ --wds-card-gallery-item-secondary-action-fill-hover: transparent;
433
+ --wds-card-gallery-item-secondary-action-fill-active: transparent;
434
+ --wds-card-gallery-item-secondary-action-border-radius: 2px;
429
435
  --wds-card-gallery-item-overlay-backdrop-filter: none;
430
436
  --wds-card-gallery-item-image-side-size-small: 30px;
431
437
  --wds-card-gallery-item-image-side-size-medium: 40px;
@@ -1628,6 +1634,9 @@
1628
1634
  --wds-card-gallery-item-title-font-weight-medium: var(--wds-font-weight-medium);
1629
1635
  --wds-card-gallery-item-title-font-letter-spacing: var(--wds-font-letter-spacing-0);
1630
1636
  --wds-card-gallery-item-title-font-family: var(--wds-font-family-default);
1637
+ --wds-card-gallery-item-settings-menu-offset: var(--wds-space-200);
1638
+ --wds-card-gallery-item-secondary-action-padding-vertical: var(--wds-space-0);
1639
+ --wds-card-gallery-item-secondary-action-padding-horizontal: var(--wds-space-0);
1631
1640
  --wds-card-gallery-item-padding-vertical-small: var(--wds-space-200);
1632
1641
  --wds-card-gallery-item-padding-vertical-medium: var(--wds-space-300);
1633
1642
  --wds-card-gallery-item-padding-right-small: var(--wds-space-300);
@@ -1643,6 +1652,8 @@
1643
1652
  --wds-card-gallery-item-buttons-gap: var(--wds-space-100);
1644
1653
  --wds-card-gallery-item-border-radius-100: var(--wds-border-radius-400);
1645
1654
  --wds-card-gallery-item-border-radius-0: var(--wds-border-radius-0);
1655
+ --wds-card-gallery-item-actions-clearance-top: var(--wds-space-200);
1656
+ --wds-card-gallery-item-actions-clearance-bottom: var(--wds-space-200);
1646
1657
  --wds-card-gallery-item-action-button-size: var(--wds-space-600);
1647
1658
  --wds-card-gallery-item-action-button-padding-vertical: var(--wds-space-100);
1648
1659
  --wds-card-gallery-item-action-button-padding-horizontal: var(--wds-space-400);
@@ -2322,6 +2333,8 @@
2322
2333
  --wds-card-gallery-item-subtitle-side-font-size-medium: var(--wds-font-size-body-tiny);
2323
2334
  --wds-card-gallery-item-subtitle-font-size-medium: var(--wds-font-size-body-small);
2324
2335
  --wds-card-gallery-item-secondary-action-font-size: var(--wds-font-size-body-medium);
2336
+ --wds-card-gallery-item-secondary-action-color-hover: var(--wds-color-fill-light-primary);
2337
+ --wds-card-gallery-item-secondary-action-color-active: var(--wds-color-fill-light-primary);
2325
2338
  --wds-card-gallery-item-overlay-hover-fill: var(--wds-color-fill-transparent-primary);
2326
2339
  --wds-card-gallery-item-overlay-fill: var(--wds-color-fill-transparent-primary);
2327
2340
  --wds-card-gallery-item-fill: var(--wds-color-fill-surface-default);
@@ -2404,9 +2417,24 @@
2404
2417
  --wds-button-border-dark-secondary-active: var(--wds-color-fill-dark-primary);
2405
2418
  --wds-button-border-dark-secondary: var(--wds-color-border-dark-primary);
2406
2419
  --wds-breadcrumbs-on-grey-text-fill-active: var(--wds-color-text-standard-primary);
2420
+ --wds-badge-transparent-warning-label-color: var(--wds-color-text-warning);
2421
+ --wds-badge-transparent-urgent-label-color: var(--wds-color-text-urgent);
2422
+ --wds-badge-transparent-success-label-color: var(--wds-color-text-success);
2407
2423
  --wds-badge-solid-warning-light-label-color: var(--wds-color-text-standard-secondary);
2424
+ --wds-badge-solid-warning-light-fill: var(--wds-color-fill-warning-secondary);
2425
+ --wds-badge-solid-warning-label-color: var(--wds-color-text-standard-primary-light);
2426
+ --wds-badge-solid-urgent-label-color: var(--wds-color-text-standard-primary-light);
2427
+ --wds-badge-solid-success-label-color: var(--wds-color-text-standard-primary-light);
2428
+ --wds-badge-solid-success-fill: var(--wds-color-fill-success-primary);
2408
2429
  --wds-badge-solid-neutral-success-label-color: var(--wds-color-text-standard-secondary);
2430
+ --wds-badge-solid-neutral-success-fill: var(--wds-color-fill-success-secondary);
2431
+ --wds-badge-solid-neutral-standard-label-color: var(--wds-color-text-standard-secondary);
2432
+ --wds-badge-solid-neutral-standard-fill: var(--wds-color-fill-standard-secondary);
2433
+ --wds-badge-solid-neutral-light-label-color: var(--wds-color-text-standard-secondary);
2434
+ --wds-badge-solid-neutral-light-fill: var(--wds-color-fill-dark-secondary);
2409
2435
  --wds-badge-solid-neutral-danger-label-color: var(--wds-color-text-standard-secondary);
2436
+ --wds-badge-solid-neutral-danger-fill: var(--wds-color-fill-destructive-secondary);
2437
+ --wds-badge-outline-warning-light-border-color: var(--wds-color-border-warning-secondary);
2410
2438
  --wds-badge-outline-warning-label-color: var(--wds-color-text-warning);
2411
2439
  --wds-badge-outline-warning-fill: var(--wds-color-fill-warning-tertiary);
2412
2440
  --wds-badge-outline-warning-border-color: var(--wds-color-border-warning-primary);
@@ -2422,8 +2450,12 @@
2422
2450
  --wds-badge-outline-premium-label-color: var(--wds-color-text-premium);
2423
2451
  --wds-badge-outline-premium-fill: var(--wds-color-fill-premium-tertiary);
2424
2452
  --wds-badge-outline-premium-border-color: var(--wds-color-border-premium-primary);
2453
+ --wds-badge-outline-neutral-success-border-color: var(--wds-color-border-success-secondary);
2454
+ --wds-badge-outline-neutral-standard-border-color: var(--wds-color-border-standard-secondary);
2455
+ --wds-badge-outline-neutral-light-border-color: var(--wds-color-border-dark-secondary);
2425
2456
  --wds-badge-outline-neutral-label-color: var(--wds-color-text-standard-secondary-light);
2426
2457
  --wds-badge-outline-neutral-fill: var(--wds-color-fill-dark-tertiary);
2458
+ --wds-badge-outline-neutral-danger-border-color: var(--wds-color-border-destructive-secondary);
2427
2459
  --wds-badge-outline-neutral-border-color: var(--wds-color-border-dark-primary);
2428
2460
  --wds-badge-outline-destructive-label-color: var(--wds-color-text-destructive);
2429
2461
  --wds-badge-outline-destructive-fill: var(--wds-color-fill-destructive-tertiary);
@@ -2516,6 +2548,7 @@
2516
2548
  --wds-input-value-font-line-height-small: var(--wds-font-line-height-body-small);
2517
2549
  --wds-input-value-font-line-height-medium: var(--wds-font-line-height-body-medium);
2518
2550
  --wds-input-value-font-line-height-large: var(--wds-font-line-height-body-medium);
2551
+ --wds-form-field-label-readonly: var(--wds-form-field-label-fill);
2519
2552
  --wds-form-field-label-line-height-tiny: var(--wds-font-line-height-body-tiny);
2520
2553
  --wds-form-field-label-line-height-small: var(--wds-font-line-height-body-small);
2521
2554
  --wds-field-set-label-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
package/all.st.css CHANGED
@@ -103,8 +103,12 @@
103
103
  @property st-global(--wds-badge-outline-destructive-fill);
104
104
  @property st-global(--wds-badge-outline-destructive-label-color);
105
105
  @property st-global(--wds-badge-outline-neutral-border-color);
106
+ @property st-global(--wds-badge-outline-neutral-danger-border-color);
106
107
  @property st-global(--wds-badge-outline-neutral-fill);
107
108
  @property st-global(--wds-badge-outline-neutral-label-color);
109
+ @property st-global(--wds-badge-outline-neutral-light-border-color);
110
+ @property st-global(--wds-badge-outline-neutral-standard-border-color);
111
+ @property st-global(--wds-badge-outline-neutral-success-border-color);
108
112
  @property st-global(--wds-badge-outline-premium-border-color);
109
113
  @property st-global(--wds-badge-outline-premium-fill);
110
114
  @property st-global(--wds-badge-outline-premium-label-color);
@@ -120,6 +124,7 @@
120
124
  @property st-global(--wds-badge-outline-warning-border-color);
121
125
  @property st-global(--wds-badge-outline-warning-fill);
122
126
  @property st-global(--wds-badge-outline-warning-label-color);
127
+ @property st-global(--wds-badge-outline-warning-light-border-color);
123
128
  @property st-global(--wds-badge-padding-horizontal-medium);
124
129
  @property st-global(--wds-badge-padding-horizontal-small);
125
130
  @property st-global(--wds-badge-padding-horizontal-tiny);
@@ -129,9 +134,23 @@
129
134
  @property st-global(--wds-badge-size-medium);
130
135
  @property st-global(--wds-badge-size-small);
131
136
  @property st-global(--wds-badge-size-tiny);
137
+ @property st-global(--wds-badge-solid-neutral-danger-fill);
132
138
  @property st-global(--wds-badge-solid-neutral-danger-label-color);
139
+ @property st-global(--wds-badge-solid-neutral-light-fill);
140
+ @property st-global(--wds-badge-solid-neutral-light-label-color);
141
+ @property st-global(--wds-badge-solid-neutral-standard-fill);
142
+ @property st-global(--wds-badge-solid-neutral-standard-label-color);
143
+ @property st-global(--wds-badge-solid-neutral-success-fill);
133
144
  @property st-global(--wds-badge-solid-neutral-success-label-color);
145
+ @property st-global(--wds-badge-solid-success-fill);
146
+ @property st-global(--wds-badge-solid-success-label-color);
147
+ @property st-global(--wds-badge-solid-urgent-label-color);
148
+ @property st-global(--wds-badge-solid-warning-label-color);
149
+ @property st-global(--wds-badge-solid-warning-light-fill);
134
150
  @property st-global(--wds-badge-solid-warning-light-label-color);
151
+ @property st-global(--wds-badge-transparent-success-label-color);
152
+ @property st-global(--wds-badge-transparent-urgent-label-color);
153
+ @property st-global(--wds-badge-transparent-warning-label-color);
135
154
  @property st-global(--wds-border-radius-0);
136
155
  @property st-global(--wds-border-radius-100);
137
156
  @property st-global(--wds-border-radius-200);
@@ -322,6 +341,8 @@
322
341
  @property st-global(--wds-card-gallery-item-action-button-padding-vertical);
323
342
  @property st-global(--wds-card-gallery-item-action-button-size);
324
343
  @property st-global(--wds-card-gallery-item-actions-align);
344
+ @property st-global(--wds-card-gallery-item-actions-clearance-bottom);
345
+ @property st-global(--wds-card-gallery-item-actions-clearance-top);
325
346
  @property st-global(--wds-card-gallery-item-actions-direction);
326
347
  @property st-global(--wds-card-gallery-item-actions-secondary-position);
327
348
  @property st-global(--wds-card-gallery-item-badge-offset-block);
@@ -349,8 +370,18 @@
349
370
  @property st-global(--wds-card-gallery-item-padding-right-small);
350
371
  @property st-global(--wds-card-gallery-item-padding-vertical-medium);
351
372
  @property st-global(--wds-card-gallery-item-padding-vertical-small);
373
+ @property st-global(--wds-card-gallery-item-secondary-action-border-radius);
374
+ @property st-global(--wds-card-gallery-item-secondary-action-color-active);
375
+ @property st-global(--wds-card-gallery-item-secondary-action-color-hover);
376
+ @property st-global(--wds-card-gallery-item-secondary-action-fill-active);
377
+ @property st-global(--wds-card-gallery-item-secondary-action-fill-hover);
352
378
  @property st-global(--wds-card-gallery-item-secondary-action-font-size);
379
+ @property st-global(--wds-card-gallery-item-secondary-action-height);
353
380
  @property st-global(--wds-card-gallery-item-secondary-action-line-height);
381
+ @property st-global(--wds-card-gallery-item-secondary-action-min-width);
382
+ @property st-global(--wds-card-gallery-item-secondary-action-padding-horizontal);
383
+ @property st-global(--wds-card-gallery-item-secondary-action-padding-vertical);
384
+ @property st-global(--wds-card-gallery-item-settings-menu-offset);
354
385
  @property st-global(--wds-card-gallery-item-shadow);
355
386
  @property st-global(--wds-card-gallery-item-shadow-hover);
356
387
  @property st-global(--wds-card-gallery-item-shadow-hover-side);
@@ -1124,6 +1155,7 @@
1124
1155
  @property st-global(--wds-form-field-label-gap-tiny);
1125
1156
  @property st-global(--wds-form-field-label-line-height-small);
1126
1157
  @property st-global(--wds-form-field-label-line-height-tiny);
1158
+ @property st-global(--wds-form-field-label-readonly);
1127
1159
  @property st-global(--wds-gallery-item-border);
1128
1160
  @property st-global(--wds-gallery-item-padding-left-medium);
1129
1161
  @property st-global(--wds-gallery-item-padding-left-small);
@@ -2468,6 +2500,7 @@
2468
2500
  @property st-global(--wds-top-banner-padding-horizontal-start);
2469
2501
  @property st-global(--wds-top-banner-padding-vertical);
2470
2502
  @property st-global(--wds-top-banner-shadow);
2503
+ @property st-global(--wds-trend-indicator-gap);
2471
2504
  @property st-global(--wds-variable-input-padding-vertical-small);
2472
2505
  @property st-global(--wds-variable-input-padding-vertical-tiny);
2473
2506
  @property st-global(--wds-vertical-tabs-action-padding-horizontal-medium);
@@ -2659,8 +2692,12 @@
2659
2692
  --wds-badge-outline-destructive-fill: #ffffff;
2660
2693
  --wds-badge-outline-destructive-label-color: #e62214;
2661
2694
  --wds-badge-outline-neutral-border-color: #868aa5;
2695
+ --wds-badge-outline-neutral-danger-border-color: #fbd0cd;
2662
2696
  --wds-badge-outline-neutral-fill: #ffffff;
2663
2697
  --wds-badge-outline-neutral-label-color: #868aa5;
2698
+ --wds-badge-outline-neutral-light-border-color: #dfe5eb;
2699
+ --wds-badge-outline-neutral-standard-border-color: #d6e6fe;
2700
+ --wds-badge-outline-neutral-success-border-color: #c8e8d6;
2664
2701
  --wds-badge-outline-premium-border-color: #cf8cf1;
2665
2702
  --wds-badge-outline-premium-fill: #ffffff;
2666
2703
  --wds-badge-outline-premium-label-color: #9a27d5;
@@ -2676,6 +2713,7 @@
2676
2713
  --wds-badge-outline-warning-border-color: #ffd16e;
2677
2714
  --wds-badge-outline-warning-fill: #ffffff;
2678
2715
  --wds-badge-outline-warning-label-color: #ffb700;
2716
+ --wds-badge-outline-warning-light-border-color: #ffe2a5;
2679
2717
  --wds-badge-padding-horizontal-medium: 12px;
2680
2718
  --wds-badge-padding-horizontal-small: 6px;
2681
2719
  --wds-badge-padding-horizontal-tiny: 6px;
@@ -2685,9 +2723,23 @@
2685
2723
  --wds-badge-size-medium: 24px;
2686
2724
  --wds-badge-size-small: 18px;
2687
2725
  --wds-badge-size-tiny: 18px;
2726
+ --wds-badge-solid-neutral-danger-fill: #fbd0cd;
2688
2727
  --wds-badge-solid-neutral-danger-label-color: #44485f;
2728
+ --wds-badge-solid-neutral-light-fill: #eceff3;
2729
+ --wds-badge-solid-neutral-light-label-color: #44485f;
2730
+ --wds-badge-solid-neutral-standard-fill: #d6e6fe;
2731
+ --wds-badge-solid-neutral-standard-label-color: #44485f;
2732
+ --wds-badge-solid-neutral-success-fill: #c8e8d6;
2689
2733
  --wds-badge-solid-neutral-success-label-color: #44485f;
2734
+ --wds-badge-solid-success-fill: #25a55a;
2735
+ --wds-badge-solid-success-label-color: #ffffff;
2736
+ --wds-badge-solid-urgent-label-color: #ffffff;
2737
+ --wds-badge-solid-warning-label-color: #ffffff;
2738
+ --wds-badge-solid-warning-light-fill: #ffe2a5;
2690
2739
  --wds-badge-solid-warning-light-label-color: #44485f;
2740
+ --wds-badge-transparent-success-label-color: #25a55a;
2741
+ --wds-badge-transparent-urgent-label-color: #fe620f;
2742
+ --wds-badge-transparent-warning-label-color: #ffb700;
2691
2743
  --wds-border-radius-0: 0px;
2692
2744
  --wds-border-radius-100: 2px;
2693
2745
  --wds-border-radius-200: 4px;
@@ -2878,6 +2930,8 @@
2878
2930
  --wds-card-gallery-item-action-button-padding-vertical: 6px;
2879
2931
  --wds-card-gallery-item-action-button-size: 36px;
2880
2932
  --wds-card-gallery-item-actions-align: stretch;
2933
+ --wds-card-gallery-item-actions-clearance-bottom: 12px;
2934
+ --wds-card-gallery-item-actions-clearance-top: 12px;
2881
2935
  --wds-card-gallery-item-actions-direction: row;
2882
2936
  --wds-card-gallery-item-actions-secondary-position: absolute;
2883
2937
  --wds-card-gallery-item-badge-offset-block: 12px;
@@ -2905,8 +2959,18 @@
2905
2959
  --wds-card-gallery-item-padding-right-small: 18px;
2906
2960
  --wds-card-gallery-item-padding-vertical-medium: 18px;
2907
2961
  --wds-card-gallery-item-padding-vertical-small: 12px;
2962
+ --wds-card-gallery-item-secondary-action-border-radius: 2px;
2963
+ --wds-card-gallery-item-secondary-action-color-active: #ffffff;
2964
+ --wds-card-gallery-item-secondary-action-color-hover: #ffffff;
2965
+ --wds-card-gallery-item-secondary-action-fill-active: transparent;
2966
+ --wds-card-gallery-item-secondary-action-fill-hover: transparent;
2908
2967
  --wds-card-gallery-item-secondary-action-font-size: 16px;
2968
+ --wds-card-gallery-item-secondary-action-height: 24px;
2909
2969
  --wds-card-gallery-item-secondary-action-line-height: 24px;
2970
+ --wds-card-gallery-item-secondary-action-min-width: auto;
2971
+ --wds-card-gallery-item-secondary-action-padding-horizontal: 0px;
2972
+ --wds-card-gallery-item-secondary-action-padding-vertical: 0px;
2973
+ --wds-card-gallery-item-settings-menu-offset: 12px;
2910
2974
  --wds-card-gallery-item-shadow: 0 0 6px rgba(0, 6, 36, .1), 0 2px 4px rgba(0, 6, 36, .1);
2911
2975
  --wds-card-gallery-item-shadow-hover: 0 0 6px rgba(0, 6, 36, .1), 0 2px 4px rgba(0, 6, 36, .1);
2912
2976
  --wds-card-gallery-item-shadow-hover-side: 0 6px 6px 0 rgba(22, 45, 61, 0.06), 0 0 18px 0 rgba(22, 45, 61, 0.12);
@@ -3680,6 +3744,7 @@
3680
3744
  --wds-form-field-label-gap-tiny: 6px;
3681
3745
  --wds-form-field-label-line-height-small: 18px;
3682
3746
  --wds-form-field-label-line-height-tiny: 18px;
3747
+ --wds-form-field-label-readonly: #44485f;
3683
3748
  --wds-gallery-item-border: 8px;
3684
3749
  --wds-gallery-item-padding-left-medium: 18px;
3685
3750
  --wds-gallery-item-padding-left-small: 12px;
@@ -5024,6 +5089,7 @@
5024
5089
  --wds-top-banner-padding-horizontal-start: 12px;
5025
5090
  --wds-top-banner-padding-vertical: 9px;
5026
5091
  --wds-top-banner-shadow: 0 0 0 transparent;
5092
+ --wds-trend-indicator-gap: 4px;
5027
5093
  --wds-variable-input-padding-vertical-small: 6px;
5028
5094
  --wds-variable-input-padding-vertical-tiny: 3px;
5029
5095
  --wds-vertical-tabs-action-padding-horizontal-medium: 24px;
package/component.st.css CHANGED
@@ -91,8 +91,12 @@
91
91
  @property st-global(--wds-badge-outline-destructive-fill);
92
92
  @property st-global(--wds-badge-outline-destructive-label-color);
93
93
  @property st-global(--wds-badge-outline-neutral-border-color);
94
+ @property st-global(--wds-badge-outline-neutral-danger-border-color);
94
95
  @property st-global(--wds-badge-outline-neutral-fill);
95
96
  @property st-global(--wds-badge-outline-neutral-label-color);
97
+ @property st-global(--wds-badge-outline-neutral-light-border-color);
98
+ @property st-global(--wds-badge-outline-neutral-standard-border-color);
99
+ @property st-global(--wds-badge-outline-neutral-success-border-color);
96
100
  @property st-global(--wds-badge-outline-premium-border-color);
97
101
  @property st-global(--wds-badge-outline-premium-fill);
98
102
  @property st-global(--wds-badge-outline-premium-label-color);
@@ -108,6 +112,7 @@
108
112
  @property st-global(--wds-badge-outline-warning-border-color);
109
113
  @property st-global(--wds-badge-outline-warning-fill);
110
114
  @property st-global(--wds-badge-outline-warning-label-color);
115
+ @property st-global(--wds-badge-outline-warning-light-border-color);
111
116
  @property st-global(--wds-badge-padding-horizontal-medium);
112
117
  @property st-global(--wds-badge-padding-horizontal-small);
113
118
  @property st-global(--wds-badge-padding-horizontal-tiny);
@@ -117,9 +122,23 @@
117
122
  @property st-global(--wds-badge-size-medium);
118
123
  @property st-global(--wds-badge-size-small);
119
124
  @property st-global(--wds-badge-size-tiny);
125
+ @property st-global(--wds-badge-solid-neutral-danger-fill);
120
126
  @property st-global(--wds-badge-solid-neutral-danger-label-color);
127
+ @property st-global(--wds-badge-solid-neutral-light-fill);
128
+ @property st-global(--wds-badge-solid-neutral-light-label-color);
129
+ @property st-global(--wds-badge-solid-neutral-standard-fill);
130
+ @property st-global(--wds-badge-solid-neutral-standard-label-color);
131
+ @property st-global(--wds-badge-solid-neutral-success-fill);
121
132
  @property st-global(--wds-badge-solid-neutral-success-label-color);
133
+ @property st-global(--wds-badge-solid-success-fill);
134
+ @property st-global(--wds-badge-solid-success-label-color);
135
+ @property st-global(--wds-badge-solid-urgent-label-color);
136
+ @property st-global(--wds-badge-solid-warning-label-color);
137
+ @property st-global(--wds-badge-solid-warning-light-fill);
122
138
  @property st-global(--wds-badge-solid-warning-light-label-color);
139
+ @property st-global(--wds-badge-transparent-success-label-color);
140
+ @property st-global(--wds-badge-transparent-urgent-label-color);
141
+ @property st-global(--wds-badge-transparent-warning-label-color);
123
142
  @property st-global(--wds-breadcrumbs-border-radius);
124
143
  @property st-global(--wds-breadcrumbs-divider-margin-horizontal);
125
144
  @property st-global(--wds-breadcrumbs-font-size-small);
@@ -284,6 +303,8 @@
284
303
  @property st-global(--wds-card-gallery-item-action-button-padding-vertical);
285
304
  @property st-global(--wds-card-gallery-item-action-button-size);
286
305
  @property st-global(--wds-card-gallery-item-actions-align);
306
+ @property st-global(--wds-card-gallery-item-actions-clearance-bottom);
307
+ @property st-global(--wds-card-gallery-item-actions-clearance-top);
287
308
  @property st-global(--wds-card-gallery-item-actions-direction);
288
309
  @property st-global(--wds-card-gallery-item-actions-secondary-position);
289
310
  @property st-global(--wds-card-gallery-item-badge-offset-block);
@@ -311,8 +332,18 @@
311
332
  @property st-global(--wds-card-gallery-item-padding-right-small);
312
333
  @property st-global(--wds-card-gallery-item-padding-vertical-medium);
313
334
  @property st-global(--wds-card-gallery-item-padding-vertical-small);
335
+ @property st-global(--wds-card-gallery-item-secondary-action-border-radius);
336
+ @property st-global(--wds-card-gallery-item-secondary-action-color-active);
337
+ @property st-global(--wds-card-gallery-item-secondary-action-color-hover);
338
+ @property st-global(--wds-card-gallery-item-secondary-action-fill-active);
339
+ @property st-global(--wds-card-gallery-item-secondary-action-fill-hover);
314
340
  @property st-global(--wds-card-gallery-item-secondary-action-font-size);
341
+ @property st-global(--wds-card-gallery-item-secondary-action-height);
315
342
  @property st-global(--wds-card-gallery-item-secondary-action-line-height);
343
+ @property st-global(--wds-card-gallery-item-secondary-action-min-width);
344
+ @property st-global(--wds-card-gallery-item-secondary-action-padding-horizontal);
345
+ @property st-global(--wds-card-gallery-item-secondary-action-padding-vertical);
346
+ @property st-global(--wds-card-gallery-item-settings-menu-offset);
316
347
  @property st-global(--wds-card-gallery-item-shadow);
317
348
  @property st-global(--wds-card-gallery-item-shadow-hover);
318
349
  @property st-global(--wds-card-gallery-item-shadow-hover-side);
@@ -556,6 +587,7 @@
556
587
  @property st-global(--wds-form-field-label-gap-tiny);
557
588
  @property st-global(--wds-form-field-label-line-height-small);
558
589
  @property st-global(--wds-form-field-label-line-height-tiny);
590
+ @property st-global(--wds-form-field-label-readonly);
559
591
  @property st-global(--wds-gallery-item-border);
560
592
  @property st-global(--wds-gallery-item-padding-left-medium);
561
593
  @property st-global(--wds-gallery-item-padding-left-small);
@@ -1733,6 +1765,7 @@
1733
1765
  @property st-global(--wds-top-banner-padding-horizontal-start);
1734
1766
  @property st-global(--wds-top-banner-padding-vertical);
1735
1767
  @property st-global(--wds-top-banner-shadow);
1768
+ @property st-global(--wds-trend-indicator-gap);
1736
1769
  @property st-global(--wds-variable-input-padding-vertical-small);
1737
1770
  @property st-global(--wds-variable-input-padding-vertical-tiny);
1738
1771
  @property st-global(--wds-vertical-tabs-action-padding-horizontal-medium);
@@ -1910,8 +1943,12 @@
1910
1943
  --wds-badge-outline-destructive-fill: #ffffff;
1911
1944
  --wds-badge-outline-destructive-label-color: #e62214;
1912
1945
  --wds-badge-outline-neutral-border-color: #868aa5;
1946
+ --wds-badge-outline-neutral-danger-border-color: #fbd0cd;
1913
1947
  --wds-badge-outline-neutral-fill: #ffffff;
1914
1948
  --wds-badge-outline-neutral-label-color: #868aa5;
1949
+ --wds-badge-outline-neutral-light-border-color: #dfe5eb;
1950
+ --wds-badge-outline-neutral-standard-border-color: #d6e6fe;
1951
+ --wds-badge-outline-neutral-success-border-color: #c8e8d6;
1915
1952
  --wds-badge-outline-premium-border-color: #cf8cf1;
1916
1953
  --wds-badge-outline-premium-fill: #ffffff;
1917
1954
  --wds-badge-outline-premium-label-color: #9a27d5;
@@ -1927,6 +1964,7 @@
1927
1964
  --wds-badge-outline-warning-border-color: #ffd16e;
1928
1965
  --wds-badge-outline-warning-fill: #ffffff;
1929
1966
  --wds-badge-outline-warning-label-color: #ffb700;
1967
+ --wds-badge-outline-warning-light-border-color: #ffe2a5;
1930
1968
  --wds-badge-padding-horizontal-medium: 12px;
1931
1969
  --wds-badge-padding-horizontal-small: 6px;
1932
1970
  --wds-badge-padding-horizontal-tiny: 6px;
@@ -1936,9 +1974,23 @@
1936
1974
  --wds-badge-size-medium: 24px;
1937
1975
  --wds-badge-size-small: 18px;
1938
1976
  --wds-badge-size-tiny: 18px;
1977
+ --wds-badge-solid-neutral-danger-fill: #fbd0cd;
1939
1978
  --wds-badge-solid-neutral-danger-label-color: #44485f;
1979
+ --wds-badge-solid-neutral-light-fill: #eceff3;
1980
+ --wds-badge-solid-neutral-light-label-color: #44485f;
1981
+ --wds-badge-solid-neutral-standard-fill: #d6e6fe;
1982
+ --wds-badge-solid-neutral-standard-label-color: #44485f;
1983
+ --wds-badge-solid-neutral-success-fill: #c8e8d6;
1940
1984
  --wds-badge-solid-neutral-success-label-color: #44485f;
1985
+ --wds-badge-solid-success-fill: #25a55a;
1986
+ --wds-badge-solid-success-label-color: #ffffff;
1987
+ --wds-badge-solid-urgent-label-color: #ffffff;
1988
+ --wds-badge-solid-warning-label-color: #ffffff;
1989
+ --wds-badge-solid-warning-light-fill: #ffe2a5;
1941
1990
  --wds-badge-solid-warning-light-label-color: #44485f;
1991
+ --wds-badge-transparent-success-label-color: #25a55a;
1992
+ --wds-badge-transparent-urgent-label-color: #fe620f;
1993
+ --wds-badge-transparent-warning-label-color: #ffb700;
1942
1994
  --wds-breadcrumbs-border-radius: 1000px;
1943
1995
  --wds-breadcrumbs-divider-margin-horizontal: 8px;
1944
1996
  --wds-breadcrumbs-font-size-small: 14px;
@@ -2103,6 +2155,8 @@
2103
2155
  --wds-card-gallery-item-action-button-padding-vertical: 6px;
2104
2156
  --wds-card-gallery-item-action-button-size: 36px;
2105
2157
  --wds-card-gallery-item-actions-align: stretch;
2158
+ --wds-card-gallery-item-actions-clearance-bottom: 12px;
2159
+ --wds-card-gallery-item-actions-clearance-top: 12px;
2106
2160
  --wds-card-gallery-item-actions-direction: row;
2107
2161
  --wds-card-gallery-item-actions-secondary-position: absolute;
2108
2162
  --wds-card-gallery-item-badge-offset-block: 12px;
@@ -2130,8 +2184,18 @@
2130
2184
  --wds-card-gallery-item-padding-right-small: 18px;
2131
2185
  --wds-card-gallery-item-padding-vertical-medium: 18px;
2132
2186
  --wds-card-gallery-item-padding-vertical-small: 12px;
2187
+ --wds-card-gallery-item-secondary-action-border-radius: 2px;
2188
+ --wds-card-gallery-item-secondary-action-color-active: #ffffff;
2189
+ --wds-card-gallery-item-secondary-action-color-hover: #ffffff;
2190
+ --wds-card-gallery-item-secondary-action-fill-active: transparent;
2191
+ --wds-card-gallery-item-secondary-action-fill-hover: transparent;
2133
2192
  --wds-card-gallery-item-secondary-action-font-size: 16px;
2193
+ --wds-card-gallery-item-secondary-action-height: 24px;
2134
2194
  --wds-card-gallery-item-secondary-action-line-height: 24px;
2195
+ --wds-card-gallery-item-secondary-action-min-width: auto;
2196
+ --wds-card-gallery-item-secondary-action-padding-horizontal: 0px;
2197
+ --wds-card-gallery-item-secondary-action-padding-vertical: 0px;
2198
+ --wds-card-gallery-item-settings-menu-offset: 12px;
2135
2199
  --wds-card-gallery-item-shadow: 0 0 6px rgba(0, 6, 36, .1), 0 2px 4px rgba(0, 6, 36, .1);
2136
2200
  --wds-card-gallery-item-shadow-hover: 0 0 6px rgba(0, 6, 36, .1), 0 2px 4px rgba(0, 6, 36, .1);
2137
2201
  --wds-card-gallery-item-shadow-hover-side: 0 6px 6px 0 rgba(22, 45, 61, 0.06), 0 0 18px 0 rgba(22, 45, 61, 0.12);
@@ -2375,6 +2439,7 @@
2375
2439
  --wds-form-field-label-gap-tiny: 6px;
2376
2440
  --wds-form-field-label-line-height-small: 18px;
2377
2441
  --wds-form-field-label-line-height-tiny: 18px;
2442
+ --wds-form-field-label-readonly: #44485f;
2378
2443
  --wds-gallery-item-border: 8px;
2379
2444
  --wds-gallery-item-padding-left-medium: 18px;
2380
2445
  --wds-gallery-item-padding-left-small: 12px;
@@ -3552,6 +3617,7 @@
3552
3617
  --wds-top-banner-padding-horizontal-start: 12px;
3553
3618
  --wds-top-banner-padding-vertical: 9px;
3554
3619
  --wds-top-banner-shadow: 0 0 0 transparent;
3620
+ --wds-trend-indicator-gap: 4px;
3555
3621
  --wds-variable-input-padding-vertical-small: 6px;
3556
3622
  --wds-variable-input-padding-vertical-tiny: 3px;
3557
3623
  --wds-vertical-tabs-action-padding-horizontal-medium: 24px;