Reduce FormControl Hint and Validation font-size (#831)

* reduce FormControl Hint and Validation font-size to 100

* reduce FormControl Hint and Validation line-height to 100

* reduce FormControl Hint letter-spacing to 100

* github-actions[bot] Regenerated snapshots

* add changeset

* use Text component

* update snapshots

* update changeset

---------

Co-authored-by: joshfarrant <[email protected]>

.changeset/lovely-berries-smash.md

@@ -0,0 +1,5 @@
+---
+'@primer/react-brand': minor
+---
+
+Reduced the text size in `FormControl.Hint` and `FormControl.Validation` components to match their counterparts in `CheckboxGroup` and `RadioGroup` for improved consistency and visual design accuracy.

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'
 
@@ -221,7 +222,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'],
@@ -241,17 +245,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}
+    />
   )
 }