mirror of
https://github.com/movie-web/movie-web.git
synced 2024-12-24 18:51:53 +01:00
add figma token extraction script for themes
This commit is contained in:
parent
ac8a653dc0
commit
b42be00744
@ -22,6 +22,7 @@ module.exports = {
|
||||
"/*.js",
|
||||
"/*.ts",
|
||||
"/plugins/*.ts",
|
||||
"/plugins/*.mjs",
|
||||
"/themes/**/*.ts"
|
||||
],
|
||||
parser: "@typescript-eslint/parser",
|
||||
|
1
plugins/.gitignore
vendored
Normal file
1
plugins/.gitignore
vendored
Normal file
@ -0,0 +1 @@
|
||||
figmaTokens.json
|
43
plugins/figmaTokensToThemeTokens.mjs
Normal file
43
plugins/figmaTokensToThemeTokens.mjs
Normal 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));
|
Loading…
Reference in New Issue
Block a user