Hover / Interaction colors
It is very common to use a variation of the color of an element when hovering over it to indicate interaction.
It becomes hard though to be generic.
If we were to define a primaryColor
, then we'd also need a primaryColorInteraction
.
We could do the same for a secondaryColor
, but if one were to introduce another one, then you'd need yet another variable for interaction.
A smarter approach might be to use a function on the components along the lines of this one that would shade the current background color of an element.
An alternative approach would be to have one interactive color for all elements, regardless of their current color.
It goes without saying that any of the above could be overriden in a custom theme, so this is more of a question of what is a more sensible default approach.