fix(RichLink): ensure correct avatar colour

Rich links may not share the same format
as the article that they are on, so we need
to override the CSS custom properties when
there is an Avatar, e.g. on Opinion pieces.

dotcom-rendering/src/components/RichLink.tsx

@@ -10,6 +10,7 @@ import {
 	textSans,
 } from '@guardian/source-foundations';
 import { decidePalette } from '../lib/decidePalette';
+import { paletteDeclarations } from '../palette';
 import ArrowInCircle from '../static/icons/arrow-in-circle.svg';
 import type { Palette } from '../types/palette';
 import type { TagType } from '../types/tag';
@@ -160,7 +161,7 @@ const byline = css`
 	}
 `;
 
-const contributorImageWrapper = css`
+const contributorImageWrapper = (format: ArticleFormat) => css`
 	width: 5rem;
 	height: 5rem;
 	margin-left: auto;
@@ -170,6 +171,11 @@ const contributorImageWrapper = css`
 		height: 8.5rem;
 	}
 
+	${paletteDeclarations(format, 'light').join('')}
+	@media (prefers-color-scheme: dark) {
+		${paletteDeclarations(format, 'dark').join('')}
+	}
+
 	/* TODO remove the default img styling in ArticleBody.tsx - do we need direct element styling? */
 	img {
 		width: 100%;
@@ -311,7 +317,7 @@ export const RichLink = ({
 							)}
 						</div>
 						{!!(isOpinion && contributorImage) && (
-							<div css={contributorImageWrapper}>
+							<div css={contributorImageWrapper(format)}>
 								<Avatar
 									src={contributorImage}
 									alt={mainContributor}