@khanacademy/math-input 17.4.0 → 17.4.1

package/dist/es/index.js

@@ -1,7 +1,7 @@
 import { addLibraryVersionToPerseusDebug } from '@khanacademy/perseus-core';
-import Color from '@khanacademy/wonder-blocks-color';
 import * as i18n from '@khanacademy/wonder-blocks-i18n';
 import { getDecimalSeparator, getLocale } from '@khanacademy/wonder-blocks-i18n';
+import { color } from '@khanacademy/wonder-blocks-tokens';
 import { entries } from '@khanacademy/wonder-stuff-core';
 import { StyleSheet, css } from 'aphrodite';
 import * as React from 'react';
@@ -17,7 +17,7 @@ import PropTypes from 'prop-types';
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/math-input";
-const libVersion = "17.4.0";
+const libVersion = "17.4.1";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -2205,7 +2205,7 @@ class MathInput extends React.Component {
     const innerStyle = _extends({}, inlineStyles.innerContainer, {
       borderWidth: this.getBorderWidthPx()
     }, showInputFocusStyle ? {
-      borderColor: Color.blue
+      borderColor: color.blue
     } : {}, style);
 
     // NOTE(diedra): This label explicitly refers to tapping because this field
@@ -2300,9 +2300,9 @@ const inlineStyles = {
     boxSizing: "border-box",
     position: "relative",
     borderStyle: "solid",
-    borderColor: Color.offBlack50,
+    borderColor: color.offBlack50,
     borderRadius: 4,
-    color: Color.offBlack
+    color: color.offBlack
   }
 };
 
@@ -2427,7 +2427,7 @@ const styles$6 = StyleSheet.create({
     marginLeft: 1
   },
   hovered: {
-    background: `linear-gradient(0deg, rgba(24, 101, 242, 0.32), rgba(24, 101, 242, 0.32)), ${Color.white}`,
+    background: `linear-gradient(0deg, rgba(24, 101, 242, 0.32), rgba(24, 101, 242, 0.32)), ${color.white}`,
     border: "1px solid #1865F2"
   },
   pressed: {
@@ -2435,7 +2435,7 @@ const styles$6 = StyleSheet.create({
   },
   focused: {
     outline: "none",
-    border: `2px solid ${Color.blue}`
+    border: `2px solid ${color.blue}`
   },
   innerBox: {
     boxSizing: "border-box",
@@ -2447,7 +2447,7 @@ const styles$6 = StyleSheet.create({
     alignItems: "center"
   },
   innerBoxPressed: {
-    border: `1px solid ${Color.white}`
+    border: `1px solid ${color.white}`
   },
   activeIndicator: {
     position: "absolute",
@@ -2465,15 +2465,15 @@ const styles$6 = StyleSheet.create({
 });
 function imageTintColor(itemState, hovered, focused, pressed) {
   if (itemState === "disabled") {
-    return Color.offBlack64;
+    return color.offBlack64;
   } else if (pressed) {
-    return Color.white;
+    return color.white;
   } else if (itemState === "active") {
-    return Color.blue;
+    return color.blue;
   } else if (hovered) {
-    return Color.blue;
+    return color.blue;
   }
-  return Color.offBlack64;
+  return color.offBlack64;
 }
 class TabbarItem extends React.Component {
   render() {
@@ -4552,9 +4552,9 @@ const styles$4 = StyleSheet.create({
     display: "flex",
     justifyContent: "center",
     alignItems: "center",
-    boxShadow: `0px 1px 0px ${Color.offBlack32}`,
+    boxShadow: `0px 1px 0px ${color.offBlack32}`,
     boxSizing: "border-box",
-    background: Color.white,
+    background: color.white,
     borderRadius: 4,
     borderWidth: 2,
     borderStyle: "solid",
@@ -4565,19 +4565,19 @@ const styles$4 = StyleSheet.create({
     padding: 1
   },
   hovered: {
-    borderColor: Color.blue,
+    borderColor: color.blue,
     padding: 1,
     boxShadow: "none"
   },
   focused: {
-    borderColor: Color.blue,
+    borderColor: color.blue,
     padding: 0,
     boxShadow: "none"
   },
   pressed: {
     border: "2px solid #1B50B3",
     padding: 0,
-    background: `linear-gradient(0deg, rgba(24, 101, 242, 0.32), rgba(24, 101, 242, 0.32)), ${Color.white}`,
+    background: `linear-gradient(0deg, rgba(24, 101, 242, 0.32), rgba(24, 101, 242, 0.32)), ${color.white}`,
     boxShadow: "none"
   },
   outerBoxBase: {
@@ -4932,13 +4932,13 @@ const styles$3 = StyleSheet.create({
     width: "100%"
   },
   base: {
-    boxShadow: `0px 1px 0px ${Color.offBlack32}`,
+    boxShadow: `0px 1px 0px ${color.offBlack32}`,
     display: "flex",
     justifyContent: "center",
     alignItems: "center",
-    background: Color.white,
+    background: color.white,
     borderWidth: 2,
-    borderColor: Color.white
+    borderColor: color.white
   },
   up: {
     borderTopLeftRadius: borderRadiusPx,
@@ -4957,16 +4957,16 @@ const styles$3 = StyleSheet.create({
     borderBottomLeftRadius: borderRadiusPx
   },
   hovered: {
-    borderColor: Color.blue,
+    borderColor: color.blue,
     boxShadow: "none"
   },
   focused: {
-    borderColor: Color.blue,
+    borderColor: color.blue,
     boxShadow: "none"
   },
   pressed: {
     border: "2px solid #1B50B3",
-    background: `linear-gradient(0deg, rgba(24, 101, 242, 0.32), rgba(24, 101, 242, 0.32)), ${Color.white}`,
+    background: `linear-gradient(0deg, rgba(24, 101, 242, 0.32), rgba(24, 101, 242, 0.32)), ${color.white}`,
     boxShadow: "none"
   }
 });
@@ -5016,7 +5016,7 @@ const styles$2 = StyleSheet.create({
   spacer: {
     gridColumn: 2,
     gridRow: 2,
-    background: Color.white
+    background: color.white
   }
 });
 
@@ -5210,11 +5210,11 @@ const styles$1 = StyleSheet.create({
     alignItems: "center"
   },
   wrapper: {
-    background: Color.white
+    background: color.white
   },
   expandedWrapper: {
     borderWidth: "1px 1px 0 1px",
-    borderColor: Color.offBlack32,
+    borderColor: color.offBlack32,
     maxWidth: expandedViewThreshold,
     borderRadius: "3px 3px 0 0"
   },