docs(components): update color documentation

core/src/components/anchor/anchor.tsx

@@ -13,7 +13,9 @@ export class Anchor {
   @Prop({ context: 'window' }) win!: Window;
 
   /**
-   * The color to use for the anchor.
+   * 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;
 

core/src/components/back-button/back-button.tsx

@@ -18,7 +18,9 @@ export class BackButton {
   @Prop({ context: 'window' }) win!: Window;
 
   /**
-   * The color the button should be.
+   * 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;
 

core/src/components/badge/badge.tsx

@@ -12,7 +12,9 @@ import { createColorClasses } from '../../utils/theme';
 })
 export class Badge {
   /**
-   * The color the badge should be.
+   * 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;
 

core/src/components/button/button.tsx

@@ -19,7 +19,9 @@ export class Button {
   @State() keyFocus = false;
 
   /**
-   * The color to use for the button.
+   * 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;
 

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

@@ -12,7 +12,9 @@ import { createColorClasses } from '../../utils/theme';
 })
 export class CardHeader {
   /**
-   * The color to use for the background.
+   * 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;
 

core/src/components/card-subtitle/card-subtitle.tsx

@@ -12,7 +12,9 @@ import { createColorClasses } from '../../utils/theme';
 })
 export class CardSubtitle {
   /**
-   * The color to use for the text color.
+   * 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;
 

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

@@ -12,7 +12,9 @@ import { createColorClasses } from '../../utils/theme';
 })
 export class CardTitle {
   /**
-   * The color to use for the text color.
+   * 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;
 

core/src/components/card/card.tsx

@@ -13,8 +13,9 @@ import { createColorClasses } from '../../utils/theme';
 export class Card {
 
   /**
-   * The color to use for the background.
+   * 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;
 

core/src/components/checkbox/checkbox.tsx

@@ -22,7 +22,9 @@ export class Checkbox implements CheckboxInput {
   @State() keyFocus = false;
 
   /**
-   * The color to use for the checkbox.
+   * 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;
 

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

@@ -11,8 +11,9 @@ export class ChipButton {
   @Element() el!: HTMLElement;
 
   /**
-   * The color to use.
+   * 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;
 

core/src/components/chip-icon/chip-icon.tsx

@@ -9,8 +9,9 @@ import { createColorClasses } from '../../utils/theme';
 })
 export class ChipIcon {
   /**
-   * The color to use.
+   * 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;
 

core/src/components/chip/chip.tsx

@@ -13,7 +13,9 @@ import { createColorClasses } from '../../utils/theme';
 })
 export class Chip {
   /**
-   * The color to use.
+   * 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;
 

core/src/components/fab-button/fab-button.tsx

@@ -16,7 +16,9 @@ export class FabButton {
   @Element() el!: HTMLElement;
 
   /**
-   * The color to use for the button.
+   * 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;
 

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

@@ -15,7 +15,9 @@ export class ItemDivider {
   @Element() el!: HTMLElement;
 
   /**
-   * The color to use for the item-divider
+   * 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;
 

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

@@ -15,7 +15,9 @@ export class ItemOption {
   @Element() el!: HTMLElement;
 
   /**
-   * The color to use for the option
+   * 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;
 

core/src/components/item/item.tsx

@@ -15,11 +15,12 @@ export class Item {
 
   @Element() el!: HTMLStencilElement;
 
-  @Prop({ context: 'window' })
+  @Prop({ context: 'window' }) win!: Window;
-  win!: Window;
 
   /**
-   * The color to use for the background of the item.
+   * 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;
 

core/src/components/label/label.tsx

@@ -14,7 +14,9 @@ export class Label {
   @Element() el!: HTMLElement;
 
   /**
-   * The color to use for the label's text
+   * 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;
 

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

@@ -12,7 +12,9 @@ import { createColorClasses } from '../../utils/theme';
 })
 export class ListHeader {
   /**
-   * The color to use for the background.
+   * 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;
 

core/src/components/menu-button/menu-button.tsx

@@ -14,7 +14,9 @@ export class MenuButton {
   @Prop({ context: 'config' }) config!: Config;
 
   /**
-   * The color to use for the background of the item.
+   * 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;
 

core/src/components/note/note.tsx

@@ -12,8 +12,9 @@ import { createColorClasses } from '../../utils/theme';
 })
 export class Note {
   /**
-   * The color to use from your Sass `$colors` map.
+   * 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 theming colors, see [theming](/docs/theming/basics).
    */
   @Prop() color?: Color;
 

core/src/components/popover/popover.tsx

@@ -34,8 +34,9 @@ export class Popover implements OverlayInterface {
   @Prop() keyboardClose = true;
 
   /**
-   * The color to use from your Sass `$colors` map.
+   * 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;
 

core/src/components/radio/radio.tsx

@@ -22,8 +22,9 @@ export class Radio implements RadioButtonInput {
   @Element() el!: HTMLElement;
 
   /**
-   * The color to use from your Sass `$colors` map.
+   * 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;
 

core/src/components/range/range.tsx

@@ -26,8 +26,9 @@ export class Range implements BaseInput {
   @State() private pressedKnob: Knob;
 
   /**
-   * The color to use from your Sass `$colors` map.
+   * 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;
 

core/src/components/searchbar/searchbar.tsx

@@ -28,7 +28,9 @@ export class Searchbar {
   @State() focused = false;
 
   /**
-   * The color the searchbar should be.
+   * 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;
 

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

@@ -14,8 +14,9 @@ export class SegmentButton {
   @Element() el!: HTMLElement;
 
   /**
-   * The color to use for the text color.
+   * 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;
 

core/src/components/segment/segment.tsx

@@ -16,8 +16,9 @@ export class Segment {
   @Element() el!: HTMLElement;
 
   /**
-   * The color to use for the text color.
+   * 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;
 

core/src/components/spinner/spinner.tsx

@@ -16,8 +16,9 @@ export class Spinner {
   @Prop({ context: 'config' }) config!: Config;
 
   /**
-   * The color to use from your Sass `$colors` map.
+   * 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;
 

core/src/components/tabs/tabs.tsx

@@ -25,8 +25,9 @@ export class Tabs implements NavOutlet {
   @Prop({ context: 'document' }) doc!: Document;
 
   /**
-   * The color to use from your Sass `$colors` map.
+   * 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;
 

core/src/components/text/text.tsx

@@ -11,8 +11,9 @@ import { createColorClasses } from '../../utils/theme';
 export class Text {
 
   /**
-   * The color to use for the text.
+   * 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;
 

core/src/components/title/title.tsx

@@ -15,8 +15,9 @@ export class ToolbarTitle {
   @Prop() mode!: Mode;
 
   /**
-   * The color to use for the title.
+   * 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;
 

core/src/components/toggle/toggle.tsx

@@ -25,8 +25,9 @@ export class Toggle implements CheckboxInput {
   @State() keyFocus = false;
 
   /**
-   * The color to use from your Sass `$colors` map.
+   * 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;
 

core/src/components/toolbar/toolbar.tsx

@@ -15,8 +15,9 @@ export class Toolbar {
   @Prop({ context: 'config' }) config!: Config;
 
   /**
-   * The color to use for the background.
+   * 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;