WIP convert to `snake_case`

Nate Butler created

Change summary

styles/mod.py                                        | 42 +++++++
styles/package.json                                  |  8 
styles/src/build_licenses.ts                         |  0 
styles/src/build_themes.ts                           |  6 
styles/src/build_tokens.ts                           |  6 
styles/src/build_types.ts                            |  1 
styles/src/component/icon_button.ts                  | 10 
styles/src/component/text_button.ts                  | 10 
styles/src/styleTree/app.ts                          | 75 --------------
styles/src/style_tree/app.ts                         | 75 ++++++++++++++
styles/src/style_tree/assistant.ts                   |  2 
styles/src/style_tree/command_palette.ts             |  4 
styles/src/style_tree/components.ts                  |  2 
styles/src/style_tree/contact_finder.ts              |  4 
styles/src/style_tree/contact_list.ts                |  4 
styles/src/style_tree/contact_notification.ts        |  4 
styles/src/style_tree/contacts_popover.ts            |  4 
styles/src/style_tree/context_menu.ts                |  4 
styles/src/style_tree/copilot.ts                     |  2 
styles/src/style_tree/editor.ts                      | 18 +-
styles/src/style_tree/feedback.ts                    |  2 
styles/src/style_tree/hover_popover.ts               |  4 
styles/src/style_tree/incoming_call_notification.ts  |  4 
styles/src/style_tree/picker.ts                      |  2 
styles/src/style_tree/project_diagnostics.ts         |  4 
styles/src/style_tree/project_panel.ts               | 28 ++--
styles/src/style_tree/project_shared_notification.ts |  4 
styles/src/style_tree/search.ts                      |  2 
styles/src/style_tree/shared_screen.ts               |  2 
styles/src/style_tree/simple_message_notification.ts |  4 
styles/src/style_tree/status_bar.ts                  |  4 
styles/src/style_tree/tab_bar.ts                     |  4 
styles/src/style_tree/terminal.ts                    |  2 
styles/src/style_tree/titlebar.ts                    |  0 
styles/src/style_tree/toolbar_dropdown_menu.ts       |  4 
styles/src/style_tree/tooltip.ts                     |  2 
styles/src/style_tree/update_notification.ts         |  4 
styles/src/style_tree/welcome.ts                     |  2 
styles/src/style_tree/workspace.ts                   | 16 +-
styles/src/theme/color_scheme.ts                     |  6 
styles/src/theme/index.ts                            |  4 
styles/src/theme/ramps.ts                            |  4 
styles/src/theme/syntax.ts                           |  2 
styles/src/theme/theme_config.ts                     |  0 
styles/src/theme/tokens/color_scheme.ts              |  6 
styles/src/theme/tokens/layer.ts                     |  2 
styles/src/theme/tokens/players.ts                   |  2 
styles/src/types/style_tree.ts                       |  0 
styles/src/utils/snake_case.ts                       |  0 
49 files changed, 221 insertions(+), 180 deletions(-)

Detailed changes

styles/mod.py 🔗 

@@ -0,0 +1,42 @@
+import os, sys, re
+
+
+def camel_to_snake(inputstring):
+    REG = r'(?<!^)(?=[A-Z])'
+    return re.sub(REG, '_', inputstring).lower()
+
+
+def change_case(mypath):
+    if os.path.isabs(mypath):
+        raise ValueError
+    else:
+        abs_path_to_dir = os.path.normpath(os.path.join(os.path.dirname(__file__), mypath))
+        with os.scandir(abs_path_to_dir) as iter:
+            dirs = []
+            typescriptfiles = []
+            for entry in iter:
+                if (entry.is_dir() and entry.name not in ["node_modules", "target"]):
+                    dirs.append(entry.name)
+                if (entry.is_file() and entry.name.endswith('.ts')):
+                    typescriptfiles.append(entry.name)
+            if len(dirs) != 0:
+                for dir in dirs:
+                    change_case(os.path.normpath(os.path.join(mypath,dir)))
+            for entry in typescriptfiles:
+                relative_path = os.path.normpath(os.path.join(mypath,entry))
+                dst = camel_to_snake(relative_path)
+                abs_path = os.path.normpath(os.path.join(os.path.dirname(__file__), relative_path))
+                abs_dst = os.path.normpath(os.path.join(os.path.dirname(__file__), dst))
+                (head, tail) = os.path.split(abs_dst)
+                if not os.path.exists(head):
+                    os.makedirs(head)
+                os.rename(abs_path, abs_dst)
+
+def main():
+    dir = os.path.dirname(__file__)
+    path = sys.argv[1]
+    change_case(path)
+
+
+if __name__ == '__main__':
+    main()

styles/package.json 🔗 

@@ -4,10 +4,10 @@
     "description": "",
     "main": "index.js",
     "scripts": {
-        "build": "ts-node ./src/buildThemes.ts",
-        "build-licenses": "ts-node ./src/buildLicenses.ts",
-        "build-tokens": "ts-node ./src/buildTokens.ts",
-        "build-types": "ts-node ./src/buildTypes.ts",
+        "build": "ts-node ./src/build_themes.ts",
+        "build-licenses": "ts-node ./src/build_licenses.ts",
+        "build-tokens": "ts-node ./src/build_tokens.ts",
+        "build-types": "ts-node ./src/build_types.ts",
         "test": "vitest"
     },
     "author": "",

styles/src/buildThemes.ts → styles/src/build_themes.ts 🔗 

@@ -1,9 +1,9 @@
 import * as fs from "fs"
 import { tmpdir } from "os"
 import * as path from "path"
-import app from "./styleTree/app"
-import { ColorScheme, createColorScheme } from "./theme/colorScheme"
-import snakeCase from "./utils/snakeCase"
+import app from "./style_tree/app"
+import { ColorScheme, createColorScheme } from "./theme/color_scheme"
+import snakeCase from "./utils/snake_case"
 import { themes } from "./themes"
 
 const assetsDirectory = `${__dirname}/../../assets`

styles/src/buildTokens.ts → styles/src/build_tokens.ts 🔗 

@@ -3,7 +3,7 @@ import * as path from "path"
 import { ColorScheme, createColorScheme } from "./common"
 import { themes } from "./themes"
 import { slugify } from "./utils/slugify"
-import { colorSchemeTokens } from "./theme/tokens/colorScheme"
+import { colorSchemeTokens } from "./theme/tokens/color_scheme"
 
 const TOKENS_DIRECTORY = path.join(__dirname, "..", "target", "tokens")
 const TOKENS_FILE = path.join(TOKENS_DIRECTORY, "$themes.json")
@@ -38,7 +38,7 @@ function buildTokenSetOrder(colorSchemes: ColorScheme[]): {
 
 function buildThemesIndex(colorSchemes: ColorScheme[]): TokenSet[] {
     const themesIndex: TokenSet[] = colorSchemes.map((scheme, index) => {
-        const id = `${scheme.isLight ? "light" : "dark"}_${scheme.name
+        const id = `${scheme.is_light ? "light" : "dark"}_${scheme.name
             .toLowerCase()
             .replace(/\s+/g, "_")}_${index}`
         const selectedTokenSets: { [key: string]: "enabled" } = {}
@@ -47,7 +47,7 @@ function buildThemesIndex(colorSchemes: ColorScheme[]): TokenSet[] {
 
         return {
             id,
-            name: `${scheme.name} - ${scheme.isLight ? "Light" : "Dark"}`,
+            name: `${scheme.name} - ${scheme.is_light ? "Light" : "Dark"}`,
             selectedTokenSets,
         }
     })

styles/src/buildTypes.ts → styles/src/build_types.ts 🔗 

@@ -43,7 +43,6 @@ async function main() {
             return
         }
     } catch (e) {
-        // @ts-expect-error - It's fine if there's no output from a previous run.
         if (e.code !== "ENOENT") {
             throw e
         }

styles/src/component/icon_button.ts 🔗 

@@ -1,6 +1,6 @@
-import { ColorScheme } from "../common"
 import { interactive, toggleable } from "../element"
-import { background, foreground } from "../styleTree/components"
+import { background, foreground } from "../style_tree/components"
+import { ColorScheme } from "../theme/color_scheme"
 
 export type Margin = {
     top: number
@@ -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>
 }

styles/src/component/text_button.ts 🔗 

@@ -1,18 +1,18 @@
-import { ColorScheme } from "../common"
 import { interactive, toggleable } from "../element"
 import {
     TextProperties,
     background,
     foreground,
     text,
-} from "../styleTree/components"
+} from "../style_tree/components"
+import { ColorScheme } from "../theme/color_scheme"
 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

styles/src/styleTree/app.ts 🔗 

@@ -1,75 +0,0 @@
-import contactFinder from "./contactFinder"
-import contactsPopover from "./contactsPopover"
-import commandPalette from "./commandPalette"
-import editor from "./editor"
-import projectPanel from "./projectPanel"
-import search from "./search"
-import picker from "./picker"
-import workspace from "./workspace"
-import contextMenu from "./contextMenu"
-import sharedScreen from "./sharedScreen"
-import projectDiagnostics from "./projectDiagnostics"
-import contactNotification from "./contactNotification"
-import updateNotification from "./updateNotification"
-import simpleMessageNotification from "./simpleMessageNotification"
-import projectSharedNotification from "./projectSharedNotification"
-import tooltip from "./tooltip"
-import terminal from "./terminal"
-import contactList from "./contactList"
-import toolbarDropdownMenu from "./toolbarDropdownMenu"
-import incomingCallNotification from "./incomingCallNotification"
-import { ColorScheme } from "../theme/colorScheme"
-import feedback from "./feedback"
-import welcome from "./welcome"
-import copilot from "./copilot"
-import assistant from "./assistant"
-import { titlebar } from "./titlebar"
-
-export default function app(colorScheme: ColorScheme): any {
-    return {
-        meta: {
-            name: colorScheme.name,
-            isLight: colorScheme.isLight,
-        },
-        commandPalette: commandPalette(colorScheme),
-        contactNotification: contactNotification(colorScheme),
-        projectSharedNotification: projectSharedNotification(colorScheme),
-        incomingCallNotification: incomingCallNotification(colorScheme),
-        picker: picker(colorScheme),
-        workspace: workspace(colorScheme),
-        titlebar: titlebar(colorScheme),
-        copilot: copilot(colorScheme),
-        welcome: welcome(colorScheme),
-        contextMenu: contextMenu(colorScheme),
-        editor: editor(colorScheme),
-        projectDiagnostics: projectDiagnostics(colorScheme),
-        projectPanel: projectPanel(colorScheme),
-        contactsPopover: contactsPopover(colorScheme),
-        contactFinder: contactFinder(colorScheme),
-        contactList: contactList(colorScheme),
-        toolbarDropdownMenu: toolbarDropdownMenu(colorScheme),
-        search: search(colorScheme),
-        sharedScreen: sharedScreen(colorScheme),
-        updateNotification: updateNotification(colorScheme),
-        simpleMessageNotification: simpleMessageNotification(colorScheme),
-        tooltip: tooltip(colorScheme),
-        terminal: terminal(colorScheme),
-        assistant: assistant(colorScheme),
-        feedback: feedback(colorScheme),
-        colorScheme: {
-            ...colorScheme,
-            players: Object.values(colorScheme.players),
-            ramps: {
-                neutral: colorScheme.ramps.neutral.colors(100, "hex"),
-                red: colorScheme.ramps.red.colors(100, "hex"),
-                orange: colorScheme.ramps.orange.colors(100, "hex"),
-                yellow: colorScheme.ramps.yellow.colors(100, "hex"),
-                green: colorScheme.ramps.green.colors(100, "hex"),
-                cyan: colorScheme.ramps.cyan.colors(100, "hex"),
-                blue: colorScheme.ramps.blue.colors(100, "hex"),
-                violet: colorScheme.ramps.violet.colors(100, "hex"),
-                magenta: colorScheme.ramps.magenta.colors(100, "hex"),
-            },
-        },
-    }
-}

styles/src/style_tree/app.ts 🔗 

@@ -0,0 +1,75 @@
+import contact_finder from "./contact_finder"
+import contacts_popover from "./contacts_popover"
+import command_palette from "./command_palette"
+import project_panel from "./project_panel"
+import search from "./search"
+import picker from "./picker"
+import workspace from "./workspace"
+import context_menu from "./context_menu"
+import shared_screen from "./shared_screen"
+import project_diagnostics from "./project_diagnostics"
+import contact_notification from "./contact_notification"
+import update_notification from "./update_notification"
+import simple_message_notification from "./simple_message_notification"
+import project_shared_notification from "./project_shared_notification"
+import tooltip from "./tooltip"
+import terminal from "./terminal"
+import contact_list from "./contact_list"
+import toolbar_dropdown_menu from "./toolbar_dropdown_menu"
+import incoming_call_notification from "./incoming_call_notification"
+import { ColorScheme } from "../theme/color_scheme"
+import welcome from "./welcome"
+import copilot from "./copilot"
+import assistant from "./assistant"
+import { titlebar } from "./titlebar"
+import editor from "./editor"
+import feedback from "./feedback"
+
+export default function app(theme: ColorScheme): any {
+    return {
+        meta: {
+            name: theme.name,
+            is_light: theme.is_light,
+        },
+        command_palette: command_palette(theme),
+        contact_notification: contact_notification(theme),
+        project_shared_notification: project_shared_notification(theme),
+        incoming_call_notification: incoming_call_notification(theme),
+        picker: picker(theme),
+        workspace: workspace(theme),
+        titlebar: titlebar(theme),
+        copilot: copilot(theme),
+        welcome: welcome(theme),
+        context_menu: context_menu(theme),
+        editor: editor(theme),
+        project_diagnostics: project_diagnostics(theme),
+        project_panel: project_panel(theme),
+        contacts_popover: contacts_popover(theme),
+        contact_finder: contact_finder(theme),
+        contact_list: contact_list(theme),
+        toolbar_dropdown_menu: toolbar_dropdown_menu(theme),
+        search: search(theme),
+        shared_screen: shared_screen(theme),
+        update_notification: update_notification(theme),
+        simple_message_notification: simple_message_notification(theme),
+        tooltip: tooltip(theme),
+        terminal: terminal(theme),
+        assistant: assistant(theme),
+        feedback: feedback(theme),
+        color_scheme: {
+            ...theme,
+            players: Object.values(theme.players),
+            ramps: {
+                neutral: theme.ramps.neutral.colors(100, "hex"),
+                red: theme.ramps.red.colors(100, "hex"),
+                orange: theme.ramps.orange.colors(100, "hex"),
+                yellow: theme.ramps.yellow.colors(100, "hex"),
+                green: theme.ramps.green.colors(100, "hex"),
+                cyan: theme.ramps.cyan.colors(100, "hex"),
+                blue: theme.ramps.blue.colors(100, "hex"),
+                violet: theme.ramps.violet.colors(100, "hex"),
+                magenta: theme.ramps.magenta.colors(100, "hex"),
+            },
+        },
+    }
+}

styles/src/styleTree/assistant.ts → styles/src/style_tree/assistant.ts 🔗 

@@ -1,4 +1,4 @@
-import { ColorScheme } from "../theme/colorScheme"
+import { ColorScheme } from "../theme/color_scheme"
 import { text, border, background, foreground } from "./components"
 import editor from "./editor"
 import { interactive } from "../element"

styles/src/styleTree/commandPalette.ts → styles/src/style_tree/command_palette.ts 🔗 

@@ -1,9 +1,9 @@
-import { ColorScheme } from "../theme/colorScheme"
+import { ColorScheme } from "../theme/color_scheme"
 import { withOpacity } from "../theme/color"
 import { text, background } from "./components"
 import { toggleable } from "../element"
 
-export default function commandPalette(colorScheme: ColorScheme): any {
+export default function command_palette(colorScheme: ColorScheme): any {
     const layer = colorScheme.highest
 
     const key = toggleable({

styles/src/styleTree/components.ts → styles/src/style_tree/components.ts 🔗 

@@ -1,5 +1,5 @@
 import { fontFamilies, fontSizes, FontWeight } from "../common"
-import { Layer, Styles, StyleSets, Style } from "../theme/colorScheme"
+import { Layer, Styles, StyleSets, Style } from "../theme/color_scheme"
 
 function isStyleSet(key: any): key is StyleSets {
     return [

styles/src/styleTree/contactFinder.ts → styles/src/style_tree/contact_finder.ts 🔗 

@@ -1,8 +1,8 @@
 import picker from "./picker"
-import { ColorScheme } from "../theme/colorScheme"
+import { ColorScheme } from "../theme/color_scheme"
 import { background, border, foreground, text } from "./components"
 
-export default function contactFinder(colorScheme: ColorScheme): any {
+export default function contact_finder(colorScheme: ColorScheme): any {
     const layer = colorScheme.middle
 
     const sideMargin = 6

styles/src/styleTree/contactList.ts → styles/src/style_tree/contact_list.ts 🔗 

@@ -1,7 +1,7 @@
-import { ColorScheme } from "../theme/colorScheme"
+import { ColorScheme } from "../theme/color_scheme"
 import { background, border, borderColor, foreground, text } from "./components"
 import { interactive, toggleable } from "../element"
-export default function contactsPanel(colorScheme: ColorScheme): any {
+export default function contacts_panel(colorScheme: ColorScheme): any {
     const nameMargin = 8
     const sidePadding = 12

styles/src/styleTree/contactNotification.ts → styles/src/style_tree/contact_notification.ts 🔗 

@@ -1,10 +1,10 @@
-import { ColorScheme } from "../theme/colorScheme"
+import { ColorScheme } from "../theme/color_scheme"
 import { background, foreground, text } from "./components"
 import { interactive } from "../element"
 const avatarSize = 12
 const headerPadding = 8
 
-export default function contactNotification(colorScheme: ColorScheme): any {
+export default function contact_notification(colorScheme: ColorScheme): any {
     const layer = colorScheme.lowest
     return {
         headerAvatar: {

styles/src/styleTree/contactsPopover.ts → styles/src/style_tree/contacts_popover.ts 🔗 

@@ -1,7 +1,7 @@
-import { ColorScheme } from "../theme/colorScheme"
+import { ColorScheme } from "../theme/color_scheme"
 import { background, border } from "./components"
 
-export default function contactsPopover(colorScheme: ColorScheme): any {
+export default function contacts_popover(colorScheme: ColorScheme): any {
     const layer = colorScheme.middle
     return {
         background: background(layer),

styles/src/styleTree/contextMenu.ts → styles/src/style_tree/context_menu.ts 🔗 

@@ -1,8 +1,8 @@
-import { ColorScheme } from "../theme/colorScheme"
+import { ColorScheme } from "../theme/color_scheme"
 import { background, border, borderColor, text } from "./components"
 import { interactive, toggleable } from "../element"
 
-export default function contextMenu(colorScheme: ColorScheme): any {
+export default function context_menu(colorScheme: ColorScheme): any {
     const layer = colorScheme.middle
     return {
         background: background(layer),

styles/src/styleTree/copilot.ts → styles/src/style_tree/copilot.ts 🔗 

@@ -1,4 +1,4 @@
-import { ColorScheme } from "../theme/colorScheme"
+import { ColorScheme } from "../theme/color_scheme"
 import { background, border, foreground, svg, text } from "./components"
 import { interactive } from "../element"
 export default function copilot(colorScheme: ColorScheme): any {

styles/src/styleTree/editor.ts → styles/src/style_tree/editor.ts 🔗 

@@ -1,13 +1,13 @@
 import { withOpacity } from "../theme/color"
-import { ColorScheme, Layer, StyleSets } from "../theme/colorScheme"
+import { ColorScheme, Layer, StyleSets } from "../theme/color_scheme"
 import { background, border, borderColor, foreground, text } from "./components"
-import hoverPopover from "./hoverPopover"
+import hoverPopover from "./hover_popover"
 
 import { buildSyntax } from "../theme/syntax"
 import { interactive, toggleable } from "../element"
 
 export default function editor(colorScheme: ColorScheme): any {
-    const { isLight } = colorScheme
+    const { is_light } = colorScheme
 
     const layer = colorScheme.highest
 
@@ -130,13 +130,13 @@ export default function editor(colorScheme: ColorScheme): any {
             foldBackground: foreground(layer, "variant"),
         },
         diff: {
-            deleted: isLight
+            deleted: is_light
                 ? colorScheme.ramps.red(0.5).hex()
                 : colorScheme.ramps.red(0.4).hex(),
-            modified: isLight
+            modified: is_light
                 ? colorScheme.ramps.yellow(0.5).hex()
                 : colorScheme.ramps.yellow(0.5).hex(),
-            inserted: isLight
+            inserted: is_light
                 ? colorScheme.ramps.green(0.4).hex()
                 : colorScheme.ramps.green(0.5).hex(),
             removedWidthEm: 0.275,
@@ -292,13 +292,13 @@ export default function editor(colorScheme: ColorScheme): any {
                 },
             },
             git: {
-                deleted: isLight
+                deleted: is_light
                     ? withOpacity(colorScheme.ramps.red(0.5).hex(), 0.8)
                     : withOpacity(colorScheme.ramps.red(0.4).hex(), 0.8),
-                modified: isLight
+                modified: is_light
                     ? withOpacity(colorScheme.ramps.yellow(0.5).hex(), 0.8)
                     : withOpacity(colorScheme.ramps.yellow(0.4).hex(), 0.8),
-                inserted: isLight
+                inserted: is_light
                     ? withOpacity(colorScheme.ramps.green(0.5).hex(), 0.8)
                     : withOpacity(colorScheme.ramps.green(0.4).hex(), 0.8),
             },

styles/src/styleTree/feedback.ts → styles/src/style_tree/feedback.ts 🔗 

@@ -1,4 +1,4 @@
-import { ColorScheme } from "../theme/colorScheme"
+import { ColorScheme } from "../theme/color_scheme"
 import { background, border, text } from "./components"
 import { interactive } from "../element"

styles/src/styleTree/hoverPopover.ts → styles/src/style_tree/hover_popover.ts 🔗 

@@ -1,7 +1,7 @@
-import { ColorScheme } from "../theme/colorScheme"
+import { ColorScheme } from "../theme/color_scheme"
 import { background, border, foreground, text } from "./components"
 
-export default function HoverPopover(colorScheme: ColorScheme): any {
+export default function hover_popover(colorScheme: ColorScheme): any {
     const layer = colorScheme.middle
     const baseContainer = {
         background: background(layer),

styles/src/styleTree/incomingCallNotification.ts → styles/src/style_tree/incoming_call_notification.ts 🔗 

@@ -1,7 +1,7 @@
-import { ColorScheme } from "../theme/colorScheme"
+import { ColorScheme } from "../theme/color_scheme"
 import { background, border, text } from "./components"
 
-export default function incomingCallNotification(
+export default function incoming_call_notification(
     colorScheme: ColorScheme
 ): unknown {
     const layer = colorScheme.middle

styles/src/styleTree/picker.ts → styles/src/style_tree/picker.ts 🔗 

@@ -1,4 +1,4 @@
-import { ColorScheme } from "../theme/colorScheme"
+import { ColorScheme } from "../theme/color_scheme"
 import { withOpacity } from "../theme/color"
 import { background, border, text } from "./components"
 import { interactive, toggleable } from "../element"

styles/src/styleTree/projectDiagnostics.ts → styles/src/style_tree/project_diagnostics.ts 🔗 

@@ -1,7 +1,7 @@
-import { ColorScheme } from "../theme/colorScheme"
+import { ColorScheme } from "../theme/color_scheme"
 import { background, text } from "./components"
 
-export default function projectDiagnostics(colorScheme: ColorScheme): any {
+export default function project_diagnostics(colorScheme: ColorScheme): any {
     const layer = colorScheme.highest
     return {
         background: background(layer),

styles/src/styleTree/projectPanel.ts → styles/src/style_tree/project_panel.ts 🔗 

@@ -1,4 +1,4 @@
-import { ColorScheme } from "../theme/colorScheme"
+import { ColorScheme } from "../theme/color_scheme"
 import { withOpacity } from "../theme/color"
 import {
     Border,
@@ -10,10 +10,10 @@ import {
 } from "./components"
 import { interactive, toggleable } from "../element"
 import merge from "ts-deepmerge"
-export default function projectPanel(colorScheme: ColorScheme): any {
-    const { isLight } = colorScheme
+export default function project_panel(theme: ColorScheme): any {
+    const { is_light } = theme
 
-    const layer = colorScheme.middle
+    const layer = theme.middle
 
     type EntryStateProps = {
         background?: string
@@ -31,15 +31,15 @@ export default function projectPanel(colorScheme: ColorScheme): any {
     const entry = (unselected?: EntryState, selected?: EntryState) => {
         const git_status = {
             git: {
-                modified: isLight
-                    ? colorScheme.ramps.yellow(0.6).hex()
-                    : colorScheme.ramps.yellow(0.5).hex(),
-                inserted: isLight
-                    ? colorScheme.ramps.green(0.45).hex()
-                    : colorScheme.ramps.green(0.5).hex(),
-                conflict: isLight
-                    ? colorScheme.ramps.red(0.6).hex()
-                    : colorScheme.ramps.red(0.5).hex(),
+                modified: is_light
+                    ? theme.ramps.yellow(0.6).hex()
+                    : theme.ramps.yellow(0.5).hex(),
+                inserted: is_light
+                    ? theme.ramps.green(0.45).hex()
+                    : theme.ramps.green(0.5).hex(),
+                conflict: is_light
+                    ? theme.ramps.red(0.6).hex()
+                    : theme.ramps.red(0.5).hex(),
             },
         }
 
@@ -182,7 +182,7 @@ export default function projectPanel(colorScheme: ColorScheme): any {
         filenameEditor: {
             background: background(layer, "on"),
             text: text(layer, "mono", "on", { size: "sm" }),
-            selection: colorScheme.players[0],
+            selection: theme.players[0],
         },
     }
 }

styles/src/styleTree/projectSharedNotification.ts → styles/src/style_tree/project_shared_notification.ts 🔗 

@@ -1,7 +1,7 @@
-import { ColorScheme } from "../theme/colorScheme"
+import { ColorScheme } from "../theme/color_scheme"
 import { background, border, text } from "./components"
 
-export default function projectSharedNotification(
+export default function project_shared_notification(
     colorScheme: ColorScheme
 ): unknown {
     const layer = colorScheme.middle

styles/src/styleTree/search.ts → styles/src/style_tree/search.ts 🔗 

@@ -1,4 +1,4 @@
-import { ColorScheme } from "../theme/colorScheme"
+import { ColorScheme } from "../theme/color_scheme"
 import { withOpacity } from "../theme/color"
 import { background, border, foreground, text } from "./components"
 import { interactive, toggleable } from "../element"

styles/src/styleTree/sharedScreen.ts → styles/src/style_tree/shared_screen.ts 🔗 

@@ -1,4 +1,4 @@
-import { ColorScheme } from "../theme/colorScheme"
+import { ColorScheme } from "../theme/color_scheme"
 import { StyleTree } from "../types"
 import { background } from "./components"

styles/src/styleTree/simpleMessageNotification.ts → styles/src/style_tree/simple_message_notification.ts 🔗 

@@ -1,10 +1,10 @@
-import { ColorScheme } from "../theme/colorScheme"
+import { ColorScheme } from "../theme/color_scheme"
 import { background, border, foreground, text } from "./components"
 import { interactive } from "../element"
 
 const headerPadding = 8
 
-export default function simpleMessageNotification(
+export default function simple_message_notification(
     colorScheme: ColorScheme
 ): unknown {
     const layer = colorScheme.middle

styles/src/styleTree/statusBar.ts → styles/src/style_tree/status_bar.ts 🔗 

@@ -1,7 +1,7 @@
-import { ColorScheme } from "../theme/colorScheme"
+import { ColorScheme } from "../theme/color_scheme"
 import { background, border, foreground, text } from "./components"
 import { interactive, toggleable } from "../element"
-export default function statusBar(colorScheme: ColorScheme): any {
+export default function status_bar(colorScheme: ColorScheme): any {
     const layer = colorScheme.lowest
 
     const statusContainer = {

styles/src/styleTree/tabBar.ts → styles/src/style_tree/tab_bar.ts 🔗 

@@ -1,9 +1,9 @@
-import { ColorScheme } from "../theme/colorScheme"
+import { ColorScheme } from "../theme/color_scheme"
 import { withOpacity } from "../theme/color"
 import { text, border, background, foreground } from "./components"
 import { interactive, toggleable } from "../element"
 
-export default function tabBar(colorScheme: ColorScheme): any {
+export default function tab_bar(colorScheme: ColorScheme): any {
     const height = 32
 
     const activeLayer = colorScheme.highest

styles/src/styleTree/terminal.ts → styles/src/style_tree/terminal.ts 🔗 

@@ -1,4 +1,4 @@
-import { ColorScheme } from "../theme/colorScheme"
+import { ColorScheme } from "../theme/color_scheme"
 import { StyleTree } from "../types"
 
 export default function terminal(theme: ColorScheme): StyleTree.TerminalStyle {

styles/src/styleTree/toolbarDropdownMenu.ts → styles/src/style_tree/toolbar_dropdown_menu.ts 🔗 

@@ -1,7 +1,7 @@
-import { ColorScheme } from "../theme/colorScheme"
+import { ColorScheme } from "../theme/color_scheme"
 import { background, border, text } from "./components"
 import { interactive, toggleable } from "../element"
-export default function dropdownMenu(colorScheme: ColorScheme): any {
+export default function dropdown_menu(colorScheme: ColorScheme): any {
     const layer = colorScheme.middle
 
     return {

styles/src/styleTree/tooltip.ts → styles/src/style_tree/tooltip.ts 🔗 

@@ -1,4 +1,4 @@
-import { ColorScheme } from "../theme/colorScheme"
+import { ColorScheme } from "../theme/color_scheme"
 import { background, border, text } from "./components"
 
 export default function tooltip(colorScheme: ColorScheme): any {

styles/src/styleTree/updateNotification.ts → styles/src/style_tree/update_notification.ts 🔗 

@@ -1,10 +1,10 @@
-import { ColorScheme } from "../theme/colorScheme"
+import { ColorScheme } from "../theme/color_scheme"
 import { foreground, text } from "./components"
 import { interactive } from "../element"
 
 const headerPadding = 8
 
-export default function updateNotification(colorScheme: ColorScheme): any {
+export default function update_notification(colorScheme: ColorScheme): any {
     const layer = colorScheme.middle
     return {
         message: {

styles/src/styleTree/welcome.ts → styles/src/style_tree/welcome.ts 🔗 

@@ -1,4 +1,4 @@
-import { ColorScheme } from "../theme/colorScheme"
+import { ColorScheme } from "../theme/color_scheme"
 import { withOpacity } from "../theme/color"
 import {
     border,

styles/src/styleTree/workspace.ts → styles/src/style_tree/workspace.ts 🔗 

@@ -1,4 +1,4 @@
-import { ColorScheme } from "../theme/colorScheme"
+import { ColorScheme } from "../theme/color_scheme"
 import { withOpacity } from "../theme/color"
 import {
     background,
@@ -8,14 +8,14 @@ import {
     svg,
     text,
 } from "./components"
-import statusBar from "./statusBar"
-import tabBar from "./tabBar"
+import statusBar from "./status_bar"
+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 isLight = colorScheme.isLight
+    const is_light = colorScheme.is_light
 
     return {
         background: background(colorScheme.lowest),
@@ -25,7 +25,7 @@ export default function workspace(colorScheme: ColorScheme): any {
                 height: 256,
             },
             logo: svg(
-                withOpacity("#000000", colorScheme.isLight ? 0.6 : 0.8),
+                withOpacity("#000000", colorScheme.is_light ? 0.6 : 0.8),
                 "icons/logo_96.svg",
                 256,
                 256
@@ -33,10 +33,10 @@ export default function workspace(colorScheme: ColorScheme): any {
 
             logoShadow: svg(
                 withOpacity(
-                    colorScheme.isLight
+                    colorScheme.is_light
                         ? "#FFFFFF"
                         : colorScheme.lowest.base.default.background,
-                    colorScheme.isLight ? 1 : 0.6
+                    colorScheme.is_light ? 1 : 0.6
                 ),
                 "icons/logo_96.svg",
                 256,
@@ -96,7 +96,7 @@ export default function workspace(colorScheme: ColorScheme): any {
         },
         zoomedBackground: {
             cursor: "Arrow",
-            background: isLight
+            background: is_light
                 ? withOpacity(background(colorScheme.lowest), 0.8)
                 : withOpacity(background(colorScheme.highest), 0.6),
         },

styles/src/theme/colorScheme.ts → styles/src/theme/color_scheme.ts 🔗 

@@ -5,12 +5,12 @@ import {
     ThemeConfig,
     ThemeAppearance,
     ThemeConfigInputColors,
-} from "./themeConfig"
+} from "./theme_config"
 import { getRamps } from "./ramps"
 
 export interface ColorScheme {
     name: string
-    isLight: boolean
+    is_light: boolean
 
     lowest: Layer
     middle: Layer
@@ -155,7 +155,7 @@ export function createColorScheme(theme: ThemeConfig): ColorScheme {
 
     return {
         name,
-        isLight,
+        is_light: isLight,
 
         ramps,

styles/src/theme/index.ts 🔗 

@@ -1,4 +1,4 @@
-export * from "./colorScheme"
+export * from "./color_scheme"
 export * from "./ramps"
 export * from "./syntax"
-export * from "./themeConfig"
+export * from "./theme_config"

styles/src/theme/ramps.ts 🔗 

@@ -1,9 +1,9 @@
 import chroma, { Color, Scale } from "chroma-js"
-import { RampSet } from "./colorScheme"
+import { RampSet } from "./color_scheme"
 import {
     ThemeConfigInputColors,
     ThemeConfigInputColorsKeys,
-} from "./themeConfig"
+} from "./theme_config"
 
 export function colorRamp(color: Color): Scale {
     const endColor = color.desaturate(1).brighten(5)

styles/src/theme/syntax.ts 🔗 

@@ -1,6 +1,6 @@
 import deepmerge from "deepmerge"
 import { FontWeight, fontWeights } from "../common"
-import { ColorScheme } from "./colorScheme"
+import { ColorScheme } from "./color_scheme"
 import chroma from "chroma-js"
 
 export interface SyntaxHighlightStyle {

styles/src/theme/tokens/colorScheme.ts → styles/src/theme/tokens/color_scheme.ts 🔗 

@@ -9,12 +9,12 @@ import {
     Shadow,
     SyntaxHighlightStyle,
     ThemeSyntax,
-} from "../colorScheme"
+} from "../color_scheme"
 import { LayerToken, layerToken } from "./layer"
 import { PlayersToken, playersToken } from "./players"
 import { colorToken } from "./token"
 import { Syntax } from "../syntax"
-import editor from "../../styleTree/editor"
+import editor from "../../style_tree/editor"
 
 interface ColorSchemeTokens {
     name: SingleOtherToken
@@ -85,7 +85,7 @@ export function colorSchemeTokens(colorScheme: ColorScheme): ColorSchemeTokens {
         },
         appearance: {
             name: "themeAppearance",
-            value: colorScheme.isLight ? "light" : "dark",
+            value: colorScheme.is_light ? "light" : "dark",
             type: TokenTypes.OTHER,
         },
         lowest: layerToken(colorScheme.lowest, "lowest"),

styles/src/theme/tokens/layer.ts 🔗 

@@ -1,5 +1,5 @@
 import { SingleColorToken } from "@tokens-studio/types"
-import { Layer, Style, StyleSet } from "../colorScheme"
+import { Layer, Style, StyleSet } from "../color_scheme"
 import { colorToken } from "./token"
 
 interface StyleToken {

styles/src/theme/tokens/players.ts 🔗 

@@ -1,6 +1,6 @@
 import { SingleColorToken } from "@tokens-studio/types"
-import { ColorScheme, Players } from "../../common"
 import { colorToken } from "./token"
+import { ColorScheme, Players } from "../color_scheme"
 
 export type PlayerToken = Record<"selection" | "cursor", SingleColorToken>