feat(typography): refine cjk font-sizing, weight, spacing

Updates the typography styles to introduce specialized font sizes for cjk at different t-shirt sizes. Additionally, changes the weight and letter-spacing for some of those styles.
adobe · Sep 27, 2024 · 56c7da4 · 56c7da4
1 parent 34c86f3
commit 56c7da4
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 0 deletions.
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`                 |