[FIX] web: reintroduce CSS variables for navbar entries

This commit aims to reintroduce CSS variables to handle the different
states of our navbar entries.

Recently, the way we handle the navbar entries changed. Previously, we
used to set CSS variables in Community, which would allow us to control
the color of ours nav entries at every state.

On the Enteprise side, this would allow us to use the different colors we
use for these buttons and style them differently

This approach was also very helpful because we could override these CSS
variables once again to handle the colors of the Studio navbar elements.

Recently, the approach used to control these elements changed :

- On Community, we make use of CSS variables ;
- On Enterprise, we use the Bootstrap `btn-light` class.

Using `btn-light` was a very good approach to ensure that no issues would
appears on our buttons and also to reduce the amount of code needed, but
unfortunately, using `btn-light` directly affects Studio, causing contrast
issues. It was also a bit weird to have CSS variables + Bootstrap classes
being set at the same time.

To fix these issues, we reintroduce CSS variables in Enterprise and Studio,
to fully control the color of our elements and ensure everything is
readable. Most of these variables are defined in Community, inside the
`navbar.scss` file, and we simply override them in Enterprise and Studio.

task-3418936
part of task-3326263

closes odoo/odoo#137140

X-original-commit: af6d914c379953d2deec9833579399f126076194
Related: odoo/enterprise#48174
Signed-off-by: Stefano Rigano (sri) <sri@odoo.com>
Signed-off-by: Chrysanthe Gomrée (chgo) <chgo@odoo.com>

addons/web/static/src/webclient/navbar/navbar.scss

@@ -3,6 +3,7 @@
 // ============================================================================
 .o_main_navbar {
     @include print-variable(o-navbar-height, $o-navbar-height);
+
     --Dropdown_menu-margin-y: 0;
 
     display: flex;
@@ -33,23 +34,26 @@
 
     .o_menu_sections {
         .o_nav_entry, .dropdown-toggle {
-            @extend %-main-navbar-entry-bg-hover !optional;
+            background: var(--NavBar-entry-backgroundColor, #{$o-navbar-background});
+            border: $border-width solid transparent;
+
+            &:hover {
+                background: var(--NavBar-entry-backgroundColor--hover, #{$o-navbar-entry-bg--hover});
+            }
+
+            &:focus {
+                background: var(--NavBar-entry-backgroundColor--focus, #{$o-navbar-entry-bg--hover});
+            }
+
+            &:active {
+                background: var(--NavBar-entry-backgroundColor--active, #{$o-navbar-entry-bg--active});
+            }
         }
 
         .dropdown.show > .dropdown-toggle {
-            @extend %-main-navbar-entry-active !optional;
-        }
-    }
-
-    @if (not $o-navbar-use-pills) {
-        .o_menu_systray {
-            .o_nav_entry, .dropdown-toggle {
-                @extend %-main-navbar-entry-bg-hover !optional;
-            }
-
-            .dropdown.show > .dropdown-toggle {
-                @extend %-main-navbar-entry-active !optional;
-            }
+            border-color: var(--NavBar-entry-borderColor-active, transparent);
+            background: var(--NavBar-entry-backgroundColor--active, #{$o-navbar-entry-bg--active});
+            color: var(--NavBar-entry-color--active, #{$o-navbar-entry-color--active});
         }
     }
 

addons/web/static/src/webclient/navbar/navbar.variables.scss

@@ -1,6 +1,5 @@
 // = Main Navbar Variables
 // ============================================================================
-$o-navbar-use-pills: false !default;
 $o-navbar-height: 46px !default;
 $o-navbar-padding-v: 0px !default;
 $o-navbar-font-size: $o-font-size-base !default;
@@ -61,18 +60,3 @@ $o-navbar-badge-text-shadow: 1px 1px 0 rgba($o-black, .3) !default;
     padding-right: var(--NavBar-entry-padding-right, #{$o-navbar-entry-padding-h});
     line-height: calc(var(--o-navbar-height) - #{$o-navbar-padding-v * 2});
 }
-
-@if ($o-navbar-use-pills == false) {
-    %-main-navbar-entry-bg-hover {
-        &:hover {
-            background-color: var(--NavBar-entry-backgroundColor--hover, #{$o-navbar-entry-bg--hover});
-        }
-    }
-
-    %-main-navbar-entry-active {
-        &, &:hover, &:focus {
-            background: var(--NavBar-entry-backgroundColor--active, #{$o-navbar-entry-bg--active});
-            color: var(--NavBar-entry-color--active, #{$o-navbar-entry-color--active});
-        }
-    }
-}

addons/website/static/src/components/navbar/navbar.scss

@@ -1,9 +1,4 @@
 .o_menu_systray.o_website_systray {
-    @if $o-navbar-use-pills {
-        --NavBar-entry-margin-left: #{$o-navbar-entry-padding-h * 0.5};
-        --NavBar-entry-margin-right: #{$o-navbar-entry-padding-h * 0.5};
-    } @else {
-        --NavBar-entry-padding-left: #{$o-navbar-entry-padding-h};
-        --NavBar-entry-padding-right: #{$o-navbar-entry-padding-h};
-    }
+    --NavBar-entry-padding-left: #{$o-navbar-entry-padding-h};
+    --NavBar-entry-padding-right: #{$o-navbar-entry-padding-h};
 }