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. 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__/__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" >
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, }, }); diff --git a/packages/perseus/src/widgets/input-number/__snapshots__/input-number.test.ts.snap b/packages/perseus/src/widgets/input-number/__snapshots__/input-number.test.ts.snap index 9ba93076ff9..c8c1ef60c96 100644 --- a/packages/perseus/src/widgets/input-number/__snapshots__/input-number.test.ts.snap +++ b/packages/perseus/src/widgets/input-number/__snapshots__/input-number.test.ts.snap @@ -176,7 +176,7 @@ exports[`rendering supports mobile rendering: mobile render 1`] = ` >