Update rose pine theme family (#2624)

Update the Rose Pine theme family, including new syntax overrides
matching the official theme docs:
https://rosepinetheme.com/palette/ingredients/

Also adds a doc to our internal docs starting to outline how our syntax
highlighting works.

Before:
<img width="626" alt="CleanShot 2023-06-21 at 12 19 17@2x"
src="https://github.com/zed-industries/zed/assets/1714999/5ebe1cd0-1707-483b-a50f-bb53dbf89ba2">

After:
<img width="718" alt="CleanShot 2023-06-21 at 12 18 48@2x"
src="https://github.com/zed-industries/zed/assets/1714999/46b588aa-31a0-4402-934b-e3de7bc2f6b5">

From their site:

![image](https://github.com/zed-industries/zed/assets/1714999/83d4f671-e15f-4423-a01e-b382145e79fb)


Release Notes:

- Updated Rose Pine theme family to better match original theme.

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<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)
+
+; ...
+```

styles/src/theme/syntax.ts

@@ -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] = {

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<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 },
+    }
+}

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)
+    }
 }

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)
+    }
 }

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)
+    }
 }