From 682cdd723a7c1d9e04f1cbe9ad5a27027df67ddb Mon Sep 17 00:00:00 2001 From: Guilherme Pressutto Date: Wed, 18 Sep 2024 10:14:54 -0300 Subject: [PATCH] Sending RGBA colors to Stripe Appearance API (#9453) --- changelog/fix-dark-mode-stripe-appearance | 4 ++++ client/checkout/upe-styles/index.js | 5 ++--- client/checkout/upe-styles/test/index.js | 18 ++++++++-------- client/checkout/upe-styles/test/utils.js | 26 ----------------------- client/checkout/upe-styles/utils.js | 20 ----------------- 5 files changed, 15 insertions(+), 58 deletions(-) create mode 100644 changelog/fix-dark-mode-stripe-appearance diff --git a/changelog/fix-dark-mode-stripe-appearance b/changelog/fix-dark-mode-stripe-appearance new file mode 100644 index 00000000000..4b0d6614cd3 --- /dev/null +++ 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 index 1e924f41a42..73f84596924 100644 --- 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 index 47467adeb21..fc63030ddb0 100644 --- 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 index f886d46ff9c..c8b8398f3cf 100644 --- 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 index 19714f6e96a..d8d5cbfe81a 100644 --- 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. *