feat(tokens): replace remaining stepped color CSS variables

Author: thetaPC

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)',
     },
   },
 };

core/src/themes/native/test/css-variables/css/dark.css

@@ -80,35 +80,35 @@ 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;
 
   --ion-card-background: #1c1c1d;
 }
 
 .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;
 

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;
 }