Use a sass-based function instead of a ruby-based function for contrast calculations

This commit is contained in:
Chris Eppstein 2011-02-21 12:48:19 -08:00
parent 620c9fe1ab
commit 902450a244
5 changed files with 43 additions and 17 deletions

View File

@ -1,8 +1,28 @@
$contrasted-default-dark: #000;
$contrasted-default-light: #fff;
$contrasted-dark-default: #000 !default;
$contrasted-light-default: #fff !default;
$contrasted-lightness-threshold: 30% !default;
// Returns the `$light` color when the `$color` is dark
// and the `$dark` color when the `$color` is light.
// The `$threshold` is a percent between `0%` and `100%` and it determines
// when the lightness of `$color` changes from "dark" to "light".
@function contrast-color(
$color,
$dark: $contrasted-dark-default,
$light: $contrasted-light-default,
$threshold: $contrasted-lightness-threshold
) {
@return if(lightness($color) < $threshold, $light, $dark)
}
// Sets the specified background color and calculates a dark or light contrasted text color.
@mixin contrasted($bg, $dark:$contrasted-default-dark, $light:$contrasted-default-light){
background-color: $bg;
color: get_contrast_yiq($bg, $dark, $light);
// The arguments are passed through to the [contrast-color function](#function-contrast-color).
@mixin contrasted(
$background-color,
$dark: $contrasted-dark-default,
$light: $contrasted-light-default,
$threshold: $contrasted-lightness-threshold
) {
background-color: $background-color;
color: contrast-color($background-color, $dark, $light, $threshold);
}

View File

@ -41,13 +41,6 @@ module Compass::SassExtensions::Functions::Colors
Sass::Script::String.new("##{alphastr}#{color.send(:hex_str)[1..-1]}".upcase)
end
# Calculates the contrast of a color using the YIQ algorithm
# Returns one of either a dark or light color based on the YIQ
def get_contrast_yiq(color, dark = Sass::Script::Color.new([0,0,0]), light = Sass::Script::Color.new([255,255,255]))
yiq = ( (color.red*299) + (color.green*587) + (color.blue*114) ) / 1000;
yiq >= 128 ? dark : light
end
private
def scale_color_value(value, amount)
if amount > 0

View File

@ -11,3 +11,16 @@
clear: both;
overflow: hidden;
visibility: hidden; }
p.light {
background-color: #b0201e;
color: black; }
p.dark {
background-color: #5f1210;
color: white; }
p.light-with-args {
background-color: #b0201e;
color: green; }
p.dark-with-args {
background-color: #5f1210;
color: blue; }

View File

@ -7,3 +7,8 @@
.pie-clearfix {
@include pie-clearfix;
}
p.light { @include contrasted(#B0201E); }
p.dark { @include contrasted(#5F1210); }
p.light-with-args { @include contrasted(#B0201E, green, blue); }
p.dark-with-args { @include contrasted(#5F1210, green, blue); }

View File

@ -88,11 +88,6 @@ class SassExtensionsTest < Test::Unit::TestCase
assert_equal "true", evaluate("blank(' ')")
assert_equal "true", evaluate("blank(-compass-space-list(' '))")
end
def test_get_contrast
assert_equal "white", evaluate("get_contrast_yiq(#000)")
assert_equal "black", evaluate("get_contrast_yiq(#fff)")
end
protected
def evaluate(value)