[WB-1998.1] Migrate color to semanticColor in perseus-editor

.changeset/cold-plums-doubt.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus-editor": patch
+---
+
+Updates WB `color` references to use the new `semanticColor` tokens instead.

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,8 +17,9 @@ 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,

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,
     },
 });

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}

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,
     },
 });
 

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.focus.outer
+            : borderColor || semanticColor.core.border.neutral.subtle;
         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",

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)",
     },