fix(theme): bordered focus styles take precedence over hover (#5893)

* fix(theme): bordered focus styles take precedence over hover

* chore(theme): update component focus styles to fix hover override

* chore: bump @heroui/theme peer deps

---------

Co-authored-by: WK Wong <wingkwong.code@gmail.com>

.changeset/popular-fishes-camp.md

@@ -0,0 +1,8 @@
+---
+"@heroui/button": patch
+"@heroui/select": patch
+"@heroui/input": patch
+"@heroui/theme": patch
+---
+
+Fix bordered focus styles overridden by hover styles (#5585)

packages/components/input/package.json

@@ -36,7 +36,7 @@
   "peerDependencies": {
     "react": ">=18 || >=19.0.0-rc.0",
     "react-dom": ">=18 || >=19.0.0-rc.0",
-    "@heroui/theme": ">=2.4.19",
+    "@heroui/theme": ">=2.4.23",
     "@heroui/system": ">=2.4.18"
   },
   "dependencies": {

packages/components/number-input/package.json

@@ -39,7 +39,7 @@
     "react": ">=18 || >=19.0.0-rc.0",
     "react-dom": ">=18 || >=19.0.0-rc.0",
     "@heroui/system": ">=2.4.18",
-    "@heroui/theme": ">=2.4.19"
+    "@heroui/theme": ">=2.4.23"
   },
   "dependencies": {
     "@heroui/form": "workspace:*",

packages/components/select/package.json

@@ -35,7 +35,7 @@
   },
   "peerDependencies": {
     "@heroui/system": ">=2.4.18",
-    "@heroui/theme": ">=2.4.17",
+    "@heroui/theme": ">=2.4.23",
     "framer-motion": ">=11.5.6 || >=12.0.0-alpha.1",
     "react": ">=18 || >=19.0.0-rc.0",
     "react-dom": ">=18 || >=19.0.0-rc.0"

packages/core/theme/src/components/input.ts

@@ -95,6 +95,7 @@ const input = tv({
           "border-default-200",
           "data-[hover=true]:border-default-400",
           "group-data-[focus=true]:border-default-foreground",
+          "group-data-[focus=true]:data-[hover=true]:border-default-foreground",
         ],
       },
       underlined: {
@@ -449,7 +450,10 @@ const input = tv({
       variant: "bordered",
       color: "primary",
       class: {
-        inputWrapper: "group-data-[focus=true]:border-primary",
+        inputWrapper: [
+          "group-data-[focus=true]:border-primary",
+          "group-data-[focus=true]:data-[hover=true]:border-primary",
+        ],
         label: "text-primary",
       },
     },
@@ -457,7 +461,10 @@ const input = tv({
       variant: "bordered",
       color: "secondary",
       class: {
-        inputWrapper: "group-data-[focus=true]:border-secondary",
+        inputWrapper: [
+          "group-data-[focus=true]:border-secondary",
+          "group-data-[focus=true]:data-[hover=true]:border-secondary",
+        ],
         label: "text-secondary",
       },
     },
@@ -465,7 +472,10 @@ const input = tv({
       variant: "bordered",
       color: "success",
       class: {
-        inputWrapper: "group-data-[focus=true]:border-success",
+        inputWrapper: [
+          "group-data-[focus=true]:border-success",
+          "group-data-[focus=true]:data-[hover=true]:border-success",
+        ],
         label: "text-success",
       },
     },
@@ -473,7 +483,10 @@ const input = tv({
       variant: "bordered",
       color: "warning",
       class: {
-        inputWrapper: "group-data-[focus=true]:border-warning",
+        inputWrapper: [
+          "group-data-[focus=true]:border-warning",
+          "group-data-[focus=true]:data-[hover=true]:border-warning",
+        ],
         label: "text-warning",
       },
     },
@@ -481,7 +494,10 @@ const input = tv({
       variant: "bordered",
       color: "danger",
       class: {
-        inputWrapper: "group-data-[focus=true]:border-danger",
+        inputWrapper: [
+          "group-data-[focus=true]:border-danger",
+          "group-data-[focus=true]:data-[hover=true]:border-danger",
+        ],
         label: "text-danger",
       },
     },

packages/core/theme/src/components/number-input.ts

@@ -114,6 +114,7 @@ const numberInput = tv({
           "border-default-200",
           "data-[hover=true]:border-default-400",
           "group-data-[focus=true]:border-default-foreground",
+          "group-data-[focus=true]:data-[hover=true]:border-default-foreground",
         ],
       },
       underlined: {
@@ -467,7 +468,10 @@ const numberInput = tv({
       variant: "bordered",
       color: "primary",
       class: {
-        inputWrapper: "group-data-[focus=true]:border-primary",
+        inputWrapper: [
+          "group-data-[focus=true]:border-primary",
+          "group-data-[focus=true]:data-[hover=true]:border-primary",
+        ],
         label: "text-primary",
       },
     },
@@ -475,7 +479,10 @@ const numberInput = tv({
       variant: "bordered",
       color: "secondary",
       class: {
-        inputWrapper: "group-data-[focus=true]:border-secondary",
+        inputWrapper: [
+          "group-data-[focus=true]:border-secondary",
+          "group-data-[focus=true]:data-[hover=true]:border-secondary",
+        ],
         label: "text-secondary",
       },
     },
@@ -483,7 +490,10 @@ const numberInput = tv({
       variant: "bordered",
       color: "success",
       class: {
-        inputWrapper: "group-data-[focus=true]:border-success",
+        inputWrapper: [
+          "group-data-[focus=true]:border-success",
+          "group-data-[focus=true]:data-[hover=true]:border-success",
+        ],
         label: "text-success",
       },
     },
@@ -491,7 +501,10 @@ const numberInput = tv({
       variant: "bordered",
       color: "warning",
       class: {
-        inputWrapper: "group-data-[focus=true]:border-warning",
+        inputWrapper: [
+          "group-data-[focus=true]:border-warning",
+          "group-data-[focus=true]:data-[hover=true]:border-warning",
+        ],
         label: "text-warning",
       },
     },
@@ -499,7 +512,10 @@ const numberInput = tv({
       variant: "bordered",
       color: "danger",
       class: {
-        inputWrapper: "group-data-[focus=true]:border-danger",
+        inputWrapper: [
+          "group-data-[focus=true]:border-danger",
+          "group-data-[focus=true]:data-[hover=true]:border-danger",
+        ],
         label: "text-danger",
       },
     },

packages/core/theme/src/components/select.ts

@@ -82,6 +82,7 @@ const select = tv({
           "data-[hover=true]:border-default-400",
           "data-[open=true]:border-default-foreground",
           "data-[focus=true]:border-default-foreground",
+          "data-[focus=true]:data-[hover=true]:border-default-foreground",
         ],
         value: "group-data-[has-value=true]:text-default-foreground",
         clearButton: "mb-4",
@@ -445,7 +446,11 @@ const select = tv({
       variant: "bordered",
       color: "primary",
       class: {
-        trigger: ["data-[open=true]:border-primary", "data-[focus=true]:border-primary"],
+        trigger: [
+          "data-[open=true]:border-primary",
+          "data-[focus=true]:border-primary",
+          "data-[focus=true]:data-[hover=true]:border-primary",
+        ],
         label: "text-primary",
       },
     },
@@ -453,7 +458,11 @@ const select = tv({
       variant: "bordered",
       color: "secondary",
       class: {
-        trigger: ["data-[open=true]:border-secondary", "data-[focus=true]:border-secondary"],
+        trigger: [
+          "data-[open=true]:border-secondary",
+          "data-[focus=true]:border-secondary",
+          "data-[focus=true]:data-[hover=true]:border-secondary",
+        ],
         label: "text-secondary",
       },
     },
@@ -461,7 +470,11 @@ const select = tv({
       variant: "bordered",
       color: "success",
       class: {
-        trigger: ["data-[open=true]:border-success", "data-[focus=true]:border-success"],
+        trigger: [
+          "data-[open=true]:border-success",
+          "data-[focus=true]:border-success",
+          "data-[focus=true]:data-[hover=true]:border-success",
+        ],
         label: "text-success",
       },
     },
@@ -469,7 +482,11 @@ const select = tv({
       variant: "bordered",
       color: "warning",
       class: {
-        trigger: ["data-[open=true]:border-warning", "data-[focus=true]:border-warning"],
+        trigger: [
+          "data-[open=true]:border-warning",
+          "data-[focus=true]:border-warning",
+          "data-[focus=true]:data-[hover=true]:border-warning",
+        ],
         label: "text-warning",
       },
     },
@@ -477,7 +494,11 @@ const select = tv({
       variant: "bordered",
       color: "danger",
       class: {
-        trigger: ["data-[open=true]:border-danger", "data-[focus=true]:border-danger"],
+        trigger: [
+          "data-[open=true]:border-danger",
+          "data-[focus=true]:border-danger",
+          "data-[focus=true]:data-[hover=true]:border-danger",
+        ],
         label: "text-danger",
       },
     },