# Paragon design tokens and css variables **URL:** \ **Category:** Frontend\ **Tags:** paragon, design\ **Created:** [August 18, 2023, 5:40am UTC](https://discuss.openedx.org/t/paragon-design-tokens-and-css-variables/10987 "2023-08-18T05:40:31Z")\ **Posts on this page:** 5\ **Page:** 1
**Author:** ![dcoa](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/dcoa/32/3246_2.png) [@dcoa](https://discuss.openedx.org/u/dcoa)\ **Post date:** [August 18, 2023, 5:40am UTC](https://discuss.openedx.org/t/paragon-design-tokens-and-css-variables/10987/1 "2023-08-18T05:40:31Z")
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: - [Scaling the Paragon design system's theming and styles architecture with design tokens](https://discuss.openedx.org/t/scaling-the-paragon-design-systems-theming-and-styles-architecture-with-design-tokens/9199) - [Migrating MFEs to Paragon design tokens and CSS variables - Design System Documentation - Open edX Community Wiki](https://openedx.atlassian.net/wiki/spaces/BPL/pages/3770744958/Migrating+MFEs+to+Paragon+design+tokens+and+CSS+variables?focusedCommentId=3838443522) - [Slack](https://openedx.slack.com/archives/C04BM6YC7A6/p1688592563309049) ---
**Author:** ![ghassan](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/ghassan/32/2779_2.png) [@ghassan](https://discuss.openedx.org/u/ghassan)\ **Post date:** [August 21, 2023, 12:20pm UTC](https://discuss.openedx.org/t/paragon-design-tokens-and-css-variables/10987/2 "2023-08-21T12:20:50Z")
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](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_). ---
**Author:** ![dcoa](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/dcoa/32/3246_2.png) [@dcoa](https://discuss.openedx.org/u/dcoa)\ **Post date:** [August 21, 2023, 10:09pm UTC](https://discuss.openedx.org/t/paragon-design-tokens-and-css-variables/10987/3 "2023-08-21T22:09:33Z")
Hi @ghassan > [@ghassan](#): > > Am I right with that? Yes, that’s correct. > [@ghassan](#): > > do we have an example MFE of which its dependencies match the one mentioned above, i.e. (\__profile MFE specific branch of which it’s dependencies are changed to meet the one mentioned above_). This one [[do not merge] DEMO: design tokens and CSS variables by adamstankiewicz · Pull Request #764 · openedx/frontend-app-profile · GitHub](https://github.com/openedx/frontend-app-profile/pull/764) 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`. ---
**Author:** ![ghassan](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/ghassan/32/2779_2.png) [@ghassan](https://discuss.openedx.org/u/ghassan)\ **Post date:** [August 22, 2023, 7:06am UTC](https://discuss.openedx.org/t/paragon-design-tokens-and-css-variables/10987/4 "2023-08-22T07:06:44Z")
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. ---
**Author:** ![ghassan](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/ghassan/32/2779_2.png) [@ghassan](https://discuss.openedx.org/u/ghassan)\ **Post date:** [October 6, 2023, 9:02am UTC](https://discuss.openedx.org/t/paragon-design-tokens-and-css-variables/10987/5 "2023-10-06T09:02:22Z")
[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](https://github.com/openedx/frontend-app-learning/pull/1203), 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](https://github.com/openedx/frontend-app-profile/pull/764) > > it override the following depns as seen in package.json > > - paragon alpha > - [feat: expose `PARAGON` as a global variable frontend-build#365](https://github.com/openedx/frontend-build/pull/365) > - [feat: adds support for loading external theme CSS for MFEs frontend-platform#440](https://github.com/openedx/frontend-platform/pull/440) > - [[BD-46] feat: added support Paragon design tokens frontend-component-header#351](https://github.com/openedx/frontend-component-header/pull/351) > - [[BD-46] feat: added support Paragon design tokens frontend-component-footer#303](https://github.com/openedx/frontend-component-footer/pull/303) > > 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.