[WB-1998.2] Migrate color to semanticColor in perseus

.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.

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,

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

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,

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`] = `
                 </span>
               </button>
               <button
-                class="showHintLink_oak3yy"
+                class="showHintLink_1n4y2tp"
                 tabindex="0"
               >
                 Explain
@@ -174,7 +174,7 @@ exports[`graded-group-set should render all graded groups 1`] = `
                 </span>
               </button>
               <button
-                class="showHintLink_oak3yy"
+                class="showHintLink_1n4y2tp"
                 tabindex="0"
               >
                 Explain
@@ -251,7 +251,7 @@ exports[`graded-group-set should render all graded groups 1`] = `
                 </span>
               </button>
               <button
-                class="showHintLink_oak3yy"
+                class="showHintLink_1n4y2tp"
                 tabindex="0"
               >
                 Explain

packages/perseus/src/widgets/graded-group-set/__snapshots__/graded-group-set.test.ts.snap

@@ -30,7 +30,7 @@ exports[`graded group set widget should snapshot 1`] = `
               class="top_cjo0m2"
             >
               <div
-                class="title_vo78fw"
+                class="title_t78eih"
               >
                 Problem 1a
               </div>
@@ -50,10 +50,10 @@ exports[`graded group set widget should snapshot 1`] = `
                     type="button"
                   >
                     <div
-                      class="default_xu2jcg-o_O-indicatorDot_yy8ygm"
+                      class="default_xu2jcg-o_O-indicatorDot_1ppx7bq"
                     >
                       <div
-                        class="default_xu2jcg-o_O-indicatorDotActive_1pky1a"
+                        class="default_xu2jcg-o_O-indicatorDotActive_xgych8"
                       >
                         <span
                           class="srOnly_19bpjuy"
@@ -74,7 +74,7 @@ exports[`graded group set widget should snapshot 1`] = `
                     type="button"
                   >
                     <div
-                      class="default_xu2jcg-o_O-indicatorDot_yy8ygm"
+                      class="default_xu2jcg-o_O-indicatorDot_1ppx7bq"
                     />
                   </button>
                 </li>
@@ -88,7 +88,7 @@ exports[`graded group set widget should snapshot 1`] = `
                     type="button"
                   >
                     <div
-                      class="default_xu2jcg-o_O-indicatorDot_yy8ygm"
+                      class="default_xu2jcg-o_O-indicatorDot_1ppx7bq"
                     />
                   </button>
                 </li>
@@ -160,7 +160,7 @@ exports[`graded group set widget should snapshot 1`] = `
                 </span>
               </button>
               <button
-                class="showHintLink_oak3yy"
+                class="showHintLink_1n4y2tp"
                 tabindex="0"
               >
                 Explain

packages/perseus/src/widgets/graded-group-set/graded-group-set.tsx

@@ -2,7 +2,7 @@
 import {linterContextDefault} from "@khanacademy/perseus-linter";
 import Clickable from "@khanacademy/wonder-blocks-clickable";
 import {View} from "@khanacademy/wonder-blocks-core";
-import {color} from "@khanacademy/wonder-blocks-tokens";
+import {semanticColor} from "@khanacademy/wonder-blocks-tokens";
 import {StyleSheet, css} from "aphrodite";
 import classNames from "classnames";
 import * as React from "react";
@@ -263,7 +263,7 @@ const styles = StyleSheet.create({
 
     title: {
         fontSize: 12,
-        color: color.offBlack64,
+        color: semanticColor.core.foreground.neutral.subtle,
         textTransform: "uppercase",
         marginBottom: 11,
         letterSpacing: 0.8,
@@ -302,7 +302,7 @@ const styles = StyleSheet.create({
         height: 10,
         borderRadius: "100%",
         borderWidth: 2,
-        borderColor: color.blue,
+        borderColor: semanticColor.core.border.instructive.default,
         borderStyle: "solid",
     },
 
@@ -312,7 +312,7 @@ const styles = StyleSheet.create({
     },
 
     indicatorDotActive: {
-        backgroundColor: color.blue,
+        backgroundColor: semanticColor.core.background.instructive.default,
         width: "100%",
         height: "100%",
     },

packages/perseus/src/widgets/graded-group/__snapshots__/graded-group.test.ts.snap

@@ -418,7 +418,7 @@ exports[`graded-group should snapshot: initial render (mobile: false) 1`] = `
               </span>
             </button>
             <button
-              class="showHintLink_oak3yy"
+              class="showHintLink_1n4y2tp"
               tabindex="0"
             >
               Explain
@@ -738,13 +738,13 @@ exports[`graded-group should snapshot: initial render (mobile: true) 1`] = `
               </div>
             </div>
             <button
-              class="showHintLink_oak3yy"
+              class="showHintLink_1n4y2tp"
               tabindex="0"
             >
               Explain
             </button>
             <div
-              style="display: flex; align-items: center; height: 68px; margin: 16px -16px -16px -16px; padding-left: 16px; padding-right: 10px; border-top: 1px solid rgba(33,36,44,0.50); background-color: white; justify-content: space-between;"
+              style="display: flex; align-items: center; height: 68px; margin: 16px -16px -16px -16px; padding-left: 16px; padding-right: 10px; justify-content: space-between;"
             >
               <span />
               <button

packages/perseus/src/widgets/graded-group/graded-group-answer-bar.tsx

@@ -2,7 +2,7 @@
  * Renders answer bar for mobile graded groups. [STATELESS]
  */
 import Button from "@khanacademy/wonder-blocks-button";
-import {color} from "@khanacademy/wonder-blocks-tokens";
+import {semanticColor} from "@khanacademy/wonder-blocks-tokens";
 import * as React from "react";
 
 import {PerseusI18nContext} from "../../components/i18n-context";
@@ -50,7 +50,9 @@ class GradedGroupAnswerBar extends React.Component<Props> {
         const answerBarStyle = {
             ...styles.answerBar,
             backgroundColor:
-                answerBarState === "CORRECT" ? color.offWhite : "white",
+                answerBarState === "CORRECT"
+                    ? semanticColor.core.background.base.subtle
+                    : semanticColor.core.background.base.default,
             // Center the "Correct!" message only when there's no next question
             justifyContent:
                 answerBarState === "CORRECT" && !onNextQuestion
@@ -91,7 +93,13 @@ class GradedGroupAnswerBar extends React.Component<Props> {
         return (
             <div style={answerBarStyle}>
                 <span style={styles.text}>
-                    <span style={{fontSize: 28, color: color.green}}>
+                    <span
+                        style={{
+                            fontSize: 28,
+                            color: semanticColor.core.foreground.success
+                                .default,
+                        }}
+                    >
                         <InlineIcon {...iconStar} style={{marginBottom: 5}} />
                     </span>
                     <span
@@ -123,7 +131,7 @@ const styles = {
         marginTop: phoneMargin,
         paddingLeft: phoneMargin,
         paddingRight: 10,
-        borderTop: `1px solid ${color.offBlack50}`,
+        borderTop: `1px solid ${semanticColor.core.border.neutral.default}`,
     },
 
     tryAgainIcon: {

packages/perseus/src/widgets/graded-group/graded-group.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 import {linterContextDefault} from "@khanacademy/perseus-linter";
 import Button from "@khanacademy/wonder-blocks-button";
-import {color} from "@khanacademy/wonder-blocks-tokens";
+import {semanticColor} from "@khanacademy/wonder-blocks-tokens";
 import {StyleSheet, css} from "aphrodite";
 import classNames from "classnames";
 import * as React from "react";
@@ -482,7 +482,7 @@ const styles = StyleSheet.create({
         padding: 0,
         border: "none",
         marginTop: 20,
-        color: color.blue,
+        color: semanticColor.core.foreground.instructive.default,
         cursor: "pointer",
         display: "block",
         clear: "both",
@@ -491,7 +491,7 @@ const styles = StyleSheet.create({
     explanationTitle: {
         backgroundColor: "unset",
         marginTop: 20,
-        color: color.blue,
+        color: semanticColor.core.foreground.instructive.default,
         marginBottom: 10,
         cursor: "pointer",
         fontSize: 14,

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

@@ -1,5 +1,5 @@
 import {angles, geometry} from "@khanacademy/kmath";
-import {color} from "@khanacademy/wonder-blocks-tokens";
+import {semanticColor} from "@khanacademy/wonder-blocks-tokens";
 import {vec} from "mafs";
 import * as React from "react";
 
@@ -261,7 +261,11 @@ export const Angle = ({
                 <Arc arc={arc} className={arcClassName} />
             )}
             {showAngles && (
-                <TextLabel x={textX} y={textY} color={color.blue}>
+                <TextLabel
+                    x={textX}
+                    y={textY}
+                    color={semanticColor.core.foreground.instructive.default}
+                >
                     {angleLabel}°
                 </TextLabel>
             )}

packages/perseus/src/widgets/interactive-graphs/graphs/components/hairlines.tsx

@@ -1,4 +1,4 @@
-import {color} from "@khanacademy/wonder-blocks-tokens";
+import {semanticColor} from "@khanacademy/wonder-blocks-tokens";
 import * as React from "react";
 
 import useGraphConfig from "../../reducer/use-graph-config";
@@ -34,14 +34,14 @@ export default function Hairlines(props: Props) {
                 y1={y}
                 x2={verticalEndX}
                 y2={y}
-                stroke={color.blue}
+                stroke={semanticColor.core.border.instructive.default}
             />
             <line
                 x1={x}
                 y1={horizontalStartY}
                 x2={x}
                 y2={horizontalEndY}
-                stroke={color.blue}
+                stroke={semanticColor.core.border.instructive.default}
             />
         </g>
     );

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

@@ -5,7 +5,7 @@ import {
     splitPerseusItem,
     getDefaultFigureForType,
 } from "@khanacademy/perseus-core";
-import {color as wbColor} from "@khanacademy/wonder-blocks-tokens";
+import {semanticColor} from "@khanacademy/wonder-blocks-tokens";
 import {waitFor} from "@testing-library/react";
 import {userEvent as userEventLib} from "@testing-library/user-event";
 import {Plot} from "mafs";
@@ -413,7 +413,7 @@ describe("Interactive Graph", function () {
                 stroke: lockedFigureColors.grayH,
             });
             expect(points[1]).toHaveStyle({
-                fill: wbColor.white,
+                fill: semanticColor.core.background.base.default,
                 stroke: lockedFigureColors.grayH,
             });
         });
@@ -535,7 +535,7 @@ describe("Interactive Graph", function () {
                 stroke: lockedFigureColors.grayH,
             });
             expect(points[1]).toHaveStyle({
-                fill: wbColor.white,
+                fill: semanticColor.core.background.base.default,
                 stroke: lockedFigureColors.grayH,
             });
         });
@@ -785,19 +785,19 @@ describe("Interactive Graph", function () {
                 stroke: lockedFigureColors.green,
             });
             expect(linePoints[1]).toHaveStyle({
-                fill: wbColor.white,
+                fill: semanticColor.core.background.base.default,
                 stroke: lockedFigureColors.green,
             });
             expect(linePoints[2]).toHaveStyle({
-                fill: wbColor.white,
+                fill: semanticColor.core.background.base.default,
                 stroke: lockedFigureColors.grayH,
             });
             expect(linePoints[3]).toHaveStyle({
                 fill: lockedFigureColors.grayH,
                 stroke: lockedFigureColors.grayH,
             });
             expect(rayPoints[0]).toHaveStyle({
-                fill: wbColor.white,
+                fill: semanticColor.core.background.base.default,
                 stroke: lockedFigureColors.pink,
             });
         });
@@ -1015,7 +1015,7 @@ describe("Interactive Graph", function () {
             // Assert
             expect(whiteCircle).toHaveStyle({
                 "fill-opacity": 1,
-                fill: wbColor.white,
+                fill: semanticColor.core.background.base.default,
                 stroke: lockedFigureColors["green"],
             });
             expect(translucentCircle).toHaveStyle({
@@ -1186,7 +1186,7 @@ describe("Interactive Graph", function () {
             // Assert
             expect(whitePolygon).toHaveStyle({
                 "fill-opacity": 1,
-                fill: wbColor.white,
+                fill: semanticColor.core.background.base.default,
                 stroke: lockedFigureColors["green"],
             });
             expect(translucentPolygon).toHaveStyle({