From d28774398fe01d44ad77ea154166af9c8f1960a2 Mon Sep 17 00:00:00 2001
From: "Julien (jula)" <jula@odoo.com>
Date: Mon, 15 Apr 2024 16:57:11 +0200
Subject: [PATCH] [FIX] website: review default hr color
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

By default, Bootstrap uses a solid color and dim the element by setting
`$hr-opacity` to `0.25`[1].
Our design comes with a color that is "dimmed by default" since:

```scss
$hr-color ← $border-color ← rgba(currentColor, .25)
```
This commit therefore sets `$hr-opacity: 1 !default`.

At the same time, this also removes the hr background-color that
Bootstrap sets, otherwise it conflicts with the transparent color we are
adding on top of it.

[1]: https://github.com/odoo/odoo/blob/1154556/addons/web/static/lib/bootstrap/scss/_variables.scss#L664

closes odoo/odoo#160495

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Co-authored-by: qsm-odoo <qsm@odoo.com>
---
 .../website/static/src/scss/bootstrap_overridden.scss  |  1 +
 addons/website/static/src/scss/website.scss            | 10 +++-------
 addons/website/static/src/snippets/s_hr/000.scss       |  5 ++---
 3 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/addons/website/static/src/scss/bootstrap_overridden.scss b/addons/website/static/src/scss/bootstrap_overridden.scss
index fe262fca0bc..b381b3e446b 100644
--- a/addons/website/static/src/scss/bootstrap_overridden.scss
+++ b/addons/website/static/src/scss/bootstrap_overridden.scss
@@ -331,6 +331,7 @@ $modal-footer-border-width: 0 !default;
 
 // HR Separator
 $hr-color: $border-color !default;
+$hr-opacity: 1 !default;
 
 // Pagination
 
diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index 1069573d115..08219276865 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -412,13 +412,9 @@ hr {
     // Safari 16.5 is known to crash when using that to set the color property.
     border-top: $hr-height solid $hr-color;
     color: inherit;
-    // FIXME before the commit that introduced this background-color the color
-    // of HR was the superposition of:
-    // - background-color = currentColor = see below
-    // - color = $hr-color = transparent mix of currentColor
-    // => So a transparent version of the inherited color, on top of itself
-    // => This line makes it so this stays the same for now.
-    background-color: $hr-color;
+    // Bootstrap sets up a "background-color" on the hr tag. As we may use a
+    // transparent color as $hr-color, we do not want that.
+    background-color: transparent;
 }
 
 h2 {
diff --git a/addons/website/static/src/snippets/s_hr/000.scss b/addons/website/static/src/snippets/s_hr/000.scss
index fe9e510fa29..9778c04b7f9 100644
--- a/addons/website/static/src/snippets/s_hr/000.scss
+++ b/addons/website/static/src/snippets/s_hr/000.scss
@@ -9,9 +9,8 @@
         border: 0;
         border-top: 1px solid $border-color;
         margin: 0;
-        // As BS5 added "opacity" and "background-color" on hr tag, we remove
-        // that here to let users set the color as they want.
+        // Bootstrap sets a configurable "opacity" on hr tag, we remove that
+        // here to let users set the color as they want.
         opacity: 1;
-        background-color: transparent;
     }
 }