Tweak brightness for primary button

[Wolfr]

difference is not enough

[Wolfr]

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 https://github.com/nex3/sass/issues/817 )

However this doesn't really work:

• If I put in
• It breaks pretty badly for a monochrome $accent-color (see https://github.com/nex3/sass/issues/612 ) where instead of the expected darker/brighter (still monochrome button) you get a button with red-ish hue.