diff --git a/_sass/_colors.scss b/_sass/_colors.scss index e5c133c..d6b04fd 100644 --- a/_sass/_colors.scss +++ b/_sass/_colors.scss @@ -12,7 +12,7 @@ $dark-blue: #0b3b5a; // for the style guide: @function contrast-color($color, $dark, $light) { - @if (lightness($color) > 50) { + @if (lightness(scale-color($color, $green: 50%)) > 50) { // Green is perceptually about twice as bright as other primary colors @return $dark; // Lighter backgorund, return dark color } @else { @return $light; // Darker background, return light color @@ -34,5 +34,6 @@ $color: .color__tile--#{$name}-bg { background-color: $bgcolor; color: contrast-color($bgcolor, #000, #fff); + box-shadow: 0 0 10px -4px contrast-color($bgcolor, #000, #fff); } } diff --git a/_sass/_styleguide.scss b/_sass/_styleguide.scss index beeb026..acd4a6c 100644 --- a/_sass/_styleguide.scss +++ b/_sass/_styleguide.scss @@ -15,5 +15,6 @@ padding: 20px; text-align: center; width: 10em; + border-radius: 10px; } }