[FIX] website, *: review navbar color system

* web_editor, website_slides

Current system is styling all navbars with the user color. This was not
the expected behavior but it is in fact quite nice, so we decided to
keep it. There was however a problem: choosing the menu text color only
applied to the main navbar (as it was an xpath toggling the navbar-dark
class).

This commit solves the problem by forcing navbar-light to behave as
navbar-dark automatically if the menu background is dark, and this
without any JS or extra CSS rules. This allows to get rid of the menu
text color option.

This commit also reviews the light and dark colors which are used when
website is not installed.

addons/web_editor/static/src/scss/bootstrap_overridden.scss

@@ -18,9 +18,9 @@ $-palette: map-merge((
 
     // BS light and dark colors are not used for any BS component, just
     // for color utilities. By default, we set them to a very light and
-    // very dark version of a desaturate version of the primary color
-    'light': lighten(desaturate($-main-color, 40%), min(70%, max(0%, 97% - $-main-color-lightness))), // Does not increase over 97% lightness
-    'dark': darken(desaturate($-main-color, 40%), min(70%, max(0%, $-main-color-lightness - 10%))), // Does not lower under 10% lightness
+    // very dark version of a desaturate version of the main color
+    'light': lighten(desaturate($-main-color, 80%), min(70%, max(0%, 97% - $-main-color-lightness))), // Does not increase over 97% lightness
+    'dark': darken(desaturate($-main-color, 80%), min(70%, max(0%, $-main-color-lightness - 10%))), // Does not lower under 10% lightness
 ), o-map-omit($-palette));
 @if $-is-backend {
     $-palette: map-remove($-palette, 'primary', 'secondary', 'success', 'info', 'warning', 'danger', 'light', 'dark');

addons/website/static/src/scss/website.scss

@@ -32,8 +32,15 @@ $-theme-font: nth($o-theme-font-urls, $o-theme-font-number);
     }
 }
 
-.navbar {
-    @include o-bg-color(color('menu'));
+.navbar-light {
+    // Style only navbar-light which Odoo is only supposed to use in standard
+    // anyway. Automatically mimic navbar-dark if the user's menu color is dark.
+    // Note: this only works because navbar-light is defined before navbar-dark,
+    // we may want to use a safest way when possible.
+    background-color: color('menu') !important;
+    @if (color-yiq(color('menu')) != $yiq-text-dark) {
+        @extend .navbar-dark;
+    }
 
     .nav-item {
         transition: opacity 1000ms ease 0s;

addons/website/static/src/xml/website.editor.xml

@@ -37,7 +37,7 @@
                 </div>
                 <div>
                     <h6>Background colors</h6>
-                    <t t-foreach="{'body': _t('Body'), 'menu': _t('Menu'), 'footer': _t('Footer')}" t-as="color">
+                    <t t-foreach="{'body': _t('Body'), 'menu': _t('Menus'), 'footer': _t('Footer')}" t-as="color">
                         <t t-call="website.theme_customize_color_palette_button"/>
                     </t>
                 </div>

addons/website/views/website_templates.xml

@@ -464,11 +464,6 @@
         <!-- Color options -->
         <content id="theme_customize_content_colors" string="Colors" title="Choose the theme colors">
             <opt data-xmlid="" data-color-palette="user" string="Choose your colors"/>
-
-            <list string="Menu text">
-                <opt string="Dark" data-xmlid="" data-reload="/"/>
-                <opt string="Light" data-xmlid="website.option_navbar_dark" data-reload="/"/>
-            </list>
         </content>
 
         <!-- Layout Options -->
@@ -517,13 +512,6 @@
     </div>
 </template>
 
-<!-- Menu color options -->
-<template id="option_navbar_dark" inherit_id="website.layout" active="False">
-    <xpath expr="//header/nav" position="attributes">
-        <attribute name="class" remove="navbar-light" add="navbar-dark" separator=" "/>
-    </xpath>
-</template>
-
 <!-- Layout options -->
 <template id="option_layout_boxed_variables" inherit_id="website._assets_primary_variables" active="False">
     <xpath expr="//link[last()]" position="after">

addons/website_slides/views/website_slides_embed.xml

@@ -102,7 +102,7 @@
                         </t>
                     </div>
                     <!-- Fixed bottom navbar -->
-                    <div class="navbar navbar-default navbar-fixed-bottom" role="navigation" t-if="slide.slide_type in ('presentation', 'document')">
+                    <div class="navbar navbar-light bg-light navbar-fixed-bottom" role="navigation" t-if="slide.slide_type in ('presentation', 'document')">
                         <div class="container-fluid oe_slides_panel_footer">
                             <div class="row" style="padding-top:15px;">
                                 <div class="col-xl-2 col-lg-2 col-md-2 col-2 text-left">