@wix/design-system-tokens 1.222.1 → 1.223.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 (27) hide show
  1. package/CHANGELOG.md +36 -0
  2. package/all.css +86 -2
  3. package/all.scss +86 -2
  4. package/all.st.css +170 -2
  5. package/component.st.css +168 -0
  6. package/odeditor/all.css +103 -14
  7. package/odeditor/all.scss +103 -14
  8. package/odeditor/all.st.css +192 -14
  9. package/odeditor/component.st.css +191 -13
  10. package/odeditor/semantic.st.css +1 -1
  11. package/odeditor-dark/all.css +98 -9
  12. package/odeditor-dark/all.scss +98 -9
  13. package/odeditor-dark/all.st.css +187 -9
  14. package/odeditor-dark/component.st.css +185 -7
  15. package/odeditor-dark/semantic.st.css +2 -2
  16. package/package.json +2 -2
  17. package/semantic.st.css +2 -2
  18. package/studio/all.css +85 -1
  19. package/studio/all.scss +85 -1
  20. package/studio/all.st.css +169 -1
  21. package/studio/component.st.css +168 -0
  22. package/studio/semantic.st.css +1 -1
  23. package/wixel/all.css +85 -1
  24. package/wixel/all.scss +85 -1
  25. package/wixel/all.st.css +169 -1
  26. package/wixel/component.st.css +168 -0
  27. package/wixel/semantic.st.css +1 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,39 @@
1
+ ## 1.223.0
2
+
3
+ ### Minor Changes
4
+
5
+ - [#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.
6
+
7
+ 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.
8
+
9
+ - [#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`.
10
+
11
+ - [#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.
12
+ - `--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.
13
+ - `--wds-table-list-header-fill` fills the header: transparent in Harmony (odeditor) and Studio 2.0 (odeditor-dark), `--wds-color-fill-surface-standard` elsewhere.
14
+ - `--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.
15
+ - `--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.
16
+ - `--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.
17
+ - `--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.
18
+ - `--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.
19
+ - `--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.
20
+ - `--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.
21
+ - `--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.
22
+
23
+ No other tokens affected.
24
+
25
+ ### Patch Changes
26
+
27
+ - [#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.
28
+
29
+ - [#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).
30
+
31
+ - [#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.
32
+
33
+ - [#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.
34
+
35
+ - [#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.
36
+
1
37
  ## 1.222.1
2
38
 
3
39
  ### Patch Changes
package/all.css CHANGED
@@ -29,8 +29,8 @@
29
29
  --wds-space-50: 3px;
30
30
  --wds-space-25: 1px;
31
31
  --wds-space-0: 0px;
32
- --wds-shadow-spread-secondary-raised: 0;
33
- --wds-shadow-focus-spread: 3;
32
+ --wds-shadow-spread-secondary-raised: 0px;
33
+ --wds-shadow-focus-spread: 3px;
34
34
  --wds-shadow-y-600: 20px;
35
35
  --wds-shadow-y-350: 3px;
36
36
  --wds-shadow-y-300: 12px;
@@ -346,6 +346,22 @@
346
346
  --wds-page-header-breadcrumbs-offset-large: -15px;
347
347
  --wds-page-header-back-button-gap: 8px;
348
348
  --wds-message-modal-close-button-fill: transparent;
349
+ --wds-marketing-page-overline-divider-margin-top: 17px;
350
+ --wds-marketing-page-overline-divider-display: block;
351
+ --wds-marketing-page-image-top-title-subtitle-gap: 16px;
352
+ --wds-marketing-page-image-top-image-padding: 24px;
353
+ --wds-marketing-page-image-top-image-border-radius: 8px;
354
+ --wds-marketing-page-image-top-footer-padding-bottom: 24px;
355
+ --wds-marketing-page-image-top-content-padding-top: 48px;
356
+ --wds-marketing-page-image-top-content-padding-horizontal: 48px;
357
+ --wds-marketing-page-image-top-content-padding-bottom: 48px;
358
+ --wds-marketing-page-image-top-content-column-padding-vertical: 6px;
359
+ --wds-marketing-page-image-top-columns-gap: 40px;
360
+ --wds-marketing-page-image-top-actions-gap: 38px;
361
+ --wds-marketing-page-image-grid-row: span 1;
362
+ --wds-marketing-page-image-display: block;
363
+ --wds-marketing-page-footer-grid-column: span 12;
364
+ --wds-marketing-page-footer-divider-display: block;
349
365
  --wds-marketing-layout-title-font-size-tiny: 20px;
350
366
  --wds-marketing-layout-image-border-radius: 0px;
351
367
  --wds-marketing-layout-badge-top: 9px;
@@ -379,12 +395,16 @@
379
395
  --wds-input-width-medium: 72px;
380
396
  --wds-input-width-large: 96px;
381
397
  --wds-input-width-fixed: 288px;
398
+ --wds-horizontal-scroll-button-text: #000624;
399
+ --wds-horizontal-scroll-button-fill-active: #CFD1DC;
400
+ --wds-horizontal-scroll-button-fill: #FFFFFF;
382
401
  --wds-google-preview-title-fill: #260AA8;
383
402
  --wds-google-preview-text-fill: #4D5156;
384
403
  --wds-google-preview-site-name-fill: #202124;
385
404
  --wds-google-preview-favicon-border-fill: #E6E6E6;
386
405
  --wds-google-preview-favicon-background-fill: #F1F3F4;
387
406
  --wds-editable-title-marker-line-style: dashed;
407
+ --wds-editable-title-marker-image: none;
388
408
  --wds-editable-title-marker-gap: 6px;
389
409
  --wds-custom-modal-close-button-fill: transparent;
390
410
  --wds-counter-badge-padding-horizontal-tiny: 4px;
@@ -396,6 +416,19 @@
396
416
  --wds-close-button-standard-filled-fill: transparent;
397
417
  --wds-circular-progress-bar-border-width: 4px;
398
418
  --wds-checkbox-size: 16px;
419
+ --wds-card-gallery-item-title-gap: 0px;
420
+ --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
+ --wds-card-gallery-item-overlay-backdrop-filter: none;
422
+ --wds-card-gallery-item-image-side-size-small: 30px;
423
+ --wds-card-gallery-item-image-side-size-medium: 40px;
424
+ --wds-card-gallery-item-drag-handle-gap: 12px;
425
+ --wds-card-gallery-item-base-shadow: none;
426
+ --wds-card-gallery-item-badge-offset-inline: -6px;
427
+ --wds-card-gallery-item-badge-offset-block: 12px;
428
+ --wds-card-gallery-item-actions-secondary-position: absolute;
429
+ --wds-card-gallery-item-actions-direction: row;
430
+ --wds-card-gallery-item-actions-align: stretch;
431
+ --wds-card-gallery-item-action-button-min-width: 84px;
399
432
  --wds-card-header-suffix-align: center;
400
433
  --wds-card-divider-opacity: 1;
401
434
  --wds-card-base-shadow: none;
@@ -1030,6 +1063,12 @@
1030
1063
  --wds-table-list-item-controls-gap-medium: var(--wds-space-200);
1031
1064
  --wds-table-list-item-checkbox-offset: var(--wds-space-0);
1032
1065
  --wds-table-list-item-border-radius: var(--wds-border-radius-0);
1066
+ --wds-table-list-header-padding-inline: var(--wds-space-0);
1067
+ --wds-table-list-header-option-margin-inline: var(--wds-space-100);
1068
+ --wds-table-list-header-option-gap: var(--wds-space-300);
1069
+ --wds-table-list-header-min-height: var(--wds-space-700);
1070
+ --wds-table-list-header-checkbox-padding-right: var(--wds-space-200);
1071
+ --wds-table-list-header-checkbox-padding-left: var(--wds-space-100);
1033
1072
  --wds-table-action-cell-secondary-action-gap-tiny: var(--wds-space-100);
1034
1073
  --wds-table-action-cell-secondary-action-gap-small: var(--wds-space-200);
1035
1074
  --wds-table-action-cell-secondary-action-gap-medium: var(--wds-space-200);
@@ -1266,6 +1305,7 @@
1266
1305
  --wds-page-section-padding-bottom-with-divider: var(--wds-space-0);
1267
1306
  --wds-page-section-padding-bottom: var(--wds-space-200);
1268
1307
  --wds-page-section-gap: var(--wds-space-0);
1308
+ --wds-page-header-title-padding-start: var(--wds-space-0);
1269
1309
  --wds-page-header-title-minimised-letter-spacing: var(--wds-font-letter-spacing-0);
1270
1310
  --wds-page-header-title-minimised-font-weight: var(--wds-font-weight-medium);
1271
1311
  --wds-page-header-title-actions-gap: var(--wds-space-0);
@@ -1275,7 +1315,9 @@
1275
1315
  --wds-page-header-padding-vertical: var(--wds-space-400);
1276
1316
  --wds-page-header-padding-horizontal-small: var(--wds-space-400);
1277
1317
  --wds-page-header-padding-horizontal: var(--wds-space-800);
1318
+ --wds-page-header-padding-bottom-with-tail: var(--wds-space-200);
1278
1319
  --wds-page-header-breadcrumbs-selected-font-weight: var(--wds-font-weight-medium);
1320
+ --wds-page-header-back-button-offset: var(--wds-space-0);
1279
1321
  --wds-notification-padding-vertical: var(--wds-space-150);
1280
1322
  --wds-notification-padding-horizontal: var(--wds-space-200);
1281
1323
  --wds-notification-fill-warning: var(--wds-color-yellow-100);
@@ -1302,10 +1344,22 @@
1302
1344
  --wds-message-modal-content-gap: var(--wds-space-200);
1303
1345
  --wds-message-modal-close-button-size: var(--wds-space-500);
1304
1346
  --wds-message-modal-close-button-icon-size: var(--wds-space-200);
1347
+ --wds-marketing-page-title-content-gap: var(--wds-space-400);
1305
1348
  --wds-marketing-page-paddings-vertical-medium: var(--wds-space-500);
1306
1349
  --wds-marketing-page-paddings-vertical-large: var(--wds-space-800);
1307
1350
  --wds-marketing-page-paddings-horizontal-medium: var(--wds-space-800);
1308
1351
  --wds-marketing-page-paddings-horizontal-large: var(--wds-space-1500);
1352
+ --wds-marketing-page-overline-title-gap: var(--wds-space-200);
1353
+ --wds-marketing-page-image-padding-vertical-medium: var(--wds-space-500);
1354
+ --wds-marketing-page-image-padding-vertical-large: var(--wds-space-800);
1355
+ --wds-marketing-page-image-padding-end-medium: var(--wds-space-800);
1356
+ --wds-marketing-page-image-padding-end-large: var(--wds-space-1500);
1357
+ --wds-marketing-page-footer-padding-bottom: var(--wds-space-0);
1358
+ --wds-marketing-page-content-padding-start-medium: var(--wds-space-800);
1359
+ --wds-marketing-page-content-padding-start-large: var(--wds-space-1500);
1360
+ --wds-marketing-page-content-padding-end-medium: var(--wds-space-800);
1361
+ --wds-marketing-page-content-padding-end-large: var(--wds-space-1500);
1362
+ --wds-marketing-page-content-actions-gap: var(--wds-space-700);
1309
1363
  --wds-marketing-layout-title-gap-tiny: var(--wds-space-100);
1310
1364
  --wds-marketing-layout-title-gap-small: var(--wds-space-100);
1311
1365
  --wds-marketing-layout-title-gap-medium: var(--wds-space-200);
@@ -1522,19 +1576,29 @@
1522
1576
  --wds-checkbox-border-radius: var(--wds-border-radius-200);
1523
1577
  --wds-checkbox-border-active-hover: var(--wds-color-black-100-transparent-0);
1524
1578
  --wds-carousel-dots-width: var(--wds-space-200);
1579
+ --wds-card-gallery-item-title-font-weight-small: var(--wds-font-weight-medium);
1525
1580
  --wds-card-gallery-item-title-font-weight-medium: var(--wds-font-weight-medium);
1581
+ --wds-card-gallery-item-title-font-letter-spacing: var(--wds-font-letter-spacing-0);
1582
+ --wds-card-gallery-item-title-font-family: var(--wds-font-family-default);
1526
1583
  --wds-card-gallery-item-padding-vertical-small: var(--wds-space-200);
1527
1584
  --wds-card-gallery-item-padding-vertical-medium: var(--wds-space-300);
1528
1585
  --wds-card-gallery-item-padding-right-small: var(--wds-space-300);
1529
1586
  --wds-card-gallery-item-padding-right-medium: var(--wds-space-400);
1530
1587
  --wds-card-gallery-item-padding-left-small: var(--wds-space-200);
1531
1588
  --wds-card-gallery-item-padding-left-medium: var(--wds-space-300);
1589
+ --wds-card-gallery-item-outline-border-color-hover: var(--wds-color-blue-300);
1590
+ --wds-card-gallery-item-outline-border-color: var(--wds-color-blue-400);
1591
+ --wds-card-gallery-item-image-inset: var(--wds-space-0);
1532
1592
  --wds-card-gallery-item-image-border-radius-top: var(--wds-border-radius-400);
1533
1593
  --wds-card-gallery-item-image-border-radius-bottom: var(--wds-border-radius-0);
1534
1594
  --wds-card-gallery-item-content-margin-vertical: var(--wds-space-0);
1535
1595
  --wds-card-gallery-item-buttons-gap: var(--wds-space-100);
1536
1596
  --wds-card-gallery-item-border-radius-100: var(--wds-border-radius-400);
1537
1597
  --wds-card-gallery-item-border-radius-0: var(--wds-border-radius-0);
1598
+ --wds-card-gallery-item-action-button-size: var(--wds-space-600);
1599
+ --wds-card-gallery-item-action-button-padding-vertical: var(--wds-space-100);
1600
+ --wds-card-gallery-item-action-button-padding-horizontal: var(--wds-space-400);
1601
+ --wds-card-gallery-item-action-button-border-radius: var(--wds-border-radius-full);
1538
1602
  --wds-card-tab-padding-vertical-small: var(--wds-space-300);
1539
1603
  --wds-card-tab-padding-vertical-medium: var(--wds-space-300);
1540
1604
  --wds-card-tab-padding-horizontal-small: var(--wds-space-300);
@@ -1806,6 +1870,10 @@
1806
1870
  --wds-table-list-item-drag-handle-color-hover: var(--wds-color-fill-standard-primary);
1807
1871
  --wds-table-list-item-drag-handle-color: var(--wds-color-text-primary);
1808
1872
  --wds-table-list-item-border-color: var(--wds-color-border-standard-secondary);
1873
+ --wds-table-list-header-icon-fill: var(--wds-color-text-primary);
1874
+ --wds-table-list-header-fill: var(--wds-color-fill-surface-standard);
1875
+ --wds-table-list-header-divider-fill-top: var(--wds-color-border-standard-primary);
1876
+ --wds-table-list-header-divider-fill-bottom: var(--wds-color-border-standard-primary);
1809
1877
  --wds-swatches-fill-disabled: var(--wds-color-fill-standard-secondary-disabled);
1810
1878
  --wds-swatches-fill-border-selected: var(--wds-color-border-standard-secondary-active);
1811
1879
  --wds-swatches-fill-border-no-value-dash: var(--wds-color-fill-destructive-primary);
@@ -1915,6 +1983,9 @@
1915
1983
  --wds-multiselect-icon-fill: var(--wds-color-text-primary);
1916
1984
  --wds-message-modal-title-font-size: var(--wds-font-size-heading-2);
1917
1985
  --wds-message-modal-text-font-size: var(--wds-font-size-body-medium);
1986
+ --wds-marketing-page-title-font-weight: var(--wds-font-weight-heading-1);
1987
+ --wds-marketing-page-subtitle-fill: var(--wds-color-text-standard-primary);
1988
+ --wds-marketing-page-content-font-size: var(--wds-font-size-body-medium);
1918
1989
  --wds-marketing-layout-title-font-weight-small: var(--wds-font-weight-heading-3);
1919
1990
  --wds-marketing-layout-title-font-weight-medium: var(--wds-font-weight-heading-2);
1920
1991
  --wds-marketing-layout-title-font-size-small: var(--wds-font-size-heading-3);
@@ -2179,10 +2250,15 @@
2179
2250
  --wds-checkbox-border: var(--wds-color-border-standard-secondary-active);
2180
2251
  --wds-carousel-controls-shadow: var(--wds-shadow-300);
2181
2252
  --wds-card-gallery-item-title-font-size-medium: var(--wds-font-size-body-small);
2253
+ --wds-card-gallery-item-title-font-heading-weight-medium: var(--wds-font-weight-heading-4);
2254
+ --wds-card-gallery-item-title-font-heading-letter-spacing-medium: var(--wds-font-letter-spacing-heading-4);
2182
2255
  --wds-card-gallery-item-subtitle-side-font-size-medium: var(--wds-font-size-body-tiny);
2183
2256
  --wds-card-gallery-item-subtitle-font-size-medium: var(--wds-font-size-body-small);
2257
+ --wds-card-gallery-item-secondary-action-font-size: var(--wds-font-size-body-medium);
2258
+ --wds-card-gallery-item-overlay-hover-fill: var(--wds-color-fill-transparent-primary);
2184
2259
  --wds-card-gallery-item-overlay-fill: var(--wds-color-fill-transparent-primary);
2185
2260
  --wds-card-gallery-item-fill: var(--wds-color-fill-surface-default);
2261
+ --wds-card-gallery-item-action-button-font-size: var(--wds-font-size-body-medium);
2186
2262
  --wds-card-subtitle-font-size: var(--wds-font-size-body-medium);
2187
2263
  --wds-card-subtitle-color: var(--wds-color-text-standard-secondary);
2188
2264
  --wds-card-border-radius: var(--wds-border-radius-surface-raised);
@@ -2353,6 +2429,9 @@
2353
2429
  --wds-page-header-subtitle-line-height: var(--wds-font-line-height-body-medium);
2354
2430
  --wds-message-modal-title-font-line-height: var(--wds-font-line-height-heading-2);
2355
2431
  --wds-message-modal-text-font-line-height: var(--wds-font-line-height-body-medium);
2432
+ --wds-marketing-page-title-line-height: var(--wds-font-line-height-heading-1);
2433
+ --wds-marketing-page-image-top-title-line-height: var(--wds-font-line-height-heading-1);
2434
+ --wds-marketing-page-content-line-height: var(--wds-font-line-height-body-medium);
2356
2435
  --wds-marketing-layout-title-line-height-tiny: var(--wds-font-line-height-body-medium);
2357
2436
  --wds-marketing-layout-title-line-height-small: var(--wds-font-line-height-heading-3);
2358
2437
  --wds-marketing-layout-title-line-height-medium: var(--wds-font-line-height-heading-2);
@@ -2383,6 +2462,11 @@
2383
2462
  --wds-checkbox-label-font-line-height-medium: var(--wds-font-line-height-body-medium);
2384
2463
  --wds-card-gallery-item-title-font-line-height-small: var(--wds-font-line-height-body-small);
2385
2464
  --wds-card-gallery-item-title-font-line-height-medium: var(--wds-font-line-height-heading-4);
2465
+ --wds-card-gallery-item-subtitle-line-height-medium: var(--wds-font-line-height-body-small);
2466
+ --wds-card-gallery-item-shadow-hover: var(--wds-shadow-surface-raised);
2467
+ --wds-card-gallery-item-shadow: var(--wds-shadow-surface-raised);
2468
+ --wds-card-gallery-item-secondary-action-line-height: var(--wds-font-line-height-body-medium);
2469
+ --wds-card-gallery-item-action-button-line-height: var(--wds-font-line-height-body-medium);
2386
2470
  --wds-card-subtitle-line-height: var(--wds-font-line-height-body-medium);
2387
2471
  --wds-card-shadow: var(--wds-shadow-surface-raised);
2388
2472
  --wds-button-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
package/all.scss CHANGED
@@ -102,8 +102,8 @@
102
102
  --wds-shadow-x-50: 3px;
103
103
  --wds-shadow-x-25: 2px;
104
104
  --wds-shadow-x-0: 0px;
105
- --wds-shadow-spread-secondary-raised: 0;
106
- --wds-shadow-focus-spread: 3;
105
+ --wds-shadow-spread-secondary-raised: 0px;
106
+ --wds-shadow-focus-spread: 3px;
107
107
  --wds-shadow-blur-800: 36px;
108
108
  --wds-shadow-blur-500: 24px;
109
109
  --wds-shadow-blur-400: 24px;
@@ -129,6 +129,22 @@
129
129
  --wds-page-header-breadcrumbs-offset-large: -15px;
130
130
  --wds-page-header-back-button-gap: 8px;
131
131
  --wds-message-modal-close-button-fill: transparent;
132
+ --wds-marketing-page-overline-divider-margin-top: 17px;
133
+ --wds-marketing-page-overline-divider-display: block;
134
+ --wds-marketing-page-image-top-title-subtitle-gap: 16px;
135
+ --wds-marketing-page-image-top-image-padding: 24px;
136
+ --wds-marketing-page-image-top-image-border-radius: 8px;
137
+ --wds-marketing-page-image-top-footer-padding-bottom: 24px;
138
+ --wds-marketing-page-image-top-content-padding-top: 48px;
139
+ --wds-marketing-page-image-top-content-padding-horizontal: 48px;
140
+ --wds-marketing-page-image-top-content-padding-bottom: 48px;
141
+ --wds-marketing-page-image-top-content-column-padding-vertical: 6px;
142
+ --wds-marketing-page-image-top-columns-gap: 40px;
143
+ --wds-marketing-page-image-top-actions-gap: 38px;
144
+ --wds-marketing-page-image-grid-row: span 1;
145
+ --wds-marketing-page-image-display: block;
146
+ --wds-marketing-page-footer-grid-column: span 12;
147
+ --wds-marketing-page-footer-divider-display: block;
132
148
  --wds-marketing-layout-title-font-size-tiny: 20px;
133
149
  --wds-marketing-layout-image-border-radius: 0px;
134
150
  --wds-marketing-layout-badge-top: 9px;
@@ -162,6 +178,9 @@
162
178
  --wds-input-width-medium: 72px;
163
179
  --wds-input-width-large: 96px;
164
180
  --wds-input-width-fixed: 288px;
181
+ --wds-horizontal-scroll-button-text: #000624;
182
+ --wds-horizontal-scroll-button-fill-active: #CFD1DC;
183
+ --wds-horizontal-scroll-button-fill: #FFFFFF;
165
184
  --wds-google-preview-title-fill: #260AA8;
166
185
  --wds-google-preview-text-fill: #4D5156;
167
186
  --wds-google-preview-site-name-fill: #202124;
@@ -185,6 +204,7 @@
185
204
  --wds-font-family-display: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
186
205
  --wds-font-family-default: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
187
206
  --wds-editable-title-marker-line-style: dashed;
207
+ --wds-editable-title-marker-image: none;
188
208
  --wds-editable-title-marker-gap: 6px;
189
209
  --wds-custom-modal-close-button-fill: transparent;
190
210
  --wds-counter-badge-padding-horizontal-tiny: 4px;
@@ -370,6 +390,19 @@
370
390
  --wds-circular-progress-bar-border-width: 4px;
371
391
  --wds-checkbox-size: 16px;
372
392
  --wds-card-header-suffix-align: center;
393
+ --wds-card-gallery-item-title-gap: 0px;
394
+ --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);
395
+ --wds-card-gallery-item-overlay-backdrop-filter: none;
396
+ --wds-card-gallery-item-image-side-size-small: 30px;
397
+ --wds-card-gallery-item-image-side-size-medium: 40px;
398
+ --wds-card-gallery-item-drag-handle-gap: 12px;
399
+ --wds-card-gallery-item-base-shadow: none;
400
+ --wds-card-gallery-item-badge-offset-inline: -6px;
401
+ --wds-card-gallery-item-badge-offset-block: 12px;
402
+ --wds-card-gallery-item-actions-secondary-position: absolute;
403
+ --wds-card-gallery-item-actions-direction: row;
404
+ --wds-card-gallery-item-actions-align: stretch;
405
+ --wds-card-gallery-item-action-button-min-width: 84px;
373
406
  --wds-card-divider-opacity: 1;
374
407
  --wds-card-base-shadow: none;
375
408
  --wds-button-outline-hover: transparent;
@@ -590,6 +623,12 @@
590
623
  --wds-table-list-item-controls-gap-medium: var(--wds-space-200);
591
624
  --wds-table-list-item-checkbox-offset: var(--wds-space-0);
592
625
  --wds-table-list-item-border-radius: var(--wds-border-radius-0);
626
+ --wds-table-list-header-padding-inline: var(--wds-space-0);
627
+ --wds-table-list-header-option-margin-inline: var(--wds-space-100);
628
+ --wds-table-list-header-option-gap: var(--wds-space-300);
629
+ --wds-table-list-header-min-height: var(--wds-space-700);
630
+ --wds-table-list-header-checkbox-padding-right: var(--wds-space-200);
631
+ --wds-table-list-header-checkbox-padding-left: var(--wds-space-100);
593
632
  --wds-table-action-cell-secondary-action-gap-tiny: var(--wds-space-100);
594
633
  --wds-table-action-cell-secondary-action-gap-small: var(--wds-space-200);
595
634
  --wds-table-action-cell-secondary-action-gap-medium: var(--wds-space-200);
@@ -913,6 +952,7 @@
913
952
  --wds-page-section-padding-bottom-with-divider: var(--wds-space-0);
914
953
  --wds-page-section-padding-bottom: var(--wds-space-200);
915
954
  --wds-page-section-gap: var(--wds-space-0);
955
+ --wds-page-header-title-padding-start: var(--wds-space-0);
916
956
  --wds-page-header-title-minimised-letter-spacing: var(--wds-font-letter-spacing-0);
917
957
  --wds-page-header-title-minimised-font-weight: var(--wds-font-weight-medium);
918
958
  --wds-page-header-title-actions-gap: var(--wds-space-0);
@@ -922,7 +962,9 @@
922
962
  --wds-page-header-padding-vertical: var(--wds-space-400);
923
963
  --wds-page-header-padding-horizontal-small: var(--wds-space-400);
924
964
  --wds-page-header-padding-horizontal: var(--wds-space-800);
965
+ --wds-page-header-padding-bottom-with-tail: var(--wds-space-200);
925
966
  --wds-page-header-breadcrumbs-selected-font-weight: var(--wds-font-weight-medium);
967
+ --wds-page-header-back-button-offset: var(--wds-space-0);
926
968
  --wds-notification-padding-vertical: var(--wds-space-150);
927
969
  --wds-notification-padding-horizontal: var(--wds-space-200);
928
970
  --wds-notification-fill-warning: var(--wds-color-yellow-100);
@@ -949,10 +991,22 @@
949
991
  --wds-message-modal-content-gap: var(--wds-space-200);
950
992
  --wds-message-modal-close-button-size: var(--wds-space-500);
951
993
  --wds-message-modal-close-button-icon-size: var(--wds-space-200);
994
+ --wds-marketing-page-title-content-gap: var(--wds-space-400);
952
995
  --wds-marketing-page-paddings-vertical-medium: var(--wds-space-500);
953
996
  --wds-marketing-page-paddings-vertical-large: var(--wds-space-800);
954
997
  --wds-marketing-page-paddings-horizontal-medium: var(--wds-space-800);
955
998
  --wds-marketing-page-paddings-horizontal-large: var(--wds-space-1500);
999
+ --wds-marketing-page-overline-title-gap: var(--wds-space-200);
1000
+ --wds-marketing-page-image-padding-vertical-medium: var(--wds-space-500);
1001
+ --wds-marketing-page-image-padding-vertical-large: var(--wds-space-800);
1002
+ --wds-marketing-page-image-padding-end-medium: var(--wds-space-800);
1003
+ --wds-marketing-page-image-padding-end-large: var(--wds-space-1500);
1004
+ --wds-marketing-page-footer-padding-bottom: var(--wds-space-0);
1005
+ --wds-marketing-page-content-padding-start-medium: var(--wds-space-800);
1006
+ --wds-marketing-page-content-padding-start-large: var(--wds-space-1500);
1007
+ --wds-marketing-page-content-padding-end-medium: var(--wds-space-800);
1008
+ --wds-marketing-page-content-padding-end-large: var(--wds-space-1500);
1009
+ --wds-marketing-page-content-actions-gap: var(--wds-space-700);
956
1010
  --wds-marketing-layout-title-gap-tiny: var(--wds-space-100);
957
1011
  --wds-marketing-layout-title-gap-small: var(--wds-space-100);
958
1012
  --wds-marketing-layout-title-gap-medium: var(--wds-space-200);
@@ -1519,19 +1573,29 @@
1519
1573
  --wds-card-header-padding-vertical: var(--wds-space-300);
1520
1574
  --wds-card-header-padding-horizontal: var(--wds-space-400);
1521
1575
  --wds-card-header-divider-width: var(--wds-border-width-none);
1576
+ --wds-card-gallery-item-title-font-weight-small: var(--wds-font-weight-medium);
1522
1577
  --wds-card-gallery-item-title-font-weight-medium: var(--wds-font-weight-medium);
1578
+ --wds-card-gallery-item-title-font-letter-spacing: var(--wds-font-letter-spacing-0);
1579
+ --wds-card-gallery-item-title-font-family: var(--wds-font-family-default);
1523
1580
  --wds-card-gallery-item-padding-vertical-small: var(--wds-space-200);
1524
1581
  --wds-card-gallery-item-padding-vertical-medium: var(--wds-space-300);
1525
1582
  --wds-card-gallery-item-padding-right-small: var(--wds-space-300);
1526
1583
  --wds-card-gallery-item-padding-right-medium: var(--wds-space-400);
1527
1584
  --wds-card-gallery-item-padding-left-small: var(--wds-space-200);
1528
1585
  --wds-card-gallery-item-padding-left-medium: var(--wds-space-300);
1586
+ --wds-card-gallery-item-outline-border-color-hover: var(--wds-color-blue-300);
1587
+ --wds-card-gallery-item-outline-border-color: var(--wds-color-blue-400);
1588
+ --wds-card-gallery-item-image-inset: var(--wds-space-0);
1529
1589
  --wds-card-gallery-item-image-border-radius-top: var(--wds-border-radius-400);
1530
1590
  --wds-card-gallery-item-image-border-radius-bottom: var(--wds-border-radius-0);
1531
1591
  --wds-card-gallery-item-content-margin-vertical: var(--wds-space-0);
1532
1592
  --wds-card-gallery-item-buttons-gap: var(--wds-space-100);
1533
1593
  --wds-card-gallery-item-border-radius-100: var(--wds-border-radius-400);
1534
1594
  --wds-card-gallery-item-border-radius-0: var(--wds-border-radius-0);
1595
+ --wds-card-gallery-item-action-button-size: var(--wds-space-600);
1596
+ --wds-card-gallery-item-action-button-padding-vertical: var(--wds-space-100);
1597
+ --wds-card-gallery-item-action-button-padding-horizontal: var(--wds-space-400);
1598
+ --wds-card-gallery-item-action-button-border-radius: var(--wds-border-radius-full);
1535
1599
  --wds-card-content-paddings-vertical: var(--wds-space-300);
1536
1600
  --wds-card-content-paddings-horizontal: var(--wds-space-400);
1537
1601
  --wds-card-content-padding-medium-top: var(--wds-space-400);
@@ -1788,6 +1852,10 @@
1788
1852
  --wds-table-list-item-drag-handle-color-hover: var(--wds-color-fill-standard-primary);
1789
1853
  --wds-table-list-item-drag-handle-color: var(--wds-color-text-primary);
1790
1854
  --wds-table-list-item-border-color: var(--wds-color-border-standard-secondary);
1855
+ --wds-table-list-header-icon-fill: var(--wds-color-text-primary);
1856
+ --wds-table-list-header-fill: var(--wds-color-fill-surface-standard);
1857
+ --wds-table-list-header-divider-fill-top: var(--wds-color-border-standard-primary);
1858
+ --wds-table-list-header-divider-fill-bottom: var(--wds-color-border-standard-primary);
1791
1859
  --wds-swatches-fill-disabled: var(--wds-color-fill-standard-secondary-disabled);
1792
1860
  --wds-swatches-fill-border-selected: var(--wds-color-border-standard-secondary-active);
1793
1861
  --wds-swatches-fill-border-no-value-dash: var(--wds-color-fill-destructive-primary);
@@ -1904,6 +1972,9 @@
1904
1972
  --wds-multiselect-icon-fill: var(--wds-color-text-primary);
1905
1973
  --wds-message-modal-title-font-size: var(--wds-font-size-heading-2);
1906
1974
  --wds-message-modal-text-font-size: var(--wds-font-size-body-medium);
1975
+ --wds-marketing-page-title-font-weight: var(--wds-font-weight-heading-1);
1976
+ --wds-marketing-page-subtitle-fill: var(--wds-color-text-standard-primary);
1977
+ --wds-marketing-page-content-font-size: var(--wds-font-size-body-medium);
1907
1978
  --wds-marketing-layout-title-font-weight-small: var(--wds-font-weight-heading-3);
1908
1979
  --wds-marketing-layout-title-font-weight-medium: var(--wds-font-weight-heading-2);
1909
1980
  --wds-marketing-layout-title-font-size-small: var(--wds-font-size-heading-3);
@@ -2181,10 +2252,15 @@
2181
2252
  --wds-card-subtitle-font-size: var(--wds-font-size-body-medium);
2182
2253
  --wds-card-subtitle-color: var(--wds-color-text-standard-secondary);
2183
2254
  --wds-card-gallery-item-title-font-size-medium: var(--wds-font-size-body-small);
2255
+ --wds-card-gallery-item-title-font-heading-weight-medium: var(--wds-font-weight-heading-4);
2256
+ --wds-card-gallery-item-title-font-heading-letter-spacing-medium: var(--wds-font-letter-spacing-heading-4);
2184
2257
  --wds-card-gallery-item-subtitle-side-font-size-medium: var(--wds-font-size-body-tiny);
2185
2258
  --wds-card-gallery-item-subtitle-font-size-medium: var(--wds-font-size-body-small);
2259
+ --wds-card-gallery-item-secondary-action-font-size: var(--wds-font-size-body-medium);
2260
+ --wds-card-gallery-item-overlay-hover-fill: var(--wds-color-fill-transparent-primary);
2186
2261
  --wds-card-gallery-item-overlay-fill: var(--wds-color-fill-transparent-primary);
2187
2262
  --wds-card-gallery-item-fill: var(--wds-color-fill-surface-default);
2263
+ --wds-card-gallery-item-action-button-font-size: var(--wds-font-size-body-medium);
2188
2264
  --wds-card-border-radius: var(--wds-border-radius-surface-raised);
2189
2265
  --wds-button-text-hover: var(--wds-color-text-standard-primary-light);
2190
2266
  --wds-button-label-fill-transparent-tertiary: var(--wds-color-text-standard-primary-light);
@@ -2353,6 +2429,9 @@
2353
2429
  --wds-page-header-subtitle-line-height: var(--wds-font-line-height-body-medium);
2354
2430
  --wds-message-modal-title-font-line-height: var(--wds-font-line-height-heading-2);
2355
2431
  --wds-message-modal-text-font-line-height: var(--wds-font-line-height-body-medium);
2432
+ --wds-marketing-page-title-line-height: var(--wds-font-line-height-heading-1);
2433
+ --wds-marketing-page-image-top-title-line-height: var(--wds-font-line-height-heading-1);
2434
+ --wds-marketing-page-content-line-height: var(--wds-font-line-height-body-medium);
2356
2435
  --wds-marketing-layout-title-line-height-tiny: var(--wds-font-line-height-body-medium);
2357
2436
  --wds-marketing-layout-title-line-height-small: var(--wds-font-line-height-heading-3);
2358
2437
  --wds-marketing-layout-title-line-height-medium: var(--wds-font-line-height-heading-2);
@@ -2385,6 +2464,11 @@
2385
2464
  --wds-card-shadow: var(--wds-shadow-surface-raised);
2386
2465
  --wds-card-gallery-item-title-font-line-height-small: var(--wds-font-line-height-body-small);
2387
2466
  --wds-card-gallery-item-title-font-line-height-medium: var(--wds-font-line-height-heading-4);
2467
+ --wds-card-gallery-item-subtitle-line-height-medium: var(--wds-font-line-height-body-small);
2468
+ --wds-card-gallery-item-shadow-hover: var(--wds-shadow-surface-raised);
2469
+ --wds-card-gallery-item-shadow: var(--wds-shadow-surface-raised);
2470
+ --wds-card-gallery-item-secondary-action-line-height: var(--wds-font-line-height-body-medium);
2471
+ --wds-card-gallery-item-action-button-line-height: var(--wds-font-line-height-body-medium);
2388
2472
  --wds-button-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
2389
2473
  --wds-button-font-line-height-small: var(--wds-font-line-height-body-small);
2390
2474
  --wds-button-font-line-height-medium: var(--wds-font-line-height-body-medium);