@khanacademy/wonder-blocks-form 6.0.6 → 7.0.1

package/dist/es/index.js

@@ -5,7 +5,7 @@ import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutP
 import { StyleSheet } from 'aphrodite';
 import { addStyle, Id, View, useOnMountEffect } from '@khanacademy/wonder-blocks-core';
 import { Strut } from '@khanacademy/wonder-blocks-layout';
-import { spacing, mix, color, border, font } from '@khanacademy/wonder-blocks-tokens';
+import { spacing, semanticColor, border, font } from '@khanacademy/wonder-blocks-tokens';
 import { LabelMedium, LabelSmall, styles as styles$7 } from '@khanacademy/wonder-blocks-typography';
 import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
 import checkIcon from '@phosphor-icons/core/bold/check-bold.svg';
@@ -22,15 +22,6 @@ function mapCheckedToAriaChecked(value) {
       return "mixed";
   }
 }
-const {
-  blue: blue$1,
-  red: red$1,
-  white: white$1,
-  offWhite: offWhite$1,
-  offBlack16: offBlack16$1,
-  offBlack32: offBlack32$1,
-  offBlack50: offBlack50$1
-} = color;
 const size$1 = spacing.medium_16;
 const checkSize = spacing.small_12;
 const StyledInput$2 = addStyle("input");
@@ -56,7 +47,7 @@ const CheckboxCore = React.forwardRef(function CheckboxCore(props, ref) {
   const stateStyles = _generateStyles$1(checked, error);
   const defaultStyle = [sharedStyles$1.inputReset, sharedStyles$1.default, !disabled && stateStyles.default, disabled && sharedStyles$1.disabled];
   const checkboxIcon = React.createElement(PhosphorIcon, {
-    color: disabled ? offBlack32$1 : white$1,
+    color: disabled ? semanticColor.icon.disabled : semanticColor.icon.inverse,
     icon: checked ? checkIcon : minusIcon,
     size: "small",
     style: [sharedStyles$1.checkboxIcon, {
@@ -86,6 +77,10 @@ const CheckboxCore = React.forwardRef(function CheckboxCore(props, ref) {
     "data-testid": testId
   })), checked || checked == null ? checkboxIcon : React.createElement(React.Fragment, null));
 });
+const disabledState$1 = {
+  border: semanticColor.border.primary,
+  background: semanticColor.action.disabled.secondary
+};
 const sharedStyles$1 = StyleSheet.create({
   inputReset: {
     appearance: "none",
@@ -101,14 +96,14 @@ const sharedStyles$1 = StyleSheet.create({
     outline: "none",
     boxSizing: "border-box",
     borderStyle: "solid",
-    borderWidth: 1,
-    borderRadius: 3
+    borderWidth: border.width.hairline,
+    borderRadius: border.radius.small_3
   },
   disabled: {
     cursor: "auto",
-    backgroundColor: offWhite$1,
-    borderColor: offBlack16$1,
-    borderWidth: 1
+    backgroundColor: disabledState$1.background,
+    borderColor: disabledState$1.border,
+    borderWidth: border.width.hairline
   },
   checkboxIcon: {
     position: "absolute",
@@ -116,66 +111,67 @@ const sharedStyles$1 = StyleSheet.create({
     margin: (size$1 - checkSize) / 2
   }
 });
-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
-  },
-  error: {
-    faded: fadedRed$1,
-    base: red$1,
-    active: activeRed
-  }
-};
 const styles$6 = {};
 const _generateStyles$1 = (checked, error) => {
   const styleKey = `${String(checked)}-${String(error)}`;
   if (styles$6[styleKey]) {
     return styles$6[styleKey];
   }
-  const palette = error ? colors$1.error : colors$1.default;
+  const isCheckedOrIndeterminate = checked || checked == null;
+  const actionType = error ? "destructive" : "progressive";
+  const styleType = isCheckedOrIndeterminate ? "filled" : "outlined";
+  const colorAction = semanticColor.action[styleType][actionType];
+  const states = {
+    default: {
+      border: colorAction.default.border,
+      background: colorAction.default.background
+    },
+    error: {
+      border: semanticColor.status.critical.foreground,
+      background: semanticColor.status.critical.background
+    }
+  };
   let newStyles = {};
-  if (checked || checked == null) {
+  if (isCheckedOrIndeterminate) {
     newStyles = {
       default: {
-        backgroundColor: palette.base,
-        borderWidth: 0,
+        backgroundColor: states.default.background,
+        borderColor: states.default.border,
         ":focus-visible": {
-          boxShadow: `0 0 0 1px ${white$1}, 0 0 0 3px ${palette.base}`
+          outline: `${border.width.thin}px solid ${colorAction.hover.border}`,
+          outlineOffset: 1
         },
         ":hover": {
-          boxShadow: `0 0 0 1px ${white$1}, 0 0 0 3px ${palette.base}`
+          outline: `${border.width.thin}px solid ${colorAction.hover.border}`,
+          outlineOffset: 1
         },
         ":active": {
-          boxShadow: `0 0 0 1px ${white$1}, 0 0 0 3px ${palette.active}`,
-          background: palette.active
+          outline: `${border.width.thin}px solid ${colorAction.press.border}`,
+          outlineOffset: 1,
+          background: colorAction.press.background
         }
       }
     };
   } else {
+    const currentState = error ? states.error : states.default;
     newStyles = {
       default: {
-        backgroundColor: error ? fadedRed$1 : white$1,
-        borderColor: error ? red$1 : offBlack50$1,
+        backgroundColor: currentState.background,
+        borderColor: currentState.border,
         ":focus-visible": {
-          backgroundColor: error ? fadedRed$1 : white$1,
-          borderColor: palette.base,
-          borderWidth: 2
+          backgroundColor: error ? states.error.background : colorAction.hover.background,
+          outline: `${border.width.thin}px solid ${colorAction.hover.border}`,
+          outlineOffset: -1
         },
         ":hover": {
-          backgroundColor: error ? fadedRed$1 : white$1,
-          borderColor: palette.base,
-          borderWidth: 2
+          backgroundColor: error ? states.error.background : colorAction.hover.background,
+          outline: `${border.width.thin}px solid ${colorAction.hover.border}`,
+          outlineOffset: -1
         },
         ":active": {
-          backgroundColor: palette.faded,
-          borderColor: error ? activeRed : blue$1,
-          borderWidth: 2
+          backgroundColor: colorAction.press.background,
+          outline: `${border.width.thin}px solid ${colorAction.press.border}`,
+          outlineOffset: -1
         }
       }
     };
@@ -185,15 +181,6 @@ const _generateStyles$1 = (checked, error) => {
 };
 
 const _excluded$6 = ["checked", "disabled", "error", "groupName", "id", "testId"];
-const {
-  blue,
-  red,
-  white,
-  offWhite,
-  offBlack16,
-  offBlack32,
-  offBlack50
-} = color;
 const StyledInput$1 = addStyle("input");
 const RadioCore = React.forwardRef(function RadioCore(props, ref) {
   const handleChange = () => {
@@ -225,6 +212,10 @@ const RadioCore = React.forwardRef(function RadioCore(props, ref) {
     style: disabledChecked
   }));
 });
+const disabledState = {
+  border: semanticColor.border.primary,
+  background: semanticColor.action.disabled.secondary
+};
 const size = 16;
 const disabledChecked = {
   position: "absolute",
@@ -233,7 +224,7 @@ const disabledChecked = {
   height: size / 2,
   width: size / 2,
   borderRadius: "50%",
-  backgroundColor: offBlack32
+  backgroundColor: semanticColor.action.disabled.default
 };
 const sharedStyles = StyleSheet.create({
   inputReset: {
@@ -250,75 +241,80 @@ const sharedStyles = StyleSheet.create({
     outline: "none",
     boxSizing: "border-box",
     borderStyle: "solid",
-    borderWidth: 1,
+    borderWidth: border.width.hairline,
     borderRadius: "50%"
   },
   disabled: {
     cursor: "auto",
-    backgroundColor: offWhite,
-    borderColor: offBlack16,
-    borderWidth: 1
+    backgroundColor: disabledState.background,
+    borderColor: disabledState.border,
+    borderWidth: border.width.hairline
   }
 });
-const fadedBlue = mix(color.fadedBlue16, white);
-const fadedRed = mix(color.fadedRed8, white);
-const colors = {
-  default: {
-    faded: fadedBlue,
-    base: blue,
-    active: color.activeBlue
-  },
-  error: {
-    faded: fadedRed,
-    base: red,
-    active: color.activeRed
-  }
-};
 const styles$5 = {};
 const _generateStyles = (checked, error) => {
   const styleKey = `${String(checked)}-${String(error)}`;
   if (styles$5[styleKey]) {
     return styles$5[styleKey];
   }
-  const palette = error ? colors.error : colors.default;
+  const actionType = error ? "destructive" : "progressive";
+  const colorAction = semanticColor.action.outlined[actionType];
+  const states = {
+    unchecked: {
+      border: semanticColor.border.strong,
+      background: colorAction.default.background
+    },
+    checked: {
+      border: colorAction.default.foreground,
+      background: colorAction.default.background
+    },
+    error: {
+      border: semanticColor.status.critical.foreground,
+      background: semanticColor.status.critical.background
+    }
+  };
   let newStyles = {};
   if (checked) {
     newStyles = {
       default: {
-        backgroundColor: white,
-        borderColor: palette.base,
+        backgroundColor: states.checked.background,
+        borderColor: states.checked.border,
         borderWidth: size / 4,
         ":focus-visible": {
-          boxShadow: `0 0 0 1px ${white}, 0 0 0 3px ${palette.base}`
+          outline: `${border.width.thin}px solid ${colorAction.hover.border}`,
+          outlineOffset: 1
         },
         ":hover": {
-          boxShadow: `0 0 0 1px ${white}, 0 0 0 3px ${palette.base}`
+          outline: `${border.width.thin}px solid ${colorAction.hover.border}`,
+          outlineOffset: 1
         },
         ":active": {
-          boxShadow: `0 0 0 1px ${white}, 0 0 0 3px ${palette.active}`,
-          borderColor: palette.active
+          outline: `${border.width.thin}px solid ${colorAction.press.border}`,
+          outlineOffset: 1,
+          borderColor: colorAction.press.border
         }
       }
     };
   } else {
+    const currentState = error ? states.error : states.unchecked;
     newStyles = {
       default: {
-        backgroundColor: error ? fadedRed : white,
-        borderColor: error ? red : offBlack50,
+        backgroundColor: currentState.background,
+        borderColor: currentState.border,
         ":focus-visible": {
-          backgroundColor: error ? fadedRed : white,
-          borderColor: palette.base,
-          borderWidth: 2
+          backgroundColor: error ? states.error.background : colorAction.hover.background,
+          outline: `${border.width.thin}px solid ${colorAction.hover.border}`,
+          outlineOffset: -1
         },
         ":hover": {
-          backgroundColor: error ? fadedRed : white,
-          borderColor: palette.base,
-          borderWidth: 2
+          backgroundColor: error ? states.error.background : colorAction.hover.background,
+          outline: `${border.width.thin}px solid ${colorAction.hover.border}`,
+          outlineOffset: -1
         },
         ":active": {
-          backgroundColor: palette.faded,
-          borderColor: error ? color.activeRed : blue,
-          borderWidth: 2
+          backgroundColor: colorAction.press.background,
+          outline: `${border.width.thin}px solid ${colorAction.press.border}`,
+          outlineOffset: -1
         }
       }
     };
@@ -402,12 +398,12 @@ const styles$4 = StyleSheet.create({
     marginTop: -2
   },
   disabledLabel: {
-    color: color.offBlack32
+    color: semanticColor.text.disabled
   },
   description: {
     marginLeft: spacing.medium_16 + spacing.xSmall_8,
     marginTop: spacing.xxxSmall_4,
-    color: color.offBlack64
+    color: semanticColor.text.secondary
   }
 });
 
@@ -478,11 +474,11 @@ const styles$3 = StyleSheet.create({
   },
   description: {
     marginTop: spacing.xxxSmall_4,
-    color: color.offBlack64
+    color: semanticColor.text.secondary
   },
   error: {
     marginTop: spacing.xxxSmall_4,
-    color: color.red
+    color: semanticColor.status.critical.foreground
   },
   defaultLineGap: {
     marginTop: spacing.xSmall_8
@@ -648,7 +644,7 @@ const useFieldValidation = ({
   };
 };
 
-const _excluded$2 = ["id", "type", "value", "name", "disabled", "light", "error", "validate", "onValidate", "required", "placeholder", "style", "testId", "readOnly", "autoFocus", "autoComplete", "forwardedRef", "instantValidation", "onKeyDown", "onChange", "onFocus", "onBlur"];
+const _excluded$2 = ["id", "type", "value", "name", "disabled", "error", "validate", "onValidate", "required", "placeholder", "style", "testId", "readOnly", "autoFocus", "autoComplete", "forwardedRef", "instantValidation", "onKeyDown", "onChange", "onFocus", "onBlur"];
 const StyledInput = addStyle("input");
 const TextField = props => {
   const {
@@ -657,7 +653,6 @@ const TextField = props => {
       value,
       name,
       disabled = false,
-      light = false,
       error,
       validate,
       onValidate,
@@ -705,16 +700,10 @@ const TextField = props => {
       onBlur(event);
     }
   };
-  const getStyles = () => {
-    const baseStyles = [styles$2.input, styles$7.LabelMedium];
-    const defaultStyles = [styles$2.default, !disabled && styles$2.defaultFocus, disabled && styles$2.disabled, hasError && styles$2.error];
-    const lightStyles = [styles$2.light, !disabled && styles$2.lightFocus, disabled && styles$2.lightDisabled, hasError && styles$2.lightError];
-    return [...baseStyles, ...(light ? lightStyles : defaultStyles)];
-  };
   return React.createElement(Id, {
     id: id
   }, uniqueId => React.createElement(StyledInput, _extends({
-    style: [getStyles(), style],
+    style: [styles$2.input, styles$7.LabelMedium, styles$2.default, !disabled && styles$2.defaultFocus, disabled && styles$2.disabled, hasError && styles$2.error, style],
     id: uniqueId,
     type: type,
     placeholder: placeholder,
@@ -734,6 +723,23 @@ const TextField = props => {
     "aria-invalid": hasError
   }, otherProps)));
 };
+const states$1 = {
+  default: {
+    border: semanticColor.border.strong,
+    background: semanticColor.surface.primary,
+    foreground: semanticColor.text.primary
+  },
+  disabled: {
+    border: semanticColor.border.primary,
+    background: semanticColor.action.disabled.secondary,
+    foreground: semanticColor.text.secondary
+  },
+  error: {
+    border: semanticColor.status.critical.foreground,
+    background: semanticColor.status.critical.background,
+    foreground: semanticColor.text.primary
+  }
+};
 const styles$2 = StyleSheet.create({
   input: {
     width: "100%",
@@ -744,86 +750,43 @@ const styles$2 = StyleSheet.create({
     margin: 0
   },
   default: {
-    background: color.white,
-    border: `1px solid ${color.offBlack50}`,
-    color: color.offBlack,
+    background: states$1.default.background,
+    border: `${border.width.hairline}px solid ${states$1.default.border}`,
+    color: states$1.default.foreground,
     "::placeholder": {
-      color: color.offBlack64
+      color: semanticColor.text.secondary
     }
   },
   defaultFocus: {
     ":focus-visible": {
-      borderColor: color.blue,
-      outline: `1px solid ${color.blue}`,
-      outlineOffset: "-2px"
+      borderColor: semanticColor.border.focus,
+      outline: `${border.width.hairline}px solid ${semanticColor.border.focus}`,
+      outlineOffset: -2
     }
   },
   error: {
-    background: color.fadedRed8,
-    border: `1px solid ${color.red}`,
-    color: color.offBlack,
+    background: states$1.error.background,
+    border: `${border.width.hairline}px solid ${states$1.error.border}`,
+    color: states$1.error.foreground,
     "::placeholder": {
-      color: color.offBlack64
+      color: semanticColor.text.secondary
     },
     ":focus-visible": {
-      outlineColor: color.red,
-      borderColor: color.red
+      outlineColor: states$1.error.border,
+      borderColor: states$1.error.border
     }
   },
   disabled: {
-    background: color.offWhite,
-    border: `1px solid ${color.offBlack16}`,
-    color: color.offBlack64,
-    "::placeholder": {
-      color: color.offBlack64
-    },
-    cursor: "not-allowed",
-    ":focus-visible": {
-      outline: `2px solid ${color.offBlack32}`,
-      outlineOffset: "-3px"
-    }
-  },
-  light: {
-    background: color.white,
-    border: `1px solid ${color.offBlack16}`,
-    color: color.offBlack,
-    "::placeholder": {
-      color: color.offBlack64
-    }
-  },
-  lightFocus: {
-    ":focus-visible": {
-      outline: `3px solid ${color.blue}`,
-      outlineOffset: "-4px",
-      borderColor: color.white
-    }
-  },
-  lightDisabled: {
-    backgroundColor: "transparent",
-    border: `1px solid ${color.white32}`,
-    color: color.white64,
+    background: states$1.disabled.background,
+    border: `${border.width.hairline}px solid ${states$1.disabled.border}`,
+    color: states$1.disabled.foreground,
     "::placeholder": {
-      color: color.white64
+      color: states$1.disabled.foreground
     },
     cursor: "not-allowed",
     ":focus-visible": {
-      borderColor: mix(color.white32, color.blue),
-      outline: `3px solid ${color.fadedBlue}`,
-      outlineOffset: "-4px"
-    }
-  },
-  lightError: {
-    background: color.fadedRed8,
-    border: `1px solid ${color.white}`,
-    outline: `2px solid ${color.red}`,
-    outlineOffset: "-3px",
-    color: color.offBlack,
-    "::placeholder": {
-      color: color.offBlack64
-    },
-    ":focus-visible": {
-      outline: `3px solid ${color.red}`,
-      outlineOffset: "-4px"
+      outline: `${border.width.thin}px solid ${semanticColor.action.disabled.default}`,
+      outlineOffset: -3
     }
   }
 });
@@ -838,15 +801,14 @@ class FieldHeading extends React.Component {
       label,
       id,
       required,
-      testId,
-      light
+      testId
     } = this.props;
     const requiredIcon = React.createElement(StyledSpan, {
-      style: light ? styles$1.lightRequired : styles$1.required,
+      style: styles$1.required,
       "aria-hidden": true
     }, " ", "*");
     return React.createElement(React.Fragment, null, React.createElement(LabelMedium, {
-      style: light ? styles$1.lightLabel : styles$1.label,
+      style: styles$1.label,
       tag: "label",
       htmlFor: id && `${id}-field`,
       testId: testId && `${testId}-label`
@@ -857,14 +819,13 @@ class FieldHeading extends React.Component {
   maybeRenderDescription() {
     const {
       description,
-      testId,
-      light
+      testId
     } = this.props;
     if (!description) {
       return null;
     }
     return React.createElement(React.Fragment, null, React.createElement(LabelSmall, {
-      style: light ? styles$1.lightDescription : styles$1.description,
+      style: styles$1.description,
       testId: testId && `${testId}-description`
     }, description), React.createElement(Strut, {
       size: spacing.xxxSmall_4
@@ -874,8 +835,7 @@ class FieldHeading extends React.Component {
     const {
       error,
       id,
-      testId,
-      light
+      testId
     } = this.props;
     if (!error) {
       return null;
@@ -883,7 +843,7 @@ class FieldHeading extends React.Component {
     return React.createElement(React.Fragment, null, React.createElement(Strut, {
       size: spacing.small_12
     }), React.createElement(LabelSmall, {
-      style: light ? styles$1.lightError : styles$1.error,
+      style: styles$1.error,
       role: "alert",
       id: id && `${id}-error`,
       testId: testId && `${testId}-error`
@@ -903,32 +863,20 @@ class FieldHeading extends React.Component {
 }
 const styles$1 = StyleSheet.create({
   label: {
-    color: color.offBlack
-  },
-  lightLabel: {
-    color: color.white
+    color: semanticColor.text.primary
   },
   description: {
-    color: color.offBlack64
-  },
-  lightDescription: {
-    color: color.white64
+    color: semanticColor.text.secondary
   },
   error: {
-    color: color.red
-  },
-  lightError: {
-    color: color.fadedRed
+    color: semanticColor.status.critical.foreground
   },
   required: {
-    color: color.red
-  },
-  lightRequired: {
-    color: color.fadedRed
+    color: semanticColor.status.critical.foreground
   }
 });
 
-const _excluded$1 = ["id", "type", "label", "description", "value", "disabled", "required", "validate", "onChange", "onKeyDown", "placeholder", "light", "style", "testId", "readOnly", "autoComplete", "forwardedRef", "ariaDescribedby", "name", "onValidate", "onFocus", "onBlur"];
+const _excluded$1 = ["id", "type", "label", "description", "value", "disabled", "required", "validate", "onChange", "onKeyDown", "placeholder", "style", "testId", "readOnly", "autoComplete", "forwardedRef", "ariaDescribedby", "name", "onValidate", "onFocus", "onBlur"];
 class LabeledTextField extends React.Component {
   constructor(props) {
     super(props);
@@ -987,7 +935,6 @@ class LabeledTextField extends React.Component {
         onChange,
         onKeyDown,
         placeholder,
-        light,
         style,
         testId,
         readOnly,
@@ -1003,7 +950,6 @@ class LabeledTextField extends React.Component {
       id: uniqueId,
       testId: testId,
       style: style,
-      light: light,
       field: React.createElement(TextField$1, _extends({
         id: `${uniqueId}-field`,
         "aria-describedby": ariaDescribedby ? ariaDescribedby : `${uniqueId}-error`,
@@ -1020,7 +966,6 @@ class LabeledTextField extends React.Component {
         onKeyDown: onKeyDown,
         onFocus: this.handleFocus,
         onBlur: this.handleBlur,
-        light: light,
         readOnly: readOnly,
         autoComplete: autoComplete,
         ref: forwardedRef,
@@ -1035,14 +980,13 @@ class LabeledTextField extends React.Component {
 }
 LabeledTextField.defaultProps = {
   type: "text",
-  disabled: false,
-  light: false
+  disabled: false
 };
 var labeledTextField = React.forwardRef((props, ref) => React.createElement(LabeledTextField, _extends({}, props, {
   forwardedRef: ref
 })));
 
-const _excluded = ["onChange", "value", "placeholder", "disabled", "id", "testId", "style", "readOnly", "autoComplete", "name", "className", "autoFocus", "rows", "spellCheck", "wrap", "minLength", "maxLength", "onClick", "onKeyDown", "onKeyUp", "onFocus", "onBlur", "validate", "onValidate", "required", "resizeType", "light", "rootStyle", "error", "instantValidation"];
+const _excluded = ["onChange", "value", "placeholder", "disabled", "id", "testId", "style", "readOnly", "autoComplete", "name", "className", "autoFocus", "rows", "spellCheck", "wrap", "minLength", "maxLength", "onClick", "onKeyDown", "onKeyUp", "onFocus", "onBlur", "validate", "onValidate", "required", "resizeType", "rootStyle", "error", "instantValidation"];
 const StyledTextArea = addStyle("textarea");
 const TextArea = React.forwardRef(function TextArea(props, ref) {
   const {
@@ -1072,7 +1016,6 @@ const TextArea = React.forwardRef(function TextArea(props, ref) {
       onValidate,
       required,
       resizeType,
-      light,
       rootStyle,
       error,
       instantValidation = true
@@ -1104,12 +1047,6 @@ const TextArea = React.forwardRef(function TextArea(props, ref) {
       onBlur(event);
     }
   };
-  const getStyles = () => {
-    const baseStyles = [styles.textarea, styles$7.LabelMedium, resizeType && resizeStyles[resizeType]];
-    const defaultStyles = [styles.default, !disabled && styles.defaultFocus, disabled && styles.disabled, hasError && styles.error];
-    const lightStyles = [styles.light, !disabled && styles.lightFocus, disabled && styles.lightDisabled, hasError && styles.lightError];
-    return [...baseStyles, ...(light ? lightStyles : defaultStyles)];
-  };
   return React.createElement(View, {
     style: [{
       width: "100%"
@@ -1119,7 +1056,7 @@ const TextArea = React.forwardRef(function TextArea(props, ref) {
     "data-testid": testId,
     ref: ref,
     className: className,
-    style: [getStyles(), style],
+    style: [styles.textarea, styles$7.LabelMedium, resizeType && resizeStyles[resizeType], styles.default, !disabled && styles.defaultFocus, disabled && styles.disabled, hasError && styles.error, style],
     value: value,
     onChange: handleChange,
     placeholder: placeholder,
@@ -1145,6 +1082,23 @@ const TextArea = React.forwardRef(function TextArea(props, ref) {
   })));
 });
 const VERTICAL_SPACING_PX = 10;
+const states = {
+  default: {
+    border: semanticColor.border.strong,
+    background: semanticColor.surface.primary,
+    foreground: semanticColor.text.primary
+  },
+  disabled: {
+    border: semanticColor.border.primary,
+    background: semanticColor.action.disabled.secondary,
+    foreground: semanticColor.text.secondary
+  },
+  error: {
+    border: semanticColor.status.critical.foreground,
+    background: semanticColor.status.critical.background,
+    foreground: semanticColor.text.primary
+  }
+};
 const styles = StyleSheet.create({
   textarea: {
     borderRadius: border.radius.medium_4,
@@ -1153,86 +1107,43 @@ const styles = StyleSheet.create({
     minHeight: `${VERTICAL_SPACING_PX * 2 + font.lineHeight.medium + 2 * border.width.hairline}px`
   },
   default: {
-    background: color.white,
-    border: `1px solid ${color.offBlack50}`,
-    color: color.offBlack,
+    background: states.default.background,
+    border: `${border.width.hairline}px solid ${states.default.border}`,
+    color: states.default.foreground,
     "::placeholder": {
-      color: color.offBlack64
+      color: semanticColor.text.secondary
     }
   },
   defaultFocus: {
     ":focus-visible": {
-      borderColor: color.blue,
-      outline: `1px solid ${color.blue}`,
-      outlineOffset: "-2px"
+      borderColor: semanticColor.border.focus,
+      outline: `${border.width.hairline}px solid ${semanticColor.border.focus}`,
+      outlineOffset: -2
     }
   },
   disabled: {
-    background: color.offWhite,
-    border: `1px solid ${color.offBlack16}`,
-    color: color.offBlack64,
+    background: states.disabled.background,
+    border: `${border.width.hairline}px solid ${states.disabled.border}`,
+    color: states.disabled.foreground,
     "::placeholder": {
-      color: color.offBlack64
+      color: states.disabled.foreground
     },
     cursor: "not-allowed",
     ":focus-visible": {
-      outline: `2px solid ${color.offBlack32}`,
-      outlineOffset: "-3px"
+      outline: `${border.width.thin}px solid ${semanticColor.action.disabled.default}`,
+      outlineOffset: -3
     }
   },
   error: {
-    background: color.fadedRed8,
-    border: `1px solid ${color.red}`,
-    color: color.offBlack,
-    "::placeholder": {
-      color: color.offBlack64
-    },
-    ":focus-visible": {
-      outlineColor: color.red,
-      borderColor: color.red
-    }
-  },
-  light: {
-    background: color.white,
-    border: `1px solid ${color.offBlack16}`,
-    color: color.offBlack,
-    "::placeholder": {
-      color: color.offBlack64
-    }
-  },
-  lightFocus: {
-    ":focus-visible": {
-      outline: `3px solid ${color.blue}`,
-      outlineOffset: "-4px",
-      borderColor: color.white
-    }
-  },
-  lightDisabled: {
-    backgroundColor: "transparent",
-    border: `1px solid ${color.white32}`,
-    color: color.white64,
-    "::placeholder": {
-      color: color.white64
-    },
-    cursor: "not-allowed",
-    ":focus-visible": {
-      borderColor: mix(color.white32, color.blue),
-      outline: `3px solid ${color.fadedBlue}`,
-      outlineOffset: "-4px"
-    }
-  },
-  lightError: {
-    background: color.fadedRed8,
-    border: `1px solid ${color.white}`,
-    outline: `2px solid ${color.red}`,
-    outlineOffset: "-3px",
-    color: color.offBlack,
+    background: states.error.background,
+    border: `${border.width.hairline}px solid ${states.error.border}`,
+    color: states.error.foreground,
     "::placeholder": {
-      color: color.offBlack64
+      color: semanticColor.text.secondary
     },
     ":focus-visible": {
-      outline: `3px solid ${color.red}`,
-      outlineOffset: "-4px"
+      outlineColor: states.error.border,
+      borderColor: states.error.border
     }
   }
 });