Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[do not merge] DEMO: design tokens and CSS variables #764

Draft
wants to merge 18 commits into
base: master
Choose a base branch
from

Conversation

adamstankiewicz
Copy link
Member

@adamstankiewicz adamstankiewicz commented Jun 4, 2023

This PR demonstrates the usage of design tokens, CSS variables, and externally hosted CSS from @edx/paragon within the frontend-app-profile MFE.

It relies on:

The branch for @edx/frontend-build PR above is installed into the profile MFE in this PR for demo purposes. However, you must configure @edx/frontend-platform to use a local checkout of that @edx/frontend-platform PR above for things to work properly:

module.exports = {
  localModules: [
    { moduleName: '@edx/frontend-platform', dir: '../frontend-platform', dist: 'src' },
  ],
};

@@ -24,8 +24,8 @@ LOGO_TRADEMARK_URL=https://edx-cdn.org/v3/default/logo-trademark.svg
LOGO_WHITE_URL=https://edx-cdn.org/v3/default/logo-white.svg
FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico
COLLECT_YEAR_OF_BIRTH=true
APP_ID=''
MFE_CONFIG_API_URL=''
APP_ID='profile'
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note: not explicitly necessary unless you opt to define PARAGON_THEME_URLS within the MFE configuration API in edx-platform.

package.json Outdated
@@ -27,11 +28,11 @@
"extends @edx/browserslist-config"
],
"dependencies": {
"@edx/brand": "npm:@edx/brand-openedx@1.2.0",
"@edx/brand": "npm:@edx/brand-edx.org@2.2.0-alpha.9",
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

TODO: will need to make similar changes to @edx/brand-openedx so that the correct files exist in that NPM package, too.

* styles were modified to use Paragon's new CSS variables instead.
*
* See https://github.com/openedx/paragon/issues/2348 for more details.
*/
@import "~@edx/frontend-component-header/dist/index";
@import "~@edx/frontend-component-footer/dist/footer";

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ghassanmas added a commit to ghassanmas/frontend-app-learning that referenced this pull request Oct 6, 2023
  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

  - paragon alpha
  - openedx/frontend-build/pull/365
  - openedx/frontend-platform/pull/440
  - openedx/frontend-component-header/pull/351
  - 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.
@justinhynes
Copy link
Contributor

I checked in with @adamstankiewicz today to see if this is a PR that needs to stay open. TL;DR -- yes, it should stay open for now. It is an important reference for other folks in the community who are working on implementing this feature in other frontends.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Status: Backlog
Development

Successfully merging this pull request may close these issues.

3 participants