Change main media caption colour text for galleries

Author: ioannakok

dotcom-rendering/src/components/Caption.tsx

@@ -37,12 +37,14 @@ type IconProps = {
 	format: ArticleFormat;
 };
 
-const captionStyle = css`
+const captionStyle = (isMainMedia: boolean) => css`
 	${textSans14};
 	line-height: 135%;
 	padding-top: 6px;
 	overflow-wrap: break-word;
-	color: ${palette('--caption-text')};
+	color: ${isMainMedia
+		? palette('--caption-main-media-text')
+		: palette('--caption-text')};
 `;
 
 const bottomMarginStyles = css`
@@ -303,7 +305,7 @@ export const Caption = ({
 	const defaultCaption = (
 		<figcaption
 			css={[
-				captionStyle,
+				captionStyle(isMainMedia),
 				shouldLimitWidth && limitedWidth,
 				isOverlaid ? overlaidStyles(format) : bottomMarginStyles,
 				isMainMedia &&
@@ -352,9 +354,7 @@ export const Caption = ({
 							 */
 							line-height: 1.15;
 							color: ${isMainMedia
-								? palette(
-										'--caption-photo-essay-main-media-text',
-								  )
+								? palette('--caption-main-media-text')
 								: palette('--caption-text')};
 							width: 100%;
 							margin-top: ${space[3]}px;
@@ -365,9 +365,7 @@ export const Caption = ({
 								padding-top: ${space[2]}px;
 								border-top: 1px solid
 									${isMainMedia
-										? palette(
-												'--caption-photo-essay-main-media-text',
-										  )
+										? palette('--caption-main-media-text')
 										: palette('--caption-text')};
 							}
 						`,

dotcom-rendering/src/paletteDeclarations.ts

@@ -2738,8 +2738,16 @@ const captionTextDark: PaletteFunction = ({ design, theme }) => {
 	}
 };
 
-const captionPhotoEssayMainMediaTextLight = () => sourcePalette.neutral[46];
-const captionPhotoEssayMainMediaTextDark = () => sourcePalette.neutral[60];
+const captionMainMediaTextLight: PaletteFunction = ({ design }) => {
+	switch (design) {
+		case ArticleDesign.Gallery:
+			return sourcePalette.neutral[60];
+		default:
+			return sourcePalette.neutral[46];
+	}
+};
+const captionMainMediaTextDark: PaletteFunction = () =>
+	sourcePalette.neutral[60];
 
 const captionLink: PaletteFunction = ({ design, theme }) => {
 	if (design === ArticleDesign.Analysis && theme === Pillar.News) {
@@ -6539,14 +6547,14 @@ const paletteColours = {
 		light: captionLink,
 		dark: captionLink,
 	},
+	'--caption-main-media-text': {
+		light: captionMainMediaTextLight,
+		dark: captionMainMediaTextDark,
+	},
 	'--caption-overlay-text': {
 		light: captionOverlayText,
 		dark: captionOverlayText,
 	},
-	'--caption-photo-essay-main-media-text': {
-		light: captionPhotoEssayMainMediaTextLight,
-		dark: captionPhotoEssayMainMediaTextDark,
-	},
 	'--caption-text': {
 		light: captionTextLight,
 		dark: captionTextDark,