Quiz Atom Dark Mode (#13169)

Makes some Design-suggested changes to colours in the quiz atom to improve support for dark mode, particularly in the box that shows the results. Also makes a small tweak to the padding in that results box.
guardian · Jan 17, 2025 · ee88ba1 · ee88ba1
1 parent 68ae045
commit ee88ba1
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 13 deletions.
diff --git a/dotcom-rendering/src/components/KnowledgeQuizAtom.importable.tsx b/dotcom-rendering/src/components/KnowledgeQuizAtom.importable.tsx
@@ -2,7 +2,6 @@ import { css } from '@emotion/react';
 import { isUndefined } from '@guardian/libs';
 import {
 	article17,
-	palette,
 	space,
 	textSans17,
 	textSansBold17,
@@ -12,6 +11,7 @@ import { Button, Radio, RadioGroup } from '@guardian/source/react-components';
 import { Fragment, useEffect, useState } from 'react';
 import { ArticleSpecial } from '../lib/articleFormat';
 import type { ArticleFormat, ArticleTheme } from '../lib/articleFormat';
+import { palette } from '../palette';
 import type {
 	AnswerType,
 	KnowledgeQuizAtomType,
@@ -182,6 +182,15 @@ export const Question = ({
 						onClick={() => {
 							setHasSubmitted(true);
 						}}
+						theme={{
+							backgroundPrimary: palette(
+								'--quiz-atom-button-background',
+							),
+							textPrimary: palette('--quiz-atom-button-text'),
+							backgroundPrimaryHover: palette(
+								'--quiz-atom-button-background-hover',
+							),
+						}}
 						onKeyDown={(
 							e: React.KeyboardEvent<HTMLButtonElement>,
 						) => {
@@ -299,10 +308,12 @@ const Answers = ({
 };
 
 const resultWrapperStyles = css`
-	background-color: ${palette.neutral[93]};
+	background-color: ${palette('--quiz-atom-results-background')};
+	color: ${palette('--quiz-atom-results-text')};
 	margin-top: ${space[3]}px;
 	margin-bottom: ${space[3]}px;
 	padding: ${space[2]}px;
+	border: 1px solid ${palette('--quiz-atom-results-border')};
 `;
 
 const resultDescriptionStyles = css`
@@ -313,13 +324,12 @@ const resultDescriptionStyles = css`
 
 const resultsNumberStyles = css`
 	${textSansBold34}
-	color: ${palette.brand[400]};
+	color: ${palette('--quiz-atom-results-number')};
 `;
 
 const resultHeaderStyles = css`
 	${textSansBold17}
-	color: ${palette.neutral[20]};
-	padding-bottom: ${space[1]}px;
+	padding-bottom: ${space[2]}px;
 `;
 
 export const Result = ({

diff --git a/dotcom-rendering/src/components/PersonalityQuizAtom.importable.tsx b/dotcom-rendering/src/components/PersonalityQuizAtom.importable.tsx
@@ -2,7 +2,7 @@ import { css } from '@emotion/react';
 import { isUndefined } from '@guardian/libs';
 import {
 	article17,
-	palette,
+	palette as sourcePalette,
 	space,
 	textSans17,
 	textSansBold17,
@@ -12,6 +12,7 @@ import type { KeyboardEvent, MouseEvent } from 'react';
 import { memo, useEffect, useState } from 'react';
 import { ArticleSpecial } from '../lib/articleFormat';
 import type { ArticleFormat, ArticleTheme } from '../lib/articleFormat';
+import { palette } from '../palette';
 import type {
 	AnswerType,
 	PersonalityQuizAtomType,
@@ -205,6 +206,15 @@ export const PersonalityQuizAtom = ({
 				<Button
 					type="submit"
 					onClick={onSubmit}
+					theme={{
+						backgroundPrimary: palette(
+							'--quiz-atom-button-background',
+						),
+						textPrimary: palette('--quiz-atom-button-text'),
+						backgroundPrimaryHover: palette(
+							'--quiz-atom-button-background-hover',
+						),
+					}}
 					onKeyDown={(e: React.KeyboardEvent<HTMLButtonElement>) => {
 						const spaceKey = 32;
 						const enterKey = 13;
@@ -344,8 +354,8 @@ const AnswersGroup = memo(
 					label {
 						:hover {
 							background-color: ${hasSubmittedAnswers
-								? palette.neutral[97]
-								: palette.neutral[86]};
+								? palette('--quiz-atom-answers-background')
+								: palette('--quiz-atom-answers-hover')};
 						}
 						/* TODO: apply same styles on focus (requires source update) */
 					}
@@ -378,7 +388,7 @@ AnswersGroup.displayName = 'AnswersGroup';
 const missingAnswersStyles = css`
 	${textSansBold17}
 	padding-bottom: ${space[3]}px;
-	color: ${palette.error[500]};
+	color: ${sourcePalette.error[500]};
 `;
 
 export const MissingAnswers = () => (
@@ -388,21 +398,21 @@ export const MissingAnswers = () => (
 );
 
 const resultWrapperStyles = css`
-	background-color: ${palette.neutral[93]};
+	background-color: ${palette('--quiz-atom-results-background')};
+	color: ${palette('--quiz-atom-results-text')};
 	margin-top: ${space[3]}px;
 	margin-bottom: ${space[3]}px;
 	padding: ${space[2]}px;
+	border: 1px solid ${palette('--quiz-atom-results-border')};
 `;
 
 const resultHeaderStyles = css`
 	${textSansBold17}
-	color: ${palette.neutral[20]};
-	padding-bottom: ${space[1]}px;
+	padding-bottom: ${space[2]}px;
 `;
 
 const resultDescriptionStyles = css`
 	${textSans17}
-	color: ${palette.neutral[46]};
 `;
 
 export const Result = ({

diff --git a/dotcom-rendering/src/paletteDeclarations.ts b/dotcom-rendering/src/paletteDeclarations.ts
@@ -6847,6 +6847,18 @@ const paletteColours = {
 		light: () => sourcePalette.neutral[86],
 		dark: () => sourcePalette.neutral[38],
 	},
+	'--quiz-atom-button-background': {
+		light: () => sourcePalette.brand[400],
+		dark: () => sourcePalette.neutral[86],
+	},
+	'--quiz-atom-button-background-hover': {
+		light: () => '#234B8A',
+		dark: () => sourcePalette.neutral[93],
+	},
+	'--quiz-atom-button-text': {
+		light: () => sourcePalette.neutral[100],
+		dark: () => sourcePalette.brand[400],
+	},
 	'--quiz-atom-check-mark': {
 		light: () => sourcePalette.neutral[0],
 		dark: () => sourcePalette.neutral[97],
@@ -6855,6 +6867,22 @@ const paletteColours = {
 		light: () => sourcePalette.news[400],
 		dark: () => sourcePalette.news[300],
 	},
+	'--quiz-atom-results-background': {
+		light: () => sourcePalette.neutral[93],
+		dark: () => sourcePalette.neutral[10],
+	},
+	'--quiz-atom-results-border': {
+		light: () => sourcePalette.neutral[93],
+		dark: () => sourcePalette.neutral[46],
+	},
+	'--quiz-atom-results-number': {
+		light: () => sourcePalette.brand[400],
+		dark: () => sourcePalette.neutral[86],
+	},
+	'--quiz-atom-results-text': {
+		light: () => sourcePalette.neutral[7],
+		dark: () => sourcePalette.neutral[86],
+	},
 	'--quote-icon-fill': {
 		light: richLinkQuoteFillLight,
 		dark: richLinkFillDark,