157 lines
6.0 KiB
JavaScript
157 lines
6.0 KiB
JavaScript
import PropTypes from 'prop-types';
|
|
import { useMemo } from 'react';
|
|
|
|
// material-ui
|
|
import { CssBaseline, GlobalStyles, StyledEngineProvider } from '@mui/material';
|
|
import { createTheme, ThemeProvider } from '@mui/material/styles';
|
|
|
|
// project import
|
|
import useConfig from 'hooks/useConfig';
|
|
import Palette from './palette';
|
|
import Typography from './typography';
|
|
import CustomShadows from './shadows';
|
|
import componentsOverride from './overrides';
|
|
|
|
// Refined enterprise elevation ramp — soft, layered, low-contrast shadows
|
|
// (Stripe/Linear feel) instead of MUI's default hard grey drop-shadows.
|
|
// MUI requires exactly 25 entries (index 0 = 'none').
|
|
const softShadows = [
|
|
'none',
|
|
'0 1px 2px rgba(15, 23, 42, 0.04)',
|
|
'0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04)',
|
|
'0 2px 6px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04)',
|
|
'0 4px 10px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.05)',
|
|
'0 6px 14px rgba(15, 23, 42, 0.07), 0 2px 4px rgba(15, 23, 42, 0.05)',
|
|
'0 8px 18px rgba(15, 23, 42, 0.08), 0 2px 5px rgba(15, 23, 42, 0.05)',
|
|
'0 10px 22px rgba(15, 23, 42, 0.08), 0 3px 6px rgba(15, 23, 42, 0.05)',
|
|
'0 12px 26px rgba(15, 23, 42, 0.09), 0 4px 8px rgba(15, 23, 42, 0.06)',
|
|
'0 14px 30px rgba(15, 23, 42, 0.10), 0 4px 9px rgba(15, 23, 42, 0.06)',
|
|
'0 16px 34px rgba(15, 23, 42, 0.10), 0 5px 10px rgba(15, 23, 42, 0.06)',
|
|
'0 18px 38px rgba(15, 23, 42, 0.11), 0 6px 11px rgba(15, 23, 42, 0.07)',
|
|
'0 20px 42px rgba(15, 23, 42, 0.11), 0 6px 12px rgba(15, 23, 42, 0.07)',
|
|
'0 22px 46px rgba(15, 23, 42, 0.12), 0 7px 13px rgba(15, 23, 42, 0.07)',
|
|
'0 24px 50px rgba(15, 23, 42, 0.12), 0 8px 14px rgba(15, 23, 42, 0.08)',
|
|
'0 26px 54px rgba(15, 23, 42, 0.13), 0 8px 15px rgba(15, 23, 42, 0.08)',
|
|
'0 28px 58px rgba(15, 23, 42, 0.13), 0 9px 16px rgba(15, 23, 42, 0.08)',
|
|
'0 30px 62px rgba(15, 23, 42, 0.14), 0 10px 17px rgba(15, 23, 42, 0.09)',
|
|
'0 32px 66px rgba(15, 23, 42, 0.14), 0 10px 18px rgba(15, 23, 42, 0.09)',
|
|
'0 34px 70px rgba(15, 23, 42, 0.15), 0 11px 19px rgba(15, 23, 42, 0.09)',
|
|
'0 36px 74px rgba(15, 23, 42, 0.15), 0 12px 20px rgba(15, 23, 42, 0.10)',
|
|
'0 38px 78px rgba(15, 23, 42, 0.16), 0 12px 21px rgba(15, 23, 42, 0.10)',
|
|
'0 40px 82px rgba(15, 23, 42, 0.16), 0 13px 22px rgba(15, 23, 42, 0.10)',
|
|
'0 42px 86px rgba(15, 23, 42, 0.17), 0 14px 23px rgba(15, 23, 42, 0.11)',
|
|
'0 44px 90px rgba(15, 23, 42, 0.18), 0 14px 24px rgba(15, 23, 42, 0.11)'
|
|
];
|
|
|
|
// ==============================|| DEFAULT THEME - MAIN ||============================== //
|
|
|
|
export default function ThemeCustomization({ children }) {
|
|
const { themeDirection, mode, presetColor, fontFamily } = useConfig();
|
|
|
|
const theme = useMemo(() => Palette(mode, presetColor), [mode, presetColor]);
|
|
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
const themeTypography = useMemo(() => Typography(fontFamily), [fontFamily]);
|
|
const themeCustomShadows = useMemo(() => CustomShadows(theme), [theme]);
|
|
|
|
const themeOptions = useMemo(
|
|
() => ({
|
|
breakpoints: {
|
|
values: {
|
|
xs: 0, // Extra-small: 0px and up
|
|
custom300: 300, // above 350
|
|
custom350: 350, // above 350
|
|
custom400: 400, // above 400
|
|
custom450: 450, // above 450
|
|
custom500: 500, // above 450
|
|
custom550: 550, // above 450
|
|
custom600: 600, // above 450
|
|
custom650: 650, // above 450
|
|
custom700: 700, // above 450
|
|
custom750: 750, // above 450
|
|
sm: 768, // Small: 768px and up
|
|
custom800: 800, // above 450,
|
|
custom850: 850, // above 450,
|
|
custom900: 900, // above 450
|
|
custom950: 950, // above 450
|
|
custom1000: 1000, // above 450
|
|
md: 1024, // Medium: 1024px and up
|
|
lg: 1266, // Large: 1266px and up
|
|
custom1300: 1300, // Large: 1266px and up
|
|
custom1350: 1350, // Large: 1266px and up
|
|
xl: 1440 // Extra-large: 1440px and up
|
|
}
|
|
},
|
|
direction: themeDirection,
|
|
shape: {
|
|
borderRadius: 8
|
|
},
|
|
mixins: {
|
|
toolbar: {
|
|
minHeight: 60,
|
|
paddingTop: 8,
|
|
paddingBottom: 8
|
|
}
|
|
},
|
|
palette: theme.palette,
|
|
customShadows: themeCustomShadows,
|
|
typography: themeTypography,
|
|
shadows: softShadows
|
|
}),
|
|
[themeDirection, theme, themeTypography, themeCustomShadows]
|
|
);
|
|
|
|
const themes = createTheme(themeOptions);
|
|
themes.components = componentsOverride(themes);
|
|
|
|
return (
|
|
<StyledEngineProvider injectFirst>
|
|
<ThemeProvider theme={themes}>
|
|
<CssBaseline />
|
|
<GlobalStyles
|
|
styles={{
|
|
// Crisp font rendering across the app (enterprise polish).
|
|
body: {
|
|
WebkitFontSmoothing: 'antialiased',
|
|
MozOsxFontSmoothing: 'grayscale',
|
|
textRendering: 'optimizeLegibility'
|
|
},
|
|
// Thin, unobtrusive scrollbars (Stripe/Linear style) instead of the
|
|
// chunky 14px solid-purple bar. Track is transparent; the thumb is a
|
|
// soft slate that tints toward brand purple on hover.
|
|
'*': {
|
|
scrollbarWidth: 'thin', // Firefox
|
|
scrollbarColor: 'rgba(102, 37, 130, 0.28) transparent'
|
|
},
|
|
'*::-webkit-scrollbar': {
|
|
width: '10px',
|
|
height: '10px'
|
|
},
|
|
'*::-webkit-scrollbar-track': {
|
|
backgroundColor: 'transparent'
|
|
},
|
|
'*::-webkit-scrollbar-thumb': {
|
|
backgroundColor: 'rgba(102, 37, 130, 0.26)',
|
|
borderRadius: '8px',
|
|
border: '2px solid transparent',
|
|
backgroundClip: 'padding-box'
|
|
},
|
|
'*::-webkit-scrollbar-thumb:hover': {
|
|
backgroundColor: 'rgba(102, 37, 130, 0.45)'
|
|
},
|
|
'*::-webkit-scrollbar-corner': {
|
|
backgroundColor: 'transparent'
|
|
}
|
|
}}
|
|
/>
|
|
|
|
{children}
|
|
</ThemeProvider>
|
|
</StyledEngineProvider>
|
|
);
|
|
}
|
|
|
|
ThemeCustomization.propTypes = {
|
|
children: PropTypes.node
|
|
};
|