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
 8// Organize theme tokens
 9function themeTokens(theme: Theme): Object {
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
74let themes = [themeTokens(dark), themeTokens(light)];
75
76// Create {theme}.json
77const themePath = path.resolve(`${__dirname}/figma`);
78themes.forEach((theme) => {
79  const tokenJSON = JSON.stringify(theme, null, 2);
80  //@ts-ignore //TODO: IDK what the hell TS wants me to do here
81  fs.writeFileSync(`${themePath}/${theme.meta.themeName}.json`, tokenJSON);
82});
83
84// Organize core tokens
85const coreTokens = {
86  color: {
87    ...colors,
88  },
89  text: {
90    family: fontFamilies,
91    weight: fontWeights,
92  },
93  size: fontSizes,
94};
95
96// Create core.json
97const corePath = path.resolve(`${__dirname}/figma/core.json`);
98const coreTokenJSON = JSON.stringify(coreTokens, null, 2);
99fs.writeFileSync(corePath, coreTokenJSON);