fix: update figma typography output (#37)

ogcio · Jun 4, 2024 · 54c5336 · 54c5336
1 parent 10355e5
commit 54c5336
Show file tree

Hide file tree

Showing 16 changed files with 571 additions and 221 deletions.
diff --git a/apps/docs/content/2-foundations/1-design-tokens/3-typography.mdx b/apps/docs/content/2-foundations/1-design-tokens/3-typography.mdx
@@ -7,8 +7,8 @@ status: in-development
 
 ## Font Sizes
 
-<FontSizes />
+<FontSizesTable />
 
 ## Font Weights
 
-<FontWeights />
+<FontWeightsTable />
diff --git a/apps/docs/src/components/document/mdx.tsx b/apps/docs/src/components/document/mdx.tsx
@@ -1,8 +1,8 @@
 import { useMDXComponent } from 'next-contentlayer/hooks';
 import { Heading } from '../typography/heading';
 import { ColorPrimitives } from '@/components/document/color/color-primitives';
-import { FontSizes } from './typography/font-sizes';
-import { FontWeights } from './typography/font-weights';
+import { FontSizesTable } from './typography/font-sizes-table';
+import { FontWeightsTable } from './typography/font-weights-table';
 
 export type MdxProps = {
   code: string;
@@ -16,8 +16,8 @@ export function Mdx({ code }: MdxProps) {
       components={{
         h2: ({ children }) => <Heading as="h2">{children}</Heading>,
         ColorPrimitives: () => <ColorPrimitives />,
-        FontSizes: () => <FontSizes />,
-        FontWeights: () => <FontWeights />,
+        FontSizesTable: () => <FontSizesTable />,
+        FontWeightsTable: () => <FontWeightsTable />,
       }}
     />
   );

diff --git a/...onents/document/typography/font-sizes.tsx → .../document/typography/font-sizes-table.tsx b/...onents/document/typography/font-sizes.tsx → .../document/typography/font-sizes-table.tsx
@@ -3,7 +3,7 @@ import { objectKeys } from 'ts-extras';
 import { TokenName } from '../color/token-name';
 import { Table, Td } from './table';
 
-export function FontSizes() {
+export function FontSizesTable() {
   return (
     <Table
       headers={['Token', 'Value', 'Example']}

diff --git a/...ents/document/typography/font-weights.tsx → ...ocument/typography/font-weights-table.tsx b/...ents/document/typography/font-weights.tsx → ...ocument/typography/font-weights-table.tsx
@@ -3,7 +3,7 @@ import { objectKeys } from 'ts-extras';
 import { TokenName } from '../color/token-name';
 import { Table, Td } from './table';
 
-export function FontWeights() {
+export function FontWeightsTable() {
   return (
     <Table
       headers={['Token', 'Value', 'Example']}

diff --git a/packages/design/theme-builder/validation/schema/font-schema.ts b/packages/design/theme-builder/validation/schema/font-schema.ts
@@ -1,119 +1,121 @@
-import { z } from "zod";
+import { z } from 'zod';
 import {
   createStringArraySchema,
   createTokenSchema,
   createIntegerSchema,
   createNumberSchema,
   createRemSchema,
-} from "./shared.js";
+} from './shared.js';
 
 function createFontFamilySchema(name: string) {
   return createTokenSchema({
-    type: "fontFamily",
-    valueSchema: createStringArraySchema("Font family"),
-    name
-  })
+    type: 'fontFamily',
+    valueSchema: createStringArraySchema('Font family'),
+    name,
+  });
 }
 
-const fontFamilySchema = z.object({
-  "primary": createFontFamilySchema("primary"),
-  "secondary": createFontFamilySchema("secondary"),
-  "tertiary": createFontFamilySchema("tertiary")
-}).strict()
+const fontFamilySchema = z
+  .object({
+    primary: createFontFamilySchema('primary'),
+    secondary: createFontFamilySchema('secondary'),
+    tertiary: createFontFamilySchema('tertiary'),
+  })
+  .strict();
 
 function createFontSizeSchema(name: string) {
   return createTokenSchema({
-    type: "dimension",
-    valueSchema: createRemSchema("Font size"),
+    type: 'dimension',
+    valueSchema: createRemSchema('Font size'),
     name,
   });
 }
 
 const fontSizeSchema = z
   .object({
-    "100": createFontSizeSchema("100"),
-    "200": createFontSizeSchema("200"),
-    "300": createFontSizeSchema("300"),
-    "400": createFontSizeSchema("400"),
-    "500": createFontSizeSchema("500"),
-    "600": createFontSizeSchema("600"),
-    "700": createFontSizeSchema("700"),
-    "800": createFontSizeSchema("800"),
-    "900": createFontSizeSchema("900"),
-    "1000": createFontSizeSchema("1000"),
-    "1100": createFontSizeSchema("1100"),
-    "1200": createFontSizeSchema("1200"),
-    "1300": createFontSizeSchema("1300"),
+    '100': createFontSizeSchema('100'),
+    '200': createFontSizeSchema('200'),
+    '300': createFontSizeSchema('300'),
+    '400': createFontSizeSchema('400'),
+    '500': createFontSizeSchema('500'),
+    '600': createFontSizeSchema('600'),
+    '700': createFontSizeSchema('700'),
+    '800': createFontSizeSchema('800'),
+    '900': createFontSizeSchema('900'),
+    '1000': createFontSizeSchema('1000'),
+    '1100': createFontSizeSchema('1100'),
+    '1200': createFontSizeSchema('1200'),
+    '1300': createFontSizeSchema('1300'),
   })
   .strict();
 
 function createFontWeightSchema(name: string) {
   return createTokenSchema({
-    type: "fontWeight",
-    valueSchema: createIntegerSchema("Font weight"),
+    type: 'fontWeight',
+    valueSchema: createIntegerSchema('Font weight'),
     name,
   });
 }
 
 const fontWeightSchema = z
   .object({
-    "100": createFontWeightSchema("100"),
-    "200": createFontWeightSchema("200"),
-    "300": createFontWeightSchema("300"),
-    "400": createFontWeightSchema("400"),
-    "500": createFontWeightSchema("500"),
-    "600": createFontWeightSchema("600"),
-    "700": createFontWeightSchema("700"),
-    "800": createFontWeightSchema("800"),
-    "900": createFontWeightSchema("900"),
+    '100': createFontWeightSchema('100'),
+    '200': createFontWeightSchema('200'),
+    '300': createFontWeightSchema('300'),
+    '400': createFontWeightSchema('400'),
+    '500': createFontWeightSchema('500'),
+    '600': createFontWeightSchema('600'),
+    '700': createFontWeightSchema('700'),
+    '800': createFontWeightSchema('800'),
+    '900': createFontWeightSchema('900'),
   })
   .strict();
 
 function createFontLineHeightSchema(name: string) {
   return createTokenSchema({
-    type: "number",
-    valueSchema: createNumberSchema("Line height"),
+    type: 'number',
+    valueSchema: createNumberSchema('Line height'),
     name,
   });
 }
 
 const fontLineHeightSchema = z
   .object({
-    "50": createFontLineHeightSchema("50"),
-    "100": createFontLineHeightSchema("100"),
-    "200": createFontLineHeightSchema("200"),
-    "300": createFontLineHeightSchema("300"),
-    "400": createFontLineHeightSchema("400"),
-    "500": createFontLineHeightSchema("500"),
-    "600": createFontLineHeightSchema("600"),
-    "700": createFontLineHeightSchema("700"),
-    "800": createFontLineHeightSchema("800"),
-    "900": createFontLineHeightSchema("900"),
-    "1000": createFontLineHeightSchema("1000"),
-    "1100": createFontLineHeightSchema("1100"),
-    "1200": createFontLineHeightSchema("1200"),
-    "1300": createFontLineHeightSchema("1300"),
+    '50': createFontLineHeightSchema('50'),
+    '100': createFontLineHeightSchema('100'),
+    '200': createFontLineHeightSchema('200'),
+    '300': createFontLineHeightSchema('300'),
+    '400': createFontLineHeightSchema('400'),
+    '500': createFontLineHeightSchema('500'),
+    '600': createFontLineHeightSchema('600'),
+    '700': createFontLineHeightSchema('700'),
+    '800': createFontLineHeightSchema('800'),
+    '900': createFontLineHeightSchema('900'),
+    '1000': createFontLineHeightSchema('1000'),
+    '1100': createFontLineHeightSchema('1100'),
+    '1200': createFontLineHeightSchema('1200'),
+    '1300': createFontLineHeightSchema('1300'),
   })
   .strict();
 
 function createLetterSpacingSchema(name: string) {
   return createTokenSchema({
-    type: "dimension",
-    valueSchema: createRemSchema("Letter spacing"),
+    type: 'dimension',
+    valueSchema: createRemSchema('Letter spacing'),
     name,
   });
 }
 
 const letterSpacingSchema = z.object({
-  "100": createLetterSpacingSchema("100"),
-  "200": createLetterSpacingSchema("200"),
-  "300": createLetterSpacingSchema("300"),
-  "400": createLetterSpacingSchema("400"),
-  "500": createLetterSpacingSchema("500"),
-  "600": createLetterSpacingSchema("600"),
-  "700": createLetterSpacingSchema("700"),
-  "800": createLetterSpacingSchema("800"),
-  "900": createLetterSpacingSchema("900"),
+  '100': createLetterSpacingSchema('100'),
+  '200': createLetterSpacingSchema('200'),
+  '300': createLetterSpacingSchema('300'),
+  '400': createLetterSpacingSchema('400'),
+  '500': createLetterSpacingSchema('500'),
+  '600': createLetterSpacingSchema('600'),
+  '700': createLetterSpacingSchema('700'),
+  '800': createLetterSpacingSchema('800'),
+  '900': createLetterSpacingSchema('900'),
 });
 
 export const fontSchema = z
@@ -126,7 +128,7 @@ export const fontSchema = z
       letterSpacing: letterSpacingSchema,
     },
     {
-      required_error: "Color is required.",
-    }
+      required_error: 'Font is required.',
+    },
   )
   .strict();
diff --git a/packages/design/theme-builder/validation/schema/heading-schema.ts b/packages/design/theme-builder/validation/schema/heading-schema.ts
@@ -0,0 +1,23 @@
+import { z } from 'zod';
+import { createTypographySetSchema } from './shared.js';
+
+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'),
+    },
+    {
+      required_error: 'Heading is required.',
+    },
+  )
+  .strict();
diff --git a/packages/design/theme-builder/validation/schema/shared.ts b/packages/design/theme-builder/validation/schema/shared.ts
@@ -1,4 +1,4 @@
-import { z } from "zod";
+import { z } from 'zod';
 
 export function createTokenSchema({
   type,
@@ -21,34 +21,33 @@ export function createTokenSchema({
       },
       {
         required_error: `${name} is required.`,
-      }
+      },
     )
     .strict();
 }
 
 export function createStringSchema(name: string) {
-  return z
-    .string({
-      required_error: `${name} is required.`,
-    })
+  return z.string({
+    required_error: `${name} is required.`,
+  });
 }
 
 export function createStringArraySchema(name: string) {
   return z
     .array(
       z.string({
         required_error: `${name} is required.`,
-      })
+      }),
     )
     .nonempty();
 }
 
 export function createColorHexSchema() {
   return z
     .string({
-      required_error: "Color is required.",
+      required_error: 'Color is required.',
     })
-    .regex(/^#[0-9a-f]{6,8}$/, "Color must be a full lowercase hex value.");
+    .regex(/^#[0-9a-f]{6,8}$/, 'Color must be a full lowercase hex value.');
 }
 
 export function createPixelSchema(name: string) {
@@ -87,15 +86,53 @@ export function createShadowValueSchema(name: string) {
   return z
     .object(
       {
-        offsetX: createPixelSchema("Offset X"),
-        offsetY: createPixelSchema("Offset Y"),
-        blur: createPixelSchema("Blur"),
-        spread: createPixelSchema("Spread"),
+        offsetX: createPixelSchema('Offset X'),
+        offsetY: createPixelSchema('Offset Y'),
+        blur: createPixelSchema('Blur'),
+        spread: createPixelSchema('Spread'),
         color: createColorHexSchema(),
       },
       {
         required_error: `${name} is required.`,
-      }
+      },
+    )
+    .strict();
+}
+
+function createTypographyValueSchema(name: string) {
+  return z
+    .object(
+      {
+        fontFamily: createStringArraySchema('Font family'),
+        fontSize: createRemSchema('Font size'),
+        fontWeight: createNumberSchema('Font weight'),
+        lineHeight: createNumberSchema('Line height'),
+      },
+      {
+        required_error: `${name} is required.`,
+      },
+    )
+    .strict();
+}
+
+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
@@ -0,0 +1,17 @@
+import { z } from 'zod';
+import { createTypographySetSchema } from './shared.js';
+
+export const textSchema = z
+  .object(
+    {
+      sm: createTypographySetSchema('sm'),
+      md: createTypographySetSchema('md'),
+      lg: createTypographySetSchema('lg'),
+      xl: createTypographySetSchema('xl'),
+      '2xl': createTypographySetSchema('2xl'),
+    },
+    {
+      required_error: 'Text is required.',
+    },
+  )
+  .strict();