@wix/design-system-tokens 1.222.1 → 1.224.1

package/CHANGELOG.md

@@ -1,3 +1,97 @@
+## 1.224.1
+
+### Minor Changes
+
+- [#16833](https://github.com/wix-private/wix-design-systems/pull/16833) [`5582648`](https://github.com/wix-private/wix-design-systems/commit/5582648de760f1395bbdcfe0f8c3e166690849d4) - Add `--wds-input-background-fill-on-stage` for input backgrounds rendered on the editor stage, resolving to each theme's dark secondary fill: `#ECEFF3` in default, `#F7F8F8` in Studio and Wixel, `#F0EFEF` in Harmony (odeditor), `#3A3A3B` in Studio 2.0 (odeditor-dark). No component reads it — assign it wherever you control an input's background so the value stays themeable.
+
+- [#16714](https://github.com/wix-private/wix-design-systems/pull/16714) [`fbf4899`](https://github.com/wix-private/wix-design-systems/commit/fbf48992657f1d5060611a6da5598140d36b02a7) - Add six `table` tokens and one `table-list-item` token.
+  - `--wds-table-header-font-weight` sets the weight of a column header's title: `--wds-font-weight-medium` in Harmony (odeditor) and Studio 2.0 (odeditor-dark), matching `TableListHeader`; `--wds-font-weight-regular` elsewhere, which is the weight Table rendered before.
+  - `--wds-table-cell-padding-inline` sets the padding on each side of a cell, so the gap between two columns is twice its value: `8px` in Harmony (odeditor) and Studio 2.0 (odeditor-dark), `12px` elsewhere, which is the padding Table hardcoded before.
+  - `--wds-table-row-divider-fill` colors the divider under each row: transparent in Harmony (odeditor) and Studio 2.0 (odeditor-dark), `--wds-color-border-dark-secondary` elsewhere.
+  - `--wds-table-region-divider-fill` colors the dividers between a Table's own regions — above the sub-toolbar and above the content: transparent in Harmony (odeditor) and Studio 2.0 (odeditor-dark), `--wds-color-border-dark-secondary` elsewhere.
+  - `--wds-table-sub-toolbar-padding-block-start` and `--wds-table-sub-toolbar-padding-block-end` set the sub-toolbar's vertical padding: `8px` and `16px` in Harmony (odeditor) and Studio 2.0 (odeditor-dark), `9px` in both directions elsewhere, which is the padding Table hardcoded before.
+  - `--wds-table-list-item-fill-overlay` fills the row preview that follows the cursor: `--wds-color-fill-standard-tertiary` in Harmony (odeditor) and Studio 2.0 (odeditor-dark), `--wds-color-blue-600` elsewhere, which is the fill drag-and-drop hardcoded before.
+
+  No other tokens affected.
+
+- [#16714](https://github.com/wix-private/wix-design-systems/pull/16714) [`fbf4899`](https://github.com/wix-private/wix-design-systems/commit/fbf48992657f1d5060611a6da5598140d36b02a7) - Add ten TableListHeader tokens.
+  - `--wds-table-list-header-min-height` sets the header height: `48px` in Harmony (odeditor) and Studio 2.0 (odeditor-dark), `42px` elsewhere, which is the height the header hardcoded before.
+  - `--wds-table-list-header-fill` fills the header: transparent in Harmony (odeditor) and Studio 2.0 (odeditor-dark), `--wds-color-fill-surface-standard` elsewhere.
+  - `--wds-table-list-header-divider-fill-top` colors the top divider: transparent in Harmony (odeditor) and Studio 2.0 (odeditor-dark), `--wds-color-border-standard-primary` elsewhere.
+  - `--wds-table-list-header-divider-fill-bottom` colors the bottom divider: `--wds-color-border-dark-secondary` in Harmony (odeditor) and Studio 2.0 (odeditor-dark), `--wds-color-border-standard-primary` elsewhere.
+  - `--wds-table-list-header-icon-fill` colors the sort arrows: `--wds-color-text-standard-primary` in Harmony (odeditor) and Studio 2.0 (odeditor-dark), `--wds-color-text-primary` elsewhere, which preserves today's blue.
+  - `--wds-table-list-header-padding-inline` pads the header on both inline edges: `24px` in Harmony (odeditor) and Studio 2.0 (odeditor-dark), `0` elsewhere, which is what the header had before.
+  - `--wds-table-list-header-checkbox-padding-left` pads the left of the select-all checkbox's selection area: `4px` in Harmony (odeditor), `0` in Studio 2.0 (odeditor-dark), `6px` elsewhere, which is the padding the header hardcoded before. The Harmony and Studio 2.0 values match `--wds-table-list-item-checkbox-offset` in the same theme, so the header checkbox lands on the same pixel as the row checkboxes below it.
+  - `--wds-table-list-header-checkbox-padding-right` pads the right of the select-all checkbox's selection area: `10px` in Harmony (odeditor), `14px` in Studio 2.0 (odeditor-dark), `12px` elsewhere, which is the padding the header hardcoded before. In Harmony and Studio 2.0 the value completes a 28px checkbox column, so the first header label starts on the same pixel as the first cell of the rows below.
+  - `--wds-table-list-header-option-margin-inline` insets each header label from its column edge: `0` in Harmony (odeditor) and Studio 2.0 (odeditor-dark), `6px` elsewhere, which is the margin the header hardcoded before.
+  - `--wds-table-list-header-option-gap` separates adjacent header labels: `16px` in Harmony (odeditor) and Studio 2.0 (odeditor-dark), `18px` elsewhere, which is the gap the header hardcoded before.
+
+  No other tokens affected.
+
+### Patch Changes
+
+- [#16772](https://github.com/wix-private/wix-design-systems/pull/16772) [`661ea1f`](https://github.com/wix-private/wix-design-systems/commit/661ea1f7af11de9cea9fc8e521cf45f0b4aa6646) - Card: controls position is now themeable through `card.controls-padding-vertical` and `card.controls-padding-horizontal` tokens. In the odeditor theme the controls sit 12px from the top and right edges; other themes keep their current position.
+
+- [#16746](https://github.com/wix-private/wix-design-systems/pull/16746) [`47e9633`](https://github.com/wix-private/wix-design-systems/commit/47e9633e10d46fbdb04de536734fc4207d0c9907) - SidebarNext: in the Harmony (odeditor) theme the sidebar's right edge shows two 1px lines — an inner `#FFFFFF` hairline next to an outer `#EEEEEE` line. Adds `--wds-sidebar-border-inner-fill` and `--wds-sidebar-border-outer-fill` (set only in Harmony; unset elsewhere, so other themes keep their single divider border).
+
+- [#16782](https://github.com/wix-private/wix-design-systems/pull/16782) [`2592e8b`](https://github.com/wix-private/wix-design-systems/commit/2592e8b23d76697016f571077ee2359c34254b3d) - Studio 2.0 (odeditor-dark): `--wds-color-fill-destructive-tertiary-active` changes from `#4D2324` to `#A6464B`, and ListItemAction's destructive hover and pressed colours now follow the standard skin — `--wds-list-item-action-fill-hover-destructive` from `#A6464B` to `#4D2324`, `--wds-list-item-action-label-fill-hover-destructive` from `#F9D6D7` to `#FF7680`, `--wds-list-item-action-subtitle-destructive` from `#F9D6D7` to `#A09E9D`, and `--wds-list-item-action-subtitle-fill-pressed-destructive` from `#FFFFFF` to `#D4D3D2`.
+
+- [#16746](https://github.com/wix-private/wix-design-systems/pull/16746) [`47e9633`](https://github.com/wix-private/wix-design-systems/commit/47e9633e10d46fbdb04de536734fc4207d0c9907) - SidebarNext: restore the Default theme to its pre-1.308.1 appearance (1.308.1 unintentionally changed Default sidebar item indents, paddings, typography and the quick-navigation popover). Default now matches 1.307.0 again. In Harmony (odeditor) a minimized sidebar item is a centred 30x30 icon button (was 34x30). Studio 2.0 (odeditor-dark) and other themes are unchanged.
+
+- [#16746](https://github.com/wix-private/wix-design-systems/pull/16746) [`47e9633`](https://github.com/wix-private/wix-design-systems/commit/47e9633e10d46fbdb04de536734fc4207d0c9907) - SidebarNext: in the Harmony (odeditor) theme an expanded second-level sub-menu no longer adds 6px of bottom padding. Adds `--wds-sidebar-submenu-level-2-padding-bottom` (`0` in Harmony, `6px` — the previous value — everywhere else). Other themes are unchanged.
+
+- [#16831](https://github.com/wix-private/wix-design-systems/pull/16831) [`5988eba`](https://github.com/wix-private/wix-design-systems/commit/5988eba4d921ce2bb2fb965249b91d9bacb4b76e) - `--wds-table-list-header-fill` changed from transparent (`--wds-color-black-100-transparent-0`) to `--wds-color-fill-surface-raised` in Harmony (odeditor) and Studio 2.0 (odeditor-dark), so rows scrolling beneath the table header no longer show through it.
+
+- [#16809](https://github.com/wix-private/wix-design-systems/pull/16809) [`fb9b34e`](https://github.com/wix-private/wix-design-systems/commit/fb9b34ee8f79383bc6a35aa6e4122cb0a0338100) - Carousel dots, arrows and the side fade match the spec in Harmony (odeditor); other themes are unchanged. **Visual breaking change:** the `gradient` prop now shows the side fade at every `controlsPosition`, not only `overlay`, and the fade starts at the slide edge instead of the outer container. New `--wds-carousel-*` tokens cover dot, arrow and gradient styling in every theme.
+
+  Slide shadows are no longer clipped at the top and bottom of the carousel viewport. New position and spacing tokens (`controls-gap-*`, `controls-offset-*`, `controls-bottom-*`, `dots-gap`, `dots-gap-bottom`) align the Harmony arrows and dots with the Figma spec, and Harmony arrows copy HorizontalScroll's hover/active states via the new `controls-fill-*`, `controls-icon-fill-*` and `controls-shadow-hover/active` tokens.
+
+- [#16772](https://github.com/wix-private/wix-design-systems/pull/16772) [`661ea1f`](https://github.com/wix-private/wix-design-systems/commit/661ea1f7af11de9cea9fc8e521cf45f0b4aa6646) - MarketingLayout: in the odeditor theme the cards now match the spec heights — 140px (tiny), 160px (small) and 180px (medium) — and an image passed as a URL is squared to the card height minus its 12px insets, so it keeps equal padding on all sides and grows when the card grows. Title to description gap is 4px for small and medium, and the tiny title uses Madefor Display. Other themes are visually unchanged.
+
+- [#16772](https://github.com/wix-private/wix-design-systems/pull/16772) [`661ea1f`](https://github.com/wix-private/wix-design-systems/commit/661ea1f7af11de9cea9fc8e521cf45f0b4aa6646) - MarketingLayout: the description width is now themeable through a `marketing-layout.description-max-width` token. In the odeditor theme it is capped at 80% of the text container; other themes are unchanged.
+
+- [#16772](https://github.com/wix-private/wix-design-systems/pull/16772) [`661ea1f`](https://github.com/wix-private/wix-design-systems/commit/661ea1f7af11de9cea9fc8e521cf45f0b4aa6646) - MarketingLayout: in the odeditor theme, the tiny size now follows the T-120px spec — title-description gap is 2px and description-actions gap is 12px. Added a `marketing-layout.actions-alignment-inverted` token (`flex-end` in odeditor, `auto` in all other themes).
+
+- [#16746](https://github.com/wix-private/wix-design-systems/pull/16746) [`47e9633`](https://github.com/wix-private/wix-design-systems/commit/47e9633e10d46fbdb04de536734fc4207d0c9907) - Add sidebar tokens for the Harmony (odeditor) footer fade: `--wds-sidebar-fill-dark` / `--wds-sidebar-fill-light` / `--wds-sidebar-fill-neutral` (the sidebar surface — `#F7F7F7` for light and neutral in Harmony) and `--wds-sidebar-footer-fade-height` (60px in Harmony, 0 elsewhere).
+
+- [#16780](https://github.com/wix-private/wix-design-systems/pull/16780) [`50815ac`](https://github.com/wix-private/wix-design-systems/commit/50815ac04a89ab44156f92a22c71ab5834972731) - New token `--wds-table-action-cell-backdrop-opacity` toggling the backdrop that hides row content behind the table action cell's actions: `0` by default, `1` in Harmony (odeditor) and Studio 2.0 (odeditor-dark).
+
+## 1.223.0
+
+### Minor Changes
+
+- [#16771](https://github.com/wix-private/wix-design-systems/pull/16771) [`6a63ffa`](https://github.com/wix-private/wix-design-systems/commit/6a63ffa3f765babaa07f543245c8a82e6aa891b8) - ClickableCard: add `clickable-card.standard.border` tokens (width, color-hover, color-active, color-disabled) and a `clickable-card.standard.box-shadow-hover` token to the odeditor and odeditor-dark themes, and re-point the outline skin's hover/pressed border colors from blue to gray. In these themes the standard skin now shows a 1px gray border instead of a shadow on hover, a higher-contrast gray border on pressed and a subtle border on disabled; other themes are unchanged. The border is always present at 1px in these themes so hovering does not shift content. Also fixes the outline skin reacting to hover and click while disabled.
+
+  Fix the ClickableCard shadow skin rendering no shadow at rest, pressed and disabled in the odeditor, odeditor-dark and wixel themes (the standard skin also lost its pressed shadow). `shadow.spread-secondary-raised` emitted `-0.70` with no unit, and an unitless non-zero length is invalid CSS, so the whole `box-shadow` declaration was dropped. The token is now typed `float` so the px transform applies and it emits `-0.7px`; in the default and studio themes it now emits `0px` instead of `0`, which renders identically. Two further shadow tokens that emitted unitless values are normalised the same way: `shadow.focus-spread` in default and `shadow.y.secondary.overlay` in odeditor-dark. Neither has a consumer, so they carry no visual change.
+
+- [#16781](https://github.com/wix-private/wix-design-systems/pull/16781) [`057a737`](https://github.com/wix-private/wix-design-systems/commit/057a737d16436e22a8335ee8df0f6f0a22f99767) - Add `--wds-horizontal-scroll-button-fill`, `--wds-horizontal-scroll-button-fill-active` and `--wds-horizontal-scroll-button-text` for HorizontalScroll's scroll buttons. In Studio 2.0 (odeditor-dark) they are `#3A3A3B`, `#666565` and `#FFFFFF`; every other theme keeps the values the component already rendered — `#FFFFFF`, `#CFD1DC` and `#000624`.
+
+- [#16604](https://github.com/wix-private/wix-design-systems/pull/16604) [`30709f4`](https://github.com/wix-private/wix-design-systems/commit/30709f4dfd2b3782cb60e4842e8f81a3e2ff413c) - Add ten TableListHeader tokens.
+  - `--wds-table-list-header-min-height` sets the header height: `48px` in Harmony (odeditor) and Studio 2.0 (odeditor-dark), `42px` elsewhere, which is the height the header hardcoded before.
+  - `--wds-table-list-header-fill` fills the header: transparent in Harmony (odeditor) and Studio 2.0 (odeditor-dark), `--wds-color-fill-surface-standard` elsewhere.
+  - `--wds-table-list-header-divider-fill-top` colors the top divider: transparent in Harmony (odeditor) and Studio 2.0 (odeditor-dark), `--wds-color-border-standard-primary` elsewhere.
+  - `--wds-table-list-header-divider-fill-bottom` colors the bottom divider: `--wds-color-border-dark-secondary` in Harmony (odeditor) and Studio 2.0 (odeditor-dark), `--wds-color-border-standard-primary` elsewhere.
+  - `--wds-table-list-header-icon-fill` colors the sort arrows: `--wds-color-text-standard-primary` in Harmony (odeditor) and Studio 2.0 (odeditor-dark), `--wds-color-text-primary` elsewhere, which preserves today's blue.
+  - `--wds-table-list-header-padding-inline` pads the header on both inline edges: `24px` in Harmony (odeditor) and Studio 2.0 (odeditor-dark), `0` elsewhere, which is what the header had before.
+  - `--wds-table-list-header-checkbox-padding-left` pads the left of the select-all checkbox's selection area: `4px` in Harmony (odeditor), `0` in Studio 2.0 (odeditor-dark), `6px` elsewhere, which is the padding the header hardcoded before. The Harmony and Studio 2.0 values match `--wds-table-list-item-checkbox-offset` in the same theme, so the header checkbox lands on the same pixel as the row checkboxes below it.
+  - `--wds-table-list-header-checkbox-padding-right` pads the right of the select-all checkbox's selection area: `10px` in Harmony (odeditor), `14px` in Studio 2.0 (odeditor-dark), `12px` elsewhere, which is the padding the header hardcoded before. In Harmony and Studio 2.0 the value completes a 28px checkbox column, so the first header label starts on the same pixel as the first cell of the rows below.
+  - `--wds-table-list-header-option-margin-inline` insets each header label from its column edge: `0` in Harmony (odeditor) and Studio 2.0 (odeditor-dark), `6px` elsewhere, which is the margin the header hardcoded before.
+  - `--wds-table-list-header-option-gap` separates adjacent header labels: `16px` in Harmony (odeditor) and Studio 2.0 (odeditor-dark), `18px` elsewhere, which is the gap the header hardcoded before.
+
+  No other tokens affected.
+
+### Patch Changes
+
+- [#16775](https://github.com/wix-private/wix-design-systems/pull/16775) [`4ff39b4`](https://github.com/wix-private/wix-design-systems/commit/4ff39b44631ac60cdcb68eba12e1a37aa428419d) - New CardGalleryItem tokens in all themes: `--wds-card-gallery-item-image-inset`, `--wds-card-gallery-item-badge-offset-inline`, `--wds-card-gallery-item-badge-offset-block`, `--wds-card-gallery-item-overlay-hover-fill`, `--wds-card-gallery-item-overlay-backdrop-filter`, `--wds-card-gallery-item-title-font-heading-weight-medium`, `--wds-card-gallery-item-title-font-heading-letter-spacing-medium`, `--wds-card-gallery-item-subtitle-line-height-medium`, `--wds-card-gallery-item-title-gap`, `--wds-card-gallery-item-drag-handle-gap`, `--wds-card-gallery-item-image-side-size-medium`, `--wds-card-gallery-item-image-side-size-small`, `--wds-card-gallery-item-outline-border-color`, `--wds-card-gallery-item-outline-border-color-hover`, `--wds-card-gallery-item-base-shadow`, `--wds-card-gallery-item-shadow`, `--wds-card-gallery-item-shadow-hover`, `--wds-card-gallery-item-shadow-hover-side`, `--wds-card-gallery-item-title-font-family`, `--wds-card-gallery-item-title-font-letter-spacing`, `--wds-card-gallery-item-title-font-weight-small`, `--wds-card-gallery-item-actions-direction`, `--wds-card-gallery-item-actions-align`, `--wds-card-gallery-item-actions-secondary-position`, `--wds-card-gallery-item-secondary-action-font-size`, `--wds-card-gallery-item-secondary-action-line-height` and the `--wds-card-gallery-item-action-button-*` group (`size`, `min-width`, `border-radius`, `padding-vertical`, `padding-horizontal`, `font-size`, `line-height`). In Harmony (odeditor) they restyle the card (8px image inset, 12px badge offsets, `rgba(54, 64, 97, 0.52)` + `blur(28px)` hover overlay, title weight 700 with -0.5px letter spacing, 16px subtitle line height, 2px title-to-subtitle gap, 48px/32px side images, an 8px drag-handle gap, a 30px hover action button paired with a 12px secondary label and centred as a group, Madefor Display 700 with -0.5px letter spacing for the small-card title at an 18px line height, `#dedede` outline going `#a8a6a5` on hover, and the ClickableCard raised/overlay shadows for the card, `0 1px 10px 0 rgba(19, 23, 32, 0.05), 1px 0 2px -0.7px rgba(19, 23, 32, 0.05)` at rest going `0 0 30px 0 rgba(19, 23, 32, 0.1)` on hover). Also in Harmony, `--wds-card-gallery-item-image-border-radius-bottom` goes from 12px to 8px, `--wds-card-gallery-item-title-font-weight-medium` from 600 to 700, `--wds-card-gallery-item-padding-vertical-medium` and `--wds-card-gallery-item-padding-left-medium` from 18px to 16px, `--wds-card-gallery-item-padding-right-medium` from 24px to 16px, and `--wds-card-gallery-item-padding-right-small` from 18px to 12px. In every other theme the new tokens match the current rendering.
+
+- [#16773](https://github.com/wix-private/wix-design-systems/pull/16773) [`b9159b1`](https://github.com/wix-private/wix-design-systems/commit/b9159b150aa63117abce8fd3b2f59af5389e8cd1) - `--wds-accordion-background-fill-light` changes from `#212122` to transparent (`rgba(255, 255, 255, 0)`) and `--wds-accordion-background-fill-light-hover` from `#3A3A3B` to transparent (`rgba(255, 255, 255, 0)`) in Studio 2.0 (odeditor-dark).
+
+- [#16802](https://github.com/wix-private/wix-design-systems/pull/16802) [`9c103e6`](https://github.com/wix-private/wix-design-systems/commit/9c103e6393395f8ce79e523c289f6fe158a93620) - Added `--wds-marketing-page-*` component tokens for MarketingPageLayout: content and image paddings, image border radius, footer width, max-width and divider display, title and content typography and gaps. Values diverge only in Harmony (odeditor); all other themes keep their current rendering.
+
+- [#16785](https://github.com/wix-private/wix-design-systems/pull/16785) [`256e4e4`](https://github.com/wix-private/wix-design-systems/commit/256e4e46dc1217b3a4c51c89b828214178c691f7) - In the odeditor theme, `icon-button.color.fill.dark.tertiary-hover` now resolves to Black 600 (#E8E7E7) instead of #F8F6F6, so the tertiary dark IconButton hover is visible.
+
+- [#16765](https://github.com/wix-private/wix-design-systems/pull/16765) [`326018f`](https://github.com/wix-private/wix-design-systems/commit/326018f2c9987c6cbe86d6c77f0c510a273649c0) - In the Harmony (odeditor) and Studio 2.0 (odeditor-dark) themes, Page.Header now aligns the back button, title and subtitle closer to the left edge (back button 4px from the container, title and subtitle indented 8px, matching the breadcrumbs), keeps a 12px bottom padding under the minimized header when tabs are used, and the EditableTitle idle underline shows dots with more space between them. The Page.Header back button icon now follows the icon theme, so it renders the Harmony chevron when Harmony icons are enabled. Other themes are unchanged.
+
 ## 1.222.1
 
 ### Patch Changes

package/all.css

@@ -29,8 +29,8 @@
   --wds-space-50: 3px;
   --wds-space-25: 1px;
   --wds-space-0: 0px;
-  --wds-shadow-spread-secondary-raised: 0;
-  --wds-shadow-focus-spread: 3;
+  --wds-shadow-spread-secondary-raised: 0px;
+  --wds-shadow-focus-spread: 3px;
   --wds-shadow-y-600: 20px;
   --wds-shadow-y-350: 3px;
   --wds-shadow-y-300: 12px;
@@ -296,6 +296,10 @@
   --wds-table-toolbar-divider-gap-group-start: 24px;
   --wds-table-toolbar-divider-gap: 12px;
   --wds-table-toolbar-button-gap: 6px;
+  --wds-table-action-cell-backdrop-opacity: 0;
+  --wds-table-sub-toolbar-padding-block-start: 9px;
+  --wds-table-sub-toolbar-padding-block-end: 9px;
+  --wds-table-cell-padding-inline: 12px;
   --wds-swatches-swatch-active-border-radius-small: 5px;
   --wds-swatches-swatch-active-border-radius-medium: 9px;
   --wds-status-toast-width: 600px;
@@ -330,6 +334,7 @@
   --wds-sidebar-divider-padding-inline: 20px;
   --wds-sidebar-divider-fill-dark-default: #42454C;
   --wds-sidebar-clear-button-fill: #5a5d63;
+  --wds-sidebar-border-inner-fill: transparent;
   --wds-side-panel-standard-shadow: none;
   --wds-side-panel-standard-overflow: visible;
   --wds-side-panel-floating-max-height: 576px;
@@ -346,8 +351,35 @@
   --wds-page-header-breadcrumbs-offset-large: -15px;
   --wds-page-header-back-button-gap: 8px;
   --wds-message-modal-close-button-fill: transparent;
+  --wds-marketing-page-overline-divider-margin-top: 17px;
+  --wds-marketing-page-overline-divider-display: block;
+  --wds-marketing-page-image-top-title-subtitle-gap: 16px;
+  --wds-marketing-page-image-top-image-padding: 24px;
+  --wds-marketing-page-image-top-image-border-radius: 8px;
+  --wds-marketing-page-image-top-footer-padding-bottom: 24px;
+  --wds-marketing-page-image-top-content-padding-top: 48px;
+  --wds-marketing-page-image-top-content-padding-horizontal: 48px;
+  --wds-marketing-page-image-top-content-padding-bottom: 48px;
+  --wds-marketing-page-image-top-content-column-padding-vertical: 6px;
+  --wds-marketing-page-image-top-columns-gap: 40px;
+  --wds-marketing-page-image-top-actions-gap: 38px;
+  --wds-marketing-page-image-grid-row: span 1;
+  --wds-marketing-page-image-display: block;
+  --wds-marketing-page-footer-grid-column: span 12;
+  --wds-marketing-page-footer-divider-display: block;
   --wds-marketing-layout-title-font-size-tiny: 20px;
+  --wds-marketing-layout-min-height-tiny: auto;
+  --wds-marketing-layout-min-height-small: auto;
+  --wds-marketing-layout-min-height-medium: auto;
+  --wds-marketing-layout-image-wrapper-width: auto;
+  --wds-marketing-layout-image-wrapper-flex: 0 1 auto;
+  --wds-marketing-layout-image-wrapper-contain: none;
+  --wds-marketing-layout-image-width: 100%;
+  --wds-marketing-layout-image-object-fit: fill;
+  --wds-marketing-layout-image-height: auto;
   --wds-marketing-layout-image-border-radius: 0px;
+  --wds-marketing-layout-image-aspect-ratio: auto;
+  --wds-marketing-layout-description-max-width: none;
   --wds-marketing-layout-badge-top: 9px;
   --wds-marketing-layout-badge-side: -3px;
   --wds-marketing-layout-badge-position: absolute;
@@ -355,6 +387,7 @@
   --wds-marketing-layout-badge-offset-small: 12px;
   --wds-marketing-layout-badge-offset-medium: 12px;
   --wds-marketing-layout-badge-gap: 0px;
+  --wds-marketing-layout-actions-alignment-inverted: auto;
   --wds-loader-stroke-width-tiny: 3px;
   --wds-loader-stroke-width-small: 4px;
   --wds-loader-stroke-width-medium: 4px;
@@ -379,12 +412,16 @@
   --wds-input-width-medium: 72px;
   --wds-input-width-large: 96px;
   --wds-input-width-fixed: 288px;
+  --wds-horizontal-scroll-button-text: #000624;
+  --wds-horizontal-scroll-button-fill-active: #CFD1DC;
+  --wds-horizontal-scroll-button-fill: #FFFFFF;
   --wds-google-preview-title-fill: #260AA8;
   --wds-google-preview-text-fill: #4D5156;
   --wds-google-preview-site-name-fill: #202124;
   --wds-google-preview-favicon-border-fill: #E6E6E6;
   --wds-google-preview-favicon-background-fill: #F1F3F4;
   --wds-editable-title-marker-line-style: dashed;
+  --wds-editable-title-marker-image: none;
   --wds-editable-title-marker-gap: 6px;
   --wds-custom-modal-close-button-fill: transparent;
   --wds-counter-badge-padding-horizontal-tiny: 4px;
@@ -396,6 +433,36 @@
   --wds-close-button-standard-filled-fill: transparent;
   --wds-circular-progress-bar-border-width: 4px;
   --wds-checkbox-size: 16px;
+  --wds-carousel-gradient-opacity: 50%;
+  --wds-carousel-dots-height: 4px;
+  --wds-carousel-dots-gap-bottom-shift: 0.5;
+  --wds-carousel-dots-gap-bottom: 14px;
+  --wds-carousel-dots-border-radius: 2px;
+  --wds-carousel-controls-shadow-hover: none;
+  --wds-carousel-controls-shadow-default: none;
+  --wds-carousel-controls-shadow-active: none;
+  --wds-carousel-controls-offset-sides-gradient: 12px;
+  --wds-carousel-controls-offset-sides: 0px;
+  --wds-carousel-controls-offset-overlay: 12px;
+  --wds-carousel-controls-offset-bottom-gradient: 12px;
+  --wds-carousel-controls-offset-bottom: 0px;
+  --wds-carousel-controls-bottom-shift: 0;
+  --wds-carousel-controls-bottom-offset-dots: 14px;
+  --wds-carousel-controls-border-disabled: solid 1px var(--wds-icon-button-color-border-standard-secondary-disabled);
+  --wds-carousel-controls-border: solid 1px var(--wds-icon-button-color-border-standard-secondary);
+  --wds-card-gallery-item-title-gap: 0px;
+  --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);
+  --wds-card-gallery-item-overlay-backdrop-filter: none;
+  --wds-card-gallery-item-image-side-size-small: 30px;
+  --wds-card-gallery-item-image-side-size-medium: 40px;
+  --wds-card-gallery-item-drag-handle-gap: 12px;
+  --wds-card-gallery-item-base-shadow: none;
+  --wds-card-gallery-item-badge-offset-inline: -6px;
+  --wds-card-gallery-item-badge-offset-block: 12px;
+  --wds-card-gallery-item-actions-secondary-position: absolute;
+  --wds-card-gallery-item-actions-direction: row;
+  --wds-card-gallery-item-actions-align: stretch;
+  --wds-card-gallery-item-action-button-min-width: 84px;
   --wds-card-header-suffix-align: center;
   --wds-card-divider-opacity: 1;
   --wds-card-base-shadow: none;
@@ -1024,12 +1091,19 @@
   --wds-table-list-item-indentation-level-3: var(--wds-space-600);
   --wds-table-list-item-indentation-level-2: var(--wds-space-200);
   --wds-table-list-item-gap: var(--wds-space-400);
+  --wds-table-list-item-fill-overlay: var(--wds-color-blue-600);
   --wds-table-list-item-fill-hover-draggable: var(--wds-color-blue-500);
   --wds-table-list-item-fill-highlight: var(--wds-color-blue-600);
   --wds-table-list-item-controls-padding-medium: var(--wds-space-300);
   --wds-table-list-item-controls-gap-medium: var(--wds-space-200);
   --wds-table-list-item-checkbox-offset: var(--wds-space-0);
   --wds-table-list-item-border-radius: var(--wds-border-radius-0);
+  --wds-table-list-header-padding-inline: var(--wds-space-0);
+  --wds-table-list-header-option-margin-inline: var(--wds-space-100);
+  --wds-table-list-header-option-gap: var(--wds-space-300);
+  --wds-table-list-header-min-height: var(--wds-space-700);
+  --wds-table-list-header-checkbox-padding-right: var(--wds-space-200);
+  --wds-table-list-header-checkbox-padding-left: var(--wds-space-100);
   --wds-table-action-cell-secondary-action-gap-tiny: var(--wds-space-100);
   --wds-table-action-cell-secondary-action-gap-small: var(--wds-space-200);
   --wds-table-action-cell-secondary-action-gap-medium: var(--wds-space-200);
@@ -1037,6 +1111,7 @@
   --wds-table-action-cell-primary-action-gap-small: var(--wds-space-200);
   --wds-table-action-cell-primary-action-gap-medium: var(--wds-space-200);
   --wds-table-toolbar-padding-horizontal: var(--wds-space-400);
+  --wds-table-header-font-weight: var(--wds-font-weight-regular);
   --wds-swatches-swatch-size-tiny: var(--wds-space-400);
   --wds-swatches-swatch-size-small: var(--wds-space-500);
   --wds-swatches-swatch-size-medium: var(--wds-space-600);
@@ -1070,6 +1145,7 @@
   --wds-skeleton-border-radius-rectangle: var(--wds-border-radius-300);
   --wds-skeleton-border-radius-line: var(--wds-border-radius-full);
   --wds-skeleton-border-radius-circle: var(--wds-border-radius-full);
+  --wds-sidebar-submenu-level-2-padding-bottom: var(--wds-space-100);
   --wds-sidebar-padding-top: var(--wds-space-0);
   --wds-sidebar-padding-start: var(--wds-space-0);
   --wds-sidebar-padding-end: var(--wds-space-0);
@@ -1131,6 +1207,8 @@
   --wds-sidebar-item-level-1-fill-light-active: var(--wds-color-blue-300);
   --wds-sidebar-item-content-gap: var(--wds-space-100);
   --wds-sidebar-header-margin-bottom: var(--wds-space-200);
+  --wds-sidebar-footer-fade-height: var(--wds-space-0);
+  --wds-sidebar-fill-dark: var(--wds-sidebar-item-level-1-fill-dark-default);
   --wds-sidebar-divider-padding-bottom: var(--wds-space-150);
   --wds-sidebar-divider-fill-neutral-default: var(--wds-color-black-550);
   --wds-sidebar-divider-fill-light-default: var(--wds-color-black-550);
@@ -1266,6 +1344,7 @@
   --wds-page-section-padding-bottom-with-divider: var(--wds-space-0);
   --wds-page-section-padding-bottom: var(--wds-space-200);
   --wds-page-section-gap: var(--wds-space-0);
+  --wds-page-header-title-padding-start: var(--wds-space-0);
   --wds-page-header-title-minimised-letter-spacing: var(--wds-font-letter-spacing-0);
   --wds-page-header-title-minimised-font-weight: var(--wds-font-weight-medium);
   --wds-page-header-title-actions-gap: var(--wds-space-0);
@@ -1275,7 +1354,9 @@
   --wds-page-header-padding-vertical: var(--wds-space-400);
   --wds-page-header-padding-horizontal-small: var(--wds-space-400);
   --wds-page-header-padding-horizontal: var(--wds-space-800);
+  --wds-page-header-padding-bottom-with-tail: var(--wds-space-200);
   --wds-page-header-breadcrumbs-selected-font-weight: var(--wds-font-weight-medium);
+  --wds-page-header-back-button-offset: var(--wds-space-0);
   --wds-notification-padding-vertical: var(--wds-space-150);
   --wds-notification-padding-horizontal: var(--wds-space-200);
   --wds-notification-fill-warning: var(--wds-color-yellow-100);
@@ -1302,14 +1383,27 @@
   --wds-message-modal-content-gap: var(--wds-space-200);
   --wds-message-modal-close-button-size: var(--wds-space-500);
   --wds-message-modal-close-button-icon-size: var(--wds-space-200);
+  --wds-marketing-page-title-content-gap: var(--wds-space-400);
   --wds-marketing-page-paddings-vertical-medium: var(--wds-space-500);
   --wds-marketing-page-paddings-vertical-large: var(--wds-space-800);
   --wds-marketing-page-paddings-horizontal-medium: var(--wds-space-800);
   --wds-marketing-page-paddings-horizontal-large: var(--wds-space-1500);
+  --wds-marketing-page-overline-title-gap: var(--wds-space-200);
+  --wds-marketing-page-image-padding-vertical-medium: var(--wds-space-500);
+  --wds-marketing-page-image-padding-vertical-large: var(--wds-space-800);
+  --wds-marketing-page-image-padding-end-medium: var(--wds-space-800);
+  --wds-marketing-page-image-padding-end-large: var(--wds-space-1500);
+  --wds-marketing-page-footer-padding-bottom: var(--wds-space-0);
+  --wds-marketing-page-content-padding-start-medium: var(--wds-space-800);
+  --wds-marketing-page-content-padding-start-large: var(--wds-space-1500);
+  --wds-marketing-page-content-padding-end-medium: var(--wds-space-800);
+  --wds-marketing-page-content-padding-end-large: var(--wds-space-1500);
+  --wds-marketing-page-content-actions-gap: var(--wds-space-700);
   --wds-marketing-layout-title-gap-tiny: var(--wds-space-100);
   --wds-marketing-layout-title-gap-small: var(--wds-space-100);
   --wds-marketing-layout-title-gap-medium: var(--wds-space-200);
   --wds-marketing-layout-title-font-weight-tiny: var(--wds-font-weight-bold);
+  --wds-marketing-layout-title-font-family-tiny: var(--wds-font-family-default);
   --wds-marketing-layout-padding-vertical-tiny: var(--wds-space-300);
   --wds-marketing-layout-padding-vertical-small: var(--wds-space-400);
   --wds-marketing-layout-padding-vertical-medium: var(--wds-space-400);
@@ -1521,20 +1615,41 @@
   --wds-checkbox-group-gap-vertical: var(--wds-space-200);
   --wds-checkbox-border-radius: var(--wds-border-radius-200);
   --wds-checkbox-border-active-hover: var(--wds-color-black-100-transparent-0);
+  --wds-carousel-gradient-color: var(--wds-color-white);
   --wds-carousel-dots-width: var(--wds-space-200);
+  --wds-carousel-dots-gap: var(--wds-space-400);
+  --wds-carousel-dots-fill-hover: var(--wds-color-blue-200);
+  --wds-carousel-dots-fill-active: var(--wds-color-blue-0);
+  --wds-carousel-dots-fill: var(--wds-color-blue-300);
+  --wds-carousel-controls-gap-tiny: var(--wds-space-400);
+  --wds-carousel-controls-gap-small: var(--wds-space-300);
+  --wds-carousel-controls-gap-medium: var(--wds-space-200);
+  --wds-carousel-controls-gap-large: var(--wds-space-200);
+  --wds-carousel-controls-bottom-offset-no-dots: var(--wds-carousel-dots-height);
+  --wds-carousel-controls-border-radius: var(--wds-border-radius-full);
+  --wds-card-gallery-item-title-font-weight-small: var(--wds-font-weight-medium);
   --wds-card-gallery-item-title-font-weight-medium: var(--wds-font-weight-medium);
+  --wds-card-gallery-item-title-font-letter-spacing: var(--wds-font-letter-spacing-0);
+  --wds-card-gallery-item-title-font-family: var(--wds-font-family-default);
   --wds-card-gallery-item-padding-vertical-small: var(--wds-space-200);
   --wds-card-gallery-item-padding-vertical-medium: var(--wds-space-300);
   --wds-card-gallery-item-padding-right-small: var(--wds-space-300);
   --wds-card-gallery-item-padding-right-medium: var(--wds-space-400);
   --wds-card-gallery-item-padding-left-small: var(--wds-space-200);
   --wds-card-gallery-item-padding-left-medium: var(--wds-space-300);
+  --wds-card-gallery-item-outline-border-color-hover: var(--wds-color-blue-300);
+  --wds-card-gallery-item-outline-border-color: var(--wds-color-blue-400);
+  --wds-card-gallery-item-image-inset: var(--wds-space-0);
   --wds-card-gallery-item-image-border-radius-top: var(--wds-border-radius-400);
   --wds-card-gallery-item-image-border-radius-bottom: var(--wds-border-radius-0);
   --wds-card-gallery-item-content-margin-vertical: var(--wds-space-0);
   --wds-card-gallery-item-buttons-gap: var(--wds-space-100);
   --wds-card-gallery-item-border-radius-100: var(--wds-border-radius-400);
   --wds-card-gallery-item-border-radius-0: var(--wds-border-radius-0);
+  --wds-card-gallery-item-action-button-size: var(--wds-space-600);
+  --wds-card-gallery-item-action-button-padding-vertical: var(--wds-space-100);
+  --wds-card-gallery-item-action-button-padding-horizontal: var(--wds-space-400);
+  --wds-card-gallery-item-action-button-border-radius: var(--wds-border-radius-full);
   --wds-card-tab-padding-vertical-small: var(--wds-space-300);
   --wds-card-tab-padding-vertical-medium: var(--wds-space-300);
   --wds-card-tab-padding-horizontal-small: var(--wds-space-300);
@@ -1543,6 +1658,8 @@
   --wds-card-header-padding-vertical: var(--wds-space-300);
   --wds-card-header-padding-horizontal: var(--wds-space-400);
   --wds-card-header-divider-width: var(--wds-border-width-none);
+  --wds-card-controls-padding-vertical: var(--wds-space-300);
+  --wds-card-controls-padding-horizontal: var(--wds-space-400);
   --wds-card-content-paddings-vertical: var(--wds-space-300);
   --wds-card-content-paddings-horizontal: var(--wds-space-400);
   --wds-card-content-padding-medium-top: var(--wds-space-400);
@@ -1806,6 +1923,12 @@
   --wds-table-list-item-drag-handle-color-hover: var(--wds-color-fill-standard-primary);
   --wds-table-list-item-drag-handle-color: var(--wds-color-text-primary);
   --wds-table-list-item-border-color: var(--wds-color-border-standard-secondary);
+  --wds-table-list-header-icon-fill: var(--wds-color-text-primary);
+  --wds-table-list-header-fill: var(--wds-color-fill-surface-standard);
+  --wds-table-list-header-divider-fill-top: var(--wds-color-border-standard-primary);
+  --wds-table-list-header-divider-fill-bottom: var(--wds-color-border-standard-primary);
+  --wds-table-row-divider-fill: var(--wds-color-border-dark-secondary);
+  --wds-table-region-divider-fill: var(--wds-color-border-dark-secondary);
   --wds-swatches-fill-disabled: var(--wds-color-fill-standard-secondary-disabled);
   --wds-swatches-fill-border-selected: var(--wds-color-border-standard-secondary-active);
   --wds-swatches-fill-border-no-value-dash: var(--wds-color-fill-destructive-primary);
@@ -1823,6 +1946,9 @@
   --wds-sidebar-item-text-light-disabled: var(--wds-color-text-disabled);
   --wds-sidebar-item-text-light-default: var(--wds-color-text-standard-secondary);
   --wds-sidebar-header-text-dark-default: var(--wds-color-text-standard-primary-light);
+  --wds-sidebar-fill-neutral: var(--wds-sidebar-item-level-1-fill-neutral-default);
+  --wds-sidebar-fill-light: var(--wds-sidebar-item-level-1-fill-light-default);
+  --wds-sidebar-border-outer-fill: var(--wds-sidebar-divider-fill-light-default);
   --wds-side-panel-title-font-size: var(--wds-font-size-heading-3);
   --wds-side-panel-subtitle-font-size: var(--wds-font-size-body-medium);
   --wds-side-panel-subtitle-fill: var(--wds-color-text-standard-secondary);
@@ -1915,6 +2041,9 @@
   --wds-multiselect-icon-fill: var(--wds-color-text-primary);
   --wds-message-modal-title-font-size: var(--wds-font-size-heading-2);
   --wds-message-modal-text-font-size: var(--wds-font-size-body-medium);
+  --wds-marketing-page-title-font-weight: var(--wds-font-weight-heading-1);
+  --wds-marketing-page-subtitle-fill: var(--wds-color-text-standard-primary);
+  --wds-marketing-page-content-font-size: var(--wds-font-size-body-medium);
   --wds-marketing-layout-title-font-weight-small: var(--wds-font-weight-heading-3);
   --wds-marketing-layout-title-font-weight-medium: var(--wds-font-weight-heading-2);
   --wds-marketing-layout-title-font-size-small: var(--wds-font-size-heading-3);
@@ -1994,6 +2123,7 @@
   --wds-input-border-color-disabled: var(--wds-color-border-standard-secondary-disabled);
   --wds-input-border-color: var(--wds-color-border-standard-secondary);
   --wds-input-background-fill-readonly: var(--wds-color-fill-standard-tertiary-readonly);
+  --wds-input-background-fill-on-stage: var(--wds-color-fill-dark-secondary);
   --wds-input-background-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
   --wds-input-background-fill-disabled: var(--wds-color-fill-standard-tertiary-disabled);
   --wds-input-background-fill-default: var(--wds-color-fill-standard-tertiary);
@@ -2177,12 +2307,23 @@
   --wds-checkbox-border-active-disabled: var(--wds-color-border-standard-secondary-disabled);
   --wds-checkbox-border-active: var(--wds-color-border-standard-secondary-active);
   --wds-checkbox-border: var(--wds-color-border-standard-secondary-active);
+  --wds-carousel-gradient-width: var(--wds-button-size-medium);
+  --wds-carousel-controls-size-tiny: var(--wds-button-size-tiny);
+  --wds-carousel-controls-size-small: var(--wds-button-size-small);
+  --wds-carousel-controls-size-medium: var(--wds-button-size-medium);
+  --wds-carousel-controls-size-large: var(--wds-button-size-large);
+  --wds-carousel-controls-shadow-disabled: var(--wds-shadow-300);
   --wds-carousel-controls-shadow: var(--wds-shadow-300);
   --wds-card-gallery-item-title-font-size-medium: var(--wds-font-size-body-small);
+  --wds-card-gallery-item-title-font-heading-weight-medium: var(--wds-font-weight-heading-4);
+  --wds-card-gallery-item-title-font-heading-letter-spacing-medium: var(--wds-font-letter-spacing-heading-4);
   --wds-card-gallery-item-subtitle-side-font-size-medium: var(--wds-font-size-body-tiny);
   --wds-card-gallery-item-subtitle-font-size-medium: var(--wds-font-size-body-small);
+  --wds-card-gallery-item-secondary-action-font-size: var(--wds-font-size-body-medium);
+  --wds-card-gallery-item-overlay-hover-fill: var(--wds-color-fill-transparent-primary);
   --wds-card-gallery-item-overlay-fill: var(--wds-color-fill-transparent-primary);
   --wds-card-gallery-item-fill: var(--wds-color-fill-surface-default);
+  --wds-card-gallery-item-action-button-font-size: var(--wds-font-size-body-medium);
   --wds-card-subtitle-font-size: var(--wds-font-size-body-medium);
   --wds-card-subtitle-color: var(--wds-color-text-standard-secondary);
   --wds-card-border-radius: var(--wds-border-radius-surface-raised);
@@ -2353,6 +2494,9 @@
   --wds-page-header-subtitle-line-height: var(--wds-font-line-height-body-medium);
   --wds-message-modal-title-font-line-height: var(--wds-font-line-height-heading-2);
   --wds-message-modal-text-font-line-height: var(--wds-font-line-height-body-medium);
+  --wds-marketing-page-title-line-height: var(--wds-font-line-height-heading-1);
+  --wds-marketing-page-image-top-title-line-height: var(--wds-font-line-height-heading-1);
+  --wds-marketing-page-content-line-height: var(--wds-font-line-height-body-medium);
   --wds-marketing-layout-title-line-height-tiny: var(--wds-font-line-height-body-medium);
   --wds-marketing-layout-title-line-height-small: var(--wds-font-line-height-heading-3);
   --wds-marketing-layout-title-line-height-medium: var(--wds-font-line-height-heading-2);
@@ -2381,8 +2525,19 @@
   --wds-custom-modal-footnote-text-font-line-height: var(--wds-font-line-height-body-small);
   --wds-checkbox-label-font-line-height-small: var(--wds-font-line-height-body-small);
   --wds-checkbox-label-font-line-height-medium: var(--wds-font-line-height-body-medium);
+  --wds-carousel-controls-icon-fill-hover: var(--wds-icon-button-color-text-standard-secondary-hover);
+  --wds-carousel-controls-icon-fill-disabled: var(--wds-icon-button-color-text-standard-secondary-disabled);
+  --wds-carousel-controls-icon-fill-active: var(--wds-icon-button-color-text-standard-secondary-active);
+  --wds-carousel-controls-icon-fill: var(--wds-icon-button-color-text-standard-secondary);
+  --wds-carousel-controls-fill-hover: var(--wds-icon-button-color-fill-standard-secondary-hover);
+  --wds-carousel-controls-fill-active: var(--wds-icon-button-color-fill-standard-secondary-active);
   --wds-card-gallery-item-title-font-line-height-small: var(--wds-font-line-height-body-small);
   --wds-card-gallery-item-title-font-line-height-medium: var(--wds-font-line-height-heading-4);
+  --wds-card-gallery-item-subtitle-line-height-medium: var(--wds-font-line-height-body-small);
+  --wds-card-gallery-item-shadow-hover: var(--wds-shadow-surface-raised);
+  --wds-card-gallery-item-shadow: var(--wds-shadow-surface-raised);
+  --wds-card-gallery-item-secondary-action-line-height: var(--wds-font-line-height-body-medium);
+  --wds-card-gallery-item-action-button-line-height: var(--wds-font-line-height-body-medium);
   --wds-card-subtitle-line-height: var(--wds-font-line-height-body-medium);
   --wds-card-shadow: var(--wds-shadow-surface-raised);
   --wds-button-font-line-height-tiny: var(--wds-font-line-height-body-tiny);