readonly state is not visually indicated

Added a patch for the same

The patch is working but we do not need this patch because the webform providing style already for readonly and disabled type filed. Attaching screenshot for more clarification.

before/after screenshots should be added to the issue summary.

@ravi kant is that class coming from a contrib module?

in #3 @ravi kant mentioned web form provides the default state for read-only and disabled but this CSS comes from the webform module which is the contrib module.

We need ready-only styling in the claro theme as well.

@Mukeysh - make sense!
Added code with before/after png

I don't think we should be applying the disabled styles either because disabled elements are not the same as readonly. The styles for disabled elements have been designed for that specific use case.

Are there convention to how read only fields should be styled? I checked some common design systems like Bootstrap and it looks like they also don't style the readonly fields.