feat(color-yiq): use @ysds lookup table instead of pow polyfill

scss/_functions.scss

@@ -2,11 +2,6 @@
 //
 // 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) {
@@ -92,36 +87,41 @@
   @return $string;
 }
 
+
 // 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);
-}
+// Based on @ysds implementation
+// See https://github.com/twbs/bootstrap/pull/30168
+@function color-yiq($background, $foreground-dark: $yiq-text-dark, $foreground-light: $yiq-text-light) {
+  $l1: luminance($background);
+  $l2: luminance(opaque($background, $foreground-light));
 
-// 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));
+  $contrast: if($l1 > $l2, ($l1 + .05) / ($l2 + .05), ($l2 + .05) / ($l1 + .05));
+
+  @return if($contrast < $yiq-contrasted-treshold, $foreground-dark, $foreground-light);
 }
 
-@function transform($x) {
-  @if ($x <= .03928) {
-    @return $x / 12.92;
-  } @else {
-    @return math-pow-polyfill((($x + .055) / 1.055), 2.4);
+// Return WCAG2.0 relative luminance
+// See https://www.w3.org/WAI/GL/wiki/Relative_luminance
+@function luminance($color) {
+  $rgb: (
+    "r": red($color),
+    "g": green($color),
+    "b": blue($color)
+  );
+
+  @each $name, $value in $rgb {
+    $value: if($value / 255 < .03928, $value / 255 / 12.92, nth($luminance-list, $value + 1));
+    $rgb: map-merge($rgb, ($name: $value));
   }
+
+  @return (map-get($rgb, "r") * .2126) + (map-get($rgb, "g") * .7152) + (map-get($rgb, "b") * .0722);
+}
+
+// Return opaque color
+// opaque(#fff, rgba(0, 0, 0, .5)) => #808080
+@function opaque($background, $foreground) {
+  @return mix(rgba($foreground, 1), $background, opacity($foreground) * 100);
 }
-// end mod
 
 // Request a color level
 @function color-level($color: $primary, $level: 0) {

scss/_variables.scss

@@ -95,12 +95,17 @@ $theme-colors: map-merge(
 $theme-color-interval:      8% !default;
 
 // The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.
-$yiq-contrasted-threshold:  150 !default;
+$yiq-contrasted-threshold:  3 !default;
 
 // Customize the light and dark text colors for use in our YIQ color contrast function.
 $yiq-text-dark:             $gray-900 !default;
 $yiq-text-light:            $white !default;
 
+
+// A list of pre-calculated numbers of pow(($value / 255 + .055) / 1.055, 2.4). (from 0 to 255)
+// stylelint-disable-next-line scss/dollar-variable-default
+$luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003 .0033 .0037 .004 .0044 .0048 .0052 .0056 .006 .0065 .007 .0075 .008 .0086 .0091 .0097 .0103 .011 .0116 .0123 .013 .0137 .0144 .0152 .016 .0168 .0176 .0185 .0194 .0203 .0212 .0222 .0232 .0242 .0252 .0262 .0273 .0284 .0296 .0307 .0319 .0331 .0343 .0356 .0369 .0382 .0395 .0409 .0423 .0437 .0452 .0467 .0482 .0497 .0513 .0529 .0545 .0561 .0578 .0595 .0612 .063 .0648 .0666 .0685 .0704 .0723 .0742 .0762 .0782 .0802 .0823 .0844 .0865 .0887 .0908 .0931 .0953 .0976 .0999 .1022 .1046 .107 .1095 .1119 .1144 .117 .1195 .1221 .1248 .1274 .1301 .1329 .1356 .1384 .1413 .1441 .147 .15 .1529 .1559 .159 .162 .1651 .1683 .1714 .1746 .1779 .1812 .1845 .1878 .1912 .1946 .1981 .2016 .2051 .2086 .2122 .2159 .2195 .2232 .227 .2307 .2346 .2384 .2423 .2462 .2502 .2542 .2582 .2623 .2664 .2705 .2747 .2789 .2831 .2874 .2918 .2961 .3005 .305 .3095 .314 .3185 .3231 .3278 .3325 .3372 .3419 .3467 .3515 .3564 .3613 .3663 .3712 .3763 .3813 .3864 .3916 .3968 .402 .4072 .4125 .4179 .4233 .4287 .4342 .4397 .4452 .4508 .4564 .4621 .4678 .4735 .4793 .4851 .491 .4969 .5029 .5089 .5149 .521 .5271 .5333 .5395 .5457 .552 .5583 .5647 .5711 .5776 .5841 .5906 .5972 .6038 .6105 .6172 .624 .6308 .6376 .6445 .6514 .6584 .6654 .6724 .6795 .6867 .6939 .7011 .7084 .7157 .7231 .7305 .7379 .7454 .7529 .7605 .7682 .7758 .7835 .7913 .7991 .807 .8148 .8228 .8308 .8388 .8469 .855 .8632 .8714 .8796 .8879 .8963 .9047 .9131 .9216 .9301 .9387 .9473 .956 .9647 .9734 .9823 .9911 1;
+
 // fusv-disable
 $blue-100: tint-color($blue, 8) !default;
 $blue-200: tint-color($blue, 6) !default;