Design tweaks in galleries meta

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 (
 		<span
 			css={[
-				iconStyle,
-				(format.display === ArticleDisplay.Immersive ||
-					format.design === ArticleDesign.Gallery) &&
+				iconStyle(format, isMainMedia),
+				format.display === ArticleDisplay.Immersive &&
 					hideIconBelowLeftCol,
 			]}
 		>
@@ -249,11 +253,11 @@ const CameraIcon = ({ format }: IconProps) => {
 	);
 };
 
-const VideoIcon = ({ format }: IconProps) => {
+const VideoIcon = ({ format, isMainMedia }: IconProps) => {
 	return (
 		<span
 			css={[
-				iconStyle,
+				iconStyle(format, isMainMedia),
 				format.display === ArticleDisplay.Immersive &&
 					hideIconBelowLeftCol,
 				videoIconStyle,
@@ -292,7 +296,7 @@ export const Caption = ({
 	const defaultCaption = (
 		<figcaption
 			css={[
-				captionStyle,
+				captionStyle(isMainMedia),
 				shouldLimitWidth && limitedWidth,
 				isOverlaid ? overlaidStyles(format) : bottomMarginStyles,
 				isMainMedia &&
@@ -305,9 +309,9 @@ export const Caption = ({
 			data-spacefinder-role="inline"
 		>
 			{mediaType === 'Video' ? (
-				<VideoIcon format={format} />
+				<VideoIcon format={format} isMainMedia={isMainMedia} />
 			) : (
-				<CameraIcon format={format} />
+				<CameraIcon format={format} isMainMedia={isMainMedia} />
 			)}
 			{!!captionText && (
 				<span
@@ -339,9 +343,7 @@ export const Caption = ({
 							 */
 							line-height: 1.15;
 							color: ${isMainMedia
-								? palette(
-										'--caption-photo-essay-main-media-text',
-								  )
+								? palette('--caption-main-media-text')
 								: palette('--caption-text')};
 							width: 100%;
 							margin-top: ${space[3]}px;
@@ -352,9 +354,7 @@ export const Caption = ({
 								padding-top: ${space[2]}px;
 								border-top: 1px solid
 									${isMainMedia
-										? palette(
-												'--caption-photo-essay-main-media-text',
-										  )
+										? palette('--caption-main-media-text')
 										: palette('--caption-text')};
 							}
 						`,

dotcom-rendering/src/components/Contributor.tsx

@@ -31,6 +31,16 @@ const standfirstColourBelowDesktop = css`
 	}
 `;
 
+const galleryBylineStyles = css`
+	a {
+		font-style: italic;
+		:hover {
+			text-decoration: none;
+			border-color: ${schemedPalette('--byline-anchor')};
+		}
+	}
+`;
+
 const bylineStyles = (format: ArticleFormat) => {
 	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;
 	}

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={<SvgShareWeb />}
 			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}
 				/>
 			);
 	}

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"
 		/>
 	);
 };

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: