@beyondcorp/beyond-ui-native 0.1.3 → 0.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@beyondcorp/beyond-ui-native",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "Accessible, NativeWind-first React Native component library for Beyond Softwares",
   "author": "Beyond Corp",
   "license": "MIT",

package/src/components/accordion/accordion.tsx

@@ -148,7 +148,7 @@ export const AccordionItem = React.forwardRef<View, AccordionItemProps>(
       <AccordionItemContext.Provider value={{ value, isOpen }}>
         <View
           ref={ref}
-          className={cn("border-b border-border py-1", className)}
+          className={cn("border-b border-neutral-200 dark:border-neutral-800 py-1", className)}
           {...props}
         >
           {children}
@@ -200,13 +200,13 @@ export const AccordionTrigger = React.forwardRef<View, AccordionTriggerProps>(
       >
         <View className="flex-1 pr-2">
           {typeof children === "string" ? (
-            <Text className="text-base font-medium text-foreground">{children}</Text>
+            <Text className="text-base font-medium text-neutral-900 dark:text-neutral-100">{children}</Text>
           ) : (
             children
           )}
         </View>
         <Animated.View style={{ transform: [{ rotate }] }}>
-          <Text className="text-muted text-base font-semibold">▼</Text>
+          <Text className="text-neutral-500 dark:text-neutral-400 text-base font-semibold">▼</Text>
         </Animated.View>
       </Pressable>
     );
@@ -230,11 +230,11 @@ export const AccordionContent = React.forwardRef<View, AccordionContentProps>(
     return (
       <View
         ref={ref}
-        className={cn("pt-1 pb-3 px-1 text-sm text-muted", className)}
+        className={cn("pt-1 pb-3 px-1", className)}
         {...props}
       >
         {typeof children === "string" ? (
-          <Text className="text-sm text-muted leading-relaxed">{children}</Text>
+          <Text className="text-sm text-neutral-600 dark:text-neutral-400 leading-relaxed">{children}</Text>
         ) : (
           children
         )}

package/src/components/bottom-sheet/bottom-sheet.tsx

@@ -193,14 +193,14 @@ export const BottomSheetContent = React.forwardRef<View, BottomSheetContentProps
             ref={ref}
             style={{ transform: [{ translateY }] }}
             className={cn(
-              "w-full bg-card rounded-t-3xl border-t border-border shadow-2xl pt-2 pb-8 px-6 max-h-[85%]",
+              "w-full bg-white dark:bg-neutral-900 rounded-t-3xl border-t border-neutral-200 dark:border-neutral-800 shadow-2xl pt-2 pb-8 px-6 max-h-[85%]",
               className
             )}
             {...props}
           >
             {/* Drag Handle Bar */}
             <View {...panResponder.panHandlers} className="w-full py-2 items-center">
-              <View className="w-12 h-1.5 rounded-full bg-muted/40" />
+              <View className="w-12 h-1.5 rounded-full bg-neutral-300 dark:bg-neutral-700" />
             </View>
 
             {children}
@@ -240,7 +240,7 @@ export const BottomSheetTitle: React.FC<BottomSheetTitleProps> = ({
   children,
 }) => {
   return (
-    <Heading level={4} className={cn("text-xl font-bold text-foreground", className)}>
+    <Heading level={4} className={cn("text-xl font-bold text-neutral-900 dark:text-neutral-50", className)}>
       {children}
     </Heading>
   );
@@ -259,7 +259,7 @@ export const BottomSheetDescription: React.FC<BottomSheetDescriptionProps> = ({
   children,
 }) => {
   return (
-    <Text className={cn("text-sm text-muted", className)}>
+    <Text className={cn("text-sm text-neutral-500 dark:text-neutral-400", className)}>
       {children}
     </Text>
   );

package/src/components/data-table/data-table.tsx

@@ -124,7 +124,6 @@ export function DataTable<T extends Record<string, any>>({
             setSearch(val);
             setCurrentPage(1);
           }}
-          className="bg-card"
         />
       )}
 
@@ -137,7 +136,7 @@ export function DataTable<T extends Record<string, any>>({
         </View>
       ) : paginatedData.length === 0 ? (
         <Card className="items-center justify-center p-8">
-          <Text className="text-muted text-base">{emptyText}</Text>
+          <Text className="text-neutral-500 dark:text-neutral-400 text-base">{emptyText}</Text>
         </Card>
       ) : mode === "card" ? (
         /* Mobile Card Mode */
@@ -157,14 +156,14 @@ export function DataTable<T extends Record<string, any>>({
                   return (
                     <View
                       key={String(col.key)}
-                      className="flex-row items-center justify-between py-1 border-b border-border/40 last:border-b-0"
+                      className="flex-row items-center justify-between py-1 border-b border-neutral-200 dark:border-neutral-800 last:border-b-0"
                     >
-                      <Text className="text-xs font-semibold text-muted uppercase tracking-wider">
+                      <Text className="text-xs font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">
                         {col.title}
                       </Text>
                       <View className="shrink">
                         {typeof renderedVal === "string" ? (
-                          <Text className="text-sm font-medium text-foreground">
+                          <Text className="text-sm font-medium text-neutral-900 dark:text-neutral-100">
                             {renderedVal}
                           </Text>
                         ) : (
@@ -181,9 +180,9 @@ export function DataTable<T extends Record<string, any>>({
       ) : (
         /* Horizontal Table Mode */
         <ScrollView horizontal showsHorizontalScrollIndicator={false}>
-          <View className="rounded-2xl border border-border bg-card overflow-hidden">
+          <View className="rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 overflow-hidden">
             {/* Header */}
-            <View className="flex-row bg-muted/10 border-b border-border">
+            <View className="flex-row bg-neutral-100 dark:bg-neutral-800/60 border-b border-neutral-200 dark:border-neutral-800">
               {columns.map((col) => (
                 <Pressable
                   key={String(col.key)}
@@ -192,11 +191,11 @@ export function DataTable<T extends Record<string, any>>({
                   style={{ width: col.width || 120 }}
                   className="px-4 py-3 flex-row items-center justify-between"
                 >
-                  <Text className="text-xs font-bold text-foreground uppercase tracking-wider">
+                  <Text className="text-xs font-bold text-neutral-900 dark:text-neutral-100 uppercase tracking-wider">
                     {col.title}
                   </Text>
                   {col.sortable && (
-                    <Text className="text-xs text-muted">
+                    <Text className="text-xs text-neutral-500 dark:text-neutral-400">
                       {sortKey === col.key
                         ? sortDirection === "asc"
                           ? "▲"
@@ -214,7 +213,7 @@ export function DataTable<T extends Record<string, any>>({
                 key={keyExtractor(item, idx)}
                 disabled={!onRowPress}
                 onPress={() => onRowPress?.(item)}
-                className="flex-row border-b border-border/60 active:bg-muted/10"
+                className="flex-row border-b border-neutral-200 dark:border-neutral-800 active:bg-neutral-100 dark:active:bg-neutral-800"
               >
                 {columns.map((col) => {
                   const rawVal = item[col.key as string];
@@ -227,7 +226,7 @@ export function DataTable<T extends Record<string, any>>({
                       className="px-4 py-3 justify-center"
                     >
                       {typeof renderedVal === "string" ? (
-                        <Text className="text-sm text-foreground">{renderedVal}</Text>
+                        <Text className="text-sm text-neutral-900 dark:text-neutral-100">{renderedVal}</Text>
                       ) : (
                         renderedVal
                       )}
@@ -243,7 +242,7 @@ export function DataTable<T extends Record<string, any>>({
       {/* Pagination Footer */}
       {totalPages > 1 && (
         <View className="flex-row items-center justify-between pt-2">
-          <Text className="text-xs text-muted">
+          <Text className="text-xs text-neutral-500 dark:text-neutral-400">
             Showing {(currentPage - 1) * pageSize + 1} -{" "}
             {Math.min(currentPage * pageSize, sortedData.length)} of{" "}
             {sortedData.length}
@@ -258,7 +257,7 @@ export function DataTable<T extends Record<string, any>>({
             >
               Prev
             </Button>
-            <Text className="text-xs font-medium text-foreground px-1">
+            <Text className="text-xs font-medium text-neutral-900 dark:text-neutral-100 px-1">
               {currentPage} / {totalPages}
             </Text>
             <Button

package/src/components/select/select.tsx

@@ -12,11 +12,11 @@ import { cn } from "../../utilities/cn";
 import { Text } from "../text/text";
 
 const selectTriggerVariants = cva(
-  "flex-row items-center justify-between rounded-xl border bg-card px-4 py-3 active:opacity-80",
+  "flex-row items-center justify-between rounded-xl border bg-white dark:bg-neutral-900 px-4 py-3 active:opacity-80",
   {
     variants: {
       variant: {
-        default: "border-border",
+        default: "border-neutral-300 dark:border-neutral-700",
         error: "border-danger",
         success: "border-success",
       },
@@ -130,7 +130,7 @@ export const Select: React.FC<SelectProps> = ({
     >
       <View className={cn("w-full gap-1.5", className)}>
         {label && (
-          <Text className="text-sm font-medium text-foreground">{label}</Text>
+          <Text className="text-sm font-medium text-neutral-800 dark:text-neutral-200">{label}</Text>
         )}
 
         {children ? (
@@ -149,19 +149,21 @@ export const Select: React.FC<SelectProps> = ({
             <Text
               className={cn(
                 "text-base",
-                displayLabel ? "text-foreground font-medium" : "text-muted"
+                displayLabel
+                  ? "text-neutral-900 dark:text-neutral-100 font-medium"
+                  : "text-neutral-500 dark:text-neutral-400 font-normal"
               )}
             >
               {displayLabel || placeholder}
             </Text>
-            <Text className="text-muted text-xs">▼</Text>
+            <Text className="text-neutral-500 dark:text-neutral-400 text-xs">▼</Text>
           </Pressable>
         )}
 
         {error ? (
           <Text className="text-xs text-danger font-medium">{error}</Text>
         ) : helperText ? (
-          <Text className="text-xs text-muted">{helperText}</Text>
+          <Text className="text-xs text-neutral-500 dark:text-neutral-400">{helperText}</Text>
         ) : null}
 
         {/* Modal Options Picker if options prop was passed */}
@@ -175,13 +177,13 @@ export const Select: React.FC<SelectProps> = ({
           >
             <View className="flex-1 justify-end bg-black/60">
               <Pressable className="flex-1" onPress={() => setOpen(false)} />
-              <View className="w-full bg-card rounded-t-3xl border-t border-border p-6 max-h-[75%]">
-                <View className="flex-row items-center justify-between pb-4 border-b border-border mb-3">
-                  <Text className="text-lg font-bold text-foreground">
+              <View className="w-full bg-white dark:bg-neutral-900 rounded-t-3xl border-t border-neutral-200 dark:border-neutral-800 p-6 max-h-[75%]">
+                <View className="flex-row items-center justify-between pb-4 border-b border-neutral-200 dark:border-neutral-800 mb-3">
+                  <Text className="text-lg font-bold text-neutral-900 dark:text-neutral-50">
                     {label || placeholder}
                   </Text>
                   <Pressable onPress={() => setOpen(false)} className="p-1">
-                    <Text className="text-muted text-lg font-semibold">✕</Text>
+                    <Text className="text-neutral-500 dark:text-neutral-400 text-lg font-semibold">✕</Text>
                   </Pressable>
                 </View>
 
@@ -192,7 +194,7 @@ export const Select: React.FC<SelectProps> = ({
                       onChangeText={setSearchQuery}
                       placeholder="Search options..."
                       placeholderTextColor="#9ca3af"
-                      className="h-11 px-4 rounded-xl border border-border bg-background text-foreground text-base"
+                      className="h-11 px-4 rounded-xl border border-neutral-300 dark:border-neutral-700 bg-neutral-50 dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 text-base"
                     />
                   </View>
                 )}
@@ -200,7 +202,7 @@ export const Select: React.FC<SelectProps> = ({
                 <ScrollView className="max-h-80" showsVerticalScrollIndicator={false}>
                   {filteredOptions.length === 0 ? (
                     <View className="py-8 items-center">
-                      <Text className="text-muted text-sm">No options found</Text>
+                      <Text className="text-neutral-500 dark:text-neutral-400 text-sm">No options found</Text>
                     </View>
                   ) : (
                     filteredOptions.map((opt) => {
@@ -211,8 +213,8 @@ export const Select: React.FC<SelectProps> = ({
                           disabled={opt.disabled}
                           onPress={() => handleSelect(opt.value)}
                           className={cn(
-                            "flex-row items-center justify-between py-3.5 px-3 rounded-xl active:bg-muted/10",
-                            isSelected && "bg-primary/10",
+                            "flex-row items-center justify-between py-3.5 px-3 rounded-xl active:bg-neutral-100 dark:active:bg-neutral-800",
+                            isSelected && "bg-primary-50 dark:bg-primary-950/40",
                             opt.disabled && "opacity-40"
                           )}
                         >
@@ -220,14 +222,14 @@ export const Select: React.FC<SelectProps> = ({
                             className={cn(
                               "text-base",
                               isSelected
-                                ? "text-primary font-semibold"
-                                : "text-foreground font-normal"
+                                ? "text-primary-600 dark:text-primary-400 font-semibold"
+                                : "text-neutral-900 dark:text-neutral-100 font-normal"
                             )}
                           >
                             {opt.label}
                           </Text>
                           {isSelected && (
-                            <Text className="text-primary font-bold text-base">✓</Text>
+                            <Text className="text-primary-600 dark:text-primary-400 font-bold text-base">✓</Text>
                           )}
                         </Pressable>
                       );
@@ -263,13 +265,13 @@ export const SelectTrigger: React.FC<SelectTriggerProps> = ({
       accessibilityRole="combobox"
       accessibilityState={{ expanded: open }}
       className={cn(
-        "flex-row items-center justify-between rounded-xl border border-border bg-card px-4 py-3 active:opacity-80",
+        "flex-row items-center justify-between rounded-xl border border-neutral-300 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-4 py-3 active:opacity-80",
         className
       )}
       {...props}
     >
       {children}
-      <Text className="text-muted text-xs">▼</Text>
+      <Text className="text-neutral-500 dark:text-neutral-400 text-xs">▼</Text>
     </Pressable>
   );
 };
@@ -289,7 +291,7 @@ export const SelectValue: React.FC<SelectValueProps> = ({
     <Text
       className={cn(
         "text-base",
-        value ? "text-foreground font-medium" : "text-muted",
+        value ? "text-neutral-900 dark:text-neutral-100 font-medium" : "text-neutral-500 dark:text-neutral-400",
         className
       )}
     >
@@ -318,11 +320,11 @@ export const SelectContent: React.FC<SelectContentProps> = ({ title, children })
     >
       <View className="flex-1 justify-end bg-black/60">
         <Pressable className="flex-1" onPress={() => setOpen(false)} />
-        <View className="w-full bg-card rounded-t-3xl border-t border-border p-6 max-h-[75%]">
-          <View className="flex-row items-center justify-between pb-3 border-b border-border mb-3">
-            <Text className="text-lg font-bold text-foreground">{title || "Select"}</Text>
+        <View className="w-full bg-white dark:bg-neutral-900 rounded-t-3xl border-t border-neutral-200 dark:border-neutral-800 p-6 max-h-[75%]">
+          <View className="flex-row items-center justify-between pb-3 border-b border-neutral-200 dark:border-neutral-800 mb-3">
+            <Text className="text-lg font-bold text-neutral-900 dark:text-neutral-100">{title || "Select"}</Text>
             <Pressable onPress={() => setOpen(false)} className="p-1">
-              <Text className="text-muted text-lg font-semibold">✕</Text>
+              <Text className="text-neutral-500 dark:text-neutral-400 text-lg font-semibold">✕</Text>
             </Pressable>
           </View>
           <ScrollView className="max-h-80">{children}</ScrollView>
@@ -351,8 +353,8 @@ export const SelectItem: React.FC<SelectItemProps> = ({
     <Pressable
       onPress={() => onSelect(itemValue)}
       className={cn(
-        "flex-row items-center justify-between py-3.5 px-3 rounded-xl active:bg-muted/10",
-        isSelected && "bg-primary/10",
+        "flex-row items-center justify-between py-3.5 px-3 rounded-xl active:bg-neutral-100 dark:active:bg-neutral-800",
+        isSelected && "bg-primary-50 dark:bg-primary-950/40",
         className
       )}
     >
@@ -360,7 +362,7 @@ export const SelectItem: React.FC<SelectItemProps> = ({
         <Text
           className={cn(
             "text-base",
-            isSelected ? "text-primary font-semibold" : "text-foreground font-normal"
+            isSelected ? "text-primary-600 dark:text-primary-400 font-semibold" : "text-neutral-900 dark:text-neutral-100 font-normal"
           )}
         >
           {children}
@@ -368,7 +370,7 @@ export const SelectItem: React.FC<SelectItemProps> = ({
       ) : (
         children
       )}
-      {isSelected && <Text className="text-primary font-bold text-base">✓</Text>}
+      {isSelected && <Text className="text-primary-600 dark:text-primary-400 font-bold text-base">✓</Text>}
     </Pressable>
   );
 };

package/src/providers/BeyondUIProvider.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { View, useColorScheme as useRNColorScheme } from "react-native";
+import { colorScheme as nwColorScheme } from "nativewind";
 import { PortalHost } from "@rn-primitives/portal";
 import { ToastContext, ToastItem, ToastContextValue } from "../components/toast/types";
 import { ToastContainer } from "../components/toast/toast";
@@ -38,10 +39,28 @@ export function BeyondUIProvider({
   const activeScheme: "light" | "dark" =
     selectedScheme === "system" ? systemScheme : selectedScheme;
 
+  // Sync NativeWind colorScheme store with BeyondUIProvider active scheme
+  React.useEffect(() => {
+    try {
+      nwColorScheme.set(selectedScheme === "system" ? "system" : activeScheme);
+    } catch (_) {}
+  }, [selectedScheme, activeScheme]);
+
+  const handleSetColorScheme = React.useCallback((scheme: ColorScheme) => {
+    setSelectedScheme(scheme);
+    try {
+      nwColorScheme.set(scheme === "system" ? "system" : scheme);
+    } catch (_) {}
+  }, []);
+
   const toggleColorScheme = React.useCallback(() => {
     setSelectedScheme((prev) => {
       const current = prev === "system" ? systemScheme : prev;
-      return current === "dark" ? "light" : "dark";
+      const next = current === "dark" ? "light" : "dark";
+      try {
+        nwColorScheme.set(next);
+      } catch (_) {}
+      return next;
     });
   }, [systemScheme]);
 
@@ -77,10 +96,10 @@ export function BeyondUIProvider({
   const contextValue: BeyondUIContextValue = React.useMemo(
     () => ({
       colorScheme: activeScheme,
-      setColorScheme: setSelectedScheme,
+      setColorScheme: handleSetColorScheme,
       toggleColorScheme,
     }),
-    [activeScheme, toggleColorScheme]
+    [activeScheme, handleSetColorScheme, toggleColorScheme]
   );
 
   return (
@@ -88,7 +107,7 @@ export function BeyondUIProvider({
       <ToastContext.Provider value={toastContextValue}>
         <View
           style={{ flex: 1 }}
-          className={activeScheme === "dark" ? "dark flex-1" : "flex-1"}
+          className={activeScheme === "dark" ? "dark flex-1 bg-neutral-950" : "flex-1 bg-white"}
         >
           {children}
           <PortalHost />

package/src/templates/auth/ForgotPasswordTemplate.tsx

@@ -50,7 +50,7 @@ export const ForgotPasswordTemplate: React.FC<ForgotPasswordTemplateProps> = ({
     <KeyboardAvoidingView
       behavior={Platform.OS === "ios" ? "padding" : "height"}
       style={{ flex: 1 }}
-      className={cn("flex-1 bg-background", className)}
+      className={cn("flex-1 bg-neutral-50 dark:bg-neutral-950", className)}
     >
       <ScrollView
         style={{ flex: 1 }}
@@ -61,10 +61,10 @@ export const ForgotPasswordTemplate: React.FC<ForgotPasswordTemplateProps> = ({
       >
         <View className="w-full max-w-md mx-auto gap-6">
           <View className="items-center gap-2">
-            <Heading level={2} className="text-3xl font-extrabold text-foreground text-center">
+            <Heading level={2} className="text-3xl font-extrabold text-neutral-900 dark:text-neutral-50 text-center">
               {title}
             </Heading>
-            <Text className="text-muted text-center text-base">
+            <Text className="text-neutral-500 dark:text-neutral-400 text-center text-base">
               {subtitle}
             </Text>
           </View>
@@ -117,7 +117,7 @@ export const ForgotPasswordTemplate: React.FC<ForgotPasswordTemplateProps> = ({
               {onBackToSignIn && (
                 <View className="flex-row justify-center items-center gap-1.5 pt-2">
                   <Pressable onPress={onBackToSignIn}>
-                    <Text className="text-sm font-semibold text-primary">
+                    <Text className="text-sm font-semibold text-primary-600 dark:text-primary-400">
                       Back to Sign In
                     </Text>
                   </Pressable>

package/src/templates/auth/SignInTemplate.tsx

@@ -72,7 +72,7 @@ export const SignInTemplate: React.FC<SignInTemplateProps> = ({
     <KeyboardAvoidingView
       behavior={Platform.OS === "ios" ? "padding" : "height"}
       style={{ flex: 1 }}
-      className={cn("flex-1 bg-background", className)}
+      className={cn("flex-1 bg-neutral-50 dark:bg-neutral-950", className)}
     >
       <ScrollView
         style={{ flex: 1 }}
@@ -85,10 +85,10 @@ export const SignInTemplate: React.FC<SignInTemplateProps> = ({
           {/* Logo & Header */}
           <View className="items-center gap-2">
             {logo && <View className="mb-2">{logo}</View>}
-            <Heading level={2} className="text-3xl font-extrabold text-foreground text-center">
+            <Heading level={2} className="text-3xl font-extrabold text-neutral-900 dark:text-neutral-50 text-center">
               {title}
             </Heading>
-            <Text className="text-muted text-center text-base">
+            <Text className="text-neutral-500 dark:text-neutral-400 text-center text-base">
               {subtitle}
             </Text>
           </View>
@@ -129,7 +129,7 @@ export const SignInTemplate: React.FC<SignInTemplateProps> = ({
                 error={passwordError}
                 rightElement={
                   <Pressable onPress={() => setShowPassword((p) => !p)} className="p-1">
-                    <Text className="text-xs text-muted font-semibold">
+                    <Text className="text-xs text-neutral-500 dark:text-neutral-400 font-semibold">
                       {showPassword ? "HIDE" : "SHOW"}
                     </Text>
                   </Pressable>
@@ -141,12 +141,12 @@ export const SignInTemplate: React.FC<SignInTemplateProps> = ({
             <View className="flex-row items-center justify-between py-1">
               <View className="flex-row items-center gap-2">
                 <Checkbox checked={rememberMe} onCheckedChange={setRememberMe} />
-                <Text className="text-sm text-foreground">Remember me</Text>
+                <Text className="text-sm text-neutral-900 dark:text-neutral-100">Remember me</Text>
               </View>
 
               {onForgotPassword && (
                 <Pressable onPress={onForgotPassword}>
-                  <Text className="text-sm font-semibold text-primary">
+                  <Text className="text-sm font-semibold text-primary-600 dark:text-primary-400">
                     Forgot password?
                   </Text>
                 </Pressable>
@@ -170,7 +170,7 @@ export const SignInTemplate: React.FC<SignInTemplateProps> = ({
             <View className="gap-4">
               <View className="flex-row items-center gap-3">
                 <Separator className="flex-1" />
-                <Text className="text-xs text-muted uppercase">or continue with</Text>
+                <Text className="text-xs text-neutral-500 dark:text-neutral-400 uppercase">or continue with</Text>
                 <Separator className="flex-1" />
               </View>
 
@@ -200,9 +200,9 @@ export const SignInTemplate: React.FC<SignInTemplateProps> = ({
           {/* Switch to SignUp */}
           {onSignUpPress && (
             <View className="flex-row justify-center items-center gap-1.5 pt-2">
-              <Text className="text-sm text-muted">Don't have an account?</Text>
+              <Text className="text-sm text-neutral-500 dark:text-neutral-400">Don't have an account?</Text>
               <Pressable onPress={onSignUpPress}>
-                <Text className="text-sm font-bold text-primary">Sign Up</Text>
+                <Text className="text-sm font-bold text-primary-600 dark:text-primary-400">Sign Up</Text>
               </Pressable>
             </View>
           )}

package/src/templates/auth/SignUpTemplate.tsx

@@ -88,7 +88,7 @@ export const SignUpTemplate: React.FC<SignUpTemplateProps> = ({
     <KeyboardAvoidingView
       behavior={Platform.OS === "ios" ? "padding" : "height"}
       style={{ flex: 1 }}
-      className={cn("flex-1 bg-background", className)}
+      className={cn("flex-1 bg-neutral-50 dark:bg-neutral-950", className)}
     >
       <ScrollView
         style={{ flex: 1 }}
@@ -101,10 +101,10 @@ export const SignUpTemplate: React.FC<SignUpTemplateProps> = ({
           {/* Header */}
           <View className="items-center gap-2">
             {logo && <View className="mb-2">{logo}</View>}
-            <Heading level={2} className="text-3xl font-extrabold text-foreground text-center">
+            <Heading level={2} className="text-3xl font-extrabold text-neutral-900 dark:text-neutral-50 text-center">
               {title}
             </Heading>
-            <Text className="text-muted text-center text-base">
+            <Text className="text-neutral-500 dark:text-neutral-400 text-center text-base">
               {subtitle}
             </Text>
           </View>
@@ -164,7 +164,7 @@ export const SignUpTemplate: React.FC<SignUpTemplateProps> = ({
                     if (termsError) setTermsError(undefined);
                   }}
                 />
-                <Text className="text-sm text-foreground flex-1">
+                <Text className="text-sm text-neutral-900 dark:text-neutral-100 flex-1">
                   I agree to the Terms of Service & Privacy Policy
                 </Text>
               </View>
@@ -190,7 +190,7 @@ export const SignUpTemplate: React.FC<SignUpTemplateProps> = ({
             <View className="gap-4">
               <View className="flex-row items-center gap-3">
                 <Separator className="flex-1" />
-                <Text className="text-xs text-muted uppercase">or continue with</Text>
+                <Text className="text-xs text-neutral-500 dark:text-neutral-400 uppercase">or continue with</Text>
                 <Separator className="flex-1" />
               </View>
 
@@ -220,9 +220,9 @@ export const SignUpTemplate: React.FC<SignUpTemplateProps> = ({
           {/* Back to SignIn */}
           {onSignInPress && (
             <View className="flex-row justify-center items-center gap-1.5 pt-2">
-              <Text className="text-sm text-muted">Already have an account?</Text>
+              <Text className="text-sm text-neutral-500 dark:text-neutral-400">Already have an account?</Text>
               <Pressable onPress={onSignInPress}>
-                <Text className="text-sm font-bold text-primary">Sign In</Text>
+                <Text className="text-sm font-bold text-primary-600 dark:text-primary-400">Sign In</Text>
               </Pressable>
             </View>
           )}