Dark mode - AdSlot (#9316)

* support dark mode adslot
guardian · Oct 26, 2023 · ad2a881 · ad2a881
1 parent 0e7897a
commit ad2a881
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 19 deletions.
diff --git a/dotcom-rendering/src/components/AdSlot.apps.stories.tsx b/dotcom-rendering/src/components/AdSlot.apps.stories.tsx
@@ -1,21 +1,30 @@
+import { ArticleDesign, ArticleDisplay, Pillar } from '@guardian/libs';
 import { breakpoints } from '@guardian/source-foundations';
 import { useRef } from 'react';
+import { splitTheme } from '../../.storybook/decorators/splitThemeDecorator';
 import { AdSlot, type Props } from './AdSlot.apps';
 
 export default {
 	component: AdSlot,
 	title: 'Components/AdSlot.apps',
 	parameters: {
 		chromatic: {
-			viewports: [breakpoints.mobile, breakpoints.tablet],
+			viewports: [breakpoints.phablet, breakpoints.tablet],
 		},
 		viewport: {
-			defaultViewport: 'mobile',
+			defaultViewport: 'phablet',
 		},
 	},
 	argTypes: {
 		onClickSupportButton: { action: 'clicked' },
 	},
+	decorators: [
+		splitTheme({
+			design: ArticleDesign.Standard,
+			display: ArticleDisplay.Standard,
+			theme: Pillar.News,
+		}),
+	],
 };
 
 type Args = Omit<Props, 'ref'>;

diff --git a/dotcom-rendering/src/components/AdSlot.apps.tsx b/dotcom-rendering/src/components/AdSlot.apps.tsx
@@ -1,12 +1,8 @@
 import { css } from '@emotion/react';
-import {
-	palette,
-	remSpace,
-	textSans,
-	until,
-} from '@guardian/source-foundations';
+import { remSpace, textSans, until } from '@guardian/source-foundations';
 import { Button } from '@guardian/source-react-components';
 import { forwardRef } from 'react';
+import { palette } from '../palette';
 
 // Exported for Storybook use
 export interface Props {
@@ -19,8 +15,7 @@ const adHeightPx = 258;
 const styles = css`
 	clear: both;
 	margin: ${remSpace[4]} 0;
-	color: ${palette.neutral[20]};
-	background: ${palette.neutral[97]};
+	background: ${palette('--ad-background')};
 
 	${until.phablet} {
 		margin: 1em -${remSpace[3]};
@@ -29,7 +24,6 @@ const styles = css`
 
 const adLabelsStyles = css`
 	${textSans.xsmall()}
-	color: ${palette.neutral[46]};
 	padding: ${remSpace[3]};
 	float: left;
 
@@ -41,6 +35,7 @@ const adLabelsStyles = css`
 		float: left;
 		font-size: 16px;
 		font-weight: 400;
+		color: ${palette('--ad-labels-text')};
 	}
 `;
 
@@ -59,18 +54,20 @@ const adSlotSquareStyles = css`
 `;
 
 const supportBannerStyles = css`
-	padding: ${remSpace[3]};
-	background-color: ${palette.neutral[93]};
+	padding: ${remSpace[2]};
+	background-color: ${palette('--ad-support-banner-background')};
 
 	p {
 		${textSans.small()};
-		color: ${palette.brand[400]};
+		color: ${palette('--ad-support-banner-text')};
 		font-weight: bold;
 		margin-top: 0;
 	}
 
 	button {
 		margin-top: ${remSpace[2]};
+		color: ${palette('--ad-support-banner-button-text')};
+		background-color: ${palette('--ad-support-banner-button-background')};
 	}
 `;
 

diff --git a/dotcom-rendering/src/palette.ts b/dotcom-rendering/src/palette.ts
@@ -14,7 +14,6 @@ const headlineColourLight = ({ design }: ArticleFormat): string => {
 			return sourcePalette.neutral[10];
 	}
 };
-
 const headlineColourDark = ({ design }: ArticleFormat): string => {
 	switch (design) {
 		case ArticleDesign.Feature:
@@ -23,7 +22,6 @@ const headlineColourDark = ({ design }: ArticleFormat): string => {
 			return sourcePalette.neutral[97];
 	}
 };
-
 const headlineBackgroundColourLight = ({ design }: ArticleFormat): string => {
 	switch (design) {
 		case ArticleDesign.LiveBlog:
@@ -32,7 +30,6 @@ const headlineBackgroundColourLight = ({ design }: ArticleFormat): string => {
 			return sourcePalette.neutral[100];
 	}
 };
-
 const headlineBackgroundColourDark = ({ design }: ArticleFormat): string => {
 	switch (design) {
 		case ArticleDesign.LiveBlog:
@@ -85,12 +82,49 @@ const accordionKeyEventsBackgroundLight = (): string =>
 const accordionBackgroundDark = (): string => sourcePalette.neutral[10];
 const accordionLiveFeedBackgroundLight = (): string =>
 	sourcePalette.neutral[97];
+
 const tableOfContentsLight = (): string => sourcePalette.neutral[7];
 const tableOfContentsDark = (): string => sourcePalette.neutral[86];
-
 const tableOfContentsBorderLight = (): string => sourcePalette.neutral[86];
 const tableOfContentsBorderDark = (): string => sourcePalette.neutral[20];
 
+const adLabelsTextLight = (): string => {
+	return sourcePalette.neutral[20];
+};
+const adLabelsTextDark = (): string => {
+	return sourcePalette.neutral[100];
+};
+const adBackgroundLight = (): string => {
+	return sourcePalette.neutral[97];
+};
+const adBackgroundDark = (): string => {
+	return sourcePalette.neutral[20];
+};
+const adSupportBannerBackgroundLight = (): string => {
+	return sourcePalette.neutral[93];
+};
+const adSupportBannerBackgroundDark = (): string => {
+	return sourcePalette.neutral[46];
+};
+const adSupportBannerButtonBackgroundLight = (): string => {
+	return sourcePalette.brand[400];
+};
+const adSupportBannerButtonBackgroundDark = (): string => {
+	return sourcePalette.neutral[100];
+};
+const adSupportBannerButtonTextLight = (): string => {
+	return sourcePalette.neutral[100];
+};
+const adSupportBannerButtonTextDark = (): string => {
+	return sourcePalette.neutral[0];
+};
+const adSupportBannerTextLight = (): string => {
+	return sourcePalette.brand[400];
+};
+const adSupportBannerTextDark = (): string => {
+	return sourcePalette.neutral[100];
+};
+
 const appsFooterLinksTextLight = (): string => sourcePalette.neutral[7];
 const appsFooterLinksTextDark = (): string => sourcePalette.neutral[60];
 const appsFooterLinksBackgroundLight = (): string => sourcePalette.neutral[97];
@@ -152,7 +186,6 @@ const paletteColours = {
 		light: starRatingBackgroundColourLight,
 		dark: starRatingBackgroundColourDark,
 	},
-
 	'--block-quote-fill': {
 		light: blockQuoteFillLight,
 		dark: blockQuoteFillDark,
@@ -193,6 +226,30 @@ const paletteColours = {
 		light: tableOfContentsBorderLight,
 		dark: tableOfContentsBorderDark,
 	},
+	'--ad-background': {
+		light: adBackgroundLight,
+		dark: adBackgroundDark,
+	},
+	'--ad-labels-text': {
+		light: adLabelsTextLight,
+		dark: adLabelsTextDark,
+	},
+	'--ad-support-banner-button-background': {
+		light: adSupportBannerButtonBackgroundLight,
+		dark: adSupportBannerButtonBackgroundDark,
+	},
+	'--ad-support-banner-background': {
+		light: adSupportBannerBackgroundLight,
+		dark: adSupportBannerBackgroundDark,
+	},
+	'--ad-support-banner-button-text': {
+		light: adSupportBannerButtonTextLight,
+		dark: adSupportBannerButtonTextDark,
+	},
+	'--ad-support-banner-text': {
+		light: adSupportBannerTextLight,
+		dark: adSupportBannerTextDark,
+	},
 	'--apps-footer-links-text': {
 		light: appsFooterLinksTextLight,
 		dark: appsFooterLinksTextDark,