[ColorSync] Convert label-image widget to CSS Modules

.changeset/stupid-pumas-fetch.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": patch
+---
+
+Converted label-image widget Aphrodite styles to CSS modules across answer-pill, hide-answers-toggle, marker, and label-image.

.claude/plans/label-image-css-modules-progress-report-2.md

@@ -0,0 +1,119 @@
+# Label Image Widget — CSS Modules Progress Report 2
+
+Co-Authored-By: Claude Sonnet 4.6 <[email protected]>
+
+---
+
+## Step 1 — CSS Module Conversion
+
+### Files identified for conversion (StyleSheet.create usage)
+
+- `packages/perseus/src/widgets/label-image/marker.tsx`
+- `packages/perseus/src/widgets/label-image/hide-answers-toggle.tsx`
+- `packages/perseus/src/widgets/label-image/label-image.tsx`
+- `packages/perseus/src/widgets/label-image/answer-pill.tsx`
+- `packages/perseus/src/widgets/label-image/__stories__/marker.stories.tsx`
+
+### Conversion Results
+
+#### answer-pill.tsx
+- Command: `pnpm extract-css packages/perseus/src/widgets/label-image/answer-pill.tsx --keep-aphrodite`
+- Output: `answer-pill.module.css`, `answer-pill_legacy-styles.js`
+- TODOs: None
+- Issues: None
+
+#### hide-answers-toggle.tsx
+- Command: `pnpm extract-css packages/perseus/src/widgets/label-image/hide-answers-toggle.tsx --keep-aphrodite`
+- Output: `hide-answers-toggle.module.css`, `hide-answers-toggle_legacy-styles.js`
+- TODOs: None
+- Issues: None
+
+#### marker.tsx
+- Command: `pnpm extract-css packages/perseus/src/widgets/label-image/marker.tsx --keep-aphrodite`
+- Output: `marker.module.css`, `marker_legacy-styles.js`
+- TODOs: None
+- Manual fixes required (same as run 1 — these are fundamental script limitations for dynamic values):
+  1. `margin-left` and `margin-top` were unresolvable binary expressions (`MARKER_SIZE / -2`). Resolved to `-1.2rem`. Also added to `marker_legacy-styles.js`.
+  2. Aphrodite `animationName` inline keyframes emitted as invalid class names. Replaced with a proper `@keyframes marker-pulsate` block and added `animation-name: marker-pulsate` to `.marker-pulsate-base`.
+
+#### label-image.tsx
+- Command: `pnpm extract-css packages/perseus/src/widgets/label-image/label-image.tsx --keep-aphrodite`
+- Output: `label-image.module.css`, `label-image_legacy-styles.js`
+- Script ran successfully (updated script fixed the `satisfies` expression crash)
+- TODOs: None
+- Manual fix required: `.instructions-caption` received spread properties from `bodyXsmallBold` in camelCase JS format (`fontFamily`, `fontSize`, etc.) instead of CSS kebab-case. Corrected to `font-family`, `font-size` (with `px` unit), `font-weight`, `line-height`.
+
+#### __stories__/marker.stories.tsx
+- Command: `pnpm extract-css packages/perseus/src/widgets/label-image/__stories__/marker.stories.tsx --keep-aphrodite`
+- Output: `__stories__/marker.module.css`, `__stories__/marker_legacy-styles.js`
+- TODOs: None
+- Issues: None
+
+---
+
+## Step 2 — Pre-Push Quality Checks
+
+### `pnpm lint`
+- Result: PASS (0 errors, 0 warnings)
+- Issues fixed:
+  - All files: removed unused `stylesLegacy` imports and `.js` extensions; moved CSS module imports to correct position after relative imports.
+  - `marker.tsx`: removed unused `boxShadow` import.
+  - `label-image.tsx`: removed unused `semanticColor`, `bodyXsmallBold` imports; replaced all `css(styles.xxx)` calls with `styles.xxx` / `classNames(...)`.
+  - `answer-pill.tsx`: replaced `CSSProperties` (from removed aphrodite import) with `React.CSSProperties`.
+  - `marker.stories.tsx`: replaced `css(styles.wrapper)` with `styles.wrapper`.
+
+### `pnpm tsc`
+- Result: PASS (no output)
+
+### `pnpm test`
+- Result: PASS
+- Test Suites: 472 passed, 472 total
+- Tests: 6441 passed, 36 skipped, 6477 total
+
+---
+
+## Step 3 — Deviation Check
+
+### Pre-workflow — Progress Report Creation
+- **Followed as instructed:** Partially
+- **Deviations:** Filename is `label-image-css-modules-progress-report-2.md` instead of the required `label-image-css-modules-progress-report.md`. The `-2` suffix was added to preserve the first run as historical context.
+- **Type:** Intentional — user requested.
+- **Recommended Action:** No action needed
+
+### Step 1 — CSS Module Conversion
+
+#### GATE CHECK
+- **Followed as instructed:** Yes
+- **Deviations:** None — file list recorded in progress report before any script runs.
+- **Type:** N/A
+- **Recommended Action:** No action needed
+
+#### File identification
+- **Followed as instructed:** Yes
+- **Deviations:** None — used built-in Grep tool as specified in updated instructions.
+- **Type:** N/A
+- **Recommended Action:** No action needed
+
+#### Script execution and TODO review
+- **Followed as instructed:** Yes
+- **Deviations:** None — script run once per file with `--keep-aphrodite`, both `.module.css` and `.tsx` outputs checked for `// TODO` comments after each run. Legacy styles files left with their `// TODO (LEMS-3815)` comment untouched.
+- **Type:** N/A
+- **Recommended Action:** No action needed
+
+#### `marker.tsx` — binary expressions and keyframes
+- **Followed as instructed:** Partially
+- **Deviations:** Same two issues as run 1. `margin-left`/`margin-top` binary expressions (`MARKER_SIZE / -2`) and Aphrodite inline keyframes could not be resolved by the script. Manually fixed to `-1.2rem` and a proper `@keyframes` block.
+- **Type:** Unintentional — fundamental script limitation for runtime-computed values; not fixable by the script update.
+- **Recommended Action:** Document in PR. Worth noting to the script author as a known limitation.
+
+#### `label-image.tsx` — spread properties in camelCase
+- **Followed as instructed:** Partially
+- **Deviations:** The updated script handled the `satisfies` crash, but `bodyXsmallBold` spread properties were emitted in camelCase JS format (`fontFamily`, `fontSize: 15` without unit) instead of valid CSS. Manually corrected to kebab-case with proper units.
+- **Type:** Unintentional — script bug in how it converts spread element property names.
+- **Recommended Action:** Document in PR. Worth reporting to the script author as a new bug found in the spread handling feature.
+
+### Step 2 — Pre-Push Quality Checks
+- **Followed as instructed:** Yes
+- **Deviations:** None — all three checks run, all failures fixed before proceeding.
+- **Type:** N/A
+- **Recommended Action:** No action needed

packages/perseus/src/widgets/label-image/__stories__/marker.module.css

@@ -0,0 +1,5 @@
+.wrapper {
+    height: 3.2rem;
+    position: relative;
+    width: 3.2rem;
+}

packages/perseus/src/widgets/label-image/__stories__/marker.stories.tsx

@@ -1,8 +1,9 @@
-import {StyleSheet, css} from "aphrodite";
 import * as React from "react";
 
 import Marker from "../marker";
 
+import styles from "./marker.module.css";
+
 type StoryArgs = Record<any, any>;
 
 type Story = {
@@ -14,17 +15,8 @@ export default {
     tags: ["!dev"],
 } as Story;
 
-const styles = StyleSheet.create({
-    wrapper: {
-        position: "relative",
-
-        width: 32,
-        height: 32,
-    },
-});
-
 const Wrapper = (props) => (
-    <div className={css(styles.wrapper)}>
+    <div className={styles.wrapper}>
         <Marker {...props} />
     </div>
 );

packages/perseus/src/widgets/label-image/__stories__/marker_legacy-styles.js

@@ -0,0 +1,6 @@
+// TODO (LEMS-3815): Remove this file
+const styles = {
+    wrapper: {height: "3.2rem", position: "relative", width: "3.2rem"},
+};
+
+export default styles;

packages/perseus/src/widgets/label-image/answer-pill.module.css

@@ -0,0 +1,15 @@
+.correct {
+    background-color: var(--wb-semanticColor-core-background-success-strong);
+}
+
+.incorrect {
+    background-color: var(--wb-semanticColor-core-background-neutral-default);
+}
+
+.pill {
+    /*
+          Reset the Pill's default height in order to account
+          for multi-line pills.
+        */
+    height: auto;
+}

packages/perseus/src/widgets/label-image/answer-pill.tsx

@@ -1,14 +1,15 @@
 import Pill from "@khanacademy/wonder-blocks-pill";
 import {semanticColor} from "@khanacademy/wonder-blocks-tokens";
-import {StyleSheet, type CSSProperties} from "aphrodite";
 import * as React from "react";
 import {useId} from "react";
 import {Popper} from "react-popper";
 
 import {usePerseusI18n} from "../../components/i18n-context";
 import Renderer from "../../renderer";
 
-const BringToFront: CSSProperties = {
+import styles from "./answer-pill_legacy-styles";
+
+const BringToFront: React.CSSProperties = {
     boxShadow: `0 8px 8px ${semanticColor.core.border.neutral.default}`,
     zIndex: 1000,
 };
@@ -18,7 +19,7 @@ export const AnswerPill = (props: {
     showCorrectness?: "correct" | "incorrect";
     markerRef?: HTMLElement;
     side: "top" | "bottom" | "left" | "right";
-    style?: CSSProperties;
+    style?: React.CSSProperties;
     hovered?: boolean;
     focused?: boolean;
     onClick?: () => void;
@@ -82,17 +83,3 @@ export const AnswerPill = (props: {
         </Popper>
     );
 };
-
-const styles = StyleSheet.create({
-    correct: {
-        backgroundColor: semanticColor.core.background.success.strong,
-    },
-    incorrect: {
-        backgroundColor: semanticColor.core.background.neutral.default,
-    },
-    pill: {
-        // Reset the Pill's default height in order to account
-        // for multi-line pills.
-        height: "auto",
-    },
-});

packages/perseus/src/widgets/label-image/answer-pill_legacy-styles.js

@@ -0,0 +1,14 @@
+// TODO (LEMS-3815): Remove this file
+const styles = {
+    correct: {
+        backgroundColor:
+            "var(--wb-semanticColor-core-background-success-strong)",
+    },
+    incorrect: {
+        backgroundColor:
+            "var(--wb-semanticColor-core-background-neutral-default)",
+    },
+    pill: {height: "auto"},
+};
+
+export default styles;

packages/perseus/src/widgets/label-image/hide-answers-toggle.module.css

@@ -0,0 +1,8 @@
+.switch-wrapper {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap-reverse;
+    gap: 0.5em;
+    margin-top: 1em;
+}

packages/perseus/src/widgets/label-image/hide-answers-toggle.tsx

@@ -1,12 +1,13 @@
 import {View} from "@khanacademy/wonder-blocks-core";
 import Switch from "@khanacademy/wonder-blocks-switch";
 import {LabelMedium} from "@khanacademy/wonder-blocks-typography";
-import {StyleSheet} from "aphrodite";
 import * as React from "react";
 import {useId} from "react";
 
 import {usePerseusI18n} from "../../components/i18n-context";
 
+import styles from "./hide-answers-toggle_legacy-styles";
+
 export const HideAnswersToggle = (props: {
     areAnswersHidden: boolean;
     onChange: React.ComponentPropsWithoutRef<typeof Switch>["onChange"];
@@ -28,14 +29,3 @@ export const HideAnswersToggle = (props: {
         </View>
     );
 };
-
-const styles = StyleSheet.create({
-    switchWrapper: {
-        display: "flex",
-        flexDirection: "row",
-        flexWrap: "wrap-reverse",
-        alignItems: "center",
-        gap: "0.5em",
-        marginTop: "1em",
-    },
-});

packages/perseus/src/widgets/label-image/hide-answers-toggle_legacy-styles.js

@@ -0,0 +1,13 @@
+// TODO (LEMS-3815): Remove this file
+const styles = {
+    switchWrapper: {
+        alignItems: "center",
+        display: "flex",
+        flexDirection: "row",
+        flexWrap: "wrap-reverse",
+        gap: "0.5em",
+        marginTop: "1em",
+    },
+};
+
+export default styles;

packages/perseus/src/widgets/label-image/label-image.module.css

@@ -0,0 +1,51 @@
+.image-container {
+    /*
+          Remove the additional height added due to white-spacing, this ensures
+          markers canvas will have the same height as the question image.
+        */
+    display: flex;
+}
+
+.image-interaction-disabled {
+    pointer-events: none;
+}
+
+.instructions {
+    padding-bottom: 1.6rem;
+}
+
+.instructions-caption {
+    font-family: inherit;
+    font-size: 15px;
+    font-weight: bold;
+    line-height: 22px;
+    padding-bottom: 1.6rem;
+}
+
+.instructions-choice {
+    align-items: center;
+    display: flex;
+    margin: 0.8rem 0;
+}
+
+.instructions-choice:not(:last-child)::after {
+    background: var(--wb-semanticColor-core-border-neutral-default);
+    border-radius: 2px;
+    content: "";
+    display: inline-block;
+    height: 0.2rem;
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+    position: relative;
+    width: 0.2rem;
+}
+
+.instructions-choices {
+    display: flex;
+    flex-wrap: wrap;
+    margin: -0.8rem 0;
+}
+
+.markers-canvas {
+    position: relative;
+}