[IMP] website: add technical improvement for gray customization

Improvement of [1]. Allows to not have to save the gray-hue and
gray-extra-saturation server-side at all, and thus better allow to use
a fully customized gray palette in theme should a theme need it.

[1]: https://github.com/odoo/odoo/commit/35d27a6c1d3dab621de7f059565d7619ae004412

Merged with https://github.com/odoo/odoo/pull/67488

addons/website/static/src/js/editor/snippets.options.js

@@ -809,8 +809,6 @@ options.registry.BackgroundVideo = options.Class.extend({
 });
 
 options.registry.OptionsTab = options.Class.extend({
-    GRAY_PARAMS: ['gray-hue', 'gray-extra-saturation'],
-
     /**
      * @override
      */
@@ -845,22 +843,16 @@ options.registry.OptionsTab = options.Class.extend({
     /**
      * @override
      */
-    async customizeWebsiteVariable(previewMode, widgetValue, params) {
-        await this._super(...arguments);
-        if (!this.GRAY_PARAMS.includes(params.variable)) {
-            return;
-        }
+    async customizeGray(previewMode, widgetValue, params) {
+        // Gray parameters are used *on the JS side* to compute the grays that
+        // will be saved in the database. We indeed need those grays to be
+        // computed here for faster previews so this allows to not duplicate
+        // most of the logic. Also, this gives flexibility to maybe allow full
+        // customization of grays in custo and themes. Also, this allows to ease
+        // migration if the computation here was to change: the user grays would
+        // still be unchanged as saved in the database.
 
-        // Difference with other "normal" variable: gray parameters are used
-        // *on the JS side* to compute the grays that will be saved in the
-        // database. We indeed need those grays to be computed here for faster
-        // previews so this allows to not duplicate most of the logic. Also,
-        // this gives flexibility to maybe allow full customization of grays in
-        // customizations and themes. Also, this allows to ease migration if the
-        // computation here was to change: the user grays would still be
-        // unchanged as saved in the database.
-
-        this.grayParams[params.variable] = parseInt(widgetValue);
+        this.grayParams[params.param] = parseInt(widgetValue);
         for (let i = 1; i < 10; i++) {
             const key = (100 * i).toString();
             this.grays[key] = this._buildGray(key);
@@ -1054,13 +1046,24 @@ options.registry.OptionsTab = options.Class.extend({
             }
             return weUtils.getCSSVariableValue('body-image-type');
         }
-        if (methodName === 'customizeWebsiteVariable'
-                && this.GRAY_PARAMS.includes(params.variable)) {
-            // Small hack to save the initially returned value to be able to
-            // compute the grays
-            const value = await this._super(...arguments);
-            this.grayParams[params.variable] = parseInt(value);
-            return value;
+        if (methodName === 'customizeGray') {
+            // If the gray palette has been generated by Odoo standard option,
+            // the hue of all gray is the same and the saturation has been
+            // increased/decreased by the same amount for all grays in
+            // comparaison with BS grays. However the system supports any
+            // gray palette so we base our hue and extra saturation displayed
+            // values on one gray, let's say the middle one: gray-500.
+            const gray = weUtils.getCSSVariableValue('500');
+            const grayRGB = ColorpickerWidget.convertCSSColorToRgba(gray);
+            const hsl = ColorpickerWidget.convertRgbToHsl(grayRGB.red, grayRGB.green, grayRGB.blue);
+
+            const baseGray = weUtils.getCSSVariableValue('base-500');
+            const baseGrayRGB = ColorpickerWidget.convertCSSColorToRgba(baseGray);
+            const baseHSL = ColorpickerWidget.convertRgbToHsl(baseGrayRGB.red, baseGrayRGB.green, baseGrayRGB.blue);
+
+            this.grayParams['gray-hue'] = hsl.hue;
+            this.grayParams['gray-extra-saturation'] = hsl.saturation - baseHSL.saturation;
+            return this.grayParams[params.param];
         }
         return this._super(...arguments);
     },

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

@@ -256,11 +256,6 @@ $o-base-website-values-palette: (
     'layout': 'full', // 'full' / 'boxed'
     'color-palettes-number': null, // Default to the individual variables for each color palette type
 
-    // Gray configuration values which are used to generate the customized grays
-    // on the JavaScript side.
-    'gray-hue': 210,
-    'gray-extra-saturation': 0,
-
     'btn-primary-outline': false,
     'btn-secondary-outline': false,
     'link-underline': 'hover', // 'never' / 'hover' / 'always'

addons/website/views/snippets/snippets.xml

@@ -1223,10 +1223,10 @@
                           t-attf-class="o_we_user_value_widget o_we_gray_preview bg-#{grayCode}"/>
                 </t>
             </we-row>
-            <we-range string="⌙ Hue" data-customize-website-variable="" data-min="0" data-max="360"
-                data-variable="gray-hue" class="o_we_slider_tint"/>
-            <we-range string="⌙ Saturation" data-customize-website-variable="" data-min="-20" data-max="100"
-                data-variable="gray-extra-saturation"/>
+            <we-range string="⌙ Hue" data-customize-gray="" data-min="0" data-max="360"
+                data-param="gray-hue" class="o_we_slider_tint"/>
+            <we-range string="⌙ Saturation" data-customize-gray="" data-min="-20" data-max="100"
+                data-param="gray-extra-saturation"/>
         </we-collapse>
     </div>
     <div data-js="OptionsTab" data-selector="website-settings" data-no-check="true">