Wrap dark input defaults in @layer base so utilities can override

This commit is contained in:
dtonon 2026-06-16 20:08:36 +01:00
parent c7dad445b5
commit f0c7459980

View file

@ -31,18 +31,20 @@ body {
display: none;
}
/* Form inputs in dark mode the forms plugin defaults to a white background,
@layer base {
/* Form inputs in dark mode the forms plugin defaults to a white background,
which would punch holes through panels. Override at the element level so we
don't have to add `dark:bg-neutral-800` to every <input>/<textarea>. */
:where(.dark) input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="reset"]):not([type="button"]),
:where(.dark) textarea,
:where(.dark) select {
:where(.dark) input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="reset"]):not([type="button"]),
:where(.dark) textarea,
:where(.dark) select {
background-color: var(--color-neutral-800);
color: var(--color-neutral-100);
}
:where(.dark) input::placeholder,
:where(.dark) textarea::placeholder {
}
:where(.dark) input::placeholder,
:where(.dark) textarea::placeholder {
color: var(--color-neutral-500);
}
}
/* Tighter heading rhythm for all rendered (prose) content. Overrides the