Page Comparison

...

06 Nov 2020 A new SASS theme for Paragon.

What is it?

A new SASS theme for use with Paragon or Bootstrap-based pages.

What will this theme change?

This theme will contain only non-breaking changes. It will contain new:

Colors
Fonts and typography
Link styles
Button styles
Border radiuses on a variety of elements (forms, dropdowns, etc)

How will teams consume it?

This theme will live in a the new brand-edx.org pages. The usage guidelines will be added there with the new theme, but usage will likely be:

Code Block

language	sass

// frontend-app-*/src/index.scss
@import '~@edx/brand/theme.scss';
@import '~@edx/paragon/core/core.scss';
@import '~@edx/brand/overrides.scss';

This is in contrast to most MFEs which include Paragon SASS and the edX theme together. This method of inclusion will be deprecated soon:

Code Block

language	sass

// frontend-app-*/src/index.scss
@import '~@edx/paragon/scss/edx/theme.scss';

What do teams need to do to prepare to use this asset?

Consolidating styles on to Paragon vs. app-specific styles as much as possible will increase the impact of this theme change for teams.
Usage of color variables in app SASS like $blue should be swapped with the semantic variables like $primary.

Code Block
$blue -> $primary or theme-color('primary') $red -> $error or theme-color('error') $yellow -> $warning or theme-color('warning') $green -> $success or theme-color('success')

For a full list see the color variables in Paragon.

In general, I expect this to be a relatively painless swap. Please reach out to Adam Butterworth (Deactivated) if you find issues when the time comes.

...

If your team is building features in Paragon-based UIs before these retheme assets are delivered, avoid adding custom styling for fonts or buttons and instead ensure that they leverage Paragon components and styles.

For colors: If a design contains use of new colors like our Dark Green “Elm” or Tan “Limestone” color, feel free to add custom styling. If designs contain new colors, know that some colors will be seamlessly changed with the new Paragon theme (Primary color blue → red). For building them in can be deferred. For other colors Paragon doesn’t have any similar brand color concepts built into it so no seamless transition is possible yet. Garnet red however will be the “primary” color in the new Paragon theme so all of our dark blues should seamlessly flip with the new theme.

Color	Should we build to spec now?
Dark Greens “Elm”	Build now. There’s no equivalent color in Paragon themes.
Tans “Limestone”	Build now. There’s no equivalent color in Paragon themes.
Red “Garnet“	Unnecessary. This color will be primary in the next theme. Today our primary is a deep blue.
Any semantic color: warning yellow, error red, info blue, success green	No. These colors will change with the new theme.

Versions Compared

Old Version 3

New Version 4

Key