WIP snake_case 2/?

Nate Butler created

Change summary

styles/.eslintrc.js                                  |  11 +
styles/mod.py                                        |  42 ---
styles/package-lock.json                             |  10 
styles/package.json                                  |   1 
styles/src/build_licenses.ts                         |  30 +-
styles/src/build_themes.ts                           |  38 +-
styles/src/build_tokens.ts                           |  70 +++---
styles/src/build_types.ts                            |  36 +-
styles/src/common.ts                                 |  24 -
styles/src/style_tree/components.ts                  |   4 
styles/src/style_tree/contacts_popover.ts            |   9 
styles/src/style_tree/context_menu.ts                |  33 +-
styles/src/style_tree/copilot.ts                     |  83 +++---
styles/src/style_tree/editor.ts                      | 150 +++++++-------
styles/src/style_tree/incoming_call_notification.ts  |   4 
styles/src/style_tree/project_panel.ts               |   2 
styles/src/style_tree/project_shared_notification.ts |   4 
styles/src/style_tree/status_bar.ts                  |   4 
styles/src/theme/syntax.ts                           |  94 ++++----
styles/src/themes/gruvbox/gruvbox-common.ts          |   4 
styles/src/themes/one/one-dark.ts                    |   8 
styles/src/themes/one/one-light.ts                   |   8 
styles/src/themes/rose-pine/common.ts                |   4 
23 files changed, 317 insertions(+), 356 deletions(-)

Detailed changes

styles/.eslintrc.js 🔗

@@ -29,6 +29,17 @@ module.exports = {
     rules: {
         "linebreak-style": ["error", "unix"],
         semi: ["error", "never"],
+        "@typescript-eslint/naming-convention": [
+            "warn",
+            {
+                selector: ["property", "variableLike", "memberLike", "method"],
+                format: ["snake_case"],
+            },
+            {
+                selector: ["typeLike"],
+                format: ["PascalCase"],
+            },
+        ],
         "import/no-restricted-paths": [
             "error",
             {

styles/mod.py 🔗

@@ -1,42 +0,0 @@
-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-lock.json 🔗

@@ -31,6 +31,7 @@
                 "eslint": "^8.43.0",
                 "eslint-import-resolver-typescript": "^3.5.5",
                 "eslint-plugin-import": "^2.27.5",
+                "eslint-plugin-snakecasejs": "^2.2.0",
                 "typescript": "^5.1.5"
             }
         },
@@ -1719,6 +1720,15 @@
                 "semver": "bin/semver.js"
             }
         },
+        "node_modules/eslint-plugin-snakecasejs": {
+            "version": "2.2.0",
+            "resolved": "https://registry.npmjs.org/eslint-plugin-snakecasejs/-/eslint-plugin-snakecasejs-2.2.0.tgz",
+            "integrity": "sha512-vdQHT2VvzPpJHHPAVXjtyAZ/CfiJqNCa2d9kn6XMapWBN2Uio/nzL957TooNa6gumlHabBAhB5eSNmqwHgu8gA==",
+            "dev": true,
+            "engines": {
+                "node": ">=10.0.0"
+            }
+        },
         "node_modules/eslint-scope": {
             "version": "7.2.0",
             "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.0.tgz",

styles/package.json 🔗

@@ -41,6 +41,7 @@
         "eslint": "^8.43.0",
         "eslint-import-resolver-typescript": "^3.5.5",
         "eslint-plugin-import": "^2.27.5",
+        "eslint-plugin-snakecasejs": "^2.2.0",
         "typescript": "^5.1.5"
     }
 }

styles/src/build_licenses.ts 🔗

@@ -6,7 +6,7 @@ import { ThemeConfig } from "./common"
 const ACCEPTED_LICENSES_FILE = `${__dirname}/../../script/licenses/zed-licenses.toml`
 
 // Use the cargo-about configuration file as the source of truth for supported licenses.
-function parseAcceptedToml(file: string): string[] {
+function parse_accepted_toml(file: string): string[] {
     const buffer = fs.readFileSync(file).toString()
 
     const obj = toml.parse(buffer)
@@ -18,7 +18,7 @@ function parseAcceptedToml(file: string): string[] {
     return obj.accepted
 }
 
-function checkLicenses(themes: ThemeConfig[]) {
+function check_licenses(themes: ThemeConfig[]) {
     for (const theme of themes) {
         if (!theme.licenseFile) {
             throw Error(`Theme ${theme.name} should have a LICENSE file`)
@@ -26,25 +26,25 @@ function checkLicenses(themes: ThemeConfig[]) {
     }
 }
 
-function generateLicenseFile(themes: ThemeConfig[]) {
-    checkLicenses(themes)
+function generate_license_file(themes: ThemeConfig[]) {
+    check_licenses(themes)
     for (const theme of themes) {
-        const licenseText = fs.readFileSync(theme.licenseFile).toString()
-        writeLicense(theme.name, licenseText, theme.licenseUrl)
+        const license_text = fs.readFileSync(theme.licenseFile).toString()
+        write_license(theme.name, license_text, theme.licenseUrl)
     }
 }
 
-function writeLicense(
-    themeName: string,
-    licenseText: string,
-    licenseUrl?: string
+function write_license(
+    theme_name: string,
+    license_text: string,
+    license_url?: string
 ) {
     process.stdout.write(
-        licenseUrl
-            ? `## [${themeName}](${licenseUrl})\n\n${licenseText}\n********************************************************************************\n\n`
-            : `## ${themeName}\n\n${licenseText}\n********************************************************************************\n\n`
+        license_url
+            ? `## [${theme_name}](${license_url})\n\n${license_text}\n********************************************************************************\n\n`
+            : `## ${theme_name}\n\n${license_text}\n********************************************************************************\n\n`
     )
 }
 
-const acceptedLicenses = parseAcceptedToml(ACCEPTED_LICENSES_FILE)
-generateLicenseFile(themes)
+const accepted_licenses = parse_accepted_toml(ACCEPTED_LICENSES_FILE)
+generate_license_file(themes)

styles/src/build_themes.ts 🔗

@@ -6,38 +6,38 @@ import { ColorScheme, createColorScheme } from "./theme/color_scheme"
 import snakeCase from "./utils/snake_case"
 import { themes } from "./themes"
 
-const assetsDirectory = `${__dirname}/../../assets`
-const tempDirectory = fs.mkdtempSync(path.join(tmpdir(), "build-themes"))
+const assets_directory = `${__dirname}/../../assets`
+const temp_directory = fs.mkdtempSync(path.join(tmpdir(), "build-themes"))
 
 // Clear existing themes
-function clearThemes(themeDirectory: string) {
-    if (!fs.existsSync(themeDirectory)) {
-        fs.mkdirSync(themeDirectory, { recursive: true })
+function clear_themes(theme_directory: string) {
+    if (!fs.existsSync(theme_directory)) {
+        fs.mkdirSync(theme_directory, { recursive: true })
     } else {
-        for (const file of fs.readdirSync(themeDirectory)) {
+        for (const file of fs.readdirSync(theme_directory)) {
             if (file.endsWith(".json")) {
-                fs.unlinkSync(path.join(themeDirectory, file))
+                fs.unlinkSync(path.join(theme_directory, file))
             }
         }
     }
 }
 
-function writeThemes(colorSchemes: ColorScheme[], outputDirectory: string) {
-    clearThemes(outputDirectory)
-    for (const colorScheme of colorSchemes) {
-        const styleTree = snakeCase(app(colorScheme))
-        const styleTreeJSON = JSON.stringify(styleTree, null, 2)
-        const tempPath = path.join(tempDirectory, `${colorScheme.name}.json`)
-        const outPath = path.join(outputDirectory, `${colorScheme.name}.json`)
-        fs.writeFileSync(tempPath, styleTreeJSON)
-        fs.renameSync(tempPath, outPath)
-        console.log(`- ${outPath} created`)
+function write_themes(color_schemes: ColorScheme[], output_directory: string) {
+    clear_themes(output_directory)
+    for (const color_scheme of color_schemes) {
+        const style_tree = snakeCase(app(color_scheme))
+        const style_tree_json = JSON.stringify(style_tree, null, 2)
+        const temp_path = path.join(temp_directory, `${color_scheme.name}.json`)
+        const out_path = path.join(output_directory, `${color_scheme.name}.json`)
+        fs.writeFileSync(temp_path, style_tree_json)
+        fs.renameSync(temp_path, out_path)
+        console.log(`- ${out_path} created`)
     }
 }
 
-const colorSchemes: ColorScheme[] = themes.map((theme) =>
+const color_schemes: ColorScheme[] = themes.map((theme) =>
     createColorScheme(theme)
 )
 
 // Write new themes to theme directory
-writeThemes(colorSchemes, `${assetsDirectory}/themes`)
+write_themes(color_schemes, `${assets_directory}/themes`)

styles/src/build_tokens.ts 🔗

@@ -3,19 +3,19 @@ import * as path from "path"
 import { ColorScheme, createColorScheme } from "./common"
 import { themes } from "./themes"
 import { slugify } from "./utils/slugify"
-import { colorSchemeTokens } from "./theme/tokens/color_scheme"
+import { colorSchemeTokens as color_scheme_tokens } from "./theme/tokens/color_scheme"
 
 const TOKENS_DIRECTORY = path.join(__dirname, "..", "target", "tokens")
 const TOKENS_FILE = path.join(TOKENS_DIRECTORY, "$themes.json")
 const METADATA_FILE = path.join(TOKENS_DIRECTORY, "$metadata.json")
 
-function clearTokens(tokensDirectory: string) {
-    if (!fs.existsSync(tokensDirectory)) {
-        fs.mkdirSync(tokensDirectory, { recursive: true })
+function clear_tokens(tokens_directory: string) {
+    if (!fs.existsSync(tokens_directory)) {
+        fs.mkdirSync(tokens_directory, { recursive: true })
     } else {
-        for (const file of fs.readdirSync(tokensDirectory)) {
+        for (const file of fs.readdirSync(tokens_directory)) {
             if (file.endsWith(".json")) {
-                fs.unlinkSync(path.join(tokensDirectory, file))
+                fs.unlinkSync(path.join(tokens_directory, file))
             }
         }
     }
@@ -24,64 +24,64 @@ function clearTokens(tokensDirectory: string) {
 type TokenSet = {
     id: string
     name: string
-    selectedTokenSets: { [key: string]: "enabled" }
+    selected_token_sets: { [key: string]: "enabled" }
 }
 
-function buildTokenSetOrder(colorSchemes: ColorScheme[]): {
-    tokenSetOrder: string[]
+function build_token_set_order(theme: ColorScheme[]): {
+    token_set_order: string[]
 } {
-    const tokenSetOrder: string[] = colorSchemes.map((scheme) =>
+    const token_set_order: string[] = theme.map((scheme) =>
         scheme.name.toLowerCase().replace(/\s+/g, "_")
     )
-    return { tokenSetOrder }
+    return { token_set_order }
 }
 
-function buildThemesIndex(colorSchemes: ColorScheme[]): TokenSet[] {
-    const themesIndex: TokenSet[] = colorSchemes.map((scheme, index) => {
+function build_themes_index(theme: ColorScheme[]): TokenSet[] {
+    const themes_index: TokenSet[] = theme.map((scheme, index) => {
         const id = `${scheme.is_light ? "light" : "dark"}_${scheme.name
             .toLowerCase()
             .replace(/\s+/g, "_")}_${index}`
-        const selectedTokenSets: { [key: string]: "enabled" } = {}
-        const tokenSet = scheme.name.toLowerCase().replace(/\s+/g, "_")
-        selectedTokenSets[tokenSet] = "enabled"
+        const selected_token_sets: { [key: string]: "enabled" } = {}
+        const token_set = scheme.name.toLowerCase().replace(/\s+/g, "_")
+        selected_token_sets[token_set] = "enabled"
 
         return {
             id,
             name: `${scheme.name} - ${scheme.is_light ? "Light" : "Dark"}`,
-            selectedTokenSets,
+            selected_token_sets,
         }
     })
 
-    return themesIndex
+    return themes_index
 }
 
-function writeTokens(colorSchemes: ColorScheme[], tokensDirectory: string) {
-    clearTokens(tokensDirectory)
+function write_tokens(themes: ColorScheme[], tokens_directory: string) {
+    clear_tokens(tokens_directory)
 
-    for (const colorScheme of colorSchemes) {
-        const fileName = slugify(colorScheme.name) + ".json"
-        const tokens = colorSchemeTokens(colorScheme)
-        const tokensJSON = JSON.stringify(tokens, null, 2)
-        const outPath = path.join(tokensDirectory, fileName)
-        fs.writeFileSync(outPath, tokensJSON, { mode: 0o644 })
-        console.log(`- ${outPath} created`)
+    for (const theme of themes) {
+        const file_name = slugify(theme.name) + ".json"
+        const tokens = color_scheme_tokens(theme)
+        const tokens_json = JSON.stringify(tokens, null, 2)
+        const out_path = path.join(tokens_directory, file_name)
+        fs.writeFileSync(out_path, tokens_json, { mode: 0o644 })
+        console.log(`- ${out_path} created`)
     }
 
-    const themeIndexData = buildThemesIndex(colorSchemes)
+    const theme_index_data = build_themes_index(themes)
 
-    const themesJSON = JSON.stringify(themeIndexData, null, 2)
-    fs.writeFileSync(TOKENS_FILE, themesJSON, { mode: 0o644 })
+    const themes_json = JSON.stringify(theme_index_data, null, 2)
+    fs.writeFileSync(TOKENS_FILE, themes_json, { mode: 0o644 })
     console.log(`- ${TOKENS_FILE} created`)
 
-    const tokenSetOrderData = buildTokenSetOrder(colorSchemes)
+    const token_set_order_data = build_token_set_order(themes)
 
-    const metadataJSON = JSON.stringify(tokenSetOrderData, null, 2)
-    fs.writeFileSync(METADATA_FILE, metadataJSON, { mode: 0o644 })
+    const metadata_json = JSON.stringify(token_set_order_data, null, 2)
+    fs.writeFileSync(METADATA_FILE, metadata_json, { mode: 0o644 })
     console.log(`- ${METADATA_FILE} created`)
 }
 
-const colorSchemes: ColorScheme[] = themes.map((theme) =>
+const all_themes: ColorScheme[] = themes.map((theme) =>
     createColorScheme(theme)
 )
 
-writeTokens(colorSchemes, TOKENS_DIRECTORY)
+write_tokens(all_themes, TOKENS_DIRECTORY)

styles/src/build_types.ts 🔗

@@ -9,34 +9,34 @@ const BANNER = `/*
 const dirname = __dirname
 
 async function main() {
-    const schemasPath = path.join(dirname, "../../", "crates/theme/schemas")
-    const schemaFiles = (await fs.readdir(schemasPath)).filter((x) =>
+    const schemas_path = path.join(dirname, "../../", "crates/theme/schemas")
+    const schema_files = (await fs.readdir(schemas_path)).filter((x) =>
         x.endsWith(".json")
     )
 
-    const compiledTypes = new Set()
+    const compiled_types = new Set()
 
-    for (const filename of schemaFiles) {
-        const filePath = path.join(schemasPath, filename)
-        const fileContents = await fs.readFile(filePath)
-        const schema = JSON.parse(fileContents.toString())
+    for (const filename of schema_files) {
+        const file_path = path.join(schemas_path, filename)
+        const file_contents = await fs.readFile(file_path)
+        const schema = JSON.parse(file_contents.toString())
         const compiled = await compile(schema, schema.title, {
             bannerComment: "",
         })
-        const eachType = compiled.split("export")
-        for (const type of eachType) {
+        const each_type = compiled.split("export")
+        for (const type of each_type) {
             if (!type) {
                 continue
             }
-            compiledTypes.add("export " + type.trim())
+            compiled_types.add("export " + type.trim())
         }
     }
 
-    const output = BANNER + Array.from(compiledTypes).join("\n\n")
-    const outputPath = path.join(dirname, "../../styles/src/types/zed.ts")
+    const output = BANNER + Array.from(compiled_types).join("\n\n")
+    const output_path = path.join(dirname, "../../styles/src/types/zed.ts")
 
     try {
-        const existing = await fs.readFile(outputPath)
+        const existing = await fs.readFile(output_path)
         if (existing.toString() == output) {
             // Skip writing if it hasn't changed
             console.log("Schemas are up to date")
@@ -48,12 +48,12 @@ async function main() {
         }
     }
 
-    const typesDic = path.dirname(outputPath)
-    if (!fsSync.existsSync(typesDic)) {
-        await fs.mkdir(typesDic)
+    const types_dic = path.dirname(output_path)
+    if (!fsSync.existsSync(types_dic)) {
+        await fs.mkdir(types_dic)
     }
-    await fs.writeFile(outputPath, output)
-    console.log(`Wrote Typescript types to ${outputPath}`)
+    await fs.writeFile(output_path, output)
+    console.log(`Wrote Typescript types to ${output_path}`)
 }
 
 main().catch((e) => {

styles/src/common.ts 🔗

@@ -2,42 +2,26 @@ import chroma from "chroma-js"
 export * from "./theme"
 export { chroma }
 
-export const fontFamilies = {
+export const font_families = {
     sans: "Zed Sans",
     mono: "Zed Mono",
 }
 
-export const fontSizes = {
-    "3xs": 8,
+export const font_sizes = {
     "2xs": 10,
     xs: 12,
     sm: 14,
     md: 16,
-    lg: 18,
-    xl: 20,
+    lg: 18
 }
 
 export type FontWeight =
-    | "thin"
-    | "extra_light"
-    | "light"
     | "normal"
-    | "medium"
-    | "semibold"
     | "bold"
-    | "extra_bold"
-    | "black"
 
-export const fontWeights: { [key: string]: FontWeight } = {
-    thin: "thin",
-    extra_light: "extra_light",
-    light: "light",
+export const font_weights: { [key: string]: FontWeight } = {
     normal: "normal",
-    medium: "medium",
-    semibold: "semibold",
     bold: "bold",
-    extra_bold: "extra_bold",
-    black: "black",
 }
 
 export const sizes = {

styles/src/style_tree/components.ts 🔗

@@ -1,6 +1,6 @@
 import {
-    fontFamilies as font_families,
-    fontSizes as font_sizes,
+    font_families,
+    font_sizes,
     FontWeight,
 } from "../common"
 import { Layer, Styles, StyleSets, Style } from "../theme/color_scheme"

styles/src/style_tree/contacts_popover.ts 🔗

@@ -1,14 +1,13 @@
 import { ColorScheme } from "../theme/color_scheme"
 import { background, border } from "./components"
 
-export default function contacts_popover(colorScheme: ColorScheme): any {
-    const layer = colorScheme.middle
+export default function contacts_popover(theme: ColorScheme): any {
     return {
-        background: background(layer),
+        background: background(theme.middle),
         corner_radius: 6,
         padding: { top: 6, bottom: 6 },
-        shadow: colorScheme.popoverShadow,
-        border: border(layer),
+        shadow: theme.popoverShadow,
+        border: border(theme.middle),
         width: 300,
         height: 400,
     }

styles/src/style_tree/context_menu.ts 🔗

@@ -2,25 +2,24 @@ import { ColorScheme } from "../theme/color_scheme"
 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
+export default function context_menu(theme: ColorScheme): any {
     return {
-        background: background(layer),
+        background: background(theme.middle),
         corner_radius: 10,
         padding: 4,
-        shadow: colorScheme.popoverShadow,
-        border: border(layer),
-        keystrokeMargin: 30,
+        shadow: theme.popoverShadow,
+        border: border(theme.middle),
+        keystroke_margin: 30,
         item: toggleable({
             base: interactive({
                 base: {
-                    iconSpacing: 8,
+                    icon_spacing: 8,
                     icon_width: 14,
                     padding: { left: 6, right: 6, top: 2, bottom: 2 },
                     corner_radius: 6,
-                    label: text(layer, "sans", { size: "sm" }),
+                    label: text(theme.middle, "sans", { size: "sm" }),
                     keystroke: {
-                        ...text(layer, "sans", "variant", {
+                        ...text(theme.middle, "sans", "variant", {
                             size: "sm",
                             weight: "bold",
                         }),
@@ -29,10 +28,10 @@ export default function context_menu(colorScheme: ColorScheme): any {
                 },
                 state: {
                     hovered: {
-                        background: background(layer, "hovered"),
-                        label: text(layer, "sans", "hovered", { size: "sm" }),
+                        background: background(theme.middle, "hovered"),
+                        label: text(theme.middle, "sans", "hovered", { size: "sm" }),
                         keystroke: {
-                            ...text(layer, "sans", "hovered", {
+                            ...text(theme.middle, "sans", "hovered", {
                                 size: "sm",
                                 weight: "bold",
                             }),
@@ -40,27 +39,27 @@ export default function context_menu(colorScheme: ColorScheme): any {
                         },
                     },
                     clicked: {
-                        background: background(layer, "pressed"),
+                        background: background(theme.middle, "pressed"),
                     },
                 },
             }),
             state: {
                 active: {
                     default: {
-                        background: background(layer, "active"),
+                        background: background(theme.middle, "active"),
                     },
                     hovered: {
-                        background: background(layer, "hovered"),
+                        background: background(theme.middle, "hovered"),
                     },
                     clicked: {
-                        background: background(layer, "pressed"),
+                        background: background(theme.middle, "pressed"),
                     },
                 },
             },
         }),
 
         separator: {
-            background: border_color(layer),
+            background: border_color(theme.middle),
             margin: { top: 2, bottom: 2 },
         },
     }

styles/src/style_tree/copilot.ts 🔗

@@ -1,17 +1,16 @@
 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 {
-    const layer = colorScheme.middle
+export default function copilot(theme: ColorScheme): any {
 
     const content_width = 264
 
-    const ctaButton =
+    const cta_button =
         // Copied from welcome screen. FIXME: Move this into a ZDS component
         interactive({
             base: {
-                background: background(layer),
-                border: border(layer, "default"),
+                background: background(theme.middle),
+                border: border(theme.middle, "default"),
                 corner_radius: 4,
                 margin: {
                     top: 4,
@@ -25,22 +24,22 @@ export default function copilot(colorScheme: ColorScheme): any {
                     left: 7,
                     right: 7,
                 },
-                ...text(layer, "sans", "default", { size: "sm" }),
+                ...text(theme.middle, "sans", "default", { size: "sm" }),
             },
             state: {
                 hovered: {
-                    ...text(layer, "sans", "default", { size: "sm" }),
-                    background: background(layer, "hovered"),
-                    border: border(layer, "active"),
+                    ...text(theme.middle, "sans", "default", { size: "sm" }),
+                    background: background(theme.middle, "hovered"),
+                    border: border(theme.middle, "active"),
                 },
             },
         })
 
     return {
-        outLinkIcon: interactive({
+        out_link_icon: interactive({
             base: {
                 icon: svg(
-                    foreground(layer, "variant"),
+                    foreground(theme.middle, "variant"),
                     "icons/link_out_12.svg",
                     12,
                     12
@@ -53,21 +52,21 @@ export default function copilot(colorScheme: ColorScheme): any {
             state: {
                 hovered: {
                     icon: {
-                        color: foreground(layer, "hovered"),
+                        color: foreground(theme.middle, "hovered"),
                     },
                 },
             },
         }),
 
         modal: {
-            titleText: {
+            title_text: {
                 default: {
-                    ...text(layer, "sans", { size: "xs", weight: "bold" }),
+                    ...text(theme.middle, "sans", { size: "xs", weight: "bold" }),
                 },
             },
             titlebar: {
-                background: background(colorScheme.lowest),
-                border: border(layer, "active"),
+                background: background(theme.lowest),
+                border: border(theme.middle, "active"),
                 padding: {
                     top: 4,
                     bottom: 4,
@@ -76,7 +75,7 @@ export default function copilot(colorScheme: ColorScheme): any {
                 },
             },
             container: {
-                background: background(colorScheme.lowest),
+                background: background(theme.lowest),
                 padding: {
                     top: 0,
                     left: 0,
@@ -84,10 +83,10 @@ export default function copilot(colorScheme: ColorScheme): any {
                     bottom: 8,
                 },
             },
-            closeIcon: interactive({
+            close_icon: interactive({
                 base: {
                     icon: svg(
-                        foreground(layer, "variant"),
+                        foreground(theme.middle, "variant"),
                         "icons/x_mark_8.svg",
                         8,
                         8
@@ -108,7 +107,7 @@ export default function copilot(colorScheme: ColorScheme): any {
                 state: {
                     hovered: {
                         icon: svg(
-                            foreground(layer, "on"),
+                            foreground(theme.middle, "on"),
                             "icons/x_mark_8.svg",
                             8,
                             8
@@ -116,7 +115,7 @@ export default function copilot(colorScheme: ColorScheme): any {
                     },
                     clicked: {
                         icon: svg(
-                            foreground(layer, "base"),
+                            foreground(theme.middle, "base"),
                             "icons/x_mark_8.svg",
                             8,
                             8
@@ -133,11 +132,11 @@ export default function copilot(colorScheme: ColorScheme): any {
         auth: {
             content_width,
 
-            ctaButton,
+            cta_button,
 
             header: {
                 icon: svg(
-                    foreground(layer, "default"),
+                    foreground(theme.middle, "default"),
                     "icons/zed_plus_copilot_32.svg",
                     92,
                     32
@@ -154,7 +153,7 @@ export default function copilot(colorScheme: ColorScheme): any {
 
             prompting: {
                 subheading: {
-                    ...text(layer, "sans", { size: "xs" }),
+                    ...text(theme.middle, "sans", { size: "xs" }),
                     margin: {
                         top: 6,
                         bottom: 12,
@@ -164,19 +163,19 @@ export default function copilot(colorScheme: ColorScheme): any {
                 },
 
                 hint: {
-                    ...text(layer, "sans", { size: "xs", color: "#838994" }),
+                    ...text(theme.middle, "sans", { size: "xs", color: "#838994" }),
                     margin: {
                         top: 6,
                         bottom: 2,
                     },
                 },
 
-                deviceCode: {
-                    text: text(layer, "mono", { size: "sm" }),
+                device_code: {
+                    text: text(theme.middle, "mono", { size: "sm" }),
                     cta: {
-                        ...ctaButton,
-                        background: background(colorScheme.lowest),
-                        border: border(colorScheme.lowest, "inverted"),
+                        ...cta_button,
+                        background: background(theme.lowest),
+                        border: border(theme.lowest, "inverted"),
                         padding: {
                             top: 0,
                             bottom: 0,
@@ -189,7 +188,7 @@ export default function copilot(colorScheme: ColorScheme): any {
                         },
                     },
                     left: content_width / 2,
-                    leftContainer: {
+                    left_container: {
                         padding: {
                             top: 3,
                             bottom: 3,
@@ -198,9 +197,9 @@ export default function copilot(colorScheme: ColorScheme): any {
                         },
                     },
                     right: (content_width * 1) / 3,
-                    rightContainer: interactive({
+                    right_container: interactive({
                         base: {
-                            border: border(colorScheme.lowest, "inverted", {
+                            border: border(theme.lowest, "inverted", {
                                 bottom: false,
                                 right: false,
                                 top: false,
@@ -215,7 +214,7 @@ export default function copilot(colorScheme: ColorScheme): any {
                         },
                         state: {
                             hovered: {
-                                border: border(layer, "active", {
+                                border: border(theme.middle, "active", {
                                     bottom: false,
                                     right: false,
                                     top: false,
@@ -227,9 +226,9 @@ export default function copilot(colorScheme: ColorScheme): any {
                 },
             },
 
-            notAuthorized: {
+            not_authorized: {
                 subheading: {
-                    ...text(layer, "sans", { size: "xs" }),
+                    ...text(theme.middle, "sans", { size: "xs" }),
 
                     margin: {
                         top: 16,
@@ -240,12 +239,12 @@ export default function copilot(colorScheme: ColorScheme): any {
                 },
 
                 warning: {
-                    ...text(layer, "sans", {
+                    ...text(theme.middle, "sans", {
                         size: "xs",
-                        color: foreground(layer, "warning"),
+                        color: foreground(theme.middle, "warning"),
                     }),
-                    border: border(layer, "warning"),
-                    background: background(layer, "warning"),
+                    border: border(theme.middle, "warning"),
+                    background: background(theme.middle, "warning"),
                     corner_radius: 2,
                     padding: {
                         top: 4,
@@ -263,7 +262,7 @@ export default function copilot(colorScheme: ColorScheme): any {
 
             authorized: {
                 subheading: {
-                    ...text(layer, "sans", { size: "xs" }),
+                    ...text(theme.middle, "sans", { size: "xs" }),
 
                     margin: {
                         top: 16,
@@ -272,7 +271,7 @@ export default function copilot(colorScheme: ColorScheme): any {
                 },
 
                 hint: {
-                    ...text(layer, "sans", { size: "xs", color: "#838994" }),
+                    ...text(theme.middle, "sans", { size: "xs", color: "#838994" }),
                     margin: {
                         top: 24,
                         bottom: 4,

styles/src/style_tree/editor.ts 🔗

@@ -7,17 +7,17 @@ import {
     foreground,
     text,
 } from "./components"
-import hoverPopover from "./hover_popover"
+import hover_popover from "./hover_popover"
 
-import { buildSyntax } from "../theme/syntax"
+import { build_syntax } from "../theme/syntax"
 import { interactive, toggleable } from "../element"
 
-export default function editor(colorScheme: ColorScheme): any {
-    const { is_light } = colorScheme
+export default function editor(theme: ColorScheme): any {
+    const { is_light } = theme
 
-    const layer = colorScheme.highest
+    const layer = theme.highest
 
-    const autocompleteItem = {
+    const autocomplete_item = {
         corner_radius: 6,
         padding: {
             bottom: 2,
@@ -29,7 +29,7 @@ export default function editor(colorScheme: ColorScheme): any {
 
     function diagnostic(layer: Layer, styleSet: StyleSets) {
         return {
-            textScaleFactor: 0.857,
+            text_scale_factor: 0.857,
             header: {
                 border: border(layer, {
                     top: true,
@@ -37,7 +37,7 @@ export default function editor(colorScheme: ColorScheme): any {
             },
             message: {
                 text: text(layer, "sans", styleSet, "default", { size: "sm" }),
-                highlightText: text(layer, "sans", styleSet, "default", {
+                highlight_text: text(layer, "sans", styleSet, "default", {
                     size: "sm",
                     weight: "bold",
                 }),
@@ -45,16 +45,16 @@ export default function editor(colorScheme: ColorScheme): any {
         }
     }
 
-    const syntax = buildSyntax(colorScheme)
+    const syntax = build_syntax(theme)
 
     return {
-        textColor: syntax.primary.color,
+        text_color: syntax.primary.color,
         background: background(layer),
-        activeLineBackground: withOpacity(background(layer, "on"), 0.75),
-        highlightedLineBackground: background(layer, "on"),
+        active_line_background: withOpacity(background(layer, "on"), 0.75),
+        highlighted_line_background: background(layer, "on"),
         // Inline autocomplete suggestions, Co-pilot suggestions, etc.
         suggestion: syntax.predictive,
-        codeActions: {
+        code_actions: {
             indicator: toggleable({
                 base: interactive({
                     base: {
@@ -84,12 +84,12 @@ export default function editor(colorScheme: ColorScheme): any {
                 },
             }),
 
-            verticalScale: 0.55,
+            vertical_scale: 0.55,
         },
         folds: {
-            iconMarginScale: 2.5,
-            foldedIcon: "icons/chevron_right_8.svg",
-            foldableIcon: "icons/chevron_down_8.svg",
+            icon_margin_scale: 2.5,
+            folded_icon: "icons/chevron_right_8.svg",
+            foldable_icon: "icons/chevron_down_8.svg",
             indicator: toggleable({
                 base: interactive({
                     base: {
@@ -116,20 +116,20 @@ export default function editor(colorScheme: ColorScheme): any {
                 },
             }),
             ellipses: {
-                textColor: colorScheme.ramps.neutral(0.71).hex(),
-                corner_radiusFactor: 0.15,
+                text_color: theme.ramps.neutral(0.71).hex(),
+                corner_radius_factor: 0.15,
                 background: {
                     // Copied from hover_popover highlight
                     default: {
-                        color: colorScheme.ramps.neutral(0.5).alpha(0.0).hex(),
+                        color: theme.ramps.neutral(0.5).alpha(0.0).hex(),
                     },
 
                     hovered: {
-                        color: colorScheme.ramps.neutral(0.5).alpha(0.5).hex(),
+                        color: theme.ramps.neutral(0.5).alpha(0.5).hex(),
                     },
 
                     clicked: {
-                        color: colorScheme.ramps.neutral(0.5).alpha(0.7).hex(),
+                        color: theme.ramps.neutral(0.5).alpha(0.7).hex(),
                     },
                 },
             },
@@ -137,14 +137,14 @@ export default function editor(colorScheme: ColorScheme): any {
         },
         diff: {
             deleted: is_light
-                ? colorScheme.ramps.red(0.5).hex()
-                : colorScheme.ramps.red(0.4).hex(),
+                ? theme.ramps.red(0.5).hex()
+                : theme.ramps.red(0.4).hex(),
             modified: is_light
-                ? colorScheme.ramps.yellow(0.5).hex()
-                : colorScheme.ramps.yellow(0.5).hex(),
+                ? theme.ramps.yellow(0.5).hex()
+                : theme.ramps.yellow(0.5).hex(),
             inserted: is_light
-                ? colorScheme.ramps.green(0.4).hex()
-                : colorScheme.ramps.green(0.5).hex(),
+                ? theme.ramps.green(0.4).hex()
+                : theme.ramps.green(0.5).hex(),
             removedWidthEm: 0.275,
             widthEm: 0.15,
             corner_radius: 0.05,
@@ -156,7 +156,7 @@ export default function editor(colorScheme: ColorScheme): any {
             foreground(layer, "accent"),
             0.1
         ),
-        documentHighlightWriteBackground: colorScheme.ramps
+        documentHighlightWriteBackground: theme.ramps
             .neutral(0.5)
             .alpha(0.4)
             .hex(), // TODO: This was blend * 2
@@ -167,98 +167,98 @@ export default function editor(colorScheme: ColorScheme): any {
         lineNumberActive: foreground(layer),
         renameFade: 0.6,
         unnecessaryCodeFade: 0.5,
-        selection: colorScheme.players[0],
-        whitespace: colorScheme.ramps.neutral(0.5).hex(),
+        selection: theme.players[0],
+        whitespace: theme.ramps.neutral(0.5).hex(),
         guestSelections: [
-            colorScheme.players[1],
-            colorScheme.players[2],
-            colorScheme.players[3],
-            colorScheme.players[4],
-            colorScheme.players[5],
-            colorScheme.players[6],
-            colorScheme.players[7],
+            theme.players[1],
+            theme.players[2],
+            theme.players[3],
+            theme.players[4],
+            theme.players[5],
+            theme.players[6],
+            theme.players[7],
         ],
         autocomplete: {
-            background: background(colorScheme.middle),
+            background: background(theme.middle),
             corner_radius: 8,
             padding: 4,
             margin: {
                 left: -14,
             },
-            border: border(colorScheme.middle),
-            shadow: colorScheme.popoverShadow,
-            matchHighlight: foreground(colorScheme.middle, "accent"),
-            item: autocompleteItem,
+            border: border(theme.middle),
+            shadow: theme.popoverShadow,
+            matchHighlight: foreground(theme.middle, "accent"),
+            item: autocomplete_item,
             hoveredItem: {
-                ...autocompleteItem,
+                ...autocomplete_item,
                 matchHighlight: foreground(
-                    colorScheme.middle,
+                    theme.middle,
                     "accent",
                     "hovered"
                 ),
-                background: background(colorScheme.middle, "hovered"),
+                background: background(theme.middle, "hovered"),
             },
             selectedItem: {
-                ...autocompleteItem,
+                ...autocomplete_item,
                 matchHighlight: foreground(
-                    colorScheme.middle,
+                    theme.middle,
                     "accent",
                     "active"
                 ),
-                background: background(colorScheme.middle, "active"),
+                background: background(theme.middle, "active"),
             },
         },
         diagnosticHeader: {
-            background: background(colorScheme.middle),
+            background: background(theme.middle),
             icon_widthFactor: 1.5,
             textScaleFactor: 0.857,
-            border: border(colorScheme.middle, {
+            border: border(theme.middle, {
                 bottom: true,
                 top: true,
             }),
             code: {
-                ...text(colorScheme.middle, "mono", { size: "sm" }),
+                ...text(theme.middle, "mono", { size: "sm" }),
                 margin: {
                     left: 10,
                 },
             },
             source: {
-                text: text(colorScheme.middle, "sans", {
+                text: text(theme.middle, "sans", {
                     size: "sm",
                     weight: "bold",
                 }),
             },
             message: {
-                highlightText: text(colorScheme.middle, "sans", {
+                highlightText: text(theme.middle, "sans", {
                     size: "sm",
                     weight: "bold",
                 }),
-                text: text(colorScheme.middle, "sans", { size: "sm" }),
+                text: text(theme.middle, "sans", { size: "sm" }),
             },
         },
         diagnosticPathHeader: {
-            background: background(colorScheme.middle),
+            background: background(theme.middle),
             textScaleFactor: 0.857,
-            filename: text(colorScheme.middle, "mono", { size: "sm" }),
+            filename: text(theme.middle, "mono", { size: "sm" }),
             path: {
-                ...text(colorScheme.middle, "mono", { size: "sm" }),
+                ...text(theme.middle, "mono", { size: "sm" }),
                 margin: {
                     left: 12,
                 },
             },
         },
-        errorDiagnostic: diagnostic(colorScheme.middle, "negative"),
-        warningDiagnostic: diagnostic(colorScheme.middle, "warning"),
-        informationDiagnostic: diagnostic(colorScheme.middle, "accent"),
-        hintDiagnostic: diagnostic(colorScheme.middle, "warning"),
-        invalidErrorDiagnostic: diagnostic(colorScheme.middle, "base"),
-        invalidHintDiagnostic: diagnostic(colorScheme.middle, "base"),
-        invalidInformationDiagnostic: diagnostic(colorScheme.middle, "base"),
-        invalidWarningDiagnostic: diagnostic(colorScheme.middle, "base"),
-        hoverPopover: hoverPopover(colorScheme),
+        errorDiagnostic: diagnostic(theme.middle, "negative"),
+        warningDiagnostic: diagnostic(theme.middle, "warning"),
+        informationDiagnostic: diagnostic(theme.middle, "accent"),
+        hintDiagnostic: diagnostic(theme.middle, "warning"),
+        invalidErrorDiagnostic: diagnostic(theme.middle, "base"),
+        invalidHintDiagnostic: diagnostic(theme.middle, "base"),
+        invalidInformationDiagnostic: diagnostic(theme.middle, "base"),
+        invalidWarningDiagnostic: diagnostic(theme.middle, "base"),
+        hover_popover: hover_popover(theme),
         linkDefinition: {
-            color: syntax.linkUri.color,
-            underline: syntax.linkUri.underline,
+            color: syntax.link_uri.color,
+            underline: syntax.link_uri.underline,
         },
         jumpIcon: interactive({
             base: {
@@ -299,14 +299,14 @@ export default function editor(colorScheme: ColorScheme): any {
             },
             git: {
                 deleted: is_light
-                    ? withOpacity(colorScheme.ramps.red(0.5).hex(), 0.8)
-                    : withOpacity(colorScheme.ramps.red(0.4).hex(), 0.8),
+                    ? withOpacity(theme.ramps.red(0.5).hex(), 0.8)
+                    : withOpacity(theme.ramps.red(0.4).hex(), 0.8),
                 modified: is_light
-                    ? withOpacity(colorScheme.ramps.yellow(0.5).hex(), 0.8)
-                    : withOpacity(colorScheme.ramps.yellow(0.4).hex(), 0.8),
+                    ? withOpacity(theme.ramps.yellow(0.5).hex(), 0.8)
+                    : withOpacity(theme.ramps.yellow(0.4).hex(), 0.8),
                 inserted: is_light
-                    ? withOpacity(colorScheme.ramps.green(0.5).hex(), 0.8)
-                    : withOpacity(colorScheme.ramps.green(0.4).hex(), 0.8),
+                    ? withOpacity(theme.ramps.green(0.5).hex(), 0.8)
+                    : withOpacity(theme.ramps.green(0.4).hex(), 0.8),
             },
         },
         compositionMark: {

styles/src/style_tree/incoming_call_notification.ts 🔗

@@ -39,14 +39,14 @@ export default function incoming_call_notification(
             border: border(layer, { left: true, bottom: true }),
             ...text(layer, "sans", "positive", {
                 size: "xs",
-                weight: "extra_bold",
+                weight: "bold",
             }),
         },
         declineButton: {
             border: border(layer, { left: true }),
             ...text(layer, "sans", "negative", {
                 size: "xs",
-                weight: "extra_bold",
+                weight: "bold",
             }),
         },
     }

styles/src/style_tree/project_panel.ts 🔗

@@ -48,7 +48,7 @@ export default function project_panel(theme: ColorScheme): any {
             background: background(layer),
             iconColor: foreground(layer, "variant"),
             iconSize: 7,
-            iconSpacing: 5,
+            icon_spacing: 5,
             text: text(layer, "mono", "variant", { size: "sm" }),
             status: {
                 ...git_status,

styles/src/style_tree/project_shared_notification.ts 🔗

@@ -40,14 +40,14 @@ export default function project_shared_notification(
             border: border(layer, { left: true, bottom: true }),
             ...text(layer, "sans", "accent", {
                 size: "xs",
-                weight: "extra_bold",
+                weight: "bold",
             }),
         },
         dismissButton: {
             border: border(layer, { left: true }),
             ...text(layer, "sans", "variant", {
                 size: "xs",
-                weight: "extra_bold",
+                weight: "bold",
             }),
         },
     }

styles/src/style_tree/status_bar.ts 🔗

@@ -41,7 +41,7 @@ export default function status_bar(colorScheme: ColorScheme): any {
         lspStatus: interactive({
             base: {
                 ...diagnosticStatusContainer,
-                iconSpacing: 4,
+                icon_spacing: 4,
                 icon_width: 14,
                 height: 18,
                 message: text(layer, "sans"),
@@ -65,7 +65,7 @@ export default function status_bar(colorScheme: ColorScheme): any {
             base: {
                 height: 20,
                 icon_width: 16,
-                iconSpacing: 2,
+                icon_spacing: 2,
                 summarySpacing: 6,
                 text: text(layer, "sans", { size: "sm" }),
                 iconColorOk: foreground(layer, "variant"),

styles/src/theme/syntax.ts 🔗

@@ -1,5 +1,5 @@
 import deepmerge from "deepmerge"
-import { FontWeight, fontWeights } from "../common"
+import { FontWeight, font_weights } from "../common"
 import { ColorScheme } from "./color_scheme"
 import chroma from "chroma-js"
 
@@ -22,8 +22,8 @@ export interface Syntax {
     emphasis: SyntaxHighlightStyle
     "emphasis.strong": SyntaxHighlightStyle
     title: SyntaxHighlightStyle
-    linkUri: SyntaxHighlightStyle
-    linkText: SyntaxHighlightStyle
+    link_uri: SyntaxHighlightStyle
+    link_text: SyntaxHighlightStyle
     /** md: indented_code_block, fenced_code_block, code_span */
     "text.literal": SyntaxHighlightStyle
 
@@ -116,13 +116,13 @@ export interface Syntax {
 
 export type ThemeSyntax = Partial<Syntax>
 
-const defaultSyntaxHighlightStyle: Omit<SyntaxHighlightStyle, "color"> = {
+const default_syntaxHighlightStyle: Omit<SyntaxHighlightStyle, "color"> = {
     weight: "normal",
     underline: false,
     italic: false,
 }
 
-function buildDefaultSyntax(colorScheme: ColorScheme): Syntax {
+function build_default_syntax(color_scheme: ColorScheme): Syntax {
     // Make a temporary object that is allowed to be missing
     // the "color" property for each style
     const syntax: {
@@ -132,7 +132,7 @@ function buildDefaultSyntax(colorScheme: ColorScheme): Syntax {
     // then spread the default to each style
     for (const key of Object.keys({} as Syntax)) {
         syntax[key as keyof Syntax] = {
-            ...defaultSyntaxHighlightStyle,
+            ...default_syntaxHighlightStyle,
         }
     }
 
@@ -140,35 +140,35 @@ function buildDefaultSyntax(colorScheme: ColorScheme): Syntax {
     // predictive color distinct from any other color in the theme
     const predictive = chroma
         .mix(
-            colorScheme.ramps.neutral(0.4).hex(),
-            colorScheme.ramps.blue(0.4).hex(),
+            color_scheme.ramps.neutral(0.4).hex(),
+            color_scheme.ramps.blue(0.4).hex(),
             0.45,
             "lch"
         )
         .hex()
 
     const color = {
-        primary: colorScheme.ramps.neutral(1).hex(),
-        comment: colorScheme.ramps.neutral(0.71).hex(),
-        punctuation: colorScheme.ramps.neutral(0.86).hex(),
+        primary: color_scheme.ramps.neutral(1).hex(),
+        comment: color_scheme.ramps.neutral(0.71).hex(),
+        punctuation: color_scheme.ramps.neutral(0.86).hex(),
         predictive: predictive,
-        emphasis: colorScheme.ramps.blue(0.5).hex(),
-        string: colorScheme.ramps.orange(0.5).hex(),
-        function: colorScheme.ramps.yellow(0.5).hex(),
-        type: colorScheme.ramps.cyan(0.5).hex(),
-        constructor: colorScheme.ramps.blue(0.5).hex(),
-        variant: colorScheme.ramps.blue(0.5).hex(),
-        property: colorScheme.ramps.blue(0.5).hex(),
-        enum: colorScheme.ramps.orange(0.5).hex(),
-        operator: colorScheme.ramps.orange(0.5).hex(),
-        number: colorScheme.ramps.green(0.5).hex(),
-        boolean: colorScheme.ramps.green(0.5).hex(),
-        constant: colorScheme.ramps.green(0.5).hex(),
-        keyword: colorScheme.ramps.blue(0.5).hex(),
+        emphasis: color_scheme.ramps.blue(0.5).hex(),
+        string: color_scheme.ramps.orange(0.5).hex(),
+        function: color_scheme.ramps.yellow(0.5).hex(),
+        type: color_scheme.ramps.cyan(0.5).hex(),
+        constructor: color_scheme.ramps.blue(0.5).hex(),
+        variant: color_scheme.ramps.blue(0.5).hex(),
+        property: color_scheme.ramps.blue(0.5).hex(),
+        enum: color_scheme.ramps.orange(0.5).hex(),
+        operator: color_scheme.ramps.orange(0.5).hex(),
+        number: color_scheme.ramps.green(0.5).hex(),
+        boolean: color_scheme.ramps.green(0.5).hex(),
+        constant: color_scheme.ramps.green(0.5).hex(),
+        keyword: color_scheme.ramps.blue(0.5).hex(),
     }
 
     // Then assign colors and use Syntax to enforce each style getting it's own color
-    const defaultSyntax: Syntax = {
+    const default_syntax: Syntax = {
         ...syntax,
         comment: {
             color: color.comment,
@@ -188,18 +188,18 @@ function buildDefaultSyntax(colorScheme: ColorScheme): Syntax {
         },
         "emphasis.strong": {
             color: color.emphasis,
-            weight: fontWeights.bold,
+            weight: font_weights.bold,
         },
         title: {
             color: color.primary,
-            weight: fontWeights.bold,
+            weight: font_weights.bold,
         },
-        linkUri: {
-            color: colorScheme.ramps.green(0.5).hex(),
+        link_uri: {
+            color: color_scheme.ramps.green(0.5).hex(),
             underline: true,
         },
-        linkText: {
-            color: colorScheme.ramps.orange(0.5).hex(),
+        link_text: {
+            color: color_scheme.ramps.orange(0.5).hex(),
             italic: true,
         },
         "text.literal": {
@@ -215,7 +215,7 @@ function buildDefaultSyntax(colorScheme: ColorScheme): Syntax {
             color: color.punctuation,
         },
         "punctuation.special": {
-            color: colorScheme.ramps.neutral(0.86).hex(),
+            color: color_scheme.ramps.neutral(0.86).hex(),
         },
         "punctuation.list_marker": {
             color: color.punctuation,
@@ -236,10 +236,10 @@ function buildDefaultSyntax(colorScheme: ColorScheme): Syntax {
             color: color.string,
         },
         constructor: {
-            color: colorScheme.ramps.blue(0.5).hex(),
+            color: color_scheme.ramps.blue(0.5).hex(),
         },
         variant: {
-            color: colorScheme.ramps.blue(0.5).hex(),
+            color: color_scheme.ramps.blue(0.5).hex(),
         },
         type: {
             color: color.type,
@@ -248,16 +248,16 @@ function buildDefaultSyntax(colorScheme: ColorScheme): Syntax {
             color: color.primary,
         },
         label: {
-            color: colorScheme.ramps.blue(0.5).hex(),
+            color: color_scheme.ramps.blue(0.5).hex(),
         },
         tag: {
-            color: colorScheme.ramps.blue(0.5).hex(),
+            color: color_scheme.ramps.blue(0.5).hex(),
         },
         attribute: {
-            color: colorScheme.ramps.blue(0.5).hex(),
+            color: color_scheme.ramps.blue(0.5).hex(),
         },
         property: {
-            color: colorScheme.ramps.blue(0.5).hex(),
+            color: color_scheme.ramps.blue(0.5).hex(),
         },
         constant: {
             color: color.constant,
@@ -288,17 +288,17 @@ function buildDefaultSyntax(colorScheme: ColorScheme): Syntax {
         },
     }
 
-    return defaultSyntax
+    return default_syntax
 }
 
-function mergeSyntax(defaultSyntax: Syntax, colorScheme: ColorScheme): Syntax {
-    if (!colorScheme.syntax) {
-        return defaultSyntax
+function merge_syntax(default_syntax: Syntax, color_scheme: ColorScheme): Syntax {
+    if (!color_scheme.syntax) {
+        return default_syntax
     }
 
     return deepmerge<Syntax, Partial<ThemeSyntax>>(
-        defaultSyntax,
-        colorScheme.syntax,
+        default_syntax,
+        color_scheme.syntax,
         {
             arrayMerge: (destinationArray, sourceArray) => [
                 ...destinationArray,
@@ -308,10 +308,10 @@ function mergeSyntax(defaultSyntax: Syntax, colorScheme: ColorScheme): Syntax {
     )
 }
 
-export function buildSyntax(colorScheme: ColorScheme): Syntax {
-    const defaultSyntax: Syntax = buildDefaultSyntax(colorScheme)
+export function build_syntax(color_scheme: ColorScheme): Syntax {
+    const default_syntax: Syntax = build_default_syntax(color_scheme)
 
-    const syntax = mergeSyntax(defaultSyntax, colorScheme)
+    const syntax = merge_syntax(default_syntax, color_scheme)
 
     return syntax
 }

styles/src/themes/gruvbox/gruvbox-common.ts 🔗

@@ -238,8 +238,8 @@ const buildVariant = (variant: Variant): ThemeConfig => {
         variable: { color: colors.blue },
         property: { color: neutral[isLight ? 0 : 8] },
         embedded: { color: colors.aqua },
-        linkText: { color: colors.aqua },
-        linkUri: { color: colors.purple },
+        link_text: { color: colors.aqua },
+        link_uri: { color: colors.purple },
         title: { color: colors.green },
     }
 

styles/src/themes/one/one-dark.ts 🔗

@@ -1,6 +1,6 @@
 import {
     chroma,
-    fontWeights,
+    font_weights,
     colorRamp,
     ThemeAppearance,
     ThemeLicenseType,
@@ -57,8 +57,8 @@ export const theme: ThemeConfig = {
             "emphasis.strong": { color: color.orange },
             function: { color: color.blue },
             keyword: { color: color.purple },
-            linkText: { color: color.blue, italic: false },
-            linkUri: { color: color.teal },
+            link_text: { color: color.blue, italic: false },
+            link_uri: { color: color.teal },
             number: { color: color.orange },
             constant: { color: color.yellow },
             operator: { color: color.teal },
@@ -68,7 +68,7 @@ export const theme: ThemeConfig = {
             "punctuation.list_marker": { color: color.red },
             "punctuation.special": { color: color.darkRed },
             string: { color: color.green },
-            title: { color: color.red, weight: fontWeights.normal },
+            title: { color: color.red, weight: font_weights.normal },
             "text.literal": { color: color.green },
             type: { color: color.teal },
             "variable.special": { color: color.orange },

styles/src/themes/one/one-light.ts 🔗

@@ -1,6 +1,6 @@
 import {
     chroma,
-    fontWeights,
+    font_weights,
     colorRamp,
     ThemeAppearance,
     ThemeLicenseType,
@@ -59,8 +59,8 @@ export const theme: ThemeConfig = {
             "emphasis.strong": { color: color.orange },
             function: { color: color.blue },
             keyword: { color: color.purple },
-            linkText: { color: color.blue },
-            linkUri: { color: color.teal },
+            link_text: { color: color.blue },
+            link_uri: { color: color.teal },
             number: { color: color.orange },
             operator: { color: color.teal },
             primary: { color: color.black },
@@ -69,7 +69,7 @@ export const theme: ThemeConfig = {
             "punctuation.list_marker": { color: color.red },
             "punctuation.special": { color: color.darkRed },
             string: { color: color.green },
-            title: { color: color.red, weight: fontWeights.normal },
+            title: { color: color.red, weight: font_weights.normal },
             "text.literal": { color: color.green },
             type: { color: color.teal },
             "variable.special": { color: color.orange },

styles/src/themes/rose-pine/common.ts 🔗

@@ -69,7 +69,7 @@ export const syntax = (c: typeof color.default): Partial<ThemeSyntax> => {
         tag: { color: c.foam },
         "function.method": { color: c.rose },
         title: { color: c.gold },
-        linkText: { color: c.foam, italic: false },
-        linkUri: { color: c.rose },
+        link_text: { color: c.foam, italic: false },
+        link_uri: { color: c.rose },
     }
 }