@khanacademy/perseus 20.4.1 → 20.5.0

package/dist/index.js

@@ -33,6 +33,7 @@ var caretDown = require('@phosphor-icons/core/assets/regular/caret-down.svg');
 var caretUp = require('@phosphor-icons/core/assets/regular/caret-up.svg');
 var debounce$1 = require('lodash.debounce');
 var mafs = require('mafs');
+var wonderBlocksTokens = require('@khanacademy/wonder-blocks-tokens');
 var wonderBlocksIcon = require('@khanacademy/wonder-blocks-icon');
 var questionIcon = require('@phosphor-icons/core/regular/question.svg');
 var wonderBlocksTypography = require('@khanacademy/wonder-blocks-typography');
@@ -28278,6 +28279,18 @@ class Graph extends React__namespace.Component {
   }
 }
 
+/**
+ * Takes a style object with color names and converts them to actual
+ * Wonder Blocks color values. This way, we can use colors and their
+ * names in the editor UI without having to convert them back and forth.
+ */
+function convertStyle(style) {
+  return {
+    ...style,
+    stroke: wonderBlocksTokens.color[style?.stroke || "blue"],
+    fill: wonderBlocksTokens.color[style?.fill || "blue"]
+  };
+}
 const GraphLockedLayer = props => {
   const {
     lockedFigures
@@ -28291,7 +28304,7 @@ const GraphLockedLayer = props => {
           x: x,
           y: y,
           svgCircleProps: {
-            style: figure.style
+            style: convertStyle(figure.style)
           }
         });
     }
@@ -41605,7 +41618,7 @@ const init = function (options) {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "20.4.1";
+const libVersion = "20.5.0";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {