From b3966d87e0b449c60e19dd63b42329a22c1c0f6c Mon Sep 17 00:00:00 2001
From: Adam Bradley <adamdbradley@gmail.com>
Date: Tue, 12 Nov 2013 13:40:29 -0600
Subject: [PATCH] colour name changes

---
 dist/css/ionic.css   | 336 ++++++++++++-------------------------------
 scss/_badge.scss     |  14 +-
 scss/_bar.scss       |  36 ++---
 scss/_button.scss    |  32 ++---
 scss/_form.scss      |   6 +-
 scss/_items.scss     |  26 ++--
 scss/_tabs.scss      |  28 ++--
 scss/_type.scss      |   2 +-
 scss/_util.scss      |  44 ++----
 scss/_variables.scss | 128 ++++++-----------
 test/button-bar.html |   8 +-
 test/buttons.html    |   6 +-
 test/colors.html     |  36 ++---
 13 files changed, 221 insertions(+), 481 deletions(-)

diff --git a/dist/css/ionic.css b/dist/css/ionic.css
index a5eae818eb..8b951dabaf 100644
--- a/dist/css/ionic.css
+++ b/dist/css/ionic.css
@@ -2469,7 +2469,7 @@ address {
 
 a.subdued‎ {
   padding-right: 10px;
-  color: #cccccc;
+  color: #f8f8f8;
   text-decoration: none; }
   a.subdued‎:hover {
     text-decoration: none; }
@@ -2615,34 +2615,20 @@ a.subdued‎ {
     color: white; }
     .bar.bar-royal .title {
       color: white; }
-  .bar.bar-pure {
+  .bar.bar-light {
     background-color: white;
     border-color: #dddddd;
     background-image: linear-gradient(0deg, #dddddd, #dddddd 50%, transparent 50%);
     color: #444444; }
-    .bar.bar-pure .title {
+    .bar.bar-light .title {
       color: #444444; }
-  .bar.bar-subdued-light {
-    background-color: #eeeeee;
+  .bar.bar-light {
+    background-color: white;
     border-color: #dddddd;
     background-image: linear-gradient(0deg, #dddddd, #dddddd 50%, transparent 50%);
     color: #444444; }
-    .bar.bar-subdued-light .title {
+    .bar.bar-light .title {
       color: #444444; }
-  .bar.bar-subdued {
-    background-color: #cccccc;
-    border-color: #bbbbbb;
-    background-image: linear-gradient(0deg, #bbbbbb, #bbbbbb 50%, transparent 50%);
-    color: #444444; }
-    .bar.bar-subdued .title {
-      color: #444444; }
-  .bar.bar-subdued-dark {
-    background-color: #888888;
-    border-color: #6f6f6f;
-    background-image: linear-gradient(0deg, #6f6f6f, #6f6f6f 50%, transparent 50%);
-    color: white; }
-    .bar.bar-subdued-dark .title {
-      color: white; }
   .bar.bar-dark {
     background-color: #444444;
     border-color: #444444;
@@ -2720,7 +2706,7 @@ a.subdued‎ {
     box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
     border-color: #cccccc; }
   .bar-secondary .button.button-clear {
-    color: #888888;
+    color: #444444;
     background: none;
     box-shadow: none;
     font-size: 18px; }
@@ -2844,69 +2830,35 @@ a.subdued‎ {
     box-shadow: none;
     font-size: 18px; }
 
-.bar-pure .button {
+.bar-light .button {
   color: #444444;
   background-color: white;
   border-color: #dddddd; }
-  .bar-pure .button:hover {
+  .bar-light .button:hover {
     color: #444444;
     text-decoration: none; }
-  .bar-pure .button.active, .bar-pure .button:active {
+  .bar-light .button.active, .bar-light .button:active {
     background-color: #222222;
     box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
     border-color: black; }
-  .bar-pure .button.button-clear {
+  .bar-light .button.button-clear {
     color: white;
     background: none;
     box-shadow: none;
     font-size: 18px; }
 
-.bar-subdued-light .button {
+.bar-light .button {
   color: #444444;
-  background-color: #eeeeee;
+  background-color: white;
   border-color: #dddddd; }
-  .bar-subdued-light .button:hover {
+  .bar-light .button:hover {
     color: #444444;
     text-decoration: none; }
-  .bar-subdued-light .button.active, .bar-subdued-light .button:active {
+  .bar-light .button.active, .bar-light .button:active {
     background-color: #222222;
     box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
     border-color: black; }
-  .bar-subdued-light .button.button-clear {
-    color: white;
-    background: none;
-    box-shadow: none;
-    font-size: 18px; }
-
-.bar-subdued .button {
-  color: #444444;
-  background-color: #cccccc;
-  border-color: #bbbbbb; }
-  .bar-subdued .button:hover {
-    color: #444444;
-    text-decoration: none; }
-  .bar-subdued .button.active, .bar-subdued .button:active {
-    background-color: #222222;
-    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
-    border-color: black; }
-  .bar-subdued .button.button-clear {
-    color: white;
-    background: none;
-    box-shadow: none;
-    font-size: 18px; }
-
-.bar-subdued-dark .button {
-  color: white;
-  background-color: #888888;
-  border-color: #6f6f6f; }
-  .bar-subdued-dark .button:hover {
-    color: white;
-    text-decoration: none; }
-  .bar-subdued-dark .button.active, .bar-subdued-dark .button:active {
-    background-color: #222222;
-    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
-    border-color: black; }
-  .bar-subdued-dark .button.button-clear {
+  .bar-light .button.button-clear {
     color: white;
     background: none;
     box-shadow: none;
@@ -2968,9 +2920,9 @@ a.subdued‎ {
   -moz-flex-direction: horizontal;
   -ms-flex-direction: horizontal;
   flex-direction: horizontal;
-  background-color: #eeeeee;
-  background-image: linear-gradient(0deg, #dddddd, #dddddd 50%, transparent 50%);
-  border-color: #dddddd;
+  background-color: #f8f8f8;
+  background-image: linear-gradient(0deg, #bbbbbb, #bbbbbb 50%, transparent 50%);
+  border-color: #bbbbbb;
   color: #444444;
   position: absolute;
   bottom: 0;
@@ -3026,26 +2978,16 @@ a.subdued‎ {
     background-image: linear-gradient(0deg, #552bdf, #552bdf 50%, transparent 50%);
     border-color: #552bdf;
     color: white; }
-  .tabs.tabs-pure {
+  .tabs.tabs-light {
     background-color: white;
     background-image: linear-gradient(0deg, #dddddd, #dddddd 50%, transparent 50%);
     border-color: #dddddd;
     color: #444444; }
-  .tabs.tabs-subdued-light {
-    background-color: #eeeeee;
-    background-image: linear-gradient(0deg, #dddddd, #dddddd 50%, transparent 50%);
-    border-color: #dddddd;
-    color: #444444; }
-  .tabs.tabs-subdued {
-    background-color: #cccccc;
+  .tabs.tabs-stable {
+    background-color: #f8f8f8;
     background-image: linear-gradient(0deg, #bbbbbb, #bbbbbb 50%, transparent 50%);
     border-color: #bbbbbb;
     color: #444444; }
-  .tabs.tabs-subdued-dark {
-    background-color: #888888;
-    background-image: linear-gradient(0deg, #6f6f6f, #6f6f6f 50%, transparent 50%);
-    border-color: #6f6f6f;
-    color: white; }
   .tabs.tabs-dark {
     background-color: #444444;
     background-image: linear-gradient(0deg, #444444, #444444 50%, transparent 50%);
@@ -3131,14 +3073,10 @@ a.subdued‎ {
     color: #f0b840; }
   .tab-item.active.tab-item-royal, .tab-item:active.tab-item-royal {
     color: #8a6de9; }
-  .tab-item.active.tab-item-pure, .tab-item:active.tab-item-pure {
+  .tab-item.active.tab-item-light, .tab-item:active.tab-item-light {
     color: white; }
-  .tab-item.active.tab-item-subdued-light, .tab-item:active.tab-item-subdued-light {
-    color: #eeeeee; }
-  .tab-item.active.tab-item-subdued, .tab-item:active.tab-item-subdued {
-    color: #cccccc; }
-  .tab-item.active.tab-item-subdued-dark, .tab-item:active.tab-item-subdued-dark {
-    color: #888888; }
+  .tab-item.active.tab-item-stable, .tab-item:active.tab-item-stable {
+    color: #f8f8f8; }
   .tab-item.active.tab-item-dark, .tab-item:active.tab-item-dark {
     color: #444444; }
 
@@ -3257,12 +3195,12 @@ a.subdued‎ {
   font-size: 16px;
   -webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; }
   .item.active {
-    color: #888888;
+    color: #444444;
     background-color: white;
-    border-color: #888888; }
+    border-color: #444444; }
     .item.active .item-content {
       background-color: white;
-      color: #888888; }
+      color: #444444; }
   .item h2 {
     margin: 0 0 4px 0;
     font-size: 16px; }
@@ -3298,31 +3236,31 @@ a.subdued‎ {
 .item-primary.active {
   color: white;
   background-color: #4a87ee;
-  border-color: #888888; }
+  border-color: #444444; }
   .item-primary.active .item-content {
     background-color: #4a87ee;
     color: white; }
 
 .item-secondary.active {
-  color: #888888;
+  color: #444444;
   background-color: white;
-  border-color: #888888; }
+  border-color: #444444; }
   .item-secondary.active .item-content {
     background-color: white;
-    color: #888888; }
+    color: #444444; }
 
 .item-tertiary.active {
-  color: #888888;
+  color: #444444;
   background-color: whitesmoke;
-  border-color: #888888; }
+  border-color: #444444; }
   .item-tertiary.active .item-content {
     background-color: whitesmoke;
-    color: #888888; }
+    color: #444444; }
 
 .item-positive.active {
   color: white;
   background-color: #4a87ee;
-  border-color: #888888; }
+  border-color: #444444; }
   .item-positive.active .item-content {
     background-color: #4a87ee;
     color: white; }
@@ -3330,7 +3268,7 @@ a.subdued‎ {
 .item-calm.active {
   color: white;
   background-color: #43cee6;
-  border-color: #888888; }
+  border-color: #444444; }
   .item-calm.active .item-content {
     background-color: #43cee6;
     color: white; }
@@ -3338,7 +3276,7 @@ a.subdued‎ {
 .item-balanced.active {
   color: white;
   background-color: #66cc33;
-  border-color: #888888; }
+  border-color: #444444; }
   .item-balanced.active .item-content {
     background-color: #66cc33;
     color: white; }
@@ -3346,7 +3284,7 @@ a.subdued‎ {
 .item-energized.active {
   color: white;
   background-color: #f0b840;
-  border-color: #888888; }
+  border-color: #444444; }
   .item-energized.active .item-content {
     background-color: #f0b840;
     color: white; }
@@ -3354,47 +3292,31 @@ a.subdued‎ {
 .item-royal.active {
   color: white;
   background-color: #8a6de9;
-  border-color: #888888; }
+  border-color: #444444; }
   .item-royal.active .item-content {
     background-color: #8a6de9;
     color: white; }
 
-.item-pure.active {
+.item-light.active {
   color: white;
   background-color: white;
-  border-color: #888888; }
-  .item-pure.active .item-content {
+  border-color: #444444; }
+  .item-light.active .item-content {
     background-color: white;
     color: white; }
 
-.item-subdued-light.active {
+.item-stable.active {
   color: white;
-  background-color: #eeeeee;
-  border-color: #888888; }
-  .item-subdued-light.active .item-content {
-    background-color: #eeeeee;
-    color: white; }
-
-.item-subdued.active {
-  color: white;
-  background-color: #cccccc;
-  border-color: #888888; }
-  .item-subdued.active .item-content {
-    background-color: #cccccc;
-    color: white; }
-
-.item-subdued-dark.active {
-  color: white;
-  background-color: #888888;
-  border-color: #888888; }
-  .item-subdued-dark.active .item-content {
-    background-color: #888888;
+  background-color: #f8f8f8;
+  border-color: #444444; }
+  .item-stable.active .item-content {
+    background-color: #f8f8f8;
     color: white; }
 
 .item-dark.active {
   color: white;
   background-color: #444444;
-  border-color: #888888; }
+  border-color: #444444; }
   .item-dark.active .item-content {
     background-color: #444444;
     color: white; }
@@ -3906,7 +3828,7 @@ button.item-button-right:after {
   vertical-align: baseline;
   white-space: nowrap;
   text-align: center;
-  background-color: #cccccc;
+  background-color: #f8f8f8;
   border-radius: 10px; }
   .badge:empty {
     display: none; }
@@ -3942,17 +3864,11 @@ button.item-button-right:after {
 .badge-royal {
   background-color: #8a6de9; }
 
-.badge-pure {
+.badge-light {
   background-color: white; }
 
-.badge-subdued-light {
-  background-color: #eeeeee; }
-
-.badge-subdued {
-  background-color: #cccccc; }
-
-.badge-subdued-dark {
-  background-color: #888888; }
+.badge-stable {
+  background-color: #f8f8f8; }
 
 .badge-dark {
   background-color: #444444; }
@@ -4053,11 +3969,11 @@ legend {
   width: 100%;
   border: 0;
   border-bottom: 1px solid #e5e5e5;
-  color: #888888;
+  color: #444444;
   font-size: 21px;
   line-height: 2.85714; }
   legend small {
-    color: #eeeeee;
+    color: #f8f8f8;
     font-size: 1.07143; }
 
 label,
@@ -4172,7 +4088,7 @@ input[type="tel"],
 input[type="color"] {
   display: inline-block;
   height: 34px;
-  color: #cccccc;
+  color: #f8f8f8;
   vertical-align: middle;
   font-size: 14px;
   line-height: 20px; }
@@ -4229,13 +4145,13 @@ select[size] {
 
 input:-moz-placeholder,
 textarea:-moz-placeholder {
-  color: #cccccc; }
+  color: #f8f8f8; }
 input:-ms-input-placeholder,
 textarea:-ms-input-placeholder {
-  color: #cccccc; }
+  color: #f8f8f8; }
 input::-webkit-input-placeholder,
 textarea::-webkit-input-placeholder {
-  color: #cccccc; }
+  color: #f8f8f8; }
 
 input[disabled],
 select[disabled],
@@ -4243,7 +4159,7 @@ textarea[disabled],
 input[readonly],
 select[readonly],
 textarea[readonly] {
-  background-color: #eeeeee;
+  background-color: #f8f8f8;
   cursor: not-allowed; }
 
 input[type="radio"][disabled],
@@ -4473,8 +4389,8 @@ input[type="range"] {
   border-style: solid;
   border-radius: 2px;
   color: #444444;
-  background-color: #eeeeee;
-  border-color: #c8c8c8;
+  background-color: #f8f8f8;
+  border-color: #d2d2d2;
   vertical-align: top;
   text-align: center;
   text-overflow: ellipsis;
@@ -4485,9 +4401,9 @@ input[type="range"] {
     color: #444444;
     text-decoration: none; }
   .button.active, .button:active {
-    background-color: #fbfbfb;
+    background-color: white;
     box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
-    border-color: #aeaeae; }
+    border-color: #b8b8b8; }
   .button .icon {
     display: inline-block;
     padding: 0 0 1px 0;
@@ -4538,7 +4454,7 @@ input[type="range"] {
     .button.button-secondary.button-outline {
       background: transparent;
       border-color: #d9d9d9;
-      color: #888888; }
+      color: #444444; }
       .button.button-secondary.button-outline.active, .button.button-secondary.button-outline:active {
         background-color: #d9d9d9;
         color: #fff;
@@ -4704,96 +4620,50 @@ input[type="range"] {
         background-color: #8a6de9;
         color: #fff;
         box-shadow: none; }
-  .button.button-pure {
+  .button.button-light {
     color: #444444;
     background-color: white;
     border-color: #dddddd; }
-    .button.button-pure:hover {
+    .button.button-light:hover {
       color: #444444;
       text-decoration: none; }
-    .button.button-pure.active, .button.button-pure:active {
+    .button.button-light.active, .button.button-light:active {
       background-color: #222222;
       box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
       border-color: black; }
-    .button.button-pure.button-clear {
+    .button.button-light.button-clear {
       color: white;
       background: none;
       box-shadow: none; }
-    .button.button-pure.button-outline {
+    .button.button-light.button-outline {
       background: transparent;
       border-color: white;
       color: white; }
-      .button.button-pure.button-outline.active, .button.button-pure.button-outline:active {
+      .button.button-light.button-outline.active, .button.button-light.button-outline:active {
         background-color: white;
         color: #fff;
         box-shadow: none; }
-  .button.button-subdued-light {
+  .button.button-stable {
     color: #444444;
-    background-color: #eeeeee;
-    border-color: #dddddd; }
-    .button.button-subdued-light:hover {
-      color: #444444;
-      text-decoration: none; }
-    .button.button-subdued-light.active, .button.button-subdued-light:active {
-      background-color: #222222;
-      box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
-      border-color: black; }
-    .button.button-subdued-light.button-clear {
-      color: #eeeeee;
-      background: none;
-      box-shadow: none; }
-    .button.button-subdued-light.button-outline {
-      background: transparent;
-      border-color: #eeeeee;
-      color: #eeeeee; }
-      .button.button-subdued-light.button-outline.active, .button.button-subdued-light.button-outline:active {
-        background-color: #eeeeee;
-        color: #fff;
-        box-shadow: none; }
-  .button.button-subdued {
-    color: #444444;
-    background-color: #cccccc;
+    background-color: #f8f8f8;
     border-color: #bbbbbb; }
-    .button.button-subdued:hover {
+    .button.button-stable:hover {
       color: #444444;
       text-decoration: none; }
-    .button.button-subdued.active, .button.button-subdued:active {
+    .button.button-stable.active, .button.button-stable:active {
       background-color: #222222;
       box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
       border-color: black; }
-    .button.button-subdued.button-clear {
-      color: #cccccc;
+    .button.button-stable.button-clear {
+      color: #f8f8f8;
       background: none;
       box-shadow: none; }
-    .button.button-subdued.button-outline {
+    .button.button-stable.button-outline {
       background: transparent;
-      border-color: #cccccc;
-      color: #cccccc; }
-      .button.button-subdued.button-outline.active, .button.button-subdued.button-outline:active {
-        background-color: #cccccc;
-        color: #fff;
-        box-shadow: none; }
-  .button.button-subdued-dark {
-    color: white;
-    background-color: #888888;
-    border-color: #6f6f6f; }
-    .button.button-subdued-dark:hover {
-      color: white;
-      text-decoration: none; }
-    .button.button-subdued-dark.active, .button.button-subdued-dark:active {
-      background-color: #222222;
-      box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
-      border-color: black; }
-    .button.button-subdued-dark.button-clear {
-      color: #888888;
-      background: none;
-      box-shadow: none; }
-    .button.button-subdued-dark.button-outline {
-      background: transparent;
-      border-color: #888888;
-      color: #888888; }
-      .button.button-subdued-dark.button-outline.active, .button.button-subdued-dark.button-outline:active {
-        background-color: #888888;
+      border-color: #f8f8f8;
+      color: #f8f8f8; }
+      .button.button-stable.button-outline.active, .button.button-stable.button-outline:active {
+        background-color: #f8f8f8;
         color: #fff;
         box-shadow: none; }
   .button.button-dark {
@@ -4856,7 +4726,7 @@ input[type="range"] {
   background: none;
   box-shadow: none; }
   .button-clear.button-clear {
-    color: #eeeeee;
+    color: #f8f8f8;
     background: none;
     box-shadow: none; }
   .button-clear:active, .button-clear.active {
@@ -4869,10 +4739,10 @@ input[type="range"] {
   box-shadow: none; }
   .button-outline.button-outline {
     background: transparent;
-    border-color: #eeeeee;
-    color: #eeeeee; }
+    border-color: #f8f8f8;
+    color: #f8f8f8; }
     .button-outline.button-outline.active, .button-outline.button-outline:active {
-      background-color: #eeeeee;
+      background-color: #f8f8f8;
       color: #fff;
       box-shadow: none; }
 
@@ -5447,42 +5317,24 @@ a.button {
 .royal-border {
   border-color: #552bdf; }
 
-.pure {
+.light {
   color: white; }
 
-.pure-bg {
+.light-bg {
   background-color: white; }
 
-.pure-border {
+.light-border {
   border-color: #dddddd; }
 
-.subdued-light {
-  color: #eeeeee; }
+.stable {
+  color: #f8f8f8; }
 
-.subdued-light-bg {
-  background-color: #eeeeee; }
+.stable-bg {
+  background-color: #f8f8f8; }
 
-.subdued-light-border {
-  border-color: #dddddd; }
-
-.subdued {
-  color: #cccccc; }
-
-.subdued-bg {
-  background-color: #cccccc; }
-
-.subdued-border {
+.stable-border {
   border-color: #bbbbbb; }
 
-.subdued-dark {
-  color: #888888; }
-
-.subdued-dark-bg {
-  background-color: #888888; }
-
-.subdued-dark-border {
-  border-color: #6f6f6f; }
-
 .dark {
   color: #444444; }
 
diff --git a/scss/_badge.scss b/scss/_badge.scss
index 308cf8e72c..e6a910958b 100644
--- a/scss/_badge.scss
+++ b/scss/_badge.scss
@@ -56,17 +56,11 @@
 .badge-royal {
   background-color: $royal;
 }
-.badge-pure {
-  background-color: $pure;
+.badge-light {
+  background-color: $light;
 }
-.badge-subdued-light {
-  background-color: $subdued-light;
-}
-.badge-subdued {
-  background-color: $subdued;
-}
-.badge-subdued-dark {
-  background-color: $subdued-dark;
+.badge-stable {
+  background-color: $stable;
 }
 .badge-dark {
   background-color: $dark;
diff --git a/scss/_bar.scss b/scss/_bar.scss
index 66c2d9dfcf..24d8e9762e 100644
--- a/scss/_bar.scss
+++ b/scss/_bar.scss
@@ -77,17 +77,11 @@
   &.bar-royal {
     @include bar-style($bar-royal-bg, $bar-royal-border, $bar-royal-text);
   }
-  &.bar-pure {
-    @include bar-style($bar-pure-bg, $bar-pure-border, $bar-pure-text);
+  &.bar-light {
+    @include bar-style($bar-light-bg, $bar-light-border, $bar-light-text);
   }
-  &.bar-subdued-light {
-    @include bar-style($bar-subdued-light-bg, $bar-subdued-light-border, $bar-subdued-light-text);
-  }
-  &.bar-subdued {
-    @include bar-style($bar-subdued-bg, $bar-subdued-border, $bar-subdued-text);
-  }
-  &.bar-subdued-dark {
-    @include bar-style($bar-subdued-dark-bg, $bar-subdued-dark-border, $bar-subdued-dark-text);
+  &.bar-light {
+    @include bar-style($bar-light-bg, $bar-light-border, $bar-light-text);
   }
   &.bar-dark {
     @include bar-style($bar-dark-bg, $bar-dark-border, $bar-dark-text);
@@ -168,7 +162,7 @@
 .bar-secondary {
   .button {
     @include button-style($bar-secondary-bg, $bar-secondary-border, $bar-secondary-active-bg, $bar-secondary-active-border, $bar-secondary-text);
-    @include button-clear($subdued-dark, $bar-title-font-size);
+    @include button-clear($dark, $bar-title-font-size);
   }
 }
 .bar-tertiary {
@@ -213,27 +207,15 @@
     @include button-clear(#fff, $bar-title-font-size);
   }
 }
-.bar-pure {
+.bar-light {
   .button {
-    @include button-style($bar-pure-bg, $bar-pure-border, $bar-pure-active-bg, $bar-pure-active-border, $bar-pure-text);
+    @include button-style($bar-light-bg, $bar-light-border, $bar-light-active-bg, $bar-light-active-border, $bar-light-text);
     @include button-clear(#fff, $bar-title-font-size);
   }
 }
-.bar-subdued-light {
+.bar-light {
   .button {
-    @include button-style($bar-subdued-light-bg, $bar-subdued-light-border, $bar-subdued-light-active-bg, $bar-subdued-light-active-border, $bar-subdued-light-text);
-    @include button-clear(#fff, $bar-title-font-size);
-  }
-}
-.bar-subdued {
-  .button {
-    @include button-style($bar-subdued-bg, $bar-subdued-border, $bar-subdued-active-bg, $bar-subdued-active-border, $bar-subdued-text);
-    @include button-clear(#fff, $bar-title-font-size);
-  }
-}
-.bar-subdued-dark {
-  .button {
-    @include button-style($bar-subdued-dark-bg, $bar-subdued-dark-border, $bar-subdued-dark-active-bg, $bar-subdued-dark-active-border, $bar-subdued-dark-text);
+    @include button-style($bar-light-bg, $bar-light-border, $bar-light-active-bg, $bar-light-active-border, $bar-light-text);
     @include button-clear(#fff, $bar-title-font-size);
   }
 }
diff --git a/scss/_button.scss b/scss/_button.scss
index 002eb5b116..d2cf89266e 100644
--- a/scss/_button.scss
+++ b/scss/_button.scss
@@ -42,7 +42,7 @@
     margin-top: $button-block-margin;
     margin-bottom: $button-block-margin;
   }
-  
+
   &.button-primary {
     @include button-style($button-primary-bg, $button-primary-border, $button-primary-active-bg, $button-primary-active-border, $button-primary-text);
     @include button-clear($button-primary-bg);
@@ -52,7 +52,7 @@
   &.button-secondary {
     @include button-style($button-secondary-bg, $button-secondary-border, $button-secondary-active-bg, $button-secondary-active-border, $button-secondary-text);
     @include button-clear($button-secondary-border);
-    @include button-outline($button-secondary-border, $subdued-dark);
+    @include button-outline($button-secondary-border, $dark);
   }
 
   &.button-tertiary {
@@ -97,28 +97,16 @@
     @include button-outline($button-royal-bg);
   }
 
-  &.button-pure {
-    @include button-style($button-pure-bg, $button-pure-border, $button-pure-active-bg, $button-pure-active-border, $button-pure-text);
-    @include button-clear($button-pure-bg);
-    @include button-outline($button-pure-bg);
+  &.button-light {
+    @include button-style($button-light-bg, $button-light-border, $button-light-active-bg, $button-light-active-border, $button-light-text);
+    @include button-clear($button-light-bg);
+    @include button-outline($button-light-bg);
   }
 
-  &.button-subdued-light {
-    @include button-style($button-subdued-light-bg, $button-subdued-light-border, $button-subdued-light-active-bg, $button-subdued-light-active-border, $button-subdued-light-text);
-    @include button-clear($button-subdued-light-bg);
-    @include button-outline($button-subdued-light-bg);
-  }
-
-  &.button-subdued {
-    @include button-style($button-subdued-bg, $button-subdued-border, $button-subdued-active-bg, $button-subdued-active-border, $button-subdued-text);
-    @include button-clear($button-subdued-bg);
-    @include button-outline($button-subdued-bg);
-  }
-
-  &.button-subdued-dark {
-    @include button-style($button-subdued-dark-bg, $button-subdued-dark-border, $button-subdued-dark-active-bg, $button-subdued-dark-active-border, $button-subdued-dark-text);
-    @include button-clear($button-subdued-dark-bg);
-    @include button-outline($button-subdued-dark-bg);
+  &.button-stable {
+    @include button-style($button-stable-bg, $button-stable-border, $button-stable-active-bg, $button-stable-active-border, $button-stable-text);
+    @include button-clear($button-stable-bg);
+    @include button-outline($button-stable-bg);
   }
 
   &.button-dark {
diff --git a/scss/_form.scss b/scss/_form.scss
index 4bf6528116..4e2ac0f63c 100644
--- a/scss/_form.scss
+++ b/scss/_form.scss
@@ -17,13 +17,13 @@ legend {
   width: 100%;
   border: 0;
   border-bottom: 1px solid #e5e5e5;
-  color: $subdued-dark;
+  color: $dark;
   font-size: $font-size-base * 1.5;
   line-height: $line-height-base * 2;
 
   // Small
   small {
-    color: $subdued-light;
+    color: $stable;
     font-size: $line-height-base * .75;
   }
 }
@@ -134,7 +134,7 @@ input[type="tel"],
 input[type="color"] {
   display: inline-block;
   height: $line-height-computed + $font-size-base;
-  color: $subdued;
+  color: $stable;
   vertical-align: middle;
   font-size: $font-size-base;
   line-height: $line-height-computed;
diff --git a/scss/_items.scss b/scss/_items.scss
index 4c6a9e8aa9..21f3b070e0 100644
--- a/scss/_items.scss
+++ b/scss/_items.scss
@@ -5,7 +5,7 @@
  */
 
 .item {
-  @include item-style-active($secondary, $subdued-dark, $subdued-dark);
+  @include item-style-active($light, $dark, $dark);
   position: relative;
 
   z-index: 2; // Make sure the borders and stuff don't get hidden by children
@@ -75,19 +75,17 @@
 }
 
 // Different themes for list items
-.item-primary { @include item-style-active($primary, $subdued-dark, #fff); }
-.item-secondary { @include item-style-active($secondary, $subdued-dark, $subdued-dark); }
-.item-tertiary { @include item-style-active($tertiary, $subdued-dark, $subdued-dark); }
-.item-positive { @include item-style-active($positive, $subdued-dark, #fff); }
-.item-calm { @include item-style-active($calm, $subdued-dark, #fff); }
-.item-balanced { @include item-style-active($balanced, $subdued-dark, #fff); }
-.item-energized { @include item-style-active($energized, $subdued-dark, #fff); }
-.item-royal { @include item-style-active($royal, $subdued-dark, #fff); }
-.item-pure { @include item-style-active($pure, $subdued-dark, #fff); }
-.item-subdued-light { @include item-style-active($subdued-light, $subdued-dark, #fff); }
-.item-subdued { @include item-style-active($subdued, $subdued-dark, #fff); }
-.item-subdued-dark { @include item-style-active($subdued-dark, $subdued-dark, #fff); }
-.item-dark { @include item-style-active($dark, $subdued-dark, #fff); }
+.item-primary { @include item-style-active($primary, $dark, #fff); }
+.item-secondary { @include item-style-active($secondary, $dark, $dark); }
+.item-tertiary { @include item-style-active($tertiary, $dark, $dark); }
+.item-positive { @include item-style-active($positive, $dark, #fff); }
+.item-calm { @include item-style-active($calm, $dark, #fff); }
+.item-balanced { @include item-style-active($balanced, $dark, #fff); }
+.item-energized { @include item-style-active($energized, $dark, #fff); }
+.item-royal { @include item-style-active($royal, $dark, #fff); }
+.item-light { @include item-style-active($light, $dark, #fff); }
+.item-stable { @include item-style-active($stable, $dark, #fff); }
+.item-dark { @include item-style-active($dark, $dark, #fff); }
 
 // Handle text overflow
 .item,
diff --git a/scss/_tabs.scss b/scss/_tabs.scss
index 26c5f6cc36..64d8dfeecb 100644
--- a/scss/_tabs.scss
+++ b/scss/_tabs.scss
@@ -49,17 +49,11 @@
   &.tabs-royal {
     @include tab-style($tabs-royal-bg, $tabs-royal-border-color, $tabs-royal-text);
   }
-  &.tabs-pure {
-    @include tab-style($tabs-pure-bg, $tabs-pure-border-color, $tabs-pure-text);
+  &.tabs-light {
+    @include tab-style($tabs-light-bg, $tabs-light-border-color, $tabs-light-text);
   }
-  &.tabs-subdued-light {
-    @include tab-style($tabs-subdued-light-bg, $tabs-subdued-light-border-color, $tabs-subdued-light-text);
-  }
-  &.tabs-subdued {
-    @include tab-style($tabs-subdued-bg, $tabs-subdued-border-color, $tabs-subdued-text);
-  }
-  &.tabs-subdued-dark {
-    @include tab-style($tabs-subdued-dark-bg, $tabs-subdued-dark-border-color, $tabs-subdued-dark-text);
+  &.tabs-stable {
+    @include tab-style($tabs-stable-bg, $tabs-stable-border-color, $tabs-stable-text);
   }
   &.tabs-dark {
     @include tab-style($tabs-dark-bg, $tabs-dark-border-color, $tabs-dark-text);
@@ -168,17 +162,11 @@
   &.tab-item-royal {
     color: $royal;
   }
-  &.tab-item-pure {
-    color: $pure;
+  &.tab-item-light {
+    color: $light;
   }
-  &.tab-item-subdued-light {
-    color: $subdued-light;
-  }
-  &.tab-item-subdued {
-    color: $subdued;
-  }
-  &.tab-item-subdued-dark {
-    color: $subdued-dark;
+  &.tab-item-stable {
+    color: $stable;
   }
   &.tab-item-dark {
     color: $dark;
diff --git a/scss/_type.scss b/scss/_type.scss
index 8be5724e0f..313fd66ff4 100644
--- a/scss/_type.scss
+++ b/scss/_type.scss
@@ -160,7 +160,7 @@ address {
 
 a.subdued‎ {
   padding-right:10px;
-  color: $subdued;
+  color: $stable;
   text-decoration: none;
 
   &:hover {
diff --git a/scss/_util.scss b/scss/_util.scss
index cc58fb11b6..c06e7fe47b 100644
--- a/scss/_util.scss
+++ b/scss/_util.scss
@@ -141,44 +141,24 @@
   border-color: $button-royal-border;
 }
 
-.pure {
-  color: $pure;
+.light {
+  color: $light;
 }
-.pure-bg {
-  background-color: $pure;
+.light-bg {
+  background-color: $light;
 }
-.pure-border {
-  border-color: $button-pure-border;
+.light-border {
+  border-color: $button-light-border;
 }
 
-.subdued-light {
-  color: $subdued-light;
+.stable {
+  color: $stable;
 }
-.subdued-light-bg {
-  background-color: $subdued-light;
+.stable-bg {
+  background-color: $stable;
 }
-.subdued-light-border {
-  border-color: $button-subdued-light-border;
-}
-
-.subdued {
-  color: $subdued;
-}
-.subdued-bg {
-  background-color: $subdued;
-}
-.subdued-border {
-  border-color: $button-subdued-border;
-}
-
-.subdued-dark {
-  color: $subdued-dark;
-}
-.subdued-dark-bg {
-  background-color: $subdued-dark;
-}
-.subdued-dark-border {
-  border-color: $button-subdued-dark-border;
+.stable-border {
+  border-color: $button-stable-border;
 }
 
 .dark {
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 55773fe0a1..fd05f24ea9 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -3,7 +3,7 @@
 // -------------------------------
 
 $primary:               #4a87ee !default;
-$secondary:             #fff    !default;
+$secondary:             #ffffff !default;
 $tertiary:              #f5f5f5 !default;
 
 
@@ -17,11 +17,9 @@ $energized:             #f0b840 !default;
 $assertive:             #ef4e3a !default;
 $royal:                 #8a6de9 !default;
 
-$pure:                  #fff !default;
-$subdued-light:         #eee !default;
-$subdued:               #ccc !default;
-$subdued-dark:          #888 !default;
-$dark:                  #444 !default;
+$light:                 #ffffff !default;
+$stable:               #f8f8f8 !default;
+$dark:                  #444444 !default;
 
 
 // Base
@@ -85,12 +83,12 @@ $input-height-base:               ($line-height-computed + ($padding-base-vertic
 $input-height-large:              (floor($font-size-large * $line-height-large) + ($padding-large-vertical * 2) + 2) !default;
 $input-height-small:              (floor($font-size-small * $line-height-small) + ($padding-small-vertical * 2) + 2) !default;
 
-$input-bg:                        $pure;
-$input-bg-disabled:               $subdued-light;
+$input-bg:                        $light;
+$input-bg-disabled:               $stable;
 
-$input-color:                     $subdued-dark;
+$input-color:                     $dark;
 $input-label-color:               $dark;
-$input-color-placeholder:         $subdued;
+$input-color-placeholder:         $stable;
 
 
 // Toggle
@@ -111,7 +109,7 @@ $toggle-off-border-color:         #E5E5E5;
 $toggle-on-bg-color:              #4A87EE;
 $toggle-on-border-color:          $toggle-on-bg-color;
 
-$toggle-handle-off-bg-color:      $pure;
+$toggle-handle-off-bg-color:      $light;
 $toggle-handle-on-bg-color:       $toggle-handle-off-bg-color;
 
 $toggle-transition-duration:      .1s;
@@ -174,11 +172,11 @@ $button-bar-button-height:            32px;
 $button-bar-button-padding:           8px !default;
 $button-bar-button-icon-size:         24px;
 
-$button-default-bg:                   $subdued-light;
+$button-default-bg:                   $stable;
 $button-default-text:                 #444;
-$button-default-border:               darken($subdued-light, 15%);
-$button-default-active-bg:            lighten($subdued-light, 5%);
-$button-default-active-border:        darken($subdued-light, 25%);
+$button-default-border:               darken($stable, 15%);
+$button-default-active-bg:            lighten($stable, 5%);
+$button-default-active-border:        darken($stable, 25%);
 
 $button-primary-bg:                   $primary;
 $button-primary-text:                 #fff;
@@ -234,29 +232,17 @@ $button-royal-border:                 darken($royal, 15%);
 $button-royal-active-bg:              darken($royal, 15%);
 $button-royal-active-border:          darken($royal, 15%);
 
-$button-pure-bg:                      $pure;
-$button-pure-text:                    #444;
-$button-pure-border:                  #ddd;
-$button-pure-active-bg:               #222;
-$button-pure-active-border:           #000;
+$button-light-bg:                      $light;
+$button-light-text:                    #444;
+$button-light-border:                  #ddd;
+$button-light-active-bg:               #222;
+$button-light-active-border:           #000;
 
-$button-subdued-light-bg:             $subdued-light;
-$button-subdued-light-text:           #444;
-$button-subdued-light-border:         #ddd;
-$button-subdued-light-active-bg:      #222;
-$button-subdued-light-active-border:  #000;
-
-$button-subdued-bg:                   $subdued;
-$button-subdued-text:                 #444;
-$button-subdued-border:               #bbb;
-$button-subdued-active-bg:            #222;
-$button-subdued-active-border:        #000;
-
-$button-subdued-dark-bg:              $subdued-dark;
-$button-subdued-dark-text:            #fff;
-$button-subdued-dark-border:          darken($subdued-dark, 10%);
-$button-subdued-dark-active-bg:       #222;
-$button-subdued-dark-active-border:   #000;
+$button-stable-bg:                   $stable;
+$button-stable-text:                 #444;
+$button-stable-border:               #bbb;
+$button-stable-active-bg:            #222;
+$button-stable-active-border:        #000;
 
 $button-dark-bg:                      $dark;
 $button-dark-text:                    #fff;
@@ -334,29 +320,17 @@ $bar-royal-border:                $button-royal-border;
 $bar-royal-active-bg:             $button-royal-active-bg;
 $bar-royal-active-border:         $button-royal-active-border;
 
-$bar-pure-bg:                     rgba($button-pure-bg, $bar-transparency);
-$bar-pure-text:                   $button-pure-text;
-$bar-pure-border:                 $button-pure-border;
-$bar-pure-active-bg:              $button-pure-active-bg;
-$bar-pure-active-border:          $button-pure-active-border;
+$bar-light-bg:                    rgba($button-light-bg, $bar-transparency);
+$bar-light-text:                  $button-light-text;
+$bar-light-border:                $button-light-border;
+$bar-light-active-bg:             $button-light-active-bg;
+$bar-light-active-border:         $button-light-active-border;
 
-$bar-subdued-light-bg:            rgba($button-subdued-light-bg, $bar-transparency);
-$bar-subdued-light-text:          $button-subdued-light-text;
-$bar-subdued-light-border:        $button-subdued-light-border;
-$bar-subdued-light-active-bg:     $button-subdued-light-active-bg;
-$bar-subdued-light-active-border: $button-subdued-light-active-border;
-
-$bar-subdued-bg:                  rgba($button-subdued-bg, $bar-transparency);
-$bar-subdued-text:                $button-subdued-text;
-$bar-subdued-border:              $button-subdued-border;
-$bar-subdued-active-bg:           $button-subdued-active-bg;
-$bar-subdued-active-border:       $button-subdued-active-border;
-
-$bar-subdued-dark-bg:             rgba($button-subdued-dark-bg, $bar-transparency);
-$bar-subdued-dark-text:           $button-subdued-dark-text;
-$bar-subdued-dark-border:         $button-subdued-dark-border;
-$bar-subdued-dark-active-bg:      $button-subdued-dark-active-bg;
-$bar-subdued-dark-active-border:  $button-subdued-dark-active-border;
+$bar-stable-bg:                   rgba($button-stable-bg, $bar-transparency);
+$bar-stable-text:                 $button-stable-text;
+$bar-stable-border:               $button-stable-border;
+$bar-stable-active-bg:            $button-stable-active-bg;
+$bar-stable-active-border:        $button-stable-active-border;
 
 $bar-dark-bg:                     rgba($button-dark-bg, $bar-transparency);
 $bar-dark-text:                   $button-dark-text;
@@ -373,9 +347,9 @@ $tabs-text-font-size:              14px !default;
 $tabs-text-with-icon-font-size:    10px !default;
 $tabs-icon-size:                   32px !default;
 
-$tabs-default-bg:                  $button-subdued-light-bg;
-$tabs-default-border-color:        $button-subdued-light-border;
-$tabs-default-text:                $button-subdued-light-text;
+$tabs-default-bg:                  $button-stable-bg;
+$tabs-default-border-color:        $button-stable-border;
+$tabs-default-text:                $button-stable-text;
 
 $tabs-primary-bg:                  $button-primary-bg;
 $tabs-primary-border-color:        $button-primary-border;
@@ -413,21 +387,13 @@ $tabs-royal-bg:                    $button-royal-bg;
 $tabs-royal-border-color:          $button-royal-border;
 $tabs-royal-text:                  $button-royal-text;
 
-$tabs-pure-bg:                     $button-pure-bg;
-$tabs-pure-border-color:           $button-pure-border;
-$tabs-pure-text:                   $button-pure-text;
+$tabs-light-bg:                    $button-light-bg;
+$tabs-light-border-color:          $button-light-border;
+$tabs-light-text:                  $button-light-text;
 
-$tabs-subdued-light-bg:            $button-subdued-light-bg;
-$tabs-subdued-light-border-color:  $button-subdued-light-border;
-$tabs-subdued-light-text:          $button-subdued-light-text;
-
-$tabs-subdued-bg:                  $button-subdued-bg;
-$tabs-subdued-border-color:        $button-subdued-border;
-$tabs-subdued-text:                $button-subdued-text;
-
-$tabs-subdued-dark-bg:             $button-subdued-dark-bg;
-$tabs-subdued-dark-border-color:   $button-subdued-dark-border;
-$tabs-subdued-dark-text:           $button-subdued-dark-text;
+$tabs-stable-bg:                   $button-stable-bg;
+$tabs-stable-border-color:         $button-stable-border;
+$tabs-stable-text:                 $button-stable-text;
 
 $tabs-dark-bg:                     $button-dark-bg;
 $tabs-dark-border-color:           $button-dark-border;
@@ -444,7 +410,7 @@ $list-header-color:               #222;
 $list-header-padding:             5px 15px;
 $list-header-margin-top:          20px !default;
 
-$list-bg:                         $pure;
+$list-bg:                         $light;
 $list-border-color:               #ddd;
 
 
@@ -528,12 +494,12 @@ $sheet-border-radius:         3px !default;
 // Badges
 // -------------------------
 
-$badge-color:                 $pure !default;
-$badge-link-hover-color:      $pure !default;
-$badge-bg:                    $subdued !default;
+$badge-color:                 $light !default;
+$badge-link-hover-color:      $light !default;
+$badge-bg:                    $stable !default;
 
 $badge-active-color:          $link-color !default;
-$badge-active-bg:             $pure !default;
+$badge-active-bg:             $light !default;
 
 $badge-font-size:             14px !default;
 $badge-line-height:           16px !default;
diff --git a/test/button-bar.html b/test/button-bar.html
index 461f62b4f4..8029a68252 100644
--- a/test/button-bar.html
+++ b/test/button-bar.html
@@ -96,7 +96,7 @@
       </p>
       
       <p>
-        <div class="button-bar bar-pure">
+        <div class="button-bar bar-light">
           <a class="button">One</a>
           <a class="button">Two</a>
           <a class="button">Three</a>
@@ -104,7 +104,7 @@
       </p>
       
       <p>
-        <div class="button-bar bar-subdued-light">
+        <div class="button-bar bar-light-light">
           <a class="button">One</a>
           <a class="button">Two</a>
           <a class="button">Three</a>
@@ -112,7 +112,7 @@
       </p>
       
       <p>
-        <div class="button-bar bar-subdued">
+        <div class="button-bar bar-light">
           <a class="button">One</a>
           <a class="button">Two</a>
           <a class="button">Three</a>
@@ -120,7 +120,7 @@
       </p>
       
       <p>
-        <div class="button-bar bar-subdued-dark">
+        <div class="button-bar bar-light-dark">
           <a class="button">One</a>
           <a class="button">Two</a>
           <a class="button">Three</a>
diff --git a/test/buttons.html b/test/buttons.html
index 2bba508604..0f16266990 100644
--- a/test/buttons.html
+++ b/test/buttons.html
@@ -152,10 +152,8 @@
           <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-pure">.button-pure</a>
-          <a class="button block button-subdued-light">.button-subdued-light</a>
-          <a class="button block button-subdued">.button-subdued</a>
-          <a class="button block button-subdued-dark">.button-subdued-dark</a>
+          <a class="button block button-light">.button-light</a>
+          <a class="button block button-stable">.button-stable</a>
           <a class="button block button-dark">.button-dark</a>
         </p>
 
diff --git a/test/colors.html b/test/colors.html
index d5e624a62c..c22d649b73 100644
--- a/test/colors.html
+++ b/test/colors.html
@@ -12,6 +12,8 @@
         width: 20px;
         height: 20px;
         border-radius: 4px;
+        border-width: 1px;
+        border-style: solid;
       }
     </style>
   </head>
@@ -26,47 +28,39 @@
       <ul class="list color-list-demo">
         <li class="item positive">
           positive
-          <span class="color-demo positive-bg"></span>
+          <span class="color-demo positive-bg positive-border"></span>
         </li>
         <li class="item calm">
           calm
-          <span class="color-demo calm-bg"></span>
+          <span class="color-demo calm-bg calm-border"></span>
         </li>
         <li class="item assertive">
           assertive
-          <span class="color-demo assertive-bg"></span>
+          <span class="color-demo assertive-bg assertive-border"></span>
         </li>
         <li class="item balanced">
           balanced
-          <span class="color-demo balanced-bg"></span>
+          <span class="color-demo balanced-bg balanced-border"></span>
         </li>
         <li class="item energized">
           energized
-          <span class="color-demo energized-bg"></span>
+          <span class="color-demo energized-bg energized-border"></span>
         </li>
         <li class="item royal">
           royal
-          <span class="color-demo royal-bg"></span>
+          <span class="color-demo royal-bg royal-border"></span>
         </li>
-        <li class="item pure dark-bg">
-          pure
-          <span class="color-demo pure-bg"></span>
+        <li class="item dark">
+          light
+          <span class="color-demo light-bg light-border"></span>
         </li>
-        <li class="item subdued-light dark-bg">
-          subdued-light
-          <span class="color-demo subdued-light-bg"></span>
-        </li>
-        <li class="item subdued">
-          subdued
-          <span class="color-demo subdued-bg"></span>
-        </li>
-        <li class="item subdued-dark">
-          subdued-dark
-          <span class="color-demo subdued-dark-bg"></span>
+        <li class="item dark">
+          stable
+          <span class="color-demo stable-bg stable-border"></span>
         </li>
         <li class="item dark">
           dark
-          <span class="color-demo dark-bg"></span>
+          <span class="color-demo dark-bg dark-border"></span>
         </li>
       </ul>