init project

docs/data/system/palette/BackgroundColor.js

@@ -0,0 +1,101 @@
+import Box from '@mui/material/Box';
+import Grid from '@mui/material/Grid';
+
+export default function BackgroundColor() {
+  return (
+    <Grid container spacing={1}>
+      <Grid
+        size={{
+          xs: 12,
+          sm: 4,
+        }}
+      >
+        <Box sx={{ bgcolor: 'primary.main', color: 'primary.contrastText', p: 2 }}>
+          primary.main
+        </Box>
+      </Grid>
+      <Grid
+        size={{
+          xs: 12,
+          sm: 4,
+        }}
+      >
+        <Box
+          sx={{ bgcolor: 'secondary.main', color: 'secondary.contrastText', p: 2 }}
+        >
+          secondary.main
+        </Box>
+      </Grid>
+      <Grid
+        size={{
+          xs: 12,
+          sm: 4,
+        }}
+      >
+        <Box sx={{ bgcolor: 'error.main', color: 'error.contrastText', p: 2 }}>
+          error.main
+        </Box>
+      </Grid>
+      <Grid
+        size={{
+          xs: 12,
+          sm: 4,
+        }}
+      >
+        <Box sx={{ bgcolor: 'warning.main', color: 'warning.contrastText', p: 2 }}>
+          warning.main
+        </Box>
+      </Grid>
+      <Grid
+        size={{
+          xs: 12,
+          sm: 4,
+        }}
+      >
+        <Box sx={{ bgcolor: 'info.main', color: 'info.contrastText', p: 2 }}>
+          info.main
+        </Box>
+      </Grid>
+      <Grid
+        size={{
+          xs: 12,
+          sm: 4,
+        }}
+      >
+        <Box sx={{ bgcolor: 'success.main', color: 'success.contrastText', p: 2 }}>
+          success.main
+        </Box>
+      </Grid>
+      <Grid
+        size={{
+          xs: 12,
+          sm: 4,
+        }}
+      >
+        <Box sx={{ bgcolor: 'text.primary', color: 'background.paper', p: 2 }}>
+          text.primary
+        </Box>
+      </Grid>
+      <Grid
+        size={{
+          xs: 12,
+          sm: 4,
+        }}
+      >
+        <Box sx={{ bgcolor: 'text.secondary', color: 'background.paper', p: 2 }}>
+          text.secondary
+        </Box>
+      </Grid>
+      <Grid
+        size={{
+          xs: 12,
+          sm: 4,
+        }}
+      >
+        <Box sx={{ bgcolor: 'text.disabled', color: 'background.paper', p: 2 }}>
+          text.disabled
+        </Box>
+      </Grid>
+    </Grid>
+  );
+}

docs/data/system/palette/BackgroundColor.tsx

@@ -0,0 +1,101 @@
+import Box from '@mui/material/Box';
+import Grid from '@mui/material/Grid';
+
+export default function BackgroundColor() {
+  return (
+    <Grid container spacing={1}>
+      <Grid
+        size={{
+          xs: 12,
+          sm: 4,
+        }}
+      >
+        <Box sx={{ bgcolor: 'primary.main', color: 'primary.contrastText', p: 2 }}>
+          primary.main
+        </Box>
+      </Grid>
+      <Grid
+        size={{
+          xs: 12,
+          sm: 4,
+        }}
+      >
+        <Box
+          sx={{ bgcolor: 'secondary.main', color: 'secondary.contrastText', p: 2 }}
+        >
+          secondary.main
+        </Box>
+      </Grid>
+      <Grid
+        size={{
+          xs: 12,
+          sm: 4,
+        }}
+      >
+        <Box sx={{ bgcolor: 'error.main', color: 'error.contrastText', p: 2 }}>
+          error.main
+        </Box>
+      </Grid>
+      <Grid
+        size={{
+          xs: 12,
+          sm: 4,
+        }}
+      >
+        <Box sx={{ bgcolor: 'warning.main', color: 'warning.contrastText', p: 2 }}>
+          warning.main
+        </Box>
+      </Grid>
+      <Grid
+        size={{
+          xs: 12,
+          sm: 4,
+        }}
+      >
+        <Box sx={{ bgcolor: 'info.main', color: 'info.contrastText', p: 2 }}>
+          info.main
+        </Box>
+      </Grid>
+      <Grid
+        size={{
+          xs: 12,
+          sm: 4,
+        }}
+      >
+        <Box sx={{ bgcolor: 'success.main', color: 'success.contrastText', p: 2 }}>
+          success.main
+        </Box>
+      </Grid>
+      <Grid
+        size={{
+          xs: 12,
+          sm: 4,
+        }}
+      >
+        <Box sx={{ bgcolor: 'text.primary', color: 'background.paper', p: 2 }}>
+          text.primary
+        </Box>
+      </Grid>
+      <Grid
+        size={{
+          xs: 12,
+          sm: 4,
+        }}
+      >
+        <Box sx={{ bgcolor: 'text.secondary', color: 'background.paper', p: 2 }}>
+          text.secondary
+        </Box>
+      </Grid>
+      <Grid
+        size={{
+          xs: 12,
+          sm: 4,
+        }}
+      >
+        <Box sx={{ bgcolor: 'text.disabled', color: 'background.paper', p: 2 }}>
+          text.disabled
+        </Box>
+      </Grid>
+    </Grid>
+  );
+}

docs/data/system/palette/Color.js

@@ -0,0 +1,18 @@
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+
+export default function Color() {
+  return (
+    <Typography component="div" variant="body1">
+      <Box sx={{ color: 'primary.main' }}>primary.main</Box>
+      <Box sx={{ color: 'secondary.main' }}>secondary.main</Box>
+      <Box sx={{ color: 'error.main' }}>error.main</Box>
+      <Box sx={{ color: 'warning.main' }}>warning.main</Box>
+      <Box sx={{ color: 'info.main' }}>info.main</Box>
+      <Box sx={{ color: 'success.main' }}>success.main</Box>
+      <Box sx={{ color: 'text.primary' }}>text.primary</Box>
+      <Box sx={{ color: 'text.secondary' }}>text.secondary</Box>
+      <Box sx={{ color: 'text.disabled' }}>text.disabled</Box>
+    </Typography>
+  );
+}

docs/data/system/palette/Color.tsx

@@ -0,0 +1,18 @@
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+
+export default function Color() {
+  return (
+    <Typography component="div" variant="body1">
+      <Box sx={{ color: 'primary.main' }}>primary.main</Box>
+      <Box sx={{ color: 'secondary.main' }}>secondary.main</Box>
+      <Box sx={{ color: 'error.main' }}>error.main</Box>
+      <Box sx={{ color: 'warning.main' }}>warning.main</Box>
+      <Box sx={{ color: 'info.main' }}>info.main</Box>
+      <Box sx={{ color: 'success.main' }}>success.main</Box>
+      <Box sx={{ color: 'text.primary' }}>text.primary</Box>
+      <Box sx={{ color: 'text.secondary' }}>text.secondary</Box>
+      <Box sx={{ color: 'text.disabled' }}>text.disabled</Box>
+    </Typography>
+  );
+}

docs/data/system/palette/Color.tsx.preview

@@ -0,0 +1,11 @@
+<Typography component="div" variant="body1">
+  <Box sx={{ color: 'primary.main' }}>primary.main</Box>
+  <Box sx={{ color: 'secondary.main' }}>secondary.main</Box>
+  <Box sx={{ color: 'error.main' }}>error.main</Box>
+  <Box sx={{ color: 'warning.main' }}>warning.main</Box>
+  <Box sx={{ color: 'info.main' }}>info.main</Box>
+  <Box sx={{ color: 'success.main' }}>success.main</Box>
+  <Box sx={{ color: 'text.primary' }}>text.primary</Box>
+  <Box sx={{ color: 'text.secondary' }}>text.secondary</Box>
+  <Box sx={{ color: 'text.disabled' }}>text.disabled</Box>
+</Typography>

docs/data/system/palette/palette.md

@@ -0,0 +1,46 @@
+# Palette
+
+<p class="description">Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.</p>
+
+## Color
+
+{{"demo": "Color.js", "defaultCodeOpen": false}}
+
+```jsx
+<Box sx={{ color: 'primary.main' }}>…
+<Box sx={{ color: 'secondary.main' }}>…
+<Box sx={{ color: 'error.main' }}>…
+<Box sx={{ color: 'warning.main' }}>…
+<Box sx={{ color: 'info.main' }}>…
+<Box sx={{ color: 'success.main' }}>…
+<Box sx={{ color: 'text.primary' }}>…
+<Box sx={{ color: 'text.secondary' }}>…
+<Box sx={{ color: 'text.disabled' }}>…
+```
+
+## Background color
+
+{{"demo": "BackgroundColor.js", "defaultCodeOpen": false}}
+
+```jsx
+<Box sx={{ bgcolor: 'primary.main' }}>…
+<Box sx={{ bgcolor: 'secondary.main' }}>…
+<Box sx={{ bgcolor: 'error.main' }}>…
+<Box sx={{ bgcolor: 'warning.main' }}>…
+<Box sx={{ bgcolor: 'info.main' }}>…
+<Box sx={{ bgcolor: 'success.main' }}>…
+<Box sx={{ bgcolor: 'text.primary' }}>…
+<Box sx={{ bgcolor: 'text.secondary' }}>…
+<Box sx={{ bgcolor: 'text.disabled' }}>…
+```
+
+## API
+
+```js
+import { palette } from '@mui/system';
+```
+
+| Import name | Prop      | CSS property      | Theme key                                                                    |
+| :---------- | :-------- | :---------------- | :--------------------------------------------------------------------------- |
+| `color`     | `color`   | `color`           | [`palette`](/material-ui/customization/default-theme/?expand-path=$.palette) |
+| `bgcolor`   | `bgcolor` | `backgroundColor` | [`palette`](/material-ui/customization/default-theme/?expand-path=$.palette) |