From c234fa015d3a7fbf148e0a6e6368e2c5c8973430 Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Tue, 9 Apr 2024 12:19:50 -0300
Subject: [PATCH 1/7] adjust Demo container styles

---
 docs/pages/experiments/docs/demos.md          | 12 +++++--
 docs/src/modules/components/Demo.js           | 32 +++++++++++--------
 .../src/modules/components/DemoToolbarRoot.ts |  5 +--
 3 files changed, 31 insertions(+), 18 deletions(-)

diff --git a/docs/pages/experiments/docs/demos.md b/docs/pages/experiments/docs/demos.md
index 9334e1a03b1097..1930964d5a7923 100644
--- a/docs/pages/experiments/docs/demos.md
+++ b/docs/pages/experiments/docs/demos.md
@@ -1,19 +1,27 @@
 # Demos
 
-<p class="description">Demos</p>
+<p class="description">The different variants of demo containers we have in the docs.</p>
 
 ## Standard demo
 
 {{"demo": "DemoInDocs.js"}}
 
-## "bg": "inline" demo
+## "bg": "inline"
 
 {{"demo": "DemoInDocs.js", "bg": "inline"}}
 
+## "bg": "outlined"
+
+{{"demo": "DemoInDocs.js", "bg": "outlined"}}
+
 ## "bg": true
 
 {{"demo": "DemoInDocs.js", "bg": true}}
 
+## "bg": gradient
+
+{{"demo": "DemoInDocs.js", "bg": "gradient"}}
+
 ## "hideToolbar": true
 
 {{"demo": "DemoInDocs.js", "hideToolbar": true}}
diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js
index 1d6eb268fa9092..59b60bd9b26fe8 100644
--- a/docs/src/modules/components/Demo.js
+++ b/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': {
+    visibility: 'hidden',
+  },
 }));
 
 const AnchorLink = styled('div')({
diff --git a/docs/src/modules/components/DemoToolbarRoot.ts b/docs/src/modules/components/DemoToolbarRoot.ts
index 984115f71f2f7d..071aea7f1df146 100644
--- a/docs/src/modules/components/DemoToolbarRoot.ts
+++ b/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'),

From e89f4c144b18ba354a3c04ee4928ffe89328d72c Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Tue, 9 Apr 2024 12:20:01 -0300
Subject: [PATCH 2/7] standardize focus styles for the Demo Editor

---
 docs/src/modules/components/DemoEditor.tsx | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/docs/src/modules/components/DemoEditor.tsx b/docs/src/modules/components/DemoEditor.tsx
index a73d74799d6c35..3a6932222481d7 100644
--- a/docs/src/modules/components/DemoEditor.tsx
+++ b/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': {
+      visibility: 'hidden',
+    },
   },
   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;

From 5dcf58abc3ba0bc3923850e9f69f10ec50d7bf2d Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Tue, 9 Apr 2024 12:20:21 -0300
Subject: [PATCH 3/7] make divider color consistent

---
 docs/src/modules/components/AppNavDrawerItem.js | 2 +-
 packages/mui-docs/src/branding/brandingTheme.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/src/modules/components/AppNavDrawerItem.js b/docs/src/modules/components/AppNavDrawerItem.js
index e626a11fe7d7e0..f4e9371c3489bb 100644
--- a/docs/src/modules/components/AppNavDrawerItem.js
+++ b/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],
diff --git a/packages/mui-docs/src/branding/brandingTheme.ts b/packages/mui-docs/src/branding/brandingTheme.ts
index e901fab77e47b9..7cda32366b9313 100644
--- a/packages/mui-docs/src/branding/brandingTheme.ts
+++ b/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),
             }),
           }),
         },

From 0eb2c8b9cf5aa567b90d8d02e5d77ca127de3ec6 Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Tue, 9 Apr 2024 12:20:36 -0300
Subject: [PATCH 4/7] stray adjustments to the Material UI Examples page and
 info card

---
 .../components/MaterialUIExampleCollection.js | 69 +++++++++----------
 packages/mui-docs/src/InfoCard/InfoCard.tsx   |  6 +-
 2 files changed, 35 insertions(+), 40 deletions(-)

diff --git a/docs/src/modules/components/MaterialUIExampleCollection.js b/docs/src/modules/components/MaterialUIExampleCollection.js
index d53eddf8147e59..2c213f6d8074be 100644
--- a/docs/src/modules/components/MaterialUIExampleCollection.js
+++ b/docs/src/modules/components/MaterialUIExampleCollection.js
@@ -11,53 +11,53 @@ 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',
@@ -65,31 +65,31 @@ const examples = [
   },
   {
     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}
diff --git a/packages/mui-docs/src/InfoCard/InfoCard.tsx b/packages/mui-docs/src/InfoCard/InfoCard.tsx
index 754a22b43e5c77..56ec11e1f94486 100644
--- a/packages/mui-docs/src/InfoCard/InfoCard.tsx
+++ b/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`,
         }),
       })}
     >

From 3314e7eb228de299a2db329fe3bbc2d2ba0df5a0 Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Wed, 10 Apr 2024 08:36:54 -0300
Subject: [PATCH 5/7] use display instead of visibility for hiding the copy
 button

---
 docs/src/modules/components/Demo.js        | 2 +-
 docs/src/modules/components/DemoEditor.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js
index 59b60bd9b26fe8..ed82ae5d5aa386 100644
--- a/docs/src/modules/components/Demo.js
+++ b/docs/src/modules/components/Demo.js
@@ -334,7 +334,7 @@ const DemoCodeViewer = styled(HighlightedCode)(() => ({
     borderRadius: 0,
   },
   '& .MuiCode-copy': {
-    visibility: 'hidden',
+    display: 'none',
   },
 }));
 
diff --git a/docs/src/modules/components/DemoEditor.tsx b/docs/src/modules/components/DemoEditor.tsx
index 3a6932222481d7..b73c500fae1727 100644
--- a/docs/src/modules/components/DemoEditor.tsx
+++ b/docs/src/modules/components/DemoEditor.tsx
@@ -36,7 +36,7 @@ const StyledMarkdownElement = styled(MarkdownElement)(({ theme }) => [
       maxHeight: 'initial',
     },
     '& .MuiCode-copy': {
-      visibility: 'hidden',
+      display: 'none',
     },
   },
   theme.applyDarkStyles({

From e22c6e8dca0698ee89fb20fcff9203d0423db1cf Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Thu, 11 Apr 2024 00:25:23 -0300
Subject: [PATCH 6/7] run CI checks again


From c74ba1930b9e16c1371026bdfd25c681f995cbfd Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Thu, 11 Apr 2024 07:00:41 -0300
Subject: [PATCH 7/7] add clarification about the "Standard" variant

---
 docs/pages/experiments/docs/demos.md | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/docs/pages/experiments/docs/demos.md b/docs/pages/experiments/docs/demos.md
index 1930964d5a7923..5a630ed5a063fb 100644
--- a/docs/pages/experiments/docs/demos.md
+++ b/docs/pages/experiments/docs/demos.md
@@ -4,16 +4,19 @@
 
 ## Standard demo
 
-{{"demo": "DemoInDocs.js"}}
-
-## "bg": "inline"
+"Standard" refers to when no background is explicitly defined.
+So, it renders the "outlined" background variant.
 
-{{"demo": "DemoInDocs.js", "bg": "inline"}}
+{{"demo": "DemoInDocs.js"}}
 
 ## "bg": "outlined"
 
 {{"demo": "DemoInDocs.js", "bg": "outlined"}}
 
+## "bg": "inline"
+
+{{"demo": "DemoInDocs.js", "bg": "inline"}}
+
 ## "bg": true
 
 {{"demo": "DemoInDocs.js", "bg": true}}