Token sizes and icons don't align with other controls

[iansan5653]

Token has a size prop which accepts standard size names like small and medium. These sizes, however, don't correspond with other Primer components, making it difficult to integrate token components into a design.

For example, here is a set of medium tokens with a medium IconButton:

Note how the icon button and the tokens do not align at all. And even though the tokens are small, their "x" buttons are larger, exacerbating the problem further.

I would expect that tokens would render with a height that matches the corresponding --control-size variable for the size they are rendered with, and with icons that match the corresponding size of IconButton.

[github-actions]

Uh oh! @iansan5653, the image you shared is missing helpful alt text. Check your issue body.

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

🤖 Beep boop! This comment was added automatically by github/accessibility-alt-text-bot.

[iansan5653]

Ended up having to remake the component from scratch to get a good look, which is unfortunate because I also lose all the accessibility improvements around interactive tokens with close buttons.

[broccolinisoup]

Sorry I was testing SelectPanel in review lab 😅 Ignore assignments please.