@khanacademy/perseus 19.6.2 → 19.7.0

package/dist/es/index.css

@@ -4163,3 +4163,171 @@ html body .mq-editable-field .mq-selection .mq-nthroot-container * {
   box-sizing: content-box;
 }
 
+
+.MafsView {
+  display: block;
+  background: var(--mafs-bg);
+  overflow: hidden;
+  -webkit-user-select: none;
+  user-select: none;
+  font-family: inherit;
+  font-variant-numeric: tabular-nums;
+  touch-action: none;
+  outline: 0;
+
+  --mafs-bg: black;
+  --mafs-fg: white;
+
+  --mafs-origin-color: var(--mafs-fg);
+  --mafs-line-color: #555;
+  --grid-line-subdivision-color: #222;
+
+  --mafs-red: #f11d0e;
+  --mafs-orange: #f14e0e;
+  --mafs-yellow: #ffe44a;
+  --mafs-green: #15e272;
+  --mafs-blue: #58a6ff;
+  --mafs-indigo: #7c58ff;
+  --mafs-violet: #ae58ff;
+  --mafs-pink: #ee00ab;
+}
+
+.MafsView text {
+  fill: var(--mafs-fg);
+  cursor: default;
+}
+
+.MafsView path {
+  stroke: var(--mafs-fg);
+}
+
+.MafsView:focus-visible {
+  border-radius: 5px;
+  outline: 3px solid #58a6ff;
+}
+
+@supports not selector(:focus-visible) {
+  .MafsView:focus {
+    border-radius: 5px;
+    outline: 3px solid #58a6ff;
+  }
+}
+
+.mafs-shadow {
+  paint-order: stroke;
+  stroke-width: 3px;
+  stroke: var(--mafs-bg);
+  stroke-opacity: 0.75;
+  stroke-linejoin: round;
+}
+
+.mafs-movable-point {
+  cursor: grab;
+  touch-action: none;
+}
+
+.mafs-movable-point-dragging {
+  cursor: grabbing;
+}
+
+.mafs-movable-point:focus {
+  outline: 0;
+}
+
+.mafs-movable-point * {
+  fill: none;
+  stroke: none;
+}
+
+.mafs-movable-point-hitbox {
+  fill: transparent;
+}
+
+.mafs-movable-point-focus {
+  stroke: var(--movable-point-color);
+  stroke-width: 2;
+  stroke-opacity: 0;
+  fill: none;
+  transition: stroke-opacity 0.2s ease;
+}
+
+.mafs-movable-point-ring {
+  fill: var(--movable-point-color);
+  fill-opacity: 0.25;
+  stroke: none;
+  transition: r 0.2s ease;
+}
+
+.mafs-movable-point-point {
+  fill: var(--movable-point-color);
+  transition: r 0.2s ease;
+}
+
+/* Hover */
+
+.mafs-movable-point:hover .mafs-movable-point-point,
+.mafs-movable-point:focus-visible .mafs-movable-point-point {
+  r: calc(var(--movable-point-ring-size) - 2px);
+}
+
+.mafs-movable-point:hover .mafs-movable-point-ring,
+.mafs-movable-point:focus-visible .mafs-movable-point-ring {
+  r: calc(var(--movable-point-ring-size) + 3px);
+}
+
+.mafs-movable-point.mafs-movable-point-dragging .mafs-movable-point-ring {
+  r: var(--movable-point-ring-size);
+}
+
+/* Focus */
+
+.mafs-movable-point:focus-visible .mafs-movable-point-focus {
+  stroke-opacity: 1;
+}
+
+@font-face {
+  font-family: "CMU Serif";
+  font-style: roman;
+  font-weight: 500;
+  src: url("./fonts/cmu-serif-500-roman.woff2") format("woff2"), url("./fonts/cmu-serif-500-roman.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "CMU Serif";
+  font-style: italic;
+  font-weight: 500;
+  src: url("./fonts/cmu-serif-500-italic.woff2") format("woff2"), url("./fonts/cmu-serif-500-italic.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "CMU Serif";
+  font-style: roman;
+  font-weight: 700;
+  src: url("./fonts/cmu-serif-700-roman.woff2") format("woff2"), url("./fonts/cmu-serif-700-roman.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "CMU Serif";
+  font-style: italic;
+  font-weight: 700;
+  src: url("./fonts/cmu-serif-700-italic.woff2") format("woff2"), url("./fonts/cmu-serif-700-italic.ttf") format("truetype");
+}
+
+.MafsView {
+  font-family: "CMU Serif", serif;
+}
+
+/**
+ * Overrides of mafs styles-- we will want to move this into JS land
+ * to take advantage of WB tokens, but I cannot get that to work at the moment
+ */
+.MafsView {
+    --mafs-bg: transparent;
+    --mafs-fg: #21242c; /* WB color.offBlack */
+
+    --mafs-blue: #1865f2; /* WB color.blue */
+    --mafs-red: #d92916; /* WB color.red */
+    --mafs-green: #00a60e; /* WB color.green */
+    --mafs-violet: #9059ff; /* WB color.purple */
+    --mafs-yellow: #ffb100; /* WB color.gold */
+}