From 223fbef14376b748421315d7aeee3ee5d719e436 Mon Sep 17 00:00:00 2001
From: ephraimduncan <ephraimduncan68@gmail.com>
Date: Thu, 23 Apr 2026 17:47:25 +0000
Subject: [PATCH] refactor: route required field color through recipient CSS
 var pipeline

- Add --recipient-red HSL var and expose as recipient.red in tailwind config
- required entry delegates to generateStyles('red'), matching the pattern
  used by every other recipient color (hover/active/combobox states, shared
  ring shadow layers)
- Gate recipient ring on !isValidating in FieldRootContainer so the
  validation ring is the sole source of truth when active
- Extend RECIPIENT_DYNAMIC_CLASS safelist via CSS_VAR_RECIPIENT_COLORS
---
 packages/tailwind-config/index.cjs     |  1 +
 packages/ui/components/field/field.tsx |  2 +-
 packages/ui/lib/recipient-colors.ts    | 22 +++++++---------------
 packages/ui/styles/theme.css           |  1 +
 4 files changed, 10 insertions(+), 16 deletions(-)

diff --git a/packages/tailwind-config/index.cjs b/packages/tailwind-config/index.cjs
index 3e44ce1a8..2390fdd3b 100644
--- a/packages/tailwind-config/index.cjs
+++ b/packages/tailwind-config/index.cjs
@@ -116,6 +116,7 @@ module.exports = {
           orange: 'hsl(var(--recipient-orange))',
           yellow: 'hsl(var(--recipient-yellow))',
           pink: 'hsl(var(--recipient-pink))',
+          red: 'hsl(var(--recipient-red))',
         },
       },
       backgroundImage: {
diff --git a/packages/ui/components/field/field.tsx b/packages/ui/components/field/field.tsx
index 963a96fd3..56c0b1081 100644
--- a/packages/ui/components/field/field.tsx
+++ b/packages/ui/components/field/field.tsx
@@ -138,7 +138,7 @@ export function FieldRootContainer({
         data-readonly={readonly ? 'true' : 'false'}
         className={cn(
           'field--FieldRootContainer field-card-container dark-mode-disabled group relative z-20 flex h-full w-full items-center rounded-[2px] bg-white/90 ring-2 ring-gray-200 transition-all',
-          color?.base,
+          !isValidating && color?.base,
           {
             'px-2': field.type !== FieldType.SIGNATURE && field.type !== FieldType.FREE_SIGNATURE,
             'justify-center': !field.inserted,
diff --git a/packages/ui/lib/recipient-colors.ts b/packages/ui/lib/recipient-colors.ts
index 65cdb64f9..8cccefb8c 100644
--- a/packages/ui/lib/recipient-colors.ts
+++ b/packages/ui/lib/recipient-colors.ts
@@ -33,19 +33,7 @@ const RECIPIENT_COLOR_STYLES: Record<TRecipientColor, () => RecipientColorStyles
       'ring-2 ring-recipient-green shadow-[0_0_0_5px_hsl(var(--recipient-green)/10%),0_0_0_2px_hsl(var(--recipient-green)/60%),0_0_0_0.5px_hsl(var(--recipient-green))]',
     comboBoxItem: '',
   }),
-  required: (): RecipientColorStyles => ({
-    base: 'ring-red-400 hover:bg-red-400/30',
-    baseRing: 'rgba(248, 113, 113, 1)',
-    baseRingHover: 'rgba(248, 113, 113, 0.3)',
-    baseTextHover: 'rgba(248, 113, 113, 1)',
-    fieldButton: 'border-red-400 hover:border-red-400',
-    fieldButtonText: '',
-    fieldItem: 'group/field-item rounded-[2px]',
-    fieldItemInitials: '',
-    comboBoxTrigger:
-      'ring-2 ring-red-400 shadow-[0_0_0_5px_rgba(248,113,113,0.1),0_0_0_2px_rgba(248,113,113,0.6),0_0_0_0.5px_rgba(248,113,113,1)]',
-    comboBoxItem: '',
-  }),
+  required: once(() => generateStyles('red')),
   green: once(() => generateStyles('green')),
   blue: once(() => generateStyles('blue')),
   purple: once(() => generateStyles('purple')),
@@ -54,7 +42,7 @@ const RECIPIENT_COLOR_STYLES: Record<TRecipientColor, () => RecipientColorStyles
   pink: once(() => generateStyles('pink')),
 };
 
-const generateStyles = (recipientColor: TRecipientColor): RecipientColorStyles => {
+const generateStyles = (recipientColor: TCssVarRecipientColor): RecipientColorStyles => {
   const { bg, border, ring, text } = CSS_PROPERTY;
   const { active, hover, groupHover, groupHoverFieldItem } = CSS_VARIANT;
 
@@ -92,9 +80,13 @@ const CSS_VARIANT = {
 
 const AVAILABLE_RECIPIENT_COLORS = ['green', 'blue', 'purple', 'orange', 'yellow', 'pink'] as const;
 
+const CSS_VAR_RECIPIENT_COLORS = [...AVAILABLE_RECIPIENT_COLORS, 'red'] as const;
+
+type TCssVarRecipientColor = (typeof CSS_VAR_RECIPIENT_COLORS)[number];
+
 export const RECIPIENT_DYNAMIC_CLASS = {
   pattern: new RegExp(
-    `(${Object.values(CSS_PROPERTY).join('|')})-recipient-(${AVAILABLE_RECIPIENT_COLORS.join('|')})(\\/(15|30))?$`,
+    `(${Object.values(CSS_PROPERTY).join('|')})-recipient-(${CSS_VAR_RECIPIENT_COLORS.join('|')})(\\/(15|30))?$`,
   ),
   variants: Object.values(CSS_VARIANT),
 };
diff --git a/packages/ui/styles/theme.css b/packages/ui/styles/theme.css
index 2f05479ba..95ce47fe4 100644
--- a/packages/ui/styles/theme.css
+++ b/packages/ui/styles/theme.css
@@ -55,6 +55,7 @@
     --recipient-orange: 36 92% 54%;
     --recipient-yellow: 51 100% 43%;
     --recipient-pink: 313 65% 57%;
+    --recipient-red: 0 91% 71%;
 
     /* Base - Neutral */
     --new-neutral-50: 0, 0%, 96%;