Remove onwards specific palette colour definitions (#12913)

We don't want to handle onwards content cards differently to standard cards and this removes a layer of complexity This also resolves some issues with accessibility since there was not sufficient contrast on media cards between the text and background
guardian · Nov 26, 2024 · 2c40050 · 2c40050
1 parent fd78c55
commit 2c40050
Show file tree

Hide file tree

Showing 6 changed files with 7 additions and 80 deletions.
diff --git a/dotcom-rendering/src/components/Card/Card.tsx b/dotcom-rendering/src/components/Card/Card.tsx
@@ -348,7 +348,6 @@ export const Card = ({
 					isWithinTwelveHours: withinTwelveHours,
 				}}
 				showClock={showClock}
-				isOnwardContent={isOnwardContent}
 				absoluteServerTimes={absoluteServerTimes}
 				isTagPage={isTagPage}
 			/>
@@ -381,7 +380,6 @@ export const Card = ({
 					<CardCommentCount
 						discussionApiUrl={discussionApiUrl}
 						discussionId={discussionId}
-						isOnwardContent={isOnwardContent}
 					/>
 				</Island>
 			</Link>
@@ -415,10 +413,6 @@ export const Card = ({
 	const showCommentFooter =
 		isOpinion && !isOnwardContent && media?.type === 'avatar';
 
-	const cardBackgroundColour = isOnwardContent
-		? palette('--onward-content-card-background')
-		: palette('--card-background');
-
 	/**
 	 * Some cards in standard containers have contrasting background colours.
 	 * We need to add additional padding to these cards to keep the text readable.
@@ -553,7 +547,7 @@ export const Card = ({
 					css={css`
 						padding-bottom: ${space[5]}px;
 					`}
-					style={{ backgroundColor: cardBackgroundColour }}
+					style={{ backgroundColor: palette('--card-background') }}
 				>
 					<CardHeadline
 						headlineText={headlineText}
@@ -590,7 +584,7 @@ export const Card = ({
 			)}
 
 			<CardLayout
-				cardBackgroundColour={cardBackgroundColour}
+				cardBackgroundColour={palette('--card-background')}
 				imagePositionOnDesktop={imagePositionOnDesktop}
 				imagePositionOnMobile={imagePositionOnMobile}
 				minWidthInPixels={minWidthInPixels}

diff --git a/dotcom-rendering/src/components/Card/components/CardAge.tsx b/dotcom-rendering/src/components/Card/components/CardAge.tsx
@@ -12,7 +12,6 @@ type Props = {
 		isWithinTwelveHours: boolean;
 	};
 	showClock?: boolean;
-	isOnwardContent?: boolean;
 	isTagPage: boolean;
 	colour?: string;
 };
@@ -38,7 +37,6 @@ const ageStyles = (colour: string) => {
 export const CardAge = ({
 	webPublication,
 	showClock,
-	isOnwardContent,
 	absoluteServerTimes,
 	isTagPage,
 	colour = palette('--card-footer-text'),
@@ -48,13 +46,7 @@ export const CardAge = ({
 	}
 
 	return (
-		<span
-			css={ageStyles(
-				isOnwardContent
-					? palette('--card-footer-onwards-content')
-					: colour,
-			)}
-		>
+		<span css={ageStyles(colour)}>
 			{showClock && <ClockIcon />}
 			{isTagPage ? (
 				<DateTime

diff --git a/dotcom-rendering/src/components/CardCommentCount.importable.tsx b/dotcom-rendering/src/components/CardCommentCount.importable.tsx
@@ -16,7 +16,6 @@ type Props = {
 	discussionApiUrl: string;
 	discussionId: string;
 	isDynamo?: true;
-	isOnwardContent?: boolean;
 	/** Optional override of default comment count colour */
 	colour?: string;
 };
@@ -66,7 +65,6 @@ export const CardCommentCount = ({
 	discussionApiUrl,
 	discussionId,
 	isDynamo,
-	isOnwardContent,
 	colour = themePalette('--card-footer-text'),
 }: Props) => {
 	const count = useCommentCount(discussionApiUrl, discussionId);
@@ -76,8 +74,6 @@ export const CardCommentCount = ({
 	const getCommentCountColour = (): string => {
 		if (isDynamo) {
 			return themePalette('--card-trail-text');
-		} else if (isOnwardContent) {
-			return themePalette('--card-footer-onwards-content');
 		} else {
 			return colour;
 		}

diff --git a/dotcom-rendering/src/components/FeatureCard.tsx b/dotcom-rendering/src/components/FeatureCard.tsx
@@ -193,7 +193,6 @@ const CardAge = ({
 				isWithinTwelveHours: withinTwelveHours,
 			}}
 			showClock={showClock}
-			isOnwardContent={false}
 			absoluteServerTimes={absoluteServerTimes}
 			isTagPage={false}
 			colour={palette('--feature-card-footer-text')}
@@ -237,7 +236,6 @@ const CommentCount = ({
 				<CardCommentCount
 					discussionApiUrl={discussionApiUrl}
 					discussionId={discussionId}
-					isOnwardContent={false}
 					colour={palette('--feature-card-footer-text')}
 				/>
 			</Island>

diff --git a/dotcom-rendering/src/components/FetchOnwardsData.importable.tsx b/dotcom-rendering/src/components/FetchOnwardsData.importable.tsx
@@ -58,7 +58,7 @@ export const FetchOnwardsData = ({
 			<Placeholder
 				height={340} // best guess at typical height
 				shouldShimmer={false}
-				backgroundColor={palette('--onward-placeholder-background')}
+				backgroundColor={palette('--article-background')}
 			/>
 		);
 	}

diff --git a/dotcom-rendering/src/palette.ts b/dotcom-rendering/src/palette.ts
@@ -2523,46 +2523,9 @@ const cardMetaTextLight: PaletteFunction = (format) =>
 
 const cardMetaTextDark: PaletteFunction = () => sourcePalette.neutral[60];
 
-const cardOnwardContentFooterLight: PaletteFunction = (format) =>
-	isMediaCard(format)
-		? sourcePalette.neutral[100]
-		: sourcePalette.neutral[46];
-
-const cardOnwardContentFooterDark = (): string => {
-	return sourcePalette.neutral[60];
-};
-
-const cardBackgroundLight: PaletteFunction = (format) =>
-	isMediaCard(format) ? sourcePalette.neutral[20] : 'transparent';
-
-const cardBackgroundDark: PaletteFunction = (format) =>
-	isMediaCard(format) ? sourcePalette.neutral[10] : 'transparent';
-
-const onwardPlaceholderBackgroundLight: PaletteFunction = (format) =>
-	isMediaCard(format) ? 'transparent' : articleBackgroundLight(format);
-
-const onwardPlaceholderBackgroundDark: PaletteFunction = ({
-	design,
-	display,
-	theme,
-}) =>
-	articleBackgroundDark({
-		design,
-		display,
-		theme,
-	});
-
-const onwardContentCardBackgroundLight: PaletteFunction = (format) =>
-	isMediaCard(format) ? sourcePalette.neutral[46] : 'transparent';
-
-const onwardContentCardBackgroundDark: PaletteFunction = (format) =>
+const cardBackground: PaletteFunction = (format) =>
 	isMediaCard(format) ? sourcePalette.neutral[20] : 'transparent';
 
-const onwardContentCardHoverLight: PaletteFunction = (format) =>
-	isMediaCard(format) ? sourcePalette.neutral[20] : sourcePalette.neutral[97];
-const onwardContentCardHoverDark: PaletteFunction = (format) =>
-	isMediaCard(format) ? sourcePalette.neutral[46] : sourcePalette.neutral[10];
-
 const cardHeadlineTextLight: PaletteFunction = (format) =>
 	isMediaCard(format) ? sourcePalette.neutral[100] : sourcePalette.neutral[7];
 
@@ -6118,8 +6081,8 @@ const paletteColours = {
 		dark: captionTextDark,
 	},
 	'--card-background': {
-		light: cardBackgroundLight,
-		dark: cardBackgroundDark,
+		light: cardBackground,
+		dark: cardBackground,
 	},
 	'--card-background-hover': {
 		light: cardBackgroundHover,
@@ -6133,10 +6096,6 @@ const paletteColours = {
 		light: cardBorderTopLight,
 		dark: cardBorderTopDark,
 	},
-	'--card-footer-onwards-content': {
-		light: cardOnwardContentFooterLight,
-		dark: cardOnwardContentFooterDark,
-	},
 	'--card-footer-text': {
 		light: cardMetaTextLight,
 		dark: cardMetaTextDark,
@@ -6813,18 +6772,6 @@ const paletteColours = {
 		light: numberedListTitleLight,
 		dark: numberedListTitleDark,
 	},
-	'--onward-content-card-background': {
-		light: onwardContentCardBackgroundLight,
-		dark: onwardContentCardBackgroundDark,
-	},
-	'--onward-content-card-hover': {
-		light: onwardContentCardHoverLight,
-		dark: onwardContentCardHoverDark,
-	},
-	'--onward-placeholder-background': {
-		light: onwardPlaceholderBackgroundLight,
-		dark: onwardPlaceholderBackgroundDark,
-	},
 	'--pagination-text': {
 		light: paginationTextLight,
 		dark: paginationTextDark,