@khanacademy/wonder-blocks-form 6.0.6 → 7.0.1

package/dist/index.js

@@ -51,15 +51,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
-} = wonderBlocksTokens.color;
 const size$1 = wonderBlocksTokens.spacing.medium_16;
 const checkSize = wonderBlocksTokens.spacing.small_12;
 const StyledInput$2 = wonderBlocksCore.addStyle("input");
@@ -85,7 +76,7 @@ const CheckboxCore = React__namespace.forwardRef(function CheckboxCore(props, re
   const stateStyles = _generateStyles$1(checked, error);
   const defaultStyle = [sharedStyles$1.inputReset, sharedStyles$1.default, !disabled && stateStyles.default, disabled && sharedStyles$1.disabled];
   const checkboxIcon = React__namespace.createElement(wonderBlocksIcon.PhosphorIcon, {
-    color: disabled ? offBlack32$1 : white$1,
+    color: disabled ? wonderBlocksTokens.semanticColor.icon.disabled : wonderBlocksTokens.semanticColor.icon.inverse,
     icon: checked ? checkIcon__default["default"] : minusIcon__default["default"],
     size: "small",
     style: [sharedStyles$1.checkboxIcon, {
@@ -115,6 +106,10 @@ const CheckboxCore = React__namespace.forwardRef(function CheckboxCore(props, re
     "data-testid": testId
   })), checked || checked == null ? checkboxIcon : React__namespace.createElement(React__namespace.Fragment, null));
 });
+const disabledState$1 = {
+  border: wonderBlocksTokens.semanticColor.border.primary,
+  background: wonderBlocksTokens.semanticColor.action.disabled.secondary
+};
 const sharedStyles$1 = aphrodite.StyleSheet.create({
   inputReset: {
     appearance: "none",
@@ -130,14 +125,14 @@ const sharedStyles$1 = aphrodite.StyleSheet.create({
     outline: "none",
     boxSizing: "border-box",
     borderStyle: "solid",
-    borderWidth: 1,
-    borderRadius: 3
+    borderWidth: wonderBlocksTokens.border.width.hairline,
+    borderRadius: wonderBlocksTokens.border.radius.small_3
   },
   disabled: {
     cursor: "auto",
-    backgroundColor: offWhite$1,
-    borderColor: offBlack16$1,
-    borderWidth: 1
+    backgroundColor: disabledState$1.background,
+    borderColor: disabledState$1.border,
+    borderWidth: wonderBlocksTokens.border.width.hairline
   },
   checkboxIcon: {
     position: "absolute",
@@ -145,66 +140,67 @@ const sharedStyles$1 = aphrodite.StyleSheet.create({
     margin: (size$1 - checkSize) / 2
   }
 });
-const fadedBlue$1 = wonderBlocksTokens.mix(wonderBlocksTokens.color.fadedBlue16, white$1);
-const activeBlue = wonderBlocksTokens.color.activeBlue;
-const fadedRed$1 = wonderBlocksTokens.mix(wonderBlocksTokens.color.fadedRed8, white$1);
-const activeRed = wonderBlocksTokens.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 = wonderBlocksTokens.semanticColor.action[styleType][actionType];
+  const states = {
+    default: {
+      border: colorAction.default.border,
+      background: colorAction.default.background
+    },
+    error: {
+      border: wonderBlocksTokens.semanticColor.status.critical.foreground,
+      background: wonderBlocksTokens.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: `${wonderBlocksTokens.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: `${wonderBlocksTokens.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: `${wonderBlocksTokens.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: `${wonderBlocksTokens.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: `${wonderBlocksTokens.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: `${wonderBlocksTokens.border.width.thin}px solid ${colorAction.press.border}`,
+          outlineOffset: -1
         }
       }
     };
@@ -214,15 +210,6 @@ const _generateStyles$1 = (checked, error) => {
 };
 
 const _excluded$6 = ["checked", "disabled", "error", "groupName", "id", "testId"];
-const {
-  blue,
-  red,
-  white,
-  offWhite,
-  offBlack16,
-  offBlack32,
-  offBlack50
-} = wonderBlocksTokens.color;
 const StyledInput$1 = wonderBlocksCore.addStyle("input");
 const RadioCore = React__namespace.forwardRef(function RadioCore(props, ref) {
   const handleChange = () => {
@@ -254,6 +241,10 @@ const RadioCore = React__namespace.forwardRef(function RadioCore(props, ref) {
     style: disabledChecked
   }));
 });
+const disabledState = {
+  border: wonderBlocksTokens.semanticColor.border.primary,
+  background: wonderBlocksTokens.semanticColor.action.disabled.secondary
+};
 const size = 16;
 const disabledChecked = {
   position: "absolute",
@@ -262,7 +253,7 @@ const disabledChecked = {
   height: size / 2,
   width: size / 2,
   borderRadius: "50%",
-  backgroundColor: offBlack32
+  backgroundColor: wonderBlocksTokens.semanticColor.action.disabled.default
 };
 const sharedStyles = aphrodite.StyleSheet.create({
   inputReset: {
@@ -279,75 +270,80 @@ const sharedStyles = aphrodite.StyleSheet.create({
     outline: "none",
     boxSizing: "border-box",
     borderStyle: "solid",
-    borderWidth: 1,
+    borderWidth: wonderBlocksTokens.border.width.hairline,
     borderRadius: "50%"
   },
   disabled: {
     cursor: "auto",
-    backgroundColor: offWhite,
-    borderColor: offBlack16,
-    borderWidth: 1
+    backgroundColor: disabledState.background,
+    borderColor: disabledState.border,
+    borderWidth: wonderBlocksTokens.border.width.hairline
   }
 });
-const fadedBlue = wonderBlocksTokens.mix(wonderBlocksTokens.color.fadedBlue16, white);
-const fadedRed = wonderBlocksTokens.mix(wonderBlocksTokens.color.fadedRed8, white);
-const colors = {
-  default: {
-    faded: fadedBlue,
-    base: blue,
-    active: wonderBlocksTokens.color.activeBlue
-  },
-  error: {
-    faded: fadedRed,
-    base: red,
-    active: wonderBlocksTokens.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 = wonderBlocksTokens.semanticColor.action.outlined[actionType];
+  const states = {
+    unchecked: {
+      border: wonderBlocksTokens.semanticColor.border.strong,
+      background: colorAction.default.background
+    },
+    checked: {
+      border: colorAction.default.foreground,
+      background: colorAction.default.background
+    },
+    error: {
+      border: wonderBlocksTokens.semanticColor.status.critical.foreground,
+      background: wonderBlocksTokens.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: `${wonderBlocksTokens.border.width.thin}px solid ${colorAction.hover.border}`,
+          outlineOffset: 1
         },
         ":hover": {
-          boxShadow: `0 0 0 1px ${white}, 0 0 0 3px ${palette.base}`
+          outline: `${wonderBlocksTokens.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: `${wonderBlocksTokens.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: `${wonderBlocksTokens.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: `${wonderBlocksTokens.border.width.thin}px solid ${colorAction.hover.border}`,
+          outlineOffset: -1
         },
         ":active": {
-          backgroundColor: palette.faded,
-          borderColor: error ? wonderBlocksTokens.color.activeRed : blue,
-          borderWidth: 2
+          backgroundColor: colorAction.press.background,
+          outline: `${wonderBlocksTokens.border.width.thin}px solid ${colorAction.press.border}`,
+          outlineOffset: -1
         }
       }
     };
@@ -431,12 +427,12 @@ const styles$4 = aphrodite.StyleSheet.create({
     marginTop: -2
   },
   disabledLabel: {
-    color: wonderBlocksTokens.color.offBlack32
+    color: wonderBlocksTokens.semanticColor.text.disabled
   },
   description: {
     marginLeft: wonderBlocksTokens.spacing.medium_16 + wonderBlocksTokens.spacing.xSmall_8,
     marginTop: wonderBlocksTokens.spacing.xxxSmall_4,
-    color: wonderBlocksTokens.color.offBlack64
+    color: wonderBlocksTokens.semanticColor.text.secondary
   }
 });
 
@@ -507,11 +503,11 @@ const styles$3 = aphrodite.StyleSheet.create({
   },
   description: {
     marginTop: wonderBlocksTokens.spacing.xxxSmall_4,
-    color: wonderBlocksTokens.color.offBlack64
+    color: wonderBlocksTokens.semanticColor.text.secondary
   },
   error: {
     marginTop: wonderBlocksTokens.spacing.xxxSmall_4,
-    color: wonderBlocksTokens.color.red
+    color: wonderBlocksTokens.semanticColor.status.critical.foreground
   },
   defaultLineGap: {
     marginTop: wonderBlocksTokens.spacing.xSmall_8
@@ -677,7 +673,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 = wonderBlocksCore.addStyle("input");
 const TextField = props => {
   const {
@@ -686,7 +682,6 @@ const TextField = props => {
       value,
       name,
       disabled = false,
-      light = false,
       error,
       validate,
       onValidate,
@@ -734,16 +729,10 @@ const TextField = props => {
       onBlur(event);
     }
   };
-  const getStyles = () => {
-    const baseStyles = [styles$2.input, wonderBlocksTypography.styles.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__namespace.createElement(wonderBlocksCore.Id, {
     id: id
   }, uniqueId => React__namespace.createElement(StyledInput, _extends__default["default"]({
-    style: [getStyles(), style],
+    style: [styles$2.input, wonderBlocksTypography.styles.LabelMedium, styles$2.default, !disabled && styles$2.defaultFocus, disabled && styles$2.disabled, hasError && styles$2.error, style],
     id: uniqueId,
     type: type,
     placeholder: placeholder,
@@ -763,6 +752,23 @@ const TextField = props => {
     "aria-invalid": hasError
   }, otherProps)));
 };
+const states$1 = {
+  default: {
+    border: wonderBlocksTokens.semanticColor.border.strong,
+    background: wonderBlocksTokens.semanticColor.surface.primary,
+    foreground: wonderBlocksTokens.semanticColor.text.primary
+  },
+  disabled: {
+    border: wonderBlocksTokens.semanticColor.border.primary,
+    background: wonderBlocksTokens.semanticColor.action.disabled.secondary,
+    foreground: wonderBlocksTokens.semanticColor.text.secondary
+  },
+  error: {
+    border: wonderBlocksTokens.semanticColor.status.critical.foreground,
+    background: wonderBlocksTokens.semanticColor.status.critical.background,
+    foreground: wonderBlocksTokens.semanticColor.text.primary
+  }
+};
 const styles$2 = aphrodite.StyleSheet.create({
   input: {
     width: "100%",
@@ -773,86 +779,43 @@ const styles$2 = aphrodite.StyleSheet.create({
     margin: 0
   },
   default: {
-    background: wonderBlocksTokens.color.white,
-    border: `1px solid ${wonderBlocksTokens.color.offBlack50}`,
-    color: wonderBlocksTokens.color.offBlack,
+    background: states$1.default.background,
+    border: `${wonderBlocksTokens.border.width.hairline}px solid ${states$1.default.border}`,
+    color: states$1.default.foreground,
     "::placeholder": {
-      color: wonderBlocksTokens.color.offBlack64
+      color: wonderBlocksTokens.semanticColor.text.secondary
     }
   },
   defaultFocus: {
     ":focus-visible": {
-      borderColor: wonderBlocksTokens.color.blue,
-      outline: `1px solid ${wonderBlocksTokens.color.blue}`,
-      outlineOffset: "-2px"
+      borderColor: wonderBlocksTokens.semanticColor.border.focus,
+      outline: `${wonderBlocksTokens.border.width.hairline}px solid ${wonderBlocksTokens.semanticColor.border.focus}`,
+      outlineOffset: -2
     }
   },
   error: {
-    background: wonderBlocksTokens.color.fadedRed8,
-    border: `1px solid ${wonderBlocksTokens.color.red}`,
-    color: wonderBlocksTokens.color.offBlack,
+    background: states$1.error.background,
+    border: `${wonderBlocksTokens.border.width.hairline}px solid ${states$1.error.border}`,
+    color: states$1.error.foreground,
     "::placeholder": {
-      color: wonderBlocksTokens.color.offBlack64
+      color: wonderBlocksTokens.semanticColor.text.secondary
     },
     ":focus-visible": {
-      outlineColor: wonderBlocksTokens.color.red,
-      borderColor: wonderBlocksTokens.color.red
+      outlineColor: states$1.error.border,
+      borderColor: states$1.error.border
     }
   },
   disabled: {
-    background: wonderBlocksTokens.color.offWhite,
-    border: `1px solid ${wonderBlocksTokens.color.offBlack16}`,
-    color: wonderBlocksTokens.color.offBlack64,
-    "::placeholder": {
-      color: wonderBlocksTokens.color.offBlack64
-    },
-    cursor: "not-allowed",
-    ":focus-visible": {
-      outline: `2px solid ${wonderBlocksTokens.color.offBlack32}`,
-      outlineOffset: "-3px"
-    }
-  },
-  light: {
-    background: wonderBlocksTokens.color.white,
-    border: `1px solid ${wonderBlocksTokens.color.offBlack16}`,
-    color: wonderBlocksTokens.color.offBlack,
-    "::placeholder": {
-      color: wonderBlocksTokens.color.offBlack64
-    }
-  },
-  lightFocus: {
-    ":focus-visible": {
-      outline: `3px solid ${wonderBlocksTokens.color.blue}`,
-      outlineOffset: "-4px",
-      borderColor: wonderBlocksTokens.color.white
-    }
-  },
-  lightDisabled: {
-    backgroundColor: "transparent",
-    border: `1px solid ${wonderBlocksTokens.color.white32}`,
-    color: wonderBlocksTokens.color.white64,
+    background: states$1.disabled.background,
+    border: `${wonderBlocksTokens.border.width.hairline}px solid ${states$1.disabled.border}`,
+    color: states$1.disabled.foreground,
     "::placeholder": {
-      color: wonderBlocksTokens.color.white64
+      color: states$1.disabled.foreground
     },
     cursor: "not-allowed",
     ":focus-visible": {
-      borderColor: wonderBlocksTokens.mix(wonderBlocksTokens.color.white32, wonderBlocksTokens.color.blue),
-      outline: `3px solid ${wonderBlocksTokens.color.fadedBlue}`,
-      outlineOffset: "-4px"
-    }
-  },
-  lightError: {
-    background: wonderBlocksTokens.color.fadedRed8,
-    border: `1px solid ${wonderBlocksTokens.color.white}`,
-    outline: `2px solid ${wonderBlocksTokens.color.red}`,
-    outlineOffset: "-3px",
-    color: wonderBlocksTokens.color.offBlack,
-    "::placeholder": {
-      color: wonderBlocksTokens.color.offBlack64
-    },
-    ":focus-visible": {
-      outline: `3px solid ${wonderBlocksTokens.color.red}`,
-      outlineOffset: "-4px"
+      outline: `${wonderBlocksTokens.border.width.thin}px solid ${wonderBlocksTokens.semanticColor.action.disabled.default}`,
+      outlineOffset: -3
     }
   }
 });
@@ -867,15 +830,14 @@ class FieldHeading extends React__namespace.Component {
       label,
       id,
       required,
-      testId,
-      light
+      testId
     } = this.props;
     const requiredIcon = React__namespace.createElement(StyledSpan, {
-      style: light ? styles$1.lightRequired : styles$1.required,
+      style: styles$1.required,
       "aria-hidden": true
     }, " ", "*");
     return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
-      style: light ? styles$1.lightLabel : styles$1.label,
+      style: styles$1.label,
       tag: "label",
       htmlFor: id && `${id}-field`,
       testId: testId && `${testId}-label`
@@ -886,14 +848,13 @@ class FieldHeading extends React__namespace.Component {
   maybeRenderDescription() {
     const {
       description,
-      testId,
-      light
+      testId
     } = this.props;
     if (!description) {
       return null;
     }
     return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
-      style: light ? styles$1.lightDescription : styles$1.description,
+      style: styles$1.description,
       testId: testId && `${testId}-description`
     }, description), React__namespace.createElement(wonderBlocksLayout.Strut, {
       size: wonderBlocksTokens.spacing.xxxSmall_4
@@ -903,8 +864,7 @@ class FieldHeading extends React__namespace.Component {
     const {
       error,
       id,
-      testId,
-      light
+      testId
     } = this.props;
     if (!error) {
       return null;
@@ -912,7 +872,7 @@ class FieldHeading extends React__namespace.Component {
     return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(wonderBlocksLayout.Strut, {
       size: wonderBlocksTokens.spacing.small_12
     }), React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
-      style: light ? styles$1.lightError : styles$1.error,
+      style: styles$1.error,
       role: "alert",
       id: id && `${id}-error`,
       testId: testId && `${testId}-error`
@@ -932,32 +892,20 @@ class FieldHeading extends React__namespace.Component {
 }
 const styles$1 = aphrodite.StyleSheet.create({
   label: {
-    color: wonderBlocksTokens.color.offBlack
-  },
-  lightLabel: {
-    color: wonderBlocksTokens.color.white
+    color: wonderBlocksTokens.semanticColor.text.primary
   },
   description: {
-    color: wonderBlocksTokens.color.offBlack64
-  },
-  lightDescription: {
-    color: wonderBlocksTokens.color.white64
+    color: wonderBlocksTokens.semanticColor.text.secondary
   },
   error: {
-    color: wonderBlocksTokens.color.red
-  },
-  lightError: {
-    color: wonderBlocksTokens.color.fadedRed
+    color: wonderBlocksTokens.semanticColor.status.critical.foreground
   },
   required: {
-    color: wonderBlocksTokens.color.red
-  },
-  lightRequired: {
-    color: wonderBlocksTokens.color.fadedRed
+    color: wonderBlocksTokens.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__namespace.Component {
   constructor(props) {
     super(props);
@@ -1016,7 +964,6 @@ class LabeledTextField extends React__namespace.Component {
         onChange,
         onKeyDown,
         placeholder,
-        light,
         style,
         testId,
         readOnly,
@@ -1032,7 +979,6 @@ class LabeledTextField extends React__namespace.Component {
       id: uniqueId,
       testId: testId,
       style: style,
-      light: light,
       field: React__namespace.createElement(TextField$1, _extends__default["default"]({
         id: `${uniqueId}-field`,
         "aria-describedby": ariaDescribedby ? ariaDescribedby : `${uniqueId}-error`,
@@ -1049,7 +995,6 @@ class LabeledTextField extends React__namespace.Component {
         onKeyDown: onKeyDown,
         onFocus: this.handleFocus,
         onBlur: this.handleBlur,
-        light: light,
         readOnly: readOnly,
         autoComplete: autoComplete,
         ref: forwardedRef,
@@ -1064,14 +1009,13 @@ class LabeledTextField extends React__namespace.Component {
 }
 LabeledTextField.defaultProps = {
   type: "text",
-  disabled: false,
-  light: false
+  disabled: false
 };
 var labeledTextField = React__namespace.forwardRef((props, ref) => React__namespace.createElement(LabeledTextField, _extends__default["default"]({}, 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 = wonderBlocksCore.addStyle("textarea");
 const TextArea = React__namespace.forwardRef(function TextArea(props, ref) {
   const {
@@ -1101,7 +1045,6 @@ const TextArea = React__namespace.forwardRef(function TextArea(props, ref) {
       onValidate,
       required,
       resizeType,
-      light,
       rootStyle,
       error,
       instantValidation = true
@@ -1133,12 +1076,6 @@ const TextArea = React__namespace.forwardRef(function TextArea(props, ref) {
       onBlur(event);
     }
   };
-  const getStyles = () => {
-    const baseStyles = [styles.textarea, wonderBlocksTypography.styles.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__namespace.createElement(wonderBlocksCore.View, {
     style: [{
       width: "100%"
@@ -1148,7 +1085,7 @@ const TextArea = React__namespace.forwardRef(function TextArea(props, ref) {
     "data-testid": testId,
     ref: ref,
     className: className,
-    style: [getStyles(), style],
+    style: [styles.textarea, wonderBlocksTypography.styles.LabelMedium, resizeType && resizeStyles[resizeType], styles.default, !disabled && styles.defaultFocus, disabled && styles.disabled, hasError && styles.error, style],
     value: value,
     onChange: handleChange,
     placeholder: placeholder,
@@ -1174,6 +1111,23 @@ const TextArea = React__namespace.forwardRef(function TextArea(props, ref) {
   })));
 });
 const VERTICAL_SPACING_PX = 10;
+const states = {
+  default: {
+    border: wonderBlocksTokens.semanticColor.border.strong,
+    background: wonderBlocksTokens.semanticColor.surface.primary,
+    foreground: wonderBlocksTokens.semanticColor.text.primary
+  },
+  disabled: {
+    border: wonderBlocksTokens.semanticColor.border.primary,
+    background: wonderBlocksTokens.semanticColor.action.disabled.secondary,
+    foreground: wonderBlocksTokens.semanticColor.text.secondary
+  },
+  error: {
+    border: wonderBlocksTokens.semanticColor.status.critical.foreground,
+    background: wonderBlocksTokens.semanticColor.status.critical.background,
+    foreground: wonderBlocksTokens.semanticColor.text.primary
+  }
+};
 const styles = aphrodite.StyleSheet.create({
   textarea: {
     borderRadius: wonderBlocksTokens.border.radius.medium_4,
@@ -1182,86 +1136,43 @@ const styles = aphrodite.StyleSheet.create({
     minHeight: `${VERTICAL_SPACING_PX * 2 + wonderBlocksTokens.font.lineHeight.medium + 2 * wonderBlocksTokens.border.width.hairline}px`
   },
   default: {
-    background: wonderBlocksTokens.color.white,
-    border: `1px solid ${wonderBlocksTokens.color.offBlack50}`,
-    color: wonderBlocksTokens.color.offBlack,
+    background: states.default.background,
+    border: `${wonderBlocksTokens.border.width.hairline}px solid ${states.default.border}`,
+    color: states.default.foreground,
     "::placeholder": {
-      color: wonderBlocksTokens.color.offBlack64
+      color: wonderBlocksTokens.semanticColor.text.secondary
     }
   },
   defaultFocus: {
     ":focus-visible": {
-      borderColor: wonderBlocksTokens.color.blue,
-      outline: `1px solid ${wonderBlocksTokens.color.blue}`,
-      outlineOffset: "-2px"
+      borderColor: wonderBlocksTokens.semanticColor.border.focus,
+      outline: `${wonderBlocksTokens.border.width.hairline}px solid ${wonderBlocksTokens.semanticColor.border.focus}`,
+      outlineOffset: -2
     }
   },
   disabled: {
-    background: wonderBlocksTokens.color.offWhite,
-    border: `1px solid ${wonderBlocksTokens.color.offBlack16}`,
-    color: wonderBlocksTokens.color.offBlack64,
+    background: states.disabled.background,
+    border: `${wonderBlocksTokens.border.width.hairline}px solid ${states.disabled.border}`,
+    color: states.disabled.foreground,
     "::placeholder": {
-      color: wonderBlocksTokens.color.offBlack64
+      color: states.disabled.foreground
     },
     cursor: "not-allowed",
     ":focus-visible": {
-      outline: `2px solid ${wonderBlocksTokens.color.offBlack32}`,
-      outlineOffset: "-3px"
+      outline: `${wonderBlocksTokens.border.width.thin}px solid ${wonderBlocksTokens.semanticColor.action.disabled.default}`,
+      outlineOffset: -3
     }
   },
   error: {
-    background: wonderBlocksTokens.color.fadedRed8,
-    border: `1px solid ${wonderBlocksTokens.color.red}`,
-    color: wonderBlocksTokens.color.offBlack,
-    "::placeholder": {
-      color: wonderBlocksTokens.color.offBlack64
-    },
-    ":focus-visible": {
-      outlineColor: wonderBlocksTokens.color.red,
-      borderColor: wonderBlocksTokens.color.red
-    }
-  },
-  light: {
-    background: wonderBlocksTokens.color.white,
-    border: `1px solid ${wonderBlocksTokens.color.offBlack16}`,
-    color: wonderBlocksTokens.color.offBlack,
-    "::placeholder": {
-      color: wonderBlocksTokens.color.offBlack64
-    }
-  },
-  lightFocus: {
-    ":focus-visible": {
-      outline: `3px solid ${wonderBlocksTokens.color.blue}`,
-      outlineOffset: "-4px",
-      borderColor: wonderBlocksTokens.color.white
-    }
-  },
-  lightDisabled: {
-    backgroundColor: "transparent",
-    border: `1px solid ${wonderBlocksTokens.color.white32}`,
-    color: wonderBlocksTokens.color.white64,
-    "::placeholder": {
-      color: wonderBlocksTokens.color.white64
-    },
-    cursor: "not-allowed",
-    ":focus-visible": {
-      borderColor: wonderBlocksTokens.mix(wonderBlocksTokens.color.white32, wonderBlocksTokens.color.blue),
-      outline: `3px solid ${wonderBlocksTokens.color.fadedBlue}`,
-      outlineOffset: "-4px"
-    }
-  },
-  lightError: {
-    background: wonderBlocksTokens.color.fadedRed8,
-    border: `1px solid ${wonderBlocksTokens.color.white}`,
-    outline: `2px solid ${wonderBlocksTokens.color.red}`,
-    outlineOffset: "-3px",
-    color: wonderBlocksTokens.color.offBlack,
+    background: states.error.background,
+    border: `${wonderBlocksTokens.border.width.hairline}px solid ${states.error.border}`,
+    color: states.error.foreground,
     "::placeholder": {
-      color: wonderBlocksTokens.color.offBlack64
+      color: wonderBlocksTokens.semanticColor.text.secondary
     },
     ":focus-visible": {
-      outline: `3px solid ${wonderBlocksTokens.color.red}`,
-      outlineOffset: "-4px"
+      outlineColor: states.error.border,
+      borderColor: states.error.border
     }
   }
 });