[REF] web_editor, *: review color theming system

* web, website

- Introduce gray color palettes (needed for themes migration)

- Synchronize BS4 color maps with individual variables (see comments
 about this in the code).

- Review alpha/primary, beta/secondary matching:

Before this commit, we decided that the common way to define a color
palette was defining primary, secondary, gamma, delta and epsilon.
alpha and beta were then forced to primary and secondary without other
possibility.
The new system makes more sense:
1) define alpha, beta, gamma, delta and epsilon
2) primary and secondary will automatically be set to your alpha and
  beta (allowing to style the default UI with BS4-independant
  variables)
3) if you are not happy with (2), you can define primary / secondary
  in your color palette so that they are not automatically set to
  alpha / beta

This commit also changes what classes the editor uses. Background colors
and text colors will now use alpha/beta/gamma/delta/epsilon (not primary
and secondary anymore). For buttons, all the possibilities are suggested
but color duplicates are hidden (so if your primary and alpha are equal,
only one button color is suggested).

5 files changed, 46 insertions, 17 deletions

diff --git a/addons/website/static/src/js/tours/customize.js b/addons/website/static/src/js/tours/customize.js
index 510b9f12975..c1e1f185f2c 100644
--- a/addons/website/static/src/js/tours/customize.js
+++ b/addons/website/static/src/js/tours/customize.js
@@ -11,7 +11,7 @@ tour.register('theme_customize', {
     url: '/',
     wait_for: base.ready(),
 }, [{
-    trigger: 'button.o_theme_customize_color_primary',
+    trigger: 'button.o_theme_customize_color_primary, button.o_theme_customize_color_alpha',
     content: _t("Click here to choose your main branding color.<br/>It will recompute the palette with suggested matching colors."),
     position: 'bottom',
 }]);
diff --git a/addons/website/static/src/js/widgets/theme.js b/addons/website/static/src/js/widgets/theme.js
index ce73fd35d3d..e2879fb25c6 100644
--- a/addons/website/static/src/js/widgets/theme.js
+++ b/addons/website/static/src/js/widgets/theme.js
@@ -62,6 +62,27 @@ var ThemeCustomizeDialog = Dialog.extend({
         var $tabs = this.$('[data-toggle="tab"]');
         this.opened().then(function () {
             $tabs.eq(self.defaultTab).tab('show');
+
+            var $colorPreview = self.$('.o_theme_customize_color_previews:visible');
+            var $primary = $colorPreview.find('.o_theme_customize_color[data-color="primary"]');
+            var $alpha = $colorPreview.find('.o_theme_customize_color[data-color="alpha"]');
+            var $secondary = $colorPreview.find('.o_theme_customize_color[data-color="secondary"]');
+            var $beta = $colorPreview.find('.o_theme_customize_color[data-color="beta"]');
+            var sameAlphaPrimary = $primary.find('.o_color_preview').css('background-color') === $alpha.find('.o_color_preview').css('background-color');
+            var sameBetaSecondary = $secondary.find('.o_color_preview').css('background-color') === $beta.find('.o_color_preview').css('background-color');
+            if (!sameAlphaPrimary) {
+                $alpha.find('.o_color_name').text(_t("Extra Color"));
+                $primary.removeClass('d-none').addClass('d-flex');
+            }
+            if (!sameBetaSecondary) {
+                $beta.find('.o_color_name').text(_t("Extra Color"));
+                $secondary.removeClass('d-none').addClass('d-flex');
+            }
+            if (!sameAlphaPrimary && sameBetaSecondary) {
+                $beta.insertBefore($alpha);
+            } else if (sameAlphaPrimary && !sameBetaSecondary) {
+                $secondary.insertAfter($alpha);
+            }
         });
 
         // Hide the tab navigation if only one tab
@@ -153,6 +174,9 @@ var ThemeCustomizeDialog = Dialog.extend({
                             reload: $item.data('reload'),
                         }));
 
+                        $multiChoiceLabel.find('.o_theme_customize_color[data-color="primary"]').addClass('d-none').removeClass('d-flex');
+                        $multiChoiceLabel.find('.o_theme_customize_color[data-color="secondary"]').addClass('d-none').removeClass('d-flex');
+
                         if ($container.hasClass('form-row')) {
                             var $col = $('<div/>', {class: (icon ? 'col-4' : (colorPalette ? 'col-12' : 'col-6'))});
                             $col.append($multiChoiceLabel);
@@ -214,8 +238,8 @@ var ThemeCustomizeDialog = Dialog.extend({
             params: {
                 xml_ids: this._getXMLIDs(this.$inputs),
             },
-        }).done(function (data) {      
-            self.$inputs.prop('checked', false);      
+        }).done(function (data) {
+            self.$inputs.prop('checked', false);
             _.each(self.$inputs.filter('[data-xmlid]:not([data-xmlid=""])'), function (input) {
                 var $input = $(input);
                 if (!_.difference(self._getXMLIDs($input), data[0]).length) {
@@ -454,7 +478,7 @@ var ThemeCustomizeDialog = Dialog.extend({
         var colorType = $color.data('colorType');
 
         var colorpicker = new ColorpickerDialog(this, {
-            defaultColor: $color.find('span').css('background-color'),
+            defaultColor: $color.find('.o_color_preview').css('background-color'),
         });
         colorpicker.on('colorpicker:saved', this, function (ev) {
             ev.stopPropagation();
@@ -551,4 +575,4 @@ var ThemeCustomizeMenu = websiteNavbarData.WebsiteNavbarActionWidget.extend({
 websiteNavbarData.websiteNavbarRegistry.add(ThemeCustomizeMenu, '#theme_customize');
 
 return ThemeCustomizeDialog;
-});
\ No newline at end of file
+});
diff --git a/addons/website/static/src/scss/options/colors/user_theme_color_palette.scss b/addons/website/static/src/scss/options/colors/user_theme_color_palette.scss
index dc57b44bd5d..88c0847ae04 100644
--- a/addons/website/static/src/scss/options/colors/user_theme_color_palette.scss
+++ b/addons/website/static/src/scss/options/colors/user_theme_color_palette.scss
@@ -1,15 +1,20 @@
 
 $o-user-theme-color-palette: map-merge((
     // Theme colors
-    primary: null,
-    secondary: null,
+    alpha: null,
+    beta: null,
     gamma: null,
     epsilon: null,
     delta: null,
 
+    // Depending on the theme, alpha and beta may not be equal to
+    // primary and secondary
+    primary: null,
+    secondary: null,
+
     // BS state colors
     success: null,
     info: null,
     warning: null,
-    danger: null,    
+    danger: null,
 ), o-map-omit($o-user-theme-color-palette));
diff --git a/addons/website/static/src/scss/secondary_variables.scss b/addons/website/static/src/scss/secondary_variables.scss
index 06b19ce4090..762b498b75e 100644
--- a/addons/website/static/src/scss/secondary_variables.scss
+++ b/addons/website/static/src/scss/secondary_variables.scss
@@ -8,14 +8,14 @@
 $-palette-1: nth($o-color-palettes, 1);
 $o-color-palettes: append($o-color-palettes, map-merge($-palette-1, o-map-omit($o-user-color-palette)));
 
-// Generate default theme color scheme if primary is set
-$-primary: map-get($o-user-theme-color-palette, 'primary');
-@if ($-primary) {
+// Generate default theme color scheme if alpha is set
+$-alpha: map-get($o-user-theme-color-palette, 'alpha');
+@if ($-alpha) {
     $o-user-theme-color-palette: map-merge($o-user-theme-color-palette, map-merge((
-        secondary: lighten(desaturate($-primary, 60%), 30%),
-        gamma: desaturate(adjust-hue($-primary, -45deg), 10%),
-        delta: desaturate(adjust-hue($-primary, 45deg), 10%),
-        epsilon: desaturate(adjust-hue($-primary, 180deg), 10%),
+        beta: lighten(desaturate($-alpha, 60%), 30%),
+        gamma: desaturate(adjust-hue($-alpha, -45deg), 10%),
+        delta: desaturate(adjust-hue($-alpha, 45deg), 10%),
+        epsilon: desaturate(adjust-hue($-alpha, 180deg), 10%),
     ), o-map-omit($o-user-theme-color-palette)));
 }
 
diff --git a/addons/website/static/src/xml/website.editor.xml b/addons/website/static/src/xml/website.editor.xml
index 15baaa1f514..56cac3b3feb 100644
--- a/addons/website/static/src/xml/website.editor.xml
+++ b/addons/website/static/src/xml/website.editor.xml
@@ -29,7 +29,7 @@
             <div t-if="colorPalette" class="o_theme_customize_color_previews" t-att-data-depends="id">
                 <div>
                     <h6>Main colors</h6>
-                    <t t-foreach="{'primary': _t('Primary'), 'secondary': _t('Secondary'), 'gamma': _t('Extra Color 1'), 'delta': _t('Extra Color 2'), 'epsilon': _t('Extra Color 3')}" t-as="color">
+                    <t t-foreach="{'primary': _t('Primary'), 'secondary': _t('Secondary'), 'alpha': _t('Primary'), 'beta': _t('Secondary'), 'gamma': _t('Extra Color'), 'delta': _t('Extra Color'), 'epsilon': _t('Extra Color')}" t-as="color">
                         <t t-call="website.theme_customize_color_palette_button">
                             <t t-set="color_type" t-value="'theme'"/>
                         </t>
@@ -66,7 +66,7 @@
             t-attf-class="btn btn-sm btn-secondary d-flex align-items-center w-100 mt-2 justify-content-between o_theme_customize_color o_theme_customize_color_#{color}"
             t-att-data-color="color"
             t-att-data-color-type="color_type">
-            <t t-esc="color_value"/>
+            <span class="o_color_name"><t t-esc="color_value"/></span>
             <span t-attf-class="o_color_preview bg-#{color}"/>
         </button>
     </t>