136 lines
2.9 KiB
TypeScript
136 lines
2.9 KiB
TypeScript
import { useColorScheme, Platform } from 'react-native';
|
|
|
|
export const lightColors = {
|
|
background: '#FFFFFF',
|
|
text: '#1C1C1C',
|
|
textSecondary: '#666666',
|
|
primary: '#05824C',
|
|
primaryLight: '#E8F5EE',
|
|
primaryDark: '#046B3E',
|
|
border: '#E8E8E8',
|
|
placeholder: '#9E9E9E',
|
|
white: '#FFFFFF',
|
|
black: '#000000',
|
|
error: '#D32F2F',
|
|
errorLight: '#FFEBEE',
|
|
transparent: 'transparent',
|
|
inputBg: '#FAFAFA',
|
|
cardBg: '#FFFFFF',
|
|
// Status
|
|
statusOnline: '#2ECC71',
|
|
statusOffline: '#FF6B35',
|
|
statusBusy: '#F39C12',
|
|
statusOnDelivery: '#3498DB',
|
|
// Semantic
|
|
success: '#27AE60',
|
|
successLight: '#E8F8F0',
|
|
warning: '#F39C12',
|
|
warningLight: '#FEF9E7',
|
|
accent: '#FF6B35',
|
|
// Chip
|
|
chipActive: '#E8F5EE',
|
|
chipBorder: '#05824C',
|
|
chipInactive: '#F5F5F5',
|
|
// Map
|
|
mapOverlay: 'rgba(0,0,0,0.04)',
|
|
// Divider
|
|
divider: '#F0F0F0',
|
|
// Shadow
|
|
cardShadow: 'rgba(0,0,0,0.08)',
|
|
};
|
|
|
|
export const darkColors = {
|
|
background: '#121212',
|
|
text: '#FFFFFF',
|
|
textSecondary: '#A0A0A0',
|
|
primary: '#05824C',
|
|
primaryLight: '#1A3D2E',
|
|
primaryDark: '#046B3E',
|
|
border: '#2C2C2C',
|
|
placeholder: '#707070',
|
|
white: '#FFFFFF',
|
|
black: '#000000',
|
|
error: '#CF6679',
|
|
errorLight: '#3D1A1E',
|
|
transparent: 'transparent',
|
|
inputBg: '#1E1E1E',
|
|
cardBg: '#1E1E1E',
|
|
statusOnline: '#2ECC71',
|
|
statusOffline: '#FF6B35',
|
|
statusBusy: '#F39C12',
|
|
statusOnDelivery: '#3498DB',
|
|
success: '#27AE60',
|
|
successLight: '#1A3D2E',
|
|
warning: '#F39C12',
|
|
warningLight: '#3D2E0A',
|
|
accent: '#FF6B35',
|
|
chipActive: '#1A3D2E',
|
|
chipBorder: '#05824C',
|
|
chipInactive: '#2C2C2C',
|
|
mapOverlay: 'rgba(0,0,0,0.30)',
|
|
divider: '#2C2C2C',
|
|
cardShadow: 'rgba(0,0,0,0.30)',
|
|
};
|
|
|
|
export const colors = lightColors;
|
|
|
|
export function useAppTheme() {
|
|
const isDarkMode = useColorScheme() === 'dark';
|
|
const themeColors = isDarkMode ? darkColors : lightColors;
|
|
return {
|
|
colors: themeColors,
|
|
isDarkMode,
|
|
};
|
|
}
|
|
|
|
export const typography = {
|
|
fontSize: {
|
|
xs: 12,
|
|
sm: 14,
|
|
md: 16,
|
|
lg: 18,
|
|
xl: 20,
|
|
xxl: 28,
|
|
},
|
|
fontWeight: {
|
|
regular: '400' as const,
|
|
medium: '500' as const,
|
|
semibold: '600' as const,
|
|
bold: '700' as const,
|
|
},
|
|
};
|
|
|
|
export const spacing = {
|
|
xs: 4,
|
|
sm: 8,
|
|
md: 12,
|
|
lg: 16,
|
|
xl: 20,
|
|
xxl: 24,
|
|
xxxl: 32,
|
|
huge: 48,
|
|
};
|
|
|
|
export const borderRadius = {
|
|
sm: 8,
|
|
md: 12,
|
|
lg: 16,
|
|
xl: 24,
|
|
full: 999,
|
|
};
|
|
|
|
export const shadow = {
|
|
sm: Platform.select({
|
|
ios: { shadowColor: '#000', shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.06, shadowRadius: 4 },
|
|
android: { elevation: 2 },
|
|
}),
|
|
md: Platform.select({
|
|
ios: { shadowColor: '#000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.10, shadowRadius: 8 },
|
|
android: { elevation: 4 },
|
|
}),
|
|
lg: Platform.select({
|
|
ios: { shadowColor: '#000', shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.14, shadowRadius: 16 },
|
|
android: { elevation: 8 },
|
|
}),
|
|
};
|