From 69bb1a5a753012918095c2ed183741c654f95b47 Mon Sep 17 00:00:00 2001 From: Charlotte Date: Fri, 1 Nov 2024 11:32:32 +0000 Subject: [PATCH 1/2] allow adaptation of card text colours for feature cards --- dotcom-rendering/src/components/Byline.tsx | 19 +++++++-- .../components/Card/components/CardAge.tsx | 20 ++++++---- .../CardCommentCount.importable.tsx | 39 ++++++++++--------- .../src/components/CardHeadline.tsx | 24 +++++------- .../src/components/FeatureCard.tsx | 8 ++++ .../components/Masthead/HighlightsCard.tsx | 3 +- dotcom-rendering/src/palette.ts | 27 +++++++++++++ 7 files changed, 94 insertions(+), 46 deletions(-) diff --git a/dotcom-rendering/src/components/Byline.tsx b/dotcom-rendering/src/components/Byline.tsx index 2c1f8fdb1f3..da274b5f24b 100644 --- a/dotcom-rendering/src/components/Byline.tsx +++ b/dotcom-rendering/src/components/Byline.tsx @@ -15,11 +15,13 @@ type Props = { text: string; isLabs: boolean; size: SmallHeadlineSize; + /** Optional override of the standard text colour */ + colour?: string; }; -const baseStyles = css` +const baseStyles = (colour: string) => css` display: block; - color: ${palette('--byline')}; + color: ${colour}; `; const bylineStyles = (size: SmallHeadlineSize, isLabs: boolean) => { @@ -97,6 +99,15 @@ const bylineStyles = (size: SmallHeadlineSize, isLabs: boolean) => { } }; -export const Byline = ({ text, isLabs, size }: Props) => { - return {text}; +export const Byline = ({ + text, + isLabs, + size, + colour = palette('--byline'), +}: Props) => { + return ( + + {text} + + ); }; diff --git a/dotcom-rendering/src/components/Card/components/CardAge.tsx b/dotcom-rendering/src/components/Card/components/CardAge.tsx index 9ce2a6b607e..75c70979d80 100644 --- a/dotcom-rendering/src/components/Card/components/CardAge.tsx +++ b/dotcom-rendering/src/components/Card/components/CardAge.tsx @@ -14,22 +14,19 @@ type Props = { showClock?: boolean; isOnwardContent?: boolean; isTagPage: boolean; + colour?: string; }; -const ageStyles = (isOnwardsContent?: boolean) => { +const ageStyles = (colour: string) => { return css` ${textSansBold12}; - color: ${isOnwardsContent - ? palette('--card-footer-onwards-content') - : palette('--card-footer-text')}; + color: ${colour}; margin-top: -4px; svg { - fill: ${isOnwardsContent - ? palette('--card-footer-onwards-content') - : palette('--card-footer-text')}; + fill: ${colour}; margin-bottom: -1px; height: 11px; width: 11px; @@ -44,13 +41,20 @@ export const CardAge = ({ isOnwardContent, absoluteServerTimes, isTagPage, + colour = palette('--card-footer-text'), }: Props) => { if (timeAgo(new Date(webPublication.date).getTime()) === false) { return null; } return ( - + {showClock && } {isTagPage ? ( { - if (isDynamo) { - return themePalette('--card-trail-text'); - } else if (isOnwardContent) { - return themePalette('--card-footer-onwards-content'); - } else { - return themePalette('--card-footer-text'); - } -}; - -const containerStyles = (isDynamo?: boolean, isOnwardContent?: boolean) => css` +const containerStyles = (colour: string) => css` display: flex; flex-direction: row; ${textSansBold12}; @@ -43,16 +32,16 @@ const containerStyles = (isDynamo?: boolean, isOnwardContent?: boolean) => css` */ line-height: 1.15; margin-top: -4px; - color: ${getCommentCountColour(isDynamo, isOnwardContent)}; + color: ${colour}; `; -const svgStyles = (isDynamo?: boolean, isOnwardContent?: boolean) => css` +const svgStyles = (colour: string) => css` svg { margin-bottom: -5px; height: 14px; width: 14px; margin-right: 2px; - fill: ${getCommentCountColour(isDynamo, isOnwardContent)}; + fill: ${colour}; } `; @@ -78,14 +67,26 @@ export const CardCommentCount = ({ discussionId, isDynamo, isOnwardContent, + colour = themePalette('--card-footer-text'), }: Props) => { const count = useCommentCount(discussionApiUrl, discussionId); const { long, short } = formatCount(count); + + const getCommentCountColour = (): string => { + if (isDynamo) { + return themePalette('--card-trail-text'); + } else if (isOnwardContent) { + return themePalette('--card-footer-onwards-content'); + } else { + return colour; + } + }; + return ( -
-
+
+
{long}
diff --git a/dotcom-rendering/src/components/CardHeadline.tsx b/dotcom-rendering/src/components/CardHeadline.tsx index 1be533123b6..413829d8eef 100644 --- a/dotcom-rendering/src/components/CardHeadline.tsx +++ b/dotcom-rendering/src/components/CardHeadline.tsx @@ -39,8 +39,10 @@ type Props = { showByline?: boolean; linkTo?: string; // If provided, the headline is wrapped in a link isExternalLink?: boolean; - /** Is the headline inside a Highlights card? */ - isHighlights?: boolean; + /** Optional override of the standard card headline colour */ + headlineColour?: string; + /** Optional override of the standard card kicker colour */ + kickerColour?: string; }; const headlineSize = { @@ -191,12 +193,9 @@ export const CardHeadline = ({ showByline, linkTo, isExternalLink, - isHighlights = false, + headlineColour = palette('--card-headline'), + kickerColour = palette('--card-kicker-text'), }: Props) => { - const kickerColour = isHighlights - ? palette('--highlights-card-kicker-text') - : palette('--card-kicker-text'); - // The link is only applied directly to the headline if it is a sublink const isSublink = !!linkTo; @@ -231,13 +230,9 @@ export const CardHeadline = ({ )} {showQuotes && } {headlineText} @@ -257,6 +252,7 @@ export const CardHeadline = ({ text={byline} isLabs={format.theme === ArticleSpecial.Labs} size={bylineSize} + colour={kickerColour} /> )} diff --git a/dotcom-rendering/src/components/FeatureCard.tsx b/dotcom-rendering/src/components/FeatureCard.tsx index 734da2a688d..2c8578479b1 100644 --- a/dotcom-rendering/src/components/FeatureCard.tsx +++ b/dotcom-rendering/src/components/FeatureCard.tsx @@ -166,6 +166,7 @@ const CardAge = ({ isOnwardContent={false} absoluteServerTimes={absoluteServerTimes} isTagPage={false} + colour={palette('--feature-card-footer-text')} /> ); }; @@ -207,6 +208,7 @@ const CommentCount = ({ discussionApiUrl={discussionApiUrl} discussionId={discussionId} isOnwardContent={false} + colour={palette('--feature-card-footer-text')} /> @@ -364,6 +366,12 @@ export const FeatureCard = ({ byline={byline} showByline={showByline} isExternalLink={isExternalLink} + headlineColour={palette( + '--feature-card-headline', + )} + kickerColour={palette( + '--feature-card-kicker-text', + )} /> {starRating !== undefined ? ( diff --git a/dotcom-rendering/src/components/Masthead/HighlightsCard.tsx b/dotcom-rendering/src/components/Masthead/HighlightsCard.tsx index 607e5d2e65e..a5fede114c5 100644 --- a/dotcom-rendering/src/components/Masthead/HighlightsCard.tsx +++ b/dotcom-rendering/src/components/Masthead/HighlightsCard.tsx @@ -164,7 +164,8 @@ export const HighlightsCard = ({ kickerText={kickerText} isExternalLink={isExternalLink} showQuotes={showQuotedHeadline} - isHighlights={true} + headlineColour={palette('--highlights-card-headline')} + kickerColour={palette('--highlights-card-kicker-text')} />
diff --git a/dotcom-rendering/src/palette.ts b/dotcom-rendering/src/palette.ts index 7cb999d600d..e7b9772d4b6 100644 --- a/dotcom-rendering/src/palette.ts +++ b/dotcom-rendering/src/palette.ts @@ -5759,6 +5759,21 @@ const editorialButtonText: PaletteFunction = (format: ArticleFormat) => { } }; +const featureCardKickerTextLight: PaletteFunction = ({ theme }) => { + switch (theme) { + case ArticleSpecial.Labs: + case ArticleSpecial.SpecialReport: + case ArticleSpecial.SpecialReportAlt: + return sourcePalette.neutral[86]; + case Pillar.News: + case Pillar.Opinion: + case Pillar.Sport: + case Pillar.Culture: + case Pillar.Lifestyle: + return pillarPalette(theme, 600); + } +}; + // ----- Palette ----- // /** @@ -6424,6 +6439,18 @@ const paletteColours = { light: explainerAtomBackgroundLight, dark: explainerAtomBackgroundDark, }, + '--feature-card-footer-text': { + light: () => sourcePalette.neutral[86], + dark: () => sourcePalette.neutral[20], + }, + '--feature-card-headline': { + light: () => sourcePalette.neutral[97], + dark: () => sourcePalette.neutral[20], + }, + '--feature-card-kicker-text': { + light: featureCardKickerTextLight, + dark: () => sourcePalette.neutral[20], + }, '--feature-card-trail-text': { light: () => sourcePalette.neutral[86], dark: () => sourcePalette.neutral[20], From 708b1cf3fb281df4fee921c0c126dcdec075fdf8 Mon Sep 17 00:00:00 2001 From: Charlotte Date: Fri, 1 Nov 2024 15:48:51 +0000 Subject: [PATCH 2/2] reduce brightness of the overlay background to increase contrast for readability --- dotcom-rendering/src/components/FeatureCard.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/dotcom-rendering/src/components/FeatureCard.tsx b/dotcom-rendering/src/components/FeatureCard.tsx index 2c8578479b1..da0cd779d99 100644 --- a/dotcom-rendering/src/components/FeatureCard.tsx +++ b/dotcom-rendering/src/components/FeatureCard.tsx @@ -107,9 +107,9 @@ const overlayStyles = css` flex-direction: column; justify-content: flex-start; flex-grow: 1; - padding: 8px; - row-gap: 8px; - backdrop-filter: blur(12px); + padding: ${space[2]}px; + row-gap: ${space[2]}px; + backdrop-filter: blur(12px) brightness(0.7); `; const getMedia = ({