[docs-infra] Improve demo container and related components design

docs/pages/experiments/docs/demos.md

@@ -1,19 +1,30 @@
 # Demos
 
-<p class="description">Demos</p>
+<p class="description">The different variants of demo containers we have in the docs.</p>
 
 ## Standard demo
 
+"Standard" refers to when no background is explicitly defined.
+So, it renders the "outlined" background variant.
+
 {{"demo": "DemoInDocs.js"}}
 
-## "bg": "inline" demo
+## "bg": "outlined"
+
+{{"demo": "DemoInDocs.js", "bg": "outlined"}}
+
+## "bg": "inline"
 
 {{"demo": "DemoInDocs.js", "bg": "inline"}}
 
 ## "bg": true
 
 {{"demo": "DemoInDocs.js", "bg": true}}
 
+## "bg": gradient
+
+{{"demo": "DemoInDocs.js", "bg": "gradient"}}
+
 ## "hideToolbar": true
 
 {{"demo": "DemoInDocs.js", "hideToolbar": true}}

docs/src/modules/components/AppNavDrawerItem.js

@@ -144,7 +144,7 @@ const Item = styled(
     theme.applyDarkStyles({
       ...color,
       '&::before': {
-        background: alpha(theme.palette.primaryDark[700], 0.6),
+        background: alpha(theme.palette.primaryDark[500], 0.3),
       },
       '&.app-drawer-active': {
         color: (theme.vars || theme).palette.primary[300],

docs/src/modules/components/Demo.js

@@ -210,6 +210,11 @@ const DemoRootMaterial = styled('div', {
     ...(bg === 'inline' && {
       padding: theme.spacing(0),
     }),
+    ...(bg === 'gradient' && {
+      padding: theme.spacing(12, 8),
+      borderLeftWidth: 1,
+      borderRightWidth: 1,
+    }),
   },
   /* Isolate the demo with an outline. */
   ...(bg === 'outlined' && {
@@ -218,7 +223,6 @@ const DemoRootMaterial = styled('div', {
     border: `1px solid ${(theme.vars || theme).palette.divider}`,
     borderLeftWidth: 0,
     borderRightWidth: 0,
-    borderBottomWidth: 0,
     ...theme.applyDarkStyles({
       backgroundColor: alpha(theme.palette.primaryDark[700], 0.1),
     }),
@@ -232,28 +236,25 @@ const DemoRootMaterial = styled('div', {
   /* Prepare the background to display an inner elevation. */
   ...(bg === true && {
     padding: theme.spacing(3),
-    backgroundColor: alpha(theme.palette.grey[50], 0.6),
+    backgroundColor: alpha((theme.vars || theme).palette.grey[50], 0.5),
     border: `1px solid ${(theme.vars || theme).palette.divider}`,
     ...theme.applyDarkStyles({
-      backgroundColor: alpha(theme.palette.primaryDark[700], 0.15),
+      backgroundColor: alpha((theme.vars || theme).palette.primaryDark[700], 0.4),
     }),
   }),
   /* Mostly meant for introduction demos. */
   ...(bg === 'gradient' && {
     overflow: 'auto',
-    padding: theme.spacing(20, 8),
-    border: `1px solid`,
-    borderColor: (theme.vars || theme).palette.divider,
+    padding: theme.spacing(4, 2),
+    border: `1px solid ${(theme.vars || theme).palette.divider}`,
+    borderLeftWidth: 0,
+    borderRightWidth: 0,
     backgroundClip: 'padding-box',
-    backgroundColor: alpha(theme.palette.primary[50], 0.5),
-    backgroundImage: `radial-gradient(140% 108% at 50% 8%, transparent 40%, ${
-      theme.palette.primary[50]
-    } 70%, ${alpha(theme.palette.primary[100], 0.2)} 100%)`,
+    backgroundColor: alpha(theme.palette.primary[50], 0.2),
+    backgroundImage: `radial-gradient(120% 140% at 50% 10%, transparent 40%, ${alpha((theme.vars || theme).palette.primary[100], 0.2)} 70%)`,
     ...theme.applyDarkStyles({
-      borderColor: (theme.vars || theme).palette.divider,
-      backgroundColor: '#00111A',
-      backgroundImage:
-        'radial-gradient(140% 120% at 50% 8%, transparent 40%, #051729 70%, #041425 100%)',
+      backgroundColor: (theme.vars || theme).palette.primaryDark[900],
+      backgroundImage: `radial-gradient(120% 140% at 50% 10%, transparent 30%, ${alpha((theme.vars || theme).palette.primary[900], 0.3)} 80%)`,
     }),
   }),
 }));
@@ -332,6 +333,9 @@ const DemoCodeViewer = styled(HighlightedCode)(() => ({
     maxWidth: 'initial',
     borderRadius: 0,
   },
+  '& .MuiCode-copy': {
+    display: 'none',
+  },
 }));
 
 const AnchorLink = styled('div')({

docs/src/modules/components/DemoEditor.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import SimpleCodeEditor from 'react-simple-code-editor';
 import Box from '@mui/material/Box';
 import { NoSsr } from '@mui/base/NoSsr';
-import { styled, useTheme } from '@mui/material/styles';
+import { styled, alpha, useTheme } from '@mui/material/styles';
 import prism from '@mui/internal-markdown/prism';
 import MarkdownElement from 'docs/src/modules/components/MarkdownElement';
 import CodeCopyButton from 'docs/src/modules/components/CodeCopyButton';
@@ -20,10 +20,10 @@ const StyledMarkdownElement = styled(MarkdownElement)(({ theme }) => [
       border: `1px solid ${(theme.vars || theme).palette.divider}`,
       colorScheme: 'dark',
       '&:hover': {
-        boxShadow: `0 0 0 3px ${(theme.vars || theme).palette.primary.light}`,
+        boxShadow: `0 0 0 3px ${alpha((theme.vars || theme).palette.primary[500], 0.5)}`,
       },
       '&:focus-within': {
-        boxShadow: `0 0 0 2px ${(theme.vars || theme).palette.primary.main}`,
+        boxShadow: `0 0 0 2px ${alpha((theme.vars || theme).palette.primary[500], 0.5)}`,
       },
       [theme.breakpoints.up('sm')]: {
         borderRadius: '0 0 12px 12px',
@@ -35,16 +35,13 @@ const StyledMarkdownElement = styled(MarkdownElement)(({ theme }) => [
       maxWidth: 'initial',
       maxHeight: 'initial',
     },
+    '& .MuiCode-copy': {
+      display: 'none',
+    },
   },
   theme.applyDarkStyles({
     '& .scrollContainer': {
       borderColor: (theme.vars || theme).palette.divider,
-      '&:hover': {
-        boxShadow: `0 0 0 3px ${(theme.vars || theme).palette.primaryDark[300]}`,
-      },
-      '&:focus-within': {
-        boxShadow: `0 0 0 2px ${(theme.vars || theme).palette.primaryDark[400]}`,
-      },
     },
   }),
 ]) as any;

docs/src/modules/components/DemoToolbarRoot.ts

@@ -11,11 +11,12 @@ const DemoToolbarRoot = styled('div', {
   {
     display: 'none',
     [theme.breakpoints.up('sm')]: {
+      top: 0,
       display: 'block',
-      border: `1px solid ${(theme.vars || theme).palette.divider}`,
       marginTop: demoOptions.bg === 'inline' ? theme.spacing(1) : -1,
-      top: 0,
       padding: theme.spacing(0.5, 1),
+      border: `1px solid ${(theme.vars || theme).palette.divider}`,
+      borderTopWidth: demoOptions.bg === 'inline' ? 1 : 0,
       backgroundColor: alpha(theme.palette.grey[50], 0.2),
       borderRadius: openDemoSource ? 0 : '0 0 12px 12px',
       transition: theme.transitions.create('border-radius'),

docs/src/modules/components/MaterialUIExampleCollection.js

@@ -11,85 +11,85 @@ import CloudRoundedIcon from '@mui/icons-material/CloudRounded';
 const examples = [
   {
     name: 'Next.js App Router',
-    label: 'View JS example',
-    tsLabel: 'View TS example',
+    label: 'View JavaScript',
+    tsLabel: 'View TypeScript',
     link: 'https://github.com/mui/material-ui/tree/next/examples/material-ui-nextjs',
     tsLink: 'https://github.com/mui/material-ui/tree/next/examples/material-ui-nextjs-ts',
     src: '/static/images/examples/next.svg',
   },
-  {
-    name: 'Vite.js',
-    label: 'View JS example',
-    tsLabel: 'View TS example',
-    link: 'https://github.com/mui/material-ui/tree/next/examples/material-ui-vite',
-    tsLink: 'https://github.com/mui/material-ui/tree/next/examples/material-ui-vite-ts',
-    src: '/static/images/examples/vite.svg',
-  },
   {
     name: 'Next.js Pages Router',
-    label: 'View JS example',
-    tsLabel: 'View TS example',
+    label: 'View JavaScript',
+    tsLabel: 'View TypeScript',
     link: 'https://github.com/mui/material-ui/tree/next/examples/material-ui-nextjs-pages-router',
     tsLink:
       'https://github.com/mui/material-ui/tree/next/examples/material-ui-nextjs-pages-router-ts',
     src: '/static/images/examples/next.svg',
   },
+  {
+    name: 'Vite.js',
+    label: 'View JavaScript',
+    tsLabel: 'View TypeScript',
+    link: 'https://github.com/mui/material-ui/tree/next/examples/material-ui-vite',
+    tsLink: 'https://github.com/mui/material-ui/tree/next/examples/material-ui-vite-ts',
+    src: '/static/images/examples/vite.svg',
+  },
   {
     name: 'Remix',
-    label: 'View TS example',
+    label: 'View TypeScript',
     link: 'https://github.com/mui/material-ui/tree/next/examples/material-ui-remix-ts',
     src: '/static/images/examples/remix.svg',
   },
-  {
-    name: 'Tailwind CSS + CRA',
-    label: 'View TS example',
-    link: 'https://github.com/mui/material-ui/tree/next/examples/material-ui-cra-tailwind-ts',
-    src: '/static/images/examples/tailwindcss.svg',
-  },
   {
     name: 'Create React App',
-    label: 'View JS example',
-    tsLabel: 'View TS example',
+    label: 'View JavaScript',
+    tsLabel: 'View TypeScript',
     link: 'https://github.com/mui/material-ui/tree/next/examples/material-ui-cra',
     tsLink: 'https://github.com/mui/material-ui/tree/next/examples/material-ui-cra-ts',
     src: '/static/images/examples/cra.svg',
   },
+  {
+    name: 'Tailwind CSS + Create React App',
+    label: 'View TypeScript',
+    link: 'https://github.com/mui/material-ui/tree/next/examples/material-ui-cra-tailwind-ts',
+    src: '/static/images/examples/tailwindcss.svg',
+  },
   {
     name: 'styled-components',
-    label: 'View JS example',
-    tsLabel: 'View TS example',
+    label: 'View JavaScript',
+    tsLabel: 'View TypeScript',
     link: 'https://github.com/mui/material-ui/tree/next/examples/material-ui-cra-styled-components',
     tsLink:
       'https://github.com/mui/material-ui/tree/next/examples/material-ui-cra-styled-components-ts',
     src: '/static/images/examples/styled.png',
   },
   {
     name: 'Preact',
-    label: 'View JS example',
+    label: 'View JavaScript',
     link: 'https://github.com/mui/material-ui/tree/next/examples/material-ui-preact',
     src: '/static/images/examples/preact.svg',
   },
   {
     name: 'CDN',
-    label: 'View JS example',
+    label: 'View JavaScript',
     link: 'https://github.com/mui/material-ui/tree/next/examples/material-ui-via-cdn',
     src: <CloudRoundedIcon />,
   },
   {
     name: 'Express.js (server-rendered)',
-    label: 'View JS example',
+    label: 'View JavaScript',
     link: 'https://github.com/mui/material-ui/tree/next/examples/material-ui-express-ssr',
     src: '/static/images/examples/express.png',
   },
   {
     name: 'Gatsby',
-    label: 'View JS example',
+    label: 'View JavaScript',
     link: 'https://github.com/mui/material-ui/tree/next/examples/material-ui-gatsby',
     src: '/static/images/examples/gatsby.svg',
   },
   {
     name: 'React-admin',
-    label: 'View TS example',
+    label: 'View TypeScript',
     link: 'https://github.com/marmelab/material-ui-react-admin',
     src: '/static/images/examples/reactadmin.svg',
   },
@@ -107,12 +107,7 @@ export default function MaterialUIExampleCollection() {
               display: 'flex',
               alignItems: 'center',
               gap: 2,
-              background: `${(theme.vars || theme).palette.gradients.linearSubtle}`,
-              ...theme.applyDarkStyles({
-                bgcolor: 'primaryDark.900',
-                background: `${(theme.vars || theme).palette.gradients.linearSubtle}`,
-                borderColor: 'primaryDark.700',
-              }),
+              background: `${(theme.vars || theme).palette.gradients.radioSubtle}`,
             })}
           >
             <Avatar
@@ -159,11 +154,11 @@ export default function MaterialUIExampleCollection() {
                       variant="caption"
                       sx={{
                         display: { xs: 'none', sm: 'block' },
-                        opacity: 0.2,
-                        mr: 0.75,
+                        opacity: 0.1,
+                        mr: 1,
                       }}
                     >
-                      &bull;
+                      /
                     </Typography>
                     <Link
                       href={example.tsLink}

packages/mui-docs/src/InfoCard/InfoCard.tsx

@@ -23,11 +23,11 @@ export function GlowingIconContainer({ icon }: GlowingIconContainerProps) {
         border: '1px solid',
         borderColor: 'primary.200',
         bgcolor: 'primary.50',
-        boxShadow: `0px 1px 6px 0px ${alpha(theme.palette.primary[500], 0.2)}, 0px 2px 12px 0px rgba(234, 237, 241, 0.3) inset`,
+        boxShadow: `0px 0 0 2px ${alpha(theme.palette.primary[500], 0.1)}, 0px 2px 12px 0px rgba(234, 237, 241, 0.3) inset`,
         ...theme.applyDarkStyles({
           borderColor: alpha(theme.palette.primary[400], 0.25),
-          bgcolor: alpha(theme.palette.primary[900], 0.25),
-          boxShadow: `0 2px 6px 0 ${alpha(theme.palette.primary[600], 0.3)}, 0px 2px 12px 0px rgba(0, 0, 0, 0.25) inset`,
+          bgcolor: alpha(theme.palette.primary[900], 0.4),
+          boxShadow: `0 0 0 2px ${alpha(theme.palette.primary[600], 0.1)}, 0px 2px 12px 0px rgba(0, 0, 0, 0.25) inset`,
         }),
       })}
     >

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

@@ -821,7 +821,7 @@ export function getThemedComponents(): ThemeOptions {
           root: ({ theme }) => ({
             borderColor: (theme.vars || theme).palette.grey[100],
             ...theme.applyDarkStyles({
-              borderColor: alpha(theme.palette.primaryDark[700], 0.8),
+              borderColor: alpha(theme.palette.primaryDark[500], 0.3),
             }),
           }),
         },