Implement darkmode for article body links

dotcom-rendering/src/components/ArticleBody.tsx

@@ -3,13 +3,12 @@ import { ArticleDesign, ArticleDisplay } from '@guardian/libs';
 import type { ArticleFormat } from '@guardian/libs';
 import { between, body, headline, space } from '@guardian/source-foundations';
 import { ArticleRenderer } from '../lib/ArticleRenderer';
-import { decidePalette } from '../lib/decidePalette';
 import { decideLanguage, decideLanguageDirection } from '../lib/lang';
 import { revealStyles } from '../lib/revealStyles';
 import type { ImageForAppsLightbox } from '../model/appsLightboxImages';
+import { palette as themePalette } from '../palette';
 import type { ServerSideTests, Switches } from '../types/config';
 import type { TableOfContentsItem } from '../types/frontend';
-import type { Palette } from '../types/palette';
 import type { TagType } from '../types/tag';
 import { Island } from './Island';
 import { LiveBlogRenderer } from './LiveBlogRenderer';
@@ -92,15 +91,16 @@ const bodyPadding = css`
 	}
 `;
 
-const globalLinkStyles = (palette: Palette) => css`
+const globalLinkStyles = () => css`
 	a:not([data-ignore='global-link-styling']) {
 		text-decoration: none;
-		border-bottom: 1px solid ${palette.border.articleLink};
-		color: ${palette.text.articleLink};
+		border-bottom: 1px solid ${themePalette('--article-link-border')};
+		color: ${themePalette('--article-link-text')};
 
 		:hover {
-			color: ${palette.text.articleLinkHover};
-			border-bottom: 1px solid ${palette.border.articleLinkHover};
+			color: ${themePalette('--article-link-text-hover')};
+			border-bottom: 1px solid
+				${themePalette('--article-link-border-hover')};
 		}
 	}
 `;
@@ -142,7 +142,6 @@ export const ArticleBody = ({
 	imagesForAppsLightbox,
 }: Props) => {
 	const isInteractive = format.design === ArticleDesign.Interactive;
-	const palette = decidePalette(format);
 	const language = decideLanguage(lang);
 	const languageDirection = decideLanguageDirection(isRightToLeftLang);
 
@@ -159,7 +158,7 @@ export const ArticleBody = ({
 					globalStrongStyles,
 					globalH2Styles(format.display),
 					globalH3Styles(format.display),
-					globalLinkStyles(palette),
+					globalLinkStyles(),
 					// revealStyles is used to animate the reveal of new blocks
 					(format.design === ArticleDesign.DeadBlog ||
 						format.design === ArticleDesign.LiveBlog) &&
@@ -212,7 +211,7 @@ export const ArticleBody = ({
 					globalH3Styles(format.display),
 					globalOlStyles(),
 					globalStrongStyles,
-					globalLinkStyles(palette),
+					globalLinkStyles(),
 				]}
 				lang={language}
 				dir={languageDirection}

dotcom-rendering/src/layouts/StandardLayout.tsx

@@ -439,7 +439,7 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 											props.NAV.currentNavLink
 										}
 										linkHoverColour={themePalette(
-											'--article-link-hover',
+											'--article-link-text-hover',
 										)}
 										borderColour={themePalette(
 											'--sub-nav-border',
@@ -954,7 +954,7 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 									subNavSections={props.NAV.subNavSections}
 									currentNavLink={props.NAV.currentNavLink}
 									linkHoverColour={themePalette(
-										'--article-link-hover',
+										'--article-link-text-hover',
 									)}
 									borderColour={themePalette(
 										'--sub-nav-border',

dotcom-rendering/src/lib/decidePalette.ts

@@ -381,6 +381,7 @@ const textSyndicationButton = (format: ArticleFormat): string => {
 	return text.supporting;
 };
 
+/** @deprecated this has been moved to the theme palette (--article-link-text) */
 const textArticleLink = (format: ArticleFormat): string => {
 	if (format.design === ArticleDesign.DeadBlog) {
 		switch (format.theme) {
@@ -505,7 +506,7 @@ const textStandfirstLink = (format: ArticleFormat): string => {
 	}
 };
 
-/** @deprecated this has been moved to the theme palette */
+/** @deprecated this has been moved to the theme palette (--article-link-text-hover) */
 const textArticleLinkHover = (format: ArticleFormat): string => {
 	if (format.design === ArticleDesign.DeadBlog) {
 		switch (format.theme) {
@@ -1300,6 +1301,7 @@ const borderPinnedPost = (format: ArticleFormat): string => {
 	}
 };
 
+/** @deprecated this has been moved to the theme palette ('--article-link-border) */
 const borderArticleLink = (format: ArticleFormat): string => {
 	if (format.theme === ArticleSpecial.Labs) return neutral[60];
 
@@ -1438,6 +1440,7 @@ const backgroundMatchNav = (): string => {
 const backgroundUnderline = (format: ArticleFormat): string =>
 	transparentColour(textCardKicker(format));
 
+/** @deprecated this has been moved to the theme palette (--article-link-border-hover) */
 const borderArticleLinkHover = (format: ArticleFormat): string => {
 	if (format.theme === ArticleSpecial.Labs) return BLACK;
 	if (format.theme === ArticleSpecial.SpecialReport)

dotcom-rendering/src/palette.ts

@@ -1230,7 +1230,43 @@ const articleBackgroundDark = ({ design, theme }: ArticleFormat) => {
 
 const articleSectionBackground = () => sourcePalette.brand[400];
 
-const articleLinkHover = ({ design, theme }: ArticleFormat): string => {
+const articleLinkTextLight = ({ design, theme }: ArticleFormat): string => {
+	if (design === ArticleDesign.Analysis) return sourcePalette.news[300];
+	switch (theme) {
+		case Pillar.Lifestyle:
+			return sourcePalette.lifestyle[300];
+		case ArticleSpecial.Labs:
+			return sourcePalette.neutral[7];
+		case ArticleSpecial.SpecialReport:
+			return sourcePalette.specialReport[400];
+		case ArticleSpecial.SpecialReportAlt:
+			return sourcePalette.news[400];
+		default:
+			return pillarPalette(theme, 400);
+	}
+};
+
+const articleLinkTextDark = (): string => sourcePalette.neutral[86];
+
+const articleLinkBorderLight = ({ design, theme }: ArticleFormat): string => {
+	if (theme === ArticleSpecial.Labs) return sourcePalette.neutral[60];
+
+	if (theme === ArticleSpecial.SpecialReport)
+		return sourcePalette.specialReport[300];
+
+	if (
+		theme === ArticleSpecial.SpecialReportAlt &&
+		design !== ArticleDesign.DeadBlog &&
+		design !== ArticleDesign.LiveBlog
+	)
+		return transparentColour(sourcePalette.neutral[60], 0.3);
+
+	return sourcePalette.neutral[86];
+};
+
+const articleLinkBorderDark = () => sourcePalette.neutral[46];
+
+const articleLinkHoverLight = ({ design, theme }: ArticleFormat): string => {
 	switch (design) {
 		case ArticleDesign.DeadBlog:
 			switch (theme) {
@@ -1297,6 +1333,33 @@ const articleLinkHover = ({ design, theme }: ArticleFormat): string => {
 	}
 };
 
+const articleLinkHoverDark = () => articleLinkTextDark();
+
+const articleLinkBorderHoverLight = ({
+	design,
+	theme,
+}: ArticleFormat): string => {
+	if (theme === ArticleSpecial.Labs) return sourcePalette.neutral[7];
+	if (theme === ArticleSpecial.SpecialReport)
+		return sourcePalette.specialReport[100];
+
+	if (
+		theme === ArticleSpecial.SpecialReportAlt &&
+		design !== ArticleDesign.LiveBlog &&
+		design !== ArticleDesign.DeadBlog
+	)
+		return sourcePalette.specialReportAlt[200];
+
+	if (design === ArticleDesign.Analysis && theme === Pillar.News) {
+		return sourcePalette.news[300];
+	}
+	if (theme === ArticleSpecial.SpecialReportAlt)
+		return sourcePalette.specialReportAlt[200];
+	return pillarPalette(theme, 400);
+};
+
+const articleLinkBorderHoverDark = () => articleLinkTextDark();
+
 const articleBorder = ({ design, theme }: ArticleFormat): string => {
 	switch (theme) {
 		case ArticleSpecial.SpecialReportAlt:
@@ -1605,9 +1668,21 @@ const paletteColours = {
 		light: articleSectionBackground,
 		dark: articleSectionBackground,
 	},
-	'--article-link-hover': {
-		light: articleLinkHover,
-		dark: articleLinkHover,
+	'--article-link-text': {
+		light: articleLinkTextLight,
+		dark: articleLinkTextDark,
+	},
+	'--article-link-border': {
+		light: articleLinkBorderLight,
+		dark: articleLinkBorderDark,
+	},
+	'--article-link-text-hover': {
+		light: articleLinkHoverLight,
+		dark: articleLinkHoverDark,
+	},
+	'--article-link-border-hover': {
+		light: articleLinkBorderHoverLight,
+		dark: articleLinkBorderHoverDark,
 	},
 	'--article-border': {
 		light: articleBorder,