1import * as fs from "fs";
2import * as path from "path";
3import dark from "./themes/dark";
4import light from "./themes/light";
5import { light as solarizedLight, dark as solarizedDark } from "./themes/solarized";
6import Theme from "./themes/theme";
7import { colors, fontFamilies, fontSizes, fontWeights, sizes } from "./tokens";
8
9// Organize theme tokens
10function themeTokens(theme: Theme) {
11 return {
12 meta: {
13 themeName: theme.name,
14 },
15 text: theme.textColor,
16 icon: theme.iconColor,
17 background: theme.backgroundColor,
18 border: theme.borderColor,
19 editor: theme.editor,
20 syntax: {
21 primary: theme.syntax.primary.color,
22 comment: theme.syntax.comment.color,
23 keyword: theme.syntax.keyword.color,
24 function: theme.syntax.function.color,
25 type: theme.syntax.type.color,
26 variant: theme.syntax.variant.color,
27 property: theme.syntax.property.color,
28 enum: theme.syntax.enum.color,
29 operator: theme.syntax.operator.color,
30 string: theme.syntax.string.color,
31 number: theme.syntax.number.color,
32 boolean: theme.syntax.boolean.color,
33 },
34 player: theme.player,
35 shadowAlpha: theme.shadowAlpha,
36 };
37}
38
39// Organize core tokens
40const coreTokens = {
41 color: colors,
42 text: {
43 family: fontFamilies,
44 weight: fontWeights,
45 },
46 size: sizes,
47 fontSize: fontSizes,
48};
49
50const combinedTokens: any = {};
51
52const distPath = path.resolve(`${__dirname}/../dist`);
53
54// Add core tokens to the combined tokens and write `core.json`.
55// We write `core.json` as a separate file for the design team's convenience, but it isn't consumed by Figma Tokens directly.
56const corePath = path.join(distPath, "core.json");
57fs.writeFileSync(corePath, JSON.stringify(coreTokens, null, 2));
58console.log(`- ${corePath} created`);
59combinedTokens.core = coreTokens;
60
61// Add each theme to the combined tokens and write ${theme}.json.
62// We write `${theme}.json` as a separate file for the design team's convenience, but it isn't consumed by Figma Tokens directly.
63let themes = [dark, light, solarizedDark, solarizedLight];
64themes.forEach((theme) => {
65 const themePath = `${distPath}/${theme.name}.json`
66 fs.writeFileSync(themePath, JSON.stringify(themeTokens(theme), null, 2));
67 console.log(`- ${themePath} created`);
68 combinedTokens[theme.name] = themeTokens(theme);
69});
70
71// Write combined tokens to `tokens.json`. This file is consumed by the Figma Tokens plugin to keep our designs consistent with the app.
72const combinedPath = path.resolve(`${distPath}/tokens.json`);
73fs.writeFileSync(combinedPath, JSON.stringify(combinedTokens, null, 2));
74console.log(`- ${combinedPath} created`);