diff --git a/styles/src/component/icon_button.ts b/styles/src/component/icon_button.ts
index 4664928d55..79891c2477 100644
--- a/styles/src/component/icon_button.ts
+++ b/styles/src/component/icon_button.ts
@@ -11,9 +11,9 @@ export type Margin = {
 
 interface IconButtonOptions {
     layer?:
-    | ColorScheme["lowest"]
-    | ColorScheme["middle"]
-    | ColorScheme["highest"]
+        | ColorScheme["lowest"]
+        | ColorScheme["middle"]
+        | ColorScheme["highest"]
     color?: keyof ColorScheme["lowest"]
     margin?: Partial<Margin>
 }
diff --git a/styles/src/component/text_button.ts b/styles/src/component/text_button.ts
index 64a91de7b0..477c2515e3 100644
--- a/styles/src/component/text_button.ts
+++ b/styles/src/component/text_button.ts
@@ -10,9 +10,9 @@ import { Margin } from "./icon_button"
 
 interface TextButtonOptions {
     layer?:
-    | ColorScheme["lowest"]
-    | ColorScheme["middle"]
-    | ColorScheme["highest"]
+        | ColorScheme["lowest"]
+        | ColorScheme["middle"]
+        | ColorScheme["highest"]
     color?: keyof ColorScheme["lowest"]
     margin?: Partial<Margin>
     text_properties?: TextProperties
diff --git a/styles/src/element/interactive.ts b/styles/src/element/interactive.ts
index 99b8996aef..59ccff40f7 100644
--- a/styles/src/element/interactive.ts
+++ b/styles/src/element/interactive.ts
@@ -43,55 +43,55 @@ export function interactive<T extends object>({
 }: InteractiveProps<T>): Interactive<T> {
     if (!base && !state.default) throw new Error(NO_DEFAULT_OR_BASE_ERROR)
 
-    let defaultState: T
+    let default_state: T
 
     if (state.default && base) {
-        defaultState = merge(base, state.default) as T
+        default_state = merge(base, state.default) as T
     } else {
-        defaultState = base ? base : (state.default as T)
+        default_state = base ? base : (state.default as T)
     }
 
-    const interactiveObj: Interactive<T> = {
-        default: defaultState,
+    const interactive_obj: Interactive<T> = {
+        default: default_state,
     }
 
-    let stateCount = 0
+    let state_count = 0
 
     if (state.hovered !== undefined) {
-        interactiveObj.hovered = merge(
-            interactiveObj.default,
+        interactive_obj.hovered = merge(
+            interactive_obj.default,
             state.hovered
         ) as T
-        stateCount++
+        state_count++
     }
 
     if (state.clicked !== undefined) {
-        interactiveObj.clicked = merge(
-            interactiveObj.default,
+        interactive_obj.clicked = merge(
+            interactive_obj.default,
             state.clicked
         ) as T
-        stateCount++
+        state_count++
     }
 
     if (state.selected !== undefined) {
-        interactiveObj.selected = merge(
-            interactiveObj.default,
+        interactive_obj.selected = merge(
+            interactive_obj.default,
             state.selected
         ) as T
-        stateCount++
+        state_count++
     }
 
     if (state.disabled !== undefined) {
-        interactiveObj.disabled = merge(
-            interactiveObj.default,
+        interactive_obj.disabled = merge(
+            interactive_obj.default,
             state.disabled
         ) as T
-        stateCount++
+        state_count++
     }
 
-    if (stateCount < 1) {
+    if (state_count < 1) {
         throw new Error(NOT_ENOUGH_STATES_ERROR)
     }
 
-    return interactiveObj
+    return interactive_obj
 }
diff --git a/styles/src/element/toggle.ts b/styles/src/element/toggle.ts
index ead8f1e824..c3cde46d65 100644
--- a/styles/src/element/toggle.ts
+++ b/styles/src/element/toggle.ts
@@ -35,13 +35,13 @@ export function toggleable<T extends object>(
     if (!base && !state.inactive) throw new Error(NO_INACTIVE_OR_BASE_ERROR)
     if (!state.active) throw new Error(NO_ACTIVE_ERROR)
 
-    const inactiveState = base
+    const inactive_state = base
         ? ((state.inactive ? merge(base, state.inactive) : base) as T)
         : (state.inactive as T)
 
-    const toggleObj: Toggleable<T> = {
-        inactive: inactiveState,
+    const toggle_obj: Toggleable<T> = {
+        inactive: inactive_state,
         active: merge(base ?? {}, state.active) as T,
     }
-    return toggleObj
+    return toggle_obj
 }
diff --git a/styles/src/style_tree/assistant.ts b/styles/src/style_tree/assistant.ts
index 7003e0765c..fbbfbc4cf1 100644
--- a/styles/src/style_tree/assistant.ts
+++ b/styles/src/style_tree/assistant.ts
@@ -10,11 +10,11 @@ export default function assistant(colorScheme: ColorScheme): any {
             background: editor(colorScheme).background,
             padding: { left: 12 },
         },
-        messageHeader: {
+        message_header: {
             margin: { bottom: 6, top: 6 },
             background: editor(colorScheme).background,
         },
-        hamburgerButton: interactive({
+        hamburger_button: interactive({
             base: {
                 icon: {
                     color: foreground(layer, "variant"),
@@ -36,7 +36,7 @@ export default function assistant(colorScheme: ColorScheme): any {
                 },
             },
         }),
-        splitButton: interactive({
+        split_button: interactive({
             base: {
                 icon: {
                     color: foreground(layer, "variant"),
@@ -58,7 +58,7 @@ export default function assistant(colorScheme: ColorScheme): any {
                 },
             },
         }),
-        quoteButton: interactive({
+        quote_button: interactive({
             base: {
                 icon: {
                     color: foreground(layer, "variant"),
@@ -80,7 +80,7 @@ export default function assistant(colorScheme: ColorScheme): any {
                 },
             },
         }),
-        assistButton: interactive({
+        assist_button: interactive({
             base: {
                 icon: {
                     color: foreground(layer, "variant"),
@@ -102,7 +102,7 @@ export default function assistant(colorScheme: ColorScheme): any {
                 },
             },
         }),
-        zoomInButton: interactive({
+        zoom_in_button: interactive({
             base: {
                 icon: {
                     color: foreground(layer, "variant"),
@@ -124,7 +124,7 @@ export default function assistant(colorScheme: ColorScheme): any {
                 },
             },
         }),
-        zoomOutButton: interactive({
+        zoom_out_button: interactive({
             base: {
                 icon: {
                     color: foreground(layer, "variant"),
@@ -146,7 +146,7 @@ export default function assistant(colorScheme: ColorScheme): any {
                 },
             },
         }),
-        plusButton: interactive({
+        plus_button: interactive({
             base: {
                 icon: {
                     color: foreground(layer, "variant"),
@@ -171,7 +171,7 @@ export default function assistant(colorScheme: ColorScheme): any {
         title: {
             ...text(layer, "sans", "default", { size: "sm" }),
         },
-        savedConversation: {
+        saved_conversation: {
             container: interactive({
                 base: {
                     background: background(layer, "on"),
@@ -195,7 +195,7 @@ export default function assistant(colorScheme: ColorScheme): any {
                 }),
             },
         },
-        userSender: {
+        user_sender: {
             default: {
                 ...text(layer, "sans", "default", {
                     size: "sm",
@@ -203,7 +203,7 @@ export default function assistant(colorScheme: ColorScheme): any {
                 }),
             },
         },
-        assistantSender: {
+        assistant_sender: {
             default: {
                 ...text(layer, "sans", "accent", {
                     size: "sm",
@@ -211,7 +211,7 @@ export default function assistant(colorScheme: ColorScheme): any {
                 }),
             },
         },
-        systemSender: {
+        system_sender: {
             default: {
                 ...text(layer, "sans", "variant", {
                     size: "sm",
@@ -219,7 +219,7 @@ export default function assistant(colorScheme: ColorScheme): any {
                 }),
             },
         },
-        sentAt: {
+        sent_at: {
             margin: { top: 2, left: 8 },
             ...text(layer, "sans", "default", { size: "2xs" }),
         },
@@ -228,7 +228,7 @@ export default function assistant(colorScheme: ColorScheme): any {
                 background: background(layer, "on"),
                 margin: { left: 12, right: 12, top: 12 },
                 padding: 4,
-                cornerRadius: 4,
+                corner_radius: 4,
                 ...text(layer, "sans", "default", { size: "xs" }),
             },
             state: {
@@ -238,28 +238,28 @@ export default function assistant(colorScheme: ColorScheme): any {
                 },
             },
         }),
-        remainingTokens: {
+        remaining_tokens: {
             background: background(layer, "on"),
             margin: { top: 12, right: 24 },
             padding: 4,
-            cornerRadius: 4,
+            corner_radius: 4,
             ...text(layer, "sans", "positive", { size: "xs" }),
         },
-        noRemainingTokens: {
+        no_remaining_tokens: {
             background: background(layer, "on"),
             margin: { top: 12, right: 24 },
             padding: 4,
-            cornerRadius: 4,
+            corner_radius: 4,
             ...text(layer, "sans", "negative", { size: "xs" }),
         },
-        errorIcon: {
+        error_icon: {
             margin: { left: 8 },
             color: foreground(layer, "negative"),
             width: 12,
         },
-        apiKeyEditor: {
+        api_key_editor: {
             background: background(layer, "on"),
-            cornerRadius: 6,
+            corner_radius: 6,
             text: text(layer, "mono", "on"),
             placeholderText: text(layer, "mono", "on", "disabled", {
                 size: "xs",
@@ -273,7 +273,7 @@ export default function assistant(colorScheme: ColorScheme): any {
                 top: 4,
             },
         },
-        apiKeyPrompt: {
+        api_key_prompt: {
             padding: 10,
             ...text(layer, "sans", "default", { size: "xs" }),
         },
diff --git a/styles/src/style_tree/command_palette.ts b/styles/src/style_tree/command_palette.ts
index 988a1c949b..9198f87299 100644
--- a/styles/src/style_tree/command_palette.ts
+++ b/styles/src/style_tree/command_palette.ts
@@ -9,7 +9,7 @@ export default function command_palette(colorScheme: ColorScheme): any {
     const key = toggleable({
         base: {
             text: text(layer, "mono", "variant", "default", { size: "xs" }),
-            cornerRadius: 2,
+            corner_radius: 2,
             background: background(layer, "on"),
             padding: {
                 top: 1,
@@ -32,7 +32,7 @@ export default function command_palette(colorScheme: ColorScheme): any {
     })
 
     return {
-        keystrokeSpacing: 8,
+        keystroke_spacing: 8,
         // TODO: This should be a Toggle<ContainedText> on the rust side so we don't have to do this
         key: {
             inactive: { ...key.inactive },
diff --git a/styles/src/style_tree/components.ts b/styles/src/style_tree/components.ts
index 6f69023d12..c0b8e9462f 100644
--- a/styles/src/style_tree/components.ts
+++ b/styles/src/style_tree/components.ts
@@ -1,7 +1,11 @@
-import { fontFamilies, fontSizes, FontWeight } from "../common"
+import {
+    fontFamilies as font_families,
+    fontSizes as font_sizes,
+    FontWeight,
+} from "../common"
 import { Layer, Styles, StyleSets, Style } from "../theme/color_scheme"
 
-function isStyleSet(key: any): key is StyleSets {
+function is_style_set(key: any): key is StyleSets {
     return [
         "base",
         "variant",
@@ -13,7 +17,7 @@ function isStyleSet(key: any): key is StyleSets {
     ].includes(key)
 }
 
-function isStyle(key: any): key is Styles {
+function is_style(key: any): key is Styles {
     return [
         "default",
         "active",
@@ -23,78 +27,70 @@ function isStyle(key: any): key is Styles {
         "inverted",
     ].includes(key)
 }
-function getStyle(
+function get_style(
     layer: Layer,
-    possibleStyleSetOrStyle?: any,
-    possibleStyle?: any
+    possible_style_set_or_style?: any,
+    possible_style?: any
 ): Style {
-    let styleSet: StyleSets = "base"
+    let style_set: StyleSets = "base"
     let style: Styles = "default"
-    if (isStyleSet(possibleStyleSetOrStyle)) {
-        styleSet = possibleStyleSetOrStyle
-    } else if (isStyle(possibleStyleSetOrStyle)) {
-        style = possibleStyleSetOrStyle
+    if (is_style_set(possible_style_set_or_style)) {
+        style_set = possible_style_set_or_style
+    } else if (is_style(possible_style_set_or_style)) {
+        style = possible_style_set_or_style
     }
 
-    if (isStyle(possibleStyle)) {
-        style = possibleStyle
+    if (is_style(possible_style)) {
+        style = possible_style
     }
 
-    return layer[styleSet][style]
+    return layer[style_set][style]
 }
 
 export function background(layer: Layer, style?: Styles): string
 export function background(
     layer: Layer,
-    styleSet?: StyleSets,
+    style_set?: StyleSets,
     style?: Styles
 ): string
 export function background(
     layer: Layer,
-    styleSetOrStyles?: StyleSets | Styles,
+    style_set_or_styles?: StyleSets | Styles,
     style?: Styles
 ): string {
-    return getStyle(layer, styleSetOrStyles, style).background
+    return get_style(layer, style_set_or_styles, style).background
 }
 
-export function borderColor(layer: Layer, style?: Styles): string
-export function borderColor(
+export function border_color(layer: Layer, style?: Styles): string
+export function border_color(
     layer: Layer,
-    styleSet?: StyleSets,
+    style_set?: StyleSets,
     style?: Styles
 ): string
-export function borderColor(
+export function border_color(
     layer: Layer,
-    styleSetOrStyles?: StyleSets | Styles,
+    style_set_or_styles?: StyleSets | Styles,
     style?: Styles
 ): string {
-    return getStyle(layer, styleSetOrStyles, style).border
+    return get_style(layer, style_set_or_styles, style).border
 }
 
 export function foreground(layer: Layer, style?: Styles): string
 export function foreground(
     layer: Layer,
-    styleSet?: StyleSets,
+    style_set?: StyleSets,
     style?: Styles
 ): string
 export function foreground(
     layer: Layer,
-    styleSetOrStyles?: StyleSets | Styles,
+    style_set_or_styles?: StyleSets | Styles,
     style?: Styles
 ): string {
-    return getStyle(layer, styleSetOrStyles, style).foreground
-}
-
-interface Text extends Object {
-    family: keyof typeof fontFamilies
-    color: string
-    size: number
-    weight?: FontWeight
-    underline?: boolean
+    return get_style(layer, style_set_or_styles, style).foreground
 }
 
 export interface TextStyle extends Object {
-    family: keyof typeof fontFamilies
+    family: keyof typeof font_families
     color: string
     size: number
     weight?: FontWeight
@@ -102,7 +98,7 @@ export interface TextStyle extends Object {
 }
 
 export interface TextProperties {
-    size?: keyof typeof fontSizes
+    size?: keyof typeof font_sizes
     weight?: FontWeight
     underline?: boolean
     color?: string
@@ -182,49 +178,53 @@ interface FontFeatures {
 
 export function text(
     layer: Layer,
-    fontFamily: keyof typeof fontFamilies,
-    styleSet: StyleSets,
+    font_family: keyof typeof font_families,
+    style_set: StyleSets,
     style: Styles,
     properties?: TextProperties
-): Text
+): TextStyle
 export function text(
     layer: Layer,
-    fontFamily: keyof typeof fontFamilies,
-    styleSet: StyleSets,
+    font_family: keyof typeof font_families,
+    style_set: StyleSets,
     properties?: TextProperties
-): Text
+): TextStyle
 export function text(
     layer: Layer,
-    fontFamily: keyof typeof fontFamilies,
+    font_family: keyof typeof font_families,
     style: Styles,
     properties?: TextProperties
-): Text
+): TextStyle
 export function text(
     layer: Layer,
-    fontFamily: keyof typeof fontFamilies,
+    font_family: keyof typeof font_families,
     properties?: TextProperties
-): Text
+): TextStyle
 export function text(
     layer: Layer,
-    fontFamily: keyof typeof fontFamilies,
-    styleSetStyleOrProperties?: StyleSets | Styles | TextProperties,
-    styleOrProperties?: Styles | TextProperties,
+    font_family: keyof typeof font_families,
+    style_set_style_or_properties?: StyleSets | Styles | TextProperties,
+    style_or_properties?: Styles | TextProperties,
     properties?: TextProperties
 ) {
-    const style = getStyle(layer, styleSetStyleOrProperties, styleOrProperties)
+    const style = get_style(
+        layer,
+        style_set_style_or_properties,
+        style_or_properties
+    )
 
-    if (typeof styleSetStyleOrProperties === "object") {
-        properties = styleSetStyleOrProperties
+    if (typeof style_set_style_or_properties === "object") {
+        properties = style_set_style_or_properties
     }
-    if (typeof styleOrProperties === "object") {
-        properties = styleOrProperties
+    if (typeof style_or_properties === "object") {
+        properties = style_or_properties
     }
 
-    const size = fontSizes[properties?.size || "sm"]
+    const size = font_sizes[properties?.size || "sm"]
     const color = properties?.color || style.foreground
 
     return {
-        family: fontFamilies[fontFamily],
+        family: font_families[font_family],
         ...properties,
         color,
         size,
@@ -252,13 +252,13 @@ export interface BorderProperties {
 
 export function border(
     layer: Layer,
-    styleSet: StyleSets,
+    style_set: StyleSets,
     style: Styles,
     properties?: BorderProperties
 ): Border
 export function border(
     layer: Layer,
-    styleSet: StyleSets,
+    style_set: StyleSets,
     properties?: BorderProperties
 ): Border
 export function border(
@@ -269,17 +269,17 @@ export function border(
 export function border(layer: Layer, properties?: BorderProperties): Border
 export function border(
     layer: Layer,
-    styleSetStyleOrProperties?: StyleSets | Styles | BorderProperties,
-    styleOrProperties?: Styles | BorderProperties,
+    style_set_or_properties?: StyleSets | Styles | BorderProperties,
+    style_or_properties?: Styles | BorderProperties,
     properties?: BorderProperties
 ): Border {
-    const style = getStyle(layer, styleSetStyleOrProperties, styleOrProperties)
+    const style = get_style(layer, style_set_or_properties, style_or_properties)
 
-    if (typeof styleSetStyleOrProperties === "object") {
-        properties = styleSetStyleOrProperties
+    if (typeof style_set_or_properties === "object") {
+        properties = style_set_or_properties
     }
-    if (typeof styleOrProperties === "object") {
-        properties = styleOrProperties
+    if (typeof style_or_properties === "object") {
+        properties = style_or_properties
     }
 
     return {
diff --git a/styles/src/style_tree/contact_finder.ts b/styles/src/style_tree/contact_finder.ts
index 239b4b5004..f68ce06d35 100644
--- a/styles/src/style_tree/contact_finder.ts
+++ b/styles/src/style_tree/contact_finder.ts
@@ -2,25 +2,25 @@ import picker from "./picker"
 import { ColorScheme } from "../theme/color_scheme"
 import { background, border, foreground, text } from "./components"
 
-export default function contact_finder(colorScheme: ColorScheme): any {
-    const layer = colorScheme.middle
+export default function contact_finder(theme: ColorScheme): any {
+    const layer = theme.middle
 
-    const sideMargin = 6
-    const contactButton = {
+    const side_margin = 6
+    const contact_button = {
         background: background(layer, "variant"),
         color: foreground(layer, "variant"),
-        iconWidth: 8,
-        buttonWidth: 16,
-        cornerRadius: 8,
+        icon_width: 8,
+        button_width: 16,
+        corner_radius: 8,
     }
 
-    const pickerStyle = picker(colorScheme)
-    const pickerInput = {
+    const picker_style = picker(theme)
+    const picker_input = {
         background: background(layer, "on"),
-        cornerRadius: 6,
+        corner_radius: 6,
         text: text(layer, "mono"),
-        placeholderText: text(layer, "mono", "on", "disabled", { size: "xs" }),
-        selection: colorScheme.players[0],
+        placeholder_text: text(layer, "mono", "on", "disabled", { size: "xs" }),
+        selection: theme.players[0],
         border: border(layer),
         padding: {
             bottom: 4,
@@ -29,40 +29,40 @@ export default function contact_finder(colorScheme: ColorScheme): any {
             top: 4,
         },
         margin: {
-            left: sideMargin,
-            right: sideMargin,
+            left: side_margin,
+            right: side_margin,
         },
     }
 
     return {
         picker: {
-            emptyContainer: {},
+            empty_container: {},
             item: {
-                ...pickerStyle.item,
-                margin: { left: sideMargin, right: sideMargin },
+                ...picker_style.item,
+                margin: { left: side_margin, right: side_margin },
             },
-            noMatches: pickerStyle.noMatches,
-            inputEditor: pickerInput,
-            emptyInputEditor: pickerInput,
+            no_matches: picker_style.noMatches,
+            input_editor: picker_input,
+            empty_input_editor: picker_input,
         },
-        rowHeight: 28,
-        contactAvatar: {
-            cornerRadius: 10,
+        row_height: 28,
+        contact_avatar: {
+            corner_radius: 10,
             width: 18,
         },
-        contactUsername: {
+        contact_username: {
             padding: {
                 left: 8,
             },
         },
-        contactButton: {
-            ...contactButton,
+        contact_button: {
+            ...contact_button,
             hover: {
                 background: background(layer, "variant", "hovered"),
             },
         },
-        disabledContactButton: {
-            ...contactButton,
+        disabled_contact_button: {
+            ...contact_button,
             background: background(layer, "disabled"),
             color: foreground(layer, "disabled"),
         },
diff --git a/styles/src/style_tree/contact_list.ts b/styles/src/style_tree/contact_list.ts
index fb6b665a14..b3b89b7e42 100644
--- a/styles/src/style_tree/contact_list.ts
+++ b/styles/src/style_tree/contact_list.ts
@@ -1,24 +1,30 @@
 import { ColorScheme } from "../theme/color_scheme"
-import { background, border, borderColor, foreground, text } from "./components"
+import {
+    background,
+    border,
+    border_color,
+    foreground,
+    text,
+} from "./components"
 import { interactive, toggleable } from "../element"
-export default function contacts_panel(colorScheme: ColorScheme): any {
+export default function contacts_panel(theme: ColorScheme): any {
     const nameMargin = 8
     const sidePadding = 12
 
-    const layer = colorScheme.middle
+    const layer = theme.middle
 
     const contactButton = {
         background: background(layer, "on"),
         color: foreground(layer, "on"),
-        iconWidth: 8,
-        buttonWidth: 16,
-        cornerRadius: 8,
+        icon_width: 8,
+        button_width: 16,
+        corner_radius: 8,
     }
     const projectRow = {
-        guestAvatarSpacing: 4,
+        guest_avatar_spacing: 4,
         height: 24,
-        guestAvatar: {
-            cornerRadius: 8,
+        guest_avatar: {
+            corner_radius: 8,
             width: 14,
         },
         name: {
@@ -43,14 +49,14 @@ export default function contacts_panel(colorScheme: ColorScheme): any {
     return {
         background: background(layer),
         padding: { top: 12 },
-        userQueryEditor: {
+        user_query_editor: {
             background: background(layer, "on"),
-            cornerRadius: 6,
+            corner_radius: 6,
             text: text(layer, "mono", "on"),
-            placeholderText: text(layer, "mono", "on", "disabled", {
+            placeholder_text: text(layer, "mono", "on", "disabled", {
                 size: "xs",
             }),
-            selection: colorScheme.players[0],
+            selection: theme.players[0],
             border: border(layer, "on"),
             padding: {
                 bottom: 4,
@@ -62,16 +68,16 @@ export default function contacts_panel(colorScheme: ColorScheme): any {
                 left: 6,
             },
         },
-        userQueryEditorHeight: 33,
-        addContactButton: {
+        user_query_editor_height: 33,
+        add_contact_button: {
             margin: { left: 6, right: 12 },
             color: foreground(layer, "on"),
-            buttonWidth: 28,
-            iconWidth: 16,
+            button_width: 28,
+            icon_width: 16,
         },
-        rowHeight: 28,
-        sectionIconSize: 8,
-        headerRow: toggleable({
+        row_height: 28,
+        section_icon_size: 8,
+        header_row: toggleable({
             base: interactive({
                 base: {
                     ...text(layer, "mono", { size: "sm" }),
@@ -106,11 +112,11 @@ export default function contacts_panel(colorScheme: ColorScheme): any {
                 },
             },
         }),
-        leaveCall: interactive({
+        leave_call: interactive({
             base: {
                 background: background(layer),
                 border: border(layer),
-                cornerRadius: 6,
+                corner_radius: 6,
                 margin: {
                     top: 1,
                 },
@@ -130,7 +136,7 @@ export default function contacts_panel(colorScheme: ColorScheme): any {
                 },
             },
         }),
-        contactRow: {
+        contact_row: {
             inactive: {
                 default: {
                     padding: {
@@ -149,31 +155,30 @@ export default function contacts_panel(colorScheme: ColorScheme): any {
                 },
             },
         },
-
-        contactAvatar: {
-            cornerRadius: 10,
+        contact_avatar: {
+            corner_radius: 10,
             width: 18,
         },
-        contactStatusFree: {
-            cornerRadius: 4,
+        contact_status_free: {
+            corner_radius: 4,
             padding: 4,
             margin: { top: 12, left: 12 },
             background: foreground(layer, "positive"),
         },
-        contactStatusBusy: {
-            cornerRadius: 4,
+        contact_status_busy: {
+            corner_radius: 4,
             padding: 4,
             margin: { top: 12, left: 12 },
             background: foreground(layer, "negative"),
         },
-        contactUsername: {
+        contact_username: {
             ...text(layer, "mono", { size: "sm" }),
             margin: {
                 left: nameMargin,
             },
         },
-        contactButtonSpacing: nameMargin,
-        contactButton: interactive({
+        contact_button_spacing: nameMargin,
+        contact_button: interactive({
             base: { ...contactButton },
             state: {
                 hovered: {
@@ -181,35 +186,35 @@ export default function contacts_panel(colorScheme: ColorScheme): any {
                 },
             },
         }),
-        disabledButton: {
+        disabled_button: {
             ...contactButton,
             background: background(layer, "on"),
             color: foreground(layer, "on"),
         },
-        callingIndicator: {
+        calling_indicator: {
             ...text(layer, "mono", "variant", { size: "xs" }),
         },
-        treeBranch: toggleable({
+        tree_branch: toggleable({
             base: interactive({
                 base: {
-                    color: borderColor(layer),
+                    color: border_color(layer),
                     width: 1,
                 },
                 state: {
                     hovered: {
-                        color: borderColor(layer),
+                        color: border_color(layer),
                     },
                 },
             }),
             state: {
                 active: {
                     default: {
-                        color: borderColor(layer),
+                        color: border_color(layer),
                     },
                 },
             },
         }),
-        projectRow: toggleable({
+        project_row: toggleable({
             base: interactive({
                 base: {
                     ...projectRow,
diff --git a/styles/src/style_tree/contact_notification.ts b/styles/src/style_tree/contact_notification.ts
index 6ae2dc5d20..71467f6584 100644
--- a/styles/src/style_tree/contact_notification.ts
+++ b/styles/src/style_tree/contact_notification.ts
@@ -4,48 +4,47 @@ import { interactive } from "../element"
 const avatarSize = 12
 const headerPadding = 8
 
-export default function contact_notification(colorScheme: ColorScheme): any {
-    const layer = colorScheme.lowest
+export default function contact_notification(theme: ColorScheme): any {
     return {
-        headerAvatar: {
+        header_avatar: {
             height: avatarSize,
             width: avatarSize,
-            cornerRadius: 6,
+            corner_radius: 6,
         },
-        headerMessage: {
-            ...text(layer, "sans", { size: "xs" }),
+        header_message: {
+            ...text(theme.lowest, "sans", { size: "xs" }),
             margin: { left: headerPadding, right: headerPadding },
         },
-        headerHeight: 18,
-        bodyMessage: {
-            ...text(layer, "sans", { size: "xs" }),
+        header_height: 18,
+        body_message: {
+            ...text(theme.lowest, "sans", { size: "xs" }),
             margin: { left: avatarSize + headerPadding, top: 6, bottom: 6 },
         },
         button: interactive({
             base: {
-                ...text(layer, "sans", "on", { size: "xs" }),
-                background: background(layer, "on"),
+                ...text(theme.lowest, "sans", "on", { size: "xs" }),
+                background: background(theme.lowest, "on"),
                 padding: 4,
-                cornerRadius: 6,
+                corner_radius: 6,
                 margin: { left: 6 },
             },
 
             state: {
                 hovered: {
-                    background: background(layer, "on", "hovered"),
+                    background: background(theme.lowest, "on", "hovered"),
                 },
             },
         }),
 
-        dismissButton: {
+        dismiss_button: {
             default: {
-                color: foreground(layer, "variant"),
-                iconWidth: 8,
+                color: foreground(theme.lowest, "variant"),
+                icon_width: 8,
                 iconHeight: 8,
-                buttonWidth: 8,
+                button_width: 8,
                 buttonHeight: 8,
                 hover: {
-                    color: foreground(layer, "hovered"),
+                    color: foreground(theme.lowest, "hovered"),
                 },
             },
         },
diff --git a/styles/src/style_tree/contacts_popover.ts b/styles/src/style_tree/contacts_popover.ts
index 0c9d1a47eb..85c7e7d9f5 100644
--- a/styles/src/style_tree/contacts_popover.ts
+++ b/styles/src/style_tree/contacts_popover.ts
@@ -5,7 +5,7 @@ export default function contacts_popover(colorScheme: ColorScheme): any {
     const layer = colorScheme.middle
     return {
         background: background(layer),
-        cornerRadius: 6,
+        corner_radius: 6,
         padding: { top: 6, bottom: 6 },
         shadow: colorScheme.popoverShadow,
         border: border(layer),
diff --git a/styles/src/style_tree/context_menu.ts b/styles/src/style_tree/context_menu.ts
index 52795be796..69ab7de496 100644
--- a/styles/src/style_tree/context_menu.ts
+++ b/styles/src/style_tree/context_menu.ts
@@ -1,12 +1,12 @@
 import { ColorScheme } from "../theme/color_scheme"
-import { background, border, borderColor, text } from "./components"
+import { background, border, border_color, text } from "./components"
 import { interactive, toggleable } from "../element"
 
 export default function context_menu(colorScheme: ColorScheme): any {
     const layer = colorScheme.middle
     return {
         background: background(layer),
-        cornerRadius: 10,
+        corner_radius: 10,
         padding: 4,
         shadow: colorScheme.popoverShadow,
         border: border(layer),
@@ -15,9 +15,9 @@ export default function context_menu(colorScheme: ColorScheme): any {
             base: interactive({
                 base: {
                     iconSpacing: 8,
-                    iconWidth: 14,
+                    icon_width: 14,
                     padding: { left: 6, right: 6, top: 2, bottom: 2 },
-                    cornerRadius: 6,
+                    corner_radius: 6,
                     label: text(layer, "sans", { size: "sm" }),
                     keystroke: {
                         ...text(layer, "sans", "variant", {
@@ -60,7 +60,7 @@ export default function context_menu(colorScheme: ColorScheme): any {
         }),
 
         separator: {
-            background: borderColor(layer),
+            background: border_color(layer),
             margin: { top: 2, bottom: 2 },
         },
     }
diff --git a/styles/src/style_tree/copilot.ts b/styles/src/style_tree/copilot.ts
index cd2bbe0584..9f80f6f34c 100644
--- a/styles/src/style_tree/copilot.ts
+++ b/styles/src/style_tree/copilot.ts
@@ -12,7 +12,7 @@ export default function copilot(colorScheme: ColorScheme): any {
             base: {
                 background: background(layer),
                 border: border(layer, "default"),
-                cornerRadius: 4,
+                corner_radius: 4,
                 margin: {
                     top: 4,
                     bottom: 4,
@@ -46,7 +46,7 @@ export default function copilot(colorScheme: ColorScheme): any {
                     12
                 ),
                 container: {
-                    cornerRadius: 6,
+                    corner_radius: 6,
                     padding: { left: 6 },
                 },
             },
@@ -93,7 +93,7 @@ export default function copilot(colorScheme: ColorScheme): any {
                         8
                     ),
                     container: {
-                        cornerRadius: 2,
+                        corner_radius: 2,
                         padding: {
                             top: 4,
                             bottom: 4,
@@ -246,7 +246,7 @@ export default function copilot(colorScheme: ColorScheme): any {
                     }),
                     border: border(layer, "warning"),
                     background: background(layer, "warning"),
-                    cornerRadius: 2,
+                    corner_radius: 2,
                     padding: {
                         top: 4,
                         left: 4,
diff --git a/styles/src/style_tree/editor.ts b/styles/src/style_tree/editor.ts
index 9bf4605580..14df1b0bb3 100644
--- a/styles/src/style_tree/editor.ts
+++ b/styles/src/style_tree/editor.ts
@@ -1,6 +1,12 @@
 import { withOpacity } from "../theme/color"
 import { ColorScheme, Layer, StyleSets } from "../theme/color_scheme"
-import { background, border, borderColor, foreground, text } from "./components"
+import {
+    background,
+    border,
+    border_color,
+    foreground,
+    text,
+} from "./components"
 import hoverPopover from "./hover_popover"
 
 import { buildSyntax } from "../theme/syntax"
@@ -12,7 +18,7 @@ export default function editor(colorScheme: ColorScheme): any {
     const layer = colorScheme.highest
 
     const autocompleteItem = {
-        cornerRadius: 6,
+        corner_radius: 6,
         padding: {
             bottom: 2,
             left: 6,
@@ -111,7 +117,7 @@ export default function editor(colorScheme: ColorScheme): any {
             }),
             ellipses: {
                 textColor: colorScheme.ramps.neutral(0.71).hex(),
-                cornerRadiusFactor: 0.15,
+                corner_radiusFactor: 0.15,
                 background: {
                     // Copied from hover_popover highlight
                     default: {
@@ -141,7 +147,7 @@ export default function editor(colorScheme: ColorScheme): any {
                 : colorScheme.ramps.green(0.5).hex(),
             removedWidthEm: 0.275,
             widthEm: 0.15,
-            cornerRadius: 0.05,
+            corner_radius: 0.05,
         },
         /** Highlights matching occurrences of what is under the cursor
          * as well as matched brackets
@@ -174,7 +180,7 @@ export default function editor(colorScheme: ColorScheme): any {
         ],
         autocomplete: {
             background: background(colorScheme.middle),
-            cornerRadius: 8,
+            corner_radius: 8,
             padding: 4,
             margin: {
                 left: -14,
@@ -204,7 +210,7 @@ export default function editor(colorScheme: ColorScheme): any {
         },
         diagnosticHeader: {
             background: background(colorScheme.middle),
-            iconWidthFactor: 1.5,
+            icon_widthFactor: 1.5,
             textScaleFactor: 0.857,
             border: border(colorScheme.middle, {
                 bottom: true,
@@ -257,9 +263,9 @@ export default function editor(colorScheme: ColorScheme): any {
         jumpIcon: interactive({
             base: {
                 color: foreground(layer, "on"),
-                iconWidth: 20,
-                buttonWidth: 20,
-                cornerRadius: 6,
+                icon_width: 20,
+                button_width: 20,
+                corner_radius: 6,
                 padding: {
                     top: 6,
                     bottom: 6,
@@ -284,7 +290,7 @@ export default function editor(colorScheme: ColorScheme): any {
                 background: withOpacity(background(layer, "inverted"), 0.3),
                 border: {
                     width: 1,
-                    color: borderColor(layer, "variant"),
+                    color: border_color(layer, "variant"),
                     top: false,
                     right: true,
                     left: true,
@@ -306,7 +312,7 @@ export default function editor(colorScheme: ColorScheme): any {
         compositionMark: {
             underline: {
                 thickness: 1.0,
-                color: borderColor(layer),
+                color: border_color(layer),
             },
         },
         syntax,
diff --git a/styles/src/style_tree/feedback.ts b/styles/src/style_tree/feedback.ts
index 88f3cebc37..040c8994be 100644
--- a/styles/src/style_tree/feedback.ts
+++ b/styles/src/style_tree/feedback.ts
@@ -10,7 +10,7 @@ export default function feedback(colorScheme: ColorScheme): any {
             base: {
                 ...text(layer, "mono", "on"),
                 background: background(layer, "on"),
-                cornerRadius: 6,
+                corner_radius: 6,
                 border: border(layer, "on"),
                 margin: {
                     right: 4,
diff --git a/styles/src/style_tree/hover_popover.ts b/styles/src/style_tree/hover_popover.ts
index 68eba19494..42c4f72a26 100644
--- a/styles/src/style_tree/hover_popover.ts
+++ b/styles/src/style_tree/hover_popover.ts
@@ -5,7 +5,7 @@ export default function hover_popover(colorScheme: ColorScheme): any {
     const layer = colorScheme.middle
     const baseContainer = {
         background: background(layer),
-        cornerRadius: 8,
+        corner_radius: 8,
         padding: {
             left: 8,
             right: 8,
diff --git a/styles/src/style_tree/incoming_call_notification.ts b/styles/src/style_tree/incoming_call_notification.ts
index 9a6d400017..2d76da7de8 100644
--- a/styles/src/style_tree/incoming_call_notification.ts
+++ b/styles/src/style_tree/incoming_call_notification.ts
@@ -16,7 +16,7 @@ export default function incoming_call_notification(
         callerAvatar: {
             height: avatarSize,
             width: avatarSize,
-            cornerRadius: avatarSize / 2,
+            corner_radius: avatarSize / 2,
         },
         callerMetadata: {
             margin: { left: 10 },
@@ -33,7 +33,7 @@ export default function incoming_call_notification(
             ...text(layer, "sans", "variant", { size: "xs", weight: "bold" }),
             margin: { top: -3 },
         },
-        buttonWidth: 96,
+        button_width: 96,
         acceptButton: {
             background: background(layer, "accent"),
             border: border(layer, { left: true, bottom: true }),
diff --git a/styles/src/style_tree/picker.ts b/styles/src/style_tree/picker.ts
index 417c1faea4..99bd716c16 100644
--- a/styles/src/style_tree/picker.ts
+++ b/styles/src/style_tree/picker.ts
@@ -9,7 +9,7 @@ export default function picker(colorScheme: ColorScheme): any {
         background: background(layer),
         border: border(layer),
         shadow: colorScheme.modalShadow,
-        cornerRadius: 12,
+        corner_radius: 12,
         padding: {
             bottom: 4,
         },
@@ -53,7 +53,7 @@ export default function picker(colorScheme: ColorScheme): any {
                         left: 4,
                         right: 4,
                     },
-                    cornerRadius: 8,
+                    corner_radius: 8,
                     text: text(layer, "sans", "variant"),
                     highlightText: text(layer, "sans", "accent", {
                         weight: "bold",
diff --git a/styles/src/style_tree/project_diagnostics.ts b/styles/src/style_tree/project_diagnostics.ts
index f3f5a5a144..10f556d121 100644
--- a/styles/src/style_tree/project_diagnostics.ts
+++ b/styles/src/style_tree/project_diagnostics.ts
@@ -6,7 +6,7 @@ export default function project_diagnostics(colorScheme: ColorScheme): any {
     return {
         background: background(layer),
         tabIconSpacing: 4,
-        tabIconWidth: 13,
+        tab_icon_width: 13,
         tabSummarySpacing: 10,
         emptyMessage: text(layer, "sans", "variant", { size: "md" }),
     }
diff --git a/styles/src/style_tree/project_panel.ts b/styles/src/style_tree/project_panel.ts
index c38c689f4f..ac5c577e21 100644
--- a/styles/src/style_tree/project_panel.ts
+++ b/styles/src/style_tree/project_panel.ts
@@ -117,7 +117,7 @@ export default function project_panel(theme: ColorScheme): any {
             base: {
                 background: background(layer),
                 border: border(layer, "active"),
-                cornerRadius: 4,
+                corner_radius: 4,
                 margin: {
                     top: 16,
                     left: 16,
diff --git a/styles/src/style_tree/project_shared_notification.ts b/styles/src/style_tree/project_shared_notification.ts
index f8b103e2e4..8437ab6c1b 100644
--- a/styles/src/style_tree/project_shared_notification.ts
+++ b/styles/src/style_tree/project_shared_notification.ts
@@ -17,7 +17,7 @@ export default function project_shared_notification(
         ownerAvatar: {
             height: avatarSize,
             width: avatarSize,
-            cornerRadius: avatarSize / 2,
+            corner_radius: avatarSize / 2,
         },
         ownerMetadata: {
             margin: { left: 10 },
@@ -34,7 +34,7 @@ export default function project_shared_notification(
             ...text(layer, "sans", "variant", { size: "xs", weight: "bold" }),
             margin: { top: -3 },
         },
-        buttonWidth: 96,
+        button_width: 96,
         openButton: {
             background: background(layer, "accent"),
             border: border(layer, { left: true, bottom: true }),
diff --git a/styles/src/style_tree/search.ts b/styles/src/style_tree/search.ts
index c236284fa0..37040613b3 100644
--- a/styles/src/style_tree/search.ts
+++ b/styles/src/style_tree/search.ts
@@ -9,7 +9,7 @@ export default function search(colorScheme: ColorScheme): any {
     // Search input
     const editor = {
         background: background(layer),
-        cornerRadius: 8,
+        corner_radius: 8,
         minWidth: 200,
         maxWidth: 500,
         placeholderText: text(layer, "mono", "disabled"),
@@ -41,7 +41,7 @@ export default function search(colorScheme: ColorScheme): any {
                 base: {
                     ...text(layer, "mono", "on"),
                     background: background(layer, "on"),
-                    cornerRadius: 6,
+                    corner_radius: 6,
                     border: border(layer, "on"),
                     margin: {
                         right: 4,
@@ -115,8 +115,8 @@ export default function search(colorScheme: ColorScheme): any {
         dismissButton: interactive({
             base: {
                 color: foreground(layer, "variant"),
-                iconWidth: 12,
-                buttonWidth: 14,
+                icon_width: 12,
+                button_width: 14,
                 padding: {
                     left: 10,
                     right: 10,
diff --git a/styles/src/style_tree/shared_screen.ts b/styles/src/style_tree/shared_screen.ts
index 718ea20642..bc4ac0b5d7 100644
--- a/styles/src/style_tree/shared_screen.ts
+++ b/styles/src/style_tree/shared_screen.ts
@@ -1,10 +1,7 @@
 import { ColorScheme } from "../theme/color_scheme"
-import { StyleTree } from "../types"
 import { background } from "./components"
 
-export default function sharedScreen(
-    colorScheme: ColorScheme
-): StyleTree.SharedScreen {
+export default function sharedScreen(colorScheme: ColorScheme) {
     const layer = colorScheme.highest
     return {
         background: background(layer),
diff --git a/styles/src/style_tree/simple_message_notification.ts b/styles/src/style_tree/simple_message_notification.ts
index 207924a99f..621bf21232 100644
--- a/styles/src/style_tree/simple_message_notification.ts
+++ b/styles/src/style_tree/simple_message_notification.ts
@@ -17,7 +17,7 @@ export default function simple_message_notification(
             base: {
                 ...text(layer, "sans", { size: "xs" }),
                 border: border(layer, "active"),
-                cornerRadius: 4,
+                corner_radius: 4,
                 padding: {
                     top: 3,
                     bottom: 3,
@@ -38,9 +38,9 @@ export default function simple_message_notification(
         dismissButton: interactive({
             base: {
                 color: foreground(layer),
-                iconWidth: 8,
+                icon_width: 8,
                 iconHeight: 8,
-                buttonWidth: 8,
+                button_width: 8,
                 buttonHeight: 8,
             },
             state: {
diff --git a/styles/src/style_tree/status_bar.ts b/styles/src/style_tree/status_bar.ts
index e86afb1c0d..fb1c572615 100644
--- a/styles/src/style_tree/status_bar.ts
+++ b/styles/src/style_tree/status_bar.ts
@@ -5,12 +5,12 @@ export default function status_bar(colorScheme: ColorScheme): any {
     const layer = colorScheme.lowest
 
     const statusContainer = {
-        cornerRadius: 6,
+        corner_radius: 6,
         padding: { top: 3, bottom: 3, left: 6, right: 6 },
     }
 
     const diagnosticStatusContainer = {
-        cornerRadius: 6,
+        corner_radius: 6,
         padding: { top: 1, bottom: 1, left: 6, right: 6 },
     }
 
@@ -42,7 +42,7 @@ export default function status_bar(colorScheme: ColorScheme): any {
             base: {
                 ...diagnosticStatusContainer,
                 iconSpacing: 4,
-                iconWidth: 14,
+                icon_width: 14,
                 height: 18,
                 message: text(layer, "sans"),
                 iconColor: foreground(layer),
@@ -64,7 +64,7 @@ export default function status_bar(colorScheme: ColorScheme): any {
         diagnosticSummary: interactive({
             base: {
                 height: 20,
-                iconWidth: 16,
+                icon_width: 16,
                 iconSpacing: 2,
                 summarySpacing: 6,
                 text: text(layer, "sans", { size: "sm" }),
@@ -72,7 +72,7 @@ export default function status_bar(colorScheme: ColorScheme): any {
                 iconColorWarning: foreground(layer, "warning"),
                 iconColorError: foreground(layer, "negative"),
                 containerOk: {
-                    cornerRadius: 6,
+                    corner_radius: 6,
                     padding: { top: 3, bottom: 3, left: 7, right: 7 },
                 },
                 containerWarning: {
@@ -143,7 +143,7 @@ export default function status_bar(colorScheme: ColorScheme): any {
                 },
             }),
             badge: {
-                cornerRadius: 3,
+                corner_radius: 3,
                 padding: 2,
                 margin: { bottom: -1, right: -1 },
                 border: border(layer),
diff --git a/styles/src/style_tree/tab_bar.ts b/styles/src/style_tree/tab_bar.ts
index fe43934f79..d8323809ed 100644
--- a/styles/src/style_tree/tab_bar.ts
+++ b/styles/src/style_tree/tab_bar.ts
@@ -25,10 +25,10 @@ export default function tab_bar(colorScheme: ColorScheme): any {
         spacing: 8,
 
         // Tab type icons (e.g. Project Search)
-        typeIconWidth: 14,
+        type_icon_width: 14,
 
         // Close icons
-        closeIconWidth: 8,
+        close_icon_width: 8,
         iconClose: foreground(layer, "variant"),
         iconCloseActive: foreground(layer, "hovered"),
 
@@ -92,8 +92,8 @@ export default function tab_bar(colorScheme: ColorScheme): any {
             base: interactive({
                 base: {
                     color: foreground(layer, "variant"),
-                    iconWidth: 12,
-                    buttonWidth: activePaneActiveTab.height,
+                    icon_width: 12,
+                    button_width: activePaneActiveTab.height,
                 },
                 state: {
                     hovered: {
diff --git a/styles/src/style_tree/terminal.ts b/styles/src/style_tree/terminal.ts
index 4e3dc18627..e902aa4264 100644
--- a/styles/src/style_tree/terminal.ts
+++ b/styles/src/style_tree/terminal.ts
@@ -1,7 +1,6 @@
 import { ColorScheme } from "../theme/color_scheme"
-import { StyleTree } from "../types"
 
-export default function terminal(theme: ColorScheme): StyleTree.TerminalStyle {
+export default function terminal(theme: ColorScheme) {
     /**
      * Colors are controlled per-cell in the terminal grid.
      * Cells can be set to any of these more 'theme-capable' colors
diff --git a/styles/src/style_tree/titlebar.ts b/styles/src/style_tree/titlebar.ts
index a5bcdc9492..dc1d098a3c 100644
--- a/styles/src/style_tree/titlebar.ts
+++ b/styles/src/style_tree/titlebar.ts
@@ -78,7 +78,7 @@ function user_menu(theme: ColorScheme) {
         const button = toggleable({
             base: interactive({
                 base: {
-                    cornerRadius: 6,
+                    corner_radius: 6,
                     height: button_height,
                     width: online ? 37 : 24,
                     padding: {
@@ -180,13 +180,13 @@ export function titlebar(theme: ColorScheme): any {
         leaderAvatar: {
             width: avatarWidth,
             outerWidth: avatarOuterWidth,
-            cornerRadius: avatarWidth / 2,
+            corner_radius: avatarWidth / 2,
             outerCornerRadius: avatarOuterWidth / 2,
         },
         followerAvatar: {
             width: followerAvatarWidth,
             outerWidth: followerAvatarOuterWidth,
-            cornerRadius: followerAvatarWidth / 2,
+            corner_radius: followerAvatarWidth / 2,
             outerCornerRadius: followerAvatarOuterWidth / 2,
         },
         inactiveAvatarGrayscale: true,
@@ -202,7 +202,7 @@ export function titlebar(theme: ColorScheme): any {
                 top: 2,
                 bottom: 2,
             },
-            cornerRadius: 6,
+            corner_radius: 6,
         },
         avatarRibbon: {
             height: 3,
@@ -234,7 +234,7 @@ export function titlebar(theme: ColorScheme): any {
                 left: 8,
                 right: 8,
             },
-            cornerRadius: 6,
+            corner_radius: 6,
         },
 
         leave_call_button: icon_button(theme, {
@@ -254,7 +254,7 @@ export function titlebar(theme: ColorScheme): any {
 
         // Jewel that notifies you that there are new contact requests
         toggleContactsBadge: {
-            cornerRadius: 3,
+            corner_radius: 3,
             padding: 2,
             margin: { top: 3, left: 3 },
             border: border(theme.lowest),
diff --git a/styles/src/style_tree/toolbar_dropdown_menu.ts b/styles/src/style_tree/toolbar_dropdown_menu.ts
index 992631e036..5d0bf89d93 100644
--- a/styles/src/style_tree/toolbar_dropdown_menu.ts
+++ b/styles/src/style_tree/toolbar_dropdown_menu.ts
@@ -18,7 +18,7 @@ export default function dropdown_menu(colorScheme: ColorScheme): any {
                 }),
                 secondaryTextSpacing: 10,
                 padding: { left: 8, right: 8, top: 2, bottom: 2 },
-                cornerRadius: 6,
+                corner_radius: 6,
                 background: background(layer, "on"),
             },
             state: {
diff --git a/styles/src/style_tree/tooltip.ts b/styles/src/style_tree/tooltip.ts
index 54daae529e..a872477f49 100644
--- a/styles/src/style_tree/tooltip.ts
+++ b/styles/src/style_tree/tooltip.ts
@@ -9,11 +9,11 @@ export default function tooltip(colorScheme: ColorScheme): any {
         padding: { top: 4, bottom: 4, left: 8, right: 8 },
         margin: { top: 6, left: 6 },
         shadow: colorScheme.popoverShadow,
-        cornerRadius: 6,
+        corner_radius: 6,
         text: text(layer, "sans", { size: "xs" }),
         keystroke: {
             background: background(layer, "on"),
-            cornerRadius: 4,
+            corner_radius: 4,
             margin: { left: 6 },
             padding: { left: 4, right: 4 },
             ...text(layer, "mono", "on", { size: "xs", weight: "bold" }),
diff --git a/styles/src/style_tree/update_notification.ts b/styles/src/style_tree/update_notification.ts
index c6e6130f54..e3cf833ce8 100644
--- a/styles/src/style_tree/update_notification.ts
+++ b/styles/src/style_tree/update_notification.ts
@@ -25,9 +25,9 @@ export default function update_notification(colorScheme: ColorScheme): any {
         dismissButton: interactive({
             base: {
                 color: foreground(layer),
-                iconWidth: 8,
+                icon_width: 8,
                 iconHeight: 8,
-                buttonWidth: 8,
+                button_width: 8,
                 buttonHeight: 8,
             },
             state: {
diff --git a/styles/src/style_tree/welcome.ts b/styles/src/style_tree/welcome.ts
index 93f1826740..5d0bc90a00 100644
--- a/styles/src/style_tree/welcome.ts
+++ b/styles/src/style_tree/welcome.ts
@@ -14,7 +14,7 @@ export default function welcome(colorScheme: ColorScheme): any {
     const layer = colorScheme.highest
 
     const checkboxBase = {
-        cornerRadius: 4,
+        corner_radius: 4,
         padding: {
             left: 3,
             right: 3,
@@ -57,7 +57,7 @@ export default function welcome(colorScheme: ColorScheme): any {
         checkboxGroup: {
             border: border(layer, "variant"),
             background: withOpacity(background(layer, "hovered"), 0.25),
-            cornerRadius: 4,
+            corner_radius: 4,
             padding: {
                 left: 12,
                 top: 2,
@@ -68,7 +68,7 @@ export default function welcome(colorScheme: ColorScheme): any {
             base: {
                 background: background(layer),
                 border: border(layer, "active"),
-                cornerRadius: 4,
+                corner_radius: 4,
                 margin: {
                     top: 4,
                     bottom: 4,
diff --git a/styles/src/style_tree/workspace.ts b/styles/src/style_tree/workspace.ts
index 48217e89c7..2ba0281b17 100644
--- a/styles/src/style_tree/workspace.ts
+++ b/styles/src/style_tree/workspace.ts
@@ -3,7 +3,7 @@ import { withOpacity } from "../theme/color"
 import {
     background,
     border,
-    borderColor,
+    border_color,
     foreground,
     svg,
     text,
@@ -46,7 +46,7 @@ export default function workspace(colorScheme: ColorScheme): any {
                 margin: {
                     top: 96,
                 },
-                cornerRadius: 4,
+                corner_radius: 4,
             },
             keyboardHint: interactive({
                 base: {
@@ -57,7 +57,7 @@ export default function workspace(colorScheme: ColorScheme): any {
                         right: 8,
                         bottom: 3,
                     },
-                    cornerRadius: 8,
+                    corner_radius: 8,
                 },
                 state: {
                     hovered: {
@@ -69,7 +69,7 @@ export default function workspace(colorScheme: ColorScheme): any {
             keyboardHintWidth: 320,
         },
         joiningProjectAvatar: {
-            cornerRadius: 40,
+            corner_radius: 40,
             width: 80,
         },
         joiningProjectMessage: {
@@ -79,7 +79,7 @@ export default function workspace(colorScheme: ColorScheme): any {
         externalLocationMessage: {
             background: background(colorScheme.middle, "accent"),
             border: border(colorScheme.middle, "accent"),
-            cornerRadius: 6,
+            corner_radius: 6,
             padding: 12,
             margin: { bottom: 8, right: 8 },
             ...text(colorScheme.middle, "sans", "accent", { size: "xs" }),
@@ -121,7 +121,7 @@ export default function workspace(colorScheme: ColorScheme): any {
             },
         },
         paneDivider: {
-            color: borderColor(layer),
+            color: border_color(layer),
             width: 1,
         },
         statusBar: statusBar(colorScheme),
@@ -134,9 +134,9 @@ export default function workspace(colorScheme: ColorScheme): any {
             navButton: interactive({
                 base: {
                     color: foreground(colorScheme.highest, "on"),
-                    iconWidth: 12,
-                    buttonWidth: 24,
-                    cornerRadius: 6,
+                    icon_width: 12,
+                    button_width: 24,
+                    corner_radius: 6,
                 },
                 state: {
                     hovered: {
@@ -162,7 +162,7 @@ export default function workspace(colorScheme: ColorScheme): any {
         breadcrumbs: interactive({
             base: {
                 ...text(colorScheme.highest, "sans", "variant"),
-                cornerRadius: 6,
+                corner_radius: 6,
                 padding: {
                     left: 6,
                     right: 6,
@@ -186,7 +186,7 @@ export default function workspace(colorScheme: ColorScheme): any {
         notification: {
             margin: { top: 10 },
             background: background(colorScheme.middle),
-            cornerRadius: 6,
+            corner_radius: 6,
             padding: 12,
             border: border(colorScheme.middle),
             shadow: colorScheme.popoverShadow,
diff --git a/styles/src/theme/color_scheme.ts b/styles/src/theme/color_scheme.ts
index 61b459911b..5d62bcffdb 100644
--- a/styles/src/theme/color_scheme.ts
+++ b/styles/src/theme/color_scheme.ts
@@ -252,11 +252,7 @@ function buildStyleSet(
     }
 }
 
-function buildStyleDefinition(
-    bgBase: number,
-    fgBase: number,
-    step = 0.08
-) {
+function buildStyleDefinition(bgBase: number, fgBase: number, step = 0.08) {
     return {
         background: {
             default: bgBase,
diff --git a/styles/src/types/element.ts b/styles/src/types/element.ts
deleted file mode 100644
index d6da5f9b71..0000000000
--- a/styles/src/types/element.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { Clean } from "./util"
-import * as zed from "./zed"
-
-export type Text = Clean<zed.TextStyle>
diff --git a/styles/src/types/index.ts b/styles/src/types/index.ts
deleted file mode 100644
index 3a017feb28..0000000000
--- a/styles/src/types/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import * as StyleTree from "./styleTree"
-import * as Property from "./property"
-import * as Element from "./element"
-
-export { StyleTree, Property, Element }
diff --git a/styles/src/types/property.ts b/styles/src/types/property.ts
deleted file mode 100644
index 6205b725ef..0000000000
--- a/styles/src/types/property.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Clean } from "./util"
-import * as zed from "./zed"
-
-export type Color = zed.Color
-export type CursorStyle = zed.CursorStyle
-export type FontStyle = zed.Style
-export type Border = Clean<zed.Border>
-export type Margin = Clean<zed.Margin>
-export type Padding = Clean<zed.Padding>
diff --git a/styles/src/types/style_tree.ts b/styles/src/types/style_tree.ts
deleted file mode 100644
index 08ae683349..0000000000
--- a/styles/src/types/style_tree.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { Clean } from "./util"
-import * as zed from "./zed"
-
-export type AssistantStyle = Readonly<Clean<zed.AssistantStyle>>
-export type CommandPalette = Readonly<Clean<zed.CommandPalette>>
-export type ContactFinder = Readonly<Clean<zed.ContactFinder>>
-export type ContactList = Readonly<Clean<zed.ContactList>>
-export type ContactNotification = Readonly<Clean<zed.ContactNotification>>
-export type ContactsPopover = Readonly<Clean<zed.ContactsPopover>>
-export type ContextMenu = Readonly<Clean<zed.ContextMenu>>
-export type Copilot = Readonly<Clean<zed.Copilot>>
-export type Editor = Readonly<Clean<zed.Editor>>
-export type FeedbackStyle = Readonly<Clean<zed.FeedbackStyle>>
-export type IncomingCallNotification = Readonly<
-    Clean<zed.IncomingCallNotification>
->
-export type ThemeMeta = Readonly<Clean<zed.ThemeMeta>>
-export type Picker = Readonly<Clean<zed.Picker>>
-export type ProjectDiagnostics = Readonly<Clean<zed.ProjectDiagnostics>>
-export type ProjectPanel = Readonly<Clean<zed.ProjectPanel>>
-export type ProjectSharedNotification = Readonly<
-    Clean<zed.ProjectSharedNotification>
->
-export type Search = Readonly<Clean<zed.Search>>
-export type SharedScreen = Readonly<Clean<zed.ContainerStyle>>
-export type MessageNotification = Readonly<Clean<zed.MessageNotification>>
-export type TerminalStyle = Readonly<Clean<zed.TerminalStyle>>
-export type UserMenu = Readonly<Clean<zed.UserMenu>>
-export type DropdownMenu = Readonly<Clean<zed.DropdownMenu>>
-export type TooltipStyle = Readonly<Clean<zed.TooltipStyle>>
-export type UpdateNotification = Readonly<Clean<zed.UpdateNotification>>
-export type WelcomeStyle = Readonly<Clean<zed.WelcomeStyle>>
-export type Workspace = Readonly<Clean<zed.Workspace>>
diff --git a/styles/src/types/util.ts b/styles/src/types/util.ts
deleted file mode 100644
index 99a742124a..0000000000
--- a/styles/src/types/util.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-export type Prettify<T> = {
-    [K in keyof T]: T[K]
-} & unknown
-
-/**
- * Clean removes the [k: string]: unknown property from an object,
- * and Prettifies it, providing better hover information for the type
- */
-export type Clean<T> = {
-    [K in keyof T as string extends K ? never : K]: T[K]
-}
-
-export type DeepClean<T> = {
-    [K in keyof T as string extends K ? never : K]: T[K] extends object
-        ? DeepClean<T[K]>
-        : T[K]
-}
diff --git a/styles/src/utils/snake_case.ts b/styles/src/utils/snake_case.ts
index 38c8a90a9e..cdd9684752 100644
--- a/styles/src/utils/snake_case.ts
+++ b/styles/src/utils/snake_case.ts
@@ -5,8 +5,8 @@ import { snakeCase } from "case-anything"
 // Typescript magic to convert any string from camelCase to snake_case at compile time
 type SnakeCase<S> = S extends string
     ? S extends `${infer T}${infer U}`
-    ? `${T extends Capitalize<T> ? "_" : ""}${Lowercase<T>}${SnakeCase<U>}`
-    : S
+        ? `${T extends Capitalize<T> ? "_" : ""}${Lowercase<T>}${SnakeCase<U>}`
+        : S
     : S
 
 type SnakeCased<Type> = {
diff --git a/styles/tsconfig.json b/styles/tsconfig.json
index cf68509748..925935ebb5 100644
--- a/styles/tsconfig.json
+++ b/styles/tsconfig.json
@@ -24,33 +24,15 @@
         "useUnknownInCatchVariables": false,
         "baseUrl": ".",
         "paths": {
-            "@/*": [
-                "./*"
-            ],
-            "@element/*": [
-                "./src/element/*"
-            ],
-            "@component/*": [
-                "./src/component/*"
-            ],
-            "@styleTree/*": [
-                "./src/styleTree/*"
-            ],
-            "@theme/*": [
-                "./src/theme/*"
-            ],
-            "@types/*": [
-                "./src/util/*"
-            ],
-            "@themes/*": [
-                "./src/themes/*"
-            ],
-            "@util/*": [
-                "./src/util/*"
-            ]
+            "@/*": ["./*"],
+            "@element/*": ["./src/element/*"],
+            "@component/*": ["./src/component/*"],
+            "@styleTree/*": ["./src/styleTree/*"],
+            "@theme/*": ["./src/theme/*"],
+            "@types/*": ["./src/util/*"],
+            "@themes/*": ["./src/themes/*"],
+            "@util/*": ["./src/util/*"]
         }
     },
-    "exclude": [
-        "node_modules"
-    ]
+    "exclude": ["node_modules"]
 }