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/app/audio-test.tsx

@@ -4,15 +4,14 @@ import { StyleSheet } from 'react-native-unistyles';
 import { useAudioRecorder } from '../hooks/use-audio-recorder';
 import { useAudioPlayer } from '../hooks/use-audio-player';
 import { getRecordingPermissionsAsync, requestRecordingPermissionsAsync } from 'expo-audio';
-import type { Theme } from '../styles/theme';
 
-const styles = StyleSheet.create((theme: Theme) => ({
+const styles = StyleSheet.create((theme) => ({
   scrollView: {
     flex: 1,
-    backgroundColor: theme.colors.white,
+    backgroundColor: theme.colors.palette.white,
   },
   scrollViewDark: {
-    backgroundColor: theme.colors.black,
+    backgroundColor: theme.colors.background,
   },
   container: {
     padding: theme.spacing[6],
@@ -20,19 +19,19 @@ const styles = StyleSheet.create((theme: Theme) => ({
   title: {
     fontSize: theme.fontSize['3xl'],
     fontWeight: theme.fontWeight.bold,
-    color: theme.colors.gray[900],
+    color: theme.colors.palette.gray[900],
     marginBottom: theme.spacing[2],
   },
   titleDark: {
-    color: theme.colors.white,
+    color: theme.colors.foreground,
   },
   subtitle: {
     fontSize: theme.fontSize.base,
-    color: theme.colors.gray[600],
+    color: theme.colors.palette.gray[600],
     marginBottom: theme.spacing[8],
   },
   subtitleDark: {
-    color: theme.colors.gray[400],
+    color: theme.colors.mutedForeground,
   },
   section: {
     marginBottom: theme.spacing[8],
@@ -40,67 +39,67 @@ const styles = StyleSheet.create((theme: Theme) => ({
   sectionTitle: {
     fontSize: theme.fontSize.lg,
     fontWeight: theme.fontWeight.semibold,
-    color: theme.colors.gray[900],
+    color: theme.colors.palette.gray[900],
     marginBottom: theme.spacing[2],
   },
   sectionTitleDark: {
-    color: theme.colors.white,
+    color: theme.colors.foreground,
   },
   permissionCard: {
     padding: theme.spacing[4],
     borderRadius: theme.borderRadius.lg,
   },
   permissionGranted: {
-    backgroundColor: theme.colors.green[100],
+    backgroundColor: theme.colors.palette.green[100],
   },
   permissionGrantedDark: {
-    backgroundColor: theme.colors.green[900],
+    backgroundColor: theme.colors.palette.green[900],
   },
   permissionDenied: {
-    backgroundColor: theme.colors.red[100],
+    backgroundColor: theme.colors.palette.red[100],
   },
   permissionDeniedDark: {
-    backgroundColor: theme.colors.red[900],
+    backgroundColor: theme.colors.palette.red[900],
   },
   permissionText: {
     fontSize: theme.fontSize.base,
   },
   permissionTextGranted: {
-    color: theme.colors.green[800],
+    color: theme.colors.palette.green[800],
   },
   permissionTextGrantedDark: {
-    color: theme.colors.green[200],
+    color: theme.colors.palette.green[200],
   },
   permissionTextDenied: {
-    color: theme.colors.red[800],
+    color: theme.colors.palette.red[800],
   },
   permissionTextDeniedDark: {
-    color: theme.colors.red[200],
+    color: theme.colors.palette.red[200],
   },
   statusCard: {
     marginBottom: theme.spacing[4],
     padding: theme.spacing[4],
-    backgroundColor: theme.colors.gray[100],
+    backgroundColor: theme.colors.palette.gray[100],
     borderRadius: theme.borderRadius.lg,
   },
   statusCardDark: {
-    backgroundColor: theme.colors.gray[800],
+    backgroundColor: theme.colors.card,
   },
   statusLabel: {
     fontSize: theme.fontSize.sm,
     fontWeight: theme.fontWeight.semibold,
-    color: theme.colors.gray[700],
+    color: theme.colors.palette.gray[700],
     marginBottom: theme.spacing[1],
   },
   statusLabelDark: {
-    color: theme.colors.gray[300],
+    color: theme.colors.mutedForeground,
   },
   statusValue: {
     fontSize: theme.fontSize.base,
-    color: theme.colors.gray[900],
+    color: theme.colors.palette.gray[900],
   },
   statusValueDark: {
-    color: theme.colors.white,
+    color: theme.colors.foreground,
   },
   controlsRow: {
     flexDirection: 'row',
@@ -114,51 +113,51 @@ const styles = StyleSheet.create((theme: Theme) => ({
     alignItems: 'center',
   },
   buttonBlue: {
-    backgroundColor: theme.colors.blue[500],
+    backgroundColor: theme.colors.palette.blue[500],
   },
   buttonBlueDark: {
-    backgroundColor: theme.colors.blue[600],
+    backgroundColor: theme.colors.palette.blue[600],
   },
   buttonRed: {
-    backgroundColor: theme.colors.red[500],
+    backgroundColor: theme.colors.palette.red[500],
   },
   buttonRedDark: {
-    backgroundColor: theme.colors.red[600],
+    backgroundColor: theme.colors.palette.red[600],
   },
   buttonGreen: {
-    backgroundColor: theme.colors.green[500],
+    backgroundColor: theme.colors.palette.green[500],
   },
   buttonGreenDark: {
-    backgroundColor: theme.colors.green[600],
+    backgroundColor: theme.colors.palette.green[600],
   },
   buttonPurple: {
-    backgroundColor: theme.colors.purple[500],
+    backgroundColor: theme.colors.palette.purple[500],
   },
   buttonPurpleDark: {
-    backgroundColor: theme.colors.purple[600],
+    backgroundColor: theme.colors.palette.purple[600],
   },
   buttonOrange: {
-    backgroundColor: theme.colors.orange[500],
+    backgroundColor: theme.colors.palette.orange[500],
   },
   buttonOrangeDark: {
-    backgroundColor: theme.colors.orange[600],
+    backgroundColor: theme.colors.palette.orange[600],
   },
   buttonDisabled: {
-    backgroundColor: theme.colors.gray[300],
+    backgroundColor: theme.colors.palette.gray[300],
   },
   buttonDisabledDark: {
-    backgroundColor: theme.colors.gray[700],
+    backgroundColor: theme.colors.muted,
   },
   buttonText: {
     fontSize: theme.fontSize.base,
     fontWeight: theme.fontWeight.semibold,
-    color: theme.colors.white,
+    color: theme.colors.palette.white,
   },
   buttonTextDisabled: {
-    color: theme.colors.gray[500],
+    color: theme.colors.palette.gray[500],
   },
   buttonTextDisabledDark: {
-    color: theme.colors.gray[400],
+    color: theme.colors.mutedForeground,
   },
   fullWidthButton: {
     padding: theme.spacing[4],
@@ -168,59 +167,59 @@ const styles = StyleSheet.create((theme: Theme) => ({
   infoCard: {
     padding: theme.spacing[4],
     borderRadius: theme.borderRadius.lg,
-    backgroundColor: theme.colors.blue[50],
+    backgroundColor: theme.colors.palette.blue[50],
   },
   infoCardDark: {
-    backgroundColor: theme.colors.blue[950],
+    backgroundColor: theme.colors.palette.blue[950],
   },
   infoCardLabel: {
     fontSize: theme.fontSize.sm,
     fontWeight: theme.fontWeight.semibold,
-    color: theme.colors.blue[700],
+    color: theme.colors.palette.blue[700],
     marginBottom: theme.spacing[1],
   },
   infoCardLabelDark: {
-    color: theme.colors.blue[300],
+    color: theme.colors.palette.blue[300],
   },
   infoCardValue: {
     fontSize: theme.fontSize.base,
-    color: theme.colors.blue[900],
+    color: theme.colors.palette.blue[900],
   },
   infoCardValueDark: {
-    color: theme.colors.blue[100],
+    color: theme.colors.palette.blue[100],
   },
   infoCardSubtext: {
     fontSize: theme.fontSize.sm,
-    color: theme.colors.blue[600],
+    color: theme.colors.palette.blue[600],
     marginTop: theme.spacing[1],
   },
   infoCardSubtextDark: {
-    color: theme.colors.blue[400],
+    color: theme.colors.palette.blue[400],
   },
   configCard: {
     padding: theme.spacing[4],
-    backgroundColor: theme.colors.gray[50],
+    backgroundColor: theme.colors.palette.gray[50],
     borderRadius: theme.borderRadius.lg,
   },
   configCardDark: {
-    backgroundColor: theme.colors.gray[900],
+    backgroundColor: theme.colors.card,
   },
   configTitle: {
     fontSize: theme.fontSize.sm,
     fontWeight: theme.fontWeight.semibold,
-    color: theme.colors.gray[700],
+    color: theme.colors.palette.gray[700],
     marginBottom: theme.spacing[2],
   },
   configTitleDark: {
-    color: theme.colors.gray[300],
+    color: theme.colors.mutedForeground,
   },
   configText: {
     fontSize: theme.fontSize.sm,
-    color: theme.colors.gray[600],
+    color: theme.colors.palette.gray[600],
     marginBottom: theme.spacing[1],
   },
   configTextDark: {
-    color: theme.colors.gray[400],
+    color: theme.colors.mutedForeground,
   },
   gap3: {
     gap: theme.spacing[3],

packages/app/app/index.tsx

@@ -13,7 +13,7 @@ import { router } from "expo-router";
 import { activateKeepAwakeAsync, deactivateKeepAwake } from "expo-keep-awake";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { StyleSheet } from "react-native-unistyles";
-import type { Theme } from "@/styles/theme";
+import { theme as defaultTheme } from "@/styles/theme";
 
 // Simple unique ID generator
 let messageIdCounter = 0;
@@ -1094,7 +1094,7 @@ export default function VoiceAssistantScreen() {
           value={userInput}
           onChangeText={setUserInput}
           placeholder="Say something..."
-          placeholderTextColor="#71717a"
+          placeholderTextColor={defaultTheme.colors.mutedForeground}
           style={styles.textInput}
           multiline
           editable={!isRecording && ws.isConnected}
@@ -1151,19 +1151,19 @@ export default function VoiceAssistantScreen() {
   );
 }
 
-const styles = StyleSheet.create((theme: Theme) => ({
+const styles = StyleSheet.create((theme) => ({
   container: {
     flex: 1,
-    backgroundColor: theme.colors.black,
+    backgroundColor: theme.colors.background,
   },
   agentNotFoundContainer: {
     flex: 1,
-    backgroundColor: theme.colors.black,
+    backgroundColor: theme.colors.background,
     alignItems: "center",
     justifyContent: "center",
   },
   agentNotFoundText: {
-    color: theme.colors.white,
+    color: theme.colors.foreground,
   },
   headerRow: {
     flexDirection: "row",
@@ -1181,7 +1181,7 @@ const styles = StyleSheet.create((theme: Theme) => ({
     gap: theme.spacing[2],
   },
   settingsButton: {
-    backgroundColor: theme.colors.zinc[800],
+    backgroundColor: theme.colors.muted,
     padding: theme.spacing[3],
     borderRadius: theme.borderRadius.lg,
   },
@@ -1195,12 +1195,12 @@ const styles = StyleSheet.create((theme: Theme) => ({
     paddingTop: theme.spacing[4],
     paddingHorizontal: theme.spacing[6],
     borderTopWidth: theme.borderWidth[1],
-    borderTopColor: theme.colors.zinc[800],
+    borderTopColor: theme.colors.border,
-    backgroundColor: theme.colors.black,
+    backgroundColor: theme.colors.background,
   },
   textInput: {
-    backgroundColor: theme.colors.zinc[800],
+    backgroundColor: theme.colors.muted,
-    color: theme.colors.white,
+    color: theme.colors.foreground,
     borderRadius: theme.borderRadius["2xl"],
     paddingHorizontal: theme.spacing[4],
     paddingVertical: theme.spacing[3],
@@ -1219,10 +1219,10 @@ const styles = StyleSheet.create((theme: Theme) => ({
     borderRadius: theme.borderRadius.full,
     alignItems: "center",
     justifyContent: "center",
-    backgroundColor: theme.colors.zinc[800],
+    backgroundColor: theme.colors.muted,
   },
   realtimeButtonActive: {
-    backgroundColor: theme.colors.blue[600],
+    backgroundColor: theme.colors.palette.blue[600],
   },
   mainButton: {
     width: 48,
@@ -1230,16 +1230,16 @@ const styles = StyleSheet.create((theme: Theme) => ({
     borderRadius: theme.borderRadius.full,
     alignItems: "center",
     justifyContent: "center",
-    backgroundColor: theme.colors.zinc[700],
+    backgroundColor: theme.colors.secondary,
   },
   mainButtonRecording: {
-    backgroundColor: theme.colors.red[500],
+    backgroundColor: theme.colors.palette.red[500],
   },
   mainButtonInProgress: {
-    backgroundColor: theme.colors.red[600],
+    backgroundColor: theme.colors.palette.red[600],
   },
   mainButtonWithText: {
-    backgroundColor: theme.colors.blue[600],
+    backgroundColor: theme.colors.palette.blue[600],
   },
   buttonDisabled: {
     opacity: theme.opacity[50],

packages/app/app/settings.tsx

@@ -13,28 +13,28 @@ import { router } from "expo-router";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { StyleSheet } from "react-native-unistyles";
 import { useSettings } from "@/hooks/use-settings";
-import type { Theme } from "@/styles/theme";
+import { theme as defaultTheme } from "@/styles/theme";
 
-const styles = StyleSheet.create((theme: Theme) => ({
+const styles = StyleSheet.create((theme) => ({
   loadingContainer: {
     flex: 1,
-    backgroundColor: theme.colors.black,
+    backgroundColor: theme.colors.background,
     alignItems: "center",
     justifyContent: "center",
   },
   loadingText: {
-    color: theme.colors.white,
+    color: theme.colors.foreground,
     fontSize: theme.fontSize.lg,
   },
   container: {
     flex: 1,
-    backgroundColor: theme.colors.black,
+    backgroundColor: theme.colors.background,
   },
   header: {
     paddingHorizontal: theme.spacing[6],
     paddingBottom: theme.spacing[4],
     borderBottomWidth: theme.borderWidth[1],
-    borderBottomColor: theme.colors.zinc[800],
+    borderBottomColor: theme.colors.border,
   },
   headerRow: {
     flexDirection: "row",
@@ -42,12 +42,12 @@ const styles = StyleSheet.create((theme: Theme) => ({
     justifyContent: "space-between",
   },
   headerTitle: {
-    color: theme.colors.white,
+    color: theme.colors.foreground,
     fontSize: theme.fontSize["3xl"],
     fontWeight: theme.fontWeight.bold,
   },
   cancelButton: {
-    color: theme.colors.blue[500],
+    color: theme.colors.palette.blue[500],
     fontSize: theme.fontSize.base,
     fontWeight: theme.fontWeight.semibold,
   },
@@ -61,25 +61,25 @@ const styles = StyleSheet.create((theme: Theme) => ({
     marginBottom: theme.spacing[8],
   },
   sectionTitle: {
-    color: theme.colors.white,
+    color: theme.colors.foreground,
     fontSize: theme.fontSize.lg,
     fontWeight: theme.fontWeight.semibold,
     marginBottom: theme.spacing[4],
   },
   label: {
-    color: theme.colors.zinc[400],
+    color: theme.colors.mutedForeground,
     fontSize: theme.fontSize.sm,
     marginBottom: theme.spacing[2],
   },
   input: {
-    backgroundColor: theme.colors.zinc[900],
+    backgroundColor: theme.colors.card,
-    color: theme.colors.white,
+    color: theme.colors.foreground,
     padding: theme.spacing[4],
     borderRadius: theme.borderRadius.lg,
     marginBottom: theme.spacing[2],
   },
   helperText: {
-    color: theme.colors.zinc[500],
+    color: theme.colors.mutedForeground,
     fontSize: theme.fontSize.xs,
     marginBottom: theme.spacing[3],
   },
@@ -90,38 +90,38 @@ const styles = StyleSheet.create((theme: Theme) => ({
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "center",
-    backgroundColor: theme.colors.blue[600],
+    backgroundColor: theme.colors.palette.blue[600],
   },
   testButtonDisabled: {
-    backgroundColor: theme.colors.zinc[800],
+    backgroundColor: theme.colors.muted,
   },
   testButtonText: {
-    color: theme.colors.white,
+    color: theme.colors.palette.white,
     fontWeight: theme.fontWeight.semibold,
     marginLeft: theme.spacing[2],
   },
   testResultSuccess: {
     padding: theme.spacing[3],
     borderRadius: theme.borderRadius.lg,
-    backgroundColor: "#14532d",
+    backgroundColor: theme.colors.palette.green[900],
     borderWidth: theme.borderWidth[1],
-    borderColor: "#15803d",
+    borderColor: theme.colors.palette.green[600],
   },
   testResultError: {
     padding: theme.spacing[3],
     borderRadius: theme.borderRadius.lg,
-    backgroundColor: "#7f1d1d",
+    backgroundColor: theme.colors.palette.red[900],
     borderWidth: theme.borderWidth[1],
-    borderColor: "#b91c1c",
+    borderColor: theme.colors.palette.red[600],
   },
   testResultTextSuccess: {
-    color: "#4ade80",
+    color: theme.colors.palette.green[200],
   },
   testResultTextError: {
-    color: "#f87171",
+    color: theme.colors.palette.red[200],
   },
   settingCard: {
-    backgroundColor: theme.colors.zinc[900],
+    backgroundColor: theme.colors.card,
     borderRadius: theme.borderRadius.lg,
     padding: theme.spacing[4],
     marginBottom: theme.spacing[3],
@@ -135,22 +135,22 @@ const styles = StyleSheet.create((theme: Theme) => ({
     flex: 1,
   },
   settingTitle: {
-    color: theme.colors.white,
+    color: theme.colors.foreground,
     fontSize: theme.fontSize.base,
     marginBottom: theme.spacing[1],
   },
   settingDescription: {
-    color: theme.colors.zinc[400],
+    color: theme.colors.mutedForeground,
     fontSize: theme.fontSize.sm,
   },
   themeCardDisabled: {
-    backgroundColor: theme.colors.zinc[900],
+    backgroundColor: theme.colors.card,
     borderRadius: theme.borderRadius.lg,
     padding: theme.spacing[4],
     opacity: theme.opacity[50],
   },
   themeHelpText: {
-    color: theme.colors.zinc[400],
+    color: theme.colors.mutedForeground,
     fontSize: theme.fontSize.sm,
     marginBottom: theme.spacing[3],
   },
@@ -169,19 +169,19 @@ const styles = StyleSheet.create((theme: Theme) => ({
     justifyContent: "center",
   },
   radioOuterSelected: {
-    borderColor: theme.colors.blue[500],
+    borderColor: theme.colors.palette.blue[500],
   },
   radioOuterUnselected: {
-    borderColor: theme.colors.zinc[600],
+    borderColor: theme.colors.border,
   },
   radioInner: {
     width: 12,
     height: 12,
     borderRadius: theme.borderRadius.full,
-    backgroundColor: theme.colors.blue[500],
+    backgroundColor: theme.colors.palette.blue[500],
   },
   themeOptionText: {
-    color: theme.colors.zinc[400],
+    color: theme.colors.mutedForeground,
     fontSize: theme.fontSize.base,
     textTransform: "capitalize",
   },
@@ -189,14 +189,14 @@ const styles = StyleSheet.create((theme: Theme) => ({
     padding: theme.spacing[4],
     borderRadius: theme.borderRadius.lg,
     marginBottom: theme.spacing[3],
-    backgroundColor: theme.colors.blue[500],
+    backgroundColor: theme.colors.palette.blue[500],
   },
   saveButtonDisabled: {
-    backgroundColor: "#1e3a8a",
+    backgroundColor: theme.colors.palette.blue[900],
     opacity: theme.opacity[50],
   },
   saveButtonText: {
-    color: theme.colors.white,
+    color: theme.colors.palette.white,
     textAlign: "center",
     fontSize: theme.fontSize.base,
     fontWeight: theme.fontWeight.semibold,
@@ -205,26 +205,26 @@ const styles = StyleSheet.create((theme: Theme) => ({
     padding: theme.spacing[4],
     borderRadius: theme.borderRadius.lg,
     borderWidth: theme.borderWidth[1],
-    borderColor: "#7f1d1d",
+    borderColor: theme.colors.destructive,
   },
   resetButtonText: {
-    color: theme.colors.red[500],
+    color: theme.colors.destructive,
     textAlign: "center",
     fontSize: theme.fontSize.base,
     fontWeight: theme.fontWeight.semibold,
   },
   footer: {
     borderTopWidth: theme.borderWidth[1],
-    borderTopColor: theme.colors.zinc[800],
+    borderTopColor: theme.colors.border,
     paddingTop: theme.spacing[6],
   },
   footerText: {
-    color: theme.colors.zinc[500],
+    color: theme.colors.mutedForeground,
     fontSize: theme.fontSize.sm,
     textAlign: "center",
   },
   footerVersion: {
-    color: theme.colors.zinc[600],
+    color: theme.colors.mutedForeground,
     fontSize: theme.fontSize.xs,
     textAlign: "center",
     marginTop: theme.spacing[1],
@@ -438,7 +438,7 @@ export default function SettingsScreen() {
             <TextInput
               style={styles.input}
               placeholder="wss://example.com/ws"
-              placeholderTextColor="#6b7280"
+              placeholderTextColor={defaultTheme.colors.mutedForeground}
               value={serverUrl}
               onChangeText={(text) => {
                 setServerUrl(text);
@@ -509,8 +509,8 @@ export default function SettingsScreen() {
                 <Switch
                   value={useSpeaker}
                   onValueChange={setUseSpeaker}
-                  trackColor={{ false: "#374151", true: "#3b82f6" }}
+                  trackColor={{ false: defaultTheme.colors.palette.gray[700], true: defaultTheme.colors.palette.blue[500] }}
-                  thumbColor={useSpeaker ? "#60a5fa" : "#d1d5db"}
+                  thumbColor={useSpeaker ? defaultTheme.colors.palette.blue[400] : defaultTheme.colors.palette.gray[300]}
                 />
               </View>
             </View>
@@ -526,8 +526,8 @@ export default function SettingsScreen() {
                 <Switch
                   value={keepScreenOn}
                   onValueChange={setKeepScreenOn}
-                  trackColor={{ false: "#374151", true: "#3b82f6" }}
+                  trackColor={{ false: defaultTheme.colors.palette.gray[700], true: defaultTheme.colors.palette.blue[500] }}
-                  thumbColor={keepScreenOn ? "#60a5fa" : "#d1d5db"}
+                  thumbColor={keepScreenOn ? defaultTheme.colors.palette.blue[400] : defaultTheme.colors.palette.gray[300]}
                 />
               </View>
             </View>

packages/app/babel.config.js

@@ -0,0 +1,7 @@
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: ["babel-preset-expo"],
+    plugins: [["react-native-unistyles/plugin", { root: "app" }]],
+  };
+};

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,
   },
 }));

packages/app/styles/theme.ts

@@ -1,100 +1,152 @@
-export const theme = {
+const baseColors = {
-  colors: {
+  // Base colors
-    // Base colors
+  white: "#ffffff",
-    white: "#ffffff",
+  black: "#000000",
-    black: "#000000",
 
-    // Zinc scale (primary gray palette)
+  // Zinc scale (primary gray palette)
-    zinc: {
+  zinc: {
-      50: "#fafafa",
+    50: "#fafafa",
-      100: "#f4f4f5",
+    100: "#f4f4f5",
-      200: "#e4e4e7",
+    200: "#e4e4e7",
-      300: "#d4d4d8",
+    300: "#d4d4d8",
-      400: "#a1a1aa",
+    400: "#a1a1aa",
-      500: "#71717a",
+    500: "#71717a",
-      600: "#52525b",
+    600: "#52525b",
-      700: "#3f3f46",
+    700: "#3f3f46",
-      800: "#27272a",
+    800: "#27272a",
-      900: "#18181b",
+    900: "#18181b",
-    },
-
-    // Gray scale
-    gray: {
-      50: "#f9fafb",
-      100: "#f3f4f6",
-      200: "#e5e7eb",
-      300: "#d1d5db",
-      400: "#9ca3af",
-      500: "#6b7280",
-      600: "#4b5563",
-      700: "#374151",
-      800: "#1f2937",
-      900: "#111827",
-    },
-
-    // Slate scale
-    slate: {
-      200: "#e2e8f0",
-    },
-
-    // Blue scale
-    blue: {
-      50: "#eff6ff",
-      100: "#dbeafe",
-      200: "#bfdbfe",
-      300: "#93c5fd",
-      400: "#60a5fa",
-      500: "#3b82f6",
-      600: "#2563eb",
-      700: "#1d4ed8",
-      800: "#1e40af",
-      900: "#1e3a8a",
-      950: "#172554",
-    },
-
-    // Green scale
-    green: {
-      100: "#dcfce7",
-      200: "#bbf7d0",
-      500: "#22c55e",
-      600: "#16a34a",
-      800: "#166534",
-      900: "#14532d",
-    },
-
-    // Red scale
-    red: {
-      100: "#fee2e2",
-      200: "#fecaca",
-      500: "#ef4444",
-      600: "#dc2626",
-      800: "#991b1b",
-      900: "#7f1d1d",
-    },
-
-    // Teal scale
-    teal: {
-      200: "#99f6e4",
-    },
-
-    // Amber scale
-    amber: {
-      500: "#f59e0b",
-    },
-
-    // Purple scale
-    purple: {
-      500: "#a855f7",
-      600: "#9333ea",
-    },
-
-    // Orange scale
-    orange: {
-      500: "#f97316",
-      600: "#ea580c",
-    },
   },
 
+  // Gray scale
+  gray: {
+    50: "#f9fafb",
+    100: "#f3f4f6",
+    200: "#e5e7eb",
+    300: "#d1d5db",
+    400: "#9ca3af",
+    500: "#6b7280",
+    600: "#4b5563",
+    700: "#374151",
+    800: "#1f2937",
+    900: "#111827",
+  },
+
+  // Slate scale
+  slate: {
+    200: "#e2e8f0",
+  },
+
+  // Blue scale
+  blue: {
+    50: "#eff6ff",
+    100: "#dbeafe",
+    200: "#bfdbfe",
+    300: "#93c5fd",
+    400: "#60a5fa",
+    500: "#3b82f6",
+    600: "#2563eb",
+    700: "#1d4ed8",
+    800: "#1e40af",
+    900: "#1e3a8a",
+    950: "#172554",
+  },
+
+  // Green scale
+  green: {
+    100: "#dcfce7",
+    200: "#bbf7d0",
+    400: "#4ade80",
+    500: "#22c55e",
+    600: "#16a34a",
+    800: "#166534",
+    900: "#14532d",
+  },
+
+  // Red scale
+  red: {
+    100: "#fee2e2",
+    200: "#fecaca",
+    300: "#fca5a5",
+    500: "#ef4444",
+    600: "#dc2626",
+    800: "#991b1b",
+    900: "#7f1d1d",
+  },
+
+  // Teal scale
+  teal: {
+    200: "#99f6e4",
+  },
+
+  // Amber scale
+  amber: {
+    500: "#f59e0b",
+  },
+
+  // Yellow scale
+  yellow: {
+    400: "#fbbf24",
+  },
+
+  // Purple scale
+  purple: {
+    500: "#a855f7",
+    600: "#9333ea",
+  },
+
+  // Orange scale
+  orange: {
+    500: "#f97316",
+    600: "#ea580c",
+  },
+} as const;
+
+// Semantic color tokens (shadcn-style)
+const lightSemanticColors = {
+  background: "#ffffff",
+  foreground: "#09090b",
+  card: "#ffffff",
+  cardForeground: "#09090b",
+  popover: "#ffffff",
+  popoverForeground: "#09090b",
+  primary: "#18181b",
+  primaryForeground: "#fafafa",
+  secondary: "#f4f4f5",
+  secondaryForeground: "#18181b",
+  muted: "#f4f4f5",
+  mutedForeground: "#71717a",
+  accent: "#f4f4f5",
+  accentForeground: "#18181b",
+  destructive: "#ef4444",
+  destructiveForeground: "#fafafa",
+  border: "#e4e4e7",
+  input: "#e4e4e7",
+  ring: "#18181b",
+} as const;
+
+const darkSemanticColors = {
+  background: "#09090b",
+  foreground: "#fafafa",
+  card: "#09090b",
+  cardForeground: "#fafafa",
+  popover: "#09090b",
+  popoverForeground: "#fafafa",
+  primary: "#fafafa",
+  primaryForeground: "#18181b",
+  secondary: "#27272a",
+  secondaryForeground: "#fafafa",
+  muted: "#27272a",
+  mutedForeground: "#a1a1aa",
+  accent: "#27272a",
+  accentForeground: "#fafafa",
+  destructive: "#7f1d1d",
+  destructiveForeground: "#fafafa",
+  border: "#27272a",
+  input: "#27272a",
+  ring: "#d4d4d8",
+} as const;
+
+const commonTheme = {
   spacing: {
     0: 0,
     1: 4,
@@ -150,4 +202,24 @@ export const theme = {
   },
 } as const;
 
-export type Theme = typeof theme;
+export const darkTheme = {
+  colors: {
+    ...darkSemanticColors,
+    palette: baseColors,
+  },
+  ...commonTheme,
+} as const;
+
+export const lightTheme = {
+  colors: {
+    ...lightSemanticColors,
+    palette: baseColors,
+  },
+  ...commonTheme,
+} as const;
+
+// Keep compatibility with existing code
+export const theme = darkTheme;
+
+// Export a union type that works for both themes
+export type Theme = typeof darkTheme | typeof lightTheme;

packages/app/styles/unistyles.ts

@@ -1,19 +1,21 @@
 import { StyleSheet } from "react-native-unistyles";
-import { theme } from "./theme";
+import { lightTheme, darkTheme } from "./theme";
 
-// Configure Unistyles with our theme
+// Configure Unistyles with adaptive themes
 StyleSheet.configure({
   themes: {
-    dark: theme,
+    light: lightTheme,
+    dark: darkTheme,
   },
   settings: {
-    initialTheme: "dark",
+    adaptiveThemes: true,
   },
 });
 
 // Type augmentation for TypeScript
 type AppThemes = {
-  dark: typeof theme;
+  light: typeof lightTheme;
+  dark: typeof darkTheme;
 };
 
 declare module "react-native-unistyles" {