@mtec-solutions-org/design-system
Version:
A React Native Web design system library with theme and components
76 lines (75 loc) • 2.69 kB
JavaScript
import { styled, Text, Pressable, View } from '@dripsy/core';
export const StyledLoadingContainer = styled(View)({
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
gap: ['1', '2'], // Mobile: 4px, Tablet+: 8px
});
export const StyledButton = styled(Pressable)(({ buttonVariant, buttonSize, disabled, fullWidth }) => ({
alignItems: 'center',
justifyContent: 'center',
borderRadius: 'md',
width: fullWidth ? '100%' : undefined,
opacity: disabled ? 0.6 : 1,
// Size variations (mobile-first approach)
...(buttonSize === 'sm' && {
paddingHorizontal: ['2', '3'], // Mobile: 8px, Tablet+: 12px
paddingVertical: ['1', '2'], // Mobile: 4px, Tablet+: 8px
minHeight: [28, 32], // Mobile: 28px, Tablet+: 32px
}),
...(buttonSize === 'md' && {
paddingHorizontal: ['3', '4'], // Mobile: 12px, Tablet+: 16px
paddingVertical: ['2', '3'], // Mobile: 8px, Tablet+: 12px
minHeight: [36, 40], // Mobile: 36px, Tablet+: 40px
}),
...(buttonSize === 'lg' && {
paddingHorizontal: ['4', '5'], // Mobile: 16px, Tablet+: 20px
paddingVertical: ['3', '4'], // Mobile: 12px, Tablet+: 16px
minHeight: [44, 48], // Mobile: 44px, Tablet+: 48px
}),
// Variant styles
...(buttonVariant === 'primary' && {
backgroundColor: 'primary',
}),
...(buttonVariant === 'secondary' && {
backgroundColor: 'secondary',
}),
...(buttonVariant === 'outline' && {
backgroundColor: 'transparent',
borderWidth: 1,
borderColor: 'primary',
}),
...(buttonVariant === 'ghost' && {
backgroundColor: 'transparent',
}),
}));
export const StyledButtonText = styled(Text)(({ buttonVariant, buttonSize, disabled }) => ({
fontFamily: 'body',
fontWeight: 'medium',
textAlign: 'center',
opacity: disabled ? 0.6 : 1,
cursor: disabled ? 'not-allowed' : 'pointer',
// Size variations (mobile-first responsive font sizes)
...(buttonSize === 'sm' && {
fontSize: ['1', '1'], // Mobile: 12px, consistent across breakpoints
}),
...(buttonSize === 'md' && {
fontSize: ['2', '2'], // Mobile: 14px, consistent across breakpoints
}),
...(buttonSize === 'lg' && {
fontSize: ['3', '3'], // Mobile: 16px, consistent across breakpoints
}),
// Variant colors
...(buttonVariant === 'primary' && {
color: 'white',
}),
...(buttonVariant === 'secondary' && {
color: 'text',
}),
...(buttonVariant === 'outline' && {
color: 'primary',
}),
...(buttonVariant === 'ghost' && {
color: 'primary',
}),
}));