From a4ea1d302ae320fd5810afef68938e6022ec317b Mon Sep 17 00:00:00 2001
From: Brieuc-brd <brd@odoo.com>
Date: Thu, 11 Apr 2024 11:00:21 +0200
Subject: [PATCH] [FIX] web: adjust frontend disabled input colors

=== Maintain border consistency of frontend inputs ===
Prior to this commit, `form-select` borders overlapped the background
color, which is not the case with `form-control`.
This is because `form-control` uses the `background-clip` property.
As we're using a semi-transparent border on frontend inputs, this
creates a color issue: when a `form-select` input is disabled, the
border color is darker than that of the `form-control`.
This commit adapts the `background-clip` on `form-select` input to
maintain color consistency between inputs.

=== Make disabled inputs more recognizable ===
Prior to this commit, disabled inputs were not sufficiently distinct
from regular inputs, especially `website_sale` inputs which had a gray
background.

Steps to reproduce:
- Make sure your instance has website_sale_renting installed.
- Go to the Shop page.
- Look for a product with a rental period (eg. Printer).
- Click on Add to cart, this will disable the rental period input.
=> The gray search bar and the disabled input have almost the same style

This commit adapts the style of disabled inputs in the frontend to make
them more recognizable.

task-3702675

Part-of: odoo/odoo#150886
---
 .../scss/bootstrap_overridden_frontend.scss   | 10 ++++++
 .../web/static/src/scss/bootstrap_review.scss |  7 +++-
 .../src/scss/bootstrap_review_frontend.scss   | 33 +++++++++++++++++++
 3 files changed, 49 insertions(+), 1 deletion(-)

diff --git a/addons/web/static/src/scss/bootstrap_overridden_frontend.scss b/addons/web/static/src/scss/bootstrap_overridden_frontend.scss
index 572ed1d6dc3..5e00b471c8e 100644
--- a/addons/web/static/src/scss/bootstrap_overridden_frontend.scss
+++ b/addons/web/static/src/scss/bootstrap_overridden_frontend.scss
@@ -21,6 +21,7 @@ $min-contrast-ratio: $o-frontend-min-contrast-ratio !default;
 // Body
 
 $body-bg: $white !default; // BS Default
+$body-color: $o-main-text-color !default;
 
 // Components
 //
@@ -59,15 +60,24 @@ $table-color: inherit !default;
 
 // Forms
 
+$input-color: $body-color !default;
+$input-bg: $body-bg !default;
 $input-transition: background-color .05s ease-in-out, border-color .05s ease-in-out, box-shadow .05s ease-in-out !default;
 
+$input-disabled-bg: $gray-200 !default;
+$input-disabled-border-color: rgba($input-color, 0.15) !default;
+
 $form-check-input-border: $border-width solid $gray-400 !default;
 $form-check-input-border-radius: 0 !default;
+$form-select-disabled-color: mix($input-color, $input-bg) !default;
+$form-select-disabled-bg: $input-disabled-bg !default;
+$form-select-disabled-border-color: $input-disabled-border-color !default;
 
 $form-range-track-height: .1rem !default;
 $form-range-thumb-border: $border-width solid $primary !default;
 $form-range-thumb-bg: $body-bg !default;
 $form-range-thumb-active-bg: $primary !default;
+$form-range-thumb-disabled-bg: $input-disabled-bg !default;
 
 // Figures
 
diff --git a/addons/web/static/src/scss/bootstrap_review.scss b/addons/web/static/src/scss/bootstrap_review.scss
index 280fa12f915..2eb7fcf2570 100644
--- a/addons/web/static/src/scss/bootstrap_review.scss
+++ b/addons/web/static/src/scss/bootstrap_review.scss
@@ -93,10 +93,15 @@
 }
 
 // Force field label pointer to cursor
-.form-check, .form-select {
+.form-check {
     @include o-field-pointer();
 }
 
+// Update the border color when hovering form-select elements
+.form-select:where(:not(:disabled)):hover {
+    border-color: $form-check-input-checked-border-color;
+}
+
 // Disable RTL for the dropdown position
 .dropdown-menu {
     &[x-placement^="top"],
diff --git a/addons/web/static/src/scss/bootstrap_review_frontend.scss b/addons/web/static/src/scss/bootstrap_review_frontend.scss
index 91fb157674c..73ef979a5c4 100644
--- a/addons/web/static/src/scss/bootstrap_review_frontend.scss
+++ b/addons/web/static/src/scss/bootstrap_review_frontend.scss
@@ -236,3 +236,36 @@ $-color-for-gray-200-bg: adjust-color-to-background($body-color, $gray-200);
         color: adjust-color-to-background($text-muted, $dropdown-bg, mute-color($color-contrast-light), mute-color($color-contrast-dark)) !important;
     }
 }
+
+// The following code adapts the style of disabled inputs to maintain color
+// consistency and make them more recognizable.
+.form-select {
+    // This is necessary to achieve a consistent "border rendering behaviour"
+    // across form-select and form-control when using semi-transparent
+    // borders and a background color (eg. disabled inputs).
+    // Otherwise, the color rendering of the semi-transparent border may be altered
+    // (the color may be darker depending on the background color used).
+    background-clip: padding-box;
+
+    &:disabled:not([multiple]):where(:not([size]), [size="1"]) {
+        background-image: str-replace($form-select-indicator, #{$form-select-indicator-color}, str-replace(#{$form-select-disabled-color}, "#", "%23"));
+    }
+}
+
+.form-control {
+    &:disabled, &[readonly] {
+        color: $form-select-disabled-color;
+    }
+}
+
+.form-check-input:disabled:not(:checked) {
+    background-color: $input-disabled-bg;
+
+    .form-switch & {
+        background-image: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-select-disabled-color}'/></svg>"));
+    }
+}
+
+.form-range:disabled::-webkit-slider-thumb {
+    border-color: $input-disabled-border-color;
+}