first

src/themes/overrides/Accordion.js

@@ -0,0 +1,27 @@
+// ==============================|| OVERRIDES - ALERT TITLE ||============================== //
+
+export default function Accordion(theme) {
+  return {
+    MuiAccordion: {
+      defaultProps: {
+        disableGutters: true,
+        square: true,
+        elevation: 0
+      },
+      styleOverrides: {
+        root: {
+          border: `1px solid ${theme.palette.secondary.light}`,
+          '&:not(:last-child)': {
+            borderBottom: 0
+          },
+          '&:before': {
+            display: 'none'
+          },
+          '&.Mui-disabled': {
+            backgroundColor: theme.palette.secondary.lighter
+          }
+        }
+      }
+    }
+  };
+}

src/themes/overrides/AccordionDetails.js

@@ -0,0 +1,14 @@
+// ==============================|| OVERRIDES - ALERT TITLE ||============================== //
+
+export default function AccordionDetails(theme) {
+  return {
+    MuiAccordionDetails: {
+      styleOverrides: {
+        root: {
+          padding: theme.spacing(2),
+          borderTop: `1px solid ${theme.palette.secondary.light}`
+        }
+      }
+    }
+  };
+}

src/themes/overrides/AccordionSummary.js

@@ -0,0 +1,33 @@
+// assets
+import { RightOutlined } from '@ant-design/icons';
+
+// ==============================|| OVERRIDES - ALERT TITLE ||============================== //
+
+export default function AccordionSummary(theme) {
+  const { palette, spacing } = theme;
+
+  return {
+    MuiAccordionSummary: {
+      defaultProps: {
+        expandIcon: <RightOutlined style={{ fontSize: '0.75rem' }} />
+      },
+      styleOverrides: {
+        root: {
+          backgroundColor: palette.secondary.lighter,
+          flexDirection: 'row-reverse',
+          minHeight: 46
+        },
+        expandIconWrapper: {
+          '&.Mui-expanded': {
+            transform: 'rotate(90deg)'
+          }
+        },
+        content: {
+          marginTop: spacing(1.25),
+          marginBottom: spacing(1.25),
+          marginLeft: spacing(1)
+        }
+      }
+    }
+  };
+}

src/themes/overrides/Alert.js

@@ -0,0 +1,75 @@
+// material-ui
+import { alpha } from '@mui/material/styles';
+
+// project import
+import getColors from 'utils/getColors';
+
+// ==============================|| ALERT - COLORS ||============================== //
+
+function getColorStyle({ color, theme }) {
+  const colors = getColors(theme, color);
+  const { lighter, light, main } = colors;
+
+  return {
+    borderColor: alpha(light, 0.5),
+    backgroundColor: lighter,
+    '& .MuiAlert-icon': {
+      color: main
+    }
+  };
+}
+
+// ==============================|| OVERRIDES - ALERT ||============================== //
+
+export default function Alert(theme) {
+  const primaryDashed = getColorStyle({ color: 'primary', theme });
+
+  return {
+    MuiAlert: {
+      styleOverrides: {
+        root: {
+          color: theme.palette.text.primary,
+          fontSize: '0.875rem'
+        },
+        icon: {
+          fontSize: '1rem'
+        },
+        message: {
+          padding: 0,
+          marginTop: 3
+        },
+        filled: {
+          color: theme.palette.grey[0]
+        },
+        border: {
+          padding: '10px 16px',
+          border: '1px solid',
+          ...primaryDashed,
+          '&.MuiAlert-borderPrimary': getColorStyle({ color: 'primary', theme }),
+          '&.MuiAlert-borderSecondary': getColorStyle({ color: 'secondary', theme }),
+          '&.MuiAlert-borderError': getColorStyle({ color: 'error', theme }),
+          '&.MuiAlert-borderSuccess': getColorStyle({ color: 'success', theme }),
+          '&.MuiAlert-borderInfo': getColorStyle({ color: 'info', theme }),
+          '&.MuiAlert-borderWarning': getColorStyle({ color: 'warning', theme })
+        },
+        action: {
+          '& .MuiButton-root': {
+            padding: 2,
+            height: 'auto',
+            fontSize: '0.75rem',
+            marginTop: -2
+          },
+          '& .MuiIconButton-root': {
+            width: 'auto',
+            height: 'auto',
+            padding: 2,
+            marginRight: 6,
+            '& .MuiSvgIcon-root': {
+              fontSize: '1rem'
+            }
+          }
+        }
+      }
+    }
+  };
+}

src/themes/overrides/AlertTitle.js

@@ -0,0 +1,15 @@
+// ==============================|| OVERRIDES - ALERT TITLE ||============================== //
+
+export default function AlertTitle() {
+  return {
+    MuiAlertTitle: {
+      styleOverrides: {
+        root: {
+          marginBottom: 4,
+          marginTop: 0,
+          fontWeight: 400
+        }
+      }
+    }
+  };
+}

src/themes/overrides/Autocomplete.js

@@ -0,0 +1,23 @@
+// ==============================|| OVERRIDES - AUTOCOMPLETE ||============================== //
+
+export default function Autocomplete() {
+  return {
+    MuiAutocomplete: {
+      styleOverrides: {
+        root: {
+          '& .MuiOutlinedInput-root': {
+            padding: '3px 9px'
+          }
+        },
+        popupIndicator: {
+          width: 'auto',
+          height: 'auto'
+        },
+        clearIndicator: {
+          width: 'auto',
+          height: 'auto'
+        }
+      }
+    }
+  };
+}

src/themes/overrides/Badge.js

@@ -0,0 +1,41 @@
+// project import
+import getColors from 'utils/getColors';
+
+// ==============================|| BADGE - COLORS ||============================== //
+
+function getColorStyle({ color, theme }) {
+  const colors = getColors(theme, color);
+  const { lighter, main } = colors;
+
+  return {
+    color: main,
+    backgroundColor: lighter
+  };
+}
+
+// ==============================|| OVERRIDES - BADGE ||============================== //
+
+export default function Badge(theme) {
+  const defaultLightBadge = getColorStyle({ color: 'primary', theme });
+
+  return {
+    MuiBadge: {
+      styleOverrides: {
+        standard: {
+          minWidth: theme.spacing(2),
+          height: theme.spacing(2),
+          padding: theme.spacing(0.5)
+        },
+        light: {
+          ...defaultLightBadge,
+          '&.MuiBadge-colorPrimary': getColorStyle({ color: 'primary', theme }),
+          '&.MuiBadge-colorSecondary': getColorStyle({ color: 'secondary', theme }),
+          '&.MuiBadge-colorError': getColorStyle({ color: 'error', theme }),
+          '&.MuiBadge-colorInfo': getColorStyle({ color: 'info', theme }),
+          '&.MuiBadge-colorSuccess': getColorStyle({ color: 'success', theme }),
+          '&.MuiBadge-colorWarning': getColorStyle({ color: 'warning', theme })
+        }
+      }
+    }
+  };
+}

src/themes/overrides/Button.js

@@ -0,0 +1,202 @@
+// material-ui
+import { alpha } from '@mui/material/styles';
+
+// project import
+import getColors from 'utils/getColors';
+import getShadow from 'utils/getShadow';
+
+// ==============================|| BUTTON - COLORS ||============================== //
+
+function getColorStyle({ variant, color, theme }) {
+  const colors = getColors(theme, color);
+  const { lighter, main, dark, contrastText } = colors;
+
+  const buttonShadow = `${color}Button`;
+  const shadows = getShadow(theme, buttonShadow);
+
+  const commonShadow = {
+    '&::after': {
+      boxShadow: `0 0 5px 5px ${alpha(main, 0.9)}`
+    },
+    '&:active::after': {
+      boxShadow: `0 0 0 0 ${alpha(main, 0.9)}`
+    },
+    '&:focus-visible': {
+      outline: `2px solid ${dark}`,
+      outlineOffset: 2
+    }
+  };
+
+  switch (variant) {
+    case 'contained':
+      return {
+        '&:hover': {
+          backgroundColor: dark
+        },
+        ...commonShadow
+      };
+    case 'shadow':
+      return {
+        color: contrastText,
+        backgroundColor: main,
+        boxShadow: shadows,
+        '&:hover': {
+          boxShadow: 'none',
+          backgroundColor: dark
+        },
+        ...commonShadow
+      };
+    case 'outlined':
+      return {
+        borderColor: main,
+        '&:hover': {
+          color: dark,
+          backgroundColor: 'transparent',
+          borderColor: dark
+        },
+        ...commonShadow
+      };
+    case 'dashed':
+      return {
+        color: main,
+        borderColor: main,
+        backgroundColor: lighter,
+        '&:hover': {
+          color: dark,
+          borderColor: dark
+        },
+        ...commonShadow
+      };
+    case 'text':
+    default:
+      return {
+        '&:hover': {
+          color: dark,
+          backgroundColor: lighter
+        },
+        ...commonShadow
+      };
+  }
+}
+
+// ==============================|| OVERRIDES - BUTTON ||============================== //
+
+export default function Button(theme) {
+  const primaryDashed = getColorStyle({ variant: 'dashed', color: 'primary', theme });
+  const primaryShadow = getColorStyle({ variant: 'shadow', color: 'primary', theme });
+
+  const disabledStyle = {
+    '&.Mui-disabled': {
+      backgroundColor: theme.palette.grey[200]
+    }
+  };
+  const iconStyle = {
+    '&>*:nth-of-type(1)': {
+      fontSize: 'inherit'
+    }
+  };
+
+  return {
+    MuiButton: {
+      defaultProps: {
+        disableElevation: true
+      },
+      styleOverrides: {
+        root: {
+          fontWeight: 400,
+          '&::after': {
+            content: '""',
+            display: 'block',
+            position: 'absolute',
+            left: 0,
+            top: 0,
+            width: '100%',
+            height: '100%',
+            borderRadius: 4,
+            opacity: 0,
+            transition: 'all 0.5s'
+          },
+
+          '&:active::after': {
+            position: 'absolute',
+            borderRadius: 4,
+            left: 0,
+            top: 0,
+            opacity: 1,
+            transition: '0s'
+          }
+        },
+        contained: {
+          ...disabledStyle
+        },
+        outlined: {
+          ...disabledStyle
+        },
+        text: {
+          boxShadow: 'none',
+          '&:hover': {
+            boxShadow: 'none'
+          }
+        },
+        endIcon: {
+          ...iconStyle
+        },
+        startIcon: {
+          ...iconStyle
+        },
+        dashed: {
+          border: '1px dashed',
+          ...primaryDashed,
+          '&.MuiButton-dashedPrimary': getColorStyle({ variant: 'dashed', color: 'primary', theme }),
+          '&.MuiButton-dashedSecondary': getColorStyle({ variant: 'dashed', color: 'secondary', theme }),
+          '&.MuiButton-dashedError': getColorStyle({ variant: 'dashed', color: 'error', theme }),
+          '&.MuiButton-dashedSuccess': getColorStyle({ variant: 'dashed', color: 'success', theme }),
+          '&.MuiButton-dashedInfo': getColorStyle({ variant: 'dashed', color: 'info', theme }),
+          '&.MuiButton-dashedWarning': getColorStyle({ variant: 'dashed', color: 'warning', theme }),
+          '&.Mui-disabled': {
+            color: `${theme.palette.grey[300]} !important`,
+            borderColor: `${theme.palette.grey[400]} !important`,
+            backgroundColor: `${theme.palette.grey[200]} !important`
+          }
+        },
+        shadow: {
+          ...primaryShadow,
+          '&.MuiButton-shadowPrimary': getColorStyle({ variant: 'shadow', color: 'primary', theme }),
+          '&.MuiButton-shadowSecondary': getColorStyle({ variant: 'shadow', color: 'secondary', theme }),
+          '&.MuiButton-shadowError': getColorStyle({ variant: 'shadow', color: 'error', theme }),
+          '&.MuiButton-shadowSuccess': getColorStyle({ variant: 'shadow', color: 'success', theme }),
+          '&.MuiButton-shadowInfo': getColorStyle({ variant: 'shadow', color: 'info', theme }),
+          '&.MuiButton-shadowWarning': getColorStyle({ variant: 'shadow', color: 'warning', theme }),
+          '&.Mui-disabled': {
+            color: `${theme.palette.grey[300]} !important`,
+            borderColor: `${theme.palette.grey[400]} !important`,
+            backgroundColor: `${theme.palette.grey[200]} !important`
+          }
+        },
+        containedPrimary: getColorStyle({ variant: 'contained', color: 'primary', theme }),
+        containedSecondary: getColorStyle({ variant: 'contained', color: 'secondary', theme }),
+        containedError: getColorStyle({ variant: 'contained', color: 'error', theme }),
+        containedSuccess: getColorStyle({ variant: 'contained', color: 'success', theme }),
+        containedInfo: getColorStyle({ variant: 'contained', color: 'info', theme }),
+        containedWarning: getColorStyle({ variant: 'contained', color: 'warning', theme }),
+        outlinedPrimary: getColorStyle({ variant: 'outlined', color: 'primary', theme }),
+        outlinedSecondary: getColorStyle({ variant: 'outlined', color: 'secondary', theme }),
+        outlinedError: getColorStyle({ variant: 'outlined', color: 'error', theme }),
+        outlinedSuccess: getColorStyle({ variant: 'outlined', color: 'success', theme }),
+        outlinedInfo: getColorStyle({ variant: 'outlined', color: 'info', theme }),
+        outlinedWarning: getColorStyle({ variant: 'outlined', color: 'warning', theme }),
+        textPrimary: getColorStyle({ variant: 'text', color: 'primary', theme }),
+        textSecondary: getColorStyle({ variant: 'text', color: 'secondary', theme }),
+        textError: getColorStyle({ variant: 'text', color: 'error', theme }),
+        textSuccess: getColorStyle({ variant: 'text', color: 'success', theme }),
+        textInfo: getColorStyle({ variant: 'text', color: 'info', theme }),
+        textWarning: getColorStyle({ variant: 'text', color: 'warning', theme }),
+        sizeExtraSmall: {
+          minWidth: 56,
+          fontSize: '0.625rem',
+          padding: '2px 8px'
+        }
+      }
+    }
+  };
+}

src/themes/overrides/ButtonBase.js

@@ -0,0 +1,11 @@
+// ==============================|| OVERRIDES - BUTTON ||============================== //
+
+export default function ButtonBase() {
+  return {
+    MuiButtonBase: {
+      defaultProps: {
+        disableRipple: true
+      }
+    }
+  };
+}

src/themes/overrides/ButtonGroup.js

@@ -0,0 +1,11 @@
+// ==============================|| OVERRIDES - BUTTON GROUP ||============================== //
+
+export default function ButtonGroup() {
+  return {
+    MuiButtonGroup: {
+      defaultProps: {
+        disableRipple: true
+      }
+    }
+  };
+}

src/themes/overrides/CardContent.js

@@ -0,0 +1,16 @@
+// ==============================|| OVERRIDES - CARD CONTENT ||============================== //
+
+export default function CardContent() {
+  return {
+    MuiCardContent: {
+      styleOverrides: {
+        root: {
+          padding: 20,
+          '&:last-child': {
+            paddingBottom: 20
+          }
+        }
+      }
+    }
+  };
+}

src/themes/overrides/Checkbox.js

@@ -0,0 +1,126 @@
+// material-ui
+import { Box } from '@mui/material';
+
+// project import
+import getColors from 'utils/getColors';
+
+// assets
+import { CheckSquareFilled, MinusSquareFilled } from '@ant-design/icons';
+
+// ==============================|| RADIO - COLORS ||============================== //
+
+function getColorStyle({ color, theme }) {
+  const colors = getColors(theme, color);
+  const { lighter, main, dark } = colors;
+
+  return {
+    '&:hover': {
+      backgroundColor: lighter,
+      '& .icon': {
+        borderColor: main
+      }
+    },
+    '&.Mui-focusVisible': {
+      outline: `2px solid ${dark}`,
+      outlineOffset: -4
+    }
+  };
+}
+
+// ==============================|| CHECKBOX - SIZE STYLE ||============================== //
+
+function getSizeStyle(size) {
+  switch (size) {
+    case 'small':
+      return { size: 16, fontSize: 1, position: 1 };
+    case 'large':
+      return { size: 24, fontSize: 1.6, position: 2 };
+    case 'medium':
+    default:
+      return { size: 20, fontSize: 1.35, position: 2 };
+  }
+}
+
+// ==============================|| CHECKBOX - STYLE ||============================== //
+
+function checkboxStyle(size) {
+  const sizes = getSizeStyle(size);
+
+  return {
+    '& .icon': {
+      width: sizes.size,
+      height: sizes.size,
+      '& .filled': {
+        fontSize: `${sizes.fontSize}rem`,
+        top: -sizes.position,
+        left: -sizes.position
+      }
+    }
+  };
+}
+
+// ==============================|| OVERRIDES - CHECKBOX ||============================== //
+
+export default function Checkbox(theme) {
+  const { palette } = theme;
+
+  return {
+    MuiCheckbox: {
+      defaultProps: {
+        className: 'size-small',
+        icon: <Box className="icon" sx={{ width: 16, height: 16, border: '1px solid', borderColor: 'inherit', borderRadius: 0.25 }} />,
+        checkedIcon: (
+          <Box
+            className="icon"
+            sx={{
+              width: 16,
+              height: 16,
+              border: '1px solid',
+              borderColor: 'inherit',
+              borderRadius: 0.25,
+              position: 'relative'
+            }}
+          >
+            <CheckSquareFilled className="filled" style={{ position: 'absolute' }} />
+          </Box>
+        ),
+        indeterminateIcon: (
+          <Box
+            className="icon"
+            sx={{
+              width: 16,
+              height: 16,
+              border: '1px solid',
+              borderColor: 'inherit',
+              borderRadius: 0.25,
+              position: 'relative'
+            }}
+          >
+            <MinusSquareFilled className="filled" style={{ position: 'absolute' }} />
+          </Box>
+        )
+      },
+      styleOverrides: {
+        root: {
+          borderRadius: 0,
+          color: palette.secondary[300],
+          '&.size-small': {
+            ...checkboxStyle('small')
+          },
+          '&.size-medium': {
+            ...checkboxStyle('medium')
+          },
+          '&.size-large': {
+            ...checkboxStyle('large')
+          }
+        },
+        colorPrimary: getColorStyle({ color: 'primary', theme }),
+        colorSecondary: getColorStyle({ color: 'secondary', theme }),
+        colorSuccess: getColorStyle({ color: 'success', theme }),
+        colorWarning: getColorStyle({ color: 'warning', theme }),
+        colorInfo: getColorStyle({ color: 'info', theme }),
+        colorError: getColorStyle({ color: 'error', theme })
+      }
+    }
+  };
+}

src/themes/overrides/Chip.js

@@ -0,0 +1,80 @@
+// project import
+import getColors from 'utils/getColors';
+
+// ==============================|| CHIP - COLORS ||============================== //
+
+function getColor({ color, theme }) {
+  const colors = getColors(theme, color);
+  const { dark } = colors;
+
+  return {
+    '&.Mui-focusVisible': {
+      outline: `2px solid ${dark}`,
+      outlineOffset: 2
+    }
+  };
+}
+
+function getColorStyle({ color, theme }) {
+  const colors = getColors(theme, color);
+  const { light, lighter, main } = colors;
+
+  return {
+    color: main,
+    backgroundColor: lighter,
+    borderColor: light,
+    '& .MuiChip-deleteIcon': {
+      color: main,
+      '&:hover': {
+        color: light
+      }
+    }
+  };
+}
+
+// ==============================|| OVERRIDES - CHIP ||============================== //
+
+export default function Chip(theme) {
+  const defaultLightChip = getColorStyle({ color: 'secondary', theme });
+  return {
+    MuiChip: {
+      styleOverrides: {
+        root: {
+          borderRadius: 4,
+          '&:active': {
+            boxShadow: 'none'
+          },
+          '&.MuiChip-colorPrimary': getColor({ color: 'primary', theme }),
+          '&.MuiChip-colorSecondary': getColor({ color: 'secondary', theme }),
+          '&.MuiChip-colorError': getColor({ color: 'error', theme }),
+          '&.MuiChip-colorInfo': getColor({ color: 'info', theme }),
+          '&.MuiChip-colorSuccess': getColor({ color: 'success', theme }),
+          '&.MuiChip-colorWarning': getColor({ color: 'warning', theme })
+        },
+        sizeLarge: {
+          fontSize: '1rem',
+          height: 40
+        },
+        light: {
+          ...defaultLightChip,
+          '&.MuiChip-lightPrimary': getColorStyle({ color: 'primary', theme }),
+          '&.MuiChip-lightSecondary': getColorStyle({ color: 'secondary', theme }),
+          '&.MuiChip-lightError': getColorStyle({ color: 'error', theme }),
+          '&.MuiChip-lightInfo': getColorStyle({ color: 'info', theme }),
+          '&.MuiChip-lightSuccess': getColorStyle({ color: 'success', theme }),
+          '&.MuiChip-lightWarning': getColorStyle({ color: 'warning', theme })
+        },
+        combined: {
+          border: '1px solid',
+          ...defaultLightChip,
+          '&.MuiChip-combinedPrimary': getColorStyle({ color: 'primary', theme }),
+          '&.MuiChip-combinedSecondary': getColorStyle({ color: 'secondary', theme }),
+          '&.MuiChip-combinedError': getColorStyle({ color: 'error', theme }),
+          '&.MuiChip-combinedInfo': getColorStyle({ color: 'info', theme }),
+          '&.MuiChip-combinedSuccess': getColorStyle({ color: 'success', theme }),
+          '&.MuiChip-combinedWarning': getColorStyle({ color: 'warning', theme })
+        }
+      }
+    }
+  };
+}

src/themes/overrides/Dialog.js

@@ -0,0 +1,18 @@
+// material-ui
+import { alpha } from '@mui/material/styles';
+
+// ==============================|| OVERRIDES - DIALOG ||============================== //
+
+export default function Dialog() {
+  return {
+    MuiDialog: {
+      styleOverrides: {
+        root: {
+          '& .MuiBackdrop-root': {
+            backgroundColor: alpha('#000', 0.7)
+          }
+        }
+      }
+    }
+  };
+}

src/themes/overrides/DialogContentText.js

@@ -0,0 +1,14 @@
+// ==============================|| OVERRIDES - DIALOG CONTENT TEXT ||============================== //
+
+export default function DialogContentText(theme) {
+  return {
+    MuiDialogContentText: {
+      styleOverrides: {
+        root: {
+          fontSize: '0.875rem',
+          color: theme.palette.text.primary
+        }
+      }
+    }
+  };
+}

src/themes/overrides/DialogTitle.js

@@ -0,0 +1,14 @@
+// ==============================|| OVERRIDES - DIALOG TITLE ||============================== //
+
+export default function DialogTitle() {
+  return {
+    MuiDialogTitle: {
+      styleOverrides: {
+        root: {
+          fontSize: '1rem',
+          fontWeight: 500
+        }
+      }
+    }
+  };
+}

src/themes/overrides/Fab.js

@@ -0,0 +1,82 @@
+// material-ui
+import { alpha } from '@mui/material/styles';
+
+// project import
+import getColors from 'utils/getColors';
+import getShadow from 'utils/getShadow';
+
+// ==============================|| FAB BUTTON - COLORS ||============================== //
+
+function getColorStyle({ color, theme }) {
+  const colors = getColors(theme, color);
+  const { main, dark, contrastText } = colors;
+
+  const buttonShadow = `${color}Button`;
+  const shadows = getShadow(theme, buttonShadow);
+
+  return {
+    color: contrastText,
+    backgroundColor: main,
+    boxShadow: shadows,
+    '&:hover': {
+      boxShadow: 'none',
+      backgroundColor: dark
+    },
+    '&:focus-visible': {
+      outline: `2px solid ${dark}`,
+      outlineOffset: 2
+    },
+    '&::after': {
+      borderRadius: '50px',
+      boxShadow: `0 0 5px 5px ${alpha(main, 0.9)}`
+    },
+    '&:active::after': {
+      borderRadius: '50px',
+      boxShadow: `0 0 0 0 ${alpha(main, 0.9)}`
+    }
+  };
+}
+
+// ==============================|| OVERRIDES - FAB BUTTON ||============================== //
+
+export default function Button(theme) {
+  return {
+    MuiFab: {
+      styleOverrides: {
+        root: {
+          fontWeight: 400,
+          '&.Mui-disabled': {
+            backgroundColor: theme.palette.grey[200]
+          },
+          '&.MuiFab-primary': getColorStyle({ color: 'primary', theme }),
+          '&.MuiFab-secondary': getColorStyle({ color: 'secondary', theme }),
+          '&.Mui-error': getColorStyle({ color: 'error', theme }),
+          '&.MuiFab-success': getColorStyle({ color: 'success', theme }),
+          '&.MuiFab-info': getColorStyle({ color: 'info', theme }),
+          '&.MuiFab-warning': getColorStyle({ color: 'warning', theme }),
+          '&::after': {
+            content: '""',
+            display: 'block',
+            position: 'absolute',
+            left: 0,
+            top: 0,
+            width: '100%',
+            height: '100%',
+            borderRadius: 4,
+            opacity: 0,
+            transition: 'all 0.5s'
+          },
+
+          '&:active::after': {
+            position: 'absolute',
+            borderRadius: 4,
+            left: 0,
+            top: 0,
+            opacity: 1,
+            transition: '0s'
+          }
+        }
+      }
+    }
+  };
+}

src/themes/overrides/IconButton.js

@@ -0,0 +1,28 @@
+// ==============================|| OVERRIDES - ICON BUTTON ||============================== //
+
+export default function IconButton(theme) {
+  return {
+    MuiIconButton: {
+      styleOverrides: {
+        root: {
+          borderRadius: 4
+        },
+        sizeLarge: {
+          width: theme.spacing(5.5),
+          height: theme.spacing(5.5),
+          fontSize: '1.25rem'
+        },
+        sizeMedium: {
+          width: theme.spacing(4.5),
+          height: theme.spacing(4.5),
+          fontSize: '1rem'
+        },
+        sizeSmall: {
+          width: theme.spacing(3.75),
+          height: theme.spacing(3.75),
+          fontSize: '0.75rem'
+        }
+      }
+    }
+  };
+}

src/themes/overrides/InputBase.js

@@ -0,0 +1,13 @@
+// ==============================|| OVERRIDES - INPUT BASE ||============================== //
+
+export default function InputBase() {
+  return {
+    MuiInputBase: {
+      styleOverrides: {
+        sizeSmall: {
+          fontSize: '0.75rem'
+        }
+      }
+    }
+  };
+}

src/themes/overrides/InputLabel.js

@@ -0,0 +1,25 @@
+// ==============================|| OVERRIDES - INPUT LABEL ||============================== //
+
+export default function InputLabel(theme) {
+  return {
+    MuiInputLabel: {
+      styleOverrides: {
+        root: {
+          color: theme.palette.grey[600]
+        },
+        outlined: {
+          lineHeight: '0.8em',
+          '&.MuiInputLabel-sizeSmall': {
+            lineHeight: '1em'
+          },
+          '&.MuiInputLabel-shrink': {
+            background: theme.palette.background.paper,
+            padding: '0 8px',
+            marginLeft: -6,
+            lineHeight: '1.4375em'
+          }
+        }
+      }
+    }
+  };
+}

src/themes/overrides/LinearProgress.js

@@ -0,0 +1,17 @@
+// ==============================|| OVERRIDES - LINER PROGRESS ||============================== //
+
+export default function LinearProgress() {
+  return {
+    MuiLinearProgress: {
+      styleOverrides: {
+        root: {
+          height: 6,
+          borderRadius: 100
+        },
+        bar: {
+          borderRadius: 100
+        }
+      }
+    }
+  };
+}

src/themes/overrides/Link.js

@@ -0,0 +1,11 @@
+// ==============================|| OVERRIDES - LINK ||============================== //
+
+export default function Link() {
+  return {
+    MuiLink: {
+      defaultProps: {
+        underline: 'hover'
+      }
+    }
+  };
+}

src/themes/overrides/ListItemButton.js

@@ -0,0 +1,18 @@
+// ==============================|| OVERRIDES - LIST ITEM ICON ||============================== //
+
+export default function ListItemButton(theme) {
+  return {
+    MuiListItemButton: {
+      styleOverrides: {
+        root: {
+          '&.Mui-selected': {
+            color: theme.palette.primary.main,
+            '& .MuiListItemIcon-root': {
+              color: theme.palette.primary.main
+            }
+          }
+        }
+      }
+    }
+  };
+}

src/themes/overrides/ListItemIcon.js

@@ -0,0 +1,14 @@
+// ==============================|| OVERRIDES - LIST ITEM ICON ||============================== //
+
+export default function ListItemIcon(theme) {
+  return {
+    MuiListItemIcon: {
+      styleOverrides: {
+        root: {
+          minWidth: 24,
+          color: theme.palette.text.primary
+        }
+      }
+    }
+  };
+}

src/themes/overrides/LoadingButton.js

@@ -0,0 +1,17 @@
+// ==============================|| OVERRIDES - LOADING BUTTON ||============================== //
+
+export default function LoadingButton() {
+  return {
+    MuiLoadingButton: {
+      styleOverrides: {
+        root: {
+          padding: '6px 16px',
+          '&.MuiLoadingButton-loading': {
+            opacity: 0.6,
+            textShadow: 'none'
+          }
+        }
+      }
+    }
+  };
+}

src/themes/overrides/OutlinedInput.js

@@ -0,0 +1,59 @@
+// project import
+import { ThemeMode } from 'config';
+import getColors from 'utils/getColors';
+import getShadow from 'utils/getShadow';
+
+// ==============================|| OVERRIDES - INPUT BORDER & SHADOWS ||============================== //
+
+function getColor({ variant, theme }) {
+  const colors = getColors(theme, variant);
+  const { light } = colors;
+
+  const shadows = getShadow(theme, `${variant}`);
+
+  return {
+    '&:hover .MuiOutlinedInput-notchedOutline': {
+      borderColor: light
+    },
+    '&.Mui-focused': {
+      boxShadow: shadows,
+      '& .MuiOutlinedInput-notchedOutline': {
+        border: `1px solid ${light}`
+      }
+    }
+  };
+}
+
+// ==============================|| OVERRIDES - OUTLINED INPUT ||============================== //
+
+export default function OutlinedInput(theme) {
+  return {
+    MuiOutlinedInput: {
+      styleOverrides: {
+        input: {
+          padding: '10.5px 14px 10.5px 12px'
+        },
+        notchedOutline: {
+          borderColor: theme.palette.mode === ThemeMode.DARK ? theme.palette.grey[200] : theme.palette.grey[300]
+        },
+        root: {
+          ...getColor({ variant: 'primary', theme }),
+          '&.Mui-error': {
+            ...getColor({ variant: 'error', theme })
+          }
+        },
+        inputSizeSmall: {
+          padding: '7.5px 8px 7.5px 12px'
+        },
+        inputMultiline: {
+          padding: 0
+        },
+        colorSecondary: getColor({ variant: 'secondary', theme }),
+        colorError: getColor({ variant: 'error', theme }),
+        colorWarning: getColor({ variant: 'warning', theme }),
+        colorInfo: getColor({ variant: 'info', theme }),
+        colorSuccess: getColor({ variant: 'success', theme })
+      }
+    }
+  };
+}

src/themes/overrides/Pagination.js

@@ -0,0 +1,11 @@
+// ==============================|| OVERRIDES - PAGINATION ||============================== //
+
+export default function Pagination() {
+  return {
+    MuiPagination: {
+      defaultProps: {
+        shape: 'rounded'
+      }
+    }
+  };
+}

src/themes/overrides/PaginationItem.js

@@ -0,0 +1,118 @@
+// project import
+import getColors from 'utils/getColors';
+
+// ==============================|| PAGINATION ITEM - COLORS ||============================== //
+
+function getColorStyle({ variant, color, theme }) {
+  const colors = getColors(theme, color);
+  const { lighter, light, dark, main, contrastText } = colors;
+
+  const focusStyle = {
+    '&:focus-visible': {
+      outline: `2px solid ${dark}`,
+      outlineOffset: 2,
+      ...(variant === 'text' && {
+        backgroundColor: theme.palette.background.paper
+      })
+    }
+  };
+
+  switch (variant) {
+    case 'combined':
+    case 'contained':
+      return {
+        color: contrastText,
+        backgroundColor: main,
+        '&:hover': {
+          backgroundColor: light
+        },
+        ...focusStyle
+      };
+    case 'outlined':
+      return {
+        borderColor: main,
+        '&:hover': {
+          backgroundColor: lighter,
+          borderColor: light
+        },
+        ...focusStyle
+      };
+    case 'text':
+    default:
+      return {
+        color: main,
+        '&:hover': {
+          backgroundColor: main,
+          color: lighter
+        },
+        ...focusStyle
+      };
+  }
+}
+
+// ==============================|| OVERRIDES - PAGINATION ITEM ||============================== //
+
+export default function PaginationItem(theme) {
+  return {
+    MuiPaginationItem: {
+      styleOverrides: {
+        root: {
+          '&:focus-visible': {
+            outline: `2px solid ${theme.palette.secondary.dark}`,
+            outlineOffset: 2
+          }
+        },
+        text: {
+          '&.Mui-selected': {
+            backgroundColor: 'transparent',
+            fontSize: '1rem',
+            fontWeight: 500,
+            '&.MuiPaginationItem-textPrimary': getColorStyle({ variant: 'text', color: 'primary', theme }),
+            '&.MuiPaginationItem-textSecondary': getColorStyle({ variant: 'text', color: 'secondary', theme }),
+            '&.MuiPaginationItem-textError': getColorStyle({ variant: 'text', color: 'error', theme }),
+            '&.MuiPaginationItem-textSuccess': getColorStyle({ variant: 'text', color: 'success', theme }),
+            '&.MuiPaginationItem-textInfo': getColorStyle({ variant: 'text', color: 'info', theme }),
+            '&.MuiPaginationItem-textWarning': getColorStyle({ variant: 'text', color: 'warning', theme })
+          }
+        },
+        contained: {
+          '&.Mui-selected': {
+            '&.MuiPaginationItem-containedPrimary': getColorStyle({ variant: 'contained', color: 'primary', theme }),
+            '&.MuiPaginationItem-containedSecondary': getColorStyle({ variant: 'contained', color: 'secondary', theme }),
+            '&.MuiPaginationItem-containedError': getColorStyle({ variant: 'contained', color: 'error', theme }),
+            '&.MuiPaginationItem-containedSuccess': getColorStyle({ variant: 'contained', color: 'success', theme }),
+            '&.MuiPaginationItem-containedInfo': getColorStyle({ variant: 'contained', color: 'info', theme }),
+            '&.MuiPaginationItem-containedWarning': getColorStyle({ variant: 'contained', color: 'warning', theme })
+          }
+        },
+        combined: {
+          border: '1px solid',
+          borderColor: theme.palette.divider,
+          '&.MuiPaginationItem-ellipsis': {
+            border: 'none'
+          },
+          '&.Mui-selected': {
+            '&.MuiPaginationItem-combinedPrimary': getColorStyle({ variant: 'combined', color: 'primary', theme }),
+            '&.MuiPaginationItem-combinedSecondary': getColorStyle({ variant: 'combined', color: 'secondary', theme }),
+            '&.MuiPaginationItem-combinedError': getColorStyle({ variant: 'combined', color: 'error', theme }),
+            '&.MuiPaginationItem-combinedSuccess': getColorStyle({ variant: 'combined', color: 'success', theme }),
+            '&.MuiPaginationItem-combinedInfo': getColorStyle({ variant: 'combined', color: 'info', theme }),
+            '&.MuiPaginationItem-combinedWarning': getColorStyle({ variant: 'combined', color: 'warning', theme })
+          }
+        },
+        outlined: {
+          borderColor: theme.palette.divider,
+          '&.Mui-selected': {
+            backgroundColor: 'transparent',
+            '&.MuiPaginationItem-outlinedPrimary': getColorStyle({ variant: 'outlined', color: 'primary', theme }),
+            '&.MuiPaginationItem-outlinedSecondary': getColorStyle({ variant: 'outlined', color: 'secondary', theme }),
+            '&.MuiPaginationItem-outlinedError': getColorStyle({ variant: 'outlined', color: 'error', theme }),
+            '&.MuiPaginationItem-outlinedSuccess': getColorStyle({ variant: 'outlined', color: 'success', theme }),
+            '&.MuiPaginationItem-outlinedInfo': getColorStyle({ variant: 'outlined', color: 'info', theme }),
+            '&.MuiPaginationItem-outlinedWarning': getColorStyle({ variant: 'outlined', color: 'warning', theme })
+          }
+        }
+      }
+    }
+  };
+}

src/themes/overrides/Popover.js

@@ -0,0 +1,13 @@
+// ==============================|| OVERRIDES - DIALOG CONTENT TEXT ||============================== //
+
+export default function Popover(theme) {
+  return {
+    MuiPopover: {
+      styleOverrides: {
+        paper: {
+          boxShadow: theme.customShadows.z1
+        }
+      }
+    }
+  };
+}

src/themes/overrides/Radio.js

@@ -0,0 +1,119 @@
+// material-ui
+import { Box } from '@mui/material';
+
+// project import
+import getColors from 'utils/getColors';
+
+// ==============================|| RADIO - COLORS ||============================== //
+
+function getColorStyle({ color, theme }) {
+  const colors = getColors(theme, color);
+  const { lighter, main, dark } = colors;
+
+  return {
+    '& .dot': {
+      backgroundColor: main
+    },
+    '&:hover': {
+      backgroundColor: lighter
+    },
+    '&.Mui-focusVisible': {
+      outline: `2px solid ${dark}`,
+      outlineOffset: -4
+    }
+  };
+}
+
+// ==============================|| CHECKBOX - SIZE STYLE ||============================== //
+
+function getSizeStyle(size) {
+  switch (size) {
+    case 'small':
+      return { size: 16, dotSize: 8, position: 3 };
+    case 'large':
+      return { size: 24, dotSize: 12, position: 5 };
+    case 'medium':
+    default:
+      return { size: 20, dotSize: 10, position: 4 };
+  }
+}
+
+// ==============================|| CHECKBOX - STYLE ||============================== //
+
+function radioStyle(size) {
+  const sizes = getSizeStyle(size);
+
+  return {
+    '& .icon': {
+      width: sizes.size,
+      height: sizes.size,
+      '& .dot': {
+        width: sizes.dotSize,
+        height: sizes.dotSize,
+        top: sizes.position,
+        left: sizes.position
+      }
+    }
+  };
+}
+
+// ==============================|| OVERRIDES - CHECKBOX ||============================== //
+
+export default function Radio(theme) {
+  const { palette } = theme;
+
+  return {
+    MuiRadio: {
+      defaultProps: {
+        className: 'size-small',
+        icon: <Box className="icon" sx={{ width: 16, height: 16, border: '1px solid', borderColor: 'inherit', borderRadius: '50%' }} />,
+        checkedIcon: (
+          <Box
+            className="icon"
+            sx={{
+              width: 16,
+              height: 16,
+              border: '1px solid',
+              borderColor: 'inherit',
+              borderRadius: '50%',
+              position: 'relative'
+            }}
+          >
+            <Box
+              className="dot"
+              sx={{
+                width: 8,
+                height: 8,
+                backgroundColor: 'inherit',
+                borderRadius: '50%',
+                position: 'absolute',
+                top: 3,
+                left: 3
+              }}
+            />
+          </Box>
+        )
+      },
+      styleOverrides: {
+        root: {
+          color: palette.secondary[300],
+          '&.size-small': {
+            ...radioStyle('small')
+          },
+          '&.size-medium': {
+            ...radioStyle('medium')
+          },
+          '&.size-large': {
+            ...radioStyle('large')
+          }
+        },
+        colorPrimary: getColorStyle({ color: 'primary', theme }),
+        colorSecondary: getColorStyle({ color: 'secondary', theme }),
+        colorSuccess: getColorStyle({ color: 'success', theme }),
+        colorWarning: getColorStyle({ color: 'warning', theme }),
+        colorInfo: getColorStyle({ color: 'info', theme }),
+        colorError: getColorStyle({ color: 'error', theme })
+      }
+    }
+  };
+}

src/themes/overrides/Slider.js

@@ -0,0 +1,69 @@
+// project import
+import getColors from 'utils/getColors';
+
+// ==============================|| OVERRIDES - SLIDER ||============================== //
+
+function getColorStyle({ color, theme }) {
+  const colors = getColors(theme, color);
+  const { main } = colors;
+
+  return {
+    border: `2px solid ${main}`
+  };
+}
+
+export default function Slider(theme) {
+  return {
+    MuiSlider: {
+      styleOverrides: {
+        track: {
+          height: '1px'
+        },
+        thumb: {
+          width: 14,
+          height: 14,
+          border: `2px solid ${theme.palette.primary.main}`,
+          backgroundColor: theme.palette.background.paper,
+          '&.MuiSlider-thumbColorPrimary': getColorStyle({ color: 'primary', theme }),
+          '&.MuiSlider-thumbColorSecondary': getColorStyle({ color: 'secondary', theme }),
+          '&.MuiSlider-thumbColorSuccess': getColorStyle({ color: 'success', theme }),
+          '&.MuiSlider-thumbColorWarning': getColorStyle({ color: 'warning', theme }),
+          '&.MuiSlider-thumbColorInfo': getColorStyle({ color: 'info', theme }),
+          '&.MuiSlider-thumbColorError': getColorStyle({ color: 'error', theme })
+        },
+        mark: {
+          width: 4,
+          height: 4,
+          borderRadius: '50%',
+          border: `1px solid ${theme.palette.secondary.light}`,
+          backgroundColor: theme.palette.background.paper,
+          '&.MuiSlider-markActive': {
+            opacity: 1,
+            borderColor: 'inherit',
+            borderWidth: 2
+          }
+        },
+        rail: {
+          color: theme.palette.secondary.light
+        },
+        root: {
+          '&.Mui-disabled': {
+            '.MuiSlider-rail': {
+              opacity: 0.25
+            },
+            '.MuiSlider-track': {
+              color: theme.palette.secondary.lighter
+            },
+            '.MuiSlider-thumb': {
+              border: `2px solid ${theme.palette.secondary.lighter}`
+            }
+          }
+        },
+        valueLabel: {
+          backgroundColor: theme.palette.grey[600],
+          color: theme.palette.grey[0]
+        }
+      }
+    }
+  };
+}

src/themes/overrides/Switch.js

@@ -0,0 +1,88 @@
+// ==============================|| SWITCH - SIZE STYLE ||============================== //
+
+function getSizeStyle(size) {
+  switch (size) {
+    case 'small':
+      return { width: 28, height: 16, base: 12, thumb: 10, trackRadius: 8 };
+    case 'large':
+      return { width: 60, height: 28, base: 32, thumb: 22, trackRadius: 24 };
+    case 'medium':
+    default:
+      return { width: 44, height: 22, base: 22, thumb: 16, trackRadius: 16 };
+  }
+}
+
+function switchStyle(theme, size) {
+  const sizes = getSizeStyle(size);
+
+  return {
+    width: sizes.width,
+    height: sizes.height,
+    '& .MuiSwitch-switchBase': {
+      padding: 3,
+      '&.Mui-checked': {
+        transform: `translateX(${sizes.base}px)`
+      }
+    },
+    '& .MuiSwitch-thumb': {
+      width: sizes.thumb,
+      height: sizes.thumb
+    },
+    '& .MuiSwitch-track': {
+      borderRadius: sizes.trackRadius
+    }
+  };
+}
+
+// ==============================|| OVERRIDES - TAB ||============================== //
+
+export default function Switch(theme) {
+  return {
+    MuiSwitch: {
+      styleOverrides: {
+        track: {
+          opacity: 1,
+          backgroundColor: theme.palette.secondary[400],
+          boxSizing: 'border-box'
+        },
+        thumb: {
+          borderRadius: '50%',
+          transition: theme.transitions.create(['width'], {
+            duration: 200
+          })
+        },
+        switchBase: {
+          '&.Mui-checked': {
+            color: '#fff',
+            '& + .MuiSwitch-track': {
+              opacity: 1
+            },
+            '&.Mui-disabled': {
+              color: theme.palette.background.paper
+            }
+          },
+          '&.Mui-disabled': {
+            color: theme.palette.background.paper,
+            '+.MuiSwitch-track': {
+              opacity: 0.3
+            }
+          }
+        },
+        root: {
+          color: theme.palette.text.primary,
+          padding: 0,
+          margin: 8,
+          display: 'flex',
+          '& ~ .MuiFormControlLabel-label': {
+            margin: 6
+          },
+          ...switchStyle(theme, 'medium')
+        },
+        sizeLarge: { ...switchStyle(theme, 'large') },
+        sizeSmall: {
+          ...switchStyle(theme, 'small')
+        }
+      }
+    }
+  };
+}

src/themes/overrides/Tab.js

@@ -0,0 +1,24 @@
+// ==============================|| OVERRIDES - TAB ||============================== //
+
+export default function Tab(theme) {
+  return {
+    MuiTab: {
+      styleOverrides: {
+        root: {
+          minHeight: 46,
+          color: theme.palette.text.primary,
+          borderRadius: 4,
+          '&:hover': {
+            backgroundColor: theme.palette.primary.lighter + 60,
+            color: theme.palette.primary.main
+          },
+          '&:focus-visible': {
+            borderRadius: 4,
+            outline: `2px solid ${theme.palette.secondary.dark}`,
+            outlineOffset: -3
+          }
+        }
+      }
+    }
+  };
+}

src/themes/overrides/TableBody.js

@@ -0,0 +1,27 @@
+// ==============================|| OVERRIDES - TABLE ROW ||============================== //
+
+export default function TableBody(theme) {
+  const hoverStyle = {
+    '&:hover': {
+      backgroundColor: theme.palette.secondary.lighter
+    }
+  };
+
+  return {
+    MuiTableBody: {
+      styleOverrides: {
+        root: {
+          '&.striped .MuiTableRow-root': {
+            '&:nth-of-type(even)': {
+              backgroundColor: theme.palette.grey[50]
+            },
+            ...hoverStyle
+          },
+          '& .MuiTableRow-root': {
+            ...hoverStyle
+          }
+        }
+      }
+    }
+  };
+}

src/themes/overrides/TableCell.js

@@ -0,0 +1,44 @@
+// ==============================|| OVERRIDES - TABLE CELL ||============================== //
+
+export default function TableCell(theme) {
+  const commonCell = {
+    '&:not(:last-of-type)': {
+      position: 'relative',
+      '&:after': {
+        position: 'absolute',
+        content: '""',
+        backgroundColor: theme.palette.divider,
+        width: 1,
+        height: 'calc(100% - 30px)',
+        right: 0,
+        top: 16
+      }
+    }
+  };
+
+  return {
+    MuiTableCell: {
+      styleOverrides: {
+        root: {
+          fontSize: '0.875rem',
+          padding: 12,
+          borderColor: theme.palette.divider
+        },
+        sizeSmall: {
+          padding: 8
+        },
+        head: {
+          fontSize: '0.75rem',
+          fontWeight: 700,
+          textTransform: 'uppercase',
+          ...commonCell
+        },
+        footer: {
+          fontSize: '0.75rem',
+          textTransform: 'uppercase',
+          ...commonCell
+        }
+      }
+    }
+  };
+}

src/themes/overrides/TableFooter.js

@@ -0,0 +1,15 @@
+// ==============================|| OVERRIDES - TABLE CELL ||============================== //
+
+export default function TableFooter(theme) {
+  return {
+    MuiTableFooter: {
+      styleOverrides: {
+        root: {
+          backgroundColor: theme.palette.grey[50],
+          borderTop: `2px solid ${theme.palette.divider}`,
+          borderBottom: `1px solid ${theme.palette.divider}`
+        }
+      }
+    }
+  };
+}

src/themes/overrides/TableHead.js

@@ -0,0 +1,15 @@
+// ==============================|| OVERRIDES - TABLE CELL ||============================== //
+
+export default function TableHead(theme) {
+  return {
+    MuiTableHead: {
+      styleOverrides: {
+        root: {
+          backgroundColor: theme.palette.grey[50],
+          borderTop: `1px solid ${theme.palette.divider}`,
+          borderBottom: `2px solid ${theme.palette.divider}`
+        }
+      }
+    }
+  };
+}

src/themes/overrides/TablePagination.js

@@ -0,0 +1,16 @@
+// ==============================|| OVERRIDES - TABLE PAGINATION ||============================== //
+
+export default function TablePagination() {
+  return {
+    MuiTablePagination: {
+      styleOverrides: {
+        selectLabel: {
+          fontSize: '0.875rem'
+        },
+        displayedRows: {
+          fontSize: '0.875rem'
+        }
+      }
+    }
+  };
+}

src/themes/overrides/TableRow.js

@@ -0,0 +1,25 @@
+// ==============================|| OVERRIDES - TABLE ROW ||============================== //
+
+export default function TableRow() {
+  return {
+    MuiTableRow: {
+      styleOverrides: {
+        root: {
+          '&:last-of-type': {
+            '& .MuiTableCell-root': {
+              borderBottom: 'none'
+            }
+          },
+          '& .MuiTableCell-root': {
+            '&:last-of-type': {
+              paddingRight: 24
+            },
+            '&:first-of-type': {
+              paddingLeft: 24
+            }
+          }
+        }
+      }
+    }
+  };
+}

src/themes/overrides/Tabs.js

@@ -0,0 +1,13 @@
+// ==============================|| OVERRIDES - TABS ||============================== //
+
+export default function Tabs() {
+  return {
+    MuiTabs: {
+      styleOverrides: {
+        vertical: {
+          overflow: 'visible'
+        }
+      }
+    }
+  };
+}

src/themes/overrides/ToggleButton.js

@@ -0,0 +1,20 @@
+// ==============================|| OVERRIDES - TOGGLE BUTTON ||============================== //
+
+export default function ToggleButton(theme) {
+  return {
+    MuiToggleButton: {
+      styleOverrides: {
+        root: {
+          '&.Mui-disabled': {
+            borderColor: theme.palette.divider,
+            color: theme.palette.text.disabled
+          },
+          '&:focus-visible': {
+            outline: `2px solid ${theme.palette.secondary.dark}`,
+            outlineOffset: 2
+          }
+        }
+      }
+    }
+  };
+}

src/themes/overrides/Tooltip.js

@@ -0,0 +1,13 @@
+// ==============================|| OVERRIDES - TOOLTIP ||============================== //
+
+export default function Tooltip(theme) {
+  return {
+    MuiTooltip: {
+      styleOverrides: {
+        tooltip: {
+          color: theme.palette.background.paper
+        }
+      }
+    }
+  };
+}

src/themes/overrides/TreeItem.js

@@ -0,0 +1,18 @@
+// ==============================|| OVERRIDES - TREE ITEM ||============================== //
+
+export default function TreeItem() {
+  return {
+    MuiTreeItem: {
+      styleOverrides: {
+        content: {
+          padding: 8
+        },
+        iconContainer: {
+          '& svg': {
+            fontSize: '0.625rem'
+          }
+        }
+      }
+    }
+  };
+}

src/themes/overrides/Typography.js

@@ -0,0 +1,13 @@
+// ==============================|| OVERRIDES - TYPOGRAPHY ||============================== //
+
+export default function Typography() {
+  return {
+    MuiTypography: {
+      styleOverrides: {
+        gutterBottom: {
+          marginBottom: 12
+        }
+      }
+    }
+  };
+}

src/themes/overrides/index.js

@@ -0,0 +1,99 @@
+// third-party
+import { merge } from 'lodash';
+
+// project import
+import Accordion from './Accordion';
+import AccordionDetails from './AccordionDetails';
+import AccordionSummary from './AccordionSummary';
+import Alert from './Alert';
+import AlertTitle from './AlertTitle';
+import Autocomplete from './Autocomplete';
+import Badge from './Badge';
+import Button from './Button';
+import ButtonBase from './ButtonBase';
+import ButtonGroup from './ButtonGroup';
+import CardContent from './CardContent';
+import Checkbox from './Checkbox';
+import Chip from './Chip';
+import Dialog from './Dialog';
+import DialogContentText from './DialogContentText';
+import DialogTitle from './DialogTitle';
+import Fab from './Fab';
+import IconButton from './IconButton';
+import InputBase from './InputBase';
+import InputLabel from './InputLabel';
+import LinearProgress from './LinearProgress';
+import Link from './Link';
+import ListItemButton from './ListItemButton';
+import ListItemIcon from './ListItemIcon';
+import LoadingButton from './LoadingButton';
+import OutlinedInput from './OutlinedInput';
+import Pagination from './Pagination';
+import PaginationItem from './PaginationItem';
+import Popover from './Popover';
+import Radio from './Radio';
+import Slider from './Slider';
+import Switch from './Switch';
+import Tab from './Tab';
+import TableBody from './TableBody';
+import TableCell from './TableCell';
+import TableFooter from './TableFooter';
+import TableHead from './TableHead';
+import TablePagination from './TablePagination';
+import TableRow from './TableRow';
+import Tabs from './Tabs';
+import ToggleButton from './ToggleButton';
+import Tooltip from './Tooltip';
+import TreeItem from './TreeItem';
+import Typography from './Typography';
+
+// ==============================|| OVERRIDES - MAIN ||============================== //
+
+export default function ComponentsOverrides(theme) {
+  return merge(
+    Accordion(theme),
+    AccordionDetails(theme),
+    AccordionSummary(theme),
+    Alert(theme),
+    AlertTitle(),
+    Autocomplete(),
+    Badge(theme),
+    Button(theme),
+    ButtonBase(),
+    ButtonGroup(),
+    CardContent(),
+    Checkbox(theme),
+    Chip(theme),
+    Dialog(),
+    DialogContentText(theme),
+    DialogTitle(),
+    Fab(theme),
+    IconButton(theme),
+    InputBase(),
+    InputLabel(theme),
+    LinearProgress(),
+    Link(),
+    ListItemButton(theme),
+    ListItemIcon(theme),
+    LoadingButton(),
+    OutlinedInput(theme),
+    Pagination(),
+    PaginationItem(theme),
+    Popover(theme),
+    Radio(theme),
+    Slider(theme),
+    Switch(theme),
+    Tab(theme),
+    TableBody(theme),
+    TableCell(theme),
+    TableFooter(theme),
+    TableHead(theme),
+    TablePagination(),
+    TableRow(),
+    Tabs(),
+    ToggleButton(theme),
+    Tooltip(theme),
+    TreeItem(),
+    Typography()
+  );
+}