@wix/design-system-tokens 1.222.0 → 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 +42 -0
  2. package/all.css +89 -2
  3. package/all.scss +89 -2
  4. package/all.st.css +176 -2
  5. package/component.st.css +174 -0
  6. package/odeditor/all.css +106 -14
  7. package/odeditor/all.scss +106 -14
  8. package/odeditor/all.st.css +198 -14
  9. package/odeditor/component.st.css +197 -13
  10. package/odeditor/semantic.st.css +1 -1
  11. package/odeditor-dark/all.css +101 -9
  12. package/odeditor-dark/all.scss +101 -9
  13. package/odeditor-dark/all.st.css +193 -9
  14. package/odeditor-dark/component.st.css +191 -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 +88 -1
  19. package/studio/all.scss +88 -1
  20. package/studio/all.st.css +175 -1
  21. package/studio/component.st.css +174 -0
  22. package/studio/semantic.st.css +1 -1
  23. package/wixel/all.css +88 -1
  24. package/wixel/all.scss +88 -1
  25. package/wixel/all.st.css +175 -1
  26. package/wixel/component.st.css +174 -0
  27. package/wixel/semantic.st.css +1 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,45 @@
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
+
37
+ ## 1.222.1
38
+
39
+ ### Patch Changes
40
+
41
+ - [#16797](https://github.com/wix-private/wix-design-systems/pull/16797) [`9b91019`](https://github.com/wix-private/wix-design-systems/commit/9b910190898244bb192eb8f1471556a9a5b94dcf) - Add `--wds-vertical-tabs-item-padding-horizontal-medium-offset`, `--wds-vertical-tabs-item-padding-horizontal-small-offset` and `--wds-vertical-tabs-item-padding-horizontal-tiny-offset`, which control how far a VerticalTabs item's prefix icon reaches back into the item's start padding: medium is `24px` everywhere except Studio (`10px`), while small and tiny are `20px` in Default, Studio and Wixel and `9px` / `10px` in Harmony (odeditor) and Studio 2.0 (odeditor-dark).
42
+
1
43
  ## 1.222.0
2
44
 
3
45
  ### Minor 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;
@@ -274,6 +274,9 @@
274
274
  --wds-background-blur-100: 0px;
275
275
  --wds-background-blur-50: 0px;
276
276
  --wds-background-blur-0: 0px;
277
+ --wds-vertical-tabs-item-padding-horizontal-tiny-offset: 20px;
278
+ --wds-vertical-tabs-item-padding-horizontal-small-offset: 20px;
279
+ --wds-vertical-tabs-item-padding-horizontal-medium-offset: 24px;
277
280
  --wds-top-banner-shadow: 0 0 0 transparent;
278
281
  --wds-toggle-switch-width-small: 28px;
279
282
  --wds-toggle-switch-width-medium: 34px;
@@ -343,6 +346,22 @@
343
346
  --wds-page-header-breadcrumbs-offset-large: -15px;
344
347
  --wds-page-header-back-button-gap: 8px;
345
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;
346
365
  --wds-marketing-layout-title-font-size-tiny: 20px;
347
366
  --wds-marketing-layout-image-border-radius: 0px;
348
367
  --wds-marketing-layout-badge-top: 9px;
@@ -376,12 +395,16 @@
376
395
  --wds-input-width-medium: 72px;
377
396
  --wds-input-width-large: 96px;
378
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;
379
401
  --wds-google-preview-title-fill: #260AA8;
380
402
  --wds-google-preview-text-fill: #4D5156;
381
403
  --wds-google-preview-site-name-fill: #202124;
382
404
  --wds-google-preview-favicon-border-fill: #E6E6E6;
383
405
  --wds-google-preview-favicon-background-fill: #F1F3F4;
384
406
  --wds-editable-title-marker-line-style: dashed;
407
+ --wds-editable-title-marker-image: none;
385
408
  --wds-editable-title-marker-gap: 6px;
386
409
  --wds-custom-modal-close-button-fill: transparent;
387
410
  --wds-counter-badge-padding-horizontal-tiny: 4px;
@@ -393,6 +416,19 @@
393
416
  --wds-close-button-standard-filled-fill: transparent;
394
417
  --wds-circular-progress-bar-border-width: 4px;
395
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;
396
432
  --wds-card-header-suffix-align: center;
397
433
  --wds-card-divider-opacity: 1;
398
434
  --wds-card-base-shadow: none;
@@ -1027,6 +1063,12 @@
1027
1063
  --wds-table-list-item-controls-gap-medium: var(--wds-space-200);
1028
1064
  --wds-table-list-item-checkbox-offset: var(--wds-space-0);
1029
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);
1030
1072
  --wds-table-action-cell-secondary-action-gap-tiny: var(--wds-space-100);
1031
1073
  --wds-table-action-cell-secondary-action-gap-small: var(--wds-space-200);
1032
1074
  --wds-table-action-cell-secondary-action-gap-medium: var(--wds-space-200);
@@ -1263,6 +1305,7 @@
1263
1305
  --wds-page-section-padding-bottom-with-divider: var(--wds-space-0);
1264
1306
  --wds-page-section-padding-bottom: var(--wds-space-200);
1265
1307
  --wds-page-section-gap: var(--wds-space-0);
1308
+ --wds-page-header-title-padding-start: var(--wds-space-0);
1266
1309
  --wds-page-header-title-minimised-letter-spacing: var(--wds-font-letter-spacing-0);
1267
1310
  --wds-page-header-title-minimised-font-weight: var(--wds-font-weight-medium);
1268
1311
  --wds-page-header-title-actions-gap: var(--wds-space-0);
@@ -1272,7 +1315,9 @@
1272
1315
  --wds-page-header-padding-vertical: var(--wds-space-400);
1273
1316
  --wds-page-header-padding-horizontal-small: var(--wds-space-400);
1274
1317
  --wds-page-header-padding-horizontal: var(--wds-space-800);
1318
+ --wds-page-header-padding-bottom-with-tail: var(--wds-space-200);
1275
1319
  --wds-page-header-breadcrumbs-selected-font-weight: var(--wds-font-weight-medium);
1320
+ --wds-page-header-back-button-offset: var(--wds-space-0);
1276
1321
  --wds-notification-padding-vertical: var(--wds-space-150);
1277
1322
  --wds-notification-padding-horizontal: var(--wds-space-200);
1278
1323
  --wds-notification-fill-warning: var(--wds-color-yellow-100);
@@ -1299,10 +1344,22 @@
1299
1344
  --wds-message-modal-content-gap: var(--wds-space-200);
1300
1345
  --wds-message-modal-close-button-size: var(--wds-space-500);
1301
1346
  --wds-message-modal-close-button-icon-size: var(--wds-space-200);
1347
+ --wds-marketing-page-title-content-gap: var(--wds-space-400);
1302
1348
  --wds-marketing-page-paddings-vertical-medium: var(--wds-space-500);
1303
1349
  --wds-marketing-page-paddings-vertical-large: var(--wds-space-800);
1304
1350
  --wds-marketing-page-paddings-horizontal-medium: var(--wds-space-800);
1305
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);
1306
1363
  --wds-marketing-layout-title-gap-tiny: var(--wds-space-100);
1307
1364
  --wds-marketing-layout-title-gap-small: var(--wds-space-100);
1308
1365
  --wds-marketing-layout-title-gap-medium: var(--wds-space-200);
@@ -1519,19 +1576,29 @@
1519
1576
  --wds-checkbox-border-radius: var(--wds-border-radius-200);
1520
1577
  --wds-checkbox-border-active-hover: var(--wds-color-black-100-transparent-0);
1521
1578
  --wds-carousel-dots-width: var(--wds-space-200);
1579
+ --wds-card-gallery-item-title-font-weight-small: var(--wds-font-weight-medium);
1522
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);
1523
1583
  --wds-card-gallery-item-padding-vertical-small: var(--wds-space-200);
1524
1584
  --wds-card-gallery-item-padding-vertical-medium: var(--wds-space-300);
1525
1585
  --wds-card-gallery-item-padding-right-small: var(--wds-space-300);
1526
1586
  --wds-card-gallery-item-padding-right-medium: var(--wds-space-400);
1527
1587
  --wds-card-gallery-item-padding-left-small: var(--wds-space-200);
1528
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);
1529
1592
  --wds-card-gallery-item-image-border-radius-top: var(--wds-border-radius-400);
1530
1593
  --wds-card-gallery-item-image-border-radius-bottom: var(--wds-border-radius-0);
1531
1594
  --wds-card-gallery-item-content-margin-vertical: var(--wds-space-0);
1532
1595
  --wds-card-gallery-item-buttons-gap: var(--wds-space-100);
1533
1596
  --wds-card-gallery-item-border-radius-100: var(--wds-border-radius-400);
1534
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);
1535
1602
  --wds-card-tab-padding-vertical-small: var(--wds-space-300);
1536
1603
  --wds-card-tab-padding-vertical-medium: var(--wds-space-300);
1537
1604
  --wds-card-tab-padding-horizontal-small: var(--wds-space-300);
@@ -1803,6 +1870,10 @@
1803
1870
  --wds-table-list-item-drag-handle-color-hover: var(--wds-color-fill-standard-primary);
1804
1871
  --wds-table-list-item-drag-handle-color: var(--wds-color-text-primary);
1805
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);
1806
1877
  --wds-swatches-fill-disabled: var(--wds-color-fill-standard-secondary-disabled);
1807
1878
  --wds-swatches-fill-border-selected: var(--wds-color-border-standard-secondary-active);
1808
1879
  --wds-swatches-fill-border-no-value-dash: var(--wds-color-fill-destructive-primary);
@@ -1912,6 +1983,9 @@
1912
1983
  --wds-multiselect-icon-fill: var(--wds-color-text-primary);
1913
1984
  --wds-message-modal-title-font-size: var(--wds-font-size-heading-2);
1914
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);
1915
1989
  --wds-marketing-layout-title-font-weight-small: var(--wds-font-weight-heading-3);
1916
1990
  --wds-marketing-layout-title-font-weight-medium: var(--wds-font-weight-heading-2);
1917
1991
  --wds-marketing-layout-title-font-size-small: var(--wds-font-size-heading-3);
@@ -2176,10 +2250,15 @@
2176
2250
  --wds-checkbox-border: var(--wds-color-border-standard-secondary-active);
2177
2251
  --wds-carousel-controls-shadow: var(--wds-shadow-300);
2178
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);
2179
2255
  --wds-card-gallery-item-subtitle-side-font-size-medium: var(--wds-font-size-body-tiny);
2180
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);
2181
2259
  --wds-card-gallery-item-overlay-fill: var(--wds-color-fill-transparent-primary);
2182
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);
2183
2262
  --wds-card-subtitle-font-size: var(--wds-font-size-body-medium);
2184
2263
  --wds-card-subtitle-color: var(--wds-color-text-standard-secondary);
2185
2264
  --wds-card-border-radius: var(--wds-border-radius-surface-raised);
@@ -2350,6 +2429,9 @@
2350
2429
  --wds-page-header-subtitle-line-height: var(--wds-font-line-height-body-medium);
2351
2430
  --wds-message-modal-title-font-line-height: var(--wds-font-line-height-heading-2);
2352
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);
2353
2435
  --wds-marketing-layout-title-line-height-tiny: var(--wds-font-line-height-body-medium);
2354
2436
  --wds-marketing-layout-title-line-height-small: var(--wds-font-line-height-heading-3);
2355
2437
  --wds-marketing-layout-title-line-height-medium: var(--wds-font-line-height-heading-2);
@@ -2380,6 +2462,11 @@
2380
2462
  --wds-checkbox-label-font-line-height-medium: var(--wds-font-line-height-body-medium);
2381
2463
  --wds-card-gallery-item-title-font-line-height-small: var(--wds-font-line-height-body-small);
2382
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);
2383
2470
  --wds-card-subtitle-line-height: var(--wds-font-line-height-body-medium);
2384
2471
  --wds-card-shadow: var(--wds-shadow-surface-raised);
2385
2472
  --wds-button-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
package/all.scss CHANGED
@@ -1,4 +1,7 @@
1
1
  @mixin tokens {
2
+ --wds-vertical-tabs-item-padding-horizontal-tiny-offset: 20px;
3
+ --wds-vertical-tabs-item-padding-horizontal-small-offset: 20px;
4
+ --wds-vertical-tabs-item-padding-horizontal-medium-offset: 24px;
2
5
  --wds-top-banner-shadow: 0 0 0 transparent;
3
6
  --wds-toggle-switch-width-small: 28px;
4
7
  --wds-toggle-switch-width-medium: 34px;
@@ -99,8 +102,8 @@
99
102
  --wds-shadow-x-50: 3px;
100
103
  --wds-shadow-x-25: 2px;
101
104
  --wds-shadow-x-0: 0px;
102
- --wds-shadow-spread-secondary-raised: 0;
103
- --wds-shadow-focus-spread: 3;
105
+ --wds-shadow-spread-secondary-raised: 0px;
106
+ --wds-shadow-focus-spread: 3px;
104
107
  --wds-shadow-blur-800: 36px;
105
108
  --wds-shadow-blur-500: 24px;
106
109
  --wds-shadow-blur-400: 24px;
@@ -126,6 +129,22 @@
126
129
  --wds-page-header-breadcrumbs-offset-large: -15px;
127
130
  --wds-page-header-back-button-gap: 8px;
128
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;
129
148
  --wds-marketing-layout-title-font-size-tiny: 20px;
130
149
  --wds-marketing-layout-image-border-radius: 0px;
131
150
  --wds-marketing-layout-badge-top: 9px;
@@ -159,6 +178,9 @@
159
178
  --wds-input-width-medium: 72px;
160
179
  --wds-input-width-large: 96px;
161
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;
162
184
  --wds-google-preview-title-fill: #260AA8;
163
185
  --wds-google-preview-text-fill: #4D5156;
164
186
  --wds-google-preview-site-name-fill: #202124;
@@ -182,6 +204,7 @@
182
204
  --wds-font-family-display: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
183
205
  --wds-font-family-default: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
184
206
  --wds-editable-title-marker-line-style: dashed;
207
+ --wds-editable-title-marker-image: none;
185
208
  --wds-editable-title-marker-gap: 6px;
186
209
  --wds-custom-modal-close-button-fill: transparent;
187
210
  --wds-counter-badge-padding-horizontal-tiny: 4px;
@@ -367,6 +390,19 @@
367
390
  --wds-circular-progress-bar-border-width: 4px;
368
391
  --wds-checkbox-size: 16px;
369
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;
370
406
  --wds-card-divider-opacity: 1;
371
407
  --wds-card-base-shadow: none;
372
408
  --wds-button-outline-hover: transparent;
@@ -587,6 +623,12 @@
587
623
  --wds-table-list-item-controls-gap-medium: var(--wds-space-200);
588
624
  --wds-table-list-item-checkbox-offset: var(--wds-space-0);
589
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);
590
632
  --wds-table-action-cell-secondary-action-gap-tiny: var(--wds-space-100);
591
633
  --wds-table-action-cell-secondary-action-gap-small: var(--wds-space-200);
592
634
  --wds-table-action-cell-secondary-action-gap-medium: var(--wds-space-200);
@@ -910,6 +952,7 @@
910
952
  --wds-page-section-padding-bottom-with-divider: var(--wds-space-0);
911
953
  --wds-page-section-padding-bottom: var(--wds-space-200);
912
954
  --wds-page-section-gap: var(--wds-space-0);
955
+ --wds-page-header-title-padding-start: var(--wds-space-0);
913
956
  --wds-page-header-title-minimised-letter-spacing: var(--wds-font-letter-spacing-0);
914
957
  --wds-page-header-title-minimised-font-weight: var(--wds-font-weight-medium);
915
958
  --wds-page-header-title-actions-gap: var(--wds-space-0);
@@ -919,7 +962,9 @@
919
962
  --wds-page-header-padding-vertical: var(--wds-space-400);
920
963
  --wds-page-header-padding-horizontal-small: var(--wds-space-400);
921
964
  --wds-page-header-padding-horizontal: var(--wds-space-800);
965
+ --wds-page-header-padding-bottom-with-tail: var(--wds-space-200);
922
966
  --wds-page-header-breadcrumbs-selected-font-weight: var(--wds-font-weight-medium);
967
+ --wds-page-header-back-button-offset: var(--wds-space-0);
923
968
  --wds-notification-padding-vertical: var(--wds-space-150);
924
969
  --wds-notification-padding-horizontal: var(--wds-space-200);
925
970
  --wds-notification-fill-warning: var(--wds-color-yellow-100);
@@ -946,10 +991,22 @@
946
991
  --wds-message-modal-content-gap: var(--wds-space-200);
947
992
  --wds-message-modal-close-button-size: var(--wds-space-500);
948
993
  --wds-message-modal-close-button-icon-size: var(--wds-space-200);
994
+ --wds-marketing-page-title-content-gap: var(--wds-space-400);
949
995
  --wds-marketing-page-paddings-vertical-medium: var(--wds-space-500);
950
996
  --wds-marketing-page-paddings-vertical-large: var(--wds-space-800);
951
997
  --wds-marketing-page-paddings-horizontal-medium: var(--wds-space-800);
952
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);
953
1010
  --wds-marketing-layout-title-gap-tiny: var(--wds-space-100);
954
1011
  --wds-marketing-layout-title-gap-small: var(--wds-space-100);
955
1012
  --wds-marketing-layout-title-gap-medium: var(--wds-space-200);
@@ -1516,19 +1573,29 @@
1516
1573
  --wds-card-header-padding-vertical: var(--wds-space-300);
1517
1574
  --wds-card-header-padding-horizontal: var(--wds-space-400);
1518
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);
1519
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);
1520
1580
  --wds-card-gallery-item-padding-vertical-small: var(--wds-space-200);
1521
1581
  --wds-card-gallery-item-padding-vertical-medium: var(--wds-space-300);
1522
1582
  --wds-card-gallery-item-padding-right-small: var(--wds-space-300);
1523
1583
  --wds-card-gallery-item-padding-right-medium: var(--wds-space-400);
1524
1584
  --wds-card-gallery-item-padding-left-small: var(--wds-space-200);
1525
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);
1526
1589
  --wds-card-gallery-item-image-border-radius-top: var(--wds-border-radius-400);
1527
1590
  --wds-card-gallery-item-image-border-radius-bottom: var(--wds-border-radius-0);
1528
1591
  --wds-card-gallery-item-content-margin-vertical: var(--wds-space-0);
1529
1592
  --wds-card-gallery-item-buttons-gap: var(--wds-space-100);
1530
1593
  --wds-card-gallery-item-border-radius-100: var(--wds-border-radius-400);
1531
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);
1532
1599
  --wds-card-content-paddings-vertical: var(--wds-space-300);
1533
1600
  --wds-card-content-paddings-horizontal: var(--wds-space-400);
1534
1601
  --wds-card-content-padding-medium-top: var(--wds-space-400);
@@ -1785,6 +1852,10 @@
1785
1852
  --wds-table-list-item-drag-handle-color-hover: var(--wds-color-fill-standard-primary);
1786
1853
  --wds-table-list-item-drag-handle-color: var(--wds-color-text-primary);
1787
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);
1788
1859
  --wds-swatches-fill-disabled: var(--wds-color-fill-standard-secondary-disabled);
1789
1860
  --wds-swatches-fill-border-selected: var(--wds-color-border-standard-secondary-active);
1790
1861
  --wds-swatches-fill-border-no-value-dash: var(--wds-color-fill-destructive-primary);
@@ -1901,6 +1972,9 @@
1901
1972
  --wds-multiselect-icon-fill: var(--wds-color-text-primary);
1902
1973
  --wds-message-modal-title-font-size: var(--wds-font-size-heading-2);
1903
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);
1904
1978
  --wds-marketing-layout-title-font-weight-small: var(--wds-font-weight-heading-3);
1905
1979
  --wds-marketing-layout-title-font-weight-medium: var(--wds-font-weight-heading-2);
1906
1980
  --wds-marketing-layout-title-font-size-small: var(--wds-font-size-heading-3);
@@ -2178,10 +2252,15 @@
2178
2252
  --wds-card-subtitle-font-size: var(--wds-font-size-body-medium);
2179
2253
  --wds-card-subtitle-color: var(--wds-color-text-standard-secondary);
2180
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);
2181
2257
  --wds-card-gallery-item-subtitle-side-font-size-medium: var(--wds-font-size-body-tiny);
2182
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);
2183
2261
  --wds-card-gallery-item-overlay-fill: var(--wds-color-fill-transparent-primary);
2184
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);
2185
2264
  --wds-card-border-radius: var(--wds-border-radius-surface-raised);
2186
2265
  --wds-button-text-hover: var(--wds-color-text-standard-primary-light);
2187
2266
  --wds-button-label-fill-transparent-tertiary: var(--wds-color-text-standard-primary-light);
@@ -2350,6 +2429,9 @@
2350
2429
  --wds-page-header-subtitle-line-height: var(--wds-font-line-height-body-medium);
2351
2430
  --wds-message-modal-title-font-line-height: var(--wds-font-line-height-heading-2);
2352
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);
2353
2435
  --wds-marketing-layout-title-line-height-tiny: var(--wds-font-line-height-body-medium);
2354
2436
  --wds-marketing-layout-title-line-height-small: var(--wds-font-line-height-heading-3);
2355
2437
  --wds-marketing-layout-title-line-height-medium: var(--wds-font-line-height-heading-2);
@@ -2382,6 +2464,11 @@
2382
2464
  --wds-card-shadow: var(--wds-shadow-surface-raised);
2383
2465
  --wds-card-gallery-item-title-font-line-height-small: var(--wds-font-line-height-body-small);
2384
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);
2385
2472
  --wds-button-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
2386
2473
  --wds-button-font-line-height-small: var(--wds-font-line-height-body-small);
2387
2474
  --wds-button-font-line-height-medium: var(--wds-font-line-height-body-medium);