diff --git a/frameworks/compass/stylesheets/compass/utilities/color/_contrast.scss b/frameworks/compass/stylesheets/compass/utilities/color/_contrast.scss index 80102df0..fc73905e 100644 --- a/frameworks/compass/stylesheets/compass/utilities/color/_contrast.scss +++ b/frameworks/compass/stylesheets/compass/utilities/color/_contrast.scss @@ -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); } \ No newline at end of file diff --git a/lib/compass/sass_extensions/functions/colors.rb b/lib/compass/sass_extensions/functions/colors.rb index 5e89d613..999012ce 100644 --- a/lib/compass/sass_extensions/functions/colors.rb +++ b/lib/compass/sass_extensions/functions/colors.rb @@ -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 diff --git a/test/fixtures/stylesheets/compass/css/utilities.css b/test/fixtures/stylesheets/compass/css/utilities.css index 38544f92..aef752a4 100644 --- a/test/fixtures/stylesheets/compass/css/utilities.css +++ b/test/fixtures/stylesheets/compass/css/utilities.css @@ -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; } diff --git a/test/fixtures/stylesheets/compass/sass/utilities.scss b/test/fixtures/stylesheets/compass/sass/utilities.scss index 1565ed53..7daac2f6 100644 --- a/test/fixtures/stylesheets/compass/sass/utilities.scss +++ b/test/fixtures/stylesheets/compass/sass/utilities.scss @@ -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); } diff --git a/test/sass_extensions_test.rb b/test/sass_extensions_test.rb index 8bff5054..cbd75f8a 100644 --- a/test/sass_extensions_test.rb +++ b/test/sass_extensions_test.rb @@ -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)