Deliverables for re-theming in Q2 2020

The UI Team will deliver a couple key retheming assets during Q2 to enable product delivery squads to retheme their applications as easily as possible.

A common location for brand assets including Paragon theme and logo

https://github.com/edx/brand-edx.org#usage is a shared package containing edX brand assets. Installation and usage is described in the README https://github.com/edx/brand-edx.org and follows the proposal in OEP-48.

This package contains:

Logo

  • logo.svg

  • logo-trademark.svg

This package will contain the existing edX logo until we are ready to launch the brand in January.

Teams should change swap any inclusion of the edX logo from within their projects to instead include from this package. We will need to discuss a specific effort around logos in our shared headers and footers at the FEDX group in the coming weeks.

Paragon Theme

/paragon/theme.scss
/paragon/overrides.scss

The new SASS theme for Paragon. It is Bootstrap compatible so it should work with any Bootstrap based styling.

The usage is described in https://github.com/edx/brand-edx.org and https://edx.github.io/paragon/ docs. It looks like below:

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

This is usage contrasts to most MFEs which include Paragon SASS and the edX theme together. This method of inclusion is no longer supported with the new edX theme.

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

TBD Favicon

  • favicon.ico

 

Applying the new theme

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.

$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.

Implications for teams building features in the meantime.

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.

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.

Semantic Color

Legacy

New

Semantic Color

Legacy

New

Primary

Blue

Dark Green “Elm”

Grays
Defined in Bootstrap Gray-100 through Gray-900

Grays

Tans “Limestone”

Brand (New)

None

Red “Garnet“

Warning
Danger
Info
Success

Yellow
Red
Light Blue
Green

Oxide Yellow
- no change -
Isotope Blue
- no change -