fix: update line heights (#41)

ogcio · Jun 5, 2024 · 9853ae4 · 9853ae4
1 parent ea59378
commit 9853ae4
Show file tree

Hide file tree

Showing 10 changed files with 263 additions and 270 deletions.
diff --git a/apps/docs/src/app/[...slug]/page.tsx b/apps/docs/src/app/[...slug]/page.tsx
@@ -28,7 +28,7 @@ export default function DocPage({ params }: DocPageProps) {
         {document.draft ? <Draft /> : null}
       </div>
       {document.status !== 'coming-soon' ? (
-        <div>
+        <div className="flex flex-col gap-xl">
           <Mdx code={document.body.code} />
         </div>
       ) : null}

diff --git a/apps/docs/src/components/document/typography/font-table.tsx b/apps/docs/src/components/document/typography/font-table.tsx
@@ -25,7 +25,9 @@ export function FontTable<TValue>({
             <Td className="whitespace-nowrap w-[1px] text-sm">
               <TokenName name={`${name}/${id}`} />
             </Td>
-            <Td className="text-sm">{renderValue(value)}</Td>
+            <Td className="whitespace-nowrap w-[30%] text-sm">
+              {renderValue(value)}
+            </Td>
             <Td>{renderExample(value)}</Td>
           </tr>
         );

diff --git a/apps/docs/src/components/document/typography/typography.tsx b/apps/docs/src/components/document/typography/typography.tsx
@@ -1,15 +1,22 @@
 import { meta } from '@govie-ds/tokens';
-import { objectKeys } from 'ts-extras';
-import { Table, Td } from './table';
-import { TokenName } from '../color/token-name';
-import { P } from 'vitest/dist/reporters-yx5ZTtEV.js';
+import { Td } from './table';
+import { FontTable } from './font-table';
+import { Heading } from '@/components/typography/heading';
 
 function remToPx(remString: string) {
   return `${Number(remString.replace('rem', '')) * 16}px`;
 }
 
-function unitlessToPx(unitless: number) {
-  return `${unitless * 16}px`;
+function lineHeightToPx({
+  fontSize,
+  lineHeight,
+}: {
+  fontSize: string;
+  lineHeight: number;
+}) {
+  const unitless = Number(fontSize.replace('rem', '')) * lineHeight * 16;
+  const pixels = Number.isInteger(unitless) ? unitless : unitless.toFixed(2);
+  return `${pixels}px`;
 }
 
 function CellLabel({ label }: { label: string }) {
@@ -28,91 +35,80 @@ function TypographyCell({
   lineHeight: number;
 }) {
   return (
-    <Td className="text-sm">
-      <div className="grid grid-cols-2">
-        <CellLabel label="Font family" />
-        <p>{fontFamily.join(', ')}</p>
-        <CellLabel label="Font size" />
-        <p>
-          {fontSize} ({remToPx(fontSize)})
-        </p>
-        <CellLabel label="Font weight" />
-        <p>{fontWeight}</p>
-        <CellLabel label="Line height" />
-        <p>
-          {lineHeight} ({unitlessToPx(lineHeight)})
-        </p>
-      </div>
-    </Td>
+    <div className="grid grid-cols-[auto,1fr] gap-x-md gap-y-sm">
+      <CellLabel label="Font family" />
+      <p>{fontFamily.join(', ')}</p>
+      <CellLabel label="Font size" />
+      <p>
+        {fontSize}{' '}
+        <span className="text-xs font-light">(e.g. {remToPx(fontSize)})</span>
+      </p>
+      <CellLabel label="Font weight" />
+      <p>{fontWeight}</p>
+      <CellLabel label="Line height" />
+      <p>
+        {lineHeight}{' '}
+        <span className="text-xs font-light">
+          (e.g. {lineHeightToPx({ fontSize, lineHeight })})
+        </span>
+      </p>
+    </div>
   );
 }
 
+type Font = {
+  fontFamily: string[];
+  fontSize: string;
+  fontWeight: number;
+  lineHeight: number;
+};
+
 // TODO: type
 function TypographyTable({
   name,
   tokens,
 }: {
   name: string;
-  tokens: Record<string, { regular: any; bold: any }>;
+  tokens: Record<string, any>;
 }) {
   return (
-    <Table
-      headers={['Token', 'Regular', 'Bold']} // , 'Example']}
-      ids={objectKeys(tokens)}
-      renderRow={(id) => {
-        const { $value: regularValue } = tokens[id].regular;
-
-        const { $value: boldValue } = tokens[id].bold;
-
-        const {
-          fontFamily: fontFamilyRegular,
-          fontSize: fontSizeRegular,
-          fontWeight: fontWeightRegular,
-          lineHeight: lineHeightRegular,
-        } = regularValue;
-
-        const {
-          fontFamily: fontFamilyBold,
-          fontSize: fontSizeBold,
-          fontWeight: fontWeightBold,
-          lineHeight: lineHeightBold,
-        } = boldValue;
-
-        return (
-          <tr key={id}>
-            <Td className="whitespace-nowrap w-[1px] text-sm">
-              <TokenName name={`${name}/${id}`} />
-            </Td>
-            <TypographyCell
-              fontFamily={fontFamilyRegular}
-              fontSize={fontSizeRegular}
-              fontWeight={fontWeightRegular}
-              lineHeight={lineHeightRegular}
-            />
-            <TypographyCell
-              fontFamily={fontFamilyBold}
-              fontSize={fontSizeBold}
-              fontWeight={fontWeightBold}
-              lineHeight={lineHeightBold}
-            />
-          </tr>
-        );
-      }}
+    <FontTable<Font>
+      name={name}
+      tokens={tokens}
+      renderValue={(value) => <TypographyCell {...value} />}
+      renderExample={(value) => (
+        <span
+          style={{
+            fontFamily: value.fontFamily.join(', '),
+            fontSize: value.fontSize,
+            fontWeight: value.fontWeight,
+            lineHeight: value.lineHeight,
+          }}
+        >
+          The quick brown fox jumps over the lazy dog.
+        </span>
+      )}
     />
   );
 }
 
 export function Typography() {
   return (
     <div className="flex flex-col gap-2xl">
-      <TypographyTable
-        name="heading"
-        tokens={meta.light.resolved.primitive.heading}
-      />
-      <TypographyTable
-        name="text"
-        tokens={meta.light.resolved.primitive.text}
-      />
+      <div className="flex flex-col gap-xl">
+        <Heading as="h3">Heading</Heading>
+        <TypographyTable
+          name="heading/regular"
+          tokens={meta.light.resolved.primitive.heading.regular}
+        />
+      </div>
+      <div className="flex flex-col gap-xl">
+        <Heading as="h3">Text</Heading>
+        <TypographyTable
+          name="text/regular"
+          tokens={meta.light.resolved.primitive.text.regular}
+        />
+      </div>
     </div>
   );
 }
diff --git a/package.json b/package.json
@@ -13,6 +13,7 @@
     "ds:build": "nx run @govie-ds/docs:build",
     "ds:build:prod": "nx run @govie-ds/docs:build:prod",
     "build": "nx run-many --target=build --all",
+    "build:libs": "nx run-many --target=build --all --exclude=@govie-ds/docs",
     "test": "nx run-many --target=test --all --verbose",
     "tokens:build": "nx run @govie-ds/tokens:build",
     "govie:build": "nx run @govie-ds/theme-govie:build",

diff --git a/packages/design/theme-builder/validation/schema/heading-schema.ts b/packages/design/theme-builder/validation/schema/heading-schema.ts
@@ -1,20 +1,34 @@
 import { z } from 'zod';
-import { createTypographySetSchema } from './shared.js';
+import { createTypographySchema } from './shared.js';
+
+function createTypographySetSchema(name: string) {
+  return z
+    .object(
+      {
+        '2xs': createTypographySchema('2xs'),
+        xs: createTypographySchema('xs'),
+        sm: createTypographySchema('sm'),
+        md: createTypographySchema('md'),
+        lg: createTypographySchema('lg'),
+        xl: createTypographySchema('xl'),
+        '2xl': createTypographySchema('2xl'),
+        '3xl': createTypographySchema('3xl'),
+        '4xl': createTypographySchema('4xl'),
+        '5xl': createTypographySchema('5xl'),
+        '6xl': createTypographySchema('6xl'),
+      },
+      {
+        required_error: `${name} is required.`,
+      },
+    )
+    .strict();
+}
 
 export const headingSchema = z
   .object(
     {
-      '2xs': createTypographySetSchema('2xs'),
-      xs: createTypographySetSchema('xs'),
-      sm: createTypographySetSchema('sm'),
-      md: createTypographySetSchema('md'),
-      lg: createTypographySetSchema('lg'),
-      xl: createTypographySetSchema('xl'),
-      '2xl': createTypographySetSchema('2xl'),
-      '3xl': createTypographySetSchema('3xl'),
-      '4xl': createTypographySetSchema('4xl'),
-      '5xl': createTypographySetSchema('5xl'),
-      '6xl': createTypographySetSchema('6xl'),
+      regular: createTypographySetSchema('regular'),
+      bold: createTypographySetSchema('bold'),
     },
     {
       required_error: 'Heading is required.',

diff --git a/packages/design/theme-builder/validation/schema/shared.ts b/packages/design/theme-builder/validation/schema/shared.ts
@@ -115,24 +115,12 @@ function createTypographyValueSchema(name: string) {
     .strict();
 }
 
-function createTypographySchema(name: string) {
+export function createTypographySchema(name: string) {
   return createTokenSchema({
     type: 'typography',
     valueSchema: createTypographyValueSchema(name),
     name,
   });
 }
 
-export function createTypographySetSchema(name: string) {
-  return z
-    .object(
-      {
-        regular: createTypographySchema('regular'),
-        bold: createTypographySchema('bold'),
-      },
-      {
-        required_error: `${name} is required.`,
-      },
-    )
-    .strict();
-}
+
diff --git a/packages/design/theme-builder/validation/schema/text-schema.ts b/packages/design/theme-builder/validation/schema/text-schema.ts
@@ -1,14 +1,28 @@
 import { z } from 'zod';
-import { createTypographySetSchema } from './shared.js';
+import { createTypographySchema } from './shared.js';
+
+function createTypographySetSchema(name: string) {
+  return z
+    .object(
+      {
+        sm: createTypographySchema('sm'),
+        md: createTypographySchema('md'),
+        lg: createTypographySchema('lg'),
+        xl: createTypographySchema('xl'),
+        '2xl': createTypographySchema('2xl'),
+      },
+      {
+        required_error: `${name} is required.`,
+      },
+    )
+    .strict();
+}
 
 export const textSchema = z
   .object(
     {
-      sm: createTypographySetSchema('sm'),
-      md: createTypographySetSchema('md'),
-      lg: createTypographySetSchema('lg'),
-      xl: createTypographySetSchema('xl'),
-      '2xl': createTypographySetSchema('2xl'),
+      regular: createTypographySetSchema('regular'),
+      bold: createTypographySetSchema('bold'),      
     },
     {
       required_error: 'Text is required.',

diff --git a/tokens/tokens/light/primitive/font.json b/tokens/tokens/light/primitive/font.json
@@ -50,19 +50,19 @@
       },
       "lineHeight": {
         "50": { "$type": "number", "$value": 0.75 },
-        "100": { "$type": "number", "$value": 1 },
-        "200": { "$type": "number", "$value": 1.25 },
-        "300": { "$type": "number", "$value": 1.5 },
-        "400": { "$type": "number", "$value": 1.75 },
-        "500": { "$type": "number", "$value": 2 },
-        "600": { "$type": "number", "$value": 2.25 },
-        "700": { "$type": "number", "$value": 2.5 },
-        "800": { "$type": "number", "$value": 2.75 },
-        "900": { "$type": "number", "$value": 3 },
-        "1000": { "$type": "number", "$value": 3.5 },
-        "1100": { "$type": "number", "$value": 4 },
-        "1200": { "$type": "number", "$value": 4.5 },
-        "1300": { "$type": "number", "$value": 5.5 }
+        "100": { "$type": "number", "$value": 0.825 },
+        "200": { "$type": "number", "$value": 1 },
+        "300": { "$type": "number", "$value": 1.1 },
+        "400": { "$type": "number", "$value": 1.125 },
+        "500": { "$type": "number", "$value": 1.15 },
+        "600": { "$type": "number", "$value": 1.2 },
+        "700": { "$type": "number", "$value": 1.25 },
+        "800": { "$type": "number", "$value": 1.3 },
+        "900": { "$type": "number", "$value": 1.4 },
+        "1000": { "$type": "number", "$value": 1.5 },
+        "1100": { "$type": "number", "$value": 1.55 },
+        "1200": { "$type": "number", "$value": 1.6 },
+        "1300": { "$type": "number", "$value": 2 }
       },
       "letterSpacing": {
         "100": { "$type": "dimension", "$value": "-0.05rem" },