From 62fe8fc9cc02b4df6ddcf28863d8604d880a3aef Mon Sep 17 00:00:00 2001 From: Juan Andrade Date: Thu, 12 Feb 2026 10:42:03 -0500 Subject: [PATCH 1/3] [wb-color2sc-3] Migrate color to semanticColor in math-input --- .../math-input/src/components/input/math-input.tsx | 9 +++++---- .../keypad/__tests__/keypad-v2-mathquill.test.tsx | 4 ++-- .../src/components/keypad/keypad-button.tsx | 12 ++++++------ .../components/keypad/keypad-mathquill.stories.tsx | 4 ++-- .../src/components/keypad/navigation-button.tsx | 14 +++++++------- .../src/components/keypad/navigation-pad.tsx | 4 ++-- 6 files changed, 24 insertions(+), 23 deletions(-) diff --git a/packages/math-input/src/components/input/math-input.tsx b/packages/math-input/src/components/input/math-input.tsx index 82436a523d4..7faf46e91ed 100644 --- a/packages/math-input/src/components/input/math-input.tsx +++ b/packages/math-input/src/components/input/math-input.tsx @@ -1,7 +1,7 @@ /* eslint-disable max-lines */ import {KeypadContext} from "@khanacademy/keypad-context"; import {View} from "@khanacademy/wonder-blocks-core"; -import {color} from "@khanacademy/wonder-blocks-tokens"; +import {semanticColor} from "@khanacademy/wonder-blocks-tokens"; import {entries} from "@khanacademy/wonder-stuff-core"; import {StyleSheet} from "aphrodite"; import * as React from "react"; @@ -921,7 +921,8 @@ class MathInput extends React.Component { borderWidth: this.getBorderWidthPx(), ...(showInputFocusStyle ? { - borderColor: color.blue, + borderColor: + semanticColor.core.border.instructive.default, } : {}), ...style, @@ -1043,9 +1044,9 @@ const inlineStyles = { boxSizing: "border-box", position: "relative", borderStyle: "solid", - borderColor: color.offBlack50, + borderColor: semanticColor.core.border.neutral.default, borderRadius: 4, - color: color.offBlack, + color: semanticColor.core.foreground.neutral.strong, }, } as const; diff --git a/packages/math-input/src/components/keypad/__tests__/keypad-v2-mathquill.test.tsx b/packages/math-input/src/components/keypad/__tests__/keypad-v2-mathquill.test.tsx index 9c6ad143040..8b3091c4df4 100644 --- a/packages/math-input/src/components/keypad/__tests__/keypad-v2-mathquill.test.tsx +++ b/packages/math-input/src/components/keypad/__tests__/keypad-v2-mathquill.test.tsx @@ -1,5 +1,5 @@ import {Popover, PopoverContentCore} from "@khanacademy/wonder-blocks-popover"; -import {color} from "@khanacademy/wonder-blocks-tokens"; +import {semanticColor} from "@khanacademy/wonder-blocks-tokens"; import {render, screen} from "@testing-library/react"; import {userEvent as userEventLib} from "@testing-library/user-event"; import * as React from "react"; @@ -108,7 +108,7 @@ function V2KeypadWithMathquill(props: Props) { style={{ width: "100%", marginBottom: "1em", - border: `1px solid ${color.offBlack16}`, + border: `1px solid ${semanticColor.core.border.neutral.subtle}`, }} ref={mathFieldWrapperRef} /> diff --git a/packages/math-input/src/components/keypad/keypad-button.tsx b/packages/math-input/src/components/keypad/keypad-button.tsx index b6bb52af006..7d7879e4b18 100644 --- a/packages/math-input/src/components/keypad/keypad-button.tsx +++ b/packages/math-input/src/components/keypad/keypad-button.tsx @@ -1,6 +1,6 @@ import Clickable from "@khanacademy/wonder-blocks-clickable"; import {View} from "@khanacademy/wonder-blocks-core"; -import {color} from "@khanacademy/wonder-blocks-tokens"; +import {semanticColor} from "@khanacademy/wonder-blocks-tokens"; import {StyleSheet} from "aphrodite"; import * as React from "react"; @@ -84,9 +84,9 @@ const styles = StyleSheet.create({ display: "flex", justifyContent: "center", alignItems: "center", - boxShadow: `0px 1px 0px ${color.offBlack32}`, + boxShadow: `0px 1px 0px ${semanticColor.core.shadow.chonky.neutral.subtle}`, boxSizing: "border-box", - background: color.white, + background: semanticColor.core.background.base.default, borderRadius: 4, borderWidth: 2, borderStyle: "solid", @@ -98,19 +98,19 @@ const styles = StyleSheet.create({ fontFamily: 'Lato, "Noto Sans", sans-serif', }, hovered: { - borderColor: color.blue, + borderColor: semanticColor.core.border.instructive.default, padding: 1, boxShadow: "none", }, focused: { - borderColor: color.blue, + borderColor: semanticColor.core.border.instructive.default, padding: 0, boxShadow: "none", }, pressed: { border: "2px solid #1B50B3", padding: 0, - background: `linear-gradient(0deg, rgba(24, 101, 242, 0.32), rgba(24, 101, 242, 0.32)), ${color.white}`, + background: `linear-gradient(0deg, rgba(24, 101, 242, 0.32), rgba(24, 101, 242, 0.32)), ${semanticColor.core.background.base.default}`, boxShadow: "none", }, outerBoxBase: { diff --git a/packages/math-input/src/components/keypad/keypad-mathquill.stories.tsx b/packages/math-input/src/components/keypad/keypad-mathquill.stories.tsx index 7c44b19d232..8830f1f4cc1 100644 --- a/packages/math-input/src/components/keypad/keypad-mathquill.stories.tsx +++ b/packages/math-input/src/components/keypad/keypad-mathquill.stories.tsx @@ -1,5 +1,5 @@ import {Popover, PopoverContentCore} from "@khanacademy/wonder-blocks-popover"; -import {color, spacing} from "@khanacademy/wonder-blocks-tokens"; +import {semanticColor, spacing} from "@khanacademy/wonder-blocks-tokens"; import * as React from "react"; import {mockStrings} from "../../strings"; @@ -107,7 +107,7 @@ export function V2KeypadWithMathquill() { style={{ width: "100%", marginBottom: "1em", - border: `1px solid ${color.offBlack16}`, + border: `1px solid ${semanticColor.core.border.neutral.subtle}`, }} ref={mathFieldWrapperRef} /> diff --git a/packages/math-input/src/components/keypad/navigation-button.tsx b/packages/math-input/src/components/keypad/navigation-button.tsx index fd81bea6d22..40a1bd23750 100644 --- a/packages/math-input/src/components/keypad/navigation-button.tsx +++ b/packages/math-input/src/components/keypad/navigation-button.tsx @@ -1,6 +1,6 @@ import Clickable from "@khanacademy/wonder-blocks-clickable"; import {View} from "@khanacademy/wonder-blocks-core"; -import {color} from "@khanacademy/wonder-blocks-tokens"; +import {semanticColor} from "@khanacademy/wonder-blocks-tokens"; import {StyleSheet} from "aphrodite"; import * as React from "react"; @@ -87,13 +87,13 @@ const styles = StyleSheet.create({ width: "100%", }, base: { - boxShadow: `0px 1px 0px ${color.offBlack32}`, + boxShadow: `0px 1px 0px ${semanticColor.core.shadow.chonky.neutral.subtle}`, display: "flex", justifyContent: "center", alignItems: "center", - background: color.white, + background: semanticColor.core.background.base.default, borderWidth: 2, - borderColor: color.white, + borderColor: semanticColor.core.border.knockout.default, }, up: { borderTopLeftRadius: borderRadiusPx, @@ -112,16 +112,16 @@ const styles = StyleSheet.create({ borderBottomLeftRadius: borderRadiusPx, }, hovered: { - borderColor: color.blue, + borderColor: semanticColor.core.border.instructive.default, boxShadow: "none", }, focused: { - borderColor: color.blue, + borderColor: semanticColor.core.border.instructive.default, boxShadow: "none", }, pressed: { border: "2px solid #1B50B3", - background: `linear-gradient(0deg, rgba(24, 101, 242, 0.32), rgba(24, 101, 242, 0.32)), ${color.white}`, + background: `linear-gradient(0deg, rgba(24, 101, 242, 0.32), rgba(24, 101, 242, 0.32)), ${semanticColor.core.background.base.default}`, boxShadow: "none", }, }); diff --git a/packages/math-input/src/components/keypad/navigation-pad.tsx b/packages/math-input/src/components/keypad/navigation-pad.tsx index 400e3d09642..4d36e98fae1 100644 --- a/packages/math-input/src/components/keypad/navigation-pad.tsx +++ b/packages/math-input/src/components/keypad/navigation-pad.tsx @@ -1,5 +1,5 @@ import {View} from "@khanacademy/wonder-blocks-core"; -import {color} from "@khanacademy/wonder-blocks-tokens"; +import {semanticColor} from "@khanacademy/wonder-blocks-tokens"; import {StyleSheet} from "aphrodite"; import * as React from "react"; @@ -65,6 +65,6 @@ const styles = StyleSheet.create({ spacer: { gridColumn: 2, gridRow: 2, - background: color.white, + background: semanticColor.core.background.base.default, }, }); From 14b00fd610baf4deead57e9d166a2f2df61a7fdd Mon Sep 17 00:00:00 2001 From: Juan Andrade Date: Thu, 12 Feb 2026 10:52:20 -0500 Subject: [PATCH 2/3] [wb-color2sc-3] Update jest snapshots --- .../__snapshots__/keypad.test.tsx.snap | 90 +++++++++---------- .../__snapshots__/mobile-keypad.test.tsx.snap | 32 +++---- .../__snapshots__/input-number.test.ts.snap | 2 +- .../__snapshots__/numeric-input.test.ts.snap | 2 +- 4 files changed, 63 insertions(+), 63 deletions(-) diff --git a/packages/math-input/src/components/keypad/__tests__/__snapshots__/keypad.test.tsx.snap b/packages/math-input/src/components/keypad/__tests__/__snapshots__/keypad.test.tsx.snap index 4f7a0dbdfc6..2980761a828 100644 --- a/packages/math-input/src/components/keypad/__tests__/__snapshots__/keypad.test.tsx.snap +++ b/packages/math-input/src/components/keypad/__tests__/__snapshots__/keypad.test.tsx.snap @@ -167,7 +167,7 @@ exports[`keypad should snapshot expanded: first render 1`] = ` class="default_xu2jcg-o_O-outerBoxBase_3w5jmh" >
@@ -1200,7 +1200,7 @@ exports[`keypad should snapshot unexpanded: first render 1`] = ` class="default_xu2jcg-o_O-outerBoxBase_3w5jmh" >
Date: Thu, 12 Feb 2026 10:52:52 -0500 Subject: [PATCH 3/3] [wb-color2sc-3] docs(changeset): Updates MathInput to use `semanticColor` tokens instead of the now deprecated WB color tokens. --- .changeset/tough-chicken-count.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/tough-chicken-count.md diff --git a/.changeset/tough-chicken-count.md b/.changeset/tough-chicken-count.md new file mode 100644 index 00000000000..c9596961709 --- /dev/null +++ b/.changeset/tough-chicken-count.md @@ -0,0 +1,5 @@ +--- +"@khanacademy/math-input": patch +--- + +Updates MathInput to use `semanticColor` tokens instead of the now deprecated WB color tokens.