fix(calendar): add missing dark mode hover styles to day buttons

[Hamed-Ajaj]

Fix: Add missing dark mode hover styles to Calendar day buttons in create page

Fixes #9028

Summary

This PR fixes inconsistent hover styling in the Calendar component's day buttons for the calendar-example in the create page across both base-ui and radix-ui implementations. The dark mode hover background color was missing from the radix-ui variant, causing a visual discrepancy between the two implementations.

Reference: https://ui.shadcn.com/create?iconLibrary=tabler&menuColor=inverted&item=calendar-example&base=base&style=lyra

Changes Made

radix-ui Calendar (/registry/bases/radix/ui/calendar.tsx)

• Added missing dark:hover:bg-accent/50 class to CalendarDayButton component in calendar-example
• Ensures consistent hover behavior with base-ui implementation

base-ui Calendar (/registry/bases/base/ui/calendar.tsx)

• Added dark:hover:bg-accent/50 class to CalendarDayButton component in calendar-example for parity
• Maintains visual consistency across all calendar instances

Technical Details

The hover styles were added to the CalendarDayButton function within the className prop of the Button component. The classes are applied in the following order to ensure proper specificity:

group-data-[focused=true]/day:ring-ring/50 dark:hover:bg-accent/50 dark:hover:text-foreground

This placement ensures that:

1. The hover state works correctly in dark mode
2. The background opacity (50%) provides subtle visual feedback
3. The text color updates appropriately on hover
4. The styles don't conflict with selected, range, or focused states

Testing

• Verified hover behavior in both light and dark modes on the create page calendar-example
• Tested across base-ui and radix-ui implementations
• Confirmed no regression with existing calendar states (selected, range, focused, disabled)
• Validated that the styles work correctly with all calendar layouts (single date, range selection)

Visual Impact

Before: Day buttons had no background color change on hover in dark mode for radix-ui calendar-example

After: Day buttons now show a subtle accent background (50% opacity) on hover in dark mode across all implementations

This change improves the user experience by providing consistent visual feedback when hovering over calendar dates in dark mode on the create page.

[vercel[bot]]

@Hamed-Ajaj is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.

[Hamed-Ajaj]

hey @shadcn

can you review it plz