diff --git a/dotcom-rendering/src/components/Answers.tsx b/dotcom-rendering/src/components/Answers.tsx index 26f42ab237..4ec7e513f5 100644 --- 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 index 6c7f8cfc28..75a231b7a7 100644 --- 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,6 +49,15 @@ export const BatchedResults = { questions: natureQuestions, resultGroups: natureResultGroups, }, + decorators: [ + splitTheme([ + { + display: ArticleDisplay.Standard, + design: ArticleDesign.Comment, + theme: Pillar.News, + }, + ]), + ], } satisfies Story; export const LabsTheme = { @@ -41,4 +65,13 @@ export const LabsTheme = { ...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 index 5c404b4125..53fec672ba 100644 --- 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 index 254100ffe2..f2da834c95 100644 --- 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],