Use the news palette for special report and special report alt in highlights (#15009)

* Use the `news` palette for `special report` and `special report alt` paletted highlight cards.

This has been requested by design and editorial

* Add a special report card to the highlights story

Author: abeddow91

dotcom-rendering/src/components/Masthead/HighlightsCard.stories.tsx

@@ -1,6 +1,8 @@
 import { css } from '@emotion/react';
+import { ArticleSpecial } from '@guardian/libs';
 import { from } from '@guardian/source/foundations';
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import type { ArticleTheme } from '../../lib/articleFormat';
 import { ArticleDesign, ArticleDisplay, Pillar } from '../../lib/articleFormat';
 import type { MainMedia } from '../../types/mainMedia';
 import { HighlightsCard } from './HighlightsCard';
@@ -68,7 +70,7 @@ export const WithQuotes: Story = {
 		showQuotedHeadline: true,
 	},
 	render: (args) => {
-		const Card = ({ pillar }: { pillar: Pillar }) => (
+		const Card = ({ pillar }: { pillar: ArticleTheme }) => (
 			<CardWrapper>
 				<HighlightsCard
 					{...args}
@@ -88,6 +90,7 @@ export const WithQuotes: Story = {
 				<Card pillar={Pillar.Sport} />
 				<Card pillar={Pillar.Culture} />
 				<Card pillar={Pillar.Lifestyle} />
+				<Card pillar={ArticleSpecial.SpecialReport} />
 			</>
 		);
 	},

dotcom-rendering/src/paletteDeclarations.ts

@@ -5873,9 +5873,8 @@ const highlightsCardKickerTextDark: PaletteFunction = (format) => {
 		case ArticleSpecial.Labs:
 			return sourcePalette.labs[200];
 		case ArticleSpecial.SpecialReport:
-			return sourcePalette.news[400];
 		case ArticleSpecial.SpecialReportAlt:
-			return sourcePalette.specialReportAlt[200];
+			return sourcePalette.news[500];
 	}
 };
 
@@ -5890,9 +5889,8 @@ const highlightsCardBackgroudLight: PaletteFunction = (format) => {
 		case ArticleSpecial.Labs:
 			return sourcePalette.labs[200];
 		case ArticleSpecial.SpecialReport:
-			return sourcePalette.news[400];
 		case ArticleSpecial.SpecialReportAlt:
-			return sourcePalette.specialReportAlt[200];
+			return sourcePalette.news[800];
 	}
 };
 const highlightsCardBackgroundDark: PaletteFunction = () =>
@@ -5909,9 +5907,8 @@ const highlightsCardHeadlineLight: PaletteFunction = (format) => {
 		case ArticleSpecial.Labs:
 			return sourcePalette.labs[200];
 		case ArticleSpecial.SpecialReport:
-			return sourcePalette.news[400];
 		case ArticleSpecial.SpecialReportAlt:
-			return sourcePalette.specialReportAlt[200];
+			return sourcePalette.news[400];
 	}
 };
 const highlightsCardHeadlineDark: PaletteFunction = () =>
@@ -5928,9 +5925,8 @@ const highlightsCardQuoteIconLight: PaletteFunction = (format) => {
 		case ArticleSpecial.Labs:
 			return sourcePalette.labs[200];
 		case ArticleSpecial.SpecialReport:
-			return sourcePalette.news[400];
 		case ArticleSpecial.SpecialReportAlt:
-			return sourcePalette.specialReportAlt[200];
+			return sourcePalette.news[400];
 	}
 };
 const highlightsCardQuoteIconDark: PaletteFunction = () =>