From 08eca61e5216cc7d94b189bdfda7287e827ddcf4 Mon Sep 17 00:00:00 2001
From: Jonathan Roebuck <jroebuck@spotify.com>
Date: Thu, 3 Oct 2024 15:39:41 +0100
Subject: [PATCH] add customisable techdocs code bg color that defaults to
 background.paper

Signed-off-by: Jonathan Roebuck <jroebuck@spotify.com>
---
 packages/theme/src/base/palettes.ts                           | 2 ++
 packages/theme/src/base/types.ts                              | 3 +++
 .../src/reader/transformers/styles/rules/variables.ts         | 4 +++-
 3 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/theme/src/base/palettes.ts b/packages/theme/src/base/palettes.ts
index 5e70afd7b8..db33106094 100644
--- a/packages/theme/src/base/palettes.ts
+++ b/packages/theme/src/base/palettes.ts
@@ -89,6 +89,7 @@ export const palettes = {
     tabbar: {
       indicator: '#9BF0E1',
     },
+    code: {},
   },
   dark: {
     type: 'dark' as const,
@@ -163,5 +164,6 @@ export const palettes = {
     tabbar: {
       indicator: '#9BF0E1',
     },
+    code: {},
   },
 };
diff --git a/packages/theme/src/base/types.ts b/packages/theme/src/base/types.ts
index d62d944741..72a7632dd9 100644
--- a/packages/theme/src/base/types.ts
+++ b/packages/theme/src/base/types.ts
@@ -82,6 +82,9 @@ export type BackstagePaletteAdditions = {
     closeButtonColor?: string;
     warning?: string;
   };
+  code: {
+    background?: string;
+  };
 };
 
 /**
diff --git a/plugins/techdocs/src/reader/transformers/styles/rules/variables.ts b/plugins/techdocs/src/reader/transformers/styles/rules/variables.ts
index e7e47c6fc7..e87e61f9b3 100644
--- a/plugins/techdocs/src/reader/transformers/styles/rules/variables.ts
+++ b/plugins/techdocs/src/reader/transformers/styles/rules/variables.ts
@@ -108,7 +108,9 @@ export default ({ theme }: RuleOptions) => `
 :host > * {
   /* CODE */
   --md-code-fg-color: ${theme.palette.text.primary};
-  --md-code-bg-color: ${theme.palette.background.paper};
+  --md-code-bg-color: ${
+    theme.palette.code.background || theme.palette.background.paper
+  };
   --md-code-hl-color: ${alpha(theme.palette.warning.main, 0.5)};
   --md-code-hl-color--light: var(--md-code-hl-color);
   --md-code-hl-keyword-color: ${