Add ::selection background color token

[langermank]

We've gotten a number of bug reports for text selection issues in dotcom (both in and outside of v8 color feature flag). The typical bgColor-accent-muted color is sometimes opaque, sometimes not. This adds a specific color based on our link and focus color with an alpha to ensure consistency across themes.

[changeset-bot]

🦋 Changeset detected

Latest commit: 82fafce

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

This PR includes changesets to release 1 package

Name	Type
@primer/primitives	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

[github-actions]

Variables changed

No variables changed

[github-actions]

Design Token Diff

/css/functional/themes/dark-colorblind.css

+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/dark-colorblind.css	2024-02-16 18:33:12.545284312 +0000
@@ -191,6 +191,7 @@
 --underlineNav-borderColor-active: #f78166;
 --underlineNav-borderColor-hover: #6e768166;
 --underlineNav-iconColor-rest: #848d97;
+  --selection-bgColor: #4493f833;
 --fgColor-default: #e6edf3;
 --fgColor-muted: #848d97;
 --fgColor-onEmphasis: #ffffff;
@@ -600,6 +601,7 @@
   --underlineNav-borderColor-active: #f78166;
   --underlineNav-borderColor-hover: #6e768166;
   --underlineNav-iconColor-rest: #848d97;
+    --selection-bgColor: #4493f833;
   --fgColor-default: #e6edf3;
   --fgColor-muted: #848d97;
   --fgColor-onEmphasis: #ffffff;

/css/functional/themes/dark-dimmed.css

+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/dark-dimmed.css	2024-02-16 18:33:11.801278503 +0000
@@ -191,6 +191,7 @@
 --underlineNav-borderColor-active: #ec775c;
 --underlineNav-borderColor-hover: #636e7b66;
 --underlineNav-iconColor-rest: #717e8b;
+  --selection-bgColor: #478be633;
 --fgColor-default: #c5d1de;
 --fgColor-muted: #717e8b;
 --fgColor-onEmphasis: #cdd9e5;
@@ -600,6 +601,7 @@
   --underlineNav-borderColor-active: #ec775c;
   --underlineNav-borderColor-hover: #636e7b66;
   --underlineNav-iconColor-rest: #717e8b;
+    --selection-bgColor: #478be633;
   --fgColor-default: #c5d1de;
   --fgColor-muted: #717e8b;
   --fgColor-onEmphasis: #cdd9e5;

/css/functional/themes/dark-high-contrast.css

+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/dark-high-contrast.css	2024-02-16 18:33:12.841286624 +0000
@@ -191,6 +191,7 @@
 --underlineNav-borderColor-active: #ff967d;
 --underlineNav-borderColor-hover: #bdc4cc;
 --underlineNav-iconColor-rest: #f0f3f6;
+  --selection-bgColor: #60aeff33;
 --fgColor-default: #fbfcfd;
 --fgColor-muted: #f0f3f6;
 --fgColor-onEmphasis: #0a0c10;
@@ -600,6 +601,7 @@
   --underlineNav-borderColor-active: #ff967d;
   --underlineNav-borderColor-hover: #bdc4cc;
   --underlineNav-iconColor-rest: #f0f3f6;
+    --selection-bgColor: #60aeff33;
   --fgColor-default: #fbfcfd;
   --fgColor-muted: #f0f3f6;
   --fgColor-onEmphasis: #0a0c10;

/css/functional/themes/dark-tritanopia.css

+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/dark-tritanopia.css	2024-02-16 18:33:12.241281939 +0000
@@ -191,6 +191,7 @@
 --underlineNav-borderColor-active: #f78166;
 --underlineNav-borderColor-hover: #6e768166;
 --underlineNav-iconColor-rest: #848d97;
+  --selection-bgColor: #4493f833;
 --fgColor-default: #e6edf3;
 --fgColor-muted: #848d97;
 --fgColor-onEmphasis: #ffffff;
@@ -600,6 +601,7 @@
   --underlineNav-borderColor-active: #f78166;
   --underlineNav-borderColor-hover: #6e768166;
   --underlineNav-iconColor-rest: #848d97;
+    --selection-bgColor: #4493f833;
   --fgColor-default: #e6edf3;
   --fgColor-muted: #848d97;
   --fgColor-onEmphasis: #ffffff;

/css/functional/themes/dark.css

+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/dark.css	2024-02-16 18:33:11.465275879 +0000
@@ -191,6 +191,7 @@
 --underlineNav-borderColor-active: #f78166;
 --underlineNav-borderColor-hover: #6e768166;
 --underlineNav-iconColor-rest: #848d97;
+  --selection-bgColor: #4493f833;
 --fgColor-default: #e6edf3;
 --fgColor-muted: #848d97;
 --fgColor-onEmphasis: #ffffff;
@@ -600,6 +601,7 @@
   --underlineNav-borderColor-active: #f78166;
   --underlineNav-borderColor-hover: #6e768166;
   --underlineNav-iconColor-rest: #848d97;
+    --selection-bgColor: #4493f833;
   --fgColor-default: #e6edf3;
   --fgColor-muted: #848d97;
   --fgColor-onEmphasis: #ffffff;

/css/functional/themes/light-colorblind.css

+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/light-colorblind.css	2024-02-16 18:33:10.781270539 +0000
@@ -192,6 +192,7 @@
 --underlineNav-borderColor-active: #fd8c73;
 --underlineNav-borderColor-hover: #afb8c133;
 --underlineNav-iconColor-rest: #636c76;
+  --selection-bgColor: #0969da1a;
 --fgColor-default: #1f2328;
 --fgColor-muted: #636c76;
 --fgColor-onEmphasis: #ffffff;
@@ -601,6 +602,7 @@
   --underlineNav-borderColor-active: #fd8c73;
   --underlineNav-borderColor-hover: #afb8c133;
   --underlineNav-iconColor-rest: #636c76;
+    --selection-bgColor: #0969da1a;
   --fgColor-default: #1f2328;
   --fgColor-muted: #636c76;
   --fgColor-onEmphasis: #ffffff;

/css/functional/themes/light-high-contrast.css

+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/light-high-contrast.css	2024-02-16 18:33:11.145273381 +0000
@@ -192,6 +192,7 @@
 --underlineNav-borderColor-active: #cd3425;
 --underlineNav-borderColor-hover: #88929d;
 --underlineNav-iconColor-rest: #0e1116;
+  --selection-bgColor: #023b951a;
 --fgColor-default: #010409;
 --fgColor-muted: #0e1116;
 --fgColor-onEmphasis: #ffffff;
@@ -601,6 +602,7 @@
   --underlineNav-borderColor-active: #cd3425;
   --underlineNav-borderColor-hover: #88929d;
   --underlineNav-iconColor-rest: #0e1116;
+    --selection-bgColor: #023b951a;
   --fgColor-default: #010409;
   --fgColor-muted: #0e1116;
   --fgColor-onEmphasis: #ffffff;

/css/functional/themes/light-tritanopia.css

+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/light-tritanopia.css	2024-02-16 18:33:10.409267634 +0000
@@ -192,6 +192,7 @@
 --underlineNav-borderColor-active: #fd8c73;
 --underlineNav-borderColor-hover: #afb8c133;
 --underlineNav-iconColor-rest: #636c76;
+  --selection-bgColor: #0969da1a;
 --fgColor-default: #1f2328;
 --fgColor-muted: #636c76;
 --fgColor-onEmphasis: #ffffff;
@@ -601,6 +602,7 @@
   --underlineNav-borderColor-active: #fd8c73;
   --underlineNav-borderColor-hover: #afb8c133;
   --underlineNav-iconColor-rest: #636c76;
+    --selection-bgColor: #0969da1a;
   --fgColor-default: #1f2328;
   --fgColor-muted: #636c76;
   --fgColor-onEmphasis: #ffffff;

/css/functional/themes/light.css

+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/light.css	2024-02-16 18:33:09.965264167 +0000
@@ -192,6 +192,7 @@
 --underlineNav-borderColor-active: #fd8c73;
 --underlineNav-borderColor-hover: #afb8c133;
 --underlineNav-iconColor-rest: #636c76;
+  --selection-bgColor: #0969da1a;
 --fgColor-default: #1f2328;
 --fgColor-muted: #636c76;
 --fgColor-onEmphasis: #ffffff;
@@ -601,6 +602,7 @@
   --underlineNav-borderColor-active: #fd8c73;
   --underlineNav-borderColor-hover: #afb8c133;
   --underlineNav-iconColor-rest: #636c76;
+    --selection-bgColor: #0969da1a;
   --fgColor-default: #1f2328;
   --fgColor-muted: #636c76;
   --fgColor-onEmphasis: #ffffff;

[langermank]

Merging this without review so I can get it in the release, but happy to make adjustments once we see it in action later 😄