Carries each site style into email, so a digest looks like the site its
reader chose and the other emails like the instance's style. A mail client
takes no stylesheet of ours, so each style is resolved here into plain
values, which layout.ts inlines.
What a theme defines is read from it through theme-tokens.ts, never
copied: the colors, the gradient, the font and the corner radii. What is
the email's own is stated here: how large it sets its type, how its card
stands out, which divider it draws, and which of the theme's own tokens
carry the touches that make it recognisable (Kanagawa's syntax hues,
GeoCities' rainbow, Melange's spice and warm shadow).
The colors of one style in one scheme, by role, each read from a token of its theme. The optional ones carry a style's particular touches.
-
accent: string
Section titles, ranks and button fills (
--color-accent). -
border: string
GeoCities' ridged border.
-
brand: string
Kanagawa's oniViolet wordmark; others use
text. -
card: string
The card holding the content (
--color-surface). -
date: string
Kanagawa's fujiGray dates; others use
muted. -
gradient: string[]
The colors of GeoCities' rainbow or Melange's spice, left to right.
-
link: string
--color-link. -
muted: string
--color-text-muted. -
onAccent: string
Text on an accent fill (
--color-on-accent). -
outer: string
The page around the card (
--color-bg). -
quote: string
Quoted comments and messages (
--color-text-secondaryunless set). -
rule: string
Dividers and hairlines (
--color-border). -
sec: string
--color-text-secondary. -
shadow: string
Melange's warm card shadow, translucent.
-
soft: string
Pills and the reset link's box, as the site's badges (
--color-badge-bg). -
text: string
--color-text.
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.
-
bar: boolean
Draws the palette's gradient as a bar along the card's top.
- dark: EmailPalette
-
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. -
frame: "none" | "hard" | "ridge" | "hairline" | "soft"
How the card stands out from the page.
-
heavy: number
The weight of titles of items, figures and names.
- light: EmailPalette
-
linkUnderline: boolean
Underlines links, for styles whose links are the color of the text.
-
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. -
rule: "hairline" | "thick" | "gradient"
The divider between sections; "gradient" draws the palette's.
-
scale: number
Multiplies every font size: Times sets its serif larger, Kanagawa its monospace smaller.
-
title: { size: number; weight: number; upper?: boolean; spacing?: string; accent?: boolean; }
The heading: its size in pixels, weight, and Brutalist's uppercase and spacing.
-
webFont: string
The Google Fonts
familyparameter of the web font, if it is one.
Every style's email look, keyed by its name, read once at load.
Usage
import * as mod from "api/mail/styles.ts";