Extract syntax highlighting properties from tree-sitter highlight queries

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: {
@@ -314,6 +326,6 @@ export default function editor(): any {
                 color: border_color(layer),
             },
         },
-        syntax,
+        syntax: theme.syntax,
     }
 }