refactor: adapt markup of card-carousel & keypoint blocks for theming
Description
The changes focus on making the component theme-able, by relying on CSS variables.
The WGU specific look relies on the values introduced in https://github.com/open-craft/edx-simple-theme/pull/59
Testing Instructions
- Install the main branch of the exemplar-blocks, setup a card-carousel and keypoint blocks, check their preview as the reference.
- Setup the edx-simple-theme (build and serve on localhost:3000) from https://github.com/open-craft/edx-simple-theme/pull/59
- Use the following tutor-plugin to load the theme
from tutor import hooks
import json
paragon_theme_urls = {
"core": {
"urls": {
"default": "https://cdn.jsdelivr.net/npm/@openedx/paragon@$paragonVersion/dist/core.min.css",
"brandOverride": "http://localhost:3000/core.css",
}
},
"default": {
"light": "light",
},
"variants": {
"light": {
"urls": {
"default": "https://cdn.jsdelivr.net/npm/@openedx/paragon@$paragonVersion/dist/light.min.css",
"brandOverride": "http://localhost:3000/light.min.css"
}
}
}
}
pargon_theme_config = f"""
MFE_CONFIG["PARAGON_THEME_URLS"] = {json.dumps(paragon_theme_urls)}
"""
hooks.Filters.ENV_PATCHES.add_item(
(
"mfe-lms-common-settings",
pargon_theme_config
)
)- Install this MR's branch in the LMS and CMS containers
- Reload the same xblocks and verify that the styles match the expected WGU styles.
Screenshots
Un-themed
With WGU Theme
Edited by Arunmozhi P



