ActionList item outlines for high contrast theme

[langermank]

What are you trying to accomplish?

This adds a few more improvements to the ActionList, mainly:

• Improve :hover and :active state for the "Light high contrast" theme.
  • Addresses https://github.com/github/design-infrastructure/discussions/1439#discussioncomment-1805470.

What approach did you choose and why?

• There is now an outline for :hover/:active that is transparent in most themes, except for the "high contrast" themes.

What should reviewers focus on?

• We didn't use a border for the :hover/:active state to not have to change any sizes. Downside is that in Safari the rounded corners are missing.
• The addition of a background color will overlay the vertical connections for tree-view. Is this okay, or do we need to address with a fix?
  

Are additional changes needed?

• ⚠️ Yes, when updating dotcom, primer/primitives needs to be bumped to 7.4.0 to include the new variables used in this PR.

[changeset-bot]

🦋 Changeset detected

Latest commit: a02806b

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

[simurai]

@langermank The addition of a background color will overlay the vertical connections for tree-view. Is this okay, or do we need to address with a fix?

Hmm.. maybe ok since the background just appears on hover/active? If the "vertical connections" would be on top of the background, that might would feel awkward?

Another option could be to indent the background/border so that they don't cover the "vertical connections".

[vdepizzol]

Another option could be to indent the background/border so that they don't cover the "vertical connections".

@langermank and I talked about this option in other scenarios such as navigationList. I think having ActionList-item elements filling the entire row with their target areas, and having hover/focus styles reflecting that is still our best choice going forward.

Regarding the vertical indentation lines/styles, I think we can improve those a little bit design-wise. When viewing multiple folders with single files inside, it becomes quite obvious they're too noisy. 🤔

[langermank]

I think we have to compromise on the fun interaction here for now. We could stack box-shadows to ensure we have a contrast border around the shadow that makes the item feel like its shrinking, but its not valid to use rgba() on a CSS variable that resolves as a hex. It would need to be rgb. 😞

[vdepizzol]

@langermank sorry I missed this comment!

I think we could remove the inset box-shadow while keeping the scaling interaction in that case :)

[langermank]

@vdepizzol no worries! Okie, I think I got it 👍