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 index b7d531553..72f2992cd 100644 --- 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 - + ## Font Weights - + diff --git a/apps/docs/src/components/document/mdx.tsx b/apps/docs/src/components/document/mdx.tsx index 4561e2f56..a37ffdf5d 100644 --- 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 }) => {children}, ColorPrimitives: () => , - FontSizes: () => , - FontWeights: () => , + FontSizesTable: () => , + FontWeightsTable: () => , }} /> ); diff --git a/apps/docs/src/components/document/typography/font-sizes.tsx b/apps/docs/src/components/document/typography/font-sizes-table.tsx similarity index 95% rename from apps/docs/src/components/document/typography/font-sizes.tsx rename to apps/docs/src/components/document/typography/font-sizes-table.tsx index 6396d91b9..bef82c622 100644 --- a/apps/docs/src/components/document/typography/font-sizes.tsx +++ b/apps/docs/src/components/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 ( ({ - path: error.path.join("."), + path: error.path.join('.'), message: error.message, })); diff --git a/packages/design/tokens-builder/package.json b/packages/design/tokens-builder/package.json index 6fbc303d9..8e8551d16 100644 --- a/packages/design/tokens-builder/package.json +++ b/packages/design/tokens-builder/package.json @@ -17,7 +17,8 @@ "dependencies": { "camelcase": "^8.0.0", "lodash.clonedeepwith": "^4.5.0", - "style-dictionary": "4.0.0-prerelease.31" + "style-dictionary": "4.0.0-prerelease.31", + "ts-extras": "^0.11.0" }, "devDependencies": { "@govie-ds/prettier-config": "workspace:^", diff --git a/packages/design/tokens-builder/src/formatters/figma.ts b/packages/design/tokens-builder/src/formatters/figma.ts index fd3311978..5bb1fe3ac 100644 --- a/packages/design/tokens-builder/src/formatters/figma.ts +++ b/packages/design/tokens-builder/src/formatters/figma.ts @@ -1,10 +1,11 @@ import cloneDeepWith from 'lodash.clonedeepwith'; import { minifyDictionary } from './minify-dictionary.js'; import { FormatFnArguments } from 'style-dictionary/types'; +import { Tokens } from 'style-dictionary'; +import { objectKeys } from 'ts-extras'; // TODO: implement as style dictionary transforms -// TODO: type -function stripReferenceTiers({ tokens }: any) { +function stripReferenceTiers({ tokens }: Tokens) { return cloneDeepWith(tokens, (value) => { if (typeof value === 'string' && value.startsWith('{')) { return value.replace(/{(primitive|semantic|component)\./g, '{'); @@ -15,8 +16,7 @@ function stripReferenceTiers({ tokens }: any) { } // TODO: implement as style dictionary transforms -// TODO: type -function toDimension({ tokens }: any) { +function toDimension({ tokens }: Tokens) { return cloneDeepWith(tokens, (value) => { if (value === 'fontWeight') { return 'dimension'; @@ -26,15 +26,49 @@ function toDimension({ tokens }: any) { }); } +type FigmaType = 'color' | 'number' | 'string' | 'boolean'; + +function toValue(key: string, value: any) { + if (key === 'fontSize') { + return value.$value[key].replace('rem', ''); + } + + if (key === 'fontFamily') { + return value.$value[key].join(', '); + } + + return value.$value[key]; +} + +// Convert composite JSON tokens to nested Figma groups +function toGroups({ tokens }: Tokens) { + const types: Record = { + fontFamily: 'string', + fontSize: 'number', + fontWeight: 'number', + lineHeight: 'number', + }; + + return cloneDeepWith(tokens, (value) => { + if (value.$type === 'typography') { + return objectKeys(value.$value).reduce((acc, key) => { + acc[key] = { + $type: types[key], + $value: toValue(key, value), + }; + + return acc; + }, {} as Tokens); + } + + return undefined; + }); +} + // TODO: implement as style dictionary transforms -// TODO: type -function toString({ tokens }: any) { +function toString({ tokens }: Tokens) { return cloneDeepWith(tokens, (value) => { - if ( - value === 'shadow' || - value === 'typography' || - value === 'fontFamily' - ) { + if (value === 'shadow' || value === 'fontFamily') { return 'string'; } @@ -53,9 +87,11 @@ export async function figmaFormatter({ outputReferences: options.outputReferences, }); - const cleanedTokens = toString({ - tokens: toDimension({ - tokens: stripReferenceTiers({ tokens }), + const cleanedTokens = toGroups({ + tokens: toString({ + tokens: toDimension({ + tokens: stripReferenceTiers({ tokens }), + }), }), }); diff --git a/packages/design/tokens-builder/src/tokens-builder.ts b/packages/design/tokens-builder/src/tokens-builder.ts index e41475982..80cd9f7e9 100644 --- a/packages/design/tokens-builder/src/tokens-builder.ts +++ b/packages/design/tokens-builder/src/tokens-builder.ts @@ -338,7 +338,7 @@ async function build({ source, tokens, platforms }: TokenBuilderOptions) { 'shadow/css/shorthand', 'letterSpacing/percentage', 'fontSize/px', - 'typography/css/shorthand', + // 'typography/css/shorthand', ], }); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b11301c71..990f8d832 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -375,6 +375,9 @@ importers: style-dictionary: specifier: 4.0.0-prerelease.31 version: 4.0.0-prerelease.31 + ts-extras: + specifier: ^0.11.0 + version: 0.11.0 devDependencies: '@govie-ds/prettier-config': specifier: workspace:^ diff --git a/tokens/tokens/light/primitive/heading.json b/tokens/tokens/light/primitive/heading.json new file mode 100644 index 000000000..8e5fe0aff --- /dev/null +++ b/tokens/tokens/light/primitive/heading.json @@ -0,0 +1,226 @@ +{ + "primitive": { + "heading": { + "2xs": { + "regular": { + "$type": "typography", + "$value": { + "fontFamily": "{primitive.font.family.primary}", + "fontSize": "{primitive.font.size.300}", + "fontWeight": "{primitive.font.weight.400}", + "lineHeight": "{primitive.font.lineHeight.300}" + } + }, + "bold": { + "$type": "typography", + "$value": { + "fontFamily": "{primitive.font.family.primary}", + "fontSize": "{primitive.font.size.300}", + "fontWeight": "{primitive.font.weight.700}", + "lineHeight": "{primitive.font.lineHeight.300}" + } + } + }, + "xs": { + "regular": { + "$type": "typography", + "$value": { + "fontFamily": "{primitive.font.family.primary}", + "fontSize": "{primitive.font.size.400}", + "fontWeight": "{primitive.font.weight.400}", + "lineHeight": "{primitive.font.lineHeight.400}" + } + }, + "bold": { + "$type": "typography", + "$value": { + "fontFamily": "{primitive.font.family.primary}", + "fontSize": "{primitive.font.size.400}", + "fontWeight": "{primitive.font.weight.700}", + "lineHeight": "{primitive.font.lineHeight.400}" + } + } + }, + "sm": { + "regular": { + "$type": "typography", + "$value": { + "fontFamily": "{primitive.font.family.primary}", + "fontSize": "{primitive.font.size.500}", + "fontWeight": "{primitive.font.weight.400}", + "lineHeight": "{primitive.font.lineHeight.400}" + } + }, + "bold": { + "$type": "typography", + "$value": { + "fontFamily": "{primitive.font.family.primary}", + "fontSize": "{primitive.font.size.500}", + "fontWeight": "{primitive.font.weight.700}", + "lineHeight": "{primitive.font.lineHeight.400}" + } + } + }, + "md": { + "regular": { + "$type": "typography", + "$value": { + "fontFamily": "{primitive.font.family.primary}", + "fontSize": "{primitive.font.size.600}", + "fontWeight": "{primitive.font.weight.400}", + "lineHeight": "{primitive.font.lineHeight.500}" + } + }, + "bold": { + "$type": "typography", + "$value": { + "fontFamily": "{primitive.font.family.primary}", + "fontSize": "{primitive.font.size.600}", + "fontWeight": "{primitive.font.weight.700}", + "lineHeight": "{primitive.font.lineHeight.500}" + } + } + }, + "lg": { + "regular": { + "$type": "typography", + "$value": { + "fontFamily": "{primitive.font.family.primary}", + "fontSize": "{primitive.font.size.700}", + "fontWeight": "{primitive.font.weight.400}", + "lineHeight": "{primitive.font.lineHeight.600}" + } + }, + "bold": { + "$type": "typography", + "$value": { + "fontFamily": "{primitive.font.family.primary}", + "fontSize": "{primitive.font.size.700}", + "fontWeight": "{primitive.font.weight.700}", + "lineHeight": "{primitive.font.lineHeight.600}" + } + } + }, + "xl": { + "regular": { + "$type": "typography", + "$value": { + "fontFamily": "{primitive.font.family.primary}", + "fontSize": "{primitive.font.size.800}", + "fontWeight": "{primitive.font.weight.400}", + "lineHeight": "{primitive.font.lineHeight.700}" + } + }, + "bold": { + "$type": "typography", + "$value": { + "fontFamily": "{primitive.font.family.primary}", + "fontSize": "{primitive.font.size.800}", + "fontWeight": "{primitive.font.weight.700}", + "lineHeight": "{primitive.font.lineHeight.700}" + } + } + }, + "2xl": { + "regular": { + "$type": "typography", + "$value": { + "fontFamily": "{primitive.font.family.primary}", + "fontSize": "{primitive.font.size.900}", + "fontWeight": "{primitive.font.weight.400}", + "lineHeight": "{primitive.font.lineHeight.800}" + } + }, + "bold": { + "$type": "typography", + "$value": { + "fontFamily": "{primitive.font.family.primary}", + "fontSize": "{primitive.font.size.900}", + "fontWeight": "{primitive.font.weight.700}", + "lineHeight": "{primitive.font.lineHeight.800}" + } + } + }, + "3xl": { + "regular": { + "$type": "typography", + "$value": { + "fontFamily": "{primitive.font.family.primary}", + "fontSize": "{primitive.font.size.1000}", + "fontWeight": "{primitive.font.weight.400}", + "lineHeight": "{primitive.font.lineHeight.900}" + } + }, + "bold": { + "$type": "typography", + "$value": { + "fontFamily": "{primitive.font.family.primary}", + "fontSize": "{primitive.font.size.1000}", + "fontWeight": "{primitive.font.weight.700}", + "lineHeight": "{primitive.font.lineHeight.900}" + } + } + }, + "4xl": { + "regular": { + "$type": "typography", + "$value": { + "fontFamily": "{primitive.font.family.primary}", + "fontSize": "{primitive.font.size.1100}", + "fontWeight": "{primitive.font.weight.400}", + "lineHeight": "{primitive.font.lineHeight.1000}" + } + }, + "bold": { + "$type": "typography", + "$value": { + "fontFamily": "{primitive.font.family.primary}", + "fontSize": "{primitive.font.size.1100}", + "fontWeight": "{primitive.font.weight.700}", + "lineHeight": "{primitive.font.lineHeight.1000}" + } + } + }, + "5xl": { + "regular": { + "$type": "typography", + "$value": { + "fontFamily": "{primitive.font.family.primary}", + "fontSize": "{primitive.font.size.1200}", + "fontWeight": "{primitive.font.weight.400}", + "lineHeight": "{primitive.font.lineHeight.1100}" + } + }, + "bold": { + "$type": "typography", + "$value": { + "fontFamily": "{primitive.font.family.primary}", + "fontSize": "{primitive.font.size.1200}", + "fontWeight": "{primitive.font.weight.700}", + "lineHeight": "{primitive.font.lineHeight.1100}" + } + } + }, + "6xl": { + "regular": { + "$type": "typography", + "$value": { + "fontFamily": "{primitive.font.family.primary}", + "fontSize": "{primitive.font.size.1300}", + "fontWeight": "{primitive.font.weight.400}", + "lineHeight": "{primitive.font.lineHeight.1200}" + } + }, + "bold": { + "$type": "typography", + "$value": { + "fontFamily": "{primitive.font.family.primary}", + "fontSize": "{primitive.font.size.1300}", + "fontWeight": "{primitive.font.weight.700}", + "lineHeight": "{primitive.font.lineHeight.1200}" + } + } + } + } + } +} diff --git a/tokens/tokens/light/primitive/text.json b/tokens/tokens/light/primitive/text.json new file mode 100644 index 000000000..4ec7324d2 --- /dev/null +++ b/tokens/tokens/light/primitive/text.json @@ -0,0 +1,106 @@ +{ + "primitive": { + "text": { + "sm": { + "regular": { + "$type": "typography", + "$value": { + "fontFamily": "{primitive.font.family.primary}", + "fontSize": "{primitive.font.size.200}", + "fontWeight": "{primitive.font.weight.400}", + "lineHeight": "{primitive.font.lineHeight.200}" + } + }, + "bold": { + "$type": "typography", + "$value": { + "fontFamily": "{primitive.font.family.primary}", + "fontSize": "{primitive.font.size.200}", + "fontWeight": "{primitive.font.weight.700}", + "lineHeight": "{primitive.font.lineHeight.200}" + } + } + }, + "md": { + "regular": { + "$type": "typography", + "$value": { + "fontFamily": "{primitive.font.family.primary}", + "fontSize": "{primitive.font.size.300}", + "fontWeight": "{primitive.font.weight.400}", + "lineHeight": "{primitive.font.lineHeight.300}" + } + }, + "bold": { + "$type": "typography", + "$value": { + "fontFamily": "{primitive.font.family.primary}", + "fontSize": "{primitive.font.size.300}", + "fontWeight": "{primitive.font.weight.700}", + "lineHeight": "{primitive.font.lineHeight.300}" + } + } + }, + "lg": { + "regular": { + "$type": "typography", + "$value": { + "fontFamily": "{primitive.font.family.primary}", + "fontSize": "{primitive.font.size.400}", + "fontWeight": "{primitive.font.weight.400}", + "lineHeight": "{primitive.font.lineHeight.400}" + } + }, + "bold": { + "$type": "typography", + "$value": { + "fontFamily": "{primitive.font.family.primary}", + "fontSize": "{primitive.font.size.400}", + "fontWeight": "{primitive.font.weight.700}", + "lineHeight": "{primitive.font.lineHeight.400}" + } + } + }, + "xl": { + "regular": { + "$type": "typography", + "$value": { + "fontFamily": "{primitive.font.family.primary}", + "fontSize": "{primitive.font.size.500}", + "fontWeight": "{primitive.font.weight.400}", + "lineHeight": "{primitive.font.lineHeight.500}" + } + }, + "bold": { + "$type": "typography", + "$value": { + "fontFamily": "{primitive.font.family.primary}", + "fontSize": "{primitive.font.size.500}", + "fontWeight": "{primitive.font.weight.700}", + "lineHeight": "{primitive.font.lineHeight.500}" + } + } + }, + "2xl": { + "regular": { + "$type": "typography", + "$value": { + "fontFamily": "{primitive.font.family.primary}", + "fontSize": "{primitive.font.size.600}", + "fontWeight": "{primitive.font.weight.400}", + "lineHeight": "{primitive.font.lineHeight.600}" + } + }, + "bold": { + "$type": "typography", + "$value": { + "fontFamily": "{primitive.font.family.primary}", + "fontSize": "{primitive.font.size.600}", + "fontWeight": "{primitive.font.weight.700}", + "lineHeight": "{primitive.font.lineHeight.600}" + } + } + } + } + } +} diff --git a/tokens/tokens/light/semantic/text.json b/tokens/tokens/light/semantic/text.json deleted file mode 100644 index c8932c457..000000000 --- a/tokens/tokens/light/semantic/text.json +++ /dev/null @@ -1,105 +0,0 @@ -{ - "semantic": { - "text": { - "3xs": { - "$type": "typography", - "$value": { - "fontFamily": "{primitive.font.family.primary}", - "fontSize": "{primitive.font.size.300}", - "fontWeight": "{primitive.font.weight.400}", - "lineHeight": "{primitive.font.lineHeight.300}" - } - }, - "2xs": { - "$type": "typography", - "$value": { - "fontFamily": "{primitive.font.family.primary}", - "fontSize": "{primitive.font.size.400}", - "fontWeight": "{primitive.font.weight.400}", - "lineHeight": "{primitive.font.lineHeight.400}" - } - }, - "xs": { - "$type": "typography", - "$value": { - "fontFamily": "{primitive.font.family.primary}", - "fontSize": "{primitive.font.size.500}", - "fontWeight": "{primitive.font.weight.400}", - "lineHeight": "{primitive.font.lineHeight.400}" - } - }, - "md": { - "$type": "typography", - "$value": { - "fontFamily": "{primitive.font.family.primary}", - "fontSize": "{primitive.font.size.600}", - "fontWeight": "{primitive.font.weight.400}", - "lineHeight": "{primitive.font.lineHeight.500}" - } - }, - "lg": { - "$type": "typography", - "$value": { - "fontFamily": "{primitive.font.family.primary}", - "fontSize": "{primitive.font.size.700}", - "fontWeight": "{primitive.font.weight.400}", - "lineHeight": "{primitive.font.lineHeight.600}" - } - }, - "xl": { - "$type": "typography", - "$value": { - "fontFamily": "{primitive.font.family.primary}", - "fontSize": "{primitive.font.size.800}", - "fontWeight": "{primitive.font.weight.400}", - "lineHeight": "{primitive.font.lineHeight.700}" - } - }, - "2xl": { - "$type": "typography", - "$value": { - "fontFamily": "{primitive.font.family.primary}", - "fontSize": "{primitive.font.size.900}", - "fontWeight": "{primitive.font.weight.400}", - "lineHeight": "{primitive.font.lineHeight.800}" - } - }, - "3xl": { - "$type": "typography", - "$value": { - "fontFamily": "{primitive.font.family.primary}", - "fontSize": "{primitive.font.size.1000}", - "fontWeight": "{primitive.font.weight.400}", - "lineHeight": "{primitive.font.lineHeight.900}" - } - }, - "4xl": { - "$type": "typography", - "$value": { - "fontFamily": "{primitive.font.family.primary}", - "fontSize": "{primitive.font.size.1100}", - "fontWeight": "{primitive.font.weight.400}", - "lineHeight": "{primitive.font.lineHeight.1000}" - } - }, - "5xl": { - "$type": "typography", - "$value": { - "fontFamily": "{primitive.font.family.primary}", - "fontSize": "{primitive.font.size.1200}", - "fontWeight": "{primitive.font.weight.400}", - "lineHeight": "{primitive.font.lineHeight.1100}" - } - }, - "6xl": { - "$type": "typography", - "$value": { - "fontFamily": "{primitive.font.family.primary}", - "fontSize": "{primitive.font.size.1300}", - "fontWeight": "{primitive.font.weight.400}", - "lineHeight": "{primitive.font.lineHeight.1200}" - } - } - } - } -}