[IMP] website, *: allow presets user edition

*: web, web_editor

Now, the user can edit each individual component of each color preset
thanks to the third tab of the left panel. The edition of the first
preset is the same as the others for the users but it is actually
also used for "no-preset" areas, meaning that they impact the whole
website by default (*without impacting the other presets*). The website
thus appears as areas using presets, preset 1 being the default (in the
future all areas will be customizable with a different preset). The only
difference between "using preset 1 explicitely" and "not using a preset"
will be that background color is transparent in no-preset, leaving the
body background appear. If the body background has no image, then there
is no difference at all as the background color of the body is set to be
the background color of the preset 1. In boxed mode, that color is used
for the "box" and the website body uses a different customizable color.

Note: before this commit, the "text" color edition was used to set the
main text color and one of the constrasting color for the color-yiq
function (the darkest if a dark color or the lightest if a light color).
That last part has been removed and automatic colors will now always
use $gray-900 and $white as contrasting colors, unless changed by the
theme explicitely. This needed to be removed as now the "text color"
edition has been moved in the "preset 1" config and should thus only
impact the "no-preset / preset 1" areas instead of all the presets.

Part of https://github.com/odoo/odoo/pull/45856
task-2197038

7 files changed, 120 insertions, 14 deletions

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 212ab507755..113337f6dab 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -739,7 +739,11 @@ const SelectUserValueWidget = UserValueWidget.extend({
      *
      * @private
      */
-    _onClick: function () {
+    _onClick: function (ev) {
+        if (ev.target.closest('[role="button"]')) {
+            return;
+        }
+
         if (!this.menuTogglerEl.classList.contains('active')) {
             this.trigger_up('user_value_widget_opening');
             this.menuTogglerEl.classList.add('active');
diff --git a/addons/web_editor/static/src/scss/bootstrap_overridden.scss b/addons/web_editor/static/src/scss/bootstrap_overridden.scss
index c1144ec23a7..f48d9bdaecb 100644
--- a/addons/web_editor/static/src/scss/bootstrap_overridden.scss
+++ b/addons/web_editor/static/src/scss/bootstrap_overridden.scss
@@ -7,6 +7,17 @@ $colors: () !default;
     $colors: map-merge(('#{$name}': o-color($color)), $colors);
 }
 
+$o-btn-bg-colors: () !default;
+$o-btn-bg-colors: map-merge((
+    'primary': o-color('o-cc1-btn-primary'),
+    'secondary': o-color('o-cc1-btn-secondary'),
+), $o-btn-bg-colors);
+$o-btn-border-colors: () !default;
+$o-btn-border-colors: map-merge((
+    'primary': o-color('o-cc1-btn-primary-border'),
+    'secondary': o-color('o-cc1-btn-secondary-border'),
+), $o-btn-border-colors);
+
 // Automatically extend bootstrap to create theme background/text/button classes
 $theme-colors: () !default;
 @each $name, $color in $o-theme-color-palette {
diff --git a/addons/web_editor/static/src/scss/bootstrap_overridden_backend.scss b/addons/web_editor/static/src/scss/bootstrap_overridden_backend.scss
index 8e1042c4cbd..ef2d6cf03c5 100644
--- a/addons/web_editor/static/src/scss/bootstrap_overridden_backend.scss
+++ b/addons/web_editor/static/src/scss/bootstrap_overridden_backend.scss
@@ -1,3 +1,14 @@
 
 $o-theme-color-palette: map-remove($o-theme-color-palette, 'primary', 'secondary', 'success', 'info', 'warning', 'danger', 'light', 'dark');
 $o-gray-color-palette: map-remove($o-gray-color-palette, '100', '200', '300', '400', '500', '600', '700', '800', '900');
+
+$o-btn-bg-colors: () !default;
+$o-btn-bg-colors: map-merge((
+    'primary': null,
+    'secondary': null,
+), $o-btn-bg-colors);
+$o-btn-border-colors: () !default;
+$o-btn-border-colors: map-merge((
+    'primary': null,
+    'secondary': null,
+), $o-btn-border-colors);
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 0eb6ee9fd1b..08a202263fc 100644
--- a/addons/web_editor/static/src/scss/web_editor.common.scss
+++ b/addons/web_editor/static/src/scss/web_editor.common.scss
@@ -6,6 +6,60 @@
     @each $color, $value in $grays {
         --#{$color}: #{$value};
     }
+
+    // Most of the keys of the color combination color should be null. We have
+    // to indicate their fallback values.
+    @for $index from 1 through length($o-color-combinations) {
+        $-text: color('o-cc#{$index}-text') or color-yiq(o-color('o-cc#{$index}-bg'));
+        $-headings: color('o-cc#{$index}-headings') or $-text;
+        $-h2: color('o-cc#{$index}-h2') or $-headings;
+        $-h3: color('o-cc#{$index}-h3') or $-h2;
+        $-h4: color('o-cc#{$index}-h4') or $-h3;
+        $-h5: color('o-cc#{$index}-h5') or $-h4;
+        $-h6: color('o-cc#{$index}-h6') or $-h5;
+
+        @if not color('o-cc#{$index}-text') {
+            --o-cc#{$index}-text: #{$-text};
+        }
+        @if not color('o-cc#{$index}-headings') {
+            --o-cc#{$index}-headings: #{$-headings};
+        }
+        @if not color('o-cc#{$index}-h2') {
+            --o-cc#{$index}-h2: #{$-h2};
+        }
+        @if not color('o-cc#{$index}-h3') {
+            --o-cc#{$index}-h3: #{$-h3};
+        }
+        @if not color('o-cc#{$index}-h4') {
+            --o-cc#{$index}-h4: #{$-h4};
+        }
+        @if not color('o-cc#{$index}-h5') {
+            --o-cc#{$index}-h5: #{$-h5};
+        }
+        @if not color('o-cc#{$index}-h6') {
+            --o-cc#{$index}-h6: #{$-h6};
+        }
+
+        @if not color('o-cc#{$index}-link') {
+            --o-cc#{$index}-link: #{theme-color('primary')};
+        }
+
+        $-btn-primary: color('o-cc#{$index}-btn-primary');
+        @if not $-btn-primary {
+            --o-cc#{$index}-btn-primary: #{theme-color('primary')};
+        }
+        @if not color('o-cc#{$index}-btn-primary-border') {
+            --o-cc#{$index}-btn-primary-border: #{$-btn-primary or theme-color('primary')};
+        }
+
+        $-btn-secondary: color('o-cc#{$index}-btn-secondary');
+        @if not $-btn-secondary {
+            --o-cc#{$index}-btn-secondary: #{theme-color('secondary')};
+        }
+        @if not color('o-cc#{$index}-btn-secondary-border') {
+            --o-cc#{$index}-btn-secondary-border: #{$-btn-secondary or theme-color('secondary')};
+        }
+    }
 }
 
 html, body {
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 ab240268f62..5f6f97a5e74 100644
--- a/addons/web_editor/static/src/scss/web_editor.variables.scss
+++ b/addons/web_editor/static/src/scss/web_editor.variables.scss
@@ -251,6 +251,7 @@ $o-we-toolbar-height: 32px;
 
         &.btn-primary {
             @include button-variant($o-brand-primary, $o-brand-primary);
+            color: white;
         }
         &.btn-secondary {
             @include button-variant($o-we-bg-color, $o-we-bg-color);
@@ -262,15 +263,19 @@ $o-we-toolbar-height: 32px;
         }
         &.btn-success {
             @include button-variant($o-we-color-success, $o-we-color-success);
+            color: white;
         }
         &.btn-info {
             @include button-variant($o-we-color-info, $o-we-color-info);
+            color: white;
         }
         &.btn-warning {
             @include button-variant($o-we-color-warning, $o-we-color-warning);
+            color: $o-we-color-divider;
         }
         &.btn-danger {
             @include button-variant($o-we-color-danger, $o-we-color-danger);
+            color: $o-we-color-divider;
         }
     }
 }
diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
index 1631c70f075..99c9ddf2a56 100644
--- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
@@ -265,6 +265,21 @@ body.editor_enable.editor_has_snippets {
         }
         we-toggler {
             @include we-icon-button('\f107');
+
+            + * {
+                display: none !important;
+                margin-top: -1px !important;
+                background-color: rgba(0, 0, 0, 0.3);
+            }
+            &.active {
+                &::after {
+                    content: '\f106';
+                }
+
+                + * {
+                    display: block !important;
+                }
+            }
         }
         %we-icon-button {
             position: relative;
@@ -284,8 +299,9 @@ body.editor_enable.editor_has_snippets {
         }
 
         we-customizeblock-options {
+            position: relative;
             display: block;
-            padding: 0.5em;
+            padding: 1em;
             color: var(--o-we-snippets-color);
 
             &:nth-child(2n) {
@@ -343,6 +359,14 @@ body.editor_enable.editor_has_snippets {
             }
         }
 
+        .o_we_fold_icon {
+            @include o-position-absolute(0, 100%, 0, auto);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 1em;
+        }
+
         //----------------------------------------------------------------------
         // User Value Widgets
         //----------------------------------------------------------------------
@@ -409,16 +433,10 @@ body.editor_enable.editor_has_snippets {
                 &.active {
                     background-color: transparent;
                     border-color: var(--o-we-color);
-
-                    + we-select-menu {
-                        display: block;
-                    }
                 }
             }
             we-select-menu {
                 @include o-position-absolute(100%, 0, auto, 0);
-                margin-top: -1px;
-                display: none;
                 z-index: $zindex-dropdown;
                 border: 1px solid var(--o-we-color);
                 background-color: var(--o-we-bg-color-dark);
diff --git a/addons/web_editor/static/src/xml/snippets.xml b/addons/web_editor/static/src/xml/snippets.xml
index aee5de39106..aff99211e31 100644
--- a/addons/web_editor/static/src/xml/snippets.xml
+++ b/addons/web_editor/static/src/xml/snippets.xml
@@ -64,14 +64,17 @@
     <t t-name="web_editor.colorpalette.combination.btn">
         <button type="button" class="o_we_color_btn o_we_color_combination_btn o_we_cc_preview_container"
                 t-att-data-color="number" t-attf-title="Preset #{number}">
-            <div class="o_we_cc_preview_wrapper d-flex justify-content-between align-items-end">
-                <h1 class="o_we_color_combination_btn_title">Title</h1>
-                <p class="o_we_color_combination_btn_text flex-grow-1">Text</p>
-                <span class="o_we_color_combination_btn_btn btn btn-sm btn-primary o_btn_preview mr-1"><small>Button</small></span>
-                <span class="o_we_color_combination_btn_btn btn btn-sm btn-secondary o_btn_preview"><small>Button</small></span>
-            </div>
+            <t t-call="web_editor.color.combination.preview"/>
         </button>
     </t>
+    <t t-name="web_editor.color.combination.preview">
+        <div class="o_we_cc_preview_wrapper d-flex justify-content-between align-items-end">
+            <h1 class="o_we_color_combination_btn_title">Title</h1>
+            <p class="o_we_color_combination_btn_text flex-grow-1">Text</p>
+            <span class="o_we_color_combination_btn_btn btn btn-sm btn-primary o_btn_preview mr-1"><small>Button</small></span>
+            <span class="o_we_color_combination_btn_btn btn btn-sm btn-secondary o_btn_preview"><small>Button</small></span>
+        </div>
+    </t>
 
     <t t-name="web_editor.many2one.button">
         <div class="btn-group">