From ad2a8812bd742f6dfff4677d33b969ccadfdea95 Mon Sep 17 00:00:00 2001 From: Daniel Clifton <110032454+DanielCliftonGuardian@users.noreply.github.com> Date: Thu, 26 Oct 2023 14:10:24 +0100 Subject: [PATCH] Dark mode - AdSlot (#9316) * support dark mode adslot --- .../src/components/AdSlot.apps.stories.tsx | 13 +++- .../src/components/AdSlot.apps.tsx | 21 +++--- dotcom-rendering/src/palette.ts | 67 +++++++++++++++++-- 3 files changed, 82 insertions(+), 19 deletions(-) diff --git a/dotcom-rendering/src/components/AdSlot.apps.stories.tsx b/dotcom-rendering/src/components/AdSlot.apps.stories.tsx index 156d2131b9a..f15d26a1638 100644 --- a/dotcom-rendering/src/components/AdSlot.apps.stories.tsx +++ b/dotcom-rendering/src/components/AdSlot.apps.stories.tsx @@ -1,5 +1,7 @@ +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 { @@ -7,15 +9,22 @@ export default { 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; diff --git a/dotcom-rendering/src/components/AdSlot.apps.tsx b/dotcom-rendering/src/components/AdSlot.apps.tsx index e365fc1460f..c3341f0a62f 100644 --- 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 index a4914b8ebbd..b29f7d8b0b3 100644 --- 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,