diff --git a/apps/docs/src/app/[...slug]/page.tsx b/apps/docs/src/app/[...slug]/page.tsx index d977fc1aa..89e2c11ae 100644 --- 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 ? : null} {document.status !== 'coming-soon' ? ( -
+
) : null} diff --git a/apps/docs/src/components/document/typography/font-table.tsx b/apps/docs/src/components/document/typography/font-table.tsx index 5680909d4..0537d4b8b 100644 --- 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({ - {renderValue(value)} + + {renderValue(value)} + {renderExample(value)} ); diff --git a/apps/docs/src/components/document/typography/typography.tsx b/apps/docs/src/components/document/typography/typography.tsx index 62b054dc9..f79fd7caa 100644 --- 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,76 +35,59 @@ function TypographyCell({ lineHeight: number; }) { return ( - -
- -

{fontFamily.join(', ')}

- -

- {fontSize} ({remToPx(fontSize)}) -

- -

{fontWeight}

- -

- {lineHeight} ({unitlessToPx(lineHeight)}) -

-
- +
+ +

{fontFamily.join(', ')}

+ +

+ {fontSize}{' '} + (e.g. {remToPx(fontSize)}) +

+ +

{fontWeight}

+ +

+ {lineHeight}{' '} + + (e.g. {lineHeightToPx({ fontSize, lineHeight })}) + +

+
); } +type Font = { + fontFamily: string[]; + fontSize: string; + fontWeight: number; + lineHeight: number; +}; + // TODO: type function TypographyTable({ name, tokens, }: { name: string; - tokens: Record; + tokens: Record; }) { return ( - { - 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 ( - - - - - - ); - }} + + name={name} + tokens={tokens} + renderValue={(value) => } + renderExample={(value) => ( + + The quick brown fox jumps over the lazy dog. + + )} /> ); } @@ -105,14 +95,20 @@ function TypographyTable({ export function Typography() { return (
- - +
+ Heading + +
+
+ Text + +
); } diff --git a/package.json b/package.json index e3f5b5748..66d015c1d 100644 --- 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 index a7d14af96..9f8cb1560 100644 --- 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 index 1d5d9c61e..1084b4202 100644 --- a/packages/design/theme-builder/validation/schema/shared.ts +++ b/packages/design/theme-builder/validation/schema/shared.ts @@ -115,7 +115,7 @@ function createTypographyValueSchema(name: string) { .strict(); } -function createTypographySchema(name: string) { +export function createTypographySchema(name: string) { return createTokenSchema({ type: 'typography', valueSchema: createTypographyValueSchema(name), @@ -123,16 +123,4 @@ function createTypographySchema(name: string) { }); } -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 index 51383e8b4..541cd3fd9 100644 --- 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 index 207054f21..ba6fad08e 100644 --- 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" }, diff --git a/tokens/tokens/light/primitive/heading.json b/tokens/tokens/light/primitive/heading.json index c0d1061cf..8c8c6f942 100644 --- a/tokens/tokens/light/primitive/heading.json +++ b/tokens/tokens/light/primitive/heading.json @@ -1,223 +1,207 @@ { "primitive": { "heading": { - "2xs": { - "regular": { + "regular": { + "2xs": { "$type": "typography", "$value": { "fontFamily": "{primitive.font.family.primary}", "fontSize": "{primitive.font.size.300}", "fontWeight": "{primitive.font.weight.400}", - "lineHeight": "{primitive.font.lineHeight.300}" + "lineHeight": "{primitive.font.lineHeight.1000}" } }, - "bold": { + "xs": { "$type": "typography", "$value": { "fontFamily": "{primitive.font.family.primary}", - "fontSize": "{primitive.font.size.300}", - "fontWeight": "{primitive.font.weight.700}", - "lineHeight": "{primitive.font.lineHeight.300}" + "fontSize": "{primitive.font.size.400}", + "fontWeight": "{primitive.font.weight.400}", + "lineHeight": "{primitive.font.lineHeight.1100}" } - } - }, - "xs": { - "regular": { + }, + "sm": { "$type": "typography", "$value": { "fontFamily": "{primitive.font.family.primary}", - "fontSize": "{primitive.font.size.400}", + "fontSize": "{primitive.font.size.500}", "fontWeight": "{primitive.font.weight.400}", - "lineHeight": "{primitive.font.lineHeight.400}" + "lineHeight": "{primitive.font.lineHeight.900}" } }, - "bold": { + "md": { "$type": "typography", "$value": { "fontFamily": "{primitive.font.family.primary}", - "fontSize": "{primitive.font.size.400}", - "fontWeight": "{primitive.font.weight.700}", - "lineHeight": "{primitive.font.lineHeight.400}" + "fontSize": "{primitive.font.size.600}", + "fontWeight": "{primitive.font.weight.400}", + "lineHeight": "{primitive.font.lineHeight.800}" } - } - }, - "sm": { - "regular": { + }, + "lg": { "$type": "typography", "$value": { "fontFamily": "{primitive.font.family.primary}", - "fontSize": "{primitive.font.size.500}", + "fontSize": "{primitive.font.size.700}", "fontWeight": "{primitive.font.weight.400}", - "lineHeight": "{primitive.font.lineHeight.400}" + "lineHeight": "{primitive.font.lineHeight.800}" } }, - "bold": { + + "xl": { "$type": "typography", "$value": { "fontFamily": "{primitive.font.family.primary}", - "fontSize": "{primitive.font.size.500}", - "fontWeight": "{primitive.font.weight.700}", - "lineHeight": "{primitive.font.lineHeight.400}" + "fontSize": "{primitive.font.size.800}", + "fontWeight": "{primitive.font.weight.400}", + "lineHeight": "{primitive.font.lineHeight.700}" } - } - }, - "md": { - "regular": { + }, + "2xl": { "$type": "typography", "$value": { "fontFamily": "{primitive.font.family.primary}", - "fontSize": "{primitive.font.size.600}", + "fontSize": "{primitive.font.size.900}", + "fontWeight": "{primitive.font.weight.400}", + "lineHeight": "{primitive.font.lineHeight.600}" + } + }, + "3xl": { + "$type": "typography", + "$value": { + "fontFamily": "{primitive.font.family.primary}", + "fontSize": "{primitive.font.size.1000}", "fontWeight": "{primitive.font.weight.400}", "lineHeight": "{primitive.font.lineHeight.500}" } }, - "bold": { + "4xl": { "$type": "typography", "$value": { "fontFamily": "{primitive.font.family.primary}", - "fontSize": "{primitive.font.size.600}", - "fontWeight": "{primitive.font.weight.700}", + "fontSize": "{primitive.font.size.1100}", + "fontWeight": "{primitive.font.weight.400}", "lineHeight": "{primitive.font.lineHeight.500}" } - } - }, - "lg": { - "regular": { + }, + "5xl": { "$type": "typography", "$value": { "fontFamily": "{primitive.font.family.primary}", - "fontSize": "{primitive.font.size.700}", + "fontSize": "{primitive.font.size.1200}", "fontWeight": "{primitive.font.weight.400}", - "lineHeight": "{primitive.font.lineHeight.600}" + "lineHeight": "{primitive.font.lineHeight.400}" } }, - "bold": { + "6xl": { "$type": "typography", "$value": { "fontFamily": "{primitive.font.family.primary}", - "fontSize": "{primitive.font.size.700}", - "fontWeight": "{primitive.font.weight.700}", - "lineHeight": "{primitive.font.lineHeight.600}" + "fontSize": "{primitive.font.size.1300}", + "fontWeight": "{primitive.font.weight.400}", + "lineHeight": "{primitive.font.lineHeight.300}" } } }, - "xl": { - "regular": { + "bold": { + "2xs": { "$type": "typography", "$value": { "fontFamily": "{primitive.font.family.primary}", - "fontSize": "{primitive.font.size.800}", - "fontWeight": "{primitive.font.weight.400}", - "lineHeight": "{primitive.font.lineHeight.700}" + "fontSize": "{primitive.font.size.300}", + "fontWeight": "{primitive.font.weight.700}", + "lineHeight": "{primitive.font.lineHeight.1000}" } }, - "bold": { + "xs": { "$type": "typography", "$value": { "fontFamily": "{primitive.font.family.primary}", - "fontSize": "{primitive.font.size.800}", + "fontSize": "{primitive.font.size.400}", "fontWeight": "{primitive.font.weight.700}", - "lineHeight": "{primitive.font.lineHeight.700}" + "lineHeight": "{primitive.font.lineHeight.1100}" } - } - }, - "2xl": { - "regular": { + }, + "sm": { "$type": "typography", "$value": { "fontFamily": "{primitive.font.family.primary}", - "fontSize": "{primitive.font.size.900}", - "fontWeight": "{primitive.font.weight.400}", - "lineHeight": "{primitive.font.lineHeight.800}" + "fontSize": "{primitive.font.size.500}", + "fontWeight": "{primitive.font.weight.700}", + "lineHeight": "{primitive.font.lineHeight.900}" } }, - "bold": { + "md": { "$type": "typography", "$value": { "fontFamily": "{primitive.font.family.primary}", - "fontSize": "{primitive.font.size.900}", + "fontSize": "{primitive.font.size.600}", "fontWeight": "{primitive.font.weight.700}", "lineHeight": "{primitive.font.lineHeight.800}" } - } - }, - "3xl": { - "regular": { + }, + "lg": { "$type": "typography", "$value": { "fontFamily": "{primitive.font.family.primary}", - "fontSize": "{primitive.font.size.1000}", - "fontWeight": "{primitive.font.weight.400}", - "lineHeight": "{primitive.font.lineHeight.1000}" + "fontSize": "{primitive.font.size.700}", + "fontWeight": "{primitive.font.weight.700}", + "lineHeight": "{primitive.font.lineHeight.800}" } }, - "bold": { + + "xl": { "$type": "typography", "$value": { "fontFamily": "{primitive.font.family.primary}", - "fontSize": "{primitive.font.size.1000}", + "fontSize": "{primitive.font.size.800}", "fontWeight": "{primitive.font.weight.700}", - "lineHeight": "{primitive.font.lineHeight.1000}" + "lineHeight": "{primitive.font.lineHeight.700}" } - } - }, - "4xl": { - "regular": { + }, + "2xl": { "$type": "typography", "$value": { "fontFamily": "{primitive.font.family.primary}", - "fontSize": "{primitive.font.size.1100}", - "fontWeight": "{primitive.font.weight.400}", - "lineHeight": "{primitive.font.lineHeight.1100}" + "fontSize": "{primitive.font.size.900}", + "fontWeight": "{primitive.font.weight.700}", + "lineHeight": "{primitive.font.lineHeight.600}" } }, - "bold": { + "3xl": { "$type": "typography", "$value": { "fontFamily": "{primitive.font.family.primary}", - "fontSize": "{primitive.font.size.1100}", + "fontSize": "{primitive.font.size.1000}", "fontWeight": "{primitive.font.weight.700}", - "lineHeight": "{primitive.font.lineHeight.1100}" + "lineHeight": "{primitive.font.lineHeight.500}" } - } - }, - "5xl": { - "regular": { + }, + "4xl": { "$type": "typography", "$value": { "fontFamily": "{primitive.font.family.primary}", - "fontSize": "{primitive.font.size.1200}", - "fontWeight": "{primitive.font.weight.400}", - "lineHeight": "{primitive.font.lineHeight.1200}" + "fontSize": "{primitive.font.size.1100}", + "fontWeight": "{primitive.font.weight.700}", + "lineHeight": "{primitive.font.lineHeight.500}" } }, - "bold": { + "5xl": { "$type": "typography", "$value": { "fontFamily": "{primitive.font.family.primary}", "fontSize": "{primitive.font.size.1200}", "fontWeight": "{primitive.font.weight.700}", - "lineHeight": "{primitive.font.lineHeight.1200}" - } - } - }, - "6xl": { - "regular": { - "$type": "typography", - "$value": { - "fontFamily": "{primitive.font.family.primary}", - "fontSize": "{primitive.font.size.1300}", - "fontWeight": "{primitive.font.weight.400}", - "lineHeight": "{primitive.font.lineHeight.1300}" + "lineHeight": "{primitive.font.lineHeight.400}" } }, - "bold": { + "6xl": { "$type": "typography", "$value": { "fontFamily": "{primitive.font.family.primary}", "fontSize": "{primitive.font.size.1300}", "fontWeight": "{primitive.font.weight.700}", - "lineHeight": "{primitive.font.lineHeight.1300}" + "lineHeight": "{primitive.font.lineHeight.300}" } } } diff --git a/tokens/tokens/light/primitive/text.json b/tokens/tokens/light/primitive/text.json index 4ec7324d2..6fcec1d2f 100644 --- a/tokens/tokens/light/primitive/text.json +++ b/tokens/tokens/light/primitive/text.json @@ -1,103 +1,97 @@ { "primitive": { "text": { - "sm": { - "regular": { + "regular": { + "sm": { "$type": "typography", "$value": { "fontFamily": "{primitive.font.family.primary}", "fontSize": "{primitive.font.size.200}", "fontWeight": "{primitive.font.weight.400}", - "lineHeight": "{primitive.font.lineHeight.200}" + "lineHeight": "{primitive.font.lineHeight.900}" } }, - "bold": { + "md": { "$type": "typography", "$value": { "fontFamily": "{primitive.font.family.primary}", - "fontSize": "{primitive.font.size.200}", - "fontWeight": "{primitive.font.weight.700}", - "lineHeight": "{primitive.font.lineHeight.200}" + "fontSize": "{primitive.font.size.300}", + "fontWeight": "{primitive.font.weight.400}", + "lineHeight": "{primitive.font.lineHeight.1000}" } - } - }, - "md": { - "regular": { + }, + "lg": { "$type": "typography", "$value": { "fontFamily": "{primitive.font.family.primary}", - "fontSize": "{primitive.font.size.300}", + "fontSize": "{primitive.font.size.400}", "fontWeight": "{primitive.font.weight.400}", - "lineHeight": "{primitive.font.lineHeight.300}" + "lineHeight": "{primitive.font.lineHeight.1100}" } }, - "bold": { + "xl": { "$type": "typography", "$value": { "fontFamily": "{primitive.font.family.primary}", - "fontSize": "{primitive.font.size.300}", - "fontWeight": "{primitive.font.weight.700}", - "lineHeight": "{primitive.font.lineHeight.300}" + "fontSize": "{primitive.font.size.500}", + "fontWeight": "{primitive.font.weight.400}", + "lineHeight": "{primitive.font.lineHeight.1200}" } - } - }, - "lg": { - "regular": { + }, + "2xl": { "$type": "typography", "$value": { "fontFamily": "{primitive.font.family.primary}", - "fontSize": "{primitive.font.size.400}", + "fontSize": "{primitive.font.size.600}", "fontWeight": "{primitive.font.weight.400}", - "lineHeight": "{primitive.font.lineHeight.400}" + "lineHeight": "{primitive.font.lineHeight.1000}" } - }, - "bold": { + } + }, + "bold": { + "sm": { "$type": "typography", "$value": { "fontFamily": "{primitive.font.family.primary}", - "fontSize": "{primitive.font.size.400}", + "fontSize": "{primitive.font.size.200}", "fontWeight": "{primitive.font.weight.700}", - "lineHeight": "{primitive.font.lineHeight.400}" + "lineHeight": "{primitive.font.lineHeight.900}" } - } - }, - "xl": { - "regular": { + }, + "md": { "$type": "typography", "$value": { "fontFamily": "{primitive.font.family.primary}", - "fontSize": "{primitive.font.size.500}", - "fontWeight": "{primitive.font.weight.400}", - "lineHeight": "{primitive.font.lineHeight.500}" + "fontSize": "{primitive.font.size.300}", + "fontWeight": "{primitive.font.weight.700}", + "lineHeight": "{primitive.font.lineHeight.1000}" } }, - "bold": { + "lg": { "$type": "typography", "$value": { "fontFamily": "{primitive.font.family.primary}", - "fontSize": "{primitive.font.size.500}", + "fontSize": "{primitive.font.size.400}", "fontWeight": "{primitive.font.weight.700}", - "lineHeight": "{primitive.font.lineHeight.500}" + "lineHeight": "{primitive.font.lineHeight.1100}" } - } - }, - "2xl": { - "regular": { + }, + "xl": { "$type": "typography", "$value": { "fontFamily": "{primitive.font.family.primary}", - "fontSize": "{primitive.font.size.600}", - "fontWeight": "{primitive.font.weight.400}", - "lineHeight": "{primitive.font.lineHeight.600}" + "fontSize": "{primitive.font.size.500}", + "fontWeight": "{primitive.font.weight.700}", + "lineHeight": "{primitive.font.lineHeight.1200}" } }, - "bold": { + "2xl": { "$type": "typography", "$value": { "fontFamily": "{primitive.font.family.primary}", "fontSize": "{primitive.font.size.600}", "fontWeight": "{primitive.font.weight.700}", - "lineHeight": "{primitive.font.lineHeight.600}" + "lineHeight": "{primitive.font.lineHeight.1000}" } } }
- -