/* | |
* Calculates the sRGB luma of a colour. | |
* | |
* Math nicked from a great Thoughtbot article by Reda Lemeden: | |
* http://robots.thoughtbot.com/closer-look-color-lightness | |
*/ | |
@function luma($c) { | |
$-local-red: red(rgba($c, 1.0)); | |
$-local-green: green(rgba($c, 1.0)); | |
$-local-blue: blue(rgba($c, 1.0)); | |
@return (0.2126 * $-local-red + | |
0.7152 * $-local-green + | |
0.0722 * $-local-blue) / 255; | |
} |
/* | |
* Picks a colour from two options based on which one is more visible | |
* on the given background colour. | |
* | |
* Usage: pick-visible-color($bg-color, $color-1, $color-2) | |
*/ | |
@import 'luma'; | |
@function pick-visible-color($bg, $c1, $c2) { | |
$bg-luma: luma($bg); | |
$c1-luma: luma($c1); | |
$c2-luma: luma($c2); | |
$c1-diff: abs($bg-luma - $c1-luma); | |
$c2-diff: abs($bg-luma - $c2-luma); | |
@if $c1-diff > $c2-diff { | |
@return $c1; | |
} @else { | |
@return $c2; | |
} | |
} |
$button-color: crimson; | |
button { | |
background-color: $button-color; | |
@if (lightness($button-color) < 50) { | |
color: white; | |
} @else { | |
color: black; | |
} | |
} |
///////////////////////////////////////////////////////////////// | |
// variables/_colors.scss | |
$button-color: crimson; | |
// ... | |
///////////////////////////////////////////////////////////////// | |
// elements/_buttons.scss | |
button { | |
background-color: $button-color; | |
color: pick-visible-color($button-color, black, white); | |
// ... | |
} | |
///////////////////////////////////////////////////////////////// | |
// main.scss (Sass's root file) | |
@import 'variables/colors'; | |
@import 'functions/pick-visible-color'; | |
@import 'elements/buttons'; | |
// ... |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment