Yehowshua/ZIm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

WIP snake_case 2/?

Browse source
This commit is contained in:
Nate Butler 2023-06-29 01:48:40 -04:00
parent b015f506da
commit ba17fae8d9
23 changed files with 317 additions and 356 deletions
Download patch file Download diff file Expand all files Collapse all files

11
styles/.eslintrc.js
View file

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

42
styles/mod.py
View file

@ -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
View file

@ -31,6 +31,7 @@
"eslint": "^8.43.0", "eslint": "^8.43.0",
"eslint-import-resolver-typescript": "^3.5.5", "eslint-import-resolver-typescript": "^3.5.5",
"eslint-plugin-import": "^2.27.5", "eslint-plugin-import": "^2.27.5",
"eslint-plugin-snakecasejs": "^2.2.0",
"typescript": "^5.1.5" "typescript": "^5.1.5"
} }
}, },
@ -1719,6 +1720,15 @@
"semver": "bin/semver.js" "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": { "node_modules/eslint-scope": {
"version": "7.2.0", "version": "7.2.0",
"resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.0.tgz", "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.0.tgz",

1
styles/package.json
View file

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

30
styles/src/build_licenses.ts
View file

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

38
styles/src/build_themes.ts
View file

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

70
styles/src/build_tokens.ts
View file

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

36
styles/src/build_types.ts
View file

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

24
styles/src/common.ts
View file

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

4
styles/src/style_tree/components.ts
View file

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

9
styles/src/style_tree/contacts_popover.ts
View file

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

33
styles/src/style_tree/context_menu.ts
View file

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

83
styles/src/style_tree/copilot.ts
View file

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

150
styles/src/style_tree/editor.ts
View file

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

4
styles/src/style_tree/incoming_call_notification.ts
View file

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

2
styles/src/style_tree/project_panel.ts
View file

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

4
styles/src/style_tree/project_shared_notification.ts
View file

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

4
styles/src/style_tree/status_bar.ts
View file

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

94
styles/src/theme/syntax.ts
View file

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

4
styles/src/themes/gruvbox/gruvbox-common.ts
View file

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

8
styles/src/themes/one/one-dark.ts
View file

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

8
styles/src/themes/one/one-light.ts
View file

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

4
styles/src/themes/rose-pine/common.ts
View file

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