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