Fix light and dark mode colors for lineups component

Author: marjisound

dotcom-rendering/fixtures/generated/match-report.ts

@@ -275,7 +275,6 @@ export const matchReport: MatchReportType = {
 		corners: 10,
 		fouls: 4,
 		colours: '#01009a',
-		// colours: '#fff', // #fef502
 		crest: 'https://sport.guim.co.uk/football/crests/120/7699.png',
 	},
 	awayTeam: {

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

@@ -1,6 +1,9 @@
+import { css } from '@emotion/react';
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { allModes } from '../../.storybook/modes';
 import { matchReport } from '../../fixtures/generated/match-report';
+import { grid } from '../grid';
+import { palette } from '../palette';
 import { type TeamType } from '../types/sport';
 import { Lineups as LineupsComponent } from './Lineups';
 
@@ -18,6 +21,26 @@ const meta = {
 			},
 		},
 	},
+	decorators: [
+		(Story) => (
+			<div
+				css={css`
+					background-color: ${palette(
+						'--football-match-info-background',
+					)};
+					${grid.paddedContainer}
+				`}
+			>
+				<div
+					css={css`
+						${grid.column.centre}
+					`}
+				>
+					<Story />
+				</div>
+			</div>
+		),
+	],
 } satisfies Meta<typeof LineupsComponent>;
 
 export default meta;