[MERGE] *: migrate Bootstrap 3.3.7 to 4.1.3

See sub-commits for details.

task-49280
Closes https://github.com/odoo/odoo/pull/25045

51 files changed, 809 insertions, 902 deletions

diff --git a/addons/web/static/src/scss/animation.scss b/addons/web/static/src/scss/animation.scss
index 92097a23298..d65a509bcad 100644
--- a/addons/web/static/src/scss/animation.scss
+++ b/addons/web/static/src/scss/animation.scss
@@ -144,19 +144,3 @@
             transform: scale3d(1, 1, 1);
   }
 }
-
-/************** MIXINS for ANIMATIONS **************/
-@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;
-    @include o-transform-origin;
-    @include o-animation(markAnim, 1s, ease-in-out, 0s, 1, normal, forwards);
-
-    @media (max-width: $screen-sm-max) {
-        left: 40%;
-        font-size: 30vw;
-    }
-}
diff --git a/addons/web/static/src/scss/base_settings.scss b/addons/web/static/src/scss/base_settings.scss
index 7cd25c7e578..436298872da 100644
--- a/addons/web/static/src/scss/base_settings.scss
+++ b/addons/web/static/src/scss/base_settings.scss
@@ -1,16 +1,16 @@
 // MIXINS
-@mixin o-base-settings-horizontal-padding($padding-base: $padding-small-vertical) {
+@mixin o-base-settings-horizontal-padding($padding-base: $input-btn-padding-y-sm) {
     padding: $padding-base $o-horizontal-padding;
 
-    @media (min-width: $screen-lg-min) {
+    @include media-breakpoint-up(xl) {
         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 {
-    @include o-flex-display;
-    @include o-flex-flow(column, nowrap);
+    display: flex;
+    flex-flow: column nowrap;
     padding: 0px;
 }
 
@@ -18,20 +18,20 @@
 .o_base_settings {
     height: 100%;
 
-    @media (max-width: $screen-xs-max) {
-        @include o-flex-flow(column, nowrap);
+    @include media-breakpoint-down(sm) {
+        flex-flow: column nowrap;
     }
 
     .o_control_panel {
         .o_panel {
-            @include o-flex-display;
-            @include o-flex-flow(row, wrap);
+            display: flex;
+            flex-flow: row wrap;
             margin-bottom: $o-sheet-vpadding*0.5;
             width: 100%;
 
             .title, .o_setting_search {
-                @include o-flex(1, 0, auto);
-                width: $screen-xs-min*0.5;
+                flex: 1 0 auto;
+                width: map-get($o-extra-grid-breakpoints, vsm) / 2;
             }
 
             .o_setting_search {
@@ -41,15 +41,15 @@
                     height: 28px;
                     padding: 0px;
                     border: 0px;
-                    border-bottom: 1px solid $gray-lighter-darker;
-                    border-color: $gray;
+                    border-bottom: 1px solid gray('400');
+                    border-color: gray('700');
                     box-shadow: none;
                     font-weight: 500;
                 }
 
                 .searchIcon {
                     @include o-position-absolute(4px, 0);
-                    color: $gray;
+                    color: gray('700');
                 }
             }
         }
@@ -60,7 +60,7 @@
             border: 0;
 
             .btn-primary, .btn-link  {
-                padding: $padding-small-vertical $padding-small-horizontal;
+                padding: $btn-padding-y-sm $btn-padding-x-sm;
             }
 
             .btn-link {
@@ -70,34 +70,34 @@
     }
 
     .o_setting_container {
-        @include o-flex-display;
-        @include o-flex(1, 1, auto);
+        display: flex;
+        flex: 1 1 auto;
 
         overflow: auto;
 
-        @media (max-width: $screen-xs-max) {
-            @include o-flex-flow(column, nowrap);
+        @include media-breakpoint-down(sm) {
+            flex-flow: column nowrap;
         }
 
         .settings_tab {
-            @include o-flex-display;
-            @include o-flex(0, 0, auto);
-            @include o-flex-flow(column, nowrap);
-            background: $gray-dark;
+            display: flex;
+            flex: 0 0 auto;
+            flex-flow: column nowrap;
+            background: gray('900');
             overflow: auto;
             padding-top: $o-horizontal-padding*0.5;
 
-            @media (max-width: $screen-xs-max) {
-                @include o-flex(0, 0, $o-base-settings-mobile-tabs-height);
-                @include o-inline-flex-display;
+            @include media-breakpoint-down(sm) {
+                flex: 0 0 $o-base-settings-mobile-tabs-height;
+                display: inline-flex;
                 position: relative;
                 overflow: hidden;
                 padding: 0;
             }
 
             .selected {
-                background-color: $gray-darker;
-                box-shadow: inset 3px 0 0 $o-brand-optional;
+                background-color: gray('900');
+                box-shadow: inset 3px 0 0 $o-brand-primary;
 
                 .app_name {
                     color: white;
@@ -105,10 +105,10 @@
             }
 
             .tab {
-                @include o-flex-display;
+                display: flex;
                 padding: 0 $o-horizontal-padding*2 0 $o-horizontal-padding;
                 height: 40px;
-                color: $gray-lighter-darker;
+                color: gray('400');
                 font-size: 13px;
                 line-height: 40px;
                 cursor: pointer;
@@ -119,7 +119,7 @@
                 }
 
                 // Mobile Tabs
-                @media (max-width: $screen-xs-max) {
+                @include media-breakpoint-down(sm) {
                     display: block;
                     @include o-position-absolute($left:100%);
                     @include size(auto, $o-base-settings-mobile-tabs-height);
@@ -128,8 +128,8 @@
                     font-size: 14px;
                     font-weight: 500;
                     line-height: inherit;
-                    @include o-transition(0.2s, all);
-                    @include o-transform(translate3d(0,0,0));
+                    transition: 0.2s all ease 0s;
+                    transform: translate3d(0,0,0);
 
                     .app_name {
                         display: block;
@@ -138,11 +138,11 @@
 
                     &:after {
                         content: '';
-                        background: $o-brand-optional;
+                        background: $o-brand-primary;
                         opacity: 0;
                         @include o-position-absolute(auto, 0, 0, 0);
                         @include size(100%, 3px);
-                        @include o-transition(0.2s, all);
+                        transition: 0.2s all ease 0s;
                     }
 
                     &.previous, &.before {
@@ -171,7 +171,7 @@
 
         .settings {
             position: relative;
-            @include o-flex(1, 1, 100%);
+            flex: 1 1 100%;
             background-color: $o-view-background-color;
             overflow: auto;
 
@@ -179,7 +179,7 @@
                 h2 {
                     margin-bottom: 0;
                     @include o-base-settings-horizontal-padding;
-                    background-color: $gray-lighter;
+                    background-color: gray('200');
                     font-size: 15px;
                     font-weight: bold;
 
@@ -190,19 +190,20 @@
                 }
 
                 .o_settings_container {
-                    max-width: $screen-md-min; // Provide a maximum container size to ensure readability
+                    max-width: map-get($grid-breakpoints, lg); // Provide a maximum container size to ensure readability
                     @include o-base-settings-horizontal-padding(0);
                 }
             }
 
             .settingSearchHeader {
-                @include o-flex-display;
+                display: flex;
                 margin: 30px 0 10px;
                 @include o-base-settings-horizontal-padding;
-                background-color: $gray-lighter;
+                background-color: gray('200');
 
                 .icon {
-                    @include square(25px);
+                    width: 25px;
+                    height: 25px;
                     margin-right: 10px;
                 }
 
diff --git a/addons/web/static/src/scss/bootstrap_overridden.scss b/addons/web/static/src/scss/bootstrap_overridden.scss
index 9701ead0539..8d0cf644b62 100644
--- a/addons/web/static/src/scss/bootstrap_overridden.scss
+++ b/addons/web/static/src/scss/bootstrap_overridden.scss
@@ -1,85 +1,91 @@
-// ------------------------------------------------------------------
-// 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
+///
+/// This file is a copy of the bootstrap _variables.scss file where all the
+/// left-untouched variables definition have been removed.
+///
+
+//
+// Color system
+//
+
+// All of those are BS default
+$white:    #fff !default;
+$gray-100: $o-gray-100 !default;
+$gray-200: #e9ecef !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #adb5bd !default;
+$gray-600: #6c757d !default;
+$gray-700: #495057 !default;
+$gray-800: #343a40 !default;
+$gray-900: #212529 !default;
+$black:    #000 !default;
+
+$primary: $o-brand-primary;
+$secondary: $white;
+
+// Body
+//
+// Settings for the `<body>` element.
+
 $body-bg: $o-brand-secondary;
-$text-color: $o-main-text-color;
-$link-color: $o-brand-optional;
+$body-color: $o-main-text-color;
+
+// Links
+//
+// Style anchor elements.
+
 $link-hover-decoration: none;
 
-//== Typography
+// Grid columns
+//
+// Set the number of columns and specify the width of the gutters.
+
+$grid-gutter-width: $o-horizontal-padding * 2;
+
+// Components
+//
+// Define common padding and border radius sizes and more.
+
+$border-radius: 3px;
+
+$component-active-color: $o-brand-primary;
+$component-active-bg: $gray-200;
+
+// Fonts
+//
+// Font, line-height, and color for body text, headings, and more.
+
 $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;
+$h1-font-size: $o-font-size-base * 2.0;
+$h2-font-size: $o-font-size-base * 1.5;
+$h3-font-size: $o-font-size-base * 1.3;
+$h4-font-size: $o-font-size-base * 1.2;
+$h5-font-size: $o-font-size-base * 1.1;
 
-//== Badges
-$badge-bg: $o-brand-optional;
-$badge-color: white;
-$badge-line-height: $o-line-height-base;
-$badge-font-weight: normal;
+$headings-font-weight: bold;
+
+// Tables
+//
+// Customizes the `.table` component with basic values, each used across all table variations.
+
+$table-accent-bg: #EFEFF8; // FIXME: expose
+$table-hover-bg: darken($table-accent-bg, 5%);
+
+// Dropdowns
+//
+// Dropdown menu container and contents.
+
+$dropdown-border-color: $gray-300;
 
-//== 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;
+$dropdown-link-hover-color: $gray-900;
+$dropdown-link-hover-bg: $gray-200;
+
+// Z-index master list
 
 // 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
@@ -90,31 +96,45 @@ $modal-title-padding: $o-horizontal-padding;
 // 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;
+// $zindex-modal-backdrop: $zindex-modal;
+
+// Navs
+
+$nav-tabs-link-active-bg: $white;
 
-//== 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/";
+$nav-pills-link-active-color: $white;
+$nav-pills-link-active-bg: $o-brand-primary;
+
+// Navbar
+
+// FIXME $navbar-height ? $navbar-margin-bottom ? $navbar-inverse-* ? $navbar-border-radius ?
+
+// Badges
+
+// FIXME $badge-bg, $badge-color, $badge-line-height ?
+$badge-font-weight: normal;
+
+// Modals
+
+// Padding applied to the modal body
+$modal-inner-padding: $o-horizontal-padding;
+
+// FIXME $modal-title-padding ?
+
+$modal-lg: 980px;
+$modal-md: 650px;
+
+// Breadcrumbs
+
+$breadcrumb-padding-y: 0;
+$breadcrumb-padding-x: 0;
+$breadcrumb-margin-bottom: 0;
+
+$breadcrumb-bg: $o-control-panel-background-color;
+// FIXME $breadcrumb-color ?
+$breadcrumb-active-color: #777777;
+
+// FIXME $icon-font-path ?
diff --git a/addons/web/static/src/scss/bootstrap_overridden_frontend.scss b/addons/web/static/src/scss/bootstrap_overridden_frontend.scss
index e69de29bb2d..19ced6c9d8f 100644
--- a/addons/web/static/src/scss/bootstrap_overridden_frontend.scss
+++ b/addons/web/static/src/scss/bootstrap_overridden_frontend.scss
@@ -0,0 +1,3 @@
+
+$black: black;
+$white: white;
diff --git a/addons/web/static/src/scss/bs_mixins_overrides.scss b/addons/web/static/src/scss/bs_mixins_overrides.scss
new file mode 100644
index 00000000000..fd08c94a217
--- /dev/null
+++ b/addons/web/static/src/scss/bs_mixins_overrides.scss
@@ -0,0 +1,38 @@
+//------------------------------------------------------------------------------
+// Bootstrap Mixins and Functions Extensions
+// Those will affect the way bootstrap is generated wherever bootstrap is used
+//------------------------------------------------------------------------------
+
+// Override background utilities so that they come with a default contrasted
+// color (especially useful in the frontend editor for example). Also modifies
+// the way .text-muted elements are rendered in those environments.
+@mixin bg-variant($parent, $color, $text-color: null) {
+    #{$parent} {
+        $-yiq-color: if($text-color, $text-color, color-yiq($color));
+        background-color: $color !important;
+        color: $-yiq-color; // not important so that text utilities still work
+
+        .text-muted {
+            color: rgba($-yiq-color, 0.4) !important;
+        }
+    }
+    a#{$parent},
+    button#{$parent} {
+        $-darken-color: darken($color, 10%);
+        @include hover-focus {
+            background-color: $-darken-color !important;
+            color: if($text-color, $text-color, color-yiq($-darken-color));
+        }
+    }
+}
+@mixin bg-gradient-variant($parent, $color, $text-color: null) {
+    #{$parent} {
+        $-yiq-color: if($text-color, $text-color, color-yiq($color));
+        background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x !important;
+        color: $-yiq-color;
+
+        .text-muted {
+            color: rgba($-yiq-color, 0.4) !important;
+        }
+    }
+}
diff --git a/addons/web/static/src/scss/control_panel.scss b/addons/web/static/src/scss/control_panel.scss
index 13913bdf3d5..b4f7d189f9e 100644
--- a/addons/web/static/src/scss/control_panel.scss
+++ b/addons/web/static/src/scss/control_panel.scss
@@ -1,14 +1,13 @@
 
 .o_control_panel {
-    @include o-flex-display;
-    @include o-flex-flow(row, wrap);
+    display: flex;
+    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%;
-        margin: 0px;
         font-size: 18px;
 
         > li {
@@ -36,8 +35,8 @@
     }
 
     > .o_cp_left {
-        @include o-flex-display;
-        @include o-justify-content(space-between);
+        display: flex;
+        justify-content: space-between;
         width: 50%;
         margin-top: 5px;
 
@@ -55,10 +54,10 @@
                 }
                 .o_form_binary_form span {
                     padding: 3px 25px;
-                    color: $btn-default-color;
+                    color: $o-brand-primary;
                 }
                 .o_form_binary_form:hover {
-                    background-color: $table-bg-hover;
+                    background-color: $table-hover-bg;
                 }
             }
             .o_sidebar_delete_attachment {
@@ -71,7 +70,7 @@
     }
 
     > .o_cp_right {
-        @include o-flex-display;
+        display: flex;
         width: 50%;
         margin-top: 5px;
 
@@ -79,11 +78,11 @@
             margin: auto 0 auto auto;
             padding-left: 5px;
             text-align: center;
-            @include user-select(none);
+            user-select: none;
 
             > div {
-                @include o-flex-display;
-                @include o-align-items(center);
+                display: flex;
+                align-items: center;
             }
 
             .o_pager_counter {
@@ -93,7 +92,7 @@
 
         > .o_cp_switch_buttons > .btn:first-child {
             margin-left: $o-horizontal-padding;
-            @media (max-width: $screen-xs-max) {
+            @include media-breakpoint-down(sm) {
                 margin-left: $o-horizontal-padding - 6;
             }
         }
@@ -101,11 +100,11 @@
 }
 
 .o_x2m_control_panel {
-    @include o-flex-display;
-    @include o-flex-flow(row, wrap);
+    display: flex;
+    flex-flow: row wrap;
 
     .o_cp_buttons {
-        @include o-flex-display;
+        display: flex;
         margin-right: auto;
         > div {
             margin-top: 5px;
@@ -115,7 +114,7 @@
         }
     }
     .o_cp_pager {
-        @include o-flex-display;
+        display: flex;
         margin-left: auto;
     }
 }
diff --git a/addons/web/static/src/scss/data_export.scss b/addons/web/static/src/scss/data_export.scss
index 17cec27d3a5..c03d13b355b 100644
--- a/addons/web/static/src/scss/data_export.scss
+++ b/addons/web/static/src/scss/data_export.scss
@@ -1,23 +1,23 @@
 .o_web_client .o_export {
-    @include o-flex(1, 1, auto);
-    @include o-flex-display;
-    @include o-flex-flow(column, nowrap);
+    flex: 1 1 auto;
+    display: flex;
+    flex-flow: column nowrap;
     min-height: 0;
 
     > p, > .row {
-        @include o-flex(0, 0, auto);
+        flex: 0 0 auto;
     }
 
     .o_export_panel {
-        @include o-flex(1, 1, auto);
+        flex: 1 1 auto;
         position: relative;
         min-height: 0;
 
         > div {
             height: 100%;
-            @include o-flex-display;
-            @include o-flex-flow(column, nowrap);
-            @include o-justify-content(center);
+            display: flex;
+            flex-flow: column nowrap;
+            justify-content: center;
 
             &.o_left_panel { // Needed because of chrome
                 @include o-position-absolute($top: 0, $bottom: 0, $left: 0, $right: 57%);
@@ -30,18 +30,18 @@
             }
 
             > h4, > div {
-                @include o-flex(0, 0, auto);
+                flex: 0 0 auto;
             }
 
             > button {
-                @include o-flex(0, 0, auto);
+                flex: 0 0 auto;
                 margin-top: 10px;
             }
 
             .o_left_field_panel, .o_fields_list {
                 border: 1px solid $o-brand-lightsecondary;
                 overflow: auto;
-                @include o-flex(1, 1, auto);
+                flex: 1 1 auto;
                 min-height: 0;
             }
 
@@ -49,10 +49,10 @@
                 cursor: pointer;
                 position: relative;
                 padding-left: 20px;
-                @include user-select(none);
+                user-select: none;
 
                 &.o_selected > .o_tree_column {
-                    background-color: $o-brand-primary;
+                    background-color: $o-brand-odoo;
                     color: white;
                 }
 
@@ -74,16 +74,16 @@
             }
 
             .o_save_list, .o_exported_lists {
-                @include o-flex-display;
-                @include o-align-items(baseline);
+                display: flex;
+                align-items: baseline;
 
                 > label, > button {
                     margin: 0 0 5px;
-                    @include o-flex(0, 0, auto);
+                    flex: 0 0 auto;
                 }
                 > input, > select {
                     width: 0;
-                    @include o-flex(1, 0, auto);
+                    flex: 1 0 auto;
                 }
             }
         }
diff --git a/addons/web/static/src/scss/datepicker.scss b/addons/web/static/src/scss/datepicker.scss
index d8d4ba1d520..c4df0ca2ed2 100644
--- a/addons/web/static/src/scss/datepicker.scss
+++ b/addons/web/static/src/scss/datepicker.scss
@@ -27,24 +27,29 @@
     }
 }
 
-// Need to put datetimepicker widget above everything else
-// The '.dropdown-menu' part is needed to override default bootstrap rule as
+
+// The 'div.dropdown-menu' part is needed to override default bootstrap rule as
 // this file is unfortunately placed in common assets.
-.bootstrap-datetimepicker-widget.dropdown-menu {
+div.dropdown-menu.bootstrap-datetimepicker-widget{
+    // Need to put datetimepicker widget above everything else
     z-index: $zindex-modal + 1;
+
+    // Also fix the dropdown width
+    width: auto;
+    min-width: 15rem;
 }
 
 .datepicker {
-    .table-condensed {
+    .table-sm {
         > thead {
             color: white;
-            background-color: $o-brand-primary;
+            background-color: $o-brand-odoo;
 
             > tr {
                 &:first-child {
                     th:hover {
                         color: white;
-                        background-color: darken($o-brand-primary, 10%);
+                        background-color: darken($o-brand-odoo, 10%);
                     }
                 }
 
@@ -62,12 +67,12 @@
             > tr {
                 > td {
                     &.active, .active {
-                        background-color: $o-brand-optional;
+                        background-color: $o-brand-primary;
                         border-radius: 100px;
                     }
 
                     &.today:before {
-                        border-bottom-color: $o-brand-optional;
+                        border-bottom-color: $o-brand-primary;
                     }
                 }
             }
diff --git a/addons/web/static/src/scss/domain_selector.scss b/addons/web/static/src/scss/domain_selector.scss
index 6755bed49e9..b35934973b9 100644
--- a/addons/web/static/src/scss/domain_selector.scss
+++ b/addons/web/static/src/scss/domain_selector.scss
@@ -9,12 +9,12 @@
 
     // Rows in a domain node (selector) have a minimum height and holds the control panel
     .o_domain_selector_row {
-        @include o-flex-display;
-        @include o-align-items(center);
+        display: flex;
+        align-items: center;
         min-height: $o-domain-selector-row-height;
 
         > * {
-            @include o-flex(0, 0, auto);
+            flex: 0 0 auto;
         }
 
         > .o_domain_node_control_panel {
@@ -35,7 +35,7 @@
                     padding-left: 5px;
 
                     &:hover {
-                        color: $brand-danger;
+                        color: theme-color('danger');
                     }
                 }
             }
@@ -74,7 +74,7 @@
                 display: block;
                 margin-top: 16px;
                 padding: 8px 10px 12px;
-                background: $gray-dark;
+                background: gray('900');
                 color: rgba(white, 0.5);
                 font-family: monospace;
                 font-weight: normal;
@@ -92,7 +92,7 @@
     // Rules specific to domain parts which do not contain sub-domain parts
     &.o_domain_leaf {
         &.o_read_mode {
-            @include o-inline-flex-display;
+            display: inline-flex;
             margin-right: 4px;
         }
 
@@ -119,21 +119,21 @@
         }
 
         > .o_domain_leaf_edition {
-            @include o-flex-display;
+            display: flex;
             width: 100%;
             padding: 4px ($o-domain-selector-panel-space/2) 4px 0;
 
             > * {
-                @include o-flex(1, 1, 15%); // operator select
+                flex: 1 1 15%; // operator select
                 width: auto;
                 background-color: white;
 
                 &:first-child { // field selector
-                    @include o-flex(0, 1, 55%);
+                    flex: 0 1 55%;
                 }
 
                 &:last-child { // field value
-                    @include o-flex(1, 1, 25%);
+                    flex: 1 1 25%;
                 }
 
                 + * {
@@ -146,13 +146,13 @@
             }
 
             .o_domain_leaf_value_tags {
-                @include o-flex-display;
+                display: flex;
 
                 > * {
-                    @include o-flex(0, 0, auto);
+                    flex: 0 0 auto;
                 }
                 > input {
-                    @include o-flex(1, 1, auto);
+                    flex: 1 1 auto;
                     width: 0;
                     min-width: 50px;
                 }
@@ -164,7 +164,7 @@
     }
 
     // Animation effects
-    @include o-transition(margin-bottom, .05s, ease, .05s);
+    transition: margin-bottom .05s ease .05s;
 
     &::after {
         content: "";
@@ -172,8 +172,8 @@
         display: block;
         height: $o-domain-animation-bar-height;
         max-height: 0;
-        @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);
+        background-image: linear-gradient(45deg, rgba($o-brand-primary, 0.4), rgba($o-brand-primary, 0.1));
+        transition: max-height .05s ease .05s;
     }
 
     &.o_hover_btns, &.o_hover_add_node {
@@ -191,11 +191,11 @@
 
     &.o_hover_add_node {
         margin-bottom: $o-domain-animation-bar-height;
-        @include o-transition(margin, .15s, ease, .5s);
+        transition: margin .15s ease .5s;
 
         &::after {
             max-height: $o-domain-animation-bar-height;
-            @include o-transition(max-height, .15s, ease, .5s);
+            transition: max-height .15s ease .5s;
         }
         &.o_hover_add_inset_node::after {
             left: $o-domain-selector-indent;
diff --git a/addons/web/static/src/scss/dropdown.scss b/addons/web/static/src/scss/dropdown.scss
index 7db8b2fcb3c..90deb20083f 100644
--- a/addons/web/static/src/scss/dropdown.scss
+++ b/addons/web/static/src/scss/dropdown.scss
@@ -5,7 +5,7 @@
 .ui-autocomplete { // Copy style of bootstrap dropdown
     background-image: none;
     background-color: $dropdown-bg;
-    border: 1px solid $dropdown-border;
+    border: $dropdown-border-width solid $dropdown-border-color;
     font-size: $font-size-base;
     padding: 5px 0px;
     box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.176);
@@ -21,7 +21,7 @@
 
         &.ui-state-focus {
             background-image: none;
-            background-color: $o-brand-primary;
+            background-color: $o-brand-odoo;
             border: none;
             font-weight: normal;
             margin: 0;
@@ -29,7 +29,7 @@
         &.o_m2o_dropdown_option {
             padding-left: 20px;
             > a {
-                color: $o-brand-primary;
+                color: $o-brand-odoo;
             }
         }
     }
@@ -41,7 +41,7 @@
     .o_inline_dropdown {
         position: relative;
 
-        &> .dropdown-menu {
+        & > .dropdown-menu {
             top: 0;
             left: 100%;
         }
@@ -52,9 +52,12 @@
 }
 
 @mixin dropdown-menu-mixin {
-    .open .dropdown-menu > li {
-        position: relative; // to allow absolute positionning inside the li
-        > a {
+    .show .dropdown-menu {
+        > * {
+            position: relative; // to allow absolute positionning inside the items
+        }
+        
+        .dropdown-item {
             &:focus, &:active, &:focus:active {
                 outline: none;
             }
@@ -62,11 +65,11 @@
             @extend %dropdown-li-a-padding;
         }
 
-        &.dropdown-header {
+        .dropdown-header {
             @extend %dropdown-li-a-padding;
             color: $o-main-text-color;
 
-            @media (max-width: $screen-sm-max) {
+            @include media-breakpoint-down(md) {
                 color: white;
                 text-decoration: underline;
             }
diff --git a/addons/web/static/src/scss/dropdown_extra.scss b/addons/web/static/src/scss/dropdown_extra.scss
index c14144e02d3..ca57d9561f2 100644
--- a/addons/web/static/src/scss/dropdown_extra.scss
+++ b/addons/web/static/src/scss/dropdown_extra.scss
@@ -1,9 +1,9 @@
 .ui-autocomplete .ui-menu-item {
     &.ui-state-focus {
-        background-color: $o-brand-primary;
+        background-color: $o-brand-odoo;
     }
     &.o_m2o_dropdown_option > a {
-        color: $o-brand-primary;
+        color: $o-brand-odoo;
     }
     &.ui-state-focus > a,
     &.ui-state-focus.o_m2o_dropdown_option > a {
@@ -41,7 +41,7 @@
         margin: 0;
         padding: 2px 8px;
         &:hover {
-            @include o-vertical-gradient(#f0f0fa, #eeeef6);
+            background-image: linear-gradient(to bottom, #f0f0fa, #eeeef6);
             box-shadow: none;
         }
         > a {
diff --git a/addons/web/static/src/scss/dropdown_menu.scss b/addons/web/static/src/scss/dropdown_menu.scss
index 8024783d3c2..8f5b0c1f00a 100644
--- a/addons/web/static/src/scss/dropdown_menu.scss
+++ b/addons/web/static/src/scss/dropdown_menu.scss
@@ -1,38 +1,23 @@
 .o_dropdown_menu {
 
-    > li.divider:first-child {
+    > .dropdown-divider:first-child {
         display: none;
     }
 
-    max-height: calc(100vh - 125px);
+    max-height: calc(100vh - 125px); // FIXME
     overflow: auto;
-    .o_submenu_switcher {
-    	float:right;
-        width: 25px;
-        text-align: center;
-    }
-    .o_trash_button {
-    	float:right;
-    	+ .o_submenu_switcher {
-    		margin-right: 6px;
-    	}
-    }
-    ul {
-    	list-style-type: none;
-        padding-left: 20px;
-    }
 
-    li.o_menu_item {
+    .o_menu_item {
         position: relative;
-        > a {
+        > .dropdown-item {
             color: $o-main-text-color;
-            padding-right: 25px;
+
             &:hover {
                 color: darken($o-main-text-color, 10%);
             }
         }
         &.selected {
-            > a {
+            > .dropdown-item {
                 color: darken($o-main-text-color, 10%);
                 font-weight: bold;
                 &:before {
@@ -43,7 +28,7 @@
                 }
             }
         }
-        li.divider:first-child {
+        .dropdown-divider:first-child {
             display: none;
         }
         .o_item_option {
diff --git a/addons/web/static/src/scss/fields.scss b/addons/web/static/src/scss/fields.scss
index 370fdc036b3..cbf0eec7d01 100644
--- a/addons/web/static/src/scss/fields.scss
+++ 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: theme-color('danger')!important;
+        border-color: theme-color('danger')!important; // enterprise o_required_modifier rule overrides this without !important
     }
 }
 
@@ -39,15 +39,15 @@
 
     // Flex fields (inline)
     &.o_field_many2one, &.o_field_radio, &.o_field_many2manytags, &.o_field_percent_pie, &.o_field_monetary, &.o_field_binary_file {
-        @include o-inline-flex-display;
+        display: inline-flex;
         > span, > button {
-            @include o-flex(0, 0, auto);
+            flex: 0 0 auto;
         }
     }
 
     // Dropdowns input (many2one, ...)
     .o_input_dropdown {
-        @include o-flex(1, 1, auto);
+        flex: 1 1 auto;
         position: relative;
         width: 100%;
 
@@ -75,28 +75,28 @@
     // Monetary
     &.o_field_monetary {
         &.o_input {
-            @include o-align-items(baseline);
+            align-items: baseline;
 
             > input {
                 width: 100px;
-                @include o-flex(1, 0, auto);
+                flex: 1 0 auto;
             }
         }
     }
 
     // Many2many tags
     &.o_field_many2manytags {
-        @include o-flex-flow(row, wrap);
-        @include o-align-items(baseline);
+        flex-flow: row wrap;
+        align-items: baseline;
 
         > .o_field_widget {
-            @include o-flex(1, 0, 100px);
+            flex: 1 0 100px;
             position: initial;
             max-width: 100%;
         }
 
         > .badge {
-            @include o-flex(0, 0, auto);
+            flex: 0 0 auto;
             border: 0;
             font-size: 12px;
             color: white;
@@ -119,7 +119,7 @@
                     display: inline-block;
                     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('300');
 
                     > a {
                         display: block;
@@ -225,7 +225,7 @@
 
     // Specific success color for toggle_button widget
     .fa.o_toggle_button_success {
-        color: $brand-success;
+        color: theme-color('success');
     }
 
     // Handle widget
@@ -239,21 +239,21 @@
             margin: 0px 0px 4px 4px;
             padding: 1px 6px;
             color: $o-main-color-muted;
-            border: 1px solid $o-color-silver-dark;
+            border: 1px solid gray('300');
             cursor: pointer;
             &.active {
-                color: $o-brand-optional;
-                border-color: $o-brand-optional;
+                color: $o-brand-primary;
+                border-color: $o-brand-primary;
             }
             &:hover:not(.active) {
-                color: darken($o-color-silver-dark, 30%);
-                border-color: darken($o-color-silver-dark, 30%);
+                color: darken(gray('300'), 30%);
+                border-color: darken(gray('300'), 30%);
             }
         }
     }
     // Radio buttons
     &.o_field_radio {
-        @media (max-width: $screen-xs-max) {
+        @include media-breakpoint-down(sm) {
             display: inline-block;
         }
         .o_radio_input {
@@ -261,17 +261,7 @@
         }
 
         .o_radio_item {
-            @include o-flex(0, 0, auto);
-            @include o-flex-display;
-            @include o-align-items(center);
-
-            > input {
-                @include o-flex(0, 0, auto);
-                margin: 0 $o-form-spacing-unit 0 0;
-            }
-            > label {
-                margin: 0;
-            }
+            flex: 0 0 auto;
         }
 
         &.o_horizontal {
@@ -281,7 +271,7 @@
         }
 
         &.o_vertical {
-            @include o-flex-flow(column, nowrap);
+            flex-flow: column nowrap;
             .o_radio_item {
                 margin-bottom: $o-form-spacing-unit;
             }
@@ -290,7 +280,7 @@
 
     // Percent pie
     &.o_field_percent_pie {
-        @include o-align-items(center);
+        align-items: center;
 
         > .o_pie {
             position: relative;
@@ -299,7 +289,7 @@
             margin-right: 10px;
             border-radius: 100%;
             overflow: hidden;
-            background-color: $o-brand-optional;
+            background-color: $o-brand-primary;
 
             &:after { // Outside pie border to go over border-radius irregularities
                 content: " ";
@@ -311,7 +301,7 @@
 
             .o_mask {
                 @include o-position-absolute(0, 0);
-                @include o-transform-origin(0);
+                transform-origin: 0;
                 width: 50%;
                 height: 100%;
                 background-color: $o-view-background-color;
@@ -321,14 +311,14 @@
             }
 
             .o_pie_value {
-                @include o-flex-display;
-                @include o-justify-content(center);
-                @include o-align-items(center);
+                display: flex;
+                justify-content: center;
+                align-items: center;
 
                 border-radius: 100%;
 
                 font-weight: 700;
-                color: $o-brand-primary;
+                color: $o-brand-odoo;
             }
         }
     }
@@ -351,7 +341,7 @@
             width: 100%;
 
             color: white;
-            background-color: $o-brand-optional;
+            background-color: $o-brand-primary;
             opacity: 0;
             transition: opacity ease 400ms;
 
@@ -365,7 +355,7 @@
                 cursor: pointer;
             }
         }
-        @media (max-width: $screen-xs-min) {
+        @include media-breakpoint-down(xs, $o-extra-grid-breakpoints) {
             .o_form_image_controls{
                 position: initial;
                 opacity: 1;
@@ -375,10 +365,10 @@
                     margin: 0px;
                     text-align: center;
                     &.o_select_file_button{
-                        background: $o-brand-optional;
+                        background: $o-brand-primary;
                     }
                     &.o_clear_file_button{
-                        background: $brand-danger;
+                        background: theme-color('danger');
                     }
                 }
             }
@@ -389,7 +379,7 @@
         }
 
         &.o_field_invalid > img {
-            border: 1px solid $brand-danger;
+            border: 1px solid theme-color('danger');
         }
     }
 
@@ -417,9 +407,9 @@
     &.o_field_copy {
         position: relative;
         border-radius: 5px;
-        border: 1px solid $btn-primary-border;
-        font-size: $font-size-small;
-        color: $o-brand-optional;
+        border: 1px solid $primary;
+        font-size: $font-size-sm;
+        color: $o-brand-primary;
         font-weight: $badge-font-weight;
         text-align: center;
         .o_clipboard_button {
diff --git a/addons/web/static/src/scss/fields_extra.scss b/addons/web/static/src/scss/fields_extra.scss
index 7e45291305f..47fca992eb5 100644
--- a/addons/web/static/src/scss/fields_extra.scss
+++ b/addons/web/static/src/scss/fields_extra.scss
@@ -43,7 +43,7 @@
             margin-left: 5px;
 
             &:after { // Outside pie border to go over border-radius irregularities
-                border: 1px solid $o-brand-primary;
+                border: 1px solid $o-brand-odoo;
             }
 
             .o_pie_value {
diff --git a/addons/web/static/src/scss/form_view.scss b/addons/web/static/src/scss/form_view.scss
index f46de22e9db..730f5b9521b 100644
--- a/addons/web/static/src/scss/form_view.scss
+++ b/addons/web/static/src/scss/form_view.scss
@@ -16,7 +16,7 @@
     }
     .oe_inline {
         width: auto!important;
-        @media (min-width: $screen-xs-min) {
+        @include media-breakpoint-up(vsm, $o-extra-grid-breakpoints) {
             &.o_inner_group {
                 width: 1px!important;
             }
@@ -31,19 +31,19 @@
         float: right!important;
     }
 
-    @media (min-width: $screen-xs-min) {
+    @include media-breakpoint-up(vsm, $o-extra-grid-breakpoints) {
         .o_row {
             &, &.o_field_widget { // Some field may want to use o_row as root and these rules must prevalue
-                @include o-flex-display;
+                display: flex;
                 width: auto!important;
             }
 
-            @include o-align-items(baseline);
+            align-items: baseline;
             min-width: 50px;
             margin: 0 (-$o-form-spacing-unit/2);
 
             > div, > span, > button, > label, > a, > input { // > * did not add a level of priority to the rule
-                @include o-flex(0, 0, auto);
+                flex: 0 0 auto;
                 width: auto!important;
                 margin-right: $o-form-spacing-unit/2;
                 margin-left: $o-form-spacing-unit/2;
@@ -57,7 +57,7 @@
                 padding-bottom: 0;
             }
             > .o_field_boolean {
-                @include o-align-self(center);
+                align-self: center;
             }
         }
     }
@@ -100,17 +100,17 @@
         }
 
         .oe_title {
-            max-width: $container-sm - (2 * $o-horizontal-padding);
+            max-width: map-get($container-max-widths, md) - (2 * $o-horizontal-padding);
         }
 
-        @media (min-width: $screen-xs-min) {
+        @include media-breakpoint-up(vsm, $o-extra-grid-breakpoints) {
             .o_row {
                 > .o_field_widget, > div {
-                    @include o-flex(1, 1, auto);
+                    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 {
-                        @include o-flex(0, 0, auto);
+                        flex: 0 0 auto;
                         width: auto!important;
                     }
                 }
@@ -140,25 +140,25 @@
     // Statusbar
     .o_form_statusbar {
         position: relative; // Needed for the "More" dropdown
-        @include o-flex-display;
-        @include o-justify-content(space-between);
+        display: flex;
+        justify-content: space-between;
         padding-left: $o-horizontal-padding;
-        border-bottom: 1px solid $gray-lighter-darker;
+        border-bottom: 1px solid gray('400');
         background-color: $o-view-background-color;
 
         > .o_statusbar_buttons, > .o_statusbar_status {
-            @include o-flex-display;
-            @include o-align-items(center);
-            @include o-align-content(space-around);
+            display: flex;
+            align-items: center;
+            align-content: space-around;
         }
 
         > .o_field_widget {
-            @include o-align-self(center);
+            align-self: center;
             margin-bottom: 0px;
         }
 
         > .o_statusbar_buttons {
-            @include o-flex-flow(row, wrap);
+            flex-flow: row wrap;
 
             > .btn {
                 $o-statusbar-buttons-vmargin: 4px;
@@ -171,9 +171,9 @@
 
         > .o_statusbar_status {
             margin-left: auto;
-            @include o-flex-flow(row-reverse, wrap-reverse);
-            @include o-align-self(stretch);
-            @include o-align-items(stretch);
+            flex-flow: row-reverse wrap-reverse;
+            align-self: stretch;
+            align-items: stretch;
             overflow-x: hidden; // to prevent horizontal scroll due to last arrow
 
             > .o_arrow_button {
@@ -182,17 +182,17 @@
                 font-weight: bold;
                 position: relative;
                 padding-left: $o-statusbar-arrow-width*2;
-                color: $gray;
+                color: gray('700');
                 border-width: 0 0 0;
                 border-radius: 0;
-                @include o-transition(all, 0.1s);
+                transition: all 0.1s ease 0s;
 
                 &:first-child {
                     padding-right: $o-horizontal-padding; // Compensate container padding
                 }
                 &:last-child {
                     padding-left: $o-horizontal-padding - 1;
-                    border-left: 1px solid $gray-lighter-darker;
+                    border-left: 1px solid gray('400');
                 }
 
                 &:active {
@@ -203,7 +203,7 @@
                     opacity: 1.0;
                     color: $text-muted;
                     pointer-events: none;
-                    border-left: 1px solid $gray-lighter-dark;
+                    border-left: 1px solid gray('300');
                 }
 
                 &:before, &:after {
@@ -215,34 +215,34 @@
                     border-bottom: ceil($o-statusbar-height/2) solid transparent;
                     border-right: none;
                     border-left: $o-statusbar-arrow-width solid $o-view-background-color;
-                    @include o-transition(border, 0.2s);
+                    transition: border 0.2s ease 0s;
                     -moz-transform: scale(0.9999); // Smooth the triangle on firefox
                 }
 
                 &:not(.disabled) {
                     &:hover, &:active, &:focus {
-                        color: $o-brand-optional;
-                        background-color: $gray-lighter;
+                        color: $o-brand-primary;
+                        background-color: gray('200');
 
                         &:after {
-                            border-left-color: $gray-lighter;
+                            border-left-color: gray('200');
                         }
                     }
                 }
 
                 &:before {
                     right: -$o-statusbar-arrow-width;
-                    border-left-color: $gray-lighter-dark;
+                    border-left-color: gray('300');
                 }
 
                 &.btn-primary.disabled {
-                    color: $o-brand-primary;
+                    color: $o-brand-odoo;
                     font-size: 11px;
-                    background-color: $gray-lighter;
+                    background-color: gray('200');
                     cursor: default;
 
                     &:after {
-                        border-left-color: $gray-lighter;
+                        border-left-color: gray('200');
                     }
                 }
 
@@ -274,7 +274,7 @@
                 padding: 5px 0 2px 0;
                 min-width: 100px;
 
-                > li > .btn {
+                .dropdown-item.btn {
                     min-width: 100%;
                     margin-bottom: 3px;
                 }
@@ -349,7 +349,7 @@
             width: 100%;
 
             > .btn {
-                @include o-flex(0, 0, auto);
+                flex: 0 0 auto;
                 padding: 0 10px;
             }
         }
@@ -361,7 +361,7 @@
             // Makes extra buttons (e.g. m2o external button) overflow on the
             // right padding of the parent element
             .o_input_dropdown {
-                @include o-flex(1, 0, auto);
+                flex: 1 0 auto;
             }
         }
 
@@ -377,7 +377,7 @@
 
     // Separators
     .o_horizontal_separator {
-        font-size: $font-size-h2;
+        font-size: $h2-font-size;
         margin: $o-form-spacing-unit 0;
         &:empty {
             height: $o-form-spacing-unit * 2;
@@ -425,7 +425,7 @@
     // Text field with oe_inline class
     .o_field_text.oe_inline {
         width: 100%!important;
-        @media (min-width: $screen-xs-min) {
+        @include media-breakpoint-up(vsm, $o-extra-grid-breakpoints) {
             width: 45%!important;
         }
     }
@@ -463,7 +463,7 @@
 
             .o_field_widget {
                 text-align: right;
-                @include o-justify-content(flex-end);
+                justify-content: flex-end;
                 width: 100%;
             }
         }
@@ -475,7 +475,7 @@
         .oe_subtotal_footer_separator {
             width: 100%;
             text-align: right;
-            border-top: 1px solid $gray-lighter-dark;
+            border-top: 1px solid gray('300');
             font-weight: bold;
             font-size: 1.3em;
         }
@@ -484,7 +484,7 @@
     .o_address_format {
         width: 100%;
         .o_address_street, .o_address_country {
-            @include o-flex-display;
+            display: flex;
         }
 
         .o_address_city {
@@ -559,7 +559,7 @@
 
     // Timezone widget warning
     .o_tz_warning {
-        color: $brand-danger;
+        color: theme-color('danger');
         cursor: help;
         position: absolute;
         margin-left: -40px;
@@ -675,11 +675,11 @@ label.o_light_label, .o_light_label label {
         display: block;
 
         > tr {
-            @include o-flex-display;
-            @include o-flex-flow(row, wrap);
+            display: flex;
+            flex-flow: row wrap;
 
             > td {
-                @include o-flex(1, 0, auto);
+                flex: 1 0 auto;
                 display: block;
                 max-width: 100%;
                 padding: 0;
@@ -718,9 +718,9 @@ label.o_light_label, .o_light_label label {
 
 // Settings form views
 .o_settings_container {
-    @include o-flex-display;
-    @include o-flex(0, 1, auto);
-    @include o-flex-flow(row, wrap);
+    display: flex;
+    flex: 0 1 auto;
+    flex-flow: row wrap;
     .o_setting_box:visible:nth-child(odd) {
         clear: left;
     }
diff --git a/addons/web/static/src/scss/form_view_extra.scss b/addons/web/static/src/scss/form_view_extra.scss
index 29c2512c1ab..cadce3f6809 100644
--- a/addons/web/static/src/scss/form_view_extra.scss
+++ b/addons/web/static/src/scss/form_view_extra.scss
@@ -75,7 +75,7 @@
                 .o_stat_value {
                     @include o-text-overflow(block);
                     font-weight: 700;
-                    color: $o-brand-primary;
+                    color: $o-brand-odoo;
                 }
                 .o_stat_text {
                     @include o-text-overflow(block);
@@ -144,7 +144,7 @@
 
     // Separators
     .o_horizontal_separator {
-        color: $o-brand-optional;
+        color: $o-brand-primary;
         font-weight: bold;
     }
 
diff --git a/addons/web/static/src/scss/import_bootstrap.scss b/addons/web/static/src/scss/import_bootstrap.scss
deleted file mode 100644
index cbd46a7afcf..00000000000
--- a/addons/web/static/src/scss/import_bootstrap.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import "bootstrap";
diff --git a/addons/web/static/src/scss/import_bootstrap_part1.scss b/addons/web/static/src/scss/import_bootstrap_part1.scss
new file mode 100644
index 00000000000..09f4d3579ac
--- /dev/null
+++ b/addons/web/static/src/scss/import_bootstrap_part1.scss
@@ -0,0 +1,11 @@
+
+// This file is importing bootstrap. While a simple "import "bootstrap";"
+// should be enough, this does not allow overridding mixins. Overridding mixins
+// is necessary for some of our need and allow to generate more efficient CSS
+// than adding more rules. This file instead copies the first part of the
+// content of the "bootstrap.scss" files to allow adding mixin overrides in
+// between.
+
+@import "functions";
+@import "variables";
+@import "mixins";
diff --git a/addons/web/static/src/scss/import_bootstrap_part2.scss b/addons/web/static/src/scss/import_bootstrap_part2.scss
new file mode 100644
index 00000000000..c15793019ad
--- /dev/null
+++ b/addons/web/static/src/scss/import_bootstrap_part2.scss
@@ -0,0 +1,40 @@
+
+// This file is importing bootstrap. While a simple "import "bootstrap";"
+// should be enough, this does not allow overridding mixins. Overridding mixins
+// is necessary for some of our need and allow to generate more efficient CSS
+// than adding more rules. This file instead copies the second part of the
+// content of the "bootstrap.scss" files to allow adding mixin overrides in
+// between.
+
+@import "root";
+@import "reboot";
+@import "type";
+@import "images";
+@import "code";
+@import "grid";
+@import "tables";
+@import "forms";
+@import "buttons";
+@import "transitions";
+@import "dropdown";
+@import "button-group";
+@import "input-group";
+@import "custom-forms";
+@import "nav";
+@import "navbar";
+@import "card";
+@import "breadcrumb";
+@import "pagination";
+@import "badge";
+@import "jumbotron";
+@import "alert";
+@import "progress";
+@import "media";
+@import "list-group";
+@import "close";
+@import "modal";
+@import "tooltip";
+@import "popover";
+@import "carousel";
+@import "utilities";
+@import "print";
diff --git a/addons/web/static/src/scss/kanban_column_progressbar.scss b/addons/web/static/src/scss/kanban_column_progressbar.scss
index 2cb35d33a2e..5f16a222736 100644
--- a/addons/web/static/src/scss/kanban_column_progressbar.scss
+++ b/addons/web/static/src/scss/kanban_column_progressbar.scss
@@ -56,16 +56,16 @@
 
 .o_kanban_counter {
     position: relative;
-    @include o-flex-display;
-    @include o-align-items(center);
-    @include o-transition(opacity, 0.3s);
+    display: flex;
+    align-items: center;
+    transition: opacity 0.3s ease 0s;
     margin-bottom: $o-kanban-record-margin*2;
 
     > .o_kanban_counter_progress {
         width: 76%;
-        height: $font-size-small;
+        height: $font-size-sm;
         margin-bottom: 0;
-        background-color: $gray-lighter-dark;
+        background-color: gray('300');
         box-shadow: none;
 
         .progress-bar {
@@ -81,7 +81,7 @@
 
         .o_kanban_counter_label {
             font-size: 10px;
-            @include user-select(none);
+            user-select: none;
         }
     }
 
@@ -91,14 +91,14 @@
         color: $headings-color;
         text-align: right;
         white-space: nowrap;
-        @include o-transform-origin(right, center);
+        transform-origin: right center;
 
         &.o_kanban_grow {
-            @include o-animation(grow, 1s, ease);
+            animation: grow 1s ease 0s 1 normal none running;
         }
 
         &.o_kanban_grow_huge {
-            @include o-animation(grow_huge, 1s, ease);
+            animation: grow_huge 1s ease 0s 1 normal none running;
         }
 
         // Target currency icon
@@ -112,16 +112,16 @@
 }
 
 .o_kanban_view .o_kanban_group {
-    @include o-kanban-css-filter(success, $brand-success);
-    @include o-kanban-css-filter(warning, $brand-warning);
-    @include o-kanban-css-filter(danger, $brand-danger);
+    @include o-kanban-css-filter(success, theme-color('success'));
+    @include o-kanban-css-filter(warning, theme-color('warning'));
+    @include o-kanban-css-filter(danger, theme-color('danger'));
 
     &.o_kanban_group_show {
-        @include o-flex-display;
-        @include o-flex-flow(column, nowrap);
+        display: flex;
+        flex-flow: column nowrap;
 
         > * {
-            @include o-flex(0, 0, auto);
+            flex: 0 0 auto;
         }
     }
 }
diff --git a/addons/web/static/src/scss/kanban_dashboard.scss b/addons/web/static/src/scss/kanban_dashboard.scss
index e6317d4f89e..3330be5bba6 100644
--- a/addons/web/static/src/scss/kanban_dashboard.scss
+++ b/addons/web/static/src/scss/kanban_dashboard.scss
@@ -1,16 +1,16 @@
 
 .o_kanban_view.o_kanban_dashboard {
     // correctly display the no_content_helper in dashboards
-    @include o-flex-flow(row, wrap);
+    flex-flow: row wrap;
 
     .o_kanban_record {
         position: relative;
-        @include o-flex-display;
-        @include o-flex-flow(column, nowrap);
-        @include o-justify-content(space-between);
+        display: flex;
+        flex-flow: column nowrap;
+        justify-content: space-between;
         padding: $o-kanban-dashboard-vpadding $o-kanban-dashboard-hpadding;
 
-        @media (max-width: $screen-xs-max) {
+        @include media-breakpoint-down(sm) {
             margin-bottom: 10px;
         }
 
@@ -41,7 +41,7 @@
             }
 
             > .o_kanban_card_manage_section {
-                border-bottom: 1px solid $gray-lighter-dark;
+                border-bottom: 1px solid gray('300');
                 margin-bottom: 10px;
 
                 > div {
@@ -55,9 +55,9 @@
                 max-width: 400px;
 
                 .row {
-                    @include o-flex-display;
-                    @include o-flex-flow(row, nowrap);
-                    @include o-justify-content(space-between);
+                    display: flex;
+                    flex-flow: row nowrap;
+                    justify-content: space-between;
                     margin-left: 0;
                     margin-right: 0;
                     padding-left: $o-kanban-dashboard-dropdown-complex-gap*2;
@@ -65,14 +65,14 @@
                 }
 
                 div[class*="col-"] {
-                    @include o-flex(1, 1, percentage(100/3));
+                    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 {
-                        margin: ($line-height-computed / 2) 0;
+                        margin: (($font-size-base * $line-height-base) / 2) 0;
                         color: $headings-color;
-                        font-size: $font-size-h5;
+                        font-size: $h5-font-size;
                         font-weight: 500;
                         line-height: $headings-line-height;
                     }
@@ -82,7 +82,7 @@
                 }
 
                 .row.o_kanban_card_manage_settings {
-                    border-top: 1px solid $gray-lighter-dark;
+                    border-top: 1px solid gray('300');
                     padding-top: $o-kanban-dashboard-dropdown-complex-gap*3;
 
                     .oe_kanban_colorpicker {
@@ -91,7 +91,7 @@
                     }
 
                     div[class*="col-"] + div[class*="col-"] {
-                        border-left: 1px solid $gray-lighter-dark;
+                        border-left: 1px solid gray('300');
                     }
 
                     // Default options box
@@ -137,7 +137,7 @@
         // Identify subtitles without classes
         .o_kanban_primary_left .o_primary > span:nth-child(2) > strong {
             font-weight: 500;
-            font-size: $font-size-small;
+            font-size: $font-size-sm;
             color: $text-muted;
         }
 
@@ -154,10 +154,10 @@
         }
 
         .o_kanban_card_header + .container.o_kanban_card_content {
-            @include o-flex(1, 0, auto);
-            @include o-flex-display;
-            @include o-flex-flow(column, nowrap);
-            @include o-justify-content(space-between);
+            flex: 1 0 auto;
+            display: flex;
+            flex-flow: column nowrap;
+            justify-content: space-between;
             margin-top: $o-kanban-dashboard-vpadding * 2;
             padding-right: 0;
             padding-left: 0;
@@ -176,8 +176,8 @@
                 margin-bottom: -$o-kanban-dashboard-vpadding;
 
                 &.bottom_block {
-                    border-top: 1px solid $gray-lighter-dark;
-                    background-color: $gray-lighter;
+                    border-top: 1px solid gray('300');
+                    background-color: gray('200');
                     padding-top: $o-kanban-dashboard-vpadding;
                     padding-bottom: $o-kanban-dashboard-vpadding;
                 }
diff --git a/addons/web/static/src/scss/kanban_examples_dialog.scss b/addons/web/static/src/scss/kanban_examples_dialog.scss
index a42962ed8f0..65eadc9e0b4 100644
--- a/addons/web/static/src/scss/kanban_examples_dialog.scss
+++ b/addons/web/static/src/scss/kanban_examples_dialog.scss
@@ -1,17 +1,17 @@
 .o_kanban_examples_dialog {
-    @include o-flex-display;
+    display: flex;
     padding: 0px;
-    background: $o-color-silver;
+    background: theme-color('light');
 
     // sidebar
     .o_kanban_examples_dialog_nav {
-        @include o-flex(0, 0, auto);
-        border-right: 1px solid $gray-lighter-dark;
+        flex: 0 0 auto;
+        border-right: 1px solid gray('300');
         background: white;
 
         > ul > li {
             margin: 0;
-            border-bottom: 1px solid $gray-lighter-dark;
+            border-bottom: 1px solid gray('300');
 
             > a {
                 padding: 12px 15px;
@@ -23,7 +23,7 @@
             }
             &.active > a {
                 color: $headings-color;
-                border-left-color: $o-brand-optional;
+                border-left-color: $o-brand-primary;
                 font-weight: bold;
             }
         }
@@ -31,28 +31,28 @@
 
     // content
     .o_kanban_examples_dialog_content {
-        @include o-flex(1, 1, 100%);
+        flex: 1 1 100%;
 
         .o_kanban_examples_description {
             padding: 16px 16px 0;
             text-align: justify;
         }
         .o_kanban_examples {
-            @include o-flex-display;
+            display: flex;
             padding: 0 6px;
 
             .o_kanban_examples_group {
-                @include o-flex(1, 1, 100%);
+                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('300');
                     background-color: white;
                     .o_ghost_content {
                         height: 12px;
-                        background: $gray-lighter-dark;
+                        background: gray('300');
                         &.o_ghost_tag {
                             display: inline-block;
                             width: 40%;
diff --git a/addons/web/static/src/scss/kanban_view.scss b/addons/web/static/src/scss/kanban_view.scss
index 4d00f1be3cf..c00e5ab0d26 100644
--- a/addons/web/static/src/scss/kanban_view.scss
+++ b/addons/web/static/src/scss/kanban_view.scss
@@ -1,27 +1,27 @@
 
 // ------- Kanban View Layout -------
 .o_kanban_view {
-    @include o-flex-display;
-    @include o-align-content(stretch);
+    display: flex;
+    align-content: stretch;
     overflow-x: visible;
 
-    @media (max-width: $screen-xs-max) {
+    @include media-breakpoint-down(sm) {
         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;
+        border: 1px solid gray('300');
         background-color: white;
 
-        @media (max-width: $screen-xs-max) {
+        @include media-breakpoint-down(sm) {
             padding: $o-kanban-inside-vgutter $o-kanban-inside-hgutter-mobile;
         }
         &:focus, &:focus-within {
-            -webkit-box-shadow: 1px 1px 1px 0px $gray-light;
-            -moz-box-shadow: 1px 1px 1px 0px $gray-light;
-            box-shadow: 1px 1px 1px 0px $gray-light;
+            -webkit-box-shadow: 1px 1px 1px 0px gray('600');
+            -moz-box-shadow: 1px 1px 1px 0px gray('600');
+            box-shadow: 1px 1px 1px 0px gray('600');
             z-index: 1; // show the shadow on top of the previous & next cards in grouped mode
             outline: none;
         }
@@ -43,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('400');
         min-width: 150px;
         margin: 0 0 -1px;
 
@@ -61,11 +61,11 @@
         }
 
         .o_kanban_record_top, .o_kanban_record_bottom  {
-            @include o-flex-display;
+            display: flex;
         }
 
         .o_kanban_record_top {
-            @include o-align-items(flex-start);
+            align-items: flex-start;
 
             .o_dropdown_kanban {
                 // For v11 layout, reset positioning to default to properly use
@@ -77,7 +77,7 @@
 
             .o_kanban_record_headings {
                 line-height: 1.2;
-                @include o-flex(1, 1, auto);
+                flex: 1 1 auto;
                 // Ensure long word doesn't break out of container
                 word-wrap: break-word;
                 overflow: hidden;
@@ -95,12 +95,12 @@
 
         .o_kanban_record_bottom {
             .oe_kanban_bottom_left, .oe_kanban_bottom_right {
-                @include o-flex-display;
-                @include o-align-items(center);
+                display: flex;
+                align-items: center;
                 height: 20px;
             }
             .oe_kanban_bottom_left {
-                @include o-flex(1, 1, auto);
+                flex: 1 1 auto;
 
                 > * {
                     margin-right: 6px;
@@ -113,7 +113,7 @@
                 }
             }
             .oe_kanban_bottom_right{
-                @include o-flex(0, 1, auto);
+                flex: 0 1 auto;
 
                 .oe_kanban_avatar {
                     width: 20px;
@@ -122,9 +122,9 @@
                 }
             }
             .o_link_muted {
-                color: $text-color;
+                color: $body-color;
                 &:hover {
-                    color: $brand-primary;
+                    color: theme-color('primary');
                     text-decoration: underline;
                 }
             }
@@ -142,7 +142,7 @@
         .o_dropdown_kanban {
             @include o-position-absolute($o-kanban-inside-vgutter, $o-kanban-inside-hgutter);
             visibility: hidden;
-            @media (max-width: $screen-xs-max) {
+            @include media-breakpoint-down(sm) {
                 visibility: visible;
             }
 
@@ -150,7 +150,7 @@
                 @include o-kanban-dropdown;
                 margin: (-$o-kanban-inside-vgutter - 1px) (-$o-kanban-inside-hgutter - 1px) 0 0;
             }
-            &.open .dropdown-toggle {
+            &.show .dropdown-toggle {
                 @include o-kanban-dropdown-open;
             }
             .dropdown-menu {
@@ -159,7 +159,7 @@
             }
         }
 
-        &:hover .o_dropdown_kanban, .o_dropdown_kanban.open {
+        &:hover .o_dropdown_kanban, .o_dropdown_kanban.show {
             visibility: visible;
         }
 
@@ -207,7 +207,7 @@
 
             > button, > a {
                 @include o-position-absolute($right: $o-kanban-record-margin, $bottom: $o-kanban-record-margin);
-                @media (max-width: $screen-xs-max) {
+                @include media-breakpoint-down(sm) {
                     right: $o-kanban-inside-hgutter-mobile;
                 }
             }
@@ -219,9 +219,9 @@
         }
 
         &.ui-sortable-helper {
-            @include o-transform(rotate(-3deg));
+            transform: rotate(-3deg);
             box-shadow: 0 5px 25px -10px black;
-            @include transition(transform 0.6s, box-shadow 0.3s);
+            transition: transform 0.6s, box-shadow 0.3s;
         }
 
         .o_attachment_image > img {
@@ -230,18 +230,18 @@
         }
 
         .o_progressbar {
-            @include o-flex-display;
+            display: flex;
             height: $o-kanban-progressbar-height;
 
             .o_progressbar_title {
-                @include o-flex(0, 0, auto);
+                flex: 0 0 auto;
             }
             .o_progress {
-                @include o-flex(1, 1, auto);
+                flex: 1 1 auto;
                 margin-top: 3px;
             }
             .o_progressbar_value {
-                @include o-flex(0, 0, auto);
+                flex: 0 0 auto;
                 width: auto;
                 height: 100%;
                 text-align: right;
@@ -258,7 +258,7 @@
 
             + div {
                 padding-left: $o-kanban-image-width + $o-kanban-inside-hgutter;
-                @media (max-width: $screen-xs-max) {
+                @include media-breakpoint-down(sm) {
                     padding-left:  $o-kanban-image-width + $o-kanban-inside-hgutter-mobile;
                 }
             }
@@ -270,7 +270,7 @@
                 margin-bottom: $o-kanban-inner-hmargin*0.5;;
                 padding-left: 0;
                 list-style: none;
-                font-size: $font-size-small;
+                font-size: $font-size-sm;
 
                 li {
                     margin-bottom: 2px;
@@ -279,11 +279,11 @@
         }
 
         .o_kanban_footer {
-            @include o-flex-display;
-            @include o-justify-content(space-between);
-            @include o-align-items(center);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
             > * {
-                @include o-flex(0, 0, auto);
+                flex: 0 0 auto;
             }
         }
 
@@ -305,7 +305,7 @@
     &.o_kanban_grouped {
         min-height: 100%;
         padding: 0;
-        background-color: $gray-lighter;
+        background-color: theme-color('light');
 
         .o_kanban_record, .o_kanban_quick_create {
             width: 100%;
@@ -320,14 +320,14 @@
 
     // Kanban Grouped Layout - Column default
     .o_kanban_group {
-        @include o-flex(0, 0, auto);
+        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 {
             @include o-kanban-header-title;
 
             .o_column_title {
-                @include o-flex(1, 1, auto);
+                flex: 1 1 auto;
                 @include o-text-overflow;
                 font-size: 16px;
                 font-weight: 500;
@@ -342,7 +342,7 @@
                 margin-left: $o-kanban-inside-hgutter*2;
             }
 
-            &:hover .o_kanban_config, .o_kanban_config.open {
+            &:hover .o_kanban_config, .o_kanban_config.show {
                 visibility: visible;
                 margin-left: $o-kanban-inside-hgutter;
             }
@@ -430,7 +430,7 @@
             .o_kanban_add_column {
                 display: inline-block;
                 padding: 10px 14px;
-                background-color: $o-color-silver-dark;
+                background-color: gray('300');
             }
             .o_kanban_title {
                 margin-left: 10px;
@@ -443,7 +443,7 @@
             height: 100%;
             border: none;
             box-shadow: 0 0 20px -10px;
-            background-color: $gray-lighter;
+            background-color: theme-color('light');
 
             .o_kanban_header {
                 height: 50px;
@@ -453,18 +453,13 @@
                 }
 
                 input, input:focus, input:hover {
-                    margin-top: 3px;
                     font-size: 16px;
                     background: transparent;
                 }
-
-                .o_kanban_add {
-                    margin-left: 10px;
-                }
             }
 
             .o_kanban_muted_record {
-                background: $gray-lighter-dark;
+                background: gray('300');
                 height: 70px;
                 margin: 10px 0px;
             }
@@ -474,19 +469,19 @@
 
     // Kanban UN-grouped Layout
     &.o_kanban_ungrouped {
-        @include o-flex-flow(row, wrap);
-        @include o-justify-content(flex-start);
+        flex-flow: row wrap;
+        justify-content: flex-start;
 
         padding: $o-kanban-record-margin ($o-horizontal-padding - $o-kanban-record-margin);
 
         .o_kanban_record {
-            @include o-flex(1, 1, auto);
+            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) {
+            @include media-breakpoint-down(sm) {
                 margin: 0 0 -1px 0;
-                @include o-flex(1, 0, 100%);
+                flex: 1 0 100%;
             }
 
             &.o_kanban_ghost {
diff --git a/addons/web/static/src/scss/kanban_view_mobile.scss b/addons/web/static/src/scss/kanban_view_mobile.scss
index ed4e6ad8436..b74ae8aaea5 100644
--- a/addons/web/static/src/scss/kanban_view_mobile.scss
+++ b/addons/web/static/src/scss/kanban_view_mobile.scss
@@ -1,4 +1,4 @@
-@media (max-width: $screen-xs-max) {
+@include media-breakpoint-down(sm) {
     .o_kanban_view.o_kanban_grouped {
         display: block;
         position: relative;
@@ -11,7 +11,7 @@
 
             .o_kanban_mobile_tab {
                 @include o-position-absolute($left: 100%);
-                @include o-transform(translateX(-50%));
+                transform: translateX(-50%);
                 height: $o-kanban-mobile-tabs-height;
                 padding: 10px;
                 font-size: 14px;
@@ -19,7 +19,7 @@
 
                 &.o_current {
                     font-weight: bold;
-                    border-bottom: 3px solid $o-brand-optional;
+                    border-bottom: 3px solid $o-brand-primary;
                 }
                 .o_column_title {
                     white-space: nowrap;
diff --git a/addons/web/static/src/scss/layout_background.scss b/addons/web/static/src/scss/layout_background.scss
index e23b2585b50..400ba12789b 100644
--- a/addons/web/static/src/scss/layout_background.scss
+++ 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('700');
 }
 .o_background_header {
-    border-bottom: 1px solid $gray-lighter;
+    border-bottom: 1px solid gray('200');
     .company_address {
         min-width: 300px;
     }
@@ -13,19 +13,19 @@
         margin-right: 16px;
     }
     h3 {
-        color: $o-brand-primary;
+        color: $o-brand-odoo;
         font-weight: 700;
         max-width: 300px;
     }
 }
 .o_background_footer {
     ul {
-        border-top: 1px solid $o-brand-primary;
-        border-bottom: 1px solid $o-brand-primary;
+        border-top: 1px solid $o-brand-odoo;
+        border-bottom: 1px solid $o-brand-odoo;
         padding: 4px 0;
         margin: 0 0 4px 0;
         li {
-            color: $o-brand-primary;
+            color: $o-brand-odoo;
         }
     }
 }
@@ -36,10 +36,10 @@
     background-repeat: no-repeat;
     min-height: 900px;
     thead tr th, h2 {
-        color: $o-brand-primary;
+        color: $o-brand-odoo;
     }
     tbody {
-        color: $gray;
+        color: gray('700');
         tr:nth-child(odd) {
             background-color: rgba(184, 171, 180, 0.2);
         }
@@ -48,7 +48,7 @@
         }
     }
     /*Total table*/
-    .row > .col-xs-4 > table {
+    .row > .col-4 > table {
         tr:nth-child(odd) {
             background-color: transparent !important;
         }
@@ -57,7 +57,7 @@
             border-top: none !important;
         }
         tr:last-child td {
-            color: $o-brand-primary;
+            color: $o-brand-odoo;
         }
     }
     #total {
diff --git a/addons/web/static/src/scss/layout_boxed.scss b/addons/web/static/src/scss/layout_boxed.scss
index 92208945f45..426b3dd2aac 100644
--- a/addons/web/static/src/scss/layout_boxed.scss
+++ b/addons/web/static/src/scss/layout_boxed.scss
@@ -1,10 +1,10 @@
 .o_boxed_footer, .o_boxed_header, .o_report_layout_boxed {
     font-family: 'Lato';
-    color: $gray;
+    color: gray('700');
     font-size: 12px;
 }
 .o_boxed_header {
-    border-bottom: 1px solid $gray-lighter;
+    border-bottom: 1px solid gray('200');
     img {
         max-height: 100px;
     }
@@ -17,7 +17,7 @@
 .o_boxed_footer {
     margin-top: 200px;
     white-space: nowrap;
-    border-top: 3px solid $gray;
+    border-top: 3px solid gray('700');
     ul {
         margin: 4px 0;
     }
@@ -26,7 +26,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('700');
         padding-top: 10px;
         margin: 0;
     }
@@ -34,28 +34,28 @@
         text-transform: uppercase;
     }
     table {
-        border: 1px solid $gray;
+        border: 1px solid gray('700');
         thead {
             tr th {
-                border-bottom: 3px solid $gray !important;
+                border-bottom: 3px solid gray('700') !important;
                 text-transform: uppercase;
             }
         }
         tbody {
-            color: $gray;
+            color: gray('700');
             tr {
                 td {
                     border-top: none;
-                    border-right: 1px solid $gray;
+                    border-right: 1px solid gray('700');
                 }
                 td:last-child {
-                    background-color: $gray-lighter;
+                    background-color: gray('200');
                 }
             }
         }
     }
     /*Total table*/
-    .row > .col-xs-4 > table {
+    .row > .col-4 > table {
         td {
             border-right: none;
         }
@@ -67,7 +67,7 @@
             background-color: transparent;
         }
         tr:last-child td {
-            background-color: $gray;
+            background-color: gray('700');
             color: #fff;
         }
     }
diff --git a/addons/web/static/src/scss/layout_clean.scss b/addons/web/static/src/scss/layout_clean.scss
index 64ec2fd5245..06b2e808dd4 100644
--- a/addons/web/static/src/scss/layout_clean.scss
+++ b/addons/web/static/src/scss/layout_clean.scss
@@ -12,16 +12,16 @@
 .o_clean_footer {
     margin: 0 3px;
     margin-top: 200px;
-    border-top: 3px solid $o-brand-primary;
+    border-top: 3px solid $o-brand-odoo;
     h4 {
-        color: $o-brand-primary;
+        color: $o-brand-odoo;
         font-weight: bolder;
     }
     .pagenumber {
         width: 35px;
         height: 35px;
-        border: 3px solid $o-brand-primary;
-        background-color: $o-brand-optional;
+        border: 3px solid $o-brand-odoo;
+        background-color: $o-brand-primary;
         color: white;
         padding-top: 6px;
         text-align: center;
@@ -29,17 +29,17 @@
 }
 .o_report_layout_clean {
     h1, h2, h3 {
-        color: $o-brand-optional;
+        color: $o-brand-primary;
         font-weight: bolder;
     }
     strong {
-        color: $o-brand-primary;
+        color: $o-brand-odoo;
     }
     table {
         thead {
-            color: $o-brand-primary;
+            color: $o-brand-odoo;
             tr th {
-                border-top: 3px solid $o-brand-primary !important;
+                border-top: 3px solid $o-brand-odoo !important;
                 text-transform: uppercase;
             }
             tr th:last-child {
@@ -54,7 +54,7 @@
                 border-top: none;
             }
             tr:last-child td {
-                border-bottom: 3px solid $o-brand-primary;
+                border-bottom: 3px solid $o-brand-odoo;
             }
             tr {
                 td {
@@ -66,13 +66,13 @@
         }
     }
     /*Total table*/
-    .row > .col-xs-4 {
+    .row > .col-4 {
             width: 43%;
             position: relative;
             top: -20px;
             > table {
             tr:last-child td {
-                border-top: 1px solid $gray-lighter !important;
+                border-top: 1px solid gray('200') !important;
             }
             tr:first-child td {
                 /*we could get rid of this rule if .border-black td would be terminated in report.scss*/
diff --git a/addons/web/static/src/scss/list_view.scss b/addons/web/static/src/scss/list_view.scss
index 27c10cda556..ba5cd8a4dab 100644
--- a/addons/web/static/src/scss/list_view.scss
+++ b/addons/web/static/src/scss/list_view.scss
@@ -5,10 +5,15 @@
     background-color: $o-view-background-color;
     margin-bottom: 0px;
 
+    // Don't understand why but without those, the list view appears broken
+    // in both form views and standalone list views.
+    border-collapse: initial;
+    border-spacing: 0;
+
     // Checkbox in editable list
     // should be clickable and activate the row
     &.o_editable_list .o_data_row:not(.o_selected_row) .o_data_cell {
-        .o_checkbox:not(.o_readonly_modifier) {
+        .custom-checkbox:not(.o_readonly_modifier) {
             pointer-events: none;
         }
     }
@@ -41,7 +46,7 @@
 
     .o_column_sortable {
         position: relative;
-        @include user-select(none);  // Prevent unwanted selection while sorting
+        user-select: none;  // Prevent unwanted selection while sorting
 
         &::after {
             font-family: FontAwesome;
@@ -96,11 +101,12 @@
         }
         .o_group_pager {
             cursor: text;
-            @include user-select(none);
+            user-select: none;
             text-align: right;
-            padding-top: 0;
-            padding-bottom: 0;
+            padding-top: 0 !important;
+            padding-bottom: 0 !important;
             .o_pager_previous, .o_pager_next {
+                max-height: 30px;
                 background-color: $o-list-group-header-color;
                 &:hover {
                     background-color: darken($o-list-group-header-color, 10%);
@@ -182,7 +188,7 @@
             width: 16px; // to have some space on the right
         }
         .o_input {
-            padding: $table-condensed-cell-padding;
+            padding: $table-cell-padding-sm;
             background-color: white;
 
             .o_input {
diff --git a/addons/web/static/src/scss/list_view_extra.scss b/addons/web/static/src/scss/list_view_extra.scss
index ec53efc6df5..83791ce42dd 100644
--- a/addons/web/static/src/scss/list_view_extra.scss
+++ b/addons/web/static/src/scss/list_view_extra.scss
@@ -5,6 +5,6 @@
     }
 
     tbody > tr.o_group_header {
-        @include o-vertical-gradient(#fcfcfc, #dedede);
+        background-image: linear-gradient(to bottom, #fcfcfc, #dedede);
     }
 }
diff --git a/addons/web/static/src/scss/modal.scss b/addons/web/static/src/scss/modal.scss
index 82faabfa3bc..5dc3c1eb7d0 100644
--- a/addons/web/static/src/scss/modal.scss
+++ b/addons/web/static/src/scss/modal.scss
@@ -31,7 +31,7 @@
     }
 
 
-    @media (min-width: $screen-sm-min) {
+    @include media-breakpoint-up(md) {
         .modal-dialog {
             height: 100%;
             padding: 30px 0;
@@ -39,11 +39,11 @@
 
             .modal-content {
                 max-height: 100%;
-                @include o-flex-display;
-                @include o-flex-flow(column, nowrap);
+                display: flex;
+                flex-flow: column nowrap;
 
                 .modal-header, .modal-footer {
-                    @include o-flex(0, 0, auto);
+                    flex: 0 0 auto;
                 }
 
                 .modal-body {
@@ -54,15 +54,15 @@
 
                     &.o_dialog_error {
                         overflow: visible;
-                        @include o-flex-display;
-                        @include o-flex-flow(column, nowrap);
+                        display: flex;
+                        flex-flow: column nowrap;
 
                         > .alert, > button {
-                            @include o-flex(0, 0, auto);
+                            flex: 0 0 auto;
                         }
 
                         > .o_error_detail {
-                            @include o-flex(1, 1, auto);
+                            flex: 1 1 auto;
                             min-height: 0;
                             overflow: auto;
                         }
diff --git a/addons/web/static/src/scss/model_field_selector.scss b/addons/web/static/src/scss/model_field_selector.scss
index 0eec3e60049..1acd3b0cc90 100644
--- a/addons/web/static/src/scss/model_field_selector.scss
+++ b/addons/web/static/src/scss/model_field_selector.scss
@@ -3,9 +3,9 @@
     position: relative;
 
     > .o_field_selector_value {
-        @include o-flex-display;
-        @include o-flex-flow(row, wrap);
-        @include o-align-items(center);
+        display: flex;
+        flex-flow: row wrap;
+        align-items: center;
         height: 100%;
         min-height: 20px; // needed when there is no value in it and used standalone
         &:active, &:focus, &:active:focus {
@@ -19,15 +19,15 @@
             margin-bottom: 1px;
         }
         > i {
-            @include o-align-self(center);
+            align-self: center;
             margin: 0 2px;
             font-size: 10px;
         }
     }
     > .o_field_selector_controls {
         @include o-position-absolute(0, 0, 1px);
-        @include o-flex-display;
-        @include o-align-items(center);
+        display: flex;
+        align-items: center;
         cursor: pointer;
     }
 
@@ -51,7 +51,7 @@
 
             .o_field_selector_popover_header {
                 color: white;
-                background: $brand-primary;
+                background: theme-color('primary');
                 font-weight: bold;
                 padding: 5px 0 5px 0.4em;
 
@@ -67,14 +67,14 @@
 
                     &.o_prev_page {
                         left: 0;
-                        border-right: 1px solid darken($brand-primary, 10%);
+                        border-right: 1px solid darken(theme-color('primary'), 10%);
                     }
                     &.o_field_selector_close {
                         right: 0;
-                        border-left: 1px solid darken($brand-primary, 10%);
+                        border-left: 1px solid darken(theme-color('primary'), 10%);
                     }
                     &:hover {
-                        background: darken($brand-primary, 10%);
+                        background: darken(theme-color('primary'), 10%);
                     }
                 }
                 &:before {
@@ -82,7 +82,7 @@
                     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-bottom: $o-field-selector-arrow-height solid theme-color('primary');
                 }
             }
             .o_field_selector_popover_body {
@@ -110,15 +110,15 @@
                         }
                         .o_field_selector_relation_icon {
                             @include o-position-absolute($top: 0, $right: 0, $bottom: 0);
-                            @include o-flex-display;
-                            @include o-align-items(center);
+                            display: flex;
+                            align-items: center;
                             padding: 10px;
                         }
                     }
                 }
             }
             .o_field_selector_popover_footer {
-                background: $brand-primary;
+                background: theme-color('primary');
                 padding: 5px 0.4em;
 
                 > input {
diff --git a/addons/web/static/src/scss/navbar.scss b/addons/web/static/src/scss/navbar.scss
index 770532d6693..aa1a2c23067 100644
--- a/addons/web/static/src/scss/navbar.scss
+++ b/addons/web/static/src/scss/navbar.scss
@@ -3,7 +3,7 @@
     position: relative;
     height: $o-navbar-height;
     border-bottom: 1px solid $o-navbar-inverse-link-hover-bg;
-    background-color: $o-brand-primary;
+    background-color: $o-brand-odoo;
     color: white;
 
     > a, > button {
@@ -17,7 +17,7 @@
         color: inherit;
 
         font-size: 18px;
-        @include user-select(none);
+        user-select: none;
 
         &:hover, &:focus {
             background-color: $o-navbar-inverse-link-hover-bg;
@@ -32,13 +32,13 @@
         display: block;
         float: left;
         margin-right: 35px;
-        @include user-select(none);
+        user-select: none;
         color: white;
         font-size: 22px;
         font-weight: 500;
         line-height: $o-navbar-height;
 
-        @media (max-width: $screen-sm-max) {
+        @include media-breakpoint-down(md) {
             float: none;
             margin: 0;
             border-bottom: 1px solid $o-navbar-inverse-link-hover-bg;
@@ -86,21 +86,21 @@
                     width: $o-navbar-height;
                     text-align: center;
                 }
-                &.open > ul {
+                &.show > ul {
                     padding: 0;
 
                     > li {
                         > a {
-                            background-color: $o-brand-primary;
+                            background-color: $o-brand-odoo;
                             color: white;
                             border-bottom: 1px solid $o-brand-lightsecondary;
 
                             &.dropdown-toggle {
-                                background-color: lighten($o-brand-primary, 15%);
+                                background-color: lighten($o-brand-odoo, 15%);
                                 pointer-events: none; // hack to prevent clicking on it because dropdown always opened
                             }
                         }
-                        > ul { // remove dropdown-menu default style as it is nested in another one
+                        > .dropdown-menu { // remove dropdown-menu default style as it is nested in another one
                             position: static;
                             float: none;
                             display: block;
@@ -115,27 +115,23 @@
 
         &.o_menu_systray {
             float: right;
-            .open .dropdown-menu {
-                left: auto;
-                right: 0;
-            }
         }
     }
 
-    .open .dropdown-menu {
+    .dropdown-menu.show {
         max-height: 90vh; // the dropdown should not overstep the viewport
         min-width: 100%;
         overflow: auto;
         margin-top: 0;
 
         @for $index from 3 through 5 {
-            > li.o_menu_header_lvl_#{$index}, > li .o_menu_entry_lvl_#{$index} {
+            .o_menu_header_lvl_#{$index}, .o_menu_entry_lvl_#{$index} {
                 padding-left: $o-dropdown-hpadding + ($index - 2)*12px;
             }
         }
     }
 
-    .open .dropdown-toggle {
+    .show .dropdown-toggle {
         background-color: $o-navbar-inverse-link-hover-bg;
     }
     .o_user_menu {
@@ -147,12 +143,12 @@
 
         .oe_topbar_avatar {
             height: 17px;
-            @include o-transform(translateY(-2px));
+            transform: translateY(-2px);
         }
     }
 
-    @media (max-width: $screen-sm-max) {
-        @include o-transition(height, 200ms, linear);
+    @include media-breakpoint-down(md) {
+        transition: height 200ms linear 0s;
 
         position: relative;
         height: $o-navbar-height;
@@ -165,7 +161,7 @@
                     display: none;
                 }
 
-                &.open .dropdown-menu {
+                .dropdown-menu.show {
                     max-height: none;
                 }
             }
@@ -173,7 +169,7 @@
             &.o_menu_sections {
                 width: 100%;
 
-                > li.open .dropdown-menu {
+                .dropdown-menu.show {
                     position: static;
                     float: none;
                     background-color: transparent;
@@ -181,7 +177,7 @@
                     border: none;
                     overflow: visible;
 
-                    > li > a {
+                    > .dropdown-item {
                         background-color: transparent;
                         color: inherit;
                     }
@@ -196,7 +192,7 @@
                 > li {
                     display: inline-block;
 
-                    &.open .dropdown-menu {
+                    .dropdown-menu.show {
                         @include o-position-absolute($o-navbar-height, 0, 0, 0);
                         position: fixed;
                         width: auto;
@@ -211,7 +207,7 @@
     }
 }
 
-@media (max-width: $screen-sm-max) {
+@include media-breakpoint-down(md) {
     body.o_mobile_menu_opened {
         overflow: hidden;
         height: 100%;
@@ -224,11 +220,11 @@
     }
 }
 
-@media (max-width: $screen-sm-max) {
-     .o_switch_company_menu > .dropdown-menu {
-         padding-top: 0px;
-         li.bg-info {
-             padding: 10px;
-         }
-     }
- }
+@include media-breakpoint-down(md) {
+    .o_switch_company_menu > .dropdown-menu {
+        padding-top: 0px;
+        .bg-info {
+            padding: 10px;
+        }
+    }
+}
diff --git a/addons/web/static/src/scss/pivot_view.scss b/addons/web/static/src/scss/pivot_view.scss
index 3efddd8eab2..d10c4997f43 100644
--- a/addons/web/static/src/scss/pivot_view.scss
+++ b/addons/web/static/src/scss/pivot_view.scss
@@ -5,7 +5,7 @@
     // items corresponding to the clicked cell
     &.o_enable_linking {
         .o_pivot_cell_value:hover {
-            color: $o-brand-optional;
+            color: $o-brand-primary;
             cursor: pointer;
         }
     }
@@ -23,7 +23,7 @@
             background-color: lighten($o-brand-secondary, 40%);
             cursor: pointer;
             white-space: nowrap;
-            @include user-select(none);
+            user-select: none;
             &:hover {
                 background-color: lighten($o-brand-secondary, 30%);
             }
diff --git a/addons/web/static/src/scss/primary_variables.scss b/addons/web/static/src/scss/primary_variables.scss
index b394aeafe26..0f7f43411c4 100644
--- a/addons/web/static/src/scss/primary_variables.scss
+++ b/addons/web/static/src/scss/primary_variables.scss
@@ -4,20 +4,21 @@
 ///
 
 // Font sizes
-$o-font-size-base: 13px;
-$o-line-height-base: 1.428571429; // This is BS default
+$o-root-font-size: 13px;
+$o-font-size-base: 1rem;
+$o-line-height-base: 1.5; // This is BS default
 
 // Colors
-$o-brand-primary: #7c7bad;
-$o-brand-optional: #7c7bad;
+$o-community-color: #7C7BAD;
+$o-enterprise-color: #875A7B;
+
+$o-brand-odoo: $o-community-color;
+$o-brand-primary: $o-community-color;
+
 $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-gray-100: #f8f9fa; // This is BS default
 
-$o-color-pink: #875A7B; // Enterprise $o-brand-primary
 $o-main-color-muted: #a8a8a8;
 $o-main-text-color: #4c4c4c;
 
@@ -36,8 +37,21 @@ $o-tooltip-text-color: #777777;
 $o-tooltip-title-text-color: #4c4c4c;
 
 // Layout
-$screen-xs-min: 475px;
-$screen-xl-min: 1534px;
+//
+// Extension of BS4. This is not redefining the BS4 variable directly as we only
+// need the extra ones for media queries (not creating new breakpoint classes).
+// Note: default BS4 values are hardcoded here while it should be possible to
+// merge with the default BS variable (but we would have to take care of
+// ordering & cie).
+$o-extra-grid-breakpoints: (
+    xs: 0,
+    vsm: 475px,
+    sm: 576px,
+    md: 768px,
+    lg: 992px,
+    xl: 1200px,
+    xxl: 1534px,
+);
 
 $o-form-group-cols: 12;
 $o-form-spacing-unit: 5px;
diff --git a/addons/web/static/src/scss/progress_bar.scss b/addons/web/static/src/scss/progress_bar.scss
index 8aaade8812f..71af77082f6 100644
--- a/addons/web/static/src/scss/progress_bar.scss
+++ b/addons/web/static/src/scss/progress_bar.scss
@@ -23,7 +23,7 @@
         }
 
         .o_progressbar_complete {
-            background-color: $o-brand-optional;
+            background-color: $o-brand-primary;
             height: 100%;
         }
     }
diff --git a/addons/web/static/src/scss/rainbow.scss b/addons/web/static/src/scss/rainbow.scss
index 8a705242adc..fa666fca246 100644
--- a/addons/web/static/src/scss/rainbow.scss
+++ b/addons/web/static/src/scss/rainbow.scss
@@ -10,31 +10,31 @@
     z-index: $zindex-modal;
     padding: 50px;
     margin: -5% auto 0 (-$reward-size / 2);
-    @media (max-width: $screen-xs-max) {
+    @include media-breakpoint-down(sm) {
         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);
+    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 media-breakpoint-down(sm) {
         @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);
+        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);
+            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);
+                animation: reward-rainbow-reverse ($reward-base-time * 0.5) ease-out 0s 1 normal forwards;
             }
         }
 
@@ -51,13 +51,13 @@
             fill: none;
             stroke-linecap: round;
             stroke-width: 21px;
-            @include o-animation(reward-rainbow, ($reward-base-time ), ease-out, 0s, 1, normal, forwards);
+            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);
+        animation: reward-jump $reward-base-time * 0.8 ease-in-out 0s 1 normal none running;
         @include o-position-absolute(6%, 0, 0, 0);
         @include size(100%, 60%);
     }
@@ -68,14 +68,14 @@
         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);
+        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 media-breakpoint-down(sm) {
             @include size($reward-size-mobile * 0.75, $reward-size-mobile / 2);
         }
         @include o-position-absolute(18%, 7%);
@@ -83,10 +83,10 @@
         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);
+            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);
+                animation: reward-stars ($reward-base-time*1.2) ease-in-out 0s infinite alternate;
             }
 
             &.star2 {
@@ -110,7 +110,7 @@
     .o_reward_thumbup {
         width: 40px;
         display: block;
-        @include o-animation(reward-scale, $reward-base-time * 0.5, ease-in-out, 0s, infinite, alternate);
+        animation: reward-scale ($reward-base-time * 0.5) ease-in-out 0s infinite alternate;
         @include o-position-absolute(63%, auto, auto, 65%);
     }
 
@@ -121,9 +121,9 @@
         margin-left: 15%;
 
         // Translate before animate
-        @include o-transform(translateY(5px));
+        transform: translateY(5px);
 
-        @include o-animation(reward-float, $reward-base-time, ease-in-out, $reward-base-time, infinite, alternate-reverse);
+        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 {
@@ -155,16 +155,16 @@
         }
 
         .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);
+            transform: translateY(0px) rotateZ(0);
+            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);
+            transform: scale(0.8) rotateZ(0);
+            animation: reward-scale $reward-base-time ease-in-out $reward-base-time infinite alternate;
             @include o-position-absolute(auto, auto, -40px, 0);
         }
     }
@@ -187,25 +187,25 @@
 
 @keyframes reward-jump {
     0% {
-        @include o-transform(scale(0.5));
+        transform: scale(0.5);
     }
     50% {
-        @include o-transform(scale(1.05));
+        transform: scale(1.05);
     }
     to {
-        @include o-transform(scale(1));
+        transform: scale(1);
     }
 }
 
 @keyframes reward-jump-reverse {
     0% {
-        @include o-transform(scale(1));
+        transform: scale(1);
     }
     50% {
-        @include o-transform(scale(1.05));
+        transform: scale(1.05);
     }
     to {
-        @include o-transform(scale(0.5));
+        transform: scale(0.5);
     }
 }
 
@@ -226,30 +226,30 @@
 
 @keyframes reward-float {
     from {
-        @include o-transform(translateY(0px));
+        transform: translateY(0px);
     }
     to {
-        @include o-transform(translateY(5px));
+        transform: translateY(5px);
     }
 }
 
 @keyframes reward-stars {
     from {
-        @include o-transform(scale(0.3) rotate(0deg));
+        transform: scale(0.3) rotate(0deg);
     }
     50% {
-        @include o-transform(scale(1.0) rotate(20deg));
+        transform: scale(1.0) rotate(20deg);
     }
     to {
-        @include o-transform(scale(0.3) rotate(80deg));
+        transform: scale(0.3) rotate(80deg);
     }
 }
 
 @keyframes reward-scale {
     from {
-        @include o-transform(scale(0.8));
+        transform: scale(0.8);
     }
     to {
-        @include o-transform(scale(1.0));
+        transform: scale(1.0);
     }
 }
diff --git a/addons/web/static/src/scss/report.scss b/addons/web/static/src/scss/report.scss
index a2df1fbc69b..cce5c6d3be5 100644
--- a/addons/web/static/src/scss/report.scss
+++ b/addons/web/static/src/scss/report.scss
@@ -11,7 +11,7 @@ body {
 }
 
 /* See https://github.com/wkhtmltopdf/wkhtmltopdf/issues/1524 */
-.table-condensed {
+.table-sm {
     > thead > tr > th {
         border-bottom: none !important;
     }
@@ -30,7 +30,7 @@ body {
 }
 
 /* Wkhtmltopdf doesn't support very well the media-print CSS (depends on the version) */
-.hidden-print{
+.d-print-none{
     display: none;
 }
 
diff --git a/addons/web/static/src/scss/search_groupby_menu.scss b/addons/web/static/src/scss/search_groupby_menu.scss
deleted file mode 100644
index 4092b4b5fb7..00000000000
--- a/addons/web/static/src/scss/search_groupby_menu.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-// Group By
-.o_group_by_menu {
-    @include o-selected-li;
-
-    max-height: calc(100vh - 125px);
-    overflow: auto;
-
-    .o_add_group { // add button
-        @include o-search-options-dropdown-custom-li;
-    }
-
-    .o_submenu_switcher {
-    	position: absolute;
-    	right: 0px;
-    }
-}
diff --git a/addons/web/static/src/scss/search_view.scss b/addons/web/static/src/scss/search_view.scss
index 0ff5fd320e7..700c13f7e84 100644
--- a/addons/web/static/src/scss/search_view.scss
+++ b/addons/web/static/src/scss/search_view.scss
@@ -1,11 +1,10 @@
-@mixin o-search-options-dropdown-custom-li {
-    margin: 3px 25px;
+@mixin o-search-options-dropdown-custom-item {
     width: auto;
     max-width: 250px;
 }
 
 .o_searchview {
-    @include o-align-items(flex-end);
+    align-items: flex-end;
     position: relative;
     padding: 0 20px 1px 0;
 
@@ -15,25 +14,25 @@
     }
 
     .o_searchview_input_container {
-        @include o-flex-display;
-        @include o-flex-flow(row, wrap);
+        display: flex;
+        flex-flow: row wrap;
 
         .o_searchview_facet {
             $o-searchview-facet-remove-width: 18px;
-            @include o-flex(0, 0, auto);
+            flex: 0 0 auto;
             max-width: 100%;
-            @include o-flex-display;
+            display: flex;
             position: relative;
             margin: 1px 3px 0 0;
 
             .o_searchview_facet_label {
-                @include o-flex(0, 0, auto);
+                flex: 0 0 auto;
                 @include o-text-overflow;
                 padding: 0 3px;
                 color: white;
 
-                @include o-flex-display;
-                @include o-align-items(center);
+                display: flex;
+                align-items: center;
             }
 
             .o_facet_values {
@@ -43,10 +42,10 @@
                 }
             }
             .o_facet_remove {
-                @include o-flex(0, 0, auto);
-                @include o-flex-display;
-                @include o-justify-content(center);
-                @include o-align-items(center);
+                flex: 0 0 auto;
+                display: flex;
+                justify-content: center;
+                align-items: center;
                 @include o-position-absolute(0, 0, 0);
                 width: $o-searchview-facet-remove-width;
                 cursor: pointer;
@@ -54,7 +53,7 @@
         }
         .o_searchview_input {
             width: 100px;
-            @include o-flex(1, 0, auto);
+            flex: 1 0 auto;
         }
 
         .o_searchview_more {
@@ -107,7 +106,7 @@
 
     display: inline-block;
     cursor: pointer;
-    @include user-select(none);  // Prevent text selection when toggling the dropdowns
+    user-select: none;  // Prevent text selection when toggling the dropdowns
     > a { // dropdown togglers
         color: $o-main-text-color;
         &:hover {
@@ -116,7 +115,7 @@
             color: darken($o-main-text-color, 10%);
         }
     }
-    &.open > a {
+    &.show > a {
         font-weight: bold;
         color: darken($o-main-text-color, 10%);
     }
@@ -130,7 +129,7 @@
     a:before {
         @include o-caret-right;
         @include o-position-absolute($top: 50%, $left: 10px);
-        margin-top: (-$caret-width-base);
+        margin-top: (-$caret-width);
     }
 }
 .o_open_menu {
@@ -138,7 +137,7 @@
     a:before {
         @include o-caret-down;
         @include o-position-absolute($top: 50%, $left: 10px);
-        margin-top: (-$caret-width-base);
+        margin-top: (-$caret-width);
     }
 }
 
@@ -150,7 +149,7 @@
     overflow: auto;
 
     .o_filter_condition {
-        @include o-search-options-dropdown-custom-li;
+        @include o-search-options-dropdown-custom-item;
         margin-bottom: 8px;
         .o_or_filter { // or between conditions
             display: none;  // hidden for the first condition
@@ -177,7 +176,7 @@
     }
     .o_add_filter_menu { // apply and add buttons
         display: none;  // Needed by the webclient
-        @include o-search-options-dropdown-custom-li;
+        @include o-search-options-dropdown-custom-item;
     }
     .o_submenu_switcher {
         position: absolute;
@@ -196,7 +195,7 @@
     max-height: calc(100vh - 125px);
     overflow: auto;
 
-    .divider {display: none;} // hide the divider by default (no favorite)
+    .dropdown-divider {display: none;} // hide the divider by default (no favorite)
     .o-searchview-custom-private, .o-searchview-custom-public {
         .o-remove-filter {
             @include o-position-absolute(50%, 12px);
@@ -212,6 +211,6 @@
     }
     .o_save_name { // save button
         display: none; // hidden by default
-        @include o-search-options-dropdown-custom-li;
+        @include o-search-options-dropdown-custom-item;
     }
 }
diff --git a/addons/web/static/src/scss/search_view_extra.scss b/addons/web/static/src/scss/search_view_extra.scss
index d2098a5f9c3..1deba51bfba 100644
--- a/addons/web/static/src/scss/search_view_extra.scss
+++ 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;
     padding: 1px 25px 3px 5px;
 
     .o_searchview_facet {
-        border: 1px solid $gray-light;
-        background: lighten($o-brand-primary, 35%);
+        border: 1px solid gray('600');
+        background: lighten($o-brand-odoo, 35%);
 
         .o_searchview_facet_label {
-            background-color: $gray-light;
+            background-color: gray('600');
         }
 
         .o_facet_remove {
-            color: $gray-light;
+            color: gray('600');
             &:hover {
-                color: $gray;
+                color: gray('700');
             }
         }
     }
@@ -28,7 +28,7 @@
         @include o-position-absolute($top: 6px, $right: 5px);
     }
     .o_searchview_autocomplete li.o-selection-focus {
-        background-color: $o-brand-primary;
+        background-color: $o-brand-odoo;
         > a {
             color: white;
         }
diff --git a/addons/web/static/src/scss/search_view_mobile.scss b/addons/web/static/src/scss/search_view_mobile.scss
index c36f5d39850..f5ccd133cc1 100644
--- a/addons/web/static/src/scss/search_view_mobile.scss
+++ b/addons/web/static/src/scss/search_view_mobile.scss
@@ -48,7 +48,7 @@
             .o_dropdown {
                 width: 100%;
                 margin: 15px 5px 0px 5px;
-                border: solid 1px darken($gray-lighter, 20%);
+                border: solid 1px darken(gray('200'), 20%);
 
             }
             .o_dropdown_toggler_btn {
@@ -66,7 +66,7 @@
                 width: 100%;
                 box-shadow: none;
                 border: none;
-                color: $gray-light;
+                color: gray('600');
                 .divider {
                     margin: 0px;
                 }
@@ -85,4 +85,4 @@
             z-index: 1000;
         }
     }
-}
\ No newline at end of file
+}
diff --git a/addons/web/static/src/scss/secondary_variables.scss b/addons/web/static/src/scss/secondary_variables.scss
index 8ab2d5bc322..ee7f15eded6 100644
--- a/addons/web/static/src/scss/secondary_variables.scss
+++ b/addons/web/static/src/scss/secondary_variables.scss
@@ -1,30 +1,21 @@
-// 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-webclient-background-color: $o-gray-100;
+$o-control-panel-background-color: $o-gray-100;
 
 $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,
+// Note: the first value is the old BS3 gray-light value
+$o-colors: lighten(#000, 46.7%), #F06050, #F4A460, #F7CD1F, #6CC1ED, #814968,
               #EB7E7F, #2C8397, #475577, #D6145F, #30C381, #9365B8;
 
-$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-navbar-inverse-link-hover-bg: darken($o-brand-odoo, 10%);
 
 $o-datepicker-week-bg-color: lighten($o-datepicker-week-color, 30%);
 
diff --git a/addons/web/static/src/scss/tooltip.scss b/addons/web/static/src/scss/tooltip.scss
index 765db1292da..e40852dd6bc 100644
--- a/addons/web/static/src/scss/tooltip.scss
+++ b/addons/web/static/src/scss/tooltip.scss
@@ -9,7 +9,7 @@
         max-width: 100vw;
         background-color: $o-tooltip-background-color;
         color: $o-tooltip-color;
-        border-radius: $border-radius-base;
+        border-radius: $border-radius;
         box-shadow: 0px 0px 1px 1px $o-brand-secondary;
 
         padding: 5px;
@@ -17,7 +17,7 @@
         text-align: left;
 
         .oe_tooltip_string {
-            background-color: $o-brand-primary;
+            background-color: $o-brand-odoo;
             color: white;
             font-weight: bold;
             padding: 5px;
diff --git a/addons/web/static/src/scss/ui.scss b/addons/web/static/src/scss/ui.scss
index d88f21f83a1..d8c68853c0a 100644
--- a/addons/web/static/src/scss/ui.scss
+++ b/addons/web/static/src/scss/ui.scss
@@ -13,3 +13,13 @@
 [aria-hidden="true"], [aria-hidden="1"] {
     display: none!important;
 }
+
+.dropdown-toggle {
+    white-space: nowrap;
+
+    &.o-no-caret {
+        &::before, &::after {
+            content: normal;
+        }
+    }
+}
diff --git a/addons/web/static/src/scss/ui_extra.scss b/addons/web/static/src/scss/ui_extra.scss
index 0d97c09092e..e69de29bb2d 100644
--- a/addons/web/static/src/scss/ui_extra.scss
+++ b/addons/web/static/src/scss/ui_extra.scss
@@ -1,10 +0,0 @@
-//------------------------------------------------------------------------------
-// Checkboxes
-//------------------------------------------------------------------------------
-div.o_checkbox {
-    display: inline-block;
-    vertical-align: sub;
-    > input + span {
-        display: none;
-    }
-}
diff --git a/addons/web/static/src/scss/utils.scss b/addons/web/static/src/scss/utils.scss
index efb8dce7598..9f254c82ecd 100644
--- a/addons/web/static/src/scss/utils.scss
+++ b/addons/web/static/src/scss/utils.scss
@@ -14,119 +14,6 @@
 }
 
 // ------------------------------------------------------------------
-// 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) {
@@ -150,43 +37,6 @@
 }
 
 // ------------------------------------------------------------------
-// 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) {
@@ -222,7 +72,7 @@
 // ------------------------------------------------------------------
 // Caret
 // ------------------------------------------------------------------
-@mixin o-caret-down($caret-width: $caret-width-base) {
+@mixin o-caret-down($caret-width: $caret-width) {
     @include utils-caret-boilerplate;
     border-bottom: 0;
     border-left: $caret-width solid transparent;
@@ -230,7 +80,7 @@
     border-top: $caret-width solid;
     -moz-transform: scale(0.9999); // Smooth the caret on firefox
 }
-@mixin o-caret-up($caret-width: $caret-width-base) {
+@mixin o-caret-up($caret-width: $caret-width) {
     @include utils-caret-boilerplate;
     border-bottom: $caret-width solid;
     border-left: $caret-width solid transparent;
@@ -238,7 +88,7 @@
     border-top: 0;
     -moz-transform: scale(0.9999); // Smooth the caret on firefox
 }
-@mixin o-caret-left($caret-width: $caret-width-base) {
+@mixin o-caret-left($caret-width: $caret-width) {
     @include utils-caret-boilerplate;
     border-bottom: $caret-width solid transparent;
     border-left: 0;
@@ -246,7 +96,7 @@
     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) {
+@mixin o-caret-right($caret-width: $caret-width) {
     @include utils-caret-boilerplate;
     border-bottom: $caret-width solid transparent;
     border-left: $caret-width solid;
@@ -258,25 +108,22 @@
 // ------------------------------------------------------------------
 // Dropdowns
 // ------------------------------------------------------------------
-@mixin o-selected-li {
-    li {
+@mixin o-selected-li { // FIXME use active ?
+    .dropdown-item {
         position: relative;
-        > a {
-            color: $o-main-text-color;
-            &:hover {
-                color: darken($o-main-text-color, 10%);
-            }
+        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";
-                }
+            color: darken($o-main-text-color, 10%);
+            font-weight: bold;
+            &:before {
+                font-family: FontAwesome;
+                position: absolute;
+                left: 6px;
+                content: "\f00c";
             }
         }
     }
@@ -285,7 +132,7 @@
 // ------------------------------------------------------------------
 // Hovering effects
 // ------------------------------------------------------------------
-@mixin o-hover-text-color($default-color: $text-color, $hover-color: $link-color) {
+@mixin o-hover-text-color($default-color: $body-color, $hover-color: $link-color) {
     color: $default-color;
 
     &:hover, &:focus, &.focus {
@@ -316,7 +163,7 @@
     display: block;
     text-align: center;
     color: $o-main-text-color;
-    font-size: $font-size-small;
+    font-size: $font-size-sm;
     cursor: pointer;
     @include o-hover-opacity($base-opacity);
 }
@@ -339,22 +186,22 @@
 }
 @mixin o-kanban-slim-col {
     position: relative;
-    @include o-flex(0, 0, auto);
+    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);
+    display: flex;
+    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));
+    transform-origin: left bottom 0;
+    transform: rotate(90deg);
     overflow: visible;
     white-space: nowrap;
     font-size: 15px;
@@ -374,7 +221,7 @@
     border: 1px solid transparent;
     border-bottom: none;
     vertical-align: top;
-    color: $text-color;
+    color: $body-color;
 
     &:hover {
         color: $headings-color;
@@ -386,13 +233,13 @@
 @mixin o-kanban-dropdown-open {
     position: relative;
     background: white;
-    border-color: $gray-lighter-darker;
+    border-color: gray('400');
     z-index: $zindex-dropdown + 1;
 }
 @mixin o-kanban-dropdown-menu {
     @include o-position-absolute($right: -1px);
     margin-top: -1px;
-    border-color: $gray-lighter-darker;
+    border-color: gray('400');
 }
 @mixin o-kanban-colorpicker {
     max-width: 150px;
@@ -402,7 +249,7 @@
         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;
+        box-shadow: 0 0 0 1px gray('300');
 
         > a {
             display: block;
@@ -424,7 +271,7 @@
                 display: block;
                 width: 1px;
                 height: 20px;
-                @include rotate(45deg);
+                transform: rotate(45deg);
                 background-color: red;
             }
             &::after {
@@ -441,11 +288,11 @@
     > a {
         margin: auto auto auto (-$link-padding-gap);
         padding: 3px $link-padding-gap;
-        color: $text-color;
+        color: $body-color;
         display: block;
 
         &:hover {
-            background-color: $gray-lighter-dark;
+            background-color: gray('300');
             color: $headings-color;
         }
     }
diff --git a/addons/web/static/src/scss/views.scss b/addons/web/static/src/scss/views.scss
index e3562026ffe..e4e86231940 100644
--- a/addons/web/static/src/scss/views.scss
+++ b/addons/web/static/src/scss/views.scss
@@ -18,13 +18,13 @@
     border-radius: 6px;
     vertical-align: middle;
 
-    background-color: $gray-lighter-dark;
+    background-color: gray('300');
 
     &.o_status_green {
-        background-color: $brand-success;
+        background-color: theme-color('success');
     }
     &.o_status_red {
-        background-color: $brand-danger;
+        background-color: theme-color('danger');
     }
 }
 
diff --git a/addons/web/static/src/scss/web_calendar.scss b/addons/web/static/src/scss/web_calendar.scss
index 7091cbc3c98..ae22efb2675 100644
--- a/addons/web/static/src/scss/web_calendar.scss
+++ b/addons/web/static/src/scss/web_calendar.scss
@@ -1,12 +1,12 @@
 @keyframes backgroundfade {
-    from {background-color: rgba($o-brand-primary, 0.5);}
+    from {background-color: rgba($o-brand-odoo, 0.5);}
     to {background-color: #f5f5f5;}
 }
 
 .o_calendar_container {
     height: 100%;
     @include o-webclient-padding($top: $o-horizontal-padding/2, $bottom: $o-horizontal-padding/2);
-    @include o-flex-display;
+    display: flex;
 
     @for $index from 1 through $o-nb-calendar-colors {
         .o_calendar_color_#{$index} {
@@ -28,7 +28,7 @@
     }
 
     .o_calendar_view {
-        @include o-flex(1, 1, auto);
+        flex: 1 1 auto;
         min-width: 0;
 
         .o_calendar_widget {
@@ -62,7 +62,7 @@
     }
 
     .o_calendar_sidebar_container {
-        @include o-flex(0, 0, $o-horizontal-padding);
+        flex: 0 0 $o-horizontal-padding;
         position: relative;
 
         &.o_sidebar_hidden {
@@ -97,13 +97,13 @@
             padding: 0;
 
             .ui-widget-header {
-                @include o-flex-display;
+                display: flex;
                 background: none;
                 background-color: lighten($o-brand-secondary, 30%);
                 border-radius: 0;
 
                 .ui-datepicker-prev, .ui-datepicker-next {
-                    @include o-flex(0, 0, auto);
+                    flex: 0 0 auto;
                     position: static;
                     cursor: pointer;
                     padding: 2px;
@@ -133,7 +133,7 @@
                     }
                 }
                 .ui-datepicker-title {
-                    @include o-flex(0, 0, auto);
+                    flex: 0 0 auto;
                     order: 2;
                     display: inline-block;
                     margin: 0 10px;
@@ -151,22 +151,22 @@
                     }
                 }
                 .ui-state-default {
-                    color: $o-brand-primary;
+                    color: $o-brand-odoo;
                     &:hover {
                         background: none;
-                        background-color: rgba($o-brand-primary, 0.5);
-                        border-color: $o-brand-primary;
+                        background-color: rgba($o-brand-odoo, 0.5);
+                        border-color: $o-brand-odoo;
                         color: $o-view-background-color;
                     };
                 }
                 .ui-state-active {
                     background: none;
-                    background-color: $o-brand-primary;
+                    background-color: $o-brand-odoo;
                     color: $o-view-background-color;
                 }
                 .o_selected_range.o_color {
                     background: none;
-                    background-color: $o-brand-primary;
+                    background-color: $o-brand-odoo;
                     animation: backgroundfade 3s forwards;
                 }
             }
@@ -199,12 +199,12 @@
 }
 
 // Mobile rules
-@media only screen and (max-width: 768px) {
+@include media-breakpoint-down(sm) {
     .o_calendar_container {
         padding: 0;
     }
 }
-@media (max-width: $screen-xs-max) {
+@include media-breakpoint-down(sm) {
     .o_control_panel {
         .o_calendar_button_today {
             float: right;
diff --git a/addons/web/static/src/scss/webclient.scss b/addons/web/static/src/scss/webclient.scss
index 8f4dadb22df..8c213a57682 100644
--- a/addons/web/static/src/scss/webclient.scss
+++ b/addons/web/static/src/scss/webclient.scss
@@ -1,3 +1,7 @@
+:root {
+    font-size: $o-root-font-size;
+}
+
 // ------------------------------------------------------------------
 //  General
 // ------------------------------------------------------------------
@@ -13,7 +17,7 @@
     width: 300px;
     max-width: 100%;
 
-    @include o-position-absolute($navbar-height, 0px);
+    @include o-position-absolute($nav-link-height, 0);
     z-index: 1100; // Bootstrap modal z-index is 1050
 
     .o_notification {
@@ -33,8 +37,8 @@
         }
 
         .o_notification_title {
-            @include o-flex-display;
-            @include o-align-items(center);
+            display: flex;
+            align-items: center;
 
             border-bottom: 1px solid rgba(0, 0, 0, 0.1);
             padding: 10px 10px 10px 20px;
@@ -101,26 +105,26 @@ div.o_boolean_toggle {
     }
 
     > input:checked + .slider {
-        background-color: $o-brand-optional;
+        background-color: $o-brand-primary;
 
         &:before {
-            @include translate(14px, 0px);
+            transform: translate(14px, 0px);
         }
     }
 }
 
 // Full bg colors (bootstrap extension)
 .bg-success-full {
-    background-color: $brand-success;
+    background-color: theme-color('success');
 }
 .bg-warning-full {
-    background-color: $brand-warning;
+    background-color: theme-color('warning');
 }
 .bg-danger-full {
-    background-color: $brand-danger;
+    background-color: theme-color('danger');
 }
 .bg-info-full {
-    background-color: $brand-info;
+    background-color: theme-color('info');
 }
 
 .o_web_accesskey_overlay {
@@ -151,28 +155,26 @@ div.o_boolean_toggle {
 //== Badges
 .badge {
     margin: 1px 2px 1px 0;
-    padding-top: 0;
-    padding-bottom: 0;
 }
 
 // Btn-link variations
 .btn-link {
     font-weight: $btn-font-weight;
 
-    &.btn-default {
-        @include o-btn-link-variant($text-color, $headings-color);
+    &.btn-secondary {
+        @include o-btn-link-variant($body-color, $headings-color);
     }
     &.btn-success, &.text-success {
-        @include o-btn-link-variant($text-color, $brand-success);
+        @include o-btn-link-variant($body-color, theme-color('success'));
     }
     &.btn-warning, &.text-warning {
-        @include o-btn-link-variant($text-color, $brand-warning);
+        @include o-btn-link-variant($body-color, theme-color('warning'));
     }
     &.btn-danger, &.text-danger {
-        @include o-btn-link-variant($text-color, $brand-danger);
+        @include o-btn-link-variant($body-color, theme-color('danger'));
     }
     &.btn-info, &.text-info {
-        @include o-btn-link-variant($text-color, darken($brand-info, 20%));
+        @include o-btn-link-variant($body-color, darken(theme-color('info'), 20%));
     }
 }
 
diff --git a/addons/web/static/src/scss/webclient_extra.scss b/addons/web/static/src/scss/webclient_extra.scss
index cc87e526f8d..80e9390c534 100644
--- a/addons/web/static/src/scss/webclient_extra.scss
+++ b/addons/web/static/src/scss/webclient_extra.scss
@@ -8,7 +8,7 @@
 }
 .o_input {
     border: 1px solid $o-form-lightsecondary;
-    border-radius: $border-radius-base;
+    border-radius: $border-radius;
     padding: 2px 4px;
     color: #1f1f1f;
 
@@ -29,7 +29,7 @@ select {
     top: 0;
     right: 50%;
     padding: 4px 12px;
-    background-color: $o-color-pink;
+    background-color: $o-enterprise-color; // FIXME probably supposed to be primary to be auto-adapted in enterprise ?
     color: white;
     text-align: center;
     border-top: none;
@@ -44,8 +44,3 @@ select {
     @include o-text-overflow;
     max-width: 150px;
 }
-
-// Button
-.btn-icon {
-    @include button-variant($btn-default-color, $btn-default-bg, $btn-default-border);
-}
diff --git a/addons/web/static/src/scss/webclient_layout.scss b/addons/web/static/src/scss/webclient_layout.scss
index f811df48802..c8bb9e3c3ed 100644
--- a/addons/web/static/src/scss/webclient_layout.scss
+++ b/addons/web/static/src/scss/webclient_layout.scss
@@ -1,7 +1,7 @@
 
 .o_web_client {
-    @include o-flex-display;
-    @include o-flex-flow(column, nowrap);
+    display: flex;
+    flex-flow: column nowrap;
     overflow: hidden;
 
     &.o_fullscreen {
@@ -15,7 +15,7 @@
 
 
     .navbar {
-        @include o-flex(0, 0, auto);
+        flex: 0 0 auto;
 
         li > a {
             padding: 4px 8px;
@@ -30,20 +30,20 @@
     }
 
     > .o_main {
-        @include o-flex(1, 1, auto);
-        @include o-flex-display;
+        flex: 1 1 auto;
+        display: flex;
         min-height: 0; // Allow flex to shrink this element as much as it wants
         height: 100%;
 
         .o_sub_menu {
-            @include o-flex(0, 0, 220px);
-            @include o-flex-display;
-            @include o-flex-flow(column, nowrap);
+            flex: 0 0 220px;
+            display: flex;
+            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 {
-                @include o-flex(0, 0, auto);
+                flex: 0 0 auto;
                 text-align: center;
                 position: relative;
 
@@ -67,14 +67,14 @@
             }
 
             .o_sub_menu_content {
-                @include o-flex(1, 1, auto);
+                flex: 1 1 auto;
                 height:100%;
                 overflow-y: auto;
 
                 .oe_secondary_menu_section {
                     font-weight: bold;
                     margin-left: 8px;
-                    color: $o-brand-optional;
+                    color: $o-brand-primary;
                 }
                 .oe_secondary_submenu {
                     margin: 3px 0px 10px;
@@ -128,28 +128,28 @@
             }
 
             .o_sub_menu_footer {
-                @include o-flex(0, 0, auto);
+                flex: 0 0 auto;
                 text-align: center;
 
                 > a {
                     font-weight: bold;
                     > span {
-                        color: $o-color-pink;
+                        color: $o-enterprise-color; // FIXME probably supposed to be primary to be auto-adapted in enterprise ?
                     }
                 }
             }
         }
 
         .o_main_content {
-            @include o-flex(1, 1, auto);
-            @include o-flex-display;
-            @include o-flex-flow(column, nowrap);
+            flex: 1 1 auto;
+            display: flex;
+            flex-flow: column nowrap;
 
             .o_control_panel {
-                @include o-flex(0, 0, auto);
+                flex: 0 0 auto;
             }
             .o_content {
-                @include o-flex(1, 1, auto);
+                flex: 1 1 auto;
                 height: 100%;
                 overflow: auto;
                 position: relative;