[IMP] website: allow all background colors for over the content headers

This commit allows users to choose any background color for nav bars
that are over the content. Before this commit the available colors were:
- bg-black-{15/25/50/75}
- bg-white-{25/50/75/85}
Now the users can choose any color (except gradients).

task-2904507

Part-of: odoo/odoo#99732
Co-authored-by: jpr-odoo <jpr@openerp.com>

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

@@ -2599,11 +2599,13 @@ options.registry.topMenuColor = options.Class.extend({
      */
     async selectStyle(previewMode, widgetValue, params) {
         await this._super(...arguments);
-        const className = widgetValue ? (params.colorPrefix + widgetValue) : '';
+        if (widgetValue && !isCSSColor(widgetValue)) {
+            widgetValue = params.colorPrefix + widgetValue;
+        }
         await new Promise((resolve, reject) => {
             this.trigger_up('action_demand', {
                 actionName: 'toggle_page_option',
-                params: [{name: 'header_color', value: className}],
+                params: [{name: 'header_color', value: widgetValue}],
                 onSuccess: resolve,
                 onFailure: reject,
             });

addons/website/views/snippets/snippets.xml

@@ -892,7 +892,7 @@
             data-prevent-important="true"
             data-css-property="background-color"
             data-color-prefix="bg-"
-            data-excluded="theme, common, custom"/>
+            data-excluded="theme, common"/>
     </div>
 
     <!-- Header > Navbar Options -->

addons/website/views/website_templates.xml

@@ -197,6 +197,12 @@
                 <input t-if="optionName in main_object" type="hidden" class="o_page_option_data" autocomplete="off" t-att-name="optionName" t-att-value="main_object[optionName]"/>
             </t>
         </t>
+
+        <t t-set="header_bg_color" t-value="'header_color' in main_object and main_object.header_color or ''"/>
+        <t t-set="header_bg_color_is_class" t-value="'bg-' in header_bg_color"/>
+        <t t-set="header_bg_color_class" t-value="header_bg_color_is_class and header_bg_color or ''"/>
+        <t t-set="header_bg_color_style" t-value="(not header_bg_color_is_class) and header_bg_color or ''"/>
+
         <div groups="base.group_user" class="o_frontend_to_backend_nav position-fixed d-none">
             <svg class="o_frontend_to_backend_icon position-absolute" width="24px" height="24px"
                  viewBox="-7 -7 24 24" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin">
@@ -219,7 +225,8 @@
         <attribute name="t-attf-class" add="#{'o_header_overlay' if 'header_overlay' in main_object and main_object.header_overlay else ''}" separator=" "/>
     </xpath>
     <xpath expr="//header" position="attributes">
-        <attribute name="t-attf-class" add="#{main_object.header_color if 'header_color' in main_object else ''}" separator=" "/>
+        <attribute name="t-attf-class" add="#{header_bg_color_class}" separator=" "/>
+        <attribute name="t-attf-style" add="#{header_bg_color_style and ('background-color: %s;' % header_bg_color_style)}" separator=" "/>
     </xpath>
     <xpath expr="//header" position="attributes">
         <attribute name="t-attf-class" add="#{'d-none o_snippet_invisible' if 'header_visible' in main_object and not main_object.header_visible else ''}" separator=" "/>