From f0c15384a2a7d77e3b9bec9030bb4b0b46aaac95 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Tue, 24 Jul 2018 11:59:32 -0400
Subject: [PATCH] docs(components): update color documentation

---
 core/src/components/anchor/anchor.tsx                 | 4 +++-
 core/src/components/back-button/back-button.tsx       | 4 +++-
 core/src/components/badge/badge.tsx                   | 4 +++-
 core/src/components/button/button.tsx                 | 4 +++-
 core/src/components/card-header/card-header.tsx       | 4 +++-
 core/src/components/card-subtitle/card-subtitle.tsx   | 4 +++-
 core/src/components/card-title/card-title.tsx         | 4 +++-
 core/src/components/card/card.tsx                     | 3 ++-
 core/src/components/checkbox/checkbox.tsx             | 4 +++-
 core/src/components/chip-button/chip-button.tsx       | 3 ++-
 core/src/components/chip-icon/chip-icon.tsx           | 3 ++-
 core/src/components/chip/chip.tsx                     | 4 +++-
 core/src/components/fab-button/fab-button.tsx         | 4 +++-
 core/src/components/item-divider/item-divider.tsx     | 4 +++-
 core/src/components/item-option/item-option.tsx       | 4 +++-
 core/src/components/item/item.tsx                     | 7 ++++---
 core/src/components/label/label.tsx                   | 4 +++-
 core/src/components/list-header/list-header.tsx       | 4 +++-
 core/src/components/menu-button/menu-button.tsx       | 4 +++-
 core/src/components/note/note.tsx                     | 3 ++-
 core/src/components/popover/popover.tsx               | 3 ++-
 core/src/components/radio/radio.tsx                   | 3 ++-
 core/src/components/range/range.tsx                   | 3 ++-
 core/src/components/searchbar/searchbar.tsx           | 4 +++-
 core/src/components/segment-button/segment-button.tsx | 3 ++-
 core/src/components/segment/segment.tsx               | 3 ++-
 core/src/components/spinner/spinner.tsx               | 3 ++-
 core/src/components/tabs/tabs.tsx                     | 3 ++-
 core/src/components/text/text.tsx                     | 3 ++-
 core/src/components/title/title.tsx                   | 3 ++-
 core/src/components/toggle/toggle.tsx                 | 3 ++-
 core/src/components/toolbar/toolbar.tsx               | 3 ++-
 32 files changed, 82 insertions(+), 34 deletions(-)

diff --git a/core/src/components/anchor/anchor.tsx b/core/src/components/anchor/anchor.tsx
index 8959a5c87e..e2812d3b0d 100644
--- a/core/src/components/anchor/anchor.tsx
+++ b/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;
 
diff --git a/core/src/components/back-button/back-button.tsx b/core/src/components/back-button/back-button.tsx
index 2a658c5b20..abf554ae8c 100644
--- a/core/src/components/back-button/back-button.tsx
+++ b/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;
 
diff --git a/core/src/components/badge/badge.tsx b/core/src/components/badge/badge.tsx
index 2f22c46b01..3b23dae77a 100644
--- a/core/src/components/badge/badge.tsx
+++ b/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;
 
diff --git a/core/src/components/button/button.tsx b/core/src/components/button/button.tsx
index 2481c36340..28d6114be3 100644
--- a/core/src/components/button/button.tsx
+++ b/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;
 
diff --git a/core/src/components/card-header/card-header.tsx b/core/src/components/card-header/card-header.tsx
index fb481526c4..9ce76899c2 100644
--- a/core/src/components/card-header/card-header.tsx
+++ b/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;
 
diff --git a/core/src/components/card-subtitle/card-subtitle.tsx b/core/src/components/card-subtitle/card-subtitle.tsx
index ae14bcb3fa..7deac1c587 100644
--- a/core/src/components/card-subtitle/card-subtitle.tsx
+++ b/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;
 
diff --git a/core/src/components/card-title/card-title.tsx b/core/src/components/card-title/card-title.tsx
index 0c2d2e6f93..42a8e4a3db 100644
--- a/core/src/components/card-title/card-title.tsx
+++ b/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;
 
diff --git a/core/src/components/card/card.tsx b/core/src/components/card/card.tsx
index 7febf24036..637911cadd 100644
--- a/core/src/components/card/card.tsx
+++ b/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;
 
diff --git a/core/src/components/checkbox/checkbox.tsx b/core/src/components/checkbox/checkbox.tsx
index 0b8bb796b8..cdac2e4752 100644
--- a/core/src/components/checkbox/checkbox.tsx
+++ b/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;
 
diff --git a/core/src/components/chip-button/chip-button.tsx b/core/src/components/chip-button/chip-button.tsx
index 1ebe7ed0d7..88a94f475b 100644
--- a/core/src/components/chip-button/chip-button.tsx
+++ b/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;
 
diff --git a/core/src/components/chip-icon/chip-icon.tsx b/core/src/components/chip-icon/chip-icon.tsx
index 7aa632329d..71818a998f 100644
--- a/core/src/components/chip-icon/chip-icon.tsx
+++ b/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;
 
diff --git a/core/src/components/chip/chip.tsx b/core/src/components/chip/chip.tsx
index ed2c49c732..a4afeca8cf 100644
--- a/core/src/components/chip/chip.tsx
+++ b/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;
 
diff --git a/core/src/components/fab-button/fab-button.tsx b/core/src/components/fab-button/fab-button.tsx
index 687cf38b56..736ea648a7 100755
--- a/core/src/components/fab-button/fab-button.tsx
+++ b/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;
 
diff --git a/core/src/components/item-divider/item-divider.tsx b/core/src/components/item-divider/item-divider.tsx
index 6f8d8b4ae8..87a091fa37 100644
--- a/core/src/components/item-divider/item-divider.tsx
+++ b/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;
 
diff --git a/core/src/components/item-option/item-option.tsx b/core/src/components/item-option/item-option.tsx
index a10c650ffc..6c5d80600e 100644
--- a/core/src/components/item-option/item-option.tsx
+++ b/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;
 
diff --git a/core/src/components/item/item.tsx b/core/src/components/item/item.tsx
index bc3c644f4d..a08a8d4078 100644
--- a/core/src/components/item/item.tsx
+++ b/core/src/components/item/item.tsx
@@ -15,11 +15,12 @@ export class Item {
 
   @Element() el!: HTMLStencilElement;
 
-  @Prop({ context: 'window' })
-  win!: Window;
+  @Prop({ context: '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;
 
diff --git a/core/src/components/label/label.tsx b/core/src/components/label/label.tsx
index dc9884c1a3..87f8b6f2d8 100644
--- a/core/src/components/label/label.tsx
+++ b/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;
 
diff --git a/core/src/components/list-header/list-header.tsx b/core/src/components/list-header/list-header.tsx
index 411b4c5869..e2fac6fd63 100644
--- a/core/src/components/list-header/list-header.tsx
+++ b/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;
 
diff --git a/core/src/components/menu-button/menu-button.tsx b/core/src/components/menu-button/menu-button.tsx
index 14a3885538..ab122e3acd 100644
--- a/core/src/components/menu-button/menu-button.tsx
+++ b/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;
 
diff --git a/core/src/components/note/note.tsx b/core/src/components/note/note.tsx
index 65ba8c19fc..991bb04401 100644
--- a/core/src/components/note/note.tsx
+++ b/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;
 
diff --git a/core/src/components/popover/popover.tsx b/core/src/components/popover/popover.tsx
index 6555ad47b5..b5a2d2822a 100644
--- a/core/src/components/popover/popover.tsx
+++ b/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;
 
diff --git a/core/src/components/radio/radio.tsx b/core/src/components/radio/radio.tsx
index 5af5e26e05..93e74842a0 100644
--- a/core/src/components/radio/radio.tsx
+++ b/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;
 
diff --git a/core/src/components/range/range.tsx b/core/src/components/range/range.tsx
index 2024a1fcf1..a96978929a 100644
--- a/core/src/components/range/range.tsx
+++ b/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;
 
diff --git a/core/src/components/searchbar/searchbar.tsx b/core/src/components/searchbar/searchbar.tsx
index 66bf4bed5f..276be31274 100644
--- a/core/src/components/searchbar/searchbar.tsx
+++ b/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;
 
diff --git a/core/src/components/segment-button/segment-button.tsx b/core/src/components/segment-button/segment-button.tsx
index 58f943221f..703e349c66 100644
--- a/core/src/components/segment-button/segment-button.tsx
+++ b/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;
 
diff --git a/core/src/components/segment/segment.tsx b/core/src/components/segment/segment.tsx
index b85c545a4a..ab32bbf86c 100644
--- a/core/src/components/segment/segment.tsx
+++ b/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;
 
diff --git a/core/src/components/spinner/spinner.tsx b/core/src/components/spinner/spinner.tsx
index e3c81ad692..200a388ad0 100644
--- a/core/src/components/spinner/spinner.tsx
+++ b/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;
 
diff --git a/core/src/components/tabs/tabs.tsx b/core/src/components/tabs/tabs.tsx
index 367e1765e3..31bfe79add 100644
--- a/core/src/components/tabs/tabs.tsx
+++ b/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;
 
diff --git a/core/src/components/text/text.tsx b/core/src/components/text/text.tsx
index ce791c34cf..4a4f3f1299 100644
--- a/core/src/components/text/text.tsx
+++ b/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;
 
diff --git a/core/src/components/title/title.tsx b/core/src/components/title/title.tsx
index 277e61743a..30b410ec59 100644
--- a/core/src/components/title/title.tsx
+++ b/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;
 
diff --git a/core/src/components/toggle/toggle.tsx b/core/src/components/toggle/toggle.tsx
index d29f06ffa6..62072d68ef 100644
--- a/core/src/components/toggle/toggle.tsx
+++ b/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;
 
diff --git a/core/src/components/toolbar/toolbar.tsx b/core/src/components/toolbar/toolbar.tsx
index dfb2150ebb..e6f73e0b12 100644
--- a/core/src/components/toolbar/toolbar.tsx
+++ b/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;