Some styles

src/components/Prompt.tsx

@@ -3,7 +3,7 @@ import {View, PressableProps, LayoutChangeEvent} from 'react-native'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
 
 import {useTheme, atoms as a} from '#/alf'
-import {H2, P} from '#/components/Typography'
+import {H4, P} from '#/components/Typography'
 import {Button} from '#/components/Button'
 
 import * as Dialog from '#/components/Dialog'
@@ -70,11 +70,11 @@ export function Title({children}: React.PropsWithChildren<{}>) {
   const t = useTheme()
   const {titleId} = React.useContext(Context)
   return (
-    <H2
+    <H4
       nativeID={titleId}
       style={[a.font_bold, t.atoms.text_contrast_600, a.pb_sm]}>
       {children}
-    </H2>
+    </H4>
   )
 }
 

src/components/forms/InputGroup.tsx

@@ -1,12 +1,13 @@
 import React from 'react'
 import {View} from 'react-native'
 
-import {atoms} from '#/alf'
+import {atoms, useTheme} from '#/alf'
 
 /**
  * NOT FINISHED, just here as a reference
  */
 export function InputGroup(props: React.PropsWithChildren<{}>) {
+  const t = useTheme()
   const children = React.Children.toArray(props.children)
   const total = children.length
   return (
@@ -14,6 +15,11 @@ export function InputGroup(props: React.PropsWithChildren<{}>) {
       {children.map((child, i) => {
         return React.isValidElement(child) ? (
           <React.Fragment key={i}>
+            {i > 0 ? (
+              <View
+                style={[atoms.border_b, {borderColor: t.palette.contrast_500}]}
+              />
+            ) : null}
             {React.cloneElement(child, {
               // @ts-ignore
               style: [

src/components/forms/InputText.tsx

@@ -42,6 +42,7 @@ export function InputText({
     onOut: onHoverOut,
   } = useInteractionState()
   const {state: focused, onIn: onFocus, onOut: onBlur} = useInteractionState()
+  const hasIcon = !!Icon
 
   const handleSuffixLayout = React.useCallback(
     (e: LayoutChangeEvent) => {
@@ -50,39 +51,85 @@ export function InputText({
     [setSuffixPadding],
   )
 
-  const {inputStyles, iconStyles} = React.useMemo(() => {
-    const input: TextStyle[] = []
-    const icon: TextStyle[] = []
+  const {inputBaseStyles, inputHoverStyles, inputFocusStyles} =
+    React.useMemo(() => {
+      const base: TextStyle[] = []
+      const hover: TextStyle[] = [
+        {
+          borderColor: t.palette.contrast_300,
+        },
+      ]
+      const focus: TextStyle[] = [
+        {
+          backgroundColor: t.palette.contrast_50,
+          borderColor: t.palette.primary_500,
+        },
+      ]
 
-    if (Icon) {
-      input.push({
-        paddingLeft: 40,
-      })
-    }
-
-    if (hasError) {
-      input.push({
-        borderColor: tokens.color.red_200,
-      })
-      icon.push({
-        color: tokens.color.red_400,
-      })
-    }
-
-    if (hovered || focused) {
-      input.push({
-        borderColor: t.atoms.border_contrast.borderColor,
-      })
+      if (hasIcon) {
+        base.push({
+          paddingLeft: 40,
+        })
+      }
 
       if (hasError) {
-        input.push({
+        base.push({
+          backgroundColor:
+            t.name === 'light' ? t.palette.negative_25 : t.palette.negative_900,
+          borderColor:
+            t.name === 'light'
+              ? t.palette.negative_300
+              : t.palette.negative_800,
+        })
+        hover.push({
+          borderColor: tokens.color.red_500,
+        })
+        focus.push({
+          backgroundColor:
+            t.name === 'light' ? t.palette.negative_25 : t.palette.negative_900,
           borderColor: tokens.color.red_500,
         })
       }
-    }
 
-    return {inputStyles: input, iconStyles: icon}
-  }, [t, hovered, focused, hasError, Icon])
+      return {
+        inputBaseStyles: base,
+        inputHoverStyles: hover,
+        inputFocusStyles: focus,
+      }
+    }, [t, hasError, hasIcon])
+
+  const {iconBaseStyles, iconHoverStyles, iconFocusStyles} =
+    React.useMemo(() => {
+      const base: TextStyle[] = []
+      const hover: TextStyle[] = [
+        {
+          color: t.palette.contrast_500,
+        },
+      ]
+      const focus: TextStyle[] = [
+        {
+          color: t.palette.primary_500,
+        },
+      ]
+
+      if (hasError) {
+        base.push({
+          color: t.palette.negative_400,
+        })
+        hover.push({
+          color: t.palette.negative_500,
+        })
+        focus.push({
+          color: t.palette.negative_500,
+        })
+      }
+
+      return {
+        iconBaseStyles: base,
+        iconHoverStyles: hover,
+        iconFocusStyles: focus,
+      }
+    }, [t, hasError])
 
   const handleOnChange = React.useCallback(
     (e: any) => {
@@ -116,7 +163,7 @@ export function InputText({
         aria-label={label}
         accessibilityLabel={accessibilityLabel}
         accessibilityHint={accessibilityHint}
-        placeholderTextColor={t.atoms.text_contrast_500.color}
+        placeholderTextColor={t.atoms.text_contrast_400.color}
         onFocus={onFocus}
         onBlur={onBlur}
         onChange={handleOnChange}
@@ -125,20 +172,21 @@ export function InputText({
           onMouseLeave: onHoverOut,
         })}
         style={[
-          t.name === 'dark' ? t.atoms.bg_contrast_100 : t.atoms.bg,
+          t.atoms.bg_contrast_50,
           atoms.w_full,
           atoms.px_lg,
           atoms.py_md,
           atoms.rounded_sm,
           atoms.text_md,
-          t.atoms.border,
           t.atoms.text,
           web({
             paddingTop: atoms.pt_md.paddingTop - 1,
           }),
-          {paddingRight: suffixPadding},
+          {borderColor: 'transparent', paddingRight: suffixPadding},
           {borderWidth: 2, lineHeight: atoms.text_md.lineHeight * 1.1875},
-          ...inputStyles,
+          ...inputBaseStyles,
+          ...(hovered ? inputHoverStyles : []),
+          ...(focused ? inputFocusStyles : []),
           ...(Array.isArray(props.style) ? props.style : [props.style]),
         ]}
       />
@@ -155,12 +203,19 @@ export function InputText({
           ]}>
           <Icon
             style={[
-              {color: t.atoms.border_contrast.borderColor},
+              {
+                color:
+                  t.name === 'light'
+                    ? t.palette.contrast_400
+                    : t.palette.contrast_700,
+              },
               {
                 width: 20,
                 pointerEvents: 'none',
               },
-              ...iconStyles,
+              ...iconBaseStyles,
+              ...(hovered ? iconHoverStyles : []),
+              ...(focused ? iconFocusStyles : []),
             ]}
           />
         </View>

src/view/screens/Storybook/Forms.tsx

@@ -5,6 +5,7 @@ import {atoms as a} from '#/alf'
 import {Text} from '#/components/Typography'
 import {InputText} from '#/components/forms/InputText'
 import {InputDate, utils} from '#/components/forms/InputDate'
+import {InputGroup} from '#/components/forms/InputGroup'
 import {Logo} from '#/view/icons/Logo'
 
 export function Forms() {
@@ -27,6 +28,16 @@ export function Forms() {
         value="Test initial value"
         onChange={text => console.log(text)}
       />
+      <InputText
+        hasError
+        testID="input"
+        accessibilityLabel="Input"
+        accessibilityHint="Enter some text"
+        placeholder="Type here"
+        value="Test initial value"
+        onChange={text => console.log(text)}
+        icon={Logo}
+      />
       <InputText
         testID="input"
         accessibilityLabel="Input"
@@ -46,6 +57,43 @@ export function Forms() {
         icon={Logo}
         suffix={() => <Text>.bksy.social</Text>}
       />
+      <InputText
+        multiline
+        numberOfLines={3}
+        testID="input"
+        accessibilityLabel="Input"
+        accessibilityHint="Enter some text"
+        placeholder="Type here"
+        value=""
+        onChange={text => console.log(text)}
+      />
+
+      <InputGroup>
+        <InputText
+          testID="input"
+          accessibilityLabel="Input"
+          accessibilityHint="Enter some text"
+          placeholder="Type here"
+          value=""
+          onChange={text => console.log(text)}
+        />
+        <InputText
+          testID="input"
+          accessibilityLabel="Input"
+          accessibilityHint="Enter some text"
+          placeholder="Type here"
+          value=""
+          onChange={text => console.log(text)}
+        />
+        <InputText
+          testID="input"
+          accessibilityLabel="Input"
+          accessibilityHint="Enter some text"
+          placeholder="Type here"
+          value=""
+          onChange={text => console.log(text)}
+        />
+      </InputGroup>
 
       <InputDate
         testID="date"