@ctrl-ui/react 0.8.2 → 0.8.5

package/dist/email/templates.js

@@ -1,31 +1,25 @@
-import { EmailButton, EmailHeading, EmailLayout, EmailLink, EmailText } from "./email.js";
+import { EmailBulletList, EmailButton, EmailCaption, EmailColumns, EmailDetailRow, EmailDivider, EmailHeading, EmailLayout, EmailLink, EmailOneTimeCode, EmailPanel, EmailSection, EmailText } from "./email.js";
+import { EmailBrandFooter, EmailBrandHeader } from "./email-brand.js";
+import { EmailCodeBlock, EmailInlineCode, EmailMarkdown } from "./email-code.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Column, Hr, Img, Row, Section } from "react-email";
+import { Column, Img, Row } from "react-email";
 //#region src/email/templates.tsx
-function EmailFooter({ brand, children }) {
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
-		/* @__PURE__ */ jsx(Hr, { className: "my-6 border-0 border-t border-solid border-t-border" }),
-		/* @__PURE__ */ jsx(EmailText, {
-			tone: "muted",
-			className: "mb-1 text-caption",
-			children: brand
-		}),
-		/* @__PURE__ */ jsx(EmailText, {
-			tone: "muted",
-			className: "mb-0 text-caption",
-			children
-		})
-	] });
-}
-function InvitationEmail({ theme, brand, footer, inviter, workspace, inviteUrl }) {
-	return /* @__PURE__ */ jsxs(EmailLayout, {
+function InvitationEmail({ theme, variant, head, brand, browserUrl, footer, inviter, workspace, inviteUrl }) {
+	const layout = {
 		theme,
+		variant,
+		head,
+		footer: /* @__PURE__ */ jsx(EmailBrandFooter, { footer }),
+		footerPlacement: footer.placement
+	};
+	return /* @__PURE__ */ jsxs(EmailLayout, {
+		...layout,
 		preview: `${inviter} invited you to ${workspace}`,
 		children: [
-			/* @__PURE__ */ jsx(EmailText, {
-				tone: "muted",
-				className: "mb-8 text-caption",
-				children: brand
+			/* @__PURE__ */ jsx(EmailBrandHeader, {
+				brand,
+				browserUrl,
+				colorScheme: theme.colorScheme
 			}),
 			/* @__PURE__ */ jsx(EmailHeading, { children: "A place for your next idea." }),
 			/* @__PURE__ */ jsxs(EmailText, { children: [
@@ -34,36 +28,43 @@ function InvitationEmail({ theme, brand, footer, inviter, workspace, inviteUrl }
 				/* @__PURE__ */ jsx("strong", { children: workspace }),
 				". Bring your work, share a little inspiration, and make something together."
 			] }),
-			/* @__PURE__ */ jsxs(Section, {
-				className: "my-6 rounded-panel bg-muted p-5",
-				children: [/* @__PURE__ */ jsx(EmailHeading, {
-					as: "h3",
-					children: "Your team is waiting"
-				}), /* @__PURE__ */ jsx(EmailText, {
-					className: "mb-0",
-					children: "Projects, conversations, and the details that move work forward. All in one shared space."
-				})]
-			}),
+			/* @__PURE__ */ jsxs(EmailPanel, { children: [/* @__PURE__ */ jsx(EmailHeading, {
+				as: "h3",
+				children: "Your team is waiting"
+			}), /* @__PURE__ */ jsx(EmailText, {
+				className: "mb-0",
+				children: "Projects, conversations, and the details that move work forward. All in one shared space."
+			})] }),
 			/* @__PURE__ */ jsxs(EmailButton, {
 				href: inviteUrl,
+				width: "full",
 				children: ["Join ", workspace]
-			}),
-			/* @__PURE__ */ jsx(EmailFooter, {
-				brand,
-				children: footer
 			})
 		]
 	});
 }
-function ProductEmail({ theme, brand, footer, title, description, imageUrl, imageAlt, actionUrl }) {
-	return /* @__PURE__ */ jsxs(EmailLayout, {
+function ProductEmail({ theme, variant, head, brand, browserUrl, footer, title, description, imageUrl, imageAlt, highlights = [], actionUrl }) {
+	const layout = {
 		theme,
+		variant,
+		head,
+		footer: /* @__PURE__ */ jsx(EmailBrandFooter, { footer }),
+		footerPlacement: footer.placement
+	};
+	return /* @__PURE__ */ jsxs(EmailLayout, {
+		...layout,
 		preview: title,
 		children: [
-			/* @__PURE__ */ jsxs(EmailText, {
-				tone: "muted",
-				className: "mb-6 text-caption",
-				children: [brand, " / NEW RELEASE"]
+			/* @__PURE__ */ jsx(EmailBrandHeader, {
+				brand,
+				browserUrl,
+				colorScheme: theme.colorScheme,
+				align: "center"
+			}),
+			/* @__PURE__ */ jsx(EmailCaption, {
+				align: "center",
+				className: "mb-6",
+				children: "ANNOUNCEMENT"
 			}),
 			/* @__PURE__ */ jsx(Img, {
 				src: imageUrl,
@@ -71,45 +72,74 @@ function ProductEmail({ theme, brand, footer, title, description, imageUrl, imag
 				width: "552",
 				className: "mb-6 block h-auto w-full rounded-scene"
 			}),
-			/* @__PURE__ */ jsx(EmailHeading, { children: title }),
-			/* @__PURE__ */ jsx(EmailText, { children: description }),
-			/* @__PURE__ */ jsx(EmailButton, {
-				href: actionUrl,
-				children: "Explore what’s new"
+			/* @__PURE__ */ jsx(EmailHeading, {
+				size: "display",
+				align: "center",
+				children: title
 			}),
-			/* @__PURE__ */ jsx(EmailFooter, {
-				brand,
-				children: footer
+			/* @__PURE__ */ jsx(EmailText, {
+				align: "center",
+				children: description
+			}),
+			/* @__PURE__ */ jsx(EmailColumns, { children: highlights.map((highlight) => /* @__PURE__ */ jsxs(EmailSection, {
+				align: "center",
+				children: [/* @__PURE__ */ jsx(EmailHeading, {
+					as: "h4",
+					align: "center",
+					className: "mb-1",
+					children: highlight.title
+				}), /* @__PURE__ */ jsx(EmailCaption, {
+					align: "center",
+					className: "mb-0",
+					children: highlight.description
+				})]
+			}, highlight.title)) }),
+			/* @__PURE__ */ jsx(EmailSection, {
+				align: "center",
+				children: /* @__PURE__ */ jsx(EmailButton, {
+					href: actionUrl,
+					children: "Explore what’s new"
+				})
 			})
 		]
 	});
 }
-function EditorialEmail({ theme, brand, footer, title, description, imageUrl, imageAlt, articleUrl }) {
-	return /* @__PURE__ */ jsxs(EmailLayout, {
+function EditorialEmail({ theme, variant, head, brand, browserUrl, footer, title, description, imageUrl, imageAlt, articleUrl }) {
+	const layout = {
 		theme,
+		variant,
+		head,
+		footer: /* @__PURE__ */ jsx(EmailBrandFooter, { footer }),
+		footerPlacement: footer.placement
+	};
+	return /* @__PURE__ */ jsxs(EmailLayout, {
+		...layout,
 		preview: title,
 		children: [
-			/* @__PURE__ */ jsxs(EmailText, {
-				tone: "muted",
-				className: "mb-6 text-caption",
-				children: [brand, " / IN GOOD COMPANY"]
-			}),
-			/* @__PURE__ */ jsx(EmailHeading, { children: "Fresh perspectives." }),
-			/* @__PURE__ */ jsxs(Row, { children: [/* @__PURE__ */ jsx(Column, {
-				width: "36%",
-				className: "align-top",
-				children: /* @__PURE__ */ jsx(Img, {
+			/* @__PURE__ */ jsx(EmailBrandHeader, {
+				brand,
+				browserUrl,
+				colorScheme: theme.colorScheme
+			}),
+			/* @__PURE__ */ jsx(EmailCaption, {
+				className: "mb-6",
+				children: "IN GOOD COMPANY"
+			}),
+			/* @__PURE__ */ jsx(EmailHeading, {
+				size: "heading-2",
+				children: "Fresh perspectives."
+			}),
+			/* @__PURE__ */ jsxs(EmailColumns, {
+				widths: ["36%", "64%"],
+				children: [/* @__PURE__ */ jsx(Img, {
 					src: imageUrl,
 					alt: imageAlt,
 					width: "198",
 					className: "block h-auto w-full rounded-scene"
-				})
-			}), /* @__PURE__ */ jsxs(Column, {
-				width: "64%",
-				className: "pl-5 align-top",
-				children: [
+				}), /* @__PURE__ */ jsxs(EmailSection, { children: [
 					/* @__PURE__ */ jsx(EmailHeading, {
 						as: "h2",
+						size: "heading-3",
 						children: title
 					}),
 					/* @__PURE__ */ jsx(EmailText, { children: description }),
@@ -117,31 +147,45 @@ function EditorialEmail({ theme, brand, footer, title, description, imageUrl, im
 						href: articleUrl,
 						children: "Read the story"
 					})
-				]
-			})] }),
-			/* @__PURE__ */ jsx(EmailFooter, {
-				brand,
-				children: footer
+				] })]
 			})
 		]
 	});
 }
-function NewsletterEmail({ theme, brand, footer, articles, unsubscribeUrl }) {
-	return /* @__PURE__ */ jsxs(EmailLayout, {
+function NewsletterEmail({ theme, variant, head, brand, browserUrl, footer, articles }) {
+	const layout = {
 		theme,
+		variant,
+		head,
+		footer: /* @__PURE__ */ jsx(EmailBrandFooter, { footer }),
+		footerPlacement: footer.placement
+	};
+	return /* @__PURE__ */ jsxs(EmailLayout, {
+		...layout,
 		preview: "A few things worth making time for.",
 		children: [
-			/* @__PURE__ */ jsxs(EmailText, {
-				tone: "muted",
-				className: "mb-6 text-caption",
-				children: [brand, " / THE WEEKLY EDIT"]
+			/* @__PURE__ */ jsx(EmailBrandHeader, {
+				brand,
+				browserUrl,
+				colorScheme: theme.colorScheme,
+				align: "center"
+			}),
+			/* @__PURE__ */ jsx(EmailCaption, {
+				align: "center",
+				className: "mb-6",
+				children: "THE WEEKLY EDIT"
+			}),
+			/* @__PURE__ */ jsx(EmailHeading, {
+				align: "center",
+				children: "A little room for inspiration."
 			}),
-			/* @__PURE__ */ jsx(EmailHeading, { children: "A little room for inspiration." }),
 			/* @__PURE__ */ jsx(EmailText, {
+				align: "center",
 				tone: "muted",
+				className: "mb-8",
 				children: "A few things worth making time for. Stories, spaces, and ideas from our community."
 			}),
-			articles.map((article) => /* @__PURE__ */ jsxs(Section, {
+			articles.map((article) => /* @__PURE__ */ jsxs(EmailSection, {
 				className: "mb-6",
 				children: [
 					/* @__PURE__ */ jsx(Img, {
@@ -160,69 +204,223 @@ function NewsletterEmail({ theme, brand, footer, articles, unsubscribeUrl }) {
 						children: "Read the story"
 					})
 				]
-			}, article.href)),
-			/* @__PURE__ */ jsx(EmailFooter, {
-				brand,
-				children: footer
-			}),
-			/* @__PURE__ */ jsx(EmailLink, {
-				href: unsubscribeUrl,
-				className: "text-caption",
-				children: "Unsubscribe"
-			})
+			}, article.href))
 		]
 	});
 }
-function SummaryEmail({ theme, brand, footer, period, metrics, details, dashboardUrl }) {
-	return /* @__PURE__ */ jsxs(EmailLayout, {
+function SummaryEmail({ theme, variant, head, brand, browserUrl, footer, period, metrics, details, dashboardUrl }) {
+	const layout = {
 		theme,
+		variant,
+		head,
+		footer: /* @__PURE__ */ jsx(EmailBrandFooter, { footer }),
+		footerPlacement: footer.placement
+	};
+	return /* @__PURE__ */ jsxs(EmailLayout, {
+		...layout,
 		preview: `Your team’s progress · ${period}`,
 		children: [
-			/* @__PURE__ */ jsxs(EmailText, {
-				tone: "muted",
-				className: "mb-6 text-caption",
-				children: [
-					brand,
-					" / ",
-					period
-				]
+			/* @__PURE__ */ jsx(EmailBrandHeader, {
+				brand,
+				browserUrl,
+				colorScheme: theme.colorScheme
+			}),
+			/* @__PURE__ */ jsx(EmailCaption, {
+				className: "mb-6",
+				children: period
+			}),
+			/* @__PURE__ */ jsx(EmailHeading, {
+				size: "heading-2",
+				children: "Good work adds up."
 			}),
-			/* @__PURE__ */ jsx(EmailHeading, { children: "Good work adds up." }),
 			/* @__PURE__ */ jsx(EmailText, { children: "Here’s what your team moved forward this week." }),
-			/* @__PURE__ */ jsx(Section, {
-				className: "my-6 rounded-panel bg-muted p-4",
+			/* @__PURE__ */ jsx(EmailPanel, {
+				className: "p-4",
 				children: /* @__PURE__ */ jsx(Row, {
 					className: "table-fixed",
 					children: metrics.map((metric) => /* @__PURE__ */ jsxs(Column, {
 						className: "px-2 align-top",
 						children: [/* @__PURE__ */ jsx(EmailText, {
+							align: "center",
 							className: "mb-1 text-heading-2 font-semibold",
 							children: metric.value
-						}), /* @__PURE__ */ jsx(EmailText, {
-							tone: "muted",
-							className: "mb-0 text-caption",
+						}), /* @__PURE__ */ jsx(EmailCaption, {
+							align: "center",
+							className: "mb-0",
 							children: metric.label
 						})]
 					}, metric.label))
 				})
 			}),
-			details.map((detail) => /* @__PURE__ */ jsxs(Row, {
-				className: "table-fixed",
-				children: [/* @__PURE__ */ jsx(Column, { children: /* @__PURE__ */ jsx(EmailText, { children: detail.label }) }), /* @__PURE__ */ jsx(Column, {
-					align: "right",
-					children: /* @__PURE__ */ jsx(EmailText, { children: detail.value })
-				})]
+			details.map((detail) => /* @__PURE__ */ jsx(EmailDetailRow, {
+				label: detail.label,
+				value: detail.value
 			}, detail.label)),
 			/* @__PURE__ */ jsx(EmailButton, {
 				href: dashboardUrl,
+				className: "mt-4",
 				children: "View your workspace"
+			})
+		]
+	});
+}
+function VerificationEmail({ theme, variant, head, brand, footer, code, expiresInMinutes, supportUrl }) {
+	const layout = {
+		theme,
+		variant,
+		head,
+		footer: /* @__PURE__ */ jsx(EmailBrandFooter, { footer }),
+		footerPlacement: footer.placement
+	};
+	return /* @__PURE__ */ jsxs(EmailLayout, {
+		...layout,
+		preview: `${code} is your verification code`,
+		children: [
+			/* @__PURE__ */ jsx(EmailBrandHeader, {
+				brand,
+				colorScheme: theme.colorScheme,
+				align: "center"
+			}),
+			/* @__PURE__ */ jsx(EmailHeading, {
+				size: "heading-2",
+				align: "center",
+				children: "Confirm your email address"
+			}),
+			/* @__PURE__ */ jsx(EmailText, {
+				align: "center",
+				children: "Enter this code to finish signing in. It works once, and only for this device."
+			}),
+			/* @__PURE__ */ jsx(EmailOneTimeCode, { children: code }),
+			/* @__PURE__ */ jsxs(EmailCaption, {
+				align: "center",
+				className: "mb-6",
+				children: [
+					"The code expires in ",
+					expiresInMinutes,
+					" minutes."
+				]
+			}),
+			/* @__PURE__ */ jsxs(EmailText, {
+				align: "center",
+				className: "mb-0",
+				children: [
+					"Didn’t ask for this code? Ignore this email, or ",
+					/* @__PURE__ */ jsx(EmailLink, {
+						href: supportUrl,
+						children: "tell our team"
+					}),
+					"."
+				]
+			})
+		]
+	});
+}
+function ReceiptEmail({ theme, variant, head, brand, footer, orderNumber, orderDate, lines, total, paymentMethod, invoiceUrl }) {
+	const layout = {
+		theme,
+		variant,
+		head,
+		footer: /* @__PURE__ */ jsx(EmailBrandFooter, { footer }),
+		footerPlacement: footer.placement
+	};
+	return /* @__PURE__ */ jsxs(EmailLayout, {
+		...layout,
+		preview: `Receipt ${orderNumber} · ${total}`,
+		children: [
+			/* @__PURE__ */ jsx(EmailBrandHeader, {
+				brand,
+				colorScheme: theme.colorScheme
+			}),
+			/* @__PURE__ */ jsx(EmailCaption, {
+				className: "mb-6",
+				children: "RECEIPT"
+			}),
+			/* @__PURE__ */ jsx(EmailHeading, {
+				size: "heading-3",
+				children: "Thanks for your order."
+			}),
+			/* @__PURE__ */ jsxs(EmailText, { children: [
+				"Order ",
+				/* @__PURE__ */ jsx(EmailInlineCode, { children: orderNumber }),
+				" was confirmed on ",
+				orderDate,
+				". Keep this receipt for your records."
+			] }),
+			/* @__PURE__ */ jsxs(EmailPanel, { children: [
+				lines.map((line) => /* @__PURE__ */ jsx(EmailDetailRow, {
+					label: line.label,
+					value: line.value
+				}, line.label)),
+				/* @__PURE__ */ jsx(EmailDivider, { className: "my-3" }),
+				/* @__PURE__ */ jsx(EmailDetailRow, {
+					label: "Total",
+					value: total,
+					emphasis: true
+				})
+			] }),
+			/* @__PURE__ */ jsxs(EmailCaption, {
+				className: "mb-6",
+				children: [
+					"Paid with ",
+					paymentMethod,
+					"."
+				]
 			}),
-			/* @__PURE__ */ jsx(EmailFooter, {
+			/* @__PURE__ */ jsx(EmailButton, {
+				href: invoiceUrl,
+				children: "View invoice"
+			})
+		]
+	});
+}
+function ReleaseNotesEmail({ theme, variant, head, brand, browserUrl, footer, version, summary, sections, migration, changelogUrl }) {
+	const layout = {
+		theme,
+		variant,
+		head,
+		footer: /* @__PURE__ */ jsx(EmailBrandFooter, { footer }),
+		footerPlacement: footer.placement
+	};
+	return /* @__PURE__ */ jsxs(EmailLayout, {
+		...layout,
+		preview: `What shipped in ${version}`,
+		children: [
+			/* @__PURE__ */ jsx(EmailBrandHeader, {
 				brand,
-				children: footer
+				browserUrl,
+				colorScheme: theme.colorScheme
+			}),
+			/* @__PURE__ */ jsxs(EmailCaption, {
+				className: "mb-6",
+				children: ["RELEASE ", version]
+			}),
+			/* @__PURE__ */ jsx(EmailHeading, {
+				size: "heading-2",
+				children: "What shipped this month."
+			}),
+			/* @__PURE__ */ jsx(EmailText, { children: summary }),
+			sections.map((section) => /* @__PURE__ */ jsxs(EmailSection, {
+				className: "mb-4",
+				children: [/* @__PURE__ */ jsx(EmailHeading, {
+					as: "h3",
+					children: section.title
+				}), /* @__PURE__ */ jsx(EmailBulletList, { items: section.changes })]
+			}, section.title)),
+			migration ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(EmailMarkdown, {
+				theme,
+				variant,
+				children: migration.notes
+			}), /* @__PURE__ */ jsx(EmailCodeBlock, {
+				theme,
+				language: migration.language,
+				code: migration.code
+			})] }) : null,
+			/* @__PURE__ */ jsx(EmailButton, {
+				href: changelogUrl,
+				children: "Read the full changelog"
 			})
 		]
 	});
 }
 //#endregion
-export { EditorialEmail, InvitationEmail, NewsletterEmail, ProductEmail, SummaryEmail };
+export { EditorialEmail, InvitationEmail, NewsletterEmail, ProductEmail, ReceiptEmail, ReleaseNotesEmail, SummaryEmail, VerificationEmail };

package/dist/email/theme.d.ts

@@ -1,19 +1,23 @@
 //#region src/email/theme.d.ts
 declare const emailColors: readonly ["background", "foreground", "card", "card-foreground", "primary", "primary-foreground", "primary-text", "muted", "muted-foreground", "border"];
-declare const headingSizes: readonly ["heading-1", "heading-2", "heading-3", "heading-4"];
+declare const titleSizes: readonly ["display", "heading-1", "heading-2", "heading-3", "heading-4"];
 type EmailColor = (typeof emailColors)[number];
-type EmailHeadingSize = (typeof headingSizes)[number];
+type EmailTitleSize = (typeof titleSizes)[number];
+type EmailCodeToken = "foreground" | "comment" | "keyword" | "string" | "function" | "constant" | "punctuation" | "parameter";
 type EmailTypeStyle = {
   fontSize: string;
   lineHeight: string;
   fontWeight: string;
   letterSpacing: string;
 };
-type EmailTheme = {
+export type EmailColorScheme = "light" | "dark";
+export type EmailTheme = {
+  colorScheme: EmailColorScheme;
   colors: Record<EmailColor, string>;
   fonts: {
     body: string;
     display: string;
+    mono: string;
   };
   radii: {
     control: string;
@@ -27,9 +31,12 @@ type EmailTheme = {
     fontSize: string;
     lineHeight: string;
   };
-  text: Record<EmailHeadingSize | "body" | "caption", EmailTypeStyle>;
+  text: Record<EmailTitleSize | "body" | "caption", EmailTypeStyle>;
+  code: Record<EmailCodeToken, string>;
 };
-declare function createEmailTheme(tokens: ReadonlyMap<string, string>, rootFontSize?: number): EmailTheme;
-declare function emailThemeFromCss(cssSources: string[], mode?: "light" | "dark", rootFontSize?: number): EmailTheme;
-//#endregion
-export { EmailTheme, createEmailTheme, emailThemeFromCss };
+export declare function createEmailTheme(tokens: ReadonlyMap<string, string>, { rootFontSize, colorScheme }?: {
+  rootFontSize?: number;
+  colorScheme?: EmailColorScheme;
+}): EmailTheme;
+export declare function emailThemeFromCss(cssSources: string[], mode?: EmailColorScheme, rootFontSize?: number): EmailTheme;
+//#endregion

package/dist/email/theme.js

@@ -25,7 +25,7 @@ function numericStyle(name, tokens, fallback) {
 	if (!/^\d*\.?\d+(px|em)?$/.test(value)) throw new Error(`Email theme: unsupported ${name}: ${value}.`);
 	return value;
 }
-function createEmailTheme(tokens, rootFontSize = 16) {
+function createEmailTheme(tokens, { rootFontSize = 16, colorScheme = "light" } = {}) {
 	if (!Number.isFinite(rootFontSize) || rootFontSize <= 0) throw new Error("Email theme: rootFontSize must be a positive pixel value.");
 	function lengthPixels(name, allowZero = false) {
 		return emailLengthPixels(name, tokenValue(name, tokens), rootFontSize, allowZero);
@@ -43,11 +43,17 @@ function createEmailTheme(tokens, rootFontSize = 16) {
 	if (background.alpha !== 1) throw new Error("Email theme: --background must be opaque.");
 	const card = composite(color("card"), background);
 	const primary = composite(color("primary"), card);
+	const muted = composite(color("muted"), card);
 	function opaqueColor(name, surface = card) {
 		const result = composite(color(name), surface);
 		return `rgb(${Math.round(result.r)}, ${Math.round(result.g)}, ${Math.round(result.b)})`;
 	}
-	function heading(name) {
+	function codeColor(token) {
+		const syntaxToken = token === "foreground" ? "code-foreground" : `code-token-${token}`;
+		const withoutCodeCss = token === "comment" ? "muted-foreground" : "card-foreground";
+		return opaqueColor(tokens.has(`--${syntaxToken}`) ? syntaxToken : withoutCodeCss, muted);
+	}
+	function title(name) {
 		const spacing = tokenValue(`--text-${name}--letter-spacing`, tokens, "0");
 		if (!/^-?\d*\.?\d+(px|em)?$/.test(spacing)) throw new Error(`Email theme: unsupported ${name} letter spacing: ${spacing}.`);
 		return {
@@ -58,6 +64,7 @@ function createEmailTheme(tokens, rootFontSize = 16) {
 		};
 	}
 	return {
+		colorScheme,
 		colors: {
 			background: opaqueColor("background", background),
 			foreground: opaqueColor("foreground", background),
@@ -72,7 +79,8 @@ function createEmailTheme(tokens, rootFontSize = 16) {
 		},
 		fonts: {
 			body: tokenValue("--font-body", tokens),
-			display: tokenValue("--font-display", tokens)
+			display: tokenValue("--font-display", tokens),
+			mono: tokenValue("--font-mono", tokens)
 		},
 		radii: {
 			control: `${lengthPixels("--radius-control", true)}px`,
@@ -99,15 +107,29 @@ function createEmailTheme(tokens, rootFontSize = 16) {
 				fontWeight: "400",
 				letterSpacing: "0"
 			},
-			"heading-1": heading("heading-1"),
-			"heading-2": heading("heading-2"),
-			"heading-3": heading("heading-3"),
-			"heading-4": heading("heading-4")
+			display: title("display"),
+			"heading-1": title("heading-1"),
+			"heading-2": title("heading-2"),
+			"heading-3": title("heading-3"),
+			"heading-4": title("heading-4")
+		},
+		code: {
+			foreground: codeColor("foreground"),
+			comment: codeColor("comment"),
+			keyword: codeColor("keyword"),
+			string: codeColor("string"),
+			function: codeColor("function"),
+			constant: codeColor("constant"),
+			punctuation: codeColor("punctuation"),
+			parameter: codeColor("parameter")
 		}
 	};
 }
 function emailThemeFromCss(cssSources, mode = "light", rootFontSize = 16) {
-	return createEmailTheme(tokenMaps(cssSources)[mode], rootFontSize);
+	return createEmailTheme(tokenMaps(cssSources)[mode], {
+		rootFontSize,
+		colorScheme: mode
+	});
 }
 //#endregion
 export { createEmailTheme, emailThemeFromCss };