[FIX] website: theme color palette based on primary or alpha

Steps to reproduce:
- install website
- install the theme "clean"
- go to website > customize > customize theme
- select the first "extra color" (alpha) and change it

Previous behavior:
All extra color that have not been set previously have changed
automatically without notice

Current behavior:
the theme is either showing primary/secondary colors or only "extra" colors
Good themes are supposed to enforce primary = alpha and secondary = beta
All extra color that have not been set previously change automatically but
an information tooltip shows up when you hover alpha to avoid confusion

opw-2180611

Forward-Port-Of: #46099
closes #49730

closes odoo/odoo#49789

X-original-commit: c9aada53b1e6b24da4e1fe9ac4d44db3ff8cacda
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Signed-off-by: Nicolas Lempereur (nle) <nle@odoo.com>

5 files changed, 23 insertions, 5 deletions

diff --git a/addons/website/i18n/website.pot b/addons/website/i18n/website.pot
index 25d38d57921..e73bf58cd06 100644
--- a/addons/website/i18n/website.pot
+++ b/addons/website/i18n/website.pot
@@ -1446,6 +1446,11 @@ msgid ""
 msgstr ""
 
 #. module: website
+#: model_terms:ir.ui.view,arch_db:website.snippet_options
+msgid "Changing this color will regenerate the default theme color scheme"
+msgstr ""
+
+#. module: website
 #: model_terms:ir.ui.view,arch_db:website.s_chart_options
 msgid "Chart"
 msgstr ""
diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index ce161d7a6d1..01ee9ce0f38 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -636,8 +636,9 @@ options.registry.Theme = options.Class.extend({
         // used as 'primary' and 'secondary' BS values (to customize standard BS
         // used in Odoo). However, some themes are still going against that
         // system and do not link alpha-primary and beta-secondary at all.
-        this._alphaEqualsPrimary = (this._getCSSColorFromName('primary') === this._getCSSColorFromName('alpha'));
-        this._betaEqualsSecondary = (this._getCSSColorFromName('secondary') === this._getCSSColorFromName('beta'));
+        const style = window.getComputedStyle(document.documentElement);
+        this._alphaEqualsPrimary = style.getPropertyValue('--is-alpha-primary').trim() == 'true';
+        this._betaIsSecondary = style.getPropertyValue('--is-beta-secondary').trim() == 'true';
         return this._super(...arguments);
     },
 
diff --git a/addons/website/static/src/scss/secondary_variables.scss b/addons/website/static/src/scss/secondary_variables.scss
index 7eb722f34e8..1bd4e34b73c 100644
--- a/addons/website/static/src/scss/secondary_variables.scss
+++ b/addons/website/static/src/scss/secondary_variables.scss
@@ -16,7 +16,14 @@ $o-color-palettes: append($o-color-palettes, $-actual-user-color-palette);
 // Theme color palette
 // -------------------
 
+// Proper themes have to enforce primary = alpha and secondary = beta.
+// Exceptions to this rule are made for compatibility reasons
+$-palette-default: nth($o-theme-color-palettes, $o-theme-color-palette-number);
+
 // Generate default theme color scheme if alpha is set
+$-is-alpha-primary: not map-has-key($-palette-default, 'primary');
+$-is-beta-secondary: not map-has-key($-palette-default, 'secondary');
+
 $-alpha: map-get($o-user-theme-color-palette, 'alpha');
 @if ($-alpha) {
     $o-user-theme-color-palette: map-merge((
@@ -30,7 +37,6 @@ $-alpha: map-get($o-user-theme-color-palette, 'alpha');
 // By default, all user theme color palette values are null. Each null value is
 // automatically replaced with corresponsing colors in chosen default theme
 // color palette.
-$-palette-default: nth($o-theme-color-palettes, $o-theme-color-palette-number);
 $-actual-user-theme-color-palette: map-merge($-palette-default, o-map-omit($o-user-theme-color-palette));
 $o-theme-color-palettes: append($o-theme-color-palettes, $-actual-user-theme-color-palette);
 
diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index 6d3020cc991..eb0a3be0423 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -25,6 +25,10 @@ $-font-numbers: (
     // customized by themes, the user or anything else (so there is no file to
     // parse to get them). Those will be printed here as CSS variables.
 
+    // 0) does this theme enforce primary = alpha or secondary = beta
+    --is-alpha-primary: #{$-is-alpha-primary};
+    --is-beta-secondary: #{$-is-beta-secondary};
+
     // 1) Handle default values
     --header-font-size: #{$font-size-base};
 
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index 2c02a2d1c50..ba5e3be73d7 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -633,11 +633,13 @@
         <we-row string="Main Colors">
             <we-colorpicker data-name="primary_color_opt" title="Primary" data-customize-website-color="" data-color-type="theme" data-color="primary"/>
             <we-colorpicker data-name="secondary_color_opt" title="Secondary" data-customize-website-color="" data-color-type="theme" data-color="secondary"/>
-            <we-colorpicker data-name="alpha_as_primary_color_opt" title="Primary" data-customize-website-color="" data-color-type="theme" data-color="alpha"/>
+            <we-colorpicker data-name="alpha_as_primary_color_opt" data-customize-website-color="" data-color-type="theme" data-color="alpha"
+                title="Changing this color will regenerate the default theme color scheme"/>
             <we-colorpicker data-name="beta_as_secondary_color_opt" title="Secondary" data-customize-website-color="" data-color-type="theme" data-color="beta"/>
         </we-row>
         <we-row string="Extra Colors">
-            <we-colorpicker data-name="alpha_as_extra_color_opt" data-customize-website-color="" data-color-type="theme" data-color="alpha"/>
+            <we-colorpicker data-name="alpha_as_extra_color_opt" data-customize-website-color="" data-color-type="theme" data-color="alpha"
+                title="Changing this color will regenerate the default theme color scheme"/>
             <we-colorpicker data-name="beta_as_extra_color_opt" data-customize-website-color="" data-color-type="theme" data-color="beta"/>
             <we-colorpicker data-customize-website-color="" data-color-type="theme" data-color="gamma"/>
             <we-colorpicker data-customize-website-color="" data-color-type="theme" data-color="delta"/>