Add CSS transitions / Allow customizing CSS transitions via theme variables

[snelsi]

All of the interactive components are missing any hover/focus CSS transition styles. I wonder, is that intentional?

I didn't find any mention of this in the styles tokens nor in the docs.

I want to add a simple background/color/border-color CSS transition to all interactive elements such as buttons, inputs, tabs, etc. What is the recommended approach for customizing this behavior?

As a side note, why some of the interactive components are missing hover/active styles?
For example Checkbox / Radio Group / Switch / Text Area / Text Field components don't interact with mouse hover.
I feel like it's a good UX practice to slightly change the background/border color of the interactive element on hover.

[snelsi]

Might be a good idea to take Tailwind's Transition Property groups and add it as a common token.
But with the ability to overwrite it with CSS Variables or Theme component.

[vladmoroz]

All of the interactive components are missing any hover/focus CSS transition styles. I wonder, is that intentional?

Yes, this is intentional. Most of the time, transitions on hover make the components feel less responsive. We don't plan to implement that.

As a side note, why some of the interactive components are missing hover/active styles?
For example Checkbox / Radio Group / Switch / Text Area / Text Field components don't interact with mouse hover.
I feel like it's a good UX practice to slightly change the background/border color of the interactive element on hover.

We plan to add an active style to Checkbox and Radio. Otherwise, hover styles aren't too idiomatic for the components you mentioned and the affordances are strong enough.

[snelsi]

Even if transitions will stay disabled by default, I think it would be a great addition to allow a user to customize this behavior via CSS Variables / Theme config