WB-1672: Form fields: Update border color to offBlack50 (#2199)

## Summary:

For a11y reasons, we are changing the border color from `offBlack16` to
`offBlack50`. This will solve a color contrast issue for non-text elements like
textfields and dropdown openers.

This PR updates this color in `TextField`, `MultiSelect` and `SingleSelect` to
match these changes.

TextField / LabeledTextField:

<img width="942" alt="Screenshot 2024-03-15 at 10 18 25 AM" src="https://github.com/Khan/wonder-blocks/assets/843075/94d92afa-d15d-4b1d-9539-6e815192d86b">


MultiSelect / SingleSelect:

<img width="761" alt="Screenshot 2024-03-15 at 10 18 49 AM" src="https://github.com/Khan/wonder-blocks/assets/843075/da4a7126-c899-48de-aae7-c4c368eecd60">


Issue: WB-1672

## Test plan:

Verify the border color of the `Textfield`, `MultiSelect` and `SingleSelect` in
Storybook and chromatic, and ensure that the color looks as we expect.

Author: jandrade

Reviewers: jandrade, jeresig

Required Reviewers:

Approved By: jeresig

Checks: ✅ Chromatic - Get results on regular PRs (ubuntu-latest, 20.x), ✅ codecov/project, ✅ Lint (ubuntu-latest, 20.x), ✅ Test (ubuntu-latest, 20.x, 2/2), ✅ Test (ubuntu-latest, 20.x, 1/2), ✅ Check build sizes (ubuntu-latest, 20.x), ✅ Chromatic - Build on regular PRs / chromatic (ubuntu-latest, 20.x), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x), ⏭️  Chromatic - Skip on Release PR (changesets), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ gerald, ⏭️  dependabot

Pull Request URL: #2199

.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/labeled-text-field.stories.tsx

@@ -15,6 +15,10 @@ import packageConfig from "../../packages/wonder-blocks-form/package.json";
 import ComponentInfo from "../../.storybook/components/component-info";
 import LabeledTextFieldArgTypes from "./labeled-text-field.argtypes";
 
+/**
+ * A LabeledTextField is an element used to accept a single line of text from
+ * the user paired with a label, description, and error field elements.
+ */
 export default {
     title: "Packages / Form / LabeledTextField",
     component: LabeledTextField,

__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: "Packages / Form / TextField",
     component: TextField,

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

@@ -322,7 +322,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
@@ -334,7 +334,7 @@ const _generateStyles = (
                     ":hover:not([aria-disabled=true])": {
                         borderColor: error
                             ? tokens.color.red
-                            : tokens.color.offBlack16,
+                            : tokens.color.offBlack50,
                         borderWidth: tokens.border.width.hairline,
                         paddingLeft: tokens.spacing.medium_16,
                         paddingRight: tokens.spacing.small_12,

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

@@ -1,8 +1,8 @@
 import * as React from "react";
 import {StyleSheet} from "aphrodite";
 
-import {mix, color, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {IDProvider, addStyle} from "@khanacademy/wonder-blocks-core";
+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";
@@ -329,14 +329,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": {