Interactive atoms use light background in dark mode (#10291)

guardian · Jan 29, 2024 · fdf7611 · fdf7611
1 parent 3ab6dd5
commit fdf7611
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/dotcom-rendering/src/components/InteractiveAtom.tsx b/dotcom-rendering/src/components/InteractiveAtom.tsx
@@ -2,13 +2,15 @@ import { css } from '@emotion/react';
 import type { ArticleFormat } from '@guardian/libs';
 import { ArticleDisplay } from '@guardian/libs';
 import { unifyPageContent } from '../lib/unifyPageContent';
+import { palette } from '../palette';
 
 const containerStyles = css`
 	margin: 0;
 `;
 
-const fullWidthStyles = css`
+const styles = css`
 	width: 100%;
+	background-color: ${palette('--interactive-atom-background')};
 `;
 const fullHeightStyles = css`
 	height: 100%;
@@ -42,7 +44,7 @@ export const InteractiveAtom = ({
 			title={title}
 			id={id}
 			css={[
-				fullWidthStyles,
+				styles,
 				isMainMedia &&
 					format.display === ArticleDisplay.Immersive &&
 					fullHeightStyles,

diff --git a/dotcom-rendering/src/palette.ts b/dotcom-rendering/src/palette.ts
@@ -4862,6 +4862,10 @@ const lastUpdatedText: PaletteFunction = ({ theme, design }) => {
 	}
 };
 
+const interactiveAtomBackgroundLight: PaletteFunction = () => 'transparent';
+const interactiveAtomBackgroundDark: PaletteFunction = () =>
+	sourcePalette.neutral[100];
+
 // ----- Palette ----- //
 
 /**
@@ -5745,6 +5749,10 @@ const paletteColours = {
 		light: lastUpdatedText,
 		dark: lastUpdatedText,
 	},
+	'--interactive-atom-background': {
+		light: interactiveAtomBackgroundLight,
+		dark: interactiveAtomBackgroundDark,
+	},
 } satisfies PaletteColours;
 
 /**