Add colours to container overrides

Author: domlander

dotcom-rendering/src/components/ContainerOverrides.tsx

@@ -136,7 +136,6 @@ const cardKickerTextLight: ContainerFunction = (containerPalette) => {
 			return sourcePalette.labs[200];
 	}
 };
-
 const cardKickerTextDark: ContainerFunction = (containerPalette) => {
 	switch (containerPalette) {
 		case 'InvestigationPalette':
@@ -162,6 +161,55 @@ const cardKickerTextDark: ContainerFunction = (containerPalette) => {
 	}
 };
 
+const cardQuoteIconLight: ContainerFunction = (containerPalette) => {
+	switch (containerPalette) {
+		case 'InvestigationPalette':
+			return sourcePalette.brandAlt[400];
+		case 'LongRunningPalette':
+			return sourcePalette.news[400];
+		case 'LongRunningAltPalette':
+			return sourcePalette.news[400];
+		case 'SombrePalette':
+			return sourcePalette.brand[800];
+		case 'SombreAltPalette':
+			return sourcePalette.news[500];
+		case 'BreakingPalette':
+			return sourcePalette.news[600];
+		case 'EventPalette':
+			return sourcePalette.specialReportAlt[200];
+		case 'EventAltPalette':
+			return sourcePalette.news[400];
+		case 'SpecialReportAltPalette':
+			return sourcePalette.specialReportAlt[100];
+		case 'Branded':
+			return sourcePalette.labs[200];
+	}
+};
+const cardQuoteIconDark: ContainerFunction = (containerPalette) => {
+	switch (containerPalette) {
+		case 'InvestigationPalette':
+			return cardKickerTextLight(containerPalette);
+		case 'LongRunningPalette':
+			return sourcePalette.news[600];
+		case 'LongRunningAltPalette':
+			return sourcePalette.news[550];
+		case 'SombrePalette':
+			return sourcePalette.brand[800];
+		case 'SombreAltPalette':
+			return sourcePalette.news[500];
+		case 'BreakingPalette':
+			return sourcePalette.news[600];
+		case 'EventPalette':
+			return sourcePalette.specialReportAlt[300];
+		case 'EventAltPalette':
+			return sourcePalette.news[600];
+		case 'SpecialReportAltPalette':
+			return sourcePalette.specialReportAlt[700];
+		case 'Branded':
+			return sourcePalette.labs[400];
+	}
+};
+
 const kickerTextLiveLight: ContainerFunction = (containerPalette) => {
 	switch (containerPalette) {
 		case 'InvestigationPalette':
@@ -953,6 +1001,10 @@ const containerColours = {
 		light: cardKickerTextLight,
 		dark: cardKickerTextDark,
 	},
+	'--card-quote-icon': {
+		light: cardQuoteIconLight,
+		dark: cardQuoteIconDark,
+	},
 	'--card-media-background': {
 		light: cardMediaBackgroundLight,
 		dark: cardMediaBackgroundDark,

dotcom-rendering/src/components/FeatureCard.tsx

@@ -607,6 +607,9 @@ export const FeatureCard = ({
 												kickerColour={palette(
 													'--feature-card-kicker-text',
 												)}
+												quoteColour={palette(
+													'--feature-card-quote-icon',
+												)}
 											/>
 										</div>
 

dotcom-rendering/src/components/YoutubeAtom/YoutubeAtomFeatureCardOverlay.tsx

@@ -226,6 +226,7 @@ export const YoutubeAtomFeatureCardOverlay = ({
 							fontSizes={headlineSizes}
 							headlineColour={palette('--feature-card-headline')}
 							kickerColour={palette('--feature-card-kicker-text')}
+							quoteColour={palette('--feature-card-quote-icon')}
 							byline={byline}
 							showByline={showByline}
 						/>

dotcom-rendering/src/paletteDeclarations.ts

@@ -6096,6 +6096,20 @@ const featureCardKickerText: PaletteFunction = ({ theme }) => {
 			return pillarPalette(theme, 600);
 	}
 };
+const featureCardQuoteIcon: PaletteFunction = ({ theme }) => {
+	switch (theme) {
+		case ArticleSpecial.Labs:
+		case ArticleSpecial.SpecialReport:
+		case ArticleSpecial.SpecialReportAlt:
+			return sourcePalette.neutral[86];
+		case Pillar.News:
+		case Pillar.Opinion:
+		case Pillar.Sport:
+		case Pillar.Culture:
+		case Pillar.Lifestyle:
+			return pillarPalette(theme, 600);
+	}
+};
 
 const pillText: PaletteFunction = () => sourcePalette.neutral[100];
 const pillBackground: PaletteFunction = () =>
@@ -6900,6 +6914,10 @@ const paletteColours = {
 		light: featureCardKickerText,
 		dark: featureCardKickerText,
 	},
+	'--feature-card-quote-icon': {
+		light: featureCardQuoteIcon,
+		dark: featureCardQuoteIcon,
+	},
 	'--feature-card-trail-text': {
 		light: () => sourcePalette.neutral[86],
 		dark: () => sourcePalette.neutral[20],