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