diff --git a/docs/zed/syntax-highlighting.md b/docs/zed/syntax-highlighting.md new file mode 100644 index 0000000000..3878fcc6e9 --- /dev/null +++ b/docs/zed/syntax-highlighting.md @@ -0,0 +1,79 @@ +# Syntax Highlighting in Zed + +This doc is a work in progress! + +## Defining syntax highlighting rules + +We use tree-sitter queries to match certian properties to highlight. + +### Simple Example: + +```scheme +(property_identifier) @property +``` + +```ts +const font: FontFamily = { + weight: "normal", + underline: false, + italic: false, +} +``` + +Match a property identifier and highlight it using the identifier `@property`. In the above example, `weight`, `underline`, and `italic` would be highlighted. + +### Complex example: + +```scheme +(_ + return_type: (type_annotation + [ + (type_identifier) @type.return + (generic_type + name: (type_identifier) @type.return) + ])) +``` + +```ts +function buildDefaultSyntax(colorScheme: ColorScheme): Partial { + // ... +} +``` + +Match a function return type, and highlight the type using the identifier `@type.return`. In the above example, `Partial` would be highlighted. + +### Example - Typescript + +Here is an example portion of our `highlights.scm` for TypeScript: + +```scheme +; crates/zed/src/languages/typescript/highlights.scm + +; Variables + +(identifier) @variable + +; Properties + +(property_identifier) @property + +; Function and method calls + +(call_expression + function: (identifier) @function) + +(call_expression + function: (member_expression + property: (property_identifier) @function.method)) + +; Function and method definitions + +(function + name: (identifier) @function) +(function_declaration + name: (identifier) @function) +(method_definition + name: (property_identifier) @function.method) + +; ... +``` diff --git a/styles/src/theme/syntax.ts b/styles/src/theme/syntax.ts index 380fd31786..369fceb070 100644 --- a/styles/src/theme/syntax.ts +++ b/styles/src/theme/syntax.ts @@ -129,8 +129,6 @@ function buildDefaultSyntax(colorScheme: ColorScheme): Syntax { [key: string]: Omit } = {} - const light = colorScheme.isLight - // then spread the default to each style for (const key of Object.keys({} as Syntax)) { syntax[key as keyof Syntax] = { diff --git a/styles/src/themes/rose-pine/common.ts b/styles/src/themes/rose-pine/common.ts new file mode 100644 index 0000000000..8b3b3b7000 --- /dev/null +++ b/styles/src/themes/rose-pine/common.ts @@ -0,0 +1,75 @@ +import { ThemeSyntax } from "../../common"; + +export const color = { + default: { + base: '#191724', + surface: '#1f1d2e', + overlay: '#26233a', + muted: '#6e6a86', + subtle: '#908caa', + text: '#e0def4', + love: '#eb6f92', + gold: '#f6c177', + rose: '#ebbcba', + pine: '#31748f', + foam: '#9ccfd8', + iris: '#c4a7e7', + highlightLow: '#21202e', + highlightMed: '#403d52', + highlightHigh: '#524f67', + }, + moon: { + base: '#232136', + surface: '#2a273f', + overlay: '#393552', + muted: '#6e6a86', + subtle: '#908caa', + text: '#e0def4', + love: '#eb6f92', + gold: '#f6c177', + rose: '#ea9a97', + pine: '#3e8fb0', + foam: '#9ccfd8', + iris: '#c4a7e7', + highlightLow: '#2a283e', + highlightMed: '#44415a', + highlightHigh: '#56526e', + }, + dawn: { + base: "#faf4ed", + surface: "#fffaf3", + overlay: "#f2e9e1", + muted: "#9893a5", + subtle: "#797593", + text: "#575279", + love: "#b4637a", + gold: "#ea9d34", + rose: "#d7827e", + pine: "#286983", + foam: "#56949f", + iris: "#907aa9", + highlightLow: "#f4ede8", + highlightMed: "#dfdad9", + highlightHigh: "#cecacd", + } +}; + +export const syntax = (c: typeof color.default): Partial => { + return { + comment: { color: c.muted }, + operator: { color: c.pine }, + punctuation: { color: c.subtle }, + variable: { color: c.text }, + string: { color: c.gold }, + type: { color: c.foam }, + "type.builtin": { color: c.foam }, + boolean: { color: c.rose }, + function: { color: c.rose }, + keyword: { color: c.pine }, + tag: { color: c.foam }, + "function.method": { color: c.rose }, + title: { color: c.gold }, + linkText: { color: c.foam, italic: false }, + linkUri: { color: c.rose }, + } +} diff --git a/styles/src/themes/rose-pine/rose-pine-dawn.ts b/styles/src/themes/rose-pine/rose-pine-dawn.ts index a373ed378c..3ec5d30bb6 100644 --- a/styles/src/themes/rose-pine/rose-pine-dawn.ts +++ b/styles/src/themes/rose-pine/rose-pine-dawn.ts @@ -6,6 +6,13 @@ import { ThemeConfig, } from "../../common" +import { color as c, syntax } from "./common"; + +const color = c.dawn + +const green = chroma.mix(color.foam, "#10b981", 0.6, 'lab'); +const magenta = chroma.mix(color.love, color.pine, 0.5, 'lab'); + export const theme: ThemeConfig = { name: "Rosé Pine Dawn", author: "edunfelt", @@ -14,26 +21,17 @@ export const theme: ThemeConfig = { licenseUrl: "https://github.com/edunfelt/base16-rose-pine-scheme", licenseFile: `${__dirname}/LICENSE`, inputColor: { - neutral: chroma - .scale([ - "#575279", - "#797593", - "#9893A5", - "#B5AFB8", - "#D3CCCC", - "#F2E9E1", - "#FFFAF3", - "#FAF4ED", - ]) - .domain([0, 0.35, 0.45, 0.65, 0.7, 0.8, 0.9, 1]), - red: colorRamp(chroma("#B4637A")), - orange: colorRamp(chroma("#D7827E")), - yellow: colorRamp(chroma("#EA9D34")), - green: colorRamp(chroma("#679967")), - cyan: colorRamp(chroma("#286983")), - blue: colorRamp(chroma("#56949F")), - violet: colorRamp(chroma("#907AA9")), - magenta: colorRamp(chroma("#79549F")), + neutral: chroma.scale([color.base, color.surface, color.highlightHigh, color.overlay, color.muted, color.subtle, color.text].reverse()).domain([0, 0.35, 0.45, 0.65, 0.7, 0.8, 0.9, 1]), + red: colorRamp(chroma(color.love)), + orange: colorRamp(chroma(color.iris)), + yellow: colorRamp(chroma(color.gold)), + green: colorRamp(chroma(green)), + cyan: colorRamp(chroma(color.pine)), + blue: colorRamp(chroma(color.foam)), + violet: colorRamp(chroma(color.iris)), + magenta: colorRamp(chroma(magenta)), }, - override: { syntax: {} }, + override: { + syntax: syntax(color) + } } diff --git a/styles/src/themes/rose-pine/rose-pine-moon.ts b/styles/src/themes/rose-pine/rose-pine-moon.ts index 94b8166cb3..4e70d2f0ad 100644 --- a/styles/src/themes/rose-pine/rose-pine-moon.ts +++ b/styles/src/themes/rose-pine/rose-pine-moon.ts @@ -6,6 +6,13 @@ import { ThemeConfig, } from "../../common" +import { color as c, syntax } from "./common"; + +const color = c.moon + +const green = chroma.mix(color.foam, "#10b981", 0.6, 'lab'); +const magenta = chroma.mix(color.love, color.pine, 0.5, 'lab'); + export const theme: ThemeConfig = { name: "Rosé Pine Moon", author: "edunfelt", @@ -14,26 +21,17 @@ export const theme: ThemeConfig = { licenseUrl: "https://github.com/edunfelt/base16-rose-pine-scheme", licenseFile: `${__dirname}/LICENSE`, inputColor: { - neutral: chroma - .scale([ - "#232136", - "#2A273F", - "#393552", - "#3E3A53", - "#56526C", - "#6E6A86", - "#908CAA", - "#E0DEF4", - ]) - .domain([0, 0.3, 0.55, 1]), - red: colorRamp(chroma("#EB6F92")), - orange: colorRamp(chroma("#EBBCBA")), - yellow: colorRamp(chroma("#F6C177")), - green: colorRamp(chroma("#8DBD8D")), - cyan: colorRamp(chroma("#409BBE")), - blue: colorRamp(chroma("#9CCFD8")), - violet: colorRamp(chroma("#C4A7E7")), - magenta: colorRamp(chroma("#AB6FE9")), + neutral: chroma.scale([color.base, color.surface, color.highlightHigh, color.overlay, color.muted, color.subtle, color.text]).domain([0, 0.3, 0.55, 1]), + red: colorRamp(chroma(color.love)), + orange: colorRamp(chroma(color.iris)), + yellow: colorRamp(chroma(color.gold)), + green: colorRamp(chroma(green)), + cyan: colorRamp(chroma(color.pine)), + blue: colorRamp(chroma(color.foam)), + violet: colorRamp(chroma(color.iris)), + magenta: colorRamp(chroma(magenta)), }, - override: { syntax: {} }, + override: { + syntax: syntax(color) + } } diff --git a/styles/src/themes/rose-pine/rose-pine.ts b/styles/src/themes/rose-pine/rose-pine.ts index 3aabe3f10e..6c4a6ac49b 100644 --- a/styles/src/themes/rose-pine/rose-pine.ts +++ b/styles/src/themes/rose-pine/rose-pine.ts @@ -5,6 +5,12 @@ import { ThemeLicenseType, ThemeConfig, } from "../../common" +import { color as c, syntax } from "./common"; + +const color = c.default + +const green = chroma.mix(color.foam, "#10b981", 0.6, 'lab'); +const magenta = chroma.mix(color.love, color.pine, 0.5, 'lab'); export const theme: ThemeConfig = { name: "Rosé Pine", @@ -14,24 +20,17 @@ export const theme: ThemeConfig = { licenseUrl: "https://github.com/edunfelt/base16-rose-pine-scheme", licenseFile: `${__dirname}/LICENSE`, inputColor: { - neutral: chroma.scale([ - "#191724", - "#1f1d2e", - "#26233A", - "#3E3A53", - "#56526C", - "#6E6A86", - "#908CAA", - "#E0DEF4", - ]), - red: colorRamp(chroma("#EB6F92")), - orange: colorRamp(chroma("#EBBCBA")), - yellow: colorRamp(chroma("#F6C177")), - green: colorRamp(chroma("#8DBD8D")), - cyan: colorRamp(chroma("#409BBE")), - blue: colorRamp(chroma("#9CCFD8")), - violet: colorRamp(chroma("#C4A7E7")), - magenta: colorRamp(chroma("#AB6FE9")), + neutral: chroma.scale([color.base, color.surface, color.highlightHigh, color.overlay, color.muted, color.subtle, color.text]), + red: colorRamp(chroma(color.love)), + orange: colorRamp(chroma(color.iris)), + yellow: colorRamp(chroma(color.gold)), + green: colorRamp(chroma(green)), + cyan: colorRamp(chroma(color.pine)), + blue: colorRamp(chroma(color.foam)), + violet: colorRamp(chroma(color.iris)), + magenta: colorRamp(chroma(magenta)), }, - override: { syntax: {} }, + override: { + syntax: syntax(color) + } }