feat: update the paragon theme with new branding

[abutterworth]

See the theme in this PR applied to the Paragon docsite here: https://paragon-edx-next.netlify.app/

Notable changes:

• The $base-font-size is now 18px instead of 16px.
• There is a "brand" theme-color that is undocumented (since this PR doesn't affect the Paragon doc site). You can preview the brand button by using the interactive code editor and adding a Button with the variants: variant="brand" or variant="outline-brand"

[adamstankiewicz]

Following up from our Slack conversation, it looks the SearchField component styles could use some love with the new theme.

looks like the input has the gray background until its focused, but the search icon button is styled to be white, so it looks kinda strange. also, looks like there's a tiny overlap of the rounded corners on the left side. i'm guessing these issues are just with how the SearchField is built/styled, not necessarily the theme itself.

We could override the theme to address the SearchField styles for now, but I think the true fix for this will be in Paragon itself.

[adamstankiewicz]

Should the Button with variant="outline-light" have light text? The a11y contrast ratio is only 1.09:1, well below the WCAG AA standard ratio of 4.5:1 regular sized text.

See https://paragon-edx-next.netlify.app/components/button. Actually, similar question on a11y color contrast ratio for all the button variants; looks like variant="outline-warning" fails WCAG AA as well (i.e., 1.57:1) - there may be others.

[adamstankiewicz]

Is it intentional for .btn-link to not be underlined? In the past, we've been asked to underline .btn-link elements by UX and/or a11y since it doesn't have it by default. But this request hasn't always been consistent.

I'm game for either case, just that we're consistent about it :)

[abutterworth]

This is intentional. Non-underlined links buttons are usually sitting next to a regularly styled one. My understanding is that in the context of a "nav" or place where it should be obvious that they're interactive the underline is unneeded

[adamstankiewicz]

👍 Got it. Yeah, in the past, we've been asked to underline link buttons that sit next to a regularly styled one.

[abutterworth]

Should the Button with variant="outline-light" have light text? The a11y contrast ratio is only 1.09:1, well below the WCAG AA standard ratio of 4.5:1 regular sized text.

See https://paragon-edx-next.netlify.app/components/button. Actually, similar question on a11y color contrast ratio for all the button variants; looks like variant="outline-warning" fails WCAG AA as well (i.e., 1.57:1) - there may be others.

We worked with @wittjeff on this, the contrast requirement doesn't apply to the borders.

[davidjoy]

Can we add any guidance here on why you might prefer one or the other?

[abutterworth]

Added!

[davidjoy]

wut

[abutterworth]

It's a weird issue. You need the # in the string template where $icon is defined in order to pipe the color into the url encoded svg, but then the # needs to actually be url encoded.

[muselesscreator]

LGTM, though the alert styling without the borders is lower-contrast and hard to see, fading into the white background for me.
(might be affected by my being somewhat color-blind)

[edx-semantic-release]

🎉 This PR is included in version 1.1.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[adamstankiewicz]

We worked with @wittjeff on this, the contrast requirement doesn't apply to the borders.

@abutterworth I was referring to the button text colors, not the borders.

[abutterworth]

Oh sorry yea. That button styling is for use on dark backgrounds. Today's light button is similar I think. We shouldn't use it at a rule though. I need to add a set of buttons for our dark palette