Use colourSchemeBackground parameter

For web meta component stories.

Co-authored-by: Marjan Kalanaki <[email protected]>

Author: JamieB-gu

dotcom-rendering/src/components/ArticleMeta.apps.stories.tsx

@@ -8,8 +8,8 @@ import {
 	getAllThemes,
 	Pillar,
 } from '../lib/articleFormat';
-import { ArticleMetaApps } from './ArticleMeta.apps';
 import { palette } from '../palette';
+import { ArticleMetaApps } from './ArticleMeta.apps';
 
 const meta = {
 	component: ArticleMetaApps,

dotcom-rendering/src/components/ArticleMeta.apps.tsx

@@ -3,6 +3,7 @@ import { isUndefined } from '@guardian/libs';
 import { from, space, until } from '@guardian/source/foundations';
 import { StraightLines } from '@guardian/source-development-kitchen/react-components';
 import type { ReactNode } from 'react';
+import { grid } from '../grid';
 import { interactiveLegacyClasses } from '../layouts/lib/interactiveLegacyStyling';
 import {
 	ArticleDesign,
@@ -22,7 +23,6 @@ import { Dateline } from './Dateline';
 import { FollowWrapper } from './FollowWrapper.importable';
 import { Island } from './Island';
 import { LiveblogNotifications } from './LiveblogNotifications.importable';
-import { grid } from '../grid';
 
 type Props = {
 	format: ArticleFormat;

dotcom-rendering/src/components/ArticleMeta.web.stories.tsx

@@ -343,21 +343,10 @@ export const GalleryDesign = {
 			display: ArticleDisplay.Standard,
 			design: ArticleDesign.Gallery,
 		}),
+		colourSchemeBackground: {
+			light: palette('--article-background'),
+			dark: palette('--article-background'),
+		},
 	},
-	decorators: [
-		leftColumnDecorator,
-		(Story) => (
-			<div
-				css={css`
-					background-color: ${sourcePalette.neutral[7]}};
-
-					${from.desktop} {
-						background-color: inherit;
-					}
-				`}
-			>
-				<Story />
-			</div>
-		),
-	],
+	decorators: [leftColumnDecorator],
 } satisfies Story;

dotcom-rendering/src/layouts/GalleryLayout.tsx

@@ -1,6 +1,7 @@
 import { css } from '@emotion/react';
 import { from } from '@guardian/source/foundations';
 import { ArticleHeadline } from '../components/ArticleHeadline';
+import { ArticleMetaApps } from '../components/ArticleMeta.apps';
 import { ArticleMeta } from '../components/ArticleMeta.web';
 import { ArticleTitle } from '../components/ArticleTitle';
 import { MainMediaGallery } from '../components/MainMediaGallery';
@@ -12,7 +13,6 @@ import type { NavType } from '../model/extract-nav';
 import { palette } from '../palette';
 import type { Gallery } from '../types/article';
 import type { RenderingTarget } from '../types/renderingTarget';
-import { ArticleMetaApps } from '../components/ArticleMeta.apps';
 
 interface Props {
 	gallery: Gallery;