add figma token extraction script for themes

This commit is contained in:
mrjvs 2023-12-09 17:29:58 +01:00
parent ac8a653dc0
commit b42be00744
3 changed files with 45 additions and 0 deletions

View File

@ -22,6 +22,7 @@ module.exports = {
"/*.js",
"/*.ts",
"/plugins/*.ts",
"/plugins/*.mjs",
"/themes/**/*.ts"
],
parser: "@typescript-eslint/parser",

1
plugins/.gitignore vendored Normal file
View File

@ -0,0 +1 @@
figmaTokens.json

View File

@ -0,0 +1,43 @@
/**
* This script turns output from the figma plugin "style to JSON" into a usuable theme.
* It expects a format of "themes/{NAME}/anythinghere"
*/
import fs from "fs";
const fileLocation = "./figmaTokens.json";
const theme = "blue";
const fileContents = fs.readFileSync(fileLocation, {
encoding: "utf-8"
});
const tokens = JSON.parse(fileContents);
const themeTokens = tokens.themes[theme];
const output = {};
function setKey(obj, key, defaultVal) {
const realKey = key.match(/^\d+$/g) ? "c" + key : key;
if (obj[key]) return obj[key];
obj[realKey] = defaultVal;
return obj[realKey];
}
function handleToken(token, path) {
if (typeof token.name === "string" && typeof token.description === "string") {
let ref = output;
const lastKey = path.pop();
path.forEach((v) => {
ref = setKey(ref, v, {});
});
setKey(ref, lastKey, token.hex);
return;
}
for (let key in token) {
handleToken(token[key], [...path, key]);
}
}
handleToken(themeTokens, []);
console.log(JSON.stringify(output, null, 2));