[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

6 files changed, 137 insertions, 41 deletions

diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index b1e98e1b874..d99c09c8924 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -614,6 +614,13 @@ options.registry.background.include({
 });
 
 options.registry.Theme = options.Class.extend({
+    events: {
+        'click .o_color_combinations_edition we-toggler': '_onCCTogglerClick',
+        // FIXME investigate why using 'click' does not work *anymore* but those
+        // foldable areas will be made more robust and standard with the new UI.
+        'mouseup .o_cc_subheadings_toggler_icon': '_onCCHeadingsTogglerClick',
+    },
+
     /**
      * @override
      */
@@ -812,6 +819,77 @@ options.registry.Theme = options.Class.extend({
         });
         return aceEditor;
     },
+    /**
+     * @override
+     */
+    async _renderOriginalXML($xml) {
+        const uiFragment = await this._super(...arguments);
+
+        uiFragment.querySelectorAll('.o_cc_subheadings_toggler').forEach(headingsEl => {
+            const togglerEl = document.createElement('span');
+            togglerEl.classList.add('o_cc_subheadings_toggler_icon', 'o_we_fold_icon', 'fa', 'fa-caret-down');
+            togglerEl.setAttribute('role', 'button');
+            const titleEl = headingsEl.querySelector('we-title');
+            titleEl.insertBefore(togglerEl, titleEl.firstChild);
+        });
+        uiFragment.querySelectorAll('.o_cc_subheadings_collapse').forEach(subheadingsEl => {
+            subheadingsEl.classList.add('d-none');
+        });
+
+        return uiFragment;
+    },
+    /**
+     * @override
+     */
+    async _renderCustomXML(uiFragment) {
+        const ccEl = uiFragment.querySelector('.o_color_combinations_edition');
+        for (let i = 1; i <= 5; i++) {
+            const togglerEl = document.createElement('we-toggler');
+            togglerEl.classList.add('pt-0', 'pb-0', 'pl-0');
+            const divEl = document.createElement('div');
+            divEl.classList.add('o_we_cc_preview_container');
+            const ccPreviewEl = $(qweb.render('web_editor.color.combination.preview'))[0];
+            ccPreviewEl.classList.add('p-1', 'text-center', `o_cc${i}`);
+            divEl.appendChild(ccPreviewEl);
+            togglerEl.appendChild(divEl);
+            ccEl.appendChild(togglerEl);
+
+            const collapseEl = document.createElement('we-collapse');
+            const editionEl = $(qweb.render('website.color_combination_edition', {number: i}))[0];
+            collapseEl.appendChild(editionEl);
+            ccEl.appendChild(collapseEl);
+        }
+    },
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     * @param {Event} ev
+     */
+    _onCCTogglerClick(ev) {
+        const ccTogglerEls = this.el.querySelectorAll('.o_color_combinations_edition we-toggler');
+        for (const el of ccTogglerEls) {
+            if (el !== ev.currentTarget) {
+                el.classList.remove('active');
+            }
+        }
+        ev.currentTarget.classList.toggle('active');
+    },
+    /**
+     * @private
+     * @param {Event} ev
+     */
+    _onCCHeadingsTogglerClick(ev) {
+        const togglerEl = ev.currentTarget;
+        const collapseEl = togglerEl.closest('we-collapse').querySelector('.o_cc_subheadings_collapse');
+        const show = togglerEl.classList.contains('fa-caret-down');
+        togglerEl.classList.toggle('fa-caret-down', !show);
+        togglerEl.classList.toggle('fa-caret-up', show);
+        collapseEl.classList.toggle('d-none', !show);
+    },
 });
 
 options.registry.menu_data = options.Class.extend({
diff --git a/addons/website/static/src/scss/bootstrap_overridden.scss b/addons/website/static/src/scss/bootstrap_overridden.scss
index c00ab7833ba..042b4d1dd72 100644
--- a/addons/website/static/src/scss/bootstrap_overridden.scss
+++ b/addons/website/static/src/scss/bootstrap_overridden.scss
@@ -2,32 +2,40 @@
 // Color system
 //
 
-// Bootstrap default for $yiq-text-light and $yiq-text-dark are $white and
-// $gray-900. What we want to do is use the user text color as light or dark
-// depending on its contrast. Themes should be careful if they decide to
-// override those values. This would be simplified by giving the user the choice
-// for its dark *and* light text colors.
-$-light: if(o-color('white') != null, o-color('white'), #FFFFFF);
-$-dark: if(o-color('900') != null, o-color('900'), #212529);
-$-text: if(o-color('text') != null, o-color('text'), $-dark);
-$-is-light: (o-get-most-contrast($-text, $-light, $-dark, o-color('body'), $cross-mix: false) == $-dark);
-$yiq-text-light: if($-is-light, o-color('text'), null) !default;
-$yiq-text-dark: if($-is-light, null, o-color('text')) !default;
+// Use auto threshold for yiq colors
+// Note: also need to be defined here so that color-yiq below works
+$yiq-contrasted-threshold: false !default;
+
+// Customize the light and dark text colors for use in our YIQ color contrast function.
+$yiq-text-dark: o-color('900') !default;
+$yiq-text-light: o-color('white') !default;
 
 // Body
 //
 // Settings for the `<body>` element.
 
-$body-bg: o-color('body') !default;
-$body-color: o-color('text') !default;
+$body-bg: if($o-theme-layout == 'full', o-color('o-cc1-bg'), o-color('body')) !default;
+$body-color: o-color('o-cc1-text') or color-yiq(o-color('o-cc1-bg')) !default;
 
 // Links
 //
 // Style anchor elements.
 
+$link-color: o-color('o-cc1-link') !default;
 $link-decoration: if(o-website-value('link-underline') == 'always', underline, none) !default;
 $link-hover-decoration: if(o-website-value('link-underline') != 'never', underline, none) !default;
 
+// Components
+//
+// Define common padding and border radius sizes and more.
+
+// Note: for the 'active' color, color preset edition is not really flexible but
+// this could come in a future update.
+$component-active-bg: o-color('o-cc1-btn-primary') !default;
+@if $component-active-bg {
+    $component-active-color: color-yiq($component-active-bg) !default;
+}
+
 // Fonts
 //
 // Font, line-height, and color for body text, headings, and more.
@@ -44,7 +52,9 @@ $h5-font-size: $font-size-base * $o-theme-h5-font-size-multiplier !default;
 $h6-font-size: $font-size-base * $o-theme-h6-font-size-multiplier !default;
 
 $headings-font-family: $o-theme-headings-font !default;
-$headings-color: o-color('h1') !default;
+$headings-color: o-color('o-cc1-headings') !default;
+
+$text-muted: mute-color($body-color) !default;
 
 // Jumbotron
 
diff --git a/addons/website/static/src/scss/primary_variables.scss b/addons/website/static/src/scss/primary_variables.scss
index 432ac1163c6..7f5a77fae14 100644
--- a/addons/website/static/src/scss/primary_variables.scss
+++ b/addons/website/static/src/scss/primary_variables.scss
@@ -8,13 +8,6 @@ $o-base-color-palette: map-merge($o-base-color-palette, (
     'body': $o-portal-default-body-bg,
     'menu': #F8F9FA, // BS gray-100
     'footer': #F8F9FA, // BS gray-100
-    'text': null, // Default to bootstrap
-    'h1': null, // Default to text
-    'h2': null, // Default to h1
-    'h3': null, // Default to h2
-    'h4': null, // Default to h3
-    'h5': null, // Default to h4
-    'h6': null, // Default to h5
 ));
 
 // By default, all user color palette values are null. Each null value is
diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index bf2e0b01353..46de1af4a93 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -41,21 +41,7 @@ $-font-numbers: (
     }
 
     // 5) Use final value used by the theme
-    $-h1-color: if($headings-color == inherit or not $headings-color, $body-color, $headings-color);
-    $-h2-color: if(color('h2'), color('h2'), $-h1-color);
-    $-h3-color: if(color('h3'), color('h3'), $-h2-color);
-    $-h4-color: if(color('h4'), color('h4'), $-h3-color);
-    $-h5-color: if(color('h5'), color('h5'), $-h4-color);
-    $-h6-color: if(color('h6'), color('h6'), $-h5-color);
-
     --body: #{$body-bg};
-    --text: #{$body-color};
-    --h1: #{$-h1-color};
-    --h2: #{$-h2-color};
-    --h3: #{$-h3-color};
-    --h4: #{$-h4-color};
-    --h5: #{$-h5-color};
-    --h6: #{$-h6-color};
 
     --logo-height: #{$o-theme-navbar-logo-height};
     --fixed-logo-height: #{$o-theme-navbar-fixed-logo-height};
@@ -81,7 +67,7 @@ $-font-numbers: (
         }
 
         #wrap {
-            background-color: $white;
+            background-color: o-color('o-cc1-bg');
         }
     }
 }
@@ -145,19 +131,19 @@ $-header-nav-link-height: $nav-link-height;
     }
 }
 h2, h3, h4, h5, h6 {
-    color: color('h2');
+    color: color('o-cc1-h2');
 }
 h3, h4, h5, h6 {
-    color: color('h3');
+    color: color('o-cc1-h3');
 }
 h4, h5, h6 {
-    color: color('h4');
+    color: color('o-cc1-h4');
 }
 h5, h6 {
-    color: color('h5');
+    color: color('o-cc1-h5');
 }
 h6 {
-    color: color('h6');
+    color: color('o-cc1-h6');
 }
 .btn {
     @if ($o-theme-buttons-font != $o-theme-font) {
diff --git a/addons/website/static/src/scss/website.wysiwyg.scss b/addons/website/static/src/scss/website.wysiwyg.scss
index a2f210f70da..980026c5e82 100644
--- a/addons/website/static/src/scss/website.wysiwyg.scss
+++ b/addons/website/static/src/scss/website.wysiwyg.scss
@@ -169,3 +169,8 @@ $i: 1;
         }
     }
 }
+
+we-collapse {
+    position: relative;
+    padding: 0.3em 0.3em 0.3em 1em;
+}
diff --git a/addons/website/static/src/xml/website.editor.xml b/addons/website/static/src/xml/website.editor.xml
index fecb8626102..998c60f4963 100644
--- a/addons/website/static/src/xml/website.editor.xml
+++ b/addons/website/static/src/xml/website.editor.xml
@@ -84,6 +84,30 @@
         </we-button>
     </t>
 
+    <t t-name="website.color_combination_edition">
+        <div>
+            <we-colorpicker string="Background" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-bg"/>
+            <we-colorpicker string="Text" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-text"/>
+            <we-colorpicker string="Headings" class="o_cc_subheadings_toggler" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-headings"/>
+            <we-row string="Sub-Headings" class="o_cc_subheadings_collapse">
+                <we-colorpicker title="Headings 2" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-h2"/>
+                <we-colorpicker title="Headings 3" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-h3"/>
+                <we-colorpicker title="Headings 4" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-h4"/>
+                <we-colorpicker title="Headings 5" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-h5"/>
+                <we-colorpicker title="Headings 6" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-h6"/>
+            </we-row>
+            <we-colorpicker string="Links" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-link"/>
+            <we-row string="Main Buttons">
+                <we-colorpicker title="Background" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-btn-primary"/>
+                <we-colorpicker title="Border" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-btn-primary-border"/>
+            </we-row>
+            <we-row string="Buttons">
+                <we-colorpicker title="Background" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-btn-secondary"/>
+                <we-colorpicker title="Border" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-btn-secondary-border"/>
+            </we-row>
+        </div>
+    </t>
+
     <!-- Theme - custom code -->
     <div t-name="website.custom_code_dialog_content">
         <div class="mb-2" t-esc="contentText"/>