diff --git a/packages/tokens/.eslintignore b/packages/tokens/.eslintignore index 53ba09f..6cf3105 100644 --- a/packages/tokens/.eslintignore +++ b/packages/tokens/.eslintignore @@ -1,4 +1,5 @@ node_modules dist src/bin/tests/assets -src/lib/cunningham-tokens.ts \ No newline at end of file +src/lib/cunningham-tokens.ts +src/bin/ThemeColors diff --git a/packages/tokens/FigmaToCunningham.ts b/packages/tokens/FigmaToCunningham.ts new file mode 100644 index 0000000..5e9db7c --- /dev/null +++ b/packages/tokens/FigmaToCunningham.ts @@ -0,0 +1,33 @@ +/** + * This util script is used to convert Figma's Token Studio JSON color config to TS file. + * + * CLI usage example: + * $ yarn figma-to-cunningham dark.json + */ +import fs from "fs"; +import path from "path"; + +const filePath = process.argv[2]; +const data = fs.readFileSync(filePath); +const json = JSON.parse(data.toString()); +const output: any = {}; + +Object.keys(json).forEach((color) => { + console.log("Parsing color:", color); + Object.keys(json[color]).forEach((colorVariation) => { + const colorName = color === "Succes" ? "success" : color.toLowerCase(); + output[colorName + "-" + colorVariation] = + json[color][colorVariation].value; + }); +}); +console.log("Output:", output); +const content = `/** + * /!\\ Please do not edit this file directly. Instead use the FigmaToCunningham.ts converter that generated this file. + */ +export const colors = ${JSON.stringify(output)} +`; + +const fileName = path.parse(filePath).name; +const outputPath = `./src/bin/ThemeColors/${fileName}.ts`; +fs.writeFileSync(outputPath, content); +console.log("Successfuly written to", outputPath); diff --git a/packages/tokens/package.json b/packages/tokens/package.json index d3147d8..152f0f8 100644 --- a/packages/tokens/package.json +++ b/packages/tokens/package.json @@ -30,7 +30,8 @@ "build": "yarn build-bin && yarn build-default-theme && yarn build-lib && cd ../.. && ln -sf ../../packages/tokens/dist/bin/Main.js node_modules/.bin/cunningham", "build-default-theme": "node ./dist/bin/Main.js -o dist -s html -g scss,css,js,ts --utility-classes", "test": "cross-env FORCE_COLOR=1 jest --runInBand --verbose src", - "test-ci": "cross-env FORCE_COLOR=1 jest --runInBand src" + "test-ci": "cross-env FORCE_COLOR=1 jest --runInBand src", + "figma-to-cunningham": "ts-node FigmaToCunningham.ts" }, "dependencies": { "chalk": "4.1.2", diff --git a/packages/tokens/src/bin/ThemeColors/dark.ts b/packages/tokens/src/bin/ThemeColors/dark.ts new file mode 100644 index 0000000..146e0f9 --- /dev/null +++ b/packages/tokens/src/bin/ThemeColors/dark.ts @@ -0,0 +1,51 @@ +/** + * /!\ Please do not edit this file directly. Instead use the FigmaToCunningham.ts converter that generated this file. + */ +export const colors = { + 'greyscale-100': '#182536', + 'greyscale-200': '#303C4B', + 'greyscale-300': '#555F6B', + 'greyscale-400': '#79818A', + 'greyscale-500': '#9EA3AA', + 'greyscale-600': '#C2C6CA', + 'greyscale-700': '#E7E8EA', + 'greyscale-800': '#F3F4F4', + 'greyscale-900': '#FAFAFB', + 'greyscale-000': '#0C1A2B', + 'primary-100': '#3B4C62', + 'primary-200': '#4D6481', + 'primary-300': '#6381A6', + 'primary-400': '#7FA5D5', + 'primary-500': '#8CB5EA', + 'primary-600': '#A3C4EE', + 'primary-700': '#C3D8F4', + 'primary-800': '#DDE9F8', + 'primary-900': '#F4F8FD', + 'success-100': '#EEF8D7', + 'success-200': '#D9F1B2', + 'success-300': '#BDE985', + 'success-400': '#A0E25D', + 'success-500': '#76D628', + 'success-600': '#5BB520', + 'success-700': '#43941A', + 'success-800': '#307414', + 'success-900': '#225D10', + 'warning-100': '#F7F3D5', + 'warning-200': '#F0E5AA', + 'warning-300': '#E8D680', + 'warning-400': '#E3C95F', + 'warning-500': '#D9B32B', + 'warning-600': '#BD9721', + 'warning-700': '#9D7B1C', + 'warning-800': '#7E6016', + 'warning-900': '#684D12', + 'danger-100': '#F8D0D0', + 'danger-200': '#F09898', + 'danger-300': '#F09898', + 'danger-400': '#ED8585', + 'danger-500': '#E96666', + 'danger-600': '#DD6666', + 'danger-700': '#C36666', + 'danger-800': '#AE6666', + 'danger-900': '#9D6666', +}; diff --git a/packages/tokens/src/bin/ThemeColors/default.ts b/packages/tokens/src/bin/ThemeColors/default.ts new file mode 100644 index 0000000..2281a59 --- /dev/null +++ b/packages/tokens/src/bin/ThemeColors/default.ts @@ -0,0 +1,51 @@ +/** + * /!\ Please do not edit this file directly. Instead use the FigmaToCunningham.ts converter that generated this file. + */ +export const colors = { + 'greyscale-100': '#FAFAFB', + 'greyscale-200': '#F3F4F4', + 'greyscale-300': '#E7E8EA', + 'greyscale-400': '#C2C6CA', + 'greyscale-500': '#9EA3AA', + 'greyscale-600': '#79818A', + 'greyscale-700': '#555F6B', + 'greyscale-800': '#303C4B', + 'greyscale-900': '#0C1A2B', + 'greyscale-000': '#FFFFFF', + 'primary-100': '#EBF2FC', + 'primary-200': '#8CB5EA', + 'primary-300': '#5894E1', + 'primary-400': '#377FDB', + 'primary-500': '#055FD2', + 'primary-600': '#0556BF', + 'primary-700': '#044395', + 'primary-800': '#033474', + 'primary-900': '#022858', + 'success-100': '#EFFCD3', + 'success-200': '#DBFAA9', + 'success-300': '#BEF27C', + 'success-400': '#A0E659', + 'success-500': '#76D628', + 'success-600': '#5AB81D', + 'success-700': '#419A14', + 'success-800': '#2C7C0C', + 'success-900': '#1D6607', + 'warning-100': '#FFF8CD', + 'warning-200': '#FFEF9B', + 'warning-300': '#FFE469', + 'warning-400': '#FFDA43', + 'warning-500': '#FFC805', + 'warning-600': '#DBA603', + 'warning-700': '#B78702', + 'warning-800': '#936901', + 'warning-900': '#7A5400', + 'danger-100': '#F4B0B0', + 'danger-200': '#EE8A8A', + 'danger-300': '#E65454', + 'danger-400': '#E13333', + 'danger-500': '#DA0000', + 'danger-600': '#C60000', + 'danger-700': '#9B0000', + 'danger-800': '#780000', + 'danger-900': '#5C0000', +};