From fad514ebdc25b9de03fd387a0c07dbbc274c364e Mon Sep 17 00:00:00 2001 From: "stefanorigano (SRI)" Date: Thu, 17 Aug 2023 17:14:59 +0200 Subject: [PATCH] [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/odoo#120302 Co-authored-by: Brieuc-brd --- .../static/src/scss/bootstrap_overridden.scss | 21 +++++++++++++++++++ .../static/src/scss/primary_variables.scss | 5 +++++ addons/website/static/src/scss/website.scss | 12 +++++++++++ .../website/static/src/snippets/s_hr/000.scss | 2 +- .../src/snippets/s_process_steps/001.scss | 2 +- .../static/src/scss/product_configurator.scss | 2 +- .../static/src/scss/website_sale.scss | 2 +- 7 files changed, 42 insertions(+), 4 deletions(-) diff --git a/addons/website/static/src/scss/bootstrap_overridden.scss b/addons/website/static/src/scss/bootstrap_overridden.scss index 00f8a607fca..c41927383c4 100644 --- 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 index f3c4156e355..80756a81746 100644 --- 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 index 29f6b6dbc13..56073c71b97 100644 --- 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 index 02151f22644..ece35fedebe 100644 --- 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 index 1b8ab3f5fe6..11f919c15a6 100644 --- 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 index bd55cbbcecc..8b90eaa5cf6 100644 --- 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 index a2a178f6a95..112044f8cbc 100644 --- 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 {