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"