Add ::selection to color-mode-theme() mixin

[simurai]

What are you trying to accomplish?

This fixes #2411 by adding ::selection to the color-mode-theme() mixin.

What approach did you choose and why?

It's similar to #2437 that needed to be reverted again. But in this attempt, the ::selection is only added to the color-mode-theme() mixin. To make the ::selection work with CSS variables and all color modes, I had to add it everywhere @content is used. It's a bit cumbersome, but not sure if there is a better approach? 🤔

A usage example of

@include color-mode-theme(light, true) {
  --color: red;
}

should output:

Before

:root,
[data-color-mode=light][data-light-theme=light],
[data-color-mode=dark][data-dark-theme=light] {
  --color: red;
}

@media (prefers-color-scheme: light) {
  [data-color-mode=auto][data-light-theme=light] {
    --color: red;
  }
}
@media (prefers-color-scheme: dark) {
  [data-color-mode=auto][data-dark-theme=light] {
    --color: red;
  }
}

After

:root,
:root::selection,
[data-color-mode=light][data-light-theme=light],
[data-color-mode=light][data-light-theme=light]::selection,
[data-color-mode=dark][data-dark-theme=light],
[data-color-mode=dark][data-dark-theme=light]::selection {
  --color: red;
}

@media (prefers-color-scheme: light) {
  [data-color-mode=auto][data-light-theme=light],
  [data-color-mode=auto][data-light-theme=light]::selection {
    --color: red;
  }
}
@media (prefers-color-scheme: dark) {
  [data-color-mode=auto][data-dark-theme=light],
  [data-color-mode=auto][data-dark-theme=light]::selection {
    --color: red;
  }
}

Downside is that we can't use this mixin with a class anymore, like

@include color-mode-theme(dark) {
  .my-class {
    --color: red;
  }
}

since that would output ... ::selection .my-class and as seen, make the selector invalid and the entire ruleset is discarded. 😩 I added a warning as a comment. At some point we hopefully can remove the &, &::selection {} part again (once the spec/implementation changes). 🙏

More infos:

• Chrome bug
• Spec discussion
• Blog post

What should reviewers focus on?

Note that this issue is currently only reproducible with Chrome's chrome://flags/#enable-experimental-web-platform-features enabled.

I'll try to test this first with a canary version on dotcom to avoid any more surprises.

Can these changes ship as is?

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

[changeset-bot]

🦋 Changeset detected

Latest commit: b90c40a

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

This PR includes changesets to release 1 package

Name	Type
@primer/css	Patch

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

[simurai]

This comment is unrelated, but maybe good to document the color-mode() mixin too.

[keithamus]

This LGTM 👍

AFAICT color-mode-theme isn't used in dotcom so this should land safely.

[simurai]

AFAICT color-mode-theme isn't used in dotcom so this should land safely.

Yeah, I haven't seen it being used outside of PCSS. Maybe in the next major version we could move it into color-modes/ to make it a bit more private and not part of the shared mixins.

[langermank]

Nice work! 👏