Automattic / woocommerce-payments

Accept payments via credit card. Manage transactions within WordPress.
https://wordpress.org/plugins/woocommerce-payments/
Other
175 stars 69 forks source link

Stripe Appearance API is throwing warnings about RGBA #9502

Closed gpressutto5 closed 1 month ago

gpressutto5 commented 1 month ago

Describe the bug

In #9453, I removed the maybeConvertRGBAtoRGB method because it looked like Stripe does not throw a warning regarding rgba values anymore. This is not well documented on their side so we only discover this by trial and error. Now while working on the Blocks Checkout, I discovered Stripe supports RGBA for background color but not for text color, so we need to bring back that method for text color.

To Reproduce

  1. Use custom css to set the background and text color of your labels and inputs to an RGBA value.
  2. Go to the checkout and render the Payment Element.
  3. Notice warnings in the console for the text color.

[Stripe.js] elements-inner-loader-ui.html: invalid variable value "rgba(18, 18, 18, 0.7)" provided to "colorText"; "colorText" accepts a valid HEX, rgb(), or hsl() CSS color.

Screenshots

image

anu-rock commented 1 month ago

Triaging alert: This issue is related to the checkout form and there is already a PR attached. Sending it to Heisenberg as per Pc2DNy-3z-p2 by adding the relevant focus label. cc @FangedParakeet