Versions Compared

Key

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

...

  1. Install and enable the following plugin

Code Block
breakoutModewide
breakoutWidth760
languagepy
from tutormfe.hooks import MFE_APPS

@MFE_APPS.add()
def _use_design_tokens(mfes):
    for mfe_name, mfe in mfes.items():
        mfe["version"] = "teak-design-tokens"
    return mfes
  1. Rebuild the mfe image

Code Block
breakoutModewide
breakoutWidth760
languagebash
tutor images build mfe

...

  1. Install and enable the following plugin

Code Block
breakoutModewide
breakoutWidth760
languagepy
from tutor import hooks

hooks.Filters.ENV_PATCHES.add_item(
    (
        "mfe-dockerfile-post-npm-install",
        """
RUN npm install '@edx/brand@YOUR_ALIAS_HERE'
"""
    )
)

...

  1. Rebuild the mfe image

Code Block
breakoutModewide
breakoutWidth760
languagebash
tutor images build mfe

...

  1. Install and enable the following plugin

Code Block
breakoutModewide
breakoutWidth760
languagepy
import json
from tutor import hooks

paragon_theme_urls = {
    "variants": {
        "light": {
            "urls": {
                "default": "https://cdn.jsdelivr.net/npm/@openedx/paragon@$paragonVersion/dist/light.min.css",
                "brandOverride": "YOUR_BRAND_OVERRIDE_URL"
            }
        }
    }
}

fstring = f"""
MFE_CONFIG["PARAGON_THEME_URLS"] = {json.dumps(paragon_theme_urls)}
"""

hooks.Filters.ENV_PATCHES.add_item(
    (
        "mfe-lms-common-settings",
        fstring
    )
)

...

Using the tutor-contrib-paragon plugin

...

...

Creating a design tokens based brand package

...