joshua/dash-website
1
0
Fork 0
mirror of https://github.com/seigler/dash-website synced 2025-07-27 07:16:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

improve color chips

Browse source
This commit is contained in:
Joshua Seigler 2016-07-23 02:14:49 -04:00
parent 37f660f065
commit 3c471f8ac3
1 changed files with 4 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

8
_sass/_colors.scss
View file

@ -11,9 +11,9 @@ $dark-blue: #0b3b5a;
// for the style guide: // for the style guide:
@function contrast-color($color, $dark, $light) { @function contrast-color($color, $dark, $light, $threshold: 50) {
@if (lightness(scale-color($color, $green: 50%)) > 50) { // Green is perceptually about twice as bright as other primary colors @if (lightness(scale-color($color, $green: 30%, $blue: -6%, $red: 4%)) > $threshold) { // perceptual luminance http://www.workwithcolor.com/color-luminance-2233.htm
@return $dark; // Lighter backgorund, return dark color @return $dark; // Lighter background, return dark color
} @else { } @else {
@return $light; // Darker background, return light color @return $light; // Darker background, return light color
} }
@ -34,6 +34,6 @@ $color:
.color__tile--#{$name}-bg { .color__tile--#{$name}-bg {
background-color: $bgcolor; background-color: $bgcolor;
color: contrast-color($bgcolor, #000, #fff); color: contrast-color($bgcolor, #000, #fff);
box-shadow: 0 0 10px -4px contrast-color($bgcolor, #000, #fff); box-shadow: 0 0 10px -4px contrast-color($bgcolor, black, transparent, 80) inset;
} }
} }