diff --git a/test/buttons.html b/test/buttons.html
index 7c49e517d6..ff845ae0e3 100644
--- a/test/buttons.html
+++ b/test/buttons.html
@@ -31,12 +31,14 @@
         <h3>a.button default</h3>
         <p>
           <a class="button"><i class="icon ion-home"></i> Default</a>
+          <a class="button button-light">.button-light</a>
+          <a class="button button-stable">.button-stable</a>
+          <a class="button button-positive">.button-positive</a>
+          <a class="button button-calm"><i class="icon ion-home"></i> .button-calm</a>
           <a class="button button-balanced"><i class="icon ion-home"></i> .button-balanced</a>
           <a class="button button-assertive"><i class="icon ion-home"></i></a>
           <a class="button button-energized"><i class="icon ion-home"></i> .button-energized</a>
-          <a class="button button-positive">.button-positive</a>
-          <a class="button button-calm"><i class="icon ion-home"></i> .button-calm</a>
-          <a class="button button-assertive">.button-assertive</a>
+          <a class="button button-royal">.button-royal</a>
           <a class="button button-dark"><i class="icon ion-home"></i> .button-dark</a>
         </p>
 
@@ -45,12 +47,14 @@
         <h3>button.button default</h3>
         <p>
           <button class="button"><i class="icon ion-home"></i> Default</button>
+          <button class="button button-light"><i class="icon ion-home"></i></button>
+          <button class="button button-stable"><i class="icon ion-home"></i></button>
+          <button class="button button-positive"><i class="icon ion-home"></i></button>
+          <button class="button button-calm">.button-calm</button>
           <button class="button button-balanced"><i class="icon ion-home"></i> .button-balanced</button>
           <button class="button button-assertive">.button-assertive</button>
           <button class="button button-energized">.button-energized</button>
-          <button class="button button-positive"><i class="icon ion-home"></i></button>
-          <button class="button button-calm">.button-calm</button>
-          <button class="button button-assertive"><i class="icon ion-home"></i> .button-assertive</button>
+          <button class="button button-royal"><i class="icon ion-home"></i> .button-royal</button>
           <button class="button button-dark"><i class="icon ion-home"></i></button>
         </p>
 
@@ -59,12 +63,14 @@
         <h3>a.button.button-large default</h3>
         <p>
           <a class="button button-large"><i class="icon ion-home"></i> Default</a>
+          <a class="button button-large button-light">.button-light</a>
+          <a class="button button-large button-stable">.button-stable</a>
+          <a class="button button-large button-positive">.button-positive</a>
+          <a class="button button-large button-calm"><i class="icon ion-home"></i> .button-calm</a>
           <a class="button button-large button-balanced"><i class="icon ion-home"></i> .button-balanced</a>
           <a class="button button-large button-assertive"><i class="icon ion-home"></i></a>
           <a class="button button-large button-energized"><i class="icon ion-home"></i></a>
-          <a class="button button-large button-positive">.button-positive</a>
-          <a class="button button-large button-calm"><i class="icon ion-home"></i> .button-calm</a>
-          <a class="button button-large button-assertive">.button-assertive</a>
+          <a class="button button-large button-royal">.button-royal</a>
           <a class="button button-large button-dark"><i class="icon ion-home"></i> .button-dark</a>
         </p>
 
@@ -73,12 +79,14 @@
         <h3>button.button. button-large default</h3>
         <p>
           <button class="button button-large"><i class="icon ion-home"></i> Default</button>
+          <button class="button button-large button-light"><i class="icon ion-home"></i></button>
+          <button class="button button-large button-stable"><i class="icon ion-home"></i></button>
+          <button class="button button-large button-positive"><i class="icon ion-home"></i></button>
+          <button class="button button-large button-calm">.button-calm</button>
           <button class="button button-large button-balanced"><i class="icon ion-home"></i> .button-balanced</button>
           <button class="button button-large button-assertive">.button-assertive</button>
           <button class="button button-large button-energized">.button-energized</button>
-          <button class="button button-large button-positive"><i class="icon ion-home"></i></button>
-          <button class="button button-large button-calm">.button-calm</button>
-          <button class="button button-large button-assertive"><i class="icon ion-home"></i> .button-assertive</button>
+          <button class="button button-large button-royal"><i class="icon ion-home"></i> .button-royal</button>
           <button class="button button-large button-dark"><i class="icon ion-home"></i></button>
         </p>
 
@@ -87,12 +95,14 @@
         <h3>a.button.button-small default</h3>
         <p>
           <a class="button button-small"><i class="icon ion-home"></i> Default</a>
+          <a class="button button-small button-light"><i class="icon ion-home"></i> .button-light</a>
+          <a class="button button-small button-stable"><i class="icon ion-home"></i> .button-stable</a>
+          <a class="button button-small button-positive">.button-positive</a>
+          <a class="button button-small button-calm"><i class="icon ion-home"></i> .button-calm</a>
           <a class="button button-small button-balanced"><i class="icon ion-home"></i> .button-balanced</a>
           <a class="button button-small button-assertive"><i class="icon ion-home"></i></a>
           <a class="button button-small button-energized"><i class="icon ion-home"></i></a>
-          <a class="button button-small button-positive">.button-positive</a>
-          <a class="button button-small button-calm"><i class="icon ion-home"></i> .button-calm</a>
-          <a class="button button-small button-assertive">.button-assertive</a>
+          <a class="button button-small button-royal">.button-royal</a>
           <a class="button button-small button-dark"><i class="icon ion-home"></i> .button-dark</a>
         </p>
 
@@ -101,12 +111,14 @@
         <h3>button.button.button-small</h3>
         <p>
           <button class="button button-small"><i class="icon ion-home"></i> Default</button>
+          <button class="button button-small button-light"><i class="icon ion-home"></i> .button-light</button>
+          <button class="button button-small button-stable"><i class="icon ion-home"></i> .button-stable</button>
           <button class="button button-small button-balanced"><i class="icon ion-home"></i> .button-balanced</button>
-          <button class="button button-small button-assertive">.button-assertive</button>
-          <button class="button button-small button-energized">.button-energized</button>
           <button class="button button-small button-positive"><i class="icon ion-home"></i></button>
           <button class="button button-small button-calm">.button-calm</button>
-          <button class="button button-small button-assertive"><i class="icon ion-home"></i> .button-assertive</button>
+          <button class="button button-small button-assertive">.button-assertive</button>
+          <button class="button button-small button-energized">.button-energized</button>
+          <button class="button button-small button-royal"><i class="icon ion-home"></i> .button-royal</button>
           <button class="button button-small button-dark"><i class="icon ion-home"></i></button>
         </p>
 
@@ -115,12 +127,14 @@
         <h3>a.button.button-clear (Mixed in with others)</h3>
         <p>
           <a class="button button-clear"><i class="icon ion-home"></i> Default</a>
+          <a class="button button-light">.button-light</a>
+          <a class="button button-stable">.button-stable</a>
+          <a class="button button-positive">.button-positive</a>
+          <a class="button button-calm"><i class="icon ion-home"></i> .button-calm</a>
           <a class="button button-clear button-balanced"><i class="icon ion-home"></i> .button-balanced</a>
           <a class="button button-assertive"><i class="icon ion-home"></i></a>
           <a class="button button-clear button-energized"><i class="icon ion-home"></i></a>
-          <a class="button button-positive">.button-positive</a>
-          <a class="button button-calm"><i class="icon ion-home"></i> .button-calm</a>
-          <a class="button button-clear button-assertive">.button-assertive</a>
+          <a class="button button-clear button-royal">.button-royal</a>
           <a class="button button-clear button-dark"><i class="icon ion-home"></i> .button-dark</a>
         </p>
 
@@ -130,11 +144,13 @@
         <p>
           <button class="button"><i class="icon ion-home"></i> Default</button>
           <button class="button button-balanced"><i class="icon ion-home"></i> .button-balanced</button>
-          <button class="button button-clear button-assertive">.button-assertive</button>
-          <button class="button button-clear button-energized">.button-energized</button>
+          <button class="button button-clear button-light"><i class="icon ion-home"></i></button>
+          <button class="button button-clear button-stable"><i class="icon ion-home"></i></button>
           <button class="button button-clear button-positive"><i class="icon ion-home"></i></button>
           <button class="button button-clear button-calm">.button-calm</button>
-          <button class="button button-clear button-assertive"><i class="icon ion-home"></i> .button-assertive</button>
+          <button class="button button-clear button-assertive">.button-assertive</button>
+          <button class="button button-clear button-energized">.button-energized</button>
+          <button class="button button-clear button-royal"><i class="icon ion-home"></i> .button-royal</button>
           <button class="button button-dark"><i class="icon ion-home"></i></button>
         </p>
 
@@ -143,17 +159,14 @@
         <h3>a.block (parent w/ padding)</h3>
         <p>
           <a class="button block"><i class="icon ion-home"></i> Default</a>
-          <a class="button block button-balanced">.button-balanced</a>
-          <a class="button block button-assertive">.button-assertive</a>
-          <a class="button block button-energized">.button-energized</a>
-          <a class="button block button-positive">.button-positive</a>
-          <a class="button block button-calm">.button-calm</a>
-          <a class="button block button-assertive">.button-assertive</a>
-          <a class="button block button-balanced">.button-balanced</a>
-          <a class="button block button-energized">.button-energized</a>
-          <a class="button block button-royal">.button-royal</a>
           <a class="button block button-light">.button-light</a>
           <a class="button block button-stable">.button-stable</a>
+          <a class="button block button-positive">.button-positive</a>
+          <a class="button block button-calm">.button-calm</a>
+          <a class="button block button-balanced">.button-balanced</a>
+          <a class="button block button-assertive">.button-assertive</a>
+          <a class="button block button-energized">.button-energized</a>
+          <a class="button block button-royal">.button-royal</a>
           <a class="button block button-dark">.button-dark</a>
         </p>
 
@@ -162,12 +175,14 @@
         <h3>button.block (parent w/ padding)</h3>
         <p>
           <button class="button block"><i class="icon ion-home"></i> Default</button>
+          <button class="button block button-light">.button-light</button>
+          <button class="button block button-stable">.button-stable</button>
+          <button class="button block button-positive">.button-positive</button>
+          <button class="button block button-calm">.button-calm</button>
           <button class="button block button-balanced">.button-balanced</button>
           <button class="button block button-assertive">.button-assertive</button>
           <button class="button block button-energized">.button-energized</button>
-          <button class="button block button-positive">.button-positive</button>
-          <button class="button block button-calm">.button-calm</button>
-          <button class="button block button-assertive">.button-assertive</button>
+          <button class="button block button-royal">.button-royal</button>
           <button class="button block button-dark">.button-dark</button>
         </p>
 
@@ -204,12 +219,14 @@
         <h3>a.button-outline</h3>
         <p>
           <a class="button button-outline"><i class="icon ion-home"></i> Default</a>
+          <a class="button button-light button-outline">.button-light</a>
+          <a class="button button-stable button-outline">.button-stable</a>
+          <a class="button button-positive button-outline">.button-positive</a>
+          <a class="button button-calm button-outline">.button-calm</a>
           <a class="button button-balanced button-outline">.button-balanced</a>
           <a class="button button-assertive button-outline">.button-assertive</a>
           <a class="button button-energized button-outline">.button-energized</a>
-          <a class="button button-positive button-outline">.button-positive</a>
-          <a class="button button-calm button-outline">.button-calm</a>
-          <a class="button button-assertive button-outline">.button-assertive</a>
+          <a class="button button-royal button-outline">.button-royal</a>
           <a class="button button-dark button-outline">.button-dark</a>
         </p>
 
@@ -218,12 +235,14 @@
         <h3>button.button-outline</h3>
         <p>
           <button class="button button-outline"><i class="icon ion-home"></i> Default</button>
+          <button class="button button-light button-outline">.button-light</button>
+          <button class="button button-stable button-outline">.button-stable</button>
+          <button class="button button-positive button-outline">.button-positive</button>
+          <button class="button button-calm button-outline">.button-calm</button>
           <button class="button button-balanced button-outline">.button-balanced</button>
           <button class="button button-assertive button-outline">.button-assertive</button>
           <button class="button button-energized button-outline">.button-energized</button>
-          <button class="button button-positive button-outline">.button-positive</button>
-          <button class="button button-calm button-outline">.button-calm</button>
-          <button class="button button-assertive button-outline">.button-assertive</button>
+          <button class="button button-royal button-outline">.button-royal</button>
           <button class="button button-dark button-outline">.button-dark</button>
         </p>
 
@@ -232,12 +251,14 @@
         <h3>a.block.button-outline (parent w/ padding)</h3>
         <p>
           <a class="button button-outline block"><i class="icon ion-home"></i> Default</a>
+          <a class="button button-light button-outline block">.button-light</a>
+          <a class="button button-stable button-outline block">.button-stable</a>
+          <a class="button button-positive button-outline block">.button-positive</a>
+          <a class="button button-calm button-outline block">.button-calm</a>
           <a class="button button-balanced button-outline block">.button-balanced</a>
           <a class="button button-assertive button-outline block">.button-assertive</a>
           <a class="button button-energized button-outline block">.button-energized</a>
-          <a class="button button-positive button-outline block">.button-positive</a>
-          <a class="button button-calm button-outline block">.button-calm</a>
-          <a class="button button-assertive button-outline block">.button-assertive</a>
+          <a class="button button-royal button-outline block">.button-royal</a>
           <a class="button button-dark button-outline block">.button-dark</a>
         </p>
 
@@ -246,12 +267,14 @@
         <h3>button.block.button-outline (parent w/ padding)</h3>
         <p>
           <button class="button button-outline block"><i class="icon ion-home"></i> Default</button>
+          <button class="button button-light button-outline block">.button-light</button>
+          <button class="button button-stable button-outline block">.button-stable</button>
+          <button class="button button-positive button-outline block">.button-positive</button>
+          <button class="button button-calm button-outline block">.button-calm</button>
           <button class="button button-balanced button-outline block">.button-balanced</button>
           <button class="button button-assertive button-outline block">.button-assertive</button>
           <button class="button button-energized button-outline block">.button-energized</button>
-          <button class="button button-positive button-outline block">.button-positive</button>
-          <button class="button button-calm button-outline block">.button-calm</button>
-          <button class="button button-assertive button-outline block">.button-assertive</button>
+          <button class="button button-royal button-outline block">.button-royal</button>
           <button class="button button-dark button-outline block">.button-dark</button>
         </p>
 
@@ -260,12 +283,14 @@
         <h3>a.button-clear</h3>
         <p>
           <a class="button button-clear"><i class="icon ion-home"></i> Default</a>
+          <a class="button button-light button-clear">.button-light</a>
+          <a class="button button-stable button-clear">.button-stable</a>
+          <a class="button button-positive button-clear">.button-positive</a>
+          <a class="button button-calm button-clear">.button-calm</a>
           <a class="button button-balanced button-clear">.button-balanced</a>
           <a class="button button-assertive button-clear">.button-assertive</a>
           <a class="button button-energized button-clear">.button-energized</a>
-          <a class="button button-positive button-clear">.button-positive</a>
-          <a class="button button-calm button-clear">.button-calm</a>
-          <a class="button button-assertive button-clear">.button-assertive</a>
+          <a class="button button-royal button-clear">.button-royal</a>
           <a class="button button-dark button-clear">.button-dark</a>
         </p>
 
@@ -274,12 +299,14 @@
         <h3>button.button-clear</h3>
         <p>
           <button class="button button-clear"><i class="icon ion-home"></i> Default</button>
+          <button class="button button-light button-clear">.button-light</button>
+          <button class="button button-stable button-clear">.button-stable</button>
+          <button class="button button-positive button-clear">.button-positive</button>
+          <button class="button button-calm button-clear">.button-calm</button>
           <button class="button button-balanced button-clear">.button-balanced</button>
           <button class="button button-assertive button-clear">.button-assertive</button>
           <button class="button button-energized button-clear">.button-energized</button>
-          <button class="button button-positive button-clear">.button-positive</button>
-          <button class="button button-calm button-clear">.button-calm</button>
-          <button class="button button-assertive button-clear">.button-assertive</button>
+          <button class="button button-royal button-clear">.button-royal</button>
           <button class="button button-dark button-clear">.button-dark</button>
         </p>
 
@@ -288,12 +315,14 @@
         <h3>a.block.button-clear (parent w/ padding)</h3>
         <p>
           <a class="button button-clear block"><i class="icon ion-home"></i> Default</a>
+          <a class="button button-light button-clear block">.button-light</a>
+          <a class="button button-stable button-clear block">.button-stable</a>
+          <a class="button button-positive button-clear block">.button-positive</a>
+          <a class="button button-calm button-clear block">.button-calm</a>
           <a class="button button-balanced button-clear block">.button-balanced</a>
           <a class="button button-assertive button-clear block">.button-assertive</a>
           <a class="button button-energized button-clear block">.button-energized</a>
-          <a class="button button-positive button-clear block">.button-positive</a>
-          <a class="button button-calm button-clear block">.button-calm</a>
-          <a class="button button-assertive button-clear block">.button-assertive</a>
+          <a class="button button-royal button-clear block">.button-royal</a>
           <a class="button button-dark button-clear block">.button-dark</a>
         </p>
 
@@ -302,12 +331,14 @@
         <h3>button.block.button-clear (parent w/ padding)</h3>
         <p>
           <button class="button button-clear block"><i class="icon ion-home"></i> Default</button>
+          <button class="button button-light button-clear block">.button-light</button>
+          <button class="button button-stable button-clear block">.button-stable</button>
+          <button class="button button-positive button-clear block">.button-positive</button>
+          <button class="button button-calm button-clear block">.button-calm</button>
           <button class="button button-balanced button-clear block">.button-balanced</button>
           <button class="button button-assertive button-clear block">.button-assertive</button>
           <button class="button button-energized button-clear block">.button-energized</button>
-          <button class="button button-positive button-clear block">.button-positive</button>
-          <button class="button button-calm button-clear block">.button-calm</button>
-          <button class="button button-assertive button-clear block">.button-assertive</button>
+          <button class="button button-royal button-clear block">.button-royal</button>
           <button class="button button-dark button-clear block">.button-dark</button>
         </p>
 
@@ -318,12 +349,14 @@
       <h3>a.block (parent w/out padding)</h3>
       <p>
         <a class="button block"><i class="icon ion-home"></i> Default</a>
+        <a class="button block button-light">.button-light</a>
+        <a class="button block button-stable">.button-stable</a>
+        <a class="button block button-positive">.button-positive</a>
+        <a class="button block button-calm">.button-calm</a>
         <a class="button block button-balanced">.button-balanced</a>
         <a class="button block button-assertive">.button-assertive</a>
         <a class="button block button-energized">.button-energized</a>
-        <a class="button block button-positive">.button-positive</a>
-        <a class="button block button-calm">.button-calm</a>
-        <a class="button block button-assertive">.button-assertive</a>
+        <a class="button block button-royal">.button-royal</a>
         <a class="button block button-dark">.button-dark</a>
       </p>
 
@@ -332,12 +365,14 @@
       <h3>a.block (.button-full on the parent)</h3>
       <p class="button-full">
         <a class="button"><i class="icon ion-home"></i> Default</a>
+        <a class="button button-light">.button-light</a>
+        <a class="button button-stable">.button-stable</a>
+        <a class="button button-positive">.button-positive</a>
+        <a class="button button-calm">.button-calm</a>
         <a class="button button-balanced">.button-balanced</a>
         <a class="button button-assertive">.button-assertive</a>
         <a class="button button-energized">.button-energized</a>
-        <a class="button button-positive">.button-positive</a>
-        <a class="button button-calm">.button-calm</a>
-        <a class="button button-assertive">.button-assertive</a>
+        <a class="button button-royal">.button-royal</a>
         <a class="button button-dark">.button-dark</a>
       </p>
 
@@ -346,12 +381,14 @@
       <h3>button.block.button-full on each button and nothing on the parent</h3>
       <p>
         <button class="button button-full"><i class="icon ion-home"></i> Default</button>
+        <button class="button button-full button-light">.button-light</button>
+        <button class="button button-full button-stable">.button-stable</button>
+        <button class="button button-full button-positive">.button-positive</button>
+        <button class="button button-full button-calm">.button-calm</button>
         <button class="button button-full button-balanced">.button-balanced</button>
         <button class="button button-full button-assertive">.button-assertive</button>
         <button class="button button-full button-energized">.button-energized</button>
-        <button class="button button-full button-positive">.button-positive</button>
-        <button class="button button-full button-calm">.button-calm</button>
-        <button class="button button-full button-assertive">.button-assertive</button>
+        <button class="button button-full button-royal">.button-royal</button>
         <button class="button button-full button-dark">.button-dark</button>
       </p>