From 520146d89218a7800b4ec4683ec3396104ec4fa5 Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria.hutt@outsystems.com>
Date: Fri, 27 Feb 2026 15:56:14 -0800
Subject: [PATCH] feat(tokens): replace remaining stepped color CSS variables

---
 core/src/themes/ios/dark.tokens.ts            |   6 +-
 .../native/test/css-variables/css/dark.css    |  82 +++----
 .../native/test/css-variables/css/oceanic.css |  40 ++--
 core/src/themes/native/test/steps/index.html  | 225 ------------------
 core/src/themes/test/color/index.html         | 111 +++++++++
 .../test/base/src/theme/variables.css         |  76 +++---
 .../react/test/base/src/theme/variables.css   |  82 +++----
 7 files changed, 254 insertions(+), 368 deletions(-)
 delete mode 100644 core/src/themes/native/test/steps/index.html

diff --git a/core/src/themes/ios/dark.tokens.ts b/core/src/themes/ios/dark.tokens.ts
index f795b42ca7..a01bcb0ad8 100644
--- a/core/src/themes/ios/dark.tokens.ts
+++ b/core/src/themes/ios/dark.tokens.ts
@@ -26,9 +26,9 @@ export const darkTheme: DarkTheme = {
       background: '#000000',
     },
     IonModal: {
-      background: 'var(--ion-background-color-step-100)',
-      toolbarBackground: 'var(--ion-background-color-step-150)',
-      toolbarBorderColor: 'var(--ion-background-color-step-250)',
+      background: 'var(--ion-color-gray-100)',
+      toolbarBackground: 'var(--ion-color-gray-150)',
+      toolbarBorderColor: 'var(--ion-color-gray-250)',
     },
   },
 };
diff --git a/core/src/themes/native/test/css-variables/css/dark.css b/core/src/themes/native/test/css-variables/css/dark.css
index 6082882391..89f07cb9a1 100644
--- a/core/src/themes/native/test/css-variables/css/dark.css
+++ b/core/src/themes/native/test/css-variables/css/dark.css
@@ -80,25 +80,25 @@ body {
   --ion-text-color: #ffffff;
   --ion-text-color-rgb: 255, 255, 255;
 
-  --ion-color-step-50: #0d0d0d;
-  --ion-color-step-100: #1a1a1a;
-  --ion-color-step-150: #262626;
-  --ion-color-step-200: #333333;
-  --ion-color-step-250: #404040;
-  --ion-color-step-300: #4d4d4d;
-  --ion-color-step-350: #595959;
-  --ion-color-step-400: #666666;
-  --ion-color-step-450: #737373;
-  --ion-color-step-500: #808080;
-  --ion-color-step-550: #8c8c8c;
-  --ion-color-step-600: #999999;
-  --ion-color-step-650: #a6a6a6;
-  --ion-color-step-700: #b3b3b3;
-  --ion-color-step-750: #bfbfbf;
-  --ion-color-step-800: #cccccc;
-  --ion-color-step-850: #d9d9d9;
-  --ion-color-step-900: #e6e6e6;
-  --ion-color-step-950: #f2f2f2;
+  --ion-color-gray-50: #0d0d0d;
+  --ion-color-gray-100: #1a1a1a;
+  --ion-color-gray-150: #262626;
+  --ion-color-gray-200: #333333;
+  --ion-color-gray-250: #404040;
+  --ion-color-gray-300: #4d4d4d;
+  --ion-color-gray-350: #595959;
+  --ion-color-gray-400: #666666;
+  --ion-color-gray-450: #737373;
+  --ion-color-gray-500: #808080;
+  --ion-color-gray-550: #8c8c8c;
+  --ion-color-gray-600: #999999;
+  --ion-color-gray-650: #a6a6a6;
+  --ion-color-gray-700: #b3b3b3;
+  --ion-color-gray-750: #bfbfbf;
+  --ion-color-gray-800: #cccccc;
+  --ion-color-gray-850: #d9d9d9;
+  --ion-color-gray-900: #e6e6e6;
+  --ion-color-gray-950: #f2f2f2;
 
   --ion-item-background: #000000;
 
@@ -106,9 +106,9 @@ body {
 }
 
 .ios ion-modal {
-  --ion-background-color: var(--ion-color-step-100);
-  --ion-toolbar-background: var(--ion-color-step-150);
-  --ion-toolbar-border-color: var(--ion-color-step-250);
+  --ion-background-color: var(--ion-color-gray-100);
+  --ion-toolbar-background: var(--ion-color-gray-150);
+  --ion-toolbar-border-color: var(--ion-color-gray-250);
 }
 
 /*
@@ -125,25 +125,25 @@ body {
 
   --ion-border-color: #222222;
 
-  --ion-color-step-50: #1e1e1e;
-  --ion-color-step-100: #2a2a2a;
-  --ion-color-step-150: #363636;
-  --ion-color-step-200: #414141;
-  --ion-color-step-250: #4d4d4d;
-  --ion-color-step-300: #595959;
-  --ion-color-step-350: #656565;
-  --ion-color-step-400: #717171;
-  --ion-color-step-450: #7d7d7d;
-  --ion-color-step-500: #898989;
-  --ion-color-step-550: #949494;
-  --ion-color-step-600: #a0a0a0;
-  --ion-color-step-650: #acacac;
-  --ion-color-step-700: #b8b8b8;
-  --ion-color-step-750: #c4c4c4;
-  --ion-color-step-800: #d0d0d0;
-  --ion-color-step-850: #dbdbdb;
-  --ion-color-step-900: #e7e7e7;
-  --ion-color-step-950: #f3f3f3;
+  --ion-color-gray-50: #1e1e1e;
+  --ion-color-gray-100: #2a2a2a;
+  --ion-color-gray-150: #363636;
+  --ion-color-gray-200: #414141;
+  --ion-color-gray-250: #4d4d4d;
+  --ion-color-gray-300: #595959;
+  --ion-color-gray-350: #656565;
+  --ion-color-gray-400: #717171;
+  --ion-color-gray-450: #7d7d7d;
+  --ion-color-gray-500: #898989;
+  --ion-color-gray-550: #949494;
+  --ion-color-gray-600: #a0a0a0;
+  --ion-color-gray-650: #acacac;
+  --ion-color-gray-700: #b8b8b8;
+  --ion-color-gray-750: #c4c4c4;
+  --ion-color-gray-800: #d0d0d0;
+  --ion-color-gray-850: #dbdbdb;
+  --ion-color-gray-900: #e7e7e7;
+  --ion-color-gray-950: #f3f3f3;
 
   --ion-item-background: #1e1e1e;
 
diff --git a/core/src/themes/native/test/css-variables/css/oceanic.css b/core/src/themes/native/test/css-variables/css/oceanic.css
index 81e6ca5172..46aece732c 100644
--- a/core/src/themes/native/test/css-variables/css/oceanic.css
+++ b/core/src/themes/native/test/css-variables/css/oceanic.css
@@ -96,24 +96,24 @@
   --ion-text-color: #fff;
   --ion-text-color-rgb: 255,255,255;
 
-  --ion-color-step-50: #26363e;
-  --ion-color-step-100: #324048;
-  --ion-color-step-150: #3d4b52;
-  --ion-color-step-200: #49555d;
-  --ion-color-step-250: #546067;
-  --ion-color-step-300: #5f6b71;
-  --ion-color-step-350: #6b757b;
-  --ion-color-step-400: #768085;
-  --ion-color-step-450: #828a8f;
-  --ion-color-step-500: #8d959a;
-  --ion-color-step-550: #98a0a4;
-  --ion-color-step-600: #a4aaae;
-  --ion-color-step-650: #afb5b8;
-  --ion-color-step-700: #bbbfc2;
-  --ion-color-step-750: #c6cacc;
-  --ion-color-step-800: #d1d5d6;
-  --ion-color-step-850: #dddfe1;
-  --ion-color-step-900: #e8eaeb;
-  --ion-color-step-950: #f4f4f5;
-  --ion-color-step-1000: #fff;
+  --ion-color-gray-50: #26363e;
+  --ion-color-gray-100: #324048;
+  --ion-color-gray-150: #3d4b52;
+  --ion-color-gray-200: #49555d;
+  --ion-color-gray-250: #546067;
+  --ion-color-gray-300: #5f6b71;
+  --ion-color-gray-350: #6b757b;
+  --ion-color-gray-400: #768085;
+  --ion-color-gray-450: #828a8f;
+  --ion-color-gray-500: #8d959a;
+  --ion-color-gray-550: #98a0a4;
+  --ion-color-gray-600: #a4aaae;
+  --ion-color-gray-650: #afb5b8;
+  --ion-color-gray-700: #bbbfc2;
+  --ion-color-gray-750: #c6cacc;
+  --ion-color-gray-800: #d1d5d6;
+  --ion-color-gray-850: #dddfe1;
+  --ion-color-gray-900: #e8eaeb;
+  --ion-color-gray-950: #f4f4f5;
+  --ion-color-gray-1000: #fff;
 }
diff --git a/core/src/themes/native/test/steps/index.html b/core/src/themes/native/test/steps/index.html
deleted file mode 100644
index 3579469b36..0000000000
--- a/core/src/themes/native/test/steps/index.html
+++ /dev/null
@@ -1,225 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-  <head>
-    <meta charset="UTF-8" />
-    <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" />
-
-    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
-    <script src="../../../../../scripts/testing/scripts.js"></script>
-    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
-    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
-    <style>
-      .block {
-        display: inline-block;
-        height: 60px;
-        width: 150px;
-      }
-
-      .background-step-50 {
-        background: var(--ion-color-step-50, #f2f2f2);
-      }
-
-      .background-step-100 {
-        background: var(--ion-color-step-100, #e6e6e6);
-      }
-
-      .background-step-150 {
-        background: var(--ion-color-step-150, #d9d9d9);
-      }
-
-      .background-step-200 {
-        background: var(--ion-color-step-200, #cccccc);
-      }
-
-      .background-step-250 {
-        background: var(--ion-color-step-250, #bfbfbf);
-      }
-
-      .background-step-300 {
-        background: var(--ion-color-step-300, #b3b3b3);
-      }
-
-      .background-step-350 {
-        background: var(--ion-color-step-350, #a6a6a6);
-      }
-
-      .background-step-400 {
-        background: var(--ion-color-step-400, #999999);
-      }
-
-      .background-step-450 {
-        background: var(--ion-color-step-450, #8c8c8c);
-      }
-
-      .background-step-500 {
-        background: var(--ion-color-step-500, gray);
-      }
-
-      .background-step-550 {
-        background: var(--ion-color-step-550, #737373);
-      }
-
-      .background-step-600 {
-        background: var(--ion-color-step-600, #666666);
-      }
-
-      .background-step-650 {
-        background: var(--ion-color-step-650, #595959);
-      }
-
-      .background-step-700 {
-        background: var(--ion-color-step-700, #4d4d4d);
-      }
-
-      .background-step-750 {
-        background: var(--ion-color-step-750, #404040);
-      }
-
-      .background-step-800 {
-        background: var(--ion-color-step-800, #333333);
-      }
-
-      .background-step-850 {
-        background: var(--ion-color-step-850, #262626);
-      }
-
-      .background-step-900 {
-        background: var(--ion-color-step-900, #1a1a1a);
-      }
-
-      .background-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-color-step-50, #f2f2f2);
-      }
-    </style>
-  </head>
-
-  <body>
-    <ion-app>
-      <ion-content class="ion-padding">
-        <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</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>
-</html>
diff --git a/core/src/themes/test/color/index.html b/core/src/themes/test/color/index.html
index fb18697829..30c7d4db3e 100644
--- a/core/src/themes/test/color/index.html
+++ b/core/src/themes/test/color/index.html
@@ -30,6 +30,7 @@
 
       .row {
         display: flex;
+        flex-wrap: wrap;
         justify-content: center;
         margin: 16px 10px;
         gap: 10px;
@@ -86,6 +87,13 @@
         background: var(--ion-color-subtle-tint);
         color: var(--ion-color-subtle-contrast);
       }
+
+      .color-tile {
+        border: 1px solid #f2f2f2;
+        height: 40px;
+        width: 80px;
+        cursor: pointer;
+      }
     </style>
   </head>
 
@@ -233,7 +241,110 @@
             </div>
           </div>
         </div>
+
+        <div class="grid">
+          <div class="column">
+            <h2>Gray</h2>
+            <div id="gray" class="row"></div>
+          </div>
+
+          <div class="column">
+            <h2>Text</h2>
+            <div id="text" class="row"></div>
+          </div>
+        </div>
       </ion-content>
     </ion-app>
+
+    <script>
+      document.addEventListener('DOMContentLoaded', function () {
+        const generateGrayColors = () => {
+          const grayContainer = document.getElementById('gray');
+          const bodyStyles = getComputedStyle(document.body);
+
+          if (!bodyStyles.getPropertyValue('--ion-color-gray-0')) {
+            const error = document.createElement('span');
+            error.textContent = 'Gray color variables not found.';
+            grayContainer.appendChild(error);
+
+            return;
+          }
+
+          for (let i = 0; i <= 1000; i += 50) {
+            const grayColor = `--ion-color-gray-${i}`;
+
+            const colorValue = bodyStyles.getPropertyValue(grayColor).trim();
+
+            const item = document.createElement('span');
+
+            const color = document.createElement('div');
+            color.classList.add('block', 'color-tile');
+            color.style.backgroundColor = `var(${grayColor})`;
+
+            color.addEventListener('click', () => {
+              navigator.clipboard.writeText(grayColor);
+              console.log(`${grayColor} copied to clipboard`);
+            });
+
+            item.appendChild(color);
+
+            const name = document.createElement('div');
+            name.textContent = `gray-${i}`;
+            item.appendChild(name);
+
+            const value = document.createElement('div');
+            value.textContent = colorValue;
+            item.appendChild(value);
+
+            grayContainer.appendChild(item);
+          }
+        };
+
+        const generateTextColors = () => {
+          const textContainer = document.getElementById('text');
+          const bodyStyles = getComputedStyle(document.body);
+
+          if (!bodyStyles.getPropertyValue('--ion-color-text-0')) {
+            const error = document.createElement('span');
+            error.textContent = 'Text color variables not found.';
+            textContainer.appendChild(error);
+
+            return;
+          }
+
+          for (let i = 0; i <= 1000; i += 50) {
+            const textColor = `--ion-color-text-${i}`;
+
+            const colorValue = bodyStyles.getPropertyValue(textColor).trim();
+
+            const item = document.createElement('span');
+
+            const color = document.createElement('div');
+            color.classList.add('block', 'color-tile');
+            color.style.backgroundColor = `var(${textColor})`;
+
+            color.addEventListener('click', () => {
+              navigator.clipboard.writeText(textColor);
+              console.log(`${textColor} copied to clipboard`);
+            });
+
+            item.appendChild(color);
+
+            const name = document.createElement('div');
+            name.textContent = `text-${i}`;
+            item.appendChild(name);
+
+            const value = document.createElement('div');
+            value.textContent = colorValue;
+            item.appendChild(value);
+
+            textContainer.appendChild(item);
+          }
+        };
+
+        generateGrayColors();
+        generateTextColors();
+      });
+    </script>
   </body>
 </html>
diff --git a/packages/react-router/test/base/src/theme/variables.css b/packages/react-router/test/base/src/theme/variables.css
index 7bcbe5d6e2..d853b6b3a9 100644
--- a/packages/react-router/test/base/src/theme/variables.css
+++ b/packages/react-router/test/base/src/theme/variables.css
@@ -159,25 +159,25 @@ http://ionicframework.com/docs/theming/ */
     --ion-text-color: #ffffff;
     --ion-text-color-rgb: 255, 255, 255;
 
-    --ion-color-step-50: #0d0d0d;
-    --ion-color-step-100: #1a1a1a;
-    --ion-color-step-150: #262626;
-    --ion-color-step-200: #333333;
-    --ion-color-step-250: #404040;
-    --ion-color-step-300: #4d4d4d;
-    --ion-color-step-350: #595959;
-    --ion-color-step-400: #666666;
-    --ion-color-step-450: #737373;
-    --ion-color-step-500: #808080;
-    --ion-color-step-550: #8c8c8c;
-    --ion-color-step-600: #999999;
-    --ion-color-step-650: #a6a6a6;
-    --ion-color-step-700: #b3b3b3;
-    --ion-color-step-750: #bfbfbf;
-    --ion-color-step-800: #cccccc;
-    --ion-color-step-850: #d9d9d9;
-    --ion-color-step-900: #e6e6e6;
-    --ion-color-step-950: #f2f2f2;
+    --ion-color-gray-50: #0d0d0d;
+    --ion-color-gray-100: #1a1a1a;
+    --ion-color-gray-150: #262626;
+    --ion-color-gray-200: #333333;
+    --ion-color-gray-250: #404040;
+    --ion-color-gray-300: #4d4d4d;
+    --ion-color-gray-350: #595959;
+    --ion-color-gray-400: #666666;
+    --ion-color-gray-450: #737373;
+    --ion-color-gray-500: #808080;
+    --ion-color-gray-550: #8c8c8c;
+    --ion-color-gray-600: #999999;
+    --ion-color-gray-650: #a6a6a6;
+    --ion-color-gray-700: #b3b3b3;
+    --ion-color-gray-750: #bfbfbf;
+    --ion-color-gray-800: #cccccc;
+    --ion-color-gray-850: #d9d9d9;
+    --ion-color-gray-900: #e6e6e6;
+    --ion-color-gray-950: #f2f2f2;
 
     --ion-toolbar-background: #0d0d0d;
 
@@ -198,25 +198,25 @@ http://ionicframework.com/docs/theming/ */
 
     --ion-border-color: #222222;
 
-    --ion-color-step-50: #1e1e1e;
-    --ion-color-step-100: #2a2a2a;
-    --ion-color-step-150: #363636;
-    --ion-color-step-200: #414141;
-    --ion-color-step-250: #4d4d4d;
-    --ion-color-step-300: #595959;
-    --ion-color-step-350: #656565;
-    --ion-color-step-400: #717171;
-    --ion-color-step-450: #7d7d7d;
-    --ion-color-step-500: #898989;
-    --ion-color-step-550: #949494;
-    --ion-color-step-600: #a0a0a0;
-    --ion-color-step-650: #acacac;
-    --ion-color-step-700: #b8b8b8;
-    --ion-color-step-750: #c4c4c4;
-    --ion-color-step-800: #d0d0d0;
-    --ion-color-step-850: #dbdbdb;
-    --ion-color-step-900: #e7e7e7;
-    --ion-color-step-950: #f3f3f3;
+    --ion-color-gray-50: #1e1e1e;
+    --ion-color-gray-100: #2a2a2a;
+    --ion-color-gray-150: #363636;
+    --ion-color-gray-200: #414141;
+    --ion-color-gray-250: #4d4d4d;
+    --ion-color-gray-300: #595959;
+    --ion-color-gray-350: #656565;
+    --ion-color-gray-400: #717171;
+    --ion-color-gray-450: #7d7d7d;
+    --ion-color-gray-500: #898989;
+    --ion-color-gray-550: #949494;
+    --ion-color-gray-600: #a0a0a0;
+    --ion-color-gray-650: #acacac;
+    --ion-color-gray-700: #b8b8b8;
+    --ion-color-gray-750: #c4c4c4;
+    --ion-color-gray-800: #d0d0d0;
+    --ion-color-gray-850: #dbdbdb;
+    --ion-color-gray-900: #e7e7e7;
+    --ion-color-gray-950: #f3f3f3;
 
     --ion-item-background: #1e1e1e;
 
diff --git a/packages/react/test/base/src/theme/variables.css b/packages/react/test/base/src/theme/variables.css
index a44fcdd01d..ea79b6d4eb 100644
--- a/packages/react/test/base/src/theme/variables.css
+++ b/packages/react/test/base/src/theme/variables.css
@@ -159,25 +159,25 @@ http://ionicframework.com/docs/theming/ */
     --ion-text-color: #ffffff;
     --ion-text-color-rgb: 255,255,255;
 
-    --ion-color-step-50: #0d0d0d;
-    --ion-color-step-100: #1a1a1a;
-    --ion-color-step-150: #262626;
-    --ion-color-step-200: #333333;
-    --ion-color-step-250: #404040;
-    --ion-color-step-300: #4d4d4d;
-    --ion-color-step-350: #595959;
-    --ion-color-step-400: #666666;
-    --ion-color-step-450: #737373;
-    --ion-color-step-500: #808080;
-    --ion-color-step-550: #8c8c8c;
-    --ion-color-step-600: #999999;
-    --ion-color-step-650: #a6a6a6;
-    --ion-color-step-700: #b3b3b3;
-    --ion-color-step-750: #bfbfbf;
-    --ion-color-step-800: #cccccc;
-    --ion-color-step-850: #d9d9d9;
-    --ion-color-step-900: #e6e6e6;
-    --ion-color-step-950: #f2f2f2;
+    --ion-color-gray-50: #0d0d0d;
+    --ion-color-gray-100: #1a1a1a;
+    --ion-color-gray-150: #262626;
+    --ion-color-gray-200: #333333;
+    --ion-color-gray-250: #404040;
+    --ion-color-gray-300: #4d4d4d;
+    --ion-color-gray-350: #595959;
+    --ion-color-gray-400: #666666;
+    --ion-color-gray-450: #737373;
+    --ion-color-gray-500: #808080;
+    --ion-color-gray-550: #8c8c8c;
+    --ion-color-gray-600: #999999;
+    --ion-color-gray-650: #a6a6a6;
+    --ion-color-gray-700: #b3b3b3;
+    --ion-color-gray-750: #bfbfbf;
+    --ion-color-gray-800: #cccccc;
+    --ion-color-gray-850: #d9d9d9;
+    --ion-color-gray-900: #e6e6e6;
+    --ion-color-gray-950: #f2f2f2;
 
     --ion-item-background: #000000;
 
@@ -185,9 +185,9 @@ http://ionicframework.com/docs/theming/ */
   }
 
   .ios ion-modal {
-    --ion-background-color: var(--ion-color-step-100);
-    --ion-toolbar-background: var(--ion-color-step-150);
-    --ion-toolbar-border-color: var(--ion-color-step-250);
+    --ion-background-color: var(--ion-color-gray-100);
+    --ion-toolbar-background: var(--ion-color-gray-150);
+    --ion-toolbar-border-color: var(--ion-color-gray-250);
   }
 
 
@@ -205,25 +205,25 @@ http://ionicframework.com/docs/theming/ */
 
     --ion-border-color: #222222;
 
-    --ion-color-step-50: #1e1e1e;
-    --ion-color-step-100: #2a2a2a;
-    --ion-color-step-150: #363636;
-    --ion-color-step-200: #414141;
-    --ion-color-step-250: #4d4d4d;
-    --ion-color-step-300: #595959;
-    --ion-color-step-350: #656565;
-    --ion-color-step-400: #717171;
-    --ion-color-step-450: #7d7d7d;
-    --ion-color-step-500: #898989;
-    --ion-color-step-550: #949494;
-    --ion-color-step-600: #a0a0a0;
-    --ion-color-step-650: #acacac;
-    --ion-color-step-700: #b8b8b8;
-    --ion-color-step-750: #c4c4c4;
-    --ion-color-step-800: #d0d0d0;
-    --ion-color-step-850: #dbdbdb;
-    --ion-color-step-900: #e7e7e7;
-    --ion-color-step-950: #f3f3f3;
+    --ion-color-gray-50: #1e1e1e;
+    --ion-color-gray-100: #2a2a2a;
+    --ion-color-gray-150: #363636;
+    --ion-color-gray-200: #414141;
+    --ion-color-gray-250: #4d4d4d;
+    --ion-color-gray-300: #595959;
+    --ion-color-gray-350: #656565;
+    --ion-color-gray-400: #717171;
+    --ion-color-gray-450: #7d7d7d;
+    --ion-color-gray-500: #898989;
+    --ion-color-gray-550: #949494;
+    --ion-color-gray-600: #a0a0a0;
+    --ion-color-gray-650: #acacac;
+    --ion-color-gray-700: #b8b8b8;
+    --ion-color-gray-750: #c4c4c4;
+    --ion-color-gray-800: #d0d0d0;
+    --ion-color-gray-850: #dbdbdb;
+    --ion-color-gray-900: #e7e7e7;
+    --ion-color-gray-950: #f3f3f3;
 
     --ion-item-background: #1e1e1e;