Fix responsive issues, typography tokens

.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.

.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

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"
   },

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 });
         }
       }

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];
         }

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));

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"
       }

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);

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);

packages/storybook/.storybook/global.css

@@ -1,10 +1,8 @@
 body {
-  font-family: var(--tz-typography-200-regular-font-family);
-  font-size: var(--tz-typography-200-regular-font-size);
-  font-variation-settings: var(
-    --tz-typography-200-regular-font-variation-settings
-  );
-  font-weight: var(--tz-typography-200-regular-font-weight);
+  font-family: var(--tz-font-sans);
+  font-size: var(--tz-font-body-font-size);
+  font-variation-settings: var(--tz-font-body-font-variation-settings);
+  font-weight: var(--tz-font-body-font-weight);
   line-height: 1;
   margin: 0;
 }

packages/storybook/src/components/StickerSheet.module.css

@@ -9,11 +9,11 @@
 
 .th {
   color: var(--tz-text-secondary);
-  font-family: var(--tz-typography-family-mono);
-  font-size: var(--tz-typography-100-regular-font-size);
-  font-weight: var(--tz-typography-100-regular-font-weight);
-  letter-spacing: var(--tz-typography-100-regular-letter-spacing);
-  line-height: var(--tz-typography-100-regular-line-height);
+  font-family: var(--tz-font-mono);
+  font-size: var(--tz-font-label-small-font-size);
+  font-weight: var(--tz-font-label-small-font-weight);
+  letter-spacing: var(--tz-font-label-small-letter-spacing);
+  line-height: var(--tz-font-label-small-line-height);
   padding: var(--tz-space-100) var(--tz-space-200);
 
   &[scope="row"] {

packages/tiles/src/Button/Button.css

@@ -15,13 +15,13 @@
   color: var(--tz-button-text);
   cursor: pointer;
   display: inline-flex;
-  font-family: var(--tz-typography-200-medium-font-family);
-  font-size: var(--tz-typography-200-medium-font-size);
-  font-weight: var(--tz-typography-200-medium-font-weight);
+  font-family: var(--tz-font-sans);
+  font-size: var(--tz-font-body-strong-font-size);
+  font-weight: var(--tz-font-body-strong-font-weight);
   gap: var(--tz-button-gap);
   height: var(--tz-button-height);
   justify-content: center;
-  letter-spacing: var(--tz-typography-200-medium-letter-spacing);
+  letter-spacing: var(--tz-font-body-strong-letter-spacing);
   line-height: 1;
   outline-color: transparent;
   outline-offset: 2px;
@@ -40,8 +40,8 @@
   &[data-size="s"] {
     --tz-button-height: var(--tz-space-control-s);
 
-    font-size: var(--tz-typography-200-medium-font-size);
-    letter-spacing: var(--tz-typography-200-medium-letter-spacing);
+    font-size: var(--tz-font-body-strong-font-size);
+    letter-spacing: var(--tz-font-body-strong-letter-spacing);
   }
 
   &[data-variant="lime"] {

packages/tiles/src/Fieldset/Fieldset.css

@@ -9,10 +9,10 @@
 .tz-fieldset-legend {
   color: var(--tz-text-secondary);
   display: flex;
-  font-family: var(--tz-typography-200-regular-font-family);
-  font-size: var(--tz-typography-200-regular-font-size);
-  letter-spacing: var(--tz-typography-200-regular-letter-spacing);
-  line-height: var(--tz-typography-200-regular-line-height);
+  font-family: var(--tz-font-sans);
+  font-size: var(--tz-font-body-font-size);
+  letter-spacing: var(--tz-font-body-letter-spacing);
+  line-height: var(--tz-font-body-line-height);
   margin-bottom: var(--tz-space-300);
   position: static;
   width: 100%;

packages/tiles/src/Kbd/Kbd.css

@@ -6,12 +6,12 @@
   color: var(--tz-text-primary);
   cursor: default;
   display: inline-flex;
-  font-family: var(--tz-typography-family-mono);
+  font-family: var(--tz-font-mono);
   font-size: inherit;
-  font-weight: var(--tz-typography-300-regular-font-weight);
+  font-weight: var(--tz-font-body-font-weight);
   height: 1.5em;
   justify-content: center;
-  letter-spacing: var(--tz-typography-300-regular-letter-spacing);
+  letter-spacing: var(--tz-font-body-letter-spacing);
   line-height: inherit;
   padding: 0;
   user-select: none;

packages/tiles/src/OmniBar/OmniBar.css

@@ -19,11 +19,11 @@
   border: 1px solid var(--tz-omnibar-input-border);
   border-radius: var(--tz-radius-200);
   color: var(--tz-omnibar-input-text);
-  font-family: var(--tz-typography-200-regular-font-family);
-  font-size: var(--tz-typography-200-regular-font-size);
-  font-weight: var(--tz-typography-200-regular-font-weight);
+  font-family: var(--tz-font-sans);
+  font-size: var(--tz-font-body-font-size);
+  font-weight: var(--tz-font-body-font-weight);
   height: 2rem;
-  letter-spacing: var(--tz-typography-200-regular-letter-spacing);
+  letter-spacing: var(--tz-font-body-letter-spacing);
   line-height: 1;
   min-width: 5rem;
   outline: none;
@@ -109,12 +109,12 @@
 .tz-omnibar-resultdesc {
   border-bottom: 1px solid var(--tz-color-content-border);
   color: var(--tz-text-secondary);
-  font-family: var(--tz-typography-100-regular-font-family);
-  font-size: var(--tz-typography-100-regular-font-size);
-  font-style: var(--tz-typography-100-regular-font-style);
-  font-weight: var(--tz-typography-100-regular-font-weight);
-  letter-spacing: var(--tz-typography-100-regular-letter-spacing);
-  line-height: var(--tz-typography-100-regular-line-height);
+  font-family: var(--tz-font-sans);
+  font-size: var(--tz-font-label-small-font-size);
+  font-style: var(--tz-font-label-small-font-style);
+  font-weight: var(--tz-font-label-small-font-weight);
+  letter-spacing: var(--tz-font-label-small-letter-spacing);
+  line-height: var(--tz-font-label-small-line-height);
   padding-block-end: var(--tz-space-200);
   padding-inline: var(--tz-space-300);
 }

packages/tiles/src/Select/Select.css

@@ -4,10 +4,10 @@
   --tz-select-bg: var(--tz-color-base);
 
   color: var(--tz-select-text);
-  font-family: var(--tz-typography-300-regular-family);
-  font-size: var(--tz-typography-300-regular-font-size);
-  letter-spacing: var(--tz-typography-300-regular-letter-spacing);
-  line-height: var(--tz-typography-300-regular-line-height);
+  font-family: var(--tz-font-body-family);
+  font-size: var(--tz-font-body-font-size);
+  letter-spacing: var(--tz-font-body-letter-spacing);
+  line-height: var(--tz-font-body-line-height);
   position: relative;
   z-index: var(--tz-layer-menu);
 }
@@ -17,10 +17,10 @@
   border-radius: 3px;
   color: var(--tz-color-text-2);
   display: flex;
-  font-family: var(--tz-typography-300-regular-family);
-  font-size: var(--tz-typography-300-regular-font-size);
+  font-family: var(--tz-font-body-family);
+  font-size: var(--tz-font-body-font-size);
   height: var(--tz-space-control-m);
-  letter-spacing: var(--tz-typography-300-regular-letter-spacing);
+  letter-spacing: var(--tz-font-body-letter-spacing);
   line-height: 1;
   padding: 0 var(--tz-space-200);
   position: relative;
@@ -102,13 +102,13 @@
   color: var(--tz-color-text-1);
   cursor: pointer;
   display: inline-flex;
-  font-family: var(--tz-typography-300-regular-font-family);
-  font-size: var(--tz-typography-300-regular-font-size);
-  font-weight: var(--tz-typography-300-regular-font-weight);
+  font-family: var(--tz-font-sans);
+  font-size: var(--tz-font-body-font-size);
+  font-weight: var(--tz-font-body-font-weight);
   gap: var(--tz-space-200);
   height: var(--tz-space-control-m);
   justify-content: center;
-  letter-spacing: var(--tz-typography-300-regular-letter-spacing);
+  letter-spacing: var(--tz-font-body-letter-spacing);
   line-height: 1;
   outline: 1px solid transparent;
   padding: 0 var(--tz-space-200);

packages/tiles/src/Slider/Slider.css

@@ -89,7 +89,7 @@
 }
 
 .tz-slider-label {
-  font-size: var(--tz-typography-200-regular-font-size);
+  font-size: var(--tz-font-body-font-size);
   grid-area: label;
   user-select: none;
   white-space: nowrap;

packages/tiles/src/SubtleInput/SubtleInput.css

@@ -6,9 +6,9 @@
   border-radius: var(--tz-radius-200);
   color: var(--tz-subtle-input-text);
   display: flex;
-  font-family: var(--tz-typography-family-mono);
-  font-size: var(--tz-typography-200-regular-font-size);
-  font-weight: var(--tz-typography-200-regular-font-weight);
+  font-family: var(--tz-font-mono);
+  font-size: var(--tz-font-body-font-size);
+  font-weight: var(--tz-font-body-font-weight);
   gap: var(--tz-space-200);
   letter-spacing: 0;
   outline: 1px solid var(--tz-subtle-input-border);
@@ -31,10 +31,10 @@
   border: none;
   color: inherit;
   flex: 1 0 auto;
-  font-family: var(--tz-typography-family-mono);
-  font-size: var(--tz-typography-200-regular-font-size);
+  font-family: var(--tz-font-mono);
+  font-size: var(--tz-font-body-font-size);
   font-variant-ligatures: none;
-  font-weight: var(--tz-typography-200-regular-font-weight);
+  font-weight: var(--tz-font-body-font-weight);
   line-height: var(--height);
   min-width: calc(4 * var(--height));
   outline: none;

packages/tiles/src/Switch/Switch.css

@@ -29,11 +29,11 @@
   cursor: pointer;
   display: flex;
   flex: 1 0 auto;
-  font-family: var(--tz-typography-300-regular-font-family);
-  font-size: var(--tz-typography-300-regular-font-size);
-  font-weight: var(--tz-typography-300-regular-font-weight);
+  font-family: var(--tz-font-sans);
+  font-size: var(--tz-font-body-font-size);
+  font-weight: var(--tz-font-body-font-weight);
   gap: var(--tz-space-300);
-  letter-spacing: var(--tz-typography-300-regular-letter-spacing);
+  letter-spacing: var(--tz-font-body-letter-spacing);
   line-height: 1;
 
   &::before {