paradiego
This commit is contained in:
89
node_modules/@mui/system/node/createTheme/applyStyles.js
generated
vendored
Normal file
89
node_modules/@mui/system/node/createTheme/applyStyles.js
generated
vendored
Normal file
@@ -0,0 +1,89 @@
|
||||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.default = applyStyles;
|
||||
/**
|
||||
* A universal utility to style components with multiple color modes. Always use it from the theme object.
|
||||
* It works with:
|
||||
* - [Basic theme](https://mui.com/material-ui/customization/dark-mode/)
|
||||
* - [CSS theme variables](https://mui.com/material-ui/customization/css-theme-variables/overview/)
|
||||
* - Zero-runtime engine
|
||||
*
|
||||
* Tips: Use an array over object spread and place `theme.applyStyles()` last.
|
||||
*
|
||||
* ✅ [{ background: '#e5e5e5' }, theme.applyStyles('dark', { background: '#1c1c1c' })]
|
||||
*
|
||||
* 🚫 { background: '#e5e5e5', ...theme.applyStyles('dark', { background: '#1c1c1c' })}
|
||||
*
|
||||
* @example
|
||||
* 1. using with `styled`:
|
||||
* ```jsx
|
||||
* const Component = styled('div')(({ theme }) => [
|
||||
* { background: '#e5e5e5' },
|
||||
* theme.applyStyles('dark', {
|
||||
* background: '#1c1c1c',
|
||||
* color: '#fff',
|
||||
* }),
|
||||
* ]);
|
||||
* ```
|
||||
*
|
||||
* @example
|
||||
* 2. using with `sx` prop:
|
||||
* ```jsx
|
||||
* <Box sx={theme => [
|
||||
* { background: '#e5e5e5' },
|
||||
* theme.applyStyles('dark', {
|
||||
* background: '#1c1c1c',
|
||||
* color: '#fff',
|
||||
* }),
|
||||
* ]}
|
||||
* />
|
||||
* ```
|
||||
*
|
||||
* @example
|
||||
* 3. theming a component:
|
||||
* ```jsx
|
||||
* extendTheme({
|
||||
* components: {
|
||||
* MuiButton: {
|
||||
* styleOverrides: {
|
||||
* root: ({ theme }) => [
|
||||
* { background: '#e5e5e5' },
|
||||
* theme.applyStyles('dark', {
|
||||
* background: '#1c1c1c',
|
||||
* color: '#fff',
|
||||
* }),
|
||||
* ],
|
||||
* },
|
||||
* }
|
||||
* }
|
||||
* })
|
||||
*```
|
||||
*/
|
||||
function applyStyles(key, styles) {
|
||||
// @ts-expect-error this is 'any' type
|
||||
const theme = this;
|
||||
if (theme.vars) {
|
||||
if (!theme.colorSchemes?.[key] || typeof theme.getColorSchemeSelector !== 'function') {
|
||||
return {};
|
||||
}
|
||||
// If CssVarsProvider is used as a provider, returns '*:where({selector}) &'
|
||||
let selector = theme.getColorSchemeSelector(key);
|
||||
if (selector === '&') {
|
||||
return styles;
|
||||
}
|
||||
if (selector.includes('data-') || selector.includes('.')) {
|
||||
// '*' is required as a workaround for Emotion issue (https://github.com/emotion-js/emotion/issues/2836)
|
||||
selector = `*:where(${selector.replace(/\s*&$/, '')}) &`;
|
||||
}
|
||||
return {
|
||||
[selector]: styles
|
||||
};
|
||||
}
|
||||
if (theme.palette.mode === key) {
|
||||
return styles;
|
||||
}
|
||||
return {};
|
||||
}
|
||||
36
node_modules/@mui/system/node/createTheme/createSpacing.js
generated
vendored
Normal file
36
node_modules/@mui/system/node/createTheme/createSpacing.js
generated
vendored
Normal file
@@ -0,0 +1,36 @@
|
||||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.default = createSpacing;
|
||||
var _spacing = require("../spacing");
|
||||
// The different signatures imply different meaning for their arguments that can't be expressed structurally.
|
||||
// We express the difference with variable names.
|
||||
|
||||
function createSpacing(spacingInput = 8,
|
||||
// Material Design layouts are visually balanced. Most measurements align to an 8dp grid, which aligns both spacing and the overall layout.
|
||||
// Smaller components, such as icons, can align to a 4dp grid.
|
||||
// https://m2.material.io/design/layout/understanding-layout.html
|
||||
transform = (0, _spacing.createUnarySpacing)({
|
||||
spacing: spacingInput
|
||||
})) {
|
||||
// Already transformed.
|
||||
if (spacingInput.mui) {
|
||||
return spacingInput;
|
||||
}
|
||||
const spacing = (...argsInput) => {
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
if (!(argsInput.length <= 4)) {
|
||||
console.error(`MUI: Too many arguments provided, expected between 0 and 4, got ${argsInput.length}`);
|
||||
}
|
||||
}
|
||||
const args = argsInput.length === 0 ? [1] : argsInput;
|
||||
return args.map(argument => {
|
||||
const output = transform(argument);
|
||||
return typeof output === 'number' ? `${output}px` : output;
|
||||
}).join(' ');
|
||||
};
|
||||
spacing.mui = true;
|
||||
return spacing;
|
||||
}
|
||||
56
node_modules/@mui/system/node/createTheme/createTheme.js
generated
vendored
Normal file
56
node_modules/@mui/system/node/createTheme/createTheme.js
generated
vendored
Normal file
@@ -0,0 +1,56 @@
|
||||
"use strict";
|
||||
|
||||
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.default = void 0;
|
||||
var _deepmerge = _interopRequireDefault(require("@mui/utils/deepmerge"));
|
||||
var _createBreakpoints = _interopRequireDefault(require("../createBreakpoints/createBreakpoints"));
|
||||
var _cssContainerQueries = _interopRequireDefault(require("../cssContainerQueries"));
|
||||
var _shape = _interopRequireDefault(require("./shape"));
|
||||
var _createSpacing = _interopRequireDefault(require("./createSpacing"));
|
||||
var _styleFunctionSx = _interopRequireDefault(require("../styleFunctionSx/styleFunctionSx"));
|
||||
var _defaultSxConfig = _interopRequireDefault(require("../styleFunctionSx/defaultSxConfig"));
|
||||
var _applyStyles = _interopRequireDefault(require("./applyStyles"));
|
||||
function createTheme(options = {}, ...args) {
|
||||
const {
|
||||
breakpoints: breakpointsInput = {},
|
||||
palette: paletteInput = {},
|
||||
spacing: spacingInput,
|
||||
shape: shapeInput = {},
|
||||
...other
|
||||
} = options;
|
||||
const breakpoints = (0, _createBreakpoints.default)(breakpointsInput);
|
||||
const spacing = (0, _createSpacing.default)(spacingInput);
|
||||
let muiTheme = (0, _deepmerge.default)({
|
||||
breakpoints,
|
||||
direction: 'ltr',
|
||||
components: {},
|
||||
// Inject component definitions.
|
||||
palette: {
|
||||
mode: 'light',
|
||||
...paletteInput
|
||||
},
|
||||
spacing,
|
||||
shape: {
|
||||
..._shape.default,
|
||||
...shapeInput
|
||||
}
|
||||
}, other);
|
||||
muiTheme = (0, _cssContainerQueries.default)(muiTheme);
|
||||
muiTheme.applyStyles = _applyStyles.default;
|
||||
muiTheme = args.reduce((acc, argument) => (0, _deepmerge.default)(acc, argument), muiTheme);
|
||||
muiTheme.unstable_sxConfig = {
|
||||
..._defaultSxConfig.default,
|
||||
...other?.unstable_sxConfig
|
||||
};
|
||||
muiTheme.unstable_sx = function sx(props) {
|
||||
return (0, _styleFunctionSx.default)({
|
||||
sx: props,
|
||||
theme: this
|
||||
});
|
||||
};
|
||||
return muiTheme;
|
||||
}
|
||||
var _default = exports.default = createTheme;
|
||||
27
node_modules/@mui/system/node/createTheme/index.js
generated
vendored
Normal file
27
node_modules/@mui/system/node/createTheme/index.js
generated
vendored
Normal file
@@ -0,0 +1,27 @@
|
||||
"use strict";
|
||||
|
||||
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
Object.defineProperty(exports, "default", {
|
||||
enumerable: true,
|
||||
get: function () {
|
||||
return _createTheme.default;
|
||||
}
|
||||
});
|
||||
Object.defineProperty(exports, "private_createBreakpoints", {
|
||||
enumerable: true,
|
||||
get: function () {
|
||||
return _createBreakpoints.default;
|
||||
}
|
||||
});
|
||||
Object.defineProperty(exports, "unstable_applyStyles", {
|
||||
enumerable: true,
|
||||
get: function () {
|
||||
return _applyStyles.default;
|
||||
}
|
||||
});
|
||||
var _createTheme = _interopRequireDefault(require("./createTheme"));
|
||||
var _createBreakpoints = _interopRequireDefault(require("../createBreakpoints/createBreakpoints"));
|
||||
var _applyStyles = _interopRequireDefault(require("./applyStyles"));
|
||||
10
node_modules/@mui/system/node/createTheme/shape.js
generated
vendored
Normal file
10
node_modules/@mui/system/node/createTheme/shape.js
generated
vendored
Normal file
@@ -0,0 +1,10 @@
|
||||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.default = void 0;
|
||||
const shape = {
|
||||
borderRadius: 4
|
||||
};
|
||||
var _default = exports.default = shape;
|
||||
Reference in New Issue
Block a user