diff options
author | Gaël Poupard <gael.poupard@orange.com> | 2020-03-27 18:37:59 +0300 |
---|---|---|
committer | Gaël Poupard <ffoodd@users.noreply.github.com> | 2020-05-20 10:49:18 +0300 |
commit | 1b8bf5b56c77a60aab4c228aada7565f77db17ce (patch) | |
tree | 0d7ad78371e4483826dab3ba96bf856c59e9363c /scss | |
parent | 2df63f4925c41df8ac26c79742ee86822ee0877f (diff) |
feat(color-contrast): ensure we return a contrasted enough color (light-first), the most contrasted one otherwise
Diffstat (limited to 'scss')
-rw-r--r-- | scss/_functions.scss | 35 |
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 |