Lets the emails draw with the site's own values. It reads a style's design
tokens out of the stylesheets the client loads, src/tokens.css and then
src/themes/<style>.css, so styles.ts names a token wherever it needs a
color, a gradient, a font or a radius, and a change to a theme reaches its
emails with nothing copied to keep in step.
Mail clients know no custom properties, so a token comes back resolved for
one scheme: its var()s followed, its light-dark() picked, its
color-mix() computed. Only the rules that set tokens on the root element
are read (:root, the style's [data-style], and either of those with the
scheme's [data-color-scheme]); a theme states its forced schemes that way
beside each prefers-color-scheme block, so the media blocks are skipped.
Returns the tokens of style in scheme, read from the site's stylesheets
at the time of the call. styles.ts reads each style once, at load.
Returned by readTokens: the tokens of one style in one scheme, read as the kind of value each is.
-
color(): stringtoken: string,over?: string
Returns the color of
tokenas#rrggbb. A translucent one is laid overover(another token) first, as it shows on the site; withoutoverit staysrgba(), as a shadow's must. -
font(token: string): string
Returns the font stack of
token, single-quoted for astyleattribute. A family the site bundles as "X Variable" is named "X", as a mail client or Google Fonts knows it. -
px(token: string): number
Returns the length of
tokenin pixels. -
stops(token: string): string[]
Returns the colors of the gradient
token, in order, without positions. -
value(token: string): string
Returns the resolved value of
token, or throws when it isn't set.
A scheme a token is resolved for. "auto" is drawn from both.
Usage
import * as mod from "api/mail/theme-tokens.ts";