From 45aa8ab96a5bee682b998c6ffef615528bed3bdc Mon Sep 17 00:00:00 2001 From: Oliver Abrahams Date: Thu, 24 Oct 2024 15:56:39 +0100 Subject: [PATCH] Update link colours for audio articles (#12608) * update links in Audio components to use light text colours --- .../BlockquoteBlockComponent.stories.tsx | 10 ++++++++++ dotcom-rendering/src/palette.ts | 17 +++++++++++++++-- 2 files changed, 25 insertions(+), 2 deletions(-) diff --git a/dotcom-rendering/src/components/BlockquoteBlockComponent.stories.tsx b/dotcom-rendering/src/components/BlockquoteBlockComponent.stories.tsx index eb54924d5f..4de9b653c7 100644 --- a/dotcom-rendering/src/components/BlockquoteBlockComponent.stories.tsx +++ b/dotcom-rendering/src/components/BlockquoteBlockComponent.stories.tsx @@ -76,6 +76,16 @@ export const QuotedDeadBlogDesignAllThemes = { }, } satisfies Story; +export const QuotedCommentDesignAudioAllThemes = { + args: QuotedStandardDesignAllThemes.args, + parameters: { + formats: getAllThemes({ + design: ArticleDesign.Audio, + display: ArticleDisplay.Standard, + }), + }, +} satisfies Story; + export const QuotedAllDesignsNewsTheme = { args: QuotedStandardDesignAllThemes.args, parameters: { diff --git a/dotcom-rendering/src/palette.ts b/dotcom-rendering/src/palette.ts index d5b190c551..50efbc050f 100644 --- a/dotcom-rendering/src/palette.ts +++ b/dotcom-rendering/src/palette.ts @@ -3131,6 +3131,9 @@ const articleSectionTitleDark: PaletteFunction = () => sourcePalette.neutral[86]; const articleLinkTextLight: PaletteFunction = ({ design, theme }) => { + if (design === ArticleDesign.Audio) { + return sourcePalette.neutral[86]; + } if (design === ArticleDesign.Analysis) return sourcePalette.news[300]; switch (theme) { case Pillar.Lifestyle: @@ -3170,8 +3173,10 @@ const articleLinkTextDark: PaletteFunction = ({ display, theme }) => { }; const articleLinkBorderLight: PaletteFunction = ({ design, theme }) => { + if (design === ArticleDesign.Audio) { + return sourcePalette.neutral[46]; + } if (theme === ArticleSpecial.Labs) return sourcePalette.neutral[60]; - if (theme === ArticleSpecial.SpecialReport) { return sourcePalette.specialReport[300]; } @@ -3205,6 +3210,9 @@ const articleMetaLinesDark: PaletteFunction = ({ design }) => { }; const articleLinkHoverLight: PaletteFunction = ({ design, theme }) => { + if (design === ArticleDesign.Audio) { + return sourcePalette.neutral[86]; + } switch (design) { case ArticleDesign.DeadBlog: switch (theme) { @@ -3274,7 +3282,12 @@ const articleLinkHoverLight: PaletteFunction = ({ design, theme }) => { const articleLinkHoverDark: PaletteFunction = (f) => articleLinkTextDark(f); const articleLinkBorderHoverLight: PaletteFunction = ({ design, theme }) => { - if (theme === ArticleSpecial.Labs) return sourcePalette.neutral[7]; + if (design === ArticleDesign.Audio) { + return sourcePalette.neutral[86]; + } + if (theme === ArticleSpecial.Labs) { + return sourcePalette.neutral[7]; + } if (theme === ArticleSpecial.SpecialReport) { return sourcePalette.specialReport[100]; }