[Color][Graded Group] Convert graded-group font and colors to semantic tokens#3836
[Color][Graded Group] Convert graded-group font and colors to semantic tokens#3836Myranae wants to merge 14 commits into
Conversation
|
Size Change: -21 B (0%) Total Size: 517 kB 📦 View Changed
ℹ️ View Unchanged
|
npm Snapshot: PublishedGood news!! We've packaged up the latest commit from this PR (04e5017) and published it to npm. You Example: pnpm add @khanacademy/perseus@PR3836If you are working in Khan Academy's frontend, you can run the below command. ./dev/tools/bump_perseus_version.ts -t PR3836If you are working in Khan Academy's webapp, you can run the below command. ./dev/tools/bump_perseus_version.js -t PR3836 |
…d group related fonts and colors to use tokens
…folder for testing" This reverts commit ef27553.
Myranae
changed the title
Myranae
changed the title
| fontWeight: "bold", | ||
| fontSize: fontSize, | ||
| fontWeight: font.weight.bold, | ||
| fontSize: font.size.medium, |
There was a problem hiding this comment.
This is not exact. 17→font.size.medium (16px) is the change here.
| fontSize: 28, | ||
| color: "#63D9EA", | ||
| fontSize: font.size.xxLarge, | ||
| color: semanticColor.core.foreground.instructive.default, |
There was a problem hiding this comment.
It doesn't seem like teal has a semantic equivalent, so we used instructive blue here.
There was a problem hiding this comment.
Do we need sign-off from UX for this?
… to a token The token is 4px though, so this makes the dot border a bit smaller.
| gradedGroups: [ | ||
| generateGradedGroupOptions({ | ||
| title: "Problem 1a", | ||
| content: "$0.5 + 0.4 =$ [[☃ numeric-input 1]]", |
There was a problem hiding this comment.
I wonder if we should have some additional content included, like regular text, lists, bold, italic, etc. Maybe even a table?
| const secondIndicator = canvas.getByRole("button", { | ||
| name: "Problem 1b", | ||
| }); | ||
| await userEvent.click(secondIndicator); |
There was a problem hiding this comment.
I wonder if we can combine a couple of tests with this one. Instead of clicking the indicator, can we use keyboard navigation to get focus on it and then using the enter key to do the navigation? That way, the focus indicator stays on the navigation dot, and we can see the content change.
| }, | ||
| }; | ||
|
|
||
| export const DesktopFirstGroupCorrectAnswer: Story = { |
There was a problem hiding this comment.
Do we need an incorrect/try-again story, also?
| title: { | ||
| fontSize: 12, | ||
| fontSize: font.heading.size.small, | ||
| color: semanticColor.core.foreground.neutral.subtle, |
There was a problem hiding this comment.
While we are here, I think we should modify the color to be accessible. It is currently at a contrast ratio of 4.46, which is just shy of the minimum 4.5. If we instead go with semanticColor.core.foreground.neutral.default, we can get a ratio of 5.82.
| }, | ||
| hint: { | ||
| content: | ||
| "Solar power is renewable because sunlight is continuously available.", |
There was a problem hiding this comment.
Except at night. Just sayin'.
| }, | ||
| }; | ||
|
|
||
| export const RightToLeft: Story = { |
There was a problem hiding this comment.
I would love to have this as an automatic "theme", like with SYL and dark mode. Not asking to do that here, but one day, maybe.
| images: {}, | ||
| } satisfies Partial<PerseusGradedGroupWidgetOptions>; | ||
|
|
||
| export const DesktopWithTex: Story = { |
There was a problem hiding this comment.
This feels more like a "TeX in Radio" story than a "TeX in Graded Group" story. Is there a way that we can minimize the use of a full-featured widget for something simpler, like numeric-input?
| @@ -257,16 +251,27 @@ export class GradedGroup | |||
|
|
|||
| let gradeStatus: string | null = null; | |||
| let icon = null; | |||
There was a problem hiding this comment.
Since we are here, should we type this to avoid all the @ts-expect-error lines?
2 participants
Summary:
Replaces all hardcoded font sizes, font weights, colors, border widths, and border radii in
graded-group,graded-group-answer-bar, andgraded-group-setwith Wonder Blocks semantic and structural tokens. Adds visual regression stories for both widgets establishing a Chromatic baseline before the changes.One design gap was identified: the try-again icon's teal (
#63D9EA) has no semantic equivalent in the WB token system and was mapped toforeground.instructive.defaultas the closest semantic intent — a design token for teal/cyan action states is recommended.Issue: LEMS-4266
Test plan: