From 2811f2fe0fc2af8f8fc370e9be63bf5c0c45accb Mon Sep 17 00:00:00 2001
From: Karl Stolley <karl@zulip.com>
Date: Wed, 27 Sep 2023 16:16:51 -0500
Subject: [PATCH] markdown: Implement redesigned Markdown code styles.

Fixes a part of #22022.
---
 web/styles/rendered_markdown.css | 26 +++++++++++++++++----
 web/styles/zulip.css             | 40 ++++++++++++++++++++++----------
 2 files changed, 49 insertions(+), 17 deletions(-)

diff --git a/web/styles/rendered_markdown.css b/web/styles/rendered_markdown.css
index 31fcd1c19b..2f464ecc9c 100644
--- a/web/styles/rendered_markdown.css
+++ b/web/styles/rendered_markdown.css
@@ -690,6 +690,8 @@
         padding: 0;
         white-space: inherit;
         overflow-x: scroll;
+        /* Unset to avoid compounding alpha values */
+        background-color: unset;
         color: inherit;
         border: 0;
     }
@@ -702,7 +704,7 @@
         unicode-bidi: embed;
         direction: ltr;
         white-space: pre-wrap;
-        padding: 0 4px;
+        padding: 0 3px;
         color: var(--color-markdown-code-text);
         background-color: var(--color-markdown-code-background);
         border: 1px solid var(--color-markdown-code-border);
@@ -740,6 +742,24 @@
     }
 }
 
+.group_mention,
+.direct_mention {
+    & .rendered_markdown pre {
+        background-color: var(--color-markdown-pre-background-mentions);
+        border-color: var(--color-markdown-pre-border-mentions);
+    }
+
+    & .rendered_markdown code {
+        background-color: var(--color-markdown-code-background-mentions);
+        border-color: var(--color-markdown-code-border-mentions);
+    }
+
+    & .rendered_markdown pre code {
+        background-color: unset;
+        border-color: unset;
+    }
+}
+
 .preview_content .copy_codeblock {
     /* We avoid displaying copy_codeblock button in previews, because it
        feels odd given that you can just copy-paste the code out of
@@ -802,13 +822,9 @@
     border: none !important;
     background: none !important;
 
-    & code,
     & pre {
         color: var(--color-markdown-pre-text);
         background-color: var(--color-markdown-pre-background);
-    }
-
-    & pre {
         border: 1px solid var(--color-markdown-pre-border);
     }
 }
diff --git a/web/styles/zulip.css b/web/styles/zulip.css
index a38b51b4c3..8684acd970 100644
--- a/web/styles/zulip.css
+++ b/web/styles/zulip.css
@@ -284,14 +284,22 @@ body {
 
     /* Markdown code colors */
     --color-markdown-code-text: hsl(0deg 0% 0%);
-    --color-markdown-code-background: hsl(0deg 0% 100%);
-    --color-markdown-code-border: hsl(240deg 13% 90%);
-    --color-markdown-pre-text: hsl(0deg 0% 20%);
-    --color-markdown-pre-background: hsl(0deg 0% 100%);
-    --color-markdown-pre-border: hsl(0deg 0% 0% / 15%);
+    --color-markdown-code-background: hsl(208deg 5% 95% / 85%);
+    --color-markdown-code-border: hsl(208deg 10% 70% / 30%);
+    --color-markdown-code-background-mentions: hsl(0deg 0% 100%);
+    --color-markdown-code-border-mentions: hsl(208deg 10% 70% / 50%);
+    --color-markdown-pre-text: var(--color-markdown-code-text);
+    --color-markdown-pre-background: hsl(208deg 5% 97% / 85%);
+    --color-markdown-pre-border: var(--color-markdown-code-border);
+    --color-markdown-pre-background-mentions: var(
+        --color-markdown-code-background-mentions
+    );
+    --color-markdown-pre-border-mentions: var(
+        --color-markdown-code-border-mentions
+    );
     --color-markdown-link: hsl(200deg 100% 40%);
-    --color-markdown-link-hover: hsl(200deg 100% 25%);
     --color-markdown-code-link: var(--color-markdown-link);
+    --color-markdown-link-hover: hsl(200deg 100% 25%);
     --color-markdown-code-link-hover: var(--color-markdown-link-hover);
 
     /* Icon colors */
@@ -581,12 +589,20 @@ body {
     /* Markdown code colors */
     /* Note that Markdown code-link colors are identical
        to light theme, and so are not redeclared here. */
-    --color-markdown-code-text: var(--color-text-message-default);
-    --color-markdown-code-background: hsl(212deg 25% 15%);
-    --color-markdown-code-border: hsl(0deg 0% 0% / 50%);
-    --color-markdown-pre-text: hsl(212deg 98% 82%);
-    --color-markdown-pre-background: hsl(212deg 0% 11%);
-    --color-markdown-pre-border: hsl(0deg 0% 0% / 50%);
+    --color-markdown-code-text: hsl(0deg 0% 100% / 80%);
+    --color-markdown-code-background: hsl(0deg 0% 100% / 4%);
+    --color-markdown-code-border: hsl(0deg 0% 100% / 15%);
+    --color-markdown-code-background-mentions: var(
+        --color-markdown-code-background
+    );
+    --color-markdown-code-border-mentions: var(--color-markdown-code-border);
+    --color-markdown-pre-text: var(--color-markdown-code-text);
+    --color-markdown-pre-background: var(--color-markdown-code-background);
+    --color-markdown-pre-border: var(--color-markdown-code-border);
+    --color-markdown-pre-background-mentions: var(
+        --color-markdown-code-background
+    );
+    --color-markdown-pre-border-mentions: var(--color-markdown-code-border);
 
     /* Icon colors */
     --color-icon-bot: hsl(180deg 5% 50% / 100%);