Styles: Less file housecleaning (#877)

A round of Less file cleanup. There were a bunch of unused variables and files. I figured out what was unused by running `yarn build --watch` and then starting to delete variables. Any time there was a varaible that was still in use, there would be an error like this `[!] (plugin commonjs--resolver) Error: variable @gray95 is undefined`.

  * Get rid of variables.shared.less and move the single used variable to variables.less
  * Rename articles.less to styles.less as it has rules for both articles and exercises!
  * Remove completely unused variables.bootstrap.less
  * Remove outdated comment
  * Extract zoom styles to own file out of styles.less
  * Trim out more unused variables from variables.less

Issue: --none--

## Test plan:

`yarn build` is successful (our builds process Less files into CSS and so if there's variable references that no longer exist, it will fail)

Author: jeremywiebe

Reviewers: jeremywiebe, nedredmond

Required Reviewers:

Approved By: nedredmond

Checks: ✅ codecov/project, ✅ codecov/patch, ✅ Upload Coverage (ubuntu-latest, 20.x), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Jest Coverage (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x), ✅ gerald

Pull Request URL: #877

.changeset/grumpy-icons-retire.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": patch
+---
+
+Remove unused Less variables

packages/perseus/src/renderer.tsx

@@ -1183,7 +1183,7 @@ class Renderer extends React.Component<Props, State> {
             }
             // Widgets can contain text nodes, so we don't center them with
             // markdown magic here.
-            // Instead, we center them with css magic in articles.less
+            // Instead, we center them with css magic in styles.less
             // /cry(aria)
             this._foundTextNodes = true;
 

packages/perseus/src/styles/perseus-renderer.less

@@ -1,15 +1,9 @@
 @import (inline) "./khan-exercise.css";
 
-//
-// Edit this file in the *perseus* repo!
-// (All changes outside the perseus repo will be overwritten)
-//
-
 @import "./variables.less";
 @import "./util.less";
 
-// Article Renderer
-@import "./articles.less";
+@import "./styles.less";
 
 #perseus {
     position: relative;

packages/perseus/src/styles/shared.ts

@@ -43,7 +43,7 @@ export default StyleSheet.create({
 
     responsiveLabel: {
         // NOTE(charlie): The values used here should be kept in sync with the
-        // caption text sizing in Perseus' articles.less.
+        // caption text sizing in Perseus' styles.less.
         // TODO(charlie): Migrate the captions over to using this style.
         [mediaQueries.smOrSmaller]: {
             fontSize: 14,

packages/perseus/src/styles/articles.less → packages/perseus/src/styles/styles.less

@@ -1,4 +1,3 @@
-@import "./variables.shared.less";
 @import "./variables.less";
 @import "./util.less";
 
@@ -676,73 +675,4 @@
     }
 }
 
-/* Derived from the MIT-licensed zoom.js:
-   https://github.com/fat/zoom.js/blob/fd4f3e43153da7596da0bade198e99f98b47791e/
-*/
-
-@zoomOverlayZIndex: 9000;
-@zoomAnimationDurationMs: 300ms;
-
-.zoomable {
-    cursor: pointer;
-    cursor: -webkit-zoom-in;
-    cursor: -moz-zoom-in;
-}
-
-.zoom-img {
-    // NOTE(charlie): We set the zoomed image's background color to white so
-    // that any images with transparent backgrounds (like SVGs and some PNGs)
-    // remain legible over the article content, as our backdrop is opaque.
-    background-color: white;
-    position: absolute;
-    z-index: @zoomOverlayZIndex + 1;
-}
-
-img.zoom-img {
-    cursor: pointer;
-    cursor: -webkit-zoom-out;
-    cursor: -moz-zoom-out;
-}
-
-.zoom-transition {
-    transition: transform @zoomAnimationDurationMs ease;
-}
-
-.zoom-overlay {
-    z-index: @zoomOverlayZIndex;
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    overflow: scroll;
-}
-
-.zoom-overlay-open,
-.zoom-overlay-transitioning {
-    cursor: default;
-}
-
-// Disable vertical scrolling on the page when image is opened in modal.
-.zoom-overlay-open {
-    height: 100%;
-    max-height: 100%;
-    overflow: hidden;
-}
-
-// Render an opaque backdrop upon zoom.
-.zoom-backdrop {
-    z-index: @zoomOverlayZIndex - 1;
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: white;
-    opacity: 0;
-    transition: opacity @zoomAnimationDurationMs;
-}
-
-.zoom-overlay-open > .zoom-backdrop {
-    opacity: 0.9;
-}
+@import "./zoom.less";