Component refresh tweaks II

[simurai]

1. Labels

Adds .Label--purple and .Label--pink

2. UnderlineNav

The icon is a bit darker for selected items, see https://github.com/github/design-systems/issues/770#issuecomment-597369833.

3. Avatars

Uses 4px rounded corners for .avatar-small and avatar stacks.

This also adds some variables and a utility class:

• $border-radius-1: 4px;
• $border-radius-2: 6px; -> same as the default $border-radius.
• .rounded -> uses the default $border-radius variable

4. Social count

Makes sure the height matches the button when zooming. https://github.com/github/design-systems/issues/769#issuecomment-598424402

5. Pagination

Now also uses #f9826c for the border. -> https://github.com/github/design-systems/issues/770#issuecomment-603131123

6. Menu

Removed background color on selected .menu item. -> https://github.com/github/design-systems/issues/770#issuecomment-603131123

7. Button + lables

Now use $blue-500. -> https://github.com/github/design-systems/issues/770#issuecomment-603688126

[vercel]

This pull request is being automatically deployed with ZEIT Now (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://zeit.co/primer/primer-css/dmx3ybquv
✅ Preview: https://primer-css-git-next-2.primer.now.sh

[auareyou]

What is $border-radius-3for?

[simurai]

What is $border-radius-3for?

For cases that used to be rounder than the default. But those cases might not have to change and can keep using the new default of 6px. I removed the $border-radius-3 again until we really need it.

[auareyou]

Go Simon!! 🙌