Restructure status bar theme to style interactive elements more concisely

Max Brunsfeld created

Introduce an `Interactive` wrapper type that allows themes to selectively
override properties of items in a hovered or active state.

Change summary

assets/themes/cave-dark.json          | 112 ++++++++--------------------
assets/themes/cave-light.json         | 112 ++++++++--------------------
assets/themes/dark.json               | 112 ++++++++--------------------
assets/themes/light.json              | 112 ++++++++--------------------
assets/themes/solarized-dark.json     | 112 ++++++++--------------------
assets/themes/solarized-light.json    | 112 ++++++++--------------------
assets/themes/sulphurpool-dark.json   | 112 ++++++++--------------------
assets/themes/sulphurpool-light.json  | 112 ++++++++--------------------
crates/diagnostics/src/diagnostics.rs |   1 
crates/diagnostics/src/items.rs       |  77 +++++++++++++------
crates/theme/src/theme.rs             |  95 ++++++++++++++++++++---
crates/workspace/src/lsp_status.rs    |  39 +++------
crates/workspace/src/sidebar.rs       |   8 -
styles/src/styleTree/workspace.ts     |  64 ++++++---------
14 files changed, 423 insertions(+), 757 deletions(-)

Detailed changes

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

@@ -189,11 +189,6 @@
         "color": "#8b8792",
         "size": 14
       },
-      "diagnostic_message": {
-        "family": "Zed Sans",
-        "color": "#8b8792",
-        "size": 14
-      },
       "auto_update_progress_message": {
         "family": "Zed Sans",
         "color": "#8b8792",
@@ -208,29 +203,24 @@
         "icon_spacing": 4,
         "icon_width": 14,
         "height": 18,
+        "corner_radius": 6,
+        "padding": {
+          "left": 6,
+          "right": 6
+        },
         "message": {
           "family": "Zed Sans",
           "color": "#8b8792",
           "size": 14
         },
-        "message_hover": {
-          "family": "Zed Sans",
-          "color": "#e2dfe7",
-          "size": 14
-        },
         "icon_color": "#8b8792",
-        "icon_color_hover": "#e2dfe7",
-        "corner_radius": 6,
-        "padding": {
-          "left": 6,
-          "right": 6
-        },
-        "container_hover": {
-          "corner_radius": 6,
-          "padding": {
-            "left": 6,
-            "right": 6
+        "hover": {
+          "message": {
+            "family": "Zed Sans",
+            "color": "#e2dfe7",
+            "size": 14
           },
+          "icon_color": "#e2dfe7",
           "background": "#58526052"
         }
       },
@@ -244,17 +234,8 @@
           },
           "family": "Zed Sans",
           "color": "#e2dfe7",
-          "size": 14
-        },
-        "summary_ok_hover": {
-          "corner_radius": 6,
-          "padding": {
-            "left": 6,
-            "right": 6
-          },
-          "family": "Zed Sans",
-          "color": "#e2dfe7",
-          "size": 14
+          "size": 14,
+          "hover": {}
         },
         "summary_warning": {
           "corner_radius": 6,
@@ -269,21 +250,9 @@
           "border": {
             "color": "#a06e3b26",
             "width": 1
-          }
-        },
-        "summary_warning_hover": {
-          "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": {
@@ -299,27 +268,20 @@
           "border": {
             "color": "#be467826",
             "width": 1
-          }
-        },
-        "summary_error_hover": {
-          "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
+          "size": 14,
+          "hover": {
+            "family": "Zed Sans",
+            "color": "#8b8792",
+            "size": 14
+          }
         },
         "icon_color_ok": "#8b8792",
         "icon_color_warning": "#a06e3b",
@@ -332,33 +294,21 @@
         "group_left": {},
         "group_right": {},
         "item": {
-          "icon_color": "#8b8792",
-          "icon_size": 18,
-          "padding": {
-            "left": 5,
-            "right": 5
-          },
-          "corner_radius": 5
-        },
-        "item_hover": {
-          "icon_color": "#8b8792",
           "icon_size": 18,
           "padding": {
             "left": 5,
             "right": 5
           },
           "corner_radius": 5,
-          "background": "#58526052"
-        },
-        "item_active": {
-          "icon_color": "#efecf4",
-          "icon_size": 18,
-          "padding": {
-            "left": 5,
-            "right": 5
+          "icon_color": "#8b8792",
+          "hover": {
+            "icon_color": "#8b8792",
+            "background": "#58526052"
           },
-          "corner_radius": 5,
-          "background": "#5852607a"
+          "active": {
+            "icon_color": "#efecf4",
+            "background": "#5852607a"
+          }
         }
       }
     },

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

@@ -189,11 +189,6 @@
         "color": "#585260",
         "size": 14
       },
-      "diagnostic_message": {
-        "family": "Zed Sans",
-        "color": "#585260",
-        "size": 14
-      },
       "auto_update_progress_message": {
         "family": "Zed Sans",
         "color": "#585260",
@@ -208,29 +203,24 @@
         "icon_spacing": 4,
         "icon_width": 14,
         "height": 18,
+        "corner_radius": 6,
+        "padding": {
+          "left": 6,
+          "right": 6
+        },
         "message": {
           "family": "Zed Sans",
           "color": "#585260",
           "size": 14
         },
-        "message_hover": {
-          "family": "Zed Sans",
-          "color": "#26232a",
-          "size": 14
-        },
         "icon_color": "#585260",
-        "icon_color_hover": "#26232a",
-        "corner_radius": 6,
-        "padding": {
-          "left": 6,
-          "right": 6
-        },
-        "container_hover": {
-          "corner_radius": 6,
-          "padding": {
-            "left": 6,
-            "right": 6
+        "hover": {
+          "message": {
+            "family": "Zed Sans",
+            "color": "#26232a",
+            "size": 14
           },
+          "icon_color": "#26232a",
           "background": "#8b87921f"
         }
       },
@@ -244,17 +234,8 @@
           },
           "family": "Zed Sans",
           "color": "#26232a",
-          "size": 14
-        },
-        "summary_ok_hover": {
-          "corner_radius": 6,
-          "padding": {
-            "left": 6,
-            "right": 6
-          },
-          "family": "Zed Sans",
-          "color": "#26232a",
-          "size": 14
+          "size": 14,
+          "hover": {}
         },
         "summary_warning": {
           "corner_radius": 6,
@@ -269,21 +250,9 @@
           "border": {
             "color": "#a06e3b26",
             "width": 1
-          }
-        },
-        "summary_warning_hover": {
-          "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": {
@@ -299,27 +268,20 @@
           "border": {
             "color": "#be467826",
             "width": 1
-          }
-        },
-        "summary_error_hover": {
-          "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
+          "size": 14,
+          "hover": {
+            "family": "Zed Sans",
+            "color": "#585260",
+            "size": 14
+          }
         },
         "icon_color_ok": "#585260",
         "icon_color_warning": "#a06e3b",
@@ -332,33 +294,21 @@
         "group_left": {},
         "group_right": {},
         "item": {
-          "icon_color": "#585260",
-          "icon_size": 18,
-          "padding": {
-            "left": 5,
-            "right": 5
-          },
-          "corner_radius": 5
-        },
-        "item_hover": {
-          "icon_color": "#585260",
           "icon_size": 18,
           "padding": {
             "left": 5,
             "right": 5
           },
           "corner_radius": 5,
-          "background": "#8b87921f"
-        },
-        "item_active": {
-          "icon_color": "#19171c",
-          "icon_size": 18,
-          "padding": {
-            "left": 5,
-            "right": 5
+          "icon_color": "#585260",
+          "hover": {
+            "icon_color": "#585260",
+            "background": "#8b87921f"
           },
-          "corner_radius": 5,
-          "background": "#8b87922e"
+          "active": {
+            "icon_color": "#19171c",
+            "background": "#8b87922e"
+          }
         }
       }
     },

assets/themes/dark.json πŸ”—

@@ -189,11 +189,6 @@
         "color": "#808080",
         "size": 14
       },
-      "diagnostic_message": {
-        "family": "Zed Sans",
-        "color": "#808080",
-        "size": 14
-      },
       "auto_update_progress_message": {
         "family": "Zed Sans",
         "color": "#808080",
@@ -208,29 +203,24 @@
         "icon_spacing": 4,
         "icon_width": 14,
         "height": 18,
+        "corner_radius": 6,
+        "padding": {
+          "left": 6,
+          "right": 6
+        },
         "message": {
           "family": "Zed Sans",
           "color": "#808080",
           "size": 14
         },
-        "message_hover": {
-          "family": "Zed Sans",
-          "color": "#f1f1f1",
-          "size": 14
-        },
         "icon_color": "#555555",
-        "icon_color_hover": "#c6c6c6",
-        "corner_radius": 6,
-        "padding": {
-          "left": 6,
-          "right": 6
-        },
-        "container_hover": {
-          "corner_radius": 6,
-          "padding": {
-            "left": 6,
-            "right": 6
+        "hover": {
+          "message": {
+            "family": "Zed Sans",
+            "color": "#f1f1f1",
+            "size": 14
           },
+          "icon_color": "#c6c6c6",
           "background": "#232323"
         }
       },
@@ -244,17 +234,8 @@
           },
           "family": "Zed Sans",
           "color": "#f1f1f1",
-          "size": 14
-        },
-        "summary_ok_hover": {
-          "corner_radius": 6,
-          "padding": {
-            "left": 6,
-            "right": 6
-          },
-          "family": "Zed Sans",
-          "color": "#f1f1f1",
-          "size": 14
+          "size": 14,
+          "hover": {}
         },
         "summary_warning": {
           "corner_radius": 6,
@@ -269,21 +250,9 @@
           "border": {
             "color": "#f6a72426",
             "width": 1
-          }
-        },
-        "summary_warning_hover": {
-          "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": {
@@ -299,27 +268,20 @@
           "border": {
             "color": "#eb2d2d26",
             "width": 1
-          }
-        },
-        "summary_error_hover": {
-          "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
+          "size": 14,
+          "hover": {
+            "family": "Zed Sans",
+            "color": "#9c9c9c",
+            "size": 14
+          }
         },
         "icon_color_ok": "#9c9c9c",
         "icon_color_warning": "#f6a724",
@@ -332,33 +294,21 @@
         "group_left": {},
         "group_right": {},
         "item": {
-          "icon_color": "#9c9c9c",
-          "icon_size": 18,
-          "padding": {
-            "left": 5,
-            "right": 5
-          },
-          "corner_radius": 5
-        },
-        "item_hover": {
-          "icon_color": "#9c9c9c",
           "icon_size": 18,
           "padding": {
             "left": 5,
             "right": 5
           },
           "corner_radius": 5,
-          "background": "#232323"
-        },
-        "item_active": {
-          "icon_color": "#ffffff",
-          "icon_size": 18,
-          "padding": {
-            "left": 5,
-            "right": 5
+          "icon_color": "#555555",
+          "hover": {
+            "icon_color": "#9c9c9c",
+            "background": "#232323"
           },
-          "corner_radius": 5,
-          "background": "#2b2b2b"
+          "active": {
+            "icon_color": "#ffffff",
+            "background": "#2b2b2b"
+          }
         }
       }
     },

assets/themes/light.json πŸ”—

@@ -189,11 +189,6 @@
         "color": "#636363",
         "size": 14
       },
-      "diagnostic_message": {
-        "family": "Zed Sans",
-        "color": "#636363",
-        "size": 14
-      },
       "auto_update_progress_message": {
         "family": "Zed Sans",
         "color": "#636363",
@@ -208,29 +203,24 @@
         "icon_spacing": 4,
         "icon_width": 14,
         "height": 18,
+        "corner_radius": 6,
+        "padding": {
+          "left": 6,
+          "right": 6
+        },
         "message": {
           "family": "Zed Sans",
           "color": "#636363",
           "size": 14
         },
-        "message_hover": {
-          "family": "Zed Sans",
-          "color": "#2b2b2b",
-          "size": 14
-        },
         "icon_color": "#9c9c9c",
-        "icon_color_hover": "#393939",
-        "corner_radius": 6,
-        "padding": {
-          "left": 6,
-          "right": 6
-        },
-        "container_hover": {
-          "corner_radius": 6,
-          "padding": {
-            "left": 6,
-            "right": 6
+        "hover": {
+          "message": {
+            "family": "Zed Sans",
+            "color": "#2b2b2b",
+            "size": 14
           },
+          "icon_color": "#393939",
           "background": "#eaeaea"
         }
       },
@@ -244,17 +234,8 @@
           },
           "family": "Zed Sans",
           "color": "#2b2b2b",
-          "size": 14
-        },
-        "summary_ok_hover": {
-          "corner_radius": 6,
-          "padding": {
-            "left": 6,
-            "right": 6
-          },
-          "family": "Zed Sans",
-          "color": "#2b2b2b",
-          "size": 14
+          "size": 14,
+          "hover": {}
         },
         "summary_warning": {
           "corner_radius": 6,
@@ -269,21 +250,9 @@
           "border": {
             "color": "#f6a72426",
             "width": 1
-          }
-        },
-        "summary_warning_hover": {
-          "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": {
@@ -299,27 +268,20 @@
           "border": {
             "color": "#eb2d2d26",
             "width": 1
-          }
-        },
-        "summary_error_hover": {
-          "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
+          "size": 14,
+          "hover": {
+            "family": "Zed Sans",
+            "color": "#474747",
+            "size": 14
+          }
         },
         "icon_color_ok": "#717171",
         "icon_color_warning": "#f7bf17",
@@ -332,33 +294,21 @@
         "group_left": {},
         "group_right": {},
         "item": {
-          "icon_color": "#717171",
-          "icon_size": 18,
-          "padding": {
-            "left": 5,
-            "right": 5
-          },
-          "corner_radius": 5
-        },
-        "item_hover": {
-          "icon_color": "#717171",
           "icon_size": 18,
           "padding": {
             "left": 5,
             "right": 5
           },
           "corner_radius": 5,
-          "background": "#eaeaea"
-        },
-        "item_active": {
-          "icon_color": "#000000",
-          "icon_size": 18,
-          "padding": {
-            "left": 5,
-            "right": 5
+          "icon_color": "#9c9c9c",
+          "hover": {
+            "icon_color": "#717171",
+            "background": "#eaeaea"
           },
-          "corner_radius": 5,
-          "background": "#e3e3e3"
+          "active": {
+            "icon_color": "#000000",
+            "background": "#e3e3e3"
+          }
         }
       }
     },

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

@@ -189,11 +189,6 @@
         "color": "#93a1a1",
         "size": 14
       },
-      "diagnostic_message": {
-        "family": "Zed Sans",
-        "color": "#93a1a1",
-        "size": 14
-      },
       "auto_update_progress_message": {
         "family": "Zed Sans",
         "color": "#93a1a1",
@@ -208,29 +203,24 @@
         "icon_spacing": 4,
         "icon_width": 14,
         "height": 18,
+        "corner_radius": 6,
+        "padding": {
+          "left": 6,
+          "right": 6
+        },
         "message": {
           "family": "Zed Sans",
           "color": "#93a1a1",
           "size": 14
         },
-        "message_hover": {
-          "family": "Zed Sans",
-          "color": "#eee8d5",
-          "size": 14
-        },
         "icon_color": "#93a1a1",
-        "icon_color_hover": "#eee8d5",
-        "corner_radius": 6,
-        "padding": {
-          "left": 6,
-          "right": 6
-        },
-        "container_hover": {
-          "corner_radius": 6,
-          "padding": {
-            "left": 6,
-            "right": 6
+        "hover": {
+          "message": {
+            "family": "Zed Sans",
+            "color": "#eee8d5",
+            "size": 14
           },
+          "icon_color": "#eee8d5",
           "background": "#586e7552"
         }
       },
@@ -244,17 +234,8 @@
           },
           "family": "Zed Sans",
           "color": "#eee8d5",
-          "size": 14
-        },
-        "summary_ok_hover": {
-          "corner_radius": 6,
-          "padding": {
-            "left": 6,
-            "right": 6
-          },
-          "family": "Zed Sans",
-          "color": "#eee8d5",
-          "size": 14
+          "size": 14,
+          "hover": {}
         },
         "summary_warning": {
           "corner_radius": 6,
@@ -269,21 +250,9 @@
           "border": {
             "color": "#b5890026",
             "width": 1
-          }
-        },
-        "summary_warning_hover": {
-          "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": {
@@ -299,27 +268,20 @@
           "border": {
             "color": "#dc322f26",
             "width": 1
-          }
-        },
-        "summary_error_hover": {
-          "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
+          "size": 14,
+          "hover": {
+            "family": "Zed Sans",
+            "color": "#93a1a1",
+            "size": 14
+          }
         },
         "icon_color_ok": "#93a1a1",
         "icon_color_warning": "#b58900",
@@ -332,33 +294,21 @@
         "group_left": {},
         "group_right": {},
         "item": {
-          "icon_color": "#93a1a1",
-          "icon_size": 18,
-          "padding": {
-            "left": 5,
-            "right": 5
-          },
-          "corner_radius": 5
-        },
-        "item_hover": {
-          "icon_color": "#93a1a1",
           "icon_size": 18,
           "padding": {
             "left": 5,
             "right": 5
           },
           "corner_radius": 5,
-          "background": "#586e7552"
-        },
-        "item_active": {
-          "icon_color": "#fdf6e3",
-          "icon_size": 18,
-          "padding": {
-            "left": 5,
-            "right": 5
+          "icon_color": "#93a1a1",
+          "hover": {
+            "icon_color": "#93a1a1",
+            "background": "#586e7552"
           },
-          "corner_radius": 5,
-          "background": "#586e757a"
+          "active": {
+            "icon_color": "#fdf6e3",
+            "background": "#586e757a"
+          }
         }
       }
     },

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

@@ -189,11 +189,6 @@
         "color": "#586e75",
         "size": 14
       },
-      "diagnostic_message": {
-        "family": "Zed Sans",
-        "color": "#586e75",
-        "size": 14
-      },
       "auto_update_progress_message": {
         "family": "Zed Sans",
         "color": "#586e75",
@@ -208,29 +203,24 @@
         "icon_spacing": 4,
         "icon_width": 14,
         "height": 18,
+        "corner_radius": 6,
+        "padding": {
+          "left": 6,
+          "right": 6
+        },
         "message": {
           "family": "Zed Sans",
           "color": "#586e75",
           "size": 14
         },
-        "message_hover": {
-          "family": "Zed Sans",
-          "color": "#073642",
-          "size": 14
-        },
         "icon_color": "#586e75",
-        "icon_color_hover": "#073642",
-        "corner_radius": 6,
-        "padding": {
-          "left": 6,
-          "right": 6
-        },
-        "container_hover": {
-          "corner_radius": 6,
-          "padding": {
-            "left": 6,
-            "right": 6
+        "hover": {
+          "message": {
+            "family": "Zed Sans",
+            "color": "#073642",
+            "size": 14
           },
+          "icon_color": "#073642",
           "background": "#93a1a11f"
         }
       },
@@ -244,17 +234,8 @@
           },
           "family": "Zed Sans",
           "color": "#073642",
-          "size": 14
-        },
-        "summary_ok_hover": {
-          "corner_radius": 6,
-          "padding": {
-            "left": 6,
-            "right": 6
-          },
-          "family": "Zed Sans",
-          "color": "#073642",
-          "size": 14
+          "size": 14,
+          "hover": {}
         },
         "summary_warning": {
           "corner_radius": 6,
@@ -269,21 +250,9 @@
           "border": {
             "color": "#b5890026",
             "width": 1
-          }
-        },
-        "summary_warning_hover": {
-          "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": {
@@ -299,27 +268,20 @@
           "border": {
             "color": "#dc322f26",
             "width": 1
-          }
-        },
-        "summary_error_hover": {
-          "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
+          "size": 14,
+          "hover": {
+            "family": "Zed Sans",
+            "color": "#586e75",
+            "size": 14
+          }
         },
         "icon_color_ok": "#586e75",
         "icon_color_warning": "#b58900",
@@ -332,33 +294,21 @@
         "group_left": {},
         "group_right": {},
         "item": {
-          "icon_color": "#586e75",
-          "icon_size": 18,
-          "padding": {
-            "left": 5,
-            "right": 5
-          },
-          "corner_radius": 5
-        },
-        "item_hover": {
-          "icon_color": "#586e75",
           "icon_size": 18,
           "padding": {
             "left": 5,
             "right": 5
           },
           "corner_radius": 5,
-          "background": "#93a1a11f"
-        },
-        "item_active": {
-          "icon_color": "#002b36",
-          "icon_size": 18,
-          "padding": {
-            "left": 5,
-            "right": 5
+          "icon_color": "#586e75",
+          "hover": {
+            "icon_color": "#586e75",
+            "background": "#93a1a11f"
           },
-          "corner_radius": 5,
-          "background": "#93a1a12e"
+          "active": {
+            "icon_color": "#002b36",
+            "background": "#93a1a12e"
+          }
         }
       }
     },

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

@@ -189,11 +189,6 @@
         "color": "#979db4",
         "size": 14
       },
-      "diagnostic_message": {
-        "family": "Zed Sans",
-        "color": "#979db4",
-        "size": 14
-      },
       "auto_update_progress_message": {
         "family": "Zed Sans",
         "color": "#979db4",
@@ -208,29 +203,24 @@
         "icon_spacing": 4,
         "icon_width": 14,
         "height": 18,
+        "corner_radius": 6,
+        "padding": {
+          "left": 6,
+          "right": 6
+        },
         "message": {
           "family": "Zed Sans",
           "color": "#979db4",
           "size": 14
         },
-        "message_hover": {
-          "family": "Zed Sans",
-          "color": "#dfe2f1",
-          "size": 14
-        },
         "icon_color": "#979db4",
-        "icon_color_hover": "#dfe2f1",
-        "corner_radius": 6,
-        "padding": {
-          "left": 6,
-          "right": 6
-        },
-        "container_hover": {
-          "corner_radius": 6,
-          "padding": {
-            "left": 6,
-            "right": 6
+        "hover": {
+          "message": {
+            "family": "Zed Sans",
+            "color": "#dfe2f1",
+            "size": 14
           },
+          "icon_color": "#dfe2f1",
           "background": "#5e668752"
         }
       },
@@ -244,17 +234,8 @@
           },
           "family": "Zed Sans",
           "color": "#dfe2f1",
-          "size": 14
-        },
-        "summary_ok_hover": {
-          "corner_radius": 6,
-          "padding": {
-            "left": 6,
-            "right": 6
-          },
-          "family": "Zed Sans",
-          "color": "#dfe2f1",
-          "size": 14
+          "size": 14,
+          "hover": {}
         },
         "summary_warning": {
           "corner_radius": 6,
@@ -269,21 +250,9 @@
           "border": {
             "color": "#c08b3026",
             "width": 1
-          }
-        },
-        "summary_warning_hover": {
-          "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": {
@@ -299,27 +268,20 @@
           "border": {
             "color": "#c9492226",
             "width": 1
-          }
-        },
-        "summary_error_hover": {
-          "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
+          "size": 14,
+          "hover": {
+            "family": "Zed Sans",
+            "color": "#979db4",
+            "size": 14
+          }
         },
         "icon_color_ok": "#979db4",
         "icon_color_warning": "#c08b30",
@@ -332,33 +294,21 @@
         "group_left": {},
         "group_right": {},
         "item": {
-          "icon_color": "#979db4",
-          "icon_size": 18,
-          "padding": {
-            "left": 5,
-            "right": 5
-          },
-          "corner_radius": 5
-        },
-        "item_hover": {
-          "icon_color": "#979db4",
           "icon_size": 18,
           "padding": {
             "left": 5,
             "right": 5
           },
           "corner_radius": 5,
-          "background": "#5e668752"
-        },
-        "item_active": {
-          "icon_color": "#f5f7ff",
-          "icon_size": 18,
-          "padding": {
-            "left": 5,
-            "right": 5
+          "icon_color": "#979db4",
+          "hover": {
+            "icon_color": "#979db4",
+            "background": "#5e668752"
           },
-          "corner_radius": 5,
-          "background": "#5e66877a"
+          "active": {
+            "icon_color": "#f5f7ff",
+            "background": "#5e66877a"
+          }
         }
       }
     },

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

@@ -189,11 +189,6 @@
         "color": "#5e6687",
         "size": 14
       },
-      "diagnostic_message": {
-        "family": "Zed Sans",
-        "color": "#5e6687",
-        "size": 14
-      },
       "auto_update_progress_message": {
         "family": "Zed Sans",
         "color": "#5e6687",
@@ -208,29 +203,24 @@
         "icon_spacing": 4,
         "icon_width": 14,
         "height": 18,
+        "corner_radius": 6,
+        "padding": {
+          "left": 6,
+          "right": 6
+        },
         "message": {
           "family": "Zed Sans",
           "color": "#5e6687",
           "size": 14
         },
-        "message_hover": {
-          "family": "Zed Sans",
-          "color": "#293256",
-          "size": 14
-        },
         "icon_color": "#5e6687",
-        "icon_color_hover": "#293256",
-        "corner_radius": 6,
-        "padding": {
-          "left": 6,
-          "right": 6
-        },
-        "container_hover": {
-          "corner_radius": 6,
-          "padding": {
-            "left": 6,
-            "right": 6
+        "hover": {
+          "message": {
+            "family": "Zed Sans",
+            "color": "#293256",
+            "size": 14
           },
+          "icon_color": "#293256",
           "background": "#979db41f"
         }
       },
@@ -244,17 +234,8 @@
           },
           "family": "Zed Sans",
           "color": "#293256",
-          "size": 14
-        },
-        "summary_ok_hover": {
-          "corner_radius": 6,
-          "padding": {
-            "left": 6,
-            "right": 6
-          },
-          "family": "Zed Sans",
-          "color": "#293256",
-          "size": 14
+          "size": 14,
+          "hover": {}
         },
         "summary_warning": {
           "corner_radius": 6,
@@ -269,21 +250,9 @@
           "border": {
             "color": "#c08b3026",
             "width": 1
-          }
-        },
-        "summary_warning_hover": {
-          "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": {
@@ -299,27 +268,20 @@
           "border": {
             "color": "#c9492226",
             "width": 1
-          }
-        },
-        "summary_error_hover": {
-          "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
+          "size": 14,
+          "hover": {
+            "family": "Zed Sans",
+            "color": "#5e6687",
+            "size": 14
+          }
         },
         "icon_color_ok": "#5e6687",
         "icon_color_warning": "#c08b30",
@@ -332,33 +294,21 @@
         "group_left": {},
         "group_right": {},
         "item": {
-          "icon_color": "#5e6687",
-          "icon_size": 18,
-          "padding": {
-            "left": 5,
-            "right": 5
-          },
-          "corner_radius": 5
-        },
-        "item_hover": {
-          "icon_color": "#5e6687",
           "icon_size": 18,
           "padding": {
             "left": 5,
             "right": 5
           },
           "corner_radius": 5,
-          "background": "#979db41f"
-        },
-        "item_active": {
-          "icon_color": "#202746",
-          "icon_size": 18,
-          "padding": {
-            "left": 5,
-            "right": 5
+          "icon_color": "#5e6687",
+          "hover": {
+            "icon_color": "#5e6687",
+            "background": "#979db41f"
           },
-          "corner_radius": 5,
-          "background": "#979db42e"
+          "active": {
+            "icon_color": "#202746",
+            "background": "#979db42e"
+          }
         }
       }
     },

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

@@ -35,6 +35,7 @@ const CONTEXT_LINE_COUNT: u32 = 1;
 
 pub fn init(cx: &mut MutableAppContext) {
     cx.add_action(ProjectDiagnosticsEditor::deploy);
+    items::init(cx);
 }
 
 type Event = editor::Event;

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

@@ -1,7 +1,7 @@
-use editor::Editor;
+use editor::{Editor, GoToNextDiagnostic};
 use gpui::{
-    elements::*, platform::CursorStyle, serde_json, Entity, ModelHandle, RenderContext,
-    Subscription, View, ViewContext, ViewHandle,
+    elements::*, platform::CursorStyle, serde_json, Entity, ModelHandle, MutableAppContext,
+    RenderContext, Subscription, View, ViewContext, ViewHandle, WeakViewHandle,
 };
 use language::Diagnostic;
 use project::Project;
@@ -10,11 +10,16 @@ use workspace::StatusItemView;
 
 pub struct DiagnosticIndicator {
     summary: project::DiagnosticSummary,
+    active_editor: Option<WeakViewHandle<Editor>>,
     current_diagnostic: Option<Diagnostic>,
     check_in_progress: bool,
     _observe_active_editor: Option<Subscription>,
 }
 
+pub fn init(cx: &mut MutableAppContext) {
+    cx.add_action(DiagnosticIndicator::go_to_next_diagnostic);
+}
+
 impl DiagnosticIndicator {
     pub fn new(project: &ModelHandle<Project>, cx: &mut ViewContext<Self>) -> Self {
         cx.subscribe(project, |this, project, event, cx| match event {
@@ -36,11 +41,20 @@ impl DiagnosticIndicator {
         Self {
             summary: project.read(cx).diagnostic_summary(cx),
             check_in_progress: project.read(cx).is_running_disk_based_diagnostics(),
+            active_editor: None,
             current_diagnostic: None,
             _observe_active_editor: None,
         }
     }
 
+    fn go_to_next_diagnostic(&mut self, _: &GoToNextDiagnostic, cx: &mut ViewContext<Self>) {
+        if let Some(editor) = self.active_editor.as_ref().and_then(|e| e.upgrade(cx)) {
+            editor.update(cx, |editor, cx| {
+                editor.go_to_diagnostic(editor::Direction::Next, cx);
+            })
+        }
+    }
+
     fn update(&mut self, editor: ViewHandle<Editor>, cx: &mut ViewContext<Self>) {
         let editor = editor.read(cx);
         let buffer = editor.buffer().read(cx);
@@ -70,11 +84,12 @@ impl View for DiagnosticIndicator {
     }
 
     fn render(&mut self, cx: &mut RenderContext<Self>) -> ElementBox {
-        enum Tag {}
+        enum Summary {}
+        enum Message {}
 
         let in_progress = self.check_in_progress;
         let mut element = Flex::row().with_child(
-            MouseEventHandler::new::<Tag, _, _>(0, cx, |state, cx| {
+            MouseEventHandler::new::<Summary, _, _>(0, cx, |state, cx| {
                 let style = &cx
                     .global::<Settings>()
                     .theme
@@ -83,23 +98,19 @@ impl View for DiagnosticIndicator {
                     .diagnostics;
 
                 let summary_style = if self.summary.error_count > 0 {
-                    if state.hovered {
-                        &style.summary_error_hover
-                    } else {
-                        &style.summary_error
-                    }
+                    &style.summary_error
                 } else if self.summary.warning_count > 0 {
-                    if state.hovered {
-                        &style.summary_warning_hover
-                    } else {
-                        &style.summary_warning
-                    }
-                } else if state.hovered {
-                    &style.summary_ok_hover
+                    &style.summary_warning
                 } else {
                     &style.summary_ok
                 };
 
+                let summary_style = if state.hovered {
+                    summary_style.hover()
+                } else {
+                    &summary_style.default
+                };
+
                 let mut summary_row = Flex::row();
                 if self.summary.error_count > 0 {
                     summary_row.add_children([
@@ -169,24 +180,36 @@ 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(), style.diagnostics.message.text.clone())
+                Label::new("checking…".into(), message_style.default.text.clone())
                     .aligned()
                     .contained()
-                    .with_margin_left(style.item_spacing)
+                    .with_margin_left(item_spacing)
                     .boxed(),
             );
         } else if let Some(diagnostic) = &self.current_diagnostic {
+            let message_style = message_style.clone();
             element.add_child(
-                Label::new(
-                    diagnostic.message.split('\n').next().unwrap().to_string(),
-                    style.diagnostics.message.text.clone(),
-                )
-                .aligned()
-                .contained()
-                .with_margin_left(style.item_spacing)
+                MouseEventHandler::new::<Message, _, _>(0, cx, |state, _| {
+                    Label::new(
+                        diagnostic.message.split('\n').next().unwrap().to_string(),
+                        if state.hovered {
+                            message_style.hover().text.clone()
+                        } else {
+                            message_style.default.text.clone()
+                        },
+                    )
+                    .aligned()
+                    .contained()
+                    .with_margin_left(item_spacing)
+                    .boxed()
+                })
+                .with_cursor_style(CursorStyle::PointingHand)
+                .on_click(|cx| cx.dispatch_action(GoToNextDiagnostic))
                 .boxed(),
             );
         }
@@ -206,9 +229,11 @@ impl StatusItemView for DiagnosticIndicator {
         cx: &mut ViewContext<Self>,
     ) {
         if let Some(editor) = active_pane_item.and_then(|item| item.downcast::<Editor>()) {
+            self.active_editor = Some(editor.downgrade());
             self._observe_active_editor = Some(cx.observe(&editor, Self::update));
             self.update(editor, cx);
         } else {
+            self.active_editor = None;
             self.current_diagnostic = None;
             self._observe_active_editor = None;
         }

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

@@ -6,7 +6,8 @@ use gpui::{
     fonts::{HighlightStyle, TextStyle},
     Border,
 };
-use serde::Deserialize;
+use serde::{de::DeserializeOwned, Deserialize};
+use serde_json::Value;
 use std::{collections::HashMap, sync::Arc};
 
 pub use theme_registry::*;
@@ -145,7 +146,7 @@ pub struct StatusBar {
     pub cursor_position: TextStyle,
     pub auto_update_progress_message: TextStyle,
     pub auto_update_done_message: TextStyle,
-    pub lsp_status: StatusBarLspStatus,
+    pub lsp_status: Interactive<StatusBarLspStatus>,
     pub sidebar_buttons: StatusBarSidebarButtons,
     pub diagnostics: StatusBarDiagnostics,
 }
@@ -154,20 +155,15 @@ pub struct StatusBar {
 pub struct StatusBarSidebarButtons {
     pub group_left: ContainerStyle,
     pub group_right: ContainerStyle,
-    pub item: SidebarItem,
-    pub item_active: SidebarItem,
-    pub item_hover: SidebarItem,
+    pub item: Interactive<SidebarItem>,
 }
 
 #[derive(Deserialize, Default)]
 pub struct StatusBarDiagnostics {
-    pub message: ContainedText,
-    pub summary_ok: ContainedText,
-    pub summary_ok_hover: ContainedText,
-    pub summary_warning: ContainedText,
-    pub summary_warning_hover: ContainedText,
-    pub summary_error: ContainedText,
-    pub summary_error_hover: ContainedText,
+    pub message: Interactive<ContainedText>,
+    pub summary_ok: Interactive<ContainedText>,
+    pub summary_warning: Interactive<ContainedText>,
+    pub summary_error: Interactive<ContainedText>,
     pub icon_color_ok: Color,
     pub icon_color_error: Color,
     pub icon_color_warning: Color,
@@ -182,13 +178,10 @@ pub struct StatusBarLspStatus {
     #[serde(flatten)]
     pub container: ContainerStyle,
     pub height: f32,
-    pub container_hover: ContainerStyle,
     pub icon_spacing: f32,
     pub icon_color: Color,
-    pub icon_color_hover: Color,
     pub icon_width: f32,
     pub message: TextStyle,
-    pub message_hover: TextStyle,
 }
 
 #[derive(Deserialize, Default)]
@@ -421,6 +414,78 @@ pub struct FieldEditor {
     pub selection: SelectionStyle,
 }
 
+#[derive(Default, Clone, Copy)]
+pub struct Interactive<T> {
+    pub default: T,
+    pub hover: Option<T>,
+    pub active: Option<T>,
+}
+
+impl<T> Interactive<T> {
+    pub fn active(&self) -> &T {
+        self.active.as_ref().unwrap_or(&self.default)
+    }
+
+    pub fn hover(&self) -> &T {
+        self.hover.as_ref().unwrap_or(&self.default)
+    }
+}
+
+impl<'de, T: DeserializeOwned> Deserialize<'de> for Interactive<T> {
+    fn deserialize<D>(deserializer: D) -> Result<Self, D::Error>
+    where
+        D: serde::Deserializer<'de>,
+    {
+        #[derive(Deserialize)]
+        struct Helper {
+            #[serde(flatten)]
+            default: Value,
+            hover: Option<Value>,
+            active: Option<Value>,
+        }
+
+        let json = Helper::deserialize(deserializer)?;
+
+        let hover = if let Some(mut hovered) = json.hover {
+            if let Value::Object(hovered) = &mut hovered {
+                if let Value::Object(default) = &json.default {
+                    for (key, value) in default {
+                        if !hovered.contains_key(key) {
+                            hovered.insert(key.clone(), value.clone());
+                        }
+                    }
+                }
+            }
+            Some(serde_json::from_value::<T>(hovered).map_err(serde::de::Error::custom)?)
+        } else {
+            None
+        };
+
+        let active = if let Some(mut active) = json.active {
+            if let Value::Object(active) = &mut active {
+                if let Value::Object(default) = &json.default {
+                    for (key, value) in default {
+                        if !active.contains_key(key) {
+                            active.insert(key.clone(), value.clone());
+                        }
+                    }
+                }
+            }
+            Some(serde_json::from_value::<T>(active).map_err(serde::de::Error::custom)?)
+        } else {
+            None
+        };
+
+        let default = serde_json::from_value(json.default).map_err(serde::de::Error::custom)?;
+
+        Ok(Interactive {
+            default,
+            hover,
+            active,
+        })
+    }
+}
+
 impl Editor {
     pub fn replica_selection_style(&self, replica_id: u16) -> &SelectionStyle {
         let style_ix = replica_id as usize % (self.guest_selections.len() + 1);

crates/workspace/src/lsp_status.rs πŸ”—

@@ -175,17 +175,21 @@ impl View for LspStatus {
         }
 
         let mut element = MouseEventHandler::new::<Self, _, _>(0, cx, |state, cx| {
-            let hovered = state.hovered && handler.is_some();
-            let theme = &cx.global::<Settings>().theme;
-            let style = &theme.workspace.status_bar.lsp_status;
+            let theme = &cx
+                .global::<Settings>()
+                .theme
+                .workspace
+                .status_bar
+                .lsp_status;
+            let style = if state.hovered && handler.is_some() {
+                theme.hover.as_ref().unwrap_or(&theme.default)
+            } else {
+                &theme.default
+            };
             Flex::row()
                 .with_children(icon.map(|path| {
                     Svg::new(path)
-                        .with_color(if hovered {
-                            style.icon_color_hover
-                        } else {
-                            style.icon_color
-                        })
+                        .with_color(style.icon_color)
                         .constrained()
                         .with_width(style.icon_width)
                         .contained()
@@ -193,26 +197,11 @@ impl View for LspStatus {
                         .aligned()
                         .named("warning-icon")
                 }))
-                .with_child(
-                    Label::new(
-                        message,
-                        if hovered {
-                            style.message_hover.clone()
-                        } else {
-                            style.message.clone()
-                        },
-                    )
-                    .aligned()
-                    .boxed(),
-                )
+                .with_child(Label::new(message, style.message.clone()).aligned().boxed())
                 .constrained()
                 .with_height(style.height)
                 .contained()
-                .with_style(if hovered {
-                    style.container_hover
-                } else {
-                    style.container
-                })
+                .with_style(style.container)
                 .aligned()
                 .boxed()
         });

crates/workspace/src/sidebar.rs πŸ”—

@@ -183,8 +183,6 @@ impl View for SidebarButtons {
             .sidebar_buttons;
         let sidebar = self.sidebar.read(cx);
         let item_style = theme.item;
-        let hover_item_style = theme.item_hover;
-        let active_item_style = theme.item_active;
         let active_ix = sidebar.active_item_ix;
         let side = sidebar.side;
         let group_style = match side {
@@ -196,11 +194,11 @@ impl View for SidebarButtons {
             .with_children(items.iter().enumerate().map(|(ix, item)| {
                 MouseEventHandler::new::<Self, _, _>(ix, cx, move |state, _| {
                     let style = if Some(ix) == active_ix {
-                        active_item_style
+                        item_style.active()
                     } else if state.hovered {
-                        hover_item_style
+                        item_style.hover()
                     } else {
-                        item_style
+                        &item_style.default
                     };
                     Svg::new(item.icon_path)
                         .with_color(style.icon_color)

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

@@ -52,12 +52,6 @@ export default function workspace(theme: Theme) {
     padding: { left: 6, right: 6 },
     ...text(theme, "sans", "primary", { size: "sm" }),
   };
-  const sidebarButton = {
-    iconColor: iconColor(theme, "secondary"),
-    iconSize: 18,
-    padding: { left: 5, right: 5 },
-    cornerRadius: 5,
-  };
   const shareIcon = {
     cornerRadius: 6,
     margin: { top: 3, bottom: 2 },
@@ -95,22 +89,19 @@ export default function workspace(theme: Theme) {
       },
       border: border(theme, "primary", { top: true, overlay: true }),
       cursorPosition: text(theme, "sans", "muted"),
-      diagnosticMessage: text(theme, "sans", "muted"),
       autoUpdateProgressMessage: text(theme, "sans", "muted"),
       autoUpdateDoneMessage: text(theme, "sans", "muted"),
       lspStatus: {
         iconSpacing: 4,
         iconWidth: 14,
         height: 18,
-        message: text(theme, "sans", "muted"),
-        messageHover: text(theme, "sans", "primary"),
-        iconColor: iconColor(theme, "muted"),
-        iconColorHover: iconColor(theme, "primary"),
         cornerRadius: 6,
         padding: { left: 6, right: 6 },
-        containerHover: {
-          cornerRadius: 6,
-          padding: { left: 6, right: 6 },
+        message: text(theme, "sans", "muted"),
+        iconColor: iconColor(theme, "muted"),
+        hover: {
+          message: text(theme, "sans", "primary"),
+          iconColor: iconColor(theme, "primary"),
           background: backgroundColor(theme, 300, "hovered"),
         }
       },
@@ -118,31 +109,28 @@ export default function workspace(theme: Theme) {
         height: 16,
         summaryOk: {
           ...diagnosticSummary,
-        },
-        summaryOkHover: {
-          ...diagnosticSummary,
+          hover: {}
         },
         summaryWarning: {
           ...diagnosticSummary,
           background: backgroundColor(theme, "warning"),
           border: border(theme, "warning"),
-        },
-        summaryWarningHover: {
-          ...diagnosticSummary,
-          background: backgroundColor(theme, "warning"),
-          border: border(theme, "warning"),
+          hover: {
+            background: backgroundColor(theme, "warning", "hovered"),
+          }
         },
         summaryError: {
           ...diagnosticSummary,
           background: backgroundColor(theme, "error"),
           border: border(theme, "error"),
+          hover: {
+            background: backgroundColor(theme, "error", "hovered"),
+          }
         },
-        summaryErrorHover: {
-          ...diagnosticSummary,
-          background: backgroundColor(theme, "error"),
-          border: border(theme, "error"),
+        message: {
+          ...text(theme, "sans", "muted"),
+          hover: text(theme, "sans", "secondary"),
         },
-        message: text(theme, "sans", "muted"),
         iconColorOk: iconColor(theme, "secondary"),
         iconColorWarning: iconColor(theme, "warning"),
         iconColorError: iconColor(theme, "error"),
@@ -154,18 +142,18 @@ export default function workspace(theme: Theme) {
         groupLeft: {},
         groupRight: {},
         item: {
+          iconSize: 18,
+          padding: { left: 5, right: 5 },
+          cornerRadius: 5,
           iconColor: iconColor(theme, "muted"),
-          ...sidebarButton
-        },
-        itemHover: {
-          ...sidebarButton,
-          iconColor: iconColor(theme, "secondary"),
-          background: backgroundColor(theme, 300, "hovered"),
-        },
-        itemActive: {
-          ...sidebarButton,
-          iconColor: iconColor(theme, "active"),
-          background: backgroundColor(theme, 300, "active"),
+          hover: {
+            iconColor: iconColor(theme, "secondary"),
+            background: backgroundColor(theme, 300, "hovered"),
+          },
+          active: {
+            iconColor: iconColor(theme, "active"),
+            background: backgroundColor(theme, 300, "active"),
+          }
         },
       },
     },