[IMP] web_editor: increase font-size/spacing of the editor UI

11px was set as default font-size when achieving 5 or 6 edition levels
in the sidebar was the norm. Thanks to the snippet's cleanup, resulting
in a reduced number of editable elements, we can now increase the
default fon-size and, consequentially, all general spacings.

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

3 files changed, 24 insertions, 16 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 1deb721d119..18db07185d3 100644
--- a/addons/web_editor/static/src/scss/web_editor.variables.scss
+++ b/addons/web_editor/static/src/scss/web_editor.variables.scss
@@ -72,12 +72,12 @@ $o-we-dropdown-item-active-color: $o-we-fg-lighter !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-font-size: 12px !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-width: $o-we-sidebar-border-width + 290px !default;
 
-$o-we-sidebar-top-height: 26px !default;
+$o-we-sidebar-top-height: 46px !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;
@@ -98,8 +98,9 @@ $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) !default;
+$o-we-sidebar-content-padding-base: 10px !default;
+$o-we-sidebar-content-indent: $o-we-sidebar-content-gutter-item-indent + $o-we-sidebar-content-padding-base !default;
+$o-we-sidebar-content-backdrop-bg: rgba(black, 0.2) !default;
 
 $o-we-sidebar-content-main-title-border-extension: -1px !default;
 $o-we-sidebar-content-main-title-border-color: $o-we-bg-lighter !default;
@@ -115,12 +116,12 @@ $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-spacing: 7px !default;
 $o-we-sidebar-content-field-color: $o-we-fg-darker !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-spacing: 6px !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;
@@ -160,11 +161,11 @@ $o-we-sidebar-content-field-colorpicker-cc-height: 26px !default;
 $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: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
-$o-we-sidebar-content-field-input-unit-font-size: 9px !default;
+$o-we-sidebar-content-field-input-unit-font-size: 11px !default;
 $o-we-sidebar-content-field-input-border-color: $o-we-accent !default;
 
 // This value allows 5 fa icons (fit one row exactly with this)
-$o-we-sidebar-content-field-button-group-button-spacing: $o-we-sidebar-content-field-clickable-spacing * 1.5 !default;
+$o-we-sidebar-content-field-button-group-button-spacing: $o-we-sidebar-content-field-clickable-spacing * 1.2 !default;
 
 $o-we-sidebar-content-field-progress-height: 4px !default;
 $o-we-sidebar-content-field-progress-control-height: 10px !default;
diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
index b6689f2bcd4..675e44a9622 100644
--- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
@@ -159,7 +159,6 @@ body.editor_enable.editor_has_snippets {
     border: none;
     background: transparent;
     color: inherit;
-    font-size: 1.1em;
     font-weight: normal;
 
     > span {
@@ -190,7 +189,6 @@ body.editor_enable.editor_has_snippets {
     font-family: $o-we-font-family;
     font-size: $o-we-sidebar-font-size;
     font-weight: 400;
-    line-height: 1;
 
     transition: transform 400ms ease 0s;
     transform: translateX(-100%);
@@ -354,7 +352,7 @@ body.editor_enable.editor_has_snippets {
 
         @mixin large-component() {
             flex: 1 1 auto;
-            width: $o-we-sidebar-width / 2; // TODO maybe there is a better way to implement this
+            width: ($o-we-sidebar-width - $o-we-sidebar-content-padding-base - $o-we-sidebar-content-indent) * 0.5;
         }
 
         we-button, we-toggler {
@@ -421,8 +419,8 @@ body.editor_enable.editor_has_snippets {
         we-customizeblock-options {
             position: relative;
             display: block;
-            padding: 0 $o-we-sidebar-content-block-spacing $o-we-sidebar-content-block-spacing $o-we-sidebar-content-indent;
             box-shadow: 0 $o-we-sidebar-content-main-title-border-extension 0 $o-we-sidebar-content-main-title-border-color;
+            padding: $o-we-sidebar-content-block-spacing * .3 $o-we-sidebar-content-padding-base $o-we-sidebar-content-block-spacing * 1.5 $o-we-sidebar-content-indent;
             background-image: $o-we-sidebar-content-main-title-shadow;
             background-size: 100% ($o-we-sidebar-content-main-title-height / 2);
             background-repeat: no-repeat;
@@ -431,10 +429,10 @@ body.editor_enable.editor_has_snippets {
                 display: flex;
                 align-items: center;
                 margin-bottom: $o-we-sidebar-content-main-title-margin-bottom - $o-we-sidebar-content-field-spacing;
+                font-size: $o-we-sidebar-content-main-title-font-size;
 
                 > 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;
                 }
 
@@ -442,6 +440,11 @@ body.editor_enable.editor_has_snippets {
                     flex: 0 0 auto;
                     display: block;
                     margin-left: auto;
+                    font-size: .9em;
+
+                    .oe_snippet_remove {
+                        font-size: 1.2em;
+                    }
 
                     > * {
                         margin-left: $o-we-sidebar-content-field-multi-spacing;
@@ -1068,7 +1071,7 @@ body.editor_enable.editor_has_snippets {
     @extend %o-preview-alpha-background;
     font-family: sans-serif !important;
     font-size: 16px !important;
-    padding: $o-we-sidebar-content-field-spacing * 1.6;
+    padding: $o-we-sidebar-content-field-spacing;
 }
 .o_we_cc_preview_wrapper > * {
     margin-top: 0 !important;
@@ -1140,6 +1143,10 @@ body.editor_enable.editor_has_snippets {
             border-top: $o-we-sidebar-content-field-spacing solid transparent;
             border-bottom: $o-we-sidebar-content-field-spacing solid transparent;
 
+            + .o_we_color_combination_btn {
+                margin-top: $o-we-sidebar-content-field-spacing * -.5;
+            }
+
             .o_we_cc_preview_wrapper:after {
                 // For some reasons, in this specific context we have to
                 // compensate a 1px gap between the flex container and the
diff --git a/addons/web_editor/static/src/xml/snippets.xml b/addons/web_editor/static/src/xml/snippets.xml
index 41c7c6e612d..f2eaf597fcd 100644
--- a/addons/web_editor/static/src/xml/snippets.xml
+++ b/addons/web_editor/static/src/xml/snippets.xml
@@ -65,7 +65,7 @@
                 </t>
             </t>
         </div>
-        <div t-attf-class="o_colorpicker_sections #{widget.withCombinations ? 'd-none' : ''} pt-2 px-2 pb-3 bg-black-25" data-color-tab="theme-colors"/>
+        <div t-attf-class="o_colorpicker_sections #{widget.withCombinations ? 'd-none' : ''} py-3 px-2 bg-black-25" data-color-tab="theme-colors"/>
     </div>
     <t t-name="web_editor.colorpalette.combination.btn">
         <button type="button" class="o_we_color_btn o_we_color_combination_btn"