[ColorSync] Convert color values to semantic tokens in label-image by Myranae · Pull Request #3435 · Khan/perseus

Myranae · 2026-03-31T14:41:10Z

Summary:

As the first step of our reignited Color Sync project, we're converting label image's color values to semantic tokens.

Replaced three hardcoded hex colors (#00880b, #ECF3FE) and one rgba value (rgba(33, 36, 44, 0.32)) in answer-pill.tsx, marker.tsx, and label-image.tsx with semantic tokens from @khanacademy/wonder-blocks-tokens
Added Chromatic visual regression stories (label-image-initial-state-regression.stories.tsx and label-image-interactions-regression.stories.tsx) to establish a baseline before conversion and capture diffs after

Issue: LEMS-3994

Test plan:

Chromatic diffs for the color changes have been reviewed and approved against the regression story baseline
pnpm lint, pnpm tsc, and pnpm test all pass
Storybook play functions verified: all interaction stories (MarkerOpened, AnswerSelected, CorrectAnswerGraded, IncorrectAnswerWithPill, MathChoicesVisible) complete without errors — Interactions tab shows green checkmarks
Visual states confirmed in Storybook:
- Unanswered: marker pulsates, no selection
- Answer selected: marker filled (solid blue, instructive.default)
- Correct graded: marker and pill render green (success.strong)
- Incorrect: marker and pill render neutral gray (neutral.default)
- Instructions with choices: separator dots visible between choice items

github-actions · 2026-03-31T14:42:05Z

🗄️ Schema Change: No Changes ✅

github-actions · 2026-03-31T14:42:27Z

🛠️ Item Splitting: No Changes ✅

github-actions · 2026-03-31T14:42:39Z

Size Change: +33 B (+0.01%)

Total Size: 497 kB

📦 View Changed

Filename	Size	Change
`packages/perseus-core/dist/es/index.js`	25.2 kB	+42 B (+0.17%)
`packages/perseus/dist/es/index.js`	194 kB	-9 B (0%)

ℹ️ View Unchanged

Filename	Size
`packages/kas/dist/es/index.js`	20.5 kB
`packages/keypad-context/dist/es/index.js`	1 kB
`packages/kmath/dist/es/index.js`	6.36 kB
`packages/math-input/dist/es/index.js`	98.5 kB
`packages/math-input/dist/es/strings.js`	1.61 kB
`packages/perseus-core/dist/es/index.item-splitting.js`	11.9 kB
`packages/perseus-editor/dist/es/index.js`	102 kB
`packages/perseus-linter/dist/es/index.js`	9.3 kB
`packages/perseus-score/dist/es/index.js`	9.7 kB
`packages/perseus-utils/dist/es/index.js`	403 B
`packages/perseus/dist/es/strings.js`	8.27 kB
`packages/pure-markdown/dist/es/index.js`	1.39 kB
`packages/simple-markdown/dist/es/index.js`	6.71 kB

_{compressed-size-action}

github-actions · 2026-03-31T14:43:17Z

npm Snapshot: Published

Good news!! We've packaged up the latest commit from this PR (840cd30) and published it to npm. You
can install it using the tag PR3435.

Example:

pnpm add @khanacademy/perseus@PR3435

If you are working in Khan Academy's frontend, you can run the below command.

./dev/tools/bump_perseus_version.ts -t PR3435

If you are working in Khan Academy's webapp, you can run the below command.

./dev/tools/bump_perseus_version.js -t PR3435

This reverts commit 2dcfc57.

This reverts commit 9aeb1ef.

…ility

Though these colors are not touched during this conversion, we still want regression stories that cover all states of the widget

…colors to semantic tokens for label image

…n vs figma color The Figma design was based on using only one point in all the widgets, so it is the interactive graph point. This project does not have a redesign goal, so the Figma does not reflect how the widget should look.

…lor again

claude

Claude Code Review

This repository is configured for manual code reviews. Comment @claude review to trigger a review and subscribe this PR to future pushes, or @claude review once for a one-time review.

_{Tip: disable this comment in your organization's Code Review settings.}

Myranae · 2026-04-01T21:22:54Z

@claude review once

…g-font-color-conversion

packages/perseus/src/widgets/label-image/label-image.tsx

.changeset/nervous-moons-roll.md

...es/perseus/src/widgets/label-image/__docs__/label-image-initial-state-regression.stories.tsx

mark-fitzgerald

Looks good. You may want to wait to merge until after Nisha's update to the Storybook template is available, and use it to verify the tests are structured properly.

…egression instructions

…g-font-color-conversion

…different

…s as args

[tb/testing-font-color-conversion] Add regression stories

7e64bc2

Myranae self-assigned this Mar 31, 2026

Myranae added the olc-5.0.c4fcb label Mar 31, 2026

Myranae added 14 commits March 31, 2026 10:24

[tb/testing-font-color-conversion] Fix test error

3e8cac7

[tb/testing-font-color-conversion] Color conversions

2dcfc57

[tb/testing-font-color-conversion] Update regression stories

122de80

Revert "[tb/testing-font-color-conversion] Color conversions"

9aeb1ef

This reverts commit 2dcfc57.

[tb/testing-font-color-conversion] Linting fixes

39416bc

Reapply "[tb/testing-font-color-conversion] Color conversions"

a6d1e15

This reverts commit 9aeb1ef.

[tb/testing-font-color-conversion] Darken the separator dot for visib…

47b8a24

…ility

[tb/testing-font-color-conversion] New story covering graded colors

f2b5e81

[tb/testing-font-color-conversion] Add story for incorrect state colors

449198a

Though these colors are not touched during this conversion, we still want regression stories that cover all states of the widget

[tb/testing-font-color-conversion] docs(changeset): Convert font and …

b740a05

…colors to semantic tokens for label image

[tb/testing-font-color-conversion] Change background to foreground color

4bc562d

[tb/testing-font-color-conversion] Change background to foreground co…

9095183

…lor again

[tb/testing-font-color-conversion] Remove planning docs

cd3ebbd

Myranae requested a review from mark-fitzgerald April 1, 2026 16:41

[tb/testing-font-color-conversion] Revert back to background

6c3cdd8

Myranae changed the title ~~[WIP] Convert color values to semantic tokens in label-image~~ [ColorSync] Convert color values to semantic tokens in label-image Apr 1, 2026

Myranae marked this pull request as ready for review April 1, 2026 21:22

claude bot reviewed Apr 1, 2026

View reviewed changes

[tb/testing-font-color-conversion] Merge branch 'main' into tb/testin…

9097781

…g-font-color-conversion

claude bot reviewed Apr 1, 2026

View reviewed changes

packages/perseus/src/widgets/label-image/label-image.tsx Show resolved Hide resolved

.changeset/nervous-moons-roll.md Outdated Show resolved Hide resolved

...es/perseus/src/widgets/label-image/__docs__/label-image-initial-state-regression.stories.tsx Outdated Show resolved Hide resolved

mark-fitzgerald approved these changes Apr 9, 2026

View reviewed changes

Myranae added 5 commits April 10, 2026 14:50

[tb/testing-font-color-conversion] Update stories based on improved r…

2e5523a

…egression instructions

[tb/testing-font-color-conversion] Update changeset to be more accurate

4b17115

[tb/testing-font-color-conversion] Merge branch 'main' into tb/testin…

abc7462

…g-font-color-conversion

[tb/testing-font-color-conversion] Remove RTL stories as they aren't …

1f47c22

…different

[tb/testing-font-color-conversion] Use label image decorator and prop…

840cd30

…s as args

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[ColorSync] Convert color values to semantic tokens in label-image#3435

[ColorSync] Convert color values to semantic tokens in label-image#3435
Myranae wants to merge 22 commits intomainfrom
tb/testing-font-color-conversion

Myranae commented Mar 31, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Mar 31, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Mar 31, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Mar 31, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Mar 31, 2026 •

edited

Loading

Uh oh!

claude bot left a comment

Uh oh!

Myranae commented Apr 1, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mark-fitzgerald left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

Myranae commented Mar 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary:

Test plan:

Uh oh!

github-actions bot commented Mar 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🗄️ Schema Change: No Changes ✅

Uh oh!

github-actions bot commented Mar 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🛠️ Item Splitting: No Changes ✅

Uh oh!

github-actions bot commented Mar 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Mar 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

npm Snapshot: Published

Uh oh!

claude bot left a comment

Choose a reason for hiding this comment

Claude Code Review

Uh oh!

Myranae commented Apr 1, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mark-fitzgerald left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Myranae commented Mar 31, 2026 •

edited

Loading

github-actions bot commented Mar 31, 2026 •

edited

Loading

github-actions bot commented Mar 31, 2026 •

edited

Loading

github-actions bot commented Mar 31, 2026 •

edited

Loading

github-actions bot commented Mar 31, 2026 •

edited

Loading