[MERGE] *: use SCSS as language for design (instead of LESS)

The main reason this is done is to prepare the migration to bootstrap 4.
It has other advantages though, like speed to compute the css and more
convenient language features (if/else/maps/...).

Detailed information about this merge can be found in the merge's
sub-commits.

65 files changed, 1953 insertions, 1971 deletions

diff --git a/addons/web/static/src/js/core/dialog.js b/addons/web/static/src/js/core/dialog.js
index 5ba24f57cad..7d4796886b7 100644
--- a/addons/web/static/src/js/core/dialog.js
+++ b/addons/web/static/src/js/core/dialog.js
@@ -158,9 +158,9 @@ var Dialog = Widget.extend({
 
     /**
      * Show a dialog
-     * 
+     *
      * @param {Object} options
-     * @param {boolean} options.shouldFocusButtons  if true, put the focus on 
+     * @param {boolean} options.shouldFocusButtons  if true, put the focus on
      * the first button primary when the dialog opens
      */
     open: function (options) {
@@ -194,7 +194,7 @@ var Dialog = Widget.extend({
         if (this.isDestroyed()) {
             return;
         }
-        var isFocusSet = this._focusOnClose(); 
+        var isFocusSet = this._focusOnClose();
 
         this._super();
 
@@ -214,7 +214,7 @@ var Dialog = Widget.extend({
         }
     },
     /**
-     * adds the keydown behavior to the dialogs after external files modifies 
+     * adds the keydown behavior to the dialogs after external files modifies
      * its DOM.
      */
     rebindButtonBehavior: function () {
@@ -226,7 +226,7 @@ var Dialog = Widget.extend({
     /**
      * Manages the focus when the dialog closes. The default behavior is to set the focus on the top-most opened popup.
      * The goal of this function is to be overridden by all children of the dialog class.
-     * 
+     *
      * @returns: boolean  should return true if the focus has already been set else false.
      */
     _focusOnClose: function() {
@@ -237,7 +237,7 @@ var Dialog = Widget.extend({
     //--------------------------------------------------------------------------
     /**
      * Moves the focus to the first button primary in the footer of the dialog
-     * 
+     *
      * @private
      * @param {odooEvent} e
      */
@@ -250,17 +250,17 @@ var Dialog = Widget.extend({
         }
     },
     /**
-     * Manages the TAB key on the buttons. If you the focus is on a primary 
+     * Manages the TAB key on the buttons. If you the focus is on a primary
      * button and the users tries to tab to go to the next button, display
      * a tooltip
-     * 
+     *
      * @param {jQueryEvent} e
      * @private
      */
     _onFooterButtonKeyDown: function (e) {
         switch(e.which) {
             case $.ui.keyCode.TAB:
-                if (!e.shiftKey && (e.target.classList.contains("btn-primary") || e.target.classList.contains("oe_highlight"))) {
+                if (!e.shiftKey && e.target.classList.contains("btn-primary")) {
                     e.preventDefault();
                     var $primaryButton = $(e.target);
                     $primaryButton.tooltip({
diff --git a/addons/web/static/src/js/core/dom.js b/addons/web/static/src/js/core/dom.js
index 274f82bcc53..5335ef8e954 100644
--- a/addons/web/static/src/js/core/dom.js
+++ b/addons/web/static/src/js/core/dom.js
@@ -221,7 +221,12 @@ return {
     renderButton: function (options) {
         var params = options.attrs || {};
         params.type = params.type || 'button';
-        params.class = 'btn btn-' + (options.size || 'sm') + ' ' + (params.class || 'btn-default');
+        var classes = 'btn-default';
+        if (params.class) {
+            classes = params.class.replace(/\boe_highlight\b/g, 'btn-primary')
+                                  .replace(/\boe_link\b/g, 'btn-link');
+        }
+        params.class = 'btn btn-' + (options.size || 'sm') + ' ' + classes;
         var $button = $('<button/>', params);
         if (options.icon) {
             if (options.icon.substr(0, 3) === 'fa-') {
diff --git a/addons/web/static/src/js/views/basic/basic_renderer.js b/addons/web/static/src/js/views/basic/basic_renderer.js
index 80cdd05bff5..c05d467052e 100644
--- a/addons/web/static/src/js/views/basic/basic_renderer.js
+++ b/addons/web/static/src/js/views/basic/basic_renderer.js
@@ -356,6 +356,9 @@ var BasicRenderer = AbstractRenderer.extend({
      * @param {Object} node
      */
     _handleAttributes: function ($el, node) {
+        if ($el.is('button')) {
+            return;
+        }
         if (node.attrs.class) {
             $el.addClass(node.attrs.class);
         }
@@ -515,6 +518,35 @@ var BasicRenderer = AbstractRenderer.extend({
         });
     },
     /**
+     * Renders a button according to a given node element.
+     *
+     * @private
+     * @param {Object} node
+     * @param {Object} [options]
+     * @param {string} [options.extraClass]
+     * @param {boolean} [options.textAsTitle=false]
+     * @returns {jQuery}
+     */
+    _renderButtonFromNode: function (node, options) {
+        var btnOptions = {
+            attrs: _.omit(node.attrs, 'icon', 'string', 'type', 'name', 'attrs', 'modifiers', 'options'),
+            icon: node.attrs.icon,
+        };
+        if (options && options.extraClass) {
+            var classes = btnOptions.attrs.class ? btnOptions.attrs.class.split(' ') : [];
+            btnOptions.attrs.class = _.uniq(classes.concat(options.extraClass.split(' '))).join(' ');
+        }
+        var str = (node.attrs.string || '').replace(/_/g, '');
+        if (str) {
+            if (options && options.textAsTitle) {
+                btnOptions.attrs.title = str;
+            } else {
+                btnOptions.text = str;
+            }
+        }
+        return dom.renderButton(btnOptions);
+    },
+    /**
      * Instantiates the appropriate AbstractField specialization for the given
      * node and prepares its rendering and addition to the DOM. Indeed, the
      * rendering of the widget will be started and the associated deferred will
diff --git a/addons/web/static/src/js/views/form/form_controller.js b/addons/web/static/src/js/views/form/form_controller.js
index e66194dcf99..dbb64dc3682 100644
--- a/addons/web/static/src/js/views/form/form_controller.js
+++ b/addons/web/static/src/js/views/form/form_controller.js
@@ -50,8 +50,9 @@ var FormController = BasicController.extend({
     autofocus: function () {
         if (!this.disableAutofocus) {
             var isControlActivted = this.renderer.autofocus();
-            if (!isControlActivted) { 
-                // this can happen in read mode if there are no button with class oe_highlight
+            if (!isControlActivted) {
+                // this can happen in read mode if there are no buttons with
+                // btn-primary class
                 if (this.$buttons && this.mode === 'readonly') {
                     return this.$buttons.find('.o_form_button_edit').focus();
                 }
@@ -239,7 +240,7 @@ var FormController = BasicController.extend({
     /**
      * Assign on the buttons save and discard additionnal behavior to facilitate
      * the work of the users doing input only using the keyboard
-     * 
+     *
      * @param {jQueryElement} $saveCancelButtonContainer  The div containing the
      * save and cancel buttons
      * @private
@@ -257,9 +258,7 @@ var FormController = BasicController.extend({
                     self._discardChanges.apply(self);
                     break;
                 case $.ui.keyCode.TAB:
-                    if (!e.shiftKey && 
-                        (e.target.classList.contains("btn-primary") || 
-                         e.target.classList.contains("oe_highlight"))) {
+                    if (!e.shiftKey && e.target.classList.contains("btn-primary")) {
                         $saveCancelButtonContainer.tooltip('show');
                         e.preventDefault();
                     }
@@ -491,11 +490,11 @@ var FormController = BasicController.extend({
      */
     _onDoAction: function (event) {
         var self=this;
-        // A priori, different widgets could write on the "on_success" key. 
+        // A priori, different widgets could write on the "on_success" key.
         // Below we ensure that all the actions required by those widgets
         // are executed in a suitable order before every cycle of destruction.
         var callback = event.data.on_success || function () {};
-        event.data.on_success = function () { 
+        event.data.on_success = function () {
             callback();
             function isDialog (widget) {
                 return (widget instanceof Dialog);
@@ -542,7 +541,7 @@ var FormController = BasicController.extend({
     },
     /**
      * Set the focus on the first primary button of the controller (likely Edit)
-     * 
+     *
      * @private
      * @param {OdooEvent} event
      */
@@ -554,7 +553,7 @@ var FormController = BasicController.extend({
     },
     /**
      * Reset the focus on the control that openned a Dialog after it was closed
-     * 
+     *
      * @private
      * @param {OdooEvent} event
      */
diff --git a/addons/web/static/src/js/views/form/form_renderer.js b/addons/web/static/src/js/views/form/form_renderer.js
index eb9ea1f5907..5a6ba2de9f1 100644
--- a/addons/web/static/src/js/views/form/form_renderer.js
+++ b/addons/web/static/src/js/views/form/form_renderer.js
@@ -55,7 +55,7 @@ var FormRenderer = BasicRenderer.extend({
      */
     autofocus: function () {
         if (this.mode === 'readonly') {
-            var firstPrimaryFormButton =  this.$el.find('button.oe_highlight:enabled:visible:first()');
+            var firstPrimaryFormButton =  this.$el.find('button.btn-primary:enabled:visible:first()');
             if (firstPrimaryFormButton.length > 0) {
                 return firstPrimaryFormButton.focus();
             } else {
@@ -345,7 +345,7 @@ var FormRenderer = BasicRenderer.extend({
             folded_buttons = [];
         }
 
-        // Toggle class to tell if the button box is full (LESS requirement)
+        // Toggle class to tell if the button box is full (CSS requirement)
         var full = (visible_buttons.length > nb_buttons);
         $result.toggleClass('o_full', full).toggleClass('o_not_full', !full);
 
@@ -356,10 +356,11 @@ var FormRenderer = BasicRenderer.extend({
 
         // Add the dropdown with folded buttons if any
         if (folded_buttons.length) {
-            $result.append($("<button>", {
-                type: 'button',
-                'class': "btn btn-sm oe_stat_button o_button_more dropdown-toggle",
-                'data-toggle': "dropdown",
+            $result.append(dom.renderButton({
+                attrs: {
+                    class: 'oe_stat_button o_button_more dropdown-toggle',
+                    'data-toggle': 'dropdown',
+                },
                 text: _t("More"),
             }));
 
@@ -392,9 +393,8 @@ var FormRenderer = BasicRenderer.extend({
      * @returns {jQueryElement}
      */
     _renderHeaderButton: function (node) {
-        var $button = $('<button>')
-                        .text(node.attrs.string)
-                        .addClass('btn btn-sm btn-default');
+        var $button = this._renderButtonFromNode(node);
+
         this._addOnClickAction($button, node);
         this._handleAttributes($button, node);
         this._registerModifiers(node, this.state, $button);
@@ -582,18 +582,9 @@ var FormRenderer = BasicRenderer.extend({
      * @returns {jQueryElement}
      */
     _renderStatButton: function (node) {
-        var $button = $('<button>').addClass('btn btn-sm oe_stat_button');
-        if (node.attrs.icon) {
-            $('<div>')
-                .addClass('fa fa-fw o_button_icon')
-                .addClass(node.attrs.icon)
-                .appendTo($button);
-        }
-        if (node.attrs.string) {
-            $('<span>')
-                .text(node.attrs.string)
-                .appendTo($button);
-        }
+        var $button = this._renderButtonFromNode(node, {
+            extraClass: 'oe_stat_button',
+        });
         $button.append(_.map(node.children, this._renderNode.bind(this)));
         this._addOnClickAction($button, node);
         this._handleAttributes($button, node);
@@ -633,11 +624,7 @@ var FormRenderer = BasicRenderer.extend({
      * @returns {jQueryElement}
      */
     _renderTagButton: function (node) {
-        var $button = dom.renderButton({
-            attrs: _.omit(node.attrs, 'icon', 'string'),
-            icon: node.attrs.icon,
-            text: (node.attrs.string || '').replace(/_/g, ''),
-        });
+        var $button = this._renderButtonFromNode(node);
         $button.append(_.map(node.children, this._renderNode.bind(this)));
         this._addOnClickAction($button, node);
         this._handleAttributes($button, node);
diff --git a/addons/web/static/src/js/views/list/list_controller.js b/addons/web/static/src/js/views/list/list_controller.js
index 3262196fa51..b42da9665ad 100644
--- a/addons/web/static/src/js/views/list/list_controller.js
+++ b/addons/web/static/src/js/views/list/list_controller.js
@@ -232,7 +232,7 @@ var ListController = BasicController.extend({
     },
     /**
      * Assign on the buttons create additionnal behavior to facilitate the work of the users doing input only using the keyboard
-     * 
+     *
      * @param {jQueryElement} $createButton  The create button itself
      */
     _assignCreateKeyboardBehavior: function($createButton) {
@@ -249,7 +249,7 @@ var ListController = BasicController.extend({
                     self.renderer.giveFocus();
                     break;
                 case $.ui.keyCode.TAB:
-                    if (!e.shiftKey && (e.target.classList.contains("btn-primary") || e.target.classList.contains("oe_highlight"))) {
+                    if (!e.shiftKey && e.target.classList.contains("btn-primary")) {
                         e.preventDefault();
                         $createButton.tooltip('show');
                     }
diff --git a/addons/web/static/src/js/views/list/list_renderer.js b/addons/web/static/src/js/views/list/list_renderer.js
index 54f556e474b..a304bd0a597 100644
--- a/addons/web/static/src/js/views/list/list_renderer.js
+++ b/addons/web/static/src/js/views/list/list_renderer.js
@@ -312,16 +312,10 @@ var ListRenderer = BasicRenderer.extend({
      * @returns {jQuery} a <button> element
      */
     _renderButton: function (record, node) {
-        var $button = $('<button>', {
-            type: 'button',
-            title: node.attrs.string,
+        var $button = this._renderButtonFromNode(node, {
+            extraClass: node.attrs.icon ? 'o_icon_button' : undefined,
+            textAsTitle: !!node.attrs.icon,
         });
-        if (node.attrs.icon) {
-            $button.addClass('o_icon_button');
-            $button.append($('<i>', {class: 'fa ' + node.attrs.icon}));
-        } else {
-            $button.text(node.attrs.string);
-        }
         this._handleAttributes($button, node);
         this._registerModifiers(node, record, $button);
 
diff --git a/addons/web/static/src/js/widgets/data_export.js b/addons/web/static/src/js/widgets/data_export.js
index dd0096f269b..68c8b23af13 100644
--- a/addons/web/static/src/js/widgets/data_export.js
+++ b/addons/web/static/src/js/widgets/data_export.js
@@ -217,7 +217,7 @@ var DataExport = Dialog.extend({
 
         // The default for the ".modal_content" element is "max-height: 100%;"
         // but we want it to always expand to "height: 100%;" for this modal.
-        // This can be achieved thanks to LESS modification without touching
+        // This can be achieved thanks to CSS modification without touching
         // the ".modal-content" rules... but not with Internet explorer (11).
         this.$modal.find(".modal-content").css("height", "100%");
 
diff --git a/addons/web/static/src/less/bootstrap_overridden.less b/addons/web/static/src/less/bootstrap_overridden.less
deleted file mode 100644
index 5bbe61ecdf6..00000000000
--- a/addons/web/static/src/less/bootstrap_overridden.less
+++ /dev/null
@@ -1,168 +0,0 @@
-// ------------------------------------------------------------------
-// Bootstrap variables
-// ------------------------------------------------------------------
-
-//== Grid
-@grid-gutter-width: @odoo-horizontal-padding*2;
-
-//== Colors
-@brand-primary: @odoo-brand-primary;
-@gray-lighter: @odoo-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;
-
-//== Scaffolding
-@body-bg: @odoo-brand-secondary;
-@text-color: @odoo-main-text-color;
-@link-color: @odoo-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;
-@headings-font-weight: bold;
-
-//== Components
-@component-active-bg: @gray-lighter;
-@component-active-color: @odoo-brand-optional;
-
-//== Badges
-@badge-bg: @odoo-brand-optional;
-@badge-color: white;
-@badge-line-height: @line-height-base;
-@badge-font-weight: normal;
-
-//== Breadcrumbs
-@breadcrumb-active-color: #777777;
-@breadcrumb-bg: @odoo-control-panel-background-color;
-@breadcrumb-color: #777777;
-@breadcrumb-padding-horizontal: 0;
-@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-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-hover-color: @gray-dark;
-@dropdown-link-hover-bg: @gray-lighter;
-@dropdown-link-active-color: @component-active-color;
-@dropdown-link-active-bg: @component-active-bg;
-@dropdown-link-disabled-color: @gray-light;
-@dropdown-header-color: @gray-light;
-
-//== Modals
-@modal-sm: 300px;
-@modal-md: 650px;
-@modal-lg: 980px;
-@modal-inner-padding: @odoo-horizontal-padding;
-@modal-title-padding: @odoo-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
-// this rule all the modal-backdrops are below all the opened modals.
-// Indeed, bootstrap forces them to a lower z-index as the modal-backdrop
-// element (unique in their supported cases) might be put after the modal
-// element (if the modal is already in the DOM, hidden, then opened). This
-// cannot happen in odoo though as modals are not hidden but removed from
-// the DOM and are always put at the end of the body when opened.
-//
-// Note that the variable @zindex-modal-background may be renamed/removed in
-// newer versions of bootstrap.
-//
-// TODO the following code was disabled because it is saas-incompatible
-//
-// @zindex-modal-background: @zindex-modal;
-
-//== Navs
-@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-tabs-active-link-hover-bg: white;
-
-//== Navbar
-@navbar-height: @odoo-navbar-height - 2;
-@navbar-margin-bottom: 0;
-@navbar-inverse-bg: #222222;
-@navbar-inverse-link-color: #9d9d9d;
-@navbar-inverse-link-hover-bg: #222222;
-@navbar-inverse-toggle-hover-bg: #222222;
-@navbar-border-radius: 0;
-
-//== Tables
-@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
-.o-btn-link-variant(@color, @color-active) {
-    text-transform: none;
-    .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 {
-        .o-hover-opacity();
-        .o-hover-text-color(@default-color: @text-muted, @hover-color: @color-active);
-    }
-}
-.btn-icon {
-  .button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);
-}
-.btn-link {
-    font-weight: @btn-font-weight;
-
-    &.btn-default {
-        .o-btn-link-variant(@text-color, @headings-color);
-    }
-    &.btn-success, &.text-success {
-        .o-btn-link-variant(@text-color, @brand-success);
-    }
-    &.btn-warning, &.text-warning {
-        .o-btn-link-variant(@text-color, @brand-warning);
-    }
-    &.btn-danger, &.text-danger {
-        .o-btn-link-variant(@text-color, @brand-danger);
-    }
-    &.btn-info, &.text-info {
-        .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/";
diff --git a/addons/web/static/src/less/fonts.less b/addons/web/static/src/less/fonts.less
deleted file mode 100644
index c6b19a2ba2f..00000000000
--- a/addons/web/static/src/less/fonts.less
+++ /dev/null
@@ -1,37 +0,0 @@
-// ------------------------------------------------------------------
-// Lato
-// ------------------------------------------------------------------
-@lato-font-path: '../fonts/lato';
-
-.lato-font(@type, @weight, @style) {
-    @font-face {
-        font-family: 'Lato';
-        src: url('@{lato-font-path}/Lato-@{type}-webfont.eot');
-        src: url('@{lato-font-path}/Lato-@{type}-webfont.eot?#iefix') format('embedded-opentype'),
-             url('@{lato-font-path}/Lato-@{type}-webfont.woff') format('woff'),
-             url('@{lato-font-path}/Lato-@{type}-webfont.ttf') format('truetype'),
-             url('@{lato-font-path}/Lato-@{type}-webfont.svg#Lato') format('svg');
-        font-weight: @weight;
-        font-style: @style;
-    }
-
-    @font-face {
-        font-family: 'Lato-@{type}';
-        src: url('@{lato-font-path}/Lato-@{type}-webfont.eot');
-        src: url('@{lato-font-path}/Lato-@{type}-webfont.eot?#iefix') format('embedded-opentype'),
-             url('@{lato-font-path}/Lato-@{type}-webfont.woff') format('woff'),
-             url('@{lato-font-path}/Lato-@{type}-webfont.ttf') format('truetype'),
-             url('@{lato-font-path}/Lato-@{type}-webfont.svg#Roboto') format('svg');
-    }
-}
-
-.lato-font-pair(@type, @weight) {
-    .lato-font('@{type}', @weight, normal);
-    .lato-font('@{type}Ita', @weight, italic);
-}
-
-.lato-font-pair('Hai', 100);
-.lato-font-pair('Lig', 300);
-.lato-font-pair('Reg', 400);
-.lato-font-pair('Bol', 700);
-.lato-font-pair('Bla', 900);
diff --git a/addons/web/static/src/less/rainbow.less b/addons/web/static/src/less/rainbow.less
deleted file mode 100644
index b86387b18ca..00000000000
--- a/addons/web/static/src/less/rainbow.less
+++ /dev/null
@@ -1,257 +0,0 @@
-/**************  rainbow  *****************/
-
-// Variables
-@reward-size: 400px;
-@reward-size-mobile: 300px;
-@reward-text-color: #727880;
-@reward-base-time: 1.4s;
-
-// o_reward
-.o_reward {
-    will-change: transform;
-    z-index: @zindex-modal;
-    padding: 50px;
-    margin: -5% auto 0 -(@reward-size / 2);
-    @media (max-width: @screen-xs-max) {
-        margin: -5% auto 0 -(@reward-size-mobile / 2);
-    }
-    background-image: -webkit-radial-gradient(#EDEFF4 30%, transparent 70%, transparent);
-    background-image: -o-radial-gradient(#EDEFF4 30%, transparent 70%, transparent);
-    background-image: radial-gradient(#EDEFF4 30%, transparent 70%, transparent);
-
-    .o-animation(reward-fading, @reward-base-time * 0.5, ease-in-out, 0s, 1, normal, forwards);
-    .o-position-absolute(20%, auto, auto, 50%);
-    .size(@reward-size, @reward-size);
-    @media (max-width: @screen-xs-max) {
-        .size(@reward-size-mobile, @reward-size-mobile);
-    }
-
-    &.o_reward_fading {
-        display: block;
-        .o-animation(reward-fading-reverse, (@reward-base-time * 0.4), ease-in-out, 0s, 1, normal, forwards);
-
-        .o_reward_face_group {
-            .o-animation(reward-jump-reverse, (@reward-base-time * 0.4), ease-in-out, 0s, 1, normal, forwards);
-        }
-
-        .o_reward_rainbow {
-            path {
-                .o-animation(reward-rainbow-reverse, (@reward-base-time * 0.5), ease-out, 0s, 1, normal, forwards);
-            }
-        }
-
-    }
-
-    .o_reward_face, .o_reward_stars, .o_reward_shadow, .o_reward_thumbup {
-        margin: 0 auto;
-    }
-
-    .o_reward_rainbow {
-        path {
-            stroke-dasharray: 600;
-            stroke-dashoffset: 0;
-            fill: none;
-            stroke-linecap: round;
-            stroke-width: 21px;
-            .o-animation(reward-rainbow, (@reward-base-time ), ease-out, 0s, 1, normal, forwards);
-        }
-    }
-
-    .o_reward_face_group {
-        transform-origin: center;
-        .o-animation(reward-jump, @reward-base-time * 0.8, ease-in-out);
-        .o-position-absolute(6%, 0, 0, 0);
-        .size(100%, 60%);
-    }
-
-    .o_reward_face {
-        display: block;
-        top: 42%;
-        position: relative;
-        border-radius: 100%;
-        background: center center / contain no-repeat;
-        .o-animation(reward-float, @reward-base-time, ease-in-out, @reward-base-time, infinite, alternate);
-        .size(34%, 56.67%);
-    }
-
-    .o_reward_stars {
-        display: block;
-        .size(@reward-size * 0.75, @reward-size / 2);
-        @media (max-width: @screen-xs-max) {
-            .size(@reward-size-mobile * 0.75, @reward-size-mobile / 2);
-        }
-        .o-position-absolute(18%, 7%);
-
-        svg {
-            transform-origin: center center;
-            .o-position-absolute(28%, @left:3%);
-            .o-animation(reward-stars, @reward-base-time, ease-in-out, 0s, infinite, alternate-reverse);
-
-            &.star2, &.star4 {
-                .o-animation(reward-stars, (@reward-base-time*1.2), ease-in-out, 0s, infinite, alternate);
-            }
-
-            &.star2 {
-                left: 20%;
-                top: 2%;
-            }
-
-            &.star3 {
-                left: 49%;
-                top: 6%;
-            }
-
-            &.star4 {
-                left: 70%;
-                top: 27%;
-            }
-
-        }
-    }
-
-    .o_reward_thumbup {
-        width: 40px;
-        display: block;
-        .o-animation(reward-scale, @reward-base-time * 0.5, ease-in-out, 0s, infinite, alternate);
-        .o-position-absolute(63%, auto, auto, 65%);
-    }
-
-    .o_reward_msg_container {
-        will-change: transform;
-        padding-top: 11%;
-        width: 70%;
-        margin-left: 15%;
-
-        // Translate before animate
-        .o-transform(translateY(5px));
-
-        .o-animation(reward-float, @reward-base-time, ease-in-out, @reward-base-time, infinite, alternate-reverse);
-        .o-position-absolute(85%, auto, auto, 0%);
-
-        .o_reward_thumb_right {
-            height: 40px;
-            z-index: 1;
-            .o-position-absolute(0, auto, auto, 16%);
-        }
-
-        .o_reward_msg {
-            margin-left: 7%;
-            margin-top: -9.5%;
-            padding: 25px 15px 20px;
-            background: white;
-            border: 1px solid #ecf1ff;
-            border-top-width: 0;
-            display: inline-block;
-
-            // Reset margins for first and penultimate childs (the last one is shadow)
-            *:first-child {
-                margin-top: 0;
-            }
-        }
-
-        .o_reward_msg_content {
-            position: relative;
-            font-family: sans-serif;
-            text-align: left;
-            color: @reward-text-color;
-        }
-
-        .o_reward_shadow_container {
-            .o-transform(~"translateY(0px) rotateZ(0)");
-            .o-animation(reward-float, @reward-base-time, ease-in-out, @reward-base-time, infinite, alternate);
-        }
-
-        .o_reward_shadow {
-            .size(100%, 12px);
-            background-color: #e7eaf0;
-            border-radius: 100%;
-            .o-transform(~"scale(0.8) rotateZ(0)");
-            .o-animation(reward-scale, @reward-base-time, ease-in-out, @reward-base-time, infinite, alternate);
-            .o-position-absolute(auto, auto, -40px, 0);
-        }
-    }
-}
-
-@keyframes reward-fading {
-    0% {
-        opacity: 0;
-    }
-    100% {
-        opacity: 1;
-    }
-}
-
-@keyframes reward-fading-reverse {
-    100% {
-        opacity: 0;
-    }
-}
-
-@keyframes reward-jump {
-    0% {
-        .o-transform(~"scale(0.5)");
-    }
-    50% {
-        .o-transform(~"scale(1.05)");
-    }
-    to {
-        .o-transform(~"scale(1)");
-    }
-}
-
-@keyframes reward-jump-reverse {
-    0% {
-        .o-transform(~"scale(1)");
-    }
-    50% {
-        .o-transform(~"scale(1.05)");
-    }
-    to {
-        .o-transform(~"scale(0.5)");
-    }
-}
-
-@keyframes reward-rainbow {
-    0% {
-        stroke-dashoffset: -500;
-    }
-    to {
-        stroke-dashoffset: 0;
-    }
-}
-
-@keyframes reward-rainbow-reverse {
-    to {
-        stroke-dashoffset: -500;
-    }
-}
-
-@keyframes reward-float {
-    from {
-        .o-transform(~"translateY(0px)");
-    }
-    to {
-        .o-transform(~"translateY(5px)");
-    }
-}
-
-@keyframes reward-stars {
-    from {
-        .o-transform(~"scale(0.3) rotate(0deg)");
-    }
-    50% {
-        .o-transform(~"scale(1.0) rotate(20deg)");
-    }
-    to {
-        .o-transform(~"scale(0.3) rotate(80deg)");
-    }
-}
-
-@keyframes reward-scale {
-    from {
-        .o-transform(~"scale(0.8)");
-    }
-    to {
-        .o-transform(~"scale(1.0)");
-    }
-}
diff --git a/addons/web/static/src/less/utils.less b/addons/web/static/src/less/utils.less
deleted file mode 100644
index addc84d214b..00000000000
--- a/addons/web/static/src/less/utils.less
+++ /dev/null
@@ -1,274 +0,0 @@
-///
-/// This file regroups the odoo LESS mixins. They are available in every asset bundle.
-///
-
-// ------------------------------------------------------------------
-// Padding
-// ------------------------------------------------------------------
-.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
-// ------------------------------------------------------------------
-.utils-caret-boilerplate() {
-    content: "";
-    display: inline-block;
-    width: 0;
-    height: 0;
-    vertical-align: middle;
-}
-.o-caret-down(@caret-width: @caret-width-base) {
-    .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
-}
-.o-caret-up(@caret-width: @caret-width-base) {
-    .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
-}
-.o-caret-left(@caret-width: @caret-width-base) {
-    .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
-}
-.o-caret-right(@caret-width: @caret-width-base) {
-    .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
-// ------------------------------------------------------------------
-// Flex
-.o-flex-display() {
-    display: -ms-flexbox;
-    display: -moz-box;
-    display: -webkit-box;
-    display: -webkit-flex;
-
-    display: flex;
-}
-.o-inline-flex-display() {
-    display: -ms-inline-flexbox;
-    display: -moz-inline-box;
-    display: -webkit-inline-box;
-    display: -webkit-inline-flex;
-
-    display: inline-flex;
-}
-.o-flex-flow(@direction, @wrap) {
-    -ms-flex-flow: @direction @wrap;
-    -moz-flex-flow: @direction @wrap;
-    -webkit-flex-flow: @direction @wrap;
-
-    flex-flow: @direction @wrap;
-}
-.o-flex(@grow, @schrink, @basis) {
-    -ms-flex: @grow @schrink @basis;
-    -moz-flex: @grow @schrink @basis;
-    -webkit-box-flex: @grow;
-    -webkit-flex: @grow @schrink @basis;
-
-    flex: @grow @schrink @basis;
-}
-.o-justify-content(@justify) {
-    -moz-justify-content: @justify;
-    -webkit-justify-content: @justify;
-
-    justify-content: @justify;
-}
-.o-align-content(@align) {
-    -webkit-align-content: @align;
-
-    align-content: @align;
-}
-.o-align-items(@align) {
-    -webkit-align-items: @align;
-
-    align-items: @align;
-}
-.o-align-self(@align) {
-    -webkit-align-self: @align;
-
-    align-self: @align;
-}
-
-// Background-size
-.o-background-size(@size) {
-    -webkit-background-size: @size;
-    -moz-background-size: @size;
-    -o-background-size: @size;
-    background-size: @size;
-}
-
-// ------------------------------------------------------------------
-// Dropdowns
-// ------------------------------------------------------------------
-.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
-// ------------------------------------------------------------------
-.o-appearance(@value) {
-    -webkit-appearance: @value;
-    -moz-appearance: @value;
-    appearance: @value;
-}
-
-// ------------------------------------------------------------------
-// Transform
-// ------------------------------------------------------------------
-.o-transform-origin(@x: 50%, @y: 50%, @z: 0) {
-    -ms-transform-origin: @x @y @z;
-    -webkit-transform-origin: @x @y @z;
-    -moz-transform-origin: @x @y @z;
-    transform-origin: @x @y @z;
-}
-
-// ------------------------------------------------------------------
-// Animation
-// ------------------------------------------------------------------
-.o-animation(@name: none, @duration: 0s, @timing-function: ease, @delay: 0s, @iteration-count: 1, @direction: normal, @fill-mode: none, @play-state: running) {
-    -webkit-animation: @name @duration @timing-function @delay @iteration-count @direction @fill-mode @play-state;
-    -moz-animation: @name @duration @timing-function @delay @iteration-count @direction @fill-mode @play-state;
-    -o-animation: @name @duration @timing-function @delay @iteration-count @direction @fill-mode @play-state;
-    animation: @name @duration @timing-function @delay @iteration-count @direction @fill-mode @play-state;
-}
-
-// ------------------------------------------------------------------
-// Transition
-// ------------------------------------------------------------------
-.o-transition(@property: all, @duration: 0s, @timing-function: ease, @transition-delay: 0s) {
-    -webkit-transition: @property @duration @timing-function @transition-delay;
-    -moz-transition: @property @duration @timing-function @transition-delay;
-    -o-transition: @property @duration @timing-function @transition-delay;
-    transition: @property @duration @timing-function @transition-delay;
-}
-
-// ------------------------------------------------------------------
-// Columns
-// ------------------------------------------------------------------
-.o-columns(@width: auto, @col: auto) {
-    -webkit-columns: @width @col;
-    -moz-columns: @width @col;
-    columns: @width @col;
-}
-
-// ------------------------------------------------------------------
-// Position absolute
-// ------------------------------------------------------------------
-.o-position-absolute(@top: auto, @right: auto, @bottom: auto, @left: auto) {
-    position: absolute;
-    top: @top;
-    left: @left;
-    bottom: @bottom;
-    right: @right;
-}
-
-// ------------------------------------------------------------------
-// Text overflow
-// ------------------------------------------------------------------
-.o-text-overflow(@display: inline-block, @max-width: 100%) {
-    display: @display;
-    max-width: @max-width;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    vertical-align: top; // To update display context changed by overflow:hidden
-}
-
-// ------------------------------------------------------------------
-// Gradients
-// ------------------------------------------------------------------
-.o-linear-gradient(@deg: 45deg, @start-color: #555, @end-color: #333) {
-    background-repeat: repeat-x;
-    background-image: -webkit-linear-gradient(@deg, @start-color, @end-color);
-    background-image: -o-linear-gradient(@deg, @start-color, @end-color);
-    background-image: linear-gradient(@deg, @start-color, @end-color);
-}
-.o-vertical-gradient(@startColor: #555, @endColor: #333) {
-    background-color: mix(@startColor, @endColor);
-    background-image: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));
-    background-image: -webkit-linear-gradient(top, @startColor, @endColor);
-    background-image: -moz-linear-gradient(top, @startColor, @endColor);
-    background-image: -ms-linear-gradient(top, @startColor, @endColor);
-    background-image: -o-linear-gradient(top, @startColor, @endColor);
-    background-image: linear-gradient(to bottom, @startColor, @endColor);
-}
-.o-skew-gradient(@startColor: #555, @endColor: #333) {
-    background-color: @endColor;
-    background: -moz-linear-gradient(135deg, @endColor, @startColor);
-    background: -o-linear-gradient(135deg, @startColor, @endColor);
-    background: -webkit-gradient(linear, left top, right bottom, from(@startColor), to(@endColor));
-    background: -ms-linear-gradient(top, @startColor, @endColor);
-}
-
-// ------------------------------------------------------------------
-// Transform
-// ------------------------------------------------------------------
-.o-transform(@transform) {
-    -webkit-transform: @transform;
-    -moz-transform: @transform;
-    -ms-transform: @transform;
-    -o-transform: @transform;
-    transform: @transform;
-}
-
-// ------------------------------------------------------------------
-// Hovering effects
-// ------------------------------------------------------------------
-.o-hover-opacity(@default-opacity: 0.5, @hover-opacity: 1) {
-    opacity: @default-opacity;
-
-    &:hover, &:focus, &.focus {
-        opacity: @hover-opacity;
-    }
-}
-.o-hover-text-color(@default-color: @text-color, @hover-color: @link-color) {
-    color: @default-color;
-
-    &:hover, &:focus, &.focus {
-        color: @hover-color;
-    }
-}
diff --git a/addons/web/static/src/less/variables.less b/addons/web/static/src/less/variables.less
deleted file mode 100644
index 5e3dd01d313..00000000000
--- a/addons/web/static/src/less/variables.less
+++ /dev/null
@@ -1,92 +0,0 @@
-///
-/// This file regroups the LESS 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-color-0: @gray-light;
-@odoo-color-1: #F06050;
-@odoo-color-2: #F4A460;
-@odoo-color-3: #F7CD1F;
-@odoo-color-4: #6CC1ED;
-@odoo-color-5: #814968;
-@odoo-color-6: #EB7E7F;
-@odoo-color-7: #2C8397;
-@odoo-color-8: #475577;
-@odoo-color-9: #D6145F;
-@odoo-color-10: #30C381;
-@odoo-color-11: #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/less/animation.less b/addons/web/static/src/scss/animation.scss
index 6da0a1f9d64..92097a23298 100644
--- a/addons/web/static/src/less/animation.less
+++ b/addons/web/static/src/scss/animation.scss
@@ -146,16 +146,16 @@
 }
 
 /************** MIXINS for ANIMATIONS **************/
-.o-display-marked(@content, @top, @left, @color) {
-    .o-position-absolute(@top: @top, @left: @left);
+@mixin o-display-marked($content, $top, $left, $color) {
+    @include o-position-absolute($top: $top, $left: $left);
     font-size: 300px;
     font-family: "FontAwesome";
-    content: @content;
-    color: @color;
-    .o-transform-origin();
-    .o-animation(markAnim, 1s, ease-in-out, 0s, 1, normal, forwards);
+    content: $content;
+    color: $color;
+    @include o-transform-origin;
+    @include o-animation(markAnim, 1s, ease-in-out, 0s, 1, normal, forwards);
 
-    @media (max-width: @screen-sm-max) {
+    @media (max-width: $screen-sm-max) {
         left: 40%;
         font-size: 30vw;
     }
diff --git a/addons/web/static/src/less/base_settings.less b/addons/web/static/src/scss/base_settings.scss
index 74ef6472aef..7cd25c7e578 100644
--- a/addons/web/static/src/less/base_settings.less
+++ b/addons/web/static/src/scss/base_settings.scss
@@ -1,20 +1,16 @@
-// VARIABLES
-@o-base-settings-mobile-tabs-height: 40px;
-@o-base-settings-mobile-tabs-overflow-gap: 3%;
-
 // MIXINS
-.o-base-settings-horizontal-padding(@padding-base: @padding-small-vertical) {
-    padding: @padding-base @odoo-horizontal-padding;
+@mixin o-base-settings-horizontal-padding($padding-base: $padding-small-vertical) {
+    padding: $padding-base $o-horizontal-padding;
 
-    @media (min-width: @screen-lg-min) {
-        padding-left: @odoo-horizontal-padding*2;;
+    @media (min-width: $screen-lg-min) {
+        padding-left: $o-horizontal-padding*2;;
     }
 }
 
 // Use a very specif selector to overwrite generic form-view rules
 .o_form_view.o_form_nosheet.o_base_settings {
-    .o-flex-display();
-    .o-flex-flow(column, nowrap);
+    @include o-flex-display;
+    @include o-flex-flow(column, nowrap);
     padding: 0px;
 }
 
@@ -22,20 +18,20 @@
 .o_base_settings {
     height: 100%;
 
-    @media (max-width: @screen-xs-max) {
-        .o-flex-flow(column, nowrap);
+    @media (max-width: $screen-xs-max) {
+        @include o-flex-flow(column, nowrap);
     }
 
     .o_control_panel {
         .o_panel {
-            .o-flex-display();
-            .o-flex-flow(row, wrap);
-            margin-bottom: @odoo-sheet-vpadding*0.5;
+            @include o-flex-display;
+            @include o-flex-flow(row, wrap);
+            margin-bottom: $o-sheet-vpadding*0.5;
             width: 100%;
 
             .title, .o_setting_search {
-                .o-flex(1, 0, auto);
-                width: @screen-xs-min*0.5;
+                @include o-flex(1, 0, auto);
+                width: $screen-xs-min*0.5;
             }
 
             .o_setting_search {
@@ -45,15 +41,15 @@
                     height: 28px;
                     padding: 0px;
                     border: 0px;
-                    border-bottom: 1px solid @gray-lighter-darker;
-                    border-color: @gray;
+                    border-bottom: 1px solid $gray-lighter-darker;
+                    border-color: $gray;
                     box-shadow: none;
                     font-weight: 500;
                 }
 
                 .searchIcon {
-                    .o-position-absolute(4px, 0);
-                    color: @gray;
+                    @include o-position-absolute(4px, 0);
+                    color: $gray;
                 }
             }
         }
@@ -63,45 +59,45 @@
             margin: 0;
             border: 0;
 
-            .oe_highlight, .oe_link  {
-                padding: @padding-small-vertical @padding-small-horizontal;
+            .btn-primary, .btn-link  {
+                padding: $padding-small-vertical $padding-small-horizontal;
             }
 
-            .oe_link {
-                .o-hover-text-color(@link-color, @link-hover-color);
+            .btn-link {
+                @include o-hover-text-color($link-color, $link-hover-color);
             }
         }
     }
 
     .o_setting_container {
-        .o-flex-display();
-        .o-flex(1, 1, auto);
+        @include o-flex-display;
+        @include o-flex(1, 1, auto);
 
         overflow: auto;
 
-        @media (max-width: @screen-xs-max) {
-            .o-flex-flow(column, nowrap);
+        @media (max-width: $screen-xs-max) {
+            @include o-flex-flow(column, nowrap);
         }
 
         .settings_tab {
-            .o-flex-display();
-            .o-flex(0, 0, auto);
-            .o-flex-flow(column, nowrap);
-            background: @gray-dark;
+            @include o-flex-display;
+            @include o-flex(0, 0, auto);
+            @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) {
-                .o-flex(0, 0, @o-base-settings-mobile-tabs-height);
-                .o-inline-flex-display();
+            @media (max-width: $screen-xs-max) {
+                @include o-flex(0, 0, $o-base-settings-mobile-tabs-height);
+                @include o-inline-flex-display;
                 position: relative;
                 overflow: hidden;
                 padding: 0;
             }
 
             .selected {
-                background-color: @gray-darker;
-                box-shadow: inset 3px 0 0 @odoo-brand-optional;
+                background-color: $gray-darker;
+                box-shadow: inset 3px 0 0 $o-brand-optional;
 
                 .app_name {
                     color: white;
@@ -109,10 +105,10 @@
             }
 
             .tab {
-                .o-flex-display();
-                padding: 0 @odoo-horizontal-padding*2 0 @odoo-horizontal-padding;
+                @include o-flex-display;
+                padding: 0 $o-horizontal-padding*2 0 $o-horizontal-padding;
                 height: 40px;
-                color: @gray-lighter-darker;
+                color: $gray-lighter-darker;
                 font-size: 13px;
                 line-height: 40px;
                 cursor: pointer;
@@ -123,17 +119,17 @@
                 }
 
                 // Mobile Tabs
-                @media (max-width: @screen-xs-max) {
+                @media (max-width: $screen-xs-max) {
                     display: block;
-                    .o-position-absolute(@left:100%);
-                    .size(auto, @o-base-settings-mobile-tabs-height);
-                    padding: @o-base-settings-mobile-tabs-height*0.25 @o-base-settings-mobile-tabs-height*0.4;
+                    @include o-position-absolute($left:100%);
+                    @include size(auto, $o-base-settings-mobile-tabs-height);
+                    padding: $o-base-settings-mobile-tabs-height*0.25 $o-base-settings-mobile-tabs-height*0.4;
                     text-align: center;
                     font-size: 14px;
                     font-weight: 500;
                     line-height: inherit;
-                    .o-transition(0.2s, all);
-                    .o-transform(translate3d(0,0,0));
+                    @include o-transition(0.2s, all);
+                    @include o-transform(translate3d(0,0,0));
 
                     .app_name {
                         display: block;
@@ -142,15 +138,15 @@
 
                     &:after {
                         content: '';
-                        background: @odoo-brand-optional;
+                        background: $o-brand-optional;
                         opacity: 0;
-                        .o-position-absolute(auto, 0, 0, 0);
-                        .size(100%, 3px);
-                        .o-transition(0.2s, all);
+                        @include o-position-absolute(auto, 0, 0, 0);
+                        @include size(100%, 3px);
+                        @include o-transition(0.2s, all);
                     }
 
                     &.previous, &.before {
-                        left: 0% - @o-base-settings-mobile-tabs-overflow-gap;
+                        left: 0% - $o-base-settings-mobile-tabs-overflow-gap;
                     }
 
                     &.current {
@@ -167,7 +163,7 @@
                     }
 
                     &.next, &.after {
-                        left: 100% + @o-base-settings-mobile-tabs-overflow-gap;
+                        left: 100% + $o-base-settings-mobile-tabs-overflow-gap;
                     }
                 }
             }
@@ -175,15 +171,15 @@
 
         .settings {
             position: relative;
-            .o-flex(1, 1, 100%);
-            background-color: @odoo-view-background-color;
+            @include o-flex(1, 1, 100%);
+            background-color: $o-view-background-color;
             overflow: auto;
 
             > .app_settings_block {
                 h2 {
                     margin-bottom: 0;
-                    .o-base-settings-horizontal-padding();
-                    background-color: @gray-lighter;
+                    @include o-base-settings-horizontal-padding;
+                    background-color: $gray-lighter;
                     font-size: 15px;
                     font-weight: bold;
 
@@ -194,30 +190,30 @@
                 }
 
                 .o_settings_container {
-                    max-width: @screen-md-min; // Provide a maximum container size to ensure readability
-                    .o-base-settings-horizontal-padding(0);
+                    max-width: $screen-md-min; // Provide a maximum container size to ensure readability
+                    @include o-base-settings-horizontal-padding(0);
                 }
             }
 
             .settingSearchHeader {
-                .o-flex-display();
+                @include o-flex-display;
                 margin: 30px 0 10px;
-                .o-base-settings-horizontal-padding();
-                background-color: @gray-lighter;
+                @include o-base-settings-horizontal-padding;
+                background-color: $gray-lighter;
 
                 .icon {
-                    .square(25px);
+                    @include square(25px);
                     margin-right: 10px;
                 }
 
                 .appName {
-                    color: @headings-color;
+                    color: $headings-color;
                     font-size: 17px;
                 }
             }
 
             .notFound {
-                color : @text-muted;
+                color : $text-muted;
                 text-align: center;
                 font-size: 25px;
                 padding-top: 50px;
diff --git a/addons/web/static/src/scss/bootstrap_overridden.scss b/addons/web/static/src/scss/bootstrap_overridden.scss
new file mode 100644
index 00000000000..9701ead0539
--- /dev/null
+++ b/addons/web/static/src/scss/bootstrap_overridden.scss
@@ -0,0 +1,120 @@
+// ------------------------------------------------------------------
+// Bootstrap variables
+// ------------------------------------------------------------------
+
+//== Grid
+$grid-gutter-width: $o-horizontal-padding*2;
+
+//== Colors
+$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: $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: $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: $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: $o-brand-optional;
+
+//== Badges
+$badge-bg: $o-brand-optional;
+$badge-color: white;
+$badge-line-height: $o-line-height-base;
+$badge-font-weight: normal;
+
+//== Breadcrumbs
+$breadcrumb-active-color: #777777;
+$breadcrumb-bg: $o-control-panel-background-color;
+$breadcrumb-color: #777777;
+$breadcrumb-padding-horizontal: 0;
+$breadcrumb-padding-vertical: 0;
+
+//== Buttons
+$btn-default-bg: white;
+$btn-default-border: #cccccc;
+$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: $o-main-text-color;
+$dropdown-link-hover-color: $gray-dark;
+$dropdown-link-hover-bg: $gray-lighter;
+$dropdown-link-active-color: $component-active-color;
+$dropdown-link-active-bg: $component-active-bg;
+$dropdown-link-disabled-color: $gray-light;
+$dropdown-header-color: $gray-light;
+
+//== Modals
+$modal-sm: 300px;
+$modal-md: 650px;
+$modal-lg: 980px;
+$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
+// this rule all the modal-backdrops are below all the opened modals.
+// Indeed, bootstrap forces them to a lower z-index as the modal-backdrop
+// element (unique in their supported cases) might be put after the modal
+// element (if the modal is already in the DOM, hidden, then opened). This
+// cannot happen in odoo though as modals are not hidden but removed from
+// the DOM and are always put at the end of the body when opened.
+//
+// Note that the variable $zindex-modal-background may be renamed/removed in
+// newer versions of bootstrap.
+//
+// TODO the following code was disabled because it is saas-incompatible
+//
+// $zindex-modal-background: $zindex-modal;
+
+//== Navs
+$nav-link-padding: 10px 15px;
+$nav-pills-border-radius: 0;
+$nav-pills-active-link-hover-color: white;
+$nav-pills-active-link-hover-bg: $o-brand-optional;
+$nav-tabs-active-link-hover-bg: white;
+
+//== Navbar
+$navbar-height: $o-navbar-height - 2;
+$navbar-margin-bottom: 0;
+$navbar-inverse-bg: #222222;
+$navbar-inverse-link-color: #9d9d9d;
+$navbar-inverse-link-hover-bg: #222222;
+$navbar-inverse-toggle-hover-bg: #222222;
+$navbar-border-radius: 0;
+
+//== Tables
+$table-bg-accent: #efeff8; // FIXME: expose
+$table-bg-hover: darken($table-bg-accent,5%);
+
+$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
--- /dev/null
+++ b/addons/web/static/src/scss/bootstrap_overridden_frontend.scss
diff --git a/addons/web/static/src/less/control_panel.less b/addons/web/static/src/scss/control_panel.scss
index 325ed25b3ac..447a1a587cc 100644
--- a/addons/web/static/src/less/control_panel.less
+++ b/addons/web/static/src/scss/control_panel.scss
@@ -1,11 +1,10 @@
-@breadcrumb-height: 30px;
 
 .o_control_panel {
-    .o-flex-display();
-    .o-flex-flow(row, wrap);
-    border-bottom: 1px solid darken(@odoo-control-panel-background-color, 20%);
-    .o-webclient-padding(@top: 10px, @bottom: 10px);
-    background-color: @odoo-control-panel-background-color;
+    @include o-flex-display;
+    @include o-flex-flow(row, wrap);
+    border-bottom: 1px solid darken($o-control-panel-background-color, 20%);
+    @include o-webclient-padding($top: 10px, $bottom: 10px);
+    background-color: $o-control-panel-background-color;
 
     > .breadcrumb {
         width: 50%;
@@ -13,7 +12,7 @@
         font-size: 18px;
 
         > li {
-            .o-text-overflow(@max-width: 90%);
+            @include o-text-overflow($max-width: 90%);
 
             > a {
                 cursor: pointer;
@@ -27,7 +26,7 @@
 
     > .o_cp_searchview {
         width: 50%;
-        min-height: @breadcrumb-height;
+        min-height: $o-cp-breadcrumb-height;
     }
 
     .btn.o_enable_searchview {
@@ -37,8 +36,8 @@
     }
 
     > .o_cp_left {
-        .o-flex-display();
-        .o-justify-content(space-between);
+        @include o-flex-display;
+        @include o-justify-content(space-between);
         width: 50%;
         margin-top: 5px;
 
@@ -56,10 +55,10 @@
                 }
                 .o_form_binary_form span {
                     padding: 3px 25px;
-                    color: @btn-default-color;
+                    color: $btn-default-color;
                 }
                 .o_form_binary_form:hover {
-                    background-color: @table-bg-hover;
+                    background-color: $table-bg-hover;
                 }
             }
             .o_sidebar_delete_attachment {
@@ -72,7 +71,7 @@
     }
 
     > .o_cp_right {
-        .o-flex-display();
+        @include o-flex-display;
         width: 50%;
         margin-top: 5px;
 
@@ -80,11 +79,11 @@
             margin: auto 0 auto auto;
             padding-left: 5px;
             text-align: center;
-            .user-select(none);
+            @include user-select(none);
 
             > div {
-                .o-flex-display();
-                .o-align-items(center);
+                @include o-flex-display;
+                @include o-align-items(center);
             }
 
             .o_pager_counter {
@@ -93,24 +92,24 @@
         }
 
         > .o_cp_switch_buttons > .btn:first-child {
-            margin-left: @odoo-horizontal-padding;
+            margin-left: $o-horizontal-padding;
         }
     }
 }
 
 .o_x2m_control_panel {
-    .o-flex-display();
-    .o-flex-flow(row, wrap);
+    @include o-flex-display;
+    @include o-flex-flow(row, wrap);
 
     .o_cp_buttons {
-        .o-flex-display();
+        @include o-flex-display;
         margin-right: auto;
         > div {
             margin-top: 5px;
         }
     }
     .o_cp_pager {
-        .o-flex-display();
+        @include o-flex-display;
         margin-left: auto;
     }
 }
diff --git a/addons/web/static/src/less/data_export.less b/addons/web/static/src/scss/data_export.scss
index 01a1da80134..aa690cfdb74 100644
--- a/addons/web/static/src/less/data_export.less
+++ b/addons/web/static/src/scss/data_export.scss
@@ -1,11 +1,11 @@
 .o_web_client .o_export {
-    .o-flex(1, 1, auto);
-    .o-flex-display();
-    .o-flex-flow(column, nowrap);
+    @include o-flex(1, 1, auto);
+    @include o-flex-display;
+    @include o-flex-flow(column, nowrap);
     min-height: 0;
 
     > p, > .row {
-        .o-flex(0, 0, auto);
+        @include o-flex(0, 0, auto);
     }
 
     label {
@@ -18,8 +18,8 @@
 
         > div {
             margin-left: 5px;
-            .o-inline-flex-display();
-            .o-align-items(center);
+            @include o-inline-flex-display;
+            @include o-align-items(center);
 
             > label, > input {
                 margin: 0 0 0 5px;
@@ -28,39 +28,39 @@
     }
 
     .o_export_panel {
-        .o-flex(1, 1, auto);
+        @include o-flex(1, 1, auto);
         position: relative;
         min-height: 0;
 
         > div {
             height: 100%;
-            .o-flex-display();
-            .o-flex-flow(column, nowrap);
-            .o-justify-content(center);
+            @include o-flex-display;
+            @include o-flex-flow(column, nowrap);
+            @include o-justify-content(center);
 
             &.o_left_panel { // Needed because of chrome
-                .o-position-absolute(@top: 0, @bottom: 0, @left: 0, @right: 57%);
+                @include o-position-absolute($top: 0, $bottom: 0, $left: 0, $right: 57%);
             }
             &.o_center_panel { // Needed because of chrome
-                .o-position-absolute(@top: 0, @bottom: 0, @left: 43%, @right: 43%);
+                @include o-position-absolute($top: 0, $bottom: 0, $left: 43%, $right: 43%);
             }
             &.o_right_panel { // Needed because of chrome
-                .o-position-absolute(@top: 0, @bottom: 0, @left: 57%, @right: 0);
+                @include o-position-absolute($top: 0, $bottom: 0, $left: 57%, $right: 0);
             }
 
             > h4, > div {
-                .o-flex(0, 0, auto);
+                @include o-flex(0, 0, auto);
             }
 
             > button {
-                .o-flex(0, 0, auto);
+                @include o-flex(0, 0, auto);
                 margin-top: 10px;
             }
 
             .o_left_field_panel, .o_fields_list {
-                border: 1px solid @odoo-brand-lightsecondary;
+                border: 1px solid $o-brand-lightsecondary;
                 overflow: auto;
-                .o-flex(1, 1, auto);
+                @include o-flex(1, 1, auto);
                 min-height: 0;
             }
 
@@ -68,21 +68,21 @@
                 cursor: pointer;
                 position: relative;
                 padding-left: 20px;
-                .user-select(none);
+                @include user-select(none);
 
                 &.o_selected > .o_tree_column {
-                    background-color: @odoo-brand-primary;
+                    background-color: $o-brand-primary;
                     color: white;
                 }
 
                 .o_expand_parent {
-                    .o-position-absolute(@top: 4px, @left: 5px);
+                    @include o-position-absolute($top: 4px, $left: 5px);
                 }
                 .o_tree_column {
                     display: block;
 
                     &.o_required {
-                        border-bottom: 2px solid @odoo-main-text-color;
+                        border-bottom: 2px solid $o-main-text-color;
                     }
                 }
 
@@ -92,16 +92,16 @@
             }
 
             .o_save_list, .o_exported_lists {
-                .o-flex-display();
-                .o-align-items(baseline);
+                @include o-flex-display;
+                @include o-align-items(baseline);
 
                 > label, > button {
                     margin: 0 0 5px;
-                    .o-flex(0, 0, auto);
+                    @include o-flex(0, 0, auto);
                 }
                 > input, > select {
                     width: 0;
-                    .o-flex(1, 0, auto);
+                    @include o-flex(1, 0, auto);
                 }
             }
         }
diff --git a/addons/web/static/src/less/datepicker.less b/addons/web/static/src/scss/datepicker.scss
index fdf3a585b57..d8d4ba1d520 100644
--- a/addons/web/static/src/less/datepicker.less
+++ 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;
@@ -21,10 +19,10 @@
     }
 
     .o_datepicker_button {
-        .o-position-absolute(2px, 4px);
+        @include o-position-absolute(2px, 4px);
         pointer-events: none; // let click events go through the underlying input
         &:after {
-            .o-caret-down;
+            @include o-caret-down;
         }
     }
 }
@@ -33,26 +31,26 @@
 // The '.dropdown-menu' part is needed to override default bootstrap rule as
 // this file is unfortunately placed in common assets.
 .bootstrap-datetimepicker-widget.dropdown-menu {
-    z-index: @zindex-modal + 1;
+    z-index: $zindex-modal + 1;
 }
 
 .datepicker {
     .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 @@
             > 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/less/debug_manager.less b/addons/web/static/src/scss/debug_manager.scss
index 74d20dda43a..74d20dda43a 100644
--- a/addons/web/static/src/less/debug_manager.less
+++ b/addons/web/static/src/scss/debug_manager.scss
diff --git a/addons/web/static/src/less/domain_selector.less b/addons/web/static/src/scss/domain_selector.scss
index 70d4c0bd0c8..6755bed49e9 100644
--- a/addons/web/static/src/less/domain_selector.less
+++ b/addons/web/static/src/scss/domain_selector.scss
@@ -1,28 +1,28 @@
 
 .o_domain_node {
-    @o-domain-selector-indent: 32px;
-    @o-domain-selector-panel-space: 60px;
-    @o-domain-selector-row-height: 35px; // should be greater than a "normal" row so that "header" parts are the same size of rows
-    @o-domain-animation-bar-height: 15px;
+    $o-domain-selector-indent: 32px;
+    $o-domain-selector-panel-space: 60px;
+    $o-domain-selector-row-height: 35px; // should be greater than a "normal" row so that "header" parts are the same size of rows
+    $o-domain-animation-bar-height: 15px;
 
     position: relative;
 
     // Rows in a domain node (selector) have a minimum height and holds the control panel
     .o_domain_selector_row {
-        .o-flex-display();
-        .o-align-items(center);
-        min-height: @o-domain-selector-row-height;
+        @include o-flex-display;
+        @include o-align-items(center);
+        min-height: $o-domain-selector-row-height;
 
         > * {
-            .o-flex(0, 0, auto);
+            @include o-flex(0, 0, auto);
         }
 
         > .o_domain_node_control_panel {
-            .o-position-absolute(@top: 0, @bottom: 0, @right: -@o-domain-selector-panel-space);
+            @include o-position-absolute($top: 0, $bottom: 0, $right: -$o-domain-selector-panel-space);
 
             > button {
                 float: left;
-                width: @o-domain-selector-panel-space/2;
+                width: $o-domain-selector-panel-space/2;
                 height: 100%;
                 padding: 0;
                 background-color: transparent;
@@ -35,7 +35,7 @@
                     padding-left: 5px;
 
                     &:hover {
-                        color: @brand-danger;
+                        color: $brand-danger;
                     }
                 }
             }
@@ -48,12 +48,12 @@
             position: relative;
 
             .o_domain_tree_operator_caret::after {
-                .o-caret-down();
+                @include o-caret-down;
             }
         }
 
         > .o_domain_node_children_container {
-            padding-left: @o-domain-selector-indent;
+            padding-left: $o-domain-selector-indent;
         }
 
         // Rules specific to domain root
@@ -67,15 +67,15 @@
             }
 
             &.o_edit_mode > .o_domain_node_children_container {
-                padding-right: @o-domain-selector-panel-space; // delete button is over the row
+                padding-right: $o-domain-selector-panel-space; // delete button is over the row
             }
 
             > .o_domain_debug_container {
                 display: block;
                 margin-top: 16px;
                 padding: 8px 10px 12px;
-                background: @gray-dark;
-                color: fade(white, 50%);
+                background: $gray-dark;
+                color: rgba(white, 0.5);
                 font-family: monospace;
                 font-weight: normal;
 
@@ -92,13 +92,13 @@
     // Rules specific to domain parts which do not contain sub-domain parts
     &.o_domain_leaf {
         &.o_read_mode {
-            .o-inline-flex-display();
+            @include o-inline-flex-display;
             margin-right: 4px;
         }
 
         > .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 {
@@ -119,21 +119,21 @@
         }
 
         > .o_domain_leaf_edition {
-            .o-flex-display();
+            @include o-flex-display;
             width: 100%;
-            padding: 4px (@o-domain-selector-panel-space/2) 4px 0;
+            padding: 4px ($o-domain-selector-panel-space/2) 4px 0;
 
             > * {
-                .o-flex(1, 1, 15%); // operator select
+                @include o-flex(1, 1, 15%); // operator select
                 width: auto;
                 background-color: white;
 
                 &:first-child { // field selector
-                    .o-flex(0, 1, 55%);
+                    @include o-flex(0, 1, 55%);
                 }
 
                 &:last-child { // field value
-                    .o-flex(1, 1, 25%);
+                    @include o-flex(1, 1, 25%);
                 }
 
                 + * {
@@ -146,13 +146,13 @@
             }
 
             .o_domain_leaf_value_tags {
-                .o-flex-display();
+                @include o-flex-display;
 
                 > * {
-                    .o-flex(0, 0, auto);
+                    @include o-flex(0, 0, auto);
                 }
                 > input {
-                    .o-flex(1, 1, auto);
+                    @include o-flex(1, 1, auto);
                     width: 0;
                     min-width: 50px;
                 }
@@ -164,16 +164,16 @@
     }
 
     // Animation effects
-    .o-transition(margin-bottom, .05s, ease, .05s);
+    @include o-transition(margin-bottom, .05s, ease, .05s);
 
     &::after {
         content: "";
-        .o-position-absolute(@left: 0, @right: 0, @top: 100%);
+        @include o-position-absolute($left: 0, $right: 0, $top: 100%);
         display: block;
-        height: @o-domain-animation-bar-height;
+        height: $o-domain-animation-bar-height;
         max-height: 0;
-        .o-linear-gradient(45deg, fade(@odoo-brand-optional, 40%), fade(@odoo-brand-optional, 10%));
-        .o-transition(max-height, .05s, ease, .05s);
+        @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);
     }
 
     &.o_hover_btns, &.o_hover_add_node {
@@ -190,15 +190,15 @@
     }
 
     &.o_hover_add_node {
-        margin-bottom: @o-domain-animation-bar-height;
-        .o-transition(margin, .15s, ease, .5s);
+        margin-bottom: $o-domain-animation-bar-height;
+        @include o-transition(margin, .15s, ease, .5s);
 
         &::after {
-            max-height: @o-domain-animation-bar-height;
-            .o-transition(max-height, .15s, ease, .5s);
+            max-height: $o-domain-animation-bar-height;
+            @include o-transition(max-height, .15s, ease, .5s);
         }
         &.o_hover_add_inset_node::after {
-            left: @o-domain-selector-indent;
+            left: $o-domain-selector-indent;
         }
     }
 }
diff --git a/addons/web/static/src/less/dropdown.less b/addons/web/static/src/scss/dropdown.scss
index 6501b4cc52c..d0bfd1d2586 100644
--- a/addons/web/static/src/less/dropdown.less
+++ b/addons/web/static/src/scss/dropdown.scss
@@ -1,12 +1,12 @@
-.li-a-padding {
-    padding: 3px @odoo-dropdown-hpadding;
+%dropdown-li-a-padding {
+    padding: 3px $o-dropdown-hpadding;
 }
 
 .ui-autocomplete { // Copy style of bootstrap dropdown
     background-image: none;
-    background-color: @dropdown-bg;
-    border: 1px solid @dropdown-border;
-    font-size: @font-size-base;
+    background-color: $dropdown-bg;
+    border: 1px solid $dropdown-border;
+    font-size: $font-size-base;
     padding: 5px 0px;
     box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.176);
 
@@ -14,14 +14,14 @@
         padding: 0;
         > a {
             display: block;
-            color: @dropdown-link-color;
+            color: $dropdown-link-color;
 
-            .li-a-padding
+            @extend %dropdown-li-a-padding;
         }
 
         &.ui-state-focus {
             background-image: none;
-            background-color: @odoo-brand-primary;
+            background-color: $o-brand-primary;
             border: none;
             font-weight: normal;
             margin: 0;
@@ -29,14 +29,14 @@
         &.o_m2o_dropdown_option {
             padding-left: 20px;
             > a {
-                color: @odoo-brand-primary;
+                color: $o-brand-primary;
             }
         }
     }
 }
 
 .dropdown-menu {
-    box-shadow: 0 6px 12px -4px fade(black, 25%);
+    box-shadow: 0 6px 12px -4px rgba(black, 0.25);
 
     .o_inline_dropdown {
         position: relative;
@@ -51,7 +51,7 @@
     }
 }
 
-.dropdown-menu-mixin {
+@mixin dropdown-menu-mixin {
     .open .dropdown-menu > li {
         position: relative; // to allow absolute positionning inside the li
         > a {
@@ -59,14 +59,14 @@
                 outline: none;
             }
 
-            .li-a-padding;
+            @extend %dropdown-li-a-padding;
         }
 
         &.dropdown-header {
-            .li-a-padding;
-            color: @odoo-main-text-color;
+            @extend %dropdown-li-a-padding;
+            color: $o-main-text-color;
 
-            @media (max-width: @screen-xs-max) {
+            @media (max-width: $screen-xs-max) {
                 color: white;
                 text-decoration: underline;
             }
@@ -74,7 +74,7 @@
     }
 }
 
-.dropdown-menu-mixin();
+@include dropdown-menu-mixin;
 .navbar-nav {
-    .dropdown-menu-mixin();
+    @include dropdown-menu-mixin;
 }
diff --git a/addons/web/static/src/less/dropdown_extra.less b/addons/web/static/src/scss/dropdown_extra.scss
index ec38e6d5292..c14144e02d3 100644
--- a/addons/web/static/src/less/dropdown_extra.less
+++ 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 @@
     position: absolute;
     z-index: 3;
     margin: 0;
-    border: 1px solid @tag-border;
+    border: 1px solid #afafb6;
     background: white;
     padding: 4px 0;
     min-width: 140px;
@@ -42,7 +41,7 @@
         margin: 0;
         padding: 2px 8px;
         &:hover {
-            .o-vertical-gradient(#f0f0fa, #eeeef6);
+            @include o-vertical-gradient(#f0f0fa, #eeeef6);
             box-shadow: none;
         }
         > a {
@@ -56,8 +55,3 @@
         }
     }
 }
-
-// Buttons used as dropdown toggler
-.o_dropdown_toggler_btn {
-    .btn-default;
-}
diff --git a/addons/web/static/src/less/fields.less b/addons/web/static/src/scss/fields.scss
index ff6fe9eb20b..04c81dab96c 100644
--- a/addons/web/static/src/less/fields.less
+++ b/addons/web/static/src/scss/fields.scss
@@ -6,8 +6,8 @@
 // Invalid
 .o_field_invalid {
     &.o_input, .o_input, &.o_form_label {
-        color: @brand-danger!important;
-        border-color: @brand-danger!important; // enterprise o_required_modifier rule overrides this without !important
+        color: $brand-danger!important;
+        border-color: $brand-danger!important; // enterprise o_required_modifier rule overrides this without !important
     }
 }
 
@@ -39,17 +39,17 @@
 
     // Flex fields (inline)
     &.o_field_many2one, &.o_field_radio, &.o_field_many2manytags, &.o_field_percent_pie, &.o_field_monetary, &.o_field_binary_file {
-        @media (min-width: @screen-sm-min) {
-            .o-inline-flex-display();
+        @media (min-width: $screen-sm-min) {
+            @include o-inline-flex-display;
         }
         > span, > button {
-            .o-flex(0, 0, auto);
+            @include o-flex(0, 0, auto);
         }
     }
 
     // Dropdowns input (many2one, ...)
     .o_input_dropdown {
-        .o-flex(1, 1, auto);
+        @include o-flex(1, 1, auto);
         position: relative;
         width: 100%;
 
@@ -60,10 +60,10 @@
         }
 
         .o_dropdown_button {
-            .o-position-absolute(0, 0);
+            @include o-position-absolute(0, 0);
             pointer-events: none;
             &:after {
-                .o-caret-down;
+                @include o-caret-down;
             }
         }
     }
@@ -77,51 +77,51 @@
     // Monetary
     &.o_field_monetary {
         &.o_input {
-            .o-align-items(baseline);
+            @include o-align-items(baseline);
 
             > input {
                 width: 100px;
-                .o-flex(1, 0, auto);
+                @include o-flex(1, 0, auto);
             }
         }
     }
 
     // Many2many tags
     &.o_field_many2manytags {
-        .o-flex-flow(row, wrap);
-        .o-align-items(baseline);
+        @include o-flex-flow(row, wrap);
+        @include o-align-items(baseline);
 
         > .o_field_widget {
-            .o-flex(1, 0, 100px);
+            @include o-flex(1, 0, 100px);
             position: initial;
             max-width: 100%;
         }
 
         > .badge {
-            .o-flex(0, 0, auto);
+            @include o-flex(0, 0, auto);
             border: 0;
             font-size: 12px;
             color: white;
             cursor: pointer;
 
             > .o_badge_text {
-                .o-text-overflow(inline-block);
+                @include o-text-overflow(inline-block);
                 max-width: 200px;
             }
 
             // o-kanban-colorpicker without customizing
             // '&:first-child > a::before' (transparent red-crossed colorpick)
-            .o-tag-colorpicker() {
-                @o-tag-colorpicker-padding-right: @odoo-dropdown-hpadding - 2 * @o-kanban-inner-hmargin;
+            @mixin o-tag-colorpicker {
+                $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;
-                    margin: @o-kanban-inner-hmargin @o-kanban-inner-hmargin 0 0;
+                    margin: 5px 5px 0 0; // FIXME was $o-kanban-inner-hmargin before scss convertion
                     border: 1px solid white;
-                    box-shadow: 0 0 0 1px @gray-lighter-dark;
+                    box-shadow: 0 0 0 1px $gray-lighter-dark;
 
                     > a {
                         display: 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;
                     }
                 }
             }
@@ -147,7 +147,7 @@
             }
 
             > .o_colorpicker > ul {
-                .o-tag-colorpicker();
+                @include o-tag-colorpicker;
                 white-space: normal;
             }
 
@@ -156,28 +156,24 @@
             }
         }
 
-        .o-tag-color(@size: 0) when (@size = 0) {
-            .o_tag_color_@{size} {
-                & {
-                    background-color: white;
-                    color: ~"@{odoo-color-@{size}}";
-                    box-shadow: inset 0 0 0 2px ~"@{odoo-color-@{size}}";
-                }
-                &::after {
-                    background-color: ~"@{odoo-color-@{size}}";
-                }
-            }
-            .o-tag-color(@size + 1);
-        }
-        .o-tag-color(@size: 0) when (@size > 0) and (@size < @odoo-nb-ui-color) {
-            .o_tag_color_@{size} {
-                &, &::after {
-                    background-color: ~"@{odoo-color-@{size}}";
+        @for $size from 1 through length($o-colors) {
+            .o_tag_color_#{$size - 1} {
+                @if $size == 1 {
+                    & {
+                        background-color: white;
+                        color: nth($o-colors, $size);
+                        box-shadow: inset 0 0 0 2px nth($o-colors, $size);
+                    }
+                    &::after {
+                        background-color: nth($o-colors, $size);
+                    }
+                } @else {
+                    &, &::after {
+                        background-color: nth($o-colors, $size);
+                    }
                 }
             }
-            .o-tag-color(@size + 1);
         }
-        .o-tag-color();
     }
 
     // Stars
@@ -199,7 +195,7 @@
             }
 
             &.fa-star-o {
-                color: @odoo-main-color-muted;
+                color: $o-main-color-muted;
             }
             &.fa-star {
                 color: gold;
@@ -213,7 +209,7 @@
             font-size: 16px;
         }
         i.fa-star-o {
-            color: @odoo-main-color-muted;
+            color: $o-main-color-muted;
             &:hover {
                 color: gold;
             }
@@ -225,7 +221,7 @@
 
     // Specific success color for toggle_button widget
     .fa.o_toggle_button_success {
-        color: @brand-success;
+        color: $brand-success;
     }
 
     // Handle widget
@@ -240,13 +236,13 @@
         }
 
         .o_radio_item {
-            .o-flex(0, 0, auto);
-            .o-flex-display();
-            .o-align-items(center);
+            @include o-flex(0, 0, auto);
+            @include o-flex-display;
+            @include o-align-items(center);
 
             > input {
-                .o-flex(0, 0, auto);
-                margin: 0 @odoo-form-spacing-unit 0 0;
+                @include o-flex(0, 0, auto);
+                margin: 0 $o-form-spacing-unit 0 0;
             }
             > label {
                 margin: 0;
@@ -255,21 +251,21 @@
 
         &.o_horizontal {
             .o_radio_item {
-                margin-right: @odoo-form-spacing-unit * 2;
+                margin-right: $o-form-spacing-unit * 2;
             }
         }
 
         &.o_vertical {
-            .o-flex-flow(column, nowrap);
+            @include o-flex-flow(column, nowrap);
             .o_radio_item {
-                margin-bottom: @odoo-form-spacing-unit;
+                margin-bottom: $o-form-spacing-unit;
             }
         }
     }
 
     // Percent pie
     &.o_field_percent_pie {
-        .o-align-items(center);
+        @include o-align-items(center);
 
         > .o_pie {
             position: relative;
@@ -278,36 +274,36 @@
             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: " ";
-                .o-position-absolute(0, 0);
+                @include o-position-absolute(0, 0);
                 width: 100%;
                 height: 100%;
                 border-radius: 100%;
             }
 
             .o_mask {
-                .o-position-absolute(0, 0);
-                .o-transform-origin(0);
+                @include o-position-absolute(0, 0);
+                @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;
                 }
             }
 
             .o_pie_value {
-                .o-flex-display();
-                .o-justify-content(center);
-                .o-align-items(center);
+                @include o-flex-display;
+                @include o-justify-content(center);
+                @include o-align-items(center);
 
                 border-radius: 100%;
 
                 font-weight: 700;
-                color: @odoo-brand-primary;
+                color: $o-brand-primary;
             }
         }
     }
@@ -326,11 +322,11 @@
         position: relative;
 
         .o_form_image_controls {
-            .o-position-absolute(0, 0);
+            @include o-position-absolute(0, 0);
             width: 100%;
 
             color: white;
-            background-color: @odoo-brand-optional;
+            background-color: $o-brand-optional;
             opacity: 0;
             transition: opacity ease 400ms;
 
@@ -339,7 +335,7 @@
                 cursor: pointer;
             }
         }
-        @media (max-width: @screen-xs-min) {
+        @media (max-width: $screen-xs-min) {
             .o_form_image_controls{
                 position: initial;
                 opacity: 1;
@@ -349,10 +345,10 @@
                     margin: 0px;
                     text-align: center;
                     &.o_select_file_button{
-                        background: @odoo-brand-optional;
+                        background: $o-brand-optional;
                     }
                     &.o_clear_file_button{
-                        background: @brand-danger;
+                        background: $brand-danger;
                     }
                 }
             }
@@ -377,7 +373,7 @@
             position: relative;
 
             > .o_field_domain_panel {
-                .o-position-absolute(0, 0);
+                @include o-position-absolute(0, 0);
                 margin-top: 0;
             }
         }
diff --git a/addons/web/static/src/less/fields_extra.less b/addons/web/static/src/scss/fields_extra.scss
index 577cfacacb4..7e45291305f 100644
--- a/addons/web/static/src/less/fields_extra.less
+++ b/addons/web/static/src/scss/fields_extra.scss
@@ -17,7 +17,7 @@
 .o_field_widget {
     // Dropdowns input carret
     .o_input_dropdown .o_dropdown_button {
-        .o-position-absolute(2px, 4px);
+        @include o-position-absolute(2px, 4px);
     }
 
     // Many2one
@@ -34,22 +34,22 @@
 
     // Percent pie field
     &.o_field_percent_pie {
-        @pie-dimension: 34px;
-        @pie-ring-width: 4px;
+        $pie-dimension: 34px;
+        $pie-ring-width: 4px;
 
         .o_pie {
-            width: @pie-dimension;
-            height: @pie-dimension;
+            width: $pie-dimension;
+            height: $pie-dimension;
             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 {
-                .o-position-absolute(@pie-ring-width, @pie-ring-width);
-                width: @pie-dimension - 2 * @pie-ring-width;
-                height: @pie-dimension - 2 * @pie-ring-width;
+                @include o-position-absolute($pie-ring-width, $pie-ring-width);
+                width: $pie-dimension - 2 * $pie-ring-width;
+                height: $pie-dimension - 2 * $pie-ring-width;
                 border: 1px solid white;
                 background-color: white;
                 font-size: 10px;
diff --git a/addons/web/static/src/scss/fonts.scss b/addons/web/static/src/scss/fonts.scss
new file mode 100644
index 00000000000..bfabf4fe6fc
--- /dev/null
+++ b/addons/web/static/src/scss/fonts.scss
@@ -0,0 +1,37 @@
+// ------------------------------------------------------------------
+// Lato
+// ------------------------------------------------------------------
+$lato-font-path: '../fonts/lato';
+
+@mixin lato-font($type, $weight, $style) {
+    @font-face {
+        font-family: 'Lato';
+        src: url('#{$lato-font-path}/Lato-#{$type}-webfont.eot');
+        src: url('#{$lato-font-path}/Lato-#{$type}-webfont.eot?#iefix') format('embedded-opentype'),
+             url('#{$lato-font-path}/Lato-#{$type}-webfont.woff') format('woff'),
+             url('#{$lato-font-path}/Lato-#{$type}-webfont.ttf') format('truetype'),
+             url('#{$lato-font-path}/Lato-#{$type}-webfont.svg#Lato') format('svg');
+        font-weight: $weight;
+        font-style: $style;
+    }
+
+    @font-face {
+        font-family: 'Lato-#{$type}';
+        src: url('#{$lato-font-path}/Lato-#{$type}-webfont.eot');
+        src: url('#{$lato-font-path}/Lato-#{$type}-webfont.eot?#iefix') format('embedded-opentype'),
+             url('#{$lato-font-path}/Lato-#{$type}-webfont.woff') format('woff'),
+             url('#{$lato-font-path}/Lato-#{$type}-webfont.ttf') format('truetype'),
+             url('#{$lato-font-path}/Lato-#{$type}-webfont.svg#Roboto') format('svg');
+    }
+}
+
+@mixin lato-font-pair($type, $weight) {
+    @include lato-font('#{$type}', $weight, normal);
+    @include lato-font('#{$type}Ita', $weight, italic);
+}
+
+@include lato-font-pair('Hai', 100);
+@include lato-font-pair('Lig', 300);
+@include lato-font-pair('Reg', 400);
+@include lato-font-pair('Bol', 700);
+@include lato-font-pair('Bla', 900);
diff --git a/addons/web/static/src/less/form_view.less b/addons/web/static/src/scss/form_view.scss
index c36fe2d0d9a..7aa5a6b288f 100644
--- a/addons/web/static/src/less/form_view.less
+++ b/addons/web/static/src/scss/form_view.scss
@@ -1,10 +1,9 @@
 .o_form_view {
-    background-color: @odoo-view-background-color;
+    background-color: $o-view-background-color;
 
     // Utility classes
     .oe_form_box_info {
-        .bg-info;
-        .o-webclient-padding(@top: 5px, @bottom: 5px);
+        @include o-webclient-padding($top: 5px, $bottom: 5px);
         > p {
             margin: auto;
         }
@@ -12,45 +11,42 @@
     .oe_text_center {
         text-align: center;
     }
-    .oe_link {
-        .btn-link;
-    }
     .oe_grey {
         opacity: 0.5;
     }
     .oe_inline {
         width: auto!important;
-        @media (min-width: @screen-xs-min) {
+        @media (min-width: $screen-xs-min) {
             &.o_inner_group {
                 width: 1px!important;
             }
         }
     }
     .oe_left {
-        .oe_inline;
+        @extend .oe_inline;
         float: left!important;
     }
     .oe_right {
-        .oe_inline;
+        @extend .oe_inline;
         float: right!important;
     }
 
-    @media (min-width: @screen-xs-min) {
+    @media (min-width: $screen-xs-min) {
         .o_row {
             &, &.o_field_widget { // Some field may want to use o_row as root and these rules must prevalue
-                .o-flex-display();
+                @include o-flex-display;
                 width: auto!important;
             }
 
-            .o-align-items(baseline);
+            @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
-                .o-flex(0, 0, auto);
+                @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 {
@@ -61,7 +57,7 @@
                 padding-bottom: 0;
             }
             > .o_field_boolean {
-                .o-align-self(center);
+                @include o-align-self(center);
             }
         }
     }
@@ -85,14 +81,14 @@
     .o_form_uri {
         display: inline-block;
 
-        color: @odoo-main-text-color;
+        color: $o-main-text-color;
         &:first-line {
-            color: @link-color;
+            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%);
+                color: darken($link-color, 15%);
             }
         }
     }
@@ -104,17 +100,17 @@
         }
 
         .oe_title {
-            max-width: @container-sm - (2 * @odoo-horizontal-padding);
+            max-width: $container-sm - (2 * $o-horizontal-padding);
         }
 
-        @media (min-width: @screen-xs-min) {
+        @media (min-width: $screen-xs-min) {
             .o_row {
                 > .o_field_widget, > div {
-                    .o-flex(1, 1, auto);
+                    @include o-flex(1, 1, auto);
                     width: 0!important; // 3rd flex argument does not work with input (must be auto and real width 0)
 
                     &.o_field_boolean, &.o_priority {
-                        .o-flex(0, 0, auto);
+                        @include o-flex(0, 0, auto);
                         width: auto!important;
                     }
                 }
@@ -125,10 +121,10 @@
     // No sheet
     &.o_form_nosheet {
         display: block;
-        .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);
         }
     }
 
@@ -137,37 +133,37 @@
         position: relative;
 
         > .o_form_sheet {
-            margin: @odoo-sheet-vpadding auto;
+            margin: $o-sheet-vpadding auto;
         }
     }
 
     // Statusbar
     .o_form_statusbar {
         position: relative; // Needed for the "More" dropdown
-        .o-flex-display();
-        .o-justify-content(space-between);
-        padding-left: @odoo-horizontal-padding;
-        border-bottom: 1px solid @gray-lighter-darker;
-        background-color: @odoo-view-background-color;
+        @include o-flex-display;
+        @include o-justify-content(space-between);
+        padding-left: $o-horizontal-padding;
+        border-bottom: 1px solid $gray-lighter-darker;
+        background-color: $o-view-background-color;
 
         > .o_statusbar_buttons, > .o_statusbar_status {
-            .o-flex-display();
-            .o-align-items(center);
-            .o-align-content(space-around);
+            @include o-flex-display;
+            @include o-align-items(center);
+            @include o-align-content(space-around);
         }
 
         > .o_field_widget {
-            .o-align-self(center);
+            @include o-align-self(center);
             margin-bottom: 0px;
         }
 
         > .o_statusbar_buttons {
-            .o-flex-flow(row, wrap);
+            @include o-flex-flow(row, wrap);
 
             > .btn {
-                @o-statusbar-buttons-vmargin: 4px;
-                min-height: @odoo-statusbar-height - 2 * @o-statusbar-buttons-vmargin;
-                margin: @o-statusbar-buttons-vmargin 3px @o-statusbar-buttons-vmargin 0;
+                $o-statusbar-buttons-vmargin: 4px;
+                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;
             }
@@ -175,28 +171,28 @@
 
         > .o_statusbar_status {
             margin-left: auto;
-            .o-flex-flow(row-reverse, wrap-reverse);
-            .o-align-self(stretch);
-            .o-align-items(stretch);
+            @include o-flex-flow(row-reverse, wrap-reverse);
+            @include o-align-self(stretch);
+            @include o-align-items(stretch);
             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;
-                color: @gray;
+                padding-left: $o-statusbar-arrow-width*2;
+                color: $gray;
                 border-width: 0 0 0;
                 border-radius: 0;
-                .o-transition(all, 0.1s);
+                @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;
-                    border-left: 1px solid @gray-lighter-darker;
+                    padding-left: $o-horizontal-padding - 1;
+                    border-left: 1px solid $gray-lighter-darker;
                 }
 
                 &:active {
@@ -205,48 +201,48 @@
 
                 &.disabled {
                     opacity: 1.0;
-                    color: @text-muted;
+                    color: $text-muted;
                     pointer-events: none;
-                    border-left: 1px solid @gray-lighter-dark;
+                    border-left: 1px solid $gray-lighter-dark;
                 }
 
                 &:before, &:after {
                     content: " ";
                     display: block;
-                    .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;
-                    .o-transition(border, 0.2s);
+                    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;
-                        background-color: @gray-lighter;
+                        color: $o-brand-optional;
+                        background-color: $gray-lighter;
 
                         &:after {
-                            border-left-color: @gray-lighter;
+                            border-left-color: $gray-lighter;
                         }
                     }
                 }
 
                 &:before {
-                    right: -@odoo-statusbar-arrow-width;
-                    border-left-color: @gray-lighter-dark;
+                    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;
+                    background-color: $gray-lighter;
                     cursor: default;
 
                     &:after {
-                        border-left-color: @gray-lighter;
+                        border-left-color: $gray-lighter;
                     }
                 }
 
@@ -256,7 +252,7 @@
             }
 
             .o-status-more {
-                .o-position-absolute(100%, 0);
+                @include o-position-absolute(100%, 0);
                 min-width: 100px;
                 > li > button {
                     width: 100%;
@@ -269,8 +265,8 @@
         > .o_statusbar_buttons > .btn-group, > .o_statusbar_status {
             > .dropdown-toggle {
                 &:after {
-                    .o-caret-down();
-                    margin-left: @odoo-form-spacing-unit;
+                    @include o-caret-down;
+                    margin-left: $o-form-spacing-unit;
                 }
             }
 
@@ -318,14 +314,12 @@
         margin: 10px 0;
 
         // o_group contains nested groups
-        .o-generate-groups(@odoo-form-group-cols);
-        .o-generate-groups(@n, @i: 1) when (@i =< @n) {
-            .o_group_col_@{i} {
+        @for $i from 1 through $o-form-group-cols {
+            .o_group_col_#{$i} {
                 display: inline-block;
-                width: floor(100% / 12 * @i);
+                width: floor(100% / 12 * $i);
                 vertical-align: top;
             }
-            .o-generate-groups(@n, @i + 1);
         }
 
         &.o_inner_group {
@@ -355,7 +349,7 @@
             width: 100%;
 
             > .btn {
-                .o-flex(0, 0, auto);
+                @include o-flex(0, 0, auto);
                 padding: 0 10px;
             }
         }
@@ -367,7 +361,7 @@
             // Makes extra buttons (e.g. m2o external button) overflow on the
             // right padding of the parent element
             .o_input_dropdown {
-                .o-flex(1, 0, auto);
+                @include o-flex(1, 0, auto);
             }
         }
 
@@ -383,17 +377,17 @@
 
     // Separators
     .o_horizontal_separator {
-        font-size: @font-size-h2;
-        margin: @odoo-form-spacing-unit 0;
+        font-size: $font-size-h2;
+        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;
@@ -402,14 +396,14 @@
 
     // Labels
     .o_form_label {
-        margin: 0 @odoo-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;
+        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 {
@@ -431,7 +425,7 @@
     // Text field with oe_inline class
     .o_field_text.oe_inline {
         width: 100%!important;
-        @media (min-width: @screen-xs-min) {
+        @media (min-width: $screen-xs-min) {
             width: 45%!important;
         }
     }
@@ -448,7 +442,7 @@
 
     // Specific style classes
     .o_group.o_inner_group.oe_subtotal_footer {
-        .oe_right;
+        @extend .oe_right;
 
         > tbody > tr > td {
             padding: 0;
@@ -469,7 +463,7 @@
 
             .o_field_widget {
                 text-align: right;
-                .o-justify-content(flex-end);
+                @include o-justify-content(flex-end);
                 width: 100%;
             }
         }
@@ -481,7 +475,7 @@
         .oe_subtotal_footer_separator {
             width: 100%;
             text-align: right;
-            border-top: 1px solid @gray-lighter-dark;
+            border-top: 1px solid $gray-lighter-dark;
             font-weight: bold;
             font-size: 1.3em;
         }
@@ -490,7 +484,7 @@
     .o_address_format {
         width: 100%;
         .o_address_street, .o_address_country {
-            .o-flex-display;
+            @include o-flex-display;
         }
 
         .o_address_city {
@@ -560,12 +554,12 @@
 
     // Boolean
     .o_field_boolean {
-        margin: 0 @odoo-form-spacing-unit 0 0;
+        margin: 0 $o-form-spacing-unit 0 0;
     }
 
     // Timezone widget warning
     .o_tz_warning {
-        color: @brand-danger;
+        color: $brand-danger;
         cursor: help;
         position: absolute;
         margin-left: -40px;
@@ -586,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 {
@@ -596,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 {
@@ -657,19 +651,19 @@ label.o_light_label, .o_light_label label {
 }
 
 // XXS form view specific rules
-.form-break-table() {
+@mixin form-break-table {
     display: block;
-    margin-bottom: @odoo-form-spacing-unit * 4;
+    margin-bottom: $o-form-spacing-unit * 4;
 
     > tbody {
         display: block;
 
         > tr {
-            .o-flex-display();
-            .o-flex-flow(row, wrap);
+            @include o-flex-display;
+            @include o-flex-flow(row, wrap);
 
             > td {
-                .o-flex(1, 0, auto);
+                @include o-flex(1, 0, auto);
                 display: block;
                 max-width: 100%;
                 padding: 0;
@@ -677,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;
                     }
@@ -701,16 +695,16 @@ label.o_light_label, .o_light_label label {
     }
     .o_group {
         &.o_inner_group {
-            .form-break-table();
+            @include form-break-table;
         }
     }
 }
 
 // Settings form views
 .o_settings_container {
-    .o-flex-display();
-    .o-flex(0, 1, auto);
-    .o-flex-flow(row, wrap);
+    @include o-flex-display;
+    @include o-flex(0, 1, auto);
+    @include o-flex-flow(row, wrap);
     .o_setting_box:visible:nth-child(odd) {
         clear: left;
     }
diff --git a/addons/web/static/src/less/form_view_extra.less b/addons/web/static/src/scss/form_view_extra.scss
index 95da6a2b35b..29c2512c1ab 100644
--- a/addons/web/static/src/less/form_view_extra.less
+++ 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;
     }
@@ -11,8 +11,8 @@
         background: url(/web/static/src/img/form_sheetbg.png);
 
         > .o_form_sheet {
-            min-width: @sheet-min-width;
-            max-width: @sheet-max-width;
+            min-width: $sheet-min-width;
+            max-width: $sheet-max-width;
             min-height: 330px;
             padding: 16px;
             border: 1px solid #c8c8d3;
@@ -73,12 +73,12 @@
                 line-height: 1.2;
 
                 .o_stat_value {
-                    .o-text-overflow(block);
+                    @include o-text-overflow(block);
                     font-weight: 700;
-                    color: @odoo-brand-primary;
+                    color: $o-brand-primary;
                 }
                 .o_stat_text {
-                    .o-text-overflow(block);
+                    @include o-text-overflow(block);
                     font-size: small;
 
                     .o_stat_value {
@@ -105,7 +105,7 @@
                 padding: 0 10px;
             }
             .o_dropdown_more {
-                .o-position-absolute(@top: 100%, @right: 0);
+                @include o-position-absolute($top: 100%, $right: 0);
                 min-width: 0;
                 padding: 0px;
             }
@@ -144,7 +144,7 @@
 
     // Separators
     .o_horizontal_separator {
-        color: @odoo-brand-optional;
+        color: $o-brand-optional;
         font-weight: bold;
     }
 
@@ -166,8 +166,8 @@
     // Chatter
     .oe_chatter {
         display: block;
-        min-width: @sheet-min-width + 2* @sheet-padding;
-        max-width: @sheet-max-width + 2* @sheet-padding;
+        min-width: $sheet-min-width + 2* $sheet-padding;
+        max-width: $sheet-max-width + 2* $sheet-padding;
         margin: 0 auto;
         padding: 16px 16px 48px;
     }
diff --git a/addons/web/static/src/less/graph_view.less b/addons/web/static/src/scss/graph_view.scss
index fc8fc323582..4666d68ae61 100644
--- a/addons/web/static/src/less/graph_view.less
+++ 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;
         }
     }
 }
@@ -16,5 +16,5 @@
 // Control panel buttons
 // ------------------------------------------------------------------
 .o_graph_measures_list {
-    .o-selected-li;
+    @include o-selected-li;
 }
diff --git a/addons/web/static/src/less/import_bootstrap.less b/addons/web/static/src/scss/import_bootstrap.scss
index cbd46a7afcf..cbd46a7afcf 100644
--- a/addons/web/static/src/less/import_bootstrap.less
+++ b/addons/web/static/src/scss/import_bootstrap.scss
diff --git a/addons/web/static/src/less/kanban_column_progressbar.less b/addons/web/static/src/scss/kanban_column_progressbar.scss
index f4cffd6c097..2cb35d33a2e 100644
--- a/addons/web/static/src/less/kanban_column_progressbar.less
+++ b/addons/web/static/src/scss/kanban_column_progressbar.scss
@@ -1,41 +1,40 @@
-@o-kanban-counter-header-height: @o-kanban-header-title-height*0.6;
 
-.o-kanban-css-filter(@class, @accent-color) {
+@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);
+    &.o_kanban_group_show_#{$class} {
+        $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;
-            border-color: @mix-full;
+            background-color: $mix-soft;
+            border-color: $mix-full;
         }
 
-        .progress-bar.bg-@{class}-full {
+        .progress-bar.bg-#{$class}-full {
             border: 1px solid white;
         }
 
-        .oe_kanban_card_@{class} {
+        .oe_kanban_card_#{$class} {
             order: 1;
-            margin-bottom: @o-kanban-inside-vgutter*0.5;
+            margin-bottom: $o-kanban-inside-vgutter*0.5;
 
-            ~ .oe_kanban_card_@{class} {
-                margin-top: -@o-kanban-inside-vgutter*0.5 - 1px;
+            ~ .oe_kanban_card_#{$class} {
+                margin-top: -$o-kanban-inside-vgutter*0.5 - 1px;
             }
 
             ~ .o_kanban_load_more {
-                margin-top: -@o-kanban-inside-vgutter*0.5;
+                margin-top: -$o-kanban-inside-vgutter*0.5;
             }
         }
 
         .o_kanban_load_more {
             order: 2;
-            padding: @o-kanban-inside-vgutter*0.5 0 @o-kanban-inside-vgutter;
+            padding: $o-kanban-inside-vgutter*0.5 0 $o-kanban-inside-vgutter;
         }
 
-        .o_kanban_record:not(.oe_kanban_card_@{class}) {
+        .o_kanban_record:not(.oe_kanban_card_#{$class}) {
             order: 3;
-            .o-hover-opacity(0.5);
+            @include o-hover-opacity(0.5);
             box-shadow: none;
         }
     }
@@ -44,7 +43,7 @@
 // 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;
     }
 
@@ -57,16 +56,16 @@
 
 .o_kanban_counter {
     position: relative;
-    .o-flex-display();
-    .o-align-items(center);
-    .o-transition(opacity, 0.3s);
-    margin-bottom: @o-kanban-record-margin*2;
+    @include o-flex-display;
+    @include o-align-items(center);
+    @include o-transition(opacity, 0.3s);
+    margin-bottom: $o-kanban-record-margin*2;
 
     > .o_kanban_counter_progress {
         width: 76%;
-        height: @font-size-small;
+        height: $font-size-small;
         margin-bottom: 0;
-        background-color: @gray-lighter-dark;
+        background-color: $gray-lighter-dark;
         box-shadow: none;
 
         .progress-bar {
@@ -82,24 +81,24 @@
 
         .o_kanban_counter_label {
             font-size: 10px;
-            .user-select(none);
+            @include user-select(none);
         }
     }
 
     > .o_kanban_counter_side {
         width: 21%;
         margin-left: 3%;
-        color: @headings-color;
+        color: $headings-color;
         text-align: right;
         white-space: nowrap;
-        .o-transform-origin(right, center);
+        @include o-transform-origin(right, center);
 
         &.o_kanban_grow {
-            .o-animation(grow, 1s, ease);
+            @include o-animation(grow, 1s, ease);
         }
 
         &.o_kanban_grow_huge {
-            .o-animation(grow_huge, 1s, ease);
+            @include o-animation(grow_huge, 1s, ease);
         }
 
         // Target currency icon
@@ -113,16 +112,16 @@
 }
 
 .o_kanban_view .o_kanban_group {
-    .o-kanban-css-filter(success, @brand-success);
-    .o-kanban-css-filter(warning, @brand-warning);
-    .o-kanban-css-filter(danger, @brand-danger);
+    @include o-kanban-css-filter(success, $brand-success);
+    @include o-kanban-css-filter(warning, $brand-warning);
+    @include o-kanban-css-filter(danger, $brand-danger);
 
     &.o_kanban_group_show {
-        .o-flex-display();
-        .o-flex-flow(column, nowrap);
+        @include o-flex-display;
+        @include o-flex-flow(column, nowrap);
 
         > * {
-            .o-flex(0, 0, auto);
+            @include o-flex(0, 0, auto);
         }
     }
 }
diff --git a/addons/web/static/src/less/kanban_dashboard.less b/addons/web/static/src/scss/kanban_dashboard.scss
index 83db9319166..9a6a334f266 100644
--- a/addons/web/static/src/less/kanban_dashboard.less
+++ b/addons/web/static/src/scss/kanban_dashboard.scss
@@ -1,45 +1,16 @@
-// ------- 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
-.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
-    .o-flex-flow(row, wrap);
+    @include o-flex-flow(row, wrap);
 
     .o_kanban_record {
         position: relative;
-        .o-flex-display();
-        .o-flex-flow(column, nowrap);
-        .o-justify-content(space-between);
-        padding: @o-kanban-dashboard-vpadding @o-kanban-dashboard-hpadding;
+        @include o-flex-display;
+        @include o-flex-flow(column, nowrap);
+        @include o-justify-content(space-between);
+        padding: $o-kanban-dashboard-vpadding $o-kanban-dashboard-hpadding;
 
-        @media (max-width: @screen-xs-max) {
+        @media (max-width: $screen-xs-max) {
             margin-bottom: 10px;
         }
 
@@ -57,20 +28,19 @@
         }
 
         // ------- Dropdown toggle & menu -------
-        @o-kanban-manage-toggle-height: 35px;
+        $o-kanban-manage-toggle-height: 35px;
 
         .o_kanban_manage_toggle_button {
-            .o-kanban-dropdown(@o-kanban-dashboard-hpadding);
-            height: @o-kanban-manage-toggle-height;
+            @include o-kanban-dropdown($o-kanban-dashboard-hpadding);
+            height: $o-kanban-manage-toggle-height;
         }
 
         .o_kanban_card_manage_pane {
-            .dropdown-menu;
-            .o-kanban-dropdown-menu();
+            @include o-kanban-dropdown-menu;
 
             // Arbitrary value to place the dropdown-menu exactly below the
             // dropdown-toggle (height is forced so that it works on Firefox)
-            top: @o-kanban-manage-toggle-height - 1;
+            top: $o-kanban-manage-toggle-height - 1;
 
             > div:not(.o_no_padding_kanban_colorpicker) {
                 padding: 3px 0 3px 20px;
@@ -79,11 +49,11 @@
             }
 
             > .o_kanban_card_manage_section {
-                border-bottom: 1px solid @gray-lighter-dark;
+                border-bottom: 1px solid $gray-lighter-dark;
                 margin-bottom: 10px;
 
                 > div {
-                    .o-kanban-dashboard-dropdown-link();
+                    @include o-kanban-dashboard-dropdown-link;
                 }
             }
 
@@ -93,32 +63,35 @@
                 max-width: 400px;
 
                 .row {
-                    .o-flex-display();
-                    .o-flex-flow(row, nowrap);
-                    .o-justify-content(space-between);
+                    @include o-flex-display;
+                    @include o-flex-flow(row, nowrap);
+                    @include o-justify-content(space-between);
                     margin-left: 0;
                     margin-right: 0;
-                    padding-left: @o-kanban-dashboard-dropdown-complex-gap*2;
-                    padding-right: @o-kanban-dashboard-dropdown-complex-gap*2;
+                    padding-left: $o-kanban-dashboard-dropdown-complex-gap*2;
+                    padding-right: $o-kanban-dashboard-dropdown-complex-gap*2;
                 }
 
                 div[class*="col-"] {
-                    .o-flex(1, 1, percentage(100/3));
-                    padding-left: @o-kanban-dashboard-dropdown-complex-gap;
-                    padding-right: @o-kanban-dashboard-dropdown-complex-gap;
+                    @include o-flex(1, 1, percentage(100/3));
+                    padding-left: $o-kanban-dashboard-dropdown-complex-gap;
+                    padding-right: $o-kanban-dashboard-dropdown-complex-gap;
 
                     > .o_kanban_card_manage_title {
-                        .h5;
+                        margin: ($line-height-computed / 2) 0;
+                        color: $headings-color;
+                        font-size: $font-size-h5;
                         font-weight: 500;
+                        line-height: $headings-line-height;
                     }
                     > div:not(.o_kanban_card_manage_title) {
-                        .o-kanban-dashboard-dropdown-link(@link-padding-gap: @o-kanban-dashboard-dropdown-complex-gap);
+                        @include o-kanban-dashboard-dropdown-link($link-padding-gap: $o-kanban-dashboard-dropdown-complex-gap);
                     }
                 }
 
                 .row.o_kanban_card_manage_settings {
-                    border-top: 1px solid @gray-lighter-dark;
-                    padding-top: @o-kanban-dashboard-dropdown-complex-gap*3;
+                    border-top: 1px solid $gray-lighter-dark;
+                    padding-top: $o-kanban-dashboard-dropdown-complex-gap*3;
 
                     .oe_kanban_colorpicker {
                         max-width: none;
@@ -126,13 +99,13 @@
                     }
 
                     div[class*="col-"] + div[class*="col-"] {
-                        border-left: 1px solid @gray-lighter-dark;
+                        border-left: 1px solid $gray-lighter-dark;
                     }
 
                     // Default options box
                     div.text-right {
                         text-align: left; // :/
-                        .o-kanban-dashboard-dropdown-link(0);
+                        @include o-kanban-dashboard-dropdown-link(0);
                         > a {
                             margin-left: 40px;
                             padding-left: 20px;
@@ -148,7 +121,7 @@
                 display: block;
             }
             .o_kanban_manage_toggle_button {
-                .o-kanban-dropdown-open();
+                @include o-kanban-dropdown-open;
                 position: absolute;
             }
         }
@@ -158,27 +131,27 @@
 
         // Provide enough room for the dropdown-toggle
         .o_primary {
-            padding-right: @o-kanban-dashboard-hpadding*2;
+            padding-right: $o-kanban-dashboard-hpadding*2;
         }
 
         // Uniform titles
         .o_kanban_card_header_title .o_primary,
         .o_kanban_primary_left .o_primary > span:first-child,
         .oe_kanban_content > .o_title > h3 {
-            .o-kanban-record-title(@font-size: 16px);
+            @include o-kanban-record-title($font-size: 16px);
             display: block;
         }
 
         // Identify subtitles without classes
         .o_kanban_primary_left .o_primary > span:nth-child(2) > strong {
             font-weight: 500;
-            font-size: @font-size-small;
-            color: @text-muted;
+            font-size: $font-size-small;
+            color: $text-muted;
         }
 
         // Provide enough room to add an icon before the title
         &.o_has_icon .o_primary {
-            padding-left: @o-kanban-record-margin*1.5;
+            padding-left: $o-kanban-record-margin*1.5;
         }
 
         // -------  Kanban Content -------
@@ -189,11 +162,11 @@
         }
 
         .o_kanban_card_header + .container.o_kanban_card_content {
-            .o-flex(1, 0, auto);
-            .o-flex-display();
-            .o-flex-flow(column, nowrap);
-            .o-justify-content(space-between);
-            margin-top: @o-kanban-dashboard-vpadding * 2;
+            @include o-flex(1, 0, auto);
+            @include o-flex-display;
+            @include o-flex-flow(column, nowrap);
+            @include o-justify-content(space-between);
+            margin-top: $o-kanban-dashboard-vpadding * 2;
             padding-right: 0;
             padding-left: 0;
 
@@ -203,31 +176,31 @@
 
             a {
                 position: relative;
-                .o-text-overflow(inline-block);
+                @include o-text-overflow(inline-block);
             }
 
             .o_kanban_primary_bottom {
-                margin-top: @o-kanban-dashboard-vpadding;
-                margin-bottom: -@o-kanban-dashboard-vpadding;
+                margin-top: $o-kanban-dashboard-vpadding;
+                margin-bottom: -$o-kanban-dashboard-vpadding;
 
                 &.bottom_block {
-                    border-top: 1px solid @gray-lighter-dark;
-                    background-color: @gray-lighter;
-                    padding-top: @o-kanban-dashboard-vpadding;
-                    padding-bottom: @o-kanban-dashboard-vpadding;
+                    border-top: 1px solid $gray-lighter-dark;
+                    background-color: $gray-lighter;
+                    padding-top: $o-kanban-dashboard-vpadding;
+                    padding-bottom: $o-kanban-dashboard-vpadding;
                 }
             }
         }
 
         .o_dashboard_graph {
             overflow: hidden;
-            margin: (@o-kanban-dashboard-vpadding * 2) -@o-kanban-dashboard-hpadding;
+            margin: ($o-kanban-dashboard-vpadding * 2) (-$o-kanban-dashboard-hpadding);
         }
     }
 
     .o_favorite, .o_kanban_manage_toggle_button {
-        .o-position-absolute(0, 0);
-        padding: @o-kanban-record-margin;
+        @include o-position-absolute(0, 0);
+        padding: $o-kanban-record-margin;
     }
 
     .o_favorite {
@@ -238,6 +211,6 @@
 
     // Emphasize records' colors when necessary
     &.o_emphasize_colors .o_kanban_record::after {
-        width: @o-kanban-color-border-width * 2;
+        width: $o-kanban-color-border-width * 2;
     }
 }
diff --git a/addons/web/static/src/less/kanban_examples_dialog.less b/addons/web/static/src/scss/kanban_examples_dialog.scss
index 35a3d914b8e..a42962ed8f0 100644
--- a/addons/web/static/src/less/kanban_examples_dialog.less
+++ b/addons/web/static/src/scss/kanban_examples_dialog.scss
@@ -1,29 +1,29 @@
 .o_kanban_examples_dialog {
-    .o-flex-display();
+    @include o-flex-display;
     padding: 0px;
-    background: @odoo-color-silver;
+    background: $o-color-silver;
 
     // sidebar
     .o_kanban_examples_dialog_nav {
-        .o-flex(0, 0, auto);
-        border-right: 1px solid @gray-lighter-dark;
+        @include o-flex(0, 0, auto);
+        border-right: 1px solid $gray-lighter-dark;
         background: white;
 
         > ul > li {
             margin: 0;
-            border-bottom: 1px solid @gray-lighter-dark;
+            border-bottom: 1px solid $gray-lighter-dark;
 
             > a {
                 padding: 12px 15px;
-                color: @odoo-main-text-color;
+                color: $o-main-text-color;
                 border-left: 3px solid transparent;
                 &:focus {
                     outline: none;
                 }
             }
             &.active > a {
-                color: @headings-color;
-                border-left-color: @odoo-brand-optional;
+                color: $headings-color;
+                border-left-color: $o-brand-optional;
                 font-weight: bold;
             }
         }
@@ -31,28 +31,28 @@
 
     // content
     .o_kanban_examples_dialog_content {
-        .o-flex(1, 1, 100%);
+        @include o-flex(1, 1, 100%);
 
         .o_kanban_examples_description {
             padding: 16px 16px 0;
             text-align: justify;
         }
         .o_kanban_examples {
-            .o-flex-display();
+            @include o-flex-display;
             padding: 0 6px;
 
             .o_kanban_examples_group {
-                .o-flex(1, 1, 100%);
+                @include o-flex(1, 1, 100%);
                 margin: 10px;
 
                 .o_kanban_examples_ghost {
                     padding: 5px;
                     margin-top: -1px;
-                    border: thin solid @gray-lighter-dark;
+                    border: thin solid $gray-lighter-dark;
                     background-color: white;
                     .o_ghost_content {
                         height: 12px;
-                        background: @gray-lighter-dark;
+                        background: $gray-lighter-dark;
                         &.o_ghost_tag {
                             display: inline-block;
                             width: 40%;
diff --git a/addons/web/static/src/less/kanban_view.less b/addons/web/static/src/scss/kanban_view.scss
index f9130469665..de9ea9a8411 100644
--- a/addons/web/static/src/less/kanban_view.less
+++ b/addons/web/static/src/scss/kanban_view.scss
@@ -1,158 +1,22 @@
-@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 -------
-.o-kanban-icon(@base-opacity: 0.5) {
-    display: block;
-    text-align: center;
-    color: @odoo-main-text-color;
-    font-size: @font-size-small;
-    cursor: pointer;
-    .o-hover-opacity(@base-opacity);
-}
-.o-kanban-tag-color(@size: 0) when (@size < @odoo-nb-ui-color) {
-    // Note: the 0 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} span {
-        background-color: ~"@{odoo-color-@{size}}";
-    }
-    .o-kanban-tag-color(@size + 1);
-}
-.o-kanban-record-color(@size: 1) when (@size < @odoo-nb-ui-color) {
-    // Note: the 0 color is not defined as it is the 'no color' for kanban
-    .oe_kanban_color_@{size}::after {
-        background-color: ~"@{odoo-color-@{size}}";
-    }
-    .o-kanban-record-color(@size + 1);
-}
-.o-kanban-slim-col() {
-    position: relative;
-    .o-flex(0, 0, auto);
-    margin: 0;
-    padding: 0 floor(@o-kanban-group-padding * 0.7);
-    cursor: pointer;
-}
-.o-kanban-header-title() {
-    .o-flex-display();
-    .o-align-items(center);
-    height: @o-kanban-header-title-height;
-    line-height: 2.2;
-    color: @headings-color;
-}
-.o-kanban-v-title() {
-    .o-position-absolute(@o-kanban-inside-vgutter * 2, @left: floor(-@o-kanban-inside-vgutter * 1.2));
-    .o-transform-origin(left, bottom, @z: 0);
-    .o-transform(rotate(90deg));
-    overflow: visible;
-    white-space: nowrap;
-    font-size: 15px;
-}
-
-// ------- Kanban records mixins -------
-.o-kanban-record-title(@font-size) {
-    color: @headings-color;
-    font-size: @font-size;
-    font-weight: 500;
-    margin-bottom: 0;
-    margin-top: 0;
-}
-.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;
-    }
-}
-.o-kanban-dropdown-open() {
-    position: relative;
-    background: white;
-    border-color: @gray-lighter-darker;
-    z-index: @zindex-dropdown + 1;
-}
-.o-kanban-dropdown-menu() {
-    .o-position-absolute(@right: -1px);
-    margin-top: -1px;
-    border-color: @gray-lighter-darker;
-}
-.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: "";
-                .o-position-absolute(-2px, @left: 10px);
-                display: block;
-                width: 1px;
-                height: 20px;
-                .rotate(45deg);
-                background-color: red;
-            }
-            &::after {
-                background-color: white;
-            }
-        }
-    }
-}
 
 // ------- Kanban View Layout -------
 .o_kanban_view {
-    .o-flex-display();
-    .o-align-content(stretch);
+    @include o-flex-display;
+    @include o-align-content(stretch);
     overflow-x: visible;
 
-    @media (max-width: @screen-xs-max) {
+    @media (max-width: $screen-xs-max) {
         padding: 0px!important;
         overflow-x: auto;
     }
 
     .o_kanban_record, .o_kanban_quick_create {
-        padding: @o-kanban-inside-vgutter @o-kanban-inside-hgutter;
-        border: 1px solid @gray-lighter-dark;
+        padding: $o-kanban-inside-vgutter $o-kanban-inside-hgutter;
+        border: 1px solid $gray-lighter-dark;
         background-color: white;
 
-        @media (max-width: @screen-xs-max) {
-            padding: @o-kanban-inside-vgutter @o-kanban-inside-hgutter-mobile;
+        @media (max-width: $screen-xs-max) {
+            padding: $o-kanban-inside-vgutter $o-kanban-inside-hgutter-mobile;
         }
         &:focus, &:focus-within {
             -webkit-box-shadow: 3px 3px 10px 0px rgba(0,0,0,1);
@@ -165,7 +29,7 @@
 
     .o_kanban_quick_create {
         box-shadow: 0 0 20px -10px;
-        margin: 0 @o-kanban-record-margin -1px @o-kanban-record-margin;
+        margin: 0 $o-kanban-record-margin -1px $o-kanban-record-margin;
         margin-bottom: 8px;
 
         .o_form_view {
@@ -179,7 +43,7 @@
     .o_kanban_record {
         position: relative;
         display: inline-block; // Force the creation of a block formatting context to clear float items
-        border-color: @gray-lighter-darker;
+        border-color: $gray-lighter-darker;
         min-width: 150px;
         margin: 0 0 -1px;
 
@@ -187,21 +51,21 @@
         // Records colours
         &::after {
             content: "";
-            .o-position-absolute(0, auto, 0, -1px);
-            width: @o-kanban-color-border-width;
+            @include o-position-absolute(0, auto, 0, -1px);
+            width: $o-kanban-color-border-width;
         }
 
         // Inner Sections
         .o_kanban_record_top, .o_kanban_record_body  {
-            margin-bottom: @o-kanban-inner-hmargin;
+            margin-bottom: $o-kanban-inner-hmargin;
         }
 
         .o_kanban_record_top, .o_kanban_record_bottom  {
-            .o-flex-display();
+            @include o-flex-display;
         }
 
         .o_kanban_record_top {
-            .o-align-items(flex-start);
+            @include o-align-items(flex-start);
 
             .o_dropdown_kanban {
                 // For v11 layout, reset positioning to default to properly use
@@ -213,7 +77,7 @@
 
             .o_kanban_record_headings {
                 line-height: 1.2;
-                .o-flex(1, 1, auto);
+                @include o-flex(1, 1, auto);
                 // Ensure long word doesn't break out of container
                 word-wrap: break-word;
                 overflow: hidden;
@@ -221,22 +85,22 @@
         }
 
         .o_kanban_record_title {
-            .o-kanban-record-title (@font-size: 13px);
+            @include o-kanban-record-title($font-size: 13px);
         }
 
         .o_kanban_record_subtitle {
             display: block;
-            margin-top: @o-kanban-inner-hmargin*0.5;
+            margin-top: $o-kanban-inner-hmargin*0.5;
         }
 
         .o_kanban_record_bottom {
             .oe_kanban_bottom_left, .oe_kanban_bottom_right {
-                .o-flex-display();
-                .o-align-items(center);
+                @include o-flex-display;
+                @include o-align-items(center);
                 height: 20px;
             }
             .oe_kanban_bottom_left {
-                .o-flex(1, 1, auto);
+                @include o-flex(1, 1, auto);
 
                 > * {
                     margin-right: 6px;
@@ -249,7 +113,7 @@
                 }
             }
             .oe_kanban_bottom_right{
-                .o-flex(0, 1, auto);
+                @include o-flex(0, 1, auto);
 
                 .oe_kanban_avatar {
                     width: 20px;
@@ -258,9 +122,9 @@
                 }
             }
             .o_link_muted {
-                color: @text-color;
+                color: $text-color;
                 &:hover {
-                    color: @brand-primary;
+                    color: $brand-primary;
                     text-decoration: underline;
                 }
             }
@@ -276,22 +140,22 @@
         // -------  v11 Layout + generic layouts (~v10) -------
         // Kanban Record - Dropdown
         .o_dropdown_kanban {
-            .o-position-absolute(@o-kanban-inside-vgutter, @o-kanban-inside-hgutter);
+            @include o-position-absolute($o-kanban-inside-vgutter, $o-kanban-inside-hgutter);
             visibility: hidden;
-            @media (max-width: @screen-xs-max) {
+            @media (max-width: $screen-xs-max) {
                 visibility: visible;
             }
 
             .dropdown-toggle {
-                .o-kanban-dropdown();
-                margin: (-@o-kanban-inside-vgutter - 1px) (-@o-kanban-inside-hgutter - 1px) 0 0;
+                @include o-kanban-dropdown;
+                margin: (-$o-kanban-inside-vgutter - 1px) (-$o-kanban-inside-hgutter - 1px) 0 0;
             }
             &.open .dropdown-toggle {
-                .o-kanban-dropdown-open();
+                @include o-kanban-dropdown-open;
             }
             .dropdown-menu {
-                .o-kanban-dropdown-menu();
-                right: (-@o-kanban-inside-hgutter - 1);
+                @include o-kanban-dropdown-menu;
+                right: (-$o-kanban-inside-hgutter - 1);
             }
         }
 
@@ -301,13 +165,13 @@
 
         // Kanban Record - Dropdown colorpicker
         .oe_kanban_colorpicker {
-            .o-kanban-colorpicker();
+            @include o-kanban-colorpicker;
         }
 
         // Kanban Record - Inner elements
         .o_field_many2manytags, .o_kanban_tags {
             display: block;
-            margin-bottom: @o-kanban-inner-hmargin;
+            margin-bottom: $o-kanban-inner-hmargin;
             line-height: 1.2;
 
             .o_tag {
@@ -316,7 +180,7 @@
                 font-size: 11px;
                 font-weight: 500;
                 background-color: transparent;
-                .o-kanban-tag-color();
+                @include o-kanban-tag-color;
 
                 span {
                     display: inline-block;
@@ -342,9 +206,9 @@
             margin-top: 15px;
 
             > button, > a {
-                .o-position-absolute(@right: @o-kanban-record-margin, @bottom: @o-kanban-record-margin);
-                @media (max-width: @screen-xs-max) {
-                    right: @o-kanban-inside-hgutter-mobile;
+                @include o-position-absolute($right: $o-kanban-record-margin, $bottom: $o-kanban-record-margin);
+                @media (max-width: $screen-xs-max) {
+                    right: $o-kanban-inside-hgutter-mobile;
                 }
             }
         }
@@ -355,30 +219,30 @@
         }
 
         &.ui-sortable-helper {
-            .o-transform(rotate(-3deg));
+            @include o-transform(rotate(-3deg));
             box-shadow: 0 5px 25px -10px black;
-            .transition(~"transform 0.6s, box-shadow 0.3s");
+            @include transition(transform 0.6s, box-shadow 0.3s);
         }
 
         .o_attachment_image > img {
             width: 100%;
             height: auto;
-            margin-bottom: @o-kanban-inner-hmargin;
+            margin-bottom: $o-kanban-inner-hmargin;
         }
 
         .o_progressbar {
-            .o-flex-display();
-            height: @o-kanban-progressbar-height;
+            @include o-flex-display;
+            height: $o-kanban-progressbar-height;
 
             .o_progressbar_title {
-                .o-flex(0, 0, auto);
+                @include o-flex(0, 0, auto);
             }
             .o_progress {
-                .o-flex(1, 1, auto);
+                @include o-flex(1, 1, auto);
                 margin-top: 3px;
             }
             .o_progressbar_value {
-                .o-flex(0, 0, auto);
+                @include o-flex(0, 0, auto);
                 width: auto;
                 height: 100%;
                 text-align: right;
@@ -391,12 +255,12 @@
 
         .o_kanban_image {
             float: left;
-            width: @o-kanban-image-width;
+            width: $o-kanban-image-width;
 
             + div {
-                padding-left: @o-kanban-image-width + @o-kanban-inside-hgutter;
-                @media (max-width: @screen-xs-max) {
-                    padding-left:  @o-kanban-image-width + @o-kanban-inside-hgutter-mobile;
+                padding-left: $o-kanban-image-width + $o-kanban-inside-hgutter;
+                @media (max-width: $screen-xs-max) {
+                    padding-left:  $o-kanban-image-width + $o-kanban-inside-hgutter-mobile;
                 }
             }
         }
@@ -404,10 +268,10 @@
         .oe_kanban_details {
             width: 100%;
             ul {
-                margin-bottom: @o-kanban-inner-hmargin*0.5;;
+                margin-bottom: $o-kanban-inner-hmargin*0.5;;
                 padding-left: 0;
                 list-style: none;
-                font-size: @font-size-small;
+                font-size: $font-size-small;
 
                 li {
                     margin-bottom: 2px;
@@ -416,11 +280,11 @@
         }
 
         .o_kanban_footer {
-            .o-flex-display();
-            .o-justify-content(space-between);
-            .o-align-items(center);
+            @include o-flex-display;
+            @include o-justify-content(space-between);
+            @include o-align-items(center);
             > * {
-                .o-flex(0, 0, auto);
+                @include o-flex(0, 0, auto);
             }
         }
 
@@ -442,7 +306,7 @@
     &.o_kanban_grouped {
         min-height: 100%;
         padding: 0;
-        background-color: @gray-lighter;
+        background-color: $gray-lighter;
 
         .o_kanban_record, .o_kanban_quick_create {
             width: 100%;
@@ -451,21 +315,21 @@
         }
 
         &.o_kanban_small_column .o_kanban_group:not(.o_column_folded) {
-            width: @o-kanban-small-record-width + 2*@o-kanban-group-padding;
+            width: $o-kanban-small-record-width + 2*$o-kanban-group-padding;
         }
     }
 
     // Kanban Grouped Layout - Column default
     .o_kanban_group {
-        .o-flex(0, 0, auto);
-        padding: 0 @o-kanban-group-padding @o-kanban-group-padding @o-kanban-group-padding;
+        @include o-flex(0, 0, auto);
+        padding: 0 $o-kanban-group-padding $o-kanban-group-padding $o-kanban-group-padding;
 
         .o_kanban_header > .o_kanban_header_title {
-            .o-kanban-header-title();
+            @include o-kanban-header-title;
 
             .o_column_title {
-                .o-flex(1, 1, auto);
-                .o-text-overflow();
+                @include o-flex(1, 1, auto);
+                @include o-text-overflow;
                 font-size: 16px;
                 font-weight: 500;
             }
@@ -475,26 +339,26 @@
             }
 
             .o_kanban_quick_add i {
-                .o-kanban-icon;
-                margin-left: @o-kanban-inside-hgutter*2;
+                @include o-kanban-icon;
+                margin-left: $o-kanban-inside-hgutter*2;
             }
 
             &:hover .o_kanban_config, .o_kanban_config.open {
                 visibility: visible;
-                margin-left: @o-kanban-inside-hgutter;
+                margin-left: $o-kanban-inside-hgutter;
             }
 
             .o_kanban_config {
                 visibility: hidden;
 
                 i {
-                    .o-kanban-icon;
+                    @include o-kanban-icon;
                 }
             }
         }
 
         .o_kanban_load_more {
-            padding: @o-kanban-record-margin 0;
+            padding: $o-kanban-record-margin 0;
             box-shadow: inset 0 10px 13px -13px black;
             text-align: center;
         }
@@ -504,11 +368,11 @@
         }
 
         &:not(.o_column_folded) {
-            width: @o-kanban-default-record-width + 2*@o-kanban-group-padding;
+            width: $o-kanban-default-record-width + 2*$o-kanban-group-padding;
         }
 
         &.o_kanban_dragged {
-            background-color: @odoo-main-text-color;
+            background-color: $o-main-text-color;
 
             .o_kanban_record {
                 visibility: hidden;
@@ -522,8 +386,8 @@
 
     // Kanban Grouped Layout - Column Folded
     .o_kanban_group.o_column_folded {
-        .o-kanban-slim-col();
-        background-color: @gray-lighter-dark;
+        @include o-kanban-slim-col;
+        background-color: $gray-lighter-dark;
 
         & + .o_kanban_group.o_column_folded {
             margin-left: 1px;
@@ -534,10 +398,10 @@
             opacity: 0.5;
 
             .o_column_title {
-                .o-kanban-v-title();
+                @include o-kanban-v-title;
             }
             .o_column_unfold {
-                .o-kanban-icon(1);
+                @include o-kanban-icon(1);
             }
         }
 
@@ -558,7 +422,7 @@
             cursor: pointer;
             padding: 12px 16px;
             white-space: nowrap;
-            color: @text-muted;
+            color: $text-muted;
             opacity: 0.6;
             &:hover {
                 opacity: 1;
@@ -567,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;
@@ -575,12 +439,12 @@
         }
 
         .o_quick_create_unfolded {
-            padding: @o-kanban-inside-vgutter @o-kanban-inside-hgutter;
-            width: @o-kanban-small-record-width;
+            padding: $o-kanban-inside-vgutter $o-kanban-inside-hgutter;
+            width: $o-kanban-small-record-width;
             height: 100%;
             border: none;
             box-shadow: 0 0 20px -10px;
-            background-color: @gray-lighter;
+            background-color: $gray-lighter;
 
             .o_kanban_header {
                 height: 50px;
@@ -601,7 +465,7 @@
             }
 
             .o_kanban_muted_record {
-                background: @gray-lighter-dark;
+                background: $gray-lighter-dark;
                 height: 70px;
                 margin: 10px 0px;
             }
@@ -611,19 +475,19 @@
 
     // Kanban UN-grouped Layout
     &.o_kanban_ungrouped {
-        .o-flex-flow(row, wrap);
-        .o-justify-content(flex-start);
+        @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 {
-            .o-flex(1, 1, auto);
-            width: @o-kanban-default-record-width;
-            margin: (@o-kanban-record-margin * 0.5) @o-kanban-record-margin;
+            @include o-flex(1, 1, auto);
+            width: $o-kanban-default-record-width;
+            margin: ($o-kanban-record-margin * 0.5) $o-kanban-record-margin;
 
-            @media (max-width: @screen-xs-max) {
+            @media (max-width: $screen-xs-max) {
                 margin: 0 0 -1px 0;
-                .o-flex(1, 0, 100%);
+                @include o-flex(1, 0, 100%);
             }
 
             &.o_kanban_ghost {
@@ -639,10 +503,10 @@
 
     &.o_kanban_mobile .o_kanban_record {
         div.label {
-            .o-text-overflow();
+            @include o-text-overflow;
         }
     }
 
     // Records colours
-    .o-kanban-record-color();
+    @include o-kanban-record-color;
 }
diff --git a/addons/web/static/src/less/kanban_view_mobile.less b/addons/web/static/src/scss/kanban_view_mobile.scss
index d09b6968925..ed4e6ad8436 100644
--- a/addons/web/static/src/less/kanban_view_mobile.less
+++ b/addons/web/static/src/scss/kanban_view_mobile.scss
@@ -1,27 +1,25 @@
-@o-kanban-mobile-tabs-height: 40px;
-
-@media (max-width: @screen-xs-max) {
+@media (max-width: $screen-xs-max) {
     .o_kanban_view.o_kanban_grouped {
         display: block;
         position: relative;
         overflow: hidden;
 
         .o_kanban_mobile_tabs {
-            height: @o-kanban-mobile-tabs-height;
+            height: $o-kanban-mobile-tabs-height;
             position: relative;
             background-color: #5E5E5E;
 
             .o_kanban_mobile_tab {
-                .o-position-absolute(@left: 100%);
-                .o-transform(translateX(-50%));
-                height: @o-kanban-mobile-tabs-height;
+                @include o-position-absolute($left: 100%);
+                @include o-transform(translateX(-50%));
+                height: $o-kanban-mobile-tabs-height;
                 padding: 10px;
                 font-size: 14px;
                 color: white;
 
                 &.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;
@@ -31,7 +29,7 @@
 
         // [class] to get same specificity as elsewhere (kanban_view.less)
         &[class] .o_kanban_group:not(.o_column_folded) {
-            .o-position-absolute(@top: @o-kanban-mobile-tabs-height, @left: 0, @bottom: 0);
+            @include o-position-absolute($top: $o-kanban-mobile-tabs-height, $left: 0, $bottom: 0);
             overflow-x: scroll;
             width: 100%;
             padding: 0;
diff --git a/addons/web/static/src/less/layout_background.less b/addons/web/static/src/scss/layout_background.scss
index 6750705c35b..e23b2585b50 100644
--- a/addons/web/static/src/less/layout_background.less
+++ b/addons/web/static/src/scss/layout_background.scss
@@ -1,9 +1,9 @@
 .o_background_footer, .o_background_header, .o_report_layout_background {
     font-family: 'Lato';
-    color: @gray;
+    color: $gray;
 }
 .o_background_header {
-    border-bottom: 1px solid @gray-lighter;
+    border-bottom: 1px solid $gray-lighter;
     .company_address {
         min-width: 300px;
     }
@@ -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,10 +36,10 @@
     background-repeat: no-repeat;
     min-height: 900px;
     thead tr th, h2 {
-        color: @odoo-brand-primary;
+        color: $o-brand-primary;
     }
     tbody {
-        color: @gray;
+        color: $gray;
         tr:nth-child(odd) {
             background-color: rgba(184, 171, 180, 0.2);
         }
@@ -53,11 +53,11 @@
             background-color: transparent !important;
         }
         tr:first-child td {
-            /*we could get rid of this rule if .border-black td would be terminated in report.less*/
+            /*we could get rid of this rule if .border-black td would be terminated in report.scss*/
             border-top: none !important;
         }
         tr:last-child td {
-            color: @odoo-brand-primary;
+            color: $o-brand-primary;
         }
     }
     #total {
diff --git a/addons/web/static/src/less/layout_boxed.less b/addons/web/static/src/scss/layout_boxed.scss
index 21fcf66efc5..f3aa7601107 100644
--- a/addons/web/static/src/less/layout_boxed.less
+++ b/addons/web/static/src/scss/layout_boxed.scss
@@ -1,22 +1,22 @@
 .o_boxed_footer, .o_boxed_header, .o_report_layout_boxed {
     font-family: 'Lato';
-    color: @gray;
+    color: $gray;
     font-size: 12px;
 }
 .o_boxed_header {
-    border-bottom: 1px solid @gray-lighter;
+    border-bottom: 1px solid $gray-lighter;
     img {
         max-height: 100px;
     }
     h4 {
-        color: @o-we-color-text-normal;
+        color: $o-we-color-text-normal;
         font-weight: 700;
         text-transform: uppercase;
     }
 }
 .o_boxed_footer {
     white-space: nowrap;
-    border-top: 3px solid @gray;
+    border-top: 3px solid $gray;
     ul {
         margin: 4px 0;
     }
@@ -25,7 +25,7 @@
     // This is not a general rule since the id is not used in all the reports,
     // we should make a general structure for report body to use it everywhere
     #informations {
-        border: 1px solid @gray;
+        border: 1px solid $gray;
         padding-top: 10px;
         margin: 0;
     }
@@ -33,22 +33,22 @@
         text-transform: uppercase;
     }
     table {
-        border: 1px solid @gray;
+        border: 1px solid $gray;
         thead {
             tr th {
-                border-bottom: 3px solid @gray !important;
+                border-bottom: 3px solid $gray !important;
                 text-transform: uppercase;
             }
         }
         tbody {
-            color: @gray;
+            color: $gray;
             tr {
                 td {
                     border-top: none;
-                    border-right: 1px solid @gray;
+                    border-right: 1px solid $gray;
                 }
                 td:last-child {
-                    background-color: @gray-lighter;
+                    background-color: $gray-lighter;
                 }
             }
         }
@@ -59,14 +59,14 @@
             border-right: none;
         }
         tr:last-child td, tr:first-child td {
-            /*we could get rid of this rule if .border-black td would be terminated in report.less*/
+            /*we could get rid of this rule if .border-black td would be terminated in report.scss*/
             border-top: none !important;
         }
         tr:first-child td {
             background-color: transparent;
         }
         tr:last-child td {
-            background-color: @gray;
+            background-color: $gray;
             color: #fff;
         }
     }
diff --git a/addons/web/static/src/less/layout_clean.less b/addons/web/static/src/scss/layout_clean.scss
index 869e1f4098f..ecbdb02153f 100644
--- a/addons/web/static/src/less/layout_clean.less
+++ 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 {
@@ -74,10 +74,10 @@
             top: -20px;
             > table {
             tr:last-child td {
-                border-top: 1px solid @gray-lighter !important;
+                border-top: 1px solid $gray-lighter !important;
             }
             tr:first-child td {
-                /*we could get rid of this rule if .border-black td would be terminated in report.less*/
+                /*we could get rid of this rule if .border-black td would be terminated in report.scss*/
                 border-top: none !important;
             }
         }
diff --git a/addons/web/static/src/less/list_view.less b/addons/web/static/src/scss/list_view.scss
index 9106cf45a87..36bee4439c6 100644
--- a/addons/web/static/src/less/list_view.less
+++ 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 @@
     }
 
     thead {
-        color: @odoo-main-text-color;
+        color: $o-main-text-color;
         border-bottom: 1px solid #cacaca;
         > tr > th {
             border-left: 1px solid #dfdfdf;
@@ -25,16 +24,16 @@
 
     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;
     }
 
     .o_column_sortable {
         position: relative;
-        .user-select(none);  // Prevent unwanted selection while sorting
+        @include user-select(none);  // Prevent unwanted selection while sorting
 
         &::after {
             font-family: FontAwesome;
@@ -61,7 +60,7 @@
             opacity: 0.3;
         }
         &.o-sort-up, &.o-sort-down {
-            color: @headings-color;
+            color: $headings-color;
             &::after {
                 opacity: 1;
             }
@@ -88,7 +87,7 @@
         font-style: italic;
     }
     .text-muted {
-        color: lighten(@text-muted, 10%);
+        color: lighten($text-muted, 10%);
     }
 
     // Grouped list views
@@ -100,14 +99,14 @@
         }
         .o_group_pager {
             cursor: text;
-            .user-select(none);
+            @include user-select(none);
             text-align: right;
             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 @@
 
     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;
             }
         }
     }
@@ -167,7 +166,7 @@
 
         // Field widgets override
         > .o_field_widget {
-            .o-position-absolute(0, 0, auto, 0);
+            @include o-position-absolute(0, 0, auto, 0);
             min-height: 100%;
 
             &:not(.o_field_text) {
@@ -182,11 +181,11 @@
             }
         }
         > .o_field_translate {
-            .o-position-absolute(0, 5px);
+            @include o-position-absolute(0, 5px);
             width: 16px; // to have some space on the right
         }
         .o_input {
-            padding: @table-condensed-cell-padding;
+            padding: $table-condensed-cell-padding;
             background-color: white;
 
             .o_input {
@@ -210,7 +209,7 @@
                 padding-right: 15px; // To prevent caret overlapping
             }
             > .o_dropdown_button, .o_datepicker_button {
-                .o-position-absolute(20%, 5px);
+                @include o-position-absolute(20%, 5px);
             }
         }
         .o_field_widget > .o_external_button {
diff --git a/addons/web/static/src/less/list_view_extra.less b/addons/web/static/src/scss/list_view_extra.scss
index 9a9413c0dd7..ec53efc6df5 100644
--- a/addons/web/static/src/less/list_view_extra.less
+++ b/addons/web/static/src/scss/list_view_extra.scss
@@ -5,6 +5,6 @@
     }
 
     tbody > tr.o_group_header {
-        .o-vertical-gradient(#fcfcfc, #dedede);
+        @include o-vertical-gradient(#fcfcfc, #dedede);
     }
 }
diff --git a/addons/web/static/src/less/mimetypes.less b/addons/web/static/src/scss/mimetypes.scss
index e4d2624dc6d..f366f7eed97 100644
--- a/addons/web/static/src/less/mimetypes.less
+++ b/addons/web/static/src/scss/mimetypes.scss
@@ -1,6 +1,7 @@
 .o_image {
-    .square(38px);
     display: inline-block;
+    width: 38px;
+    height: 38px;
     background-image: url('/web/static/src/img/mimetypes/unknown.svg');
     background-size: contain;
 
diff --git a/addons/web/static/src/less/modal.less b/addons/web/static/src/scss/modal.scss
index 5b74583ee41..82faabfa3bc 100644
--- a/addons/web/static/src/less/modal.less
+++ b/addons/web/static/src/scss/modal.scss
@@ -13,8 +13,8 @@
             }
 
             .o_modal_header {
-                .o-webclient-padding(@top: 10px, @bottom: 10px);
-                .clearfix();
+                @include o-webclient-padding($top: 10px, $bottom: 10px);
+                @include clearfix;
 
                 .o_search_options {
                     display: inline-block;
@@ -31,7 +31,7 @@
     }
 
 
-    @media (min-width: @screen-sm-min) {
+    @media (min-width: $screen-sm-min) {
         .modal-dialog {
             height: 100%;
             padding: 30px 0;
@@ -39,11 +39,11 @@
 
             .modal-content {
                 max-height: 100%;
-                .o-flex-display();
-                .o-flex-flow(column, nowrap);
+                @include o-flex-display;
+                @include o-flex-flow(column, nowrap);
 
                 .modal-header, .modal-footer {
-                    .o-flex(0, 0, auto);
+                    @include o-flex(0, 0, auto);
                 }
 
                 .modal-body {
@@ -54,15 +54,15 @@
 
                     &.o_dialog_error {
                         overflow: visible;
-                        .o-flex-display();
-                        .o-flex-flow(column, nowrap);
+                        @include o-flex-display;
+                        @include o-flex-flow(column, nowrap);
 
                         > .alert, > button {
-                            .o-flex(0, 0, auto);
+                            @include o-flex(0, 0, auto);
                         }
 
                         > .o_error_detail {
-                            .o-flex(1, 1, auto);
+                            @include o-flex(1, 1, auto);
                             min-height: 0;
                             overflow: auto;
                         }
@@ -74,10 +74,10 @@
 }
 
 // Temporary fix for modals which are not instantiated thanks to the Dialog
-// JS classes (deprecated case) (see bootstrap_overridden.less) + Frontend.
+// JS classes (deprecated case) (see bootstrap_overridden.scss) + Frontend.
 //
 // TODO the following code was disabled because it is saas-incompatible
 //
 // :not(body) > .modal {
-//     z-index: @zindex-modal-background + 1;
+//     z-index: $zindex-modal-background + 1;
 // }
diff --git a/addons/web/static/src/less/model_field_selector.less b/addons/web/static/src/scss/model_field_selector.scss
index aee5bd17867..0eec3e60049 100644
--- a/addons/web/static/src/less/model_field_selector.less
+++ b/addons/web/static/src/scss/model_field_selector.scss
@@ -3,9 +3,9 @@
     position: relative;
 
     > .o_field_selector_value {
-        .o-flex-display();
-        .o-flex-flow(row, wrap);
-        .o-align-items(center);
+        @include o-flex-display;
+        @include o-flex-flow(row, wrap);
+        @include o-align-items(center);
         height: 100%;
         min-height: 20px; // needed when there is no value in it and used standalone
         &:active, &:focus, &:active:focus {
@@ -14,34 +14,34 @@
 
         > .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 {
-            .o-align-self(center);
+            @include o-align-self(center);
             margin: 0 2px;
             font-size: 10px;
         }
     }
     > .o_field_selector_controls {
-        .o-position-absolute(0, 0, 1px);
-        .o-flex-display();
-        .o-align-items(center);
+        @include o-position-absolute(0, 0, 1px);
+        @include o-flex-display;
+        @include o-align-items(center);
         cursor: pointer;
     }
 
     &.o_edit_mode {
         > .o_field_selector_controls::after {
-            .o-caret-down();
+            @include o-caret-down;
         }
 
         > .o_field_selector_popover {
-            @o-field-selector-arrow-height: 7px;
-            .o-position-absolute(@top: 100%, @left: 0);
+            $o-field-selector-arrow-height: 7px;
+            @include o-position-absolute($top: 100%, $left: 0);
             z-index: 1051;
             width: 265px;
-            margin-top: @o-field-selector-arrow-height;
+            margin-top: $o-field-selector-arrow-height;
             background: white;
             box-shadow: 0 3px 10px rgba(0,0,0,.4);
 
@@ -51,38 +51,38 @@
 
             .o_field_selector_popover_header {
                 color: white;
-                background: @brand-primary;
+                background: $brand-primary;
                 font-weight: bold;
                 padding: 5px 0 5px 0.4em;
 
                 .o_field_selector_title {
                     width: 100%;
-                    .o-text-overflow();
+                    @include o-text-overflow;
                     padding: 0px 35px;
                     text-align: center;
                 }
                 .o_field_selector_popover_option {
-                    .o-position-absolute(@top: 0);
+                    @include o-position-absolute($top: 0);
                     padding: 7px 8px 8px 6px;
 
                     &.o_prev_page {
                         left: 0;
-                        border-right: 1px solid darken(@brand-primary, 10%);
+                        border-right: 1px solid darken($brand-primary, 10%);
                     }
                     &.o_field_selector_close {
                         right: 0;
-                        border-left: 1px solid darken(@brand-primary, 10%);
+                        border-left: 1px solid darken($brand-primary, 10%);
                     }
                     &:hover {
-                        background: darken(@brand-primary, 10%);
+                        background: darken($brand-primary, 10%);
                     }
                 }
                 &:before {
-                    .o-position-absolute(@top: -@o-field-selector-arrow-height, @left: @o-field-selector-arrow-height);
+                    @include o-position-absolute($top: -$o-field-selector-arrow-height, $left: $o-field-selector-arrow-height);
                     content: "";
-                    border-left: @o-field-selector-arrow-height solid rgba(0, 0, 0, 0);
-                    border-right: @o-field-selector-arrow-height solid rgba(0, 0, 0, 0);
-                    border-bottom: @o-field-selector-arrow-height solid @brand-primary;
+                    border-left: $o-field-selector-arrow-height solid rgba(0, 0, 0, 0);
+                    border-right: $o-field-selector-arrow-height solid rgba(0, 0, 0, 0);
+                    border-bottom: $o-field-selector-arrow-height solid $brand-primary;
                 }
             }
             .o_field_selector_popover_body {
@@ -109,16 +109,16 @@
                             font-size: 12px;
                         }
                         .o_field_selector_relation_icon {
-                            .o-position-absolute(@top: 0, @right: 0, @bottom: 0);
-                            .o-flex-display();
-                            .o-align-items(center);
+                            @include o-position-absolute($top: 0, $right: 0, $bottom: 0);
+                            @include o-flex-display;
+                            @include o-align-items(center);
                             padding: 10px;
                         }
                     }
                 }
             }
             .o_field_selector_popover_footer {
-                background: @brand-primary;
+                background: $brand-primary;
                 padding: 5px 0.4em;
 
                 > input {
diff --git a/addons/web/static/src/less/navbar.less b/addons/web/static/src/scss/navbar.scss
index cf14f9a8615..0c3d46945c9 100644
--- a/addons/web/static/src/less/navbar.less
+++ b/addons/web/static/src/scss/navbar.scss
@@ -1,26 +1,26 @@
 
 .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;
 
         font-size: 18px;
-        .user-select(none);
+        @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 {
@@ -32,16 +32,16 @@
         display: block;
         float: left;
         margin-right: 35px;
-        .user-select(none);
+        @include user-select(none);
         color: white;
         font-size: 22px;
         font-weight: 500;
-        line-height: @odoo-navbar-height;
+        line-height: $o-navbar-height;
 
-        @media (max-width: @screen-xs-max) {
+        @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
                             }
                         }
@@ -125,36 +125,34 @@
         overflow: auto;
         margin-top: 0;
 
-        .o-menu-indentation(@index) when (@index < 6) {
-            > li.o_menu_header_lvl_@{index}, > li .o_menu_entry_lvl_@{index} {
-                padding-left: @odoo-dropdown-hpadding + (@index - 2)*12px;
+        @for $index from 3 through 5 {
+            > li.o_menu_header_lvl_#{$index}, > li .o_menu_entry_lvl_#{$index} {
+                padding-left: $o-dropdown-hpadding + ($index - 2)*12px;
             }
-            .o-menu-indentation(@index + 1);
         }
-        .o-menu-indentation(3);
     }
 
     .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 {
             height: 17px;
-            .o-transform(translateY(-2px));
+            @include o-transform(translateY(-2px));
         }
     }
 
-    @media (max-width: @screen-xs-max) {
-        .o-transition(height, 200ms, linear);
+    @media (max-width: $screen-xs-max) {
+        @include o-transition(height, 200ms, linear);
 
         position: relative;
-        height: @odoo-navbar-height;
+        height: $o-navbar-height;
         overflow: hidden;
 
         > ul {
@@ -188,15 +186,15 @@
             }
 
             &.o_menu_systray {
-                .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 {
-                        .o-position-absolute(@odoo-navbar-height, 0, 0, 0);
+                        @include o-position-absolute($o-navbar-height, 0, 0, 0);
                         position: fixed;
                         width: auto;
                     }
@@ -210,7 +208,7 @@
     }
 }
 
-@media (max-width: @screen-xs-max) {
+@media (max-width: $screen-xs-max) {
     body.o_mobile_menu_opened {
         overflow: hidden;
         height: 100%;
@@ -223,7 +221,7 @@
     }
 }
 
-@media (max-width: @screen-xs-max) {
+@media (max-width: $screen-xs-max) {
      .o_switch_company_menu > .dropdown-menu {
          padding-top: 0px;
          li.bg-info {
diff --git a/addons/web/static/src/less/pivot_view.less b/addons/web/static/src/scss/pivot_view.scss
index d7dfdd45de5..3efddd8eab2 100644
--- a/addons/web/static/src/less/pivot_view.less
+++ b/addons/web/static/src/scss/pivot_view.scss
@@ -5,36 +5,36 @@
     // 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%);
         }
 
-        .o-pivot-header-cell() {
-            background-color: lighten(@odoo-brand-secondary, 40%);
+        @mixin o-pivot-header-cell {
+            background-color: lighten($o-brand-secondary, 40%);
             cursor: pointer;
             white-space: nowrap;
-            .user-select(none);
+            @include user-select(none);
             &:hover {
-                background-color: lighten(@odoo-brand-secondary, 30%);
+                background-color: lighten($o-brand-secondary, 30%);
             }
         }
 
         .o_pivot_measure_row {
-            .o-pivot-header-cell;
+            @include o-pivot-header-cell;
         }
 
         .o_pivot_header_cell_closed {
-            .o-pivot-header-cell;
+            @include o-pivot-header-cell;
             &::before {
                 font-family: FontAwesome;
                 content: "";
@@ -43,7 +43,7 @@
         }
 
         .o_pivot_header_cell_opened {
-            .o-pivot-header-cell;
+            @include o-pivot-header-cell;
             &::before {
                 font-family: FontAwesome;
                 content: "";
@@ -52,18 +52,18 @@
         }
 
         .o_pivot_measure_row_sorted_asc::after {
-            .o-caret-down;
+            @include o-caret-down;
             margin-left: 5px;
         }
 
         .o_pivot_measure_row_sorted_desc::after {
-            .o-caret-up;
+            @include o-caret-up;
             margin-left: 5px;
         }
     }
 
     .o_pivot_field_selection::after {
-        .o-caret-right;
+        @include o-caret-right;
         position: absolute;
         right: 6px;
         top: 9px;
@@ -74,5 +74,5 @@
 // Control panel buttons
 // ------------------------------------------------------------------
 .o_pivot_measures_list {
-    .o-selected-li;
+    @include o-selected-li;
 }
\ No newline at end of file
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/less/progress_bar.less b/addons/web/static/src/scss/progress_bar.scss
index 25a89d15ecf..8aaade8812f 100644
--- a/addons/web/static/src/less/progress_bar.less
+++ 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
new file mode 100644
index 00000000000..8a705242adc
--- /dev/null
+++ b/addons/web/static/src/scss/rainbow.scss
@@ -0,0 +1,255 @@
+/**************  rainbow  *****************/
+
+.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;
+    margin: -5% auto 0 (-$reward-size / 2);
+    @media (max-width: $screen-xs-max) {
+        margin: -5% auto 0 (-$reward-size-mobile / 2);
+    }
+    background-image: -webkit-radial-gradient(#EDEFF4 30%, transparent 70%, transparent);
+    background-image: -o-radial-gradient(#EDEFF4 30%, transparent 70%, transparent);
+    background-image: radial-gradient(#EDEFF4 30%, transparent 70%, transparent);
+
+    @include o-animation(reward-fading, $reward-base-time * 0.5, ease-in-out, 0s, 1, normal, forwards);
+    @include o-position-absolute(20%, auto, auto, 50%);
+    @include size($reward-size, $reward-size);
+    @media (max-width: $screen-xs-max) {
+        @include size($reward-size-mobile, $reward-size-mobile);
+    }
+
+    &.o_reward_fading {
+        display: block;
+        @include o-animation(reward-fading-reverse, ($reward-base-time * 0.4), ease-in-out, 0s, 1, normal, forwards);
+
+        .o_reward_face_group {
+            @include o-animation(reward-jump-reverse, ($reward-base-time * 0.4), ease-in-out, 0s, 1, normal, forwards);
+        }
+
+        .o_reward_rainbow {
+            path {
+                @include o-animation(reward-rainbow-reverse, ($reward-base-time * 0.5), ease-out, 0s, 1, normal, forwards);
+            }
+        }
+
+    }
+
+    .o_reward_face, .o_reward_stars, .o_reward_shadow, .o_reward_thumbup {
+        margin: 0 auto;
+    }
+
+    .o_reward_rainbow {
+        path {
+            stroke-dasharray: 600;
+            stroke-dashoffset: 0;
+            fill: none;
+            stroke-linecap: round;
+            stroke-width: 21px;
+            @include o-animation(reward-rainbow, ($reward-base-time ), ease-out, 0s, 1, normal, forwards);
+        }
+    }
+
+    .o_reward_face_group {
+        transform-origin: center;
+        @include o-animation(reward-jump, $reward-base-time * 0.8, ease-in-out);
+        @include o-position-absolute(6%, 0, 0, 0);
+        @include size(100%, 60%);
+    }
+
+    .o_reward_face {
+        display: block;
+        top: 42%;
+        position: relative;
+        border-radius: 100%;
+        background: center center / contain no-repeat;
+        @include o-animation(reward-float, $reward-base-time, ease-in-out, $reward-base-time, infinite, alternate);
+        @include size(34%, 56.67%);
+    }
+
+    .o_reward_stars {
+        display: block;
+        @include size($reward-size * 0.75, $reward-size / 2);
+        @media (max-width: $screen-xs-max) {
+            @include size($reward-size-mobile * 0.75, $reward-size-mobile / 2);
+        }
+        @include o-position-absolute(18%, 7%);
+
+        svg {
+            transform-origin: center center;
+            @include o-position-absolute(28%, $left:3%);
+            @include o-animation(reward-stars, $reward-base-time, ease-in-out, 0s, infinite, alternate-reverse);
+
+            &.star2, &.star4 {
+                @include o-animation(reward-stars, ($reward-base-time*1.2), ease-in-out, 0s, infinite, alternate);
+            }
+
+            &.star2 {
+                left: 20%;
+                top: 2%;
+            }
+
+            &.star3 {
+                left: 49%;
+                top: 6%;
+            }
+
+            &.star4 {
+                left: 70%;
+                top: 27%;
+            }
+
+        }
+    }
+
+    .o_reward_thumbup {
+        width: 40px;
+        display: block;
+        @include o-animation(reward-scale, $reward-base-time * 0.5, ease-in-out, 0s, infinite, alternate);
+        @include o-position-absolute(63%, auto, auto, 65%);
+    }
+
+    .o_reward_msg_container {
+        will-change: transform;
+        padding-top: 11%;
+        width: 70%;
+        margin-left: 15%;
+
+        // Translate before animate
+        @include o-transform(translateY(5px));
+
+        @include o-animation(reward-float, $reward-base-time, ease-in-out, $reward-base-time, infinite, alternate-reverse);
+        @include o-position-absolute(85%, auto, auto, 0%);
+
+        .o_reward_thumb_right {
+            height: 40px;
+            z-index: 1;
+            @include o-position-absolute(0, auto, auto, 16%);
+        }
+
+        .o_reward_msg {
+            margin-left: 7%;
+            margin-top: -9.5%;
+            padding: 25px 15px 20px;
+            background: white;
+            border: 1px solid #ecf1ff;
+            border-top-width: 0;
+            display: inline-block;
+
+            // Reset margins for first and penultimate childs (the last one is shadow)
+            *:first-child {
+                margin-top: 0;
+            }
+        }
+
+        .o_reward_msg_content {
+            position: relative;
+            font-family: sans-serif;
+            text-align: left;
+            color: $reward-text-color;
+        }
+
+        .o_reward_shadow_container {
+            @include o-transform(translateY(0px) rotateZ(0));
+            @include o-animation(reward-float, $reward-base-time, ease-in-out, $reward-base-time, infinite, alternate);
+        }
+
+        .o_reward_shadow {
+            @include size(100%, 12px);
+            background-color: #e7eaf0;
+            border-radius: 100%;
+            @include o-transform(scale(0.8) rotateZ(0));
+            @include o-animation(reward-scale, $reward-base-time, ease-in-out, $reward-base-time, infinite, alternate);
+            @include o-position-absolute(auto, auto, -40px, 0);
+        }
+    }
+}
+
+@keyframes reward-fading {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+@keyframes reward-fading-reverse {
+    100% {
+        opacity: 0;
+    }
+}
+
+@keyframes reward-jump {
+    0% {
+        @include o-transform(scale(0.5));
+    }
+    50% {
+        @include o-transform(scale(1.05));
+    }
+    to {
+        @include o-transform(scale(1));
+    }
+}
+
+@keyframes reward-jump-reverse {
+    0% {
+        @include o-transform(scale(1));
+    }
+    50% {
+        @include o-transform(scale(1.05));
+    }
+    to {
+        @include o-transform(scale(0.5));
+    }
+}
+
+@keyframes reward-rainbow {
+    0% {
+        stroke-dashoffset: -500;
+    }
+    to {
+        stroke-dashoffset: 0;
+    }
+}
+
+@keyframes reward-rainbow-reverse {
+    to {
+        stroke-dashoffset: -500;
+    }
+}
+
+@keyframes reward-float {
+    from {
+        @include o-transform(translateY(0px));
+    }
+    to {
+        @include o-transform(translateY(5px));
+    }
+}
+
+@keyframes reward-stars {
+    from {
+        @include o-transform(scale(0.3) rotate(0deg));
+    }
+    50% {
+        @include o-transform(scale(1.0) rotate(20deg));
+    }
+    to {
+        @include o-transform(scale(0.3) rotate(80deg));
+    }
+}
+
+@keyframes reward-scale {
+    from {
+        @include o-transform(scale(0.8));
+    }
+    to {
+        @include o-transform(scale(1.0));
+    }
+}
diff --git a/addons/web/static/src/less/report.editor.less b/addons/web/static/src/scss/report.editor.scss
index 544787ff6b2..544787ff6b2 100644
--- a/addons/web/static/src/less/report.editor.less
+++ b/addons/web/static/src/scss/report.editor.scss
diff --git a/addons/web/static/src/less/report.less b/addons/web/static/src/scss/report.scss
index f34a2393fbe..f34a2393fbe 100644
--- a/addons/web/static/src/less/report.less
+++ b/addons/web/static/src/scss/report.scss
diff --git a/addons/web/static/src/less/report_backend.less b/addons/web/static/src/scss/report_backend.scss
index 62252c2d9f7..62252c2d9f7 100644
--- a/addons/web/static/src/less/report_backend.less
+++ b/addons/web/static/src/scss/report_backend.scss
diff --git a/addons/web/static/src/less/search_view.less b/addons/web/static/src/scss/search_view.scss
index 0261806631a..f2b0f7fd14f 100644
--- a/addons/web/static/src/less/search_view.less
+++ b/addons/web/static/src/scss/search_view.scss
@@ -1,55 +1,55 @@
-.o-search-options-dropdown-custom-li() {
+@mixin o-search-options-dropdown-custom-li {
     margin: 3px 25px;
     width: auto;
     max-width: 250px;
 }
 
 .o_searchview {
-    .o-flex-display();
-    .o-flex-flow(row, wrap);
-    .o-align-items(flex-end);
+    @include o-flex-display;
+    @include o-flex-flow(row, wrap);
+    @include o-align-items(flex-end);
     position: relative;
     padding: 0 20px 1px 0;
 
     .o_searchview_facet {
-        @o-searchview-facet-remove-width: 18px;
+        $o-searchview-facet-remove-width: 18px;
 
-        .o-flex(0, 0, auto);
+        @include o-flex(0, 0, auto);
         max-width: 100%;
-        .o-flex-display();
+        @include o-flex-display;
         position: relative;
         margin: 1px 3px 0 0;
 
         .o_searchview_facet_label {
-            .o-flex(0, 0, auto);
-            .o-text-overflow();
+            @include o-flex(0, 0, auto);
+            @include o-text-overflow;
             padding: 0 3px;
             color: white;
 
-            .o-flex-display();
-            .o-align-items(center);
+            @include o-flex-display;
+            @include o-align-items(center);
         }
-            
+
         .o_facet_values {
-            padding: 0 @o-searchview-facet-remove-width 0 5px;
+            padding: 0 $o-searchview-facet-remove-width 0 5px;
             .o_facet_values_sep {
                 font-style: italic;
             }
         }
         .o_facet_remove {
-            .o-flex(0, 0, auto);
-            .o-flex-display();
-            .o-justify-content(center);
-            .o-align-items(center);
-            .o-position-absolute(0, 0, 0);
-            width: @o-searchview-facet-remove-width;
+            @include o-flex(0, 0, auto);
+            @include o-flex-display;
+            @include o-justify-content(center);
+            @include o-align-items(center);
+            @include o-position-absolute(0, 0, 0);
+            width: $o-searchview-facet-remove-width;
             cursor: pointer;
         }
     }
 
     .o_searchview_input {
         width: 100px;
-        .o-flex(1, 0, auto);
+        @include o-flex(1, 0, auto);
     }
 
     .o_searchview_more {
@@ -58,7 +58,7 @@
     }
 
     .o_searchview_autocomplete {
-        .o-position-absolute(100%, @left: auto);
+        @include o-position-absolute(100%, $left: auto);
         width: 100%;
 
         li {
@@ -75,14 +75,14 @@
                     background-color: inherit;
                 }
                 &.o-expand, &.o-expanded { // caret
-                    .o-position-absolute(@left: 6px);
+                    @include o-position-absolute($left: 6px);
                     padding: 3px;
                 }
                 &.o-expand:before {
-                    .o-caret-right;
+                    @include o-caret-right;
                 }
                 &.o-expanded:before {
-                    .o-caret-down;
+                    @include o-caret-down;
                 }
             }
         }
@@ -101,18 +101,18 @@
 
     display: inline-block;
     cursor: pointer;
-    .user-select(none);  // Prevent text selection when toggling the dropdowns
+    @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%);
     }
 }
 
@@ -122,33 +122,33 @@
     .o_closed_menu {
         position: relative;
         a:before {
-            .o-caret-right;
-            .o-position-absolute(@top: 50%, @left: 10px);
-            margin-top: (-@caret-width-base);
+            @include o-caret-right;
+            @include o-position-absolute($top: 50%, $left: 10px);
+            margin-top: (-$caret-width-base);
         }
     }
     .o_open_menu {
         position: relative;
         a:before {
-            .o-caret-down;
-            .o-position-absolute(@top: 50%, @left: 10px);
-            margin-top: (-@caret-width-base);
+            @include o-caret-down;
+            @include o-position-absolute($top: 50%, $left: 10px);
+            margin-top: (-$caret-width-base);
         }
     }
 
     // Filters
     .o_filters_menu {
-        .o-selected-li;
-        
-        max-height: ~"calc(100vh - 125px)";
+        @include o-selected-li;
+
+        max-height: calc(100vh - 125px);
         overflow: auto;
 
         .o_filter_condition {
-            .o-search-options-dropdown-custom-li;
+            @include o-search-options-dropdown-custom-li;
             margin-bottom: 8px;
             .o_or_filter { // or between conditions
                 display: none;  // hidden for the first condition
-                .o-position-absolute(@top: 7px, @left: -18px);
+                @include o-position-absolute($top: 7px, $left: -18px);
             }
         }
         .o_filter_condition + .o_filter_condition {
@@ -161,31 +161,31 @@
         }
         .o_searchview_extended_prop_value { // date fields: datepicker position
             .datepickerbutton {
-                .o-position-absolute(3px, -20px);
+                @include o-position-absolute(3px, -20px);
                 cursor: pointer;
             }
         }
         .o_searchview_extended_delete_prop { // delete condition button position
-            .o-position-absolute(3px, -18px);
+            @include o-position-absolute(3px, -18px);
             cursor: pointer;
         }
         .o_add_filter_menu { // apply and add buttons
             display: none;  // Needed by the webclient
-            .o-search-options-dropdown-custom-li;
+            @include o-search-options-dropdown-custom-li;
         }
     }
 
     // Group By
     .o_group_by_menu {
-        .o-selected-li;
-        
-        max-height: ~"calc(100vh - 125px)";
+        @include o-selected-li;
+
+        max-height: calc(100vh - 125px);
         overflow: auto;
 
         .divider {display: none;} // hide the divider by default (no group)
         .o_add_group { // add button
             display: none;  // Needed by the webclient
-            .o-search-options-dropdown-custom-li;
+            @include o-search-options-dropdown-custom-li;
         }
     }
 
@@ -193,15 +193,15 @@
     .o_favorites_menu {
         max-height: 75vh;
         overflow-y: auto;
-        .o-selected-li;
-        
-        max-height: ~"calc(100vh - 125px)";
+        @include o-selected-li;
+
+        max-height: calc(100vh - 125px);
         overflow: auto;
 
         .divider {display: none;} // hide the divider by default (no favorite)
         .o-searchview-custom-private, .o-searchview-custom-public {
             .o-remove-filter {
-                .o-position-absolute(50%, 12px);
+                @include o-position-absolute(50%, 12px);
                 margin-top: -6px;
                 cursor: pointer;
             }
@@ -214,7 +214,7 @@
         }
         .o_save_name { // save button
             display: none; // hidden by default
-            .o-search-options-dropdown-custom-li;
+            @include o-search-options-dropdown-custom-li;
         }
     }
 }
diff --git a/addons/web/static/src/less/search_view_extra.less b/addons/web/static/src/scss/search_view_extra.scss
index 9c263976e4d..d2098a5f9c3 100644
--- a/addons/web/static/src/less/search_view_extra.less
+++ b/addons/web/static/src/scss/search_view_extra.scss
@@ -1,21 +1,21 @@
 .o_searchview {
     background-color: white;
     border: 1px solid #ccc;
-    border-radius: @border-radius-base;
+    border-radius: $border-radius-base;
     padding: 1px 25px 3px 5px;
 
     .o_searchview_facet {
-        border: 1px solid @gray-light;
-        background: lighten(@odoo-brand-primary, 35%);
+        border: 1px solid $gray-light;
+        background: lighten($o-brand-primary, 35%);
 
         .o_searchview_facet_label {
-            background-color: @gray-light;
+            background-color: $gray-light;
         }
 
         .o_facet_remove {
-            color: @gray-light;
+            color: $gray-light;
             &:hover {
-                color: @gray;
+                color: $gray;
             }
         }
     }
@@ -25,19 +25,12 @@
         padding: 4px 0 0 0;
     }
     .o_searchview_more {
-        .o-position-absolute(@top: 6px, @right: 5px);
+        @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;
         }
     }
 }
-
-// Search options: inputs and selects style
-.o_search_options {
-    input[type="text"], select {
-        .form-control();
-    }
-}
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/less/tooltip.less b/addons/web/static/src/scss/tooltip.scss
index e071bf04a40..765db1292da 100644
--- a/addons/web/static/src/less/tooltip.less
+++ 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;
-        border-radius: @border-radius-base;
-        box-shadow: 0px 0px 1px 1px @odoo-brand-secondary;
+        background-color: $o-tooltip-background-color;
+        color: $o-tooltip-color;
+        border-radius: $border-radius-base;
+        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/less/ui.less b/addons/web/static/src/scss/ui.scss
index 0a387331031..8911b4f10ab 100644
--- a/addons/web/static/src/less/ui.less
+++ b/addons/web/static/src/scss/ui.scss
@@ -3,9 +3,9 @@
 }
 
 .o_text_overflow {
-    .o-text-overflow();
+    @include o-text-overflow;
 }
 
 .ui-autocomplete {
-    z-index: @zindex-modal + 1;
+    z-index: $zindex-modal + 1;
 }
diff --git a/addons/web/static/src/less/ui_extra.less b/addons/web/static/src/scss/ui_extra.scss
index 0d97c09092e..0d97c09092e 100644
--- a/addons/web/static/src/less/ui_extra.less
+++ b/addons/web/static/src/scss/ui_extra.scss
diff --git a/addons/web/static/src/scss/utils.scss b/addons/web/static/src/scss/utils.scss
new file mode 100644
index 00000000000..a0dae170507
--- /dev/null
+++ b/addons/web/static/src/scss/utils.scss
@@ -0,0 +1,455 @@
+///
+/// This file regroups the odoo mixins. They are available in every asset bundle.
+///
+
+// ------------------------------------------------------------------
+// Caret
+// ------------------------------------------------------------------
+@mixin utils-caret-boilerplate {
+    content: "";
+    display: inline-block;
+    width: 0;
+    height: 0;
+    vertical-align: middle;
+}
+
+// ------------------------------------------------------------------
+// Vendor prefixes
+// ------------------------------------------------------------------
+// Flex
+@mixin o-flex-display {
+    display: -ms-flexbox;
+    display: -moz-box;
+    display: -webkit-box;
+    display: -webkit-flex;
+
+    display: flex;
+}
+@mixin o-inline-flex-display {
+    display: -ms-inline-flexbox;
+    display: -moz-inline-box;
+    display: -webkit-inline-box;
+    display: -webkit-inline-flex;
+
+    display: inline-flex;
+}
+@mixin o-flex-flow($direction, $wrap) {
+    -ms-flex-flow: $direction $wrap;
+    -moz-flex-flow: $direction $wrap;
+    -webkit-flex-flow: $direction $wrap;
+
+    flex-flow: $direction $wrap;
+}
+@mixin o-flex($grow, $schrink, $basis) {
+    -ms-flex: $grow $schrink $basis;
+    -moz-flex: $grow $schrink $basis;
+    -webkit-box-flex: $grow;
+    -webkit-flex: $grow $schrink $basis;
+
+    flex: $grow $schrink $basis;
+}
+@mixin o-justify-content($justify) {
+    -moz-justify-content: $justify;
+    -webkit-justify-content: $justify;
+
+    justify-content: $justify;
+}
+@mixin o-align-content($align) {
+    -webkit-align-content: $align;
+
+    align-content: $align;
+}
+@mixin o-align-items($align) {
+    -webkit-align-items: $align;
+
+    align-items: $align;
+}
+@mixin o-align-self($align) {
+    -webkit-align-self: $align;
+
+    align-self: $align;
+}
+
+// Background-size
+@mixin o-background-size($size) {
+    -webkit-background-size: $size;
+    -moz-background-size: $size;
+    -o-background-size: $size;
+    background-size: $size;
+}
+
+// ------------------------------------------------------------------
+// Select Appearance
+// ------------------------------------------------------------------
+@mixin o-appearance($value) {
+    -webkit-appearance: $value;
+    -moz-appearance: $value;
+    appearance: $value;
+}
+
+// ------------------------------------------------------------------
+// Transform
+// ------------------------------------------------------------------
+@mixin o-transform-origin($x: 50%, $y: 50%, $z: 0) {
+    -ms-transform-origin: $x $y $z;
+    -webkit-transform-origin: $x $y $z;
+    -moz-transform-origin: $x $y $z;
+    transform-origin: $x $y $z;
+}
+
+// ------------------------------------------------------------------
+// Animation
+// ------------------------------------------------------------------
+@mixin o-animation($name: none, $duration: 0s, $timing-function: ease, $delay: 0s, $iteration-count: 1, $direction: normal, $fill-mode: none, $play-state: running) {
+    -webkit-animation: $name $duration $timing-function $delay $iteration-count $direction $fill-mode $play-state;
+    -moz-animation: $name $duration $timing-function $delay $iteration-count $direction $fill-mode $play-state;
+    -o-animation: $name $duration $timing-function $delay $iteration-count $direction $fill-mode $play-state;
+    animation: $name $duration $timing-function $delay $iteration-count $direction $fill-mode $play-state;
+}
+
+// ------------------------------------------------------------------
+// Transition
+// ------------------------------------------------------------------
+@mixin o-transition($property: all, $duration: 0s, $timing-function: ease, $transition-delay: 0s) {
+    -webkit-transition: $property $duration $timing-function $transition-delay;
+    -moz-transition: $property $duration $timing-function $transition-delay;
+    -o-transition: $property $duration $timing-function $transition-delay;
+    transition: $property $duration $timing-function $transition-delay;
+}
+
+// ------------------------------------------------------------------
+// Columns
+// ------------------------------------------------------------------
+@mixin o-columns($width: auto, $col: auto) {
+    -webkit-columns: $width $col;
+    -moz-columns: $width $col;
+    columns: $width $col;
+}
+
+// ------------------------------------------------------------------
+// Position absolute
+// ------------------------------------------------------------------
+@mixin o-position-absolute($top: auto, $right: auto, $bottom: auto, $left: auto) {
+    position: absolute;
+    top: $top;
+    left: $left;
+    bottom: $bottom;
+    right: $right;
+}
+
+// ------------------------------------------------------------------
+// Text overflow
+// ------------------------------------------------------------------
+@mixin o-text-overflow($display: inline-block, $max-width: 100%) {
+    display: $display;
+    max-width: $max-width;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    vertical-align: top; // To update display context changed by overflow:hidden
+}
+
+// ------------------------------------------------------------------
+// Gradients
+// ------------------------------------------------------------------
+@mixin o-linear-gradient($deg: 45deg, $start-color: #555, $end-color: #333) {
+    background-repeat: repeat-x;
+    background-image: -webkit-linear-gradient($deg, $start-color, $end-color);
+    background-image: -o-linear-gradient($deg, $start-color, $end-color);
+    background-image: linear-gradient($deg, $start-color, $end-color);
+}
+@mixin o-vertical-gradient($startColor: #555, $endColor: #333) {
+    background-color: mix($startColor, $endColor);
+    background-image: -webkit-gradient(linear, left top, left bottom, from($startColor), to($endColor));
+    background-image: -webkit-linear-gradient(top, $startColor, $endColor);
+    background-image: -moz-linear-gradient(top, $startColor, $endColor);
+    background-image: -ms-linear-gradient(top, $startColor, $endColor);
+    background-image: -o-linear-gradient(top, $startColor, $endColor);
+    background-image: linear-gradient(to bottom, $startColor, $endColor);
+}
+@mixin o-skew-gradient($startColor: #555, $endColor: #333) {
+    background-color: $endColor;
+    background: -moz-linear-gradient(135deg, $endColor, $startColor);
+    background: -o-linear-gradient(135deg, $startColor, $endColor);
+    background: -webkit-gradient(linear, left top, right bottom, from($startColor), to($endColor));
+    background: -ms-linear-gradient(top, $startColor, $endColor);
+}
+
+// ------------------------------------------------------------------
+// Transform
+// ------------------------------------------------------------------
+@mixin o-transform($transform) {
+    -webkit-transform: $transform;
+    -moz-transform: $transform;
+    -ms-transform: $transform;
+    -o-transform: $transform;
+    transform: $transform;
+}
+
+// ------------------------------------------------------------------
+// Hovering effects
+// ------------------------------------------------------------------
+@mixin o-hover-opacity($default-opacity: 0.5, $hover-opacity: 1) {
+    opacity: $default-opacity;
+
+    &:hover, &:focus, &.focus {
+        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;
+
+    &:hover, &:focus, &.focus {
+        color: $hover-color;
+    }
+}
+
+// ------------------------------------------------------------------
+// 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);
+    }
+}
+
+// ------- 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/less/views.less b/addons/web/static/src/scss/views.scss
index 0c7936fc570..e3562026ffe 100644
--- a/addons/web/static/src/less/views.less
+++ b/addons/web/static/src/scss/views.scss
@@ -1,6 +1,6 @@
 /**
  * This file regroups the rules which apply on elements which are shared between
- * all renderers. For field default rules, see the fields.less file.
+ * all renderers. For field default rules, see the fields.scss file.
  */
 
 // Invisible modifier (can be inside the view, the button area, ...)
@@ -9,7 +9,7 @@
 }
 
 // Status
-// This should normally be put in fields.less but these classes are used outside
+// This should normally be put in fields.scss but these classes are used outside
 // of `.o_field_widget` so it needs to be placed at an upper level.
 .o_status {
     display: inline-block;
@@ -18,13 +18,13 @@
     border-radius: 6px;
     vertical-align: middle;
 
-    background-color: @gray-lighter-dark;
+    background-color: $gray-lighter-dark;
 
     &.o_status_green {
-        background-color: @brand-success;
+        background-color: $brand-success;
     }
     &.o_status_red {
-        background-color: @brand-danger;
+        background-color: $brand-danger;
     }
 }
 
@@ -40,10 +40,10 @@
 
 // No content helper
 .o_view_nocontent {
-    .o-position-absolute(20%, 0, 0, 0);        
+    @include o-position-absolute(20%, 0, 0, 0);
     pointer-events: none;
     z-index: 1;
-    
+
     .o_nocontent_help {
         pointer-events: auto;
         max-width: 650px;
@@ -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%;
         }
@@ -65,7 +65,7 @@
             cursor: pointer;
         }
 
-        .o-init-image() {
+        @mixin o-init-image {
             content: "";
             display: block;
             margin: auto;
@@ -73,20 +73,20 @@
         }
 
         .o_view_nocontent_smiling_face:before {
-            .o-init-image();
-            .size(120px, 140px);
+            @include o-init-image;
+            @include size(120px, 140px);
             background: transparent url(/web/static/src/img/smiling_face.svg) no-repeat center;
         }
 
         .o_view_nocontent_neutral_face:before {
-            .o-init-image();
-            .size(120px, 140px);
+            @include o-init-image;
+            @include size(120px, 140px);
             background: transparent url(/web/static/src/img/neutral_face.svg) no-repeat center;
         }
 
         .o_view_nocontent_empty_folder:before {
-            .o-init-image();
-            .size(120px, 80px);
+            @include o-init-image;
+            @include size(120px, 80px);
             margin-top: 30px;
             margin-bottom: 30px;
             background: transparent url(/web/static/src/img/empty_folder.svg) no-repeat center;
@@ -94,8 +94,8 @@
 
         .o_empty_custom_dashboard {
             min-height: 327px;
-            margin-left: -@grid-gutter-width/2;
-            margin-top: -@grid-gutter-width/2;
+            margin-left: -$grid-gutter-width/2;
+            margin-top: -$grid-gutter-width/2;
             padding: 100px 0 0 137px;
             background: transparent url(/web/static/src/img/graph_background.png) no-repeat 0 0;
         }
diff --git a/addons/web/static/src/less/web_calendar.less b/addons/web/static/src/scss/web_calendar.scss
index 5179552b3b6..7091cbc3c98 100644
--- a/addons/web/static/src/less/web_calendar.less
+++ b/addons/web/static/src/scss/web_calendar.scss
@@ -1,20 +1,18 @@
-@nb-calendar-colors: 24;
-
 @keyframes backgroundfade {
-    from {background-color: fade(@odoo-brand-primary, 50%);}
+    from {background-color: rgba($o-brand-primary, 0.5);}
     to {background-color: #f5f5f5;}
 }
 
 .o_calendar_container {
     height: 100%;
-    .o-webclient-padding(@top: @odoo-horizontal-padding/2, @bottom: @odoo-horizontal-padding/2);
-    .o-flex-display();
+    @include o-webclient-padding($top: $o-horizontal-padding/2, $bottom: $o-horizontal-padding/2);
+    @include o-flex-display;
 
-    .calendar_color_loop(@index) when (@index < @nb-calendar-colors+1) {
-        .o_calendar_color_@{index} {
+    @for $index from 1 through $o-nb-calendar-colors {
+        .o_calendar_color_#{$index} {
             color: #0D0D0D;
-            background-color: spin(rgb(255, 192, 192), 360/(@nb-calendar-colors+1) * @index);
-            border-color:  spin(rgb(255, 192, 192), 360/(@nb-calendar-colors+1) * @index);
+            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;
@@ -24,30 +22,23 @@
                 color: #666 !important;
             }
         }
-        .calendar_color_loop(@index + 1);
-    }
-    .calendar_color_loop(1);
-
-    .underline_color_loop(@index) when (@index < @nb-calendar-colors+1) {
-        .o_underline_color_@{index} {
-            border-bottom: 4px solid spin(rgba(255, 192, 192, 0.7), 360/(@nb-calendar-colors+1) * @index);
+        .o_underline_color_#{$index} {
+            border-bottom: 4px solid adjust-hue(rgba(255, 192, 192, 0.7), (360/($o-nb-calendar-colors+1) * $index) * 1deg);
         }
-        .underline_color_loop(@index + 1);
     }
-    .underline_color_loop(1);
 
     .o_calendar_view {
-        .o-flex(1, 1, auto);
+        @include o-flex(1, 1, auto);
         min-width: 0;
 
         .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;
@@ -71,19 +62,19 @@
     }
 
     .o_calendar_sidebar_container {
-        .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%);
             }
         }
 
         .o_calendar_sidebar_toggler {
-            .o-position-absolute(@top: 0, @right: 0);
+            @include o-position-absolute($top: 0, $right: 0);
             cursor: pointer;
             padding: 6px;
             z-index: 1;
@@ -95,7 +86,7 @@
         .o_calendar_sidebar {
             width: 250px;
             margin-left: 8px;
-            background: @odoo-view-background-color;
+            background: $o-view-background-color;
         }
 
         .ui-datepicker {
@@ -106,18 +97,18 @@
             padding: 0;
 
             .ui-widget-header {
-                .o-flex-display();
+                @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 {
-                    .o-flex(0, 0, auto);
+                    @include o-flex(0, 0, auto);
                     position: static;
                     cursor: pointer;
                     padding: 2px;
                     text-align: center;
-                    color: @odoo-main-text-color;
+                    color: $o-main-text-color;
                     &.ui-state-hover {
                         background: none;
                         border: none;
@@ -142,7 +133,7 @@
                     }
                 }
                 .ui-datepicker-title {
-                    .o-flex(0, 0, auto);
+                    @include o-flex(0, 0, auto);
                     order: 2;
                     display: inline-block;
                     margin: 0 10px;
@@ -151,31 +142,31 @@
             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: fade(@odoo-brand-primary, 50%);
-                        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;
                 }
             }
@@ -213,7 +204,7 @@
         padding: 0;
     }
 }
-@media (max-width: @screen-xs-max) {
+@media (max-width: $screen-xs-max) {
     .o_control_panel {
         .o_calendar_button_today {
             float: right;
diff --git a/addons/web/static/src/less/webclient.less b/addons/web/static/src/scss/webclient.scss
index e1344ee49e6..b0f38b37fea 100644
--- a/addons/web/static/src/less/webclient.less
+++ b/addons/web/static/src/scss/webclient.scss
@@ -3,19 +3,17 @@
 // ------------------------------------------------------------------
 .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%;
 
-    .o-position-absolute(@navbar-height, 0px);
+    @include o-position-absolute($navbar-height, 0px);
     z-index: 1100; // Bootstrap modal z-index is 1050
 
     .o_notification {
@@ -24,19 +22,19 @@
 
         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 {
-            .o-position-absolute(5px, 5px);
+            @include o-position-absolute(5px, 5px);
             color: rgba(0, 0, 0, 0.3);
             text-decoration: none;
         }
 
         .o_notification_title {
-            .o-flex-display();
-            .o-align-items(center);
+            @include o-flex-display;
+            @include o-align-items(center);
 
             border-bottom: 1px solid rgba(0, 0, 0, 0.1);
             padding: 10px 10px 10px 20px;
@@ -56,7 +54,7 @@
 
         &.o_error {
             color: white;
-            background-color: @notification-error-bg-color;
+            background-color: $o-notification-error-bg-color;
         }
     }
 }
@@ -69,10 +67,6 @@
     outline: none;
 }
 
-.oe_highlight {
-    .btn-primary;
-}
-
 // Boolean Toggle widget
 div.o_boolean_toggle {
     position: relative;
@@ -107,30 +101,30 @@ div.o_boolean_toggle {
     }
 
     > input:checked + .slider {
-        background-color: @odoo-brand-optional;
+        background-color: $o-brand-optional;
 
         &:before {
-            .translate(14px; 0px);
+            @include translate(14px, 0px);
         }
     }
 }
 
 // Full bg colors (bootstrap extension)
 .bg-success-full {
-    background-color: @brand-success;
+    background-color: $brand-success;
 }
 .bg-warning-full {
-    background-color: @brand-warning;
+    background-color: $brand-warning;
 }
 .bg-danger-full {
-    background-color: @brand-danger;
+    background-color: $brand-danger;
 }
 .bg-info-full {
-    background-color: @brand-info;
+    background-color: $brand-info;
 }
 
 .o_web_accesskey_overlay {
-    font-family: @font-family-sans-serif;
+    font-family: $font-family-sans-serif;
     position: absolute;
     width: 100%;
     height: 100%;
@@ -141,4 +135,4 @@ div.o_boolean_toggle {
     justify-content: center;
     display: flex;
     align-items: center;
-}
\ No newline at end of file
+}
diff --git a/addons/web/static/src/less/webclient_extra.less b/addons/web/static/src/scss/webclient_extra.scss
index 82798437672..cc87e526f8d 100644
--- a/addons/web/static/src/less/webclient_extra.less
+++ b/addons/web/static/src/scss/webclient_extra.scss
@@ -7,8 +7,8 @@
     outline: none;
 }
 .o_input {
-    border: 1px solid @odoo-form-lightsecondary;
-    border-radius: @border-radius-base;
+    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;
@@ -41,6 +41,11 @@ select {
 // User menu in navbar
 //------------------------------------------------------------------------------
 #oe_main_menu_navbar .oe_user_menu_placeholder .o_user_menu .oe_topbar_name {
-    .o-text-overflow();
+    @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/less/webclient_layout.less b/addons/web/static/src/scss/webclient_layout.scss
index f876d8b3527..f811df48802 100644
--- a/addons/web/static/src/less/webclient_layout.less
+++ b/addons/web/static/src/scss/webclient_layout.scss
@@ -1,8 +1,7 @@
-@odoo-submenu-width: 220px;
 
 .o_web_client {
-    .o-flex-display();
-    .o-flex-flow(column, nowrap);
+    @include o-flex-display;
+    @include o-flex-flow(column, nowrap);
     overflow: hidden;
 
     &.o_fullscreen {
@@ -16,7 +15,7 @@
 
 
     .navbar {
-        .o-flex(0, 0, auto);
+        @include o-flex(0, 0, auto);
 
         li > a {
             padding: 4px 8px;
@@ -31,20 +30,20 @@
     }
 
     > .o_main {
-        .o-flex(1, 1, auto);
-        .o-flex-display();
+        @include o-flex(1, 1, auto);
+        @include o-flex-display;
         min-height: 0; // Allow flex to shrink this element as much as it wants
         height: 100%;
 
         .o_sub_menu {
-            .o-flex(0, 0, @odoo-submenu-width);
-            .o-flex-display();
-            .o-flex-flow(column, nowrap);
-            border-right: 1px solid darken(@odoo-control-panel-background-color, 20%);
-            background-color: @odoo-control-panel-background-color;
+            @include o-flex(0, 0, 220px);
+            @include o-flex-display;
+            @include o-flex-flow(column, nowrap);
+            border-right: 1px solid darken($o-control-panel-background-color, 20%);
+            background-color: $o-control-panel-background-color;
 
             .o_sub_menu_logo {
-                .o-flex(0, 0, auto);
+                @include o-flex(0, 0, auto);
                 text-align: center;
                 position: relative;
 
@@ -68,20 +67,20 @@
             }
 
             .o_sub_menu_content {
-                .o-flex(1, 1, auto);
+                @include o-flex(1, 1, auto);
                 height:100%;
                 overflow-y: auto;
 
                 .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;
@@ -98,7 +97,7 @@
                         }
                     }
                     .oe_menu_text {
-                        .o-text-overflow();
+                        @include o-text-overflow;
                         max-width: 85%;
                         margin-top: 1px;
                     }
@@ -129,34 +128,34 @@
             }
 
             .o_sub_menu_footer {
-                .o-flex(0, 0, auto);
+                @include o-flex(0, 0, auto);
                 text-align: center;
 
                 > a {
                     font-weight: bold;
                     > span {
-                        color: @odoo-color-pink;
+                        color: $o-color-pink;
                     }
                 }
             }
         }
 
         .o_main_content {
-            .o-flex(1, 1, auto);
-            .o-flex-display();
-            .o-flex-flow(column, nowrap);
+            @include o-flex(1, 1, auto);
+            @include o-flex-display;
+            @include o-flex-flow(column, nowrap);
 
             .o_control_panel {
-                .o-flex(0, 0, auto);
+                @include o-flex(0, 0, auto);
             }
             .o_content {
-                .o-flex(1, 1, auto);
+                @include o-flex(1, 1, auto);
                 height: 100%;
                 overflow: auto;
                 position: relative;
 
                 > .o_view_controller {
-                    .o-position-absolute(0, 0, 0, 0);  // Get the 100% height of its flex parent
+                    @include o-position-absolute(0, 0, 0, 0);  // Get the 100% height of its flex parent
                     height: 100%;
                 }
             }
diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index 44412379a93..957e5ce6953 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -318,7 +318,7 @@
 <t t-name="Sidebar">
     <t t-foreach="widget.sections" t-as="section">
         <div class="btn-group o_dropdown">
-            <button t-if="section.name != 'buttons'" class="o_dropdown_toggler_btn btn btn-sm dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
+            <button t-if="section.name != 'buttons'" class="o_dropdown_toggler_btn btn btn-sm btn-link btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                 <t t-if="section.name == 'files'" t-raw="widget.items[section.name].length || ''"/>
                 <t t-esc="section.label"/> <span class="caret"/>
             </button>
@@ -1026,7 +1026,7 @@
     <ul class="dropdown-menu o_searchview_autocomplete" role="menu"></ul>
 </t>
 <div t-name="SearchView.FilterMenu" class="btn-group o_dropdown">
-    <button class="o_dropdown_toggler_btn btn btn-sm dropdown-toggle" data-toggle="dropdown" aria-expanded="false" tabindex="-1">
+    <button class="o_dropdown_toggler_btn btn btn-sm btn-link btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false" tabindex="-1">
         <span class="fa fa-filter"/> Filters <span class="caret"/>
     </button>
     <ul class="dropdown-menu o_filters_menu" role="menu">
@@ -1138,7 +1138,7 @@
     </select>
 </t>
 <div t-name="SearchView.GroupByMenu" class="btn-group hidden-xs o_dropdown">
-    <button class="o_dropdown_toggler_btn btn btn-sm dropdown-toggle" data-toggle="dropdown" aria-expanded="false" tabindex="-1">
+    <button class="o_dropdown_toggler_btn btn btn-sm btn-link btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false" tabindex="-1">
         <span class="fa fa-bars"/> Group By <span class="caret"/>
     </button>
     <ul class="dropdown-menu o_group_by_menu" role="menu">
@@ -1159,7 +1159,7 @@
     </li>
 </t>
 <div t-name="SearchView.FavoriteMenu" class="btn-group o_dropdown">
-    <button class="o_dropdown_toggler_btn btn btn-sm dropdown-toggle" data-toggle="dropdown" aria-expanded="false" tabindex="-1">
+    <button class="o_dropdown_toggler_btn btn btn-sm btn-link btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false" tabindex="-1">
         <span class="fa fa-star"/> Favorites <span class="caret"/>
     </button>
     <ul class="dropdown-menu o_favorites_menu" role="menu">