Always render text fields with white bg + black text
Input fields keep white background (#fff) and slate-900 text in all colour modes. Light gray text on white (dark mode bleedthrough) was unreadable. Applies to both the shadcn Input component and raw <input>/<textarea>/<select> elements in older pages. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -9,7 +9,7 @@ const Input = React.forwardRef<
|
||||
<input
|
||||
type={type}
|
||||
className={cn(
|
||||
"flex h-10 w-full rounded-lg border border-border bg-surface px-3 py-2 text-sm text-foreground placeholder:text-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
|
||||
"flex h-10 w-full rounded-lg border border-border bg-white px-3 py-2 text-sm text-slate-900 placeholder:text-slate-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
ref={ref}
|
||||
|
||||
@@ -90,3 +90,27 @@ button:not([class]):disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* ── Text field appearance ───────────────────────────────────────────────────
|
||||
Inputs keep white background + dark text in all colour modes so that typed
|
||||
content is always easy to read regardless of theme.
|
||||
────────────────────────────────────────────────────────────────────────── */
|
||||
|
||||
input:not([class]),
|
||||
textarea:not([class]),
|
||||
select:not([class]) {
|
||||
background-color: #ffffff;
|
||||
color: #0f172a; /* slate-900 */
|
||||
border: 1px solid rgb(var(--color-border));
|
||||
border-radius: var(--radius);
|
||||
padding: 0.375rem 0.625rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
|
||||
input:not([class]):focus,
|
||||
textarea:not([class]):focus,
|
||||
select:not([class]):focus {
|
||||
outline: 2px solid rgb(var(--color-primary));
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user