Merge branch 'main' into link-follow-to-notifications

Author: aracho1

dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerBody.tsx

@@ -3,7 +3,10 @@ import { from, space, textSans15 } from '@guardian/source/foundations';
 import { createBannerBodyCopy } from '../../components/BannerText';
 import type { BannerData } from '../BannerProps';
 
-const getStyles = (textColour: string, highlightColour?: string) => ({
+const getStyles = (
+	highlightedTextColour: string,
+	highlightColour?: string,
+) => ({
 	container: css`
 		margin-bottom: ${space[4]}px;
 
@@ -24,7 +27,7 @@ const getStyles = (textColour: string, highlightColour?: string) => ({
 	`,
 	highlightedText: css`
 		display: inline;
-		color: ${textColour};
+		color: ${highlightedTextColour};
 
 		${highlightColour
 			? `
@@ -41,11 +44,12 @@ export const BannerBody = ({
 }: {
 	bannerData: BannerData;
 }): JSX.Element | null => {
-	const textColour = bannerData.settings.containerSettings.textColor ?? '';
+	const highlightedTextColour =
+		bannerData.settings.highlightedTextSettings.textColour ?? '';
 	const highlightColour =
 		bannerData.settings.highlightedTextSettings.highlightColour;
 
-	const styles = getStyles(textColour, highlightColour);
+	const styles = getStyles(highlightedTextColour, highlightColour);
 	const { copyForViewport, showBody } = bannerData.selectors;
 
 	return (

dotcom-rendering/src/components/marketing/shared/ThreeTierChoiceCards.tsx

@@ -67,10 +67,12 @@ const supportingTextStyles = css`
 const SupportingBenefits = ({
 	benefitsLabel,
 	benefits,
+	benefitsTickColour,
 	choiceCardDesignSettings,
 }: {
 	benefitsLabel?: string;
 	benefits: ChoiceCard['benefits'];
+	benefitsTickColour?: string;
 	choiceCardDesignSettings?: ChoiceCardDesignSettings;
 }) => {
 	const showTicks = benefits.length > 1;
@@ -94,6 +96,7 @@ const SupportingBenefits = ({
 								size="xsmall"
 								theme={{
 									fill:
+										benefitsTickColour ??
 										choiceCardDesignSettings?.buttonSelectMarkerColour ??
 										palette.brand[400],
 								}}
@@ -187,16 +190,19 @@ export const ThreeTierChoiceCards = ({
 			palette.brand[400],
 	};
 
+	const getPillBackgroundColour = (
+		pill: NonNullable<ChoiceCard['pill']>,
+	): string => {
+		if (choiceCardDesignSettings?.pillBackgroundColour) {
+			return choiceCardDesignSettings.pillBackgroundColour;
+		}
+		if (pill.backgroundColour) {
+			return hexColourToString(pill.backgroundColour as HexColour);
+		}
+		return palette.brandAlt[400];
+	};
+
 	const pillStyles = (pill: NonNullable<ChoiceCard['pill']>) => {
-		const buildBackgroundColour = (): string => {
-			if (choiceCardDesignSettings?.pillBackgroundColour) {
-				return choiceCardDesignSettings.pillBackgroundColour;
-			}
-			if (pill.backgroundColour) {
-				return hexColourToString(pill.backgroundColour as HexColour);
-			}
-			return palette.brandAlt[400];
-		};
 		const buildTextColour = (): string => {
 			if (choiceCardDesignSettings?.pillTextColour) {
 				return choiceCardDesignSettings.pillTextColour;
@@ -210,7 +216,7 @@ export const ThreeTierChoiceCards = ({
 		return css`
 			border-radius: 4px;
 			padding: ${space[1]}px ${space[2]}px;
-			background-color: ${buildBackgroundColour()};
+			background-color: ${getPillBackgroundColour(pill)};
 			${textSansBold14};
 			color: ${buildTextColour()};
 			position: absolute;
@@ -343,6 +349,13 @@ export const ThreeTierChoiceCards = ({
 															| undefined
 													}
 													benefits={benefits}
+													benefitsTickColour={
+														pill
+															? getPillBackgroundColour(
+																	pill,
+															  )
+															: undefined
+													}
 													choiceCardDesignSettings={
 														choiceCardDesignSettings
 													}