docs(theming): make sure color and mode are documented properly

packages/core/src/components/badge/badge.tsx

@@ -1,4 +1,4 @@
-import { Component } from '@stencil/core';
+import { Component, Prop } from '@stencil/core';
 
 /**
   * @name Badge
@@ -39,6 +39,21 @@ import { Component } from '@stencil/core';
   }
 })
 export class Badge {
+
+  /**
+   * @input {string} The color to use from your Sass `$colors` map.
+   * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+   * For more information, see [Theming your App](/docs/theming/theming-your-app).
+   */
+  @Prop() color: string;
+
+  /**
+   * @input {string} The mode determines which platform styles to use.
+   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
+   * For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
+   */
+  @Prop() mode: 'ios' | 'md' | 'wp';
+
   protected render() {
     return <slot></slot>;
   }

packages/core/src/components/button/button.tsx

@@ -75,94 +75,98 @@ export class Button {
 
   @Prop() itemButton: boolean = false;
 
+  /**
+   * @input {string} Contains a URL or a URL fragment that the hyperlink points to.
+   * If this property is set, an anchor tag will be rendered.
+   */
   @Prop() href: string;
 
   /**
-   * @Prop {string} The type of button.
+   * @input {string} The type of button.
    * Possible values are: `"button"`, `"bar-button"`.
    */
   @Prop() buttonType: string = 'button';
 
   /**
-   * @Prop {boolean} If true, activates the large button size.
+   * @input {boolean} If true, activates the large button size.
    * Type: size
    */
   @Prop() large: boolean = false;
 
   /**
-   * @Prop {boolean} If true, activates the small button size.
+   * @input {boolean} If true, activates the small button size.
    * Type: size
    */
   @Prop() small: boolean = false;
 
   /**
-   * @Prop {boolean} If true, activates the default button size. Normally the default, useful for buttons in an item.
+   * @input {boolean} If true, activates the default button size. Normally the default, useful for buttons in an item.
    * Type: size
    */
   @Prop() default: boolean = false;
 
   /**
-   * @Prop {boolean} If true, sets the button into a disabled state.
+   * @input {boolean} If true, sets the button into a disabled state.
    */
   @Prop() disabled: boolean = false;
 
   /**
-   * @Prop {boolean} If true, activates a transparent button style with a border.
+   * @input {boolean} If true, activates a transparent button style with a border.
    * Type: style
    */
   @Prop() outline: boolean = false;
 
   /**
-   * @Prop {boolean} If true, activates a transparent button style without a border.
+   * @input {boolean} If true, activates a transparent button style without a border.
    * Type: style
    */
   @Prop() clear: boolean = false;
 
   /**
-   * @Prop {boolean} If true, activates a solid button style. Normally the default, useful for buttons in a toolbar.
+   * @input {boolean} If true, activates a solid button style. Normally the default, useful for buttons in a toolbar.
    * Type: style
    */
   @Prop() solid: boolean = false;
 
   /**
-   * @Prop {boolean} If true, activates a button with rounded corners.
+   * @input {boolean} If true, activates a button with rounded corners.
    * Type: shape
    */
   @Prop() round: boolean = false;
 
   /**
-   * @Prop {boolean} If true, activates a button style that fills the available width.
+   * @input {boolean} If true, activates a button style that fills the available width.
    * Type: display
    */
   @Prop() block: boolean = false;
 
   /**
-   * @Prop {boolean} If true, activates a button style that fills the available width without
+   * @input {boolean} If true, activates a button style that fills the available width without
    * a left and right border.
    * Type: display
    */
   @Prop() full: boolean = false;
 
   /**
-   * @Prop {boolean} If true, activates a button with a heavier font weight.
+   * @input {boolean} If true, activates a button with a heavier font weight.
    * Type: decorator
    */
   @Prop() strong: boolean = false;
 
   /**
-   * @Prop {string} The mode determines which platform styles to use.
-   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
-   * For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
-   */
-  @Prop() mode: 'ios' | 'md' | 'wp';
-
-  /**
-   * @Prop {string} The color to use from your Sass `$colors` map.
+   * @input {string} The color to use from your Sass `$colors` map.
    * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
    * For more information, see [Theming your App](/docs/theming/theming-your-app).
    */
   @Prop() color: string;
 
+  /**
+   * @input {string} The mode determines which platform styles to use.
+   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
+   * For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
+   */
+  @Prop() mode: 'ios' | 'md' | 'wp';
+
   protected render() {
     const buttonType = this.buttonType;
     const mode = this.mode;

packages/core/src/components/card-content/card-content.tsx

@@ -1,4 +1,4 @@
-import { Component } from '@stencil/core';
+import { Component, Prop } from '@stencil/core';
 
 @Component({
   tag: 'ion-card-content',
@@ -12,6 +12,20 @@ import { Component } from '@stencil/core';
   }
 })
 export class CardContent {
+  /**
+   * @input {string} The color to use from your Sass `$colors` map.
+   * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+   * For more information, see [Theming your App](/docs/theming/theming-your-app).
+   */
+  @Prop() color: string;
+
+  /**
+   * @input {string} The mode determines which platform styles to use.
+   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
+   * For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
+   */
+  @Prop() mode: 'ios' | 'md' | 'wp';
+
   protected render() {
     return <slot></slot>;
   }

packages/core/src/components/card-header/card-header.tsx

@@ -1,4 +1,4 @@
-import { Component } from '@stencil/core';
+import { Component, Prop } from '@stencil/core';
 
 
 @Component({
@@ -13,6 +13,20 @@ import { Component } from '@stencil/core';
   }
 })
 export class CardHeader {
+  /**
+   * @input {string} The color to use from your Sass `$colors` map.
+   * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+   * For more information, see [Theming your App](/docs/theming/theming-your-app).
+   */
+  @Prop() color: string;
+
+  /**
+   * @input {string} The mode determines which platform styles to use.
+   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
+   * For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
+   */
+  @Prop() mode: 'ios' | 'md' | 'wp';
+
   protected render() {
     return <slot></slot>;
   }

packages/core/src/components/card-title/card-title.tsx

@@ -1,4 +1,4 @@
-import { Component } from '@stencil/core';
+import { Component, Prop} from '@stencil/core';
 
 
 @Component({
@@ -13,6 +13,20 @@ import { Component } from '@stencil/core';
   }
 })
 export class CardTitle {
+  /**
+   * @input {string} The color to use from your Sass `$colors` map.
+   * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+   * For more information, see [Theming your App](/docs/theming/theming-your-app).
+   */
+  @Prop() color: string;
+
+  /**
+   * @input {string} The mode determines which platform styles to use.
+   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
+   * For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
+   */
+  @Prop() mode: 'ios' | 'md' | 'wp';
+
   protected render() {
     return <slot></slot>;
   }

packages/core/src/components/card/card.tsx

@@ -1,4 +1,4 @@
-import { Component } from '@stencil/core';
+import { Component, Prop } from '@stencil/core';
 
 @Component({
   tag: 'ion-card',
@@ -12,6 +12,20 @@ import { Component } from '@stencil/core';
   }
 })
 export class Card {
+  /**
+   * @input {string} The color to use from your Sass `$colors` map.
+   * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+   * For more information, see [Theming your App](/docs/theming/theming-your-app).
+   */
+  @Prop() color: string;
+
+  /**
+   * @input {string} The mode determines which platform styles to use.
+   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
+   * For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
+   */
+  @Prop() mode: 'ios' | 'md' | 'wp';
+
   protected render() {
     return <slot></slot>;
   }

packages/core/src/components/checkbox/checkbox.tsx

@@ -92,6 +92,20 @@ export class Checkbox {
    */
   @Event() ionStyle: EventEmitter;
 
+  /**
+   * @input {string} The color to use from your Sass `$colors` map.
+   * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+   * For more information, see [Theming your App](/docs/theming/theming-your-app).
+   */
+  @Prop() color: string;
+
+  /**
+   * @input {string} The mode determines which platform styles to use.
+   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
+   * For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
+   */
+  @Prop() mode: 'ios' | 'md' | 'wp';
+
   /**
    * @input {boolean} If true, the checkbox is selected. Defaults to `false`.
    */

packages/core/src/components/chip-button/chip-button.tsx

@@ -12,18 +12,34 @@ import { getElementClassObject } from '../../utils/theme';
 })
 export class ChipButton {
   @Element() private el: HTMLElement;
-  private mode: string;
-  private color: string;
 
+  /**
+   * @input {string} Contains a URL or a URL fragment that the hyperlink points to.
+   * If this property is set, an anchor tag will be rendered.
+   */
   @Prop() href: string;
 
   /**
-   * @Prop {boolean} If true, activates a transparent button style.
+   * @input {string} The color to use from your Sass `$colors` map.
+   * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+   * For more information, see [Theming your App](/docs/theming/theming-your-app).
+   */
+  @Prop() color: string;
+
+  /**
+   * @input {string} The mode determines which platform styles to use.
+   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
+   * For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
+   */
+  @Prop() mode: 'ios' | 'md' | 'wp';
+
+  /**
+   * @input {boolean} If true, activates a transparent button style.
    */
   @Prop() clear: boolean = false;
 
   /**
-   * @Prop {boolean} If true, sets the button into a disabled state.
+   * @input {boolean} If true, sets the button into a disabled state.
    */
   @Prop() disabled: boolean = false;
 

packages/core/src/components/chip/chip.tsx

@@ -1,4 +1,4 @@
-import { Component } from '@stencil/core';
+import { Component, Prop } from '@stencil/core';
 
 /**
   * @name Chip
@@ -99,6 +99,20 @@ import { Component } from '@stencil/core';
   }
 })
 export class Chip {
+  /**
+   * @input {string} The color to use from your Sass `$colors` map.
+   * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+   * For more information, see [Theming your App](/docs/theming/theming-your-app).
+   */
+  @Prop() color: string;
+
+  /**
+   * @input {string} The mode determines which platform styles to use.
+   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
+   * For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
+   */
+  @Prop() mode: 'ios' | 'md' | 'wp';
+
   protected render() {
     return <slot></slot>;
   }

packages/core/src/components/fab/fab.tsx

@@ -57,10 +57,27 @@ import { createThemedClasses, getElementClassObject } from '../../utils/theme';
 })
 export class FabButton {
   @Element() private el: HTMLElement;
-  private mode: string;
-  private color: string;
 
+  /**
+   * @input {string} The color to use from your Sass `$colors` map.
+   * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+   * For more information, see [Theming your App](/docs/theming/theming-your-app).
+   */
+  @Prop() color: string;
+
+  /**
+   * @input {string} The mode determines which platform styles to use.
+   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
+   * For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
+   */
+  @Prop() mode: 'ios' | 'md' | 'wp';
+
+  /**
+   * @input {string} Contains a URL or a URL fragment that the hyperlink points to.
+   * If this property is set, an anchor tag will be rendered.
+   */
   @Prop() href: string;
+
   @Prop() activated: boolean = false;
   @Prop() toggleActive: Function = () => {};
 
@@ -70,7 +87,7 @@ export class FabButton {
   @State() private inList: boolean = false;
 
   /**
-   * @Prop {boolean} If true, sets the button into a disabled state.
+   * @input {boolean} If true, sets the button into a disabled state.
    */
   @Prop() disabled: boolean = false;
 

packages/core/src/components/input/textarea.tsx

@@ -166,7 +166,7 @@ export class Textarea implements TextareaComponent {
   @Prop() wrap: string;
 
   /**
-   * @input {string} The value of the textare.
+   * @input {string} The value of the textarea.
    */
   @Prop({ mutable: true }) value: string;
 

packages/core/src/components/item-divider/item-divider.tsx

@@ -1,4 +1,4 @@
-import { Component } from '@stencil/core';
+import { Component, Prop } from '@stencil/core';
 
 
 @Component({
@@ -13,6 +13,21 @@ import { Component } from '@stencil/core';
   }
 })
 export class ItemDivider {
+
+  /**
+   * @input {string} The color to use from your Sass `$colors` map.
+   * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+   * For more information, see [Theming your App](/docs/theming/theming-your-app).
+   */
+  @Prop() color: string;
+
+  /**
+   * @input {string} The mode determines which platform styles to use.
+   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
+   * For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
+   */
+  @Prop() mode: 'ios' | 'md' | 'wp';
+
   protected render() {
     return [
       <slot name='start'></slot>,

packages/core/src/components/item-sliding/item-option.tsx

@@ -14,13 +14,28 @@ import { Component, Prop } from '@stencil/core';
   }
 })
 export class ItemOption {
-  mode: string;
-  color: string;
+  /**
+   * @input {string} The color to use from your Sass `$colors` map.
+   * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+   * For more information, see [Theming your App](/docs/theming/theming-your-app).
+   */
+  @Prop() color: string;
 
+  /**
+   * @input {string} The mode determines which platform styles to use.
+   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
+   * For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
+   */
+  @Prop() mode: 'ios' | 'md' | 'wp';
+
+  /**
+   * @input {string} Contains a URL or a URL fragment that the hyperlink points to.
+   * If this property is set, an anchor tag will be rendered.
+   */
   @Prop() href: string;
 
   /**
-   * @Prop {boolean} If true, sets the button into a disabled state.
+   * @input {boolean} If true, sets the button into a disabled state.
    */
   @Prop() disabled: boolean = false;
 

packages/core/src/components/item/item.tsx

@@ -22,8 +22,24 @@ export class Item {
 
   @Element() private el: HTMLElement;
 
-  @Prop() mode: string;
+  /**
+   * @input {string} The color to use from your Sass `$colors` map.
+   * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+   * For more information, see [Theming your App](/docs/theming/theming-your-app).
+   */
   @Prop() color: string;
+
+  /**
+   * @input {string} The mode determines which platform styles to use.
+   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
+   * For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
+   */
+  @Prop() mode: 'ios' | 'md' | 'wp';
+
+  /**
+   * @input {string} Contains a URL or a URL fragment that the hyperlink points to.
+   * If this property is set, an anchor tag will be rendered.
+   */
   @Prop() href: string;
 
   @Listen('ionStyle')

packages/core/src/components/label/label.tsx

@@ -22,6 +22,20 @@ export class Label {
    */
   @Event() ionStyle: EventEmitter;
 
+  /**
+   * @input {string} The color to use from your Sass `$colors` map.
+   * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+   * For more information, see [Theming your App](/docs/theming/theming-your-app).
+   */
+  @Prop() color: string;
+
+  /**
+   * @input {string} The mode determines which platform styles to use.
+   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
+   * For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
+   */
+  @Prop() mode: 'ios' | 'md' | 'wp';
+
   /**
    * @output {Event} If true, the label will sit alongside an input. Defaults to `false`.
    */

packages/core/src/components/list-header/list-header.tsx

@@ -1,4 +1,4 @@
-import { Component } from '@stencil/core';
+import { Component, Prop } from '@stencil/core';
 
 
 @Component({
@@ -13,6 +13,21 @@ import { Component } from '@stencil/core';
   }
 })
 export class ListHeader {
+
+  /**
+   * @input {string} The color to use from your Sass `$colors` map.
+   * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+   * For more information, see [Theming your App](/docs/theming/theming-your-app).
+   */
+  @Prop() color: string;
+
+  /**
+   * @input {string} The mode determines which platform styles to use.
+   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
+   * For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
+   */
+  @Prop() mode: 'ios' | 'md' | 'wp';
+
   protected render() {
     return <slot></slot>;
   }

packages/core/src/components/note/note.tsx

@@ -1,4 +1,4 @@
-import { Component } from '@stencil/core';
+import { Component, Prop } from '@stencil/core';
 
 
 /**
@@ -40,6 +40,21 @@ import { Component } from '@stencil/core';
   }
 })
 export class Note {
+
+  /**
+   * @input {string} The color to use from your Sass `$colors` map.
+   * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+   * For more information, see [Theming your App](/docs/theming/theming-your-app).
+   */
+  @Prop() color: string;
+
+  /**
+   * @input {string} The mode determines which platform styles to use.
+   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
+   * For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
+   */
+  @Prop() mode: 'ios' | 'md' | 'wp';
+
   protected render() {
     return <slot></slot>;
   }

packages/core/src/components/radio/radio.tsx

@@ -50,8 +50,6 @@ import { createThemedClasses } from '../../utils/theme';
   }
 })
 export class Radio {
-  mode: string;
-  color: string;
   labelId: string;
   styleTmr: any;
 
@@ -89,6 +87,20 @@ export class Radio {
    */
   @Event() ionSelect: EventEmitter;
 
+  /**
+   * @input {string} The color to use from your Sass `$colors` map.
+   * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+   * For more information, see [Theming your App](/docs/theming/theming-your-app).
+   */
+  @Prop() color: string;
+
+  /**
+   * @input {string} The mode determines which platform styles to use.
+   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
+   * For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
+   */
+  @Prop() mode: 'ios' | 'md' | 'wp';
+
   /**
    * @input {boolean} If true, the radio is selected. Defaults to `false`.
    */

packages/core/src/components/range/range.tsx

@@ -59,6 +59,20 @@ export class Range implements BaseInputComponent {
    */
   @Event() ionBlur: EventEmitter;
 
+  /**
+   * @input {string} The color to use from your Sass `$colors` map.
+   * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+   * For more information, see [Theming your App](/docs/theming/theming-your-app).
+   */
+  @Prop() color: string;
+
+  /**
+   * @input {string} The mode determines which platform styles to use.
+   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
+   * For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
+   */
+  @Prop() mode: 'ios' | 'md' | 'wp';
+
   /**
    * @input {number} How long, in milliseconds, to wait to trigger the
    * `ionChange` event after each change in the range value. Default `0`.

packages/core/src/components/searchbar/searchbar.tsx

@@ -38,10 +38,6 @@ export class Searchbar {
 
   @Element() private el: HTMLElement;
 
-  @Prop() mode: string;
-
-  @Prop() color: string;
-
   @State() activated: boolean = false;
 
   @State() focused: boolean = false;
@@ -72,6 +68,19 @@ export class Searchbar {
    */
   @Event() ionFocus: EventEmitter;
 
+  /**
+   * @input {string} The color to use from your Sass `$colors` map.
+   * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+   * For more information, see [Theming your App](/docs/theming/theming-your-app).
+   */
+  @Prop() color: string;
+
+  /**
+   * @input {string} The mode determines which platform styles to use.
+   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
+   * For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
+   */
+  @Prop() mode: 'ios' | 'md' | 'wp';
 
   /**
    * @input {boolean} If true, enable searchbar animation. Default `false`.

packages/core/src/components/segment-button/segment-button.tsx

@@ -46,9 +46,6 @@ import { createThemedClasses, getElementClassObject } from '../../utils/theme';
 export class SegmentButton {
   styleTmr: any;
 
-  mode: string;
-  color: string;
-
   @Element() private el: HTMLElement;
 
   /**
@@ -58,6 +55,20 @@ export class SegmentButton {
 
   @State() activated: boolean = false;
 
+  /**
+   * @input {string} The color to use from your Sass `$colors` map.
+   * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+   * For more information, see [Theming your App](/docs/theming/theming-your-app).
+   */
+  @Prop() color: string;
+
+  /**
+   * @input {string} The mode determines which platform styles to use.
+   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
+   * For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
+   */
+  @Prop() mode: 'ios' | 'md' | 'wp';
+
   /**
    * @input {boolean} If true, the segment button is selected. Defaults to `false`.
    */

packages/core/src/components/segment/segment.tsx

@@ -81,6 +81,20 @@ export class Segment {
    */
   @Event() ionChange: EventEmitter;
 
+  /**
+   * @input {string} The color to use from your Sass `$colors` map.
+   * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+   * For more information, see [Theming your App](/docs/theming/theming-your-app).
+   */
+  @Prop() color: string;
+
+  /**
+   * @input {string} The mode determines which platform styles to use.
+   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
+   * For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
+   */
+  @Prop() mode: 'ios' | 'md' | 'wp';
+
   /*
    * @input {boolean} If true, the user cannot interact with the segment. Default false.
    */

packages/core/src/components/spinner/spinner.tsx

@@ -109,11 +109,22 @@ import { SPINNERS, SpinnerConfig } from './spinner-configs';
   }
 })
 export class Spinner {
-  mode: string;
-  color: string;
-
   @Prop({ context: 'config' }) config: Config;
 
+  /**
+   * @input {string} The color to use from your Sass `$colors` map.
+   * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+   * For more information, see [Theming your App](/docs/theming/theming-your-app).
+   */
+  @Prop() color: string;
+
+  /**
+   * @input {string} The mode determines which platform styles to use.
+   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
+   * For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
+   */
+  @Prop() mode: 'ios' | 'md' | 'wp';
+
   /**
    * @input {string} How long it takes it to do one loop.
    */

packages/core/src/components/tabs/tab-bar.tsx

@@ -9,6 +9,21 @@ import { Component, Prop } from '@stencil/core';
   }
 })
 export class TabBar {
+
+  /**
+   * @input {string} The color to use from your Sass `$colors` map.
+   * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+   * For more information, see [Theming your App](/docs/theming/theming-your-app).
+   */
+  @Prop() color: string;
+
+  /**
+   * @input {string} The mode determines which platform styles to use.
+   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
+   * For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
+   */
+  @Prop() mode: 'ios' | 'md' | 'wp';
+
   @Prop() tabs: any;
 
   @Prop() onTabSelected: Function;
@@ -16,7 +31,7 @@ export class TabBar {
   @Prop() selectedIndex: number = 0;
 
   /**
-   * @prop {string} Set the tabbar layout: `icon-top`, `icon-start`, `icon-end`, `icon-bottom`, `icon-hide`, `title-hide`.
+   * @input {string} Set the tabbar layout: `icon-top`, `icon-start`, `icon-end`, `icon-bottom`, `icon-hide`, `title-hide`.
    */
   @Prop() tabsLayout: string = 'icon-top';
   /*

packages/core/src/components/tabs/tab.tsx

@@ -10,61 +10,61 @@ import { Component, Event, EventEmitter, Prop, State } from '@stencil/core';
 export class Tab {
 
   /**
-   * @prop {Page} Set the root component for this tab.
+   * @input {Page} Set the root component for this tab.
    */
   @Prop() root: string;
 
   /**
-   * @prop {object} Any nav-params to pass to the root componentof this tab.
+   * @input {object} Any nav-params to pass to the root componentof this tab.
    */
   @Prop() rootParams: any;
 
   /**
-   * @prop {boolean} If true, the tab is selected
+   * @input {boolean} If true, the tab is selected
    */
   @State() isSelected: Boolean = false;
 
   /**
-   * @prop {string} The title of the tab button.
+   * @input {string} The title of the tab button.
    */
   @Prop() tabTitle: string;
 
   /**
-   * @prop {string} The icon for the tab button.
+   * @input {string} The icon for the tab button.
    */
   @Prop() tabIcon: string;
 
   /**
-   * @prop {string} The badge for the tab button.
+   * @input {string} The badge for the tab button.
    */
   @Prop() tabBadge: string;
 
   /**
-   * @prop {string} The badge color for the tab button.
+   * @input {string} The badge color for the tab button.
    */
   @Prop() tabBadgeStyle: string;
 
   /**
    * TODO why isn't this disabled like other components?
-   * @prop {boolean} If true, enable the tab. If false,
+   * @input {boolean} If true, enable the tab. If false,
    * the user cannot interact with the tab.
    * Default: `true`.
    */
   @Prop() enabled: boolean = true;
 
   /**
-   * @prop {boolean} If true, the tab button is visible within the
+   * @input {boolean} If true, the tab button is visible within the
    * tabbar. Default: `true`.
    */
   @Prop() shown: boolean = true;
 
   /**
-   * @prop {boolean} If true, hide the tabs on child pages.
+   * @input {boolean} If true, hide the tabs on child pages.
    */
   @Prop() tabsHideOnSubPages: boolean = false;
 
   /**
-   * @prop {Tab} Emitted when the current tab is selected.
+   * @input {Tab} Emitted when the current tab is selected.
    */
   @Prop() onSelected: Function;
 

packages/core/src/components/tabs/tabs.tsx

@@ -28,17 +28,17 @@ export class Tabs {
   @State() selectedIndex: number = 0;
 
   /**
-   * @prop {string} Set the tabbar layout: `icon-top`, `icon-start`, `icon-end`, `icon-bottom`, `icon-hide`, `title-hide`.
+   * @input {string} Set the tabbar layout: `icon-top`, `icon-start`, `icon-end`, `icon-bottom`, `icon-hide`, `title-hide`.
    */
   @Prop() tabsLayout: string = 'icon-top';
 
   /**
-   * @prop {string} Set position of the tabbar: `top`, `bottom`.
+   * @input {string} Set position of the tabbar: `top`, `bottom`.
    */
   @Prop() tabsPlacement: string = 'bottom';
 
   /**
-   * @prop {boolean} If true, show the tab highlight bar under the selected tab.
+   * @input {boolean} If true, show the tab highlight bar under the selected tab.
    */
   @Prop() tabsHighlight: boolean = false;
 

packages/core/src/components/toggle/toggle.tsx

@@ -15,7 +15,6 @@ import { hapticSelection } from '../../utils/haptic';
   }
 })
 export class Toggle implements BooleanInputComponent {
-
   private toggleId: string;
   private labelId: string;
   private styleTmr: any;
@@ -45,6 +44,20 @@ export class Toggle implements BooleanInputComponent {
    */
   @Event() ionBlur: EventEmitter;
 
+  /**
+   * @input {string} The color to use from your Sass `$colors` map.
+   * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+   * For more information, see [Theming your App](/docs/theming/theming-your-app).
+   */
+  @Prop() color: string;
+
+  /**
+   * @input {string} The mode determines which platform styles to use.
+   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
+   * For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
+   */
+  @Prop() mode: 'ios' | 'md' | 'wp';
+
   /**
    * @input {boolean} If true, the toggle is selected. Defaults to `false`.
    */

packages/core/src/components/toolbar/toolbar.tsx

@@ -103,9 +103,22 @@ import { Config } from '../../index';
 })
 export class Toolbar {
   @Element() private el: HTMLElement;
+
   @Prop({ context: 'config' }) config: Config;
-  mode: string;
-  color: string;
+
+  /**
+   * @input {string} The color to use from your Sass `$colors` map.
+   * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+   * For more information, see [Theming your App](/docs/theming/theming-your-app).
+   */
+  @Prop() color: string;
+
+  /**
+   * @input {string} The mode determines which platform styles to use.
+   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
+   * For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
+   */
+  @Prop() mode: 'ios' | 'md' | 'wp';
 
   protected ionViewDidLoad() {
     const buttons = this.el.querySelectorAll('ion-button') as any;