feat: add Babel configuration and update styles to use new theme structure

- Introduced a Babel configuration file for the app.
- Updated various components and styles to utilize the new theme structure, replacing direct color references with palette-based colors for improved consistency and maintainability.
- Adjusted styles across multiple components to align with the new theme, enhancing the overall UI experience.

packages/app/components/active-processes.tsx

@@ -60,29 +60,29 @@ function getModeColor(modeId?: string): string {
   return '#9ca3af'; // gray - unknown
 }
 
-const styles = StyleSheet.create((theme: import('../styles/theme').Theme) => ({
+const styles = StyleSheet.create((theme) => ({
   container: {
-    backgroundColor: theme.colors.zinc[900],
+    backgroundColor: theme.colors.card,
     borderBottomWidth: 1,
-    borderBottomColor: theme.colors.zinc[800],
+    borderBottomColor: theme.colors.border,
   },
   header: {
     paddingHorizontal: theme.spacing[4],
     paddingVertical: theme.spacing[3],
     borderBottomWidth: 1,
-    borderBottomColor: theme.colors.zinc[800],
+    borderBottomColor: theme.colors.border,
   },
   backButton: {
-    backgroundColor: theme.colors.zinc[800],
+    backgroundColor: theme.colors.muted,
     paddingHorizontal: theme.spacing[4],
     paddingVertical: theme.spacing[2],
     borderRadius: theme.borderRadius.lg,
   },
   backButtonActive: {
-    backgroundColor: theme.colors.zinc[700],
+    backgroundColor: theme.colors.palette.zinc[700],
   },
   backButtonText: {
-    color: '#fff',
+    color: theme.colors.foreground,
     fontSize: theme.fontSize.sm,
     fontWeight: '600',
     textAlign: 'center',
@@ -100,25 +100,25 @@ const styles = StyleSheet.create((theme: import('../styles/theme').Theme) => ({
     borderRadius: theme.borderRadius.lg,
   },
   processItemActive: {
-    backgroundColor: theme.colors.blue[600],
+    backgroundColor: theme.colors.primary,
   },
   processItemInactive: {
-    backgroundColor: theme.colors.zinc[800],
+    backgroundColor: theme.colors.muted,
   },
   agentIcon: {
     width: 12,
     height: 12,
     borderRadius: theme.borderRadius.full,
-    backgroundColor: theme.colors.blue[500],
+    backgroundColor: theme.colors.palette.blue[500],
   },
   commandIcon: {
     width: 12,
     height: 12,
     borderRadius: theme.borderRadius.sm,
-    backgroundColor: theme.colors.purple[500],
+    backgroundColor: theme.colors.palette.purple[500],
   },
   processText: {
-    color: '#fff',
+    color: theme.colors.foreground,
     fontSize: theme.fontSize.xs,
     fontWeight: '500',
   },

packages/app/components/agent-stream-view.tsx

@@ -288,27 +288,27 @@ export function AgentStreamView({
   );
 }
 
-const stylesheet = StyleSheet.create((theme: import('../styles/theme').Theme) => ({
+const stylesheet = StyleSheet.create((theme) => ({
   container: {
     flex: 1,
-    backgroundColor: theme.colors.black,
+    backgroundColor: theme.colors.background,
   },
   header: {
-    backgroundColor: theme.colors.zinc[900],
+    backgroundColor: theme.colors.card,
     borderBottomWidth: theme.borderWidth[1],
-    borderBottomColor: theme.colors.zinc[800],
+    borderBottomColor: theme.colors.border,
     paddingHorizontal: theme.spacing[4],
     paddingBottom: theme.spacing[4],
   },
   backButton: {
-    backgroundColor: theme.colors.zinc[800],
+    backgroundColor: theme.colors.muted,
     paddingHorizontal: theme.spacing[4],
     paddingVertical: theme.spacing[2],
     borderRadius: theme.borderRadius.lg,
     marginBottom: theme.spacing[4],
   },
   backButtonText: {
-    color: theme.colors.white,
+    color: theme.colors.foreground,
     fontSize: theme.fontSize.sm,
     fontWeight: theme.fontWeight.semibold,
     textAlign: "center",
@@ -325,11 +325,11 @@ const stylesheet = StyleSheet.create((theme: import('../styles/theme').Theme) =>
     gap: theme.spacing[2],
   },
   agentLabel: {
-    color: theme.colors.zinc[400],
+    color: theme.colors.mutedForeground,
     fontSize: theme.fontSize.sm,
   },
   agentId: {
-    color: theme.colors.white,
+    color: theme.colors.foreground,
     fontSize: theme.fontSize.sm,
     fontFamily: "monospace",
   },
@@ -342,16 +342,16 @@ const stylesheet = StyleSheet.create((theme: import('../styles/theme').Theme) =>
     borderRadius: theme.borderRadius.full,
   },
   statusIcon: {
-    color: theme.colors.white,
+    color: theme.colors.foreground,
     fontSize: theme.fontSize.xs,
   },
   statusText: {
-    color: theme.colors.white,
+    color: theme.colors.foreground,
     fontSize: theme.fontSize.xs,
     fontWeight: theme.fontWeight.semibold,
   },
   createdText: {
-    color: theme.colors.zinc[500],
+    color: theme.colors.mutedForeground,
     fontSize: theme.fontSize.xs,
   },
   controlButtons: {
@@ -361,20 +361,20 @@ const stylesheet = StyleSheet.create((theme: import('../styles/theme').Theme) =>
   },
   cancelButton: {
     flex: 1,
-    backgroundColor: theme.colors.orange[600],
+    backgroundColor: theme.colors.palette.orange[600],
     paddingHorizontal: theme.spacing[4],
     paddingVertical: theme.spacing[2],
     borderRadius: theme.borderRadius.lg,
   },
   killButton: {
     flex: 1,
-    backgroundColor: theme.colors.red[600],
+    backgroundColor: theme.colors.destructive,
     paddingHorizontal: theme.spacing[4],
     paddingVertical: theme.spacing[2],
     borderRadius: theme.borderRadius.lg,
   },
   controlButtonText: {
-    color: theme.colors.white,
+    color: theme.colors.foreground,
     fontSize: theme.fontSize.sm,
     fontWeight: theme.fontWeight.semibold,
     textAlign: "center",
@@ -390,18 +390,18 @@ const stylesheet = StyleSheet.create((theme: import('../styles/theme').Theme) =>
     paddingVertical: theme.spacing[12],
   },
   emptyStateText: {
-    color: theme.colors.zinc[500],
+    color: theme.colors.mutedForeground,
     fontSize: theme.fontSize.sm,
     textAlign: "center",
   },
   updateCard: {
-    backgroundColor: theme.colors.zinc[800],
+    backgroundColor: theme.colors.card,
     borderRadius: theme.borderRadius.lg,
     padding: theme.spacing[3],
     marginBottom: theme.spacing[2],
   },
   collapsibleCard: {
-    backgroundColor: theme.colors.zinc[800],
+    backgroundColor: theme.colors.card,
     borderRadius: theme.borderRadius.lg,
     marginBottom: theme.spacing[2],
     overflow: "hidden",
@@ -414,38 +414,38 @@ const stylesheet = StyleSheet.create((theme: import('../styles/theme').Theme) =>
     paddingHorizontal: theme.spacing[3],
     paddingBottom: theme.spacing[3],
     borderTopWidth: theme.borderWidth[1],
-    borderTopColor: theme.colors.zinc[700],
+    borderTopColor: theme.colors.border,
   },
   timestampText: {
-    color: theme.colors.zinc[500],
+    color: theme.colors.mutedForeground,
     fontSize: theme.fontSize.xs,
     marginBottom: theme.spacing[1],
   },
   messageText: {
-    color: theme.colors.white,
+    color: theme.colors.foreground,
     fontSize: theme.fontSize.sm,
   },
   toolCallText: {
-    color: "#60a5fa",
+    color: theme.colors.palette.blue[400],
     fontSize: theme.fontSize.sm,
     fontWeight: theme.fontWeight.semibold,
   },
   updateStatusText: {
-    color: "#fbbf24",
+    color: theme.colors.palette.yellow[400],
     fontSize: theme.fontSize.sm,
   },
   commandsText: {
-    color: "#4ade80",
+    color: theme.colors.palette.green[400],
     fontSize: theme.fontSize.sm,
     fontWeight: theme.fontWeight.semibold,
   },
   commandItem: {
-    color: theme.colors.zinc[400],
+    color: theme.colors.mutedForeground,
     fontSize: theme.fontSize.xs,
     marginTop: theme.spacing[1],
   },
   codeText: {
-    color: theme.colors.zinc[400],
+    color: theme.colors.mutedForeground,
     fontSize: theme.fontSize.xs,
     fontFamily: "monospace",
     marginTop: theme.spacing[2],

packages/app/components/artifact-drawer.tsx

@@ -22,17 +22,17 @@ interface ArtifactDrawerProps {
   onClose: () => void;
 }
 
-const styles = StyleSheet.create((theme: import('../styles/theme').Theme) => ({
+const styles = StyleSheet.create((theme) => ({
   container: {
     flex: 1,
-    backgroundColor: theme.colors.black,
+    backgroundColor: theme.colors.background,
     flexDirection: "column",
   },
   header: {
     paddingBottom: theme.spacing[4],
     paddingHorizontal: theme.spacing[4],
     borderBottomWidth: theme.borderWidth[1],
-    borderBottomColor: theme.colors.zinc[800],
+    borderBottomColor: theme.colors.border,
   },
   headerRow: {
     flexDirection: "row",
@@ -44,7 +44,7 @@ const styles = StyleSheet.create((theme: import('../styles/theme').Theme) => ({
     marginRight: theme.spacing[4],
   },
   title: {
-    color: theme.colors.white,
+    color: theme.colors.foreground,
     fontSize: theme.fontSize["2xl"],
     fontWeight: theme.fontWeight.bold,
   },
@@ -59,24 +59,24 @@ const styles = StyleSheet.create((theme: import('../styles/theme').Theme) => ({
     borderRadius: theme.borderRadius.full,
   },
   badgeMarkdown: {
-    backgroundColor: theme.colors.blue[600],
+    backgroundColor: theme.colors.primary,
   },
   badgeDiff: {
-    backgroundColor: theme.colors.purple[600],
+    backgroundColor: theme.colors.palette.purple[600],
   },
   badgeImage: {
-    backgroundColor: theme.colors.green[600],
+    backgroundColor: theme.colors.palette.green[600],
   },
   badgeCode: {
-    backgroundColor: theme.colors.orange[600],
+    backgroundColor: theme.colors.palette.orange[600],
   },
   badgeText: {
-    color: theme.colors.white,
+    color: theme.colors.primaryForeground,
     fontSize: theme.fontSize.xs,
     fontWeight: theme.fontWeight.semibold,
   },
   closeButton: {
-    backgroundColor: theme.colors.zinc[800],
+    backgroundColor: theme.colors.muted,
     width: 40,
     height: 40,
     borderRadius: 20,
@@ -84,13 +84,13 @@ const styles = StyleSheet.create((theme: import('../styles/theme').Theme) => ({
     justifyContent: "center",
   },
   closeButtonText: {
-    color: theme.colors.white,
+    color: theme.colors.foreground,
     fontSize: theme.fontSize["2xl"],
     fontWeight: theme.fontWeight.bold,
   },
   contentScroll: {
     flex: 1,
-    backgroundColor: theme.colors.black,
+    backgroundColor: theme.colors.background,
   },
   contentScrollContainer: {
     padding: theme.spacing[4],
@@ -102,35 +102,35 @@ const styles = StyleSheet.create((theme: import('../styles/theme').Theme) => ({
     justifyContent: "center",
   },
   imagePlaceholderText: {
-    color: theme.colors.zinc[400],
+    color: theme.colors.mutedForeground,
     fontSize: theme.fontSize.sm,
   },
   imagePlaceholderSubtext: {
-    color: theme.colors.zinc[600],
+    color: theme.colors.mutedForeground,
     fontSize: theme.fontSize.xs,
     marginTop: theme.spacing[2],
   },
   codeContainer: {
-    backgroundColor: theme.colors.zinc[900],
+    backgroundColor: theme.colors.card,
     borderRadius: theme.borderRadius.lg,
     padding: theme.spacing[4],
     borderWidth: theme.borderWidth[1],
-    borderColor: theme.colors.zinc[800],
+    borderColor: theme.colors.border,
   },
   codeText: {
-    color: theme.colors.zinc[300],
+    color: theme.colors.foreground,
     fontSize: theme.fontSize.sm,
     fontFamily: "monospace",
   },
   metadataContainer: {
-    backgroundColor: theme.colors.zinc[900],
+    backgroundColor: theme.colors.card,
     padding: theme.spacing[3],
     borderTopWidth: theme.borderWidth[1],
-    borderTopColor: theme.colors.zinc[800],
+    borderTopColor: theme.colors.border,
     marginTop: theme.spacing[2],
   },
   metadataTitle: {
-    color: theme.colors.zinc[500],
+    color: theme.colors.mutedForeground,
     fontSize: theme.fontSize.xs,
     fontWeight: theme.fontWeight.semibold,
     marginBottom: theme.spacing[2],
@@ -140,12 +140,12 @@ const styles = StyleSheet.create((theme: import('../styles/theme').Theme) => ({
     marginBottom: theme.spacing[1],
   },
   metadataLabel: {
-    color: theme.colors.zinc[500],
+    color: theme.colors.mutedForeground,
     fontSize: theme.fontSize.xs,
     width: 80,
   },
   metadataValue: {
-    color: theme.colors.zinc[400],
+    color: theme.colors.mutedForeground,
     fontSize: theme.fontSize.xs,
     flex: 1,
     fontFamily: "monospace",

packages/app/components/connection-status.tsx

@@ -5,12 +5,12 @@ interface ConnectionStatusProps {
   isConnected: boolean;
 }
 
-const styles = StyleSheet.create((theme: import('../styles/theme').Theme) => ({
+const styles = StyleSheet.create((theme) => ({
   container: {
     paddingHorizontal: theme.spacing[4],
     paddingVertical: theme.spacing[3],
     borderBottomWidth: 1,
-    borderBottomColor: theme.colors.zinc[800],
+    borderBottomColor: theme.colors.border,
   },
   row: {
     flexDirection: 'row',
@@ -23,19 +23,19 @@ const styles = StyleSheet.create((theme: import('../styles/theme').Theme) => ({
     marginRight: theme.spacing[2],
   },
   dotConnected: {
-    backgroundColor: theme.colors.green[500],
+    backgroundColor: theme.colors.palette.green[500],
   },
   dotDisconnected: {
-    backgroundColor: theme.colors.red[500],
+    backgroundColor: theme.colors.destructive,
   },
   text: {
     fontSize: theme.fontSize.sm,
   },
   textConnected: {
-    color: theme.colors.green[500],
+    color: theme.colors.palette.green[500],
   },
   textDisconnected: {
-    color: theme.colors.red[500],
+    color: theme.colors.destructive,
   },
 }));
 

packages/app/components/conversation-selector.tsx

@@ -285,9 +285,9 @@ export function ConversationSelector({
   );
 }
 
-const styles = StyleSheet.create((theme: import('../styles/theme').Theme) => ({
+const styles = StyleSheet.create((theme) => ({
   triggerButton: {
-    backgroundColor: theme.colors.zinc[800],
+    backgroundColor: theme.colors.muted,
     paddingHorizontal: theme.spacing[4],
     paddingVertical: theme.spacing[2],
     borderRadius: theme.borderRadius.lg,
@@ -300,7 +300,7 @@ const styles = StyleSheet.create((theme: import('../styles/theme').Theme) => ({
     flex: 1,
   },
   modalContent: {
-    backgroundColor: theme.colors.zinc[900],
+    backgroundColor: theme.colors.card,
     borderTopLeftRadius: theme.spacing[6],
     borderTopRightRadius: theme.spacing[6],
     height: '80%',
@@ -314,29 +314,29 @@ const styles = StyleSheet.create((theme: import('../styles/theme').Theme) => ({
     justifyContent: 'space-between',
     padding: theme.spacing[6],
     borderBottomWidth: theme.borderWidth[1],
-    borderBottomColor: theme.colors.zinc[800],
+    borderBottomColor: theme.colors.border,
   },
   headerTitle: {
-    color: theme.colors.white,
+    color: theme.colors.foreground,
     fontSize: theme.fontSize.lg,
     fontWeight: theme.fontWeight.semibold,
   },
   newButtonContainer: {
     padding: theme.spacing[4],
     borderBottomWidth: theme.borderWidth[1],
-    borderBottomColor: theme.colors.zinc[800],
+    borderBottomColor: theme.colors.border,
   },
   newButton: {
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
     gap: theme.spacing[2],
-    backgroundColor: theme.colors.zinc[800],
+    backgroundColor: theme.colors.muted,
     paddingVertical: theme.spacing[3],
     borderRadius: theme.borderRadius.lg,
   },
   newButtonText: {
-    color: theme.colors.white,
+    color: theme.colors.foreground,
     fontWeight: theme.fontWeight.semibold,
   },
   scrollView: {
@@ -350,14 +350,14 @@ const styles = StyleSheet.create((theme: import('../styles/theme').Theme) => ({
     alignItems: 'center',
   },
   loadingText: {
-    color: theme.colors.zinc[400],
+    color: theme.colors.mutedForeground,
   },
   emptyContainer: {
     padding: theme.spacing[8],
     alignItems: 'center',
   },
   emptyText: {
-    color: theme.colors.zinc[400],
+    color: theme.colors.mutedForeground,
   },
   conversationItem: {
     flexDirection: 'row',
@@ -365,22 +365,22 @@ const styles = StyleSheet.create((theme: import('../styles/theme').Theme) => ({
     justifyContent: 'space-between',
     padding: theme.spacing[4],
     borderBottomWidth: theme.borderWidth[1],
-    borderBottomColor: theme.colors.zinc[800],
+    borderBottomColor: theme.colors.border,
     backgroundColor: 'transparent',
   },
   conversationItemActive: {
-    backgroundColor: theme.colors.zinc[800],
+    backgroundColor: theme.colors.muted,
   },
   conversationContent: {
     flex: 1,
   },
   conversationTitle: {
-    color: theme.colors.white,
+    color: theme.colors.foreground,
     fontWeight: theme.fontWeight.semibold,
     fontSize: theme.fontSize.base,
   },
   conversationDate: {
-    color: theme.colors.zinc[400],
+    color: theme.colors.mutedForeground,
     fontSize: theme.fontSize.sm,
     marginTop: theme.spacing[1],
   },
@@ -399,10 +399,10 @@ const styles = StyleSheet.create((theme: import('../styles/theme').Theme) => ({
     paddingVertical: theme.spacing[3],
     borderRadius: theme.borderRadius.lg,
     borderWidth: theme.borderWidth[1],
-    borderColor: theme.colors.red[900],
+    borderColor: theme.colors.palette.red[900],
   },
   clearAllText: {
-    color: theme.colors.red[500],
+    color: theme.colors.destructive,
     fontWeight: theme.fontWeight.semibold,
   },
 }));

packages/app/components/message.tsx

@@ -9,7 +9,7 @@ interface UserMessageProps {
   timestamp: number;
 }
 
-const userMessageStylesheet = StyleSheet.create((theme: import('../styles/theme').Theme) => ({
+const userMessageStylesheet = StyleSheet.create((theme) => ({
   container: {
     flexDirection: 'row',
     justifyContent: 'flex-end',
@@ -17,7 +17,7 @@ const userMessageStylesheet = StyleSheet.create((theme: import('../styles/theme'
     paddingHorizontal: theme.spacing[4],
   },
   bubble: {
-    backgroundColor: theme.colors.blue[600],
+    backgroundColor: theme.colors.primary,
     borderRadius: theme.borderRadius['2xl'],
     borderTopRightRadius: theme.borderRadius.sm,
     paddingHorizontal: theme.spacing[4],
@@ -25,7 +25,7 @@ const userMessageStylesheet = StyleSheet.create((theme: import('../styles/theme'
     maxWidth: '80%',
   },
   text: {
-    color: theme.colors.white,
+    color: theme.colors.primaryForeground,
     fontSize: theme.fontSize.lg,
     lineHeight: 24,
   },
@@ -47,7 +47,7 @@ interface AssistantMessageProps {
   isStreaming?: boolean;
 }
 
-const assistantMessageStylesheet = StyleSheet.create((theme: import('../styles/theme').Theme) => ({
+const assistantMessageStylesheet = StyleSheet.create((theme) => ({
   container: {
     marginBottom: theme.spacing[3],
     paddingHorizontal: theme.spacing[4],
@@ -57,7 +57,7 @@ const assistantMessageStylesheet = StyleSheet.create((theme: import('../styles/t
     marginTop: theme.spacing[1],
   },
   streamingText: {
-    color: theme.colors.teal[200],
+    color: theme.colors.palette.teal[200],
     fontSize: theme.fontSize.xs,
     fontWeight: theme.fontWeight.bold,
   },
@@ -166,7 +166,7 @@ interface ActivityLogProps {
   onArtifactClick?: (artifactId: string) => void;
 }
 
-const activityLogStylesheet = StyleSheet.create((theme: import('../styles/theme').Theme) => ({
+const activityLogStylesheet = StyleSheet.create((theme) => ({
   pressable: {
     marginHorizontal: theme.spacing[2],
     marginBottom: theme.spacing[1],
@@ -177,19 +177,19 @@ const activityLogStylesheet = StyleSheet.create((theme: import('../styles/theme'
     opacity: 0.7,
   },
   systemBg: {
-    backgroundColor: 'rgba(39, 39, 42, 0.5)', // zinc-800/50
+    backgroundColor: 'rgba(39, 39, 42, 0.5)',
   },
   infoBg: {
-    backgroundColor: 'rgba(30, 58, 138, 0.3)', // blue-900/30
+    backgroundColor: 'rgba(30, 58, 138, 0.3)',
   },
   successBg: {
-    backgroundColor: 'rgba(20, 83, 45, 0.3)', // green-900/30
+    backgroundColor: 'rgba(20, 83, 45, 0.3)',
   },
   errorBg: {
-    backgroundColor: 'rgba(127, 29, 29, 0.3)', // red-900/30
+    backgroundColor: 'rgba(127, 29, 29, 0.3)',
   },
   artifactBg: {
-    backgroundColor: 'rgba(30, 58, 138, 0.4)', // blue-900/40
+    backgroundColor: 'rgba(30, 58, 138, 0.4)',
   },
   content: {
     paddingHorizontal: theme.spacing[3],
@@ -216,7 +216,7 @@ const activityLogStylesheet = StyleSheet.create((theme: import('../styles/theme'
     marginTop: theme.spacing[1],
   },
   detailsText: {
-    color: theme.colors.zinc[500],
+    color: theme.colors.mutedForeground,
     fontSize: theme.fontSize.xs,
     marginRight: theme.spacing[1],
   },
@@ -226,10 +226,10 @@ const activityLogStylesheet = StyleSheet.create((theme: import('../styles/theme'
     borderRadius: theme.borderRadius.base,
     padding: theme.spacing[2],
     borderWidth: theme.borderWidth[1],
-    borderColor: theme.colors.zinc[700],
+    borderColor: theme.colors.border,
   },
   metadataText: {
-    color: theme.colors.zinc[300],
+    color: theme.colors.foreground,
     fontSize: theme.fontSize.xs,
     fontFamily: 'monospace',
     lineHeight: 16,
@@ -324,11 +324,11 @@ interface ToolCallProps {
   status: 'executing' | 'completed' | 'failed';
 }
 
-const toolCallStylesheet = StyleSheet.create((theme: import('../styles/theme').Theme) => ({
+const toolCallStylesheet = StyleSheet.create((theme) => ({
   pressable: {
     marginHorizontal: theme.spacing[2],
     marginBottom: theme.spacing[2],
-    backgroundColor: theme.colors.zinc[900],
+    backgroundColor: theme.colors.card,
     borderRadius: theme.borderRadius.lg,
     borderWidth: theme.borderWidth[1],
     overflow: 'hidden',
@@ -337,13 +337,13 @@ const toolCallStylesheet = StyleSheet.create((theme: import('../styles/theme').T
     opacity: 0.8,
   },
   executingBorder: {
-    borderColor: theme.colors.amber[500],
+    borderColor: theme.colors.palette.amber[500],
   },
   completedBorder: {
-    borderColor: theme.colors.green[500],
+    borderColor: theme.colors.palette.green[500],
   },
   failedBorder: {
-    borderColor: theme.colors.red[500],
+    borderColor: theme.colors.destructive,
   },
   content: {
     padding: theme.spacing[3],
@@ -356,7 +356,7 @@ const toolCallStylesheet = StyleSheet.create((theme: import('../styles/theme').T
     marginRight: theme.spacing[2],
   },
   toolName: {
-    color: theme.colors.slate[200],
+    color: theme.colors.foreground,
     fontFamily: 'monospace',
     fontWeight: theme.fontWeight.semibold,
     fontSize: theme.fontSize.sm,
@@ -371,13 +371,13 @@ const toolCallStylesheet = StyleSheet.create((theme: import('../styles/theme').T
     borderRadius: theme.borderRadius.base,
   },
   executingBadgeBg: {
-    backgroundColor: 'rgba(245, 158, 11, 0.2)', // amber-500/20
+    backgroundColor: 'rgba(245, 158, 11, 0.2)',
   },
   completedBadgeBg: {
-    backgroundColor: 'rgba(34, 197, 94, 0.2)', // green-500/20
+    backgroundColor: 'rgba(34, 197, 94, 0.2)',
   },
   failedBadgeBg: {
-    backgroundColor: 'rgba(239, 68, 68, 0.2)', // red-500/20
+    backgroundColor: 'rgba(239, 68, 68, 0.2)',
   },
   statusText: {
     fontSize: theme.fontSize.xs,
@@ -392,7 +392,7 @@ const toolCallStylesheet = StyleSheet.create((theme: import('../styles/theme').T
     // empty - just for grouping
   },
   sectionTitle: {
-    color: theme.colors.zinc[400],
+    color: theme.colors.mutedForeground,
     fontSize: theme.fontSize.xs,
     fontWeight: theme.fontWeight.semibold,
     textTransform: 'uppercase',
@@ -400,20 +400,20 @@ const toolCallStylesheet = StyleSheet.create((theme: import('../styles/theme').T
     marginBottom: 6,
   },
   errorSectionTitle: {
-    color: '#fca5a5', // red-300
+    color: theme.colors.palette.red[300],
   },
   sectionContent: {
-    backgroundColor: theme.colors.black,
+    backgroundColor: theme.colors.background,
     borderRadius: theme.borderRadius.base,
     borderWidth: theme.borderWidth[1],
-    borderColor: theme.colors.zinc[700],
+    borderColor: theme.colors.border,
     padding: theme.spacing[2],
   },
   errorSectionContent: {
-    borderColor: '#991b1b', // red-800
+    borderColor: theme.colors.palette.red[800],
   },
   sectionText: {
-    color: theme.colors.slate[200],
+    color: theme.colors.foreground,
     fontSize: theme.fontSize.xs,
     fontFamily: 'monospace',
     lineHeight: 16,

packages/app/components/voice-button.tsx

@@ -8,7 +8,7 @@ interface VoiceButtonProps {
   disabled?: boolean;
 }
 
-const styles = StyleSheet.create((theme: import('../styles/theme').Theme) => ({
+const styles = StyleSheet.create((theme) => ({
   container: {
     alignItems: 'center',
     gap: theme.spacing[4],
@@ -32,26 +32,26 @@ const styles = StyleSheet.create((theme: import('../styles/theme').Theme) => ({
     elevation: 8,
   },
   buttonIdle: {
-    backgroundColor: theme.colors.zinc[700],
+    backgroundColor: theme.colors.muted,
   },
   buttonRecording: {
-    backgroundColor: theme.colors.red[500],
+    backgroundColor: theme.colors.destructive,
   },
   buttonProcessing: {
-    backgroundColor: theme.colors.blue[500],
+    backgroundColor: theme.colors.primary,
   },
   buttonPlaying: {
-    backgroundColor: theme.colors.green[500],
+    backgroundColor: theme.colors.palette.green[500],
   },
   label: {
-    color: theme.colors.zinc[400],
+    color: theme.colors.mutedForeground,
     fontSize: theme.fontSize.sm,
   },
   // Recording icon
   recordingIcon: {
     width: 24,
     height: 24,
-    backgroundColor: '#fff',
+    backgroundColor: theme.colors.foreground,
     borderRadius: theme.borderRadius.md,
   },
   // Processing icon
@@ -62,7 +62,7 @@ const styles = StyleSheet.create((theme: import('../styles/theme').Theme) => ({
   processingDot: {
     width: 6,
     height: 6,
-    backgroundColor: '#fff',
+    backgroundColor: theme.colors.primaryForeground,
     borderRadius: theme.borderRadius.full,
     position: 'absolute',
   },
@@ -85,7 +85,7 @@ const styles = StyleSheet.create((theme: import('../styles/theme').Theme) => ({
     gap: theme.spacing[1],
   },
   playingBar: {
-    backgroundColor: '#fff',
+    backgroundColor: theme.colors.foreground,
     borderRadius: theme.borderRadius.sm,
   },
   playingBar1: {
@@ -112,7 +112,7 @@ const styles = StyleSheet.create((theme: import('../styles/theme').Theme) => ({
     left: 4,
     width: 16,
     height: 24,
-    backgroundColor: '#fff',
+    backgroundColor: theme.colors.foreground,
     borderTopLeftRadius: 999,
     borderTopRightRadius: 999,
   },
@@ -122,7 +122,7 @@ const styles = StyleSheet.create((theme: import('../styles/theme').Theme) => ({
     left: 0,
     width: 24,
     height: 6,
-    backgroundColor: '#fff',
+    backgroundColor: theme.colors.foreground,
     borderRadius: theme.borderRadius.full,
   },
 }));