📄 Paragon Design Tokens Cheat Sheet

Overview

This cheat sheet provides a quick reference to Paragon Design Tokens, including resources to help you understand their usage, and links to working groups and support channels.

📚 Technical Documentation

• Paragon GitHub Repository: Access the source code and contribute to the development of the Paragon design system.

• Design tokens with Style Dictionary: Learn how Paragon uses Style Dictionary to manage and transform tokens for consistent styling across platforms.

• Migrating MFEs to Paragon design tokens & CSS variables: Explore best practices for migrating Micro-Frontend Extensions (MFEs) to Paragon’s design tokens and CSS variables.

• Theming support with Paragon: Understand Paragon’s flexible theming options, including support for light, dark, and custom themes.

• Design Tokens ADR: The migration of the Paragon design system in Open edX from SCSS variables to CSS variables and design tokens using style-dictionary.

👥 Working Groups & Community Support

• Paragon Working Group: Collaborate on Paragon’s development and improvements.

  • Meeting Link: Every Wednesday at 3 PM UTC

• Frontend Working Group: Solve frontend challenges with the help of developers.

  • Meeting Link: Every Thursday starting one week from now at 3 PM UTC

• Paragon Design Tokens Topic

💬 Slack Channels

• #wg-frontend: Discuss frontend topics like Paragon design tokens, challenges, and best practices.

• #wg-paragon: Ask questions, receive updates, and collaborate on Paragon design token development.

🛠 Useful Tools & Resources

• W3C Design Tokens Community Group

• Available Paragon NPM versions

• jsDelivr Documentation

• Style Dictionary v4

• Tokens Studio