Description

While going through #60275, #68807, #69312, and #69334, I noticed InputControl and TextareaControl hav einconsistent and buggy behaviors for:

• The label color.
• The placeholder attribute color.
• The input and textarea background color.
• The input and textarea background color when disabled.

This is more noticeable when using the components inside the editor canvas with both a light and dark backgrounds.

One of these buggy behaviors is surfaced after the is-dark-theme CSS class for the Post Editor was fixed in #68481

I'd expect these two components to use a consistent styling for all states and have the same behavior with a dark background theme.
Cc @WordPress/gutenberg-components

To quickly test, I added the components below to the PostTitle:

<TextareaControl
	label="TextareaControl"
	placeholder="Placeholder"
	rows={ 3 }
	__nextHasNoMarginBottom
/>
<br />
<InputControl
	__next40pxDefaultSize
	type="text"
	value=""
	label="InputControl"
	placeholder="Placeholder"
/>
<br />
<TextareaControl
	label="TextareaControl disabled"
	placeholder="Placeholder"
	rows={ 3 }
	__nextHasNoMarginBottom
	disabled
/>
<br />
<InputControl
	__next40pxDefaultSize
	type="text"
	value=""
	label="InputControl disabled"
	placeholder="Placeholder"
	disabled
/>
<br />

Light	Dark

Once the ongoing work on the placeholder text color in the issues linked above is complete, I'll try to raise a PR for these additional fixes.

Step-by-step reproduction instructions

• Add the components as explained above.
• Edit a post. Compare with a theme with light background and another one with dark background (e.g. Twenty Twenty-Four 'Maelstrom' variation).
• Observe that:
• TextareaControl for both enabled and disabled state doesn't have a background color set. It uses the browser default background color.
• InputControl does have a background color but it comes from the container, while the input has a transparent color.
• With a dark theme:
  • The TextareaControl placeholder is barely visible. Expected: to stay dark gray.
  • The InputControl label color doesn't switch to white. The TextareaControl does.
  • The TextareaControl background color for the disabled state is the browser default color.
  • The InputControl background color for the disabled state is a very light gray.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure