Remove decidePalette from ArticleHeadline (#12378)

* Remove `decidePalette` from `ArticleHeadline` * Add alias for series title match text
guardian · Sep 17, 2024 · 904c552 · 904c552
1 parent 8b50fcb
commit 904c552
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 16 deletions.
diff --git a/dotcom-rendering/src/components/ArticleHeadline.tsx b/dotcom-rendering/src/components/ArticleHeadline.tsx
@@ -19,7 +19,6 @@ import {
 } from '@guardian/source/foundations';
 import { interactiveLegacyClasses } from '../layouts/lib/interactiveLegacyStyling';
 import { getAgeWarning } from '../lib/age-warning';
-import { decidePalette } from '../lib/decidePalette';
 import { getZIndex } from '../lib/getZIndex';
 import { palette as themePalette } from '../palette';
 import type { TagType } from '../types/tag';
@@ -371,7 +370,6 @@ export const ArticleHeadline = ({
 	hasAvatar,
 	isMatch,
 }: Props) => {
-	const palette = decidePalette(format);
 	switch (format.display) {
 		case ArticleDisplay.Immersive: {
 			switch (format.design) {
@@ -764,7 +762,9 @@ export const ArticleHeadline = ({
 											: headlineFont(format),
 										css`
 											color: ${isMatch
-												? palette.text.headlineWhenMatch
+												? themePalette(
+														'--headline-match-colour',
+												  )
 												: themePalette(
 														'--headline-colour',
 												  )};

diff --git a/dotcom-rendering/src/lib/decidePalette.ts b/dotcom-rendering/src/lib/decidePalette.ts
@@ -3,7 +3,6 @@ import { ArticleDesign, ArticleSpecial, Pillar } from '@guardian/libs';
 import { brandAltBackground, palette } from '@guardian/source/foundations';
 // Here is the one place where we use `pillarPalette`
 import { pillarPalette_DO_NOT_USE as pillarPalette } from '../lib/pillars';
-import { palette as themePalette } from '../palette';
 import type { Palette } from '../types/palette';
 import { transparentColour } from './transparentColour';
 
@@ -22,16 +21,6 @@ const {
 const WHITE = neutral[100];
 const BLACK = neutral[7];
 
-const textHeadlineWhenMatch = (format: ArticleFormat): string => {
-	switch (format.design) {
-		case ArticleDesign.MatchReport:
-		case ArticleDesign.LiveBlog:
-			return BLACK;
-		default:
-			return themePalette('--series-title-text');
-	}
-};
-
 const textStandfirst = (format: ArticleFormat): string => {
 	if (format.design === ArticleDesign.LiveBlog) return WHITE;
 	if (format.design === ArticleDesign.Picture) return palette.neutral[86];
@@ -444,7 +433,6 @@ const textExpandableAtomHover = (format: ArticleFormat) => {
 export const decidePalette = (format: ArticleFormat): Palette => {
 	return {
 		text: {
-			headlineWhenMatch: textHeadlineWhenMatch(format),
 			standfirst: textStandfirst(format),
 			standfirstLink: textStandfirstLink(format),
 			disclaimerLink: textDisclaimerLink(format),

diff --git a/dotcom-rendering/src/palette.ts b/dotcom-rendering/src/palette.ts
@@ -164,6 +164,13 @@ const headlineTextDark: PaletteFunction = ({ design, display, theme }) => {
 		}
 	}
 };
+
+const headlineMatchTextLight: PaletteFunction = (format) =>
+	seriesTitleMatchTextLight(format);
+
+const headlineMatchTextDark: PaletteFunction = (format) =>
+	seriesTitleMatchTextDark(format);
+
 const headlineBackgroundLight: PaletteFunction = ({
 	display,
 	design,
@@ -6229,6 +6236,10 @@ const paletteColours = {
 		light: headlineTextLight,
 		dark: headlineTextDark,
 	},
+	'--headline-match-colour': {
+		light: headlineMatchTextLight,
+		dark: headlineMatchTextDark,
+	},
 	'--highlights-card-headline': {
 		light: highlightsCardHeadline,
 		dark: highlightsCardHeadline,

diff --git a/dotcom-rendering/src/types/palette.ts b/dotcom-rendering/src/types/palette.ts
@@ -2,7 +2,6 @@ export type Colour = string;
 
 export type Palette = {
 	text: {
-		headlineWhenMatch: Colour;
 		standfirst: Colour;
 		standfirstLink: Colour;
 		disclaimerLink: Colour;