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](https://github.com/ionic-team/ionic-framework/pull/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 <brandyscarney@users.noreply.github.com>

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 {
+:host ion-button {
-  --padding-end: inherit;
+  --color: #{globals.$ionic-color-neutral-800};
-  --color: #{globals.$ionic-color-neutral-500};
   --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,7 +50,7 @@
       <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"
@@ -59,6 +62,22 @@
               <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'));
+    });
+  });
 });

core/src/components/input-password-toggle/test/input-password-toggle.spec.tsx

@@ -1,10 +1,10 @@
 import { h } from '@stencil/core';
 import { newSpecPage } from '@stencil/core/testing';
 
+import { initialize } from '../../../global/ionic-global';
+import { Button } from '../../button/button';
 import { Input } from '../../input/input';
 import { InputPasswordToggle } from '../input-password-toggle';
-import { Button } from '../../button/button';
-import { initialize } from '../../../global/ionic-global';
 
 describe('input password toggle', () => {
   it('should toggle input type when clicked', async () => {

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

@@ -153,5 +153,5 @@
 // ----------------------------------------------------------------
 
 :host(.input-fill-outline.has-focus) {
-  --border-width: #{tokens.$ionic-border-size-050};
+  --border-width: #{globals.$ionic-border-size-050};
 }

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

@@ -1,4 +1,4 @@
-@use "../../foundations/ionic.vars.scss" as tokens;
+@use "../../themes/ionic/ionic.globals.scss" as globals;
 @import "./input";
 @import "./input.ionic.vars";
 @import "./input.ionic.outline.scss";
@@ -7,17 +7,17 @@
 // --------------------------------------------------
 
 :host {
-  --color: #{tokens.$ionic-color-neutral-1000};
+  --color: #{globals.$ionic-color-neutral-1000};
-  --border-width: #{tokens.$ionic-border-size-025};
+  --border-width: #{globals.$ionic-border-size-025};
-  --border-color: #{tokens.$ionic-color-neutral-300};
+  --border-color: #{globals.$ionic-color-neutral-300};
-  --highlight-color-valid: #{tokens.$ionic-color-success-base};
+  --highlight-color-valid: #{globals.$ionic-color-success-base};
-  --highlight-color-invalid: #{tokens.$ionic-color-danger-base};
+  --highlight-color-invalid: #{globals.$ionic-color-danger-base};
-  --placeholder-color: #{tokens.$ionic-color-neutral-800};
+  --placeholder-color: #{globals.$ionic-color-neutral-800};
   --placeholder-opacity: 1;
-  --text-color-invalid: #{tokens.$ionic-color-danger-800};
+  --text-color-invalid: #{globals.$ionic-color-danger-800};
-  --background: #{tokens.$ionic-color-base-white};
+  --background: #{globals.$ionic-color-base-white};
 
-  font-size: tokens.$ionic-font-size-350;
+  font-size: globals.$ionic-font-size-350;
 }
 
 // Ionic Input Sizes
@@ -35,6 +35,21 @@
   min-height: 56px;
 }
 
+// Ionic Input Password Toggle Sizes
+// --------------------------------------------------
+
+:host ion-input-password-toggle {
+  --size: #{globals.$ionic-scale-1000};
+}
+
+:host(.input-size-large) ion-input-password-toggle {
+  --size: #{globals.$ionic-scale-1200};
+}
+
+:host(.input-size-xlarge) ion-input-password-toggle {
+  --size: #{globals.$ionic-scale-1400};
+}
+
 // Target area
 // --------------------------------------------------
 :host .native-wrapper::after {
@@ -74,13 +89,13 @@
   width: 16px;
   height: 16px;
 
-  color: #{tokens.$ionic-color-neutral-500};
+  color: globals.$ionic-color-neutral-500;
 }
 
 .input-clear-icon:focus-visible {
-  @include border-radius(tokens.$ionic-border-radius-100);
+  @include border-radius(globals.$ionic-border-radius-100);
 
-  outline: #{tokens.$ionic-border-size-050} solid #{tokens.$ionic-state-focus-1};
+  outline: globals.$ionic-border-size-050 globals.$ionic-border-style-solid globals.$ionic-state-focus-1;
 
   opacity: 1;
 }
@@ -109,12 +124,12 @@
 // ----------------------------------------------------------------
 
 .label-text-wrapper {
-  color: tokens.$ionic-color-neutral-1000;
+  color: globals.$ionic-color-neutral-1000;
 
-  font-size: tokens.$ionic-font-size-300;
+  font-size: globals.$ionic-font-size-300;
-  font-weight: tokens.$ionic-font-weight-medium;
+  font-weight: globals.$ionic-font-weight-medium;
 
-  line-height: tokens.$ionic-line-height-500;
+  line-height: globals.$ionic-line-height-500;
 }
 
 :host(.label-floating) .label-text-wrapper {
@@ -127,16 +142,16 @@
 .input-bottom {
   @include padding(7px, 0);
 
-  font-weight: tokens.$ionic-font-weight-medium;
+  font-weight: globals.$ionic-font-weight-medium;
 }
 
 .input-bottom .helper-text,
 .input-bottom .counter {
-  color: tokens.$ionic-color-neutral-800;
+  color: globals.$ionic-color-neutral-800;
 }
 
 :host(.has-focus.ion-valid) .helper-text {
-  color: tokens.$ionic-color-success-900;
+  color: globals.$ionic-color-success-900;
 }
 
 :host(.ion-touched.ion-invalid) .error-text {
@@ -145,7 +160,7 @@
 
 :host(.has-focus.ion-valid),
 :host(.ion-touched.ion-invalid) {
-  --border-width: #{tokens.$ionic-border-size-025};
+  --border-width: #{globals.$ionic-border-size-025};
 }
 
 // Input Hover
@@ -153,7 +168,7 @@
 
 @media (any-hover: hover) {
   :host(:hover) {
-    --border-color: #{tokens.$ionic-color-neutral-600};
+    --border-color: #{globals.$ionic-color-neutral-600};
   }
 }
 
@@ -162,8 +177,8 @@
 
 :host(.input-disabled) {
   // color for the text within the input
-  --color: #{tokens.$ionic-color-neutral-400};
+  --color: #{globals.$ionic-color-neutral-400};
-  --background: #{tokens.$ionic-color-neutral-100};
+  --background: #{globals.$ionic-color-neutral-100};
 
   pointer-events: none;
 }
@@ -171,15 +186,15 @@
 :host(.input-disabled:not(.ion-valid)) .input-bottom .helper-text,
 :host(.input-disabled) .input-bottom .counter,
 :host(.input-disabled) .label-text-wrapper {
-  color: tokens.$ionic-color-neutral-500;
+  color: globals.$ionic-color-neutral-500;
 }
 
 :host(.input-disabled.has-focus.ion-valid) {
-  --border-color: rgba(#{tokens.$ionic-color-success-base-rgb}, 0.6);
+  --border-color: rgba(#{globals.$ionic-color-success-base-rgb}, 0.6);
 }
 
 :host(.input-disabled.ion-touched.ion-invalid) {
-  --border-color: rgba(#{tokens.$ionic-color-danger-base-rgb}, 0.6);
+  --border-color: rgba(#{globals.$ionic-color-danger-base-rgb}, 0.6);
 }
 
 :host(.input-disabled.ion-color) {
@@ -197,7 +212,7 @@
 // ----------------------------------------------------------------
 
 :host(.input-readonly) {
-  --background: #{tokens.$ionic-color-neutral-100};
+  --background: #{globals.$ionic-color-neutral-100};
 }
 
 // Input Highlight
@@ -209,7 +224,7 @@
   position: absolute;
 
   width: 100%;
-  height: tokens.$ionic-border-size-050;
+  height: globals.$ionic-border-size-050;
 
   transform: scale(0);
 
@@ -222,7 +237,7 @@
 // ----------------------------------------------------------------
 
 :host(.has-focus) {
-  --border-color: #{tokens.$ionic-color-primary-base};
+  --border-color: #{globals.$ionic-color-primary-base};
 }
 
 :host(.has-focus) .input-highlight {