Merge branch 'main' into collab-panel

styles/src/style_tree/app.ts

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

styles/src/style_tree/assistant.ts

@@ -8,48 +8,50 @@ 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: {
-                ...text(theme.highest, "sans", color, { size: "sm" }),
-            },
-            state: {
-                hovered: {
+    const interactive_role = (color: StyleSets): Interactive<RoleCycleButton> => {
+        return (
+            interactive({
+                base: {
                     ...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"),
+                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"),
+                    }
                 },
-            },
-        })
+            })
+        )
     }
 
     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 {
@@ -91,10 +93,7 @@ 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: {
@@ -102,7 +101,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,28 +48,16 @@ export default function editor(): any {
         }
     }
 
+    const syntax = build_syntax()
+
     return {
-        text_color: theme.syntax.primary.color,
+        text_color: 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: 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(),
+        hint: syntax.hint,
+        suggestion: syntax.predictive,
         code_actions: {
             indicator: toggleable({
                 base: interactive({
@@ -267,8 +255,8 @@ export default function editor(): any {
         invalid_warning_diagnostic: diagnostic(theme.middle, "base"),
         hover_popover: hover_popover(),
         link_definition: {
-            color: theme.syntax.link_uri.color,
-            underline: theme.syntax.link_uri.underline,
+            color: syntax.link_uri.color,
+            underline: syntax.link_uri.underline,
         },
         jump_icon: interactive({
             base: {
@@ -318,7 +306,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: {
@@ -326,6 +314,6 @@ export default function editor(): any {
                 color: border_color(layer),
             },
         },
-        syntax: theme.syntax,
+        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,14 +34,10 @@ export default function status_bar(): any {
             ...text(layer, "mono", "variant", { size: "xs" }),
         },
         active_language: text_button({
-            color: "variant",
-        }),
-        auto_update_progress_message: text(layer, "sans", "variant", {
-            size: "xs",
-        }),
-        auto_update_done_message: text(layer, "sans", "variant", {
-            size: "xs",
+            color: "variant"
         }),
+        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,
@@ -53,7 +49,7 @@ export default function status_bar(): any {
             },
             state: {
                 hovered: {
-                    message: text(layer, "sans"),
+                    message: text(layer, "sans", { size: "xs" }),
                     icon_color: foreground(layer),
                     background: background(layer, "hovered"),
                 },

styles/src/style_tree/titlebar.ts

@@ -187,10 +187,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