dont set any colors in abstract button. let it be open to extension

app/src/components/buttons/AbstractButton.tsx

@@ -1,6 +1,11 @@
 import React from 'react';
-import { Text, StyleSheet, Pressable, PressableProps, ViewStyle } from 'react-native';
-import { black, slate200, slate300, white } from '../../utils/colors';
+import {
+  Text,
+  StyleSheet,
+  Pressable,
+  PressableProps,
+  ViewStyle,
+} from 'react-native';
 
 export interface ButtonProps extends PressableProps {
   children: React.ReactNode;
@@ -8,6 +13,7 @@ export interface ButtonProps extends PressableProps {
 
 interface AbstractButtonProps extends ButtonProps {
   bgColor: string;
+  borderColor?: string;
   color: string;
 }
 
@@ -21,23 +27,22 @@ export default function AbstractButton({
   children,
   bgColor,
   color,
+  borderColor,
   style,
   ...pressable
 }: AbstractButtonProps) {
-  const isDisabled = pressable.disabled;
-  const backgroundColor = isDisabled ? white : bgColor;
-  const textColor = isDisabled ? slate300 : color;
-  const borderColor = isDisabled ? slate200 : backgroundColor;
+  const hasBorder = borderColor ? true : false;
   return (
     <Pressable
       {...pressable}
       style={[
         styles.container,
-        { backgroundColor, borderColor: borderColor, borderWidth: 4 },
+        { backgroundColor: bgColor, borderColor: borderColor },
+        hasBorder ? styles.withBorder : {},
         style as ViewStyle,
       ]}
     >
-      <Text style={[styles.text, { color: textColor }]}>{children}</Text>
+      <Text style={[styles.text, { color: color }]}>{children}</Text>
     </Pressable>
   );
 }
@@ -49,14 +54,17 @@ const styles = StyleSheet.create({
     flexDirection: 'column',
     flexGrow: 0,
     flexShrink: 0,
-    backgroundColor: black,
     width: '100%',
     display: 'flex',
     alignItems: 'center',
     rowGap: 12,
-    padding: 16, // plus 4 of border = 20
+    padding: 20,
     borderRadius: 5,
   },
+  withBorder: {
+    borderWidth: 4,
+    padding: 16, // plus 4 of border = 20
+  },
   text: {
     fontFamily: 'Cochin',
     textAlign: 'center',

app/src/components/buttons/PrimaryButton.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { amber50, slate300, black, white } from '../../utils/colors';
 import AbstractButton, { ButtonProps } from './AbstractButton';
 
@@ -5,8 +7,14 @@ export function PrimaryButton({ children, ...props }: ButtonProps) {
   const isDisabled = props.disabled;
   const bgColor = isDisabled ? white : black;
   const color = isDisabled ? slate300 : amber50;
+  const borderColor = isDisabled ? slate300 : undefined;
   return (
-    <AbstractButton {...props} bgColor={bgColor} color={color}>
+    <AbstractButton
+      {...props}
+      borderColor={borderColor}
+      bgColor={bgColor}
+      color={color}
+    >
       {children}
     </AbstractButton>
   );

app/src/components/buttons/SecondaryButton.tsx

@@ -1,9 +1,20 @@
-import { slate200, slate500 } from '../../utils/colors';
+import React from 'react';
+import { slate200, slate300, slate500, white } from '../../utils/colors';
+
 import AbstractButton, { ButtonProps } from './AbstractButton';
 
 export function SecondaryButton({ children, ...props }: ButtonProps) {
+  const isDisabled = props.disabled;
+  const bgColor = isDisabled ? white : slate200;
+  const color = isDisabled ? slate300 : slate500;
+  const borderColor = isDisabled ? slate200 : undefined;
   return (
-    <AbstractButton {...props} bgColor={slate200} color={slate500}>
+    <AbstractButton
+      {...props}
+      bgColor={bgColor}
+      color={color}
+      borderColor={borderColor}
+    >
       {children}
     </AbstractButton>
   );

app/src/screens/DevPlayScreen.tsx

@@ -3,7 +3,7 @@ import { PrimaryButton } from '../components/buttons/PrimaryButton';
 import { SecondaryButton } from '../components/buttons/SecondaryButton';
 import { Text, XStack, YStack } from 'tamagui';
 import { View } from 'react-native';
-import { componentBgColor } from '../utils/colors';
+import { white } from '../utils/colors';
 
 const DevPlayScreen = () => {
   return (
@@ -15,13 +15,15 @@ const DevPlayScreen = () => {
           alignItems: 'center',
           gap: 20,
           width: '100%',
-          backgroundColor: componentBgColor,
+          backgroundColor: white,
         }}
       >
         <Text fontSize="$9">Hello PASSPORT</Text>
-        <PrimaryButton disabled>Primary Button Disabled</PrimaryButton>
         <PrimaryButton>Primary Button</PrimaryButton>
+        <PrimaryButton disabled>Primary Button Disabled</PrimaryButton>
+
         <SecondaryButton>Secondary Button</SecondaryButton>
+        <SecondaryButton disabled>Secondary Button Disabled</SecondaryButton>
       </View>
       <XStack f={1} />
     </YStack>