Merge pull request #12407 from guardian/quiz-atom-darkmode

Quiz Atom Dark Mode
guardian · Sep 20, 2024 · c0135a2 · c0135a2
2 parents 5fe2bd4 + 4731853
commit c0135a2
Show file tree

Hide file tree

Showing 5 changed files with 97 additions and 10 deletions.
diff --git a/dotcom-rendering/src/components/Answers.stories.tsx b/dotcom-rendering/src/components/Answers.stories.tsx
@@ -1,7 +1,8 @@
 import { css } from '@emotion/react';
-import { Pillar } from '@guardian/libs';
+import { ArticleDesign, ArticleDisplay, Pillar } from '@guardian/libs';
 import { Radio, RadioGroup } from '@guardian/source/react-components';
 import type { Meta, StoryObj } from '@storybook/react';
+import { splitTheme } from '../../.storybook/decorators/splitThemeDecorator';
 import {
 	CorrectSelectedAnswer,
 	IncorrectAnswer,
@@ -12,6 +13,15 @@ import {
 
 const meta = {
 	title: 'Components/Answers',
+	decorators: [
+		splitTheme([
+			{
+				display: ArticleDisplay.Standard,
+				design: ArticleDesign.Comment,
+				theme: Pillar.News,
+			},
+		]),
+	],
 } satisfies Meta;
 
 export default meta;

diff --git a/dotcom-rendering/src/components/Answers.tsx b/dotcom-rendering/src/components/Answers.tsx
@@ -9,6 +9,7 @@ import {
 	textSans17,
 } from '@guardian/source/foundations';
 import { SvgCheckmark, SvgCross } from '@guardian/source/react-components';
+import { palette as schemedPalette } from '../palette';
 
 // We export Radio wrapper styles to override Source Radio buttons to align
 // with our custom answers for the quiz
@@ -21,14 +22,15 @@ export const radioButtonWrapperStyles = (theme: ArticleTheme) => css`
 
 		margin-bottom: ${space[2]}px;
 
-		background-color: ${palette.neutral[97]};
+		background-color: ${schemedPalette('--quiz-atom-answers-background')};
 
 		:hover {
-			background-color: ${palette.neutral[86]};
+			background-color: ${schemedPalette('--quiz-atom-answers-hover')};
 		}
 		/* TODO: apply same styles on focus (requires source update) */
 
 		div {
+			color: inherit;
 			${fontStyles(theme)};
 		}
 	}
@@ -70,7 +72,7 @@ const BlackCheckmark = () => (
 
 			height: ${space[6]}px;
 			svg {
-				fill: ${palette.neutral[0]};
+				fill: ${schemedPalette('--quiz-atom-check-mark')};
 				height: ${space[6]}px;
 				width: ${space[6]}px;
 			}
@@ -155,7 +157,7 @@ const BlackText = ({
 }) => (
 	<label
 		css={css`
-			color: ${palette.neutral[0]};
+			color: inherit;
 			display: flex;
 			flex-direction: column;
 
@@ -217,7 +219,9 @@ const incorrectSelectedAnswerStyles = css`
 	display: flex;
 	flex-direction: row;
 
-	background-color: ${palette.news[400]};
+	background-color: ${schemedPalette(
+		'--quiz-atom-incorrect-answer-background',
+	)};
 `;
 
 export const IncorrectAnswer = ({
@@ -246,7 +250,7 @@ const correctNonSelectedAnswerStyles = css`
 	border: 2px solid ${palette.success[400]};
 	padding-left: 10px;
 
-	background-color: ${palette.neutral[97]};
+	background-color: ${schemedPalette('--quiz-atom-answers-background')};
 `;
 
 export const NonSelectedCorrectAnswer = ({
@@ -273,7 +277,7 @@ export const NonSelectedCorrectAnswer = ({
 );
 
 const unselectedAnswerStyles = css`
-	background-color: ${palette.neutral[97]};
+	background-color: ${schemedPalette('--quiz-atom-answers-background')};
 	margin-bottom: ${space[2]}px;
 
 	padding-top: ${space[2]}px;

diff --git a/dotcom-rendering/src/components/KnowledgeQuizAtom.stories.tsx b/dotcom-rendering/src/components/KnowledgeQuizAtom.stories.tsx
@@ -1,5 +1,11 @@
-import { ArticleSpecial, Pillar } from '@guardian/libs';
+import {
+	ArticleDesign,
+	ArticleDisplay,
+	ArticleSpecial,
+	Pillar,
+} from '@guardian/libs';
 import type { Meta, StoryObj } from '@storybook/react';
+import { splitTheme } from '../../.storybook/decorators/splitThemeDecorator';
 import {
 	exampleKnowledgeQuestions,
 	natureQuestions,
@@ -26,6 +32,15 @@ export const Default = {
 		sharingUrls,
 		theme: Pillar.News,
 	},
+	decorators: [
+		splitTheme([
+			{
+				display: ArticleDisplay.Standard,
+				design: ArticleDesign.Comment,
+				theme: Pillar.News,
+			},
+		]),
+	],
 } satisfies Story;
 
 export const BatchedResults = {
@@ -34,11 +49,29 @@ export const BatchedResults = {
 		questions: natureQuestions,
 		resultGroups: natureResultGroups,
 	},
+	decorators: [
+		splitTheme([
+			{
+				display: ArticleDisplay.Standard,
+				design: ArticleDesign.Comment,
+				theme: Pillar.News,
+			},
+		]),
+	],
 } satisfies Story;
 
 export const LabsTheme = {
 	args: {
 		...Default.args,
 		theme: ArticleSpecial.Labs,
 	},
+	decorators: [
+		splitTheme([
+			{
+				display: ArticleDisplay.Standard,
+				design: ArticleDesign.Comment,
+				theme: ArticleSpecial.Labs,
+			},
+		]),
+	],
 } satisfies Story;
diff --git a/dotcom-rendering/src/components/PersonalityQuizAtom.stories.tsx b/dotcom-rendering/src/components/PersonalityQuizAtom.stories.tsx
@@ -1,5 +1,11 @@
-import { ArticleSpecial, Pillar } from '@guardian/libs';
+import {
+	ArticleDesign,
+	ArticleDisplay,
+	ArticleSpecial,
+	Pillar,
+} from '@guardian/libs';
 import type { Meta, StoryObj } from '@storybook/react';
+import { splitTheme } from '../../.storybook/decorators/splitThemeDecorator';
 import {
 	examplePersonalityQuestions,
 	exampleResultBuckets,
@@ -24,6 +30,15 @@ export const Default = {
 		sharingUrls,
 		theme: Pillar.News,
 	},
+	decorators: [
+		splitTheme([
+			{
+				display: ArticleDisplay.Standard,
+				design: ArticleDesign.Comment,
+				theme: Pillar.News,
+			},
+		]),
+	],
 } satisfies Story;
 
 export const LabsTheme = {
@@ -32,4 +47,13 @@ export const LabsTheme = {
 		id: '2c6bf552-2827-4256-b3a0-f557d215c394',
 		theme: ArticleSpecial.Labs,
 	},
+	decorators: [
+		splitTheme([
+			{
+				display: ArticleDisplay.Standard,
+				design: ArticleDesign.Comment,
+				theme: ArticleSpecial.Labs,
+			},
+		]),
+	],
 } satisfies Story;
diff --git a/dotcom-rendering/src/palette.ts b/dotcom-rendering/src/palette.ts
@@ -6564,6 +6564,22 @@ const paletteColours = {
 		light: pullQuoteTextLight,
 		dark: pullQuoteTextDark,
 	},
+	'--quiz-atom-answers-background': {
+		light: () => sourcePalette.neutral[97],
+		dark: () => sourcePalette.neutral[20],
+	},
+	'--quiz-atom-answers-hover': {
+		light: () => sourcePalette.neutral[86],
+		dark: () => sourcePalette.neutral[38],
+	},
+	'--quiz-atom-check-mark': {
+		light: () => sourcePalette.neutral[0],
+		dark: () => sourcePalette.neutral[97],
+	},
+	'--quiz-atom-incorrect-answer-background': {
+		light: () => sourcePalette.news[400],
+		dark: () => sourcePalette.news[300],
+	},
 	'--quote-icon-fill': {
 		light: richLinkQuoteFillLight,
 		dark: richLinkFillDark,