docs(theming): update color property to include new colors

This commit is contained in:
Brandy Carney
2018-02-22 14:37:03 -05:00
parent 1f6af90bcf
commit c4591da829
59 changed files with 101 additions and 119 deletions

View File

@ -15,7 +15,7 @@ export class Badge {
/** /**
* The color to use from your Sass `$colors` map. * The color to use from your Sass `$colors` map.
* Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
* For more information, see [Theming your App](/docs/theming/theming-your-app). * For more information, see [Theming your App](/docs/theming/theming-your-app).
*/ */
@Prop() color: string; @Prop() color: string;

View File

@ -32,7 +32,7 @@ Badges are inline block elements that usually appear near another element. Typic
string string
The color to use from your Sass `$colors` map. The color to use from your Sass `$colors` map.
Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
For more information, see [Theming your App](/docs/theming/theming-your-app). For more information, see [Theming your App](/docs/theming/theming-your-app).
@ -52,7 +52,7 @@ For more information, see [Platform Styles](/docs/theming/platform-specific-styl
string string
The color to use from your Sass `$colors` map. The color to use from your Sass `$colors` map.
Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
For more information, see [Theming your App](/docs/theming/theming-your-app). For more information, see [Theming your App](/docs/theming/theming-your-app).

View File

@ -70,7 +70,7 @@ export class Button {
/** /**
* The color to use from your Sass `$colors` map. * The color to use from your Sass `$colors` map.
* Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
* For more information, see [Theming your App](/docs/theming/theming-your-app). * For more information, see [Theming your App](/docs/theming/theming-your-app).
*/ */
@Prop() color: string; @Prop() color: string;

View File

@ -91,7 +91,7 @@ Possible values are: `"button"`, `"bar-button"`.
string string
The color to use from your Sass `$colors` map. The color to use from your Sass `$colors` map.
Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
For more information, see [Theming your App](/docs/theming/theming-your-app). For more information, see [Theming your App](/docs/theming/theming-your-app).
@ -182,7 +182,7 @@ Possible values are: `"button"`, `"bar-button"`.
string string
The color to use from your Sass `$colors` map. The color to use from your Sass `$colors` map.
Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
For more information, see [Theming your App](/docs/theming/theming-your-app). For more information, see [Theming your App](/docs/theming/theming-your-app).

View File

@ -20,41 +20,23 @@
<ion-button color="medium">Medium</ion-button> <ion-button color="medium">Medium</ion-button>
<ion-button color="dark">Dark</ion-button> <ion-button color="dark">Dark</ion-button>
</p> </p>
<p> <p>
<ion-button fill="outline" color="primary">Primary</ion-button> <ion-badge color="primary">Primary</ion-badge>
<ion-button fill="outline" color="secondary">Secondary</ion-button> <ion-badge color="secondary">Secondary</ion-badge>
<ion-button fill="outline" color="tertiary">Tertiary</ion-button> <ion-badge color="tertiary">Tertiary</ion-badge>
<ion-button fill="outline" color="success">Success</ion-button> <ion-badge color="success">Success</ion-badge>
<ion-button fill="outline" color="warning">Warning</ion-button> <ion-badge color="warning">Warning</ion-badge>
<ion-button fill="outline" color="danger">Danger</ion-button> <ion-badge color="danger">Danger</ion-badge>
<ion-button fill="outline" color="light">Light</ion-button> <ion-badge color="light">Light</ion-badge>
<ion-button fill="outline" color="medium">Medium</ion-button> <ion-badge color="medium">Medium</ion-badge>
<ion-button fill="outline" color="dark">Dark</ion-button> <ion-badge color="dark">Dark</ion-badge>
</p> </p>
<p>
<ion-button fill="clear" color="primary">Primary</ion-button>
<ion-button fill="clear" color="secondary">Secondary</ion-button>
<ion-button fill="clear" color="tertiary">Tertiary</ion-button>
<ion-button fill="clear" color="success">Success</ion-button>
<ion-button fill="clear" color="warning">Warning</ion-button>
<ion-button fill="clear" color="danger">Danger</ion-button>
<ion-button fill="clear" color="light">Light</ion-button>
<ion-button fill="clear" color="medium">Medium</ion-button>
<ion-button fill="clear" color="dark">Dark</ion-button>
</p>
<p> <style>
<ion-button expand="block" color="light">Light</ion-button> ion-button {
<ion-button expand="block" color="medium">Medium</ion-button> --ion-color-primary: rgba(#000000, 0.871);
<ion-button expand="block" color="dark">Dark</ion-button> }
</p> </style>
<p>
<ion-button expand="full" color="light">Light</ion-button>
<ion-button expand="full" color="medium">Medium</ion-button>
<ion-button expand="full" color="dark">Dark</ion-button>
</p>
</body> </body>
</html> </html>

View File

@ -13,7 +13,7 @@ import { Component, Prop } from '@stencil/core';
export class CardContent { export class CardContent {
/** /**
* The color to use for the text. * The color to use for the text.
* Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
*/ */
@Prop() color: string; @Prop() color: string;

View File

@ -14,7 +14,7 @@ It is recommended that any text content for a card should be placed in an `ion-c
string string
The color to use for the text. The color to use for the text.
Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
#### mode #### mode
@ -32,7 +32,7 @@ Possible values are: `"ios"` or `"md"`.
string string
The color to use for the text. The color to use for the text.
Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
#### mode #### mode

View File

@ -15,7 +15,7 @@ import { createThemedClasses } from '../../utils/theme';
export class CardHeader { export class CardHeader {
/** /**
* The color to use for the background. * The color to use for the background.
* Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
*/ */
@Prop() color: string; @Prop() color: string;

View File

@ -12,7 +12,7 @@
string string
The color to use for the background. The color to use for the background.
Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
#### mode #### mode
@ -37,7 +37,7 @@ If true, the card header will be translucent. Defaults to `false`.
string string
The color to use for the background. The color to use for the background.
Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
#### mode #### mode

View File

@ -14,7 +14,7 @@ import { Component, Prop} from '@stencil/core';
export class CardSubtitle { export class CardSubtitle {
/** /**
* The color to use for the text color. * The color to use for the text color.
* Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
*/ */
@Prop() color: string; @Prop() color: string;

View File

@ -12,7 +12,7 @@
string string
The color to use for the text color. The color to use for the text color.
Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
#### mode #### mode
@ -30,7 +30,7 @@ Possible values are: `"ios"` or `"md"`.
string string
The color to use for the text color. The color to use for the text color.
Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
#### mode #### mode

View File

@ -15,7 +15,7 @@ export class CardTitle {
/** /**
* The color to use for the text color. * The color to use for the text color.
* Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
*/ */
@Prop() color: string; @Prop() color: string;

View File

@ -13,7 +13,7 @@
string string
The color to use for the text color. The color to use for the text color.
Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
#### mode #### mode
@ -31,7 +31,7 @@ Possible values are: `"ios"` or `"md"`.
string string
The color to use for the text color. The color to use for the text color.
Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
#### mode #### mode

View File

@ -14,7 +14,7 @@ export class Card {
/** /**
* The color to use for the background. * The color to use for the background.
* Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
*/ */
@Prop() color: string; @Prop() color: string;

View File

@ -16,7 +16,7 @@ sub-components to reflect this. Please see `ion-card-content`,
string string
The color to use for the background. The color to use for the background.
Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
#### mode #### mode
@ -34,7 +34,7 @@ Possible values are: `"ios"` or `"md"`.
string string
The color to use for the background. The color to use for the background.
Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
#### mode #### mode

View File

@ -22,7 +22,7 @@ export class Checkbox implements CheckboxInput {
/** /**
* The color to use. * The color to use.
* Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
*/ */
@Prop() color: string; @Prop() color: string;

View File

@ -57,7 +57,7 @@ If true, the checkbox is selected. Defaults to `false`.
string string
The color to use. The color to use.
Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
#### disabled #### disabled
@ -103,7 +103,7 @@ If true, the checkbox is selected. Defaults to `false`.
string string
The color to use. The color to use.
Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
#### disabled #### disabled

View File

@ -13,7 +13,7 @@ export class ChipButton {
/** /**
* The color to use. * The color to use.
* Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
*/ */
@Prop() color: string; @Prop() color: string;

View File

@ -43,7 +43,7 @@ A chip-button is an inset button that is placed inside of a chip.
string string
The color to use. The color to use.
Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
#### disabled #### disabled
@ -83,7 +83,7 @@ Possible values are: `"ios"` or `"md"`.
string string
The color to use. The color to use.
Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
#### disabled #### disabled

View File

@ -14,7 +14,7 @@ import { Component, Prop } from '@stencil/core';
export class Chip { export class Chip {
/** /**
* The color to use. * The color to use.
* Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
*/ */
@Prop() color: string; @Prop() color: string;

View File

@ -63,7 +63,7 @@ Chips represent complex entities in small blocks, such as a contact. A chip can
string string
The color to use. The color to use.
Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
#### mode #### mode
@ -81,7 +81,7 @@ Possible values are: `"ios"` or `"md"`.
string string
The color to use. The color to use.
Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
#### mode #### mode

View File

@ -14,7 +14,7 @@ export class FabButton {
/** /**
* The color to use from your Sass `$colors` map. * The color to use from your Sass `$colors` map.
* Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
* For more information, see [Theming your App](/docs/theming/theming-your-app). * For more information, see [Theming your App](/docs/theming/theming-your-app).
*/ */
@Prop() color: string; @Prop() color: string;

View File

@ -48,7 +48,7 @@ boolean
string string
The color to use from your Sass `$colors` map. The color to use from your Sass `$colors` map.
Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
For more information, see [Theming your App](/docs/theming/theming-your-app). For more information, see [Theming your App](/docs/theming/theming-your-app).
@ -105,7 +105,7 @@ boolean
string string
The color to use from your Sass `$colors` map. The color to use from your Sass `$colors` map.
Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
For more information, see [Theming your App](/docs/theming/theming-your-app). For more information, see [Theming your App](/docs/theming/theming-your-app).

View File

@ -16,7 +16,7 @@ export class ItemDivider {
/** /**
* The color to use from your Sass `$colors` map. * The color to use from your Sass `$colors` map.
* Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
* For more information, see [Theming your App](/docs/theming/theming-your-app). * For more information, see [Theming your App](/docs/theming/theming-your-app).
*/ */
@Prop() color: string; @Prop() color: string;

View File

@ -12,7 +12,7 @@
string string
The color to use from your Sass `$colors` map. The color to use from your Sass `$colors` map.
Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
For more information, see [Theming your App](/docs/theming/theming-your-app). For more information, see [Theming your App](/docs/theming/theming-your-app).
@ -32,7 +32,7 @@ For more information, see [Platform Styles](/docs/theming/platform-specific-styl
string string
The color to use from your Sass `$colors` map. The color to use from your Sass `$colors` map.
Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
For more information, see [Theming your App](/docs/theming/theming-your-app). For more information, see [Theming your App](/docs/theming/theming-your-app).

View File

@ -14,7 +14,7 @@ import { Component, Prop } from '@stencil/core';
export class ItemOption { export class ItemOption {
/** /**
* The color to use from your Sass `$colors` map. * The color to use from your Sass `$colors` map.
* Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
* For more information, see [Theming your App](/docs/theming/theming-your-app). * For more information, see [Theming your App](/docs/theming/theming-your-app).
*/ */
@Prop() color: string; @Prop() color: string;

View File

@ -15,7 +15,7 @@ action for the item.
string string
The color to use from your Sass `$colors` map. The color to use from your Sass `$colors` map.
Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
For more information, see [Theming your App](/docs/theming/theming-your-app). For more information, see [Theming your App](/docs/theming/theming-your-app).
@ -57,7 +57,7 @@ For more information, see [Platform Styles](/docs/theming/platform-specific-styl
string string
The color to use from your Sass `$colors` map. The color to use from your Sass `$colors` map.
Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
For more information, see [Theming your App](/docs/theming/theming-your-app). For more information, see [Theming your App](/docs/theming/theming-your-app).

View File

@ -19,7 +19,7 @@ export class Item {
/** /**
* The color to use from your Sass `$colors` map. * The color to use from your Sass `$colors` map.
* Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
* For more information, see [Theming your App](/docs/theming/theming-your-app). * For more information, see [Theming your App](/docs/theming/theming-your-app).
*/ */
@Prop() color: string; @Prop() color: string;

View File

@ -12,7 +12,7 @@
string string
The color to use from your Sass `$colors` map. The color to use from your Sass `$colors` map.
Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
For more information, see [Theming your App](/docs/theming/theming-your-app). For more information, see [Theming your App](/docs/theming/theming-your-app).
@ -71,7 +71,7 @@ If true, a button tag will be rendered. Defaults to `false`.
string string
The color to use from your Sass `$colors` map. The color to use from your Sass `$colors` map.
Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
For more information, see [Theming your App](/docs/theming/theming-your-app). For more information, see [Theming your App](/docs/theming/theming-your-app).

View File

@ -23,7 +23,7 @@ export class Label {
/** /**
* The color to use from your Sass `$colors` map. * The color to use from your Sass `$colors` map.
* Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
* For more information, see [Theming your App](/docs/theming/theming-your-app). * For more information, see [Theming your App](/docs/theming/theming-your-app).
*/ */
@Prop() color: string; @Prop() color: string;

View File

@ -12,7 +12,7 @@
string string
The color to use from your Sass `$colors` map. The color to use from your Sass `$colors` map.
Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
For more information, see [Theming your App](/docs/theming/theming-your-app). For more information, see [Theming your App](/docs/theming/theming-your-app).
@ -53,7 +53,7 @@ If true, the label will be stacked above an input. Defaults to `false`.
string string
The color to use from your Sass `$colors` map. The color to use from your Sass `$colors` map.
Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
For more information, see [Theming your App](/docs/theming/theming-your-app). For more information, see [Theming your App](/docs/theming/theming-your-app).

View File

@ -15,7 +15,7 @@ export class ListHeader {
/** /**
* The color to use from your Sass `$colors` map. * The color to use from your Sass `$colors` map.
* Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
* For more information, see [Theming your App](/docs/theming/theming-your-app). * For more information, see [Theming your App](/docs/theming/theming-your-app).
*/ */
@Prop() color: string; @Prop() color: string;

View File

@ -12,7 +12,7 @@
string string
The color to use from your Sass `$colors` map. The color to use from your Sass `$colors` map.
Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
For more information, see [Theming your App](/docs/theming/theming-your-app). For more information, see [Theming your App](/docs/theming/theming-your-app).
@ -32,7 +32,7 @@ For more information, see [Platform Styles](/docs/theming/platform-specific-styl
string string
The color to use from your Sass `$colors` map. The color to use from your Sass `$colors` map.
Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
For more information, see [Theming your App](/docs/theming/theming-your-app). For more information, see [Theming your App](/docs/theming/theming-your-app).

View File

@ -37,7 +37,7 @@ export class Modal {
/** /**
* The color to use from your Sass `$colors` map. * The color to use from your Sass `$colors` map.
* Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
* For more information, see [Theming your App](/docs/theming/theming-your-app). * For more information, see [Theming your App](/docs/theming/theming-your-app).
*/ */
@Prop() color: string; @Prop() color: string;

View File

@ -53,7 +53,7 @@ async function presentModal() {
string string
The color to use from your Sass `$colors` map. The color to use from your Sass `$colors` map.
Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
For more information, see [Theming your App](/docs/theming/theming-your-app). For more information, see [Theming your App](/docs/theming/theming-your-app).
@ -135,7 +135,7 @@ If true, the modal will animate. Defaults to `true`.
string string
The color to use from your Sass `$colors` map. The color to use from your Sass `$colors` map.
Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
For more information, see [Theming your App](/docs/theming/theming-your-app). For more information, see [Theming your App](/docs/theming/theming-your-app).

View File

@ -15,7 +15,7 @@ export class Note {
/** /**
* The color to use from your Sass `$colors` map. * The color to use from your Sass `$colors` map.
* Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
* For more information, see [Theming your App](/docs/theming/theming-your-app). * For more information, see [Theming your App](/docs/theming/theming-your-app).
*/ */
@Prop() color: string; @Prop() color: string;

View File

@ -38,7 +38,7 @@ Notes are text elements generally used as subtitles that provide more informatio
string string
The color to use from your Sass `$colors` map. The color to use from your Sass `$colors` map.
Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
For more information, see [Theming your App](/docs/theming/theming-your-app). For more information, see [Theming your App](/docs/theming/theming-your-app).
@ -58,7 +58,7 @@ For more information, see [Platform Styles](/docs/theming/platform-specific-styl
string string
The color to use from your Sass `$colors` map. The color to use from your Sass `$colors` map.
Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
For more information, see [Theming your App](/docs/theming/theming-your-app). For more information, see [Theming your App](/docs/theming/theming-your-app).

View File

@ -35,7 +35,7 @@ export class Popover {
/** /**
* The color to use from your Sass `$colors` map. * The color to use from your Sass `$colors` map.
* Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
* For more information, see [Theming your App](/docs/theming/theming-your-app). * For more information, see [Theming your App](/docs/theming/theming-your-app).
*/ */
@Prop() color: string; @Prop() color: string;

View File

@ -33,7 +33,7 @@ async function presentPopover() {
string string
The color to use from your Sass `$colors` map. The color to use from your Sass `$colors` map.
Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
For more information, see [Theming your App](/docs/theming/theming-your-app). For more information, see [Theming your App](/docs/theming/theming-your-app).
@ -129,7 +129,7 @@ If true, the popover will animate. Defaults to `true`.
string string
The color to use from your Sass `$colors` map. The color to use from your Sass `$colors` map.
Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
For more information, see [Theming your App](/docs/theming/theming-your-app). For more information, see [Theming your App](/docs/theming/theming-your-app).

View File

@ -25,7 +25,7 @@ export class Radio implements RadioButtonInput, ComponentDidLoad, ComponentDidUn
/** /**
* The color to use from your Sass `$colors` map. * The color to use from your Sass `$colors` map.
* Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
* For more information, see [Theming your App](/docs/theming/theming-your-app). * For more information, see [Theming your App](/docs/theming/theming-your-app).
*/ */
@Prop() color: string; @Prop() color: string;

View File

@ -48,7 +48,7 @@ If true, the radio is selected. Defaults to `false`.
string string
The color to use from your Sass `$colors` map. The color to use from your Sass `$colors` map.
Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
For more information, see [Theming your App](/docs/theming/theming-your-app). For more information, see [Theming your App](/docs/theming/theming-your-app).
@ -96,7 +96,7 @@ If true, the radio is selected. Defaults to `false`.
string string
The color to use from your Sass `$colors` map. The color to use from your Sass `$colors` map.
Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
For more information, see [Theming your App](/docs/theming/theming-your-app). For more information, see [Theming your App](/docs/theming/theming-your-app).

View File

@ -64,7 +64,7 @@ export class Range implements BaseInputComponent {
/** /**
* The color to use from your Sass `$colors` map. * The color to use from your Sass `$colors` map.
* Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
* For more information, see [Theming your App](/docs/theming/theming-your-app). * For more information, see [Theming your App](/docs/theming/theming-your-app).
*/ */
@Prop() color: string; @Prop() color: string;

View File

@ -12,7 +12,7 @@
string string
The color to use from your Sass `$colors` map. The color to use from your Sass `$colors` map.
Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
For more information, see [Theming your App](/docs/theming/theming-your-app). For more information, see [Theming your App](/docs/theming/theming-your-app).
@ -96,7 +96,7 @@ the value of the range.
string string
The color to use from your Sass `$colors` map. The color to use from your Sass `$colors` map.
Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
For more information, see [Theming your App](/docs/theming/theming-your-app). For more information, see [Theming your App](/docs/theming/theming-your-app).

View File

@ -74,7 +74,7 @@ Set the the cancel button text. Default: `"Cancel"`.
string string
The color to use from your Sass `$colors` map. The color to use from your Sass `$colors` map.
Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
For more information, see [Theming your App](/docs/theming/theming-your-app). For more information, see [Theming your App](/docs/theming/theming-your-app).
@ -164,7 +164,7 @@ Set the the cancel button text. Default: `"Cancel"`.
string string
The color to use from your Sass `$colors` map. The color to use from your Sass `$colors` map.
Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
For more information, see [Theming your App](/docs/theming/theming-your-app). For more information, see [Theming your App](/docs/theming/theming-your-app).

View File

@ -27,7 +27,7 @@ export class Searchbar {
/** /**
* The color to use from your Sass `$colors` map. * The color to use from your Sass `$colors` map.
* Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
* For more information, see [Theming your App](/docs/theming/theming-your-app). * For more information, see [Theming your App](/docs/theming/theming-your-app).
*/ */
@Prop() color: string; @Prop() color: string;

View File

@ -72,7 +72,7 @@ If true, the segment button is selected. Defaults to `false`.
string string
The color to use for the text color. The color to use for the text color.
Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
#### disabled #### disabled
@ -122,7 +122,7 @@ If true, the segment button is selected. Defaults to `false`.
string string
The color to use for the text color. The color to use for the text color.
Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
#### disabled #### disabled

View File

@ -19,7 +19,7 @@ export class SegmentButton {
/** /**
* The color to use for the text color. * The color to use for the text color.
* Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
*/ */
@Prop() color: string; @Prop() color: string;

View File

@ -72,7 +72,7 @@ Their functionality is similar to tabs, where selecting one will deselect all ot
string string
The color to use for the text color. The color to use for the text color.
Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
#### disabled #### disabled
@ -102,7 +102,7 @@ the value of the segment.
string string
The color to use for the text color. The color to use for the text color.
Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
#### disabled #### disabled

View File

@ -16,7 +16,7 @@ export class Segment {
/** /**
* The color to use for the text color. * The color to use for the text color.
* Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
*/ */
@Prop() color: string; @Prop() color: string;

View File

@ -41,7 +41,7 @@ The default spinner to use is based on the platform. The default spinner for `io
string string
The color to use from your Sass `$colors` map. The color to use from your Sass `$colors` map.
Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
For more information, see [Theming your App](/docs/theming/theming-your-app). For more information, see [Theming your App](/docs/theming/theming-your-app).
@ -84,7 +84,7 @@ If true, the spinner's animation will be paused. Defaults to `false`.
string string
The color to use from your Sass `$colors` map. The color to use from your Sass `$colors` map.
Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
For more information, see [Theming your App](/docs/theming/theming-your-app). For more information, see [Theming your App](/docs/theming/theming-your-app).

View File

@ -19,7 +19,7 @@ export class Spinner {
/** /**
* The color to use from your Sass `$colors` map. * The color to use from your Sass `$colors` map.
* Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
* For more information, see [Theming your App](/docs/theming/theming-your-app). * For more information, see [Theming your App](/docs/theming/theming-your-app).
*/ */
@Prop() color: string; @Prop() color: string;

View File

@ -95,7 +95,7 @@ components to switch to `TabsRoot3`:
string string
The color to use from your Sass `$colors` map. The color to use from your Sass `$colors` map.
Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
For more information, see [Theming your App](/docs/theming/theming-your-app). For more information, see [Theming your App](/docs/theming/theming-your-app).
@ -156,7 +156,7 @@ Defaults to `false`.
string string
The color to use from your Sass `$colors` map. The color to use from your Sass `$colors` map.
Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
For more information, see [Theming your App](/docs/theming/theming-your-app). For more information, see [Theming your App](/docs/theming/theming-your-app).

View File

@ -23,7 +23,7 @@ export class Tabs implements NavOutlet {
/** /**
* The color to use from your Sass `$colors` map. * The color to use from your Sass `$colors` map.
* Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
* For more information, see [Theming your App](/docs/theming/theming-your-app). * For more information, see [Theming your App](/docs/theming/theming-your-app).
*/ */
@Prop() color: string; @Prop() color: string;

View File

@ -44,7 +44,7 @@ The text component is a simple component that can be used to style the text colo
string string
The color to use from your Sass `$colors` map. The color to use from your Sass `$colors` map.
Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
For more information, see [Theming your App](/docs/theming/theming-your-app). For more information, see [Theming your App](/docs/theming/theming-your-app).
@ -64,7 +64,7 @@ For more information, see [Platform Styles](/docs/theming/platform-specific-styl
string string
The color to use from your Sass `$colors` map. The color to use from your Sass `$colors` map.
Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
For more information, see [Theming your App](/docs/theming/theming-your-app). For more information, see [Theming your App](/docs/theming/theming-your-app).

View File

@ -15,7 +15,7 @@ export class Text {
/** /**
* The color to use from your Sass `$colors` map. * The color to use from your Sass `$colors` map.
* Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
* For more information, see [Theming your App](/docs/theming/theming-your-app). * For more information, see [Theming your App](/docs/theming/theming-your-app).
*/ */
@Prop() color: string; @Prop() color: string;

View File

@ -57,7 +57,7 @@ If true, the toggle is selected. Defaults to `false`.
string string
The color to use from your Sass `$colors` map. The color to use from your Sass `$colors` map.
Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
For more information, see [Theming your App](/docs/theming/theming-your-app). For more information, see [Theming your App](/docs/theming/theming-your-app).
@ -105,7 +105,7 @@ If true, the toggle is selected. Defaults to `false`.
string string
The color to use from your Sass `$colors` map. The color to use from your Sass `$colors` map.
Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
For more information, see [Theming your App](/docs/theming/theming-your-app). For more information, see [Theming your App](/docs/theming/theming-your-app).

View File

@ -29,7 +29,7 @@ export class Toggle implements CheckboxInput {
/** /**
* The color to use from your Sass `$colors` map. * The color to use from your Sass `$colors` map.
* Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
* For more information, see [Theming your App](/docs/theming/theming-your-app). * For more information, see [Theming your App](/docs/theming/theming-your-app).
*/ */
@Prop() color: string; @Prop() color: string;

View File

@ -92,7 +92,7 @@ attribute to the element.
string string
The color to use from your Sass `$colors` map. The color to use from your Sass `$colors` map.
Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
For more information, see [Theming your App](/docs/theming/theming-your-app). For more information, see [Theming your App](/docs/theming/theming-your-app).
@ -122,7 +122,7 @@ Defaults to `false`.
string string
The color to use from your Sass `$colors` map. The color to use from your Sass `$colors` map.
Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
For more information, see [Theming your App](/docs/theming/theming-your-app). For more information, see [Theming your App](/docs/theming/theming-your-app).

View File

@ -20,7 +20,7 @@ export class Toolbar {
/** /**
* The color to use from your Sass `$colors` map. * The color to use from your Sass `$colors` map.
* Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
* For more information, see [Theming your App](/docs/theming/theming-your-app). * For more information, see [Theming your App](/docs/theming/theming-your-app).
*/ */
@Prop() color: string; @Prop() color: string;