fix: add lineHeight/letterSpacing expand overrides (#307)

tokens-studio · Aug 2, 2024 · 4fe336f · 4fe336f
1 parent 0dea2af
commit 4fe336f
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 5 deletions.
diff --git a/.changeset/dry-sheep-kick.md b/.changeset/dry-sheep-kick.md
@@ -0,0 +1,5 @@
+---
+'@tokens-studio/sd-transforms': patch
+---
+
+Override lineHeight expandTypesMap from SD. Add letterSpacing override. This is needed for our lineHeight and letterSpacing transforms to apply.
diff --git a/src/index.ts b/src/index.ts
@@ -33,6 +33,14 @@ export const expandTypesMap = {
     // because no DTCG type that currently exists provides a good match.
     // for fontWeight: recognized fontWeight keys (e.g. "regular")
     // for lineHeight: lineHeights can be both dimension or number
+
+    // overrides https://github.com/amzn/style-dictionary/blob/main/lib/utils/expandObjectTokens.js#L54-L55
+    // so that our lineHeight and letterSpacing transforms can still apply
+    lineHeight: 'lineHeight',
+
+    // this one can be removed once we can rely on preExpand meta:
+    // https://github.com/amzn/style-dictionary/pull/1269
+    letterSpacing: 'letterSpacing',
   },
   composition: {
     boxShadow: 'shadow',

diff --git a/test/integration/expand-composition.test.ts b/test/integration/expand-composition.test.ts
@@ -99,7 +99,7 @@ describe('expand composition tokens', () => {
   --sdTypographyFontWeight: 800;
   --sdTypographyLineHeight: 1.25;
   --sdTypographyFontSize: 26px;
-  --sdTypographyLetterSpacing: 0rem;
+  --sdTypographyLetterSpacing: 1.25em;
   --sdTypographyParagraphSpacing: 0rem;
   --sdTypographyParagraphIndent: 0rem;
   --sdTypographyTextDecoration: none;
@@ -138,7 +138,7 @@ describe('expand composition tokens', () => {
   --sdRefFontWeight: 800;
   --sdRefLineHeight: 1.25;
   --sdRefFontSize: 26px;
-  --sdRefLetterSpacing: 0rem;
+  --sdRefLetterSpacing: 1.25em;
   --sdRefParagraphSpacing: 0rem;
   --sdRefParagraphIndent: 0rem;
   --sdRefTextDecoration: none;
@@ -148,7 +148,7 @@ describe('expand composition tokens', () => {
   --sdDeepRefFontWeight: 800;
   --sdDeepRefLineHeight: 1.25;
   --sdDeepRefFontSize: 26px;
-  --sdDeepRefLetterSpacing: 0rem;
+  --sdDeepRefLetterSpacing: 1.25em;
   --sdDeepRefParagraphSpacing: 0rem;
   --sdDeepRefParagraphIndent: 0rem;
   --sdDeepRefTextDecoration: none;

diff --git a/test/integration/tokens/expand-composition.tokens.json b/test/integration/tokens/expand-composition.tokens.json
@@ -33,9 +33,9 @@
     "value": {
       "fontFamily": "Arial",
       "fontWeight": "{fontWeightRef}",
-      "lineHeight": "1.25",
+      "lineHeight": "125%",
       "fontSize": "26",
-      "letterSpacing": "0",
+      "letterSpacing": "125%",
       "paragraphSpacing": "0",
       "paragraphIndent": "0",
       "textDecoration": "none",