[bug]: Selected calendar date has wrong hover styling in dark mode

[matt-aaron]

Describe the bug

The dark hover styling of the ghost button variant is taking precedence

Affected component/components

Calendar

How to reproduce

1. Go to https://v4.shadcn.com/#calendar
2. Enable dark mode
3. Hover over the selected date in the calendar

System Info

React: 19.0.0
Browser: Firefox 136.0.1
Tailwind: 4.0.12

Before submitting

• [x] I've made research efforts and searched the documentation
• [x] I've searched for existing issues

[jbmags-codes]

Hi, I'm also using React 19 and v4 of Tailwind. The Calendar looks like this:

Also, while it can set a state, there's no changes in the UI when selecting a date.

[jsdev-robin]

"use client";

import * as React from "react";
import { DayPicker } from "react-day-picker";
import classNames from "react-day-picker/style.module.css";

console.log(classNames);

import { cn } from "@/lib/utils";

export type CalendarProps = React.ComponentProps<typeof DayPicker>;

function Calendar({
  className,
  classNames,
  showOutsideDays = true,
  ...props
}: CalendarProps) {
  return (
    <DayPicker
      showOutsideDays={showOutsideDays}
      className={cn("p-3", className)}
      classNames={{
        months: "flex flex-col sm:flex-row gap-2 relative",
        month: "flex flex-col gap-4",
        weekday: "font-normal text-sm text-muted-foreground",
        caption_label:
          "text-sm font-medium flex justify-center pt-1 relative items-center w-full",
        button_previous:
          "absolute top-2 left-2 [&_svg]:size-4 border-1 border-border size-7 inline-flex items-center justify-center rounded-md text-sm hover:bg-accent hover:text-accent-foreground",
        button_next:
          "absolute top-2 right-2 [&_svg]:size-4 border-1 border-border size-7 inline-flex items-center justify-center rounded-md text-sm hover:bg-accent hover:text-accent-foreground",
        chevron: "stroke-1 fill-foreground",
        day_button:
          "rounded-md text-sm font-medium disabled:opacity-50 size-8 font-normal aria-selected:opacity-100",
        disabled: "text-muted-foreground opacity-50",
        today: "bg-accent text-accent-foreground rounded-md",
        selected:
          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
        range_end: "bg-primary rounded-md",
        range_middle:
          "aria-selected:bg-accent aria-selected:text-accent-foreground",
        range_start: "bg-primary rounded-md",
        ...classNames,
      }}
      {...props}
    />
  );
}
Calendar.displayName = "Calendar";

export { Calendar };

The previous shadcn/ui component for the date picker does not support older versions of react-day-picker. To resolve this, use this custom Calendar component instead. It ensures proper styling and functionality while maintaining compatibility. Let me know if any modifications are needed! 🚀

[tassin-gauthier]

I found a hacky fix :

In CalendarCellTrigger component replace

data-[selected]:hover:bg-primary

by

data-[selected]:hover:!bg-primary