@naarni/design-system
Version:
Naarni React Native Design System for EV Fleet Apps
76 lines (75 loc) • 2.52 kB
JavaScript
import { useDeviceTheme } from '../../theme/deviceTheme';
// Color constants
const COLORS = {
primary: '#007AFF',
secondary: '#5856D6',
grey: {
300: '#D1D5DB',
500: '#6B7280',
},
white: '#FFFFFF',
transparent: 'transparent',
};
// Spacing constants
const SPACING = {
xs: 4,
sm: 8,
md: 16,
lg: 24,
};
// Border radius constants
const BORDER_RADIUS = {
sm: 4,
md: 8,
lg: 12,
};
// Font size constants
const FONT_SIZE = {
sm: 14,
base: 16,
lg: 18,
};
export const useButtonStyles = () => {
const { colors } = useDeviceTheme();
const getButtonStyle = (variant, size, disabled, fullWidth) => ({
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
borderRadius: size === 'small' ? 4 : size === 'large' ? 12 : 8,
padding: size === 'small' ? 4 : size === 'large' ? 16 : 8,
paddingHorizontal: size === 'small' ? 8 : size === 'large' ? 24 : 16,
width: fullWidth ? '100%' : 'auto',
backgroundColor: disabled ? colors.grey[300] :
variant === 'secondary' ? colors.secondary.main :
variant === 'outline' || variant === 'text' || variant === 'ghost' ? 'transparent' :
colors.primary.main,
borderWidth: variant === 'outline' || variant === 'ghost' ? 1 : 0,
borderColor: variant === 'outline' ? colors.primary.main : variant === 'ghost' ? colors.grey[300] : undefined,
});
const getTextStyle = (variant, size, disabled, hasIcon, iconPosition) => ({
color: disabled ? colors.grey[500] :
variant === 'outline' || variant === 'text' || variant === 'ghost' ? colors.primary.main :
colors.common.white,
fontSize: size === 'small' ? 14 :
size === 'large' ? 18 :
16,
fontWeight: '600',
marginLeft: hasIcon && iconPosition === 'left' ? 4 : 0,
marginRight: hasIcon && iconPosition === 'right' ? 4 : 0,
});
const getIconContainerStyle = (position) => ({
marginRight: position === 'left' ? 4 : 0,
marginLeft: position === 'right' ? 4 : 0,
});
const getLoadingIndicatorColor = (variant) => {
return variant === 'outline' || variant === 'text' || variant === 'ghost'
? colors.primary.main
: colors.common.white;
};
return {
getButtonStyle,
getTextStyle,
getIconContainerStyle,
getLoadingIndicatorColor,
};
};