[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

1 files changed, 2 insertions, 35 deletions

diff --git a/addons/website/data/website_demo.xml b/addons/website/data/website_demo.xml
index 8efebf26764..47a5ef073d0 100644
--- a/addons/website/data/website_demo.xml
+++ b/addons/website/data/website_demo.xml
@@ -8,10 +8,9 @@
             <field name="arch" type="xml">
                 <t name="Debug" t-name="website.bs_debug_page_view">
                     <t t-call="website.layout">
-                        <t t-set="odoo_theme_colors" t-value="[['alpha', 'Alpha'], ['beta', 'Beta'], ['gamma', 'Gamma'], ['delta', 'Delta'], ['epsilon', 'Epsilon']]"/>
+                        <t t-set="odoo_theme_colors" t-value="[['o-color-1', 'Color 1'], ['o-color-2', 'Color 2'], ['o-color-3', 'Color 3'], ['o-color-4', 'Color 4'], ['o-color-5', 'Color 5']]"/>
                         <t t-set="bs_theme_colors" t-value="[['primary', 'Primary'], ['secondary', 'Secondary'], ['success', 'Success'], ['info', 'Info'], ['warning', 'Warning'], ['danger', 'Danger'], ['light', 'Light'], ['dark', 'Dark']]"/>
                         <t t-set="bs_gray_colors" t-value="[['white', 'White'], ['100', '100'], ['200', '200'], ['300', '300'], ['400', '400'], ['500', '500'], ['600', '600'], ['700', '700'], ['800', '800'], ['900', '900'], ['black', 'Black']]"/>
-                        <t t-set="all_theme_colors" t-value="odoo_theme_colors + bs_theme_colors"/>
                         <div id="wrap" class="oe_structure">
                             <section class="py-2">
                                 <div class="container">
@@ -19,69 +18,37 @@
                                     <div class="row">
                                         <div class="col-md">
                                             <h2>Badge</h2>
-                                            <t t-foreach="odoo_theme_colors" t-as="color">
-                                                <span t-attf-class="badge mb-1 badge-#{color[0]}"><t t-esc="color[1]"/></span>
-                                            </t>
-                                            <br/>
                                             <t t-foreach="bs_theme_colors" t-as="color">
                                                 <span t-attf-class="badge mb-1 badge-#{color[0]}"><t t-esc="color[1]"/></span>
                                             </t>
                                             <h3 class="mt-2 h6">Pill</h3>
-                                            <t t-foreach="odoo_theme_colors" t-as="color">
-                                                <span t-attf-class="badge mb-1 badge-pill badge-#{color[0]}"><t t-esc="color[1]"/></span>
-                                            </t>
-                                            <br/>
                                             <t t-foreach="bs_theme_colors" t-as="color">
                                                 <span t-attf-class="badge mb-1 badge-pill badge-#{color[0]}"><t t-esc="color[1]"/></span>
                                             </t>
                                             <h3 class="mt-2 h6">Link</h3>
-                                            <t t-foreach="odoo_theme_colors" t-as="color">
-                                                <a href="#" t-attf-class="badge mb-1 badge-#{color[0]}"><t t-esc="color[1]"/></a>
-                                            </t>
-                                            <br/>
                                             <t t-foreach="bs_theme_colors" t-as="color">
                                                 <a href="#" t-attf-class="badge mb-1 badge-#{color[0]}"><t t-esc="color[1]"/></a>
                                             </t>
                                             <h3 class="mt-2 h6">Autosizing</h3>
                                             <div class="h3">
-                                                <t t-foreach="odoo_theme_colors" t-as="color">
-                                                    <span t-attf-class="badge mb-1 badge-#{color[0]}"><t t-esc="color[1]"/></span>
-                                                </t>
-                                                <br/>
                                                 <t t-foreach="bs_theme_colors" t-as="color">
                                                     <span t-attf-class="badge mb-1 badge-#{color[0]}"><t t-esc="color[1]"/></span>
                                                 </t>
                                             </div>
 
                                             <h2 class="mt-4">Button</h2>
-                                            <t t-foreach="odoo_theme_colors" t-as="color">
-                                                <button type="button" t-attf-class="btn mb-1 btn-#{color[0]}"><t t-esc="color[1]"/></button>
-                                            </t>
-                                            <br/>
                                             <t t-foreach="bs_theme_colors" t-as="color">
                                                 <button type="button" t-attf-class="btn mb-1 btn-#{color[0]}"><t t-esc="color[1]"/></button>
                                             </t>
                                             <h3 class="mt-2 h6">Outline</h3>
-                                            <t t-foreach="odoo_theme_colors" t-as="color">
-                                                <button type="button" t-attf-class="btn mb-1 btn-outline-#{color[0]}"><t t-esc="color[1]"/></button>
-                                            </t>
-                                            <br/>
                                             <t t-foreach="bs_theme_colors" t-as="color">
                                                 <button type="button" t-attf-class="btn mb-1 btn-outline-#{color[0]}"><t t-esc="color[1]"/></button>
                                             </t>
                                             <h3 class="mt-2 h6">Small</h3>
-                                            <t t-foreach="odoo_theme_colors" t-as="color">
-                                                <button type="button" t-attf-class="btn mb-1 btn-sm btn-#{color[0]}"><t t-esc="color[1]"/></button>
-                                            </t>
-                                            <br/>
                                             <t t-foreach="bs_theme_colors" t-as="color">
                                                 <button type="button" t-attf-class="btn mb-1 btn-sm btn-#{color[0]}"><t t-esc="color[1]"/></button>
                                             </t>
                                             <h3 class="mt-2 h6">Large</h3>
-                                            <t t-foreach="odoo_theme_colors" t-as="color">
-                                                <button type="button" t-attf-class="btn mb-1 btn-lg btn-#{color[0]}"><t t-esc="color[1]"/></button>
-                                            </t>
-                                            <br/>
                                             <t t-foreach="bs_theme_colors" t-as="color">
                                                 <button type="button" t-attf-class="btn mb-1 btn-lg btn-#{color[0]}"><t t-esc="color[1]"/></button>
                                             </t>
@@ -156,7 +123,7 @@
                                         </div>
                                         <div class="col-md-auto">
                                             <h2>Alert</h2>
-                                            <t t-foreach="all_theme_colors" t-as="color">
+                                            <t t-foreach="bs_theme_colors" t-as="color">
                                                 <div t-attf-class="alert alert-#{color[0]}">
                                                     This is a "<t t-esc="color[1]"/>" alert with a <a href="#" class="alert-link">link</a>.
                                                 </div>