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

[PKulkoRaccoonGang]

Issue: openedx/paragon#2348

[openedx-webhooks]

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]

[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.

[adamstankiewicz]

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?

[viktorrusakov]

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

[adamstankiewicz]

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

[adamstankiewicz]

Consider moving this to a peer dependency.

[Mashal-m]

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

[PKulkoRaccoonGang]

@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:

• OpenEdx Frontend-component-header;
• OpenEdx Frontend-component-footer;
• Edx Frontend-component-header;
• Edx Frontend-component-footer.

[dcoa]

Hi @PKulkoRaccoonGang, thanks for this. I checked these changes and it is still relevant.

Here we should rebase the branch to include the StudioHeader.scss

.studio-header {
  position: relative;
  z-index: 1000;

  height: 3.75rem;
  box-shadow: 0 1px 0 0 rgb(0 0 0 / .1);
  background: var(--pgn-color-white);

  .btn-outline-primary {
    border-color: var(--pgn-color-white);
  }

  .logo {
    display: block;
    box-sizing: content-box;
    position: relative;
    top: -.05em;
    height: 1.75rem;
    padding: var(--pgn-spacing-spacer-base) 0;
    margin-right: var(--pgn-spacing-spacer-base);

    img {
      display: block;
      height: 100%;
    }
  }

  .course-title-lockup {
    @media only screen and (min-width: 769px) {
      padding: .5rem;
      padding-right: var(--pgn-spacing-spacer-base);
      border-right: 1px solid #E5E5E5;
      width: 70%;
    }
  
    overflow: hidden;
  
    span {
      color: var(--pgn-color-gray-800);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 1.375rem;
    }
  }
}

[dcoa]

[Question] I tested without the styles below and the UI remained the same.

I couldn't find a reference to these styles, do you think are still relevant or can we get rid of them?

[PKulkoRaccoonGang]

It seems to me that if there are no visual defects, then these styles are not needed)

[dcoa]

Suggested change

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

For the example app, I think we can use the Paragon installed versions, in this way, it's not necessary to add a js config file, and the styles are applied only for the example app.

[dcoa]

Also with the changes in frontend-build the webpack.dev.config.js needs a change for the example app, the change is only in the entry key:

  entry: {
    app: path.resolve(__dirname, 'example'),
  },