@mui/material
Version:
React components that implement Google's Material Design.
124 lines (100 loc) • 4.98 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import { deepmerge } from '@mui/utils';
import { colorChannel } from '@mui/system';
import createThemeWithoutVars from './createTheme';
import { getOverlayAlpha } from '../Paper/Paper';
var defaultDarkOverlays = _toConsumableArray(Array(25)).map(function (_, index) {
if (index === 0) {
return undefined;
}
var overlay = getOverlayAlpha(index);
return "linear-gradient(rgba(255 255 255 / ".concat(overlay, "), rgba(255 255 255 / ").concat(overlay, "))");
});
export default function extendTheme() {
var _colorSchemesInput$li, _colorSchemesInput$da, _colorSchemesInput$li2, _colorSchemesInput$li3, _colorSchemesInput$da2, _colorSchemesInput$da3;
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var _options$colorSchemes = options.colorSchemes,
colorSchemesInput = _options$colorSchemes === void 0 ? {} : _options$colorSchemes,
input = _objectWithoutProperties(options, ["colorSchemes"]);
var _createThemeWithoutVa = createThemeWithoutVars(_extends({}, input, colorSchemesInput.light && {
palette: (_colorSchemesInput$li = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li.palette
})),
lightPalette = _createThemeWithoutVa.palette,
muiTheme = _objectWithoutProperties(_createThemeWithoutVa, ["palette"]);
var _createThemeWithoutVa2 = createThemeWithoutVars({
palette: _extends({
mode: 'dark'
}, (_colorSchemesInput$da = colorSchemesInput.dark) == null ? void 0 : _colorSchemesInput$da.palette)
}),
darkPalette = _createThemeWithoutVa2.palette;
var theme = _extends({}, muiTheme, {
colorSchemes: _extends({}, colorSchemesInput, {
light: _extends({}, colorSchemesInput.light, {
palette: lightPalette,
opacity: _extends({
placeholder: 0.42,
inputTouchBottomLine: 0.42
}, (_colorSchemesInput$li2 = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li2.opacity),
overlays: ((_colorSchemesInput$li3 = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li3.overlays) || []
}),
dark: _extends({}, colorSchemesInput.dark, {
palette: darkPalette,
opacity: _extends({
placeholder: 0.5,
inputTouchBottomLine: 0.7
}, (_colorSchemesInput$da2 = colorSchemesInput.dark) == null ? void 0 : _colorSchemesInput$da2.opacity),
overlays: ((_colorSchemesInput$da3 = colorSchemesInput.dark) == null ? void 0 : _colorSchemesInput$da3.overlays) || defaultDarkOverlays
})
})
});
Object.keys(theme.colorSchemes).forEach(function (key) {
var palette = theme.colorSchemes[key].palette; // attach black & white channels to common node
if (key === 'dark') {
palette.common.background = palette.common.background || '#000';
palette.common.onBackground = palette.common.onBackground || '#fff';
} else {
palette.common.background = palette.common.background || '#fff';
palette.common.onBackground = palette.common.onBackground || '#000';
}
palette.common.backgroundChannel = colorChannel(palette.common.background);
palette.common.onBackgroundChannel = colorChannel(palette.common.onBackground);
palette.dividerChannel = colorChannel(palette.divider); // special token for Tooltip
// TODO: consider adding `main`, and `light` to palette.grey to make it consistent.
if (!palette.grey.dark) {
palette.grey.dark = palette.grey[700];
}
Object.keys(palette).forEach(function (color) {
var colors = palette[color]; // Color palettes: primary, secondary, error, info, success, and warning
if (colors.main) {
palette[color].mainChannel = colorChannel(colors.main);
}
if (colors.light) {
palette[color].lightChannel = colorChannel(colors.light);
}
if (colors.dark) {
palette[color].darkChannel = colorChannel(colors.dark);
}
if (colors.contrastText) {
palette[color].contrastTextChannel = colorChannel(colors.contrastText);
} // Text colors: text.primary, text.secondary
if (colors.primary) {
palette[color].primaryChannel = colorChannel(colors.primary);
}
if (colors.secondary) {
palette[color].secondaryChannel = colorChannel(colors.secondary);
} // Action colors: action.activeChannel
if (colors.active) {
palette[color].activeChannel = colorChannel(colors.active);
}
});
});
for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
args[_key - 1] = arguments[_key];
}
theme = args.reduce(function (acc, argument) {
return deepmerge(acc, argument);
}, theme);
return theme;
}