From 57d97752a205d6519ec186261f2b7df161621803 Mon Sep 17 00:00:00 2001
From: Samuel Degueldre <sad@odoo.com>
Date: Mon, 25 Jul 2022 08:44:18 +0000
Subject: [PATCH] [FIX] web: use color-contrast instead of color-yiq

Previously, we were using the bootstrap 4 function "color-yiq" to choose
a text color depending on the background color. Since the migration to
BS5, color-yiq is no longer valid, and color-contrast should be used
instead, but the wowl-views migration was maintained in parallel from
the BS5 migration and some instance of this function call were added
back with it. This commit fixes those.

Functionally, this fixes the text color in the m2m_tags field.

closes odoo/odoo#96598

Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>
---
 addons/web/static/src/legacy/scss/utils.scss                    | 2 +-
 .../web/static/src/views/fields/many2many_tags/tags_list.scss   | 2 +-
 .../web/static/src/views/fields/statusbar/statusbar_field.scss  | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/addons/web/static/src/legacy/scss/utils.scss b/addons/web/static/src/legacy/scss/utils.scss
index e910cdb70aa..cb2cba4a6a7 100644
--- a/addons/web/static/src/legacy/scss/utils.scss
+++ b/addons/web/static/src/legacy/scss/utils.scss
@@ -70,7 +70,7 @@
 //
 // 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.
+// most on a given background color, you should use the 'color-contrast' function.
 //
 @function o-get-most-contrast($color, $c1, $c2, $background: #FFFFFF, $threshold: false, $cross-mix: true) {
     $background: if($background == null, #FFFFFF, $background);
diff --git a/addons/web/static/src/views/fields/many2many_tags/tags_list.scss b/addons/web/static/src/views/fields/many2many_tags/tags_list.scss
index 157f819279d..09e804adc44 100644
--- a/addons/web/static/src/views/fields/many2many_tags/tags_list.scss
+++ b/addons/web/static/src/views/fields/many2many_tags/tags_list.scss
@@ -37,7 +37,7 @@
                 } @else {
                     &, &::after {
                         background-color: nth($o-colors, $size);
-                        color: color-yiq(nth($o-colors, $size));
+                        color: color-contrast(nth($o-colors, $size));
                     }
                     &:focus-within {
                         background-color: darken(nth($o-colors, $size), 20%);
diff --git a/addons/web/static/src/views/fields/statusbar/statusbar_field.scss b/addons/web/static/src/views/fields/statusbar/statusbar_field.scss
index 300fe81fae8..10d25f6f9ac 100644
--- a/addons/web/static/src/views/fields/statusbar/statusbar_field.scss
+++ b/addons/web/static/src/views/fields/statusbar/statusbar_field.scss
@@ -56,7 +56,7 @@
 
             &.btn-primary.disabled {
                 background-color: $o-brand-odoo;
-                color: color-yiq($o-brand-odoo);
+                color: color-contrast($o-brand-odoo);
 
                 &:after, &:before {
                     border-left-color: $o-brand-odoo;