groot/automatisch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: use styleOverrides callback in theme

Browse Source
This commit is contained in:
Ali BARIN
2022-02-05 23:59:29 +01:00
committed by Ömer Faruk Aydın
parent e155bb528f
commit 85c3442196
1 changed files with 30 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
packages/web/src/styles/theme.ts
View File

@@ -1,14 +1,7 @@
import { createTheme, alpha } from '@mui/material/styles'; import { createTheme, alpha } from '@mui/material/styles';
import { cardActionAreaClasses } from '@mui/material/CardActionArea'; import { cardActionAreaClasses } from '@mui/material/CardActionArea';
const referenceTheme = createTheme({ const referenceTheme = createTheme();
palette: {
primary: {
main: '#0059F7',
dark: '#001F52',
}
}
});
const extendedTheme = createTheme({ const extendedTheme = createTheme({
palette: { palette: {
@@ -167,10 +160,10 @@ const extendedTheme = createTheme({
components: { components: {
MuiAppBar: { MuiAppBar: {
styleOverrides: { styleOverrides: {
root: { root: ({ theme }) => ({
background: referenceTheme.palette.primary.dark, background: theme.palette.primary.dark,
zIndex: referenceTheme.zIndex.drawer + 1, zIndex: theme.zIndex.drawer + 1,
} }),
}, },
defaultProps: { defaultProps: {
elevation: 2, elevation: 2,
@@ -204,16 +197,16 @@ const extendedTheme = createTheme({
}, },
MuiCardActionArea: { MuiCardActionArea: {
styleOverrides: { styleOverrides: {
root: { root: ({ theme }) => ({
borderRadius: referenceTheme.shape.borderRadius, borderRadius: theme.shape.borderRadius,
[`& .${cardActionAreaClasses.focusHighlight}`]: { [`& .${cardActionAreaClasses.focusHighlight}`]: {
background: 'unset', background: 'unset',
border: `1px solid ${alpha(referenceTheme.palette.primary.light, 1)}`, border: `1px solid ${alpha(theme.palette.primary.light, 1)}`,
}, },
[`&:hover .${cardActionAreaClasses.focusHighlight}`]: { [`&:hover .${cardActionAreaClasses.focusHighlight}`]: {
opacity: 1, opacity: 1,
} }
} })
} }
}, },
MuiContainer: { MuiContainer: {
@@ -236,52 +229,52 @@ const extendedTheme = createTheme({
}, },
MuiDialog: { MuiDialog: {
styleOverrides: { styleOverrides: {
paperWidthSm: { paperWidthSm: ({ theme }) => ({
margin: referenceTheme.spacing(4, 3), margin: theme.spacing(4, 3),
width: `calc(100% - ${referenceTheme.spacing(6)})`, width: `calc(100% - ${theme.spacing(6)})`,
} })
} }
}, },
MuiDialogContent: { MuiDialogContent: {
styleOverrides: { styleOverrides: {
root: { root: ({ theme }) => ({
'&&': { '&&': {
paddingTop: referenceTheme.spacing(2), paddingTop: theme.spacing(2),
} }
}, }),
} }
}, },
MuiDialogTitle: { MuiDialogTitle: {
styleOverrides: { styleOverrides: {
root: { root: ({ theme }) => ({
paddingTop: referenceTheme.spacing(3), paddingTop: theme.spacing(3),
} })
} }
}, },
MuiOutlinedInput: { MuiOutlinedInput: {
styleOverrides: { styleOverrides: {
inputSizeSmall: { inputSizeSmall: ({ theme }) => ({
// 1.5625 = 12.5px based on 1 = 8px // 1.5625 = 12.5px based on 1 = 8px
padding: referenceTheme.spacing(1.5625, 1.75), padding: theme.spacing(1.5625, 1.75),
} }),
} }
}, },
MuiTab: { MuiTab: {
styleOverrides: { styleOverrides: {
root: { root: ({ theme }) => ({
[referenceTheme.breakpoints.up('sm')]: { [theme.breakpoints.up('sm')]: {
padding: referenceTheme.spacing(1.5, 3), padding: theme.spacing(1.5, 3),
} }
} }),
}, },
}, },
MuiToolbar: { MuiToolbar: {
styleOverrides: { styleOverrides: {
root: { root: ({ theme }) => ({
'@media all': { '@media all': {
paddingRight: referenceTheme.spacing(1.5), paddingRight: theme.spacing(1.5),
} },
} }),
} }
} }
} }