mirror of
https://github.com/zed-industries/zed.git
synced 2024-12-28 20:01:33 +00:00
WIP snake_case 2/?
This commit is contained in:
Nate Butler
parent
b015f506da
commit
ba17fae8d9
23 changed files with 317 additions and 356 deletions
|
|
@ -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",
|
||||
{
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
10
styles/package-lock.json
generated
10
styles/package-lock.json
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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`)
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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) => {
|
||||
|
|
|
|||
|
|
@ -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 = {
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 },
|
||||
},
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
}),
|
||||
},
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
}),
|
||||
},
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"),
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 },
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 },
|
||||
|
|
|
|||
|
|
@ -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 },
|
||||
|
|
|
|||
|
|
@ -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 },
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue