@wix/design-system-tokens 1.229.2 → 1.230.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 +33 -0
  2. package/all.css +74 -1
  3. package/all.scss +74 -1
  4. package/all.st.css +148 -2
  5. package/component.st.css +148 -2
  6. package/odeditor/all.css +99 -26
  7. package/odeditor/all.scss +99 -26
  8. package/odeditor/all.st.css +173 -27
  9. package/odeditor/component.st.css +173 -27
  10. package/odeditor-dark/all.css +108 -35
  11. package/odeditor-dark/all.scss +108 -35
  12. package/odeditor-dark/all.st.css +176 -30
  13. package/odeditor-dark/component.st.css +176 -30
  14. package/package.json +2 -2
  15. package/studio/all.css +80 -7
  16. package/studio/all.scss +80 -7
  17. package/studio/all.st.css +154 -8
  18. package/studio/component.st.css +154 -8
  19. package/wixel/all.css +80 -7
  20. package/wixel/all.scss +80 -7
  21. package/wixel/all.st.css +154 -8
  22. package/wixel/component.st.css +154 -8
package/CHANGELOG.md CHANGED
@@ -1,3 +1,36 @@
1
+ ## 1.230.0
2
+
3
+ ### Minor Changes
4
+
5
+ - [#17103](https://github.com/wix-private/wix-design-systems/pull/17103) [`6c78be7`](https://github.com/wix-private/wix-design-systems/commit/6c78be77e173250f15023c3c58eabab49e86059a) - **Visual change, Studio 2.0 (`odeditor-dark`) only:** Badge's skin colours now follow the Studio 2.0 design definition. Every Badge fill, border and label resolves through a Badge-specific `--wds-badge-*` component token instead of reading a shared semantic colour directly, and 18 of those tokens take a new value in `odeditor-dark`.
6
+
7
+ The Badge tokens are defined in all five themes. In `default`, `studio`, `wixel` and `odeditor` each one aliases the colour that skin already rendered, so those four themes are pixel-identical to before — verified by resolving every token in every theme against `master`: 0 changed values outside `odeditor-dark`.
8
+
9
+ What changes in Studio 2.0, by badge type:
10
+ - **Outlined** (10 tokens), mostly borders. The neutral outline borders move onto the skin's own hue instead of a near-black or desaturated step: `neutralStandard` to `border-standard-primary`, `neutralSuccess` to `border-success-primary`, `warningLight` to `border-warning-primary`, `neutralDanger` and `destructive` to `red.200`, `premium` to `blue.250`, `neutralLight` to `black.500`. The `warning` label moves from the near-white `yellow.0` to `yellow.50`, and the `neutral` border and label move to `border-dark-primary` and `text-standard-secondary`.
11
+ - **Solid neutral / light** (8 tokens). These chips become the skin's outlined chip with its two colours swapped: the fill takes the outlined fill (`green.600`, `blue.500`, `red.600`, `fill-warning-tertiary-hover`) and the label takes the outlined label (`green.50`, `blue.50`, `red.50`, `yellow.50`). They previously used a mid-tone fill with a white label, which left the four skins inconsistent both with each other and with their own outlined variant.
12
+
13
+ Every value points at a token that already existed in `odeditor-dark`, preferring the semantic layer wherever a semantic carries the right role _and_ the right value (six do). The rest reference a foundation step directly, because the role-correct semantic resolves to a different colour in this theme and pointing at it would change the rendering. No foundation token was added, removed or re-valued, and no raw hex was introduced.
14
+
15
+ Label contrast was the deciding constraint, since Badge is not interactive and its fill is decorative rather than a control boundary. All 34 Badge variants clear WCAG AA (4.5:1) for label against fill at the component's 12px Medium label, the lowest being 5.53.
16
+
17
+ Only Badge changes. CounterBadge shared two of Badge's outlined colours and now holds them in its own `counter-badge` tokens at the value each theme already rendered, so CounterBadge is unchanged.
18
+
19
+ One known gap, deliberate:
20
+ - Eight of Badge's 73 colour properties are the neutral greys, which stay on the existing `black.200` and `black.400` (`#D4D3D2`, `#A09E9D`) where the Studio 2.0 design specifies `#D2D2D4` and `#9D9DA0`. Those pairs are the same channel values reordered — a relative-luminance difference below 0.007, invisible on a 1px border or a label. Correcting the palette steps would move roughly 60 non-Badge tokens across some 30 components in this theme, so it belongs in a separate foundation change.
21
+
22
+ - [#17104](https://github.com/wix-private/wix-design-systems/pull/17104) [`70d03c2`](https://github.com/wix-private/wix-design-systems/commit/70d03c26cdb6959ab8e81a579010b17fe0bdb4b0) - Add nine `--wds-composer-header-*` tokens covering the header's height per size, small-size vertical padding, background, bottom divider colour, divider margins, back-button icon size and the gap between actions inside one `ComposerHeader.Actions` group, and five `--wds-composer-sidebar-*` tokens covering the sidebar's right-divider width, background, item corner radius, and the container/item padding and gap of the icon-only (tooltip) layout. Harmony (odeditor) gets the full spec values. Studio 2.0 (odeditor-dark) takes the spacing and sizing ones plus the transparent header divider, and keeps its own surfaces, sidebar divider and item shape; default, Studio and Wixel keep what they render today. The previously unreferenced `--wds-composer-sidebar-item-tooltip-padding-*` tokens are now the source of that layout's padding, and their values were corrected per theme to match it.
23
+
24
+ - [#17097](https://github.com/wix-private/wix-design-systems/pull/17097) [`bef08d4`](https://github.com/wix-private/wix-design-systems/commit/bef08d476ba49425010d805678aaca46c3cf2c40) - **Visual breaking change:** update FloatingHelper spacing tokens to match the redesigned spec — `--wds-floating-helper-padding-vertical` from `28px` to `24px`, `--wds-floating-helper-padding-horizontal` from `32px` to `24px`, and `--wds-floating-helper-main-action-padding-top` from `16px` to `20px`.
25
+
26
+ - [#17100](https://github.com/wix-private/wix-design-systems/pull/17100) [`66c330c`](https://github.com/wix-private/wix-design-systems/commit/66c330ce6c5210b181d564113fa87073699e6bfb) - **Visual breaking change:** SectionHelper follows its new design definition in Harmony (odeditor) and Studio 2.0 (odeditor-dark) — padding, corner radius, title size, the space above the action row and the close button's spacing (now identical in both sizes) all change. Harmony additionally moves the fills and borders of the standard, success, warning, danger, preview and experimental dark skins; Studio 2.0 keeps its own colours. Other themes keep their current values. Adds SectionHelper tokens covering the text-to-actions gap, the close button's inset and the space reserved for it, and the per-skin fills and borders.
27
+
28
+ - [#17056](https://github.com/wix-private/wix-design-systems/pull/17056) [`d3fcb09`](https://github.com/wix-private/wix-design-systems/commit/d3fcb098bae94a2e0380b65f145a399079fc126b) - Add `--wds-tag-{solid,outlined,transparent}-<skin>-*` color tokens for every Tag skin (`standard`, `error`, `warning`, `dark`, `neutral`, `success`, `light`), so a Tag's fill, border and label color can be themed per type. Harmony (Studio 2.0 editor) carries its own values; the other themes resolve to what Tag already rendered.
29
+
30
+ ### Patch Changes
31
+
32
+ - [#17106](https://github.com/wix-private/wix-design-systems/pull/17106) [`3ca20f0`](https://github.com/wix-private/wix-design-systems/commit/3ca20f0fd8df04adaaa81e48fa055011d0d3de8a) - Add five Badge tokens for the label color of transparent badges with a neutral or light skin, and update Badge's outlined, solid and transparent label, border and fill colors in Harmony (odeditor) to match the design definition.
33
+
1
34
  ## 1.229.2
2
35
 
3
36
  ## 1.229.1
package/all.css CHANGED
@@ -434,6 +434,8 @@
434
434
  --wds-counter-badge-font-size-tiny: 10px;
435
435
  --wds-composer-sidebar-end-max-width: 240px;
436
436
  --wds-composer-sidebar-bottom-width: 90px;
437
+ --wds-composer-sidebar-border-width: 1px;
438
+ --wds-composer-header-divider-margin: 20px;
437
439
  --wds-color-picker-width: 240px;
438
440
  --wds-close-button-standard-filled-fill: transparent;
439
441
  --wds-circular-progress-bar-border-width: 4px;
@@ -1330,7 +1332,13 @@
1330
1332
  --wds-section-helper-fullwidth-vertical-padding-medium: var(--wds-space-200);
1331
1333
  --wds-section-helper-fullwidth-horizontal-padding-small: var(--wds-space-400);
1332
1334
  --wds-section-helper-fullwidth-horizontal-padding-medium: var(--wds-space-400);
1335
+ --wds-section-helper-content-gap-small: var(--wds-space-150);
1336
+ --wds-section-helper-content-gap-medium: var(--wds-space-200);
1333
1337
  --wds-section-helper-close-button-offset: var(--wds-space-200);
1338
+ --wds-section-helper-close-button-inset-small: var(--wds-space-0);
1339
+ --wds-section-helper-close-button-inset-medium: var(--wds-space-100);
1340
+ --wds-section-helper-close-button-clearance-small: var(--wds-space-400);
1341
+ --wds-section-helper-close-button-clearance-medium: var(--wds-space-600);
1334
1342
  --wds-section-helper-border-radius: var(--wds-border-radius-300);
1335
1343
  --wds-section-helper-action-padding-small: var(--wds-space-150);
1336
1344
  --wds-section-helper-action-padding-medium: var(--wds-space-200);
@@ -1611,6 +1619,8 @@
1611
1619
  --wds-counter-badge-padding-horizontal-small: var(--wds-space-100);
1612
1620
  --wds-counter-badge-border-radius-small: var(--wds-border-radius-full);
1613
1621
  --wds-counter-badge-border-radius-medium: var(--wds-border-radius-full);
1622
+ --wds-composer-sidebar-tooltip-item-gap: var(--wds-space-0);
1623
+ --wds-composer-sidebar-tooltip-container-padding-vertical: var(--wds-space-100);
1614
1624
  --wds-composer-sidebar-item-tooltip-padding-vertical-small: var(--wds-space-100);
1615
1625
  --wds-composer-sidebar-item-tooltip-padding-vertical-medium: var(--wds-space-200);
1616
1626
  --wds-composer-sidebar-item-tooltip-padding-vertical-large: var(--wds-space-200);
@@ -1629,6 +1639,13 @@
1629
1639
  --wds-composer-sidebar-item-bottom-padding-horizontal-small: var(--wds-space-100);
1630
1640
  --wds-composer-sidebar-item-bottom-padding-horizontal-medium: var(--wds-space-100);
1631
1641
  --wds-composer-sidebar-item-bottom-padding-horizontal-large: var(--wds-space-100);
1642
+ --wds-composer-sidebar-item-border-radius: var(--wds-border-radius-full);
1643
+ --wds-composer-header-padding-vertical-small: var(--wds-space-200);
1644
+ --wds-composer-header-height-small: var(--wds-space-500);
1645
+ --wds-composer-header-height-medium: var(--wds-space-600);
1646
+ --wds-composer-header-back-button-icon-size-small: var(--wds-space-300);
1647
+ --wds-composer-header-back-button-icon-size-medium: var(--wds-space-400);
1648
+ --wds-composer-header-actions-gap: var(--wds-space-200);
1632
1649
  --wds-color-picker-padding-vertical: var(--wds-space-200);
1633
1650
  --wds-color-picker-padding-horizontal: var(--wds-space-300);
1634
1651
  --wds-code-snippet-border-radius-singleline: var(--wds-border-radius-200);
@@ -1766,6 +1783,11 @@
1766
1783
  --wds-breadcrumbs-on-dark-fill-hover: var(--wds-color-white-transparent-30);
1767
1784
  --wds-breadcrumbs-font-size-small: var(--wds-font-size-300);
1768
1785
  --wds-breadcrumbs-border-radius: var(--wds-border-radius-full);
1786
+ --wds-badge-transparent-warning-light-label-color: var(--wds-color-yellow-400);
1787
+ --wds-badge-transparent-neutral-success-label-color: var(--wds-color-green-400);
1788
+ --wds-badge-transparent-neutral-standard-label-color: var(--wds-color-blue-400);
1789
+ --wds-badge-transparent-neutral-light-label-color: var(--wds-color-black-700);
1790
+ --wds-badge-transparent-neutral-danger-label-color: var(--wds-color-red-400);
1769
1791
  --wds-badge-size-tiny: var(--wds-space-300);
1770
1792
  --wds-badge-size-small: var(--wds-space-300);
1771
1793
  --wds-badge-size-medium: var(--wds-space-400);
@@ -1960,6 +1982,41 @@
1960
1982
  --wds-text-button-font-size-tiny: var(--wds-font-size-body-tiny);
1961
1983
  --wds-text-button-font-size-small: var(--wds-font-size-body-small);
1962
1984
  --wds-text-button-font-size-medium: var(--wds-font-size-body-medium);
1985
+ --wds-tag-transparent-warning-label-color: var(--wds-color-text-warning);
1986
+ --wds-tag-transparent-success-label-color: var(--wds-color-text-success);
1987
+ --wds-tag-transparent-standard-label-color: var(--wds-color-text-standard-secondary);
1988
+ --wds-tag-transparent-neutral-label-color: var(--wds-color-text-standard-secondary-light);
1989
+ --wds-tag-transparent-light-label-color: var(--wds-color-text-standard-primary-light);
1990
+ --wds-tag-transparent-error-label-color: var(--wds-color-text-destructive);
1991
+ --wds-tag-transparent-dark-label-color: var(--wds-color-text-standard-primary);
1992
+ --wds-tag-solid-warning-fill: var(--wds-color-fill-warning-secondary);
1993
+ --wds-tag-solid-success-fill: var(--wds-color-fill-success-secondary);
1994
+ --wds-tag-solid-standard-fill: var(--wds-color-fill-dark-secondary);
1995
+ --wds-tag-solid-neutral-fill: var(--wds-color-fill-dark-secondary);
1996
+ --wds-tag-solid-light-fill: var(--wds-color-fill-light-primary);
1997
+ --wds-tag-solid-error-fill: var(--wds-color-fill-destructive-secondary);
1998
+ --wds-tag-solid-dark-fill: var(--wds-color-fill-dark-primary);
1999
+ --wds-tag-outlined-warning-label-color: var(--wds-color-text-standard-secondary);
2000
+ --wds-tag-outlined-warning-fill: var(--wds-color-fill-warning-tertiary);
2001
+ --wds-tag-outlined-warning-border-color: var(--wds-color-border-warning-secondary);
2002
+ --wds-tag-outlined-success-label-color: var(--wds-color-text-standard-secondary);
2003
+ --wds-tag-outlined-success-fill: var(--wds-color-fill-success-tertiary);
2004
+ --wds-tag-outlined-success-border-color: var(--wds-color-border-success-secondary);
2005
+ --wds-tag-outlined-standard-label-color: var(--wds-color-text-standard-secondary);
2006
+ --wds-tag-outlined-standard-fill: var(--wds-color-fill-standard-tertiary);
2007
+ --wds-tag-outlined-standard-border-color: var(--wds-color-border-standard-secondary);
2008
+ --wds-tag-outlined-neutral-label-color: var(--wds-color-text-standard-secondary);
2009
+ --wds-tag-outlined-neutral-fill: var(--wds-color-fill-dark-tertiary);
2010
+ --wds-tag-outlined-neutral-border-color: var(--wds-color-border-dark-secondary);
2011
+ --wds-tag-outlined-light-label-color: var(--wds-color-text-standard-primary-light);
2012
+ --wds-tag-outlined-light-fill: var(--wds-color-fill-light-secondary);
2013
+ --wds-tag-outlined-light-border-color: var(--wds-color-border-light);
2014
+ --wds-tag-outlined-error-label-color: var(--wds-color-text-standard-secondary);
2015
+ --wds-tag-outlined-error-fill: var(--wds-color-fill-destructive-tertiary);
2016
+ --wds-tag-outlined-error-border-color: var(--wds-color-border-destructive-secondary);
2017
+ --wds-tag-outlined-dark-label-color: var(--wds-color-text-standard-primary);
2018
+ --wds-tag-outlined-dark-fill: var(--wds-color-fill-dark-tertiary);
2019
+ --wds-tag-outlined-dark-border-color: var(--wds-color-border-dark-primary);
1963
2020
  --wds-tag-label-font-size-small: var(--wds-font-size-body-small);
1964
2021
  --wds-tabs-selection-fill-secondary: var(--wds-color-fill-standard-primary);
1965
2022
  --wds-tabs-selection-fill-primary: var(--wds-color-fill-standard-primary);
@@ -2046,10 +2103,16 @@
2046
2103
  --wds-segmented-toggle-border-color: var(--wds-color-border-standard-secondary);
2047
2104
  --wds-section-helper-title-font-size: var(--wds-font-size-body-small);
2048
2105
  --wds-section-helper-text-font-line-height: var(--wds-font-line-height-200);
2106
+ --wds-section-helper-fill-warning: var(--wds-color-fill-surface-warning);
2107
+ --wds-section-helper-fill-success: var(--wds-color-fill-surface-success);
2049
2108
  --wds-section-helper-fill-standard: var(--wds-color-fill-surface-standard);
2050
2109
  --wds-section-helper-fill-preview: var(--wds-color-fill-surface-neutral);
2051
2110
  --wds-section-helper-fill-premium: var(--wds-color-fill-surface-premium);
2111
+ --wds-section-helper-fill-danger: var(--wds-color-fill-surface-destructive);
2112
+ --wds-section-helper-border-success: var(--wds-color-border-success-primary);
2113
+ --wds-section-helper-border-standard: var(--wds-color-border-standard-primary);
2052
2114
  --wds-section-helper-border-preview: var(--wds-color-border-dark-primary);
2115
+ --wds-section-helper-border-experimental-dark: var(--wds-color-fill-dark-primary);
2053
2116
  --wds-section-header-label-font-size-small: var(--wds-font-size-body-small);
2054
2117
  --wds-section-header-label-font-size-medium: var(--wds-font-size-body-medium);
2055
2118
  --wds-section-header-label-fill-neutral: var(--wds-color-text-standard-primary);
@@ -2326,6 +2389,11 @@
2326
2389
  --wds-divider-fill-color-light: var(--wds-color-border-dark-secondary);
2327
2390
  --wds-custom-modal-header-subtitle-font-size: var(--wds-font-size-body-medium);
2328
2391
  --wds-custom-modal-footnote-text-font-size: var(--wds-font-size-body-small);
2392
+ --wds-counter-badge-outline-warning-label-color: var(--wds-color-text-warning);
2393
+ --wds-counter-badge-outline-destructive-border-color: var(--wds-color-border-destructive-primary);
2394
+ --wds-composer-sidebar-fill: var(--wds-color-fill-standard-tertiary);
2395
+ --wds-composer-header-fill: var(--wds-color-fill-surface-default);
2396
+ --wds-composer-header-border-fill: var(--wds-color-border-dark-secondary);
2329
2397
  --wds-close-button-standard-filled-text-hover: var(--wds-color-text-primary);
2330
2398
  --wds-close-button-standard-filled-text-disabled: var(--wds-color-text-standard-primary-light);
2331
2399
  --wds-close-button-standard-filled-text: var(--wds-color-text-primary);
@@ -2474,6 +2542,7 @@
2474
2542
  --wds-badge-transparent-warning-label-color: var(--wds-color-text-warning);
2475
2543
  --wds-badge-transparent-urgent-label-color: var(--wds-color-text-urgent);
2476
2544
  --wds-badge-transparent-success-label-color: var(--wds-color-text-success);
2545
+ --wds-badge-transparent-neutral-label-color: var(--wds-color-text-standard-secondary-light);
2477
2546
  --wds-badge-solid-warning-light-label-color: var(--wds-color-text-standard-secondary);
2478
2547
  --wds-badge-solid-warning-light-fill: var(--wds-color-fill-warning-secondary);
2479
2548
  --wds-badge-solid-warning-label-color: var(--wds-color-text-standard-primary-light);
@@ -2485,9 +2554,9 @@
2485
2554
  --wds-badge-solid-neutral-standard-label-color: var(--wds-color-text-standard-secondary);
2486
2555
  --wds-badge-solid-neutral-standard-fill: var(--wds-color-fill-standard-secondary);
2487
2556
  --wds-badge-solid-neutral-light-label-color: var(--wds-color-text-standard-secondary);
2488
- --wds-badge-solid-neutral-light-fill: var(--wds-color-fill-dark-secondary);
2489
2557
  --wds-badge-solid-neutral-danger-label-color: var(--wds-color-text-standard-secondary);
2490
2558
  --wds-badge-solid-neutral-danger-fill: var(--wds-color-fill-destructive-secondary);
2559
+ --wds-badge-outline-warning-light-label-color: var(--wds-color-text-standard-secondary);
2491
2560
  --wds-badge-outline-warning-light-border-color: var(--wds-color-border-warning-secondary);
2492
2561
  --wds-badge-outline-warning-label-color: var(--wds-color-text-warning);
2493
2562
  --wds-badge-outline-warning-fill: var(--wds-color-fill-warning-tertiary);
@@ -2504,9 +2573,13 @@
2504
2573
  --wds-badge-outline-premium-label-color: var(--wds-color-text-premium);
2505
2574
  --wds-badge-outline-premium-fill: var(--wds-color-fill-premium-tertiary);
2506
2575
  --wds-badge-outline-premium-border-color: var(--wds-color-border-premium-primary);
2576
+ --wds-badge-outline-neutral-success-label-color: var(--wds-color-text-standard-secondary);
2507
2577
  --wds-badge-outline-neutral-success-border-color: var(--wds-color-border-success-secondary);
2578
+ --wds-badge-outline-neutral-standard-label-color: var(--wds-color-text-standard-secondary);
2508
2579
  --wds-badge-outline-neutral-standard-border-color: var(--wds-color-border-standard-secondary);
2580
+ --wds-badge-outline-neutral-light-label-color: var(--wds-color-text-standard-secondary);
2509
2581
  --wds-badge-outline-neutral-light-border-color: var(--wds-color-border-dark-secondary);
2582
+ --wds-badge-outline-neutral-danger-label-color: var(--wds-color-text-standard-secondary);
2510
2583
  --wds-badge-outline-neutral-danger-border-color: var(--wds-color-border-destructive-secondary);
2511
2584
  --wds-badge-outline-neutral-label-color: var(--wds-color-text-standard-secondary-light);
2512
2585
  --wds-badge-outline-neutral-fill: var(--wds-color-fill-dark-tertiary);
package/all.scss CHANGED
@@ -234,6 +234,8 @@
234
234
  --wds-counter-badge-font-size-tiny: 10px;
235
235
  --wds-composer-sidebar-end-max-width: 240px;
236
236
  --wds-composer-sidebar-bottom-width: 90px;
237
+ --wds-composer-sidebar-border-width: 1px;
238
+ --wds-composer-header-divider-margin: 20px;
237
239
  --wds-color-yellow-600: #fff6e5;
238
240
  --wds-color-yellow-500: #fff0d1;
239
241
  --wds-color-yellow-400: #ffe2a5;
@@ -973,7 +975,13 @@
973
975
  --wds-section-helper-fullwidth-vertical-padding-medium: var(--wds-space-200);
974
976
  --wds-section-helper-fullwidth-horizontal-padding-small: var(--wds-space-400);
975
977
  --wds-section-helper-fullwidth-horizontal-padding-medium: var(--wds-space-400);
978
+ --wds-section-helper-content-gap-small: var(--wds-space-150);
979
+ --wds-section-helper-content-gap-medium: var(--wds-space-200);
976
980
  --wds-section-helper-close-button-offset: var(--wds-space-200);
981
+ --wds-section-helper-close-button-inset-small: var(--wds-space-0);
982
+ --wds-section-helper-close-button-inset-medium: var(--wds-space-100);
983
+ --wds-section-helper-close-button-clearance-small: var(--wds-space-400);
984
+ --wds-section-helper-close-button-clearance-medium: var(--wds-space-600);
977
985
  --wds-section-helper-border-radius: var(--wds-border-radius-300);
978
986
  --wds-section-helper-action-padding-small: var(--wds-space-150);
979
987
  --wds-section-helper-action-padding-medium: var(--wds-space-200);
@@ -1298,6 +1306,8 @@
1298
1306
  --wds-counter-badge-padding-horizontal-small: var(--wds-space-100);
1299
1307
  --wds-counter-badge-border-radius-small: var(--wds-border-radius-full);
1300
1308
  --wds-counter-badge-border-radius-medium: var(--wds-border-radius-full);
1309
+ --wds-composer-sidebar-tooltip-item-gap: var(--wds-space-0);
1310
+ --wds-composer-sidebar-tooltip-container-padding-vertical: var(--wds-space-100);
1301
1311
  --wds-composer-sidebar-item-tooltip-padding-vertical-small: var(--wds-space-100);
1302
1312
  --wds-composer-sidebar-item-tooltip-padding-vertical-medium: var(--wds-space-200);
1303
1313
  --wds-composer-sidebar-item-tooltip-padding-vertical-large: var(--wds-space-200);
@@ -1316,6 +1326,13 @@
1316
1326
  --wds-composer-sidebar-item-bottom-padding-horizontal-small: var(--wds-space-100);
1317
1327
  --wds-composer-sidebar-item-bottom-padding-horizontal-medium: var(--wds-space-100);
1318
1328
  --wds-composer-sidebar-item-bottom-padding-horizontal-large: var(--wds-space-100);
1329
+ --wds-composer-sidebar-item-border-radius: var(--wds-border-radius-full);
1330
+ --wds-composer-header-padding-vertical-small: var(--wds-space-200);
1331
+ --wds-composer-header-height-small: var(--wds-space-500);
1332
+ --wds-composer-header-height-medium: var(--wds-space-600);
1333
+ --wds-composer-header-back-button-icon-size-small: var(--wds-space-300);
1334
+ --wds-composer-header-back-button-icon-size-medium: var(--wds-space-400);
1335
+ --wds-composer-header-actions-gap: var(--wds-space-200);
1319
1336
  --wds-color-text-warning: var(--wds-color-yellow-100);
1320
1337
  --wds-color-text-urgent: var(--wds-color-orange-100);
1321
1338
  --wds-color-text-success: var(--wds-color-green-100);
@@ -1764,6 +1781,11 @@
1764
1781
  --wds-border-radius-surface-modal-backdrop: var(--wds-border-radius-0);
1765
1782
  --wds-border-radius-surface-modal: var(--wds-border-radius-400);
1766
1783
  --wds-border-radius-surface-default: var(--wds-border-radius-400);
1784
+ --wds-badge-transparent-warning-light-label-color: var(--wds-color-yellow-400);
1785
+ --wds-badge-transparent-neutral-success-label-color: var(--wds-color-green-400);
1786
+ --wds-badge-transparent-neutral-standard-label-color: var(--wds-color-blue-400);
1787
+ --wds-badge-transparent-neutral-light-label-color: var(--wds-color-black-700);
1788
+ --wds-badge-transparent-neutral-danger-label-color: var(--wds-color-red-400);
1767
1789
  --wds-badge-size-tiny: var(--wds-space-300);
1768
1790
  --wds-badge-size-small: var(--wds-space-300);
1769
1791
  --wds-badge-size-medium: var(--wds-space-400);
@@ -1942,6 +1964,41 @@
1942
1964
  --wds-text-button-font-size-tiny: var(--wds-font-size-body-tiny);
1943
1965
  --wds-text-button-font-size-small: var(--wds-font-size-body-small);
1944
1966
  --wds-text-button-font-size-medium: var(--wds-font-size-body-medium);
1967
+ --wds-tag-transparent-warning-label-color: var(--wds-color-text-warning);
1968
+ --wds-tag-transparent-success-label-color: var(--wds-color-text-success);
1969
+ --wds-tag-transparent-standard-label-color: var(--wds-color-text-standard-secondary);
1970
+ --wds-tag-transparent-neutral-label-color: var(--wds-color-text-standard-secondary-light);
1971
+ --wds-tag-transparent-light-label-color: var(--wds-color-text-standard-primary-light);
1972
+ --wds-tag-transparent-error-label-color: var(--wds-color-text-destructive);
1973
+ --wds-tag-transparent-dark-label-color: var(--wds-color-text-standard-primary);
1974
+ --wds-tag-solid-warning-fill: var(--wds-color-fill-warning-secondary);
1975
+ --wds-tag-solid-success-fill: var(--wds-color-fill-success-secondary);
1976
+ --wds-tag-solid-standard-fill: var(--wds-color-fill-dark-secondary);
1977
+ --wds-tag-solid-neutral-fill: var(--wds-color-fill-dark-secondary);
1978
+ --wds-tag-solid-light-fill: var(--wds-color-fill-light-primary);
1979
+ --wds-tag-solid-error-fill: var(--wds-color-fill-destructive-secondary);
1980
+ --wds-tag-solid-dark-fill: var(--wds-color-fill-dark-primary);
1981
+ --wds-tag-outlined-warning-label-color: var(--wds-color-text-standard-secondary);
1982
+ --wds-tag-outlined-warning-fill: var(--wds-color-fill-warning-tertiary);
1983
+ --wds-tag-outlined-warning-border-color: var(--wds-color-border-warning-secondary);
1984
+ --wds-tag-outlined-success-label-color: var(--wds-color-text-standard-secondary);
1985
+ --wds-tag-outlined-success-fill: var(--wds-color-fill-success-tertiary);
1986
+ --wds-tag-outlined-success-border-color: var(--wds-color-border-success-secondary);
1987
+ --wds-tag-outlined-standard-label-color: var(--wds-color-text-standard-secondary);
1988
+ --wds-tag-outlined-standard-fill: var(--wds-color-fill-standard-tertiary);
1989
+ --wds-tag-outlined-standard-border-color: var(--wds-color-border-standard-secondary);
1990
+ --wds-tag-outlined-neutral-label-color: var(--wds-color-text-standard-secondary);
1991
+ --wds-tag-outlined-neutral-fill: var(--wds-color-fill-dark-tertiary);
1992
+ --wds-tag-outlined-neutral-border-color: var(--wds-color-border-dark-secondary);
1993
+ --wds-tag-outlined-light-label-color: var(--wds-color-text-standard-primary-light);
1994
+ --wds-tag-outlined-light-fill: var(--wds-color-fill-light-secondary);
1995
+ --wds-tag-outlined-light-border-color: var(--wds-color-border-light);
1996
+ --wds-tag-outlined-error-label-color: var(--wds-color-text-standard-secondary);
1997
+ --wds-tag-outlined-error-fill: var(--wds-color-fill-destructive-tertiary);
1998
+ --wds-tag-outlined-error-border-color: var(--wds-color-border-destructive-secondary);
1999
+ --wds-tag-outlined-dark-label-color: var(--wds-color-text-standard-primary);
2000
+ --wds-tag-outlined-dark-fill: var(--wds-color-fill-dark-tertiary);
2001
+ --wds-tag-outlined-dark-border-color: var(--wds-color-border-dark-primary);
1945
2002
  --wds-tag-label-font-size-small: var(--wds-font-size-body-small);
1946
2003
  --wds-tabs-selection-fill-secondary: var(--wds-color-fill-standard-primary);
1947
2004
  --wds-tabs-selection-fill-primary: var(--wds-color-fill-standard-primary);
@@ -2035,10 +2092,16 @@
2035
2092
  --wds-segmented-toggle-border-color: var(--wds-color-border-standard-secondary);
2036
2093
  --wds-section-helper-title-font-size: var(--wds-font-size-body-small);
2037
2094
  --wds-section-helper-text-font-line-height: var(--wds-font-line-height-200);
2095
+ --wds-section-helper-fill-warning: var(--wds-color-fill-surface-warning);
2096
+ --wds-section-helper-fill-success: var(--wds-color-fill-surface-success);
2038
2097
  --wds-section-helper-fill-standard: var(--wds-color-fill-surface-standard);
2039
2098
  --wds-section-helper-fill-preview: var(--wds-color-fill-surface-neutral);
2040
2099
  --wds-section-helper-fill-premium: var(--wds-color-fill-surface-premium);
2100
+ --wds-section-helper-fill-danger: var(--wds-color-fill-surface-destructive);
2101
+ --wds-section-helper-border-success: var(--wds-color-border-success-primary);
2102
+ --wds-section-helper-border-standard: var(--wds-color-border-standard-primary);
2041
2103
  --wds-section-helper-border-preview: var(--wds-color-border-dark-primary);
2104
+ --wds-section-helper-border-experimental-dark: var(--wds-color-fill-dark-primary);
2042
2105
  --wds-section-header-label-font-size-small: var(--wds-font-size-body-small);
2043
2106
  --wds-section-header-label-font-size-medium: var(--wds-font-size-body-medium);
2044
2107
  --wds-section-header-label-fill-neutral: var(--wds-color-text-standard-primary);
@@ -2325,6 +2388,11 @@
2325
2388
  --wds-divider-fill-color-light: var(--wds-color-border-dark-secondary);
2326
2389
  --wds-custom-modal-header-subtitle-font-size: var(--wds-font-size-body-medium);
2327
2390
  --wds-custom-modal-footnote-text-font-size: var(--wds-font-size-body-small);
2391
+ --wds-counter-badge-outline-warning-label-color: var(--wds-color-text-warning);
2392
+ --wds-counter-badge-outline-destructive-border-color: var(--wds-color-border-destructive-primary);
2393
+ --wds-composer-sidebar-fill: var(--wds-color-fill-standard-tertiary);
2394
+ --wds-composer-header-fill: var(--wds-color-fill-surface-default);
2395
+ --wds-composer-header-border-fill: var(--wds-color-border-dark-secondary);
2328
2396
  --wds-color-fill-surface-overlay-blur: var(--wds-color-fill-surface-overlay);
2329
2397
  --wds-close-button-standard-filled-text-hover: var(--wds-color-text-primary);
2330
2398
  --wds-close-button-standard-filled-text-disabled: var(--wds-color-text-standard-primary-light);
@@ -2474,6 +2542,7 @@
2474
2542
  --wds-badge-transparent-warning-label-color: var(--wds-color-text-warning);
2475
2543
  --wds-badge-transparent-urgent-label-color: var(--wds-color-text-urgent);
2476
2544
  --wds-badge-transparent-success-label-color: var(--wds-color-text-success);
2545
+ --wds-badge-transparent-neutral-label-color: var(--wds-color-text-standard-secondary-light);
2477
2546
  --wds-badge-solid-warning-light-label-color: var(--wds-color-text-standard-secondary);
2478
2547
  --wds-badge-solid-warning-light-fill: var(--wds-color-fill-warning-secondary);
2479
2548
  --wds-badge-solid-warning-label-color: var(--wds-color-text-standard-primary-light);
@@ -2485,9 +2554,9 @@
2485
2554
  --wds-badge-solid-neutral-standard-label-color: var(--wds-color-text-standard-secondary);
2486
2555
  --wds-badge-solid-neutral-standard-fill: var(--wds-color-fill-standard-secondary);
2487
2556
  --wds-badge-solid-neutral-light-label-color: var(--wds-color-text-standard-secondary);
2488
- --wds-badge-solid-neutral-light-fill: var(--wds-color-fill-dark-secondary);
2489
2557
  --wds-badge-solid-neutral-danger-label-color: var(--wds-color-text-standard-secondary);
2490
2558
  --wds-badge-solid-neutral-danger-fill: var(--wds-color-fill-destructive-secondary);
2559
+ --wds-badge-outline-warning-light-label-color: var(--wds-color-text-standard-secondary);
2491
2560
  --wds-badge-outline-warning-light-border-color: var(--wds-color-border-warning-secondary);
2492
2561
  --wds-badge-outline-warning-label-color: var(--wds-color-text-warning);
2493
2562
  --wds-badge-outline-warning-fill: var(--wds-color-fill-warning-tertiary);
@@ -2504,11 +2573,15 @@
2504
2573
  --wds-badge-outline-premium-label-color: var(--wds-color-text-premium);
2505
2574
  --wds-badge-outline-premium-fill: var(--wds-color-fill-premium-tertiary);
2506
2575
  --wds-badge-outline-premium-border-color: var(--wds-color-border-premium-primary);
2576
+ --wds-badge-outline-neutral-success-label-color: var(--wds-color-text-standard-secondary);
2507
2577
  --wds-badge-outline-neutral-success-border-color: var(--wds-color-border-success-secondary);
2578
+ --wds-badge-outline-neutral-standard-label-color: var(--wds-color-text-standard-secondary);
2508
2579
  --wds-badge-outline-neutral-standard-border-color: var(--wds-color-border-standard-secondary);
2580
+ --wds-badge-outline-neutral-light-label-color: var(--wds-color-text-standard-secondary);
2509
2581
  --wds-badge-outline-neutral-light-border-color: var(--wds-color-border-dark-secondary);
2510
2582
  --wds-badge-outline-neutral-label-color: var(--wds-color-text-standard-secondary-light);
2511
2583
  --wds-badge-outline-neutral-fill: var(--wds-color-fill-dark-tertiary);
2584
+ --wds-badge-outline-neutral-danger-label-color: var(--wds-color-text-standard-secondary);
2512
2585
  --wds-badge-outline-neutral-danger-border-color: var(--wds-color-border-destructive-secondary);
2513
2586
  --wds-badge-outline-neutral-border-color: var(--wds-color-border-dark-primary);
2514
2587
  --wds-badge-outline-destructive-label-color: var(--wds-color-text-destructive);