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

@@ -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: {},
   },
 };

packages/theme/src/base/types.ts

@@ -82,6 +82,9 @@ export type BackstagePaletteAdditions = {
     closeButtonColor?: string;
     warning?: string;
   };
+  code: {
+    background?: string;
+  };
 };
 
 /**

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: ${