From 0c0a264f0db1e4137d28a1e3ca80fd8688c389aa Mon Sep 17 00:00:00 2001
From: Jon Rohan <yes@jonrohan.codes>
Date: Fri, 16 Aug 2024 20:40:41 +0000
Subject: [PATCH 1/2] Refactor Link, Blankslate, Heading to use :where css

---
 packages/react/src/Blankslate/Blankslate.module.css | 8 ++++----
 packages/react/src/Heading/Heading.module.css       | 6 +++---
 packages/react/src/Link/Link.module.css             | 6 +++---
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/react/src/Blankslate/Blankslate.module.css b/packages/react/src/Blankslate/Blankslate.module.css
index 17e93699bec..397e84f426e 100644
--- a/packages/react/src/Blankslate/Blankslate.module.css
+++ b/packages/react/src/Blankslate/Blankslate.module.css
@@ -11,17 +11,17 @@
   /* stylelint-disable-next-line primer/spacing */
   padding: var(--blankslate-outer-padding-block) var(--blankslate-outer-padding-inline);
 
-  &[data-spacious='true'] {
+  &:where([data-spacious='true']) {
     --blankslate-outer-padding-block: var(--base-size-80);
     --blankslate-outer-padding-inline: var(--base-size-40);
   }
 
-  &[data-border='true'] {
+  &:where([data-border='true']) {
     border: var(--borderWidth-thin) solid var(--borderColor-default);
     border-radius: var(--borderRadius-medium);
   }
 
-  &[data-narrow='true'] {
+  &:where([data-narrow='true']) {
     max-width: 485px;
     margin: 0 auto;
   }
@@ -63,7 +63,7 @@
     --blankslate-outer-padding-block: var(--base-size-20);
     --blankslate-outer-padding-inline: var(--base-size-20);
 
-    &[data-spacious='true'] {
+    &:where([data-spacious='true']) {
       --blankslate-outer-padding-block: var(--base-size-44);
       --blankslate-outer-padding-inline: var(--base-size-28);
     }
diff --git a/packages/react/src/Heading/Heading.module.css b/packages/react/src/Heading/Heading.module.css
index d93ee2bc93c..eb758e66331 100644
--- a/packages/react/src/Heading/Heading.module.css
+++ b/packages/react/src/Heading/Heading.module.css
@@ -3,15 +3,15 @@
   font-size: var(--text-title-size-large);
   font-weight: var(--base-text-weight-semibold);
 
-  &[data-variant='large'] {
+  &:where([data-variant='large']) {
     font: var(--text-title-shorthand-large);
   }
 
-  &[data-variant='medium'] {
+  &:where([data-variant='medium']) {
     font: var(--text-title-shorthand-medium);
   }
 
-  &[data-variant='small'] {
+  &:where([data-variant='small']) {
     font: var(--text-title-shorthand-small);
   }
 }
diff --git a/packages/react/src/Link/Link.module.css b/packages/react/src/Link/Link.module.css
index 6fe46242c04..6f88d9e3ad2 100644
--- a/packages/react/src/Link/Link.module.css
+++ b/packages/react/src/Link/Link.module.css
@@ -20,16 +20,16 @@
   }
 
   /* Deprecated: but need to support backwards compatibility */
-  &[data-underline='true'],
+  &:where([data-underline='true']),
   /*
     Inline links (inside a text block), however, should have underline based on accessibility setting set in data-attribute
     Note: setting underline={false} does not override this
   */
-  [data-a11y-link-underlines='true'] &[data-inline='true'] {
+  [data-a11y-link-underlines='true'] &:where([data-inline='true']) {
     text-decoration: underline;
   }
 
-  &[data-muted='true'] {
+  &:where([data-muted='true']) {
     color: var(--fgColor-muted);
 
     &:hover {

From c0910992b897093c3d44392a466589234a28b2af Mon Sep 17 00:00:00 2001
From: Jon Rohan <yes@jonrohan.codes>
Date: Tue, 20 Aug 2024 16:40:41 -0700
Subject: [PATCH 2/2] Create early-lions-vanish.md

---
 .changeset/early-lions-vanish.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/early-lions-vanish.md

diff --git a/.changeset/early-lions-vanish.md b/.changeset/early-lions-vanish.md
new file mode 100644
index 00000000000..d3573699535
--- /dev/null
+++ b/.changeset/early-lions-vanish.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Refactor Link, Blankslate, Heading to use :where css