Colocate Primer CSS global injections with components that need them

[shawnbot]

This is a follow-up to #276 that breaks up our global CSS injections so that we can more easily remove them as we port components over to Emotion. Here's why I think we should do this:

1. It can make user bundles smaller if they take advantage of tree-shaking because they'll only get the CSS for components that they use.
2. It should make refactoring a component with Emotion simpler, because it makes it really clear where we should look for the original component CSS, and we can more easily test removing the globally injected styles by commenting out a single statement in the component we're working on.

I clicked through all of the component docs to make sure that I didn't break anything, and fleshed out a couple of documentation bits and examples while I was in there.

Details changes

The Details component is kind of a weird case because the details-reset CSS lives in the primer-buttons module. Rather than double up Sass imports or inject them globally, I opted to make a styled('details') with the details-reset styles and use that in the Details component. The Details docs also now mention that you have bring your own <summary> (or <Button is="summary">), and make it clearer that if you use the children function or render prop you have to implement the toggle function yourself.

Merge checklist

• Changed base branch to release branch
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge

[vercel]

This pull request is automatically deployed with Now.
To access deployments, click Details below or on the icon next to each push.

[shawnbot]

Even though we're not using any actual Sass features here, processing it with Sass allows us to minify it with outputStyle: 'compressed'.

[emplums]

Looks good!