[ColorSync][math-input] Convert math-input font and colors to semantic tokens

.changeset/blue-kings-repeat.md

@@ -0,0 +1,6 @@
+---
+"@khanacademy/math-input": patch
+"@khanacademy/perseus": patch
+---
+
+Convert hardcoded colors and fonts in math-input components to semantic tokens (cursor-handle, keypad-button, navigation-button)

packages/math-input/src/__docs__/math-input-initial-state-regression.stories.tsx

@@ -0,0 +1,47 @@
+import * as React from "react";
+
+import {themeModes} from "../../../../.storybook/modes";
+import CursorHandle from "../components/input/cursor-handle";
+
+import type {Meta, StoryObj} from "@storybook/react-vite";
+
+const meta: Meta<typeof CursorHandle> = {
+    title: "Math Input/Components/Visual Regression Tests/Initial State",
+    component: CursorHandle,
+    tags: ["!autodocs", "!manifest"],
+    parameters: {
+        docs: {
+            description: {
+                component:
+                    "Regression tests for math-input components that do NOT " +
+                    "need any interactions to test.",
+            },
+        },
+        chromatic: {disableSnapshot: false, modes: themeModes},
+    },
+};
+export default meta;
+
+type Story = StoryObj<typeof CursorHandle>;
+
+// This component is touch-only in production and never reached via mouse
+// interactions, so it is tested here in isolation.
+export const CursorHandleVisible: Story = {
+    decorators: [
+        (Story) => (
+            <div style={{position: "relative", height: 100, width: 100}}>
+                <Story />
+            </div>
+        ),
+    ],
+    args: {
+        x: 50,
+        y: 20,
+        animateIntoPosition: false,
+        visible: true,
+        onTouchStart: () => {},
+        onTouchMove: () => {},
+        onTouchEnd: () => {},
+        onTouchCancel: () => {},
+    },
+};

packages/math-input/src/__docs__/math-input-interactions-regression.stories.tsx

@@ -0,0 +1,47 @@
+import * as React from "react";
+import {action} from "storybook/actions";
+
+import {themeModes} from "../../../../.storybook/modes";
+import NavigationPad from "../components/keypad/navigation-pad";
+
+import TintedBackgroundDecorator from "./tinted-background-decorator";
+
+import type {Meta, StoryObj} from "@storybook/react-vite";
+
+const meta: Meta<typeof NavigationPad> = {
+    title: "Math Input/Components/Visual Regression Tests/Interactions",
+    component: NavigationPad,
+    tags: ["!autodocs", "!manifest"],
+    parameters: {
+        docs: {
+            description: {
+                component:
+                    "Regression tests for math-input components that DO need " +
+                    "interactions to test.",
+            },
+        },
+        chromatic: {disableSnapshot: false, modes: themeModes},
+    },
+    decorators: [
+        (Story) => (
+            <div style={{padding: 50}}>
+                <Story />
+            </div>
+        ),
+        TintedBackgroundDecorator,
+    ],
+    args: {
+        onClickKey: action("onClickKey"),
+    },
+};
+export default meta;
+
+type Story = StoryObj<typeof NavigationPad>;
+
+// NavigationPad renders inline (not a portal) so canvas queries work directly.
+export const NavigationButtonPressed: Story = {
+    play: async ({canvas, userEvent}) => {
+        const button = canvas.getByRole("button", {name: "Left arrow"});
+        await userEvent.pointer({target: button, keys: "[MouseLeft>]"});
+    },
+};

packages/math-input/src/components/input/cursor-handle.tsx

@@ -1,7 +1,8 @@
 /**
- * Renders the green tear-shaped handle under the cursor.
+ * Renders the blue tear-shaped handle under the cursor.
  */
 
+import {semanticColor} from "@khanacademy/wonder-blocks-tokens";
 import * as React from "react";
 
 import {
@@ -118,12 +119,15 @@ class CursorHandle extends React.Component<Props> {
                     <g filter="url(#math-input_cursor)">
                         <path
                             d="m22 4-7.07 7.0284c-1.3988 1.3901-2.3515 3.1615-2.7376 5.09-.3861 1.9284-.1883 3.9274.5685 5.7441s2.0385 3.3694 3.6831 4.4619c1.6445 1.0925 3.5781 1.6756 5.556 1.6756s3.9115-.5831 5.556-1.6756c1.6446-1.0925 2.9263-2.6452 3.6831-4.4619s.9546-3.8157.5685-5.7441c-.3861-1.9285-1.3388-3.6999-2.7376-5.09z"
-                            fill="#1865f2"
+                            fill={
+                                semanticColor.core.foreground.instructive
+                                    .default
+                            }
                         />
                     </g>
                     <path
                         d="m14.9301 10.4841 7.0699-7.06989 7.0699 7.06989.0001.0001c1.3988 1.3984 2.3515 3.1802 2.7376 5.1201s.1883 3.9507-.5685 5.7782c-.7568 1.8274-2.0385 3.3894-3.6831 4.4883-1.6445 1.099-3.5781 1.6855-5.556 1.6855s-3.9115-.5865-5.556-1.6855c-1.6446-1.0989-2.9263-2.6609-3.6831-4.4883-.7568-1.8275-.9546-3.8383-.5685-5.7782s1.3388-3.7217 2.7376-5.1201z"
-                        stroke="#fff"
+                        stroke={semanticColor.core.foreground.knockout.default}
                         strokeWidth="2"
                     />
                 </svg>