Theming

Jetpack UI ships two independent token systems. Most components use the Tailwind @theme system below; Button, Input, Select, Textarea, and Card use a separate --jp-* CSS variable system documented further down. Check which system a component uses before overriding it.

Tailwind @theme tokens

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:

@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:

/* 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:

<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>

--jp-* component variables

Button, Input, Select, Textarea, and Card read a separate, flat set of --jp-* CSS custom properties directly in their <style> blocks (not via Tailwind's @theme). Override them by redefining the variables in your app's :root, after importing the library's stylesheet:

/* src/style.css */
@import "@jetpack-labs/jetpack-ui/style.css";

:root {
  --jp-color-primary: #15803d;
  --jp-color-primary-hover: #166534;
  --jp-color-primary-active: #14532d;
  --jp-color-focus: #15803d;
}

Each variable has a hardcoded fallback (e.g. var(--jp-color-primary, #2563eb)), so overriding is optional and partial overrides are safe — any variable you don't redefine keeps its default.

Reference

Token	Used by	Default
--jp-color-primary	Button (primary)	#2563eb
--jp-color-primary-hover	Button (primary)	#1d4ed8
--jp-color-primary-active	Button (primary)	#1e40af
--jp-color-focus	Button, Input, Select, Textarea (focus ring)	#2563eb
--jp-color-focus-shadow	Input, Select, Textarea (focus ring)	rgba(37, 99, 235, 0.12)
--jp-control-bg	Input, Select, Textarea	#ffffff
--jp-control-border	Input, Select, Textarea	#d1d5db
--jp-control-color	Input, Select, Textarea	#111827
--jp-control-placeholder	Input, Select, Textarea	#9ca3af
--jp-control-radius	Input, Select, Textarea	8px
--jp-control-disabled-bg	Input, Select, Textarea	#f9fafb
--jp-btn-secondary-bg / -bg-hover / -color / -border	Button (secondary)	#ffffff / #f9fafb / #374151 / #d1d5db
--jp-btn-ghost-color / -hover-bg / -hover-color	Button (ghost)	#6b7280 / #f3f4f6 / #111827
--jp-btn-subtle-bg / -bg-hover / -color	Button (subtle)	#f3f4f6 / #e5e7eb / #374151
--jp-btn-selected-bg / -color / -border	Button (selected state)	#eff6ff / #1d4ed8 / #bfdbfe
--jp-btn-radius	Button	6px
--jp-card-bg	Card	#ffffff
--jp-card-border	Card	#e5e7eb
--jp-card-footer-bg	Card	#f9fafb
--jp-card-radius	Card	12px