[FIX] website, *: fix colorpalette custom colors

*: web_editor

Previously the theme body, text, header, headings and footer colors were
not added to the customs colors of other colorpickers if they were
custom. Now it is the case.
Those colors can be set to a theme color but it will be the css color
of the theme color that will be set, not its name.
This can lead to the custom color being a theme color which was not
checked before as it was not possible. Now it is checked.

Also before the theme tab, if the selected color was custom, it would
always appear in the palette and be marked selected. This is no longer
the case with the like of status colors as their color are
not part of the custom colors available on the color palette. Now we add
the selected color as a custom color to always have the selected marked.

task-2198177

closes odoo/odoo#50766

X-original-commit: d631b27b0bf04e708c16262378ab5729252838fe
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

addons/web_editor/static/src/js/wysiwyg/widgets/color_palette.js

@@ -45,6 +45,7 @@ const ColorPaletteWidget = Widget.extend({
             $editable: $(),
         }, options || {});
 
+        this.selectedColor = '';
         this.trigger_up('request_editable', {callback: val => this.options.$editable = val});
     },
     /**
@@ -113,11 +114,6 @@ const ColorPaletteWidget = Widget.extend({
             });
         }
 
-        // Render custom colors
-        this._buildCustomColors();
-
-        this._addCompatibilityColors(['primary', 'secondary', 'success', 'info', 'warning', 'danger']);
-
         // Compute class colors
         this.colorNames = [];
         this.colorToColorNames = {};
@@ -132,16 +128,30 @@ const ColorPaletteWidget = Widget.extend({
             }
         });
 
-        // Select selected Color
+        // Compute selected color
         if (this.options.selectedColor) {
             const selectedColor = ColorpickerDialog.normalizeCSSColor(this.options.selectedColor);
-            this.selectedColor = this.colorToColorNames[selectedColor] || selectedColor;
+            if (selectedColor !== 'rgba(0, 0, 0, 0)') {
+                this.selectedColor = this.colorToColorNames[selectedColor] || selectedColor;
+            }
+        }
+
+        // Render custom colors
+        this._buildCustomColors();
+
+        // Select selected Color
+        if (this.options.selectedColor) {
             const selectedButton = this.el.querySelector(`button[data-color="${this.selectedColor}"], button[style*="background-color:${this.selectedColor};"]`);
             if (selectedButton) {
                 selectedButton.classList.add('selected');
             }
         }
 
+        // Add those at the very end so that we don't mark hidden colors as
+        // selected. We want those colors to appear as selected custom colors if
+        // they are chosen somehow.
+        this._addCompatibilityColors(['primary', 'secondary', 'success', 'info', 'warning', 'danger']);
+
         return res;
     },
     /**
@@ -180,7 +190,9 @@ const ColorPaletteWidget = Widget.extend({
         if (this.options.excluded.includes('custom')) {
             return;
         }
-        const existingColors = new Set(this.summernoteCustomColorsArray);
+        const existingColors = new Set(this.summernoteCustomColorsArray.concat(
+            Object.keys(this.colorToColorNames)
+        ));
         this.trigger_up('get_custom_colors', {
             onSuccess: (colors) => {
                 colors.forEach(color => {
@@ -188,11 +200,20 @@ const ColorPaletteWidget = Widget.extend({
                 });
             },
         });
+        this.style.getPropertyValue(`--custom-colors`).trim().split(' ').forEach(v => {
+            const color = this.style.getPropertyValue(`--${v}`).trim();
+            if (ColorpickerDialog.isCSSColor(color)) {
+                this._addCustomColor(existingColors, color);
+            }
+        });
         _.each(this.options.$editable.find('[style*="color"]'), el => {
             for (const colorProp of ['color', 'backgroundColor']) {
                 this._addCustomColor(existingColors, el.style[colorProp]);
             }
         });
+        if (this.selectedColor) {
+            this._addCustomColor(existingColors, this.selectedColor);
+        }
     },
     /**
      * Add the color to the custom color section if it is not in the existingColors.
@@ -201,8 +222,14 @@ const ColorPaletteWidget = Widget.extend({
      * @param {string} color Color to add to the cuustom colors
      */
     _addCustomColor: function (existingColors, color) {
+        if (!color) {
+            return;
+        }
+        if (!ColorpickerDialog.isCSSColor(color)) {
+            color = this.style.getPropertyValue('--' + color).trim();
+        }
         const normColor = ColorpickerDialog.normalizeCSSColor(color);
-        if (color && !existingColors.has(normColor)) {
+        if (!existingColors.has(normColor)) {
             this._addCustomColorButton(normColor);
             existingColors.add(normColor);
         }
@@ -310,7 +337,7 @@ const ColorPaletteWidget = Widget.extend({
      * @param {Event} ev
      */
     _onColorResetButtonClick: function (ev) {
-        this.selectedColor = false;
+        this.selectedColor = '';
         this.trigger_up('color_reset', {
             target: ev.target,
         });

addons/website/static/src/scss/primary_variables.scss

@@ -6,8 +6,8 @@ $o-theme-layout: 'full';
 
 $o-base-color-palette: map-merge($o-base-color-palette, (
     'body': $o-portal-default-body-bg,
-    'menu': #F9F9F9,
-    'footer': #F9F9F9,
+    '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

addons/website/static/src/scss/website.scss

@@ -61,6 +61,13 @@ $-font-numbers: (
     --logo-height: #{$o-theme-navbar-logo-height};
     --fixed-logo-height: #{$o-theme-navbar-fixed-logo-height};
     --number-of-fonts: #{length($o-theme-fonts)};
+
+    // 6) Get list of colorpalette custom colors
+    $custom-colors: ();
+    @each $key, $value in $o-color-palette {
+        $custom-colors: append($custom-colors, $key);
+    }
+    --custom-colors: #{$custom-colors};
 }
 
 #wrapwrap {