[IMP] web_editor, website, *: use new color names

*: mass_mailing, website_blog, website_forum, website_hr_recruitment

Deprecate alpha, beta, gamma, delta and espilon color names and now use
a new color system: o-color-x, with x from 1 to 5.

This will allow to review the colors of all themes to have nice visuals
for the new color combinations classes, without breaking the current
uses of bg-alpha, alert-delta, etc in current websites of customers
(by keeping the old color and classes for compatibility).

This will also allow to uniformize all themes under the same conventions
to enforce BS color override:
- o-color-1 used as primary (as before, for alpha)
- o-color-2 used as secondary (as before, for beta)

Before, some themes were not following the 2 guidelines. The users
using those themes will simply have the possibility to choose o-color-1
and o-color-2 colors accordingly to restore their website without
breaking the new system features.

Another change is that those colors are defined through color palettes
and not theme color palettes. This will avoid them to generate automatic
bootstrap classes which we don't want (alert, btn) and generate the one
we want by ourself.

Note: for mass mailing, the colors and classes also have been renamed
but the system stays unchanged.

Part of https://github.com/odoo/odoo/pull/45856
task-2197038

5 files changed, 36 insertions, 32 deletions

diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index 5bde2b6d1c8..b1e98e1b874 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -618,16 +618,22 @@ options.registry.Theme = options.Class.extend({
      * @override
      */
     start: async function () {
-        // The normal configuration of Odoo is to have two colors named 'alpha'
-        // and 'beta' which generate their own BS CSS classes but which are also
-        // 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.
+        // Checks for support of the old color system
         const style = window.getComputedStyle(document.documentElement);
-        this._alphaEqualsPrimary = style.getPropertyValue('--is-alpha-primary').trim() == 'true';
-        this._betaEqualsSecondary = style.getPropertyValue('--is-beta-secondary').trim() == 'true';
+        const supportOldColorSystem = style.getPropertyValue('--support-13-0-color-system').trim() === 'true';
+        const hasCustomizedOldColorSystem = style.getPropertyValue('--has-customized-13-0-color-system').trim() === 'true';
+        this._showOldColorSystemWarning = supportOldColorSystem && hasCustomizedOldColorSystem;
+
         return this._super(...arguments);
     },
+    /**
+     * @override
+     */
+    updateUIVisibility: async function () {
+        await this._super(...arguments);
+        const oldColorSystemEl = this.el.querySelector('.o_old_color_system_warning');
+        oldColorSystemEl.classList.toggle('d-none', !this._showOldColorSystemWarning);
+    },
 
     //--------------------------------------------------------------------------
     // Options
@@ -776,18 +782,6 @@ options.registry.Theme = options.Class.extend({
         if (widgetName === 'theme_color_suggestions') {
             return false;
         }
-        if (widgetName === 'primary_color_opt' || widgetName === 'alpha_as_extra_color_opt') {
-            return !this._alphaEqualsPrimary;
-        }
-        if (widgetName === 'secondary_color_opt' || widgetName === 'beta_as_extra_color_opt') {
-            return !this._betaEqualsSecondary;
-        }
-        if (widgetName === 'alpha_as_primary_color_opt') {
-            return this._alphaEqualsPrimary;
-        }
-        if (widgetName === 'beta_as_secondary_color_opt') {
-            return this._betaEqualsSecondary;
-        }
         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 a6292647ba6..37851eb576e 100644
--- a/addons/website/static/src/scss/secondary_variables.scss
+++ b/addons/website/static/src/scss/secondary_variables.scss
@@ -44,6 +44,15 @@ $o-website-values: map-merge($o-base-website-values-palette, o-map-omit($o-websi
 // Colors
 //------------------------------------------------------------------------------
 
+$o-has-customized-13-0-color-system:
+    not not (map-get($o-user-theme-color-palette, 'primary')
+    or map-get($o-user-theme-color-palette, 'secondary')
+    or map-get($o-user-theme-color-palette, 'alpha')
+    or map-get($o-user-theme-color-palette, 'beta')
+    or map-get($o-user-theme-color-palette, 'gamma')
+    or map-get($o-user-theme-color-palette, 'delta')
+    or map-get($o-user-theme-color-palette, 'epsilon'));
+
 // Color palette
 // -------------
 
@@ -57,14 +66,8 @@ $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 -> epsilon colors are from the old color system, this is kept for
+// compatibility: Generate default theme color scheme if alpha is set
 $-alpha: map-get($o-user-theme-color-palette, 'alpha');
 @if ($-alpha) {
     $o-user-theme-color-palette: map-merge((
@@ -78,7 +81,15 @@ $-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));
+// Always remove the primary/secondary which were customizable in some theme
+// in Odoo <= 13.3. The customer can always rechoose the right color in the
+// Odoo color system as the first two ones are mapped to primary/secondary.
+$-actual-user-theme-color-palette: map-remove($-actual-user-theme-color-palette,
+    'primary',
+    'secondary'
+);
 $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 78334459a4d..bf2e0b01353 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -25,9 +25,8 @@ $-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};
+    --support-13-0-color-system: #{$o-support-13-0-color-system};
+    --has-customized-13-0-color-system: #{$o-has-customized-13-0-color-system};
 
     // 1) Handle default values
     --header-font-size: #{$font-size-base};
diff --git a/addons/website/static/src/snippets/s_chart/options.js b/addons/website/static/src/snippets/s_chart/options.js
index 021a326be3c..7819d0eac1d 100644
--- a/addons/website/static/src/snippets/s_chart/options.js
+++ b/addons/website/static/src/snippets/s_chart/options.js
@@ -25,7 +25,7 @@ options.registry.InnerChart = options.Class.extend({
      */
     init: function () {
         this._super.apply(this, arguments);
-        this.themeArray = ['alpha', 'beta', 'gamma', 'delta', 'epsilon'];
+        this.themeArray = ['o-color-1', 'o-color-2', 'o-color-3', 'o-color-4', 'o-color-5'];
         this.style = window.getComputedStyle(document.documentElement);
     },
     /**
diff --git a/addons/website/static/src/xml/website.seo.xml b/addons/website/static/src/xml/website.seo.xml
index aecbd6da8d9..e1d4aeafafc 100644
--- a/addons/website/static/src/xml/website.seo.xml
+++ b/addons/website/static/src/xml/website.seo.xml
@@ -143,7 +143,7 @@
                     <div class="card-header">Social Preview</div>
                     <img class="card-img-top o_meta_active_img" t-att-src="widget.activeMetaImg"/>
                     <div class="card-body px-3 py-2">
-                        <h6 class="text-alpha card-title mb0"><t t-esc="widget.metaTitle"/></h6>
+                        <h6 class="text-primary card-title mb0"><t t-esc="widget.metaTitle"/></h6>
                         <small class="card-subtitle text-muted"><t t-esc="widget.serverUrl"/></small>
                         <p t-esc="widget.metaDescription"/>
                   </div>