From 247a0158bd87429bb1fe9301f8fc5fac2671264d Mon Sep 17 00:00:00 2001
From: Ephraim Duncan <55143799+ephraimduncan@users.noreply.github.com>
Date: Tue, 19 May 2026 04:19:31 +0000
Subject: [PATCH] refactor(ui): replace hardcoded colors with semantic tokens
 (#2749)

---
 apps/remix/app/components/general/metric-card.tsx   |  2 +-
 packages/ui/components/common/copy-text-button.tsx  |  4 ++--
 packages/ui/primitives/command.tsx                  |  2 +-
 packages/ui/primitives/document-dropzone.tsx        | 12 ++++++------
 packages/ui/primitives/document-flow/add-fields.tsx |  2 +-
 .../document-flow/field-item-advanced-settings.tsx  |  2 +-
 .../checkbox-field.tsx                              |  2 +-
 .../dropdown-field.tsx                              |  2 +-
 .../field-items-advanced-settings/radio-field.tsx   |  2 +-
 packages/ui/primitives/form/form-error-message.tsx  |  2 +-
 packages/ui/primitives/form/form.tsx                |  2 +-
 packages/ui/primitives/input.tsx                    |  2 +-
 packages/ui/primitives/multi-select-combobox.tsx    |  4 ++--
 packages/ui/primitives/select.tsx                   |  2 +-
 .../primitives/signature-pad/signature-pad-type.tsx |  2 +-
 .../ui/primitives/signature-pad/signature-pad.tsx   | 13 +++++--------
 .../template-flow/add-template-fields.tsx           |  2 +-
 .../add-template-placeholder-recipients.tsx         |  4 ++--
 packages/ui/primitives/textarea.tsx                 |  2 +-
 19 files changed, 31 insertions(+), 34 deletions(-)

diff --git a/apps/remix/app/components/general/metric-card.tsx b/apps/remix/app/components/general/metric-card.tsx
index 4a14d82a3..14ae66035 100644
--- a/apps/remix/app/components/general/metric-card.tsx
+++ b/apps/remix/app/components/general/metric-card.tsx
@@ -25,7 +25,7 @@ export const CardMetric = ({ icon: Icon, title, value, className, children }: Ca
             </div>
           )}
 
-          <h3 className="mb-2 flex items-end font-medium text-primary-forground text-sm leading-tight">{title}</h3>
+          <h3 className="mb-2 flex items-end font-medium text-sm leading-tight">{title}</h3>
         </div>
 
         {children || (
diff --git a/packages/ui/components/common/copy-text-button.tsx b/packages/ui/components/common/copy-text-button.tsx
index 54f2fb157..889c6b5d8 100644
--- a/packages/ui/components/common/copy-text-button.tsx
+++ b/packages/ui/components/common/copy-text-button.tsx
@@ -41,7 +41,7 @@ export const CopyTextButton = ({
     <Button
       type="button"
       variant="none"
-      className="ml-2 h-7 rounded border bg-neutral-50 px-0.5 font-normal dark:border dark:border-neutral-500 dark:bg-neutral-600"
+      className="ml-2 h-7 rounded-md border-border bg-muted px-0.5 font-normal"
       onClick={async () => onCopy()}
     >
       <AnimatePresence mode="wait" initial={false}>
@@ -56,7 +56,7 @@ export const CopyTextButton = ({
 
           <div
             className={cn(
-              'flex h-6 w-6 items-center justify-center rounded transition-all hover:bg-neutral-200 hover:active:bg-neutral-300 dark:hover:bg-neutral-500 dark:hover:active:bg-neutral-400',
+              'flex h-6 w-6 items-center justify-center rounded transition-all hover:bg-muted-foreground/10 hover:active:bg-muted-foreground/20',
               {
                 'ml-1': Boolean(badgeContentCopied || badgeContentUncopied),
               },
diff --git a/packages/ui/primitives/command.tsx b/packages/ui/primitives/command.tsx
index 948d37949..422f77509 100644
--- a/packages/ui/primitives/command.tsx
+++ b/packages/ui/primitives/command.tsx
@@ -83,7 +83,7 @@ const CommandTextInput = React.forwardRef<
         'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:font-medium file:text-sm placeholder:text-muted-foreground/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
         className,
         {
-          '!ring-red-500 ring-2 transition-all': props['aria-invalid'],
+          '!ring-destructive ring-2 transition-all': props['aria-invalid'],
         },
       )}
       {...props}
diff --git a/packages/ui/primitives/document-dropzone.tsx b/packages/ui/primitives/document-dropzone.tsx
index 848751042..742e44fb8 100644
--- a/packages/ui/primitives/document-dropzone.tsx
+++ b/packages/ui/primitives/document-dropzone.tsx
@@ -92,7 +92,7 @@ export const DocumentDropzone = ({
             // Disabled State
             <div className="flex">
               <motion.div
-                className="a z-10 flex aspect-[3/4] w-24 origin-top-right -rotate-[22deg] flex-col gap-y-1 rounded-lg border border-muted-foreground/20 bg-white/80 px-2 py-4 backdrop-blur-sm group-hover:border-destructive/10 group-hover:bg-destructive/2 dark:bg-muted/80"
+                className="a z-10 flex aspect-[3/4] w-24 origin-top-right -rotate-[22deg] flex-col gap-y-1 rounded-lg border border-muted-foreground/20 bg-background/80 px-2 py-4 backdrop-blur-sm group-hover:border-destructive/10 group-hover:bg-destructive/2"
                 variants={DocumentDropzoneDisabledCardLeftVariants}
               >
                 <div className="h-2 w-full rounded-[2px] bg-muted-foreground/10 group-hover:bg-destructive/10" />
@@ -100,7 +100,7 @@ export const DocumentDropzone = ({
                 <div className="h-2 w-full rounded-[2px] bg-muted-foreground/10 group-hover:bg-destructive/10" />
               </motion.div>
               <motion.div
-                className="z-20 flex aspect-[3/4] w-24 flex-col items-center justify-center gap-y-1 rounded-lg border border-muted-foreground/20 bg-white/80 px-2 py-4 backdrop-blur-sm group-hover:border-destructive/50 group-hover:bg-destructive/5 dark:bg-muted/80"
+                className="z-20 flex aspect-[3/4] w-24 flex-col items-center justify-center gap-y-1 rounded-lg border border-muted-foreground/20 bg-background/80 px-2 py-4 backdrop-blur-sm group-hover:border-destructive/50 group-hover:bg-destructive/5"
                 variants={DocumentDropzoneDisabledCardCenterVariants}
               >
                 <AlertTriangle
@@ -109,7 +109,7 @@ export const DocumentDropzone = ({
                 />
               </motion.div>
               <motion.div
-                className="z-10 flex aspect-[3/4] w-24 origin-top-left rotate-[22deg] flex-col gap-y-1 rounded-lg border border-muted-foreground/20 bg-white/80 px-2 py-4 backdrop-blur-sm group-hover:border-destructive/10 group-hover:bg-destructive/2 dark:bg-muted/80"
+                className="z-10 flex aspect-[3/4] w-24 origin-top-left rotate-[22deg] flex-col gap-y-1 rounded-lg border border-muted-foreground/20 bg-background/80 px-2 py-4 backdrop-blur-sm group-hover:border-destructive/10 group-hover:bg-destructive/2"
                 variants={DocumentDropzoneDisabledCardRightVariants}
               >
                 <div className="h-2 w-full rounded-[2px] bg-muted-foreground/10 group-hover:bg-destructive/10" />
@@ -121,7 +121,7 @@ export const DocumentDropzone = ({
             // Non Disabled State
             <div className="flex">
               <motion.div
-                className="a z-10 flex aspect-[3/4] w-24 origin-top-right -rotate-[22deg] flex-col gap-y-1 rounded-lg border border-muted-foreground/20 bg-white/80 px-2 py-4 backdrop-blur-sm group-hover:border-documenso/80 dark:bg-muted/80"
+                className="a z-10 flex aspect-[3/4] w-24 origin-top-right -rotate-[22deg] flex-col gap-y-1 rounded-lg border border-muted-foreground/20 bg-background/80 px-2 py-4 backdrop-blur-sm group-hover:border-documenso/80"
                 variants={DocumentDropzoneCardLeftVariants}
               >
                 <div className="h-2 w-full rounded-[2px] bg-muted-foreground/20 group-hover:bg-documenso" />
@@ -129,13 +129,13 @@ export const DocumentDropzone = ({
                 <div className="h-2 w-full rounded-[2px] bg-muted-foreground/20 group-hover:bg-documenso" />
               </motion.div>
               <motion.div
-                className="z-20 flex aspect-[3/4] w-24 flex-col items-center justify-center gap-y-1 rounded-lg border border-muted-foreground/20 bg-white/80 px-2 py-4 backdrop-blur-sm group-hover:border-documenso/80 dark:bg-muted/80"
+                className="z-20 flex aspect-[3/4] w-24 flex-col items-center justify-center gap-y-1 rounded-lg border border-muted-foreground/20 bg-background/80 px-2 py-4 backdrop-blur-sm group-hover:border-documenso/80"
                 variants={DocumentDropzoneCardCenterVariants}
               >
                 <Plus strokeWidth="2px" className="h-12 w-12 text-muted-foreground/20 group-hover:text-documenso" />
               </motion.div>
               <motion.div
-                className="z-10 flex aspect-[3/4] w-24 origin-top-left rotate-[22deg] flex-col gap-y-1 rounded-lg border border-muted-foreground/20 bg-white/80 px-2 py-4 backdrop-blur-sm group-hover:border-documenso/80 dark:bg-muted/80"
+                className="z-10 flex aspect-[3/4] w-24 origin-top-left rotate-[22deg] flex-col gap-y-1 rounded-lg border border-muted-foreground/20 bg-background/80 px-2 py-4 backdrop-blur-sm group-hover:border-documenso/80"
                 variants={DocumentDropzoneCardRightVariants}
               >
                 <div className="h-2 w-full rounded-[2px] bg-muted-foreground/20 group-hover:bg-documenso" />
diff --git a/packages/ui/primitives/document-flow/add-fields.tsx b/packages/ui/primitives/document-flow/add-fields.tsx
index be5c46f7a..4384e8297 100644
--- a/packages/ui/primitives/document-flow/add-fields.tsx
+++ b/packages/ui/primitives/document-flow/add-fields.tsx
@@ -920,7 +920,7 @@ export const AddFieldsFormPartial = ({
           {hasErrors && (
             <div className="mt-4">
               <ul>
-                <li className="text-red-500 text-sm">
+                <li className="text-destructive text-sm">
                   <Trans>
                     To proceed further, please set at least one value for the{' '}
                     {emptyCheckboxFields.length > 0 ? 'Checkbox' : emptyRadioFields.length > 0 ? 'Radio' : 'Select'}{' '}
diff --git a/packages/ui/primitives/document-flow/field-item-advanced-settings.tsx b/packages/ui/primitives/document-flow/field-item-advanced-settings.tsx
index 4aa1b2abb..a31f3663f 100644
--- a/packages/ui/primitives/document-flow/field-item-advanced-settings.tsx
+++ b/packages/ui/primitives/document-flow/field-item-advanced-settings.tsx
@@ -326,7 +326,7 @@ export const FieldAdvancedSettings = forwardRef<HTMLDivElement, FieldAdvancedSet
             <div className="mt-4">
               <ul>
                 {errors.map((error, index) => (
-                  <li className="text-red-500 text-sm" key={index}>
+                  <li className="text-destructive text-sm" key={index}>
                     {error}
                   </li>
                 ))}
diff --git a/packages/ui/primitives/document-flow/field-items-advanced-settings/checkbox-field.tsx b/packages/ui/primitives/document-flow/field-items-advanced-settings/checkbox-field.tsx
index 837393ccd..c0ce63d06 100644
--- a/packages/ui/primitives/document-flow/field-items-advanced-settings/checkbox-field.tsx
+++ b/packages/ui/primitives/document-flow/field-items-advanced-settings/checkbox-field.tsx
@@ -240,7 +240,7 @@ export const CheckboxFieldAdvancedSettings = ({
               />
               <button
                 type="button"
-                className="col-span-1 mt-auto inline-flex h-10 w-10 items-center text-slate-500 hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50"
+                className="col-span-1 mt-auto inline-flex h-10 w-10 items-center text-muted-foreground hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50"
                 onClick={() => removeValue(index)}
               >
                 <Trash className="h-5 w-5" />
diff --git a/packages/ui/primitives/document-flow/field-items-advanced-settings/dropdown-field.tsx b/packages/ui/primitives/document-flow/field-items-advanced-settings/dropdown-field.tsx
index 4dccc930a..4a3ae77c7 100644
--- a/packages/ui/primitives/document-flow/field-items-advanced-settings/dropdown-field.tsx
+++ b/packages/ui/primitives/document-flow/field-items-advanced-settings/dropdown-field.tsx
@@ -162,7 +162,7 @@ export const DropdownFieldAdvancedSettings = ({
               <Input className="w-1/2" value={value.value} onChange={(e) => handleValueChange(index, e.target.value)} />
               <button
                 type="button"
-                className="col-span-1 mt-auto inline-flex h-10 w-10 items-center text-slate-500 hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50"
+                className="col-span-1 mt-auto inline-flex h-10 w-10 items-center text-muted-foreground hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50"
                 onClick={() => removeValue(index)}
               >
                 <Trash className="h-5 w-5" />
diff --git a/packages/ui/primitives/document-flow/field-items-advanced-settings/radio-field.tsx b/packages/ui/primitives/document-flow/field-items-advanced-settings/radio-field.tsx
index d35af731e..f9823e1ff 100644
--- a/packages/ui/primitives/document-flow/field-items-advanced-settings/radio-field.tsx
+++ b/packages/ui/primitives/document-flow/field-items-advanced-settings/radio-field.tsx
@@ -176,7 +176,7 @@ export const RadioFieldAdvancedSettings = ({
               />
               <button
                 type="button"
-                className="col-span-1 mt-auto inline-flex h-10 w-10 items-center text-slate-500 hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50 dark:text-white"
+                className="col-span-1 mt-auto inline-flex h-10 w-10 items-center text-muted-foreground hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50"
                 onClick={() => removeValue(value.id)}
               >
                 <Trash className="h-5 w-5" />
diff --git a/packages/ui/primitives/form/form-error-message.tsx b/packages/ui/primitives/form/form-error-message.tsx
index 4ace9373d..cfc73c26d 100644
--- a/packages/ui/primitives/form/form-error-message.tsx
+++ b/packages/ui/primitives/form/form-error-message.tsx
@@ -38,7 +38,7 @@ export const FormErrorMessage = ({ error, className }: FormErrorMessageProps) =>
             opacity: 0,
             y: 10,
           }}
-          className={cn('text-red-500 text-xs', className)}
+          className={cn('text-destructive text-xs', className)}
         >
           {errorMessage}
         </motion.p>
diff --git a/packages/ui/primitives/form/form.tsx b/packages/ui/primitives/form/form.tsx
index 309303f75..e26f92044 100644
--- a/packages/ui/primitives/form/form.tsx
+++ b/packages/ui/primitives/form/form.tsx
@@ -156,7 +156,7 @@ const FormMessage = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<
             y: 10,
           }}
         >
-          <p ref={ref} id={formMessageId} className={cn('text-red-500 text-xs', className)} {...props}>
+          <p ref={ref} id={formMessageId} className={cn('text-destructive text-xs', className)} {...props}>
             {body}
           </p>
         </motion.div>
diff --git a/packages/ui/primitives/input.tsx b/packages/ui/primitives/input.tsx
index 18c6e45fa..cbce02c21 100644
--- a/packages/ui/primitives/input.tsx
+++ b/packages/ui/primitives/input.tsx
@@ -12,7 +12,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, type,
         'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:font-medium file:text-sm placeholder:text-muted-foreground/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
         className,
         {
-          '!ring-red-500 ring-2 transition-all': props['aria-invalid'],
+          '!ring-destructive ring-2 transition-all': props['aria-invalid'],
         },
       )}
       ref={ref}
diff --git a/packages/ui/primitives/multi-select-combobox.tsx b/packages/ui/primitives/multi-select-combobox.tsx
index be9c7c609..fc867131d 100644
--- a/packages/ui/primitives/multi-select-combobox.tsx
+++ b/packages/ui/primitives/multi-select-combobox.tsx
@@ -119,7 +119,7 @@ export function MultiSelectCombobox<T = OptionValue>({
             <AnimatePresence>
               {loading ? (
                 <div className="flex items-center justify-center">
-                  <Loader className="h-5 w-5 animate-spin text-gray-500 dark:text-gray-100" />
+                  <Loader className="h-5 w-5 animate-spin text-muted-foreground" />
                 </div>
               ) : (
                 <AnimateGenericFadeInOut className="flex w-full justify-between">
@@ -142,7 +142,7 @@ export function MultiSelectCombobox<T = OptionValue>({
         {showClearButton && !loading && (
           <div className="absolute top-0 right-8 bottom-0 flex items-center justify-center">
             <button
-              className="flex h-4 w-4 items-center justify-center rounded-full bg-gray-300 dark:bg-neutral-700"
+              className="flex h-4 w-4 items-center justify-center rounded-full bg-muted-foreground/20"
               onClick={() => onChange([])}
             >
               <XIcon className="h-3.5 w-3.5 text-muted-foreground" />
diff --git a/packages/ui/primitives/select.tsx b/packages/ui/primitives/select.tsx
index 10124da63..d9928820a 100644
--- a/packages/ui/primitives/select.tsx
+++ b/packages/ui/primitives/select.tsx
@@ -31,7 +31,7 @@ const SelectTrigger = React.forwardRef<
     <AnimatePresence>
       {loading ? (
         <div className="flex w-full items-center justify-center">
-          <Loader className="h-5 w-5 animate-spin text-gray-500 dark:text-gray-100" />
+          <Loader className="h-5 w-5 animate-spin text-muted-foreground" />
         </div>
       ) : (
         <AnimateGenericFadeInOut className="flex w-full justify-between">
diff --git a/packages/ui/primitives/signature-pad/signature-pad-type.tsx b/packages/ui/primitives/signature-pad/signature-pad-type.tsx
index 16dc63090..45e94c7be 100644
--- a/packages/ui/primitives/signature-pad/signature-pad-type.tsx
+++ b/packages/ui/primitives/signature-pad/signature-pad-type.tsx
@@ -28,7 +28,7 @@ export const SignaturePadType = ({ className, value, defaultValue, onChange }: S
       <input
         data-testid="signature-pad-type-input"
         placeholder={t`Type your signature`}
-        className="w-full bg-transparent px-4 text-center font-signature text-7xl text-black placeholder:text-4xl focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 dark:text-white"
+        className="w-full bg-transparent px-4 text-center font-signature text-7xl text-foreground placeholder:text-4xl focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0"
         // style={{ color: selectedColor }}
         value={value}
         onChange={(event) => {
diff --git a/packages/ui/primitives/signature-pad/signature-pad.tsx b/packages/ui/primitives/signature-pad/signature-pad.tsx
index 20b026480..734daaa97 100644
--- a/packages/ui/primitives/signature-pad/signature-pad.tsx
+++ b/packages/ui/primitives/signature-pad/signature-pad.tsx
@@ -169,26 +169,23 @@ export const SignaturePad = ({
 
       <TabsContent
         value="draw"
-        className="relative flex aspect-signature-pad items-center justify-center rounded-md border border-border bg-neutral-50 text-center dark:bg-background"
+        className="relative flex aspect-signature-pad items-center justify-center rounded-md border border-border bg-muted/25 text-center"
       >
         <SignaturePadDraw className="h-full w-full" onChange={onDrawSignatureChange} value={drawSignature} />
       </TabsContent>
 
       <TabsContent
         value="text"
-        className="relative flex aspect-signature-pad items-center justify-center rounded-md border border-border bg-neutral-50 text-center dark:bg-background"
+        className="relative flex aspect-signature-pad items-center justify-center rounded-md border border-border bg-muted/25 text-center"
       >
         <SignaturePadType value={typedSignature} defaultValue={fullName} onChange={onTypedSignatureChange} />
       </TabsContent>
 
       <TabsContent
         value="image"
-        className={cn(
-          'relative aspect-signature-pad rounded-md border border-border bg-neutral-50 dark:bg-background',
-          {
-            'bg-white': imageSignature,
-          },
-        )}
+        className={cn('relative aspect-signature-pad rounded-md border border-border bg-muted/25', {
+          'bg-background': imageSignature,
+        })}
       >
         <SignaturePadUpload value={imageSignature} onChange={onImageSignatureChange} />
       </TabsContent>
diff --git a/packages/ui/primitives/template-flow/add-template-fields.tsx b/packages/ui/primitives/template-flow/add-template-fields.tsx
index 6290ffd64..650320c91 100644
--- a/packages/ui/primitives/template-flow/add-template-fields.tsx
+++ b/packages/ui/primitives/template-flow/add-template-fields.tsx
@@ -944,7 +944,7 @@ export const AddTemplateFieldsFormPartial = ({
               {hasErrors && (
                 <div className="mt-4">
                   <ul>
-                    <li className="text-red-500 text-sm">
+                    <li className="text-destructive text-sm">
                       <Trans>
                         To proceed further, please set at least one value for the{' '}
                         {emptyCheckboxFields.length > 0 ? 'Checkbox' : emptyRadioFields.length > 0 ? 'Radio' : 'Select'}{' '}
diff --git a/packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx b/packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx
index 66bf595e2..488680d82 100644
--- a/packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx
+++ b/packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx
@@ -725,7 +725,7 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
 
                                 {isSignerDirectRecipient(signer) ? (
                                   <Tooltip>
-                                    <TooltipTrigger className="col-span-1 mt-auto inline-flex h-10 w-10 items-center justify-center text-slate-500 hover:opacity-80">
+                                    <TooltipTrigger className="col-span-1 mt-auto inline-flex h-10 w-10 items-center justify-center text-muted-foreground hover:opacity-80">
                                       <Link2Icon className="h-4 w-4" />
                                     </TooltipTrigger>
                                     <TooltipContent className="z-9999 max-w-md p-4 text-foreground">
@@ -744,7 +744,7 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
                                 ) : (
                                   <button
                                     type="button"
-                                    className="col-span-1 mt-auto inline-flex h-10 w-10 items-center justify-center text-slate-500 hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50"
+                                    className="col-span-1 mt-auto inline-flex h-10 w-10 items-center justify-center text-muted-foreground hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50"
                                     disabled={isSubmitting || signers.length === 1}
                                     onClick={() => onRemoveSigner(index)}
                                     data-testid="remove-placeholder-recipient-button"
diff --git a/packages/ui/primitives/textarea.tsx b/packages/ui/primitives/textarea.tsx
index 89e4d2dde..5bf1f7149 100644
--- a/packages/ui/primitives/textarea.tsx
+++ b/packages/ui/primitives/textarea.tsx
@@ -11,7 +11,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({ classNa
         'flex h-20 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
         className,
         {
-          '!ring-red-500 ring-2 transition-all': props['aria-invalid'],
+          '!ring-destructive ring-2 transition-all': props['aria-invalid'],
         },
       )}
       ref={ref}