refactor(ui): replace hardcoded colors with semantic tokens (#2749)

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 || (

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),
               },

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}

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" />

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'}{' '}

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>
                 ))}

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" />

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" />

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" />

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>

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>

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}

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" />

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">

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) => {

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>

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'}{' '}

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"

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}