diff --git a/styles/dist/core.json b/styles/dist/core.json
index f44b1d210c..6540c809ac 100644
--- a/styles/dist/core.json
+++ b/styles/dist/core.json
@@ -3,1071 +3,1071 @@
     "neutral": {
       "0": {
         "value": "#ffffff",
-        "step": 0,
+        "description": "Step: 0",
         "type": "color"
       },
       "25": {
         "value": "#f8f8f8",
-        "step": 25,
+        "description": "Step: 25",
         "type": "color"
       },
       "50": {
         "value": "#f1f1f1",
-        "step": 50,
+        "description": "Step: 50",
         "type": "color"
       },
       "75": {
         "value": "#eaeaea",
-        "step": 75,
+        "description": "Step: 75",
         "type": "color"
       },
       "100": {
         "value": "#e3e3e3",
-        "step": 100,
+        "description": "Step: 100",
         "type": "color"
       },
       "125": {
         "value": "#dcdcdc",
-        "step": 125,
+        "description": "Step: 125",
         "type": "color"
       },
       "150": {
         "value": "#d5d5d5",
-        "step": 150,
+        "description": "Step: 150",
         "type": "color"
       },
       "175": {
         "value": "#cdcdcd",
-        "step": 175,
+        "description": "Step: 175",
         "type": "color"
       },
       "200": {
         "value": "#c6c6c6",
-        "step": 200,
+        "description": "Step: 200",
         "type": "color"
       },
       "225": {
         "value": "#bfbfbf",
-        "step": 225,
+        "description": "Step: 225",
         "type": "color"
       },
       "250": {
         "value": "#b8b8b8",
-        "step": 250,
+        "description": "Step: 250",
         "type": "color"
       },
       "275": {
         "value": "#b1b1b1",
-        "step": 275,
+        "description": "Step: 275",
         "type": "color"
       },
       "300": {
         "value": "#aaaaaa",
-        "step": 300,
+        "description": "Step: 300",
         "type": "color"
       },
       "325": {
         "value": "#a3a3a3",
-        "step": 325,
+        "description": "Step: 325",
         "type": "color"
       },
       "350": {
         "value": "#9c9c9c",
-        "step": 350,
+        "description": "Step: 350",
         "type": "color"
       },
       "375": {
         "value": "#959595",
-        "step": 375,
+        "description": "Step: 375",
         "type": "color"
       },
       "400": {
         "value": "#8e8e8e",
-        "step": 400,
+        "description": "Step: 400",
         "type": "color"
       },
       "425": {
         "value": "#878787",
-        "step": 425,
+        "description": "Step: 425",
         "type": "color"
       },
       "450": {
         "value": "#808080",
-        "step": 450,
+        "description": "Step: 450",
         "type": "color"
       },
       "475": {
         "value": "#787878",
-        "step": 475,
+        "description": "Step: 475",
         "type": "color"
       },
       "500": {
         "value": "#717171",
-        "step": 500,
+        "description": "Step: 500",
         "type": "color"
       },
       "525": {
         "value": "#6a6a6a",
-        "step": 525,
+        "description": "Step: 525",
         "type": "color"
       },
       "550": {
         "value": "#636363",
-        "step": 550,
+        "description": "Step: 550",
         "type": "color"
       },
       "575": {
         "value": "#5c5c5c",
-        "step": 575,
+        "description": "Step: 575",
         "type": "color"
       },
       "600": {
         "value": "#555555",
-        "step": 600,
+        "description": "Step: 600",
         "type": "color"
       },
       "625": {
         "value": "#4e4e4e",
-        "step": 625,
+        "description": "Step: 625",
         "type": "color"
       },
       "650": {
         "value": "#474747",
-        "step": 650,
+        "description": "Step: 650",
         "type": "color"
       },
       "675": {
         "value": "#404040",
-        "step": 675,
+        "description": "Step: 675",
         "type": "color"
       },
       "700": {
         "value": "#393939",
-        "step": 700,
+        "description": "Step: 700",
         "type": "color"
       },
       "725": {
         "value": "#323232",
-        "step": 725,
+        "description": "Step: 725",
         "type": "color"
       },
       "750": {
         "value": "#2b2b2b",
-        "step": 750,
+        "description": "Step: 750",
         "type": "color"
       },
       "775": {
         "value": "#232323",
-        "step": 775,
+        "description": "Step: 775",
         "type": "color"
       },
       "800": {
         "value": "#1c1c1c",
-        "step": 800,
+        "description": "Step: 800",
         "type": "color"
       },
       "825": {
         "value": "#151515",
-        "step": 825,
+        "description": "Step: 825",
         "type": "color"
       },
       "850": {
         "value": "#0e0e0e",
-        "step": 850,
+        "description": "Step: 850",
         "type": "color"
       },
       "875": {
         "value": "#070707",
-        "step": 875,
+        "description": "Step: 875",
         "type": "color"
       },
       "900": {
         "value": "#000000",
-        "step": 900,
+        "description": "Step: 900",
         "type": "color"
       }
     },
     "rose": {
       "0": {
         "value": "#feecef",
-        "step": 0,
+        "description": "Step: 0",
         "type": "color"
       },
       "100": {
         "value": "#fcc5cf",
-        "step": 100,
+        "description": "Step: 100",
         "type": "color"
       },
       "200": {
         "value": "#fa9fae",
-        "step": 200,
+        "description": "Step: 200",
         "type": "color"
       },
       "300": {
         "value": "#f8788e",
-        "step": 300,
+        "description": "Step: 300",
         "type": "color"
       },
       "400": {
         "value": "#f5526e",
-        "step": 400,
+        "description": "Step: 400",
         "type": "color"
       },
       "500": {
         "value": "#f0284a",
-        "step": 500,
+        "description": "Step: 500",
         "type": "color"
       },
       "600": {
         "value": "#cd1434",
-        "step": 600,
+        "description": "Step: 600",
         "type": "color"
       },
       "700": {
         "value": "#97142a",
-        "step": 700,
+        "description": "Step: 700",
         "type": "color"
       },
       "800": {
         "value": "#64101e",
-        "step": 800,
+        "description": "Step: 800",
         "type": "color"
       },
       "900": {
         "value": "#330a11",
-        "step": 900,
+        "description": "Step: 900",
         "type": "color"
       }
     },
     "red": {
       "0": {
         "value": "#feecec",
-        "step": 0,
+        "description": "Step: 0",
         "type": "color"
       },
       "100": {
         "value": "#fcc6c6",
-        "step": 100,
+        "description": "Step: 100",
         "type": "color"
       },
       "200": {
         "value": "#f9a0a0",
-        "step": 200,
+        "description": "Step: 200",
         "type": "color"
       },
       "300": {
         "value": "#f57b7b",
-        "step": 300,
+        "description": "Step: 300",
         "type": "color"
       },
       "400": {
         "value": "#f15656",
-        "step": 400,
+        "description": "Step: 400",
         "type": "color"
       },
       "500": {
         "value": "#eb2d2d",
-        "step": 500,
+        "description": "Step: 500",
         "type": "color"
       },
       "600": {
         "value": "#c91818",
-        "step": 600,
+        "description": "Step: 600",
         "type": "color"
       },
       "700": {
         "value": "#951515",
-        "step": 700,
+        "description": "Step: 700",
         "type": "color"
       },
       "800": {
         "value": "#631111",
-        "step": 800,
+        "description": "Step: 800",
         "type": "color"
       },
       "900": {
         "value": "#330a0a",
-        "step": 900,
+        "description": "Step: 900",
         "type": "color"
       }
     },
     "orange": {
       "0": {
         "value": "#fef3ec",
-        "step": 0,
+        "description": "Step: 0",
         "type": "color"
       },
       "100": {
         "value": "#fcd6bd",
-        "step": 100,
+        "description": "Step: 100",
         "type": "color"
       },
       "200": {
         "value": "#fab98e",
-        "step": 200,
+        "description": "Step: 200",
         "type": "color"
       },
       "300": {
         "value": "#f99d5f",
-        "step": 300,
+        "description": "Step: 300",
         "type": "color"
       },
       "400": {
         "value": "#f9812e",
-        "step": 400,
+        "description": "Step: 400",
         "type": "color"
       },
       "500": {
         "value": "#ee670a",
-        "step": 500,
+        "description": "Step: 500",
         "type": "color"
       },
       "600": {
         "value": "#bb550e",
-        "step": 600,
+        "description": "Step: 600",
         "type": "color"
       },
       "700": {
         "value": "#8b4210",
-        "step": 700,
+        "description": "Step: 700",
         "type": "color"
       },
       "800": {
         "value": "#5d2f0e",
-        "step": 800,
+        "description": "Step: 800",
         "type": "color"
       },
       "900": {
         "value": "#331b0a",
-        "step": 900,
+        "description": "Step: 900",
         "type": "color"
       }
     },
     "amber": {
       "0": {
         "value": "#fef7ec",
-        "step": 0,
+        "description": "Step: 0",
         "type": "color"
       },
       "100": {
         "value": "#fce2ba",
-        "step": 100,
+        "description": "Step: 100",
         "type": "color"
       },
       "200": {
         "value": "#f9ce89",
-        "step": 200,
+        "description": "Step: 200",
         "type": "color"
       },
       "300": {
         "value": "#f7bb57",
-        "step": 300,
+        "description": "Step: 300",
         "type": "color"
       },
       "400": {
         "value": "#f6a724",
-        "step": 400,
+        "description": "Step: 400",
         "type": "color"
       },
       "500": {
         "value": "#de900c",
-        "step": 500,
+        "description": "Step: 500",
         "type": "color"
       },
       "600": {
         "value": "#b0740f",
-        "step": 600,
+        "description": "Step: 600",
         "type": "color"
       },
       "700": {
         "value": "#845910",
-        "step": 700,
+        "description": "Step: 700",
         "type": "color"
       },
       "800": {
         "value": "#5a3e0e",
-        "step": 800,
+        "description": "Step: 800",
         "type": "color"
       },
       "900": {
         "value": "#33240a",
-        "step": 900,
+        "description": "Step: 900",
         "type": "color"
       }
     },
     "yellow": {
       "0": {
         "value": "#fef9ec",
-        "step": 0,
+        "description": "Step: 0",
         "type": "color"
       },
       "100": {
         "value": "#fce9b7",
-        "step": 100,
+        "description": "Step: 100",
         "type": "color"
       },
       "200": {
         "value": "#f9da82",
-        "step": 200,
+        "description": "Step: 200",
         "type": "color"
       },
       "300": {
         "value": "#f8cc4d",
-        "step": 300,
+        "description": "Step: 300",
         "type": "color"
       },
       "400": {
         "value": "#f7bf17",
-        "step": 400,
+        "description": "Step: 400",
         "type": "color"
       },
       "500": {
         "value": "#d3a20b",
-        "step": 500,
+        "description": "Step: 500",
         "type": "color"
       },
       "600": {
         "value": "#a8820e",
-        "step": 600,
+        "description": "Step: 600",
         "type": "color"
       },
       "700": {
         "value": "#7e630f",
-        "step": 700,
+        "description": "Step: 700",
         "type": "color"
       },
       "800": {
         "value": "#58460e",
-        "step": 800,
+        "description": "Step: 800",
         "type": "color"
       },
       "900": {
         "value": "#33290a",
-        "step": 900,
+        "description": "Step: 900",
         "type": "color"
       }
     },
     "lime": {
       "0": {
         "value": "#f7feec",
-        "step": 0,
+        "description": "Step: 0",
         "type": "color"
       },
       "100": {
         "value": "#dffab5",
-        "step": 100,
+        "description": "Step: 100",
         "type": "color"
       },
       "200": {
         "value": "#c7f57f",
-        "step": 200,
+        "description": "Step: 200",
         "type": "color"
       },
       "300": {
         "value": "#aeef4b",
-        "step": 300,
+        "description": "Step: 300",
         "type": "color"
       },
       "400": {
         "value": "#96e818",
-        "step": 400,
+        "description": "Step: 400",
         "type": "color"
       },
       "500": {
         "value": "#79ba16",
-        "step": 500,
+        "description": "Step: 500",
         "type": "color"
       },
       "600": {
         "value": "#639714",
-        "step": 600,
+        "description": "Step: 600",
         "type": "color"
       },
       "700": {
         "value": "#4e7412",
-        "step": 700,
+        "description": "Step: 700",
         "type": "color"
       },
       "800": {
         "value": "#38530f",
-        "step": 800,
+        "description": "Step: 800",
         "type": "color"
       },
       "900": {
         "value": "#23330a",
-        "step": 900,
+        "description": "Step: 900",
         "type": "color"
       }
     },
     "green": {
       "0": {
         "value": "#ecfef2",
-        "step": 0,
+        "description": "Step: 0",
         "type": "color"
       },
       "100": {
         "value": "#b7f9ce",
-        "step": 100,
+        "description": "Step: 100",
         "type": "color"
       },
       "200": {
         "value": "#84f2ab",
-        "step": 200,
+        "description": "Step: 200",
         "type": "color"
       },
       "300": {
         "value": "#54e989",
-        "step": 300,
+        "description": "Step: 300",
         "type": "color"
       },
       "400": {
         "value": "#27dd69",
-        "step": 400,
+        "description": "Step: 400",
         "type": "color"
       },
       "500": {
         "value": "#20b456",
-        "step": 500,
+        "description": "Step: 500",
         "type": "color"
       },
       "600": {
         "value": "#1b9447",
-        "step": 600,
+        "description": "Step: 600",
         "type": "color"
       },
       "700": {
         "value": "#157338",
-        "step": 700,
+        "description": "Step: 700",
         "type": "color"
       },
       "800": {
         "value": "#105328",
-        "step": 800,
+        "description": "Step: 800",
         "type": "color"
       },
       "900": {
         "value": "#0a3319",
-        "step": 900,
+        "description": "Step: 900",
         "type": "color"
       }
     },
     "emerald": {
       "0": {
         "value": "#ecfef8",
-        "step": 0,
+        "description": "Step: 0",
         "type": "color"
       },
       "100": {
         "value": "#b0fae1",
-        "step": 100,
+        "description": "Step: 100",
         "type": "color"
       },
       "200": {
         "value": "#74f6cb",
-        "step": 200,
+        "description": "Step: 200",
         "type": "color"
       },
       "300": {
         "value": "#39f0b3",
-        "step": 300,
+        "description": "Step: 300",
         "type": "color"
       },
       "400": {
         "value": "#12d796",
-        "step": 400,
+        "description": "Step: 400",
         "type": "color"
       },
       "500": {
         "value": "#10a977",
-        "step": 500,
+        "description": "Step: 500",
         "type": "color"
       },
       "600": {
         "value": "#118a62",
-        "step": 600,
+        "description": "Step: 600",
         "type": "color"
       },
       "700": {
         "value": "#106c4e",
-        "step": 700,
+        "description": "Step: 700",
         "type": "color"
       },
       "800": {
         "value": "#0d4f3a",
-        "step": 800,
+        "description": "Step: 800",
         "type": "color"
       },
       "900": {
         "value": "#0a3326",
-        "step": 900,
+        "description": "Step: 900",
         "type": "color"
       }
     },
     "teal": {
       "0": {
         "value": "#ecfefc",
-        "step": 0,
+        "description": "Step: 0",
         "type": "color"
       },
       "100": {
         "value": "#b1faf2",
-        "step": 100,
+        "description": "Step: 100",
         "type": "color"
       },
       "200": {
         "value": "#76f5e7",
-        "step": 200,
+        "description": "Step: 200",
         "type": "color"
       },
       "300": {
         "value": "#3eeeda",
-        "step": 300,
+        "description": "Step: 300",
         "type": "color"
       },
       "400": {
         "value": "#16d6c1",
-        "step": 400,
+        "description": "Step: 400",
         "type": "color"
       },
       "500": {
         "value": "#14a898",
-        "step": 500,
+        "description": "Step: 500",
         "type": "color"
       },
       "600": {
         "value": "#138a7d",
-        "step": 600,
+        "description": "Step: 600",
         "type": "color"
       },
       "700": {
         "value": "#116c62",
-        "step": 700,
+        "description": "Step: 700",
         "type": "color"
       },
       "800": {
         "value": "#0e4f48",
-        "step": 800,
+        "description": "Step: 800",
         "type": "color"
       },
       "900": {
         "value": "#0a332f",
-        "step": 900,
+        "description": "Step: 900",
         "type": "color"
       }
     },
     "cyan": {
       "0": {
         "value": "#ecfcfe",
-        "step": 0,
+        "description": "Step: 0",
         "type": "color"
       },
       "100": {
         "value": "#b2f3fb",
-        "step": 100,
+        "description": "Step: 100",
         "type": "color"
       },
       "200": {
         "value": "#78eaf9",
-        "step": 200,
+        "description": "Step: 200",
         "type": "color"
       },
       "300": {
         "value": "#3de2f8",
-        "step": 300,
+        "description": "Step: 300",
         "type": "color"
       },
       "400": {
         "value": "#07d5f1",
-        "step": 400,
+        "description": "Step: 400",
         "type": "color"
       },
       "500": {
         "value": "#09aac0",
-        "step": 500,
+        "description": "Step: 500",
         "type": "color"
       },
       "600": {
         "value": "#0c8a9a",
-        "step": 600,
+        "description": "Step: 600",
         "type": "color"
       },
       "700": {
         "value": "#0e6a75",
-        "step": 700,
+        "description": "Step: 700",
         "type": "color"
       },
       "800": {
         "value": "#0d4c53",
-        "step": 800,
+        "description": "Step: 800",
         "type": "color"
       },
       "900": {
         "value": "#0a2f33",
-        "step": 900,
+        "description": "Step: 900",
         "type": "color"
       }
     },
     "sky": {
       "0": {
         "value": "#ecf8fe",
-        "step": 0,
+        "description": "Step: 0",
         "type": "color"
       },
       "100": {
         "value": "#b9e5fb",
-        "step": 100,
+        "description": "Step: 100",
         "type": "color"
       },
       "200": {
         "value": "#86d3f8",
-        "step": 200,
+        "description": "Step: 200",
         "type": "color"
       },
       "300": {
         "value": "#53c1f5",
-        "step": 300,
+        "description": "Step: 300",
         "type": "color"
       },
       "400": {
         "value": "#20b0f2",
-        "step": 400,
+        "description": "Step: 400",
         "type": "color"
       },
       "500": {
         "value": "#1096d3",
-        "step": 500,
+        "description": "Step: 500",
         "type": "color"
       },
       "600": {
         "value": "#1179a8",
-        "step": 600,
+        "description": "Step: 600",
         "type": "color"
       },
       "700": {
         "value": "#115c7f",
-        "step": 700,
+        "description": "Step: 700",
         "type": "color"
       },
       "800": {
         "value": "#0e4158",
-        "step": 800,
+        "description": "Step: 800",
         "type": "color"
       },
       "900": {
         "value": "#0a2633",
-        "step": 900,
+        "description": "Step: 900",
         "type": "color"
       }
     },
     "blue": {
       "0": {
         "value": "#ecf3fe",
-        "step": 0,
+        "description": "Step: 0",
         "type": "color"
       },
       "100": {
         "value": "#c5dafc",
-        "step": 100,
+        "description": "Step: 100",
         "type": "color"
       },
       "200": {
         "value": "#9ec1fa",
-        "step": 200,
+        "description": "Step: 200",
         "type": "color"
       },
       "300": {
         "value": "#76a8f8",
-        "step": 300,
+        "description": "Step: 300",
         "type": "color"
       },
       "400": {
         "value": "#4f8ff7",
-        "step": 400,
+        "description": "Step: 400",
         "type": "color"
       },
       "500": {
         "value": "#2472f2",
-        "step": 500,
+        "description": "Step: 500",
         "type": "color"
       },
       "600": {
         "value": "#135acd",
-        "step": 600,
+        "description": "Step: 600",
         "type": "color"
       },
       "700": {
         "value": "#134697",
-        "step": 700,
+        "description": "Step: 700",
         "type": "color"
       },
       "800": {
         "value": "#103063",
-        "step": 800,
+        "description": "Step: 800",
         "type": "color"
       },
       "900": {
         "value": "#0a1a33",
-        "step": 900,
+        "description": "Step: 900",
         "type": "color"
       }
     },
     "indigo": {
       "0": {
         "value": "#ececfe",
-        "step": 0,
+        "description": "Step: 0",
         "type": "color"
       },
       "100": {
         "value": "#cdcdfc",
-        "step": 100,
+        "description": "Step: 100",
         "type": "color"
       },
       "200": {
         "value": "#aeaff9",
-        "step": 200,
+        "description": "Step: 200",
         "type": "color"
       },
       "300": {
         "value": "#9091f6",
-        "step": 300,
+        "description": "Step: 300",
         "type": "color"
       },
       "400": {
         "value": "#7274f3",
-        "step": 400,
+        "description": "Step: 400",
         "type": "color"
       },
       "500": {
         "value": "#484bed",
-        "step": 500,
+        "description": "Step: 500",
         "type": "color"
       },
       "600": {
         "value": "#1b1edc",
-        "step": 600,
+        "description": "Step: 600",
         "type": "color"
       },
       "700": {
         "value": "#1819a1",
-        "step": 700,
+        "description": "Step: 700",
         "type": "color"
       },
       "800": {
         "value": "#121269",
-        "step": 800,
+        "description": "Step: 800",
         "type": "color"
       },
       "900": {
         "value": "#0a0a33",
-        "step": 900,
+        "description": "Step: 900",
         "type": "color"
       }
     },
     "violet": {
       "0": {
         "value": "#f1ecfe",
-        "step": 0,
+        "description": "Step: 0",
         "type": "color"
       },
       "100": {
         "value": "#daccfc",
-        "step": 100,
+        "description": "Step: 100",
         "type": "color"
       },
       "200": {
         "value": "#c3acfb",
-        "step": 200,
+        "description": "Step: 200",
         "type": "color"
       },
       "300": {
         "value": "#ac8cf9",
-        "step": 300,
+        "description": "Step: 300",
         "type": "color"
       },
       "400": {
         "value": "#966cf7",
-        "step": 400,
+        "description": "Step: 400",
         "type": "color"
       },
       "500": {
         "value": "#7741f2",
-        "step": 500,
+        "description": "Step: 500",
         "type": "color"
       },
       "600": {
         "value": "#5316e0",
-        "step": 600,
+        "description": "Step: 600",
         "type": "color"
       },
       "700": {
         "value": "#3f15a3",
-        "step": 700,
+        "description": "Step: 700",
         "type": "color"
       },
       "800": {
         "value": "#2b116a",
-        "step": 800,
+        "description": "Step: 800",
         "type": "color"
       },
       "900": {
         "value": "#160a33",
-        "step": 900,
+        "description": "Step: 900",
         "type": "color"
       }
     },
     "purple": {
       "0": {
         "value": "#f5ecfe",
-        "step": 0,
+        "description": "Step: 0",
         "type": "color"
       },
       "100": {
         "value": "#e4cbfc",
-        "step": 100,
+        "description": "Step: 100",
         "type": "color"
       },
       "200": {
         "value": "#d2a9fb",
-        "step": 200,
+        "description": "Step: 200",
         "type": "color"
       },
       "300": {
         "value": "#c188f9",
-        "step": 300,
+        "description": "Step: 300",
         "type": "color"
       },
       "400": {
         "value": "#b066f8",
-        "step": 400,
+        "description": "Step: 400",
         "type": "color"
       },
       "500": {
         "value": "#993bf3",
-        "step": 500,
+        "description": "Step: 500",
         "type": "color"
       },
       "600": {
         "value": "#7b14dd",
-        "step": 600,
+        "description": "Step: 600",
         "type": "color"
       },
       "700": {
         "value": "#5c14a1",
-        "step": 700,
+        "description": "Step: 700",
         "type": "color"
       },
       "800": {
         "value": "#3e1169",
-        "step": 800,
+        "description": "Step: 800",
         "type": "color"
       },
       "900": {
         "value": "#1f0a33",
-        "step": 900,
+        "description": "Step: 900",
         "type": "color"
       }
     },
     "fuschia": {
       "0": {
         "value": "#fdecfe",
-        "step": 0,
+        "description": "Step: 0",
         "type": "color"
       },
       "100": {
         "value": "#f8c5fb",
-        "step": 100,
+        "description": "Step: 100",
         "type": "color"
       },
       "200": {
         "value": "#f19ff6",
-        "step": 200,
+        "description": "Step: 200",
         "type": "color"
       },
       "300": {
         "value": "#e87af0",
-        "step": 300,
+        "description": "Step: 300",
         "type": "color"
       },
       "400": {
         "value": "#de57e8",
-        "step": 400,
+        "description": "Step: 400",
         "type": "color"
       },
       "500": {
         "value": "#d430e0",
-        "step": 500,
+        "description": "Step: 500",
         "type": "color"
       },
       "600": {
         "value": "#b31fbc",
-        "step": 600,
+        "description": "Step: 600",
         "type": "color"
       },
       "700": {
         "value": "#87198e",
-        "step": 700,
+        "description": "Step: 700",
         "type": "color"
       },
       "800": {
         "value": "#5c1260",
-        "step": 800,
+        "description": "Step: 800",
         "type": "color"
       },
       "900": {
         "value": "#310a33",
-        "step": 900,
+        "description": "Step: 900",
         "type": "color"
       }
     },
     "pink": {
       "0": {
         "value": "#feecf5",
-        "step": 0,
+        "description": "Step: 0",
         "type": "color"
       },
       "100": {
         "value": "#fbc6e1",
-        "step": 100,
+        "description": "Step: 100",
         "type": "color"
       },
       "200": {
         "value": "#f8a1cc",
-        "step": 200,
+        "description": "Step: 200",
         "type": "color"
       },
       "300": {
         "value": "#f47db8",
-        "step": 300,
+        "description": "Step: 300",
         "type": "color"
       },
       "400": {
         "value": "#ef59a3",
-        "step": 400,
+        "description": "Step: 400",
         "type": "color"
       },
       "500": {
         "value": "#e8318c",
-        "step": 500,
+        "description": "Step: 500",
         "type": "color"
       },
       "600": {
         "value": "#c71a71",
-        "step": 600,
+        "description": "Step: 600",
         "type": "color"
       },
       "700": {
         "value": "#941756",
-        "step": 700,
+        "description": "Step: 700",
         "type": "color"
       },
       "800": {
         "value": "#63113b",
-        "step": 800,
+        "description": "Step: 800",
         "type": "color"
       },
       "900": {
         "value": "#330a1f",
-        "step": 900,
+        "description": "Step: 900",
         "type": "color"
       }
     }
@@ -1123,6 +1123,32 @@
     }
   },
   "size": {
+    "px": {
+      "value": 1,
+      "type": "size"
+    },
+    "xs": {
+      "value": 2,
+      "type": "size"
+    },
+    "sm": {
+      "value": 4,
+      "type": "size"
+    },
+    "md": {
+      "value": 6,
+      "type": "size"
+    },
+    "lg": {
+      "value": 8,
+      "type": "size"
+    },
+    "xl": {
+      "value": 12,
+      "type": "size"
+    }
+  },
+  "fontSize": {
     "3xs": {
       "value": 8,
       "type": "fontSize"
diff --git a/styles/dist/dark.json b/styles/dist/dark.json
index 872e1d1280..f67b429404 100644
--- a/styles/dist/dark.json
+++ b/styles/dist/dark.json
@@ -5,104 +5,104 @@
   "text": {
     "primary": {
       "value": "#f1f1f1",
-      "step": 50,
+      "description": "Step: 50",
       "type": "color"
     },
     "secondary": {
       "value": "#9c9c9c",
-      "step": 350,
+      "description": "Step: 350",
       "type": "color"
     },
     "muted": {
       "value": "#808080",
-      "step": 450,
+      "description": "Step: 450",
       "type": "color"
     },
     "placeholder": {
       "value": "#474747",
-      "step": 650,
+      "description": "Step: 650",
       "type": "color"
     },
     "active": {
       "value": "#ffffff",
-      "step": 0,
+      "description": "Step: 0",
       "type": "color"
     },
     "feature": {
       "value": "#4f8ff7",
-      "step": 400,
+      "description": "Step: 400",
       "type": "color"
     },
     "ok": {
       "value": "#1b9447",
-      "step": 600,
+      "description": "Step: 600",
       "type": "color"
     },
     "error": {
       "value": "#f15656",
-      "step": 400,
+      "description": "Step: 400",
       "type": "color"
     },
     "warning": {
       "value": "#f7bb57",
-      "step": 300,
+      "description": "Step: 300",
       "type": "color"
     },
     "info": {
       "value": "#2472f2",
-      "step": 500,
+      "description": "Step: 500",
       "type": "color"
     }
   },
   "icon": {
     "primary": {
       "value": "#c6c6c6",
-      "step": 200,
+      "description": "Step: 200",
       "type": "color"
     },
     "secondary": {
       "value": "#9c9c9c",
-      "step": 350,
+      "description": "Step: 350",
       "type": "color"
     },
     "muted": {
       "value": "#555555",
-      "step": 600,
+      "description": "Step: 600",
       "type": "color"
     },
     "placeholder": {
       "value": "#393939",
-      "step": 700,
+      "description": "Step: 700",
       "type": "color"
     },
     "active": {
       "value": "#ffffff",
-      "step": 0,
+      "description": "Step: 0",
       "type": "color"
     },
     "feature": {
       "value": "#2472f2",
-      "step": 500,
+      "description": "Step: 500",
       "type": "color"
     },
     "ok": {
       "value": "#1b9447",
-      "step": 600,
+      "description": "Step: 600",
       "type": "color"
     },
     "error": {
       "value": "#eb2d2d",
-      "step": 500,
+      "description": "Step: 500",
       "type": "color"
     },
     "warning": {
       "value": "#f6a724",
-      "step": 400,
+      "description": "Step: 400",
       "type": "color"
     },
     "info": {
       "value": "#135acd",
-      "step": 600,
+      "description": "Step: 600",
       "type": "color"
     }
   },
@@ -110,198 +110,198 @@
     "100": {
       "base": {
         "value": "#2b2b2b",
-        "step": 750,
+        "description": "Step: 750",
         "type": "color"
       },
       "hovered": {
         "value": "#323232",
-        "step": 725,
+        "description": "Step: 725",
         "type": "color"
       },
       "active": {
         "value": "#1c1c1c",
-        "step": 800,
+        "description": "Step: 800",
         "type": "color"
       },
       "focused": {
         "value": "#404040",
-        "step": 675,
+        "description": "Step: 675",
         "type": "color"
       }
     },
     "300": {
       "base": {
         "value": "#1c1c1c",
-        "step": 800,
+        "description": "Step: 800",
         "type": "color"
       },
       "hovered": {
         "value": "#232323",
-        "step": 775,
+        "description": "Step: 775",
         "type": "color"
       },
       "active": {
         "value": "#2b2b2b",
-        "step": 750,
+        "description": "Step: 750",
         "type": "color"
       },
       "focused": {
         "value": "#232323",
-        "step": 775,
+        "description": "Step: 775",
         "type": "color"
       }
     },
     "500": {
       "base": {
         "value": "#000000",
-        "step": 900,
+        "description": "Step: 900",
         "type": "color"
       },
       "hovered": {
         "value": "#ffffff14",
-        "step": 0,
+        "description": "Step: 0",
         "type": "color"
       },
       "active": {
         "value": "#ffffff1f",
-        "step": 0,
+        "description": "Step: 0",
         "type": "color"
       },
       "focused": {
         "value": "#151515",
-        "step": 825,
+        "description": "Step: 825",
         "type": "color"
       }
     },
     "on300": {
       "base": {
         "value": "#0e0e0e80",
-        "step": 850,
+        "description": "Step: 850",
         "type": "color"
       },
       "hovered": {
         "value": "#070707",
-        "step": 875,
+        "description": "Step: 875",
         "type": "color"
       },
       "active": {
         "value": "#000000",
-        "step": 900,
+        "description": "Step: 900",
         "type": "color"
       },
       "focused": {
         "value": "#070707",
-        "step": 875,
+        "description": "Step: 875",
         "type": "color"
       }
     },
     "on500": {
       "base": {
         "value": "#0e0e0e",
-        "step": 850,
+        "description": "Step: 850",
         "type": "color"
       },
       "hovered": {
         "value": "#1c1c1c",
-        "step": 800,
+        "description": "Step: 800",
         "type": "color"
       },
       "active": {
         "value": "#232323",
-        "step": 775,
+        "description": "Step: 775",
         "type": "color"
       },
       "focused": {
         "value": "#1c1c1c",
-        "step": 800,
+        "description": "Step: 800",
         "type": "color"
       }
     },
     "ok": {
       "base": {
         "value": "#1b9447",
-        "step": 600,
+        "description": "Step: 600",
         "type": "color"
       },
       "hovered": {
         "value": "#1b9447",
-        "step": 600,
+        "description": "Step: 600",
         "type": "color"
       },
       "active": {
         "value": "#1b9447",
-        "step": 600,
+        "description": "Step: 600",
         "type": "color"
       },
       "focused": {
         "value": "#1b9447",
-        "step": 600,
+        "description": "Step: 600",
         "type": "color"
       }
     },
     "error": {
       "base": {
         "value": "#f15656",
-        "step": 400,
+        "description": "Step: 400",
         "type": "color"
       },
       "hovered": {
         "value": "#f15656",
-        "step": 400,
+        "description": "Step: 400",
         "type": "color"
       },
       "active": {
         "value": "#f15656",
-        "step": 400,
+        "description": "Step: 400",
         "type": "color"
       },
       "focused": {
         "value": "#f15656",
-        "step": 400,
+        "description": "Step: 400",
         "type": "color"
       }
     },
     "warning": {
       "base": {
         "value": "#f7bb57",
-        "step": 300,
+        "description": "Step: 300",
         "type": "color"
       },
       "hovered": {
         "value": "#f7bb57",
-        "step": 300,
+        "description": "Step: 300",
         "type": "color"
       },
       "active": {
         "value": "#f7bb57",
-        "step": 300,
+        "description": "Step: 300",
         "type": "color"
       },
       "focused": {
         "value": "#f7bb57",
-        "step": 300,
+        "description": "Step: 300",
         "type": "color"
       }
     },
     "info": {
       "base": {
         "value": "#2472f2",
-        "step": 500,
+        "description": "Step: 500",
         "type": "color"
       },
       "hovered": {
         "value": "#2472f2",
-        "step": 500,
+        "description": "Step: 500",
         "type": "color"
       },
       "active": {
         "value": "#2472f2",
-        "step": 500,
+        "description": "Step: 500",
         "type": "color"
       },
       "focused": {
         "value": "#2472f2",
-        "step": 500,
+        "description": "Step: 500",
         "type": "color"
       }
     }
@@ -309,139 +309,139 @@
   "border": {
     "primary": {
       "value": "#070707",
-      "step": 875,
+      "description": "Step: 875",
       "type": "color"
     },
     "secondary": {
       "value": "#232323",
-      "step": 775,
+      "description": "Step: 775",
       "type": "color"
     },
     "muted": {
       "value": "#404040",
-      "step": 675,
+      "description": "Step: 675",
       "type": "color"
     },
     "focused": {
       "value": "#484bed",
-      "step": 500,
+      "description": "Step: 500",
       "type": "color"
     },
     "active": {
       "value": "#000000",
-      "step": 900,
+      "description": "Step: 900",
       "type": "color"
     },
     "ok": {
       "value": "#20b456",
-      "step": 500,
+      "description": "Step: 500",
       "type": "color"
     },
     "error": {
       "value": "#eb2d2d",
-      "step": 500,
+      "description": "Step: 500",
       "type": "color"
     },
     "warning": {
       "value": "#de900c",
-      "step": 500,
+      "description": "Step: 500",
       "type": "color"
     },
     "info": {
       "value": "#2472f2",
-      "step": 500,
+      "description": "Step: 500",
       "type": "color"
     }
   },
   "editor": {
     "background": {
       "value": "#000000",
-      "step": 900,
+      "description": "Step: 900",
       "type": "color"
     },
     "indent_guide": {
       "value": "#404040",
-      "step": 675,
+      "description": "Step: 675",
       "type": "color"
     },
     "indent_guide_active": {
       "value": "#232323",
-      "step": 775,
+      "description": "Step: 775",
       "type": "color"
     },
     "line": {
       "active": {
         "value": "#ffffff12",
-        "step": 0,
+        "description": "Step: 0",
         "type": "color"
       },
       "highlighted": {
         "value": "#ffffff1f",
-        "step": 0,
+        "description": "Step: 0",
         "type": "color"
       },
       "inserted": {
         "value": "#1b9447",
-        "step": 600,
+        "description": "Step: 600",
         "type": "color"
       },
       "deleted": {
         "value": "#f15656",
-        "step": 400,
+        "description": "Step: 400",
         "type": "color"
       },
       "modified": {
         "value": "#2472f2",
-        "step": 500,
+        "description": "Step: 500",
         "type": "color"
       }
     },
     "highlight": {
       "selection": {
         "value": "#2472f23d",
-        "step": 500,
+        "description": "Step: 500",
         "type": "color"
       },
       "occurrence": {
         "value": "#ffffff1f",
-        "step": 0,
+        "description": "Step: 0",
         "type": "color"
       },
       "activeOccurrence": {
         "value": "#ffffff29",
-        "step": 0,
+        "description": "Step: 0",
         "type": "color"
       },
       "matchingBracket": {
         "value": "#ffffff1f",
-        "step": 0,
+        "description": "Step: 0",
         "type": "color"
       },
       "match": {
         "value": "#3f15a380",
-        "step": 700,
+        "description": "Step: 700",
         "type": "color"
       },
       "activeMatch": {
         "value": "#5316e0b3",
-        "step": 600,
+        "description": "Step: 600",
         "type": "color"
       },
       "related": {
         "value": "#151515",
-        "step": 825,
+        "description": "Step: 825",
         "type": "color"
       }
     },
     "gutter": {
       "primary": {
         "value": "#474747",
-        "step": 650,
+        "description": "Step: 650",
         "type": "color"
       },
       "active": {
         "value": "#ffffff",
-        "step": 0,
+        "description": "Step: 0",
         "type": "color"
       }
     }
@@ -449,50 +449,62 @@
   "syntax": {
     "primary": {
       "value": "#d5d5d5",
+      "description": "Step: 150",
       "type": "color"
     },
     "comment": {
       "value": "#aaaaaa",
+      "description": "Step: 300",
       "type": "color"
     },
     "keyword": {
       "value": "#4f8ff7",
+      "description": "Step: 400",
       "type": "color"
     },
     "function": {
       "value": "#f9da82",
+      "description": "Step: 200",
       "type": "color"
     },
     "type": {
       "value": "#3eeeda",
+      "description": "Step: 300",
       "type": "color"
     },
     "variant": {
       "value": "#53c1f5",
+      "description": "Step: 300",
       "type": "color"
     },
     "property": {
       "value": "#4f8ff7",
+      "description": "Step: 400",
       "type": "color"
     },
     "enum": {
       "value": "#ee670a",
+      "description": "Step: 500",
       "type": "color"
     },
     "operator": {
       "value": "#ee670a",
+      "description": "Step: 500",
       "type": "color"
     },
     "string": {
       "value": "#f99d5f",
+      "description": "Step: 300",
       "type": "color"
     },
     "number": {
       "value": "#aeef4b",
+      "description": "Step: 300",
       "type": "color"
     },
     "boolean": {
       "value": "#aeef4b",
+      "description": "Step: 300",
       "type": "color"
     }
   },
@@ -500,176 +512,176 @@
     "1": {
       "baseColor": {
         "value": "#2472f2",
-        "step": 500,
+        "description": "Step: 500",
         "type": "color"
       },
       "cursorColor": {
         "value": "#2472f2",
-        "step": 500,
+        "description": "Step: 500",
         "type": "color"
       },
       "selectionColor": {
         "value": "#2472f23d",
-        "step": 500,
+        "description": "Step: 500",
         "type": "color"
       },
       "borderColor": {
         "value": "#2472f2cc",
-        "step": 500,
+        "description": "Step: 500",
         "type": "color"
       }
     },
     "2": {
       "baseColor": {
         "value": "#79ba16",
-        "step": 500,
+        "description": "Step: 500",
         "type": "color"
       },
       "cursorColor": {
         "value": "#79ba16",
-        "step": 500,
+        "description": "Step: 500",
         "type": "color"
       },
       "selectionColor": {
         "value": "#79ba163d",
-        "step": 500,
+        "description": "Step: 500",
         "type": "color"
       },
       "borderColor": {
         "value": "#79ba16cc",
-        "step": 500,
+        "description": "Step: 500",
         "type": "color"
       }
     },
     "3": {
       "baseColor": {
         "value": "#d430e0",
-        "step": 500,
+        "description": "Step: 500",
         "type": "color"
       },
       "cursorColor": {
         "value": "#d430e0",
-        "step": 500,
+        "description": "Step: 500",
         "type": "color"
       },
       "selectionColor": {
         "value": "#d430e03d",
-        "step": 500,
+        "description": "Step: 500",
         "type": "color"
       },
       "borderColor": {
         "value": "#d430e0cc",
-        "step": 500,
+        "description": "Step: 500",
         "type": "color"
       }
     },
     "4": {
       "baseColor": {
         "value": "#ee670a",
-        "step": 500,
+        "description": "Step: 500",
         "type": "color"
       },
       "cursorColor": {
         "value": "#ee670a",
-        "step": 500,
+        "description": "Step: 500",
         "type": "color"
       },
       "selectionColor": {
         "value": "#ee670a3d",
-        "step": 500,
+        "description": "Step: 500",
         "type": "color"
       },
       "borderColor": {
         "value": "#ee670acc",
-        "step": 500,
+        "description": "Step: 500",
         "type": "color"
       }
     },
     "5": {
       "baseColor": {
         "value": "#993bf3",
-        "step": 500,
+        "description": "Step: 500",
         "type": "color"
       },
       "cursorColor": {
         "value": "#993bf3",
-        "step": 500,
+        "description": "Step: 500",
         "type": "color"
       },
       "selectionColor": {
         "value": "#993bf33d",
-        "step": 500,
+        "description": "Step: 500",
         "type": "color"
       },
       "borderColor": {
         "value": "#993bf3cc",
-        "step": 500,
+        "description": "Step: 500",
         "type": "color"
       }
     },
     "6": {
       "baseColor": {
         "value": "#16d6c1",
-        "step": 400,
+        "description": "Step: 400",
         "type": "color"
       },
       "cursorColor": {
         "value": "#16d6c1",
-        "step": 400,
+        "description": "Step: 400",
         "type": "color"
       },
       "selectionColor": {
         "value": "#16d6c13d",
-        "step": 400,
+        "description": "Step: 400",
         "type": "color"
       },
       "borderColor": {
         "value": "#16d6c1cc",
-        "step": 400,
+        "description": "Step: 400",
         "type": "color"
       }
     },
     "7": {
       "baseColor": {
         "value": "#ef59a3",
-        "step": 400,
+        "description": "Step: 400",
         "type": "color"
       },
       "cursorColor": {
         "value": "#ef59a3",
-        "step": 400,
+        "description": "Step: 400",
         "type": "color"
       },
       "selectionColor": {
         "value": "#ef59a33d",
-        "step": 400,
+        "description": "Step: 400",
         "type": "color"
       },
       "borderColor": {
         "value": "#ef59a3cc",
-        "step": 400,
+        "description": "Step: 400",
         "type": "color"
       }
     },
     "8": {
       "baseColor": {
         "value": "#f7bf17",
-        "step": 400,
+        "description": "Step: 400",
         "type": "color"
       },
       "cursorColor": {
         "value": "#f7bf17",
-        "step": 400,
+        "description": "Step: 400",
         "type": "color"
       },
       "selectionColor": {
         "value": "#f7bf173d",
-        "step": 400,
+        "description": "Step: 400",
         "type": "color"
       },
       "borderColor": {
         "value": "#f7bf17cc",
-        "step": 400,
+        "description": "Step: 400",
         "type": "color"
       }
     }
diff --git a/styles/dist/light.json b/styles/dist/light.json
index cb94077e95..a64541c8bf 100644
--- a/styles/dist/light.json
+++ b/styles/dist/light.json
@@ -5,104 +5,104 @@
   "text": {
     "primary": {
       "value": "#2b2b2b",
-      "step": 750,
+      "description": "Step: 750",
       "type": "color"
     },
     "secondary": {
       "value": "#474747",
-      "step": 650,
+      "description": "Step: 650",
       "type": "color"
     },
     "muted": {
       "value": "#636363",
-      "step": 550,
+      "description": "Step: 550",
       "type": "color"
     },
     "placeholder": {
       "value": "#808080",
-      "step": 450,
+      "description": "Step: 450",
       "type": "color"
     },
     "active": {
       "value": "#000000",
-      "step": 900,
+      "description": "Step: 900",
       "type": "color"
     },
     "feature": {
       "value": "#484bed",
-      "step": 500,
+      "description": "Step: 500",
       "type": "color"
     },
     "ok": {
       "value": "#20b456",
-      "step": 500,
+      "description": "Step: 500",
       "type": "color"
     },
     "error": {
       "value": "#eb2d2d",
-      "step": 500,
+      "description": "Step: 500",
       "type": "color"
     },
     "warning": {
       "value": "#d3a20b",
-      "step": 500,
+      "description": "Step: 500",
       "type": "color"
     },
     "info": {
       "value": "#2472f2",
-      "step": 500,
+      "description": "Step: 500",
       "type": "color"
     }
   },
   "icon": {
     "primary": {
       "value": "#393939",
-      "step": 700,
+      "description": "Step: 700",
       "type": "color"
     },
     "secondary": {
       "value": "#717171",
-      "step": 500,
+      "description": "Step: 500",
       "type": "color"
     },
     "muted": {
       "value": "#9c9c9c",
-      "step": 350,
+      "description": "Step: 350",
       "type": "color"
     },
     "placeholder": {
       "value": "#aaaaaa",
-      "step": 300,
+      "description": "Step: 300",
       "type": "color"
     },
     "active": {
       "value": "#000000",
-      "step": 900,
+      "description": "Step: 900",
       "type": "color"
     },
     "feature": {
       "value": "#484bed",
-      "step": 500,
+      "description": "Step: 500",
       "type": "color"
     },
     "ok": {
       "value": "#1b9447",
-      "step": 600,
+      "description": "Step: 600",
       "type": "color"
     },
     "error": {
       "value": "#c91818",
-      "step": 600,
+      "description": "Step: 600",
       "type": "color"
     },
     "warning": {
       "value": "#f7bf17",
-      "step": 400,
+      "description": "Step: 400",
       "type": "color"
     },
     "info": {
       "value": "#135acd",
-      "step": 600,
+      "description": "Step: 600",
       "type": "color"
     }
   },
@@ -110,198 +110,198 @@
     "100": {
       "base": {
         "value": "#eaeaea",
-        "step": 75,
+        "description": "Step: 75",
         "type": "color"
       },
       "hovered": {
         "value": "#e3e3e3",
-        "step": 100,
+        "description": "Step: 100",
         "type": "color"
       },
       "active": {
         "value": "#d5d5d5",
-        "step": 150,
+        "description": "Step: 150",
         "type": "color"
       },
       "focused": {
         "value": "#e3e3e3",
-        "step": 100,
+        "description": "Step: 100",
         "type": "color"
       }
     },
     "300": {
       "base": {
         "value": "#f8f8f8",
-        "step": 25,
+        "description": "Step: 25",
         "type": "color"
       },
       "hovered": {
         "value": "#eaeaea",
-        "step": 75,
+        "description": "Step: 75",
         "type": "color"
       },
       "active": {
         "value": "#e3e3e3",
-        "step": 100,
+        "description": "Step: 100",
         "type": "color"
       },
       "focused": {
         "value": "#eaeaea",
-        "step": 75,
+        "description": "Step: 75",
         "type": "color"
       }
     },
     "500": {
       "base": {
         "value": "#ffffff",
-        "step": 0,
+        "description": "Step: 0",
         "type": "color"
       },
       "hovered": {
         "value": "#00000008",
-        "step": 900,
+        "description": "Step: 900",
         "type": "color"
       },
       "active": {
         "value": "#0000000f",
-        "step": 900,
+        "description": "Step: 900",
         "type": "color"
       },
       "focused": {
         "value": "#f1f1f1",
-        "step": 50,
+        "description": "Step: 50",
         "type": "color"
       }
     },
     "on300": {
       "base": {
         "value": "#f1f1f1",
-        "step": 50,
+        "description": "Step: 50",
         "type": "color"
       },
       "hovered": {
         "value": "#e3e3e3",
-        "step": 100,
+        "description": "Step: 100",
         "type": "color"
       },
       "active": {
         "value": "#d5d5d5",
-        "step": 150,
+        "description": "Step: 150",
         "type": "color"
       },
       "focused": {
         "value": "#e3e3e3",
-        "step": 100,
+        "description": "Step: 100",
         "type": "color"
       }
     },
     "on500": {
       "base": {
         "value": "#f1f1f1",
-        "step": 50,
+        "description": "Step: 50",
         "type": "color"
       },
       "hovered": {
         "value": "#f8f8f8",
-        "step": 25,
+        "description": "Step: 25",
         "type": "color"
       },
       "active": {
         "value": "#ffffff",
-        "step": 0,
+        "description": "Step: 0",
         "type": "color"
       },
       "focused": {
         "value": "#f8f8f8",
-        "step": 25,
+        "description": "Step: 25",
         "type": "color"
       }
     },
     "ok": {
       "base": {
         "value": "#b7f9ce",
-        "step": 100,
+        "description": "Step: 100",
         "type": "color"
       },
       "hovered": {
         "value": "#b7f9ce",
-        "step": 100,
+        "description": "Step: 100",
         "type": "color"
       },
       "active": {
         "value": "#b7f9ce",
-        "step": 100,
+        "description": "Step: 100",
         "type": "color"
       },
       "focused": {
         "value": "#b7f9ce",
-        "step": 100,
+        "description": "Step: 100",
         "type": "color"
       }
     },
     "error": {
       "base": {
         "value": "#fcc6c6",
-        "step": 100,
+        "description": "Step: 100",
         "type": "color"
       },
       "hovered": {
         "value": "#fcc6c6",
-        "step": 100,
+        "description": "Step: 100",
         "type": "color"
       },
       "active": {
         "value": "#fcc6c6",
-        "step": 100,
+        "description": "Step: 100",
         "type": "color"
       },
       "focused": {
         "value": "#fcc6c6",
-        "step": 100,
+        "description": "Step: 100",
         "type": "color"
       }
     },
     "warning": {
       "base": {
         "value": "#fce9b7",
-        "step": 100,
+        "description": "Step: 100",
         "type": "color"
       },
       "hovered": {
         "value": "#fce9b7",
-        "step": 100,
+        "description": "Step: 100",
         "type": "color"
       },
       "active": {
         "value": "#fce9b7",
-        "step": 100,
+        "description": "Step: 100",
         "type": "color"
       },
       "focused": {
         "value": "#fce9b7",
-        "step": 100,
+        "description": "Step: 100",
         "type": "color"
       }
     },
     "info": {
       "base": {
         "value": "#c5dafc",
-        "step": 100,
+        "description": "Step: 100",
         "type": "color"
       },
       "hovered": {
         "value": "#c5dafc",
-        "step": 100,
+        "description": "Step: 100",
         "type": "color"
       },
       "active": {
         "value": "#c5dafc",
-        "step": 100,
+        "description": "Step: 100",
         "type": "color"
       },
       "focused": {
         "value": "#c5dafc",
-        "step": 100,
+        "description": "Step: 100",
         "type": "color"
       }
     }
@@ -309,139 +309,139 @@
   "border": {
     "primary": {
       "value": "#d5d5d5",
-      "step": 150,
+      "description": "Step: 150",
       "type": "color"
     },
     "secondary": {
       "value": "#d5d5d5",
-      "step": 150,
+      "description": "Step: 150",
       "type": "color"
     },
     "muted": {
       "value": "#e3e3e3",
-      "step": 100,
+      "description": "Step: 100",
       "type": "color"
     },
     "focused": {
       "value": "#484bed",
-      "step": 500,
+      "description": "Step: 500",
       "type": "color"
     },
     "active": {
       "value": "#b8b8b8",
-      "step": 250,
+      "description": "Step: 250",
       "type": "color"
     },
     "ok": {
       "value": "#84f2ab",
-      "step": 200,
+      "description": "Step: 200",
       "type": "color"
     },
     "error": {
       "value": "#f9a0a0",
-      "step": 200,
+      "description": "Step: 200",
       "type": "color"
     },
     "warning": {
       "value": "#f9da82",
-      "step": 200,
+      "description": "Step: 200",
       "type": "color"
     },
     "info": {
       "value": "#9ec1fa",
-      "step": 200,
+      "description": "Step: 200",
       "type": "color"
     }
   },
   "editor": {
     "background": {
       "value": "#ffffff",
-      "step": 0,
+      "description": "Step: 0",
       "type": "color"
     },
     "indent_guide": {
       "value": "#e3e3e3",
-      "step": 100,
+      "description": "Step: 100",
       "type": "color"
     },
     "indent_guide_active": {
       "value": "#d5d5d5",
-      "step": 150,
+      "description": "Step: 150",
       "type": "color"
     },
     "line": {
       "active": {
         "value": "#0000000f",
-        "step": 900,
+        "description": "Step: 900",
         "type": "color"
       },
       "highlighted": {
         "value": "#0000001f",
-        "step": 900,
+        "description": "Step: 900",
         "type": "color"
       },
       "inserted": {
         "value": "#b7f9ce",
-        "step": 100,
+        "description": "Step: 100",
         "type": "color"
       },
       "deleted": {
         "value": "#fcc6c6",
-        "step": 100,
+        "description": "Step: 100",
         "type": "color"
       },
       "modified": {
         "value": "#c5dafc",
-        "step": 100,
+        "description": "Step: 100",
         "type": "color"
       }
     },
     "highlight": {
       "selection": {
         "value": "#2472f23d",
-        "step": 500,
+        "description": "Step: 500",
         "type": "color"
       },
       "occurrence": {
         "value": "#0000000f",
-        "step": 900,
+        "description": "Step: 900",
         "type": "color"
       },
       "activeOccurrence": {
         "value": "#00000029",
-        "step": 900,
+        "description": "Step: 900",
         "type": "color"
       },
       "matchingBracket": {
         "value": "#ffffff",
-        "step": 0,
+        "description": "Step: 0",
         "type": "color"
       },
       "match": {
         "value": "#fce9b7",
-        "step": 100,
+        "description": "Step: 100",
         "type": "color"
       },
       "activeMatch": {
         "value": "#f9da82",
-        "step": 200,
+        "description": "Step: 200",
         "type": "color"
       },
       "related": {
         "value": "#ffffff",
-        "step": 0,
+        "description": "Step: 0",
         "type": "color"
       }
     },
     "gutter": {
       "primary": {
         "value": "#aaaaaa",
-        "step": 300,
+        "description": "Step: 300",
         "type": "color"
       },
       "active": {
         "value": "#000000",
-        "step": 900,
+        "description": "Step: 900",
         "type": "color"
       }
     }
@@ -449,50 +449,62 @@
   "syntax": {
     "primary": {
       "value": "#1c1c1c",
+      "description": "Step: 800",
       "type": "color"
     },
     "comment": {
       "value": "#717171",
+      "description": "Step: 500",
       "type": "color"
     },
     "keyword": {
       "value": "#1819a1",
+      "description": "Step: 700",
       "type": "color"
     },
     "function": {
       "value": "#bb550e",
+      "description": "Step: 600",
       "type": "color"
     },
     "type": {
       "value": "#a8820e",
+      "description": "Step: 600",
       "type": "color"
     },
     "variant": {
       "value": "#97142a",
+      "description": "Step: 700",
       "type": "color"
     },
     "property": {
       "value": "#106c4e",
+      "description": "Step: 700",
       "type": "color"
     },
     "enum": {
       "value": "#eb2d2d",
+      "description": "Step: 500",
       "type": "color"
     },
     "operator": {
       "value": "#eb2d2d",
+      "description": "Step: 500",
       "type": "color"
     },
     "string": {
       "value": "#eb2d2d",
+      "description": "Step: 500",
       "type": "color"
     },
     "number": {
       "value": "#484bed",
+      "description": "Step: 500",
       "type": "color"
     },
     "boolean": {
       "value": "#eb2d2d",
+      "description": "Step: 500",
       "type": "color"
     }
   },
@@ -500,176 +512,176 @@
     "1": {
       "baseColor": {
         "value": "#2472f2",
-        "step": 500,
+        "description": "Step: 500",
         "type": "color"
       },
       "cursorColor": {
         "value": "#2472f2",
-        "step": 500,
+        "description": "Step: 500",
         "type": "color"
       },
       "selectionColor": {
         "value": "#2472f23d",
-        "step": 500,
+        "description": "Step: 500",
         "type": "color"
       },
       "borderColor": {
         "value": "#2472f2cc",
-        "step": 500,
+        "description": "Step: 500",
         "type": "color"
       }
     },
     "2": {
       "baseColor": {
         "value": "#12d796",
-        "step": 400,
+        "description": "Step: 400",
         "type": "color"
       },
       "cursorColor": {
         "value": "#12d796",
-        "step": 400,
+        "description": "Step: 400",
         "type": "color"
       },
       "selectionColor": {
         "value": "#12d7963d",
-        "step": 400,
+        "description": "Step: 400",
         "type": "color"
       },
       "borderColor": {
         "value": "#12d796cc",
-        "step": 400,
+        "description": "Step: 400",
         "type": "color"
       }
     },
     "3": {
       "baseColor": {
         "value": "#de57e8",
-        "step": 400,
+        "description": "Step: 400",
         "type": "color"
       },
       "cursorColor": {
         "value": "#de57e8",
-        "step": 400,
+        "description": "Step: 400",
         "type": "color"
       },
       "selectionColor": {
         "value": "#de57e83d",
-        "step": 400,
+        "description": "Step: 400",
         "type": "color"
       },
       "borderColor": {
         "value": "#de57e8cc",
-        "step": 400,
+        "description": "Step: 400",
         "type": "color"
       }
     },
     "4": {
       "baseColor": {
         "value": "#f9812e",
-        "step": 400,
+        "description": "Step: 400",
         "type": "color"
       },
       "cursorColor": {
         "value": "#f9812e",
-        "step": 400,
+        "description": "Step: 400",
         "type": "color"
       },
       "selectionColor": {
         "value": "#f9812e3d",
-        "step": 400,
+        "description": "Step: 400",
         "type": "color"
       },
       "borderColor": {
         "value": "#f9812ecc",
-        "step": 400,
+        "description": "Step: 400",
         "type": "color"
       }
     },
     "5": {
       "baseColor": {
         "value": "#b066f8",
-        "step": 400,
+        "description": "Step: 400",
         "type": "color"
       },
       "cursorColor": {
         "value": "#b066f8",
-        "step": 400,
+        "description": "Step: 400",
         "type": "color"
       },
       "selectionColor": {
         "value": "#b066f83d",
-        "step": 400,
+        "description": "Step: 400",
         "type": "color"
       },
       "borderColor": {
         "value": "#b066f8cc",
-        "step": 400,
+        "description": "Step: 400",
         "type": "color"
       }
     },
     "6": {
       "baseColor": {
         "value": "#16d6c1",
-        "step": 400,
+        "description": "Step: 400",
         "type": "color"
       },
       "cursorColor": {
         "value": "#16d6c1",
-        "step": 400,
+        "description": "Step: 400",
         "type": "color"
       },
       "selectionColor": {
         "value": "#16d6c13d",
-        "step": 400,
+        "description": "Step: 400",
         "type": "color"
       },
       "borderColor": {
         "value": "#16d6c1cc",
-        "step": 400,
+        "description": "Step: 400",
         "type": "color"
       }
     },
     "7": {
       "baseColor": {
         "value": "#ef59a3",
-        "step": 400,
+        "description": "Step: 400",
         "type": "color"
       },
       "cursorColor": {
         "value": "#ef59a3",
-        "step": 400,
+        "description": "Step: 400",
         "type": "color"
       },
       "selectionColor": {
         "value": "#ef59a33d",
-        "step": 400,
+        "description": "Step: 400",
         "type": "color"
       },
       "borderColor": {
         "value": "#ef59a3cc",
-        "step": 400,
+        "description": "Step: 400",
         "type": "color"
       }
     },
     "8": {
       "baseColor": {
         "value": "#f7bf17",
-        "step": 400,
+        "description": "Step: 400",
         "type": "color"
       },
       "cursorColor": {
         "value": "#f7bf17",
-        "step": 400,
+        "description": "Step: 400",
         "type": "color"
       },
       "selectionColor": {
         "value": "#f7bf173d",
-        "step": 400,
+        "description": "Step: 400",
         "type": "color"
       },
       "borderColor": {
         "value": "#f7bf17cc",
-        "step": 400,
+        "description": "Step: 400",
         "type": "color"
       }
     }
diff --git a/styles/dist/solarized-dark.json b/styles/dist/solarized-dark.json
index e5ed5d181f..aea93a0a73 100644
--- a/styles/dist/solarized-dark.json
+++ b/styles/dist/solarized-dark.json
@@ -93,11 +93,11 @@
         "type": "color"
       },
       "hovered": {
-        "value": "#586e75",
+        "value": "#586e7552",
         "type": "color"
       },
       "active": {
-        "value": "#586e75",
+        "value": "#586e757a",
         "type": "color"
       },
       "focused": {
@@ -111,11 +111,11 @@
         "type": "color"
       },
       "hovered": {
-        "value": "#586e75",
+        "value": "#586e7552",
         "type": "color"
       },
       "active": {
-        "value": "#586e75",
+        "value": "#586e757a",
         "type": "color"
       },
       "focused": {
@@ -165,15 +165,15 @@
         "type": "color"
       },
       "hovered": {
-        "value": "#586e75",
+        "value": "#657b83",
         "type": "color"
       },
       "active": {
-        "value": "#586e75",
+        "value": "#657b83",
         "type": "color"
       },
       "focused": {
-        "value": "#586e75",
+        "value": "#657b83",
         "type": "color"
       }
     },
@@ -260,15 +260,15 @@
       "type": "color"
     },
     "muted": {
-      "value": "#586e75",
+      "value": "#657b83",
       "type": "color"
     },
     "focused": {
-      "value": "#586e75",
+      "value": "#657b83",
       "type": "color"
     },
     "active": {
-      "value": "#586e75",
+      "value": "#657b83",
       "type": "color"
     },
     "ok": {
@@ -294,7 +294,7 @@
       "type": "color"
     },
     "indent_guide": {
-      "value": "#586e75",
+      "value": "#657b83",
       "type": "color"
     },
     "indent_guide_active": {
@@ -329,11 +329,11 @@
         "type": "color"
       },
       "occurrence": {
-        "value": "#657b831f",
+        "value": "#002b361f",
         "type": "color"
       },
       "activeOccurrence": {
-        "value": "#657b8329",
+        "value": "#002b3629",
         "type": "color"
       },
       "matchingBracket": {
@@ -370,7 +370,7 @@
       "type": "color"
     },
     "comment": {
-      "value": "#eee8d5",
+      "value": "#93a1a1",
       "type": "color"
     },
     "keyword": {
diff --git a/styles/dist/solarized-light.json b/styles/dist/solarized-light.json
index 73eae57a7f..d6badf9e6b 100644
--- a/styles/dist/solarized-light.json
+++ b/styles/dist/solarized-light.json
@@ -93,11 +93,11 @@
         "type": "color"
       },
       "hovered": {
-        "value": "#93a1a1",
+        "value": "#93a1a11f",
         "type": "color"
       },
       "active": {
-        "value": "#93a1a1",
+        "value": "#93a1a12e",
         "type": "color"
       },
       "focused": {
@@ -111,11 +111,11 @@
         "type": "color"
       },
       "hovered": {
-        "value": "#93a1a1",
+        "value": "#93a1a11f",
         "type": "color"
       },
       "active": {
-        "value": "#93a1a1",
+        "value": "#93a1a12e",
         "type": "color"
       },
       "focused": {
@@ -165,15 +165,15 @@
         "type": "color"
       },
       "hovered": {
-        "value": "#93a1a1",
+        "value": "#839496",
         "type": "color"
       },
       "active": {
-        "value": "#93a1a1",
+        "value": "#839496",
         "type": "color"
       },
       "focused": {
-        "value": "#93a1a1",
+        "value": "#839496",
         "type": "color"
       }
     },
@@ -260,15 +260,15 @@
       "type": "color"
     },
     "muted": {
-      "value": "#93a1a1",
+      "value": "#839496",
       "type": "color"
     },
     "focused": {
-      "value": "#93a1a1",
+      "value": "#839496",
       "type": "color"
     },
     "active": {
-      "value": "#93a1a1",
+      "value": "#839496",
       "type": "color"
     },
     "ok": {
@@ -294,7 +294,7 @@
       "type": "color"
     },
     "indent_guide": {
-      "value": "#93a1a1",
+      "value": "#839496",
       "type": "color"
     },
     "indent_guide_active": {
@@ -329,11 +329,11 @@
         "type": "color"
       },
       "occurrence": {
-        "value": "#8394961f",
+        "value": "#fdf6e31f",
         "type": "color"
       },
       "activeOccurrence": {
-        "value": "#83949629",
+        "value": "#fdf6e329",
         "type": "color"
       },
       "matchingBracket": {
@@ -370,7 +370,7 @@
       "type": "color"
     },
     "comment": {
-      "value": "#073642",
+      "value": "#586e75",
       "type": "color"
     },
     "keyword": {
@@ -561,7 +561,7 @@
     }
   },
   "shadowAlpha": {
-    "value": 0.32,
+    "value": 0.12,
     "type": "number"
   }
 }
\ No newline at end of file
diff --git a/styles/dist/tokens.json b/styles/dist/tokens.json
index 2d52abc280..56c72587c0 100644
--- a/styles/dist/tokens.json
+++ b/styles/dist/tokens.json
@@ -4,1071 +4,1071 @@
       "neutral": {
         "0": {
           "value": "#ffffff",
-          "step": 0,
+          "description": "Step: 0",
           "type": "color"
         },
         "25": {
           "value": "#f8f8f8",
-          "step": 25,
+          "description": "Step: 25",
           "type": "color"
         },
         "50": {
           "value": "#f1f1f1",
-          "step": 50,
+          "description": "Step: 50",
           "type": "color"
         },
         "75": {
           "value": "#eaeaea",
-          "step": 75,
+          "description": "Step: 75",
           "type": "color"
         },
         "100": {
           "value": "#e3e3e3",
-          "step": 100,
+          "description": "Step: 100",
           "type": "color"
         },
         "125": {
           "value": "#dcdcdc",
-          "step": 125,
+          "description": "Step: 125",
           "type": "color"
         },
         "150": {
           "value": "#d5d5d5",
-          "step": 150,
+          "description": "Step: 150",
           "type": "color"
         },
         "175": {
           "value": "#cdcdcd",
-          "step": 175,
+          "description": "Step: 175",
           "type": "color"
         },
         "200": {
           "value": "#c6c6c6",
-          "step": 200,
+          "description": "Step: 200",
           "type": "color"
         },
         "225": {
           "value": "#bfbfbf",
-          "step": 225,
+          "description": "Step: 225",
           "type": "color"
         },
         "250": {
           "value": "#b8b8b8",
-          "step": 250,
+          "description": "Step: 250",
           "type": "color"
         },
         "275": {
           "value": "#b1b1b1",
-          "step": 275,
+          "description": "Step: 275",
           "type": "color"
         },
         "300": {
           "value": "#aaaaaa",
-          "step": 300,
+          "description": "Step: 300",
           "type": "color"
         },
         "325": {
           "value": "#a3a3a3",
-          "step": 325,
+          "description": "Step: 325",
           "type": "color"
         },
         "350": {
           "value": "#9c9c9c",
-          "step": 350,
+          "description": "Step: 350",
           "type": "color"
         },
         "375": {
           "value": "#959595",
-          "step": 375,
+          "description": "Step: 375",
           "type": "color"
         },
         "400": {
           "value": "#8e8e8e",
-          "step": 400,
+          "description": "Step: 400",
           "type": "color"
         },
         "425": {
           "value": "#878787",
-          "step": 425,
+          "description": "Step: 425",
           "type": "color"
         },
         "450": {
           "value": "#808080",
-          "step": 450,
+          "description": "Step: 450",
           "type": "color"
         },
         "475": {
           "value": "#787878",
-          "step": 475,
+          "description": "Step: 475",
           "type": "color"
         },
         "500": {
           "value": "#717171",
-          "step": 500,
+          "description": "Step: 500",
           "type": "color"
         },
         "525": {
           "value": "#6a6a6a",
-          "step": 525,
+          "description": "Step: 525",
           "type": "color"
         },
         "550": {
           "value": "#636363",
-          "step": 550,
+          "description": "Step: 550",
           "type": "color"
         },
         "575": {
           "value": "#5c5c5c",
-          "step": 575,
+          "description": "Step: 575",
           "type": "color"
         },
         "600": {
           "value": "#555555",
-          "step": 600,
+          "description": "Step: 600",
           "type": "color"
         },
         "625": {
           "value": "#4e4e4e",
-          "step": 625,
+          "description": "Step: 625",
           "type": "color"
         },
         "650": {
           "value": "#474747",
-          "step": 650,
+          "description": "Step: 650",
           "type": "color"
         },
         "675": {
           "value": "#404040",
-          "step": 675,
+          "description": "Step: 675",
           "type": "color"
         },
         "700": {
           "value": "#393939",
-          "step": 700,
+          "description": "Step: 700",
           "type": "color"
         },
         "725": {
           "value": "#323232",
-          "step": 725,
+          "description": "Step: 725",
           "type": "color"
         },
         "750": {
           "value": "#2b2b2b",
-          "step": 750,
+          "description": "Step: 750",
           "type": "color"
         },
         "775": {
           "value": "#232323",
-          "step": 775,
+          "description": "Step: 775",
           "type": "color"
         },
         "800": {
           "value": "#1c1c1c",
-          "step": 800,
+          "description": "Step: 800",
           "type": "color"
         },
         "825": {
           "value": "#151515",
-          "step": 825,
+          "description": "Step: 825",
           "type": "color"
         },
         "850": {
           "value": "#0e0e0e",
-          "step": 850,
+          "description": "Step: 850",
           "type": "color"
         },
         "875": {
           "value": "#070707",
-          "step": 875,
+          "description": "Step: 875",
           "type": "color"
         },
         "900": {
           "value": "#000000",
-          "step": 900,
+          "description": "Step: 900",
           "type": "color"
         }
       },
       "rose": {
         "0": {
           "value": "#feecef",
-          "step": 0,
+          "description": "Step: 0",
           "type": "color"
         },
         "100": {
           "value": "#fcc5cf",
-          "step": 100,
+          "description": "Step: 100",
           "type": "color"
         },
         "200": {
           "value": "#fa9fae",
-          "step": 200,
+          "description": "Step: 200",
           "type": "color"
         },
         "300": {
           "value": "#f8788e",
-          "step": 300,
+          "description": "Step: 300",
           "type": "color"
         },
         "400": {
           "value": "#f5526e",
-          "step": 400,
+          "description": "Step: 400",
           "type": "color"
         },
         "500": {
           "value": "#f0284a",
-          "step": 500,
+          "description": "Step: 500",
           "type": "color"
         },
         "600": {
           "value": "#cd1434",
-          "step": 600,
+          "description": "Step: 600",
           "type": "color"
         },
         "700": {
           "value": "#97142a",
-          "step": 700,
+          "description": "Step: 700",
           "type": "color"
         },
         "800": {
           "value": "#64101e",
-          "step": 800,
+          "description": "Step: 800",
           "type": "color"
         },
         "900": {
           "value": "#330a11",
-          "step": 900,
+          "description": "Step: 900",
           "type": "color"
         }
       },
       "red": {
         "0": {
           "value": "#feecec",
-          "step": 0,
+          "description": "Step: 0",
           "type": "color"
         },
         "100": {
           "value": "#fcc6c6",
-          "step": 100,
+          "description": "Step: 100",
           "type": "color"
         },
         "200": {
           "value": "#f9a0a0",
-          "step": 200,
+          "description": "Step: 200",
           "type": "color"
         },
         "300": {
           "value": "#f57b7b",
-          "step": 300,
+          "description": "Step: 300",
           "type": "color"
         },
         "400": {
           "value": "#f15656",
-          "step": 400,
+          "description": "Step: 400",
           "type": "color"
         },
         "500": {
           "value": "#eb2d2d",
-          "step": 500,
+          "description": "Step: 500",
           "type": "color"
         },
         "600": {
           "value": "#c91818",
-          "step": 600,
+          "description": "Step: 600",
           "type": "color"
         },
         "700": {
           "value": "#951515",
-          "step": 700,
+          "description": "Step: 700",
           "type": "color"
         },
         "800": {
           "value": "#631111",
-          "step": 800,
+          "description": "Step: 800",
           "type": "color"
         },
         "900": {
           "value": "#330a0a",
-          "step": 900,
+          "description": "Step: 900",
           "type": "color"
         }
       },
       "orange": {
         "0": {
           "value": "#fef3ec",
-          "step": 0,
+          "description": "Step: 0",
           "type": "color"
         },
         "100": {
           "value": "#fcd6bd",
-          "step": 100,
+          "description": "Step: 100",
           "type": "color"
         },
         "200": {
           "value": "#fab98e",
-          "step": 200,
+          "description": "Step: 200",
           "type": "color"
         },
         "300": {
           "value": "#f99d5f",
-          "step": 300,
+          "description": "Step: 300",
           "type": "color"
         },
         "400": {
           "value": "#f9812e",
-          "step": 400,
+          "description": "Step: 400",
           "type": "color"
         },
         "500": {
           "value": "#ee670a",
-          "step": 500,
+          "description": "Step: 500",
           "type": "color"
         },
         "600": {
           "value": "#bb550e",
-          "step": 600,
+          "description": "Step: 600",
           "type": "color"
         },
         "700": {
           "value": "#8b4210",
-          "step": 700,
+          "description": "Step: 700",
           "type": "color"
         },
         "800": {
           "value": "#5d2f0e",
-          "step": 800,
+          "description": "Step: 800",
           "type": "color"
         },
         "900": {
           "value": "#331b0a",
-          "step": 900,
+          "description": "Step: 900",
           "type": "color"
         }
       },
       "amber": {
         "0": {
           "value": "#fef7ec",
-          "step": 0,
+          "description": "Step: 0",
           "type": "color"
         },
         "100": {
           "value": "#fce2ba",
-          "step": 100,
+          "description": "Step: 100",
           "type": "color"
         },
         "200": {
           "value": "#f9ce89",
-          "step": 200,
+          "description": "Step: 200",
           "type": "color"
         },
         "300": {
           "value": "#f7bb57",
-          "step": 300,
+          "description": "Step: 300",
           "type": "color"
         },
         "400": {
           "value": "#f6a724",
-          "step": 400,
+          "description": "Step: 400",
           "type": "color"
         },
         "500": {
           "value": "#de900c",
-          "step": 500,
+          "description": "Step: 500",
           "type": "color"
         },
         "600": {
           "value": "#b0740f",
-          "step": 600,
+          "description": "Step: 600",
           "type": "color"
         },
         "700": {
           "value": "#845910",
-          "step": 700,
+          "description": "Step: 700",
           "type": "color"
         },
         "800": {
           "value": "#5a3e0e",
-          "step": 800,
+          "description": "Step: 800",
           "type": "color"
         },
         "900": {
           "value": "#33240a",
-          "step": 900,
+          "description": "Step: 900",
           "type": "color"
         }
       },
       "yellow": {
         "0": {
           "value": "#fef9ec",
-          "step": 0,
+          "description": "Step: 0",
           "type": "color"
         },
         "100": {
           "value": "#fce9b7",
-          "step": 100,
+          "description": "Step: 100",
           "type": "color"
         },
         "200": {
           "value": "#f9da82",
-          "step": 200,
+          "description": "Step: 200",
           "type": "color"
         },
         "300": {
           "value": "#f8cc4d",
-          "step": 300,
+          "description": "Step: 300",
           "type": "color"
         },
         "400": {
           "value": "#f7bf17",
-          "step": 400,
+          "description": "Step: 400",
           "type": "color"
         },
         "500": {
           "value": "#d3a20b",
-          "step": 500,
+          "description": "Step: 500",
           "type": "color"
         },
         "600": {
           "value": "#a8820e",
-          "step": 600,
+          "description": "Step: 600",
           "type": "color"
         },
         "700": {
           "value": "#7e630f",
-          "step": 700,
+          "description": "Step: 700",
           "type": "color"
         },
         "800": {
           "value": "#58460e",
-          "step": 800,
+          "description": "Step: 800",
           "type": "color"
         },
         "900": {
           "value": "#33290a",
-          "step": 900,
+          "description": "Step: 900",
           "type": "color"
         }
       },
       "lime": {
         "0": {
           "value": "#f7feec",
-          "step": 0,
+          "description": "Step: 0",
           "type": "color"
         },
         "100": {
           "value": "#dffab5",
-          "step": 100,
+          "description": "Step: 100",
           "type": "color"
         },
         "200": {
           "value": "#c7f57f",
-          "step": 200,
+          "description": "Step: 200",
           "type": "color"
         },
         "300": {
           "value": "#aeef4b",
-          "step": 300,
+          "description": "Step: 300",
           "type": "color"
         },
         "400": {
           "value": "#96e818",
-          "step": 400,
+          "description": "Step: 400",
           "type": "color"
         },
         "500": {
           "value": "#79ba16",
-          "step": 500,
+          "description": "Step: 500",
           "type": "color"
         },
         "600": {
           "value": "#639714",
-          "step": 600,
+          "description": "Step: 600",
           "type": "color"
         },
         "700": {
           "value": "#4e7412",
-          "step": 700,
+          "description": "Step: 700",
           "type": "color"
         },
         "800": {
           "value": "#38530f",
-          "step": 800,
+          "description": "Step: 800",
           "type": "color"
         },
         "900": {
           "value": "#23330a",
-          "step": 900,
+          "description": "Step: 900",
           "type": "color"
         }
       },
       "green": {
         "0": {
           "value": "#ecfef2",
-          "step": 0,
+          "description": "Step: 0",
           "type": "color"
         },
         "100": {
           "value": "#b7f9ce",
-          "step": 100,
+          "description": "Step: 100",
           "type": "color"
         },
         "200": {
           "value": "#84f2ab",
-          "step": 200,
+          "description": "Step: 200",
           "type": "color"
         },
         "300": {
           "value": "#54e989",
-          "step": 300,
+          "description": "Step: 300",
           "type": "color"
         },
         "400": {
           "value": "#27dd69",
-          "step": 400,
+          "description": "Step: 400",
           "type": "color"
         },
         "500": {
           "value": "#20b456",
-          "step": 500,
+          "description": "Step: 500",
           "type": "color"
         },
         "600": {
           "value": "#1b9447",
-          "step": 600,
+          "description": "Step: 600",
           "type": "color"
         },
         "700": {
           "value": "#157338",
-          "step": 700,
+          "description": "Step: 700",
           "type": "color"
         },
         "800": {
           "value": "#105328",
-          "step": 800,
+          "description": "Step: 800",
           "type": "color"
         },
         "900": {
           "value": "#0a3319",
-          "step": 900,
+          "description": "Step: 900",
           "type": "color"
         }
       },
       "emerald": {
         "0": {
           "value": "#ecfef8",
-          "step": 0,
+          "description": "Step: 0",
           "type": "color"
         },
         "100": {
           "value": "#b0fae1",
-          "step": 100,
+          "description": "Step: 100",
           "type": "color"
         },
         "200": {
           "value": "#74f6cb",
-          "step": 200,
+          "description": "Step: 200",
           "type": "color"
         },
         "300": {
           "value": "#39f0b3",
-          "step": 300,
+          "description": "Step: 300",
           "type": "color"
         },
         "400": {
           "value": "#12d796",
-          "step": 400,
+          "description": "Step: 400",
           "type": "color"
         },
         "500": {
           "value": "#10a977",
-          "step": 500,
+          "description": "Step: 500",
           "type": "color"
         },
         "600": {
           "value": "#118a62",
-          "step": 600,
+          "description": "Step: 600",
           "type": "color"
         },
         "700": {
           "value": "#106c4e",
-          "step": 700,
+          "description": "Step: 700",
           "type": "color"
         },
         "800": {
           "value": "#0d4f3a",
-          "step": 800,
+          "description": "Step: 800",
           "type": "color"
         },
         "900": {
           "value": "#0a3326",
-          "step": 900,
+          "description": "Step: 900",
           "type": "color"
         }
       },
       "teal": {
         "0": {
           "value": "#ecfefc",
-          "step": 0,
+          "description": "Step: 0",
           "type": "color"
         },
         "100": {
           "value": "#b1faf2",
-          "step": 100,
+          "description": "Step: 100",
           "type": "color"
         },
         "200": {
           "value": "#76f5e7",
-          "step": 200,
+          "description": "Step: 200",
           "type": "color"
         },
         "300": {
           "value": "#3eeeda",
-          "step": 300,
+          "description": "Step: 300",
           "type": "color"
         },
         "400": {
           "value": "#16d6c1",
-          "step": 400,
+          "description": "Step: 400",
           "type": "color"
         },
         "500": {
           "value": "#14a898",
-          "step": 500,
+          "description": "Step: 500",
           "type": "color"
         },
         "600": {
           "value": "#138a7d",
-          "step": 600,
+          "description": "Step: 600",
           "type": "color"
         },
         "700": {
           "value": "#116c62",
-          "step": 700,
+          "description": "Step: 700",
           "type": "color"
         },
         "800": {
           "value": "#0e4f48",
-          "step": 800,
+          "description": "Step: 800",
           "type": "color"
         },
         "900": {
           "value": "#0a332f",
-          "step": 900,
+          "description": "Step: 900",
           "type": "color"
         }
       },
       "cyan": {
         "0": {
           "value": "#ecfcfe",
-          "step": 0,
+          "description": "Step: 0",
           "type": "color"
         },
         "100": {
           "value": "#b2f3fb",
-          "step": 100,
+          "description": "Step: 100",
           "type": "color"
         },
         "200": {
           "value": "#78eaf9",
-          "step": 200,
+          "description": "Step: 200",
           "type": "color"
         },
         "300": {
           "value": "#3de2f8",
-          "step": 300,
+          "description": "Step: 300",
           "type": "color"
         },
         "400": {
           "value": "#07d5f1",
-          "step": 400,
+          "description": "Step: 400",
           "type": "color"
         },
         "500": {
           "value": "#09aac0",
-          "step": 500,
+          "description": "Step: 500",
           "type": "color"
         },
         "600": {
           "value": "#0c8a9a",
-          "step": 600,
+          "description": "Step: 600",
           "type": "color"
         },
         "700": {
           "value": "#0e6a75",
-          "step": 700,
+          "description": "Step: 700",
           "type": "color"
         },
         "800": {
           "value": "#0d4c53",
-          "step": 800,
+          "description": "Step: 800",
           "type": "color"
         },
         "900": {
           "value": "#0a2f33",
-          "step": 900,
+          "description": "Step: 900",
           "type": "color"
         }
       },
       "sky": {
         "0": {
           "value": "#ecf8fe",
-          "step": 0,
+          "description": "Step: 0",
           "type": "color"
         },
         "100": {
           "value": "#b9e5fb",
-          "step": 100,
+          "description": "Step: 100",
           "type": "color"
         },
         "200": {
           "value": "#86d3f8",
-          "step": 200,
+          "description": "Step: 200",
           "type": "color"
         },
         "300": {
           "value": "#53c1f5",
-          "step": 300,
+          "description": "Step: 300",
           "type": "color"
         },
         "400": {
           "value": "#20b0f2",
-          "step": 400,
+          "description": "Step: 400",
           "type": "color"
         },
         "500": {
           "value": "#1096d3",
-          "step": 500,
+          "description": "Step: 500",
           "type": "color"
         },
         "600": {
           "value": "#1179a8",
-          "step": 600,
+          "description": "Step: 600",
           "type": "color"
         },
         "700": {
           "value": "#115c7f",
-          "step": 700,
+          "description": "Step: 700",
           "type": "color"
         },
         "800": {
           "value": "#0e4158",
-          "step": 800,
+          "description": "Step: 800",
           "type": "color"
         },
         "900": {
           "value": "#0a2633",
-          "step": 900,
+          "description": "Step: 900",
           "type": "color"
         }
       },
       "blue": {
         "0": {
           "value": "#ecf3fe",
-          "step": 0,
+          "description": "Step: 0",
           "type": "color"
         },
         "100": {
           "value": "#c5dafc",
-          "step": 100,
+          "description": "Step: 100",
           "type": "color"
         },
         "200": {
           "value": "#9ec1fa",
-          "step": 200,
+          "description": "Step: 200",
           "type": "color"
         },
         "300": {
           "value": "#76a8f8",
-          "step": 300,
+          "description": "Step: 300",
           "type": "color"
         },
         "400": {
           "value": "#4f8ff7",
-          "step": 400,
+          "description": "Step: 400",
           "type": "color"
         },
         "500": {
           "value": "#2472f2",
-          "step": 500,
+          "description": "Step: 500",
           "type": "color"
         },
         "600": {
           "value": "#135acd",
-          "step": 600,
+          "description": "Step: 600",
           "type": "color"
         },
         "700": {
           "value": "#134697",
-          "step": 700,
+          "description": "Step: 700",
           "type": "color"
         },
         "800": {
           "value": "#103063",
-          "step": 800,
+          "description": "Step: 800",
           "type": "color"
         },
         "900": {
           "value": "#0a1a33",
-          "step": 900,
+          "description": "Step: 900",
           "type": "color"
         }
       },
       "indigo": {
         "0": {
           "value": "#ececfe",
-          "step": 0,
+          "description": "Step: 0",
           "type": "color"
         },
         "100": {
           "value": "#cdcdfc",
-          "step": 100,
+          "description": "Step: 100",
           "type": "color"
         },
         "200": {
           "value": "#aeaff9",
-          "step": 200,
+          "description": "Step: 200",
           "type": "color"
         },
         "300": {
           "value": "#9091f6",
-          "step": 300,
+          "description": "Step: 300",
           "type": "color"
         },
         "400": {
           "value": "#7274f3",
-          "step": 400,
+          "description": "Step: 400",
           "type": "color"
         },
         "500": {
           "value": "#484bed",
-          "step": 500,
+          "description": "Step: 500",
           "type": "color"
         },
         "600": {
           "value": "#1b1edc",
-          "step": 600,
+          "description": "Step: 600",
           "type": "color"
         },
         "700": {
           "value": "#1819a1",
-          "step": 700,
+          "description": "Step: 700",
           "type": "color"
         },
         "800": {
           "value": "#121269",
-          "step": 800,
+          "description": "Step: 800",
           "type": "color"
         },
         "900": {
           "value": "#0a0a33",
-          "step": 900,
+          "description": "Step: 900",
           "type": "color"
         }
       },
       "violet": {
         "0": {
           "value": "#f1ecfe",
-          "step": 0,
+          "description": "Step: 0",
           "type": "color"
         },
         "100": {
           "value": "#daccfc",
-          "step": 100,
+          "description": "Step: 100",
           "type": "color"
         },
         "200": {
           "value": "#c3acfb",
-          "step": 200,
+          "description": "Step: 200",
           "type": "color"
         },
         "300": {
           "value": "#ac8cf9",
-          "step": 300,
+          "description": "Step: 300",
           "type": "color"
         },
         "400": {
           "value": "#966cf7",
-          "step": 400,
+          "description": "Step: 400",
           "type": "color"
         },
         "500": {
           "value": "#7741f2",
-          "step": 500,
+          "description": "Step: 500",
           "type": "color"
         },
         "600": {
           "value": "#5316e0",
-          "step": 600,
+          "description": "Step: 600",
           "type": "color"
         },
         "700": {
           "value": "#3f15a3",
-          "step": 700,
+          "description": "Step: 700",
           "type": "color"
         },
         "800": {
           "value": "#2b116a",
-          "step": 800,
+          "description": "Step: 800",
           "type": "color"
         },
         "900": {
           "value": "#160a33",
-          "step": 900,
+          "description": "Step: 900",
           "type": "color"
         }
       },
       "purple": {
         "0": {
           "value": "#f5ecfe",
-          "step": 0,
+          "description": "Step: 0",
           "type": "color"
         },
         "100": {
           "value": "#e4cbfc",
-          "step": 100,
+          "description": "Step: 100",
           "type": "color"
         },
         "200": {
           "value": "#d2a9fb",
-          "step": 200,
+          "description": "Step: 200",
           "type": "color"
         },
         "300": {
           "value": "#c188f9",
-          "step": 300,
+          "description": "Step: 300",
           "type": "color"
         },
         "400": {
           "value": "#b066f8",
-          "step": 400,
+          "description": "Step: 400",
           "type": "color"
         },
         "500": {
           "value": "#993bf3",
-          "step": 500,
+          "description": "Step: 500",
           "type": "color"
         },
         "600": {
           "value": "#7b14dd",
-          "step": 600,
+          "description": "Step: 600",
           "type": "color"
         },
         "700": {
           "value": "#5c14a1",
-          "step": 700,
+          "description": "Step: 700",
           "type": "color"
         },
         "800": {
           "value": "#3e1169",
-          "step": 800,
+          "description": "Step: 800",
           "type": "color"
         },
         "900": {
           "value": "#1f0a33",
-          "step": 900,
+          "description": "Step: 900",
           "type": "color"
         }
       },
       "fuschia": {
         "0": {
           "value": "#fdecfe",
-          "step": 0,
+          "description": "Step: 0",
           "type": "color"
         },
         "100": {
           "value": "#f8c5fb",
-          "step": 100,
+          "description": "Step: 100",
           "type": "color"
         },
         "200": {
           "value": "#f19ff6",
-          "step": 200,
+          "description": "Step: 200",
           "type": "color"
         },
         "300": {
           "value": "#e87af0",
-          "step": 300,
+          "description": "Step: 300",
           "type": "color"
         },
         "400": {
           "value": "#de57e8",
-          "step": 400,
+          "description": "Step: 400",
           "type": "color"
         },
         "500": {
           "value": "#d430e0",
-          "step": 500,
+          "description": "Step: 500",
           "type": "color"
         },
         "600": {
           "value": "#b31fbc",
-          "step": 600,
+          "description": "Step: 600",
           "type": "color"
         },
         "700": {
           "value": "#87198e",
-          "step": 700,
+          "description": "Step: 700",
           "type": "color"
         },
         "800": {
           "value": "#5c1260",
-          "step": 800,
+          "description": "Step: 800",
           "type": "color"
         },
         "900": {
           "value": "#310a33",
-          "step": 900,
+          "description": "Step: 900",
           "type": "color"
         }
       },
       "pink": {
         "0": {
           "value": "#feecf5",
-          "step": 0,
+          "description": "Step: 0",
           "type": "color"
         },
         "100": {
           "value": "#fbc6e1",
-          "step": 100,
+          "description": "Step: 100",
           "type": "color"
         },
         "200": {
           "value": "#f8a1cc",
-          "step": 200,
+          "description": "Step: 200",
           "type": "color"
         },
         "300": {
           "value": "#f47db8",
-          "step": 300,
+          "description": "Step: 300",
           "type": "color"
         },
         "400": {
           "value": "#ef59a3",
-          "step": 400,
+          "description": "Step: 400",
           "type": "color"
         },
         "500": {
           "value": "#e8318c",
-          "step": 500,
+          "description": "Step: 500",
           "type": "color"
         },
         "600": {
           "value": "#c71a71",
-          "step": 600,
+          "description": "Step: 600",
           "type": "color"
         },
         "700": {
           "value": "#941756",
-          "step": 700,
+          "description": "Step: 700",
           "type": "color"
         },
         "800": {
           "value": "#63113b",
-          "step": 800,
+          "description": "Step: 800",
           "type": "color"
         },
         "900": {
           "value": "#330a1f",
-          "step": 900,
+          "description": "Step: 900",
           "type": "color"
         }
       }
@@ -1124,6 +1124,32 @@
       }
     },
     "size": {
+      "px": {
+        "value": 1,
+        "type": "size"
+      },
+      "xs": {
+        "value": 2,
+        "type": "size"
+      },
+      "sm": {
+        "value": 4,
+        "type": "size"
+      },
+      "md": {
+        "value": 6,
+        "type": "size"
+      },
+      "lg": {
+        "value": 8,
+        "type": "size"
+      },
+      "xl": {
+        "value": 12,
+        "type": "size"
+      }
+    },
+    "fontSize": {
       "3xs": {
         "value": 8,
         "type": "fontSize"
@@ -1161,104 +1187,104 @@
     "text": {
       "primary": {
         "value": "#f1f1f1",
-        "step": 50,
+        "description": "Step: 50",
         "type": "color"
       },
       "secondary": {
         "value": "#9c9c9c",
-        "step": 350,
+        "description": "Step: 350",
         "type": "color"
       },
       "muted": {
         "value": "#808080",
-        "step": 450,
+        "description": "Step: 450",
         "type": "color"
       },
       "placeholder": {
         "value": "#474747",
-        "step": 650,
+        "description": "Step: 650",
         "type": "color"
       },
       "active": {
         "value": "#ffffff",
-        "step": 0,
+        "description": "Step: 0",
         "type": "color"
       },
       "feature": {
         "value": "#4f8ff7",
-        "step": 400,
+        "description": "Step: 400",
         "type": "color"
       },
       "ok": {
         "value": "#1b9447",
-        "step": 600,
+        "description": "Step: 600",
         "type": "color"
       },
       "error": {
         "value": "#f15656",
-        "step": 400,
+        "description": "Step: 400",
         "type": "color"
       },
       "warning": {
         "value": "#f7bb57",
-        "step": 300,
+        "description": "Step: 300",
         "type": "color"
       },
       "info": {
         "value": "#2472f2",
-        "step": 500,
+        "description": "Step: 500",
         "type": "color"
       }
     },
     "icon": {
       "primary": {
         "value": "#c6c6c6",
-        "step": 200,
+        "description": "Step: 200",
         "type": "color"
       },
       "secondary": {
         "value": "#9c9c9c",
-        "step": 350,
+        "description": "Step: 350",
         "type": "color"
       },
       "muted": {
         "value": "#555555",
-        "step": 600,
+        "description": "Step: 600",
         "type": "color"
       },
       "placeholder": {
         "value": "#393939",
-        "step": 700,
+        "description": "Step: 700",
         "type": "color"
       },
       "active": {
         "value": "#ffffff",
-        "step": 0,
+        "description": "Step: 0",
         "type": "color"
       },
       "feature": {
         "value": "#2472f2",
-        "step": 500,
+        "description": "Step: 500",
         "type": "color"
       },
       "ok": {
         "value": "#1b9447",
-        "step": 600,
+        "description": "Step: 600",
         "type": "color"
       },
       "error": {
         "value": "#eb2d2d",
-        "step": 500,
+        "description": "Step: 500",
         "type": "color"
       },
       "warning": {
         "value": "#f6a724",
-        "step": 400,
+        "description": "Step: 400",
         "type": "color"
       },
       "info": {
         "value": "#135acd",
-        "step": 600,
+        "description": "Step: 600",
         "type": "color"
       }
     },
@@ -1266,198 +1292,198 @@
       "100": {
         "base": {
           "value": "#2b2b2b",
-          "step": 750,
+          "description": "Step: 750",
           "type": "color"
         },
         "hovered": {
           "value": "#323232",
-          "step": 725,
+          "description": "Step: 725",
           "type": "color"
         },
         "active": {
           "value": "#1c1c1c",
-          "step": 800,
+          "description": "Step: 800",
           "type": "color"
         },
         "focused": {
           "value": "#404040",
-          "step": 675,
+          "description": "Step: 675",
           "type": "color"
         }
       },
       "300": {
         "base": {
           "value": "#1c1c1c",
-          "step": 800,
+          "description": "Step: 800",
           "type": "color"
         },
         "hovered": {
           "value": "#232323",
-          "step": 775,
+          "description": "Step: 775",
           "type": "color"
         },
         "active": {
           "value": "#2b2b2b",
-          "step": 750,
+          "description": "Step: 750",
           "type": "color"
         },
         "focused": {
           "value": "#232323",
-          "step": 775,
+          "description": "Step: 775",
           "type": "color"
         }
       },
       "500": {
         "base": {
           "value": "#000000",
-          "step": 900,
+          "description": "Step: 900",
           "type": "color"
         },
         "hovered": {
           "value": "#ffffff14",
-          "step": 0,
+          "description": "Step: 0",
           "type": "color"
         },
         "active": {
           "value": "#ffffff1f",
-          "step": 0,
+          "description": "Step: 0",
           "type": "color"
         },
         "focused": {
           "value": "#151515",
-          "step": 825,
+          "description": "Step: 825",
           "type": "color"
         }
       },
       "on300": {
         "base": {
           "value": "#0e0e0e80",
-          "step": 850,
+          "description": "Step: 850",
           "type": "color"
         },
         "hovered": {
           "value": "#070707",
-          "step": 875,
+          "description": "Step: 875",
           "type": "color"
         },
         "active": {
           "value": "#000000",
-          "step": 900,
+          "description": "Step: 900",
           "type": "color"
         },
         "focused": {
           "value": "#070707",
-          "step": 875,
+          "description": "Step: 875",
           "type": "color"
         }
       },
       "on500": {
         "base": {
           "value": "#0e0e0e",
-          "step": 850,
+          "description": "Step: 850",
           "type": "color"
         },
         "hovered": {
           "value": "#1c1c1c",
-          "step": 800,
+          "description": "Step: 800",
           "type": "color"
         },
         "active": {
           "value": "#232323",
-          "step": 775,
+          "description": "Step: 775",
           "type": "color"
         },
         "focused": {
           "value": "#1c1c1c",
-          "step": 800,
+          "description": "Step: 800",
           "type": "color"
         }
       },
       "ok": {
         "base": {
           "value": "#1b9447",
-          "step": 600,
+          "description": "Step: 600",
           "type": "color"
         },
         "hovered": {
           "value": "#1b9447",
-          "step": 600,
+          "description": "Step: 600",
           "type": "color"
         },
         "active": {
           "value": "#1b9447",
-          "step": 600,
+          "description": "Step: 600",
           "type": "color"
         },
         "focused": {
           "value": "#1b9447",
-          "step": 600,
+          "description": "Step: 600",
           "type": "color"
         }
       },
       "error": {
         "base": {
           "value": "#f15656",
-          "step": 400,
+          "description": "Step: 400",
           "type": "color"
         },
         "hovered": {
           "value": "#f15656",
-          "step": 400,
+          "description": "Step: 400",
           "type": "color"
         },
         "active": {
           "value": "#f15656",
-          "step": 400,
+          "description": "Step: 400",
           "type": "color"
         },
         "focused": {
           "value": "#f15656",
-          "step": 400,
+          "description": "Step: 400",
           "type": "color"
         }
       },
       "warning": {
         "base": {
           "value": "#f7bb57",
-          "step": 300,
+          "description": "Step: 300",
           "type": "color"
         },
         "hovered": {
           "value": "#f7bb57",
-          "step": 300,
+          "description": "Step: 300",
           "type": "color"
         },
         "active": {
           "value": "#f7bb57",
-          "step": 300,
+          "description": "Step: 300",
           "type": "color"
         },
         "focused": {
           "value": "#f7bb57",
-          "step": 300,
+          "description": "Step: 300",
           "type": "color"
         }
       },
       "info": {
         "base": {
           "value": "#2472f2",
-          "step": 500,
+          "description": "Step: 500",
           "type": "color"
         },
         "hovered": {
           "value": "#2472f2",
-          "step": 500,
+          "description": "Step: 500",
           "type": "color"
         },
         "active": {
           "value": "#2472f2",
-          "step": 500,
+          "description": "Step: 500",
           "type": "color"
         },
         "focused": {
           "value": "#2472f2",
-          "step": 500,
+          "description": "Step: 500",
           "type": "color"
         }
       }
@@ -1465,139 +1491,139 @@
     "border": {
       "primary": {
         "value": "#070707",
-        "step": 875,
+        "description": "Step: 875",
         "type": "color"
       },
       "secondary": {
         "value": "#232323",
-        "step": 775,
+        "description": "Step: 775",
         "type": "color"
       },
       "muted": {
         "value": "#404040",
-        "step": 675,
+        "description": "Step: 675",
         "type": "color"
       },
       "focused": {
         "value": "#484bed",
-        "step": 500,
+        "description": "Step: 500",
         "type": "color"
       },
       "active": {
         "value": "#000000",
-        "step": 900,
+        "description": "Step: 900",
         "type": "color"
       },
       "ok": {
         "value": "#20b456",
-        "step": 500,
+        "description": "Step: 500",
         "type": "color"
       },
       "error": {
         "value": "#eb2d2d",
-        "step": 500,
+        "description": "Step: 500",
         "type": "color"
       },
       "warning": {
         "value": "#de900c",
-        "step": 500,
+        "description": "Step: 500",
         "type": "color"
       },
       "info": {
         "value": "#2472f2",
-        "step": 500,
+        "description": "Step: 500",
         "type": "color"
       }
     },
     "editor": {
       "background": {
         "value": "#000000",
-        "step": 900,
+        "description": "Step: 900",
         "type": "color"
       },
       "indent_guide": {
         "value": "#404040",
-        "step": 675,
+        "description": "Step: 675",
         "type": "color"
       },
       "indent_guide_active": {
         "value": "#232323",
-        "step": 775,
+        "description": "Step: 775",
         "type": "color"
       },
       "line": {
         "active": {
           "value": "#ffffff12",
-          "step": 0,
+          "description": "Step: 0",
           "type": "color"
         },
         "highlighted": {
           "value": "#ffffff1f",
-          "step": 0,
+          "description": "Step: 0",
           "type": "color"
         },
         "inserted": {
           "value": "#1b9447",
-          "step": 600,
+          "description": "Step: 600",
           "type": "color"
         },
         "deleted": {
           "value": "#f15656",
-          "step": 400,
+          "description": "Step: 400",
           "type": "color"
         },
         "modified": {
           "value": "#2472f2",
-          "step": 500,
+          "description": "Step: 500",
           "type": "color"
         }
       },
       "highlight": {
         "selection": {
           "value": "#2472f23d",
-          "step": 500,
+          "description": "Step: 500",
           "type": "color"
         },
         "occurrence": {
           "value": "#ffffff1f",
-          "step": 0,
+          "description": "Step: 0",
           "type": "color"
         },
         "activeOccurrence": {
           "value": "#ffffff29",
-          "step": 0,
+          "description": "Step: 0",
           "type": "color"
         },
         "matchingBracket": {
           "value": "#ffffff1f",
-          "step": 0,
+          "description": "Step: 0",
           "type": "color"
         },
         "match": {
           "value": "#3f15a380",
-          "step": 700,
+          "description": "Step: 700",
           "type": "color"
         },
         "activeMatch": {
           "value": "#5316e0b3",
-          "step": 600,
+          "description": "Step: 600",
           "type": "color"
         },
         "related": {
           "value": "#151515",
-          "step": 825,
+          "description": "Step: 825",
           "type": "color"
         }
       },
       "gutter": {
         "primary": {
           "value": "#474747",
-          "step": 650,
+          "description": "Step: 650",
           "type": "color"
         },
         "active": {
           "value": "#ffffff",
-          "step": 0,
+          "description": "Step: 0",
           "type": "color"
         }
       }
@@ -1605,50 +1631,62 @@
     "syntax": {
       "primary": {
         "value": "#d5d5d5",
+        "description": "Step: 150",
         "type": "color"
       },
       "comment": {
         "value": "#aaaaaa",
+        "description": "Step: 300",
         "type": "color"
       },
       "keyword": {
         "value": "#4f8ff7",
+        "description": "Step: 400",
         "type": "color"
       },
       "function": {
         "value": "#f9da82",
+        "description": "Step: 200",
         "type": "color"
       },
       "type": {
         "value": "#3eeeda",
+        "description": "Step: 300",
         "type": "color"
       },
       "variant": {
         "value": "#53c1f5",
+        "description": "Step: 300",
         "type": "color"
       },
       "property": {
         "value": "#4f8ff7",
+        "description": "Step: 400",
         "type": "color"
       },
       "enum": {
         "value": "#ee670a",
+        "description": "Step: 500",
         "type": "color"
       },
       "operator": {
         "value": "#ee670a",
+        "description": "Step: 500",
         "type": "color"
       },
       "string": {
         "value": "#f99d5f",
+        "description": "Step: 300",
         "type": "color"
       },
       "number": {
         "value": "#aeef4b",
+        "description": "Step: 300",
         "type": "color"
       },
       "boolean": {
         "value": "#aeef4b",
+        "description": "Step: 300",
         "type": "color"
       }
     },
@@ -1656,176 +1694,176 @@
       "1": {
         "baseColor": {
           "value": "#2472f2",
-          "step": 500,
+          "description": "Step: 500",
           "type": "color"
         },
         "cursorColor": {
           "value": "#2472f2",
-          "step": 500,
+          "description": "Step: 500",
           "type": "color"
         },
         "selectionColor": {
           "value": "#2472f23d",
-          "step": 500,
+          "description": "Step: 500",
           "type": "color"
         },
         "borderColor": {
           "value": "#2472f2cc",
-          "step": 500,
+          "description": "Step: 500",
           "type": "color"
         }
       },
       "2": {
         "baseColor": {
           "value": "#79ba16",
-          "step": 500,
+          "description": "Step: 500",
           "type": "color"
         },
         "cursorColor": {
           "value": "#79ba16",
-          "step": 500,
+          "description": "Step: 500",
           "type": "color"
         },
         "selectionColor": {
           "value": "#79ba163d",
-          "step": 500,
+          "description": "Step: 500",
           "type": "color"
         },
         "borderColor": {
           "value": "#79ba16cc",
-          "step": 500,
+          "description": "Step: 500",
           "type": "color"
         }
       },
       "3": {
         "baseColor": {
           "value": "#d430e0",
-          "step": 500,
+          "description": "Step: 500",
           "type": "color"
         },
         "cursorColor": {
           "value": "#d430e0",
-          "step": 500,
+          "description": "Step: 500",
           "type": "color"
         },
         "selectionColor": {
           "value": "#d430e03d",
-          "step": 500,
+          "description": "Step: 500",
           "type": "color"
         },
         "borderColor": {
           "value": "#d430e0cc",
-          "step": 500,
+          "description": "Step: 500",
           "type": "color"
         }
       },
       "4": {
         "baseColor": {
           "value": "#ee670a",
-          "step": 500,
+          "description": "Step: 500",
           "type": "color"
         },
         "cursorColor": {
           "value": "#ee670a",
-          "step": 500,
+          "description": "Step: 500",
           "type": "color"
         },
         "selectionColor": {
           "value": "#ee670a3d",
-          "step": 500,
+          "description": "Step: 500",
           "type": "color"
         },
         "borderColor": {
           "value": "#ee670acc",
-          "step": 500,
+          "description": "Step: 500",
           "type": "color"
         }
       },
       "5": {
         "baseColor": {
           "value": "#993bf3",
-          "step": 500,
+          "description": "Step: 500",
           "type": "color"
         },
         "cursorColor": {
           "value": "#993bf3",
-          "step": 500,
+          "description": "Step: 500",
           "type": "color"
         },
         "selectionColor": {
           "value": "#993bf33d",
-          "step": 500,
+          "description": "Step: 500",
           "type": "color"
         },
         "borderColor": {
           "value": "#993bf3cc",
-          "step": 500,
+          "description": "Step: 500",
           "type": "color"
         }
       },
       "6": {
         "baseColor": {
           "value": "#16d6c1",
-          "step": 400,
+          "description": "Step: 400",
           "type": "color"
         },
         "cursorColor": {
           "value": "#16d6c1",
-          "step": 400,
+          "description": "Step: 400",
           "type": "color"
         },
         "selectionColor": {
           "value": "#16d6c13d",
-          "step": 400,
+          "description": "Step: 400",
           "type": "color"
         },
         "borderColor": {
           "value": "#16d6c1cc",
-          "step": 400,
+          "description": "Step: 400",
           "type": "color"
         }
       },
       "7": {
         "baseColor": {
           "value": "#ef59a3",
-          "step": 400,
+          "description": "Step: 400",
           "type": "color"
         },
         "cursorColor": {
           "value": "#ef59a3",
-          "step": 400,
+          "description": "Step: 400",
           "type": "color"
         },
         "selectionColor": {
           "value": "#ef59a33d",
-          "step": 400,
+          "description": "Step: 400",
           "type": "color"
         },
         "borderColor": {
           "value": "#ef59a3cc",
-          "step": 400,
+          "description": "Step: 400",
           "type": "color"
         }
       },
       "8": {
         "baseColor": {
           "value": "#f7bf17",
-          "step": 400,
+          "description": "Step: 400",
           "type": "color"
         },
         "cursorColor": {
           "value": "#f7bf17",
-          "step": 400,
+          "description": "Step: 400",
           "type": "color"
         },
         "selectionColor": {
           "value": "#f7bf173d",
-          "step": 400,
+          "description": "Step: 400",
           "type": "color"
         },
         "borderColor": {
           "value": "#f7bf17cc",
-          "step": 400,
+          "description": "Step: 400",
           "type": "color"
         }
       }
@@ -1842,104 +1880,104 @@
     "text": {
       "primary": {
         "value": "#2b2b2b",
-        "step": 750,
+        "description": "Step: 750",
         "type": "color"
       },
       "secondary": {
         "value": "#474747",
-        "step": 650,
+        "description": "Step: 650",
         "type": "color"
       },
       "muted": {
         "value": "#636363",
-        "step": 550,
+        "description": "Step: 550",
         "type": "color"
       },
       "placeholder": {
         "value": "#808080",
-        "step": 450,
+        "description": "Step: 450",
         "type": "color"
       },
       "active": {
         "value": "#000000",
-        "step": 900,
+        "description": "Step: 900",
         "type": "color"
       },
       "feature": {
         "value": "#484bed",
-        "step": 500,
+        "description": "Step: 500",
         "type": "color"
       },
       "ok": {
         "value": "#20b456",
-        "step": 500,
+        "description": "Step: 500",
         "type": "color"
       },
       "error": {
         "value": "#eb2d2d",
-        "step": 500,
+        "description": "Step: 500",
         "type": "color"
       },
       "warning": {
         "value": "#d3a20b",
-        "step": 500,
+        "description": "Step: 500",
         "type": "color"
       },
       "info": {
         "value": "#2472f2",
-        "step": 500,
+        "description": "Step: 500",
         "type": "color"
       }
     },
     "icon": {
       "primary": {
         "value": "#393939",
-        "step": 700,
+        "description": "Step: 700",
         "type": "color"
       },
       "secondary": {
         "value": "#717171",
-        "step": 500,
+        "description": "Step: 500",
         "type": "color"
       },
       "muted": {
         "value": "#9c9c9c",
-        "step": 350,
+        "description": "Step: 350",
         "type": "color"
       },
       "placeholder": {
         "value": "#aaaaaa",
-        "step": 300,
+        "description": "Step: 300",
         "type": "color"
       },
       "active": {
         "value": "#000000",
-        "step": 900,
+        "description": "Step: 900",
         "type": "color"
       },
       "feature": {
         "value": "#484bed",
-        "step": 500,
+        "description": "Step: 500",
         "type": "color"
       },
       "ok": {
         "value": "#1b9447",
-        "step": 600,
+        "description": "Step: 600",
         "type": "color"
       },
       "error": {
         "value": "#c91818",
-        "step": 600,
+        "description": "Step: 600",
         "type": "color"
       },
       "warning": {
         "value": "#f7bf17",
-        "step": 400,
+        "description": "Step: 400",
         "type": "color"
       },
       "info": {
         "value": "#135acd",
-        "step": 600,
+        "description": "Step: 600",
         "type": "color"
       }
     },
@@ -1947,198 +1985,198 @@
       "100": {
         "base": {
           "value": "#eaeaea",
-          "step": 75,
+          "description": "Step: 75",
           "type": "color"
         },
         "hovered": {
           "value": "#e3e3e3",
-          "step": 100,
+          "description": "Step: 100",
           "type": "color"
         },
         "active": {
           "value": "#d5d5d5",
-          "step": 150,
+          "description": "Step: 150",
           "type": "color"
         },
         "focused": {
           "value": "#e3e3e3",
-          "step": 100,
+          "description": "Step: 100",
           "type": "color"
         }
       },
       "300": {
         "base": {
           "value": "#f8f8f8",
-          "step": 25,
+          "description": "Step: 25",
           "type": "color"
         },
         "hovered": {
           "value": "#eaeaea",
-          "step": 75,
+          "description": "Step: 75",
           "type": "color"
         },
         "active": {
           "value": "#e3e3e3",
-          "step": 100,
+          "description": "Step: 100",
           "type": "color"
         },
         "focused": {
           "value": "#eaeaea",
-          "step": 75,
+          "description": "Step: 75",
           "type": "color"
         }
       },
       "500": {
         "base": {
           "value": "#ffffff",
-          "step": 0,
+          "description": "Step: 0",
           "type": "color"
         },
         "hovered": {
           "value": "#00000008",
-          "step": 900,
+          "description": "Step: 900",
           "type": "color"
         },
         "active": {
           "value": "#0000000f",
-          "step": 900,
+          "description": "Step: 900",
           "type": "color"
         },
         "focused": {
           "value": "#f1f1f1",
-          "step": 50,
+          "description": "Step: 50",
           "type": "color"
         }
       },
       "on300": {
         "base": {
           "value": "#f1f1f1",
-          "step": 50,
+          "description": "Step: 50",
           "type": "color"
         },
         "hovered": {
           "value": "#e3e3e3",
-          "step": 100,
+          "description": "Step: 100",
           "type": "color"
         },
         "active": {
           "value": "#d5d5d5",
-          "step": 150,
+          "description": "Step: 150",
           "type": "color"
         },
         "focused": {
           "value": "#e3e3e3",
-          "step": 100,
+          "description": "Step: 100",
           "type": "color"
         }
       },
       "on500": {
         "base": {
           "value": "#f1f1f1",
-          "step": 50,
+          "description": "Step: 50",
           "type": "color"
         },
         "hovered": {
           "value": "#f8f8f8",
-          "step": 25,
+          "description": "Step: 25",
           "type": "color"
         },
         "active": {
           "value": "#ffffff",
-          "step": 0,
+          "description": "Step: 0",
           "type": "color"
         },
         "focused": {
           "value": "#f8f8f8",
-          "step": 25,
+          "description": "Step: 25",
           "type": "color"
         }
       },
       "ok": {
         "base": {
           "value": "#b7f9ce",
-          "step": 100,
+          "description": "Step: 100",
           "type": "color"
         },
         "hovered": {
           "value": "#b7f9ce",
-          "step": 100,
+          "description": "Step: 100",
           "type": "color"
         },
         "active": {
           "value": "#b7f9ce",
-          "step": 100,
+          "description": "Step: 100",
           "type": "color"
         },
         "focused": {
           "value": "#b7f9ce",
-          "step": 100,
+          "description": "Step: 100",
           "type": "color"
         }
       },
       "error": {
         "base": {
           "value": "#fcc6c6",
-          "step": 100,
+          "description": "Step: 100",
           "type": "color"
         },
         "hovered": {
           "value": "#fcc6c6",
-          "step": 100,
+          "description": "Step: 100",
           "type": "color"
         },
         "active": {
           "value": "#fcc6c6",
-          "step": 100,
+          "description": "Step: 100",
           "type": "color"
         },
         "focused": {
           "value": "#fcc6c6",
-          "step": 100,
+          "description": "Step: 100",
           "type": "color"
         }
       },
       "warning": {
         "base": {
           "value": "#fce9b7",
-          "step": 100,
+          "description": "Step: 100",
           "type": "color"
         },
         "hovered": {
           "value": "#fce9b7",
-          "step": 100,
+          "description": "Step: 100",
           "type": "color"
         },
         "active": {
           "value": "#fce9b7",
-          "step": 100,
+          "description": "Step: 100",
           "type": "color"
         },
         "focused": {
           "value": "#fce9b7",
-          "step": 100,
+          "description": "Step: 100",
           "type": "color"
         }
       },
       "info": {
         "base": {
           "value": "#c5dafc",
-          "step": 100,
+          "description": "Step: 100",
           "type": "color"
         },
         "hovered": {
           "value": "#c5dafc",
-          "step": 100,
+          "description": "Step: 100",
           "type": "color"
         },
         "active": {
           "value": "#c5dafc",
-          "step": 100,
+          "description": "Step: 100",
           "type": "color"
         },
         "focused": {
           "value": "#c5dafc",
-          "step": 100,
+          "description": "Step: 100",
           "type": "color"
         }
       }
@@ -2146,139 +2184,139 @@
     "border": {
       "primary": {
         "value": "#d5d5d5",
-        "step": 150,
+        "description": "Step: 150",
         "type": "color"
       },
       "secondary": {
         "value": "#d5d5d5",
-        "step": 150,
+        "description": "Step: 150",
         "type": "color"
       },
       "muted": {
         "value": "#e3e3e3",
-        "step": 100,
+        "description": "Step: 100",
         "type": "color"
       },
       "focused": {
         "value": "#484bed",
-        "step": 500,
+        "description": "Step: 500",
         "type": "color"
       },
       "active": {
         "value": "#b8b8b8",
-        "step": 250,
+        "description": "Step: 250",
         "type": "color"
       },
       "ok": {
         "value": "#84f2ab",
-        "step": 200,
+        "description": "Step: 200",
         "type": "color"
       },
       "error": {
         "value": "#f9a0a0",
-        "step": 200,
+        "description": "Step: 200",
         "type": "color"
       },
       "warning": {
         "value": "#f9da82",
-        "step": 200,
+        "description": "Step: 200",
         "type": "color"
       },
       "info": {
         "value": "#9ec1fa",
-        "step": 200,
+        "description": "Step: 200",
         "type": "color"
       }
     },
     "editor": {
       "background": {
         "value": "#ffffff",
-        "step": 0,
+        "description": "Step: 0",
         "type": "color"
       },
       "indent_guide": {
         "value": "#e3e3e3",
-        "step": 100,
+        "description": "Step: 100",
         "type": "color"
       },
       "indent_guide_active": {
         "value": "#d5d5d5",
-        "step": 150,
+        "description": "Step: 150",
         "type": "color"
       },
       "line": {
         "active": {
           "value": "#0000000f",
-          "step": 900,
+          "description": "Step: 900",
           "type": "color"
         },
         "highlighted": {
           "value": "#0000001f",
-          "step": 900,
+          "description": "Step: 900",
           "type": "color"
         },
         "inserted": {
           "value": "#b7f9ce",
-          "step": 100,
+          "description": "Step: 100",
           "type": "color"
         },
         "deleted": {
           "value": "#fcc6c6",
-          "step": 100,
+          "description": "Step: 100",
           "type": "color"
         },
         "modified": {
           "value": "#c5dafc",
-          "step": 100,
+          "description": "Step: 100",
           "type": "color"
         }
       },
       "highlight": {
         "selection": {
           "value": "#2472f23d",
-          "step": 500,
+          "description": "Step: 500",
           "type": "color"
         },
         "occurrence": {
           "value": "#0000000f",
-          "step": 900,
+          "description": "Step: 900",
           "type": "color"
         },
         "activeOccurrence": {
           "value": "#00000029",
-          "step": 900,
+          "description": "Step: 900",
           "type": "color"
         },
         "matchingBracket": {
           "value": "#ffffff",
-          "step": 0,
+          "description": "Step: 0",
           "type": "color"
         },
         "match": {
           "value": "#fce9b7",
-          "step": 100,
+          "description": "Step: 100",
           "type": "color"
         },
         "activeMatch": {
           "value": "#f9da82",
-          "step": 200,
+          "description": "Step: 200",
           "type": "color"
         },
         "related": {
           "value": "#ffffff",
-          "step": 0,
+          "description": "Step: 0",
           "type": "color"
         }
       },
       "gutter": {
         "primary": {
           "value": "#aaaaaa",
-          "step": 300,
+          "description": "Step: 300",
           "type": "color"
         },
         "active": {
           "value": "#000000",
-          "step": 900,
+          "description": "Step: 900",
           "type": "color"
         }
       }
@@ -2286,50 +2324,62 @@
     "syntax": {
       "primary": {
         "value": "#1c1c1c",
+        "description": "Step: 800",
         "type": "color"
       },
       "comment": {
         "value": "#717171",
+        "description": "Step: 500",
         "type": "color"
       },
       "keyword": {
         "value": "#1819a1",
+        "description": "Step: 700",
         "type": "color"
       },
       "function": {
         "value": "#bb550e",
+        "description": "Step: 600",
         "type": "color"
       },
       "type": {
         "value": "#a8820e",
+        "description": "Step: 600",
         "type": "color"
       },
       "variant": {
         "value": "#97142a",
+        "description": "Step: 700",
         "type": "color"
       },
       "property": {
         "value": "#106c4e",
+        "description": "Step: 700",
         "type": "color"
       },
       "enum": {
         "value": "#eb2d2d",
+        "description": "Step: 500",
         "type": "color"
       },
       "operator": {
         "value": "#eb2d2d",
+        "description": "Step: 500",
         "type": "color"
       },
       "string": {
         "value": "#eb2d2d",
+        "description": "Step: 500",
         "type": "color"
       },
       "number": {
         "value": "#484bed",
+        "description": "Step: 500",
         "type": "color"
       },
       "boolean": {
         "value": "#eb2d2d",
+        "description": "Step: 500",
         "type": "color"
       }
     },
@@ -2337,176 +2387,1310 @@
       "1": {
         "baseColor": {
           "value": "#2472f2",
-          "step": 500,
+          "description": "Step: 500",
           "type": "color"
         },
         "cursorColor": {
           "value": "#2472f2",
-          "step": 500,
+          "description": "Step: 500",
           "type": "color"
         },
         "selectionColor": {
           "value": "#2472f23d",
-          "step": 500,
+          "description": "Step: 500",
           "type": "color"
         },
         "borderColor": {
           "value": "#2472f2cc",
-          "step": 500,
+          "description": "Step: 500",
           "type": "color"
         }
       },
       "2": {
         "baseColor": {
           "value": "#12d796",
-          "step": 400,
+          "description": "Step: 400",
           "type": "color"
         },
         "cursorColor": {
           "value": "#12d796",
-          "step": 400,
+          "description": "Step: 400",
           "type": "color"
         },
         "selectionColor": {
           "value": "#12d7963d",
-          "step": 400,
+          "description": "Step: 400",
           "type": "color"
         },
         "borderColor": {
           "value": "#12d796cc",
-          "step": 400,
+          "description": "Step: 400",
           "type": "color"
         }
       },
       "3": {
         "baseColor": {
           "value": "#de57e8",
-          "step": 400,
+          "description": "Step: 400",
           "type": "color"
         },
         "cursorColor": {
           "value": "#de57e8",
-          "step": 400,
+          "description": "Step: 400",
           "type": "color"
         },
         "selectionColor": {
           "value": "#de57e83d",
-          "step": 400,
+          "description": "Step: 400",
           "type": "color"
         },
         "borderColor": {
           "value": "#de57e8cc",
-          "step": 400,
+          "description": "Step: 400",
           "type": "color"
         }
       },
       "4": {
         "baseColor": {
           "value": "#f9812e",
-          "step": 400,
+          "description": "Step: 400",
           "type": "color"
         },
         "cursorColor": {
           "value": "#f9812e",
-          "step": 400,
+          "description": "Step: 400",
           "type": "color"
         },
         "selectionColor": {
           "value": "#f9812e3d",
-          "step": 400,
+          "description": "Step: 400",
           "type": "color"
         },
         "borderColor": {
           "value": "#f9812ecc",
-          "step": 400,
+          "description": "Step: 400",
           "type": "color"
         }
       },
       "5": {
         "baseColor": {
           "value": "#b066f8",
-          "step": 400,
+          "description": "Step: 400",
           "type": "color"
         },
         "cursorColor": {
           "value": "#b066f8",
-          "step": 400,
+          "description": "Step: 400",
           "type": "color"
         },
         "selectionColor": {
           "value": "#b066f83d",
-          "step": 400,
+          "description": "Step: 400",
           "type": "color"
         },
         "borderColor": {
           "value": "#b066f8cc",
-          "step": 400,
+          "description": "Step: 400",
           "type": "color"
         }
       },
       "6": {
         "baseColor": {
           "value": "#16d6c1",
-          "step": 400,
+          "description": "Step: 400",
           "type": "color"
         },
         "cursorColor": {
           "value": "#16d6c1",
-          "step": 400,
+          "description": "Step: 400",
           "type": "color"
         },
         "selectionColor": {
           "value": "#16d6c13d",
-          "step": 400,
+          "description": "Step: 400",
           "type": "color"
         },
         "borderColor": {
           "value": "#16d6c1cc",
-          "step": 400,
+          "description": "Step: 400",
           "type": "color"
         }
       },
       "7": {
         "baseColor": {
           "value": "#ef59a3",
-          "step": 400,
+          "description": "Step: 400",
           "type": "color"
         },
         "cursorColor": {
           "value": "#ef59a3",
-          "step": 400,
+          "description": "Step: 400",
           "type": "color"
         },
         "selectionColor": {
           "value": "#ef59a33d",
-          "step": 400,
+          "description": "Step: 400",
           "type": "color"
         },
         "borderColor": {
           "value": "#ef59a3cc",
-          "step": 400,
+          "description": "Step: 400",
           "type": "color"
         }
       },
       "8": {
         "baseColor": {
           "value": "#f7bf17",
-          "step": 400,
+          "description": "Step: 400",
           "type": "color"
         },
         "cursorColor": {
           "value": "#f7bf17",
-          "step": 400,
+          "description": "Step: 400",
           "type": "color"
         },
         "selectionColor": {
           "value": "#f7bf173d",
-          "step": 400,
+          "description": "Step: 400",
           "type": "color"
         },
         "borderColor": {
           "value": "#f7bf17cc",
-          "step": 400,
+          "description": "Step: 400",
+          "type": "color"
+        }
+      }
+    },
+    "shadowAlpha": {
+      "value": 0.12,
+      "type": "number"
+    }
+  },
+  "solarized-dark": {
+    "meta": {
+      "themeName": "solarized-dark"
+    },
+    "text": {
+      "primary": {
+        "value": "#eee8d5",
+        "type": "color"
+      },
+      "secondary": {
+        "value": "#93a1a1",
+        "type": "color"
+      },
+      "muted": {
+        "value": "#93a1a1",
+        "type": "color"
+      },
+      "placeholder": {
+        "value": "#839496",
+        "type": "color"
+      },
+      "active": {
+        "value": "#fdf6e3",
+        "type": "color"
+      },
+      "feature": {
+        "value": "#268bd2",
+        "type": "color"
+      },
+      "ok": {
+        "value": "#859900",
+        "type": "color"
+      },
+      "error": {
+        "value": "#dc322f",
+        "type": "color"
+      },
+      "warning": {
+        "value": "#b58900",
+        "type": "color"
+      },
+      "info": {
+        "value": "#268bd2",
+        "type": "color"
+      }
+    },
+    "icon": {
+      "primary": {
+        "value": "#eee8d5",
+        "type": "color"
+      },
+      "secondary": {
+        "value": "#93a1a1",
+        "type": "color"
+      },
+      "muted": {
+        "value": "#93a1a1",
+        "type": "color"
+      },
+      "placeholder": {
+        "value": "#839496",
+        "type": "color"
+      },
+      "active": {
+        "value": "#fdf6e3",
+        "type": "color"
+      },
+      "feature": {
+        "value": "#268bd2",
+        "type": "color"
+      },
+      "ok": {
+        "value": "#859900",
+        "type": "color"
+      },
+      "error": {
+        "value": "#dc322f",
+        "type": "color"
+      },
+      "warning": {
+        "value": "#b58900",
+        "type": "color"
+      },
+      "info": {
+        "value": "#268bd2",
+        "type": "color"
+      }
+    },
+    "background": {
+      "100": {
+        "base": {
+          "value": "#073642",
+          "type": "color"
+        },
+        "hovered": {
+          "value": "#586e7552",
+          "type": "color"
+        },
+        "active": {
+          "value": "#586e757a",
+          "type": "color"
+        },
+        "focused": {
+          "value": "#586e75",
+          "type": "color"
+        }
+      },
+      "300": {
+        "base": {
+          "value": "#073642",
+          "type": "color"
+        },
+        "hovered": {
+          "value": "#586e7552",
+          "type": "color"
+        },
+        "active": {
+          "value": "#586e757a",
+          "type": "color"
+        },
+        "focused": {
+          "value": "#586e75",
+          "type": "color"
+        }
+      },
+      "500": {
+        "base": {
+          "value": "#002b36",
+          "type": "color"
+        },
+        "hovered": {
+          "value": "#073642",
+          "type": "color"
+        },
+        "active": {
+          "value": "#073642",
+          "type": "color"
+        },
+        "focused": {
+          "value": "#073642",
+          "type": "color"
+        }
+      },
+      "on300": {
+        "base": {
+          "value": "#002b36",
+          "type": "color"
+        },
+        "hovered": {
+          "value": "#073642",
+          "type": "color"
+        },
+        "active": {
+          "value": "#073642",
+          "type": "color"
+        },
+        "focused": {
+          "value": "#073642",
+          "type": "color"
+        }
+      },
+      "on500": {
+        "base": {
+          "value": "#073642",
+          "type": "color"
+        },
+        "hovered": {
+          "value": "#657b83",
+          "type": "color"
+        },
+        "active": {
+          "value": "#657b83",
+          "type": "color"
+        },
+        "focused": {
+          "value": "#657b83",
+          "type": "color"
+        }
+      },
+      "ok": {
+        "base": {
+          "value": "#859900",
+          "type": "color"
+        },
+        "hovered": {
+          "value": "#859900",
+          "type": "color"
+        },
+        "active": {
+          "value": "#859900",
+          "type": "color"
+        },
+        "focused": {
+          "value": "#859900",
+          "type": "color"
+        }
+      },
+      "error": {
+        "base": {
+          "value": "#dc322f",
+          "type": "color"
+        },
+        "hovered": {
+          "value": "#dc322f",
+          "type": "color"
+        },
+        "active": {
+          "value": "#dc322f",
+          "type": "color"
+        },
+        "focused": {
+          "value": "#dc322f",
+          "type": "color"
+        }
+      },
+      "warning": {
+        "base": {
+          "value": "#b58900",
+          "type": "color"
+        },
+        "hovered": {
+          "value": "#b58900",
+          "type": "color"
+        },
+        "active": {
+          "value": "#b58900",
+          "type": "color"
+        },
+        "focused": {
+          "value": "#b58900",
+          "type": "color"
+        }
+      },
+      "info": {
+        "base": {
+          "value": "#268bd2",
+          "type": "color"
+        },
+        "hovered": {
+          "value": "#268bd2",
+          "type": "color"
+        },
+        "active": {
+          "value": "#268bd2",
+          "type": "color"
+        },
+        "focused": {
+          "value": "#268bd2",
+          "type": "color"
+        }
+      }
+    },
+    "border": {
+      "primary": {
+        "value": "#002b36",
+        "type": "color"
+      },
+      "secondary": {
+        "value": "#073642",
+        "type": "color"
+      },
+      "muted": {
+        "value": "#657b83",
+        "type": "color"
+      },
+      "focused": {
+        "value": "#657b83",
+        "type": "color"
+      },
+      "active": {
+        "value": "#657b83",
+        "type": "color"
+      },
+      "ok": {
+        "value": "#859900",
+        "type": "color"
+      },
+      "error": {
+        "value": "#dc322f",
+        "type": "color"
+      },
+      "warning": {
+        "value": "#b58900",
+        "type": "color"
+      },
+      "info": {
+        "value": "#268bd2",
+        "type": "color"
+      }
+    },
+    "editor": {
+      "background": {
+        "value": "#002b36",
+        "type": "color"
+      },
+      "indent_guide": {
+        "value": "#657b83",
+        "type": "color"
+      },
+      "indent_guide_active": {
+        "value": "#073642",
+        "type": "color"
+      },
+      "line": {
+        "active": {
+          "value": "#fdf6e312",
+          "type": "color"
+        },
+        "highlighted": {
+          "value": "#fdf6e31f",
+          "type": "color"
+        },
+        "inserted": {
+          "value": "#859900",
+          "type": "color"
+        },
+        "deleted": {
+          "value": "#dc322f",
+          "type": "color"
+        },
+        "modified": {
+          "value": "#268bd2",
+          "type": "color"
+        }
+      },
+      "highlight": {
+        "selection": {
+          "value": "#268bd23d",
+          "type": "color"
+        },
+        "occurrence": {
+          "value": "#002b361f",
+          "type": "color"
+        },
+        "activeOccurrence": {
+          "value": "#002b3629",
+          "type": "color"
+        },
+        "matchingBracket": {
+          "value": "#073642",
+          "type": "color"
+        },
+        "match": {
+          "value": "#6c71c480",
+          "type": "color"
+        },
+        "activeMatch": {
+          "value": "#6c71c4b3",
+          "type": "color"
+        },
+        "related": {
+          "value": "#073642",
+          "type": "color"
+        }
+      },
+      "gutter": {
+        "primary": {
+          "value": "#839496",
+          "type": "color"
+        },
+        "active": {
+          "value": "#fdf6e3",
+          "type": "color"
+        }
+      }
+    },
+    "syntax": {
+      "primary": {
+        "value": "#fdf6e3",
+        "type": "color"
+      },
+      "comment": {
+        "value": "#93a1a1",
+        "type": "color"
+      },
+      "keyword": {
+        "value": "#268bd2",
+        "type": "color"
+      },
+      "function": {
+        "value": "#b58900",
+        "type": "color"
+      },
+      "type": {
+        "value": "#2aa198",
+        "type": "color"
+      },
+      "variant": {
+        "value": "#268bd2",
+        "type": "color"
+      },
+      "property": {
+        "value": "#268bd2",
+        "type": "color"
+      },
+      "enum": {
+        "value": "#cb4b16",
+        "type": "color"
+      },
+      "operator": {
+        "value": "#cb4b16",
+        "type": "color"
+      },
+      "string": {
+        "value": "#cb4b16",
+        "type": "color"
+      },
+      "number": {
+        "value": "#859900",
+        "type": "color"
+      },
+      "boolean": {
+        "value": "#859900",
+        "type": "color"
+      }
+    },
+    "player": {
+      "1": {
+        "baseColor": {
+          "value": "#268bd2",
+          "type": "color"
+        },
+        "cursorColor": {
+          "value": "#268bd2",
+          "type": "color"
+        },
+        "selectionColor": {
+          "value": "#268bd23d",
+          "type": "color"
+        },
+        "borderColor": {
+          "value": "#268bd2cc",
+          "type": "color"
+        }
+      },
+      "2": {
+        "baseColor": {
+          "value": "#859900",
+          "type": "color"
+        },
+        "cursorColor": {
+          "value": "#859900",
+          "type": "color"
+        },
+        "selectionColor": {
+          "value": "#8599003d",
+          "type": "color"
+        },
+        "borderColor": {
+          "value": "#859900cc",
+          "type": "color"
+        }
+      },
+      "3": {
+        "baseColor": {
+          "value": "#d33682",
+          "type": "color"
+        },
+        "cursorColor": {
+          "value": "#d33682",
+          "type": "color"
+        },
+        "selectionColor": {
+          "value": "#d336823d",
+          "type": "color"
+        },
+        "borderColor": {
+          "value": "#d33682cc",
+          "type": "color"
+        }
+      },
+      "4": {
+        "baseColor": {
+          "value": "#cb4b16",
+          "type": "color"
+        },
+        "cursorColor": {
+          "value": "#cb4b16",
+          "type": "color"
+        },
+        "selectionColor": {
+          "value": "#cb4b163d",
+          "type": "color"
+        },
+        "borderColor": {
+          "value": "#cb4b16cc",
+          "type": "color"
+        }
+      },
+      "5": {
+        "baseColor": {
+          "value": "#6c71c4",
+          "type": "color"
+        },
+        "cursorColor": {
+          "value": "#6c71c4",
+          "type": "color"
+        },
+        "selectionColor": {
+          "value": "#6c71c43d",
+          "type": "color"
+        },
+        "borderColor": {
+          "value": "#6c71c4cc",
+          "type": "color"
+        }
+      },
+      "6": {
+        "baseColor": {
+          "value": "#2aa198",
+          "type": "color"
+        },
+        "cursorColor": {
+          "value": "#2aa198",
+          "type": "color"
+        },
+        "selectionColor": {
+          "value": "#2aa1983d",
+          "type": "color"
+        },
+        "borderColor": {
+          "value": "#2aa198cc",
+          "type": "color"
+        }
+      },
+      "7": {
+        "baseColor": {
+          "value": "#dc322f",
+          "type": "color"
+        },
+        "cursorColor": {
+          "value": "#dc322f",
+          "type": "color"
+        },
+        "selectionColor": {
+          "value": "#dc322f3d",
+          "type": "color"
+        },
+        "borderColor": {
+          "value": "#dc322fcc",
+          "type": "color"
+        }
+      },
+      "8": {
+        "baseColor": {
+          "value": "#b58900",
+          "type": "color"
+        },
+        "cursorColor": {
+          "value": "#b58900",
+          "type": "color"
+        },
+        "selectionColor": {
+          "value": "#b589003d",
+          "type": "color"
+        },
+        "borderColor": {
+          "value": "#b58900cc",
+          "type": "color"
+        }
+      }
+    },
+    "shadowAlpha": {
+      "value": 0.32,
+      "type": "number"
+    }
+  },
+  "solarized-light": {
+    "meta": {
+      "themeName": "solarized-light"
+    },
+    "text": {
+      "primary": {
+        "value": "#073642",
+        "type": "color"
+      },
+      "secondary": {
+        "value": "#586e75",
+        "type": "color"
+      },
+      "muted": {
+        "value": "#586e75",
+        "type": "color"
+      },
+      "placeholder": {
+        "value": "#657b83",
+        "type": "color"
+      },
+      "active": {
+        "value": "#002b36",
+        "type": "color"
+      },
+      "feature": {
+        "value": "#268bd2",
+        "type": "color"
+      },
+      "ok": {
+        "value": "#859900",
+        "type": "color"
+      },
+      "error": {
+        "value": "#dc322f",
+        "type": "color"
+      },
+      "warning": {
+        "value": "#b58900",
+        "type": "color"
+      },
+      "info": {
+        "value": "#268bd2",
+        "type": "color"
+      }
+    },
+    "icon": {
+      "primary": {
+        "value": "#073642",
+        "type": "color"
+      },
+      "secondary": {
+        "value": "#586e75",
+        "type": "color"
+      },
+      "muted": {
+        "value": "#586e75",
+        "type": "color"
+      },
+      "placeholder": {
+        "value": "#657b83",
+        "type": "color"
+      },
+      "active": {
+        "value": "#002b36",
+        "type": "color"
+      },
+      "feature": {
+        "value": "#268bd2",
+        "type": "color"
+      },
+      "ok": {
+        "value": "#859900",
+        "type": "color"
+      },
+      "error": {
+        "value": "#dc322f",
+        "type": "color"
+      },
+      "warning": {
+        "value": "#b58900",
+        "type": "color"
+      },
+      "info": {
+        "value": "#268bd2",
+        "type": "color"
+      }
+    },
+    "background": {
+      "100": {
+        "base": {
+          "value": "#eee8d5",
+          "type": "color"
+        },
+        "hovered": {
+          "value": "#93a1a11f",
+          "type": "color"
+        },
+        "active": {
+          "value": "#93a1a12e",
+          "type": "color"
+        },
+        "focused": {
+          "value": "#93a1a1",
+          "type": "color"
+        }
+      },
+      "300": {
+        "base": {
+          "value": "#eee8d5",
+          "type": "color"
+        },
+        "hovered": {
+          "value": "#93a1a11f",
+          "type": "color"
+        },
+        "active": {
+          "value": "#93a1a12e",
+          "type": "color"
+        },
+        "focused": {
+          "value": "#93a1a1",
+          "type": "color"
+        }
+      },
+      "500": {
+        "base": {
+          "value": "#fdf6e3",
+          "type": "color"
+        },
+        "hovered": {
+          "value": "#eee8d5",
+          "type": "color"
+        },
+        "active": {
+          "value": "#eee8d5",
+          "type": "color"
+        },
+        "focused": {
+          "value": "#eee8d5",
+          "type": "color"
+        }
+      },
+      "on300": {
+        "base": {
+          "value": "#fdf6e3",
+          "type": "color"
+        },
+        "hovered": {
+          "value": "#eee8d5",
+          "type": "color"
+        },
+        "active": {
+          "value": "#eee8d5",
+          "type": "color"
+        },
+        "focused": {
+          "value": "#eee8d5",
+          "type": "color"
+        }
+      },
+      "on500": {
+        "base": {
+          "value": "#eee8d5",
+          "type": "color"
+        },
+        "hovered": {
+          "value": "#839496",
+          "type": "color"
+        },
+        "active": {
+          "value": "#839496",
+          "type": "color"
+        },
+        "focused": {
+          "value": "#839496",
+          "type": "color"
+        }
+      },
+      "ok": {
+        "base": {
+          "value": "#859900",
+          "type": "color"
+        },
+        "hovered": {
+          "value": "#859900",
+          "type": "color"
+        },
+        "active": {
+          "value": "#859900",
+          "type": "color"
+        },
+        "focused": {
+          "value": "#859900",
+          "type": "color"
+        }
+      },
+      "error": {
+        "base": {
+          "value": "#dc322f",
+          "type": "color"
+        },
+        "hovered": {
+          "value": "#dc322f",
+          "type": "color"
+        },
+        "active": {
+          "value": "#dc322f",
+          "type": "color"
+        },
+        "focused": {
+          "value": "#dc322f",
+          "type": "color"
+        }
+      },
+      "warning": {
+        "base": {
+          "value": "#b58900",
+          "type": "color"
+        },
+        "hovered": {
+          "value": "#b58900",
+          "type": "color"
+        },
+        "active": {
+          "value": "#b58900",
+          "type": "color"
+        },
+        "focused": {
+          "value": "#b58900",
+          "type": "color"
+        }
+      },
+      "info": {
+        "base": {
+          "value": "#268bd2",
+          "type": "color"
+        },
+        "hovered": {
+          "value": "#268bd2",
+          "type": "color"
+        },
+        "active": {
+          "value": "#268bd2",
+          "type": "color"
+        },
+        "focused": {
+          "value": "#268bd2",
+          "type": "color"
+        }
+      }
+    },
+    "border": {
+      "primary": {
+        "value": "#fdf6e3",
+        "type": "color"
+      },
+      "secondary": {
+        "value": "#eee8d5",
+        "type": "color"
+      },
+      "muted": {
+        "value": "#839496",
+        "type": "color"
+      },
+      "focused": {
+        "value": "#839496",
+        "type": "color"
+      },
+      "active": {
+        "value": "#839496",
+        "type": "color"
+      },
+      "ok": {
+        "value": "#859900",
+        "type": "color"
+      },
+      "error": {
+        "value": "#dc322f",
+        "type": "color"
+      },
+      "warning": {
+        "value": "#b58900",
+        "type": "color"
+      },
+      "info": {
+        "value": "#268bd2",
+        "type": "color"
+      }
+    },
+    "editor": {
+      "background": {
+        "value": "#fdf6e3",
+        "type": "color"
+      },
+      "indent_guide": {
+        "value": "#839496",
+        "type": "color"
+      },
+      "indent_guide_active": {
+        "value": "#eee8d5",
+        "type": "color"
+      },
+      "line": {
+        "active": {
+          "value": "#002b3612",
+          "type": "color"
+        },
+        "highlighted": {
+          "value": "#002b361f",
+          "type": "color"
+        },
+        "inserted": {
+          "value": "#859900",
+          "type": "color"
+        },
+        "deleted": {
+          "value": "#dc322f",
+          "type": "color"
+        },
+        "modified": {
+          "value": "#268bd2",
+          "type": "color"
+        }
+      },
+      "highlight": {
+        "selection": {
+          "value": "#268bd23d",
+          "type": "color"
+        },
+        "occurrence": {
+          "value": "#fdf6e31f",
+          "type": "color"
+        },
+        "activeOccurrence": {
+          "value": "#fdf6e329",
+          "type": "color"
+        },
+        "matchingBracket": {
+          "value": "#eee8d5",
+          "type": "color"
+        },
+        "match": {
+          "value": "#6c71c480",
+          "type": "color"
+        },
+        "activeMatch": {
+          "value": "#6c71c4b3",
+          "type": "color"
+        },
+        "related": {
+          "value": "#eee8d5",
+          "type": "color"
+        }
+      },
+      "gutter": {
+        "primary": {
+          "value": "#657b83",
+          "type": "color"
+        },
+        "active": {
+          "value": "#002b36",
+          "type": "color"
+        }
+      }
+    },
+    "syntax": {
+      "primary": {
+        "value": "#002b36",
+        "type": "color"
+      },
+      "comment": {
+        "value": "#586e75",
+        "type": "color"
+      },
+      "keyword": {
+        "value": "#268bd2",
+        "type": "color"
+      },
+      "function": {
+        "value": "#b58900",
+        "type": "color"
+      },
+      "type": {
+        "value": "#2aa198",
+        "type": "color"
+      },
+      "variant": {
+        "value": "#268bd2",
+        "type": "color"
+      },
+      "property": {
+        "value": "#268bd2",
+        "type": "color"
+      },
+      "enum": {
+        "value": "#cb4b16",
+        "type": "color"
+      },
+      "operator": {
+        "value": "#cb4b16",
+        "type": "color"
+      },
+      "string": {
+        "value": "#cb4b16",
+        "type": "color"
+      },
+      "number": {
+        "value": "#859900",
+        "type": "color"
+      },
+      "boolean": {
+        "value": "#859900",
+        "type": "color"
+      }
+    },
+    "player": {
+      "1": {
+        "baseColor": {
+          "value": "#268bd2",
+          "type": "color"
+        },
+        "cursorColor": {
+          "value": "#268bd2",
+          "type": "color"
+        },
+        "selectionColor": {
+          "value": "#268bd23d",
+          "type": "color"
+        },
+        "borderColor": {
+          "value": "#268bd2cc",
+          "type": "color"
+        }
+      },
+      "2": {
+        "baseColor": {
+          "value": "#859900",
+          "type": "color"
+        },
+        "cursorColor": {
+          "value": "#859900",
+          "type": "color"
+        },
+        "selectionColor": {
+          "value": "#8599003d",
+          "type": "color"
+        },
+        "borderColor": {
+          "value": "#859900cc",
+          "type": "color"
+        }
+      },
+      "3": {
+        "baseColor": {
+          "value": "#d33682",
+          "type": "color"
+        },
+        "cursorColor": {
+          "value": "#d33682",
+          "type": "color"
+        },
+        "selectionColor": {
+          "value": "#d336823d",
+          "type": "color"
+        },
+        "borderColor": {
+          "value": "#d33682cc",
+          "type": "color"
+        }
+      },
+      "4": {
+        "baseColor": {
+          "value": "#cb4b16",
+          "type": "color"
+        },
+        "cursorColor": {
+          "value": "#cb4b16",
+          "type": "color"
+        },
+        "selectionColor": {
+          "value": "#cb4b163d",
+          "type": "color"
+        },
+        "borderColor": {
+          "value": "#cb4b16cc",
+          "type": "color"
+        }
+      },
+      "5": {
+        "baseColor": {
+          "value": "#6c71c4",
+          "type": "color"
+        },
+        "cursorColor": {
+          "value": "#6c71c4",
+          "type": "color"
+        },
+        "selectionColor": {
+          "value": "#6c71c43d",
+          "type": "color"
+        },
+        "borderColor": {
+          "value": "#6c71c4cc",
+          "type": "color"
+        }
+      },
+      "6": {
+        "baseColor": {
+          "value": "#2aa198",
+          "type": "color"
+        },
+        "cursorColor": {
+          "value": "#2aa198",
+          "type": "color"
+        },
+        "selectionColor": {
+          "value": "#2aa1983d",
+          "type": "color"
+        },
+        "borderColor": {
+          "value": "#2aa198cc",
+          "type": "color"
+        }
+      },
+      "7": {
+        "baseColor": {
+          "value": "#dc322f",
+          "type": "color"
+        },
+        "cursorColor": {
+          "value": "#dc322f",
+          "type": "color"
+        },
+        "selectionColor": {
+          "value": "#dc322f3d",
+          "type": "color"
+        },
+        "borderColor": {
+          "value": "#dc322fcc",
+          "type": "color"
+        }
+      },
+      "8": {
+        "baseColor": {
+          "value": "#b58900",
+          "type": "color"
+        },
+        "cursorColor": {
+          "value": "#b58900",
+          "type": "color"
+        },
+        "selectionColor": {
+          "value": "#b589003d",
+          "type": "color"
+        },
+        "borderColor": {
+          "value": "#b58900cc",
           "type": "color"
         }
       }
diff --git a/styles/src/buildTokens.ts b/styles/src/buildTokens.ts
index ceedd27b21..8c224717af 100644
--- a/styles/src/buildTokens.ts
+++ b/styles/src/buildTokens.ts
@@ -2,8 +2,9 @@ import * as fs from "fs";
 import * as path from "path";
 import dark from "./themes/dark";
 import light from "./themes/light";
+import { light as solarizedLight, dark as solarizedDark } from "./themes/solarized";
 import Theme from "./themes/theme";
-import { colors, fontFamilies, fontSizes, fontWeights } from "./tokens";
+import { colors, fontFamilies, fontSizes, fontWeights, sizes } from "./tokens";
 
 // Organize theme tokens
 function themeTokens(theme: Theme) {
@@ -17,54 +18,18 @@ function themeTokens(theme: Theme) {
     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",
-      },
+      primary: theme.syntax.primary.color,
+      comment: theme.syntax.comment.color,
+      keyword: theme.syntax.keyword.color,
+      function: theme.syntax.function.color,
+      type: theme.syntax.type.color,
+      variant: theme.syntax.variant.color,
+      property: theme.syntax.property.color,
+      enum: theme.syntax.enum.color,
+      operator: theme.syntax.operator.color,
+      string: theme.syntax.string.color,
+      number: theme.syntax.number.color,
+      boolean: theme.syntax.boolean.color,
     },
     player: theme.player,
     shadowAlpha: theme.shadowAlpha,
@@ -73,14 +38,13 @@ function themeTokens(theme: Theme) {
 
 // Organize core tokens
 const coreTokens = {
-  color: {
-    ...colors,
-  },
+  color: colors,
   text: {
     family: fontFamilies,
     weight: fontWeights,
   },
-  size: fontSizes,
+  size: sizes,
+  fontSize: fontSizes,
 };
 
 const combinedTokens: any = {};
@@ -96,7 +60,7 @@ combinedTokens.core = coreTokens;
 
 // Add each theme to the combined tokens and write ${theme}.json.
 // We write `${theme}.json` as a separate file for the design team's convenience, but it isn't consumed by Figma Tokens directly.
-let themes = [dark, light];
+let themes = [dark, light, solarizedDark, solarizedLight];
 themes.forEach((theme) => {
   const themePath = `${distPath}/${theme.name}.json`
   fs.writeFileSync(themePath, JSON.stringify(themeTokens(theme), null, 2));
diff --git a/styles/src/tokens.ts b/styles/src/tokens.ts
index 4e97d8ea79..69fc05ff63 100644
--- a/styles/src/tokens.ts
+++ b/styles/src/tokens.ts
@@ -65,6 +65,27 @@ export const fontWeights = {
   "black": fontWeight("black"),
 }
 
+// Standard size unit used for paddings, margins, borders, etc.
+
+export type Size = number
+
+export type SizeToken = Token<Size, "size">;
+function size(value: Size): SizeToken {
+  return {
+    value,
+    type: "size"
+  };
+}
+
+export const sizes = {
+  px: size(1),
+  xs: size(2),
+  sm: size(4),
+  md: size(6),
+  lg: size(8),
+  xl: size(12),
+};
+
 export type Color = string;
 export interface ColorToken {
   value: Color,
@@ -104,5 +125,6 @@ export default {
   fontFamilies,
   fontSizes,
   fontWeights,
+  size,
   colors,
 };
diff --git a/styles/src/utils/color.ts b/styles/src/utils/color.ts
index 196c3d4e2e..f28de02fa1 100644
--- a/styles/src/utils/color.ts
+++ b/styles/src/utils/color.ts
@@ -2,7 +2,7 @@ import chroma, { Scale } from "chroma-js";
 import { ColorToken } from "../tokens";
 
 export type Color = string;
-export type ColorRampStep = { value: Color; type: "color"; step: number };
+export type ColorRampStep = { value: Color; type: "color"; description: string };
 export type ColorRamp = {
   [index: number]: ColorRampStep;
 };
@@ -36,7 +36,7 @@ export function colorRamp(
     const step = ix * increment;
     ramp[step] = {
       value: color,
-      step,
+      description: `Step: ${step}`,
       type: "color",
     };
   });