Theme

App.tsx

@@ -1,13 +1,16 @@
 import { createStaticNavigation } from "@react-navigation/native";
 import { RootStack } from "./src/navigation/RootStack";
 import { ApiClientProvider } from "./src/services/client/Provider";
+import { useNavigationTheme } from "./src/styles";
 
 const Navigation = createStaticNavigation(RootStack);
 
 export function App() {
+  const theme = useNavigationTheme();
+
   return (
     <ApiClientProvider>
-      <Navigation />
+      <Navigation theme={theme} />
     </ApiClientProvider>
   );
 }

src/components/StyledText.tsx

@@ -0,0 +1,163 @@
+import React from "react";
+import type { TextProps } from "react-native";
+import { StyleSheet, Text } from "react-native";
+import type { ThemeColor } from "../styles";
+import { useThemeColors } from "../styles";
+
+interface Props extends TextProps {
+  variant: keyof typeof styledTextStyles;
+  themeColor?: ThemeColor;
+}
+
+export function StyledText({
+  themeColor = "textDefault",
+  style,
+  variant,
+  ...rest
+}: Props) {
+  const variantStyle = styledTextStyles[variant];
+  const [color] = useThemeColors([themeColor]);
+
+  return <Text style={[variantStyle, { color }, style]} {...rest} />;
+}
+
+const bodyStyles = {
+  xl: {
+    fontSize: 18,
+    lineHeight: 25,
+    letterSpacing: 0.002,
+  },
+  lg: {
+    fontSize: 16,
+    lineHeight: 22,
+    letterSpacing: 0.002,
+  },
+  md: {
+    fontSize: 14,
+    lineHeight: 20,
+    letterSpacing: 0.002,
+  },
+  sm: {
+    fontSize: 12,
+    lineHeight: 16,
+    letterSpacing: 0.002,
+  },
+  xs: {
+    fontSize: 10,
+    lineHeight: 14,
+    letterSpacing: 0.002,
+  },
+};
+
+export const styledTextStyles = StyleSheet.create({
+  heading1: {
+    fontWeight: 700,
+    fontSize: 48,
+    lineHeight: 53,
+  },
+  heading2: {
+    fontWeight: 700,
+    fontSize: 40,
+    lineHeight: 44,
+  },
+  heading3: {
+    fontWeight: 700,
+    fontSize: 32,
+    lineHeight: 35,
+  },
+  heading4: {
+    fontWeight: 700,
+    fontSize: 24,
+    lineHeight: 29,
+  },
+  heading5: {
+    fontWeight: 700,
+    fontSize: 20,
+    lineHeight: 24,
+  },
+  heading6: {
+    fontWeight: 700,
+    fontSize: 18,
+    lineHeight: 22,
+  },
+  bodyXLRegular: {
+    ...bodyStyles.xl,
+  },
+  bodyXLBold: {
+    fontWeight: 700,
+    ...bodyStyles.xl,
+  },
+  bodyXLSemiBold: {
+    fontWeight: 600,
+    ...bodyStyles.xl,
+  },
+  bodyXLMedium: {
+    fontWeight: 500,
+    ...bodyStyles.xl,
+  },
+  bodyLGRegular: {
+    ...bodyStyles.lg,
+  },
+  bodyLGBold: {
+    fontWeight: 700,
+    ...bodyStyles.lg,
+  },
+  bodyLGSemiBold: {
+    fontWeight: 600,
+    ...bodyStyles.lg,
+  },
+  bodyLGMedium: {
+    fontWeight: 500,
+    ...bodyStyles.lg,
+  },
+  bodyMDRegular: {
+    ...bodyStyles.md,
+  },
+  bodyMDBold: {
+    fontWeight: 700,
+    ...bodyStyles.md,
+  },
+  bodyMDSemiBold: {
+    fontWeight: 600,
+    ...bodyStyles.md,
+  },
+  bodyMDMedium: {
+    fontWeight: 500,
+    ...bodyStyles.md,
+  },
+  bodySMRegular: {
+    ...bodyStyles.sm,
+  },
+  bodySMBold: {
+    fontWeight: 700,
+    ...bodyStyles.sm,
+  },
+  bodySMSemiBold: {
+    fontWeight: 600,
+    ...bodyStyles.sm,
+  },
+  bodySMMedium: {
+    fontWeight: 500,
+    ...bodyStyles.sm,
+  },
+  bodyXSRegular: {
+    ...bodyStyles.xs,
+  },
+  bodyXSBold: {
+    fontWeight: 700,
+    ...bodyStyles.xs,
+  },
+  bodyXSSemiBold: {
+    fontWeight: 600,
+    ...bodyStyles.xs,
+  },
+  bodyXSMedium: {
+    fontWeight: 500,
+    ...bodyStyles.xs,
+  },
+  button: {
+    fontWeight: 700,
+    ...bodyStyles.md,
+    textTransform: "uppercase",
+  },
+});

src/components/TextButton/index.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import type { ViewStyle } from "react-native";
+import { Pressable, StyleSheet } from "react-native";
+import { StyledText } from "../StyledText";
+import type { VariantKey } from "./types";
+import { useTextButton } from "./useTextButton";
+
+interface Props {
+  variant?: VariantKey;
+  text: string;
+  onPress: () => void;
+  disabled?: boolean;
+  style?: ViewStyle;
+}
+
+export function TextButton({
+  variant = "primary",
+  text,
+  disabled = false,
+  onPress,
+  style,
+}: Props) {
+  const { borderColor, color, backgroundColor } = useTextButton({
+    variant,
+    disabled,
+  });
+
+  return (
+    <Pressable
+      onPress={onPress}
+      disabled={disabled}
+      style={({ pressed }) => {
+        return [
+          styles.base,
+          style,
+          {
+            backgroundColor,
+            borderColor,
+            opacity: pressed ? 0.9 : 1,
+            transform: [{ scale: pressed ? 0.995 : 1 }],
+          },
+        ];
+      }}
+    >
+      <StyledText style={{ color }} variant="button">
+        {text}
+      </StyledText>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  base: {
+    borderRadius: 8,
+    alignItems: "center",
+    justifyContent: "center",
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    borderWidth: 1,
+  },
+});

src/components/TextButton/types.ts

@@ -0,0 +1 @@
+export type VariantKey = "primary" | "secondary";

src/components/TextButton/useTextButton.ts

@@ -0,0 +1,48 @@
+import { useMemo } from "react";
+import type { ThemeColor } from "../../styles";
+import { useThemeColors } from "../../styles";
+import type { VariantKey } from "./types";
+
+const colorMap: {
+  [key in VariantKey | "disabled"]: {
+    backgroundColorKey: ThemeColor;
+    textColorKey: ThemeColor;
+  };
+} = {
+  primary: {
+    backgroundColorKey: "buttonPrimary",
+    textColorKey: "buttonPrimaryText",
+  },
+  secondary: {
+    backgroundColorKey: "buttonSecondary",
+    textColorKey: "buttonSecondaryText",
+  },
+  disabled: {
+    backgroundColorKey: "buttonDisabled",
+    textColorKey: "buttonDisabledText",
+  },
+};
+
+interface Props {
+  variant: VariantKey;
+  disabled: boolean;
+}
+
+export const useTextButton = ({ disabled, variant }: Props) => {
+  const variantKey = disabled ? "disabled" : variant;
+  const { backgroundColorKey, textColorKey } = colorMap[variantKey];
+  const [backgroundColor, color] = useThemeColors([
+    backgroundColorKey,
+    textColorKey,
+  ]);
+  const borderColor = useMemo(
+    () => (variantKey === "secondary" ? color : backgroundColor),
+    [variantKey, color, backgroundColor],
+  );
+
+  return {
+    borderColor,
+    color,
+    backgroundColor,
+  };
+};

src/navigation/BottomTabs.tsx

@@ -3,10 +3,13 @@ import { SearchStack } from "./SearchStack";
 import { AccountStack } from "./AccountStack";
 import SearchSvg from "../../assets/svgs/search.svg";
 import UserSvg from "../../assets/svgs/user.svg";
+import { palette } from "../styles/palette";
 
 export const BottomTabs = createBottomTabNavigator({
   screenOptions: {
     tabBarShowLabel: false,
+    tabBarActiveTintColor: palette.primary500,
+    tabBarInactiveTintColor: palette.greyscale500,
     tabBarStyle: {
       paddingTop: 4,
     },

src/screens/Search/index.tsx

@@ -1,6 +1,8 @@
 import { useNavigation } from "@react-navigation/native";
 import { useCallback } from "react";
-import { View, Text, TouchableOpacity } from "react-native";
+import { View } from "react-native";
+import { StyledText } from "../../components/StyledText";
+import { TextButton } from "../../components/TextButton";
 
 export function SearchScreen() {
   const navigation = useNavigation();
@@ -11,14 +13,8 @@ export function SearchScreen() {
 
   return (
     <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
-      <Text>Search</Text>
-
-      <TouchableOpacity
-        onPress={onPress}
-        style={{ padding: 12, margin: 16, backgroundColor: "yellow" }}
-      >
-        <Text>Go to Search Details</Text>
-      </TouchableOpacity>
+      <StyledText variant="heading3">Search</StyledText>
+      <TextButton text="Go to Search Details" onPress={onPress} />
     </View>
   );
 }

src/styles/darkThemeColors.ts

@@ -0,0 +1,45 @@
+import { palette } from "./palette";
+
+export const darkThemeColors = {
+  buttonDisabled: palette.disabledButton,
+  buttonDisabledText: palette.white,
+  buttonPrimary: palette.primary500,
+  buttonPrimaryText: palette.white,
+  buttonSecondary: palette.dark3,
+  buttonSecondaryText: palette.white,
+  checkboxCheck: palette.white,
+  checkboxHightLight: palette.primary500,
+  chipHighlight: palette.primary500,
+  chipText: palette.white,
+  inputBlurredBackground: palette.dark2,
+  inputFocusedBackground: palette.dark3,
+  inputFocusedBorder: palette.greyscale400,
+  inputPlaceholderText: palette.greyscale500,
+  inputTextColor: palette.white,
+  textDefault: palette.white,
+  toggleThumb: palette.white,
+  toggleTrackFalse: palette.dark2,
+  toggleTrackTrue: palette.primary500,
+  inActiveRing: palette.greyscale200,
+  activeRing: palette.primary500,
+  wheelActive: palette.primary500,
+  accordionBackground: palette.greyscale900,
+  accordionBottomBorder: palette.greyscale800,
+  accordionSubtext: palette.primary400,
+  screenBackground: palette.dark1,
+  navigationBorder: palette.greyscale800,
+  navigationPrimary: palette.primary500,
+  sliderActive: palette.primary500,
+  sliderInactive: palette.greyscale200,
+  textLight: palette.greyscale500,
+  primary: palette.primary500,
+  cardBackground: palette.dark3,
+  comboSectionBackground: palette.greyscale900,
+  imageBorder: palette.greyscale800,
+  translucent: palette.black_50,
+  cardText: palette.white,
+  cardGradient: palette.greyscale900,
+  tabBarActiveTintColor: palette.primary500,
+  tabBarInactiveTintColor: palette.greyscale500,
+  error: palette.error,
+};

src/styles/index.ts

@@ -0,0 +1,3 @@
+export * from "./useAppColorScheme";
+export * from "./useNavigationTheme";
+export * from "./useThemeColors";