[WB-1644.2] Convert border and sizing tokens to CSS variables #2561
Conversation
… variables. Map JS tokens to css var counterparts
🦋 Changeset detectedLatest commit: c8c88fd The changes in this PR will be included in the next version bump. 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 |
|
Size Change: +42 B (+0.04%) Total Size: 103 kB
ℹ️ View Unchanged
|
A new build was pushed to Chromatic! 🚀https://5e1bf4b385e3fb0020b7073c-livegionls.chromatic.com/ Chromatic results:
|
GeraldRequired Reviewers
Don't want to be involved in this pull request? Comment |
npm Snapshot: Published🎉 Good news!! We've packaged up the latest commit from this PR (231124d) 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="PR2561"Packages can also be installed manually by running: pnpm add @khanacademy/wonder-blocks-<package-name>@PR2561 |
| @@ -299,7 +299,7 @@ export const HeaderWithNavigationTabsExample: StoryComponentType = { | |||
| navigationTabsRoot: { | |||
| // set margin to negative value of header vertical spacing so | |||
| // that selected indicator lines up with header border | |||
| margin: `-${headerVerticalSpacing} 0`, | |||
| margin: `var(${headerVerticalSpacing}, *-1) 0`, | |||
There was a problem hiding this comment.
| import theme from "./tokens/theme"; | ||
|
|
||
| const {border, semanticColor, sizing} = theme; |
There was a problem hiding this comment.
note: Made this change to make it backwards compatible with the existing JS tokens
| export default { | ||
| border, | ||
| semanticColor, | ||
| sizing, | ||
| }; |
There was a problem hiding this comment.
note: All the tokens included in this theme file will be automatically mapped to CSS vars and included in @khanacademy/wonder-blocks-tokens/styles.css. (I'll add this note in the code as a comment).
There was a problem hiding this comment.
Noticed a typo in one of the stories that might be causing the Chromatic diff. Other than that, looks good!
Would it be helpful to document somewhere how to negate WB token values? And how the token values are css variables now instead of specific values? I wonder if a lint rule could be helpful to make sure tokens are used properly as css variables now!
| @@ -299,7 +299,7 @@ export const HeaderWithNavigationTabsExample: StoryComponentType = { | |||
| navigationTabsRoot: { | |||
| // set margin to negative value of header vertical spacing so | |||
| // that selected indicator lines up with header border | |||
| margin: `-${headerVerticalSpacing} 0`, | |||
| margin: `calc(${headerVerticalSpacing}, *-1) 0`, | |||
There was a problem hiding this comment.
Is the comma after the token intended? I think this might be why there's an unexpected Chromatic diff for this story!
There was a problem hiding this comment.
that's why, thanks for noticing that :)
@beaesguerra These are great points! I'm going to iterate on these ideas in separate PRs. |
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## feature/css-vars #2561 +/- ##
========================================
========================================
Continue to review full report in Codecov by Sentry.
🚀 New features to boost your workflow:
|
…n` (#2541) ## Summary: - [WB-1816] Rework `semanticColor` tokens to be exported as CSS variables (#2481) - [WB-1644.1] Modify ThemeSwitcher to use a data-wb-theme attribute for theming (#2557) - [WB-1644.2] Convert border and sizing tokens to CSS variables (#2561) - [🔥AUDIT🔥] Tokens: Export TS types correctly in package.json so consumers can use them correctly (#2564) [WB-1816]: https://khanacademy.atlassian.net/browse/WB-1816?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ Issue: "none" ## Test plan: Verify that all the components are now using CSS variables when `sizing`, `border` and `semanticColor` tokens are used. <img width="2910" alt="Screenshot 2025-04-17 at 3 56 39 PM" src="https://github.com/user-attachments/assets/65602a0e-073c-4109-9b28-cfd7d11f4752" /> Author: jandrade Reviewers: beaesguerra Required Reviewers: Approved By: beaesguerra Checks: ✅ 34 checks were successful, ⏭️ 8 checks have been skipped, ⏹️ 15 checks were cancelled Pull Request URL: #2541
Summary:
This PR migrates the
borderandsizingtokens to internally use CSSvariables. It also updates the documentation to reflect these changes.
Also, refactored the logic for generating CSS variables by moving all those
tokens to a
theme/default.tsfile, then converting all the tokens in there toCSS variables.
Issue: https://khanacademy.atlassian.net/browse/WB-1644
Test plan:
Navigate to the
borderandsizingdocs and verify that the CSS variables are now included:/?path=/docs/packages-tokens-border--docs/?path=/docs/packages-tokens-sizing--docsAlso inspect the styles in the browser and check that the CSS variables are
being used in places where
sizingarebordertokens are used.