Better Way to Handle Hover State Colors

If you use shadcn/ui, you are probably used to using bg-primary/90 (lowering opacity) for button hovers.

The problem with lowering opacity is that the background shows through. Besides, sometimes we want to make the button colors lighter, not darker.

That's where the native CSS color-mix() comes in. Use it to mix your primary color with white or black, depending on whether you want to make the color lighter or darker.

For extra points, use the same shade of gray for the mix. For example, if you're using slate gray, use dark slate instead of pure black. This way, the colors are going to look more natural.