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", };