diff --git a/styles/.eslintrc.js b/styles/.eslintrc.js index c131089e14..0b4af9dcbc 100644 --- a/styles/.eslintrc.js +++ b/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", { diff --git a/styles/mod.py b/styles/mod.py deleted file mode 100644 index 77238e5b45..0000000000 --- a/styles/mod.py +++ /dev/null @@ -1,42 +0,0 @@ -import os, sys, re - - -def camel_to_snake(inputstring): - REG = r'(?=10.0.0" + } + }, "node_modules/eslint-scope": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.0.tgz", diff --git a/styles/package.json b/styles/package.json index 06621e8cc1..1b90b81048 100644 --- a/styles/package.json +++ b/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" } } diff --git a/styles/src/build_licenses.ts b/styles/src/build_licenses.ts index 93a2bd302a..88cefe15c7 100644 --- a/styles/src/build_licenses.ts +++ b/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) diff --git a/styles/src/build_themes.ts b/styles/src/build_themes.ts index 3ce1688152..132b91e582 100644 --- a/styles/src/build_themes.ts +++ b/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`) diff --git a/styles/src/build_tokens.ts b/styles/src/build_tokens.ts index e1878efed7..4e420d679a 100644 --- a/styles/src/build_tokens.ts +++ b/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) diff --git a/styles/src/build_types.ts b/styles/src/build_types.ts index 5957ae5076..5d7aa6e0ad 100644 --- a/styles/src/build_types.ts +++ b/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) => { diff --git a/styles/src/common.ts b/styles/src/common.ts index ee47bcc6bd..6c90de4094 100644 --- a/styles/src/common.ts +++ b/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 = { diff --git a/styles/src/style_tree/components.ts b/styles/src/style_tree/components.ts index c0b8e9462f..6e20486631 100644 --- a/styles/src/style_tree/components.ts +++ b/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" diff --git a/styles/src/style_tree/contacts_popover.ts b/styles/src/style_tree/contacts_popover.ts index 85c7e7d9f5..2018da6b84 100644 --- a/styles/src/style_tree/contacts_popover.ts +++ b/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, } diff --git a/styles/src/style_tree/context_menu.ts b/styles/src/style_tree/context_menu.ts index 69ab7de496..df765e0a4a 100644 --- a/styles/src/style_tree/context_menu.ts +++ b/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 }, }, } diff --git a/styles/src/style_tree/copilot.ts b/styles/src/style_tree/copilot.ts index 9f80f6f34c..7b0fc5e4ea 100644 --- a/styles/src/style_tree/copilot.ts +++ b/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, diff --git a/styles/src/style_tree/editor.ts b/styles/src/style_tree/editor.ts index 14df1b0bb3..4e13826013 100644 --- a/styles/src/style_tree/editor.ts +++ b/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: { diff --git a/styles/src/style_tree/incoming_call_notification.ts b/styles/src/style_tree/incoming_call_notification.ts index 2d76da7de8..2c4fa21867 100644 --- a/styles/src/style_tree/incoming_call_notification.ts +++ b/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", }), }, } diff --git a/styles/src/style_tree/project_panel.ts b/styles/src/style_tree/project_panel.ts index ac5c577e21..589e120e38 100644 --- a/styles/src/style_tree/project_panel.ts +++ b/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, diff --git a/styles/src/style_tree/project_shared_notification.ts b/styles/src/style_tree/project_shared_notification.ts index 8437ab6c1b..6fe8170a3c 100644 --- a/styles/src/style_tree/project_shared_notification.ts +++ b/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", }), }, } diff --git a/styles/src/style_tree/status_bar.ts b/styles/src/style_tree/status_bar.ts index fb1c572615..d67634d5a8 100644 --- a/styles/src/style_tree/status_bar.ts +++ b/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"), diff --git a/styles/src/theme/syntax.ts b/styles/src/theme/syntax.ts index 5d214abdeb..1b61849d50 100644 --- a/styles/src/theme/syntax.ts +++ b/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 -const defaultSyntaxHighlightStyle: Omit = { +const default_syntaxHighlightStyle: Omit = { 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>( - 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 } diff --git a/styles/src/themes/gruvbox/gruvbox-common.ts b/styles/src/themes/gruvbox/gruvbox-common.ts index 37850fe019..6a911ce731 100644 --- a/styles/src/themes/gruvbox/gruvbox-common.ts +++ b/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 }, } diff --git a/styles/src/themes/one/one-dark.ts b/styles/src/themes/one/one-dark.ts index 69a5bd5575..b8456603ce 100644 --- a/styles/src/themes/one/one-dark.ts +++ b/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 }, diff --git a/styles/src/themes/one/one-light.ts b/styles/src/themes/one/one-light.ts index 9123c8879d..e14862f423 100644 --- a/styles/src/themes/one/one-light.ts +++ b/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 }, diff --git a/styles/src/themes/rose-pine/common.ts b/styles/src/themes/rose-pine/common.ts index 146305890b..30906078ee 100644 --- a/styles/src/themes/rose-pine/common.ts +++ b/styles/src/themes/rose-pine/common.ts @@ -69,7 +69,7 @@ export const syntax = (c: typeof color.default): Partial => { 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 }, } }