feat(tokens): update md and add default primitives

Author: thetaPC

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

@@ -1,6 +1,8 @@
 import { mix } from '../../utils/theme';
 import type { DarkTheme } from '../themes.interfaces';
 
+import { defaultPrimitiveColors } from './default.tokens.primitives';
+
 const colors = {
   primary: '#4d8dff',
   secondary: '#46b1ff',
@@ -218,5 +220,8 @@ export const darkTheme: DarkTheme = {
     IonItem: {
       background: '#000000',
     },
+    IonDatetime: {
+      background: defaultPrimitiveColors.gray['50']!,
+    },
   },
 };

core/src/themes/base/default.tokens.primitives.ts

@@ -0,0 +1,9 @@
+import { generateColorSteps } from '../../utils/theme';
+
+// TODO: ADD TYPE
+export const defaultPrimitiveColors = {
+  // TODO: Update hex values to use the text color variable and background color variable
+  gray: generateColorSteps('#fff', '#000'),
+  white: '#ffffff',
+  black: '#000000',
+};

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

@@ -1,7 +1,7 @@
-import { generateColorSteps } from '../../utils/theme';
 import type { DefaultTheme } from '../themes.interfaces';
 
 import { darkTheme } from './dark.tokens';
+import { defaultPrimitiveColors } from './default.tokens.primitives';
 import { lightTheme } from './light.tokens';
 
 export const defaultTheme: DefaultTheme = {
@@ -163,7 +163,6 @@ export const defaultTheme: DefaultTheme = {
   },
 
   color: {
-    // TODO: Update hex values to use the text color variable and background color variable
-    gray: generateColorSteps('#fff', '#000'),
+    ...defaultPrimitiveColors,
   },
 };

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

@@ -1,6 +1,8 @@
 import { mix } from '../../utils/theme';
 import type { LightTheme } from '../themes.interfaces';
 
+import { defaultPrimitiveColors } from './default.tokens.primitives';
+
 const colors = {
   primary: '#0054e9',
   secondary: '#0163aa',
@@ -160,4 +162,9 @@ export const lightTheme: LightTheme = {
       },
     },
   },
+  components: {
+    IonDatetime: {
+      background: defaultPrimitiveColors.gray['50']!,
+    },
+  },
 };

core/src/themes/md/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', '#121212', true);
+
 export const darkTheme: DarkTheme = {
   ...baseDarkTheme,
 
@@ -56,7 +58,7 @@ export const darkTheme: DarkTheme = {
 
   color: {
     // TODO: Update hex values to use the text color variable and background color variable
-    gray: generateColorSteps('#ffffff', '#121212', true),
+    gray: graySteps,
   },
 
   components: {
@@ -72,5 +74,8 @@ export const darkTheme: DarkTheme = {
     IonTabBar: {
       background: '#1f1f1f',
     },
+    IonDatetime: {
+      background: graySteps['100']!,
+    },
   },
 };

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

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

core/src/themes/themes.interfaces.ts

@@ -268,10 +268,10 @@ export type NumberStringKeys = {
 };
 
 // Primitive color keys
-type PrimitiveColors = 'gray';
+export type PrimitiveColors = 'gray' | 'black' | 'white';
 
 // Colors interface
-type Colors = {
+export type Colors = {
   [K in PredefinedColors]?: SemanticHue;
 } & {
   [K in PrimitiveColors]?: NumberStringKeys;