From 92270fca6c9382a3f4bf4402b3264a474f39ed9b Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Thu, 16 Jul 2026 18:56:26 +0000
Subject: [PATCH] fix: improve inline code contrast inside greybox - closes
 #2677

Inline code elements use bg-gray-100 which blends with the greybox
container that also uses bg-gray-100. Override the code component
mapping for greybox to use bg-white instead, ensuring inline code
is visually distinguishable inside gray content boxes.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 components/embeds/boxEmbed.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/components/embeds/boxEmbed.tsx b/components/embeds/boxEmbed.tsx
index ca0bc83c0..1c18f6ac1 100644
--- a/components/embeds/boxEmbed.tsx
+++ b/components/embeds/boxEmbed.tsx
@@ -11,6 +11,12 @@ import { Figure, inlineFigureDefaultItem, inlineFigureFields } from "./figure";
 import { imageEmbedTemplate } from "./imageEmbed";
 import { youtubeEmbedTemplate } from "./youtubeEmbed";
 
+// Inline code inside greybox needs a white background to contrast with the gray container
+const greyboxMarkdownComponents = {
+  ...MarkdownComponentMapping,
+  code: (props: any) => <code className="bg-white py-1 px-2 rounded-sm" {...props} />,
+};
+
 function YakShaverIcon() {
   return (
     <div className="w-8 h-8 mr-4 flex items-start justify-center">
@@ -113,7 +119,7 @@ export function BoxEmbed(props: any) {
               [&_img]:max-w-full [&_img]:h-auto
               [&_p:last-child]:mb-0"
           >
-            <TinaMarkdown content={data.body} components={MarkdownComponentMapping} />
+            <TinaMarkdown content={data.body} components={variant === "greybox" ? greyboxMarkdownComponents : MarkdownComponentMapping} />
           </div>
         </div>
       </div>