[FIX] website: use the correct documentElement to compute style

After [1], most snippet options should use something like
`this.$target[0].ownerDocument` to access the document properties
instead of the global object `document`. This is because the editable is
now inside an iframe.

Commit [2] tried to adapt most occurrences but missed some.

This commit adapts the leftover code and fixes 2 bugs:

1. The SCSS Variable `font` wasn't properly reset when deleting a Google
   font that was currently being used, resulting in a `/` being displayed
   and the variable having an inconsistent state.

2. In the Chart snippet, the color being used to represent data is
   displayed inside the option as a border on the input widgets. It was
   currently using Odoo's colors instead of the ones defined in website.

[1]: https://github.com/odoo/odoo/commit/31cc10b91dc7762e23b4bde9b945be0c4ce3fe3b
[2]: https://github.com/odoo/odoo/commit/03c552690b15cbf2e7d6b7812386ac64042219af

task-2978623

X-original-commit: 6e0bd78e59b8352d15c9f21bf5f891924d6c3c9f
Part-of: odoo/odoo#108819

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

@@ -284,7 +284,7 @@ const FontFamilyPickerUserValueWidget = SelectUserValueWidget.extend({
         }
 
         // Adapt font variable indexes to the removal
-        const style = window.getComputedStyle(document.documentElement);
+        const style = window.getComputedStyle(this.$target[0].ownerDocument.documentElement);
         _.each(FontFamilyPickerUserValueWidget.prototype.fontVariables, variable => {
             const value = weUtils.getCSSVariableValue(variable, style);
             if (value.substring(1, value.length - 1) === googleFontName) {
@@ -1474,7 +1474,7 @@ options.registry.ThemeColors = options.registry.OptionsTab.extend({
      */
     async start() {
         // Checks for support of the old color system
-        const style = window.getComputedStyle(document.documentElement);
+        const style = window.getComputedStyle(this.$target[0].ownerDocument.documentElement);
         const supportOldColorSystem = weUtils.getCSSVariableValue('support-13-0-color-system', style) === 'true';
         const hasCustomizedOldColorSystem = weUtils.getCSSVariableValue('has-customized-13-0-color-system', style) === 'true';
         this._showOldColorSystemWarning = supportOldColorSystem && hasCustomizedOldColorSystem;

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

@@ -27,7 +27,7 @@ options.registry.InnerChart = options.Class.extend({
     init: function () {
         this._super.apply(this, arguments);
         this.themeArray = ['o-color-1', 'o-color-2', 'o-color-3', 'o-color-4', 'o-color-5'];
-        this.style = window.getComputedStyle(document.documentElement);
+        this.style = window.getComputedStyle(this.$target[0].ownerDocument.documentElement);
     },
     /**
      * @override