Use existing palette mechanism to add contrasting colour

Author: jamesmockett

dotcom-rendering/src/components/FootballMatchStat.tsx

@@ -98,15 +98,8 @@ const decideContrastRequired = (colour: string) => {
 const addContrastingBorderCss = (colour: string) => {
 	const mode = decideContrastRequired(colour);
 	if (mode === 'none') return null;
-
 	return css`
-		/* stylelint-disable-next-line media-query-no-invalid */
-		@media (prefers-color-scheme: ${mode}) {
-			border: 1px solid ${palette('--football-match-stat-border')};
-		}
-		[data-color-scheme='${mode}'] & {
-			border: 1px solid ${palette('--football-match-stat-border')};
-		}
+		border: 1px solid ${palette(`--football-match-stat-contrast-${mode}`)};
 	`;
 };
 

dotcom-rendering/src/paletteDeclarations.ts

@@ -7124,6 +7124,14 @@ const paletteColours = {
 		light: () => '#00679E', // replace with Source's `calculateHoverColour` when available
 		dark: () => '#00A1E6',
 	},
+	'--football-match-stat-contrast-dark': {
+		light: () => 'transparent',
+		dark: () => sourcePalette.neutral[46],
+	},
+	'--football-match-stat-contrast-light': {
+		light: () => sourcePalette.neutral[46],
+		dark: () => 'transparent',
+	},
 	'--football-match-stat-text': {
 		light: () => sourcePalette.neutral[7],
 		dark: () => sourcePalette.neutral[86],