mirror of
https://github.com/getpaseo/paseo.git
synced 2026-07-29 12:01:31 +00:00
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.
This commit is contained in:
Mohamed Boudra
@@ -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],
|
||||
|
||||
@@ -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],
|
||||
backgroundColor: theme.colors.black,
|
||||
borderTopColor: theme.colors.border,
|
||||
backgroundColor: theme.colors.background,
|
||||
},
|
||||
textInput: {
|
||||
backgroundColor: theme.colors.zinc[800],
|
||||
color: theme.colors.white,
|
||||
backgroundColor: theme.colors.muted,
|
||||
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],
|
||||
|
||||
@@ -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],
|
||||
color: theme.colors.white,
|
||||
backgroundColor: theme.colors.card,
|
||||
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" }}
|
||||
thumbColor={useSpeaker ? "#60a5fa" : "#d1d5db"}
|
||||
trackColor={{ false: defaultTheme.colors.palette.gray[700], true: defaultTheme.colors.palette.blue[500] }}
|
||||
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" }}
|
||||
thumbColor={keepScreenOn ? "#60a5fa" : "#d1d5db"}
|
||||
trackColor={{ false: defaultTheme.colors.palette.gray[700], true: defaultTheme.colors.palette.blue[500] }}
|
||||
thumbColor={keepScreenOn ? defaultTheme.colors.palette.blue[400] : defaultTheme.colors.palette.gray[300]}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
7
packages/app/babel.config.js
Normal file
7
packages/app/babel.config.js
Normal file
@@ -0,0 +1,7 @@
|
||||
module.exports = function (api) {
|
||||
api.cache(true);
|
||||
return {
|
||||
presets: ["babel-preset-expo"],
|
||||
plugins: [["react-native-unistyles/plugin", { root: "app" }]],
|
||||
};
|
||||
};
|
||||
@@ -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',
|
||||
},
|
||||
|
||||
@@ -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],
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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,
|
||||
},
|
||||
}));
|
||||
|
||||
|
||||
@@ -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,
|
||||
},
|
||||
}));
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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,
|
||||
},
|
||||
}));
|
||||
|
||||
@@ -1,100 +1,152 @@
|
||||
export const theme = {
|
||||
colors: {
|
||||
// Base colors
|
||||
white: "#ffffff",
|
||||
black: "#000000",
|
||||
const baseColors = {
|
||||
// Base colors
|
||||
white: "#ffffff",
|
||||
black: "#000000",
|
||||
|
||||
// Zinc scale (primary gray palette)
|
||||
zinc: {
|
||||
50: "#fafafa",
|
||||
100: "#f4f4f5",
|
||||
200: "#e4e4e7",
|
||||
300: "#d4d4d8",
|
||||
400: "#a1a1aa",
|
||||
500: "#71717a",
|
||||
600: "#52525b",
|
||||
700: "#3f3f46",
|
||||
800: "#27272a",
|
||||
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",
|
||||
},
|
||||
// Zinc scale (primary gray palette)
|
||||
zinc: {
|
||||
50: "#fafafa",
|
||||
100: "#f4f4f5",
|
||||
200: "#e4e4e7",
|
||||
300: "#d4d4d8",
|
||||
400: "#a1a1aa",
|
||||
500: "#71717a",
|
||||
600: "#52525b",
|
||||
700: "#3f3f46",
|
||||
800: "#27272a",
|
||||
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",
|
||||
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;
|
||||
|
||||
@@ -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" {
|
||||
|
||||
Reference in New Issue
Block a user