Support css variables in button themes for automatic hover colour

.changeset/yellow-moments-follow.md

@@ -0,0 +1,5 @@
+---
+'@guardian/source': minor
+---
+
+Add support for CSS variables in automatic button hover colours

libs/@guardian/source/src/react-components/button/Button.stories.tsx

@@ -386,6 +386,21 @@ export const CustomTheme: Story = {
 	},
 };
 
+export const CustomThemeCssVar: Story = {
+	args: {
+		...PrimaryPriorityDefaultTheme.args,
+		theme: {
+			textPrimary: palette.neutral[100],
+			backgroundPrimary: 'var(--bg)',
+		},
+	},
+	render: (args) => {
+		document.documentElement.style.setProperty('--bg', '#7d0068');
+
+		return <Button {...args} />;
+	},
+};
+
 export const CustomTransparentTheme: Story = {
 	args: {
 		...PrimaryPriorityDefaultTheme.args,

libs/@guardian/source/src/react-components/button/hoverColour.ts

@@ -4,6 +4,23 @@ export const calculateHoverColour = (
 	backgroundColour: string,
 	borderColour?: string,
 ): string => {
+	// A CSS variable supplied - try fetch value in browser
+	if (backgroundColour.startsWith('var')) {
+		const cssVariableName = backgroundColour
+			.substring(4, backgroundColour.length - 1)
+			.trim();
+
+		const backgroundColourFromVar = getComputedStyle(
+			document.body,
+		).getPropertyValue(cssVariableName);
+
+		if (backgroundColourFromVar === '') {
+			return backgroundColour;
+		}
+
+		return calculateHoverColour(backgroundColourFromVar, borderColour);
+	}
+
 	if (backgroundColour === 'transparent') {
 		if (borderColour !== undefined) {
 			return calculateTransparentBackgroundHover(borderColour);