Nebula
Nebula copied to clipboard
Update link-colors Sass mixin to use readable-color when hover color is not supplied
Currently this is often used:
@include link-colors($primary_color, #fff);
But if the primary color is (for example) yellow, the white hover will not provide enough contrast ratio. Instead, I'd like to call them like this:
@include link-colors($primary_color);
Then in the mixin, the hover color will use readable-color($normal)
(or whatever the syntax is) so that the contrast ratio is always preserved.
An example of this is inside of the _navigation.scss
partial.
This may actually be harder than it seems because we don't know (and can't assume) the background color...
The above code snippets assume that the background color changes to the $primary_color
on hover which would work with the readable-color()
hover, but if the background becomes $secondary_color
on hover, then we don't know what color that is, so it wouldn't work in that case.