Using CSS filter for link hover/active states! Is 2021 and support is great! #34716
Labels
Comments
|
I'm new here and would like to try something, can you put me through so I can fix that? |
|
This is not a bug - is a feature request regarding link colors! |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment


This is a topic to discuss/debate.
I find it hard or unnecessary to overwrite hover/active link colors, especially when using css variables.
I was thinking of using an approach in ./reboot.scss like:
https://stackoverflow.com/questions/1625681/dynamically-change-color-to-lighter-or-darker-by-percentage-css-javascript
`a {
color: $link-color;
text-decoration: $link-decoration;
&:hover {
--hover-brightness: #{$link-hover-brightness};
filter: brightness(var(--hover-brightness)); // or some calc function using existing rgb variables (or hsl - see bellow)
text-decoration: $link-hover-decoration;
}
}`
`:root {
--link-color-h: 211;
--link-color-s: 100%;
--link-color-l: 50%;
--link-color-hsl: var(--link-color-h), var(--link-color-s), var(--link-color-l);
--link-color: hsl(var(--link-color-hsl));
--link-color-10: hsla(var(--link-color-hsl), .1);
--link-color-20: hsla(var(--link-color-hsl), .2);
--link-color-30: hsla(var(--link-color-hsl), .3);
--link-color-40: hsla(var(--link-color-hsl), .4);
--link-color-50: hsla(var(--link-color-hsl), .5);
--link-color-60: hsla(var(--link-color-hsl), .6);
--link-color-70: hsla(var(--link-color-hsl), .7);
--link-color-80: hsla(var(--link-color-hsl), .8);
--link-color-90: hsla(var(--link-color-hsl), .9);
--link-color-warm: hsl(calc(var(--link-color-h) + 80), var(--link-color-s), var(--link-color-l));
--link-color-cold: hsl(calc(var(--link-color-h) - 80), var(--link-color-s), var(--link-color-l));
--link-color-low: hsl(var(--link-color-h), calc(var(--link-color-s) / 2), var(--link-color-l));
--link-color-lowest: hsl(var(--link-color-h), calc(var(--link-color-s) / 4), var(--link-color-l));
--link-color-light: hsl(var(--link-color-h), var(--link-color-s), calc(var(--link-color-l) / .9));
--link-color-dark: hsl(var(--link-color-h), var(--link-color-s), calc(var(--link-color-l) * .9));
}`
In this way, you just specify the link color and the CSS does the rest without the need to modify or write more css

.
The text was updated successfully, but these errors were encountered: