@khanacademy/perseus 12.2.0 → 12.3.0

package/dist/renderer.d.ts

@@ -1,6 +1,8 @@
 import * as React from "react";
 import InteractionTracker from "./interaction-tracker";
 import TranslationLinter from "./translation-linter";
+import WidgetContainer from "./widget-container";
+import type { DependenciesContext } from "./dependencies";
 import type { PerseusRenderer, PerseusWidgetOptions } from "./perseus-types";
 import type { APIOptions, APIOptionsWithDefaults, FilterCriterion, FocusPath, PerseusScore, WidgetInfo, WidgetProps } from "./types";
 import type { LinterContextProps } from "@khanacademy/perseus-linter";
@@ -37,7 +39,7 @@ export type Widget = {
     showRationalesForCurrentlySelectedChoices?: (options?: any) => void;
     examples?: () => ReadonlyArray<string>;
 };
-type Props = {
+type Props = Partial<React.ContextType<typeof DependenciesContext>> & {
     apiOptions?: APIOptions;
     alwaysUpdate?: boolean;
     findExternalWidgets: any;
@@ -93,6 +95,7 @@ declare class Renderer extends React.Component<Props, State> {
     _isMounted: boolean;
     _isTwoColumn: boolean;
     _translationLinter: TranslationLinter;
+    _widgetContainers: Map<string, WidgetContainer>;
     lastRenderedMarkdown: React.ReactNode;
     reuseMarkdown: boolean;
     translationIndex: number;

package/dist/styles/constants.d.ts

@@ -1,5 +1,5 @@
-export declare const baseFontFamily = "'Proxima Nova',sans-serif";
-export declare const boldFontFamily = "'Proxima Nova Semibold',sans-serif";
+export declare const baseFontFamily = "'Lato', sans-serif";
+export declare const boldFontFamily = "'Lato-Bold', 'Lato', sans-serif";
 export declare const green = "#76A005";
 export declare const kaGreen = "#71B307";
 export declare const blue = "#1C758A";

package/dist/widget-container.d.ts

@@ -5,6 +5,7 @@ import type { LinterContextProps } from "@khanacademy/perseus-linter";
 type Props = {
     shouldHighlight: boolean;
     type: string;
+    id: string;
     initialProps: WidgetProps<any, PerseusWidgetOptions>;
     linterContext: LinterContextProps;
 };
@@ -16,6 +17,7 @@ type State = {
     widgetProps: WidgetProps<any, PerseusWidgetOptions>;
 };
 declare class WidgetContainer extends React.Component<Props, State> {
+    widgetRef: React.RefObject<React.ComponentType<any>>;
     static defaultProps: DefaultProps;
     state: any;
     componentDidMount(): void;

package/dist/widgets/expression.d.ts

@@ -51,7 +51,9 @@ export declare class Expression extends React.Component<Props, ExpressionState>
     componentDidUpdate: (prevProps: Props) => void;
     componentWillUnmount: () => void;
     _handleMouseDown: () => void;
-    simpleValidate: (rubric: Rubric, onInputError: OnInputErrorFunctionType) => PerseusScore;
+    simpleValidate: (rubric: Rubric & {
+        scoring?: boolean;
+    }, onInputError: OnInputErrorFunctionType) => PerseusScore;
     getUserInput: () => string;
     change: (...args: any) => any | undefined;
     parse: (value: string, props: Props) => any;
@@ -65,7 +67,6 @@ export declare class Expression extends React.Component<Props, ExpressionState>
     getInputPaths: () => ReadonlyArray<ReadonlyArray<any>>;
     getGrammarTypeForPath: (inputPath: string) => string;
     setInputValue: (path: string, newValue: string, cb: () => void) => void;
-    sendExpressionEvaluatedEvent(result: "correct" | "incorrect" | "invalid"): void;
     render(): React.ReactNode | React.ReactElement<React.ComponentProps<"div">>;
 }
 /**
@@ -213,7 +214,7 @@ declare const _default: Readonly<{
         onFocus: (blurPath: import("../types").FocusPath) => void;
         times: boolean;
         value: string;
-    }, "static" | "trackInteraction" | "onChange" | "problemNum" | "questionCompleted" | "keypadElement" | "alignment" | "analytics" | "buttonsVisible" | "containerSizeClass" | "widgetId" | "findWidgets" | "keypadConfiguration" | "reviewModeRubric" | "isLastUsedWidget"> & {
+    }, "static" | "trackInteraction" | "onChange" | "analytics" | "problemNum" | "questionCompleted" | "keypadElement" | "alignment" | "buttonsVisible" | "containerSizeClass" | "widgetId" | "findWidgets" | "keypadConfiguration" | "reviewModeRubric" | "isLastUsedWidget"> & {
         value?: string | undefined;
         onFocus?: ((blurPath: import("../types").FocusPath) => void) | undefined;
         onBlur?: ((blurPath: import("../types").FocusPath) => void) | undefined;
@@ -419,7 +420,7 @@ declare const _default: Readonly<{
         onFocus: (blurPath: import("../types").FocusPath) => void;
         times: boolean;
         value: string;
-    }, "static" | "trackInteraction" | "onChange" | "problemNum" | "questionCompleted" | "keypadElement" | "alignment" | "analytics" | "buttonsVisible" | "containerSizeClass" | "widgetId" | "findWidgets" | "keypadConfiguration" | "reviewModeRubric" | "isLastUsedWidget"> & {
+    }, "static" | "trackInteraction" | "onChange" | "analytics" | "problemNum" | "questionCompleted" | "keypadElement" | "alignment" | "buttonsVisible" | "containerSizeClass" | "widgetId" | "findWidgets" | "keypadConfiguration" | "reviewModeRubric" | "isLastUsedWidget"> & {
         value?: string | undefined;
         onFocus?: ((blurPath: import("../types").FocusPath) => void) | undefined;
         onBlur?: ((blurPath: import("../types").FocusPath) => void) | undefined;

package/package.json

@@ -3,7 +3,7 @@
     "description": "Core Perseus API (includes renderers and widgets)",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "12.2.0",
+    "version": "12.3.0",
     "publishConfig": {
         "access": "public"
     },
@@ -22,13 +22,13 @@
         "test": "bash -c 'yarn --silent --cwd \"../..\" test ${@:0} $($([[ ${@: -1} = -* ]] || [[ ${@: -1} = bash ]]) && echo $PWD)'"
     },
     "dependencies": {
-        "@khanacademy/kas": "^0.3.3",
-        "@khanacademy/kmath": "^0.1.4",
-        "@khanacademy/math-input": "^14.2.0",
-        "@khanacademy/perseus-core": "1.1.2",
-        "@khanacademy/perseus-linter": "^0.3.6",
-        "@khanacademy/pure-markdown": "^0.2.8",
-        "@khanacademy/simple-markdown": "^0.10.2"
+        "@khanacademy/kas": "^0.3.4",
+        "@khanacademy/kmath": "^0.1.5",
+        "@khanacademy/math-input": "^14.2.1",
+        "@khanacademy/perseus-core": "1.2.0",
+        "@khanacademy/perseus-linter": "^0.3.7",
+        "@khanacademy/pure-markdown": "^0.2.9",
+        "@khanacademy/simple-markdown": "^0.10.3"
     },
     "devDependencies": {
         "@khanacademy/wonder-blocks-button": "^4.1.3",

package/src/__tests__/renderer-api.test.tsx

@@ -8,9 +8,10 @@ import TestUtils from "react-dom/test-utils";
 import _ from "underscore";
 import "jest-enzyme";
 
-import {ClassNames, Dependencies, Renderer} from "@khanacademy/perseus";
-
 import {testDependencies} from "../../../../testing/test-dependencies";
+import * as Dependencies from "../dependencies";
+import {ClassNames} from "../perseus-api";
+import Renderer from "../renderer";
 import {registerAllWidgetsForTesting} from "../util/register-all-widgets-for-testing";
 
 import imageItem from "./test-items/image-item";
@@ -18,6 +19,8 @@ import inputNumber1Item from "./test-items/input-number-1-item";
 import inputNumber2Item from "./test-items/input-number-2-item";
 import tableItem from "./test-items/table-item";
 
+import type {APIOptions} from "../types";
+
 const itemWidget = inputNumber1Item;
 
 // Returns a promise that will resolve shortly after the end of this
@@ -30,16 +33,20 @@ const delayedPromise = (value: undefined) => {
     return deferred.promise();
 };
 
-const renderQuestionArea = function (item, apiOptions): any {
+const renderQuestionArea = function (item, apiOptions?: APIOptions): any {
     const wrapper = mount(
         <RenderStateRoot>
-            <Renderer
-                content={item.question.content}
-                images={item.question.images}
-                widgets={item.question.widgets}
-                problemNum={0}
-                apiOptions={apiOptions}
-            />
+            <Dependencies.DependenciesContext.Provider
+                value={{analytics: {onAnalyticsEvent: async () => undefined}}}
+            >
+                <Renderer
+                    content={item.question.content}
+                    images={item.question.images}
+                    widgets={item.question.widgets}
+                    problemNum={0}
+                    apiOptions={apiOptions}
+                />
+            </Dependencies.DependenciesContext.Provider>
         </RenderStateRoot>,
         {includeDefaultTestHarness: false},
     );
@@ -56,7 +63,6 @@ describe("Perseus API", function () {
 
     describe("setInputValue", function () {
         it("should be able to produce a correctly graded value", function () {
-            // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
             const renderer = renderQuestionArea(inputNumber1Item);
             renderer.setInputValue(["input-number 1"], "5");
             const score = renderer.guessAndScore()[1];
@@ -65,7 +71,6 @@ describe("Perseus API", function () {
         });
 
         it("should be able to produce a wrong value", function () {
-            // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
             const renderer = renderQuestionArea(inputNumber1Item);
             renderer.setInputValue(["input-number 1"], "3", () => {});
             const score = renderer.guessAndScore()[1];
@@ -74,7 +79,6 @@ describe("Perseus API", function () {
         });
 
         it("should be able to produce an empty score", function () {
-            // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
             const renderer = renderQuestionArea(inputNumber1Item);
             renderer.setInputValue(["input-number 1"], "3");
             let score = renderer.guessAndScore()[1];
@@ -86,7 +90,6 @@ describe("Perseus API", function () {
         });
 
         it("should be able to accept a callback", function (done) {
-            // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
             const renderer = renderQuestionArea(inputNumber1Item);
             renderer.setInputValue(["input-number 1"], "3", function () {
                 const guess = renderer.getUserInput()[0];
@@ -99,14 +102,12 @@ describe("Perseus API", function () {
 
     describe("getInputPaths", function () {
         it("should be able to find all the input widgets", function () {
-            // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
             const renderer = renderQuestionArea(inputNumber2Item);
             const numPaths = renderer.getInputPaths().length;
             expect(numPaths).toBe(2);
         });
 
         it("should be able to find all inputs within widgets", function () {
-            // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
             const renderer = renderQuestionArea(tableItem);
             const numPaths = renderer.getInputPaths().length;
             expect(numPaths).toBe(8);
@@ -115,7 +116,6 @@ describe("Perseus API", function () {
 
     describe("getDOMNodeForPath", function () {
         it("should find one DOM node per <input>", function () {
-            // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
             const renderer = renderQuestionArea(inputNumber2Item);
             const inputPaths = renderer.getInputPaths();
             const allInputs = TestUtils.scryRenderedDOMComponentsWithTag(
@@ -126,7 +126,6 @@ describe("Perseus API", function () {
         });
 
         it("should find the right DOM nodes for the <input>s", function () {
-            // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
             const renderer = renderQuestionArea(inputNumber2Item);
             const inputPaths = renderer.getInputPaths();
             const allInputs = TestUtils.scryRenderedDOMComponentsWithTag(
@@ -165,11 +164,7 @@ describe("Perseus API", function () {
                 // version
                 expect(ClassNames.FOCUSED).toBe("perseus-focused");
 
-                const renderer = renderQuestionArea(inputNumber1Item, {
-                    interceptInputFocus: function (widgetId) {
-                        renderer.setInputValue(widgetId, "5");
-                    },
-                });
+                const renderer = renderQuestionArea(inputNumber1Item);
 
                 const input =
                     // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'querySelector' does not exist on type 'Element | Text'.

package/src/article-renderer.tsx

@@ -19,19 +19,20 @@ import type {KeypadAPI} from "@khanacademy/math-input";
 import type {KeypadContextRendererInterface} from "@khanacademy/perseus-core";
 import type {LinterContextProps} from "@khanacademy/perseus-linter";
 
-type Props = {
-    apiOptions: APIOptions;
-    json: PerseusRenderer | ReadonlyArray<PerseusRenderer>;
-    // Whether to use the new Bibliotron styles for articles
-    /**
-     * @deprecated Does nothing
-     */
-    useNewStyles: boolean;
-    linterContext: LinterContextProps;
-    legacyPerseusLint?: ReadonlyArray<string>;
-    keypadElement?: KeypadAPI | null | undefined;
-    dependencies: PerseusDependenciesV2;
-} & KeypadProps;
+type Props = Partial<React.ContextType<typeof DependenciesContext>> &
+    KeypadProps & {
+        apiOptions: APIOptions;
+        json: PerseusRenderer | ReadonlyArray<PerseusRenderer>;
+        // Whether to use the new Bibliotron styles for articles
+        /**
+         * @deprecated Does nothing
+         */
+        useNewStyles: boolean;
+        linterContext: LinterContextProps;
+        legacyPerseusLint?: ReadonlyArray<string>;
+        keypadElement?: KeypadAPI | null | undefined;
+        dependencies: PerseusDependenciesV2;
+    };
 
 type DefaultProps = {
     apiOptions: Props["apiOptions"];
@@ -208,6 +209,7 @@ class ArticleRenderer
                             "article",
                         )}
                         legacyPerseusLint={this.props.legacyPerseusLint}
+                        {...this.props.dependencies}
                     />
                 </div>
             );

package/src/error-boundary.tsx

@@ -5,6 +5,9 @@ import {Errors, Log} from "./logging/log";
 type Props = {
     children: React.ReactNode;
     metadata?: Record<string, string>;
+
+    // A callback that is called when the error boundary traps an error.
+    onError?: (error: Error, info: any) => void;
 };
 type State = {
     error: string;

package/src/multi-items/__tests__/__snapshots__/multi-renderer.test.tsx.snap

@@ -218,7 +218,7 @@ exports[`multi-item renderer should snapshot: initial render 1`] = `
                                   style="border-color: transparent; border-radius: 50%;"
                                 >
                                   <div
-                                    class="circle_1tys2th"
+                                    class="circle_1w6i3h1"
                                     data-is-radio-icon="true"
                                     data-test-id="choice-icon__library-choice-icon"
                                     style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
@@ -385,7 +385,7 @@ exports[`multi-item renderer should snapshot: initial render 1`] = `
                                   style="border-color: transparent; border-radius: 50%;"
                                 >
                                   <div
-                                    class="circle_1tys2th"
+                                    class="circle_1w6i3h1"
                                     data-is-radio-icon="true"
                                     data-test-id="choice-icon__library-choice-icon"
                                     style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
@@ -552,7 +552,7 @@ exports[`multi-item renderer should snapshot: initial render 1`] = `
                                   style="border-color: transparent; border-radius: 50%;"
                                 >
                                   <div
-                                    class="circle_1tys2th"
+                                    class="circle_1w6i3h1"
                                     data-is-radio-icon="true"
                                     data-test-id="choice-icon__library-choice-icon"
                                     style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
@@ -719,7 +719,7 @@ exports[`multi-item renderer should snapshot: initial render 1`] = `
                                   style="border-color: transparent; border-radius: 50%;"
                                 >
                                   <div
-                                    class="circle_1tys2th"
+                                    class="circle_1w6i3h1"
                                     data-is-radio-icon="true"
                                     data-test-id="choice-icon__library-choice-icon"
                                     style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
@@ -886,7 +886,7 @@ exports[`multi-item renderer should snapshot: initial render 1`] = `
                                   style="border-color: transparent; border-radius: 50%;"
                                 >
                                   <div
-                                    class="circle_1tys2th"
+                                    class="circle_1w6i3h1"
                                     data-is-radio-icon="true"
                                     data-test-id="choice-icon__library-choice-icon"
                                     style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"

package/src/renderer.tsx

@@ -29,6 +29,7 @@ import preprocessTex from "./util/katex-preprocess";
 import WidgetContainer from "./widget-container";
 import * as Widgets from "./widgets";
 
+import type {DependenciesContext} from "./dependencies";
 import type {PerseusRenderer, PerseusWidgetOptions} from "./perseus-types";
 import type {
     APIOptions,
@@ -52,6 +53,8 @@ const noopOnRender = () => {};
 
 const SHOULD_CLEAR_WIDGETS_PROP_LIST = ["content", "problemNum", "widgets"];
 
+const makeContainerId = (id: string) => "container:" + id;
+
 // Check if one focus path / id path is a prefix of another
 // The focus path null will never be a prefix of any non-null
 // path, since it represents no focus.
@@ -144,7 +147,7 @@ export type Widget = {
     examples?: () => ReadonlyArray<string>;
 };
 
-type Props = {
+type Props = Partial<React.ContextType<typeof DependenciesContext>> & {
     apiOptions?: APIOptions;
     alwaysUpdate?: boolean;
     findExternalWidgets: any;
@@ -223,6 +226,8 @@ class Renderer extends React.Component<Props, State> {
     // The i18n linter.
     _translationLinter: TranslationLinter;
 
+    _widgetContainers: Map<string, WidgetContainer> = new Map();
+
     lastRenderedMarkdown: React.ReactNode;
     // @ts-expect-error - TS2564 - Property 'reuseMarkdown' has no initializer and is not definitely assigned in the constructor.
     reuseMarkdown: boolean;
@@ -390,9 +395,7 @@ class Renderer extends React.Component<Props, State> {
         // they are re-rendered, so even if they've been
         // re-rendered we need to call these methods on them.
         _.each(this.widgetIds, (id) => {
-            // eslint-disable-next-line react/no-string-refs
-            const container = this.refs["container:" + id];
-            // @ts-expect-error - TS2339 - Property 'replaceWidgetProps' does not exist on type 'ReactInstance'.
+            const container = this._widgetContainers.get(makeContainerId(id));
             container && container.replaceWidgetProps(this.getWidgetProps(id));
         });
 
@@ -550,21 +553,25 @@ class Renderer extends React.Component<Props, State> {
             // filtered out in this.render(), so we shouldn't have to
             // worry about using this widget key and ref:
             return (
-                <ErrorBoundary
-                    key={"container:" + id}
-                    metadata={{widget_type: type, widget_id: id}}
-                >
-                    <WidgetContainer
-                        ref={"container:" + id}
-                        type={type}
-                        initialProps={this.getWidgetProps(id)}
-                        shouldHighlight={shouldHighlight}
-                        linterContext={PerseusLinter.pushContextStack(
-                            this.props.linterContext,
-                            "widget",
-                        )}
-                    />
-                </ErrorBoundary>
+                <WidgetContainer
+                    key={makeContainerId(id)}
+                    id={id}
+                    ref={(node) => {
+                        const containerId = makeContainerId(id);
+                        if (node != null) {
+                            this._widgetContainers.set(containerId, node);
+                        } else {
+                            this._widgetContainers.delete(containerId);
+                        }
+                    }}
+                    type={type}
+                    initialProps={this.getWidgetProps(id)}
+                    shouldHighlight={shouldHighlight}
+                    linterContext={PerseusLinter.pushContextStack(
+                        this.props.linterContext,
+                        "widget",
+                    )}
+                />
             );
         }
         return null;
@@ -603,7 +610,6 @@ class Renderer extends React.Component<Props, State> {
 
         return {
             ...widgetProps,
-            ref: id,
             widgetId: id,
             alignment: widgetInfo && widgetInfo.alignment,
             // When determining if a widget is static, we verify that the widget is not an
@@ -853,15 +859,11 @@ class Renderer extends React.Component<Props, State> {
         ];
     };
 
-    getWidgetInstance: (id: string) => Widget | null | undefined = (
-        id: string,
-    ): Widget | null | undefined => {
-        // eslint-disable-next-line react/no-string-refs
-        const ref = this.refs["container:" + id];
+    getWidgetInstance: (id: string) => Widget | null | undefined = (id) => {
+        const ref = this._widgetContainers.get(makeContainerId(id));
         if (!ref) {
             return null;
         }
-        // @ts-expect-error - TS2339 - Property 'getWidget' does not exist on type 'ReactInstance'.
         return ref.getWidget();
     };
 
@@ -1781,7 +1783,7 @@ class Renderer extends React.Component<Props, State> {
             // widget can be undefined if it hasn't yet been rendered
             if (widget && widget.simpleValidate) {
                 widgetScores[id] = widget.simpleValidate(
-                    props?.options,
+                    {...props?.options, scoring: true},
                     onInputError,
                 );
             }

package/src/server-item-renderer.tsx

@@ -416,6 +416,7 @@ export class ServerItemRenderer
                     content={this.props.item.question.content}
                     widgets={this.props.item.question.widgets}
                     images={this.props.item.question.images}
+                    {...this.props.dependencies}
                 />
             </AssetContext.Provider>
         );

package/src/styles/constants.ts

@@ -1,7 +1,7 @@
-// @baseFontFamily:        "Proxima Nova", sans-serif;
-export const baseFontFamily = "'Proxima Nova',sans-serif";
-// @boldFontFamily:        "Proxima Nova Semibold", sans-serif;
-export const boldFontFamily = "'Proxima Nova Semibold',sans-serif";
+// @baseFontFamily:        "Lato", sans-serif;
+export const baseFontFamily = "'Lato', sans-serif";
+// @boldFontFamily:        "Lato-Bold", "Lato", sans-serif;
+export const boldFontFamily = "'Lato-Bold', 'Lato', sans-serif";
 // @green:                 #76a005;
 export const green = "#76A005";
 // @kaGreen:               #71b307;

package/src/styles/perseus-renderer.less

@@ -113,16 +113,6 @@
 
     // HACK(yejia): Override the font size and line height for blurbs
     //
-    // NOTE(yejia): Minion Pro is only loaded on GTP pages, because those
-    //     are the main call sites for blurbs and the passage widget. We
-    //     considered inserting the relevant stylesheet whenever the passage
-    //     widget loads, but this approach produced a "flash of unstyled
-    //     text", so we decided to embed the stylesheet into the relevant
-    //     page templates instead.
-    //
-    // NOTE(yejia): Minion Pro will not be available on ZNDs, due to
-    //     restrictions in our Adobe TypeKit configuration.
-    //
     // TODO(TP-3315): Remove once Perseus uses Wonder Blocks BodySerif
     .test-prep-blurb div.paragraph {
         font-size: 16px;

package/src/styles/variables.less

@@ -1,6 +1,6 @@
 // Steal from webapp/stylesheets/shared-package/variables.less
-@baseFontFamily: "Proxima Nova", sans-serif;
-@boldFontFamily: "Proxima Nova Semibold", sans-serif;
+@baseFontFamily: "Lato", sans-serif;
+@boldFontFamily: "Lato-Bold", "Lato", sans-serif;
 @green: #76a005;
 @kaGreen: #71b307;
 @blue: #1c758a;

package/src/styles/variables.shared.less

@@ -86,8 +86,8 @@
 
 // Typography
 @baseFontSize: 14px;
-// The body of the page is setup to use 'Helvetica' by default and 'Proxima
-// Nova' (or 'Lato' if you're testing our new typography) if/once it downloads.
+// The body of the page is setup to use 'Helvetica' by default and
+// 'Lato' if/once it downloads.
 // For your elements to follow this pattern, all you need is to make the text
 // in your element inherit from the body using the "inherit" value.
 @baseFontFamily: inherit;

package/src/styles/widgets/expression.less

@@ -63,80 +63,3 @@
         }
     }
 }
-
-// Old expression widget
-.perseus-widget-expression-old {
-    &,
-    > .output,
-    > .output > .tex,
-    > .output > .placeholder {
-        display: block;
-    }
-}
-
-.perseus-widget-expression-old input,
-#answer_area .perseus-widget-expression-old input {
-    direction: ltr;
-    border: 1px solid #a4a4a4;
-    border-radius: 5px;
-    box-sizing: border-box;
-    font-size: 14px;
-    margin-bottom: 5px;
-    max-width: 240px;
-    padding: 6px;
-    width: 100%;
-}
-
-.perseus-widget-expression-old > .output {
-    background: #f2f2f2;
-    border-radius: 5px;
-    padding: 10px;
-    margin: 10px 0;
-}
-
-#answer_area .perseus-widget-expression-old > .output {
-    background: #f7f7f7;
-}
-
-.perseus-widget-expression-old > .output > .tex {
-    overflow-x: auto;
-    padding: 5px;
-}
-
-.perseus-widget-expression-old > .output > .placeholder {
-    position: relative;
-    height: 40px;
-    overflow-y: hidden;
-}
-
-.perseus-widget-expression-old > .output > .placeholder > .error {
-    border-radius: 10px;
-    background: #f7f7f7;
-    border: 1px solid #ddd;
-    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
-    color: #000;
-    display: none;
-    font-weight: normal;
-    min-height: 22px;
-    width: 168px;
-    position: absolute;
-    top: 0px;
-    left: 40px;
-    margin: auto;
-}
-
-.perseus-widget-expression-old > .output > .placeholder > .error > .buddy {
-    background-image: url(/images/perseus/error-buddy.png);
-    background-size: 100%;
-    height: 36px;
-    width: 40px;
-    position: absolute;
-    top: -3px;
-    left: -42px;
-}
-
-.perseus-widget-expression-old > .output > .placeholder > .error > .message {
-    font: 12px @baseFontFamily;
-    line-height: 1.4em;
-    margin: 0px 4px;
-}

package/src/styles/widgets/passage.less

@@ -17,26 +17,8 @@
         margin: 22px;
         position: relative;
 
-        // Use the "Minion Pro" font, if available. If not, fall back to
-        // KaTeX_Main or another serif font.
-        //
-        // NOTE(mdr): Minion Pro is only loaded on SAT and GTP pages, because
-        //     those are the main call sites for the passage widget. We
-        //     considered inserting the relevant stylesheet whenever the
-        //     passage widget loads, but this approach produced a "flash of
-        //     unstyled text", so we decided to embed the stylesheet into the
-        //     relevant page templates instead.
-        //
-        // NOTE(mdr): Minion Pro will not be available on ZNDs, due to
-        //     restrictions in our Adobe TypeKit configuration.
-        //
-        // TODO(mdr): The BodySerif component will hopefully soon use Minion
-        //     Pro by default (WB-399). Once that happens, we should be able to
-        //     switch to the BodySerif component (TP-3112), and remove this
-        //     special font-family rule.
         div.paragraph {
-            font-family: "minion-pro", KaTeX_Main, Times, "Times New Roman",
-                serif;
+            font-family: KaTeX_Main, Times, "Times New Roman", serif;
         }
 
         .passage-title div.paragraph {