feat(input): add the readonly styles for the ionic theme (#29483)

Issue number: internal

---------

## What is the current behavior?
There are no custom styles when readonly is added to an input.

## What is the new behavior?
- Applies an `input-readonly` class when the `readonly` property is
`true`
- Styles the class in the `ionic` theme to match the design requirements
for readonly inputs
- Adds screenshot tests for the readonly style for an unset `fill` and
`"outline"` fill

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

core/src/components/input/input.ionic.scss

@@ -7,6 +7,8 @@
 // --------------------------------------------------
 
 :host {
+  // TODO(ROU-5477): use design token here when it is added
+  --color: #121212;
   --border-width: #{$ionic-border-size-small};
   --border-color: #{$ionic-color-neutral-300};
   --highlight-color-valid: #{$ionic-color-success-400};
@@ -178,6 +180,13 @@
   opacity: 0.6;
 }
 
+// Input - Readonly
+// ----------------------------------------------------------------
+
+:host(.input-readonly) {
+  --background: #{tokens.$ionic-color-neutral-10};
+}
+
 // Input Highlight
 // ----------------------------------------------------------------