Create a theming system that replaces comprehensive theming for the current Tutor-supported MFEs

[jmakowski1123]

Problem

The MFE theming and branding methods are not compatible with comprehensive theming. “It was something that we all kind of agreed on and now we are completely ignoring it.” This has a direct and negative impact on provider clients, as each customer may require different branding and modifications.

Product/Platform Value

Allowing for simple across-the-board theming and extensibility has a direct impact on adoption: the easier it is to do, the more users the platform will have.

Acceptance Criteria

Create a theming system that replaces comprehensive theming, in particular as it concerns platform-wide applicability. Start with the 5 currently supported Tutor MFEs.

Related work

David Joy started laying out the general problem in this draft OEP:

• Micro-frontend customization

However, it has not been pushed forward.

OpenCraft has begun preliminary work on solution 1) via these two co-dependent ADRs:

• docs: ADR to expose all SCSS variables that MFEs use as CSS variables [BB-6307] paragon#1388
• docs: ADR that proposes a common stylesheet for all MFEs frontend-platform#351

David Joy has proposed work on an initial iframe-based extension system via this OEP:

• Micro-frontend plugins

Contingencies

The scope of this issue is limited to the Tutor-supported MFEs. A phase II can be implemented once XXX is complete and the remaining MFE conversions are completed.

This issue should be groomed alongside #423 and openedx/platform-roadmap#24

Sub-tasks

• Discovery: Reconcile Opencraft's work on MFE Theming with 2U initiatives #475

[jmakowski1123]

In progress with Kshitij at OC

[jmakowski1123]

May be a dupe of openedx/platform-roadmap#144

[arbrandes]

The solution is likely to come about as a part of openedx/open-edx-proposals#410.

[arbrandes]

I think it's safe to close this. The customizability story is well under way with plugin slots, design tokens, and the upcoming MFE modularity work.