[LX] Make static graphs' interactive elements visually disabled (#2287)

## Summary:
Right now, a static graph looks exactly the same as a regular graph that can be interacted with.

To distinguish graphs as disabled visually when in static mode, update the color so that the
graph elements use Wonder Blocks `offBlack50` when in static mode.

I also did some refactoring to make the way we code colors uniform across all the graphs.

NOTE: You may notice that `offBlack50` is not the best for contrast. However, it needs to be distinguishable
from our regular interactive blue so it's clearly disabled. When using a darker gray, it looks the same as
our WB blue in grayscale. We had to make a call here, and we decided to make it lighter and more
distinguishable even if it sacrifices color contrast.

Issue: https://khanacademy.atlassian.net/browse/LEMS-2784

## Test plan:
`yarn jest packages/perseus/src/widgets/interactive-graphs/interactive-graph-static.test.tsx`

Storybook
- Go to http://localhost:6006/?path=/docs/perseuseditor-widgets-interactive-graph--docs
- For all graph types, use the "Static" toggle at the top of the editor to set the
  graph into static mode.
- Confirm that the interactive elements are no longer blue.

| Interactive | Static |
| --- | --- |
| <img width="442" alt="Screenshot 2025-03-06 at 5 54 08 PM" src="https://github.com/user-attachments/assets/abbd2b0d-5a30-47aa-b05b-ce938ca93f06" /> | <img width="441" alt="Screenshot 2025-03-06 at 5 54 14 PM" src="https://github.com/user-attachments/assets/3674a65c-5e1f-40a1-ab9a-6d853f529d3a" /> |

Author: nishasy

Reviewers: nishasy, SonicScrewdriver, catandthemachines

Required Reviewers:

Approved By: SonicScrewdriver

Checks: ✅ 8 checks were successful

Pull Request URL: #2287

Author: nishasy

.changeset/rotten-cups-pay.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": patch
+---
+
+[LX] Make static graphs' interactive elements visually disabled

packages/perseus/src/widgets/interactive-graphs/__snapshots__/interactive-graph.test.tsx.snap

@@ -45,7 +45,7 @@ export function renderAngleGraph(
 
 function AngleGraph(props: AngleGraphProps) {
     const {dispatch, graphState} = props;
-    const {graphDimensionsInPixels} = useGraphConfig();
+    const {graphDimensionsInPixels, interactiveColor} = useGraphConfig();
     const i18n = usePerseusI18n();
     const id = React.useId();
     const descriptionId = id + "-description";
@@ -83,14 +83,15 @@ function AngleGraph(props: AngleGraphProps) {
                     start={startPtPx}
                     end={endPtPx}
                     style={{
-                        stroke: "var(--movable-line-stroke-color)",
+                        stroke: interactiveColor,
                         strokeWidth: "var(--movable-line-stroke-weight)",
                     }}
+                    testId="angle-graph__line"
                 />
                 <Vector
                     tail={angleLines[i][1]}
                     tip={endExtend}
-                    color={"var(--movable-line-stroke-color)"}
+                    testId="angle-graph__vector"
                 />
             </g>
         );

packages/perseus/src/widgets/interactive-graphs/graphs/angle.tsx

@@ -129,7 +129,8 @@ function MovableCircle(props: {
     onMove: (newCenter: vec.Vector2) => unknown;
 }) {
     const {id, ariaLabel, ariaDescribedBy, center, radius, onMove} = props;
-    const {snapStep, disableKeyboardInteraction} = useGraphConfig();
+    const {snapStep, disableKeyboardInteraction, interactiveColor} =
+        useGraphConfig();
     const [focused, setFocused] = React.useState(false);
 
     const draggableRef = useRef<SVGGElement>(null);
@@ -170,6 +171,8 @@ function MovableCircle(props: {
                 cy={centerPx[Y]}
                 rx={radiiPx[X]}
                 ry={radiiPx[Y]}
+                stroke={interactiveColor}
+                data-testid="movable-circle__circle"
             />
             <DragHandle center={center} dragging={dragging} focused={focused} />
         </g>
@@ -186,7 +189,7 @@ function DragHandle(props: {
     const {center, dragging, focused} = props;
 
     const [centerPx] = useTransformVectorsToPixels(center);
-    const {markings} = useGraphConfig();
+    const {markings, interactiveColor} = useGraphConfig();
 
     const cornerRadius = Math.min(...dragHandleDimensions) / 2;
     const topLeft = vec.sub(centerPx, vec.scale(dragHandleDimensions, 0.5));
@@ -204,6 +207,8 @@ function DragHandle(props: {
                 height={dragHandleDimensions[Y]}
                 rx={cornerRadius}
                 ry={cornerRadius}
+                fill={interactiveColor}
+                data-testid="movable-circle__handle"
             />
             {dragHandleDotPositions.map((offsetPx) => {
                 const [xPx, yPx] = vec.add(offsetPx, centerPx);

packages/perseus/src/widgets/interactive-graphs/graphs/circle.tsx

@@ -58,7 +58,7 @@ exports[`Rendering Does NOT render extensions of line when option is disabled 1`
           aria-hidden="true"
           class=""
           data-testid="movable-line__line"
-          style="stroke: var(--movable-line-stroke-color); stroke-width: var(--movable-line-stroke-weight);"
+          style="stroke: var(--mafs-blue); stroke-width: var(--movable-line-stroke-weight);"
           x1="0"
           x2="0"
           y1="0"
@@ -77,7 +77,7 @@ exports[`Rendering Does NOT render extensions of line when option is disabled 1`
         aria-hidden="true"
         class="movable-point"
         data-testid="movable-point"
-        style="--movable-point-color: #1865f2;"
+        style="--movable-point-color: var(--mafs-blue);"
       >
         <circle
           class="movable-point-hitbox"
@@ -105,14 +105,14 @@ exports[`Rendering Does NOT render extensions of line when option is disabled 1`
           cx="0"
           cy="0"
           data-testid="movable-point__center"
-          style="fill: #1865f2;"
+          style="fill: var(--mafs-blue);"
         />
       </g>
       <g
         aria-hidden="true"
         class="movable-point"
         data-testid="movable-point"
-        style="--movable-point-color: #1865f2;"
+        style="--movable-point-color: var(--mafs-blue);"
       >
         <circle
           class="movable-point-hitbox"
@@ -140,7 +140,7 @@ exports[`Rendering Does NOT render extensions of line when option is disabled 1`
           cx="0"
           cy="0"
           data-testid="movable-point__center"
-          style="fill: #1865f2;"
+          style="fill: var(--mafs-blue);"
         />
       </g>
     </svg>
@@ -206,7 +206,7 @@ exports[`Rendering Does NOT render extensions of line when option is not provide
           aria-hidden="true"
           class=""
           data-testid="movable-line__line"
-          style="stroke: var(--movable-line-stroke-color); stroke-width: var(--movable-line-stroke-weight);"
+          style="stroke: var(--mafs-blue); stroke-width: var(--movable-line-stroke-weight);"
           x1="0"
           x2="0"
           y1="0"
@@ -225,7 +225,7 @@ exports[`Rendering Does NOT render extensions of line when option is not provide
         aria-hidden="true"
         class="movable-point"
         data-testid="movable-point"
-        style="--movable-point-color: #1865f2;"
+        style="--movable-point-color: var(--mafs-blue);"
       >
         <circle
           class="movable-point-hitbox"
@@ -253,14 +253,14 @@ exports[`Rendering Does NOT render extensions of line when option is not provide
           cx="0"
           cy="0"
           data-testid="movable-point__center"
-          style="fill: #1865f2;"
+          style="fill: var(--mafs-blue);"
         />
       </g>
       <g
         aria-hidden="true"
         class="movable-point"
         data-testid="movable-point"
-        style="--movable-point-color: #1865f2;"
+        style="--movable-point-color: var(--mafs-blue);"
       >
         <circle
           class="movable-point-hitbox"
@@ -288,7 +288,7 @@ exports[`Rendering Does NOT render extensions of line when option is not provide
           cx="0"
           cy="0"
           data-testid="movable-point__center"
-          style="fill: #1865f2;"
+          style="fill: var(--mafs-blue);"
         />
       </g>
     </svg>
@@ -354,15 +354,16 @@ exports[`Rendering Does render extensions of line when option is enabled 1`] = `
           aria-hidden="true"
           class=""
           data-testid="movable-line__line"
-          style="stroke: var(--movable-line-stroke-color); stroke-width: var(--movable-line-stroke-weight);"
+          style="stroke: var(--mafs-blue); stroke-width: var(--movable-line-stroke-weight);"
           x1="0"
           x2="0"
           y1="0"
           y2="0"
         />
       </g>
       <g
-        style="stroke: var(--movable-line-stroke-color); stroke-width: 2;"
+        data-testid="movable-line__vector"
+        style="stroke: var(--mafs-blue); stroke-width: 2;"
       >
         <line
           aria-hidden="true"
@@ -385,13 +386,14 @@ exports[`Rendering Does render extensions of line when option is enabled 1`] = `
               stroke-linecap="round"
               stroke-linejoin="round"
               stroke-width="2px"
-              style="stroke: var(--movable-line-stroke-color);"
+              style="stroke: var(--mafs-blue);"
             />
           </g>
         </g>
       </g>
       <g
-        style="stroke: var(--movable-line-stroke-color); stroke-width: 2;"
+        data-testid="movable-line__vector"
+        style="stroke: var(--mafs-blue); stroke-width: 2;"
       >
         <line
           aria-hidden="true"
@@ -414,7 +416,7 @@ exports[`Rendering Does render extensions of line when option is enabled 1`] = `
               stroke-linecap="round"
               stroke-linejoin="round"
               stroke-width="2px"
-              style="stroke: var(--movable-line-stroke-color);"
+              style="stroke: var(--mafs-blue);"
             />
           </g>
         </g>
@@ -431,7 +433,7 @@ exports[`Rendering Does render extensions of line when option is enabled 1`] = `
         aria-hidden="true"
         class="movable-point"
         data-testid="movable-point"
-        style="--movable-point-color: #1865f2;"
+        style="--movable-point-color: var(--mafs-blue);"
       >
         <circle
           class="movable-point-hitbox"
@@ -459,14 +461,14 @@ exports[`Rendering Does render extensions of line when option is enabled 1`] = `
           cx="0"
           cy="0"
           data-testid="movable-point__center"
-          style="fill: #1865f2;"
+          style="fill: var(--mafs-blue);"
         />
       </g>
       <g
         aria-hidden="true"
         class="movable-point"
         data-testid="movable-point"
-        style="--movable-point-color: #1865f2;"
+        style="--movable-point-color: var(--mafs-blue);"
       >
         <circle
           class="movable-point-hitbox"
@@ -494,7 +496,7 @@ exports[`Rendering Does render extensions of line when option is enabled 1`] = `
           cx="0"
           cy="0"
           data-testid="movable-point__center"
-          style="fill: #1865f2;"
+          style="fill: var(--mafs-blue);"
         />
       </g>
     </svg>

packages/perseus/src/widgets/interactive-graphs/graphs/components/__snapshots__/movable-line.test.tsx.snap

@@ -4,6 +4,7 @@ import {vec} from "mafs";
 import * as React from "react";
 
 import {segmentsIntersect} from "../../math";
+import useGraphConfig from "../../reducer/use-graph-config";
 import {getIntersectionOfRayWithBox as getRangeIntersectionVertex} from "../utils";
 
 import {MafsCssTransformWrapper} from "./css-transform-wrapper";
@@ -231,6 +232,12 @@ export const Angle = ({
         radius,
     );
 
+    // Determine the color style for the arc when interactive vs disabled
+    const {disableKeyboardInteraction} = useGraphConfig();
+    const arcClassName = disableKeyboardInteraction
+        ? "angle-arc-static"
+        : "angle-arc-interactive";
+
     return (
         <>
             <defs>
@@ -251,10 +258,10 @@ export const Angle = ({
                     start={[x1, y1]}
                     vertex={[x2, y2]}
                     end={[x3, y3]}
-                    className={"arc-right-angle"}
+                    className={arcClassName}
                 />
             ) : (
-                <Arc arc={arc} className={"angle-arc"} />
+                <Arc arc={arc} className={arcClassName} />
             )}
             {showAngles && (
                 <TextLabel x={textX} y={textY} color={color.blue}>
@@ -291,6 +298,7 @@ const RightAngleSquare = ({
             strokeWidth={0.02}
             fill="none"
             className={className}
+            data-testid="angle-indicators__right-angle"
         />
     </MafsCssTransformWrapper>
 );
@@ -310,6 +318,7 @@ const Arc = ({arc, className}: {arc: string; className?: string}) => {
                 strokeWidth={0.02}
                 fill="none"
                 className={className}
+                data-testid="angle-indicators__arc"
             />
         </MafsCssTransformWrapper>
     );

packages/perseus/src/widgets/interactive-graphs/graphs/components/angle-indicators.tsx

@@ -25,7 +25,6 @@ type Props = {
     };
     // Extra graph information to be read by screen readers
     ariaDescribedBy?: string;
-    color?: string;
     /* Extends the line to the edge of the graph with an arrow */
     extend?: {
         start: boolean;
@@ -40,7 +39,6 @@ export const MovableLine = (props: Props) => {
         points: [start, end],
         ariaLabels,
         ariaDescribedBy,
-        color,
         extend,
         onMoveLine = () => {},
         onMovePoint = () => {},
@@ -76,7 +74,6 @@ export const MovableLine = (props: Props) => {
             ariaLive: ariaLives[0],
             point: start,
             sequenceNumber: 1,
-            color,
             onMove: (p) => {
                 setAriaLives(["polite", "off", "off"]);
                 onMovePoint(0, p);
@@ -94,7 +91,6 @@ export const MovableLine = (props: Props) => {
             ariaLive: ariaLives[1],
             point: end,
             sequenceNumber: 2,
-            color,
             onMove: (p) => {
                 setAriaLives(["off", "polite", "off"]);
                 onMovePoint(1, p);
@@ -113,7 +109,6 @@ export const MovableLine = (props: Props) => {
             ariaLive={ariaLives[2]}
             start={start}
             end={end}
-            stroke={color}
             extend={extend}
             onMove={(delta) => {
                 setAriaLives(["off", "off", "polite"]);
@@ -133,8 +128,6 @@ export const MovableLine = (props: Props) => {
     );
 };
 
-const defaultStroke = "var(--movable-line-stroke-color)";
-
 type LineProps = {
     start: vec.Vector2;
     end: vec.Vector2;
@@ -148,28 +141,20 @@ type LineProps = {
               start: boolean;
               end: boolean;
           };
-    stroke?: string | undefined;
     onMove: (delta: vec.Vector2) => unknown;
 };
 
 const Line = (props: LineProps) => {
-    const {
-        start,
-        end,
-        ariaLabel,
-        ariaDescribedBy,
-        ariaLive,
-        extend,
-        stroke = defaultStroke,
-        onMove,
-    } = props;
+    const {start, end, ariaLabel, ariaDescribedBy, ariaLive, extend, onMove} =
+        props;
 
     const [startPtPx, endPtPx] = useTransformVectorsToPixels(start, end);
     const {
         range,
         graphDimensionsInPixels,
         snapStep,
         disableKeyboardInteraction,
+        interactiveColor,
     } = useGraphConfig();
 
     let startExtend: vec.Vector2 | undefined = undefined;
@@ -235,7 +220,7 @@ const Line = (props: LineProps) => {
                     start={startPtPx}
                     end={endPtPx}
                     style={{
-                        stroke,
+                        stroke: interactiveColor,
                         strokeWidth: "var(--movable-line-stroke-weight)",
                     }}
                     className={dragging ? "movable-dragging" : ""}
@@ -245,9 +230,19 @@ const Line = (props: LineProps) => {
 
             {/* Draw extension vectors outside of movable area */}
             {startExtend && (
-                <Vector tail={start} tip={startExtend} color={stroke} />
+                <Vector
+                    tail={start}
+                    tip={startExtend}
+                    testId="movable-line__vector"
+                />
+            )}
+            {endExtend && (
+                <Vector
+                    tail={end}
+                    tip={endExtend}
+                    testId="movable-line__vector"
+                />
             )}
-            {endExtend && <Vector tail={end} tip={endExtend} color={stroke} />}
         </>
     );
 };