@khanacademy/wonder-blocks-form 4.4.0 → 4.4.2

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @khanacademy/wonder-blocks-form
 
+## 4.4.2
+
+### Patch Changes
+
+-   Updated dependencies [e83f8991]
+    -   @khanacademy/wonder-blocks-tokens@1.0.0
+    -   @khanacademy/wonder-blocks-clickable@4.0.14
+    -   @khanacademy/wonder-blocks-layout@2.0.27
+
+## 4.4.1
+
+### Patch Changes
+
+-   60aba5b8: Update internal spacing references (from wb-spacing to wb-tokens)
+-   7c51f377: Migrate wb-color imports to use tokens.color
+-   Updated dependencies [60aba5b8]
+-   Updated dependencies [7cd7f6cc]
+-   Updated dependencies [7c51f377]
+-   Updated dependencies [7c51f377]
+    -   @khanacademy/wonder-blocks-layout@2.0.26
+    -   @khanacademy/wonder-blocks-tokens@0.2.0
+    -   @khanacademy/wonder-blocks-clickable@4.0.13
+
 ## 4.4.0
 
 ### Minor Changes

package/dist/es/index.js

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { StyleSheet } from 'aphrodite';
-import Color, { mix, fade } from '@khanacademy/wonder-blocks-color';
 import { addStyle, UniqueIDProvider, View, IDProvider } from '@khanacademy/wonder-blocks-core';
 import { Strut } from '@khanacademy/wonder-blocks-layout';
-import Spacing from '@khanacademy/wonder-blocks-spacing';
+import { spacing, color } from '@khanacademy/wonder-blocks-tokens';
 import { LabelMedium, LabelSmall, styles as styles$6 } from '@khanacademy/wonder-blocks-typography';
+import { mix } from '@khanacademy/wonder-blocks-color';
 import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
 import checkIcon from '@phosphor-icons/core/bold/check-bold.svg';
 import minusIcon from '@phosphor-icons/core/bold/minus-bold.svg';
@@ -56,9 +56,9 @@ const {
   offBlack16: offBlack16$1,
   offBlack32: offBlack32$1,
   offBlack50: offBlack50$1
-} = Color;
-const size$1 = Spacing.medium_16;
-const checkSize = Spacing.small_12;
+} = color;
+const size$1 = spacing.medium_16;
+const checkSize = spacing.small_12;
 const StyledInput$2 = addStyle("input");
 const CheckboxCore = React.forwardRef(function CheckboxCore(props, ref) {
   const {
@@ -142,20 +142,20 @@ const sharedStyles$1 = StyleSheet.create({
     margin: (size$1 - checkSize) / 2
   }
 });
-const fadedBlue$1 = mix(fade(blue$1, 0.16), white$1);
-const activeBlue$1 = mix(offBlack32$1, blue$1);
-const fadedRed$1 = mix(fade(red$1, 0.08), white$1);
-const activeRed$1 = mix(offBlack32$1, red$1);
+const fadedBlue$1 = mix(color.fadedBlue16, white$1);
+const activeBlue = color.activeBlue;
+const fadedRed$1 = mix(color.fadedRed8, white$1);
+const activeRed = color.activeRed;
 const colors$1 = {
   default: {
     faded: fadedBlue$1,
     base: blue$1,
-    active: activeBlue$1
+    active: activeBlue
   },
   error: {
     faded: fadedRed$1,
     base: red$1,
-    active: activeRed$1
+    active: activeRed
   }
 };
 const styles$5 = {};
@@ -200,7 +200,7 @@ const _generateStyles$1 = (checked, error) => {
         },
         ":active": {
           backgroundColor: palette.faded,
-          borderColor: error ? activeRed$1 : blue$1,
+          borderColor: error ? activeRed : blue$1,
           borderWidth: 2
         }
       }
@@ -219,7 +219,7 @@ const {
   offBlack16,
   offBlack32,
   offBlack50
-} = Color;
+} = color;
 const StyledInput$1 = addStyle("input");
 const RadioCore = React.forwardRef(function RadioCore(props, ref) {
   const handleChange = () => {
@@ -286,20 +286,18 @@ const sharedStyles = StyleSheet.create({
     borderWidth: 1
   }
 });
-const fadedBlue = mix(fade(blue, 0.16), white);
-const activeBlue = mix(offBlack32, blue);
-const fadedRed = mix(fade(red, 0.08), white);
-const activeRed = mix(offBlack32, red);
+const fadedBlue = mix(color.fadedBlue16, white);
+const fadedRed = mix(color.fadedRed8, white);
 const colors = {
   default: {
     faded: fadedBlue,
     base: blue,
-    active: activeBlue
+    active: color.activeBlue
   },
   error: {
     faded: fadedRed,
     base: red,
-    active: activeRed
+    active: color.activeRed
   }
 };
 const styles$4 = {};
@@ -345,7 +343,7 @@ const _generateStyles = (checked, error) => {
         },
         ":active": {
           backgroundColor: palette.faded,
-          borderColor: error ? activeRed : blue,
+          borderColor: error ? color.activeRed : blue,
           borderWidth: 2
         }
       }
@@ -418,7 +416,7 @@ const ChoiceInternal = React.forwardRef(function ChoiceInternal(props, ref) {
       error: error,
       ref: ref
     })), React.createElement(Strut, {
-      size: Spacing.xSmall_8
+      size: spacing.xSmall_8
     }), label && getLabel(uniqueId)), description && getDescription(descriptionId));
   });
 });
@@ -432,12 +430,12 @@ const styles$3 = StyleSheet.create({
     marginTop: -2
   },
   disabledLabel: {
-    color: Color.offBlack32
+    color: color.offBlack32
   },
   description: {
-    marginLeft: Spacing.medium_16 + Spacing.xSmall_8,
-    marginTop: Spacing.xxxSmall_4,
-    color: Color.offBlack64
+    marginLeft: spacing.medium_16 + spacing.xSmall_8,
+    marginTop: spacing.xxxSmall_4,
+    color: color.offBlack64
   }
 });
 
@@ -504,15 +502,15 @@ const styles$2 = StyleSheet.create({
     padding: 0
   },
   description: {
-    marginTop: Spacing.xxxSmall_4,
-    color: Color.offBlack64
+    marginTop: spacing.xxxSmall_4,
+    color: color.offBlack64
   },
   error: {
-    marginTop: Spacing.xxxSmall_4,
-    color: Color.red
+    marginTop: spacing.xxxSmall_4,
+    color: color.red
   },
   defaultLineGap: {
-    marginTop: Spacing.xSmall_8
+    marginTop: spacing.xSmall_8
   }
 });
 
@@ -553,7 +551,7 @@ const CheckboxGroup = React.forwardRef(function CheckboxGroup(props, ref) {
   }, description), errorMessage && React.createElement(LabelSmall, {
     style: styles$2.error
   }, errorMessage), (label || description || errorMessage) && React.createElement(Strut, {
-    size: Spacing.small_12
+    size: spacing.small_12
   }), allChildren.map((child, index) => {
     const {
       style,
@@ -601,7 +599,7 @@ const RadioGroup = React.forwardRef(function RadioGroup(props, ref) {
   }, description), errorMessage && React.createElement(LabelSmall, {
     style: styles$2.error
   }, errorMessage), (label || description || errorMessage) && React.createElement(Strut, {
-    size: Spacing.small_12
+    size: spacing.small_12
   }), allChildren.map((child, index) => {
     const {
       style,
@@ -749,48 +747,48 @@ const styles$1 = StyleSheet.create({
     height: 40,
     borderRadius: 4,
     boxSizing: "border-box",
-    paddingLeft: Spacing.medium_16,
+    paddingLeft: spacing.medium_16,
     margin: 0,
     outline: "none",
     boxShadow: "none"
   },
   default: {
-    background: Color.white,
-    border: `1px solid ${Color.offBlack16}`,
-    color: Color.offBlack,
+    background: color.white,
+    border: `1px solid ${color.offBlack16}`,
+    color: color.offBlack,
     "::placeholder": {
-      color: Color.offBlack64
+      color: color.offBlack64
     }
   },
   error: {
-    background: `${mix(fade(Color.red, 0.06), Color.white)}`,
-    border: `1px solid ${Color.red}`,
-    color: Color.offBlack,
+    background: `${mix(color.fadedRed8, color.white)}`,
+    border: `1px solid ${color.red}`,
+    color: color.offBlack,
     "::placeholder": {
-      color: Color.offBlack64
+      color: color.offBlack64
     }
   },
   disabled: {
-    background: Color.offWhite,
-    border: `1px solid ${Color.offBlack16}`,
-    color: Color.offBlack64,
+    background: color.offWhite,
+    border: `1px solid ${color.offBlack16}`,
+    color: color.offBlack64,
     "::placeholder": {
-      color: Color.offBlack32
+      color: color.offBlack32
     }
   },
   focused: {
-    background: Color.white,
-    border: `1px solid ${Color.blue}`,
-    color: Color.offBlack,
+    background: color.white,
+    border: `1px solid ${color.blue}`,
+    color: color.offBlack,
     "::placeholder": {
-      color: Color.offBlack64
+      color: color.offBlack64
     }
   },
   defaultLight: {
-    boxShadow: `0px 0px 0px 1px ${Color.blue}, 0px 0px 0px 2px ${Color.white}`
+    boxShadow: `0px 0px 0px 1px ${color.blue}, 0px 0px 0px 2px ${color.white}`
   },
   errorLight: {
-    boxShadow: `0px 0px 0px 1px ${Color.red}, 0px 0px 0px 2px ${Color.white}`
+    boxShadow: `0px 0px 0px 1px ${color.red}, 0px 0px 0px 2px ${color.white}`
   }
 });
 var TextField$1 = React.forwardRef((props, ref) => React.createElement(TextField, _extends({}, props, {
@@ -816,7 +814,7 @@ class FieldHeading extends React.Component {
       htmlFor: id && `${id}-field`,
       testId: testId && `${testId}-label`
     }, label, required && requiredIcon), React.createElement(Strut, {
-      size: Spacing.xxxSmall_4
+      size: spacing.xxxSmall_4
     }));
   }
   maybeRenderDescription() {
@@ -831,7 +829,7 @@ class FieldHeading extends React.Component {
       style: styles.description,
       testId: testId && `${testId}-description`
     }, description), React.createElement(Strut, {
-      size: Spacing.xxxSmall_4
+      size: spacing.xxxSmall_4
     }));
   }
   maybeRenderError() {
@@ -844,7 +842,7 @@ class FieldHeading extends React.Component {
       return null;
     }
     return React.createElement(React.Fragment, null, React.createElement(Strut, {
-      size: Spacing.small_12
+      size: spacing.small_12
     }), React.createElement(LabelSmall, {
       style: styles.error,
       role: "alert",
@@ -860,22 +858,22 @@ class FieldHeading extends React.Component {
     return React.createElement(View, {
       style: style
     }, this.renderLabel(), this.maybeRenderDescription(), React.createElement(Strut, {
-      size: Spacing.xSmall_8
+      size: spacing.xSmall_8
     }), field, this.maybeRenderError());
   }
 }
 const styles = StyleSheet.create({
   label: {
-    color: Color.offBlack
+    color: color.offBlack
   },
   description: {
-    color: Color.offBlack64
+    color: color.offBlack64
   },
   error: {
-    color: Color.red
+    color: color.red
   },
   required: {
-    color: Color.red
+    color: color.red
   }
 });
 

package/dist/index.js

@@ -4,11 +4,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var aphrodite = require('aphrodite');
-var Color = require('@khanacademy/wonder-blocks-color');
 var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
 var wonderBlocksLayout = require('@khanacademy/wonder-blocks-layout');
-var Spacing = require('@khanacademy/wonder-blocks-spacing');
+var wonderBlocksTokens = require('@khanacademy/wonder-blocks-tokens');
 var wonderBlocksTypography = require('@khanacademy/wonder-blocks-typography');
+var wonderBlocksColor = require('@khanacademy/wonder-blocks-color');
 var wonderBlocksIcon = require('@khanacademy/wonder-blocks-icon');
 var checkIcon = require('@phosphor-icons/core/bold/check-bold.svg');
 var minusIcon = require('@phosphor-icons/core/bold/minus-bold.svg');
@@ -34,8 +34,6 @@ function _interopNamespace(e) {
 }
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var Color__default = /*#__PURE__*/_interopDefaultLegacy(Color);
-var Spacing__default = /*#__PURE__*/_interopDefaultLegacy(Spacing);
 var checkIcon__default = /*#__PURE__*/_interopDefaultLegacy(checkIcon);
 var minusIcon__default = /*#__PURE__*/_interopDefaultLegacy(minusIcon);
 
@@ -86,9 +84,9 @@ const {
   offBlack16: offBlack16$1,
   offBlack32: offBlack32$1,
   offBlack50: offBlack50$1
-} = Color__default["default"];
-const size$1 = Spacing__default["default"].medium_16;
-const checkSize = Spacing__default["default"].small_12;
+} = wonderBlocksTokens.color;
+const size$1 = wonderBlocksTokens.spacing.medium_16;
+const checkSize = wonderBlocksTokens.spacing.small_12;
 const StyledInput$2 = wonderBlocksCore.addStyle("input");
 const CheckboxCore = React__namespace.forwardRef(function CheckboxCore(props, ref) {
   const {
@@ -172,20 +170,20 @@ const sharedStyles$1 = aphrodite.StyleSheet.create({
     margin: (size$1 - checkSize) / 2
   }
 });
-const fadedBlue$1 = Color.mix(Color.fade(blue$1, 0.16), white$1);
-const activeBlue$1 = Color.mix(offBlack32$1, blue$1);
-const fadedRed$1 = Color.mix(Color.fade(red$1, 0.08), white$1);
-const activeRed$1 = Color.mix(offBlack32$1, red$1);
+const fadedBlue$1 = wonderBlocksColor.mix(wonderBlocksTokens.color.fadedBlue16, white$1);
+const activeBlue = wonderBlocksTokens.color.activeBlue;
+const fadedRed$1 = wonderBlocksColor.mix(wonderBlocksTokens.color.fadedRed8, white$1);
+const activeRed = wonderBlocksTokens.color.activeRed;
 const colors$1 = {
   default: {
     faded: fadedBlue$1,
     base: blue$1,
-    active: activeBlue$1
+    active: activeBlue
   },
   error: {
     faded: fadedRed$1,
     base: red$1,
-    active: activeRed$1
+    active: activeRed
   }
 };
 const styles$5 = {};
@@ -230,7 +228,7 @@ const _generateStyles$1 = (checked, error) => {
         },
         ":active": {
           backgroundColor: palette.faded,
-          borderColor: error ? activeRed$1 : blue$1,
+          borderColor: error ? activeRed : blue$1,
           borderWidth: 2
         }
       }
@@ -249,7 +247,7 @@ const {
   offBlack16,
   offBlack32,
   offBlack50
-} = Color__default["default"];
+} = wonderBlocksTokens.color;
 const StyledInput$1 = wonderBlocksCore.addStyle("input");
 const RadioCore = React__namespace.forwardRef(function RadioCore(props, ref) {
   const handleChange = () => {
@@ -316,20 +314,18 @@ const sharedStyles = aphrodite.StyleSheet.create({
     borderWidth: 1
   }
 });
-const fadedBlue = Color.mix(Color.fade(blue, 0.16), white);
-const activeBlue = Color.mix(offBlack32, blue);
-const fadedRed = Color.mix(Color.fade(red, 0.08), white);
-const activeRed = Color.mix(offBlack32, red);
+const fadedBlue = wonderBlocksColor.mix(wonderBlocksTokens.color.fadedBlue16, white);
+const fadedRed = wonderBlocksColor.mix(wonderBlocksTokens.color.fadedRed8, white);
 const colors = {
   default: {
     faded: fadedBlue,
     base: blue,
-    active: activeBlue
+    active: wonderBlocksTokens.color.activeBlue
   },
   error: {
     faded: fadedRed,
     base: red,
-    active: activeRed
+    active: wonderBlocksTokens.color.activeRed
   }
 };
 const styles$4 = {};
@@ -375,7 +371,7 @@ const _generateStyles = (checked, error) => {
         },
         ":active": {
           backgroundColor: palette.faded,
-          borderColor: error ? activeRed : blue,
+          borderColor: error ? wonderBlocksTokens.color.activeRed : blue,
           borderWidth: 2
         }
       }
@@ -448,7 +444,7 @@ const ChoiceInternal = React__namespace.forwardRef(function ChoiceInternal(props
       error: error,
       ref: ref
     })), React__namespace.createElement(wonderBlocksLayout.Strut, {
-      size: Spacing__default["default"].xSmall_8
+      size: wonderBlocksTokens.spacing.xSmall_8
     }), label && getLabel(uniqueId)), description && getDescription(descriptionId));
   });
 });
@@ -462,12 +458,12 @@ const styles$3 = aphrodite.StyleSheet.create({
     marginTop: -2
   },
   disabledLabel: {
-    color: Color__default["default"].offBlack32
+    color: wonderBlocksTokens.color.offBlack32
   },
   description: {
-    marginLeft: Spacing__default["default"].medium_16 + Spacing__default["default"].xSmall_8,
-    marginTop: Spacing__default["default"].xxxSmall_4,
-    color: Color__default["default"].offBlack64
+    marginLeft: wonderBlocksTokens.spacing.medium_16 + wonderBlocksTokens.spacing.xSmall_8,
+    marginTop: wonderBlocksTokens.spacing.xxxSmall_4,
+    color: wonderBlocksTokens.color.offBlack64
   }
 });
 
@@ -534,15 +530,15 @@ const styles$2 = aphrodite.StyleSheet.create({
     padding: 0
   },
   description: {
-    marginTop: Spacing__default["default"].xxxSmall_4,
-    color: Color__default["default"].offBlack64
+    marginTop: wonderBlocksTokens.spacing.xxxSmall_4,
+    color: wonderBlocksTokens.color.offBlack64
   },
   error: {
-    marginTop: Spacing__default["default"].xxxSmall_4,
-    color: Color__default["default"].red
+    marginTop: wonderBlocksTokens.spacing.xxxSmall_4,
+    color: wonderBlocksTokens.color.red
   },
   defaultLineGap: {
-    marginTop: Spacing__default["default"].xSmall_8
+    marginTop: wonderBlocksTokens.spacing.xSmall_8
   }
 });
 
@@ -583,7 +579,7 @@ const CheckboxGroup = React__namespace.forwardRef(function CheckboxGroup(props,
   }, description), errorMessage && React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
     style: styles$2.error
   }, errorMessage), (label || description || errorMessage) && React__namespace.createElement(wonderBlocksLayout.Strut, {
-    size: Spacing__default["default"].small_12
+    size: wonderBlocksTokens.spacing.small_12
   }), allChildren.map((child, index) => {
     const {
       style,
@@ -631,7 +627,7 @@ const RadioGroup = React__namespace.forwardRef(function RadioGroup(props, ref) {
   }, description), errorMessage && React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
     style: styles$2.error
   }, errorMessage), (label || description || errorMessage) && React__namespace.createElement(wonderBlocksLayout.Strut, {
-    size: Spacing__default["default"].small_12
+    size: wonderBlocksTokens.spacing.small_12
   }), allChildren.map((child, index) => {
     const {
       style,
@@ -779,48 +775,48 @@ const styles$1 = aphrodite.StyleSheet.create({
     height: 40,
     borderRadius: 4,
     boxSizing: "border-box",
-    paddingLeft: Spacing__default["default"].medium_16,
+    paddingLeft: wonderBlocksTokens.spacing.medium_16,
     margin: 0,
     outline: "none",
     boxShadow: "none"
   },
   default: {
-    background: Color__default["default"].white,
-    border: `1px solid ${Color__default["default"].offBlack16}`,
-    color: Color__default["default"].offBlack,
+    background: wonderBlocksTokens.color.white,
+    border: `1px solid ${wonderBlocksTokens.color.offBlack16}`,
+    color: wonderBlocksTokens.color.offBlack,
     "::placeholder": {
-      color: Color__default["default"].offBlack64
+      color: wonderBlocksTokens.color.offBlack64
     }
   },
   error: {
-    background: `${Color.mix(Color.fade(Color__default["default"].red, 0.06), Color__default["default"].white)}`,
-    border: `1px solid ${Color__default["default"].red}`,
-    color: Color__default["default"].offBlack,
+    background: `${wonderBlocksColor.mix(wonderBlocksTokens.color.fadedRed8, wonderBlocksTokens.color.white)}`,
+    border: `1px solid ${wonderBlocksTokens.color.red}`,
+    color: wonderBlocksTokens.color.offBlack,
     "::placeholder": {
-      color: Color__default["default"].offBlack64
+      color: wonderBlocksTokens.color.offBlack64
     }
   },
   disabled: {
-    background: Color__default["default"].offWhite,
-    border: `1px solid ${Color__default["default"].offBlack16}`,
-    color: Color__default["default"].offBlack64,
+    background: wonderBlocksTokens.color.offWhite,
+    border: `1px solid ${wonderBlocksTokens.color.offBlack16}`,
+    color: wonderBlocksTokens.color.offBlack64,
     "::placeholder": {
-      color: Color__default["default"].offBlack32
+      color: wonderBlocksTokens.color.offBlack32
     }
   },
   focused: {
-    background: Color__default["default"].white,
-    border: `1px solid ${Color__default["default"].blue}`,
-    color: Color__default["default"].offBlack,
+    background: wonderBlocksTokens.color.white,
+    border: `1px solid ${wonderBlocksTokens.color.blue}`,
+    color: wonderBlocksTokens.color.offBlack,
     "::placeholder": {
-      color: Color__default["default"].offBlack64
+      color: wonderBlocksTokens.color.offBlack64
     }
   },
   defaultLight: {
-    boxShadow: `0px 0px 0px 1px ${Color__default["default"].blue}, 0px 0px 0px 2px ${Color__default["default"].white}`
+    boxShadow: `0px 0px 0px 1px ${wonderBlocksTokens.color.blue}, 0px 0px 0px 2px ${wonderBlocksTokens.color.white}`
   },
   errorLight: {
-    boxShadow: `0px 0px 0px 1px ${Color__default["default"].red}, 0px 0px 0px 2px ${Color__default["default"].white}`
+    boxShadow: `0px 0px 0px 1px ${wonderBlocksTokens.color.red}, 0px 0px 0px 2px ${wonderBlocksTokens.color.white}`
   }
 });
 var TextField$1 = React__namespace.forwardRef((props, ref) => React__namespace.createElement(TextField, _extends({}, props, {
@@ -846,7 +842,7 @@ class FieldHeading extends React__namespace.Component {
       htmlFor: id && `${id}-field`,
       testId: testId && `${testId}-label`
     }, label, required && requiredIcon), React__namespace.createElement(wonderBlocksLayout.Strut, {
-      size: Spacing__default["default"].xxxSmall_4
+      size: wonderBlocksTokens.spacing.xxxSmall_4
     }));
   }
   maybeRenderDescription() {
@@ -861,7 +857,7 @@ class FieldHeading extends React__namespace.Component {
       style: styles.description,
       testId: testId && `${testId}-description`
     }, description), React__namespace.createElement(wonderBlocksLayout.Strut, {
-      size: Spacing__default["default"].xxxSmall_4
+      size: wonderBlocksTokens.spacing.xxxSmall_4
     }));
   }
   maybeRenderError() {
@@ -874,7 +870,7 @@ class FieldHeading extends React__namespace.Component {
       return null;
     }
     return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(wonderBlocksLayout.Strut, {
-      size: Spacing__default["default"].small_12
+      size: wonderBlocksTokens.spacing.small_12
     }), React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
       style: styles.error,
       role: "alert",
@@ -890,22 +886,22 @@ class FieldHeading extends React__namespace.Component {
     return React__namespace.createElement(wonderBlocksCore.View, {
       style: style
     }, this.renderLabel(), this.maybeRenderDescription(), React__namespace.createElement(wonderBlocksLayout.Strut, {
-      size: Spacing__default["default"].xSmall_8
+      size: wonderBlocksTokens.spacing.xSmall_8
     }), field, this.maybeRenderError());
   }
 }
 const styles = aphrodite.StyleSheet.create({
   label: {
-    color: Color__default["default"].offBlack
+    color: wonderBlocksTokens.color.offBlack
   },
   description: {
-    color: Color__default["default"].offBlack64
+    color: wonderBlocksTokens.color.offBlack64
   },
   error: {
-    color: Color__default["default"].red
+    color: wonderBlocksTokens.color.red
   },
   required: {
-    color: Color__default["default"].red
+    color: wonderBlocksTokens.color.red
   }
 });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-form",
-  "version": "4.4.0",
+  "version": "4.4.2",
   "design": "v1",
   "description": "Form components for Wonder Blocks.",
   "main": "dist/index.js",
@@ -16,12 +16,12 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-clickable": "^4.0.12",
+    "@khanacademy/wonder-blocks-clickable": "^4.0.14",
     "@khanacademy/wonder-blocks-color": "^3.0.0",
     "@khanacademy/wonder-blocks-core": "^6.3.1",
     "@khanacademy/wonder-blocks-icon": "^4.0.1",
-    "@khanacademy/wonder-blocks-layout": "^2.0.25",
-    "@khanacademy/wonder-blocks-spacing": "^4.0.1",
+    "@khanacademy/wonder-blocks-layout": "^2.0.27",
+    "@khanacademy/wonder-blocks-tokens": "^1.0.0",
     "@khanacademy/wonder-blocks-typography": "^2.1.10"
   },
   "peerDependencies": {

package/src/components/__tests__/labeled-text-field.test.tsx

@@ -3,7 +3,7 @@ import {render, screen, fireEvent} from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
 import {StyleSheet} from "aphrodite";
-import Color from "@khanacademy/wonder-blocks-color";
+import {color} from "@khanacademy/wonder-blocks-tokens";
 import LabeledTextField from "../labeled-text-field";
 
 describe("LabeledTextField", () => {
@@ -394,7 +394,7 @@ describe("LabeledTextField", () => {
 
         // Assert
         expect(textField).toHaveStyle({
-            boxShadow: `0px 0px 0px 1px ${Color.blue}, 0px 0px 0px 2px ${Color.white}`,
+            boxShadow: `0px 0px 0px 1px ${color.blue}, 0px 0px 0px 2px ${color.white}`,
         });
     });