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 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 {