feat(Token): Migrate to CSS modules behind feature flag Pt 2

[randall-krauskopf]

Related To: https://github.com/github/primer/issues/4367

This PR is part 2 of breaking apart a larger PR into grokkable parts.

Apologies for the larger PR but there was an odd interplay with the specificity across the various components that made it hard to break this PR into smaller chunks

[changeset-bot]

🦋 Changeset detected

Latest commit: fa175a2

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

This PR includes changesets to release 1 package

Name	Type
@primer/react	Minor

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]

👋 Hi, this pull request contains changes to the source code that github/github depends on. If you are GitHub staff, we recommend testing these changes with github/github using the integration workflow. Thanks!

[github-actions]

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	103.79 KB (+0.22% 🔺)
packages/react/dist/browser.umd.js	104.13 KB (+0.24% 🔺)

[jonrohan]

Suggested change

	.AvatarContainer[data-size='small'] {
	.AvatarContainer:where([data-size='small']) {

[randall-krauskopf]

Hi @jonrohan, I'll get these changes in. Quick question though, why is :where preferred over the bare attribute selector?

[jonrohan]

Where will reduce the specificity on the attribute selector and make it easier to override the styles in dotcom. We try and add it whenever the attribute lands on the same dom node where we add the passed in className

[primer-integration]

👋 Hi from github/github! Your integration PR is ready: https://github.com/github/github/pull/353365

[primer-integration]

🔴 golden-jobs completed with status failure.