[WB-1998.1] Migrate color to semanticColor in perseus-editor#3244
[WB-1998.1] Migrate color to semanticColor in perseus-editor#3244
Conversation
🗄️ Schema Change: No Changes ✅ |
🛠️ Item Splitting: No Changes ✅ |
|
Size Change: +107 B (+0.02%) Total Size: 484 kB
ℹ️ View Unchanged
|
…he new `semanticColor` tokens instead.
npm Snapshot: PublishedGood news!! We've packaged up the latest commit from this PR (a7c1843) and published it to npm. You Example: pnpm add @khanacademy/perseus@PR3244If you are working in Khan Academy's frontend, you can run the below command. ./dev/tools/bump_perseus_version.ts -t PR3244If you are working in Khan Academy's webapp, you can run the below command. ./dev/tools/bump_perseus_version.js -t PR3244 |
| style={{ | ||
| backgroundColor: color.blue, | ||
| color: color.offWhite, | ||
| backgroundColor: |
There was a problem hiding this comment.
| color: color.offWhite, | ||
| backgroundColor: | ||
| semanticColor.core.background.instructive.default, | ||
| color: semanticColor.core.foreground.knockout.default, |
There was a problem hiding this comment.
note: I changed this on purpose as we no longer use offWhite for foreground colors (text/icon color). This also improves color contrast.
https://khanacademy.atlassian.net/wiki/spaces/WB/pages/4049666283/Core#Knockout.1
| errorField: { | ||
| borderColor: wbColor.red, | ||
| backgroundColor: wbColor.fadedRed8, | ||
| borderColor: semanticColor.core.border.critical.default, |
There was a problem hiding this comment.
| borderColor: wbColor.red, | ||
| backgroundColor: wbColor.fadedRed8, | ||
| borderColor: semanticColor.core.border.critical.default, | ||
| backgroundColor: semanticColor.core.background.critical.subtle, |
There was a problem hiding this comment.
| const borderColorStyle = focused | ||
| ? focusBorderColor || WBColor.blue | ||
| : borderColor || WBColor.offBlack16; | ||
| ? focusBorderColor || semanticColor.focus.outer |
There was a problem hiding this comment.
| // Add a white outline so that the color swatch is visible when | ||
| // the dropdown option is highlighted with its blue background. | ||
| outline: `2px solid ${wbColor.offWhite}`, | ||
| outline: `2px solid ${semanticColor.focus.inner}`, |
There was a problem hiding this comment.
There was a problem hiding this comment.
note: We now use white instead of offWhite at the system level.
1 participant
Summary:
Migrates the Aphrodite styles in perseus-editor to the new
semanticColortokens.
This PR is part of the larger effort to migrate the Perseus codebase to use the
new
semanticColortokens.Documents for reference:
Implementation plan:
1. perseus-editor (current PR)
2. #3246
3. #3250
Issue: https://khanacademy.atlassian.net/browse/WB-1998
Test plan:
Verify that the components in perseus-editor look correct.