paradiego
This commit is contained in:
83
node_modules/@mui/system/modern/createTheme/applyStyles.js
generated
vendored
Normal file
83
node_modules/@mui/system/modern/createTheme/applyStyles.js
generated
vendored
Normal file
@@ -0,0 +1,83 @@
|
||||
/**
|
||||
* 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',
|
||||
* }),
|
||||
* ],
|
||||
* },
|
||||
* }
|
||||
* }
|
||||
* })
|
||||
*```
|
||||
*/
|
||||
export default 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 {};
|
||||
}
|
||||
31
node_modules/@mui/system/modern/createTheme/createSpacing.js
generated
vendored
Normal file
31
node_modules/@mui/system/modern/createTheme/createSpacing.js
generated
vendored
Normal file
@@ -0,0 +1,31 @@
|
||||
import { createUnarySpacing } from "../spacing/index.js";
|
||||
|
||||
// The different signatures imply different meaning for their arguments that can't be expressed structurally.
|
||||
// We express the difference with variable names.
|
||||
|
||||
export default 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 = 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;
|
||||
}
|
||||
49
node_modules/@mui/system/modern/createTheme/createTheme.js
generated
vendored
Normal file
49
node_modules/@mui/system/modern/createTheme/createTheme.js
generated
vendored
Normal file
@@ -0,0 +1,49 @@
|
||||
import deepmerge from '@mui/utils/deepmerge';
|
||||
import createBreakpoints from "../createBreakpoints/createBreakpoints.js";
|
||||
import cssContainerQueries from "../cssContainerQueries/index.js";
|
||||
import shape from "./shape.js";
|
||||
import createSpacing from "./createSpacing.js";
|
||||
import styleFunctionSx from "../styleFunctionSx/styleFunctionSx.js";
|
||||
import defaultSxConfig from "../styleFunctionSx/defaultSxConfig.js";
|
||||
import applyStyles from "./applyStyles.js";
|
||||
function createTheme(options = {}, ...args) {
|
||||
const {
|
||||
breakpoints: breakpointsInput = {},
|
||||
palette: paletteInput = {},
|
||||
spacing: spacingInput,
|
||||
shape: shapeInput = {},
|
||||
...other
|
||||
} = options;
|
||||
const breakpoints = createBreakpoints(breakpointsInput);
|
||||
const spacing = createSpacing(spacingInput);
|
||||
let muiTheme = deepmerge({
|
||||
breakpoints,
|
||||
direction: 'ltr',
|
||||
components: {},
|
||||
// Inject component definitions.
|
||||
palette: {
|
||||
mode: 'light',
|
||||
...paletteInput
|
||||
},
|
||||
spacing,
|
||||
shape: {
|
||||
...shape,
|
||||
...shapeInput
|
||||
}
|
||||
}, other);
|
||||
muiTheme = cssContainerQueries(muiTheme);
|
||||
muiTheme.applyStyles = applyStyles;
|
||||
muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);
|
||||
muiTheme.unstable_sxConfig = {
|
||||
...defaultSxConfig,
|
||||
...other?.unstable_sxConfig
|
||||
};
|
||||
muiTheme.unstable_sx = function sx(props) {
|
||||
return styleFunctionSx({
|
||||
sx: props,
|
||||
theme: this
|
||||
});
|
||||
};
|
||||
return muiTheme;
|
||||
}
|
||||
export default createTheme;
|
||||
3
node_modules/@mui/system/modern/createTheme/index.js
generated
vendored
Normal file
3
node_modules/@mui/system/modern/createTheme/index.js
generated
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
export { default } from "./createTheme.js";
|
||||
export { default as private_createBreakpoints } from "../createBreakpoints/createBreakpoints.js";
|
||||
export { default as unstable_applyStyles } from "./applyStyles.js";
|
||||
4
node_modules/@mui/system/modern/createTheme/shape.js
generated
vendored
Normal file
4
node_modules/@mui/system/modern/createTheme/shape.js
generated
vendored
Normal file
@@ -0,0 +1,4 @@
|
||||
const shape = {
|
||||
borderRadius: 4
|
||||
};
|
||||
export default shape;
|
||||
Reference in New Issue
Block a user