fix: improve inline code contrast inside greybox - closes #2677

[github-actions]

Problem

Inline code elements inside greybox containers were visually indistinguishable because both used the same bg-gray-100 background colour. This made inline code snippets blend into the surrounding gray box.

Root Cause

In typography-components.tsx, the code component is styled with bg-gray-100 py-1 px-2 rounded-sm. The greybox variant in boxEmbed.tsx uses containerClass: "bg-gray-100" — identical backgrounds, no visual contrast.

Fix

Added a greyboxMarkdownComponents constant in boxEmbed.tsx that spreads the default MarkdownComponentMapping but overrides the code component to use bg-white instead of bg-gray-100. The TinaMarkdown inside BoxEmbed now uses this custom mapping when the variant is "greybox", and the standard mapping for all other box variants.

const greyboxMarkdownComponents = {
  ...MarkdownComponentMapping,
  code: (props: any) => <code className="bg-white py-1 px-2 rounded-sm" {...props} />,
};
// ...
<TinaMarkdown content={data.body} components={variant === "greybox" ? greyboxMarkdownComponents : MarkdownComponentMapping} />

What's unchanged

• Inline code styling outside gray boxes remains bg-gray-100 (unchanged)
• All other box variants (info, warning, tips, etc.) use the standard mapping (they already have white/distinct backgrounds)
• No other components modified

Closes #2677

Generated by Issue Triage for issue #2677 · ● 823.5K · ◷