Update CSS for MathJax 3 (#631)

## Summary:
Perseus styles KaTeX-rendered math in specific ways for different
scenarios (e.g. inline math, block math, and graphie labels). Before we
release MathJax 3 to users, it should do the same for MathJax-rendered
math.

See also: Khan/webapp#15509

Issue: https://khanacademy.atlassian.net/browse/LC-1087

## Test plan:

Follow the instructions in webapp's
`services/static/javascript/perseus/README.md` to install a dev build of
Perseus.  View math in the following situations with `?devflagk=mathjax3`
appended to the URL and verify that it looks like the math on prod:

- /devadmin/tex
- /devadmin/tex/testcases
- A math article, e.g. `/math/multivariable-calculus/thinking-about-multivariable-function/x786f2022:vectors-and-matrices/a/vectors-and-notation-mvc`
- A math exercise
- Graphie labels
- The exercise editor (note the color contrast between math and the surrounding text in the mobile preview).
- An interactive graph
- A passage widget
- A plotter widget

Author: benchristel

Reviewers: nixterrimus

Required Reviewers:

Approved By: nixterrimus

Checks: ✅ finish_coverage, ✅ Publish npm snapshot (ubuntu-latest, 16.x), ✅ Extract i18n strings (ubuntu-latest, 16.x), ✅ Check builds for changes in size (ubuntu-latest, 16.x), ✅ Lint, Typecheck, and Test (ubuntu-latest, 16.x), ✅ Jest Coverage (ubuntu-latest, 16.x), ✅ Cypress Coverage (ubuntu-latest, 16.x), ✅ Check for .changeset file (ubuntu-latest, 16.x), ✅ gerald

Pull Request URL: #631

.changeset/eighty-pillows-applaud.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": minor
+---
+
+Make KaTeX CSS styles also apply to MathJax 3

packages/perseus/src/styles/articles.less

@@ -99,7 +99,7 @@
         // inline, so we rely on the "actual paragraph" check above
         // (a .paragraph that contains another .paragraph instead of a
         // .perseus-block-math).
-        .katex {
+        .katex, mjx-container {
             font-size: 100%;
         }
     }
@@ -282,7 +282,7 @@
             .paragraph {
                 .text(@choiceTextSize, @choiceLineHeight, @gray17);
 
-                .katex {
+                .katex, mjx-container {
                     color: @gray17;
                 }
             }
@@ -403,7 +403,7 @@
             .paragraph {
                 .text(@choiceTextSize, @choiceLineHeight, @gray17);
 
-                .katex {
+                .katex, mjx-container {
                     color: @gray17;
                 }
             }
@@ -430,13 +430,14 @@
 
     .math(@blockMathTextSize; @blockMathLineHeight;
           @inlineMathTextSize; @inlineMathLineHeight) {
-        .katex {
+        .katex, mjx-container {
             font-size: @inlineMathTextSize;
             line-height: @inlineMathLineHeight;
             color: @gray17;
         }
 
-        .perseus-block-math .katex {
+        .perseus-block-math .katex,
+        .perseus-block-math mjx-container {
             font-size: @blockMathTextSize;
             line-height: @blockMathLineHeight;
         }
@@ -446,7 +447,8 @@
         // https://github.com/Khan/KaTeX/blob/965b8a6164ee54212bf382108f256c6920eb7a70/static/katex.less#L18.
         // It's dangerous to resize labels, since they're deliberately
         // positioned relative to their background images.
-        .graphie-label .katex {
+        .graphie-label .katex,
+        .graphie-label mjx-container {
             font-size: 1.21em;
             line-height: 1.2;
         }

packages/perseus/src/styles/widgets/interactive-graph.less

@@ -41,7 +41,7 @@
         border-radius: 5px;
         bottom: 50px;
 
-        .katex {
+        .katex, mjx-container {
             color: @kaGreen !important;
         }
 
@@ -55,7 +55,8 @@
         text-align: center;
     }
 
-    .graphie-label .katex {
+    .graphie-label .katex,
+    .graphie-label mjx-container {
         color: inherit !important;
     }
 }

packages/perseus/src/styles/widgets/label-image.less

@@ -22,7 +22,7 @@
         .perseus-block-math {
             padding: 0;
 
-            .katex {
+            .katex, mjx-container {
                 font-size: initial !important;
                 line-height: initial !important;
             }

packages/perseus/src/styles/widgets/passage.less

@@ -66,7 +66,7 @@
             }
         }
     }
-    .katex {
+    .katex, mjx-container {
         line-height: @line-height - 2;
     }
 

packages/perseus/src/styles/widgets/plotter.less

@@ -22,7 +22,8 @@
         border: solid 0.5px @gray76;
         border-radius: 4px;
 
-        .graphie-label .katex {
+        .graphie-label .katex,
+        .graphie-label mjx-container {
             color: @gray41;
         }
     }