Use colour for quote icon

Author: domlander

dotcom-rendering/src/components/CardHeadline.tsx

@@ -48,6 +48,7 @@ type Props = {
 	headlineColour?: string;
 	/** Optional override of the standard card kicker colour */
 	kickerColour?: string;
+	quoteColour?: string;
 	kickerImage?: PodcastSeriesImage;
 };
 
@@ -190,6 +191,7 @@ export const CardHeadline = ({
 	isExternalLink,
 	headlineColour = palette('--card-headline'),
 	kickerColour = palette('--card-kicker-text'),
+	quoteColour = palette('--card-quote-icon'),
 	kickerImage,
 }: Props) => {
 	// The link is only applied directly to the headline if it is a sublink
@@ -220,7 +222,7 @@ export const CardHeadline = ({
 						image={kickerImage}
 					/>
 				)}
-				{showQuotes && <QuoteIcon colour={kickerColour} />}
+				{showQuotes && <QuoteIcon colour={quoteColour} />}
 				<span
 					css={css`
 						color: ${headlineColour};

dotcom-rendering/src/components/Masthead/HighlightsCard.tsx

@@ -157,6 +157,7 @@ export const HighlightsCard = ({
 						showQuotes={showQuotedHeadline}
 						headlineColour={palette('--highlights-card-headline')}
 						kickerColour={palette('--highlights-card-kicker-text')}
+						quoteColour={palette('--highlights-card-quote-icon')}
 					/>
 
 					{!isUndefined(starRating) && (

dotcom-rendering/src/paletteDeclarations.ts

@@ -2603,7 +2603,6 @@ const cardKickerTextLight: PaletteFunction = (format) => {
 			return sourcePalette.specialReportAlt[200];
 	}
 };
-
 const cardKickerTextDark: PaletteFunction = ({ theme }) => {
 	switch (theme) {
 		case Pillar.News:
@@ -2621,6 +2620,40 @@ const cardKickerTextDark: PaletteFunction = ({ theme }) => {
 	}
 };
 
+const cardQuoteIconLight: PaletteFunction = (format) => {
+	switch (format.theme) {
+		case Pillar.Opinion:
+			return pillarPalette(format.theme, 300);
+		case Pillar.Sport:
+		case Pillar.Culture:
+		case Pillar.Lifestyle:
+		case Pillar.News:
+			return pillarPalette(format.theme, 400);
+		case ArticleSpecial.Labs:
+			return sourcePalette.labs[200];
+		case ArticleSpecial.SpecialReport:
+			return sourcePalette.news[400];
+		case ArticleSpecial.SpecialReportAlt:
+			return sourcePalette.specialReportAlt[200];
+	}
+};
+const cardQuoteIconDark: PaletteFunction = ({ theme }) => {
+	switch (theme) {
+		case Pillar.News:
+		case Pillar.Lifestyle:
+		case Pillar.Sport:
+		case Pillar.Culture:
+		case Pillar.Opinion:
+			return pillarPalette(theme, 500);
+		case ArticleSpecial.Labs:
+			return sourcePalette.labs[400];
+		case ArticleSpecial.SpecialReport:
+			return sourcePalette.news[500];
+		case ArticleSpecial.SpecialReportAlt:
+			return sourcePalette.specialReportAlt[200];
+	}
+};
+
 const cardBackgroundHover: PaletteFunction = () =>
 	transparentColour(sourcePalette.neutral[7], 0.1);
 
@@ -5797,10 +5830,28 @@ const highlightsCardHeadlineLight: PaletteFunction = (format) => {
 			return sourcePalette.specialReportAlt[200];
 	}
 };
-
 const highlightsCardHeadlineDark: PaletteFunction = () =>
 	sourcePalette.neutral[86];
 
+const highlightsCardQuoteIconLight: PaletteFunction = (format) => {
+	switch (format.theme) {
+		case Pillar.News:
+		case Pillar.Opinion:
+		case Pillar.Sport:
+		case Pillar.Culture:
+		case Pillar.Lifestyle:
+			return pillarPalette(format.theme, 400);
+		case ArticleSpecial.Labs:
+			return sourcePalette.labs[200];
+		case ArticleSpecial.SpecialReport:
+			return sourcePalette.news[400];
+		case ArticleSpecial.SpecialReportAlt:
+			return sourcePalette.specialReportAlt[200];
+	}
+};
+const highlightsCardQuoteIconDark: PaletteFunction = () =>
+	sourcePalette.neutral[86];
+
 const highlightContainerStartLight: PaletteFunction = () =>
 	sourcePalette.neutral[100];
 const highlightContainerStartDark: PaletteFunction = () =>
@@ -6437,6 +6488,10 @@ const paletteColours = {
 		light: cardMediaWaveformLight,
 		dark: cardMediaWaveformDark,
 	},
+	'--card-quote-icon': {
+		light: cardQuoteIconLight,
+		dark: cardQuoteIconDark,
+	},
 	'--card-sublinks-background': {
 		light: cardSublinksBackgroundLight,
 		dark: cardSublinksBackgroundDark,
@@ -6958,6 +7013,10 @@ const paletteColours = {
 		light: highlightsCardKickerTextLight,
 		dark: highlightsCardKickerTextDark,
 	},
+	'--highlights-card-quote-icon': {
+		light: highlightsCardQuoteIconLight,
+		dark: highlightsCardQuoteIconDark,
+	},
 	'--highlights-container-background': {
 		light: highlightsContainerBackgroundLight,
 		dark: highlightsContainerBackgroundDark,