Discussion badges dark mode colour changes (#10816)

guardian · Mar 5, 2024 · 5e11962 · 5e11962
1 parent 517a5a1
commit 5e11962
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 19 deletions.
diff --git a/dotcom-rendering/src/components/Discussion/Badges.tsx b/dotcom-rendering/src/components/Discussion/Badges.tsx
@@ -1,13 +1,7 @@
 import { css } from '@emotion/react';
-import {
-	palette as sourcePalette,
-	space,
-	textSans,
-} from '@guardian/source-foundations';
+import { space, textSans } from '@guardian/source-foundations';
 import { palette as themePalette } from '../../palette';
 
-const white = sourcePalette.neutral[100];
-
 const staffBadge = css`
 	display: flex;
 	flex-direction: row;
@@ -27,10 +21,6 @@ const labelText = css`
 	${textSans.xxsmall({ fontWeight: 'bold' })};
 `;
 
-const staffIcon = css`
-	fill: ${sourcePalette.brand[400]};
-`;
-
 const staffLabel = css`
 	color: ${themePalette('--discussion-staff-label-text')};
 `;
@@ -44,11 +34,12 @@ export const GuardianStaff = () => (
 			width="36"
 			height="36"
 			viewBox="0 0 36 36"
-			css={[iconStyles, staffIcon]}
+			css={iconStyles}
+			fill={themePalette('--staff-contributor-badge')}
 		>
 			<path d="M18 0a18 18 0 1 0 0 36 18 18 0 0 0 0-36"></path>
 			<path
-				fill={white}
+				fill={themePalette('--staff-contributor-badge-text')}
 				d="M21.2 4.4c2.3.4 5.3 2 6.3 3.1v5.2H27L21.2 5v-.6zm-2.2.4c-4 0-6.3 5.6-6.3 13.2 0 7.7 2.2 13.3 6.3 13.3v.6c-6 .4-14.4-4.2-14-13.8A13.3 13.3 0 0 1 19 4v.7zm10.4 14.4l-1.9.9v8.6c-1 1-3.8 2.6-6.3 3.1V19.9l-2.2-.7v-.6h10.4v.6z"
 			></path>
 		</svg>
@@ -62,11 +53,12 @@ export const GuardianContributor = () => (
 			width="36"
 			height="36"
 			viewBox="0 0 36 36"
-			css={[iconStyles, staffIcon]}
+			css={iconStyles}
+			fill={themePalette('--staff-contributor-badge')}
 		>
 			<path d="M18 0a18 18 0 1 0 0 36 18 18 0 0 0 0-36"></path>
 			<path
-				fill={white}
+				fill={themePalette('--staff-contributor-badge-text')}
 				d="M21.2 4.4c2.3.4 5.3 2 6.3 3.1v5.2H27L21.2 5v-.6zm-2.2.4c-4 0-6.3 5.6-6.3 13.2 0 7.7 2.2 13.3 6.3 13.3v.6c-6 .4-14.4-4.2-14-13.8A13.3 13.3 0 0 1 19 4v.7zm10.4 14.4l-1.9.9v8.6c-1 1-3.8 2.6-6.3 3.1V19.9l-2.2-.7v-.6h10.4v.6z"
 			></path>
 		</svg>
@@ -76,10 +68,16 @@ export const GuardianContributor = () => (
 
 export const GuardianPick = () => (
 	<div css={staffBadge}>
-		<svg width="36" height="36" viewBox="0 0 36 36" css={iconStyles}>
+		<svg
+			width="36"
+			height="36"
+			viewBox="0 0 36 36"
+			css={iconStyles}
+			fill={themePalette('--staff-pick-badge')}
+		>
 			<path d="M18 0a18 18 0 1 0 0 36 18 18 0 0 0 0-36"></path>
 			<path
-				fill={white}
+				fill={themePalette('--staff-pick-badge-text')}
 				d="M21.2 4.4c2.3.4 5.3 2 6.3 3.1v5.2H27L21.2 5v-.6zm-2.2.4c-4 0-6.3 5.6-6.3 13.2 0 7.7 2.2 13.3 6.3 13.3v.6c-6 .4-14.4-4.2-14-13.8A13.3 13.3 0 0 1 19 4v.7zm10.4 14.4l-1.9.9v8.6c-1 1-3.8 2.6-6.3 3.1V19.9l-2.2-.7v-.6h10.4v.6z"
 			></path>
 		</svg>

diff --git a/dotcom-rendering/src/palette.ts b/dotcom-rendering/src/palette.ts
@@ -4603,10 +4603,23 @@ const topPickLinkLight: PaletteFunction = () => sourcePalette.brand[500];
 const topPickLinkDark: PaletteFunction = () => sourcePalette.brand[800];
 
 const staffLabelLight: PaletteFunction = () => sourcePalette.brand[400];
-const staffLabelDark: PaletteFunction = () => sourcePalette.brand[600];
+const staffLabelDark: PaletteFunction = () => sourcePalette.brand[800];
 
 const staffPickLight: PaletteFunction = () => sourcePalette.neutral[7];
-const staffPickDark: PaletteFunction = () => sourcePalette.neutral[97];
+const staffPickDark: PaletteFunction = () => sourcePalette.neutral[86];
+
+const staffPickBadgeLight: PaletteFunction = () => sourcePalette.neutral[7];
+const staffPickBadgeDark: PaletteFunction = () => sourcePalette.neutral[100];
+
+const staffPickBadgeTextLight: PaletteFunction = () =>
+	sourcePalette.neutral[100];
+const staffPickBadgeTextDark: PaletteFunction = () => sourcePalette.neutral[7];
+
+const staffBadgeLight: PaletteFunction = () => sourcePalette.brand[400];
+const staffBadgeDark: PaletteFunction = () => sourcePalette.neutral[100];
+
+const staffBadgeTextLight: PaletteFunction = () => sourcePalette.neutral[100];
+const staffBadgeTextDark: PaletteFunction = () => sourcePalette.brand[400];
 
 const recommendationCountLight: PaletteFunction = () =>
 	sourcePalette.neutral[97];
@@ -5976,6 +5989,22 @@ const paletteColours = {
 		light: shareButtonBorderXSmallLight,
 		dark: shareButtonBorderXSmallLight,
 	},
+	'--staff-contributor-badge': {
+		light: staffBadgeLight,
+		dark: staffBadgeDark,
+	},
+	'--staff-contributor-badge-text': {
+		light: staffBadgeTextLight,
+		dark: staffBadgeTextDark,
+	},
+	'--staff-pick-badge': {
+		light: staffPickBadgeLight,
+		dark: staffPickBadgeDark,
+	},
+	'--staff-pick-badge-text': {
+		light: staffPickBadgeTextLight,
+		dark: staffPickBadgeTextDark,
+	},
 	'--discussion-pre-mod': {
 		light: discussionPreModLight,
 		dark: discussionPreModDark,