diff --git a/styles/.prettierignore b/styles/.prettierignore
index 04fe05da75..98aa9da7e0 100644
--- a/styles/.prettierignore
+++ b/styles/.prettierignore
@@ -1,2 +1,3 @@
 package-lock.json
-package.json
\ No newline at end of file
+package.json
+target
diff --git a/styles/package-lock.json b/styles/package-lock.json
index 19741d62b3..c03c27c1e8 100644
--- a/styles/package-lock.json
+++ b/styles/package-lock.json
@@ -11,6 +11,7 @@
             "dependencies": {
                 "@types/chroma-js": "^2.4.0",
                 "@types/node": "^18.14.1",
+                "ayu": "^8.0.1",
                 "bezier-easing": "^2.1.0",
                 "case-anything": "^2.1.10",
                 "chroma-js": "^2.4.2",
@@ -106,6 +107,16 @@
             "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
             "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA=="
         },
+        "node_modules/ayu": {
+            "version": "8.0.1",
+            "resolved": "https://registry.npmjs.org/ayu/-/ayu-8.0.1.tgz",
+            "integrity": "sha512-yuPZ2kZYQoYaPRQ/78F9rXDVx1rVGCJ1neBYithBoSprD6zPdIJdAKizUXG0jtTBu7nTFyAnVFFYuLnCS3cpDw==",
+            "dependencies": {
+                "@types/chroma-js": "^2.0.0",
+                "chroma-js": "^2.1.0",
+                "nonenumerable": "^1.1.1"
+            }
+        },
         "node_modules/bezier-easing": {
             "version": "2.1.0",
             "resolved": "https://registry.npmjs.org/bezier-easing/-/bezier-easing-2.1.0.tgz",
@@ -153,6 +164,11 @@
             "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
             "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw=="
         },
+        "node_modules/nonenumerable": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/nonenumerable/-/nonenumerable-1.1.1.tgz",
+            "integrity": "sha512-ptUD9w9D8WqW6fuJJkZNCImkf+0vdbgUTbRK3i7jsy3olqtH96hYE6Q/S3Tx9NWbcB/ocAjYshXCAUP0lZ9B4Q=="
+        },
         "node_modules/toml": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/toml/-/toml-3.0.0.tgz",
@@ -300,6 +316,16 @@
             "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
             "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA=="
         },
+        "ayu": {
+            "version": "8.0.1",
+            "resolved": "https://registry.npmjs.org/ayu/-/ayu-8.0.1.tgz",
+            "integrity": "sha512-yuPZ2kZYQoYaPRQ/78F9rXDVx1rVGCJ1neBYithBoSprD6zPdIJdAKizUXG0jtTBu7nTFyAnVFFYuLnCS3cpDw==",
+            "requires": {
+                "@types/chroma-js": "^2.0.0",
+                "chroma-js": "^2.1.0",
+                "nonenumerable": "^1.1.1"
+            }
+        },
         "bezier-easing": {
             "version": "2.1.0",
             "resolved": "https://registry.npmjs.org/bezier-easing/-/bezier-easing-2.1.0.tgz",
@@ -335,6 +361,11 @@
             "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
             "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw=="
         },
+        "nonenumerable": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/nonenumerable/-/nonenumerable-1.1.1.tgz",
+            "integrity": "sha512-ptUD9w9D8WqW6fuJJkZNCImkf+0vdbgUTbRK3i7jsy3olqtH96hYE6Q/S3Tx9NWbcB/ocAjYshXCAUP0lZ9B4Q=="
+        },
         "toml": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/toml/-/toml-3.0.0.tgz",
diff --git a/styles/package.json b/styles/package.json
index ad4dfcf561..5f103c5d6c 100644
--- a/styles/package.json
+++ b/styles/package.json
@@ -12,6 +12,7 @@
     "dependencies": {
         "@types/chroma-js": "^2.4.0",
         "@types/node": "^18.14.1",
+        "ayu": "^8.0.1",
         "bezier-easing": "^2.1.0",
         "case-anything": "^2.1.10",
         "chroma-js": "^2.4.2",
diff --git a/styles/src/styleTree/components.ts b/styles/src/styleTree/components.ts
index 6b21eec405..efd4a95672 100644
--- a/styles/src/styleTree/components.ts
+++ b/styles/src/styleTree/components.ts
@@ -281,14 +281,18 @@ export function border(
     }
 }
 
-
-export function svg(color: string, asset: String, width: Number, height: Number) {
+export function svg(
+    color: string,
+    asset: String,
+    width: Number,
+    height: Number
+) {
     return {
         color,
         asset,
         dimensions: {
             width,
             height,
-        }
+        },
     }
 }
diff --git a/styles/src/styleTree/copilot.ts b/styles/src/styleTree/copilot.ts
index c2df2e5d40..9fa86cd741 100644
--- a/styles/src/styleTree/copilot.ts
+++ b/styles/src/styleTree/copilot.ts
@@ -1,13 +1,13 @@
 import { ColorScheme } from "../themes/common/colorScheme"
-import { background, border, foreground, svg, text } from "./components";
-
+import { background, border, foreground, svg, text } from "./components"
 
 export default function copilot(colorScheme: ColorScheme) {
-    let layer = colorScheme.middle;
+    let layer = colorScheme.middle
 
-    let content_width = 264;
+    let content_width = 264
 
-    let ctaButton = { // Copied from welcome screen. FIXME: Move this into a ZDS component
+    let ctaButton = {
+        // Copied from welcome screen. FIXME: Move this into a ZDS component
         background: background(layer),
         border: border(layer, "default"),
         cornerRadius: 4,
@@ -15,7 +15,7 @@ export default function copilot(colorScheme: ColorScheme) {
             top: 4,
             bottom: 4,
             left: 8,
-            right: 8
+            right: 8,
         },
         padding: {
             top: 3,
@@ -29,22 +29,32 @@ export default function copilot(colorScheme: ColorScheme) {
             background: background(layer, "hovered"),
             border: border(layer, "active"),
         },
-    };
+    }
 
     return {
         outLinkIcon: {
-            icon: svg(foreground(layer, "variant"), "icons/link_out_12.svg", 12, 12),
+            icon: svg(
+                foreground(layer, "variant"),
+                "icons/link_out_12.svg",
+                12,
+                12
+            ),
             container: {
                 cornerRadius: 6,
                 padding: { left: 6 },
             },
             hover: {
-                icon: svg(foreground(layer, "hovered"), "icons/link_out_12.svg", 12, 12)
+                icon: svg(
+                    foreground(layer, "hovered"),
+                    "icons/link_out_12.svg",
+                    12,
+                    12
+                ),
             },
         },
         modal: {
             titleText: {
-                ...text(layer, "sans", { size: "xs", "weight": "bold" })
+                ...text(layer, "sans", { size: "xs", weight: "bold" }),
             },
             titlebar: {
                 background: background(colorScheme.lowest),
@@ -54,7 +64,7 @@ export default function copilot(colorScheme: ColorScheme) {
                     bottom: 4,
                     left: 8,
                     right: 8,
-                }
+                },
             },
             container: {
                 background: background(colorScheme.lowest),
@@ -63,10 +73,15 @@ export default function copilot(colorScheme: ColorScheme) {
                     left: 0,
                     right: 0,
                     bottom: 8,
-                }
+                },
             },
             closeIcon: {
-                icon: svg(foreground(layer, "variant"), "icons/x_mark_8.svg", 8, 8),
+                icon: svg(
+                    foreground(layer, "variant"),
+                    "icons/x_mark_8.svg",
+                    8,
+                    8
+                ),
                 container: {
                     cornerRadius: 2,
                     padding: {
@@ -76,15 +91,25 @@ export default function copilot(colorScheme: ColorScheme) {
                         right: 4,
                     },
                     margin: {
-                        right: 0
-                    }
+                        right: 0,
+                    },
                 },
                 hover: {
-                    icon: svg(foreground(layer, "on"), "icons/x_mark_8.svg", 8, 8),
+                    icon: svg(
+                        foreground(layer, "on"),
+                        "icons/x_mark_8.svg",
+                        8,
+                        8
+                    ),
                 },
                 clicked: {
-                    icon: svg(foreground(layer, "base"), "icons/x_mark_8.svg", 8, 8),
-                }
+                    icon: svg(
+                        foreground(layer, "base"),
+                        "icons/x_mark_8.svg",
+                        8,
+                        8
+                    ),
+                },
             },
             dimensions: {
                 width: 280,
@@ -98,14 +123,19 @@ export default function copilot(colorScheme: ColorScheme) {
             ctaButton,
 
             header: {
-                icon: svg(foreground(layer, "default"), "icons/zed_plus_copilot_32.svg", 92, 32),
+                icon: svg(
+                    foreground(layer, "default"),
+                    "icons/zed_plus_copilot_32.svg",
+                    92,
+                    32
+                ),
                 container: {
                     margin: {
                         top: 35,
                         bottom: 5,
                         left: 0,
-                        right: 0
-                    }
+                        right: 0,
+                    },
                 },
             },
 
@@ -116,21 +146,20 @@ export default function copilot(colorScheme: ColorScheme) {
                         top: 6,
                         bottom: 12,
                         left: 0,
-                        right: 0
-                    }
+                        right: 0,
+                    },
                 },
 
                 hint: {
                     ...text(layer, "sans", { size: "xs", color: "#838994" }),
                     margin: {
                         top: 6,
-                        bottom: 2
-                    }
+                        bottom: 2,
+                    },
                 },
 
                 deviceCode: {
-                    text:
-                        text(layer, "mono", { size: "sm" }),
+                    text: text(layer, "mono", { size: "sm" }),
                     cta: {
                         ...ctaButton,
                         background: background(colorScheme.lowest),
@@ -144,7 +173,7 @@ export default function copilot(colorScheme: ColorScheme) {
                         margin: {
                             left: 16,
                             right: 16,
-                        }
+                        },
                     },
                     left: content_width / 2,
                     leftContainer: {
@@ -155,9 +184,14 @@ export default function copilot(colorScheme: ColorScheme) {
                             right: 6,
                         },
                     },
-                    right: content_width * 1 / 3,
+                    right: (content_width * 1) / 3,
                     rightContainer: {
-                        border: border(colorScheme.lowest, "inverted", { bottom: false, right: false, top: false, left: true }),
+                        border: border(colorScheme.lowest, "inverted", {
+                            bottom: false,
+                            right: false,
+                            top: false,
+                            left: true,
+                        }),
                         padding: {
                             top: 3,
                             bottom: 5,
@@ -165,9 +199,14 @@ export default function copilot(colorScheme: ColorScheme) {
                             right: 0,
                         },
                         hover: {
-                            border: border(layer, "active", { bottom: false, right: false, top: false, left: true }),
+                            border: border(layer, "active", {
+                                bottom: false,
+                                right: false,
+                                top: false,
+                                left: true,
+                            }),
                         },
-                    }
+                    },
                 },
             },
 
@@ -179,12 +218,15 @@ export default function copilot(colorScheme: ColorScheme) {
                         top: 16,
                         bottom: 16,
                         left: 0,
-                        right: 0
-                    }
+                        right: 0,
+                    },
                 },
 
                 warning: {
-                    ...text(layer, "sans", { size: "xs", color: foreground(layer, "warning") }),
+                    ...text(layer, "sans", {
+                        size: "xs",
+                        color: foreground(layer, "warning"),
+                    }),
                     border: border(layer, "warning"),
                     background: background(layer, "warning"),
                     cornerRadius: 2,
@@ -197,8 +239,8 @@ export default function copilot(colorScheme: ColorScheme) {
                     margin: {
                         bottom: 16,
                         left: 8,
-                        right: 8
-                    }
+                        right: 8,
+                    },
                 },
             },
 
@@ -208,19 +250,18 @@ export default function copilot(colorScheme: ColorScheme) {
 
                     margin: {
                         top: 16,
-                        bottom: 16
-                    }
+                        bottom: 16,
+                    },
                 },
 
                 hint: {
                     ...text(layer, "sans", { size: "xs", color: "#838994" }),
                     margin: {
                         top: 24,
-                        bottom: 4
-                    }
+                        bottom: 4,
+                    },
                 },
-
             },
-        }
+        },
     }
 }
diff --git a/styles/src/styleTree/simpleMessageNotification.ts b/styles/src/styleTree/simpleMessageNotification.ts
index dde689e9bd..2e057ed783 100644
--- a/styles/src/styleTree/simpleMessageNotification.ts
+++ b/styles/src/styleTree/simpleMessageNotification.ts
@@ -23,7 +23,6 @@ export default function simpleMessageNotification(
                 right: 7,
             },
 
-
             margin: { left: headerPadding, top: 6, bottom: 6 },
             hover: {
                 ...text(layer, "sans", "default", { size: "xs" }),
diff --git a/styles/src/styleTree/workspace.ts b/styles/src/styleTree/workspace.ts
index f0dbaad54a..9b53ecc5d2 100644
--- a/styles/src/styleTree/workspace.ts
+++ b/styles/src/styleTree/workspace.ts
@@ -1,6 +1,13 @@
 import { ColorScheme } from "../themes/common/colorScheme"
 import { withOpacity } from "../utils/color"
-import { background, border, borderColor, foreground, svg, text } from "./components"
+import {
+    background,
+    border,
+    borderColor,
+    foreground,
+    svg,
+    text,
+} from "./components"
 import statusBar from "./statusBar"
 import tabBar from "./tabBar"
 
@@ -46,14 +53,24 @@ export default function workspace(colorScheme: ColorScheme) {
                 width: 256,
                 height: 256,
             },
-            logo: svg(withOpacity("#000000", colorScheme.isLight ? 0.6 : 0.8), "icons/logo_96.svg", 256, 256),
+            logo: svg(
+                withOpacity("#000000", colorScheme.isLight ? 0.6 : 0.8),
+                "icons/logo_96.svg",
+                256,
+                256
+            ),
 
-            logoShadow: svg(withOpacity(
-                colorScheme.isLight
-                    ? "#FFFFFF"
-                    : colorScheme.lowest.base.default.background,
-                colorScheme.isLight ? 1 : 0.6
-            ), "icons/logo_96.svg", 256, 256),
+            logoShadow: svg(
+                withOpacity(
+                    colorScheme.isLight
+                        ? "#FFFFFF"
+                        : colorScheme.lowest.base.default.background,
+                    colorScheme.isLight ? 1 : 0.6
+                ),
+                "icons/logo_96.svg",
+                256,
+                256
+            ),
             keyboardHints: {
                 margin: {
                     top: 96,
@@ -273,11 +290,7 @@ export default function workspace(colorScheme: ColorScheme) {
             },
             hover: {
                 color: foreground(colorScheme.highest, "on", "hovered"),
-                background: background(
-                    colorScheme.highest,
-                    "on",
-                    "hovered"
-                ),
+                background: background(colorScheme.highest, "on", "hovered"),
             },
         },
         disconnectedOverlay: {
diff --git a/styles/src/themes/ayu-dark.ts b/styles/src/themes/ayu-dark.ts
new file mode 100644
index 0000000000..c7e86994fe
--- /dev/null
+++ b/styles/src/themes/ayu-dark.ts
@@ -0,0 +1,17 @@
+import { createColorScheme } from "./common/ramps"
+import { ayu, meta as themeMeta, buildTheme } from "./common/ayu-common"
+
+export const meta = {
+    ...themeMeta,
+    name: `${themeMeta.name} Dark`
+}
+
+const variant = ayu.dark
+const theme = buildTheme(variant, false)
+
+export const dark = createColorScheme(
+    meta.name,
+    false,
+    theme.ramps,
+    theme.syntax
+)
diff --git a/styles/src/themes/ayu-light.ts b/styles/src/themes/ayu-light.ts
new file mode 100644
index 0000000000..9acabf6a39
--- /dev/null
+++ b/styles/src/themes/ayu-light.ts
@@ -0,0 +1,17 @@
+import { createColorScheme } from "./common/ramps"
+import { ayu, meta as themeMeta, buildTheme } from "./common/ayu-common"
+
+export const meta = {
+    ...themeMeta,
+    name: `${themeMeta.name} Light`
+}
+
+const variant = ayu.light
+const theme = buildTheme(variant, true)
+
+export const light = createColorScheme(
+    meta.name,
+    true,
+    theme.ramps,
+    theme.syntax
+)
diff --git a/styles/src/themes/ayu-mirage.ts b/styles/src/themes/ayu-mirage.ts
new file mode 100644
index 0000000000..2a01512673
--- /dev/null
+++ b/styles/src/themes/ayu-mirage.ts
@@ -0,0 +1,17 @@
+import { createColorScheme } from "./common/ramps"
+import { ayu, meta as themeMeta, buildTheme } from "./common/ayu-common"
+
+export const meta = {
+    ...themeMeta,
+    name: `${themeMeta.name} Mirage`
+}
+
+const variant = ayu.mirage
+const theme = buildTheme(variant, false)
+
+export const dark = createColorScheme(
+    meta.name,
+    false,
+    theme.ramps,
+    theme.syntax
+)
diff --git a/styles/src/themes/common/ayu-common.ts b/styles/src/themes/common/ayu-common.ts
new file mode 100644
index 0000000000..f08817ef49
--- /dev/null
+++ b/styles/src/themes/common/ayu-common.ts
@@ -0,0 +1,90 @@
+import { dark, light, mirage } from "ayu"
+import { ThemeSyntax } from "./syntax"
+import chroma from "chroma-js"
+import { colorRamp } from "./ramps"
+import { Meta } from "./colorScheme"
+
+export const ayu = {
+    dark,
+    light,
+    mirage,
+}
+
+export const buildTheme = (t: typeof dark, light: boolean) => {
+    const color = {
+        lightBlue: t.syntax.tag.hex(),
+        yellow: t.syntax.func.hex(),
+        blue: t.syntax.entity.hex(),
+        green: t.syntax.string.hex(),
+        teal: t.syntax.regexp.hex(),
+        red: t.syntax.markup.hex(),
+        orange: t.syntax.keyword.hex(),
+        lightYellow: t.syntax.special.hex(),
+        gray: t.syntax.comment.hex(),
+        purple: t.syntax.constant.hex(),
+    }
+
+    const syntax: ThemeSyntax = {
+        constant: { color: t.syntax.constant.hex() },
+        "string.regex": { color: t.syntax.regexp.hex() },
+        string: { color: t.syntax.string.hex() },
+        comment: { color: t.syntax.comment.hex() },
+        keyword: { color: t.syntax.keyword.hex() },
+        operator: { color: t.syntax.operator.hex() },
+        number: { color: t.syntax.constant.hex() },
+        type: { color: color.blue },
+        boolean: { color: color.purple },
+        "punctuation.special": { color: color.purple },
+        "string.special": { color: t.syntax.special.hex() },
+        function: { color: t.syntax.func.hex() },
+    }
+
+    return {
+        ramps: {
+            neutral: chroma.scale([
+                light ? t.editor.fg.hex() : t.editor.bg.hex(),
+                light ? t.editor.bg.hex() : t.editor.fg.hex(),
+            ]),
+            red: colorRamp(chroma(color.red)),
+            orange: colorRamp(chroma(color.orange)),
+            yellow: colorRamp(chroma(color.yellow)),
+            green: colorRamp(chroma(color.green)),
+            cyan: colorRamp(chroma(color.teal)),
+            blue: colorRamp(chroma(color.blue)),
+            violet: colorRamp(chroma(color.purple)),
+            magenta: colorRamp(chroma(color.lightBlue)),
+        },
+        syntax,
+    }
+}
+
+export const buildSyntax = (t: typeof dark): ThemeSyntax => {
+    return {
+        constant: { color: t.syntax.constant.hex() },
+        "string.regex": { color: t.syntax.regexp.hex() },
+        string: { color: t.syntax.string.hex() },
+        comment: { color: t.syntax.comment.hex() },
+        keyword: { color: t.syntax.keyword.hex() },
+        operator: { color: t.syntax.operator.hex() },
+        number: { color: t.syntax.constant.hex() },
+        type: { color: t.syntax.regexp.hex() },
+        "punctuation.special": { color: t.syntax.special.hex() },
+        "string.special": { color: t.syntax.special.hex() },
+        function: { color: t.syntax.func.hex() },
+    }
+}
+
+export const meta: Meta = {
+    name: "Ayu",
+    author: "dempfi",
+    license: {
+        SPDX: "MIT",
+        license_text: {
+            https_url:
+                "https://raw.githubusercontent.com/dempfi/ayu/master/LICENSE",
+            license_checksum:
+                "e0af0e0d1754c18ca075649d42f5c6d9a60f8bdc03c20dfd97105f2253a94173",
+        },
+    },
+    url: "https://github.com/dempfi/ayu",
+}
diff --git a/styles/src/themes/staff/ayu-mirage.ts b/styles/src/themes/staff/ayu-mirage.ts
deleted file mode 100644
index 5b832699b4..0000000000
--- a/styles/src/themes/staff/ayu-mirage.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import chroma from "chroma-js"
-import { colorRamp, createColorScheme } from "../common/ramps"
-
-const name = "Ayu"
-const author = "Konstantin Pschera <me@kons.ch>"
-const url = "https://github.com/ayu-theme/ayu-colors"
-const license = {
-    type: "MIT",
-    url: "https://github.com/ayu-theme/ayu-colors/blob/master/license",
-}
-
-export const dark = createColorScheme(`${name} Mirage`, false, {
-    neutral: chroma.scale([
-        "#171B24",
-        "#1F2430",
-        "#242936",
-        "#707A8C",
-        "#8A9199",
-        "#CCCAC2",
-        "#D9D7CE",
-        "#F3F4F5",
-    ]),
-    red: colorRamp(chroma("#F28779")),
-    orange: colorRamp(chroma("#FFAD66")),
-    yellow: colorRamp(chroma("#FFD173")),
-    green: colorRamp(chroma("#D5FF80")),
-    cyan: colorRamp(chroma("#95E6CB")),
-    blue: colorRamp(chroma("#5CCFE6")),
-    violet: colorRamp(chroma("#D4BFFF")),
-    magenta: colorRamp(chroma("#F29E74")),
-})
diff --git a/styles/src/themes/staff/ayu.ts b/styles/src/themes/staff/ayu.ts
deleted file mode 100644
index 24fcdb951b..0000000000
--- a/styles/src/themes/staff/ayu.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import chroma from "chroma-js"
-import { colorRamp, createColorScheme } from "../common/ramps"
-
-const name = "Ayu"
-const author = "Konstantin Pschera <me@kons.ch>"
-const url = "https://github.com/ayu-theme/ayu-colors"
-const license = {
-    type: "MIT",
-    url: "https://github.com/ayu-theme/ayu-colors/blob/master/license",
-}
-
-export const dark = createColorScheme(`${name} Dark`, false, {
-    neutral: chroma.scale([
-        "#0F1419",
-        "#131721",
-        "#272D38",
-        "#3E4B59",
-        "#BFBDB6",
-        "#E6E1CF",
-        "#E6E1CF",
-        "#F3F4F5",
-    ]),
-    red: colorRamp(chroma("#F07178")),
-    orange: colorRamp(chroma("#FF8F40")),
-    yellow: colorRamp(chroma("#FFB454")),
-    green: colorRamp(chroma("#B8CC52")),
-    cyan: colorRamp(chroma("#95E6CB")),
-    blue: colorRamp(chroma("#59C2FF")),
-    violet: colorRamp(chroma("#D2A6FF")),
-    magenta: colorRamp(chroma("#E6B673")),
-})
-
-export const light = createColorScheme(`${name} Light`, true, {
-    neutral: chroma.scale([
-        "#1A1F29",
-        "#242936",
-        "#5C6773",
-        "#828C99",
-        "#ABB0B6",
-        "#F8F9FA",
-        "#F3F4F5",
-        "#FAFAFA",
-    ]),
-    red: colorRamp(chroma("#F07178")),
-    orange: colorRamp(chroma("#FA8D3E")),
-    yellow: colorRamp(chroma("#F2AE49")),
-    green: colorRamp(chroma("#86B300")),
-    cyan: colorRamp(chroma("#4CBF99")),
-    blue: colorRamp(chroma("#36A3D9")),
-    violet: colorRamp(chroma("#A37ACC")),
-    magenta: colorRamp(chroma("#E6BA7E")),
-})