Checkout step titles and descriptions show a white on white in dark themes in the editor.

[senadir]

In the editor, if you have a theme with a dark background, Checkout steps title and descriptions will show white text on white background.

This issue also exists for Cart block.

This is because we're using PlainText component which renders a textarea with a white background, and while the text renders the correct color (white), the background is still white.

How to reproduce

• Load up a theme with a possible dark background, like 2022 FSE.
• Load Checkout block.
• Switch to "use dark inputs" to remove false positives.
• See the broken text inputs.

Expected outcome

Fields should have no background to match the final UI.

Possible fixes

One fix is to force transparent background for all of those text areas, this is a blunt quick solution. Mainly to the .block-editor-plain-text selector.

Preferred solution is to switch to using RichText instead of PlainText. RichText can be tweaked to disble certain features like links and italic/bold text, but it will benefit from opt in to global styles like colors, sizes, and better customization, I'd love if we can spike this.