feat(tokens): use gray on datetime

Author: thetaPC

core/src/components/datetime/datetime.md.scss

@@ -6,7 +6,7 @@
 // --------------------------------------------------
 
 :host {
-  --background: var(--ion-color-step-100, var(--ion-background-color-step-100, #ffffff));
+  --background: var(--ion-components-ion-datetime-bg);
   --title-color: #{current-color(contrast)};
 }
 

core/src/components/datetime/datetime.native.scss

@@ -77,7 +77,7 @@
   @include globals.border-radius(8px);
   @include globals.padding(6px, 12px, 6px, 12px);
 
-  background: var(--ion-color-step-300, var(--ion-background-color-step-300, #edeef0));
+  background: var(--ion-components-ion-datetime-time-body-bg);
 
   color: globals.$text-color;
 }

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

@@ -221,7 +221,8 @@ export const darkTheme: DarkTheme = {
       background: '#000000',
     },
     IonDatetime: {
-      background: defaultPrimitiveColors.gray['50']!,
+      bg: defaultPrimitiveColors.gray['50']!,
+      timeBodyBg: defaultPrimitiveColors.gray['650']!,
     },
   },
 };

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

@@ -164,7 +164,8 @@ export const lightTheme: LightTheme = {
   },
   components: {
     IonDatetime: {
-      background: defaultPrimitiveColors.gray['50']!,
+      bg: defaultPrimitiveColors.white,
+      timeBodyBg: '#edeef0',
     },
   },
 };

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

@@ -2,6 +2,8 @@ import { generateColorSteps } from '../../utils/theme';
 import { darkTheme as baseDarkTheme } from '../base/dark.tokens';
 import type { DarkTheme } from '../themes.interfaces';
 
+const graySteps = generateColorSteps('#ffffff', '#000000', true);
+
 export const darkTheme: DarkTheme = {
   ...baseDarkTheme,
 
@@ -54,7 +56,7 @@ export const darkTheme: DarkTheme = {
 
   color: {
     // TODO: Update hex values to use the text color variable and background color variable
-    gray: generateColorSteps('#ffffff', '#000000', true),
+    gray: graySteps,
   },
 
   components: {
@@ -69,5 +71,8 @@ export const darkTheme: DarkTheme = {
       toolbarBackground: 'var(--ion-background-color-step-150)',
       toolbarBorderColor: 'var(--ion-background-color-step-250)',
     },
+    IonDatetime: {
+      timeBodyBg: graySteps['300']!,
+    },
   },
 };

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

@@ -75,7 +75,8 @@ export const darkTheme: DarkTheme = {
       background: '#1f1f1f',
     },
     IonDatetime: {
-      background: graySteps['100']!,
+      bg: graySteps['100']!,
+      timeBodyBg: graySteps['300']!,
     },
   },
 };

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

@@ -1,10 +1,3 @@
-import { defaultPrimitiveColors } from '../base/default.tokens.primitives';
 import type { LightTheme } from '../themes.interfaces';
 
-export const lightTheme: LightTheme = {
-  components: {
-    IonDatetime: {
-      background: defaultPrimitiveColors.white,
-    },
-  },
-};
+export const lightTheme: LightTheme = {};