@krowdy-ui/core
Version:
React components that implement Google's Material Design.
99 lines (98 loc) • 2.09 kB
JavaScript
import { bluePrimary, blueSecondary, krowdy, grey, amber, green, alt, custom } from '../colors';
import shadows from './shadows';
export default {
overrides: {
MuiButton: {
root: {
fontWeight: 400,
textTransform: 'initial'
}
},
MuiOutlinedInput: {
inputMarginDense: {
paddingLeft: 8
},
notchedOutline: {
borderColor: blueSecondary[50]
} // notchedOutline: {
// padding: '0 2.5px'
// }
},
MuiPaper: {
outlined: {
borderColor: blueSecondary[50]
},
rounded: {
borderRadius: 8
}
},
MuiSvgIcon: {
fontSizeSmall: {
fontSize: '1.125rem'
}
},
MuiSwitch: {
switchBase: {
color: grey[400]
}
},
MuiTextField: {
root: {
'& .MuiInputLabel-marginDense + div > .MuiOutlinedInput-notchedOutline': {
padding: '0 2.5px'
},
'& .MuiInputLabel-marginDense.MuiInputLabel-outlined.MuiInputLabel-shrink': {
transform: 'translate(8px, -5px) scale(0.75)'
},
'& .MuiInputLabel-outlined.MuiInputLabel-marginDense': {
transform: 'translate(8px, 12px) scale(1)'
}
}
},
MuiTypography: {
body1: {
fontSize: '0.75rem'
},
h1: {
fontSize: '2.75rem',
fontWeight: 'bold'
},
h2: {
fontSize: '2.25rem',
fontWeight: 'bold'
},
h3: {
fontSize: '1.8125rem',
fontWeight: 'bold'
},
h4: {
fontSize: '1.4375rem',
fontWeight: 'bold'
},
h5: {
fontSize: '1.125rem',
fontWeight: 'bold'
},
h6: {
fontSize: '0.875rem',
fontWeight: 'bold'
}
}
},
palette: {
alt,
amber,
custom,
green,
grey,
krowdy,
primary: bluePrimary,
secondary: blueSecondary
},
shadow: {
krowdy: `0 0 8px ${krowdy[500]}`,
primary: `0 0 8px ${bluePrimary[500]}`,
secondary: `0 0 8px ${blueSecondary[500]}`
},
shadows
};