[FIX] web, *: fix text color of popover and badge if dark background

*: website_sale

Steps to reproduce the first bug (popover):
- Install the e-commerce on your website.
- Go to the "Customizable Desk" product page.
- Click on "Edit" to go in edit mode.
- Click on the "Theme" tab.
- Click on the 4th color of the theme colors and choose "black".
- Save the page to leave edit mode.
- Click on the "Add to cart" button.
- Hover over the cart in the navbar to make the popover appear.
- Bug: All the popover texts are not visible because they are white and
the background is white.

Steps to reproduce the second bug (extra price badge):
- Install the e-commerce on your website.
- Go to the "Customizable Desk" product page.
- Click on "Edit" to go in edit mode.
- Click on the "Theme" tab.
- Click on the 4th color of the theme colors and choose "black".
- Save the page to leave edit mode.
- Bug: The text of the "extra price" badge is not visible because both
text and background are white.

These two issues existed because the text color of those elements
depended on the body's background color. With this commit, the text
color for those elements is now determined by their respective
backgrounds.

This commit is a follow-up to this commit [1]. We also add the handling
of the text-muted color to ensure it remains visible if a modal has a
dark background while the body background color is light. Before this
commit, we only handled the opposite case (dark body and light modal).

This commit also fixes the text color of the button in a file input of a
form when the background color of the <body> is dark. Similar to the
other elements fixed in this commit, the text color of this button could
be invisible because it was the same color as its background.

[1]: https://github.com/odoo/odoo/commit/308b91c58b00300fd8dc52b9b4e2f7d1ab31f7b7

opw-3570774

X-original-commit: 0c2806576e85106d06f4275c9204e664f69793d8
Part-of: odoo/odoo#153930

addons/web/static/src/scss/bootstrap_review_frontend.scss

@@ -112,15 +112,8 @@ $o-navbar-nav-pills-link-border-radius: $nav-pills-border-radius !default;
     // body is white, the text will not be visible on modals with a white
     // background.
 
-    // Check if the body text color is light.
-    $-is-body-text-light: color-contrast($body-color) == $color-contrast-dark;
-
     @if $modal-content-color == null {
-        color: if(
-            $-is-body-text-light,
-            color-contrast($modal-content-bg, $body-color, $color-contrast-dark),
-            color-contrast($modal-content-bg, $color-contrast-light, $body-color)
-        );
+        color: adjust-color-to-background($body-color, $modal-content-bg);
 
         // This prevents these elements from taking their colors from the body
         // inside a modal.
@@ -153,9 +146,26 @@ $o-navbar-nav-pills-link-border-radius: $nav-pills-border-radius !default;
             }
         }
     }
-    @if $-is-body-text-light {
-        .text-muted {
-            color: color-contrast($modal-content-bg, $text-muted, mute-color($color-contrast-dark)) !important;
+    .text-muted {
+        color: adjust-color-to-background($text-muted, $modal-content-bg, mute-color($color-contrast-light), mute-color($color-contrast-dark)) !important;
+    }
+}
+
+// Popover
+.popover {
+    // The popover can have a different background color than that of the body.
+    // Here, we adjust the text color of the popover in case the body color
+    // (used by default for the text color of popovers) is not visible inside a
+    // popover due to a lack of contrast (e.g. on a website with a dark
+    // background).
+    @if $popover-header-color == null {
+        .popover-header {
+            color: adjust-color-to-background($body-color, $popover-header-bg);
+        }
+    }
+    @if $popover-body-color == $body-color {
+        .popover-body {
+            color: adjust-color-to-background($body-color, $popover-bg);
         }
     }
 }
@@ -167,3 +177,18 @@ $o-navbar-nav-pills-link-border-radius: $nav-pills-border-radius !default;
     // on the 'currentColor' of the inputs.
     color: inherit;
 }
+
+$-color-for-gray-200-bg: adjust-color-to-background($body-color, $gray-200);
+// Input group text (e.g. Date time picker)
+.input-group-text {
+    // Adapt only if the variables have their default values.
+    @if ($input-group-addon-bg == $gray-200) and ($input-group-addon-color == $body-color) {
+        color: $-color-for-gray-200-bg;
+    }
+}
+// File upload button
+.form-control::file-selector-button {
+    @if ($form-file-button-bg == $gray-200) and ($form-file-button-color == $body-color) {
+        color: $-color-for-gray-200-bg;
+    }
+}

addons/web/static/src/scss/utils.scss

@@ -93,6 +93,17 @@
     }
 }
 
+// This function checks if the color ($color) has enough contrast to be visible
+// on a background with the color ($background-color). If not, it is replaced
+// with $light (if too dark) or $dark (if too light).
+@function adjust-color-to-background($color, $background-color, $light: $color-contrast-light, $dark: $color-contrast-dark) {
+    @return if(
+        color-contrast($color) == $color-contrast-dark,
+        color-contrast($background-color, $color, $dark),
+        color-contrast($background-color, $light, $color)
+    );
+}
+
 // ------------------------------------------------------------------
 // Padding
 // ------------------------------------------------------------------

addons/website_sale/static/src/scss/website_sale.scss

@@ -159,6 +159,13 @@ $input-border-color: $gray-400;
             max-width: $o-wsale-input-max-width;
         }
     }
+
+    // Extra price badge
+    .text-bg-light .variant_price_extra.text-muted {
+        // Needed to be visible on a dark <body> background.
+        color: adjust-color-to-background($text-muted, $light, mute-color($color-contrast-light), mute-color($color-contrast-dark)) !important;
+    }
+
     input.js_quantity {
         min-width: 48px;
         text-align: center;