Dashboard 중간저장
parent
ebe40f2f3e
commit
2bbd80d40b
|
|
@ -0,0 +1,64 @@
|
|||
import PropTypes from 'prop-types';
|
||||
import { useMemo } from 'react';
|
||||
|
||||
// material-ui
|
||||
import { CssBaseline, StyledEngineProvider } from '@mui/material';
|
||||
import { createTheme, ThemeProvider } from '@mui/material/styles';
|
||||
|
||||
// project import
|
||||
import Palette from './palette';
|
||||
import Typography from './typography';
|
||||
import CustomShadows from './shadows';
|
||||
import componentsOverride from './overrides';
|
||||
|
||||
// ==============================|| DEFAULT THEME - MAIN ||============================== //
|
||||
|
||||
export default function ThemeCustomization({ children }) {
|
||||
const theme = Palette('light', 'default');
|
||||
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
const themeTypography = Typography(`'Public Sans', sans-serif`);
|
||||
const themeCustomShadows = useMemo(() => CustomShadows(theme), [theme]);
|
||||
|
||||
const themeOptions = useMemo(
|
||||
() => ({
|
||||
breakpoints: {
|
||||
values: {
|
||||
xs: 0,
|
||||
sm: 768,
|
||||
md: 1024,
|
||||
lg: 1266,
|
||||
xl: 1536
|
||||
}
|
||||
},
|
||||
direction: 'ltr',
|
||||
mixins: {
|
||||
toolbar: {
|
||||
minHeight: 60,
|
||||
paddingTop: 8,
|
||||
paddingBottom: 8
|
||||
}
|
||||
},
|
||||
palette: theme.palette,
|
||||
customShadows: themeCustomShadows,
|
||||
typography: themeTypography
|
||||
}),
|
||||
[theme, themeTypography, themeCustomShadows]
|
||||
);
|
||||
|
||||
const themes = createTheme(themeOptions);
|
||||
themes.components = componentsOverride(themes);
|
||||
|
||||
return (
|
||||
<StyledEngineProvider injectFirst>
|
||||
<ThemeProvider theme={themes}>
|
||||
<CssBaseline />
|
||||
{children}
|
||||
</ThemeProvider>
|
||||
</StyledEngineProvider>
|
||||
);
|
||||
}
|
||||
|
||||
ThemeCustomization.propTypes = {
|
||||
children: PropTypes.node
|
||||
};
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
// ==============================|| OVERRIDES - BADGE ||============================== //
|
||||
|
||||
export default function Badge(theme) {
|
||||
return {
|
||||
MuiBadge: {
|
||||
styleOverrides: {
|
||||
standard: {
|
||||
minWidth: theme.spacing(2),
|
||||
height: theme.spacing(2),
|
||||
padding: theme.spacing(0.5)
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
// ==============================|| OVERRIDES - BUTTON ||============================== //
|
||||
|
||||
export default function Button(theme) {
|
||||
const disabledStyle = {
|
||||
'&.Mui-disabled': {
|
||||
backgroundColor: theme.palette.grey[200]
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
MuiButton: {
|
||||
defaultProps: {
|
||||
disableElevation: true
|
||||
},
|
||||
styleOverrides: {
|
||||
root: {
|
||||
fontWeight: 400
|
||||
},
|
||||
contained: {
|
||||
...disabledStyle
|
||||
},
|
||||
outlined: {
|
||||
...disabledStyle
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
// ==============================|| OVERRIDES - CARD CONTENT ||============================== //
|
||||
|
||||
export default function CardContent() {
|
||||
return {
|
||||
MuiCardContent: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
padding: 20,
|
||||
'&:last-child': {
|
||||
paddingBottom: 20
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
// ==============================|| OVERRIDES - CHECKBOX ||============================== //
|
||||
|
||||
export default function Checkbox(theme) {
|
||||
return {
|
||||
MuiCheckbox: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
color: theme.palette.secondary[300]
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
// ==============================|| OVERRIDES - CHIP ||============================== //
|
||||
|
||||
export default function Chip(theme) {
|
||||
return {
|
||||
MuiChip: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
borderRadius: 4,
|
||||
'&:active': {
|
||||
boxShadow: 'none'
|
||||
}
|
||||
},
|
||||
sizeLarge: {
|
||||
fontSize: '1rem',
|
||||
height: 40
|
||||
},
|
||||
light: {
|
||||
color: theme.palette.primary.main,
|
||||
backgroundColor: theme.palette.primary.lighter,
|
||||
borderColor: theme.palette.primary.light,
|
||||
'&.MuiChip-lightError': {
|
||||
color: theme.palette.error.main,
|
||||
backgroundColor: theme.palette.error.lighter,
|
||||
borderColor: theme.palette.error.light
|
||||
},
|
||||
'&.MuiChip-lightSuccess': {
|
||||
color: theme.palette.success.main,
|
||||
backgroundColor: theme.palette.success.lighter,
|
||||
borderColor: theme.palette.success.light
|
||||
},
|
||||
'&.MuiChip-lightWarning': {
|
||||
color: theme.palette.warning.main,
|
||||
backgroundColor: theme.palette.warning.lighter,
|
||||
borderColor: theme.palette.warning.light
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
@ -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'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
@ -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'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
// ==============================|| OVERRIDES - LINER PROGRESS ||============================== //
|
||||
|
||||
export default function LinearProgress() {
|
||||
return {
|
||||
MuiLinearProgress: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
height: 6,
|
||||
borderRadius: 100
|
||||
},
|
||||
bar: {
|
||||
borderRadius: 100
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
// ==============================|| OVERRIDES - LINK ||============================== //
|
||||
|
||||
export default function Link() {
|
||||
return {
|
||||
MuiLink: {
|
||||
defaultProps: {
|
||||
underline: 'hover'
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
// ==============================|| OVERRIDES - LIST ITEM ICON ||============================== //
|
||||
|
||||
export default function ListItemIcon() {
|
||||
return {
|
||||
MuiListItemIcon: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
minWidth: 24
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
// material-ui
|
||||
import { alpha } from '@mui/material/styles';
|
||||
|
||||
// ==============================|| OVERRIDES - OUTLINED INPUT ||============================== //
|
||||
|
||||
export default function OutlinedInput(theme) {
|
||||
return {
|
||||
MuiOutlinedInput: {
|
||||
styleOverrides: {
|
||||
input: {
|
||||
padding: '10.5px 14px 10.5px 12px'
|
||||
},
|
||||
notchedOutline: {
|
||||
borderColor: theme.palette.grey[300]
|
||||
},
|
||||
root: {
|
||||
'&:hover .MuiOutlinedInput-notchedOutline': {
|
||||
borderColor: theme.palette.primary.light
|
||||
},
|
||||
'&.Mui-focused': {
|
||||
boxShadow: `0 0 0 2px ${alpha(theme.palette.primary.main, 0.2)}`,
|
||||
'& .MuiOutlinedInput-notchedOutline': {
|
||||
border: `1px solid ${theme.palette.primary.light}`
|
||||
}
|
||||
},
|
||||
'&.Mui-error': {
|
||||
'&:hover .MuiOutlinedInput-notchedOutline': {
|
||||
borderColor: theme.palette.error.light
|
||||
},
|
||||
'&.Mui-focused': {
|
||||
boxShadow: `0 0 0 2px ${alpha(theme.palette.error.main, 0.2)}`,
|
||||
'& .MuiOutlinedInput-notchedOutline': {
|
||||
border: `1px solid ${theme.palette.error.light}`
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
inputSizeSmall: {
|
||||
padding: '7.5px 8px 7.5px 12px'
|
||||
},
|
||||
inputMultiline: {
|
||||
padding: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
// ==============================|| OVERRIDES - TAB ||============================== //
|
||||
|
||||
export default function Tab(theme) {
|
||||
return {
|
||||
MuiTab: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
minHeight: 46,
|
||||
color: theme.palette.text.primary
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
// ==============================|| OVERRIDES - TABLE CELL ||============================== //
|
||||
|
||||
export default function TableCell(theme) {
|
||||
return {
|
||||
MuiTableCell: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
fontSize: '0.875rem',
|
||||
padding: 12,
|
||||
borderColor: theme.palette.divider
|
||||
},
|
||||
head: {
|
||||
fontWeight: 600,
|
||||
paddingTop: 20,
|
||||
paddingBottom: 20
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
// ==============================|| OVERRIDES - TABS ||============================== //
|
||||
|
||||
export default function Tabs() {
|
||||
return {
|
||||
MuiTabs: {
|
||||
styleOverrides: {
|
||||
vertical: {
|
||||
overflow: 'visible'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
// ==============================|| OVERRIDES - TYPOGRAPHY ||============================== //
|
||||
|
||||
export default function Typography() {
|
||||
return {
|
||||
MuiTypography: {
|
||||
styleOverrides: {
|
||||
gutterBottom: {
|
||||
marginBottom: 12
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
// third-party
|
||||
import { merge } from 'lodash';
|
||||
|
||||
// project import
|
||||
import Badge from './Badge';
|
||||
import Button from './Button';
|
||||
import CardContent from './CardContent';
|
||||
import Checkbox from './Checkbox';
|
||||
import Chip from './Chip';
|
||||
import IconButton from './IconButton';
|
||||
import InputLabel from './InputLabel';
|
||||
import LinearProgress from './LinearProgress';
|
||||
import Link from './Link';
|
||||
import ListItemIcon from './ListItemIcon';
|
||||
import OutlinedInput from './OutlinedInput';
|
||||
import Tab from './Tab';
|
||||
import TableCell from './TableCell';
|
||||
import Tabs from './Tabs';
|
||||
import Typography from './Typography';
|
||||
|
||||
// ==============================|| OVERRIDES - MAIN ||============================== //
|
||||
|
||||
export default function ComponentsOverrides(theme) {
|
||||
return merge(
|
||||
Button(theme),
|
||||
Badge(theme),
|
||||
CardContent(),
|
||||
Checkbox(theme),
|
||||
Chip(theme),
|
||||
IconButton(theme),
|
||||
InputLabel(theme),
|
||||
LinearProgress(),
|
||||
Link(),
|
||||
ListItemIcon(),
|
||||
OutlinedInput(theme),
|
||||
Tab(theme),
|
||||
TableCell(theme),
|
||||
Tabs(),
|
||||
Typography()
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
// material-ui
|
||||
import { createTheme } from '@mui/material/styles';
|
||||
|
||||
// third-party
|
||||
import { presetPalettes } from '@ant-design/colors';
|
||||
|
||||
// project import
|
||||
import ThemeOption from './theme';
|
||||
|
||||
// ==============================|| DEFAULT THEME - PALETTE ||============================== //
|
||||
|
||||
const Palette = (mode) => {
|
||||
const colors = presetPalettes;
|
||||
|
||||
const greyPrimary = [
|
||||
'#ffffff',
|
||||
'#fafafa',
|
||||
'#f5f5f5',
|
||||
'#f0f0f0',
|
||||
'#d9d9d9',
|
||||
'#bfbfbf',
|
||||
'#8c8c8c',
|
||||
'#595959',
|
||||
'#262626',
|
||||
'#141414',
|
||||
'#000000'
|
||||
];
|
||||
const greyAscent = ['#fafafa', '#bfbfbf', '#434343', '#1f1f1f'];
|
||||
const greyConstant = ['#fafafb', '#e6ebf1'];
|
||||
|
||||
colors.grey = [...greyPrimary, ...greyAscent, ...greyConstant];
|
||||
|
||||
const paletteColor = ThemeOption(colors);
|
||||
|
||||
return createTheme({
|
||||
palette: {
|
||||
mode,
|
||||
common: {
|
||||
black: '#000',
|
||||
white: '#fff'
|
||||
},
|
||||
...paletteColor,
|
||||
text: {
|
||||
primary: paletteColor.grey[700],
|
||||
secondary: paletteColor.grey[500],
|
||||
disabled: paletteColor.grey[400]
|
||||
},
|
||||
action: {
|
||||
disabled: paletteColor.grey[300]
|
||||
},
|
||||
divider: paletteColor.grey[200],
|
||||
background: {
|
||||
paper: paletteColor.grey[0],
|
||||
default: paletteColor.grey.A50
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
export default Palette;
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
// material-ui
|
||||
import { alpha } from '@mui/material/styles';
|
||||
|
||||
// ==============================|| DEFAULT THEME - CUSTOM SHADOWS ||============================== //
|
||||
|
||||
const CustomShadows = (theme) => ({
|
||||
button: `0 2px #0000000b`,
|
||||
text: `0 -1px 0 rgb(0 0 0 / 12%)`,
|
||||
z1: `0px 2px 8px ${alpha(theme.palette.grey[900], 0.15)}`
|
||||
// only available in paid version
|
||||
});
|
||||
|
||||
export default CustomShadows;
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
// ==============================|| PRESET THEME - THEME SELECTOR ||============================== //
|
||||
|
||||
const Theme = (colors) => {
|
||||
const { blue, red, gold, cyan, green, grey } = colors;
|
||||
const greyColors = {
|
||||
0: grey[0],
|
||||
50: grey[1],
|
||||
100: grey[2],
|
||||
200: grey[3],
|
||||
300: grey[4],
|
||||
400: grey[5],
|
||||
500: grey[6],
|
||||
600: grey[7],
|
||||
700: grey[8],
|
||||
800: grey[9],
|
||||
900: grey[10],
|
||||
A50: grey[15],
|
||||
A100: grey[11],
|
||||
A200: grey[12],
|
||||
A400: grey[13],
|
||||
A700: grey[14],
|
||||
A800: grey[16]
|
||||
};
|
||||
const contrastText = '#fff';
|
||||
|
||||
return {
|
||||
primary: {
|
||||
lighter: blue[0],
|
||||
100: blue[1],
|
||||
200: blue[2],
|
||||
light: blue[3],
|
||||
400: blue[4],
|
||||
main: blue[5],
|
||||
dark: blue[6],
|
||||
700: blue[7],
|
||||
darker: blue[8],
|
||||
900: blue[9],
|
||||
contrastText
|
||||
},
|
||||
secondary: {
|
||||
lighter: greyColors[100],
|
||||
100: greyColors[100],
|
||||
200: greyColors[200],
|
||||
light: greyColors[300],
|
||||
400: greyColors[400],
|
||||
main: greyColors[500],
|
||||
600: greyColors[600],
|
||||
dark: greyColors[700],
|
||||
800: greyColors[800],
|
||||
darker: greyColors[900],
|
||||
A100: greyColors[0],
|
||||
A200: greyColors.A400,
|
||||
A300: greyColors.A700,
|
||||
contrastText: greyColors[0]
|
||||
},
|
||||
error: {
|
||||
lighter: red[0],
|
||||
light: red[2],
|
||||
main: red[4],
|
||||
dark: red[7],
|
||||
darker: red[9],
|
||||
contrastText
|
||||
},
|
||||
warning: {
|
||||
lighter: gold[0],
|
||||
light: gold[3],
|
||||
main: gold[5],
|
||||
dark: gold[7],
|
||||
darker: gold[9],
|
||||
contrastText: greyColors[100]
|
||||
},
|
||||
info: {
|
||||
lighter: cyan[0],
|
||||
light: cyan[3],
|
||||
main: cyan[5],
|
||||
dark: cyan[7],
|
||||
darker: cyan[9],
|
||||
contrastText
|
||||
},
|
||||
success: {
|
||||
lighter: green[0],
|
||||
light: green[3],
|
||||
main: green[5],
|
||||
dark: green[7],
|
||||
darker: green[9],
|
||||
contrastText
|
||||
},
|
||||
grey: greyColors
|
||||
};
|
||||
};
|
||||
|
||||
export default Theme;
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
// ==============================|| DEFAULT THEME - TYPOGRAPHY ||============================== //
|
||||
|
||||
const Typography = (fontFamily) => ({
|
||||
htmlFontSize: 16,
|
||||
fontFamily,
|
||||
fontWeightLight: 300,
|
||||
fontWeightRegular: 400,
|
||||
fontWeightMedium: 500,
|
||||
fontWeightBold: 600,
|
||||
h1: {
|
||||
fontWeight: 600,
|
||||
fontSize: '2.375rem',
|
||||
lineHeight: 1.21
|
||||
},
|
||||
h2: {
|
||||
fontWeight: 600,
|
||||
fontSize: '1.875rem',
|
||||
lineHeight: 1.27
|
||||
},
|
||||
h3: {
|
||||
fontWeight: 600,
|
||||
fontSize: '1.5rem',
|
||||
lineHeight: 1.33
|
||||
},
|
||||
h4: {
|
||||
fontWeight: 600,
|
||||
fontSize: '1.25rem',
|
||||
lineHeight: 1.4
|
||||
},
|
||||
h5: {
|
||||
fontWeight: 600,
|
||||
fontSize: '1rem',
|
||||
lineHeight: 1.5
|
||||
},
|
||||
h6: {
|
||||
fontWeight: 400,
|
||||
fontSize: '0.875rem',
|
||||
lineHeight: 1.57
|
||||
},
|
||||
caption: {
|
||||
fontWeight: 400,
|
||||
fontSize: '0.75rem',
|
||||
lineHeight: 1.66
|
||||
},
|
||||
body1: {
|
||||
fontSize: '0.875rem',
|
||||
lineHeight: 1.57
|
||||
},
|
||||
body2: {
|
||||
fontSize: '0.75rem',
|
||||
lineHeight: 1.66
|
||||
},
|
||||
subtitle1: {
|
||||
fontSize: '0.875rem',
|
||||
fontWeight: 600,
|
||||
lineHeight: 1.57
|
||||
},
|
||||
subtitle2: {
|
||||
fontSize: '0.75rem',
|
||||
fontWeight: 500,
|
||||
lineHeight: 1.66
|
||||
},
|
||||
overline: {
|
||||
lineHeight: 1.66
|
||||
},
|
||||
button: {
|
||||
textTransform: 'capitalize'
|
||||
}
|
||||
});
|
||||
|
||||
export default Typography;
|
||||
Loading…
Reference in New Issue