chore(themes): update gray tokens

Author: thetaPC

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

@@ -1,8 +1,6 @@
-import { mix } from '../../utils/theme';
+import { mix, generateColorSteps } from '../../utils/theme';
 import type { DarkTheme } from '../themes.interfaces';
 
-import { defaultPrimitiveColors } from './default.tokens.primitives';
-
 const colors = {
   primary: '#4d8dff',
   secondary: '#46b1ff',
@@ -13,6 +11,7 @@ const colors = {
   light: '#222428',
   medium: '#989aa2',
   dark: '#f4f5f8',
+  gray: generateColorSteps('#000000', '#ffffff', true),
 };
 
 export const darkTheme: DarkTheme = {
@@ -162,6 +161,7 @@ export const darkTheme: DarkTheme = {
         tint: mix('#000', colors.dark, '12%'),
       },
     },
+    gray: colors.gray,
   },
 
   backgroundColor: '#000000',
@@ -220,9 +220,5 @@ export const darkTheme: DarkTheme = {
     IonItem: {
       background: '#000000',
     },
-    IonDatetime: {
-      bg: defaultPrimitiveColors.gray['50']!,
-      timeBodyBg: defaultPrimitiveColors.gray['650']!,
-    },
   },
 };

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

@@ -1,8 +1,6 @@
 import { mix } from '../../utils/theme';
 import type { LightTheme } from '../themes.interfaces';
 
-import { defaultPrimitiveColors } from './default.tokens.primitives';
-
 const colors = {
   primary: '#0054e9',
   secondary: '#0163aa',
@@ -162,10 +160,4 @@ export const lightTheme: LightTheme = {
       },
     },
   },
-  components: {
-    IonDatetime: {
-      bg: defaultPrimitiveColors.white,
-      timeBodyBg: '#edeef0',
-    },
-  },
 };

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

@@ -1,8 +1,9 @@
-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);
+const colors = {
+  gray: baseDarkTheme.color!.gray!,
+};
 
 export const darkTheme: DarkTheme = {
   ...baseDarkTheme,
@@ -56,7 +57,7 @@ export const darkTheme: DarkTheme = {
 
   color: {
     // TODO: Update hex values to use the text color variable and background color variable
-    gray: graySteps,
+    gray: colors.gray,
   },
 
   components: {
@@ -72,7 +73,18 @@ export const darkTheme: DarkTheme = {
       toolbarBorderColor: 'var(--ion-background-color-step-250)',
     },
     IonDatetime: {
-      timeBodyBg: graySteps['300']!,
+      bg: colors.gray['950']!,
+      timeBodyBg: colors.gray['300']!,
+    },
+    IonBreadcrumb: {
+      color: colors.gray['850']!,
+      bgFocused: colors.gray['50']!,
+      iconColor: colors.gray['400']!,
+      iconColorActive: colors.gray['850']!,
+      iconColorFocused: colors.gray['750']!, // Available only in iOS
+      indicatorBg: colors.gray['100']!,
+      indicatorBgFocused: colors.gray['150']!,
+      separatorColor: colors.gray['550']!,
     },
   },
 };

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

@@ -1,3 +1,28 @@
+import { defaultPrimitiveColors } from '../base/default.tokens.primitives';
 import type { LightTheme } from '../themes.interfaces';
 
-export const lightTheme: LightTheme = {};
+const colors = {
+  gray: defaultPrimitiveColors.gray,
+};
+
+export const lightTheme: LightTheme = {
+  color: {
+    gray: colors.gray,
+  },
+  components: {
+    IonDatetime: {
+      bg: colors.gray['950']!,
+      timeBodyBg: '#edeef0',
+    },
+    IonBreadcrumb: {
+      color: '#2d4665',
+      bgFocused: 'rgba(233, 237, 243, 0.7)',
+      iconColor: '#92a0b3',
+      iconColorActive: '#242d39',
+      iconColorFocused: '#445b78', // Available only in iOS
+      indicatorBg: '#e9edf3',
+      indicatorBgFocused: '#d9e0ea',
+      separatorColor: '#73849a',
+    },
+  },
+};

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

@@ -2,7 +2,9 @@ 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);
+const colors = {
+  gray: generateColorSteps('#ffffff', '#121212', true),
+};
 
 export const darkTheme: DarkTheme = {
   ...baseDarkTheme,
@@ -58,7 +60,7 @@ export const darkTheme: DarkTheme = {
 
   color: {
     // TODO: Update hex values to use the text color variable and background color variable
-    gray: graySteps,
+    gray: colors.gray,
   },
 
   components: {
@@ -75,8 +77,18 @@ export const darkTheme: DarkTheme = {
       background: '#1f1f1f',
     },
     IonDatetime: {
-      bg: graySteps['100']!,
-      timeBodyBg: graySteps['300']!,
+      bg: colors.gray['100']!,
+      timeBodyBg: colors.gray['300']!,
+    },
+    IonBreadcrumb: {
+      color: colors.gray['600']!,
+      bgFocused: colors.gray['50']!,
+      iconColor: colors.gray['550']!,
+      iconColorActive: colors.gray['850']!,
+      indicatorBg: colors.gray['100']!,
+      indicatorBgFocused: colors.gray['150']!,
+      colorFocused: colors.gray['800']!, // Available only in md
+      separatorColor: colors.gray['550']!,
     },
   },
 };

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

@@ -1,3 +1,21 @@
+import { defaultPrimitiveColors } from '../base/default.tokens.primitives';
 import type { LightTheme } from '../themes.interfaces';
 
-export const lightTheme: LightTheme = {};
+export const lightTheme: LightTheme = {
+  components: {
+    IonDatetime: {
+      bg: defaultPrimitiveColors.white,
+      timeBodyBg: '#edeef0',
+    },
+    IonBreadcrumb: {
+      color: '#677483',
+      bgFocused: defaultPrimitiveColors.white,
+      iconColor: '#7d8894',
+      iconColorActive: '#222d3a',
+      indicatorBg: '#eef1f3',
+      indicatorBgFocused: '#dfe5e8',
+      colorFocused: '#35404e', // Available only in md
+      separatorColor: '#73849a',
+    },
+  },
+};