Dark mode - Accordion 🪗 (#9274)

* support dark theme and stories
guardian · Oct 25, 2023 · cea44e3 · cea44e3
1 parent d2c10de
commit cea44e3
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 14 deletions.
diff --git a/dotcom-rendering/src/components/Accordion.stories.tsx b/dotcom-rendering/src/components/Accordion.stories.tsx
@@ -1,6 +1,8 @@
 import { css } from '@emotion/react';
 import type { SerializedStyles } from '@emotion/react';
+import { ArticleDesign, ArticleDisplay, Pillar } from '@guardian/libs';
 import { body, breakpoints, from, space } from '@guardian/source-foundations';
+import { splitTheme } from '../../.storybook/decorators/splitThemeDecorator';
 import { Accordion } from './Accordion';
 
 const textStyle = css`
@@ -26,6 +28,12 @@ const adviceColourAboveTablet: SerializedStyles = css`
 	}
 `;
 
+const articleFormat: ArticleFormat = {
+	design: ArticleDesign.Standard,
+	display: ArticleDisplay.Standard,
+	theme: Pillar.News,
+};
+
 const accordionContent = (
 	<>
 		<p css={[textStyle, adviceColourAboveTablet]}>
@@ -59,6 +67,7 @@ export default {
 			viewports: [breakpoints.mobile, breakpoints.tablet],
 		},
 	},
+	decorators: [splitTheme(articleFormat)],
 };
 
 export const Default = () => (

diff --git a/dotcom-rendering/src/components/Accordion.tsx b/dotcom-rendering/src/components/Accordion.tsx
@@ -1,17 +1,11 @@
 import { css } from '@emotion/react';
 import type { SerializedStyles } from '@emotion/react';
-import {
-	background,
-	focusHalo,
-	from,
-	headline,
-	neutral,
-	space,
-} from '@guardian/source-foundations';
+import { focusHalo, from, headline, space } from '@guardian/source-foundations';
 import {
 	SvgChevronDownSingle,
 	SvgChevronUpSingle,
 } from '@guardian/source-react-components';
+import { palette } from '../palette';
 
 interface Props {
 	children: React.ReactNode;
@@ -34,14 +28,14 @@ const titleRowStyles = css`
 	position: relative;
 	display: block;
 	align-items: center;
-	border-top: ${neutral[86]} 1px solid;
-	background-color: ${neutral[100]};
+	border-top: ${palette('--accordion-title-row-border-top')} 1px solid;
+	background-color: ${palette('--accordion-title-row-background')};
 	padding: ${space[2]}px ${space[2]}px ${space[2]}px ${space[3]}px;
 	&:focus {
 		${focusHalo};
 	}
 	path {
-		fill: ${neutral[46]};
+		fill: ${palette('--accordion-title-row-fill')};
 	}
 	svg {
 		height: 2rem;
@@ -57,7 +51,7 @@ const titleRowStyles = css`
 
 const titleStyle = css`
 	${headline.xxsmall({ fontWeight: 'bold', lineHeight: 'tight' })};
-	color: ${neutral[7]};
+	color: ${palette('--accordion-title')};
 `;
 
 const arrowPosition: SerializedStyles = css`
@@ -75,14 +69,14 @@ const backgroundColour = (
 ): SerializedStyles => {
 	if (context === 'keyEvents') {
 		return css`
-			background-color: ${background.primary};
+			background-color: ${palette('--accordion-key-events-background')};
 			${from.desktop} {
 				background-color: transparent;
 			}
 		`;
 	}
 	return css`
-		background-color: ${neutral[97]};
+		background-color: ${palette('--accordion-live-feed-background')};
 		${from.desktop} {
 			background-color: transparent;
 		}

diff --git a/dotcom-rendering/src/palette.ts b/dotcom-rendering/src/palette.ts
@@ -48,6 +48,21 @@ const starRatingBackgroundColourLight = (): string =>
 const starRatingBackgroundColourDark = (): string =>
 	sourcePalette.brandAlt[200];
 
+const accordionTitleRowFillLight = (): string => sourcePalette.neutral[46];
+const accordionTitleRowFillDark = (): string => sourcePalette.neutral[60];
+const accordionTitleRowBackgroundLight = (): string =>
+	sourcePalette.neutral[100];
+const accordionTitleRowBackgroundDark = (): string => sourcePalette.neutral[10];
+const accordionTitleRowBorderTopLight = (): string => sourcePalette.neutral[86];
+const accordionTitleRowBorderTopDark = (): string => sourcePalette.neutral[20];
+const accordionTitleLight = (): string => sourcePalette.neutral[7];
+const accordionTitleDark = (): string => sourcePalette.neutral[86];
+const accordionKeyEventsBackgroundLight = (): string =>
+	sourcePalette.neutral[100];
+const accordionBackgroundDark = (): string => sourcePalette.neutral[10];
+const accordionLiveFeedBackgroundLight = (): string =>
+	sourcePalette.neutral[97];
+
 // ----- Palette ----- //
 
 /**
@@ -97,6 +112,30 @@ const paletteColours = {
 		light: starRatingBackgroundColourLight,
 		dark: starRatingBackgroundColourDark,
 	},
+	'--accordion-title-row-fill': {
+		light: accordionTitleRowFillLight,
+		dark: accordionTitleRowFillDark,
+	},
+	'--accordion-title-row-background': {
+		light: accordionTitleRowBackgroundLight,
+		dark: accordionTitleRowBackgroundDark,
+	},
+	'--accordion-title-row-border-top': {
+		light: accordionTitleRowBorderTopLight,
+		dark: accordionTitleRowBorderTopDark,
+	},
+	'--accordion-title': {
+		light: accordionTitleLight,
+		dark: accordionTitleDark,
+	},
+	'--accordion-key-events-background': {
+		light: accordionKeyEventsBackgroundLight,
+		dark: accordionBackgroundDark,
+	},
+	'--accordion-live-feed-background': {
+		light: accordionLiveFeedBackgroundLight,
+		dark: accordionBackgroundDark,
+	},
 } satisfies PaletteColours;
 
 /**