From a576ae9fb824525f7d9cbcd61fc49f83c8801d9d Mon Sep 17 00:00:00 2001
From: Karl Stolley <karl@zulip.com>
Date: Wed, 30 Apr 2025 15:47:40 -0500
Subject: [PATCH] markdown: Restyle block quotes to spec.

---
 web/styles/app_variables.css     |  4 ++++
 web/styles/rendered_markdown.css | 22 ++++++++++++++--------
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/web/styles/app_variables.css b/web/styles/app_variables.css
index 303a567c89..aeab52ac89 100644
--- a/web/styles/app_variables.css
+++ b/web/styles/app_variables.css
@@ -1297,6 +1297,10 @@
         hsl(0deg 0% 15%),
         var(--color-text-default)
     );
+    --color-text-message-blockquote-border: light-dark(
+        hsl(0deg 0% 15% / 25%),
+        hsl(0deg 0% 87% / 40%)
+    );
     --color-text-message-header-archived: hsl(0deg 0% 50%);
     --color-text-message-view-header: light-dark(
         hsl(0deg 0% 20% / 100%),
diff --git a/web/styles/rendered_markdown.css b/web/styles/rendered_markdown.css
index d43e2eeb6f..c6ac3cb78b 100644
--- a/web/styles/rendered_markdown.css
+++ b/web/styles/rendered_markdown.css
@@ -123,18 +123,24 @@
 
     /* Formatting for blockquotes */
     & blockquote {
-        padding-left: 5px;
-        margin: 0 0 var(--markdown-interelement-space-px) 10px;
-        border-left: 5px solid hsl(0deg 0% 87%);
+        /* This keeps the blockquote text block
+           aligned with list-item text blocks.
+           12.4px at 16px/1em */
+        padding: 0 0 0 0.775em;
+        /* We want to keep the border roughly centered
+           with bullets and single-digit list markers.
+           3.5px at 16px/1em */
+        margin: 0 0 var(--markdown-interelement-space-px) 0.2188em;
+        border-left: 4px solid var(--color-text-message-blockquote-border);
     }
 
     &.rtl blockquote {
-        padding-left: unset;
-        padding-right: 5px;
-        margin-left: unset;
-        margin-right: 10px;
+        /* 12.4px at 16px/1em */
+        padding: 0 0.775em 0 0;
+        /* 3.5px at 16px/1em */
+        margin: 0 0.2188em var(--markdown-interelement-space-px) 0;
         border-left: unset;
-        border-right: 5px solid hsl(0deg 0% 87%);
+        border-right: 4px solid hsl(0deg 0% 65%);
     }
 
     /* Formatting for Markdown tables */