Extract syntax highlighting properties from tree-sitter highlight queries (#2797)

This should be a purely internal change. Let me know if any visual
changes are observed from this!

### Syntax theme
- Update the theme to allow any syntax highlighting property used in any
`highlight.scm` to be styled
- Only define syntax styles that are baked into the default theme &
don't use the default text style
- Adds the `generate-syntax` command
- Removes a few unused properties that we were styling for some reason,
like `enum` and `variant`, neither of which exist in any `highlight.scm`
- Moves `@constructor` symbols to `@method.constructor` to prevent
issues with `constructor` being a reserved property in ts/js.

Syntax is now build as the theme is created rather than as part of the
styleTree. This means it no longer requires a compiled `Theme`, which
makes things a bit more straightforward if we need to access it in other
components that should be built before the styleTrees.

### Scheme

Also updates all uses of `#match` in our `highlights.scm` files, as
these break the scheme tree-sitter query. This fixes _most_ instances of
our scheme highlighting breaking.

For some reason something in here breaks the `highlights.scm` for PHP:

```scheme
((name) @constant.builtin
 (.match? @constant.builtin "^__[A-Z][A-Z\d_]+__$"))

((name) @method.constructor
(.match? @method.constructor "^[A-Z]"))

((name) @variable.builtin
 (.eq? @variable.builtin "this"))
```

Release Notes:

- No public facing changes

styles/src/style_tree/app.ts

@@ -57,6 +57,6 @@ export default function app(): any {
         tooltip: tooltip(),
         terminal: terminal(),
         assistant: assistant(),
-        feedback: feedback()
+        feedback: feedback(),
     }
 }

styles/src/style_tree/assistant.ts

@@ -8,50 +8,48 @@ type RoleCycleButton = TextStyle & {
 }
 // TODO: Replace these with zed types
 type RemainingTokens = TextStyle & {
-    background: string,
-    margin: { top: number, right: number },
+    background: string
+    margin: { top: number; right: number }
     padding: {
-        right: number,
-        left: number,
-        top: number,
-        bottom: number,
-    },
-    corner_radius: number,
+        right: number
+        left: number
+        top: number
+        bottom: number
+    }
+    corner_radius: number
 }
 
 export default function assistant(): any {
     const theme = useTheme()
 
-    const interactive_role = (color: StyleSets): Interactive<RoleCycleButton> => {
-        return (
-            interactive({
-                base: {
+    const interactive_role = (
+        color: StyleSets
+    ): Interactive<RoleCycleButton> => {
+        return interactive({
+            base: {
+                ...text(theme.highest, "sans", color, { size: "sm" }),
+            },
+            state: {
+                hovered: {
                     ...text(theme.highest, "sans", color, { size: "sm" }),
+                    background: background(theme.highest, color, "hovered"),
                 },
-                state: {
-                    hovered: {
-                        ...text(theme.highest, "sans", color, { size: "sm" }),
-                        background: background(theme.highest, color, "hovered"),
-                    },
-                    clicked: {
-                        ...text(theme.highest, "sans", color, { size: "sm" }),
-                        background: background(theme.highest, color, "pressed"),
-                    }
+                clicked: {
+                    ...text(theme.highest, "sans", color, { size: "sm" }),
+                    background: background(theme.highest, color, "pressed"),
                 },
-            })
-        )
+            },
+        })
     }
 
     const tokens_remaining = (color: StyleSets): RemainingTokens => {
-        return (
-            {
-                ...text(theme.highest, "mono", color, { size: "xs" }),
-                background: background(theme.highest, "on", "default"),
-                margin: { top: 12, right: 20 },
-                padding: { right: 4, left: 4, top: 1, bottom: 1 },
-                corner_radius: 6,
-            }
-        )
+        return {
+            ...text(theme.highest, "mono", color, { size: "xs" }),
+            background: background(theme.highest, "on", "default"),
+            margin: { top: 12, right: 20 },
+            padding: { right: 4, left: 4, top: 1, bottom: 1 },
+            corner_radius: 6,
+        }
     }
 
     return {
@@ -93,7 +91,10 @@ export default function assistant(): any {
                 base: {
                     background: background(theme.middle),
                     padding: { top: 4, bottom: 4 },
-                    border: border(theme.middle, "default", { top: true, overlay: true }),
+                    border: border(theme.middle, "default", {
+                        top: true,
+                        overlay: true,
+                    }),
                 },
                 state: {
                     hovered: {
@@ -101,7 +102,7 @@ export default function assistant(): any {
                     },
                     clicked: {
                         background: background(theme.middle, "pressed"),
-                    }
+                    },
                 },
             }),
             saved_at: {

styles/src/style_tree/editor.ts

@@ -9,9 +9,9 @@ import {
 } from "./components"
 import hover_popover from "./hover_popover"
 
-import { build_syntax } from "../theme/syntax"
 import { interactive, toggleable } from "../element"
 import { useTheme } from "../theme"
+import chroma from "chroma-js"
 
 export default function editor(): any {
     const theme = useTheme()
@@ -48,16 +48,28 @@ export default function editor(): any {
         }
     }
 
-    const syntax = build_syntax()
-
     return {
-        text_color: syntax.primary.color,
+        text_color: theme.syntax.primary.color,
         background: background(layer),
         active_line_background: with_opacity(background(layer, "on"), 0.75),
         highlighted_line_background: background(layer, "on"),
         // Inline autocomplete suggestions, Co-pilot suggestions, etc.
-        hint: syntax.hint,
-        suggestion: syntax.predictive,
+        hint: chroma
+            .mix(
+                theme.ramps.neutral(0.6).hex(),
+                theme.ramps.blue(0.4).hex(),
+                0.45,
+                "lch"
+            )
+            .hex(),
+        suggestion: chroma
+            .mix(
+                theme.ramps.neutral(0.4).hex(),
+                theme.ramps.blue(0.4).hex(),
+                0.45,
+                "lch"
+            )
+            .hex(),
         code_actions: {
             indicator: toggleable({
                 base: interactive({
@@ -255,8 +267,8 @@ export default function editor(): any {
         invalid_warning_diagnostic: diagnostic(theme.middle, "base"),
         hover_popover: hover_popover(),
         link_definition: {
-            color: syntax.link_uri.color,
-            underline: syntax.link_uri.underline,
+            color: theme.syntax.link_uri.color,
+            underline: theme.syntax.link_uri.underline,
         },
         jump_icon: interactive({
             base: {
@@ -306,7 +318,7 @@ export default function editor(): any {
                     ? with_opacity(theme.ramps.green(0.5).hex(), 0.8)
                     : with_opacity(theme.ramps.green(0.4).hex(), 0.8),
             },
-            selections: foreground(layer, "accent")
+            selections: foreground(layer, "accent"),
         },
         composition_mark: {
             underline: {
@@ -314,6 +326,6 @@ export default function editor(): any {
                 color: border_color(layer),
             },
         },
-        syntax,
+        syntax: theme.syntax,
     }
 }

styles/src/style_tree/feedback.ts

@@ -37,7 +37,7 @@ export default function feedback(): any {
                     ...text(theme.highest, "mono", "on", "disabled"),
                     background: background(theme.highest, "on", "disabled"),
                     border: border(theme.highest, "on", "disabled"),
-                }
+                },
             },
         }),
         button_margin: 8,

styles/src/style_tree/picker.ts

@@ -152,7 +152,7 @@ export default function picker(): any {
                         0.5
                     ),
                 },
-            }
+            },
         }),
     }
 }

styles/src/style_tree/project_panel.ts

@@ -64,17 +64,17 @@ export default function project_panel(): any {
         const unselected_default_style = merge(
             base_properties,
             unselected?.default ?? {},
-            {},
+            {}
         )
         const unselected_hovered_style = merge(
             base_properties,
             { background: background(theme.middle, "hovered") },
-            unselected?.hovered ?? {},
+            unselected?.hovered ?? {}
         )
         const unselected_clicked_style = merge(
             base_properties,
             { background: background(theme.middle, "pressed") },
-            unselected?.clicked ?? {},
+            unselected?.clicked ?? {}
         )
         const selected_default_style = merge(
             base_properties,
@@ -82,7 +82,7 @@ export default function project_panel(): any {
                 background: background(theme.lowest),
                 text: text(theme.lowest, "sans", { size: "sm" }),
             },
-            selected_style?.default ?? {},
+            selected_style?.default ?? {}
         )
         const selected_hovered_style = merge(
             base_properties,
@@ -90,7 +90,7 @@ export default function project_panel(): any {
                 background: background(theme.lowest, "hovered"),
                 text: text(theme.lowest, "sans", { size: "sm" }),
             },
-            selected_style?.hovered ?? {},
+            selected_style?.hovered ?? {}
         )
         const selected_clicked_style = merge(
             base_properties,
@@ -98,7 +98,7 @@ export default function project_panel(): any {
                 background: background(theme.lowest, "pressed"),
                 text: text(theme.lowest, "sans", { size: "sm" }),
             },
-            selected_style?.clicked ?? {},
+            selected_style?.clicked ?? {}
         )
 
         return toggleable({
@@ -175,7 +175,7 @@ export default function project_panel(): any {
                 default: {
                     icon_color: foreground(theme.middle, "variant"),
                 },
-            },
+            }
         ),
         cut_entry: entry(
             {
@@ -190,7 +190,7 @@ export default function project_panel(): any {
                         size: "sm",
                     }),
                 },
-            },
+            }
         ),
         filename_editor: {
             background: background(theme.middle, "on"),

styles/src/style_tree/status_bar.ts

@@ -34,10 +34,14 @@ export default function status_bar(): any {
             ...text(layer, "mono", "variant", { size: "xs" }),
         },
         active_language: text_button({
-            color: "variant"
+            color: "variant",
+        }),
+        auto_update_progress_message: text(layer, "sans", "variant", {
+            size: "xs",
+        }),
+        auto_update_done_message: text(layer, "sans", "variant", {
+            size: "xs",
         }),
-        auto_update_progress_message: text(layer, "sans", "variant", { size: "xs" }),
-        auto_update_done_message: text(layer, "sans", "variant", { size: "xs" }),
         lsp_status: interactive({
             base: {
                 ...diagnostic_status_container,

styles/src/style_tree/titlebar.ts

@@ -183,10 +183,10 @@ export function titlebar(): any {
         project_name_divider: text(theme.lowest, "sans", "variant"),
 
         project_menu_button: toggleable_text_button(theme, {
-            color: 'base',
+            color: "base",
         }),
         git_menu_button: toggleable_text_button(theme, {
-            color: 'variant',
+            color: "variant",
         }),
 
         // Collaborators