Add crossword colours to palette (#13618)

Author: jamesmockett

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

@@ -235,5 +235,9 @@ export const CrosswordComponent = ({
 		data={data}
 		Layout={Layout}
 		MobileBannerAd={canRenderAds ? MobileBannerAdComponent : undefined}
+		textColor={palette('--crossword-text')}
+		anagramHelperBackgroundColor={palette(
+			'--crossword-anagram-helper-background',
+		)}
 	/>
 );

dotcom-rendering/src/paletteDeclarations.ts

@@ -5770,10 +5770,16 @@ const pillDivider: PaletteFunction = () =>
 	transparentColour(sourcePalette.neutral[100], 0.5);
 const pillLiveBullet: PaletteFunction = () => sourcePalette.news[500];
 
+const crosswordAnagramHelperBackgroundLight: PaletteFunction = () =>
+	sourcePalette.neutral[97];
+const crosswordAnagramHelperBackgroundDark: PaletteFunction = () =>
+	sourcePalette.neutral[20];
 const crosswordCluesHeaderBorderTop: PaletteFunction = () =>
 	sourcePalette.lifestyle[400];
 const crosswordCluesHeaderBorderBottom: PaletteFunction = () =>
 	sourcePalette.neutral[86];
+const crosswordTextLight: PaletteFunction = () => sourcePalette.neutral[7];
+const crosswordTextDark: PaletteFunction = () => sourcePalette.neutral[86];
 
 // ----- Palette ----- //
 
@@ -6248,6 +6254,10 @@ const paletteColours = {
 		light: cricketScoreboardLinkText,
 		dark: cricketScoreboardLinkText,
 	},
+	'--crossword-anagram-helper-background': {
+		light: crosswordAnagramHelperBackgroundLight,
+		dark: crosswordAnagramHelperBackgroundDark,
+	},
 	'--crossword-clues-header-border-bottom': {
 		light: crosswordCluesHeaderBorderBottom,
 		dark: crosswordCluesHeaderBorderBottom,
@@ -6256,6 +6266,10 @@ const paletteColours = {
 		light: crosswordCluesHeaderBorderTop,
 		dark: crosswordCluesHeaderBorderTop,
 	},
+	'--crossword-text': {
+		light: crosswordTextLight,
+		dark: crosswordTextDark,
+	},
 	'--dateline': {
 		light: datelineLight,
 		dark: datelineDark,