init project

docs/data/system/shadows/ShadowsDemo.js

@@ -0,0 +1,93 @@
+import Grid from '@mui/material/Grid';
+import Box from '@mui/material/Box';
+
+export default function ShadowsDemo() {
+  return (
+    <Grid container>
+      <Box
+        sx={(theme) => ({
+          boxShadow: 0,
+          width: '8rem',
+          height: '5rem',
+          bgcolor: '#fff',
+          color: 'grey.800',
+          p: 1,
+          m: 1,
+          borderRadius: 2,
+          textAlign: 'center',
+          fontSize: '0.875rem',
+          fontWeight: '700',
+          ...theme.applyStyles('dark', {
+            bgcolor: '#101010',
+            color: 'grey.300',
+          }),
+        })}
+      >
+        boxShadow: 0
+      </Box>
+      <Box
+        sx={(theme) => ({
+          boxShadow: 1,
+          width: '8rem',
+          height: '5rem',
+          bgcolor: '#fff',
+          color: 'grey.800',
+          p: 1,
+          m: 1,
+          borderRadius: 2,
+          textAlign: 'center',
+          fontSize: '0.875rem',
+          fontWeight: '700',
+          ...theme.applyStyles('dark', {
+            bgcolor: '#101010',
+            color: 'grey.300',
+          }),
+        })}
+      >
+        boxShadow: 1
+      </Box>
+      <Box
+        sx={(theme) => ({
+          boxShadow: 2,
+          width: '8rem',
+          height: '5rem',
+          bgcolor: '#fff',
+          color: 'grey.800',
+          p: 1,
+          m: 1,
+          borderRadius: 2,
+          textAlign: 'center',
+          fontSize: '0.875rem',
+          fontWeight: '700',
+          ...theme.applyStyles('dark', {
+            bgcolor: '#101010',
+            color: 'grey.300',
+          }),
+        })}
+      >
+        boxShadow: 2
+      </Box>
+      <Box
+        sx={(theme) => ({
+          boxShadow: 3,
+          width: '8rem',
+          height: '5rem',
+          bgcolor: '#fff',
+          color: 'grey.800',
+          p: 1,
+          m: 1,
+          borderRadius: 2,
+          textAlign: 'center',
+          fontSize: '0.875rem',
+          fontWeight: '700',
+          ...theme.applyStyles('dark', {
+            bgcolor: '#101010',
+            color: 'grey.300',
+          }),
+        })}
+      >
+        boxShadow: 3
+      </Box>
+    </Grid>
+  );
+}

docs/data/system/shadows/ShadowsDemo.tsx

@@ -0,0 +1,93 @@
+import Grid from '@mui/material/Grid';
+import Box from '@mui/material/Box';
+
+export default function ShadowsDemo() {
+  return (
+    <Grid container>
+      <Box
+        sx={(theme) => ({
+          boxShadow: 0,
+          width: '8rem',
+          height: '5rem',
+          bgcolor: '#fff',
+          color: 'grey.800',
+          p: 1,
+          m: 1,
+          borderRadius: 2,
+          textAlign: 'center',
+          fontSize: '0.875rem',
+          fontWeight: '700',
+          ...theme.applyStyles('dark', {
+            bgcolor: '#101010',
+            color: 'grey.300',
+          }),
+        })}
+      >
+        boxShadow: 0
+      </Box>
+      <Box
+        sx={(theme) => ({
+          boxShadow: 1,
+          width: '8rem',
+          height: '5rem',
+          bgcolor: '#fff',
+          color: 'grey.800',
+          p: 1,
+          m: 1,
+          borderRadius: 2,
+          textAlign: 'center',
+          fontSize: '0.875rem',
+          fontWeight: '700',
+          ...theme.applyStyles('dark', {
+            bgcolor: '#101010',
+            color: 'grey.300',
+          }),
+        })}
+      >
+        boxShadow: 1
+      </Box>
+      <Box
+        sx={(theme) => ({
+          boxShadow: 2,
+          width: '8rem',
+          height: '5rem',
+          bgcolor: '#fff',
+          color: 'grey.800',
+          p: 1,
+          m: 1,
+          borderRadius: 2,
+          textAlign: 'center',
+          fontSize: '0.875rem',
+          fontWeight: '700',
+          ...theme.applyStyles('dark', {
+            bgcolor: '#101010',
+            color: 'grey.300',
+          }),
+        })}
+      >
+        boxShadow: 2
+      </Box>
+      <Box
+        sx={(theme) => ({
+          boxShadow: 3,
+          width: '8rem',
+          height: '5rem',
+          bgcolor: '#fff',
+          color: 'grey.800',
+          p: 1,
+          m: 1,
+          borderRadius: 2,
+          textAlign: 'center',
+          fontSize: '0.875rem',
+          fontWeight: '700',
+          ...theme.applyStyles('dark', {
+            bgcolor: '#101010',
+            color: 'grey.300',
+          }),
+        })}
+      >
+        boxShadow: 3
+      </Box>
+    </Grid>
+  );
+}

docs/data/system/shadows/shadows.md

@@ -0,0 +1,27 @@
+# Shadows
+
+<p class="description">Add or remove shadows to elements with box-shadow utilities.</p>
+
+## Example
+
+The helpers allow you to control relative depth, or distance, between two surfaces along the z-axis.
+By default, there are 25 elevation levels.
+
+{{"demo": "ShadowsDemo.js", "defaultCodeOpen": false, "bg": true}}
+
+```jsx
+<Box sx={{ boxShadow: 0 }}>…
+<Box sx={{ boxShadow: 1 }}>…
+<Box sx={{ boxShadow: 2 }}>…
+<Box sx={{ boxShadow: 3 }}>…
+```
+
+## API
+
+```js
+import { shadows } from '@mui/system';
+```
+
+| Import name | Prop        | CSS property | Theme key |
+| :---------- | :---------- | :----------- | :-------- |
+| `boxShadow` | `boxShadow` | `box-shadow` | `shadows` |