@unicity/design-system
Version:
A comprehensive React component library built on Material-UI with advanced theming capabilities including neumorphism design support
75 lines • 2.47 kB
JavaScript
import { styled } from '@mui/material/styles';
import { Alert } from '@mui/material';
export const StyledAlert = styled(Alert)(({ theme }) => ({
borderRadius: `calc(${theme.shape.borderRadius}px * 1.5)`,
marginBottom: theme.spacing(1),
'& .MuiAlert-icon': {
alignItems: 'center',
fontSize: '1.5rem',
},
'& .MuiAlert-message': {
padding: theme.spacing(0.25, 0),
display: 'flex',
flexDirection: 'column',
alignItems: 'flex-start',
},
'& .MuiAlert-action': {
alignItems: 'flex-start',
paddingTop: theme.spacing(0.25),
'& .MuiIconButton-root': {
padding: theme.spacing(0.5),
marginRight: theme.spacing(-0.5),
marginTop: theme.spacing(-0.25),
},
},
'& .MuiAlertTitle-root': {
fontWeight: theme.typography.fontWeightMedium,
marginBottom: theme.spacing(0.5),
fontSize: theme.typography.body1.fontSize,
lineHeight: theme.typography.body1.lineHeight,
},
// Variant styles
'&.MuiAlert-filled': {
fontWeight: theme.typography.fontWeightMedium,
'& .MuiAlert-icon': {
color: 'inherit',
},
'& .MuiAlert-action .MuiIconButton-root': {
color: 'inherit',
'&:hover': {
backgroundColor: 'rgba(255, 255, 255, 0.1)',
},
},
},
'&.MuiAlert-outlined': {
borderWidth: 2,
'& .MuiAlert-icon': {
fontSize: '1.25rem',
},
},
'&.MuiAlert-standard': {
'& .MuiAlert-action .MuiIconButton-root': {
'&:hover': {
backgroundColor: 'rgba(0, 0, 0, 0.04)',
},
},
},
// Severity-specific enhancements
'&.MuiAlert-standardSuccess': {
backgroundColor: `${theme.palette.success.light}15`,
borderLeft: `4px solid ${theme.palette.success.main}`,
},
'&.MuiAlert-standardError': {
backgroundColor: `${theme.palette.error.light}15`,
borderLeft: `4px solid ${theme.palette.error.main}`,
},
'&.MuiAlert-standardWarning': {
backgroundColor: `${theme.palette.warning.light}15`,
borderLeft: `4px solid ${theme.palette.warning.main}`,
},
'&.MuiAlert-standardInfo': {
backgroundColor: `${theme.palette.info.light}15`,
borderLeft: `4px solid ${theme.palette.info.main}`,
},
}));
//# sourceMappingURL=Alert.style.js.map