feat(datetime-button): use gray tokens

Author: thetaPC

core/src/components/datetime-button/datetime-button.ios.scss

@@ -8,5 +8,5 @@
 }
 
 :host button.ion-activated {
-  color: $text-color-step-400;
+  color: var(--ion-color-gray-600);
 }

core/src/components/datetime-button/datetime-button.scss

@@ -23,7 +23,7 @@
 
   border: none;
 
-  background: var(--ion-color-step-300, var(--ion-background-color-step-300, #edeef0));
+  background: var(--ion-components-ion-datetime-button-bg);
 
   color: $text-color;
 

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

@@ -225,5 +225,8 @@ export const darkTheme: DarkTheme = {
     IonBreadcrumb: {
       separatorColor: colors.gray['550']!,
     },
+    IonDatetimeButton: {
+      bg: colors.gray['300']!,
+    },
   },
 };

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

@@ -164,5 +164,8 @@ export const lightTheme: LightTheme = {
     IonBreadcrumb: {
       separatorColor: '#73849a',
     },
+    IonDatetimeButton: {
+      bg: '#edeef0',
+    },
   },
 };

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

@@ -3,4 +3,10 @@ import type { DarkTheme } from '../themes.interfaces';
 
 export const darkTheme: DarkTheme = {
   ...baseDarkTheme,
+
+  components: {
+    IonDatetimeButton: {
+      bg: '#595959',
+    },
+  },
 };

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

@@ -90,5 +90,8 @@ export const darkTheme: DarkTheme = {
       colorFocused: colors.gray['800']!, // Available only in md
       separatorColor: colors.gray['550']!,
     },
+    IonDatetimeButton: {
+      bg: colors.gray['300']!,
+    },
   },
 };