Email Theme

Foundation

Resolves shadcn HSL design tokens into email-safe concrete hex values. Generates Tailwind config for React Email with pixelBasedPreset-compatible settings. The bridge between your shadcn theme and email rendering.

core/email-theme

Installation

1 · Add registry to components.json

2 · Install component

Examples

Resolved tokens

The default Keystone Core email theme: HSL tokens resolved to hex, with typography and border-radius.

Resolved email-safe hex tokens from shadcn HSL source (resolveEmailTheme).

Background#f6f7f9

Foreground#172e30

Card#ffffff

Card Foreground#172e30

Primary#a33d14

Primary Foreground#ffffff

Secondary#2e7a74

Secondary Foreground#ffffff

Muted#eeeff2

Muted Foreground#424957

Accent#e4f1f0

Accent Foreground#276862

Destructive#ef4343

Border#dcdfe5

Ring#a33d14

Typography & Radius

Sans: Rajdhani

Serif: Cormorant Garamond

Mono: JetBrains Mono

Radius: 4px / 6px / 8px

API Reference

Prop	Type	Default	Description
`EmailThemeTokens`	`interface`	—	Fully resolved token set: all colors as #rrggbb, font stacks, border radii as px strings.
`hslToHex(hsl)`	`string → string`	—	Converts "220 14% 94%" to "#eeeff1".
`resolveEmailTheme(hslTokens, overrides?)`	`EmailThemeTokens`	—	Resolves HSL record into concrete tokens, with optional overrides.
`createEmailTailwindConfig(theme)`	`EmailTailwindConfig`	—	Generates Tailwind config with colors, fonts, and radii from resolved tokens.
`KC_DEFAULT_HSL_TOKENS`	`Record<string, string>`	—	Keystone Core light-mode HSL tokens from globals.css.