Move to centralised Dotcom palette

guardian · May 21, 2024 · 9fbffbc · 9fbffbc
1 parent 96ff6e9
commit 9fbffbc
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 63 deletions.
diff --git a/dotcom-rendering/src/components/Titlepiece.tsx b/dotcom-rendering/src/components/Titlepiece.tsx
@@ -11,6 +11,7 @@ import {
 import { SvgGuardianLogo, SvgMenu } from '@guardian/source-react-components';
 import { useEffect, useState } from 'react';
 import type { EditionId } from '../lib/edition';
+import { palette as themePalette } from '../palette';
 import { TitlepieceEditionDropdown } from './TitlepieceEditionDropdown';
 import { TitlepieceGrid } from './TitlepieceGrid';
 
@@ -93,9 +94,12 @@ const guardianLogoStyles = css`
 		@media (min-width: 1024px) and (max-width: 1279px) {
 			height: 94px;
 		}
-		@media (min-width: 1280px) {
+		@media (min-width: 1280px) and (max-width: 1439px) {
 			height: 115px;
 		}
+		@media (min-width: 1440px) {
+			height: 135px;
+		}
 	}
 	@media (min-width: 480px) and (max-width: 1023px) {
 		margin-bottom: 10px;
@@ -117,16 +121,17 @@ const burgerStyles = css`
 	width: ${veggieBurgerDiameter}px;
 	margin-bottom: 6px;
 	border-radius: 50%;
-	background-color: ${palette.brandAlt[400]};
+	background-color: ${themePalette('--masthead-veggie-burger-background')};
 	justify-content: center;
 	display: flex;
 	:hover {
-		background-color: ${palette.brandAlt[300]};
+		background-color: ${themePalette(
+			'--masthead-veggie-burger-background-hover',
+		)};
 	}
 	@media (min-width: 375px) {
 		grid-row: 2;
 		align-self: center;
-		z-index: 10;
 	}
 	@media (min-width: 1024px) {
 		grid-row: 1 / 2;
@@ -145,7 +150,7 @@ const burgerStyles = css`
 
 const navLinkStyles = css`
 	a {
-		color: ${palette.neutral[100]};
+		color: ${themePalette('--masthead-nav-link-text')};
 		text-decoration: none;
 	}
 `;
@@ -157,7 +162,7 @@ const pillarsNavStyles = css`
 
 	${headlineBold14}
 	margin-top: ${space[2]}px;
-	border-bottom: 1px solid ${palette.neutral[86]};
+	border-bottom: 1px solid ${themePalette('--masthead-nav-lines')};
 	@media (min-width: 1024px) {
 		grid-row: 1 / 2;
 	}
@@ -215,7 +220,7 @@ const pillarBarStyles = css`
 	right: 0;
 	margin-top: ${space[1]}px;
 	width: 1px;
-	background-color: ${palette.neutral[86]};
+	background-color: ${themePalette('--masthead-nav-lines')};
 `;
 
 const sectionsNavStyles = css`
@@ -251,13 +256,7 @@ export const Titlepiece = ({ editionId }: TitlepieceProps) => {
 		};
 	}, []);
 	return (
-		<TitlepieceGrid
-			style={{
-				backgroundColor: palette.brand[400],
-				color: palette.neutral[100],
-			}}
-			type="header"
-		>
+		<TitlepieceGrid type="header">
 			{/* Edition menu */}
 			<div css={editionsMenuStyles}>
 				<TitlepieceEditionDropdown
@@ -270,13 +269,20 @@ export const Titlepiece = ({ editionId }: TitlepieceProps) => {
 			{/* Guardian logo */}
 			<div css={guardianLogoStyles}>
 				<a href="https://theguardian.com">
-					<SvgGuardianLogo textColor={palette.neutral[100]} />
+					<SvgGuardianLogo
+						textColor={themePalette('--masthead-nav-link-text')}
+					/>
 				</a>
 			</div>
 
-			{/* Burger menu */}
+			{/* Veggie burger menu */}
 			<div css={burgerStyles}>
-				<SvgMenu size="small" theme={{ fill: palette.brand[400] }} />
+				<SvgMenu
+					size="small"
+					theme={{
+						fill: themePalette('--masthead-veggie-burger-icon'),
+					}}
+				/>
 			</div>
 
 			{/* Pillars nav */}

diff --git a/dotcom-rendering/src/components/TitlepieceGrid.tsx b/dotcom-rendering/src/components/TitlepieceGrid.tsx
@@ -1,7 +1,13 @@
 import type { SerializedStyles } from '@emotion/react';
 import { css, jsx } from '@emotion/react';
-import { from, palette, until } from '@guardian/source-foundations';
+import { from } from '@guardian/source-foundations';
 import type { CSSProperties, PropsWithChildren } from 'react';
+import { palette as themePalette } from '../palette';
+
+const colours = css`
+	background-color: ${themePalette('--masthead-nav-background')};
+	color: ${themePalette('--masthead-nav-link-text')};
+`;
 
 const grid = css`
 	display: grid;
@@ -81,11 +87,10 @@ const grid = css`
 export const TitlepieceGrid = ({
 	type = 'div',
 	children,
-	style,
 }: PropsWithChildren<{
 	type: keyof JSX.IntrinsicElements;
 	style?: CSSProperties;
-}>) => jsx(type, { css: grid, style }, children);
+}>) => jsx(type, { css: [colours, grid] }, children);
 
 /** Spans the entire width of the grid */
 export const Content = ({
@@ -137,45 +142,3 @@ export const RightColumn = ({ children }: PropsWithChildren) => (
 		{children}
 	</section>
 );
-
-export const Lines = ({
-	colour = palette.neutral[86],
-	right = true,
-	left = true,
-	top = false,
-	bottom = false,
-	gridRowStart = 1,
-}: {
-	colour?: string;
-	right?: boolean;
-	left?: boolean;
-	top?: boolean;
-	bottom?: boolean;
-	gridRowStart?: number;
-}) => (
-	<div
-		style={{
-			gridColumn: 'content',
-			gridRowStart,
-			gridRowEnd: -1,
-			borderColor: colour,
-			borderRightStyle: right ? 'solid' : undefined,
-			borderLeftStyle: left ? 'solid' : undefined,
-			borderTopStyle: top ? 'solid' : undefined,
-			borderBottomStyle: bottom ? 'solid' : undefined,
-		}}
-		css={css`
-			border-width: 1px;
-
-			margin: 0 -10px;
-
-			${from.mobileLandscape} {
-				margin: 0 -20px;
-			}
-
-			${until.tablet} {
-				border-left-style: none;
-			}
-		`}
-	/>
-);
diff --git a/dotcom-rendering/src/palette.ts b/dotcom-rendering/src/palette.ts
@@ -5422,8 +5422,16 @@ const mastheadTopBarVerticalDivider: PaletteFunction = () =>
 	sourcePalette.brand[600];
 
 const mastheadNavBackground: PaletteFunction = () => sourcePalette.brand[400];
-const mastheadNavLinkText: PaletteFunction = () => sourcePalette.brand[400];
+const mastheadNavLinkText: PaletteFunction = () => sourcePalette.neutral[100];
 const mastheadNavBorder: PaletteFunction = () => sourcePalette.brand[600];
+const mastheadNavLines: PaletteFunction = () => sourcePalette.neutral[86];
+
+const mastheadVeggieBurgerIcon: PaletteFunction = () =>
+	sourcePalette.brand[400];
+const mastheadVeggieBurgerBackground: PaletteFunction = () =>
+	sourcePalette.brandAlt[400];
+const mastheadVeggieBurgerBackgroundHover: PaletteFunction = () =>
+	sourcePalette.brandAlt[300];
 
 // ----- Palette ----- //
 
@@ -6470,10 +6478,26 @@ const paletteColours = {
 		light: mastheadNavLinkText,
 		dark: mastheadNavLinkText,
 	},
+	'--masthead-nav-lines': {
+		light: mastheadNavLines,
+		dark: mastheadNavLines,
+	},
 	'--masthead-nav-border': {
 		light: mastheadNavBorder,
 		dark: mastheadNavBorder,
 	},
+	'--masthead-veggie-burger-icon': {
+		light: mastheadVeggieBurgerIcon,
+		dark: mastheadVeggieBurgerIcon,
+	},
+	'--masthead-veggie-burger-background': {
+		light: mastheadVeggieBurgerBackground,
+		dark: mastheadVeggieBurgerBackground,
+	},
+	'--masthead-veggie-burger-background-hover': {
+		light: mastheadVeggieBurgerBackgroundHover,
+		dark: mastheadVeggieBurgerBackgroundHover,
+	},
 } satisfies PaletteColours;
 
 /**