From 6e4db7d13a926845bf82f5b035afede42d6d5a89 Mon Sep 17 00:00:00 2001
From: qsm-odoo <qsm@odoo.com>
Date: Mon, 12 Mar 2018 16:24:31 +0100
Subject: [PATCH] [REF] *: review scss variables handling

Unlike LESS, SCSS variables are not lazy loaded. Our system has thus
to be updated. This commit creates new templates which are t-called
in assets bundles (to replace the old less_helpers template):

- web._assets_utils: regroups the mixins and functions which *can*
  (and so should) be available in every asset bundle

- web._assets_primary_variables: regroups the variables (or mixins
  used as variables) which *can* (and so should) be available in
  every asset bundle

- web._assets_secondary_variables: same as above but provides an
  environnement where all the 'primary' ones are accessible. This is
  for example useful to handle the community/enterprise split:

  // Community primary variables
  $o-pink-color: pink; // enterprise color
  $o-brand-primary: blue;

  // Enterprise primary variables
  $o-brand-primary: $o-pink-color;

  // Community secondary variables
  $o-my-darker-primary: darken($o-brand-primary, 5%);

  => If there was only one variable template, enterprise edition would
     have been able to define its primary color at the end but the
     darker primary would not have been updated. Using the "!default"
     system and putting enterprise definition above would not have
     solved the problem as the $o-pink-color would not have been
     accessible.

- web._assets_backend_helpers: regroups the variables, mixins and
  functions which *can* (and so should) be available in the backend
  asset bundle only. This is especially (only?) useful for bootstrap
  variables overriddes.

- web._assets_frontend_helpers: regroups the variables, mixins and
  functions which *can* (and so should) be available in the frontend
  asset bundle only. This is especially (only?) useful for bootstrap
  variables overriddes.

Note: bootstrap variables are not accessible in any of those anymore.
If you have variables that should depend on bootstrap, you have 3
solutions:

- Find another way: your variable is probably useless, use bootstrap
  variables directly or create a variable that will influence the
  value of bootstrap variables. E.g. instead of declaring:
  `$myvar: $bootstrapvar * 3`
  and using $myvar alone, declare:
  `$myvar: 3` and use `$myvar * $bootstrapvar` where needed.

- Declare a copy of the bootstrap variable and use that one. In that
  case, you should also force-set the real bootstrap one to be sure
  they match (this should be done in appropriate templates mentioned
  above). E.g.
  ```
  $o-boostrapvar: 5;
  ...
  $boostrapvar: $o-bootstrapvar;
  ```

- Set your variable to null and set it to your bootstrap expression
  in the file you will need it (where bootstrap variables are accessible)
  without forgetting to add the !default flag to allow overriddes.
  ```
  $myvar: null;
  ...
  $myvar: $bootstrapvar * 5 !default;
  ```

This commit also partly changes the variable names to follow the
convention:
$o-<app_id>-<name> where 'app_id' is the current's app name or a
meaningful unique identifier ("theme" for all themes for example, as
no multiple themes can be installed).
---
 .../static/src/scss/account_dashboard.scss    |  10 +-
 .../src/scss/account_journal_dashboard.scss   |  22 +-
 .../src/scss/account_reconciliation.scss      |  28 +-
 addons/account/static/src/scss/variables.scss |   5 +
 addons/account/views/account.xml              |   6 +
 addons/calendar/static/src/scss/calendar.scss |   4 +-
 addons/event/static/src/scss/event.scss       |   2 +-
 .../static/src/scss/google_calendar.scss      |   2 +-
 .../static/src/scss/hr_attendance.scss        |   2 +-
 .../static/src/scss/hr_org_chart.scss         |  88 ++---
 .../static/src/scss/variables.scss            |  14 +
 addons/hr_org_chart/views/hr_templates.xml    |   6 +
 .../static/src/scss/copy_clipboard.scss       |   2 +-
 .../src/scss/im_livechat_bootstrap.scss       |  11 +-
 .../views/im_livechat_channel_templates.xml   |   1 -
 addons/lunch/static/src/scss/lunch.scss       |   2 +-
 addons/mail/static/src/scss/chat_window.scss  |  25 +-
 addons/mail/static/src/scss/chatter.scss      |   8 +-
 addons/mail/static/src/scss/composer.scss     |  14 +-
 addons/mail/static/src/scss/discuss.scss      |  45 ++-
 .../static/src/scss/extended_chat_window.scss |   2 +-
 addons/mail/static/src/scss/followers.scss    |   8 +-
 .../mail/static/src/scss/mail_activity.scss   |   4 +-
 addons/mail/static/src/scss/systray.scss      |  10 +-
 addons/mail/static/src/scss/thread.scss       |  20 +-
 addons/mail/static/src/scss/variables.scss    |  17 +-
 addons/mail/views/mail_templates.xml          |   7 +-
 .../static/src/scss/mass_mailing.ui.scss      |  14 +-
 .../mrp/static/src/scss/mrp_bom_report.scss   |   2 +-
 addons/portal/static/src/scss/portal.scss     |   2 +-
 .../static/src/scss/project_dashboard.scss    |   2 +-
 .../static/src/scss/sale_timesheet.scss       |   6 +-
 .../static/src/scss/sales_team_dashboard.scss |   5 +-
 .../src/scss/stock_traceability_report.scss   |   6 +-
 addons/survey/views/survey_templates.xml      |   3 +-
 addons/web/static/src/scss/base_settings.scss |  20 +-
 .../static/src/scss/bootstrap_overridden.scss | 118 ++-----
 .../scss/bootstrap_overridden_frontend.scss   |   0
 addons/web/static/src/scss/control_panel.scss |   9 +-
 addons/web/static/src/scss/data_export.scss   |   6 +-
 addons/web/static/src/scss/datepicker.scss    |  14 +-
 .../web/static/src/scss/domain_selector.scss  |   6 +-
 addons/web/static/src/scss/dropdown.scss      |   8 +-
 .../web/static/src/scss/dropdown_extra.scss   |   7 +-
 addons/web/static/src/scss/fields.scss        |  36 +-
 addons/web/static/src/scss/fields_extra.scss  |   2 +-
 addons/web/static/src/scss/form_view.scss     |  78 ++---
 .../web/static/src/scss/form_view_extra.scss  |  12 +-
 addons/web/static/src/scss/graph_view.scss    |   2 +-
 .../src/scss/kanban_column_progressbar.scss   |   7 +-
 .../web/static/src/scss/kanban_dashboard.scss | 173 ----------
 .../src/scss/kanban_examples_dialog.scss      |   6 +-
 addons/web/static/src/scss/kanban_view.scss   |   6 +-
 .../static/src/scss/kanban_view_mobile.scss   |   4 +-
 .../static/src/scss/layout_background.scss    |  12 +-
 addons/web/static/src/scss/layout_clean.scss  |  18 +-
 addons/web/static/src/scss/list_view.scss     |  19 +-
 .../static/src/scss/model_field_selector.scss |   4 +-
 addons/web/static/src/scss/navbar.scss        |  46 +--
 addons/web/static/src/scss/pivot_view.scss    |  10 +-
 .../static/src/scss/primary_variables.scss    |  92 +++++
 addons/web/static/src/scss/progress_bar.scss  |   6 +-
 addons/web/static/src/scss/rainbow.scss       |  12 +-
 addons/web/static/src/scss/search_view.scss   |   6 +-
 .../static/src/scss/search_view_extra.scss    |   4 +-
 .../static/src/scss/secondary_variables.scss  |  43 +++
 addons/web/static/src/scss/tooltip.scss       |  16 +-
 addons/web/static/src/scss/utils.scss         | 322 ++++++++++++++----
 addons/web/static/src/scss/variables.scss     |  82 -----
 addons/web/static/src/scss/views.scss         |   4 +-
 addons/web/static/src/scss/web_calendar.scss  |  48 ++-
 addons/web/static/src/scss/webclient.scss     |  12 +-
 .../web/static/src/scss/webclient_extra.scss  |   9 +-
 .../web/static/src/scss/webclient_layout.scss |  13 +-
 addons/web/views/webclient_templates.xml      |  48 ++-
 .../static/src/scss/web_editor.common.scss    |  35 --
 .../static/src/scss/web_editor.ui.scss        | 161 ++++-----
 .../static/src/scss/web_editor.variables.scss |  97 ++++--
 addons/web_editor/views/editor.xml            |   4 +-
 .../static/src/scss/dashboard.scss            |   2 +-
 addons/web_tour/static/src/scss/tip.scss      |   2 +-
 .../static/src/scss/website.backend.scss      |  52 +--
 .../static/src/scss/website.edit_mode.scss    |   2 +-
 addons/website/static/src/scss/website.scss   |   2 +-
 .../website/static/src/scss/website.ui.scss   |  18 +-
 addons/website/views/website_templates.xml    |   2 +-
 .../views/website_livechat.xml                |   1 -
 .../static/src/scss/website_quotation.scss    |   2 +-
 .../static/src/scss/website_rating.scss       |   6 +-
 .../static/src/scss/website_sale.scss         |   2 +-
 .../src/scss/website_sale_dashboard.scss      |  10 +-
 .../static/src/scss/website_slides.scss       |  25 +-
 .../src/scss/website_theme_install.scss       |   8 +-
 93 files changed, 1095 insertions(+), 1081 deletions(-)
 create mode 100644 addons/account/static/src/scss/variables.scss
 create mode 100644 addons/hr_org_chart/static/src/scss/variables.scss
 create mode 100644 addons/web/static/src/scss/bootstrap_overridden_frontend.scss
 create mode 100644 addons/web/static/src/scss/primary_variables.scss
 create mode 100644 addons/web/static/src/scss/secondary_variables.scss
 delete mode 100644 addons/web/static/src/scss/variables.scss

diff --git a/addons/account/static/src/scss/account_dashboard.scss b/addons/account/static/src/scss/account_dashboard.scss
index de562759e11..938bc058af2 100644
--- a/addons/account/static/src/scss/account_dashboard.scss
+++ b/addons/account/static/src/scss/account_dashboard.scss
@@ -1,7 +1,7 @@
 .o_kanban_view.o_kanban_dashboard.o_account_kanban {
 
     &.o_kanban_ungrouped .o_account_dashboard_header {
-        margin: (0 - $o-kanban-record-margin) ($o-kanban-record-margin - $odoo-horizontal-padding) $o-kanban-record-margin;
+        margin: (0 - $o-kanban-record-margin) ($o-kanban-record-margin - $o-horizontal-padding) $o-kanban-record-margin;
     }
 
     .o_account_dashboard_header {
@@ -11,10 +11,10 @@
         width: 100%;
         height: auto; // cancel o_form_view height 100%, which hides the help tip message at the bottom of the screen
         min-height: 0%; // cancel o_form_view min-height 100%, which hides the help tip message at the bottom of the screen
-        background-color: $odoo-view-background-color;
+        background-color: $o-view-background-color;
 
         .o_form_statusbar {
-            padding-right: $odoo-horizontal-padding;
+            padding-right: $o-horizontal-padding;
         }
 
         h4 {
@@ -52,8 +52,8 @@
             }
 
             &:last-of-type {
-                margin-left: $odoo-horizontal-padding;
-                padding-left: $odoo-horizontal-padding*.5;
+                margin-left: $o-horizontal-padding;
+                padding-left: $o-horizontal-padding*.5;
                 border-left: 1px solid $gray-lighter-dark;
             }
         }
diff --git a/addons/account/static/src/scss/account_journal_dashboard.scss b/addons/account/static/src/scss/account_journal_dashboard.scss
index e068040784d..1b87a6363a6 100644
--- a/addons/account/static/src/scss/account_journal_dashboard.scss
+++ b/addons/account/static/src/scss/account_journal_dashboard.scss
@@ -6,17 +6,17 @@
         }
 
         .o_kanban_card_settings {
-            padding-top: $odoo-horizontal-padding/2;
-            padding-bottom: $odoo-horizontal-padding/2;
+            padding-top: $o-horizontal-padding/2;
+            padding-bottom: $o-horizontal-padding/2;
 
             border-top: 1px solid;
-            border-color: $odoo-brand-lightsecondary;
+            border-color: $o-brand-lightsecondary;
         }
         .o_dashboard_star {
             font-size: 12px;
 
             &.fa-star-o {
-                color: $odoo-main-color-muted;
+                color: $o-main-color-muted;
                 &:hover {
                     color: gold;
                 }
@@ -27,7 +27,7 @@
         }
 
         .o_dashboard_graph {
-            margin-bottom: -$odoo-horizontal-padding/2;
+            margin-bottom: -$o-horizontal-padding/2;
         }
     }
 
@@ -58,7 +58,7 @@
                 }
                 g.tick.major {
                     // Don't know why, but leads to strange bold text
-                    // stroke: $odoo-brand-primary;
+                    // stroke: $o-brand-primary;
 
                     line {
                         display: none;
@@ -72,13 +72,13 @@
             g.nv-linesWrap {
                 g.nv-group.nv-series-0 {
                     fill-opacity: 0.3 !important;
-                    fill: $odoo-brand-primary !important;
-                    stroke: $odoo-brand-primary !important;
+                    fill: $o-brand-primary !important;
+                    stroke: $o-brand-primary !important;
 
                     .nv-point {
                         visibility: hidden;
                         r: 3;
-                        stroke: $odoo-brand-primary !important;
+                        stroke: $o-brand-primary !important;
                         fill: white;
                         stroke-width: 2;
                     }
@@ -99,11 +99,11 @@
                 g.nv-group.nv-series-0 {
                     g.past {
                         opacity: 0.5;
-                        fill: $odoo-brand-primary !important;
+                        fill: $o-brand-primary !important;
                     }
                     g.future {
                         opacity: 0.5;
-                        fill: $odoo-brand-optional !important;
+                        fill: $o-brand-optional !important;
                     }
                 }
             }
diff --git a/addons/account/static/src/scss/account_reconciliation.scss b/addons/account/static/src/scss/account_reconciliation.scss
index 5d3e8ec3810..204337c5808 100644
--- a/addons/account/static/src/scss/account_reconciliation.scss
+++ b/addons/account/static/src/scss/account_reconciliation.scss
@@ -1,11 +1,3 @@
-$actionColWidth: 15px;
-$mainTableBordersPadding: 3px;
-$lightBorder: 1px solid #bbb;
-$accountingBorder: 1px solid #000;
-$initialLineBackground: #f0f0f0;
-$infoColor: #44c;
-
-
 .o_reconciliation {
     h1 {
         width: 48%;
@@ -18,7 +10,7 @@ $infoColor: #44c;
         &.statement_name {
             @include o-text-overflow;
             &.editable:hover {
-                outline: 1px dashed $odoo-brand-optional;
+                outline: 1px dashed $o-brand-optional;
                 outline-offset: -1px;
                 cursor: pointer;
             }
@@ -51,7 +43,7 @@ $infoColor: #44c;
     .o_view_noreconciliation {
         max-width: none;
         padding: 0 10%;
-        color: $odoo-main-color-muted;
+        color: $o-main-color-muted;
         font-size: 125%;
     }
 
@@ -110,16 +102,16 @@ $infoColor: #44c;
             cursor: pointer;
         }
         tr.already_reconciled {
-            color: $infoColor;
+            color: $o-account-info-color;
         }
         tr.invalid {
             text-decoration: line-through;
         }
         thead td {
-            border-top: $lightBorder;
+            border-top: $o-account-light-border;
             padding-top: 4px;
             padding-bottom: 5px;
-            background-color: $initialLineBackground;
+            background-color: $o-account-initial-line-background;
         }
         tfoot td {
             color: #bbb;
@@ -182,7 +174,7 @@ $infoColor: #44c;
             td {
                 padding-top: 10px;
                 text-align: center;
-                color: $infoColor;
+                color: $o-account-info-color;
             }
         }
 
@@ -231,7 +223,7 @@ $infoColor: #44c;
             content: "\f067";
         }
         .match_controls {
-            padding: 0 0 5px ($actionColWidth+$mainTableBordersPadding);
+            padding: 0 0 5px ($o-account-action-col-width+$o-account-main-table-borders-padding);
 
             .filter {
                 width: 240px;
@@ -254,7 +246,7 @@ $infoColor: #44c;
         }
         .show_more {
             display: inline-block;
-            margin-left: ($actionColWidth+$mainTableBordersPadding);
+            margin-left: ($o-account-action-col-width+$o-account-main-table-borders-padding);
             margin-top: 5px;
         }
     }
@@ -262,7 +254,7 @@ $infoColor: #44c;
     /* Create view */
     .create {
         > div {
-            margin: 0 $actionColWidth;
+            margin: 0 $o-account-action-col-width;
             padding: 10px;
             overflow: auto;
             border: 1px solid #ddd;
@@ -294,7 +286,7 @@ $infoColor: #44c;
         .add_line_container {
             text-align: center;
             clear: both;
-            color: $infoColor;
+            color: $o-account-info-color;
             cursor: pointer;
         }
     }
diff --git a/addons/account/static/src/scss/variables.scss b/addons/account/static/src/scss/variables.scss
new file mode 100644
index 00000000000..b83890b01a1
--- /dev/null
+++ b/addons/account/static/src/scss/variables.scss
@@ -0,0 +1,5 @@
+$o-account-action-col-width: 15px !default;
+$o-account-main-table-borders-padding: 3px !default;
+$o-account-light-border: 1px solid #bbb !default;
+$o-account-initial-line-background: #f0f0f0 !default;
+$o-account-info-color: #44c !default;
diff --git a/addons/account/views/account.xml b/addons/account/views/account.xml
index 45ca15f14bd..d8153c82871 100644
--- a/addons/account/views/account.xml
+++ b/addons/account/views/account.xml
@@ -1,5 +1,11 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
+    <template id="_assets_backend_helpers" inherit_id="web._assets_backend_helpers">
+        <xpath expr="//link" position="before">
+            <link rel="stylesheet" type="text/scss" href="/account/static/src/scss/variables.scss"/>
+        </xpath>
+    </template>
+
     <template id="assets_backend" name="account assets" inherit_id="web.assets_backend">
         <xpath expr="." position="inside">
             <link rel="stylesheet" href="/account/static/src/css/account_bank_and_cash.css"/>
diff --git a/addons/calendar/static/src/scss/calendar.scss b/addons/calendar/static/src/scss/calendar.scss
index defbd1efbd6..a74eec477db 100644
--- a/addons/calendar/static/src/scss/calendar.scss
+++ b/addons/calendar/static/src/scss/calendar.scss
@@ -9,7 +9,7 @@
     }
 
     &.needsAction {
-        background-color: $odoo-brand-secondary;
+        background-color: $o-brand-secondary;
     }
 
     &.declined {
@@ -46,7 +46,7 @@
     width: 50%;
     margin: 30px auto 0;
     @include o-webclient-padding($top: 10px, $bottom: 10px);
-    background-color: $odoo-view-background-color;
+    background-color: $o-view-background-color;
 
     .o_logo {
         width: 15%;
diff --git a/addons/event/static/src/scss/event.scss b/addons/event/static/src/scss/event.scss
index df173a9ab70..46cf2e629cc 100644
--- a/addons/event/static/src/scss/event.scss
+++ b/addons/event/static/src/scss/event.scss
@@ -10,7 +10,7 @@
             @include o-flex(1, 1, 25%);
             text-align: center;
             color: white;
-            background-color: $odoo-brand-optional;
+            background-color: $o-brand-optional;
             padding: 8px;
 
             .o_day {
diff --git a/addons/google_calendar/static/src/scss/google_calendar.scss b/addons/google_calendar/static/src/scss/google_calendar.scss
index 2f7346ec29c..1ee8feef473 100644
--- a/addons/google_calendar/static/src/scss/google_calendar.scss
+++ b/addons/google_calendar/static/src/scss/google_calendar.scss
@@ -8,5 +8,5 @@
 
 img.calendar_img_tuto {
     margin: 0 0 10px 50px;
-    border: 2px solid $odoo-brand-secondary;
+    border: 2px solid $o-brand-secondary;
 }
diff --git a/addons/hr_attendance/static/src/scss/hr_attendance.scss b/addons/hr_attendance/static/src/scss/hr_attendance.scss
index 8473920ea65..d54b105ca1c 100644
--- a/addons/hr_attendance/static/src/scss/hr_attendance.scss
+++ b/addons/hr_attendance/static/src/scss/hr_attendance.scss
@@ -14,7 +14,7 @@
 }
 
 #oe_hr_attendance_status {
-    color: $odoo-brand-secondary;
+    color: $o-brand-secondary;
     &.oe_hr_attendance_status_green {
         color: $brand-success;
     }
diff --git a/addons/hr_org_chart/static/src/scss/hr_org_chart.scss b/addons/hr_org_chart/static/src/scss/hr_org_chart.scss
index c1b2f4b7d51..e211654d5e0 100644
--- a/addons/hr_org_chart/static/src/scss/hr_org_chart.scss
+++ b/addons/hr_org_chart/static/src/scss/hr_org_chart.scss
@@ -1,26 +1,10 @@
-$o-org-chart-bg: white;
-$o-org-chart-border-color: $odoo-brand-secondary;
-
-$o-org-chart-entry-v-gap: 6px;
-$o-org-chart-entry-pic-size: 46px;
-$o-org-chart-entry-line-w: 1px;
-$o-org-chart-entry-border-color: darken($o-org-chart-bg, 25%);
-
-
-// MIXINS
-@mixin o-org-chart-line {
-    content: '';
-    background-color: $o-org-chart-bg;
-    border: 0px solid $o-org-chart-entry-border-color;
-}
-
 // MOBILE LAYOUT CUSTOMIZATIONS
 @media screen and (max-width: $screen-xs-max) {
     #o_employee_right {
         .o_org_chart_title {
             font-size: 20px;
             padding: 5px 0;
-            border-bottom: 1px solid $o-org-chart-border-color;
+            border-bottom: 1px solid $o-hr-org-chart-border-color;
         }
     }
 }
@@ -38,7 +22,7 @@ $o-org-chart-entry-border-color: darken($o-org-chart-bg, 25%);
         @include o-flex(0, 1, 35%);
         margin-left: 2%;
         padding-left: 2%;
-        border-left: 1px solid $o-org-chart-border-color;
+        border-left: 1px solid $o-hr-org-chart-border-color;
 
         .o_org_chart_title {
             color: $gray-light
@@ -61,7 +45,7 @@ $o-org-chart-entry-border-color: darken($o-org-chart-bg, 25%);
 }
 
 #o_employee_right {
-    $tmp-gap-base: $o-org-chart-entry-pic-size*0.7;
+    $tmp-gap-base: $o-hr-org-chart-entry-pic-size*0.7;
 
     // ORGANIGRAM LINES
     .o_field_widget, .o_org_chart_group_up, .o_org_chart_group_down {
@@ -70,21 +54,21 @@ $o-org-chart-entry-border-color: darken($o-org-chart-bg, 25%);
 
     .o_org_chart_group_up {
         &:before {
-            @include o-org-chart-line;
-            border-left-width: $o-org-chart-entry-line-w;
-            height: calc(100% + #{$o-org-chart-entry-pic-size*0.5}) ;
+            @include o-hr-org-chart-line;
+            border-left-width: $o-hr-org-chart-entry-line-w;
+            height: calc(100% + #{$o-hr-org-chart-entry-pic-size*0.5}) ;
             @include o-position-absolute(
-                $top: $o-org-chart-entry-pic-size*0.1 + 5px,
-                $left: $o-org-chart-entry-pic-size*0.5 - $o-org-chart-entry-line-w*0.5
+                $top: $o-hr-org-chart-entry-pic-size*0.1 + 5px,
+                $left: $o-hr-org-chart-entry-pic-size*0.5 - $o-hr-org-chart-entry-line-w*0.5
             );
         }
         .o_org_chart_entry:last-of-type {
             &:before {
-                @include o-org-chart-line;
-                border-width: 0 0 $o-org-chart-entry-line-w $o-org-chart-entry-line-w;
-                @include size(($o-org-chart-entry-pic-size*0.5) - ($o-org-chart-entry-v-gap*2), $o-org-chart-entry-pic-size*0.5 + $o-org-chart-entry-v-gap*2 );
+                @include o-hr-org-chart-line;
+                border-width: 0 0 $o-hr-org-chart-entry-line-w $o-hr-org-chart-entry-line-w;
+                @include size(($o-hr-org-chart-entry-pic-size*0.5) - ($o-hr-org-chart-entry-v-gap*2), $o-hr-org-chart-entry-pic-size*0.5 + $o-hr-org-chart-entry-v-gap*2 );
                 @include o-position-absolute(
-                    $left: $o-org-chart-entry-pic-size*0.5 - $o-org-chart-entry-line-w*0.5,
+                    $left: $o-hr-org-chart-entry-pic-size*0.5 - $o-hr-org-chart-entry-line-w*0.5,
                     $top: 100%
                 );
             }
@@ -103,23 +87,23 @@ $o-org-chart-entry-border-color: darken($o-org-chart-bg, 25%);
         margin-left: $tmp-gap-base;
 
         &:before {
-            @include o-org-chart-line;
-            border-left-width: $o-org-chart-entry-line-w;
+            @include o-hr-org-chart-line;
+            border-left-width: $o-hr-org-chart-entry-line-w;
             height: 100%;
             @include o-position-absolute(
-                $top: $o-org-chart-entry-v-gap*-1,
-                $left: $tmp-gap-base*-0.5 + $o-org-chart-entry-pic-size*0.1 + $o-org-chart-entry-line-w*0.5
+                $top: $o-hr-org-chart-entry-v-gap*-1,
+                $left: $tmp-gap-base*-0.5 + $o-hr-org-chart-entry-pic-size*0.1 + $o-hr-org-chart-entry-line-w*0.5
             );
         }
 
         .o_org_chart_entry {
             &:before {
-                @include o-org-chart-line;
-                border-top-width:  $o-org-chart-entry-line-w;
+                @include o-hr-org-chart-line;
+                border-top-width:  $o-hr-org-chart-entry-line-w;
                 @include size($tmp-gap-base, 0);
                 @include o-position-absolute(
-                    $left: $tmp-gap-base*-0.5 + $o-org-chart-entry-pic-size*0.1 + $o-org-chart-entry-line-w*0.5,
-                    $top: $o-org-chart-entry-pic-size*0.5
+                    $left: $tmp-gap-base*-0.5 + $o-hr-org-chart-entry-pic-size*0.1 + $o-hr-org-chart-entry-line-w*0.5,
+                    $top: $o-hr-org-chart-entry-pic-size*0.5
                 );
             }
 
@@ -131,7 +115,7 @@ $o-org-chart-entry-border-color: darken($o-org-chart-bg, 25%);
             }
 
             &.o_org_chart_more {
-                margin-top: $o-org-chart-entry-v-gap;
+                margin-top: $o-hr-org-chart-entry-v-gap;
 
                 &:before {
                     top: 15px;
@@ -142,7 +126,7 @@ $o-org-chart-entry-border-color: darken($o-org-chart-bg, 25%);
 
     // ORGANIGRAM DESIGN
     .o_org_chart_entry {
-        margin-bottom: $o-org-chart-entry-v-gap;
+        margin-bottom: $o-hr-org-chart-entry-v-gap;
         overflow: visible;
         margin-top: 0;
 
@@ -158,11 +142,11 @@ $o-org-chart-entry-border-color: darken($o-org-chart-bg, 25%);
                 cursor: pointer;
                 margin-right: 5px;
                 color: $gray-light;
-                background: $o-org-chart-bg;
+                background: $o-hr-org-chart-bg;
                 border: 1px solid $gray-light;
                 &:hover {
-                    color: $odoo-brand-optional;
-                    border-color: $odoo-brand-optional;
+                    color: $o-brand-optional;
+                    border-color: $o-brand-optional;
                 }
                 &:focus {
                     outline: none;
@@ -178,9 +162,9 @@ $o-org-chart-entry-border-color: darken($o-org-chart-bg, 25%);
         }
 
         .media-object {
-            @include square($o-org-chart-entry-pic-size*0.8);
-            margin: $o-org-chart-entry-pic-size*0.1;
-            box-shadow: 0 0 0 $o-org-chart-entry-line-w darken($o-org-chart-bg, 20%);
+            @include square($o-hr-org-chart-entry-pic-size*0.8);
+            margin: $o-hr-org-chart-entry-pic-size*0.1;
+            box-shadow: 0 0 0 $o-hr-org-chart-entry-line-w darken($o-hr-org-chart-bg, 20%);
             background-size: cover;
             background-position: center center;
 
@@ -197,8 +181,8 @@ $o-org-chart-entry-border-color: darken($o-org-chart-bg, 25%);
                 }
 
                 &:hover {
-                    border-color: $o-org-chart-entry-border-color;
-                    color:$odoo-brand-optional;
+                    border-color: $o-hr-org-chart-entry-border-color;
+                    color:$o-brand-optional;
                 }
             }
         }
@@ -220,11 +204,11 @@ $o-org-chart-entry-border-color: darken($o-org-chart-bg, 25%);
 
             &:hover {
                 .media-object {
-                    box-shadow: 0 0 0 $o-org-chart-entry-line-w*2 rgba($odoo-brand-optional, 0.6);
+                    box-shadow: 0 0 0 $o-hr-org-chart-entry-line-w*2 rgba($o-brand-optional, 0.6);
                 }
                 .media-body > a {
                     .media-heading {
-                        color: $odoo-brand-optional;
+                        color: $o-brand-optional;
                     }
                     strong {
                         color: lighten($gray-light, 5%);
@@ -235,7 +219,7 @@ $o-org-chart-entry-border-color: darken($o-org-chart-bg, 25%);
 
         &.o_org_chart_entry_self {
             &:not(:first-child) {
-                margin-top: $o-org-chart-entry-v-gap*1.5;
+                margin-top: $o-hr-org-chart-entry-v-gap*1.5;
             }
 
             strong {
@@ -243,10 +227,10 @@ $o-org-chart-entry-border-color: darken($o-org-chart-bg, 25%);
             }
 
             .media-object {
-                @include square($o-org-chart-entry-pic-size);
+                @include square($o-hr-org-chart-entry-pic-size);
                 margin: 0;
-                border: $o-org-chart-entry-line-w*2 solid $odoo-brand-optional;
-                box-shadow: inset 0 0 0 $o-org-chart-entry-line-w*2 white;
+                border: $o-hr-org-chart-entry-line-w*2 solid $o-brand-optional;
+                box-shadow: inset 0 0 0 $o-hr-org-chart-entry-line-w*2 white;
             }
 
             .media-body {
diff --git a/addons/hr_org_chart/static/src/scss/variables.scss b/addons/hr_org_chart/static/src/scss/variables.scss
new file mode 100644
index 00000000000..9abf85776b3
--- /dev/null
+++ b/addons/hr_org_chart/static/src/scss/variables.scss
@@ -0,0 +1,14 @@
+$o-hr-org-chart-bg: white !default;
+$o-hr-org-chart-border-color: $o-brand-secondary !default;
+
+$o-hr-org-chart-entry-v-gap: 6px !default;
+$o-hr-org-chart-entry-pic-size: 46px !default;
+$o-hr-org-chart-entry-line-w: 1px !default;
+$o-hr-org-chart-entry-border-color: darken($o-hr-org-chart-bg, 25%) !default;
+
+// MIXINS
+@mixin o-hr-org-chart-line {
+    content: '';
+    background-color: $o-hr-org-chart-bg;
+    border: 0px solid $o-hr-org-chart-entry-border-color;
+}
diff --git a/addons/hr_org_chart/views/hr_templates.xml b/addons/hr_org_chart/views/hr_templates.xml
index 50b6087e4ec..b7ed3215ae8 100644
--- a/addons/hr_org_chart/views/hr_templates.xml
+++ b/addons/hr_org_chart/views/hr_templates.xml
@@ -1,5 +1,11 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
+    <template id="_assets_backend_helpers" inherit_id="web._assets_backend_helpers">
+        <xpath expr="//link" position="before">
+            <link rel="stylesheet" type="text/scss" href="/hr_org_chart/static/src/scss/variables.scss"/>
+        </xpath>
+    </template>
+
     <template id="assets_backend" name="hr_org_chart_assets_backend" inherit_id="web.assets_backend">
         <xpath expr="." position="inside">
             <link rel="stylesheet" type="text/scss" href="/hr_org_chart/static/src/scss/hr_org_chart.scss"/>
diff --git a/addons/im_livechat/static/src/scss/copy_clipboard.scss b/addons/im_livechat/static/src/scss/copy_clipboard.scss
index db206941685..13bbef7b256 100644
--- a/addons/im_livechat/static/src/scss/copy_clipboard.scss
+++ b/addons/im_livechat/static/src/scss/copy_clipboard.scss
@@ -4,7 +4,7 @@
     border-radius: 5px;
     border: 1px solid $btn-primary-border;
     font-size: $font-size-small;
-    color: $odoo-brand-optional;
+    color: $o-brand-optional;
     font-weight: $badge-font-weight;
     text-align: center;
     .o_clipboard_button {
diff --git a/addons/im_livechat/static/src/scss/im_livechat_bootstrap.scss b/addons/im_livechat/static/src/scss/im_livechat_bootstrap.scss
index b9d31dc05b8..18ab6c31ef8 100644
--- a/addons/im_livechat/static/src/scss/im_livechat_bootstrap.scss
+++ b/addons/im_livechat/static/src/scss/im_livechat_bootstrap.scss
@@ -1,16 +1,7 @@
-// bootstrap variables and vendor prefixes needed to embed im_livechat in external pages
-$gray-light:    lighten(#000, 46.7%); // #777
-$gray-lighter:  lighten(#000, 93.5%); // #eee
-$screen-xs-max: 767px;
-$navbar-height: 44px;
+
 .text-muted {
   color: $gray-light;
 }
-@mixin box-sizing($boxmodel) {
-  -webkit-box-sizing: $boxmodel;
-     -moz-box-sizing: $boxmodel;
-          box-sizing: $boxmodel;
-}
 
 .o_chat_window {
   &,* {
diff --git a/addons/im_livechat/views/im_livechat_channel_templates.xml b/addons/im_livechat/views/im_livechat_channel_templates.xml
index 54c7c7319f2..e85293c943a 100644
--- a/addons/im_livechat/views/im_livechat_channel_templates.xml
+++ b/addons/im_livechat/views/im_livechat_channel_templates.xml
@@ -149,7 +149,6 @@
             <script type="text/javascript" src="/mail/static/src/js/document_viewer.js"></script>
             <script type="text/javascript" src="/im_livechat/static/src/js/im_livechat.js"></script>
             <t t-call="web._assets_helpers"/>
-            <link rel="stylesheet" type="text/scss" href="/mail/static/src/scss/variables.scss"></link>
             <link rel="stylesheet" type="text/scss" href="/im_livechat/static/src/scss/im_livechat_bootstrap.scss"/>
             <link rel="stylesheet" type="text/scss" href="/mail/static/src/scss/chat_window.scss"></link>
             <link rel="stylesheet" type="text/scss" href="/mail/static/src/scss/thread.scss"></link>
diff --git a/addons/lunch/static/src/scss/lunch.scss b/addons/lunch/static/src/scss/lunch.scss
index 2e4fc9b22a5..9e36f20dbd8 100644
--- a/addons/lunch/static/src/scss/lunch.scss
+++ b/addons/lunch/static/src/scss/lunch.scss
@@ -7,7 +7,7 @@
             padding: 5px 0;
 
             + .o_lunch_vignette {
-                border-top: 1px solid $odoo-brand-lightsecondary;
+                border-top: 1px solid $o-brand-lightsecondary;
             }
         }
     }
diff --git a/addons/mail/static/src/scss/chat_window.scss b/addons/mail/static/src/scss/chat_window.scss
index 8d43b2b9013..93ab8248b6b 100644
--- a/addons/mail/static/src/scss/chat_window.scss
+++ b/addons/mail/static/src/scss/chat_window.scss
@@ -1,22 +1,17 @@
-$o-chat-window-bg: #FAFAFA;
-$o-chat-window-width: 325px;
-$o-mail-chatter-gap: 10px; // has to be defined here as this file is both in
-                           // backend and other assets (livechat)
-$o-chat-header-height: 46px;
-$o-chat-window-zindex: $zindex-modal + 1;
+$o-mail-chat-window-zindex: $zindex-modal + 1 !default;
 
 .o_chat_window {
     @include o-flex-display;
     @include o-flex-flow(column, nowrap);
     position: fixed;
-    width: $o-chat-window-width;
+    width: $o-mail-chat-window-width;
     max-width: 100%;
     height: 400px;
     max-height: 100%;
     font-size: 12px;
-    background-color: $o-chat-window-bg;
+    background-color: $o-mail-chat-window-bg;
     border-radius: 6px 6px 0 0;
-    z-index: $o-chat-window-zindex;
+    z-index: $o-mail-chat-window-zindex;
     box-shadow: -5px -5px 10px rgba(black, 0.18);
 
     @media (max-width: $screen-xs-max) {
@@ -39,11 +34,11 @@ $o-chat-window-zindex: $zindex-modal + 1;
         padding: $o-mail-chatter-gap*0.5 $o-mail-chatter-gap;
         border-radius: 3px 3px 0 0;
         border-bottom: 1px solid $gray-lighter-dark;
-        background-color: $odoo-brand-primary;
+        background-color: $o-brand-primary;
         padding: 8px;
 
         @media (max-width: $screen-xs-max) {
-            height: $o-chat-header-height;
+            height: $o-mail-chat-header-height;
             padding-top: 12px;
             border-radius: 0px;
             .o_chat_title {
@@ -82,7 +77,7 @@ $o-chat-window-zindex: $zindex-modal + 1;
         .o_thread_date_separator {
             margin: 0px 0px 15px 0px;
             .o_thread_date {
-                background-color: $o-chat-window-bg;
+                background-color: $o-mail-chat-window-bg;
             }
         }
         .o_thread_message {
@@ -119,7 +114,7 @@ $o-chat-window-zindex: $zindex-modal + 1;
 
         .o_total_unread_counter {
             @include o-position-absolute(-10px, 0, auto, auto);
-            background-color: $odoo-brand-optional;
+            background-color: $o-brand-optional;
             padding: 0 2px;
             font-size: smaller;
         }
@@ -129,7 +124,7 @@ $o-chat-window-zindex: $zindex-modal + 1;
     }
 
     > ul {
-        max-width: $o-chat-window-width;
+        max-width: $o-mail-chat-window-width;
         padding: 0;
 
         > li.o_chat_header {
@@ -139,7 +134,7 @@ $o-chat-window-zindex: $zindex-modal + 1;
                 border-top: 1px solid white;
             }
             &:hover {
-                background-color: darken($odoo-brand-primary, 10%);
+                background-color: darken($o-brand-primary, 10%);
             }
         }
     }
diff --git a/addons/mail/static/src/scss/chatter.scss b/addons/mail/static/src/scss/chatter.scss
index ba863a5c664..314eb9b8bac 100644
--- a/addons/mail/static/src/scss/chatter.scss
+++ b/addons/mail/static/src/scss/chatter.scss
@@ -10,19 +10,19 @@
     }
 
     .o_chatter_topbar {
-        height: $odoo-statusbar-height;
+        height: $o-statusbar-height;
         position: relative;
         margin: $grid-gutter-width*0.5 0 0;
         padding: 0;
         @include o-flex-display;
 
         > .btn {
-            height: $odoo-statusbar-height + 1;
+            height: $o-statusbar-height + 1;
             border: 1px solid transparent;
         }
 
         > .o_followers {
-            height: $odoo-statusbar-height + 1;
+            height: $o-statusbar-height + 1;
             border-bottom: 1px solid transparent;
             @include o-flex(1,1,auto);
         }
@@ -35,7 +35,7 @@
             border-bottom-color: $gray-lighter-dark;
 
             &.o_active {
-                color: $odoo-brand-primary;
+                color: $o-brand-primary;
                 background-color: $gray-lighter;
                 border-color: $gray-lighter-dark;
                 border-width: 1px 1px 0;
diff --git a/addons/mail/static/src/scss/composer.scss b/addons/mail/static/src/scss/composer.scss
index b19cde9fb2c..477a7e536e1 100644
--- a/addons/mail/static/src/scss/composer.scss
+++ b/addons/mail/static/src/scss/composer.scss
@@ -75,7 +75,7 @@
         }
         @media (max-width: $screen-xs-max) {
             .o_composer_button_send {
-                color: $odoo-brand-optional;
+                color: $o-brand-optional;
             }
         }
     }
@@ -95,13 +95,13 @@
 
     // Both inline and not-inline design. Mini-composer disabled.
     &:not(.o_chat_mini_composer) {
-        padding:  $mail-thread-avatar-size*0.5;
-        padding-left: $grid-gutter-width*0.5 + $mail-thread-avatar-size + $o-mail-chatter-gap;
+        padding:  $o-mail-thread-avatar-size*0.5;
+        padding-left: $grid-gutter-width*0.5 + $o-mail-thread-avatar-size + $o-mail-chatter-gap;
         border: 1px solid $gray-lighter-dark;
         border-top: none;
 
         .o_chatter_avatar {
-            @include o-position-absolute(0, $left:  -$mail-thread-avatar-size - $o-mail-chatter-gap);
+            @include o-position-absolute(0, $left:  -$o-mail-thread-avatar-size - $o-mail-chatter-gap);
         }
 
         .o_chatter_composer_info, .o_composer_suggested_partners {
@@ -193,7 +193,7 @@
                 border-radius: 0 3px 3px 0;
                 // Make the button appear as the same size as the subject input
                 padding: 10px $padding-base-horizontal;
-                border: 1px solid darken($odoo-brand-optional, 5%);
+                border: 1px solid darken($o-brand-optional, 5%);
                 border-left-width: 0;
             }
         }
@@ -296,7 +296,7 @@ $o-mail-attachment-margin: 5px;
         @include o-text-overflow(block);
 
         a {
-            @include o-hover-text-color($default-color: $odoo-main-text-color, $hover-color: $headings-color);
+            @include o-hover-text-color($default-color: $o-main-text-color, $hover-color: $headings-color);
         }
     }
 
@@ -423,7 +423,7 @@ $o-mail-attachment-margin: 5px;
     }
 }
 .o_modal_fullscreen {
-    z-index: $o-chat-window-zindex + 1;
+    z-index: $o-mail-chat-window-zindex + 1;
 
     .o_viewer_content {
         position: relative;
diff --git a/addons/mail/static/src/scss/discuss.scss b/addons/mail/static/src/scss/discuss.scss
index 58473d6ad40..de129eaee4c 100644
--- a/addons/mail/static/src/scss/discuss.scss
+++ b/addons/mail/static/src/scss/discuss.scss
@@ -1,7 +1,6 @@
 // ------------------------------------------------------------------
 // Layout
 // ------------------------------------------------------------------
-$mail-chat-sidebar-width: 250px;
 
 .o_mail_chat {
     @include o-position-absolute(0, 0, 0, 0);
@@ -14,7 +13,7 @@ $mail-chat-sidebar-width: 250px;
         color: white;
         text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25);
         @include o-flex-display;
-        border-bottom: 1px solid $odoo-main-color-muted;
+        border-bottom: 1px solid $o-main-color-muted;
 
         .o_mail_request_permission {
             @include o-flex-display;
@@ -38,19 +37,19 @@ $mail-chat-sidebar-width: 250px;
     }
 
     .o_mail_chat_sidebar {
-        width: $mail-chat-sidebar-width;
+        width: $o-mail-chat-sidebar-width;
         height: 100%;
         float: left;
         overflow: auto;
-        padding: $odoo-horizontal-padding 0;
+        padding: $o-horizontal-padding 0;
 
         @media (min-width: $screen-lg-min) {
-            width: $mail-chat-sidebar-width + 50px;
+            width: $o-mail-chat-sidebar-width + 50px;
         }
 
         .o_mail_sidebar_title {
             @include o-flex-display;
-            padding: 6px $odoo-horizontal-padding 0 $odoo-horizontal-padding;
+            padding: 6px $o-horizontal-padding 0 $o-horizontal-padding;
             align-items: center;
             justify-content: space-between;
             h4 {
@@ -67,7 +66,7 @@ $mail-chat-sidebar-width: 250px;
         .o_mail_chat_channel_item {
             @include o-flex-display;
             width: 100%;
-            padding: 2px $odoo-horizontal-padding 2px ($odoo-horizontal-padding + 12px); // compensate icon
+            padding: 2px $o-horizontal-padding 2px ($o-horizontal-padding + 12px); // compensate icon
 
             .o_channel_name {
                 @include o-flex(1, 1, auto);
@@ -87,7 +86,7 @@ $mail-chat-sidebar-width: 250px;
             }
 
             &.o_mail_chat_title_main {
-                padding: $padding-base-vertical $odoo-horizontal-padding;
+                padding: $padding-base-vertical $o-horizontal-padding;
                 margin-bottom: 2px;
             }
         }
@@ -98,7 +97,7 @@ $mail-chat-sidebar-width: 250px;
 
         .o_mail_add_channel {
             width: 100%;
-            padding: 5px ($odoo-horizontal-padding + 23px); // compensate icon
+            padding: 5px ($o-horizontal-padding + 23px); // compensate icon
             position: relative;
 
             > input {
@@ -115,14 +114,14 @@ $mail-chat-sidebar-width: 250px;
         @include o-flex-display;
         @include o-flex-flow(column, nowrap);
         height: 100%;
-        margin-left: $mail-chat-sidebar-width;
+        margin-left: $o-mail-chat-sidebar-width;
         position: relative;
         @media (min-width: $screen-sm-min) {
             overflow: auto;
         }
 
         @media (min-width: $screen-lg-min) {
-            margin-left: $mail-chat-sidebar-width + 50px;
+            margin-left: $o-mail-chat-sidebar-width + 50px;
         }
 
         .o_mail_thread {
@@ -151,7 +150,6 @@ $mail-chat-sidebar-width: 250px;
 // ------------------------------------------------------------------
 // Style
 // ------------------------------------------------------------------
-$sidebar-icon-opacity: 0.7;
 
 .o_mail_chat {
     .o_mail_chat_sidebar {
@@ -165,13 +163,13 @@ $sidebar-icon-opacity: 0.7;
                 background-color: darken($gray-dark,2%);
 
                 .o_mail_partner_unpin, .o_mail_channel_settings {
-                    opacity: $sidebar-icon-opacity;
+                    opacity: $o-mail-sidebar-icon-opacity;
                 }
             }
 
             &.o_active {
                 background-color: $gray-darker;
-                box-shadow: inset 3px 0 0 $odoo-brand-optional;
+                box-shadow: inset 3px 0 0 $o-brand-optional;
             }
 
             .o_mail_hash {
@@ -188,7 +186,7 @@ $sidebar-icon-opacity: 0.7;
 
             > .badge {
                 color: white;
-                background-color: $odoo-brand-optional;
+                background-color: $o-brand-optional;
                 font-size: 10px;
                 line-height: 16px;
                 height: 18px;
@@ -230,7 +228,7 @@ $sidebar-icon-opacity: 0.7;
             }
             .o_add {
                 cursor: pointer;
-                @include o-hover-opacity($sidebar-icon-opacity, 1);
+                @include o-hover-opacity($o-mail-sidebar-icon-opacity, 1);
                 @include o-hover-text-color($gray-light, white);
             }
         }
@@ -244,7 +242,7 @@ $sidebar-icon-opacity: 0.7;
         .o_thread_message {
             opacity: 0.5;
             &.o_thread_selected_message {
-                padding: 4px $odoo-horizontal-padding;
+                padding: 4px $o-horizontal-padding;
                 opacity: 1;
                 background-color: lightgray;
             }
@@ -256,7 +254,7 @@ $sidebar-icon-opacity: 0.7;
     font-size: 1em;
     position: relative;
     &.o_user_online {
-        color: $odoo-brand-optional;
+        color: $o-brand-optional;
     }
     &.o_user_idle {
         color: $brand-warning;
@@ -358,7 +356,7 @@ $sidebar-icon-opacity: 0.7;
 .o_mail_channel_preview {
     @include o-flex-display;
     background-color: $gray-lighter;
-    color: $odoo-main-text-color;
+    color: $o-main-text-color;
     cursor: pointer;
     overflow: hidden;
     position: relative;
@@ -399,14 +397,14 @@ $sidebar-icon-opacity: 0.7;
             }
             .o_last_message_date {
                 @include o-flex(0, 0, auto);
-                color: $odoo-main-color-muted;
+                color: $o-main-color-muted;
                 font-weight: 500;
             }
         }
         .o_last_message_preview {
             width: 100%;
             max-height: 20px;
-            color: $odoo-main-color-muted;
+            color: $o-main-color-muted;
             @include o-text-overflow;
         }
     }
@@ -421,7 +419,7 @@ $sidebar-icon-opacity: 0.7;
                     font-weight: 700;
                 }
                 .o_last_message_date {
-                    color: $odoo-brand-optional;
+                    color: $o-brand-optional;
                 }
             }
         }
@@ -429,7 +427,6 @@ $sidebar-icon-opacity: 0.7;
 }
 
 @media (max-width: $screen-xs-max) {
-    $o-mail-chatter-mobile-gap: 2%;
 
     .o_main_navbar > ul.o_menu_systray > li.open .dropdown-menu {
         border: none;
@@ -485,7 +482,7 @@ $sidebar-icon-opacity: 0.7;
             }
 
             &.active > span {
-                color: $odoo-brand-optional;
+                color: $o-brand-optional;
             }
         }
     }
diff --git a/addons/mail/static/src/scss/extended_chat_window.scss b/addons/mail/static/src/scss/extended_chat_window.scss
index 9e0174654b1..774a37c6120 100644
--- a/addons/mail/static/src/scss/extended_chat_window.scss
+++ b/addons/mail/static/src/scss/extended_chat_window.scss
@@ -17,7 +17,7 @@
         }
 
         .o_mail_thread {
-            background-color: $odoo-webclient-background-color;
+            background-color: $o-webclient-background-color;
         }
 
         .o_chat_composer {
diff --git a/addons/mail/static/src/scss/followers.scss b/addons/mail/static/src/scss/followers.scss
index 5b7ff2b886f..573f13e35b2 100644
--- a/addons/mail/static/src/scss/followers.scss
+++ b/addons/mail/static/src/scss/followers.scss
@@ -91,19 +91,19 @@
             font-size: small;
 
             .o_partner {
-                $partner-avatar-size: 24px;
                 position: relative; // required for old design compatibility
+
                 > a {
                     max-width: 160px;
                     overflow: hidden;
                     white-space: nowrap;
                     text-overflow: ellipsis;
-                    height: $partner-avatar-size;
-                    padding: 3px $partner-avatar-size + 8px;
+                    height: $o-mail-partner-avatar-size;
+                    padding: 3px $o-mail-partner-avatar-size + 8px;
                 }
                 > img {
                     @include o-position-absolute;
-                    width: $partner-avatar-size;
+                    width: $o-mail-partner-avatar-size;
                 }
                 .o_remove_follower {
                     @include o-position-absolute(6px, 5px);
diff --git a/addons/mail/static/src/scss/mail_activity.scss b/addons/mail/static/src/scss/mail_activity.scss
index 58f00c1f4e5..f835275e873 100644
--- a/addons/mail/static/src/scss/mail_activity.scss
+++ b/addons/mail/static/src/scss/mail_activity.scss
@@ -150,7 +150,7 @@
             padding: 0px 0px;
 
             & > li:last-child {
-                background-color: $odoo-brand-lightsecondary;
+                background-color: $o-brand-lightsecondary;
                 color: $gray-dark;
                 line-height: 3em;
             }
@@ -166,7 +166,7 @@
                     &.o_activity_label {
                         line-height: 2.5em;
                         padding: 0px 5px;
-                        background-color: $odoo-brand-lightsecondary;
+                        background-color: $o-brand-lightsecondary;
                     }
 
                     &.o_schedule_activity {
diff --git a/addons/mail/static/src/scss/systray.scss b/addons/mail/static/src/scss/systray.scss
index c06bde1d3f1..fd799cb9cc7 100644
--- a/addons/mail/static/src/scss/systray.scss
+++ b/addons/mail/static/src/scss/systray.scss
@@ -21,7 +21,7 @@
     }
     .o_notification_counter {
         @include o-position-absolute($top: 20%, $right: 1px);
-        background: $odoo-brand-optional;
+        background: $o-brand-optional;
         color: white;
         padding: 0em 0.3em;
         font-size: 0.7em;
@@ -34,7 +34,7 @@
             @include o-flex-display;
             @include o-align-items(center);
             @include o-justify-content(center);
-            color: $odoo-main-text-color;
+            color: $o-main-text-color;
             height: 50px;
         }
 
@@ -48,9 +48,9 @@
                 padding: 5px;
             }
             .o_filter_button {
-                color: $odoo-main-color-muted;
+                color: $o-main-color-muted;
                 &:hover, &.active {
-                    color: $odoo-brand-optional;
+                    color: $o-brand-optional;
                 }
                 &.active {
                     cursor: default;
@@ -130,7 +130,7 @@
                 left: 0px;
                 right: 0px;
                 background-color: white;
-                color: $odoo-main-text-color;
+                color: $o-main-text-color;
             }
         }
     }
diff --git a/addons/mail/static/src/scss/thread.scss b/addons/mail/static/src/scss/thread.scss
index 4a2edb68913..0529238a36e 100644
--- a/addons/mail/static/src/scss/thread.scss
+++ b/addons/mail/static/src/scss/thread.scss
@@ -25,30 +25,30 @@
 
     .o_thread_new_messages_separator {
         margin-bottom: 15px;
-        border-bottom: solid lighten($odoo-brand-primary, 15%) 1px;
+        border-bottom: solid lighten($o-brand-primary, 15%) 1px;
         text-align: right;
         .o_thread_separator_label {
             position: relative;
             top: 8px;
             padding: 0 10px;
             background: white;
-            color: lighten($odoo-brand-primary, 15%);
+            color: lighten($o-brand-primary, 15%);
             font-size: smaller;
         }
     }
 
     .o_thread_message {
         @include o-flex-display;
-        padding: 4px $odoo-horizontal-padding;
+        padding: 4px $o-horizontal-padding;
         margin-bottom: 0px;
 
         &.o_mail_not_discussion {
-            background-color: $mail-thread-note;
+            background-color: rgba($gray-lighter-dark, 0.5);
             border-bottom: 1px solid $gray-lighter-darker;
         }
 
         .o_thread_message_sidebar {
-            @include o-flex(0, 0, $mail-thread-avatar-size);
+            @include o-flex(0, 0, $o-mail-thread-avatar-size);
             margin-right: 10px;
             margin-top: 2px;
             text-align: center;
@@ -60,7 +60,7 @@
             }
 
             .o_thread_message_avatar {
-                max-width: $mail-thread-avatar-size;
+                max-width: $o-mail-thread-avatar-size;
             }
             .o_thread_message_side_date {
                 margin-left: -5px;
@@ -77,17 +77,17 @@
             cursor: pointer;
             opacity: 0;
             &.fa-star {
-                opacity: $mail-thread-icon-opacity;
+                opacity: $o-mail-thread-icon-opacity;
                 color: gold;
             }
         }
 
         &:hover, &.o_thread_selected_message {
             .o_thread_message_side_date {
-                opacity: $mail-thread-side-date-opacity;
+                opacity: $o-mail-thread-side-date-opacity;
             }
             .o_thread_icon {
-                opacity: $mail-thread-icon-opacity;
+                opacity: $o-mail-thread-icon-opacity;
                 &:hover {
                     opacity: 1;
                 }
@@ -222,6 +222,6 @@
 
 .o_web_client.o_touch_device {
     .o_mail_thread .o_thread_icon {
-        opacity: $mail-thread-icon-opacity;
+        opacity: $o-mail-thread-icon-opacity;
     }
 }
diff --git a/addons/mail/static/src/scss/variables.scss b/addons/mail/static/src/scss/variables.scss
index ce498f2d03e..c3086ce579d 100644
--- a/addons/mail/static/src/scss/variables.scss
+++ b/addons/mail/static/src/scss/variables.scss
@@ -1,5 +1,12 @@
-// FIXME moved here since scss convertion
-$mail-thread-avatar-size: 36px;
-$mail-thread-icon-opacity: 0.6;
-$mail-thread-side-date-opacity: 0.6;
-$mail-thread-note: rgba($gray-lighter-dark, 0.5);
+$o-mail-thread-avatar-size: 36px !default;
+$o-mail-thread-icon-opacity: 0.6 !default;
+$o-mail-thread-side-date-opacity: 0.6 !default;
+$o-mail-chat-window-bg: #FAFAFA !default;
+$o-mail-chat-window-width: 325px !default;
+$o-mail-chatter-gap: 10px !default;
+$o-mail-chatter-mobile-gap: 2% !default;
+$o-mail-chat-header-height: 46px !default;
+$o-mail-attachment-image-size: 100px !default;
+$o-mail-sidebar-icon-opacity: 0.7 !default;
+$o-mail-chat-sidebar-width: 250px !default;
+$o-mail-partner-avatar-size: 24px !default;
diff --git a/addons/mail/views/mail_templates.xml b/addons/mail/views/mail_templates.xml
index 9c1cb7cddf5..af2bc8b3b75 100644
--- a/addons/mail/views/mail_templates.xml
+++ b/addons/mail/views/mail_templates.xml
@@ -1,6 +1,12 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
     <data>
+        <template id="_assets_primary_variables" inherit_id="web._assets_primary_variables">
+            <xpath expr="//link[last()]" position="after">
+                <link rel="stylesheet" type="text/scss" href="/mail/static/src/scss/variables.scss"/>
+            </xpath>
+        </template>
+
         <template id="assets_backend" name="mail assets" inherit_id="web.assets_backend">
             <xpath expr="." position="inside">
                 <script type="text/javascript" src="/mail/static/src/js/many2many_tags_email.js"></script>
@@ -27,7 +33,6 @@
                 <script type="text/javascript" src="/mail/static/src/js/utils.js"></script>
                 <script type="text/javascript" src="/mail/static/src/js/activity.js"></script>
 
-                <link rel="stylesheet" type="text/scss" href="/mail/static/src/scss/variables.scss"></link>
                 <link rel="stylesheet" type="text/scss" href="/mail/static/src/scss/announcement.scss"/>
                 <link rel="stylesheet" type="text/scss" href="/mail/static/src/scss/discuss.scss"/>
                 <link rel="stylesheet" type="text/scss" href="/mail/static/src/scss/chat_window.scss"/>
diff --git a/addons/mass_mailing/static/src/scss/mass_mailing.ui.scss b/addons/mass_mailing/static/src/scss/mass_mailing.ui.scss
index 0854637a003..eaac6c4d2dd 100644
--- a/addons/mass_mailing/static/src/scss/mass_mailing.ui.scss
+++ b/addons/mass_mailing/static/src/scss/mass_mailing.ui.scss
@@ -1,15 +1,15 @@
 .o_form_view .o_form_sheet .o_notebook .tab-content .tab-pane .o_mail_body {
     // cancel padding of form_sheet
-    margin-top: -$odoo-sheet-cancel-tpadding;
-    margin-left: -$odoo-sheet-cancel-hpadding;
-    margin-right: -$odoo-sheet-cancel-hpadding;
-    margin-bottom: -$odoo-sheet-cancel-bpadding;
+    margin-top: -$o-sheet-cancel-tpadding;
+    margin-left: -$o-sheet-cancel-hpadding;
+    margin-right: -$o-sheet-cancel-hpadding;
+    margin-bottom: -$o-sheet-cancel-bpadding;
 }
 
 .o_mail_theme_selector {
     > a {
         @include o-position-absolute(0, 0, auto, 0);
-        height: $odoo-navbar-height;
+        height: $o-navbar-height;
         line-height: 31px;
         border-radius: 0;
         background-color: $o-we-color-darker;
@@ -33,7 +33,7 @@
     }
 
     .dropdown-menu {
-        @include o-position-absolute($odoo-navbar-height - 1, -1px, -1px, -1px);
+        @include o-position-absolute($o-navbar-height - 1, -1px, -1px, -1px);
         margin: 0;
         border-radius: 0;
         overflow: auto;
@@ -67,7 +67,7 @@
             }
 
             &.selected > a .o_thumb {
-                border: 2px solid $odoo-brand-primary;
+                border: 2px solid $o-brand-primary;
                 background-color: $o-we-color-dark;
             }
         }
diff --git a/addons/mrp/static/src/scss/mrp_bom_report.scss b/addons/mrp/static/src/scss/mrp_bom_report.scss
index b72e7697a89..095d6e05846 100644
--- a/addons/mrp/static/src/scss/mrp_bom_report.scss
+++ b/addons/mrp/static/src/scss/mrp_bom_report.scss
@@ -1,5 +1,5 @@
 .o_mrp_bom_report_page {
-    background-color: $odoo-view-background-color;
+    background-color: $o-view-background-color;
     margin: 16px auto;
     padding: 24px 16px;
     .o_mrp_bom_action {
diff --git a/addons/portal/static/src/scss/portal.scss b/addons/portal/static/src/scss/portal.scss
index a34693ef5ac..9eeb6a538b5 100644
--- a/addons/portal/static/src/scss/portal.scss
+++ b/addons/portal/static/src/scss/portal.scss
@@ -328,7 +328,7 @@ img {
         .o_portal_chatter_message_title {
             p {
                 font-size:85%;
-                color:$odoo-main-color-muted;
+                color:$o-main-color-muted;
                 margin: 0px;
             }
         }
diff --git a/addons/project/static/src/scss/project_dashboard.scss b/addons/project/static/src/scss/project_dashboard.scss
index 50cbb7b4ac9..919da241023 100644
--- a/addons/project/static/src/scss/project_dashboard.scss
+++ b/addons/project/static/src/scss/project_dashboard.scss
@@ -66,7 +66,7 @@
         outline: 2px solid transparent;
         box-shadow: 0px 0px 1px 1px #ccc;
         &.o_selected {
-            outline-color: $odoo-brand-optional;
+            outline-color: $o-brand-optional;
         }
         > img {
             @include o-position-absolute($top: 0, $left: 0, $right: 0, $bottom: 0);
diff --git a/addons/sale_timesheet/static/src/scss/sale_timesheet.scss b/addons/sale_timesheet/static/src/scss/sale_timesheet.scss
index 0e2caa12f72..00d16e8e325 100644
--- a/addons/sale_timesheet/static/src/scss/sale_timesheet.scss
+++ b/addons/sale_timesheet/static/src/scss/sale_timesheet.scss
@@ -2,7 +2,7 @@
 .o_timesheet_plan_sale_timesheet {
 
     [type='action'] {
-        color: $odoo-brand-optional;
+        color: $o-brand-optional;
         cursor: pointer;
     }
 
@@ -82,14 +82,14 @@
             text-align: center;
         }
         th.o_right_bordered, td.o_right_bordered {
-            border-right: 2px solid $odoo-brand-optional;
+            border-right: 2px solid $o-brand-optional;
             text-align: center;
         }
 
         .o_timesheet_forecast_sale_order{
             font-weight: bold;
             & > td:first-child {
-                color: $odoo-brand-optional;
+                color: $o-brand-optional;
             }
         }
         .o_timesheet_forecast_sale_order_line{
diff --git a/addons/sales_team/static/src/scss/sales_team_dashboard.scss b/addons/sales_team/static/src/scss/sales_team_dashboard.scss
index ac72624b83a..a57003b8285 100644
--- a/addons/sales_team/static/src/scss/sales_team_dashboard.scss
+++ b/addons/sales_team/static/src/scss/sales_team_dashboard.scss
@@ -1,8 +1,5 @@
-$dashboard-bg-color: white;
 
 .o_kanban_view.o_kanban_dashboard.o_salesteam_kanban {
-    $sale-table-spacing: 10px;
-
     .o_kanban_record {
         .o_sales_team_kanban_graph_section {
             .o_graph_linechart {
@@ -27,7 +24,7 @@ $dashboard-bg-color: white;
                         }
                         g.tick.major {
                             // Don't know why, but leads to strange bold text
-                            // stroke: $odoo-brand-primary;
+                            // stroke: $o-brand-primary;
 
                             line {
                                 display: none;
diff --git a/addons/stock/static/src/scss/stock_traceability_report.scss b/addons/stock/static/src/scss/stock_traceability_report.scss
index 0d144dec6dc..7480521026f 100644
--- a/addons/stock/static/src/scss/stock_traceability_report.scss
+++ b/addons/stock/static/src/scss/stock_traceability_report.scss
@@ -23,11 +23,11 @@
     @media (max-width: $screen-md-min) {
         overflow-x:scroll;
     }
-    background-color: $odoo-view-background-color;
+    background-color: $o-view-background-color;
     &.o_stock_reports_no_print {
         padding-bottom: 125px;
-        margin: $odoo-horizontal-padding auto;
-        @include o-webclient-padding($top: $odoo-sheet-vpadding, $bottom: $odoo-sheet-vpadding);
+        margin: $o-horizontal-padding auto;
+        @include o-webclient-padding($top: $o-sheet-vpadding, $bottom: $o-sheet-vpadding);
         .o_stock_reports_level0 {
             @include o-stock-reports-lines($border-width: 1px, $font-weight: normal, $border-top-style: solid, $border-bottom-style: groove);
         }
diff --git a/addons/survey/views/survey_templates.xml b/addons/survey/views/survey_templates.xml
index 61eb600204c..a8f0574b68a 100644
--- a/addons/survey/views/survey_templates.xml
+++ b/addons/survey/views/survey_templates.xml
@@ -10,11 +10,12 @@
         <script type="text/javascript" src="/survey/static/src/js/survey.js" />
         <script type="text/javascript" src="/survey/static/src/js/tour_test_survey.js"></script>
         <script type="text/javascript" src="/web/static/src/js/fields/field_utils.js"></script>
+
+        <t t-call="web._assets_frontend_helpers"/>
         <link href="/web/static/lib/nvd3/nv.d3.css" rel="stylesheet" type="text/css"></link>
         <link rel="stylesheet" type="text/less" href="/web/static/src/scss/import_bootstrap.scss"/>
         <link rel="stylesheet" type="text/less" href="/web/static/src/scss/fonts.scss" />
         <!-- Some helper classes (like mt- mb-) are required for survey templates  -->
-        <link rel="stylesheet" type="text/less" href="/web/static/src/scss/utils.scss"/>
         <link rel="stylesheet" type="text/less" href="/web_editor/static/src/scss/web_editor.common.scss"/>
         <link href="/survey/static/src/css/survey_print.css" rel="stylesheet" type="text/css"/>
         <link href="/survey/static/src/css/survey_result.css" rel="stylesheet" type="text/css"></link>
diff --git a/addons/web/static/src/scss/base_settings.scss b/addons/web/static/src/scss/base_settings.scss
index 7904e6143e7..7cd25c7e578 100644
--- a/addons/web/static/src/scss/base_settings.scss
+++ b/addons/web/static/src/scss/base_settings.scss
@@ -1,13 +1,9 @@
-// VARIABLES
-$o-base-settings-mobile-tabs-height: 40px;
-$o-base-settings-mobile-tabs-overflow-gap: 3%;
-
 // MIXINS
 @mixin o-base-settings-horizontal-padding($padding-base: $padding-small-vertical) {
-    padding: $padding-base $odoo-horizontal-padding;
+    padding: $padding-base $o-horizontal-padding;
 
     @media (min-width: $screen-lg-min) {
-        padding-left: $odoo-horizontal-padding*2;;
+        padding-left: $o-horizontal-padding*2;;
     }
 }
 
@@ -30,7 +26,7 @@ $o-base-settings-mobile-tabs-overflow-gap: 3%;
         .o_panel {
             @include o-flex-display;
             @include o-flex-flow(row, wrap);
-            margin-bottom: $odoo-sheet-vpadding*0.5;
+            margin-bottom: $o-sheet-vpadding*0.5;
             width: 100%;
 
             .title, .o_setting_search {
@@ -89,7 +85,7 @@ $o-base-settings-mobile-tabs-overflow-gap: 3%;
             @include o-flex-flow(column, nowrap);
             background: $gray-dark;
             overflow: auto;
-            padding-top: $odoo-horizontal-padding*0.5;
+            padding-top: $o-horizontal-padding*0.5;
 
             @media (max-width: $screen-xs-max) {
                 @include o-flex(0, 0, $o-base-settings-mobile-tabs-height);
@@ -101,7 +97,7 @@ $o-base-settings-mobile-tabs-overflow-gap: 3%;
 
             .selected {
                 background-color: $gray-darker;
-                box-shadow: inset 3px 0 0 $odoo-brand-optional;
+                box-shadow: inset 3px 0 0 $o-brand-optional;
 
                 .app_name {
                     color: white;
@@ -110,7 +106,7 @@ $o-base-settings-mobile-tabs-overflow-gap: 3%;
 
             .tab {
                 @include o-flex-display;
-                padding: 0 $odoo-horizontal-padding*2 0 $odoo-horizontal-padding;
+                padding: 0 $o-horizontal-padding*2 0 $o-horizontal-padding;
                 height: 40px;
                 color: $gray-lighter-darker;
                 font-size: 13px;
@@ -142,7 +138,7 @@ $o-base-settings-mobile-tabs-overflow-gap: 3%;
 
                     &:after {
                         content: '';
-                        background: $odoo-brand-optional;
+                        background: $o-brand-optional;
                         opacity: 0;
                         @include o-position-absolute(auto, 0, 0, 0);
                         @include size(100%, 3px);
@@ -176,7 +172,7 @@ $o-base-settings-mobile-tabs-overflow-gap: 3%;
         .settings {
             position: relative;
             @include o-flex(1, 1, 100%);
-            background-color: $odoo-view-background-color;
+            background-color: $o-view-background-color;
             overflow: auto;
 
             > .app_settings_block {
diff --git a/addons/web/static/src/scss/bootstrap_overridden.scss b/addons/web/static/src/scss/bootstrap_overridden.scss
index 9a364231415..9701ead0539 100644
--- a/addons/web/static/src/scss/bootstrap_overridden.scss
+++ b/addons/web/static/src/scss/bootstrap_overridden.scss
@@ -3,44 +3,53 @@
 // ------------------------------------------------------------------
 
 //== Grid
-$grid-gutter-width: $odoo-horizontal-padding*2;
+$grid-gutter-width: $o-horizontal-padding*2;
 
 //== Colors
-$brand-primary: $odoo-brand-primary;
-$gray-lighter: $odoo-color-silver;
+$brand-primary: $o-brand-primary;
+
+//== Greyscale
+$gray-base: #000;
+$gray-darker: lighten($gray-base, 13.5%);
+$gray-dark: lighten($gray-base, 20%);
+$gray: lighten($gray-base, 33.5%);
+$gray-light: $o-color-gray-light;
+$gray-lighter: $o-color-silver;
 
 //== Titles
-$font-size-h1: $odoo-font-size-base + 13px;
-$font-size-h2: $odoo-font-size-base + 7px;
-$font-size-h3: $odoo-font-size-base + 3px;
-$font-size-h4: $odoo-font-size-base + 2px;
-$font-size-h5: $odoo-font-size-base + 1px;
-$font-size-h6: $odoo-font-size-base;
+$font-size-h1: $o-font-size-base + 13px;
+$font-size-h2: $o-font-size-base + 7px;
+$font-size-h3: $o-font-size-base + 3px;
+$font-size-h4: $o-font-size-base + 2px;
+$font-size-h5: $o-font-size-base + 1px;
+$font-size-h6: $o-font-size-base;
 
 //== Scaffolding
-$body-bg: $odoo-brand-secondary;
-$text-color: $odoo-main-text-color;
-$link-color: $odoo-brand-optional;
+$body-bg: $o-brand-secondary;
+$text-color: $o-main-text-color;
+$link-color: $o-brand-optional;
 $link-hover-decoration: none;
 
 //== Typography
 $font-family-sans-serif: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif;
-$font-size-base: $odoo-font-size-base;
+$font-size-base: $o-font-size-base;
 $headings-font-weight: bold;
+$line-height-base: $o-line-height-base;
 
 //== Components
+$border-radius-base: 3px;
 $component-active-bg: $gray-lighter;
-$component-active-color: $odoo-brand-optional;
+$component-active-color: $o-brand-optional;
 
 //== Badges
-$badge-bg: $odoo-brand-optional;
+$badge-bg: $o-brand-optional;
 $badge-color: white;
-$badge-line-height: $line-height-base;
+$badge-line-height: $o-line-height-base;
 $badge-font-weight: normal;
 
 //== Breadcrumbs
 $breadcrumb-active-color: #777777;
-$breadcrumb-bg: $odoo-control-panel-background-color;
+$breadcrumb-bg: $o-control-panel-background-color;
 $breadcrumb-color: #777777;
 $breadcrumb-padding-horizontal: 0;
 $breadcrumb-padding-vertical: 0;
@@ -48,16 +57,16 @@ $breadcrumb-padding-vertical: 0;
 //== Buttons
 $btn-default-bg: white;
 $btn-default-border: #cccccc;
-$btn-default-color: $odoo-main-text-color;
-$btn-primary-bg: $odoo-brand-optional;
-$btn-primary-border: $odoo-brand-optional;
+$btn-default-color: $o-main-text-color;
+$btn-primary-bg: $o-brand-optional;
+$btn-primary-border: $o-brand-optional;
 $btn-primary-color: white;
 
 //== Dropdowns
 $dropdown-bg: white;
 $dropdown-border: $gray-lighter-dark;
 $dropdown-divider-bg: $gray-lighter-dark;
-$dropdown-link-color: $odoo-main-text-color;
+$dropdown-link-color: $o-main-text-color;
 $dropdown-link-hover-color: $gray-dark;
 $dropdown-link-hover-bg: $gray-lighter;
 $dropdown-link-active-color: $component-active-color;
@@ -69,8 +78,8 @@ $dropdown-header-color: $gray-light;
 $modal-sm: 300px;
 $modal-md: 650px;
 $modal-lg: 980px;
-$modal-inner-padding: $odoo-horizontal-padding;
-$modal-title-padding: $odoo-horizontal-padding;
+$modal-inner-padding: $o-horizontal-padding;
+$modal-title-padding: $o-horizontal-padding;
 
 // Change the z-index of the modal-backdrop elements to be equal to the
 // modal elements' ones. Bootstrap does not support multi-modals, and without
@@ -92,11 +101,11 @@ $modal-title-padding: $odoo-horizontal-padding;
 $nav-link-padding: 10px 15px;
 $nav-pills-border-radius: 0;
 $nav-pills-active-link-hover-color: white;
-$nav-pills-active-link-hover-bg: $odoo-brand-optional;
+$nav-pills-active-link-hover-bg: $o-brand-optional;
 $nav-tabs-active-link-hover-bg: white;
 
 //== Navbar
-$navbar-height: $odoo-navbar-height - 2;
+$navbar-height: $o-navbar-height - 2;
 $navbar-margin-bottom: 0;
 $navbar-inverse-bg: #222222;
 $navbar-inverse-link-color: #9d9d9d;
@@ -108,61 +117,4 @@ $navbar-border-radius: 0;
 $table-bg-accent: #efeff8; // FIXME: expose
 $table-bg-hover: darken($table-bg-accent,5%);
 
-// ------------------------------------------------------------------
-// Bootstrap components rules (non exposed features variables)
-// ------------------------------------------------------------------
-
-//== Badges
-.badge {
-    margin: 1px 2px 1px 0;
-    padding-top: 0;
-    padding-bottom: 0;
-}
-
-//== Buttons
-// Mixin to define variations for btn-links and muted btn-links
-@mixin o-btn-link-variant($color, $color-active) {
-    text-transform: none;
-    @include o-hover-text-color($default-color: $color, $hover-color: $color-active);
-
-    &, &:hover, &:focus, &:active, &.active {
-        border-color: transparent;
-        background-color: transparent
-    }
-
-    &.text-muted, .text-muted {
-        @include o-hover-opacity;
-        @include o-hover-text-color($default-color: $text-muted, $hover-color: $color-active);
-    }
-}
-.btn-icon {
-  @include button-variant($btn-default-color, $btn-default-bg, $btn-default-border);
-}
-.btn-link {
-    font-weight: $btn-font-weight;
-
-    &.btn-default {
-        @include o-btn-link-variant($text-color, $headings-color);
-    }
-    &.btn-success, &.text-success {
-        @include o-btn-link-variant($text-color, $brand-success);
-    }
-    &.btn-warning, &.text-warning {
-        @include o-btn-link-variant($text-color, $brand-warning);
-    }
-    &.btn-danger, &.text-danger {
-        @include o-btn-link-variant($text-color, $brand-danger);
-    }
-    &.btn-info, &.text-info {
-        @include o-btn-link-variant($text-color, darken($brand-info, 20%));
-    }
-}
-
-//== Printing improvements
-@media print {
-    .table-responsive {
-        overflow-x: initial;
-    }
-}
-
-@icon-font-path: "/web/static/lib/bootstrap/fonts/";
+$icon-font-path: "/web/static/lib/bootstrap/fonts/";
diff --git a/addons/web/static/src/scss/bootstrap_overridden_frontend.scss b/addons/web/static/src/scss/bootstrap_overridden_frontend.scss
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/addons/web/static/src/scss/control_panel.scss b/addons/web/static/src/scss/control_panel.scss
index 4174db62c6a..447a1a587cc 100644
--- a/addons/web/static/src/scss/control_panel.scss
+++ b/addons/web/static/src/scss/control_panel.scss
@@ -1,11 +1,10 @@
-$breadcrumb-height: 30px;
 
 .o_control_panel {
     @include o-flex-display;
     @include o-flex-flow(row, wrap);
-    border-bottom: 1px solid darken($odoo-control-panel-background-color, 20%);
+    border-bottom: 1px solid darken($o-control-panel-background-color, 20%);
     @include o-webclient-padding($top: 10px, $bottom: 10px);
-    background-color: $odoo-control-panel-background-color;
+    background-color: $o-control-panel-background-color;
 
     > .breadcrumb {
         width: 50%;
@@ -27,7 +26,7 @@ $breadcrumb-height: 30px;
 
     > .o_cp_searchview {
         width: 50%;
-        min-height: $breadcrumb-height;
+        min-height: $o-cp-breadcrumb-height;
     }
 
     .btn.o_enable_searchview {
@@ -93,7 +92,7 @@ $breadcrumb-height: 30px;
         }
 
         > .o_cp_switch_buttons > .btn:first-child {
-            margin-left: $odoo-horizontal-padding;
+            margin-left: $o-horizontal-padding;
         }
     }
 }
diff --git a/addons/web/static/src/scss/data_export.scss b/addons/web/static/src/scss/data_export.scss
index 3ce97ea1c8b..aa690cfdb74 100644
--- a/addons/web/static/src/scss/data_export.scss
+++ b/addons/web/static/src/scss/data_export.scss
@@ -58,7 +58,7 @@
             }
 
             .o_left_field_panel, .o_fields_list {
-                border: 1px solid $odoo-brand-lightsecondary;
+                border: 1px solid $o-brand-lightsecondary;
                 overflow: auto;
                 @include o-flex(1, 1, auto);
                 min-height: 0;
@@ -71,7 +71,7 @@
                 @include user-select(none);
 
                 &.o_selected > .o_tree_column {
-                    background-color: $odoo-brand-primary;
+                    background-color: $o-brand-primary;
                     color: white;
                 }
 
@@ -82,7 +82,7 @@
                     display: block;
 
                     &.o_required {
-                        border-bottom: 2px solid $odoo-main-text-color;
+                        border-bottom: 2px solid $o-main-text-color;
                     }
                 }
 
diff --git a/addons/web/static/src/scss/datepicker.scss b/addons/web/static/src/scss/datepicker.scss
index d8650b6b409..d8d4ba1d520 100644
--- a/addons/web/static/src/scss/datepicker.scss
+++ b/addons/web/static/src/scss/datepicker.scss
@@ -1,5 +1,3 @@
-$odoo-datepicker-week-color: #8f8f8f;
-$odoo-datepicker-week-bg-color: lighten($odoo-datepicker-week-color, 30%);
 
 .sr-only {
   position: absolute;
@@ -40,19 +38,19 @@ $odoo-datepicker-week-bg-color: lighten($odoo-datepicker-week-color, 30%);
     .table-condensed {
         > thead {
             color: white;
-            background-color: $odoo-brand-primary;
+            background-color: $o-brand-primary;
 
             > tr {
                 &:first-child {
                     th:hover {
                         color: white;
-                        background-color: darken($odoo-brand-primary, 10%);
+                        background-color: darken($o-brand-primary, 10%);
                     }
                 }
 
                 &:last-child {
-                    color: $odoo-datepicker-week-color;
-                    background-color: $odoo-datepicker-week-bg-color;
+                    color: $o-datepicker-week-color;
+                    background-color: $o-datepicker-week-bg-color;
                 }
                 > th {
                     border-radius: 0;
@@ -64,12 +62,12 @@ $odoo-datepicker-week-bg-color: lighten($odoo-datepicker-week-color, 30%);
             > tr {
                 > td {
                     &.active, .active {
-                        background-color: $odoo-brand-optional;
+                        background-color: $o-brand-optional;
                         border-radius: 100px;
                     }
 
                     &.today:before {
-                        border-bottom-color: $odoo-brand-optional;
+                        border-bottom-color: $o-brand-optional;
                     }
                 }
             }
diff --git a/addons/web/static/src/scss/domain_selector.scss b/addons/web/static/src/scss/domain_selector.scss
index 1fde477164d..6755bed49e9 100644
--- a/addons/web/static/src/scss/domain_selector.scss
+++ b/addons/web/static/src/scss/domain_selector.scss
@@ -97,8 +97,8 @@
         }
 
         > .o_domain_leaf_info {
-            background: $odoo-brand-lightsecondary;
-            border: 1px solid darken($odoo-brand-lightsecondary, 10%);
+            background: $o-brand-lightsecondary;
+            border: 1px solid darken($o-brand-lightsecondary, 10%);
             padding: 2px 4px;
 
             > .o_field_selector {
@@ -172,7 +172,7 @@
         display: block;
         height: $o-domain-animation-bar-height;
         max-height: 0;
-        @include o-linear-gradient(45deg, rgba($odoo-brand-optional, 0.4), rgba($odoo-brand-optional, 0.1));
+        @include o-linear-gradient(45deg, rgba($o-brand-optional, 0.4), rgba($o-brand-optional, 0.1));
         @include o-transition(max-height, .05s, ease, .05s);
     }
 
diff --git a/addons/web/static/src/scss/dropdown.scss b/addons/web/static/src/scss/dropdown.scss
index ed979ae3a00..d0bfd1d2586 100644
--- a/addons/web/static/src/scss/dropdown.scss
+++ b/addons/web/static/src/scss/dropdown.scss
@@ -1,5 +1,5 @@
 %dropdown-li-a-padding {
-    padding: 3px $odoo-dropdown-hpadding;
+    padding: 3px $o-dropdown-hpadding;
 }
 
 .ui-autocomplete { // Copy style of bootstrap dropdown
@@ -21,7 +21,7 @@
 
         &.ui-state-focus {
             background-image: none;
-            background-color: $odoo-brand-primary;
+            background-color: $o-brand-primary;
             border: none;
             font-weight: normal;
             margin: 0;
@@ -29,7 +29,7 @@
         &.o_m2o_dropdown_option {
             padding-left: 20px;
             > a {
-                color: $odoo-brand-primary;
+                color: $o-brand-primary;
             }
         }
     }
@@ -64,7 +64,7 @@
 
         &.dropdown-header {
             @extend %dropdown-li-a-padding;
-            color: $odoo-main-text-color;
+            color: $o-main-text-color;
 
             @media (max-width: $screen-xs-max) {
                 color: white;
diff --git a/addons/web/static/src/scss/dropdown_extra.scss b/addons/web/static/src/scss/dropdown_extra.scss
index d15496fe0c9..c14144e02d3 100644
--- a/addons/web/static/src/scss/dropdown_extra.scss
+++ b/addons/web/static/src/scss/dropdown_extra.scss
@@ -1,9 +1,9 @@
 .ui-autocomplete .ui-menu-item {
     &.ui-state-focus {
-        background-color: $odoo-brand-primary;
+        background-color: $o-brand-primary;
     }
     &.o_m2o_dropdown_option > a {
-        color: $odoo-brand-primary;
+        color: $o-brand-primary;
     }
     &.ui-state-focus > a,
     &.ui-state-focus.o_m2o_dropdown_option > a {
@@ -11,7 +11,6 @@
     }
 }
 
-$tag-border: #afafb6;
 .oe_dropdown, .oe_dropdown_toggle {
     position: relative;
     cursor: pointer;
@@ -25,7 +24,7 @@ $tag-border: #afafb6;
     position: absolute;
     z-index: 3;
     margin: 0;
-    border: 1px solid $tag-border;
+    border: 1px solid #afafb6;
     background: white;
     padding: 4px 0;
     min-width: 140px;
diff --git a/addons/web/static/src/scss/fields.scss b/addons/web/static/src/scss/fields.scss
index f28e3ba349c..04c81dab96c 100644
--- a/addons/web/static/src/scss/fields.scss
+++ b/addons/web/static/src/scss/fields.scss
@@ -112,10 +112,10 @@
             // o-kanban-colorpicker without customizing
             // '&:first-child > a::before' (transparent red-crossed colorpick)
             @mixin o-tag-colorpicker {
-                $o-tag-colorpicker-padding-right: $odoo-dropdown-hpadding - 2 * 5px; // FIXME was $o-kanban-inner-hmargin before scss convertion
+                $o-tag-colorpicker-padding-right: $o-dropdown-hpadding - 2 * 5px; // FIXME was $o-kanban-inner-hmargin before scss convertion
 
                 max-width: 100%;
-                padding: 3px $o-tag-colorpicker-padding-right 3px $odoo-dropdown-hpadding;
+                padding: 3px $o-tag-colorpicker-padding-right 3px $o-dropdown-hpadding;
 
                 > li {
                     display: inline-block;
@@ -136,7 +136,7 @@
 
                     &:last-of-type {
                         box-shadow: 0 0 0 0px white; // remove grey border on hide in kanban
-                        color: $odoo-main-text-color;
+                        color: $o-main-text-color;
                     }
                 }
             }
@@ -156,20 +156,20 @@
             }
         }
 
-        @for $size from 1 through $odoo-nb-ui-color {
+        @for $size from 1 through length($o-colors) {
             .o_tag_color_#{$size - 1} {
                 @if $size == 1 {
                     & {
                         background-color: white;
-                        color: nth($odoo-colors, $size);
-                        box-shadow: inset 0 0 0 2px nth($odoo-colors, $size);
+                        color: nth($o-colors, $size);
+                        box-shadow: inset 0 0 0 2px nth($o-colors, $size);
                     }
                     &::after {
-                        background-color: nth($odoo-colors, $size);
+                        background-color: nth($o-colors, $size);
                     }
                 } @else {
                     &, &::after {
-                        background-color: nth($odoo-colors, $size);
+                        background-color: nth($o-colors, $size);
                     }
                 }
             }
@@ -195,7 +195,7 @@
             }
 
             &.fa-star-o {
-                color: $odoo-main-color-muted;
+                color: $o-main-color-muted;
             }
             &.fa-star {
                 color: gold;
@@ -209,7 +209,7 @@
             font-size: 16px;
         }
         i.fa-star-o {
-            color: $odoo-main-color-muted;
+            color: $o-main-color-muted;
             &:hover {
                 color: gold;
             }
@@ -242,7 +242,7 @@
 
             > input {
                 @include o-flex(0, 0, auto);
-                margin: 0 $odoo-form-spacing-unit 0 0;
+                margin: 0 $o-form-spacing-unit 0 0;
             }
             > label {
                 margin: 0;
@@ -251,14 +251,14 @@
 
         &.o_horizontal {
             .o_radio_item {
-                margin-right: $odoo-form-spacing-unit * 2;
+                margin-right: $o-form-spacing-unit * 2;
             }
         }
 
         &.o_vertical {
             @include o-flex-flow(column, nowrap);
             .o_radio_item {
-                margin-bottom: $odoo-form-spacing-unit;
+                margin-bottom: $o-form-spacing-unit;
             }
         }
     }
@@ -274,7 +274,7 @@
             margin-right: 10px;
             border-radius: 100%;
             overflow: hidden;
-            background-color: $odoo-brand-optional;
+            background-color: $o-brand-optional;
 
             &:after { // Outside pie border to go over border-radius irregularities
                 content: " ";
@@ -289,7 +289,7 @@
                 @include o-transform-origin(0);
                 width: 50%;
                 height: 100%;
-                background-color: $odoo-view-background-color;
+                background-color: $o-view-background-color;
                 &.o_full {
                     background-color: inherit;
                 }
@@ -303,7 +303,7 @@
                 border-radius: 100%;
 
                 font-weight: 700;
-                color: $odoo-brand-primary;
+                color: $o-brand-primary;
             }
         }
     }
@@ -326,7 +326,7 @@
             width: 100%;
 
             color: white;
-            background-color: $odoo-brand-optional;
+            background-color: $o-brand-optional;
             opacity: 0;
             transition: opacity ease 400ms;
 
@@ -345,7 +345,7 @@
                     margin: 0px;
                     text-align: center;
                     &.o_select_file_button{
-                        background: $odoo-brand-optional;
+                        background: $o-brand-optional;
                     }
                     &.o_clear_file_button{
                         background: $brand-danger;
diff --git a/addons/web/static/src/scss/fields_extra.scss b/addons/web/static/src/scss/fields_extra.scss
index dd441c07710..7e45291305f 100644
--- a/addons/web/static/src/scss/fields_extra.scss
+++ b/addons/web/static/src/scss/fields_extra.scss
@@ -43,7 +43,7 @@
             margin-left: 5px;
 
             &:after { // Outside pie border to go over border-radius irregularities
-                border: 1px solid $odoo-brand-primary;
+                border: 1px solid $o-brand-primary;
             }
 
             .o_pie_value {
diff --git a/addons/web/static/src/scss/form_view.scss b/addons/web/static/src/scss/form_view.scss
index c5e0207022d..e4dfdca3811 100644
--- a/addons/web/static/src/scss/form_view.scss
+++ b/addons/web/static/src/scss/form_view.scss
@@ -1,5 +1,5 @@
 .o_form_view {
-    background-color: $odoo-view-background-color;
+    background-color: $o-view-background-color;
 
     // Utility classes
     .oe_form_box_info {
@@ -40,13 +40,13 @@
 
             @include o-align-items(baseline);
             min-width: 50px;
-            margin: 0 -$odoo-form-spacing-unit/2;
+            margin: 0 -$o-form-spacing-unit/2;
 
             > div, > span, > button, > label, > a, > input { // > * did not add a level of priority to the rule
                 @include o-flex(0, 0, auto);
                 width: auto!important;
-                margin-right: $odoo-form-spacing-unit/2;
-                margin-left: $odoo-form-spacing-unit/2;
+                margin-right: $o-form-spacing-unit/2;
+                margin-left: $o-form-spacing-unit/2;
             }
 
             > .o_row {
@@ -81,12 +81,12 @@
     .o_form_uri {
         display: inline-block;
 
-        color: $odoo-main-text-color;
+        color: $o-main-text-color;
         &:first-line {
             color: $link-color;
         }
         &:hover {
-            color: darken($odoo-main-text-color, 1%); // hack required on chrome
+            color: darken($o-main-text-color, 1%); // hack required on chrome
             &:first-line {
                 color: darken($link-color, 15%);
             }
@@ -100,7 +100,7 @@
         }
 
         .oe_title {
-            max-width: $container-sm - (2 * $odoo-horizontal-padding);
+            max-width: $container-sm - (2 * $o-horizontal-padding);
         }
 
         @media (min-width: $screen-xs-min) {
@@ -121,10 +121,10 @@
     // No sheet
     &.o_form_nosheet {
         display: block;
-        @include o-webclient-padding($top: $odoo-sheet-vpadding, $bottom: $odoo-sheet-vpadding);
+        @include o-webclient-padding($top: $o-sheet-vpadding, $bottom: $o-sheet-vpadding);
 
         .o_form_statusbar {
-            margin: -$odoo-sheet-vpadding -$odoo-horizontal-padding $odoo-sheet-vpadding -$odoo-horizontal-padding;
+            margin: -$o-sheet-vpadding -$o-horizontal-padding $o-sheet-vpadding -$o-horizontal-padding;
         }
     }
 
@@ -133,7 +133,7 @@
         position: relative;
 
         > .o_form_sheet {
-            margin: $odoo-sheet-vpadding auto;
+            margin: $o-sheet-vpadding auto;
         }
     }
 
@@ -142,9 +142,9 @@
         position: relative; // Needed for the "More" dropdown
         @include o-flex-display;
         @include o-justify-content(space-between);
-        padding-left: $odoo-horizontal-padding;
+        padding-left: $o-horizontal-padding;
         border-bottom: 1px solid $gray-lighter-darker;
-        background-color: $odoo-view-background-color;
+        background-color: $o-view-background-color;
 
         > .o_statusbar_buttons, > .o_statusbar_status {
             @include o-flex-display;
@@ -162,7 +162,7 @@
 
             > .btn {
                 $o-statusbar-buttons-vmargin: 4px;
-                min-height: $odoo-statusbar-height - 2 * $o-statusbar-buttons-vmargin;
+                min-height: $o-statusbar-height - 2 * $o-statusbar-buttons-vmargin;
                 margin: $o-statusbar-buttons-vmargin 3px $o-statusbar-buttons-vmargin 0;
                 padding-top: 2px;
                 padding-bottom: 2px;
@@ -177,21 +177,21 @@
             overflow-x: hidden; // to prevent horizontal scroll due to last arrow
 
             > .o_arrow_button {
-                min-height: $odoo-statusbar-height;
+                min-height: $o-statusbar-height;
                 font-size: 11px;
                 font-weight: bold;
                 position: relative;
-                padding-left: $odoo-statusbar-arrow-width*2;
+                padding-left: $o-statusbar-arrow-width*2;
                 color: $gray;
                 border-width: 0 0 0;
                 border-radius: 0;
                 @include o-transition(all, 0.1s);
 
                 &:first-child {
-                    padding-right: $odoo-horizontal-padding; // Compensate container padding
+                    padding-right: $o-horizontal-padding; // Compensate container padding
                 }
                 &:last-child {
-                    padding-left: $odoo-horizontal-padding - 1;
+                    padding-left: $o-horizontal-padding - 1;
                     border-left: 1px solid $gray-lighter-darker;
                 }
 
@@ -209,19 +209,19 @@
                 &:before, &:after {
                     content: " ";
                     display: block;
-                    @include o-position-absolute(0, -$odoo-statusbar-arrow-width + 1);
+                    @include o-position-absolute(0, -$o-statusbar-arrow-width + 1);
 
-                    border-top: floor($odoo-statusbar-height/2) solid transparent;
-                    border-bottom: ceil($odoo-statusbar-height/2) solid transparent;
+                    border-top: floor($o-statusbar-height/2) solid transparent;
+                    border-bottom: ceil($o-statusbar-height/2) solid transparent;
                     border-right: none;
-                    border-left: $odoo-statusbar-arrow-width solid $odoo-view-background-color;
+                    border-left: $o-statusbar-arrow-width solid $o-view-background-color;
                     @include o-transition(border, 0.2s);
                     -moz-transform: scale(0.9999); // Smooth the triangle on firefox
                 }
 
                 &:not(.disabled) {
                     &:hover, &:active, &:focus {
-                        color: $odoo-brand-optional;
+                        color: $o-brand-optional;
                         background-color: $gray-lighter;
 
                         &:after {
@@ -231,12 +231,12 @@
                 }
 
                 &:before {
-                    right: -$odoo-statusbar-arrow-width;
+                    right: -$o-statusbar-arrow-width;
                     border-left-color: $gray-lighter-dark;
                 }
 
                 &.btn-primary.disabled {
-                    color: $odoo-brand-primary;
+                    color: $o-brand-primary;
                     font-size: 11px;
                     background-color: $gray-lighter;
                     cursor: default;
@@ -266,7 +266,7 @@
             > .dropdown-toggle {
                 &:after {
                     @include o-caret-down;
-                    margin-left: $odoo-form-spacing-unit;
+                    margin-left: $o-form-spacing-unit;
                 }
             }
 
@@ -314,7 +314,7 @@
         margin: 10px 0;
 
         // o_group contains nested groups
-        @for $i from 1 through $odoo-form-group-cols {
+        @for $i from 1 through $o-form-group-cols {
             .o_group_col_#{$i} {
                 display: inline-block;
                 width: floor(100% / 12 * $i);
@@ -378,16 +378,16 @@
     // Separators
     .o_horizontal_separator {
         font-size: $font-size-h2;
-        margin: $odoo-form-spacing-unit 0;
+        margin: $o-form-spacing-unit 0;
         &:empty {
-            height: $odoo-form-spacing-unit * 2;
+            height: $o-form-spacing-unit * 2;
         }
     }
 
     // Notebooks
     .o_notebook {
         clear: both; // For the notebook not to have alongside floating elements
-        margin-top: $odoo-form-spacing-unit * 2;
+        margin-top: $o-form-spacing-unit * 2;
 
         .nav-tabs > .tab-pane {
             min-height: 100px;
@@ -396,14 +396,14 @@
 
     // Labels
     .o_form_label {
-        margin: 0 $odoo-form-spacing-unit 0 0;
+        margin: 0 $o-form-spacing-unit 0 0;
         font-size: $font-size-base; // The label muse have the same size whatever their position
         line-height: $line-height-base;
     }
 
     // Form fields
     .o_field_widget {
-        margin-bottom: $odoo-form-spacing-unit;
+        margin-bottom: $o-form-spacing-unit;
     }
     .o_field_widget, .btn {
         .o_field_widget {
@@ -554,7 +554,7 @@
 
     // Boolean
     .o_field_boolean {
-        margin: 0 $odoo-form-spacing-unit 0 0;
+        margin: 0 $o-form-spacing-unit 0 0;
     }
 
     // Timezone widget warning
@@ -580,7 +580,7 @@
 
         > tfoot > tr > td {
             padding: 3px;
-            color: $odoo-main-text-color;
+            color: $o-main-text-color;
         }
     }
     &.o_form_readonly .o_field_widget .o_list_view .o_row_handle {
@@ -590,9 +590,9 @@
     // Attachments
     .oe_attachment {
         display: inline-block;
-        border: 1px solid $odoo-brand-lightsecondary;
-        margin: 0 $odoo-form-spacing-unit $odoo-form-spacing-unit 0;
-        padding: $odoo-form-spacing-unit;
+        border: 1px solid $o-brand-lightsecondary;
+        margin: 0 $o-form-spacing-unit $o-form-spacing-unit 0;
+        padding: $o-form-spacing-unit;
     }
 
     &.oe_form_configuration {
@@ -653,7 +653,7 @@ label.o_light_label, .o_light_label label {
 // XXS form view specific rules
 @mixin form-break-table {
     display: block;
-    margin-bottom: $odoo-form-spacing-unit * 4;
+    margin-bottom: $o-form-spacing-unit * 4;
 
     > tbody {
         display: block;
@@ -671,11 +671,11 @@ label.o_light_label, .o_light_label label {
                 width: auto!important;  // !important is required to override the width computed in JS
                 &.o_td_label {
                     width: 94%!important; // The label must be on its own line except if the form field is small enough (checkbox)
-                    line-height: $odoo-label-font-size-factor;
+                    line-height: $o-label-font-size-factor;
                 }
 
                 .o_field_widget {
-                    margin-bottom: $odoo-form-spacing-unit * 2;
+                    margin-bottom: $o-form-spacing-unit * 2;
                     &.o_field_boolean {
                         margin-right: 0;
                     }
diff --git a/addons/web/static/src/scss/form_view_extra.scss b/addons/web/static/src/scss/form_view_extra.scss
index f401ecdda56..29c2512c1ab 100644
--- a/addons/web/static/src/scss/form_view_extra.scss
+++ b/addons/web/static/src/scss/form_view_extra.scss
@@ -1,8 +1,8 @@
-$sheet-max-width: 860px;
-$sheet-min-width: 650px;
-$sheet-padding: 16px;
-
 .o_form_view {
+    $sheet-max-width: 860px;
+    $sheet-min-width: 650px;
+    $sheet-padding: 16px;
+
     &.o_form_nosheet.oe_form_nomargin {
         margin: 0;
     }
@@ -75,7 +75,7 @@ $sheet-padding: 16px;
                 .o_stat_value {
                     @include o-text-overflow(block);
                     font-weight: 700;
-                    color: $odoo-brand-primary;
+                    color: $o-brand-primary;
                 }
                 .o_stat_text {
                     @include o-text-overflow(block);
@@ -144,7 +144,7 @@ $sheet-padding: 16px;
 
     // Separators
     .o_horizontal_separator {
-        color: $odoo-brand-optional;
+        color: $o-brand-optional;
         font-weight: bold;
     }
 
diff --git a/addons/web/static/src/scss/graph_view.scss b/addons/web/static/src/scss/graph_view.scss
index 62e94e926ce..4666d68ae61 100644
--- a/addons/web/static/src/scss/graph_view.scss
+++ b/addons/web/static/src/scss/graph_view.scss
@@ -3,7 +3,7 @@
         height: 100%;
         overflow: auto;
         svg {
-            background-color: $odoo-view-background-color;
+            background-color: $o-view-background-color;
         }
     }
 }
diff --git a/addons/web/static/src/scss/kanban_column_progressbar.scss b/addons/web/static/src/scss/kanban_column_progressbar.scss
index 9a54bbd8067..2cb35d33a2e 100644
--- a/addons/web/static/src/scss/kanban_column_progressbar.scss
+++ b/addons/web/static/src/scss/kanban_column_progressbar.scss
@@ -1,10 +1,9 @@
-$o-kanban-counter-header-height: $o-kanban-header-title-height*0.6;
 
 @mixin o-kanban-css-filter($class, $accent-color) {
     // Provide CSS reordering and highlight
     &.o_kanban_group_show_#{$class} {
-        $mix-soft: mix($accent-color, $odoo-webclient-background-color, 5%);
-        $mix-full: mix($accent-color, $odoo-webclient-background-color);
+        $mix-soft: mix($accent-color, $o-webclient-background-color, 5%);
+        $mix-full: mix($accent-color, $o-webclient-background-color);
 
         &, .o_kanban_header {
             background-color: $mix-soft;
@@ -44,7 +43,7 @@ $o-kanban-counter-header-height: $o-kanban-header-title-height*0.6;
 // If columns has the progressbar, adapt the layout
 .o_kanban_view .o_kanban_group.o_kanban_has_progressbar {
     > .o_kanban_header .o_kanban_header_title {
-        height: $o-kanban-counter-header-height;
+        height: $o-kanban-header-title-height*0.6;
         margin-top: 5px;
     }
 
diff --git a/addons/web/static/src/scss/kanban_dashboard.scss b/addons/web/static/src/scss/kanban_dashboard.scss
index 791b582efd1..3f3b2185b58 100644
--- a/addons/web/static/src/scss/kanban_dashboard.scss
+++ b/addons/web/static/src/scss/kanban_dashboard.scss
@@ -1,176 +1,3 @@
-// FIXME variables and mixins were moved from kanban_view.scss to here as this
-// file is placed before in the assets template (and changing file order may
-// break selector priorities).
-
-$o-kanban-record-margin: $odoo-horizontal-padding/2;
-$o-kanban-group-padding: $odoo-horizontal-padding; // Cannot be higher than this
-
-$o-kanban-default-record-width: 300px;
-$o-kanban-small-record-width: 240px;
-
-$o-kanban-header-title-height: 50px;
-
-$o-kanban-image-width: 64px;
-$o-kanban-inside-vgutter: 8px;
-$o-kanban-inside-hgutter: 8px;
-$o-kanban-color-border-width: 3px;
-$o-kanban-inside-hgutter-mobile: $odoo-horizontal-padding;
-$o-kanban-inner-hmargin: 5px;
-$o-kanban-progressbar-height: 20px;
-
-// ------- Kanban grouped mixins -------
-@mixin o-kanban-icon($base-opacity: 0.5) {
-    display: block;
-    text-align: center;
-    color: $odoo-main-text-color;
-    font-size: $font-size-small;
-    cursor: pointer;
-    @include o-hover-opacity($base-opacity);
-}
-@mixin o-kanban-tag-color {
-    @for $size from 1 through $odoo-nb-ui-color {
-        // Note: the first color is supposed to be invisible if there is a color
-        // field but it is used as a default color when there is no color field
-        &.o_tag_color_#{$size - 1} span {
-            background-color: nth($odoo-colors, $size);
-        }
-    }
-}
-@mixin o-kanban-record-color {
-    @for $size from 2 through $odoo-nb-ui-color {
-        // Note: the first color is not defined as it is the 'no color' for kanban
-        .oe_kanban_color_#{$size - 1}::after {
-            background-color: nth($odoo-colors, $size);
-        }
-    }
-}
-@mixin o-kanban-slim-col {
-    position: relative;
-    @include o-flex(0, 0, auto);
-    margin: 0;
-    padding: 0 floor($o-kanban-group-padding * 0.7);
-    cursor: pointer;
-}
-@mixin o-kanban-header-title {
-    @include o-flex-display;
-    @include o-align-items(center);
-    height: $o-kanban-header-title-height;
-    line-height: 2.2;
-    color: $headings-color;
-}
-@mixin o-kanban-v-title {
-    @include o-position-absolute($o-kanban-inside-vgutter * 2, $left: floor(-$o-kanban-inside-vgutter * 1.2));
-    @include o-transform-origin(left, bottom, $z: 0);
-    @include o-transform(rotate(90deg));
-    overflow: visible;
-    white-space: nowrap;
-    font-size: 15px;
-}
-
-// ------- Kanban records mixins -------
-@mixin o-kanban-record-title($font-size) {
-    color: $headings-color;
-    font-size: $font-size;
-    font-weight: 500;
-    margin-bottom: 0;
-    margin-top: 0;
-}
-@mixin o-kanban-dropdown($padding-base: $o-kanban-inside-vgutter) {
-    margin: -1px -1px auto auto; // compensate border
-    padding: $padding-base/2 $padding-base;
-    border: 1px solid transparent;
-    border-bottom: none;
-    vertical-align: top;
-    color: $text-color;
-
-    &:hover {
-        color: $headings-color;
-    }
-    &:focus, &:active, &:focus:active {
-        outline: none;
-    }
-}
-@mixin o-kanban-dropdown-open {
-    position: relative;
-    background: white;
-    border-color: $gray-lighter-darker;
-    z-index: $zindex-dropdown + 1;
-}
-@mixin o-kanban-dropdown-menu {
-    @include o-position-absolute($right: -1px);
-    margin-top: -1px;
-    border-color: $gray-lighter-darker;
-}
-@mixin o-kanban-colorpicker {
-    max-width: 150px;
-    padding: 3px ($odoo-dropdown-hpadding - $o-kanban-inner-hmargin) 3px $odoo-dropdown-hpadding;
-
-    > li {
-        display: inline-block;
-        margin: $o-kanban-inner-hmargin $o-kanban-inner-hmargin 0 0;
-        border: 1px solid white;
-        box-shadow: 0 0 0 1px $gray-lighter-dark;
-
-        > a {
-            display: block;
-
-            &::after {
-                content: "";
-                display: block;
-                width: 20px;
-                height: 15px;
-            }
-        }
-
-        // No Color
-        &:first-child > a {
-            position: relative;
-            &::before {
-                content: "";
-                @include o-position-absolute(-2px, $left: 10px);
-                display: block;
-                width: 1px;
-                height: 20px;
-                @include rotate(45deg);
-                background-color: red;
-            }
-            &::after {
-                background-color: white;
-            }
-        }
-    }
-}
-
-
-// ------- 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: $grid-gutter-width*0.5;
-$o-kanban-dashboard-vpadding: $grid-gutter-width*0.25;
-
-// Used to manage spacing in complex dropdown menu
-$o-kanban-dashboard-dropdown-complex-gap: 5px;
-
-// Emulate dropdown links
-@mixin o-kanban-dashboard-dropdown-link($link-padding-gap: $odoo-dropdown-hpadding) {
-    padding: 0;
-
-    > a {
-        margin: auto auto auto -$link-padding-gap;
-        padding: 3px $link-padding-gap;
-        color: $text-color;
-        display: block;
-
-        &:hover {
-            background-color: $gray-lighter-dark;
-            color: $headings-color;
-        }
-    }
-    &:last-child {
-        margin-bottom: 5px;
-    }
-}
 
 .o_kanban_view.o_kanban_dashboard {
     // correctly display the no_content_helper in dashboards
diff --git a/addons/web/static/src/scss/kanban_examples_dialog.scss b/addons/web/static/src/scss/kanban_examples_dialog.scss
index 2a27d2500b9..a42962ed8f0 100644
--- a/addons/web/static/src/scss/kanban_examples_dialog.scss
+++ b/addons/web/static/src/scss/kanban_examples_dialog.scss
@@ -1,7 +1,7 @@
 .o_kanban_examples_dialog {
     @include o-flex-display;
     padding: 0px;
-    background: $odoo-color-silver;
+    background: $o-color-silver;
 
     // sidebar
     .o_kanban_examples_dialog_nav {
@@ -15,7 +15,7 @@
 
             > a {
                 padding: 12px 15px;
-                color: $odoo-main-text-color;
+                color: $o-main-text-color;
                 border-left: 3px solid transparent;
                 &:focus {
                     outline: none;
@@ -23,7 +23,7 @@
             }
             &.active > a {
                 color: $headings-color;
-                border-left-color: $odoo-brand-optional;
+                border-left-color: $o-brand-optional;
                 font-weight: bold;
             }
         }
diff --git a/addons/web/static/src/scss/kanban_view.scss b/addons/web/static/src/scss/kanban_view.scss
index 0f7432cfae4..de9ea9a8411 100644
--- a/addons/web/static/src/scss/kanban_view.scss
+++ b/addons/web/static/src/scss/kanban_view.scss
@@ -372,7 +372,7 @@
         }
 
         &.o_kanban_dragged {
-            background-color: $odoo-main-text-color;
+            background-color: $o-main-text-color;
 
             .o_kanban_record {
                 visibility: hidden;
@@ -431,7 +431,7 @@
             .o_kanban_add_column {
                 display: inline-block;
                 padding: 10px 14px;
-                background-color: $odoo-color-silver-dark;
+                background-color: $o-color-silver-dark;
             }
             .o_kanban_title {
                 margin-left: 10px;
@@ -478,7 +478,7 @@
         @include o-flex-flow(row, wrap);
         @include o-justify-content(flex-start);
 
-        padding: $o-kanban-record-margin ($odoo-horizontal-padding - $o-kanban-record-margin);
+        padding: $o-kanban-record-margin ($o-horizontal-padding - $o-kanban-record-margin);
 
         .o_kanban_record {
             @include o-flex(1, 1, auto);
diff --git a/addons/web/static/src/scss/kanban_view_mobile.scss b/addons/web/static/src/scss/kanban_view_mobile.scss
index ebb5db45457..ed4e6ad8436 100644
--- a/addons/web/static/src/scss/kanban_view_mobile.scss
+++ b/addons/web/static/src/scss/kanban_view_mobile.scss
@@ -1,5 +1,3 @@
-$o-kanban-mobile-tabs-height: 40px;
-
 @media (max-width: $screen-xs-max) {
     .o_kanban_view.o_kanban_grouped {
         display: block;
@@ -21,7 +19,7 @@ $o-kanban-mobile-tabs-height: 40px;
 
                 &.o_current {
                     font-weight: bold;
-                    border-bottom: 3px solid $odoo-brand-optional;
+                    border-bottom: 3px solid $o-brand-optional;
                 }
                 .o_column_title {
                     white-space: nowrap;
diff --git a/addons/web/static/src/scss/layout_background.scss b/addons/web/static/src/scss/layout_background.scss
index b51cff84599..e23b2585b50 100644
--- a/addons/web/static/src/scss/layout_background.scss
+++ b/addons/web/static/src/scss/layout_background.scss
@@ -13,19 +13,19 @@
         margin-right: 16px;
     }
     h3 {
-        color: $odoo-brand-primary;
+        color: $o-brand-primary;
         font-weight: 700;
         max-width: 300px;
     }
 }
 .o_background_footer {
     ul {
-        border-top: 1px solid $odoo-brand-primary;
-        border-bottom: 1px solid $odoo-brand-primary;
+        border-top: 1px solid $o-brand-primary;
+        border-bottom: 1px solid $o-brand-primary;
         padding: 4px 0;
         margin: 0 0 4px 0;
         li {
-            color: $odoo-brand-primary;
+            color: $o-brand-primary;
         }
     }
 }
@@ -36,7 +36,7 @@
     background-repeat: no-repeat;
     min-height: 900px;
     thead tr th, h2 {
-        color: $odoo-brand-primary;
+        color: $o-brand-primary;
     }
     tbody {
         color: $gray;
@@ -57,7 +57,7 @@
             border-top: none !important;
         }
         tr:last-child td {
-            color: $odoo-brand-primary;
+            color: $o-brand-primary;
         }
     }
     #total {
diff --git a/addons/web/static/src/scss/layout_clean.scss b/addons/web/static/src/scss/layout_clean.scss
index 190e5c6862a..ecbdb02153f 100644
--- a/addons/web/static/src/scss/layout_clean.scss
+++ b/addons/web/static/src/scss/layout_clean.scss
@@ -10,16 +10,16 @@
 }
 .o_clean_footer {
     margin: 0 3px;
-    border-top: 3px solid $odoo-brand-primary;
+    border-top: 3px solid $o-brand-primary;
     h4 {
-        color: $odoo-brand-primary;
+        color: $o-brand-primary;
         font-weight: bolder;
     }
     .pagenumber {
         width: 35px;
         height: 35px;
-        border: 3px solid $odoo-brand-primary;
-        background-color: $odoo-brand-optional;
+        border: 3px solid $o-brand-primary;
+        background-color: $o-brand-optional;
         color: white;
         padding-top: 6px;
         text-align: center;
@@ -27,18 +27,18 @@
 }
 .o_report_layout_clean {
     h1, h2, h3 {
-        color: $odoo-brand-optional;
+        color: $o-brand-optional;
         font-weight: bolder;
     }
     strong {
-        color: $odoo-brand-primary;
+        color: $o-brand-primary;
     }
     table {
         thead {
-            color: $odoo-brand-primary;
+            color: $o-brand-primary;
             tr th {
                 text-align: left !important;
-                border-top: 3px solid $odoo-brand-primary !important;
+                border-top: 3px solid $o-brand-primary !important;
                 text-transform: uppercase;
             }
             tr th:last-child {
@@ -54,7 +54,7 @@
                 border-top: none;
             }
             tr:last-child td {
-                border-bottom: 3px solid $odoo-brand-primary;
+                border-bottom: 3px solid $o-brand-primary;
             }
             tr {
                 td {
diff --git a/addons/web/static/src/scss/list_view.scss b/addons/web/static/src/scss/list_view.scss
index 2c69f00e429..36bee4439c6 100644
--- a/addons/web/static/src/scss/list_view.scss
+++ b/addons/web/static/src/scss/list_view.scss
@@ -1,9 +1,8 @@
-$odoo-list-group-header-color: lighten($odoo-brand-lightsecondary, 10%);
 
 .o_list_view {
     position: relative;
     cursor: pointer;
-    background-color: $odoo-view-background-color;
+    background-color: $o-view-background-color;
     margin-bottom: 0px;
 
     &.table {
@@ -13,7 +12,7 @@ $odoo-list-group-header-color: lighten($odoo-brand-lightsecondary, 10%);
     }
 
     thead {
-        color: $odoo-main-text-color;
+        color: $o-main-text-color;
         border-bottom: 1px solid #cacaca;
         > tr > th {
             border-left: 1px solid #dfdfdf;
@@ -25,9 +24,9 @@ $odoo-list-group-header-color: lighten($odoo-brand-lightsecondary, 10%);
 
     tfoot {
         cursor: default;
-        color: $odoo-list-footer-color;
-        background-color: $odoo-list-footer-bg-color;
-        font-weight: $odoo-list-footer-font-weight;
+        color: $o-list-footer-color;
+        background-color: $o-list-footer-bg-color;
+        font-weight: $o-list-footer-font-weight;
         border-top: 2px solid #cacaca;
         border-bottom: 1px solid #cacaca;
     }
@@ -105,9 +104,9 @@ $odoo-list-group-header-color: lighten($odoo-brand-lightsecondary, 10%);
             padding-top: 0;
             padding-bottom: 0;
             .o_pager_previous, .o_pager_next {
-                background-color: $odoo-list-group-header-color;
+                background-color: $o-list-group-header-color;
                 &:hover {
-                    background-color: darken($odoo-list-group-header-color, 10%);
+                    background-color: darken($o-list-group-header-color, 10%);
                 }
             }
         }
@@ -118,11 +117,11 @@ $odoo-list-group-header-color: lighten($odoo-brand-lightsecondary, 10%);
 
     tbody {
         tr:focus-within {
-            background-color: $odoo-form-lightsecondary;
+            background-color: $o-form-lightsecondary;
         }
         tr{
             .focussed {
-                background-color: $odoo-form-lightsecondary;
+                background-color: $o-form-lightsecondary;
             }
         }
     }
diff --git a/addons/web/static/src/scss/model_field_selector.scss b/addons/web/static/src/scss/model_field_selector.scss
index e75204f6098..0eec3e60049 100644
--- a/addons/web/static/src/scss/model_field_selector.scss
+++ b/addons/web/static/src/scss/model_field_selector.scss
@@ -14,8 +14,8 @@
 
         > .o_field_selector_chain_part {
             padding: 0px 1px;
-            border: 1px solid darken($odoo-brand-lightsecondary, 10%);
-            background: $odoo-brand-lightsecondary;
+            border: 1px solid darken($o-brand-lightsecondary, 10%);
+            background: $o-brand-lightsecondary;
             margin-bottom: 1px;
         }
         > i {
diff --git a/addons/web/static/src/scss/navbar.scss b/addons/web/static/src/scss/navbar.scss
index 8273c30182d..0c3d46945c9 100644
--- a/addons/web/static/src/scss/navbar.scss
+++ b/addons/web/static/src/scss/navbar.scss
@@ -1,17 +1,17 @@
 
 .o_main_navbar {
     position: relative;
-    height: $odoo-navbar-height;
-    border-bottom: 1px solid $odoo-navbar-inverse-link-hover-bg;
-    background-color: $odoo-brand-primary;
+    height: $o-navbar-height;
+    border-bottom: 1px solid $o-navbar-inverse-link-hover-bg;
+    background-color: $o-brand-primary;
     color: white;
 
     > a, > button {
         float: left;
-        height: $odoo-navbar-height;
+        height: $o-navbar-height;
         border: none;
-        padding: 0 $odoo-horizontal-padding - 4px 0 $odoo-horizontal-padding;
-        line-height: $odoo-navbar-height;
+        padding: 0 $o-horizontal-padding - 4px 0 $o-horizontal-padding;
+        line-height: $o-navbar-height;
         background-color: transparent;
         text-align: center;
         color: inherit;
@@ -20,7 +20,7 @@
         @include user-select(none);
 
         &:hover, &:focus {
-            background-color: $odoo-navbar-inverse-link-hover-bg;
+            background-color: $o-navbar-inverse-link-hover-bg;
             color: inherit;
         }
         &:focus, &:active, &:focus:active {
@@ -36,12 +36,12 @@
         color: white;
         font-size: 22px;
         font-weight: 500;
-        line-height: $odoo-navbar-height;
+        line-height: $o-navbar-height;
 
         @media (max-width: $screen-xs-max) {
             float: none;
             margin: 0;
-            border-bottom: 1px solid $odoo-navbar-inverse-link-hover-bg;
+            border-bottom: 1px solid $o-navbar-inverse-link-hover-bg;
             color: transparent;
         }
     }
@@ -64,13 +64,13 @@
 
             > a {
                 display: block;
-                height: $odoo-navbar-height;
+                height: $o-navbar-height;
                 padding: 0 10px;
                 color: white;
-                line-height: $odoo-navbar-height;
+                line-height: $o-navbar-height;
 
                 &:hover {
-                    background-color: $odoo-navbar-inverse-link-hover-bg;
+                    background-color: $o-navbar-inverse-link-hover-bg;
                 }
 
                 &:focus, &:active, &:focus:active {
@@ -80,7 +80,7 @@
 
             &.o_extra_menu_items {
                 > a {
-                    width: $odoo-navbar-height;
+                    width: $o-navbar-height;
                     text-align: center;
                 }
                 &.open > ul {
@@ -88,12 +88,12 @@
 
                     > li {
                         > a {
-                            background-color: $odoo-brand-primary;
+                            background-color: $o-brand-primary;
                             color: white;
-                            border-bottom: 1px solid $odoo-brand-lightsecondary;
+                            border-bottom: 1px solid $o-brand-lightsecondary;
 
                             &.dropdown-toggle {
-                                background-color: lighten($odoo-brand-primary, 15%);
+                                background-color: lighten($o-brand-primary, 15%);
                                 pointer-events: none; // hack to prevent clicking on it because dropdown always opened
                             }
                         }
@@ -127,19 +127,19 @@
 
         @for $index from 3 through 5 {
             > li.o_menu_header_lvl_#{$index}, > li .o_menu_entry_lvl_#{$index} {
-                padding-left: $odoo-dropdown-hpadding + ($index - 2)*12px;
+                padding-left: $o-dropdown-hpadding + ($index - 2)*12px;
             }
         }
     }
 
     .open .dropdown-toggle {
-        background-color: $odoo-navbar-inverse-link-hover-bg;
+        background-color: $o-navbar-inverse-link-hover-bg;
     }
     .o_user_menu {
         margin-left: 6px;
 
         > a {
-            padding-right: $odoo-horizontal-padding;
+            padding-right: $o-horizontal-padding;
         }
 
         .oe_topbar_avatar {
@@ -152,7 +152,7 @@
         @include o-transition(height, 200ms, linear);
 
         position: relative;
-        height: $odoo-navbar-height;
+        height: $o-navbar-height;
         overflow: hidden;
 
         > ul {
@@ -186,15 +186,15 @@
             }
 
             &.o_menu_systray {
-                @include o-position-absolute(0px, $odoo-navbar-height, auto, $odoo-navbar-height);
-                height: $odoo-navbar-height;
+                @include o-position-absolute(0px, $o-navbar-height, auto, $o-navbar-height);
+                height: $o-navbar-height;
                 text-align: right;
 
                 > li {
                     display: inline-block;
 
                     &.open .dropdown-menu {
-                        @include o-position-absolute($odoo-navbar-height, 0, 0, 0);
+                        @include o-position-absolute($o-navbar-height, 0, 0, 0);
                         position: fixed;
                         width: auto;
                     }
diff --git a/addons/web/static/src/scss/pivot_view.scss b/addons/web/static/src/scss/pivot_view.scss
index 83b17a4e751..3efddd8eab2 100644
--- a/addons/web/static/src/scss/pivot_view.scss
+++ b/addons/web/static/src/scss/pivot_view.scss
@@ -5,27 +5,27 @@
     // items corresponding to the clicked cell
     &.o_enable_linking {
         .o_pivot_cell_value:hover {
-            color: $odoo-brand-optional;
+            color: $o-brand-optional;
             cursor: pointer;
         }
     }
 
     table {
-        background-color: $odoo-view-background-color;
+        background-color: $o-view-background-color;
         width: auto;  // bootstrap override
 
         th {
             font-weight: normal;  // bootstrap override
-            background-color: lighten($odoo-brand-secondary, 40%);
+            background-color: lighten($o-brand-secondary, 40%);
         }
 
         @mixin o-pivot-header-cell {
-            background-color: lighten($odoo-brand-secondary, 40%);
+            background-color: lighten($o-brand-secondary, 40%);
             cursor: pointer;
             white-space: nowrap;
             @include user-select(none);
             &:hover {
-                background-color: lighten($odoo-brand-secondary, 30%);
+                background-color: lighten($o-brand-secondary, 30%);
             }
         }
 
diff --git a/addons/web/static/src/scss/primary_variables.scss b/addons/web/static/src/scss/primary_variables.scss
new file mode 100644
index 00000000000..b394aeafe26
--- /dev/null
+++ b/addons/web/static/src/scss/primary_variables.scss
@@ -0,0 +1,92 @@
+///
+/// This file regroups the variables that style odoo components.
+/// They are available in every asset bundle.
+///
+
+// Font sizes
+$o-font-size-base: 13px;
+$o-line-height-base: 1.428571429; // This is BS default
+
+// Colors
+$o-brand-primary: #7c7bad;
+$o-brand-optional: #7c7bad;
+$o-brand-secondary: #f0eeee;
+$o-brand-lightsecondary: #e2e2e0;
+$o-color-silver: #F9F9F9;
+$o-color-silver-dark: #E5E5E5;
+$o-color-silver-darker: #d9d7d7;
+$o-color-gray-light: lighten(#000, 46.7%); // This is BS default
+
+$o-color-pink: #875A7B; // Enterprise $o-brand-primary
+$o-main-color-muted: #a8a8a8;
+$o-main-text-color: #4c4c4c;
+
+$o-view-background-color: white;
+$o-shadow-color: #303030;
+
+$o-form-lightsecondary: #ccc;
+
+$o-list-footer-bg-color: #eee;
+$o-list-footer-font-weight: bold;
+
+$o-tooltip-background-color: black;
+$o-tooltip-color: white;
+$o-tooltip-arrow-color: black;
+$o-tooltip-text-color: #777777;
+$o-tooltip-title-text-color: #4c4c4c;
+
+// Layout
+$screen-xs-min: 475px;
+$screen-xl-min: 1534px;
+
+$o-form-group-cols: 12;
+$o-form-spacing-unit: 5px;
+$o-horizontal-padding: 16px;
+$o-innergroup-rpadding: 45px;
+$o-dropdown-hpadding: 20px;
+
+$o-sheet-vpadding: 24px;
+
+$o-notification-error-bg-color: #F16567;
+$o-notification-info-bg-color: #FCFBEA;
+
+// Needed for having no spacing between sheet and mail body in mass_mailing:
+// Different required cancel paddings between web and web_enterprise
+$o-sheet-cancel-tpadding: 0px;
+
+$o-avatar-size: 90px;
+
+$o-statusbar-height: 33px;
+
+$o-label-font-size-factor: 0.8;
+$o-navbar-height: 34px;
+
+$o-nb-calendar-colors: 24;
+
+$o-base-settings-mobile-tabs-height: 40px;
+$o-base-settings-mobile-tabs-overflow-gap: 3%;
+
+$o-cp-breadcrumb-height: 30px;
+
+$o-datepicker-week-color: #8f8f8f;
+
+// Kanban
+
+$o-kanban-default-record-width: 300px;
+$o-kanban-small-record-width: 240px;
+
+$o-kanban-header-title-height: 50px;
+
+$o-kanban-image-width: 64px;
+$o-kanban-inside-vgutter: 8px;
+$o-kanban-inside-hgutter: 8px;
+$o-kanban-color-border-width: 3px;
+$o-kanban-inner-hmargin: 5px;
+$o-kanban-progressbar-height: 20px;
+
+$o-kanban-mobile-tabs-height: 40px;
+
+// ------- Kanban dashboard variables -------
+
+// Used to manage spacing in complex dropdown menu
+$o-kanban-dashboard-dropdown-complex-gap: 5px;
diff --git a/addons/web/static/src/scss/progress_bar.scss b/addons/web/static/src/scss/progress_bar.scss
index e4322845c45..8aaade8812f 100644
--- a/addons/web/static/src/scss/progress_bar.scss
+++ b/addons/web/static/src/scss/progress_bar.scss
@@ -14,16 +14,16 @@
         height: 15px;
         vertical-align: middle;
 
-        border: 1px solid lighten($odoo-brand-secondary, 25%);
+        border: 1px solid lighten($o-brand-secondary, 25%);
         overflow: hidden;
 
         background-color: white;
         &.o_progress_overflow {
-            background-color: $odoo-brand-secondary;
+            background-color: $o-brand-secondary;
         }
 
         .o_progressbar_complete {
-            background-color: $odoo-brand-optional;
+            background-color: $o-brand-optional;
             height: 100%;
         }
     }
diff --git a/addons/web/static/src/scss/rainbow.scss b/addons/web/static/src/scss/rainbow.scss
index 102b76f02f8..eb6f4ce3c59 100644
--- a/addons/web/static/src/scss/rainbow.scss
+++ b/addons/web/static/src/scss/rainbow.scss
@@ -1,13 +1,11 @@
 /**************  rainbow  *****************/
 
-// Variables
-$reward-size: 400px;
-$reward-size-mobile: 300px;
-$reward-text-color: #727880;
-$reward-base-time: 1.4s;
-
-// o_reward
 .o_reward {
+    $reward-size: 400px;
+    $reward-size-mobile: 300px;
+    $reward-text-color: #727880;
+    $reward-base-time: 1.4s;
+
     will-change: transform;
     z-index: $zindex-modal;
     padding: 50px;
diff --git a/addons/web/static/src/scss/search_view.scss b/addons/web/static/src/scss/search_view.scss
index 5f40760c2c6..f2b0f7fd14f 100644
--- a/addons/web/static/src/scss/search_view.scss
+++ b/addons/web/static/src/scss/search_view.scss
@@ -103,16 +103,16 @@
     cursor: pointer;
     @include user-select(none);  // Prevent text selection when toggling the dropdowns
     > a { // dropdown togglers
-        color: $odoo-main-text-color;
+        color: $o-main-text-color;
         &:hover {
             text-decoration: none;
             font-weight: bold;
-            color: darken($odoo-main-text-color, 10%);
+            color: darken($o-main-text-color, 10%);
         }
     }
     &.open > a {
         font-weight: bold;
-        color: darken($odoo-main-text-color, 10%);
+        color: darken($o-main-text-color, 10%);
     }
 }
 
diff --git a/addons/web/static/src/scss/search_view_extra.scss b/addons/web/static/src/scss/search_view_extra.scss
index 247b188c396..d2098a5f9c3 100644
--- a/addons/web/static/src/scss/search_view_extra.scss
+++ b/addons/web/static/src/scss/search_view_extra.scss
@@ -6,7 +6,7 @@
 
     .o_searchview_facet {
         border: 1px solid $gray-light;
-        background: lighten($odoo-brand-primary, 35%);
+        background: lighten($o-brand-primary, 35%);
 
         .o_searchview_facet_label {
             background-color: $gray-light;
@@ -28,7 +28,7 @@
         @include o-position-absolute($top: 6px, $right: 5px);
     }
     .o_searchview_autocomplete li.o-selection-focus {
-        background-color: $odoo-brand-primary;
+        background-color: $o-brand-primary;
         > a {
             color: white;
         }
diff --git a/addons/web/static/src/scss/secondary_variables.scss b/addons/web/static/src/scss/secondary_variables.scss
new file mode 100644
index 00000000000..8ab2d5bc322
--- /dev/null
+++ b/addons/web/static/src/scss/secondary_variables.scss
@@ -0,0 +1,43 @@
+// Define $gray-lighter-dark as a minor bootstrap $gray-lighter variation used
+// for design purposes only (e.g. cards' borders). We avoid to overwrite the
+// default $gray-light because it is deeply used by bootstrap to define muted
+// elements.
+$gray-lighter-dark: $o-color-silver-dark;
+$gray-lighter-darker: $o-color-silver-darker;
+
+$o-webclient-background-color: $o-color-silver;
+$o-control-panel-background-color: $o-color-silver;
+
+$o-list-footer-color: $o-main-text-color;
+$o-list-group-header-color: lighten($o-brand-lightsecondary, 10%);
+
+// UI custom colors for tags, kanban records' colors, ...)
+$o-colors: $o-color-gray-light, #F06050, #F4A460, #F7CD1F, #6CC1ED, #814968,
+              #EB7E7F, #2C8397, #475577, #D6145F, #30C381, #9365B8;
+
+$screen-xxs-max: ($screen-xs-min - 1);
+$screen-lg-max: ($screen-xl-min - 1);
+
+$o-sheet-cancel-hpadding: $o-horizontal-padding;
+$o-sheet-cancel-bpadding: $o-horizontal-padding;
+
+$o-statusbar-arrow-width: $o-statusbar-height / 3;
+$o-statusbar-disabled-bg: lighten($o-brand-lightsecondary, 7%);
+
+$o-navbar-inverse-link-hover-bg: darken($o-brand-primary, 10%);
+
+$o-datepicker-week-bg-color: lighten($o-datepicker-week-color, 30%);
+
+// Kanban
+
+$o-kanban-record-margin: $o-horizontal-padding / 2;
+$o-kanban-group-padding: $o-horizontal-padding; // Cannot be higher than this
+
+$o-kanban-inside-hgutter-mobile: $o-horizontal-padding;
+
+// ------- 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;
diff --git a/addons/web/static/src/scss/tooltip.scss b/addons/web/static/src/scss/tooltip.scss
index 79fb0b60fb7..765db1292da 100644
--- a/addons/web/static/src/scss/tooltip.scss
+++ b/addons/web/static/src/scss/tooltip.scss
@@ -7,17 +7,17 @@
     .tooltip-inner {
         max-width: 300px; // fallback for browsers which do not support "vw" unit
         max-width: 100vw;
-        background-color: $odoo-tooltip-background-color;
-        color: $odoo-tooltip-color;
+        background-color: $o-tooltip-background-color;
+        color: $o-tooltip-color;
         border-radius: $border-radius-base;
-        box-shadow: 0px 0px 1px 1px $odoo-brand-secondary;
+        box-shadow: 0px 0px 1px 1px $o-brand-secondary;
 
         padding: 5px;
 
         text-align: left;
 
         .oe_tooltip_string {
-            background-color: $odoo-brand-primary;
+            background-color: $o-brand-primary;
             color: white;
             font-weight: bold;
             padding: 5px;
@@ -42,18 +42,18 @@
     }
     &.top, &.top-left, &.top-right {
         .tooltip-arrow {
-            border-top-color: $odoo-tooltip-arrow-color!important;
+            border-top-color: $o-tooltip-arrow-color!important;
         }
     }
     &.bottom, &.bottom-left, &.bottom-right {
         .tooltip-arrow {
-            border-bottom-color: $odoo-tooltip-arrow-color!important;
+            border-bottom-color: $o-tooltip-arrow-color!important;
         }
     }
     &.left .tooltip-arrow {
-        border-left-color: $odoo-tooltip-arrow-color!important;
+        border-left-color: $o-tooltip-arrow-color!important;
     }
     &.right .tooltip-arrow {
-        border-right-color: $odoo-tooltip-arrow-color!important;
+        border-right-color: $o-tooltip-arrow-color!important;
     }
 }
diff --git a/addons/web/static/src/scss/utils.scss b/addons/web/static/src/scss/utils.scss
index 6db15976bd5..f64d50fd240 100644
--- a/addons/web/static/src/scss/utils.scss
+++ b/addons/web/static/src/scss/utils.scss
@@ -2,16 +2,6 @@
 /// This file regroups the odoo mixins. They are available in every asset bundle.
 ///
 
-// ------------------------------------------------------------------
-// Padding
-// ------------------------------------------------------------------
-@mixin o-webclient-padding($top: 0px, $right: $odoo-horizontal-padding, $bottom: 0px, $left: $odoo-horizontal-padding) {
-    padding-top: $top;
-    padding-right: $right;
-    padding-bottom: $bottom;
-    padding-left: $left;
-}
-
 // ------------------------------------------------------------------
 // Caret
 // ------------------------------------------------------------------
@@ -22,38 +12,6 @@
     height: 0;
     vertical-align: middle;
 }
-@mixin o-caret-down($caret-width: $caret-width-base) {
-    @include utils-caret-boilerplate;
-    border-bottom: 0;
-    border-left: $caret-width solid transparent;
-    border-right: $caret-width solid transparent;
-    border-top: $caret-width solid;
-    -moz-transform: scale(0.9999); // Smooth the caret on firefox
-}
-@mixin o-caret-up($caret-width: $caret-width-base) {
-    @include utils-caret-boilerplate;
-    border-bottom: $caret-width solid;
-    border-left: $caret-width solid transparent;
-    border-right: $caret-width solid transparent;
-    border-top: 0;
-    -moz-transform: scale(0.9999); // Smooth the caret on firefox
-}
-@mixin o-caret-left($caret-width: $caret-width-base) {
-    @include utils-caret-boilerplate;
-    border-bottom: $caret-width solid transparent;
-    border-left: 0;
-    border-right: $caret-width solid;
-    border-top: $caret-width solid transparent;
-    -moz-transform: scale(0.9999); // Smooth the caret on firefox
-}
-@mixin o-caret-right($caret-width: $caret-width-base) {
-    @include utils-caret-boilerplate;
-    border-bottom: $caret-width solid transparent;
-    border-left: $caret-width solid;
-    border-right: 0;
-    border-top: $caret-width solid transparent;
-    -moz-transform: scale(0.9999); // Smooth the caret on firefox
-}
 
 // ------------------------------------------------------------------
 // Vendor prefixes
@@ -120,33 +78,6 @@
     background-size: $size;
 }
 
-// ------------------------------------------------------------------
-// Dropdowns
-// ------------------------------------------------------------------
-@mixin o-selected-li {
-    li {
-        position: relative;
-        > a {
-            color: $odoo-main-text-color;
-            &:hover {
-                color: darken($odoo-main-text-color, 10%);
-            }
-        }
-        &.selected {
-            > a {
-                color: darken($odoo-main-text-color, 10%);
-                font-weight: bold;
-                &:before {
-                    font-family: FontAwesome;
-                    position: absolute;
-                    left: 6px;
-                    content: "\f00c";
-                }
-            }
-        }
-    }
-}
-
 // ------------------------------------------------------------------
 // Select Appearance
 // ------------------------------------------------------------------
@@ -265,6 +196,95 @@
         opacity: $hover-opacity;
     }
 }
+
+//------------------------------------------------------------------------------
+// Colors
+//------------------------------------------------------------------------------
+
+@function luma($color) {
+    @return ((red($color) * .299) + (green($color) * .587) + (blue($color) * .114)) / 255 * 100%;
+}
+@function o-get-most-contrast($color, $c1, $c2) {
+    $luma: luma($color);
+    @return if(abs($luma - luma($c1)) > abs($luma - luma($c2)), $c1, $c2);
+}
+
+// ------------------------------------------------------------------
+// Padding
+// ------------------------------------------------------------------
+@mixin o-webclient-padding($top: 0px, $right: $o-horizontal-padding, $bottom: 0px, $left: $o-horizontal-padding) {
+    padding-top: $top;
+    padding-right: $right;
+    padding-bottom: $bottom;
+    padding-left: $left;
+}
+
+// ------------------------------------------------------------------
+// Caret
+// ------------------------------------------------------------------
+@mixin o-caret-down($caret-width: $caret-width-base) {
+    @include utils-caret-boilerplate;
+    border-bottom: 0;
+    border-left: $caret-width solid transparent;
+    border-right: $caret-width solid transparent;
+    border-top: $caret-width solid;
+    -moz-transform: scale(0.9999); // Smooth the caret on firefox
+}
+@mixin o-caret-up($caret-width: $caret-width-base) {
+    @include utils-caret-boilerplate;
+    border-bottom: $caret-width solid;
+    border-left: $caret-width solid transparent;
+    border-right: $caret-width solid transparent;
+    border-top: 0;
+    -moz-transform: scale(0.9999); // Smooth the caret on firefox
+}
+@mixin o-caret-left($caret-width: $caret-width-base) {
+    @include utils-caret-boilerplate;
+    border-bottom: $caret-width solid transparent;
+    border-left: 0;
+    border-right: $caret-width solid;
+    border-top: $caret-width solid transparent;
+    -moz-transform: scale(0.9999); // Smooth the caret on firefox
+}
+@mixin o-caret-right($caret-width: $caret-width-base) {
+    @include utils-caret-boilerplate;
+    border-bottom: $caret-width solid transparent;
+    border-left: $caret-width solid;
+    border-right: 0;
+    border-top: $caret-width solid transparent;
+    -moz-transform: scale(0.9999); // Smooth the caret on firefox
+}
+
+// ------------------------------------------------------------------
+// Dropdowns
+// ------------------------------------------------------------------
+@mixin o-selected-li {
+    li {
+        position: relative;
+        > a {
+            color: $o-main-text-color;
+            &:hover {
+                color: darken($o-main-text-color, 10%);
+            }
+        }
+        &.selected {
+            > a {
+                color: darken($o-main-text-color, 10%);
+                font-weight: bold;
+                &:before {
+                    font-family: FontAwesome;
+                    position: absolute;
+                    left: 6px;
+                    content: "\f00c";
+                }
+            }
+        }
+    }
+}
+
+// ------------------------------------------------------------------
+// Hovering effects
+// ------------------------------------------------------------------
 @mixin o-hover-text-color($default-color: $text-color, $hover-color: $link-color) {
     color: $default-color;
 
@@ -273,11 +293,163 @@
     }
 }
 
-//------------------------------------------------------------------------------
-// Colors
-//------------------------------------------------------------------------------
+// ------------------------------------------------------------------
+// Mixin to define variations for btn-links and muted btn-links
+// ------------------------------------------------------------------
+@mixin o-btn-link-variant($color, $color-active) {
+    text-transform: none;
+    @include o-hover-text-color($default-color: $color, $hover-color: $color-active);
 
-@function o-get-most-contrast($color, $c1, $c2) {
-    $brightness: brightness($color);
-    @return if(abs($brightness - brightness($c1)) > abs($brightness - brightness($c2)), $c1, $c2);
+    &, &:hover, &:focus, &:active, &.active {
+        border-color: transparent;
+        background-color: transparent
+    }
+
+    &.text-muted, .text-muted {
+        @include o-hover-opacity;
+        @include o-hover-text-color($default-color: $text-muted, $hover-color: $color-active);
+    }
+}
+
+// ------- Kanban grouped mixins -------
+@mixin o-kanban-icon($base-opacity: 0.5) {
+    display: block;
+    text-align: center;
+    color: $o-main-text-color;
+    font-size: $font-size-small;
+    cursor: pointer;
+    @include o-hover-opacity($base-opacity);
+}
+@mixin o-kanban-tag-color {
+    @for $size from 1 through length($o-colors) {
+        // Note: the first color is supposed to be invisible if there is a color
+        // field but it is used as a default color when there is no color field
+        &.o_tag_color_#{$size - 1} span {
+            background-color: nth($o-colors, $size);
+        }
+    }
+}
+@mixin o-kanban-record-color {
+    @for $size from 2 through length($o-colors) {
+        // Note: the first color is not defined as it is the 'no color' for kanban
+        .oe_kanban_color_#{$size - 1}::after {
+            background-color: nth($o-colors, $size);
+        }
+    }
+}
+@mixin o-kanban-slim-col {
+    position: relative;
+    @include o-flex(0, 0, auto);
+    margin: 0;
+    padding: 0 floor($o-kanban-group-padding * 0.7);
+    cursor: pointer;
+}
+@mixin o-kanban-header-title {
+    @include o-flex-display;
+    @include o-align-items(center);
+    height: $o-kanban-header-title-height;
+    line-height: 2.2;
+    color: $headings-color;
+}
+@mixin o-kanban-v-title {
+    @include o-position-absolute($o-kanban-inside-vgutter * 2, $left: floor(-$o-kanban-inside-vgutter * 1.2));
+    @include o-transform-origin(left, bottom, $z: 0);
+    @include o-transform(rotate(90deg));
+    overflow: visible;
+    white-space: nowrap;
+    font-size: 15px;
+}
+
+// ------- Kanban records mixins -------
+@mixin o-kanban-record-title($font-size) {
+    color: $headings-color;
+    font-size: $font-size;
+    font-weight: 500;
+    margin-bottom: 0;
+    margin-top: 0;
+}
+@mixin o-kanban-dropdown($padding-base: $o-kanban-inside-vgutter) {
+    margin: -1px -1px auto auto; // compensate border
+    padding: $padding-base/2 $padding-base;
+    border: 1px solid transparent;
+    border-bottom: none;
+    vertical-align: top;
+    color: $text-color;
+
+    &:hover {
+        color: $headings-color;
+    }
+    &:focus, &:active, &:focus:active {
+        outline: none;
+    }
+}
+@mixin o-kanban-dropdown-open {
+    position: relative;
+    background: white;
+    border-color: $gray-lighter-darker;
+    z-index: $zindex-dropdown + 1;
+}
+@mixin o-kanban-dropdown-menu {
+    @include o-position-absolute($right: -1px);
+    margin-top: -1px;
+    border-color: $gray-lighter-darker;
+}
+@mixin o-kanban-colorpicker {
+    max-width: 150px;
+    padding: 3px ($o-dropdown-hpadding - $o-kanban-inner-hmargin) 3px $o-dropdown-hpadding;
+
+    > li {
+        display: inline-block;
+        margin: $o-kanban-inner-hmargin $o-kanban-inner-hmargin 0 0;
+        border: 1px solid white;
+        box-shadow: 0 0 0 1px $gray-lighter-dark;
+
+        > a {
+            display: block;
+
+            &::after {
+                content: "";
+                display: block;
+                width: 20px;
+                height: 15px;
+            }
+        }
+
+        // No Color
+        &:first-child > a {
+            position: relative;
+            &::before {
+                content: "";
+                @include o-position-absolute(-2px, $left: 10px);
+                display: block;
+                width: 1px;
+                height: 20px;
+                @include rotate(45deg);
+                background-color: red;
+            }
+            &::after {
+                background-color: white;
+            }
+        }
+    }
+}
+
+// Emulate dropdown links
+@mixin o-kanban-dashboard-dropdown-link($link-padding-gap: $o-dropdown-hpadding) {
+    padding: 0;
+
+    > a {
+        margin: auto auto auto -$link-padding-gap;
+        padding: 3px $link-padding-gap;
+        color: $text-color;
+        display: block;
+
+        &:hover {
+            background-color: $gray-lighter-dark;
+            color: $headings-color;
+        }
+    }
+    &:last-child {
+        margin-bottom: 5px;
+    }
 }
diff --git a/addons/web/static/src/scss/variables.scss b/addons/web/static/src/scss/variables.scss
deleted file mode 100644
index 20180488042..00000000000
--- a/addons/web/static/src/scss/variables.scss
+++ /dev/null
@@ -1,82 +0,0 @@
-///
-/// This file regroups the variables that style odoo components.
-/// They are available in every asset bundle.
-///
-
-// Font sizes
-$odoo-font-size-base: 13px;
-
-// Colors
-$odoo-brand-primary: #7c7bad;
-$odoo-brand-optional: #7c7bad;
-$odoo-brand-secondary: #f0eeee;
-$odoo-brand-lightsecondary: #e2e2e0;
-$odoo-color-silver: #F9F9F9;
-$odoo-color-silver-dark: #E5E5E5;
-$odoo-color-silver-darker: #d9d7d7;
-
-// Define $gray-lighter-dark as a minor bootstrap $gray-lighter variation used
-// for design purposes only (e.g. cards' borders). We avoid to overwrite the
-// default $gray-light because it is deeply used by bootstrap to define muted
-// elements.
-$gray-lighter-dark: $odoo-color-silver-dark;
-$gray-lighter-darker: $odoo-color-silver-darker;
-
-$odoo-color-pink: #875A7B; // Enterprise $odoo-brand-primary
-$odoo-main-color-muted: #a8a8a8;
-$odoo-main-text-color: #4c4c4c;
-
-$odoo-view-background-color: white;
-$odoo-shadow-color: #303030;
-
-$odoo-webclient-background-color: $odoo-color-silver;
-$odoo-control-panel-background-color: $odoo-color-silver;
-$odoo-form-lightsecondary: #ccc;
-
-$odoo-list-footer-color: $odoo-main-text-color;
-$odoo-list-footer-bg-color: #eee;
-$odoo-list-footer-font-weight: bold;
-
-$odoo-tooltip-background-color: black;
-$odoo-tooltip-color: white;
-$odoo-tooltip-arrow-color: black;
-$odoo-tooltip-text-color: #777777;
-$odoo-tooltip-title-text-color: #4c4c4c;
-
-// UI custom colors for tags, kanban records' colors, ...)
-$odoo-nb-ui-color: 12;
-$odoo-colors: $gray-light, #F06050, #F4A460, #F7CD1F, #6CC1ED, #814968,
-              #EB7E7F, #2C8397, #475577, #D6145F, #30C381, #9365B8;
-
-// Layout
-$screen-xs-min: 475px;
-$screen-xxs-max: ($screen-xs-min - 1);
-
-$screen-xl-min: 1534px;
-$screen-lg-max: ($screen-xl-min - 1);
-
-$odoo-form-group-cols: 12;
-$odoo-form-spacing-unit: 5px;
-$odoo-horizontal-padding: 16px;
-$odoo-innergroup-rpadding: 45px;
-$odoo-dropdown-hpadding: 20px;
-
-$border-radius-base: 3px;
-
-$odoo-sheet-vpadding: 24px;
-
-// Needed for having no spacing between sheet and mail body in mass_mailing:
-// Different required cancel paddings between web and web_enterprise
-$odoo-sheet-cancel-tpadding: 0px;
-$odoo-sheet-cancel-hpadding: $odoo-horizontal-padding;
-$odoo-sheet-cancel-bpadding: $odoo-horizontal-padding;
-
-$odoo-avatar-size: 90px;
-
-$odoo-statusbar-height: 33px;
-$odoo-statusbar-arrow-width: $odoo-statusbar-height/3;
-$odoo-statusbar-disabled-bg: lighten($odoo-brand-lightsecondary, 7%);
-
-$odoo-label-font-size-factor: 0.8;
-$odoo-navbar-height: 34px;
-$odoo-navbar-inverse-link-hover-bg: $navbar-inverse-link-active-bg;
diff --git a/addons/web/static/src/scss/views.scss b/addons/web/static/src/scss/views.scss
index 790cec7746d..e3562026ffe 100644
--- a/addons/web/static/src/scss/views.scss
+++ b/addons/web/static/src/scss/views.scss
@@ -51,12 +51,12 @@
         padding: 15px;
         z-index: 1000;
         text-align: center;
-        color: $odoo-tooltip-text-color;
+        color: $o-tooltip-text-color;
         font-size: 115%;
 
         > p:first-of-type {
             margin-top: 0;
-            color: $odoo-tooltip-title-text-color;
+            color: $o-tooltip-title-text-color;
             font-weight: bold;
             font-size: 125%;
         }
diff --git a/addons/web/static/src/scss/web_calendar.scss b/addons/web/static/src/scss/web_calendar.scss
index 257e81bc89a..7091cbc3c98 100644
--- a/addons/web/static/src/scss/web_calendar.scss
+++ b/addons/web/static/src/scss/web_calendar.scss
@@ -1,20 +1,18 @@
-$nb-calendar-colors: 24;
-
 @keyframes backgroundfade {
-    from {background-color: rgba($odoo-brand-primary, 0.5);}
+    from {background-color: rgba($o-brand-primary, 0.5);}
     to {background-color: #f5f5f5;}
 }
 
 .o_calendar_container {
     height: 100%;
-    @include o-webclient-padding($top: $odoo-horizontal-padding/2, $bottom: $odoo-horizontal-padding/2);
+    @include o-webclient-padding($top: $o-horizontal-padding/2, $bottom: $o-horizontal-padding/2);
     @include o-flex-display;
 
-    @for $index from 1 through $nb-calendar-colors {
+    @for $index from 1 through $o-nb-calendar-colors {
         .o_calendar_color_#{$index} {
             color: #0D0D0D;
-            background-color: adjust-hue(rgb(255, 192, 192), (360/($nb-calendar-colors+1) * $index) * 1deg);
-            border-color:  adjust-hue(rgb(255, 192, 192), (360/($nb-calendar-colors+1) * $index) * 1deg);
+            background-color: adjust-hue(rgb(255, 192, 192), (360/($o-nb-calendar-colors+1) * $index) * 1deg);
+            border-color:  adjust-hue(rgb(255, 192, 192), (360/($o-nb-calendar-colors+1) * $index) * 1deg);
             opacity: 0.7;
             &.o_event_hightlight {
                 font-weight: bold;
@@ -25,7 +23,7 @@ $nb-calendar-colors: 24;
             }
         }
         .o_underline_color_#{$index} {
-            border-bottom: 4px solid adjust-hue(rgba(255, 192, 192, 0.7), (360/($nb-calendar-colors+1) * $index) * 1deg);
+            border-bottom: 4px solid adjust-hue(rgba(255, 192, 192, 0.7), (360/($o-nb-calendar-colors+1) * $index) * 1deg);
         }
     }
 
@@ -35,12 +33,12 @@ $nb-calendar-colors: 24;
 
         .o_calendar_widget {
             height: 100%;
-            background-color: $odoo-view-background-color;
+            background-color: $o-view-background-color;
             * {
                 z-index: 0; // FIXME
             }
             .fc-week-number, .fc-widget-header {
-                background-color: lighten($odoo-brand-secondary, 30%);
+                background-color: lighten($o-brand-secondary, 30%);
             }
             .o_avatar_square {
                 border-radius: 5px;
@@ -64,14 +62,14 @@ $nb-calendar-colors: 24;
     }
 
     .o_calendar_sidebar_container {
-        @include o-flex(0, 0, $odoo-horizontal-padding);
+        @include o-flex(0, 0, $o-horizontal-padding);
         position: relative;
 
         &.o_sidebar_hidden {
-            margin-right: -$odoo-horizontal-padding; // hack to display the toggler in the gutter
+            margin-right: -$o-horizontal-padding; // hack to display the toggler in the gutter
             .o_calendar_sidebar_toggler {
                 padding: 4px;
-                color: darken($odoo-webclient-background-color, 30%);
+                color: darken($o-webclient-background-color, 30%);
             }
         }
 
@@ -88,7 +86,7 @@ $nb-calendar-colors: 24;
         .o_calendar_sidebar {
             width: 250px;
             margin-left: 8px;
-            background: $odoo-view-background-color;
+            background: $o-view-background-color;
         }
 
         .ui-datepicker {
@@ -101,7 +99,7 @@ $nb-calendar-colors: 24;
             .ui-widget-header {
                 @include o-flex-display;
                 background: none;
-                background-color: lighten($odoo-brand-secondary, 30%);
+                background-color: lighten($o-brand-secondary, 30%);
                 border-radius: 0;
 
                 .ui-datepicker-prev, .ui-datepicker-next {
@@ -110,7 +108,7 @@ $nb-calendar-colors: 24;
                     cursor: pointer;
                     padding: 2px;
                     text-align: center;
-                    color: $odoo-main-text-color;
+                    color: $o-main-text-color;
                     &.ui-state-hover {
                         background: none;
                         border: none;
@@ -144,31 +142,31 @@ $nb-calendar-colors: 24;
             table {
                 td {
                     padding: 0 2px 2px 0;
-                    background-color: $odoo-view-background-color;
+                    background-color: $o-view-background-color;
                     a {
                         border: none;
                         background: none;
-                        background-color: lighten($odoo-brand-secondary, 40%);
+                        background-color: lighten($o-brand-secondary, 40%);
                         text-align: center;
                     }
                 }
                 .ui-state-default {
-                    color: $odoo-brand-primary;
+                    color: $o-brand-primary;
                     &:hover {
                         background: none;
-                        background-color: rgba($odoo-brand-primary, 0.5);
-                        border-color: $odoo-brand-primary;
-                        color: $odoo-view-background-color;
+                        background-color: rgba($o-brand-primary, 0.5);
+                        border-color: $o-brand-primary;
+                        color: $o-view-background-color;
                     };
                 }
                 .ui-state-active {
                     background: none;
-                    background-color: $odoo-brand-primary;
-                    color: $odoo-view-background-color;
+                    background-color: $o-brand-primary;
+                    color: $o-view-background-color;
                 }
                 .o_selected_range.o_color {
                     background: none;
-                    background-color: $odoo-brand-primary;
+                    background-color: $o-brand-primary;
                     animation: backgroundfade 3s forwards;
                 }
             }
diff --git a/addons/web/static/src/scss/webclient.scss b/addons/web/static/src/scss/webclient.scss
index d4bd0b4e0f2..b0f38b37fea 100644
--- a/addons/web/static/src/scss/webclient.scss
+++ b/addons/web/static/src/scss/webclient.scss
@@ -3,14 +3,12 @@
 // ------------------------------------------------------------------
 .o_web_client {
     position: relative; // normally useless but required by bootstrap-datepicker
-    background-color: $odoo-webclient-background-color;
+    background-color: $o-webclient-background-color;
 }
 
 // ------------------------------------------------------------------
 // Misc. widgets
 // ------------------------------------------------------------------
-$notification-error-bg-color: #F16567;
-$notification-info-bg-color: #FCFBEA;
 .o_notification_manager {
     width: 300px;
     max-width: 100%;
@@ -24,8 +22,8 @@ $notification-info-bg-color: #FCFBEA;
 
         opacity: 0;
 
-        background-color: $notification-info-bg-color;
-        box-shadow: 0px 0px 5px 1px $odoo-main-text-color;
+        background-color: $o-notification-info-bg-color;
+        box-shadow: 0px 0px 5px 1px $o-main-text-color;
 
         position: relative;
         .o_close {
@@ -56,7 +54,7 @@ $notification-info-bg-color: #FCFBEA;
 
         &.o_error {
             color: white;
-            background-color: $notification-error-bg-color;
+            background-color: $o-notification-error-bg-color;
         }
     }
 }
@@ -103,7 +101,7 @@ div.o_boolean_toggle {
     }
 
     > input:checked + .slider {
-        background-color: $odoo-brand-optional;
+        background-color: $o-brand-optional;
 
         &:before {
             @include translate(14px, 0px);
diff --git a/addons/web/static/src/scss/webclient_extra.scss b/addons/web/static/src/scss/webclient_extra.scss
index 701cfe2a9b3..cc87e526f8d 100644
--- a/addons/web/static/src/scss/webclient_extra.scss
+++ b/addons/web/static/src/scss/webclient_extra.scss
@@ -7,7 +7,7 @@
     outline: none;
 }
 .o_input {
-    border: 1px solid $odoo-form-lightsecondary;
+    border: 1px solid $o-form-lightsecondary;
     border-radius: $border-radius-base;
     padding: 2px 4px;
     color: #1f1f1f;
@@ -29,7 +29,7 @@ select {
     top: 0;
     right: 50%;
     padding: 4px 12px;
-    background-color: $odoo-color-pink;
+    background-color: $o-color-pink;
     color: white;
     text-align: center;
     border-top: none;
@@ -44,3 +44,8 @@ select {
     @include o-text-overflow;
     max-width: 150px;
 }
+
+// Button
+.btn-icon {
+    @include button-variant($btn-default-color, $btn-default-bg, $btn-default-border);
+}
diff --git a/addons/web/static/src/scss/webclient_layout.scss b/addons/web/static/src/scss/webclient_layout.scss
index 14892617b5e..f811df48802 100644
--- a/addons/web/static/src/scss/webclient_layout.scss
+++ b/addons/web/static/src/scss/webclient_layout.scss
@@ -1,4 +1,3 @@
-$odoo-submenu-width: 220px;
 
 .o_web_client {
     @include o-flex-display;
@@ -37,11 +36,11 @@ $odoo-submenu-width: 220px;
         height: 100%;
 
         .o_sub_menu {
-            @include o-flex(0, 0, $odoo-submenu-width);
+            @include o-flex(0, 0, 220px);
             @include o-flex-display;
             @include o-flex-flow(column, nowrap);
-            border-right: 1px solid darken($odoo-control-panel-background-color, 20%);
-            background-color: $odoo-control-panel-background-color;
+            border-right: 1px solid darken($o-control-panel-background-color, 20%);
+            background-color: $o-control-panel-background-color;
 
             .o_sub_menu_logo {
                 @include o-flex(0, 0, auto);
@@ -75,13 +74,13 @@ $odoo-submenu-width: 220px;
                 .oe_secondary_menu_section {
                     font-weight: bold;
                     margin-left: 8px;
-                    color: $odoo-brand-optional;
+                    color: $o-brand-optional;
                 }
                 .oe_secondary_submenu {
                     margin: 3px 0px 10px;
                     line-height: 1.1em;
                     >li:not(.active) > a {
-                        color: $odoo-main-text-color;
+                        color: $o-main-text-color;
                     }
                     > li > a {
                         padding: 4px 4px 4px 18px;
@@ -135,7 +134,7 @@ $odoo-submenu-width: 220px;
                 > a {
                     font-weight: bold;
                     > span {
-                        color: $odoo-color-pink;
+                        color: $o-color-pink;
                     }
                 }
             }
diff --git a/addons/web/views/webclient_templates.xml b/addons/web/views/webclient_templates.xml
index 76a1e197373..ae3b882e764 100644
--- a/addons/web/views/webclient_templates.xml
+++ b/addons/web/views/webclient_templates.xml
@@ -1,17 +1,40 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
-    <template id="web._assets_helpers">
-        <link rel="stylesheet" type="text/scss" href="/web/static/lib/bootstrap/scss/bootstrap/_variables.scss"/>
-        <link rel="stylesheet" type="text/scss" href="/web/static/lib/bootstrap/scss/bootstrap/mixins/_vendor-prefixes.scss"/>
-        <link rel="stylesheet" type="text/scss" href="/web/static/lib/bootstrap/scss/bootstrap/mixins/_buttons.scss"/>
-        <link rel="stylesheet" type="text/scss" href="/web/static/lib/bootstrap/scss/bootstrap/mixins/_clearfix.scss"/>
-        <link rel="stylesheet" type="text/scss" href="/web/static/lib/bootstrap/scss/bootstrap/mixins/_size.scss"/>
-
-        <link rel="stylesheet" type="text/scss" href="/web/static/src/scss/variables.scss"/>
+    <template id="_assets_utils">
+        <link rel="stylesheet" type="text/scss" href="/web/static/lib/bootstrap/scss/bootstrap/_mixins.scss"/>
         <link rel="stylesheet" type="text/scss" href="/web/static/src/scss/utils.scss"/>
     </template>
 
-    <template id="web.assets_common" name="Common Assets (used in backend interface and website)">
+    <template id="_assets_primary_variables">
+        <link rel="stylesheet" type="text/scss" href="/web/static/src/scss/primary_variables.scss"/>
+    </template>
+
+    <template id="_assets_secondary_variables">
+        <link rel="stylesheet" type="text/scss" href="/web/static/src/scss/secondary_variables.scss"/>
+    </template>
+
+    <template id="_assets_helpers">
+        <t t-call="web._assets_utils"/>
+        <t t-call="web._assets_primary_variables"/>
+        <t t-call="web._assets_secondary_variables"/>
+
+        <!-- Bootstrap variables should not be necessary, all pages come with bootstrap in at least one of their -->
+        <!-- bundle and, ideally, these should be available in all assets... with their odoo override. This system -->
+        <!-- however works for now as non-backend and non-frontend assets do not need overriden BS variables yet. -->
+        <link t-if="not no_bs_vars" rel="stylesheet" type="text/scss" href="/web/static/lib/bootstrap/scss/bootstrap/_variables.scss"/>
+    </template>
+
+    <template id="_assets_backend_helpers">
+        <t t-call="web._assets_helpers"><t t-set="no_bs_vars" t-value="True"/></t>
+        <link rel="stylesheet" type="text/scss" href="/web/static/src/scss/bootstrap_overridden.scss"/>
+    </template>
+
+    <template id="_assets_frontend_helpers">
+        <t t-call="web._assets_helpers"><t t-set="no_bs_vars" t-value="True"/></t>
+        <link rel="stylesheet" type="text/scss" href="/web/static/src/scss/bootstrap_overridden_frontend.scss"/>
+    </template>
+
+    <template id="assets_common" name="Common Assets (used in backend interface and website)">
         <t t-call="web._assets_helpers"/>
 
         <link rel="stylesheet" type="text/css" href="/web/static/lib/jquery.ui/jquery-ui.css"/>
@@ -97,14 +120,13 @@
         <script type="text/javascript" src="/web/static/src/js/widgets/rainbow_man.js"></script>
     </template>
 
-    <template id="web.assets_backend" name="Backend Assets (used in backend interface)">
-        <t t-call="web._assets_helpers"/>
+    <template id="assets_backend" name="Backend Assets (used in backend interface)">
+        <t t-call="web._assets_backend_helpers"/>
 
         <link rel="stylesheet" type="text/scss" href="/web/static/src/scss/import_bootstrap.scss"/>
 
         <link rel="stylesheet" type="text/css" href="/base/static/src/css/modules.css"/>
 
-        <link rel="stylesheet" type="text/scss" href="/web/static/src/scss/bootstrap_overridden.scss"/>
         <link rel="stylesheet" type="text/scss" href="/web/static/src/scss/webclient_extra.scss"/>
         <link rel="stylesheet" type="text/scss" href="/web/static/src/scss/webclient_layout.scss"/>
 
@@ -256,7 +278,7 @@
     </template>
 
     <template id="web.assets_frontend" name="Website Assets">
-        <t t-call="web._assets_helpers"/>
+        <t t-call="web._assets_frontend_helpers"/>
 
         <link rel="stylesheet" type="text/scss" href="/web/static/src/scss/import_bootstrap.scss"/>
 
diff --git a/addons/web_editor/static/src/scss/web_editor.common.scss b/addons/web_editor/static/src/scss/web_editor.common.scss
index 577e2e568b3..2d760ff3193 100644
--- a/addons/web_editor/static/src/scss/web_editor.common.scss
+++ b/addons/web_editor/static/src/scss/web_editor.common.scss
@@ -232,41 +232,6 @@ a.o_underline {
     }
 }
 
-// Colors
-$gray-white: #fff;
-
-$color-alpha: #1cc1a9;
-$color-beta: #875A7B;
-$color-gamma: #BA3C3D;
-$color-delta: #0D6759;
-$color-epsilon: #0B2E59;
-
-// Greyscale transparent colours
-$color-black-25: rgba(black, 0.25);
-$color-black-50: rgba(black, 0.5);
-$color-black-75: rgba(black, 0.75);
-$color-white-25: rgba(white, 0.25);
-$color-white-50: rgba(white, 0.5);
-$color-white-75: rgba(white, 0.75);
-
-@mixin o-create-color-classes($name, $color, $complementary: o-get-most-contrast($color, $text-color, #FFF), $content-color: $color) {
-    .bg-#{$name} {
-        background-color: $color;
-        color: $complementary;
-        .text-muted {
-            color: rgba($complementary, 0.4);
-        }
-    }
-    body .text-#{$name} { // body to make the rules more important that bg-* ones
-        color: $content-color;
-    }
-}
-@mixin o-create-color-btn-classes($name, $color, $complementary: o-get-most-contrast($color, $text-color, #FFF), $border-color: darken($color, 5%)) {
-    .btn-#{$name} {
-        @include button-variant($complementary, $color, $border-color);
-    }
-}
-
 // Create classes for theme colors...
 @include o-create-color-classes(alpha, $color-alpha);
 @include o-create-color-classes(beta, $color-beta);
diff --git a/addons/web_editor/static/src/scss/web_editor.ui.scss b/addons/web_editor/static/src/scss/web_editor.ui.scss
index 5d848a481e4..0208a43509c 100644
--- a/addons/web_editor/static/src/scss/web_editor.ui.scss
+++ b/addons/web_editor/static/src/scss/web_editor.ui.scss
@@ -18,7 +18,7 @@
 #web_editor-top-edit {
     @include o-position-absolute(0, 0, auto, 0);
     position: fixed;
-    height: $odoo-navbar-height;
+    height: $o-navbar-height;
     z-index: $zindex-modal - 9;
 
     background-color: rgba(0,0,0,0);
@@ -59,7 +59,7 @@
             }
 
             &.btn-primary {
-                @include button-variant(white, $odoo-brand-primary, $odoo-brand-primary);
+                @include button-variant(white, $o-brand-primary, $o-brand-primary);
             }
             &.btn-default {
                 @include button-variant(white, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
@@ -86,16 +86,13 @@
     padding: 4px;
 }
 html[lang] > body.editor_enable [data-oe-translation-state] {
-    $o-color-content-to-translate: rgb(255, 255, 90);
-    $o-color-translated-content: rgb(120, 215, 110);
-
-    background: rgba($o-color-content-to-translate, 0.5)!important;
+    background: rgba($o-we-content-to-translate-color, 0.5)!important;
 
     &[data-oe-translation-state="translated"] {
-        background: rgba($o-color-translated-content, 0.5)!important;
+        background: rgba($o-we-translated-content-color, 0.5)!important;
     }
     &.o_dirty {
-        background: rgba($o-color-translated-content, 0.25)!important;
+        background: rgba($o-we-translated-content-color, 0.25)!important;
     }
 }
 
@@ -118,8 +115,8 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
 
     #snippets_menu {
         @include o-flex(0, 0, auto);
-        height: $odoo-navbar-height;
-        line-height: $odoo-navbar-height;
+        height: $o-navbar-height;
+        line-height: $o-navbar-height;
         margin: 0;
         padding: 0;
         background: $o-we-color-dark;
@@ -254,28 +251,24 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
 // DROPZONES
 @keyframes dropZoneInsert {
     to {
-        background-color: rgba($odoo-brand-primary, 0.2);
+        background-color: rgba($o-brand-primary, 0.2);
     }
 }
 #wrapwrap .oe_drop_zone {
-    background-color: rgba($odoo-brand-primary, 0.05);
+    background-color: rgba($o-brand-primary, 0.05);
     @include o-animation(dropZoneInsert, 1s, linear, 0s, infinite, alternate);
 
     &.oe_insert {
-        $odoo-dropzone-size: 40px;
-        $odoo-dropzone-border-width: 2px;
-        $odoo-dropzone-border: $odoo-dropzone-border-width dashed $odoo-brand-primary;
-
         z-index: 999;
 
-        border: $odoo-dropzone-border;
+        border: $o-we-dropzone-border;
         border-top: none;
         border-bottom: none;
 
         position: relative;
         width: 100%;
-        height: $odoo-dropzone-size;
-        margin: -$odoo-dropzone-size/2 0;
+        height: $o-we-dropzone-size;
+        margin: -$o-we-dropzone-size/2 0;
 
         @include o-transition(margin, 400ms, linear);
 
@@ -284,24 +277,24 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
             display: block;
             width: 100%;
             height: 50%;
-            border-bottom: $odoo-dropzone-border;
+            border-bottom: $o-we-dropzone-border;
             box-sizing: content-box;
         }
 
         &.oe_vertical {
-            border: 2px dashed $odoo-brand-primary;
+            border: 2px dashed $o-brand-primary;
             border-left: none;
             border-right: none;
 
-            width: $odoo-dropzone-size;
+            width: $o-we-dropzone-size;
             float: left;
-            margin: 0 -$odoo-dropzone-size/2;
+            margin: 0 -$o-we-dropzone-size/2;
 
             &:after {
                 width: 50%;
                 height: 100%;
                 border-bottom: none;
-                border-right: $odoo-dropzone-border;
+                border-right: $o-we-dropzone-border;
             }
         }
     }
@@ -309,9 +302,6 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
 
 // MANIPULATORS
 #oe_manipulators {
-    $odoo-handle-edge-size: 1px;
-    $odoo-handle-border-width: 1px;
-
     position: relative;
 
     // SNIPPET MANIPULATORS
@@ -341,14 +331,12 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
                 white-space: nowrap;
 
                 .btn {
-                    $o-overlay-option-size: 25px;
-
                     display: inline-block;
-                    width: $o-overlay-option-size;
-                    height: $o-overlay-option-size;
+                    width: $o-we-overlay-option-size;
+                    height: $o-we-overlay-option-size;
                     padding: 0;
                     border: 1px solid $o-we-color-dark;
-                    line-height: $o-overlay-option-size;
+                    line-height: $o-we-overlay-option-size;
                     font-size: 11px;
                     border-radius: 0;
                     font-weight: normal;
@@ -485,7 +473,7 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
                                     @include o-position-absolute($top: 5px, $left: 5px);
                                     content: "\f00c";
                                     font-family: "FontAwesome";
-                                    color: $odoo-brand-optional;
+                                    color: $o-brand-optional;
                                 }
                             }
                             &.dropdown-header {
@@ -544,29 +532,26 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
 
         &.o_top_cover > .oe_overlay_options {
             bottom: auto;
-            top: $odoo-handle-border-width;
-            right: $odoo-handle-border-width;
+            top: $o-we-handle-border-width;
+            right: $o-we-handle-border-width;
         }
 
         // HANDLES
         > .o_handles {
-            $o-handles-offset-to-hide: 10000px;
-            $o-handless-accent-color: #00e2ff;
-            @include o-position-absolute(-$o-handles-offset-to-hide, 0, auto, 0);
+            @include o-position-absolute(-$o-we-handles-offset-to-hide, 0, auto, 0);
 
             &:hover > .o_handle {
-                background-color: rgba($o-handless-accent-color, 0.05);
+                background-color: rgba($o-we-handles-accent-color, 0.05);
             }
 
             > .o_handle {
-                $o-handle-btn-size: 18px;
 
                 position: relative;
-                border: 0 solid $o-handless-accent-color;
+                border: 0 solid $o-we-handles-accent-color;
                 @include o-transition(background, 300ms);
 
                 &:hover, &.o_active {
-                    background-color: rgba($o-handless-accent-color, 0.2);
+                    background-color: rgba($o-we-handles-accent-color, 0.2);
 
                     &:before {
                         content: '';
@@ -574,7 +559,7 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
                         width: 1px;
                         height: 100%;
                         margin-left: -1px;
-                        background-color: rgba($o-handless-accent-color, 0.5);
+                        background-color: rgba($o-we-handles-accent-color, 0.5);
                     }
 
                     &.w:before {
@@ -584,20 +569,20 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
                     }
 
                     &:after {
-                        border-color: darken($o-handless-accent-color, 10%);
-                        background-color: darken($o-handless-accent-color, 20%);
+                        border-color: darken($o-we-handles-accent-color, 10%);
+                        background-color: darken($o-we-handles-accent-color, 20%);
                     }
                 }
 
                 &:after {
                     display: block;
-                    width: $o-handle-btn-size;
-                    height: $o-handle-btn-size;
-                    border: solid 1px darken($o-handless-accent-color, 10%);
-                    line-height: $o-handle-btn-size - 2;
+                    width: $o-we-handles-btn-size;
+                    height: $o-we-handles-btn-size;
+                    border: solid 1px darken($o-we-handles-accent-color, 10%);
+                    line-height: $o-we-handles-btn-size - 2;
                     font-size: 14px;
                     font-family: FontAwesome;
-                    background-color: darken($o-handless-accent-color, 20%);
+                    background-color: darken($o-we-handles-accent-color, 20%);
                     color: white;
                 }
                 &.w:after, &.e:after {
@@ -625,46 +610,46 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
                 }
 
                 &.w {
-                    @include o-position-absolute($o-handles-offset-to-hide, auto, -$o-handles-offset-to-hide, 0);
-                    width: $odoo-handle-edge-size;
-                    border-width: $odoo-handle-border-width;
+                    @include o-position-absolute($o-we-handles-offset-to-hide, auto, -$o-we-handles-offset-to-hide, 0);
+                    width: $o-we-handle-edge-size;
+                    border-width: $o-we-handle-border-width;
                     border-right-width: 0;
                     cursor: e-resize;
 
                     &:after {
                         @include o-position-absolute($top: 50%, $left: 40%);
-                        margin-top: -$o-handle-btn-size/2;
+                        margin-top: -$o-we-handles-btn-size/2;
                     }
                 }
                 &.e {
-                    @include o-position-absolute($o-handles-offset-to-hide, 0, -$o-handles-offset-to-hide, auto);
-                    width: $odoo-handle-edge-size;
-                    border-right-width: $odoo-handle-border-width;
+                    @include o-position-absolute($o-we-handles-offset-to-hide, 0, -$o-we-handles-offset-to-hide, auto);
+                    width: $o-we-handle-edge-size;
+                    border-right-width: $o-we-handle-border-width;
                     cursor: w-resize;
 
                     &:after {
                         @include o-position-absolute($top: 50%, $right: 40%);
-                        margin-top: -$o-handle-btn-size/2;
+                        margin-top: -$o-we-handles-btn-size/2;
                     }
                 }
                 &.n {
-                    @include o-position-absolute($o-handles-offset-to-hide, 0, auto, 0);
-                    border-top-width: $odoo-handle-border-width;
+                    @include o-position-absolute($o-we-handles-offset-to-hide, 0, auto, 0);
+                    border-top-width: $o-we-handle-border-width;
                     cursor: ns-resize;
 
                     &:after {
                         @include o-position-absolute($left: 50%, $top: 40%);
-                        margin-left: -$o-handle-btn-size/2;
+                        margin-left: -$o-we-handles-btn-size/2;
                     }
                 }
                 &.s {
-                    @include o-position-absolute(auto, 0, -$o-handles-offset-to-hide, 0);
-                    border-bottom-width: $odoo-handle-border-width;
+                    @include o-position-absolute(auto, 0, -$o-we-handles-offset-to-hide, 0);
+                    border-bottom-width: $o-we-handle-border-width;
                     cursor: ns-resize;
 
                     &:after {
                         @include o-position-absolute($left: 50%, $bottom: 40%);
-                        margin-left: -$o-handle-btn-size/2;
+                        margin-left: -$o-we-handles-btn-size/2;
                     }
                 }
 
@@ -701,7 +686,7 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
 
 // NOTE EDITOR
 .note-popover .popover {
-    height: $odoo-navbar-height;
+    height: $o-navbar-height;
     top: 0 !important;
     left: 0 !important;
     padding: 0;
@@ -714,7 +699,7 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
     box-shadow: none;
 
     .popover-content {
-        height: $odoo-navbar-height;
+        height: $o-navbar-height;
         white-space: nowrap;
         font-family: $o-we-font-family;
 
@@ -723,7 +708,7 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
         }
 
         .btn {
-            height: $odoo-navbar-height;
+            height: $o-navbar-height;
             border: none;
             border-radius: 0;
             padding: $padding-base-vertical $padding-base-horizontal; // force this because of themes
@@ -1035,7 +1020,7 @@ table.colorpicker {
 
 // ENTER IN EDIT MODE
 body.editor_enable {
-    padding-top: $odoo-navbar-height!important;
+    padding-top: $o-navbar-height!important;
 
     #web_editor-top-edit {
         background-color: $o-we-color-dark;
@@ -1055,7 +1040,7 @@ body.editor_enable {
 }
 
 #web_editor_inside_iframe {
-    background-color: $odoo-brand-secondary;
+    background-color: $o-brand-secondary;
 
     #wrapwrap {
         position: relative;
@@ -1106,14 +1091,11 @@ body.editor_enable {
     }
 }
 @keyframes inputHighlighter {
-    from { background: $odoo-brand-optional; }
+    from { background: $o-brand-optional; }
     to   { width: 0; background: transparent; }
 }
 
 // INPUTS
-$o-switch-size: 2ex;
-$o-switch-inactive-color: $gray-lighter;
-
 .o_switch {
     @include o-flex-display;
     @include o-align-items(center);
@@ -1124,11 +1106,11 @@ $o-switch-inactive-color: $gray-lighter;
         display: none;
 
         + span {
-            background-color: $o-switch-inactive-color;
-            box-shadow: inset 0 0 0px 1px darken($o-switch-inactive-color,10%);
+            background-color: $o-we-switch-inactive-color;
+            box-shadow: inset 0 0 0px 1px darken($o-we-switch-inactive-color,10%);
             border-radius: 100rem;
-            height: $o-switch-size;
-            width: $o-switch-size * 1.8;
+            height: $o-we-switch-size;
+            width: $o-we-switch-size * 1.8;
             margin-right: 0.5em;
             display: inline-block;
             @include transition(all 0.3s $o-we-md-ease);
@@ -1137,13 +1119,13 @@ $o-switch-inactive-color: $gray-lighter;
                 content: "";
                 background: $o-we-color-paper;
                 display: block;
-                width: $o-switch-size - 0.2;
-                height: $o-switch-size - 0.2;
+                width: $o-we-switch-size - 0.2;
+                height: $o-we-switch-size - 0.2;
                 margin-top: 0.1ex;
                 margin-left: 0.1ex;
                 border-radius: 100rem;
                 @include transition(all 0.3s $o-we-md-ease);
-                box-shadow: 0 1px 1px darken($o-switch-inactive-color,35%), inset 0 0 0 1px lighten($o-switch-inactive-color,10%);
+                box-shadow: 0 1px 1px darken($o-we-switch-inactive-color,35%), inset 0 0 0 1px lighten($o-we-switch-inactive-color,10%);
             }
         }
 
@@ -1152,7 +1134,7 @@ $o-switch-inactive-color: $gray-lighter;
             @include o-linear-gradient(0deg, $o-we-color-success, darken($o-we-color-success, 10%));
 
             &:after {
-                margin-left: ($o-switch-size*1.8 - $o-switch-size) + 0.1;
+                margin-left: ($o-we-switch-size*1.8 - $o-we-switch-size) + 0.1;
             }
         }
     }
@@ -1248,8 +1230,7 @@ $o-switch-inactive-color: $gray-lighter;
 
 // ACE EDITOR
 .o_ace_view_editor {
-    $o-ace-color: #2F3129;
-    background: $o-ace-color;
+    background: $o-we-ace-color;
     color: white;
     @include o-flex-display;
     @include o-flex-flow(column, nowrap);
@@ -1289,7 +1270,7 @@ $o-switch-inactive-color: $gray-lighter;
     #ace-view-id {
         @include o-flex(0, 0, auto);
         padding: $grid-gutter-width/4 $grid-gutter-width/2;
-        background-color: lighten($o-ace-color, 10%);
+        background-color: lighten($o-we-ace-color, 10%);
     }
     #ace-view-editor {
         @mixin ace-line-error-mixin {
@@ -1383,10 +1364,10 @@ body .modal {
             }
 
             .o_existing_attachment_cell {
-                $odoo-border-image: 2px;
+                $o-border-image: 2px;
 
                 .o_existing_attachment_remove {
-                    @include o-position-absolute($odoo-border-image, 15px + $odoo-border-image);
+                    @include o-position-absolute($o-border-image, 15px + $o-border-image);
                     padding: 3px 5px 5px 5px;
                     background-color: rgba(white, 0.8);
                     text-shadow: 0 0 1px white;
@@ -1400,7 +1381,7 @@ body .modal {
                     }
                 }
                 .o_image {
-                    border: $odoo-border-image solid transparent;
+                    border: $o-border-image solid transparent;
                     cursor: pointer;
                     @include o-transition(opacity, 400ms);
 
@@ -1415,8 +1396,8 @@ body .modal {
                     }
                 }
                 &.o_selected .o_image {
-                    border-color: $odoo-brand-primary;
-                    box-shadow: 0px 0px 2px 2px $odoo-brand-secondary;
+                    border-color: $o-brand-primary;
+                    box-shadow: 0px 0px 2px 2px $o-brand-secondary;
                 }
                 &:hover .o_existing_attachment_remove {
                     opacity: 1;
@@ -1606,7 +1587,7 @@ body .modal {
                 display: block;
                 width: 100%;
                 height: 1px;
-                background: fadeOut(lighten($odoo-brand-optional, 30%), 50%);
+                background: fadeOut(lighten($o-brand-optional, 30%), 50%);
                 pointer-events: none;
                 &.grid-2 {
                     top: 66.66%
diff --git a/addons/web_editor/static/src/scss/web_editor.variables.scss b/addons/web_editor/static/src/scss/web_editor.variables.scss
index 08c67c9c7f6..2d36b3e9756 100644
--- a/addons/web_editor/static/src/scss/web_editor.variables.scss
+++ b/addons/web_editor/static/src/scss/web_editor.variables.scss
@@ -2,27 +2,45 @@
 /// This files regroups the variables and mixins which are specific to the editor.
 ///
 
-$o-we-font-family: Roboto, 'Montserrat', "Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
+$o-we-font-family: Roboto, 'Montserrat', "Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif !default;
 
-$o-we-color-dark: #2c2c36;
-$o-we-color-darker: darken($o-we-color-dark, 2%);
-$o-we-color-divider: #33363e;
-$o-we-color-light: #4e525b;
-$o-we-color-normal: #50545d;
-$o-we-color-paper: #fcfcfc;
-$o-we-color-text-normal: #999999;
-$o-we-color-text-light: #d4d5d7;
-$o-we-color-danger: #e6586c;
-$o-we-color-warning: #f0ad4e;
-$o-we-color-success: #40ad67;
-$o-we-color-info: #6999a8;
+$o-we-color-dark: #2c2c36 !default;
+$o-we-color-darker: darken($o-we-color-dark, 2%) !default;
+$o-we-color-divider: #33363e !default;
+$o-we-color-light: #4e525b !default;
+$o-we-color-normal: #50545d !default;
+$o-we-color-paper: #fcfcfc !default;
+$o-we-color-text-normal: #999999 !default;
+$o-we-color-text-light: #d4d5d7 !default;
+$o-we-color-danger: #e6586c !default;
+$o-we-color-warning: #f0ad4e !default;
+$o-we-color-success: #40ad67 !default;
+$o-we-color-info: #6999a8 !default;
 
-$o-we-sidebar-width: 210px;
+$o-we-sidebar-width: 210px !default;
 
-$o-we-tab-active-bg: #3D4048;
+$o-we-tab-active-bg: #3D4048 !default;
 
 // Transitions
-$o-we-md-ease: cubic-bezier(0.19, 1, 0.22, 1);
+$o-we-md-ease: cubic-bezier(0.19, 1, 0.22, 1) !default;
+
+// Editor
+$o-we-dropzone-size: 40px !default;
+$o-we-dropzone-border-width: 2px !default;
+$o-we-dropzone-border: $o-we-dropzone-border-width dashed $o-brand-primary !default;
+
+$o-we-handle-edge-size: 1px !default;
+$o-we-handle-border-width: 1px !default;
+$o-we-handles-offset-to-hide: 10000px !default;
+$o-we-handles-accent-color: #00e2ff !default;
+$o-we-handles-btn-size: 18px !default;
+
+$o-we-overlay-option-size: 25px !default;
+
+$o-we-ace-color: #2F3129 !default;
+
+$o-we-switch-size: 2ex !default;
+$o-we-switch-inactive-color: $o-we-color-paper !default;
 
 // ============    'Preview' component Mixins    ===============
 // Create a "preview" work-area to edit/customize specific elements
@@ -68,7 +86,7 @@ $o-we-md-ease: cubic-bezier(0.19, 1, 0.22, 1);
 
 @mixin o-w-preserve-links {
     a:not(.o_btn_preview) {
-        color: $odoo-brand-optional;
+        color: $o-brand-optional;
 
         &:focus, &:active, &:focus:active {
             outline: none!important;
@@ -157,13 +175,13 @@ $o-we-md-ease: cubic-bezier(0.19, 1, 0.22, 1);
         @include button-size(6px, 12px, 14px, 1.42857143, 0);
 
         &.btn-primary {
-            @include button-variant(white, $odoo-brand-optional, darken($odoo-brand-optional,5%));
+            @include button-variant(white, $o-brand-optional, darken($o-brand-optional,5%));
         }
         &.btn-default {
             @include button-variant($o-we-color-normal, white, $o-we-color-text-light);
         }
         &.btn-link {
-            @include button-variant($odoo-brand-optional, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
+            @include button-variant($o-brand-optional, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
         }
         &.btn-success {
             @include button-variant(white, $o-we-color-success, darken($o-we-color-success, 5%));
@@ -200,3 +218,44 @@ $o-we-md-ease: cubic-bezier(0.19, 1, 0.22, 1);
         @include box-shadow(none);
     }
 }
+
+// Edition colors
+
+// Colors
+$gray-white: #fff !default;
+
+$color-alpha: #1cc1a9 !default;
+$color-beta: #875A7B !default;
+$color-gamma: #BA3C3D !default;
+$color-delta: #0D6759 !default;
+$color-epsilon: #0B2E59 !default;
+
+// Greyscale transparent colours
+$color-black-25: rgba(black, 0.25) !default;
+$color-black-50: rgba(black, 0.5) !default;
+$color-black-75: rgba(black, 0.75) !default;
+$color-white-25: rgba(white, 0.25) !default;
+$color-white-50: rgba(white, 0.5) !default;
+$color-white-75: rgba(white, 0.75) !default;
+
+@mixin o-create-color-classes($name, $color, $complementary: o-get-most-contrast($color, $text-color, #FFF), $content-color: $color) {
+    .bg-#{$name} {
+        background-color: $color;
+        color: $complementary;
+        .text-muted {
+            color: rgba($complementary, 0.4);
+        }
+    }
+    body .text-#{$name} { // body to make the rules more important that bg-* ones
+        color: $content-color;
+    }
+}
+@mixin o-create-color-btn-classes($name, $color, $complementary: o-get-most-contrast($color, $text-color, #FFF), $border-color: darken($color, 5%)) {
+    .btn-#{$name} {
+        @include button-variant($complementary, $color, $border-color);
+    }
+}
+
+// Translations
+$o-we-content-to-translate-color: rgb(255, 255, 90) !default;
+$o-we-translated-content-color: rgb(120, 215, 110) !default;
diff --git a/addons/web_editor/views/editor.xml b/addons/web_editor/views/editor.xml
index 1f87db93fe7..3d7d36f18a9 100644
--- a/addons/web_editor/views/editor.xml
+++ b/addons/web_editor/views/editor.xml
@@ -52,8 +52,8 @@
     <link rel="stylesheet" type="text/css" href="/web_editor/static/lib/summernote/src/css/summernote.css"/>
 </template>
 
-<template id="_assets_helpers" inherit_id="web._assets_helpers">
-    <xpath expr="link[last()]" position="after">
+<template id="_assets_primary_variables" inherit_id="web._assets_primary_variables">
+    <xpath expr="//link[last()]" position="after">
         <link rel="stylesheet" type="text/scss" href="/web_editor/static/src/scss/web_editor.variables.scss"/>
     </xpath>
 </template>
diff --git a/addons/web_settings_dashboard/static/src/scss/dashboard.scss b/addons/web_settings_dashboard/static/src/scss/dashboard.scss
index 3b3ea30d02a..4e9ee93a476 100644
--- a/addons/web_settings_dashboard/static/src/scss/dashboard.scss
+++ b/addons/web_settings_dashboard/static/src/scss/dashboard.scss
@@ -87,7 +87,7 @@
             .o_web_settings_dashboard_progress_title {
                 font-weight: bold;
                 cursor: pointer;
-                color: $odoo-brand-optional;
+                color: $o-brand-optional;
             }
         }
     }
diff --git a/addons/web_tour/static/src/scss/tip.scss b/addons/web_tour/static/src/scss/tip.scss
index f09ed1852ce..2cb72fcd9f8 100644
--- a/addons/web_tour/static/src/scss/tip.scss
+++ b/addons/web_tour/static/src/scss/tip.scss
@@ -26,7 +26,7 @@
 }
 
 .o_tooltip {
-    $o-tip-color: $odoo-brand-primary;
+    $o-tip-color: $o-brand-primary;
     $o-tip-size: 24px;
     $o-tip-border-width: 2px;
     $o-tip-arrow-length: 10px;
diff --git a/addons/website/static/src/scss/website.backend.scss b/addons/website/static/src/scss/website.backend.scss
index 254e90f3957..373af1ec647 100644
--- a/addons/website/static/src/scss/website.backend.scss
+++ b/addons/website/static/src/scss/website.backend.scss
@@ -5,17 +5,17 @@
         background-color: #ececec;
         div.o_box {
             @include clearfix;
-            color: $odoo-main-color-muted;
-            background-color: $odoo-view-background-color;
+            color: $o-main-color-muted;
+            background-color: $o-view-background-color;
             background-size: cover;
-            margin-top: $odoo-horizontal-padding;
+            margin-top: $o-horizontal-padding;
             position: static;
             box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
 
             h2, h4 {
                 text-transform: uppercase;
                 margin-top: 0;
-                color: $odoo-brand-primary;
+                color: $o-brand-primary;
             }
 
             h4 { margin: 0 0 0 8px; }
@@ -46,7 +46,7 @@
 
                     th {
                         text-transform: uppercase;
-                        color: $odoo-main-text-color;
+                        color: $o-main-text-color;
                         border-top-width: 0px;
                     }
                     td, th {
@@ -67,7 +67,7 @@
                 /*------------------------------------------*/
 
                 .gapi-analytics-data-chart svg g path, svg [class*="nv-series-"] {
-                    stroke: $odoo-main-color-muted !important;
+                    stroke: $o-main-color-muted !important;
                 }
 
                 svg {
@@ -86,19 +86,19 @@
                         .nv-series-0 {
                             stroke-width: 3 !important;
                             .nv-point {
-                                stroke: $odoo-brand-optional;
+                                stroke: $o-brand-optional;
                                 stroke-opacity: 1 !important;
                                 &.hover {
-                                    stroke: darken($odoo-brand-optional, 10%);
+                                    stroke: darken($o-brand-optional, 10%);
                                 }
                             }
                         }
                         .nv-series-1 {
                             .nv-point {
-                                stroke: $odoo-main-color-muted !important;
+                                stroke: $o-main-color-muted !important;
                                 stroke-opacity: 1 !important;
                                 &.hover {
-                                    stroke: darken($odoo-main-color-muted, 10%);
+                                    stroke: darken($o-main-color-muted, 10%);
                                 }
                             }
                         }
@@ -114,10 +114,10 @@
                         border: none;
                     }
                     tr:first-child .legend-color-guide > div {
-                        background-color: $odoo-brand-optional !important;
+                        background-color: $o-brand-optional !important;
                     }
                     tr:last-child .legend-color-guide > div {
-                        background-color: darken($odoo-brand-lightsecondary, 10%) !important;
+                        background-color: darken($o-brand-lightsecondary, 10%) !important;
                     }
                 }
             }
@@ -141,22 +141,22 @@
             .o_inner_box {
                 padding-top: 10px;
                 text-align: center;
-                border: 1px solid $odoo-view-background-color;
+                border: 1px solid $o-view-background-color;
                 height: 80px;
                 overflow: hidden;
                 text-overflow: ellipsis;
                 white-space: nowrap;
                 cursor: pointer;
                 color: white;
-                background-color: $odoo-brand-optional;
+                background-color: $o-brand-optional;
                     &:hover {
-                        background-color: darken($odoo-brand-optional, 10%);
+                        background-color: darken($o-brand-optional, 10%);
                     }
                 &.o_primary {
-                    background-color: $odoo-brand-primary;
+                    background-color: $o-brand-primary;
                     color: white;
                     &:hover {
-                        background-color: darken($odoo-brand-primary, 10%);
+                        background-color: darken($o-brand-primary, 10%);
                     }
                 }
                 .o_highlight {
@@ -167,10 +167,10 @@
 
         .o_graph_sales {
             .o_legend0 {
-                background-color: $odoo-brand-optional;
+                background-color: $o-brand-optional;
             }
             .o_legend1 {
-                background-color: $odoo-main-color-muted;
+                background-color: $o-main-color-muted;
             }
         }
 
@@ -249,24 +249,24 @@
 
             @keyframes increase {
               10% {
-                background-color: lighten($odoo-brand-optional, 30%);
-                border-color: $odoo-brand-optional;
-                color: $odoo-brand-optional;
+                background-color: lighten($o-brand-optional, 30%);
+                border-color: $o-brand-optional;
+                color: $o-brand-optional;
               }
             }
 
             @keyframes decrease {
               10% {
-                background-color: lighten($odoo-brand-optional, 30%);
-                border-color: $odoo-brand-optional;
-                color: $odoo-brand-optional;
+                background-color: lighten($o-brand-optional, 30%);
+                border-color: $o-brand-optional;
+                color: $o-brand-optional;
               }
             }
         }
 
         tr.o_product_template {
             cursor: pointer;
-            color: $odoo-main-text-color;
+            color: $o-main-text-color;
         }
 
         .o_loader {
diff --git a/addons/website/static/src/scss/website.edit_mode.scss b/addons/website/static/src/scss/website.edit_mode.scss
index 2bc24d4b69d..c315e493e08 100644
--- a/addons/website/static/src/scss/website.edit_mode.scss
+++ b/addons/website/static/src/scss/website.edit_mode.scss
@@ -22,7 +22,7 @@
 .o_editable {
     &:not(:empty), &[data-oe-type] {
         &:not([data-oe-model="ir.ui.view"]):not([data-oe-type="html"]):hover {
-            box-shadow: $odoo-brand-primary 0 0 5px 2px inset;
+            box-shadow: $o-brand-primary 0 0 5px 2px inset;
         }
     }
     &:focus, &[data-oe-type] {
diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index ee2fb57228f..aa267460bc2 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -515,7 +515,7 @@ div.carousel {
     }
 }
 #oe_main_menu_navbar + #wrapwrap .o_header_affix {
-    top: $odoo-navbar-height;
+    top: $o-navbar-height;
 }
 
 .navbar .o_extra_menu_items.open > ul {
diff --git a/addons/website/static/src/scss/website.ui.scss b/addons/website/static/src/scss/website.ui.scss
index 5ad2f5ba40f..a87be36a855 100644
--- a/addons/website/static/src/scss/website.ui.scss
+++ b/addons/website/static/src/scss/website.ui.scss
@@ -5,7 +5,7 @@
 
 // LAYOUTING
 body.o_connected_user {
-    padding-top: $odoo-navbar-height!important;
+    padding-top: $o-navbar-height!important;
 }
 
 // MAIN MENU STYLE (added above navbar.scss)
@@ -15,7 +15,7 @@ body.o_connected_user {
     z-index: $zindex-modal - 10;
 
     font-family: $o-we-font-family;
-    font-size: $odoo-font-size-base;
+    font-size: $o-font-size-base;
     a:hover, a:focus {
         text-decoration: none;
     }
@@ -45,7 +45,7 @@ body.o_connected_user {
             }
 
             &[data-action="edit"], &[data-action="translate"], &.css_edit_dynamic {
-                @include button-variant(white, $odoo-brand-optional, $odoo-brand-optional);
+                @include button-variant(white, $o-brand-optional, $o-brand-optional);
             }
 
             > .fa-plus, > .fa-pencil {
@@ -352,7 +352,7 @@ body .modal {
 
 // ADD NEW PAGE MODAL
 #o_new_content_menu_choices {
-    @include o-position-absolute($odoo-navbar-height, 0, 0, 0);
+    @include o-position-absolute($o-navbar-height, 0, 0, 0);
     position: fixed;
     @include o-flex-display;
     @include o-justify-content(center);
@@ -436,7 +436,7 @@ body .modal {
     overflow: visible;
     display: block;
     .modal-dialog {
-        @include o-position-absolute($odoo-navbar-height + 10, 10px);
+        @include o-position-absolute($o-navbar-height + 10, 10px);
         width: auto;
         margin: 0;
         font-family: Roboto;
@@ -482,7 +482,7 @@ body .modal {
     @include o-w-preserve-btn;
     @include o-w-preserve-forms;
 
-    @include o-position-absolute($odoo-navbar-height, 0, 0);
+    @include o-position-absolute($o-navbar-height, 0, 0);
     position: fixed;
     z-index: 1001;
 }
@@ -523,15 +523,15 @@ body .modal {
 }
 #edit_website_pages {
     th {
-        background-color: $odoo-brand-primary;
+        background-color: $o-brand-primary;
         color: white;
     }
     td > a.fa {
         margin-left: 5px;
-        color: $odoo-brand-primary;
+        color: $o-brand-primary;
     }
     .fa-check, .fa-eye-slash {
-        color: $odoo-brand-optional;
+        color: $o-brand-optional;
     }
 }
 
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index 7be2b375e85..a0d404be395 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -574,7 +574,7 @@
 <template id="default_less">
     <style type="text/less">
         div#wrap div &gt; h1 {
-            color: @odoo-brand-primary;
+            color: @o-brand-primary;
         }
     </style>
 </template>
diff --git a/addons/website_livechat/views/website_livechat.xml b/addons/website_livechat/views/website_livechat.xml
index 25592403b9c..265b8741cd9 100644
--- a/addons/website_livechat/views/website_livechat.xml
+++ b/addons/website_livechat/views/website_livechat.xml
@@ -13,7 +13,6 @@
                 <script type="text/javascript" src="/mail/static/src/js/document_viewer.js"></script>
                 <script type="text/javascript" src="/mail/static/src/js/thread.js"></script>
                 <script type="text/javascript" src="/im_livechat/static/src/js/im_livechat.js"></script>
-                <link rel="stylesheet" type="text/scss" href="/mail/static/src/scss/variables.scss"></link>
                 <link rel="stylesheet" type="text/scss" href="/mail/static/src/scss/chat_window.scss"></link>
                 <link rel="stylesheet" type="text/scss" href="/mail/static/src/scss/thread.scss"></link>
                 <link rel="stylesheet" type="text/scss" href="/im_livechat/static/src/scss/im_livechat.scss"/>
diff --git a/addons/website_quote/static/src/scss/website_quotation.scss b/addons/website_quote/static/src/scss/website_quotation.scss
index c372164a5df..26ba0eaef64 100644
--- a/addons/website_quote/static/src/scss/website_quotation.scss
+++ b/addons/website_quote/static/src/scss/website_quotation.scss
@@ -1,6 +1,6 @@
 .o_website_quote{
 	h1[id],h2[id]{
 		margin-top: 0px;
-		padding-top: $odoo-navbar-height;
+		padding-top: $o-navbar-height;
 	}
 }
diff --git a/addons/website_rating/static/src/scss/website_rating.scss b/addons/website_rating/static/src/scss/website_rating.scss
index b44da995762..23befcee851 100644
--- a/addons/website_rating/static/src/scss/website_rating.scss
+++ b/addons/website_rating/static/src/scss/website_rating.scss
@@ -1,7 +1,7 @@
 /* static stars */
-$rating-star-color: #FACC2E;
+$o-w-rating-star-color: #FACC2E;
 .o_website_rating_static{
-    color: $rating-star-color;
+    color: $o-w-rating-star-color;
 }
 
 .o_website_rating_card_container {
@@ -29,7 +29,7 @@ $rating-star-color: #FACC2E;
                 margin-right: 5px;
             }
             .o_rating_progressbar{
-                background-color: $rating-star-color;
+                background-color: $o-w-rating-star-color;
             }
         }
         .o_website_rating_table_percent {
diff --git a/addons/website_sale/static/src/scss/website_sale.scss b/addons/website_sale/static/src/scss/website_sale.scss
index 308a3fc56ef..f6b3cbcaa28 100644
--- a/addons/website_sale/static/src/scss/website_sale.scss
+++ b/addons/website_sale/static/src/scss/website_sale.scss
@@ -773,7 +773,7 @@ td.noborder {
 }
 
 .border_primary {
-    border: 1px solid $odoo-brand-primary;
+    border: 1px solid $o-brand-primary;
 }
 
 .js_change_shipping {
diff --git a/addons/website_sale/static/src/scss/website_sale_dashboard.scss b/addons/website_sale/static/src/scss/website_sale_dashboard.scss
index 35bb6a0469c..00549094a6f 100644
--- a/addons/website_sale/static/src/scss/website_sale_dashboard.scss
+++ b/addons/website_sale/static/src/scss/website_sale_dashboard.scss
@@ -13,7 +13,7 @@
         opacity: 0.2;
     }
     .o_demo_message {
-        color: $odoo-main-color-muted;
+        color: $o-main-color-muted;
         width: 100%;
         @include o-position-absolute($left: 0, $top: 12%);
         @include o-flex-display;
@@ -29,13 +29,13 @@
         overflow: hidden;
         text-overflow: ellipsis;
         a {
-            color: darken($odoo-brand-lightsecondary, 40%);
+            color: darken($o-brand-lightsecondary, 40%);
         }
         &:hover {
-            background-color: $odoo-brand-lightsecondary;
+            background-color: $o-brand-lightsecondary;
         }
         .o_highlight {
-            color: $odoo-brand-optional;
+            color: $o-brand-optional;
             font-size: 20px;
             font-weight: bold;
         }
@@ -50,7 +50,7 @@
         overflow: hidden;
         text-overflow: ellipsis;
         margin: 10px 0px;
-        color: darken($odoo-brand-lightsecondary, 40%);
+        color: darken($o-brand-lightsecondary, 40%);
         .o_highlight {
             font-size: 20px;
             font-weight: bold;
diff --git a/addons/website_slides/static/src/scss/website_slides.scss b/addons/website_slides/static/src/scss/website_slides.scss
index 6cf36c1c4a0..2bc4681d451 100644
--- a/addons/website_slides/static/src/scss/website_slides.scss
+++ b/addons/website_slides/static/src/scss/website_slides.scss
@@ -1,16 +1,15 @@
-@mixin define-color-if-not-defined {
-    $nav-tabs-border-color: #dddddd;
-    $brand-info: #dddddd;
-    $body-bg: #FFFFFF;
-    $brand-primary: #428bca;
-    $link-color: $brand-primary;
-    $panel-footer-bg: #f5f5f5;
-    $nav-link-hover-bg: #FFFFFF;
-    $navbar-default-link-color: #777;
-    $navbar-default-link-hover-color: #333;
-    $navbar-default-bg: #f8f8f8;
-    $MAX-Z-INDEX : 2147483647;
-} @include define-color-if-not-defined;
+// FIXME may be useless (check initial code here: https://github.com/odoo/odoo/blob/51be5bbfb38db784cb3406877cc0e8806b1bf55a/addons/website_slides/static/src/less/website_slides.less#L1)
+$nav-tabs-border-color: #dddddd !default;
+$brand-info: #dddddd !default;
+$body-bg: #FFFFFF !default;
+$brand-primary: #428bca !default;
+$link-color: $brand-primary !default;
+$panel-footer-bg: #f5f5f5 !default;
+$nav-link-hover-bg: #FFFFFF !default;
+$navbar-default-link-color: #777 !default;
+$navbar-default-link-hover-color: #333 !default;
+$navbar-default-bg: #f8f8f8 !default;
+$MAX-Z-INDEX : 2147483647 !default;
 
 @mixin top-covered-image {
     object-fit: cover;
diff --git a/addons/website_theme_install/static/src/scss/website_theme_install.scss b/addons/website_theme_install/static/src/scss/website_theme_install.scss
index bf278d0886e..47399f98ea6 100644
--- a/addons/website_theme_install/static/src/scss/website_theme_install.scss
+++ b/addons/website_theme_install/static/src/scss/website_theme_install.scss
@@ -1,6 +1,6 @@
-$o-theme-kanban-gray: #fcfcfc;
 
 .o_kanban_view.o_theme_kanban {
+    $o-theme-kanban-gray: #fcfcfc;
     background-color: $o-theme-kanban-gray;
 
     /// Un-grouped Layout (default)
@@ -9,8 +9,8 @@ $o-theme-kanban-gray: #fcfcfc;
         margin: 0 0 0 ($o-kanban-record-margin - 2 * $grid-gutter-width);
 
         @media (max-width: $screen-xs-max) {
-            padding-left: $odoo-horizontal-padding - $o-kanban-record-margin;
-            padding-right: $odoo-horizontal-padding;
+            padding-left: $o-horizontal-padding - $o-kanban-record-margin;
+            padding-right: $o-horizontal-padding;
         }
 
         .o_kanban_record {
@@ -35,7 +35,7 @@ $o-theme-kanban-gray: #fcfcfc;
         }
 
         &.o_theme_installed .o_theme_preview_top {
-            border-color: $odoo-brand-optional;
+            border-color: $o-brand-optional;
 
             > .fa-check-circle {
                 @include o-position-absolute(10px, 10px);