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

datawrapper: Use dark background in dark mode #12831

Merged
merged 4 commits into from
Nov 15, 2024
Merged

datawrapper: Use dark background in dark mode #12831

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
11ac343
datawrapper: Use dark background in dark mode
emdash-ie Nov 12, 2024
842600d
Use paler background than article for live blogs
emdash-ie Nov 13, 2024
3a2fffd
Use same background colour for dead blogs as live
emdash-ie Nov 14, 2024
cbe29f1
Document link with articleBackgroundDark
emdash-ie Nov 14, 2024
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
6 changes: 5 additions & 1 deletion dotcom-rendering/src/components/InteractiveBlockComponent.importable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,11 @@ const wrapperStyle = ({
isDatawrapperGraphic: boolean;
}) => css`
${format.theme === ArticleSpecial.Labs ? textSans17 : article17}
background-color: ${themePalette('--interactive-block-background')};
background-color: ${themePalette(
isDatawrapperGraphic
? '--interactive-block-background-datawrapper'
: '--interactive-block-background',
)};
min-height: ${getMinHeight(role, loaded)};
position: relative;
display: flex;
Expand Down
36 changes: 36 additions & 0 deletions dotcom-rendering/src/palette.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4087,6 +4087,38 @@ const interactiveBlockBackgroundLight: PaletteFunction = ({

const interactiveBlockBackgroundDark = () => sourcePalette.neutral[100];

const interactiveBlockBackgroundDatawrapperDark: PaletteFunction = ({
design,
theme,
}) => {
switch (design) {
case ArticleDesign.DeadBlog:
return sourcePalette.neutral[7];
case ArticleDesign.LiveBlog:
return sourcePalette.neutral[10];
case ArticleDesign.Standard:
case ArticleDesign.Review:
case ArticleDesign.Explainer:
case ArticleDesign.Feature:
case ArticleDesign.Interview:
case ArticleDesign.Interactive:
case ArticleDesign.PhotoEssay:
case ArticleDesign.FullPageInteractive:
case ArticleDesign.NewsletterSignup:
case ArticleDesign.Comment:
case ArticleDesign.Letter:
case ArticleDesign.Editorial:
switch (theme) {
case ArticleSpecial.SpecialReportAlt:
return sourcePalette.specialReportAlt[100];
default:
return sourcePalette.neutral[10];
}
default:
return sourcePalette.neutral[10];
}
};

const mostViewedHeadlineLight = (): string => sourcePalette.neutral[7];
const mostViewedHeadlineDark = (): string => sourcePalette.neutral[86];

Expand Down Expand Up @@ -6551,6 +6583,10 @@ const paletteColours = {
light: interactiveBlockBackgroundLight,
dark: interactiveBlockBackgroundDark,
},
'--interactive-block-background-datawrapper': {
light: interactiveBlockBackgroundLight,
dark: interactiveBlockBackgroundDatawrapperDark,
},
'--interactive-contents-hover': {
light: interactiveContentsHoverLight,
dark: interactiveContentsHoverDark,
Expand Down
Loading