Refresh polish ✨

[simurai]

This PR adds a bit more ✨ polish to the refreshed components. Like..

• Add disabled state to .form-control
• Add inner box-shadow to .form-control
• Add different avatar sizes
• Polish buttons (mostly refactoring + transitions)
• Polish labels (Label and IssueLabel are now the same) Stickersheet
• Adjust sizes (e.g. 34px 👉 32px) Size stickersheet
• Some more refactoring and cleanup

API changes

• New $size scale
• New .avatar-[1-8] sizes.
• New .Label--large modifier
• New .Label--inline modifier. This can be used in places where adding a label shouldn't increase the height of the container element or line-height, for example inside a <p> element.
• New $box-shadow-inset variable. Used for the inner shadow of inputs
• Rename $focus-shadow 👉 $box-shadow-focus

/cc @primer/ds-core

[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/jiw1axj9m
✅ Preview: https://primer-css-git-next-polish.primer.now.sh

[simurai]

The pressed state is still a bit hard to see. So now the background is also a bit darker:

With darker border	With darker background

Also added a subtle transition when moving with the mouse away from a button. 👉 Preview

[simurai]

Played around with the different heights and added a new size scale to make sure all the heights match.

$size-0:    0;
$size-1: 16px;
$size-2: 20px;
$size-3: 24px;
$size-4: 28px;
$size-5: 32px;
$size-6: 40px;
$size-7: 48px;
$size-8: 64px;

👀 Preview

The current approach uses 0 top/bottom padding, but instead a large line-height to set the exact height of the component. This also allows child components to be added, like .Counter without increasing the height of the parent component. It seems fine as long as there is no text that needs to wrap onto multiple lines. 🤷‍♂

An alternative would be to add some padding back and use min-height. But I haven't tested if that causes weird vertical alignments when adding child components. 🤔

[simurai]

If someone wants to review this PR, I got carried away a bit and there are quite a lot of changes that move things around. 😇 But there should be no breaking change to dotcom.

[auareyou]

Looks fantastic!