Fix - updated text color and outline for Input (#444)

Fixed #230 :

1) updated text color per Figma file
2) updated border color per Figma file
3) created unit test to test text color

<img width="458" alt="image"
src="https://github.com/user-attachments/assets/bcf975c4-7332-44df-9dd4-8a4a6ed28ffa">


<img width="993" alt="image"
src="https://github.com/user-attachments/assets/c68934f4-f525-4f19-9984-25cb459e8efe">

app/globals.css

@@ -60,7 +60,7 @@
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 210 40% 98%;
 
-    --border: 217.2 32.6% 17.5%;
+    --border: 240 3.7% 15.9%;
     --input: 217.2 32.6% 17.5%;
     --ring: 212.7 26.8% 83.9%;
   }

components/Input/Input.test.tsx

@@ -9,4 +9,11 @@ describe('Input', () => {
     );
     expect(getByPlaceholderText('Placeholder text')).toBeInTheDocument();
   });
+  it('renders the correct font color', () => {
+    const { getByRole } = render(<Input />);
+    const input = getByRole('textbox');
+    expect(input).toHaveStyle({
+      color: 'text-zinc-50',
+    });
+  });
 });

components/Input/Input.tsx

@@ -13,7 +13,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         {...props}
         className={cn(
-          'flex h-10 w-full rounded-md border border-input border-zinc-300 bg-background px-3 py-2 text-base text-zinc-900 ring-offset-background placeholder:border-zinc-400 placeholder:font-normal focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          'flex h-10 w-full rounded-md border border-border bg-background px-3 py-2 text-base text-zinc-50 ring-offset-background placeholder:border-zinc-400 placeholder:font-normal 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,
         )}
         ref={ref}