[docs][material-ui] Fix template shadow tokens

docs/data/material/getting-started/templates/blog/TemplateFrame.js

@@ -22,7 +22,7 @@ const StyledAppBar = styled(AppBar)(({ theme }) => ({
   borderBottom: '1px solid',
   borderColor: theme.palette.divider,
   backgroundColor: theme.palette.background.paper,
-  boxShadow: theme.shadows[1],
+  boxShadow: 'none',
   backgroundImage: 'none',
   zIndex: theme.zIndex.drawer + 1,
   flex: '0 0 auto',

docs/data/material/getting-started/templates/blog/TemplateFrame.tsx

@@ -26,7 +26,7 @@ const StyledAppBar = styled(AppBar)(({ theme }) => ({
   borderBottom: '1px solid',
   borderColor: theme.palette.divider,
   backgroundColor: theme.palette.background.paper,
-  boxShadow: theme.shadows[1],
+  boxShadow: 'none',
   backgroundImage: 'none',
   zIndex: theme.zIndex.drawer + 1,
   flex: '0 0 auto',

docs/data/material/getting-started/templates/blog/theme/themePrimitives.js

@@ -1,6 +1,8 @@
 import { createTheme, alpha } from '@mui/material/styles';
 
-const customTheme = createTheme();
+const defaultTheme = createTheme();
+
+const customShadows = [...defaultTheme.shadows];
 
 export const brand = {
   50: 'hsl(210, 100%, 95%)',
@@ -67,143 +69,148 @@ export const red = {
   900: 'hsl(0, 93%, 6%)',
 };
 
-export const getDesignTokens = (mode) => ({
-  palette: {
-    mode,
-    primary: {
-      light: brand[200],
-      main: brand[400],
-      dark: brand[700],
-      contrastText: brand[50],
-      ...(mode === 'dark' && {
-        contrastText: brand[50],
-        light: brand[300],
+export const getDesignTokens = (mode) => {
+  customShadows[1] =
+    mode === 'dark'
+      ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px'
+      : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px';
+
+  return {
+    palette: {
+      mode,
+      primary: {
+        light: brand[200],
         main: brand[400],
         dark: brand[700],
-      }),
-    },
-    info: {
-      light: brand[100],
-      main: brand[300],
-      dark: brand[600],
-      contrastText: gray[50],
-      ...(mode === 'dark' && {
-        contrastText: brand[300],
-        light: brand[500],
-        main: brand[700],
-        dark: brand[900],
-      }),
-    },
-    warning: {
-      light: orange[300],
-      main: orange[400],
-      dark: orange[800],
-      ...(mode === 'dark' && {
-        light: orange[400],
-        main: orange[500],
-        dark: orange[700],
-      }),
-    },
-    error: {
-      light: red[300],
-      main: red[400],
-      dark: red[800],
-      ...(mode === 'dark' && {
-        light: red[400],
-        main: red[500],
-        dark: red[700],
-      }),
-    },
-    success: {
-      light: green[300],
-      main: green[400],
-      dark: green[800],
-      ...(mode === 'dark' && {
-        light: green[400],
-        main: green[500],
-        dark: green[700],
-      }),
-    },
-    grey: {
-      ...gray,
-    },
-    divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4),
-    background: {
-      default: 'hsl(0, 0%, 99%)',
-      paper: 'hsl(220, 35%, 97%)',
-      ...(mode === 'dark' && { default: gray[900], paper: 'hsl(220, 30%, 7%)' }),
-    },
-    text: {
-      primary: gray[800],
-      secondary: gray[600],
-      warning: orange[400],
-      ...(mode === 'dark' && { primary: 'hsl(0, 0%, 100%)', secondary: gray[400] }),
-    },
-    action: {
-      hover: alpha(gray[200], 0.2),
-      selected: `${alpha(gray[200], 0.3)}`,
-      ...(mode === 'dark' && {
-        hover: alpha(gray[600], 0.2),
-        selected: alpha(gray[600], 0.3),
-      }),
-    },
-  },
-  typography: {
-    fontFamily: ['"Inter", "sans-serif"'].join(','),
-    h1: {
-      fontSize: customTheme.typography.pxToRem(48),
-      fontWeight: 600,
-      lineHeight: 1.2,
-      letterSpacing: -0.5,
-    },
-    h2: {
-      fontSize: customTheme.typography.pxToRem(36),
-      fontWeight: 600,
-      lineHeight: 1.2,
-    },
-    h3: {
-      fontSize: customTheme.typography.pxToRem(30),
-      lineHeight: 1.2,
-    },
-    h4: {
-      fontSize: customTheme.typography.pxToRem(24),
-      fontWeight: 600,
-      lineHeight: 1.5,
-    },
-    h5: {
-      fontSize: customTheme.typography.pxToRem(20),
-      fontWeight: 600,
-    },
-    h6: {
-      fontSize: customTheme.typography.pxToRem(18),
-      fontWeight: 600,
-    },
-    subtitle1: {
-      fontSize: customTheme.typography.pxToRem(18),
-    },
-    subtitle2: {
-      fontSize: customTheme.typography.pxToRem(14),
-      fontWeight: 500,
-    },
-    body1: {
-      fontSize: customTheme.typography.pxToRem(14),
-    },
-    body2: {
-      fontSize: customTheme.typography.pxToRem(14),
-      fontWeight: 400,
-    },
-    caption: {
-      fontSize: customTheme.typography.pxToRem(12),
-      fontWeight: 400,
-    },
-  },
-  shape: {
-    borderRadius: 8,
-  },
-  shadows: [
-    'none',
-    ...(mode === 'dark'
-      ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px'
-      : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px'),
-  ],
-});
+        contrastText: brand[50],
+        ...(mode === 'dark' && {
+          contrastText: brand[50],
+          light: brand[300],
+          main: brand[400],
+          dark: brand[700],
+        }),
+      },
+      info: {
+        light: brand[100],
+        main: brand[300],
+        dark: brand[600],
+        contrastText: gray[50],
+        ...(mode === 'dark' && {
+          contrastText: brand[300],
+          light: brand[500],
+          main: brand[700],
+          dark: brand[900],
+        }),
+      },
+      warning: {
+        light: orange[300],
+        main: orange[400],
+        dark: orange[800],
+        ...(mode === 'dark' && {
+          light: orange[400],
+          main: orange[500],
+          dark: orange[700],
+        }),
+      },
+      error: {
+        light: red[300],
+        main: red[400],
+        dark: red[800],
+        ...(mode === 'dark' && {
+          light: red[400],
+          main: red[500],
+          dark: red[700],
+        }),
+      },
+      success: {
+        light: green[300],
+        main: green[400],
+        dark: green[800],
+        ...(mode === 'dark' && {
+          light: green[400],
+          main: green[500],
+          dark: green[700],
+        }),
+      },
+      grey: {
+        ...gray,
+      },
+      divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4),
+      background: {
+        default: 'hsl(0, 0%, 99%)',
+        paper: 'hsl(220, 35%, 97%)',
+        ...(mode === 'dark' && { default: gray[900], paper: 'hsl(220, 30%, 7%)' }),
+      },
+      text: {
+        primary: gray[800],
+        secondary: gray[600],
+        warning: orange[400],
+        ...(mode === 'dark' && {
+          primary: 'hsl(0, 0%, 100%)',
+          secondary: gray[400],
+        }),
+      },
+      action: {
+        hover: alpha(gray[200], 0.2),
+        selected: `${alpha(gray[200], 0.3)}`,
+        ...(mode === 'dark' && {
+          hover: alpha(gray[600], 0.2),
+          selected: alpha(gray[600], 0.3),
+        }),
+      },
+    },
+    typography: {
+      fontFamily: ['"Inter", "sans-serif"'].join(','),
+      h1: {
+        fontSize: defaultTheme.typography.pxToRem(48),
+        fontWeight: 600,
+        lineHeight: 1.2,
+        letterSpacing: -0.5,
+      },
+      h2: {
+        fontSize: defaultTheme.typography.pxToRem(36),
+        fontWeight: 600,
+        lineHeight: 1.2,
+      },
+      h3: {
+        fontSize: defaultTheme.typography.pxToRem(30),
+        lineHeight: 1.2,
+      },
+      h4: {
+        fontSize: defaultTheme.typography.pxToRem(24),
+        fontWeight: 600,
+        lineHeight: 1.5,
+      },
+      h5: {
+        fontSize: defaultTheme.typography.pxToRem(20),
+        fontWeight: 600,
+      },
+      h6: {
+        fontSize: defaultTheme.typography.pxToRem(18),
+        fontWeight: 600,
+      },
+      subtitle1: {
+        fontSize: defaultTheme.typography.pxToRem(18),
+      },
+      subtitle2: {
+        fontSize: defaultTheme.typography.pxToRem(14),
+        fontWeight: 500,
+      },
+      body1: {
+        fontSize: defaultTheme.typography.pxToRem(14),
+      },
+      body2: {
+        fontSize: defaultTheme.typography.pxToRem(14),
+        fontWeight: 400,
+      },
+      caption: {
+        fontSize: defaultTheme.typography.pxToRem(12),
+        fontWeight: 400,
+      },
+    },
+    shape: {
+      borderRadius: 8,
+    },
+    shadows: customShadows,
+  };
+};