diff --git a/styles/src/buildThemes.ts b/styles/src/buildThemes.ts
index 42770c1c89..ccbaf82c7f 100644
--- a/styles/src/buildThemes.ts
+++ b/styles/src/buildThemes.ts
@@ -7,11 +7,11 @@ import snakeCase from "./utils/snakeCase";
 
 const themes = [dark, light];
 for (let theme of themes) {
-    let styleTree = snakeCase(app(theme));
-    let styleTreeJSON = JSON.stringify(styleTree, null, 2);
-    let outPath = path.resolve(
-        `${__dirname}/../../crates/zed/assets/themes/${theme.name}.json`
-    );
-    fs.writeFileSync(outPath, styleTreeJSON);
-    console.log(`- ${outPath} created`);
+  let styleTree = snakeCase(app(theme));
+  let styleTreeJSON = JSON.stringify(styleTree, null, 2);
+  let outPath = path.resolve(
+    `${__dirname}/../../crates/zed/assets/themes/${theme.name}.json`
+  );
+  fs.writeFileSync(outPath, styleTreeJSON);
+  console.log(`- ${outPath} created`);
 }
diff --git a/styles/src/buildTokens.ts b/styles/src/buildTokens.ts
index 4cad6827a2..ceedd27b21 100644
--- a/styles/src/buildTokens.ts
+++ b/styles/src/buildTokens.ts
@@ -7,80 +7,80 @@ import { colors, fontFamilies, fontSizes, fontWeights } from "./tokens";
 
 // Organize theme tokens
 function themeTokens(theme: Theme) {
-    return {
-        meta: {
-            themeName: theme.name,
-        },
-        text: theme.textColor,
-        icon: theme.iconColor,
-        background: theme.backgroundColor,
-        border: theme.borderColor,
-        editor: theme.editor,
-        syntax: {
-            primary: {
-                value: theme.syntax.primary.color.value,
-                type: "color",
-            },
-            comment: {
-                value: theme.syntax.comment.color.value,
-                type: "color",
-            },
-            keyword: {
-                value: theme.syntax.keyword.color.value,
-                type: "color",
-            },
-            function: {
-                value: theme.syntax.function.color.value,
-                type: "color",
-            },
-            type: {
-                value: theme.syntax.type.color.value,
-                type: "color",
-            },
-            variant: {
-                value: theme.syntax.variant.color.value,
-                type: "color",
-            },
-            property: {
-                value: theme.syntax.property.color.value,
-                type: "color",
-            },
-            enum: {
-                value: theme.syntax.enum.color.value,
-                type: "color",
-            },
-            operator: {
-                value: theme.syntax.operator.color.value,
-                type: "color",
-            },
-            string: {
-                value: theme.syntax.string.color.value,
-                type: "color",
-            },
-            number: {
-                value: theme.syntax.number.color.value,
-                type: "color",
-            },
-            boolean: {
-                value: theme.syntax.boolean.color.value,
-                type: "color",
-            },
-        },
-        player: theme.player,
-        shadowAlpha: theme.shadowAlpha,
-    };
+  return {
+    meta: {
+      themeName: theme.name,
+    },
+    text: theme.textColor,
+    icon: theme.iconColor,
+    background: theme.backgroundColor,
+    border: theme.borderColor,
+    editor: theme.editor,
+    syntax: {
+      primary: {
+        value: theme.syntax.primary.color.value,
+        type: "color",
+      },
+      comment: {
+        value: theme.syntax.comment.color.value,
+        type: "color",
+      },
+      keyword: {
+        value: theme.syntax.keyword.color.value,
+        type: "color",
+      },
+      function: {
+        value: theme.syntax.function.color.value,
+        type: "color",
+      },
+      type: {
+        value: theme.syntax.type.color.value,
+        type: "color",
+      },
+      variant: {
+        value: theme.syntax.variant.color.value,
+        type: "color",
+      },
+      property: {
+        value: theme.syntax.property.color.value,
+        type: "color",
+      },
+      enum: {
+        value: theme.syntax.enum.color.value,
+        type: "color",
+      },
+      operator: {
+        value: theme.syntax.operator.color.value,
+        type: "color",
+      },
+      string: {
+        value: theme.syntax.string.color.value,
+        type: "color",
+      },
+      number: {
+        value: theme.syntax.number.color.value,
+        type: "color",
+      },
+      boolean: {
+        value: theme.syntax.boolean.color.value,
+        type: "color",
+      },
+    },
+    player: theme.player,
+    shadowAlpha: theme.shadowAlpha,
+  };
 }
 
 // Organize core tokens
 const coreTokens = {
-    color: {
-        ...colors,
-    },
-    text: {
-        family: fontFamilies,
-        weight: fontWeights,
-    },
-    size: fontSizes,
+  color: {
+    ...colors,
+  },
+  text: {
+    family: fontFamilies,
+    weight: fontWeights,
+  },
+  size: fontSizes,
 };
 
 const combinedTokens: any = {};
@@ -98,10 +98,10 @@ combinedTokens.core = coreTokens;
 // 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];
 themes.forEach((theme) => {
-    const themePath = `${distPath}/${theme.name}.json`
-    fs.writeFileSync(themePath, JSON.stringify(themeTokens(theme), null, 2));
-    console.log(`- ${themePath} created`);
-    combinedTokens[theme.name] = themeTokens(theme);
+  const themePath = `${distPath}/${theme.name}.json`
+  fs.writeFileSync(themePath, JSON.stringify(themeTokens(theme), null, 2));
+  console.log(`- ${themePath} created`);
+  combinedTokens[theme.name] = themeTokens(theme);
 });
 
 // Write combined tokens to `tokens.json`. This file is consumed by the Figma Tokens plugin to keep our designs consistent with the app.
diff --git a/styles/src/styleTree/app.ts b/styles/src/styleTree/app.ts
index 85bb8b09b8..03e527d03d 100644
--- a/styles/src/styleTree/app.ts
+++ b/styles/src/styleTree/app.ts
@@ -9,35 +9,35 @@ import selectorModal from "./selectorModal";
 import workspace from "./workspace";
 
 export const panel = {
-    padding: { top: 12, left: 12, bottom: 12, right: 12 },
+  padding: { top: 12, left: 12, bottom: 12, right: 12 },
 };
 
 export default function app(theme: Theme): Object {
-    return {
-        selector: selectorModal(theme),
-        workspace: workspace(theme),
-        editor: editor(theme),
-        projectDiagnostics: {
-            tabIconSpacing: 4,
-            tabIconWidth: 13,
-            tabSummarySpacing: 10,
-            emptyMessage: text(theme, "sans", "primary", { size: "lg" }),
-            statusBarItem: {
-                ...text(theme, "sans", "muted"),
-                margin: {
-                    right: 10,
-                },
-            },
+  return {
+    selector: selectorModal(theme),
+    workspace: workspace(theme),
+    editor: editor(theme),
+    projectDiagnostics: {
+      tabIconSpacing: 4,
+      tabIconWidth: 13,
+      tabSummarySpacing: 10,
+      emptyMessage: text(theme, "sans", "primary", { size: "lg" }),
+      statusBarItem: {
+        ...text(theme, "sans", "muted"),
+        margin: {
+          right: 10,
         },
-        projectPanel: projectPanel(theme),
-        chatPanel: chatPanel(theme),
-        contactsPanel: contactsPanel(theme),
-        search: search(theme),
-        breadcrumbs: {
-            ...text(theme, "sans", "primary"),
-            padding: {
-                left: 6,
-            },
-        }
-    };
+      },
+    },
+    projectPanel: projectPanel(theme),
+    chatPanel: chatPanel(theme),
+    contactsPanel: contactsPanel(theme),
+    search: search(theme),
+    breadcrumbs: {
+      ...text(theme, "sans", "primary"),
+      padding: {
+        left: 6,
+      },
+    }
+  };
 }
diff --git a/styles/src/styleTree/chatPanel.ts b/styles/src/styleTree/chatPanel.ts
index 6bcf38ec06..69b5f3baa0 100644
--- a/styles/src/styleTree/chatPanel.ts
+++ b/styles/src/styleTree/chatPanel.ts
@@ -1,108 +1,108 @@
 import Theme from "../themes/theme";
 import { panel } from "./app";
 import {
-    backgroundColor,
-    border,
-    player,
-    shadow,
-    text,
-    TextColor
+  backgroundColor,
+  border,
+  player,
+  shadow,
+  text,
+  TextColor
 } from "./components";
 
 export default function chatPanel(theme: Theme) {
-    function channelSelectItem(
-        theme: Theme,
-        textColor: TextColor,
-        hovered: boolean
-    ) {
-        return {
-            name: text(theme, "sans", textColor),
-            padding: 4,
-            hash: {
-                ...text(theme, "sans", "muted"),
-                margin: {
-                    right: 8,
-                },
-            },
-            background: hovered ? backgroundColor(theme, 300, "hovered") : undefined,
-            cornerRadius: hovered ? 6 : 0,
-        };
-    }
-
-    const message = {
-        body: text(theme, "sans", "secondary"),
-        timestamp: text(theme, "sans", "muted", { size: "sm" }),
-        padding: {
-            bottom: 6,
-        },
-        sender: {
-            ...text(theme, "sans", "primary", { weight: "bold" }),
-            margin: {
-                right: 8,
-            },
-        },
-    };
-
+  function channelSelectItem(
+    theme: Theme,
+    textColor: TextColor,
+    hovered: boolean
+  ) {
     return {
-        ...panel,
-        channelName: text(theme, "sans", "primary", { weight: "bold" }),
-        channelNameHash: {
-            ...text(theme, "sans", "muted"),
-            padding: {
-                right: 8,
-            },
-        },
-        channelSelect: {
-            header: {
-                ...channelSelectItem(theme, "primary", false),
-                padding: {
-                    bottom: 4,
-                    left: 0,
-                },
-            },
-            item: channelSelectItem(theme, "secondary", false),
-            hoveredItem: channelSelectItem(theme, "secondary", true),
-            activeItem: channelSelectItem(theme, "primary", false),
-            hoveredActiveItem: channelSelectItem(theme, "primary", true),
-            menu: {
-                background: backgroundColor(theme, 500),
-                cornerRadius: 6,
-                padding: 4,
-                border: border(theme, "primary"),
-                shadow: shadow(theme),
-            },
-        },
-        signInPrompt: text(theme, "sans", "secondary", { underline: true }),
-        hoveredSignInPrompt: text(theme, "sans", "primary", { underline: true }),
-        message,
-        pendingMessage: {
-            ...message,
-            body: {
-                ...message.body,
-                color: theme.textColor.muted.value,
-            },
-            sender: {
-                ...message.sender,
-                color: theme.textColor.muted.value,
-            },
-            timestamp: {
-                ...message.timestamp,
-                color: theme.textColor.muted.value,
-            },
-        },
-        inputEditor: {
-            background: backgroundColor(theme, 500),
-            cornerRadius: 6,
-            text: text(theme, "mono", "primary"),
-            placeholderText: text(theme, "mono", "placeholder", { size: "sm" }),
-            selection: player(theme, 1).selection,
-            border: border(theme, "secondary"),
-            padding: {
-                bottom: 7,
-                left: 8,
-                right: 8,
-                top: 7,
-            },
+      name: text(theme, "sans", textColor),
+      padding: 4,
+      hash: {
+        ...text(theme, "sans", "muted"),
+        margin: {
+          right: 8,
         },
+      },
+      background: hovered ? backgroundColor(theme, 300, "hovered") : undefined,
+      cornerRadius: hovered ? 6 : 0,
     };
+  }
+
+  const message = {
+    body: text(theme, "sans", "secondary"),
+    timestamp: text(theme, "sans", "muted", { size: "sm" }),
+    padding: {
+      bottom: 6,
+    },
+    sender: {
+      ...text(theme, "sans", "primary", { weight: "bold" }),
+      margin: {
+        right: 8,
+      },
+    },
+  };
+
+  return {
+    ...panel,
+    channelName: text(theme, "sans", "primary", { weight: "bold" }),
+    channelNameHash: {
+      ...text(theme, "sans", "muted"),
+      padding: {
+        right: 8,
+      },
+    },
+    channelSelect: {
+      header: {
+        ...channelSelectItem(theme, "primary", false),
+        padding: {
+          bottom: 4,
+          left: 0,
+        },
+      },
+      item: channelSelectItem(theme, "secondary", false),
+      hoveredItem: channelSelectItem(theme, "secondary", true),
+      activeItem: channelSelectItem(theme, "primary", false),
+      hoveredActiveItem: channelSelectItem(theme, "primary", true),
+      menu: {
+        background: backgroundColor(theme, 500),
+        cornerRadius: 6,
+        padding: 4,
+        border: border(theme, "primary"),
+        shadow: shadow(theme),
+      },
+    },
+    signInPrompt: text(theme, "sans", "secondary", { underline: true }),
+    hoveredSignInPrompt: text(theme, "sans", "primary", { underline: true }),
+    message,
+    pendingMessage: {
+      ...message,
+      body: {
+        ...message.body,
+        color: theme.textColor.muted.value,
+      },
+      sender: {
+        ...message.sender,
+        color: theme.textColor.muted.value,
+      },
+      timestamp: {
+        ...message.timestamp,
+        color: theme.textColor.muted.value,
+      },
+    },
+    inputEditor: {
+      background: backgroundColor(theme, 500),
+      cornerRadius: 6,
+      text: text(theme, "mono", "primary"),
+      placeholderText: text(theme, "mono", "placeholder", { size: "sm" }),
+      selection: player(theme, 1).selection,
+      border: border(theme, "secondary"),
+      padding: {
+        bottom: 7,
+        left: 8,
+        right: 8,
+        top: 7,
+      },
+    },
+  };
 }
diff --git a/styles/src/styleTree/components.ts b/styles/src/styleTree/components.ts
index 08a8aa0854..d0412af02e 100644
--- a/styles/src/styleTree/components.ts
+++ b/styles/src/styleTree/components.ts
@@ -5,89 +5,89 @@ import { Color } from "../utils/color";
 
 export type TextColor = keyof Theme["textColor"];
 export function text(
-    theme: Theme,
-    fontFamily: keyof typeof fontFamilies,
-    color: TextColor,
-    properties?: {
-        size?: keyof typeof fontSizes;
-        weight?: FontWeight;
-        underline?: boolean;
-    }
+  theme: Theme,
+  fontFamily: keyof typeof fontFamilies,
+  color: TextColor,
+  properties?: {
+    size?: keyof typeof fontSizes;
+    weight?: FontWeight;
+    underline?: boolean;
+  }
 ) {
-    let size = fontSizes[properties?.size || "sm"].value;
-    return {
-        family: fontFamilies[fontFamily].value,
-        color: theme.textColor[color].value,
-        ...properties,
-        size,
-    };
+  let size = fontSizes[properties?.size || "sm"].value;
+  return {
+    family: fontFamilies[fontFamily].value,
+    color: theme.textColor[color].value,
+    ...properties,
+    size,
+  };
 }
 export function textColor(theme: Theme, color: TextColor) {
-    return theme.textColor[color].value;
+  return theme.textColor[color].value;
 }
 
 export type BorderColor = keyof Theme["borderColor"];
 export interface BorderOptions {
-    width?: number;
-    top?: boolean;
-    bottom?: boolean;
-    left?: boolean;
-    right?: boolean;
-    overlay?: boolean;
+  width?: number;
+  top?: boolean;
+  bottom?: boolean;
+  left?: boolean;
+  right?: boolean;
+  overlay?: boolean;
 }
 export function border(
-    theme: Theme,
-    color: BorderColor,
-    options?: BorderOptions
+  theme: Theme,
+  color: BorderColor,
+  options?: BorderOptions
 ) {
-    return {
-        color: borderColor(theme, color),
-        width: 1,
-        ...options,
-    };
+  return {
+    color: borderColor(theme, color),
+    width: 1,
+    ...options,
+  };
 }
 export function borderColor(theme: Theme, color: BorderColor) {
-    return theme.borderColor[color].value;
+  return theme.borderColor[color].value;
 }
 
 export type IconColor = keyof Theme["iconColor"];
 export function iconColor(theme: Theme, color: IconColor) {
-    return theme.iconColor[color].value;
+  return theme.iconColor[color].value;
 }
 
 export type PlayerIndex = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
 export interface Player {
-    selection: {
-        cursor: Color;
-        selection: Color;
-    };
+  selection: {
+    cursor: Color;
+    selection: Color;
+  };
 }
 export function player(
-    theme: Theme,
-    playerNumber: PlayerIndex,
+  theme: Theme,
+  playerNumber: PlayerIndex,
 ): Player {
-    return {
-        selection: {
-            cursor: theme.player[playerNumber].cursorColor.value,
-            selection: theme.player[playerNumber].selectionColor.value,
-        },
-    };
+  return {
+    selection: {
+      cursor: theme.player[playerNumber].cursorColor.value,
+      selection: theme.player[playerNumber].selectionColor.value,
+    },
+  };
 }
 
 export type BackgroundColor = keyof Theme["backgroundColor"];
 export type BackgroundState = keyof BackgroundColorSet;
 export function backgroundColor(
-    theme: Theme,
-    name: BackgroundColor,
-    state?: BackgroundState,
+  theme: Theme,
+  name: BackgroundColor,
+  state?: BackgroundState,
 ): Color {
-    return theme.backgroundColor[name][state || "base"].value;
+  return theme.backgroundColor[name][state || "base"].value;
 }
 
 export function shadow(theme: Theme) {
-    return {
-        blur: 16,
-        color: chroma("black").alpha(theme.shadowAlpha.value).hex(),
-        offset: [0, 2],
-    };
+  return {
+    blur: 16,
+    color: chroma("black").alpha(theme.shadowAlpha.value).hex(),
+    offset: [0, 2],
+  };
 }
diff --git a/styles/src/styleTree/contactsPanel.ts b/styles/src/styleTree/contactsPanel.ts
index 0939018126..e22a09e25f 100644
--- a/styles/src/styleTree/contactsPanel.ts
+++ b/styles/src/styleTree/contactsPanel.ts
@@ -3,60 +3,60 @@ import { panel } from "./app";
 import { backgroundColor, borderColor, text } from "./components";
 
 export default function(theme: Theme) {
-    const project = {
-        guestAvatarSpacing: 4,
-        height: 24,
-        guestAvatar: {
-            cornerRadius: 8,
-            width: 14,
-        },
-        name: {
-            ...text(theme, "mono", "placeholder", { size: "sm" }),
-            margin: {
-                right: 6,
-            },
-        },
-        padding: {
-            left: 8,
-        },
-    };
+  const project = {
+    guestAvatarSpacing: 4,
+    height: 24,
+    guestAvatar: {
+      cornerRadius: 8,
+      width: 14,
+    },
+    name: {
+      ...text(theme, "mono", "placeholder", { size: "sm" }),
+      margin: {
+        right: 6,
+      },
+    },
+    padding: {
+      left: 8,
+    },
+  };
 
-    const sharedProject = {
-        ...project,
-        background: backgroundColor(theme, 300),
-        cornerRadius: 6,
-        name: {
-            ...project.name,
-            ...text(theme, "mono", "secondary", { size: "sm" }),
-        },
-    };
+  const sharedProject = {
+    ...project,
+    background: backgroundColor(theme, 300),
+    cornerRadius: 6,
+    name: {
+      ...project.name,
+      ...text(theme, "mono", "secondary", { size: "sm" }),
+    },
+  };
 
-    return {
-        ...panel,
-        hostRowHeight: 28,
-        treeBranchColor: borderColor(theme, "muted"),
-        treeBranchWidth: 1,
-        hostAvatar: {
-            cornerRadius: 10,
-            width: 18,
-        },
-        hostUsername: {
-            ...text(theme, "mono", "primary", { size: "sm" }),
-            padding: {
-                left: 8,
-            },
-        },
-        project,
-        sharedProject,
-        hoveredSharedProject: {
-            ...sharedProject,
-            background: backgroundColor(theme, 300, "hovered"),
-            cornerRadius: 6,
-        },
-        unsharedProject: project,
-        hoveredUnsharedProject: {
-            ...project,
-            cornerRadius: 6,
-        },
-    }
+  return {
+    ...panel,
+    hostRowHeight: 28,
+    treeBranchColor: borderColor(theme, "muted"),
+    treeBranchWidth: 1,
+    hostAvatar: {
+      cornerRadius: 10,
+      width: 18,
+    },
+    hostUsername: {
+      ...text(theme, "mono", "primary", { size: "sm" }),
+      padding: {
+        left: 8,
+      },
+    },
+    project,
+    sharedProject,
+    hoveredSharedProject: {
+      ...sharedProject,
+      background: backgroundColor(theme, 300, "hovered"),
+      cornerRadius: 6,
+    },
+    unsharedProject: project,
+    hoveredUnsharedProject: {
+      ...project,
+      cornerRadius: 6,
+    },
+  }
 }
diff --git a/styles/src/styleTree/editor.ts b/styles/src/styleTree/editor.ts
index 9fb96e09b7..261f0cfbbe 100644
--- a/styles/src/styleTree/editor.ts
+++ b/styles/src/styleTree/editor.ts
@@ -1,146 +1,146 @@
 import Theme from "../themes/theme";
 import {
-    backgroundColor,
-    border,
-    iconColor,
-    player,
-    text,
-    TextColor
+  backgroundColor,
+  border,
+  iconColor,
+  player,
+  text,
+  TextColor
 } from "./components";
 
 export default function editor(theme: Theme) {
-    const autocompleteItem = {
-        cornerRadius: 6,
-        padding: {
-            bottom: 2,
-            left: 6,
-            right: 6,
-            top: 2,
-        },
-    };
-
-    function diagnostic(theme: Theme, color: TextColor) {
-        return {
-            textScaleFactor: 0.857,
-            header: {
-                border: border(theme, "primary", {
-                    top: true,
-                }),
-            },
-            message: {
-                text: text(theme, "sans", color, { size: "sm" }),
-                highlightText: text(theme, "sans", color, {
-                    size: "sm",
-                    weight: "bold",
-                }),
-            },
-        };
-    }
+  const autocompleteItem = {
+    cornerRadius: 6,
+    padding: {
+      bottom: 2,
+      left: 6,
+      right: 6,
+      top: 2,
+    },
+  };
 
+  function diagnostic(theme: Theme, color: TextColor) {
     return {
-        // textColor: theme.syntax.primary.color,
-        textColor: theme.syntax.primary.color.value,
-        background: backgroundColor(theme, 500),
-        activeLineBackground: theme.editor.line.active.value,
-        codeActionsIndicator: iconColor(theme, "muted"),
-        diffBackgroundDeleted: backgroundColor(theme, "error"),
-        diffBackgroundInserted: backgroundColor(theme, "ok"),
-        documentHighlightReadBackground: theme.editor.highlight.occurrence.value,
-        documentHighlightWriteBackground: theme.editor.highlight.activeOccurrence.value,
-        errorColor: theme.textColor.error.value,
-        gutterBackground: backgroundColor(theme, 500),
-        gutterPaddingFactor: 3.5,
-        highlightedLineBackground: theme.editor.line.highlighted.value,
-        lineNumber: theme.editor.gutter.primary.value,
-        lineNumberActive: theme.editor.gutter.active.value,
-        renameFade: 0.6,
-        unnecessaryCodeFade: 0.5,
-        selection: player(theme, 1).selection,
-        guestSelections: [
-            player(theme, 2).selection,
-            player(theme, 3).selection,
-            player(theme, 4).selection,
-            player(theme, 5).selection,
-            player(theme, 6).selection,
-            player(theme, 7).selection,
-            player(theme, 8).selection,
-        ],
-        autocomplete: {
-            background: backgroundColor(theme, 500),
-            cornerRadius: 6,
-            padding: 6,
-            border: border(theme, "secondary"),
-            item: autocompleteItem,
-            hoveredItem: {
-                ...autocompleteItem,
-                background: backgroundColor(theme, 500, "hovered"),
-            },
-            margin: {
-                left: -14,
-            },
-            matchHighlight: text(theme, "mono", "feature"),
-            selectedItem: {
-                ...autocompleteItem,
-                background: backgroundColor(theme, 500, "active"),
-            },
-        },
-        diagnosticHeader: {
-            background: backgroundColor(theme, 300),
-            iconWidthFactor: 1.5,
-            textScaleFactor: 0.857, // NateQ: Will we need dynamic sizing for text? If so let's create tokens for these.
-            border: border(theme, "secondary", {
-                bottom: true,
-                top: true,
-            }),
-            code: {
-                ...text(theme, "mono", "muted", { size: "sm" }),
-                margin: {
-                    left: 10,
-                },
-            },
-            message: {
-                highlightText: text(theme, "sans", "primary", {
-                    size: "sm",
-                    weight: "bold",
-                }),
-                text: text(theme, "sans", "secondary", { size: "sm" }),
-            },
-        },
-        diagnosticPathHeader: {
-            background: theme.editor.line.active.value,
-            textScaleFactor: 0.857,
-            filename: text(theme, "mono", "primary", { size: "sm" }),
-            path: {
-                ...text(theme, "mono", "muted", { size: "sm" }),
-                margin: {
-                    left: 12,
-                },
-            },
-        },
-        errorDiagnostic: diagnostic(theme, "error"),
-        warningDiagnostic: diagnostic(theme, "warning"),
-        informationDiagnostic: diagnostic(theme, "info"),
-        hintDiagnostic: diagnostic(theme, "info"),
-        invalidErrorDiagnostic: diagnostic(theme, "muted"),
-        invalidHintDiagnostic: diagnostic(theme, "muted"),
-        invalidInformationDiagnostic: diagnostic(theme, "muted"),
-        invalidWarningDiagnostic: diagnostic(theme, "muted"),
-        syntax: {
-            keyword: theme.syntax.keyword.color.value,
-            function: theme.syntax.function.color.value,
-            string: theme.syntax.string.color.value,
-            type: theme.syntax.type.color.value,
-            number: theme.syntax.number.color.value,
-            comment: theme.syntax.comment.color.value,
-            property: theme.syntax.property.color.value,
-            variant: theme.syntax.variant.color.value,
-            constant: theme.syntax.constant.color.value,
-            title: { color: theme.syntax.title.color.value, weight: "bold" },
-            emphasis: theme.textColor.feature.value,
-            "emphasis.strong": { color: theme.textColor.feature.value, weight: "bold" },
-            link_uri: { color: theme.syntax.linkUrl.color.value, underline: true },
-            link_text: { color: theme.syntax.linkText.color.value, italic: true },
-            list_marker: theme.syntax.punctuation.color.value,
-        },
+      textScaleFactor: 0.857,
+      header: {
+        border: border(theme, "primary", {
+          top: true,
+        }),
+      },
+      message: {
+        text: text(theme, "sans", color, { size: "sm" }),
+        highlightText: text(theme, "sans", color, {
+          size: "sm",
+          weight: "bold",
+        }),
+      },
     };
+  }
+
+  return {
+    // textColor: theme.syntax.primary.color,
+    textColor: theme.syntax.primary.color.value,
+    background: backgroundColor(theme, 500),
+    activeLineBackground: theme.editor.line.active.value,
+    codeActionsIndicator: iconColor(theme, "muted"),
+    diffBackgroundDeleted: backgroundColor(theme, "error"),
+    diffBackgroundInserted: backgroundColor(theme, "ok"),
+    documentHighlightReadBackground: theme.editor.highlight.occurrence.value,
+    documentHighlightWriteBackground: theme.editor.highlight.activeOccurrence.value,
+    errorColor: theme.textColor.error.value,
+    gutterBackground: backgroundColor(theme, 500),
+    gutterPaddingFactor: 3.5,
+    highlightedLineBackground: theme.editor.line.highlighted.value,
+    lineNumber: theme.editor.gutter.primary.value,
+    lineNumberActive: theme.editor.gutter.active.value,
+    renameFade: 0.6,
+    unnecessaryCodeFade: 0.5,
+    selection: player(theme, 1).selection,
+    guestSelections: [
+      player(theme, 2).selection,
+      player(theme, 3).selection,
+      player(theme, 4).selection,
+      player(theme, 5).selection,
+      player(theme, 6).selection,
+      player(theme, 7).selection,
+      player(theme, 8).selection,
+    ],
+    autocomplete: {
+      background: backgroundColor(theme, 500),
+      cornerRadius: 6,
+      padding: 6,
+      border: border(theme, "secondary"),
+      item: autocompleteItem,
+      hoveredItem: {
+        ...autocompleteItem,
+        background: backgroundColor(theme, 500, "hovered"),
+      },
+      margin: {
+        left: -14,
+      },
+      matchHighlight: text(theme, "mono", "feature"),
+      selectedItem: {
+        ...autocompleteItem,
+        background: backgroundColor(theme, 500, "active"),
+      },
+    },
+    diagnosticHeader: {
+      background: backgroundColor(theme, 300),
+      iconWidthFactor: 1.5,
+      textScaleFactor: 0.857, // NateQ: Will we need dynamic sizing for text? If so let's create tokens for these.
+      border: border(theme, "secondary", {
+        bottom: true,
+        top: true,
+      }),
+      code: {
+        ...text(theme, "mono", "muted", { size: "sm" }),
+        margin: {
+          left: 10,
+        },
+      },
+      message: {
+        highlightText: text(theme, "sans", "primary", {
+          size: "sm",
+          weight: "bold",
+        }),
+        text: text(theme, "sans", "secondary", { size: "sm" }),
+      },
+    },
+    diagnosticPathHeader: {
+      background: theme.editor.line.active.value,
+      textScaleFactor: 0.857,
+      filename: text(theme, "mono", "primary", { size: "sm" }),
+      path: {
+        ...text(theme, "mono", "muted", { size: "sm" }),
+        margin: {
+          left: 12,
+        },
+      },
+    },
+    errorDiagnostic: diagnostic(theme, "error"),
+    warningDiagnostic: diagnostic(theme, "warning"),
+    informationDiagnostic: diagnostic(theme, "info"),
+    hintDiagnostic: diagnostic(theme, "info"),
+    invalidErrorDiagnostic: diagnostic(theme, "muted"),
+    invalidHintDiagnostic: diagnostic(theme, "muted"),
+    invalidInformationDiagnostic: diagnostic(theme, "muted"),
+    invalidWarningDiagnostic: diagnostic(theme, "muted"),
+    syntax: {
+      keyword: theme.syntax.keyword.color.value,
+      function: theme.syntax.function.color.value,
+      string: theme.syntax.string.color.value,
+      type: theme.syntax.type.color.value,
+      number: theme.syntax.number.color.value,
+      comment: theme.syntax.comment.color.value,
+      property: theme.syntax.property.color.value,
+      variant: theme.syntax.variant.color.value,
+      constant: theme.syntax.constant.color.value,
+      title: { color: theme.syntax.title.color.value, weight: "bold" },
+      emphasis: theme.textColor.feature.value,
+      "emphasis.strong": { color: theme.textColor.feature.value, weight: "bold" },
+      link_uri: { color: theme.syntax.linkUrl.color.value, underline: true },
+      link_text: { color: theme.syntax.linkText.color.value, italic: true },
+      list_marker: theme.syntax.punctuation.color.value,
+    },
+  };
 }
diff --git a/styles/src/styleTree/projectPanel.ts b/styles/src/styleTree/projectPanel.ts
index c55417579a..de9b1d88f3 100644
--- a/styles/src/styleTree/projectPanel.ts
+++ b/styles/src/styleTree/projectPanel.ts
@@ -4,34 +4,34 @@ import { panel } from "./app";
 import { backgroundColor, iconColor, text, TextColor } from "./components";
 
 export default function projectPanel(theme: Theme) {
-    function entry(theme: Theme, textColor: TextColor, background?: Color) {
-        return {
-            height: 22,
-            background,
-            iconColor: iconColor(theme, "muted"),
-            iconSize: 8,
-            iconSpacing: 8,
-            text: text(theme, "mono", textColor, { size: "sm" }),
-        };
-    }
-
+  function entry(theme: Theme, textColor: TextColor, background?: Color) {
     return {
-        ...panel,
-        entry: entry(theme, "secondary"),
-        hoveredEntry: entry(
-            theme,
-            "secondary",
-            backgroundColor(theme, 300, "hovered")
-        ),
-        selectedEntry: entry(theme, "primary"),
-        hoveredSelectedEntry: entry(
-            theme,
-            "primary",
-            backgroundColor(theme, 300, "hovered")
-        ),
-        padding: {
-            top: 6,
-            left: 12,
-        },
+      height: 22,
+      background,
+      iconColor: iconColor(theme, "muted"),
+      iconSize: 8,
+      iconSpacing: 8,
+      text: text(theme, "mono", textColor, { size: "sm" }),
     };
+  }
+
+  return {
+    ...panel,
+    entry: entry(theme, "secondary"),
+    hoveredEntry: entry(
+      theme,
+      "secondary",
+      backgroundColor(theme, 300, "hovered")
+    ),
+    selectedEntry: entry(theme, "primary"),
+    hoveredSelectedEntry: entry(
+      theme,
+      "primary",
+      backgroundColor(theme, 300, "hovered")
+    ),
+    padding: {
+      top: 6,
+      left: 12,
+    },
+  };
 }
diff --git a/styles/src/styleTree/search.ts b/styles/src/styleTree/search.ts
index 7e08569acd..19046f49c4 100644
--- a/styles/src/styleTree/search.ts
+++ b/styles/src/styleTree/search.ts
@@ -2,78 +2,78 @@ import Theme from "../themes/theme";
 import { backgroundColor, border, player, text } from "./components";
 
 export default function search(theme: Theme) {
-    const optionButton = {
-        ...text(theme, "mono", "secondary"),
-        background: backgroundColor(theme, 300),
-        cornerRadius: 6,
-        border: border(theme, "primary"),
-        margin: {
-            left: 1,
-            right: 1,
-        },
-        padding: {
-            bottom: 1,
-            left: 6,
-            right: 6,
-            top: 1,
-        },
-    };
+  const optionButton = {
+    ...text(theme, "mono", "secondary"),
+    background: backgroundColor(theme, 300),
+    cornerRadius: 6,
+    border: border(theme, "primary"),
+    margin: {
+      left: 1,
+      right: 1,
+    },
+    padding: {
+      bottom: 1,
+      left: 6,
+      right: 6,
+      top: 1,
+    },
+  };
 
-    const editor = {
-        background: backgroundColor(theme, 500),
-        cornerRadius: 6,
-        minWidth: 200,
-        maxWidth: 500,
-        placeholderText: text(theme, "mono", "placeholder"),
-        selection: player(theme, 1).selection,
-        text: text(theme, "mono", "primary"),
-        border: border(theme, "secondary"),
-        margin: {
-            right: 5,
-        },
-        padding: {
-            top: 3,
-            bottom: 3,
-            left: 14,
-            right: 14,
-        },
-    };
+  const editor = {
+    background: backgroundColor(theme, 500),
+    cornerRadius: 6,
+    minWidth: 200,
+    maxWidth: 500,
+    placeholderText: text(theme, "mono", "placeholder"),
+    selection: player(theme, 1).selection,
+    text: text(theme, "mono", "primary"),
+    border: border(theme, "secondary"),
+    margin: {
+      right: 5,
+    },
+    padding: {
+      top: 3,
+      bottom: 3,
+      left: 14,
+      right: 14,
+    },
+  };
 
-    return {
-        matchBackground: theme.editor.highlight.match.value,
-        tabIconSpacing: 4,
-        tabIconWidth: 14,
-        activeHoveredOptionButton: {
-            ...optionButton,
-            background: backgroundColor(theme, 100),
-        },
-        activeOptionButton: {
-            ...optionButton,
-            background: backgroundColor(theme, 100),
-        },
-        editor,
-        hoveredOptionButton: {
-            ...optionButton,
-            background: backgroundColor(theme, 100),
-        },
-        invalidEditor: {
-            ...editor,
-            border: border(theme, "error"),
-        },
-        matchIndex: {
-            ...text(theme, "mono", "muted"),
-            padding: 6,
-        },
-        optionButton,
-        optionButtonGroup: {
-            padding: {
-                left: 2,
-                right: 2,
-            },
-        },
-        resultsStatus: {
-            ...text(theme, "mono", "primary"),
-            size: 18,
-        },
-    };
+  return {
+    matchBackground: theme.editor.highlight.match.value,
+    tabIconSpacing: 4,
+    tabIconWidth: 14,
+    activeHoveredOptionButton: {
+      ...optionButton,
+      background: backgroundColor(theme, 100),
+    },
+    activeOptionButton: {
+      ...optionButton,
+      background: backgroundColor(theme, 100),
+    },
+    editor,
+    hoveredOptionButton: {
+      ...optionButton,
+      background: backgroundColor(theme, 100),
+    },
+    invalidEditor: {
+      ...editor,
+      border: border(theme, "error"),
+    },
+    matchIndex: {
+      ...text(theme, "mono", "muted"),
+      padding: 6,
+    },
+    optionButton,
+    optionButtonGroup: {
+      padding: {
+        left: 2,
+        right: 2,
+      },
+    },
+    resultsStatus: {
+      ...text(theme, "mono", "primary"),
+      size: 18,
+    },
+  };
 }
diff --git a/styles/src/styleTree/selectorModal.ts b/styles/src/styleTree/selectorModal.ts
index 3e1925a179..90570cc093 100644
--- a/styles/src/styleTree/selectorModal.ts
+++ b/styles/src/styleTree/selectorModal.ts
@@ -2,58 +2,58 @@ import Theme from "../themes/theme";
 import { backgroundColor, border, player, shadow, text } from "./components";
 
 export default function selectorModal(theme: Theme): Object {
-    const item = {
-        padding: {
-            bottom: 4,
-            left: 16,
-            right: 16,
-            top: 4,
-        },
-        cornerRadius: 6,
-        text: text(theme, "sans", "secondary"),
-        highlightText: text(theme, "sans", "feature", { weight: "bold" }),
-    };
+  const item = {
+    padding: {
+      bottom: 4,
+      left: 16,
+      right: 16,
+      top: 4,
+    },
+    cornerRadius: 6,
+    text: text(theme, "sans", "secondary"),
+    highlightText: text(theme, "sans", "feature", { weight: "bold" }),
+  };
 
-    const activeItem = {
-        ...item,
-        background: backgroundColor(theme, 300, "active"),
-        text: text(theme, "sans", "primary"),
-    };
+  const activeItem = {
+    ...item,
+    background: backgroundColor(theme, 300, "active"),
+    text: text(theme, "sans", "primary"),
+  };
 
-    return {
-        background: backgroundColor(theme, 300),
-        cornerRadius: 6,
-        padding: 8,
-        item,
-        activeItem,
-        border: border(theme, "primary"),
-        empty: {
-            text: text(theme, "sans", "placeholder"),
-            padding: {
-                bottom: 4,
-                left: 16,
-                right: 16,
-                top: 8,
-            },
-        },
-        inputEditor: {
-            background: backgroundColor(theme, 500),
-            corner_radius: 6,
-            placeholderText: text(theme, "sans", "placeholder"),
-            selection: player(theme, 1).selection,
-            text: text(theme, "mono", "primary"),
-            border: border(theme, "secondary"),
-            padding: {
-                bottom: 7,
-                left: 16,
-                right: 16,
-                top: 7,
-            },
-        },
-        margin: {
-            bottom: 52,
-            top: 52,
-        },
-        shadow: shadow(theme),
-    };
+  return {
+    background: backgroundColor(theme, 300),
+    cornerRadius: 6,
+    padding: 8,
+    item,
+    activeItem,
+    border: border(theme, "primary"),
+    empty: {
+      text: text(theme, "sans", "placeholder"),
+      padding: {
+        bottom: 4,
+        left: 16,
+        right: 16,
+        top: 8,
+      },
+    },
+    inputEditor: {
+      background: backgroundColor(theme, 500),
+      corner_radius: 6,
+      placeholderText: text(theme, "sans", "placeholder"),
+      selection: player(theme, 1).selection,
+      text: text(theme, "mono", "primary"),
+      border: border(theme, "secondary"),
+      padding: {
+        bottom: 7,
+        left: 16,
+        right: 16,
+        top: 7,
+      },
+    },
+    margin: {
+      bottom: 52,
+      top: 52,
+    },
+    shadow: shadow(theme),
+  };
 }
diff --git a/styles/src/styleTree/workspace.ts b/styles/src/styleTree/workspace.ts
index 42cd5b20d5..f9f1ff283e 100644
--- a/styles/src/styleTree/workspace.ts
+++ b/styles/src/styleTree/workspace.ts
@@ -1,150 +1,150 @@
 import Theme from "../themes/theme";
-import { backgroundColor, border, borderColor, iconColor, text } from "./components";
+import { backgroundColor, border, iconColor, text } from "./components";
 
 export default function workspace(theme: Theme) {
-    const signInPrompt = {
-        ...text(theme, "sans", "secondary", { size: "xs" }),
-        underline: true,
-        padding: {
-            right: 8,
-        },
-    };
+  const signInPrompt = {
+    ...text(theme, "sans", "secondary", { size: "xs" }),
+    underline: true,
+    padding: {
+      right: 8,
+    },
+  };
 
-    const tab = {
-        height: 32,
-        background: backgroundColor(theme, 300),
-        iconClose: iconColor(theme, "muted"),
-        iconCloseActive: iconColor(theme, "active"),
-        iconConflict: iconColor(theme, "warning"),
-        iconDirty: iconColor(theme, "info"),
-        iconWidth: 8,
-        spacing: 10,
-        text: text(theme, "mono", "secondary", { size: "sm" }),
-        border: border(theme, "primary", {
-            left: true,
-            bottom: true,
-            overlay: true,
-        }),
-        padding: {
-            left: 12,
-            right: 12,
-        },
-    };
+  const tab = {
+    height: 32,
+    background: backgroundColor(theme, 300),
+    iconClose: iconColor(theme, "muted"),
+    iconCloseActive: iconColor(theme, "active"),
+    iconConflict: iconColor(theme, "warning"),
+    iconDirty: iconColor(theme, "info"),
+    iconWidth: 8,
+    spacing: 10,
+    text: text(theme, "mono", "secondary", { size: "sm" }),
+    border: border(theme, "primary", {
+      left: true,
+      bottom: true,
+      overlay: true,
+    }),
+    padding: {
+      left: 12,
+      right: 12,
+    },
+  };
 
-    const activeTab = {
-        ...tab,
-        background: backgroundColor(theme, 500),
-        text: text(theme, "mono", "active", { size: "sm" }),
+  const activeTab = {
+    ...tab,
+    background: backgroundColor(theme, 500),
+    text: text(theme, "mono", "active", { size: "sm" }),
+    border: {
+      ...tab.border,
+      bottom: false,
+    },
+  };
+
+  const sidebarItem = {
+    height: 32,
+    iconColor: iconColor(theme, "secondary"),
+    iconSize: 18,
+  };
+  const sidebar = {
+    width: 30,
+    background: backgroundColor(theme, 300),
+    border: border(theme, "primary", { right: true }),
+    item: sidebarItem,
+    activeItem: {
+      ...sidebarItem,
+      iconColor: iconColor(theme, "active"),
+    },
+    resizeHandle: {
+      background: border(theme, "primary").color,
+      padding: {
+        left: 1,
+      },
+    },
+  };
+
+  return {
+    background: backgroundColor(theme, 300),
+    leaderBorderOpacity: 0.7,
+    leaderBorderWidth: 2.0,
+    tab,
+    activeTab,
+    leftSidebar: {
+      ...sidebar,
+      border: border(theme, "primary", { right: true }),
+    },
+    rightSidebar: {
+      ...sidebar,
+      border: border(theme, "primary", { left: true }),
+    },
+    paneDivider: {
+      color: border(theme, "secondary").color,
+      width: 1,
+    },
+    status_bar: {
+      height: 24,
+      itemSpacing: 8,
+      padding: {
+        left: 6,
+        right: 6,
+      },
+      border: border(theme, "primary", { top: true, overlay: true }),
+      cursorPosition: text(theme, "sans", "muted"),
+      diagnosticMessage: text(theme, "sans", "muted"),
+      lspMessage: text(theme, "sans", "muted"),
+    },
+    titlebar: {
+      avatarWidth: 18,
+      height: 32,
+      background: backgroundColor(theme, 100),
+      shareIconColor: iconColor(theme, "secondary"),
+      shareIconActiveColor: iconColor(theme, "feature"),
+      title: text(theme, "sans", "primary"),
+      avatar: {
+        cornerRadius: 10,
         border: {
-            ...tab.border,
-            bottom: false,
+          color: "#00000088",
+          width: 1,
         },
-    };
-
-    const sidebarItem = {
-        height: 32,
-        iconColor: iconColor(theme, "secondary"),
-        iconSize: 18,
-    };
-    const sidebar = {
-        width: 30,
-        background: backgroundColor(theme, 300),
-        border: border(theme, "primary", { right: true }),
-        item: sidebarItem,
-        activeItem: {
-            ...sidebarItem,
-            iconColor: iconColor(theme, "active"),
+      },
+      avatarRibbon: {
+        height: 3,
+        width: 12,
+        // TODO: The background for this ideally should be 
+        // set with a token, not hardcoded in rust
+      },
+      border: border(theme, "primary", { bottom: true }),
+      signInPrompt,
+      hoveredSignInPrompt: {
+        ...signInPrompt,
+        ...text(theme, "sans", "active", { size: "xs" }),
+      },
+      offlineIcon: {
+        color: iconColor(theme, "secondary"),
+        width: 16,
+        padding: {
+          right: 4,
         },
-        resizeHandle: {
-            background: border(theme, "primary").color,
-            padding: {
-                left: 1,
-            },
-        },
-    };
-
-    return {
-        background: backgroundColor(theme, 300),
-        leaderBorderOpacity: 0.7,
-        leaderBorderWidth: 2.0,
-        tab,
-        activeTab,
-        leftSidebar: {
-            ...sidebar,
-            border: border(theme, "primary", { right: true }),
-        },
-        rightSidebar: {
-            ...sidebar,
-            border: border(theme, "primary", { left: true }),
-        },
-        paneDivider: {
-            color: border(theme, "secondary").color,
-            width: 1,
-        },
-        status_bar: {
-            height: 24,
-            itemSpacing: 8,
-            padding: {
-                left: 6,
-                right: 6,
-            },
-            border: border(theme, "primary", { top: true, overlay: true }),
-            cursorPosition: text(theme, "sans", "muted"),
-            diagnosticMessage: text(theme, "sans", "muted"),
-            lspMessage: text(theme, "sans", "muted"),
-        },
-        titlebar: {
-            avatarWidth: 18,
-            height: 32,
-            background: backgroundColor(theme, 100),
-            shareIconColor: iconColor(theme, "secondary"),
-            shareIconActiveColor: iconColor(theme, "feature"),
-            title: text(theme, "sans", "primary"),
-            avatar: {
-                cornerRadius: 10,
-                border: {
-                    color: "#00000088",
-                    width: 1,
-                },
-            },
-            avatarRibbon: {
-                height: 3,
-                width: 12,
-                // TODO: The background for this ideally should be 
-                // set with a token, not hardcoded in rust
-            },
-            border: border(theme, "primary", { bottom: true }),
-            signInPrompt,
-            hoveredSignInPrompt: {
-                ...signInPrompt,
-                ...text(theme, "sans", "active", { size: "xs" }),
-            },
-            offlineIcon: {
-                color: iconColor(theme, "secondary"),
-                width: 16,
-                padding: {
-                    right: 4,
-                },
-            },
-            outdatedWarning: {
-                ...text(theme, "sans", "warning"),
-                size: 13,
-            },
-        },
-        toolbar: {
-            height: 34,
-            background: backgroundColor(theme, 500),
-            border: border(theme, "secondary", { bottom: true }),
-            itemSpacing: 8,
-            padding: { left: 16, right: 8, top: 4, bottom: 4 },
-        },
-        breadcrumbs: {
-            ...text(theme, "mono", "secondary"),
-            padding: { left: 6 },
-        },
-        disconnectedOverlay: {
-            ...text(theme, "sans", "active"),
-            background: "#000000aa",
-        },
-    };
+      },
+      outdatedWarning: {
+        ...text(theme, "sans", "warning"),
+        size: 13,
+      },
+    },
+    toolbar: {
+      height: 34,
+      background: backgroundColor(theme, 500),
+      border: border(theme, "secondary", { bottom: true }),
+      itemSpacing: 8,
+      padding: { left: 16, right: 8, top: 4, bottom: 4 },
+    },
+    breadcrumbs: {
+      ...text(theme, "mono", "secondary"),
+      padding: { left: 6 },
+    },
+    disconnectedOverlay: {
+      ...text(theme, "sans", "active"),
+      background: "#000000aa",
+    },
+  };
 }
diff --git a/styles/src/themes/dark.ts b/styles/src/themes/dark.ts
index 7c7f7bf97e..09a8a07c67 100644
--- a/styles/src/themes/dark.ts
+++ b/styles/src/themes/dark.ts
@@ -3,227 +3,227 @@ import { withOpacity } from "../utils/color";
 import Theme, { buildPlayer, Syntax } from "./theme";
 
 const backgroundColor = {
-    100: {
-        base: colors.neutral[750],
-        hovered: colors.neutral[725],
-        active: colors.neutral[800],
-        focused: colors.neutral[675],
-    },
-    300: {
-        base: colors.neutral[800],
-        hovered: colors.neutral[775],
-        active: colors.neutral[750],
-        focused: colors.neutral[775],
-    },
-    500: {
-        base: colors.neutral[900],
-        hovered: withOpacity(colors.neutral[0], 0.08),
-        active: withOpacity(colors.neutral[0], 0.12),
-        focused: colors.neutral[825],
-    },
-    ok: {
-        base: colors.green[600],
-        hovered: colors.green[600],
-        active: colors.green[600],
-        focused: colors.green[600],
-    },
-    error: {
-        base: colors.red[400],
-        hovered: colors.red[400],
-        active: colors.red[400],
-        focused: colors.red[400],
-    },
-    warning: {
-        base: colors.amber[300],
-        hovered: colors.amber[300],
-        active: colors.amber[300],
-        focused: colors.amber[300],
-    },
-    info: {
-        base: colors.blue[500],
-        hovered: colors.blue[500],
-        active: colors.blue[500],
-        focused: colors.blue[500],
-    },
+  100: {
+    base: colors.neutral[750],
+    hovered: colors.neutral[725],
+    active: colors.neutral[800],
+    focused: colors.neutral[675],
+  },
+  300: {
+    base: colors.neutral[800],
+    hovered: colors.neutral[775],
+    active: colors.neutral[750],
+    focused: colors.neutral[775],
+  },
+  500: {
+    base: colors.neutral[900],
+    hovered: withOpacity(colors.neutral[0], 0.08),
+    active: withOpacity(colors.neutral[0], 0.12),
+    focused: colors.neutral[825],
+  },
+  ok: {
+    base: colors.green[600],
+    hovered: colors.green[600],
+    active: colors.green[600],
+    focused: colors.green[600],
+  },
+  error: {
+    base: colors.red[400],
+    hovered: colors.red[400],
+    active: colors.red[400],
+    focused: colors.red[400],
+  },
+  warning: {
+    base: colors.amber[300],
+    hovered: colors.amber[300],
+    active: colors.amber[300],
+    focused: colors.amber[300],
+  },
+  info: {
+    base: colors.blue[500],
+    hovered: colors.blue[500],
+    active: colors.blue[500],
+    focused: colors.blue[500],
+  },
 };
 
 const borderColor = {
-    primary: colors.neutral[875],
-    secondary: colors.neutral[775],
-    muted: colors.neutral[675],
-    focused: colors.neutral[500],
-    active: colors.neutral[900],
-    ok: colors.green[500],
-    error: colors.red[500],
-    warning: colors.amber[500],
-    info: colors.blue[500],
+  primary: colors.neutral[875],
+  secondary: colors.neutral[775],
+  muted: colors.neutral[675],
+  focused: colors.neutral[500],
+  active: colors.neutral[900],
+  ok: colors.green[500],
+  error: colors.red[500],
+  warning: colors.amber[500],
+  info: colors.blue[500],
 };
 
 const textColor = {
-    primary: colors.neutral[50],
-    secondary: colors.neutral[350],
-    muted: colors.neutral[450],
-    placeholder: colors.neutral[650],
-    active: colors.neutral[0],
-    //TODO: (design) define feature and it's correct value
-    feature: colors.sky[500],
-    ok: colors.green[600],
-    error: colors.red[400],
-    warning: colors.amber[300],
-    info: colors.blue[500],
+  primary: colors.neutral[50],
+  secondary: colors.neutral[350],
+  muted: colors.neutral[450],
+  placeholder: colors.neutral[650],
+  active: colors.neutral[0],
+  //TODO: (design) define feature and it's correct value
+  feature: colors.sky[500],
+  ok: colors.green[600],
+  error: colors.red[400],
+  warning: colors.amber[300],
+  info: colors.blue[500],
 };
 
 const iconColor = {
-    primary: colors.neutral[200],
-    secondary: colors.neutral[350],
-    muted: colors.neutral[600],
-    placeholder: colors.neutral[700],
-    active: colors.neutral[0],
-    //TODO: (design) define feature and it's correct value
-    feature: colors.blue[500],
-    ok: colors.green[600],
-    error: colors.red[500],
-    warning: colors.amber[400],
-    info: colors.blue[600],
+  primary: colors.neutral[200],
+  secondary: colors.neutral[350],
+  muted: colors.neutral[600],
+  placeholder: colors.neutral[700],
+  active: colors.neutral[0],
+  //TODO: (design) define feature and it's correct value
+  feature: colors.blue[500],
+  ok: colors.green[600],
+  error: colors.red[500],
+  warning: colors.amber[400],
+  info: colors.blue[600],
 };
 
 const player = {
-    1: buildPlayer(colors.blue[500]),
-    2: buildPlayer(colors.lime[500]),
-    3: buildPlayer(colors.fuschia[500]),
-    4: buildPlayer(colors.orange[500]),
-    5: buildPlayer(colors.purple[500]),
-    6: buildPlayer(colors.teal[400]),
-    7: buildPlayer(colors.pink[400]),
-    8: buildPlayer(colors.yellow[400]),
+  1: buildPlayer(colors.blue[500]),
+  2: buildPlayer(colors.lime[500]),
+  3: buildPlayer(colors.fuschia[500]),
+  4: buildPlayer(colors.orange[500]),
+  5: buildPlayer(colors.purple[500]),
+  6: buildPlayer(colors.teal[400]),
+  7: buildPlayer(colors.pink[400]),
+  8: buildPlayer(colors.yellow[400]),
 };
 
 const editor = {
-    background: backgroundColor[500].base,
-    indent_guide: borderColor.muted,
-    indent_guide_active: borderColor.secondary,
-    line: {
-        active: withOpacity(colors.neutral[0], 0.07),
-        highlighted: withOpacity(colors.neutral[0], 0.12),
-        inserted: backgroundColor.ok.active,
-        deleted: backgroundColor.error.active,
-        modified: backgroundColor.info.active,
-    },
-    highlight: {
-        selection: player[1].selectionColor,
-        occurrence: withOpacity(colors.neutral[0], 0.12),
-        activeOccurrence: withOpacity(colors.neutral[0], 0.16), // TODO: This is not correctly hooked up to occurences on the rust side
-        matchingBracket: backgroundColor[500].active,
-        match: withOpacity(colors.sky[500], 0.16),
-        activeMatch: withOpacity(colors.sky[800], 0.32),
-        related: backgroundColor[500].focused,
-    },
-    gutter: {
-        primary: textColor.placeholder,
-        active: textColor.active,
-    },
+  background: backgroundColor[500].base,
+  indent_guide: borderColor.muted,
+  indent_guide_active: borderColor.secondary,
+  line: {
+    active: withOpacity(colors.neutral[0], 0.07),
+    highlighted: withOpacity(colors.neutral[0], 0.12),
+    inserted: backgroundColor.ok.active,
+    deleted: backgroundColor.error.active,
+    modified: backgroundColor.info.active,
+  },
+  highlight: {
+    selection: player[1].selectionColor,
+    occurrence: withOpacity(colors.neutral[0], 0.12),
+    activeOccurrence: withOpacity(colors.neutral[0], 0.16), // TODO: This is not correctly hooked up to occurences on the rust side
+    matchingBracket: backgroundColor[500].active,
+    match: withOpacity(colors.sky[500], 0.16),
+    activeMatch: withOpacity(colors.sky[800], 0.32),
+    related: backgroundColor[500].focused,
+  },
+  gutter: {
+    primary: textColor.placeholder,
+    active: textColor.active,
+  },
 };
 
 const syntax: Syntax = {
-    primary: {
-        color: colors.neutral[150],
-        weight: fontWeights.normal,
-    },
-    comment: {
-        color: colors.neutral[300],
-        weight: fontWeights.normal,
-    },
-    punctuation: {
-        color: colors.neutral[200],
-        weight: fontWeights.normal,
-    },
-    constant: {
-        color: colors.neutral[150],
-        weight: fontWeights.normal,
-    },
-    keyword: {
-        color: colors.blue[400],
-        weight: fontWeights.normal,
-    },
-    function: {
-        color: colors.yellow[200],
-        weight: fontWeights.normal,
-    },
-    type: {
-        color: colors.teal[300],
-        weight: fontWeights.normal,
-    },
-    variant: {
-        color: colors.sky[300],
-        weight: fontWeights.normal,
-    },
-    property: {
-        color: colors.blue[400],
-        weight: fontWeights.normal,
-    },
-    enum: {
-        color: colors.orange[500],
-        weight: fontWeights.normal,
-    },
-    operator: {
-        color: colors.orange[500],
-        weight: fontWeights.normal,
-    },
-    string: {
-        color: colors.orange[300],
-        weight: fontWeights.normal,
-    },
-    number: {
-        color: colors.lime[300],
-        weight: fontWeights.normal,
-    },
-    boolean: {
-        color: colors.lime[300],
-        weight: fontWeights.normal,
-    },
-    predictive: {
-        color: textColor.muted,
-        weight: fontWeights.normal,
-    },
-    title: {
-        color: colors.amber[500],
-        weight: fontWeights.bold,
-    },
-    emphasis: {
-        color: textColor.active,
-        weight: fontWeights.normal,
-    },
-    emphasisStrong: {
-        color: textColor.active,
-        weight: fontWeights.bold,
-    },
-    linkUrl: {
-        color: colors.lime[500],
-        weight: fontWeights.normal,
-        // TODO: add underline
-    },
-    linkText: {
-        color: colors.orange[500],
-        weight: fontWeights.normal,
-        // TODO: add italic
-    },
+  primary: {
+    color: colors.neutral[150],
+    weight: fontWeights.normal,
+  },
+  comment: {
+    color: colors.neutral[300],
+    weight: fontWeights.normal,
+  },
+  punctuation: {
+    color: colors.neutral[200],
+    weight: fontWeights.normal,
+  },
+  constant: {
+    color: colors.neutral[150],
+    weight: fontWeights.normal,
+  },
+  keyword: {
+    color: colors.blue[400],
+    weight: fontWeights.normal,
+  },
+  function: {
+    color: colors.yellow[200],
+    weight: fontWeights.normal,
+  },
+  type: {
+    color: colors.teal[300],
+    weight: fontWeights.normal,
+  },
+  variant: {
+    color: colors.sky[300],
+    weight: fontWeights.normal,
+  },
+  property: {
+    color: colors.blue[400],
+    weight: fontWeights.normal,
+  },
+  enum: {
+    color: colors.orange[500],
+    weight: fontWeights.normal,
+  },
+  operator: {
+    color: colors.orange[500],
+    weight: fontWeights.normal,
+  },
+  string: {
+    color: colors.orange[300],
+    weight: fontWeights.normal,
+  },
+  number: {
+    color: colors.lime[300],
+    weight: fontWeights.normal,
+  },
+  boolean: {
+    color: colors.lime[300],
+    weight: fontWeights.normal,
+  },
+  predictive: {
+    color: textColor.muted,
+    weight: fontWeights.normal,
+  },
+  title: {
+    color: colors.amber[500],
+    weight: fontWeights.bold,
+  },
+  emphasis: {
+    color: textColor.active,
+    weight: fontWeights.normal,
+  },
+  emphasisStrong: {
+    color: textColor.active,
+    weight: fontWeights.bold,
+  },
+  linkUrl: {
+    color: colors.lime[500],
+    weight: fontWeights.normal,
+    // TODO: add underline
+  },
+  linkText: {
+    color: colors.orange[500],
+    weight: fontWeights.normal,
+    // TODO: add italic
+  },
 };
 
 const shadowAlpha: NumberToken = {
-    value: 0.32,
-    type: "number",
+  value: 0.32,
+  type: "number",
 };
 
 const theme: Theme = {
-    name: "dark",
-    backgroundColor,
-    borderColor,
-    textColor,
-    iconColor,
-    editor,
-    syntax,
-    player,
-    shadowAlpha,
+  name: "dark",
+  backgroundColor,
+  borderColor,
+  textColor,
+  iconColor,
+  editor,
+  syntax,
+  player,
+  shadowAlpha,
 };
 
 export default theme;
diff --git a/styles/src/themes/light.ts b/styles/src/themes/light.ts
index 434760b304..74caa4987d 100644
--- a/styles/src/themes/light.ts
+++ b/styles/src/themes/light.ts
@@ -3,225 +3,225 @@ import { withOpacity } from "../utils/color";
 import Theme, { buildPlayer, Syntax } from "./theme";
 
 const backgroundColor = {
-    100: {
-        base: colors.neutral[75],
-        hovered: colors.neutral[100],
-        active: colors.neutral[150],
-        focused: colors.neutral[100],
-    },
-    300: {
-        base: colors.neutral[25],
-        hovered: colors.neutral[75],
-        active: colors.neutral[125],
-        focused: colors.neutral[75],
-    },
-    500: {
-        base: colors.neutral[0],
-        hovered: withOpacity(colors.neutral[900], 0.03),
-        active: withOpacity(colors.neutral[900], 0.06),
-        focused: colors.neutral[50],
-    },
-    ok: {
-        base: colors.green[100],
-        hovered: colors.green[100],
-        active: colors.green[100],
-        focused: colors.green[100],
-    },
-    error: {
-        base: colors.red[100],
-        hovered: colors.red[100],
-        active: colors.red[100],
-        focused: colors.red[100],
-    },
-    warning: {
-        base: colors.yellow[100],
-        hovered: colors.yellow[100],
-        active: colors.yellow[100],
-        focused: colors.yellow[100],
-    },
-    info: {
-        base: colors.blue[100],
-        hovered: colors.blue[100],
-        active: colors.blue[100],
-        focused: colors.blue[100],
-    },
+  100: {
+    base: colors.neutral[75],
+    hovered: colors.neutral[100],
+    active: colors.neutral[150],
+    focused: colors.neutral[100],
+  },
+  300: {
+    base: colors.neutral[25],
+    hovered: colors.neutral[75],
+    active: colors.neutral[125],
+    focused: colors.neutral[75],
+  },
+  500: {
+    base: colors.neutral[0],
+    hovered: withOpacity(colors.neutral[900], 0.03),
+    active: withOpacity(colors.neutral[900], 0.06),
+    focused: colors.neutral[50],
+  },
+  ok: {
+    base: colors.green[100],
+    hovered: colors.green[100],
+    active: colors.green[100],
+    focused: colors.green[100],
+  },
+  error: {
+    base: colors.red[100],
+    hovered: colors.red[100],
+    active: colors.red[100],
+    focused: colors.red[100],
+  },
+  warning: {
+    base: colors.yellow[100],
+    hovered: colors.yellow[100],
+    active: colors.yellow[100],
+    focused: colors.yellow[100],
+  },
+  info: {
+    base: colors.blue[100],
+    hovered: colors.blue[100],
+    active: colors.blue[100],
+    focused: colors.blue[100],
+  },
 };
 
 const borderColor = {
-    primary: colors.neutral[150],
-    secondary: colors.neutral[150],
-    muted: colors.neutral[100],
-    focused: colors.neutral[100],
-    active: colors.neutral[250],
-    ok: colors.green[200],
-    error: colors.red[200],
-    warning: colors.yellow[200],
-    info: colors.blue[200],
+  primary: colors.neutral[150],
+  secondary: colors.neutral[150],
+  muted: colors.neutral[100],
+  focused: colors.neutral[100],
+  active: colors.neutral[250],
+  ok: colors.green[200],
+  error: colors.red[200],
+  warning: colors.yellow[200],
+  info: colors.blue[200],
 };
 
 const textColor = {
-    primary: colors.neutral[750],
-    secondary: colors.neutral[650],
-    muted: colors.neutral[550],
-    placeholder: colors.neutral[450],
-    active: colors.neutral[900],
-    feature: colors.indigo[600],
-    ok: colors.green[500],
-    error: colors.red[500],
-    warning: colors.yellow[500],
-    info: colors.blue[500],
+  primary: colors.neutral[750],
+  secondary: colors.neutral[650],
+  muted: colors.neutral[550],
+  placeholder: colors.neutral[450],
+  active: colors.neutral[900],
+  feature: colors.indigo[600],
+  ok: colors.green[500],
+  error: colors.red[500],
+  warning: colors.yellow[500],
+  info: colors.blue[500],
 };
 
 const iconColor = {
-    primary: colors.neutral[700],
-    secondary: colors.neutral[500],
-    muted: colors.neutral[350],
-    placeholder: colors.neutral[300],
-    active: colors.neutral[900],
-    feature: colors.indigo[500],
-    ok: colors.green[600],
-    error: colors.red[600],
-    warning: colors.yellow[400],
-    info: colors.blue[600],
+  primary: colors.neutral[700],
+  secondary: colors.neutral[500],
+  muted: colors.neutral[350],
+  placeholder: colors.neutral[300],
+  active: colors.neutral[900],
+  feature: colors.indigo[500],
+  ok: colors.green[600],
+  error: colors.red[600],
+  warning: colors.yellow[400],
+  info: colors.blue[600],
 };
 
 const player = {
-    1: buildPlayer(colors.blue[500]),
-    2: buildPlayer(colors.emerald[400]),
-    3: buildPlayer(colors.fuschia[400]),
-    4: buildPlayer(colors.orange[400]),
-    5: buildPlayer(colors.purple[400]),
-    6: buildPlayer(colors.teal[400]),
-    7: buildPlayer(colors.pink[400]),
-    8: buildPlayer(colors.yellow[400]),
+  1: buildPlayer(colors.blue[500]),
+  2: buildPlayer(colors.emerald[400]),
+  3: buildPlayer(colors.fuschia[400]),
+  4: buildPlayer(colors.orange[400]),
+  5: buildPlayer(colors.purple[400]),
+  6: buildPlayer(colors.teal[400]),
+  7: buildPlayer(colors.pink[400]),
+  8: buildPlayer(colors.yellow[400]),
 };
 
 const editor = {
-    background: backgroundColor[500].base,
-    indent_guide: borderColor.muted,
-    indent_guide_active: borderColor.secondary,
-    line: {
-        active: withOpacity(colors.neutral[900], 0.06),
-        highlighted: withOpacity(colors.neutral[900], 0.12),
-        inserted: backgroundColor.ok.active,
-        deleted: backgroundColor.error.active,
-        modified: backgroundColor.info.active,
-    },
-    highlight: {
-        selection: player[1].selectionColor,
-        occurrence: withOpacity(colors.neutral[900], 0.06),
-        activeOccurrence: withOpacity(colors.neutral[900], 0.16), // TODO: This is not hooked up to occurences on the rust side
-        matchingBracket: colors.neutral[0],
-        match: withOpacity(colors.red[500], 0.2),
-        activeMatch: withOpacity(colors.indigo[400], 0.36), // TODO: This is not hooked up to occurences on the rust side
-        related: colors.neutral[0],
-    },
-    gutter: {
-        primary: colors.neutral[300],
-        active: textColor.active,
-    },
+  background: backgroundColor[500].base,
+  indent_guide: borderColor.muted,
+  indent_guide_active: borderColor.secondary,
+  line: {
+    active: withOpacity(colors.neutral[900], 0.06),
+    highlighted: withOpacity(colors.neutral[900], 0.12),
+    inserted: backgroundColor.ok.active,
+    deleted: backgroundColor.error.active,
+    modified: backgroundColor.info.active,
+  },
+  highlight: {
+    selection: player[1].selectionColor,
+    occurrence: withOpacity(colors.neutral[900], 0.06),
+    activeOccurrence: withOpacity(colors.neutral[900], 0.16), // TODO: This is not hooked up to occurences on the rust side
+    matchingBracket: colors.neutral[0],
+    match: withOpacity(colors.red[500], 0.2),
+    activeMatch: withOpacity(colors.indigo[400], 0.36), // TODO: This is not hooked up to occurences on the rust side
+    related: colors.neutral[0],
+  },
+  gutter: {
+    primary: colors.neutral[300],
+    active: textColor.active,
+  },
 };
 
 const syntax: Syntax = {
-    primary: {
-        color: colors.neutral[800],
-        weight: fontWeights.normal,
-    },
-    comment: {
-        color: colors.neutral[500],
-        weight: fontWeights.normal,
-    },
-    punctuation: {
-        color: colors.neutral[600],
-        weight: fontWeights.normal,
-    },
-    constant: {
-        color: colors.neutral[800],
-        weight: fontWeights.normal,
-    },
-    keyword: {
-        color: colors.indigo[700],
-        weight: fontWeights.normal,
-    },
-    function: {
-        color: colors.orange[600],
-        weight: fontWeights.normal,
-    },
-    type: {
-        color: colors.yellow[600],
-        weight: fontWeights.normal,
-    },
-    variant: {
-        color: colors.rose[700],
-        weight: fontWeights.normal,
-    },
-    property: {
-        color: colors.emerald[700],
-        weight: fontWeights.normal,
-    },
-    enum: {
-        color: colors.red[500],
-        weight: fontWeights.normal,
-    },
-    operator: {
-        color: colors.red[500],
-        weight: fontWeights.normal,
-    },
-    string: {
-        color: colors.red[500],
-        weight: fontWeights.normal,
-    },
-    number: {
-        color: colors.indigo[500],
-        weight: fontWeights.normal,
-    },
-    boolean: {
-        color: colors.red[500],
-        weight: fontWeights.normal,
-    },
-    predictive: {
-        color: textColor.placeholder,
-        weight: fontWeights.normal,
-    },
-    title: {
-        color: colors.sky[500],
-        weight: fontWeights.bold,
-    },
-    emphasis: {
-        color: textColor.active,
-        weight: fontWeights.normal,
-    },
-    emphasisStrong: {
-        color: textColor.active,
-        weight: fontWeights.bold,
-    },
-    linkUrl: {
-        color: colors.lime[500],
-        weight: fontWeights.normal,
-        // TODO: add underline
-    },
-    linkText: {
-        color: colors.red[500],
-        weight: fontWeights.normal,
-        // TODO: add italic
-    },
+  primary: {
+    color: colors.neutral[800],
+    weight: fontWeights.normal,
+  },
+  comment: {
+    color: colors.neutral[500],
+    weight: fontWeights.normal,
+  },
+  punctuation: {
+    color: colors.neutral[600],
+    weight: fontWeights.normal,
+  },
+  constant: {
+    color: colors.neutral[800],
+    weight: fontWeights.normal,
+  },
+  keyword: {
+    color: colors.indigo[700],
+    weight: fontWeights.normal,
+  },
+  function: {
+    color: colors.orange[600],
+    weight: fontWeights.normal,
+  },
+  type: {
+    color: colors.yellow[600],
+    weight: fontWeights.normal,
+  },
+  variant: {
+    color: colors.rose[700],
+    weight: fontWeights.normal,
+  },
+  property: {
+    color: colors.emerald[700],
+    weight: fontWeights.normal,
+  },
+  enum: {
+    color: colors.red[500],
+    weight: fontWeights.normal,
+  },
+  operator: {
+    color: colors.red[500],
+    weight: fontWeights.normal,
+  },
+  string: {
+    color: colors.red[500],
+    weight: fontWeights.normal,
+  },
+  number: {
+    color: colors.indigo[500],
+    weight: fontWeights.normal,
+  },
+  boolean: {
+    color: colors.red[500],
+    weight: fontWeights.normal,
+  },
+  predictive: {
+    color: textColor.placeholder,
+    weight: fontWeights.normal,
+  },
+  title: {
+    color: colors.sky[500],
+    weight: fontWeights.bold,
+  },
+  emphasis: {
+    color: textColor.active,
+    weight: fontWeights.normal,
+  },
+  emphasisStrong: {
+    color: textColor.active,
+    weight: fontWeights.bold,
+  },
+  linkUrl: {
+    color: colors.lime[500],
+    weight: fontWeights.normal,
+    // TODO: add underline
+  },
+  linkText: {
+    color: colors.red[500],
+    weight: fontWeights.normal,
+    // TODO: add italic
+  },
 };
 
 const shadowAlpha: NumberToken = {
-    value: 0.12,
-    type: "number",
+  value: 0.12,
+  type: "number",
 };
 
 const theme: Theme = {
-    name: "light",
-    backgroundColor,
-    borderColor,
-    textColor,
-    iconColor,
-    editor,
-    syntax,
-    player,
-    shadowAlpha,
+  name: "light",
+  backgroundColor,
+  borderColor,
+  textColor,
+  iconColor,
+  editor,
+  syntax,
+  player,
+  shadowAlpha,
 };
 
 export default theme;
diff --git a/styles/src/themes/theme.ts b/styles/src/themes/theme.ts
index 64c6391dab..945b22ca4a 100644
--- a/styles/src/themes/theme.ts
+++ b/styles/src/themes/theme.ts
@@ -2,144 +2,144 @@ import { ColorToken, FontWeightToken, NumberToken } from "../tokens";
 import { withOpacity } from "../utils/color";
 
 export interface SyntaxHighlightStyle {
-    color: ColorToken;
-    weight: FontWeightToken;
+  color: ColorToken;
+  weight: FontWeightToken;
 }
 
 export interface Player {
-    baseColor: ColorToken;
-    cursorColor: ColorToken;
-    selectionColor: ColorToken;
-    borderColor: ColorToken;
+  baseColor: ColorToken;
+  cursorColor: ColorToken;
+  selectionColor: ColorToken;
+  borderColor: ColorToken;
 }
 export function buildPlayer(
-    color: ColorToken,
-    cursorOpacity?: number,
-    selectionOpacity?: number,
-    borderOpacity?: number
+  color: ColorToken,
+  cursorOpacity?: number,
+  selectionOpacity?: number,
+  borderOpacity?: number
 ) {
-    return {
-        baseColor: color,
-        cursorColor: withOpacity(color, cursorOpacity || 1.0),
-        selectionColor: withOpacity(color, selectionOpacity || 0.24),
-        borderColor: withOpacity(color, borderOpacity || 0.8),
-    }
+  return {
+    baseColor: color,
+    cursorColor: withOpacity(color, cursorOpacity || 1.0),
+    selectionColor: withOpacity(color, selectionOpacity || 0.24),
+    borderColor: withOpacity(color, borderOpacity || 0.8),
+  }
 }
 
 export interface BackgroundColorSet {
-    base: ColorToken;
-    hovered: ColorToken;
-    active: ColorToken;
-    focused: ColorToken;
+  base: ColorToken;
+  hovered: ColorToken;
+  active: ColorToken;
+  focused: ColorToken;
 }
 
 export interface Syntax {
-    primary: SyntaxHighlightStyle;
-    comment: SyntaxHighlightStyle;
-    punctuation: SyntaxHighlightStyle;
-    constant: SyntaxHighlightStyle;
-    keyword: SyntaxHighlightStyle;
-    function: SyntaxHighlightStyle;
-    type: SyntaxHighlightStyle;
-    variant: SyntaxHighlightStyle;
-    property: SyntaxHighlightStyle;
-    enum: SyntaxHighlightStyle;
-    operator: SyntaxHighlightStyle;
-    string: SyntaxHighlightStyle;
-    number: SyntaxHighlightStyle;
-    boolean: SyntaxHighlightStyle;
-    predictive: SyntaxHighlightStyle;
-    // TODO: Either move the following or rename
-    title: SyntaxHighlightStyle;
-    emphasis: SyntaxHighlightStyle;
-    emphasisStrong: SyntaxHighlightStyle;
-    linkUrl: SyntaxHighlightStyle;
-    linkText: SyntaxHighlightStyle;
+  primary: SyntaxHighlightStyle;
+  comment: SyntaxHighlightStyle;
+  punctuation: SyntaxHighlightStyle;
+  constant: SyntaxHighlightStyle;
+  keyword: SyntaxHighlightStyle;
+  function: SyntaxHighlightStyle;
+  type: SyntaxHighlightStyle;
+  variant: SyntaxHighlightStyle;
+  property: SyntaxHighlightStyle;
+  enum: SyntaxHighlightStyle;
+  operator: SyntaxHighlightStyle;
+  string: SyntaxHighlightStyle;
+  number: SyntaxHighlightStyle;
+  boolean: SyntaxHighlightStyle;
+  predictive: SyntaxHighlightStyle;
+  // TODO: Either move the following or rename
+  title: SyntaxHighlightStyle;
+  emphasis: SyntaxHighlightStyle;
+  emphasisStrong: SyntaxHighlightStyle;
+  linkUrl: SyntaxHighlightStyle;
+  linkText: SyntaxHighlightStyle;
 };
 
 export default interface Theme {
-    name: string;
-    backgroundColor: {
-        100: BackgroundColorSet;
-        300: BackgroundColorSet;
-        500: BackgroundColorSet;
-        ok: BackgroundColorSet;
-        error: BackgroundColorSet;
-        warning: BackgroundColorSet;
-        info: BackgroundColorSet;
+  name: string;
+  backgroundColor: {
+    100: BackgroundColorSet;
+    300: BackgroundColorSet;
+    500: BackgroundColorSet;
+    ok: BackgroundColorSet;
+    error: BackgroundColorSet;
+    warning: BackgroundColorSet;
+    info: BackgroundColorSet;
+  };
+  borderColor: {
+    primary: ColorToken;
+    secondary: ColorToken;
+    muted: ColorToken;
+    focused: ColorToken;
+    active: ColorToken;
+    ok: ColorToken;
+    error: ColorToken;
+    warning: ColorToken;
+    info: ColorToken;
+  };
+  textColor: {
+    primary: ColorToken;
+    secondary: ColorToken;
+    muted: ColorToken;
+    placeholder: ColorToken;
+    active: ColorToken;
+    feature: ColorToken;
+    ok: ColorToken;
+    error: ColorToken;
+    warning: ColorToken;
+    info: ColorToken;
+  };
+  iconColor: {
+    primary: ColorToken;
+    secondary: ColorToken;
+    muted: ColorToken;
+    placeholder: ColorToken;
+    active: ColorToken;
+    feature: ColorToken;
+    ok: ColorToken;
+    error: ColorToken;
+    warning: ColorToken;
+    info: ColorToken;
+  };
+  editor: {
+    background: ColorToken;
+    indent_guide: ColorToken;
+    indent_guide_active: ColorToken;
+    line: {
+      active: ColorToken;
+      highlighted: ColorToken;
+      inserted: ColorToken;
+      deleted: ColorToken;
+      modified: ColorToken;
     };
-    borderColor: {
-        primary: ColorToken;
-        secondary: ColorToken;
-        muted: ColorToken;
-        focused: ColorToken;
-        active: ColorToken;
-        ok: ColorToken;
-        error: ColorToken;
-        warning: ColorToken;
-        info: ColorToken;
+    highlight: {
+      selection: ColorToken;
+      occurrence: ColorToken;
+      activeOccurrence: ColorToken;
+      matchingBracket: ColorToken;
+      match: ColorToken;
+      activeMatch: ColorToken;
+      related: ColorToken;
     };
-    textColor: {
-        primary: ColorToken;
-        secondary: ColorToken;
-        muted: ColorToken;
-        placeholder: ColorToken;
-        active: ColorToken;
-        feature: ColorToken;
-        ok: ColorToken;
-        error: ColorToken;
-        warning: ColorToken;
-        info: ColorToken;
-    };
-    iconColor: {
-        primary: ColorToken;
-        secondary: ColorToken;
-        muted: ColorToken;
-        placeholder: ColorToken;
-        active: ColorToken;
-        feature: ColorToken;
-        ok: ColorToken;
-        error: ColorToken;
-        warning: ColorToken;
-        info: ColorToken;
-    };
-    editor: {
-        background: ColorToken;
-        indent_guide: ColorToken;
-        indent_guide_active: ColorToken;
-        line: {
-            active: ColorToken;
-            highlighted: ColorToken;
-            inserted: ColorToken;
-            deleted: ColorToken;
-            modified: ColorToken;
-        };
-        highlight: {
-            selection: ColorToken;
-            occurrence: ColorToken;
-            activeOccurrence: ColorToken;
-            matchingBracket: ColorToken;
-            match: ColorToken;
-            activeMatch: ColorToken;
-            related: ColorToken;
-        };
-        gutter: {
-            primary: ColorToken;
-            active: ColorToken;
-        };
+    gutter: {
+      primary: ColorToken;
+      active: ColorToken;
     };
+  };
 
-    syntax: Syntax,
+  syntax: Syntax,
 
-    player: {
-        1: Player;
-        2: Player;
-        3: Player;
-        4: Player;
-        5: Player;
-        6: Player;
-        7: Player;
-        8: Player;
-    };
-    shadowAlpha: NumberToken;
+  player: {
+    1: Player;
+    2: Player;
+    3: Player;
+    4: Player;
+    5: Player;
+    6: Player;
+    7: Player;
+    8: Player;
+  };
+  shadowAlpha: NumberToken;
 }
diff --git a/styles/src/tokens.ts b/styles/src/tokens.ts
index aa865ae694..5e412ae042 100644
--- a/styles/src/tokens.ts
+++ b/styles/src/tokens.ts
@@ -36,7 +36,7 @@ export const fontSizes = {
   xl: fontSize(20),
 };
 
-export type FontWeight = 
+export type FontWeight =
   | "thin"
   | "extra_light"
   | "light"
diff --git a/styles/src/utils/color.ts b/styles/src/utils/color.ts
index 9e1599acac..196c3d4e2e 100644
--- a/styles/src/utils/color.ts
+++ b/styles/src/utils/color.ts
@@ -4,49 +4,49 @@ import { ColorToken } from "../tokens";
 export type Color = string;
 export type ColorRampStep = { value: Color; type: "color"; step: number };
 export type ColorRamp = {
-    [index: number]: ColorRampStep;
+  [index: number]: ColorRampStep;
 };
 
 export function colorRamp(
-    color: Color | [Color, Color],
-    options?: { steps?: number; increment?: number; }
+  color: Color | [Color, Color],
+  options?: { steps?: number; increment?: number; }
 ): ColorRamp {
-    let scale: Scale;
-    if (Array.isArray(color)) {
-        const [startColor, endColor] = color;
-        scale = chroma.scale([startColor, endColor]);
-    } else {
-        let hue = Math.round(chroma(color).hsl()[0]);
-        let startColor = chroma.hsl(hue, 0.88, 0.96);
-        let endColor = chroma.hsl(hue, 0.68, 0.12);
-        scale = chroma
-            .scale([startColor, color, endColor])
-            .domain([0, 0.5, 1])
-            .mode("hsl")
-            .gamma(1)
-            // .correctLightness(true)
-            .padding([0, 0]);
-    }
+  let scale: Scale;
+  if (Array.isArray(color)) {
+    const [startColor, endColor] = color;
+    scale = chroma.scale([startColor, endColor]);
+  } else {
+    let hue = Math.round(chroma(color).hsl()[0]);
+    let startColor = chroma.hsl(hue, 0.88, 0.96);
+    let endColor = chroma.hsl(hue, 0.68, 0.12);
+    scale = chroma
+      .scale([startColor, color, endColor])
+      .domain([0, 0.5, 1])
+      .mode("hsl")
+      .gamma(1)
+      // .correctLightness(true)
+      .padding([0, 0]);
+  }
 
-    const ramp: ColorRamp = {};
-    const steps = options?.steps || 10;
-    const increment = options?.increment || 100;
+  const ramp: ColorRamp = {};
+  const steps = options?.steps || 10;
+  const increment = options?.increment || 100;
 
-    scale.colors(steps, "hex").forEach((color, ix) => {
-        const step = ix * increment;
-        ramp[step] = {
-            value: color,
-            step,
-            type: "color",
-        };
-    });
+  scale.colors(steps, "hex").forEach((color, ix) => {
+    const step = ix * increment;
+    ramp[step] = {
+      value: color,
+      step,
+      type: "color",
+    };
+  });
 
-    return ramp;
+  return ramp;
 }
 
 export function withOpacity(color: ColorToken, opacity: number): ColorToken {
-    return {
-        ...color,
-        value: chroma(color.value).alpha(opacity).hex()
-    };
+  return {
+    ...color,
+    value: chroma(color.value).alpha(opacity).hex()
+  };
 }
diff --git a/styles/src/utils/snakeCase.ts b/styles/src/utils/snakeCase.ts
index 7d0e4470d8..890017f1c6 100644
--- a/styles/src/utils/snakeCase.ts
+++ b/styles/src/utils/snakeCase.ts
@@ -4,32 +4,32 @@ import { snakeCase } from "case-anything";
 
 // Typescript magic to convert any string from camelCase to snake_case at compile time
 type SnakeCase<S> =
-    S extends string ?
-    S extends `${infer T}${infer U}` ?
-    `${T extends Capitalize<T> ? "_" : ""}${Lowercase<T>}${SnakeCase<U>}` :
-    S :
-    S;
+  S extends string ?
+  S extends `${infer T}${infer U}` ?
+  `${T extends Capitalize<T> ? "_" : ""}${Lowercase<T>}${SnakeCase<U>}` :
+  S :
+  S;
 
 type SnakeCased<Type> = {
-    [Property in keyof Type as SnakeCase<Property>]: SnakeCased<Type[Property]>
+  [Property in keyof Type as SnakeCase<Property>]: SnakeCased<Type[Property]>
 }
 
 export default function snakeCaseTree<T>(object: T): SnakeCased<T> {
-    const snakeObject: any = {};
-    for (const key in object) {
-        snakeObject[snakeCase(key)] = snakeCaseValue(object[key]);
-    }
-    return snakeObject;
+  const snakeObject: any = {};
+  for (const key in object) {
+    snakeObject[snakeCase(key)] = snakeCaseValue(object[key]);
+  }
+  return snakeObject;
 }
 
 function snakeCaseValue(value: any): any {
-    if (typeof value === "object") {
-        if (Array.isArray(value)) {
-            return value.map(snakeCaseValue);
-        } else {
-            return snakeCaseTree(value);
-        }
+  if (typeof value === "object") {
+    if (Array.isArray(value)) {
+      return value.map(snakeCaseValue);
     } else {
-        return value;
+      return snakeCaseTree(value);
     }
+  } else {
+    return value;
+  }
 }