From bc0f72fc2704c33b3530add1731c82302fd26884 Mon Sep 17 00:00:00 2001
From: black197 <dyeh68306@163.com>
Date: Tue, 10 Sep 2024 20:41:47 +0800
Subject: [PATCH] fix(theme): use data-hover instead of hover (#2110)

---
 .changeset/eleven-eels-fix.md                |  5 ++++
 packages/core/theme/src/components/button.ts | 24 +++++++++++++++-----
 packages/core/theme/src/utils/variants.ts    | 12 +++++-----
 3 files changed, 29 insertions(+), 12 deletions(-)
 create mode 100644 .changeset/eleven-eels-fix.md

diff --git a/.changeset/eleven-eels-fix.md b/.changeset/eleven-eels-fix.md
new file mode 100644
index 0000000000..31b10cf117
--- /dev/null
+++ b/.changeset/eleven-eels-fix.md
@@ -0,0 +1,5 @@
+---
+"@nextui-org/theme": patch
+---
+
+fix(theme): use data-hover instead of hover (#2095)
diff --git a/packages/core/theme/src/components/button.ts b/packages/core/theme/src/components/button.ts
index 6cb3c0eec6..907b9f7031 100644
--- a/packages/core/theme/src/components/button.ts
+++ b/packages/core/theme/src/components/button.ts
@@ -288,32 +288,44 @@ const button = tv({
     {
       variant: "ghost",
       color: "default",
-      class: colorVariants.ghost.default,
+      class: [colorVariants.ghost.default, "data-[hover=true]:!bg-default"],
     },
     {
       variant: "ghost",
       color: "primary",
-      class: colorVariants.ghost.primary,
+      class: [
+        colorVariants.ghost.primary,
+        "data-[hover=true]:!bg-primary data-[hover=true]:!text-primary-foreground",
+      ],
     },
     {
       variant: "ghost",
       color: "secondary",
-      class: colorVariants.ghost.secondary,
+      class: [
+        colorVariants.ghost.secondary,
+        "data-[hover=true]:!bg-secondary data-[hover=true]:!text-secondary-foreground",
+      ],
     },
     {
       variant: "ghost",
       color: "success",
-      class: colorVariants.ghost.success,
+      class: [
+        colorVariants.ghost.success,
+        "data-[hover=true]:!bg-success data-[hover=true]:!text-success-foreground",
+      ],
     },
     {
       variant: "ghost",
       color: "warning",
-      class: colorVariants.ghost.warning,
+      class: [
+        colorVariants.ghost.warning,
+        "data-[hover=true]:!bg-warning data-[hover=true]:!text-warning-foreground",
+      ],
     },
     {
       variant: "ghost",
       color: "danger",
-      class: colorVariants.ghost.danger,
+      class: [colorVariants.ghost.danger, "data-[hover=true]:!bg-danger !text-danger-foreground"],
     },
     // isInGroup / radius / size <-- radius not provided
     {
diff --git a/packages/core/theme/src/utils/variants.ts b/packages/core/theme/src/utils/variants.ts
index ad0dc5d4a6..d05da8761f 100644
--- a/packages/core/theme/src/utils/variants.ts
+++ b/packages/core/theme/src/utils/variants.ts
@@ -59,12 +59,12 @@ const light = {
 };
 
 const ghost = {
-  default: "border-default text-default-foreground hover:!bg-default",
-  primary: "border-primary text-primary hover:!text-primary-foreground hover:!bg-primary",
-  secondary: "border-secondary text-secondary hover:text-secondary-foreground hover:!bg-secondary",
-  success: "border-success text-success hover:!text-success-foreground hover:!bg-success",
-  warning: "border-warning text-warning hover:!text-warning-foreground hover:!bg-warning",
-  danger: "border-danger text-danger hover:!text-danger-foreground hover:!bg-danger",
+  default: "border-default text-default-foreground",
+  primary: "border-primary text-primary",
+  secondary: "border-secondary text-secondary",
+  success: "border-success text-success",
+  warning: "border-warning text-warning",
+  danger: "border-danger text-danger",
   foreground: "border-foreground text-foreground hover:!bg-foreground",
 };