SYL Dark: Typography (component level color)#2982
Closed
beaesguerra wants to merge 9 commits intowb-syl-dark-tokensfrom
Closed
SYL Dark: Typography (component level color)#2982beaesguerra wants to merge 9 commits intowb-syl-dark-tokensfrom
beaesguerra wants to merge 9 commits intowb-syl-dark-tokensfrom
Conversation
🦋 Changeset detectedLatest commit: 83d4d88 The changes in this PR will be included in the next version bump. This PR includes changesets to release 21 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Contributor
|
Size Change: +39 B (+0.03%) Total Size: 120 kB
ℹ️ View Unchanged
|
… used for typography components
Contributor
npm Snapshot: Published🎉 Good news!! We've packaged up the latest commit from this PR (1e88dc5) and published all packages with changesets to npm. You can install the packages in ./dev/tools/deploy_wonder_blocks.js --tag="PR2982"Packages can also be installed manually by running: pnpm add @khanacademy/wonder-blocks-<package-name>@PR2982 |
Contributor
A new build was pushed to Chromatic! 🚀https://5e1bf4b385e3fb0020b7073c-vbdkviktkf.chromatic.com/ Chromatic results:
|
beaesguerra
force-pushed
the
syl-dark-typography
branch
from
cfdcb6c to
1685225
Compare
beaesguerra
changed the title
beaesguerra
changed the title
beaesguerra
force-pushed
the
syl-dark-typography
branch
from
1685225 to
83d4d88
Compare
beaesguerra
added a commit
that referenced
this pull request
Mar 11, 2026
## Summary: Setting the font color in the Storybook environment using a token so it works with different themes. Note: We will be setting the font color at the global level in apps/storybook environments since this is how it is currently done. For reference, we would use the css variable token in [base-page-styles.css](https://github.com/Khan/frontend/blob/78c764bab2b54535242a2aaf7ce0f3652cfe34b8/libs/app-shell/src/styles/base-page-styles.css#L18) in `frontend` (similar to what we did in the [hackathon](https://github.com/Khan/frontend/pull/5123/changes#diff-f098b08ecc7bbe0e32ed84648793d2806edc0a08c971badb39437123579616ceR18)) Note: I explored setting the font color at the typography component level in: #2982 . (TLDR: setting the color at the typography component level will cause regressions because some things are relying on the inherited color behaviour. For now, we'll stick with how the font color is currently set up) Issue: WB-2166 ## Test plan: - Review the typography stories and snapshots in the `syl-dark` theme - Typography in the catalog:`?path=/story/catalog--typography-and-icons&globals=theme:syl-dark` - Typography components: `?path=/docs/packages-typography--docs&globals=theme:syl-dark` - Typography tokens: `?path=/docs/packages-tokens-typography--docs&globals=theme:syl-dark` Author: beaesguerra Reviewers: beaesguerra, claude[bot], jandrade Required Reviewers: Approved By: jandrade Checks: ✅ 13 checks were successful, ⏭️ 3 checks have been skipped Pull Request URL: #2983
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary:
Exploring setting the font color at the typography component level. This causes a lot of regressions because several components were relying on the typography components inherited color behaviour (see Chromatic snapshot diffs). This would also impact existing usage in the other frontend projects. To avoid regressions, we will set the font color globally in applications and storybook so it behaves the same way as before (see #2983)
Here is an example Chromatic build that shows the regressions within WB: https://www.chromatic.com/build?appId=5e1bf4b385e3fb0020b7073c&number=8728
Issue: WB-2166
Test plan: