Conversation
…-size
Replaces the deprecated Wonder Blocks `font.size` / `--wb-font-size` tokens
with the newer `font.body.size` / `--wb-font-body-size` tokens across Perseus.
Sizes map 1:1 by value: `xSmall`/`small`/`medium` have identical `body`
equivalents. The `body` scale has no `large`, so the old `font.size.large`
(2rem) maps to `font.heading.size.medium`, which is also 2rem — so there is
no visual change anywhere. All swaps are covered by existing unit tests
(interactive-graph.test.tsx asserts the exact emitted CSS variables).
Reviewers: #perseus
Issue: WB-2381
## Test plan:
No manual testing required. All changes are styling-token swaps with
identical rendered values, verified by unit tests:
- `pnpm tsc` — passes
- locked-label, movable-point-labels-layer, and start-coords suites — pass
- interactive-graph.test.tsx asserts the exact `--wb-font-body-size-*` /
`--wb-font-heading-size-medium` CSS variables
Optional spot-check in Storybook (no visual change expected):
- Interactive graph locked labels (small/medium/large)
- Interactive graph editor start-coords equation tiles
## Review plan:
No High or Medium risk changes. This PR only renames Wonder Blocks font
sizing tokens to their newer equivalents; every value is preserved (the one
non-1:1 case, `large`, maps to a token with the same 2rem value), and the
behavior is locked down by unit tests asserting the exact CSS variables
emitted. Highest individual risk is Low.
### Common patterns:
**4 Files:** Swapped the deprecated `font.size.*` JS token for the newer
`font.body.size.*` token (and `font.heading.size.medium` where the old
value was `large`).
```diff
- fontSize: font.size.xSmall,
+ fontSize: font.body.size.xsmall,
- fontSize: font.size.large,
+ fontSize: font.heading.size.medium,
```
**2 Files:** Swapped the deprecated `--wb-font-size-*` CSS variable for the
newer `--wb-font-body-size-*` variable.
```diff
- font-size: var(--wb-font-size-xSmall) !important;
+ font-size: var(--wb-font-body-size-xsmall) !important;
```
**1 File:** Replaced the dynamic `font.size[size]` lookup in locked-label
with an explicit map, since `large` has no `body` equivalent.
```diff
+const labelFontSize: Record<LockedLabelType["size"], string> = {
+ small: font.body.size.small,
+ medium: font.body.size.medium,
+ large: font.heading.size.medium,
+};
...
- fontSize: font.size[size],
+ fontSize: labelFontSize[size],
```
Contributor
|
Size Change: +53 B (+0.01%) Total Size: 517 kB 📦 View Changed
ℹ️ View Unchanged
|
Contributor
npm Snapshot: PublishedGood news!! We've packaged up the latest commit from this PR (b06d5f9) and published it to npm. You Example: pnpm add @khanacademy/perseus@PR3835If you are working in Khan Academy's frontend, you can run the below command. ./dev/tools/bump_perseus_version.ts -t PR3835If you are working in Khan Academy's webapp, you can run the below command. ./dev/tools/bump_perseus_version.js -t PR3835 |
mark-fitzgerald
approved these changes
Jul 1, 2026
mark-fitzgerald
left a comment
mark-fitzgerald
left a comment
Contributor
There was a problem hiding this comment.
Thank you for keeping our tokens up to date!
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
2 participants
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
Migrates the deprecated Wonder Blocks
font.size/--wb-font-sizetokens to the newerfont.body.size/--wb-font-body-sizetokens across Perseus.Sizes map 1:1 by value:
xSmall/small/mediumhave identicalbodyequivalents. Thebodyscale has nolarge, so the oldfont.size.large(2rem) maps tofont.heading.size.medium, which is also 2rem — no visual change anywhere. All swaps are locked down by existing unit tests that assert the exact emitted CSS variables.Risk: 🔷 Low · Complexity: Low
Issue: WB-2381
Test plan
No manual testing required — styling-token swaps with identical rendered values, verified by unit tests:
pnpm tsc— passesinteractive-graph.test.tsxasserts the exact--wb-font-body-size-*/--wb-font-heading-size-mediumCSS variablesOptional Storybook spot-check (no visual change expected): interactive-graph locked labels (small/medium/large) and the start-coords editor equation tiles.
Review plan
No High or Medium risk changes. This PR only renames Wonder Blocks font sizing tokens to their newer equivalents; every value is preserved (the one non-1:1 case,
large, maps to a token with the same 2rem value), and behavior is covered by unit tests asserting the exact emitted CSS variables.Common patterns
4 Files: Swapped the deprecated
font.size.*JS token for the newerfont.body.size.*token (andfont.heading.size.mediumwhere the old value waslarge).2 Files: Swapped the deprecated
--wb-font-size-*CSS variable for the newer--wb-font-body-size-*variable.1 File: Replaced the dynamic
font.size[size]lookup in locked-label with an explicit map, sincelargehas nobodyequivalent.