Remove decidePalette from CalloutEmbedBlock component

dotcom-rendering/src/components/CalloutEmbedBlockComponent.importable.tsx

@@ -6,15 +6,13 @@ import {
 } from '@guardian/source/foundations';
 import { Button } from '@guardian/source/react-components';
 import { useEffect, useState } from 'react';
-import type { ArticleFormat } from '../lib/articleFormat';
-import { decidePalette } from '../lib/decidePalette';
+import { palette } from '../palette';
 import MinusIcon from '../static/icons/minus.svg';
 import PlusIcon from '../static/icons/plus.svg';
 import type {
 	CalloutBlockElement,
 	CalloutBlockElementV2,
 } from '../types/content';
-import type { Palette } from '../types/palette';
 import { Form } from './CalloutEmbed/Form';
 
 const wrapperStyles = css`
@@ -79,10 +77,10 @@ const summaryContentWrapper = css`
 	flex-direction: row;
 `;
 
-const speechBubbleStyles = (palette: Palette) => css`
+const speechBubbleStyles = css`
 	${textSansBold17}
 	color: ${srcPalette.neutral[100]};
-	background-color: ${palette.background.speechBubble};
+	background-color: ${palette('--speech-bubble-background')};
 	min-width: 88px;
 	padding-bottom: 6px;
 	padding-left: 10px;
@@ -93,7 +91,7 @@ const speechBubbleStyles = (palette: Palette) => css`
 		height: 22px;
 		border-bottom-right-radius: 18px;
 		position: absolute;
-		background-color: ${palette.background.speechBubble};
+		background-color: ${palette('--speech-bubble-background')};
 	}
 `;
 
@@ -147,10 +145,8 @@ type FormDataType = { [key in string]: unknown };
  */
 export const CalloutEmbedBlockComponent = ({
 	callout,
-	format,
 }: {
 	callout: CalloutBlockElement | CalloutBlockElementV2;
-	format: ArticleFormat;
 }) => {
 	let expandFormButtonRef: HTMLButtonElement | null = null;
 	let firstFieldElementRef: HTMLElement | null = null;
@@ -160,8 +156,6 @@ export const CalloutEmbedBlockComponent = ({
 	const [error, setError] = useState('');
 	const [submissionSuccess, setSubmissionSuccess] = useState(false);
 
-	const palette = decidePalette(format);
-
 	const { title, description, formFields } = callout;
 
 	const onSubmit = async (formData: FormDataType) => {
@@ -312,7 +306,7 @@ export const CalloutEmbedBlockComponent = ({
 					<summary css={summaryStyles}>
 						<div css={summaryContentWrapper}>
 							<div css={speechBubbleWrapperStyles}>
-								<div css={speechBubbleStyles(palette)}>
+								<div css={speechBubbleStyles}>
 									<h4>Share your story</h4>
 								</div>
 							</div>
@@ -338,7 +332,7 @@ export const CalloutEmbedBlockComponent = ({
 				<summary css={summaryStyles}>
 					<div css={summaryContentWrapper}>
 						<div css={speechBubbleWrapperStyles}>
-							<div css={speechBubbleStyles(palette)}>
+							<div css={speechBubbleStyles}>
 								<h4>Share your story</h4>
 							</div>
 						</div>

dotcom-rendering/src/components/CalloutEmbedBlockComponent.stories.tsx

@@ -2,7 +2,6 @@ import type { Decorator, Meta, StoryObj } from '@storybook/react';
 import { centreColumnDecorator } from '../../.storybook/decorators/gridDecorators';
 import { allModes } from '../../.storybook/modes';
 import { calloutCampaign } from '../../fixtures/manual/calloutCampaign';
-import { ArticleDesign, ArticleDisplay, Pillar } from '../lib/articleFormat';
 import { customMockFetch } from '../lib/mockRESTCalls';
 import { CalloutEmbedBlockComponent as CalloutEmbedBlock } from './CalloutEmbedBlockComponent.importable';
 
@@ -39,11 +38,6 @@ const goodRequest: Decorator<Story['args']> = (Story) => {
 export const CalloutEmbedBlockComponent = {
 	args: {
 		callout: calloutCampaign,
-		format: {
-			display: ArticleDisplay.Standard,
-			design: ArticleDesign.Standard,
-			theme: Pillar.News,
-		},
 	},
 	decorators: [goodRequest],
 } satisfies Story;

dotcom-rendering/src/lib/decidePalette.ts

@@ -138,18 +138,6 @@ const backgroundBulletStandfirst = (format: ArticleFormat): string => {
 	return neutral[86]; // default previously defined in Standfirst.tsx
 };
 
-const backgroundSpeechBubble = (format: ArticleFormat): string => {
-	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 backgroundFilterButtonHover = (format: ArticleFormat): string => {
 	switch (format.theme) {
 		case Pillar.News:
@@ -439,7 +427,6 @@ export const decidePalette = (format: ArticleFormat): Palette => {
 			analysisContrastHover: backgroundAnalysisContrastHoverColour(),
 			bullet: backgroundBullet(format),
 			bulletStandfirst: backgroundBulletStandfirst(format),
-			speechBubble: backgroundSpeechBubble(format),
 			filterButton: backgroundFilterButton(),
 			filterButtonHover: backgroundFilterButtonHover(format),
 			filterButtonActive: backgroundFilterButtonActive(format),

dotcom-rendering/src/lib/renderElement.tsx

@@ -185,10 +185,7 @@ export const renderElement = ({
 		case 'model.dotcomrendering.pageElements.CalloutBlockElement':
 			return (
 				<Island priority="feature" defer={{ until: 'visible' }}>
-					<CalloutEmbedBlockComponent
-						callout={element}
-						format={format}
-					/>
+					<CalloutEmbedBlockComponent callout={element} />
 				</Island>
 			);
 		case 'model.dotcomrendering.pageElements.CalloutBlockElementV2':

dotcom-rendering/src/paletteDeclarations.ts

@@ -4892,6 +4892,37 @@ const staffPickBadgeTextLight: PaletteFunction = () =>
 	sourcePalette.neutral[100];
 const staffPickBadgeTextDark: PaletteFunction = () => sourcePalette.neutral[7];
 
+const speechBubbleBackgroundLight: PaletteFunction = ({ theme, design }) => {
+	switch (theme) {
+		case Pillar.News: {
+			return design === ArticleDesign.Analysis
+				? sourcePalette.news[300]
+				: sourcePalette.news[400];
+		}
+		case Pillar.Opinion: {
+			return sourcePalette.opinion[400];
+		}
+		case Pillar.Sport: {
+			return sourcePalette.sport[400];
+		}
+		case Pillar.Culture: {
+			return sourcePalette.culture[400];
+		}
+		case Pillar.Lifestyle: {
+			return sourcePalette.lifestyle[400];
+		}
+		case ArticleSpecial.Labs: {
+			return sourcePalette.labs[400];
+		}
+		case ArticleSpecial.SpecialReport: {
+			return sourcePalette.specialReport[400];
+		}
+		case ArticleSpecial.SpecialReportAlt: {
+			return sourcePalette.specialReportAlt[200];
+		}
+	}
+};
+
 const staffBadgeLight: PaletteFunction = () => sourcePalette.brand[400];
 const staffBadgeDark: PaletteFunction = () => sourcePalette.neutral[100];
 
@@ -6946,6 +6977,10 @@ const paletteColours = {
 		light: slideshowPaginationDotActiveLight,
 		dark: slideshowPaginationDotActiveDark,
 	},
+	'--speech-bubble-background': {
+		light: speechBubbleBackgroundLight,
+		dark: speechBubbleBackgroundLight,
+	},
 	'--staff-contributor-badge': {
 		light: staffBadgeLight,
 		dark: staffBadgeDark,

dotcom-rendering/src/types/palette.ts

@@ -18,7 +18,6 @@ export type Palette = {
 		analysisContrastHover: Colour;
 		bullet: Colour;
 		bulletStandfirst: Colour;
-		speechBubble: Colour;
 		filterButton: Colour;
 		filterButtonHover: Colour;
 		filterButtonActive: Colour;