buildTokens.ts

  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`);