buildTokens.ts

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