Revert "fix(input): remove --text-color-invalid var"

This reverts commit 0e55445.

Author: brandyscarney

core/api.txt

@@ -989,6 +989,9 @@ 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.ionic.scss

@@ -13,6 +13,7 @@
   --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;
@@ -153,7 +154,7 @@
 }
 
 :host(.ion-touched.ion-invalid) .error-text {
-  color: var(--highlight-color-invalid);
+  color: var(--text-color-invalid);
 }
 
 :host(.has-focus.ion-valid),

core/src/components/input/input.scss

@@ -23,6 +23,7 @@
    * @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.