provide css vars to ::backdrop

[keithamus]

What are you trying to accomplish?

Attempting to use Primer's css variables in a ::backdrop element. This doesn't work because ::backdrop is like ::selection in that it does not inherit from :root. Consequently, ::backdrop needs to be provided all the CSS vars.

In addition, ::backdrop is not supported by all browsers (Safari 14 does not support it), so we need to give it its own separate style rule so that it does not break the parsing of the :root style rule when encountered.

What approach did you choose and why?

I chose to add ::backdrop as a second style rule in the @if $include-root section of the color-mode-theme block.

What should reviewers focus on?

Alternatives would be to not use ::backdrop, but that is far more complex.

Can these changes ship as is?

• Yes, this PR does not depend on additional changes. 🚢

[changeset-bot]

⚠️ No Changeset found

Latest commit: 386e23a

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[TKDev7]

FWIW according to the browserslist in package.json, last supported Safari version is 16 not 14.