studio/cunningham
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🔨(tokens) add Figma to Cunningham script

Browse Source 
This script converts Figma's Tokens Studio JSON exports to Cunningham
compatible format. This is just intended to be used by core devs.
This commit is contained in:
Nathan Vasse
2023-09-26 11:30:38 +02:00
committed by NathanVss
parent 7db5bb798c
commit f232ae1e44
5 changed files with 139 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/tokens/.eslintignore
View File

@@ -1,4 +1,5 @@
node_modules
dist
src/bin/tests/assets
src/lib/cunningham-tokens.ts
src/lib/cunningham-tokens.ts
src/bin/ThemeColors

33
packages/tokens/FigmaToCunningham.ts Normal file
View File

@@ -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);

3
packages/tokens/package.json
View File

@@ -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",

51
packages/tokens/src/bin/ThemeColors/dark.ts Normal file
View File

@@ -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',
};

51
packages/tokens/src/bin/ThemeColors/default.ts Normal file
View File

@@ -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',
};