diff --git a/package-lock.json b/package-lock.json index 515af1e50..623941137 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,9 +13,6 @@ "apps/*", "!apps/docs" ], - "dependencies": { - "@primer/primitives": "^9.1.1" - }, "devDependencies": { "@changesets/changelog-github": "^0.4.8", "@changesets/cli": "^2.26.1", @@ -5033,6 +5030,7 @@ "version": "0.5.2", "resolved": "https://registry.npmjs.org/@prettier/sync/-/sync-0.5.2.tgz", "integrity": "sha512-Yb569su456XNx5BsH/Vyem7xD6g/y9iLmLUzRKM1a/dhU/D7HqqvkAG72znulXlMXztbV0iiu9O5AL8K98TzZQ==", + "dev": true, "dependencies": { "make-synchronized": "^0.2.8" }, @@ -5083,6 +5081,7 @@ "version": "9.1.1", "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-9.1.1.tgz", "integrity": "sha512-c8PjLIG+houvCRg9bKza3gj/VoM2QZcN7TqYRa4dl5ZYd1A+BOSvAenjGhVVK23ws8uZSVPYDuvdQk1PO1jm1A==", + "dev": true, "dependencies": { "@prettier/sync": "^0.5.2", "prettier": "3.3" @@ -5092,6 +5091,7 @@ "version": "3.3.3", "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz", "integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==", + "dev": true, "bin": { "prettier": "bin/prettier.cjs" }, @@ -20697,6 +20697,7 @@ "version": "0.2.9", "resolved": "https://registry.npmjs.org/make-synchronized/-/make-synchronized-0.2.9.tgz", "integrity": "sha512-4wczOs8SLuEdpEvp3vGo83wh8rjJ78UsIk7DIX5fxdfmfMJGog4bQzxfvOwq7Q3yCHLC4jp1urPHIxRS/A93gA==", + "dev": true, "funding": { "url": "https://github.com/fisker/make-synchronized?sponsor=1" } @@ -23243,6 +23244,7 @@ "version": "2.8.8", "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz", "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==", + "dev": true, "bin": { "prettier": "bin-prettier.js" }, @@ -28140,164 +28142,13 @@ "license": "MIT", "devDependencies": { "@primer/primitives": "9.1.1", - "color2k": "^2.0.2", - "fast-glob": "3.3.2", - "style-dictionary": "3.8.0" + "fast-glob": "3.3.2" }, "engines": { "node": ">=16.0.0", "npm": ">=8.0.0" } }, - "packages/design-tokens/node_modules/ansi-styles": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", - "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", - "dev": true, - "dependencies": { - "color-convert": "^2.0.1" - }, - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/chalk/ansi-styles?sponsor=1" - } - }, - "packages/design-tokens/node_modules/chalk": { - "version": "4.1.2", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", - "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", - "dev": true, - "dependencies": { - "ansi-styles": "^4.1.0", - "supports-color": "^7.1.0" - }, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/chalk/chalk?sponsor=1" - } - }, - "packages/design-tokens/node_modules/color-convert": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", - "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", - "dev": true, - "dependencies": { - "color-name": "~1.1.4" - }, - "engines": { - "node": ">=7.0.0" - } - }, - "packages/design-tokens/node_modules/color-name": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", - "dev": true - }, - "packages/design-tokens/node_modules/commander": { - "version": "8.3.0", - "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz", - "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==", - "dev": true, - "engines": { - "node": ">= 12" - } - }, - "packages/design-tokens/node_modules/fs-extra": { - "version": "10.1.0", - "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz", - "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==", - "dev": true, - "dependencies": { - "graceful-fs": "^4.2.0", - "jsonfile": "^6.0.1", - "universalify": "^2.0.0" - }, - "engines": { - "node": ">=12" - } - }, - "packages/design-tokens/node_modules/has-flag": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", - "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", - "dev": true, - "engines": { - "node": ">=8" - } - }, - "packages/design-tokens/node_modules/jsonfile": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz", - "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==", - "dev": true, - "dependencies": { - "universalify": "^2.0.0" - }, - "optionalDependencies": { - "graceful-fs": "^4.1.6" - } - }, - "packages/design-tokens/node_modules/style-dictionary": { - "version": "3.8.0", - "resolved": "https://registry.npmjs.org/style-dictionary/-/style-dictionary-3.8.0.tgz", - "integrity": "sha512-wHlB/f5eO3mDcYv6WtOz6gvQC477jBKrwuIXe+PtHskTCBsJdAOvL8hCquczJxDui2TnwpeNE+2msK91JJomZg==", - "dev": true, - "dependencies": { - "chalk": "^4.0.0", - "change-case": "^4.1.2", - "commander": "^8.3.0", - "fs-extra": "^10.0.0", - "glob": "^7.2.0", - "json5": "^2.2.2", - "jsonc-parser": "^3.0.0", - "lodash": "^4.17.15", - "tinycolor2": "^1.4.1" - }, - "bin": { - "style-dictionary": "bin/style-dictionary" - }, - "engines": { - "node": ">=12.0.0" - } - }, - "packages/design-tokens/node_modules/style-dictionary/node_modules/json5": { - "version": "2.2.3", - "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz", - "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==", - "dev": true, - "bin": { - "json5": "lib/cli.js" - }, - "engines": { - "node": ">=6" - } - }, - "packages/design-tokens/node_modules/supports-color": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", - "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", - "dev": true, - "dependencies": { - "has-flag": "^4.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "packages/design-tokens/node_modules/universalify": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz", - "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==", - "dev": true, - "engines": { - "node": ">= 10.0.0" - } - }, "packages/e2e": { "name": "@primer/brand-e2e", "version": "0.40.0", @@ -31719,6 +31570,7 @@ "version": "0.5.2", "resolved": "https://registry.npmjs.org/@prettier/sync/-/sync-0.5.2.tgz", "integrity": "sha512-Yb569su456XNx5BsH/Vyem7xD6g/y9iLmLUzRKM1a/dhU/D7HqqvkAG72znulXlMXztbV0iiu9O5AL8K98TzZQ==", + "dev": true, "requires": { "make-synchronized": "^0.2.8" } @@ -31744,118 +31596,7 @@ "version": "file:packages/design-tokens", "requires": { "@primer/primitives": "9.1.1", - "color2k": "^2.0.2", - "fast-glob": "3.3.2", - "style-dictionary": "3.8.0" - }, - "dependencies": { - "ansi-styles": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", - "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", - "dev": true, - "requires": { - "color-convert": "^2.0.1" - } - }, - "chalk": { - "version": "4.1.2", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", - "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", - "dev": true, - "requires": { - "ansi-styles": "^4.1.0", - "supports-color": "^7.1.0" - } - }, - "color-convert": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", - "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", - "dev": true, - "requires": { - "color-name": "~1.1.4" - } - }, - "color-name": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", - "dev": true - }, - "commander": { - "version": "8.3.0", - "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz", - "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==", - "dev": true - }, - "fs-extra": { - "version": "10.1.0", - "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz", - "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==", - "dev": true, - "requires": { - "graceful-fs": "^4.2.0", - "jsonfile": "^6.0.1", - "universalify": "^2.0.0" - } - }, - "has-flag": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", - "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", - "dev": true - }, - "jsonfile": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz", - "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==", - "dev": true, - "requires": { - "graceful-fs": "^4.1.6", - "universalify": "^2.0.0" - } - }, - "style-dictionary": { - "version": "3.8.0", - "resolved": "https://registry.npmjs.org/style-dictionary/-/style-dictionary-3.8.0.tgz", - "integrity": "sha512-wHlB/f5eO3mDcYv6WtOz6gvQC477jBKrwuIXe+PtHskTCBsJdAOvL8hCquczJxDui2TnwpeNE+2msK91JJomZg==", - "dev": true, - "requires": { - "chalk": "^4.0.0", - "change-case": "^4.1.2", - "commander": "^8.3.0", - "fs-extra": "^10.0.0", - "glob": "^7.2.0", - "json5": "^2.2.2", - "jsonc-parser": "^3.0.0", - "lodash": "^4.17.15", - "tinycolor2": "^1.4.1" - }, - "dependencies": { - "json5": { - "version": "2.2.3", - "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz", - "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==", - "dev": true - } - } - }, - "supports-color": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", - "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", - "dev": true, - "requires": { - "has-flag": "^4.0.0" - } - }, - "universalify": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz", - "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==", - "dev": true - } + "fast-glob": "3.3.2" } }, "@primer/brand-storybook": { @@ -31905,6 +31646,7 @@ "version": "9.1.1", "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-9.1.1.tgz", "integrity": "sha512-c8PjLIG+houvCRg9bKza3gj/VoM2QZcN7TqYRa4dl5ZYd1A+BOSvAenjGhVVK23ws8uZSVPYDuvdQk1PO1jm1A==", + "dev": true, "requires": { "@prettier/sync": "^0.5.2", "prettier": "3.3" @@ -31913,7 +31655,8 @@ "prettier": { "version": "3.3.3", "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz", - "integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==" + "integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==", + "dev": true } } }, @@ -42577,7 +42320,8 @@ "make-synchronized": { "version": "0.2.9", "resolved": "https://registry.npmjs.org/make-synchronized/-/make-synchronized-0.2.9.tgz", - "integrity": "sha512-4wczOs8SLuEdpEvp3vGo83wh8rjJ78UsIk7DIX5fxdfmfMJGog4bQzxfvOwq7Q3yCHLC4jp1urPHIxRS/A93gA==" + "integrity": "sha512-4wczOs8SLuEdpEvp3vGo83wh8rjJ78UsIk7DIX5fxdfmfMJGog4bQzxfvOwq7Q3yCHLC4jp1urPHIxRS/A93gA==", + "dev": true }, "makeerror": { "version": "1.0.12", @@ -44142,7 +43886,8 @@ "prettier": { "version": "2.8.8", "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz", - "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==" + "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==", + "dev": true }, "prettier-linter-helpers": { "version": "1.0.0", diff --git a/packages/design-tokens/package.json b/packages/design-tokens/package.json index 357c89f98..d3a297e28 100644 --- a/packages/design-tokens/package.json +++ b/packages/design-tokens/package.json @@ -34,9 +34,7 @@ }, "devDependencies": { "@primer/primitives": "9.1.1", - "color2k": "^2.0.2", - "fast-glob": "3.3.2", - "style-dictionary": "3.8.0" + "fast-glob": "3.3.2" }, "engines": { "node": ">=16.0.0", diff --git a/packages/design-tokens/scripts/build-tokens.js b/packages/design-tokens/scripts/build-tokens.js index 70e55ec67..bb427abdc 100644 --- a/packages/design-tokens/scripts/build-tokens.js +++ b/packages/design-tokens/scripts/build-tokens.js @@ -1,6 +1,7 @@ const fs = require('fs') const {buildPrimitives, StyleDictionary} = require('./style-dictionary') +const tsModuleDeclaration = require('../src/formats/typescript-module-declarations-v2') const mediaQueryFormat = require('../src/formats/responsive-media-query') const colorModeFormat = require('../src/formats/color-mode-attributes') @@ -64,37 +65,10 @@ const darkJson = require('../src/tokens/base/colors/dark') }) /** - * Added to replace the same transform in Primer Primitives - * The upstream transform removes rem from lineheight, but this - * causes a visual regression in Primer Brand. - * @see https://github.com/primer/primitives/blob/b51c743a0fe26ab7885a9cc82420f400ad35cce7/build.js#L66 - * - * TODO: Investigate why unitless lineheight doesn't work - * + * Replacement format for typescript/module-declarations + * Type schema corresponds to javascript/module-v2 format */ - StyleDictionary.registerTransform({ - name: 'pxToRem', - type: 'value', - transformer: token => { - function isPx(value) { - return /[\d.]+px$/.test(value) - } - - if (isPx(token.value)) { - const baseFontSize = 16 - const floatValue = parseFloat(token.value.replace('px', '')) - if (isNaN(floatValue)) { - return token.value - } - if (floatValue === 0) { - return '0' - } - - return `${floatValue / baseFontSize}rem` - } - return token.value - }, - }) + StyleDictionary.registerFormat(tsModuleDeclaration) //build most tokens buildPrimitives({ diff --git a/packages/design-tokens/scripts/style-dictionary.js b/packages/design-tokens/scripts/style-dictionary.js index bcb3a1116..e3f9b38e1 100644 --- a/packages/design-tokens/scripts/style-dictionary.js +++ b/packages/design-tokens/scripts/style-dictionary.js @@ -1,11 +1,8 @@ /** * Ported from primer/primitives, as it was removed in v8 release and we still need it */ - const glob = require('fast-glob') -const {PrimerStyleDictionary} = require('@primer/primitives/dist/build/PrimerStyleDictionary.js') - -const StyleDictionary = PrimerStyleDictionary +const {PrimerStyleDictionary: StyleDictionary} = require('@primer/primitives/dist/build/PrimerStyleDictionary.js') const {fileHeader} = StyleDictionary.formatHelpers @@ -51,62 +48,6 @@ module.exports = ${JSON.stringify(recursiveleyFlattenDictionary(dictionary.token }, }) -/** - * Replacement format for typescript/module-declarations - * Type schema corresponds to javascript/module-v2 format - */ -StyleDictionary.registerFormat({ - name: 'typescript/module-declarations-v2', - formatter({dictionary, options, file}) { - const {moduleName = `tokens`} = options - - const getType = value => { - switch (typeof value) { - case 'string': - return 'string' - case 'number': - return 'number' - default: - return 'any' - } - } - - const recursiveTypeGeneration = obj => { - const tree = {} - const shortHandSizes = ['large', 'medium', 'small'] - if (typeof obj !== 'object' || Array.isArray(obj)) { - return obj - } - - if (obj.hasOwnProperty('value') && typeof obj.value === 'string') { - return getType(obj.value) - } else { - for (const name in obj) { - if ((obj.hasOwnProperty(name) && obj.name === 'shorthand') || shortHandSizes.includes(obj.name)) { - for (const shorthandKey in obj.value) { - tree[shorthandKey] = getType(obj.value[shorthandKey]) - } - return tree - } else if (obj.hasOwnProperty(name)) { - tree[name] = recursiveTypeGeneration(obj[name]) - } - } - } - return tree - } - - const output = `${fileHeader({file})} - -declare const ${moduleName}: ${JSON.stringify(recursiveTypeGeneration(dictionary.tokens), null, 2)} -export default ${moduleName};` - - return output - .replace(/"any"/g, 'any') - .replace(/"string"/g, 'string') - .replace(/"number"/g, 'number') - }, -}) - /** * @name build * @description @@ -208,7 +149,7 @@ function buildPrimitives( }, js: { buildPath: `${outputPath}/js/`, - transforms: ['name/pathToPascalCase', 'pxToRem'], + transforms: ['name/pathToPascalCase', 'dimension/rem'], // map the array of token file paths to style dictionary output files files: files.map(filePath => { return { @@ -220,7 +161,7 @@ function buildPrimitives( }, jsModule: { buildPath: `${outputPath}/js/module/`, - transforms: ['pxToRem'], + transforms: ['dimension/rem'], // map the array of token file paths to style dictionary output files files: files.map(filePath => { return { @@ -232,7 +173,7 @@ function buildPrimitives( }, tsTypes: { buildPath: `${outputPath}/ts/`, - transforms: ['pxToRem'], + transforms: ['dimension/rem'], // map the array of token file paths to style dictionary output files files: files.map(filePath => { return { @@ -244,7 +185,7 @@ function buildPrimitives( }, ts: { buildPath: `${outputPath}/ts/`, - transforms: ['pxToRem'], + transforms: ['dimension/rem'], // map the array of token file paths to style dictionary output files files: files.map(filePath => { return { diff --git a/packages/design-tokens/src/formats/color-mode-attributes.js b/packages/design-tokens/src/formats/color-mode-attributes.js index 82984ed12..e109a5766 100644 --- a/packages/design-tokens/src/formats/color-mode-attributes.js +++ b/packages/design-tokens/src/formats/color-mode-attributes.js @@ -1,6 +1,5 @@ const {StyleDictionary} = require('../../scripts/style-dictionary') -const {fileHeader, sortByReference} = StyleDictionary.formatHelpers -const createPropertyFormatter = require('style-dictionary/lib/common/formatHelpers/createPropertyFormatter') +const {fileHeader, sortByReference, createPropertyFormatter} = StyleDictionary.formatHelpers const prettier = require('prettier') /** diff --git a/packages/design-tokens/src/formats/responsive-media-query.js b/packages/design-tokens/src/formats/responsive-media-query.js index b7572f353..6121c37d3 100644 --- a/packages/design-tokens/src/formats/responsive-media-query.js +++ b/packages/design-tokens/src/formats/responsive-media-query.js @@ -1,6 +1,5 @@ const {StyleDictionary} = require('../../scripts/style-dictionary') -const {fileHeader, sortByReference} = StyleDictionary.formatHelpers -const createPropertyFormatter = require('style-dictionary/lib/common/formatHelpers/createPropertyFormatter') +const {fileHeader, sortByReference, createPropertyFormatter} = StyleDictionary.formatHelpers const prettier = require('prettier') function mediaQueryFormat({dictionary, file, options}) { diff --git a/packages/design-tokens/src/formats/typescript-module-declarations-v2.js b/packages/design-tokens/src/formats/typescript-module-declarations-v2.js new file mode 100644 index 000000000..c3972ceeb --- /dev/null +++ b/packages/design-tokens/src/formats/typescript-module-declarations-v2.js @@ -0,0 +1,56 @@ +const {StyleDictionary} = require('../../scripts/style-dictionary') +const {fileHeader} = StyleDictionary.formatHelpers + +const tsModuleDeclaration = { + name: 'typescript/module-declarations-v2', + formatter({dictionary, options, file}) { + const {moduleName = `tokens`} = options + + const getType = value => { + switch (typeof value) { + case 'string': + return 'string' + case 'number': + return 'number' + default: + return 'any' + } + } + + const recursiveTypeGeneration = obj => { + const tree = {} + const shortHandSizes = ['large', 'medium', 'small'] + if (typeof obj !== 'object' || Array.isArray(obj)) { + return obj + } + + if (obj.hasOwnProperty('value') && typeof obj.value === 'string') { + return getType(obj.value) + } else { + for (const name in obj) { + if ((obj.hasOwnProperty(name) && obj.name === 'shorthand') || shortHandSizes.includes(obj.name)) { + for (const shorthandKey in obj.value) { + tree[shorthandKey] = getType(obj.value[shorthandKey]) + } + return tree + } else if (obj.hasOwnProperty(name)) { + tree[name] = recursiveTypeGeneration(obj[name]) + } + } + } + return tree + } + + const output = `${fileHeader({file})} + +declare const ${moduleName}: ${JSON.stringify(recursiveTypeGeneration(dictionary.tokens), null, 2)} +export default ${moduleName};` + + return output + .replace(/"any"/g, 'any') + .replace(/"string"/g, 'string') + .replace(/"number"/g, 'number') + }, +} + +module.exports = tsModuleDeclaration