Give no-error diagnostic indicator a hover state

Max Brunsfeld created

Change summary

assets/themes/cave-dark.json         | 97 ++++++++++++++++++-----------
assets/themes/cave-light.json        | 97 ++++++++++++++++++-----------
assets/themes/dark.json              | 97 ++++++++++++++++++-----------
assets/themes/light.json             | 97 ++++++++++++++++++-----------
assets/themes/solarized-dark.json    | 97 ++++++++++++++++++-----------
assets/themes/solarized-light.json   | 97 ++++++++++++++++++-----------
assets/themes/sulphurpool-dark.json  | 97 ++++++++++++++++++-----------
assets/themes/sulphurpool-light.json | 97 ++++++++++++++++++-----------
crates/diagnostics/src/items.rs      | 61 ++++++++----------
crates/theme/src/theme.rs            | 15 ++--
styles/src/styleTree/workspace.ts    | 70 ++++++++++++---------
11 files changed, 555 insertions(+), 367 deletions(-)

Detailed changes

assets/themes/cave-dark.json πŸ”—

@@ -226,73 +226,96 @@
           "background": "#58526052"
         }
       },
-      "diagnostics": {
+      "diagnostic_message": {
+        "family": "Zed Sans",
+        "color": "#8b8792",
+        "size": 14,
+        "hover": {
+          "family": "Zed Sans",
+          "color": "#8b8792",
+          "size": 14
+        }
+      },
+      "diagnostic_summary": {
         "height": 16,
-        "summary_ok": {
+        "icon_width": 14,
+        "icon_spacing": 2,
+        "summary_spacing": 6,
+        "text": {
+          "family": "Zed Sans",
+          "color": "#e2dfe7",
+          "size": 14
+        },
+        "icon_color_ok": "#8b8792",
+        "icon_color_warning": "#a06e3b",
+        "icon_color_error": "#be4678",
+        "container_ok": {
           "corner_radius": 6,
           "padding": {
             "left": 6,
             "right": 6
           },
-          "family": "Zed Sans",
-          "color": "#e2dfe7",
-          "size": 14,
-          "hover": {
-            "background": "#58526052"
-          }
+          "background": "#58526052"
         },
-        "summary_warning": {
+        "container_warning": {
           "corner_radius": 6,
           "padding": {
             "left": 6,
             "right": 6
           },
-          "family": "Zed Sans",
-          "color": "#e2dfe7",
-          "size": 14,
           "background": "#a06e3b26",
           "border": {
             "color": "#a06e3b26",
             "width": 1
-          },
-          "hover": {
-            "background": "#a06e3b33"
           }
         },
-        "summary_error": {
+        "container_error": {
           "corner_radius": 6,
           "padding": {
             "left": 6,
             "right": 6
           },
-          "family": "Zed Sans",
-          "color": "#e2dfe7",
-          "size": 14,
           "background": "#be467826",
           "border": {
             "color": "#be467826",
             "width": 1
-          },
-          "hover": {
-            "background": "#be467833"
           }
         },
-        "message": {
-          "family": "Zed Sans",
-          "color": "#8b8792",
-          "size": 14,
-          "hover": {
-            "family": "Zed Sans",
-            "color": "#8b8792",
-            "size": 14
+        "hover": {
+          "icon_color_ok": "#e2dfe7",
+          "container_ok": {
+            "corner_radius": 6,
+            "padding": {
+              "left": 6,
+              "right": 6
+            },
+            "background": "#58526052"
+          },
+          "container_warning": {
+            "corner_radius": 6,
+            "padding": {
+              "left": 6,
+              "right": 6
+            },
+            "background": "#a06e3b33",
+            "border": {
+              "color": "#a06e3b26",
+              "width": 1
+            }
+          },
+          "container_error": {
+            "corner_radius": 6,
+            "padding": {
+              "left": 6,
+              "right": 6
+            },
+            "background": "#be467833",
+            "border": {
+              "color": "#be467826",
+              "width": 1
+            }
           }
-        },
-        "icon_color_ok": "#8b8792",
-        "icon_color_warning": "#a06e3b",
-        "icon_color_error": "#be4678",
-        "icon_width": 14,
-        "icon_spacing": 2,
-        "summary_spacing": 6
+        }
       },
       "sidebar_buttons": {
         "group_left": {},

assets/themes/cave-light.json πŸ”—

@@ -226,73 +226,96 @@
           "background": "#8b87921f"
         }
       },
-      "diagnostics": {
+      "diagnostic_message": {
+        "family": "Zed Sans",
+        "color": "#585260",
+        "size": 14,
+        "hover": {
+          "family": "Zed Sans",
+          "color": "#585260",
+          "size": 14
+        }
+      },
+      "diagnostic_summary": {
         "height": 16,
-        "summary_ok": {
+        "icon_width": 14,
+        "icon_spacing": 2,
+        "summary_spacing": 6,
+        "text": {
+          "family": "Zed Sans",
+          "color": "#26232a",
+          "size": 14
+        },
+        "icon_color_ok": "#585260",
+        "icon_color_warning": "#a06e3b",
+        "icon_color_error": "#be4678",
+        "container_ok": {
           "corner_radius": 6,
           "padding": {
             "left": 6,
             "right": 6
           },
-          "family": "Zed Sans",
-          "color": "#26232a",
-          "size": 14,
-          "hover": {
-            "background": "#8b87921f"
-          }
+          "background": "#8b87921f"
         },
-        "summary_warning": {
+        "container_warning": {
           "corner_radius": 6,
           "padding": {
             "left": 6,
             "right": 6
           },
-          "family": "Zed Sans",
-          "color": "#26232a",
-          "size": 14,
           "background": "#a06e3b26",
           "border": {
             "color": "#a06e3b26",
             "width": 1
-          },
-          "hover": {
-            "background": "#a06e3b33"
           }
         },
-        "summary_error": {
+        "container_error": {
           "corner_radius": 6,
           "padding": {
             "left": 6,
             "right": 6
           },
-          "family": "Zed Sans",
-          "color": "#26232a",
-          "size": 14,
           "background": "#be467826",
           "border": {
             "color": "#be467826",
             "width": 1
-          },
-          "hover": {
-            "background": "#be467833"
           }
         },
-        "message": {
-          "family": "Zed Sans",
-          "color": "#585260",
-          "size": 14,
-          "hover": {
-            "family": "Zed Sans",
-            "color": "#585260",
-            "size": 14
+        "hover": {
+          "icon_color_ok": "#26232a",
+          "container_ok": {
+            "corner_radius": 6,
+            "padding": {
+              "left": 6,
+              "right": 6
+            },
+            "background": "#8b87921f"
+          },
+          "container_warning": {
+            "corner_radius": 6,
+            "padding": {
+              "left": 6,
+              "right": 6
+            },
+            "background": "#a06e3b33",
+            "border": {
+              "color": "#a06e3b26",
+              "width": 1
+            }
+          },
+          "container_error": {
+            "corner_radius": 6,
+            "padding": {
+              "left": 6,
+              "right": 6
+            },
+            "background": "#be467833",
+            "border": {
+              "color": "#be467826",
+              "width": 1
+            }
           }
-        },
-        "icon_color_ok": "#585260",
-        "icon_color_warning": "#a06e3b",
-        "icon_color_error": "#be4678",
-        "icon_width": 14,
-        "icon_spacing": 2,
-        "summary_spacing": 6
+        }
       },
       "sidebar_buttons": {
         "group_left": {},

assets/themes/dark.json πŸ”—

@@ -226,73 +226,96 @@
           "background": "#232323"
         }
       },
-      "diagnostics": {
+      "diagnostic_message": {
+        "family": "Zed Sans",
+        "color": "#808080",
+        "size": 14,
+        "hover": {
+          "family": "Zed Sans",
+          "color": "#9c9c9c",
+          "size": 14
+        }
+      },
+      "diagnostic_summary": {
         "height": 16,
-        "summary_ok": {
+        "icon_width": 14,
+        "icon_spacing": 2,
+        "summary_spacing": 6,
+        "text": {
+          "family": "Zed Sans",
+          "color": "#f1f1f1",
+          "size": 14
+        },
+        "icon_color_ok": "#9c9c9c",
+        "icon_color_warning": "#f6a724",
+        "icon_color_error": "#eb2d2d",
+        "container_ok": {
           "corner_radius": 6,
           "padding": {
             "left": 6,
             "right": 6
           },
-          "family": "Zed Sans",
-          "color": "#f1f1f1",
-          "size": 14,
-          "hover": {
-            "background": "#232323"
-          }
+          "background": "#232323"
         },
-        "summary_warning": {
+        "container_warning": {
           "corner_radius": 6,
           "padding": {
             "left": 6,
             "right": 6
           },
-          "family": "Zed Sans",
-          "color": "#f1f1f1",
-          "size": 14,
           "background": "#f6a72426",
           "border": {
             "color": "#f6a72426",
             "width": 1
-          },
-          "hover": {
-            "background": "#f6a72433"
           }
         },
-        "summary_error": {
+        "container_error": {
           "corner_radius": 6,
           "padding": {
             "left": 6,
             "right": 6
           },
-          "family": "Zed Sans",
-          "color": "#f1f1f1",
-          "size": 14,
           "background": "#c9181826",
           "border": {
             "color": "#eb2d2d26",
             "width": 1
-          },
-          "hover": {
-            "background": "#c9181833"
           }
         },
-        "message": {
-          "family": "Zed Sans",
-          "color": "#808080",
-          "size": 14,
-          "hover": {
-            "family": "Zed Sans",
-            "color": "#9c9c9c",
-            "size": 14
+        "hover": {
+          "icon_color_ok": "#c6c6c6",
+          "container_ok": {
+            "corner_radius": 6,
+            "padding": {
+              "left": 6,
+              "right": 6
+            },
+            "background": "#232323"
+          },
+          "container_warning": {
+            "corner_radius": 6,
+            "padding": {
+              "left": 6,
+              "right": 6
+            },
+            "background": "#f6a72433",
+            "border": {
+              "color": "#f6a72426",
+              "width": 1
+            }
+          },
+          "container_error": {
+            "corner_radius": 6,
+            "padding": {
+              "left": 6,
+              "right": 6
+            },
+            "background": "#c9181833",
+            "border": {
+              "color": "#eb2d2d26",
+              "width": 1
+            }
           }
-        },
-        "icon_color_ok": "#9c9c9c",
-        "icon_color_warning": "#f6a724",
-        "icon_color_error": "#eb2d2d",
-        "icon_width": 14,
-        "icon_spacing": 2,
-        "summary_spacing": 6
+        }
       },
       "sidebar_buttons": {
         "group_left": {},

assets/themes/light.json πŸ”—

@@ -226,73 +226,96 @@
           "background": "#eaeaea"
         }
       },
-      "diagnostics": {
+      "diagnostic_message": {
+        "family": "Zed Sans",
+        "color": "#636363",
+        "size": 14,
+        "hover": {
+          "family": "Zed Sans",
+          "color": "#474747",
+          "size": 14
+        }
+      },
+      "diagnostic_summary": {
         "height": 16,
-        "summary_ok": {
+        "icon_width": 14,
+        "icon_spacing": 2,
+        "summary_spacing": 6,
+        "text": {
+          "family": "Zed Sans",
+          "color": "#2b2b2b",
+          "size": 14
+        },
+        "icon_color_ok": "#717171",
+        "icon_color_warning": "#f7bf17",
+        "icon_color_error": "#c91818",
+        "container_ok": {
           "corner_radius": 6,
           "padding": {
             "left": 6,
             "right": 6
           },
-          "family": "Zed Sans",
-          "color": "#2b2b2b",
-          "size": 14,
-          "hover": {
-            "background": "#eaeaea"
-          }
+          "background": "#eaeaea"
         },
-        "summary_warning": {
+        "container_warning": {
           "corner_radius": 6,
           "padding": {
             "left": 6,
             "right": 6
           },
-          "family": "Zed Sans",
-          "color": "#2b2b2b",
-          "size": 14,
           "background": "#f6a72426",
           "border": {
             "color": "#f6a72426",
             "width": 1
-          },
-          "hover": {
-            "background": "#f6a72433"
           }
         },
-        "summary_error": {
+        "container_error": {
           "corner_radius": 6,
           "padding": {
             "left": 6,
             "right": 6
           },
-          "family": "Zed Sans",
-          "color": "#2b2b2b",
-          "size": 14,
           "background": "#c9181826",
           "border": {
             "color": "#eb2d2d26",
             "width": 1
-          },
-          "hover": {
-            "background": "#c9181833"
           }
         },
-        "message": {
-          "family": "Zed Sans",
-          "color": "#636363",
-          "size": 14,
-          "hover": {
-            "family": "Zed Sans",
-            "color": "#474747",
-            "size": 14
+        "hover": {
+          "icon_color_ok": "#393939",
+          "container_ok": {
+            "corner_radius": 6,
+            "padding": {
+              "left": 6,
+              "right": 6
+            },
+            "background": "#eaeaea"
+          },
+          "container_warning": {
+            "corner_radius": 6,
+            "padding": {
+              "left": 6,
+              "right": 6
+            },
+            "background": "#f6a72433",
+            "border": {
+              "color": "#f6a72426",
+              "width": 1
+            }
+          },
+          "container_error": {
+            "corner_radius": 6,
+            "padding": {
+              "left": 6,
+              "right": 6
+            },
+            "background": "#c9181833",
+            "border": {
+              "color": "#eb2d2d26",
+              "width": 1
+            }
           }
-        },
-        "icon_color_ok": "#717171",
-        "icon_color_warning": "#f7bf17",
-        "icon_color_error": "#c91818",
-        "icon_width": 14,
-        "icon_spacing": 2,
-        "summary_spacing": 6
+        }
       },
       "sidebar_buttons": {
         "group_left": {},

assets/themes/solarized-dark.json πŸ”—

@@ -226,73 +226,96 @@
           "background": "#586e7552"
         }
       },
-      "diagnostics": {
+      "diagnostic_message": {
+        "family": "Zed Sans",
+        "color": "#93a1a1",
+        "size": 14,
+        "hover": {
+          "family": "Zed Sans",
+          "color": "#93a1a1",
+          "size": 14
+        }
+      },
+      "diagnostic_summary": {
         "height": 16,
-        "summary_ok": {
+        "icon_width": 14,
+        "icon_spacing": 2,
+        "summary_spacing": 6,
+        "text": {
+          "family": "Zed Sans",
+          "color": "#eee8d5",
+          "size": 14
+        },
+        "icon_color_ok": "#93a1a1",
+        "icon_color_warning": "#b58900",
+        "icon_color_error": "#dc322f",
+        "container_ok": {
           "corner_radius": 6,
           "padding": {
             "left": 6,
             "right": 6
           },
-          "family": "Zed Sans",
-          "color": "#eee8d5",
-          "size": 14,
-          "hover": {
-            "background": "#586e7552"
-          }
+          "background": "#586e7552"
         },
-        "summary_warning": {
+        "container_warning": {
           "corner_radius": 6,
           "padding": {
             "left": 6,
             "right": 6
           },
-          "family": "Zed Sans",
-          "color": "#eee8d5",
-          "size": 14,
           "background": "#b5890026",
           "border": {
             "color": "#b5890026",
             "width": 1
-          },
-          "hover": {
-            "background": "#b5890033"
           }
         },
-        "summary_error": {
+        "container_error": {
           "corner_radius": 6,
           "padding": {
             "left": 6,
             "right": 6
           },
-          "family": "Zed Sans",
-          "color": "#eee8d5",
-          "size": 14,
           "background": "#dc322f26",
           "border": {
             "color": "#dc322f26",
             "width": 1
-          },
-          "hover": {
-            "background": "#dc322f33"
           }
         },
-        "message": {
-          "family": "Zed Sans",
-          "color": "#93a1a1",
-          "size": 14,
-          "hover": {
-            "family": "Zed Sans",
-            "color": "#93a1a1",
-            "size": 14
+        "hover": {
+          "icon_color_ok": "#eee8d5",
+          "container_ok": {
+            "corner_radius": 6,
+            "padding": {
+              "left": 6,
+              "right": 6
+            },
+            "background": "#586e7552"
+          },
+          "container_warning": {
+            "corner_radius": 6,
+            "padding": {
+              "left": 6,
+              "right": 6
+            },
+            "background": "#b5890033",
+            "border": {
+              "color": "#b5890026",
+              "width": 1
+            }
+          },
+          "container_error": {
+            "corner_radius": 6,
+            "padding": {
+              "left": 6,
+              "right": 6
+            },
+            "background": "#dc322f33",
+            "border": {
+              "color": "#dc322f26",
+              "width": 1
+            }
           }
-        },
-        "icon_color_ok": "#93a1a1",
-        "icon_color_warning": "#b58900",
-        "icon_color_error": "#dc322f",
-        "icon_width": 14,
-        "icon_spacing": 2,
-        "summary_spacing": 6
+        }
       },
       "sidebar_buttons": {
         "group_left": {},

assets/themes/solarized-light.json πŸ”—

@@ -226,73 +226,96 @@
           "background": "#93a1a11f"
         }
       },
-      "diagnostics": {
+      "diagnostic_message": {
+        "family": "Zed Sans",
+        "color": "#586e75",
+        "size": 14,
+        "hover": {
+          "family": "Zed Sans",
+          "color": "#586e75",
+          "size": 14
+        }
+      },
+      "diagnostic_summary": {
         "height": 16,
-        "summary_ok": {
+        "icon_width": 14,
+        "icon_spacing": 2,
+        "summary_spacing": 6,
+        "text": {
+          "family": "Zed Sans",
+          "color": "#073642",
+          "size": 14
+        },
+        "icon_color_ok": "#586e75",
+        "icon_color_warning": "#b58900",
+        "icon_color_error": "#dc322f",
+        "container_ok": {
           "corner_radius": 6,
           "padding": {
             "left": 6,
             "right": 6
           },
-          "family": "Zed Sans",
-          "color": "#073642",
-          "size": 14,
-          "hover": {
-            "background": "#93a1a11f"
-          }
+          "background": "#93a1a11f"
         },
-        "summary_warning": {
+        "container_warning": {
           "corner_radius": 6,
           "padding": {
             "left": 6,
             "right": 6
           },
-          "family": "Zed Sans",
-          "color": "#073642",
-          "size": 14,
           "background": "#b5890026",
           "border": {
             "color": "#b5890026",
             "width": 1
-          },
-          "hover": {
-            "background": "#b5890033"
           }
         },
-        "summary_error": {
+        "container_error": {
           "corner_radius": 6,
           "padding": {
             "left": 6,
             "right": 6
           },
-          "family": "Zed Sans",
-          "color": "#073642",
-          "size": 14,
           "background": "#dc322f26",
           "border": {
             "color": "#dc322f26",
             "width": 1
-          },
-          "hover": {
-            "background": "#dc322f33"
           }
         },
-        "message": {
-          "family": "Zed Sans",
-          "color": "#586e75",
-          "size": 14,
-          "hover": {
-            "family": "Zed Sans",
-            "color": "#586e75",
-            "size": 14
+        "hover": {
+          "icon_color_ok": "#073642",
+          "container_ok": {
+            "corner_radius": 6,
+            "padding": {
+              "left": 6,
+              "right": 6
+            },
+            "background": "#93a1a11f"
+          },
+          "container_warning": {
+            "corner_radius": 6,
+            "padding": {
+              "left": 6,
+              "right": 6
+            },
+            "background": "#b5890033",
+            "border": {
+              "color": "#b5890026",
+              "width": 1
+            }
+          },
+          "container_error": {
+            "corner_radius": 6,
+            "padding": {
+              "left": 6,
+              "right": 6
+            },
+            "background": "#dc322f33",
+            "border": {
+              "color": "#dc322f26",
+              "width": 1
+            }
           }
-        },
-        "icon_color_ok": "#586e75",
-        "icon_color_warning": "#b58900",
-        "icon_color_error": "#dc322f",
-        "icon_width": 14,
-        "icon_spacing": 2,
-        "summary_spacing": 6
+        }
       },
       "sidebar_buttons": {
         "group_left": {},

assets/themes/sulphurpool-dark.json πŸ”—

@@ -226,73 +226,96 @@
           "background": "#5e668752"
         }
       },
-      "diagnostics": {
+      "diagnostic_message": {
+        "family": "Zed Sans",
+        "color": "#979db4",
+        "size": 14,
+        "hover": {
+          "family": "Zed Sans",
+          "color": "#979db4",
+          "size": 14
+        }
+      },
+      "diagnostic_summary": {
         "height": 16,
-        "summary_ok": {
+        "icon_width": 14,
+        "icon_spacing": 2,
+        "summary_spacing": 6,
+        "text": {
+          "family": "Zed Sans",
+          "color": "#dfe2f1",
+          "size": 14
+        },
+        "icon_color_ok": "#979db4",
+        "icon_color_warning": "#c08b30",
+        "icon_color_error": "#c94922",
+        "container_ok": {
           "corner_radius": 6,
           "padding": {
             "left": 6,
             "right": 6
           },
-          "family": "Zed Sans",
-          "color": "#dfe2f1",
-          "size": 14,
-          "hover": {
-            "background": "#5e668752"
-          }
+          "background": "#5e668752"
         },
-        "summary_warning": {
+        "container_warning": {
           "corner_radius": 6,
           "padding": {
             "left": 6,
             "right": 6
           },
-          "family": "Zed Sans",
-          "color": "#dfe2f1",
-          "size": 14,
           "background": "#c08b3026",
           "border": {
             "color": "#c08b3026",
             "width": 1
-          },
-          "hover": {
-            "background": "#c08b3033"
           }
         },
-        "summary_error": {
+        "container_error": {
           "corner_radius": 6,
           "padding": {
             "left": 6,
             "right": 6
           },
-          "family": "Zed Sans",
-          "color": "#dfe2f1",
-          "size": 14,
           "background": "#c9492226",
           "border": {
             "color": "#c9492226",
             "width": 1
-          },
-          "hover": {
-            "background": "#c9492233"
           }
         },
-        "message": {
-          "family": "Zed Sans",
-          "color": "#979db4",
-          "size": 14,
-          "hover": {
-            "family": "Zed Sans",
-            "color": "#979db4",
-            "size": 14
+        "hover": {
+          "icon_color_ok": "#dfe2f1",
+          "container_ok": {
+            "corner_radius": 6,
+            "padding": {
+              "left": 6,
+              "right": 6
+            },
+            "background": "#5e668752"
+          },
+          "container_warning": {
+            "corner_radius": 6,
+            "padding": {
+              "left": 6,
+              "right": 6
+            },
+            "background": "#c08b3033",
+            "border": {
+              "color": "#c08b3026",
+              "width": 1
+            }
+          },
+          "container_error": {
+            "corner_radius": 6,
+            "padding": {
+              "left": 6,
+              "right": 6
+            },
+            "background": "#c9492233",
+            "border": {
+              "color": "#c9492226",
+              "width": 1
+            }
           }
-        },
-        "icon_color_ok": "#979db4",
-        "icon_color_warning": "#c08b30",
-        "icon_color_error": "#c94922",
-        "icon_width": 14,
-        "icon_spacing": 2,
-        "summary_spacing": 6
+        }
       },
       "sidebar_buttons": {
         "group_left": {},

assets/themes/sulphurpool-light.json πŸ”—

@@ -226,73 +226,96 @@
           "background": "#979db41f"
         }
       },
-      "diagnostics": {
+      "diagnostic_message": {
+        "family": "Zed Sans",
+        "color": "#5e6687",
+        "size": 14,
+        "hover": {
+          "family": "Zed Sans",
+          "color": "#5e6687",
+          "size": 14
+        }
+      },
+      "diagnostic_summary": {
         "height": 16,
-        "summary_ok": {
+        "icon_width": 14,
+        "icon_spacing": 2,
+        "summary_spacing": 6,
+        "text": {
+          "family": "Zed Sans",
+          "color": "#293256",
+          "size": 14
+        },
+        "icon_color_ok": "#5e6687",
+        "icon_color_warning": "#c08b30",
+        "icon_color_error": "#c94922",
+        "container_ok": {
           "corner_radius": 6,
           "padding": {
             "left": 6,
             "right": 6
           },
-          "family": "Zed Sans",
-          "color": "#293256",
-          "size": 14,
-          "hover": {
-            "background": "#979db41f"
-          }
+          "background": "#979db41f"
         },
-        "summary_warning": {
+        "container_warning": {
           "corner_radius": 6,
           "padding": {
             "left": 6,
             "right": 6
           },
-          "family": "Zed Sans",
-          "color": "#293256",
-          "size": 14,
           "background": "#c08b3026",
           "border": {
             "color": "#c08b3026",
             "width": 1
-          },
-          "hover": {
-            "background": "#c08b3033"
           }
         },
-        "summary_error": {
+        "container_error": {
           "corner_radius": 6,
           "padding": {
             "left": 6,
             "right": 6
           },
-          "family": "Zed Sans",
-          "color": "#293256",
-          "size": 14,
           "background": "#c9492226",
           "border": {
             "color": "#c9492226",
             "width": 1
-          },
-          "hover": {
-            "background": "#c9492233"
           }
         },
-        "message": {
-          "family": "Zed Sans",
-          "color": "#5e6687",
-          "size": 14,
-          "hover": {
-            "family": "Zed Sans",
-            "color": "#5e6687",
-            "size": 14
+        "hover": {
+          "icon_color_ok": "#293256",
+          "container_ok": {
+            "corner_radius": 6,
+            "padding": {
+              "left": 6,
+              "right": 6
+            },
+            "background": "#979db41f"
+          },
+          "container_warning": {
+            "corner_radius": 6,
+            "padding": {
+              "left": 6,
+              "right": 6
+            },
+            "background": "#c08b3033",
+            "border": {
+              "color": "#c08b3026",
+              "width": 1
+            }
+          },
+          "container_error": {
+            "corner_radius": 6,
+            "padding": {
+              "left": 6,
+              "right": 6
+            },
+            "background": "#c9492233",
+            "border": {
+              "color": "#c9492226",
+              "width": 1
+            }
           }
-        },
-        "icon_color_ok": "#5e6687",
-        "icon_color_warning": "#c08b30",
-        "icon_color_error": "#c94922",
-        "icon_width": 14,
-        "icon_spacing": 2,
-        "summary_spacing": 6
+        }
       },
       "sidebar_buttons": {
         "group_left": {},

crates/diagnostics/src/items.rs πŸ”—

@@ -95,20 +95,11 @@ impl View for DiagnosticIndicator {
                     .theme
                     .workspace
                     .status_bar
-                    .diagnostics;
-
-                let summary_style = if self.summary.error_count > 0 {
-                    &style.summary_error
-                } else if self.summary.warning_count > 0 {
-                    &style.summary_warning
+                    .diagnostic_summary;
+                let style = if state.hovered {
+                    style.hover()
                 } else {
-                    &style.summary_ok
-                };
-
-                let summary_style = if state.hovered {
-                    summary_style.hover()
-                } else {
-                    &summary_style.default
+                    &style.default
                 };
 
                 let mut summary_row = Flex::row();
@@ -122,12 +113,9 @@ impl View for DiagnosticIndicator {
                             .contained()
                             .with_margin_right(style.icon_spacing)
                             .named("error-icon"),
-                        Label::new(
-                            self.summary.error_count.to_string(),
-                            summary_style.text.clone(),
-                        )
-                        .aligned()
-                        .boxed(),
+                        Label::new(self.summary.error_count.to_string(), style.text.clone())
+                            .aligned()
+                            .boxed(),
                     ]);
                 }
 
@@ -146,12 +134,9 @@ impl View for DiagnosticIndicator {
                                 0.
                             })
                             .named("warning-icon"),
-                        Label::new(
-                            self.summary.warning_count.to_string(),
-                            summary_style.text.clone(),
-                        )
-                        .aligned()
-                        .boxed(),
+                        Label::new(self.summary.warning_count.to_string(), style.text.clone())
+                            .aligned()
+                            .boxed(),
                     ]);
                 }
 
@@ -170,7 +155,13 @@ impl View for DiagnosticIndicator {
                     .constrained()
                     .with_height(style.height)
                     .contained()
-                    .with_style(summary_style.container)
+                    .with_style(if self.summary.error_count > 0 {
+                        style.container_error
+                    } else if self.summary.warning_count > 0 {
+                        style.container_warning
+                    } else {
+                        style.container_ok
+                    })
                     .boxed()
             })
             .with_cursor_style(CursorStyle::PointingHand)
@@ -181,20 +172,22 @@ impl View for DiagnosticIndicator {
 
         let style = &cx.global::<Settings>().theme.workspace.status_bar;
         let item_spacing = style.item_spacing;
-        let message_style = &style.diagnostics.message;
 
         if in_progress {
             element.add_child(
-                Label::new("checking…".into(), message_style.default.text.clone())
-                    .aligned()
-                    .contained()
-                    .with_margin_left(item_spacing)
-                    .boxed(),
+                Label::new(
+                    "checking…".into(),
+                    style.diagnostic_message.default.text.clone(),
+                )
+                .aligned()
+                .contained()
+                .with_margin_left(item_spacing)
+                .boxed(),
             );
         } else if let Some(diagnostic) = &self.current_diagnostic {
-            let message_style = message_style.clone();
+            let message_style = style.diagnostic_message.clone();
             element.add_child(
-                MouseEventHandler::new::<Message, _, _>(0, cx, |state, _| {
+                MouseEventHandler::new::<Message, _, _>(1, cx, |state, _| {
                     Label::new(
                         diagnostic.message.split('\n').next().unwrap().to_string(),
                         if state.hovered {

crates/theme/src/theme.rs πŸ”—

@@ -144,7 +144,8 @@ pub struct StatusBar {
     pub auto_update_done_message: TextStyle,
     pub lsp_status: Interactive<StatusBarLspStatus>,
     pub sidebar_buttons: StatusBarSidebarButtons,
-    pub diagnostics: StatusBarDiagnostics,
+    pub diagnostic_summary: Interactive<StatusBarDiagnosticSummary>,
+    pub diagnostic_message: Interactive<ContainedText>,
 }
 
 #[derive(Deserialize, Default)]
@@ -155,14 +156,14 @@ pub struct StatusBarSidebarButtons {
 }
 
 #[derive(Deserialize, Default)]
-pub struct StatusBarDiagnostics {
-    pub message: Interactive<ContainedText>,
-    pub summary_ok: Interactive<ContainedText>,
-    pub summary_warning: Interactive<ContainedText>,
-    pub summary_error: Interactive<ContainedText>,
+pub struct StatusBarDiagnosticSummary {
+    pub container_ok: ContainerStyle,
+    pub container_warning: ContainerStyle,
+    pub container_error: ContainerStyle,
+    pub text: TextStyle,
     pub icon_color_ok: Color,
-    pub icon_color_error: Color,
     pub icon_color_warning: Color,
+    pub icon_color_error: Color,
     pub height: f32,
     pub icon_width: f32,
     pub icon_spacing: f32,

styles/src/styleTree/workspace.ts πŸ”—

@@ -33,12 +33,6 @@ export default function workspace(theme: Theme) {
     },
   };
 
-  const diagnosticSummary = {
-    cornerRadius: 6,
-    padding: { left: 6, right: 6 },
-    ...text(theme, "sans", "primary", { size: "sm" }),
-  };
-
   return {
     background: backgroundColor(theme, 300),
     leaderBorderOpacity: 0.7,
@@ -89,40 +83,56 @@ export default function workspace(theme: Theme) {
           background: backgroundColor(theme, 300, "hovered"),
         }
       },
-      diagnostics: {
+      diagnosticMessage: {
+        ...text(theme, "sans", "muted"),
+        hover: text(theme, "sans", "secondary"),
+      },
+      diagnosticSummary: {
         height: 16,
-        summaryOk: {
-          ...diagnosticSummary,
-          hover: {
-            background: backgroundColor(theme, 300, "hovered"),
-          }
+        iconWidth: 14,
+        iconSpacing: 2,
+        summarySpacing: 6,
+        text: text(theme, "sans", "primary", { size: "sm" }),
+        iconColorOk: iconColor(theme, "secondary"),
+        iconColorWarning: iconColor(theme, "warning"),
+        iconColorError: iconColor(theme, "error"),
+        containerOk: {
+          cornerRadius: 6,
+          padding: { left: 6, right: 6 },
+          background: backgroundColor(theme, 300, "hovered"),
         },
-        summaryWarning: {
-          ...diagnosticSummary,
+        containerWarning: {
+          cornerRadius: 6,
+          padding: { left: 6, right: 6 },
           background: backgroundColor(theme, "warning"),
           border: border(theme, "warning"),
-          hover: {
-            background: backgroundColor(theme, "warning", "hovered"),
-          }
         },
-        summaryError: {
-          ...diagnosticSummary,
+        containerError: {
+          cornerRadius: 6,
+          padding: { left: 6, right: 6 },
           background: backgroundColor(theme, "error"),
           border: border(theme, "error"),
-          hover: {
+        },
+        hover: {
+          iconColorOk: iconColor(theme, "primary"),
+          containerOk: {
+            cornerRadius: 6,
+            padding: { left: 6, right: 6 },
+            background: backgroundColor(theme, 300, "hovered"),
+          },
+          containerWarning: {
+            cornerRadius: 6,
+            padding: { left: 6, right: 6 },
+            background: backgroundColor(theme, "warning", "hovered"),
+            border: border(theme, "warning"),
+          },
+          containerError: {
+            cornerRadius: 6,
+            padding: { left: 6, right: 6 },
             background: backgroundColor(theme, "error", "hovered"),
+            border: border(theme, "error"),
           }
         },
-        message: {
-          ...text(theme, "sans", "muted"),
-          hover: text(theme, "sans", "secondary"),
-        },
-        iconColorOk: iconColor(theme, "secondary"),
-        iconColorWarning: iconColor(theme, "warning"),
-        iconColorError: iconColor(theme, "error"),
-        iconWidth: 14,
-        iconSpacing: 2,
-        summarySpacing: 6,
       },
       sidebarButtons: {
         groupLeft: {},