WB-1672: Form fields: Update border color to offBlack50

.changeset/dirty-badgers-fry.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-dropdown": patch
+---
+
+Update default/resting border color to fix a color contrast issue

.changeset/eight-rice-hear.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-form": patch
+---
+
+Update default/resting border color to fix a color contrast issue

__docs__/wonder-blocks-form/text-field.stories.tsx

@@ -14,6 +14,9 @@ import packageConfig from "../../packages/wonder-blocks-form/package.json";
 import ComponentInfo from "../../.storybook/components/component-info";
 import TextFieldArgTypes from "./text-field.argtypes";
 
+/**
+ * A TextField is an element used to accept a single line of text from the user.
+ */
 export default {
     title: "Form / TextField",
     component: TextField,

packages/wonder-blocks-dropdown/src/components/select-opener.tsx

@@ -267,7 +267,7 @@ const _generateStyles = (
         newStyles = {
             default: {
                 background: error ? tokens.color.fadedRed8 : tokens.color.white,
-                borderColor: error ? tokens.color.red : tokens.color.offBlack16,
+                borderColor: error ? tokens.color.red : tokens.color.offBlack50,
                 borderWidth: tokens.border.width.hairline,
                 color: placeholder
                     ? tokens.color.offBlack64

packages/wonder-blocks-form/src/components/text-field.tsx

@@ -1,7 +1,6 @@
 import * as React from "react";
 import {StyleSheet} from "aphrodite";
 
-import {mix} from "@khanacademy/wonder-blocks-color";
 import {addStyle} from "@khanacademy/wonder-blocks-core";
 import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {styles as typographyStyles} from "@khanacademy/wonder-blocks-typography";
@@ -303,14 +302,14 @@ const styles = StyleSheet.create({
     },
     default: {
         background: color.white,
-        border: `1px solid ${color.offBlack16}`,
+        border: `1px solid ${color.offBlack50}`,
         color: color.offBlack,
         "::placeholder": {
             color: color.offBlack64,
         },
     },
     error: {
-        background: `${mix(color.fadedRed8, color.white)}`,
+        background: color.fadedRed8,
         border: `1px solid ${color.red}`,
         color: color.offBlack,
         "::placeholder": {