Using Teak Design Tokens branches

The branches

Using these branches in Tutor

Install and enable the following plugin

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

Rebuild the mfe image

tutor images build mfe

Note: if you run into issues rebuilding the mfe image you can try using --no-cache.

Using design tokens based brand packages

Using `npm` aliasing

Install and enable the following plugin

from tutor import hooks

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

To test this with a simple example brand package you can replace YOUR_ALIAS_HERE with github:brian-smith-tcril/brand-example-purple#174be977c9f8c7aa11591f4c6887506da72d8191.

Rebuild the mfe image

tutor images build mfe

Note: if you run into issues rebuilding the mfe image you can try using --no-cache.

Using `jsdelivr`

Install and enable the following plugin

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
    )
)

To test this with a simple example brand package you can replace YOUR_BRAND_OVERRIDE_URL with https://cdn.jsdelivr.net/gh/brian-smith-tcril/brand-example-purple@bb6b7797e629c96192d0676a2cbd879b11488fa0/dist/light.min.css

Using the `tutor-contrib-paragon` plugin

https://github.com/openedx/openedx-tutor-plugins/tree/main/plugins/tutor-contrib-paragon#static-hosting

Creating a design tokens based brand package

For information on how to create a design tokens based brand package see brand-openedx/docs/how-to/design-tokens-support.rst at master · openedx/brand-openedx · GitHub