[IMP] website, *: handle border-color variations

*: website_sale This commit aims to harmonize default border-color values and to provide a predictable result when transitioning between color-presets. We assign a CSS variable to bootstrap `$border-color` in order to let bootstrap components (and utility classes) align with the chosen color-preset. The color itself is achieved by fading-out the current text-color using CSS 'mix-color()' function. Since, at the time of writing, the function itself has a global support of 81% (mainly because of IE which we do not support but... see [1]), a fallback has been conveniently provided. Note: the right panel of the editor actually cannot understand the result of the `mix-color` function either and will display a transparent color instead. This will be fixed in a later PR. [1]: https://caniuse.com/mdn-css_types_color_color-mix task-3097005 Part-of: odoo#120302 Co-authored-by: Brieuc-brd <[email protected]>
ronelsimon · Oct 8, 2023 · fad514e · fad514e
1 parent 59aada0
commit fad514e
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 4 deletions.
diff --git a/addons/website/static/src/scss/bootstrap_overridden.scss b/addons/website/static/src/scss/bootstrap_overridden.scss
@@ -80,6 +80,9 @@ $grid-gutter-width: 30px !default;
 //
 // Define common padding and border radius sizes and more.
 
+// Allow dynamic border-color adaptations
+$border-color: var(--o-border-color) !default;
+
 // Note: for the 'active' color, color preset edition is not really flexible but
 // this could come in a future update.
 $component-active-bg: o-color('o-cc1-btn-primary') !default;
@@ -138,6 +141,13 @@ $lead-font-size: 1.125rem !default;
 
 $text-muted: mute-color($body-color) !default;
 
+// Tables
+//
+// Customizes the `.table` component with basic values, each used across all table variations.
+
+$table-border-color: $border-color !default;
+$table-group-separator-color: $table-border-color !default;
+
 // Buttons
 //
 // For each of Bootstrap's buttons, define text, background, and border color.
@@ -227,3 +237,14 @@ $o-navbar-nav-pills-link-border-radius: if(o-website-value('header-links-style')
 // Accordion
 $accordion-color: inherit !default;
 $accordion-bg: inherit !default;
+$accordion-border-color: $border-color !default;
+
+// Popovers
+$popover-border-color: $border-color !default;
+$popover-arrow-outer-color: $border-color !default;
+
+// Cards
+$card-border-color: $border-color !default;
+
+// HR Separator
+$hr-color: $border-color !default;
diff --git a/addons/website/static/src/scss/primary_variables.scss b/addons/website/static/src/scss/primary_variables.scss
@@ -2178,3 +2178,8 @@ $o-theme-font-configs: (
     }
     @return $-map;
 }
+
+// Fade-in 'currentColor' by a customizable amount
+@function fade-currentColor($-opacity: 15%) {
+    @return color-mix(in srgb, currentColor #{$-opacity}, transparent);
+}
diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
@@ -27,6 +27,13 @@ $-seen-urls: ();
         --#{$variable-prefix}body-bg: #{$-boxed-layout-body-bg};
     }
 
+    // Border color
+    // Let borders color adapt according to body and CCs. Also, set a fallback
+    // value for browsers that don't support the color-mix function (used by
+    // 'fade-currentColor').
+    --o-border-color: #{o-color('300')};
+    --o-border-color: #{fade-currentColor()};
+
     // The theme customize modal JS will need to know the value of some scss
     // variables used to render the user website, and those may have been
     // customized by themes, the user or anything else (so there is no file to
@@ -2486,3 +2493,8 @@ input[value*="data-oe-translation-initial-sha"] {
 .o_dropdown_menu {
     @extend .dropdown-menu;
 }
+
+// Override web_editor's rules
+.o_table tr {
+    border-color: $table-border-color;
+}
diff --git a/addons/website/static/src/snippets/s_hr/000.scss b/addons/website/static/src/snippets/s_hr/000.scss
@@ -4,7 +4,7 @@
     hr {
         padding: 0;
         border: 0;
-        border-top: 1px solid currentColor;
+        border-top: 1px solid $border-color;
         margin: 0;
         color: inherit;
         // As BS5 added "opacity" and "background-color" on hr tag, we remove

diff --git a/addons/website/static/src/snippets/s_process_steps/001.scss b/addons/website/static/src/snippets/s_process_steps/001.scss
@@ -30,7 +30,7 @@
             margin: $grid-gutter-width 0;
 
             path {
-                stroke: map-get($grays, '600');
+                stroke: $border-color;
                 stroke-width: 2;
                 fill: transparent;
             }

diff --git a/addons/website_sale/static/src/scss/product_configurator.scss b/addons/website_sale/static/src/scss/product_configurator.scss
@@ -136,7 +136,7 @@ label.css_attribute_color.css_not_available {
             content: '';
             margin-left: $spacer;
             flex-grow: 1;
-            border-bottom: 1px solid map-get($grays, '400');
+            border-bottom: 1px solid $border-color;
         }
     }
 

diff --git a/addons/website_sale/static/src/scss/website_sale.scss b/addons/website_sale/static/src/scss/website_sale.scss
@@ -201,7 +201,7 @@ $o-wsale-products-layout-grid-gutter-width: min($grid-gutter-width / 2, $o-wsale
 
 #product_detail ~ .oe_structure.oe_empty > section:first-child,
 .o_shop_discussion_rating {
-    border-top: 1px solid map-get($grays, '400');
+    border-top: 1px solid $border-color;
 }
 
 .o_alternative_product {