feat: support design tokens and paragon 23 #1436
Conversation
openedx-webhooks
added
the
open-source-contribution
|
Thanks for the pull request, @dcoa! This repository is currently maintained by Once you've gone through the following steps feel free to tag them in a comment and let them know that your changes are ready for engineering review. 🔘 Get product approvalIf you haven't already, check this list to see if your contribution needs to go through the product review process.
🔘 Provide contextTo help your reviewers and other members of the community understand the purpose and larger context of your changes, feel free to add as much of the following information to the PR description as you can:
🔘 Get a green buildIf one or more checks are failing, continue working on your changes until this is no longer the case and your build turns green. Where can I find more information?If you'd like to get more details on all aspects of the review process for open source pull requests (OSPRs), check out the following resources: When can I expect my changes to be merged?Our goal is to get community contributions seen and reviewed as efficiently as possible. However, the amount of time that it takes to review and merge a PR can vary significantly based on factors such as:
💡 As a result it may take up to several weeks or months to complete a review and merge your PR. |
dcoa
changed the title
dcoa
force-pushed
the
dcoa/design-tokens-support
branch
from
4df75f7 to
c707d82
Compare
dcoa
force-pushed
the
dcoa/design-tokens-support
branch
from
c707d82 to
b4faf7a
Compare
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master-design-tokens #1436 +/- ##
=====================================================
Coverage 87.69% 87.69%
=====================================================
Files 124 124
Lines 2299 2299
Branches 646 646
=====================================================
Hits 2016 2016
Misses 274 274
Partials 9 9 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
dcoa
added
the
create-sandbox
|
Sandbox deployment failed 💥 |
|
Sandbox deployment successful 🚀 |
|
The styles are not been displayed due to the url is not correct as you can see in the error: This is because frontend-platform uses BASE_URL to create the url, as you can see here export const fallbackThemeUrl = (url) => {
const baseUrl = getConfig().BASE_URL || window.location?.origin;
return `${baseUrl}${basename}${url}`;
};Problem The problem is the url does not have the protocol on it, so is resolve as a path instead of a full url, is being defined by tutor-mfe like: There is 2 ways to solve it:
For the second point we might add some consistency in the MFEs variables (for development) most of the apps has the protocol on it but some of them not (as shown here) Checked (has the http on it):
I would like to have your opinion before making any change @brian-smith-tcril |
|
@dcoa I would worry that updating the
I think ideally we'd be able to handle both, so @adamstankiewicz thoughts? |
|
I agree this would ideally be handled within Example: <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/@openedx/[email protected]/dist/light.css">In this case, the URL would use the same protocol as the current page (i.e., https if the app is hosted on https, http if the app is hosted on http). |
dcoa
force-pushed
the
dcoa/design-tokens-support
branch
from
8c93fa5 to
ad38966
Compare
|
Sandbox deployment successful 🚀 |
|
@brian-smith-tcril, this PR is ready for review |
dcoa
force-pushed
the
dcoa/design-tokens-support
branch
from
ad38966 to
4b48b92
Compare
|
Sandbox deployment successful 🚀 |
dcoa
force-pushed
the
dcoa/design-tokens-support
branch
from
4b48b92 to
e6940e5
Compare
dcoa
changed the title
|
Sandbox deployment successful 🚀 |
dcoa
force-pushed
the
dcoa/design-tokens-support
branch
from
e6940e5 to
856ee5c
Compare
|
Sandbox deployment successful 🚀 |
dcoa
force-pushed
the
dcoa/design-tokens-support
branch
from
856ee5c to
5f03a07
Compare
|
Sandbox deployment failed 💥 |
|
Sandbox deployment successful 🚀 |
dcoa
force-pushed
the
dcoa/design-tokens-support
branch
from
5f03a07 to
3ad941e
Compare
|
Sandbox deployment successful 🚀 |
dcoa
force-pushed
the
dcoa/design-tokens-support
branch
from
3ad941e to
d0417af
Compare
|
Sandbox deployment successful 🚀 |
| @@ -40,7 +40,7 @@ $elevation-level-2-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15); | |||
| } | |||
|
|
|||
| .main-content { | |||
| @extend .pt-4; | |||
| padding-top: calc(var(--pgn-spacing-spacer-base) * 1.5) !important; | |||
There was a problem hiding this comment.
It looks like .pt-4 is still listed in css utilities on the docs site https://paragon-openedx.netlify.app/foundations/css-utilities/
Does continuing to use .pt-4 here break things?
There was a problem hiding this comment.
I made it like that to avoid import the paragon code inside the scss and increase the file of the bundle, for example keeping the line and importing the utilities-only.scss , make the app.css file 200kB because it adds all the utility classes to the final file, meanwhile with the direct css the file is 17.9 kB.
When I did the changes I was wondering what could be the best approach, use the utilities scss, replace the variable or add the utility class via jsx.
There was a problem hiding this comment.
Interesting. I poked at this a bit and even when trying to use @use instead of @import I'm getting 200kB app.css files.
I definitely want to avoid the extra 180+kB, maybe just adding comments mentioning this is copied from a utility class would be helpful? Something like
| padding-top: calc(var(--pgn-spacing-spacer-base) * 1.5) !important; | |
| // This was originally extending .pt-4, a bootstrap utility class | |
| // The calculated value can be seen here https://paragon-openedx-v23.netlify.app/foundations/css-utilities/ | |
| // Including Paragon's utilities-only.scss increases the css bundle size by ~180kB, | |
| // so this is copied in directly instead. | |
| padding-top: calc(var(--pgn-spacing-spacer-base) * 1.5) !important; |
It's also possible I'm overlooking a different solution.
@adamstankiewicz - do you have any ideas?
There was a problem hiding this comment.
There was a problem hiding this comment.
In the 2025-05-07 Paragon WG meeting @adamstankiewicz mentioned (approximate quote based on WG transcript)
Yeah, I know for what it's worth, there are some trade-offs of using that extend class name sort of approach as well. it includes the important when in some cases that shouldn't be there. So I don't think we want to encourage that extend pattern for what it's worth. just broadly I remember just over the years multiple instances of CSS I added that used it and then it caused a bunch of issues down the road pasting is probably fine for the time being.
We then agreed (approximate quote from me based on transcript)
All right, sounds good. We can copy paste without context.
To summarize:
- Using
@extendwith bootstrap utility classes has trade-offs.- For example: sometimes doing so includes
!importantwhen we don't want it to.
- For example: sometimes doing so includes
- Therefore
- We should not encourage using
@extendwith bootstrap utility classes. - Replacing
@extendwith copy/pasted rules (as this line change is doing) is perfectly reasonable. - We do not need to provide context for the copy/pasted rules using comments.
- We should not encourage using
dcoa
force-pushed
the
dcoa/design-tokens-support
branch
from
d0417af to
aa5a949
Compare
|
Sandbox deployment successful 🚀 |
brian-smith-tcril
merged commit 6fdcc9b
into
openedx:master-design-tokens
github-project-automation
bot
moved this from Waiting on Author
to Done
in Contributions
Warning
This PR should not be merge to
masterdirectly, it should point tomaster-design-tokensonce the branch has been created.Description
This PR updates frontend app authn to support CSS variables and the corresponding paragon design tokens.
Changes implemented:
Important
This PR requires a compatible version with paragon 23 of dependencies, because of that the following PRs need to be merged first:
How to test
Navigate the sandbox