feat: markdown in email body for mailing and transactional

assets/mjml/layout.mjml

@@ -19,7 +19,15 @@
                 font-size: 20px;
                 line-height: 24px;
                 margin-bottom: 0;
-                padding-bottom: 0;
+                /* Was 0 while an h2 only ever preceded a p, which brings its own spacing. */
+                padding-bottom: 8px;
+            }
+            h3 {
+                font-weight: bold;
+                font-size: 17px;
+                line-height: 22px;
+                margin-bottom: 0;
+                padding-bottom: 4px;
             }
             p {
                 font-size: 16px;
@@ -48,6 +56,18 @@
             strong {
                 font-weight: bold;
             }
+            em {
+                font-style: italic;
+            }
+            ul, ol {
+                /* Margin, not padding: Outlook on Windows renders list padding unreliably. */
+                margin: 0 0 16px 24px;
+                padding: 0;
+                font-size: 16px;
+            }
+            li {
+                padding-bottom: 4px;
+            }
         </mj-style>
     </mj-head>
     <mj-body background-color="#666666">
@@ -70,8 +90,19 @@
                     </h2>
                     <p>
                         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto culpa delectus dolores
-                        <strong>earum eius fugiat in nesciunt quas quidem vitae</strong>?
+                        <strong>earum eius fugiat in nesciunt quas quidem vitae</strong>, <em>eius fugiat</em>?
                     </p>
+                    <ul>
+                        <li>Lorem ipsum dolor</li>
+                        <li>Consectetur adipisicing elit</li>
+                    </ul>
+                    <h3>
+                        Lorem ipsum
+                    </h3>
+                    <ol>
+                        <li>Lorem ipsum dolor</li>
+                        <li>Consectetur adipisicing elit</li>
+                    </ol>
                     <p>
                         <a href="#" class="button">
                             Button

assets/styles/_components.css

@@ -6,3 +6,4 @@
 @import "components/toast.css";
 @import "components/tooltip.css";
 @import "components/timeline.css";
+@import "components/mail-body.css";

assets/styles/components/mail-body.css

@@ -0,0 +1,41 @@
+/*
+ * Mirrors the rules the mail layout carries in assets/mjml/layout.mjml, so both admin
+ * previews show what the rendered mail will look like. Kept out of Tailwind's typography
+ * plugin on purpose: prose brings its own type scale, and the point here is to match the
+ * mail rather than to look good on its own.
+ */
+.mail-body > p {
+    @apply pb-4;
+}
+
+.mail-body h2 {
+    @apply text-xl pb-2;
+}
+
+.mail-body h3 {
+    @apply text-lg font-bold pb-1;
+}
+
+.mail-body strong {
+    @apply font-bold;
+}
+
+.mail-body em {
+    @apply italic;
+}
+
+.mail-body ul {
+    @apply list-disc ml-6 pb-4;
+}
+
+.mail-body ol {
+    @apply list-decimal ml-6 pb-4;
+}
+
+.mail-body li {
+    @apply pb-1;
+}
+
+.mail-body a {
+    @apply underline;
+}