From 2b29157198ee81aadcd411c2978645ddfed116f8 Mon Sep 17 00:00:00 2001 From: Narin Ratana Date: Mon, 24 Jun 2024 09:04:54 -0700 Subject: [PATCH 01/17] Add TypeScript declarations for themes --- packages/tokens/build.js | 29 +++++++++++++++++++++++++++++ packages/tokens/config.js | 15 +++++++++++++++ 2 files changed, 44 insertions(+) diff --git a/packages/tokens/build.js b/packages/tokens/build.js index a468ec91..a6eacd2e 100644 --- a/packages/tokens/build.js +++ b/packages/tokens/build.js @@ -46,6 +46,19 @@ StyleDictionary.registerFormat({ }, }) +/** Custom format for themes. Exports color tokens as single object */ +StyleDictionary.registerFormat({ + name: 'javascript/es6/vads-colors-theme', + formatter: function (dictionary) { + const colorTokens = dictionary.allProperties.reduce((result, token) => { + result[stripMode(token.name)] = token.value + return result + }, {}) + + return `export const Theme = ${JSON.stringify(sortTokensByKey(colorTokens), null, 2)};` + }, +}) + /** Creates named type declaration for Colors. Allows for TypeScript autocomplete */ StyleDictionary.registerFormat({ name: 'typescript/es6-declarations/colors', @@ -60,6 +73,20 @@ StyleDictionary.registerFormat({ }, }) +/** Creates named type declaration for Themes. Allows for TypeScript autocomplete */ +StyleDictionary.registerFormat({ + name: 'typescript/es6-declarations/theme', + formatter: function (dictionary) { + let declaration = 'export declare const Theme: {\n' + dictionary.allProperties.forEach((token) => { + declaration += ` ${stripMode(token.name)}: string;\n` + }) + + declaration += `}` + return declaration + }, +}) + /** Registering format to generate JSON in Design Token Community Group format (https://tr.designtokens.org/format/) */ StyleDictionary.registerFormat({ name: 'json/dtcg', @@ -138,6 +165,8 @@ const sortTokensByKey = (obj) => { return sortedObj } +const stripMode = (name) => name.replace('OnDark', '').replace('OnLight', '') + const StyleDictionaryExtended = StyleDictionary.extend(__dirname + '/config.js') StyleDictionaryExtended.buildAllPlatforms() diff --git a/packages/tokens/config.js b/packages/tokens/config.js index 39de729d..5d40c690 100644 --- a/packages/tokens/config.js +++ b/packages/tokens/config.js @@ -23,6 +23,21 @@ module.exports = { format: 'typescript/es6-declarations/colors', filter: 'filter/color/is-color', }, + { + destination: 'js/light.js', + format: 'javascript/es6/vads-colors-theme', + filter: 'filter/color/light-mode', + }, + { + destination: 'js/dark.js', + format: 'javascript/es6/vads-colors-theme', + filter: 'filter/color/dark-mode', + }, + { + destination: 'theme.d.ts', + format: 'typescript/es6-declarations/theme', + filter: 'filter/color/light-mode', + }, ], }, figma: { From b8b77e1d3e28b788a26d3203b47431047b06f2d8 Mon Sep 17 00:00:00 2001 From: Narin Ratana Date: Mon, 24 Jun 2024 12:30:49 -0700 Subject: [PATCH 02/17] Clean up typings. Restructure folders. --- packages/tokens/build.js | 29 +++++++++++++++++++++++++++-- packages/tokens/config.js | 26 +++++++++++++++++--------- 2 files changed, 44 insertions(+), 11 deletions(-) diff --git a/packages/tokens/build.js b/packages/tokens/build.js index a6eacd2e..173bb9fd 100644 --- a/packages/tokens/build.js +++ b/packages/tokens/build.js @@ -59,11 +59,22 @@ StyleDictionary.registerFormat({ }, }) +/** Custom format to generate index js with exports */ +StyleDictionary.registerFormat({ + name: 'javascript/es6/vads-module-export', + formatter: function () { + return `export { Colors } from 'colors' +export { DarkTheme } from './themes/dark' +export { LightTheme } from './themes/light' +` + }, +}) + /** Creates named type declaration for Colors. Allows for TypeScript autocomplete */ StyleDictionary.registerFormat({ name: 'typescript/es6-declarations/colors', formatter: function (dictionary) { - let declaration = 'export declare const Colors: {\n' + let declaration = 'export type Colors = {\n' dictionary.allProperties.forEach((token) => { declaration += ` ${token.name}: string;\n` }) @@ -77,7 +88,7 @@ StyleDictionary.registerFormat({ StyleDictionary.registerFormat({ name: 'typescript/es6-declarations/theme', formatter: function (dictionary) { - let declaration = 'export declare const Theme: {\n' + let declaration = 'export type Theme = {\n' dictionary.allProperties.forEach((token) => { declaration += ` ${stripMode(token.name)}: string;\n` }) @@ -87,6 +98,20 @@ StyleDictionary.registerFormat({ }, }) +/** Custom format to generate index.d.ts with exports */ +StyleDictionary.registerFormat({ + name: 'typescript/es6-declarations/module', + formatter: function () { + return `import { Colors } from './types/colors'; +import { Theme } from './types/theme'; + +export declare const Colors: Colors; +export declare const DarkTheme: Theme; +export declare const LightTheme: Theme; +` + }, +}) + /** Registering format to generate JSON in Design Token Community Group format (https://tr.designtokens.org/format/) */ StyleDictionary.registerFormat({ name: 'json/dtcg', diff --git a/packages/tokens/config.js b/packages/tokens/config.js index 5d40c690..989f18e0 100644 --- a/packages/tokens/config.js +++ b/packages/tokens/config.js @@ -14,30 +14,38 @@ module.exports = { prefix: '', files: [ { - destination: 'js/index.js', + destination: 'js/colors.js', format: 'javascript/es6/vads-colors', filter: 'filter/color/is-color', }, { - destination: 'index.d.ts', - format: 'typescript/es6-declarations/colors', - filter: 'filter/color/is-color', - }, - { - destination: 'js/light.js', + destination: 'js/themes/light.js', format: 'javascript/es6/vads-colors-theme', filter: 'filter/color/light-mode', }, { - destination: 'js/dark.js', + destination: 'js/themes/dark.js', format: 'javascript/es6/vads-colors-theme', filter: 'filter/color/dark-mode', }, { - destination: 'theme.d.ts', + destination: 'js/index.js', + format: 'javascript/es6/vads-module-export', + }, + { + destination: 'types/colors.d.ts', + format: 'typescript/es6-declarations/colors', + filter: 'filter/color/is-color', + }, + { + destination: 'types/theme.d.ts', format: 'typescript/es6-declarations/theme', filter: 'filter/color/light-mode', }, + { + destination: 'index.d.ts', + format: 'typescript/es6-declarations/module', + }, ], }, figma: { From 18a035631b1c3412ca25cbc82198c2131ab742e1 Mon Sep 17 00:00:00 2001 From: VA Automation Bot Date: Mon, 24 Jun 2024 19:32:05 +0000 Subject: [PATCH 03/17] Version bump: tokens-v0.12.1-alpha.1 --- packages/tokens/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/tokens/package.json b/packages/tokens/package.json index 2c2a2ac2..2409fd0d 100644 --- a/packages/tokens/package.json +++ b/packages/tokens/package.json @@ -1,6 +1,6 @@ { "name": "@department-of-veterans-affairs/mobile-tokens", - "version": "0.12.0", + "version": "0.12.1-alpha.1", "description": "VA Design System Mobile Token Library", "main": "dist/js/index.js", "types": "dist/index.d.ts", From 328004fadb0e9c59ebf28b5ff35893baae07547e Mon Sep 17 00:00:00 2001 From: Narin Ratana Date: Mon, 24 Jun 2024 12:53:36 -0700 Subject: [PATCH 04/17] Export Theme type --- packages/tokens/build.js | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/packages/tokens/build.js b/packages/tokens/build.js index 173bb9fd..54585973 100644 --- a/packages/tokens/build.js +++ b/packages/tokens/build.js @@ -74,7 +74,7 @@ export { LightTheme } from './themes/light' StyleDictionary.registerFormat({ name: 'typescript/es6-declarations/colors', formatter: function (dictionary) { - let declaration = 'export type Colors = {\n' + let declaration = 'export declare const Colors: {\n' dictionary.allProperties.forEach((token) => { declaration += ` ${token.name}: string;\n` }) @@ -102,13 +102,12 @@ StyleDictionary.registerFormat({ StyleDictionary.registerFormat({ name: 'typescript/es6-declarations/module', formatter: function () { - return `import { Colors } from './types/colors'; -import { Theme } from './types/theme'; + return `import { Theme } from './types/theme' -export declare const Colors: Colors; -export declare const DarkTheme: Theme; -export declare const LightTheme: Theme; -` +export declare const DarkTheme: Theme +export declare const LightTheme: Theme +export * from './types/theme' +export * from './types/colors'` }, }) From 7c3c8791b6f520d874c42d985d2b21ba2e3cd57b Mon Sep 17 00:00:00 2001 From: VA Automation Bot Date: Mon, 24 Jun 2024 19:55:08 +0000 Subject: [PATCH 05/17] Version bump: tokens-v0.12.1-alpha.2 --- packages/tokens/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/tokens/package.json b/packages/tokens/package.json index 2409fd0d..21338e83 100644 --- a/packages/tokens/package.json +++ b/packages/tokens/package.json @@ -1,6 +1,6 @@ { "name": "@department-of-veterans-affairs/mobile-tokens", - "version": "0.12.1-alpha.1", + "version": "0.12.1-alpha.2", "description": "VA Design System Mobile Token Library", "main": "dist/js/index.js", "types": "dist/index.d.ts", From a171f69fb09ef651247abf1e1632fc12404c3112 Mon Sep 17 00:00:00 2001 From: Narin Ratana Date: Tue, 25 Jun 2024 10:19:19 -0700 Subject: [PATCH 06/17] Combine themes into single file --- packages/tokens/build.js | 69 ++++++++++++++++++++++++++++++--------- packages/tokens/config.js | 20 +++++++----- 2 files changed, 65 insertions(+), 24 deletions(-) diff --git a/packages/tokens/build.js b/packages/tokens/build.js index 54585973..2d78242c 100644 --- a/packages/tokens/build.js +++ b/packages/tokens/build.js @@ -46,16 +46,51 @@ StyleDictionary.registerFormat({ }, }) +// /** Custom format for themes. Exports color tokens as single object */ +// StyleDictionary.registerFormat({ +// name: 'javascript/es6/vads-colors-theme', +// formatter: function (dictionary) { +// const colorTokens = dictionary.allProperties.reduce((result, token) => { +// result[stripMode(token.name)] = token.value +// return result +// }, {}) + +// return `export const Theme = ${JSON.stringify(sortTokensByKey(colorTokens), null, 2)};` +// }, +// }) + /** Custom format for themes. Exports color tokens as single object */ StyleDictionary.registerFormat({ - name: 'javascript/es6/vads-colors-theme', + name: 'javascript/es6/vads-colors-themes', formatter: function (dictionary) { - const colorTokens = dictionary.allProperties.reduce((result, token) => { - result[stripMode(token.name)] = token.value - return result - }, {}) - - return `export const Theme = ${JSON.stringify(sortTokensByKey(colorTokens), null, 2)};` + const light = dictionary.allProperties + .filter( + (token) => + token.attributes.category.includes('color') && + !token.name.includes('OnDark') && + !token.name.includes('-on-dark'), + ) + .reduce((result, token) => { + result[stripMode(token.name)] = token.value + return result + }, {}) + + const dark = dictionary.allProperties + .filter( + (token) => + token.attributes.category.includes('color') && + !token.name.includes('OnLight') && + !token.name.includes('-on-light'), + ) + .reduce((result, token) => { + result[stripMode(token.name)] = token.value + return result + }, {}) + + return `export const themes = { + light: ${JSON.stringify(sortTokensByKey(light), null, 4)}, + dark: ${JSON.stringify(sortTokensByKey(dark), null, 4)} + }` }, }) @@ -63,9 +98,8 @@ StyleDictionary.registerFormat({ StyleDictionary.registerFormat({ name: 'javascript/es6/vads-module-export', formatter: function () { - return `export { Colors } from 'colors' -export { DarkTheme } from './themes/dark' -export { LightTheme } from './themes/light' + return `export { Colors } from './colors' +export { themes } from './themes' ` }, }) @@ -88,12 +122,18 @@ StyleDictionary.registerFormat({ StyleDictionary.registerFormat({ name: 'typescript/es6-declarations/theme', formatter: function (dictionary) { - let declaration = 'export type Theme = {\n' + let declaration = 'export declare type Theme = {\n' dictionary.allProperties.forEach((token) => { declaration += ` ${stripMode(token.name)}: string;\n` }) - declaration += `}` + declaration += `} + +export declare const themes: { + light: Theme; + dark: Theme; +}` + return declaration }, }) @@ -102,10 +142,7 @@ StyleDictionary.registerFormat({ StyleDictionary.registerFormat({ name: 'typescript/es6-declarations/module', formatter: function () { - return `import { Theme } from './types/theme' - -export declare const DarkTheme: Theme -export declare const LightTheme: Theme + return ` export * from './types/theme' export * from './types/colors'` }, diff --git a/packages/tokens/config.js b/packages/tokens/config.js index 989f18e0..65ba6c7a 100644 --- a/packages/tokens/config.js +++ b/packages/tokens/config.js @@ -18,15 +18,19 @@ module.exports = { format: 'javascript/es6/vads-colors', filter: 'filter/color/is-color', }, + // { + // destination: 'js/themes/light.js', + // format: 'javascript/es6/vads-colors-theme', + // filter: 'filter/color/light-mode', + // }, + // { + // destination: 'js/themes/dark.js', + // format: 'javascript/es6/vads-colors-theme', + // filter: 'filter/color/dark-mode', + // }, { - destination: 'js/themes/light.js', - format: 'javascript/es6/vads-colors-theme', - filter: 'filter/color/light-mode', - }, - { - destination: 'js/themes/dark.js', - format: 'javascript/es6/vads-colors-theme', - filter: 'filter/color/dark-mode', + destination: 'js/themes.js', + format: 'javascript/es6/vads-colors-themes', }, { destination: 'js/index.js', From 6d4dd00e236a24df88204588ec225e8a1cf9ebda Mon Sep 17 00:00:00 2001 From: VA Automation Bot Date: Tue, 25 Jun 2024 17:24:15 +0000 Subject: [PATCH 07/17] Version bump: tokens-v0.12.1-alpha.3 --- packages/tokens/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/tokens/package.json b/packages/tokens/package.json index 21338e83..c4e522bf 100644 --- a/packages/tokens/package.json +++ b/packages/tokens/package.json @@ -1,6 +1,6 @@ { "name": "@department-of-veterans-affairs/mobile-tokens", - "version": "0.12.1-alpha.2", + "version": "0.12.1-alpha.3", "description": "VA Design System Mobile Token Library", "main": "dist/js/index.js", "types": "dist/index.d.ts", From 8d3028d3d5bbb3286e0529bbda0c0c2648d92c28 Mon Sep 17 00:00:00 2001 From: Narin Ratana Date: Tue, 25 Jun 2024 11:03:44 -0700 Subject: [PATCH 08/17] Clean up --- packages/tokens/build.js | 72 ++++++++++++++++----------------------- packages/tokens/config.js | 10 ------ 2 files changed, 29 insertions(+), 53 deletions(-) diff --git a/packages/tokens/build.js b/packages/tokens/build.js index 2d78242c..7bc134a3 100644 --- a/packages/tokens/build.js +++ b/packages/tokens/build.js @@ -14,26 +14,20 @@ StyleDictionary.registerFilter({ /** Remove tokens that have the dark mode (OnDark/-on-dark) suffix */ StyleDictionary.registerFilter({ name: 'filter/color/light-mode', - matcher: (token) => - token.attributes.category.includes('color') && - !token.name.includes('OnDark') && - !token.name.includes('-on-dark'), + matcher: filterLight, }) /** Remove tokens that have the light mode (OnLight/-on-light) suffix */ StyleDictionary.registerFilter({ name: 'filter/color/dark-mode', - matcher: (token) => - token.attributes.category.includes('color') && - !token.name.includes('OnLight') && - !token.name.includes('-on-light'), + matcher: filterDark, }) /** * Formats */ -/** Custom format for colors. Exports color tokens as single object */ +/** Custom format for colors. Exports all color tokens as single object */ StyleDictionary.registerFormat({ name: 'javascript/es6/vads-colors', formatter: function (dictionary) { @@ -46,46 +40,18 @@ StyleDictionary.registerFormat({ }, }) -// /** Custom format for themes. Exports color tokens as single object */ -// StyleDictionary.registerFormat({ -// name: 'javascript/es6/vads-colors-theme', -// formatter: function (dictionary) { -// const colorTokens = dictionary.allProperties.reduce((result, token) => { -// result[stripMode(token.name)] = token.value -// return result -// }, {}) - -// return `export const Theme = ${JSON.stringify(sortTokensByKey(colorTokens), null, 2)};` -// }, -// }) - -/** Custom format for themes. Exports color tokens as single object */ +/** Custom format for themes. Filters light and dark mode themes into properties + * and exports them as a single themes object */ StyleDictionary.registerFormat({ name: 'javascript/es6/vads-colors-themes', formatter: function (dictionary) { const light = dictionary.allProperties - .filter( - (token) => - token.attributes.category.includes('color') && - !token.name.includes('OnDark') && - !token.name.includes('-on-dark'), - ) - .reduce((result, token) => { - result[stripMode(token.name)] = token.value - return result - }, {}) + .filter(filterLight) + .reduce(stripModeReducer, {}) const dark = dictionary.allProperties - .filter( - (token) => - token.attributes.category.includes('color') && - !token.name.includes('OnLight') && - !token.name.includes('-on-light'), - ) - .reduce((result, token) => { - result[stripMode(token.name)] = token.value - return result - }, {}) + .filter(filterDark) + .reduce(stripModeReducer, {}) return `export const themes = { light: ${JSON.stringify(sortTokensByKey(light), null, 4)}, @@ -216,6 +182,7 @@ StyleDictionary.registerTransformGroup({ * Utils */ +/** Sort function to alphabetize token objects */ const sortTokensByKey = (obj) => { const sortedKeys = Object.keys(obj).sort() const sortedObj = {} @@ -226,8 +193,27 @@ const sortTokensByKey = (obj) => { return sortedObj } +/** Reusable filter function that returns only non-dark-mode tokens */ +const filterLight = (token) => + token.attributes.category.includes('color') && + !token.name.includes('OnDark') && + !token.name.includes('-on-dark') + +/** Reusable filter function that returns only non-light-mode tokens */ +const filterDark = (token) => + token.attributes.category.includes('color') && + !token.name.includes('OnLight') && + !token.name.includes('-on-light') + +/** Removes OnDark and OnLight mode suffixes for themes */ const stripMode = (name) => name.replace('OnDark', '').replace('OnLight', '') +/** Reusable reducer function that creates tokens with the mode removed from their name */ +const stripModeReducer = (result, token) => { + result[stripMode(token.name)] = token.value + return result +} + const StyleDictionaryExtended = StyleDictionary.extend(__dirname + '/config.js') StyleDictionaryExtended.buildAllPlatforms() diff --git a/packages/tokens/config.js b/packages/tokens/config.js index 65ba6c7a..e5a479a1 100644 --- a/packages/tokens/config.js +++ b/packages/tokens/config.js @@ -18,16 +18,6 @@ module.exports = { format: 'javascript/es6/vads-colors', filter: 'filter/color/is-color', }, - // { - // destination: 'js/themes/light.js', - // format: 'javascript/es6/vads-colors-theme', - // filter: 'filter/color/light-mode', - // }, - // { - // destination: 'js/themes/dark.js', - // format: 'javascript/es6/vads-colors-theme', - // filter: 'filter/color/dark-mode', - // }, { destination: 'js/themes.js', format: 'javascript/es6/vads-colors-themes', From 4e2937a5bfdef4ec9f3a387792d8c913216d38c0 Mon Sep 17 00:00:00 2001 From: VA Automation Bot Date: Tue, 25 Jun 2024 18:15:57 +0000 Subject: [PATCH 09/17] Version bump: components-v0.19.1-alpha.0 --- packages/components/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/package.json b/packages/components/package.json index d93afcf4..ea052428 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,6 +1,6 @@ { "name": "@department-of-veterans-affairs/mobile-component-library", - "version": "0.18.0", + "version": "0.19.1-alpha.0", "description": "VA Design System Mobile Component Library", "main": "src/index.tsx", "scripts": { From f081496038b9fae81a3019132d2a0549c2d7949a Mon Sep 17 00:00:00 2001 From: Narin Ratana Date: Tue, 25 Jun 2024 12:06:53 -0700 Subject: [PATCH 10/17] Move utilities to top --- packages/tokens/build.js | 72 ++++++++++++++++++++-------------------- 1 file changed, 36 insertions(+), 36 deletions(-) diff --git a/packages/tokens/build.js b/packages/tokens/build.js index 7bc134a3..23bdf1b6 100644 --- a/packages/tokens/build.js +++ b/packages/tokens/build.js @@ -1,6 +1,42 @@ // eslint-disable-next-line @typescript-eslint/no-var-requires const StyleDictionary = require('style-dictionary') +/** + * Utils + */ + +/** Sort function to alphabetize token objects */ +const sortTokensByKey = (obj) => { + const sortedKeys = Object.keys(obj).sort() + const sortedObj = {} + sortedKeys.forEach((key) => { + sortedObj[key] = obj[key] + }) + + return sortedObj +} + +/** Reusable filter function that returns only non-dark-mode tokens */ +const filterLight = (token) => + token.attributes.category.includes('color') && + !token.name.includes('OnDark') && + !token.name.includes('-on-dark') + +/** Reusable filter function that returns only non-light-mode tokens */ +const filterDark = (token) => + token.attributes.category.includes('color') && + !token.name.includes('OnLight') && + !token.name.includes('-on-light') + +/** Removes OnDark and OnLight mode suffixes for themes */ +const stripMode = (name) => name.replace('OnDark', '').replace('OnLight', '') + +/** Reusable reducer function that creates tokens with the mode removed from their name */ +const stripModeReducer = (result, token) => { + result[stripMode(token.name)] = token.value + return result +} + /** * Filters */ @@ -178,42 +214,6 @@ StyleDictionary.registerTransformGroup({ transforms: ['name/cti/kebab', 'color/hex'], }) -/** - * Utils - */ - -/** Sort function to alphabetize token objects */ -const sortTokensByKey = (obj) => { - const sortedKeys = Object.keys(obj).sort() - const sortedObj = {} - sortedKeys.forEach((key) => { - sortedObj[key] = obj[key] - }) - - return sortedObj -} - -/** Reusable filter function that returns only non-dark-mode tokens */ -const filterLight = (token) => - token.attributes.category.includes('color') && - !token.name.includes('OnDark') && - !token.name.includes('-on-dark') - -/** Reusable filter function that returns only non-light-mode tokens */ -const filterDark = (token) => - token.attributes.category.includes('color') && - !token.name.includes('OnLight') && - !token.name.includes('-on-light') - -/** Removes OnDark and OnLight mode suffixes for themes */ -const stripMode = (name) => name.replace('OnDark', '').replace('OnLight', '') - -/** Reusable reducer function that creates tokens with the mode removed from their name */ -const stripModeReducer = (result, token) => { - result[stripMode(token.name)] = token.value - return result -} - const StyleDictionaryExtended = StyleDictionary.extend(__dirname + '/config.js') StyleDictionaryExtended.buildAllPlatforms() From ddba7f288b9072a487179067e6766a2e77f5c626 Mon Sep 17 00:00:00 2001 From: Narin Ratana Date: Tue, 25 Jun 2024 12:19:03 -0700 Subject: [PATCH 11/17] Add prettier formatting --- packages/tokens/package.json | 5 +++-- yarn.lock | 10 ++++++++++ 2 files changed, 13 insertions(+), 2 deletions(-) diff --git a/packages/tokens/package.json b/packages/tokens/package.json index c4e522bf..7b5bbe51 100644 --- a/packages/tokens/package.json +++ b/packages/tokens/package.json @@ -5,8 +5,8 @@ "main": "dist/js/index.js", "types": "dist/index.d.ts", "scripts": { - "tokens:build": "node ./build.js", - "prepack": "node ./build.js", + "tokens:build": "node ./build.js && prettier dist/ --write", + "prepack": "yarn run tokens:build", "publish-package": "npm publish --access public --tolerate-republish" }, "repository": { @@ -31,6 +31,7 @@ "packageManager": "yarn@3.6.1", "devDependencies": { "@department-of-veterans-affairs/css-library": "0.7.0", + "prettier": "^3.3.2", "style-dictionary": "^3.9.2" } } diff --git a/yarn.lock b/yarn.lock index 09bf9086..99872be5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2221,6 +2221,7 @@ __metadata: resolution: "@department-of-veterans-affairs/mobile-tokens@workspace:packages/tokens" dependencies: "@department-of-veterans-affairs/css-library": "npm:0.7.0" + prettier: "npm:^3.3.2" style-dictionary: "npm:^3.9.2" languageName: unknown linkType: soft @@ -16927,6 +16928,15 @@ __metadata: languageName: node linkType: hard +"prettier@npm:^3.3.2": + version: 3.3.2 + resolution: "prettier@npm:3.3.2" + bin: + prettier: bin/prettier.cjs + checksum: 39ed27d17f0238da6dd6571d63026566bd790d3d0edac57c285fbab525982060c8f1e01955fe38134ab10f0951a6076da37f015db8173c02f14bc7f0803a384c + languageName: node + linkType: hard + "pretty-bytes@npm:5.6.0": version: 5.6.0 resolution: "pretty-bytes@npm:5.6.0" From 8786c9c56ab6cd7b1fc509754ad8807a4554b014 Mon Sep 17 00:00:00 2001 From: Narin Ratana Date: Tue, 25 Jun 2024 12:29:08 -0700 Subject: [PATCH 12/17] Fix prepack command --- packages/tokens/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/tokens/package.json b/packages/tokens/package.json index 7b5bbe51..b9c56b6e 100644 --- a/packages/tokens/package.json +++ b/packages/tokens/package.json @@ -6,7 +6,7 @@ "types": "dist/index.d.ts", "scripts": { "tokens:build": "node ./build.js && prettier dist/ --write", - "prepack": "yarn run tokens:build", + "prepack": "npm run tokens:build", "publish-package": "npm publish --access public --tolerate-republish" }, "repository": { From 2941cf6e43df9e6f43a31c5a8ecd3c2d8cdf5716 Mon Sep 17 00:00:00 2001 From: VA Automation Bot Date: Tue, 25 Jun 2024 19:30:17 +0000 Subject: [PATCH 13/17] Version bump: tokens-v0.12.1-alpha.4 --- packages/tokens/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/tokens/package.json b/packages/tokens/package.json index b9c56b6e..c8d0c47a 100644 --- a/packages/tokens/package.json +++ b/packages/tokens/package.json @@ -1,6 +1,6 @@ { "name": "@department-of-veterans-affairs/mobile-tokens", - "version": "0.12.1-alpha.3", + "version": "0.12.1-alpha.4", "description": "VA Design System Mobile Token Library", "main": "dist/js/index.js", "types": "dist/index.d.ts", From 07a6d1be53a22db12801ebd4902f63aa9a798fe2 Mon Sep 17 00:00:00 2001 From: Narin Ratana Date: Wed, 26 Jun 2024 11:47:38 -0700 Subject: [PATCH 14/17] Clean up formatting of multiline strings --- packages/tokens/build.js | 39 ++++++++++++++++++++------------------- 1 file changed, 20 insertions(+), 19 deletions(-) diff --git a/packages/tokens/build.js b/packages/tokens/build.js index 23bdf1b6..974dfb81 100644 --- a/packages/tokens/build.js +++ b/packages/tokens/build.js @@ -72,7 +72,7 @@ StyleDictionary.registerFormat({ return result }, {}) - return `export const Colors = ${JSON.stringify(sortTokensByKey(colorTokens), null, 2)};` + return `export const colors = ${JSON.stringify(sortTokensByKey(colorTokens), null, 2)};` }, }) @@ -89,10 +89,12 @@ StyleDictionary.registerFormat({ .filter(filterDark) .reduce(stripModeReducer, {}) - return `export const themes = { - light: ${JSON.stringify(sortTokensByKey(light), null, 4)}, - dark: ${JSON.stringify(sortTokensByKey(dark), null, 4)} - }` + return ( + 'export const themes = {\n' + + ` light: ${JSON.stringify(sortTokensByKey(light), null, 4)},\n` + + ` dark: ${JSON.stringify(sortTokensByKey(dark), null, 4)}\n` + + '}' + ) }, }) @@ -100,22 +102,22 @@ StyleDictionary.registerFormat({ StyleDictionary.registerFormat({ name: 'javascript/es6/vads-module-export', formatter: function () { - return `export { Colors } from './colors' -export { themes } from './themes' -` + return ( + "export { colors } from './colors'\n" + + "export { themes } from './themes'" + ) }, }) -/** Creates named type declaration for Colors. Allows for TypeScript autocomplete */ +/** Creates named type declaration for colors. Allows for TypeScript autocomplete */ StyleDictionary.registerFormat({ name: 'typescript/es6-declarations/colors', formatter: function (dictionary) { - let declaration = 'export declare const Colors: {\n' + let declaration = 'export declare const colors: {\n' dictionary.allProperties.forEach((token) => { declaration += ` ${token.name}: string;\n` }) - - declaration += `}` + declaration += '}' return declaration }, }) @@ -128,14 +130,13 @@ StyleDictionary.registerFormat({ dictionary.allProperties.forEach((token) => { declaration += ` ${stripMode(token.name)}: string;\n` }) + declaration += '}\n\n' - declaration += `} - -export declare const themes: { - light: Theme; - dark: Theme; -}` - + declaration += + 'export declare const themes: {\n' + + ' light: Theme;\n' + + ' dark: Theme;\n' + + '}' return declaration }, }) From 2bc82fd560d7fcf6ef16fc542413f693ffccd5f8 Mon Sep 17 00:00:00 2001 From: Narin Ratana Date: Wed, 26 Jun 2024 11:47:46 -0700 Subject: [PATCH 15/17] Sort configs by file name --- packages/tokens/config.js | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/tokens/config.js b/packages/tokens/config.js index e5a479a1..f5ff39a1 100644 --- a/packages/tokens/config.js +++ b/packages/tokens/config.js @@ -13,19 +13,23 @@ module.exports = { buildPath: './dist/', prefix: '', files: [ + { + destination: 'index.d.ts', + format: 'typescript/es6-declarations/module', + }, { destination: 'js/colors.js', format: 'javascript/es6/vads-colors', filter: 'filter/color/is-color', }, - { - destination: 'js/themes.js', - format: 'javascript/es6/vads-colors-themes', - }, { destination: 'js/index.js', format: 'javascript/es6/vads-module-export', }, + { + destination: 'js/themes.js', + format: 'javascript/es6/vads-colors-themes', + }, { destination: 'types/colors.d.ts', format: 'typescript/es6-declarations/colors', @@ -36,10 +40,6 @@ module.exports = { format: 'typescript/es6-declarations/theme', filter: 'filter/color/light-mode', }, - { - destination: 'index.d.ts', - format: 'typescript/es6-declarations/module', - }, ], }, figma: { @@ -47,14 +47,14 @@ module.exports = { buildPath: './figma/', files: [ { - destination: `light.json`, + destination: `dark.json`, format: 'json/dtcg', - filter: 'filter/color/light-mode', + filter: 'filter/color/dark-mode', }, { - destination: `dark.json`, + destination: `light.json`, format: 'json/dtcg', - filter: 'filter/color/dark-mode', + filter: 'filter/color/light-mode', }, ], }, From c1840f95acad194e2305e71d900ab21c51bdaf85 Mon Sep 17 00:00:00 2001 From: Narin Ratana Date: Wed, 26 Jun 2024 11:52:06 -0700 Subject: [PATCH 16/17] Clean up module declartion --- packages/tokens/build.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/tokens/build.js b/packages/tokens/build.js index 974dfb81..53ed86b2 100644 --- a/packages/tokens/build.js +++ b/packages/tokens/build.js @@ -145,9 +145,10 @@ StyleDictionary.registerFormat({ StyleDictionary.registerFormat({ name: 'typescript/es6-declarations/module', formatter: function () { - return ` -export * from './types/theme' -export * from './types/colors'` + let declaration = "export * from './types/theme'\n" + declaration += "export * from './types/colors'" + + return declaration }, }) From 1f2cbe822bdf062532f3deaadd3b050e4ddbf96e Mon Sep 17 00:00:00 2001 From: VA Automation Bot Date: Wed, 26 Jun 2024 18:53:15 +0000 Subject: [PATCH 17/17] Version bump: tokens-v0.12.1-alpha.6 --- packages/tokens/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/tokens/package.json b/packages/tokens/package.json index c8d0c47a..c8a6133d 100644 --- a/packages/tokens/package.json +++ b/packages/tokens/package.json @@ -1,6 +1,6 @@ { "name": "@department-of-veterans-affairs/mobile-tokens", - "version": "0.12.1-alpha.4", + "version": "0.12.1-alpha.6", "description": "VA Design System Mobile Token Library", "main": "dist/js/index.js", "types": "dist/index.d.ts",