From 52ec536cef2ec84af0b36746f19a8cdf9f23fe2a Mon Sep 17 00:00:00 2001
From: qsm-odoo <qsm@odoo.com>
Date: Fri, 21 Dec 2018 10:37:10 +0000
Subject: [PATCH] [REF] *: make stronger bootstrap assets
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* portal, theme_bootswatch, web, web_editor, website

With less2sass and bs3tobs4 tasks, the assets structure was reviewed to
handle the specificities of both framework and to prepare for our next
odoo tasks. In particular, the assets_helpers and bootstrap overrides
were basically split into 4 parts: utils, primary variables, secondary
variables and bootstrap variables.
(see https://github.com/odoo/odoo/commit/6e4db7d13a926845bf82f5b035afede42d6d5a89)

Using the !default system for the bootstrap variables parts seems now
a good improvement. This is part of what this commit does: adding the
default flag for all bootstrap variables overrides and inverting the
order of the files in the _assets_backend_helpers and
_assets_frontend_helpers templates. This allows to avoid code like this:

portal:
```
$body-bg: white;
```

website:
```
@​if $var != null {
    $body-bg: $var;
}
```

This code makes the body white with portal or equal to $var with website
if $var has a value. The same behavior in the new file order is achieved
with:

website:
```
$body-bg: $var !default;
```

portal:
```
$body-bg: white !default;
```

This order is now also followed for the _assets_secondary_variables
templates (there are only a few).

This commit also make better assets hierarchy by making website inherit
from portal assets (instead of web) and portal inherit from web_editor
assets (instead of web) (thus relying on strong dependencies instead of
installation order which is not always right for migrated databases).

closes odoo/odoo#29757
---
 addons/portal/__manifest__.py                 |  2 +-
 .../static/src/scss/bootstrap_overridden.scss | 13 +--
 addons/portal/views/assets.xml                |  6 +-
 .../views/theme_bootswatch_templates.xml      | 38 ++++----
 .../static/src/scss/bootstrap_overridden.scss | 88 ++++++++-----------
 .../scss/bootstrap_overridden_frontend.scss   |  2 +-
 .../static/src/scss/secondary_variables.scss  | 32 +++----
 .../static/src/scss/bootstrap_overridden.scss | 24 +----
 .../static/src/scss/secondary_variables.scss  | 37 ++++++++
 addons/web_editor/views/editor.xml            | 10 ++-
 .../static/src/scss/bootstrap_overridden.scss | 24 +++--
 addons/website/views/website_templates.xml    | 12 +--
 12 files changed, 152 insertions(+), 136 deletions(-)
 create mode 100644 addons/web_editor/static/src/scss/secondary_variables.scss

diff --git a/addons/portal/__manifest__.py b/addons/portal/__manifest__.py
index e9fe1e36151..1fb78f87335 100644
--- a/addons/portal/__manifest__.py
+++ b/addons/portal/__manifest__.py
@@ -15,7 +15,7 @@ portal.
 This module contains most code coming from odoo v10 website_portal. Purpose
 of this module is to allow the display of a customer portal without having
 a dependency towards website edition and customization capabilities.""",
-    'depends': ['http_routing', 'mail'],
+    'depends': ['web', 'web_editor', 'http_routing', 'mail'],
     'data': [
         'data/portal_data.xml',
         'views/assets.xml',
diff --git a/addons/portal/static/src/scss/bootstrap_overridden.scss b/addons/portal/static/src/scss/bootstrap_overridden.scss
index 8f129e7bee4..b1eb608633b 100644
--- a/addons/portal/static/src/scss/bootstrap_overridden.scss
+++ b/addons/portal/static/src/scss/bootstrap_overridden.scss
@@ -1,23 +1,24 @@
 // This variable affects the `.h-*` and `.w-*` classes.
-$sizes: (
+$sizes: () !default;
+$sizes: map-merge((
     0: 0,
-);
+), $sizes);
 
 // Body
 //
 // Settings for the `<body>` element.
 
-$body-bg: $o-portal-default-body-bg;
+$body-bg: $o-portal-default-body-bg !default;
 
 // Fonts
 //
 // Font, line-height, and color for body text, headings, and more.
 
-$font-size-sm: (12 / 16) * 1rem;
+$font-size-sm: (12 / 16) * 1rem !default;
 
 // Buttons
 //
 // For each of Bootstrap's buttons, define text, background, and border color.
 
-$btn-padding-y-sm: (1 / 16) * 1rem;
-$btn-padding-x-sm: (5 / 16) * 1rem;
+$btn-padding-y-sm: (1 / 16) * 1rem !default;
+$btn-padding-x-sm: (5 / 16) * 1rem !default;
diff --git a/addons/portal/views/assets.xml b/addons/portal/views/assets.xml
index d83de5c4898..da71821fa9a 100644
--- a/addons/portal/views/assets.xml
+++ b/addons/portal/views/assets.xml
@@ -5,13 +5,13 @@
             <link rel="stylesheet" type="text/scss" href="/portal/static/src/scss/primary_variables.scss"/>
         </xpath>
     </template>
-    <template id="_assets_frontend_helpers" inherit_id="web._assets_frontend_helpers">
-        <xpath expr="//link[last()]" position="after">
+    <template id="_assets_frontend_helpers" inherit_id="web_editor._assets_frontend_helpers">
+        <xpath expr="//link" position="before">
             <link rel="stylesheet" type="text/scss" href="/portal/static/src/scss/bootstrap_overridden.scss"/>
         </xpath>
     </template>
 
-    <template id="assets_frontend" inherit_id="web.assets_frontend" name="Portal Assets" priority="15">
+    <template id="assets_frontend" inherit_id="web_editor.assets_frontend" name="Portal Assets" priority="15">
         <xpath expr="//link[last()]" position="after">
             <link rel="stylesheet" type="text/scss" href="/portal/static/src/scss/bootstrap.extend.scss"/>
             <link rel="stylesheet" type="text/scss" href="/portal/static/src/scss/portal.scss"/>
diff --git a/addons/theme_bootswatch/views/theme_bootswatch_templates.xml b/addons/theme_bootswatch/views/theme_bootswatch_templates.xml
index 44e061ea406..d59134c4a9c 100644
--- a/addons/theme_bootswatch/views/theme_bootswatch_templates.xml
+++ b/addons/theme_bootswatch/views/theme_bootswatch_templates.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
     <!-- Remove Odoo bootstrap overridde -->
-    <template id="_assets_frontend_helpers" inherit_id="web._assets_frontend_helpers">
+    <template id="_assets_frontend_helpers" inherit_id="website._assets_frontend_helpers">
         <xpath expr="//link[@href='/web_editor/static/src/scss/bootstrap_overridden.scss']" position="replace"/>
         <xpath expr="//link[@href='/website/static/src/scss/bootstrap_overridden.scss']" position="replace"/>
     </template>
@@ -25,8 +25,8 @@
         </xpath>
     </template>
 
-    <template id="theme_cerulean_bs_variables" name="Cerulean" inherit_id="web._assets_frontend_helpers" active="False">
-        <xpath expr="//link[last()]" position="after">
+    <template id="theme_cerulean_bs_variables" name="Cerulean" inherit_id="website._assets_frontend_helpers" active="False">
+        <xpath expr="//link" position="before">
             <link rel="stylesheet" type="text/scss" href="/theme_bootswatch/static/lib/bootswatch/cerulean/_variables.scss"/>
         </xpath>
     </template>
@@ -37,8 +37,8 @@
         </xpath>
     </template>
 
-    <template id="theme_cosmo_bs_variables" name="Cosmo" inherit_id="web._assets_frontend_helpers" active="False">
-        <xpath expr="//link[last()]" position="after">
+    <template id="theme_cosmo_bs_variables" name="Cosmo" inherit_id="website._assets_frontend_helpers" active="False">
+        <xpath expr="//link" position="before">
             <link rel="stylesheet" type="text/scss" href="/theme_bootswatch/static/lib/bootswatch/cosmo/_variables.scss"/>
         </xpath>
     </template>
@@ -49,8 +49,8 @@
         </xpath>
     </template>
 
-    <template id="theme_cyborg_bs_variables" name="Cyborg" inherit_id="web._assets_frontend_helpers" active="False">
-        <xpath expr="//link[last()]" position="after">
+    <template id="theme_cyborg_bs_variables" name="Cyborg" inherit_id="website._assets_frontend_helpers" active="False">
+        <xpath expr="//link" position="before">
             <link rel="stylesheet" type="text/scss" href="/theme_bootswatch/static/lib/bootswatch/cyborg/_variables.scss"/>
         </xpath>
     </template>
@@ -61,8 +61,8 @@
         </xpath>
     </template>
 
-    <template id="theme_flatly_bs_variables" name="Flatly" inherit_id="web._assets_frontend_helpers" active="False">
-        <xpath expr="//link[last()]" position="after">
+    <template id="theme_flatly_bs_variables" name="Flatly" inherit_id="website._assets_frontend_helpers" active="False">
+        <xpath expr="//link" position="before">
             <link rel="stylesheet" type="text/scss" href="/theme_bootswatch/static/lib/bootswatch/flatly/_variables.scss"/>
         </xpath>
     </template>
@@ -73,8 +73,8 @@
         </xpath>
     </template>
 
-    <template id="theme_journal_bs_variables" name="Journal" inherit_id="web._assets_frontend_helpers" active="False">
-        <xpath expr="//link[last()]" position="after">
+    <template id="theme_journal_bs_variables" name="Journal" inherit_id="website._assets_frontend_helpers" active="False">
+        <xpath expr="//link" position="before">
             <link rel="stylesheet" type="text/scss" href="/theme_bootswatch/static/lib/bootswatch/journal/_variables.scss"/>
         </xpath>
     </template>
@@ -85,8 +85,8 @@
         </xpath>
     </template>
 
-    <template id="theme_simplex_bs_variables" name="Simplex" inherit_id="web._assets_frontend_helpers" active="False">
-        <xpath expr="//link[last()]" position="after">
+    <template id="theme_simplex_bs_variables" name="Simplex" inherit_id="website._assets_frontend_helpers" active="False">
+        <xpath expr="//link" position="before">
             <link rel="stylesheet" type="text/scss" href="/theme_bootswatch/static/lib/bootswatch/simplex/_variables.scss"/>
         </xpath>
     </template>
@@ -97,8 +97,8 @@
         </xpath>
     </template>
 
-    <template id="theme_slate_bs_variables" name="Slate" inherit_id="web._assets_frontend_helpers" active="False">
-        <xpath expr="//link[last()]" position="after">
+    <template id="theme_slate_bs_variables" name="Slate" inherit_id="website._assets_frontend_helpers" active="False">
+        <xpath expr="//link" position="before">
             <link rel="stylesheet" type="text/scss" href="/theme_bootswatch/static/lib/bootswatch/slate/_variables.scss"/>
         </xpath>
     </template>
@@ -109,8 +109,8 @@
         </xpath>
     </template>
 
-    <template id="theme_spacelab_bs_variables" name="Spacelab" inherit_id="web._assets_frontend_helpers" active="False">
-        <xpath expr="//link[last()]" position="after">
+    <template id="theme_spacelab_bs_variables" name="Spacelab" inherit_id="website._assets_frontend_helpers" active="False">
+        <xpath expr="//link" position="before">
             <link rel="stylesheet" type="text/scss" href="/theme_bootswatch/static/lib/bootswatch/spacelab/_variables.scss"/>
         </xpath>
     </template>
@@ -121,8 +121,8 @@
         </xpath>
     </template>
 
-    <template id="theme_united_bs_variables" name="United" inherit_id="web._assets_frontend_helpers" active="False">
-        <xpath expr="//link[last()]" position="after">
+    <template id="theme_united_bs_variables" name="United" inherit_id="website._assets_frontend_helpers" active="False">
+        <xpath expr="//link" position="before">
             <link rel="stylesheet" type="text/scss" href="/theme_bootswatch/static/lib/bootswatch/united/_variables.scss"/>
         </xpath>
     </template>
diff --git a/addons/web/static/src/scss/bootstrap_overridden.scss b/addons/web/static/src/scss/bootstrap_overridden.scss
index 09dd5ddbfd4..edff888acbf 100644
--- a/addons/web/static/src/scss/bootstrap_overridden.scss
+++ b/addons/web/static/src/scss/bootstrap_overridden.scss
@@ -20,21 +20,21 @@ $gray-800: #343a40 !default;
 $gray-900: #212529 !default;
 $black:    #000 !default;
 
-$primary: $o-brand-primary;
-$secondary: $white;
+$primary: $o-brand-primary !default;
+$secondary: $white !default;
 
 // Body
 //
 // Settings for the `<body>` element.
 
-$body-bg: $o-brand-secondary;
-$body-color: $o-main-text-color;
+$body-bg: $o-brand-secondary !default;
+$body-color: $o-main-text-color !default;
 
 // Links
 //
 // Style anchor elements.
 
-$link-hover-decoration: none;
+$link-hover-decoration: none !default;
 
 // Muted
 //
@@ -46,53 +46,53 @@ $text-muted: $gray-500 !default;
 //
 // Set the number of columns and specify the width of the gutters.
 
-$grid-gutter-width: $o-horizontal-padding * 2;
+$grid-gutter-width: $o-horizontal-padding * 2 !default;
 
 // Components
 //
 // Define common padding and border radius sizes and more.
 
-$border-radius: 3px;
+$border-radius: 3px !default;
 
-$component-active-color: $o-brand-primary;
-$component-active-bg: $gray-200;
+$component-active-color: $o-brand-primary !default;
+$component-active-bg: $gray-200 !default;
 
 // Fonts
 //
 // Font, line-height, and color for body text, headings, and more.
 
-$font-family-sans-serif: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif;
+$font-family-sans-serif: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif !default;
 
-$font-size-base: $o-font-size-base;
-$line-height-base: $o-line-height-base;
+$font-size-base: $o-font-size-base !default;
+$line-height-base: $o-line-height-base !default;
 
-$h1-font-size: $o-font-size-base * 2.0;
-$h2-font-size: $o-font-size-base * 1.5;
-$h3-font-size: $o-font-size-base * 1.3;
-$h4-font-size: $o-font-size-base * 1.2;
-$h5-font-size: $o-font-size-base * 1.1;
+$h1-font-size: $o-font-size-base * 2.0 !default;
+$h2-font-size: $o-font-size-base * 1.5 !default;
+$h3-font-size: $o-font-size-base * 1.3 !default;
+$h4-font-size: $o-font-size-base * 1.2 !default;
+$h5-font-size: $o-font-size-base * 1.1 !default;
 
-$headings-font-weight: bold;
+$headings-font-weight: bold !default;
 
 // Tables
 //
 // Customizes the `.table` component with basic values, each used across all table variations.
 
-$table-accent-bg: rgba($black, .01);
-$table-hover-bg: rgba($black, .04);
+$table-accent-bg: rgba($black, .01) !default;
+$table-hover-bg: rgba($black, .04) !default;
 
 // Dropdowns
 //
 // Dropdown menu container and contents.
 
-$dropdown-border-color: $gray-300;
+$dropdown-border-color: $gray-300 !default;
 
-$dropdown-link-color: $o-main-text-color;
-$dropdown-link-hover-color: $gray-900;
-$dropdown-link-hover-bg: $gray-200;
+$dropdown-link-color: $o-main-text-color !default;
+$dropdown-link-hover-color: $gray-900 !default;
+$dropdown-link-hover-bg: $gray-200 !default;
 
-$dropdown-link-active-color: $gray-900;
-$dropdown-link-active-bg: $gray-300;
+$dropdown-link-active-color: $gray-900 !default;
+$dropdown-link-active-bg: $gray-300 !default;
 
 // Z-index master list
 
@@ -111,39 +111,29 @@ $dropdown-link-active-bg: $gray-300;
 
 // Navs
 
-$nav-tabs-link-active-bg: $white;
+$nav-tabs-link-active-bg: $white !default;
 
-$nav-pills-border-radius: 0;
-$nav-pills-link-active-color: $white;
-$nav-pills-link-active-bg: $o-brand-primary;
-
-// Navbar
-
-// FIXME $navbar-height ? $navbar-margin-bottom ? $navbar-inverse-* ? $navbar-border-radius ?
+$nav-pills-border-radius: 0 !default;
+$nav-pills-link-active-color: $white !default;
+$nav-pills-link-active-bg: $o-brand-primary !default;
 
 // Badges
 
-// FIXME $badge-bg, $badge-color, $badge-line-height ?
-$badge-font-weight: normal;
+$badge-font-weight: normal !default;
 
 // Modals
 
 // Padding applied to the modal body
-$modal-inner-padding: $o-horizontal-padding;
+$modal-inner-padding: $o-horizontal-padding !default;
 
-// FIXME $modal-title-padding ?
-
-$modal-lg: 980px;
-$modal-md: 650px;
+$modal-lg: 980px !default;
+$modal-md: 650px !default;
 
 // Breadcrumbs
 
-$breadcrumb-padding-y: 0;
-$breadcrumb-padding-x: 0;
-$breadcrumb-margin-bottom: 0;
+$breadcrumb-padding-y: 0 !default;
+$breadcrumb-padding-x: 0 !default;
+$breadcrumb-margin-bottom: 0 !default;
 
-$breadcrumb-bg: $o-control-panel-background-color;
-// FIXME $breadcrumb-color ?
-$breadcrumb-active-color: #777777;
-
-// FIXME $icon-font-path ?
+$breadcrumb-bg: $o-control-panel-background-color !default;
+$breadcrumb-active-color: #777777 !default;
diff --git a/addons/web/static/src/scss/bootstrap_overridden_frontend.scss b/addons/web/static/src/scss/bootstrap_overridden_frontend.scss
index f803cf3e72d..b36ccc0ae24 100644
--- a/addons/web/static/src/scss/bootstrap_overridden_frontend.scss
+++ b/addons/web/static/src/scss/bootstrap_overridden_frontend.scss
@@ -2,4 +2,4 @@
 //
 // Font, line-height, and color for body text, headings, and more.
 
-$font-size-base: $o-theme-font-size-base;
+$font-size-base: $o-theme-font-size-base !default;
diff --git a/addons/web/static/src/scss/secondary_variables.scss b/addons/web/static/src/scss/secondary_variables.scss
index c612c17dcb1..5b9d6ab239d 100644
--- a/addons/web/static/src/scss/secondary_variables.scss
+++ b/addons/web/static/src/scss/secondary_variables.scss
@@ -1,34 +1,34 @@
-$o-webclient-background-color: desaturate($o-gray-100, 100%);
-$o-control-panel-background-color: $o-view-background-color;
+$o-webclient-background-color: desaturate($o-gray-100, 100%) !default;
+$o-control-panel-background-color: $o-view-background-color !default;
 
-$o-list-footer-color: $o-main-text-color;
-$o-list-group-header-color: lighten($o-brand-lightsecondary, 10%);
+$o-list-footer-color: $o-main-text-color !default;
+$o-list-group-header-color: lighten($o-brand-lightsecondary, 10%) !default;
 
 // UI custom colors for tags, kanban records' colors, ...)
 // Note: the first value is the old BS3 gray-light value
 $o-colors: lighten(#000, 46.7%), #F06050, #F4A460, #F7CD1F, #6CC1ED, #814968,
-              #EB7E7F, #2C8397, #475577, #D6145F, #30C381, #9365B8;
+              #EB7E7F, #2C8397, #475577, #D6145F, #30C381, #9365B8 !default;
 
-$o-sheet-cancel-hpadding: $o-horizontal-padding;
-$o-sheet-cancel-bpadding: $o-horizontal-padding;
+$o-sheet-cancel-hpadding: $o-horizontal-padding !default;
+$o-sheet-cancel-bpadding: $o-horizontal-padding !default;
 
-$o-statusbar-arrow-width: $o-statusbar-height / 3;
-$o-statusbar-disabled-bg: lighten($o-brand-lightsecondary, 7%);
+$o-statusbar-arrow-width: $o-statusbar-height / 3 !default;
+$o-statusbar-disabled-bg: lighten($o-brand-lightsecondary, 7%) !default;
 
-$o-navbar-inverse-link-hover-bg: darken($o-brand-odoo, 10%);
+$o-navbar-inverse-link-hover-bg: darken($o-brand-odoo, 10%) !default;
 
-$o-datepicker-week-bg-color: lighten($o-datepicker-week-color, 30%);
+$o-datepicker-week-bg-color: lighten($o-datepicker-week-color, 30%) !default;
 
 // Kanban
 
-$o-kanban-record-margin: $o-horizontal-padding / 2;
-$o-kanban-group-padding: $o-horizontal-padding; // Cannot be higher than this
+$o-kanban-record-margin: $o-horizontal-padding / 2 !default;
+$o-kanban-group-padding: $o-horizontal-padding !default; // Cannot be higher than this
 
-$o-kanban-inside-hgutter-mobile: $o-horizontal-padding;
+$o-kanban-inside-hgutter-mobile: $o-horizontal-padding !default;
 
 // ------- Kanban dashboard variables -------
 
 // Since rows and containers are used inside cards, we're
 // forced to set the padding relative to the grid system.
-$o-kanban-dashboard-hpadding: $o-horizontal-padding;
-$o-kanban-dashboard-vpadding: $o-horizontal-padding / 2;
+$o-kanban-dashboard-hpadding: $o-horizontal-padding !default;
+$o-kanban-dashboard-vpadding: $o-horizontal-padding / 2 !default;
diff --git a/addons/web_editor/static/src/scss/bootstrap_overridden.scss b/addons/web_editor/static/src/scss/bootstrap_overridden.scss
index 5c64d275d56..0bfc53c5091 100644
--- a/addons/web_editor/static/src/scss/bootstrap_overridden.scss
+++ b/addons/web_editor/static/src/scss/bootstrap_overridden.scss
@@ -2,29 +2,14 @@
 $-is-backend: variable-exists('primary');
 
 // Use auto threshold for yiq colors
-$yiq-contrasted-threshold: false;
+$yiq-contrasted-threshold: false !default;
 
 // Automatically update bootstrap colors map (unused by BS itself)
-$-palette: nth($o-color-palettes, $o-color-palette-number);
 $colors: () !default;
-$colors: map-merge($-palette, $colors);
+$colors: map-merge($o-color-palette, $colors);
 
 // Automatically extend bootstrap to create theme background/text/button classes
-$-palette: nth($o-theme-color-palettes, $o-theme-color-palette-number);
-$-main-color: map-get($-palette, 'alpha');
-$-main-color-lightness: lightness($-main-color);
-$-palette: map-merge((
-    // alpha and beta colors are used to override primary and secondary BS4
-    // colors by default, so that theme colors affect the default Odoo layouts
-    'primary': $-main-color,
-    'secondary': map-get($-palette, 'beta'),
-
-    // BS light and dark colors are not used for any BS component, just
-    // for color utilities. By default, we set them to a very light and
-    // very dark version of a desaturate version of the main color
-    'light': lighten(desaturate($-main-color, 80%), min(70%, max(0%, 97% - $-main-color-lightness))), // Does not increase over 97% lightness
-    'dark': darken(desaturate($-main-color, 80%), min(70%, max(0%, $-main-color-lightness - 10%))), // Does not lower under 10% lightness
-), o-map-omit($-palette));
+$-palette: $o-theme-color-palette;
 @if $-is-backend {
     $-palette: map-remove($-palette, 'primary', 'secondary', 'success', 'info', 'warning', 'danger', 'light', 'dark');
 }
@@ -34,8 +19,7 @@ $theme-colors: map-merge($-palette, $theme-colors);
 // Extend grays with transparent ones (for some reason, BS4 create black-50 and
 // white-50 but does not allow overridding that with variables), also use the
 // theme gray palette (which is supposed to at least declare white and black).
-$-palette: nth($o-gray-color-palettes, $o-gray-color-palette-number);
-$-palette: map-merge($o-transparent-grays, $-palette);
+$-palette: $o-gray-color-palette;
 @if $-is-backend {
     $-palette: map-remove($-palette, '100', '200', '300', '400', '500', '600', '700', '800', '900');
 }
diff --git a/addons/web_editor/static/src/scss/secondary_variables.scss b/addons/web_editor/static/src/scss/secondary_variables.scss
new file mode 100644
index 00000000000..e1e4e62ca66
--- /dev/null
+++ b/addons/web_editor/static/src/scss/secondary_variables.scss
@@ -0,0 +1,37 @@
+
+//------------------------------------------------------------------------------
+// Colors
+//------------------------------------------------------------------------------
+
+// Colors
+$o-color-palette: nth($o-color-palettes, $o-color-palette-number) !default;
+@function palette-color($key) {
+    @return map-get($o-color-palette, $key);
+}
+
+// Theme colors
+$o-theme-color-palette: nth($o-theme-color-palettes, $o-theme-color-palette-number) !default;
+$-main-color: map-get($o-theme-color-palette, 'alpha');
+$-main-color-lightness: lightness($-main-color);
+$o-theme-color-palette: map-merge((
+    // alpha and beta colors are used to override primary and secondary BS4
+    // colors by default, so that theme colors affect the default Odoo layouts
+    'primary': $-main-color,
+    'secondary': map-get($o-theme-color-palette, 'beta'),
+
+    // BS light and dark colors are not used for any BS component, just
+    // for color utilities. By default, we set them to a very light and
+    // very dark version of a desaturate version of the main color
+    'light': lighten(desaturate($-main-color, 80%), min(70%, max(0%, 97% - $-main-color-lightness))), // Does not increase over 97% lightness
+    'dark': darken(desaturate($-main-color, 80%), min(70%, max(0%, $-main-color-lightness - 10%))), // Does not lower under 10% lightness
+), o-map-omit($o-theme-color-palette));
+@function palette-theme-color($key) {
+    @return map-get($o-theme-color-palette, $key);
+}
+
+// Gray colors
+$o-gray-color-palette: nth($o-gray-color-palettes, $o-gray-color-palette-number) !default;
+$o-gray-color-palette: map-merge($o-transparent-grays, $o-gray-color-palette);
+@function palette-gray($key) {
+    @return map-get($o-gray-color-palette, $key);
+}
diff --git a/addons/web_editor/views/editor.xml b/addons/web_editor/views/editor.xml
index d180831b616..ac8b3c396f3 100644
--- a/addons/web_editor/views/editor.xml
+++ b/addons/web_editor/views/editor.xml
@@ -58,6 +58,12 @@
     </xpath>
 </template>
 
+<template id="_assets_secondary_variables" inherit_id="web._assets_secondary_variables">
+    <xpath expr="//link" position="before">
+        <link rel="stylesheet" type="text/scss" href="/web_editor/static/src/scss/secondary_variables.scss"/>
+    </xpath>
+</template>
+
 <template id="assets_common" inherit_id="web.assets_common" name="Web Editor Common Assets (used in backend interface and website)">
     <xpath expr="script[last()]" position="after">
         <script type="text/javascript" src="/web_editor/static/lib/vkbeautify/vkbeautify.0.99.00.beta.js"></script>
@@ -67,7 +73,7 @@
 </template>
 
 <template id="_assets_backend_helpers" inherit_id="web._assets_backend_helpers">
-    <xpath expr="//link[last()]" position="after">
+    <xpath expr="//link" position="before">
         <link rel="stylesheet" type="text/scss" href="/web_editor/static/src/scss/bootstrap_overridden.scss"/>
     </xpath>
 </template>
@@ -83,7 +89,7 @@
 </template>
 
 <template id="_assets_frontend_helpers" inherit_id="web._assets_frontend_helpers">
-    <xpath expr="//link[last()]" position="after">
+    <xpath expr="//link" position="before">
         <link rel="stylesheet" type="text/scss" href="/web_editor/static/src/scss/bootstrap_overridden.scss"/>
     </xpath>
 </template>
diff --git a/addons/website/static/src/scss/bootstrap_overridden.scss b/addons/website/static/src/scss/bootstrap_overridden.scss
index 8c21c748fe1..fbf776ae283 100644
--- a/addons/website/static/src/scss/bootstrap_overridden.scss
+++ b/addons/website/static/src/scss/bootstrap_overridden.scss
@@ -7,27 +7,25 @@
 // depending on its contrast. Themes should be careful if they decide to
 // override those values. This would be simplified by giving the user the choice
 // for its dark *and* light text colors.
-$-light: if($white != null, $white, #FFFFFF);
-$-dark: if($gray-900 != null, $gray-900, #212529);
-$-text: if(color('text') != null, color('text'), $-dark);
-$-is-light: (o-get-most-contrast($-text, $-light, $-dark, color('body'), $cross-mix: false) == $-dark);
-$yiq-text-light: if($-is-light, color('text'), null);
-$yiq-text-dark: if($-is-light, null, color('text'));
+$-light: if(palette-gray('white') != null, palette-gray('white'), #FFFFFF);
+$-dark: if(palette-gray('900') != null, palette-gray('900'), #212529);
+$-text: if(palette-color('text') != null, palette-color('text'), $-dark);
+$-is-light: (o-get-most-contrast($-text, $-light, $-dark, palette-color('body'), $cross-mix: false) == $-dark);
+$yiq-text-light: if($-is-light, palette-color('text'), null) !default;
+$yiq-text-dark: if($-is-light, null, palette-color('text')) !default;
 
 // Body
 //
 // Settings for the `<body>` element.
 
-@if color('body') { // Do not default to bootstrap but to the portal value
-    $body-bg: color('body');
-}
-$body-color: color('text');
+$body-bg: palette-color('body') !default;
+$body-color: palette-color('text') !default;
 
 // Fonts
 //
 // Font, line-height, and color for body text, headings, and more.
 
-$font-family-sans-serif: nth($o-theme-fonts, $o-theme-font-number);
+$font-family-sans-serif: nth($o-theme-fonts, $o-theme-font-number) !default;
 
-$headings-font-family: nth($o-theme-fonts, $o-theme-headings-font-number);
-$headings-color: color('h1');
+$headings-font-family: nth($o-theme-fonts, $o-theme-headings-font-number) !default;
+$headings-color: palette-color('h1') !default;
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index ad5e297a3a2..2228d742c46 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -1,15 +1,15 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
 <!-- Assets -->
-<template id="_assets_primary_variables" inherit_id="web._assets_primary_variables">
+<template id="_assets_primary_variables" inherit_id="portal._assets_primary_variables">
     <xpath expr="//link[last()]" position="after">
         <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/primary_variables.scss"/>
         <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/colors/user_color_palette.scss"/>
         <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/colors/user_theme_color_palette.scss"/>
     </xpath>
 </template>
-<template id="_assets_secondary_variables" inherit_id="web._assets_secondary_variables">
-    <xpath expr="//link[last()]" position="after">
+<template id="_assets_secondary_variables" inherit_id="web_editor._assets_secondary_variables">
+    <xpath expr="//link" position="before">
         <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/secondary_variables.scss"/>
     </xpath>
 </template>
@@ -31,13 +31,13 @@
     </xpath>
 </template>
 
-<template id="_assets_frontend_helpers" inherit_id="web._assets_frontend_helpers">
-    <xpath expr="//link[last()]" position="after">
+<template id="_assets_frontend_helpers" inherit_id="portal._assets_frontend_helpers">
+    <xpath expr="//link" position="before">
         <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/bootstrap_overridden.scss"/>
     </xpath>
 </template>
 
-<template id="assets_frontend" inherit_id="web.assets_frontend" name="Website Assets">
+<template id="assets_frontend" inherit_id="portal.assets_frontend" name="Website Assets">
     <xpath expr="//link[last()]" position="after">
         <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/website.scss"/>
         <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/website.ui.scss"/>