📄 Paragon Design Tokens Cheat Sheet
- Peter Kulko
- Glib Glugovskiy
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
💬 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.