Interactive Contents darkmode (#9925)

* interactive contents dark mode
guardian · Jan 2, 2024 · be91d32 · be91d32
1 parent e4183b2
commit be91d32
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 1 deletion.
diff --git a/dotcom-rendering/src/components/InteractiveContentsBlockComponent.importable.tsx b/dotcom-rendering/src/components/InteractiveContentsBlockComponent.importable.tsx
@@ -9,6 +9,7 @@ import {
 import { SvgChevronDownSingle } from '@guardian/source-react-components';
 import { useCallback, useEffect, useState } from 'react';
 import { getZIndex } from '../lib/getZIndex';
+import { palette as themePalette } from '../palette';
 import type { SubheadingBlockElement } from '../types/content';
 
 const liStyles = css`
@@ -17,7 +18,7 @@ const liStyles = css`
 	border-top-style: solid;
 	border-top-color: ${sourcePalette.neutral[86]};
 	:hover {
-		background-color: ${sourcePalette.neutral[93]};
+		background-color: ${themePalette('--interactive-contents-hover')};
 	}
 `;
 

diff --git a/dotcom-rendering/src/components/InteractiveContentsBlockComponent.stories.tsx b/dotcom-rendering/src/components/InteractiveContentsBlockComponent.stories.tsx
@@ -1,4 +1,6 @@
 import { css } from '@emotion/react';
+import { ArticleDesign, ArticleDisplay, Pillar } from '@guardian/libs';
+import { splitTheme } from '../../.storybook/decorators/splitThemeDecorator';
 import { NumberedList } from '../../fixtures/generated/articles/NumberedList';
 import { enhanceInteractiveContentsElements } from '../model/enhance-interactive-contents-elements';
 import type { InteractiveContentsBlockElement } from '../types/content';
@@ -15,6 +17,15 @@ const interactiveContentsBlock = enhanceInteractiveContentsElements(
 export default {
 	component: InteractiveContentsBlockComponent,
 	title: 'Components/InteractiveContentsBlockElement',
+	decorators: [
+		splitTheme([
+			{
+				display: ArticleDisplay.Standard,
+				design: ArticleDesign.Standard,
+				theme: Pillar.News,
+			},
+		]),
+	],
 };
 
 export const Default = () =>

diff --git a/dotcom-rendering/src/palette.ts b/dotcom-rendering/src/palette.ts
@@ -4510,6 +4510,11 @@ const paginationTextLight: PaletteFunction = ({ theme }) => {
 };
 const paginationTextDark: PaletteFunction = () => sourcePalette.neutral[86];
 
+const interactiveContentsHoverLight: PaletteFunction = () =>
+	sourcePalette.neutral[93];
+const interactiveContentsHoverDark: PaletteFunction = () =>
+	sourcePalette.neutral[10];
+
 const audioAtomBackgroundLight: PaletteFunction = () =>
 	sourcePalette.neutral[97];
 const audioAtomBackgroundDark: PaletteFunction = () =>
@@ -5453,6 +5458,10 @@ const paletteColours = {
 		light: paginationTextLight,
 		dark: paginationTextDark,
 	},
+	'--interactive-contents-hover': {
+		light: interactiveContentsHoverLight,
+		dark: interactiveContentsHoverDark,
+	},
 	'--audio-atom-background': {
 		light: audioAtomBackgroundLight,
 		dark: audioAtomBackgroundDark,