diff --git a/styles/src/component/icon_button.ts b/styles/src/component/icon_button.ts
index 79891c2477..4664928d55 100644
--- a/styles/src/component/icon_button.ts
+++ b/styles/src/component/icon_button.ts
@@ -11,9 +11,9 @@ export type Margin = {
 
 interface IconButtonOptions {
     layer?:
-        | ColorScheme["lowest"]
-        | ColorScheme["middle"]
-        | ColorScheme["highest"]
+    | ColorScheme["lowest"]
+    | ColorScheme["middle"]
+    | ColorScheme["highest"]
     color?: keyof ColorScheme["lowest"]
     margin?: Partial<Margin>
 }
diff --git a/styles/src/component/text_button.ts b/styles/src/component/text_button.ts
index 477c2515e3..64a91de7b0 100644
--- a/styles/src/component/text_button.ts
+++ b/styles/src/component/text_button.ts
@@ -10,9 +10,9 @@ import { Margin } from "./icon_button"
 
 interface TextButtonOptions {
     layer?:
-        | ColorScheme["lowest"]
-        | ColorScheme["middle"]
-        | ColorScheme["highest"]
+    | ColorScheme["lowest"]
+    | ColorScheme["middle"]
+    | ColorScheme["highest"]
     color?: keyof ColorScheme["lowest"]
     margin?: Partial<Margin>
     text_properties?: TextProperties
diff --git a/styles/src/element/interactive.test.ts b/styles/src/element/interactive.test.ts
index b0cc57875f..0e0013fc07 100644
--- a/styles/src/element/interactive.test.ts
+++ b/styles/src/element/interactive.test.ts
@@ -8,7 +8,7 @@ import { describe, it, expect } from "vitest"
 describe("interactive", () => {
     it("creates an Interactive<Element> with base properties and states", () => {
         const result = interactive({
-            base: { fontSize: 10, color: "#FFFFFF" },
+            base: { font_size: 10, color: "#FFFFFF" },
             state: {
                 hovered: { color: "#EEEEEE" },
                 clicked: { color: "#CCCCCC" },
@@ -16,25 +16,25 @@ describe("interactive", () => {
         })
 
         expect(result).toEqual({
-            default: { color: "#FFFFFF", fontSize: 10 },
-            hovered: { color: "#EEEEEE", fontSize: 10 },
-            clicked: { color: "#CCCCCC", fontSize: 10 },
+            default: { color: "#FFFFFF", font_size: 10 },
+            hovered: { color: "#EEEEEE", font_size: 10 },
+            clicked: { color: "#CCCCCC", font_size: 10 },
         })
     })
 
     it("creates an Interactive<Element> with no base properties", () => {
         const result = interactive({
             state: {
-                default: { color: "#FFFFFF", fontSize: 10 },
+                default: { color: "#FFFFFF", font_size: 10 },
                 hovered: { color: "#EEEEEE" },
                 clicked: { color: "#CCCCCC" },
             },
         })
 
         expect(result).toEqual({
-            default: { color: "#FFFFFF", fontSize: 10 },
-            hovered: { color: "#EEEEEE", fontSize: 10 },
-            clicked: { color: "#CCCCCC", fontSize: 10 },
+            default: { color: "#FFFFFF", font_size: 10 },
+            hovered: { color: "#EEEEEE", font_size: 10 },
+            clicked: { color: "#CCCCCC", font_size: 10 },
         })
     })
 
@@ -48,7 +48,7 @@ describe("interactive", () => {
 
     it("throws error when no other state besides default is present", () => {
         const state = {
-            default: { fontSize: 10 },
+            default: { font_size: 10 },
         }
 
         expect(() => interactive({ state })).toThrow(NOT_ENOUGH_STATES_ERROR)
diff --git a/styles/src/style_tree/assistant.ts b/styles/src/style_tree/assistant.ts
index fbbfbc4cf1..1f14d65c8e 100644
--- a/styles/src/style_tree/assistant.ts
+++ b/styles/src/style_tree/assistant.ts
@@ -1,23 +1,21 @@
 import { ColorScheme } from "../theme/color_scheme"
 import { text, border, background, foreground } from "./components"
-import editor from "./editor"
 import { interactive } from "../element"
 
-export default function assistant(colorScheme: ColorScheme): any {
-    const layer = colorScheme.highest
+export default function assistant(theme: ColorScheme): any {
     return {
         container: {
-            background: editor(colorScheme).background,
+            background: background(theme.highest),
             padding: { left: 12 },
         },
         message_header: {
             margin: { bottom: 6, top: 6 },
-            background: editor(colorScheme).background,
+            background: background(theme.highest),
         },
         hamburger_button: interactive({
             base: {
                 icon: {
-                    color: foreground(layer, "variant"),
+                    color: foreground(theme.highest, "variant"),
                     asset: "icons/hamburger_15.svg",
                     dimensions: {
                         width: 15,
@@ -31,7 +29,7 @@ export default function assistant(colorScheme: ColorScheme): any {
             state: {
                 hovered: {
                     icon: {
-                        color: foreground(layer, "hovered"),
+                        color: foreground(theme.highest, "hovered"),
                     },
                 },
             },
@@ -39,7 +37,7 @@ export default function assistant(colorScheme: ColorScheme): any {
         split_button: interactive({
             base: {
                 icon: {
-                    color: foreground(layer, "variant"),
+                    color: foreground(theme.highest, "variant"),
                     asset: "icons/split_message_15.svg",
                     dimensions: {
                         width: 15,
@@ -53,7 +51,7 @@ export default function assistant(colorScheme: ColorScheme): any {
             state: {
                 hovered: {
                     icon: {
-                        color: foreground(layer, "hovered"),
+                        color: foreground(theme.highest, "hovered"),
                     },
                 },
             },
@@ -61,7 +59,7 @@ export default function assistant(colorScheme: ColorScheme): any {
         quote_button: interactive({
             base: {
                 icon: {
-                    color: foreground(layer, "variant"),
+                    color: foreground(theme.highest, "variant"),
                     asset: "icons/quote_15.svg",
                     dimensions: {
                         width: 15,
@@ -75,7 +73,7 @@ export default function assistant(colorScheme: ColorScheme): any {
             state: {
                 hovered: {
                     icon: {
-                        color: foreground(layer, "hovered"),
+                        color: foreground(theme.highest, "hovered"),
                     },
                 },
             },
@@ -83,7 +81,7 @@ export default function assistant(colorScheme: ColorScheme): any {
         assist_button: interactive({
             base: {
                 icon: {
-                    color: foreground(layer, "variant"),
+                    color: foreground(theme.highest, "variant"),
                     asset: "icons/assist_15.svg",
                     dimensions: {
                         width: 15,
@@ -97,7 +95,7 @@ export default function assistant(colorScheme: ColorScheme): any {
             state: {
                 hovered: {
                     icon: {
-                        color: foreground(layer, "hovered"),
+                        color: foreground(theme.highest, "hovered"),
                     },
                 },
             },
@@ -105,7 +103,7 @@ export default function assistant(colorScheme: ColorScheme): any {
         zoom_in_button: interactive({
             base: {
                 icon: {
-                    color: foreground(layer, "variant"),
+                    color: foreground(theme.highest, "variant"),
                     asset: "icons/maximize_8.svg",
                     dimensions: {
                         width: 12,
@@ -119,7 +117,7 @@ export default function assistant(colorScheme: ColorScheme): any {
             state: {
                 hovered: {
                     icon: {
-                        color: foreground(layer, "hovered"),
+                        color: foreground(theme.highest, "hovered"),
                     },
                 },
             },
@@ -127,7 +125,7 @@ export default function assistant(colorScheme: ColorScheme): any {
         zoom_out_button: interactive({
             base: {
                 icon: {
-                    color: foreground(layer, "variant"),
+                    color: foreground(theme.highest, "variant"),
                     asset: "icons/minimize_8.svg",
                     dimensions: {
                         width: 12,
@@ -141,7 +139,7 @@ export default function assistant(colorScheme: ColorScheme): any {
             state: {
                 hovered: {
                     icon: {
-                        color: foreground(layer, "hovered"),
+                        color: foreground(theme.highest, "hovered"),
                     },
                 },
             },
@@ -149,7 +147,7 @@ export default function assistant(colorScheme: ColorScheme): any {
         plus_button: interactive({
             base: {
                 icon: {
-                    color: foreground(layer, "variant"),
+                    color: foreground(theme.highest, "variant"),
                     asset: "icons/plus_12.svg",
                     dimensions: {
                         width: 12,
@@ -163,33 +161,33 @@ export default function assistant(colorScheme: ColorScheme): any {
             state: {
                 hovered: {
                     icon: {
-                        color: foreground(layer, "hovered"),
+                        color: foreground(theme.highest, "hovered"),
                     },
                 },
             },
         }),
         title: {
-            ...text(layer, "sans", "default", { size: "sm" }),
+            ...text(theme.highest, "sans", "default", { size: "sm" }),
         },
         saved_conversation: {
             container: interactive({
                 base: {
-                    background: background(layer, "on"),
+                    background: background(theme.highest, "on"),
                     padding: { top: 4, bottom: 4 },
                 },
                 state: {
                     hovered: {
-                        background: background(layer, "on", "hovered"),
+                        background: background(theme.highest, "on", "hovered"),
                     },
                 },
             }),
             savedAt: {
                 margin: { left: 8 },
-                ...text(layer, "sans", "default", { size: "xs" }),
+                ...text(theme.highest, "sans", "default", { size: "xs" }),
             },
             title: {
                 margin: { left: 16 },
-                ...text(layer, "sans", "default", {
+                ...text(theme.highest, "sans", "default", {
                     size: "sm",
                     weight: "bold",
                 }),
@@ -197,7 +195,7 @@ export default function assistant(colorScheme: ColorScheme): any {
         },
         user_sender: {
             default: {
-                ...text(layer, "sans", "default", {
+                ...text(theme.highest, "sans", "default", {
                     size: "sm",
                     weight: "bold",
                 }),
@@ -205,7 +203,7 @@ export default function assistant(colorScheme: ColorScheme): any {
         },
         assistant_sender: {
             default: {
-                ...text(layer, "sans", "accent", {
+                ...text(theme.highest, "sans", "accent", {
                     size: "sm",
                     weight: "bold",
                 }),
@@ -213,7 +211,7 @@ export default function assistant(colorScheme: ColorScheme): any {
         },
         system_sender: {
             default: {
-                ...text(layer, "sans", "variant", {
+                ...text(theme.highest, "sans", "variant", {
                     size: "sm",
                     weight: "bold",
                 }),
@@ -221,51 +219,51 @@ export default function assistant(colorScheme: ColorScheme): any {
         },
         sent_at: {
             margin: { top: 2, left: 8 },
-            ...text(layer, "sans", "default", { size: "2xs" }),
+            ...text(theme.highest, "sans", "default", { size: "2xs" }),
         },
         model: interactive({
             base: {
-                background: background(layer, "on"),
+                background: background(theme.highest, "on"),
                 margin: { left: 12, right: 12, top: 12 },
                 padding: 4,
                 corner_radius: 4,
-                ...text(layer, "sans", "default", { size: "xs" }),
+                ...text(theme.highest, "sans", "default", { size: "xs" }),
             },
             state: {
                 hovered: {
-                    background: background(layer, "on", "hovered"),
-                    border: border(layer, "on", { overlay: true }),
+                    background: background(theme.highest, "on", "hovered"),
+                    border: border(theme.highest, "on", { overlay: true }),
                 },
             },
         }),
         remaining_tokens: {
-            background: background(layer, "on"),
+            background: background(theme.highest, "on"),
             margin: { top: 12, right: 24 },
             padding: 4,
             corner_radius: 4,
-            ...text(layer, "sans", "positive", { size: "xs" }),
+            ...text(theme.highest, "sans", "positive", { size: "xs" }),
         },
         no_remaining_tokens: {
-            background: background(layer, "on"),
+            background: background(theme.highest, "on"),
             margin: { top: 12, right: 24 },
             padding: 4,
             corner_radius: 4,
-            ...text(layer, "sans", "negative", { size: "xs" }),
+            ...text(theme.highest, "sans", "negative", { size: "xs" }),
         },
         error_icon: {
             margin: { left: 8 },
-            color: foreground(layer, "negative"),
+            color: foreground(theme.highest, "negative"),
             width: 12,
         },
         api_key_editor: {
-            background: background(layer, "on"),
+            background: background(theme.highest, "on"),
             corner_radius: 6,
-            text: text(layer, "mono", "on"),
-            placeholderText: text(layer, "mono", "on", "disabled", {
+            text: text(theme.highest, "mono", "on"),
+            placeholder_text: text(theme.highest, "mono", "on", "disabled", {
                 size: "xs",
             }),
-            selection: colorScheme.players[0],
-            border: border(layer, "on"),
+            selection: theme.players[0],
+            border: border(theme.highest, "on"),
             padding: {
                 bottom: 4,
                 left: 8,
@@ -275,7 +273,7 @@ export default function assistant(colorScheme: ColorScheme): any {
         },
         api_key_prompt: {
             padding: 10,
-            ...text(layer, "sans", "default", { size: "xs" }),
+            ...text(theme.highest, "sans", "default", { size: "xs" }),
         },
     }
 }
diff --git a/styles/src/style_tree/command_palette.ts b/styles/src/style_tree/command_palette.ts
index 9198f87299..ca9daad95b 100644
--- a/styles/src/style_tree/command_palette.ts
+++ b/styles/src/style_tree/command_palette.ts
@@ -1,16 +1,14 @@
 import { ColorScheme } from "../theme/color_scheme"
-import { withOpacity } from "../theme/color"
+import { with_opacity } from "../theme/color"
 import { text, background } from "./components"
 import { toggleable } from "../element"
 
-export default function command_palette(colorScheme: ColorScheme): any {
-    const layer = colorScheme.highest
-
+export default function command_palette(theme: ColorScheme): any {
     const key = toggleable({
         base: {
-            text: text(layer, "mono", "variant", "default", { size: "xs" }),
+            text: text(theme.highest, "mono", "variant", "default", { size: "xs" }),
             corner_radius: 2,
-            background: background(layer, "on"),
+            background: background(theme.highest, "on"),
             padding: {
                 top: 1,
                 bottom: 1,
@@ -25,8 +23,8 @@ export default function command_palette(colorScheme: ColorScheme): any {
         },
         state: {
             active: {
-                text: text(layer, "mono", "on", "default", { size: "xs" }),
-                background: withOpacity(background(layer, "on"), 0.2),
+                text: text(theme.highest, "mono", "on", "default", { size: "xs" }),
+                background: with_opacity(background(theme.highest, "on"), 0.2),
             },
         },
     })
diff --git a/styles/src/style_tree/contact_finder.ts b/styles/src/style_tree/contact_finder.ts
index f68ce06d35..9f02d450d9 100644
--- a/styles/src/style_tree/contact_finder.ts
+++ b/styles/src/style_tree/contact_finder.ts
@@ -3,12 +3,10 @@ import { ColorScheme } from "../theme/color_scheme"
 import { background, border, foreground, text } from "./components"
 
 export default function contact_finder(theme: ColorScheme): any {
-    const layer = theme.middle
-
     const side_margin = 6
     const contact_button = {
-        background: background(layer, "variant"),
-        color: foreground(layer, "variant"),
+        background: background(theme.middle, "variant"),
+        color: foreground(theme.middle, "variant"),
         icon_width: 8,
         button_width: 16,
         corner_radius: 8,
@@ -16,12 +14,12 @@ export default function contact_finder(theme: ColorScheme): any {
 
     const picker_style = picker(theme)
     const picker_input = {
-        background: background(layer, "on"),
+        background: background(theme.middle, "on"),
         corner_radius: 6,
-        text: text(layer, "mono"),
-        placeholder_text: text(layer, "mono", "on", "disabled", { size: "xs" }),
+        text: text(theme.middle, "mono"),
+        placeholder_text: text(theme.middle, "mono", "on", "disabled", { size: "xs" }),
         selection: theme.players[0],
-        border: border(layer),
+        border: border(theme.middle),
         padding: {
             bottom: 4,
             left: 8,
@@ -41,7 +39,7 @@ export default function contact_finder(theme: ColorScheme): any {
                 ...picker_style.item,
                 margin: { left: side_margin, right: side_margin },
             },
-            no_matches: picker_style.noMatches,
+            no_matches: picker_style.no_matches,
             input_editor: picker_input,
             empty_input_editor: picker_input,
         },
@@ -58,13 +56,13 @@ export default function contact_finder(theme: ColorScheme): any {
         contact_button: {
             ...contact_button,
             hover: {
-                background: background(layer, "variant", "hovered"),
+                background: background(theme.middle, "variant", "hovered"),
             },
         },
         disabled_contact_button: {
             ...contact_button,
-            background: background(layer, "disabled"),
-            color: foreground(layer, "disabled"),
+            background: background(theme.middle, "disabled"),
+            color: foreground(theme.middle, "disabled"),
         },
     }
 }
diff --git a/styles/src/style_tree/contact_list.ts b/styles/src/style_tree/contact_list.ts
index b3b89b7e42..93f88e2d4a 100644
--- a/styles/src/style_tree/contact_list.ts
+++ b/styles/src/style_tree/contact_list.ts
@@ -8,19 +8,19 @@ import {
 } from "./components"
 import { interactive, toggleable } from "../element"
 export default function contacts_panel(theme: ColorScheme): any {
-    const nameMargin = 8
-    const sidePadding = 12
+    const name_margin = 8
+    const side_padding = 12
 
     const layer = theme.middle
 
-    const contactButton = {
+    const contact_button = {
         background: background(layer, "on"),
         color: foreground(layer, "on"),
         icon_width: 8,
         button_width: 16,
         corner_radius: 8,
     }
-    const projectRow = {
+    const project_row = {
         guest_avatar_spacing: 4,
         height: 24,
         guest_avatar: {
@@ -30,19 +30,19 @@ export default function contacts_panel(theme: ColorScheme): any {
         name: {
             ...text(layer, "mono", { size: "sm" }),
             margin: {
-                left: nameMargin,
+                left: name_margin,
                 right: 6,
             },
         },
         guests: {
             margin: {
-                left: nameMargin,
-                right: nameMargin,
+                left: name_margin,
+                right: name_margin,
             },
         },
         padding: {
-            left: sidePadding,
-            right: sidePadding,
+            left: side_padding,
+            right: side_padding,
         },
     }
 
@@ -83,8 +83,8 @@ export default function contacts_panel(theme: ColorScheme): any {
                     ...text(layer, "mono", { size: "sm" }),
                     margin: { top: 14 },
                     padding: {
-                        left: sidePadding,
-                        right: sidePadding,
+                        left: side_padding,
+                        right: side_padding,
                     },
                     background: background(layer, "default"), // posiewic: breaking change
                 },
@@ -140,8 +140,8 @@ export default function contacts_panel(theme: ColorScheme): any {
             inactive: {
                 default: {
                     padding: {
-                        left: sidePadding,
-                        right: sidePadding,
+                        left: side_padding,
+                        right: side_padding,
                     },
                 },
             },
@@ -149,8 +149,8 @@ export default function contacts_panel(theme: ColorScheme): any {
                 default: {
                     background: background(layer, "active"),
                     padding: {
-                        left: sidePadding,
-                        right: sidePadding,
+                        left: side_padding,
+                        right: side_padding,
                     },
                 },
             },
@@ -174,12 +174,12 @@ export default function contacts_panel(theme: ColorScheme): any {
         contact_username: {
             ...text(layer, "mono", { size: "sm" }),
             margin: {
-                left: nameMargin,
+                left: name_margin,
             },
         },
-        contact_button_spacing: nameMargin,
+        contact_button_spacing: name_margin,
         contact_button: interactive({
-            base: { ...contactButton },
+            base: { ...contact_button },
             state: {
                 hovered: {
                     background: background(layer, "hovered"),
@@ -187,7 +187,7 @@ export default function contacts_panel(theme: ColorScheme): any {
             },
         }),
         disabled_button: {
-            ...contactButton,
+            ...contact_button,
             background: background(layer, "on"),
             color: foreground(layer, "on"),
         },
@@ -217,15 +217,15 @@ export default function contacts_panel(theme: ColorScheme): any {
         project_row: toggleable({
             base: interactive({
                 base: {
-                    ...projectRow,
+                    ...project_row,
                     background: background(layer),
                     icon: {
-                        margin: { left: nameMargin },
+                        margin: { left: name_margin },
                         color: foreground(layer, "variant"),
                         width: 12,
                     },
                     name: {
-                        ...projectRow.name,
+                        ...project_row.name,
                         ...text(layer, "mono", { size: "sm" }),
                     },
                 },
diff --git a/styles/src/style_tree/contact_notification.ts b/styles/src/style_tree/contact_notification.ts
index 71467f6584..8de5496d91 100644
--- a/styles/src/style_tree/contact_notification.ts
+++ b/styles/src/style_tree/contact_notification.ts
@@ -1,24 +1,25 @@
 import { ColorScheme } from "../theme/color_scheme"
 import { background, foreground, text } from "./components"
 import { interactive } from "../element"
-const avatarSize = 12
-const headerPadding = 8
 
 export default function contact_notification(theme: ColorScheme): any {
+    const avatar_size = 12
+    const header_padding = 8
+
     return {
         header_avatar: {
-            height: avatarSize,
-            width: avatarSize,
+            height: avatar_size,
+            width: avatar_size,
             corner_radius: 6,
         },
         header_message: {
             ...text(theme.lowest, "sans", { size: "xs" }),
-            margin: { left: headerPadding, right: headerPadding },
+            margin: { left: header_padding, right: header_padding },
         },
         header_height: 18,
         body_message: {
             ...text(theme.lowest, "sans", { size: "xs" }),
-            margin: { left: avatarSize + headerPadding, top: 6, bottom: 6 },
+            margin: { left: avatar_size + header_padding, top: 6, bottom: 6 },
         },
         button: interactive({
             base: {
@@ -40,9 +41,9 @@ export default function contact_notification(theme: ColorScheme): any {
             default: {
                 color: foreground(theme.lowest, "variant"),
                 icon_width: 8,
-                iconHeight: 8,
+                icon_height: 8,
                 button_width: 8,
-                buttonHeight: 8,
+                button_height: 8,
                 hover: {
                     color: foreground(theme.lowest, "hovered"),
                 },
diff --git a/styles/src/style_tree/editor.ts b/styles/src/style_tree/editor.ts
index 95760ce1d0..67e67e0cf0 100644
--- a/styles/src/style_tree/editor.ts
+++ b/styles/src/style_tree/editor.ts
@@ -1,4 +1,4 @@
-import { withOpacity } from "../theme/color"
+import { with_opacity } from "../theme/color"
 import { ColorScheme, Layer, StyleSets } from "../theme/color_scheme"
 import {
     background,
@@ -27,7 +27,7 @@ export default function editor(theme: ColorScheme): any {
         },
     }
 
-    function diagnostic(layer: Layer, styleSet: StyleSets) {
+    function diagnostic(layer: Layer, style_set: StyleSets) {
         return {
             text_scale_factor: 0.857,
             header: {
@@ -36,8 +36,8 @@ export default function editor(theme: ColorScheme): any {
                 }),
             },
             message: {
-                text: text(layer, "sans", styleSet, "default", { size: "sm" }),
-                highlight_text: text(layer, "sans", styleSet, "default", {
+                text: text(layer, "sans", style_set, "default", { size: "sm" }),
+                highlight_text: text(layer, "sans", style_set, "default", {
                     size: "sm",
                     weight: "bold",
                 }),
@@ -50,7 +50,7 @@ export default function editor(theme: ColorScheme): any {
     return {
         text_color: syntax.primary.color,
         background: background(layer),
-        active_line_background: withOpacity(background(layer, "on"), 0.75),
+        active_line_background: with_opacity(background(layer, "on"), 0.75),
         highlighted_line_background: background(layer, "on"),
         // Inline autocomplete suggestions, Co-pilot suggestions, etc.
         suggestion: syntax.predictive,
@@ -133,7 +133,7 @@ export default function editor(theme: ColorScheme): any {
                     },
                 },
             },
-            foldBackground: foreground(layer, "variant"),
+            fold_background: foreground(layer, "variant"),
         },
         diff: {
             deleted: is_light
@@ -145,31 +145,31 @@ export default function editor(theme: ColorScheme): any {
             inserted: is_light
                 ? theme.ramps.green(0.4).hex()
                 : theme.ramps.green(0.5).hex(),
-            removedWidthEm: 0.275,
-            widthEm: 0.15,
+            removed_width_em: 0.275,
+            width_em: 0.15,
             corner_radius: 0.05,
         },
         /** Highlights matching occurrences of what is under the cursor
          * as well as matched brackets
          */
-        documentHighlightReadBackground: withOpacity(
+        document_highlight_read_background: with_opacity(
             foreground(layer, "accent"),
             0.1
         ),
-        documentHighlightWriteBackground: theme.ramps
+        document_highlight_write_background: theme.ramps
             .neutral(0.5)
             .alpha(0.4)
             .hex(), // TODO: This was blend * 2
-        errorColor: background(layer, "negative"),
-        gutterBackground: background(layer),
-        gutterPaddingFactor: 3.5,
-        lineNumber: withOpacity(foreground(layer), 0.35),
-        lineNumberActive: foreground(layer),
-        renameFade: 0.6,
-        unnecessaryCodeFade: 0.5,
+        error_color: background(layer, "negative"),
+        gutter_background: background(layer),
+        gutter_padding_factor: 3.5,
+        line_number: with_opacity(foreground(layer), 0.35),
+        line_number_active: foreground(layer),
+        rename_fade: 0.6,
+        unnecessary_code_fade: 0.5,
         selection: theme.players[0],
         whitespace: theme.ramps.neutral(0.5).hex(),
-        guestSelections: [
+        guest_selections: [
             theme.players[1],
             theme.players[2],
             theme.players[3],
@@ -187,20 +187,20 @@ export default function editor(theme: ColorScheme): any {
             },
             border: border(theme.middle),
             shadow: theme.popover_shadow,
-            matchHighlight: foreground(theme.middle, "accent"),
+            match_highlight: foreground(theme.middle, "accent"),
             item: autocomplete_item,
-            hoveredItem: {
+            hovered_item: {
                 ...autocomplete_item,
-                matchHighlight: foreground(
+                match_highlight: foreground(
                     theme.middle,
                     "accent",
                     "hovered"
                 ),
                 background: background(theme.middle, "hovered"),
             },
-            selectedItem: {
+            selected_item: {
                 ...autocomplete_item,
-                matchHighlight: foreground(
+                match_highlight: foreground(
                     theme.middle,
                     "accent",
                     "active"
@@ -208,10 +208,10 @@ export default function editor(theme: ColorScheme): any {
                 background: background(theme.middle, "active"),
             },
         },
-        diagnosticHeader: {
+        diagnostic_header: {
             background: background(theme.middle),
-            icon_widthFactor: 1.5,
-            textScaleFactor: 0.857,
+            icon_width_factor: 1.5,
+            text_scale_factor: 0.857,
             border: border(theme.middle, {
                 bottom: true,
                 top: true,
@@ -229,16 +229,16 @@ export default function editor(theme: ColorScheme): any {
                 }),
             },
             message: {
-                highlightText: text(theme.middle, "sans", {
+                highlight_text: text(theme.middle, "sans", {
                     size: "sm",
                     weight: "bold",
                 }),
                 text: text(theme.middle, "sans", { size: "sm" }),
             },
         },
-        diagnosticPathHeader: {
+        diagnostic_path_header: {
             background: background(theme.middle),
-            textScaleFactor: 0.857,
+            text_scale_factor: 0.857,
             filename: text(theme.middle, "mono", { size: "sm" }),
             path: {
                 ...text(theme.middle, "mono", { size: "sm" }),
@@ -247,20 +247,20 @@ export default function editor(theme: ColorScheme): any {
                 },
             },
         },
-        errorDiagnostic: diagnostic(theme.middle, "negative"),
-        warningDiagnostic: diagnostic(theme.middle, "warning"),
-        informationDiagnostic: diagnostic(theme.middle, "accent"),
-        hintDiagnostic: diagnostic(theme.middle, "warning"),
-        invalidErrorDiagnostic: diagnostic(theme.middle, "base"),
-        invalidHintDiagnostic: diagnostic(theme.middle, "base"),
-        invalidInformationDiagnostic: diagnostic(theme.middle, "base"),
-        invalidWarningDiagnostic: diagnostic(theme.middle, "base"),
+        error_diagnostic: diagnostic(theme.middle, "negative"),
+        warning_diagnostic: diagnostic(theme.middle, "warning"),
+        information_diagnostic: diagnostic(theme.middle, "accent"),
+        hint_diagnostic: diagnostic(theme.middle, "warning"),
+        invalid_error_diagnostic: diagnostic(theme.middle, "base"),
+        invalid_hint_diagnostic: diagnostic(theme.middle, "base"),
+        invalid_information_diagnostic: diagnostic(theme.middle, "base"),
+        invalid_warning_diagnostic: diagnostic(theme.middle, "base"),
         hover_popover: hover_popover(theme),
-        linkDefinition: {
+        link_definition: {
             color: syntax.link_uri.color,
             underline: syntax.link_uri.underline,
         },
-        jumpIcon: interactive({
+        jump_icon: interactive({
             base: {
                 color: foreground(layer, "on"),
                 icon_width: 20,
@@ -282,12 +282,12 @@ export default function editor(theme: ColorScheme): any {
 
         scrollbar: {
             width: 12,
-            minHeightFactor: 1.0,
+            min_height_factor: 1.0,
             track: {
                 border: border(layer, "variant", { left: true }),
             },
             thumb: {
-                background: withOpacity(background(layer, "inverted"), 0.3),
+                background: with_opacity(background(layer, "inverted"), 0.3),
                 border: {
                     width: 1,
                     color: border_color(layer, "variant"),
@@ -299,17 +299,17 @@ export default function editor(theme: ColorScheme): any {
             },
             git: {
                 deleted: is_light
-                    ? withOpacity(theme.ramps.red(0.5).hex(), 0.8)
-                    : withOpacity(theme.ramps.red(0.4).hex(), 0.8),
+                    ? with_opacity(theme.ramps.red(0.5).hex(), 0.8)
+                    : with_opacity(theme.ramps.red(0.4).hex(), 0.8),
                 modified: is_light
-                    ? withOpacity(theme.ramps.yellow(0.5).hex(), 0.8)
-                    : withOpacity(theme.ramps.yellow(0.4).hex(), 0.8),
+                    ? with_opacity(theme.ramps.yellow(0.5).hex(), 0.8)
+                    : with_opacity(theme.ramps.yellow(0.4).hex(), 0.8),
                 inserted: is_light
-                    ? withOpacity(theme.ramps.green(0.5).hex(), 0.8)
-                    : withOpacity(theme.ramps.green(0.4).hex(), 0.8),
+                    ? with_opacity(theme.ramps.green(0.5).hex(), 0.8)
+                    : with_opacity(theme.ramps.green(0.4).hex(), 0.8),
             },
         },
-        compositionMark: {
+        composition_mark: {
             underline: {
                 thickness: 1.0,
                 color: border_color(layer),
diff --git a/styles/src/style_tree/feedback.ts b/styles/src/style_tree/feedback.ts
index 040c8994be..ab3a40c148 100644
--- a/styles/src/style_tree/feedback.ts
+++ b/styles/src/style_tree/feedback.ts
@@ -2,16 +2,14 @@ import { ColorScheme } from "../theme/color_scheme"
 import { background, border, text } from "./components"
 import { interactive } from "../element"
 
-export default function feedback(colorScheme: ColorScheme): any {
-    const layer = colorScheme.highest
-
+export default function feedback(theme: ColorScheme): any {
     return {
         submit_button: interactive({
             base: {
-                ...text(layer, "mono", "on"),
-                background: background(layer, "on"),
+                ...text(theme.highest, "mono", "on"),
+                background: background(theme.highest, "on"),
                 corner_radius: 6,
-                border: border(layer, "on"),
+                border: border(theme.highest, "on"),
                 margin: {
                     right: 4,
                 },
@@ -24,24 +22,24 @@ export default function feedback(colorScheme: ColorScheme): any {
             },
             state: {
                 clicked: {
-                    ...text(layer, "mono", "on", "pressed"),
-                    background: background(layer, "on", "pressed"),
-                    border: border(layer, "on", "pressed"),
+                    ...text(theme.highest, "mono", "on", "pressed"),
+                    background: background(theme.highest, "on", "pressed"),
+                    border: border(theme.highest, "on", "pressed"),
                 },
                 hovered: {
-                    ...text(layer, "mono", "on", "hovered"),
-                    background: background(layer, "on", "hovered"),
-                    border: border(layer, "on", "hovered"),
+                    ...text(theme.highest, "mono", "on", "hovered"),
+                    background: background(theme.highest, "on", "hovered"),
+                    border: border(theme.highest, "on", "hovered"),
                 },
             },
         }),
         button_margin: 8,
-        info_text_default: text(layer, "sans", "default", { size: "xs" }),
-        link_text_default: text(layer, "sans", "default", {
+        info_text_default: text(theme.highest, "sans", "default", { size: "xs" }),
+        link_text_default: text(theme.highest, "sans", "default", {
             size: "xs",
             underline: true,
         }),
-        link_text_hover: text(layer, "sans", "hovered", {
+        link_text_hover: text(theme.highest, "sans", "hovered", {
             size: "xs",
             underline: true,
         }),
diff --git a/styles/src/style_tree/hover_popover.ts b/styles/src/style_tree/hover_popover.ts
index 28f5b17400..e9a008b3c6 100644
--- a/styles/src/style_tree/hover_popover.ts
+++ b/styles/src/style_tree/hover_popover.ts
@@ -1,10 +1,9 @@
 import { ColorScheme } from "../theme/color_scheme"
 import { background, border, foreground, text } from "./components"
 
-export default function hover_popover(colorScheme: ColorScheme): any {
-    const layer = colorScheme.middle
-    const baseContainer = {
-        background: background(layer),
+export default function hover_popover(theme: ColorScheme): any {
+    const base_container = {
+        background: background(theme.middle),
         corner_radius: 8,
         padding: {
             left: 8,
@@ -12,35 +11,35 @@ export default function hover_popover(colorScheme: ColorScheme): any {
             top: 4,
             bottom: 4,
         },
-        shadow: colorScheme.popover_shadow,
-        border: border(layer),
+        shadow: theme.popover_shadow,
+        border: border(theme.middle),
         margin: {
             left: -8,
         },
     }
 
     return {
-        container: baseContainer,
-        infoContainer: {
-            ...baseContainer,
-            background: background(layer, "accent"),
-            border: border(layer, "accent"),
+        container: base_container,
+        info_container: {
+            ...base_container,
+            background: background(theme.middle, "accent"),
+            border: border(theme.middle, "accent"),
         },
-        warningContainer: {
-            ...baseContainer,
-            background: background(layer, "warning"),
-            border: border(layer, "warning"),
+        warning_container: {
+            ...base_container,
+            background: background(theme.middle, "warning"),
+            border: border(theme.middle, "warning"),
         },
-        errorContainer: {
-            ...baseContainer,
-            background: background(layer, "negative"),
-            border: border(layer, "negative"),
+        error_container: {
+            ...base_container,
+            background: background(theme.middle, "negative"),
+            border: border(theme.middle, "negative"),
         },
-        blockStyle: {
+        block_style: {
             padding: { top: 4 },
         },
-        prose: text(layer, "sans", { size: "sm" }),
-        diagnosticSourceHighlight: { color: foreground(layer, "accent") },
-        highlight: colorScheme.ramps.neutral(0.5).alpha(0.2).hex(), // TODO: blend was used here. Replace with something better
+        prose: text(theme.middle, "sans", { size: "sm" }),
+        diagnostic_source_highlight: { color: foreground(theme.middle, "accent") },
+        highlight: theme.ramps.neutral(0.5).alpha(0.2).hex(), // TODO: blend was used here. Replace with something better
     }
 }
diff --git a/styles/src/style_tree/incoming_call_notification.ts b/styles/src/style_tree/incoming_call_notification.ts
index 2c4fa21867..91947b9da5 100644
--- a/styles/src/style_tree/incoming_call_notification.ts
+++ b/styles/src/style_tree/incoming_call_notification.ts
@@ -2,49 +2,48 @@ import { ColorScheme } from "../theme/color_scheme"
 import { background, border, text } from "./components"
 
 export default function incoming_call_notification(
-    colorScheme: ColorScheme
+    theme: ColorScheme
 ): unknown {
-    const layer = colorScheme.middle
-    const avatarSize = 48
+    const avatar_size = 48
     return {
-        windowHeight: 74,
-        windowWidth: 380,
-        background: background(layer),
-        callerContainer: {
+        window_height: 74,
+        window_width: 380,
+        background: background(theme.middle),
+        caller_container: {
             padding: 12,
         },
-        callerAvatar: {
-            height: avatarSize,
-            width: avatarSize,
-            corner_radius: avatarSize / 2,
+        caller_avatar: {
+            height: avatar_size,
+            width: avatar_size,
+            corner_radius: avatar_size / 2,
         },
-        callerMetadata: {
+        caller_metadata: {
             margin: { left: 10 },
         },
-        callerUsername: {
-            ...text(layer, "sans", { size: "sm", weight: "bold" }),
+        caller_username: {
+            ...text(theme.middle, "sans", { size: "sm", weight: "bold" }),
             margin: { top: -3 },
         },
-        callerMessage: {
-            ...text(layer, "sans", "variant", { size: "xs" }),
+        caller_message: {
+            ...text(theme.middle, "sans", "variant", { size: "xs" }),
             margin: { top: -3 },
         },
-        worktreeRoots: {
-            ...text(layer, "sans", "variant", { size: "xs", weight: "bold" }),
+        worktree_roots: {
+            ...text(theme.middle, "sans", "variant", { size: "xs", weight: "bold" }),
             margin: { top: -3 },
         },
         button_width: 96,
-        acceptButton: {
-            background: background(layer, "accent"),
-            border: border(layer, { left: true, bottom: true }),
-            ...text(layer, "sans", "positive", {
+        accept_button: {
+            background: background(theme.middle, "accent"),
+            border: border(theme.middle, { left: true, bottom: true }),
+            ...text(theme.middle, "sans", "positive", {
                 size: "xs",
                 weight: "bold",
             }),
         },
-        declineButton: {
-            border: border(layer, { left: true }),
-            ...text(layer, "sans", "negative", {
+        decline_button: {
+            border: border(theme.middle, { left: true }),
+            ...text(theme.middle, "sans", "negative", {
                 size: "xs",
                 weight: "bold",
             }),
diff --git a/styles/src/style_tree/picker.ts b/styles/src/style_tree/picker.ts
index 22b526f183..7ca76cd85f 100644
--- a/styles/src/style_tree/picker.ts
+++ b/styles/src/style_tree/picker.ts
@@ -1,24 +1,23 @@
 import { ColorScheme } from "../theme/color_scheme"
-import { withOpacity } from "../theme/color"
+import { with_opacity } from "../theme/color"
 import { background, border, text } from "./components"
 import { interactive, toggleable } from "../element"
 
-export default function picker(colorScheme: ColorScheme): any {
-    const layer = colorScheme.lowest
+export default function picker(theme: ColorScheme): any {
     const container = {
-        background: background(layer),
-        border: border(layer),
-        shadow: colorScheme.modal_shadow,
+        background: background(theme.lowest),
+        border: border(theme.lowest),
+        shadow: theme.modal_shadow,
         corner_radius: 12,
         padding: {
             bottom: 4,
         },
     }
-    const inputEditor = {
-        placeholderText: text(layer, "sans", "on", "disabled"),
-        selection: colorScheme.players[0],
-        text: text(layer, "mono", "on"),
-        border: border(layer, { bottom: true }),
+    const input_editor = {
+        placeholder_text: text(theme.lowest, "sans", "on", "disabled"),
+        selection: theme.players[0],
+        text: text(theme.lowest, "mono", "on"),
+        border: border(theme.lowest, { bottom: true }),
         padding: {
             bottom: 8,
             left: 16,
@@ -29,13 +28,13 @@ export default function picker(colorScheme: ColorScheme): any {
             bottom: 4,
         },
     }
-    const emptyInputEditor: any = { ...inputEditor }
-    delete emptyInputEditor.border
-    delete emptyInputEditor.margin
+    const empty_input_editor: any = { ...input_editor }
+    delete empty_input_editor.border
+    delete empty_input_editor.margin
 
     return {
         ...container,
-        emptyContainer: {
+        empty_container: {
             ...container,
             padding: {},
         },
@@ -54,21 +53,21 @@ export default function picker(colorScheme: ColorScheme): any {
                         right: 4,
                     },
                     corner_radius: 8,
-                    text: text(layer, "sans", "variant"),
-                    highlightText: text(layer, "sans", "accent", {
+                    text: text(theme.lowest, "sans", "variant"),
+                    highlight_text: text(theme.lowest, "sans", "accent", {
                         weight: "bold",
                     }),
                 },
                 state: {
                     hovered: {
-                        background: withOpacity(
-                            background(layer, "hovered"),
+                        background: with_opacity(
+                            background(theme.lowest, "hovered"),
                             0.5
                         ),
                     },
                     clicked: {
-                        background: withOpacity(
-                            background(layer, "pressed"),
+                        background: with_opacity(
+                            background(theme.lowest, "pressed"),
                             0.5
                         ),
                     },
@@ -77,20 +76,20 @@ export default function picker(colorScheme: ColorScheme): any {
             state: {
                 active: {
                     default: {
-                        background: withOpacity(
-                            background(layer, "base", "active"),
+                        background: with_opacity(
+                            background(theme.lowest, "base", "active"),
                             0.5
                         ),
                     },
                     hovered: {
-                        background: withOpacity(
-                            background(layer, "hovered"),
+                        background: with_opacity(
+                            background(theme.lowest, "hovered"),
                             0.5
                         ),
                     },
                     clicked: {
-                        background: withOpacity(
-                            background(layer, "pressed"),
+                        background: with_opacity(
+                            background(theme.lowest, "pressed"),
                             0.5
                         ),
                     },
@@ -98,10 +97,10 @@ export default function picker(colorScheme: ColorScheme): any {
             },
         }),
 
-        inputEditor,
-        emptyInputEditor,
-        noMatches: {
-            text: text(layer, "sans", "variant"),
+        input_editor,
+        empty_input_editor,
+        no_matches: {
+            text: text(theme.lowest, "sans", "variant"),
             padding: {
                 bottom: 8,
                 left: 16,
diff --git a/styles/src/style_tree/project_diagnostics.ts b/styles/src/style_tree/project_diagnostics.ts
index 10f556d121..5962b98a26 100644
--- a/styles/src/style_tree/project_diagnostics.ts
+++ b/styles/src/style_tree/project_diagnostics.ts
@@ -1,13 +1,12 @@
 import { ColorScheme } from "../theme/color_scheme"
 import { background, text } from "./components"
 
-export default function project_diagnostics(colorScheme: ColorScheme): any {
-    const layer = colorScheme.highest
+export default function project_diagnostics(theme: ColorScheme): any {
     return {
-        background: background(layer),
-        tabIconSpacing: 4,
+        background: background(theme.highest),
+        tab_icon_spacing: 4,
         tab_icon_width: 13,
-        tabSummarySpacing: 10,
-        emptyMessage: text(layer, "sans", "variant", { size: "md" }),
+        tab_summary_spacing: 10,
+        empty_message: text(theme.highest, "sans", "variant", { size: "md" }),
     }
 }
diff --git a/styles/src/style_tree/project_panel.ts b/styles/src/style_tree/project_panel.ts
index 589e120e38..346ffb7641 100644
--- a/styles/src/style_tree/project_panel.ts
+++ b/styles/src/style_tree/project_panel.ts
@@ -1,5 +1,5 @@
 import { ColorScheme } from "../theme/color_scheme"
-import { withOpacity } from "../theme/color"
+import { with_opacity } from "../theme/color"
 import {
     Border,
     TextStyle,
@@ -13,13 +13,11 @@ import merge from "ts-deepmerge"
 export default function project_panel(theme: ColorScheme): any {
     const { is_light } = theme
 
-    const layer = theme.middle
-
     type EntryStateProps = {
         background?: string
         border?: Border
         text?: TextStyle
-        iconColor?: string
+        icon_color?: string
     }
 
     type EntryState = {
@@ -45,17 +43,17 @@ export default function project_panel(theme: ColorScheme): any {
 
         const base_properties = {
             height: 22,
-            background: background(layer),
-            iconColor: foreground(layer, "variant"),
-            iconSize: 7,
+            background: background(theme.middle),
+            icon_color: foreground(theme.middle, "variant"),
+            icon_size: 7,
             icon_spacing: 5,
-            text: text(layer, "mono", "variant", { size: "sm" }),
+            text: text(theme.middle, "mono", "variant", { size: "sm" }),
             status: {
                 ...git_status,
             },
         }
 
-        const selectedStyle: EntryState | undefined = selected
+        const selected_style: EntryState | undefined = selected
             ? selected
             : unselected
 
@@ -67,27 +65,27 @@ export default function project_panel(theme: ColorScheme): any {
         const unselected_hovered_style = merge(
             base_properties,
             unselected?.hovered ?? {},
-            { background: background(layer, "variant", "hovered") }
+            { background: background(theme.middle, "variant", "hovered") }
         )
         const unselected_clicked_style = merge(
             base_properties,
             unselected?.clicked ?? {},
-            { background: background(layer, "variant", "pressed") }
+            { background: background(theme.middle, "variant", "pressed") }
         )
         const selected_default_style = merge(
             base_properties,
-            selectedStyle?.default ?? {},
-            { background: background(layer) }
+            selected_style?.default ?? {},
+            { background: background(theme.middle) }
         )
         const selected_hovered_style = merge(
             base_properties,
-            selectedStyle?.hovered ?? {},
-            { background: background(layer, "variant", "hovered") }
+            selected_style?.hovered ?? {},
+            { background: background(theme.middle, "variant", "hovered") }
         )
         const selected_clicked_style = merge(
             base_properties,
-            selectedStyle?.clicked ?? {},
-            { background: background(layer, "variant", "pressed") }
+            selected_style?.clicked ?? {},
+            { background: background(theme.middle, "variant", "pressed") }
         )
 
         return toggleable({
@@ -110,13 +108,13 @@ export default function project_panel(theme: ColorScheme): any {
         })
     }
 
-    const defaultEntry = entry()
+    const default_entry = entry()
 
     return {
-        openProjectButton: interactive({
+        open_project_button: interactive({
             base: {
-                background: background(layer),
-                border: border(layer, "active"),
+                background: background(theme.middle),
+                border: border(theme.middle, "active"),
                 corner_radius: 4,
                 margin: {
                     top: 16,
@@ -129,59 +127,59 @@ export default function project_panel(theme: ColorScheme): any {
                     left: 7,
                     right: 7,
                 },
-                ...text(layer, "sans", "default", { size: "sm" }),
+                ...text(theme.middle, "sans", "default", { size: "sm" }),
             },
             state: {
                 hovered: {
-                    ...text(layer, "sans", "default", { size: "sm" }),
-                    background: background(layer, "hovered"),
-                    border: border(layer, "active"),
+                    ...text(theme.middle, "sans", "default", { size: "sm" }),
+                    background: background(theme.middle, "hovered"),
+                    border: border(theme.middle, "active"),
                 },
                 clicked: {
-                    ...text(layer, "sans", "default", { size: "sm" }),
-                    background: background(layer, "pressed"),
-                    border: border(layer, "active"),
+                    ...text(theme.middle, "sans", "default", { size: "sm" }),
+                    background: background(theme.middle, "pressed"),
+                    border: border(theme.middle, "active"),
                 },
             },
         }),
-        background: background(layer),
+        background: background(theme.middle),
         padding: { left: 6, right: 6, top: 0, bottom: 6 },
-        indentWidth: 12,
-        entry: defaultEntry,
-        draggedEntry: {
-            ...defaultEntry.inactive.default,
-            text: text(layer, "mono", "on", { size: "sm" }),
-            background: withOpacity(background(layer, "on"), 0.9),
-            border: border(layer),
+        indent_width: 12,
+        entry: default_entry,
+        dragged_entry: {
+            ...default_entry.inactive.default,
+            text: text(theme.middle, "mono", "on", { size: "sm" }),
+            background: with_opacity(background(theme.middle, "on"), 0.9),
+            border: border(theme.middle),
         },
-        ignoredEntry: entry(
+        ignored_entry: entry(
             {
                 default: {
-                    text: text(layer, "mono", "disabled"),
+                    text: text(theme.middle, "mono", "disabled"),
                 },
             },
             {
                 default: {
-                    iconColor: foreground(layer, "variant"),
+                    icon_color: foreground(theme.middle, "variant"),
                 },
             }
         ),
-        cutEntry: entry(
+        cut_entry: entry(
             {
                 default: {
-                    text: text(layer, "mono", "disabled"),
+                    text: text(theme.middle, "mono", "disabled"),
                 },
             },
             {
                 default: {
-                    background: background(layer, "active"),
-                    text: text(layer, "mono", "disabled", { size: "sm" }),
+                    background: background(theme.middle, "active"),
+                    text: text(theme.middle, "mono", "disabled", { size: "sm" }),
                 },
             }
         ),
-        filenameEditor: {
-            background: background(layer, "on"),
-            text: text(layer, "mono", "on", { size: "sm" }),
+        filename_editor: {
+            background: background(theme.middle, "on"),
+            text: text(theme.middle, "mono", "on", { size: "sm" }),
             selection: theme.players[0],
         },
     }
diff --git a/styles/src/style_tree/project_shared_notification.ts b/styles/src/style_tree/project_shared_notification.ts
index 6fe8170a3c..d93c1d65d5 100644
--- a/styles/src/style_tree/project_shared_notification.ts
+++ b/styles/src/style_tree/project_shared_notification.ts
@@ -2,50 +2,48 @@ import { ColorScheme } from "../theme/color_scheme"
 import { background, border, text } from "./components"
 
 export default function project_shared_notification(
-    colorScheme: ColorScheme
+    theme: ColorScheme
 ): unknown {
-    const layer = colorScheme.middle
-
-    const avatarSize = 48
+    const avatar_size = 48
     return {
-        windowHeight: 74,
-        windowWidth: 380,
-        background: background(layer),
-        ownerContainer: {
+        window_height: 74,
+        window_width: 380,
+        background: background(theme.middle),
+        owner_container: {
             padding: 12,
         },
-        ownerAvatar: {
-            height: avatarSize,
-            width: avatarSize,
-            corner_radius: avatarSize / 2,
+        owner_avatar: {
+            height: avatar_size,
+            width: avatar_size,
+            corner_radius: avatar_size / 2,
         },
-        ownerMetadata: {
+        owner_metadata: {
             margin: { left: 10 },
         },
-        ownerUsername: {
-            ...text(layer, "sans", { size: "sm", weight: "bold" }),
+        owner_username: {
+            ...text(theme.middle, "sans", { size: "sm", weight: "bold" }),
             margin: { top: -3 },
         },
         message: {
-            ...text(layer, "sans", "variant", { size: "xs" }),
+            ...text(theme.middle, "sans", "variant", { size: "xs" }),
             margin: { top: -3 },
         },
-        worktreeRoots: {
-            ...text(layer, "sans", "variant", { size: "xs", weight: "bold" }),
+        worktree_roots: {
+            ...text(theme.middle, "sans", "variant", { size: "xs", weight: "bold" }),
             margin: { top: -3 },
         },
         button_width: 96,
-        openButton: {
-            background: background(layer, "accent"),
-            border: border(layer, { left: true, bottom: true }),
-            ...text(layer, "sans", "accent", {
+        open_button: {
+            background: background(theme.middle, "accent"),
+            border: border(theme.middle, { left: true, bottom: true }),
+            ...text(theme.middle, "sans", "accent", {
                 size: "xs",
                 weight: "bold",
             }),
         },
-        dismissButton: {
-            border: border(layer, { left: true }),
-            ...text(layer, "sans", "variant", {
+        dismiss_button: {
+            border: border(theme.middle, { left: true }),
+            ...text(theme.middle, "sans", "variant", {
                 size: "xs",
                 weight: "bold",
             }),
diff --git a/styles/src/style_tree/search.ts b/styles/src/style_tree/search.ts
index 37040613b3..da515114e7 100644
--- a/styles/src/style_tree/search.ts
+++ b/styles/src/style_tree/search.ts
@@ -1,21 +1,19 @@
 import { ColorScheme } from "../theme/color_scheme"
-import { withOpacity } from "../theme/color"
+import { with_opacity } from "../theme/color"
 import { background, border, foreground, text } from "./components"
 import { interactive, toggleable } from "../element"
 
-export default function search(colorScheme: ColorScheme): any {
-    const layer = colorScheme.highest
-
+export default function search(theme: ColorScheme): any {
     // Search input
     const editor = {
-        background: background(layer),
+        background: background(theme.highest),
         corner_radius: 8,
-        minWidth: 200,
-        maxWidth: 500,
-        placeholderText: text(layer, "mono", "disabled"),
-        selection: colorScheme.players[0],
-        text: text(layer, "mono", "default"),
-        border: border(layer),
+        min_width: 200,
+        max_width: 500,
+        placeholder_text: text(theme.highest, "mono", "disabled"),
+        selection: theme.players[0],
+        text: text(theme.highest, "mono", "default"),
+        border: border(theme.highest),
         margin: {
             right: 12,
         },
@@ -27,22 +25,22 @@ export default function search(colorScheme: ColorScheme): any {
         },
     }
 
-    const includeExcludeEditor = {
+    const include_exclude_editor = {
         ...editor,
-        minWidth: 100,
-        maxWidth: 250,
+        min_width: 100,
+        max_width: 250,
     }
 
     return {
         // TODO: Add an activeMatchBackground on the rust side to differentiate between active and inactive
-        matchBackground: withOpacity(foreground(layer, "accent"), 0.4),
-        optionButton: toggleable({
+        match_background: with_opacity(foreground(theme.highest, "accent"), 0.4),
+        option_button: toggleable({
             base: interactive({
                 base: {
-                    ...text(layer, "mono", "on"),
-                    background: background(layer, "on"),
+                    ...text(theme.highest, "mono", "on"),
+                    background: background(theme.highest, "on"),
                     corner_radius: 6,
-                    border: border(layer, "on"),
+                    border: border(theme.highest, "on"),
                     margin: {
                         right: 4,
                     },
@@ -55,66 +53,66 @@ export default function search(colorScheme: ColorScheme): any {
                 },
                 state: {
                     hovered: {
-                        ...text(layer, "mono", "on", "hovered"),
-                        background: background(layer, "on", "hovered"),
-                        border: border(layer, "on", "hovered"),
+                        ...text(theme.highest, "mono", "on", "hovered"),
+                        background: background(theme.highest, "on", "hovered"),
+                        border: border(theme.highest, "on", "hovered"),
                     },
                     clicked: {
-                        ...text(layer, "mono", "on", "pressed"),
-                        background: background(layer, "on", "pressed"),
-                        border: border(layer, "on", "pressed"),
+                        ...text(theme.highest, "mono", "on", "pressed"),
+                        background: background(theme.highest, "on", "pressed"),
+                        border: border(theme.highest, "on", "pressed"),
                     },
                 },
             }),
             state: {
                 active: {
                     default: {
-                        ...text(layer, "mono", "accent"),
+                        ...text(theme.highest, "mono", "accent"),
                     },
                     hovered: {
-                        ...text(layer, "mono", "accent", "hovered"),
+                        ...text(theme.highest, "mono", "accent", "hovered"),
                     },
                     clicked: {
-                        ...text(layer, "mono", "accent", "pressed"),
+                        ...text(theme.highest, "mono", "accent", "pressed"),
                     },
                 },
             },
         }),
         editor,
-        invalidEditor: {
+        invalid_editor: {
             ...editor,
-            border: border(layer, "negative"),
+            border: border(theme.highest, "negative"),
         },
-        includeExcludeEditor,
-        invalidIncludeExcludeEditor: {
-            ...includeExcludeEditor,
-            border: border(layer, "negative"),
+        include_exclude_editor,
+        invalid_include_exclude_editor: {
+            ...include_exclude_editor,
+            border: border(theme.highest, "negative"),
         },
-        matchIndex: {
-            ...text(layer, "mono", "variant"),
+        match_index: {
+            ...text(theme.highest, "mono", "variant"),
             padding: {
                 left: 6,
             },
         },
-        optionButtonGroup: {
+        option_button_group: {
             padding: {
                 left: 12,
                 right: 12,
             },
         },
-        includeExcludeInputs: {
-            ...text(layer, "mono", "variant"),
+        include_exclude_inputs: {
+            ...text(theme.highest, "mono", "variant"),
             padding: {
                 right: 6,
             },
         },
-        resultsStatus: {
-            ...text(layer, "mono", "on"),
+        results_status: {
+            ...text(theme.highest, "mono", "on"),
             size: 18,
         },
-        dismissButton: interactive({
+        dismiss_button: interactive({
             base: {
-                color: foreground(layer, "variant"),
+                color: foreground(theme.highest, "variant"),
                 icon_width: 12,
                 button_width: 14,
                 padding: {
@@ -124,10 +122,10 @@ export default function search(colorScheme: ColorScheme): any {
             },
             state: {
                 hovered: {
-                    color: foreground(layer, "hovered"),
+                    color: foreground(theme.highest, "hovered"),
                 },
                 clicked: {
-                    color: foreground(layer, "pressed"),
+                    color: foreground(theme.highest, "pressed"),
                 },
             },
         }),
diff --git a/styles/src/style_tree/shared_screen.ts b/styles/src/style_tree/shared_screen.ts
index bc4ac0b5d7..b57c483f1c 100644
--- a/styles/src/style_tree/shared_screen.ts
+++ b/styles/src/style_tree/shared_screen.ts
@@ -1,9 +1,8 @@
 import { ColorScheme } from "../theme/color_scheme"
 import { background } from "./components"
 
-export default function sharedScreen(colorScheme: ColorScheme) {
-    const layer = colorScheme.highest
+export default function sharedScreen(theme: ColorScheme) {
     return {
-        background: background(layer),
+        background: background(theme.highest),
     }
 }
diff --git a/styles/src/style_tree/simple_message_notification.ts b/styles/src/style_tree/simple_message_notification.ts
index 621bf21232..896f90a51b 100644
--- a/styles/src/style_tree/simple_message_notification.ts
+++ b/styles/src/style_tree/simple_message_notification.ts
@@ -2,21 +2,20 @@ import { ColorScheme } from "../theme/color_scheme"
 import { background, border, foreground, text } from "./components"
 import { interactive } from "../element"
 
-const headerPadding = 8
-
 export default function simple_message_notification(
-    colorScheme: ColorScheme
-): unknown {
-    const layer = colorScheme.middle
+    theme: ColorScheme
+): any {
+    const header_padding = 8
+
     return {
         message: {
-            ...text(layer, "sans", { size: "xs" }),
-            margin: { left: headerPadding, right: headerPadding },
+            ...text(theme.middle, "sans", { size: "xs" }),
+            margin: { left: header_padding, right: header_padding },
         },
-        actionMessage: interactive({
+        action_nessage: interactive({
             base: {
-                ...text(layer, "sans", { size: "xs" }),
-                border: border(layer, "active"),
+                ...text(theme.middle, "sans", { size: "xs" }),
+                border: border(theme.middle, "active"),
                 corner_radius: 4,
                 padding: {
                     top: 3,
@@ -25,27 +24,27 @@ export default function simple_message_notification(
                     right: 7,
                 },
 
-                margin: { left: headerPadding, top: 6, bottom: 6 },
+                margin: { left: header_padding, top: 6, bottom: 6 },
             },
             state: {
                 hovered: {
-                    ...text(layer, "sans", "default", { size: "xs" }),
-                    background: background(layer, "hovered"),
-                    border: border(layer, "active"),
+                    ...text(theme.middle, "sans", "default", { size: "xs" }),
+                    background: background(theme.middle, "hovered"),
+                    border: border(theme.middle, "active"),
                 },
             },
         }),
-        dismissButton: interactive({
+        dismiss_button: interactive({
             base: {
-                color: foreground(layer),
+                color: foreground(theme.middle),
                 icon_width: 8,
-                iconHeight: 8,
+                icon_height: 8,
                 button_width: 8,
-                buttonHeight: 8,
+                button_height: 8,
             },
             state: {
                 hovered: {
-                    color: foreground(layer, "hovered"),
+                    color: foreground(theme.middle, "hovered"),
                 },
             },
         }),
diff --git a/styles/src/style_tree/status_bar.ts b/styles/src/style_tree/status_bar.ts
index d67634d5a8..652c8bf05c 100644
--- a/styles/src/style_tree/status_bar.ts
+++ b/styles/src/style_tree/status_bar.ts
@@ -1,22 +1,22 @@
 import { ColorScheme } from "../theme/color_scheme"
 import { background, border, foreground, text } from "./components"
 import { interactive, toggleable } from "../element"
-export default function status_bar(colorScheme: ColorScheme): any {
-    const layer = colorScheme.lowest
+export default function status_bar(theme: ColorScheme): any {
+    const layer = theme.lowest
 
-    const statusContainer = {
+    const status_container = {
         corner_radius: 6,
         padding: { top: 3, bottom: 3, left: 6, right: 6 },
     }
 
-    const diagnosticStatusContainer = {
+    const diagnostic_status_container = {
         corner_radius: 6,
         padding: { top: 1, bottom: 1, left: 6, right: 6 },
     }
 
     return {
         height: 30,
-        itemSpacing: 8,
+        item_spacing: 8,
         padding: {
             top: 1,
             bottom: 1,
@@ -24,8 +24,8 @@ export default function status_bar(colorScheme: ColorScheme): any {
             right: 6,
         },
         border: border(layer, { top: true, overlay: true }),
-        cursorPosition: text(layer, "sans", "variant"),
-        activeLanguage: interactive({
+        cursor_position: text(layer, "sans", "variant"),
+        active_language: interactive({
             base: {
                 padding: { left: 6, right: 6 },
                 ...text(layer, "sans", "variant"),
@@ -36,83 +36,83 @@ export default function status_bar(colorScheme: ColorScheme): any {
                 },
             },
         }),
-        autoUpdateProgressMessage: text(layer, "sans", "variant"),
-        autoUpdateDoneMessage: text(layer, "sans", "variant"),
-        lspStatus: interactive({
+        auto_updat_progress_message: text(layer, "sans", "variant"),
+        auto_update_done_message: text(layer, "sans", "variant"),
+        lsp_status: interactive({
             base: {
-                ...diagnosticStatusContainer,
+                ...diagnostic_status_container,
                 icon_spacing: 4,
                 icon_width: 14,
                 height: 18,
                 message: text(layer, "sans"),
-                iconColor: foreground(layer),
+                icon_color: foreground(layer),
             },
             state: {
                 hovered: {
                     message: text(layer, "sans"),
-                    iconColor: foreground(layer),
+                    icon_color: foreground(layer),
                     background: background(layer, "hovered"),
                 },
             },
         }),
-        diagnosticMessage: interactive({
+        diagnostic_message: interactive({
             base: {
                 ...text(layer, "sans"),
             },
             state: { hovered: text(layer, "sans", "hovered") },
         }),
-        diagnosticSummary: interactive({
+        diagnostic_summary: interactive({
             base: {
                 height: 20,
                 icon_width: 16,
                 icon_spacing: 2,
-                summarySpacing: 6,
+                summary_spacing: 6,
                 text: text(layer, "sans", { size: "sm" }),
-                iconColorOk: foreground(layer, "variant"),
-                iconColorWarning: foreground(layer, "warning"),
-                iconColorError: foreground(layer, "negative"),
-                containerOk: {
+                icon_color_ok: foreground(layer, "variant"),
+                icon_color_warning: foreground(layer, "warning"),
+                icon_color_error: foreground(layer, "negative"),
+                container_ok: {
                     corner_radius: 6,
                     padding: { top: 3, bottom: 3, left: 7, right: 7 },
                 },
-                containerWarning: {
-                    ...diagnosticStatusContainer,
+                container_warning: {
+                    ...diagnostic_status_container,
                     background: background(layer, "warning"),
                     border: border(layer, "warning"),
                 },
-                containerError: {
-                    ...diagnosticStatusContainer,
+                container_error: {
+                    ...diagnostic_status_container,
                     background: background(layer, "negative"),
                     border: border(layer, "negative"),
                 },
             },
             state: {
                 hovered: {
-                    iconColorOk: foreground(layer, "on"),
-                    containerOk: {
+                    icon_color_ok: foreground(layer, "on"),
+                    container_ok: {
                         background: background(layer, "on", "hovered"),
                     },
-                    containerWarning: {
+                    container_warning: {
                         background: background(layer, "warning", "hovered"),
                         border: border(layer, "warning", "hovered"),
                     },
-                    containerError: {
+                    container_error: {
                         background: background(layer, "negative", "hovered"),
                         border: border(layer, "negative", "hovered"),
                     },
                 },
             },
         }),
-        panelButtons: {
-            groupLeft: {},
-            groupBottom: {},
-            groupRight: {},
+        panel_buttons: {
+            group_left: {},
+            group_bottom: {},
+            group_right: {},
             button: toggleable({
                 base: interactive({
                     base: {
-                        ...statusContainer,
-                        iconSize: 16,
-                        iconColor: foreground(layer, "variant"),
+                        ...status_container,
+                        icon_size: 16,
+                        icon_color: foreground(layer, "variant"),
                         label: {
                             margin: { left: 6 },
                             ...text(layer, "sans", { size: "sm" }),
@@ -120,7 +120,7 @@ export default function status_bar(colorScheme: ColorScheme): any {
                     },
                     state: {
                         hovered: {
-                            iconColor: foreground(layer, "hovered"),
+                            icon_color: foreground(layer, "hovered"),
                             background: background(layer, "variant"),
                         },
                     },
@@ -128,15 +128,15 @@ export default function status_bar(colorScheme: ColorScheme): any {
                 state: {
                     active: {
                         default: {
-                            iconColor: foreground(layer, "active"),
+                            icon_color: foreground(layer, "active"),
                             background: background(layer, "active"),
                         },
                         hovered: {
-                            iconColor: foreground(layer, "hovered"),
+                            icon_color: foreground(layer, "hovered"),
                             background: background(layer, "hovered"),
                         },
                         clicked: {
-                            iconColor: foreground(layer, "pressed"),
+                            icon_color: foreground(layer, "pressed"),
                             background: background(layer, "pressed"),
                         },
                     },
diff --git a/styles/src/style_tree/tab_bar.ts b/styles/src/style_tree/tab_bar.ts
index 63f0b213a6..dc869024bc 100644
--- a/styles/src/style_tree/tab_bar.ts
+++ b/styles/src/style_tree/tab_bar.ts
@@ -1,5 +1,5 @@
 import { ColorScheme } from "../theme/color_scheme"
-import { withOpacity } from "../theme/color"
+import { with_opacity } from "../theme/color"
 import { text, border, background, foreground } from "./components"
 import { interactive, toggleable } from "../element"
 
@@ -71,7 +71,7 @@ export default function tab_bar(colorScheme: ColorScheme): any {
 
     const draggedTab = {
         ...activePaneActiveTab,
-        background: withOpacity(tab.background, 0.9),
+        background: with_opacity(tab.background, 0.9),
         border: undefined as any,
         shadow: colorScheme.popover_shadow,
     }
diff --git a/styles/src/style_tree/titlebar.ts b/styles/src/style_tree/titlebar.ts
index dc1d098a3c..5972ba4bdd 100644
--- a/styles/src/style_tree/titlebar.ts
+++ b/styles/src/style_tree/titlebar.ts
@@ -2,7 +2,7 @@ import { ColorScheme } from "../common"
 import { icon_button, toggleable_icon_button } from "../component/icon_button"
 import { toggleable_text_button } from "../component/text_button"
 import { interactive, toggleable } from "../element"
-import { withOpacity } from "../theme/color"
+import { with_opacity } from "../theme/color"
 import { background, border, foreground, text } from "./components"
 
 const ITEM_SPACING = 8
@@ -225,7 +225,7 @@ export function titlebar(theme: ColorScheme): any {
         // When the collaboration server is out of date, show a warning
         outdatedWarning: {
             ...text(theme.lowest, "sans", "warning", { size: "xs" }),
-            background: withOpacity(background(theme.lowest, "warning"), 0.3),
+            background: with_opacity(background(theme.lowest, "warning"), 0.3),
             border: border(theme.lowest, "warning"),
             margin: {
                 left: ITEM_SPACING,
diff --git a/styles/src/style_tree/welcome.ts b/styles/src/style_tree/welcome.ts
index 9ae9716f66..2e21e33170 100644
--- a/styles/src/style_tree/welcome.ts
+++ b/styles/src/style_tree/welcome.ts
@@ -1,5 +1,5 @@
 import { ColorScheme } from "../theme/color_scheme"
-import { withOpacity } from "../theme/color"
+import { with_opacity } from "../theme/color"
 import {
     border,
     background,
@@ -56,7 +56,7 @@ export default function welcome(colorScheme: ColorScheme): any {
         },
         checkboxGroup: {
             border: border(layer, "variant"),
-            background: withOpacity(background(layer, "hovered"), 0.25),
+            background: with_opacity(background(layer, "hovered"), 0.25),
             corner_radius: 4,
             padding: {
                 left: 12,
diff --git a/styles/src/style_tree/workspace.ts b/styles/src/style_tree/workspace.ts
index 8c60c9d402..02b6c80fa9 100644
--- a/styles/src/style_tree/workspace.ts
+++ b/styles/src/style_tree/workspace.ts
@@ -1,5 +1,5 @@
 import { ColorScheme } from "../theme/color_scheme"
-import { withOpacity } from "../theme/color"
+import { with_opacity } from "../theme/color"
 import {
     background,
     border,
@@ -25,14 +25,14 @@ export default function workspace(colorScheme: ColorScheme): any {
                 height: 256,
             },
             logo: svg(
-                withOpacity("#000000", colorScheme.is_light ? 0.6 : 0.8),
+                with_opacity("#000000", colorScheme.is_light ? 0.6 : 0.8),
                 "icons/logo_96.svg",
                 256,
                 256
             ),
 
             logoShadow: svg(
-                withOpacity(
+                with_opacity(
                     colorScheme.is_light
                         ? "#FFFFFF"
                         : colorScheme.lowest.base.default.background,
@@ -97,8 +97,8 @@ export default function workspace(colorScheme: ColorScheme): any {
         zoomedBackground: {
             cursor: "Arrow",
             background: is_light
-                ? withOpacity(background(colorScheme.lowest), 0.8)
-                : withOpacity(background(colorScheme.highest), 0.6),
+                ? with_opacity(background(colorScheme.lowest), 0.8)
+                : with_opacity(background(colorScheme.highest), 0.6),
         },
         zoomedPaneForeground: {
             margin: 16,
@@ -181,7 +181,7 @@ export default function workspace(colorScheme: ColorScheme): any {
         }),
         disconnectedOverlay: {
             ...text(layer, "sans"),
-            background: withOpacity(background(layer), 0.8),
+            background: with_opacity(background(layer), 0.8),
         },
         notification: {
             margin: { top: 10 },
@@ -195,6 +195,6 @@ export default function workspace(colorScheme: ColorScheme): any {
             width: 400,
             margin: { right: 10, bottom: 10 },
         },
-        dropTargetOverlayColor: withOpacity(foreground(layer, "variant"), 0.5),
+        dropTargetOverlayColor: with_opacity(foreground(layer, "variant"), 0.5),
     }
 }
diff --git a/styles/src/theme/color.ts b/styles/src/theme/color.ts
index 58ee4ccc7c..83c2107483 100644
--- a/styles/src/theme/color.ts
+++ b/styles/src/theme/color.ts
@@ -1,5 +1,5 @@
 import chroma from "chroma-js"
 
-export function withOpacity(color: string, opacity: number): string {
+export function with_opacity(color: string, opacity: number): string {
     return chroma(color).alpha(opacity).hex()
 }