Detailed changes
@@ -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<Syntax> {
+ // ...
+}
+```
+
+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)
+
+; ...
+```
@@ -129,8 +129,6 @@ function buildDefaultSyntax(colorScheme: ColorScheme): Syntax {
[key: string]: Omit<SyntaxHighlightStyle, "color">
} = {}
- const light = colorScheme.isLight
-
// then spread the default to each style
for (const key of Object.keys({} as Syntax)) {
syntax[key as keyof Syntax] = {
@@ -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<ThemeSyntax> => {
+ 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 },
+ }
+}
@@ -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)
+ }
}
@@ -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)
+ }
}
@@ -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)
+ }
}