faet(expo): color config improvement

apps/expo/src/app/(app)/(tabs)/_layout.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { Platform } from "react-native";
 import { Button, Colors, Spacings } from "react-native-ui-lib";
 import { Redirect, Tabs } from "expo-router";
-import { colors } from "@/utils/constant";
+import colors from "@/utils/colors";
 import { useUser } from "@clerk/clerk-expo";
 import Ionicons from "@expo/vector-icons/Ionicons";
 

apps/expo/src/app/(app)/[productId].tsx

@@ -12,7 +12,7 @@ import {
 } from "react-native-ui-lib";
 import { Link, usePathname } from "expo-router";
 import { api } from "@/utils/api";
-import { colors } from "@/utils/constant";
+import colors from "@/utils/colors";
 import rupiahFormatter from "@/utils/rupiahFormatter";
 import { MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons";
 

apps/expo/src/app/(app)/_layout.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { TouchableOpacity } from "react-native-gesture-handler";
 import { Link, Stack } from "expo-router";
 import Header from "@/components/Header";
-import { colors } from "@/utils/constant";
+import colors from "@/utils/colors";
 import { Ionicons } from "@expo/vector-icons";
 
 export default function AuthLayout() {

apps/expo/src/app/(app)/checkout.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { Text, TouchableOpacity, View } from "react-native-ui-lib";
 import { Link } from "expo-router";
 import { api } from "@/utils/api";
-import { colors } from "@/utils/constant";
+import colors from "@/utils/colors";
 import { Ionicons } from "@expo/vector-icons";
 
 export default function CheckoutScreen() {

apps/expo/src/app/(app)/search.tsx

@@ -12,7 +12,7 @@ import { Link } from "expo-router";
 import { useDebouncedValue } from "@/lib/hooks/useDebouncedValues";
 import { useSearchStore } from "@/lib/stores/useSearchStore";
 import { api } from "@/utils/api";
-import { colors } from "@/utils/constant";
+import colors from "@/utils/colors";
 import rupiahFormatter from "@/utils/rupiahFormatter";
 import { FlashList } from "@shopify/flash-list";
 

apps/expo/src/app/_layout.tsx

@@ -1,14 +1,15 @@
 import { useEffect } from "react";
-import { LoaderScreen } from "react-native-ui-lib";
+import { Colors, LoaderScreen } from "react-native-ui-lib";
 import Constants from "expo-constants";
 import { Slot, Stack } from "expo-router";
 import * as SplashScreen from "expo-splash-screen";
 import { StatusBar } from "expo-status-bar";
 import { TRPCProvider } from "@/utils/api";
 import { tokenCache } from "@/utils/cache";
-import { colors } from "@/utils/constant";
+import colors from "@/utils/colors";
 import { ClerkProvider, SignedIn, SignedOut, useAuth } from "@clerk/clerk-expo";
 
+Colors.loadColors(colors);
 void SplashScreen.preventAutoHideAsync();
 
 function InitialLayout() {

apps/expo/src/app/index.tsx

@@ -4,7 +4,7 @@ import { Colors, Image, View } from "react-native-ui-lib";
 import { LinearGradient } from "expo-linear-gradient";
 import { Redirect } from "expo-router";
 import SignInButton from "@/components/SignInButton";
-import { colors } from "@/utils/constant";
+import colors from "@/utils/colors";
 import { useAuth } from "@clerk/clerk-expo";
 
 import Logo from "~/full-logo.png";

apps/expo/src/components/forms/Input.tsx

@@ -1,6 +1,6 @@
 import type { TextFieldProps } from "react-native-ui-lib";
 import { BorderRadiuses, Spacings, TextField } from "react-native-ui-lib";
-import { colors } from "@/utils/constant";
+import colors from "@/utils/colors";
 import { Controller, get, useFormContext } from "react-hook-form";
 
 type InputProps = {

apps/expo/src/utils/colors.ts

@@ -0,0 +1,4 @@
+export default {
+  primary: "#157DC1",
+  secondary: "#FDBC12",
+};

apps/expo/tailwind.config.ts

@@ -1,17 +1,15 @@
 import type { Config } from "tailwindcss";
 
 import baseConfig from "@vivat/tailwind-config";
-import { colors } from "@/utils/constant";
+
+import colors from "@/utils/colors";
 
 export default {
   content: ["./src/**/*.{ts,tsx}"],
   presets: [baseConfig],
   theme: {
     extend: {
-      colors: {
-        primary: colors.primary,
-        secondary: colors.secondary,
-      },
+      colors: colors,
     },
   },
 } satisfies Config;