Skip to content

Commit

Permalink
Merge pull request #572 from department-of-veterans-affairs/feature/4…
Browse files Browse the repository at this point in the history 
…95-narin-composite-typography-tokens

[Feature] Add composite typography tokens
  • Loading branch information
@narin
narin authored Nov 8, 2024
2 parents 7e365d5 + 60e78a0 commit cd0c6d3
Show file tree
Hide file tree
Showing 3 changed files with 220 additions and 2 deletions.
54 changes: 52 additions & 2 deletions packages/tokens/build.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,12 @@ StyleDictionary.registerFilter({
matcher: (token) => filterFont(token, 'line-height'),
})

/** Filter to tokens of category 'font', type 'typography', and npm true */
StyleDictionary.registerFilter({
name: 'filter/font/typography-npm',
matcher: (token) => filterFont(token, 'typography'),
})

/** Remove tokens that do not have 'font' in the category and have figma attribute */
StyleDictionary.registerFilter({
name: 'filter/font-figma',
Expand Down Expand Up @@ -170,7 +176,13 @@ StyleDictionary.registerFormat({
StyleDictionary.registerFormat({
name: 'javascript/es6/fontIndex',
formatter: function () {
const files = ['family', 'letterSpacing', 'lineHeight', 'size']
const files = [
'family',
'letterSpacing',
'lineHeight',
'size',
'typography',
]
let imports = '',
exports = ''

Expand All @@ -186,7 +198,13 @@ StyleDictionary.registerFormat({
StyleDictionary.registerFormat({
name: 'typescript/es6-declarations/fontIndex',
formatter: function () {
const files = ['family', 'letterSpacing', 'lineHeight', 'size']
const files = [
'family',
'letterSpacing',
'lineHeight',
'size',
'typography',
]
let imports = '',
exports = ''

Expand Down Expand Up @@ -249,6 +267,38 @@ StyleDictionary.registerFormat({
},
})

/** Formats declarations exports for composite tokens */
StyleDictionary.registerFormat({
name: 'typescript/es6-declarations/composite',
formatter: function ({ dictionary, options }) {
let tokens = dictionary.allTokens,
declaration = `export declare const ${options.exportName}: {\n`

if (!options.noSort) {
tokens = sortTokensByName(tokens)
}

for (const token of tokens) {
let docs = `/** `
let valueKeys = '{\n'

// Generate docs line and object of value types
Object.keys(token.value).forEach((key, index) => {
docs += `${index !== 0 ? '| ' : ''}${key}: ${token.value[key]} `
valueKeys += ` ${key}: ${typeof token.value[key]}\n`
})

docs += `*/\n`
declaration += ` ${docs}`
declaration += ` ${token.name}: ${valueKeys}`
declaration += ` }\n`
}

declaration += '}'
return declaration
},
})

/** Creates named type declaration for Themes. Allows for TypeScript autocomplete */
StyleDictionary.registerFormat({
name: 'typescript/es6-declarations/theme',
Expand Down
16 changes: 16 additions & 0 deletions packages/tokens/config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,14 @@ module.exports = {
noSort: true,
},
},
{
destination: 'js/font/typography.js',
format: 'javascript/es6/simple-key-value',
filter: 'filter/font/typography-npm',
options: {
exportName: 'typography',
},
},
{
destination: 'js/spacing.js',
format: 'javascript/es6/simple-key-value',
Expand Down Expand Up @@ -130,6 +138,14 @@ module.exports = {
noSort: true,
},
},
{
destination: 'types/font/typography.d.ts',
format: 'typescript/es6-declarations/composite',
filter: 'filter/font/typography-npm',
options: {
exportName: 'typography',
},
},
{
destination: 'types/spacing.d.ts',
format: 'typescript/es6-declarations/simple-key-value',
Expand Down
152 changes: 152 additions & 0 deletions packages/tokens/src/tokens/font/typography.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,152 @@
{
"vads-font-body-large": {
"name": "vads-font-body-large",
"value": {
"fontFamily": "{vads-font-family-sans-serif-regular}",
"fontSize": "{vads-font-size-body-large}",
"lineHeight": "{vads-font-line-height-default-lg}",
"marginBottom": "{vads-space-5xl}",
"letterSpacing": "{vads-font-letter-spacing-default}"
},
"attributes": {
"category": "font",
"type": "typography",
"npm": true
}
},
"vads-font-body-medium": {
"name": "vads-font-body-medium",
"value": {
"fontFamily": "{vads-font-family-sans-serif-regular}",
"fontSize": "{vads-font-size-body-medium}",
"lineHeight": "{vads-font-line-height-default-md}",
"marginBottom": "{vads-space-4xl}",
"letterSpacing": "{vads-font-letter-spacing-default}"
},
"attributes": {
"category": "font",
"type": "typography",
"npm": true
}
},
"vads-font-body-small": {
"name": "vads-font-body-small",
"value": {
"fontFamily": "{vads-font-family-sans-serif-regular}",
"fontSize": "{vads-font-size-body-small}",
"lineHeight": "{vads-font-line-height-default-sm}",
"marginBottom": "{vads-space-3xl}",
"letterSpacing": "{vads-font-letter-spacing-default}"
},
"attributes": {
"category": "font",
"type": "typography",
"npm": true
}
},
"vads-font-body-xsmall": {
"name": "vads-font-body-xsmall",
"value": {
"fontFamily": "{vads-font-family-sans-serif-regular}",
"fontSize": "{vads-font-size-body-xsmall}",
"lineHeight": "{vads-font-line-height-default-xs}",
"marginBottom": "{vads-space-2xl}",
"letterSpacing": "{vads-font-letter-spacing-default}"
},
"attributes": {
"category": "font",
"type": "typography",
"npm": true
}
},
"vads-font-display": {
"name": "vads-font-display",
"value": {
"fontFamily": "{vads-font-family-serif-regular}",
"fontSize": "{vads-font-size-display}",
"lineHeight": "{vads-font-line-height-heading-5xl}",
"marginBottom": "{vads-space-6xl}",
"letterSpacing": "{vads-font-letter-spacing-heading}"
},
"attributes": {
"category": "font",
"type": "typography",
"npm": true
}
},
"vads-font-heading-large": {
"name": "vads-font-heading-large",
"value": {
"fontFamily": "{vads-font-family-serif-regular}",
"fontSize": "{vads-font-size-heading-level-1}",
"lineHeight": "{vads-font-line-height-heading-2xl}",
"marginBottom": "{vads-space-3xl}",
"letterSpacing": "{vads-font-letter-spacing-heading}"
},
"attributes": {
"category": "font",
"type": "typography",
"npm": true
}
},
"vads-font-heading-medium": {
"name": "vads-font-heading-medium",
"value": {
"fontFamily": "{vads-font-family-serif-regular}",
"fontSize": "{vads-font-size-heading-level-2}",
"lineHeight": "{vads-font-line-height-heading-xl}",
"marginBottom": "{vads-space-2xl}",
"letterSpacing": "{vads-font-letter-spacing-heading}"
},
"attributes": {
"category": "font",
"type": "typography",
"npm": true
}
},
"vads-font-heading-small": {
"name": "vads-font-heading-small",
"value": {
"fontFamily": "{vads-font-family-sans-serif-bold}",
"fontSize": "{vads-font-size-heading-level-3}",
"lineHeight": "{vads-font-line-height-heading-lg}",
"marginBottom": "{vads-space-xl}",
"letterSpacing": "{vads-font-letter-spacing-heading}"
},
"attributes": {
"category": "font",
"type": "typography",
"npm": true
}
},
"vads-font-heading-xsmall": {
"name": "vads-font-heading-xsmall",
"value": {
"fontFamily": "{vads-font-family-sans-serif-bold}",
"fontSize": "{vads-font-size-heading-level-4}",
"lineHeight": "{vads-font-line-height-heading-md}",
"marginBottom": "{vads-space-lg}",
"letterSpacing": "{vads-font-letter-spacing-heading}"
},
"attributes": {
"category": "font",
"type": "typography",
"npm": true
}
},
"vads-font-navigation": {
"name": "vads-font-navigation",
"value": {
"fontFamily": "{vads-font-family-sans-serif-regular}",
"fontSize": "{vads-font-size-navigation}",
"lineHeight": "{vads-font-line-height-default-2xs}",
"marginBottom": "{vads-space-md}",
"letterSpacing": "{vads-font-letter-spacing-default}"
},
"attributes": {
"category": "font",
"type": "typography",
"npm": true
}
}
}

0 comments on commit cd0c6d3

Please sign in to comment.