Fix responsive issues, typography tokens (#387)

* Fix responsive issues, typography tokens * Ignore .turbo from publishing * Update test fixture
terrazzoapp · Dec 9, 2024 · f14224b · f14224b
1 parent b5b2879
commit f14224b
Show file tree

Hide file tree

Showing 54 changed files with 754 additions and 770 deletions.
diff --git a/.changeset/healthy-icons-design.md b/.changeset/healthy-icons-design.md
@@ -0,0 +1,7 @@
+---
+"@terrazzo/cli": patch
+"@terrazzo/parser": patch
+"@terrazzo/token-tools": patch
+---
+
+Fix incorrect parsing of typography tokens’ lineHeight when it’s a dimension value.
diff --git a/.changeset/quiet-files-change.md b/.changeset/quiet-files-change.md
@@ -0,0 +1,7 @@
+---
+"@terrazzo/parser": patch
+"@terrazzo/cli": patch
+"@terrazzo/token-tools": patch
+---
+
+Fix warning on parsing dimension tokens in typography tokens
diff --git a/packages/cli/.npmignore b/packages/cli/.npmignore
@@ -1,3 +1,4 @@
+.turbo
 biome.json
 src/**
 test/**

diff --git a/packages/icons/.npmignore b/packages/icons/.npmignore
@@ -1,3 +1,4 @@
+.turbo
 biome.json
 src/**
 rollup.*

diff --git a/packages/parser/.npmignore b/packages/parser/.npmignore
@@ -1,3 +1,4 @@
+.turbo
 biome.json
 test/
 tsconfig.*

diff --git a/packages/parser/package.json b/packages/parser/package.json
@@ -31,6 +31,7 @@
   "license": "MIT",
   "scripts": {
     "build": "tsc -p tsconfig.build.json",
+    "dev": "pnpm run build --watch",
     "lint": "biome check .",
     "test": "vitest run"
   },

diff --git a/packages/parser/src/parse/index.ts b/packages/parser/src/parse/index.ts
@@ -253,7 +253,7 @@ async function parseSingle(
   const $typeInheritance: Record<string, Token['$type']> = {};
   traverse(document, {
     enter(node, parent, path) {
-      if (node.type === 'Member' && node.value.type === 'Object' && node.value.members) {
+      if (node.type === 'Member' && node.value.type === 'Object' && node.value.members && !path.includes('$value')) {
         const members = getObjMembers(node.value);
 
         // keep track of $types
@@ -370,7 +370,7 @@ async function parseSingle(
           }
 
           tokens[id] = token;
-        } else if (!id.includes('.$value') && members.value) {
+        } else if (!path.includes('.$value') && members.value) {
           logger.warn({ message: `Group ${id} has "value". Did you mean "$value"?`, filename, node, src });
         }
       }

diff --git a/packages/parser/src/parse/normalize.ts b/packages/parser/src/parse/normalize.ts
@@ -168,10 +168,18 @@ export default function normalizeValue<T extends Token>(token: T): T['$value'] {
       const output: TypographyValueNormalized = {};
       for (const k in token.$value) {
         switch (k) {
-          case 'letterSpacing':
           case 'fontSize':
+          case 'letterSpacing': {
             output[k] = normalizeValue({ $type: 'dimension', $value: token.$value[k] as DimensionValue });
             break;
+          }
+          case 'lineHeight': {
+            output[k] = normalizeValue({
+              $type: typeof token.$value === 'number' ? 'number' : 'dimension',
+              $value: token.$value[k] as any,
+            });
+            break;
+          }
           default:
             output[k] = token.$value[k];
         }

diff --git a/packages/parser/test/parse.test.ts b/packages/parser/test/parse.test.ts
@@ -2219,7 +2219,7 @@ font:
                     fontVariant: 'small-caps',
                     fontWeight: 400,
                     letterSpacing: { value: 0.125, unit: 'em' },
-                    lineHeight: 1.5,
+                    lineHeight: { value: 24, unit: 'px' },
                     textDecoration: 'underline',
                     textTransform: 'uppercase',
                   },
@@ -2236,14 +2236,62 @@ font:
                 fontVariant: 'small-caps',
                 fontWeight: 400,
                 letterSpacing: { value: 0.125, unit: 'em' },
-                lineHeight: 1.5,
+                lineHeight: { value: 24, unit: 'px' },
                 textDecoration: 'underline',
                 textTransform: 'uppercase',
               },
             },
           },
         },
       ],
+      [
+        'lineHeight: number',
+        {
+          given: [
+            {
+              filename: DEFAULT_FILENAME,
+              src: {
+                typography: {
+                  $type: 'typography',
+                  $value: {
+                    lineHeight: 1.5,
+                  },
+                },
+              },
+            },
+          ],
+          want: { tokens: { typography: { lineHeight: 1.5 } } },
+        },
+      ],
+      [
+        'dimension (legacy format)',
+        {
+          given: [
+            {
+              filename: DEFAULT_FILENAME,
+              src: {
+                typography: {
+                  $type: 'typography',
+                  $value: {
+                    fontSize: '16px',
+                    letterSpacing: '0.001em',
+                    lineHeight: '24px',
+                  },
+                },
+              },
+            },
+          ],
+          want: {
+            tokens: {
+              typography: {
+                fontSize: { value: 16, unit: 'px' },
+                letterSpacing: { value: 0.001, unit: 'em' },
+                lineHeight: { value: 24, unit: 'px' },
+              },
+            },
+          },
+        },
+      ],
     ];
 
     it.each(tests)('%s', (_, testCase) => runTest(testCase));

diff --git a/packages/plugin-css/.npmignore b/packages/plugin-css/.npmignore
@@ -1,3 +1,4 @@
+.turbo
 biome.json
 src/**
 test/**

diff --git a/packages/plugin-css/test/fixtures/type-typography/tokens.json b/packages/plugin-css/test/fixtures/type-typography/tokens.json
@@ -23,7 +23,7 @@
         "fontSize": { "value": 18, "unit": "px" },
         "fontVariationSettings": "\"wght\" 130, \"opsz\" 100, \"wdth\" 50",
         "fontWeight": 500,
-        "lineHeight": 1.375,
+        "lineHeight": { "value": 24, "unit": "px" },
         "letterSpacing": { "value": 0.25, "unit": "em" },
         "textTransform": "uppercase"
       }

diff --git a/packages/plugin-css/test/fixtures/type-typography/want.css b/packages/plugin-css/test/fixtures/type-typography/want.css
@@ -16,7 +16,7 @@
   --ds-typography-subheading-font-size: 18px;
   --ds-typography-subheading-font-variation-settings: "wght" 130, "opsz" 100, "wdth" 50;
   --ds-typography-subheading-font-weight: 500;
-  --ds-typography-subheading-line-height: 1.375;
+  --ds-typography-subheading-line-height: 24px;
   --ds-typography-subheading-letter-spacing: 0.25em;
   --ds-typography-subheading-text-transform: uppercase;
   --ds-typography-callout-font-family: var(--ds-typography-family-body);

diff --git a/packages/plugin-js/.npmignore b/packages/plugin-js/.npmignore
@@ -1,3 +1,4 @@
+.turbo
 biome.json
 src/**
 test/**

diff --git a/packages/plugin-js/test/typography/want.js b/packages/plugin-js/test/typography/want.js
@@ -25,56 +25,80 @@ export const tokens = {
         "unit": "px"
       },
       "fontWeight": 400,
-      "lineHeight": "41px"
+      "lineHeight": {
+        "value": 41,
+        "unit": "px"
+      }
     },
     "xs": {
       "fontSize": {
         "value": 31,
         "unit": "px"
       },
-      "lineHeight": "38px"
+      "lineHeight": {
+        "value": 38,
+        "unit": "px"
+      }
     },
     "s": {
       "fontSize": {
         "value": 32,
         "unit": "px"
       },
-      "lineHeight": "39px"
+      "lineHeight": {
+        "value": 39,
+        "unit": "px"
+      }
     },
     "m": {
       "fontSize": {
         "value": 33,
         "unit": "px"
       },
-      "lineHeight": "40px"
+      "lineHeight": {
+        "value": 40,
+        "unit": "px"
+      }
     },
     "l": {
       "fontSize": {
         "value": 34,
         "unit": "px"
       },
-      "lineHeight": "41px"
+      "lineHeight": {
+        "value": 41,
+        "unit": "px"
+      }
     },
     "xl": {
       "fontSize": {
         "value": 36,
         "unit": "px"
       },
-      "lineHeight": "43px"
+      "lineHeight": {
+        "value": 43,
+        "unit": "px"
+      }
     },
     "2xl": {
       "fontSize": {
         "value": 38,
         "unit": "px"
       },
-      "lineHeight": "46px"
+      "lineHeight": {
+        "value": 46,
+        "unit": "px"
+      }
     },
     "3xl": {
       "fontSize": {
         "value": 40,
         "unit": "px"
       },
-      "lineHeight": "48px"
+      "lineHeight": {
+        "value": 48,
+        "unit": "px"
+      }
     },
   },
   "typography.body": {
@@ -87,56 +111,80 @@ export const tokens = {
         "unit": "px"
       },
       "fontWeight": 400,
-      "lineHeight": "22px"
+      "lineHeight": {
+        "value": 22,
+        "unit": "px"
+      }
     },
     "xs": {
       "fontSize": {
         "value": 14,
         "unit": "px"
       },
-      "lineHeight": "19px"
+      "lineHeight": {
+        "value": 19,
+        "unit": "px"
+      }
     },
     "s": {
       "fontSize": {
         "value": 15,
         "unit": "px"
       },
-      "lineHeight": "20px"
+      "lineHeight": {
+        "value": 20,
+        "unit": "px"
+      }
     },
     "m": {
       "fontSize": {
         "value": 16,
         "unit": "px"
       },
-      "lineHeight": "21px"
+      "lineHeight": {
+        "value": 21,
+        "unit": "px"
+      }
     },
     "l": {
       "fontSize": {
         "value": 17,
         "unit": "px"
       },
-      "lineHeight": "22px"
+      "lineHeight": {
+        "value": 22,
+        "unit": "px"
+      }
     },
     "xl": {
       "fontSize": {
         "value": 19,
         "unit": "px"
       },
-      "lineHeight": "24px"
+      "lineHeight": {
+        "value": 24,
+        "unit": "px"
+      }
     },
     "2xl": {
       "fontSize": {
         "value": 21,
         "unit": "px"
       },
-      "lineHeight": "26px"
+      "lineHeight": {
+        "value": 26,
+        "unit": "px"
+      }
     },
     "3xl": {
       "fontSize": {
         "value": 23,
         "unit": "px"
       },
-      "lineHeight": "29px"
+      "lineHeight": {
+        "value": 29,
+        "unit": "px"
+      }
     },
   },
 };

diff --git a/packages/plugin-sass/.npmignore b/packages/plugin-sass/.npmignore
@@ -1,3 +1,4 @@
+.turbo
 biome.json
 src/**
 test/**

diff --git a/packages/plugin-swift/.npmignore b/packages/plugin-swift/.npmignore
@@ -1,3 +1,4 @@
+.turbo
 biome.json
 src/**
 test/**

diff --git a/packages/plugin-tailwind/.npmignore b/packages/plugin-tailwind/.npmignore
@@ -1,3 +1,4 @@
+.turbo
 biome.json
 src/**
 test/**

diff --git a/packages/react-color-picker/.npmignore b/packages/react-color-picker/.npmignore
@@ -1,5 +1,6 @@
 *.test.*
 .size-limit.js
+.turbo
 biome.*
 rollup.*
 src/**

diff --git a/packages/react-color-picker/src/components/ColorPicker.css b/packages/react-color-picker/src/components/ColorPicker.css
@@ -24,10 +24,10 @@
   border-radius: var(--tz-radius-300);
   color: var(--tz-color-picker-input);
   flex: 1 0 auto;
-  font-family: var(--tz-typography-family-mono);
-  font-size: var(--tz-typography-100-regular-font-size);
+  font-family: var(--tz-font-mono);
+  font-size: var(--tz-font-label-small-font-size);
   font-variant-ligatures: none;
-  font-weight: var(--tz-typography-100-regular-font-weight);
+  font-weight: var(--tz-font-label-small-font-weight);
   height: var(--tz-space-control-m);
   letter-spacing: 0;
   line-height: var(--tz-space-control-m);
-Original file line number
+Diff line change
@@ -1,3 +1,4 @@
+    .turbo
     biome.json
     src/**
     test/**
@@ Expand Down @@