Convert Matcher widget to semantic color tokens#3550
Draft
Conversation
Replaces hardcoded `#444` border color with `semanticColor.core.border.neutral.strong` in the Matcher widget. Adds Chromatic regression stories (initial state + interactions) to establish a visual baseline before and after the conversion. https://claude.ai/code/session_01PkuvVE7SdJREHt57CcRewe
Contributor
🗄️ Schema Change: No Changes ✅ |
Contributor
|
Size Change: +2 B (0%) Total Size: 502 kB 📦 View Changed
ℹ️ View Unchanged
|
Contributor
npm Snapshot: PublishedGood news!! We've packaged up the latest commit from this PR (ec0b805) and published it to npm. You Example: pnpm add @khanacademy/perseus@PR3550If you are working in Khan Academy's frontend, you can run the below command. ./dev/tools/bump_perseus_version.ts -t PR3550If you are working in Khan Academy's webapp, you can run the below command. ./dev/tools/bump_perseus_version.js -t PR3550 |
Contributor
🛠️ Item Splitting: No Changes ✅ |
Reorders sections into ascending numerical order as requested. https://claude.ai/code/session_01PkuvVE7SdJREHt57CcRewe
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
Converts the Matcher widget's hardcoded border color to use semantic tokens from the Wonder Blocks design system, completing the font and color tokenization workflow for this widget.
Changes Made
Color tokenization: Replaced hardcoded
#444border color withsemanticColor.core.border.neutral.strongfrom@khanacademy/wonder-blocks-tokenscolumnRight.borderLeft) and horizontal label row bottom border (columnLabel.borderBottom)semanticColorimport tomatcher.tsxRegression test coverage: Created comprehensive visual regression stories to verify the widget renders correctly across all visual states
WithLabels,WithoutLabels,WithTexContent,OrderMatters,RightToLeftGradedState(verifies appearance after "Check answer" is clicked)matcher-renderer-decorator.tsxto support story rendering withServerItemRendererWithDebugUIFont audit: Confirmed no font tokenization needed—the single font attribute (
fontWeight: "inherit") is explicitly excluded from tokenization per conversion rulesTest snapshots: Updated 3 snapshots to reflect the new semantic color token value
Implementation Details
#444color was the only hardcoded color value in the widgetsemanticColor.core.border.neutral.strongwas selected as the closest semantic match for the original darker neutral border colorhttps://claude.ai/code/session_01PkuvVE7SdJREHt57CcRewe