Increase font size for component description in reference docs

[djsauble]

Description

Takes the Intro module styling and uses it for the component description in the reference docs.

Screenshot(s)

Before

After

[jerelmiller]

Now that I look at the preview, it looks like any descriptions with bullet points don't have the proper text styles. You'll see in this screenshot for the Button component that the bullets have black text with a different font-size. Is that something you want to address in this PR?

[jerelmiller]

I'm not sure why the check didn't complete, but it looks like the PR build did succeed. Link is here: https://pr-104.dlyi50rq9kt6c.amplifyapp.com

[djsauble]

@jerelmiller Looks like this is because the description can contain tags other than <p> (e.g. <ul>).

Should I try to enumerate all the different sorts of tags that can appear here, or just use a wildcard selector?

:global {
  .intro-text {
    * {
      color: var(--color-neutrals-600);
      font-size: 1.125rem;
      line-height: 2rem;
    }
  }
}

[jerelmiller]

Rather than targeting the p tag inside, is there anything preventing us from just targeting the container itself with these styles?

:global {
  .intro-text {
      color: var(--color-neutrals-600);
      font-size: 1.125rem;
      line-height: 2rem;
  }
}

[djsauble]

@jerelmiller I tried that, but we're defining styles on the <p> and <ul> tags directly (in styles.scss) which overrides any styles we might set on the parent element.

Maybe we can pair on this tomorrow if you have time.

[nr-opensource-bot]

🎉 This PR is included in version 1.0.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀