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; display: none;
} }
/* Form inputs in dark mode the forms plugin defaults to a white background, @layer base {
which would punch holes through panels. Override at the element level so we /* Form inputs in dark mode the forms plugin defaults to a white background,
don't have to add `dark:bg-neutral-800` to every <input>/<textarea>. */ which would punch holes through panels. Override at the element level so we
: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"]), don't have to add `dark:bg-neutral-800` to every <input>/<textarea>. */
:where(.dark) 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) select { :where(.dark) textarea,
background-color: var(--color-neutral-800); :where(.dark) select {
color: var(--color-neutral-100); background-color: var(--color-neutral-800);
} color: var(--color-neutral-100);
:where(.dark) input::placeholder, }
:where(.dark) textarea::placeholder { :where(.dark) input::placeholder,
color: var(--color-neutral-500); :where(.dark) textarea::placeholder {
color: var(--color-neutral-500);
}
} }
/* Tighter heading rhythm for all rendered (prose) content. Overrides the /* Tighter heading rhythm for all rendered (prose) content. Overrides the