Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: update MFE to use dynamically injected theme #21

Merged
merged 1 commit into from
Aug 27, 2024

Conversation

ArturGaspar
Copy link
Member

@ArturGaspar ArturGaspar commented Aug 2, 2024

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://local.edly.io:8000/ and click Sign In
  6. See that theming works.
  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/paragon@$paragonVersion/dist/core.min.css",
                    "brandOverride": "https://cdn.jsdelivr.net/npm/@edx/brand-edx.org@$brandVersion/dist/core.min.css"
                }
            },
            "variants": {
                "light": {
                    "urls": {
                        "default": "https://cdn.jsdelivr.net/npm/@openedx/paragon@$paragonVersion/dist/light.min.css",
                        "brandOverride": "http://localhost:9100/light.min.css"
                    },
                    "default": True,
                    "dark": False
                }
            }
        }
    })

Deadline

None

Other information

Private-ref: https://tasks.opencraft.com/browse/BB-8118

Updates the MFE to use alpha version of frontend build, platform and paragon to
support runtime theming.
@ArturGaspar ArturGaspar force-pushed the artur/asu-moe/redwood-css branch from 955c7ec to 9fe723c Compare August 3, 2024 19:08
@tecoholic
Copy link
Member

@ArturGaspar 👍

  • I tested this: Verified the that the file was loaded as expected.
  • I read through the code
  • I checked for accessibility issues
  • Includes documentation

@ArturGaspar ArturGaspar merged commit ecf542e into asu-moe/redwood-css Aug 27, 2024
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants