diff --git a/styles/src/style_tree/simple_message_notification.ts b/styles/src/style_tree/simple_message_notification.ts
index 896f90a51b..e9567e235a 100644
--- a/styles/src/style_tree/simple_message_notification.ts
+++ b/styles/src/style_tree/simple_message_notification.ts
@@ -12,7 +12,7 @@ export default function simple_message_notification(
             ...text(theme.middle, "sans", { size: "xs" }),
             margin: { left: header_padding, right: header_padding },
         },
-        action_nessage: interactive({
+        action_message: interactive({
             base: {
                 ...text(theme.middle, "sans", { size: "xs" }),
                 border: border(theme.middle, "active"),
diff --git a/styles/src/style_tree/status_bar.ts b/styles/src/style_tree/status_bar.ts
index 652c8bf05c..bde40d570c 100644
--- a/styles/src/style_tree/status_bar.ts
+++ b/styles/src/style_tree/status_bar.ts
@@ -36,7 +36,7 @@ export default function status_bar(theme: ColorScheme): any {
                 },
             },
         }),
-        auto_updat_progress_message: text(layer, "sans", "variant"),
+        auto_update_progress_message: text(layer, "sans", "variant"),
         auto_update_done_message: text(layer, "sans", "variant"),
         lsp_status: interactive({
             base: {
diff --git a/styles/src/style_tree/tab_bar.ts b/styles/src/style_tree/tab_bar.ts
index dc869024bc..55fd2c314a 100644
--- a/styles/src/style_tree/tab_bar.ts
+++ b/styles/src/style_tree/tab_bar.ts
@@ -3,11 +3,11 @@ import { with_opacity } from "../theme/color"
 import { text, border, background, foreground } from "./components"
 import { interactive, toggleable } from "../element"
 
-export default function tab_bar(colorScheme: ColorScheme): any {
+export default function tab_bar(theme: ColorScheme): any {
     const height = 32
 
-    const activeLayer = colorScheme.highest
-    const layer = colorScheme.middle
+    const active_layer = theme.highest
+    const layer = theme.middle
 
     const tab = {
         height,
@@ -29,12 +29,12 @@ export default function tab_bar(colorScheme: ColorScheme): any {
 
         // Close icons
         close_icon_width: 8,
-        iconClose: foreground(layer, "variant"),
-        iconCloseActive: foreground(layer, "hovered"),
+        icon_close: foreground(layer, "variant"),
+        icon_close_active: foreground(layer, "hovered"),
 
         // Indicators
-        iconConflict: foreground(layer, "warning"),
-        iconDirty: foreground(layer, "accent"),
+        icon_conflict: foreground(layer, "warning"),
+        icon_dirty: foreground(layer, "accent"),
 
         // When two tabs of the same name are open, a label appears next to them
         description: {
@@ -43,25 +43,25 @@ export default function tab_bar(colorScheme: ColorScheme): any {
         },
     }
 
-    const activePaneActiveTab = {
+    const active_pane_active_tab = {
         ...tab,
-        background: background(activeLayer),
-        text: text(activeLayer, "sans", "active", { size: "sm" }),
+        background: background(active_layer),
+        text: text(active_layer, "sans", "active", { size: "sm" }),
         border: {
             ...tab.border,
             bottom: false,
         },
     }
 
-    const inactivePaneInactiveTab = {
+    const inactive_pane_inactive_tab = {
         ...tab,
         background: background(layer),
         text: text(layer, "sans", "variant", { size: "sm" }),
     }
 
-    const inactivePaneActiveTab = {
+    const inactive_pane_active_tab = {
         ...tab,
-        background: background(activeLayer),
+        background: background(active_layer),
         text: text(layer, "sans", "variant", { size: "sm" }),
         border: {
             ...tab.border,
@@ -69,31 +69,31 @@ export default function tab_bar(colorScheme: ColorScheme): any {
         },
     }
 
-    const draggedTab = {
-        ...activePaneActiveTab,
+    const dragged_tab = {
+        ...active_pane_active_tab,
         background: with_opacity(tab.background, 0.9),
         border: undefined as any,
-        shadow: colorScheme.popover_shadow,
+        shadow: theme.popover_shadow,
     }
 
     return {
         height,
         background: background(layer),
-        activePane: {
-            activeTab: activePaneActiveTab,
-            inactiveTab: tab,
+        active_pane: {
+            active_tab: active_pane_active_tab,
+            inactive_tab: tab,
         },
-        inactivePane: {
-            activeTab: inactivePaneActiveTab,
-            inactiveTab: inactivePaneInactiveTab,
+        inactive_pane: {
+            active_tab: inactive_pane_active_tab,
+            inactive_tab: inactive_pane_inactive_tab,
         },
-        draggedTab,
-        paneButton: toggleable({
+        dragged_tab,
+        pane_button: toggleable({
             base: interactive({
                 base: {
                     color: foreground(layer, "variant"),
                     icon_width: 12,
-                    button_width: activePaneActiveTab.height,
+                    button_width: active_pane_active_tab.height,
                 },
                 state: {
                     hovered: {
@@ -118,7 +118,7 @@ export default function tab_bar(colorScheme: ColorScheme): any {
                 },
             },
         }),
-        paneButtonContainer: {
+        pane_button_container: {
             background: tab.background,
             border: {
                 ...tab.border,
diff --git a/styles/src/style_tree/titlebar.ts b/styles/src/style_tree/titlebar.ts
index 5972ba4bdd..067d619bb5 100644
--- a/styles/src/style_tree/titlebar.ts
+++ b/styles/src/style_tree/titlebar.ts
@@ -17,8 +17,8 @@ function build_spacing(
         group: spacing,
         item: spacing / 2,
         half_item: spacing / 4,
-        marginY: (container_height - element_height) / 2,
-        marginX: (container_height - element_height) / 2,
+        margin_y: (container_height - element_height) / 2,
+        margin_x: (container_height - element_height) / 2,
     }
 }
 
@@ -26,15 +26,15 @@ function call_controls(theme: ColorScheme) {
     const button_height = 18
 
     const space = build_spacing(TITLEBAR_HEIGHT, button_height, ITEM_SPACING)
-    const marginY = {
-        top: space.marginY,
-        bottom: space.marginY,
+    const margin_y = {
+        top: space.margin_y,
+        bottom: space.margin_y,
     }
 
     return {
         toggle_microphone_button: toggleable_icon_button(theme, {
             margin: {
-                ...marginY,
+                ...margin_y,
                 left: space.group,
                 right: space.half_item,
             },
@@ -43,7 +43,7 @@ function call_controls(theme: ColorScheme) {
 
         toggle_speakers_button: toggleable_icon_button(theme, {
             margin: {
-                ...marginY,
+                ...margin_y,
                 left: space.half_item,
                 right: space.half_item,
             },
@@ -51,7 +51,7 @@ function call_controls(theme: ColorScheme) {
 
         screen_share_button: toggleable_icon_button(theme, {
             margin: {
-                ...marginY,
+                ...margin_y,
                 left: space.half_item,
                 right: space.group,
             },
@@ -150,20 +150,20 @@ function user_menu(theme: ColorScheme) {
         }
     }
     return {
-        userMenuButtonOnline: build_button({ online: true }),
-        userMenuButtonOffline: build_button({ online: false }),
+        user_menu_button_online: build_button({ online: true }),
+        user_menu_button_offline: build_button({ online: false }),
     }
 }
 
 export function titlebar(theme: ColorScheme): any {
-    const avatarWidth = 15
-    const avatarOuterWidth = avatarWidth + 4
-    const followerAvatarWidth = 14
-    const followerAvatarOuterWidth = followerAvatarWidth + 4
+    const avatar_width = 15
+    const avatar_outer_width = avatar_width + 4
+    const follower_avatar_width = 14
+    const follower_avatar_outer_width = follower_avatar_width + 4
 
     return {
         item_spacing: ITEM_SPACING,
-        facePileSpacing: 2,
+        face_pile_spacing: 2,
         height: TITLEBAR_HEIGHT,
         background: background(theme.lowest),
         border: border(theme.lowest, { bottom: true }),
@@ -177,21 +177,21 @@ export function titlebar(theme: ColorScheme): any {
         highlight_color: text(theme.lowest, "sans", "active").color,
 
         // Collaborators
-        leaderAvatar: {
-            width: avatarWidth,
-            outerWidth: avatarOuterWidth,
-            corner_radius: avatarWidth / 2,
-            outerCornerRadius: avatarOuterWidth / 2,
+        leader_avatar: {
+            width: avatar_width,
+            outer_width: avatar_outer_width,
+            corner_radius: avatar_width / 2,
+            outer_corner_radius: avatar_outer_width / 2,
         },
-        followerAvatar: {
-            width: followerAvatarWidth,
-            outerWidth: followerAvatarOuterWidth,
-            corner_radius: followerAvatarWidth / 2,
-            outerCornerRadius: followerAvatarOuterWidth / 2,
+        follower_avatar: {
+            width: follower_avatar_width,
+            outer_width: follower_avatar_outer_width,
+            corner_radius: follower_avatar_width / 2,
+            outer_corner_radius: follower_avatar_outer_width / 2,
         },
-        inactiveAvatarGrayscale: true,
-        followerAvatarOverlap: 8,
-        leaderSelection: {
+        inactive_avatar_grayscale: true,
+        follower_avatar_overlap: 8,
+        leader_selection: {
             margin: {
                 top: 4,
                 bottom: 4,
@@ -204,14 +204,14 @@ export function titlebar(theme: ColorScheme): any {
             },
             corner_radius: 6,
         },
-        avatarRibbon: {
+        avatar_ribbon: {
             height: 3,
             width: 14,
             // TODO: Chore: Make avatarRibbon colors driven by the theme rather than being hard coded.
         },
 
         sign_in_button: toggleable_text_button(theme, {}),
-        offlineIcon: {
+        offline_icon: {
             color: foreground(theme.lowest, "variant"),
             width: 16,
             margin: {
@@ -223,7 +223,7 @@ export function titlebar(theme: ColorScheme): any {
         },
 
         // When the collaboration server is out of date, show a warning
-        outdatedWarning: {
+        outdated_warning: {
             ...text(theme.lowest, "sans", "warning", { size: "xs" }),
             background: with_opacity(background(theme.lowest, "warning"), 0.3),
             border: border(theme.lowest, "warning"),
@@ -253,14 +253,14 @@ export function titlebar(theme: ColorScheme): any {
         }),
 
         // Jewel that notifies you that there are new contact requests
-        toggleContactsBadge: {
+        toggle_contacts_badge: {
             corner_radius: 3,
             padding: 2,
             margin: { top: 3, left: 3 },
             border: border(theme.lowest),
             background: foreground(theme.lowest, "accent"),
         },
-        shareButton: toggleable_text_button(theme, {}),
+        share_button: toggleable_text_button(theme, {}),
         user_menu: user_menu(theme),
     }
 }
diff --git a/styles/src/style_tree/toolbar_dropdown_menu.ts b/styles/src/style_tree/toolbar_dropdown_menu.ts
index 51e62db822..df5cc094c1 100644
--- a/styles/src/style_tree/toolbar_dropdown_menu.ts
+++ b/styles/src/style_tree/toolbar_dropdown_menu.ts
@@ -1,61 +1,59 @@
 import { ColorScheme } from "../theme/color_scheme"
 import { background, border, text } from "./components"
 import { interactive, toggleable } from "../element"
-export default function dropdown_menu(colorScheme: ColorScheme): any {
-    const layer = colorScheme.middle
-
+export default function dropdown_menu(theme: ColorScheme): any {
     return {
-        rowHeight: 30,
-        background: background(layer),
-        border: border(layer),
-        shadow: colorScheme.popover_shadow,
+        row_height: 30,
+        background: background(theme.middle),
+        border: border(theme.middle),
+        shadow: theme.popover_shadow,
         header: interactive({
             base: {
-                ...text(layer, "sans", { size: "sm" }),
-                secondaryText: text(layer, "sans", {
+                ...text(theme.middle, "sans", { size: "sm" }),
+                secondary_text: text(theme.middle, "sans", {
                     size: "sm",
                     color: "#aaaaaa",
                 }),
-                secondaryTextSpacing: 10,
+                secondary_text_spacing: 10,
                 padding: { left: 8, right: 8, top: 2, bottom: 2 },
                 corner_radius: 6,
-                background: background(layer, "on"),
+                background: background(theme.middle, "on"),
             },
             state: {
                 hovered: {
-                    background: background(layer, "hovered"),
+                    background: background(theme.middle, "hovered"),
                 },
                 clicked: {
-                    background: background(layer, "pressed"),
+                    background: background(theme.middle, "pressed"),
                 },
             },
         }),
-        sectionHeader: {
-            ...text(layer, "sans", { size: "sm" }),
+        section_header: {
+            ...text(theme.middle, "sans", { size: "sm" }),
             padding: { left: 8, right: 8, top: 8, bottom: 8 },
         },
         item: toggleable({
             base: interactive({
                 base: {
-                    ...text(layer, "sans", { size: "sm" }),
-                    secondaryTextSpacing: 10,
-                    secondaryText: text(layer, "sans", { size: "sm" }),
+                    ...text(theme.middle, "sans", { size: "sm" }),
+                    secondary_text_spacing: 10,
+                    secondary_text: text(theme.middle, "sans", { size: "sm" }),
                     padding: { left: 18, right: 18, top: 2, bottom: 2 },
                 },
                 state: {
                     hovered: {
-                        background: background(layer, "hovered"),
-                        ...text(layer, "sans", "hovered", { size: "sm" }),
+                        background: background(theme.middle, "hovered"),
+                        ...text(theme.middle, "sans", "hovered", { size: "sm" }),
                     },
                 },
             }),
             state: {
                 active: {
                     default: {
-                        background: background(layer, "active"),
+                        background: background(theme.middle, "active"),
                     },
                     hovered: {
-                        background: background(layer, "hovered"),
+                        background: background(theme.middle, "hovered"),
                     },
                 },
             },
diff --git a/styles/src/style_tree/tooltip.ts b/styles/src/style_tree/tooltip.ts
index ea890232b5..2fa5db04d4 100644
--- a/styles/src/style_tree/tooltip.ts
+++ b/styles/src/style_tree/tooltip.ts
@@ -1,23 +1,22 @@
 import { ColorScheme } from "../theme/color_scheme"
 import { background, border, text } from "./components"
 
-export default function tooltip(colorScheme: ColorScheme): any {
-    const layer = colorScheme.middle
+export default function tooltip(theme: ColorScheme): any {
     return {
-        background: background(layer),
-        border: border(layer),
+        background: background(theme.middle),
+        border: border(theme.middle),
         padding: { top: 4, bottom: 4, left: 8, right: 8 },
         margin: { top: 6, left: 6 },
-        shadow: colorScheme.popover_shadow,
+        shadow: theme.popover_shadow,
         corner_radius: 6,
-        text: text(layer, "sans", { size: "xs" }),
+        text: text(theme.middle, "sans", { size: "xs" }),
         keystroke: {
-            background: background(layer, "on"),
+            background: background(theme.middle, "on"),
             corner_radius: 4,
             margin: { left: 6 },
             padding: { left: 4, right: 4 },
-            ...text(layer, "mono", "on", { size: "xs", weight: "bold" }),
+            ...text(theme.middle, "mono", "on", { size: "xs", weight: "bold" }),
         },
-        maxTextWidth: 200,
+        max_text_width: 200,
     }
 }
diff --git a/styles/src/style_tree/update_notification.ts b/styles/src/style_tree/update_notification.ts
index e3cf833ce8..48581a5d21 100644
--- a/styles/src/style_tree/update_notification.ts
+++ b/styles/src/style_tree/update_notification.ts
@@ -2,37 +2,37 @@ import { ColorScheme } from "../theme/color_scheme"
 import { foreground, text } from "./components"
 import { interactive } from "../element"
 
-const headerPadding = 8
 
-export default function update_notification(colorScheme: ColorScheme): any {
-    const layer = colorScheme.middle
+export default function update_notification(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_message: interactive({
             base: {
-                ...text(layer, "sans", { size: "xs" }),
-                margin: { left: headerPadding, top: 6, bottom: 6 },
+                ...text(theme.middle, "sans", { size: "xs" }),
+                margin: { left: header_padding, top: 6, bottom: 6 },
             },
             state: {
                 hovered: {
-                    color: foreground(layer, "hovered"),
+                    color: foreground(theme.middle, "hovered"),
                 },
             },
         }),
-        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/welcome.ts b/styles/src/style_tree/welcome.ts
index 2e21e33170..0d99ad3f77 100644
--- a/styles/src/style_tree/welcome.ts
+++ b/styles/src/style_tree/welcome.ts
@@ -10,10 +10,8 @@ import {
 } from "./components"
 import { interactive } from "../element"
 
-export default function welcome(colorScheme: ColorScheme): any {
-    const layer = colorScheme.highest
-
-    const checkboxBase = {
+export default function welcome(theme: ColorScheme): any {
+    const checkbox_base = {
         corner_radius: 4,
         padding: {
             left: 3,
@@ -21,8 +19,8 @@ export default function welcome(colorScheme: ColorScheme): any {
             top: 3,
             bottom: 3,
         },
-        // shadow: colorScheme.popover_shadow,
-        border: border(layer),
+        // shadow: theme.popover_shadow,
+        border: border(theme.highest),
         margin: {
             right: 8,
             top: 5,
@@ -33,30 +31,30 @@ export default function welcome(colorScheme: ColorScheme): any {
     const interactive_text_size: TextProperties = { size: "sm" }
 
     return {
-        pageWidth: 320,
-        logo: svg(foreground(layer, "default"), "icons/logo_96.svg", 64, 64),
-        logoSubheading: {
-            ...text(layer, "sans", "variant", { size: "md" }),
+        page_width: 320,
+        logo: svg(foreground(theme.highest, "default"), "icons/logo_96.svg", 64, 64),
+        logo_subheading: {
+            ...text(theme.highest, "sans", "variant", { size: "md" }),
             margin: {
                 top: 10,
                 bottom: 7,
             },
         },
-        buttonGroup: {
+        button_group: {
             margin: {
                 top: 8,
                 bottom: 16,
             },
         },
-        headingGroup: {
+        heading_group: {
             margin: {
                 top: 8,
                 bottom: 12,
             },
         },
-        checkboxGroup: {
-            border: border(layer, "variant"),
-            background: with_opacity(background(layer, "hovered"), 0.25),
+        checkbox_group: {
+            border: border(theme.highest, "variant"),
+            background: with_opacity(background(theme.highest, "hovered"), 0.25),
             corner_radius: 4,
             padding: {
                 left: 12,
@@ -66,8 +64,8 @@ export default function welcome(colorScheme: ColorScheme): any {
         },
         button: interactive({
             base: {
-                background: background(layer),
-                border: border(layer, "active"),
+                background: background(theme.highest),
+                border: border(theme.highest, "active"),
                 corner_radius: 4,
                 margin: {
                     top: 4,
@@ -79,23 +77,23 @@ export default function welcome(colorScheme: ColorScheme): any {
                     left: 7,
                     right: 7,
                 },
-                ...text(layer, "sans", "default", interactive_text_size),
+                ...text(theme.highest, "sans", "default", interactive_text_size),
             },
             state: {
                 hovered: {
-                    ...text(layer, "sans", "default", interactive_text_size),
-                    background: background(layer, "hovered"),
+                    ...text(theme.highest, "sans", "default", interactive_text_size),
+                    background: background(theme.highest, "hovered"),
                 },
             },
         }),
 
-        usageNote: {
-            ...text(layer, "sans", "variant", { size: "2xs" }),
+        usage_note: {
+            ...text(theme.highest, "sans", "variant", { size: "2xs" }),
             padding: {
                 top: -4,
             },
         },
-        checkboxContainer: {
+        checkbox_container: {
             margin: {
                 top: 4,
             },
@@ -105,29 +103,29 @@ export default function welcome(colorScheme: ColorScheme): any {
         },
         checkbox: {
             label: {
-                ...text(layer, "sans", interactive_text_size),
+                ...text(theme.highest, "sans", interactive_text_size),
                 // Also supports margin, container, border, etc.
             },
-            icon: svg(foreground(layer, "on"), "icons/check_12.svg", 12, 12),
+            icon: svg(foreground(theme.highest, "on"), "icons/check_12.svg", 12, 12),
             default: {
-                ...checkboxBase,
-                background: background(layer, "default"),
-                border: border(layer, "active"),
+                ...checkbox_base,
+                background: background(theme.highest, "default"),
+                border: border(theme.highest, "active"),
             },
             checked: {
-                ...checkboxBase,
-                background: background(layer, "hovered"),
-                border: border(layer, "active"),
+                ...checkbox_base,
+                background: background(theme.highest, "hovered"),
+                border: border(theme.highest, "active"),
             },
             hovered: {
-                ...checkboxBase,
-                background: background(layer, "hovered"),
-                border: border(layer, "active"),
+                ...checkbox_base,
+                background: background(theme.highest, "hovered"),
+                border: border(theme.highest, "active"),
             },
-            hoveredAndChecked: {
-                ...checkboxBase,
-                background: background(layer, "hovered"),
-                border: border(layer, "active"),
+            hovered_and_checked: {
+                ...checkbox_base,
+                background: background(theme.highest, "hovered"),
+                border: border(theme.highest, "active"),
             },
         },
     }
diff --git a/styles/src/style_tree/workspace.ts b/styles/src/style_tree/workspace.ts
index 02b6c80fa9..82b05eab91 100644
--- a/styles/src/style_tree/workspace.ts
+++ b/styles/src/style_tree/workspace.ts
@@ -13,44 +13,43 @@ import tabBar from "./tab_bar"
 import { interactive } from "../element"
 
 import { titlebar } from "./titlebar"
-export default function workspace(colorScheme: ColorScheme): any {
-    const layer = colorScheme.lowest
-    const is_light = colorScheme.is_light
+export default function workspace(theme: ColorScheme): any {
+    const { is_light } = theme
 
     return {
-        background: background(colorScheme.lowest),
-        blankPane: {
-            logoContainer: {
+        background: background(theme.lowest),
+        blank_pane: {
+            logo_container: {
                 width: 256,
                 height: 256,
             },
             logo: svg(
-                with_opacity("#000000", colorScheme.is_light ? 0.6 : 0.8),
+                with_opacity("#000000", theme.is_light ? 0.6 : 0.8),
                 "icons/logo_96.svg",
                 256,
                 256
             ),
 
-            logoShadow: svg(
+            logo_shadow: svg(
                 with_opacity(
-                    colorScheme.is_light
+                    theme.is_light
                         ? "#FFFFFF"
-                        : colorScheme.lowest.base.default.background,
-                    colorScheme.is_light ? 1 : 0.6
+                        : theme.lowest.base.default.background,
+                    theme.is_light ? 1 : 0.6
                 ),
                 "icons/logo_96.svg",
                 256,
                 256
             ),
-            keyboardHints: {
+            keyboard_hints: {
                 margin: {
                     top: 96,
                 },
                 corner_radius: 4,
             },
-            keyboardHint: interactive({
+            keyboard_hint: interactive({
                 base: {
-                    ...text(layer, "sans", "variant", { size: "sm" }),
+                    ...text(theme.lowest, "sans", "variant", { size: "sm" }),
                     padding: {
                         top: 3,
                         left: 8,
@@ -61,32 +60,32 @@ export default function workspace(colorScheme: ColorScheme): any {
                 },
                 state: {
                     hovered: {
-                        ...text(layer, "sans", "active", { size: "sm" }),
+                        ...text(theme.lowest, "sans", "active", { size: "sm" }),
                     },
                 },
             }),
 
-            keyboardHintWidth: 320,
+            keyboard_hint_width: 320,
         },
-        joiningProjectAvatar: {
+        joining_project_avatar: {
             corner_radius: 40,
             width: 80,
         },
-        joiningProjectMessage: {
+        joining_project_message: {
             padding: 12,
-            ...text(layer, "sans", { size: "lg" }),
+            ...text(theme.lowest, "sans", { size: "lg" }),
         },
-        externalLocationMessage: {
-            background: background(colorScheme.middle, "accent"),
-            border: border(colorScheme.middle, "accent"),
+        external_location_message: {
+            background: background(theme.middle, "accent"),
+            border: border(theme.middle, "accent"),
             corner_radius: 6,
             padding: 12,
             margin: { bottom: 8, right: 8 },
-            ...text(colorScheme.middle, "sans", "accent", { size: "xs" }),
+            ...text(theme.middle, "sans", "accent", { size: "xs" }),
         },
-        leaderBorderOpacity: 0.7,
-        leaderBorderWidth: 2.0,
-        tabBar: tabBar(colorScheme),
+        leader_border_opacity: 0.7,
+        leader_border_width: 2.0,
+        tab_bar: tabBar(theme),
         modal: {
             margin: {
                 bottom: 52,
@@ -94,62 +93,62 @@ export default function workspace(colorScheme: ColorScheme): any {
             },
             cursor: "Arrow",
         },
-        zoomedBackground: {
+        zoomed_background: {
             cursor: "Arrow",
             background: is_light
-                ? with_opacity(background(colorScheme.lowest), 0.8)
-                : with_opacity(background(colorScheme.highest), 0.6),
+                ? with_opacity(background(theme.lowest), 0.8)
+                : with_opacity(background(theme.highest), 0.6),
         },
-        zoomedPaneForeground: {
+        zoomed_pane_foreground: {
             margin: 16,
-            shadow: colorScheme.modal_shadow,
-            border: border(colorScheme.lowest, { overlay: true }),
+            shadow: theme.modal_shadow,
+            border: border(theme.lowest, { overlay: true }),
         },
-        zoomedPanelForeground: {
+        zoomed_panel_foreground: {
             margin: 16,
-            border: border(colorScheme.lowest, { overlay: true }),
+            border: border(theme.lowest, { overlay: true }),
         },
         dock: {
             left: {
-                border: border(layer, { right: true }),
+                border: border(theme.lowest, { right: true }),
             },
             bottom: {
-                border: border(layer, { top: true }),
+                border: border(theme.lowest, { top: true }),
             },
             right: {
-                border: border(layer, { left: true }),
+                border: border(theme.lowest, { left: true }),
             },
         },
-        paneDivider: {
-            color: border_color(layer),
+        pane_divider: {
+            color: border_color(theme.lowest),
             width: 1,
         },
-        statusBar: statusBar(colorScheme),
-        titlebar: titlebar(colorScheme),
+        status_bar: statusBar(theme),
+        titlebar: titlebar(theme),
         toolbar: {
             height: 34,
-            background: background(colorScheme.highest),
-            border: border(colorScheme.highest, { bottom: true }),
-            itemSpacing: 8,
-            navButton: interactive({
+            background: background(theme.highest),
+            border: border(theme.highest, { bottom: true }),
+            item_spacing: 8,
+            nav_button: interactive({
                 base: {
-                    color: foreground(colorScheme.highest, "on"),
+                    color: foreground(theme.highest, "on"),
                     icon_width: 12,
                     button_width: 24,
                     corner_radius: 6,
                 },
                 state: {
                     hovered: {
-                        color: foreground(colorScheme.highest, "on", "hovered"),
+                        color: foreground(theme.highest, "on", "hovered"),
                         background: background(
-                            colorScheme.highest,
+                            theme.highest,
                             "on",
                             "hovered"
                         ),
                     },
                     disabled: {
                         color: foreground(
-                            colorScheme.highest,
+                            theme.highest,
                             "on",
                             "disabled"
                         ),
@@ -158,10 +157,10 @@ export default function workspace(colorScheme: ColorScheme): any {
             }),
             padding: { left: 8, right: 8, top: 4, bottom: 4 },
         },
-        breadcrumbHeight: 24,
+        breadcrumb_height: 24,
         breadcrumbs: interactive({
             base: {
-                ...text(colorScheme.highest, "sans", "variant"),
+                ...text(theme.highest, "sans", "variant"),
                 corner_radius: 6,
                 padding: {
                     left: 6,
@@ -170,31 +169,31 @@ export default function workspace(colorScheme: ColorScheme): any {
             },
             state: {
                 hovered: {
-                    color: foreground(colorScheme.highest, "on", "hovered"),
+                    color: foreground(theme.highest, "on", "hovered"),
                     background: background(
-                        colorScheme.highest,
+                        theme.highest,
                         "on",
                         "hovered"
                     ),
                 },
             },
         }),
-        disconnectedOverlay: {
-            ...text(layer, "sans"),
-            background: with_opacity(background(layer), 0.8),
+        disconnected_overlay: {
+            ...text(theme.lowest, "sans"),
+            background: with_opacity(background(theme.lowest), 0.8),
         },
         notification: {
             margin: { top: 10 },
-            background: background(colorScheme.middle),
+            background: background(theme.middle),
             corner_radius: 6,
             padding: 12,
-            border: border(colorScheme.middle),
-            shadow: colorScheme.popover_shadow,
+            border: border(theme.middle),
+            shadow: theme.popover_shadow,
         },
         notifications: {
             width: 400,
             margin: { right: 10, bottom: 10 },
         },
-        dropTargetOverlayColor: with_opacity(foreground(layer, "variant"), 0.5),
+        drop_target_overlay_color: with_opacity(foreground(theme.lowest, "variant"), 0.5),
     }
 }
diff --git a/styles/src/theme/tokens/color_scheme.ts b/styles/src/theme/tokens/color_scheme.ts
index 21334fb199..57793cf8dd 100644
--- a/styles/src/theme/tokens/color_scheme.ts
+++ b/styles/src/theme/tokens/color_scheme.ts
@@ -51,29 +51,29 @@ const modal_shadow_token = (theme: ColorScheme): SingleBoxShadowToken => {
 
 type ThemeSyntaxColorTokens = Record<keyof ThemeSyntax, SingleColorToken>
 
-function syntaxHighlightStyleColorTokens(
+function syntax_highlight_style_color_tokens(
     syntax: Syntax
 ): ThemeSyntaxColorTokens {
-    const styleKeys = Object.keys(syntax) as (keyof Syntax)[]
+    const style_keys = Object.keys(syntax) as (keyof Syntax)[]
 
-    return styleKeys.reduce((acc, styleKey) => {
+    return style_keys.reduce((acc, style_key) => {
         // Hack: The type of a style could be "Function"
         // This can happen because we have a "constructor" property on the syntax object
         // and a "constructor" property on the prototype of the syntax object
         // To work around this just assert that the type of the style is not a function
-        if (!syntax[styleKey] || typeof syntax[styleKey] === "function")
+        if (!syntax[style_key] || typeof syntax[style_key] === "function")
             return acc
-        const { color } = syntax[styleKey] as Required<SyntaxHighlightStyle>
-        return { ...acc, [styleKey]: colorToken(styleKey, color) }
+        const { color } = syntax[style_key] as Required<SyntaxHighlightStyle>
+        return { ...acc, [style_key]: colorToken(style_key, color) }
     }, {} as ThemeSyntaxColorTokens)
 }
 
-const syntax_Tokens = (
+const syntax_tokens = (
     theme: ColorScheme
 ): ColorSchemeTokens["syntax"] => {
     const syntax = editor(theme).syntax
 
-    return syntaxHighlightStyleColorTokens(syntax)
+    return syntax_highlight_style_color_tokens(syntax)
 }
 
 export function theme_tokens(theme: ColorScheme): ColorSchemeTokens {
@@ -94,6 +94,6 @@ export function theme_tokens(theme: ColorScheme): ColorSchemeTokens {
         popover_shadow: popover_shadow_token(theme),
         modal_shadow: modal_shadow_token(theme),
         players: playersToken(theme),
-        syntax: syntax_Tokens(theme),
+        syntax: syntax_tokens(theme),
     }
 }
diff --git a/styles/src/theme/tokens/layer.ts b/styles/src/theme/tokens/layer.ts
index 10309e0d2e..a2e539092e 100644
--- a/styles/src/theme/tokens/layer.ts
+++ b/styles/src/theme/tokens/layer.ts
@@ -1,6 +1,6 @@
 import { SingleColorToken } from "@tokens-studio/types"
 import { Layer, Style, StyleSet } from "../color_scheme"
-import { colorToken } from "./token"
+import { color_token } from "./token"
 
 interface StyleToken {
     background: SingleColorToken
@@ -27,36 +27,36 @@ export interface LayerToken {
     negative: StyleSetToken
 }
 
-export const styleToken = (style: Style, name: string): StyleToken => {
+export const style_token = (style: Style, name: string): StyleToken => {
     const token = {
-        background: colorToken(`${name}Background`, style.background),
-        border: colorToken(`${name}Border`, style.border),
-        foreground: colorToken(`${name}Foreground`, style.foreground),
+        background: color_token(`${name}Background`, style.background),
+        border: color_token(`${name}Border`, style.border),
+        foreground: color_token(`${name}Foreground`, style.foreground),
     }
 
     return token
 }
 
-export const styleSetToken = (
-    styleSet: StyleSet,
+export const style_set_token = (
+    style_set: StyleSet,
     name: string
 ): StyleSetToken => {
     const token: StyleSetToken = {} as StyleSetToken
 
-    for (const style in styleSet) {
+    for (const style in style_set) {
         const s = style as keyof StyleSet
-        token[s] = styleToken(styleSet[s], `${name}${style}`)
+        token[s] = style_token(style_set[s], `${name}${style}`)
     }
 
     return token
 }
 
-export const layerToken = (layer: Layer, name: string): LayerToken => {
+export const layer_token = (layer: Layer, name: string): LayerToken => {
     const token: LayerToken = {} as LayerToken
 
-    for (const styleSet in layer) {
-        const s = styleSet as keyof Layer
-        token[s] = styleSetToken(layer[s], `${name}${styleSet}`)
+    for (const style_set in layer) {
+        const s = style_set as keyof Layer
+        token[s] = style_set_token(layer[s], `${name}${style_set}`)
     }
 
     return token
diff --git a/styles/src/theme/tokens/players.ts b/styles/src/theme/tokens/players.ts
index 12f16343e9..68a8e676a7 100644
--- a/styles/src/theme/tokens/players.ts
+++ b/styles/src/theme/tokens/players.ts
@@ -1,36 +1,36 @@
 import { SingleColorToken } from "@tokens-studio/types"
-import { colorToken } from "./token"
+import { color_token } from "./token"
 import { ColorScheme, Players } from "../color_scheme"
 
 export type PlayerToken = Record<"selection" | "cursor", SingleColorToken>
 
 export type PlayersToken = Record<keyof Players, PlayerToken>
 
-function buildPlayerToken(
-    colorScheme: ColorScheme,
+function build_player_token(
+    theme: ColorScheme,
     index: number
 ): PlayerToken {
-    const playerNumber = index.toString() as keyof Players
+    const player_number = index.toString() as keyof Players
 
     return {
-        selection: colorToken(
+        selection: color_token(
             `player${index}Selection`,
-            colorScheme.players[playerNumber].selection
+            theme.players[player_number].selection
         ),
-        cursor: colorToken(
+        cursor: color_token(
             `player${index}Cursor`,
-            colorScheme.players[playerNumber].cursor
+            theme.players[player_number].cursor
         ),
     }
 }
 
-export const playersToken = (colorScheme: ColorScheme): PlayersToken => ({
-    "0": buildPlayerToken(colorScheme, 0),
-    "1": buildPlayerToken(colorScheme, 1),
-    "2": buildPlayerToken(colorScheme, 2),
-    "3": buildPlayerToken(colorScheme, 3),
-    "4": buildPlayerToken(colorScheme, 4),
-    "5": buildPlayerToken(colorScheme, 5),
-    "6": buildPlayerToken(colorScheme, 6),
-    "7": buildPlayerToken(colorScheme, 7),
+export const players_token = (theme: ColorScheme): PlayersToken => ({
+    "0": build_player_token(theme, 0),
+    "1": build_player_token(theme, 1),
+    "2": build_player_token(theme, 2),
+    "3": build_player_token(theme, 3),
+    "4": build_player_token(theme, 4),
+    "5": build_player_token(theme, 5),
+    "6": build_player_token(theme, 6),
+    "7": build_player_token(theme, 7),
 })
diff --git a/styles/src/theme/tokens/token.ts b/styles/src/theme/tokens/token.ts
index 2f1760778e..60e846ce94 100644
--- a/styles/src/theme/tokens/token.ts
+++ b/styles/src/theme/tokens/token.ts
@@ -1,6 +1,6 @@
 import { SingleColorToken, TokenTypes } from "@tokens-studio/types"
 
-export function colorToken(
+export function color_token(
     name: string,
     value: string,
     description?: string
diff --git a/styles/src/themes/andromeda/LICENSE b/styles/src/themes/andromeda/LICENSE
index bdd549491f..9422adafa4 100644
--- a/styles/src/themes/andromeda/LICENSE
+++ b/styles/src/themes/andromeda/LICENSE
@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
\ No newline at end of file
+SOFTWARE.
diff --git a/styles/src/themes/atelier/LICENSE b/styles/src/themes/atelier/LICENSE
index 9f92967a04..47c46d0429 100644
--- a/styles/src/themes/atelier/LICENSE
+++ b/styles/src/themes/atelier/LICENSE
@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
\ No newline at end of file
+SOFTWARE.
diff --git a/styles/src/themes/ayu/LICENSE b/styles/src/themes/ayu/LICENSE
index 6b83ef0582..37a9229268 100644
--- a/styles/src/themes/ayu/LICENSE
+++ b/styles/src/themes/ayu/LICENSE
@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
\ No newline at end of file
+SOFTWARE.
diff --git a/styles/src/themes/ayu/common.ts b/styles/src/themes/ayu/common.ts
index 9caaee8e34..2bd0bbf259 100644
--- a/styles/src/themes/ayu/common.ts
+++ b/styles/src/themes/ayu/common.ts
@@ -15,14 +15,14 @@ export const ayu = {
 
 export const build_theme = (t: typeof dark, light: boolean) => {
     const color = {
-        lightBlue: t.syntax.tag.hex(),
+        light_blue: t.syntax.tag.hex(),
         yellow: t.syntax.func.hex(),
         blue: t.syntax.entity.hex(),
         green: t.syntax.string.hex(),
         teal: t.syntax.regexp.hex(),
         red: t.syntax.markup.hex(),
         orange: t.syntax.keyword.hex(),
-        lightYellow: t.syntax.special.hex(),
+        light_yellow: t.syntax.special.hex(),
         gray: t.syntax.comment.hex(),
         purple: t.syntax.constant.hex(),
     }
@@ -55,7 +55,7 @@ export const build_theme = (t: typeof dark, light: boolean) => {
             cyan: color_ramp(chroma(color.teal)),
             blue: color_ramp(chroma(color.blue)),
             violet: color_ramp(chroma(color.purple)),
-            magenta: color_ramp(chroma(color.lightBlue)),
+            magenta: color_ramp(chroma(color.light_blue)),
         },
         syntax,
     }
diff --git a/styles/src/themes/gruvbox/LICENSE b/styles/src/themes/gruvbox/LICENSE
index 2a92306143..0e18d6d7a9 100644
--- a/styles/src/themes/gruvbox/LICENSE
+++ b/styles/src/themes/gruvbox/LICENSE
@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
\ No newline at end of file
+SOFTWARE.
diff --git a/styles/src/themes/one/LICENSE b/styles/src/themes/one/LICENSE
index dc07dc10ad..f7637d33ea 100644
--- a/styles/src/themes/one/LICENSE
+++ b/styles/src/themes/one/LICENSE
@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
\ No newline at end of file
+SOFTWARE.
diff --git a/styles/src/themes/rose-pine/LICENSE b/styles/src/themes/rose-pine/LICENSE
index dfd60136f9..1276733453 100644
--- a/styles/src/themes/rose-pine/LICENSE
+++ b/styles/src/themes/rose-pine/LICENSE
@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
\ No newline at end of file
+SOFTWARE.
diff --git a/styles/src/themes/sandcastle/LICENSE b/styles/src/themes/sandcastle/LICENSE
index c66a06c51b..ba6559d810 100644
--- a/styles/src/themes/sandcastle/LICENSE
+++ b/styles/src/themes/sandcastle/LICENSE
@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
\ No newline at end of file
+SOFTWARE.
diff --git a/styles/src/themes/solarized/LICENSE b/styles/src/themes/solarized/LICENSE
index 221eee6f15..2b5ddc4158 100644
--- a/styles/src/themes/solarized/LICENSE
+++ b/styles/src/themes/solarized/LICENSE
@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
\ No newline at end of file
+SOFTWARE.
diff --git a/styles/src/themes/summercamp/LICENSE b/styles/src/themes/summercamp/LICENSE
index d7525414ad..dd49a64536 100644
--- a/styles/src/themes/summercamp/LICENSE
+++ b/styles/src/themes/summercamp/LICENSE
@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
\ No newline at end of file
+SOFTWARE.