buildTokens.ts

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