Honor button typography and radius across email formats

packages/email-renderer/src/blocks.ts

@@ -40,7 +40,7 @@ export const ampLayoutClass = (node: BlockNode) =>
 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 })}}`;
+    return `.button.${ampLayoutClass(node)}{background-color:${buttonBackground(node, { brandLinkColor })};${buttonVisualCss(node)}}`;
   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";
@@ -106,6 +106,16 @@ const buttonBackground = (node: BlockNode, context: unknown) => {
   const brand = (context as { brandLinkColor?: string } | undefined)?.brandLinkColor;
   return override || (brand && brandColor("#2563eb").parse(brand).ok ? brand : "#2563eb");
 };
+const buttonVisuals = (node: BlockNode) => ({
+  color: safeCssValue(styleBase(node, "color"), /^(#[0-9a-f]{3,8}|rgba?\([0-9., %]+\))$/i) || "#ffffff",
+  fontSize: safeCssValue(styleBase(node, "fontSize"), /^\d+(?:\.\d+)?(?:px|rem|em|%)$/) || "16px",
+  fontWeight: safeCssValue(styleBase(node, "fontWeight"), /^(normal|bold|[1-9]00)$/) || "700",
+  radius: safeCssValue(styleBase(node, "borderRadius"), /^\d+(?:\.\d+)?(?:px|rem|em|%)$/) || "6px",
+});
+const buttonVisualCss = (node: BlockNode) => {
+  const values = buttonVisuals(node);
+  return `color:${values.color};font-size:${values.fontSize};font-weight:${values.fontWeight};border-radius:${values.radius}`;
+};
 const emailCell = (body: string, node: BlockNode) =>
   `<tr><td data-block-id="${html(node.id)}" style="padding:0;${semanticStyle(node)}">${body}</td></tr>`;
 
@@ -379,7 +389,7 @@ export const buttonBlock = leaf(
   {
     emailHtml: ({ node, context }) =>
       emailCell(
-        `<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>`,
+        `<table role="presentation"><tr><td bgcolor="${html(buttonBackground(node, context))}" style="border-radius:${html(buttonVisuals(node).radius)};"><a href="${html(attrs(node).href)}" style="${html(buttonVisualCss(node))};display:inline-block;font-family:inherit;padding:12px 20px;text-decoration:none;">${html(attrs(node).label)}</a></td></tr></table>`,
         node,
       ),
     ampEmail: ({ node }) =>
@@ -388,7 +398,7 @@ export const buttonBlock = leaf(
         node,
       ),
     mjml: ({ node, context }) =>
-      `<mj-button background-color="${html(buttonBackground(node, context))}" href="${html(attrs(node).href)}">${html(attrs(node).label)}</mj-button>`,
+      `<mj-button background-color="${html(buttonBackground(node, context))}" color="${html(buttonVisuals(node).color)}" font-size="${html(buttonVisuals(node).fontSize)}" font-weight="${html(buttonVisuals(node).fontWeight)}" border-radius="${html(buttonVisuals(node).radius)}" href="${html(attrs(node).href)}">${html(attrs(node).label)}</mj-button>`,
   },
   ({ node }) => `${String(attrs(node).label)}: ${String(attrs(node).href)}\n\n`,
 );