Update tag focus and select states to new design

[mkernohanbc]

This PR implements the new offset-ring focus state design on the tag component.

This change makes it easier to distinguish when a tag is in focus, selected or both:

New design in Figma, for reference.

[ty2k]

The new focus style looks great!

One existing issue with this component is that our current markup and styles will cause some weirdness for the "Selection" story, as shown in your screenshot. The existing markup and style for the non-selected tag is causing its text and icon to sit visually higher in the container than it should be.

Here's a zoomed in example of what's in this branch currently:

I've added a branch here where I've removed an unnecessary <div> from the markup and simplified the styling. This is what that version of the code looks like:

If you open those two screenshots in separate tabs and switch between them, the visual difference should be obvious.

Does that change work for you instead? Can we cherry-pick that commit into this branch?

[mkernohanbc]

The new focus style looks great!

One existing issue with this component is that our current markup and styles will cause some weirdness for the "Selection" story, as shown in your screenshot. The existing markup and style for the non-selected tag is causing its text and icon to sit visually higher in the container than it should be.

Here's a zoomed in example of what's in this branch currently:

I've added a branch here where I've removed an unnecessary <div> from the markup and simplified the styling. This is what that version of the code looks like:

If you open those two screenshots in separate tabs and switch between them, the visual difference should be obvious.

Does that change work for you instead? Can we cherry-pick that commit into this branch?

Looks good to me! Merged in 18cf561