diff --git a/core/api.txt b/core/api.txt
index 49c9ee49d87..3db9b064b25 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -984,7 +984,6 @@ ion-input,css-prop,--border-width,md
 ion-input,css-prop,--color,ionic
 ion-input,css-prop,--color,ios
 ion-input,css-prop,--color,md
-ion-input,css-prop,--highlight-color-focused,ionic
 ion-input,css-prop,--highlight-color-focused,ios
 ion-input,css-prop,--highlight-color-focused,md
 ion-input,css-prop,--highlight-color-invalid,ionic
@@ -993,7 +992,6 @@ ion-input,css-prop,--highlight-color-invalid,md
 ion-input,css-prop,--highlight-color-valid,ionic
 ion-input,css-prop,--highlight-color-valid,ios
 ion-input,css-prop,--highlight-color-valid,md
-ion-input,css-prop,--highlight-height,ionic
 ion-input,css-prop,--highlight-height,ios
 ion-input,css-prop,--highlight-height,md
 ion-input,css-prop,--padding-bottom,ionic
@@ -1020,9 +1018,6 @@ ion-input,css-prop,--placeholder-font-weight,md
 ion-input,css-prop,--placeholder-opacity,ionic
 ion-input,css-prop,--placeholder-opacity,ios
 ion-input,css-prop,--placeholder-opacity,md
-ion-input,css-prop,--text-color-invalid,ionic
-ion-input,css-prop,--text-color-invalid,ios
-ion-input,css-prop,--text-color-invalid,md
 
 ion-input-password-toggle,shadow
 ion-input-password-toggle,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
diff --git a/core/src/components/input/input.scss b/core/src/components/input/input.common.scss
similarity index 80%
rename from core/src/components/input/input.scss
rename to core/src/components/input/input.common.scss
index 411d879c163..91e9218c72b 100644
--- a/core/src/components/input/input.scss
+++ b/core/src/components/input/input.common.scss
@@ -1,6 +1,6 @@
-@import "./input.vars";
+@import "../../themes/mixins";
 
-// Input
+// Input: Common
 // --------------------------------------------------
 
 :host {
@@ -19,11 +19,8 @@
    * @prop --placeholder-font-weight: Font weight of the input placeholder text
    * @prop --placeholder-opacity: Opacity of the input placeholder text
    *
-   * @prop --highlight-height: The height of the highlight on the input. Only applies to md mode.
-   * @prop --highlight-color-focused: The color of the highlight on the input when focused
    * @prop --highlight-color-valid: The color of the highlight on the input when valid
    * @prop --highlight-color-invalid: The color of the highlight on the input when invalid
-   * @prop --text-color-invalid: The color of the error text on the input when invalid. Only applies to ionic theme.
    *
    * @prop --border-color: Color of the border below the input when using helper text, error text, or counter
    * @prop --border-radius: Radius of the input. A large radius may display unevenly when using fill="outline"; if needed, use shape="round" instead or increase --padding-start.
@@ -33,17 +30,11 @@
   --placeholder-color: initial;
   --placeholder-font-style: initial;
   --placeholder-font-weight: initial;
-  --placeholder-opacity: #{$placeholder-opacity};
   --padding-top: 0px;
   --padding-end: 0px;
   --padding-bottom: 0px;
   --padding-start: 0px;
-  --background: transparent;
-  --color: initial;
   --border-style: solid;
-  --highlight-color-focused: #{ion-color(primary, base)};
-  --highlight-color-valid: #{ion-color(success, base)};
-  --highlight-color-invalid: #{ion-color(danger, base)};
 
   /**
    * This is a private API that is used to switch
@@ -59,16 +50,10 @@
 
   width: 100%;
 
-  min-height: 44px;
-
   /* stylelint-disable-next-line all */
   padding: 0 !important;
 
   color: var(--color);
-
-  font-family: $font-family-base;
-
-  z-index: $z-index-item-input;
 }
 
 :host-context(ion-item)[slot="start"],
@@ -80,19 +65,6 @@
   --highlight-color-focused: #{current-color(base)};
 }
 
-// Input Wrapper
-// ----------------------------------------------------------------
-
-/**
- * Since the label sits on top of the element,
- * the component needs to be taller otherwise the
- * label will appear too close to the input text.
- */
-:host(.input-label-placement-floating),
-:host(.input-label-placement-stacked) {
-  min-height: 56px;
-}
-
 // Native Text Input
 // --------------------------------------------------
 
@@ -191,9 +163,6 @@
   align-items: center;
   justify-content: center;
 
-  width: 30px;
-  height: 30px;
-
   border: 0;
 
   outline: none;
@@ -201,8 +170,6 @@
   background-color: transparent;
   background-repeat: no-repeat;
 
-  color: $text-color-step-400;
-
   visibility: hidden;
   appearance: none;
 }
@@ -211,17 +178,6 @@
   color: inherit;
 }
 
-/**
- * Normally, we would not want to use :focus
- * here because that would mean tapping the button
- * on mobile would focus it (and keep it focused).
- * However, the clear button always disappears after
- * being activated, so we never get to that state.
- */
-.input-clear-icon:focus {
-  opacity: 0.5;
-}
-
 :host(.has-value) .input-clear-icon {
   visibility: visible;
 }
@@ -293,21 +249,12 @@
 // ----------------------------------------------------------------
 
 .input-bottom {
-  /**
-   * The bottom content should take on the start and end
-   * padding so it is always aligned with either the label
-   * or the start of the text input.
-   */
-  @include padding(5px, var(--padding-end), 0, var(--padding-start));
-
   display: flex;
 
   justify-content: space-between;
 
   border-top: var(--border-width) var(--border-style) var(--border-color);
 
-  font-size: dynamic-font(12px);
-
   white-space: normal;
 }
 
@@ -342,8 +289,6 @@
 
 .input-bottom .helper-text {
   display: block;
-
-  color: $text-color-step-300;
 }
 
 :host(.ion-touched.ion-invalid) .input-bottom .error-text {
@@ -365,11 +310,7 @@
    */
   @include margin-horizontal(auto, null);
 
-  color: $text-color-step-300;
-
   white-space: nowrap;
-
-  padding-inline-start: 16px;
 }
 
 // Input Native
@@ -464,15 +405,6 @@
   flex-direction: row;
 }
 
-:host(.input-label-placement-start) .label-text-wrapper {
-  /**
-   * The margin between the label and
-   * the input should be on the end
-   * when the label sits at the start.
-   */
-  @include margin(0, $form-control-label-margin, 0, 0);
-}
-
 // Input Label Placement - End
 // ----------------------------------------------------------------
 
@@ -484,27 +416,9 @@
   flex-direction: row-reverse;
 }
 
-/**
- * The margin between the label and
- * the input should be on the start
- * when the label sits at the end.
- */
-:host(.input-label-placement-end) .label-text-wrapper {
-  @include margin(0, 0, 0, $form-control-label-margin);
-}
-
 // Input Label Placement - Fixed
 // ----------------------------------------------------------------
 
-:host(.input-label-placement-fixed) .label-text-wrapper {
-  /**
-   * The margin between the label and
-   * the input should be on the end
-   * when the label sits at the start.
-   */
-  @include margin(0, $form-control-label-margin, 0, 0);
-}
-
 /**
  * Label is on the left of the input in LTR and
  * on the right in RTL. Label also has a fixed width.
@@ -583,32 +497,9 @@
   opacity: 1;
 }
 
-/**
- * This makes the label sit above the input.
- */
-:host(.label-floating) .label-text-wrapper {
-  @include transform(translateY(50%), scale(#{$form-control-label-stacked-scale}));
-
-  /**
-   * Label text should not extend
-   * beyond the bounds of the input.
-   */
-  max-width: calc(100% / #{$form-control-label-stacked-scale});
-}
-
-// Start/End Slots
+// Input Password Toggle
 // ----------------------------------------------------------------
 
-::slotted([slot="start"]:last-of-type) {
-  margin-inline-end: $form-control-label-margin;
-  margin-inline-start: 0;
-}
-
-::slotted([slot="end"]:first-of-type) {
-  margin-inline-start: $form-control-label-margin;
-  margin-inline-end: 0;
-}
-
 /**
  * The input password toggle component should be hidden when the input is readonly/disabled
  * because it is not possible to edit a password.
diff --git a/core/src/components/input/input.ionic.scss b/core/src/components/input/input.ionic.scss
index 2c08bc588bf..054b1074351 100644
--- a/core/src/components/input/input.ionic.scss
+++ b/core/src/components/input/input.ionic.scss
@@ -1,5 +1,5 @@
 @use "../../themes/ionic/ionic.globals.scss" as globals;
-@import "./input";
+@import "./input.common";
 @import "./input.ionic.outline.scss";
 
 // Ionic Input
@@ -13,7 +13,6 @@
   --highlight-color-invalid: #{globals.$ion-semantics-danger-800};
   --placeholder-color: #{globals.$ion-primitives-neutral-800};
   --placeholder-opacity: 1;
-  --text-color-invalid: #{globals.$ion-semantics-danger-800};
   --background: #{globals.$ion-primitives-base-white};
 
   font-size: globals.$ion-font-size-350;
@@ -138,8 +137,7 @@
 
 .input-bottom {
   @include padding(globals.$ion-space-100, 0, 0, 0);
-
-  font-weight: globals.$ion-font-weight-medium;
+  @include globals.typography(globals.$ion-body-sm-medium);
 }
 
 .input-bottom .helper-text,
@@ -148,11 +146,7 @@
 }
 
 :host(.has-focus.ion-valid) .helper-text {
-  color: globals.$ion-semantics-success-900;
-}
-
-:host(.ion-touched.ion-invalid) .error-text {
-  color: var(--text-color-invalid);
+  color: var(--highlight-color-valid);
 }
 
 :host(.has-focus.ion-valid),
@@ -173,7 +167,6 @@
 // ----------------------------------------------------------------
 
 :host(.input-disabled) {
-  // color for the text within the input
   --color: #{globals.$ion-primitives-neutral-500};
   --background: #{globals.$ion-primitives-neutral-100};
   --border-color: #{globals.$ion-primitives-neutral-300};
@@ -185,7 +178,7 @@
 :host(.input-disabled:not(.ion-valid)) .input-bottom .helper-text,
 :host(.input-disabled) .input-bottom .counter,
 :host(.input-disabled) .label-text-wrapper {
-  color: globals.$ion-primitives-neutral-500;
+  color: globals.$ion-text-disabled;
 }
 
 :host(.input-disabled.has-focus.ion-valid) {
@@ -201,9 +194,7 @@
 }
 
 :host(.input-disabled.has-focus.ion-valid) .input-bottom .helper-text,
-:host(.input-disabled.ion-touched.ion-invalid) .error-text,
-:host(.input-disabled.ion-color) .input-bottom .helper-text,
-:host(.input-disabled.ion-color) .helper-text {
+:host(.input-disabled.ion-touched.ion-invalid) .error-text {
   opacity: 0.6;
 }
 
diff --git a/core/src/components/input/input.ios.scss b/core/src/components/input/input.ios.scss
index d17929f7016..8a62268e92b 100644
--- a/core/src/components/input/input.ios.scss
+++ b/core/src/components/input/input.ios.scss
@@ -1,4 +1,4 @@
-@import "./input";
+@import "./input.native";
 @import "./input.ios.vars";
 
 :host {
diff --git a/core/src/components/input/input.md.scss b/core/src/components/input/input.md.scss
index 94b3dbf0c8e..cb4bc54e3e6 100644
--- a/core/src/components/input/input.md.scss
+++ b/core/src/components/input/input.md.scss
@@ -1,4 +1,4 @@
-@import "./input";
+@import "./input.native";
 @import "./input.md.vars";
 @import "./input.md.solid.scss";
 @import "./input.md.outline.scss";
diff --git a/core/src/components/input/input.native.scss b/core/src/components/input/input.native.scss
new file mode 100644
index 00000000000..a2066bd52fe
--- /dev/null
+++ b/core/src/components/input/input.native.scss
@@ -0,0 +1,180 @@
+@import "./input.common";
+@import "./input.vars";
+
+// Input: Native
+// --------------------------------------------------
+
+:host {
+  /**
+   * @prop --highlight-height: The height of the highlight on the input. Only applies to md mode.
+   * @prop --highlight-color-focused: The color of the highlight on the input when focused
+   */
+  --placeholder-opacity: #{$placeholder-opacity};
+  --background: transparent;
+  --color: initial;
+  --highlight-color-focused: #{ion-color(primary, base)};
+  --highlight-color-valid: #{ion-color(success, base)};
+  --highlight-color-invalid: #{ion-color(danger, base)};
+
+  min-height: 44px;
+
+  color: var(--color);
+
+  font-family: $font-family-base;
+
+  z-index: $z-index-item-input;
+}
+
+:host(.ion-color) {
+  --highlight-color-focused: #{current-color(base)};
+}
+
+// Input Wrapper
+// ----------------------------------------------------------------
+
+/**
+ * Since the label sits on top of the element,
+ * the component needs to be taller otherwise the
+ * label will appear too close to the input text.
+ */
+:host(.input-label-placement-floating),
+:host(.input-label-placement-stacked) {
+  min-height: 56px;
+}
+
+// Clear Input Icon
+// --------------------------------------------------
+
+.input-clear-icon {
+  width: 30px;
+  height: 30px;
+
+  color: $text-color-step-400;
+}
+
+/**
+ * Normally, we would not want to use :focus
+ * here because that would mean tapping the button
+ * on mobile would focus it (and keep it focused).
+ * However, the clear button always disappears after
+ * being activated, so we never get to that state.
+ */
+.input-clear-icon:focus {
+  opacity: 0.5;
+}
+
+// Input Highlight
+// ----------------------------------------------------------------
+
+:host(.ion-touched.ion-invalid) {
+  --highlight-color: var(--highlight-color-invalid);
+}
+
+/**
+ * The component highlight is only shown
+ * on focus, so we can safely set the valid
+ * color state when valid. If we
+ * set it when .has-focus is present then
+ * the highlight color would change
+ * from the valid color to the component's
+ * color during the transition after the
+ * component loses focus.
+ */
+:host(.ion-valid) {
+  --highlight-color: var(--highlight-color-valid);
+}
+
+// Input Bottom Content
+// ----------------------------------------------------------------
+
+.input-bottom {
+  /**
+   * The bottom content should take on the start and end
+   * padding so it is always aligned with either the label
+   * or the start of the text input.
+   */
+  @include padding(5px, var(--padding-end), 0, var(--padding-start));
+
+  font-size: dynamic-font(12px);
+}
+
+// Input Hint Text
+// ----------------------------------------------------------------
+
+.input-bottom .helper-text {
+  color: $text-color-step-300;
+}
+
+// Input Max Length Counter
+// ----------------------------------------------------------------
+
+.input-bottom .counter {
+  color: $text-color-step-300;
+
+  padding-inline-start: 16px;
+}
+
+// Input Label Placement - Start
+// ----------------------------------------------------------------
+
+:host(.input-label-placement-start) .label-text-wrapper {
+  /**
+   * The margin between the label and
+   * the input should be on the end
+   * when the label sits at the start.
+   */
+  @include margin(0, $form-control-label-margin, 0, 0);
+}
+
+// Input Label Placement - End
+// ----------------------------------------------------------------
+
+/**
+ * The margin between the label and
+ * the input should be on the start
+ * when the label sits at the end.
+ */
+:host(.input-label-placement-end) .label-text-wrapper {
+  @include margin(0, 0, 0, $form-control-label-margin);
+}
+
+// Input Label Placement - Fixed
+// ----------------------------------------------------------------
+
+:host(.input-label-placement-fixed) .label-text-wrapper {
+  /**
+   * The margin between the label and
+   * the input should be on the end
+   * when the label sits at the start.
+   */
+  @include margin(0, $form-control-label-margin, 0, 0);
+}
+
+// Input Label Placement - Stacked and Floating
+// ----------------------------------------------------------------
+
+/**
+ * This makes the label sit above the input.
+ */
+:host(.label-floating) .label-text-wrapper {
+  @include transform(translateY(50%), scale(#{$form-control-label-stacked-scale}));
+
+  /**
+   * Label text should not extend
+   * beyond the bounds of the input.
+   */
+  max-width: calc(100% / #{$form-control-label-stacked-scale});
+}
+
+// Start/End Slots
+// ----------------------------------------------------------------
+
+::slotted([slot="start"]:last-of-type) {
+  margin-inline-end: $form-control-label-margin;
+  margin-inline-start: 0;
+}
+
+::slotted([slot="end"]:first-of-type) {
+  margin-inline-start: $form-control-label-margin;
+  margin-inline-end: 0;
+}
diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-error-text-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-error-text-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 71d001b8cff..955d368c1b7 100644
Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-error-text-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-error-text-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-error-text-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-error-text-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 285bda34a5f..aab81f4a116 100644
Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-error-text-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-error-text-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-error-text-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-error-text-ionic-md-ltr-light-Mobile-Safari-linux.png
index fe61963b3b5..8eb3f6861f5 100644
Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-error-text-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-error-text-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-error-text-stacked-label-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-error-text-stacked-label-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 71d001b8cff..955d368c1b7 100644
Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-error-text-stacked-label-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-error-text-stacked-label-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-error-text-stacked-label-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-error-text-stacked-label-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 285bda34a5f..aab81f4a116 100644
Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-error-text-stacked-label-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-error-text-stacked-label-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-error-text-stacked-label-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-error-text-stacked-label-ionic-md-ltr-light-Mobile-Safari-linux.png
index fe61963b3b5..8eb3f6861f5 100644
Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-error-text-stacked-label-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-error-text-stacked-label-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png
index aca2176f65d..fe828cbb080 100644
Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 0ce51ea7096..cae5bcbe2d0 100644
Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png
index 18206055c07..7958938d7ba 100644
Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png
index aca2176f65d..fe828cbb080 100644
Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 0ce51ea7096..cae5bcbe2d0 100644
Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-outline-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-outline-ionic-md-ltr-light-Mobile-Safari-linux.png
index 18206055c07..7958938d7ba 100644
Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-outline-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-outline-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-helper-text-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-helper-text-ionic-md-ltr-light-Mobile-Chrome-linux.png
index fb7d18a1750..c10fad248b2 100644
Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-helper-text-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-helper-text-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-helper-text-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-helper-text-ionic-md-ltr-light-Mobile-Firefox-linux.png
index be49c3915da..f54f3514151 100644
Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-helper-text-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-helper-text-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-helper-text-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-helper-text-ionic-md-ltr-light-Mobile-Safari-linux.png
index d0ba3646406..05fdaf66464 100644
Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-helper-text-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-helper-text-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-helper-text-stacked-label-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-helper-text-stacked-label-ionic-md-ltr-light-Mobile-Chrome-linux.png
index fb7d18a1750..c10fad248b2 100644
Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-helper-text-stacked-label-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-helper-text-stacked-label-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-helper-text-stacked-label-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-helper-text-stacked-label-ionic-md-ltr-light-Mobile-Firefox-linux.png
index be49c3915da..f54f3514151 100644
Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-helper-text-stacked-label-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-helper-text-stacked-label-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-helper-text-stacked-label-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-helper-text-stacked-label-ionic-md-ltr-light-Mobile-Safari-linux.png
index d0ba3646406..05fdaf66464 100644
Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-helper-text-stacked-label-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-helper-text-stacked-label-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-helper-text-wrapping-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-helper-text-wrapping-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 4d41b18543d..e055ee63444 100644
Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-helper-text-wrapping-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-helper-text-wrapping-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-helper-text-wrapping-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-helper-text-wrapping-ionic-md-ltr-light-Mobile-Firefox-linux.png
index f5d21af6355..15d2bf388a1 100644
Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-helper-text-wrapping-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-helper-text-wrapping-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-helper-text-wrapping-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-helper-text-wrapping-ionic-md-ltr-light-Mobile-Safari-linux.png
index 0046ac735f5..2321125f8d4 100644
Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-helper-text-wrapping-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-helper-text-wrapping-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-invalid-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-invalid-ionic-md-ltr-light-Mobile-Chrome-linux.png
index f6e8f87220a..f43eed031a2 100644
Binary files a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-invalid-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-invalid-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-invalid-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-invalid-ionic-md-ltr-light-Mobile-Firefox-linux.png
index ad135bab19d..82789e75669 100644
Binary files a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-invalid-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-invalid-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-invalid-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-invalid-ionic-md-ltr-light-Mobile-Safari-linux.png
index bb6557c2600..f4736c30d50 100644
Binary files a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-invalid-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-invalid-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-valid-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-valid-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 8ffd928926a..f47d40abcb1 100644
Binary files a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-valid-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-valid-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-valid-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-valid-ionic-md-ltr-light-Mobile-Firefox-linux.png
index b1e07a30b2a..420fa30805b 100644
Binary files a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-valid-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-valid-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-valid-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-valid-ionic-md-ltr-light-Mobile-Safari-linux.png
index 4ea08d491fc..eb2ac5b2371 100644
Binary files a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-valid-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-valid-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-custom-highlight-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-custom-highlight-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 80d06cc95b1..5a2b84f1e8a 100644
Binary files a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-custom-highlight-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-custom-highlight-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-custom-highlight-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-custom-highlight-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 725230d56ee..c3534b0a286 100644
Binary files a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-custom-highlight-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-custom-highlight-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-custom-highlight-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-custom-highlight-ionic-md-ltr-light-Mobile-Safari-linux.png
index 607d64c9c6b..cb99e0e6c34 100644
Binary files a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-custom-highlight-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-custom-highlight-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-invalid-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-invalid-ionic-md-ltr-light-Mobile-Chrome-linux.png
index f6e8f87220a..f43eed031a2 100644
Binary files a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-invalid-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-invalid-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-invalid-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-invalid-ionic-md-ltr-light-Mobile-Firefox-linux.png
index ad135bab19d..82789e75669 100644
Binary files a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-invalid-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-invalid-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-invalid-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-invalid-ionic-md-ltr-light-Mobile-Safari-linux.png
index bb6557c2600..f4736c30d50 100644
Binary files a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-invalid-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-invalid-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-valid-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-valid-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 8ffd928926a..f47d40abcb1 100644
Binary files a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-valid-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-valid-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-valid-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-valid-ionic-md-ltr-light-Mobile-Firefox-linux.png
index b1e07a30b2a..420fa30805b 100644
Binary files a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-valid-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-valid-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-valid-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-valid-ionic-md-ltr-light-Mobile-Safari-linux.png
index 4ea08d491fc..eb2ac5b2371 100644
Binary files a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-valid-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-valid-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-custom-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-custom-ionic-md-ltr-light-Mobile-Chrome-linux.png
index c33c608e740..254f40cb73e 100644
Binary files a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-custom-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-custom-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-custom-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-custom-ionic-md-ltr-light-Mobile-Firefox-linux.png
index b71dcf49e67..21c0e18ed20 100644
Binary files a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-custom-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-custom-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-custom-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-custom-ionic-md-ltr-light-Mobile-Safari-linux.png
index 014cfb8df1f..77f303b02d6 100644
Binary files a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-custom-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-custom-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-custom-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-custom-ionic-md-rtl-light-Mobile-Chrome-linux.png
index 29a96259346..d9b0b916d24 100644
Binary files a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-custom-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-custom-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-custom-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-custom-ionic-md-rtl-light-Mobile-Firefox-linux.png
index 081c8e0dbfe..4a22d40bf1b 100644
Binary files a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-custom-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-custom-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-custom-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-custom-ionic-md-rtl-light-Mobile-Safari-linux.png
index 9cc6720bb3a..2693f2db5dc 100644
Binary files a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-custom-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-custom-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png
index f88a10920fa..e299d863681 100644
Binary files a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 6f3ec85db43..4bc1268397c 100644
Binary files a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png
index 259e3da14ea..f9c88831b7b 100644
Binary files a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-ionic-md-rtl-light-Mobile-Chrome-linux.png
index 98edde611ba..8b210850a19 100644
Binary files a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-ionic-md-rtl-light-Mobile-Firefox-linux.png
index 11cd542b591..ba6ae3280f0 100644
Binary files a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-ionic-md-rtl-light-Mobile-Safari-linux.png
index 91d0ab98132..c3163470a3f 100644
Binary files a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-custom-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-custom-ionic-md-ltr-light-Mobile-Chrome-linux.png
index c33c608e740..254f40cb73e 100644
Binary files a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-custom-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-custom-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-custom-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-custom-ionic-md-ltr-light-Mobile-Firefox-linux.png
index b71dcf49e67..21c0e18ed20 100644
Binary files a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-custom-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-custom-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-custom-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-custom-ionic-md-ltr-light-Mobile-Safari-linux.png
index 014cfb8df1f..77f303b02d6 100644
Binary files a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-custom-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-custom-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-custom-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-custom-ionic-md-rtl-light-Mobile-Chrome-linux.png
index 29a96259346..d9b0b916d24 100644
Binary files a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-custom-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-custom-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-custom-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-custom-ionic-md-rtl-light-Mobile-Firefox-linux.png
index 081c8e0dbfe..4a22d40bf1b 100644
Binary files a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-custom-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-custom-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-custom-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-custom-ionic-md-rtl-light-Mobile-Safari-linux.png
index 9cc6720bb3a..2693f2db5dc 100644
Binary files a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-custom-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-custom-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png
index f26180eefc8..211cd2ec996 100644
Binary files a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png
index b9addf2cfab..5e2095162dd 100644
Binary files a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png
index ac7b15cef94..0f702b5c2aa 100644
Binary files a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-ionic-md-rtl-light-Mobile-Chrome-linux.png
index db4ec439631..31b1e54bdd6 100644
Binary files a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-ionic-md-rtl-light-Mobile-Firefox-linux.png
index aed64fb4067..6d6ddeee453 100644
Binary files a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-ionic-md-rtl-light-Mobile-Safari-linux.png
index 53e8c53290b..f20c06c0956 100644
Binary files a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png
index d2cc9c1e8cc..f97421f4967 100644
Binary files a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 9a89dca8692..7abc928b3c4 100644
Binary files a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png
index 5b44f5b7264..c17978aca07 100644
Binary files a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-soft-fill-outline-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-soft-fill-outline-ionic-md-rtl-light-Mobile-Chrome-linux.png
index 42edccbf961..08fc701d3ea 100644
Binary files a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-soft-fill-outline-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-soft-fill-outline-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-soft-fill-outline-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-soft-fill-outline-ionic-md-rtl-light-Mobile-Firefox-linux.png
index a3f603bc831..dccdb666ef6 100644
Binary files a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-soft-fill-outline-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-soft-fill-outline-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-soft-fill-outline-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-soft-fill-outline-ionic-md-rtl-light-Mobile-Safari-linux.png
index c0b691f13ba..deaba1aed6f 100644
Binary files a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-soft-fill-outline-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-soft-fill-outline-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/states/index.html b/core/src/components/input/test/states/index.html
index 6e7845e5b56..57998885bb5 100644
--- a/core/src/components/input/test/states/index.html
+++ b/core/src/components/input/test/states/index.html
@@ -73,6 +73,21 @@ <h2>Outline</h2>
               readonly="true"
             ></ion-input>
           </div>
+
+          <div class="grid-item">
+            <h2>Outline: Color</h2>
+
+            <ion-input
+              color="warning"
+              fill="outline"
+              label="Email"
+              value="hi@ionic.io"
+              helper-text="Enter an email"
+              counter="true"
+              maxlength="20"
+              readonly="true"
+            ></ion-input>
+          </div>
         </div>
 
         <h1>Disabled</h1>
diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 4a834c707b8..f31f2a61e68 100644
Binary files a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 1931fdda562..f54ba03c74b 100644
Binary files a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png
index 126215f8662..b4a02a3737a 100644
Binary files a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 4a834c707b8..f31f2a61e68 100644
Binary files a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 1931fdda562..f54ba03c74b 100644
Binary files a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-outline-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-outline-ionic-md-ltr-light-Mobile-Safari-linux.png
index 126215f8662..b4a02a3737a 100644
Binary files a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-outline-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-outline-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 29a921301ee..fdb41d6cddd 100644
Binary files a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 4d84c71cae9..5569bd6f446 100644
Binary files a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-focused-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-focused-ionic-md-ltr-light-Mobile-Safari-linux.png
index 07b38ff5d5a..a7ba7590843 100644
Binary files a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-focused-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-focused-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 446f1286aef..c7d123c4a5b 100644
Binary files a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 57edb7b4e83..c362f0c6c1b 100644
Binary files a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png
index 589437bff87..cdd63771b6e 100644
Binary files a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 446f1286aef..c7d123c4a5b 100644
Binary files a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 57edb7b4e83..c362f0c6c1b 100644
Binary files a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-outline-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-outline-ionic-md-ltr-light-Mobile-Safari-linux.png
index 589437bff87..cdd63771b6e 100644
Binary files a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-outline-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-outline-ionic-md-ltr-light-Mobile-Safari-linux.png differ