[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

1 files changed, 181 insertions, 61 deletions

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