diff --git a/packages/tokens/build.js b/packages/tokens/build.js index 53ed86b2..314569fd 100644 --- a/packages/tokens/build.js +++ b/packages/tokens/build.js @@ -5,7 +5,7 @@ const StyleDictionary = require('style-dictionary') * Utils */ -/** Sort function to alphabetize token objects */ +/** Reterns a new tokens object sorted alphabetically by key */ const sortTokensByKey = (obj) => { const sortedKeys = Object.keys(obj).sort() const sortedObj = {} @@ -59,6 +59,12 @@ StyleDictionary.registerFilter({ matcher: filterDark, }) +/** Remove tokens that do not have 'spacing' in the category */ +StyleDictionary.registerFilter({ + name: 'filter/spacing/is-spacing', + matcher: (token) => token.attributes.category.includes('spacing'), +}) + /** * Formats */ @@ -104,7 +110,8 @@ StyleDictionary.registerFormat({ formatter: function () { return ( "export { colors } from './colors'\n" + - "export { themes } from './themes'" + "export { themes } from './themes'\n" + + "export { spacing } from './spacing'" ) }, }) @@ -122,6 +129,19 @@ StyleDictionary.registerFormat({ }, }) +/** Creates named type declaration for spacing. Allows for TypeScript autocomplete */ +StyleDictionary.registerFormat({ + name: 'typescript/es6-declarations/spacing', + formatter: function (dictionary) { + let declaration = 'export declare const spacing: {\n' + dictionary.allProperties.forEach((token) => { + declaration += ` ${token.name}: number;\n` + }) + declaration += '}' + return declaration + }, +}) + /** Creates named type declaration for Themes. Allows for TypeScript autocomplete */ StyleDictionary.registerFormat({ name: 'typescript/es6-declarations/theme', @@ -146,7 +166,8 @@ StyleDictionary.registerFormat({ name: 'typescript/es6-declarations/module', formatter: function () { let declaration = "export * from './types/theme'\n" - declaration += "export * from './types/colors'" + declaration += "export * from './types/colors'\n" + declaration += "export * from './types/spacing'" return declaration }, @@ -156,9 +177,13 @@ StyleDictionary.registerFormat({ StyleDictionary.registerFormat({ name: 'json/dtcg', formatter: function ({ dictionary }) { - // Returns proper value for dtcg aliasing + // Returns proper color value for dtcg aliasing const getValue = (value) => { - if (value.startsWith('{') && value.includes('.')) { + if ( + typeof value == 'string' && + value.startsWith('{') && + value.includes('.') + ) { return `${value.split('.')[0]}}` } @@ -179,6 +204,8 @@ StyleDictionary.registerFormat({ return 'fontWeight' } else if (category === 'font' && type === 'size') { return 'dimension' + } else if (category === 'spacing') { + return 'number' } return '' @@ -196,10 +223,28 @@ StyleDictionary.registerFormat({ {}, ) + // Leave spacing tokens sorted by size + if (dictionary.allTokens?.[0].attributes?.category === 'spacing') { + return JSON.stringify(tokens, undefined, 2) + `\n` + } + return JSON.stringify(sortTokensByKey(tokens), undefined, 2) + `\n` }, }) +/** Custom format for spacing. Exports all spacing tokens as single object */ +StyleDictionary.registerFormat({ + name: 'javascript/es6/vads-spacing', + formatter: function (dictionary) { + const tokens = dictionary.allProperties.reduce((result, token) => { + result[token.name] = token.value + return result + }, {}) + + return `export const spacing = ${JSON.stringify(tokens, null, 2)};` + }, +}) + /** * Transform Groups */ diff --git a/packages/tokens/config.js b/packages/tokens/config.js index f5ff39a1..96f46b54 100644 --- a/packages/tokens/config.js +++ b/packages/tokens/config.js @@ -6,6 +6,7 @@ module.exports = { 'src/tokens/color/component-light.json', 'src/tokens/color/semantic-dark.json', 'src/tokens/color/component-dark.json', + 'src/tokens/spacing/spacing.json', ], platforms: { rn: { @@ -26,6 +27,11 @@ module.exports = { destination: 'js/index.js', format: 'javascript/es6/vads-module-export', }, + { + destination: 'js/spacing.js', + format: 'javascript/es6/vads-spacing', + filter: 'filter/spacing/is-spacing', + }, { destination: 'js/themes.js', format: 'javascript/es6/vads-colors-themes', @@ -35,6 +41,11 @@ module.exports = { format: 'typescript/es6-declarations/colors', filter: 'filter/color/is-color', }, + { + destination: 'types/spacing.d.ts', + format: 'typescript/es6-declarations/spacing', + filter: 'filter/spacing/is-spacing', + }, { destination: 'types/theme.d.ts', format: 'typescript/es6-declarations/theme', @@ -56,6 +67,11 @@ module.exports = { format: 'json/dtcg', filter: 'filter/color/light-mode', }, + { + destination: `spacing.json`, + format: 'json/dtcg', + filter: 'filter/spacing/is-spacing', + }, ], }, }, diff --git a/packages/tokens/src/tokens/spacing/spacing.json b/packages/tokens/src/tokens/spacing/spacing.json new file mode 100644 index 00000000..3bc9ae33 --- /dev/null +++ b/packages/tokens/src/tokens/spacing/spacing.json @@ -0,0 +1,86 @@ +{ + "vads-space-none": { + "name": "vads-space-none", + "value": 0, + "attributes": { + "category": "spacing" + } + }, + "vads-space-2xs": { + "name": "vads-space-2xs", + "value": 4, + "attributes": { + "category": "spacing" + } + }, + "vads-space-xs": { + "name": "vads-space-xs", + "value": 8, + "attributes": { + "category": "spacing" + } + }, + "vads-space-sm": { + "name": "vads-space-sm", + "value": 12, + "attributes": { + "category": "spacing" + } + }, + "vads-space-md": { + "name": "vads-space-md", + "value": 16, + "attributes": { + "category": "spacing" + } + }, + "vads-space-lg": { + "name": "vads-space-lg", + "value": 20, + "attributes": { + "category": "spacing" + } + }, + "vads-space-xl": { + "name": "vads-space-xl", + "value": 24, + "attributes": { + "category": "spacing" + } + }, + "vads-space-2xl": { + "name": "vads-space-2xl", + "value": 28, + "attributes": { + "category": "spacing" + } + }, + "vads-space-3xl": { + "name": "vads-space-3xl", + "value": 32, + "attributes": { + "category": "spacing" + } + }, + "vads-space-4xl": { + "name": "vads-space-4xl", + "value": 36, + "attributes": { + "category": "spacing" + } + }, + "vads-space-5xl": { + "name": "vads-space-5xl", + "value": 40, + "attributes": { + "category": "spacing" + } + }, + "vads-space-6xl": { + "name": "vads-space-6xl", + "value": 44, + "attributes": { + "category": "spacing" + } + } +}