[REF] *: BS5: Restore BS4 behaviour

- new prefix `bs-` for the root CSS variables
As some website snippet relay on these values we need to restore the old
behaviour by setting this prefix to an empty string.

- restore negative margins disabled in BS5 by default

- restore BS4 behaviour for setting element content
  Fix some cases when we want to render more than one node on the root
  level.
  In BS4 the jQuery was using all node but in the jQuery compatibility
  layer in BS5 it takes only the first node if the jQuery Element is used
  in the function. This hack try to restore the old behaviour wrapping all
  element in a DIV element (to be single root node).
  PS: this can break some querySelector and some CSS selector if they are
  too fragile.
  e.g. of element that break before this hack:
  Popover content for PaymentPopOver XML in ShowPaymentLineWidget

- restore old value from BS4 and adapt to new value
  $table-cell-padding -> $table-cell-padding-x
  $table-cell-padding -> $table-cell-padding-y
  $table-cell-padding-sm -> $table-cell-padding-x-sm
  $table-cell-padding-sm -> $table-cell-padding-y-sm

- restore BS4 smooth-scroll behaviour

- restore `text-X` from BS4 that use text-emphasis-variant
  In BS5, to generate the text utilities `test-X` its use BS5 utilities
  (See $utilities SCSS variables). To restore the old behaviour we replace
  with the custom `text-emphasis-variant` mixin.
  See odoo/odoo@e111cfd35e

- restore border and background of table
  In `_reboot.scss`, BS5 add `border-style` to all element of a table.
  In some case we customize the table with CSS rules (e.g. `listview`),
  these rules set a size of border. The mix of all rules made that the
  border of the `td` in `tfoot` are visible and make a black line.

- reset block quote Y margin to 0
 BS5 add a spacer and we reset that by puttin margin-y 0

- In BS5, border color is linked to the text color in it. We doesn't
want that and we restore the same behavior as un BS4 by putting
border-color in grey.

- restore HR style like in BS4
  Since in BS5, the height matter we remove the padding and added into the
  margin.
  Also, we restore the color of BS4 for the HR tag

> <hr> elements now use height instead of border to better support the
> size attribute. This also enables use of padding utilities to create
> thicker dividers (e.g., <hr class="py-1">).

https://getbootstrap.com/docs/5.1/migration/#content-reboot-etc

- restore old value for grid gutter to avoid calc error
  In BS5 `$grid-gutter-width` is set in rem and in BS4 it was in px.
  So SCSS compiler generates error when it tries to calc rem and px.

- restore badge, navbar paddings like in BS4

- restore link decoration in frontend (Portal) whiteout website

Task ID: 2766483

Part-of: odoo/odoo#95450

addons/portal/static/src/scss/bootstrap_overridden.scss

@@ -2,6 +2,16 @@
 // See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
 $min-contrast-ratio: 3 !default;
 
+//Restore BS4 Colors
+$blue: #007bff !default;
+$pink: #e83e8c !default;
+$green: #28a745 !default;
+$cyan: #17a2b8 !default;
+$gray-900: #212529 !default;
+//End Restore BS4 Colors
+
+$gray-300: #dee2e6 !default;
+
 // This variable affects the `.h-*` and `.w-*` classes.
 $sizes: () !default;
 $sizes: map-merge((
@@ -20,6 +30,10 @@ $body-bg: $o-portal-default-body-bg !default;
 
 $font-size-sm: (12 / 16) * 1rem !default;
 
+// Table
+$table-border-color: $gray-300 !default;
+$table-group-separator-color: $gray-300 !default;
+
 // Buttons
 //
 // For each of Bootstrap's buttons, define text, background, and border color.

addons/web/static/src/legacy/js/libs/bootstrap.js

@@ -88,6 +88,25 @@ Tooltip.prototype.show = function () {
     }
 };
 
+// Fix some cases when we want to render more than one node on the root level
+// In BS4 the jQuery was using all node but in the jQuery compatibility layer
+// in BS5 it takes only the first node if the jQuery Element is used in the
+// function. This hack try to restore the old behaviour wrapping all element
+// in a DIV element (to be single root node)
+// PS: this can break some querySelector and some CSS selector if they are too
+// fragile.
+// FIXME: Remove this hack and change all custom content to have only one node
+// and/or remove use of jQuery and so use an HTMLElement.
+const bootstrapSetElementContent = Tooltip.prototype.setElementContent;
+Tooltip.prototype.setElementContent = function (element, content) {
+    if (content && content.jquery && content.length) {
+        const $rootElement = $('<div/>');
+        $rootElement.append(content);
+        content = $rootElement[0];
+    }
+    return bootstrapSetElementContent.call(this, element, content);
+};
+
 /* Bootstrap scrollspy fix for non-body to spy */
 
 const bootstrapSpyRefreshFunction = ScrollSpy.prototype.refresh;

addons/web/static/src/legacy/scss/bootstrap_overridden.scss

@@ -7,6 +7,13 @@
 // Color system
 //
 
+//Restore BS4 Colors
+$blue: #007bff !default;
+$pink: #e83e8c !default;
+$green: #28a745 !default;
+$cyan: #17a2b8 !default;
+//End Restore BS4 Colors
+
 // All of those are BS default
 $white:    #fff !default;
 $gray-100: $o-gray-100 !default;
@@ -45,6 +52,16 @@ $min-contrast-ratio: 3 !default;
 // Options
 //
 // Quickly modify global styling by enabling or disabling optional features.
+$enable-smooth-scroll: false !default;
+
+// Prefix for :root CSS variables
+$variable-prefix: '' !default;
+
+// Restore negative margins disabled in BS5 by default
+$enable-negative-margins: true !default;
+
+// Spacing
+$spacer: 1rem !default;
 
 // Body
 //
@@ -109,10 +126,14 @@ $headings-color: $o-main-headings-color !default;
 //
 // Customizes the `.table` component with basic values, each used across all table variations.
 
-$table-accent-bg: rgba($black, .01) !default;
+$table-striped-bg-factor: .01 !default;
 $table-hover-bg: rgba($black, .04) !default;
 $table-border-color: $gray-200 !default;
 $table-group-separator-color: $gray-200 !default;
+$table-cell-padding-x: .75rem !default;
+$table-cell-padding-y: .75rem !default;
+$table-cell-padding-x-sm: .3rem !default;
+$table-cell-padding-y-sm: .3rem !default;
 
 // Buttons
 //
@@ -163,6 +184,9 @@ $custom-control-indicator-checked-disabled-bg: $gray-200 !default;
 //
 // $zindex-modal-backdrop: $zindex-modal;
 
+// Navbar
+$navbar-padding-x: $spacer !default;
+
 // Navs
 
 $nav-tabs-link-active-bg: $white !default;
@@ -231,3 +255,7 @@ $form-switch-icon-checked-color: $form-switch-checked-color !default;
 $form-switch-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-circle-bg-color}'/><line x1='-1.5' y1='-1.5' x2='1.5' y2='1.5' stroke='#{$form-switch-icon-color}' stroke-width='0.75'/><line x1='1.5' y1='-1.5' x2='-1.5' y2='1.5' stroke='#{$form-switch-icon-color}' stroke-width='0.75'/></svg>") !default;
 $form-switch-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-circle-checked-bg-color}'/><path d='m-2.125,-0.5l1.75,1.75l2.5,-2.5' fill='none' stroke='#{$form-switch-icon-checked-color}' stroke-width='0.75'/></svg>") !default;
 
+// Badge
+$badge-color: inherit !default;
+$badge-padding-y: 0.25em !default;
+$badge-padding-x: 0.4em !default;

addons/web/static/src/legacy/scss/bootstrap_overridden_frontend.scss

@@ -13,6 +13,9 @@ $font-size-base: (14 / 16) * 1rem !default;
 // when used with background classes, it should not be forced to a gray color.
 $blockquote-small-color: inherit !default;
 
+// Link
+$link-decoration: none !default;
+
 // Figures
 
 // Inherit color for figure-caption, use text-muted on top of it if you want

addons/web/static/src/legacy/scss/bootstrap_review.scss

@@ -17,6 +17,12 @@
     @include text-emphasis-variant(".text-#{$color}", $value);
 }
 
+// Restore text-X from BS4 that use text-emphasis-variant
+@each $color, $value in $theme-colors {
+    @include text-emphasis-variant(".text-#{$color}", $value);
+}
+
+
 .card-body {
     // BS4 colored cards do not have a very popular design. This will reset them
     // to a BS3-like one: only the header and footer are colored and the body

addons/web/static/src/libs/bootstrap/utilities_custom.scss

@@ -17,3 +17,26 @@ $utilities: map-merge(
         ),
     )
 );
+
+// Restore text-X from BS4 that use text-emphasis-variant
+// we don't merge $utilities-text-colors into $utilities
+// to avoid same utilises classes generated twice.
+// See bootstrap_review.scss
+$utilities: map-merge(
+    $utilities,
+    (
+        "color": (
+            property: color,
+            class: text,
+            local-vars: (
+                "text-opacity": 1
+            ),
+            values: (
+                "muted": $text-muted,
+                "black-50": rgba($black, .5), // deprecated
+                "white-50": rgba($white, .5), // deprecated
+                "reset": inherit,
+            ),
+        ),
+    )
+);

addons/web/static/src/webclient/webclient.scss

@@ -8,6 +8,13 @@ html, body {
     height: 100%;
 }
 
+// Disable default border-style added by _reboot.scss
+tfoot {
+  tr, td, th {
+    border-style: none;
+  }
+}
+
 // ------------------------------------------------------------------
 //  General
 // ------------------------------------------------------------------

addons/website/static/src/scss/bootstrap_overridden.scss

@@ -2,6 +2,14 @@
 // Color system
 //
 
+//Restore BS4 Colors
+$blue: #007bff !default;
+$pink: #e83e8c !default;
+$green: #28a745 !default;
+$cyan: #17a2b8 !default;
+$gray-900: #212529 !default;
+//End Restore BS4 Colors
+
 $white: #FFF !default;
 $black: #000 !default;
 
@@ -9,6 +17,14 @@ $black: #000 !default;
 // See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
 $min-contrast-ratio: 3 !default;
 
+// Prefix for :root CSS variables
+$variable-prefix: '' !default;
+
+// Restore negative margins disabled in BS5 by default
+$enable-negative-margins: true !default;
+
+
+
 // Customize the light and dark text colors for use in our color contrast function.
 $color-contrast-dark: o-color('900') !default;
 $color-contrast-light: o-color('white') !default;
@@ -39,6 +55,16 @@ $link-hover-color: auto-contrast(darken($link-color, 15%), o-color('o-cc1-bg'),
 $link-decoration: if(o-website-value('link-underline') == 'always', underline, none) !default;
 $link-hover-decoration: if(o-website-value('link-underline') != 'never', underline, none) !default;
 
+// Table
+$table-striped-bg-factor: .01 !default;
+$table-cell-padding-x: .75rem !default;
+$table-cell-padding-y: .75rem !default;
+$table-cell-padding-x-sm: .3rem !default;
+$table-cell-padding-y-sm: .3rem !default;
+
+// Grid
+$grid-gutter-width: 30px !default;
+
 // Components
 //
 // Define common padding and border radius sizes and more.
@@ -70,6 +96,10 @@ $lead-font-size: 1.125rem !default;
 
 $text-muted: mute-color($body-color) !default;
 
+// HR
+$hr-color: $black !default;
+$hr-opacity: 0.1 !default;
+
 // Buttons
 //
 // For each of Bootstrap's buttons, define text, background, and border color.
@@ -112,9 +142,18 @@ $input-border-radius: o-website-value('input-border-radius') !default;
 $input-border-radius-lg: o-website-value('input-border-radius-lg') !default;
 $input-border-radius-sm: o-website-value('input-border-radius-sm') !default;
 
+// Badge
+$badge-padding-y: 0.25em !default;
+$badge-padding-x: 0.4em !default;
+
+// Breadcrumbs
+$breadcrumb-padding-y: .75rem !default;
+$breadcrumb-padding-x: 1rem !default;
+
 // Navbar
 
 // Increase default navbar padding for some navbar styles
+$navbar-padding-x: $spacer !default;
 $navbar-padding-y: if(index(('fill', 'pills', 'outline'), o-website-value('header-links-style')), ($spacer / 2) * 1.25, null) !default;
 $navbar-nav-link-padding-x: if(index(('outline', 'block'), o-website-value('header-links-style')), .5rem * 3, null) !default;
 $navbar-nav-link-padding-x: if(o-website-value('header-links-style') == 'border-bottom', .5rem * 2, null) !default;
@@ -124,6 +163,9 @@ $navbar-nav-link-padding-x: if(o-website-value('header-links-style') == 'border-
 
 $jumbotron-bg: transparent !default;
 
+// Block Quote
+$blockquote-margin-y: 0 !default;
+
 // Bootstrap Review
 
 $o-btn-outline-defaults: () !default;

addons/website_event_exhibitor/views/event_exhibitor_templates_list.xml

@@ -141,7 +141,7 @@
     <div t-foreach="sponsor_categories" t-as="sponsor_category" class="row mb-3">
         <div class="col-12">
             <h2 class="m-0" t-out="sponsor_category['sponsorship'].name"/>
-            <hr class="mt-2 pb-1 mb-1"/>
+            <hr class="mt-2 mb-2"/>
         </div>
         <div t-foreach="sponsor_category['sponsors']" t-as="sponsor" class="col-md-6 col-lg-3 mb-4">
             <t t-call="website_event_exhibitor.exhibitor_card"/>