[FIX] website, *: review auto light and dark colors

* web, web_editor

The logic which chose if the user text color was supposed to be used as
bootstrap "dark" text color or bootstrap "light" text color
(https://github.com/odoo/odoo/commit/8b2dbd1441d6713d9072db03e8d3cb6c2246410f)
was fine when using the default theme with default bootstrap but was not
working as intended in some themes.

This commit also introduces a more accurate and complex method to
determine the correct contrasted color in most cases.

closes odoo/odoo#28468

2 files changed, 35 insertions, 18 deletions

diff --git a/addons/web/static/src/scss/bs_mixins_overrides.scss b/addons/web/static/src/scss/bs_mixins_overrides.scss
index b321b900493..fdaa3cd5ec3 100644
--- a/addons/web/static/src/scss/bs_mixins_overrides.scss
+++ b/addons/web/static/src/scss/bs_mixins_overrides.scss
@@ -3,21 +3,11 @@
 // Those will affect the way bootstrap is generated wherever bootstrap is used
 //------------------------------------------------------------------------------
 
-// Override color-yiq function to handle the alpha component of colors
-@function color-yiq($alphacolor, $background: $body-bg) {
-    $color: mix(rgba($alphacolor, 1.0), $background, percentage(alpha($alphacolor)));
-
-    $r: red($color);
-    $g: green($color);
-    $b: blue($color);
-
-    $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
-
-    @if ($yiq >= $yiq-contrasted-threshold) {
-        @return $yiq-text-dark;
-    } @else {
-        @return $yiq-text-light;
-    }
+// Override color-yiq function to handle the alpha component of colors and
+// automatic threshold
+@function color-yiq($color, $background: $body-bg, $cross-mix: true) {
+    $threshold: if($yiq-contrasted-threshold != false, $yiq-contrasted-threshold / 255 * 100%, false);
+    @return o-get-most-contrast($color, $yiq-text-light, $yiq-text-dark, $background, $threshold, $cross-mix);
 }
 
 @mixin o-bg-color($color, $text-color: null, $with-muted: true) {
diff --git a/addons/web/static/src/scss/utils.scss b/addons/web/static/src/scss/utils.scss
index e63e0c6650f..5ac917fcd75 100644
--- a/addons/web/static/src/scss/utils.scss
+++ b/addons/web/static/src/scss/utils.scss
@@ -66,9 +66,36 @@
 @function luma($color) {
     @return ((red($color) * .299) + (green($color) * .587) + (blue($color) * .114)) / 255 * 100%;
 }
-@function o-get-most-contrast($color, $c1, $c2) {
-    $luma: luma($color);
-    @return if(abs($luma - luma($c1)) > abs($luma - luma($c2)), $c1, $c2);
+//
+// Given two colors, returns the one which has the most constrast with another
+// given color. Careful: if you want to find the text color which will suit the
+// most on a given background color, you should use the 'color-yiq' function.
+//
+@function o-get-most-contrast($color, $c1, $c2, $background: #FFFFFF, $threshold: false, $cross-mix: true) {
+    $background: if($background == null, #FFFFFF, $background);
+
+    $real-color: mix(rgba($color, 1.0), $background, percentage(alpha($color)));
+    $luma: luma($real-color);
+
+    $cross-color: if($cross-mix, $real-color, $background);
+
+    $real-c1: mix(rgba($c1, 1.0), $cross-color, percentage(alpha($c1)));
+    $luma-c1: luma($real-c1);
+
+    $real-c2: mix(rgba($c2, 1.0), $cross-color, percentage(alpha($c2)));
+    $luma-c2: luma($real-c2);
+
+    $-dark: if($luma-c1 <= $luma-c2, $c1, $c2);
+    $-light: if($luma-c1 > $luma-c2, $c1, $c2);
+
+    @if $threshold == false {
+        // Automatic threshold: give a really small preference to light results
+        // as bootstrap does by default (mainly by compatibility at the moment
+        // this code is written)
+        $threshold: ($luma-c1 + $luma-c2) * 0.515; // 150 / 145.63 * 0.5 would be the BS value
+    }
+
+    @return if($luma > $threshold, $-dark, $-light);
 }
 
 // ------------------------------------------------------------------