diff --git a/styles/src/style_tree/simple_message_notification.ts b/styles/src/style_tree/simple_message_notification.ts
index 896f90a51b7095b64596b8d9560bdd0d9eaf554d..e9567e235a4bb7dbfbc56f8cb49e5df3e5391ee8 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 652c8bf05c636f74ed03377cbed445263c26465d..bde40d570c5c2bc8b42af00a52eca9ccb7b8e26b 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 dc869024bcf0b72ef57dba6e94d16ec77ef28858..55fd2c314a9781d4719f5d16fd5cd498202f89a1 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 5972ba4bdd90c6a49237f1c58d0add7ab95bc8fd..067d619bb524880c1ddd9085a889cf41d3177470 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 51e62db822edc8d0da82378ee25b5f3e03f17287..df5cc094c10619d06bf2c50af2c01def7ba29d69 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 ea890232b5d45938cc0411e5cf087674deff5468..2fa5db04d4f96eee33cca9ea9190dff275ad7e0c 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 e3cf833ce85e0e83ac655b6285485af1c882be13..48581a5d210dc2948d415c6b3919284eba601823 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 2e21e331707c098953c0447ccbe1cd23dc197f4b..0d99ad3f77150077cb56d56629b8bb6fb6688124 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 02b6c80fa989a19ba0e694edc69e644bc70c5595..82b05eab91f86c1c539c53588af1bf94e987360e 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 21334fb199a19f3e1dfae2b514b80679418bca54..57793cf8dd052ad0228d4a72850c9e2ec2bfc7a4 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 10309e0d2e2bdda2f3c938ee20b1aa43d9aee4e0..a2e539092e4a9f0a4d49a74a615867e69bc6a923 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 12f16343e9d08e670cb58ebe24c847a5c10786cf..68a8e676a71bb7e81d8134c75f77c05289ac4e62 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 2f1760778eaff686fdf26e03d05a0996e771ed2d..60e846ce94aafbbd98bf17948acfda983420f769 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 bdd549491fac6822878157337aa5dc4d09ef53f2..9422adafa4dbd08333fb027481c2323c1d256872 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 9f92967a0436d7118c20cf29bfb8844dba2699b1..47c46d04295dacb5373d352004286dcf1df8d3f9 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 6b83ef0582f26b04f37f8b78ef5a3121b3f3a326..37a92292688fe679502eaa6be87ae5e2ce09eb03 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 9caaee8e346d6a1706fba5d85f9140624394c1ed..2bd0bbf259aef2d9fc6c084f1da3c72379927026 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 2a9230614399a48916e74cfb74bd4625686c7bcb..0e18d6d7a93b8054677b18cbe8d0d1e914718452 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 dc07dc10ad0de56ebe0bfad8d65e82f0f5d627ef..f7637d33eafbc01c0ec8770eb9d900ddd8bca64b 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 dfd60136f95374fbe3e112a6051a4854b61ac4ec..12767334539540f92889031d8682d2487acc28bd 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 c66a06c51b46671cfe20194ac8ff545683c7a7e3..ba6559d8106fb5f9dfefc2cd0da8540c86ffdd68 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 221eee6f152873e2e6c52ca4a89ac1d65118843b..2b5ddc4158b51df484a9df6e1724b9ef387860b6 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 d7525414ad01c246c21e908666064d6db4233901..dd49a64536aea1cecc98e709c923e1d7d69e23f6 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.