diff --git a/core/src/themes/ionic.theme.default.scss b/core/src/themes/ionic.theme.default.scss
index 5a08298dd1..268e972a49 100644
--- a/core/src/themes/ionic.theme.default.scss
+++ b/core/src/themes/ionic.theme.default.scss
@@ -100,46 +100,44 @@ $text-color:                        var(--ion-text-color, $text-color-value) !de
 // For example, $text-color-step-XXX will be $text-color stepping towards $background-color,
 // but a $background-color-step-XXX will be $background-color stepping towards $text-color.
 
-$background-color-step-50:          var(--ion-background-color-step-50, mix($text-color-value, $background-color-value, 5%)) !default;
-$background-color-step-100:         var(--ion-background-color-step-100, mix($text-color-value, $background-color-value, 10%)) !default;
-$background-color-step-150:         var(--ion-background-color-step-150, mix($text-color-value, $background-color-value, 15%)) !default;
-$background-color-step-200:         var(--ion-background-color-step-200, mix($text-color-value, $background-color-value, 20%)) !default;
-$background-color-step-250:         var(--ion-background-color-step-250, mix($text-color-value, $background-color-value, 25%)) !default;
-$background-color-step-300:         var(--ion-background-color-step-300, mix($text-color-value, $background-color-value, 30%)) !default;
-$background-color-step-350:         var(--ion-background-color-step-350, mix($text-color-value, $background-color-value, 35%)) !default;
-$background-color-step-400:         var(--ion-background-color-step-400, mix($text-color-value, $background-color-value, 40%)) !default;
-$background-color-step-450:         var(--ion-background-color-step-450, mix($text-color-value, $background-color-value, 45%)) !default;
-$background-color-step-500:         var(--ion-background-color-step-500, mix($text-color-value, $background-color-value, 50%)) !default;
-$background-color-step-550:         var(--ion-background-color-step-550, mix($text-color-value, $background-color-value, 55%)) !default;
-$background-color-step-600:         var(--ion-background-color-step-600, mix($text-color-value, $background-color-value, 60%)) !default;
-$background-color-step-650:         var(--ion-background-color-step-650, mix($text-color-value, $background-color-value, 65%)) !default;
-$background-color-step-700:         var(--ion-background-color-step-700, mix($text-color-value, $background-color-value, 70%)) !default;
-$background-color-step-750:         var(--ion-background-color-step-750, mix($text-color-value, $background-color-value, 75%)) !default;
-$background-color-step-800:         var(--ion-background-color-step-800, mix($text-color-value, $background-color-value, 80%)) !default;
-$background-color-step-850:         var(--ion-background-color-step-850, mix($text-color-value, $background-color-value, 85%)) !default;
-$background-color-step-900:         var(--ion-background-color-step-900, mix($text-color-value, $background-color-value, 90%)) !default;
-$background-color-step-950:         var(--ion-background-color-step-950, mix($text-color-value, $background-color-value, 95%)) !default;
-$background-color-step-1000:        var(--ion-background-color-step-1000, mix($text-color-value, $background-color-value, 100%)) !default;
-$text-color-step-50:                var(--ion-text-color-step-50, mix($background-color-value, $text-color-value, 5%)) !default;
-$text-color-step-100:               var(--ion-text-color-step-100, mix($background-color-value, $text-color-value, 10%)) !default;
-$text-color-step-150:               var(--ion-text-color-step-150, mix($background-color-value, $text-color-value, 15%)) !default;
-$text-color-step-200:               var(--ion-text-color-step-200, mix($background-color-value, $text-color-value, 20%)) !default;
-$text-color-step-250:               var(--ion-text-color-step-250, mix($background-color-value, $text-color-value, 25%)) !default;
-$text-color-step-300:               var(--ion-text-color-step-300, mix($background-color-value, $text-color-value, 30%)) !default;
-$text-color-step-350:               var(--ion-text-color-step-350, mix($background-color-value, $text-color-value, 35%)) !default;
-$text-color-step-400:               var(--ion-text-color-step-400, mix($background-color-value, $text-color-value, 40%)) !default;
-$text-color-step-450:               var(--ion-text-color-step-450, mix($background-color-value, $text-color-value, 45%)) !default;
-$text-color-step-500:               var(--ion-text-color-step-500, mix($background-color-value, $text-color-value, 50%)) !default;
-$text-color-step-550:               var(--ion-text-color-step-550, mix($background-color-value, $text-color-value, 55%)) !default;
-$text-color-step-600:               var(--ion-text-color-step-600, mix($background-color-value, $text-color-value, 60%)) !default;
-$text-color-step-650:               var(--ion-text-color-step-650, mix($background-color-value, $text-color-value, 65%)) !default;
-$text-color-step-700:               var(--ion-text-color-step-700, mix($background-color-value, $text-color-value, 70%)) !default;
-$text-color-step-750:               var(--ion-text-color-step-750, mix($background-color-value, $text-color-value, 75%)) !default;
-$text-color-step-800:               var(--ion-text-color-step-800, mix($background-color-value, $text-color-value, 80%)) !default;
-$text-color-step-850:               var(--ion-text-color-step-850, mix($background-color-value, $text-color-value, 85%)) !default;
-$text-color-step-900:               var(--ion-text-color-step-900, mix($background-color-value, $text-color-value, 90%)) !default;
-$text-color-step-950:               var(--ion-text-color-step-950, mix($background-color-value, $text-color-value, 95%)) !default;
-$text-color-step-1000:              var(--ion-text-color-step-1000, mix($background-color-value, $text-color-value, 100%)) !default;
+$background-color-step-50:          var(--ion-color-step-50, mix($text-color-value, $background-color-value, 5%)) !default;
+$background-color-step-100:         var(--ion-color-step-100, mix($text-color-value, $background-color-value, 10%)) !default;
+$background-color-step-150:         var(--ion-color-step-150, mix($text-color-value, $background-color-value, 15%)) !default;
+$background-color-step-200:         var(--ion-color-step-200, mix($text-color-value, $background-color-value, 20%)) !default;
+$background-color-step-250:         var(--ion-color-step-250, mix($text-color-value, $background-color-value, 25%)) !default;
+$background-color-step-300:         var(--ion-color-step-300, mix($text-color-value, $background-color-value, 30%)) !default;
+$background-color-step-350:         var(--ion-color-step-350, mix($text-color-value, $background-color-value, 35%)) !default;
+$background-color-step-400:         var(--ion-color-step-400, mix($text-color-value, $background-color-value, 40%)) !default;
+$background-color-step-450:         var(--ion-color-step-450, mix($text-color-value, $background-color-value, 45%)) !default;
+$background-color-step-500:         var(--ion-color-step-500, mix($text-color-value, $background-color-value, 50%)) !default;
+$background-color-step-550:         var(--ion-color-step-550, mix($text-color-value, $background-color-value, 55%)) !default;
+$background-color-step-600:         var(--ion-color-step-600, mix($text-color-value, $background-color-value, 60%)) !default;
+$background-color-step-650:         var(--ion-color-step-650, mix($text-color-value, $background-color-value, 65%)) !default;
+$background-color-step-700:         var(--ion-color-step-700, mix($text-color-value, $background-color-value, 70%)) !default;
+$background-color-step-750:         var(--ion-color-step-750, mix($text-color-value, $background-color-value, 75%)) !default;
+$background-color-step-800:         var(--ion-color-step-800, mix($text-color-value, $background-color-value, 80%)) !default;
+$background-color-step-850:         var(--ion-color-step-850, mix($text-color-value, $background-color-value, 85%)) !default;
+$background-color-step-900:         var(--ion-color-step-900, mix($text-color-value, $background-color-value, 90%)) !default;
+$background-color-step-950:         var(--ion-color-step-950, mix($text-color-value, $background-color-value, 95%)) !default;
+$text-color-step-50:                var(--ion-color-step-950, mix($background-color-value, $text-color-value, 5%)) !default;
+$text-color-step-100:               var(--ion-color-step-900, mix($background-color-value, $text-color-value, 10%)) !default;
+$text-color-step-150:               var(--ion-color-step-850, mix($background-color-value, $text-color-value, 15%)) !default;
+$text-color-step-200:               var(--ion-color-step-800, mix($background-color-value, $text-color-value, 20%)) !default;
+$text-color-step-250:               var(--ion-color-step-750, mix($background-color-value, $text-color-value, 25%)) !default;
+$text-color-step-300:               var(--ion-color-step-700, mix($background-color-value, $text-color-value, 30%)) !default;
+$text-color-step-350:               var(--ion-color-step-650, mix($background-color-value, $text-color-value, 35%)) !default;
+$text-color-step-400:               var(--ion-color-step-600, mix($background-color-value, $text-color-value, 40%)) !default;
+$text-color-step-450:               var(--ion-color-step-550, mix($background-color-value, $text-color-value, 45%)) !default;
+$text-color-step-500:               var(--ion-color-step-500, mix($background-color-value, $text-color-value, 50%)) !default;
+$text-color-step-550:               var(--ion-color-step-450, mix($background-color-value, $text-color-value, 55%)) !default;
+$text-color-step-600:               var(--ion-color-step-400, mix($background-color-value, $text-color-value, 60%)) !default;
+$text-color-step-650:               var(--ion-color-step-350, mix($background-color-value, $text-color-value, 65%)) !default;
+$text-color-step-700:               var(--ion-color-step-300, mix($background-color-value, $text-color-value, 70%)) !default;
+$text-color-step-750:               var(--ion-color-step-250, mix($background-color-value, $text-color-value, 75%)) !default;
+$text-color-step-800:               var(--ion-color-step-200, mix($background-color-value, $text-color-value, 80%)) !default;
+$text-color-step-850:               var(--ion-color-step-150, mix($background-color-value, $text-color-value, 85%)) !default;
+$text-color-step-900:               var(--ion-color-step-100, mix($background-color-value, $text-color-value, 90%)) !default;
+$text-color-step-950:               var(--ion-color-step-50, mix($background-color-value, $text-color-value, 95%)) !default;
 
 // Default General Colors
 // --------------------------------------------------
diff --git a/core/src/themes/test/steps/index.html b/core/src/themes/test/steps/index.html
index bfd44a3eef..395a2a6f9f 100644
--- a/core/src/themes/test/steps/index.html
+++ b/core/src/themes/test/steps/index.html
@@ -3,7 +3,7 @@
 
 <head>
   <meta charset="UTF-8">
-  <title>CSS Variable - Basic</title>
+  <title>Themes - Steps</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
   <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
 
@@ -18,163 +18,155 @@
     }
 
     .background-step-50 {
-      background-color: var(--ion-background-color-step-50);
-    }
-
-    .text-step-50 {
-      color: var(--ion-text-color-step-50);
+      background: var(--ion-color-step-50, #f2f2f2);
     }
 
     .background-step-100 {
-      background-color: var(--ion-background-color-step-100);
-    }
-
-    .text-step-100 {
-      color: var(--ion-text-color-step-100);
+      background: var(--ion-color-step-100, #e6e6e6);
     }
 
     .background-step-150 {
-      background-color: var(--ion-background-color-step-150);
-    }
-
-    .text-step-150 {
-      color: var(--ion-text-color-step-150);
+      background: var(--ion-color-step-150, #d9d9d9);
     }
 
     .background-step-200 {
-      background-color: var(--ion-background-color-step-200);
-    }
-
-    .text-step-200 {
-      color: var(--ion-text-color-step-200);
+      background: var(--ion-color-step-200, #cccccc);
     }
 
     .background-step-250 {
-      background-color: var(--ion-background-color-step-250);
-    }
-
-    .text-step-250 {
-      color: var(--ion-text-color-step-250);
+      background: var(--ion-color-step-250, #bfbfbf);
     }
 
     .background-step-300 {
-      background-color: var(--ion-background-color-step-300);
-    }
-
-    .text-step-300 {
-      color: var(--ion-text-color-step-300);
+      background: var(--ion-color-step-300, #b3b3b3);
     }
 
     .background-step-350 {
-      background-color: var(--ion-background-color-step-350);
-    }
-
-    .text-step-350 {
-      color: var(--ion-text-color-step-350);
+      background: var(--ion-color-step-350, #a6a6a6);
     }
 
     .background-step-400 {
-      background-color: var(--ion-background-color-step-400);
-    }
-
-    .text-step-400 {
-      color: var(--ion-text-color-step-400);
+      background: var(--ion-color-step-400, #999999);
     }
 
     .background-step-450 {
-      background-color: var(--ion-background-color-step-450);
-    }
-
-    .text-step-450 {
-      color: var(--ion-text-color-step-450);
+      background: var(--ion-color-step-450, #8c8c8c);
     }
 
     .background-step-500 {
-      background-color: var(--ion-background-color-step-500);
-    }
-
-    .text-step-500 {
-      color: var(--ion-text-color-step-500);
+      background: var(--ion-color-step-500, gray);
     }
 
     .background-step-550 {
-      background-color: var(--ion-background-color-step-550);
-    }
-
-    .text-step-550 {
-      color: var(--ion-text-color-step-550);
+      background: var(--ion-color-step-550, #737373);
     }
 
     .background-step-600 {
-      background-color: var(--ion-background-color-step-600);
-    }
-
-    .text-step-600 {
-      color: var(--ion-text-color-step-600);
+      background: var(--ion-color-step-600, #666666);
     }
 
     .background-step-650 {
-      background-color: var(--ion-background-color-step-650);
-    }
-
-    .text-step-650 {
-      color: var(--ion-text-color-step-650);
+      background: var(--ion-color-step-650, #595959);
     }
 
     .background-step-700 {
-      background-color: var(--ion-background-color-step-700);
-    }
-
-    .text-step-700 {
-      color: var(--ion-text-color-step-700);
+      background: var(--ion-color-step-700, #4d4d4d);
     }
 
     .background-step-750 {
-      background-color: var(--ion-background-color-step-750);
-    }
-
-    .text-step-750 {
-      color: var(--ion-text-color-step-750);
+      background: var(--ion-color-step-750, #404040);
     }
 
     .background-step-800 {
-      background-color: var(--ion-background-color-step-800);
-    }
-
-    .text-step-800 {
-      color: var(--ion-text-color-step-800);
+      background: var(--ion-color-step-800, #333333);
     }
 
     .background-step-850 {
-      background-color: var(--ion-background-color-step-850);
-    }
-
-    .text-step-850 {
-      color: var(--ion-text-color-step-850);
+      background: var(--ion-color-step-850, #262626);
     }
 
     .background-step-900 {
-      background-color: var(--ion-background-color-step-900);
-    }
-
-    .text-step-900 {
-      color: var(--ion-text-color-step-900);
+      background: var(--ion-color-step-900, #1a1a1a);
     }
 
     .background-step-950 {
-      background-color: var(--ion-background-color-step-950);
+      background: var(--ion-color-step-950, #0d0d0d);
+    }
+
+    .text-step-50 {
+      color: var(--ion-color-step-950, #0d0d0d);
+    }
+
+    .text-step-100 {
+      color: var(--ion-color-step-900, #1a1a1a);
+    }
+
+    .text-step-150 {
+      color: var(--ion-color-step-850, #262626);
+    }
+
+    .text-step-200 {
+      color: var(--ion-color-step-800, #333333);
+    }
+
+    .text-step-250 {
+      color: var(--ion-color-step-750, #404040);
+    }
+
+    .text-step-300 {
+      color: var(--ion-color-step-700, #4d4d4d);
+    }
+
+    .text-step-350 {
+      color: var(--ion-color-step-650, #595959);
+    }
+
+    .text-step-400 {
+      color: var(--ion-color-step-600, #666666);
+    }
+
+    .text-step-450 {
+      color: var(--ion-color-step-550, #737373);
+    }
+
+    .text-step-500 {
+      color: var(--ion-color-step-500, gray);
+    }
+
+    .text-step-550 {
+      color: var(--ion-color-step-450, #8c8c8c);
+    }
+
+    .text-step-600 {
+      color: var(--ion-color-step-400, #999999);
+    }
+
+    .text-step-650 {
+      color: var(--ion-color-step-350, #a6a6a6);
+    }
+
+    .text-step-700 {
+      color: var(--ion-color-step-300, #b3b3b3);
+    }
+
+    .text-step-750 {
+      color: var(--ion-color-step-250, #bfbfbf);
+    }
+
+    .text-step-800 {
+      color: var(--ion-color-step-200, #cccccc);
+    }
+
+    .text-step-850 {
+      color: var(--ion-color-step-150, #d9d9d9);
+    }
+
+    .text-step-900 {
+      color: var(--ion-color-step-100, #e6e6e6);
     }
 
     .text-step-950 {
-      color: var(--ion-text-color-step-950);
-    }
-
-    .background-step-1000 {
-      background-color: var(--ion-background-color-step-1000);
-    }
-
-    .text-step-1000 {
-      color: var(--ion-text-color-step-1000);
+      color: var(--ion-color-step-50, #f2f2f2);
     }
 
   </style>
@@ -183,49 +175,48 @@
 <body>
   <ion-app>
     <ion-content padding>
-      <div class="block background-step-50">Background</div>
-      <div class="block background-step-100">Background</div>
-      <div class="block background-step-150">Background</div>
-      <div class="block background-step-200">Background</div>
-      <div class="block background-step-250">Background</div>
-      <div class="block background-step-300">Background</div>
-      <div class="block background-step-350">Background</div>
-      <div class="block background-step-400">Background</div>
-      <div class="block background-step-450">Background</div>
-      <div class="block background-step-500">Background</div>
-      <div class="block background-step-550">Background</div>
-      <div class="block background-step-600">Background</div>
-      <div class="block background-step-650">Background</div>
-      <div class="block background-step-700">Background</div>
-      <div class="block background-step-750">Background</div>
-      <div class="block background-step-800">Background</div>
-      <div class="block background-step-850">Background</div>
-      <div class="block background-step-900">Background</div>
-      <div class="block background-step-950">Background</div>
-      <div class="block background-step-1000">Background</div>
-
+      <div class="block">Background</div>
+      <div class="block background-step-50">Step 50</div>
+      <div class="block background-step-100">Step 100</div>
+      <div class="block background-step-150">Step 150</div>
+      <div class="block background-step-200">Step 200</div>
+      <div class="block background-step-250">Step 250</div>
+      <div class="block background-step-300">Step 300</div>
+      <div class="block background-step-350">Step 350</div>
+      <div class="block background-step-400">Step 400</div>
+      <div class="block background-step-450">Step 450</div>
+      <div class="block background-step-500">Step 500</div>
+      <div class="block background-step-550">Step 550</div>
+      <div class="block background-step-600">Step 600</div>
+      <div class="block background-step-650">Step 650</div>
+      <div class="block background-step-700">Step 700</div>
+      <div class="block background-step-750">Step 750</div>
+      <div class="block background-step-800">Step 800</div>
+      <div class="block background-step-850">Step 850</div>
+      <div class="block background-step-900">Step 900</div>
+      <div class="block background-step-950">Step 950</div>
       <hr>
 
-      <div class="block text-step-50">Text</div>
-      <div class="block text-step-100">Text</div>
-      <div class="block text-step-150">Text</div>
-      <div class="block text-step-200">Text</div>
-      <div class="block text-step-250">Text</div>
-      <div class="block text-step-300">Text</div>
-      <div class="block text-step-350">Text</div>
-      <div class="block text-step-400">Text</div>
-      <div class="block text-step-450">Text</div>
-      <div class="block text-step-500">Text</div>
-      <div class="block text-step-550">Text</div>
-      <div class="block text-step-600">Text</div>
-      <div class="block text-step-650">Text</div>
-      <div class="block text-step-700">Text</div>
-      <div class="block text-step-750">Text</div>
-      <div class="block text-step-800">Text</div>
-      <div class="block text-step-850">Text</div>
-      <div class="block text-step-900">Text</div>
-      <div class="block text-step-950">Text</div>
-      <div class="block text-step-1000">Text</div>
+      <div class="block">Text</div>
+      <div class="block text-step-50">Step 50</div>
+      <div class="block text-step-100">Step 100</div>
+      <div class="block text-step-150">Step 150</div>
+      <div class="block text-step-200">Step 200</div>
+      <div class="block text-step-250">Step 250</div>
+      <div class="block text-step-300">Step 300</div>
+      <div class="block text-step-350">Step 350</div>
+      <div class="block text-step-400">Step 400</div>
+      <div class="block text-step-450">Step 450</div>
+      <div class="block text-step-500">Step 500</div>
+      <div class="block text-step-550">Step 550</div>
+      <div class="block text-step-600">Step 600</div>
+      <div class="block text-step-650">Step 650</div>
+      <div class="block text-step-700">Step 700</div>
+      <div class="block text-step-750">Step 750</div>
+      <div class="block text-step-800">Step 800</div>
+      <div class="block text-step-850">Step 850</div>
+      <div class="block text-step-900">Step 900</div>
+      <div class="block text-step-950">Step 950</div>
     </ion-content>
   </ion-app>
 </body>