[FIX] website: fix gray color picker

Commit [1] changed the way styles are handled. Now that the edition of
website is done in an iframe, the styles are computed inside the iframe
instead of the top window / global document element.

But for computing the gray colors, a base style defined
by `web_editor/color_palette.scss` is needed. This style is not part of
the frontend assets, so using the iframe to fetch it creates bogus gray,
which results in the feature not working.

Steps to reproduce:
- Go on the website editor
- Select the THEME tab
- At the bottom expand the gray color picker
- Use the settings
- The preview is not updated while sliding.
- The colors are not updated in the page.

This commit fixes the bug by fetching the base style from the top
window (where backend assets are present).

[1]: https://github.com/odoo/odoo/commit/212a8bfdd21269b18054200b9e2585e1c95540d6

task-2687506

Part-of: odoo/odoo#94564

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

@@ -985,12 +985,13 @@ options.registry.OptionsTab = options.Class.extend({
         const hues = [];
         const saturationDiffs = [];
         let oneHasNoSaturation = false;
+        const baseStyle = getComputedStyle(document.documentElement);
         for (let id = 100; id <= 900; id += 100) {
             const gray = weUtils.getCSSVariableValue(`${id}`, style);
             const grayRGB = ColorpickerWidget.convertCSSColorToRgba(gray);
             const grayHSL = ColorpickerWidget.convertRgbToHsl(grayRGB.red, grayRGB.green, grayRGB.blue);
 
-            const baseGray = weUtils.getCSSVariableValue(`base-${id}`, style);
+            const baseGray = weUtils.getCSSVariableValue(`base-${id}`, baseStyle);
             const baseGrayRGB = ColorpickerWidget.convertCSSColorToRgba(baseGray);
             const baseGrayHSL = ColorpickerWidget.convertRgbToHsl(baseGrayRGB.red, baseGrayRGB.green, baseGrayRGB.blue);
 
@@ -1201,8 +1202,8 @@ options.registry.OptionsTab = options.Class.extend({
      * @returns {String} the adjusted color of gray
      */
     _buildGray(id) {
-        const ownerDocument = this.$target[0].ownerDocument;
-        const gray = weUtils.getCSSVariableValue(`base-${id}`, ownerDocument.defaultView.getComputedStyle(ownerDocument.documentElement));
+        // Getting base grays defined in color_palette.scss
+        const gray = weUtils.getCSSVariableValue(`base-${id}`, getComputedStyle(document.documentElement));
         const grayRGB = ColorpickerWidget.convertCSSColorToRgba(gray);
         const hsl = ColorpickerWidget.convertRgbToHsl(grayRGB.red, grayRGB.green, grayRGB.blue);
         const adjustedGrayRGB = ColorpickerWidget.convertHslToRgb(this.grayParams[this.GRAY_PARAMS.HUE],

addons/website/static/tests/tours/gray_color_palette.js

@@ -0,0 +1,62 @@
+/** @odoo-module **/
+import wTourUtils from 'website.tour_utils';
+
+wTourUtils.registerEditionTour('website_gray_color_palette', {
+    test: true,
+    url: '/',
+    edition: true,
+}, [
+    {
+        content: "Go to theme options",
+        trigger: '.o_we_customize_theme_btn',
+        extra_trigger: '#oe_snippets.o_loaded',
+    },
+    {
+        content: "Toggle gray color palette",
+        trigger: '.o_we_gray_preview.o_we_collapse_toggler',
+    },
+    {
+        content: "Drag the hue slider",
+        trigger: '.o_we_slider_tint[data-param="gray-hue"]',
+        run: () => {
+            const slider = document.querySelector('.o_we_slider_tint[data-param="gray-hue"] input');
+            slider.value = 100;
+            slider.dispatchEvent(new InputEvent('change', {bubbles: true}));
+        },
+    },
+    {
+        // This step is here because the option is applied but triggers a reloading of the
+        // css value, so if the second value is sent too soon, it will be ignored.
+        // Clicking on the snippet tab and back will ensure that the mutex is cleared,
+        // and therefore we can apply the saturation step.
+        content: "Click on the blacks tab and back on theme to ensure the changes are applied",
+        trigger: '.o_we_add_snippet_btn',
+    },
+    {
+        content: "Go back to theme options",
+        trigger: '.o_we_customize_theme_btn',
+        extra_trigger: '#o_scroll',
+    },
+    {
+        content: "Drag the saturation slider",
+        trigger: '.o_we_user_value_widget[data-param="gray-extra-saturation"]',
+        extra_trigger: ':not(:has(.o_we_ui_loading))',
+        run: () => {
+            const slider = document.querySelector('.o_we_user_value_widget[data-param="gray-extra-saturation"] input');
+            slider.value = 15;
+            slider.dispatchEvent(new InputEvent('change', {bubbles: true}));
+        }
+    },
+    ...wTourUtils.clickOnSave(),
+    {
+        content: "Wait for the iframe to be loaded",
+        trigger: 'iframe body:not(.editor_enable)',
+        run: () => {
+            const iframeEl = document.querySelector('.o_website_preview .o_iframe');
+            const styles = iframeEl.contentWindow.getComputedStyle(iframeEl.contentDocument.documentElement);
+            if (styles.getPropertyValue('--900').toString().replace(/ /g, '') !== '#222F1B') {
+                console.error('The value for the gray 900 is not right');
+            }
+        }
+    },
+]);

addons/website/tests/test_ui.py

@@ -311,3 +311,6 @@ class TestUi(odoo.tests.HttpCase):
 
     def test_21_website_start_cloned_snippet(self):
         self.start_tour('/web', 'website_start_cloned_snippet', login='admin')
+
+    def test_22_website_gray_color_palette(self):
+        self.start_tour('/web', 'website_gray_color_palette', login='admin')