From 7cada8d8a91591118bc2502192a4bde1b2790388 Mon Sep 17 00:00:00 2001
From: simurai <simurai@github.com>
Date: Fri, 23 Jun 2023 17:14:44 +0900
Subject: [PATCH 1/4] Add `::selection` to color-mode-theme mixin

---
 src/support/mixins/color-modes.scss | 31 +++++++++++++++++++++++++----
 1 file changed, 27 insertions(+), 4 deletions(-)

diff --git a/src/support/mixins/color-modes.scss b/src/support/mixins/color-modes.scss
index 6383c27931..c3ce55cbb1 100644
--- a/src/support/mixins/color-modes.scss
+++ b/src/support/mixins/color-modes.scss
@@ -1,9 +1,23 @@
+// This mixin is used to output the tokens/variables from Primitives
+//
+// Warning: Don't use this mixin with a class as @content since
+// the `::selection` will make the selector invalid
+//
+// Example:
+//
+// @include color-mode-theme(dark) {
+//   --color: black;
+// }
+
 @mixin color-mode-theme($theme-name, $include-root: false) {
   @if $include-root {
     :root,
     [data-color-mode="light"][data-light-theme="#{$theme-name}"],
     [data-color-mode="dark"][data-dark-theme="#{$theme-name}"] {
-      @content;
+      &,
+      &::selection {
+        @content;
+      }
 
       /*! */ // This is a fix for a cssstats bug see https://github.com/cssstats/cssstats/issues/331
     }
@@ -12,19 +26,28 @@
   @else {
     [data-color-mode="light"][data-light-theme="#{$theme-name}"],
     [data-color-mode="dark"][data-dark-theme="#{$theme-name}"] {
-      @content;
+      &,
+      &::selection {
+        @content;
+      }
     }
   }
 
   @media (prefers-color-scheme: light) {
     [data-color-mode="auto"][data-light-theme="#{$theme-name}"] {
-      @content;
+      &,
+      &::selection {
+        @content;
+      }
     }
   }
 
   @media (prefers-color-scheme: dark) {
     [data-color-mode="auto"][data-dark-theme="#{$theme-name}"] {
-      @content;
+      &,
+      &::selection {
+        @content;
+      }
     }
   }
 }

From f65b43809fe1cf0b7f933a4fdc3dc7f52896e377 Mon Sep 17 00:00:00 2001
From: simurai <simurai@github.com>
Date: Fri, 23 Jun 2023 17:15:14 +0900
Subject: [PATCH 2/4] Document color-mode() mixin

---
 src/support/mixins/color-modes.scss | 29 +++++++++++++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/src/support/mixins/color-modes.scss b/src/support/mixins/color-modes.scss
index c3ce55cbb1..6cb7134395 100644
--- a/src/support/mixins/color-modes.scss
+++ b/src/support/mixins/color-modes.scss
@@ -52,6 +52,35 @@
   }
 }
 
+// This mixin wraps styles with light or dark mode selectors
+// If possible, use a color variable instead.
+//
+// Example:
+//
+// @include color-mode('dark') {
+//   .my-class {
+//     color: red;
+//   }
+// }
+//
+// Returns:
+//
+// [data-color-mode=light][data-light-theme*=dark] .my-class,
+// [data-color-mode=dark][data-dark-theme*=dark] .my-class {
+//   color: red;
+// }
+//
+// @media (prefers-color-scheme: light) {
+//   [data-color-mode=auto][data-light-theme*=dark] .my-class {
+//     color: red;
+//   }
+// }
+// @media (prefers-color-scheme: dark) {
+//   [data-color-mode=auto][data-dark-theme*=dark] .my-class {
+//     color: red;
+//   }
+// }
+
 @mixin color-mode($mode) {
   @if $mode == light {
     :root,

From 01f73a7bf889a6a6e652937c434e81560cf180b7 Mon Sep 17 00:00:00 2001
From: simurai <simurai@github.com>
Date: Fri, 23 Jun 2023 17:28:14 +0900
Subject: [PATCH 3/4] Clarify warning

---
 src/support/mixins/color-modes.scss | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/support/mixins/color-modes.scss b/src/support/mixins/color-modes.scss
index 6cb7134395..5c60b4e1d6 100644
--- a/src/support/mixins/color-modes.scss
+++ b/src/support/mixins/color-modes.scss
@@ -1,13 +1,21 @@
 // This mixin is used to output the tokens/variables from Primitives
 //
-// Warning: Don't use this mixin with a class as @content since
-// the `::selection` will make the selector invalid
-//
 // Example:
 //
 // @include color-mode-theme(dark) {
 //   --color: black;
 // }
+//
+// Warning!!!
+// Don't use this mixin with a class. E.g.
+// @include color-mode-theme(dark) {
+//   .my-class {
+//     color: red;
+//   }
+// }
+//
+// The outputted `::selection .my-class` will make the selector invalid and the entire ruleset is disregarded.
+// At some point we hopefully can remove the need for `&, &::selection {}` again (once the spec/implementation changes).
 
 @mixin color-mode-theme($theme-name, $include-root: false) {
   @if $include-root {

From b90c40aeac33d850797258427ae40e5e66c13d25 Mon Sep 17 00:00:00 2001
From: simurai <simurai@github.com>
Date: Fri, 23 Jun 2023 18:45:35 +0900
Subject: [PATCH 4/4] Create eleven-vans-repair.md

---
 .changeset/eleven-vans-repair.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/eleven-vans-repair.md

diff --git a/.changeset/eleven-vans-repair.md b/.changeset/eleven-vans-repair.md
new file mode 100644
index 0000000000..050901f6dc
--- /dev/null
+++ b/.changeset/eleven-vans-repair.md
@@ -0,0 +1,5 @@
+---
+"@primer/css": patch
+---
+
+Add `::selection` to `color-mode-theme()` mixin