@khanacademy/wonder-blocks-form 4.4.0 → 4.4.2

package/src/components/checkbox-core.tsx

@@ -1,10 +1,10 @@
 import * as React from "react";
 import {StyleSheet} from "aphrodite";
 
-import Color, {mix, fade} from "@khanacademy/wonder-blocks-color";
+import {mix} from "@khanacademy/wonder-blocks-color";
 import {addStyle} from "@khanacademy/wonder-blocks-core";
 import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
-import Spacing from "@khanacademy/wonder-blocks-spacing";
+import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
 import checkIcon from "@phosphor-icons/core/bold/check-bold.svg";
 import minusIcon from "@phosphor-icons/core/bold/minus-bold.svg";
 
@@ -26,12 +26,12 @@ function mapCheckedToAriaChecked(value: Checked): AriaChecked {
     }
 }
 
-const {blue, red, white, offWhite, offBlack16, offBlack32, offBlack50} = Color;
+const {blue, red, white, offWhite, offBlack16, offBlack32, offBlack50} = color;
 
 // The checkbox size
-const size = Spacing.medium_16;
+const size = spacing.medium_16;
 // The check icon size
-const checkSize = Spacing.small_12;
+const checkSize = spacing.small_12;
 
 const StyledInput = addStyle("input");
 
@@ -153,10 +153,10 @@ const sharedStyles = StyleSheet.create({
     },
 });
 
-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 activeBlue = color.activeBlue;
+const fadedRed = mix(color.fadedRed8, white);
+const activeRed = color.activeRed;
 
 const colors = {
     default: {

package/src/components/checkbox-group.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 
 import {View, addStyle} from "@khanacademy/wonder-blocks-core";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
-import Spacing from "@khanacademy/wonder-blocks-spacing";
+import {spacing} from "@khanacademy/wonder-blocks-tokens";
 import {LabelMedium, LabelSmall} from "@khanacademy/wonder-blocks-typography";
 import type {StyleType} from "@khanacademy/wonder-blocks-core";
 
@@ -147,7 +147,7 @@ const CheckboxGroup = React.forwardRef(function CheckboxGroup(
                     <LabelSmall style={styles.error}>{errorMessage}</LabelSmall>
                 )}
                 {(label || description || errorMessage) && (
-                    <Strut size={Spacing.small_12} />
+                    <Strut size={spacing.small_12} />
                 )}
 
                 {allChildren.map((child, index) => {

package/src/components/choice-internal.tsx

@@ -1,10 +1,9 @@
 import * as React from "react";
 import {StyleSheet} from "aphrodite";
 
-import Color from "@khanacademy/wonder-blocks-color";
 import {View, UniqueIDProvider} from "@khanacademy/wonder-blocks-core";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
-import Spacing from "@khanacademy/wonder-blocks-spacing";
+import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {LabelMedium, LabelSmall} from "@khanacademy/wonder-blocks-typography";
 import type {AriaProps, StyleType} from "@khanacademy/wonder-blocks-core";
 import CheckboxCore from "./checkbox-core";
@@ -147,7 +146,7 @@ type Props = AriaProps & {
                                 error={error}
                                 ref={ref}
                             />
-                            <Strut size={Spacing.xSmall_8} />
+                            <Strut size={spacing.xSmall_8} />
                             {label && getLabel(uniqueId)}
                         </View>
                         {description && getDescription(descriptionId)}
@@ -172,13 +171,13 @@ const styles = StyleSheet.create({
         marginTop: -2,
     },
     disabledLabel: {
-        color: Color.offBlack32,
+        color: color.offBlack32,
     },
     description: {
         // 16 for icon + 8 for spacing strut
-        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,
     },
 });
 

package/src/components/field-heading.tsx

@@ -2,9 +2,8 @@ import * as React from "react";
 import {StyleSheet} from "aphrodite";
 
 import {View, addStyle, StyleType} from "@khanacademy/wonder-blocks-core";
-import Color from "@khanacademy/wonder-blocks-color";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
-import Spacing from "@khanacademy/wonder-blocks-spacing";
+import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {LabelMedium, LabelSmall} from "@khanacademy/wonder-blocks-typography";
 
 type Props = {
@@ -73,7 +72,7 @@ export default class FieldHeading extends React.Component<Props> {
                     {label}
                     {required && requiredIcon}
                 </LabelMedium>
-                <Strut size={Spacing.xxxSmall_4} />
+                <Strut size={spacing.xxxSmall_4} />
             </React.Fragment>
         );
     }
@@ -93,7 +92,7 @@ export default class FieldHeading extends React.Component<Props> {
                 >
                     {description}
                 </LabelSmall>
-                <Strut size={Spacing.xxxSmall_4} />
+                <Strut size={spacing.xxxSmall_4} />
             </React.Fragment>
         );
     }
@@ -107,7 +106,7 @@ export default class FieldHeading extends React.Component<Props> {
 
         return (
             <React.Fragment>
-                <Strut size={Spacing.small_12} />
+                <Strut size={spacing.small_12} />
                 <LabelSmall
                     style={styles.error}
                     role="alert"
@@ -127,7 +126,7 @@ export default class FieldHeading extends React.Component<Props> {
             <View style={style}>
                 {this.renderLabel()}
                 {this.maybeRenderDescription()}
-                <Strut size={Spacing.xSmall_8} />
+                <Strut size={spacing.xSmall_8} />
                 {field}
                 {this.maybeRenderError()}
             </View>
@@ -137,15 +136,15 @@ export default class FieldHeading extends React.Component<Props> {
 
 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/src/components/group-styles.ts

@@ -1,7 +1,6 @@
 import {StyleSheet} from "aphrodite";
 
-import Color from "@khanacademy/wonder-blocks-color";
-import Spacing from "@khanacademy/wonder-blocks-spacing";
+import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
 
 import type {StyleDeclaration} from "aphrodite";
 
@@ -17,17 +16,17 @@ const styles: StyleDeclaration = StyleSheet.create({
     },
 
     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,
     },
 });
 

package/src/components/radio-core.tsx

@@ -1,12 +1,13 @@
 import * as React from "react";
 import {StyleSheet} from "aphrodite";
 
-import Color, {mix, fade} from "@khanacademy/wonder-blocks-color";
+import {mix} from "@khanacademy/wonder-blocks-color";
+import {color} from "@khanacademy/wonder-blocks-tokens";
 import {addStyle} from "@khanacademy/wonder-blocks-core";
 
 import type {ChoiceCoreProps, Checked} from "../util/types";
 
-const {blue, red, white, offWhite, offBlack16, offBlack32, offBlack50} = Color;
+const {blue, red, white, offWhite, offBlack16, offBlack32, offBlack50} = color;
 
 const StyledInput = addStyle("input");
 
@@ -90,20 +91,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,
     },
 } as const;
 const styles: Record<string, any> = {};
@@ -160,7 +159,7 @@ const _generateStyles = (checked: Checked, error: boolean) => {
 
                 ":active": {
                     backgroundColor: palette.faded,
-                    borderColor: error ? activeRed : blue,
+                    borderColor: error ? color.activeRed : blue,
                     borderWidth: 2,
                 },
             },

package/src/components/radio-group.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 
 import {View, addStyle} from "@khanacademy/wonder-blocks-core";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
-import Spacing from "@khanacademy/wonder-blocks-spacing";
+import {spacing} from "@khanacademy/wonder-blocks-tokens";
 import {LabelMedium, LabelSmall} from "@khanacademy/wonder-blocks-typography";
 import type {StyleType} from "@khanacademy/wonder-blocks-core";
 
@@ -132,7 +132,7 @@ const RadioGroup = React.forwardRef(function RadioGroup(
                     <LabelSmall style={styles.error}>{errorMessage}</LabelSmall>
                 )}
                 {(label || description || errorMessage) && (
-                    <Strut size={Spacing.small_12} />
+                    <Strut size={spacing.small_12} />
                 )}
 
                 {allChildren.map((child, index) => {

package/src/components/text-field.tsx

@@ -1,9 +1,9 @@
 import * as React from "react";
 import {StyleSheet} from "aphrodite";
 
-import Color, {mix, fade} from "@khanacademy/wonder-blocks-color";
+import {mix} from "@khanacademy/wonder-blocks-color";
 import {addStyle} from "@khanacademy/wonder-blocks-core";
-import Spacing from "@khanacademy/wonder-blocks-spacing";
+import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {styles as typographyStyles} from "@khanacademy/wonder-blocks-typography";
 
 import type {StyleType, AriaProps} from "@khanacademy/wonder-blocks-core";
@@ -296,48 +296,48 @@ const styles = 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}`,
     },
 });
 

package/tsconfig-build.json

@@ -14,7 +14,7 @@
         {"path": "../wonder-blocks-icon/tsconfig-build.json"},
         {"path": "../wonder-blocks-layout/tsconfig-build.json"},
         {"path": "../wonder-blocks-link/tsconfig-build.json"},
-        {"path": "../wonder-blocks-spacing/tsconfig-build.json"},
+        {"path": "../wonder-blocks-tokens/tsconfig-build.json"},
         {"path": "../wonder-blocks-typography/tsconfig-build.json"},
     ]
 }