Normalize header navigation badge counter colors

Problem

The badge counters in the header navigation for issues, merge requests, and to-do list all use different colors. None of which seem to align with color meaning as outlined in Pajamas Foundations > Color.

Currently…

• Issues badge looks like success
• Merge requests looks like warnings
• To-do list looks like info (which is the most appropriate)

Where color definitions in Pajamas are…

• Blue indicates a current or active state. It communicates: management, progress, connectivity, or organization.
• Green indicates success. It communicates: save, create, add, available, done, approved, or resolved.
• Orange indicates ‘attention-required.’ It communicates: warning, pending, missing, or impeded progress.

Solution

• Normalize the colors used for the counters
• Use a more neutral color
• Maintain high contrast and visibility of the counters
• Avoid overlapping the icon and the counter to avoid color collisions with the icon, and to keep the full icon visible

Initial concepts

Before	After	Notes
		This pattern adopts what is currently used for the to-do list and applies it to all. Even though not specified in Pajamas, blue is used for info.
		This takes the same specs as the current counter badge, but themed after the header, with a white background and darker indigo text for max contrast.
		This uses the new badge specs, but themed after the header, with a white background and darker indigo text for max contrast.
		This uses the new info badge.
		Transparent background option
		Keeps the color, but only in the text
		Uses the new badges for all three, while maintaining the current color assignments

/cc @gitlab-com/gitlab-ux/designers please add your thoughts and concepts too!