Separate active and selected states for .btn

[simurai]

This came up in Slack.

Currently the :active state for .btns use the same colors as the aria-selected=true state. The selected state should be easily visible when in a button group:

But that might be too big of a difference when clicking/pressing on the button. So this PR separates the :active and aria-selected=true state so they can have different colors. Here how the :active state looks in all themes:

TODO:

• Add styles
• Depends on Add btn-active primitives#68

@vdepizzol I think you like the btn btn-octicon combo. Should we document that and make it an "approved" option how .btn-octicon can be used.

[changeset-bot]

🦋 Changeset detected

Latest commit: 6e9a4bb

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/css	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

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

🔍 Inspect: https://vercel.com/primer/primer-css/Heko46bd1grbd4GdfFqaFzobDvwv
✅ Preview: https://primer-css-git-btn-active-primer.vercel.app

[vdepizzol]

@vdepizzol I think you like the btn btn-octicon combo. Should we document that and make it an "approved" option how .btn-octicon can be used.

@simurai let's chat about my explorations with button styles and ActionBar!