feat(modal): use gray tokens

Author: thetaPC

core/src/components/modal/modal.native.scss

@@ -41,7 +41,7 @@
   width: 36px;
   height: 5px;
 
-  background: var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be));
+  background: var(--ion-components-ion-modal-handle-bg);
 
   &::before {
     /**

core/src/themes/ios/dark.tokens.ts

@@ -72,6 +72,7 @@ export const darkTheme: DarkTheme = {
       background: 'var(--ion-background-color-step-100)',
       toolbarBackground: 'var(--ion-background-color-step-150)',
       toolbarBorderColor: 'var(--ion-background-color-step-250)',
+      handleBg: colors.gray['350']!,
     },
     IonDatetime: {
       bg: colors.gray['950']!,

core/src/themes/ios/light.tokens.ts

@@ -27,5 +27,8 @@ export const lightTheme: LightTheme = {
     IonItem: {
       paragraphTextColor: '#a3a3a3',
     },
+    IonModal: {
+      handleBg: '#c0c0be',
+    },
   },
 };

core/src/themes/md/dark.tokens.ts

@@ -93,5 +93,8 @@ export const darkTheme: DarkTheme = {
     IonDatetimeButton: {
       bg: colors.gray['300']!,
     },
+    IonModal: {
+      handleBg: colors.gray['350']!,
+    },
   },
 };

core/src/themes/md/light.tokens.ts

@@ -17,5 +17,8 @@ export const lightTheme: LightTheme = {
       colorFocused: '#35404e', // Available only in md
       separatorColor: '#73849a',
     },
+    IonModal: {
+      handleBg: '#c0c0be',
+    },
   },
 };

core/src/themes/native/test/steps/index.html

@@ -219,7 +219,27 @@
         <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>
+
+        <h2>Gray</h2>
+        <div id="gray"></div>
       </ion-content>
     </ion-app>
+
+    <script>
+      // create gray color steps dynamically using the CSS variables
+      // like --ion-color-step-50, --ion-color-step-100, etc.
+      const grayContainer = document.getElementById('gray');
+      for (let i = 50; i <= 950; i += 50) {
+        // i want it to have a block showing the color gray step
+        // then the text "Gray {i}"
+        // then the value of the CSS variable --ion-color-gray-{i}
+        const block = document.createElement('div');
+        block.classList.add('block');
+        block.style.backgroundColor = `var(--ion-color-gray-${i})`;
+        block.style.color = `var(--ion-color-gray-${950 - i})`;
+        block.textContent = `Gray ${i} - var(--ion-color-gray-${i})`;
+        grayContainer.appendChild(block);
+      }
+    </script>
   </body>
 </html>