Shared theme code across MFEs

[xitij2000]

Abstract

Update all MFEs to use a shared consolidated SCSS codebase that can be deployed separately from the MFE. This will make theme testing, building, and deployment, much quicker, easier, and more flexible.

Context & Background

Currently, each MFE build and bundles its own SCSS code, and it is deployed separately with each MFE even though most of the code is shared.

We should have each MFE load a shared common theme that can be centrally deployed and updated. If an MFE needs some custom SCSS it should not have any dependencies on theme variables, so it can be loaded separately.

This has been discused before in discoveries and on the forums

Scope & Approach

The scope of this work is to end up with a single consolidated theme that can be loaded statically or dynamically from any MFE.

Value & Impact

By deduplicating and consolidating common theme code, we make them easier to cache, which in turn makes MFEs load quicker. It is also easier and quicker to deploy the theme code since the base theme is built and deployed once for all MFEs.

This also unlocks the possibility of switching themes at run time (light/dark/high contrast) and unlocking per-site, per-org, per-user themes.

Milestones and/or Epics

Milestone 1: Reduce/remove usage of SCSS in MFEs

• For all MFEs remove as much custom SCSS as possible, and move it to paragon/bootstrap classes
• Especially eliminate any SCSS that uses theme variables.

Milestone 2: Load shared theme across all MFEs

• Allow building and deploying a theme outside the MFE that can nevertheless be loaded by the MFE.
• Enable MFEs to load a common shared theme

Named Release

Oak

Timeline

The aim is to have it possible to load a central theme by Oak

Proposed By

OpenCraft

Additional Info

No response

Subtasks

Preview Give feedback

1. Expose PARAGON_VERSION as a global variable via @edx/frontend-build so it's accessible via MFEs and JS libraries paragon#2321
   +0
   
2. feat: adds support for loading external theme CSS for MFEs frontend-platform#440
   +0
3. feat: expose PARAGON as a global variable frontend-build#365
   +0

[github-actions]

Thanks for your submission, @openedx/open-edx-project-managers will review shortly.

[gabrieldamours]

@jmakowski1123

We were about to submit this, but the author notices that it might be a duplicate of #25. Should we consolidate/reconcile both tickets and submit just this one? cc. @xitij2000

[jmakowski1123]

Submitting this one is fine. I'll close #25 in favor of this ticket. #25 was just the opportunity brief created for the initiative back in 2020 - this ticket is tracking work already underway for the same project, so let's go with this one. Thanks!

[jmakowski1123]

Milestone 1:
Granular tracking of ADR reviews: openedx/axim-engineering#284

[gabrieldamours]

Hi Jenna, I don't know if I was the intended recipient for this email, but should I share this with someone in our team? Thanks,

…

On Thu, Jul 7, 2022 at 2:12 PM Jenna Makowski ***@***.***> wrote: Granular tracking of ADR reviews: openedx/axim-engineering#284 <openedx/axim-engineering#284> — Reply to this email directly, view it on GitHub <#144 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AH4TAKLMGPKPRTY6WTY72XLVS4MXDANCNFSM5USJLVUQ> . You are receiving this because you commented.Message ID: ***@***.***>

-- Gabriel D'Amours (he/him) Admin Specialist *OpenCraft <https://opencraft.com>* My Location: Quebec City, Canada (GMT-5) ***@***.***

[jmakowski1123]

Hi Gabriel, I think we are learning about github features together in real time :) I'm assuming you got that ping as you "own" the parent ticket, submitted through the platform-roadmap repo? I just added that comment and link as an inform, as Adolfo is working on the ADR reviews connected with that workstream. We can look into how notification flows work, if you don't wnat to be notified on the tickets you submit? Best, Jenna On Fri, Jul 8, 2022 at 5:46 AM gabrieldamours ***@***.***> wrote:

…

Hi Jenna, I don't know if I was the intended recipient for this email, but should I share this with someone in our team? Thanks, On Thu, Jul 7, 2022 at 2:12 PM Jenna Makowski ***@***.***> wrote: > Granular tracking of ADR reviews: openedx/axim-engineering#284 > <openedx/axim-engineering#284> > > — > Reply to this email directly, view it on GitHub > < #144 (comment) >, > or unsubscribe > < https://github.com/notifications/unsubscribe-auth/AH4TAKLMGPKPRTY6WTY72XLVS4MXDANCNFSM5USJLVUQ > > . > You are receiving this because you commented.Message ID: > ***@***.***> > -- Gabriel D'Amours (he/him) Admin Specialist *OpenCraft <https://opencraft.com>* My Location: Quebec City, Canada (GMT-5) ***@***.*** — Reply to this email directly, view it on GitHub <#144 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AWWQZC4VXYLKSKKUMDNPJO3VTAIIRANCNFSM5USJLVUQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>

-- Jenna Makowski Senior Product Manager The Center For Reimagining Learning Pronouns: She/Her/Hers Based in Denver, Colorado (GMT-7)

[arbrandes]

Linking to openedx/paragon#1623 for reference. That's where the Design Token initial doc was committed.

[arbrandes]

This should be considered when evaluating openedx/open-edx-proposals#410.

[arbrandes]

I took the liberty of adding openedx/frontend-platform#440 and related issues/PRs as subtasks to this one.