Update Hint Style

Nate Butler created 2 years ago

zzz

Change summary

crates/editor/src/element.rs    |  2 +-
crates/theme/src/theme.rs       |  1 +
styles/src/styleTree/editor.ts  |  0 
styles/src/style_tree/editor.ts |  1 +
styles/src/theme/syntax.ts      | 17 +++++++++++++++++
5 files changed, 20 insertions(+), 1 deletion(-)

Detailed changes

crates/editor/src/element.rs

@@ -1392,7 +1392,7 @@ impl EditorElement {
         } else {
             let style = &self.style;
             let chunks = snapshot
-                .chunks(rows.clone(), true, Some(style.theme.suggestion))
+                .chunks(rows.clone(), true, Some(style.theme.hint))
                 .map(|chunk| {
                     let mut highlight_style = chunk
                         .syntax_highlight_id

crates/theme/src/theme.rs

@@ -689,6 +689,7 @@ pub struct Editor {
     pub line_number_active: Color,
     pub guest_selections: Vec<SelectionStyle>,
     pub syntax: Arc<SyntaxTheme>,
+    pub hint: HighlightStyle,
     pub suggestion: HighlightStyle,
     pub diagnostic_path_header: DiagnosticPathHeader,
     pub diagnostic_header: DiagnosticHeader,

styles/src/styleTree/editor.ts

styles/src/style_tree/editor.ts

@@ -53,6 +53,7 @@ export default function editor(theme: ColorScheme): any {
         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,
         code_actions: {
             indicator: toggleable({

styles/src/theme/syntax.ts

@@ -17,6 +17,7 @@ export interface Syntax {
     "comment.doc": SyntaxHighlightStyle
     primary: SyntaxHighlightStyle
     predictive: SyntaxHighlightStyle
+    hint: SyntaxHighlightStyle
 
     // === Formatted Text ====== /
     emphasis: SyntaxHighlightStyle
@@ -146,12 +147,23 @@ function build_default_syntax(color_scheme: ColorScheme): Syntax {
             "lch"
         )
         .hex()
+    // Mix the neutral and green colors to get a
+    // hint color distinct from any other color in the theme
+    const hint = chroma
+        .mix(
+            color_scheme.ramps.neutral(0.6).hex(),
+            color_scheme.ramps.blue(0.4).hex(),
+            0.45,
+            "lch"
+        )
+        .hex()
 
     const color = {
         primary: color_scheme.ramps.neutral(1).hex(),
         comment: color_scheme.ramps.neutral(0.71).hex(),
         punctuation: color_scheme.ramps.neutral(0.86).hex(),
         predictive: predictive,
+        hint: hint,
         emphasis: color_scheme.ramps.blue(0.5).hex(),
         string: color_scheme.ramps.orange(0.5).hex(),
         function: color_scheme.ramps.yellow(0.5).hex(),
@@ -183,6 +195,11 @@ function build_default_syntax(color_scheme: ColorScheme): Syntax {
             color: color.predictive,
             italic: true,
         },
+        hint: {
+            color: color.hint,
+            weight: font_weights.bold,
+            // italic: true,
+        },
         emphasis: {
             color: color.emphasis,
         },