feat(input-password-toggle): fixed color and icon sizes. (#29808)

Issue number: resolves ROU-4860

---------

## What is the current behavior?
Icon color and sizes are not ok.

## What is the new behavior?
- Fixed Icon color into `neutral-800`
- Set the icon size with `16px`

## Does this introduce a breaking change?

- [ ] Yes
- [X] No

## Other information

This will complete the
[PR](#29787)

[Basic
Preview](https://ionic-framework-p6zymvqpo-ionic1.vercel.app/src/components/input-password-toggle/test/basic?ionic:theme=ionic)

---------

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

Author: joselrio

core/src/components/input-password-toggle/input-password-toggle.ionic.scss

@@ -3,10 +3,18 @@
 
 // Ionic Input Toggle Password
 // --------------------------------------------------
-:host ion-button.button-has-icon-only {
-  --padding-end: inherit;
-  --color: #{globals.$ionic-color-neutral-500};
+:host ion-button {
+  --color: #{globals.$ionic-color-neutral-800};
   --margin-end: calc(-1 * var(--padding-end));
+  --padding-end: inherit;
+  --icon-size: #{globals.dynamic-font(16px)};
 
   @include globals.margin(0, var(--margin-end), 0, 0);
+
+  width: var(--size);
+  height: var(--size);
+
+  ion-icon {
+    font-size: var(--icon-size);
+  }
 }

core/src/components/input-password-toggle/test/basic/index.html

@@ -19,6 +19,9 @@
         grid-row-gap: 20px;
         grid-column-gap: 20px;
       }
+      .margin-top {
+        margin-top: 20px;
+      }
       h2 {
         font-size: 12px;
         font-weight: normal;
@@ -47,18 +50,34 @@
       <ion-content id="content" class="ion-padding">
         <div class="grid">
           <div class="grid-item">
-            <h2>Default</h2>
+            <h2>Default - Size Medium</h2>
+            <ion-input
+              fill="outline"
+              shape="soft"
+              placeholder="Enter your password"
+              type="password"
+              value="supersecurepassword"
+              label="Password"
+            >
+              <ion-input-password-toggle slot="end"></ion-input-password-toggle>
+            </ion-input>
+          </div>
+          <div class="grid-item">
+            <h2>Default - Size Large</h2>
             <ion-input
               fill="outline"
               shape="soft"
               placeholder="Enter your password"
               type="password"
               value="supersecurepassword"
               label="Password"
+              size="large"
             >
               <ion-input-password-toggle slot="end"></ion-input-password-toggle>
             </ion-input>
           </div>
+        </div>
+        <div class="grid margin-top">
           <div class="grid-item">
             <h2>Custom Icon</h2>
             <ion-input type="password" value="supersecurepassword" label="Password">

core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts

@@ -47,4 +47,21 @@ configs({ modes: ['md', 'ios', 'ionic-md'], directions: ['ltr'] }).forEach(({ ti
       await expect(inputPasswordToggle).toHaveScreenshot(screenshot('input-password-toggle'));
     });
   });
+
+  test.describe(title('input password toggle - large size: rendering'), () => {
+    test('should not have visual regressions', async ({ page }) => {
+      await page.setContent(
+        `
+          <ion-input label="input" type="password" size="large">
+            <ion-input-password-toggle slot="end"></ion-input-password-toggle>
+          </ion-input>
+        `,
+        config
+      );
+
+      const inputPasswordToggle = page.locator('ion-input-password-toggle');
+
+      await expect(inputPasswordToggle).toHaveScreenshot(screenshot('input-password-toggle-large-size'));
+    });
+  });
 });