From c1fa649d7faa1551b8d25c7805346f472a7d3c9d Mon Sep 17 00:00:00 2001
From: Juan Andrade <juan@khanacademy.org@khanacademy.org>
Date: Wed, 11 Feb 2026 14:40:51 -0500
Subject: [PATCH 1/6] [wb-color2sc] Migrate color to semanticColor in
 perseus-editor

---
 .../__stories__/device-framer.stories.tsx      | 11 ++++++-----
 .../locked-figures-section.stories.tsx         |  4 ++--
 .../perseus-editor/src/components/checkbox.tsx | 17 +++++++++++++----
 .../src/components/coordinate-pair-input.tsx   |  6 +++---
 .../src/components/form-wrapped-text-field.tsx |  8 ++++----
 .../perseus-editor/src/components/heading.tsx  |  4 ++--
 .../src/widgets/expression-editor.tsx          | 12 ++++++++----
 .../interaction-editor/mathquill-input.tsx     |  6 +++---
 .../interactive-graph-correct-answer.tsx       |  4 ++--
 .../interactive-graph-description.tsx          |  4 ++--
 .../components/interactive-graph-settings.tsx  |  8 ++++----
 .../locked-figures/color-swatch.tsx            |  6 +++---
 .../locked-figures/ellipse-swatch.tsx          |  6 +++---
 .../locked-figures/line-swatch.tsx             |  4 ++--
 .../locked-figures/locked-ellipse-settings.tsx |  6 +++---
 .../locked-figures/locked-figure-aria.tsx      |  4 ++--
 .../locked-figures/locked-figure-select.tsx    |  4 ++--
 .../locked-function-settings.tsx               | 16 ++++++++++------
 .../locked-figures/locked-label-settings.tsx   |  6 ++++--
 .../locked-figures/locked-line-settings.tsx    |  8 ++++----
 .../locked-figures/locked-point-settings.tsx   |  8 ++++----
 .../locked-figures/locked-polygon-settings.tsx |  8 ++++----
 .../locked-figures/locked-vector-settings.tsx  | 10 +++++-----
 .../locked-figures/polygon-swatch.tsx          |  6 +++---
 .../start-coords/start-coords-angle.tsx        |  8 ++++----
 .../start-coords/start-coords-circle.tsx       |  4 ++--
 .../start-coords/start-coords-line.tsx         |  4 ++--
 .../start-coords/start-coords-point.tsx        |  4 ++--
 .../start-coords/start-coords-quadratic.tsx    |  8 ++++----
 .../start-coords/start-coords-sinusoid.tsx     |  8 ++++----
 .../src/widgets/radio/radio-status-pill.tsx    | 18 +++++++++++++-----
 31 files changed, 129 insertions(+), 101 deletions(-)

diff --git a/packages/perseus-editor/src/components/__stories__/device-framer.stories.tsx b/packages/perseus-editor/src/components/__stories__/device-framer.stories.tsx
index c1043a8f3e7..f69cd37aa11 100644
--- a/packages/perseus-editor/src/components/__stories__/device-framer.stories.tsx
+++ b/packages/perseus-editor/src/components/__stories__/device-framer.stories.tsx
@@ -1,4 +1,4 @@
-import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {semanticColor, spacing} from "@khanacademy/wonder-blocks-tokens";
 import * as React from "react";
 
 import DeviceFramer from "../device-framer";
@@ -17,16 +17,17 @@ const SampleContent = () => {
     return (
         <div
             style={{
-                backgroundColor: color.blue,
-                color: color.offWhite,
+                backgroundColor:
+                    semanticColor.core.background.instructive.default,
+                color: semanticColor.core.foreground.knockout.default,
                 width: "90%",
                 height: "300px",
                 padding: spacing.medium_16,
             }}
         >
             The DeviceFramer controls the size of the content inside the frame.
-            So there&apos;s not much to look at here except how large each
-            device type&apos;s size is.
+            So there's not much to look at here except how large each device
+            type's size is.
         </div>
     );
 };
diff --git a/packages/perseus-editor/src/components/__stories__/locked-figures-section.stories.tsx b/packages/perseus-editor/src/components/__stories__/locked-figures-section.stories.tsx
index 3935e631c9f..e7424367bb1 100644
--- a/packages/perseus-editor/src/components/__stories__/locked-figures-section.stories.tsx
+++ b/packages/perseus-editor/src/components/__stories__/locked-figures-section.stories.tsx
@@ -1,7 +1,7 @@
 import {ApiOptions} from "@khanacademy/perseus";
 import {getDefaultFigureForType} from "@khanacademy/perseus-core";
 import {View} from "@khanacademy/wonder-blocks-core";
-import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {semanticColor, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
 
@@ -74,7 +74,7 @@ const styles = StyleSheet.create({
         width: containerSize,
         padding: padding,
         marginInlineStart: spacing.medium_16,
-        border: `1px solid ${color.offBlack32}`,
+        border: `1px solid ${semanticColor.core.border.neutral.subtle}`,
         borderRadius: spacing.xxxSmall_4,
     },
 });
diff --git a/packages/perseus-editor/src/components/checkbox.tsx b/packages/perseus-editor/src/components/checkbox.tsx
index 0d39f8f9490..e2316ae542a 100644
--- a/packages/perseus-editor/src/components/checkbox.tsx
+++ b/packages/perseus-editor/src/components/checkbox.tsx
@@ -2,7 +2,7 @@
 /**
  * Reusable checkbox component.
  **/
-import {color} from "@khanacademy/wonder-blocks-tokens";
+import {semanticColor} from "@khanacademy/wonder-blocks-tokens";
 import {css, StyleSheet} from "aphrodite";
 import * as React from "react";
 
@@ -100,8 +100,14 @@ export default class Checkbox extends React.Component<CheckboxProps> {
                                             rx={borderRadius}
                                         />
                                         <path
-                                            fill={color.white}
-                                            stroke={color.white}
+                                            fill={
+                                                semanticColor.core.foreground
+                                                    .knockout.default
+                                            }
+                                            stroke={
+                                                semanticColor.core.foreground
+                                                    .knockout.default
+                                            }
                                             d="M4.98 7.41a0.58.58 0 1 0-0.81.81L6.47
                                  10.53c0.23.23.59.23.81
                                  0l4.55-4.55a0.58.58 0 0
@@ -111,7 +117,10 @@ export default class Checkbox extends React.Component<CheckboxProps> {
                                 )}
                                 {!checked && (
                                     <rect
-                                        fill={color.white}
+                                        fill={
+                                            semanticColor.core.foreground
+                                                .knockout.default
+                                        }
                                         stroke={gray68}
                                         width={size - 2 * padding}
                                         height={size - 2 * padding}
diff --git a/packages/perseus-editor/src/components/coordinate-pair-input.tsx b/packages/perseus-editor/src/components/coordinate-pair-input.tsx
index ef9edef101f..e47810cfccd 100644
--- a/packages/perseus-editor/src/components/coordinate-pair-input.tsx
+++ b/packages/perseus-editor/src/components/coordinate-pair-input.tsx
@@ -1,6 +1,6 @@
 import {View} from "@khanacademy/wonder-blocks-core";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
-import {color as wbColor, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {semanticColor, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {LabelMedium} from "@khanacademy/wonder-blocks-typography";
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
@@ -97,8 +97,8 @@ const styles = StyleSheet.create({
         width: spacing.xxxLarge_64,
     },
     errorField: {
-        borderColor: wbColor.red,
-        backgroundColor: wbColor.fadedRed8,
+        borderColor: semanticColor.core.border.critical.default,
+        backgroundColor: semanticColor.core.background.critical.subtle,
     },
 });
 
diff --git a/packages/perseus-editor/src/components/form-wrapped-text-field.tsx b/packages/perseus-editor/src/components/form-wrapped-text-field.tsx
index bc204f4b125..b899cec6df3 100644
--- a/packages/perseus-editor/src/components/form-wrapped-text-field.tsx
+++ b/packages/perseus-editor/src/components/form-wrapped-text-field.tsx
@@ -8,7 +8,7 @@
  * If you need to handle `onSubmit`, please use <TextField> directly with your
  * own <form> that wraps all text fields in the form.
  **/
-import {color, color as WBColor} from "@khanacademy/wonder-blocks-tokens";
+import {semanticColor} from "@khanacademy/wonder-blocks-tokens";
 import {StyleSheet, css} from "aphrodite";
 import * as React from "react";
 
@@ -150,8 +150,8 @@ class FormWrappedTextField extends React.Component<PropsWithForwardRef, State> {
         }
 
         const borderColorStyle = focused
-            ? focusBorderColor || WBColor.blue
-            : borderColor || WBColor.offBlack16;
+            ? focusBorderColor || semanticColor.core.border.instructive.default
+            : borderColor || semanticColor.core.border.neutral.default;
         extraStyles.border = `1px solid ${borderColorStyle}`;
 
         const wrappedIcon = icon && (
@@ -234,7 +234,7 @@ const styles = StyleSheet.create({
         marginBottom: 0,
     },
     defaultBackground: {
-        backgroundColor: color.white,
+        backgroundColor: semanticColor.core.background.base.default,
     },
     icon: {
         display: "flex",
diff --git a/packages/perseus-editor/src/components/heading.tsx b/packages/perseus-editor/src/components/heading.tsx
index d5b25347bd3..426b5d24da3 100644
--- a/packages/perseus-editor/src/components/heading.tsx
+++ b/packages/perseus-editor/src/components/heading.tsx
@@ -1,6 +1,6 @@
 import Clickable from "@khanacademy/wonder-blocks-clickable";
 import {View} from "@khanacademy/wonder-blocks-core";
-import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {semanticColor, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {LabelLarge} from "@khanacademy/wonder-blocks-typography";
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
@@ -49,7 +49,7 @@ const styles = StyleSheet.create({
         // match otherwise there's a gap from this header to the edge
         // of the editor borders.
         marginInline: -10,
-        backgroundColor: color.offBlack8,
+        backgroundColor: semanticColor.core.background.neutral.subtle,
         padding: spacing.xSmall_8,
         width: "calc(100% + 20px)",
     },
diff --git a/packages/perseus-editor/src/widgets/expression-editor.tsx b/packages/perseus-editor/src/widgets/expression-editor.tsx
index 2d6f0776e86..344ed526bbf 100644
--- a/packages/perseus-editor/src/widgets/expression-editor.tsx
+++ b/packages/perseus-editor/src/widgets/expression-editor.tsx
@@ -9,7 +9,11 @@ import Button from "@khanacademy/wonder-blocks-button";
 import {View} from "@khanacademy/wonder-blocks-core";
 import {Checkbox, LabeledTextField} from "@khanacademy/wonder-blocks-form";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
-import {color, sizing, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {
+    semanticColor,
+    sizing,
+    spacing,
+} from "@khanacademy/wonder-blocks-tokens";
 import {
     HeadingSmall,
     HeadingXSmall,
@@ -635,13 +639,13 @@ const styles = StyleSheet.create({
         flexDirection: "column",
     },
     answerStatusWrong: {
-        backgroundColor: color.fadedRed16,
+        backgroundColor: semanticColor.core.background.critical.subtle,
     },
     answerStatusCorrect: {
-        backgroundColor: color.fadedGreen16,
+        backgroundColor: semanticColor.core.background.success.subtle,
     },
     answerStatusUngraded: {
-        backgroundColor: color.fadedBlue16,
+        backgroundColor: semanticColor.core.background.base.strong,
     },
     buttonRow: {
         display: "flex",
diff --git a/packages/perseus-editor/src/widgets/interaction-editor/mathquill-input.tsx b/packages/perseus-editor/src/widgets/interaction-editor/mathquill-input.tsx
index f32eeabba76..89e121f1b80 100644
--- a/packages/perseus-editor/src/widgets/interaction-editor/mathquill-input.tsx
+++ b/packages/perseus-editor/src/widgets/interaction-editor/mathquill-input.tsx
@@ -1,6 +1,6 @@
 import {createMathField, useMathInputI18n} from "@khanacademy/math-input";
 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";
 import {useRef, useEffect} from "react";
@@ -79,8 +79,8 @@ const styles = StyleSheet.create({
         display: "inline-block",
         borderStyle: "solid",
         borderWidth: 1,
-        borderColor: color.offBlack50,
+        borderColor: semanticColor.core.border.neutral.default,
         borderRadius: 3,
-        background: color.white,
+        background: semanticColor.core.background.base.default,
     },
 });
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/components/interactive-graph-correct-answer.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/components/interactive-graph-correct-answer.tsx
index 6e6aaa8a825..b31075f94d5 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor/components/interactive-graph-correct-answer.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/components/interactive-graph-correct-answer.tsx
@@ -1,5 +1,5 @@
 import {View} from "@khanacademy/wonder-blocks-core";
-import {spacing, color} from "@khanacademy/wonder-blocks-tokens";
+import {spacing, semanticColor} from "@khanacademy/wonder-blocks-tokens";
 import {
     BodyMonospace,
     LabelXSmall,
@@ -27,7 +27,7 @@ export function InteractiveGraphCorrectAnswer(props: Props) {
                         style={{
                             paddingTop: spacing.xxSmall_6,
                             paddingBottom: spacing.xxSmall_6,
-                            color: color.offBlack64,
+                            color: semanticColor.core.foreground.neutral.subtle,
                         }}
                     >
                         Graph the correct answer in the graph below and ensure
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/components/interactive-graph-description.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/components/interactive-graph-description.tsx
index 8fbc6938136..b76fcdf4c8a 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor/components/interactive-graph-description.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/components/interactive-graph-description.tsx
@@ -1,7 +1,7 @@
 import {View} from "@khanacademy/wonder-blocks-core";
 import {TextArea, TextField} from "@khanacademy/wonder-blocks-form";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
-import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {semanticColor, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {LabelLarge, LabelXSmall} from "@khanacademy/wonder-blocks-typography";
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
@@ -79,7 +79,7 @@ export default function InteractiveGraphDescription(props: Props) {
 
 const styles = StyleSheet.create({
     caption: {
-        color: color.offBlack64,
+        color: semanticColor.core.foreground.neutral.subtle,
         paddingTop: spacing.xxSmall_6,
         paddingBottom: spacing.xxSmall_6,
     },
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/components/interactive-graph-settings.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/components/interactive-graph-settings.tsx
index e661d0f41fb..f40ad70fd70 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor/components/interactive-graph-settings.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/components/interactive-graph-settings.tsx
@@ -12,7 +12,7 @@ import Banner from "@khanacademy/wonder-blocks-banner";
 import Button from "@khanacademy/wonder-blocks-button";
 import {View} from "@khanacademy/wonder-blocks-core";
 import {Checkbox} from "@khanacademy/wonder-blocks-form";
-import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {semanticColor, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {css, StyleSheet} from "aphrodite";
 import * as React from "react";
 import _ from "underscore";
@@ -755,7 +755,7 @@ const styles = StyleSheet.create({
         marginTop: 0,
     },
     backgroundUrlInput: {
-        border: `1px solid ${color.offBlack32}`,
+        border: `1px solid ${semanticColor.core.border.neutral.subtle}`,
         borderRadius: spacing.xxxSmall_4,
         padding: spacing.xxxSmall_4,
     },
@@ -767,10 +767,10 @@ const styles = StyleSheet.create({
     },
     protractorSection: {
         marginTop: spacing.xSmall_8,
-        borderTop: `1px solid ${color.offBlack16}`,
+        borderTop: `1px solid ${semanticColor.core.border.neutral.subtle}`,
         paddingTop: spacing.xSmall_8,
         paddingBottom: spacing.xSmall_8,
-        borderBottom: `1px solid ${color.offBlack16}`,
+        borderBottom: `1px solid ${semanticColor.core.border.neutral.subtle}`,
     },
 });
 
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/color-swatch.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/color-swatch.tsx
index 78d1512d2e5..b126edfc04e 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/color-swatch.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/color-swatch.tsx
@@ -3,7 +3,7 @@ import {
     type LockedFigureColor,
 } from "@khanacademy/perseus-core";
 import {View} from "@khanacademy/wonder-blocks-core";
-import {color as wbColor, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {semanticColor, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
 
@@ -30,7 +30,7 @@ const ColorSwatch = (props: Props) => {
                     border: `4px solid ${lockedFigureColors[color]}`,
                     backgroundColor: filled
                         ? lockedFigureColors[color]
-                        : wbColor.white,
+                        : semanticColor.core.background.base.default,
                 },
             ]}
         />
@@ -41,7 +41,7 @@ const styles = StyleSheet.create({
     colorSwatch: {
         // Add a white outline so that the color swatch is visible when
         // the dropdown option is highlighted with its blue background.
-        outline: `2px solid ${wbColor.offWhite}`,
+        outline: `2px solid ${semanticColor.focus.outer}`,
         borderRadius: "50%",
         width: spacing.large_24,
         height: spacing.large_24,
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/ellipse-swatch.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/ellipse-swatch.tsx
index bbb9194b3b3..b6849162bdc 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/ellipse-swatch.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/ellipse-swatch.tsx
@@ -3,7 +3,7 @@ import {
     lockedFigureFillStyles,
 } from "@khanacademy/perseus-core";
 import {View} from "@khanacademy/wonder-blocks-core";
-import {color as wbColor, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {semanticColor, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
 
@@ -51,11 +51,11 @@ const styles = StyleSheet.create({
     container: {
         // Add a white outline so that the color swatch is visible when
         // the dropdown option is highlighted with its blue background.
-        outline: `2px solid ${wbColor.offWhite}`,
+        outline: `2px solid ${semanticColor.focus.outer}`,
         borderRadius: "50%",
         width: spacing.xLarge_32,
         height: spacing.large_24,
-        backgroundColor: wbColor.white,
+        backgroundColor: semanticColor.core.background.base.default,
         alignItems: "center",
         justifyContent: "center",
     },
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/line-swatch.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/line-swatch.tsx
index 1e82cd1204d..8567b3642fd 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/line-swatch.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/line-swatch.tsx
@@ -3,7 +3,7 @@ import {
     type LockedFigureColor,
 } from "@khanacademy/perseus-core";
 import {View} from "@khanacademy/wonder-blocks-core";
-import {color as wbColor, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {semanticColor, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
 
@@ -32,7 +32,7 @@ const LineSwatch = (props: Props) => {
 
 const styles = StyleSheet.create({
     container: {
-        backgroundColor: wbColor.white,
+        backgroundColor: semanticColor.core.background.base.default,
         justifyContent: "center",
         padding: spacing.xSmall_8,
         borderRadius: spacing.xxxSmall_4,
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-ellipse-settings.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-ellipse-settings.tsx
index 631ddab8989..4b930cb1836 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-ellipse-settings.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-ellipse-settings.tsx
@@ -11,7 +11,7 @@ import {Strut} from "@khanacademy/wonder-blocks-layout";
 import {
     sizing,
     spacing,
-    color as wbColor,
+    semanticColor,
 } from "@khanacademy/wonder-blocks-tokens";
 import {LabelMedium, LabelLarge} from "@khanacademy/wonder-blocks-typography";
 import plusCircle from "@phosphor-icons/core/regular/plus-circle.svg";
@@ -342,11 +342,11 @@ const styles = StyleSheet.create({
         alignSelf: "start",
     },
     labelContainer: {
-        backgroundColor: wbColor.white,
+        backgroundColor: semanticColor.core.background.base.default,
     },
     horizontalRule: {
         height: 1,
-        backgroundColor: wbColor.offBlack16,
+        backgroundColor: semanticColor.core.border.neutral.subtle,
     },
 });
 
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-figure-aria.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-figure-aria.tsx
index 2bb9b37cbf8..cd6754a456f 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-figure-aria.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-figure-aria.tsx
@@ -3,7 +3,7 @@ import Button from "@khanacademy/wonder-blocks-button";
 import {View} from "@khanacademy/wonder-blocks-core";
 import {TextArea} from "@khanacademy/wonder-blocks-form";
 import {Spring, Strut} from "@khanacademy/wonder-blocks-layout";
-import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {semanticColor, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {LabelMedium, LabelXSmall} from "@khanacademy/wonder-blocks-typography";
 import pencilCircle from "@phosphor-icons/core/regular/pencil-circle.svg";
 import {StyleSheet} from "aphrodite";
@@ -97,7 +97,7 @@ const styles = StyleSheet.create({
         alignSelf: "start",
     },
     caption: {
-        color: color.offBlack64,
+        color: semanticColor.core.foreground.neutral.subtle,
     },
 });
 
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-figure-select.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-figure-select.tsx
index 3a948c24852..25405cdf39b 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-figure-select.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-figure-select.tsx
@@ -7,7 +7,7 @@
  */
 import {View} from "@khanacademy/wonder-blocks-core";
 import {ActionItem, ActionMenu} from "@khanacademy/wonder-blocks-dropdown";
-import {spacing, color} from "@khanacademy/wonder-blocks-tokens";
+import {spacing, semanticColor} from "@khanacademy/wonder-blocks-tokens";
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
 
@@ -54,7 +54,7 @@ const styles = StyleSheet.create({
         marginTop: spacing.xSmall_8,
     },
     addElementSelect: {
-        backgroundColor: color.fadedBlue8,
+        backgroundColor: semanticColor.core.background.instructive.subtle,
         borderRadius: spacing.xxxSmall_4,
     },
 });
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-function-settings.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-function-settings.tsx
index 4d4b4bf8607..5d096062af6 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-function-settings.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-function-settings.tsx
@@ -11,7 +11,11 @@ import {OptionItem, SingleSelect} from "@khanacademy/wonder-blocks-dropdown";
 import {TextField} from "@khanacademy/wonder-blocks-form";
 import IconButton from "@khanacademy/wonder-blocks-icon-button";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
-import {color, sizing, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {
+    semanticColor,
+    sizing,
+    spacing,
+} from "@khanacademy/wonder-blocks-tokens";
 import {LabelLarge, LabelMedium} from "@khanacademy/wonder-blocks-typography";
 import copyIcon from "@phosphor-icons/core/assets/regular/copy.svg";
 import autoPasteIcon from "@phosphor-icons/core/assets/regular/note-pencil.svg";
@@ -479,7 +483,7 @@ const styles = StyleSheet.create({
     },
     exampleContainer: {
         background: "white",
-        border: `1px solid ${color.fadedOffBlack16}`,
+        border: `1px solid ${semanticColor.core.border.neutral.subtle}`,
         borderRadius: "4px",
         flexGrow: "1",
         listStyleType: "none",
@@ -494,7 +498,7 @@ const styles = StyleSheet.create({
     exampleContent: {
         fontFamily: `"Lato", sans-serif`,
         flexGrow: "1",
-        color: color.offBlack,
+        color: semanticColor.core.foreground.neutral.strong,
     },
     exampleRow: {
         alignItems: "center",
@@ -503,7 +507,7 @@ const styles = StyleSheet.create({
         minHeight: "44px",
     },
     exampleWorkspace: {
-        background: color.white50,
+        background: semanticColor.core.background.base.subtle,
     },
     rowSpace: {
         marginTop: spacing.xSmall_8,
@@ -523,10 +527,10 @@ const styles = StyleSheet.create({
     },
     horizontalRule: {
         height: 1,
-        backgroundColor: color.offBlack16,
+        backgroundColor: semanticColor.core.border.neutral.subtle,
     },
     labelContainer: {
-        backgroundColor: color.white,
+        backgroundColor: semanticColor.core.background.base.default,
     },
 });
 
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-label-settings.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-label-settings.tsx
index 4e670c84a30..1a9a4684e8e 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-label-settings.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-label-settings.tsx
@@ -14,7 +14,7 @@ import {View} from "@khanacademy/wonder-blocks-core";
 import {OptionItem, SingleSelect} from "@khanacademy/wonder-blocks-dropdown";
 import {TextField} from "@khanacademy/wonder-blocks-form";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
-import {spacing, color as wbColor} from "@khanacademy/wonder-blocks-tokens";
+import {spacing, semanticColor} from "@khanacademy/wonder-blocks-tokens";
 import {LabelLarge, LabelMedium} from "@khanacademy/wonder-blocks-typography";
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
@@ -93,7 +93,9 @@ export default function LockedLabelSettings(props: Props) {
                         <LabelLarge
                             style={[
                                 {
-                                    backgroundColor: wbColor.white,
+                                    backgroundColor:
+                                        semanticColor.core.background.base
+                                            .default,
                                     color: lockedFigureColors[color],
                                 },
                                 styles.accordionHeader,
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-line-settings.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-line-settings.tsx
index 4c73ec68e31..5d40157d79a 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-line-settings.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-line-settings.tsx
@@ -10,7 +10,7 @@ import Button from "@khanacademy/wonder-blocks-button";
 import {View} from "@khanacademy/wonder-blocks-core";
 import {OptionItem, SingleSelect} from "@khanacademy/wonder-blocks-dropdown";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
-import {color as wbColor, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {semanticColor, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {LabelMedium, LabelLarge} from "@khanacademy/wonder-blocks-typography";
 import {UnreachableCaseError} from "@khanacademy/wonder-stuff-core";
 import plusCircle from "@phosphor-icons/core/regular/plus-circle.svg";
@@ -381,17 +381,17 @@ const styles = StyleSheet.create({
         marginBottom: spacing.xSmall_8,
     },
     errorText: {
-        color: wbColor.red,
+        color: semanticColor.core.foreground.critical.default,
     },
     addButton: {
         alignSelf: "start",
     },
     horizontalRule: {
         height: 1,
-        backgroundColor: wbColor.offBlack16,
+        backgroundColor: semanticColor.core.border.neutral.subtle,
     },
     labelContainer: {
-        backgroundColor: wbColor.white,
+        backgroundColor: semanticColor.core.background.base.default,
     },
 });
 
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-point-settings.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-point-settings.tsx
index 40a2eec3a8f..e4c90012ea5 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-point-settings.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-point-settings.tsx
@@ -8,7 +8,7 @@ import {getDefaultFigureForType} from "@khanacademy/perseus-core";
 import Button from "@khanacademy/wonder-blocks-button";
 import {View} from "@khanacademy/wonder-blocks-core";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
-import {spacing, color as wbColor} from "@khanacademy/wonder-blocks-tokens";
+import {spacing, semanticColor} from "@khanacademy/wonder-blocks-tokens";
 import {LabelLarge, LabelMedium} from "@khanacademy/wonder-blocks-typography";
 import plusCircle from "@phosphor-icons/core/regular/plus-circle.svg";
 import {StyleSheet} from "aphrodite";
@@ -309,7 +309,7 @@ const styles = StyleSheet.create({
         marginBottom: 0,
         marginLeft: -spacing.xxxSmall_4,
         marginRight: -spacing.xxxSmall_4,
-        backgroundColor: wbColor.white,
+        backgroundColor: semanticColor.core.background.base.default,
     },
     definingPanel: {
         // Need more space since we don't have the actions' margins.
@@ -318,7 +318,7 @@ const styles = StyleSheet.create({
     // A regular point (NOT a defining point) has label
     // accordions with white backgrounds.
     lockedPointLabelContainer: {
-        backgroundColor: wbColor.white,
+        backgroundColor: semanticColor.core.background.base.default,
     },
     row: {
         flexDirection: "row",
@@ -332,7 +332,7 @@ const styles = StyleSheet.create({
     },
     horizontalRule: {
         height: 1,
-        backgroundColor: wbColor.offBlack16,
+        backgroundColor: semanticColor.core.border.neutral.subtle,
     },
 });
 
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-polygon-settings.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-polygon-settings.tsx
index dd3ea8022ad..5b6f1c6710e 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-polygon-settings.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-polygon-settings.tsx
@@ -12,7 +12,7 @@ import {View} from "@khanacademy/wonder-blocks-core";
 import {OptionItem, SingleSelect} from "@khanacademy/wonder-blocks-dropdown";
 import IconButton from "@khanacademy/wonder-blocks-icon-button";
 import {Spring, Strut} from "@khanacademy/wonder-blocks-layout";
-import {spacing, color as wbColor} from "@khanacademy/wonder-blocks-tokens";
+import {spacing, semanticColor} from "@khanacademy/wonder-blocks-tokens";
 import {LabelLarge, LabelMedium} from "@khanacademy/wonder-blocks-typography";
 import arrowFatDown from "@phosphor-icons/core/regular/arrow-fat-down.svg";
 import arrowFatLeft from "@phosphor-icons/core/regular/arrow-fat-left.svg";
@@ -425,7 +425,7 @@ const styles = StyleSheet.create({
         alignItems: "center",
     },
     pointAccordionContainer: {
-        backgroundColor: wbColor.white,
+        backgroundColor: semanticColor.core.background.base.default,
     },
     pointAccordionPanel: {
         alignItems: "start",
@@ -455,11 +455,11 @@ const styles = StyleSheet.create({
         alignSelf: "start",
     },
     labelContainer: {
-        backgroundColor: wbColor.white,
+        backgroundColor: semanticColor.core.background.base.default,
     },
     horizontalRule: {
         height: 1,
-        backgroundColor: wbColor.offBlack16,
+        backgroundColor: semanticColor.core.border.neutral.subtle,
     },
 });
 
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-vector-settings.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-vector-settings.tsx
index c04940748d3..d185d5428ce 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-vector-settings.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-vector-settings.tsx
@@ -12,7 +12,7 @@ import {Strut} from "@khanacademy/wonder-blocks-layout";
 import {
     sizing,
     spacing,
-    color as wbColor,
+    semanticColor,
 } from "@khanacademy/wonder-blocks-tokens";
 import {LabelLarge, LabelMedium} from "@khanacademy/wonder-blocks-typography";
 import plusCircle from "@phosphor-icons/core/regular/plus-circle.svg";
@@ -301,10 +301,10 @@ const styles = StyleSheet.create({
         marginBottom: 0,
         marginLeft: -spacing.xxxSmall_4,
         marginRight: -spacing.xxxSmall_4,
-        backgroundColor: wbColor.white,
+        backgroundColor: semanticColor.core.background.base.default,
     },
     errorText: {
-        color: wbColor.red,
+        color: semanticColor.core.foreground.critical.default,
         marginTop: spacing.xSmall_8,
     },
     row: {
@@ -316,10 +316,10 @@ const styles = StyleSheet.create({
     },
     horizontalRule: {
         height: 1,
-        backgroundColor: wbColor.offBlack16,
+        backgroundColor: semanticColor.core.border.neutral.subtle,
     },
     labelContainer: {
-        backgroundColor: wbColor.white,
+        backgroundColor: semanticColor.core.background.base.default,
     },
 });
 
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/polygon-swatch.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/polygon-swatch.tsx
index 3a8ce936685..f2fd00ddedf 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/polygon-swatch.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/polygon-swatch.tsx
@@ -3,7 +3,7 @@ import {
     lockedFigureFillStyles,
 } from "@khanacademy/perseus-core";
 import {View} from "@khanacademy/wonder-blocks-core";
-import {color as wbColor, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {semanticColor, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
 
@@ -51,10 +51,10 @@ const styles = StyleSheet.create({
     container: {
         // Add a white outline so that the color swatch is visible when
         // the dropdown option is highlighted with its blue background.
-        outline: `2px solid ${wbColor.offWhite}`,
+        outline: `2px solid ${semanticColor.focus.outer}`,
         width: spacing.large_24,
         height: spacing.large_24,
-        backgroundColor: wbColor.white,
+        backgroundColor: semanticColor.core.background.base.default,
         alignItems: "center",
         justifyContent: "center",
     },
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/start-coords/start-coords-angle.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/start-coords/start-coords-angle.tsx
index 932a43a0788..bb46c40ccc1 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor/start-coords/start-coords-angle.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/start-coords/start-coords-angle.tsx
@@ -1,6 +1,6 @@
 import {View} from "@khanacademy/wonder-blocks-core";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
-import {color, font, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {semanticColor, font, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {
     BodyMonospace,
     LabelLarge,
@@ -75,7 +75,7 @@ const StartCoordsAngle = (props: Props) => {
 
 const styles = StyleSheet.create({
     tile: {
-        backgroundColor: color.fadedBlue8,
+        backgroundColor: semanticColor.core.background.instructive.subtle,
         marginTop: spacing.xSmall_8,
         padding: spacing.small_12,
         borderRadius: spacing.xSmall_8,
@@ -86,8 +86,8 @@ const styles = StyleSheet.create({
         marginTop: spacing.small_12,
     },
     equationBody: {
-        backgroundColor: color.fadedOffBlack8,
-        border: `1px solid ${color.fadedOffBlack32}`,
+        backgroundColor: semanticColor.core.background.neutral.subtle,
+        border: `1px solid ${semanticColor.core.border.neutral.subtle}`,
         marginTop: spacing.xSmall_8,
         paddingLeft: spacing.xSmall_8,
         paddingRight: spacing.xSmall_8,
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/start-coords/start-coords-circle.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/start-coords/start-coords-circle.tsx
index 9e6c382b391..f8cd6368bf3 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor/start-coords/start-coords-circle.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/start-coords/start-coords-circle.tsx
@@ -1,6 +1,6 @@
 import {View} from "@khanacademy/wonder-blocks-core";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
-import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {semanticColor, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {LabelLarge} from "@khanacademy/wonder-blocks-typography";
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
@@ -82,7 +82,7 @@ const StartCoordsCircle = (props: Props) => {
 
 const styles = StyleSheet.create({
     tile: {
-        backgroundColor: color.fadedBlue8,
+        backgroundColor: semanticColor.core.background.instructive.subtle,
         marginTop: spacing.xSmall_8,
         padding: spacing.small_12,
         borderRadius: spacing.xSmall_8,
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/start-coords/start-coords-line.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/start-coords/start-coords-line.tsx
index 54a7a40a076..b0306b709c5 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor/start-coords/start-coords-line.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/start-coords/start-coords-line.tsx
@@ -1,6 +1,6 @@
 import {View} from "@khanacademy/wonder-blocks-core";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
-import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {semanticColor, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {LabelLarge} from "@khanacademy/wonder-blocks-typography";
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
@@ -43,7 +43,7 @@ const StartCoordsLine = (props: Props) => {
 
 const styles = StyleSheet.create({
     tile: {
-        backgroundColor: color.fadedBlue8,
+        backgroundColor: semanticColor.core.background.instructive.subtle,
         marginTop: spacing.xSmall_8,
         padding: spacing.small_12,
         borderRadius: spacing.xSmall_8,
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/start-coords/start-coords-point.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/start-coords/start-coords-point.tsx
index 1aae3d4413a..ec88c2210a1 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor/start-coords/start-coords-point.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/start-coords/start-coords-point.tsx
@@ -1,6 +1,6 @@
 import {View} from "@khanacademy/wonder-blocks-core";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
-import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {semanticColor, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {LabelLarge} from "@khanacademy/wonder-blocks-typography";
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
@@ -42,7 +42,7 @@ const StartCoordsPoint = (props: Props) => {
 
 const styles = StyleSheet.create({
     tile: {
-        backgroundColor: color.fadedBlue8,
+        backgroundColor: semanticColor.core.background.instructive.subtle,
         marginTop: spacing.xSmall_8,
         padding: spacing.small_12,
         borderRadius: spacing.xSmall_8,
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/start-coords/start-coords-quadratic.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/start-coords/start-coords-quadratic.tsx
index 7347ede7959..4dea0ba9d80 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor/start-coords/start-coords-quadratic.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/start-coords/start-coords-quadratic.tsx
@@ -1,6 +1,6 @@
 import {View} from "@khanacademy/wonder-blocks-core";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
-import {color, font, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {semanticColor, font, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {
     BodyMonospace,
     LabelLarge,
@@ -73,7 +73,7 @@ const StartCoordsQuadratic = (props: Props) => {
 
 const styles = StyleSheet.create({
     tile: {
-        backgroundColor: color.fadedBlue8,
+        backgroundColor: semanticColor.core.background.instructive.subtle,
         marginTop: spacing.xSmall_8,
         padding: spacing.small_12,
         borderRadius: spacing.xSmall_8,
@@ -84,8 +84,8 @@ const styles = StyleSheet.create({
         marginTop: spacing.small_12,
     },
     equationBody: {
-        backgroundColor: color.fadedOffBlack8,
-        border: `1px solid ${color.fadedOffBlack32}`,
+        backgroundColor: semanticColor.core.background.neutral.subtle,
+        border: `1px solid ${semanticColor.core.border.neutral.subtle}`,
         marginTop: spacing.xSmall_8,
         paddingLeft: spacing.xSmall_8,
         paddingRight: spacing.xSmall_8,
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/start-coords/start-coords-sinusoid.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/start-coords/start-coords-sinusoid.tsx
index f915b15517a..99ecdac2df5 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor/start-coords/start-coords-sinusoid.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/start-coords/start-coords-sinusoid.tsx
@@ -1,6 +1,6 @@
 import {View} from "@khanacademy/wonder-blocks-core";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
-import {color, font, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {semanticColor, font, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {
     BodyMonospace,
     LabelLarge,
@@ -60,7 +60,7 @@ const StartCoordsSinusoid = (props: Props) => {
 
 const styles = StyleSheet.create({
     tile: {
-        backgroundColor: color.fadedBlue8,
+        backgroundColor: semanticColor.core.background.instructive.subtle,
         marginTop: spacing.xSmall_8,
         padding: spacing.small_12,
         borderRadius: spacing.xSmall_8,
@@ -71,8 +71,8 @@ const styles = StyleSheet.create({
         marginTop: spacing.small_12,
     },
     equationBody: {
-        backgroundColor: color.fadedOffBlack8,
-        border: `1px solid ${color.fadedOffBlack32}`,
+        backgroundColor: semanticColor.core.background.neutral.subtle,
+        border: `1px solid ${semanticColor.core.border.neutral.subtle}`,
         marginTop: spacing.xSmall_8,
         paddingLeft: spacing.xSmall_8,
         paddingRight: spacing.xSmall_8,
diff --git a/packages/perseus-editor/src/widgets/radio/radio-status-pill.tsx b/packages/perseus-editor/src/widgets/radio/radio-status-pill.tsx
index 5e96a55c0ad..a5bf6206bae 100644
--- a/packages/perseus-editor/src/widgets/radio/radio-status-pill.tsx
+++ b/packages/perseus-editor/src/widgets/radio/radio-status-pill.tsx
@@ -1,6 +1,6 @@
 import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
 import Pill from "@khanacademy/wonder-blocks-pill";
-import {color, sizing, border} from "@khanacademy/wonder-blocks-tokens";
+import {semanticColor, sizing, border} from "@khanacademy/wonder-blocks-tokens";
 import checkIcon from "@phosphor-icons/core/bold/check-bold.svg";
 import minusCircleIcon from "@phosphor-icons/core/bold/minus-circle-bold.svg";
 import * as React from "react";
@@ -26,13 +26,17 @@ export function RadioStatusPill({
             style={{
                 // Space between the pill and the text
                 marginInlineEnd: sizing.size_080,
-                color: correct ? color.white : color.red,
-                backgroundColor: correct ? color.activeGreen : color.fadedRed8,
+                color: correct
+                    ? semanticColor.core.foreground.knockout.default
+                    : semanticColor.core.foreground.critical.default,
+                backgroundColor: correct
+                    ? semanticColor.core.background.success.strong
+                    : semanticColor.core.background.critical.subtle,
                 // Round for single select, square for multiple select
                 borderRadius: multipleSelect
                     ? border.radius.radius_040
                     : sizing.size_240,
-                border: `1px solid ${correct ? color.activeGreen : color.red}`,
+                border: `1px solid ${correct ? semanticColor.core.border.success.strong : semanticColor.core.border.critical.default}`,
                 width: sizing.size_560,
                 flexDirection: "row",
             }}
@@ -43,7 +47,11 @@ export function RadioStatusPill({
                     size="small"
                     icon={correct ? checkIcon : minusCircleIcon}
                     style={{marginInlineEnd: sizing.size_060}}
-                    color={correct ? color.white : color.red}
+                    color={
+                        correct
+                            ? semanticColor.core.foreground.knockout.default
+                            : semanticColor.core.foreground.critical.default
+                    }
                 />
                 {String.fromCharCode(65 + index)}
             </>

From fd9f950dfb9eab838112afa21b83cfce5f74f1ad Mon Sep 17 00:00:00 2001
From: Juan Andrade <juan@khanacademy.org@khanacademy.org>
Date: Wed, 11 Feb 2026 14:59:00 -0500
Subject: [PATCH 2/6] [wb-color2sc] docs(changeset): Updates WB `color`
 references to use the new `semanticColor` tokens instead.

---
 .changeset/cold-plums-doubt.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/cold-plums-doubt.md

diff --git a/.changeset/cold-plums-doubt.md b/.changeset/cold-plums-doubt.md
new file mode 100644
index 00000000000..27b2ecc5ae4
--- /dev/null
+++ b/.changeset/cold-plums-doubt.md
@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus-editor": patch
+---
+
+Updates WB `color` references to use the new `semanticColor` tokens instead.

From 049d4f505bc5771ea85804412b7f2bfd39ba4f8d Mon Sep 17 00:00:00 2001
From: Juan Andrade <juan@khanacademy.org@khanacademy.org>
Date: Wed, 11 Feb 2026 15:02:08 -0500
Subject: [PATCH 3/6] [wb-color2sc] Add changesets info, update jest snapshots

---
 .../__snapshots__/keypad.test.tsx.snap        |  18 +--
 .../label-image-editor.test.tsx.snap          | 122 +++++++++---------
 .../__snapshots__/marker.test.tsx.snap        |  10 +-
 .../__snapshots__/explanation.test.ts.snap    |   4 +-
 4 files changed, 78 insertions(+), 76 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..2b732841915 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
@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`keypad should snapshot expanded: first render 1`] = `
 <div>
@@ -25,7 +25,7 @@ exports[`keypad should snapshot expanded: first render 1`] = `
               aria-controls="Numbers-panel"
               aria-label="Numbers"
               aria-selected="true"
-              class="button_vr44p2-o_O-Body_9c953n-o_O-tab_1o7jtx6-o_O-selectedTab_165hz3z-o_O-inlineStyles_g6fq4g"
+              class="button_vr44p2-o_O-Body_9c953n-o_O-tab_1046suh-o_O-selectedTab_165hz3z-o_O-inlineStyles_g6fq4g"
               id="Numbers-tab"
               role="tab"
               tabindex="0"
@@ -48,7 +48,7 @@ exports[`keypad should snapshot expanded: first render 1`] = `
               aria-controls="Extras-panel"
               aria-label="Extras"
               aria-selected="false"
-              class="button_vr44p2-o_O-Body_9c953n-o_O-tab_1o7jtx6-o_O-inlineStyles_g6fq4g"
+              class="button_vr44p2-o_O-Body_9c953n-o_O-tab_1046suh-o_O-inlineStyles_g6fq4g"
               id="Extras-tab"
               role="tab"
               tabindex="-1"
@@ -92,7 +92,7 @@ exports[`keypad should snapshot expanded: first render 1`] = `
               aria-controls="Operators-panel"
               aria-label="Operators"
               aria-selected="false"
-              class="button_vr44p2-o_O-Body_9c953n-o_O-tab_1o7jtx6-o_O-inlineStyles_g6fq4g"
+              class="button_vr44p2-o_O-Body_9c953n-o_O-tab_1046suh-o_O-inlineStyles_g6fq4g"
               id="Operators-tab"
               role="tab"
               tabindex="-1"
@@ -117,7 +117,7 @@ exports[`keypad should snapshot expanded: first render 1`] = `
               aria-controls="Geometry-panel"
               aria-label="Geometry"
               aria-selected="false"
-              class="button_vr44p2-o_O-Body_9c953n-o_O-tab_1o7jtx6-o_O-inlineStyles_g6fq4g"
+              class="button_vr44p2-o_O-Body_9c953n-o_O-tab_1046suh-o_O-inlineStyles_g6fq4g"
               id="Geometry-tab"
               role="tab"
               tabindex="-1"
@@ -1058,7 +1058,7 @@ exports[`keypad should snapshot unexpanded: first render 1`] = `
               aria-controls="Numbers-panel"
               aria-label="Numbers"
               aria-selected="true"
-              class="button_vr44p2-o_O-Body_9c953n-o_O-tab_1o7jtx6-o_O-selectedTab_165hz3z-o_O-inlineStyles_g6fq4g"
+              class="button_vr44p2-o_O-Body_9c953n-o_O-tab_1046suh-o_O-selectedTab_165hz3z-o_O-inlineStyles_g6fq4g"
               id="Numbers-tab"
               role="tab"
               tabindex="0"
@@ -1081,7 +1081,7 @@ exports[`keypad should snapshot unexpanded: first render 1`] = `
               aria-controls="Extras-panel"
               aria-label="Extras"
               aria-selected="false"
-              class="button_vr44p2-o_O-Body_9c953n-o_O-tab_1o7jtx6-o_O-inlineStyles_g6fq4g"
+              class="button_vr44p2-o_O-Body_9c953n-o_O-tab_1046suh-o_O-inlineStyles_g6fq4g"
               id="Extras-tab"
               role="tab"
               tabindex="-1"
@@ -1125,7 +1125,7 @@ exports[`keypad should snapshot unexpanded: first render 1`] = `
               aria-controls="Operators-panel"
               aria-label="Operators"
               aria-selected="false"
-              class="button_vr44p2-o_O-Body_9c953n-o_O-tab_1o7jtx6-o_O-inlineStyles_g6fq4g"
+              class="button_vr44p2-o_O-Body_9c953n-o_O-tab_1046suh-o_O-inlineStyles_g6fq4g"
               id="Operators-tab"
               role="tab"
               tabindex="-1"
@@ -1150,7 +1150,7 @@ exports[`keypad should snapshot unexpanded: first render 1`] = `
               aria-controls="Geometry-panel"
               aria-label="Geometry"
               aria-selected="false"
-              class="button_vr44p2-o_O-Body_9c953n-o_O-tab_1o7jtx6-o_O-inlineStyles_g6fq4g"
+              class="button_vr44p2-o_O-Body_9c953n-o_O-tab_1046suh-o_O-inlineStyles_g6fq4g"
               id="Geometry-tab"
               role="tab"
               tabindex="-1"
diff --git a/packages/perseus-editor/src/widgets/__tests__/__snapshots__/label-image-editor.test.tsx.snap b/packages/perseus-editor/src/widgets/__tests__/__snapshots__/label-image-editor.test.tsx.snap
index ffc28bb0ae2..5a65b703735 100644
--- a/packages/perseus-editor/src/widgets/__tests__/__snapshots__/label-image-editor.test.tsx.snap
+++ b/packages/perseus-editor/src/widgets/__tests__/__snapshots__/label-image-editor.test.tsx.snap
@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`label-image-editor popover direction snapshots should render with DOWN popover direction 1`] = `
 <div>
@@ -13,8 +13,8 @@ exports[`label-image-editor popover direction snapshots should render with DOWN
         class="components_jro6t0"
       >
         <form
-          class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_g8m8cp"
-          style="flex-grow: 1; border: 1px solid rgba(33,36,44,0.16);"
+          class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_vxglvu"
+          style="flex-grow: 1;"
         >
           <input
             class="inputBase_w7cswd"
@@ -43,8 +43,8 @@ exports[`label-image-editor popover direction snapshots should render with DOWN
       class="smallSpacer_1y6xiyp"
     />
     <form
-      class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_g8m8cp"
-      style="width: 100%; border: 1px solid rgba(33,36,44,0.16);"
+      class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_vxglvu"
+      style="width: 100%;"
     >
       <input
         class="inputBase_w7cswd"
@@ -129,8 +129,8 @@ exports[`label-image-editor popover direction snapshots should render with DOWN
             class="spacer_1ciyl4o"
           />
           <form
-            class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_g8m8cp"
-            style="flex-grow: 1; border: 1px solid rgba(33,36,44,0.16);"
+            class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_vxglvu"
+            style="flex-grow: 1;"
           >
             <input
               class="inputBase_w7cswd"
@@ -214,8 +214,8 @@ exports[`label-image-editor popover direction snapshots should render with DOWN
             class="spacer_1ciyl4o"
           />
           <form
-            class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_g8m8cp"
-            style="flex-grow: 1; border: 1px solid rgba(33,36,44,0.16);"
+            class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_vxglvu"
+            style="flex-grow: 1;"
           >
             <input
               class="inputBase_w7cswd"
@@ -299,8 +299,8 @@ exports[`label-image-editor popover direction snapshots should render with DOWN
             class="spacer_1ciyl4o"
           />
           <form
-            class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_g8m8cp"
-            style="flex-grow: 1; border: 1px solid rgba(33,36,44,0.16);"
+            class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_vxglvu"
+            style="flex-grow: 1;"
           >
             <input
               class="inputBase_w7cswd"
@@ -412,7 +412,7 @@ exports[`label-image-editor popover direction snapshots should render with DOWN
                 fill-rule="evenodd"
               >
                 <rect
-                  fill="#ffffff"
+                  fill="var(--wb-semanticColor-core-foreground-knockout-default)"
                   height="15"
                   rx="4"
                   stroke="#888D93"
@@ -453,7 +453,7 @@ exports[`label-image-editor popover direction snapshots should render with DOWN
                 fill-rule="evenodd"
               >
                 <rect
-                  fill="#ffffff"
+                  fill="var(--wb-semanticColor-core-foreground-knockout-default)"
                   height="15"
                   rx="4"
                   stroke="#888D93"
@@ -530,8 +530,8 @@ exports[`label-image-editor popover direction snapshots should render with LEFT
         class="components_jro6t0"
       >
         <form
-          class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_g8m8cp"
-          style="flex-grow: 1; border: 1px solid rgba(33,36,44,0.16);"
+          class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_vxglvu"
+          style="flex-grow: 1;"
         >
           <input
             class="inputBase_w7cswd"
@@ -560,8 +560,8 @@ exports[`label-image-editor popover direction snapshots should render with LEFT
       class="smallSpacer_1y6xiyp"
     />
     <form
-      class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_g8m8cp"
-      style="width: 100%; border: 1px solid rgba(33,36,44,0.16);"
+      class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_vxglvu"
+      style="width: 100%;"
     >
       <input
         class="inputBase_w7cswd"
@@ -646,8 +646,8 @@ exports[`label-image-editor popover direction snapshots should render with LEFT
             class="spacer_1ciyl4o"
           />
           <form
-            class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_g8m8cp"
-            style="flex-grow: 1; border: 1px solid rgba(33,36,44,0.16);"
+            class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_vxglvu"
+            style="flex-grow: 1;"
           >
             <input
               class="inputBase_w7cswd"
@@ -731,8 +731,8 @@ exports[`label-image-editor popover direction snapshots should render with LEFT
             class="spacer_1ciyl4o"
           />
           <form
-            class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_g8m8cp"
-            style="flex-grow: 1; border: 1px solid rgba(33,36,44,0.16);"
+            class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_vxglvu"
+            style="flex-grow: 1;"
           >
             <input
               class="inputBase_w7cswd"
@@ -816,8 +816,8 @@ exports[`label-image-editor popover direction snapshots should render with LEFT
             class="spacer_1ciyl4o"
           />
           <form
-            class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_g8m8cp"
-            style="flex-grow: 1; border: 1px solid rgba(33,36,44,0.16);"
+            class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_vxglvu"
+            style="flex-grow: 1;"
           >
             <input
               class="inputBase_w7cswd"
@@ -929,7 +929,7 @@ exports[`label-image-editor popover direction snapshots should render with LEFT
                 fill-rule="evenodd"
               >
                 <rect
-                  fill="#ffffff"
+                  fill="var(--wb-semanticColor-core-foreground-knockout-default)"
                   height="15"
                   rx="4"
                   stroke="#888D93"
@@ -970,7 +970,7 @@ exports[`label-image-editor popover direction snapshots should render with LEFT
                 fill-rule="evenodd"
               >
                 <rect
-                  fill="#ffffff"
+                  fill="var(--wb-semanticColor-core-foreground-knockout-default)"
                   height="15"
                   rx="4"
                   stroke="#888D93"
@@ -1047,8 +1047,8 @@ exports[`label-image-editor popover direction snapshots should render with NONE
         class="components_jro6t0"
       >
         <form
-          class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_g8m8cp"
-          style="flex-grow: 1; border: 1px solid rgba(33,36,44,0.16);"
+          class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_vxglvu"
+          style="flex-grow: 1;"
         >
           <input
             class="inputBase_w7cswd"
@@ -1077,8 +1077,8 @@ exports[`label-image-editor popover direction snapshots should render with NONE
       class="smallSpacer_1y6xiyp"
     />
     <form
-      class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_g8m8cp"
-      style="width: 100%; border: 1px solid rgba(33,36,44,0.16);"
+      class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_vxglvu"
+      style="width: 100%;"
     >
       <input
         class="inputBase_w7cswd"
@@ -1163,8 +1163,8 @@ exports[`label-image-editor popover direction snapshots should render with NONE
             class="spacer_1ciyl4o"
           />
           <form
-            class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_g8m8cp"
-            style="flex-grow: 1; border: 1px solid rgba(33,36,44,0.16);"
+            class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_vxglvu"
+            style="flex-grow: 1;"
           >
             <input
               class="inputBase_w7cswd"
@@ -1248,8 +1248,8 @@ exports[`label-image-editor popover direction snapshots should render with NONE
             class="spacer_1ciyl4o"
           />
           <form
-            class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_g8m8cp"
-            style="flex-grow: 1; border: 1px solid rgba(33,36,44,0.16);"
+            class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_vxglvu"
+            style="flex-grow: 1;"
           >
             <input
               class="inputBase_w7cswd"
@@ -1333,8 +1333,8 @@ exports[`label-image-editor popover direction snapshots should render with NONE
             class="spacer_1ciyl4o"
           />
           <form
-            class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_g8m8cp"
-            style="flex-grow: 1; border: 1px solid rgba(33,36,44,0.16);"
+            class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_vxglvu"
+            style="flex-grow: 1;"
           >
             <input
               class="inputBase_w7cswd"
@@ -1446,7 +1446,7 @@ exports[`label-image-editor popover direction snapshots should render with NONE
                 fill-rule="evenodd"
               >
                 <rect
-                  fill="#ffffff"
+                  fill="var(--wb-semanticColor-core-foreground-knockout-default)"
                   height="15"
                   rx="4"
                   stroke="#888D93"
@@ -1487,7 +1487,7 @@ exports[`label-image-editor popover direction snapshots should render with NONE
                 fill-rule="evenodd"
               >
                 <rect
-                  fill="#ffffff"
+                  fill="var(--wb-semanticColor-core-foreground-knockout-default)"
                   height="15"
                   rx="4"
                   stroke="#888D93"
@@ -1564,8 +1564,8 @@ exports[`label-image-editor popover direction snapshots should render with RIGHT
         class="components_jro6t0"
       >
         <form
-          class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_g8m8cp"
-          style="flex-grow: 1; border: 1px solid rgba(33,36,44,0.16);"
+          class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_vxglvu"
+          style="flex-grow: 1;"
         >
           <input
             class="inputBase_w7cswd"
@@ -1594,8 +1594,8 @@ exports[`label-image-editor popover direction snapshots should render with RIGHT
       class="smallSpacer_1y6xiyp"
     />
     <form
-      class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_g8m8cp"
-      style="width: 100%; border: 1px solid rgba(33,36,44,0.16);"
+      class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_vxglvu"
+      style="width: 100%;"
     >
       <input
         class="inputBase_w7cswd"
@@ -1680,8 +1680,8 @@ exports[`label-image-editor popover direction snapshots should render with RIGHT
             class="spacer_1ciyl4o"
           />
           <form
-            class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_g8m8cp"
-            style="flex-grow: 1; border: 1px solid rgba(33,36,44,0.16);"
+            class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_vxglvu"
+            style="flex-grow: 1;"
           >
             <input
               class="inputBase_w7cswd"
@@ -1765,8 +1765,8 @@ exports[`label-image-editor popover direction snapshots should render with RIGHT
             class="spacer_1ciyl4o"
           />
           <form
-            class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_g8m8cp"
-            style="flex-grow: 1; border: 1px solid rgba(33,36,44,0.16);"
+            class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_vxglvu"
+            style="flex-grow: 1;"
           >
             <input
               class="inputBase_w7cswd"
@@ -1850,8 +1850,8 @@ exports[`label-image-editor popover direction snapshots should render with RIGHT
             class="spacer_1ciyl4o"
           />
           <form
-            class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_g8m8cp"
-            style="flex-grow: 1; border: 1px solid rgba(33,36,44,0.16);"
+            class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_vxglvu"
+            style="flex-grow: 1;"
           >
             <input
               class="inputBase_w7cswd"
@@ -1963,7 +1963,7 @@ exports[`label-image-editor popover direction snapshots should render with RIGHT
                 fill-rule="evenodd"
               >
                 <rect
-                  fill="#ffffff"
+                  fill="var(--wb-semanticColor-core-foreground-knockout-default)"
                   height="15"
                   rx="4"
                   stroke="#888D93"
@@ -2004,7 +2004,7 @@ exports[`label-image-editor popover direction snapshots should render with RIGHT
                 fill-rule="evenodd"
               >
                 <rect
-                  fill="#ffffff"
+                  fill="var(--wb-semanticColor-core-foreground-knockout-default)"
                   height="15"
                   rx="4"
                   stroke="#888D93"
@@ -2081,8 +2081,8 @@ exports[`label-image-editor popover direction snapshots should render with UP po
         class="components_jro6t0"
       >
         <form
-          class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_g8m8cp"
-          style="flex-grow: 1; border: 1px solid rgba(33,36,44,0.16);"
+          class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_vxglvu"
+          style="flex-grow: 1;"
         >
           <input
             class="inputBase_w7cswd"
@@ -2111,8 +2111,8 @@ exports[`label-image-editor popover direction snapshots should render with UP po
       class="smallSpacer_1y6xiyp"
     />
     <form
-      class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_g8m8cp"
-      style="width: 100%; border: 1px solid rgba(33,36,44,0.16);"
+      class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_vxglvu"
+      style="width: 100%;"
     >
       <input
         class="inputBase_w7cswd"
@@ -2197,8 +2197,8 @@ exports[`label-image-editor popover direction snapshots should render with UP po
             class="spacer_1ciyl4o"
           />
           <form
-            class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_g8m8cp"
-            style="flex-grow: 1; border: 1px solid rgba(33,36,44,0.16);"
+            class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_vxglvu"
+            style="flex-grow: 1;"
           >
             <input
               class="inputBase_w7cswd"
@@ -2282,8 +2282,8 @@ exports[`label-image-editor popover direction snapshots should render with UP po
             class="spacer_1ciyl4o"
           />
           <form
-            class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_g8m8cp"
-            style="flex-grow: 1; border: 1px solid rgba(33,36,44,0.16);"
+            class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_vxglvu"
+            style="flex-grow: 1;"
           >
             <input
               class="inputBase_w7cswd"
@@ -2367,8 +2367,8 @@ exports[`label-image-editor popover direction snapshots should render with UP po
             class="spacer_1ciyl4o"
           />
           <form
-            class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_g8m8cp"
-            style="flex-grow: 1; border: 1px solid rgba(33,36,44,0.16);"
+            class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_vxglvu"
+            style="flex-grow: 1;"
           >
             <input
               class="inputBase_w7cswd"
@@ -2480,7 +2480,7 @@ exports[`label-image-editor popover direction snapshots should render with UP po
                 fill-rule="evenodd"
               >
                 <rect
-                  fill="#ffffff"
+                  fill="var(--wb-semanticColor-core-foreground-knockout-default)"
                   height="15"
                   rx="4"
                   stroke="#888D93"
@@ -2521,7 +2521,7 @@ exports[`label-image-editor popover direction snapshots should render with UP po
                 fill-rule="evenodd"
               >
                 <rect
-                  fill="#ffffff"
+                  fill="var(--wb-semanticColor-core-foreground-knockout-default)"
                   height="15"
                   rx="4"
                   stroke="#888D93"
diff --git a/packages/perseus-editor/src/widgets/label-image-editor/__snapshots__/marker.test.tsx.snap b/packages/perseus-editor/src/widgets/label-image-editor/__snapshots__/marker.test.tsx.snap
index d5663d52e7d..f49b38b9514 100644
--- a/packages/perseus-editor/src/widgets/label-image-editor/__snapshots__/marker.test.tsx.snap
+++ b/packages/perseus-editor/src/widgets/label-image-editor/__snapshots__/marker.test.tsx.snap
@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Marker component rendering renders an empty marker 1`] = `
 <div>
@@ -32,8 +32,8 @@ exports[`Marker component rendering renders an empty marker 1`] = `
           class="labelContainer_cyxkvw"
         >
           <form
-            class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_g8m8cp"
-            style="width: 100%; border: 1px solid rgba(33,36,44,0.16);"
+            class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_vxglvu"
+            style="width: 100%;"
           >
             <input
               class="inputBase_w7cswd"
@@ -105,8 +105,8 @@ exports[`Marker component rendering renders with answers and choices 1`] = `
           class="labelContainer_cyxkvw"
         >
           <form
-            class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_g8m8cp"
-            style="width: 100%; border: 1px solid rgba(33,36,44,0.16);"
+            class="input_1qboe8t-o_O-container_1d6ew9d-o_O-defaultBackground_vxglvu"
+            style="width: 100%;"
           >
             <input
               class="inputBase_w7cswd"
diff --git a/packages/perseus/src/widgets/explanation/__snapshots__/explanation.test.ts.snap b/packages/perseus/src/widgets/explanation/__snapshots__/explanation.test.ts.snap
index 1cb7a7edd24..0aba1af0234 100644
--- a/packages/perseus/src/widgets/explanation/__snapshots__/explanation.test.ts.snap
+++ b/packages/perseus/src/widgets/explanation/__snapshots__/explanation.test.ts.snap
@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Explanation should snapshot when expanded: expanded 1`] = `
 <div>
@@ -33,6 +33,7 @@ exports[`Explanation should snapshot when expanded: expanded 1`] = `
               class="default_xu2jcg-o_O-endIcon_zk6zd4-o_O-iconWrapper_1xbs5sz-o_O-endIconWrapper_weejk7-o_O-endIconWrapperTertiary_9p0zpt"
             >
               <span
+                aria-hidden="true"
                 class="svg_1q6jc65-o_O-small_6q1hy-o_O-inlineStyles_1hkg79p"
               />
             </div>
@@ -104,6 +105,7 @@ exports[`Explanation should snapshot: initial render 1`] = `
               class="default_xu2jcg-o_O-endIcon_zk6zd4-o_O-iconWrapper_1xbs5sz-o_O-endIconWrapper_weejk7-o_O-endIconWrapperTertiary_9p0zpt"
             >
               <span
+                aria-hidden="true"
                 class="svg_1q6jc65-o_O-small_6q1hy-o_O-inlineStyles_1dxyeu2"
               />
             </div>

From 285907dfadb08b0ff9c9f05ca7d8a0180f843217 Mon Sep 17 00:00:00 2001
From: Juan Andrade <juan@khanacademy.org@khanacademy.org>
Date: Wed, 11 Feb 2026 15:14:43 -0500
Subject: [PATCH 4/6] [wb-color2sc] Fix some colors

---
 .../perseus-editor/src/components/form-wrapped-text-field.tsx | 4 ++--
 .../interactive-graph-editor/locked-figures/color-swatch.tsx  | 2 +-
 .../locked-figures/ellipse-swatch.tsx                         | 2 +-
 .../locked-figures/polygon-swatch.tsx                         | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/perseus-editor/src/components/form-wrapped-text-field.tsx b/packages/perseus-editor/src/components/form-wrapped-text-field.tsx
index b899cec6df3..2831f042846 100644
--- a/packages/perseus-editor/src/components/form-wrapped-text-field.tsx
+++ b/packages/perseus-editor/src/components/form-wrapped-text-field.tsx
@@ -150,8 +150,8 @@ class FormWrappedTextField extends React.Component<PropsWithForwardRef, State> {
         }
 
         const borderColorStyle = focused
-            ? focusBorderColor || semanticColor.core.border.instructive.default
-            : borderColor || semanticColor.core.border.neutral.default;
+            ? focusBorderColor || semanticColor.focus.outer
+            : borderColor || semanticColor.core.border.neutral.subtle;
         extraStyles.border = `1px solid ${borderColorStyle}`;
 
         const wrappedIcon = icon && (
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/color-swatch.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/color-swatch.tsx
index b126edfc04e..cfa8692c0a6 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/color-swatch.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/color-swatch.tsx
@@ -41,7 +41,7 @@ const styles = StyleSheet.create({
     colorSwatch: {
         // Add a white outline so that the color swatch is visible when
         // the dropdown option is highlighted with its blue background.
-        outline: `2px solid ${semanticColor.focus.outer}`,
+        outline: `2px solid ${semanticColor.focus.inner}`,
         borderRadius: "50%",
         width: spacing.large_24,
         height: spacing.large_24,
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/ellipse-swatch.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/ellipse-swatch.tsx
index b6849162bdc..6013df136a7 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/ellipse-swatch.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/ellipse-swatch.tsx
@@ -51,7 +51,7 @@ const styles = StyleSheet.create({
     container: {
         // Add a white outline so that the color swatch is visible when
         // the dropdown option is highlighted with its blue background.
-        outline: `2px solid ${semanticColor.focus.outer}`,
+        outline: `2px solid ${semanticColor.focus.inner}`,
         borderRadius: "50%",
         width: spacing.xLarge_32,
         height: spacing.large_24,
diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/polygon-swatch.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/polygon-swatch.tsx
index f2fd00ddedf..e42dcec5853 100644
--- a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/polygon-swatch.tsx
+++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/polygon-swatch.tsx
@@ -51,7 +51,7 @@ const styles = StyleSheet.create({
     container: {
         // Add a white outline so that the color swatch is visible when
         // the dropdown option is highlighted with its blue background.
-        outline: `2px solid ${semanticColor.focus.outer}`,
+        outline: `2px solid ${semanticColor.focus.inner}`,
         width: spacing.large_24,
         height: spacing.large_24,
         backgroundColor: semanticColor.core.background.base.default,

From e4c06f3916e09ed0bdd6dccd8686f48a40907af4 Mon Sep 17 00:00:00 2001
From: Juan Andrade <juan@khanacademy.org@khanacademy.org>
Date: Wed, 11 Feb 2026 16:07:57 -0500
Subject: [PATCH 5/6] [wb-color2sc] Update jest snapshots with Jest v30

---
 .../__snapshots__/keypad.test.tsx.snap         | 18 +++++++++---------
 .../__stories__/device-framer.stories.tsx      |  4 ++--
 .../label-image-editor.test.tsx.snap           |  2 +-
 .../__snapshots__/marker.test.tsx.snap         |  2 +-
 .../__snapshots__/explanation.test.ts.snap     |  4 +---
 5 files changed, 14 insertions(+), 16 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 2b732841915..4f7a0dbdfc6 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
@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`keypad should snapshot expanded: first render 1`] = `
 <div>
@@ -25,7 +25,7 @@ exports[`keypad should snapshot expanded: first render 1`] = `
               aria-controls="Numbers-panel"
               aria-label="Numbers"
               aria-selected="true"
-              class="button_vr44p2-o_O-Body_9c953n-o_O-tab_1046suh-o_O-selectedTab_165hz3z-o_O-inlineStyles_g6fq4g"
+              class="button_vr44p2-o_O-Body_9c953n-o_O-tab_1o7jtx6-o_O-selectedTab_165hz3z-o_O-inlineStyles_g6fq4g"
               id="Numbers-tab"
               role="tab"
               tabindex="0"
@@ -48,7 +48,7 @@ exports[`keypad should snapshot expanded: first render 1`] = `
               aria-controls="Extras-panel"
               aria-label="Extras"
               aria-selected="false"
-              class="button_vr44p2-o_O-Body_9c953n-o_O-tab_1046suh-o_O-inlineStyles_g6fq4g"
+              class="button_vr44p2-o_O-Body_9c953n-o_O-tab_1o7jtx6-o_O-inlineStyles_g6fq4g"
               id="Extras-tab"
               role="tab"
               tabindex="-1"
@@ -92,7 +92,7 @@ exports[`keypad should snapshot expanded: first render 1`] = `
               aria-controls="Operators-panel"
               aria-label="Operators"
               aria-selected="false"
-              class="button_vr44p2-o_O-Body_9c953n-o_O-tab_1046suh-o_O-inlineStyles_g6fq4g"
+              class="button_vr44p2-o_O-Body_9c953n-o_O-tab_1o7jtx6-o_O-inlineStyles_g6fq4g"
               id="Operators-tab"
               role="tab"
               tabindex="-1"
@@ -117,7 +117,7 @@ exports[`keypad should snapshot expanded: first render 1`] = `
               aria-controls="Geometry-panel"
               aria-label="Geometry"
               aria-selected="false"
-              class="button_vr44p2-o_O-Body_9c953n-o_O-tab_1046suh-o_O-inlineStyles_g6fq4g"
+              class="button_vr44p2-o_O-Body_9c953n-o_O-tab_1o7jtx6-o_O-inlineStyles_g6fq4g"
               id="Geometry-tab"
               role="tab"
               tabindex="-1"
@@ -1058,7 +1058,7 @@ exports[`keypad should snapshot unexpanded: first render 1`] = `
               aria-controls="Numbers-panel"
               aria-label="Numbers"
               aria-selected="true"
-              class="button_vr44p2-o_O-Body_9c953n-o_O-tab_1046suh-o_O-selectedTab_165hz3z-o_O-inlineStyles_g6fq4g"
+              class="button_vr44p2-o_O-Body_9c953n-o_O-tab_1o7jtx6-o_O-selectedTab_165hz3z-o_O-inlineStyles_g6fq4g"
               id="Numbers-tab"
               role="tab"
               tabindex="0"
@@ -1081,7 +1081,7 @@ exports[`keypad should snapshot unexpanded: first render 1`] = `
               aria-controls="Extras-panel"
               aria-label="Extras"
               aria-selected="false"
-              class="button_vr44p2-o_O-Body_9c953n-o_O-tab_1046suh-o_O-inlineStyles_g6fq4g"
+              class="button_vr44p2-o_O-Body_9c953n-o_O-tab_1o7jtx6-o_O-inlineStyles_g6fq4g"
               id="Extras-tab"
               role="tab"
               tabindex="-1"
@@ -1125,7 +1125,7 @@ exports[`keypad should snapshot unexpanded: first render 1`] = `
               aria-controls="Operators-panel"
               aria-label="Operators"
               aria-selected="false"
-              class="button_vr44p2-o_O-Body_9c953n-o_O-tab_1046suh-o_O-inlineStyles_g6fq4g"
+              class="button_vr44p2-o_O-Body_9c953n-o_O-tab_1o7jtx6-o_O-inlineStyles_g6fq4g"
               id="Operators-tab"
               role="tab"
               tabindex="-1"
@@ -1150,7 +1150,7 @@ exports[`keypad should snapshot unexpanded: first render 1`] = `
               aria-controls="Geometry-panel"
               aria-label="Geometry"
               aria-selected="false"
-              class="button_vr44p2-o_O-Body_9c953n-o_O-tab_1046suh-o_O-inlineStyles_g6fq4g"
+              class="button_vr44p2-o_O-Body_9c953n-o_O-tab_1o7jtx6-o_O-inlineStyles_g6fq4g"
               id="Geometry-tab"
               role="tab"
               tabindex="-1"
diff --git a/packages/perseus-editor/src/components/__stories__/device-framer.stories.tsx b/packages/perseus-editor/src/components/__stories__/device-framer.stories.tsx
index f69cd37aa11..e57b656ebd4 100644
--- a/packages/perseus-editor/src/components/__stories__/device-framer.stories.tsx
+++ b/packages/perseus-editor/src/components/__stories__/device-framer.stories.tsx
@@ -26,8 +26,8 @@ const SampleContent = () => {
             }}
         >
             The DeviceFramer controls the size of the content inside the frame.
-            So there's not much to look at here except how large each device
-            type's size is.
+            So there&apos;s not much to look at here except how large each
+            device type&apos;s size is.
         </div>
     );
 };
diff --git a/packages/perseus-editor/src/widgets/__tests__/__snapshots__/label-image-editor.test.tsx.snap b/packages/perseus-editor/src/widgets/__tests__/__snapshots__/label-image-editor.test.tsx.snap
index 5a65b703735..1a78b60cea3 100644
--- a/packages/perseus-editor/src/widgets/__tests__/__snapshots__/label-image-editor.test.tsx.snap
+++ b/packages/perseus-editor/src/widgets/__tests__/__snapshots__/label-image-editor.test.tsx.snap
@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`label-image-editor popover direction snapshots should render with DOWN popover direction 1`] = `
 <div>
diff --git a/packages/perseus-editor/src/widgets/label-image-editor/__snapshots__/marker.test.tsx.snap b/packages/perseus-editor/src/widgets/label-image-editor/__snapshots__/marker.test.tsx.snap
index f49b38b9514..665f93fc10d 100644
--- a/packages/perseus-editor/src/widgets/label-image-editor/__snapshots__/marker.test.tsx.snap
+++ b/packages/perseus-editor/src/widgets/label-image-editor/__snapshots__/marker.test.tsx.snap
@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Marker component rendering renders an empty marker 1`] = `
 <div>
diff --git a/packages/perseus/src/widgets/explanation/__snapshots__/explanation.test.ts.snap b/packages/perseus/src/widgets/explanation/__snapshots__/explanation.test.ts.snap
index 0aba1af0234..1cb7a7edd24 100644
--- a/packages/perseus/src/widgets/explanation/__snapshots__/explanation.test.ts.snap
+++ b/packages/perseus/src/widgets/explanation/__snapshots__/explanation.test.ts.snap
@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Explanation should snapshot when expanded: expanded 1`] = `
 <div>
@@ -33,7 +33,6 @@ exports[`Explanation should snapshot when expanded: expanded 1`] = `
               class="default_xu2jcg-o_O-endIcon_zk6zd4-o_O-iconWrapper_1xbs5sz-o_O-endIconWrapper_weejk7-o_O-endIconWrapperTertiary_9p0zpt"
             >
               <span
-                aria-hidden="true"
                 class="svg_1q6jc65-o_O-small_6q1hy-o_O-inlineStyles_1hkg79p"
               />
             </div>
@@ -105,7 +104,6 @@ exports[`Explanation should snapshot: initial render 1`] = `
               class="default_xu2jcg-o_O-endIcon_zk6zd4-o_O-iconWrapper_1xbs5sz-o_O-endIconWrapper_weejk7-o_O-endIconWrapperTertiary_9p0zpt"
             >
               <span
-                aria-hidden="true"
                 class="svg_1q6jc65-o_O-small_6q1hy-o_O-inlineStyles_1dxyeu2"
               />
             </div>

From a7c18432de8cb254780c300e9a6c314ed08d9cc7 Mon Sep 17 00:00:00 2001
From: Juan Andrade <juan@khanacademy.org@khanacademy.org>
Date: Wed, 11 Feb 2026 16:14:21 -0500
Subject: [PATCH 6/6] [wb-color2sc] Update bg.base.strong with
 instructive.subtle

---
 packages/perseus-editor/src/widgets/expression-editor.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/perseus-editor/src/widgets/expression-editor.tsx b/packages/perseus-editor/src/widgets/expression-editor.tsx
index 344ed526bbf..c9b38e6293d 100644
--- a/packages/perseus-editor/src/widgets/expression-editor.tsx
+++ b/packages/perseus-editor/src/widgets/expression-editor.tsx
@@ -645,7 +645,7 @@ const styles = StyleSheet.create({
         backgroundColor: semanticColor.core.background.success.subtle,
     },
     answerStatusUngraded: {
-        backgroundColor: semanticColor.core.background.base.strong,
+        backgroundColor: semanticColor.core.background.instructive.subtle,
     },
     buttonRow: {
         display: "flex",