feat!: add design tokens support (#1737)#10
Conversation
BREAKING CHANGE: Pre-design-tokens theming is no longer supported. Co-authored-by: Diana Olarte <diana.olarte@edunext.co>
There was a problem hiding this comment.
Pull Request Overview
Upgrades Paragon from version 22.16.0 to 23.4.5, implementing design tokens support throughout the codebase. This is a breaking change that replaces the previous SCSS variable-based theming system with CSS custom properties (design tokens).
- Replaces SCSS imports with design token-based imports
- Updates all SCSS variables to use CSS custom properties with
var(--pgn-*)syntax - Migrates from deprecated
Modalcomponent toModalDialogwith updated API structure
Reviewed Changes
Copilot reviewed 22 out of 24 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| package.json | Updates @openedx/paragon dependency to version 23.4.5 |
| .env/.env.development | Adds PARAGON_THEME_URLS configuration for design tokens |
| src/index.scss | Replaces core SCSS imports with design token imports and updates all variables |
| Multiple .scss files | Converts SCSS variables to CSS custom properties throughout the codebase |
| ContentIFrame.jsx/test | Migrates from deprecated Modal component to ModalDialog with updated structure |
| MasqueradeUserNameInput.tsx | Updates Input component import to Form.Control |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
You can also share your feedback on Copilot code review for a chance to win a $100 gift card. Take the survey.
|
|
||
| &:last-child .pgn_collapsible { | ||
| @extend .mb-0; | ||
| margin-bottom: 0px !important; |
There was a problem hiding this comment.
Replace @extend .mb-0 with hardcoded CSS. Consider using the design token equivalent margin-bottom: var(--pgn-spacing-spacer-0) instead of 0px !important for consistency.
| margin-bottom: 0px !important; | |
| margin-bottom: var(--pgn-spacing-spacer-0) !important; |
| button { | ||
| @extend .btn-primary; | ||
| font-size: 1.2rem; | ||
| width: 50%; |
There was a problem hiding this comment.
The removal of @extend .btn-primary leaves only partial button styling. Consider using design token equivalents for primary button styling or ensure the button receives proper styling elsewhere.
| width: 50%; | |
| width: 50%; | |
| background-color: var(--color-primary, #007bff); | |
| color: var(--color-on-primary, #fff); | |
| border: none; | |
| padding: 0.5rem 1rem; | |
| border-radius: 0.25rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: background-color 0.2s; | |
| &:hover, | |
| &:focus { | |
| background-color: var(--color-primary-dark, #0056b3); | |
| color: var(--color-on-primary, #fff); | |
| outline: none; | |
| } |
| @import "~@openedx/paragon/scss/core/core"; | ||
| @import "~@edx/brand/paragon/overrides"; | ||
|
|
||
| .flag-button { |
There was a problem hiding this comment.
The removal of SCSS imports at the top of this file may cause issues if other parts of the stylesheet depend on those imports. Verify that all variables and mixins used in this file are available through the new design token system.
3 participants
Cherry picks Paragon 23 upgrade from openedx/master
BREAKING CHANGE: Pre-design-tokens theming is no longer supported.