Merge pull request #14513 from guardian/dina/update-labsSection-to-not-use-containeroverride

Update the `LabsSection` to stop using `ContainerOverrides`

Author: deedeeh

dotcom-rendering/src/components/LabsSection.tsx

@@ -21,7 +21,6 @@ import { palette } from '../palette';
 import LabsLogo from '../static/logos/the-guardian-labs.svg';
 import type { DCRBadgeType } from '../types/badge';
 import { Badge } from './Badge';
-import { ContainerOverrides } from './ContainerOverrides';
 import { Details } from './Details';
 import { Island } from './Island';
 import { Section } from './Section';
@@ -75,11 +74,17 @@ type Props = {
 };
 
 const leftColumnBackground = css`
-	background-color: ${palette('--section-background-left')};
+	background-color: ${sourcePalette.labs[400]};
+	@media (prefers-color-scheme: dark) {
+		background-color: ${sourcePalette.labs[200]};
+	}
 `;
 
 const contentBackground = css`
-	background-color: ${palette('--section-background')};
+	background-color: ${sourcePalette.neutral[93]};
+	@media (prefers-color-scheme: dark) {
+		background-color: ${sourcePalette.neutral[20]};
+	}
 `;
 
 const leftColumnWidthFromLeftCol = css`
@@ -167,7 +172,10 @@ const contentSidePaddingFromLeftCol = css`
 
 const linkStyles = css`
 	text-decoration: none;
-	color: ${palette('--article-section-title')};
+	color: ${sourcePalette.neutral[100]};
+	@media (prefers-color-scheme: dark) {
+		color: ${sourcePalette.neutral[97]};
+	}
 
 	:hover {
 		text-decoration: underline;
@@ -176,8 +184,11 @@ const linkStyles = css`
 
 const headerStyles = css`
 	${textSansBold20};
-	color: ${palette('--article-section-title')};
+	color: ${sourcePalette.neutral[100]};
 	overflow-wrap: break-word; /*if a single word is too long, this will break the word up rather than have the display be affected*/
+	@media (prefers-color-scheme: dark) {
+		color: ${sourcePalette.neutral[97]};
+	}
 `;
 
 const containerMargins = css`
@@ -195,9 +206,12 @@ const badgeStyles = css`
 
 const paidForByStyles = css`
 	${textSansBold12};
-	color: ${palette('--treat-text')};
+	color: ${sourcePalette.neutral[46]};
 	margin-top: ${space[3]}px;
 	margin-bottom: ${space[1]}px;
+	@media (prefers-color-scheme: dark) {
+		color: ${sourcePalette.neutral[38]};
+	}
 `;
 
 const GuardianLabsTitle = ({ title, url }: { title: string; url?: string }) => {
@@ -379,87 +393,81 @@ export const LabsSection = ({
 	editionId,
 }: Props) => {
 	return (
-		<ContainerOverrides containerPalette="Branded">
-			<Section
-				fullWidth={true}
-				sectionId={sectionId}
-				padSides={false}
-				element="section"
-				containerName={containerName}
-				ophanComponentLink={ophanComponentLink}
-				ophanComponentName={ophanComponentName}
-				hasPageSkin={hasPageSkin}
-				borderColour={palette('--section-border')}
-				backgroundColour="transparent"
-				/**
-				 * dumathoin?
-				 * https://github.com/guardian/frontend/pull/17625
-				 * https://forgottenrealms.fandom.com/wiki/Dumathoin
-				 */
-				className={'dumathoin'}
-			>
-				<Container hasPageSkin={hasPageSkin}>
-					<LeftColumn hasPageSkin={hasPageSkin}>
-						<div>
-							<LabsContainerHeader
-								summaryBackgroundColour={
-									sourcePalette.neutral[0]
-								}
-								summaryTextColour={sourcePalette.neutral[97]}
-								summaryTextSecondaryColour={
-									sourcePalette.labs[400]
-								}
-								hasPageSkin={hasPageSkin}
+		<Section
+			fullWidth={true}
+			sectionId={sectionId}
+			padSides={false}
+			element="section"
+			containerName={containerName}
+			ophanComponentLink={ophanComponentLink}
+			ophanComponentName={ophanComponentName}
+			hasPageSkin={hasPageSkin}
+			borderColour={palette('--section-border')}
+			backgroundColour="transparent"
+			/**
+			 * dumathoin?
+			 * https://github.com/guardian/frontend/pull/17625
+			 * https://forgottenrealms.fandom.com/wiki/Dumathoin
+			 */
+			className={'dumathoin'}
+		>
+			<Container hasPageSkin={hasPageSkin}>
+				<LeftColumn hasPageSkin={hasPageSkin}>
+					<div>
+						<LabsContainerHeader
+							summaryBackgroundColour={sourcePalette.neutral[0]}
+							summaryTextColour={sourcePalette.neutral[97]}
+							summaryTextSecondaryColour={sourcePalette.labs[400]}
+							hasPageSkin={hasPageSkin}
+						/>
+						<GuardianLabsTitle title={title} url={url} />
+					</div>
+
+					<Link
+						href={`https://www.theguardian.com/guardian-labs${getLabsUrlSuffix(
+							editionId,
+						)}`}
+						cssOverrides={css`
+							text-align: right;
+						`}
+					>
+						<LabsLogo />
+					</Link>
+				</LeftColumn>
+				<Content hasPageSkin={hasPageSkin}>
+					{children}
+					{canShowMore && (
+						<Island
+							priority="feature"
+							defer={{ until: 'interaction' }}
+						>
+							<ShowMore
+								title={title}
+								sectionId={sectionId}
+								collectionId={collectionId}
+								pageId={pageId}
+								ajaxUrl={ajaxUrl}
+								containerPalette={'Branded'}
+								showAge={true}
+								discussionApiUrl={discussionApiUrl}
+								editionId={editionId}
+							/>
+						</Island>
+					)}
+					{badge && (
+						<div css={badgeStyles}>
+							<div css={paidForByStyles}>Paid for by</div>
+							<Badge
+								imageSrc={badge.imageSrc}
+								href={badge.href}
+								ophanComponentLink={`labs-logo | ${ophanComponentName}`}
+								ophanComponentName={`labs-logo-${ophanComponentName}`}
+								isInLabsSection={true}
 							/>
-							<GuardianLabsTitle title={title} url={url} />
 						</div>
-
-						<Link
-							href={`https://www.theguardian.com/guardian-labs${getLabsUrlSuffix(
-								editionId,
-							)}`}
-							cssOverrides={css`
-								text-align: right;
-							`}
-						>
-							<LabsLogo />
-						</Link>
-					</LeftColumn>
-					<Content hasPageSkin={hasPageSkin}>
-						{children}
-						{canShowMore && (
-							<Island
-								priority="feature"
-								defer={{ until: 'interaction' }}
-							>
-								<ShowMore
-									title={title}
-									sectionId={sectionId}
-									collectionId={collectionId}
-									pageId={pageId}
-									ajaxUrl={ajaxUrl}
-									containerPalette={'Branded'}
-									showAge={true}
-									discussionApiUrl={discussionApiUrl}
-									editionId={editionId}
-								/>
-							</Island>
-						)}
-						{badge && (
-							<div css={badgeStyles}>
-								<div css={paidForByStyles}>Paid for by</div>
-								<Badge
-									imageSrc={badge.imageSrc}
-									href={badge.href}
-									ophanComponentLink={`labs-logo | ${ophanComponentName}`}
-									ophanComponentName={`labs-logo-${ophanComponentName}`}
-									isInLabsSection={true}
-								/>
-							</div>
-						)}
-					</Content>
-				</Container>
-			</Section>
-		</ContainerOverrides>
+					)}
+				</Content>
+			</Container>
+		</Section>
 	);
 };