fix: convert typography overrides to design tokens#41
fix: convert typography overrides to design tokens#41arbrandes merged 1 commit intoopenedx:masterfrom
Conversation
arbrandes
force-pushed
the
change-typography-take-2
branch
from
87eb1b9 to
2da1ff0
Compare
As of Paragon v23 we're using design tokens, so convert the typography changes introduced in the previous commit accordingly. Also add a prepack script so that CSS is guaranteed to be built before npm publish. Co-Authored-By: Claude <noreply@anthropic.com>
arbrandes
force-pushed
the
change-typography-take-2
branch
from
2da1ff0 to
03f5a34
Compare
brian-smith-tcril
left a comment
brian-smith-tcril
left a comment
There was a problem hiding this comment.
I pulled this branch and did a spot check on a few of the generated css vars.
LGTM!
One overall question: is the brand package where these values should live? If these are intended to be "defaults" then should they live in Paragon base styles instead?
| // this file creates the core.css import here all the common styles for your theme. | ||
|
|
||
| // @use "./build/core/variables"; | ||
| @use "./build/core/variables"; |
There was a problem hiding this comment.
Verified that without this we get nothing in dist/core.css, but with this we get the proper typography values.
@edx/elm-theme handles this differently, but this feels correct.
e0d
left a comment
e0d
left a comment
There was a problem hiding this comment.
LGTM, thanks for making it actually work ;)
|
🎉 This PR is included in version 2.0.1 🎉 The release is available on: Your semantic-release bot 📦🚀 |
A very valid question. For now, I think it's defensible to have it in here because:
I do agree with what you brought up elsewhere: that what we actually want operators to do is load their CSS at runtime from somewhere else, and making this change here can be seen as counter to that. However, as we also discussed earlier, this particular conundrum should probably be fixed in documentation, anyway. |
4 participants
Description
Paragon v23+ resolves styles via CSS custom properties generated from JSON design tokens, not SCSS variables. The previous SCSS-only approach in
_variables.scsshad no effect on Paragon components.This PR adds a
typography.jsontoken file underparagon/tokens/core/global/, uncomments the@useimport incore.scssso the brand'score.cssincludes the built variables, and adds aprepackscript sodist/is generated beforenpm publish.Test report
This has been tested to be working with frontend-app-learner-dashboard. (By manually copying over the brand-openedx dist to node_modules, because apparently module.config.js doesn't work with design token stuff.)
LLM usage notice
Built with assistance from Claude.