diff --git a/.changeset/pink-ghosts-joke.md b/.changeset/pink-ghosts-joke.md
new file mode 100644
index 0000000000..ed18607815
--- /dev/null
+++ b/.changeset/pink-ghosts-joke.md
@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": patch
+---
+
+Updates perseus to use WB `semanticColor` tokens instead of the now deprecated `color` tokens.
diff --git a/packages/perseus/src/components/math-input.tsx b/packages/perseus/src/components/math-input.tsx
index e5978a4b25..9f37b95dbc 100644
--- a/packages/perseus/src/components/math-input.tsx
+++ b/packages/perseus/src/components/math-input.tsx
@@ -11,7 +11,7 @@ import {
import Clickable from "@khanacademy/wonder-blocks-clickable";
import {View} from "@khanacademy/wonder-blocks-core";
import {Popover, PopoverContentCore} from "@khanacademy/wonder-blocks-popover";
-import {color, semanticColor, sizing} from "@khanacademy/wonder-blocks-tokens";
+import {semanticColor, sizing} from "@khanacademy/wonder-blocks-tokens";
import {HeadingMedium} from "@khanacademy/wonder-blocks-typography";
import {StyleSheet} from "aphrodite";
import classNames from "classnames";
@@ -550,17 +550,17 @@ const styles = StyleSheet.create({
},
iconInactive: {
border: "2px solid transparent",
- backgroundColor: color.offBlack8,
+ backgroundColor: semanticColor.core.background.neutral.subtle,
},
iconActive: {
border: `2px solid ${semanticColor.core.border.knockout.default}`,
- backgroundColor: color.offBlack64,
+ backgroundColor: semanticColor.core.background.neutral.default,
},
outerWrapper: {
display: "inline-block",
borderStyle: "solid",
borderWidth: 1,
- borderColor: color.offBlack50,
+ borderColor: semanticColor.core.border.neutral.default,
borderRadius: 3,
background: semanticColor.core.background.base.default,
":hover": inputFocused,
diff --git a/packages/perseus/src/util/colors.ts b/packages/perseus/src/util/colors.ts
index e766dd2880..f5c1b192dc 100644
--- a/packages/perseus/src/util/colors.ts
+++ b/packages/perseus/src/util/colors.ts
@@ -8,6 +8,9 @@
*/
import {color} from "@khanacademy/wonder-blocks-tokens";
+// TODO(WB-2160): Update these to use the new semanticColor tokens, and use the
+// new tokenValue() function to get the raw value of the token. This is
+// necessary because graphie only supports raw CSS colors.
const KhanColors = {
BLUE: color.blue,
ORANGE: "#FFA500",
diff --git a/packages/perseus/src/widgets/free-response/free-response.tsx b/packages/perseus/src/widgets/free-response/free-response.tsx
index 0b9399836e..420ef5d338 100644
--- a/packages/perseus/src/widgets/free-response/free-response.tsx
+++ b/packages/perseus/src/widgets/free-response/free-response.tsx
@@ -9,12 +9,7 @@ import {Text, View} from "@khanacademy/wonder-blocks-core";
import {TextArea} from "@khanacademy/wonder-blocks-form";
import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
import {LabeledField} from "@khanacademy/wonder-blocks-labeled-field";
-import {
- color,
- font,
- spacing,
- semanticColor,
-} from "@khanacademy/wonder-blocks-tokens";
+import {font, spacing, semanticColor} from "@khanacademy/wonder-blocks-tokens";
import warningCircleIcon from "@phosphor-icons/core/regular/warning-circle.svg";
import {StyleSheet} from "aphrodite";
import * as React from "react";
@@ -158,7 +153,7 @@ const styles = StyleSheet.create({
fontSize: font.size.small,
},
overCharacterLimit: {
- color: color.red,
+ color: semanticColor.core.foreground.critical.default,
},
textarea: {
padding: spacing.medium_16,
diff --git a/packages/perseus/src/widgets/graded-group-set/__snapshots__/graded-group-set-jipt.test.ts.snap b/packages/perseus/src/widgets/graded-group-set/__snapshots__/graded-group-set-jipt.test.ts.snap
index 40c52e8072..9fa6ea3177 100644
--- a/packages/perseus/src/widgets/graded-group-set/__snapshots__/graded-group-set-jipt.test.ts.snap
+++ b/packages/perseus/src/widgets/graded-group-set/__snapshots__/graded-group-set-jipt.test.ts.snap
@@ -97,7 +97,7 @@ exports[`graded-group-set should render all graded groups 1`] = `