Change share button border in galleries meta

Author: ioannakok

dotcom-rendering/src/components/ShareButton.importable.tsx

@@ -35,9 +35,16 @@ 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 &&
+	context == 'ArticleMeta'
+		? themePalette('--share-button-border-meta')
+		: sizeXSmall
 		? themePalette('--share-button-xsmall-border')
 		: themePalette('--share-button-border')};
 	height: ${sizeXSmall ? '24px' : '36px'};
@@ -123,11 +130,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 +153,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 +167,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 +187,7 @@ export const EmailLink = ({
 			icon={<SvgShareWeb />}
 			cssOverrides={css([
 				buttonStyles(sizeXSmall),
-				sharedButtonStyles(sizeXSmall),
+				sharedButtonStyles(sizeXSmall, context, format),
 				isLiveBlogMeta && liveBlogMobileMeta(false),
 			])}
 		>
@@ -261,6 +276,8 @@ export const ShareButton = ({
 					size={size}
 					isLiveBlogMeta={isLiveBlogMeta}
 					isCopied={isCopied}
+					context={context}
+					format={format}
 				/>
 			);
 		case 'copy':
@@ -277,6 +294,8 @@ export const ShareButton = ({
 					size={size}
 					isLiveBlogMeta={isLiveBlogMeta}
 					isCopied={isCopied}
+					context={context}
+					format={format}
 				/>
 			);
 		case 'email':
@@ -285,6 +304,8 @@ export const ShareButton = ({
 					href={`mailto:?subject=${webTitle}&body=${shareData.url}`}
 					size={size}
 					isLiveBlogMeta={isLiveBlogMeta}
+					context={context}
+					format={format}
 				/>
 			);
 	}

dotcom-rendering/src/paletteDeclarations.ts

@@ -3700,6 +3700,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:
@@ -7780,6 +7792,10 @@ const paletteColours = {
 		light: shareButtonBorderLight,
 		dark: shareButtonBorderDark,
 	},
+	'--share-button-border-meta': {
+		light: shareButtonBorderMetaLight,
+		dark: shareButtonBorderMetaDark,
+	},
 	'--share-button-copied': {
 		light: shareButtonCopiedLight,
 		dark: shareButtonCopiedDark,