@mui/material
Version:
Material UI is an open-source React component library that implements Google's Material Design. It's comprehensive and can be used in production out of the box.
88 lines (83 loc) • 2.5 kB
JavaScript
'use client';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = adaptV4Theme;
var _system = require("@mui/system");
function adaptV4Theme(inputTheme) {
if (process.env.NODE_ENV !== 'production') {
console.warn(['MUI: adaptV4Theme() is deprecated.', 'Follow the upgrade guide on https://mui.com/r/migration-v4#theme.'].join('\n'));
}
const {
defaultProps = {},
mixins = {},
overrides = {},
palette = {},
props = {},
styleOverrides = {},
...other
} = inputTheme;
const theme = {
...other,
components: {}
};
// default props
Object.keys(defaultProps).forEach(component => {
const componentValue = theme.components[component] || {};
componentValue.defaultProps = defaultProps[component];
theme.components[component] = componentValue;
});
Object.keys(props).forEach(component => {
const componentValue = theme.components[component] || {};
componentValue.defaultProps = props[component];
theme.components[component] = componentValue;
});
// CSS overrides
Object.keys(styleOverrides).forEach(component => {
const componentValue = theme.components[component] || {};
componentValue.styleOverrides = styleOverrides[component];
theme.components[component] = componentValue;
});
Object.keys(overrides).forEach(component => {
const componentValue = theme.components[component] || {};
componentValue.styleOverrides = overrides[component];
theme.components[component] = componentValue;
});
// theme.spacing
theme.spacing = (0, _system.createSpacing)(inputTheme.spacing);
// theme.mixins.gutters
const breakpoints = (0, _system.createBreakpoints)(inputTheme.breakpoints || {});
const spacing = theme.spacing;
theme.mixins = {
gutters: (styles = {}) => {
return {
paddingLeft: spacing(2),
paddingRight: spacing(2),
...styles,
[breakpoints.up('sm')]: {
paddingLeft: spacing(3),
paddingRight: spacing(3),
...styles[breakpoints.up('sm')]
}
};
},
...mixins
};
const {
type: typeInput,
mode: modeInput,
...paletteRest
} = palette;
const finalMode = modeInput || typeInput || 'light';
theme.palette = {
// theme.palette.text.hint
text: {
hint: finalMode === 'dark' ? 'rgba(255, 255, 255, 0.5)' : 'rgba(0, 0, 0, 0.38)'
},
mode: finalMode,
type: finalMode,
...paletteRest
};
return theme;
}
;