fix(app): close theme split escape hatches

packages/app/src/components/tool-call-sheet.tsx

@@ -59,6 +59,7 @@ interface ToolCallSheetProviderProps {
 }
 
 export function ToolCallSheetProvider({ children }: ToolCallSheetProviderProps) {
+  const { theme } = useUnistyles();
   const bottomSheetRef = useRef<BottomSheetModal>(null);
   const [sheetData, setSheetData] = React.useState<ToolCallSheetData | null>(null);
 
@@ -103,8 +104,8 @@ export function ToolCallSheetProvider({ children }: ToolCallSheetProviderProps)
         onChange={handleSheetChange}
         backdropComponent={renderBackdrop}
         enablePanDownToClose
-        backgroundStyle={styles.sheetBackground}
-        handleIndicatorStyle={styles.handleIndicator}
+        backgroundComponent={CustomSheetBackground}
+        handleIndicatorStyle={{ backgroundColor: theme.colors.palette.zinc[600] }}
       >
         {sheetData && <ToolCallSheetContent data={sheetData} onClose={closeToolCall} />}
       </BottomSheetModal>
@@ -120,6 +121,7 @@ interface ToolCallSheetContentProps {
 }
 
 function ToolCallSheetContent({ data, onClose }: ToolCallSheetContentProps) {
+  const { theme } = useUnistyles();
   const { toolName, displayName, detail, errorText, showLoadingSkeleton } = data;
 
   const IconComponent = resolveToolCallIcon(toolName, detail);
@@ -129,13 +131,13 @@ function ToolCallSheetContent({ data, onClose }: ToolCallSheetContentProps) {
       {/* Header */}
       <View style={styles.header}>
         <View style={styles.headerLeft}>
-          <IconComponent size={20} color={styles.headerIcon.color} />
+          <IconComponent size={20} color={theme.colors.foreground} />
           <Text style={styles.headerTitle} numberOfLines={1}>
             {displayName}
           </Text>
         </View>
         <Pressable onPress={onClose} style={styles.closeButton}>
-          <X size={20} color={styles.closeIcon.color} />
+          <X size={20} color={theme.colors.foregroundMuted} />
         </Pressable>
       </View>
 
@@ -155,12 +157,6 @@ function ToolCallSheetContent({ data, onClose }: ToolCallSheetContentProps) {
 // ----- Styles -----
 
 const styles = StyleSheet.create((theme) => ({
-  sheetBackground: {
-    backgroundColor: theme.colors.surface2,
-  },
-  handleIndicator: {
-    backgroundColor: theme.colors.palette.zinc[600],
-  },
   container: {
     flex: 1,
     backgroundColor: theme.colors.surface2,
@@ -180,9 +176,6 @@ const styles = StyleSheet.create((theme) => ({
     gap: theme.spacing[2],
     flex: 1,
   },
-  headerIcon: {
-    color: theme.colors.foreground,
-  },
   headerTitle: {
     fontSize: theme.fontSize.lg,
     fontWeight: theme.fontWeight.semibold,
@@ -192,9 +185,6 @@ const styles = StyleSheet.create((theme) => ({
   closeButton: {
     padding: theme.spacing[2],
   },
-  closeIcon: {
-    color: theme.colors.foregroundMuted,
-  },
   content: {
     flex: 1,
     minHeight: 0,