Define updated guidelines around theme colours for sidebar

Proposal

This proposal is to address UI styling changes relating to the sidebar #332988 (closed) and top nav #331331 (closed)

1. Menu is using indigo despite selected theme #331331 (comment 598519359)
2. Washed out badges #331331 (comment 607207245)

Dark mode concerns have been address by this MR !62628 (merged)

What we plan on doing to address these issues have been discussed here #330467 (comment 618323674). The summary of the actions are as follows:

1. Update UI styling of menu to be agnostic of theme colors !71954 (comment 698432440) !73077 (merged)
2. Improve visibility of badges !71954 (merged)
3. Tooltip refinements !73597 (merged)

Context

Figma file: https://www.figma.com/file/CeBwippARtWNH3OXXxDkJN/Theme-colours-for-sidebar-330467?node-id=63%3A20601

To have a closer look at the different themes please take a look at these files below

• #330467[concept-20210705-neutral.png]

Details

1. Update UI styling of menu to be agnostic of theme colors

Indigo	Light red	Dark mode

Adjustments

• Use $gray-900 as default text & icon color !73077 (merged)
• Flyout menu on sidebar update to use gray heading and title and hover will use the theme colors. This connects the flyout with the sidebar menu in look and feel. !71954 (comment 698432440)

2. Improve visibility of badges

We will commit to use styling defined GitLab UI Pajamas components for the badges.

• When the menu item is active, there should be a border on the badge

3. Tooltip refinements

• Tooltips should not have a minimum width and should just adapt to the size of the text