fix(email): inherit button brand colors across render targets

packages/email-renderer/src/blocks.ts

@@ -35,8 +35,10 @@ const attrs = (node: BlockNode) => node.props as Record<string, unknown>;
 export const ampLayoutClass = (node: BlockNode) =>
   "wrn-layout-" + Array.from(node.id, char => char.codePointAt(0)!.toString(16)).join("-");
 
-export function ampLayoutCss(node: BlockNode): string {
+export function ampLayoutCss(node: BlockNode, brandLinkColor?: string): string {
   const props = attrs(node);
+  if (node.type === "content.button")
+    return `.button.${ampLayoutClass(node)}{background-color:${buttonBackground(node, { brandLinkColor })}}`;
   if (node.type === "layout.section") {
     const background = safeCssValue(props.background, /^(#[0-9a-f]{3,8}|rgba?\([0-9., %]+\))$/i) || "#ffffff";
     const padding = safeCssValue(props.padding, /^\d+(?:\.\d+)?(?:px|rem|em|%)?(?:\s+\d+(?:\.\d+)?(?:px|rem|em|%)?){0,3}$/) || "24px";
@@ -97,6 +99,11 @@ const semanticStyle = (node: BlockNode) => {
   if (weight) declarations.push(`font-weight:${weight}`);
   return declarations.join(";");
 };
+const buttonBackground = (node: BlockNode, context: unknown) => {
+  const override = safeCssValue(styleBase(node, "backgroundColor"), /^(#[0-9a-f]{3,8}|rgba?\([0-9., %]+\))$/i);
+  const brand = (context as { brandLinkColor?: string } | undefined)?.brandLinkColor;
+  return override || (brand && brandColor("#2563eb").parse(brand).ok ? brand : "#2563eb");
+};
 const emailCell = (body: string, node: BlockNode) =>
   `<tr><td data-block-id="${html(node.id)}" style="padding:0;${semanticStyle(node)}">${body}</td></tr>`;
 
@@ -166,7 +173,7 @@ export const sectionBlock = defineBlock({
   renderers: {
     emailHtml: ({ node, slots }) =>
       emailCell(
-        `<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="background:${html(attrs(node).background)};padding:${html(attrs(node).padding)};"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">${slots.content}</table></td></tr></table>`,
+        `<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="background:${html(attrs(node).background ?? "#ffffff")};padding:${html(attrs(node).padding ?? "24px")};"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">${slots.content}</table></td></tr></table>`,
         node,
       ),
     ampEmail: ({ node, slots }) =>
@@ -179,7 +186,7 @@ export const sectionBlock = defineBlock({
       const body = children.length === 1 && children[0]?.type === "layout.columns"
         ? slots.content
         : `<mj-column>${slots.content}</mj-column>`;
-      return `<mj-section background-color="${html(attrs(node).background)}" padding="${html(attrs(node).padding)}">${body}</mj-section>`;
+      return `<mj-section background-color="${html(attrs(node).background ?? "#ffffff")}" padding="${html(attrs(node).padding ?? "24px")}">${body}</mj-section>`;
     },
   },
   textRenderer: ({ slots }) => `${slots.content}\n`,
@@ -358,18 +365,18 @@ export const buttonBlock = leaf(
     href: safeUrl({ schemes: ["https", "mailto"] }),
   }) as never,
   {
-    emailHtml: ({ node }) =>
+    emailHtml: ({ node, context }) =>
       emailCell(
-        `<table role="presentation"><tr><td bgcolor="#2563eb" style="border-radius:6px;"><a href="${html(attrs(node).href)}" style="color:#ffffff;display:inline-block;font-family:inherit;font-weight:700;padding:12px 20px;text-decoration:none;">${html(attrs(node).label)}</a></td></tr></table>`,
+        `<table role="presentation"><tr><td bgcolor="${html(buttonBackground(node, context))}" style="border-radius:6px;"><a href="${html(attrs(node).href)}" style="color:#ffffff;display:inline-block;font-family:inherit;font-weight:700;padding:12px 20px;text-decoration:none;">${html(attrs(node).label)}</a></td></tr></table>`,
         node,
       ),
     ampEmail: ({ node }) =>
       emailCell(
-        `<a class="button" href="${html(attrs(node).href)}">${html(attrs(node).label)}</a>`,
+        `<a class="button ${ampLayoutClass(node)}" href="${html(attrs(node).href)}">${html(attrs(node).label)}</a>`,
         node,
       ),
-    mjml: ({ node }) =>
-      `<mj-button href="${html(attrs(node).href)}">${html(attrs(node).label)}</mj-button>`,
+    mjml: ({ node, context }) =>
+      `<mj-button background-color="${html(buttonBackground(node, context))}" href="${html(attrs(node).href)}">${html(attrs(node).label)}</mj-button>`,
   },
   ({ node }) => `${String(attrs(node).label)}: ${String(attrs(node).href)}\n\n`,
 );