Sending RGBA colors to Stripe Appearance API (#9453)

Automattic · Sep 18, 2024 · 682cdd7 · 682cdd7
1 parent a9955a1
commit 682cdd7
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 58 deletions.
diff --git a/changelog/fix-dark-mode-stripe-appearance b/changelog/fix-dark-mode-stripe-appearance
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fixed CC form input fields appearance when using RGBA
diff --git a/client/checkout/upe-styles/index.js b/client/checkout/upe-styles/index.js
@@ -5,7 +5,6 @@ import { upeRestrictedProperties } from './upe-styles';
 import {
 	generateHoverRules,
 	generateOutlineStyle,
-	maybeConvertRGBAtoRGB,
 	dashedToCamelCase,
 	isColorLight,
 	getBackgroundColor,
@@ -380,8 +379,8 @@ export const getFieldStyles = (
 	for ( let i = 0; i < styles.length; i++ ) {
 		const camelCase = dashedToCamelCase( styles[ i ] );
 		if ( validProperties.includes( camelCase ) ) {
-			filteredStyles[ camelCase ] = maybeConvertRGBAtoRGB(
-				styles.getPropertyValue( styles[ i ] )
+			filteredStyles[ camelCase ] = styles.getPropertyValue(
+				styles[ i ]
 			);
 		}
 	}

diff --git a/client/checkout/upe-styles/test/index.js b/client/checkout/upe-styles/test/index.js
@@ -44,7 +44,7 @@ describe( 'Getting styles for automated theming', () => {
 			'.Input'
 		);
 		expect( fieldStyles ).toEqual( {
-			backgroundColor: 'rgb(255, 255, 255)',
+			backgroundColor: 'rgba(0, 0, 0, 0)',
 			color: 'rgb(109, 109, 109)',
 			fontFamily:
 				'"Source Sans Pro", HelveticaNeue-Light, "Helvetica Neue Light"',
@@ -134,7 +134,7 @@ describe( 'Getting styles for automated theming', () => {
 			theme: 'stripe',
 			rules: {
 				'.Input': {
-					backgroundColor: 'rgb(255, 255, 255)',
+					backgroundColor: 'rgba(0, 0, 0, 0)',
 					color: 'rgb(109, 109, 109)',
 					fontFamily:
 						'"Source Sans Pro", HelveticaNeue-Light, "Helvetica Neue Light"',
@@ -143,7 +143,7 @@ describe( 'Getting styles for automated theming', () => {
 					padding: '10px',
 				},
 				'.Input--invalid': {
-					backgroundColor: 'rgb(255, 255, 255)',
+					backgroundColor: 'rgba(0, 0, 0, 0)',
 					color: 'rgb(109, 109, 109)',
 					fontFamily:
 						'"Source Sans Pro", HelveticaNeue-Light, "Helvetica Neue Light"',
@@ -159,24 +159,24 @@ describe( 'Getting styles for automated theming', () => {
 					padding: '10px',
 				},
 				'.Tab': {
-					backgroundColor: 'rgb(255, 255, 255)',
+					backgroundColor: 'rgba(0, 0, 0, 0)',
 					color: 'rgb(109, 109, 109)',
 					fontFamily:
 						'"Source Sans Pro", HelveticaNeue-Light, "Helvetica Neue Light"',
 				},
 				'.Tab:hover': {
-					backgroundColor: 'rgb(237, 237, 237)',
-					color: 'rgb(0, 0, 0)',
+					backgroundColor: 'rgba(18, 18, 18, 0)',
+					color: 'rgb(255, 255, 255)',
 					fontFamily:
 						'"Source Sans Pro", HelveticaNeue-Light, "Helvetica Neue Light"',
 				},
 				'.Tab--selected': {
-					backgroundColor: 'rgb(255, 255, 255)',
+					backgroundColor: 'rgba(0, 0, 0, 0)',
 					color: 'rgb(109, 109, 109)',
 					outline: '1px solid rgb(150, 88, 138)',
 				},
 				'.TabIcon:hover': {
-					color: 'rgb(0, 0, 0)',
+					color: 'rgb(255, 255, 255)',
 				},
 				'.TabIcon--selected': {
 					color: 'rgb(109, 109, 109)',
@@ -207,7 +207,7 @@ describe( 'Getting styles for automated theming', () => {
 					padding: '10px',
 				},
 				'.Button': {
-					backgroundColor: 'rgb(255, 255, 255)',
+					backgroundColor: 'rgba(0, 0, 0, 0)',
 					color: 'rgb(109, 109, 109)',
 					fontFamily:
 						'"Source Sans Pro", HelveticaNeue-Light, "Helvetica Neue Light"',

diff --git a/client/checkout/upe-styles/test/utils.js b/client/checkout/upe-styles/test/utils.js
@@ -100,32 +100,6 @@ describe( 'UPE Utilities to generate UPE styles', () => {
 		} );
 	} );
 
-	test( 'maybeConvertRGBAtoRGB returns valid colors', () => {
-		const hex = '#ffffff';
-		const color = 'red';
-		const rgb = 'rgb(1, 2, 3)';
-		const rgbNoSpaces = 'rgb(1,2,3)';
-		const rgba = 'rgba(1, 2, 3, 1)';
-		const rgbaNoSpaces = 'rgba(1,2,3,1)';
-		const shadow = 'rgb(1,2,3) 0px 1px 1px 0px';
-		const shadowTransparent = 'rgba(1,2,3,1) 0px 1px 1px 0px';
-		const pixel = '0px';
-
-		expect( upeUtils.maybeConvertRGBAtoRGB( hex ) ).toEqual( hex );
-		expect( upeUtils.maybeConvertRGBAtoRGB( color ) ).toEqual( color );
-		expect( upeUtils.maybeConvertRGBAtoRGB( rgb ) ).toEqual( rgb );
-		expect( upeUtils.maybeConvertRGBAtoRGB( rgbNoSpaces ) ).toEqual(
-			rgbNoSpaces
-		);
-		expect( upeUtils.maybeConvertRGBAtoRGB( rgba ) ).toEqual( rgb );
-		expect( upeUtils.maybeConvertRGBAtoRGB( rgbaNoSpaces ) ).toEqual( rgb );
-		expect( upeUtils.maybeConvertRGBAtoRGB( shadow ) ).toEqual( shadow );
-		expect( upeUtils.maybeConvertRGBAtoRGB( shadowTransparent ) ).toEqual(
-			shadowTransparent
-		);
-		expect( upeUtils.maybeConvertRGBAtoRGB( pixel ) ).toEqual( pixel );
-	} );
-
 	test( 'isColorLight returns valid brightness values', () => {
 		const white = '#ffffff';
 		const black = '#000000';

diff --git a/client/checkout/upe-styles/utils.js b/client/checkout/upe-styles/utils.js
@@ -102,26 +102,6 @@ export const dashedToCamelCase = ( string ) => {
 	} );
 };
 
-/**
- * Converts rgba to rgb format, since Stripe Appearances API does not accept rgba format for background.
- *
- * @param {string} color CSS color value.
- * @return {string} Accepted CSS color value.
- */
-export const maybeConvertRGBAtoRGB = ( color ) => {
-	const colorParts = color.match(
-		/^rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(0?(\.\d+)?|1?(\.0+)?)\s*\)$/
-	);
-	if ( colorParts ) {
-		const alpha = colorParts[ 4 ] || 1;
-		const newColorParts = colorParts.slice( 1, 4 ).map( ( part ) => {
-			return Math.round( part * alpha + 255 * ( 1 - alpha ) );
-		} );
-		color = `rgb(${ newColorParts.join( ', ' ) })`;
-	}
-	return color;
-};
-
 /**
  * Searches through array of CSS selectors and returns first visible background color.
  *