feat(email-renderer): add global brand styling

packages/email-renderer/src/blocks.ts

@@ -44,6 +44,12 @@ export const emailDocumentBlock = defineBlock({
     props: object({
       width: string({ default: "600" }),
       background: string({ default: "#f3f4f6" }),
+      contentBackground: string({ default: "#ffffff" }),
+      fontFamily: string({ default: "Arial, sans-serif" }),
+      textColor: string({ default: "#111827" }),
+      linkColor: string({ default: "#2563eb" }),
+      logoUrl: safeUrl({ schemes: ["https"], optional: true }),
+      logoAlt: string({ max: 300, default: "" }),
     }) as never,
     styles,
     slots: { content: contentSlot },
@@ -52,13 +58,13 @@ export const emailDocumentBlock = defineBlock({
     id: id(),
     type: "layout.email-document",
     version: 1,
-    props: { width: "600", background: "#f3f4f6" },
+    props: { width: "600", background: "#f3f4f6", contentBackground: "#ffffff", fontFamily: "Arial, sans-serif", textColor: "#111827", linkColor: "#2563eb", logoUrl: "", logoAlt: "" },
     styles: {},
     slots: { content: [] },
   }),
   renderers: {
     emailHtml: ({ node, slots }) =>
-      `<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;background:${html(attrs(node).background)};"><tr><td align="center"><table role="presentation" class="wrn-email" width="${html(attrs(node).width)}" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;max-width:100%;width:${html(attrs(node).width)}px;">${slots.content}</table></td></tr></table>`,
+      `<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;background:${html(attrs(node).background ?? "#f3f4f6")};color:${html(attrs(node).textColor ?? "#111827")};font-family:${html(attrs(node).fontFamily ?? "Arial, sans-serif")};"><tr><td align="center">${attrs(node).logoUrl ? `<img src="${html(attrs(node).logoUrl)}" alt="${html(attrs(node).logoAlt)}" style="display:block;height:auto;max-width:200px;padding:20px;" />` : ""}<table role="presentation" class="wrn-email" width="${html(attrs(node).width)}" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;max-width:100%;width:${html(attrs(node).width)}px;background:${html(attrs(node).contentBackground ?? "#ffffff")};color:${html(attrs(node).textColor ?? "#111827")};font-family:${html(attrs(node).fontFamily ?? "Arial, sans-serif")};">${slots.content}</table></td></tr></table>`,
     ampEmail: ({ node, slots }) =>
       `<table role="presentation" width="100%" class="email-bg"><tr><td align="center"><table role="presentation" width="${html(attrs(node).width)}" class="email-body">${slots.content}</table></td></tr></table>`,
     mjml: ({ node, slots }) =>