diff --git a/packages/core/src/components/badge/badge.tsx b/packages/core/src/components/badge/badge.tsx
index 9cc46ed260..3fd781fa45 100644
--- a/packages/core/src/components/badge/badge.tsx
+++ b/packages/core/src/components/badge/badge.tsx
@@ -15,7 +15,7 @@ export class Badge {
 
   /**
    * 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).
    */
   @Prop() color: string;
diff --git a/packages/core/src/components/badge/readme.md b/packages/core/src/components/badge/readme.md
index 2ecdad13c9..592cc05b9f 100644
--- a/packages/core/src/components/badge/readme.md
+++ b/packages/core/src/components/badge/readme.md
@@ -32,7 +32,7 @@ Badges are inline block elements that usually appear near another element. Typic
 string
 
 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).
 
 
@@ -52,7 +52,7 @@ For more information, see [Platform Styles](/docs/theming/platform-specific-styl
 string
 
 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).
 
 
diff --git a/packages/core/src/components/button/button.tsx b/packages/core/src/components/button/button.tsx
index 1d8da5f8e3..9b2dd964b3 100644
--- a/packages/core/src/components/button/button.tsx
+++ b/packages/core/src/components/button/button.tsx
@@ -70,7 +70,7 @@ export class Button {
 
   /**
    * 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).
    */
   @Prop() color: string;
diff --git a/packages/core/src/components/button/readme.md b/packages/core/src/components/button/readme.md
index 0f55e62c90..e03ee1f1db 100644
--- a/packages/core/src/components/button/readme.md
+++ b/packages/core/src/components/button/readme.md
@@ -91,7 +91,7 @@ Possible values are: `"button"`, `"bar-button"`.
 string
 
 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).
 
 
@@ -182,7 +182,7 @@ Possible values are: `"button"`, `"bar-button"`.
 string
 
 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).
 
 
diff --git a/packages/core/src/components/button/test/standalone/index.html b/packages/core/src/components/button/test/standalone/index.html
index 6af368b6cc..e174ea7734 100644
--- a/packages/core/src/components/button/test/standalone/index.html
+++ b/packages/core/src/components/button/test/standalone/index.html
@@ -20,41 +20,23 @@
     <ion-button color="medium">Medium</ion-button>
     <ion-button color="dark">Dark</ion-button>
   </p>
-
   <p>
-    <ion-button fill="outline" color="primary">Primary</ion-button>
-    <ion-button fill="outline" color="secondary">Secondary</ion-button>
-    <ion-button fill="outline" color="tertiary">Tertiary</ion-button>
-    <ion-button fill="outline" color="success">Success</ion-button>
-    <ion-button fill="outline" color="warning">Warning</ion-button>
-    <ion-button fill="outline" color="danger">Danger</ion-button>
-    <ion-button fill="outline" color="light">Light</ion-button>
-    <ion-button fill="outline" color="medium">Medium</ion-button>
-    <ion-button fill="outline" color="dark">Dark</ion-button>
+    <ion-badge color="primary">Primary</ion-badge>
+    <ion-badge color="secondary">Secondary</ion-badge>
+    <ion-badge color="tertiary">Tertiary</ion-badge>
+    <ion-badge color="success">Success</ion-badge>
+    <ion-badge color="warning">Warning</ion-badge>
+    <ion-badge color="danger">Danger</ion-badge>
+    <ion-badge color="light">Light</ion-badge>
+    <ion-badge color="medium">Medium</ion-badge>
+    <ion-badge color="dark">Dark</ion-badge>
   </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>
-    <ion-button expand="block" color="light">Light</ion-button>
-    <ion-button expand="block" color="medium">Medium</ion-button>
-    <ion-button expand="block" color="dark">Dark</ion-button>
-  </p>
-
-  <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>
+  <style>
+    ion-button {
+      --ion-color-primary: rgba(#000000, 0.871);
+    }
+  </style>
 </body>
 </html>
diff --git a/packages/core/src/components/card-content/card-content.tsx b/packages/core/src/components/card-content/card-content.tsx
index 4d77c34595..4ad0b0e696 100644
--- a/packages/core/src/components/card-content/card-content.tsx
+++ b/packages/core/src/components/card-content/card-content.tsx
@@ -13,7 +13,7 @@ import { Component, Prop } from '@stencil/core';
 export class CardContent {
   /**
    * 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;
 
diff --git a/packages/core/src/components/card-content/readme.md b/packages/core/src/components/card-content/readme.md
index 5b343375f8..eda1681ff7 100644
--- a/packages/core/src/components/card-content/readme.md
+++ b/packages/core/src/components/card-content/readme.md
@@ -14,7 +14,7 @@ It is recommended that any text content for a card should be placed in an `ion-c
 string
 
 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
@@ -32,7 +32,7 @@ Possible values are: `"ios"` or `"md"`.
 string
 
 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
diff --git a/packages/core/src/components/card-header/card-header.tsx b/packages/core/src/components/card-header/card-header.tsx
index 70a7563038..6f49e8949f 100644
--- a/packages/core/src/components/card-header/card-header.tsx
+++ b/packages/core/src/components/card-header/card-header.tsx
@@ -15,7 +15,7 @@ import { createThemedClasses } from '../../utils/theme';
 export class CardHeader {
   /**
    * 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;
 
diff --git a/packages/core/src/components/card-header/readme.md b/packages/core/src/components/card-header/readme.md
index eb92389904..a33c608d6b 100644
--- a/packages/core/src/components/card-header/readme.md
+++ b/packages/core/src/components/card-header/readme.md
@@ -12,7 +12,7 @@
 string
 
 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
@@ -37,7 +37,7 @@ If true, the card header will be translucent. Defaults to `false`.
 string
 
 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
diff --git a/packages/core/src/components/card-subtitle/card-subtitle.tsx b/packages/core/src/components/card-subtitle/card-subtitle.tsx
index fec6f0f1c0..9706e603f8 100644
--- a/packages/core/src/components/card-subtitle/card-subtitle.tsx
+++ b/packages/core/src/components/card-subtitle/card-subtitle.tsx
@@ -14,7 +14,7 @@ import { Component, Prop} from '@stencil/core';
 export class CardSubtitle {
   /**
    * 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;
 
diff --git a/packages/core/src/components/card-subtitle/readme.md b/packages/core/src/components/card-subtitle/readme.md
index d215e2e6ba..8e02db23db 100644
--- a/packages/core/src/components/card-subtitle/readme.md
+++ b/packages/core/src/components/card-subtitle/readme.md
@@ -12,7 +12,7 @@
 string
 
 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
@@ -30,7 +30,7 @@ Possible values are: `"ios"` or `"md"`.
 string
 
 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
diff --git a/packages/core/src/components/card-title/card-title.tsx b/packages/core/src/components/card-title/card-title.tsx
index 0ee498c150..b18563af54 100644
--- a/packages/core/src/components/card-title/card-title.tsx
+++ b/packages/core/src/components/card-title/card-title.tsx
@@ -15,7 +15,7 @@ export class CardTitle {
 
   /**
    * 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;
 
diff --git a/packages/core/src/components/card-title/readme.md b/packages/core/src/components/card-title/readme.md
index ab52c761d0..6c718fa8c6 100644
--- a/packages/core/src/components/card-title/readme.md
+++ b/packages/core/src/components/card-title/readme.md
@@ -13,7 +13,7 @@
 string
 
 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
@@ -31,7 +31,7 @@ Possible values are: `"ios"` or `"md"`.
 string
 
 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
diff --git a/packages/core/src/components/card/card.tsx b/packages/core/src/components/card/card.tsx
index 2af5644296..af6ba703d9 100644
--- a/packages/core/src/components/card/card.tsx
+++ b/packages/core/src/components/card/card.tsx
@@ -14,7 +14,7 @@ export class Card {
 
   /**
    * 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;
 
diff --git a/packages/core/src/components/card/readme.md b/packages/core/src/components/card/readme.md
index 0a66597d7c..c3c1c0ca6d 100644
--- a/packages/core/src/components/card/readme.md
+++ b/packages/core/src/components/card/readme.md
@@ -16,7 +16,7 @@ sub-components to reflect this. Please see `ion-card-content`,
 string
 
 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
@@ -34,7 +34,7 @@ Possible values are: `"ios"` or `"md"`.
 string
 
 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
diff --git a/packages/core/src/components/checkbox/checkbox.tsx b/packages/core/src/components/checkbox/checkbox.tsx
index f36c90d258..528535940c 100644
--- a/packages/core/src/components/checkbox/checkbox.tsx
+++ b/packages/core/src/components/checkbox/checkbox.tsx
@@ -22,7 +22,7 @@ export class Checkbox implements CheckboxInput {
 
   /**
    * 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;
 
diff --git a/packages/core/src/components/checkbox/readme.md b/packages/core/src/components/checkbox/readme.md
index 98949972ea..f35d482c02 100644
--- a/packages/core/src/components/checkbox/readme.md
+++ b/packages/core/src/components/checkbox/readme.md
@@ -57,7 +57,7 @@ If true, the checkbox is selected. Defaults to `false`.
 string
 
 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
@@ -103,7 +103,7 @@ If true, the checkbox is selected. Defaults to `false`.
 string
 
 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
diff --git a/packages/core/src/components/chip-button/chip-button.tsx b/packages/core/src/components/chip-button/chip-button.tsx
index 9c347a7913..a379f7139a 100644
--- a/packages/core/src/components/chip-button/chip-button.tsx
+++ b/packages/core/src/components/chip-button/chip-button.tsx
@@ -13,7 +13,7 @@ export class ChipButton {
 
   /**
    * 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;
 
diff --git a/packages/core/src/components/chip-button/readme.md b/packages/core/src/components/chip-button/readme.md
index a3368027e3..50ca0df510 100644
--- a/packages/core/src/components/chip-button/readme.md
+++ b/packages/core/src/components/chip-button/readme.md
@@ -43,7 +43,7 @@ A chip-button is an inset button that is placed inside of a chip.
 string
 
 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
@@ -83,7 +83,7 @@ Possible values are: `"ios"` or `"md"`.
 string
 
 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
diff --git a/packages/core/src/components/chip/chip.tsx b/packages/core/src/components/chip/chip.tsx
index c672232db5..5c8cf878c3 100644
--- a/packages/core/src/components/chip/chip.tsx
+++ b/packages/core/src/components/chip/chip.tsx
@@ -14,7 +14,7 @@ import { Component, Prop } from '@stencil/core';
 export class Chip {
   /**
    * 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;
 
diff --git a/packages/core/src/components/chip/readme.md b/packages/core/src/components/chip/readme.md
index a19b9d49c2..8763dc3030 100644
--- a/packages/core/src/components/chip/readme.md
+++ b/packages/core/src/components/chip/readme.md
@@ -63,7 +63,7 @@ Chips represent complex entities in small blocks, such as a contact. A chip can
 string
 
 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
@@ -81,7 +81,7 @@ Possible values are: `"ios"` or `"md"`.
 string
 
 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
diff --git a/packages/core/src/components/fab-button/fab-button.tsx b/packages/core/src/components/fab-button/fab-button.tsx
index 45aec7bc94..f6f4d972ce 100755
--- a/packages/core/src/components/fab-button/fab-button.tsx
+++ b/packages/core/src/components/fab-button/fab-button.tsx
@@ -14,7 +14,7 @@ export class FabButton {
 
   /**
    * 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).
    */
   @Prop() color: string;
diff --git a/packages/core/src/components/fab-button/readme.md b/packages/core/src/components/fab-button/readme.md
index a1e010bb98..b1fa421757 100644
--- a/packages/core/src/components/fab-button/readme.md
+++ b/packages/core/src/components/fab-button/readme.md
@@ -48,7 +48,7 @@ boolean
 string
 
 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).
 
 
@@ -105,7 +105,7 @@ boolean
 string
 
 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).
 
 
diff --git a/packages/core/src/components/item-divider/item-divider.tsx b/packages/core/src/components/item-divider/item-divider.tsx
index c612427945..4472b82096 100644
--- a/packages/core/src/components/item-divider/item-divider.tsx
+++ b/packages/core/src/components/item-divider/item-divider.tsx
@@ -16,7 +16,7 @@ export class ItemDivider {
 
   /**
    * 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).
    */
   @Prop() color: string;
diff --git a/packages/core/src/components/item-divider/readme.md b/packages/core/src/components/item-divider/readme.md
index f66920317e..cf8d41088b 100644
--- a/packages/core/src/components/item-divider/readme.md
+++ b/packages/core/src/components/item-divider/readme.md
@@ -12,7 +12,7 @@
 string
 
 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).
 
 
@@ -32,7 +32,7 @@ For more information, see [Platform Styles](/docs/theming/platform-specific-styl
 string
 
 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).
 
 
diff --git a/packages/core/src/components/item-option/item-option.tsx b/packages/core/src/components/item-option/item-option.tsx
index 8a0b5b1302..af6cebf7a6 100644
--- a/packages/core/src/components/item-option/item-option.tsx
+++ b/packages/core/src/components/item-option/item-option.tsx
@@ -14,7 +14,7 @@ import { Component, Prop } from '@stencil/core';
 export class ItemOption {
   /**
    * 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).
    */
   @Prop() color: string;
diff --git a/packages/core/src/components/item-option/readme.md b/packages/core/src/components/item-option/readme.md
index b2dc0b45e0..8a06de7d3c 100644
--- a/packages/core/src/components/item-option/readme.md
+++ b/packages/core/src/components/item-option/readme.md
@@ -15,7 +15,7 @@ action for the item.
 string
 
 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).
 
 
@@ -57,7 +57,7 @@ For more information, see [Platform Styles](/docs/theming/platform-specific-styl
 string
 
 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).
 
 
diff --git a/packages/core/src/components/item/item.tsx b/packages/core/src/components/item/item.tsx
index 6bf1d01ab3..d937eb9ee3 100644
--- a/packages/core/src/components/item/item.tsx
+++ b/packages/core/src/components/item/item.tsx
@@ -19,7 +19,7 @@ export class Item {
 
   /**
    * 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).
    */
   @Prop() color: string;
diff --git a/packages/core/src/components/item/readme.md b/packages/core/src/components/item/readme.md
index 64a02f9219..a05f1f030a 100644
--- a/packages/core/src/components/item/readme.md
+++ b/packages/core/src/components/item/readme.md
@@ -12,7 +12,7 @@
 string
 
 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).
 
 
@@ -71,7 +71,7 @@ If true, a button tag will be rendered. Defaults to `false`.
 string
 
 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).
 
 
diff --git a/packages/core/src/components/label/label.tsx b/packages/core/src/components/label/label.tsx
index e4a894504d..63caf8b8ef 100644
--- a/packages/core/src/components/label/label.tsx
+++ b/packages/core/src/components/label/label.tsx
@@ -23,7 +23,7 @@ export class Label {
 
   /**
    * 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).
    */
   @Prop() color: string;
diff --git a/packages/core/src/components/label/readme.md b/packages/core/src/components/label/readme.md
index f32971be86..4a1118005c 100644
--- a/packages/core/src/components/label/readme.md
+++ b/packages/core/src/components/label/readme.md
@@ -12,7 +12,7 @@
 string
 
 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).
 
 
@@ -53,7 +53,7 @@ If true, the label will be stacked above an input. Defaults to `false`.
 string
 
 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).
 
 
diff --git a/packages/core/src/components/list-header/list-header.tsx b/packages/core/src/components/list-header/list-header.tsx
index 1e9f7dab8a..cef47c7d69 100644
--- a/packages/core/src/components/list-header/list-header.tsx
+++ b/packages/core/src/components/list-header/list-header.tsx
@@ -15,7 +15,7 @@ export class ListHeader {
 
   /**
    * 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).
    */
   @Prop() color: string;
diff --git a/packages/core/src/components/list-header/readme.md b/packages/core/src/components/list-header/readme.md
index 6cc2bbb3db..7db7d3b518 100644
--- a/packages/core/src/components/list-header/readme.md
+++ b/packages/core/src/components/list-header/readme.md
@@ -12,7 +12,7 @@
 string
 
 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).
 
 
@@ -32,7 +32,7 @@ For more information, see [Platform Styles](/docs/theming/platform-specific-styl
 string
 
 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).
 
 
diff --git a/packages/core/src/components/modal/modal.tsx b/packages/core/src/components/modal/modal.tsx
index 5b0abe425b..2d5950fd07 100644
--- a/packages/core/src/components/modal/modal.tsx
+++ b/packages/core/src/components/modal/modal.tsx
@@ -37,7 +37,7 @@ export class Modal {
 
   /**
    * 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).
    */
   @Prop() color: string;
diff --git a/packages/core/src/components/modal/readme.md b/packages/core/src/components/modal/readme.md
index 3b88a16414..36a2f5c77e 100644
--- a/packages/core/src/components/modal/readme.md
+++ b/packages/core/src/components/modal/readme.md
@@ -53,7 +53,7 @@ async function presentModal() {
 string
 
 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).
 
 
@@ -135,7 +135,7 @@ If true, the modal will animate. Defaults to `true`.
 string
 
 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).
 
 
diff --git a/packages/core/src/components/note/note.tsx b/packages/core/src/components/note/note.tsx
index 123636f1f6..b6afadd73b 100644
--- a/packages/core/src/components/note/note.tsx
+++ b/packages/core/src/components/note/note.tsx
@@ -15,7 +15,7 @@ export class Note {
 
   /**
    * 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).
    */
   @Prop() color: string;
diff --git a/packages/core/src/components/note/readme.md b/packages/core/src/components/note/readme.md
index b0801f1112..bbecdc80e7 100644
--- a/packages/core/src/components/note/readme.md
+++ b/packages/core/src/components/note/readme.md
@@ -38,7 +38,7 @@ Notes are text elements generally used as subtitles that provide more informatio
 string
 
 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).
 
 
@@ -58,7 +58,7 @@ For more information, see [Platform Styles](/docs/theming/platform-specific-styl
 string
 
 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).
 
 
diff --git a/packages/core/src/components/popover/popover.tsx b/packages/core/src/components/popover/popover.tsx
index 5673176e9c..c91ca4ba3f 100644
--- a/packages/core/src/components/popover/popover.tsx
+++ b/packages/core/src/components/popover/popover.tsx
@@ -35,7 +35,7 @@ export class Popover {
 
   /**
    * 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).
    */
   @Prop() color: string;
diff --git a/packages/core/src/components/popover/readme.md b/packages/core/src/components/popover/readme.md
index 83abc2995b..12e73c7a76 100644
--- a/packages/core/src/components/popover/readme.md
+++ b/packages/core/src/components/popover/readme.md
@@ -33,7 +33,7 @@ async function presentPopover() {
 string
 
 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).
 
 
@@ -129,7 +129,7 @@ If true, the popover will animate. Defaults to `true`.
 string
 
 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).
 
 
diff --git a/packages/core/src/components/radio/radio.tsx b/packages/core/src/components/radio/radio.tsx
index 630db32911..bd889d26ab 100644
--- a/packages/core/src/components/radio/radio.tsx
+++ b/packages/core/src/components/radio/radio.tsx
@@ -25,7 +25,7 @@ export class Radio implements RadioButtonInput, ComponentDidLoad, ComponentDidUn
 
   /**
    * 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).
    */
   @Prop() color: string;
diff --git a/packages/core/src/components/radio/readme.md b/packages/core/src/components/radio/readme.md
index f57d3964d0..12a269e5ea 100644
--- a/packages/core/src/components/radio/readme.md
+++ b/packages/core/src/components/radio/readme.md
@@ -48,7 +48,7 @@ If true, the radio is selected. Defaults to `false`.
 string
 
 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).
 
 
@@ -96,7 +96,7 @@ If true, the radio is selected. Defaults to `false`.
 string
 
 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).
 
 
diff --git a/packages/core/src/components/range/range.tsx b/packages/core/src/components/range/range.tsx
index 768be027ca..ad37ddb1af 100644
--- a/packages/core/src/components/range/range.tsx
+++ b/packages/core/src/components/range/range.tsx
@@ -64,7 +64,7 @@ export class Range implements BaseInputComponent {
 
   /**
    * 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).
    */
   @Prop() color: string;
diff --git a/packages/core/src/components/range/readme.md b/packages/core/src/components/range/readme.md
index 9c4624b2d7..ea1976ece2 100644
--- a/packages/core/src/components/range/readme.md
+++ b/packages/core/src/components/range/readme.md
@@ -12,7 +12,7 @@
 string
 
 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).
 
 
@@ -96,7 +96,7 @@ the value of the range.
 string
 
 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).
 
 
diff --git a/packages/core/src/components/searchbar/readme.md b/packages/core/src/components/searchbar/readme.md
index 574f909a7b..8202e5bf72 100644
--- a/packages/core/src/components/searchbar/readme.md
+++ b/packages/core/src/components/searchbar/readme.md
@@ -74,7 +74,7 @@ Set the the cancel button text. Default: `"Cancel"`.
 string
 
 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).
 
 
@@ -164,7 +164,7 @@ Set the the cancel button text. Default: `"Cancel"`.
 string
 
 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).
 
 
diff --git a/packages/core/src/components/searchbar/searchbar.tsx b/packages/core/src/components/searchbar/searchbar.tsx
index c1ee94ea9b..730b8d0183 100644
--- a/packages/core/src/components/searchbar/searchbar.tsx
+++ b/packages/core/src/components/searchbar/searchbar.tsx
@@ -27,7 +27,7 @@ export class Searchbar {
 
   /**
    * 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).
    */
   @Prop() color: string;
diff --git a/packages/core/src/components/segment-button/readme.md b/packages/core/src/components/segment-button/readme.md
index 7abe1b3f73..aac510ab44 100644
--- a/packages/core/src/components/segment-button/readme.md
+++ b/packages/core/src/components/segment-button/readme.md
@@ -72,7 +72,7 @@ If true, the segment button is selected. Defaults to `false`.
 string
 
 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
@@ -122,7 +122,7 @@ If true, the segment button is selected. Defaults to `false`.
 string
 
 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
diff --git a/packages/core/src/components/segment-button/segment-button.tsx b/packages/core/src/components/segment-button/segment-button.tsx
index 8ec8e22338..0834975673 100644
--- a/packages/core/src/components/segment-button/segment-button.tsx
+++ b/packages/core/src/components/segment-button/segment-button.tsx
@@ -19,7 +19,7 @@ export class SegmentButton {
 
   /**
    * 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;
 
diff --git a/packages/core/src/components/segment/readme.md b/packages/core/src/components/segment/readme.md
index 6aa3e1044c..dec90a940b 100644
--- a/packages/core/src/components/segment/readme.md
+++ b/packages/core/src/components/segment/readme.md
@@ -72,7 +72,7 @@ Their functionality is similar to tabs, where selecting one will deselect all ot
 string
 
 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
@@ -102,7 +102,7 @@ the value of the segment.
 string
 
 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
diff --git a/packages/core/src/components/segment/segment.tsx b/packages/core/src/components/segment/segment.tsx
index d0f9713b6b..1cedc7bc37 100644
--- a/packages/core/src/components/segment/segment.tsx
+++ b/packages/core/src/components/segment/segment.tsx
@@ -16,7 +16,7 @@ export class Segment {
 
   /**
    * 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;
 
diff --git a/packages/core/src/components/spinner/readme.md b/packages/core/src/components/spinner/readme.md
index a5bee1d524..f3faf36558 100644
--- a/packages/core/src/components/spinner/readme.md
+++ b/packages/core/src/components/spinner/readme.md
@@ -41,7 +41,7 @@ The default spinner to use is based on the platform. The default spinner for `io
 string
 
 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).
 
 
@@ -84,7 +84,7 @@ If true, the spinner's animation will be paused. Defaults to `false`.
 string
 
 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).
 
 
diff --git a/packages/core/src/components/spinner/spinner.tsx b/packages/core/src/components/spinner/spinner.tsx
index 1b2168a822..e1547bb8c1 100644
--- a/packages/core/src/components/spinner/spinner.tsx
+++ b/packages/core/src/components/spinner/spinner.tsx
@@ -19,7 +19,7 @@ export class Spinner {
 
   /**
    * 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).
    */
   @Prop() color: string;
diff --git a/packages/core/src/components/tabs/readme.md b/packages/core/src/components/tabs/readme.md
index b3e51dbc69..6fbb10994c 100644
--- a/packages/core/src/components/tabs/readme.md
+++ b/packages/core/src/components/tabs/readme.md
@@ -95,7 +95,7 @@ components to switch to `TabsRoot3`:
 string
 
 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).
 
 
@@ -156,7 +156,7 @@ Defaults to `false`.
 string
 
 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).
 
 
diff --git a/packages/core/src/components/tabs/tabs.tsx b/packages/core/src/components/tabs/tabs.tsx
index 895a218a27..bf82e660c3 100644
--- a/packages/core/src/components/tabs/tabs.tsx
+++ b/packages/core/src/components/tabs/tabs.tsx
@@ -23,7 +23,7 @@ export class Tabs implements NavOutlet {
 
   /**
    * 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).
    */
   @Prop() color: string;
diff --git a/packages/core/src/components/text/readme.md b/packages/core/src/components/text/readme.md
index 46a9cc71ee..164d679380 100644
--- a/packages/core/src/components/text/readme.md
+++ b/packages/core/src/components/text/readme.md
@@ -44,7 +44,7 @@ The text component is a simple component that can be used to style the text colo
 string
 
 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).
 
 
@@ -64,7 +64,7 @@ For more information, see [Platform Styles](/docs/theming/platform-specific-styl
 string
 
 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).
 
 
diff --git a/packages/core/src/components/text/text.tsx b/packages/core/src/components/text/text.tsx
index fc2b44816f..5ba756e9b3 100644
--- a/packages/core/src/components/text/text.tsx
+++ b/packages/core/src/components/text/text.tsx
@@ -15,7 +15,7 @@ export class Text {
 
   /**
    * 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).
    */
   @Prop() color: string;
diff --git a/packages/core/src/components/toggle/readme.md b/packages/core/src/components/toggle/readme.md
index cc1148c911..252829817b 100644
--- a/packages/core/src/components/toggle/readme.md
+++ b/packages/core/src/components/toggle/readme.md
@@ -57,7 +57,7 @@ If true, the toggle is selected. Defaults to `false`.
 string
 
 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).
 
 
@@ -105,7 +105,7 @@ If true, the toggle is selected. Defaults to `false`.
 string
 
 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).
 
 
diff --git a/packages/core/src/components/toggle/toggle.tsx b/packages/core/src/components/toggle/toggle.tsx
index 4b6f65ff43..c5e79b0221 100644
--- a/packages/core/src/components/toggle/toggle.tsx
+++ b/packages/core/src/components/toggle/toggle.tsx
@@ -29,7 +29,7 @@ export class Toggle implements CheckboxInput {
 
   /**
    * 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).
    */
   @Prop() color: string;
diff --git a/packages/core/src/components/toolbar/readme.md b/packages/core/src/components/toolbar/readme.md
index d301f945cf..43c9628972 100644
--- a/packages/core/src/components/toolbar/readme.md
+++ b/packages/core/src/components/toolbar/readme.md
@@ -92,7 +92,7 @@ attribute to the element.
 string
 
 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).
 
 
@@ -122,7 +122,7 @@ Defaults to `false`.
 string
 
 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).
 
 
diff --git a/packages/core/src/components/toolbar/toolbar.tsx b/packages/core/src/components/toolbar/toolbar.tsx
index 662e34bc8f..3faff6efd4 100644
--- a/packages/core/src/components/toolbar/toolbar.tsx
+++ b/packages/core/src/components/toolbar/toolbar.tsx
@@ -20,7 +20,7 @@ export class Toolbar {
 
   /**
    * 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).
    */
   @Prop() color: string;