[BD-46] feat: added support Paragon design tokens #351

PKulkoRaccoonGang · 2023-06-15T18:31:18Z

Important

Update frontend-platform to a version compatible with Paragon 23.
Needs openedx/frontend-platform#689 to be merged.

Issue: openedx/paragon#2348

openedx-webhooks · 2023-06-15T18:31:22Z

Thanks for the pull request, @PKulkoRaccoonGang!

This is currently a draft pull request. When it is ready for our review and all tests are green, click "Ready for Review", or remove "WIP" from the title, as appropriate.

adamstankiewicz · 2023-07-14T12:09:21Z

example/index.scss

+@import url("https://cdn.jsdelivr.net/npm/@edx/brand-edx.org@alpha/dist/core.min.css");
+@import url("https://cdn.jsdelivr.net/npm/@edx/brand-edx.org@alpha/dist/light.min.css");
+@import "@edx/paragon/styles/scss/core/core";
+@import "@edx/paragon/styles/css/themes/light/index.css";


[clarification] As is, I believe these would be importing duplicate styles? For example, @import "@edx/paragon/styles/css/themes/light/index.css"; is largely the same import as @import url("https://cdn.jsdelivr.net/npm/@edx/brand-edx.org@alpha/dist/light.min.css"); above.

If we're importing the core.css and light.css files via example/index.scss, we should likely rely on the local imports from @edx/paragon. Take a look at the draft migration documentation for an example of what I imagine MFEs would need to do to import the compiled Paragon CSS locally: https://openedx.atlassian.net/wiki/spaces/BPL/pages/3770744958/Migrating+MFEs+to+Paragon+design+tokens+and+CSS+variables#Using-locally-installed-Paragon-CSS

Alternatively, we could also consider configuring the example MFE to utilize the @edx/frontend-platform approach to injecting the Paragon CSS from external CDN url like jsDelivr once openedx/frontend-platform#440 merges.

These imports have been changed, now it looks like this:

@use "@openedx/paragon/dist/core.min.css" as paragonCore; @use "@openedx/paragon/dist/light.min.css" as paragonLight;

Alternatively, we could also consider configuring the example MFE to utilize the @edx/frontend-platform approach to injecting the Paragon CSS from external CDN url like jsDelivr once openedx/frontend-platform#440 merges.

We will get a working version for testing here: openedx/frontend-app-discussions#723

adamstankiewicz · 2023-07-14T12:17:11Z

src/index.scss

+@import url("https://cdn.jsdelivr.net/npm/@edx/brand-edx.org@alpha/dist/core.min.css");
+@import url("https://cdn.jsdelivr.net/npm/@edx/brand-edx.org@alpha/dist/light.min.css");
+@import "@edx/paragon/styles/scss/core/core";
+@import "@edx/paragon/styles/css/themes/light/index.css";


I think we should consider whether there are any performance concerns around coupling Paragon's styles with these shared components. For example, if both these component includes all of Paragon's CSS and the consuming MFE includes all of Paragon's CSS, will the user essentially need to download all of Paragon's CSS twice?

I'm wondering if it would make sense for the shared components to be de-coupled from Paragon styles, with the assumption that these components will always be used within an application that provides Paragon styles externally from the component. A potential concern with this proposed approach may be around versioning; that is, is there a risk that developers could run into version discrepancies between what this component expects/uses and what version of Paragon's CSS is provided by the consuming/hosting MFE?

If we do leave Paragon styles coupled with the shared component, it may be a good to exercise to quantify/benchmark the performance implications of both approaches?

What do you think?

Personally, I feel like we should de-couple Paragon styles from these components. The biggest problem with leaving Paragon's styles here is that we're dealing with CSS now - if we import Paragon's CSS variables here, then they will override all CSS variables from MFE's Paragon and this will affect the whole MFE (it will happen because header / footer styles are usually imported last in the MFE). This will basically mean that header component is in charge of the theme for the whole platform.

And even if we switch import order in the MFE, it will just mean that MFE will override all CSS used by header component.

I think if we're migrating to CSS, then MFEs should be a single source of truth for the styles in the platform. People should also understand that they cannot override CSS variables in their styles because that will likely affect this variable across all styles.

As for the problem with version discrepancies... The first thing we could do is to advise engineers to only use global tokens from Paragon in SCSS files in header / footer components as they are less likely to change in Paragon. But the main problem is with components I guess, because they use CSS classes from Paragon which are a lot likely to change between versions, not sure what to do here. The only long-term solution that comes to mind is to de-couple header / footer components even further from Paragon and just do not use Paragon's component's here at all. And create new components that will re-use only Paragon's CSS variables so that Paragon would still control the theme of the header / footer.

Another idea is to move header and footer components into Paragon so they always share the version? I might be crazy though haha

It seems that in 2025 we have already decided to abandon the imports of styles provided by Paragon and have completely trusted the single source of styles - MFE.

A potential concern with this proposed approach may be around versioning; that is, is there a risk that developers could run into version discrepancies between what this component expects/uses and what version of Paragon's CSS is provided by the consuming/hosting MFE?

Such a problem can occur. Perhaps with the advent of Webpack Module Federation, we will be able to eliminate the version control issues for our microfrontends and manage/update all dependencies from a single place. At the moment, the only way, as it seems to me, to identify and fix potential issues is to visually check the correctness of the header display. Fortunately, it is just a small component.

adamstankiewicz · 2023-07-14T13:07:34Z

example/index.scss

-@import "@edx/brand/paragon/overrides";
+@import url("https://cdn.jsdelivr.net/npm/@edx/brand-edx.org@alpha/dist/core.min.css");
+@import url("https://cdn.jsdelivr.net/npm/@edx/brand-edx.org@alpha/dist/light.min.css");
+@import "@edx/paragon/styles/scss/core/core";


Should this be importing the core.css rather than SCSS?

Diana corrected it and now we have this version: 4ef75fe

@use "@openedx/paragon/dist/core.min.css" as paragonCore; @use "@openedx/paragon/dist/light.min.css" as paragonLight; @import "@edx/frontend-component-header/index";

adamstankiewicz · 2023-07-21T13:20:44Z

package.json

@@ -55,7 +55,7 @@
    "redux-saga": "1.2.3"
  },
  "dependencies": {
-    "@edx/paragon": "20.44.0",
+    "@edx/paragon": "21.0.0-alpha.38",


Consider moving this to a peer dependency.

Moved and updated - "@openedx/paragon": ">= 23.0.0",

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.

Mashal-m · 2023-11-17T07:35:40Z

Hey @PKulkoRaccoonGang, What is the current status of this PR, is it ready to review and merge?
Could you please resolve conflicts?

PKulkoRaccoonGang · 2023-11-17T22:04:35Z

@Mashal-m Hello! At the moment, all pull requests opened in the edx and openex repositories are awaiting further action on the use of Paragon design tokens in the MFE. Don't pay any attention to them for now.

Full list of pull requests that should just be open for now:

dcoa · 2025-01-28T06:36:20Z

package.json

@@ -38,7 +38,7 @@
    "@edx/frontend-platform": "8.1.5",


Important
Update frontend-platform to a version compatible with paragon 23 needs openedx/frontend-platform#689 to be merged

Moved this message to the PR description, thanks!

openedx-webhooks added the blended PR is managed through 2U's blended developmnt program label Jun 15, 2023

PKulkoRaccoonGang mentioned this pull request Jun 15, 2023

Understand and address design tokens & CSS variable related issues in @edx/frontend-component-* repos openedx/paragon#2348

Open

PKulkoRaccoonGang marked this pull request as draft June 15, 2023 18:38

PKulkoRaccoonGang force-pushed the Peter_Kulko/support-design-tokens branch 3 times, most recently from 80f93ec to 17aee00 Compare June 22, 2023 18:36

monteri approved these changes Jun 23, 2023

View reviewed changes

PKulkoRaccoonGang requested a review from adamstankiewicz June 29, 2023 06:34

adamstankiewicz changed the title ~~[BD-46] feat: added support Paragon design tokens~~ [BD-46] feat!: added support Paragon design tokens Jul 14, 2023

adamstankiewicz reviewed Jul 14, 2023

View reviewed changes

adamstankiewicz reviewed Jul 21, 2023

View reviewed changes

PKulkoRaccoonGang requested a review from monteri August 9, 2023 12:19

monteri approved these changes Aug 9, 2023

View reviewed changes

PKulkoRaccoonGang marked this pull request as ready for review August 9, 2023 13:11

PKulkoRaccoonGang force-pushed the Peter_Kulko/support-design-tokens branch from 180a7fb to c264b1b Compare August 9, 2023 13:27

PKulkoRaccoonGang changed the title ~~[BD-46] feat!: added support Paragon design tokens~~ [BD-46] feat: added support Paragon design tokens Aug 9, 2023

PKulkoRaccoonGang force-pushed the Peter_Kulko/support-design-tokens branch from c264b1b to 8a7607e Compare August 9, 2023 13:33

PKulkoRaccoonGang requested a review from monteri August 9, 2023 14:07

PKulkoRaccoonGang force-pushed the Peter_Kulko/support-design-tokens branch from 8a7607e to dc84f97 Compare August 18, 2023 10:52

ghassanmas mentioned this pull request Sep 6, 2023

[do not merge] DEMO: design tokens and CSS variables openedx/frontend-app-profile#764

Draft

ghassanmas mentioned this pull request Oct 6, 2023

[DRAFT] feat: add support to paragon design tokens openedx/frontend-app-learning#1203

Closed

PKulkoRaccoonGang marked this pull request as draft December 18, 2023 09:25

dcoa force-pushed the Peter_Kulko/support-design-tokens branch from cfca879 to 1580c3c Compare June 5, 2024 10:44

dcoa mentioned this pull request Jun 13, 2024

openedx/frontend-component-header openedx/paragon#3065

Open

dcoa force-pushed the Peter_Kulko/support-design-tokens branch from 93f95e5 to d2bf693 Compare June 25, 2024 21:44

dcoa force-pushed the Peter_Kulko/support-design-tokens branch from 6a76c71 to c139df5 Compare January 28, 2025 05:55

dcoa reviewed Jan 28, 2025

View reviewed changes

dcoa force-pushed the Peter_Kulko/support-design-tokens branch from b8b890b to dc80618 Compare January 28, 2025 06:40

dcoa mentioned this pull request Feb 12, 2025

Update frontend-component-header to use Design Tokens openedx/public-engineering#289

Open

PKulkoRaccoonGang and others added 10 commits February 27, 2025 16:42

feat: added support Paragon design tokens

461183b

refactor: styles refactoring

39f14df

refactor: removed paragon imports

fa76907

refactor: moving the Paragon and Platform in peer and dev dependencies

49f0d31

feat: add studio header styles and remove unused styles

6da7355

fix: update example app and dependencies

f7c076c

fix: update padding in couse title for learning header

d6f59e7

refactor: added dist folder

968471a

chore: update peerDeps

c35a46e

test: update dist folder

f239827

PKulkoRaccoonGang force-pushed the Peter_Kulko/support-design-tokens branch from dc80618 to f239827 Compare February 27, 2025 14:44

chore: updated dist after rebase

94cd8d1

PKulkoRaccoonGang mentioned this pull request Feb 27, 2025

feat: adds support for loading external theme CSS for MFEs openedx/frontend-platform#689

Merged

4 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[BD-46] feat: added support Paragon design tokens #351

[BD-46] feat: added support Paragon design tokens #351

PKulkoRaccoonGang commented Jun 15, 2023 •

edited

Loading

openedx-webhooks commented Jun 15, 2023 •

edited

Loading

adamstankiewicz Jul 14, 2023

PKulkoRaccoonGang Feb 27, 2025

adamstankiewicz Jul 14, 2023

viktorrusakov Jul 21, 2023

PKulkoRaccoonGang Feb 27, 2025

adamstankiewicz Jul 14, 2023

PKulkoRaccoonGang Feb 27, 2025

adamstankiewicz Jul 21, 2023

PKulkoRaccoonGang Feb 27, 2025

Mashal-m commented Nov 17, 2023

PKulkoRaccoonGang commented Nov 17, 2023 •

edited

Loading

dcoa Jan 28, 2025 •

edited

Loading

PKulkoRaccoonGang Feb 27, 2025

[BD-46] feat: added support Paragon design tokens #351

Are you sure you want to change the base?

[BD-46] feat: added support Paragon design tokens #351

Conversation

PKulkoRaccoonGang commented Jun 15, 2023 • edited Loading

openedx-webhooks commented Jun 15, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Mashal-m commented Nov 17, 2023

PKulkoRaccoonGang commented Nov 17, 2023 • edited Loading

dcoa Jan 28, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

PKulkoRaccoonGang commented Jun 15, 2023 •

edited

Loading

openedx-webhooks commented Jun 15, 2023 •

edited

Loading

PKulkoRaccoonGang commented Nov 17, 2023 •

edited

Loading

dcoa Jan 28, 2025 •

edited

Loading