[draft][material-ui][docs] Revamp templates page

docs/pages/material-ui/getting-started/templates.js

@@ -3,5 +3,5 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import * as pageProps from 'docs/data/material/getting-started/templates/templates.md?muiMarkdown';
 
 export default function Page() {
-  return <MarkdownDocs {...pageProps} disableToc disableAd />;
+  return <MarkdownDocs {...pageProps} disableAd />;
 }

docs/src/modules/components/MaterialFreeTemplatesCollection.js

@@ -5,69 +5,73 @@ import Card from '@mui/material/Card';
 import CardMedia from '@mui/material/CardMedia';
 import Button from '@mui/material/Button';
 import Grid from '@mui/material/Grid';
+import MenuItem from '@mui/material/MenuItem';
+import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
+import Select, { SelectChangeEvent } from '@mui/material/Select';
 import Visibility from '@mui/icons-material/Visibility';
 import CodeRoundedIcon from '@mui/icons-material/CodeRounded';
+import DownloadRoundedIcon from '@mui/icons-material/DownloadRounded';
 import { useTranslate } from '@mui/docs/i18n';
 import { useTheme } from '@mui/material/styles';
 
 const sourcePrefix = `${process.env.SOURCE_CODE_REPO}/tree/v${process.env.LIB_VERSION}`;
 
-function layouts(translatation, theme) {
+function layouts(translation, theme) {
   const imageSuffix = theme.palette.mode === 'dark' ? '-dark' : '-light';
   return [
     {
-      title: translatation('dashboardTitle'),
-      description: translatation('dashboardDescr'),
+      title: translation('dashboardTitle'),
+      description: translation('dashboardDescr'),
       src: `/static/images/templates/dashboard${imageSuffix}.png`,
       href: '/material-ui/getting-started/templates/dashboard/',
       source: `${sourcePrefix}/docs/data/material/getting-started/templates/dashboard`,
     },
     {
-      title: translatation('landingPageTitle'),
-      description: translatation('landingPageDescr'),
+      title: translation('landingPageTitle'),
+      description: translation('landingPageDescr'),
       src: `/static/images/templates/landing-page${imageSuffix}.png`,
       href: '/material-ui/getting-started/templates/landing-page/',
       source: `${sourcePrefix}/docs/data/material/getting-started/templates/landing-page`,
     },
     {
-      title: translatation('checkoutTitle'),
-      description: translatation('checkoutDescr'),
+      title: translation('checkoutTitle'),
+      description: translation('checkoutDescr'),
       src: `/static/images/templates/checkout${imageSuffix}.png`,
       href: '/material-ui/getting-started/templates/checkout/',
       source: `${sourcePrefix}/docs/data/material/getting-started/templates/checkout`,
     },
     {
-      title: translatation('signInTitle'),
-      description: translatation('signInDescr'),
+      title: translation('signInTitle'),
+      description: translation('signInDescr'),
       src: `/static/images/templates/sign-in${imageSuffix}.png`,
       href: '/material-ui/getting-started/templates/sign-in/',
       source: `${sourcePrefix}/docs/data/material/getting-started/templates/sign-in`,
     },
     {
-      title: translatation('signInSideTitle'),
-      description: translatation('signInSideDescr'),
+      title: translation('signInSideTitle'),
+      description: translation('signInSideDescr'),
       src: `/static/images/templates/sign-in-side${imageSuffix}.png`,
       href: '/material-ui/getting-started/templates/sign-in-side/',
       source: `${sourcePrefix}/docs/data/material/getting-started/templates/sign-in-side`,
     },
     {
-      title: translatation('signUpTitle'),
-      description: translatation('signUpDescr'),
+      title: translation('signUpTitle'),
+      description: translation('signUpDescr'),
       src: `/static/images/templates/sign-up${imageSuffix}.png`,
       href: '/material-ui/getting-started/templates/sign-up/',
       source: `${sourcePrefix}/docs/data/material/getting-started/templates/sign-up`,
     },
     {
-      title: translatation('blogTitle'),
-      description: translatation('blogDescr'),
+      title: translation('blogTitle'),
+      description: translation('blogDescr'),
       src: `/static/images/templates/blog${imageSuffix}.png`,
       href: '/material-ui/getting-started/templates/blog/',
       source: `${sourcePrefix}/docs/data/material/getting-started/templates/blog`,
     },
     {
-      title: translatation('stickyFooterTitle'),
-      description: translatation('stickyFooterDescr'),
+      title: translation('stickyFooterTitle'),
+      description: translation('stickyFooterDescr'),
       src: `/static/images/templates/sticky-footer${imageSuffix}.png`,
       href: '/material-ui/getting-started/templates/sticky-footer/',
       source: `${sourcePrefix}/docs/data/material/getting-started/templates/sticky-footer`,
@@ -76,13 +80,24 @@ function layouts(translatation, theme) {
 }
 
 export default function Templates() {
-  const translatation = useTranslate();
+  const translation = useTranslate();
   const theme = useTheme();
+  const [templateTheme, setTemplateTheme] = React.useState('');
+
+  const handleChange = (event) => {
+    setTemplateTheme(event.target.value);
+  };
 
   return (
-    <Grid container spacing={2} sx={{ py: 2 }}>
-      {layouts(translatation, theme).map((layout) => (
-        <Grid item xs={12} sm={6} key={layout.title}>
+    <Stack gap={4}>
+      {layouts(translation, theme).map((layout) => (
+        <Stack gap={1} key={layout.title}>
+          <Typography component="h3" variant="subtitle1" sx={{ fontWeight: 'semiBold' }}>
+            {layout.title}
+          </Typography>
+          <Typography variant="body2" sx={{ color: 'text.secondary', mb: 2 }}>
+            {layout.description}
+          </Typography>
           <Card
             variant="outlined"
             sx={{
@@ -92,28 +107,58 @@ export default function Templates() {
               borderColor: 'divider',
             }}
           >
-            <CardMedia
-              component="img"
-              image={layout.src}
-              title={layout.title}
+            <Box
               sx={{
-                aspectRatio: '16 / 9',
-                objectPosition: 'top',
-                borderBottom: '1px solid',
-                borderColor: 'divider',
+                position: 'relative',
+                '&:hover button': {
+                  opacity: 1,
+                },
+                '&:hover img': {
+                  filter: 'brightness(0.5)',
+                  transition: 'filter 0.5s',
+                },
               }}
-            />
-            <Box sx={{ p: 2, pt: 1.5 }}>
-              <Typography component="h3" variant="body1" sx={{ fontWeight: 'semiBold' }}>
-                {layout.title}
-              </Typography>
-              <Typography variant="body2" sx={{ color: 'text.secondary', mb: 2 }}>
-                {layout.description}
-              </Typography>
+            >
+              <CardMedia
+                component="img"
+                image={layout.src}
+                title={layout.title}
+                sx={{
+                  aspectRatio: '16 / 9',
+                  objectPosition: 'top',
+                  borderBottom: '1px solid',
+                  borderColor: 'divider',
+                }}
+              />
+              <Button
+                variant="contained"
+                color="secondary"
+                size="small"
+                sx={{
+                  position: 'absolute',
+                  top: '50%',
+                  left: '50%',
+                  transform: 'translate(-50%, -50%)',
+                  opacity: 0,
+                  transition: 'opacity 0.3s',
+                }}
+              >
+                Live preview
+              </Button>
+            </Box>
+            <Box
+              sx={{
+                p: 2,
+                pt: 1.5,
+                display: 'flex',
+                justifyContent: 'space-between',
+                flexDirection: 'row',
+                backgroundColor: 'background.paper',
+              }}
+            >
               <Box
                 sx={{
                   display: 'flex',
-                  flexDirection: { xs: 'column', sm: 'row' },
                   gap: 1,
                   mt: 'auto',
                 }}
@@ -122,7 +167,6 @@ export default function Templates() {
                   component="a"
                   href={layout.href}
                   size="small"
-                  fullWidth
                   variant="outlined"
                   color="secondary"
                   startIcon={<Visibility sx={{ mr: 0.5 }} />}
@@ -136,18 +180,49 @@ export default function Templates() {
                   component="a"
                   href={layout.source}
                   size="small"
-                  fullWidth
                   variant="outlined"
                   color="secondary"
                   startIcon={<CodeRoundedIcon sx={{ mr: 0.5 }} />}
                 >
                   Source code
                 </Button>
               </Box>
+              <Box
+                sx={{
+                  display: 'flex',
+                  gap: 1,
+                  mt: 'auto',
+                }}
+              >
+                <Button
+                  size="small"
+                  variant="text"
+                  color="primary"
+                  startIcon={<DownloadRoundedIcon sx={{ mr: 0.5 }} />}
+                  data-ga-event-category="material-ui-template"
+                  data-ga-event-label={layout.title}
+                  data-ga-event-action="download-theme"
+                >
+                  Download theme
+                </Button>
+                <Select
+                  labelId="demo-simple-select-label"
+                  id="demo-simple-select"
+                  value={templateTheme}
+                  size="small"
+                  displayEmpty
+                  onChange={handleChange}
+                  sx={{ width: '180px' }}
+                >
+                  <MenuItem value="">Material Design 2</MenuItem>
+                  <MenuItem value={1}>Sober</MenuItem>
+                  <MenuItem value={2}>Sleek</MenuItem>
+                </Select>
+              </Box>
             </Box>
           </Card>
-        </Grid>
+        </Stack>
       ))}
-    </Grid>
+    </Stack>
   );
 }

packages/mui-docs/src/branding/brandingTheme.ts

@@ -1,4 +1,4 @@
-import type { CSSObject } from '@mui/system';
+import { borderColor, type CSSObject } from '@mui/system';
 import type {} from '@mui/material/themeCssVarsAugmentation';
 import ArrowDropDownRounded from '@mui/icons-material/ArrowDropDownRounded';
 import { createTheme, ThemeOptions, Theme, alpha } from '@mui/material/styles';
@@ -618,6 +618,23 @@ export function getThemedComponents(): ThemeOptions {
                   backgroundColor: (theme.vars || theme).palette.primaryDark[700],
                 },
               }),
+            ...(ownerState.variant === 'contained' &&
+              ownerState.color === 'secondary' && {
+                color: 'hsl(0, 0%, 0%)',
+                backgroundColor: (theme.vars || theme).palette.grey[100],
+                boxShadow: `hsla(0, 0%, 100%, 0.5) 0 2px 0 inset, ${theme.palette.grey[300]} 0 -2px 0 inset, ${alpha(theme.palette.common.black, 0.1)} 0 2px 4px 0`,
+                '&:hover': {
+                  backgroundColor: (theme.vars || theme).palette.grey[200],
+                },
+                ...theme.applyDarkStyles({
+                  color: 'hsl(0, 0%, 100%)',
+                  backgroundColor: (theme.vars || theme).palette.grey[800],
+                  boxShadow: `${alpha(theme.palette.grey[700], 0.5)} 0 2px 0 inset, ${alpha(theme.palette.grey[900], 0.5)} 0 -2px 0 inset, ${alpha(theme.palette.common.black, 0.1)} 0 2px 4px 0`,
+                  '&:hover': {
+                    backgroundColor: (theme.vars || theme).palette.grey[900],
+                  },
+                }),
+              }),
             ...(ownerState.variant === 'text' &&
               ownerState.color === 'secondary' && {
                 color: (theme.vars || theme).palette.text.secondary,
@@ -1155,6 +1172,28 @@ export function getThemedComponents(): ThemeOptions {
           iconFilled: {
             top: 'calc(50% - .25em)',
           },
+          root: ({ theme }) => ({
+            borderRadius: 10,
+            backgroundColor: theme.palette.background.paper,
+            boxShadow: `inset 0 2px 0 1px hsla(220, 0%, 100%, 0.6), inset 0 -1px 0 2px hsla(220, 35%, 90%, 0.5)`,
+            '&:hover': {
+              backgroundColor: theme.palette.background.paper,
+              boxShadow: 'none',
+            },
+            '&:before, &:after': {
+              display: 'none',
+            },
+            ...theme.applyDarkStyles({
+              boxShadow: `inset 0 2px 0 1px ${alpha(grey[700], 0.15)}, inset 0 -2px 0 1px hsla(220, 0%, 0%, 0.7)`,
+            }),
+          }),
+          select: ({ theme }) => ({
+            display: 'flex',
+            alignItems: 'center',
+            padding: theme.spacing(0, 2),
+            fontSize: theme.typography.pxToRem(14),
+            fontWeight: 500,
+          }),
         },
       },
       MuiTab: {