feat: update theme colors, fonts (#188)

a-ghorbani · Jan 29, 2025 · 3507e81 · 3507e81
1 parent d77757a
commit 3507e81
Show file tree

Hide file tree

Showing 21 changed files with 162 additions and 23 deletions.
diff --git a/App.tsx b/App.tsx
@@ -61,6 +61,7 @@ const App = observer(() => {
                       backgroundColor: theme.colors.background,
                     },
                     headerTintColor: theme.colors.onBackground,
+                    headerTitleStyle: styles.headerTitle,
                   }}
                   drawerContent={props => <SidebarContent {...props} />}>
                   <Drawer.Screen
@@ -120,6 +121,9 @@ const createStyles = (theme: Theme) =>
     headerWithDivider: {
       backgroundColor: theme.colors.background,
     },
+    headerTitle: {
+      ...theme.fonts.titleSmall,
+    },
   });
 
 export default App;
diff --git a/android/app/src/main/assets/fonts/Inter-Bold.ttf b/android/app/src/main/assets/fonts/Inter-Bold.ttf
diff --git a/android/app/src/main/assets/fonts/Inter-ExtraBold.ttf b/android/app/src/main/assets/fonts/Inter-ExtraBold.ttf
diff --git a/android/app/src/main/assets/fonts/Inter-Light.ttf b/android/app/src/main/assets/fonts/Inter-Light.ttf
diff --git a/android/app/src/main/assets/fonts/Inter-Medium.ttf b/android/app/src/main/assets/fonts/Inter-Medium.ttf
diff --git a/android/app/src/main/assets/fonts/Inter-Regular.ttf b/android/app/src/main/assets/fonts/Inter-Regular.ttf
diff --git a/android/app/src/main/assets/fonts/Inter-SemiBold.ttf b/android/app/src/main/assets/fonts/Inter-SemiBold.ttf
diff --git a/android/app/src/main/assets/fonts/Inter-Thin.ttf b/android/app/src/main/assets/fonts/Inter-Thin.ttf
diff --git a/android/link-assets-manifest.json b/android/link-assets-manifest.json
@@ -0,0 +1,33 @@
+{
+  "migIndex": 1,
+  "data": [
+    {
+      "path": "src/assets/fonts/Inter-Bold.ttf",
+      "sha1": "518a0361a245a66b49bc24ae0137f38328197bdc"
+    },
+    {
+      "path": "src/assets/fonts/Inter-ExtraBold.ttf",
+      "sha1": "d01b4a9a01dfdb6d9a5c6ec153d528d70706d885"
+    },
+    {
+      "path": "src/assets/fonts/Inter-Light.ttf",
+      "sha1": "6b041e6fc61656b930d8ef638a0b9d6a0ac8e084"
+    },
+    {
+      "path": "src/assets/fonts/Inter-Medium.ttf",
+      "sha1": "e2d21cdc9730ce4d4bdccb3476413a5b79fe7d52"
+    },
+    {
+      "path": "src/assets/fonts/Inter-Regular.ttf",
+      "sha1": "bd1976c1f019853ab6143ef1246e25aa66fd990e"
+    },
+    {
+      "path": "src/assets/fonts/Inter-SemiBold.ttf",
+      "sha1": "f3e44abd6661d5b861e66db22f4f79a6c466cd00"
+    },
+    {
+      "path": "src/assets/fonts/Inter-Thin.ttf",
+      "sha1": "4f2b3c3c97e618166627b4d3fff9322fa5198e81"
+    }
+  ]
+}
diff --git a/ios/PocketPal/Info.plist b/ios/PocketPal/Info.plist
@@ -32,11 +32,18 @@
 		<true/>
 	</dict>
 	<key>NSLocationWhenInUseUsageDescription</key>
-	<string></string>
+	<string/>
 	<key>UIAppFonts</key>
 	<array>
 		<string>MaterialIcons.ttf</string>
 		<string>MaterialCommunityIcons.ttf</string>
+		<string>Inter-Bold.ttf</string>
+		<string>Inter-Light.ttf</string>
+		<string>Inter-Medium.ttf</string>
+		<string>Inter-Regular.ttf</string>
+		<string>Inter-SemiBold.ttf</string>
+		<string>Inter-Thin.ttf</string>
+		<string>Inter-ExtraBold.ttf</string>
 	</array>
 	<key>UILaunchStoryboardName</key>
 	<string>LaunchScreen</string>

diff --git a/ios/Podfile.lock b/ios/Podfile.lock
@@ -1931,7 +1931,7 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
-  - RNSVG (15.10.0):
+  - RNSVG (15.11.1):
     - React-Core
   - RNVectorIcons (10.2.0):
     - DoubleConversion
@@ -2267,7 +2267,7 @@ SPEC CHECKSUMS:
   llama-rn: eb844b9cc4b240409b0411f16836416e567374f8
   nanopb: fad817b59e0457d11a5dfbde799381cd727c1275
   PromisesObjC: f5707f49cb48b9636751c5b2e7d227e43fba9f47
-  RCT-Folly: 84578c8756030547307e4572ab1947de1685c599
+  RCT-Folly: bf5c0376ffe4dd2cf438dcf86db385df9fdce648
   RCTDeprecation: 2c5e1000b04ab70b53956aa498bf7442c3c6e497
   RCTRequired: 5f785a001cf68a551c5f5040fb4c415672dbb481
   RCTTypeSafety: 6b98db8965005d32449605c0d005ecb4fee8a0f7
@@ -2342,7 +2342,7 @@ SPEC CHECKSUMS:
   RNReactNativeHapticFeedback: 00ba111b82aa266bb3ee1aa576831c2ea9a9dfad
   RNReanimated: 929c26a706dfe1af8feee9f2cf78004394e4dd04
   RNScreens: 4a5ab20b324ed1e3fe3862796b8f8e0a6208c415
-  RNSVG: 6a529f4faed8be4ebfb00f1a29e25cb046d95e61
+  RNSVG: 86fecdfc637614ba9def63f7f3f2e7795e018356
   RNVectorIcons: 182892e7d1a2f27b52d3c627eca5d2665a22ee28
   SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748
   Yoga: 3deb2471faa9916c8a82dda2a22d3fba2620ad37

diff --git a/ios/link-assets-manifest.json b/ios/link-assets-manifest.json
@@ -0,0 +1,33 @@
+{
+  "migIndex": 1,
+  "data": [
+    {
+      "path": "src/assets/fonts/Inter-Bold.ttf",
+      "sha1": "518a0361a245a66b49bc24ae0137f38328197bdc"
+    },
+    {
+      "path": "src/assets/fonts/Inter-ExtraBold.ttf",
+      "sha1": "d01b4a9a01dfdb6d9a5c6ec153d528d70706d885"
+    },
+    {
+      "path": "src/assets/fonts/Inter-Light.ttf",
+      "sha1": "6b041e6fc61656b930d8ef638a0b9d6a0ac8e084"
+    },
+    {
+      "path": "src/assets/fonts/Inter-Medium.ttf",
+      "sha1": "e2d21cdc9730ce4d4bdccb3476413a5b79fe7d52"
+    },
+    {
+      "path": "src/assets/fonts/Inter-Regular.ttf",
+      "sha1": "bd1976c1f019853ab6143ef1246e25aa66fd990e"
+    },
+    {
+      "path": "src/assets/fonts/Inter-SemiBold.ttf",
+      "sha1": "f3e44abd6661d5b861e66db22f4f79a6c466cd00"
+    },
+    {
+      "path": "src/assets/fonts/Inter-Thin.ttf",
+      "sha1": "4f2b3c3c97e618166627b4d3fff9322fa5198e81"
+    }
+  ]
+}
diff --git a/react-native.config.js b/react-native.config.js
@@ -0,0 +1,7 @@
+module.exports = {
+  project: {
+    ios: {},
+    android: {},
+  },
+  assets: ['./src/assets/fonts'],
+};
diff --git a/src/assets/fonts/Inter-Bold.ttf b/src/assets/fonts/Inter-Bold.ttf
diff --git a/src/assets/fonts/Inter-ExtraBold.ttf b/src/assets/fonts/Inter-ExtraBold.ttf
diff --git a/src/assets/fonts/Inter-Light.ttf b/src/assets/fonts/Inter-Light.ttf
diff --git a/src/assets/fonts/Inter-Medium.ttf b/src/assets/fonts/Inter-Medium.ttf
diff --git a/src/assets/fonts/Inter-Regular.ttf b/src/assets/fonts/Inter-Regular.ttf
diff --git a/src/assets/fonts/Inter-SemiBold.ttf b/src/assets/fonts/Inter-SemiBold.ttf
diff --git a/src/assets/fonts/Inter-Thin.ttf b/src/assets/fonts/Inter-Thin.ttf
diff --git a/src/utils/theme.ts b/src/utils/theme.ts
@@ -1,17 +1,18 @@
 import {
   MD3DarkTheme,
   DefaultTheme as PaperLightTheme,
+  configureFonts,
 } from 'react-native-paper';
 
 import {MD3BaseColors, SemanticColors, Theme} from './types';
 import {withOpacity, stateLayerOpacity} from './colorUtils';
 
 // MD3 key colors (seed colors)
 const md3BaseColors: Partial<MD3BaseColors> = {
-  primary: '#111111',
-  secondary: '#3669F5',
-  tertiary: '#018786',
-  error: '#B3261E',
+  primary: '#333333',
+  secondary: '#1E4DF6',
+  tertiary: '#7880FF',
+  error: '#FF653F',
 };
 
 const createBaseColors = (isDark: boolean): MD3BaseColors => {
@@ -69,15 +70,15 @@ const createBaseColors = (isDark: boolean): MD3BaseColors => {
     onSecondaryContainer: '#424242',
     tertiary: md3BaseColors.tertiary!,
     onTertiary: '#FFFFFF',
-    tertiaryContainer: '#9EE6E5',
+    tertiaryContainer: '#F1F3FF',
     onTertiaryContainer: '#013332',
     error: md3BaseColors.error!,
     onError: '#FFFFFF',
     errorContainer: '#E6ACA9',
     onErrorContainer: '#330B09',
     background: '#ffffff',
     onBackground: '#111111',
-    surface: '#f1f3f5',
+    surface: '#FAFAFA',
     onSurface: '#333333',
     surfaceVariant: '#e4e4e6',
     onSurfaceVariant: '#646466',
@@ -164,6 +165,59 @@ const createSemanticColors = (
     : 'rgba(118, 118, 128, 0.12)',
 });
 
+export const fontStyles = {
+  regular: {fontFamily: 'Inter-Regular'},
+  medium: {fontFamily: 'Inter-Medium'},
+  bold: {fontFamily: 'Inter-Bold'},
+  thin: {fontFamily: 'Inter-Thin'},
+  light: {fontFamily: 'Inter-Light'},
+  semibold: {fontFamily: 'Inter-SemiBold'},
+  extraBold: {fontFamily: 'Inter-ExtraBold'},
+};
+
+const baseFontVariants = configureFonts({
+  config: {...fontStyles.regular},
+});
+
+const customVariants = {
+  // Add custom variants:
+  bold: {
+    ...baseFontVariants.bodyMedium,
+    ...fontStyles.bold,
+  },
+  medium: {
+    ...baseFontVariants.bodyMedium,
+    ...fontStyles.medium,
+  },
+  thin: {
+    ...baseFontVariants.bodyMedium,
+    ...fontStyles.thin,
+  },
+  light: {
+    ...baseFontVariants.bodyMedium,
+    ...fontStyles.light,
+  },
+  semibold: {
+    ...baseFontVariants.bodyMedium,
+    ...fontStyles.semibold,
+  },
+} as const;
+
+const configuredFonts = configureFonts({
+  config: {
+    ...baseFontVariants,
+    ...customVariants,
+    displayMedium: {
+      ...baseFontVariants.displayMedium,
+      ...fontStyles.bold,
+    },
+    titleSmall: {
+      ...baseFontVariants.titleSmall,
+      ...fontStyles.medium,
+    },
+  },
+});
+
 const createTheme = (isDark: boolean): Theme => {
   const baseTheme = isDark ? MD3DarkTheme : PaperLightTheme;
   const baseColors = createBaseColors(isDark);
@@ -181,82 +235,83 @@ const createTheme = (isDark: boolean): Theme => {
     },
     fonts: {
       ...baseTheme.fonts,
+      ...configuredFonts,
       dateDividerTextStyle: {
+        ...fontStyles.extraBold,
         color: baseColors.onSurface,
         fontSize: 12,
-        fontWeight: '800',
         lineHeight: 16,
         opacity: 0.4,
       },
       emptyChatPlaceholderTextStyle: {
         color: baseColors.onSurface,
         fontSize: 16,
-        fontWeight: '500',
         lineHeight: 24,
+        ...fontStyles.medium,
       },
       inputTextStyle: {
         fontSize: 16,
-        fontWeight: '500',
         lineHeight: 24,
+        ...fontStyles.medium,
       },
       receivedMessageBodyTextStyle: {
         color: baseColors.onPrimary,
         fontSize: 16,
-        fontWeight: '500',
         lineHeight: 24,
+        ...fontStyles.medium,
       },
       receivedMessageCaptionTextStyle: {
         color: baseColors.onSurfaceVariant,
         fontSize: 12,
-        fontWeight: '500',
         lineHeight: 16,
+        ...fontStyles.medium,
       },
       receivedMessageLinkDescriptionTextStyle: {
         color: baseColors.onPrimary,
         fontSize: 14,
-        fontWeight: '400',
         lineHeight: 20,
+        ...fontStyles.regular,
       },
       receivedMessageLinkTitleTextStyle: {
         color: baseColors.onPrimary,
         fontSize: 16,
-        fontWeight: '800',
         lineHeight: 22,
+        ...fontStyles.extraBold,
       },
       sentMessageBodyTextStyle: {
         color: baseColors.onSurface,
         fontSize: 16,
-        fontWeight: '500',
         lineHeight: 24,
+        ...fontStyles.medium,
       },
       sentMessageCaptionTextStyle: {
         color: baseColors.onSurfaceVariant,
         fontSize: 12,
-        fontWeight: '500',
         lineHeight: 16,
+        ...fontStyles.medium,
       },
       sentMessageLinkDescriptionTextStyle: {
         color: baseColors.onSurface,
         fontSize: 14,
-        fontWeight: '400',
         lineHeight: 20,
+        ...fontStyles.regular,
       },
       sentMessageLinkTitleTextStyle: {
         color: baseColors.onSurface,
         fontSize: 16,
-        fontWeight: '800',
         lineHeight: 22,
+        ...fontStyles.extraBold,
       },
       userAvatarTextStyle: {
         color: baseColors.onSurface,
         fontSize: 12,
-        fontWeight: '800',
         lineHeight: 16,
+        ...fontStyles.extraBold,
       },
       userNameTextStyle: {
         fontSize: 12,
-        fontWeight: '800',
         lineHeight: 16,
+        ...fontStyles.extraBold,
       },
     },
     insets: {