Changing hover color based on primary color style

Doing this with variables is very easy. But you could set up styles to work the same way if you organize your naming properly.

This screenshot shows how I set mine up. The “primary” button has colors for each state. When designing the variants, just assign the “hovered” color to the hovered state variant.

Maybe that is what you are saying in your post? Not exactly clear.

But this is how most of use handle it with variables.

Another option that we have done in the past. A long past that is…

Is creating an opaque black layer in the hover variant that sits on top of your button.

This way, whatever color you have underneath it, just gets darkened by the opaque overlay.

This really is obsolete since variables, variants, and better practices. But it used to be a good way to just use an overlay and whatever brand color was applied to the button, wouldn’t matter.

Old school workaround.

Thank you! Will try it out.