diff --git a/.storybook/main.js b/.storybook/main.js index f00db7dcac4..f852502b9a3 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -24,6 +24,11 @@ export default { files: "**/*.@(stories.js|mdx)", titlePrefix: "Deprecated", }, + { + directory: "./testing", + files: "**/*.@(stories.js|mdx)", + titlePrefix: "Testing", + }, ], rootDir: "../", staticDirs: ["./assets", "./assets/images"], diff --git a/.storybook/testing/cjk-typography.mdx b/.storybook/testing/cjk-typography.mdx new file mode 100644 index 00000000000..2d38fb5dd0a --- /dev/null +++ b/.storybook/testing/cjk-typography.mdx @@ -0,0 +1,47 @@ +import { Meta, Canvas } from "@storybook/blocks"; + +import { Button, Toast, Tag, AssetCard, Typography } from "./cjk.stories.js"; + + + +# Testing CJK Typography + +Most changes - if incorporated at all - are to line-height, and not all of those components are listed here. + +Typography changes based on font size/weight are not currently extended into components, ex. body size small is not applied through to buttons size small. + +## Button + +No lang specific overrides applied. + + + +## Toast + +Lang specific override on message line-height only. + + + +## Tag + +No lang specific overrides applied. + + + +## Asset Card + +Full font style lang overrides for header, content, and title slots. + + + +## Calendar + +[See on Calendar page](/?path=/docs/components-calendar--docs&globals=lang:ja), font-size is changed for days of the week. + +(_Error loading the story on this page_) + +## Typography + +All are size medium. + + diff --git a/.storybook/testing/cjk.stories.js b/.storybook/testing/cjk.stories.js new file mode 100644 index 00000000000..c08b3489066 --- /dev/null +++ b/.storybook/testing/cjk.stories.js @@ -0,0 +1,63 @@ + +import { Template as AssetCardTemplate } from "../../components/assetcard/stories/template.js"; +import { ButtonsWithIconOptions } from "../../components/button/stories/template.js"; +import { TagGroups } from "../../components/tag/stories//tag.test.js"; +import { ToastGroup } from "../../components/toast/stories/toast.test.js"; +import { TypographyGroup } from "../../components/typography/stories/typography.test.js"; + +const longPhrase = "無料で作りましょう"; // Let's make it for free +const shortPhrase = "買う"; // Purchase + +export default { + title: "CJK Stories", + tags: ["!autodocs"], +} + +export const Button = ButtonsWithIconOptions.bind({}); +Button.args = { + label: longPhrase, +}; +Button.parameters = { + chromatic: { disableSnapshot: true }, +}; + +export const Toast = ToastGroup.bind({}); +Toast.args = { + message: longPhrase, + inlineButtonLabel: shortPhrase, + variant: "neutral" +}; + +export const Tag = TagGroups.bind({}); +Tag.args = {label: shortPhrase}; + +export const AssetCard = AssetCardTemplate.bind({}); +AssetCard.args = { + title: 'Instagram ' + longPhrase, + headerContent: "39:02", + exampleImage: "square", +}; + + +export const Typography = TypographyGroup.bind({}); +Typography.args = { + content: [ + { + semantics: "heading", + content: ['Heading ' + longPhrase], + }, + { + semantics: "code", + content: ['Code ' + longPhrase], + }, + { + semantics: "detail", + content: ['detail ' + longPhrase], + }, + { + semantics: "body", + content: [ +'Body ' + longPhrase ], + }, + ], +}; diff --git a/components/typography/index.css b/components/typography/index.css index b065cb20b0c..66ed823aafb 100644 --- a/components/typography/index.css +++ b/components/typography/index.css @@ -368,30 +368,37 @@ /* Body t-shirt sizes */ .spectrum-Body--sizeXS { --spectrum-body-font-size: var(--spectrum-body-size-xs); + --spectrum-body-cjk-font-size: var(--spectrum-body-cjk-size-xs); } .spectrum-Body--sizeS { --spectrum-body-font-size: var(--spectrum-body-size-s); + --spectrum-body-cjk-font-size: var(--spectrum-body-cjk-size-s); } .spectrum-Body--sizeM { --spectrum-body-font-size: var(--spectrum-body-size-m); + --spectrum-body-cjk-font-size: var(--spectrum-body-cjk-size-m); } .spectrum-Body--sizeL { --spectrum-body-font-size: var(--spectrum-body-size-l); + --spectrum-body-cjk-font-size: var(--spectrum-body-cjk-size-l); } .spectrum-Body--sizeXL { --spectrum-body-font-size: var(--spectrum-body-size-xl); + --spectrum-body-cjk-font-size: var(--spectrum-body-cjk-size-xl); } .spectrum-Body--sizeXXL { --spectrum-body-font-size: var(--spectrum-body-size-xxl); + --spectrum-body-cjk-font-size: var(--spectrum-body-cjk-size-xxl); } .spectrum-Body--sizeXXXL { --spectrum-body-font-size: var(--spectrum-body-size-xxxl); + --spectrum-body-cjk-font-size: var(--spectrum-body-cjk-size-xxxl); } /* Body styles */ @@ -433,6 +440,7 @@ font-family: var(--mod-body-cjk-font-family, var(--spectrum-body-cjk-font-family)); font-style: var(--mod-body-cjk-font-style, var(--spectrum-body-cjk-font-style)); font-weight: var(--mod-body-cjk-font-weight, var(--spectrum-body-cjk-font-weight)); + font-size: var(--mod-body-cjk-font-size, var(--spectrum-body-cjk-font-size)); line-height: var(--mod-body-cjk-line-height, var(--spectrum-body-cjk-line-height)); @@ -513,18 +521,22 @@ /* Detail t-shirt sizes */ .spectrum-Detail--sizeS { --spectrum-detail-font-size: var(--spectrum-detail-size-s); + --spectrum-detail-cjk-font-size: var(--spectrum-detail-cjk-size-s); } .spectrum-Detail--sizeM { --spectrum-detail-font-size: var(--spectrum-detail-size-m); + --spectrum-detail-cjk-font-size: var(--spectrum-detail-cjk-size-m); } .spectrum-Detail--sizeL { --spectrum-detail-font-size: var(--spectrum-detail-size-l); + --spectrum-detail-cjk-font-size: var(--spectrum-detail-cjk-size-l); } .spectrum-Detail--sizeXL { --spectrum-detail-font-size: var(--spectrum-detail-size-xl); + --spectrum-detail-cjk-font-size: var(--spectrum-detail-cjk-size-xl); } /* Detail styles */ @@ -567,6 +579,7 @@ font-family: var(--mod-detail-cjk-font-family, var(--spectrum-detail-cjk-font-family)); font-style: var(--mod-detail-cjk-font-style, var(--spectrum-detail-cjk-font-style)); font-weight: var(--mod-detail-cjk-font-weight, var(--spectrum-detail-cjk-font-weight)); + font-size: var(--mod-detail-cjk-font-size, var(--spectrum-detail-cjk-font-size)); line-height: var(--mod-detail-cjk-line-height, var(--spectrum-detail-cjk-line-height)); diff --git a/components/typography/metadata/metadata.json b/components/typography/metadata/metadata.json index 9235bb411b1..e09cebe0a7c 100644 --- a/components/typography/metadata/metadata.json +++ b/components/typography/metadata/metadata.json @@ -301,6 +301,7 @@ "--mod-body-cjk-emphasized-font-style", "--mod-body-cjk-emphasized-font-weight", "--mod-body-cjk-font-family", + "--mod-body-cjk-font-size", "--mod-body-cjk-font-style", "--mod-body-cjk-font-weight", "--mod-body-cjk-letter-spacing", @@ -357,6 +358,7 @@ "--mod-detail-cjk-emphasized-font-style", "--mod-detail-cjk-emphasized-font-weight", "--mod-detail-cjk-font-family", + "--mod-detail-cjk-font-size", "--mod-detail-cjk-font-style", "--mod-detail-cjk-font-weight", "--mod-detail-cjk-light-emphasized-font-style", @@ -500,10 +502,18 @@ "--spectrum-body-cjk-emphasized-font-style", "--spectrum-body-cjk-emphasized-font-weight", "--spectrum-body-cjk-font-family", + "--spectrum-body-cjk-font-size", "--spectrum-body-cjk-font-style", "--spectrum-body-cjk-font-weight", "--spectrum-body-cjk-letter-spacing", "--spectrum-body-cjk-line-height", + "--spectrum-body-cjk-size-l", + "--spectrum-body-cjk-size-m", + "--spectrum-body-cjk-size-s", + "--spectrum-body-cjk-size-xl", + "--spectrum-body-cjk-size-xs", + "--spectrum-body-cjk-size-xxl", + "--spectrum-body-cjk-size-xxxl", "--spectrum-body-cjk-strong-emphasized-font-style", "--spectrum-body-cjk-strong-emphasized-font-weight", "--spectrum-body-cjk-strong-font-style", @@ -575,6 +585,7 @@ "--spectrum-detail-cjk-emphasized-font-style", "--spectrum-detail-cjk-emphasized-font-weight", "--spectrum-detail-cjk-font-family", + "--spectrum-detail-cjk-font-size", "--spectrum-detail-cjk-font-style", "--spectrum-detail-cjk-font-weight", "--spectrum-detail-cjk-light-emphasized-font-style", @@ -586,6 +597,10 @@ "--spectrum-detail-cjk-light-strong-font-style", "--spectrum-detail-cjk-light-strong-font-weight", "--spectrum-detail-cjk-line-height", + "--spectrum-detail-cjk-size-l", + "--spectrum-detail-cjk-size-m", + "--spectrum-detail-cjk-size-s", + "--spectrum-detail-cjk-size-xl", "--spectrum-detail-cjk-strong-emphasized-font-style", "--spectrum-detail-cjk-strong-emphasized-font-weight", "--spectrum-detail-cjk-strong-font-style", diff --git a/components/typography/metadata/mods.md b/components/typography/metadata/mods.md index 25bd5b5f0e4..676764d052d 100644 --- a/components/typography/metadata/mods.md +++ b/components/typography/metadata/mods.md @@ -3,6 +3,7 @@ | `--mod-body-cjk-emphasized-font-style` | | `--mod-body-cjk-emphasized-font-weight` | | `--mod-body-cjk-font-family` | +| `--mod-body-cjk-font-size` | | `--mod-body-cjk-font-style` | | `--mod-body-cjk-font-weight` | | `--mod-body-cjk-letter-spacing` | @@ -59,6 +60,7 @@ | `--mod-detail-cjk-emphasized-font-style` | | `--mod-detail-cjk-emphasized-font-weight` | | `--mod-detail-cjk-font-family` | +| `--mod-detail-cjk-font-size` | | `--mod-detail-cjk-font-style` | | `--mod-detail-cjk-font-weight` | | `--mod-detail-cjk-light-emphasized-font-style` | diff --git a/tokens/dist/css/global-vars.css b/tokens/dist/css/global-vars.css index 5a2d087885e..fdf90039cf9 100644 --- a/tokens/dist/css/global-vars.css +++ b/tokens/dist/css/global-vars.css @@ -268,6 +268,17 @@ --spectrum-in-field-button-edge-to-disclosure-icon-stacked-large:13px; --spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large:16px; --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small:3px; + --spectrum-detail-cjk-size-xl:var(--spectrum-font-size-100); + --spectrum-detail-cjk-size-l:var(--spectrum-font-size-75); + --spectrum-detail-cjk-size-m:var(--spectrum-font-size-50); + --spectrum-detail-cjk-size-s:var(--spectrum-font-size-25); + --spectrum-body-cjk-size-xxxl:var(--spectrum-font-size-500); + --spectrum-body-cjk-size-xxl:var(--spectrum-font-size-400); + --spectrum-body-cjk-size-xl:var(--spectrum-font-size-300); + --spectrum-body-cjk-size-l:var(--spectrum-font-size-200); + --spectrum-body-cjk-size-m:var(--spectrum-font-size-100); + --spectrum-body-cjk-size-s:var(--spectrum-font-size-75); + --spectrum-body-cjk-size-xs:var(--spectrum-font-size-50); --spectrum-android-elevation:2dp; --spectrum-spacing-50:2px; --spectrum-spacing-75:4px; @@ -360,11 +371,12 @@ --spectrum-black-font-weight:900; --spectrum-italic-font-style:italic; --spectrum-default-font-style:normal; + --spectrum-letter-spacing:0em; --spectrum-line-height-100:1.3; --spectrum-line-height-200:1.5; --spectrum-cjk-line-height-100:1.5; --spectrum-cjk-line-height-200:1.7; - --spectrum-cjk-letter-spacing:0.05em; + --spectrum-cjk-letter-spacing:var(--spectrum-letter-spacing); --spectrum-heading-sans-serif-font-family:var(--spectrum-sans-serif-font-family); --spectrum-heading-serif-font-family:var(--spectrum-serif-font-family); --spectrum-heading-cjk-font-family:var(--spectrum-cjk-font-family); @@ -381,7 +393,7 @@ --spectrum-heading-sans-serif-heavy-font-style:var(--spectrum-default-font-style); --spectrum-heading-serif-heavy-font-weight:var(--spectrum-black-font-weight); --spectrum-heading-serif-heavy-font-style:var(--spectrum-default-font-style); - --spectrum-heading-cjk-heavy-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-cjk-heavy-font-weight:var(--spectrum-extra-bold-font-weight); --spectrum-heading-cjk-heavy-font-style:var(--spectrum-default-font-style); --spectrum-heading-sans-serif-light-strong-font-weight:var(--spectrum-bold-font-weight); --spectrum-heading-sans-serif-light-strong-font-style:var(--spectrum-default-font-style); @@ -443,14 +455,14 @@ --spectrum-heading-size-s:var(--spectrum-font-size-300); --spectrum-heading-size-xs:var(--spectrum-font-size-200); --spectrum-heading-size-xxs:var(--spectrum-font-size-100); - --spectrum-heading-cjk-size-xxxl:var(--spectrum-font-size-1300); - --spectrum-heading-cjk-size-xxl:var(--spectrum-font-size-900); + --spectrum-heading-cjk-size-xxxl:var(--spectrum-font-size-1200); + --spectrum-heading-cjk-size-xxl:var(--spectrum-font-size-1000); --spectrum-heading-cjk-size-xl:var(--spectrum-font-size-800); --spectrum-heading-cjk-size-l:var(--spectrum-font-size-600); --spectrum-heading-cjk-size-m:var(--spectrum-font-size-400); - --spectrum-heading-cjk-size-s:var(--spectrum-font-size-300); - --spectrum-heading-cjk-size-xs:var(--spectrum-font-size-200); - --spectrum-heading-cjk-size-xxs:var(--spectrum-font-size-100); + --spectrum-heading-cjk-size-s:var(--spectrum-font-size-200); + --spectrum-heading-cjk-size-xs:var(--spectrum-font-size-100); + --spectrum-heading-cjk-size-xxs:var(--spectrum-font-size-75); --spectrum-heading-line-height:var(--spectrum-line-height-100); --spectrum-heading-cjk-line-height:var(--spectrum-cjk-line-height-100); --spectrum-heading-margin-top-multiplier:0.88888889; @@ -469,7 +481,7 @@ --spectrum-body-sans-serif-strong-font-style:var(--spectrum-default-font-style); --spectrum-body-serif-strong-font-weight:var(--spectrum-bold-font-weight); --spectrum-body-serif-strong-font-style:var(--spectrum-default-font-style); - --spectrum-body-cjk-strong-font-weight:var(--spectrum-black-font-weight); + --spectrum-body-cjk-strong-font-weight:var(--spectrum-extra-bold-font-weight); --spectrum-body-cjk-strong-font-style:var(--spectrum-default-font-style); --spectrum-body-sans-serif-emphasized-font-weight:var(--spectrum-regular-font-weight); --spectrum-body-sans-serif-emphasized-font-style:var(--spectrum-italic-font-style); @@ -481,7 +493,7 @@ --spectrum-body-sans-serif-strong-emphasized-font-style:var(--spectrum-italic-font-style); --spectrum-body-serif-strong-emphasized-font-weight:var(--spectrum-bold-font-weight); --spectrum-body-serif-strong-emphasized-font-style:var(--spectrum-italic-font-style); - --spectrum-body-cjk-strong-emphasized-font-weight:var(--spectrum-black-font-weight); + --spectrum-body-cjk-strong-emphasized-font-weight:var(--spectrum-extra-bold-font-weight); --spectrum-body-cjk-strong-emphasized-font-style:var(--spectrum-default-font-style); --spectrum-body-size-xxxl:var(--spectrum-font-size-600); --spectrum-body-size-xxl:var(--spectrum-font-size-500); @@ -513,7 +525,7 @@ --spectrum-detail-sans-serif-strong-font-style:var(--spectrum-default-font-style); --spectrum-detail-serif-strong-font-weight:var(--spectrum-bold-font-weight); --spectrum-detail-serif-strong-font-style:var(--spectrum-default-font-style); - --spectrum-detail-cjk-strong-font-weight:var(--spectrum-black-font-weight); + --spectrum-detail-cjk-strong-font-weight:var(--spectrum-extra-bold-font-weight); --spectrum-detail-cjk-strong-font-style:var(--spectrum-default-font-style); --spectrum-detail-sans-serif-light-strong-font-weight:var(--spectrum-regular-font-weight); --spectrum-detail-sans-serif-light-strong-font-style:var(--spectrum-default-font-style); @@ -525,7 +537,7 @@ --spectrum-detail-sans-serif-emphasized-font-style:var(--spectrum-italic-font-style); --spectrum-detail-serif-emphasized-font-weight:var(--spectrum-bold-font-weight); --spectrum-detail-serif-emphasized-font-style:var(--spectrum-italic-font-style); - --spectrum-detail-cjk-emphasized-font-weight:var(--spectrum-black-font-weight); + --spectrum-detail-cjk-emphasized-font-weight:var(--spectrum-extra-bold-font-weight); --spectrum-detail-cjk-emphasized-font-style:var(--spectrum-default-font-style); --spectrum-detail-sans-serif-light-emphasized-font-weight:var(--spectrum-regular-font-weight); --spectrum-detail-sans-serif-light-emphasized-font-style:var(--spectrum-italic-font-style); @@ -537,7 +549,7 @@ --spectrum-detail-sans-serif-strong-emphasized-font-style:var(--spectrum-italic-font-style); --spectrum-detail-serif-strong-emphasized-font-weight:var(--spectrum-bold-font-weight); --spectrum-detail-serif-strong-emphasized-font-style:var(--spectrum-italic-font-style); - --spectrum-detail-cjk-strong-emphasized-font-weight:var(--spectrum-black-font-weight); + --spectrum-detail-cjk-strong-emphasized-font-weight:var(--spectrum-extra-bold-font-weight); --spectrum-detail-cjk-strong-emphasized-font-style:var(--spectrum-default-font-style); --spectrum-detail-sans-serif-light-strong-emphasized-font-weight:var(--spectrum-regular-font-weight); --spectrum-detail-sans-serif-light-strong-emphasized-font-style:var(--spectrum-italic-font-style); diff --git a/tokens/dist/css/large-vars.css b/tokens/dist/css/large-vars.css index 232dcfb2877..b53df7f9282 100644 --- a/tokens/dist/css/large-vars.css +++ b/tokens/dist/css/large-vars.css @@ -486,6 +486,7 @@ --spectrum-navigational-indicator-top-to-back-icon-large:16px; --spectrum-navigational-indicator-top-to-back-icon-extra-large:19px; --spectrum-color-control-track-width:30px; + --spectrum-font-size-25:12px; --spectrum-font-size-50:13px; --spectrum-font-size-75:15px; --spectrum-font-size-100:17px; diff --git a/tokens/dist/css/medium-vars.css b/tokens/dist/css/medium-vars.css index 9756afa3545..131626d3df0 100644 --- a/tokens/dist/css/medium-vars.css +++ b/tokens/dist/css/medium-vars.css @@ -486,6 +486,7 @@ --spectrum-navigational-indicator-top-to-back-icon-large:12px; --spectrum-navigational-indicator-top-to-back-icon-extra-large:15px; --spectrum-color-control-track-width:24px; + --spectrum-font-size-25:10px; --spectrum-font-size-50:11px; --spectrum-font-size-75:12px; --spectrum-font-size-100:14px; diff --git a/tokens/dist/index.css b/tokens/dist/index.css index cb07bad1335..804454b8726 100644 --- a/tokens/dist/index.css +++ b/tokens/dist/index.css @@ -1186,6 +1186,17 @@ --spectrum-in-field-button-edge-to-disclosure-icon-stacked-large: 13px; --spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large: 16px; --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small: 3px; + --spectrum-detail-cjk-size-xl: var(--spectrum-font-size-100); + --spectrum-detail-cjk-size-l: var(--spectrum-font-size-75); + --spectrum-detail-cjk-size-m: var(--spectrum-font-size-50); + --spectrum-detail-cjk-size-s: var(--spectrum-font-size-25); + --spectrum-body-cjk-size-xxxl: var(--spectrum-font-size-500); + --spectrum-body-cjk-size-xxl: var(--spectrum-font-size-400); + --spectrum-body-cjk-size-xl: var(--spectrum-font-size-300); + --spectrum-body-cjk-size-l: var(--spectrum-font-size-200); + --spectrum-body-cjk-size-m: var(--spectrum-font-size-100); + --spectrum-body-cjk-size-s: var(--spectrum-font-size-75); + --spectrum-body-cjk-size-xs: var(--spectrum-font-size-50); --spectrum-android-elevation: 2dp; --spectrum-spacing-50: 2px; --spectrum-spacing-75: 4px; @@ -1278,11 +1289,12 @@ --spectrum-black-font-weight: 900; --spectrum-italic-font-style: italic; --spectrum-default-font-style: normal; + --spectrum-letter-spacing: 0em; --spectrum-line-height-100: 1.3; --spectrum-line-height-200: 1.5; --spectrum-cjk-line-height-100: 1.5; --spectrum-cjk-line-height-200: 1.7; - --spectrum-cjk-letter-spacing: 0.05em; + --spectrum-cjk-letter-spacing: var(--spectrum-letter-spacing); --spectrum-heading-sans-serif-font-family: var(--spectrum-sans-serif-font-family); --spectrum-heading-serif-font-family: var(--spectrum-serif-font-family); --spectrum-heading-cjk-font-family: var(--spectrum-cjk-font-family); @@ -1299,7 +1311,7 @@ --spectrum-heading-sans-serif-heavy-font-style: var(--spectrum-default-font-style); --spectrum-heading-serif-heavy-font-weight: var(--spectrum-black-font-weight); --spectrum-heading-serif-heavy-font-style: var(--spectrum-default-font-style); - --spectrum-heading-cjk-heavy-font-weight: var(--spectrum-black-font-weight); + --spectrum-heading-cjk-heavy-font-weight: var(--spectrum-extra-bold-font-weight); --spectrum-heading-cjk-heavy-font-style: var(--spectrum-default-font-style); --spectrum-heading-sans-serif-light-strong-font-weight: var(--spectrum-bold-font-weight); --spectrum-heading-sans-serif-light-strong-font-style: var(--spectrum-default-font-style); @@ -1361,14 +1373,14 @@ --spectrum-heading-size-s: var(--spectrum-font-size-300); --spectrum-heading-size-xs: var(--spectrum-font-size-200); --spectrum-heading-size-xxs: var(--spectrum-font-size-100); - --spectrum-heading-cjk-size-xxxl: var(--spectrum-font-size-1300); - --spectrum-heading-cjk-size-xxl: var(--spectrum-font-size-900); + --spectrum-heading-cjk-size-xxxl: var(--spectrum-font-size-1200); + --spectrum-heading-cjk-size-xxl: var(--spectrum-font-size-1000); --spectrum-heading-cjk-size-xl: var(--spectrum-font-size-800); --spectrum-heading-cjk-size-l: var(--spectrum-font-size-600); --spectrum-heading-cjk-size-m: var(--spectrum-font-size-400); - --spectrum-heading-cjk-size-s: var(--spectrum-font-size-300); - --spectrum-heading-cjk-size-xs: var(--spectrum-font-size-200); - --spectrum-heading-cjk-size-xxs: var(--spectrum-font-size-100); + --spectrum-heading-cjk-size-s: var(--spectrum-font-size-200); + --spectrum-heading-cjk-size-xs: var(--spectrum-font-size-100); + --spectrum-heading-cjk-size-xxs: var(--spectrum-font-size-75); --spectrum-heading-line-height: var(--spectrum-line-height-100); --spectrum-heading-cjk-line-height: var(--spectrum-cjk-line-height-100); --spectrum-heading-margin-top-multiplier: 0.88888889; @@ -1387,7 +1399,7 @@ --spectrum-body-sans-serif-strong-font-style: var(--spectrum-default-font-style); --spectrum-body-serif-strong-font-weight: var(--spectrum-bold-font-weight); --spectrum-body-serif-strong-font-style: var(--spectrum-default-font-style); - --spectrum-body-cjk-strong-font-weight: var(--spectrum-black-font-weight); + --spectrum-body-cjk-strong-font-weight: var(--spectrum-extra-bold-font-weight); --spectrum-body-cjk-strong-font-style: var(--spectrum-default-font-style); --spectrum-body-sans-serif-emphasized-font-weight: var(--spectrum-regular-font-weight); --spectrum-body-sans-serif-emphasized-font-style: var(--spectrum-italic-font-style); @@ -1399,7 +1411,7 @@ --spectrum-body-sans-serif-strong-emphasized-font-style: var(--spectrum-italic-font-style); --spectrum-body-serif-strong-emphasized-font-weight: var(--spectrum-bold-font-weight); --spectrum-body-serif-strong-emphasized-font-style: var(--spectrum-italic-font-style); - --spectrum-body-cjk-strong-emphasized-font-weight: var(--spectrum-black-font-weight); + --spectrum-body-cjk-strong-emphasized-font-weight: var(--spectrum-extra-bold-font-weight); --spectrum-body-cjk-strong-emphasized-font-style: var(--spectrum-default-font-style); --spectrum-body-size-xxxl: var(--spectrum-font-size-600); --spectrum-body-size-xxl: var(--spectrum-font-size-500); @@ -1431,7 +1443,7 @@ --spectrum-detail-sans-serif-strong-font-style: var(--spectrum-default-font-style); --spectrum-detail-serif-strong-font-weight: var(--spectrum-bold-font-weight); --spectrum-detail-serif-strong-font-style: var(--spectrum-default-font-style); - --spectrum-detail-cjk-strong-font-weight: var(--spectrum-black-font-weight); + --spectrum-detail-cjk-strong-font-weight: var(--spectrum-extra-bold-font-weight); --spectrum-detail-cjk-strong-font-style: var(--spectrum-default-font-style); --spectrum-detail-sans-serif-light-strong-font-weight: var(--spectrum-regular-font-weight); --spectrum-detail-sans-serif-light-strong-font-style: var(--spectrum-default-font-style); @@ -1443,7 +1455,7 @@ --spectrum-detail-sans-serif-emphasized-font-style: var(--spectrum-italic-font-style); --spectrum-detail-serif-emphasized-font-weight: var(--spectrum-bold-font-weight); --spectrum-detail-serif-emphasized-font-style: var(--spectrum-italic-font-style); - --spectrum-detail-cjk-emphasized-font-weight: var(--spectrum-black-font-weight); + --spectrum-detail-cjk-emphasized-font-weight: var(--spectrum-extra-bold-font-weight); --spectrum-detail-cjk-emphasized-font-style: var(--spectrum-default-font-style); --spectrum-detail-sans-serif-light-emphasized-font-weight: var(--spectrum-regular-font-weight); --spectrum-detail-sans-serif-light-emphasized-font-style: var(--spectrum-italic-font-style); @@ -1455,7 +1467,7 @@ --spectrum-detail-sans-serif-strong-emphasized-font-style: var(--spectrum-italic-font-style); --spectrum-detail-serif-strong-emphasized-font-weight: var(--spectrum-bold-font-weight); --spectrum-detail-serif-strong-emphasized-font-style: var(--spectrum-italic-font-style); - --spectrum-detail-cjk-strong-emphasized-font-weight: var(--spectrum-black-font-weight); + --spectrum-detail-cjk-strong-emphasized-font-weight: var(--spectrum-extra-bold-font-weight); --spectrum-detail-cjk-strong-emphasized-font-style: var(--spectrum-default-font-style); --spectrum-detail-sans-serif-light-strong-emphasized-font-weight: var(--spectrum-regular-font-weight); --spectrum-detail-sans-serif-light-strong-emphasized-font-style: var(--spectrum-italic-font-style); @@ -1977,6 +1989,7 @@ --spectrum-navigational-indicator-top-to-back-icon-large: 16px; --spectrum-navigational-indicator-top-to-back-icon-extra-large: 19px; --spectrum-color-control-track-width: 30px; + --spectrum-font-size-25: 12px; --spectrum-font-size-50: 13px; --spectrum-font-size-75: 15px; --spectrum-font-size-100: 17px; @@ -2928,6 +2941,7 @@ --spectrum-navigational-indicator-top-to-back-icon-large: 12px; --spectrum-navigational-indicator-top-to-back-icon-extra-large: 15px; --spectrum-color-control-track-width: 24px; + --spectrum-font-size-25: 10px; --spectrum-font-size-50: 11px; --spectrum-font-size-75: 12px; --spectrum-font-size-100: 14px; diff --git a/tokens/package.json b/tokens/package.json index 6f721fd6229..2f48842be8b 100644 --- a/tokens/package.json +++ b/tokens/package.json @@ -21,7 +21,7 @@ "package.json" ], "devDependencies": { - "@adobe/spectrum-tokens": "12.25.0", + "@adobe/spectrum-tokens": "12.27.0", "@nxkit/style-dictionary": "^5.0.0", "cssnano": "^7.0.3", "cssnano-preset-advanced": "^7.0.6", diff --git a/yarn.lock b/yarn.lock index d9480f616cc..32da4b568d2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -106,10 +106,10 @@ __metadata: languageName: node linkType: hard -"@adobe/spectrum-tokens@npm:12.25.0": - version: 12.25.0 - resolution: "@adobe/spectrum-tokens@npm:12.25.0" - checksum: 10c0/783a4fb59cecc54b7a8157d998e690de82f3fb5a15934ed241256c998375aa38e699e81ddfb2d815be8b3281fe774acf33bed97eb9beabad9648fb9bd53ca322 +"@adobe/spectrum-tokens@npm:12.27.0": + version: 12.27.0 + resolution: "@adobe/spectrum-tokens@npm:12.27.0" + checksum: 10c0/d89504b5a44a65c4de8d0f9cb10ce4ad3b1068925ddd0cf4a4ceff03662326b4802c8dfb5bed3c49716d1d71b674da5b1794d98d22aabef9fbaab8c7ff35b19d languageName: node linkType: hard @@ -4195,7 +4195,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/tokens@workspace:tokens" dependencies: - "@adobe/spectrum-tokens": "npm:12.25.0" + "@adobe/spectrum-tokens": "npm:12.27.0" "@nxkit/style-dictionary": "npm:^5.0.0" cssnano: "npm:^7.0.3" cssnano-preset-advanced: "npm:^7.0.6"