/* The app's stylesheet: Tailwind CSS (https://tailwindcss.com), built
into public/assets/app.css by every build. The colours, fonts and radii
are the component library's, from public/ui/tokens.css: change them
there, and `bg-primary`, `text-muted-foreground` and the rest follow. */
@import "tailwindcss" source("../src");
/* Tailwind's `font-sans` and `rounded-md` read the same names, which
tokens.css sets after this file. */
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-card: var(--card);
--color-card-foreground: var(--card-foreground);
--color-popover: var(--popover);
--color-popover-foreground: var(--popover-foreground);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground);
--color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground);
--color-accent: var(--accent);
--color-accent-foreground: var(--accent-foreground);
--color-destructive: var(--destructive);
--color-success: var(--success);
--color-warning: var(--warning);
--color-info: var(--info);
--color-border: var(--border);
--color-input: var(--input);
--color-ring: var(--ring);
}
/* Plain HTML looks right too: some generated pages (sign-in, the
scaffold's simple forms) use bare elements. */
@layer base {
body {
@apply mx-auto my-16 max-w-2xl bg-background px-4 font-sans text-foreground;
}
h1 {
@apply mb-4 text-3xl font-extrabold tracking-tight;
}
h2 {
@apply mt-8 mb-3 text-xl font-semibold tracking-tight;
}
p,
form,
ul,
table {
@apply my-3;
}
a {
@apply text-primary underline underline-offset-4;
}
label {
@apply text-sm font-medium;
}
input:not([type="checkbox"], [type="radio"], [type="hidden"]):not([class]),
textarea:not([class]),
select:not([class]) {
@apply mt-1 block h-9 w-full rounded-md border border-input bg-transparent px-3 text-sm;
}
button:not([class]) {
@apply h-9 cursor-pointer rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground;
}
code {
@apply rounded-sm bg-muted px-1 font-mono text-sm;
}
.error {
@apply mt-1 block text-sm text-destructive;
}
}