Read-only TextInput has incorrect background color due to Tearsheet overriding style

[richardpilot]

Package

Carbon for IBM Products

Description

The scss for the Tearsheet overrides the styling for TextInput, however when a TextInput component is in read-only mode, it's background-color is designed to match the background colour of the container.

https://github.com/carbon-design-system/ibm-products/blob/main/packages/ibm-products-styles/src/components/Tearsheet/_tearsheet.scss
Search for the override background-color: $field;

Current behaviour:

Expected behaviour:

Component(s) impacted

TextInput inside of any Tearsheet variant

Browser

No response

@carbon/ibm-products (previously @carbon/ibm-cloud-cognitive) version

2.47.0

Suggested Severity

None

Product/offering

MQ

CodeSandbox or Stackblitz example

https://codesandbox.io/p/devbox/wizardly-ellis-mf45yv

Steps to reproduce the issue (if applicable)

No response

Release date (if applicable)

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate issues

[makafsal]

Observed similar issues with components text-area, search-input, select-input, dropdown, dropdown-list, and date-picker.

Fix: Avoid this style override for components in readOnly state Line 408

Test: Make sure working with all themes