feat: update MFE to use dynamically injected theme

[ArturGaspar]

Description

Updates the MFE to use alpha version of frontend build, platform and paragon to support runtime theming.

Supporting information

https://openedx.atlassian.net/wiki/spaces/BPL/pages/3770744958/Migrating+MFEs+to+Paragon+design+tokens+and+CSS+variables

Testing instructions

1. Clone https://github.com/open-craft/edx-simple-theme and check out branch artur/design-tokens-update.

2. Build it (npm ci && npm run build).

3. Run a local server from the dist directory (e.g. python3 -m http.server 9100, use same port for brandOverride in MFE_CONFIG below).

4. Set MFE_CONFIG as in example Tutor plugin below.

5. Go to http://apps.local.edly.io:1994/gradebook/course-v1:OpenedX+DemoX+DemoCourse (replace course id as applicable).

6. See that theming works.

   • Note that the gradebook does apply very little theming by default and looks "wrong".

   • Gradebook default

     

   • Gradebook with this PR

     

7. Check that http://localhost:9100/light.min.css was loaded.

Example Tutor plugin to set MFE_CONFIG

name: mfe_config
version: 0.1.0
patches:
  mfe-lms-common-settings: |
    MFE_CONFIG.update({
        "PARAGON_THEME_URLS": {
            "core": {
                "urls": {
                    "default": "https://cdn.jsdelivr.net/npm/@openedx/[email protected]/dist/core.min.css",
                    "brandOverride": "https://cdn.jsdelivr.net/npm/@edx/[email protected]/dist/core.min.css"
                }
            },
            "variants": {
                "light": {
                    "urls": {
                        "default": "https://cdn.jsdelivr.net/npm/@openedx/[email protected]/dist/light.min.css",
                        "brandOverride": "http://localhost:9100/light.min.css"
                    },
                    "default": True,
                    "dark": False
                }
            }
        }
    })

Deadline

ASAP

Other information

Internal-ref: https://tasks.opencraft.com/browse/BB-9023

[0x29a]

👍

• I verified that the gradebook looks exactly the same as on the second screenshot and that styles from light.min.css are applied.
• I read through the changes.