Description

Current Issue

The menu shares the same color as the header, which creates a visually confusing style as the visual hierarchy is difficult to be perceived (both elements have the same visual weight), as shown below:

Additional issues:

• The menu has an inner shadow that isn’t used anywhere else in the interface, making it stand out unnecessarily.
• Without editing CSS directly, it is impossible to customize the navigation background and header background separately.

Proposed Solution:

• Reduce the height of the navbar. Currently, it’s the same height as the header. I propose to reduce it to ~24px (ideally with padding and not a fixed height)
• Create new variables for the header and let the navbar variables address only the self mentioned interface element
  • Current variables
    • @navbar-default-color, 
    • @navbar-default-bg, 
    • @navbar-default-link-color, 
    • @navbar-default-link-hover-color, 
    • @navbar-default-link-hover-bg, 
    • @navbar-default-link-active-color, 
    • @navbar-default-link-active-bg, 
    • @navbar-height.
  • New Variables
    • @header-default-color, 
    • @header-default-bg, 
    • @header-default-link-color, 
    • @header-default-link-hover-color, 
    • @header-default-link-hover-bg, 
    • @header-default-link-active-color, 
    • @header-default-link-active-bg, 
    • @header-height.

The rule for the navbar background is:

• Light themes: reduce saturation and brightness by 10% from the header
• Dark themes: add brightness by 5% from the header

End result