Merge pull request #320 from Orange-OpenSource/feature/wcag-algo

WCAG contrast algo

scss/_functions.scss

@@ -2,6 +2,11 @@
 //
 // Utility mixins and functions for evaluating source code across our variables, maps, and mixins.
 
+// Boosted mod
+// Vendors
+@import "vendor/pow";
+// end mod
+
 // Ascending
 // Used to evaluate Sass maps like our grid breakpoints.
 @mixin _assert-ascending($map, $map-name) {
@@ -88,15 +93,35 @@
 }
 
 // Color contrast
+// Boosted mod
 @function color-yiq($color, $dark: $yiq-text-dark, $light: $yiq-text-light) {
+  @if ($color == $primary) {
+    @return $light;
+  }
   $r: red($color);
   $g: green($color);
   $b: blue($color);
+  // get the relative lum for each color
+  $luminancecolor: relativelum($r / 255, $g / 255, $b / 255);
+  $luminancewhite: relativelum(1, 1, 1);
+  // if luminance doesn't fit with white, return black
+  @return if((($luminancewhite + .05) / ($luminancecolor + .05)) < $yiq-contrasted-threshold, $dark, $light);
+}
 
-  $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
+// Apply WCAG contrast algo
+// See https://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
+@function relativelum($r, $g, $b) {
+  @return ((transform($r) * .2126) + (transform($g) * .7152) + (transform($b) * .0722));
+}
 
-  @return if($yiq >= $yiq-contrasted-threshold, $dark, $light);
+@function transform($x) {
+  @if ($x <= .03928) {
+    @return $x / 12.92;
+  } @else {
+    @return math-pow-polyfill((($x + .055) / 1.055), 2.4);
+  }
 }
+// end mod
 
 // Request a color level
 @function color-level($color: $primary, $level: 0) {

scss/vendor/_pow.scss

@@ -0,0 +1,78 @@
+// sass-math-pow
+//
+// Licensed under MIT (https://github.com/strarsis/sass-math-pow/blob/master/LICENSE)
+
+@function math-pow-polyfill($number, $exp) {
+  @if (round($exp) != $exp) {
+    @return math-exp($exp * math-ln($number));
+  }
+
+  // Traditional method for integers
+  $value: 1;
+
+  @if $exp > 0 {
+    @for $i from 1 through $exp {
+      $value: $value * $number;
+    }
+  }
+  @else if $exp < 0 {
+    @for $i from 1 through -$exp {
+      $value: $value / $number;
+    }
+  }
+
+  @return $value;
+}
+
+@function math-factorial($value) {
+  @if $value == 0 {
+    @return 1;
+  }
+
+  $result: 1;
+
+  @for $index from 1 through $value {
+    $result: $result * $index;
+  }
+
+  @return $result;
+}
+
+@function math-summation($iteratee, $input, $initial: 0, $limit: 100) {
+  $sum: 0;
+
+  @for $index from $initial to $limit {
+    $sum: $sum + call(get-function($iteratee), $input, $index);
+  }
+
+  @return $sum;
+}
+
+@function math-exp-maclaurin($x, $n) {
+  $result: math-pow-polyfill($x, $n) / math-factorial($n);
+  @return $result;
+}
+@function math-exp($value) {
+  $result: math-summation(math-exp-maclaurin, $value, 0, 100);
+  @return $result;
+}
+
+@function math-ln-maclaurin($x, $n) {
+  $result: (math-pow-polyfill(-1, $n + 1) / $n) * (math-pow-polyfill($x - 1, $n));
+  @return $result;
+}
+
+@function math-ln($value) {
+  $ten-exp: 1;
+  $ln-ten: 2.30258509;
+
+  @while ($value > math-pow-polyfill(10, $ten-exp)) {
+    $ten-exp: $ten-exp + 1;
+  }
+
+  $value: $value / math-pow-polyfill(10, $ten-exp);
+
+  $result: math-summation(math-ln-maclaurin, $value, 1, 100);
+
+  @return $result + $ten-exp * $ln-ten;
+}