@unicity/design-system
Version:
A comprehensive React component library built on Material-UI with advanced theming capabilities including neumorphism design support
145 lines • 4.28 kB
JavaScript
import { styled } from '@mui/material/styles';
import { Radio, FormControl } from '@mui/material';
export const StyledFormControl = styled(FormControl)(({ theme }) => ({
'& .MuiFormLabel-root': {
color: theme.palette.text.primary,
fontSize: theme.typography.body1.fontSize,
fontWeight: theme.typography.fontWeightMedium,
marginBottom: theme.spacing(1),
'&.Mui-focused': {
color: theme.palette.text.primary,
},
'&.Mui-error': {
color: theme.palette.error.main,
},
'&.Mui-disabled': {
color: theme.palette.text.disabled,
},
},
'& .MuiRadioGroup-root': {
gap: theme.spacing(0.5),
},
'& .MuiFormControlLabel-root': {
marginLeft: 0,
marginRight: theme.spacing(2),
'& .MuiFormControlLabel-label': {
color: theme.palette.text.primary,
fontSize: theme.typography.body1.fontSize,
'&.Mui-disabled': {
color: theme.palette.text.disabled,
},
},
},
'& .MuiFormHelperText-root': {
marginTop: theme.spacing(0.5),
marginLeft: 0,
fontSize: theme.typography.caption.fontSize,
'&.Mui-error': {
color: theme.palette.error.main,
},
},
}));
export const StyledRadio = styled(Radio)(({ theme }) => ({
padding: theme.spacing(1),
borderRadius: '50%',
'&:hover': {
backgroundColor: 'transparent',
'& .MuiSvgIcon-root': {
boxShadow: `0 0 0 8px ${theme.palette.action.hover}`,
borderRadius: '50%',
},
},
'& .MuiSvgIcon-root': {
fontSize: '1.5rem',
transition: theme.transitions.create([
'color',
'box-shadow',
], {
duration: theme.transitions.duration.short,
}),
},
'&.Mui-checked': {
'& .MuiSvgIcon-root': {
color: theme.palette.primary.main,
},
'&:hover': {
'& .MuiSvgIcon-root': {
boxShadow: `0 0 0 8px ${theme.palette.primary.main}20`,
},
},
},
'&.Mui-disabled': {
'& .MuiSvgIcon-root': {
color: theme.palette.action.disabled,
},
},
// Size variants
'&.MuiRadio-sizeSmall': {
padding: theme.spacing(0.5),
'& .MuiSvgIcon-root': {
fontSize: '1.25rem',
},
},
// Color variants
'&.MuiRadio-colorSecondary': {
'&.Mui-checked': {
'& .MuiSvgIcon-root': {
color: theme.palette.secondary.main,
},
'&:hover': {
'& .MuiSvgIcon-root': {
boxShadow: `0 0 0 8px ${theme.palette.secondary.main}20`,
},
},
},
},
'&.MuiRadio-colorSuccess': {
'&.Mui-checked': {
'& .MuiSvgIcon-root': {
color: theme.palette.success.main,
},
'&:hover': {
'& .MuiSvgIcon-root': {
boxShadow: `0 0 0 8px ${theme.palette.success.main}20`,
},
},
},
},
'&.MuiRadio-colorWarning': {
'&.Mui-checked': {
'& .MuiSvgIcon-root': {
color: theme.palette.warning.main,
},
'&:hover': {
'& .MuiSvgIcon-root': {
boxShadow: `0 0 0 8px ${theme.palette.warning.main}20`,
},
},
},
},
'&.MuiRadio-colorError': {
'&.Mui-checked': {
'& .MuiSvgIcon-root': {
color: theme.palette.error.main,
},
'&:hover': {
'& .MuiSvgIcon-root': {
boxShadow: `0 0 0 8px ${theme.palette.error.main}20`,
},
},
},
},
'&.MuiRadio-colorInfo': {
'&.Mui-checked': {
'& .MuiSvgIcon-root': {
color: theme.palette.info.main,
},
'&:hover': {
'& .MuiSvgIcon-root': {
boxShadow: `0 0 0 8px ${theme.palette.info.main}20`,
},
},
},
},
}));
//# sourceMappingURL=Radio.style.js.map