Nebula icon indicating copy to clipboard operation
Nebula copied to clipboard

Update link-colors Sass mixin to use readable-color when hover color is not supplied

Open chrisblakley opened this issue 5 years ago • 1 comments

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.

chrisblakley avatar Aug 09 '19 12:08 chrisblakley

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.

chrisblakley avatar Aug 14 '19 21:08 chrisblakley