diff --git a/styles/src/buildThemes.ts b/styles/src/buildThemes.ts
index 8967697dad..2ea809f09e 100644
--- a/styles/src/buildThemes.ts
+++ b/styles/src/buildThemes.ts
@@ -2,7 +2,10 @@ import * as fs from "fs";
 import * as path from "path";
 import { tmpdir } from "os";
 import app from "./styleTree/app";
-import colorSchemes, { internalColorSchemes, experimentalColorSchemes } from "./colorSchemes";
+import colorSchemes, {
+  internalColorSchemes,
+  experimentalColorSchemes,
+} from "./colorSchemes";
 import snakeCase from "./utils/snakeCase";
 import { ColorScheme } from "./themes/common/colorScheme";
 
diff --git a/styles/src/colorSchemes.ts b/styles/src/colorSchemes.ts
index 97faeab80e..746443119d 100644
--- a/styles/src/colorSchemes.ts
+++ b/styles/src/colorSchemes.ts
@@ -6,11 +6,10 @@ const colorSchemes: ColorScheme[] = [];
 export default colorSchemes;
 
 const internalColorSchemes: ColorScheme[] = [];
-export { internalColorSchemes }
+export { internalColorSchemes };
 
 const experimentalColorSchemes: ColorScheme[] = [];
-export { experimentalColorSchemes }
-
+export { experimentalColorSchemes };
 
 function fillColorSchemes(themesPath: string, colorSchemes: ColorScheme[]) {
   for (const fileName of fs.readdirSync(themesPath)) {
@@ -25,7 +24,12 @@ function fillColorSchemes(themesPath: string, colorSchemes: ColorScheme[]) {
   }
 }
 
-fillColorSchemes(path.resolve(`${__dirname}/themes`), colorSchemes)
-fillColorSchemes(path.resolve(`${__dirname}/themes/internal`), internalColorSchemes)
-fillColorSchemes(path.resolve(`${__dirname}/themes/experiments`), experimentalColorSchemes)
-
+fillColorSchemes(path.resolve(`${__dirname}/themes`), colorSchemes);
+fillColorSchemes(
+  path.resolve(`${__dirname}/themes/internal`),
+  internalColorSchemes
+);
+fillColorSchemes(
+  path.resolve(`${__dirname}/themes/experiments`),
+  experimentalColorSchemes
+);
diff --git a/styles/src/styleTree/app.ts b/styles/src/styleTree/app.ts
index 1a78de0587..23d980ba4e 100644
--- a/styles/src/styleTree/app.ts
+++ b/styles/src/styleTree/app.ts
@@ -24,7 +24,7 @@ export default function app(colorScheme: ColorScheme): Object {
   return {
     meta: {
       name: colorScheme.name,
-      isLight: colorScheme.isLight
+      isLight: colorScheme.isLight,
     },
     picker: picker(colorScheme),
     workspace: workspace(colorScheme),
@@ -61,7 +61,7 @@ export default function app(colorScheme: ColorScheme): Object {
           blue: colorScheme.lowest.ramps.blue.colors(100, "hex"),
           violet: colorScheme.lowest.ramps.violet.colors(100, "hex"),
           magenta: colorScheme.lowest.ramps.magenta.colors(100, "hex"),
-        }
+        },
       },
       middle: {
         ...colorScheme.middle,
@@ -75,7 +75,7 @@ export default function app(colorScheme: ColorScheme): Object {
           blue: colorScheme.middle.ramps.blue.colors(100, "hex"),
           violet: colorScheme.middle.ramps.violet.colors(100, "hex"),
           magenta: colorScheme.middle.ramps.magenta.colors(100, "hex"),
-        }
+        },
       },
       highest: {
         ...colorScheme.highest,
@@ -89,7 +89,7 @@ export default function app(colorScheme: ColorScheme): Object {
           blue: colorScheme.highest.ramps.blue.colors(100, "hex"),
           violet: colorScheme.highest.ramps.violet.colors(100, "hex"),
           magenta: colorScheme.highest.ramps.magenta.colors(100, "hex"),
-        }
+        },
       },
       players: [
         colorScheme.players["0"],
@@ -100,7 +100,7 @@ export default function app(colorScheme: ColorScheme): Object {
         colorScheme.players["5"],
         colorScheme.players["6"],
         colorScheme.players["7"],
-      ]
-    }
+      ],
+    },
   };
 }
diff --git a/styles/src/styleTree/components.ts b/styles/src/styleTree/components.ts
index b6fcb35e48..8170d38577 100644
--- a/styles/src/styleTree/components.ts
+++ b/styles/src/styleTree/components.ts
@@ -2,12 +2,24 @@ import { fontFamilies, fontSizes, FontWeight } from "../common";
 import { Layer, Styles, StyleSets, Style } from "../themes/common/colorScheme";
 
 function isStyleSet(key: any): key is StyleSets {
-  return ["base", "variant", "on", "info", "positive", "warning", "negative"].includes(key);
+  return [
+    "base",
+    "variant",
+    "on",
+    "info",
+    "positive",
+    "warning",
+    "negative",
+  ].includes(key);
 }
 function isStyle(key: any): key is Styles {
   return ["default", "active", "disabled", "hovered", "pressed"].includes(key);
 }
-function getStyle(layer: Layer, possibleStyleSetOrStyle?: any, possibleStyle?: any): Style {
+function getStyle(
+  layer: Layer,
+  possibleStyleSetOrStyle?: any,
+  possibleStyle?: any
+): Style {
   let styleSet: StyleSets = "base";
   let style: Styles = "default";
   if (isStyleSet(possibleStyleSetOrStyle)) {
@@ -24,29 +36,53 @@ function getStyle(layer: Layer, possibleStyleSetOrStyle?: any, possibleStyle?: a
 }
 
 export function background(layer: Layer, style?: Styles): string;
-export function background(layer: Layer, styleSet?: StyleSets, style?: Styles): string;
-export function background(layer: Layer, styleSetOrStyles?: StyleSets | Styles, style?: Styles): string {
+export function background(
+  layer: Layer,
+  styleSet?: StyleSets,
+  style?: Styles
+): string;
+export function background(
+  layer: Layer,
+  styleSetOrStyles?: StyleSets | Styles,
+  style?: Styles
+): string {
   return getStyle(layer, styleSetOrStyles, style).background;
 }
 
 export function borderColor(layer: Layer, style?: Styles): string;
-export function borderColor(layer: Layer, styleSet?: StyleSets, style?: Styles): string;
-export function borderColor(layer: Layer, styleSetOrStyles?: StyleSets | Styles, style?: Styles): string {
+export function borderColor(
+  layer: Layer,
+  styleSet?: StyleSets,
+  style?: Styles
+): string;
+export function borderColor(
+  layer: Layer,
+  styleSetOrStyles?: StyleSets | Styles,
+  style?: Styles
+): string {
   return getStyle(layer, styleSetOrStyles, style).border;
 }
 
 export function foreground(layer: Layer, style?: Styles): string;
-export function foreground(layer: Layer, styleSet?: StyleSets, style?: Styles): string;
-export function foreground(layer: Layer, styleSetOrStyles?: StyleSets | Styles, style?: Styles): string {
+export function foreground(
+  layer: Layer,
+  styleSet?: StyleSets,
+  style?: Styles
+): string;
+export function foreground(
+  layer: Layer,
+  styleSetOrStyles?: StyleSets | Styles,
+  style?: Styles
+): string {
   return getStyle(layer, styleSetOrStyles, style).foreground;
 }
 
 interface Text {
-  family: keyof typeof fontFamilies,
-  color: string,
-  size: number,
-  weight?: FontWeight,
-  underline?: boolean,
+  family: keyof typeof fontFamilies;
+  color: string;
+  size: number;
+  weight?: FontWeight;
+  underline?: boolean;
 }
 
 interface TextProperties {
@@ -66,16 +102,19 @@ export function text(
   layer: Layer,
   fontFamily: keyof typeof fontFamilies,
   styleSet: StyleSets,
-  properties?: TextProperties): Text;
+  properties?: TextProperties
+): Text;
 export function text(
   layer: Layer,
   fontFamily: keyof typeof fontFamilies,
   style: Styles,
-  properties?: TextProperties): Text;
+  properties?: TextProperties
+): Text;
 export function text(
   layer: Layer,
   fontFamily: keyof typeof fontFamilies,
-  properties?: TextProperties): Text;
+  properties?: TextProperties
+): Text;
 export function text(
   layer: Layer,
   fontFamily: keyof typeof fontFamilies,
@@ -101,10 +140,9 @@ export function text(
   };
 }
 
-
 export interface Border {
-  color: string,
-  width: number,
+  color: string;
+  width: number;
   top?: boolean;
   bottom?: boolean;
   left?: boolean;
@@ -137,10 +175,7 @@ export function border(
   style: Styles,
   properties?: BorderProperties
 ): Border;
-export function border(
-  layer: Layer,
-  properties?: BorderProperties
-): Border;
+export function border(layer: Layer, properties?: BorderProperties): Border;
 export function border(
   layer: Layer,
   styleSetStyleOrProperties?: StyleSets | Styles | BorderProperties,
@@ -161,4 +196,4 @@ export function border(
     width: 1,
     ...properties,
   };
-}
\ No newline at end of file
+}
diff --git a/styles/src/styleTree/contactsPopover.ts b/styles/src/styleTree/contactsPopover.ts
index 585af70fbd..1131a5be4a 100644
--- a/styles/src/styleTree/contactsPopover.ts
+++ b/styles/src/styleTree/contactsPopover.ts
@@ -4,5 +4,5 @@ import { background } from "./components";
 export default function workspace(colorScheme: ColorScheme) {
   return {
     background: background(colorScheme.lowest.middle),
-  }
+  };
 }
diff --git a/styles/src/styleTree/contextMenu.ts b/styles/src/styleTree/contextMenu.ts
index b80c6757e8..fcdf855e56 100644
--- a/styles/src/styleTree/contextMenu.ts
+++ b/styles/src/styleTree/contextMenu.ts
@@ -1,10 +1,5 @@
 import { ColorScheme } from "../themes/common/colorScheme";
-import {
-  background,
-  border,
-  borderColor,
-  text,
-} from "./components";
+import { background, border, borderColor, text } from "./components";
 
 export default function contextMenu(colorScheme: ColorScheme) {
   let elevation = colorScheme.middle;
diff --git a/styles/src/styleTree/editor.ts b/styles/src/styleTree/editor.ts
index 3b4a46141b..430d366b71 100644
--- a/styles/src/styleTree/editor.ts
+++ b/styles/src/styleTree/editor.ts
@@ -1,5 +1,10 @@
 import { fontWeights } from "../common";
-import { ColorScheme, Elevation, Layer, StyleSets } from "../themes/common/colorScheme";
+import {
+  ColorScheme,
+  Elevation,
+  Layer,
+  StyleSets,
+} from "../themes/common/colorScheme";
 import { withOpacity } from "../utils/color";
 import {
   background,
@@ -30,7 +35,7 @@ export default function editor(colorScheme: ColorScheme) {
       header: {
         border: border(layer, {
           top: true,
-        })
+        }),
       },
       message: {
         text: text(layer, "sans", styleSet, { size: "sm" }),
@@ -129,7 +134,7 @@ export default function editor(colorScheme: ColorScheme) {
       weight: fontWeights.normal,
       italic: true,
     },
-  }
+  };
 
   return {
     textColor: syntax.primary.color,
@@ -138,12 +143,18 @@ export default function editor(colorScheme: ColorScheme) {
     highlightedLineBackground: background(layer, "on"),
     codeActions: {
       indicator: foreground(layer, "variant"),
-      verticalScale: 0.55
+      verticalScale: 0.55,
     },
     diffBackgroundDeleted: background(layer, "negative"),
     diffBackgroundInserted: background(layer, "positive"),
-    documentHighlightReadBackground: elevation.ramps.neutral(0.5).alpha(0.2).hex(), // TODO: This was blend
-    documentHighlightWriteBackground: elevation.ramps.neutral(0.5).alpha(0.4).hex(), // TODO: This was blend * 2
+    documentHighlightReadBackground: elevation.ramps
+      .neutral(0.5)
+      .alpha(0.2)
+      .hex(), // TODO: This was blend
+    documentHighlightWriteBackground: elevation.ramps
+      .neutral(0.5)
+      .alpha(0.4)
+      .hex(), // TODO: This was blend * 2
     errorColor: foreground(layer, "negative"),
     gutterBackground: background(layer),
     gutterPaddingFactor: 3.5,
diff --git a/styles/src/styleTree/hoverPopover.ts b/styles/src/styleTree/hoverPopover.ts
index 9e7022d191..56121f20e2 100644
--- a/styles/src/styleTree/hoverPopover.ts
+++ b/styles/src/styleTree/hoverPopover.ts
@@ -10,7 +10,7 @@ export default function HoverPopover(elevation: Elevation) {
       left: 8,
       right: 8,
       top: 4,
-      bottom: 4
+      bottom: 4,
     },
     shadow: elevation.shadow,
     border: border(layer),
diff --git a/styles/src/styleTree/picker.ts b/styles/src/styleTree/picker.ts
index 412e0c1bee..22b91e8d92 100644
--- a/styles/src/styleTree/picker.ts
+++ b/styles/src/styleTree/picker.ts
@@ -1,9 +1,5 @@
 import { ColorScheme } from "../themes/common/colorScheme";
-import {
-  background,
-  border,
-  text,
-} from "./components";
+import { background, border, text } from "./components";
 
 export default function picker(colorScheme: ColorScheme) {
   let elevation = colorScheme.highest;
@@ -14,7 +10,7 @@ export default function picker(colorScheme: ColorScheme) {
     shadow: elevation.shadow,
     cornerRadius: 12,
     padding: {
-      bottom: 4
+      bottom: 4,
     },
     item: {
       padding: {
@@ -26,7 +22,7 @@ export default function picker(colorScheme: ColorScheme) {
       margin: {
         top: 1,
         left: 4,
-        right: 4
+        right: 4,
       },
       cornerRadius: 8,
       text: text(layer, "sans", "variant"),
@@ -34,7 +30,9 @@ export default function picker(colorScheme: ColorScheme) {
       active: {
         background: background(layer, "active"),
         text: text(layer, "sans", "active"),
-        highlightText: text(layer, "sans", "info", "active", { weight: "bold" }),
+        highlightText: text(layer, "sans", "info", "active", {
+          weight: "bold",
+        }),
       },
       hover: {
         background: background(layer, "hovered"),
@@ -61,8 +59,8 @@ export default function picker(colorScheme: ColorScheme) {
         top: 8,
       },
       margin: {
-        bottom: 4
-      }
+        bottom: 4,
+      },
     },
   };
 }
diff --git a/styles/src/styleTree/tabBar.ts b/styles/src/styleTree/tabBar.ts
index 57a8e93890..83ceba6c5e 100644
--- a/styles/src/styleTree/tabBar.ts
+++ b/styles/src/styleTree/tabBar.ts
@@ -38,8 +38,8 @@ export default function tabBar(colorScheme: ColorScheme) {
     // When two tabs of the same name are open, a label appears next to them
     description: {
       margin: { left: 8 },
-      ...text(activeLayerInactiveTab, "sans", "disabled", { size: "2xs" })
-    }
+      ...text(activeLayerInactiveTab, "sans", "disabled", { size: "2xs" }),
+    },
   };
 
   const activePaneActiveTab = {
@@ -48,7 +48,7 @@ export default function tabBar(colorScheme: ColorScheme) {
     text: text(activeLayerActiveTab, "sans", { size: "sm" }),
     border: {
       ...tab.border,
-      bottom: false
+      bottom: false,
     },
   };
 
@@ -64,21 +64,24 @@ export default function tabBar(colorScheme: ColorScheme) {
     text: text(inactiveLayerActiveTab, "sans", "variant", { size: "sm" }),
     border: {
       ...tab.border,
-      bottom: false
+      bottom: false,
     },
-  }
+  };
 
   const draggedTab = {
     ...activePaneActiveTab,
     background: withOpacity(tab.background, 0.8),
     border: undefined as any,
     shadow: elevation.above.shadow,
-  }
+  };
 
   return {
     height,
     background: background(activeLayerInactiveTab),
-    dropTargetOverlayColor: withOpacity(foreground(activeLayerInactiveTab), 0.6),
+    dropTargetOverlayColor: withOpacity(
+      foreground(activeLayerInactiveTab),
+      0.6
+    ),
     activePane: {
       activeTab: activePaneActiveTab,
       inactiveTab: tab,
@@ -101,7 +104,7 @@ export default function tabBar(colorScheme: ColorScheme) {
       border: {
         ...tab.border,
         right: false,
-      }
-    }
-  }
-}
\ No newline at end of file
+      },
+    },
+  };
+}
diff --git a/styles/src/styleTree/terminal.ts b/styles/src/styleTree/terminal.ts
index 061f3584e9..046ebf4e01 100644
--- a/styles/src/styleTree/terminal.ts
+++ b/styles/src/styleTree/terminal.ts
@@ -2,12 +2,12 @@ import { Elevation } from "../themes/common/colorScheme";
 
 export default function terminal(elevation: Elevation) {
   /**
-  * Colors are controlled per-cell in the terminal grid. 
-  * Cells can be set to any of these more 'theme-capable' colors
-  * or can be set directly with RGB values. 
-  * Here are the common interpretations of these names:
-  * https://en.wikipedia.org/wiki/ANSI_escape_code#Colors
-  */
+   * Colors are controlled per-cell in the terminal grid.
+   * Cells can be set to any of these more 'theme-capable' colors
+   * or can be set directly with RGB values.
+   * Here are the common interpretations of these names:
+   * https://en.wikipedia.org/wiki/ANSI_escape_code#Colors
+   */
   return {
     black: elevation.ramps.neutral(0).hex(),
     red: elevation.ramps.red(0.5).hex(),
diff --git a/styles/src/styleTree/workspace.ts b/styles/src/styleTree/workspace.ts
index 109ae5c9fb..7f6b39c4c2 100644
--- a/styles/src/styleTree/workspace.ts
+++ b/styles/src/styleTree/workspace.ts
@@ -5,7 +5,7 @@ import {
   border,
   borderColor,
   foreground,
-  text
+  text,
 } from "./components";
 import statusBar from "./statusBar";
 import tabBar from "./tabBar";
@@ -37,10 +37,7 @@ export default function workspace(colorScheme: ColorScheme) {
     },
     sidebar: {
       initialSize: 240,
-      border: border(
-        layer,
-        { left: true, right: true }
-      ),
+      border: border(layer, { left: true, right: true }),
     },
     paneDivider: {
       color: borderColor(layer),
@@ -171,9 +168,9 @@ export default function workspace(colorScheme: ColorScheme) {
       },
       maximized: {
         margin: 32,
-        border: border(elevation.above.top, { "overlay": true }),
+        border: border(elevation.above.top, { overlay: true }),
         shadow: elevation.above.shadow,
-      }
-    }
+      },
+    },
   };
 }
diff --git a/styles/src/themes/abruzzo.ts b/styles/src/themes/abruzzo.ts
index c73aa311d4..915c81a0c9 100644
--- a/styles/src/themes/abruzzo.ts
+++ b/styles/src/themes/abruzzo.ts
@@ -4,25 +4,18 @@ import { colorRamp, createColorScheme } from "./common/ramps";
 const name = "abruzzo";
 
 const ramps = {
-  neutral: chroma.scale([
-    "#1b0d05",
-    "#2c1e18",
-    "#654035",
-    "#9d5e4a",
-    "#b37354",
-    "#c1825a",
-    "#dda66e",
-    "#fbf3e2",
-  ]).domain([
-    0,
-    0.15,
-    0.35,
-    0.5,
-    0.6,
-    0.75,
-    0.85,
-    1
-  ]),
+  neutral: chroma
+    .scale([
+      "#1b0d05",
+      "#2c1e18",
+      "#654035",
+      "#9d5e4a",
+      "#b37354",
+      "#c1825a",
+      "#dda66e",
+      "#fbf3e2",
+    ])
+    .domain([0, 0.15, 0.35, 0.5, 0.6, 0.75, 0.85, 1]),
   red: colorRamp(chroma("#e594c4")),
   orange: colorRamp(chroma("#d9e87e")),
   yellow: colorRamp(chroma("#fd9d83")),
diff --git a/styles/src/themes/andromeda.ts b/styles/src/themes/andromeda.ts
index 1fc59baebf..2c03c8c680 100644
--- a/styles/src/themes/andromeda.ts
+++ b/styles/src/themes/andromeda.ts
@@ -4,25 +4,18 @@ import { colorRamp, createColorScheme } from "./common/ramps";
 const name = "andromeda";
 
 const ramps = {
-  neutral: chroma.scale([
-    "#1E2025",
-    "#23262E",
-    "#292E38",
-    "#2E323C",
-    "#ACA8AE",
-    "#CBC9CF",
-    "#E1DDE4",
-    "#F7F7F8",
-  ]).domain([
-    0,
-    0.15,
-    0.25,
-    0.35,
-    0.7,
-    0.8,
-    0.9,
-    1
-  ]),
+  neutral: chroma
+    .scale([
+      "#1E2025",
+      "#23262E",
+      "#292E38",
+      "#2E323C",
+      "#ACA8AE",
+      "#CBC9CF",
+      "#E1DDE4",
+      "#F7F7F8",
+    ])
+    .domain([0, 0.15, 0.25, 0.35, 0.7, 0.8, 0.9, 1]),
   red: colorRamp(chroma("#F92672")),
   orange: colorRamp(chroma("#F39C12")),
   yellow: colorRamp(chroma("#FFE66D")),
diff --git a/styles/src/themes/brushtrees.ts b/styles/src/themes/brushtrees.ts
index 3366f54737..8ffe07cd66 100644
--- a/styles/src/themes/brushtrees.ts
+++ b/styles/src/themes/brushtrees.ts
@@ -4,25 +4,18 @@ import { colorRamp, createColorScheme } from "./common/ramps";
 const name = "brush-tree";
 
 const ramps = {
-  neutral: chroma.scale([
-    "#485867",
-    "#5A6D7A",
-    "#6D828E",
-    "#8299A1",
-    "#98AFB5",
-    "#B0C5C8",
-    "#C9DBDC",
-    "#E3EFEF",
-  ]).domain([
-    0,
-    0.17,
-    0.32,
-    0.48,
-    0.6,
-    0.715,
-    0.858,
-    1
-  ]),
+  neutral: chroma
+    .scale([
+      "#485867",
+      "#5A6D7A",
+      "#6D828E",
+      "#8299A1",
+      "#98AFB5",
+      "#B0C5C8",
+      "#C9DBDC",
+      "#E3EFEF",
+    ])
+    .domain([0, 0.17, 0.32, 0.48, 0.6, 0.715, 0.858, 1]),
   red: colorRamp(chroma("#b38686")),
   orange: colorRamp(chroma("#d8bba2")),
   yellow: colorRamp(chroma("#aab386")),
diff --git a/styles/src/themes/cave.ts b/styles/src/themes/cave.ts
index f9c9b9d49e..23587e4156 100644
--- a/styles/src/themes/cave.ts
+++ b/styles/src/themes/cave.ts
@@ -4,25 +4,18 @@ import { colorRamp, createColorScheme } from "./common/ramps";
 const name = "cave";
 
 const ramps = {
-  neutral: chroma.scale([
-    "#19171c",
-    "#26232a",
-    "#585260",
-    "#655f6d",
-    "#7e7887",
-    "#8b8792",
-    "#e2dfe7",
-    "#efecf4",
-  ]).domain([
-    0,
-    0.3,
-    0.45,
-    0.6,
-    0.65,
-    0.7,
-    0.85,
-    1
-  ]),
+  neutral: chroma
+    .scale([
+      "#19171c",
+      "#26232a",
+      "#585260",
+      "#655f6d",
+      "#7e7887",
+      "#8b8792",
+      "#e2dfe7",
+      "#efecf4",
+    ])
+    .domain([0, 0.3, 0.45, 0.6, 0.65, 0.7, 0.85, 1]),
   red: colorRamp(chroma("#be4678")),
   orange: colorRamp(chroma("#aa573c")),
   yellow: colorRamp(chroma("#a06e3b")),
diff --git a/styles/src/themes/common/colorScheme.ts b/styles/src/themes/common/colorScheme.ts
index 94a7fa40c4..0265e6a3d0 100644
--- a/styles/src/themes/common/colorScheme.ts
+++ b/styles/src/themes/common/colorScheme.ts
@@ -1,83 +1,83 @@
 import { Scale } from "chroma-js";
 
 export interface ColorScheme {
-  name: string,
-  isLight: boolean,
+  name: string;
+  isLight: boolean;
 
-  lowest: Elevation,
-  middle: Elevation,
-  highest: Elevation,
+  lowest: Elevation;
+  middle: Elevation;
+  highest: Elevation;
 
-  players: Players,
+  players: Players;
 }
 
 export interface Player {
-  cursor: string,
-  selection: string,
+  cursor: string;
+  selection: string;
 }
 
 export interface Players {
-  "0": Player,
-  "1": Player,
-  "2": Player,
-  "3": Player,
-  "4": Player,
-  "5": Player,
-  "6": Player,
-  "7": Player,
+  "0": Player;
+  "1": Player;
+  "2": Player;
+  "3": Player;
+  "4": Player;
+  "5": Player;
+  "6": Player;
+  "7": Player;
 }
 
 export interface Elevation {
-  ramps: RampSet,
+  ramps: RampSet;
 
-  bottom: Layer,
-  middle: Layer,
-  top: Layer,
+  bottom: Layer;
+  middle: Layer;
+  top: Layer;
 
-  above?: Elevation,
-  shadow?: Shadow
+  above?: Elevation;
+  shadow?: Shadow;
 }
 
 export interface Shadow {
-  blur: number,
-  color: string,
-  offset: number[],
+  blur: number;
+  color: string;
+  offset: number[];
 }
 
 export type StyleSets = keyof Layer;
 export interface Layer {
-  base: StyleSet,
-  variant: StyleSet,
-  on: StyleSet,
-  info: StyleSet,
-  positive: StyleSet,
-  warning: StyleSet,
-  negative: StyleSet,
+  base: StyleSet;
+  variant: StyleSet;
+  on: StyleSet;
+  info: StyleSet;
+  positive: StyleSet;
+  warning: StyleSet;
+  negative: StyleSet;
 }
 
 export interface RampSet {
-  neutral: Scale,
-  red: Scale,
-  orange: Scale,
-  yellow: Scale,
-  green: Scale,
-  cyan: Scale,
-  blue: Scale,
-  violet: Scale,
-  magenta: Scale,
+  neutral: Scale;
+  red: Scale;
+  orange: Scale;
+  yellow: Scale;
+  green: Scale;
+  cyan: Scale;
+  blue: Scale;
+  violet: Scale;
+  magenta: Scale;
 }
 
 export type Styles = keyof StyleSet;
 export interface StyleSet {
-  default: Style,
-  active: Style,
-  disabled: Style,
-  hovered: Style,
-  pressed: Style,
+  default: Style;
+  active: Style;
+  disabled: Style;
+  hovered: Style;
+  pressed: Style;
 }
 
 export interface Style {
-  background: string,
-  border: string,
-  foreground: string,
-}
\ No newline at end of file
+  background: string;
+  border: string;
+  foreground: string;
+}
diff --git a/styles/src/themes/common/ramps.ts b/styles/src/themes/common/ramps.ts
index 8fa690a910..1ce37af593 100644
--- a/styles/src/themes/common/ramps.ts
+++ b/styles/src/themes/common/ramps.ts
@@ -1,5 +1,15 @@
 import chroma, { Color, Scale } from "chroma-js";
-import { ColorScheme, Elevation, Layer, Player, RampSet, Shadow, Style, Styles, StyleSet } from "./colorScheme";
+import {
+  ColorScheme,
+  Elevation,
+  Layer,
+  Player,
+  RampSet,
+  Shadow,
+  Style,
+  Styles,
+  StyleSet,
+} from "./colorScheme";
 
 export function colorRamp(color: Color): Scale {
   let hue = color.hsl()[0];
@@ -8,7 +18,11 @@ export function colorRamp(color: Color): Scale {
   return chroma.scale([startColor, color, endColor]).mode("hsl");
 }
 
-export function createColorScheme(name: string, isLight: boolean, colorRamps: { [rampName: string]: Scale }): ColorScheme {
+export function createColorScheme(
+  name: string,
+  isLight: boolean,
+  colorRamps: { [rampName: string]: Scale }
+): ColorScheme {
   // Chromajs scales from 0 to 1 flipped if isLight is true
   let baseRamps: typeof colorRamps = {};
 
@@ -20,18 +34,16 @@ export function createColorScheme(name: string, isLight: boolean, colorRamps: {
   // function to any in order to get the colors back out from the original ramps.
   if (isLight) {
     for (var rampName in colorRamps) {
-      baseRamps[rampName] = chroma
-        .scale(colorRamps[rampName].colors(100).reverse());
+      baseRamps[rampName] = chroma.scale(
+        colorRamps[rampName].colors(100).reverse()
+      );
     }
-    baseRamps.neutral = chroma
-      .scale(colorRamps.neutral.colors(100).reverse());
+    baseRamps.neutral = chroma.scale(colorRamps.neutral.colors(100).reverse());
   } else {
     for (var rampName in colorRamps) {
-      baseRamps[rampName] = chroma
-        .scale(colorRamps[rampName].colors(100));
+      baseRamps[rampName] = chroma.scale(colorRamps[rampName].colors(100));
     }
-    baseRamps.neutral = chroma
-      .scale(colorRamps.neutral.colors(100));
+    baseRamps.neutral = chroma.scale(colorRamps.neutral.colors(100));
   }
 
   let baseSet = {
@@ -46,40 +58,28 @@ export function createColorScheme(name: string, isLight: boolean, colorRamps: {
     magenta: baseRamps.magenta,
   };
 
-  let lowest = elevation(
-    resampleSet(
-      baseSet,
-      evenSamples(0, 1)
-    ),
-    isLight,
-  );
+  let lowest = elevation(resampleSet(baseSet, evenSamples(0, 1)), isLight);
 
-  let middle = elevation(
-    resampleSet(
-      baseSet,
-      evenSamples(0.08, 1)
-    ),
-    isLight,
-    {
-      blur: 4,
-      color: baseSet.neutral(isLight ? 7 : 0).darken().alpha(0.2).hex(), // TODO used blend previously. Replace with something else
-      offset: [1, 2],
-    }
-  );
+  let middle = elevation(resampleSet(baseSet, evenSamples(0.08, 1)), isLight, {
+    blur: 4,
+    color: baseSet
+      .neutral(isLight ? 7 : 0)
+      .darken()
+      .alpha(0.2)
+      .hex(), // TODO used blend previously. Replace with something else
+    offset: [1, 2],
+  });
   lowest.above = middle;
 
-  let highest = elevation(
-    resampleSet(
-      baseSet,
-      evenSamples(0.16, 1)
-    ),
-    isLight,
-    {
-      blur: 16,
-      color: baseSet.neutral(isLight ? 7 : 0).darken().alpha(0.2).hex(), // TODO used blend previously. Replace with something else
-      offset: [0, 2],
-    }
-  );
+  let highest = elevation(resampleSet(baseSet, evenSamples(0.16, 1)), isLight, {
+    blur: 16,
+    color: baseSet
+      .neutral(isLight ? 7 : 0)
+      .darken()
+      .alpha(0.2)
+      .hex(), // TODO used blend previously. Replace with something else
+    offset: [0, 2],
+  });
   middle.above = highest;
 
   let players = {
@@ -91,7 +91,7 @@ export function createColorScheme(name: string, isLight: boolean, colorRamps: {
     "5": player(baseSet.cyan),
     "6": player(baseSet.red),
     "7": player(baseSet.yellow),
-  }
+  };
 
   return {
     name,
@@ -109,11 +109,13 @@ function player(ramp: Scale): Player {
   return {
     selection: ramp(0.5).alpha(0.24).hex(),
     cursor: ramp(0.5).hex(),
-  }
+  };
 }
 
 function evenSamples(min: number, max: number): number[] {
-  return Array.from(Array(101).keys()).map((i) => (i / 100) * (max - min) + min);
+  return Array.from(Array(101).keys()).map(
+    (i) => (i / 100) * (max - min) + min
+  );
 }
 
 function resampleSet(ramps: RampSet, samples: number[]): RampSet {
@@ -127,7 +129,7 @@ function resampleSet(ramps: RampSet, samples: number[]): RampSet {
     blue: resample(ramps.blue, samples),
     violet: resample(ramps.violet, samples),
     magenta: resample(ramps.magenta, samples),
-  }
+  };
 }
 
 function resample(scale: Scale, samples: number[]): Scale {
@@ -135,7 +137,11 @@ function resample(scale: Scale, samples: number[]): Scale {
   return chroma.scale(newColors);
 }
 
-function elevation(ramps: RampSet, isLight: boolean, shadow?: Shadow): Elevation {
+function elevation(
+  ramps: RampSet,
+  isLight: boolean,
+  shadow?: Shadow
+): Elevation {
   return {
     ramps,
 
@@ -148,17 +154,20 @@ function elevation(ramps: RampSet, isLight: boolean, shadow?: Shadow): Elevation
 }
 
 interface StyleColors {
-  default: number | Color,
-  hovered: number | Color,
-  pressed: number | Color,
-  active: number | Color,
-  disabled: number | Color,
+  default: number | Color;
+  hovered: number | Color;
+  pressed: number | Color;
+  active: number | Color;
+  disabled: number | Color;
 }
-function buildStyleSet(ramp: Scale, styleDefinitions: {
-  background: StyleColors,
-  border: StyleColors,
-  foreground: StyleColors,
-}): StyleSet {
+function buildStyleSet(
+  ramp: Scale,
+  styleDefinitions: {
+    background: StyleColors;
+    border: StyleColors;
+    foreground: StyleColors;
+  }
+): StyleSet {
   function colorString(indexOrColor: number | Color): string {
     if (typeof indexOrColor === "number") {
       return ramp(indexOrColor).hex();
@@ -172,7 +181,7 @@ function buildStyleSet(ramp: Scale, styleDefinitions: {
       background: colorString(styleDefinitions.background[style]),
       border: colorString(styleDefinitions.border[style]),
       foreground: colorString(styleDefinitions.foreground[style]),
-    }
+    };
   }
 
   return {
@@ -181,73 +190,67 @@ function buildStyleSet(ramp: Scale, styleDefinitions: {
     pressed: buildStyle("pressed"),
     active: buildStyle("active"),
     disabled: buildStyle("disabled"),
-  }
+  };
 }
 
-function buildLayer(fgLayer: number, bgBase: number, fgBase: number, step: number) {
+function buildLayer(bgBase: number, fgBase: number, step: number) {
   return {
     background: {
       default: bgBase,
       hovered: bgBase + step,
-      pressed: bgBase + (step * 1.5),
-      active: bgBase + (step * 2.5),
+      pressed: bgBase + step * 1.5,
+      active: bgBase + step * 3,
       disabled: bgBase,
     },
     border: {
-      default: bgBase + step,
+      default: bgBase + step * 1,
       hovered: bgBase + step,
       pressed: bgBase + step,
-      active: bgBase + step,
-      disabled: bgBase + step,
+      active: bgBase + step * 3,
+      disabled: bgBase + step * 0.5,
     },
     foreground: {
       default: fgBase,
       hovered: fgBase - step,
       pressed: fgBase - step,
       active: fgBase,
-      disabled: fgLayer - (step * 4),
+      disabled: bgBase + step * 4,
     },
-  }
+  };
 }
 
 function bottomLayer(ramps: RampSet, isLight: boolean): Layer {
-  let fgLayer = 1
-
   return {
-    base: buildStyleSet(ramps.neutral, buildLayer(fgLayer, 0.2, 1, 0.08)),
-    variant: buildStyleSet(ramps.neutral, buildLayer(fgLayer, 0.2, 0.7, 0.08)),
-    on: buildStyleSet(ramps.neutral, buildLayer(fgLayer, 0.1, 1, 0.08)),
-    info: buildStyleSet(ramps.blue, buildLayer(fgLayer, 0.2, 1, 0.08)),
-    positive: buildStyleSet(ramps.green, buildLayer(fgLayer, 0.2, 1, 0.08)),
-    warning: buildStyleSet(ramps.yellow, buildLayer(fgLayer, 0.2, 1, 0.08)),
-    negative: buildStyleSet(ramps.red, buildLayer(fgLayer, 0.2, 1, 0.08))
+    base: buildStyleSet(ramps.neutral, buildLayer(0.2, 1, 0.08)),
+    variant: buildStyleSet(ramps.neutral, buildLayer(0.2, 0.7, 0.08)),
+    on: buildStyleSet(ramps.neutral, buildLayer(0.1, 1, 0.08)),
+    info: buildStyleSet(ramps.blue, buildLayer(0.1, 1, 0.08)),
+    positive: buildStyleSet(ramps.green, buildLayer(0.1, 1, 0.08)),
+    warning: buildStyleSet(ramps.yellow, buildLayer(0.1, 1, 0.08)),
+    negative: buildStyleSet(ramps.red, buildLayer(0.1, 1, 0.08)),
   };
 }
 
 function middleLayer(ramps: RampSet, isLight: boolean): Layer {
-  let fgLayer = 1
-
   return {
-    base: buildStyleSet(ramps.neutral, buildLayer(fgLayer, 0.1, 1, 0.08)),
-    variant: buildStyleSet(ramps.neutral, buildLayer(fgLayer, 0.1, 0.7, 0.08)),
-    on: buildStyleSet(ramps.neutral, buildLayer(fgLayer, 0, 1, 0.08)),
-    info: buildStyleSet(ramps.blue, buildLayer(fgLayer, 0.1, 1, 0.08)),
-    positive: buildStyleSet(ramps.green, buildLayer(fgLayer, 0.1, 1, 0.08)),
-    warning: buildStyleSet(ramps.yellow, buildLayer(fgLayer, 0.1, 1, 0.08)),
-    negative: buildStyleSet(ramps.red, buildLayer(fgLayer, 0.1, 1, 0.08))
+    base: buildStyleSet(ramps.neutral, buildLayer(0.1, 1, 0.08)),
+    variant: buildStyleSet(ramps.neutral, buildLayer(0.1, 0.7, 0.08)),
+    on: buildStyleSet(ramps.neutral, buildLayer(0, 1, 0.08)),
+    info: buildStyleSet(ramps.blue, buildLayer(0.1, 1, 0.08)),
+    positive: buildStyleSet(ramps.green, buildLayer(0.1, 1, 0.08)),
+    warning: buildStyleSet(ramps.yellow, buildLayer(0.1, 1, 0.08)),
+    negative: buildStyleSet(ramps.red, buildLayer(0.1, 1, 0.08)),
   };
 }
 
 function topLayer(ramps: RampSet, isLight: boolean): Layer {
-  let fgLayer = 1
-
   return {
-    base: buildStyleSet(ramps.neutral, buildLayer(fgLayer, 0, 1, 0.08)),
-    variant: buildStyleSet(ramps.neutral, buildLayer(fgLayer, 0, 0.7, 0.08)),
-    on: buildStyleSet(ramps.neutral, buildLayer(fgLayer, 0.1, 1, 0.08)),
-    info: buildStyleSet(ramps.blue, buildLayer(fgLayer, 0, 1, 0.08)),
-    positive: buildStyleSet(ramps.green, buildLayer(fgLayer, 0, 1, 0.08)),
-    warning: buildStyleSet(ramps.yellow, buildLayer(fgLayer, 0, 1, 0.08)),
-    negative: buildStyleSet(ramps.red, buildLayer(fgLayer, 0, 1, 0.08))
+    base: buildStyleSet(ramps.neutral, buildLayer(0, 1, 0.08)),
+    variant: buildStyleSet(ramps.neutral, buildLayer(0, 0.7, 0.08)),
+    on: buildStyleSet(ramps.neutral, buildLayer(0.1, 1, 0.08)),
+    info: buildStyleSet(ramps.blue, buildLayer(0.1, 1, 0.08)),
+    positive: buildStyleSet(ramps.green, buildLayer(0.1, 1, 0.08)),
+    warning: buildStyleSet(ramps.yellow, buildLayer(0.1, 1, 0.08)),
+    negative: buildStyleSet(ramps.red, buildLayer(0.1, 1, 0.08)),
   };
-}
\ No newline at end of file
+}
diff --git a/styles/src/themes/internal/zed-pro.ts b/styles/src/themes/internal/zed-pro.ts
index 16b9c682f2..466db7a03d 100644
--- a/styles/src/themes/internal/zed-pro.ts
+++ b/styles/src/themes/internal/zed-pro.ts
@@ -4,25 +4,18 @@ import { colorRamp, createColorScheme } from "../common/ramps";
 const name = "zed-pro";
 
 const ramps = {
-  neutral: chroma.scale([
-    "#101010",
-    "#1C1C1C",
-    "#212121",
-    "#2D2D2D",
-    "#B9B9B9",
-    "#DADADA",
-    "#E6E6E6",
-    "#FFFFFF",
-  ]).domain([
-    0,
-    0.1,
-    0.2,
-    0.3,
-    0.7,
-    0.8,
-    0.9,
-    1
-  ]),
+  neutral: chroma
+    .scale([
+      "#101010",
+      "#1C1C1C",
+      "#212121",
+      "#2D2D2D",
+      "#B9B9B9",
+      "#DADADA",
+      "#E6E6E6",
+      "#FFFFFF",
+    ])
+    .domain([0, 0.1, 0.2, 0.3, 0.7, 0.8, 0.9, 1]),
   red: colorRamp(chroma("#DC604F")),
   orange: colorRamp(chroma("#DE782F")),
   yellow: colorRamp(chroma("#E0B750")),
diff --git a/styles/src/themes/one-dark.ts b/styles/src/themes/one-dark.ts
index 508c8cb935..4af4444471 100644
--- a/styles/src/themes/one-dark.ts
+++ b/styles/src/themes/one-dark.ts
@@ -24,25 +24,9 @@ const base0E = "#c678dd";
 const base0F = "#be5046";
 
 const ramps = {
-  neutral: chroma.scale([
-    base00,
-    base01,
-    base02,
-    base03,
-    base04,
-    base05,
-    base06,
-    base07,
-  ]).domain([
-    0.05,
-    0.22,
-    0.25,
-    0.45,
-    0.62,
-    0.8,
-    0.9,
-    1
-  ]),
+  neutral: chroma
+    .scale([base00, base01, base02, base03, base04, base05, base06, base07])
+    .domain([0.05, 0.22, 0.25, 0.45, 0.62, 0.8, 0.9, 1]),
   red: colorRamp(chroma(base08)),
   orange: colorRamp(chroma(base09)),
   yellow: colorRamp(chroma(base0A)),
diff --git a/styles/src/themes/one-light.ts b/styles/src/themes/one-light.ts
index 4a681a3475..585ee7a170 100644
--- a/styles/src/themes/one-light.ts
+++ b/styles/src/themes/one-light.ts
@@ -24,21 +24,9 @@ const base0E = "#a626a4";
 const base0F = "#986801";
 
 const ramps = {
-  neutral: chroma.scale([
-    base00,
-    base01,
-    base02,
-    base03,
-    base04,
-    base05,
-    base06,
-    base07,
-  ]).domain([
-    0,
-    0.05,
-    0.77,
-    1
-  ]),
+  neutral: chroma
+    .scale([base00, base01, base02, base03, base04, base05, base06, base07])
+    .domain([0, 0.05, 0.77, 1]),
   red: colorRamp(chroma(base08)),
   orange: colorRamp(chroma(base09)),
   yellow: colorRamp(chroma(base0A)),
diff --git a/styles/src/themes/rose-pine-dawn.ts b/styles/src/themes/rose-pine-dawn.ts
index e3227d0139..514e54bcd4 100644
--- a/styles/src/themes/rose-pine-dawn.ts
+++ b/styles/src/themes/rose-pine-dawn.ts
@@ -4,20 +4,18 @@ import { colorRamp, createColorScheme } from "./common/ramps";
 const name = "rosé-pine-dawn";
 
 const ramps = {
-  neutral: chroma.scale([
-    "#575279",
-    "#797593",
-    "#9893A5",
-    "#B5AFB8",
-    "#D3CCCC",
-    "#F2E9E1",
-    "#FFFAF3",
-    "#FAF4ED",
-  ]).domain([
-    0,
-    0.73,
-    1
-  ]),
+  neutral: chroma
+    .scale([
+      "#575279",
+      "#797593",
+      "#9893A5",
+      "#B5AFB8",
+      "#D3CCCC",
+      "#F2E9E1",
+      "#FFFAF3",
+      "#FAF4ED",
+    ])
+    .domain([0, 0.73, 1]),
   red: colorRamp(chroma("#B4637A")),
   orange: colorRamp(chroma("#D7827E")),
   yellow: colorRamp(chroma("#EA9D34")),
diff --git a/styles/src/themes/rose-pine-moon.ts b/styles/src/themes/rose-pine-moon.ts
index d0266a453d..52a4252d31 100644
--- a/styles/src/themes/rose-pine-moon.ts
+++ b/styles/src/themes/rose-pine-moon.ts
@@ -4,21 +4,18 @@ import { colorRamp, createColorScheme } from "./common/ramps";
 const name = "rosé-pine-moon";
 
 const ramps = {
-  neutral: chroma.scale([
-    "#232136",
-    "#2A273F",
-    "#393552",
-    "#3E3A53",
-    "#56526C",
-    "#6E6A86",
-    "#908CAA",
-    "#E0DEF4",
-  ]).domain([
-    0,
-    0.3,
-    0.55,
-    1
-  ]),
+  neutral: chroma
+    .scale([
+      "#232136",
+      "#2A273F",
+      "#393552",
+      "#3E3A53",
+      "#56526C",
+      "#6E6A86",
+      "#908CAA",
+      "#E0DEF4",
+    ])
+    .domain([0, 0.3, 0.55, 1]),
   red: colorRamp(chroma("#EB6F92")),
   orange: colorRamp(chroma("#EBBCBA")),
   yellow: colorRamp(chroma("#F6C177")),
diff --git a/styles/src/themes/solarized.ts b/styles/src/themes/solarized.ts
index d9c5be282c..b528708eca 100644
--- a/styles/src/themes/solarized.ts
+++ b/styles/src/themes/solarized.ts
@@ -4,25 +4,18 @@ import { colorRamp, createColorScheme } from "./common/ramps";
 const name = "solarized";
 
 const ramps = {
-  neutral: chroma.scale([
-    "#002b36",
-    "#073642",
-    "#586e75",
-    "#657b83",
-    "#839496",
-    "#93a1a1",
-    "#eee8d5",
-    "#fdf6e3",
-  ]).domain([
-    0,
-    0.2,
-    0.38,
-    0.45,
-    0.65,
-    0.7,
-    0.85,
-    1
-  ]),
+  neutral: chroma
+    .scale([
+      "#002b36",
+      "#073642",
+      "#586e75",
+      "#657b83",
+      "#839496",
+      "#93a1a1",
+      "#eee8d5",
+      "#fdf6e3",
+    ])
+    .domain([0, 0.2, 0.38, 0.45, 0.65, 0.7, 0.85, 1]),
   red: colorRamp(chroma("#dc322f")),
   orange: colorRamp(chroma("#cb4b16")),
   yellow: colorRamp(chroma("#b58900")),
@@ -34,4 +27,4 @@ const ramps = {
 };
 
 export const dark = createColorScheme(`${name}-dark`, false, ramps);
-export const light = createColorScheme(`${name}-light`, true, ramps);
\ No newline at end of file
+export const light = createColorScheme(`${name}-light`, true, ramps);
diff --git a/styles/src/themes/sulphurpool.ts b/styles/src/themes/sulphurpool.ts
index 2acd8041bd..976e7cf7cd 100644
--- a/styles/src/themes/sulphurpool.ts
+++ b/styles/src/themes/sulphurpool.ts
@@ -4,25 +4,18 @@ import { colorRamp, createColorScheme } from "./common/ramps";
 const name = "sulphurpool";
 
 const ramps = {
-  neutral: chroma.scale([
-    "#202746",
-    "#293256",
-    "#5e6687",
-    "#6b7394",
-    "#898ea4",
-    "#979db4",
-    "#dfe2f1",
-    "#f5f7ff",
-  ]).domain([
-    0,
-    0.2,
-    0.38,
-    0.45,
-    0.65,
-    0.7,
-    0.85,
-    1
-  ]),
+  neutral: chroma
+    .scale([
+      "#202746",
+      "#293256",
+      "#5e6687",
+      "#6b7394",
+      "#898ea4",
+      "#979db4",
+      "#dfe2f1",
+      "#f5f7ff",
+    ])
+    .domain([0, 0.2, 0.38, 0.45, 0.65, 0.7, 0.85, 1]),
   red: colorRamp(chroma("#c94922")),
   orange: colorRamp(chroma("#c76b29")),
   yellow: colorRamp(chroma("#c08b30")),
diff --git a/styles/src/themes/summercamp.ts b/styles/src/themes/summercamp.ts
index 6f2ecbcc9c..f762785414 100644
--- a/styles/src/themes/summercamp.ts
+++ b/styles/src/themes/summercamp.ts
@@ -4,25 +4,18 @@ import { colorRamp, createColorScheme } from "./common/ramps";
 const name = "summercamp";
 
 const ramps = {
-  neutral: chroma.scale([
-    "#1c1810",
-    "#2a261c",
-    "#3a3527",
-    "#3a3527",
-    "#5f5b45",
-    "#736e55",
-    "#bab696",
-    "#f8f5de",
-  ]).domain([
-    0,
-    0.2,
-    0.38,
-    0.4,
-    0.65,
-    0.7,
-    0.85,
-    1
-  ]),
+  neutral: chroma
+    .scale([
+      "#1c1810",
+      "#2a261c",
+      "#3a3527",
+      "#3a3527",
+      "#5f5b45",
+      "#736e55",
+      "#bab696",
+      "#f8f5de",
+    ])
+    .domain([0, 0.2, 0.38, 0.4, 0.65, 0.7, 0.85, 1]),
   red: colorRamp(chroma("#e35142")),
   orange: colorRamp(chroma("#fba11b")),
   yellow: colorRamp(chroma("#f2ff27")),