fix(input): add color support for ion-input

fixes #14864

core/src/components/input/input.scss

@@ -25,6 +25,9 @@
   /* stylelint-enable */
 }
 
+:host(.ion-color) {
+  color: #{current-color(base)};
+}
 
 // Native Text Input
 // --------------------------------------------------
@@ -32,6 +35,7 @@
 .native-input {
   @include border-radius(var(--border-radius));
   @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
+  @include text-inherit();
 
   display: inline-block;
 
@@ -45,13 +49,7 @@
 
   background: transparent;
 
-  font-family: inherit;
-  font-size: inherit;
-  font-weight: inherit;
-
-  letter-spacing: inherit;
   box-sizing: border-box;
-  font-kerning: inherit;
   appearance: none;
 
   &::placeholder {

core/src/components/input/input.tsx

@@ -1,7 +1,7 @@
 import { Component, Element, Event, EventEmitter, Prop, State, Watch } from '@stencil/core';
 import { Color, InputChangeEvent, Mode, StyleEvent  } from '../../interface';
 import { debounceEvent, deferEvent, renderHiddenInput } from '../../utils/helpers';
-import { hostContext } from '../../utils/theme';
+import { createColorClasses, hostContext } from '../../utils/theme';
 import { InputComponent } from './input-base';
 
 
@@ -19,8 +19,6 @@ export class Input implements InputComponent {
   private inputId = `ion-input-${inputIds++}`;
   didBlurAfterEdit = false;
 
-  mode!: Mode;
-  color?: Color;
 
   @State() hasFocus = false;
 
@@ -61,6 +59,19 @@ export class Input implements InputComponent {
    */
   @Event() ionInputDidUnload!: EventEmitter<void>;
 
+  /**
+   * The color to use from your application's color palette.
+   * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
+   * For more information on colors, see [theming](/docs/theming/basics).
+   */
+  @Prop() color?: Color;
+
+  /**
+   * The mode determines which platform styles to use.
+   * Possible values are: `"ios"` or `"md"`.
+   */
+  @Prop() mode!: Mode;
+
   /**
    * If the value of the type attribute is `"file"`, then this attribute will indicate the types of files that the server accepts, otherwise it will be ignored. The value must be a comma-separated list of unique content type specifiers.
    */
@@ -306,6 +317,8 @@ export class Input implements InputComponent {
   hostData() {
     return {
       class: {
+        ...createColorClasses(this.color),
+
         'in-item': hostContext('.item', this.el),
         'has-value': this.hasValue(),
         'has-focus': this.hasFocus

core/src/components/input/readme.md

@@ -59,6 +59,15 @@ boolean
 If true, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types.
 
 
+#### color
+
+string
+
+The color to use from your application's color palette.
+Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
+For more information on colors, see [theming](/docs/theming/basics).
+
+
 #### debounce
 
 number
@@ -108,6 +117,14 @@ number
 If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.
 
 
+#### mode
+
+string
+
+The mode determines which platform styles to use.
+Possible values are: `"ios"` or `"md"`.
+
+
 #### multiple
 
 boolean
@@ -243,6 +260,15 @@ boolean
 If true, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types.
 
 
+#### color
+
+string
+
+The color to use from your application's color palette.
+Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
+For more information on colors, see [theming](/docs/theming/basics).
+
+
 #### debounce
 
 number
@@ -292,6 +318,14 @@ number
 If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.
 
 
+#### mode
+
+string
+
+The mode determines which platform styles to use.
+Possible values are: `"ios"` or `"md"`.
+
+
 #### multiple
 
 boolean