Dark mode - Accordion 🪗

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 = () => (

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-styles-border-top')} 1px solid;
+	background-color: ${palette('--accordion-title-row-styles-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-styles-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-style-colour')};
 `;
 
 const arrowPosition: SerializedStyles = css`
@@ -75,14 +69,16 @@ const backgroundColour = (
 ): SerializedStyles => {
 	if (context === 'keyEvents') {
 		return css`
-			background-color: ${background.primary};
+			background-color: ${palette(
+				'--accordion-key-events-background-colour',
+			)};
 			${from.desktop} {
 				background-color: transparent;
 			}
 		`;
 	}
 	return css`
-		background-color: ${neutral[97]};
+		background-color: ${palette('--accordion-live-feed-background-colour')};
 		${from.desktop} {
 			background-color: transparent;
 		}

dotcom-rendering/src/palette.ts

@@ -48,6 +48,26 @@ const starRatingBackgroundColourLight = (): string =>
 const starRatingBackgroundColourDark = (): string =>
 	sourcePalette.brandAlt[200];
 
+const accordionTitleRowStylesFillColourLight = (): string =>
+	sourcePalette.neutral[46];
+const accordionTitleRowStylesFillColourDark = (): string =>
+	sourcePalette.neutral[60];
+const accordionTitleRowStylesBackgroundColourLight = (): string =>
+	sourcePalette.neutral[100];
+const accordionTitleRowStylesBackgroundColourDark = (): string =>
+	sourcePalette.neutral[10];
+const accordionTitleRowStylesBorderColourTopLight = (): string =>
+	sourcePalette.neutral[86];
+const accordionTitleRowStylesBorderColourTopDark = (): string =>
+	sourcePalette.neutral[20];
+const accordionTitleStylesColourLight = (): string => sourcePalette.neutral[7];
+const accordionTitleStylesColourDark = (): string => sourcePalette.neutral[86];
+const accordionKeyEventsBackgroundColourLight = (): string =>
+	sourcePalette.neutral[100];
+const accordionBackgroundColourDark = (): string => sourcePalette.neutral[10];
+const accordionLiveFeedBackgroundColourLight = (): string =>
+	sourcePalette.neutral[97];
+
 // ----- Palette ----- //
 
 /**
@@ -97,6 +117,30 @@ const paletteColours = {
 		light: starRatingBackgroundColourLight,
 		dark: starRatingBackgroundColourDark,
 	},
+	'--accordion-title-row-styles-fill': {
+		light: accordionTitleRowStylesFillColourLight,
+		dark: accordionTitleRowStylesFillColourDark,
+	},
+	'--accordion-title-row-styles-background': {
+		light: accordionTitleRowStylesBackgroundColourLight,
+		dark: accordionTitleRowStylesBackgroundColourDark,
+	},
+	'--accordion-title-row-styles-border-top': {
+		light: accordionTitleRowStylesBorderColourTopLight,
+		dark: accordionTitleRowStylesBorderColourTopDark,
+	},
+	'--accordion-title-style-colour': {
+		light: accordionTitleStylesColourLight,
+		dark: accordionTitleStylesColourDark,
+	},
+	'--accordion-key-events-background-colour': {
+		light: accordionKeyEventsBackgroundColourLight,
+		dark: accordionBackgroundColourDark,
+	},
+	'--accordion-live-feed-background-colour': {
+		light: accordionLiveFeedBackgroundColourLight,
+		dark: accordionBackgroundColourDark,
+	},
 } satisfies PaletteColours;
 
 /**