style: fix input colors

Author: lorenzocorallo

src/components/input-prefix.tsx

@@ -12,8 +12,8 @@ const InputWithPrefix = React.forwardRef<
   InputWithPrefixProps
 >(({ className, type, prefix, ...props }, ref) => {
   return (
-    <div className="relative">
-      <div className="text-accent-foreground/70 bg-accent/30 pointer-events-none absolute inset-y-0 left-0 flex items-center border-r pr-2 pl-3">
+    <div className="relative rounded-md overflow-hidden">
+      <div className="text-accent-foreground/70 bg-accent/30 pointer-events-none absolute inset-y-0 left-0 flex items-center border-r border-input pr-2 pl-3">
         {prefix}
       </div>
       <Input

src/components/ui/input.tsx

@@ -8,7 +8,7 @@ const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
       <input
         type={type}
         className={cn(
-          "border-input file:text-foreground placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-1 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          "border-input file:text-foreground placeholder:text-placeholder focus-visible:ring-ring flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-1 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
           className,
         )}
         ref={ref}

src/index.css

@@ -29,6 +29,7 @@
   --secondary-foreground: oklch(0.35 0.07 255.46);
   --muted: oklch(0.92 0.02 256.73);
   --muted-foreground: oklch(0.29 0.08 255.03);
+  --placeholder: oklch(0.7374 0.0489 255.03);
   --accent: oklch(0.91 0.03 258.37);
   --accent-foreground: oklch(0.30 0.09 256.65);
   --destructive: oklch(0.51 0.19 27.08);
@@ -76,12 +77,13 @@
   --secondary-foreground: oklch(0.85 0.03 275.09);
   --muted: oklch(0.27 0.04 254.07);
   --muted-foreground: oklch(0.80 0.04 280.47);
+  --placeholder: oklch(0.5623 0.04 280.47);
   --accent: oklch(0.35 0.04 254.63);
   --accent-foreground: oklch(0.96 0.01 292.80);
   --destructive: oklch(0.51 0.19 27.08);
   --destructive-foreground: oklch(1.00 0 0);
   --border: oklch(0.35 0.04 254.63);
-  --input: oklch(0.24 0.03 259.05);
+  --input: oklch(0.3961 0.03 259.05);
   --ring: oklch(0.47 0.16 257.42);
   --chart-1: oklch(0.49 0.12 267.94);
   --chart-2: oklch(0.56 0.19 306.86);
@@ -123,6 +125,7 @@
   --color-secondary-foreground: var(--secondary-foreground);
   --color-muted: var(--muted);
   --color-muted-foreground: var(--muted-foreground);
+  --color-placeholder: var(--placeholder);
   --color-accent: var(--accent);
   --color-accent-foreground: var(--accent-foreground);
   --color-destructive: var(--destructive);