💄 token-building script and output destinations

Just some organization here.
This commit is contained in:
Nathan Sobo
2022-04-06 09:26:51 -06:00
parent f29b8c795e
commit 36fede7522
9 changed files with 495 additions and 1917 deletions
+1 -1
View File
@@ -13,5 +13,5 @@ for (let theme of themes) {
`${__dirname}/../../crates/zed/assets/themes/${theme.name}.json`
);
fs.writeFileSync(outPath, styleTreeJSON);
console.log(`Generated ${outPath}`);
console.log(`- ${outPath} created`);
}
@@ -83,28 +83,28 @@ const coreTokens = {
size: fontSizes,
};
const combinedTokens: any = {
core: coreTokens,
}
const combinedTokens: any = {};
// Create core.json
const corePath = path.resolve(`${__dirname}/../dist/figma/core.json`);
const coreJSON = JSON.stringify(coreTokens, null, 2);
fs.writeFileSync(corePath, coreJSON);
console.log(`- Core: core.json created`);
const distPath = path.resolve(`${__dirname}/../dist`);
// Create {theme}.json
// Add core tokens to the combined tokens and write `core.json`.
// We write `core.json` as a separate file for the design team's convenience, but it isn't consumed by Figma Tokens directly.
const corePath = path.join(distPath, "core.json");
fs.writeFileSync(corePath, JSON.stringify(coreTokens, null, 2));
console.log(`- ${corePath} created`);
combinedTokens.core = coreTokens;
// Add each theme to the combined tokens and write ${theme}.json.
// We write `${theme}.json` as a separate file for the design team's convenience, but it isn't consumed by Figma Tokens directly.
let themes = [dark, light];
const themePath = path.resolve(`${__dirname}/figma`);
themes.forEach((theme) => {
const tokenJSON = JSON.stringify(themeTokens(theme), null, 2);
fs.writeFileSync(`${themePath}/${theme.name}.json`, tokenJSON);
console.log(`- Theme: ${theme.name}.json created`);
const themePath = `${distPath}/${theme.name}.json`
fs.writeFileSync(themePath, JSON.stringify(themeTokens(theme), null, 2));
console.log(`- ${themePath} created`);
combinedTokens[theme.name] = themeTokens(theme);
});
// Create combined tokens.json
const combinedPath = path.resolve(`${__dirname}/figma/tokens.json`);
const combinedJSON = JSON.stringify(combinedTokens, null, 2);
fs.writeFileSync(combinedPath, combinedJSON);
console.log(`- Combined: tokens.json created`);
// Write combined tokens to `tokens.json`. This file is consumed by the Figma Tokens plugin to keep our designs consistent with the app.
const combinedPath = path.resolve(`${distPath}/tokens.json`);
fs.writeFileSync(combinedPath, JSON.stringify(combinedTokens, null, 2));
console.log(`- ${combinedPath} created`);
File diff suppressed because it is too large Load Diff
-637
View File
@@ -1,637 +0,0 @@
{
"meta": {
"themeName": "dark"
},
"text": {
"primary": {
"value": "#f1f1f1",
"step": 50,
"type": "color"
},
"secondary": {
"value": "#9c9c9c",
"step": 350,
"type": "color"
},
"muted": {
"value": "#636363",
"step": 550,
"type": "color"
},
"placeholder": {
"value": "#2b2b2b",
"step": 750,
"type": "color"
},
"active": {
"value": "#ffffff",
"step": 0,
"type": "color"
},
"feature": {
"value": "#1096d3",
"step": 500,
"type": "color"
},
"ok": {
"value": "#1b9447",
"step": 600,
"type": "color"
},
"error": {
"value": "#f15656",
"step": 400,
"type": "color"
},
"warning": {
"value": "#f7bb57",
"step": 300,
"type": "color"
},
"info": {
"value": "#2472f2",
"step": 500,
"type": "color"
}
},
"icon": {
"primary": {
"value": "#c6c6c6",
"step": 200,
"type": "color"
},
"secondary": {
"value": "#9c9c9c",
"step": 350,
"type": "color"
},
"muted": {
"value": "#555555",
"step": 600,
"type": "color"
},
"placeholder": {
"value": "#393939",
"step": 700,
"type": "color"
},
"active": {
"value": "#ffffff",
"step": 0,
"type": "color"
},
"feature": {
"value": "#1096d3",
"step": 500,
"type": "color"
},
"ok": {
"value": "#1b9447",
"step": 600,
"type": "color"
},
"error": {
"value": "#eb2d2d",
"step": 500,
"type": "color"
},
"warning": {
"value": "#f6a724",
"step": 400,
"type": "color"
},
"info": {
"value": "#135acd",
"step": 600,
"type": "color"
}
},
"background": {
"100": {
"base": {
"value": "#2b2b2b",
"step": 750,
"type": "color"
},
"hovered": {
"value": "#323232",
"step": 725,
"type": "color"
},
"active": {
"value": "#393939",
"step": 700,
"type": "color"
},
"focused": {
"value": "#404040",
"step": 675,
"type": "color"
}
},
"300": {
"base": {
"value": "#1c1c1c",
"step": 800,
"type": "color"
},
"hovered": {
"value": "#232323",
"step": 775,
"type": "color"
},
"active": {
"value": "#2b2b2b",
"step": 750,
"type": "color"
},
"focused": {
"value": "#323232",
"step": 725,
"type": "color"
}
},
"500": {
"base": {
"value": "#000000",
"step": 900,
"type": "color"
},
"hovered": {
"value": "#070707",
"step": 875,
"type": "color"
},
"active": {
"value": "#0e0e0e",
"step": 850,
"type": "color"
},
"focused": {
"value": "#151515",
"step": 825,
"type": "color"
}
},
"ok": {
"base": {
"value": "#1b9447",
"step": 600,
"type": "color"
},
"hovered": {
"value": "#1b9447",
"step": 600,
"type": "color"
},
"active": {
"value": "#1b9447",
"step": 600,
"type": "color"
},
"focused": {
"value": "#1b9447",
"step": 600,
"type": "color"
}
},
"error": {
"base": {
"value": "#f15656",
"step": 400,
"type": "color"
},
"hovered": {
"value": "#f15656",
"step": 400,
"type": "color"
},
"active": {
"value": "#f15656",
"step": 400,
"type": "color"
},
"focused": {
"value": "#f15656",
"step": 400,
"type": "color"
}
},
"warning": {
"base": {
"value": "#f7bb57",
"step": 300,
"type": "color"
},
"hovered": {
"value": "#f7bb57",
"step": 300,
"type": "color"
},
"active": {
"value": "#f7bb57",
"step": 300,
"type": "color"
},
"focused": {
"value": "#f7bb57",
"step": 300,
"type": "color"
}
},
"info": {
"base": {
"value": "#2472f2",
"step": 500,
"type": "color"
},
"hovered": {
"value": "#2472f2",
"step": 500,
"type": "color"
},
"active": {
"value": "#2472f2",
"step": 500,
"type": "color"
},
"focused": {
"value": "#2472f2",
"step": 500,
"type": "color"
}
}
},
"border": {
"primary": {
"value": "#070707",
"step": 875,
"type": "color"
},
"secondary": {
"value": "#151515",
"step": 825,
"type": "color"
},
"muted": {
"value": "#232323",
"step": 775,
"type": "color"
},
"focused": {
"value": "#717171",
"step": 500,
"type": "color"
},
"active": {
"value": "#000000",
"step": 900,
"type": "color"
},
"ok": {
"value": "#20b456",
"step": 500,
"type": "color"
},
"error": {
"value": "#eb2d2d",
"step": 500,
"type": "color"
},
"warning": {
"value": "#de900c",
"step": 500,
"type": "color"
},
"info": {
"value": "#2472f2",
"step": 500,
"type": "color"
}
},
"editor": {
"background": {
"value": "#000000",
"step": 900,
"type": "color"
},
"indent_guide": {
"value": "#232323",
"step": 775,
"type": "color"
},
"indent_guide_active": {
"value": "#151515",
"step": 825,
"type": "color"
},
"line": {
"active": {
"value": "#0e0e0e",
"step": 850,
"type": "color"
},
"highlighted": {
"value": "#070707",
"step": 875,
"type": "color"
},
"inserted": {
"value": "#1b9447",
"step": 600,
"type": "color"
},
"deleted": {
"value": "#f15656",
"step": 400,
"type": "color"
},
"modified": {
"value": "#2472f2",
"step": 500,
"type": "color"
}
},
"highlight": {
"selection": {
"value": "#103063",
"step": 800,
"type": "color"
},
"occurrence": {
"value": "#2b2b2b",
"step": 750,
"type": "color"
},
"activeOccurrence": {
"value": "#393939",
"step": 700,
"type": "color"
},
"matchingBracket": {
"value": "#0e0e0e",
"step": 850,
"type": "color"
},
"match": {
"value": "#0a2633",
"step": 900,
"type": "color"
},
"activeMatch": {
"value": "#0e4158",
"step": 800,
"type": "color"
},
"related": {
"value": "#151515",
"step": 825,
"type": "color"
}
},
"gutter": {
"primary": {
"value": "#636363",
"step": 550,
"type": "color"
},
"active": {
"value": "#ffffff",
"step": 0,
"type": "color"
}
}
},
"syntax": {
"primary": {
"value": "#d5d5d5",
"type": "color"
},
"comment": {
"value": "#aaaaaa",
"type": "color"
},
"keyword": {
"value": "#4f8ff7",
"type": "color"
},
"function": {
"value": "#f9da82",
"type": "color"
},
"type": {
"value": "#3eeeda",
"type": "color"
},
"variant": {
"value": "#53c1f5",
"type": "color"
},
"property": {
"value": "#4f8ff7",
"type": "color"
},
"enum": {
"value": "#ee670a",
"type": "color"
},
"operator": {
"value": "#ee670a",
"type": "color"
},
"string": {
"value": "#f99d5f",
"type": "color"
},
"number": {
"value": "#aeef4b",
"type": "color"
},
"boolean": {
"value": "#aeef4b",
"type": "color"
}
},
"player": {
"1": {
"baseColor": {
"value": "#2472f2",
"step": 500,
"type": "color"
},
"cursorColor": {
"value": "#2472f2",
"step": 500,
"type": "color"
},
"selectionColor": {
"value": "#103063",
"step": 800,
"type": "color"
},
"borderColor": {
"value": "#103063",
"step": 800,
"type": "color"
}
},
"2": {
"baseColor": {
"value": "#79ba16",
"step": 500,
"type": "color"
},
"cursorColor": {
"value": "#79ba16",
"step": 500,
"type": "color"
},
"selectionColor": {
"value": "#38530f",
"step": 800,
"type": "color"
},
"borderColor": {
"value": "#79ba16",
"step": 500,
"type": "color"
}
},
"3": {
"baseColor": {
"value": "#484bed",
"step": 500,
"type": "color"
},
"cursorColor": {
"value": "#484bed",
"step": 500,
"type": "color"
},
"selectionColor": {
"value": "#121269",
"step": 800,
"type": "color"
},
"borderColor": {
"value": "#484bed",
"step": 500,
"type": "color"
}
},
"4": {
"baseColor": {
"value": "#ee670a",
"step": 500,
"type": "color"
},
"cursorColor": {
"value": "#ee670a",
"step": 500,
"type": "color"
},
"selectionColor": {
"value": "#5d2f0e",
"step": 800,
"type": "color"
},
"borderColor": {
"value": "#ee670a",
"step": 500,
"type": "color"
}
},
"5": {
"baseColor": {
"value": "#993bf3",
"step": 500,
"type": "color"
},
"cursorColor": {
"value": "#993bf3",
"step": 500,
"type": "color"
},
"selectionColor": {
"value": "#3e1169",
"step": 800,
"type": "color"
},
"borderColor": {
"value": "#993bf3",
"step": 500,
"type": "color"
}
},
"6": {
"baseColor": {
"value": "#16d6c1",
"step": 400,
"type": "color"
},
"cursorColor": {
"value": "#16d6c1",
"step": 400,
"type": "color"
},
"selectionColor": {
"value": "#0e4f48",
"step": 800,
"type": "color"
},
"borderColor": {
"value": "#16d6c1",
"step": 400,
"type": "color"
}
},
"7": {
"baseColor": {
"value": "#ef59a3",
"step": 400,
"type": "color"
},
"cursorColor": {
"value": "#ef59a3",
"step": 400,
"type": "color"
},
"selectionColor": {
"value": "#fbc6e1",
"step": 100,
"type": "color"
},
"borderColor": {
"value": "#ef59a3",
"step": 400,
"type": "color"
}
},
"8": {
"baseColor": {
"value": "#f7bf17",
"step": 400,
"type": "color"
},
"cursorColor": {
"value": "#f7bf17",
"step": 400,
"type": "color"
},
"selectionColor": {
"value": "#fce9b7",
"step": 100,
"type": "color"
},
"borderColor": {
"value": "#f7bf17",
"step": 400,
"type": "color"
}
}
},
"shadowAlpha": {
"value": 0.32,
"type": "number"
}
}
-637
View File
@@ -1,637 +0,0 @@
{
"meta": {
"themeName": "light"
},
"text": {
"primary": {
"value": "#2b2b2b",
"step": 750,
"type": "color"
},
"secondary": {
"value": "#555555",
"step": 600,
"type": "color"
},
"muted": {
"value": "#808080",
"step": 450,
"type": "color"
},
"placeholder": {
"value": "#aaaaaa",
"step": 300,
"type": "color"
},
"active": {
"value": "#000000",
"step": 900,
"type": "color"
},
"feature": {
"value": "#2472f2",
"step": 500,
"type": "color"
},
"ok": {
"value": "#20b456",
"step": 500,
"type": "color"
},
"error": {
"value": "#eb2d2d",
"step": 500,
"type": "color"
},
"warning": {
"value": "#d3a20b",
"step": 500,
"type": "color"
},
"info": {
"value": "#2472f2",
"step": 500,
"type": "color"
}
},
"icon": {
"primary": {
"value": "#aaaaaa",
"step": 300,
"type": "color"
},
"secondary": {
"value": "#717171",
"step": 500,
"type": "color"
},
"muted": {
"value": "#555555",
"step": 600,
"type": "color"
},
"placeholder": {
"value": "#393939",
"step": 700,
"type": "color"
},
"active": {
"value": "#000000",
"step": 900,
"type": "color"
},
"feature": {
"value": "#1179a8",
"step": 600,
"type": "color"
},
"ok": {
"value": "#1b9447",
"step": 600,
"type": "color"
},
"error": {
"value": "#c91818",
"step": 600,
"type": "color"
},
"warning": {
"value": "#f7bf17",
"step": 400,
"type": "color"
},
"info": {
"value": "#135acd",
"step": 600,
"type": "color"
}
},
"background": {
"100": {
"base": {
"value": "#e3e3e3",
"step": 100,
"type": "color"
},
"hovered": {
"value": "#d5d5d5",
"step": 150,
"type": "color"
},
"active": {
"value": "#c6c6c6",
"step": 200,
"type": "color"
},
"focused": {
"value": "#d5d5d5",
"step": 150,
"type": "color"
}
},
"300": {
"base": {
"value": "#f1f1f1",
"step": 50,
"type": "color"
},
"hovered": {
"value": "#e3e3e3",
"step": 100,
"type": "color"
},
"active": {
"value": "#d5d5d5",
"step": 150,
"type": "color"
},
"focused": {
"value": "#e3e3e3",
"step": 100,
"type": "color"
}
},
"500": {
"base": {
"value": "#ffffff",
"step": 0,
"type": "color"
},
"hovered": {
"value": "#f8f8f8",
"step": 25,
"type": "color"
},
"active": {
"value": "#f1f1f1",
"step": 50,
"type": "color"
},
"focused": {
"value": "#eaeaea",
"step": 75,
"type": "color"
}
},
"ok": {
"base": {
"value": "#b7f9ce",
"step": 100,
"type": "color"
},
"hovered": {
"value": "#b7f9ce",
"step": 100,
"type": "color"
},
"active": {
"value": "#b7f9ce",
"step": 100,
"type": "color"
},
"focused": {
"value": "#b7f9ce",
"step": 100,
"type": "color"
}
},
"error": {
"base": {
"value": "#fcc6c6",
"step": 100,
"type": "color"
},
"hovered": {
"value": "#fcc6c6",
"step": 100,
"type": "color"
},
"active": {
"value": "#fcc6c6",
"step": 100,
"type": "color"
},
"focused": {
"value": "#fcc6c6",
"step": 100,
"type": "color"
}
},
"warning": {
"base": {
"value": "#fce9b7",
"step": 100,
"type": "color"
},
"hovered": {
"value": "#fce9b7",
"step": 100,
"type": "color"
},
"active": {
"value": "#fce9b7",
"step": 100,
"type": "color"
},
"focused": {
"value": "#fce9b7",
"step": 100,
"type": "color"
}
},
"info": {
"base": {
"value": "#c5dafc",
"step": 100,
"type": "color"
},
"hovered": {
"value": "#c5dafc",
"step": 100,
"type": "color"
},
"active": {
"value": "#c5dafc",
"step": 100,
"type": "color"
},
"focused": {
"value": "#c5dafc",
"step": 100,
"type": "color"
}
}
},
"border": {
"primary": {
"value": "#c6c6c6",
"step": 200,
"type": "color"
},
"secondary": {
"value": "#e3e3e3",
"step": 100,
"type": "color"
},
"muted": {
"value": "#f1f1f1",
"step": 50,
"type": "color"
},
"focused": {
"value": "#e3e3e3",
"step": 100,
"type": "color"
},
"active": {
"value": "#b8b8b8",
"step": 250,
"type": "color"
},
"ok": {
"value": "#84f2ab",
"step": 200,
"type": "color"
},
"error": {
"value": "#f9a0a0",
"step": 200,
"type": "color"
},
"warning": {
"value": "#f9da82",
"step": 200,
"type": "color"
},
"info": {
"value": "#9ec1fa",
"step": 200,
"type": "color"
}
},
"editor": {
"background": {
"value": "#ffffff",
"step": 0,
"type": "color"
},
"indent_guide": {
"value": "#f1f1f1",
"step": 50,
"type": "color"
},
"indent_guide_active": {
"value": "#e3e3e3",
"step": 100,
"type": "color"
},
"line": {
"active": {
"value": "#f1f1f1",
"step": 50,
"type": "color"
},
"highlighted": {
"value": "#f1f1f1",
"step": 50,
"type": "color"
},
"inserted": {
"value": "#b7f9ce",
"step": 100,
"type": "color"
},
"deleted": {
"value": "#fcc6c6",
"step": 100,
"type": "color"
},
"modified": {
"value": "#c5dafc",
"step": 100,
"type": "color"
}
},
"highlight": {
"selection": {
"value": "#c5dafc",
"step": 100,
"type": "color"
},
"occurrence": {
"value": "#f1f1f1",
"step": 50,
"type": "color"
},
"activeOccurrence": {
"value": "#ffffff",
"step": 0,
"type": "color"
},
"matchingBracket": {
"value": "#ffffff",
"step": 0,
"type": "color"
},
"match": {
"value": "#ffffff",
"step": 0,
"type": "color"
},
"activeMatch": {
"value": "#ffffff",
"step": 0,
"type": "color"
},
"related": {
"value": "#ffffff",
"step": 0,
"type": "color"
}
},
"gutter": {
"primary": {
"value": "#aaaaaa",
"step": 300,
"type": "color"
},
"active": {
"value": "#000000",
"step": 900,
"type": "color"
}
}
},
"syntax": {
"primary": {
"value": "#2b2b2b",
"type": "color"
},
"comment": {
"value": "#555555",
"type": "color"
},
"keyword": {
"value": "#103063",
"type": "color"
},
"function": {
"value": "#1b9447",
"type": "color"
},
"type": {
"value": "#138a7d",
"type": "color"
},
"variant": {
"value": "#1179a8",
"type": "color"
},
"property": {
"value": "#134697",
"type": "color"
},
"enum": {
"value": "#bb550e",
"type": "color"
},
"operator": {
"value": "#bb550e",
"type": "color"
},
"string": {
"value": "#bb550e",
"type": "color"
},
"number": {
"value": "#14a898",
"type": "color"
},
"boolean": {
"value": "#b0740f",
"type": "color"
}
},
"player": {
"1": {
"baseColor": {
"value": "#135acd",
"step": 600,
"type": "color"
},
"cursorColor": {
"value": "#2472f2",
"step": 500,
"type": "color"
},
"selectionColor": {
"value": "#c5dafc",
"step": 100,
"type": "color"
},
"borderColor": {
"value": "#2472f2",
"step": 500,
"type": "color"
}
},
"2": {
"baseColor": {
"value": "#79ba16",
"step": 500,
"type": "color"
},
"cursorColor": {
"value": "#79ba16",
"step": 500,
"type": "color"
},
"selectionColor": {
"value": "#dffab5",
"step": 100,
"type": "color"
},
"borderColor": {
"value": "#79ba16",
"step": 500,
"type": "color"
}
},
"3": {
"baseColor": {
"value": "#484bed",
"step": 500,
"type": "color"
},
"cursorColor": {
"value": "#484bed",
"step": 500,
"type": "color"
},
"selectionColor": {
"value": "#cdcdfc",
"step": 100,
"type": "color"
},
"borderColor": {
"value": "#484bed",
"step": 500,
"type": "color"
}
},
"4": {
"baseColor": {
"value": "#ee670a",
"step": 500,
"type": "color"
},
"cursorColor": {
"value": "#ee670a",
"step": 500,
"type": "color"
},
"selectionColor": {
"value": "#fcd6bd",
"step": 100,
"type": "color"
},
"borderColor": {
"value": "#ee670a",
"step": 500,
"type": "color"
}
},
"5": {
"baseColor": {
"value": "#993bf3",
"step": 500,
"type": "color"
},
"cursorColor": {
"value": "#993bf3",
"step": 500,
"type": "color"
},
"selectionColor": {
"value": "#e4cbfc",
"step": 100,
"type": "color"
},
"borderColor": {
"value": "#993bf3",
"step": 500,
"type": "color"
}
},
"6": {
"baseColor": {
"value": "#16d6c1",
"step": 400,
"type": "color"
},
"cursorColor": {
"value": "#16d6c1",
"step": 400,
"type": "color"
},
"selectionColor": {
"value": "#b1faf2",
"step": 100,
"type": "color"
},
"borderColor": {
"value": "#16d6c1",
"step": 400,
"type": "color"
}
},
"7": {
"baseColor": {
"value": "#ef59a3",
"step": 400,
"type": "color"
},
"cursorColor": {
"value": "#ef59a3",
"step": 400,
"type": "color"
},
"selectionColor": {
"value": "#fbc6e1",
"step": 100,
"type": "color"
},
"borderColor": {
"value": "#ef59a3",
"step": 400,
"type": "color"
}
},
"8": {
"baseColor": {
"value": "#f7bf17",
"step": 400,
"type": "color"
},
"cursorColor": {
"value": "#f7bf17",
"step": 400,
"type": "color"
},
"selectionColor": {
"value": "#fce9b7",
"step": 100,
"type": "color"
},
"borderColor": {
"value": "#f7bf17",
"step": 400,
"type": "color"
}
}
},
"shadowAlpha": {
"value": 0.12,
"type": "number"
}
}
File diff suppressed because it is too large Load Diff