Use CSS color vars with fallback in legacy Primitive tokens

[langermank]

Closeshttps://github.com/github/primer/issues/2987

As a followup to moving the legacy theme files into Primer React from Primer Primitives, this PR introduces the new v8 color CSS vars with fallbacks as the value of the JS variables. This allows us to staff ship v8 variables without rewriting all of our CSS upfront. It also may help with the theme flashing issue.

Code review

This looks like a lot of changes (it is) but the thing we are most concerned about is if the raw value has changes. The easiest way to see that is to primarily review the lefthand side to see which values have changed. There are a few intentional changes:

• sometimes rgba transparent becomes transparent
• the fg muted color was updated in a newer Primitives release which is reflected here
• random bug fixes

Changelog

• Adds CSS variable color values to the legacy Primitive design tokens.
• Three values include: the new v8 color CSS variable, a fallback of the old color CSS variable, and the raw value.

Rollout strategy

• Patch release
• Minor release
• Major release; if selected, include a written rollout or migration plan
• None; if selected, include a brief description as to why

Testing & Reviewing

We'll definitely want to test this against dotcom with an integration test PR.

Merge checklist

• Added/updated tests
• Added/updated documentation
• Added/updated previews (Storybook)
• Changes are SSR compatible
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge
• (GitHub staff only) Integration tests pass at github/github (Learn more about how to run integration tests)

[changeset-bot]

🦋 Changeset detected

Latest commit: fbc0e26

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]

size-limit report 📦

Path	Size
dist/browser.esm.js	113.83 KB (+8.96% 🔺)
dist/browser.umd.js	114.47 KB (+8.91% 🔺)

[langermank]

Note that these changes from 7d8590 to 848d97 are actually intended and correct ✅

[langermank]

This has been broken for awhile, I replaced it with the correct value

[joshblack]

LGTM! 🥳 I had two broader questions as it relates to this PR:

• Is there any potential impact as it relates to how folks use themeGet? It seems like most people just use it to get a value versus interacting with it so seems like it should be good?
• What's the best way for us to test this out in dotcom to make sure we're confident no styling issues make their way into a release?