Conversation
Adds a new `learning.characters.flesh` sub-tree to the semantic color tokens, with 5 color families (blue/cyan/green/magenta/orange) × 3 variants (subtle/default/strong), sourced from the Foundations Figma library. Light themes (default + thunderblocks) share the same Light values; syl-dark uses the inverted Dark values. Also adds a `LearningCharactersFlesh` story under Tokens → Semantic Colors → Groups, and a minor changeset for wonder-blocks-tokens. Reviewers: #frontend-infra-web Issue: WB-2322 ## Test plan: - Open Storybook (`pnpm start`) → *Packages / Tokens / Semantic Colors / Groups / Learning Characters Flesh* and confirm 5 colors × 3 variants render with sensible values in both light and dark themes. - Automated: `pnpm typecheck`, `pnpm lint`, and `pnpm jest packages/wonder-blocks-tokens` all pass. ## Review plan: No high or medium risk changes — all file changes are purely additive to the design tokens (no existing tokens modified), follow the established `learning.*` shape, and are covered by the token-docs snapshot test. ### Common patterns: **3 Files:** Append a `characters.flesh` block to the end of the `learning` tree in each semantic-color theme file. Light themes use `*_40 / *_30 / *_10`; the dark theme inverts to `*_10 / *_30 / *_40`. ```ts // inside `learning: { ... }` characters: { flesh: { blue: { subtle: color.blue_40, default: color.blue_30, strong: color.blue_10 }, cyan: { subtle: color.cyan_40, default: color.cyan_30, strong: color.cyan_10 }, green: { subtle: color.green_40, default: color.green_30, strong: color.green_10 }, magenta: { subtle: color.magenta_40, default: color.magenta_30, strong: color.magenta_10 }, orange: { subtle: color.orange_40, default: color.orange_30, strong: color.orange_10 }, }, }, ``` 🤖 Built using Claude Code #ai-generated
🦋 Changeset detectedLatest commit: 8f816d1 The changes in this PR will be included in the next version bump. This PR includes changesets to release 31 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 |
|
Size Change: +45 B (+0.03%) Total Size: 129 kB 📦 View Changed
ℹ️ View Unchanged
|
npm Snapshot: Published🎉 Good news!! We've packaged up the latest commit from this PR (34d103f) and published all packages with changesets to npm. You can install the packages in ./dev/tools/deploy_wonder_blocks.js --tag="PR3060"Packages can also be installed manually by running: pnpm add @khanacademy/wonder-blocks-<package-name>@PR3060 |
A new build was pushed to Chromatic! 🚀https://5e1bf4b385e3fb0020b7073c-ntaccmicqi.chromatic.com/ Chromatic results:
|
Drop `subtle` and `strong` variants. Each color now exposes a single `default` token (matches existing patterns like `learning.background.progress.notStarted.default`). 🤖 Built using Claude Code #ai-generated
| const publicTokens = Object.fromEntries( | ||
| Object.entries(flattenNestedTokens(semanticColor)).filter( | ||
| ([key, _]) => !key.includes("action.") || key.includes("status."), | ||
| ), | ||
| ); |
There was a problem hiding this comment.
note: I've filtered out deprecated tokens from the final list so we prevent a Chromatic issue.
https://www.chromatic.com/test?appId=5e1bf4b385e3fb0020b7073c&id=6a0e1ab4ebedee0f3d56cc77
Your story couldn’t be captured because it exceeds our 25,000,000px limit. Its dimensions are 1,184x21,129px. Check that your story renders correctly in your published Storybook. Possible ways to resolve:
Separate pages into components
Minimize the number of very large elements in a story
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #3060 +/- ##
============================
============================
Continue to review full report in Codecov by Sentry.
🚀 New features to boost your workflow:
|
beaesguerra
left a comment
beaesguerra
left a comment
There was a problem hiding this comment.
Nice, looks good! Thanks for adding these tokens!
| ); | ||
| }; | ||
|
|
||
| export const LearningCharactersFlesh = () => { |
There was a problem hiding this comment.
Do we want to reference this in the Using color docs? https://5e1bf4b385e3fb0020b7073c-pwitftghie.chromatic.com/?path=/docs/foundations-using-color--docs
(Referencing these semantic-color-groups stories was how we made it so the color swatches and values would adapt based on the theme set in Storybook!)
There was a problem hiding this comment.
Fixed! thanks for pointing this out 🫶
| default: thunderBlocksColor.orange_30, | ||
| }, | ||
| }, | ||
| }, |
There was a problem hiding this comment.
I'm curious, did you use Claude with the Figma MCP?
I've only tried using the Figma MCP with links to a selection in the canvas, and not the variables directly! Or by exporting the Figma variables and working with that file instead :) I've been wondering about how we can use the Figma MCP more!
There was a problem hiding this comment.
oh I could have used the MCP, but ended up giving Claude this screenshot 😄
There was a problem hiding this comment.
Now that I think, the Figma link would not work with variables as they don't support permalinks yet 🤔, so the screenshot definitively helped in this case.
|
Just reviewed the Chromatic snapshots, looks like the status tokens are still included in the semantic color tokens table! |
|
@beaesguerra I've fixed the snapshots, let me know if you find something else missing |
@jandrade looks good to me, approved the snapshots! |
2 participants
Summary
Adds a new
learning.characters.fleshsub-tree to the semantic color tokens, with 5 color families (blue/cyan/green/magenta/orange) × 3 variants (subtle/default/strong), sourced from the Foundations Figma library. Light themes (default + thunderblocks) share the same Light values; syl-dark uses the inverted Dark values.Also adds a
LearningCharactersFleshstory under Tokens → Semantic Colors → Groups, and a minor changeset forwonder-blocks-tokens.Reviewers: #frontend-infra-web
Issue: WB-2322
Test plan
pnpm start) → Packages / Tokens / Semantic Colors / Groups / Learning Characters Flesh and confirm 5 colors × 3 variants render with sensible values in both light and dark themes.pnpm typecheck,pnpm lint, andpnpm jest packages/wonder-blocks-tokensall pass.Review plan
No high or medium risk changes — all file changes are purely additive to the design tokens (no existing tokens modified), follow the established
learning.*shape, and are covered by the token-docs snapshot test.Common patterns
3 Files: Append a
characters.fleshblock to the end of thelearningtree in each semantic-color theme file. Light themes use*_40 / *_30 / *_10; the dark theme inverts to*_10 / *_30 / *_40.🤖 Built using Claude Code #ai-generated