Applying a design token-based theme to the LMS (*NOT* MFEs)

I’m going crazy here - this must be documented but I just can’t find it. Design tokens are “a new way of comprehensive theming” and “There will be no overlap between the old theming system and Design Tokens”. There are several UIs that haven’t been migrated to MFEs yet, so presumably a new, design token-based theme should be able to apply to those “legacy” pages too, right? None of the links or presentations or anything made any specific mention of that. The tutor plugin seems to only add MFE_CONFIG["PARAGON_THEME_URLS"] to the lms/cms configs, which don’t seem to apply to the legacy LMS theming…

Everyone seems to know already exactly how it’s supposed to work but I (via Google) can’t find that info anywhere on the public internet. Help! Thanks!

Unfortunately design tokens are not implemented for legacy pages. We have a beta Catalog MFE debuting in Ulmo, and the Instructor Dashboard will be converted for Verawood. cc @brian.smith

To add some more context here, pre-design-tokens brand packages (based on pre-design-tokens versions of GitHub - openedx/brand-openedx) also only work with MFEs.

Any themes that modify non-MFE styles are doing so via addional overrides beyond the scope of the brand-openedx package.

indigo for example has:

// Initialize the Open edX Bootstrap theme
@import 'edx-bootstrap/sass/open-edx/theme';

which is referencing the old edx-bootstrap package.

We had this issues for installations that we maintain that where moving from comprehensive theming slowly into mfes. For that we wrote a comprehensive theme that had support for the paragon variables.

YMMV but you can take a look at ednx-saas-themes/edx-platform/bragi-children/css-runtime at master · eduNEXT/ednx-saas-themes · GitHub

1 Like

Thanks for the replies! So the expected workflow for someone wanting to start with ulmo (which is the only officially supported release from Tuesday, right?) is to learn the deprecated/obsolete edx-bootstrap system to implement that for the couple of pages/features that haven’t been migrated to MFEs yet, implement one’s desired graphics and theming with the new design tokens system and then try and get something generated and somehow inject/convert back to be compatible with the edx-bootstrap system?

Unfortunately, yes.

For what its worth, the implied criticism is valid: the road to complete the migration from Django templates to MFEs has taken much longer than anyone foresaw. The good news is that we’re almost there: in just a few more months it looks like we might be rid of all legacy pages.

(You’ll still need the legacy mechanism to style XBlocks - see this post I just answered - but that is a much bigger can of worms which we might - or might not - eventually solve with XBlocks 2.0.)

1 Like