From 46a7979cc225dc9363e76a4a4590c4014841ce0a Mon Sep 17 00:00:00 2001 From: Benjamin Vray Date: Mon, 22 Jan 2024 14:32:00 +0000 Subject: [PATCH] [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 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 --- .../src/scss/bootstrap_review_frontend.scss | 47 ++++++++++++++----- addons/web/static/src/scss/utils.scss | 11 +++++ .../static/src/scss/website_sale.scss | 7 +++ 3 files changed, 54 insertions(+), 11 deletions(-) diff --git a/addons/web/static/src/scss/bootstrap_review_frontend.scss b/addons/web/static/src/scss/bootstrap_review_frontend.scss index a74f0991e90..00421903bfa 100644 --- a/addons/web/static/src/scss/bootstrap_review_frontend.scss +++ b/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; + } +} diff --git a/addons/web/static/src/scss/utils.scss b/addons/web/static/src/scss/utils.scss index 4946ec70274..e6555b33ba3 100644 --- a/addons/web/static/src/scss/utils.scss +++ b/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 // ------------------------------------------------------------------ diff --git a/addons/website_sale/static/src/scss/website_sale.scss b/addons/website_sale/static/src/scss/website_sale.scss index d8cc05febe1..5b3df4ee583 100644 --- a/addons/website_sale/static/src/scss/website_sale.scss +++ b/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 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;