@unicity/design-system
Version:
A comprehensive React component library built on Material-UI with advanced theming capabilities including neumorphism design support
59 lines • 2.02 kB
JavaScript
import { styled } from '@mui/material/styles';
import { Box as MuiBox } from '@mui/material';
export const StyledBox = styled(MuiBox, {
shouldForwardProp: (prop) => !['elevation', 'rounded', 'bordered', 'bgVariant'].includes(prop),
})(({ theme, elevation, rounded, bordered, bgVariant }) => ({
// Base styles
display: 'block',
boxSizing: 'border-box',
// Elevation styles
...(elevation && {
boxShadow: theme.shadows[2],
transition: theme.transitions.create(['box-shadow'], {
duration: theme.transitions.duration.short,
}),
'&:hover': {
boxShadow: theme.shadows[4],
},
}),
// Rounded corners
...(rounded && {
borderRadius: theme.shape.borderRadius,
}),
// Border styles
...(bordered && {
border: `1px solid ${theme.palette.divider}`,
}),
// Background variants
...(bgVariant === 'paper' && {
backgroundColor: theme.palette.background.paper,
}),
...(bgVariant === 'paper2' && {
backgroundColor: theme.palette.background.paper2,
}),
...(bgVariant === 'primary' && {
backgroundColor: theme.palette.primary.main,
color: theme.palette.primary.contrastText,
}),
...(bgVariant === 'secondary' && {
backgroundColor: theme.palette.secondary.main,
color: theme.palette.secondary.contrastText,
}),
...(bgVariant === 'success' && {
backgroundColor: theme.palette.success.main,
color: theme.palette.success.contrastText,
}),
...(bgVariant === 'error' && {
backgroundColor: theme.palette.error.main,
color: theme.palette.error.contrastText,
}),
...(bgVariant === 'warning' && {
backgroundColor: theme.palette.warning.main,
color: theme.palette.warning.contrastText,
}),
...(bgVariant === 'info' && {
backgroundColor: theme.palette.info.main,
color: theme.palette.info.contrastText,
}),
}));
//# sourceMappingURL=Box.style.js.map