:art: Use Interactive wrapper for search option buttons

Max Brunsfeld created 3 years ago

Change summary

assets/themes/cave-dark.json         | 87 +++++++----------------------
assets/themes/cave-light.json        | 87 +++++++----------------------
assets/themes/dark.json              | 87 +++++++----------------------
assets/themes/light.json             | 87 +++++++----------------------
assets/themes/solarized-dark.json    | 87 +++++++----------------------
assets/themes/solarized-light.json   | 87 +++++++----------------------
assets/themes/sulphurpool-dark.json  | 87 +++++++----------------------
assets/themes/sulphurpool-light.json | 87 +++++++----------------------
crates/search/src/buffer_search.rs   | 25 ++++----
crates/search/src/project_search.rs  | 25 ++++----
crates/theme/src/theme.rs            |  5 -
styles/src/styleTree/search.ts       | 59 ++++++++-----------
12 files changed, 226 insertions(+), 584 deletions(-)

Detailed changes

assets/themes/cave-dark.json

@@ -1304,14 +1304,14 @@
     "match_background": "#955ae780",
     "tab_icon_spacing": 8,
     "tab_icon_width": 14,
-    "active_hovered_option_button": {
+    "option_button": {
       "family": "Zed Mono",
-      "color": "#efecf4",
+      "color": "#8b8792",
       "size": 14,
-      "background": "#655f6d",
+      "background": "#26232a",
       "corner_radius": 4,
       "border": {
-        "color": "#655f6d",
+        "color": "#26232a",
         "width": 1
       },
       "margin": {
@@ -1323,27 +1323,26 @@
         "left": 8,
         "right": 8,
         "top": 3
-      }
-    },
-    "active_option_button": {
-      "family": "Zed Mono",
-      "color": "#efecf4",
-      "size": 14,
-      "background": "#655f6d",
-      "corner_radius": 4,
-      "border": {
-        "color": "#655f6d",
-        "width": 1
       },
-      "margin": {
-        "left": 2,
-        "right": 2
+      "active": {
+        "family": "Zed Mono",
+        "color": "#efecf4",
+        "size": 14,
+        "background": "#655f6d",
+        "border": {
+          "color": "#655f6d",
+          "width": 1
+        }
       },
-      "padding": {
-        "bottom": 3,
-        "left": 8,
-        "right": 8,
-        "top": 3
+      "hover": {
+        "family": "Zed Mono",
+        "color": "#efecf4",
+        "size": 14,
+        "background": "#655f6d",
+        "border": {
+          "color": "#655f6d",
+          "width": 1
+        }
       }
     },
     "editor": {
@@ -1379,27 +1378,6 @@
         "right": 8
       }
     },
-    "hovered_option_button": {
-      "family": "Zed Mono",
-      "color": "#efecf4",
-      "size": 14,
-      "background": "#26232a",
-      "corner_radius": 4,
-      "border": {
-        "color": "#655f6d",
-        "width": 1
-      },
-      "margin": {
-        "left": 2,
-        "right": 2
-      },
-      "padding": {
-        "bottom": 3,
-        "left": 8,
-        "right": 8,
-        "top": 3
-      }
-    },
     "invalid_editor": {
       "background": "#19171c",
       "corner_radius": 8,
@@ -1439,27 +1417,6 @@
       "size": 14,
       "padding": 6
     },
-    "option_button": {
-      "family": "Zed Mono",
-      "color": "#8b8792",
-      "size": 14,
-      "background": "#26232a",
-      "corner_radius": 4,
-      "border": {
-        "color": "#26232a",
-        "width": 1
-      },
-      "margin": {
-        "left": 2,
-        "right": 2
-      },
-      "padding": {
-        "bottom": 3,
-        "left": 8,
-        "right": 8,
-        "top": 3
-      }
-    },
     "option_button_group": {
       "padding": {
         "left": 4,

assets/themes/cave-light.json

@@ -1304,14 +1304,14 @@
     "match_background": "#955ae780",
     "tab_icon_spacing": 8,
     "tab_icon_width": 14,
-    "active_hovered_option_button": {
+    "option_button": {
       "family": "Zed Mono",
-      "color": "#19171c",
+      "color": "#585260",
       "size": 14,
-      "background": "#7e7887",
+      "background": "#e2dfe7",
       "corner_radius": 4,
       "border": {
-        "color": "#7e7887",
+        "color": "#e2dfe7",
         "width": 1
       },
       "margin": {
@@ -1323,27 +1323,26 @@
         "left": 8,
         "right": 8,
         "top": 3
-      }
-    },
-    "active_option_button": {
-      "family": "Zed Mono",
-      "color": "#19171c",
-      "size": 14,
-      "background": "#7e7887",
-      "corner_radius": 4,
-      "border": {
-        "color": "#7e7887",
-        "width": 1
       },
-      "margin": {
-        "left": 2,
-        "right": 2
+      "active": {
+        "family": "Zed Mono",
+        "color": "#19171c",
+        "size": 14,
+        "background": "#7e7887",
+        "border": {
+          "color": "#7e7887",
+          "width": 1
+        }
       },
-      "padding": {
-        "bottom": 3,
-        "left": 8,
-        "right": 8,
-        "top": 3
+      "hover": {
+        "family": "Zed Mono",
+        "color": "#19171c",
+        "size": 14,
+        "background": "#7e7887",
+        "border": {
+          "color": "#7e7887",
+          "width": 1
+        }
       }
     },
     "editor": {
@@ -1379,27 +1378,6 @@
         "right": 8
       }
     },
-    "hovered_option_button": {
-      "family": "Zed Mono",
-      "color": "#19171c",
-      "size": 14,
-      "background": "#e2dfe7",
-      "corner_radius": 4,
-      "border": {
-        "color": "#7e7887",
-        "width": 1
-      },
-      "margin": {
-        "left": 2,
-        "right": 2
-      },
-      "padding": {
-        "bottom": 3,
-        "left": 8,
-        "right": 8,
-        "top": 3
-      }
-    },
     "invalid_editor": {
       "background": "#efecf4",
       "corner_radius": 8,
@@ -1439,27 +1417,6 @@
       "size": 14,
       "padding": 6
     },
-    "option_button": {
-      "family": "Zed Mono",
-      "color": "#585260",
-      "size": 14,
-      "background": "#e2dfe7",
-      "corner_radius": 4,
-      "border": {
-        "color": "#e2dfe7",
-        "width": 1
-      },
-      "margin": {
-        "left": 2,
-        "right": 2
-      },
-      "padding": {
-        "bottom": 3,
-        "left": 8,
-        "right": 8,
-        "top": 3
-      }
-    },
     "option_button_group": {
       "padding": {
         "left": 4,

assets/themes/dark.json

@@ -1304,14 +1304,14 @@
     "match_background": "#3f15a380",
     "tab_icon_spacing": 8,
     "tab_icon_width": 14,
-    "active_hovered_option_button": {
+    "option_button": {
       "family": "Zed Mono",
-      "color": "#ffffff",
+      "color": "#9c9c9c",
       "size": 14,
-      "background": "#232323",
+      "background": "#0e0e0e",
       "corner_radius": 4,
       "border": {
-        "color": "#404040",
+        "color": "#232323",
         "width": 1
       },
       "margin": {
@@ -1323,27 +1323,26 @@
         "left": 8,
         "right": 8,
         "top": 3
-      }
-    },
-    "active_option_button": {
-      "family": "Zed Mono",
-      "color": "#ffffff",
-      "size": 14,
-      "background": "#232323",
-      "corner_radius": 4,
-      "border": {
-        "color": "#404040",
-        "width": 1
       },
-      "margin": {
-        "left": 2,
-        "right": 2
+      "active": {
+        "family": "Zed Mono",
+        "color": "#ffffff",
+        "size": 14,
+        "background": "#232323",
+        "border": {
+          "color": "#404040",
+          "width": 1
+        }
       },
-      "padding": {
-        "bottom": 3,
-        "left": 8,
-        "right": 8,
-        "top": 3
+      "hover": {
+        "family": "Zed Mono",
+        "color": "#ffffff",
+        "size": 14,
+        "background": "#1c1c1c",
+        "border": {
+          "color": "#404040",
+          "width": 1
+        }
       }
     },
     "editor": {
@@ -1379,27 +1378,6 @@
         "right": 8
       }
     },
-    "hovered_option_button": {
-      "family": "Zed Mono",
-      "color": "#ffffff",
-      "size": 14,
-      "background": "#0e0e0e",
-      "corner_radius": 4,
-      "border": {
-        "color": "#404040",
-        "width": 1
-      },
-      "margin": {
-        "left": 2,
-        "right": 2
-      },
-      "padding": {
-        "bottom": 3,
-        "left": 8,
-        "right": 8,
-        "top": 3
-      }
-    },
     "invalid_editor": {
       "background": "#000000",
       "corner_radius": 8,
@@ -1439,27 +1417,6 @@
       "size": 14,
       "padding": 6
     },
-    "option_button": {
-      "family": "Zed Mono",
-      "color": "#9c9c9c",
-      "size": 14,
-      "background": "#0e0e0e",
-      "corner_radius": 4,
-      "border": {
-        "color": "#232323",
-        "width": 1
-      },
-      "margin": {
-        "left": 2,
-        "right": 2
-      },
-      "padding": {
-        "bottom": 3,
-        "left": 8,
-        "right": 8,
-        "top": 3
-      }
-    },
     "option_button_group": {
       "padding": {
         "left": 4,

assets/themes/light.json

@@ -1304,14 +1304,14 @@
     "match_background": "#fce9b7",
     "tab_icon_spacing": 8,
     "tab_icon_width": 14,
-    "active_hovered_option_button": {
+    "option_button": {
       "family": "Zed Mono",
-      "color": "#000000",
+      "color": "#474747",
       "size": 14,
-      "background": "#ffffff",
+      "background": "#f1f1f1",
       "corner_radius": 4,
       "border": {
-        "color": "#e3e3e3",
+        "color": "#d5d5d5",
         "width": 1
       },
       "margin": {
@@ -1323,27 +1323,26 @@
         "left": 8,
         "right": 8,
         "top": 3
-      }
-    },
-    "active_option_button": {
-      "family": "Zed Mono",
-      "color": "#000000",
-      "size": 14,
-      "background": "#ffffff",
-      "corner_radius": 4,
-      "border": {
-        "color": "#e3e3e3",
-        "width": 1
       },
-      "margin": {
-        "left": 2,
-        "right": 2
+      "active": {
+        "family": "Zed Mono",
+        "color": "#000000",
+        "size": 14,
+        "background": "#ffffff",
+        "border": {
+          "color": "#e3e3e3",
+          "width": 1
+        }
       },
-      "padding": {
-        "bottom": 3,
-        "left": 8,
-        "right": 8,
-        "top": 3
+      "hover": {
+        "family": "Zed Mono",
+        "color": "#000000",
+        "size": 14,
+        "background": "#f8f8f8",
+        "border": {
+          "color": "#e3e3e3",
+          "width": 1
+        }
       }
     },
     "editor": {
@@ -1379,27 +1378,6 @@
         "right": 8
       }
     },
-    "hovered_option_button": {
-      "family": "Zed Mono",
-      "color": "#000000",
-      "size": 14,
-      "background": "#f1f1f1",
-      "corner_radius": 4,
-      "border": {
-        "color": "#e3e3e3",
-        "width": 1
-      },
-      "margin": {
-        "left": 2,
-        "right": 2
-      },
-      "padding": {
-        "bottom": 3,
-        "left": 8,
-        "right": 8,
-        "top": 3
-      }
-    },
     "invalid_editor": {
       "background": "#ffffff",
       "corner_radius": 8,
@@ -1439,27 +1417,6 @@
       "size": 14,
       "padding": 6
     },
-    "option_button": {
-      "family": "Zed Mono",
-      "color": "#474747",
-      "size": 14,
-      "background": "#f1f1f1",
-      "corner_radius": 4,
-      "border": {
-        "color": "#d5d5d5",
-        "width": 1
-      },
-      "margin": {
-        "left": 2,
-        "right": 2
-      },
-      "padding": {
-        "bottom": 3,
-        "left": 8,
-        "right": 8,
-        "top": 3
-      }
-    },
     "option_button_group": {
       "padding": {
         "left": 4,

assets/themes/solarized-dark.json

@@ -1304,14 +1304,14 @@
     "match_background": "#6c71c480",
     "tab_icon_spacing": 8,
     "tab_icon_width": 14,
-    "active_hovered_option_button": {
+    "option_button": {
       "family": "Zed Mono",
-      "color": "#fdf6e3",
+      "color": "#93a1a1",
       "size": 14,
-      "background": "#657b83",
+      "background": "#073642",
       "corner_radius": 4,
       "border": {
-        "color": "#657b83",
+        "color": "#073642",
         "width": 1
       },
       "margin": {
@@ -1323,27 +1323,26 @@
         "left": 8,
         "right": 8,
         "top": 3
-      }
-    },
-    "active_option_button": {
-      "family": "Zed Mono",
-      "color": "#fdf6e3",
-      "size": 14,
-      "background": "#657b83",
-      "corner_radius": 4,
-      "border": {
-        "color": "#657b83",
-        "width": 1
       },
-      "margin": {
-        "left": 2,
-        "right": 2
+      "active": {
+        "family": "Zed Mono",
+        "color": "#fdf6e3",
+        "size": 14,
+        "background": "#657b83",
+        "border": {
+          "color": "#657b83",
+          "width": 1
+        }
       },
-      "padding": {
-        "bottom": 3,
-        "left": 8,
-        "right": 8,
-        "top": 3
+      "hover": {
+        "family": "Zed Mono",
+        "color": "#fdf6e3",
+        "size": 14,
+        "background": "#657b83",
+        "border": {
+          "color": "#657b83",
+          "width": 1
+        }
       }
     },
     "editor": {
@@ -1379,27 +1378,6 @@
         "right": 8
       }
     },
-    "hovered_option_button": {
-      "family": "Zed Mono",
-      "color": "#fdf6e3",
-      "size": 14,
-      "background": "#073642",
-      "corner_radius": 4,
-      "border": {
-        "color": "#657b83",
-        "width": 1
-      },
-      "margin": {
-        "left": 2,
-        "right": 2
-      },
-      "padding": {
-        "bottom": 3,
-        "left": 8,
-        "right": 8,
-        "top": 3
-      }
-    },
     "invalid_editor": {
       "background": "#002b36",
       "corner_radius": 8,
@@ -1439,27 +1417,6 @@
       "size": 14,
       "padding": 6
     },
-    "option_button": {
-      "family": "Zed Mono",
-      "color": "#93a1a1",
-      "size": 14,
-      "background": "#073642",
-      "corner_radius": 4,
-      "border": {
-        "color": "#073642",
-        "width": 1
-      },
-      "margin": {
-        "left": 2,
-        "right": 2
-      },
-      "padding": {
-        "bottom": 3,
-        "left": 8,
-        "right": 8,
-        "top": 3
-      }
-    },
     "option_button_group": {
       "padding": {
         "left": 4,

assets/themes/solarized-light.json

@@ -1304,14 +1304,14 @@
     "match_background": "#6c71c480",
     "tab_icon_spacing": 8,
     "tab_icon_width": 14,
-    "active_hovered_option_button": {
+    "option_button": {
       "family": "Zed Mono",
-      "color": "#002b36",
+      "color": "#586e75",
       "size": 14,
-      "background": "#839496",
+      "background": "#eee8d5",
       "corner_radius": 4,
       "border": {
-        "color": "#839496",
+        "color": "#eee8d5",
         "width": 1
       },
       "margin": {
@@ -1323,27 +1323,26 @@
         "left": 8,
         "right": 8,
         "top": 3
-      }
-    },
-    "active_option_button": {
-      "family": "Zed Mono",
-      "color": "#002b36",
-      "size": 14,
-      "background": "#839496",
-      "corner_radius": 4,
-      "border": {
-        "color": "#839496",
-        "width": 1
       },
-      "margin": {
-        "left": 2,
-        "right": 2
+      "active": {
+        "family": "Zed Mono",
+        "color": "#002b36",
+        "size": 14,
+        "background": "#839496",
+        "border": {
+          "color": "#839496",
+          "width": 1
+        }
       },
-      "padding": {
-        "bottom": 3,
-        "left": 8,
-        "right": 8,
-        "top": 3
+      "hover": {
+        "family": "Zed Mono",
+        "color": "#002b36",
+        "size": 14,
+        "background": "#839496",
+        "border": {
+          "color": "#839496",
+          "width": 1
+        }
       }
     },
     "editor": {
@@ -1379,27 +1378,6 @@
         "right": 8
       }
     },
-    "hovered_option_button": {
-      "family": "Zed Mono",
-      "color": "#002b36",
-      "size": 14,
-      "background": "#eee8d5",
-      "corner_radius": 4,
-      "border": {
-        "color": "#839496",
-        "width": 1
-      },
-      "margin": {
-        "left": 2,
-        "right": 2
-      },
-      "padding": {
-        "bottom": 3,
-        "left": 8,
-        "right": 8,
-        "top": 3
-      }
-    },
     "invalid_editor": {
       "background": "#fdf6e3",
       "corner_radius": 8,
@@ -1439,27 +1417,6 @@
       "size": 14,
       "padding": 6
     },
-    "option_button": {
-      "family": "Zed Mono",
-      "color": "#586e75",
-      "size": 14,
-      "background": "#eee8d5",
-      "corner_radius": 4,
-      "border": {
-        "color": "#eee8d5",
-        "width": 1
-      },
-      "margin": {
-        "left": 2,
-        "right": 2
-      },
-      "padding": {
-        "bottom": 3,
-        "left": 8,
-        "right": 8,
-        "top": 3
-      }
-    },
     "option_button_group": {
       "padding": {
         "left": 4,

assets/themes/sulphurpool-dark.json

@@ -1304,14 +1304,14 @@
     "match_background": "#6679cc80",
     "tab_icon_spacing": 8,
     "tab_icon_width": 14,
-    "active_hovered_option_button": {
+    "option_button": {
       "family": "Zed Mono",
-      "color": "#f5f7ff",
+      "color": "#979db4",
       "size": 14,
-      "background": "#6b7394",
+      "background": "#293256",
       "corner_radius": 4,
       "border": {
-        "color": "#6b7394",
+        "color": "#293256",
         "width": 1
       },
       "margin": {
@@ -1323,27 +1323,26 @@
         "left": 8,
         "right": 8,
         "top": 3
-      }
-    },
-    "active_option_button": {
-      "family": "Zed Mono",
-      "color": "#f5f7ff",
-      "size": 14,
-      "background": "#6b7394",
-      "corner_radius": 4,
-      "border": {
-        "color": "#6b7394",
-        "width": 1
       },
-      "margin": {
-        "left": 2,
-        "right": 2
+      "active": {
+        "family": "Zed Mono",
+        "color": "#f5f7ff",
+        "size": 14,
+        "background": "#6b7394",
+        "border": {
+          "color": "#6b7394",
+          "width": 1
+        }
       },
-      "padding": {
-        "bottom": 3,
-        "left": 8,
-        "right": 8,
-        "top": 3
+      "hover": {
+        "family": "Zed Mono",
+        "color": "#f5f7ff",
+        "size": 14,
+        "background": "#6b7394",
+        "border": {
+          "color": "#6b7394",
+          "width": 1
+        }
       }
     },
     "editor": {
@@ -1379,27 +1378,6 @@
         "right": 8
       }
     },
-    "hovered_option_button": {
-      "family": "Zed Mono",
-      "color": "#f5f7ff",
-      "size": 14,
-      "background": "#293256",
-      "corner_radius": 4,
-      "border": {
-        "color": "#6b7394",
-        "width": 1
-      },
-      "margin": {
-        "left": 2,
-        "right": 2
-      },
-      "padding": {
-        "bottom": 3,
-        "left": 8,
-        "right": 8,
-        "top": 3
-      }
-    },
     "invalid_editor": {
       "background": "#202746",
       "corner_radius": 8,
@@ -1439,27 +1417,6 @@
       "size": 14,
       "padding": 6
     },
-    "option_button": {
-      "family": "Zed Mono",
-      "color": "#979db4",
-      "size": 14,
-      "background": "#293256",
-      "corner_radius": 4,
-      "border": {
-        "color": "#293256",
-        "width": 1
-      },
-      "margin": {
-        "left": 2,
-        "right": 2
-      },
-      "padding": {
-        "bottom": 3,
-        "left": 8,
-        "right": 8,
-        "top": 3
-      }
-    },
     "option_button_group": {
       "padding": {
         "left": 4,

assets/themes/sulphurpool-light.json

@@ -1304,14 +1304,14 @@
     "match_background": "#6679cc80",
     "tab_icon_spacing": 8,
     "tab_icon_width": 14,
-    "active_hovered_option_button": {
+    "option_button": {
       "family": "Zed Mono",
-      "color": "#202746",
+      "color": "#5e6687",
       "size": 14,
-      "background": "#898ea4",
+      "background": "#dfe2f1",
       "corner_radius": 4,
       "border": {
-        "color": "#898ea4",
+        "color": "#dfe2f1",
         "width": 1
       },
       "margin": {
@@ -1323,27 +1323,26 @@
         "left": 8,
         "right": 8,
         "top": 3
-      }
-    },
-    "active_option_button": {
-      "family": "Zed Mono",
-      "color": "#202746",
-      "size": 14,
-      "background": "#898ea4",
-      "corner_radius": 4,
-      "border": {
-        "color": "#898ea4",
-        "width": 1
       },
-      "margin": {
-        "left": 2,
-        "right": 2
+      "active": {
+        "family": "Zed Mono",
+        "color": "#202746",
+        "size": 14,
+        "background": "#898ea4",
+        "border": {
+          "color": "#898ea4",
+          "width": 1
+        }
       },
-      "padding": {
-        "bottom": 3,
-        "left": 8,
-        "right": 8,
-        "top": 3
+      "hover": {
+        "family": "Zed Mono",
+        "color": "#202746",
+        "size": 14,
+        "background": "#898ea4",
+        "border": {
+          "color": "#898ea4",
+          "width": 1
+        }
       }
     },
     "editor": {
@@ -1379,27 +1378,6 @@
         "right": 8
       }
     },
-    "hovered_option_button": {
-      "family": "Zed Mono",
-      "color": "#202746",
-      "size": 14,
-      "background": "#dfe2f1",
-      "corner_radius": 4,
-      "border": {
-        "color": "#898ea4",
-        "width": 1
-      },
-      "margin": {
-        "left": 2,
-        "right": 2
-      },
-      "padding": {
-        "bottom": 3,
-        "left": 8,
-        "right": 8,
-        "top": 3
-      }
-    },
     "invalid_editor": {
       "background": "#f5f7ff",
       "corner_radius": 8,
@@ -1439,27 +1417,6 @@
       "size": 14,
       "padding": 6
     },
-    "option_button": {
-      "family": "Zed Mono",
-      "color": "#5e6687",
-      "size": 14,
-      "background": "#dfe2f1",
-      "corner_radius": 4,
-      "border": {
-        "color": "#dfe2f1",
-        "width": 1
-      },
-      "margin": {
-        "left": 2,
-        "right": 2
-      },
-      "padding": {
-        "bottom": 3,
-        "left": 8,
-        "right": 8,
-        "top": 3
-      }
-    },
     "option_button_group": {
       "padding": {
         "left": 4,

crates/search/src/buffer_search.rs

@@ -281,13 +281,12 @@ impl BufferSearchBar {
     ) -> ElementBox {
         let is_active = self.is_search_option_enabled(search_option);
         MouseEventHandler::new::<Self, _, _>(search_option as usize, cx, |state, cx| {
-            let theme = &cx.global::<Settings>().theme.search;
-            let style = match (is_active, state.hovered) {
-                (false, false) => &theme.option_button,
-                (false, true) => &theme.hovered_option_button,
-                (true, false) => &theme.active_option_button,
-                (true, true) => &theme.active_hovered_option_button,
-            };
+            let style = &cx
+                .global::<Settings>()
+                .theme
+                .search
+                .option_button
+                .style_for(state, is_active);
             Label::new(icon.to_string(), style.text.clone())
                 .contained()
                 .with_style(style.container)
@@ -306,12 +305,12 @@ impl BufferSearchBar {
     ) -> ElementBox {
         enum NavButton {}
         MouseEventHandler::new::<NavButton, _, _>(direction as usize, cx, |state, cx| {
-            let theme = &cx.global::<Settings>().theme.search;
-            let style = if state.hovered {
-                &theme.hovered_option_button
-            } else {
-                &theme.option_button
-            };
+            let style = &cx
+                .global::<Settings>()
+                .theme
+                .search
+                .option_button
+                .style_for(state, false);
             Label::new(icon.to_string(), style.text.clone())
                 .contained()
                 .with_style(style.container)

crates/search/src/project_search.rs

@@ -655,12 +655,12 @@ impl ProjectSearchBar {
     ) -> ElementBox {
         enum NavButton {}
         MouseEventHandler::new::<NavButton, _, _>(direction as usize, cx, |state, cx| {
-            let theme = &cx.global::<Settings>().theme.search;
-            let style = if state.hovered {
-                &theme.hovered_option_button
-            } else {
-                &theme.option_button
-            };
+            let style = &cx
+                .global::<Settings>()
+                .theme
+                .search
+                .option_button
+                .style_for(state, false);
             Label::new(icon.to_string(), style.text.clone())
                 .contained()
                 .with_style(style.container)
@@ -682,13 +682,12 @@ impl ProjectSearchBar {
     ) -> ElementBox {
         let is_active = self.is_option_enabled(option, cx);
         MouseEventHandler::new::<ProjectSearchBar, _, _>(option as usize, cx, |state, cx| {
-            let theme = &cx.global::<Settings>().theme.search;
-            let style = match (is_active, state.hovered) {
-                (false, false) => &theme.option_button,
-                (false, true) => &theme.hovered_option_button,
-                (true, false) => &theme.active_option_button,
-                (true, true) => &theme.active_hovered_option_button,
-            };
+            let style = &cx
+                .global::<Settings>()
+                .theme
+                .search
+                .option_button
+                .style_for(state, is_active);
             Label::new(icon.to_string(), style.text.clone())
                 .contained()
                 .with_style(style.container)

crates/theme/src/theme.rs

@@ -114,10 +114,7 @@ pub struct Search {
     pub editor: FindEditor,
     pub invalid_editor: ContainerStyle,
     pub option_button_group: ContainerStyle,
-    pub option_button: ContainedText,
-    pub active_option_button: ContainedText,
-    pub hovered_option_button: ContainedText,
-    pub active_hovered_option_button: ContainedText,
+    pub option_button: Interactive<ContainedText>,
     pub match_background: Color,
     pub match_index: ContainedText,
     pub results_status: TextStyle,

styles/src/styleTree/search.ts

@@ -2,23 +2,6 @@ import Theme from "../themes/theme";
 import { backgroundColor, border, player, text } from "./components";
 
 export default function search(theme: Theme) {
-  const optionButton = {
-    ...text(theme, "mono", "secondary"),
-    background: backgroundColor(theme, "on500"),
-    cornerRadius: 4,
-    border: border(theme, "secondary"),
-    margin: {
-      left: 2,
-      right: 2,
-    },
-    padding: {
-      bottom: 3,
-      left: 8,
-      right: 8,
-      top: 3,
-    },
-  };
-
   const editor = {
     background: backgroundColor(theme, 500),
     cornerRadius: 8,
@@ -43,24 +26,33 @@ export default function search(theme: Theme) {
     matchBackground: theme.editor.highlight.match.value,
     tabIconSpacing: 8,
     tabIconWidth: 14,
-    activeHoveredOptionButton: {
-      ...optionButton,
-      ...text(theme, "mono", "active"),
-      background: backgroundColor(theme, "on500", "active"),
-      border: border(theme, "muted"),
-    },
-    activeOptionButton: {
-      ...optionButton,
-      ...text(theme, "mono", "active"),
-      background: backgroundColor(theme, "on500", "active"),
-      border: border(theme, "muted"),
+    optionButton: {
+      ...text(theme, "mono", "secondary"),
+      background: backgroundColor(theme, "on500"),
+      cornerRadius: 4,
+      border: border(theme, "secondary"),
+      margin: {
+        left: 2,
+        right: 2,
+      },
+      padding: {
+        bottom: 3,
+        left: 8,
+        right: 8,
+        top: 3,
+      },
+      active: {
+        ...text(theme, "mono", "active"),
+        background: backgroundColor(theme, "on500", "active"),
+        border: border(theme, "muted"),
+      },
+      hover: {
+        ...text(theme, "mono", "active"),
+        background: backgroundColor(theme, "on500", "hovered"),
+        border: border(theme, "muted"),
+      }
     },
     editor,
-    hoveredOptionButton: {
-      ...optionButton,
-      ...text(theme, "mono", "active"),
-      border: border(theme, "muted"),
-    },
     invalidEditor: {
       ...editor,
       border: border(theme, "error"),
@@ -69,7 +61,6 @@ export default function search(theme: Theme) {
       ...text(theme, "mono", "muted"),
       padding: 6,
     },
-    optionButton,
     optionButtonGroup: {
       padding: {
         left: 4,