CssBaseline.js
5.75 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
'use client';
import * as React from 'react';
import PropTypes from 'prop-types';
import { globalCss } from "../zero-styled/index.js";
import { useDefaultProps } from "../DefaultPropsProvider/index.js";
// to determine if the global styles are static or dynamic
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const isDynamicSupport = typeof globalCss({}) === 'function';
export const html = (theme, enableColorScheme) => ({
WebkitFontSmoothing: 'antialiased',
// Antialiasing.
MozOsxFontSmoothing: 'grayscale',
// Antialiasing.
// Change from `box-sizing: content-box` so that `width`
// is not affected by `padding` or `border`.
boxSizing: 'border-box',
// Fix font resize problem in iOS
WebkitTextSizeAdjust: '100%',
// When used under CssVarsProvider, colorScheme should not be applied dynamically because it will generate the stylesheet twice for server-rendered applications.
...(enableColorScheme && !theme.vars && {
colorScheme: theme.palette.mode
})
});
export const body = theme => ({
color: (theme.vars || theme).palette.text.primary,
...theme.typography.body1,
backgroundColor: (theme.vars || theme).palette.background.default,
'@media print': {
// Save printer ink.
backgroundColor: (theme.vars || theme).palette.common.white
}
});
export const styles = (theme, enableColorScheme = false) => {
const colorSchemeStyles = {};
if (enableColorScheme && theme.colorSchemes && typeof theme.getColorSchemeSelector === 'function') {
Object.entries(theme.colorSchemes).forEach(([key, scheme]) => {
const selector = theme.getColorSchemeSelector(key);
if (selector.startsWith('@')) {
// for @media (prefers-color-scheme), we need to target :root
colorSchemeStyles[selector] = {
':root': {
colorScheme: scheme.palette?.mode
}
};
} else {
// else, it's likely that the selector already target an element with a class or data attribute
colorSchemeStyles[selector.replace(/\s*&/, '')] = {
colorScheme: scheme.palette?.mode
};
}
});
}
let defaultStyles = {
html: html(theme, enableColorScheme),
'*, *::before, *::after': {
boxSizing: 'inherit'
},
'strong, b': {
fontWeight: theme.typography.fontWeightBold
},
body: {
margin: 0,
// Remove the margin in all browsers.
...body(theme),
// Add support for document.body.requestFullScreen().
// Other elements, if background transparent, are not supported.
'&::backdrop': {
backgroundColor: (theme.vars || theme).palette.background.default
}
},
...colorSchemeStyles
};
const themeOverrides = theme.components?.MuiCssBaseline?.styleOverrides;
if (themeOverrides) {
defaultStyles = [defaultStyles, themeOverrides];
}
return defaultStyles;
};
// `ecs` stands for enableColorScheme. This is internal logic to make it work with Pigment CSS, so shorter is better.
const SELECTOR = 'mui-ecs';
const staticStyles = theme => {
const result = styles(theme, false);
const baseStyles = Array.isArray(result) ? result[0] : result;
if (!theme.vars && baseStyles) {
baseStyles.html[`:root:has(${SELECTOR})`] = {
colorScheme: theme.palette.mode
};
}
if (theme.colorSchemes) {
Object.entries(theme.colorSchemes).forEach(([key, scheme]) => {
const selector = theme.getColorSchemeSelector(key);
if (selector.startsWith('@')) {
// for @media (prefers-color-scheme), we need to target :root
baseStyles[selector] = {
[`:root:not(:has(.${SELECTOR}))`]: {
colorScheme: scheme.palette?.mode
}
};
} else {
// else, it's likely that the selector already target an element with a class or data attribute
baseStyles[selector.replace(/\s*&/, '')] = {
[`&:not(:has(.${SELECTOR}))`]: {
colorScheme: scheme.palette?.mode
}
};
}
});
}
return result;
};
const GlobalStyles = globalCss(isDynamicSupport ? ({
theme,
enableColorScheme
}) => styles(theme, enableColorScheme) : ({
theme
}) => staticStyles(theme));
/**
* Kickstart an elegant, consistent, and simple baseline to build upon.
*/
function CssBaseline(inProps) {
const props = useDefaultProps({
props: inProps,
name: 'MuiCssBaseline'
});
const {
children,
enableColorScheme = false
} = props;
return /*#__PURE__*/_jsxs(React.Fragment, {
children: [isDynamicSupport && /*#__PURE__*/_jsx(GlobalStyles, {
enableColorScheme: enableColorScheme
}), !isDynamicSupport && !enableColorScheme && /*#__PURE__*/_jsx("span", {
className: SELECTOR,
style: {
display: 'none'
}
}), children]
});
}
process.env.NODE_ENV !== "production" ? CssBaseline.propTypes /* remove-proptypes */ = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the d.ts file and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* You can wrap a node.
*/
children: PropTypes.node,
/**
* Enable `color-scheme` CSS property to use `theme.palette.mode`.
* For more details, check out https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme
* For browser support, check out https://caniuse.com/?search=color-scheme
* @default false
*/
enableColorScheme: PropTypes.bool
} : void 0;
export default CssBaseline;