[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.

4 files changed, 35 insertions, 37 deletions

diff --git a/addons/web_editor/static/src/js/tours/rte.js b/addons/web_editor/static/src/js/tours/rte.js
index a2c16262b6a..9b23cd52bf3 100644
--- a/addons/web_editor/static/src/js/tours/rte.js
+++ b/addons/web_editor/static/src/js/tours/rte.js
@@ -311,7 +311,7 @@ tour.register('rte_inline', {
     trigger: '#wrapwrap img:first[width][height][style*="-radius"][style*="1px"][style*="padding"]',
 }, {
     content: "check the font image src",
-    trigger: '#wrapwrap img:eq(1)[src^="/web_editor/font_to_img/"][src$="/rgb(51,122,183)/28"]',
+    trigger: '#wrapwrap img:eq(1)[src^="/web_editor/font_to_img/"][src$="/rgb(0,123,255)/32"]',
 }, {
     content: "check the font class to css",
     trigger: '#wrapwrap img:eq(1)[height]:not([class*="fa"])',
diff --git a/addons/web_editor/static/src/scss/web_editor.common.scss b/addons/web_editor/static/src/scss/web_editor.common.scss
index eab28912885..bcd8548fbc4 100644
--- a/addons/web_editor/static/src/scss/web_editor.common.scss
+++ b/addons/web_editor/static/src/scss/web_editor.common.scss
@@ -243,21 +243,21 @@ a.o_underline {
 @include o-create-color-btn-classes(delta, $color-delta);
 @include o-create-color-btn-classes(epsilon, $color-epsilon);
 
-// Create classes for UI colors
-@include o-create-color-classes(primary, $brand-primary);
-@include o-create-color-classes(success, $state-success-bg, $content-color: $state-success-text);
-@include o-create-color-classes(info, $state-info-bg, $content-color: $state-info-text);
-@include o-create-color-classes(warning, $state-warning-bg, $content-color: $state-warning-text);
-@include o-create-color-classes(danger, $state-danger-bg, $content-color: $state-danger-text);
+// Create classes for UI colors // FIXME
+@include o-create-color-classes(primary, theme-color('primary'));
+// @include o-create-color-classes(success, $state-success-bg, $content-color: $state-success-text);
+// @include o-create-color-classes(info, $state-info-bg, $content-color: $state-info-text);
+// @include o-create-color-classes(warning, $state-warning-bg, $content-color: $state-warning-text);
+// @include o-create-color-classes(danger, $state-danger-bg, $content-color: $state-danger-text);
 
 // Create classes for greyscale colors
-@include o-create-color-classes('black', $gray-base);
-@include o-create-color-classes('gray-darker', $gray-darker);
-@include o-create-color-classes('gray-dark', $gray-dark);
-@include o-create-color-classes('gray', $gray);
-@include o-create-color-classes('gray-light', $gray-light);
-@include o-create-color-classes('gray-lighter', $gray-lighter);
-@include o-create-color-classes('white', $gray-white);
+@include o-create-color-classes('black', $black);
+@include o-create-color-classes('gray-darker', gray('900')); // FIXME
+@include o-create-color-classes('gray-dark', gray('900'));
+@include o-create-color-classes('gray', gray('700'));
+@include o-create-color-classes('gray-light', gray('600'));
+@include o-create-color-classes('gray-lighter', gray('200'));
+@include o-create-color-classes('white', $white);
 
 // Create classes for greyscale transparent colours
 @include o-create-color-classes('black-25', $color-black-25);
diff --git a/addons/web_editor/static/src/scss/web_editor.ui.scss b/addons/web_editor/static/src/scss/web_editor.ui.scss
index ebd3752b5e8..e22d98a9ffb 100644
--- a/addons/web_editor/static/src/scss/web_editor.ui.scss
+++ b/addons/web_editor/static/src/scss/web_editor.ui.scss
@@ -59,7 +59,7 @@
             }
 
             &.btn-primary {
-                @include button-variant(white, $o-brand-primary, $o-brand-primary);
+                @include button-variant(white, $o-brand-odoo, $o-brand-odoo);
             }
             &.btn-secondary {
                 @include button-variant(white, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
@@ -251,11 +251,11 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
 // DROPZONES
 @keyframes dropZoneInsert {
     to {
-        background-color: rgba($o-brand-primary, 0.2);
+        background-color: rgba($o-brand-odoo, 0.2);
     }
 }
 #wrapwrap .oe_drop_zone {
-    background-color: rgba($o-brand-primary, 0.05);
+    background-color: rgba($o-brand-odoo, 0.05);
     animation: dropZoneInsert 1s linear 0s infinite alternate;
 
     &.oe_insert {
@@ -282,7 +282,7 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
         }
 
         &.oe_vertical {
-            border: 2px dashed $o-brand-primary;
+            border: 2px dashed $o-brand-odoo;
             border-left: none;
             border-right: none;
 
@@ -451,7 +451,7 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
                                     @include o-position-absolute($top: 5px, $left: 5px);
                                     content: "\f00c";
                                     font-family: "FontAwesome";
-                                    color: $o-brand-optional;
+                                    color: $o-brand-primary;
                                 }
                             }
 
@@ -970,7 +970,7 @@ table.colorpicker {
             &.selected:after {
                 content: "\f00c";
                 font-family: "FontAwesome";
-                color: $brand-success;
+                color: theme-color('success');
             }
 
             &[data-event="foreColor"] {
@@ -1089,7 +1089,7 @@ body.editor_enable {
     }
 }
 @keyframes inputHighlighter {
-    from { background: $o-brand-optional; }
+    from { background: $o-brand-primary; }
     to   { width: 0; background: transparent; }
 }
 
@@ -1140,7 +1140,7 @@ body.editor_enable {
         > input {
             &:not(:checked) + span {
                 box-shadow: none;
-                background-image: linear-gradient(0deg, lighten($brand-danger, 5%), darken($brand-danger, 5%));
+                background-image: linear-gradient(0deg, lighten(theme-color('danger'), 5%), darken(theme-color('danger'), 5%));
             }
         }
     }
@@ -1275,7 +1275,7 @@ body.editor_enable {
             content: "";
             z-index: 1000;
             display: block;
-            background-color: $brand-danger;
+            background-color: theme-color('danger');
             opacity: 0.5;
             pointer-events: none;
         }
@@ -1357,7 +1357,7 @@ body .modal {
             }
 
             .well {
-                border-color: $gray-lighter;
+                border-color: gray('200');
                 border-top-width: 0;
             }
 
@@ -1394,7 +1394,7 @@ body .modal {
                     }
                 }
                 &.o_selected .o_image {
-                    border-color: $o-brand-primary;
+                    border-color: $o-brand-odoo;
                     box-shadow: 0px 0px 2px 2px $o-brand-secondary;
                 }
                 &:hover .o_existing_attachment_remove {
@@ -1585,7 +1585,7 @@ body .modal {
                 display: block;
                 width: 100%;
                 height: 1px;
-                background: fade-out(lighten($o-brand-optional, 30%), 0.5);
+                background: fade-out(lighten($o-brand-primary, 30%), 0.5);
                 pointer-events: none;
                 &.grid-2 {
                     top: 66.66%
@@ -1659,7 +1659,7 @@ body .modal {
             }
         }
         .o_link_dialog_preview {
-            border-left: 1px solid $gray-lighter;
+            border-left: 1px solid gray('200');
         }
     }
     // Crop Dialog
diff --git a/addons/web_editor/static/src/scss/web_editor.variables.scss b/addons/web_editor/static/src/scss/web_editor.variables.scss
index 469c66d66cb..37a24e1b79c 100644
--- a/addons/web_editor/static/src/scss/web_editor.variables.scss
+++ b/addons/web_editor/static/src/scss/web_editor.variables.scss
@@ -27,7 +27,7 @@ $o-we-md-ease: cubic-bezier(0.19, 1, 0.22, 1) !default;
 // Editor
 $o-we-dropzone-size: 40px !default;
 $o-we-dropzone-border-width: 2px !default;
-$o-we-dropzone-border: $o-we-dropzone-border-width dashed $o-brand-primary !default;
+$o-we-dropzone-border: $o-we-dropzone-border-width dashed $o-brand-odoo !default;
 
 $o-we-handle-edge-size: 1px !default;
 $o-we-handle-border-width: 1px !default;
@@ -86,7 +86,7 @@ $o-we-switch-inactive-color: $o-we-color-paper !default;
 
 @mixin o-w-preserve-links {
     a:not(.o_btn_preview) {
-        color: $o-brand-optional;
+        color: $o-brand-primary;
 
         &:focus, &:active, &:focus:active {
             outline: none!important;
@@ -114,7 +114,7 @@ $o-we-switch-inactive-color: $o-we-color-paper !default;
 
     .has-error {
         .form-control {
-            border-color: $state-danger-text;
+            // border-color: $state-danger-text; // FIXME
         }
     }
 
@@ -144,14 +144,14 @@ $o-we-switch-inactive-color: $o-we-color-paper !default;
 
 @mixin o-w-preserve-tabs {
     .nav-tabs {
-        border-bottom: 1px solid $gray-lighter;
+        border-bottom: 1px solid gray('200');
 
         > li  {
             > a {
                 line-height: 1.42857143;
                 color: $o-we-color-light;
                 &:hover {
-                    border-color: $gray-lighter;
+                    border-color: gray('200');
                 }
             }
 
@@ -159,7 +159,7 @@ $o-we-switch-inactive-color: $o-we-color-paper !default;
                 &, &:hover, &:focus {
                     color: $o-we-color-normal;
                     background-color: $o-we-color-paper;
-                    border-color: $gray-lighter;
+                    border-color: gray('200');
                     border-bottom-color: transparent;
                 }
             }
@@ -175,13 +175,13 @@ $o-we-switch-inactive-color: $o-we-color-paper !default;
         @include button-size(6px, 12px, 14px, 1.42857143, 0);
 
         &.btn-primary {
-            @include button-variant(white, $o-brand-optional, darken($o-brand-optional,5%));
+            @include button-variant(white, $o-brand-primary, darken($o-brand-primary,5%));
         }
         &.btn-secondary {
             @include button-variant($o-we-color-normal, white, $o-we-color-text-light);
         }
         &.btn-link {
-            @include button-variant($o-brand-optional, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
+            @include button-variant($o-brand-primary, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
         }
         &.btn-success {
             @include button-variant(white, $o-we-color-success, darken($o-we-color-success, 5%));
@@ -222,8 +222,6 @@ $o-we-switch-inactive-color: $o-we-color-paper !default;
 // Edition colors
 
 // Colors
-$gray-white: #fff !default;
-
 $color-alpha: #1cc1a9 !default;
 $color-beta: #875A7B !default;
 $color-gamma: #BA3C3D !default;