diff --git a/dotcom-rendering/src/components/Caption.tsx b/dotcom-rendering/src/components/Caption.tsx index 60b99d61284..1046fa49822 100644 --- a/dotcom-rendering/src/components/Caption.tsx +++ b/dotcom-rendering/src/components/Caption.tsx @@ -35,14 +35,17 @@ type Props = { type IconProps = { format: ArticleFormat; + isMainMedia: boolean; }; -const captionStyle = css` +const captionStyle = (isMainMedia: boolean) => css` ${textSans14}; line-height: 135%; padding-top: 6px; overflow-wrap: break-word; - color: ${palette('--caption-text')}; + color: ${isMainMedia + ? palette('--caption-main-media-text') + : palette('--caption-text')}; `; const bottomMarginStyles = css` @@ -167,8 +170,10 @@ const hideIconBelowLeftCol = css` const pictureRatio = (13 / 18) * 100; const videoRatio = (23 / 36) * 100; -const iconStyle = css` - fill: ${palette('--caption-text')}; +const iconStyle = (format: ArticleFormat, isMainMedia: boolean) => css` + fill: ${format.design === ArticleDesign.Gallery && isMainMedia + ? palette('--caption-main-media-text') + : palette('--caption-text')}; margin-right: ${space[1]}px; display: inline-block; position: relative; @@ -234,13 +239,12 @@ const galleryStyles = css` } `; -const CameraIcon = ({ format }: IconProps) => { +const CameraIcon = ({ format, isMainMedia }: IconProps) => { return ( @@ -249,11 +253,11 @@ const CameraIcon = ({ format }: IconProps) => { ); }; -const VideoIcon = ({ format }: IconProps) => { +const VideoIcon = ({ format, isMainMedia }: IconProps) => { return ( {mediaType === 'Video' ? ( - + ) : ( - + )} {!!captionText && ( { const defaultStyles = css` ${headlineMedium17} @@ -53,18 +63,25 @@ const bylineStyles = (format: ArticleFormat) => { switch (format.design) { case ArticleDesign.Gallery: - return css` - ${defaultStyles} - a { - font-style: italic; - border-bottom: 0.5px solid ${sourcePalette.neutral[46]}; - :hover { - text-decoration: none; - border-color: ${schemedPalette('--byline-anchor')}; - } - } - `; + switch (format.theme) { + case ArticleSpecial.Labs: { + return css` + ${defaultStyles} + ${galleryBylineStyles} + a { + border-bottom: 0.5px solid + ${sourcePalette.neutral[46]}; + } + `; + } + default: { + return css` + ${defaultStyles} + ${galleryBylineStyles} + `; + } + } default: return defaultStyles; } diff --git a/dotcom-rendering/src/components/ShareButton.importable.tsx b/dotcom-rendering/src/components/ShareButton.importable.tsx index ae7b3b8439f..09dd4afa0a4 100644 --- a/dotcom-rendering/src/components/ShareButton.importable.tsx +++ b/dotcom-rendering/src/components/ShareButton.importable.tsx @@ -8,7 +8,11 @@ import { SvgShareWeb, } from '@guardian/source/react-components'; import { useEffect, useMemo, useState } from 'react'; -import { ArticleDesign, type ArticleFormat } from '../lib/articleFormat'; +import { + ArticleDesign, + type ArticleFormat, + ArticleSpecial, +} from '../lib/articleFormat'; import { transparentColour } from '../lib/transparentColour'; import { useMatchMedia } from '../lib/useMatchMedia'; import { palette as themePalette } from '../palette'; @@ -35,9 +39,17 @@ type ButtonKind = 'native' | 'copy' | 'email'; type Context = 'ArticleMeta' | 'LiveBlock' | 'SubMeta' | 'ImageCaption'; -const sharedButtonStyles = (sizeXSmall: boolean) => css` +const sharedButtonStyles = ( + sizeXSmall: boolean, + context: Context, + format: ArticleFormat, +) => css` transition: none; - border-color: ${sizeXSmall + border-color: ${format.design === ArticleDesign.Gallery && + format.theme !== ArticleSpecial.Labs && + context == 'ArticleMeta' + ? themePalette('--share-button-border-meta') + : sizeXSmall ? themePalette('--share-button-xsmall-border') : themePalette('--share-button-border')}; height: ${sizeXSmall ? '24px' : '36px'}; @@ -123,11 +135,15 @@ export const CopyNativeShareButton = ({ size, isLiveBlogMeta, isCopied, + context, + format, }: { onShare: () => void; size?: Size; isLiveBlogMeta: boolean; isCopied: boolean; + context: Context; + format: ArticleFormat; }) => { const sizeXSmall = size === 'xsmall'; return ( @@ -142,7 +158,7 @@ export const CopyNativeShareButton = ({ ...(isCopied ? [copiedButtonStyles(sizeXSmall)] : [buttonStyles(sizeXSmall)]), - sharedButtonStyles(sizeXSmall), + sharedButtonStyles(sizeXSmall, context, format), isLiveBlogMeta && liveBlogMobileMeta(isCopied), ])} data-gu-name="share-button" @@ -156,10 +172,14 @@ export const EmailLink = ({ href, size, isLiveBlogMeta, + format, + context, }: { href: string; size?: Size; isLiveBlogMeta: boolean; + format: ArticleFormat; + context: Context; }) => { const sizeXSmall = size === 'xsmall'; return ( @@ -172,7 +192,7 @@ export const EmailLink = ({ icon={} cssOverrides={css([ buttonStyles(sizeXSmall), - sharedButtonStyles(sizeXSmall), + sharedButtonStyles(sizeXSmall, context, format), isLiveBlogMeta && liveBlogMobileMeta(false), ])} > @@ -261,6 +281,8 @@ export const ShareButton = ({ size={size} isLiveBlogMeta={isLiveBlogMeta} isCopied={isCopied} + context={context} + format={format} /> ); case 'copy': @@ -277,6 +299,8 @@ export const ShareButton = ({ size={size} isLiveBlogMeta={isLiveBlogMeta} isCopied={isCopied} + context={context} + format={format} /> ); case 'email': @@ -285,6 +309,8 @@ export const ShareButton = ({ href={`mailto:?subject=${webTitle}&body=${shareData.url}`} size={size} isLiveBlogMeta={isLiveBlogMeta} + context={context} + format={format} /> ); } diff --git a/dotcom-rendering/src/components/ShareButton.stories.tsx b/dotcom-rendering/src/components/ShareButton.stories.tsx index 8db932e57a1..1bb85c3f1f9 100644 --- a/dotcom-rendering/src/components/ShareButton.stories.tsx +++ b/dotcom-rendering/src/components/ShareButton.stories.tsx @@ -59,6 +59,12 @@ export const LinkCopied = () => { isCopied={true} isLiveBlogMeta={false} size="small" + format={{ + display: ArticleDisplay.Standard, + theme: Pillar.News, + design: ArticleDesign.Standard, + }} + context="ArticleMeta" /> ); }; @@ -72,6 +78,12 @@ export const LiveBlogMobileMeta = () => { isCopied={false} isLiveBlogMeta={true} size="small" + format={{ + display: ArticleDisplay.Standard, + theme: Pillar.News, + design: ArticleDesign.Standard, + }} + context="ArticleMeta" /> ); }; @@ -99,6 +111,12 @@ export const EmailLinkStory = () => { `} isLiveBlogMeta={true} size="small" + format={{ + display: ArticleDisplay.Standard, + theme: Pillar.News, + design: ArticleDesign.Standard, + }} + context="ArticleMeta" /> ); }; diff --git a/dotcom-rendering/src/components/Standfirst.tsx b/dotcom-rendering/src/components/Standfirst.tsx index 916d8eee27b..496208979fe 100644 --- a/dotcom-rendering/src/components/Standfirst.tsx +++ b/dotcom-rendering/src/components/Standfirst.tsx @@ -1,7 +1,6 @@ import { css } from '@emotion/react'; import { from, - headlineBold17, headlineLight17, headlineLight20, headlineLight24, @@ -90,7 +89,7 @@ const decideFont = ({ display, design, theme }: ArticleFormat) => { `; } return css` - ${headlineBold17} + ${headlineMedium20} `; case ArticleDesign.Obituary: case ArticleDesign.Comment: diff --git a/dotcom-rendering/src/paletteDeclarations.ts b/dotcom-rendering/src/paletteDeclarations.ts index a4c2aaf7723..90f6592a502 100644 --- a/dotcom-rendering/src/paletteDeclarations.ts +++ b/dotcom-rendering/src/paletteDeclarations.ts @@ -979,7 +979,12 @@ export const tabs = { const datelineLight: PaletteFunction = ({ design, theme }) => { switch (design) { case ArticleDesign.Gallery: - return sourcePalette.neutral[86]; + switch (theme) { + case ArticleSpecial.Labs: + return sourcePalette.neutral[86]; + default: + return sourcePalette.neutral[60]; + } case ArticleDesign.Comment: case ArticleDesign.Editorial: case ArticleDesign.Letter: @@ -2738,8 +2743,21 @@ const captionTextDark: PaletteFunction = ({ design, theme }) => { } }; -const captionPhotoEssayMainMediaTextLight = () => sourcePalette.neutral[46]; -const captionPhotoEssayMainMediaTextDark = () => sourcePalette.neutral[60]; +const captionMainMediaTextLight: PaletteFunction = (format) => { + switch (format.design) { + case ArticleDesign.Gallery: + switch (format.theme) { + case ArticleSpecial.Labs: + return captionTextLight(format); + default: + return sourcePalette.neutral[60]; + } + default: + return captionTextLight(format); + } +}; +const captionMainMediaTextDark: PaletteFunction = (format) => + captionTextDark(format); const captionLink: PaletteFunction = ({ design, theme }) => { if (design === ArticleDesign.Analysis && theme === Pillar.News) { @@ -3692,6 +3710,18 @@ const shareButtonBorderLight: PaletteFunction = ({ design }) => { const shareButtonBorderDark: PaletteFunction = () => sourcePalette.neutral[20]; +const shareButtonBorderMetaLight: PaletteFunction = ({ design }) => { + switch (design) { + case ArticleDesign.Gallery: + return sourcePalette.neutral[38]; + default: + return sourcePalette.neutral[86]; + } +}; + +const shareButtonBorderMetaDark: PaletteFunction = () => + sourcePalette.neutral[20]; + const shareButtonBorderXSmallLight: PaletteFunction = ({ design }) => { switch (design) { case ArticleDesign.Gallery: @@ -6508,14 +6538,14 @@ const paletteColours = { light: captionLink, dark: captionLink, }, + '--caption-main-media-text': { + light: captionMainMediaTextLight, + dark: captionMainMediaTextDark, + }, '--caption-overlay-text': { light: captionOverlayText, dark: captionOverlayText, }, - '--caption-photo-essay-main-media-text': { - light: captionPhotoEssayMainMediaTextLight, - dark: captionPhotoEssayMainMediaTextDark, - }, '--caption-text': { light: captionTextLight, dark: captionTextDark, @@ -7689,6 +7719,10 @@ const paletteColours = { light: shareButtonBorderLight, dark: shareButtonBorderDark, }, + '--share-button-border-meta': { + light: shareButtonBorderMetaLight, + dark: shareButtonBorderMetaDark, + }, '--share-button-copied': { light: shareButtonCopiedLight, dark: shareButtonCopiedDark,