swap lightness/forground function for luminance method

diff --git a/scss/_global.scss b/scss/_global.scss
index e36c55a0a3ccce3bc0f33a6b498cad8af0199051..d3256993f48e1c44455e855c9ecb82e810ea4b78 100644 (file)
--- a/scss/_global.scss
+++ b/scss/_global.scss
@@ -25,7 +25,7 @@ $global-lineheight: 1.5 !default;
 $foundation-palette: (
   primary: #1a7cbd,
   secondary: #767676,
-  success: #238748,
+  success: #3adb76,
   warning: #ffae00,
   alert: #cc4b37,
 ) !default;

diff --git a/scss/components/_button.scss b/scss/components/_button.scss
index ecb0d34555fb8e4ecedbefa4d32e516700182bda..e8f19005ba004f90a9b6115aaed0053bcd285fc3 100644 (file)
--- a/scss/components/_button.scss
+++ b/scss/components/_button.scss
@@ -114,7 +114,7 @@ $button-transition: background-color 0.25s ease-out, color 0.25s ease-out !defau
   $background-hover-lightness: $button-background-hover-lightness
 ) {
   @if $color == auto {
-    $color: foreground($background, $button-color-alt, $button-color);
+    $color: pick-best-color($base: $background, $colors: ($button-color, $button-color-alt));
   }
 
   @if $background-hover == auto {

diff --git a/scss/settings/_settings.scss b/scss/settings/_settings.scss
index 294ceecba2b89c7592b2736ccffdf194977f0dbd..80d783f0bc75d694e2860792377e0762dfa62562 100644 (file)
--- a/scss/settings/_settings.scss
+++ b/scss/settings/_settings.scss
@@ -51,7 +51,7 @@ $global-lineheight: 1.5;
 $foundation-palette: (
   primary: #1a7cbd,
   secondary: #767676,
-  success: #238748,
+  success: #3adb76,
   warning: #ffae00,
   alert: #cc4b37,
 );

diff --git a/scss/util/_color.scss b/scss/util/_color.scss
index ae23683b130244d490370a8a6be342882f3e2435..2f5853b3f3d9b7060a8e52f685f72ece251afe3a 100644 (file)
--- a/scss/util/_color.scss
+++ b/scss/util/_color.scss
@@ -6,24 +6,74 @@
 /// @group functions
 ////
 
-/// Checks the lightness of `$color`, and if it passes the `$threshold` of lightness, it returns the `$yes` color. Otherwise, it returns the `$no` color. Use this function to dynamically output a foreground color based on a given background color.
+/// Checks the luminance of `$color`.
 ///
-/// @param {Color} $color - Color to check the lightness of.
-/// @param {Color} $yes [$black] - Color to return if `$color` is light.
-/// @param {Color} $no [$white] - Color to return if `$color` is dark.
-/// @param {Percentage} $threshold [60%] - Threshold of lightness to check against.
+/// @param {Color} $color - Color to check the luminance of.
 ///
-/// @returns {Color} The $yes color or $no color.
-@function foreground($color, $yes: $black, $no: $white, $threshold: 60%) {
-  @if $color == transparent {
-    $color: $body-background;
+/// @returns {Number} The luminance of `$color`.
+@function color-luminance($color) {
+  // Adapted from: https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/color.js
+  // Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
+  $rgba: red($color), green($color), blue($color);
+  $rgba2: ();
+
+  @for $i from 1 through 3 {
+    $rgb: nth($rgba, $i);
+    $rgb: $rgb / 255;
+
+    $rgb: if($rgb < 0.03928, $rgb / 12.92, pow(($rgb + 0.055) / 1.055, 2.4));
+
+    $rgba2: append($rgba2, $rgb);
   }
-  @if (lightness($color) > $threshold) {
-    @return $yes;
+
+  @return 0.2126 * nth($rgba2, 1) + 0.7152 * nth($rgba2, 2) + 0.0722 * nth($rgba2, 3);
+}
+
+/// Checks the contrast ratio of two colors.
+///
+/// @param {Color} $color1 - First color to compare.
+/// @param {Color} $color2 - Second color to compare.
+///
+/// @returns {Number} The contrast ratio of the compared colors.
+@function color-contrast($color1, $color2) {
+  // Adapted from: https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/color.js
+  // Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef
+  $luminance1: color-luminance($color1) + 0.05;
+  $luminance2: color-luminance($color2) + 0.05;
+  $ratio: $luminance1 / $luminance2;
+
+  @if $luminance2 > $luminance1 {
+    $ratio: 1 / $ratio;
   }
-  @else {
-    @return $no;
+
+  $ratio: round($ratio * 10) / 10;
+
+  @return $ratio;
+}
+
+/// Checks the luminance of `$base`, and if it passes the `$threshold` of lightness, it returns the `$yes` color. Otherwise, it returns the `$no` color. Use this function to dynamically output a foreground color based on a given background color.
+///
+/// @param {Color} $color1 - First color to compare.
+/// @param {Color} $color2 - Second color to compare.
+///
+/// @returns {Number} The contrast ratio of the compared colors.
+@function pick-best-color($base, $colors: ($button-color, $button-color-alt), $tolerance: 0) {
+  $contrast: color-contrast($base, nth($colors, 1));
+  $best: nth($colors, 1);
+
+  @for $i from 2 through length($colors) {
+    $current-contrast: color-contrast($base, nth($colors, $i));
+    @if ($current-contrast - $contrast > $tolerance) {
+      $contrast: color-contrast($base, nth($colors, $i));
+      $best: nth($colors, $i);
+    }
   }
+
+  @if ($contrast < 3) {
+    @warn "Contrast ratio of #{$best} on #{$base} is pretty bad, just #{$contrast}";
+  }
+
+  @return $best;
 }
 
 /// Scales a color to be darker if it's light, or lighter if it's dark. Use this function to tint a color appropriate to its lightness.

diff --git a/scss/util/_util.scss b/scss/util/_util.scss
index c38b425474a77c3be4d55bcae88ab195c24e33be..6698812f45b783efd65ec3de9486f483827c9d6b 100644 (file)
--- a/scss/util/_util.scss
+++ b/scss/util/_util.scss
@@ -2,6 +2,7 @@
 // foundation.zurb.com
 // Licensed under MIT Open Source
 
+@import 'math';
 @import 'unit';
 @import 'value';
 @import 'color';