Add basic support for exporting tokens to Figma Tokens. (#724)

Nate Butler created

* WIP on figma token export

* WIP Working export

* Tidy up the figma tokens script

* Correctly format theme json structure for Figma Tokens

* Finish up themeTokens imports

Change summary

styles/buildFigmaTokens.ts |   99 +++
styles/figma/core.json     | 1155 ++++++++++++++++++++++++++++++++++++++++
styles/figma/dark.json     |  637 ++++++++++++++++++++++
styles/figma/light.json    |  637 ++++++++++++++++++++++
4 files changed, 2,528 insertions(+)

Detailed changes

styles/buildFigmaTokens.ts 🔗

@@ -0,0 +1,99 @@
+import * as fs from "fs";
+import * as path from "path";
+import dark from "./themes/dark";
+import light from "./themes/light";
+import Theme from "./themes/theme";
+import { colors, fontFamilies, fontSizes, fontWeights } from "./tokens";
+
+// Organize theme tokens
+function themeTokens(theme: Theme): Object {
+  return {
+    meta: {
+      themeName: theme.name,
+    },
+    text: theme.textColor,
+    icon: theme.iconColor,
+    background: theme.backgroundColor,
+    border: theme.borderColor,
+    editor: theme.editor,
+    syntax: {
+      primary: {
+        value: theme.syntax.primary.color.value,
+        type: "color",
+      },
+      comment: {
+        value: theme.syntax.comment.color.value,
+        type: "color",
+      },
+      keyword: {
+        value: theme.syntax.keyword.color.value,
+        type: "color",
+      },
+      function: {
+        value: theme.syntax.function.color.value,
+        type: "color",
+      },
+      type: {
+        value: theme.syntax.type.color.value,
+        type: "color",
+      },
+      variant: {
+        value: theme.syntax.variant.color.value,
+        type: "color",
+      },
+      property: {
+        value: theme.syntax.property.color.value,
+        type: "color",
+      },
+      enum: {
+        value: theme.syntax.enum.color.value,
+        type: "color",
+      },
+      operator: {
+        value: theme.syntax.operator.color.value,
+        type: "color",
+      },
+      string: {
+        value: theme.syntax.string.color.value,
+        type: "color",
+      },
+      number: {
+        value: theme.syntax.number.color.value,
+        type: "color",
+      },
+      boolean: {
+        value: theme.syntax.boolean.color.value,
+        type: "color",
+      },
+    },
+    player: theme.player,
+    shadowAlpha: theme.shadowAlpha,
+  };
+}
+
+let themes = [themeTokens(dark), themeTokens(light)];
+
+// Create {theme}.json
+const themePath = path.resolve(`${__dirname}/figma`);
+themes.forEach((theme) => {
+  const tokenJSON = JSON.stringify(theme, null, 2);
+  //@ts-ignore //TODO: IDK what the hell TS wants me to do here
+  fs.writeFileSync(`${themePath}/${theme.meta.themeName}.json`, tokenJSON);
+});
+
+// Organize core tokens
+const coreTokens = {
+  color: {
+    ...colors,
+  },
+  text: {
+    family: fontFamilies,
+    weight: fontWeights,
+  },
+  size: fontSizes,
+};
+
+// Create core.json
+const corePath = path.resolve(`${__dirname}/figma/core.json`);
+const coreTokenJSON = JSON.stringify(coreTokens, null, 2);
+fs.writeFileSync(corePath, coreTokenJSON);

styles/figma/core.json 🔗

@@ -0,0 +1,1155 @@
+{
+  "color": {
+    "neutral": {
+      "0": {
+        "value": "#ffffff",
+        "step": 0,
+        "type": "color"
+      },
+      "25": {
+        "value": "#f8f8f8",
+        "step": 25,
+        "type": "color"
+      },
+      "50": {
+        "value": "#f1f1f1",
+        "step": 50,
+        "type": "color"
+      },
+      "75": {
+        "value": "#eaeaea",
+        "step": 75,
+        "type": "color"
+      },
+      "100": {
+        "value": "#e3e3e3",
+        "step": 100,
+        "type": "color"
+      },
+      "125": {
+        "value": "#dcdcdc",
+        "step": 125,
+        "type": "color"
+      },
+      "150": {
+        "value": "#d5d5d5",
+        "step": 150,
+        "type": "color"
+      },
+      "175": {
+        "value": "#cdcdcd",
+        "step": 175,
+        "type": "color"
+      },
+      "200": {
+        "value": "#c6c6c6",
+        "step": 200,
+        "type": "color"
+      },
+      "225": {
+        "value": "#bfbfbf",
+        "step": 225,
+        "type": "color"
+      },
+      "250": {
+        "value": "#b8b8b8",
+        "step": 250,
+        "type": "color"
+      },
+      "275": {
+        "value": "#b1b1b1",
+        "step": 275,
+        "type": "color"
+      },
+      "300": {
+        "value": "#aaaaaa",
+        "step": 300,
+        "type": "color"
+      },
+      "325": {
+        "value": "#a3a3a3",
+        "step": 325,
+        "type": "color"
+      },
+      "350": {
+        "value": "#9c9c9c",
+        "step": 350,
+        "type": "color"
+      },
+      "375": {
+        "value": "#959595",
+        "step": 375,
+        "type": "color"
+      },
+      "400": {
+        "value": "#8e8e8e",
+        "step": 400,
+        "type": "color"
+      },
+      "425": {
+        "value": "#878787",
+        "step": 425,
+        "type": "color"
+      },
+      "450": {
+        "value": "#808080",
+        "step": 450,
+        "type": "color"
+      },
+      "475": {
+        "value": "#787878",
+        "step": 475,
+        "type": "color"
+      },
+      "500": {
+        "value": "#717171",
+        "step": 500,
+        "type": "color"
+      },
+      "525": {
+        "value": "#6a6a6a",
+        "step": 525,
+        "type": "color"
+      },
+      "550": {
+        "value": "#636363",
+        "step": 550,
+        "type": "color"
+      },
+      "575": {
+        "value": "#5c5c5c",
+        "step": 575,
+        "type": "color"
+      },
+      "600": {
+        "value": "#555555",
+        "step": 600,
+        "type": "color"
+      },
+      "625": {
+        "value": "#4e4e4e",
+        "step": 625,
+        "type": "color"
+      },
+      "650": {
+        "value": "#474747",
+        "step": 650,
+        "type": "color"
+      },
+      "675": {
+        "value": "#404040",
+        "step": 675,
+        "type": "color"
+      },
+      "700": {
+        "value": "#393939",
+        "step": 700,
+        "type": "color"
+      },
+      "725": {
+        "value": "#323232",
+        "step": 725,
+        "type": "color"
+      },
+      "750": {
+        "value": "#2b2b2b",
+        "step": 750,
+        "type": "color"
+      },
+      "775": {
+        "value": "#232323",
+        "step": 775,
+        "type": "color"
+      },
+      "800": {
+        "value": "#1c1c1c",
+        "step": 800,
+        "type": "color"
+      },
+      "825": {
+        "value": "#151515",
+        "step": 825,
+        "type": "color"
+      },
+      "850": {
+        "value": "#0e0e0e",
+        "step": 850,
+        "type": "color"
+      },
+      "875": {
+        "value": "#070707",
+        "step": 875,
+        "type": "color"
+      },
+      "900": {
+        "value": "#000000",
+        "step": 900,
+        "type": "color"
+      }
+    },
+    "rose": {
+      "0": {
+        "value": "#feecef",
+        "step": 0,
+        "type": "color"
+      },
+      "100": {
+        "value": "#f13455",
+        "step": 100,
+        "type": "color"
+      },
+      "200": {
+        "value": "#eb2245",
+        "step": 200,
+        "type": "color"
+      },
+      "300": {
+        "value": "#e7183b",
+        "step": 300,
+        "type": "color"
+      },
+      "400": {
+        "value": "#da193a",
+        "step": 400,
+        "type": "color"
+      },
+      "500": {
+        "value": "#d01939",
+        "step": 500,
+        "type": "color"
+      },
+      "600": {
+        "value": "#c81a37",
+        "step": 600,
+        "type": "color"
+      },
+      "700": {
+        "value": "#c01a36",
+        "step": 700,
+        "type": "color"
+      },
+      "800": {
+        "value": "#ba1a36",
+        "step": 800,
+        "type": "color"
+      },
+      "900": {
+        "value": "#b41a35",
+        "step": 900,
+        "type": "color"
+      }
+    },
+    "red": {
+      "0": {
+        "value": "#feecec",
+        "step": 0,
+        "type": "color"
+      },
+      "100": {
+        "value": "#ec3939",
+        "step": 100,
+        "type": "color"
+      },
+      "200": {
+        "value": "#e72727",
+        "step": 200,
+        "type": "color"
+      },
+      "300": {
+        "value": "#e31c1c",
+        "step": 300,
+        "type": "color"
+      },
+      "400": {
+        "value": "#d71c1c",
+        "step": 400,
+        "type": "color"
+      },
+      "500": {
+        "value": "#cd1c1c",
+        "step": 500,
+        "type": "color"
+      },
+      "600": {
+        "value": "#c51c1c",
+        "step": 600,
+        "type": "color"
+      },
+      "700": {
+        "value": "#be1c1c",
+        "step": 700,
+        "type": "color"
+      },
+      "800": {
+        "value": "#b81c1c",
+        "step": 800,
+        "type": "color"
+      },
+      "900": {
+        "value": "#b21c1c",
+        "step": 900,
+        "type": "color"
+      }
+    },
+    "orange": {
+      "0": {
+        "value": "#fef3ec",
+        "step": 0,
+        "type": "color"
+      },
+      "100": {
+        "value": "#f66e0f",
+        "step": 100,
+        "type": "color"
+      },
+      "200": {
+        "value": "#e5660f",
+        "step": 200,
+        "type": "color"
+      },
+      "300": {
+        "value": "#d66211",
+        "step": 300,
+        "type": "color"
+      },
+      "400": {
+        "value": "#cc5f13",
+        "step": 400,
+        "type": "color"
+      },
+      "500": {
+        "value": "#c45c14",
+        "step": 500,
+        "type": "color"
+      },
+      "600": {
+        "value": "#bc5a15",
+        "step": 600,
+        "type": "color"
+      },
+      "700": {
+        "value": "#b65816",
+        "step": 700,
+        "type": "color"
+      },
+      "800": {
+        "value": "#b15617",
+        "step": 800,
+        "type": "color"
+      },
+      "900": {
+        "value": "#ac5517",
+        "step": 900,
+        "type": "color"
+      }
+    },
+    "amber": {
+      "0": {
+        "value": "#fef7ec",
+        "step": 0,
+        "type": "color"
+      },
+      "100": {
+        "value": "#eb980d",
+        "step": 100,
+        "type": "color"
+      },
+      "200": {
+        "value": "#d88e10",
+        "step": 200,
+        "type": "color"
+      },
+      "300": {
+        "value": "#cc8712",
+        "step": 300,
+        "type": "color"
+      },
+      "400": {
+        "value": "#c38214",
+        "step": 400,
+        "type": "color"
+      },
+      "500": {
+        "value": "#bb7e15",
+        "step": 500,
+        "type": "color"
+      },
+      "600": {
+        "value": "#b57a16",
+        "step": 600,
+        "type": "color"
+      },
+      "700": {
+        "value": "#b07717",
+        "step": 700,
+        "type": "color"
+      },
+      "800": {
+        "value": "#ab7517",
+        "step": 800,
+        "type": "color"
+      },
+      "900": {
+        "value": "#a77218",
+        "step": 900,
+        "type": "color"
+      }
+    },
+    "yellow": {
+      "0": {
+        "value": "#fef9ec",
+        "step": 0,
+        "type": "color"
+      },
+      "100": {
+        "value": "#e0ac0b",
+        "step": 100,
+        "type": "color"
+      },
+      "200": {
+        "value": "#cfa00f",
+        "step": 200,
+        "type": "color"
+      },
+      "300": {
+        "value": "#c49811",
+        "step": 300,
+        "type": "color"
+      },
+      "400": {
+        "value": "#bc9212",
+        "step": 400,
+        "type": "color"
+      },
+      "500": {
+        "value": "#b68e14",
+        "step": 500,
+        "type": "color"
+      },
+      "600": {
+        "value": "#b08a15",
+        "step": 600,
+        "type": "color"
+      },
+      "700": {
+        "value": "#ac8615",
+        "step": 700,
+        "type": "color"
+      },
+      "800": {
+        "value": "#a88316",
+        "step": 800,
+        "type": "color"
+      },
+      "900": {
+        "value": "#a48117",
+        "step": 900,
+        "type": "color"
+      }
+    },
+    "lime": {
+      "0": {
+        "value": "#f7feec",
+        "step": 0,
+        "type": "color"
+      },
+      "100": {
+        "value": "#80c517",
+        "step": 100,
+        "type": "color"
+      },
+      "200": {
+        "value": "#7aba18",
+        "step": 200,
+        "type": "color"
+      },
+      "300": {
+        "value": "#76b318",
+        "step": 300,
+        "type": "color"
+      },
+      "400": {
+        "value": "#72ad19",
+        "step": 400,
+        "type": "color"
+      },
+      "500": {
+        "value": "#70a919",
+        "step": 500,
+        "type": "color"
+      },
+      "600": {
+        "value": "#6ea519",
+        "step": 600,
+        "type": "color"
+      },
+      "700": {
+        "value": "#6ca219",
+        "step": 700,
+        "type": "color"
+      },
+      "800": {
+        "value": "#6a9f1a",
+        "step": 800,
+        "type": "color"
+      },
+      "900": {
+        "value": "#699c1a",
+        "step": 900,
+        "type": "color"
+      }
+    },
+    "green": {
+      "0": {
+        "value": "#ecfef2",
+        "step": 0,
+        "type": "color"
+      },
+      "100": {
+        "value": "#21bf5b",
+        "step": 100,
+        "type": "color"
+      },
+      "200": {
+        "value": "#20b557",
+        "step": 200,
+        "type": "color"
+      },
+      "300": {
+        "value": "#1faf54",
+        "step": 300,
+        "type": "color"
+      },
+      "400": {
+        "value": "#1faa52",
+        "step": 400,
+        "type": "color"
+      },
+      "500": {
+        "value": "#1ea650",
+        "step": 500,
+        "type": "color"
+      },
+      "600": {
+        "value": "#1ea34f",
+        "step": 600,
+        "type": "color"
+      },
+      "700": {
+        "value": "#1da04d",
+        "step": 700,
+        "type": "color"
+      },
+      "800": {
+        "value": "#1d9d4c",
+        "step": 800,
+        "type": "color"
+      },
+      "900": {
+        "value": "#1d9b4b",
+        "step": 900,
+        "type": "color"
+      }
+    },
+    "emerald": {
+      "0": {
+        "value": "#ecfef8",
+        "step": 0,
+        "type": "color"
+      },
+      "100": {
+        "value": "#11b47e",
+        "step": 100,
+        "type": "color"
+      },
+      "200": {
+        "value": "#13ac79",
+        "step": 200,
+        "type": "color"
+      },
+      "300": {
+        "value": "#14a776",
+        "step": 300,
+        "type": "color"
+      },
+      "400": {
+        "value": "#15a374",
+        "step": 400,
+        "type": "color"
+      },
+      "500": {
+        "value": "#16a072",
+        "step": 500,
+        "type": "color"
+      },
+      "600": {
+        "value": "#169d70",
+        "step": 600,
+        "type": "color"
+      },
+      "700": {
+        "value": "#179b6f",
+        "step": 700,
+        "type": "color"
+      },
+      "800": {
+        "value": "#17996e",
+        "step": 800,
+        "type": "color"
+      },
+      "900": {
+        "value": "#18976c",
+        "step": 900,
+        "type": "color"
+      }
+    },
+    "teal": {
+      "0": {
+        "value": "#ecfefc",
+        "step": 0,
+        "type": "color"
+      },
+      "100": {
+        "value": "#15b3a2",
+        "step": 100,
+        "type": "color"
+      },
+      "200": {
+        "value": "#16ab9b",
+        "step": 200,
+        "type": "color"
+      },
+      "300": {
+        "value": "#17a696",
+        "step": 300,
+        "type": "color"
+      },
+      "400": {
+        "value": "#17a293",
+        "step": 400,
+        "type": "color"
+      },
+      "500": {
+        "value": "#189f90",
+        "step": 500,
+        "type": "color"
+      },
+      "600": {
+        "value": "#189d8e",
+        "step": 600,
+        "type": "color"
+      },
+      "700": {
+        "value": "#189a8c",
+        "step": 700,
+        "type": "color"
+      },
+      "800": {
+        "value": "#19988a",
+        "step": 800,
+        "type": "color"
+      },
+      "900": {
+        "value": "#199788",
+        "step": 900,
+        "type": "color"
+      }
+    },
+    "cyan": {
+      "0": {
+        "value": "#ecfcfe",
+        "step": 0,
+        "type": "color"
+      },
+      "100": {
+        "value": "#09b5cc",
+        "step": 100,
+        "type": "color"
+      },
+      "200": {
+        "value": "#0daabf",
+        "step": 200,
+        "type": "color"
+      },
+      "300": {
+        "value": "#0fa3b7",
+        "step": 300,
+        "type": "color"
+      },
+      "400": {
+        "value": "#119eb1",
+        "step": 400,
+        "type": "color"
+      },
+      "500": {
+        "value": "#1299ac",
+        "step": 500,
+        "type": "color"
+      },
+      "600": {
+        "value": "#1396a8",
+        "step": 600,
+        "type": "color"
+      },
+      "700": {
+        "value": "#1493a4",
+        "step": 700,
+        "type": "color"
+      },
+      "800": {
+        "value": "#1590a1",
+        "step": 800,
+        "type": "color"
+      },
+      "900": {
+        "value": "#168e9e",
+        "step": 900,
+        "type": "color"
+      }
+    },
+    "sky": {
+      "0": {
+        "value": "#ecf8fe",
+        "step": 0,
+        "type": "color"
+      },
+      "100": {
+        "value": "#109fdf",
+        "step": 100,
+        "type": "color"
+      },
+      "200": {
+        "value": "#1394cf",
+        "step": 200,
+        "type": "color"
+      },
+      "300": {
+        "value": "#148dc4",
+        "step": 300,
+        "type": "color"
+      },
+      "400": {
+        "value": "#1588bc",
+        "step": 400,
+        "type": "color"
+      },
+      "500": {
+        "value": "#1684b6",
+        "step": 500,
+        "type": "color"
+      },
+      "600": {
+        "value": "#1780b0",
+        "step": 600,
+        "type": "color"
+      },
+      "700": {
+        "value": "#177dac",
+        "step": 700,
+        "type": "color"
+      },
+      "800": {
+        "value": "#187ba8",
+        "step": 800,
+        "type": "color"
+      },
+      "900": {
+        "value": "#1878a4",
+        "step": 900,
+        "type": "color"
+      }
+    },
+    "blue": {
+      "0": {
+        "value": "#ecf3fe",
+        "step": 0,
+        "type": "color"
+      },
+      "100": {
+        "value": "#307af3",
+        "step": 100,
+        "type": "color"
+      },
+      "200": {
+        "value": "#1f6eed",
+        "step": 200,
+        "type": "color"
+      },
+      "300": {
+        "value": "#1666e7",
+        "step": 300,
+        "type": "color"
+      },
+      "400": {
+        "value": "#1762db",
+        "step": 400,
+        "type": "color"
+      },
+      "500": {
+        "value": "#185fd0",
+        "step": 500,
+        "type": "color"
+      },
+      "600": {
+        "value": "#195cc8",
+        "step": 600,
+        "type": "color"
+      },
+      "700": {
+        "value": "#1959c0",
+        "step": 700,
+        "type": "color"
+      },
+      "800": {
+        "value": "#1957ba",
+        "step": 800,
+        "type": "color"
+      },
+      "900": {
+        "value": "#1a55b4",
+        "step": 900,
+        "type": "color"
+      }
+    },
+    "indigo": {
+      "0": {
+        "value": "#ececfe",
+        "step": 0,
+        "type": "color"
+      },
+      "100": {
+        "value": "#5558ee",
+        "step": 100,
+        "type": "color"
+      },
+      "200": {
+        "value": "#3d41e9",
+        "step": 200,
+        "type": "color"
+      },
+      "300": {
+        "value": "#2e32e5",
+        "step": 300,
+        "type": "color"
+      },
+      "400": {
+        "value": "#2327e2",
+        "step": 400,
+        "type": "color"
+      },
+      "500": {
+        "value": "#1e22db",
+        "step": 500,
+        "type": "color"
+      },
+      "600": {
+        "value": "#1e22d1",
+        "step": 600,
+        "type": "color"
+      },
+      "700": {
+        "value": "#1e21c9",
+        "step": 700,
+        "type": "color"
+      },
+      "800": {
+        "value": "#1e21c1",
+        "step": 800,
+        "type": "color"
+      },
+      "900": {
+        "value": "#1d20bb",
+        "step": 900,
+        "type": "color"
+      }
+    },
+    "violet": {
+      "0": {
+        "value": "#f1ecfe",
+        "step": 0,
+        "type": "color"
+      },
+      "100": {
+        "value": "#804ef3",
+        "step": 100,
+        "type": "color"
+      },
+      "200": {
+        "value": "#6e37ee",
+        "step": 200,
+        "type": "color"
+      },
+      "300": {
+        "value": "#6329e9",
+        "step": 300,
+        "type": "color"
+      },
+      "400": {
+        "value": "#5a1ee6",
+        "step": 400,
+        "type": "color"
+      },
+      "500": {
+        "value": "#551bde",
+        "step": 500,
+        "type": "color"
+      },
+      "600": {
+        "value": "#531bd4",
+        "step": 600,
+        "type": "color"
+      },
+      "700": {
+        "value": "#501bcb",
+        "step": 700,
+        "type": "color"
+      },
+      "800": {
+        "value": "#4e1bc3",
+        "step": 800,
+        "type": "color"
+      },
+      "900": {
+        "value": "#4c1bbc",
+        "step": 900,
+        "type": "color"
+      }
+    },
+    "purple": {
+      "0": {
+        "value": "#f5ecfe",
+        "step": 0,
+        "type": "color"
+      },
+      "100": {
+        "value": "#a048f4",
+        "step": 100,
+        "type": "color"
+      },
+      "200": {
+        "value": "#9332ee",
+        "step": 200,
+        "type": "color"
+      },
+      "300": {
+        "value": "#8a24ea",
+        "step": 300,
+        "type": "color"
+      },
+      "400": {
+        "value": "#831ae7",
+        "step": 400,
+        "type": "color"
+      },
+      "500": {
+        "value": "#7d19dc",
+        "step": 500,
+        "type": "color"
+      },
+      "600": {
+        "value": "#781ad2",
+        "step": 600,
+        "type": "color"
+      },
+      "700": {
+        "value": "#741ac9",
+        "step": 700,
+        "type": "color"
+      },
+      "800": {
+        "value": "#701bc2",
+        "step": 800,
+        "type": "color"
+      },
+      "900": {
+        "value": "#6d1bbb",
+        "step": 900,
+        "type": "color"
+      }
+    },
+    "fuschia": {
+      "0": {
+        "value": "#fdecfe",
+        "step": 0,
+        "type": "color"
+      },
+      "100": {
+        "value": "#d63be2",
+        "step": 100,
+        "type": "color"
+      },
+      "200": {
+        "value": "#d12ade",
+        "step": 200,
+        "type": "color"
+      },
+      "300": {
+        "value": "#ca23d6",
+        "step": 300,
+        "type": "color"
+      },
+      "400": {
+        "value": "#c122cc",
+        "step": 400,
+        "type": "color"
+      },
+      "500": {
+        "value": "#b921c4",
+        "step": 500,
+        "type": "color"
+      },
+      "600": {
+        "value": "#b320bd",
+        "step": 600,
+        "type": "color"
+      },
+      "700": {
+        "value": "#ad20b7",
+        "step": 700,
+        "type": "color"
+      },
+      "800": {
+        "value": "#a81fb2",
+        "step": 800,
+        "type": "color"
+      },
+      "900": {
+        "value": "#a41ead",
+        "step": 900,
+        "type": "color"
+      }
+    },
+    "pink": {
+      "0": {
+        "value": "#feecf5",
+        "step": 0,
+        "type": "color"
+      },
+      "100": {
+        "value": "#e93d92",
+        "step": 100,
+        "type": "color"
+      },
+      "200": {
+        "value": "#e42a87",
+        "step": 200,
+        "type": "color"
+      },
+      "300": {
+        "value": "#e11e7f",
+        "step": 300,
+        "type": "color"
+      },
+      "400": {
+        "value": "#d51e79",
+        "step": 400,
+        "type": "color"
+      },
+      "500": {
+        "value": "#cc1e75",
+        "step": 500,
+        "type": "color"
+      },
+      "600": {
+        "value": "#c41e71",
+        "step": 600,
+        "type": "color"
+      },
+      "700": {
+        "value": "#bd1d6d",
+        "step": 700,
+        "type": "color"
+      },
+      "800": {
+        "value": "#b71d6a",
+        "step": 800,
+        "type": "color"
+      },
+      "900": {
+        "value": "#b21d67",
+        "step": 900,
+        "type": "color"
+      }
+    }
+  },
+  "text": {
+    "family": {
+      "sans": {
+        "value": "Zed Sans",
+        "type": "fontFamily"
+      },
+      "mono": {
+        "value": "Zed Mono",
+        "type": "fontFamily"
+      }
+    },
+    "weight": {
+      "thin": {
+        "value": "thin",
+        "type": "fontWeight"
+      },
+      "extra_light": {
+        "value": "extra_light",
+        "type": "fontWeight"
+      },
+      "light": {
+        "value": "light",
+        "type": "fontWeight"
+      },
+      "normal": {
+        "value": "normal",
+        "type": "fontWeight"
+      },
+      "medium": {
+        "value": "medium",
+        "type": "fontWeight"
+      },
+      "semibold": {
+        "value": "semibold",
+        "type": "fontWeight"
+      },
+      "bold": {
+        "value": "bold",
+        "type": "fontWeight"
+      },
+      "extra_bold": {
+        "value": "extra_bold",
+        "type": "fontWeight"
+      },
+      "black": {
+        "value": "black",
+        "type": "fontWeight"
+      }
+    }
+  },
+  "size": {
+    "3xs": {
+      "value": 8,
+      "type": "fontSize"
+    },
+    "2xs": {
+      "value": 10,
+      "type": "fontSize"
+    },
+    "xs": {
+      "value": 12,
+      "type": "fontSize"
+    },
+    "sm": {
+      "value": 14,
+      "type": "fontSize"
+    },
+    "md": {
+      "value": 16,
+      "type": "fontSize"
+    },
+    "lg": {
+      "value": 18,
+      "type": "fontSize"
+    },
+    "xl": {
+      "value": 20,
+      "type": "fontSize"
+    }
+  }
+}

styles/figma/dark.json 🔗

@@ -0,0 +1,637 @@
+{
+  "meta": {
+    "themeName": "dark"
+  },
+  "text": {
+    "primary": {
+      "value": "#f1f1f1",
+      "step": 50,
+      "type": "color"
+    },
+    "secondary": {
+      "value": "#9c9c9c",
+      "step": 350,
+      "type": "color"
+    },
+    "muted": {
+      "value": "#636363",
+      "step": 550,
+      "type": "color"
+    },
+    "placeholder": {
+      "value": "#2b2b2b",
+      "step": 750,
+      "type": "color"
+    },
+    "active": {
+      "value": "#ffffff",
+      "step": 0,
+      "type": "color"
+    },
+    "feature": {
+      "value": "#1684b6",
+      "step": 500,
+      "type": "color"
+    },
+    "ok": {
+      "value": "#1ea34f",
+      "step": 600,
+      "type": "color"
+    },
+    "error": {
+      "value": "#d71c1c",
+      "step": 400,
+      "type": "color"
+    },
+    "warning": {
+      "value": "#cc8712",
+      "step": 300,
+      "type": "color"
+    },
+    "info": {
+      "value": "#185fd0",
+      "step": 500,
+      "type": "color"
+    }
+  },
+  "icon": {
+    "primary": {
+      "value": "#c6c6c6",
+      "step": 200,
+      "type": "color"
+    },
+    "secondary": {
+      "value": "#9c9c9c",
+      "step": 350,
+      "type": "color"
+    },
+    "muted": {
+      "value": "#555555",
+      "step": 600,
+      "type": "color"
+    },
+    "placeholder": {
+      "value": "#393939",
+      "step": 700,
+      "type": "color"
+    },
+    "active": {
+      "value": "#ffffff",
+      "step": 0,
+      "type": "color"
+    },
+    "feature": {
+      "value": "#1684b6",
+      "step": 500,
+      "type": "color"
+    },
+    "ok": {
+      "value": "#1ea34f",
+      "step": 600,
+      "type": "color"
+    },
+    "error": {
+      "value": "#cd1c1c",
+      "step": 500,
+      "type": "color"
+    },
+    "warning": {
+      "value": "#c38214",
+      "step": 400,
+      "type": "color"
+    },
+    "info": {
+      "value": "#195cc8",
+      "step": 600,
+      "type": "color"
+    }
+  },
+  "background": {
+    "100": {
+      "base": {
+        "value": "#2b2b2b",
+        "step": 750,
+        "type": "color"
+      },
+      "hovered": {
+        "value": "#323232",
+        "step": 725,
+        "type": "color"
+      },
+      "active": {
+        "value": "#393939",
+        "step": 700,
+        "type": "color"
+      },
+      "focused": {
+        "value": "#404040",
+        "step": 675,
+        "type": "color"
+      }
+    },
+    "300": {
+      "base": {
+        "value": "#1c1c1c",
+        "step": 800,
+        "type": "color"
+      },
+      "hovered": {
+        "value": "#232323",
+        "step": 775,
+        "type": "color"
+      },
+      "active": {
+        "value": "#2b2b2b",
+        "step": 750,
+        "type": "color"
+      },
+      "focused": {
+        "value": "#323232",
+        "step": 725,
+        "type": "color"
+      }
+    },
+    "500": {
+      "base": {
+        "value": "#000000",
+        "step": 900,
+        "type": "color"
+      },
+      "hovered": {
+        "value": "#070707",
+        "step": 875,
+        "type": "color"
+      },
+      "active": {
+        "value": "#0e0e0e",
+        "step": 850,
+        "type": "color"
+      },
+      "focused": {
+        "value": "#151515",
+        "step": 825,
+        "type": "color"
+      }
+    },
+    "ok": {
+      "base": {
+        "value": "#1ea34f",
+        "step": 600,
+        "type": "color"
+      },
+      "hovered": {
+        "value": "#1ea34f",
+        "step": 600,
+        "type": "color"
+      },
+      "active": {
+        "value": "#1ea34f",
+        "step": 600,
+        "type": "color"
+      },
+      "focused": {
+        "value": "#1ea34f",
+        "step": 600,
+        "type": "color"
+      }
+    },
+    "error": {
+      "base": {
+        "value": "#d71c1c",
+        "step": 400,
+        "type": "color"
+      },
+      "hovered": {
+        "value": "#d71c1c",
+        "step": 400,
+        "type": "color"
+      },
+      "active": {
+        "value": "#d71c1c",
+        "step": 400,
+        "type": "color"
+      },
+      "focused": {
+        "value": "#d71c1c",
+        "step": 400,
+        "type": "color"
+      }
+    },
+    "warning": {
+      "base": {
+        "value": "#cc8712",
+        "step": 300,
+        "type": "color"
+      },
+      "hovered": {
+        "value": "#cc8712",
+        "step": 300,
+        "type": "color"
+      },
+      "active": {
+        "value": "#cc8712",
+        "step": 300,
+        "type": "color"
+      },
+      "focused": {
+        "value": "#cc8712",
+        "step": 300,
+        "type": "color"
+      }
+    },
+    "info": {
+      "base": {
+        "value": "#185fd0",
+        "step": 500,
+        "type": "color"
+      },
+      "hovered": {
+        "value": "#185fd0",
+        "step": 500,
+        "type": "color"
+      },
+      "active": {
+        "value": "#185fd0",
+        "step": 500,
+        "type": "color"
+      },
+      "focused": {
+        "value": "#185fd0",
+        "step": 500,
+        "type": "color"
+      }
+    }
+  },
+  "border": {
+    "primary": {
+      "value": "#070707",
+      "step": 875,
+      "type": "color"
+    },
+    "secondary": {
+      "value": "#151515",
+      "step": 825,
+      "type": "color"
+    },
+    "muted": {
+      "value": "#232323",
+      "step": 775,
+      "type": "color"
+    },
+    "focused": {
+      "value": "#717171",
+      "step": 500,
+      "type": "color"
+    },
+    "active": {
+      "value": "#000000",
+      "step": 900,
+      "type": "color"
+    },
+    "ok": {
+      "value": "#1ea650",
+      "step": 500,
+      "type": "color"
+    },
+    "error": {
+      "value": "#cd1c1c",
+      "step": 500,
+      "type": "color"
+    },
+    "warning": {
+      "value": "#bb7e15",
+      "step": 500,
+      "type": "color"
+    },
+    "info": {
+      "value": "#185fd0",
+      "step": 500,
+      "type": "color"
+    }
+  },
+  "editor": {
+    "background": {
+      "value": "#000000",
+      "step": 900,
+      "type": "color"
+    },
+    "indent_guide": {
+      "value": "#232323",
+      "step": 775,
+      "type": "color"
+    },
+    "indent_guide_active": {
+      "value": "#151515",
+      "step": 825,
+      "type": "color"
+    },
+    "line": {
+      "active": {
+        "value": "#0e0e0e",
+        "step": 850,
+        "type": "color"
+      },
+      "highlighted": {
+        "value": "#070707",
+        "step": 875,
+        "type": "color"
+      },
+      "inserted": {
+        "value": "#1ea34f",
+        "step": 600,
+        "type": "color"
+      },
+      "deleted": {
+        "value": "#d71c1c",
+        "step": 400,
+        "type": "color"
+      },
+      "modified": {
+        "value": "#185fd0",
+        "step": 500,
+        "type": "color"
+      }
+    },
+    "highlight": {
+      "selection": {
+        "value": "#307af3",
+        "step": 100,
+        "type": "color"
+      },
+      "occurrence": {
+        "value": "#1e22db",
+        "step": 500,
+        "type": "color"
+      },
+      "activeOccurrence": {
+        "value": "#2327e2",
+        "step": 400,
+        "type": "color"
+      },
+      "matchingBracket": {
+        "value": "#0e0e0e",
+        "step": 850,
+        "type": "color"
+      },
+      "match": {
+        "value": "#70a919",
+        "step": 500,
+        "type": "color"
+      },
+      "activeMatch": {
+        "value": "#72ad19",
+        "step": 400,
+        "type": "color"
+      },
+      "related": {
+        "value": "#151515",
+        "step": 825,
+        "type": "color"
+      }
+    },
+    "gutter": {
+      "primary": {
+        "value": "#636363",
+        "step": 550,
+        "type": "color"
+      },
+      "active": {
+        "value": "#ffffff",
+        "step": 0,
+        "type": "color"
+      }
+    }
+  },
+  "syntax": {
+    "primary": {
+      "value": "#f1f1f1",
+      "type": "color"
+    },
+    "comment": {
+      "value": "#7aba18",
+      "type": "color"
+    },
+    "keyword": {
+      "value": "#1588bc",
+      "type": "color"
+    },
+    "function": {
+      "value": "#cfa00f",
+      "type": "color"
+    },
+    "type": {
+      "value": "#17a696",
+      "type": "color"
+    },
+    "variant": {
+      "value": "#17a696",
+      "type": "color"
+    },
+    "property": {
+      "value": "#148dc4",
+      "type": "color"
+    },
+    "enum": {
+      "value": "#1588bc",
+      "type": "color"
+    },
+    "operator": {
+      "value": "#1588bc",
+      "type": "color"
+    },
+    "string": {
+      "value": "#d66211",
+      "type": "color"
+    },
+    "number": {
+      "value": "#d5d5d5",
+      "type": "color"
+    },
+    "boolean": {
+      "value": "#d5d5d5",
+      "type": "color"
+    }
+  },
+  "player": {
+    "1": {
+      "baseColor": {
+        "value": "#195cc8",
+        "step": 600,
+        "type": "color"
+      },
+      "cursorColor": {
+        "value": "#195cc8",
+        "step": 600,
+        "type": "color"
+      },
+      "selectionColor": {
+        "value": "#307af3",
+        "step": 100,
+        "type": "color"
+      },
+      "borderColor": {
+        "value": "#195cc8",
+        "step": 600,
+        "type": "color"
+      }
+    },
+    "2": {
+      "baseColor": {
+        "value": "#70a919",
+        "step": 500,
+        "type": "color"
+      },
+      "cursorColor": {
+        "value": "#70a919",
+        "step": 500,
+        "type": "color"
+      },
+      "selectionColor": {
+        "value": "#80c517",
+        "step": 100,
+        "type": "color"
+      },
+      "borderColor": {
+        "value": "#70a919",
+        "step": 500,
+        "type": "color"
+      }
+    },
+    "3": {
+      "baseColor": {
+        "value": "#1e22db",
+        "step": 500,
+        "type": "color"
+      },
+      "cursorColor": {
+        "value": "#1e22db",
+        "step": 500,
+        "type": "color"
+      },
+      "selectionColor": {
+        "value": "#5558ee",
+        "step": 100,
+        "type": "color"
+      },
+      "borderColor": {
+        "value": "#1e22db",
+        "step": 500,
+        "type": "color"
+      }
+    },
+    "4": {
+      "baseColor": {
+        "value": "#c45c14",
+        "step": 500,
+        "type": "color"
+      },
+      "cursorColor": {
+        "value": "#c45c14",
+        "step": 500,
+        "type": "color"
+      },
+      "selectionColor": {
+        "value": "#f66e0f",
+        "step": 100,
+        "type": "color"
+      },
+      "borderColor": {
+        "value": "#c45c14",
+        "step": 500,
+        "type": "color"
+      }
+    },
+    "5": {
+      "baseColor": {
+        "value": "#7d19dc",
+        "step": 500,
+        "type": "color"
+      },
+      "cursorColor": {
+        "value": "#7d19dc",
+        "step": 500,
+        "type": "color"
+      },
+      "selectionColor": {
+        "value": "#a048f4",
+        "step": 100,
+        "type": "color"
+      },
+      "borderColor": {
+        "value": "#7d19dc",
+        "step": 500,
+        "type": "color"
+      }
+    },
+    "6": {
+      "baseColor": {
+        "value": "#17a293",
+        "step": 400,
+        "type": "color"
+      },
+      "cursorColor": {
+        "value": "#17a293",
+        "step": 400,
+        "type": "color"
+      },
+      "selectionColor": {
+        "value": "#15b3a2",
+        "step": 100,
+        "type": "color"
+      },
+      "borderColor": {
+        "value": "#17a293",
+        "step": 400,
+        "type": "color"
+      }
+    },
+    "7": {
+      "baseColor": {
+        "value": "#d51e79",
+        "step": 400,
+        "type": "color"
+      },
+      "cursorColor": {
+        "value": "#d51e79",
+        "step": 400,
+        "type": "color"
+      },
+      "selectionColor": {
+        "value": "#e93d92",
+        "step": 100,
+        "type": "color"
+      },
+      "borderColor": {
+        "value": "#d51e79",
+        "step": 400,
+        "type": "color"
+      }
+    },
+    "8": {
+      "baseColor": {
+        "value": "#bc9212",
+        "step": 400,
+        "type": "color"
+      },
+      "cursorColor": {
+        "value": "#bc9212",
+        "step": 400,
+        "type": "color"
+      },
+      "selectionColor": {
+        "value": "#e0ac0b",
+        "step": 100,
+        "type": "color"
+      },
+      "borderColor": {
+        "value": "#bc9212",
+        "step": 400,
+        "type": "color"
+      }
+    }
+  },
+  "shadowAlpha": {
+    "value": 0.32,
+    "type": "number"
+  }
+}

styles/figma/light.json 🔗

@@ -0,0 +1,637 @@
+{
+  "meta": {
+    "themeName": "light"
+  },
+  "text": {
+    "primary": {
+      "value": "#2b2b2b",
+      "step": 750,
+      "type": "color"
+    },
+    "secondary": {
+      "value": "#555555",
+      "step": 600,
+      "type": "color"
+    },
+    "muted": {
+      "value": "#808080",
+      "step": 450,
+      "type": "color"
+    },
+    "placeholder": {
+      "value": "#aaaaaa",
+      "step": 300,
+      "type": "color"
+    },
+    "active": {
+      "value": "#000000",
+      "step": 900,
+      "type": "color"
+    },
+    "feature": {
+      "value": "#185fd0",
+      "step": 500,
+      "type": "color"
+    },
+    "ok": {
+      "value": "#1ea650",
+      "step": 500,
+      "type": "color"
+    },
+    "error": {
+      "value": "#cd1c1c",
+      "step": 500,
+      "type": "color"
+    },
+    "warning": {
+      "value": "#b68e14",
+      "step": 500,
+      "type": "color"
+    },
+    "info": {
+      "value": "#185fd0",
+      "step": 500,
+      "type": "color"
+    }
+  },
+  "icon": {
+    "primary": {
+      "value": "#aaaaaa",
+      "step": 300,
+      "type": "color"
+    },
+    "secondary": {
+      "value": "#717171",
+      "step": 500,
+      "type": "color"
+    },
+    "muted": {
+      "value": "#555555",
+      "step": 600,
+      "type": "color"
+    },
+    "placeholder": {
+      "value": "#393939",
+      "step": 700,
+      "type": "color"
+    },
+    "active": {
+      "value": "#000000",
+      "step": 900,
+      "type": "color"
+    },
+    "feature": {
+      "value": "#1780b0",
+      "step": 600,
+      "type": "color"
+    },
+    "ok": {
+      "value": "#1ea34f",
+      "step": 600,
+      "type": "color"
+    },
+    "error": {
+      "value": "#c51c1c",
+      "step": 600,
+      "type": "color"
+    },
+    "warning": {
+      "value": "#bc9212",
+      "step": 400,
+      "type": "color"
+    },
+    "info": {
+      "value": "#195cc8",
+      "step": 600,
+      "type": "color"
+    }
+  },
+  "background": {
+    "100": {
+      "base": {
+        "value": "#e3e3e3",
+        "step": 100,
+        "type": "color"
+      },
+      "hovered": {
+        "value": "#d5d5d5",
+        "step": 150,
+        "type": "color"
+      },
+      "active": {
+        "value": "#c6c6c6",
+        "step": 200,
+        "type": "color"
+      },
+      "focused": {
+        "value": "#d5d5d5",
+        "step": 150,
+        "type": "color"
+      }
+    },
+    "300": {
+      "base": {
+        "value": "#f1f1f1",
+        "step": 50,
+        "type": "color"
+      },
+      "hovered": {
+        "value": "#e3e3e3",
+        "step": 100,
+        "type": "color"
+      },
+      "active": {
+        "value": "#d5d5d5",
+        "step": 150,
+        "type": "color"
+      },
+      "focused": {
+        "value": "#e3e3e3",
+        "step": 100,
+        "type": "color"
+      }
+    },
+    "500": {
+      "base": {
+        "value": "#ffffff",
+        "step": 0,
+        "type": "color"
+      },
+      "hovered": {
+        "value": "#f1f1f1",
+        "step": 50,
+        "type": "color"
+      },
+      "active": {
+        "value": "#e3e3e3",
+        "step": 100,
+        "type": "color"
+      },
+      "focused": {
+        "value": "#f1f1f1",
+        "step": 50,
+        "type": "color"
+      }
+    },
+    "ok": {
+      "base": {
+        "value": "#21bf5b",
+        "step": 100,
+        "type": "color"
+      },
+      "hovered": {
+        "value": "#21bf5b",
+        "step": 100,
+        "type": "color"
+      },
+      "active": {
+        "value": "#21bf5b",
+        "step": 100,
+        "type": "color"
+      },
+      "focused": {
+        "value": "#21bf5b",
+        "step": 100,
+        "type": "color"
+      }
+    },
+    "error": {
+      "base": {
+        "value": "#ec3939",
+        "step": 100,
+        "type": "color"
+      },
+      "hovered": {
+        "value": "#ec3939",
+        "step": 100,
+        "type": "color"
+      },
+      "active": {
+        "value": "#ec3939",
+        "step": 100,
+        "type": "color"
+      },
+      "focused": {
+        "value": "#ec3939",
+        "step": 100,
+        "type": "color"
+      }
+    },
+    "warning": {
+      "base": {
+        "value": "#e0ac0b",
+        "step": 100,
+        "type": "color"
+      },
+      "hovered": {
+        "value": "#e0ac0b",
+        "step": 100,
+        "type": "color"
+      },
+      "active": {
+        "value": "#e0ac0b",
+        "step": 100,
+        "type": "color"
+      },
+      "focused": {
+        "value": "#e0ac0b",
+        "step": 100,
+        "type": "color"
+      }
+    },
+    "info": {
+      "base": {
+        "value": "#307af3",
+        "step": 100,
+        "type": "color"
+      },
+      "hovered": {
+        "value": "#307af3",
+        "step": 100,
+        "type": "color"
+      },
+      "active": {
+        "value": "#307af3",
+        "step": 100,
+        "type": "color"
+      },
+      "focused": {
+        "value": "#307af3",
+        "step": 100,
+        "type": "color"
+      }
+    }
+  },
+  "border": {
+    "primary": {
+      "value": "#c6c6c6",
+      "step": 200,
+      "type": "color"
+    },
+    "secondary": {
+      "value": "#e3e3e3",
+      "step": 100,
+      "type": "color"
+    },
+    "muted": {
+      "value": "#f1f1f1",
+      "step": 50,
+      "type": "color"
+    },
+    "focused": {
+      "value": "#e3e3e3",
+      "step": 100,
+      "type": "color"
+    },
+    "active": {
+      "value": "#b8b8b8",
+      "step": 250,
+      "type": "color"
+    },
+    "ok": {
+      "value": "#20b557",
+      "step": 200,
+      "type": "color"
+    },
+    "error": {
+      "value": "#e72727",
+      "step": 200,
+      "type": "color"
+    },
+    "warning": {
+      "value": "#cfa00f",
+      "step": 200,
+      "type": "color"
+    },
+    "info": {
+      "value": "#1f6eed",
+      "step": 200,
+      "type": "color"
+    }
+  },
+  "editor": {
+    "background": {
+      "value": "#ffffff",
+      "step": 0,
+      "type": "color"
+    },
+    "indent_guide": {
+      "value": "#f1f1f1",
+      "step": 50,
+      "type": "color"
+    },
+    "indent_guide_active": {
+      "value": "#e3e3e3",
+      "step": 100,
+      "type": "color"
+    },
+    "line": {
+      "active": {
+        "value": "#e3e3e3",
+        "step": 100,
+        "type": "color"
+      },
+      "highlighted": {
+        "value": "#e3e3e3",
+        "step": 100,
+        "type": "color"
+      },
+      "inserted": {
+        "value": "#21bf5b",
+        "step": 100,
+        "type": "color"
+      },
+      "deleted": {
+        "value": "#ec3939",
+        "step": 100,
+        "type": "color"
+      },
+      "modified": {
+        "value": "#307af3",
+        "step": 100,
+        "type": "color"
+      }
+    },
+    "highlight": {
+      "selection": {
+        "value": "#307af3",
+        "step": 100,
+        "type": "color"
+      },
+      "occurrence": {
+        "value": "#e3e3e3",
+        "step": 100,
+        "type": "color"
+      },
+      "activeOccurrence": {
+        "value": "#ffffff",
+        "step": 0,
+        "type": "color"
+      },
+      "matchingBracket": {
+        "value": "#ffffff",
+        "step": 0,
+        "type": "color"
+      },
+      "match": {
+        "value": "#ffffff",
+        "step": 0,
+        "type": "color"
+      },
+      "activeMatch": {
+        "value": "#ffffff",
+        "step": 0,
+        "type": "color"
+      },
+      "related": {
+        "value": "#ffffff",
+        "step": 0,
+        "type": "color"
+      }
+    },
+    "gutter": {
+      "primary": {
+        "value": "#808080",
+        "step": 450,
+        "type": "color"
+      },
+      "active": {
+        "value": "#000000",
+        "step": 900,
+        "type": "color"
+      }
+    }
+  },
+  "syntax": {
+    "primary": {
+      "value": "#2b2b2b",
+      "type": "color"
+    },
+    "comment": {
+      "value": "#7aba18",
+      "type": "color"
+    },
+    "keyword": {
+      "value": "#1588bc",
+      "type": "color"
+    },
+    "function": {
+      "value": "#cfa00f",
+      "type": "color"
+    },
+    "type": {
+      "value": "#17a696",
+      "type": "color"
+    },
+    "variant": {
+      "value": "#17a696",
+      "type": "color"
+    },
+    "property": {
+      "value": "#148dc4",
+      "type": "color"
+    },
+    "enum": {
+      "value": "#1588bc",
+      "type": "color"
+    },
+    "operator": {
+      "value": "#1588bc",
+      "type": "color"
+    },
+    "string": {
+      "value": "#d66211",
+      "type": "color"
+    },
+    "number": {
+      "value": "#d5d5d5",
+      "type": "color"
+    },
+    "boolean": {
+      "value": "#d5d5d5",
+      "type": "color"
+    }
+  },
+  "player": {
+    "1": {
+      "baseColor": {
+        "value": "#195cc8",
+        "step": 600,
+        "type": "color"
+      },
+      "cursorColor": {
+        "value": "#185fd0",
+        "step": 500,
+        "type": "color"
+      },
+      "selectionColor": {
+        "value": "#307af3",
+        "step": 100,
+        "type": "color"
+      },
+      "borderColor": {
+        "value": "#185fd0",
+        "step": 500,
+        "type": "color"
+      }
+    },
+    "2": {
+      "baseColor": {
+        "value": "#70a919",
+        "step": 500,
+        "type": "color"
+      },
+      "cursorColor": {
+        "value": "#70a919",
+        "step": 500,
+        "type": "color"
+      },
+      "selectionColor": {
+        "value": "#80c517",
+        "step": 100,
+        "type": "color"
+      },
+      "borderColor": {
+        "value": "#70a919",
+        "step": 500,
+        "type": "color"
+      }
+    },
+    "3": {
+      "baseColor": {
+        "value": "#1e22db",
+        "step": 500,
+        "type": "color"
+      },
+      "cursorColor": {
+        "value": "#1e22db",
+        "step": 500,
+        "type": "color"
+      },
+      "selectionColor": {
+        "value": "#5558ee",
+        "step": 100,
+        "type": "color"
+      },
+      "borderColor": {
+        "value": "#1e22db",
+        "step": 500,
+        "type": "color"
+      }
+    },
+    "4": {
+      "baseColor": {
+        "value": "#c45c14",
+        "step": 500,
+        "type": "color"
+      },
+      "cursorColor": {
+        "value": "#c45c14",
+        "step": 500,
+        "type": "color"
+      },
+      "selectionColor": {
+        "value": "#f66e0f",
+        "step": 100,
+        "type": "color"
+      },
+      "borderColor": {
+        "value": "#c45c14",
+        "step": 500,
+        "type": "color"
+      }
+    },
+    "5": {
+      "baseColor": {
+        "value": "#7d19dc",
+        "step": 500,
+        "type": "color"
+      },
+      "cursorColor": {
+        "value": "#7d19dc",
+        "step": 500,
+        "type": "color"
+      },
+      "selectionColor": {
+        "value": "#a048f4",
+        "step": 100,
+        "type": "color"
+      },
+      "borderColor": {
+        "value": "#7d19dc",
+        "step": 500,
+        "type": "color"
+      }
+    },
+    "6": {
+      "baseColor": {
+        "value": "#17a293",
+        "step": 400,
+        "type": "color"
+      },
+      "cursorColor": {
+        "value": "#17a293",
+        "step": 400,
+        "type": "color"
+      },
+      "selectionColor": {
+        "value": "#15b3a2",
+        "step": 100,
+        "type": "color"
+      },
+      "borderColor": {
+        "value": "#17a293",
+        "step": 400,
+        "type": "color"
+      }
+    },
+    "7": {
+      "baseColor": {
+        "value": "#d51e79",
+        "step": 400,
+        "type": "color"
+      },
+      "cursorColor": {
+        "value": "#d51e79",
+        "step": 400,
+        "type": "color"
+      },
+      "selectionColor": {
+        "value": "#e93d92",
+        "step": 100,
+        "type": "color"
+      },
+      "borderColor": {
+        "value": "#d51e79",
+        "step": 400,
+        "type": "color"
+      }
+    },
+    "8": {
+      "baseColor": {
+        "value": "#bc9212",
+        "step": 400,
+        "type": "color"
+      },
+      "cursorColor": {
+        "value": "#bc9212",
+        "step": 400,
+        "type": "color"
+      },
+      "selectionColor": {
+        "value": "#e0ac0b",
+        "step": 100,
+        "type": "color"
+      },
+      "borderColor": {
+        "value": "#bc9212",
+        "step": 400,
+        "type": "color"
+      }
+    }
+  },
+  "shadowAlpha": {
+    "value": 0.12,
+    "type": "number"
+  }
+}