Styles: Less file housecleaning

.changeset/grumpy-icons-retire.md

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

packages/perseus/src/renderer.tsx

@@ -1131,7 +1131,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";
 
@@ -677,73 +676,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";