Merge pull request #14247 from guardian/doml/section-colours

Add section colours for Pillar sections

Author: domlander

dotcom-rendering/src/components/FrontSection.tsx

@@ -98,6 +98,40 @@ type Props = {
 const width = (columns: number, columnWidth: number, columnGap: number) =>
 	`width: ${columns * columnWidth + (columns - 1) * columnGap}px;`;
 
+const borderColourStyles = (title?: string): string => {
+	switch (title) {
+		case 'News':
+			return schemePalette('--section-border-news');
+		case 'Opinion':
+			return schemePalette('--section-border-opinion');
+		case 'Sport':
+			return schemePalette('--section-border-sport');
+		case 'Lifestyle':
+			return schemePalette('--section-border-lifestyle');
+		case 'Culture':
+			return schemePalette('--section-border-culture');
+		default:
+			return schemePalette('--section-border-primary');
+	}
+};
+
+const articleSectionTitleStyles = (title?: string): string => {
+	switch (title) {
+		case 'News':
+			return schemePalette('--article-section-title-news');
+		case 'Opinion':
+			return schemePalette('--article-section-title-opinion');
+		case 'Sport':
+			return schemePalette('--article-section-title-sport');
+		case 'Lifestyle':
+			return schemePalette('--article-section-title-lifestyle');
+		case 'Culture':
+			return schemePalette('--article-section-title-culture');
+		default:
+			return schemePalette('--article-section-title');
+	}
+};
+
 /** Not all browsers support CSS grid, so we set explicit width as a fallback */
 const fallbackStyles = css`
 	@supports not (display: grid) {
@@ -401,10 +435,10 @@ const bottomPaddingBetaContainer = (
 	}
 `;
 
-const primaryLevelTopBorder = css`
+const primaryLevelTopBorder = (title?: string) => css`
 	grid-row: 1;
 	grid-column: 1 / -1;
-	border-top: 2px solid ${schemePalette('--section-border-primary')};
+	border-top: 2px solid ${borderColourStyles(title)};
 	/** Ensures the top border sits above the side borders */
 	z-index: 1;
 	height: fit-content;
@@ -590,7 +624,7 @@ export const FrontSection = ({
 						css={[
 							containerLevel === 'Secondary'
 								? secondaryLevelTopBorder
-								: primaryLevelTopBorder,
+								: primaryLevelTopBorder(title),
 						]}
 					/>
 				)}
@@ -629,9 +663,7 @@ export const FrontSection = ({
 										? schemePalette(
 												'--article-section-secondary-title',
 										  )
-										: schemePalette(
-												'--article-section-title',
-										  )
+										: articleSectionTitleStyles(title)
 								}
 								// On paid fronts the title is not treated as a link
 								url={!isOnPaidContentFront ? url : undefined}

dotcom-rendering/src/paletteDeclarations.ts

@@ -3064,10 +3064,65 @@ const articleSectionBackgroundDark: PaletteFunction = () =>
 
 const articleSectionTitleLight: PaletteFunction = () =>
 	sourcePalette.neutral[0];
-
 const articleSectionTitleDark: PaletteFunction = () =>
 	sourcePalette.neutral[86];
 
+const articleSectionTitleNewsLight: PaletteFunction = () =>
+	sourcePalette.neutral[7];
+const articleSectionTitleNewsDark: PaletteFunction = () =>
+	sourcePalette.neutral[86];
+
+const articleSectionTitleOpinionLight: PaletteFunction = () =>
+	sourcePalette.opinion[400];
+const articleSectionTitleOpinionDark: PaletteFunction = () =>
+	sourcePalette.opinion[500];
+
+const articleSectionTitleSportLight: PaletteFunction = () =>
+	sourcePalette.sport[400];
+const articleSectionTitleSportDark: PaletteFunction = () =>
+	sourcePalette.sport[500];
+
+const articleSectionTitleLifestyleLight: PaletteFunction = () =>
+	sourcePalette.lifestyle[400];
+const articleSectionTitleLifestyleDark: PaletteFunction = () =>
+	sourcePalette.lifestyle[450];
+
+const articleSectionTitleCultureLight: PaletteFunction = () =>
+	sourcePalette.culture[400];
+const articleSectionTitleCultureDark: PaletteFunction = () =>
+	sourcePalette.culture[450];
+
+const sectionBorderPrimaryLight: PaletteFunction = () =>
+	sourcePalette.neutral[20];
+const sectionBorderPrimaryDark: PaletteFunction = () =>
+	sourcePalette.neutral[38];
+
+const sectionBorderSecondaryLight: PaletteFunction = () =>
+	sourcePalette.neutral[73];
+const sectionBorderSecondaryDark: PaletteFunction = () =>
+	sourcePalette.neutral[38];
+
+const sectionBorderNewsLight: PaletteFunction = () => sourcePalette.neutral[20];
+const sectionBorderNewsDark: PaletteFunction = () => sourcePalette.neutral[38];
+
+const sectionBorderOpinionLight: PaletteFunction = () =>
+	sourcePalette.opinion[450];
+const sectionBorderOpinionDark: PaletteFunction = () =>
+	sourcePalette.opinion[450];
+
+const sectionBorderSportLight: PaletteFunction = () => sourcePalette.sport[400];
+const sectionBorderSportDark: PaletteFunction = () => sourcePalette.sport[400];
+
+const sectionBorderLifestyleLight: PaletteFunction = () =>
+	sourcePalette.lifestyle[400];
+const sectionBorderLifestyleDark: PaletteFunction = () =>
+	sourcePalette.lifestyle[400];
+
+const sectionBorderCultureLight: PaletteFunction = () =>
+	sourcePalette.culture[400];
+const sectionBorderCultureDark: PaletteFunction = () =>
+	sourcePalette.culture[400];
+
 const articleSectionSecondaryTitleLight: PaletteFunction = () =>
 	sourcePalette.neutral[20];
 
@@ -6107,6 +6162,26 @@ const paletteColours = {
 		light: articleSectionTitleLight,
 		dark: articleSectionTitleDark,
 	},
+	'--article-section-title-culture': {
+		light: articleSectionTitleCultureLight,
+		dark: articleSectionTitleCultureDark,
+	},
+	'--article-section-title-lifestyle': {
+		light: articleSectionTitleLifestyleLight,
+		dark: articleSectionTitleLifestyleDark,
+	},
+	'--article-section-title-news': {
+		light: articleSectionTitleNewsLight,
+		dark: articleSectionTitleNewsDark,
+	},
+	'--article-section-title-opinion': {
+		light: articleSectionTitleOpinionLight,
+		dark: articleSectionTitleOpinionDark,
+	},
+	'--article-section-title-sport': {
+		light: articleSectionTitleSportLight,
+		dark: articleSectionTitleSportDark,
+	},
 	'--article-text': {
 		light: articleTextLight,
 		dark: articleTextDark,
@@ -7268,13 +7343,33 @@ const paletteColours = {
 		light: () => sourcePalette.neutral[86],
 		dark: () => sourcePalette.neutral[20],
 	},
+	'--section-border-culture': {
+		light: sectionBorderCultureLight,
+		dark: sectionBorderCultureDark,
+	},
+	'--section-border-lifestyle': {
+		light: sectionBorderLifestyleLight,
+		dark: sectionBorderLifestyleDark,
+	},
+	'--section-border-news': {
+		light: sectionBorderNewsLight,
+		dark: sectionBorderNewsDark,
+	},
+	'--section-border-opinion': {
+		light: sectionBorderOpinionLight,
+		dark: sectionBorderOpinionDark,
+	},
 	'--section-border-primary': {
-		light: () => sourcePalette.neutral[20],
-		dark: () => sourcePalette.neutral[86],
+		light: sectionBorderPrimaryLight,
+		dark: sectionBorderPrimaryDark,
 	},
 	'--section-border-secondary': {
-		light: () => sourcePalette.neutral[73],
-		dark: () => sourcePalette.neutral[38],
+		light: sectionBorderSecondaryLight,
+		dark: sectionBorderSecondaryDark,
+	},
+	'--section-border-sport': {
+		light: sectionBorderSportLight,
+		dark: sectionBorderSportDark,
 	},
 	'--section-date': {
 		light: () => sourcePalette.news[400],