chore(tokens|typography): port cjk token updates

5t3ph · 5t3ph · commit 046e13e2cdab · 2024-11-07T14:23:23.000-06:00
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
diff --git a/tokens/package.json b/tokens/package.json
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -368,30 +368,37 @@`
`368`	`368`	`/* Body t-shirt sizes */`
`369`	`369`	`.spectrum-Body--sizeXS {`
`370`	`370`	`--spectrum-body-font-size: var(--spectrum-body-size-xs);`
	`371`	`+ --spectrum-body-cjk-font-size: var(--spectrum-body-cjk-size-xs);`
`371`	`372`	`}`
`372`	`373`
`373`	`374`	`.spectrum-Body--sizeS {`
`374`	`375`	`--spectrum-body-font-size: var(--spectrum-body-size-s);`
	`376`	`+ --spectrum-body-cjk-font-size: var(--spectrum-body-cjk-size-s);`
`375`	`377`	`}`
`376`	`378`
`377`	`379`	`.spectrum-Body--sizeM {`
`378`	`380`	`--spectrum-body-font-size: var(--spectrum-body-size-m);`
	`381`	`+ --spectrum-body-cjk-font-size: var(--spectrum-body-cjk-size-m);`
`379`	`382`	`}`
`380`	`383`
`381`	`384`	`.spectrum-Body--sizeL {`
`382`	`385`	`--spectrum-body-font-size: var(--spectrum-body-size-l);`
	`386`	`+ --spectrum-body-cjk-font-size: var(--spectrum-body-cjk-size-l);`
`383`	`387`	`}`
`384`	`388`
`385`	`389`	`.spectrum-Body--sizeXL {`
`386`	`390`	`--spectrum-body-font-size: var(--spectrum-body-size-xl);`
	`391`	`+ --spectrum-body-cjk-font-size: var(--spectrum-body-cjk-size-xl);`
`387`	`392`	`}`
`388`	`393`
`389`	`394`	`.spectrum-Body--sizeXXL {`
`390`	`395`	`--spectrum-body-font-size: var(--spectrum-body-size-xxl);`
	`396`	`+ --spectrum-body-cjk-font-size: var(--spectrum-body-cjk-size-xxl);`
`391`	`397`	`}`
`392`	`398`
`393`	`399`	`.spectrum-Body--sizeXXXL {`
`394`	`400`	`--spectrum-body-font-size: var(--spectrum-body-size-xxxl);`
	`401`	`+ --spectrum-body-cjk-font-size: var(--spectrum-body-cjk-size-xxxl);`
`395`	`402`	`}`
`396`	`403`
`397`	`404`	`/* Body styles */`
`@@ -433,6 +440,7 @@`
`433`	`440`	`font-family: var(--mod-body-cjk-font-family, var(--spectrum-body-cjk-font-family));`
`434`	`441`	`font-style: var(--mod-body-cjk-font-style, var(--spectrum-body-cjk-font-style));`
`435`	`442`	`font-weight: var(--mod-body-cjk-font-weight, var(--spectrum-body-cjk-font-weight));`
	`443`	`+ font-size: var(--mod-body-cjk-font-size, var(--spectrum-body-cjk-font-size));`
`436`	`444`
`437`	`445`	`line-height: var(--mod-body-cjk-line-height, var(--spectrum-body-cjk-line-height));`
`438`	`446`
`@@ -513,18 +521,22 @@`
`513`	`521`	`/* Detail t-shirt sizes */`
`514`	`522`	`.spectrum-Detail--sizeS {`
`515`	`523`	`--spectrum-detail-font-size: var(--spectrum-detail-size-s);`
	`524`	`+ --spectrum-detail-cjk-font-size: var(--spectrum-detail-cjk-size-s);`
`516`	`525`	`}`
`517`	`526`
`518`	`527`	`.spectrum-Detail--sizeM {`
`519`	`528`	`--spectrum-detail-font-size: var(--spectrum-detail-size-m);`
	`529`	`+ --spectrum-detail-cjk-font-size: var(--spectrum-detail-cjk-size-m);`
`520`	`530`	`}`
`521`	`531`
`522`	`532`	`.spectrum-Detail--sizeL {`
`523`	`533`	`--spectrum-detail-font-size: var(--spectrum-detail-size-l);`
	`534`	`+ --spectrum-detail-cjk-font-size: var(--spectrum-detail-cjk-size-l);`
`524`	`535`	`}`
`525`	`536`
`526`	`537`	`.spectrum-Detail--sizeXL {`
`527`	`538`	`--spectrum-detail-font-size: var(--spectrum-detail-size-xl);`
	`539`	`+ --spectrum-detail-cjk-font-size: var(--spectrum-detail-cjk-size-xl);`
`528`	`540`	`}`
`529`	`541`
`530`	`542`	`/* Detail styles */`
`@@ -567,6 +579,7 @@`
`567`	`579`	`font-family: var(--mod-detail-cjk-font-family, var(--spectrum-detail-cjk-font-family));`
`568`	`580`	`font-style: var(--mod-detail-cjk-font-style, var(--spectrum-detail-cjk-font-style));`
`569`	`581`	`font-weight: var(--mod-detail-cjk-font-weight, var(--spectrum-detail-cjk-font-weight));`
	`582`	`+ font-size: var(--mod-detail-cjk-font-size, var(--spectrum-detail-cjk-font-size));`
`570`	`583`
`571`	`584`	`line-height: var(--mod-detail-cjk-line-height, var(--spectrum-detail-cjk-line-height));`
`572`	`585`