Paragon design tokens and css variables

Working Groups Frontend
,
1

Hi folks

During the last months, the 2U and Raccoon Gang teams have been working on an initiative to use the design system and CSS variables as default in the Frontend. We have supported this through testing, as well as Opencraft; now we want to extend the invitation to the community members to support with feedback and use this topic to report issues to find solutions together.

To get more context you can check:

2 Likes
2

Hello @dcoc following this guide:

https://openedx.atlassian.net/wiki/spaces/BPL/pages/3770744958/Migrating+MFEs+to+Paragon+design+tokens+and+CSS+variables?focusedCommentId=3838443522

I think we have to select a random MFE, probably it’s master branch, and then change it’s deps, as per the guide above:

  • frontend-platform
  • frontend-build
  • paragon
  • footer/header

All of these aboves we intall their corsponding branch/PR that is listed in the wiki page above

Am I right with that? and do we have an example MFE of which it’s depenceies match the one mentioned above, i.e. (_profile MFE spesfic branch of which it’s depencies are changed to meet the one mentioned above).

3

Hi @ghassan

Yes, that’s correct.

This one [do not merge] DEMO: design tokens and CSS variables by adamstankiewicz · Pull Request #764 · openedx/frontend-app-profile · GitHub could be an example, in this PR the frontend-build dependency is changed by package.json, and the other ones are tested using module.config.js.

1 Like
4

Thanks for the quick reply @dcoa, I will test the learning MFE and compare it’s performace/lighthouse with and without the design tokens. I will report the result and the steps here.

1 Like
5

[Update] I have opened a draft PR here [DRAFT] feat: add support to paragon design tokens by ghassanmas · Pull Request #1203 · openedx/frontend-app-learning · GitHub, I sadly didn’t had luck running it, but below you can find my finding/feedback as qouted from the PR.

This PR purpose is to test/demo parago design tokens simliar
to this one for the profile openedx/frontend-app-profile/pull/764

it override the following depns as seen in package.json

Conclousion so far:

  • There is an extra library that learning depends on which needs to support paragon; frontend-lib-learning-assistant and also frontend-lib-special-exams
  • It would be great to have a gudie or a document to look at, while doing the conversion that would map variable from who it was used/named before to the name in design tokens
  • I was stuck in the end with compliation error, that wepack couldn’t find Modal exported from paragon.
1 Like