fix: improve styles of the two column block, incorporating design tokens
Description
- improve display of the bulleted lesson list form in the editor (alignment and smaller delete buttons)
- make the styling match the designs - latest designs at https://www.figma.com/design/kHA0KOTrJyj1vq40RMSxKf/WGU-Design-System--WIP-?node-id=124-1067&t=HlQboO9Bh4lNoZnz-0 (private link)
Supporting information
Private-ref: https://tasks.opencraft.com/browse/BB-10774
Testing instructions
First, set up the wgu theme:
- clone and checkout https://github.com/open-craft/edx-simple-theme/pull/60
- in that repository, run
npm run build && npm run serve - switch to your devstack and add the tutor plugin described at https://github.com/open-craft/edx-simple-theme#using-a-local-theme
- restart your devstack
OR use the CI-deployed preview urls for the theme brandOverrides, instead of serving the theme locally, so the tutor plugin would look like:
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": "https://theme-preview.sfo3.digitaloceanspaces.com/pr/60/core.css",
}
},
"default": {
"light": "light",
},
"variants": {
"light": {
"urls": {
"default": "https://cdn.jsdelivr.net/npm/@openedx/paragon@$paragonVersion/dist/light.min.css",
"brandOverride": "https://theme-preview.sfo3.digitaloceanspaces.com/pr/60/light.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
)
)
Then you can test this:
- add some example two column blocks, ensuring you cover all the different column types
- verify they match the designs - latest designs at https://www.figma.com/design/kHA0KOTrJyj1vq40RMSxKf/WGU-Design-System--WIP-?node-id=124-1067&t=HlQboO9Bh4lNoZnz-0 (private link)
- in the code, verify that as many values as possible are controlled by theme variables, not hardcoded (NOTE: currently there are plenty hardcoded; these are due to limitations of the WIP nature of the theming, and they are commented inline)
Edited by Samuel Allan