Tweak brightness for primary button
Wolfr opened this issue · comments
The goal of the skinning mechanism is to have the whole UI to be built up from a single accent color.
This seems relatively hard to do "automatically" involving a lot of color math.
This is the current implementation:
$accent-color: #155663 !default; // Accent color is supposed to be something like purple, red, blue
$accent-color-primary: adjust-saturation(adjust-lightness($accent-color, 25%),30%) !default;
If you do it this way it doesn't work for really bright colors. If you put in the bright blue as above the difference isn't enough.
We can add an if structure to check the lightness if $accent-color
so we can tweak $accent-color-primary
depending on that value:
$accent-color-primary: if(lightness($accent-color) > 50%, adjust-saturation(adjust-lightness($accent-color, -30%),30%), adjust-saturation(adjust-lightness($accent-color, 30%),30%));
( See sass/sass#817 )
However this doesn't really work:
- If I put in
- It breaks pretty badly for a monochrome
$accent-color
(see sass/sass#612 ) where instead of the expected darker/brighter (still monochrome button) you get a button with red-ish hue.