Theming
Jetpack UI uses Tailwind CSS v4's @theme block to define all design tokens as CSS custom properties. You can override any token in your project's CSS without modifying or rebuilding the library.
Default tokens
These defaults ship with the library:
css
@theme {
/* Brand colors */
--color-primary: oklch(0.38 0.10 240); /* ~blue-600 */
--color-danger: oklch(0.53 0.22 25); /* ~red-600 */
--color-success: oklch(0.53 0.15 150); /* ~green-600 */
--color-warning: oklch(0.68 0.16 75); /* ~amber-500 */
--color-info: oklch(0.56 0.12 230); /* ~sky-500 */
/* Status tints (light bg for badges/alerts) */
--color-danger-subtle: oklch(0.97 0.02 25);
--color-success-subtle: oklch(0.97 0.02 150);
--color-warning-subtle: oklch(0.97 0.03 75);
--color-info-subtle: oklch(0.97 0.01 230);
/* Surfaces */
--color-canvas: oklch(0.98 0 0); /* page bg: gray-50 */
--color-surface: oklch(1.00 0 0); /* card bg: white */
--color-surface-raised: oklch(0.96 0 0); /* hover bg: gray-100 */
/* Borders */
--color-edge: oklch(0.88 0 0); /* gray-200 */
--color-edge-subtle: oklch(0.93 0 0); /* gray-100 */
/* Text */
--color-ink: oklch(0.15 0 0); /* gray-900 */
--color-ink-muted: oklch(0.45 0 0); /* gray-500 */
--color-ink-disabled: oklch(0.65 0 0); /* gray-400 */
--color-ink-inverse: oklch(1.00 0 0); /* white */
/* Typography */
--font-sans: ui-sans-serif, system-ui, -apple-system, ...;
--font-mono: ui-monospace, "SFMono-Regular", Menlo, ...;
}Overriding tokens
Define your own @theme block in your project's CSS entry file before importing the library:
css
/* src/style.css */
@theme {
--color-primary: oklch(0.47 0.18 145); /* your brand green */
}
@import "@jetpack-labs/jetpack-ui/style.css";
@import "tailwindcss";Any token you define overrides the library default. Tokens you leave out stay at their defaults. No rebuild of the library is required — components read the CSS variables at runtime.
Token reference
| Token | Role | Default |
|---|---|---|
--color-primary | Primary action color | Blue |
--color-danger | Destructive/error color | Red |
--color-success | Success/positive color | Green |
--color-warning | Warning/caution color | Amber |
--color-info | Informational color | Sky |
--color-danger-subtle | Danger badge/alert background | Light red tint |
--color-success-subtle | Success badge/alert background | Light green tint |
--color-warning-subtle | Warning badge/alert background | Light amber tint |
--color-info-subtle | Info badge/alert background | Light sky tint |
--color-canvas | Page/app background | gray-50 |
--color-surface | Card/panel background | white |
--color-surface-raised | Hover/elevated background | gray-100 |
--color-edge | Default border color | gray-200 |
--color-edge-subtle | Subtle divider color | gray-100 |
--color-ink | Primary text | gray-900 |
--color-ink-muted | Secondary/muted text | gray-500 |
--color-ink-disabled | Disabled text/placeholder | gray-400 |
--color-ink-inverse | Text on dark/colored backgrounds | white |
Using tokens in your own components
Because all tokens are Tailwind color utilities, you can use them in your own components too:
html
<div class="bg-surface border border-edge rounded-xl p-4">
<p class="text-ink">Main text</p>
<p class="text-ink-muted">Secondary text</p>
</div>