feat(color-contrast): ensure we return a contrasted enough color (light-first), the most contrasted one otherwise

1 files changed, 33 insertions, 2 deletions

diff --git a/scss/_functions.scss b/scss/_functions.scss
index d93e33916f..36108896a3 100644
--- a/scss/_functions.scss
+++ b/scss/_functions.scss
@@ -97,12 +97,43 @@
 $_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;
 
 @function color-contrast($background, $color-contrast-dark: $color-contrast-dark, $color-contrast-light: $color-contrast-light) {
+  $foregrounds: $color-contrast-light, $color-contrast-dark, $white, $black;
+  $contrast-ratios: ();
+
+  @each $color in $foregrounds {
+    $contrast-ratio: contrast-ratio($background, $color);
+    @if $contrast-ratio > $min-contrast-ratio {
+      @return $color;
+    } @else {
+      $contrast-ratios: map-merge(($contrast-ratio: $color), $contrast-ratios);
+    }
+  }
+
+  @warn "Found no color leading to #{$min-contrast-ratio}:1 contrast ratio against #{$background}…";
+
+  @return most-contrasted($contrast-ratios);
+}
+
+@function contrast-ratio($background, $foreground: $color-contrast-light) {
   $l1: luminance($background);
-  $l2: luminance(opaque($background, $color-contrast-light));
+  $l2: luminance(opaque($background, $foreground));
 
   $contrast: if($l1 > $l2, ($l1 + .05) / ($l2 + .05), ($l2 + .05) / ($l1 + .05));
 
-  @return if($contrast < $min-contrast-ratio, $color-contrast-dark, $color-contrast-light);
+  @return $contrast;
+}
+
+// Returns the most contrasted color in a map of insufficiently contrasted colors
+@function most-contrasted($contrast-ratios) {
+  $ratios: ();
+
+  @each $ratio, $color in $contrast-ratios {
+    $ratios: append($ratios, $ratio);
+  }
+
+  $highest-ratio: max($ratios...);
+
+  @return map-get($contrast-ratios, $highest-ratio);
 }
 
 // Return WCAG2.0 relative luminance