@wix/design-system-tokens 1.223.0 → 1.224.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.
package/CHANGELOG.md CHANGED
@@ -1,3 +1,61 @@
1
+ ## 1.224.1
2
+
3
+ ### Minor Changes
4
+
5
+ - [#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.
6
+
7
+ - [#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.
8
+ - `--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.
9
+ - `--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.
10
+ - `--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.
11
+ - `--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.
12
+ - `--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.
13
+ - `--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.
14
+
15
+ No other tokens affected.
16
+
17
+ - [#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.
18
+ - `--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.
19
+ - `--wds-table-list-header-fill` fills the header: transparent in Harmony (odeditor) and Studio 2.0 (odeditor-dark), `--wds-color-fill-surface-standard` elsewhere.
20
+ - `--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.
21
+ - `--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.
22
+ - `--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.
23
+ - `--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.
24
+ - `--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.
25
+ - `--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.
26
+ - `--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.
27
+ - `--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.
28
+
29
+ No other tokens affected.
30
+
31
+ ### Patch Changes
32
+
33
+ - [#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.
34
+
35
+ - [#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).
36
+
37
+ - [#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`.
38
+
39
+ - [#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.
40
+
41
+ - [#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.
42
+
43
+ - [#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.
44
+
45
+ - [#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.
46
+
47
+ 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.
48
+
49
+ - [#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.
50
+
51
+ - [#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.
52
+
53
+ - [#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).
54
+
55
+ - [#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).
56
+
57
+ - [#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).
58
+
1
59
  ## 1.223.0
2
60
 
3
61
  ### Minor Changes
package/all.css CHANGED
@@ -296,6 +296,10 @@
296
296
  --wds-table-toolbar-divider-gap-group-start: 24px;
297
297
  --wds-table-toolbar-divider-gap: 12px;
298
298
  --wds-table-toolbar-button-gap: 6px;
299
+ --wds-table-action-cell-backdrop-opacity: 0;
300
+ --wds-table-sub-toolbar-padding-block-start: 9px;
301
+ --wds-table-sub-toolbar-padding-block-end: 9px;
302
+ --wds-table-cell-padding-inline: 12px;
299
303
  --wds-swatches-swatch-active-border-radius-small: 5px;
300
304
  --wds-swatches-swatch-active-border-radius-medium: 9px;
301
305
  --wds-status-toast-width: 600px;
@@ -330,6 +334,7 @@
330
334
  --wds-sidebar-divider-padding-inline: 20px;
331
335
  --wds-sidebar-divider-fill-dark-default: #42454C;
332
336
  --wds-sidebar-clear-button-fill: #5a5d63;
337
+ --wds-sidebar-border-inner-fill: transparent;
333
338
  --wds-side-panel-standard-shadow: none;
334
339
  --wds-side-panel-standard-overflow: visible;
335
340
  --wds-side-panel-floating-max-height: 576px;
@@ -363,7 +368,18 @@
363
368
  --wds-marketing-page-footer-grid-column: span 12;
364
369
  --wds-marketing-page-footer-divider-display: block;
365
370
  --wds-marketing-layout-title-font-size-tiny: 20px;
371
+ --wds-marketing-layout-min-height-tiny: auto;
372
+ --wds-marketing-layout-min-height-small: auto;
373
+ --wds-marketing-layout-min-height-medium: auto;
374
+ --wds-marketing-layout-image-wrapper-width: auto;
375
+ --wds-marketing-layout-image-wrapper-flex: 0 1 auto;
376
+ --wds-marketing-layout-image-wrapper-contain: none;
377
+ --wds-marketing-layout-image-width: 100%;
378
+ --wds-marketing-layout-image-object-fit: fill;
379
+ --wds-marketing-layout-image-height: auto;
366
380
  --wds-marketing-layout-image-border-radius: 0px;
381
+ --wds-marketing-layout-image-aspect-ratio: auto;
382
+ --wds-marketing-layout-description-max-width: none;
367
383
  --wds-marketing-layout-badge-top: 9px;
368
384
  --wds-marketing-layout-badge-side: -3px;
369
385
  --wds-marketing-layout-badge-position: absolute;
@@ -371,6 +387,7 @@
371
387
  --wds-marketing-layout-badge-offset-small: 12px;
372
388
  --wds-marketing-layout-badge-offset-medium: 12px;
373
389
  --wds-marketing-layout-badge-gap: 0px;
390
+ --wds-marketing-layout-actions-alignment-inverted: auto;
374
391
  --wds-loader-stroke-width-tiny: 3px;
375
392
  --wds-loader-stroke-width-small: 4px;
376
393
  --wds-loader-stroke-width-medium: 4px;
@@ -416,6 +433,23 @@
416
433
  --wds-close-button-standard-filled-fill: transparent;
417
434
  --wds-circular-progress-bar-border-width: 4px;
418
435
  --wds-checkbox-size: 16px;
436
+ --wds-carousel-gradient-opacity: 50%;
437
+ --wds-carousel-dots-height: 4px;
438
+ --wds-carousel-dots-gap-bottom-shift: 0.5;
439
+ --wds-carousel-dots-gap-bottom: 14px;
440
+ --wds-carousel-dots-border-radius: 2px;
441
+ --wds-carousel-controls-shadow-hover: none;
442
+ --wds-carousel-controls-shadow-default: none;
443
+ --wds-carousel-controls-shadow-active: none;
444
+ --wds-carousel-controls-offset-sides-gradient: 12px;
445
+ --wds-carousel-controls-offset-sides: 0px;
446
+ --wds-carousel-controls-offset-overlay: 12px;
447
+ --wds-carousel-controls-offset-bottom-gradient: 12px;
448
+ --wds-carousel-controls-offset-bottom: 0px;
449
+ --wds-carousel-controls-bottom-shift: 0;
450
+ --wds-carousel-controls-bottom-offset-dots: 14px;
451
+ --wds-carousel-controls-border-disabled: solid 1px var(--wds-icon-button-color-border-standard-secondary-disabled);
452
+ --wds-carousel-controls-border: solid 1px var(--wds-icon-button-color-border-standard-secondary);
419
453
  --wds-card-gallery-item-title-gap: 0px;
420
454
  --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);
421
455
  --wds-card-gallery-item-overlay-backdrop-filter: none;
@@ -1057,6 +1091,7 @@
1057
1091
  --wds-table-list-item-indentation-level-3: var(--wds-space-600);
1058
1092
  --wds-table-list-item-indentation-level-2: var(--wds-space-200);
1059
1093
  --wds-table-list-item-gap: var(--wds-space-400);
1094
+ --wds-table-list-item-fill-overlay: var(--wds-color-blue-600);
1060
1095
  --wds-table-list-item-fill-hover-draggable: var(--wds-color-blue-500);
1061
1096
  --wds-table-list-item-fill-highlight: var(--wds-color-blue-600);
1062
1097
  --wds-table-list-item-controls-padding-medium: var(--wds-space-300);
@@ -1076,6 +1111,7 @@
1076
1111
  --wds-table-action-cell-primary-action-gap-small: var(--wds-space-200);
1077
1112
  --wds-table-action-cell-primary-action-gap-medium: var(--wds-space-200);
1078
1113
  --wds-table-toolbar-padding-horizontal: var(--wds-space-400);
1114
+ --wds-table-header-font-weight: var(--wds-font-weight-regular);
1079
1115
  --wds-swatches-swatch-size-tiny: var(--wds-space-400);
1080
1116
  --wds-swatches-swatch-size-small: var(--wds-space-500);
1081
1117
  --wds-swatches-swatch-size-medium: var(--wds-space-600);
@@ -1109,6 +1145,7 @@
1109
1145
  --wds-skeleton-border-radius-rectangle: var(--wds-border-radius-300);
1110
1146
  --wds-skeleton-border-radius-line: var(--wds-border-radius-full);
1111
1147
  --wds-skeleton-border-radius-circle: var(--wds-border-radius-full);
1148
+ --wds-sidebar-submenu-level-2-padding-bottom: var(--wds-space-100);
1112
1149
  --wds-sidebar-padding-top: var(--wds-space-0);
1113
1150
  --wds-sidebar-padding-start: var(--wds-space-0);
1114
1151
  --wds-sidebar-padding-end: var(--wds-space-0);
@@ -1170,6 +1207,8 @@
1170
1207
  --wds-sidebar-item-level-1-fill-light-active: var(--wds-color-blue-300);
1171
1208
  --wds-sidebar-item-content-gap: var(--wds-space-100);
1172
1209
  --wds-sidebar-header-margin-bottom: var(--wds-space-200);
1210
+ --wds-sidebar-footer-fade-height: var(--wds-space-0);
1211
+ --wds-sidebar-fill-dark: var(--wds-sidebar-item-level-1-fill-dark-default);
1173
1212
  --wds-sidebar-divider-padding-bottom: var(--wds-space-150);
1174
1213
  --wds-sidebar-divider-fill-neutral-default: var(--wds-color-black-550);
1175
1214
  --wds-sidebar-divider-fill-light-default: var(--wds-color-black-550);
@@ -1364,6 +1403,7 @@
1364
1403
  --wds-marketing-layout-title-gap-small: var(--wds-space-100);
1365
1404
  --wds-marketing-layout-title-gap-medium: var(--wds-space-200);
1366
1405
  --wds-marketing-layout-title-font-weight-tiny: var(--wds-font-weight-bold);
1406
+ --wds-marketing-layout-title-font-family-tiny: var(--wds-font-family-default);
1367
1407
  --wds-marketing-layout-padding-vertical-tiny: var(--wds-space-300);
1368
1408
  --wds-marketing-layout-padding-vertical-small: var(--wds-space-400);
1369
1409
  --wds-marketing-layout-padding-vertical-medium: var(--wds-space-400);
@@ -1575,7 +1615,18 @@
1575
1615
  --wds-checkbox-group-gap-vertical: var(--wds-space-200);
1576
1616
  --wds-checkbox-border-radius: var(--wds-border-radius-200);
1577
1617
  --wds-checkbox-border-active-hover: var(--wds-color-black-100-transparent-0);
1618
+ --wds-carousel-gradient-color: var(--wds-color-white);
1578
1619
  --wds-carousel-dots-width: var(--wds-space-200);
1620
+ --wds-carousel-dots-gap: var(--wds-space-400);
1621
+ --wds-carousel-dots-fill-hover: var(--wds-color-blue-200);
1622
+ --wds-carousel-dots-fill-active: var(--wds-color-blue-0);
1623
+ --wds-carousel-dots-fill: var(--wds-color-blue-300);
1624
+ --wds-carousel-controls-gap-tiny: var(--wds-space-400);
1625
+ --wds-carousel-controls-gap-small: var(--wds-space-300);
1626
+ --wds-carousel-controls-gap-medium: var(--wds-space-200);
1627
+ --wds-carousel-controls-gap-large: var(--wds-space-200);
1628
+ --wds-carousel-controls-bottom-offset-no-dots: var(--wds-carousel-dots-height);
1629
+ --wds-carousel-controls-border-radius: var(--wds-border-radius-full);
1579
1630
  --wds-card-gallery-item-title-font-weight-small: var(--wds-font-weight-medium);
1580
1631
  --wds-card-gallery-item-title-font-weight-medium: var(--wds-font-weight-medium);
1581
1632
  --wds-card-gallery-item-title-font-letter-spacing: var(--wds-font-letter-spacing-0);
@@ -1607,6 +1658,8 @@
1607
1658
  --wds-card-header-padding-vertical: var(--wds-space-300);
1608
1659
  --wds-card-header-padding-horizontal: var(--wds-space-400);
1609
1660
  --wds-card-header-divider-width: var(--wds-border-width-none);
1661
+ --wds-card-controls-padding-vertical: var(--wds-space-300);
1662
+ --wds-card-controls-padding-horizontal: var(--wds-space-400);
1610
1663
  --wds-card-content-paddings-vertical: var(--wds-space-300);
1611
1664
  --wds-card-content-paddings-horizontal: var(--wds-space-400);
1612
1665
  --wds-card-content-padding-medium-top: var(--wds-space-400);
@@ -1874,6 +1927,8 @@
1874
1927
  --wds-table-list-header-fill: var(--wds-color-fill-surface-standard);
1875
1928
  --wds-table-list-header-divider-fill-top: var(--wds-color-border-standard-primary);
1876
1929
  --wds-table-list-header-divider-fill-bottom: var(--wds-color-border-standard-primary);
1930
+ --wds-table-row-divider-fill: var(--wds-color-border-dark-secondary);
1931
+ --wds-table-region-divider-fill: var(--wds-color-border-dark-secondary);
1877
1932
  --wds-swatches-fill-disabled: var(--wds-color-fill-standard-secondary-disabled);
1878
1933
  --wds-swatches-fill-border-selected: var(--wds-color-border-standard-secondary-active);
1879
1934
  --wds-swatches-fill-border-no-value-dash: var(--wds-color-fill-destructive-primary);
@@ -1891,6 +1946,9 @@
1891
1946
  --wds-sidebar-item-text-light-disabled: var(--wds-color-text-disabled);
1892
1947
  --wds-sidebar-item-text-light-default: var(--wds-color-text-standard-secondary);
1893
1948
  --wds-sidebar-header-text-dark-default: var(--wds-color-text-standard-primary-light);
1949
+ --wds-sidebar-fill-neutral: var(--wds-sidebar-item-level-1-fill-neutral-default);
1950
+ --wds-sidebar-fill-light: var(--wds-sidebar-item-level-1-fill-light-default);
1951
+ --wds-sidebar-border-outer-fill: var(--wds-sidebar-divider-fill-light-default);
1894
1952
  --wds-side-panel-title-font-size: var(--wds-font-size-heading-3);
1895
1953
  --wds-side-panel-subtitle-font-size: var(--wds-font-size-body-medium);
1896
1954
  --wds-side-panel-subtitle-fill: var(--wds-color-text-standard-secondary);
@@ -2065,6 +2123,7 @@
2065
2123
  --wds-input-border-color-disabled: var(--wds-color-border-standard-secondary-disabled);
2066
2124
  --wds-input-border-color: var(--wds-color-border-standard-secondary);
2067
2125
  --wds-input-background-fill-readonly: var(--wds-color-fill-standard-tertiary-readonly);
2126
+ --wds-input-background-fill-on-stage: var(--wds-color-fill-dark-secondary);
2068
2127
  --wds-input-background-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
2069
2128
  --wds-input-background-fill-disabled: var(--wds-color-fill-standard-tertiary-disabled);
2070
2129
  --wds-input-background-fill-default: var(--wds-color-fill-standard-tertiary);
@@ -2248,6 +2307,12 @@
2248
2307
  --wds-checkbox-border-active-disabled: var(--wds-color-border-standard-secondary-disabled);
2249
2308
  --wds-checkbox-border-active: var(--wds-color-border-standard-secondary-active);
2250
2309
  --wds-checkbox-border: var(--wds-color-border-standard-secondary-active);
2310
+ --wds-carousel-gradient-width: var(--wds-button-size-medium);
2311
+ --wds-carousel-controls-size-tiny: var(--wds-button-size-tiny);
2312
+ --wds-carousel-controls-size-small: var(--wds-button-size-small);
2313
+ --wds-carousel-controls-size-medium: var(--wds-button-size-medium);
2314
+ --wds-carousel-controls-size-large: var(--wds-button-size-large);
2315
+ --wds-carousel-controls-shadow-disabled: var(--wds-shadow-300);
2251
2316
  --wds-carousel-controls-shadow: var(--wds-shadow-300);
2252
2317
  --wds-card-gallery-item-title-font-size-medium: var(--wds-font-size-body-small);
2253
2318
  --wds-card-gallery-item-title-font-heading-weight-medium: var(--wds-font-weight-heading-4);
@@ -2460,6 +2525,12 @@
2460
2525
  --wds-custom-modal-footnote-text-font-line-height: var(--wds-font-line-height-body-small);
2461
2526
  --wds-checkbox-label-font-line-height-small: var(--wds-font-line-height-body-small);
2462
2527
  --wds-checkbox-label-font-line-height-medium: var(--wds-font-line-height-body-medium);
2528
+ --wds-carousel-controls-icon-fill-hover: var(--wds-icon-button-color-text-standard-secondary-hover);
2529
+ --wds-carousel-controls-icon-fill-disabled: var(--wds-icon-button-color-text-standard-secondary-disabled);
2530
+ --wds-carousel-controls-icon-fill-active: var(--wds-icon-button-color-text-standard-secondary-active);
2531
+ --wds-carousel-controls-icon-fill: var(--wds-icon-button-color-text-standard-secondary);
2532
+ --wds-carousel-controls-fill-hover: var(--wds-icon-button-color-fill-standard-secondary-hover);
2533
+ --wds-carousel-controls-fill-active: var(--wds-icon-button-color-fill-standard-secondary-active);
2463
2534
  --wds-card-gallery-item-title-font-line-height-small: var(--wds-font-line-height-body-small);
2464
2535
  --wds-card-gallery-item-title-font-line-height-medium: var(--wds-font-line-height-heading-4);
2465
2536
  --wds-card-gallery-item-subtitle-line-height-medium: var(--wds-font-line-height-body-small);
package/all.scss CHANGED
@@ -21,6 +21,10 @@
21
21
  --wds-table-toolbar-divider-gap-group-start: 24px;
22
22
  --wds-table-toolbar-divider-gap: 12px;
23
23
  --wds-table-toolbar-button-gap: 6px;
24
+ --wds-table-sub-toolbar-padding-block-start: 9px;
25
+ --wds-table-sub-toolbar-padding-block-end: 9px;
26
+ --wds-table-cell-padding-inline: 12px;
27
+ --wds-table-action-cell-backdrop-opacity: 0;
24
28
  --wds-swatches-swatch-active-border-radius-small: 5px;
25
29
  --wds-swatches-swatch-active-border-radius-medium: 9px;
26
30
  --wds-status-toast-width: 600px;
@@ -85,6 +89,7 @@
85
89
  --wds-sidebar-divider-padding-inline: 20px;
86
90
  --wds-sidebar-divider-fill-dark-default: #42454C;
87
91
  --wds-sidebar-clear-button-fill: #5a5d63;
92
+ --wds-sidebar-border-inner-fill: transparent;
88
93
  --wds-side-panel-standard-shadow: none;
89
94
  --wds-side-panel-standard-overflow: visible;
90
95
  --wds-side-panel-floating-max-height: 576px;
@@ -146,7 +151,18 @@
146
151
  --wds-marketing-page-footer-grid-column: span 12;
147
152
  --wds-marketing-page-footer-divider-display: block;
148
153
  --wds-marketing-layout-title-font-size-tiny: 20px;
154
+ --wds-marketing-layout-min-height-tiny: auto;
155
+ --wds-marketing-layout-min-height-small: auto;
156
+ --wds-marketing-layout-min-height-medium: auto;
157
+ --wds-marketing-layout-image-wrapper-width: auto;
158
+ --wds-marketing-layout-image-wrapper-flex: 0 1 auto;
159
+ --wds-marketing-layout-image-wrapper-contain: none;
160
+ --wds-marketing-layout-image-width: 100%;
161
+ --wds-marketing-layout-image-object-fit: fill;
162
+ --wds-marketing-layout-image-height: auto;
149
163
  --wds-marketing-layout-image-border-radius: 0px;
164
+ --wds-marketing-layout-image-aspect-ratio: auto;
165
+ --wds-marketing-layout-description-max-width: none;
150
166
  --wds-marketing-layout-badge-top: 9px;
151
167
  --wds-marketing-layout-badge-side: -3px;
152
168
  --wds-marketing-layout-badge-position: absolute;
@@ -154,6 +170,7 @@
154
170
  --wds-marketing-layout-badge-offset-small: 12px;
155
171
  --wds-marketing-layout-badge-offset-medium: 12px;
156
172
  --wds-marketing-layout-badge-gap: 0px;
173
+ --wds-marketing-layout-actions-alignment-inverted: auto;
157
174
  --wds-loader-stroke-width-tiny: 3px;
158
175
  --wds-loader-stroke-width-small: 4px;
159
176
  --wds-loader-stroke-width-medium: 4px;
@@ -389,6 +406,23 @@
389
406
  --wds-close-button-standard-filled-fill: transparent;
390
407
  --wds-circular-progress-bar-border-width: 4px;
391
408
  --wds-checkbox-size: 16px;
409
+ --wds-carousel-gradient-opacity: 50%;
410
+ --wds-carousel-dots-height: 4px;
411
+ --wds-carousel-dots-gap-bottom-shift: 0.5;
412
+ --wds-carousel-dots-gap-bottom: 14px;
413
+ --wds-carousel-dots-border-radius: 2px;
414
+ --wds-carousel-controls-shadow-hover: none;
415
+ --wds-carousel-controls-shadow-default: none;
416
+ --wds-carousel-controls-shadow-active: none;
417
+ --wds-carousel-controls-offset-sides-gradient: 12px;
418
+ --wds-carousel-controls-offset-sides: 0px;
419
+ --wds-carousel-controls-offset-overlay: 12px;
420
+ --wds-carousel-controls-offset-bottom-gradient: 12px;
421
+ --wds-carousel-controls-offset-bottom: 0px;
422
+ --wds-carousel-controls-bottom-shift: 0;
423
+ --wds-carousel-controls-bottom-offset-dots: 14px;
424
+ --wds-carousel-controls-border-disabled: solid 1px var(--wds-icon-button-color-border-standard-secondary-disabled);
425
+ --wds-carousel-controls-border: solid 1px var(--wds-icon-button-color-border-standard-secondary);
392
426
  --wds-card-header-suffix-align: center;
393
427
  --wds-card-gallery-item-title-gap: 0px;
394
428
  --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);
@@ -617,6 +651,7 @@
617
651
  --wds-table-list-item-indentation-level-3: var(--wds-space-600);
618
652
  --wds-table-list-item-indentation-level-2: var(--wds-space-200);
619
653
  --wds-table-list-item-gap: var(--wds-space-400);
654
+ --wds-table-list-item-fill-overlay: var(--wds-color-blue-600);
620
655
  --wds-table-list-item-fill-hover-draggable: var(--wds-color-blue-500);
621
656
  --wds-table-list-item-fill-highlight: var(--wds-color-blue-600);
622
657
  --wds-table-list-item-controls-padding-medium: var(--wds-space-300);
@@ -629,6 +664,7 @@
629
664
  --wds-table-list-header-min-height: var(--wds-space-700);
630
665
  --wds-table-list-header-checkbox-padding-right: var(--wds-space-200);
631
666
  --wds-table-list-header-checkbox-padding-left: var(--wds-space-100);
667
+ --wds-table-header-font-weight: var(--wds-font-weight-regular);
632
668
  --wds-table-action-cell-secondary-action-gap-tiny: var(--wds-space-100);
633
669
  --wds-table-action-cell-secondary-action-gap-small: var(--wds-space-200);
634
670
  --wds-table-action-cell-secondary-action-gap-medium: var(--wds-space-200);
@@ -682,6 +718,7 @@
682
718
  --wds-skeleton-border-radius-rectangle: var(--wds-border-radius-300);
683
719
  --wds-skeleton-border-radius-line: var(--wds-border-radius-full);
684
720
  --wds-skeleton-border-radius-circle: var(--wds-border-radius-full);
721
+ --wds-sidebar-submenu-level-2-padding-bottom: var(--wds-space-100);
685
722
  --wds-sidebar-padding-top: var(--wds-space-0);
686
723
  --wds-sidebar-padding-start: var(--wds-space-0);
687
724
  --wds-sidebar-padding-end: var(--wds-space-0);
@@ -743,6 +780,8 @@
743
780
  --wds-sidebar-item-level-1-fill-light-active: var(--wds-color-blue-300);
744
781
  --wds-sidebar-item-content-gap: var(--wds-space-100);
745
782
  --wds-sidebar-header-margin-bottom: var(--wds-space-200);
783
+ --wds-sidebar-footer-fade-height: var(--wds-space-0);
784
+ --wds-sidebar-fill-dark: var(--wds-sidebar-item-level-1-fill-dark-default);
746
785
  --wds-sidebar-divider-padding-bottom: var(--wds-space-150);
747
786
  --wds-sidebar-divider-fill-neutral-default: var(--wds-color-black-550);
748
787
  --wds-sidebar-divider-fill-light-default: var(--wds-color-black-550);
@@ -1011,6 +1050,7 @@
1011
1050
  --wds-marketing-layout-title-gap-small: var(--wds-space-100);
1012
1051
  --wds-marketing-layout-title-gap-medium: var(--wds-space-200);
1013
1052
  --wds-marketing-layout-title-font-weight-tiny: var(--wds-font-weight-bold);
1053
+ --wds-marketing-layout-title-font-family-tiny: var(--wds-font-family-default);
1014
1054
  --wds-marketing-layout-padding-vertical-tiny: var(--wds-space-300);
1015
1055
  --wds-marketing-layout-padding-vertical-small: var(--wds-space-400);
1016
1056
  --wds-marketing-layout-padding-vertical-medium: var(--wds-space-400);
@@ -1564,7 +1604,18 @@
1564
1604
  --wds-checkbox-group-gap-vertical: var(--wds-space-200);
1565
1605
  --wds-checkbox-border-radius: var(--wds-border-radius-200);
1566
1606
  --wds-checkbox-border-active-hover: var(--wds-color-black-100-transparent-0);
1607
+ --wds-carousel-gradient-color: var(--wds-color-white);
1567
1608
  --wds-carousel-dots-width: var(--wds-space-200);
1609
+ --wds-carousel-dots-gap: var(--wds-space-400);
1610
+ --wds-carousel-dots-fill-hover: var(--wds-color-blue-200);
1611
+ --wds-carousel-dots-fill-active: var(--wds-color-blue-0);
1612
+ --wds-carousel-dots-fill: var(--wds-color-blue-300);
1613
+ --wds-carousel-controls-gap-tiny: var(--wds-space-400);
1614
+ --wds-carousel-controls-gap-small: var(--wds-space-300);
1615
+ --wds-carousel-controls-gap-medium: var(--wds-space-200);
1616
+ --wds-carousel-controls-gap-large: var(--wds-space-200);
1617
+ --wds-carousel-controls-bottom-offset-no-dots: var(--wds-carousel-dots-height);
1618
+ --wds-carousel-controls-border-radius: var(--wds-border-radius-full);
1568
1619
  --wds-card-tab-padding-vertical-small: var(--wds-space-300);
1569
1620
  --wds-card-tab-padding-vertical-medium: var(--wds-space-300);
1570
1621
  --wds-card-tab-padding-horizontal-small: var(--wds-space-300);
@@ -1596,6 +1647,8 @@
1596
1647
  --wds-card-gallery-item-action-button-padding-vertical: var(--wds-space-100);
1597
1648
  --wds-card-gallery-item-action-button-padding-horizontal: var(--wds-space-400);
1598
1649
  --wds-card-gallery-item-action-button-border-radius: var(--wds-border-radius-full);
1650
+ --wds-card-controls-padding-vertical: var(--wds-space-300);
1651
+ --wds-card-controls-padding-horizontal: var(--wds-space-400);
1599
1652
  --wds-card-content-paddings-vertical: var(--wds-space-300);
1600
1653
  --wds-card-content-paddings-horizontal: var(--wds-space-400);
1601
1654
  --wds-card-content-padding-medium-top: var(--wds-space-400);
@@ -1846,6 +1899,8 @@
1846
1899
  --wds-tabs-label-fill-disabled: var(--wds-color-text-disabled);
1847
1900
  --wds-tabs-label-fill-active: var(--wds-color-text-primary);
1848
1901
  --wds-tabs-label-fill: var(--wds-color-text-standard-primary);
1902
+ --wds-table-row-divider-fill: var(--wds-color-border-dark-secondary);
1903
+ --wds-table-region-divider-fill: var(--wds-color-border-dark-secondary);
1849
1904
  --wds-table-list-item-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
1850
1905
  --wds-table-list-item-fill-active: var(--wds-color-fill-standard-tertiary-active);
1851
1906
  --wds-table-list-item-fill: var(--wds-color-fill-standard-tertiary);
@@ -1873,6 +1928,9 @@
1873
1928
  --wds-sidebar-item-text-light-default: var(--wds-color-text-standard-secondary);
1874
1929
  --wds-sidebar-item-text-font-size: var(--wds-font-size-body-tiny);
1875
1930
  --wds-sidebar-header-text-dark-default: var(--wds-color-text-standard-primary-light);
1931
+ --wds-sidebar-fill-neutral: var(--wds-sidebar-item-level-1-fill-neutral-default);
1932
+ --wds-sidebar-fill-light: var(--wds-sidebar-item-level-1-fill-light-default);
1933
+ --wds-sidebar-border-outer-fill: var(--wds-sidebar-divider-fill-light-default);
1876
1934
  --wds-side-panel-title-font-size: var(--wds-font-size-heading-3);
1877
1935
  --wds-side-panel-subtitle-font-size: var(--wds-font-size-body-medium);
1878
1936
  --wds-side-panel-subtitle-fill: var(--wds-color-text-standard-secondary);
@@ -2054,6 +2112,7 @@
2054
2112
  --wds-input-border-color-disabled: var(--wds-color-border-standard-secondary-disabled);
2055
2113
  --wds-input-border-color: var(--wds-color-border-standard-secondary);
2056
2114
  --wds-input-background-fill-readonly: var(--wds-color-fill-standard-tertiary-readonly);
2115
+ --wds-input-background-fill-on-stage: var(--wds-color-fill-dark-secondary);
2057
2116
  --wds-input-background-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
2058
2117
  --wds-input-background-fill-disabled: var(--wds-color-fill-standard-tertiary-disabled);
2059
2118
  --wds-input-background-fill-default: var(--wds-color-fill-standard-tertiary);
@@ -2248,6 +2307,12 @@
2248
2307
  --wds-checkbox-border-active-disabled: var(--wds-color-border-standard-secondary-disabled);
2249
2308
  --wds-checkbox-border-active: var(--wds-color-border-standard-secondary-active);
2250
2309
  --wds-checkbox-border: var(--wds-color-border-standard-secondary-active);
2310
+ --wds-carousel-gradient-width: var(--wds-button-size-medium);
2311
+ --wds-carousel-controls-size-tiny: var(--wds-button-size-tiny);
2312
+ --wds-carousel-controls-size-small: var(--wds-button-size-small);
2313
+ --wds-carousel-controls-size-medium: var(--wds-button-size-medium);
2314
+ --wds-carousel-controls-size-large: var(--wds-button-size-large);
2315
+ --wds-carousel-controls-shadow-disabled: var(--wds-shadow-300);
2251
2316
  --wds-carousel-controls-shadow: var(--wds-shadow-300);
2252
2317
  --wds-card-subtitle-font-size: var(--wds-font-size-body-medium);
2253
2318
  --wds-card-subtitle-color: var(--wds-color-text-standard-secondary);
@@ -2460,6 +2525,12 @@
2460
2525
  --wds-custom-modal-footnote-text-font-line-height: var(--wds-font-line-height-body-small);
2461
2526
  --wds-checkbox-label-font-line-height-small: var(--wds-font-line-height-body-small);
2462
2527
  --wds-checkbox-label-font-line-height-medium: var(--wds-font-line-height-body-medium);
2528
+ --wds-carousel-controls-icon-fill-hover: var(--wds-icon-button-color-text-standard-secondary-hover);
2529
+ --wds-carousel-controls-icon-fill-disabled: var(--wds-icon-button-color-text-standard-secondary-disabled);
2530
+ --wds-carousel-controls-icon-fill-active: var(--wds-icon-button-color-text-standard-secondary-active);
2531
+ --wds-carousel-controls-icon-fill: var(--wds-icon-button-color-text-standard-secondary);
2532
+ --wds-carousel-controls-fill-hover: var(--wds-icon-button-color-fill-standard-secondary-hover);
2533
+ --wds-carousel-controls-fill-active: var(--wds-icon-button-color-fill-standard-secondary-active);
2463
2534
  --wds-card-subtitle-line-height: var(--wds-font-line-height-body-medium);
2464
2535
  --wds-card-shadow: var(--wds-shadow-surface-raised);
2465
2536
  --wds-card-gallery-item-title-font-line-height-small: var(--wds-font-line-height-body-small);