Reduce FormControl Hint and Validation font-size

.changeset/lovely-berries-smash.md

@@ -0,0 +1,6 @@
+---
+'@primer/react-brand': minor
+---
+
+Reduced size of text in `FormControl.Hint` and `FormControl.Validation` components
+

packages/react/src/forms/FormControl/FormControl.module.css

@@ -66,19 +66,11 @@
 
 .FormControl-hint {
   grid-column: 1 / 3;
-  color: var(--brand-color-text-muted);
   display: block;
-  font-size: var(--brand-text-size-200);
-  font-weight: var(--base-text-weight-regular);
-  letter-spacing: var(--brand-text-letterSpacing-200);
-  line-height: var(--brand-text-lineHeight-200);
 }
 
 /*Validation*/
 .FormControl-validation {
-  font-weight: var(--base-text-weight-regular);
-  font-size: var(--brand-text-size-200);
-  line-height: var(--brand-text-lineHeight-200);
   display: flex;
   gap: var(--base-size-4);
 }
@@ -93,12 +85,12 @@
 
 .FormControl-validation-success-icon {
   position: relative;
-  top: -1.6px;
+  top: -1px;
 }
 
 .FormControl-validation-error-icon {
   position: relative;
-  top: -1px;
+  top: -0.5px;
 }
 
 .FormControl-validation--animate-in {

packages/react/src/forms/FormControl/FormControl.tsx

@@ -11,6 +11,7 @@ import {Select} from '../Select'
 import {TextInput} from '../TextInput'
 import {Textarea} from '../Textarea'
 import {Radio} from '../Radio'
+import {Text} from '../../Text'
 
 import styles from './FormControl.module.css'
 
@@ -222,7 +223,10 @@ type FormControlValidationProps = {
 
 const FormControlValidation = ({children, validationStatus, className, ...props}: FormControlValidationProps) => {
   return (
-    <span
+    <Text
+      as="span"
+      size="100"
+      weight="medium"
       className={clsx(
         styles['FormControl-validation'],
         validationStatus && styles['FormControl-validation--animate-in'],
@@ -242,17 +246,22 @@ const FormControlValidation = ({children, validationStatus, className, ...props}
         </span>
       )}
       {children}
-    </span>
+    </Text>
   )
 }
 
 type FormControlHintProps = PropsWithChildren<BaseProps<HTMLSpanElement>>
 
-const FormControlHint = ({children, className, ...rest}: FormControlHintProps) => {
+const FormControlHint = ({className, ...rest}: FormControlHintProps) => {
   return (
-    <span className={clsx(styles['FormControl-hint'], className)} {...rest}>
-      {children}
-    </span>
+    <Text
+      as="span"
+      size="100"
+      weight="medium"
+      variant="muted"
+      className={clsx(styles['FormControl-hint'], className)}
+      {...rest}
+    />
   )
 }