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