paradiego

This commit is contained in:
2024-09-18 13:34:19 -03:00
commit 3f0e204289
12510 changed files with 1486101 additions and 0 deletions

View 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 {};
}

View 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;
}

View 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
View 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
View File

@@ -0,0 +1,4 @@
const shape = {
borderRadius: 4
};
export default shape;