1/*
2 * Base layer.
3 *
4 * Resets and admin-chrome painting. Element-level defaults for prose
5 * content (`<dl>`, `<a>` in paragraphs, `<code>`, native `<select>`,
6 * etc.) live in `admin/prose.css`.
7 *
8 * Everything is scoped to `.plain-admin` (or its descendants) so we
9 * don't change how user pages render.
10 */
11
12/* Shared focus / aria-invalid treatment for form controls. Used by
13 button.css, input.css, textarea.css, select.css, checkbox.css, and
14 radio.css so the keyboard-focus and validation rings are themed in
15 one place. (Switch opts out of aria-invalid — see switch.css.) */
16@utility focus-control {
17 @apply focus-visible:border-admin-ring focus-visible:ring-admin-ring/50 focus-visible:ring-[3px];
18 @apply aria-invalid:ring-admin-danger/20 dark:aria-invalid:ring-admin-danger/40 aria-invalid:border-admin-danger;
19}
20
21@layer base {
22 /* Default border color and focus outline for admin descendants. */
23 .plain-admin * {
24 @apply border-admin-border outline-admin-ring/50;
25 }
26
27 /* Smooth scroll is harmless globally. */
28 html {
29 @apply scroll-smooth;
30 }
31
32 /* Paint the admin chrome. (Basecoat upstream applies this to `body`;
33 we apply it to `.plain-admin` so user pages keep their own bg.) */
34 .plain-admin {
35 @apply bg-admin-background text-admin-foreground overscroll-none antialiased font-sans;
36 }
37
38 /* Mono-family elements use the admin's `--font-mono` stack. Scoped so
39 we don't change how `<code>` / `<pre>` look on user pages. */
40 .plain-admin :is(code, kbd, samp, pre) {
41 font-family: var(--font-mono);
42 }
43}