[IMP] web_editor, *: review the editor design CSS

*: web, mass_mailing, website, website_form, website_sale

New CSS design of the editor (step 1/x).

This work is unfortunately far from perfect but is a first step towards
what we want. In particular, much CSS linked to elements that are meant
to be removed/moved in the upcoming weeks was done in a huge rush but
will thus hopefully be removed/reviewed before the 14.0 release.

As the design is now far more complex including gradients and other
"complex" elements, it was also very difficult to keep a design based on
css-variable so this system was removed, which means that the editor now
appears the same everywhere (backend, frontend, ...). The original goal
of this system was to have an adapted style for backend, frontend and
website visitors. Unfortunately, the current result was a very good
frontend editor design, a not-so-good backend editor design (for mass
mailing at least) and a totally unadapted design for the website
visitors. Making this perfect will be achievable by loading different
assets for those 3 areas and hopefully those assets will only differ by
the values of editor scss variables.

Part of https://github.com/odoo/odoo/pull/53930
task-2157252

6 files changed, 734 insertions, 390 deletions

diff --git a/addons/web_editor/static/src/js/editor/snippets.editor.js b/addons/web_editor/static/src/js/editor/snippets.editor.js
index f40490dbc86..12a21bde93a 100644
--- a/addons/web_editor/static/src/js/editor/snippets.editor.js
+++ b/addons/web_editor/static/src/js/editor/snippets.editor.js
@@ -834,6 +834,7 @@ var SnippetsMenu = Widget.extend({
         'block_preview_overlays': '_onBlockPreviewOverlays',
         'unblock_preview_overlays': '_onUnblockPreviewOverlays',
         'user_value_widget_opening': '_onUserValueWidgetOpening',
+        'user_value_widget_closing': '_onUserValueWidgetClosing',
         'reload_snippet_template': '_onReloadSnippetTemplate',
     },
     // enum of the SnippetsMenu's tabs.
@@ -1838,7 +1839,7 @@ var SnippetsMenu = Widget.extend({
                 stop: function (ev, ui) {
                     $toInsert.removeClass('oe_snippet_body');
 
-                    if (!dropped && ui.position.top > 3 && ui.position.left + 50 > self.$el.outerWidth()) {
+                    if (!dropped && ui.position.top > 3 && ui.position.left > self.el.getBoundingClientRect().right) {
                         var $el = $.nearest({x: ui.position.left, y: ui.position.top}, '.oe_drop_zone', {container: document.body}).first();
                         if ($el.length) {
                             $el.after($toInsert);
@@ -2276,10 +2277,18 @@ var SnippetsMenu = Widget.extend({
     },
     /**
      * Called when an user value widget is being opened -> close all the other
-     * user value widgets of all editors.
+     * user value widgets of all editors + add backdrop.
      */
     _onUserValueWidgetOpening: function () {
         this._closeWidgets();
+        this.el.classList.add('o_we_backdrop');
+    },
+    /**
+     * Called when an user value widget is being closed -> rely on the fact only
+     * one widget can be opened at a time: remove the backdrop.
+     */
+    _onUserValueWidgetClosing: function () {
+        this.el.classList.remove('o_we_backdrop');
     },
 });
 
diff --git a/addons/web_editor/static/src/js/editor/snippets.options.js b/addons/web_editor/static/src/js/editor/snippets.options.js
index 3c2bcb2b22e..d6fd28e7ed0 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -161,6 +161,8 @@ const UserValueWidget = Widget.extend({
      * Closes the widget (only meaningful for widgets that can be closed).
      */
     close: function () {
+        this.trigger_up('user_value_widget_closing');
+        this.el.classList.remove('o_we_widget_opened');
         this._userValueWidgets.forEach(widget => widget.close());
     },
     /**
@@ -380,6 +382,13 @@ const UserValueWidget = Widget.extend({
         this.trigger_up('user_value_update', data);
     },
     /**
+     * Opens the widget (only meaningful for widgets that can be opened).
+     */
+    open() {
+        this.trigger_up('user_value_widget_opening');
+        this.el.classList.add('o_we_widget_opened');
+    },
+    /**
      * Adds the given widget to the known list of user value sub-widgets (useful
      * for container widgets).
      *
@@ -699,6 +708,13 @@ const SelectUserValueWidget = UserValueWidget.extend({
     /**
      * @override
      */
+    open() {
+        this._super(...arguments);
+        this.menuTogglerEl.classList.add('active');
+    },
+    /**
+     * @override
+     */
     setValue: function (value, methodName) {
         this._userValueWidgets.forEach(widget => {
             widget.setValue('__NULL__', methodName);
@@ -751,8 +767,7 @@ const SelectUserValueWidget = UserValueWidget.extend({
         }
 
         if (!this.menuTogglerEl.classList.contains('active')) {
-            this.trigger_up('user_value_widget_opening');
-            this.menuTogglerEl.classList.add('active');
+            this.open();
         } else {
             this.close();
         }
@@ -966,7 +981,9 @@ const MultiUserValueWidget = UserValueWidget.extend({
      * @override
      */
     start: function () {
-        this.containerEl.appendChild(_buildRowElement('', this.options));
+        if (this.options && this.options.childNodes) {
+            this.options.childNodes.forEach(node => this.containerEl.appendChild(node));
+        }
         return this._super(...arguments);
     },
 
@@ -1330,7 +1347,8 @@ const DatetimePickerUserValueWidget = InputUserValueWidget.extend({
         await this._super(...arguments);
 
         const datetimePickerId = _.uniqueId('datetimepicker');
-        this.inputEl.setAttribute('class', 'datetimepicker-input mx-0 text-left');
+        this.el.classList.add('o_we_large_input');
+        this.inputEl.classList.add('datetimepicker-input', 'mx-0', 'text-left');
         this.inputEl.setAttribute('id', datetimePickerId);
         this.inputEl.setAttribute('data-target', '#' + datetimePickerId);
 
@@ -1443,7 +1461,6 @@ const RangeUserValueWidget = UserValueWidget.extend({
         await this._super(...arguments);
         this.input = document.createElement('input');
         this.input.type = "range";
-        this.input.className = "custom-range";
         this.containerEl.appendChild(this.input);
     },
 
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 39923c9c670..b2fb1ef821e 100644
--- a/addons/web_editor/static/src/scss/web_editor.common.scss
+++ b/addons/web_editor/static/src/scss/web_editor.common.scss
@@ -390,7 +390,7 @@ a.o_underline {
         background-color: lighten($o-we-ace-color, 10%);
 
         .o_ace_editor_resource_info {
-            color: $o-we-color-text-lighter;
+            color: #ebecee;
         }
     }
 
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 21ce8c9fe8d..f031e0c8a50 100644
--- a/addons/web_editor/static/src/scss/web_editor.variables.scss
+++ b/addons/web_editor/static/src/scss/web_editor.variables.scss
@@ -2,69 +2,182 @@
 /// This files regroups the variables and mixins which are specific to the editor.
 ///
 
-$o-support-13-0-color-system: false !default;
+//------------------------------------------------------------------------------
+// Odoo Editor UI
+//------------------------------------------------------------------------------
 
-$o-we-font-family: Roboto, 'Montserrat', 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif !default;
+$o-we-bg-darkest: #000000 !default;
+$o-we-bg-darker: #141217 !default;
+$o-we-bg-dark: #191922 !default;
+$o-we-bg-light: #23232D !default;
+$o-we-bg-lighter: #32323D !default;
+
+$o-we-fg-darker: #808080 !default;
+$o-we-fg-dark: #C6C6C6 !default;
+$o-we-fg-light: #D9D9D9 !default;
+$o-we-fg-lighter: #FFFFFF !default;
 
-$o-we-font-size: 13px;
-$o-we-line-height: 1.5;
-$o-we-bg-color: #F7F7F7 !default;
-$o-we-bg-color-dark: #a7a7a7 !default;
-$o-we-color: #212629 !default;
-$o-we-border-width: 1px !default;
-$o-we-border-color: rgba(0, 0, 0, 0.125) !default;
-$o-we-dropdown-bg-color: #FFFFFF;
-$o-we-dropdown-color: inherit;
-
-$o-we-color-dark: #2c2c36 !default;
-$o-we-color-darker: darken($o-we-color-dark, 2%) !default;
-$o-we-color-divider: #33363e !default;
-$o-we-color-light: #4e525b !default;
-$o-we-color-normal: #3D4047 !default;
-$o-we-color-text-normal: #999999 !default;
-$o-we-color-text-light: #d4d5d7 !default;
-$o-we-color-text-lighter: #ebecee !default;
 $o-we-color-danger: #e6586c !default;
 $o-we-color-warning: #f0ad4e !default;
 $o-we-color-success: #40ad67 !default;
 $o-we-color-info: #6999a8 !default;
 
-$o-we-sidebar-width: 230px !default;
+$o-we-bg: $o-we-bg-light !default;
+$o-we-color: $o-we-fg-light !default;
+$o-we-font-size: 13px !default;
+$o-we-font-family: Roboto, 'Montserrat', 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif !default;
+$o-we-accent: #00ABC1 !default;
+$o-we-border-width: 1px !default;
+$o-we-border-color: $o-we-bg-light !default;
+
+$o-we-ace-color: #2F3129 !default;
 
 $o-we-handles-offset-to-hide: 10000px !default;
 $o-we-handles-btn-size: 18px !default;
-$o-we-handles-accent-color: #00e2ff !default;
+$o-we-handles-accent-color: $o-we-accent !default;
 $o-we-handles-accent-color-preview: $o-enterprise-color !default;
 $o-we-handle-edge-size: 8px !default;
 $o-we-handle-border-width: 2px !default;
 
-// Transitions
-$o-we-md-ease: cubic-bezier(0.19, 1, 0.22, 1) !default;
-
-// Editor
 $o-we-dropzone-size: 30px !default; // $grid-gutter-width (todo: allow to use the variable)
 $o-we-dropzone-border-width: 2px !default;
 $o-we-dropzone-border: $o-we-dropzone-border-width dashed $o-brand-odoo !default;
 
-$o-we-ace-color: #2F3129 !default;
-
-$o-we-switch-size: 2ex !default;
-$o-we-switch-inactive-color: $o-we-bg-color !default;
-
-// Checklist
-$o-checklist-margin-left: 20px;
-$o-checklist-checkmark-width: 2px;
-$o-checklist-before-size: 13px;
-
-$o-we-toolbar-height: 32px;
+// Translations
+$o-we-content-to-translate-color: rgb(255, 255, 90) !default;
+$o-we-translated-content-color: rgb(120, 215, 110) !default;
 
-// ============    'Preview' component Mixins    ===============
-// Create a "preview" work-area to edit/customize specific elements
+$o-we-toolbar-height: 32px !default;
+
+$o-we-item-border-width: 1px !default;
+$o-we-item-border-color: $o-we-bg-darkest !default;
+$o-we-item-border-radius: 1px !default;
+$o-we-item-clickable-bg: linear-gradient($o-we-bg-light, $o-we-bg-darker) !default;
+$o-we-item-pressed-bg: linear-gradient($o-we-bg-darkest, $o-we-bg-darker) !default;
+$o-we-item-pressed-color: $o-we-fg-light !default;
+
+$o-we-dropdown-spacing: 5px !default;
+$o-we-dropdown-bg: $o-we-bg-darker !default;
+$o-we-dropdown-border-width: 1px !default;
+$o-we-dropdown-border-color: $o-we-bg-darkest !default;
+$o-we-dropdown-shadow: 0 2px 8px 0 rgba(black, 0.5) !default;
+$o-we-dropdown-item-height: 30px !default;
+$o-we-dropdown-item-spacing: 1px !default;
+$o-we-dropdown-item-bg: $o-we-bg-light !default;
+$o-we-dropdown-item-color: $o-we-fg-dark !default;
+$o-we-dropdown-item-active-color: $o-we-fg-light !default;
+
+$o-we-sidebar-bg: $o-we-bg !default;
+$o-we-sidebar-color: $o-we-color !default;
+$o-we-sidebar-font-size: 11px !default;
+$o-we-sidebar-border-width: $o-we-border-width !default;
+$o-we-sidebar-border-color: $o-we-border-color !default;
+$o-we-sidebar-width: $o-we-sidebar-border-width + 270px !default;
+
+$o-we-sidebar-top-height: 26px !default;
+
+$o-we-sidebar-tabs-border-width: $o-we-sidebar-border-width !default;
+$o-we-sidebar-tabs-border-color: $o-we-sidebar-border-color !default;
+$o-we-sidebar-tabs-height: $o-we-sidebar-tabs-border-width + 29px !default;
+$o-we-sidebar-tabs-bg: $o-we-bg-darker !default;
+$o-we-sidebar-tabs-color: $o-we-sidebar-color !default;
+$o-we-sidebar-tabs-disabled-color: $o-we-fg-darker !default;
+$o-we-sidebar-tabs-active-border-width: 2px !default;
+$o-we-sidebar-tabs-active-border-color: $o-we-accent !default;
+$o-we-sidebar-tabs-active-color: $o-we-fg-lighter !default;
+
+$o-we-sidebar-blocks-content-bg: $o-we-bg-dark !default;
+$o-we-sidebar-blocks-content-spacing: 10px !default;
+$o-we-sidebar-blocks-content-snippet-spacing: 2px !default;
+$o-we-sidebar-blocks-content-snippet-bg: $o-we-bg-lighter !default;
+
+$o-we-sidebar-content-highlight-bar-width: 2px !default;
+$o-we-sidebar-content-highlight-bar-color: $o-we-accent !default;
+
+$o-we-sidebar-content-gutter-item-indent: 5px !default;
+$o-we-sidebar-content-indent: $o-we-sidebar-content-gutter-item-indent + $o-we-sidebar-content-highlight-bar-width + 12px !default;
+$o-we-sidebar-content-backdrop-bg: rgba(black, 0.5) !important;
+
+$o-we-sidebar-content-main-title-border-width: 1px !default;
+$o-we-sidebar-content-main-title-border-color: $o-we-bg-light !default;
+$o-we-sidebar-content-main-title-height: 32px !default;
+$o-we-sidebar-content-main-title-shadow-start: rgba(black, 0.7);
+$o-we-sidebar-content-main-title-shadow: linear-gradient($o-we-sidebar-content-main-title-shadow-start, rgba(black, 0)) !default;
+$o-we-sidebar-content-main-title-color: $o-we-fg-lighter !default;
+$o-we-sidebar-content-main-title-font-size: 13px !default;
+$o-we-sidebar-content-main-title-margin-bottom: 2px !default;
+
+$o-we-sidebar-content-block-spacing: 10px !default;
+
+$o-we-sidebar-content-fold-block-bg: $o-we-bg-dark !default;
+$o-we-sidebar-content-fold-block-inner-spacing: $o-we-sidebar-content-block-spacing !default;
+
+$o-we-sidebar-content-field-spacing: 5px !default;
+$o-we-sidebar-content-field-color: $o-we-fg-dark !default;
+$o-we-sidebar-content-field-control-item-color: $o-we-fg-darker !default;
+$o-we-sidebar-content-field-control-item-size: 1em !default;
+$o-we-sidebar-content-field-control-item-spacing: 0.5em !default;
+$o-we-sidebar-content-field-label-spacing: 4px !default;
+$o-we-sidebar-content-field-label-width: $o-we-sidebar-content-field-label-spacing + 102px !default;
+$o-we-sidebar-content-field-multi-spacing: $o-we-sidebar-content-field-label-spacing !default;
+$o-we-sidebar-content-field-height: 22px !default;
+
+$o-we-sidebar-content-field-border-width: $o-we-item-border-width !default;
+$o-we-sidebar-content-field-border-color:$o-we-item-border-color !default;
+$o-we-sidebar-content-field-border-radius: $o-we-item-border-radius !default;
+$o-we-sidebar-content-field-disabled-color: $o-we-sidebar-content-field-control-item-color !default;
+$o-we-sidebar-content-field-clickable-bg: $o-we-item-clickable-bg !default;
+$o-we-sidebar-content-field-clickable-spacing: $o-we-sidebar-content-field-label-spacing !default;
+$o-we-sidebar-content-field-pressed-bg: $o-we-item-pressed-bg !default;
+$o-we-sidebar-content-field-pressed-color: $o-we-item-pressed-color !default;
+
+$o-we-sidebar-content-field-dropdown-spacing: $o-we-dropdown-spacing !default;
+$o-we-sidebar-content-field-dropdown-bg: $o-we-dropdown-bg !default;
+$o-we-sidebar-content-field-dropdown-border-width: $o-we-dropdown-border-width !default;
+$o-we-sidebar-content-field-dropdown-border-color: $o-we-dropdown-border-color !default;
+$o-we-sidebar-content-field-dropdown-shadow: $o-we-dropdown-shadow !default;
+$o-we-sidebar-content-field-dropdown-item-height: $o-we-dropdown-item-height !default;
+$o-we-sidebar-content-field-dropdown-item-spacing: $o-we-dropdown-item-spacing !default;
+$o-we-sidebar-content-field-dropdown-item-bg: $o-we-dropdown-item-bg !default;
+$o-we-sidebar-content-field-dropdown-item-color: $o-we-dropdown-item-color !default;
+$o-we-sidebar-content-field-dropdown-item-active-color: $o-we-dropdown-item-active-color !default;
+
+$o-we-sidebar-content-field-colorpicker-size: 20px !default;
+$o-we-sidebar-content-field-colorpicker-shadow: inset 0 0 0 1px rgba(white, 0.5) !default;
+$o-we-sidebar-content-field-colorpicker-dropdown-bg: $o-we-bg-light !important;
+$o-we-sidebar-content-field-colorpicker-dropdown-color: $o-we-fg-light !important;
+$o-we-sidebar-content-field-colorpicker-dropdown-active-color: $o-we-fg-lighter !important;
+$o-we-sidebar-content-field-colorpicker-cc-width: 208px !important;
+$o-we-sidebar-content-field-colorpicker-cc-height: 26px !important;
+
+$o-we-sidebar-content-field-input-max-width: 60px !default;
+$o-we-sidebar-content-field-input-bg: $o-we-bg-darker !default;
+$o-we-sidebar-content-field-input-font-family: monospace !default;
+$o-we-sidebar-content-field-input-unit-font-size: 9px !default;
+$o-we-sidebar-content-field-input-border-color: $o-we-accent !default;
+
+$o-we-sidebar-content-field-progress-height: 3px !default;
+$o-we-sidebar-content-field-progress-control-height: 7px !default;
+$o-we-sidebar-content-field-progress-color: $o-we-fg-darker !default;
+$o-we-sidebar-content-field-progress-active-color: $o-we-accent !default;
+
+$o-we-sidebar-content-field-toggle-width: 20px !default;
+$o-we-sidebar-content-field-toggle-height: 12px !default;
+$o-we-sidebar-content-field-toggle-bg: $o-we-fg-darker !default;
+$o-we-sidebar-content-field-toggle-active-bg: $o-we-accent !default;
+$o-we-sidebar-content-field-toggle-control-width: 11px !default;
+$o-we-sidebar-content-field-toggle-control-height: $o-we-sidebar-content-field-toggle-height - 2px !default;
+$o-we-sidebar-content-field-toggle-control-bg: $o-we-fg-lighter !default;
+$o-we-sidebar-content-field-toggle-control-shadow: 0 2px 3px 0 $o-we-bg-darkest !default;
+
+//------------------------------------------------------------------------------
+// Preview component Mixins
+//------------------------------------------------------------------------------
 
 @mixin o-we-preview-box($color-text: white) {
     border-top: 1px solid black;
     border-bottom: 1px solid white;
-    background-image: linear-gradient(-150deg, $o-we-color-dark, $o-we-color-darker);
+    background-image: linear-gradient(-150deg, $o-we-bg-light, $o-we-bg-dark);
 
     color:  $color-text;
 }
@@ -76,17 +189,18 @@ $o-we-toolbar-height: 32px;
     box-shadow: 0 0 15px 2px #000;
 }
 
-// ============    Preservation mixins    ===============
-// Used to preserve web_editor and website UI from themes customizations
+//------------------------------------------------------------------------------
+// Mixins to shield UI from themed bootstrap
+//------------------------------------------------------------------------------
 
 @mixin o-w-preserve-base {
     font-size: $o-we-font-size;
     font-family: $o-we-font-family;
     line-height: 1.5;
-    color: $o-we-color-divider;
+    color: #33363e;
 
     .text-muted {
-        color: $o-we-color-text-normal !important;
+        color: #999999 !important;
     }
 }
 
@@ -94,7 +208,7 @@ $o-we-toolbar-height: 32px;
     h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
         font-family: $o-we-font-family;
         line-height: 1.5;
-        color: $o-we-color-dark;
+        color: $o-we-bg-light;
         font-weight: bold;
     }
     h1, .h1 {
@@ -141,7 +255,7 @@ $o-we-toolbar-height: 32px;
         padding: 6px 12px;
         font-size: 14px;
         line-height: 1.5;
-        border: 1px solid $o-we-color-text-light;
+        border: 1px solid #d4d5d7;
         color: #555;
         background-color: #fff;
         border-radius: 0;
@@ -172,10 +286,9 @@ $o-we-toolbar-height: 32px;
 }
 
 @mixin o-w-preserve-modals {
-
     .modal-content {
         border-radius: 0;
-        background-color: $o-we-bg-color;
+        background-color: white;
 
         .modal-header {
             border-bottom-color: #e9ecef;
@@ -201,7 +314,7 @@ $o-we-toolbar-height: 32px;
         > li  {
             > a {
                 line-height: 1.5;
-                color: $o-we-color-light;
+                color: #4e525b;
 
                 &:hover {
                     border-color: #dee2e6;
@@ -209,8 +322,8 @@ $o-we-toolbar-height: 32px;
 
                 &.active {
                     &, &:hover, &:focus {
-                        color: $o-we-color-normal;
-                        background-color: $o-we-bg-color;
+                        color: #3D4047;
+                        background-color: white;
                         border-color: #dee2e6 #dee2e6 #FFFFFF;
                     }
                 }
@@ -231,11 +344,11 @@ $o-we-toolbar-height: 32px;
             color: white;
         }
         &.btn-secondary {
-            @include button-variant($o-we-bg-color, $o-we-bg-color);
+            @include button-variant(white, white);
             color: $o-brand-primary;
         }
         &.btn-link {
-            @include button-variant($o-we-bg-color, $o-we-bg-color);
+            @include button-variant(white, white);
             color: $o-brand-primary;
         }
         &.btn-success {
@@ -248,11 +361,11 @@ $o-we-toolbar-height: 32px;
         }
         &.btn-warning {
             @include button-variant($o-we-color-warning, $o-we-color-warning);
-            color: $o-we-color-divider;
+            color: #33363e;
         }
         &.btn-danger {
             @include button-variant($o-we-color-danger, $o-we-color-danger);
-            color: $o-we-color-divider;
+            color: #33363e;
         }
     }
 }
@@ -261,8 +374,8 @@ $o-we-toolbar-height: 32px;
     .card {
         padding: 19px;
         margin-bottom: 20px;
-        background-color: $o-we-bg-color;
-        border: 1px solid darken($o-we-bg-color, 5%);
+        background-color: white;
+        border: 1px solid darken(white, 5%);
         border-radius: 0;
         box-shadow: none;
     }
@@ -286,6 +399,17 @@ $o-we-toolbar-height: 32px;
     }
 }
 
+//------------------------------------------------------------------------------
+// Edited content
+//------------------------------------------------------------------------------
+
+$o-support-13-0-color-system: false !default;
+
+$o-checklist-margin-left: 20px;
+$o-checklist-checkmark-width: 2px;
+$o-checklist-before-size: 13px;
+
+
 // Edition colors
 
 // Note: the "base" palettes contain all possible keys a palette should or
@@ -416,10 +540,6 @@ $o-color-combinations-presets: (
 ) !default;
 $o-color-combinations-preset-number: 1;
 
-// Translations
-$o-we-content-to-translate-color: rgb(255, 255, 90) !default;
-$o-we-translated-content-color: rgb(120, 215, 110) !default;
-
 // We allow snippets to be colored and elements like card and columns to be
 // colored as well. We need components targeted by those colored classes to
 // use the deepest coloring element config. We only allow here for this to
diff --git a/addons/web_editor/static/src/scss/wysiwyg.scss b/addons/web_editor/static/src/scss/wysiwyg.scss
index d5f3b759fb7..d76b7f4b648 100644
--- a/addons/web_editor/static/src/scss/wysiwyg.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg.scss
@@ -5,18 +5,6 @@ $o-we-zindex: $o-we-overlay-zindex + 1 !default;
 // external assets bundle can influence it without duplicating the css.
 :root {
     @include print-variable('o-we-toolbar-height', $o-we-toolbar-height);
-
-    @include print-variable('o-we-bg-color', $o-we-bg-color);
-    @include print-variable('o-we-bg-color-dark', $o-we-bg-color-dark);
-    @include print-variable('o-we-color', $o-we-color);
-    @include print-variable('o-we-color-accent', $o-we-color);
-
-    @include print-variable('o-we-dropdown-bg-color', $o-we-dropdown-bg-color);
-    @include print-variable('o-we-dropdown-color', $o-we-dropdown-color);
-
-    @include print-variable('o-we-snippets-bg-color', $o-we-bg-color);
-    @include print-variable('o-we-snippets-bg-info', $o-we-color-info);
-    @include print-variable('o-we-snippets-color', $o-we-color);
 }
 
 // EDITOR TOP BAR AND POPOVER
@@ -24,6 +12,7 @@ $o-we-zindex: $o-we-overlay-zindex + 1 !default;
     max-width: 350px;
     left: 50% !important;
     transform: translate(-50%, 0);
+
     .popover-body {
         white-space: normal;
     }
@@ -31,6 +20,7 @@ $o-we-zindex: $o-we-overlay-zindex + 1 !default;
 
 .editor_enable {
     padding-top: var(--o-we-toolbar-height) !important;
+
     .note-popover .popover .popover-body {
         height: var(--o-we-toolbar-height);
     }
@@ -44,7 +34,8 @@ $o-we-zindex: $o-we-overlay-zindex + 1 !default;
     position: fixed;
     z-index: $o-we-zindex;
     height: var(--o-we-toolbar-height);
-    background-color: var(--o-we-bg-color);
+    background-color: $o-we-bg;
+    transition: transform 400ms ease 0s; // For fullscreen
 
     .note-popover .popover {
         top: 0 !important;
@@ -69,7 +60,8 @@ $o-we-zindex: $o-we-overlay-zindex + 1 !default;
 .panel-heading.note-toolbar {
     padding-bottom: 0;
     border-bottom: $o-we-border-width solid $o-we-border-color;
-    background-color: var(--o-we-bg-color);
+    background-color: $o-we-bg;
+    color: $o-we-color;
     font-family: $o-we-font-family;
 
     // Main layout of buttons
@@ -89,20 +81,13 @@ $o-we-zindex: $o-we-overlay-zindex + 1 !default;
     // Active buttons and opened dropdowns
     .btn {
         padding: 0.5em 0.75em !important;
-        border-left: 1px solid transparent;
-        border-right: 1px solid transparent;
-        color: var(--o-we-color);
+        border-left: $o-we-item-border-width solid $o-we-item-border-color;
+        border-right: $o-we-item-border-width solid $o-we-item-border-color;
+        background: $o-we-sidebar-content-field-clickable-bg;
+        color: inherit;
         font-size: $o-we-font-size !important;
 
-        &.active {
-            background-color: var(--o-we-bg-color-dark);
-            color: var(--o-we-color-accent);
-        }
-
-        &:hover {
-            color: var(--o-we-color-accent);
-        }
-
+        &.active,
         &:focus, &:active, &:focus:active {
             @extend %we-active-button;
         }
@@ -115,24 +100,20 @@ $o-we-zindex: $o-we-overlay-zindex + 1 !default;
             content: '';
             @include o-position-absolute(100%, $o-we-border-width, auto, $o-we-border-width);
             height: $o-we-border-width;
-            background-color: var(--o-we-dropdown-bg-color);
         }
     }
     %we-active-button {
-        border-left-color: $o-we-border-color;
-        border-right-color: $o-we-border-color;
-        background: var(--o-we-dropdown-bg-color);
+        background: $o-we-sidebar-content-field-pressed-bg;
+        color: $o-we-sidebar-content-field-pressed-color;
         box-shadow: none !important;
         outline: none !important;
     }
     .dropdown-menu {
-        margin-top: 0;
-        border: $o-we-border-width solid $o-we-border-color;
-        border-top-color: transparent;
-        border-radius: 0;
-        background-color: var(--o-we-dropdown-bg-color);
-        color: var(--o-we-dropdown-color);
-        box-shadow: none;
+        margin-top: $o-we-dropdown-spacing;
+        padding: 0;
+        border: $o-we-dropdown-border-width solid $o-we-dropdown-border-color;
+        background-color: $o-we-dropdown-bg;
+        box-shadow: $o-we-dropdown-shadow;
     }
     .dropdown-menu.show { // To overcome .note-XXX .dropdown-menu rules
         min-width: 0;
@@ -141,14 +122,47 @@ $o-we-zindex: $o-we-overlay-zindex + 1 !default;
         display: block;
         max-width: none;
         overflow: visible;
-        color: var(--o-we-color);
+        margin-top: 0;
+        padding: 0 1em;
+        border: none;
+        background: none;
+        background-clip: padding-box;
+        background-color: $o-we-dropdown-item-bg;
+        color: $o-we-dropdown-item-color;
+        line-height: $o-we-dropdown-item-height;
+
+        &:not(.d-none) ~ .dropdown-item {
+            // Use a border-top instead of a margin-top as when the
+            // mouse goes from one select button to another, the
+            // option preview should switch from the first button's
+            // option to the second one without reset to selected
+            // state in between.
+            border-top: $o-we-dropdown-item-spacing solid transparent;
+        }
 
-        &:hover {
-            background-color: var(--o-we-bg-color) !important;
-            color: var(--o-we-color-accent) !important;
+        &.active {
+            color: $o-we-dropdown-item-active-color;
+        }
+    }
+    li > .dropdown-item {
+        border-top: $o-we-dropdown-item-spacing solid transparent;
+    }
 
+    .note-style {
+        .dropdown-item {
             > * {
-                color: inherit !important;
+                display: inline;;
+            }
+            &, > * {
+                line-height: 2;
+            }
+            &[data-value="blockquote"] {
+                padding-top: 0.5em;
+                padding-bottom: 0.5em;
+
+                > * {
+                    display: block;
+                }
             }
         }
     }
@@ -159,7 +173,7 @@ $o-we-zindex: $o-we-overlay-zindex + 1 !default;
         max-width: 150px;
     }
     .note-color-palette div .note-color-btn {
-        border-color: var(--o-we-dropdown-bg-color);
+        border-color: $o-we-dropdown-bg;
     }
     .note-custom-color-palette .note-color-row {
         height: auto!important;
@@ -169,7 +183,7 @@ $o-we-zindex: $o-we-overlay-zindex + 1 !default;
             width: 20px;
             padding: 0;
             margin: 0;
-            border: 1px solid var(--o-we-dropdown-bg-color);
+            border: 1px solid $o-we-dropdown-bg;
         }
     }
 }
@@ -457,13 +471,9 @@ img::selection {
         button:not(.btn), label {
             margin: 0;
             border: none;
-            border-right: 1px solid var(--o-we-bg-color-dark);
-            background-color: var(--o-we-bg-color);
-            color: var(--o-we-color);
-
-            &:hover {
-                background-color: var(--o-we-bg-color-dark);
-            }
+            border-right: 1px solid $o-we-bg;
+            background-color: $o-we-bg;
+            color: $o-we-color;
 
             &:first-child {
                 border-top-left-radius: 0.25rem;
diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
index da7caa44c5f..f803ea557aa 100644
--- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
@@ -47,52 +47,99 @@ body.editor_enable.editor_has_snippets {
         }
     }
 }
+
+
+.oe_snippet {
+    // No root because can be drag and drop (and the helper is in the body)
+    position: relative;
+    z-index: $o-we-zindex;
+    width: 100px;
+    background-color: $o-we-sidebar-blocks-content-snippet-bg;
+
+    &.ui-draggable-dragging {
+        transform: rotate(3deg);
+        box-shadow: 0 5px 25px -10px black;
+        transition: transform 0.3s, box-shadow 0.3s;
+    }
+
+    > :not(.oe_snippet_thumbnail) {
+        display: none !important;
+    }
+
+    .oe_snippet_thumbnail {
+        width: 100%;
+
+        .oe_snippet_thumbnail_img {
+            width: 100%;
+            height: 0;
+            padding-bottom: 75%;
+            background-size: cover;
+            background-position: center center;
+            text-align: center;
+            overflow: hidden;
+        }
+
+        img.oe_snippet_thumbnail_img {
+            height: auto;
+            padding-bottom: 0;
+        }
+    }
+
+    .oe_snippet_thumbnail_title {
+        display: none;
+    }
+}
+
 // SNIPPET PANEL
 #oe_snippets {
     @include o-w-preserve-btn;
 
-    @include o-position-absolute(0, auto, 0, -$o-we-sidebar-width);
+    @include o-position-absolute(var(--o-we-toolbar-height), auto, 0, 0);
     position: fixed;
     z-index: $o-we-zindex;
     display: flex;
     flex-flow: column nowrap;
     width: $o-we-sidebar-width;
 
-    border-right: $o-we-border-width solid $o-we-border-color;
-    background-color: var(--o-we-snippets-bg-color);
-    color: var(--o-we-snippets-color);
-    box-shadow: 0px 10px 10px -10px black inset;
-    font-family: Roboto, $font-family-sans-serif;
-    font-size: $o-we-font-size;
-    line-height: $o-we-line-height;
+    border-right: $o-we-sidebar-border-width solid $o-we-sidebar-border-color;
+    background-color: $o-we-sidebar-bg;
+    color: $o-we-sidebar-color;
+    font-family: $o-we-font-family;
+    font-size: $o-we-sidebar-font-size;
+    font-weight: 700;
+    line-height: 1;
 
-    transition: left 400ms $o-we-md-ease 0s;
+    transition: transform 400ms ease 0s; // Also for fullscreen
+    transform: translateX(-100%);
 
     &.o_loaded {
-        left: 0 !important;
+        transform: none;
     }
 
     #snippets_menu {
         flex: 0 0 auto;
         display: flex;
-        height: var(--o-we-toolbar-height);
-        background: var(--o-we-bg-color);
-        color: var(--o-we-color);
-        font-family: $o-we-font-family;
+        height: $o-we-sidebar-tabs-height;
+        border-bottom: $o-we-sidebar-tabs-border-width solid $o-we-sidebar-tabs-border-color;
+        background: $o-we-sidebar-tabs-bg;
+        color: $o-we-sidebar-tabs-color;
 
         > button {
             flex: 1 1 auto;
             border: none;
             background: transparent;
             color: inherit;
+            font-weight: inherit; // Don't know why but does not work without it
             @include o-text-overflow();
 
-            &.active {
-                background: var(--o-we-snippets-bg-color);
-                color: var(--o-we-snippets-color);
+            &:disabled {
+                color: $o-we-sidebar-tabs-disabled-color;
             }
 
+            &.active,
             &:focus, &:active, &:focus:active {
+                border-bottom: $o-we-sidebar-tabs-active-border-width solid $o-we-sidebar-tabs-active-border-color;
+                color: $o-we-sidebar-tabs-active-color;
                 outline: none;
             }
         }
@@ -104,60 +151,49 @@ body.editor_enable.editor_has_snippets {
         overflow: auto;
     }
 
-    .o_panel_header {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding: 3%;
-        color: inherit;
-        margin-bottom: 3%;
-
-        i {
-            margin-right: 5px;
+    > #o_scroll {
+        background-color: $o-we-sidebar-blocks-content-bg;
+        padding: 0 $o-we-sidebar-blocks-content-spacing;
+
+        .o_panel, .o_panel_header {
+            padding: $o-we-sidebar-blocks-content-spacing 0;
         }
-    }
 
-    > #o_scroll {
         .o_panel_body {
-            &:after {
-                content: " ";
+            margin-left: -$o-we-sidebar-blocks-content-snippet-spacing;
+
+            &::after {
+                content: "";
                 display: table;
-                clear: both;
+                clear: left;
             }
 
-            .oe_snippet {
+            > .oe_snippet {
                 float: left;
-                width: 45.5%;
-                margin: 0 0 6% 3%;
-                box-shadow: none;
-                background-color: transparent;
+                width: percentage(1 / 3);
+                background-clip: padding-box;
+                border-left: $o-we-sidebar-blocks-content-snippet-spacing solid transparent;
+                margin-bottom: $o-we-sidebar-blocks-content-snippet-spacing;
                 user-select: none;
 
                 cursor: pointer;
                 cursor: copy;
                 cursor: grab;
 
-                .oe_snippet_thumbnail {
-                    .oe_snippet_thumbnail_img {
-                        border: none;
-                    }
-
-                    .oe_snippet_thumbnail_title {
-                        border: none;
-                        padding: 5px 0;
-                    }
+                &:nth-child(3n+1) {
+                    clear: left;
+                }
 
-                    &:hover .oe_snippet_thumbnail_img {
-                        transition: transform 200ms ease 0s;
-                        transform: scale(1.05);
-                    }
+                .oe_snippet_thumbnail_title {
+                    display: block;
+                    padding: $o-we-sidebar-blocks-content-spacing / 2;
+                    text-align: center;
                 }
 
                 &.o_disabled {
                     .oe_snippet_thumbnail {
                         background-color: rgba(255, 0, 0, 0.75);
                     }
-
                     .oe_snippet_thumbnail_img {
                         opacity: 0.8;
                     }
@@ -167,20 +203,14 @@ body.editor_enable.editor_has_snippets {
                     .oe_snippet_thumbnail_img {
                         opacity: 0.5;
                     }
-
                     .btn.o_install_btn {
                         display: none;
                         @include o-position-absolute($top: 16px);
                     }
-
                     &:hover .btn.o_install_btn {
                         display: block;
                     }
                 }
-
-                &:nth-child(2n + 1) {
-                    clear: left;
-                }
             }
         }
         #snippet_custom .oe_snippet .oe_snippet_thumbnail {
@@ -213,39 +243,51 @@ body.editor_enable.editor_has_snippets {
     }
 
     > .o_we_customize_panel {
+        position: relative;
 
-        @mixin we-icon-button($icon, $color: null) {
+        @mixin we-icon-button($icon, $color: $o-we-sidebar-content-field-control-item-color, $align: right) {
             @extend %we-icon-button;
-            padding-right: 0.5em + 1em + 0.5em;
+            padding-#{$align}: 2 * $o-we-sidebar-content-field-control-item-spacing + $o-we-sidebar-content-field-control-item-size;
 
             &::after {
                 content: $icon;
                 color: $color;
+
+                @if $align == left {
+                    right: auto;
+                    left: $o-we-sidebar-content-field-control-item-spacing;
+                }
             }
         }
 
-        we-button, we-toggler {
+        @mixin large-component() {
             flex: 1 1 auto;
+            width: $o-we-sidebar-width / 2; // TODO maybe there is a better way to implement this
+        }
+
+        we-button, we-toggler {
             cursor: pointer;
             @include o-text-overflow(block);
-            padding: 0.1em 0.4em;
-            margin: 0;
-            border: 1px solid var(--o-we-bg-color-dark);
-            border-radius: 0;
-            background-color: var(--o-we-bg-color-dark);
-            color: var(--o-we-color);
-            line-height: 1.5;
-            white-space: nowrap;
+            padding: 0 $o-we-sidebar-content-field-clickable-spacing;
+            border: $o-we-sidebar-content-field-border-width solid $o-we-sidebar-content-field-border-color;
+            border-radius: $o-we-sidebar-content-field-border-radius;
+            background: $o-we-sidebar-content-field-clickable-bg;
+            color: $o-we-sidebar-content-field-color;
+            line-height: $o-we-sidebar-content-field-height - 2 * $o-we-sidebar-content-field-border-width;
             text-align: left;
 
-            &.fa, &.fas, &.fab, &.far {
-                flex: 0 0 auto;
+            &.active {
+                background: $o-we-sidebar-content-field-pressed-bg;
+                color: $o-we-sidebar-content-field-pressed-color;
+            }
+
+            &.fa {
                 display: inline-block;
-                margin: 0 0 0 0.3em;
+                margin: 0 0 0 $o-we-sidebar-content-field-multi-spacing;
                 padding: 0;
                 border: none;
-                background-color: transparent;
-                color: var(--o-we-snippets-color);
+                background: none;
+                color: inherit;
                 text-align: center;
 
                 &.fa-times, &.fa-minus {
@@ -267,6 +309,7 @@ body.editor_enable.editor_has_snippets {
             &.o_we_primary_btn {
                 display: inline-flex !important;
                 width: auto;
+                background: none;
                 background-color: $o-brand-primary;
                 color: white;
 
@@ -276,30 +319,25 @@ body.editor_enable.editor_has_snippets {
             }
         }
         we-toggler {
-            @include we-icon-button('\f107');
+            @include we-icon-button('\f0d7');
 
             + * {
                 display: none !important;
-                margin-top: -1px !important;
-                background-color: rgba(0, 0, 0, 0.3);
+                border: $o-we-sidebar-content-field-dropdown-border-width solid $o-we-sidebar-content-field-dropdown-border-color;
+                background-color: $o-we-sidebar-content-field-dropdown-bg;
+                box-shadow: $o-we-sidebar-content-field-dropdown-shadow;
             }
-            &.active {
-                &::after {
-                    content: '\f106';
-                }
-
-                + * {
-                    display: block !important;
-                }
+            &.active + * {
+                display: block !important;
             }
         }
         %we-icon-button {
             position: relative;
 
             &::after {
-                @include o-position-absolute(50%, 0.5em);
+                @include o-position-absolute(50%, $o-we-sidebar-content-field-control-item-spacing);
                 transform: translateY(-50%);
-                width: 1em;
+                width: $o-we-sidebar-content-field-control-item-size;
                 text-align: center;
                 font-family: FontAwesome;
             }
@@ -313,25 +351,32 @@ body.editor_enable.editor_has_snippets {
         we-customizeblock-options {
             position: relative;
             display: block;
-            padding: 1em;
-            color: var(--o-we-snippets-color);
-
-            &:nth-child(2n) {
-                background-color: rgba(0, 0, 0, 0.1);
+            padding: 0 $o-we-sidebar-content-block-spacing $o-we-sidebar-content-block-spacing $o-we-sidebar-content-indent;
+            border-top: $o-we-sidebar-content-main-title-border-width solid $o-we-sidebar-content-main-title-border-color;
+            background-image: $o-we-sidebar-content-main-title-shadow;
+            background-size: 100% ($o-we-sidebar-content-main-title-height / 2);
+            background-repeat: no-repeat;
+
+            &:first-child {
+                border-top-color: $o-we-sidebar-content-main-title-shadow-start;
             }
 
             > we-title {
                 display: flex;
                 align-items: center;
-                margin-bottom: 0.5em;
-                text-transform: uppercase;
-                font-weight: bold;
-                color: inherit !important;
+                margin-bottom: $o-we-sidebar-content-main-title-margin-bottom - $o-we-sidebar-content-field-spacing;
+
+                > span {
+                    color: $o-we-sidebar-content-main-title-color !important;
+                    font-size: $o-we-sidebar-content-main-title-font-size;
+                    line-height: $o-we-sidebar-content-main-title-height - $o-we-sidebar-content-main-title-border-width;
+                }
 
                 > we-button-group {
                     flex: 0 0 auto;
                     display: block;
                     margin-left: auto;
+                    color: $o-we-sidebar-content-field-control-item-color;
                     text-align: center;
 
                     > we-customizeblock-option {
@@ -347,24 +392,18 @@ body.editor_enable.editor_has_snippets {
             position: relative;
             display: block;
 
-            > *, > div > * {
-                display: block;
-                margin-top: 0.5em;
-            }
-
             .dropdown-menu {
                 // FIXME temporary fix for m2o option for example
                 position: static !important;
             }
 
             > we-alert {
-                background-color: var(--o-we-snippets-bg-info);
+                background-color: $o-we-color-info;
                 display: block;
-                margin: -.5em;
-                padding: .5em;
+                padding: $o-we-sidebar-content-field-label-spacing;
 
                 we-title {
-                    margin-bottom: 0.5em;
+                    margin-bottom: $o-we-sidebar-content-field-label-spacing;
                     text-transform: uppercase;
                     font-weight: bold;
                 }
@@ -384,53 +423,74 @@ body.editor_enable.editor_has_snippets {
         //----------------------------------------------------------------------
 
         .o_we_user_value_widget {
-            flex: 1 1 auto;
-            min-width: 0;
             @extend %o-we-inline;
+            margin-top: $o-we-sidebar-content-field-spacing;
 
             > div {
                 display: flex;
-                align-items: baseline;
-                justify-content: flex-end;
+                align-items: center;
+                min-height: $o-we-sidebar-content-field-height;
             }
         }
 
         // Buttons
         we-button.o_we_user_value_widget {
+            > div {
+                // Needed otherwise cannot work because of flex display
+                @include o-text-overflow(block);
+                min-height: $o-we-sidebar-content-field-height - 2 * $o-we-sidebar-content-field-border-width;
+                line-height: $o-we-sidebar-content-field-height - 2 * $o-we-sidebar-content-field-border-width;
+            }
             &.active {
-                @include we-icon-button('\f00c', $o-we-color-success);
+                @include we-icon-button('\f00c', $align: left);
             }
-
-            > div {
-                justify-content: flex-start;
+            &.fa > div {
+                display: none;
             }
         }
 
         // Checkboxes
         .o_we_checkbox_wrapper.o_we_user_value_widget {
-            @extend .o_we_force_inline;
-            flex: 0 0 auto;
             padding: 0;
             border: none;
-            background-color: transparent;
-            color: inherit;
+            background: none;
+
+            > div {
+                display: flex;
+                min-height: $o-we-sidebar-content-field-height;
+                line-height: $o-we-sidebar-content-field-height;
+            }
 
             we-checkbox {
                 flex: 0 0 auto;
-                display: block;
-                width: 1em;
-                height: 1em;
-                margin-left: auto;
-                border: 1px solid var(--o-we-bg-color-dark);
-                border-radius: 0;
-                background-color: var(--o-we-bg-color-dark);
+                display: flex;
+                align-items: center;
+                width: $o-we-sidebar-content-field-toggle-width;
+                height: $o-we-sidebar-content-field-toggle-height;
+                background-color: $o-we-sidebar-content-field-toggle-bg;
+                border-radius: 10rem;
+
+                &::after {
+                    content: "";
+                    display: block;
+                    width: $o-we-sidebar-content-field-toggle-control-width;
+                    height: $o-we-sidebar-content-field-toggle-control-height;
+                    border-radius: 10rem;
+                    background-color: $o-we-sidebar-content-field-toggle-control-bg;
+                    box-shadow: $o-we-sidebar-content-field-toggle-control-shadow;
+                }
             }
 
             &.active {
-                padding-right: 0;
+                padding-left: 0;
+
+                we-checkbox {
+                    background-color: $o-we-sidebar-content-field-toggle-active-bg;
+                    justify-content: flex-end;
+                }
 
                 &::after {
-                    right: 0;
+                    display: none;
                 }
             }
         }
@@ -439,67 +499,119 @@ body.editor_enable.editor_has_snippets {
         we-select.o_we_user_value_widget {
             position: relative;
 
-            we-toggler {
-                flex: 0 0 100%;
-
-                &.active {
-                    background-color: transparent;
-                    border-color: var(--o-we-color);
-                }
+            &:not(.o_we_icon_select) we-toggler {
+                @include large-component();
             }
+
             we-select-menu {
                 @include o-position-absolute(100%, 0, auto, 0);
                 z-index: $zindex-dropdown;
-                border: 1px solid var(--o-we-color);
-                background-color: var(--o-we-bg-color-dark);
                 max-height: 600px;
                 overflow-y: auto;
-            }
+                margin-top: $o-we-sidebar-content-field-dropdown-spacing !important;
 
-            &.o_we_icon_select {
-                flex: 0 0 auto;
+                > we-title {
+                    line-height: $o-we-sidebar-content-field-dropdown-item-height;
+                }
+
+                we-button {
+                    @include we-icon-button('', $align: left); // Always a padding on the left
+                    margin-top: 0;
+                    border: none;
+                    background: none;
+                    background-clip: padding-box;
+                    background-color: $o-we-sidebar-content-field-dropdown-item-bg;
+                    color: $o-we-sidebar-content-field-dropdown-item-color;
+
+                    > div {
+                        line-height: $o-we-sidebar-content-field-dropdown-item-height;
+                    }
+
+                    &:not(.d-none) ~ we-button {
+                        // Use a border-top instead of a margin-top as when the
+                        // mouse goes from one select button to another, the
+                        // option preview should switch from the first button's
+                        // option to the second one without reset to selected
+                        // state in between.
+                        border-top: $o-we-sidebar-content-field-dropdown-item-spacing solid transparent;
+                    }
+
+                    &.active {
+                        color: $o-we-sidebar-content-field-dropdown-item-active-color;
+                    }
+                }
             }
         }
 
         // Inputs
         we-input.o_we_user_value_widget {
 
+            > div {
+                flex: 0 1 auto;
+                width: $o-we-sidebar-content-field-input-max-width;
+                border: $o-we-sidebar-content-field-border-width solid $o-we-sidebar-content-field-border-color;
+                border-radius: $o-we-sidebar-content-field-border-radius;
+                background-color: $o-we-sidebar-content-field-input-bg;
+
+                &:focus-within {
+                    border-color: $o-we-sidebar-content-field-input-border-color;
+                }
+            }
+
+            &.o_we_large_input > div {
+                flex: 1 1 auto;
+            }
+
             input {
+                box-sizing: content-box;
                 flex: 1 1 auto;
                 width: 0;
-                min-width: 1.5em;
-                margin: 0 2px 0 0;
-                padding: 0 2px;
+                min-width: 2ch;
+                height: $o-we-sidebar-content-field-height - 2 * $o-we-sidebar-content-field-border-width;
+                padding: 0 $o-we-sidebar-content-field-clickable-spacing;
                 border: none;
                 border-radius: 0;
-                background-color: var(--o-we-bg-color-dark);
-                color: var(--o-we-color);
+                background-color: transparent;
+                color: inherit;
+                font-family: $o-we-sidebar-content-field-input-font-family;
+
+                &::placeholder {
+                    color: $o-we-sidebar-content-field-control-item-color;
+                }
+                &:focus {
+                    outline: none;
+                }
             }
             span {
                 flex: 0 0 auto;
+                padding-right: $o-we-sidebar-content-field-label-spacing;
+                font-size: $o-we-sidebar-content-field-input-unit-font-size;
+                color: $o-we-sidebar-content-field-control-item-color;
             }
         }
 
         // Color Pickers
         .o_we_so_color_palette.o_we_user_value_widget {
-            @extend .o_we_force_inline;
-            flex: 0 0 auto;
 
             .o_we_color_preview {
                 @extend %o-preview-alpha-background;
-                display: block;
                 flex: 0 0 auto;
-                width: 1em;
-                height: 1em;
-                margin-left: auto;
-                border: 1px solid white;
+                display: block;
+                width: $o-we-sidebar-content-field-colorpicker-size;
+                height: $o-we-sidebar-content-field-colorpicker-size;
+                border: $o-we-sidebar-content-field-border-width solid $o-we-sidebar-content-field-border-color;
+                border-radius: 10rem;
+
+                &::after {
+                    box-shadow: $o-we-sidebar-content-field-colorpicker-shadow;
+                }
             }
             we-toggler {
                 display: none;
             }
         }
 
-        // Chart Snippet
+        // Matrix (e.g. Chart Snippet)
         we-matrix {
             overflow-y: auto;
 
@@ -511,7 +623,7 @@ body.editor_enable.editor_has_snippets {
                     text-align: center;
                     we-button {
                         display: inline-block;
-                        color: white;
+                        color: inherit;
                         height: 100%;
 
                         &.o_we_matrix_remove_col, &.o_we_matrix_remove_row {
@@ -519,9 +631,9 @@ body.editor_enable.editor_has_snippets {
                         }
                     }
                     input {
-                        border: 1px solid var(--o-we-bg-color-dark);
-                        background-color: var(--o-we-bg-color-dark);
-                        color: var(--o-we-color);
+                        border: $o-we-sidebar-content-field-border-width solid $o-we-sidebar-content-field-border-color;
+                        background-color: $o-we-sidebar-content-field-input-bg;
+                        color: inherit;
                         font-size: 12px;
                         width: 100%;
                     }
@@ -540,20 +652,129 @@ body.editor_enable.editor_has_snippets {
             }
         }
 
-        we-multi we-row > div {
-            flex-wrap: wrap;
+        // Progress bar widget
+        we-range.o_we_user_value_widget {
 
-            we-select .o_we_user_value_widget > div > we-select-menu {
-                top: 0;
-            }
-            we-row {
-                flex-basis: 100%;
+            input[type="range"] {
+                @include large-component();
+                height: $o-we-sidebar-content-field-height;
+                padding: 0;
+                background-color: transparent;
+                appearance: none;
+
+                &:focus {
+                    outline: none;
+
+                    &::-webkit-slider-thumb { box-shadow: none; }
+                    &::-moz-range-thumb     { box-shadow: none; }
+                    &::-ms-thumb            { box-shadow: none; }
+                }
+                &::-moz-focus-outer {
+                    border: 0;
+                }
+                &::-webkit-slider-thumb {
+                    width: $o-we-sidebar-content-field-progress-control-height;
+                    height: $o-we-sidebar-content-field-progress-control-height;
+                    margin-top: ($o-we-sidebar-content-field-progress-height - $o-we-sidebar-content-field-progress-control-height) / 2;
+                    border: none;
+                    border-radius: 10rem;
+                    background-color: $o-we-sidebar-content-field-progress-active-color;
+                    box-shadow: none;
+                    appearance: none;
+
+                    &:active {
+                        background-color: $o-we-sidebar-content-field-progress-active-color;
+                    }
+                }
+                &::-webkit-slider-runnable-track {
+                    width: 100%;
+                    height: $o-we-sidebar-content-field-progress-height;
+                    cursor: pointer;
+                    // Unfortunately, Chrome does not support customizing the lower part of the track
+                    background-color: $o-we-sidebar-content-field-progress-color;
+                    border-color: transparent;
+                    border-radius: 10rem;
+                    box-shadow: none;
+
+                    position: relative;
+                    // z-index: 1000;
+                }
+                &::-moz-range-thumb {
+                    width: $o-we-sidebar-content-field-progress-control-height;
+                    height: $o-we-sidebar-content-field-progress-control-height;
+                    border: none;
+                    border-radius: 10rem;
+                    background-color: $o-we-sidebar-content-field-progress-active-color;
+                    box-shadow: none;
+                    appearance: none;
+
+                    &:active {
+                        background-color: $o-we-sidebar-content-field-progress-active-color;
+                    }
+                }
+                &::-moz-range-track {
+                    width: 100%;
+                    height: $o-we-sidebar-content-field-progress-height;
+                    cursor: pointer;
+                    background-color: $o-we-sidebar-content-field-progress-color;
+                    border-color: transparent;
+                    border-radius: 10rem;
+                    box-shadow: none;
+                }
+                &::-moz-range-progress {
+                    background-color: $o-we-sidebar-content-field-progress-active-color;
+                    height: $o-we-sidebar-content-field-progress-height;
+                    border-color: transparent;
+                    border-radius: 10rem;
+                }
+                &::-ms-thumb {
+                    width: $o-we-sidebar-content-field-progress-control-height;
+                    height: $o-we-sidebar-content-field-progress-control-height;
+                    margin-top: 0;
+                    margin-right: 0;
+                    margin-left: 0;
+                    border: none;
+                    border-radius: 10rem;
+                    background-color: $o-we-sidebar-content-field-progress-active-color;
+                    box-shadow: none;
+                    appearance: none;
+
+                    &:active {
+                        background-color: $o-we-sidebar-content-field-progress-active-color;
+                    }
+                }
+                &::-ms-track {
+                    width: 100%;
+                    height: $o-we-sidebar-content-field-progress-height;
+                    cursor: pointer;
+                    background-color: transparent;
+                    border-color: transparent;
+                    border-width: $o-we-sidebar-content-field-progress-control-height / 2;
+                    box-shadow: none;
+                }
+                &::-ms-fill-lower {
+                    background-color: $o-we-sidebar-content-field-progress-active-color;
+                    border-radius: 10rem;
+                    @include border-radius($custom-range-track-border-radius);
+                }
+                &::-ms-fill-upper {
+                    background-color: $o-we-sidebar-content-field-progress-color;
+                    border-radius: 10rem;
+                }
             }
         }
 
-        we-range input {
-            flex-grow: 1;
-            width: 1px;
+        // Multi widgets
+        we-multi.o_we_user_value_widget {
+            margin-top: 0;
+
+            > div {
+                flex-flow: row wrap;
+
+                > * {
+                    flex: 1 1 auto; // Needed for colorpicker...
+                }
+            }
         }
 
         //----------------------------------------------------------------------
@@ -562,17 +783,25 @@ body.editor_enable.editor_has_snippets {
 
         we-row {
             position: relative;
-            flex: 1 1 auto;
-            min-width: 0;
             @extend %o-we-inline;
+            margin-top: $o-we-sidebar-content-field-spacing;
+
+            .o_we_user_value_widget {
+                margin-top: 0;
+                min-width: 4em; // Ideally rely on actual natural min-width, but does not work...
+            }
+            we-button, .o_we_so_color_palette {
+                &.o_we_user_value_widget {
+                    min-width: auto; // ... except for these ones
+                }
+            }
 
             > div {
                 display: flex;
                 align-items: center;
-                justify-content: flex-end;
 
-                > * + * {
-                    margin-left: 0.5em;
+                > :not(.d-none) ~ * {
+                    margin-left: $o-we-sidebar-content-field-multi-spacing;
                 }
             }
 
@@ -581,27 +810,31 @@ body.editor_enable.editor_has_snippets {
             }
         }
 
-        %o-we-inline:not(.o_we_fw) {
+        %o-we-inline {
             display: flex;
             flex-flow: row wrap;
-            align-items: center;
 
             > we-title {
-                @include o-text-overflow();
-                max-width: 95%;
-                min-width: 30%;
-                margin-right: 5%;
+                width: 100%;
             }
             > div {
-                flex: 1 1 auto;
-                min-width: 30%;
+                flex: 0 1 auto;
+                min-width: 0;
+                margin-top: $o-we-sidebar-content-field-spacing;
             }
 
-            &.o_we_force_inline {
+            &:not(.o_we_fw) {
                 flex-flow: row nowrap;
+                align-items: center;
 
+                > we-title {
+                    flex: 0 0 auto;
+                    @include o-text-overflow();
+                    width: $o-we-sidebar-content-field-label-width;
+                    padding-right: $o-we-sidebar-content-field-label-spacing;
+                }
                 > div {
-                    min-width: 0;
+                    margin-top: 0;
                 }
             }
         }
@@ -611,67 +844,35 @@ body.editor_enable.editor_has_snippets {
         flex: 0 0 auto;
         max-height: 220px;
         overflow-y: auto;
-        background-color: var(--o-we-bg-color);
-        border-top: 2px solid;
+        padding: $o-we-sidebar-blocks-content-spacing;
+        background-color: $o-we-sidebar-blocks-content-bg;
+        border-top: $o-we-sidebar-tabs-border-width solid $o-we-sidebar-tabs-border-color;
+
+        .o_panel_header {
+            padding: $o-we-sidebar-content-field-spacing 0;
+        }
 
         .o_we_invisible_entry {
-            padding: 0.5rem;
+            padding: $o-we-sidebar-content-field-spacing $o-we-sidebar-content-field-clickable-spacing;
             cursor: pointer;
 
             &:hover {
-                background-color: var(--o-we-snippets-bg-color);
+                background-color: $o-we-sidebar-bg;
             }
         }
     }
-}
-
-.oe_snippet {
-    // No root because can be drag and drop (and the helper is in the body)
-    position: relative;
-    z-index: $o-we-zindex;
-    width: 100px;
-    background-color: var(--o-we-snippets-bg-color);
-    color: var(--o-we-snippets-color);
-
-    &.ui-draggable-dragging {
-        transform: rotate(3deg);
-        box-shadow: 0 5px 25px -10px black;
-        transition: transform 0.3s, box-shadow 0.3s;
-    }
-
-    > :not(.oe_snippet_thumbnail) {
-        display: none !important;
-    }
-
-    .oe_snippet_thumbnail {
-        width: 100%;
-
-        .oe_snippet_thumbnail_img {
-            width: 100%;
-            height: 0;
-            border: $o-we-border-width solid $o-we-border-color;
-            padding-bottom: 75%;
-            background-size: cover;
-            background-position: center center;
-            text-align: center;
-            overflow: hidden;
-        }
 
-        img.oe_snippet_thumbnail_img {
-            height: auto;
-            padding-bottom: 0;
-        }
-
-        .oe_snippet_thumbnail_title {
+    &.o_we_backdrop {
+        > .o_we_customize_panel::after {
+            content: "";
+            @include o-position-absolute(0, 0, 0, 0);
             display: block;
-            padding: 5px;
-            font-size: 12px;
-            font-weight: 300;
-            text-shadow: none;
+            pointer-events: none;
+            background: $o-we-sidebar-content-backdrop-bg;
         }
 
-        &:hover .oe_snippet_thumbnail_title {
-            color: var(--o-we-color-accent);
+        .o_we_widget_opened {
+            z-index: $zindex-dropdown;
         }
     }
 }
@@ -701,27 +902,34 @@ body.editor_enable.editor_has_snippets {
 
 // SNIPPET OPTIONS
 .colorpicker {
+    background-color: $o-we-sidebar-content-field-colorpicker-dropdown-bg;
+    color: $o-we-sidebar-content-field-colorpicker-dropdown-color;
+
     .d-flex .btn.o_we_colorpicker_switch_pane_btn {
-        font-size: 0.8em !important;
+        color: inherit !important;
+        font-size: inherit !important;
+        font-weight: inherit !important;
 
         &.active {
-            border-bottom: 1px solid $o-we-handles-accent-color !important;
+            color: $o-we-sidebar-content-field-colorpicker-dropdown-active-color;
+            border-bottom: $o-we-sidebar-tabs-active-border-width solid $o-we-sidebar-tabs-active-border-color;
         }
-
         + .o_colorpicker_reset {
-            border: 1px solid var(--o-we-color) !important;
-            border-radius: 2px !important;
-            font-size: 0.8em !important;
-            padding: 0 2px !important;
+            padding: 0 $o-we-sidebar-content-field-clickable-spacing !important;
+            border: $o-we-sidebar-content-field-border-width solid $o-we-sidebar-content-field-border-color !important;
+            border-radius: $o-we-sidebar-content-field-border-radius !important;
+            background: $o-we-sidebar-content-field-clickable-bg !important;
+            line-height: $o-we-sidebar-content-field-height - 2 * $o-we-sidebar-content-field-border-width !important;
+            color: inherit !important;
+            font-size: inherit !important;
+            font-weight: inherit !important;
             align-self: center;
         }
-
         &:focus {
             box-shadow: none;
         }
     }
     .o_colorpicker_sections {
-        font-size: 14px;
 
         .o_we_color_btn, .o_we_color_combination_btn {
             float: left;
@@ -729,7 +937,7 @@ body.editor_enable.editor_has_snippets {
             padding-top: percentage(1 / 8);
             margin: 0;
             border: none;
-            box-shadow: inset 0 0 0 1px var(--o-we-bg-color-dark);
+            box-shadow: inset 0 0 0 1px $o-we-sidebar-content-field-colorpicker-dropdown-bg;
 
             &.o_colorpicker_reset {
                 background-color: transparent;
@@ -752,23 +960,27 @@ body.editor_enable.editor_has_snippets {
             padding: 0;
             margin: 0;
             background-clip: padding-box;
-            border-top: 4px solid transparent;
-            border-bottom: 4px solid transparent;
+            border-top: $o-we-sidebar-content-field-spacing solid transparent;
+            border-bottom: $o-we-sidebar-content-field-spacing solid transparent;
 
             > .o_we_cc_preview_wrapper {
-                padding: 8px;
+                padding: $o-we-sidebar-content-field-clickable-spacing;
             }
 
             + .o_we_color_combination_btn {
-                margin-top: -4px;
+                margin-top: -$o-we-sidebar-content-field-spacing;
             }
         }
 
         .o_colorpicker_section {
+            padding-top: $o-we-sidebar-content-field-spacing;
 
-            > :first-child {
-                margin: 4px 0;
+            &::after {
+                content: "";
+                display: table;
+                clear: both;
             }
+
             .o_we_color_btn {
                 position: relative;
 
@@ -798,30 +1010,6 @@ body.editor_enable.editor_has_snippets {
             }
         }
     }
-
-    .note-palette-title {
-        padding: 10px 0 10px 10px;
-        font-weight: bold;
-    }
-
-    .palette-reset {
-        @include o-position-absolute(0, 0);
-        margin: 0;
-        padding: 5px 10px 0;
-
-        .note-color-reset {
-            font-size: 20px !important;
-            color: desaturate(rgba($o-we-color-danger, 0.6), 40%);
-            margin: 1px 0 0;
-            padding: 0;
-            cursor: pointer;
-
-            &:hover {
-                background: transparent !important;
-                color: $o-we-color-danger;
-            }
-        }
-    }
 }
 
 // DROPZONES
@@ -1016,9 +1204,9 @@ body.editor_enable.editor_has_snippets {
 
                     > * {
                         margin: 0 2px;
-                        border: 1px solid $o-we-color-text-normal;
+                        border: 1px solid #999999;
                         border-radius: 20%;
-                        color: $o-we-color-text-normal;
+                        color: #999999;
                         opacity: 0.5;
                         transition: opacity 400ms ease 0s;
                         cursor: pointer;