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

  1. Install the main branch of the exemplar-blocks, setup a card-carousel and keypoint blocks, check their preview as the reference.
  2. Setup the edx-simple-theme (build and serve on localhost:3000) from https://github.com/open-craft/edx-simple-theme/pull/59
  3. 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
    )
)
  1. Install this MR's branch in the LMS and CMS containers
  2. Reload the same xblocks and verify that the styles match the expected WGU styles.

Screenshots

Un-themed

image

image

With WGU Theme

image

image

Edited by Arunmozhi P

Merge request reports

Loading