What class is responsible for styling the outline around the days?

[berkerdemirer]

Hey,

I would like to know how can I change the color of the outline around day buttons.

const _dayButtonClassName = cn( typographyVariants({ variant: 'paragraph' }), 'sc-size-10 sc-rounded-full hover:sc-bg-primary-light sc-outline-offset-2 disabled:sc-cursor-not-allowed disabled:hover:sc-bg-transparent', props.dayButtonClassName );

day_button: _dayButtonClassName,

I am able to change the outline offset but no matter what i did I couldn't change the color.

[gpbl]

Do you mean the border when selecting a day in single mode? In Tailwind this can be done with Arbitrary Variants. I believe the syntax is something like like

[&_.rdp-selected_.rdp-day_button]:border-blue-500

[berkerdemirer]

I meant the border that is visible when you are traversing the day buttons using the keyboard when you focused in.

I guess focus-visible pseudo property assigns the color but i can't see what class is responsible exactly

[berkerdemirer]

[&_.rdp-day_button:focus-visible]:sc-border-red-500 i was trying something like this as well but no luck. @gpbl

[berkerdemirer]

Just to be more clear, i am talking about the outline ring around the date, whether it is selected or not. 12th is the today class which has the border and that's fine, the other date is selected and focused. But i can't changed the focused color of that outline

[gpbl]

@berkerdemirer I think you are referring to the focus outline - I think with Tailwind you should be able to style it with focus:outline:

[&_.rdp-day_button:focus]:outline-2