feat(textarea): add styles for textarea solid fill (#30685)

Issue number: internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- highlight should only appear on md;
- fix some textarea ionic css vars usage;
- create sheet for ionic.solid;

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

[fill](https://ionic-framework-git-rou-12225-ionic1.vercel.app/src/components/textarea/test/fill?ionic:theme=ionic)

[color](https://ionic-framework-git-rou-12225-ionic1.vercel.app/src/components/textarea/test/color?ionic:theme=ionic)

[states](https://ionic-framework-git-rou-12225-ionic1.vercel.app/src/components/textarea/test/states?ionic:theme=ionic)

---------

Co-authored-by: ionitron <[email protected]>
Co-authored-by: Brandy Smith <[email protected]>

Author: 3 people

core/src/components/textarea/test/fill/textarea.e2e.ts-snapshots/textarea-fill-shaped-solid-custom-ionic-md-ltr-light-Mobile-Chrome-linux.png

@@ -151,6 +151,31 @@ configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screensh
           await expect(container).toHaveScreenshot(screenshot(`textarea-readonly-no-fill`));
         });
       });
+
+      test.describe(title('solid'), () => {
+        test('should render readonly invalid textarea correctly', async ({ page }) => {
+          await page.setContent(
+            `
+            <div class="container">
+              <ion-textarea
+                label="Email"
+                label-placement="stacked"
+                value="[email protected]"
+                helper-text="Enter an email"
+                counter="true"
+                maxlength="20"
+                class="ion-touched ion-invalid"
+                readonly="true"
+              ></ion-textarea>
+            </div>
+          `,
+            config
+          );
+
+          const container = page.locator('.container');
+          await expect(container).toHaveScreenshot(screenshot(`textarea-readonly-solid-invalid`));
+        });
+      });
     });
   });
 });