fix(input): remove css variable and update helper text to use valid highlight in ionic theme (#30272)

- Splits the common and native stylesheets
- Removes the `--text-color-invalid` variable so the customization
across components and themes for helper & error text is consistent.
- Sets the color of the helper text when valid to
`--highlight-color-valid` to ensure customization works the same as
invalid

---------

Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>

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

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.

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;
 }
 

core/src/components/input/input.ios.scss

@@ -1,4 +1,4 @@
-@import "./input";
+@import "./input.native";
 @import "./input.ios.vars";
 
 :host {

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";

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;
+}

core/src/components/input/test/states/index.html

@@ -73,6 +73,21 @@
               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>