Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dark mode - AdSlot #9316

Merged
merged 7 commits into from
Oct 26, 2023
Merged

Dark mode - AdSlot #9316

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
482926d
support dark mode adslot
DanielCliftonGuardian Oct 25, 2023
563239f
reduce banner padding to 8px
DanielCliftonGuardian Oct 25, 2023
a008791
tidy up
DanielCliftonGuardian Oct 26, 2023
f0136a5
Merge branch 'main' into adslot-darkmode
DanielCliftonGuardian Oct 26, 2023
087ddc8
fix
DanielCliftonGuardian Oct 26, 2023
0deb459
Merge branch 'main' into adslot-darkmode
DanielCliftonGuardian Oct 26, 2023
94adc1b
Merge branch 'main' into adslot-darkmode
DanielCliftonGuardian Oct 26, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 11 additions & 2 deletions dotcom-rendering/src/components/AdSlot.apps.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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],
DanielCliftonGuardian marked this conversation as resolved.
Show resolved Hide resolved
},
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'>;
Expand Down
21 changes: 9 additions & 12 deletions dotcom-rendering/src/components/AdSlot.apps.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -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]};
Expand All @@ -29,7 +24,6 @@ const styles = css`

const adLabelsStyles = css`
${textSans.xsmall()}
color: ${palette.neutral[46]};
padding: ${remSpace[3]};
float: left;

Expand All @@ -41,6 +35,7 @@ const adLabelsStyles = css`
float: left;
font-size: 16px;
font-weight: 400;
color: ${palette('--ad-labels-text')};
}
`;

Expand All @@ -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')};
}
`;

Expand Down
67 changes: 62 additions & 5 deletions dotcom-rendering/src/palette.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ const headlineColourLight = ({ design }: ArticleFormat): string => {
return sourcePalette.neutral[10];
}
};

const headlineColourDark = ({ design }: ArticleFormat): string => {
switch (design) {
case ArticleDesign.Feature:
Expand All @@ -23,7 +22,6 @@ const headlineColourDark = ({ design }: ArticleFormat): string => {
return sourcePalette.neutral[97];
}
};

const headlineBackgroundColourLight = ({ design }: ArticleFormat): string => {
switch (design) {
case ArticleDesign.LiveBlog:
Expand All @@ -32,7 +30,6 @@ const headlineBackgroundColourLight = ({ design }: ArticleFormat): string => {
return sourcePalette.neutral[100];
}
};

const headlineBackgroundColourDark = ({ design }: ArticleFormat): string => {
switch (design) {
case ArticleDesign.LiveBlog:
Expand Down Expand Up @@ -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];
Copy link
Contributor

@mxdvl mxdvl Jul 4, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking at the previous value and the web implementation, I belive this should have been neutral[46].

Discovered jointly with @Jakeii in #11648

};
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];
Expand Down Expand Up @@ -152,7 +186,6 @@ const paletteColours = {
light: starRatingBackgroundColourLight,
dark: starRatingBackgroundColourDark,
},

'--block-quote-fill': {
light: blockQuoteFillLight,
dark: blockQuoteFillDark,
Expand Down Expand Up @@ -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,
Expand Down
Loading