Use a sass-based function instead of a ruby-based function for contrast calculations
This commit is contained in:
parent
620c9fe1ab
commit
902450a244
@ -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);
|
||||
}
|
@ -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
|
||||
|
@ -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; }
|
||||
|
@ -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); }
|
||||
|
@ -89,11 +89,6 @@ class SassExtensionsTest < Test::Unit::TestCase
|
||||
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)
|
||||
Sass::Script::Parser.parse(value, 0, 0).perform(Sass::Environment.new).to_s
|
||||
|
Loading…
Reference in New Issue
Block a user