Add focus and hover colors to all themes in Item using functional variables

[pksjce]

Before this PR, hardcoded RGB colors were being used for the hover and focus states. I changed them to use the functional color system as described in #1480

Screenshots

Merge checklist

• Added/updated tests
• Added/updated documentation
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge

Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.

[changeset-bot]

🦋 Changeset detected

Latest commit: e1208d4

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

This PR includes changesets to release 1 package

Name	Type
@primer/components	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

[github-actions]

size-limit report 📦

Path	Size
dist/browser.esm.js	55.96 KB (-0.62% 🔽)
dist/browser.umd.js	56.38 KB (-0.58% 🔽)

[pksjce]

Notes -

1. hover -> neutral.subtle
2. focus -> neutral.muted
   Would do well with some guidance from @auareyou here

[colebemis]

Looks like neutral/danger.subtle for the hover state and neutral/danger.muted for the focus state work in most cases. The exception is the focus state of the danger variant in dark high contrast:

danger.muted and danger.emphasis are the same in dark high contrast which makes the danger.fg text invisible.

Let's loop in @tallys and @auareyou because I think this issue is going to require more design work than I initially thought.

[mperrotti]

@pksjce - should we modify this PR now that primer/primitives#256 has merged?

[siddharthkp]

this feels so good!

[siddharthkp]

(added a word for the automated changelog)

Looks good, let's ship it!

[colebemis]

🚢 🎉