[WB-1914] Update wonder-blocks-tokens to use Base 10 #2526

marcysutton · 2025-03-28T22:50:17Z

Summary:

This change updates the sizing tokens in wonder-blocks-tokens to use Base 10 rather than Base 8. We decided on this change as a team to work around some minimum issues in browsers where JavaScript returned the incorrect font-size on a page.

Issue: WB-1914

Test plan:

Reference Base 10 scale in https://khanacademy.atlassian.net/wiki/spaces/WB/pages/3683483678/Sizing
Double-check math of values used
Ensure there are no lint errors with tokens used in WB
To-do: update usage in webapp (FEI-6229)

changeset-bot · 2025-03-28T22:50:21Z

🦋 Changeset detected

Latest commit: c08daa8

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 24 packages

Name	Type
@khanacademy/wonder-blocks-tokens	Major
@khanacademy/wonder-blocks-labeled-field	Patch
@khanacademy/wonder-blocks-tabs	Patch
@khanacademy/wonder-blocks-accordion	Patch
@khanacademy/wonder-blocks-banner	Patch
@khanacademy/wonder-blocks-birthday-picker	Patch
@khanacademy/wonder-blocks-breadcrumbs	Patch
@khanacademy/wonder-blocks-button	Patch
@khanacademy/wonder-blocks-cell	Patch
@khanacademy/wonder-blocks-clickable	Patch
@khanacademy/wonder-blocks-dropdown	Patch
@khanacademy/wonder-blocks-form	Patch
@khanacademy/wonder-blocks-grid	Patch
@khanacademy/wonder-blocks-icon-button	Patch
@khanacademy/wonder-blocks-layout	Patch
@khanacademy/wonder-blocks-link	Patch
@khanacademy/wonder-blocks-modal	Patch
@khanacademy/wonder-blocks-pill	Patch
@khanacademy/wonder-blocks-popover	Patch
@khanacademy/wonder-blocks-progress-spinner	Patch
@khanacademy/wonder-blocks-search-field	Patch
@khanacademy/wonder-blocks-switch	Patch
@khanacademy/wonder-blocks-toolbar	Patch
@khanacademy/wonder-blocks-tooltip	Patch

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

khan-actions-bot · 2025-03-28T22:50:32Z

Gerald

Required Reviewers

@Khan/wonder-blocks for changes to .changeset/proud-elephants-wave.md, .changeset/tricky-rice-promise.md, __docs__/components/all-variants.tsx, __docs__/components/scenarios-layout.tsx, __docs__/wonder-blocks-labeled-field/labeled-field.stories.tsx, __docs__/wonder-blocks-tabs/navigation-tab-item-variants.stories.tsx, __docs__/wonder-blocks-tabs/navigation-tab-item.stories.tsx, __docs__/wonder-blocks-tabs/navigation-tabs-variants.stories.tsx, __docs__/wonder-blocks-tabs/navigation-tabs.stories.tsx, __docs__/wonder-blocks-tokens/tokens-sizing.mdx, static/sb-styles/preview.css, static/sb-styles/vars.css, packages/wonder-blocks-dropdown/src/components/action-item.tsx, packages/wonder-blocks-labeled-field/src/components/labeled-field.tsx, packages/wonder-blocks-tabs/src/components/navigation-tab-item.tsx, packages/wonder-blocks-tabs/src/components/navigation-tabs.tsx, packages/wonder-blocks-tokens/src/tokens/sizing.ts

Don't want to be involved in this pull request? Comment #removeme and we won't notify you of further changes.

github-actions · 2025-03-28T22:50:44Z

npm Snapshot: Published

🎉 Good news!! We've packaged up the latest commit from this PR (99a9db1) and published all packages with changesets to npm.

You can install the packages in webapp by running:

./services/static/dev/tools/deploy_wonder_blocks.js --tag="PR2526"

Packages can also be installed manually by running:

pnpm add @khanacademy/wonder-blocks-<package-name>@PR2526

github-actions · 2025-03-28T22:51:17Z

Size Change: +20 B (+0.02%)

Total Size: 103 kB

Filename	Size	Change
`packages/wonder-blocks-dropdown/dist/es/index.js`	19.8 kB	-2 B (-0.01%)
`packages/wonder-blocks-labeled-field/dist/es/index.js`	1.26 kB	+3 B (+0.24%)
`packages/wonder-blocks-tabs/dist/es/index.js`	1.88 kB	-1 B (-0.05%)
`packages/wonder-blocks-tokens/dist/es/index.js`	2.72 kB	+20 B (+0.74%)

ℹ️ View Unchanged

Filename	Size
`packages/wonder-blocks-accordion/dist/es/index.js`	3.54 kB
`packages/wonder-blocks-announcer/dist/es/index.js`	2.04 kB
`packages/wonder-blocks-banner/dist/es/index.js`	1.55 kB
`packages/wonder-blocks-birthday-picker/dist/es/index.js`	1.88 kB
`packages/wonder-blocks-breadcrumbs/dist/es/index.js`	886 B
`packages/wonder-blocks-button/dist/es/index.js`	4.34 kB
`packages/wonder-blocks-cell/dist/es/index.js`	2.35 kB
`packages/wonder-blocks-clickable/dist/es/index.js`	3.07 kB
`packages/wonder-blocks-core/dist/es/index.js`	2.85 kB
`packages/wonder-blocks-data/dist/es/index.js`	6.25 kB
`packages/wonder-blocks-form/dist/es/index.js`	6.04 kB
`packages/wonder-blocks-grid/dist/es/index.js`	1.36 kB
`packages/wonder-blocks-icon-button/dist/es/index.js`	3.17 kB
`packages/wonder-blocks-icon/dist/es/index.js`	873 B
`packages/wonder-blocks-layout/dist/es/index.js`	1.82 kB
`packages/wonder-blocks-link/dist/es/index.js`	2.04 kB
`packages/wonder-blocks-modal/dist/es/index.js`	5.5 kB
`packages/wonder-blocks-pill/dist/es/index.js`	1.49 kB
`packages/wonder-blocks-popover/dist/es/index.js`	4.92 kB
`packages/wonder-blocks-progress-spinner/dist/es/index.js`	1.52 kB
`packages/wonder-blocks-search-field/dist/es/index.js`	1.32 kB
`packages/wonder-blocks-switch/dist/es/index.js`	2.02 kB
`packages/wonder-blocks-testing-core/dist/es/index.js`	3.91 kB
`packages/wonder-blocks-testing/dist/es/index.js`	1.07 kB
`packages/wonder-blocks-theming/dist/es/index.js`	679 B
`packages/wonder-blocks-timing/dist/es/index.js`	1.79 kB
`packages/wonder-blocks-toolbar/dist/es/index.js`	923 B
`packages/wonder-blocks-tooltip/dist/es/index.js`	7.01 kB
`packages/wonder-blocks-typography/dist/es/index.js`	1.23 kB

_{compressed-size-action}

github-actions · 2025-03-28T22:54:35Z

A new build was pushed to Chromatic! 🚀

https://5e1bf4b385e3fb0020b7073c-ynihtbkgiu.chromatic.com/

Chromatic results:

Metric	Total
Captured snapshots	undefined
Tests with visual changes	undefined
Total stories	undefined
Inherited (not captured) snapshots [TurboSnap]	undefined
Tests on the build	undefined

marcysutton · 2025-03-28T23:42:25Z

static/sb-styles/preview.css

@@ -2,7 +2,7 @@
 * Overrides for the Storybook preview iframe.
 */
 html {
-    font-size: 50%;
+    font-size: 62.5%;


This change isn't registering in Chromatic yet! It still shows 50% and a bunch of stuff looks off. Weird! https://5e1bf4b385e3fb0020b7073c-jxifgupglv.chromatic.com/sb-styles/preview.css

I'm seeing it as 62.5% now! https://5e1bf4b385e3fb0020b7073c-ohuxdtgckx.chromatic.com/?path=/story/packages-banner--default

The typography in the docs are quite large though, is this expected? My zoom is at 100%! https://5e1bf4b385e3fb0020b7073c-ohuxdtgckx.chromatic.com/?path=/docs/overview--docs

Ah yes, good catch! I fiddled with those numbers some more and it's looking better to me. There is a slight shift on the overview page, possibly from a dynamic width or height somewhere. I can look into it if it's important to address..it seemed kindof trivial though!

It's really odd that Chromatic is not using the last generated storybook instance. I can also see what @marcysutton mentions.

Chromatic is using this hash to run snapshots: jxifgupglv.

The last site generated and uploaded to Chromatic is jnmmnedmeq.

It's looking correct to me now on the Chromatic URL here in the PR: https://5e1bf4b385e3fb0020b7073c-jnmmnedmeq.chromatic.com/?path=/docs/overview--docs

Agreed, I understand that (you can see the IDs/hashes included in the comment).

My worryness with this is that Chromatic is using the wrong snapshots for visual regression testing and this could be a possible caused for flaky-ness in the future.

Have you tried pushing more changes to see if the build for visual tests changes?

Good question! I just pushed another update to override some Storybook styling, that depended on Base 8 font size. I'm not seeing the same layout shifts anymore, so we'll see if it helps the visual tests!

YAY it works again, thanks for trying it out again :)

beaesguerra

Thanks for making these updates Marcy! Left a comment around the typography sizing in the docs!

Also, I think we'll need to update the sizing token docs and spacing to sizing mapping to reflect the new tokens! https://khan.github.io/wonder-blocks/?path=/docs/packages-tokens-sizing--docs

beaesguerra · 2025-03-31T17:37:05Z

static/sb-styles/preview.css

@@ -2,7 +2,7 @@
 * Overrides for the Storybook preview iframe.
 */
 html {
-    font-size: 50%;
+    font-size: 62.5%;


I'm seeing it as 62.5% now! https://5e1bf4b385e3fb0020b7073c-ohuxdtgckx.chromatic.com/?path=/story/packages-banner--default

The typography in the docs are quite large though, is this expected? My zoom is at 100%! https://5e1bf4b385e3fb0020b7073c-ohuxdtgckx.chromatic.com/?path=/docs/overview--docs

…e Base 10 rem units instead of Base 8

…y to Base 10

beaesguerra

Now that the base font size in Chromatic is up to date, I noticed a few more uses of sizing tokens that need to be updated!

beaesguerra · 2025-04-02T19:29:44Z

packages/wonder-blocks-labeled-field/src/components/labeled-field.tsx

    },
    description: {
        color: semanticColor.text.secondary,
-        paddingBlockEnd: sizing.size_150,
+        paddingBlockEnd: sizing.size_120,
    },
    errorSection: {
        flexDirection: "row",
        gap: sizing.size_100,


The gap will also need to be updated to sizing.size_080 for 8px! (figma)

Noticed this change in the Chromatic snapshot! I was expecting there'd be no visual changes since things would be converted to the new sizing!

beaesguerra · 2025-04-02T19:35:55Z

packages/wonder-blocks-tabs/src/components/navigation-tabs.tsx

@@ -235,7 +235,7 @@ const styles = StyleSheet.create({
    },
    list: {
        // Add horizontal padding for focus outline of first/last elements
-        paddingInline: sizing.size_050,
+        paddingInline: sizing.size_040,


The gap will also need to be updated to sizing.size_160! Noticed it by comparing the stories from the snapshot diff!

Good call! I found a bunch of similar tokens. I was about to dig in to see what was causing the diffs, hopefully these fix them all!

Woot, I believe we are clear of diff changes now!

beaesguerra

Looks good, nice work! 🎉 I'm glad we have lots of Chromatic snapshots to help verify our changes 😄

jandrade

Looks great! thanks for updating all of this 🎉 🚀

.changeset/tricky-rice-promise.md

marcysutton · 2025-04-03T16:48:03Z

I'm glad we have lots of Chromatic snapshots to help verify our changes 😄

@beaesguerra whew, I agree! Chromatic is SO helpful!

Thanks for the approvals. I'm putting this into a feature/scalable-sizing branch to give a little time for webapp testing. I have the tokens pulled into a branch and it's looking pretty good, but I need to play with it more!

marcysutton · 2025-04-04T20:49:24Z

Now that I have a PR open for updating sizing tokens in webapp (https://github.com/Khan/webapp/pull/31173), I think we should release these updates so that PR can be updated with an actual release! #2538

The next step after this will be to update the wonder-blocks-typography components to use sizing tokens. But I figured that could be separated from this work of updating sizing tokens to Base 10.

…to `main` (#2538) ## Summary: This PR includes the following commits: - [WB-1914] Update wonder-blocks-tokens to use Base 10 (#2526) Issue: WB-1914 ## Test plan: 1. Reference Base 10 scale in https://khanacademy.atlassian.net/wiki/spaces/WB/pages/3932520659/Sizing+Conversion+Table+for+devs 2. Double-check math of values used 3. Ensure there are no lint errors with tokens used in WB 4. Ensure there are no Chromatic changes 5. Complete updates to usage in webapp (PR: Khan/webapp#31173) [WB-1914]: https://khanacademy.atlassian.net/browse/WB-1914?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ Author: marcysutton Reviewers: jandrade, beaesguerra Required Reviewers: Approved By: jandrade, beaesguerra Checks: ✅ 17 checks were successful, ⏭️ 3 checks have been skipped, ⏹️ 8 checks were cancelled Pull Request URL: #2538

marcysutton self-assigned this Mar 28, 2025

khan-actions-bot requested a review from a team March 28, 2025 22:50

marcysutton changed the title ~~[typography-theming] Update to Base 10~~ [WB-1914] Update wonder-blocks-tokens to use Base 10 Mar 28, 2025

marcysutton commented Mar 28, 2025

View reviewed changes

beaesguerra reviewed Mar 31, 2025

View reviewed changes

khan-actions-bot requested a review from a team March 31, 2025 20:18

marcysutton added 9 commits April 2, 2025 09:57

[typography-theming] Update to Base 10

6480c42

[sizing-base10] docs(changeset): Update sizing primitive tokens to us…

7f0ab18

…e Base 10 rem units instead of Base 8

[sizing-base10] docs(changeset): Updates sizing tokens used internall…

fab8f0a

…y to Base 10

[sizing-base10] Update sizing tokens in stories

d98c7a7

[sizing-base10] Update changeset descriptions

2b7de0f

[sizing-base10] Update changeset to match others

1ef07eb

[sizing-base10] Update sizing tokens I missed

938d20b

[sizing-base10] Update Storybook font sizing

f271f23

[sizing-base10] Update sizing in docs

d0698f0

marcysutton force-pushed the sizing-base10 branch from 8e7f15c to d6fe326 Compare April 2, 2025 16:57

marcysutton changed the base branch from main to feature/scalable-sizing April 2, 2025 17:01

marcysutton mentioned this pull request Apr 2, 2025

[WB-1927]: Update wonder-blocks-typography to use rems #2532

Open

[sizing-base10] Adjust Storybook styles for Base 10

5b837c5

marcysutton force-pushed the sizing-base10 branch from d6fe326 to 5b837c5 Compare April 2, 2025 17:36

beaesguerra reviewed Apr 2, 2025

View reviewed changes

[sizing-base10] Update tokens to base 10

410da0e

khan-actions-bot requested a review from a team April 2, 2025 20:19

marcysutton added 2 commits April 2, 2025 14:03

[sizing-base10] Update gap for NavigationTabs UL

a8e630e

[sizing-base10] Restore NavigationTabs UL gap

aeeee99

beaesguerra approved these changes Apr 2, 2025

View reviewed changes

jandrade approved these changes Apr 3, 2025

View reviewed changes

.changeset/tricky-rice-promise.md Outdated Show resolved Hide resolved

[sizing-base10] Update changelog to patch

c08daa8

marcysutton force-pushed the sizing-base10 branch from e2b5331 to c08daa8 Compare April 4, 2025 16:17

marcysutton merged commit 24bf12f into feature/scalable-sizing Apr 4, 2025
26 checks passed

marcysutton deleted the sizing-base10 branch April 4, 2025 16:37

marcysutton mentioned this pull request Apr 4, 2025

This is a feature-branch pull-request from feature/scalable-sizing to main #2538

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[WB-1914] Update wonder-blocks-tokens to use Base 10 #2526

[WB-1914] Update wonder-blocks-tokens to use Base 10 #2526

marcysutton commented Mar 28, 2025 •

edited

Loading

changeset-bot bot commented Mar 28, 2025 •

edited

Loading

khan-actions-bot commented Mar 28, 2025 •

edited

Loading

github-actions bot commented Mar 28, 2025 •

edited

Loading

github-actions bot commented Mar 28, 2025 •

edited

Loading

github-actions bot commented Mar 28, 2025 •

edited

Loading

marcysutton Mar 28, 2025

beaesguerra Mar 31, 2025

marcysutton Mar 31, 2025

jandrade Apr 1, 2025

marcysutton Apr 1, 2025

jandrade Apr 1, 2025

marcysutton Apr 1, 2025

jandrade Apr 2, 2025

beaesguerra left a comment

beaesguerra Mar 31, 2025

beaesguerra left a comment

beaesguerra Apr 2, 2025

beaesguerra Apr 2, 2025

marcysutton Apr 2, 2025

marcysutton Apr 2, 2025

beaesguerra left a comment

jandrade left a comment

marcysutton commented Apr 3, 2025

marcysutton commented Apr 4, 2025

[WB-1914] Update wonder-blocks-tokens to use Base 10 #2526

[WB-1914] Update wonder-blocks-tokens to use Base 10 #2526

Conversation

marcysutton commented Mar 28, 2025 • edited Loading

Summary:

Test plan:

changeset-bot bot commented Mar 28, 2025 • edited Loading

🦋 Changeset detected

khan-actions-bot commented Mar 28, 2025 • edited Loading

Gerald

github-actions bot commented Mar 28, 2025 • edited Loading

npm Snapshot: Published

github-actions bot commented Mar 28, 2025 • edited Loading

github-actions bot commented Mar 28, 2025 • edited Loading

A new build was pushed to Chromatic! 🚀

Chromatic results:

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

beaesguerra left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

beaesguerra left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

beaesguerra left a comment

Choose a reason for hiding this comment

jandrade left a comment

Choose a reason for hiding this comment

marcysutton commented Apr 3, 2025

marcysutton commented Apr 4, 2025

marcysutton commented Mar 28, 2025 •

edited

Loading

changeset-bot bot commented Mar 28, 2025 •

edited

Loading

khan-actions-bot commented Mar 28, 2025 •

edited

Loading

github-actions bot commented Mar 28, 2025 •

edited

Loading

github-actions bot commented Mar 28, 2025 •

edited

Loading

github-actions bot commented Mar 28, 2025 •

edited

Loading