Forms: Improve compatibility with dark themes and outline styles

[enejb]

Impacted plugin

Jetpack

Quick summary

Currently when you use a dark theme (such as twenty twenty five with the dark colour pattern) you end up with a buggy design of the Outline style.

See

Steps to reproduce

1. Activate the twenty twenty five theme. Select the "Evening" colour style.
2. Add a form to the page and select the Outline option.

Notice that there is a white border under the label text.
Notice that the placeholder text is hardly visible.

Site owner impact

Fewer than 20% of the total website/platform users

Severity

Moderate

What other impact(s) does this issue have?

No response

If a workaround is available, please outline it here.

You could apply some custom css to fix this issue.

Platform (Simple and/or Atomic)

Simple, Self-hosted, Atomic

[github-actions]

This issue could use some more labels, to help prioritize and categorize our work. Could you please add at least a [Type], a [Feature], and a [Pri] label?

[simison]

Global styles support should improve this, @aaronrobertshaw ?

[aaronrobertshaw]

Global styles support should improve this, @aaronrobertshaw ?

It might, in that it would allow theme authors to tweak the variation's inner block styles in theme.json. There's no UI for updating inner block styles for a block style variation in Global Styles for end users though. This was on the horizon in Gutenberg however the thinking was that we might need an overhaul of the Global Style IA.

If you're thinking that the form styles will automatically adapt to the selected theme. I don't think Global Styles will solve that out of the box.

Either way, I suspect the form and outline block style variation will need default style updates.