[WB-1814.2] Refactor TextField and TextArea to use semantic colors

.changeset/ninety-radios-reflect.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-form": patch
+---
+
+Migrate color instances to use semanticColor internally on TextField and TextArea

.changeset/spicy-grapes-invite.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-tokens": minor
+---
+
+Add `border.focus` semantic color token to use for the focus outline

__docs__/wonder-blocks-form/text-area-variants.stories.tsx

@@ -14,11 +14,7 @@ import {LabeledField} from "@khanacademy/wonder-blocks-labeled-field";
  */
 export default {
     title: "Packages / Form / TextArea / All Variants",
-    parameters: {
-        docs: {
-            autodocs: false,
-        },
-    },
+    tags: ["!autodocs"],
 } as Meta;
 
 type StoryComponentType = StoryObj<typeof TextArea>;

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

@@ -6,7 +6,7 @@ import {TextArea} from "@khanacademy/wonder-blocks-form";
 import packageConfig from "../../packages/wonder-blocks-form/package.json";
 
 import ComponentInfo from "../components/component-info";
-import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {semanticColor, spacing} from "@khanacademy/wonder-blocks-tokens";
 import Button from "@khanacademy/wonder-blocks-button";
 import {LabelLarge} from "@khanacademy/wonder-blocks-typography";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
@@ -50,12 +50,12 @@ type ControlledStoryComponentType = StoryObj<typeof ControlledTextArea>;
 
 const styles = StyleSheet.create({
     customField: {
-        backgroundColor: color.darkBlue,
-        color: color.white,
+        backgroundColor: semanticColor.status.notice.background,
+        color: semanticColor.status.notice.foreground,
         border: "none",
         maxWidth: 250,
         "::placeholder": {
-            color: color.white64,
+            color: semanticColor.text.secondary,
         },
     },
 });

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

@@ -5,7 +5,7 @@ import type {Meta, StoryObj} from "@storybook/react";
 
 import {PropsFor, View} from "@khanacademy/wonder-blocks-core";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
-import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {semanticColor, spacing} from "@khanacademy/wonder-blocks-tokens";
 import Button from "@khanacademy/wonder-blocks-button";
 import {LabelLarge, Body} from "@khanacademy/wonder-blocks-typography";
 
@@ -828,12 +828,12 @@ AutoComplete.parameters = {
 
 const styles = StyleSheet.create({
     customField: {
-        backgroundColor: color.darkBlue,
-        color: color.white,
+        backgroundColor: semanticColor.status.notice.background,
+        color: semanticColor.status.notice.foreground,
         border: "none",
         maxWidth: 250,
         "::placeholder": {
-            color: color.white64,
+            color: semanticColor.text.secondary,
         },
     },
     button: {

__docs__/wonder-blocks-search-field/search-field-variants.stories.tsx

@@ -3,7 +3,7 @@ import {StyleSheet} from "aphrodite";
 import type {Meta, StoryObj} from "@storybook/react";
 
 import {View} from "@khanacademy/wonder-blocks-core";
-import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {spacing} from "@khanacademy/wonder-blocks-tokens";
 import {LabelLarge} from "@khanacademy/wonder-blocks-typography";
 import SearchField from "@khanacademy/wonder-blocks-search-field";
 import {LabeledField} from "@khanacademy/wonder-blocks-labeled-field";
@@ -123,9 +123,6 @@ export const Active: StoryComponentType = {
 };
 
 const styles = StyleSheet.create({
-    darkDefault: {
-        backgroundColor: color.darkBlue,
-    },
     statesContainer: {
         padding: spacing.medium_16,
     },

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

@@ -3,7 +3,7 @@ import {StyleSheet} from "aphrodite";
 
 import {View, addStyle, StyleType} from "@khanacademy/wonder-blocks-core";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
-import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {semanticColor, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {LabelMedium, LabelSmall} from "@khanacademy/wonder-blocks-typography";
 
 type Props = {
@@ -136,15 +136,15 @@ export default class FieldHeading extends React.Component<Props> {
 
 const styles = StyleSheet.create({
     label: {
-        color: color.offBlack,
+        color: semanticColor.text.primary,
     },
     description: {
-        color: color.offBlack64,
+        color: semanticColor.text.secondary,
     },
     error: {
-        color: color.red,
+        color: semanticColor.status.critical.foreground,
     },
     required: {
-        color: color.red,
+        color: semanticColor.status.critical.foreground,
     },
 });

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

@@ -7,7 +7,12 @@ import {
     addStyle,
     View,
 } from "@khanacademy/wonder-blocks-core";
-import {border, color, font, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {
+    border,
+    font,
+    semanticColor,
+    spacing,
+} from "@khanacademy/wonder-blocks-tokens";
 import {styles as typographyStyles} from "@khanacademy/wonder-blocks-typography";
 import {useId} from "react";
 import {useFieldValidation} from "../hooks/use-field-validation";
@@ -312,45 +317,45 @@ const styles = StyleSheet.create({
         }px`,
     },
     default: {
-        background: color.white,
-        border: `1px solid ${color.offBlack50}`,
-        color: color.offBlack,
+        background: semanticColor.surface.primary,
+        border: `${border.width.hairline}px solid ${semanticColor.border.strong}`,
+        color: semanticColor.text.primary,
         "::placeholder": {
-            color: color.offBlack64,
+            color: semanticColor.text.secondary,
         },
     },
     defaultFocus: {
         ":focus-visible": {
-            borderColor: color.blue,
-            outline: `1px solid ${color.blue}`,
+            borderColor: semanticColor.border.focus,
+            outline: `${border.width.hairline}px solid ${semanticColor.border.focus}`,
             // Negative outline offset so it focus outline is not cropped off if
             // an ancestor element has overflow: hidden
-            outlineOffset: "-2px",
+            outlineOffset: -2,
         },
     },
     disabled: {
-        background: color.offWhite,
-        border: `1px solid ${color.offBlack16}`,
-        color: color.offBlack64,
+        background: semanticColor.action.disabled.secondary,
+        border: `${border.width.hairline}px solid ${semanticColor.border.primary}`,
+        color: semanticColor.text.secondary,
         "::placeholder": {
-            color: color.offBlack64,
+            color: semanticColor.text.secondary,
         },
         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,
+        background: semanticColor.status.critical.background,
+        border: `${border.width.hairline}px solid ${semanticColor.status.critical.foreground}`,
+        color: semanticColor.text.primary,
         "::placeholder": {
-            color: color.offBlack64,
+            color: semanticColor.text.secondary,
         },
         ":focus-visible": {
-            outlineColor: color.red,
-            borderColor: color.red,
+            outlineColor: semanticColor.status.critical.foreground,
+            borderColor: semanticColor.status.critical.foreground,
         },
     },
 });

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

@@ -2,7 +2,11 @@ import * as React from "react";
 import {StyleSheet} from "aphrodite";
 
 import {Id, addStyle} from "@khanacademy/wonder-blocks-core";
-import {border, color, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {
+    border,
+    semanticColor,
+    spacing,
+} from "@khanacademy/wonder-blocks-tokens";
 import {styles as typographyStyles} from "@khanacademy/wonder-blocks-typography";
 
 import type {StyleType, AriaProps} from "@khanacademy/wonder-blocks-core";
@@ -268,45 +272,45 @@ const styles = StyleSheet.create({
         margin: 0,
     },
     default: {
-        background: color.white,
-        border: `1px solid ${color.offBlack50}`,
-        color: color.offBlack,
+        background: semanticColor.surface.primary,
+        border: `${border.width.hairline}px solid ${semanticColor.border.strong}`,
+        color: semanticColor.text.primary,
         "::placeholder": {
-            color: color.offBlack64,
+            color: semanticColor.text.secondary,
         },
     },
     defaultFocus: {
         ":focus-visible": {
-            borderColor: color.blue,
-            outline: `1px solid ${color.blue}`,
+            borderColor: semanticColor.border.focus,
+            outline: `${border.width.hairline}px solid ${semanticColor.border.focus}`,
             // Negative outline offset so it focus outline is not cropped off if
             // an ancestor element has overflow: hidden
-            outlineOffset: "-2px",
+            outlineOffset: -2,
         },
     },
     error: {
-        background: color.fadedRed8,
-        border: `1px solid ${color.red}`,
-        color: color.offBlack,
+        background: semanticColor.status.critical.background,
+        border: `${border.width.hairline}px solid ${semanticColor.status.critical.foreground}`,
+        color: semanticColor.text.primary,
         "::placeholder": {
-            color: color.offBlack64,
+            color: semanticColor.text.secondary,
         },
         ":focus-visible": {
-            outlineColor: color.red,
-            borderColor: color.red,
+            outlineColor: semanticColor.status.critical.foreground,
+            borderColor: semanticColor.status.critical.foreground,
         },
     },
     disabled: {
-        background: color.offWhite,
-        border: `1px solid ${color.offBlack16}`,
-        color: color.offBlack64,
+        background: semanticColor.action.disabled.secondary,
+        border: `${border.width.hairline}px solid ${semanticColor.border.primary}`,
+        color: semanticColor.text.secondary,
         "::placeholder": {
-            color: color.offBlack64,
+            color: semanticColor.text.secondary,
         },
         cursor: "not-allowed",
         ":focus-visible": {
-            outline: `2px solid ${color.offBlack32}`,
-            outlineOffset: "-3px",
+            outline: `${border.width.thin}px solid ${semanticColor.action.disabled.default}`,
+            outlineOffset: -3,
         },
     },
 });

packages/wonder-blocks-tokens/src/tokens/semantic-color.ts

@@ -4,6 +4,7 @@ const border = {
     primary: color.fadedOffBlack16,
     subtle: color.fadedOffBlack8,
     strong: color.fadedOffBlack50,
+    focus: color.blue,
     inverse: color.white,
 };