Sending RGBA colors to Stripe Appearance API

Automattic · Sep 17, 2024 · 58ffb40 · 58ffb40
1 parent a9955a1
commit 58ffb40
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 49 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/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.
  *