@khanacademy/perseus 20.0.2 → 20.2.0

package/dist/index.css

@@ -4258,12 +4258,81 @@ html body .mq-editable-field .mq-selection .mq-nthroot-container * {
     --mafs-bg: transparent;
     --mafs-fg: rgb(33, 36, 44); /* WB color.offBlack */
 
-    --mafs-line-color: var(--mafs-fg);
-    --grid-line-subdivision-color: rgba(33, 36, 44, 0.16);
+    --mafs-line-color: rgba(33, 36, 44, 0.16); /* WB color.offBlack16*/
 
     --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 */
+
+    /* overridden on a per-point basis */
+    --movable-point-color: var(--mafs-blue);
+    --movable-point-center-radius: 6px;
+    --movable-point-ring-radius: calc(2px + var(--movable-point-center-radius));
+    --movable-point-halo-radius: calc(3px + var(--movable-point-ring-radius));
+    --movable-point-hover-expansion: 2px;
+}
+
+.MafsView .movable-segment {
+    --mafs-segment-stroke-color: rgba(33, 36, 44, 0.64); /* offBlack64 */
+    --mafs-segment-stroke-weight: 2px;
+}
+
+.MafsView .movable-segment:is(:focus-visible, :hover) {
+    outline: none;
+    --mafs-segment-stroke-color: var(--mafs-blue);
+    --mafs-segment-stroke-weight: 4px;
+}
+
+.MafsView .movable-segment:focus {
+    outline: none;
+}
+
+.MafsView .movable-point-hitbox {
+    fill: transparent;
+}
+
+.MafsView :is(.movable-point-center, .movable-point-ring, .movable-point-halo) {
+    transition: r 0.15s ease-out;
+}
+
+.MafsView .movable-point-center {
+    r: var(--movable-point-center-radius);
+}
+
+.MafsView .movable-point-halo {
+    r: var(--movable-point-halo-radius);
+    fill: var(--movable-point-color);
+    opacity: 0.25;
+    filter: drop-shadow(0 5px 5px #0008);
+}
+
+.MafsView .movable-point-ring {
+    r: var(--movable-point-ring-radius);
+    fill: #fff;
+}
+
+.MafsView .movable-point:hover .movable-point-center {
+    r: calc(
+        var(--movable-point-hover-expansion) +
+            var(--movable-point-center-radius)
+    );
+}
+
+.MafsView .movable-point:hover .movable-point-ring {
+    r: calc(
+        var(--movable-point-hover-expansion) + var(--movable-point-ring-radius)
+    );
+}
+
+.MafsView .movable-point:hover .movable-point-halo {
+    r: calc(
+        var(--movable-point-hover-expansion) + var(--movable-point-halo-radius)
+    );
+}
+
+.MafsView .movable-point:focus-visible .movable-point-halo {
+    outline: 2px solid blue;
+    border-radius: 99px;
 }

package/dist/index.d.ts

@@ -83,7 +83,7 @@ export type { ILogger, LogErrorOptions, ErrorKind } from "./logging/log";
 export type { ServerItemRenderer as ServerItemRendererComponent } from "./server-item-renderer";
 export type { Alignment, APIOptions, APIOptionsWithDefaults, ChangeHandler, DeviceType, DomInsertCheckFn, EditorMode, FocusPath, Hint, ImageDict, ImageUploader, JiptLabelStore, JiptRenderer, PerseusDependencies, PerseusScore, Version, VideoData, VideoKind, WidgetDict, WidgetExports, } from "./types";
 export type { ParsedValue } from "./util";
-export type { PerseusAnswerArea, PerseusExpressionWidgetOptions, Range, Size, MathFormat, InputNumberWidget, // TODO(jeremy): remove?
+export type { LockedFigure, LockedFigureType, LockedPoint, PerseusGraphType, PerseusAnswerArea, PerseusExpressionWidgetOptions, Range, Size, MathFormat, InputNumberWidget, // TODO(jeremy): remove?
 PerseusImageBackground, PerseusInputNumberWidgetOptions, PerseusInteractiveGraphWidgetOptions, PerseusItem, PerseusPlotterWidgetOptions, PerseusPythonProgramWidgetOptions, PerseusRadioWidgetOptions, PerseusExampleWidgetOptions, PerseusExampleGraphieWidgetOptions, PerseusSimpleMarkdownTesterWidgetOptions, PerseusRenderer, PerseusWidget, PerseusWidgetsMap, } from "./perseus-types";
 export type { Coord } from "./interactive2/types";
 export type { MarkerType } from "./widgets/label-image/types";