buildFigmaTokens.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
  8let themes = [
  9  dark, 
 10  light
 11];
 12
 13// Organize theme tokens
 14function themeTokens(theme: Theme) {
 15  return {
 16    meta: {
 17      themeName: theme.name,
 18    },
 19    text: theme.textColor,
 20    icon: theme.iconColor,
 21    background: theme.backgroundColor,
 22    border: theme.borderColor,
 23    editor: theme.editor,
 24    syntax: {
 25      primary: {
 26        value: theme.syntax.primary.color.value,
 27        type: "color",
 28      },
 29      comment: {
 30        value: theme.syntax.comment.color.value,
 31        type: "color",
 32      },
 33      keyword: {
 34        value: theme.syntax.keyword.color.value,
 35        type: "color",
 36      },
 37      function: {
 38        value: theme.syntax.function.color.value,
 39        type: "color",
 40      },
 41      type: {
 42        value: theme.syntax.type.color.value,
 43        type: "color",
 44      },
 45      variant: {
 46        value: theme.syntax.variant.color.value,
 47        type: "color",
 48      },
 49      property: {
 50        value: theme.syntax.property.color.value,
 51        type: "color",
 52      },
 53      enum: {
 54        value: theme.syntax.enum.color.value,
 55        type: "color",
 56      },
 57      operator: {
 58        value: theme.syntax.operator.color.value,
 59        type: "color",
 60      },
 61      string: {
 62        value: theme.syntax.string.color.value,
 63        type: "color",
 64      },
 65      number: {
 66        value: theme.syntax.number.color.value,
 67        type: "color",
 68      },
 69      boolean: {
 70        value: theme.syntax.boolean.color.value,
 71        type: "color",
 72      },
 73    },
 74    player: theme.player,
 75    shadowAlpha: theme.shadowAlpha,
 76  };
 77}
 78
 79// Organize core tokens
 80const coreTokens = {
 81  color: {
 82    ...colors,
 83  },
 84  text: {
 85    family: fontFamilies,
 86    weight: fontWeights,
 87  },
 88  size: fontSizes,
 89};
 90
 91const combinedTokens = {
 92  core: coreTokens,
 93  dark: themeTokens(dark),
 94  light: themeTokens(light)
 95}
 96
 97// Create core.json
 98const corePath = path.resolve(`${__dirname}/figma/core.json`);
 99const coreJSON = JSON.stringify(coreTokens, null, 2);
100fs.writeFileSync(corePath, coreJSON);
101console.log(`- Core: core.json created`);
102
103// Create {theme}.json
104const themePath = path.resolve(`${__dirname}/figma`);
105themes.forEach((theme) => {
106  const tokenJSON = JSON.stringify(themeTokens(theme), null, 2);
107  fs.writeFileSync(`${themePath}/${theme.name}.json`, tokenJSON);
108  console.log(`- Theme: ${theme.name}.json created`);
109});
110
111// Create combined tokens.json
112const combinedPath = path.resolve(`${__dirname}/figma/tokens.json`);
113const combinedJSON = JSON.stringify(combinedTokens, null, 2);
114fs.writeFileSync(combinedPath, combinedJSON);
115console.log(`- Combined: tokens.json created`);