testing: Using Paragon CSS External Hosting (JavaScript-based configuration)

[PKulkoRaccoonGang]

Description

The JavaScript-based configuration approach allows the user to add Paragon CSS from external hosting.

module.exports = {
  PARAGON_THEME_URLS: {
    core: {
      urls: {
        default: 'https://cdn.jsdelivr.net/npm/@openedx/paragon@alpha/dist/core.min.css',
      },
    },
    defaults: {
      light: 'light',
      dark: 'dark',
    },
    variants: {
      light: {
        urls: {
          default: 'https://cdn.jsdelivr.net/npm/@openedx/paragon@alpha/dist/light.min.css',
        },
      },
      dark: {
        urls: {
          default: 'https://cdn.jsdelivr.net/npm/@edx/brand-edx.org@alpha/dist/light.min.css',
        },
      },
    },
  },
};

Info

• Theming support with Paragon
• Migrating MFEs to Paragon design tokens and CSS variables

Related PRs

• https://github.com/openedx/frontend-component-footer/pull/303
• https://github.com/openedx/frontend-component-header/pull/351
• https://github.com/openedx/frontend-app-discussions/pull/723
• https://github.com/openedx/frontend-platform/pull/689
• https://github.com/openedx/frontend-build/pull/546
• https://github.com/openedx/frontend-app-discussions/pull/723
• https://github.com/openedx/frontend-app-discussions/pull/724

[openedx-webhooks]

Thanks for the pull request, @PKulkoRaccoonGang! Please note that it may take us up to several weeks or months to complete a review and merge your PR.

Feel free to add as much of the following information to the ticket as you can:

• supporting documentation
• Open edX discussion forum threads
• timeline information ("this must be merged by XX date", and why that is)
• partner information ("this is a course on edx.org")
• any other information that can help Product understand the context for the PR

All technical communication about the code itself will be done via the GitHub pull request interface. As a reminder, our process documentation is here.

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.

[open-craft-grove]

Sandbox deployment successful 🚀 🎓 LMS 📝 Studio ℹ️ Grove Config, Tutor Config, Tutor Requirements

[brian-smith-tcril]

I assume this visual bug isn't related to the styles being delivered via CDN but I noticed it here so I figure documenting it is worth doing

[dcoa]

I assume this visual bug isn't related to the styles being delivered via CDN but I noticed it here so I figure documenting it is worth doing

Hi @brian-smith-tcril, it's because of the styles loaded by the dark theme if you change your device theme to light, the default paragon styles will be loaded

[dcoa]

Thank @PKulkoRaccoonGang, all the design token work is fantastic and looks good. 🥳

I noticed some changes that are not related to the design tokens but It's affecting the styles.

These lines (from PR https://github.com/openedx/frontend-app-discussions/pull/697) override font-size 14px and 16px affecting header and footer, not only the main area

This is how the dropdown is looking

This is how supported to be (redwood)

We can increase the specification of the rule to avoid affecting the header and footer, also we can use var(--pgn-typography-font-size-sm) instead of 14px

Also, this change made the submit button resize, which looks weird to me, I mean, the component usually has a weight resize when executing the summit (because the length of the text changes and an icon is added). However, due to the text reduction (but the icon maintains the original one) a height resize is added.

scrnli_7_6_2024_12-00-00 PM.webm

[dcoa]

This is again not directly related to design tokens implementation, I'm not 100% sure if it's related to Paragon (that's why I highlight it) or the discussions implementation but the tabs course menu is not displaying the "more" button for responsive support during the first load, I have to resize the screen to make it work.

scrnli_7_6_2024_12-46-06 PM.webm

And again the changes from PR https://github.com/openedx/frontend-app-discussions/pull/697 are affecting the "more" button and the dropdown text size