[REF] *: BS4, review color system

Odoo used to declare two main colors: primary and optional (which are
purple and turquoise in enterprise). Those were respectively assigned
to the 'primary' bootstrap variable and the 'btn-primary' bootstrap
variable.

BS4, however, does not allow to have a different primary color for
buttons. Instead, the 'primary' color is used for all 'primary' related
components and utility classes, same as for all other colors. So, if we
want to keep our enterprise buttons green, our 'optional' colors had to
become our 'primary' color. The old odoo primary is then renamed to the
'odoo' color.

The palette of grays is now larger by default and is numbered from 100 to
900 alongside the $black and $white variables. The equivalence for older
variables and the way we used them is:

$gray-darker          ->  gray 900 (unused before)
$gray-dark            ->  gray 900
$gray                 ->  gray 700
$gray-light           ->  gray 600
$gray-lighter-darker  ->  gray 400 (the old variable was created by us)
$gray-lighter-dark    ->  gray 300 (the old variable was created by us)
$gray-lighter         ->  gray 200

Fortunately, the 'lighter' variations we created fit well in the default
BS4 system ! Unfortunately, our $gray-lighter which carried the same
function as $gray-200 (see above) is very close to the new default
$gray-100 and quite distant from the new $gray-200. This will be handled
in the next commit.

35 files changed, 172 insertions, 176 deletions

diff --git a/addons/web/static/src/scss/base_settings.scss b/addons/web/static/src/scss/base_settings.scss
index b6615a39f80..436298872da 100644
--- a/addons/web/static/src/scss/base_settings.scss
+++ b/addons/web/static/src/scss/base_settings.scss
@@ -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');
                 }
             }
         }
@@ -83,7 +83,7 @@
             display: flex;
             flex: 0 0 auto;
             flex-flow: column nowrap;
-            background: $gray-dark;
+            background: gray('900');
             overflow: auto;
             padding-top: $o-horizontal-padding*0.5;
 
@@ -96,8 +96,8 @@
             }
 
             .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;
@@ -108,7 +108,7 @@
                 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;
@@ -138,7 +138,7 @@
 
                     &:after {
                         content: '';
-                        background: $o-brand-optional;
+                        background: $o-brand-primary;
                         opacity: 0;
                         @include o-position-absolute(auto, 0, 0, 0);
                         @include size(100%, 3px);
@@ -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;
 
@@ -199,7 +199,7 @@
                 display: flex;
                 margin: 30px 0 10px;
                 @include o-base-settings-horizontal-padding;
-                background-color: $gray-lighter;
+                background-color: gray('200');
 
                 .icon {
                     width: 25px;
diff --git a/addons/web/static/src/scss/bootstrap_overridden.scss b/addons/web/static/src/scss/bootstrap_overridden.scss
index 9c26fa886eb..a96775ee837 100644
--- a/addons/web/static/src/scss/bootstrap_overridden.scss
+++ b/addons/web/static/src/scss/bootstrap_overridden.scss
@@ -13,13 +13,14 @@ $gray-200: $o-color-silver; // FIXME keep this or use bootstrap default ? (also
 $gray-300: #dee2e6 !default; // This is BS default
 $gray-400: #ced4da !default; // This is BS default
 $gray-500: #adb5bd !default; // This is BS default
-$gray-600: $o-color-gray-light !default; // This is BS default
+$gray-600: #6c757d !default; // This is BS default
 $gray-700: #495057 !default; // This is BS default
 $gray-800: #343a40 !default; // This is BS default
 $gray-900: #212529 !default; // This is BS default
 $black:    #000 !default; // This is BS default
 
 $primary: $o-brand-primary;
+$secondary: $white;
 
 // Body
 //
@@ -32,7 +33,6 @@ $body-color: $o-main-text-color;
 //
 // Style anchor elements.
 
-$link-color: $o-brand-optional;
 $link-hover-decoration: none;
 
 // Grid columns
@@ -47,7 +47,7 @@ $grid-gutter-width: $o-horizontal-padding * 2;
 
 $border-radius: 3px;
 
-$component-active-color: $o-brand-optional;
+$component-active-color: $o-brand-primary;
 $component-active-bg: $gray-200;
 
 // Fonts
@@ -105,7 +105,7 @@ $nav-tabs-link-active-bg: $white;
 
 $nav-pills-border-radius: 0;
 $nav-pills-link-active-color: $white;
-$nav-pills-link-active-bg: $o-brand-optional;
+$nav-pills-link-active-bg: $o-brand-primary;
 
 // Navbar
 
diff --git a/addons/web/static/src/scss/control_panel.scss b/addons/web/static/src/scss/control_panel.scss
index 25d4a725604..144b5f7bbde 100644
--- a/addons/web/static/src/scss/control_panel.scss
+++ b/addons/web/static/src/scss/control_panel.scss
@@ -55,7 +55,7 @@
                 }
                 .o_form_binary_form span {
                     padding: 3px 25px;
-                    color: $btn-secondary-color;
+                    color: $o-brand-primary;
                 }
                 .o_form_binary_form:hover {
                     background-color: $table-bg-hover;
diff --git a/addons/web/static/src/scss/data_export.scss b/addons/web/static/src/scss/data_export.scss
index ab2635657ad..c03d13b355b 100644
--- a/addons/web/static/src/scss/data_export.scss
+++ b/addons/web/static/src/scss/data_export.scss
@@ -52,7 +52,7 @@
                 user-select: none;
 
                 &.o_selected > .o_tree_column {
-                    background-color: $o-brand-primary;
+                    background-color: $o-brand-odoo;
                     color: white;
                 }
 
diff --git a/addons/web/static/src/scss/datepicker.scss b/addons/web/static/src/scss/datepicker.scss
index b8902541734..68a839d8fd8 100644
--- a/addons/web/static/src/scss/datepicker.scss
+++ b/addons/web/static/src/scss/datepicker.scss
@@ -43,13 +43,13 @@ div.dropdown-menu.bootstrap-datetimepicker-widget{
     .table-condensed {
         > 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%);
                     }
                 }
 
@@ -67,12 +67,12 @@ div.dropdown-menu.bootstrap-datetimepicker-widget{
             > 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 ed4ed956a9e..b35934973b9 100644
--- a/addons/web/static/src/scss/domain_selector.scss
+++ b/addons/web/static/src/scss/domain_selector.scss
@@ -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;
@@ -172,7 +172,7 @@
         display: block;
         height: $o-domain-animation-bar-height;
         max-height: 0;
-        background-image: linear-gradient(45deg, rgba($o-brand-optional, 0.4), rgba($o-brand-optional, 0.1));
+        background-image: linear-gradient(45deg, rgba($o-brand-primary, 0.4), rgba($o-brand-primary, 0.1));
         transition: max-height .05s ease .05s;
     }
 
diff --git a/addons/web/static/src/scss/dropdown.scss b/addons/web/static/src/scss/dropdown.scss
index 8287e098b32..90deb20083f 100644
--- a/addons/web/static/src/scss/dropdown.scss
+++ b/addons/web/static/src/scss/dropdown.scss
@@ -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;
             }
         }
     }
diff --git a/addons/web/static/src/scss/dropdown_extra.scss b/addons/web/static/src/scss/dropdown_extra.scss
index cc51876d017..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 {
diff --git a/addons/web/static/src/scss/fields.scss b/addons/web/static/src/scss/fields.scss
index 22a392b762b..f869e0f37fe 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
     }
 }
 
@@ -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,15 +239,15 @@
             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%);
             }
         }
     }
@@ -299,7 +299,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: " ";
@@ -328,7 +328,7 @@
                 border-radius: 100%;
 
                 font-weight: 700;
-                color: $o-brand-primary;
+                color: $o-brand-odoo;
             }
         }
     }
@@ -351,7 +351,7 @@
             width: 100%;
 
             color: white;
-            background-color: $o-brand-optional;
+            background-color: $o-brand-primary;
             opacity: 0;
             transition: opacity ease 400ms;
 
@@ -375,10 +375,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 +389,7 @@
         }
 
         &.o_field_invalid > img {
-            border: 1px solid $brand-danger;
+            border: 1px solid theme-color('danger');
         }
     }
 
@@ -417,9 +417,9 @@
     &.o_field_copy {
         position: relative;
         border-radius: 5px;
-        border: 1px solid $btn-primary-border;
+        border: 1px solid $primary;
         font-size: $font-size-sm;
-        color: $o-brand-optional;
+        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 26431b969e6..730f5b9521b 100644
--- a/addons/web/static/src/scss/form_view.scss
+++ b/addons/web/static/src/scss/form_view.scss
@@ -143,7 +143,7 @@
         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 {
@@ -182,7 +182,7 @@
                 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;
                 transition: all 0.1s ease 0s;
@@ -192,7 +192,7 @@
                 }
                 &: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 {
@@ -221,28 +221,28 @@
 
                 &: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');
                     }
                 }
 
@@ -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;
         }
@@ -559,7 +559,7 @@
 
     // Timezone widget warning
     .o_tz_warning {
-        color: $brand-danger;
+        color: theme-color('danger');
         cursor: help;
         position: absolute;
         margin-left: -40px;
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/kanban_column_progressbar.scss b/addons/web/static/src/scss/kanban_column_progressbar.scss
index e6a62f5230f..5f16a222736 100644
--- a/addons/web/static/src/scss/kanban_column_progressbar.scss
+++ b/addons/web/static/src/scss/kanban_column_progressbar.scss
@@ -65,7 +65,7 @@
         width: 76%;
         height: $font-size-sm;
         margin-bottom: 0;
-        background-color: $gray-lighter-dark;
+        background-color: gray('300');
         box-shadow: none;
 
         .progress-bar {
@@ -112,9 +112,9 @@
 }
 
 .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 {
         display: flex;
diff --git a/addons/web/static/src/scss/kanban_dashboard.scss b/addons/web/static/src/scss/kanban_dashboard.scss
index e9f6c0d74fc..3330be5bba6 100644
--- a/addons/web/static/src/scss/kanban_dashboard.scss
+++ b/addons/web/static/src/scss/kanban_dashboard.scss
@@ -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 {
@@ -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
@@ -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 b2ae3aa0005..8b79e671019 100644
--- a/addons/web/static/src/scss/kanban_examples_dialog.scss
+++ b/addons/web/static/src/scss/kanban_examples_dialog.scss
@@ -6,12 +6,12 @@
     // sidebar
     .o_kanban_examples_dialog_nav {
         flex: 0 0 auto;
-        border-right: 1px solid $gray-lighter-dark;
+        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;
             }
         }
@@ -48,11 +48,11 @@
                 .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 437ec25b864..ec8f41da4d8 100644
--- a/addons/web/static/src/scss/kanban_view.scss
+++ b/addons/web/static/src/scss/kanban_view.scss
@@ -12,16 +12,16 @@
 
     .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;
 
         @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;
 
@@ -124,7 +124,7 @@
             .o_link_muted {
                 color: $body-color;
                 &:hover {
-                    color: $brand-primary;
+                    color: theme-color('primary');
                     text-decoration: underline;
                 }
             }
@@ -305,7 +305,7 @@
     &.o_kanban_grouped {
         min-height: 100%;
         padding: 0;
-        background-color: $gray-lighter;
+        background-color: gray('200');
 
         .o_kanban_record, .o_kanban_quick_create {
             width: 100%;
@@ -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: gray('200');
 
             .o_kanban_header {
                 height: 50px;
@@ -464,7 +464,7 @@
             }
 
             .o_kanban_muted_record {
-                background: $gray-lighter-dark;
+                background: gray('300');
                 height: 70px;
                 margin: 10px 0px;
             }
diff --git a/addons/web/static/src/scss/kanban_view_mobile.scss b/addons/web/static/src/scss/kanban_view_mobile.scss
index cf54d545a5a..b74ae8aaea5 100644
--- a/addons/web/static/src/scss/kanban_view_mobile.scss
+++ b/addons/web/static/src/scss/kanban_view_mobile.scss
@@ -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..e04ff85597c 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);
         }
@@ -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..3e91ed87805 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,22 +34,22 @@
         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');
                 }
             }
         }
@@ -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..88eb5d43f32 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 {
@@ -72,7 +72,7 @@
             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/model_field_selector.scss b/addons/web/static/src/scss/model_field_selector.scss
index 5d451a06942..1acd3b0cc90 100644
--- a/addons/web/static/src/scss/model_field_selector.scss
+++ b/addons/web/static/src/scss/model_field_selector.scss
@@ -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 {
@@ -118,7 +118,7 @@
                 }
             }
             .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 66a080cf1bd..51f30eba251 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 {
@@ -91,12 +91,12 @@
 
                     > 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
                             }
                         }
diff --git a/addons/web/static/src/scss/pivot_view.scss b/addons/web/static/src/scss/pivot_view.scss
index 9aa0e21bbdd..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;
         }
     }
diff --git a/addons/web/static/src/scss/primary_variables.scss b/addons/web/static/src/scss/primary_variables.scss
index 2589e201226..bc84cdef88a 100644
--- a/addons/web/static/src/scss/primary_variables.scss
+++ b/addons/web/static/src/scss/primary_variables.scss
@@ -9,16 +9,18 @@ $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-color-silver: #F9F9F9; // FIXME
+// $o-color-silver-dark: #E5E5E5; // FIXME keep those or BS default ?
+// $o-color-silver-darker: #d9d7d7; // FIXME keep those or BS default ?
 
-$o-color-pink: #875A7B; // Enterprise $o-brand-primary
 $o-main-color-muted: #a8a8a8;
 $o-main-text-color: #4c4c4c;
 
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/search_view_extra.scss b/addons/web/static/src/scss/search_view_extra.scss
index 7ed08fbbd3b..1deba51bfba 100644
--- a/addons/web/static/src/scss/search_view_extra.scss
+++ b/addons/web/static/src/scss/search_view_extra.scss
@@ -5,17 +5,17 @@
     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 72417929152..1787d629f94 100644
--- a/addons/web/static/src/scss/secondary_variables.scss
+++ b/addons/web/static/src/scss/secondary_variables.scss
@@ -1,10 +1,3 @@
-// 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;
 
@@ -12,7 +5,8 @@ $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;
 
 $o-sheet-cancel-hpadding: $o-horizontal-padding;
@@ -21,7 +15,7 @@ $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 776704dd016..e40852dd6bc 100644
--- a/addons/web/static/src/scss/tooltip.scss
+++ b/addons/web/static/src/scss/tooltip.scss
@@ -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/utils.scss b/addons/web/static/src/scss/utils.scss
index 5c77bebd409..9f254c82ecd 100644
--- a/addons/web/static/src/scss/utils.scss
+++ b/addons/web/static/src/scss/utils.scss
@@ -233,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;
@@ -249,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;
@@ -292,7 +292,7 @@
         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 f659ee7c466..ae22efb2675 100644
--- a/addons/web/static/src/scss/web_calendar.scss
+++ b/addons/web/static/src/scss/web_calendar.scss
@@ -1,5 +1,5 @@
 @keyframes backgroundfade {
-    from {background-color: rgba($o-brand-primary, 0.5);}
+    from {background-color: rgba($o-brand-odoo, 0.5);}
     to {background-color: #f5f5f5;}
 }
 
@@ -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;
                 }
             }
diff --git a/addons/web/static/src/scss/webclient.scss b/addons/web/static/src/scss/webclient.scss
index b90b6f5fee5..dc116ae0d20 100644
--- a/addons/web/static/src/scss/webclient.scss
+++ b/addons/web/static/src/scss/webclient.scss
@@ -105,7 +105,7 @@ div.o_boolean_toggle {
     }
 
     > input:checked + .slider {
-        background-color: $o-brand-optional;
+        background-color: $o-brand-primary;
 
         &:before {
             transform: translate(14px, 0px);
@@ -115,16 +115,16 @@ div.o_boolean_toggle {
 
 // 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 {
@@ -167,16 +167,16 @@ div.o_boolean_toggle {
         @include o-btn-link-variant($body-color, $headings-color);
     }
     &.btn-success, &.text-success {
-        @include o-btn-link-variant($body-color, $brand-success);
+        @include o-btn-link-variant($body-color, theme-color('success'));
     }
     &.btn-warning, &.text-warning {
-        @include o-btn-link-variant($body-color, $brand-warning);
+        @include o-btn-link-variant($body-color, theme-color('warning'));
     }
     &.btn-danger, &.text-danger {
-        @include o-btn-link-variant($body-color, $brand-danger);
+        @include o-btn-link-variant($body-color, theme-color('danger'));
     }
     &.btn-info, &.text-info {
-        @include o-btn-link-variant($body-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 65411bfaa8b..80e9390c534 100644
--- a/addons/web/static/src/scss/webclient_extra.scss
+++ b/addons/web/static/src/scss/webclient_extra.scss
@@ -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;
diff --git a/addons/web/static/src/scss/webclient_layout.scss b/addons/web/static/src/scss/webclient_layout.scss
index db550f85d74..c8bb9e3c3ed 100644
--- a/addons/web/static/src/scss/webclient_layout.scss
+++ b/addons/web/static/src/scss/webclient_layout.scss
@@ -74,7 +74,7 @@
                 .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;
@@ -134,7 +134,7 @@
                 > 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 ?
                     }
                 }
             }