Add additional status colors and style diagnostic popovers (#3846)

This PR adds additional background and border colors for each of the
status colors to the theme.

These colors are then used to style the diagnostic popovers:

<img width="407" alt="Screenshot 2024-01-02 at 4 25 50 PM"
src="https://github.com/zed-industries/zed/assets/1486634/fbc64ea7-3dcd-43b7-8520-91f16304bfba">

<img width="396" alt="Screenshot 2024-01-02 at 4 26 05 PM"
src="https://github.com/zed-industries/zed/assets/1486634/6e4a44bf-4aac-4595-afff-7fbf8b2b9e1f">

Release Notes:

- N/A

crates/editor2/src/display_map.rs

@@ -536,7 +536,7 @@ impl DisplaySnapshot {
                 // Omit underlines for HINT/INFO diagnostics on 'unnecessary' code.
                 if severity <= DiagnosticSeverity::WARNING || !chunk.is_unnecessary {
                     let diagnostic_color =
-                        super::diagnostic_style(severity, true, &editor_style.diagnostic_style);
+                        super::diagnostic_style(severity, true, &editor_style.status);
                     diagnostic_highlight.underline = Some(UnderlineStyle {
                         color: Some(diagnostic_color),
                         thickness: 1.0.into(),

crates/editor2/src/editor.rs

@@ -97,7 +97,7 @@ use std::{
 pub use sum_tree::Bias;
 use sum_tree::TreeMap;
 use text::{OffsetUtf16, Rope};
-use theme::{ActiveTheme, DiagnosticStyle, PlayerColor, SyntaxTheme, ThemeColors, ThemeSettings};
+use theme::{ActiveTheme, PlayerColor, StatusColors, SyntaxTheme, ThemeColors, ThemeSettings};
 use ui::{h_stack, ButtonSize, ButtonStyle, Icon, IconButton, Popover, Tooltip};
 use ui::{prelude::*, IconSize};
 use util::{post_inc, RangeExt, ResultExt, TryFutureExt};
@@ -512,7 +512,7 @@ pub struct EditorStyle {
     pub text: TextStyle,
     pub scrollbar_width: Pixels,
     pub syntax: Arc<SyntaxTheme>,
-    pub diagnostic_style: DiagnosticStyle,
+    pub status: StatusColors,
     pub inlays_style: HighlightStyle,
     pub suggestions_style: HighlightStyle,
 }
@@ -7662,10 +7662,7 @@ impl Editor {
                                                 text: text_style,
                                                 scrollbar_width: cx.editor_style.scrollbar_width,
                                                 syntax: cx.editor_style.syntax.clone(),
-                                                diagnostic_style: cx
-                                                    .editor_style
-                                                    .diagnostic_style
-                                                    .clone(),
+                                                status: cx.editor_style.status.clone(),
                                                 // todo!("what about the rest of the highlight style parts for inlays and suggestions?")
                                                 inlays_style: HighlightStyle {
                                                     color: Some(cx.theme().status().hint),
@@ -9335,7 +9332,7 @@ impl Render for Editor {
                 text: text_style,
                 scrollbar_width: px(12.),
                 syntax: cx.theme().syntax().clone(),
-                diagnostic_style: cx.theme().diagnostic_style(),
+                status: cx.theme().status().clone(),
                 // todo!("what about the rest of the highlight style parts?")
                 inlays_style: HighlightStyle {
                     color: Some(cx.theme().status().hint),
@@ -9789,21 +9786,17 @@ pub fn highlight_diagnostic_message(diagnostic: &Diagnostic) -> (SharedString, V
     (text_without_backticks.into(), code_ranges)
 }
 
-pub fn diagnostic_style(
-    severity: DiagnosticSeverity,
-    valid: bool,
-    style: &DiagnosticStyle,
-) -> Hsla {
+pub fn diagnostic_style(severity: DiagnosticSeverity, valid: bool, colors: &StatusColors) -> Hsla {
     match (severity, valid) {
-        (DiagnosticSeverity::ERROR, true) => style.error,
-        (DiagnosticSeverity::ERROR, false) => style.error,
-        (DiagnosticSeverity::WARNING, true) => style.warning,
-        (DiagnosticSeverity::WARNING, false) => style.warning,
-        (DiagnosticSeverity::INFORMATION, true) => style.info,
-        (DiagnosticSeverity::INFORMATION, false) => style.info,
-        (DiagnosticSeverity::HINT, true) => style.info,
-        (DiagnosticSeverity::HINT, false) => style.info,
-        _ => style.ignored,
+        (DiagnosticSeverity::ERROR, true) => colors.error,
+        (DiagnosticSeverity::ERROR, false) => colors.error,
+        (DiagnosticSeverity::WARNING, true) => colors.warning,
+        (DiagnosticSeverity::WARNING, false) => colors.warning,
+        (DiagnosticSeverity::INFORMATION, true) => colors.info,
+        (DiagnosticSeverity::INFORMATION, false) => colors.info,
+        (DiagnosticSeverity::HINT, true) => colors.info,
+        (DiagnosticSeverity::HINT, false) => colors.info,
+        _ => colors.ignored,
     }
 }
 

crates/editor2/src/hover_popover.rs

@@ -6,12 +6,13 @@ use crate::{
 };
 use futures::FutureExt;
 use gpui::{
-    actions, div, px, AnyElement, CursorStyle, InteractiveElement, IntoElement, Model, MouseButton,
-    ParentElement, Pixels, SharedString, Size, StatefulInteractiveElement, Styled, Task,
-    ViewContext, WeakView,
+    actions, div, px, AnyElement, CursorStyle, Hsla, InteractiveElement, IntoElement, Model,
+    MouseButton, ParentElement, Pixels, SharedString, Size, StatefulInteractiveElement, Styled,
+    Task, ViewContext, WeakView,
 };
 use language::{markdown, Bias, DiagnosticEntry, Language, LanguageRegistry, ParsedMarkdown};
 
+use lsp::DiagnosticSeverity;
 use project::{HoverBlock, HoverBlockKind, InlayHintLabelPart, Project};
 use settings::Settings;
 use std::{ops::Range, sync::Arc, time::Duration};
@@ -514,16 +515,51 @@ impl DiagnosticPopover {
             None => self.local_diagnostic.diagnostic.message.clone(),
         };
 
-        let container_bg = crate::diagnostic_style(
-            self.local_diagnostic.diagnostic.severity,
-            true,
-            &style.diagnostic_style,
-        );
+        struct DiagnosticColors {
+            pub text: Hsla,
+            pub background: Hsla,
+            pub border: Hsla,
+        }
+
+        let diagnostic_colors = match self.local_diagnostic.diagnostic.severity {
+            DiagnosticSeverity::ERROR => DiagnosticColors {
+                text: style.status.error,
+                background: style.status.error_background,
+                border: style.status.error_border,
+            },
+            DiagnosticSeverity::WARNING => DiagnosticColors {
+                text: style.status.warning,
+                background: style.status.warning_background,
+                border: style.status.warning_border,
+            },
+            DiagnosticSeverity::INFORMATION => DiagnosticColors {
+                text: style.status.info,
+                background: style.status.info_background,
+                border: style.status.info_border,
+            },
+            DiagnosticSeverity::HINT => DiagnosticColors {
+                text: style.status.hint,
+                background: style.status.hint_background,
+                border: style.status.hint_border,
+            },
+            _ => DiagnosticColors {
+                text: style.status.ignored,
+                background: style.status.ignored_background,
+                border: style.status.ignored_border,
+            },
+        };
 
         div()
             .id("diagnostic")
             .overflow_y_scroll()
-            .bg(container_bg)
+            .px_2()
+            .py_1()
+            .bg(diagnostic_colors.background)
+            .text_ui()
+            .text_color(diagnostic_colors.text)
+            .border_1()
+            .border_color(diagnostic_colors.border)
+            .rounded_md()
             .max_w(max_size.width)
             .max_h(max_size.height)
             .cursor(CursorStyle::PointingHand)