Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Goals

  • Approve or find next steps for CSS in JS proposal

Discussion topics

Time

Presenter

Notes

Full meeting

Adam Butterworth (Deactivated)

Discuss: Adopt CSS in JS for styling

Short-term goals:

  • Make Paragon components portable without SCSS (unlocking upgrades in platform)

  • Colocate and clarify styles when creating Paragon components

  • Simplify our theming API

Long term goals:

  • Enable runtime theming and dark mode development

  • Eliminate Bootstrap as a Paragon dependency

  • Improve the developer experience working with Paragon (and therefore building microfrontends).

Suggested path forward:

  • Adopt styled-components as a CSS-in-JS solution

  • Adopt styled-system for theming and component styling (rather than bootstrap utility classes or custom SCSS)

  • Adopt the System UI Theme Specification as our theming API

  • First steps:

    • BREAKING: Create a ParagonProvider component that offers a default theme and must wrapper the root of the MFE application.

    • BREAKING: Add styled-components as a peer dependency that MFEs must install to use Paragon.

      • Incrementally convert Paragon components to use new styling system. Prioritize components needed in edx-platform.

Bump to next meeting

5 minutes

Bronwyn Hawkins (Deactivated)

  • Page template designs

...