From 67afbe1db92ff00082a7a9b159d1528553d4ab56 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Thu, 22 Feb 2018 12:48:51 -0500
Subject: [PATCH] refactor(theming): update default colors and add examples

closes #13988
---
 .../components/badge/test/basic/index.html    |  56 +++++--
 .../badge/test/standalone/index.html          |  16 +-
 .../components/button/test/anchor/index.html  |  25 ++-
 .../components/button/test/basic/index.html   |  24 ++-
 .../components/button/test/fill/index.html    | 148 ++++++++++++------
 .../components/button/test/round/index.html   |  40 +++--
 .../button/test/standalone/index.html         |  53 ++++++-
 .../components/checkbox/test/basic/index.html |  36 ++++-
 .../checkbox/test/standalone/index.html       |  21 ++-
 .../src/components/note/test/basic/index.html |  77 +++++++--
 .../note/test/standalone/index.html           |   8 +-
 .../radio-group/test/standalone/index.html    |  17 +-
 .../radio/test/standalone/index.html          |  50 ++++--
 .../searchbar/test/toolbar/index.html         |  25 ++-
 .../src/components/text/test/basic/index.html |   2 +-
 .../toggle/test/standalone/index.html         |  22 ++-
 .../components/toolbar/test/colors/index.html |  12 ++
 .../toolbar/test/standalone/index.html        |  12 ++
 .../toolbar/test/translucent/index.html       |  25 ++-
 .../core/src/themes/ionic.theme.default.scss  |  12 +-
 20 files changed, 510 insertions(+), 171 deletions(-)

diff --git a/packages/core/src/components/badge/test/basic/index.html b/packages/core/src/components/badge/test/basic/index.html
index 228a464937..0d2fbb2b81 100644
--- a/packages/core/src/components/badge/test/basic/index.html
+++ b/packages/core/src/components/badge/test/basic/index.html
@@ -21,28 +21,44 @@
         <ion-list>
           <ion-list-header>Badges Right</ion-list-header>
           <ion-item>
-            <ion-badge slot="end">99</ion-badge>
             <ion-label>Default Badge</ion-label>
+            <ion-badge slot="end">00</ion-badge>
           </ion-item>
           <ion-item>
-            <ion-badge slot="end" color="primary">99</ion-badge>
             <ion-label>Primary Badge</ion-label>
+            <ion-badge slot="end" color="primary">11</ion-badge>
           </ion-item>
           <ion-item>
-            <ion-badge slot="end" color="secondary">99</ion-badge>
             <ion-label>Secondary Badge</ion-label>
+            <ion-badge slot="end" color="secondary">22</ion-badge>
+          </ion-item>
+          <ion-item>
+            <ion-label>Tertiary Badge</ion-label>
+            <ion-badge slot="end" color="tertiary">33</ion-badge>
+          </ion-item>
+          <ion-item>
+            <ion-label>Success Badge</ion-label>
+            <ion-badge slot="end" color="success">44</ion-badge>
+          </ion-item>
+          <ion-item>
+            <ion-label>Warning Badge</ion-label>
+            <ion-badge slot="end" color="warning">55</ion-badge>
           </ion-item>
           <ion-item>
-            <ion-badge slot="end" color="danger">99</ion-badge>
             <ion-label>Danger Badge</ion-label>
+            <ion-badge slot="end" color="danger">66</ion-badge>
           </ion-item>
           <ion-item>
-            <ion-badge slot="end" color="light">99</ion-badge>
             <ion-label>Light Badge</ion-label>
+            <ion-badge slot="end" color="light">77</ion-badge>
+          </ion-item>
+          <ion-item>
+            <ion-label>Medium Badge</ion-label>
+            <ion-badge slot="end" color="medium">88</ion-badge>
           </ion-item>
           <ion-item>
-            <ion-badge slot="end" color="dark">99</ion-badge>
             <ion-label>Dark Badge</ion-label>
+            <ion-badge slot="end" color="dark">99</ion-badge>
           </ion-item>
           <ion-item onclick="toggleColor()">
             <ion-badge id="toggleColor" slot="end" color="primary">primary</ion-badge>
@@ -53,28 +69,44 @@
         <ion-list>
           <ion-list-header>Badges Left</ion-list-header>
           <ion-item>
-            <ion-badge slot="start">99</ion-badge>
             <ion-label>Default Badge</ion-label>
+            <ion-badge slot="start">00</ion-badge>
           </ion-item>
           <ion-item>
-            <ion-badge slot="start" color="primary">99</ion-badge>
             <ion-label>Primary Badge</ion-label>
+            <ion-badge slot="start" color="primary">11</ion-badge>
           </ion-item>
           <ion-item>
-            <ion-badge slot="start" color="secondary">99</ion-badge>
             <ion-label>Secondary Badge</ion-label>
+            <ion-badge slot="start" color="secondary">22</ion-badge>
+          </ion-item>
+          <ion-item>
+            <ion-label>Tertiary Badge</ion-label>
+            <ion-badge slot="start" color="tertiary">33</ion-badge>
+          </ion-item>
+          <ion-item>
+            <ion-label>Success Badge</ion-label>
+            <ion-badge slot="start" color="success">44</ion-badge>
+          </ion-item>
+          <ion-item>
+            <ion-label>Warning Badge</ion-label>
+            <ion-badge slot="start" color="warning">55</ion-badge>
           </ion-item>
           <ion-item>
-            <ion-badge slot="start" color="danger">99</ion-badge>
             <ion-label>Danger Badge</ion-label>
+            <ion-badge slot="start" color="danger">66</ion-badge>
           </ion-item>
           <ion-item>
-            <ion-badge slot="start" color="light">99</ion-badge>
             <ion-label>Light Badge</ion-label>
+            <ion-badge slot="start" color="light">77</ion-badge>
+          </ion-item>
+          <ion-item>
+            <ion-label>Medium Badge</ion-label>
+            <ion-badge slot="start" color="medium">88</ion-badge>
           </ion-item>
           <ion-item>
-            <ion-badge slot="start" color="dark">99</ion-badge>
             <ion-label>Dark Badge</ion-label>
+            <ion-badge slot="start" color="dark">99</ion-badge>
           </ion-item>
         </ion-list>
       </ion-content>
diff --git a/packages/core/src/components/badge/test/standalone/index.html b/packages/core/src/components/badge/test/standalone/index.html
index 504b1872be..e338f881ed 100644
--- a/packages/core/src/components/badge/test/standalone/index.html
+++ b/packages/core/src/components/badge/test/standalone/index.html
@@ -9,12 +9,18 @@
 </head>
 
 <body>
+  <!-- Default -->
+  <ion-badge>99</ion-badge>
+
+  <!-- Colors -->
   <ion-badge color="primary">11</ion-badge>
   <ion-badge color="secondary">22</ion-badge>
-  <ion-badge color="warning">33</ion-badge>
-  <ion-badge color="danger">44</ion-badge>
-  <ion-badge color="light">55</ion-badge>
-  <ion-badge color="dark">66</ion-badge>
-  <ion-badge>99</ion-badge>
+  <ion-badge color="tertiary">33</ion-badge>
+  <ion-badge color="success">44</ion-badge>
+  <ion-badge color="warning">55</ion-badge>
+  <ion-badge color="danger">66</ion-badge>
+  <ion-badge color="light">77</ion-badge>
+  <ion-badge color="medium">88</ion-badge>
+  <ion-badge color="dark">99</ion-badge>
 </body>
 </html>
diff --git a/packages/core/src/components/button/test/anchor/index.html b/packages/core/src/components/button/test/anchor/index.html
index 6fcb095f82..df31899846 100644
--- a/packages/core/src/components/button/test/anchor/index.html
+++ b/packages/core/src/components/button/test/anchor/index.html
@@ -22,30 +22,43 @@
           </p>
           <p>
             <ion-button href="#" color="primary">Primary</ion-button>
-            <ion-button href="#" color="primary" class="activated">Primary.activated</ion-button>
+            <ion-button href="#" class="activated" color="primary">Primary.activated</ion-button>
           </p>
           <p>
             <ion-button href="#" color="secondary">Secondary</ion-button>
-            <ion-button href="#" color="secondary" class="activated">Secondary.activated</ion-button>
+            <ion-button href="#" class="activated" color="secondary">Secondary.activated</ion-button>
+          </p>
+          <p>
+            <ion-button href="#" color="tertiary">Tertiary</ion-button>
+            <ion-button href="#" class="activated" color="tertiary">Tertiary.activated</ion-button>
+          </p>
+          <p>
+            <ion-button href="#" color="success">Success</ion-button>
+            <ion-button href="#" class="activated" color="success">Success.activated</ion-button>
           </p>
           <p>
             <ion-button href="#" color="warning">Warning</ion-button>
-            <ion-button href="#" color="warning" class="activated">Warning.activated</ion-button>
+            <ion-button href="#" class="activated" color="warning">Warning.activated</ion-button>
           </p>
           <p>
             <ion-button href="#" color="danger">Danger</ion-button>
-            <ion-button href="#" color="danger" class="activated">Danger.activated</ion-button>
+            <ion-button href="#" class="activated" color="danger">Danger.activated</ion-button>
           </p>
           <p>
             <ion-button href="#" color="light">Light</ion-button>
-            <ion-button href="#" color="light" class="activated">Light.activated</ion-button>
+            <ion-button href="#" class="activated" color="light">Light.activated</ion-button>
+          </p>
+          <p>
+            <ion-button href="#" color="medium">Medium</ion-button>
+            <ion-button href="#" class="activated" color="medium">Medium.activated</ion-button>
           </p>
           <p>
             <ion-button href="#" color="dark">Dark</ion-button>
-            <ion-button href="#" color="dark" class="activated">Dark.activated</ion-button>
+            <ion-button href="#" class="activated" color="dark">Dark.activated</ion-button>
           </p>
           <p>
             <ion-button href="#" disabled>Disabled</ion-button>
+            <ion-button href="#" color="secondary" disabled>Secondary Disabled</ion-button>
           </p>
         </ion-content>
     </ion-page>
diff --git a/packages/core/src/components/button/test/basic/index.html b/packages/core/src/components/button/test/basic/index.html
index 4438d72995..8731872fa6 100644
--- a/packages/core/src/components/button/test/basic/index.html
+++ b/packages/core/src/components/button/test/basic/index.html
@@ -23,37 +23,47 @@
 
         <p>
           <ion-button color="primary">Primary</ion-button>
-          <ion-button color="primary" class="activated">Primary.activated</ion-button>
+          <ion-button class="activated" color="primary">Primary.activated</ion-button>
         </p>
 
         <p>
           <ion-button color="secondary">Secondary</ion-button>
-          <ion-button color="secondary" class="activated">Secondary.activated</ion-button>
+          <ion-button class="activated" color="secondary">Secondary.activated</ion-button>
         </p>
 
         <p>
           <ion-button color="tertiary">Tertiary</ion-button>
-          <ion-button color="tertiary" class="activated">Tertiary.activated</ion-button>
+          <ion-button class="activated" color="tertiary">Tertiary.activated</ion-button>
+        </p>
+
+        <p>
+          <ion-button color="success">Success</ion-button>
+          <ion-button class="activated" color="success">Success.activated</ion-button>
         </p>
 
         <p>
           <ion-button color="warning">Warning</ion-button>
-          <ion-button color="warning" class="activated">Warning.activated</ion-button>
+          <ion-button class="activated" color="warning">Warning.activated</ion-button>
         </p>
 
         <p>
           <ion-button color="danger">Danger</ion-button>
-          <ion-button color="danger" class="activated">Danger.activated</ion-button>
+          <ion-button class="activated" color="danger">Danger.activated</ion-button>
         </p>
 
         <p>
           <ion-button color="light">Light</ion-button>
-          <ion-button color="light" class="activated">Light.activated</ion-button>
+          <ion-button class="activated" color="light">Light.activated</ion-button>
+        </p>
+
+        <p>
+          <ion-button color="medium">Medium</ion-button>
+          <ion-button class="activated" color="medium">Medium.activated</ion-button>
         </p>
 
         <p>
           <ion-button color="dark">Dark</ion-button>
-          <ion-button color="dark" class="activated">Dark.activated</ion-button>
+          <ion-button class="activated" color="dark">Dark.activated</ion-button>
         </p>
 
         <p>
diff --git a/packages/core/src/components/button/test/fill/index.html b/packages/core/src/components/button/test/fill/index.html
index 84ddceb7bc..dd145b4e9d 100644
--- a/packages/core/src/components/button/test/fill/index.html
+++ b/packages/core/src/components/button/test/fill/index.html
@@ -20,61 +20,109 @@
             <ion-button fill="outline">Default</ion-button>
             <ion-button fill="outline" class="activated">Default.activated</ion-button>
           </p>
+
           <p>
             <ion-button fill="outline" color="primary">Primary</ion-button>
-            <ion-button fill="outline" color="primary" class="activated">Primary.activated</ion-button>
-          </p>
-          <p>
-            <ion-button fill="outline" color="secondary">Secondary</ion-button>
-            <ion-button fill="outline" color="secondary" class="activated">Secondary.activated</ion-button>
-          </p>
-          <p>
-            <ion-button fill="outline" color="warning">Warning</ion-button>
-            <ion-button fill="outline" color="warning" class="activated">Warning.activated</ion-button>
-          </p>
-          <p>
-            <ion-button fill="outline" color="danger">Danger</ion-button>
-            <ion-button fill="outline" color="danger" class="activated">Danger.activated</ion-button>
-          </p>
-          <p>
-            <ion-button fill="outline" color="light">Light</ion-button>
-            <ion-button fill="outline" color="light" class="activated">Light.activated</ion-button>
-          </p>
-          <p>
-            <ion-button fill="outline" color="dark">Dark</ion-button>
-            <ion-button fill="outline" color="dark" class="activated">Dark.activated</ion-button>
-          </p>
-          <p>
-            <ion-button fill="outline" disabled>Disabled</ion-button>
+            <ion-button fill="outline" class="activated" color="primary">Primary.activated</ion-button>
           </p>
 
           <p>
-              <ion-button fill="clear">Default</ion-button>
-              <ion-button fill="clear" class="activated">Default.activated</ion-button>
-            </p>
-            <p>
-              <ion-button fill="clear" color="primary">Primary</ion-button>
-              <ion-button fill="clear" color="primary" class="activated">Primary.activated</ion-button>
-            </p>
-            <p>
-              <ion-button fill="clear" color="secondary">Secondary</ion-button>
-              <ion-button fill="clear" color="secondary" class="activated">Secondary.activated</ion-button>
-            </p>
-            <p>
-              <ion-button fill="clear" color="danger">Danger</ion-button>
-              <ion-button fill="clear" color="danger" class="activated">Danger.activated</ion-button>
-            </p>
-            <p>
-              <ion-button fill="clear" color="light">Light</ion-button>
-              <ion-button fill="clear" color="light" class="activated">Light.activated</ion-button>
-            </p>
-            <p>
-              <ion-button fill="clear" color="dark">Dark</ion-button>
-              <ion-button fill="clear" color="dark" class="activated">Dark.activated</ion-button>
-            </p>
-            <p>
-              <ion-button fill="clear" disabled>Disabled</ion-button>
-            </p>
+            <ion-button fill="outline" color="secondary">Secondary</ion-button>
+            <ion-button fill="outline" class="activated" color="secondary">Secondary.activated</ion-button>
+          </p>
+
+          <p>
+            <ion-button fill="outline" color="tertiary">Tertiary</ion-button>
+            <ion-button fill="outline" class="activated" color="tertiary">Tertiary.activated</ion-button>
+          </p>
+
+          <p>
+            <ion-button fill="outline" color="success">Success</ion-button>
+            <ion-button fill="outline" class="activated" color="success">Success.activated</ion-button>
+          </p>
+
+          <p>
+            <ion-button fill="outline" color="warning">Warning</ion-button>
+            <ion-button fill="outline" class="activated" color="warning">Warning.activated</ion-button>
+          </p>
+
+          <p>
+            <ion-button fill="outline" color="danger">Danger</ion-button>
+            <ion-button fill="outline" class="activated" color="danger">Danger.activated</ion-button>
+          </p>
+
+          <p>
+            <ion-button fill="outline" color="light">Light</ion-button>
+            <ion-button fill="outline" class="activated" color="light">Light.activated</ion-button>
+          </p>
+
+          <p>
+            <ion-button fill="outline" color="medium">Medium</ion-button>
+            <ion-button fill="outline" class="activated" color="medium">Medium.activated</ion-button>
+          </p>
+
+          <p>
+            <ion-button fill="outline" color="dark">Dark</ion-button>
+            <ion-button fill="outline" class="activated" color="dark">Dark.activated</ion-button>
+          </p>
+          <p>
+            <ion-button fill="outline" disabled>Disabled</ion-button>
+            <ion-button fill="outline" color="secondary" disabled>Secondary Disabled</ion-button>
+          </p>
+
+          <p>
+            <ion-button fill="clear">Default</ion-button>
+            <ion-button fill="clear" class="activated">Default.activated</ion-button>
+          </p>
+
+          <p>
+            <ion-button fill="clear" color="primary">Primary</ion-button>
+            <ion-button fill="clear" class="activated" color="primary">Primary.activated</ion-button>
+          </p>
+
+          <p>
+            <ion-button fill="clear" color="secondary">Secondary</ion-button>
+            <ion-button fill="clear" class="activated" color="secondary">Secondary.activated</ion-button>
+          </p>
+
+          <p>
+            <ion-button fill="clear" color="tertiary">Tertiary</ion-button>
+            <ion-button fill="clear" class="activated" color="tertiary">Tertiary.activated</ion-button>
+          </p>
+
+          <p>
+            <ion-button fill="clear" color="success">Success</ion-button>
+            <ion-button fill="clear" class="activated" color="success">Success.activated</ion-button>
+          </p>
+
+          <p>
+            <ion-button fill="clear" color="warning">Warning</ion-button>
+            <ion-button fill="clear" class="activated" color="warning">Warning.activated</ion-button>
+          </p>
+
+          <p>
+            <ion-button fill="clear" color="danger">Danger</ion-button>
+            <ion-button fill="clear" class="activated" color="danger">Danger.activated</ion-button>
+          </p>
+
+          <p>
+            <ion-button fill="clear" color="light">Light</ion-button>
+            <ion-button fill="clear" class="activated" color="light">Light.activated</ion-button>
+          </p>
+
+          <p>
+            <ion-button fill="clear" color="medium">Medium</ion-button>
+            <ion-button fill="clear" class="activated" color="medium">Medium.activated</ion-button>
+          </p>
+
+          <p>
+            <ion-button fill="clear" color="dark">Dark</ion-button>
+            <ion-button fill="clear" class="activated" color="dark">Dark.activated</ion-button>
+          </p>
+          <p>
+            <ion-button fill="clear" disabled>Disabled</ion-button>
+            <ion-button fill="clear" color="secondary" disabled>Secondary Disabled</ion-button>
+          </p>
         </ion-content>
     </ion-page>
   </ion-app>
diff --git a/packages/core/src/components/button/test/round/index.html b/packages/core/src/components/button/test/round/index.html
index 1a041584f3..e6e112bac7 100644
--- a/packages/core/src/components/button/test/round/index.html
+++ b/packages/core/src/components/button/test/round/index.html
@@ -16,24 +16,32 @@
       </ion-header>
 
       <ion-content id="content" padding text-center no-bounce>
-        <ion-button round>button</ion-button>
-        <ion-button round color="light">button light</ion-button>
-        <ion-button round color="secondary">button secondary</ion-button>
-        <ion-button round color="warning">button warning</ion-button>
-        <ion-button round color="danger">button danger</ion-button>
-        <ion-button round color="dark">button dark</ion-button>
+        <ion-button round>Default</ion-button>
+        <ion-button round color="primary">Primary</ion-button>
+        <ion-button round color="secondary">Secondary</ion-button>
+        <ion-button round color="tertiary">Tertiary</ion-button>
+        <ion-button round color="success">Success</ion-button>
+        <ion-button round color="warning">Warning</ion-button>
+        <ion-button round color="danger">Danger</ion-button>
+        <ion-button round color="light">Light</ion-button>
+        <ion-button round color="medium">Medium</ion-button>
+        <ion-button round color="dark">Dark</ion-button>
 
-        <ion-button fill="outline" round>button</ion-button>
-        <ion-button fill="outline" round color="light">button light</ion-button>
-        <ion-button fill="outline" round color="secondary">button secondary</ion-button>
-        <ion-button fill="outline" round color="warning">button warning</ion-button>
-        <ion-button fill="outline" round color="danger">button danger</ion-button>
-        <ion-button fill="outline" round color="dark">button dark</ion-button>
+        <ion-button fill="outline" round>Default</ion-button>
+        <ion-button fill="outline" round color="primary">Primary</ion-button>
+        <ion-button fill="outline" round color="secondary">Secondary</ion-button>
+        <ion-button fill="outline" round color="tertiary">Tertiary</ion-button>
+        <ion-button fill="outline" round color="success">Success</ion-button>
+        <ion-button fill="outline" round color="warning">Warning</ion-button>
+        <ion-button fill="outline" round color="danger">Danger</ion-button>
+        <ion-button fill="outline" round color="light">Light</ion-button>
+        <ion-button fill="outline" round color="medium">Medium</ion-button>
+        <ion-button fill="outline" round color="dark">Dark</ion-button>
 
-        <ion-button round fill="clear">clear</ion-button>
-        <ion-button round expand="block" color="danger">block</ion-button>
-        <ion-button round expand="full" color="dark">full</ion-button>
-        <ion-button round strong>strong</ion-button>
+        <ion-button round fill="clear">Clear</ion-button>
+        <ion-button round expand="block" color="danger">Block</ion-button>
+        <ion-button round expand="full" color="dark">Full</ion-button>
+        <ion-button round strong>Strong</ion-button>
       </ion-content>
     </ion-page>
   </ion-app>
diff --git a/packages/core/src/components/button/test/standalone/index.html b/packages/core/src/components/button/test/standalone/index.html
index 10d9cb5de3..6af368b6cc 100644
--- a/packages/core/src/components/button/test/standalone/index.html
+++ b/packages/core/src/components/button/test/standalone/index.html
@@ -9,11 +9,52 @@
 </head>
 
 <body>
-  <ion-button color="primary">Primary</ion-button>
-  <ion-button color="secondary">Secondary</ion-button>
-  <ion-button color="warning">Warning</ion-button>
-  <ion-button color="danger">Danger</ion-button>
-  <ion-button color="light">Light</ion-button>
-  <ion-button color="dark">Dark</ion-button>
+  <p>
+    <ion-button color="primary">Primary</ion-button>
+    <ion-button color="secondary">Secondary</ion-button>
+    <ion-button color="tertiary">Tertiary</ion-button>
+    <ion-button color="success">Success</ion-button>
+    <ion-button color="warning">Warning</ion-button>
+    <ion-button color="danger">Danger</ion-button>
+    <ion-button color="light">Light</ion-button>
+    <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>
+  </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>
 </body>
 </html>
diff --git a/packages/core/src/components/checkbox/test/basic/index.html b/packages/core/src/components/checkbox/test/basic/index.html
index 821181463e..000728e47c 100644
--- a/packages/core/src/components/checkbox/test/basic/index.html
+++ b/packages/core/src/components/checkbox/test/basic/index.html
@@ -20,40 +20,62 @@
           <ion-label>Default</ion-label>
           <ion-checkbox checked></ion-checkbox>
         </ion-item>
+
         <ion-item>
           <ion-label>Primary</ion-label>
-          <ion-checkbox color="primary" checked></ion-checkbox>
+          <ion-checkbox checked color="primary"></ion-checkbox>
         </ion-item>
+
         <ion-item>
           <ion-label>Secondary</ion-label>
-          <ion-checkbox color="secondary" checked></ion-checkbox>
+          <ion-checkbox checked color="secondary"></ion-checkbox>
         </ion-item>
+
+        <ion-item>
+          <ion-label>Tertiary</ion-label>
+          <ion-checkbox checked color="tertiary"></ion-checkbox>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Success</ion-label>
+          <ion-checkbox checked color="success"></ion-checkbox>
+        </ion-item>
+
         <ion-item>
           <ion-label>Warning</ion-label>
-          <ion-checkbox color="warning" checked></ion-checkbox>
+          <ion-checkbox checked color="warning"></ion-checkbox>
         </ion-item>
+
         <ion-item>
           <ion-label>Danger</ion-label>
-          <ion-checkbox color="danger" checked></ion-checkbox>
+          <ion-checkbox checked color="danger"></ion-checkbox>
         </ion-item>
+
         <ion-item>
           <ion-label>Light</ion-label>
-          <ion-checkbox color="light" checked></ion-checkbox>
+          <ion-checkbox checked color="light"></ion-checkbox>
         </ion-item>
+
+        <ion-item>
+          <ion-label>Medium</ion-label>
+          <ion-checkbox checked color="medium"></ion-checkbox>
+        </ion-item>
+
         <ion-item>
           <ion-label>Dark</ion-label>
-          <ion-checkbox color="dark" checked></ion-checkbox>
+          <ion-checkbox checked color="dark"></ion-checkbox>
         </ion-item>
+
         <ion-item>
           <ion-label>Unchecked by Default</ion-label>
           <ion-checkbox></ion-checkbox>
         </ion-item>
+
         <ion-item>
           <ion-label>Disabled</ion-label>
           <ion-checkbox disabled></ion-checkbox>
         </ion-item>
       </ion-content>
-
     </ion-page>
   </ion-app>
 </body>
diff --git a/packages/core/src/components/checkbox/test/standalone/index.html b/packages/core/src/components/checkbox/test/standalone/index.html
index 5812fefc43..c263f80497 100644
--- a/packages/core/src/components/checkbox/test/standalone/index.html
+++ b/packages/core/src/components/checkbox/test/standalone/index.html
@@ -9,13 +9,22 @@
 </head>
 
 <body>
+  <!-- Default -->
   <ion-checkbox checked></ion-checkbox>
-  <ion-checkbox color="primary" checked></ion-checkbox>
-  <ion-checkbox color="secondary" checked></ion-checkbox>
-  <ion-checkbox color="warning" checked></ion-checkbox>
-  <ion-checkbox color="danger" checked></ion-checkbox>
-  <ion-checkbox color="dark" checked></ion-checkbox>
-  <ion-checkbox color="light" checked></ion-checkbox>
+
+  <!-- Colors -->
+  <ion-checkbox checked color="primary"></ion-checkbox>
+  <ion-checkbox checked color="secondary"></ion-checkbox>
+  <ion-checkbox checked color="tertiary"></ion-checkbox>
+  <ion-checkbox checked color="success"></ion-checkbox>
+  <ion-checkbox checked color="warning"></ion-checkbox>
+  <ion-checkbox checked color="danger"></ion-checkbox>
+  <ion-checkbox checked color="light"></ion-checkbox>
+  <ion-checkbox checked color="medium"></ion-checkbox>
+  <ion-checkbox checked color="dark"></ion-checkbox>
+
+  <!-- Disabled -->
   <ion-checkbox disabled></ion-checkbox>
+  <ion-checkbox disabled checked></ion-checkbox>
 </body>
 </html>
diff --git a/packages/core/src/components/note/test/basic/index.html b/packages/core/src/components/note/test/basic/index.html
index 8a0ecdeafb..7f85c7af04 100644
--- a/packages/core/src/components/note/test/basic/index.html
+++ b/packages/core/src/components/note/test/basic/index.html
@@ -21,29 +21,55 @@
         <ion-list>
           <ion-list-header>Notes Right</ion-list-header>
           <ion-item>
-            <ion-note slot="end">99</ion-note>
             <ion-label>Default Note</ion-label>
+            <ion-note slot="end">99</ion-note>
           </ion-item>
+
           <ion-item>
-            <ion-note slot="end" color="primary">99</ion-note>
             <ion-label>Primary Note</ion-label>
+            <ion-note slot="end" color="primary">99</ion-note>
           </ion-item>
+
           <ion-item>
-            <ion-note slot="end" color="secondary">99</ion-note>
             <ion-label>Secondary Note</ion-label>
+            <ion-note slot="end" color="secondary">99</ion-note>
           </ion-item>
+
+          <ion-item>
+            <ion-label>Tertiary Note</ion-label>
+            <ion-note slot="end" color="tertiary">99</ion-note>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Success Note</ion-label>
+            <ion-note slot="end" color="success">99</ion-note>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Warning Note</ion-label>
+            <ion-note slot="end" color="warning">99</ion-note>
+          </ion-item>
+
           <ion-item>
-            <ion-note slot="end" color="danger">99</ion-note>
             <ion-label>Danger Note</ion-label>
+            <ion-note slot="end" color="danger">99</ion-note>
           </ion-item>
+
           <ion-item>
-            <ion-note slot="end" color="light">99</ion-note>
             <ion-label>Light Note</ion-label>
+            <ion-note slot="end" color="light">99</ion-note>
           </ion-item>
+
           <ion-item>
-            <ion-note slot="end" color="dark">99</ion-note>
-            <ion-label>Dark Note</ion-label>
+            <ion-label>Medium Note</ion-label>
+            <ion-note slot="end" color="medium">99</ion-note>
           </ion-item>
+
+          <ion-item>
+            <ion-label>Dark Note</ion-label>
+            <ion-note slot="end" color="dark">99</ion-note>
+          </ion-item>
+
           <ion-item onclick="toggleColor()">
             <ion-note id="toggleColor" slot="end" color="primary">primary</ion-note>
             <ion-label>Dynamic Note Color (toggle)</ion-label>
@@ -53,28 +79,53 @@
         <ion-list>
           <ion-list-header>Notes Left</ion-list-header>
           <ion-item>
-            <ion-note slot="start">99</ion-note>
             <ion-label>Default Note</ion-label>
+            <ion-note slot="start">99</ion-note>
           </ion-item>
+
           <ion-item>
-            <ion-note slot="start" color="primary">99</ion-note>
             <ion-label>Primary Note</ion-label>
+            <ion-note slot="start" color="primary">99</ion-note>
           </ion-item>
+
           <ion-item>
-            <ion-note slot="start" color="secondary">99</ion-note>
             <ion-label>Secondary Note</ion-label>
+            <ion-note slot="start" color="secondary">99</ion-note>
           </ion-item>
+
+          <ion-item>
+            <ion-label>Tertiary Note</ion-label>
+            <ion-note slot="start" color="tertiary">99</ion-note>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Success Note</ion-label>
+            <ion-note slot="start" color="success">99</ion-note>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Warning Note</ion-label>
+            <ion-note slot="start" color="warning">99</ion-note>
+          </ion-item>
+
           <ion-item>
-            <ion-note slot="start" color="danger">99</ion-note>
             <ion-label>Danger Note</ion-label>
+            <ion-note slot="start" color="danger">99</ion-note>
           </ion-item>
+
           <ion-item>
-            <ion-note slot="start" color="light">99</ion-note>
             <ion-label>Light Note</ion-label>
+            <ion-note slot="start" color="light">99</ion-note>
           </ion-item>
+
+          <ion-item>
+            <ion-label>Medium Note</ion-label>
+            <ion-note slot="start" color="medium">99</ion-note>
+          </ion-item>
+
           <ion-item>
-            <ion-note slot="start" color="dark">99</ion-note>
             <ion-label>Dark Note</ion-label>
+            <ion-note slot="start" color="dark">99</ion-note>
           </ion-item>
         </ion-list>
       </ion-content>
diff --git a/packages/core/src/components/note/test/standalone/index.html b/packages/core/src/components/note/test/standalone/index.html
index b891026531..d510842ad1 100644
--- a/packages/core/src/components/note/test/standalone/index.html
+++ b/packages/core/src/components/note/test/standalone/index.html
@@ -9,14 +9,18 @@
 </head>
 
 <body>
-  <!-- Default Note -->
+  <!-- Default -->
   <ion-note>Default Note</ion-note>
 
-  <!-- Note Colors -->
+  <!-- Colors -->
   <ion-note color="primary">Primary Note</ion-note>
   <ion-note color="secondary">Secondary Note</ion-note>
+  <ion-note color="tertiary">Tertiary Note</ion-note>
+  <ion-note color="success">Success Note</ion-note>
+  <ion-note color="warning">Warning Note</ion-note>
   <ion-note color="danger">Danger Note</ion-note>
   <ion-note color="light">Light Note</ion-note>
+  <ion-note color="medium">Medium Note</ion-note>
   <ion-note color="dark">Dark Note</ion-note>
 
   <!-- Notes in a List -->
diff --git a/packages/core/src/components/radio-group/test/standalone/index.html b/packages/core/src/components/radio-group/test/standalone/index.html
index 06fab200e6..3015fd3f8b 100644
--- a/packages/core/src/components/radio-group/test/standalone/index.html
+++ b/packages/core/src/components/radio-group/test/standalone/index.html
@@ -11,12 +11,27 @@
 <body>
   <ion-radio-group>
     <ion-radio></ion-radio>
+
     <ion-radio color="primary"></ion-radio>
     <ion-radio color="secondary"></ion-radio>
+    <ion-radio color="tertiary"></ion-radio>
+    <ion-radio color="success"></ion-radio>
+    <ion-radio color="warning"></ion-radio>
     <ion-radio color="danger" checked></ion-radio>
-    <ion-radio color="dark"></ion-radio>
     <ion-radio color="light"></ion-radio>
+    <ion-radio color="medium"></ion-radio>
+    <ion-radio color="dark"></ion-radio>
+
     <ion-radio disabled></ion-radio>
+    <ion-radio color="secondary" disabled></ion-radio>
   </ion-radio-group>
+
+  <style>
+    /* to be able to see the radio buttons */
+    .radio-ios {
+      border: 1px solid #dedede;
+      padding: 10px 5px;
+    }
+  </style>
 </body>
 </html>
diff --git a/packages/core/src/components/radio/test/standalone/index.html b/packages/core/src/components/radio/test/standalone/index.html
index afccec1483..8062c23302 100644
--- a/packages/core/src/components/radio/test/standalone/index.html
+++ b/packages/core/src/components/radio/test/standalone/index.html
@@ -9,20 +9,42 @@
 </head>
 
 <body>
-  <ion-radio id="radio1"></ion-radio>
-  <ion-radio color="primary"></ion-radio>
-  <ion-radio color="secondary"></ion-radio>
-  <ion-radio color="danger"></ion-radio>
-  <ion-radio color="dark"></ion-radio>
-  <ion-radio color="light"></ion-radio>
-  <ion-radio disabled></ion-radio>
+  <p>
+    <ion-radio></ion-radio>
+    <ion-radio color="primary"></ion-radio>
+    <ion-radio color="secondary"></ion-radio>
+    <ion-radio color="tertiary"></ion-radio>
+    <ion-radio color="success"></ion-radio>
+    <ion-radio color="warning"></ion-radio>
+    <ion-radio color="danger"></ion-radio>
+    <ion-radio color="light"></ion-radio>
+    <ion-radio color="medium"></ion-radio>
+    <ion-radio color="dark"></ion-radio>
+    <ion-radio disabled></ion-radio>
+    <ion-radio color="secondary" disabled></ion-radio>
+  </p>
 
-  <ion-radio id="radio2" checked></ion-radio>
-  <ion-radio color="primary" checked></ion-radio>
-  <ion-radio color="secondary" checked></ion-radio>
-  <ion-radio color="danger" checked></ion-radio>
-  <ion-radio color="dark" checked></ion-radio>
-  <ion-radio color="light" checked></ion-radio>
-  <ion-radio checked disabled></ion-radio>
+  <p>
+    <ion-radio checked></ion-radio>
+    <ion-radio checked color="primary"></ion-radio>
+    <ion-radio checked color="secondary"></ion-radio>
+    <ion-radio checked color="tertiary"></ion-radio>
+    <ion-radio checked color="success"></ion-radio>
+    <ion-radio checked color="warning"></ion-radio>
+    <ion-radio checked color="danger"></ion-radio>
+    <ion-radio checked color="light"></ion-radio>
+    <ion-radio checked color="medium"></ion-radio>
+    <ion-radio checked color="dark"></ion-radio>
+    <ion-radio checked disabled></ion-radio>
+    <ion-radio checked color="secondary" disabled></ion-radio>
+  </p>
+
+  <style>
+    /* to be able to see the radio buttons */
+    .radio-ios {
+      border: 1px solid #dedede;
+      padding: 10px 5px;
+    }
+  </style>
 </body>
 </html>
diff --git a/packages/core/src/components/searchbar/test/toolbar/index.html b/packages/core/src/components/searchbar/test/toolbar/index.html
index 61a53eb821..dfeae9418f 100644
--- a/packages/core/src/components/searchbar/test/toolbar/index.html
+++ b/packages/core/src/components/searchbar/test/toolbar/index.html
@@ -46,7 +46,17 @@
         <ion-toolbar color="primary">
           <ion-searchbar show-cancel-button></ion-searchbar>
         </ion-toolbar>
-`
+
+        <h5 padding-left padding-top> Search - Secondary Toolbar </h5>
+        <ion-toolbar color="secondary">
+          <ion-searchbar></ion-searchbar>
+        </ion-toolbar>
+
+        <h5 padding-left padding-top> Search - Tertiary Toolbar </h5>
+        <ion-toolbar color="tertiary">
+          <ion-searchbar></ion-searchbar>
+        </ion-toolbar>
+
         <h5 padding-left padding-top> Search - Success Toolbar </h5>
         <ion-toolbar color="success">
           <ion-searchbar></ion-searchbar>
@@ -62,16 +72,21 @@
           <ion-searchbar></ion-searchbar>
         </ion-toolbar>
 
+        <h5 padding-left padding-top> Search - Light Toolbar </h5>
+        <ion-toolbar color="light">
+          <ion-searchbar show-cancel-button></ion-searchbar>
+        </ion-toolbar>
+
+        <h5 padding-left padding-top> Search - Medium Toolbar </h5>
+        <ion-toolbar color="medium">
+          <ion-searchbar show-cancel-button></ion-searchbar>
+        </ion-toolbar>
 
         <h5 padding-left padding-top> Search - Dark Toolbar </h5>
         <ion-toolbar color="dark">
           <ion-searchbar placeholder="Filter Schedules"></ion-searchbar>
         </ion-toolbar>
 
-        <h5 padding-left padding-top> Search - Light Toolbar </h5>
-        <ion-toolbar color="light">
-          <ion-searchbar show-cancel-button></ion-searchbar>
-        </ion-toolbar>
       </ion-content>
     </ion-page>
   </ion-app>
diff --git a/packages/core/src/components/text/test/basic/index.html b/packages/core/src/components/text/test/basic/index.html
index d5e159d0a9..353e872f49 100644
--- a/packages/core/src/components/text/test/basic/index.html
+++ b/packages/core/src/components/text/test/basic/index.html
@@ -29,7 +29,7 @@
         </ion-text>
 
         <ion-text color="danger">
-          <h4 >H4: The quick brown fox jumps over the lazy dog</h4>
+          <h4>H4: The quick brown fox jumps over the lazy dog</h4>
         </ion-text>
 
         <ion-text color="dark">
diff --git a/packages/core/src/components/toggle/test/standalone/index.html b/packages/core/src/components/toggle/test/standalone/index.html
index 08906c4eeb..bf632b9e0f 100644
--- a/packages/core/src/components/toggle/test/standalone/index.html
+++ b/packages/core/src/components/toggle/test/standalone/index.html
@@ -9,12 +9,22 @@
 </head>
 
 <body>
-  <ion-toggle checked></ion-toggle>
-  <ion-toggle color="secondary" (ionChange)="kiwiChange($event)" checked></ion-toggle>
-  <ion-toggle color="danger" name="cherry" checked></ion-toggle>
-  <ion-toggle color="light" (ionChange)="strawberryChange($event)" checked="true"></ion-toggle>
-  <ion-toggle color="warning" checked></ion-toggle>
-  <ion-toggle color="dark" checked></ion-toggle>
+  <!-- Default -->
+  <ion-toggle></ion-toggle>
+
+  <!-- Colors -->
+  <ion-toggle checked color="primary"></ion-toggle>
+  <ion-toggle checked color="secondary"></ion-toggle>
+  <ion-toggle checked color="tertiary"></ion-toggle>
+  <ion-toggle checked color="success"></ion-toggle>
+  <ion-toggle checked color="warning"></ion-toggle>
+  <ion-toggle checked color="danger"></ion-toggle>
+  <ion-toggle checked color="light"></ion-toggle>
+  <ion-toggle checked color="medium"></ion-toggle>
+  <ion-toggle checked color="dark"></ion-toggle>
+
+  <!-- Disabled -->
   <ion-toggle checked disabled></ion-toggle>
+  <ion-toggle checked disabled color="secondary"></ion-toggle>
 </body>
 </html>
diff --git a/packages/core/src/components/toolbar/test/colors/index.html b/packages/core/src/components/toolbar/test/colors/index.html
index 33ef06818f..4678037ad9 100644
--- a/packages/core/src/components/toolbar/test/colors/index.html
+++ b/packages/core/src/components/toolbar/test/colors/index.html
@@ -22,6 +22,14 @@
           <ion-title>Secondary</ion-title>
         </ion-toolbar>
 
+        <ion-toolbar color="tertiary">
+          <ion-title>Tertiary</ion-title>
+        </ion-toolbar>
+
+        <ion-toolbar color="success">
+          <ion-title>Success</ion-title>
+        </ion-toolbar>
+
         <ion-toolbar color="warning">
           <ion-title>Warning</ion-title>
         </ion-toolbar>
@@ -34,6 +42,10 @@
           <ion-title>Light</ion-title>
         </ion-toolbar>
 
+        <ion-toolbar color="medium">
+          <ion-title>Medium</ion-title>
+        </ion-toolbar>
+
         <ion-toolbar color="dark">
           <ion-title>Dark</ion-title>
         </ion-toolbar>
diff --git a/packages/core/src/components/toolbar/test/standalone/index.html b/packages/core/src/components/toolbar/test/standalone/index.html
index 3e055c90c4..f48e47dc8e 100644
--- a/packages/core/src/components/toolbar/test/standalone/index.html
+++ b/packages/core/src/components/toolbar/test/standalone/index.html
@@ -21,6 +21,14 @@
     <ion-title>Secondary</ion-title>
   </ion-toolbar>
 
+  <ion-toolbar color="tertiary">
+    <ion-title>Tertiary</ion-title>
+  </ion-toolbar>
+
+  <ion-toolbar color="success">
+    <ion-title>Success</ion-title>
+  </ion-toolbar>
+
   <ion-toolbar color="warning">
     <ion-title>Warning</ion-title>
   </ion-toolbar>
@@ -33,6 +41,10 @@
     <ion-title>Light</ion-title>
   </ion-toolbar>
 
+  <ion-toolbar color="medium">
+    <ion-title>Medium</ion-title>
+  </ion-toolbar>
+
   <ion-toolbar color="dark">
     <ion-title>Dark</ion-title>
   </ion-toolbar>
diff --git a/packages/core/src/components/toolbar/test/translucent/index.html b/packages/core/src/components/toolbar/test/translucent/index.html
index ab9e852413..0c4e96d97b 100644
--- a/packages/core/src/components/toolbar/test/translucent/index.html
+++ b/packages/core/src/components/toolbar/test/translucent/index.html
@@ -14,22 +14,31 @@
           <ion-title>Toolbar - Translucent</ion-title>
         </ion-toolbar>
         <ion-toolbar color="primary">
-          <ion-title>Toolbar - Primary Translucent</ion-title>
+          <ion-title>Primary - Translucent</ion-title>
         </ion-toolbar>
         <ion-toolbar color="secondary">
-          <ion-title>Toolbar - Secondary Translucent</ion-title>
+          <ion-title>Secondary - Translucent</ion-title>
         </ion-toolbar>
-        <ion-toolbar color="light">
-          <ion-title>Toolbar - Light Translucent</ion-title>
+        <ion-toolbar color="tertiary">
+          <ion-title>Tertiary - Translucent</ion-title>
         </ion-toolbar>
-        <ion-toolbar color="danger">
-          <ion-title>Toolbar - Danger Translucent</ion-title>
+        <ion-toolbar color="success">
+          <ion-title>Success - Translucent</ion-title>
         </ion-toolbar>
         <ion-toolbar color="warning">
-          <ion-title>Toolbar - Warning Translucent</ion-title>
+          <ion-title>Warning - Translucent</ion-title>
+        </ion-toolbar>
+        <ion-toolbar color="danger">
+          <ion-title>Danger - Translucent</ion-title>
+        </ion-toolbar>
+        <ion-toolbar color="light">
+          <ion-title>Light - Translucent</ion-title>
+        </ion-toolbar>
+        <ion-toolbar color="medium">
+          <ion-title>Medium - Translucent</ion-title>
         </ion-toolbar>
         <ion-toolbar color="dark">
-          <ion-title>Toolbar - Dark Translucent</ion-title>
+          <ion-title>Dark - Translucent</ion-title>
         </ion-toolbar>
       </ion-header>
 
diff --git a/packages/core/src/themes/ionic.theme.default.scss b/packages/core/src/themes/ionic.theme.default.scss
index 2008224f8e..367ef90a10 100644
--- a/packages/core/src/themes/ionic.theme.default.scss
+++ b/packages/core/src/themes/ionic.theme.default.scss
@@ -4,15 +4,15 @@
 // ----------------------------------
 
 // Private color variables, use colors() to override
-$primary:         #488aff;
-$secondary:       #32db64;
-$tertiary:        #f4a942;
+$primary:         #3880ff;
+$secondary:       #0cd1e8;
+$tertiary:        #7044ff;
 $success:         #10dc60;
 $warning:         #ffce00;
-$danger:          #f53d3d;
-$light:           #f4f4f4;
+$danger:          #f04141;
+$light:           #f4f5f8;
 $medium:          #989aa2;
-$dark:            #222;
+$dark:            #222428;
 
 // Allows users to override an individual color
 $colors:              () !default;