Remove decidePalette from TextBlock component

guardian · Dec 12, 2024 · e5f02cc · e5f02cc
1 parent 5adba30
commit e5f02cc
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 22 deletions.
diff --git a/dotcom-rendering/src/components/TextBlockComponent.tsx b/dotcom-rendering/src/components/TextBlockComponent.tsx
@@ -17,7 +17,6 @@ import {
 	type ArticleFormat,
 	ArticleSpecial,
 } from '../lib/articleFormat';
-import { decidePalette } from '../lib/decidePalette';
 import { getAttrs, isElement, parseHtml } from '../lib/domUtils';
 import { palette as themePalette } from '../palette';
 import { logger } from '../server/lib/logging';
@@ -228,7 +227,7 @@ const styles = (format: ArticleFormat) => css`
 		border-radius: 50%;
 		height: ${remSpace[2]};
 		width: ${remSpace[2]};
-		background-color: ${decidePalette(format).background.bullet};
+		background-color: ${themePalette('--textblock-bullet-background')};
 	}
 
 	${until.tablet} {

diff --git a/dotcom-rendering/src/lib/decidePalette.ts b/dotcom-rendering/src/lib/decidePalette.ts
@@ -86,22 +86,6 @@ const textStandfirstLink = (format: ArticleFormat): string => {
 	}
 };
 
-const backgroundBullet = (format: ArticleFormat): string => {
-	if (format.theme === ArticleSpecial.Labs) return BLACK;
-	if (format.theme === ArticleSpecial.SpecialReport) {
-		return specialReport[300];
-	}
-	if (format.design === ArticleDesign.Analysis) {
-		switch (format.theme) {
-			case Pillar.News:
-				return news[300];
-			default:
-				return pillarPalette[format.theme].main;
-		}
-	}
-	return pillarPalette[format.theme].main;
-};
-
 const backgroundBulletStandfirst = (format: ArticleFormat): string => {
 	if (
 		format.design === ArticleDesign.DeadBlog ||
@@ -425,7 +409,6 @@ export const decidePalette = (format: ArticleFormat): Palette => {
 		background: {
 			analysisContrast: backgroundAnalysisContrastColour(),
 			analysisContrastHover: backgroundAnalysisContrastHoverColour(),
-			bullet: backgroundBullet(format),
 			bulletStandfirst: backgroundBulletStandfirst(format),
 			filterButton: backgroundFilterButton(),
 			filterButtonHover: backgroundFilterButtonHover(format),

diff --git a/dotcom-rendering/src/paletteDeclarations.ts b/dotcom-rendering/src/paletteDeclarations.ts
@@ -50,8 +50,33 @@ const pillarPalette = (
 	}
 };
 
-const textblockTextLight: PaletteFunction = (format: ArticleFormat) => {
-	switch (format.design) {
+const textblockBulletLight: PaletteFunction = ({ theme, design }) => {
+	switch (theme) {
+		case Pillar.News: {
+			return design === ArticleDesign.Analysis
+				? sourcePalette.news[300]
+				: sourcePalette.news[400];
+		}
+		case Pillar.Opinion:
+		case Pillar.Sport:
+		case Pillar.Culture:
+		case Pillar.Lifestyle: {
+			return pillarPalette(theme, 400);
+		}
+		case ArticleSpecial.Labs: {
+			return sourcePalette.neutral[7];
+		}
+		case ArticleSpecial.SpecialReport: {
+			return sourcePalette.specialReport[300];
+		}
+		case ArticleSpecial.SpecialReportAlt: {
+			return sourcePalette.specialReportAlt[200];
+		}
+	}
+};
+
+const textblockTextLight: PaletteFunction = ({ design }) => {
+	switch (design) {
 		case ArticleDesign.Audio:
 			return sourcePalette.neutral[97];
 		default:
@@ -7102,6 +7127,10 @@ const paletteColours = {
 		light: () => sourcePalette.neutral[0],
 		dark: () => sourcePalette.neutral[86],
 	},
+	'--textblock-bullet-background': {
+		light: textblockBulletLight,
+		dark: textblockBulletLight,
+	},
 	'--textblock-text': {
 		light: textblockTextLight,
 		dark: textblockTextDark,

diff --git a/dotcom-rendering/src/types/palette.ts b/dotcom-rendering/src/types/palette.ts
@@ -16,7 +16,6 @@ export type Palette = {
 	background: {
 		analysisContrast: Colour;
 		analysisContrastHover: Colour;
-		bullet: Colour;
 		bulletStandfirst: Colour;
 		filterButton: Colour;
 		filterButtonHover: Colour;