Refactor Link, Blankslate, Heading to use :where css (#4858)

* Refactor Link, Blankslate, Heading to use :where css

* Create early-lions-vanish.md

Author: jonrohan

.changeset/early-lions-vanish.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Refactor Link, Blankslate, Heading to use :where css

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);
     }

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);
   }
 }

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 {