fix: ghost button hover bg color

Author: nayounsang

.changeset/busy-turkeys-follow.md

@@ -0,0 +1,5 @@
+---
+"@msw-dev-tool/react": patch
+---
+
+Fixed a bug where nothing happens when hovering a button

packages/react/src/style/msw-dev-tool.css

@@ -10,7 +10,7 @@
 @source inline("bg-{white,gray-{100,200},orange-{500,600},teal-{500,600},red-{500,600}}");
 
 /* ===== Hover Background Colors ===== */
-@source inline("{hover:}bg-{gray-{50,100},orange-500,teal-500,red-500}");
+@source inline("{hover:}bg-{gray-{50,100},orange-500,teal-500,red-500} hover:bg-opacity-10");
 
 /* ===== Borders ===== */
 @source inline("border border-none border-gray-300");

packages/react/src/ui/Components/Button.tsx

@@ -74,11 +74,11 @@ const getVariantClasses = (
         color.bg.replace("bg-", "border-"),
         color.bg.replace("bg-", "text-"),
       ],
-      hover: ["hover:bg-opacity-10", color.bg],
+      hover: ["hover:bg-gray-50", color.bg],
     }),
     ghost: (color) => ({
       base: ["bg-transparent", color.bg.replace("bg-", "text-"), "border-none"],
-      hover: ["hover:bg-opacity-10", color.bg],
+      hover: ["hover:bg-gray-50", color.bg],
     }),
     link: (color) => ({
       base: [

packages/react/src/ui/DevToolContent/ToolButtonGroup/HandlerForm.tsx

@@ -79,6 +79,7 @@ export const HandlerForm = ({ onClose }: HandlerFormProps) => {
           error={errors.delay?.message}
           placeholder="delay time (ms)"
           type="number"
+          min={0}
           onWheel={(e) => e.currentTarget.blur()}
         />
         <SelectFormField