Add helper method to adjust colour for opacity

Author: jamesmockett

dotcom-rendering/src/lib/colour.test.ts

@@ -1,4 +1,4 @@
-import { getContrast, isLight } from './colour';
+import { addAlpha, getContrast, isLight } from './colour';
 
 const round = (value: number): number => Math.round(value * 100) / 100;
 
@@ -55,3 +55,18 @@ describe('getContrast', () => {
 		expect(round(getContrast('#559861', '#1a1a1a'))).toEqual(5.01);
 	});
 });
+
+describe('addAlpha', () => {
+	it('should return new colour adjusted for opacity against background colour', () => {
+		expect(addAlpha('#da020e', '#ffffff', 1)).toBe('#da020e');
+		expect(addAlpha('#da020e', '#1a1a1a', 1)).toBe('#da020e');
+		expect(addAlpha('#da020e', '#ffffff', 0.1)).toBe('#fbe6e7');
+		expect(addAlpha('#da020e', '#1a1a1a', 0.1)).toBe('#2d1819');
+		expect(addAlpha('#023474', '#ffffff', 0.1)).toBe('#e6ebf1');
+		expect(addAlpha('#023474', '#1a1a1a', 0.1)).toBe('#181d23');
+	});
+	it('should return fallback colour if invalid colour passed in', () => {
+		expect(addAlpha('#xyz', '#ffffff', 1)).toBe('#7f7f7f');
+		expect(addAlpha('#ffffff', '#xyz', 1)).toBe('#7f7f7f');
+	});
+});

dotcom-rendering/src/lib/colour.ts

@@ -23,6 +23,26 @@ const hexToRgb = (
 		: null;
 };
 
+export const addAlpha = (
+	colour: string,
+	background: string,
+	alpha: number,
+): string => {
+	const rgbColour = hexToRgb(colour);
+	const rgbBackground = hexToRgb(background);
+	if (!rgbColour || !rgbBackground) return '#7f7f7f'; // fallback to mid grey
+
+	const bg = [rgbBackground.r, rgbBackground.g, rgbBackground.b];
+	const alphaColour = [rgbColour.r, rgbColour.g, rgbColour.b].map(
+		(channel, index) =>
+			Math.round(alpha * channel + (1 - alpha) * bg[index]!)
+				.toString(16)
+				.padStart(2, '0'),
+	);
+
+	return `#${alphaColour[0]}${alphaColour[1]}${alphaColour[2]}`;
+};
+
 // https://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
 // Based on: https://github.com/siege-media/contrast-ratio/blob/gh-pages/color.js
 const processLuminance = (channel: number): number => {