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

fixes #14864

core/src/components.d.ts

@@ -2783,6 +2783,10 @@ declare global {
        * If true, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types.
        */
       'clearOnEdit': boolean;
+      /**
+       * 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).
+       */
+      'color': Color;
       /**
        * Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. Default `0`.
        */
@@ -2811,6 +2815,10 @@ declare global {
        * 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.
        */
       'minlength': number;
+      /**
+       * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
+       */
+      'mode': Mode;
       /**
        * If true, the user can enter more than one value. This attribute applies when the type attribute is set to `"email"` or `"file"`, otherwise it is ignored.
        */
@@ -2909,6 +2917,10 @@ declare global {
        * If true, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types.
        */
       'clearOnEdit'?: boolean;
+      /**
+       * 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).
+       */
+      'color'?: Color;
       /**
        * Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. Default `0`.
        */
@@ -2937,6 +2949,10 @@ declare global {
        * 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.
        */
       'minlength'?: number;
+      /**
+       * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
+       */
+      'mode'?: Mode;
       /**
        * If true, the user can enter more than one value. This attribute applies when the type attribute is set to `"email"` or `"file"`, otherwise it is ignored.
        */
@@ -7524,6 +7540,10 @@ declare global {
        * If true, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types.
        */
       'clearOnEdit': boolean;
+      /**
+       * 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).
+       */
+      'color': Color;
       /**
        * The visible width of the text control, in average character widths. If it is specified, it must be a positive integer.
        */
@@ -7544,6 +7564,10 @@ declare global {
        * 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.
        */
       'minlength': number;
+      /**
+       * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
+       */
+      'mode': Mode;
       /**
        * The name of the control, which is submitted with the form data.
        */
@@ -7614,6 +7638,10 @@ declare global {
        * If true, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types.
        */
       'clearOnEdit'?: boolean;
+      /**
+       * 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).
+       */
+      'color'?: Color;
       /**
        * The visible width of the text control, in average character widths. If it is specified, it must be a positive integer.
        */
@@ -7634,6 +7662,10 @@ declare global {
        * 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.
        */
       'minlength'?: number;
+      /**
+       * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
+       */
+      'mode'?: Mode;
       /**
        * The name of the control, which is submitted with the form data.
        */

core/src/components/infinite-scroll/readme.md

@@ -24,8 +24,8 @@ boolean
 If true, the infinite scroll will be hidden and scroll event listeners
 will be removed.
 
-Call `enable(false)` to disable the infinite scroll from actively
-trying to receive new data while scrolling. This method is useful
+Set this to true to disable the infinite scroll from actively
+trying to receive new data while scrolling. This is useful
 when it is known that there is no more data that can be added, and
 the infinite scroll is no longer needed.
 
@@ -62,8 +62,8 @@ boolean
 If true, the infinite scroll will be hidden and scroll event listeners
 will be removed.
 
-Call `enable(false)` to disable the infinite scroll from actively
-trying to receive new data while scrolling. This method is useful
+Set this to true to disable the infinite scroll from actively
+trying to receive new data while scrolling. This is useful
 when it is known that there is no more data that can be added, and
 the infinite scroll is no longer needed.
 

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

core/src/components/refresher/readme.md

@@ -26,7 +26,7 @@ Time it takes to close the refresher. Defaults to `280ms`.
 
 boolean
 
-If true, the refresher will be hidden. Defaults to `true`.
+If true, the refresher will be hidden. Defaults to `false`.
 
 
 #### pullMax
@@ -66,7 +66,7 @@ Time it takes to close the refresher. Defaults to `280ms`.
 
 boolean
 
-If true, the refresher will be hidden. Defaults to `true`.
+If true, the refresher will be hidden. Defaults to `false`.
 
 
 #### pull-max

core/src/components/textarea/readme.md

@@ -41,6 +41,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).
+
+
 #### cols
 
 number
@@ -76,6 +85,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"`.
+
+
 #### name
 
 string
@@ -162,6 +179,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).
+
+
 #### cols
 
 number
@@ -197,6 +223,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"`.
+
+
 #### name
 
 string

core/src/components/textarea/textarea.scss

@@ -19,6 +19,10 @@
   box-sizing: border-box;
 }
 
+:host(.ion-color) {
+  color: #{current-color(base)};
+}
+
 // Textarea Within An Item
 // --------------------------------------------------
 
@@ -31,6 +35,7 @@
 // --------------------------------------------------
 
 .native-textarea {
+  @include text-inherit();
   @include border-radius(var(--border-radius));
   @include placeholder(var(--placeholder-color));
   @include margin(0);
@@ -47,11 +52,6 @@
 
   background: transparent;
 
-  font-family: inherit;
-  font-size: inherit;
-  font-weight: inherit;
-
-  letter-spacing: inherit;
   box-sizing: border-box;
   resize: none;
   appearance: none;

core/src/components/textarea/textarea.tsx

@@ -17,9 +17,6 @@ export class Textarea implements TextareaComponent {
   private inputEl?: HTMLTextAreaElement;
   private inputId = `ion-input-${textareaIds++}`;
 
-  mode!: Mode;
-  color?: Color;
-
   didBlurAfterEdit = false;
 
   @Element() el!: HTMLElement;
@@ -51,6 +48,19 @@ export class Textarea implements TextareaComponent {
    */
   @Event() ionFocus!: 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;
+
   /**
    * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Defaults to `"none"`.
    */