Add HDS class names to the `:any-link:not(…)` CSS selector

didoo commented 2 years ago

Following the conversation in this Slack thread and @jesdavpet suggestion, this PR adds the HDS classnames to the :any-link:not(…) CSS selector to avoid using anti-overrides to (see for example this PR https://github.com/hashicorp/cloud-ui/pull/2925) to counter the effect of that global CSS declaration on the HDS components (the declaration has a higher specificity!)

Notice: I have decided to extract the CSS selectors in a Sass variable, so it can be imported via @use in Cloud UI. In this way it becomes a centralized place where these selectors are added/updated, without the need to manually update alsoall the local :any-link:not(.pds-button) declarations in Cloud UI.

// needed for the "$hds-link-overrides-selectors" variable used below
@use "pds/overrides" as overrides;

// make all link semi-bold weight
:any-link:not(.pds-button, #{overrides.$hds-link-overrides-selectors}) {
  font-weight: Font.weight('Semi Bold');
  transition: color ease-in-out 75ms;
}

vercel[bot] commented 2 years ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
structure	✅ Ready (Inspect)	Visit Preview	Jul 21, 2022 at 10:37AM (UTC)

didoo commented 1 year ago

i am approving this b/c the implementation looks good to me. it feels strange to implement hds selectors into this repo but i think it's okay because we're in the process of deprecation.

These are not() HDS selectors!!

Just kidding 🤣

didoo commented 1 year ago

I'd be interested to know a bit more about the history on why the override is needed (what style it's fighting against).

@KristinLBradley some references:

if want/need we can go in more details.

hashicorp / structure

Add HDS class names to the `:any-link:not(…)` CSS selector #108