fix(theme): use data-hover instead of hover (#2110)

nextui-org · Sep 10, 2024 · bc0f72f · bc0f72f
1 parent 06b97d0
commit bc0f72f
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 12 deletions.
diff --git a/.changeset/eleven-eels-fix.md 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
@@ -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
@@ -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",
 };