Add a combined `tokens.json` for Figma Tokens

Nate Butler created 3 years ago

- Having individual json files for themes and core is useful for copy+pasting while exploring changes
- Figma github sync requires a single json file to pull down

Change summary

styles/buildFigmaTokens.ts |   42 
styles/figma/tokens.json   | 2431 ++++++++++++++++++++++++++++++++++++++++
2 files changed, 2,460 insertions(+), 13 deletions(-)

Detailed changes

styles/buildFigmaTokens.ts

@@ -5,8 +5,13 @@ import light from "./themes/light";
 import Theme from "./themes/theme";
 import { colors, fontFamilies, fontSizes, fontWeights } from "./tokens";
 
+let themes = [
+  dark, 
+  light
+];
+
 // Organize theme tokens
-function themeTokens(theme: Theme): Object {
+function themeTokens(theme: Theme) {
   return {
     meta: {
       themeName: theme.name,
@@ -71,16 +76,6 @@ function themeTokens(theme: Theme): Object {
   };
 }
 
-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: {
@@ -93,7 +88,28 @@ const coreTokens = {
   size: fontSizes,
 };
 
+const combinedTokens = {
+  core: coreTokens,
+  dark: themeTokens(dark),
+  light: themeTokens(light)
+}
+
 // Create core.json
 const corePath = path.resolve(`${__dirname}/figma/core.json`);
-const coreTokenJSON = JSON.stringify(coreTokens, null, 2);
-fs.writeFileSync(corePath, coreTokenJSON);
+const coreJSON = JSON.stringify(coreTokens, null, 2);
+fs.writeFileSync(corePath, coreJSON);
+console.log(`- Core: core.json created`);
+
+// Create {theme}.json
+const themePath = path.resolve(`${__dirname}/figma`);
+themes.forEach((theme) => {
+  const tokenJSON = JSON.stringify(themeTokens(theme), null, 2);
+  fs.writeFileSync(`${themePath}/${theme.name}.json`, tokenJSON);
+  console.log(`- Theme: ${theme.name}.json created`);
+});
+
+// Create combined tokens.json
+const combinedPath = path.resolve(`${__dirname}/figma/tokens.json`);
+const combinedJSON = JSON.stringify(combinedTokens, null, 2);
+fs.writeFileSync(combinedPath, combinedJSON);
+console.log(`- Combined: tokens.json created`);

styles/figma/tokens.json

@@ -0,0 +1,2431 @@
+{
+  "core": {
+    "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": "#fdd5db",
+          "step": 100,
+          "type": "color"
+        },
+        "200": {
+          "value": "#fbbdc8",
+          "step": 200,
+          "type": "color"
+        },
+        "300": {
+          "value": "#faa4b3",
+          "step": 300,
+          "type": "color"
+        },
+        "400": {
+          "value": "#f98a9d",
+          "step": 400,
+          "type": "color"
+        },
+        "500": {
+          "value": "#f76e86",
+          "step": 500,
+          "type": "color"
+        },
+        "600": {
+          "value": "#f54c69",
+          "step": 600,
+          "type": "color"
+        },
+        "700": {
+          "value": "#ec2548",
+          "step": 700,
+          "type": "color"
+        },
+        "800": {
+          "value": "#d21939",
+          "step": 800,
+          "type": "color"
+        },
+        "900": {
+          "value": "#b41a35",
+          "step": 900,
+          "type": "color"
+        }
+      },
+      "red": {
+        "0": {
+          "value": "#feecec",
+          "step": 0,
+          "type": "color"
+        },
+        "100": {
+          "value": "#fdd4d4",
+          "step": 100,
+          "type": "color"
+        },
+        "200": {
+          "value": "#fbbdbd",
+          "step": 200,
+          "type": "color"
+        },
+        "300": {
+          "value": "#f9a5a5",
+          "step": 300,
+          "type": "color"
+        },
+        "400": {
+          "value": "#f78c8c",
+          "step": 400,
+          "type": "color"
+        },
+        "500": {
+          "value": "#f47171",
+          "step": 500,
+          "type": "color"
+        },
+        "600": {
+          "value": "#f15252",
+          "step": 600,
+          "type": "color"
+        },
+        "700": {
+          "value": "#e82c2c",
+          "step": 700,
+          "type": "color"
+        },
+        "800": {
+          "value": "#d11c1c",
+          "step": 800,
+          "type": "color"
+        },
+        "900": {
+          "value": "#b21c1c",
+          "step": 900,
+          "type": "color"
+        }
+      },
+      "orange": {
+        "0": {
+          "value": "#fef3ec",
+          "step": 0,
+          "type": "color"
+        },
+        "100": {
+          "value": "#fde0cd",
+          "step": 100,
+          "type": "color"
+        },
+        "200": {
+          "value": "#fbccac",
+          "step": 200,
+          "type": "color"
+        },
+        "300": {
+          "value": "#fab78b",
+          "step": 300,
+          "type": "color"
+        },
+        "400": {
+          "value": "#faa266",
+          "step": 400,
+          "type": "color"
+        },
+        "500": {
+          "value": "#f98a3d",
+          "step": 500,
+          "type": "color"
+        },
+        "600": {
+          "value": "#f77113",
+          "step": 600,
+          "type": "color"
+        },
+        "700": {
+          "value": "#e0650f",
+          "step": 700,
+          "type": "color"
+        },
+        "800": {
+          "value": "#c65d14",
+          "step": 800,
+          "type": "color"
+        },
+        "900": {
+          "value": "#ac5517",
+          "step": 900,
+          "type": "color"
+        }
+      },
+      "amber": {
+        "0": {
+          "value": "#fef7ec",
+          "step": 0,
+          "type": "color"
+        },
+        "100": {
+          "value": "#fce7c4",
+          "step": 100,
+          "type": "color"
+        },
+        "200": {
+          "value": "#fad69d",
+          "step": 200,
+          "type": "color"
+        },
+        "300": {
+          "value": "#f8c570",
+          "step": 300,
+          "type": "color"
+        },
+        "400": {
+          "value": "#f7b241",
+          "step": 400,
+          "type": "color"
+        },
+        "500": {
+          "value": "#f59f0c",
+          "step": 500,
+          "type": "color"
+        },
+        "600": {
+          "value": "#e1930e",
+          "step": 600,
+          "type": "color"
+        },
+        "700": {
+          "value": "#cd8812",
+          "step": 700,
+          "type": "color"
+        },
+        "800": {
+          "value": "#ba7d15",
+          "step": 800,
+          "type": "color"
+        },
+        "900": {
+          "value": "#a77218",
+          "step": 900,
+          "type": "color"
+        }
+      },
+      "yellow": {
+        "0": {
+          "value": "#fef9ec",
+          "step": 0,
+          "type": "color"
+        },
+        "100": {
+          "value": "#fceabc",
+          "step": 100,
+          "type": "color"
+        },
+        "200": {
+          "value": "#fadc89",
+          "step": 200,
+          "type": "color"
+        },
+        "300": {
+          "value": "#f8cc4e",
+          "step": 300,
+          "type": "color"
+        },
+        "400": {
+          "value": "#f6bc09",
+          "step": 400,
+          "type": "color"
+        },
+        "500": {
+          "value": "#e5af09",
+          "step": 500,
+          "type": "color"
+        },
+        "600": {
+          "value": "#d4a30d",
+          "step": 600,
+          "type": "color"
+        },
+        "700": {
+          "value": "#c49811",
+          "step": 700,
+          "type": "color"
+        },
+        "800": {
+          "value": "#b48d14",
+          "step": 800,
+          "type": "color"
+        },
+        "900": {
+          "value": "#a48117",
+          "step": 900,
+          "type": "color"
+        }
+      },
+      "lime": {
+        "0": {
+          "value": "#f7feec",
+          "step": 0,
+          "type": "color"
+        },
+        "100": {
+          "value": "#dbf9ac",
+          "step": 100,
+          "type": "color"
+        },
+        "200": {
+          "value": "#bdf36b",
+          "step": 200,
+          "type": "color"
+        },
+        "300": {
+          "value": "#9feb2b",
+          "step": 300,
+          "type": "color"
+        },
+        "400": {
+          "value": "#90df17",
+          "step": 400,
+          "type": "color"
+        },
+        "500": {
+          "value": "#87d116",
+          "step": 500,
+          "type": "color"
+        },
+        "600": {
+          "value": "#7fc417",
+          "step": 600,
+          "type": "color"
+        },
+        "700": {
+          "value": "#78b618",
+          "step": 700,
+          "type": "color"
+        },
+        "800": {
+          "value": "#70aa19",
+          "step": 800,
+          "type": "color"
+        },
+        "900": {
+          "value": "#699c1a",
+          "step": 900,
+          "type": "color"
+        }
+      },
+      "green": {
+        "0": {
+          "value": "#ecfef2",
+          "step": 0,
+          "type": "color"
+        },
+        "100": {
+          "value": "#befad2",
+          "step": 100,
+          "type": "color"
+        },
+        "200": {
+          "value": "#8ff4b2",
+          "step": 200,
+          "type": "color"
+        },
+        "300": {
+          "value": "#60ec92",
+          "step": 300,
+          "type": "color"
+        },
+        "400": {
+          "value": "#34e173",
+          "step": 400,
+          "type": "color"
+        },
+        "500": {
+          "value": "#23d464",
+          "step": 500,
+          "type": "color"
+        },
+        "600": {
+          "value": "#22c55e",
+          "step": 600,
+          "type": "color"
+        },
+        "700": {
+          "value": "#20b658",
+          "step": 700,
+          "type": "color"
+        },
+        "800": {
+          "value": "#1ea851",
+          "step": 800,
+          "type": "color"
+        },
+        "900": {
+          "value": "#1d9b4b",
+          "step": 900,
+          "type": "color"
+        }
+      },
+      "emerald": {
+        "0": {
+          "value": "#ecfef8",
+          "step": 0,
+          "type": "color"
+        },
+        "100": {
+          "value": "#b3fbe3",
+          "step": 100,
+          "type": "color"
+        },
+        "200": {
+          "value": "#72f6ca",
+          "step": 200,
+          "type": "color"
+        },
+        "300": {
+          "value": "#1feda9",
+          "step": 300,
+          "type": "color"
+        },
+        "400": {
+          "value": "#12e09b",
+          "step": 400,
+          "type": "color"
+        },
+        "500": {
+          "value": "#11d091",
+          "step": 500,
+          "type": "color"
+        },
+        "600": {
+          "value": "#11c287",
+          "step": 600,
+          "type": "color"
+        },
+        "700": {
+          "value": "#11b37e",
+          "step": 700,
+          "type": "color"
+        },
+        "800": {
+          "value": "#15a575",
+          "step": 800,
+          "type": "color"
+        },
+        "900": {
+          "value": "#18976c",
+          "step": 900,
+          "type": "color"
+        }
+      },
+      "teal": {
+        "0": {
+          "value": "#ecfefc",
+          "step": 0,
+          "type": "color"
+        },
+        "100": {
+          "value": "#b4faf2",
+          "step": 100,
+          "type": "color"
+        },
+        "200": {
+          "value": "#73f4e6",
+          "step": 200,
+          "type": "color"
+        },
+        "300": {
+          "value": "#26ebd5",
+          "step": 300,
+          "type": "color"
+        },
+        "400": {
+          "value": "#16ddc7",
+          "step": 400,
+          "type": "color"
+        },
+        "500": {
+          "value": "#15cfba",
+          "step": 500,
+          "type": "color"
+        },
+        "600": {
+          "value": "#15c1ae",
+          "step": 600,
+          "type": "color"
+        },
+        "700": {
+          "value": "#15b2a1",
+          "step": 700,
+          "type": "color"
+        },
+        "800": {
+          "value": "#17a495",
+          "step": 800,
+          "type": "color"
+        },
+        "900": {
+          "value": "#199788",
+          "step": 900,
+          "type": "color"
+        }
+      },
+      "cyan": {
+        "0": {
+          "value": "#ecfcfe",
+          "step": 0,
+          "type": "color"
+        },
+        "100": {
+          "value": "#bcf5fc",
+          "step": 100,
+          "type": "color"
+        },
+        "200": {
+          "value": "#86edfa",
+          "step": 200,
+          "type": "color"
+        },
+        "300": {
+          "value": "#41e3f8",
+          "step": 300,
+          "type": "color"
+        },
+        "400": {
+          "value": "#07d5f1",
+          "step": 400,
+          "type": "color"
+        },
+        "500": {
+          "value": "#07c7e1",
+          "step": 500,
+          "type": "color"
+        },
+        "600": {
+          "value": "#07b8d0",
+          "step": 600,
+          "type": "color"
+        },
+        "700": {
+          "value": "#0daabf",
+          "step": 700,
+          "type": "color"
+        },
+        "800": {
+          "value": "#119bae",
+          "step": 800,
+          "type": "color"
+        },
+        "900": {
+          "value": "#168e9e",
+          "step": 900,
+          "type": "color"
+        }
+      },
+      "sky": {
+        "0": {
+          "value": "#ecf8fe",
+          "step": 0,
+          "type": "color"
+        },
+        "100": {
+          "value": "#caecfc",
+          "step": 100,
+          "type": "color"
+        },
+        "200": {
+          "value": "#a6defa",
+          "step": 200,
+          "type": "color"
+        },
+        "300": {
+          "value": "#81d2f8",
+          "step": 300,
+          "type": "color"
+        },
+        "400": {
+          "value": "#59c3f5",
+          "step": 400,
+          "type": "color"
+        },
+        "500": {
+          "value": "#2db4f3",
+          "step": 500,
+          "type": "color"
+        },
+        "600": {
+          "value": "#0ea5e8",
+          "step": 600,
+          "type": "color"
+        },
+        "700": {
+          "value": "#1296d1",
+          "step": 700,
+          "type": "color"
+        },
+        "800": {
+          "value": "#1686ba",
+          "step": 800,
+          "type": "color"
+        },
+        "900": {
+          "value": "#1878a4",
+          "step": 900,
+          "type": "color"
+        }
+      },
+      "blue": {
+        "0": {
+          "value": "#ecf3fe",
+          "step": 0,
+          "type": "color"
+        },
+        "100": {
+          "value": "#d0e2fd",
+          "step": 100,
+          "type": "color"
+        },
+        "200": {
+          "value": "#b4cffb",
+          "step": 200,
+          "type": "color"
+        },
+        "300": {
+          "value": "#99befa",
+          "step": 300,
+          "type": "color"
+        },
+        "400": {
+          "value": "#7cacf9",
+          "step": 400,
+          "type": "color"
+        },
+        "500": {
+          "value": "#6099f7",
+          "step": 500,
+          "type": "color"
+        },
+        "600": {
+          "value": "#4287f6",
+          "step": 600,
+          "type": "color"
+        },
+        "700": {
+          "value": "#2774f0",
+          "step": 700,
+          "type": "color"
+        },
+        "800": {
+          "value": "#1762db",
+          "step": 800,
+          "type": "color"
+        },
+        "900": {
+          "value": "#1a55b4",
+          "step": 900,
+          "type": "color"
+        }
+      },
+      "indigo": {
+        "0": {
+          "value": "#ececfe",
+          "step": 0,
+          "type": "color"
+        },
+        "100": {
+          "value": "#d4d5fd",
+          "step": 100,
+          "type": "color"
+        },
+        "200": {
+          "value": "#bebefb",
+          "step": 200,
+          "type": "color"
+        },
+        "300": {
+          "value": "#a7a8f9",
+          "step": 300,
+          "type": "color"
+        },
+        "400": {
+          "value": "#8f90f6",
+          "step": 400,
+          "type": "color"
+        },
+        "500": {
+          "value": "#777af4",
+          "step": 500,
+          "type": "color"
+        },
+        "600": {
+          "value": "#5f62f0",
+          "step": 600,
+          "type": "color"
+        },
+        "700": {
+          "value": "#464aeb",
+          "step": 700,
+          "type": "color"
+        },
+        "800": {
+          "value": "#292de4",
+          "step": 800,
+          "type": "color"
+        },
+        "900": {
+          "value": "#1d20bb",
+          "step": 900,
+          "type": "color"
+        }
+      },
+      "violet": {
+        "0": {
+          "value": "#f1ecfe",
+          "step": 0,
+          "type": "color"
+        },
+        "100": {
+          "value": "#e0d5fd",
+          "step": 100,
+          "type": "color"
+        },
+        "200": {
+          "value": "#cfbcfb",
+          "step": 200,
+          "type": "color"
+        },
+        "300": {
+          "value": "#bda4fa",
+          "step": 300,
+          "type": "color"
+        },
+        "400": {
+          "value": "#ad8cf9",
+          "step": 400,
+          "type": "color"
+        },
+        "500": {
+          "value": "#9b73f7",
+          "step": 500,
+          "type": "color"
+        },
+        "600": {
+          "value": "#8959f6",
+          "step": 600,
+          "type": "color"
+        },
+        "700": {
+          "value": "#7540f0",
+          "step": 700,
+          "type": "color"
+        },
+        "800": {
+          "value": "#5e22e7",
+          "step": 800,
+          "type": "color"
+        },
+        "900": {
+          "value": "#4c1bbc",
+          "step": 900,
+          "type": "color"
+        }
+      },
+      "purple": {
+        "0": {
+          "value": "#f5ecfe",
+          "step": 0,
+          "type": "color"
+        },
+        "100": {
+          "value": "#e9d4fd",
+          "step": 100,
+          "type": "color"
+        },
+        "200": {
+          "value": "#dcbcfc",
+          "step": 200,
+          "type": "color"
+        },
+        "300": {
+          "value": "#d0a4fa",
+          "step": 300,
+          "type": "color"
+        },
+        "400": {
+          "value": "#c38bf9",
+          "step": 400,
+          "type": "color"
+        },
+        "500": {
+          "value": "#b671f8",
+          "step": 500,
+          "type": "color"
+        },
+        "600": {
+          "value": "#a856f7",
+          "step": 600,
+          "type": "color"
+        },
+        "700": {
+          "value": "#9739f1",
+          "step": 700,
+          "type": "color"
+        },
+        "800": {
+          "value": "#831ae6",
+          "step": 800,
+          "type": "color"
+        },
+        "900": {
+          "value": "#6d1bbb",
+          "step": 900,
+          "type": "color"
+        }
+      },
+      "fuschia": {
+        "0": {
+          "value": "#fdecfe",
+          "step": 0,
+          "type": "color"
+        },
+        "100": {
+          "value": "#fad4fc",
+          "step": 100,
+          "type": "color"
+        },
+        "200": {
+          "value": "#f6bbfa",
+          "step": 200,
+          "type": "color"
+        },
+        "300": {
+          "value": "#f1a2f7",
+          "step": 300,
+          "type": "color"
+        },
+        "400": {
+          "value": "#ec8af3",
+          "step": 400,
+          "type": "color"
+        },
+        "500": {
+          "value": "#e56fee",
+          "step": 500,
+          "type": "color"
+        },
+        "600": {
+          "value": "#dd51e7",
+          "step": 600,
+          "type": "color"
+        },
+        "700": {
+          "value": "#d32edf",
+          "step": 700,
+          "type": "color"
+        },
+        "800": {
+          "value": "#bc21c8",
+          "step": 800,
+          "type": "color"
+        },
+        "900": {
+          "value": "#a41ead",
+          "step": 900,
+          "type": "color"
+        }
+      },
+      "pink": {
+        "0": {
+          "value": "#feecf5",
+          "step": 0,
+          "type": "color"
+        },
+        "100": {
+          "value": "#fcd4e8",
+          "step": 100,
+          "type": "color"
+        },
+        "200": {
+          "value": "#fbbcdb",
+          "step": 200,
+          "type": "color"
+        },
+        "300": {
+          "value": "#f8a5ce",
+          "step": 300,
+          "type": "color"
+        },
+        "400": {
+          "value": "#f58ac0",
+          "step": 400,
+          "type": "color"
+        },
+        "500": {
+          "value": "#f26fb0",
+          "step": 500,
+          "type": "color"
+        },
+        "600": {
+          "value": "#ee519e",
+          "step": 600,
+          "type": "color"
+        },
+        "700": {
+          "value": "#e52e89",
+          "step": 700,
+          "type": "color"
+        },
+        "800": {
+          "value": "#ce1e76",
+          "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"
+      }
+    }
+  },
+  "dark": {
+    "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": "#2db4f3",
+        "step": 500,
+        "type": "color"
+      },
+      "ok": {
+        "value": "#22c55e",
+        "step": 600,
+        "type": "color"
+      },
+      "error": {
+        "value": "#f78c8c",
+        "step": 400,
+        "type": "color"
+      },
+      "warning": {
+        "value": "#f8c570",
+        "step": 300,
+        "type": "color"
+      },
+      "info": {
+        "value": "#6099f7",
+        "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": "#2db4f3",
+        "step": 500,
+        "type": "color"
+      },
+      "ok": {
+        "value": "#22c55e",
+        "step": 600,
+        "type": "color"
+      },
+      "error": {
+        "value": "#f47171",
+        "step": 500,
+        "type": "color"
+      },
+      "warning": {
+        "value": "#f7b241",
+        "step": 400,
+        "type": "color"
+      },
+      "info": {
+        "value": "#4287f6",
+        "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": "#22c55e",
+          "step": 600,
+          "type": "color"
+        },
+        "hovered": {
+          "value": "#22c55e",
+          "step": 600,
+          "type": "color"
+        },
+        "active": {
+          "value": "#22c55e",
+          "step": 600,
+          "type": "color"
+        },
+        "focused": {
+          "value": "#22c55e",
+          "step": 600,
+          "type": "color"
+        }
+      },
+      "error": {
+        "base": {
+          "value": "#f78c8c",
+          "step": 400,
+          "type": "color"
+        },
+        "hovered": {
+          "value": "#f78c8c",
+          "step": 400,
+          "type": "color"
+        },
+        "active": {
+          "value": "#f78c8c",
+          "step": 400,
+          "type": "color"
+        },
+        "focused": {
+          "value": "#f78c8c",
+          "step": 400,
+          "type": "color"
+        }
+      },
+      "warning": {
+        "base": {
+          "value": "#f8c570",
+          "step": 300,
+          "type": "color"
+        },
+        "hovered": {
+          "value": "#f8c570",
+          "step": 300,
+          "type": "color"
+        },
+        "active": {
+          "value": "#f8c570",
+          "step": 300,
+          "type": "color"
+        },
+        "focused": {
+          "value": "#f8c570",
+          "step": 300,
+          "type": "color"
+        }
+      },
+      "info": {
+        "base": {
+          "value": "#6099f7",
+          "step": 500,
+          "type": "color"
+        },
+        "hovered": {
+          "value": "#6099f7",
+          "step": 500,
+          "type": "color"
+        },
+        "active": {
+          "value": "#6099f7",
+          "step": 500,
+          "type": "color"
+        },
+        "focused": {
+          "value": "#6099f7",
+          "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": "#23d464",
+        "step": 500,
+        "type": "color"
+      },
+      "error": {
+        "value": "#f47171",
+        "step": 500,
+        "type": "color"
+      },
+      "warning": {
+        "value": "#f59f0c",
+        "step": 500,
+        "type": "color"
+      },
+      "info": {
+        "value": "#6099f7",
+        "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": "#22c55e",
+          "step": 600,
+          "type": "color"
+        },
+        "deleted": {
+          "value": "#f78c8c",
+          "step": 400,
+          "type": "color"
+        },
+        "modified": {
+          "value": "#6099f7",
+          "step": 500,
+          "type": "color"
+        }
+      },
+      "highlight": {
+        "selection": {
+          "value": "#d0e2fd",
+          "step": 100,
+          "type": "color"
+        },
+        "occurrence": {
+          "value": "#777af4",
+          "step": 500,
+          "type": "color"
+        },
+        "activeOccurrence": {
+          "value": "#8f90f6",
+          "step": 400,
+          "type": "color"
+        },
+        "matchingBracket": {
+          "value": "#0e0e0e",
+          "step": 850,
+          "type": "color"
+        },
+        "match": {
+          "value": "#87d116",
+          "step": 500,
+          "type": "color"
+        },
+        "activeMatch": {
+          "value": "#90df17",
+          "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": "#bdf36b",
+        "type": "color"
+      },
+      "keyword": {
+        "value": "#59c3f5",
+        "type": "color"
+      },
+      "function": {
+        "value": "#fadc89",
+        "type": "color"
+      },
+      "type": {
+        "value": "#26ebd5",
+        "type": "color"
+      },
+      "variant": {
+        "value": "#26ebd5",
+        "type": "color"
+      },
+      "property": {
+        "value": "#81d2f8",
+        "type": "color"
+      },
+      "enum": {
+        "value": "#59c3f5",
+        "type": "color"
+      },
+      "operator": {
+        "value": "#59c3f5",
+        "type": "color"
+      },
+      "string": {
+        "value": "#fab78b",
+        "type": "color"
+      },
+      "number": {
+        "value": "#d5d5d5",
+        "type": "color"
+      },
+      "boolean": {
+        "value": "#d5d5d5",
+        "type": "color"
+      }
+    },
+    "player": {
+      "1": {
+        "baseColor": {
+          "value": "#4287f6",
+          "step": 600,
+          "type": "color"
+        },
+        "cursorColor": {
+          "value": "#4287f6",
+          "step": 600,
+          "type": "color"
+        },
+        "selectionColor": {
+          "value": "#d0e2fd",
+          "step": 100,
+          "type": "color"
+        },
+        "borderColor": {
+          "value": "#4287f6",
+          "step": 600,
+          "type": "color"
+        }
+      },
+      "2": {
+        "baseColor": {
+          "value": "#87d116",
+          "step": 500,
+          "type": "color"
+        },
+        "cursorColor": {
+          "value": "#87d116",
+          "step": 500,
+          "type": "color"
+        },
+        "selectionColor": {
+          "value": "#dbf9ac",
+          "step": 100,
+          "type": "color"
+        },
+        "borderColor": {
+          "value": "#87d116",
+          "step": 500,
+          "type": "color"
+        }
+      },
+      "3": {
+        "baseColor": {
+          "value": "#777af4",
+          "step": 500,
+          "type": "color"
+        },
+        "cursorColor": {
+          "value": "#777af4",
+          "step": 500,
+          "type": "color"
+        },
+        "selectionColor": {
+          "value": "#d4d5fd",
+          "step": 100,
+          "type": "color"
+        },
+        "borderColor": {
+          "value": "#777af4",
+          "step": 500,
+          "type": "color"
+        }
+      },
+      "4": {
+        "baseColor": {
+          "value": "#f98a3d",
+          "step": 500,
+          "type": "color"
+        },
+        "cursorColor": {
+          "value": "#f98a3d",
+          "step": 500,
+          "type": "color"
+        },
+        "selectionColor": {
+          "value": "#fde0cd",
+          "step": 100,
+          "type": "color"
+        },
+        "borderColor": {
+          "value": "#f98a3d",
+          "step": 500,
+          "type": "color"
+        }
+      },
+      "5": {
+        "baseColor": {
+          "value": "#b671f8",
+          "step": 500,
+          "type": "color"
+        },
+        "cursorColor": {
+          "value": "#b671f8",
+          "step": 500,
+          "type": "color"
+        },
+        "selectionColor": {
+          "value": "#e9d4fd",
+          "step": 100,
+          "type": "color"
+        },
+        "borderColor": {
+          "value": "#b671f8",
+          "step": 500,
+          "type": "color"
+        }
+      },
+      "6": {
+        "baseColor": {
+          "value": "#16ddc7",
+          "step": 400,
+          "type": "color"
+        },
+        "cursorColor": {
+          "value": "#16ddc7",
+          "step": 400,
+          "type": "color"
+        },
+        "selectionColor": {
+          "value": "#b4faf2",
+          "step": 100,
+          "type": "color"
+        },
+        "borderColor": {
+          "value": "#16ddc7",
+          "step": 400,
+          "type": "color"
+        }
+      },
+      "7": {
+        "baseColor": {
+          "value": "#f58ac0",
+          "step": 400,
+          "type": "color"
+        },
+        "cursorColor": {
+          "value": "#f58ac0",
+          "step": 400,
+          "type": "color"
+        },
+        "selectionColor": {
+          "value": "#fcd4e8",
+          "step": 100,
+          "type": "color"
+        },
+        "borderColor": {
+          "value": "#f58ac0",
+          "step": 400,
+          "type": "color"
+        }
+      },
+      "8": {
+        "baseColor": {
+          "value": "#f6bc09",
+          "step": 400,
+          "type": "color"
+        },
+        "cursorColor": {
+          "value": "#f6bc09",
+          "step": 400,
+          "type": "color"
+        },
+        "selectionColor": {
+          "value": "#fceabc",
+          "step": 100,
+          "type": "color"
+        },
+        "borderColor": {
+          "value": "#f6bc09",
+          "step": 400,
+          "type": "color"
+        }
+      }
+    },
+    "shadowAlpha": {
+      "value": 0.32,
+      "type": "number"
+    }
+  },
+  "light": {
+    "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": "#6099f7",
+        "step": 500,
+        "type": "color"
+      },
+      "ok": {
+        "value": "#23d464",
+        "step": 500,
+        "type": "color"
+      },
+      "error": {
+        "value": "#f47171",
+        "step": 500,
+        "type": "color"
+      },
+      "warning": {
+        "value": "#e5af09",
+        "step": 500,
+        "type": "color"
+      },
+      "info": {
+        "value": "#6099f7",
+        "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": "#0ea5e8",
+        "step": 600,
+        "type": "color"
+      },
+      "ok": {
+        "value": "#22c55e",
+        "step": 600,
+        "type": "color"
+      },
+      "error": {
+        "value": "#f15252",
+        "step": 600,
+        "type": "color"
+      },
+      "warning": {
+        "value": "#f6bc09",
+        "step": 400,
+        "type": "color"
+      },
+      "info": {
+        "value": "#4287f6",
+        "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": "#befad2",
+          "step": 100,
+          "type": "color"
+        },
+        "hovered": {
+          "value": "#befad2",
+          "step": 100,
+          "type": "color"
+        },
+        "active": {
+          "value": "#befad2",
+          "step": 100,
+          "type": "color"
+        },
+        "focused": {
+          "value": "#befad2",
+          "step": 100,
+          "type": "color"
+        }
+      },
+      "error": {
+        "base": {
+          "value": "#fdd4d4",
+          "step": 100,
+          "type": "color"
+        },
+        "hovered": {
+          "value": "#fdd4d4",
+          "step": 100,
+          "type": "color"
+        },
+        "active": {
+          "value": "#fdd4d4",
+          "step": 100,
+          "type": "color"
+        },
+        "focused": {
+          "value": "#fdd4d4",
+          "step": 100,
+          "type": "color"
+        }
+      },
+      "warning": {
+        "base": {
+          "value": "#fceabc",
+          "step": 100,
+          "type": "color"
+        },
+        "hovered": {
+          "value": "#fceabc",
+          "step": 100,
+          "type": "color"
+        },
+        "active": {
+          "value": "#fceabc",
+          "step": 100,
+          "type": "color"
+        },
+        "focused": {
+          "value": "#fceabc",
+          "step": 100,
+          "type": "color"
+        }
+      },
+      "info": {
+        "base": {
+          "value": "#d0e2fd",
+          "step": 100,
+          "type": "color"
+        },
+        "hovered": {
+          "value": "#d0e2fd",
+          "step": 100,
+          "type": "color"
+        },
+        "active": {
+          "value": "#d0e2fd",
+          "step": 100,
+          "type": "color"
+        },
+        "focused": {
+          "value": "#d0e2fd",
+          "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": "#8ff4b2",
+        "step": 200,
+        "type": "color"
+      },
+      "error": {
+        "value": "#fbbdbd",
+        "step": 200,
+        "type": "color"
+      },
+      "warning": {
+        "value": "#fadc89",
+        "step": 200,
+        "type": "color"
+      },
+      "info": {
+        "value": "#b4cffb",
+        "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": "#befad2",
+          "step": 100,
+          "type": "color"
+        },
+        "deleted": {
+          "value": "#fdd4d4",
+          "step": 100,
+          "type": "color"
+        },
+        "modified": {
+          "value": "#d0e2fd",
+          "step": 100,
+          "type": "color"
+        }
+      },
+      "highlight": {
+        "selection": {
+          "value": "#d0e2fd",
+          "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": "#bdf36b",
+        "type": "color"
+      },
+      "keyword": {
+        "value": "#59c3f5",
+        "type": "color"
+      },
+      "function": {
+        "value": "#fadc89",
+        "type": "color"
+      },
+      "type": {
+        "value": "#26ebd5",
+        "type": "color"
+      },
+      "variant": {
+        "value": "#26ebd5",
+        "type": "color"
+      },
+      "property": {
+        "value": "#81d2f8",
+        "type": "color"
+      },
+      "enum": {
+        "value": "#59c3f5",
+        "type": "color"
+      },
+      "operator": {
+        "value": "#59c3f5",
+        "type": "color"
+      },
+      "string": {
+        "value": "#fab78b",
+        "type": "color"
+      },
+      "number": {
+        "value": "#d5d5d5",
+        "type": "color"
+      },
+      "boolean": {
+        "value": "#d5d5d5",
+        "type": "color"
+      }
+    },
+    "player": {
+      "1": {
+        "baseColor": {
+          "value": "#4287f6",
+          "step": 600,
+          "type": "color"
+        },
+        "cursorColor": {
+          "value": "#6099f7",
+          "step": 500,
+          "type": "color"
+        },
+        "selectionColor": {
+          "value": "#d0e2fd",
+          "step": 100,
+          "type": "color"
+        },
+        "borderColor": {
+          "value": "#6099f7",
+          "step": 500,
+          "type": "color"
+        }
+      },
+      "2": {
+        "baseColor": {
+          "value": "#87d116",
+          "step": 500,
+          "type": "color"
+        },
+        "cursorColor": {
+          "value": "#87d116",
+          "step": 500,
+          "type": "color"
+        },
+        "selectionColor": {
+          "value": "#dbf9ac",
+          "step": 100,
+          "type": "color"
+        },
+        "borderColor": {
+          "value": "#87d116",
+          "step": 500,
+          "type": "color"
+        }
+      },
+      "3": {
+        "baseColor": {
+          "value": "#777af4",
+          "step": 500,
+          "type": "color"
+        },
+        "cursorColor": {
+          "value": "#777af4",
+          "step": 500,
+          "type": "color"
+        },
+        "selectionColor": {
+          "value": "#d4d5fd",
+          "step": 100,
+          "type": "color"
+        },
+        "borderColor": {
+          "value": "#777af4",
+          "step": 500,
+          "type": "color"
+        }
+      },
+      "4": {
+        "baseColor": {
+          "value": "#f98a3d",
+          "step": 500,
+          "type": "color"
+        },
+        "cursorColor": {
+          "value": "#f98a3d",
+          "step": 500,
+          "type": "color"
+        },
+        "selectionColor": {
+          "value": "#fde0cd",
+          "step": 100,
+          "type": "color"
+        },
+        "borderColor": {
+          "value": "#f98a3d",
+          "step": 500,
+          "type": "color"
+        }
+      },
+      "5": {
+        "baseColor": {
+          "value": "#b671f8",
+          "step": 500,
+          "type": "color"
+        },
+        "cursorColor": {
+          "value": "#b671f8",
+          "step": 500,
+          "type": "color"
+        },
+        "selectionColor": {
+          "value": "#e9d4fd",
+          "step": 100,
+          "type": "color"
+        },
+        "borderColor": {
+          "value": "#b671f8",
+          "step": 500,
+          "type": "color"
+        }
+      },
+      "6": {
+        "baseColor": {
+          "value": "#16ddc7",
+          "step": 400,
+          "type": "color"
+        },
+        "cursorColor": {
+          "value": "#16ddc7",
+          "step": 400,
+          "type": "color"
+        },
+        "selectionColor": {
+          "value": "#b4faf2",
+          "step": 100,
+          "type": "color"
+        },
+        "borderColor": {
+          "value": "#16ddc7",
+          "step": 400,
+          "type": "color"
+        }
+      },
+      "7": {
+        "baseColor": {
+          "value": "#f58ac0",
+          "step": 400,
+          "type": "color"
+        },
+        "cursorColor": {
+          "value": "#f58ac0",
+          "step": 400,
+          "type": "color"
+        },
+        "selectionColor": {
+          "value": "#fcd4e8",
+          "step": 100,
+          "type": "color"
+        },
+        "borderColor": {
+          "value": "#f58ac0",
+          "step": 400,
+          "type": "color"
+        }
+      },
+      "8": {
+        "baseColor": {
+          "value": "#f6bc09",
+          "step": 400,
+          "type": "color"
+        },
+        "cursorColor": {
+          "value": "#f6bc09",
+          "step": 400,
+          "type": "color"
+        },
+        "selectionColor": {
+          "value": "#fceabc",
+          "step": 100,
+          "type": "color"
+        },
+        "borderColor": {
+          "value": "#f6bc09",
+          "step": 400,
+          "type": "color"
+        }
+      }
+    },
+    "shadowAlpha": {
+      "value": 0.12,
+      "type": "number"
+    }
+  }
+}