Theme

The theme is a single registry item that ships our globals.css as-is — brand palette, light + dark tokens, status colors, and density variables — plus the cn() utility.

npx shadcn@latest add @campus-one/theme

By default this writes to app/globals.css. If your project uses a different path, the shadcn CLI will ask before overwriting.

What you get

Brand palette — Nile blue

Nine shades from --brand-50 through --brand-900, plus the default --brand (= --brand-500 = #1e499d). Exposed as Tailwind utilities:

<div class="bg-brand-50 text-brand-900">…</div>
<button class="bg-brand text-white">Sign in</button>

The full shadcn token set — background, foreground, card, primary, muted, accent, border, ring, etc. — mapped to the brand. Light and dark modes are both defined; toggle with class="dark" on <html> or use next-themes.

Status tokens

For success / warning / info states that aren't covered by shadcn's destructive variant:

Variable	Light	Dark
`--success`	`#2f7a4d`	`#4ea273`
`--warning`	`#b8722b`	`#d49355`
`--info`	`#1e499d`	`#5a7fc6`

Each one has a matching *-bg variant for tinted backgrounds.

Density variables

Two densities — regular (default) and compact — controlled by [data-density="compact"] on any ancestor element:

<div data-density="compact">
	{/* All inputs, cards, rows shrink */}
</div>

Affects --space-input-y, --space-input-x, --space-card-pad, --space-row-y, --control-h, --control-h-sm.

Customising

The values live in CSS variables, so override them in your own stylesheet after the import:

app/globals.css

@import "tailwindcss";
/* … the rest of @campus-one/theme … */

:root {
	--brand: #c0392b; /* override to a different brand color */
	--primary: var(--brand);
}

Or fork the file — once installed, it's yours to edit.