Add football stat colours to palette

Author: jamesmockett

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

@@ -1,6 +1,7 @@
 import { css } from '@emotion/react';
-import { palette, space } from '@guardian/source/foundations';
+import { space } from '@guardian/source/foundations';
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { palette } from '../palette';
 import { FootballMatchStat } from './FootballMatchStat';
 
 const meta = {
@@ -11,7 +12,9 @@ const meta = {
 			<div
 				css={css`
 					padding: ${space[4]}px;
-					background-color: ${palette.neutral[97]};
+					background-color: ${palette(
+						'--football-live-blog-background',
+					)};
 				`}
 			>
 				<Story />

dotcom-rendering/src/components/FootballMatchStat.tsx

@@ -1,18 +1,18 @@
 import { css } from '@emotion/react';
 import {
 	from,
-	palette,
 	textSansBold14,
 	textSansBold15,
 	textSansBold20,
 	textSansBold28,
 	visuallyHidden,
 } from '@guardian/source/foundations';
+import { palette } from '../palette';
 
 const containerCss = css`
 	position: relative;
 	padding: 5px 10px 10px;
-	border: 1px solid ${palette.neutral[86]};
+	border: 1px solid ${palette('--footall-match-stat-border')};
 	border-radius: 6px;
 	&::before {
 		position: absolute;
@@ -21,7 +21,7 @@ const containerCss = css`
 		bottom: 0;
 		width: 1px;
 		height: 24px;
-		background-color: ${palette.neutral[86]};
+		background-color: ${palette('--footall-match-stat-border')};
 	}
 `;
 
@@ -43,7 +43,7 @@ const labelCss = css`
 	${textSansBold14};
 	grid-area: label;
 	justify-self: center;
-	color: ${palette.neutral[7]};
+	color: ${palette('--footall-match-stat-name')};
 	${from.desktop} {
 		${textSansBold15};
 	}

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

@@ -1,10 +1,11 @@
 import { css } from '@emotion/react';
-import { breakpoints, from, palette } from '@guardian/source/foundations';
+import { breakpoints, from } from '@guardian/source/foundations';
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { palette } from '../palette';
 import { FootballMiniMatchStats as FootballMiniMatchStatsComponent } from './FootballMiniMatchStats';
 
 const gridCss = css`
-	background-color: ${palette.neutral[97]};
+	background-color: ${palette('--football-live-blog-background')};
 	/**
 	 * Extremely simplified live blog grid layout as we're only interested in
 	 * the 240px wide left column added at the desktop breakpoint.

dotcom-rendering/src/components/FootballMiniMatchStats.tsx

@@ -1,9 +1,10 @@
 import { css } from '@emotion/react';
-import { from, palette } from '@guardian/source/foundations';
+import { from } from '@guardian/source/foundations';
 import {
 	LinkButton,
 	SvgArrowRightStraight,
 } from '@guardian/source/react-components';
+import { palette } from '../palette';
 import { FootballMatchStat } from './FootballMatchStat';
 
 const containerCss = css`
@@ -74,7 +75,11 @@ export const FootballMiniMatchStats = ({
 				size="small"
 				icon={<SvgArrowRightStraight />}
 				iconSide="right"
-				theme={{ backgroundPrimary: palette.sport[400] }}
+				theme={{
+					backgroundPrimary: palette(
+						'--footall-match-stat-button-background',
+					),
+				}}
 			>
 				<span css={buttonTextCss}>More stats, line-ups and tables</span>
 				<span css={buttonTextShortCss}>Stats and line ups</span>

dotcom-rendering/src/paletteDeclarations.ts

@@ -7052,6 +7052,10 @@ const paletteColours = {
 		light: () => '#3DB540',
 		dark: () => '#3DB540',
 	},
+	'--football-live-blog-background': {
+		light: () => sourcePalette.neutral[97],
+		dark: () => sourcePalette.neutral[10],
+	},
 	'--football-match-hover': {
 		light: () => sourcePalette.neutral[93],
 		dark: () => sourcePalette.neutral[38],
@@ -7064,6 +7068,18 @@ const paletteColours = {
 		light: () => sourcePalette.sport[500],
 		dark: () => sourcePalette.sport[500],
 	},
+	'--footall-match-stat-border': {
+		light: () => sourcePalette.neutral[86],
+		dark: () => sourcePalette.neutral[20],
+	},
+	'--footall-match-stat-button-background': {
+		light: () => sourcePalette.sport[400],
+		dark: () => sourcePalette.sport[400],
+	},
+	'--footall-match-stat-name': {
+		light: () => sourcePalette.neutral[7],
+		dark: () => sourcePalette.neutral[86],
+	},
 	'--football-score-border': {
 		light: () => sourcePalette.neutral[7],
 		dark: () => sourcePalette.neutral[7],