Update headline and branding styling for Labs Galleries

Co-authored-by: Marjan Kalanaki <[email protected]>

Author: deedeeh

dotcom-rendering/src/components/ArticleHeadline.tsx

@@ -143,14 +143,27 @@ const invertedFontLineHeight = css`
 	}
 `;
 
-const labsFont = css`
-	${textSansBold28};
-	line-height: 2rem;
-	${from.tablet} {
-		${textSansBold34};
-		line-height: 2.375rem;
+const labsFont = (design: ArticleDesign) => {
+	if (design === ArticleDesign.Gallery) {
+		return css`
+			${textSansBold34};
+			line-height: 2.1875rem;
+			${from.desktop} {
+				${textSansBold34};
+				font-size: 50px;
+				line-height: 3.125rem;
+			}
+		`;
 	}
-`;
+	return css`
+		${textSansBold28};
+		line-height: 2rem;
+		${from.tablet} {
+			${textSansBold34};
+			line-height: 2.375rem;
+		}
+	`;
+};
 
 const jumboLabsFont = css`
 	${textSansBold34};
@@ -426,7 +439,7 @@ export const ArticleHeadline = ({
 								<h1
 									css={[
 										format.theme === ArticleSpecial.Labs
-											? labsFont
+											? labsFont(format.design)
 											: headlineFont(format),
 										invertedText,
 										css`
@@ -508,7 +521,7 @@ export const ArticleHeadline = ({
 						<h1
 							css={[
 								format.theme === ArticleSpecial.Labs
-									? labsFont
+									? labsFont(format.design)
 									: headlineFont(format),
 								topPadding,
 								css`
@@ -549,7 +562,7 @@ export const ArticleHeadline = ({
 								<h1
 									css={[
 										format.theme === ArticleSpecial.Labs
-											? labsFont
+											? labsFont(format.design)
 											: headlineFont(format),
 										topPadding,
 										css`
@@ -584,7 +597,7 @@ export const ArticleHeadline = ({
 								<h1
 									css={[
 										format.theme === ArticleSpecial.Labs
-											? labsFont
+											? labsFont(format.design)
 											: headlineFont(format),
 										topPadding,
 										css`
@@ -626,7 +639,7 @@ export const ArticleHeadline = ({
 								<h1
 									css={[
 										format.theme === ArticleSpecial.Labs
-											? labsFont
+											? labsFont(format.design)
 											: headlineFont(format),
 										topPadding,
 										css`
@@ -667,7 +680,7 @@ export const ArticleHeadline = ({
 								<h1
 									css={[
 										format.theme === ArticleSpecial.Labs
-											? labsFont
+											? labsFont(format.design)
 											: headlineFont(format),
 										invertedWrapper,
 										invertedFontLineHeight,
@@ -718,7 +731,7 @@ export const ArticleHeadline = ({
 								<h1
 									css={[
 										format.theme === ArticleSpecial.Labs
-											? labsFont
+											? labsFont(format.design)
 											: headlineFont(format),
 										topPadding,
 										css`
@@ -760,7 +773,7 @@ export const ArticleHeadline = ({
 								<h1
 									css={[
 										format.theme === ArticleSpecial.Labs
-											? labsFont
+											? labsFont(format.design)
 											: headlineFont(format),
 										css`
 											color: ${isMatch
@@ -805,7 +818,7 @@ export const ArticleHeadline = ({
 									}
 									css={[
 										format.theme === ArticleSpecial.Labs
-											? labsFont
+											? labsFont(format.design)
 											: headlineFont(format),
 										topPadding,
 										css`
@@ -832,7 +845,7 @@ export const ArticleHeadline = ({
 							<h1
 								css={[
 									format.theme === ArticleSpecial.Labs
-										? labsFont
+										? labsFont(format.design)
 										: headlineFont(format),
 									topPadding,
 									css`
@@ -859,7 +872,7 @@ export const ArticleHeadline = ({
 								<h1
 									css={[
 										format.theme === ArticleSpecial.Labs
-											? labsFont
+											? labsFont(format.design)
 											: headlineFont(format),
 										css`
 											color: ${themePalette(
@@ -905,7 +918,7 @@ export const ArticleHeadline = ({
 								<h1
 									css={[
 										format.theme === ArticleSpecial.Labs
-											? labsFont
+											? labsFont(format.design)
 											: headlineFont(format),
 										topPadding,
 										css`

dotcom-rendering/src/paletteDeclarations.ts

@@ -2040,7 +2040,7 @@ const brandingLinkDark: PaletteFunction = ({ design, theme }) => {
 				case Pillar.Lifestyle:
 					return pillarPalette(theme, 500);
 				case ArticleSpecial.Labs:
-					return sourcePalette.specialReport[500];
+					return sourcePalette.neutral[73];
 				case ArticleSpecial.SpecialReport:
 					return sourcePalette.specialReport[500];
 				case ArticleSpecial.SpecialReportAlt:
@@ -3854,6 +3854,9 @@ const liveBlockBorderBottomDark: PaletteFunction = () =>
 const subMetaLabelTextLight: PaletteFunction = ({ theme, design }) => {
 	switch (theme) {
 		case ArticleSpecial.Labs:
+			if (design === ArticleDesign.Gallery) {
+				return sourcePalette.neutral[60];
+			}
 			return sourcePalette.neutral[7];
 		case ArticleSpecial.SpecialReport:
 			return sourcePalette.specialReport[300];
@@ -3870,9 +3873,8 @@ const subMetaLabelTextLight: PaletteFunction = ({ theme, design }) => {
 				case ArticleDesign.Picture:
 				case ArticleDesign.Video:
 				case ArticleDesign.Audio:
-					return sourcePalette.neutral[60];
 				case ArticleDesign.Gallery:
-					return sourcePalette.neutral[73];
+					return sourcePalette.neutral[60];
 				default:
 					return sourcePalette.neutral[46];
 			}