How a style draws an email. layout.ts builds every block from it, so
adding a style to shared/theme.ts means adding its Recipe here.
font: string
The theme's font stack (--font-body). Its first family is a web font
only Apple's mail apps load, through webFont; other clients fall
back along the stack.
webFont: string
The Google Fonts family parameter of the web font, if it is one.
scale: number
Multiplies every font size: Times sets its serif larger, Kanagawa its monospace smaller.
radius: { card: number; img: number; btn: number; pill: number; avatar: number; }
Corner radii, in pixels: the card's as the site's cards
(--radius-xl), the images' as its thumbnails (--radius-md), the
buttons' as its buttons (--radius-lg), the pills' as its badges
(--radius-sm). The avatars' is the email's own, since the site rounds
them with a literal 50% that some styles square.
title: { size: number; weight: number; upper?: boolean; spacing?: string; accent?: boolean; }
The heading: its size in pixels, weight, and Brutalist's uppercase and spacing.
heavy: number
The weight of titles of items, figures and names.
frame: "none" | "hard" | "ridge" | "hairline" | "soft"
How the card stands out from the page.
rule: "hairline" | "thick" | "gradient"
The divider between sections; "gradient" draws the palette's.
bar: boolean
Draws the palette's gradient as a bar along the card's top.
linkUnderline: boolean
Underlines links, for styles whose links are the color of the text.