Skip to content

Commit a676ce6

Browse files
jandradejandrade
authored
🔷 [WB-2322] Add learning.characters.flesh semantic colors (#3060)
## Summary 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: jandrade, beaesguerra Issue: [WB-2322](https://khanacademy.atlassian.net/browse/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. - [x] 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 [WB-2322]: https://khanacademy.atlassian.net/browse/WB-2322?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ Author: jandrade Required Reviewers: Approved By: beaesguerra Checks: ✅ 11 checks were successful, ❌ 1 check failed, ⏭️ 3 checks have been skipped Pull Request URL: #3060
1 parent 6eb6af8 commit a676ce6

8 files changed

Lines changed: 97 additions & 7 deletions

File tree

‎.changeset/learning-characters-flesh.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@khanacademy/wonder-blocks-tokens": minor
3+
---
4+
5+
Add `learning.characters.flesh` semantic color tokens (`blue`, `cyan`, `green`, `magenta`, `orange` × `subtle`/`default`/`strong`) for use with learning characters, sourced from the Foundations Figma library.

‎__docs__/foundations-color.mdx‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,17 @@
1-
import {Meta, ColorPalette, ColorItem, Canvas} from "@storybook/addon-docs/blocks";
1+
import {
2+
Meta,
3+
ColorPalette,
4+
ColorItem,
5+
Canvas,
6+
} from "@storybook/addon-docs/blocks";
27
import {StyleSheet} from "aphrodite";
38

49
import Banner from "@khanacademy/wonder-blocks-banner";
510
import {View} from "@khanacademy/wonder-blocks-core";
611
import Link from "@khanacademy/wonder-blocks-link";
712
import {semanticColor, sizing} from "@khanacademy/wonder-blocks-tokens";
813
import {LabelLarge} from "@khanacademy/wonder-blocks-typography";
9-
import * as SemanticColorGroups from "./wonder-blocks-tokens/semantic-color-groups.stories"
14+
import * as SemanticColorGroups from "./wonder-blocks-tokens/semantic-color-groups.stories";
1015

1116
import {ColorGroup, ActionColorGroup} from "./components/color";
1217

@@ -75,7 +80,6 @@ how to use these colors depending on the context.
7580
/>
7681
</View>
7782

78-
7983
### Core
8084

8185
Core colors are used for the most common elements in the UI. These colors are
@@ -158,7 +162,6 @@ and include an icon or label to provide more context and clarity."
158162
]}
159163
/>
160164

161-
162165
#### Info
163166

164167
<Canvas of={SemanticColorGroups.FeedbackInfo} layout="fullscreen" />
@@ -210,6 +213,13 @@ in the UI.
210213

211214
<Canvas of={SemanticColorGroups.LearningMath} layout="fullscreen" />
212215

216+
#### Flesh
217+
218+
For character illustrations and other decorative elements that add warmth to the
219+
experience.
220+
221+
<Canvas of={SemanticColorGroups.LearningCharactersFlesh} layout="fullscreen" />
222+
213223
#### Border
214224

215225
<Canvas of={SemanticColorGroups.LearningBorder} layout="fullscreen" />
@@ -218,7 +228,6 @@ in the UI.
218228

219229
<Canvas of={SemanticColorGroups.LearningBackground} layout="fullscreen" />
220230

221-
222231
#### Foreground
223232

224233
<Canvas of={SemanticColorGroups.LearningForeground} layout="fullscreen" />
@@ -240,7 +249,6 @@ Standalone colors used only for communicating mastery.
240249

241250
<Canvas of={SemanticColorGroups.Mastery} layout="fullscreen" />
242251

243-
244252
## Getting raw token values
245253

246254
Semantic colors are exported as CSS `var(--...)` references so the active theme

‎__docs__/wonder-blocks-tokens/semantic-color-groups.stories.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -210,6 +210,15 @@ export const LearningShadow = () => {
210210
);
211211
};
212212

213+
export const LearningCharactersFlesh = () => {
214+
return (
215+
<ColorGroupStory
216+
category={semanticColor.learning.characters.flesh}
217+
group="learning.characters.flesh"
218+
/>
219+
);
220+
};
221+
213222
export const Khanmigo = () => {
214223
return (
215224
<ColorGroup

‎__docs__/wonder-blocks-tokens/semantic-color.stories.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,12 @@ export default {
8585

8686
type Row = {label: string; css: string; value: string};
8787

88+
const publicTokens = Object.fromEntries(
89+
Object.entries(flattenNestedTokens(semanticColor)).filter(
90+
([key, _]) => !key.includes("action.") && !key.includes("status."),
91+
),
92+
);
93+
8894
export const SemanticColors = () => (
8995
<TokenTable
9096
columns={[
@@ -107,6 +113,6 @@ export const SemanticColors = () => (
107113
cell: (row) => <ColorSwatch backgroundColor={row.value} />,
108114
},
109115
]}
110-
tokens={flattenNestedTokens(semanticColor)}
116+
tokens={publicTokens}
111117
/>
112118
);

‎packages/wonder-blocks-tokens/src/build/__tests__/__snapshots__/generate-token-docs.test.ts.snap‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -296,6 +296,11 @@ import {semanticColor} from "@khanacademy/wonder-blocks-tokens";
296296
| \`semanticColor.learning.shadow.progress.notStarted.default\` | \`--wb-semanticColor-learning-shadow-progress-notStarted-default\` | \`#717279\` | \`#717279\` |
297297
| \`semanticColor.learning.shadow.progress.attempted.default\` | \`--wb-semanticColor-learning-shadow-progress-attempted-default\` | \`#FCB706\` | \`#FCB706\` |
298298
| \`semanticColor.learning.shadow.progress.complete.default\` | \`--wb-semanticColor-learning-shadow-progress-complete-default\` | \`#579F6C\` | \`#579F6C\` |
299+
| \`semanticColor.learning.characters.flesh.blue.default\` | \`--wb-semanticColor-learning-characters-flesh-blue-default\` | \`#5753FA\` | \`#5753FA\` |
300+
| \`semanticColor.learning.characters.flesh.cyan.default\` | \`--wb-semanticColor-learning-characters-flesh-cyan-default\` | \`#28A9FF\` | \`#28A9FF\` |
301+
| \`semanticColor.learning.characters.flesh.green.default\` | \`--wb-semanticColor-learning-characters-flesh-green-default\` | \`#579F6C\` | \`#579F6C\` |
302+
| \`semanticColor.learning.characters.flesh.magenta.default\` | \`--wb-semanticColor-learning-characters-flesh-magenta-default\` | \`#E83FA4\` | \`#E83FA4\` |
303+
| \`semanticColor.learning.characters.flesh.orange.default\` | \`--wb-semanticColor-learning-characters-flesh-orange-default\` | \`#F8551A\` | \`#F8551A\` |
299304
| \`semanticColor.chonky.progressive.background.primary.rest\` | \`--wb-semanticColor-chonky-progressive-background-primary-rest\` | \`#1865f2\` | \`#5753FA\` |
300305
| \`semanticColor.chonky.progressive.background.primary.hover\` | \`--wb-semanticColor-chonky-progressive-background-primary-hover\` | \`#1865f2\` | \`#5753FA\` |
301306
| \`semanticColor.chonky.progressive.background.primary.press\` | \`--wb-semanticColor-chonky-progressive-background-primary-press\` | \`#1865f2\` | \`#5753FA\` |

‎packages/wonder-blocks-tokens/src/theme/semantic/semantic-color-syl-dark.ts‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -647,6 +647,25 @@ export const semanticColor = mergeTheme(thunderblocksSemanticColor, {
647647
},
648648
},
649649
},
650+
characters: {
651+
flesh: {
652+
blue: {
653+
default: color.blue_30,
654+
},
655+
cyan: {
656+
default: color.cyan_30,
657+
},
658+
green: {
659+
default: color.green_30,
660+
},
661+
magenta: {
662+
default: color.magenta_30,
663+
},
664+
orange: {
665+
default: color.orange_30,
666+
},
667+
},
668+
},
650669
},
651670
/**
652671
* For inputs, form elements, and other elements that require user input.

‎packages/wonder-blocks-tokens/src/theme/semantic/semantic-color-thunderblocks.ts‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -730,6 +730,25 @@ export const semanticColor = mergeTheme(defaultSemanticColor, {
730730
},
731731
},
732732
},
733+
characters: {
734+
flesh: {
735+
blue: {
736+
default: color.blue_30,
737+
},
738+
cyan: {
739+
default: color.cyan_30,
740+
},
741+
green: {
742+
default: color.green_30,
743+
},
744+
magenta: {
745+
default: color.magenta_30,
746+
},
747+
orange: {
748+
default: color.orange_30,
749+
},
750+
},
751+
},
733752
},
734753
/**
735754
* For inputs, form elements, and other elements that require user input.

‎packages/wonder-blocks-tokens/src/theme/semantic/semantic-color.ts‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -277,6 +277,25 @@ export const semanticColor = {
277277
},
278278
},
279279
},
280+
characters: {
281+
flesh: {
282+
blue: {
283+
default: thunderBlocksColor.blue_30,
284+
},
285+
cyan: {
286+
default: thunderBlocksColor.cyan_30,
287+
},
288+
green: {
289+
default: thunderBlocksColor.green_30,
290+
},
291+
magenta: {
292+
default: thunderBlocksColor.magenta_30,
293+
},
294+
orange: {
295+
default: thunderBlocksColor.orange_30,
296+
},
297+
},
298+
},
280299
},
281300

282301
/**

0 commit comments

Comments
 (0)