/
2025-05-22 Frontend Working Group Meeting Notes: Design Tokens and edx.org theming

2025-05-22 Frontend Working Group Meeting Notes: Design Tokens and edx.org theming

 Date, time, location

 Discussion topic(s)

🎥Recording

 Participants

  • Adolfo Brandes

  • Brian Smith

  • Diana Villalvazo Salas

  • Javier Ontiveros

  • Juan Carlos Iasenza

  • tony busa

🤖 Summary

Design Tokens & Paragon Integration

  • Platform Fix Implemented: A fix for port handling with Paragon fallbacks is now part of all master-design-tokens branches.

    • Solution: Use window.location.origin to handle ports consistently.

    • Merged PRs: Brian confirmed that the relevant PRs have already landed, avoiding redundant reviews.

Translation Review Guidance

  • Best Practice: Don’t change translation string IDs unless absolutely necessary.

    • Changing an ID requires retranslation for all locales in Transifex.

  • Diana’s Update: Added missing translations and ensured no ID changes, which was approved.

Advertised Start Dates on Course Cards

  • Feature: Show advertised start date if available; otherwise, fallback to the default start date.

  • Status: Backend support is required, but frontend is forward-compatible.

“Discover New” Tab Conditional Display

  • Feature Flag: Introduced a new config nonbrowsable_courses to control UI behavior.

  • Feedback:

    • This was implemented to avoid modifying existing defaults.

    • Long-term: Move toward using slots to configure UI instead of new environment variables.

edx.org theming

  • Elm Theme: edx.org has migrated to the Elm theme, which is already using design tokens.

  • No Further Work: No need to maintain or update the older brand-edx.org theme.

Open edX Community Support

  • Minimal Example Theme: Brian is working on a minimal design-token-based theme for easy onboarding.

    • It will include:

      • Traditional installation.

      • New Paragon-based CDN method.

      • Tutor plugin examples.

  • Supporting Docs: A PR is out with branding guidance. Branding without design tokens is deprecated.

Upcoming Release (TE) Considerations

  • Breaking Change: TE will be the last release supporting non-token-based themes.

  • Communication Plan:

    • A forum post is already up.

    • More outreach is needed as TE nears.

  • Preview Mechanism: A toggleable method will allow testing with both old and new MF branches.

Catalog About Page

  • Lead: Brian is managing this, with Raccoon Gang executing the work rapidly.

  • Potential Involvement: Diana or other contributors could be looped in for review or testing.

  • Repository Setup:

    • New repo initialized with frontend template.

    • PRs in progress; contributors are encouraged to monitor and review.

frontend-base update

  • Upcoming Changes:

    1. Move to Buildless Packages:

      • MFs will be published as source-only NPM packages.

      • Built as part of the consumer's build process.

    2. Central Shell Concept:

      • Header/footer logic moved to a centralized frontend-base repo.

    3. Independent Git Repos:

      • Each MF operator will manage branding/customization via their own repo.

Tooling Exploration

  • Webpack Replacement: Evaluating Vite vs. RSBuild.

    • Current Favorite: Vite, due to industry support and roadmap toward better performance.

 Action items

 Decisions