cesnimda
121 lines
3.2 KiB
JavaScript
121 lines
3.2 KiB
JavaScript
// @project
|
|
import { generateFocusStyle } from '@/utils/generateFocusStyle';
|
|
|
|
// Define the list of colors that the Radio component will support
|
|
const colors = ['primary', 'secondary', 'success', 'error', 'warning', 'info'];
|
|
|
|
/*************************** OVERRIDES - BUTTON ***************************/
|
|
|
|
export default function Button(theme) {
|
|
const boxShadow = {
|
|
boxShadow: theme.vars.customShadows.button,
|
|
'&:hover': {
|
|
boxShadow: theme.vars.customShadows.button
|
|
}
|
|
};
|
|
|
|
const textColorVariants = colors.map((color) => {
|
|
if (color === 'secondary')
|
|
return {
|
|
props: { variant: 'text', color: 'secondary' },
|
|
style: {
|
|
color: theme.vars.palette.text.primary
|
|
}
|
|
};
|
|
|
|
return {
|
|
props: { variant: 'text', color }
|
|
};
|
|
});
|
|
|
|
const outlinedColorVariants = colors.map((color) => {
|
|
const paletteColor = theme.vars.palette[color];
|
|
const isSecondary = color === 'secondary';
|
|
|
|
return {
|
|
props: { variant: 'outlined', color },
|
|
style: {
|
|
...boxShadow,
|
|
borderColor: paletteColor.lighter,
|
|
|
|
...(isSecondary && {
|
|
borderColor: theme.vars.palette.divider,
|
|
color: theme.vars.palette.text.primary
|
|
})
|
|
}
|
|
};
|
|
});
|
|
|
|
return {
|
|
MuiButton: {
|
|
defaultProps: {
|
|
disableFocusRipple: true
|
|
},
|
|
styleOverrides: {
|
|
root: {
|
|
borderRadius: 8,
|
|
'&.Mui-disabled': {
|
|
cursor: 'not-allowed',
|
|
pointerEvents: 'auto',
|
|
'&:hover': {
|
|
backgroundColor: 'transparent',
|
|
'&.MuiButton-contained': {
|
|
backgroundColor: theme.vars.palette.action.disabledBackground
|
|
}
|
|
}
|
|
},
|
|
'&:focus-visible': {
|
|
...generateFocusStyle(theme.vars.palette.primary.main)
|
|
},
|
|
// loading styles
|
|
'&.MuiButton-loading': {
|
|
'.MuiButton-loadingIndicator': { position: 'relative' },
|
|
|
|
// Styles specific to loadingPositionEnd
|
|
'&.MuiButton-loadingPositionEnd': {
|
|
'.MuiButton-loadingIndicator': { right: 'unset', marginLeft: 8 },
|
|
'.MuiButton-endIcon': { display: 'none' }
|
|
},
|
|
|
|
// Styles specific to loadingPositionStart
|
|
'&.MuiButton-loadingPositionStart': {
|
|
'.MuiButton-loadingIndicator': { left: 'unset', marginRight: 8 },
|
|
'.MuiButton-startIcon': { display: 'none' }
|
|
}
|
|
},
|
|
variants: [...textColorVariants, ...outlinedColorVariants]
|
|
},
|
|
contained: { ...boxShadow },
|
|
startIcon: {
|
|
marginLeft: 0,
|
|
marginRight: 4
|
|
},
|
|
endIcon: {
|
|
marginLeft: 4
|
|
},
|
|
sizeSmall: {
|
|
height: 36,
|
|
fontSize: 12,
|
|
lineHeight: '16px',
|
|
letterSpacing: 0,
|
|
padding: 10
|
|
},
|
|
sizeMedium: {
|
|
height: 42,
|
|
fontSize: 14,
|
|
lineHeight: '18px',
|
|
letterSpacing: 0,
|
|
padding: 12
|
|
},
|
|
sizeLarge: {
|
|
height: 48,
|
|
fontSize: 16,
|
|
lineHeight: '20px',
|
|
letterSpacing: 0,
|
|
padding: '16px 18px'
|
|
}
|
|
}
|
|
}
|
|
};
|
|
}
|