Fix dark mode colours

Author: domlander

dotcom-rendering/src/components/Card/Card.tsx

@@ -689,7 +689,7 @@ export const Card = ({
 	 * - Renders `SupportingContent` for all breakpoints if `sublinkPosition` is `outer`.
 	 * - If `sublinkPosition` is `inner`, hides `SupportingContent` from tablet but displays it on smaller breakpoints.
 	 */
-	const decideSublinks = () => {
+	const decideOuterSublinks = () => {
 		if (!hasSublinks) return null;
 		if (sublinkPosition === 'none') return null;
 
@@ -699,6 +699,7 @@ export const Card = ({
 				containerPalette={containerPalette}
 				alignment={supportingContentAlignment}
 				isDynamo={isDynamo}
+				isMedia={isMediaCard(format)}
 				fillBackgroundOnMobile={
 					!!isFlexSplash ||
 					(isBetaContainer &&
@@ -726,6 +727,7 @@ export const Card = ({
 	const decideInnerSublinks = () => {
 		if (!hasSublinks) return null;
 		if (sublinkPosition !== 'inner') return null;
+
 		return (
 			<Hide until={isFlexSplash ? 'desktop' : 'tablet'}>
 				<SupportingContent
@@ -1278,7 +1280,7 @@ export const Card = ({
 					</Island>
 				)}
 
-				{decideSublinks()}
+				{decideOuterSublinks()}
 
 				{isOpinionCardWithAvatar && (
 					<CardFooter

dotcom-rendering/src/components/SupportingContent.tsx

@@ -16,6 +16,7 @@ type Props = {
 	alignment: Alignment;
 	containerPalette?: DCRContainerPalette;
 	isDynamo?: boolean;
+	isMedia?: boolean;
 	/** Allows sublinks container to have a background colour on mobile screen sizes */
 	fillBackgroundOnMobile?: boolean;
 	/** Allows sublinks container to have a background colour on desktop screen sizes */
@@ -120,19 +121,23 @@ const wrapperStyles = css`
 	}
 `;
 
-const backgroundFillMobile = css`
+const backgroundFillMobile = (isMedia: boolean) => css`
 	${until.tablet} {
 		padding: ${space[2]}px;
 		padding-bottom: ${space[3]}px;
-		background-color: ${palette('--card-sublinks-background')};
+		background-color: ${isMedia
+			? palette('--card-media-sublinks-background')
+			: palette('--card-sublinks-background')};
 	}
 `;
 
-const backgroundFillDesktop = css`
+const backgroundFillDesktop = (isMedia: boolean) => css`
 	${from.tablet} {
 		padding: ${space[2]}px;
 		padding-bottom: ${space[3]}px;
-		background-color: ${palette('--card-sublinks-background')};
+		background-color: ${isMedia
+			? palette('--card-media-sublinks-background')
+			: palette('--card-sublinks-background')};
 	}
 `;
 
@@ -141,6 +146,7 @@ export const SupportingContent = ({
 	alignment,
 	containerPalette,
 	isDynamo,
+	isMedia = false,
 	fillBackgroundOnMobile = false,
 	fillBackgroundOnDesktop = false,
 }: Props) => {
@@ -153,8 +159,8 @@ export const SupportingContent = ({
 				wrapperStyles,
 				baseGrid,
 				(isDynamo ?? alignment === 'horizontal') && horizontalGrid,
-				fillBackgroundOnMobile && backgroundFillMobile,
-				fillBackgroundOnDesktop && backgroundFillDesktop,
+				fillBackgroundOnMobile && backgroundFillMobile(isMedia),
+				fillBackgroundOnDesktop && backgroundFillDesktop(isMedia),
 			]}
 		>
 			{supportingContent.map((subLink, index) => {

dotcom-rendering/src/paletteDeclarations.ts

@@ -5663,6 +5663,11 @@ const cardSublinksBackgroundLight: PaletteFunction = () =>
 const cardSublinksBackgroundDark: PaletteFunction = () =>
 	sourcePalette.neutral[10];
 
+const cardMediaSublinksBackgroundLight: PaletteFunction = () =>
+	sourcePalette.neutral[97];
+const cardMediaSublinksBackgroundDark: PaletteFunction = () =>
+	sourcePalette.neutral[20];
+
 const latestLinksDottedLineLight: PaletteFunction = () =>
 	sourcePalette.neutral[60];
 const latestLinksDottedLineDark: PaletteFunction = () =>
@@ -6122,6 +6127,10 @@ const paletteColours = {
 		light: cardMediaIconLight,
 		dark: cardMediaIconDark,
 	},
+	'--card-media-sublinks-background': {
+		light: cardMediaSublinksBackgroundLight,
+		dark: cardMediaSublinksBackgroundDark,
+	},
 	'--card-media-waveform': {
 		light: cardMediaWaveformLight,
 		dark: cardMediaWaveformDark,