Add dark mode stories

guardian · Sep 19, 2024 · 5653010 · 5653010
1 parent ea9d90f
commit 5653010
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 3 deletions.
diff --git a/dotcom-rendering/src/components/Answers.tsx b/dotcom-rendering/src/components/Answers.tsx
@@ -25,7 +25,7 @@ export const radioButtonWrapperStyles = (theme: ArticleTheme) => css`
 		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) */
 

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
@@ -6568,6 +6568,10 @@ const paletteColours = {
 		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],