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