feat(input): add styles for counter text on ionic theme (#29516)

Issue number: internal

---------

## What is the current behavior?
The counter text for the ionic theme does not have added styles.

## What is the new behavior?
- Updates the `color` of the counter text to match the design
- Updates the screenshots that were changed with this update

## Does this introduce a breaking change?
- [ ] Yes
- [x] No

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

@@ -113,15 +113,16 @@
   font-weight: var(--ionic-font-weight-medium, 500);
 }
 
-// Input Hint Text
+// Input Bottom Text
 // ----------------------------------------------------------------
 
-.input-bottom .helper-text {
+.input-bottom .helper-text,
+.input-bottom .counter {
   color: tokens.$ionic-color-neutral-600;
 }
 
 :host(.has-focus.ion-valid) .helper-text {
-  color: #{tokens.$ionic-color-success-800};
+  color: tokens.$ionic-color-success-800;
 }
 
 :host(.ion-touched.ion-invalid) .error-text {

core/src/components/input/test/bottom-content/index.html

@@ -49,58 +49,159 @@
       </ion-header>
 
       <ion-content id="content" class="ion-padding">
+        <h2>Underline</h2>
+
         <div class="grid">
           <div class="grid-item">
             <h2>No Hint</h2>
-            <ion-input label="Email"></ion-input>
+            <ion-input placeholder="Placeholder" label="Email"></ion-input>
           </div>
 
           <div class="grid-item">
             <h2>Helper Hint</h2>
-            <ion-input label="Email" helper-text="Enter your email"></ion-input>
+            <ion-input placeholder="Placeholder" label="Email" helper-text="Helper message"></ion-input>
           </div>
 
           <div class="grid-item">
             <h2>Error Hint</h2>
             <ion-input
+              placeholder="Placeholder"
               class="ion-touched ion-invalid"
               label="Email"
-              error-text="Please enter a valid email"
+              error-text="Helper message"
             ></ion-input>
           </div>
 
           <div class="grid-item">
             <h2>Custom Error Color</h2>
             <ion-input
+              placeholder="Placeholder"
               class="ion-touched ion-invalid custom-error-color"
               label="Email"
-              error-text="Please enter a valid email"
+              error-text="Helper message"
             ></ion-input>
           </div>
 
           <div class="grid-item">
             <h2>Counter</h2>
-            <ion-input label="Email" counter="true" maxlength="100"></ion-input>
+            <ion-input placeholder="Placeholder" label="Email" counter="true" maxlength="100"></ion-input>
           </div>
 
           <div class="grid-item">
             <h2>Custom Counter</h2>
-            <ion-input id="custom-counter" label="Email" counter="true" maxlength="100"></ion-input>
+            <ion-input
+              placeholder="Placeholder"
+              id="custom-counter"
+              label="Email"
+              counter="true"
+              maxlength="100"
+            ></ion-input>
           </div>
 
           <div class="grid-item">
             <h2>Counter with Helper</h2>
-            <ion-input label="Email" counter="true" maxlength="100" helper-text="Enter an email"></ion-input>
+            <ion-input
+              placeholder="Placeholder"
+              label="Email"
+              counter="true"
+              maxlength="100"
+              helper-text="Enter an email"
+            ></ion-input>
           </div>
 
           <div class="grid-item">
             <h2>Counter with Error</h2>
             <ion-input
+              placeholder="Placeholder"
               class="ion-touched ion-invalid"
               label="Email"
               counter="true"
               maxlength="100"
-              error-text="Please enter a valid email"
+              error-text="Helper message"
+            ></ion-input>
+          </div>
+        </div>
+
+        <h2>Outline</h2>
+
+        <div class="grid">
+          <div class="grid-item">
+            <h2>No Hint</h2>
+            <ion-input placeholder="Placeholder" fill="outline" label="Email"></ion-input>
+          </div>
+
+          <div class="grid-item">
+            <h2>Helper Hint</h2>
+            <ion-input placeholder="Placeholder" fill="outline" label="Email" helper-text="Helper message"></ion-input>
+          </div>
+
+          <div class="grid-item">
+            <h2>Error Hint</h2>
+            <ion-input
+              placeholder="Placeholder"
+              fill="outline"
+              class="ion-touched ion-invalid"
+              label="Email"
+              error-text="Helper message"
+            ></ion-input>
+          </div>
+
+          <div class="grid-item">
+            <h2>Custom Error Color</h2>
+            <ion-input
+              placeholder="Placeholder"
+              fill="outline"
+              class="ion-touched ion-invalid custom-error-color"
+              label="Email"
+              error-text="Helper message"
+            ></ion-input>
+          </div>
+
+          <div class="grid-item">
+            <h2>Counter</h2>
+            <ion-input
+              placeholder="Placeholder"
+              fill="outline"
+              label="Email"
+              counter="true"
+              maxlength="100"
+            ></ion-input>
+          </div>
+
+          <div class="grid-item">
+            <h2>Custom Counter</h2>
+            <ion-input
+              placeholder="Placeholder"
+              fill="outline"
+              id="custom-counter"
+              label="Email"
+              counter="true"
+              maxlength="100"
+            ></ion-input>
+          </div>
+
+          <div class="grid-item">
+            <h2>Counter with Helper</h2>
+            <ion-input
+              placeholder="Placeholder"
+              fill="outline"
+              label="Email"
+              counter="true"
+              maxlength="100"
+              helper-text="Enter an email"
+            ></ion-input>
+          </div>
+
+          <div class="grid-item">
+            <h2>Counter with Error</h2>
+            <ion-input
+              placeholder="Placeholder"
+              fill="outline"
+              class="ion-touched ion-invalid"
+              label="Email"
+              counter="true"
+              maxlength="100"
+              error-text="Helper message"
             ></ion-input>
           </div>
         </div>