[docs-infra] Add stray design adjustments

docs/data/material/guides/material-3-components/material-3-components.md

@@ -10,7 +10,7 @@
 You can try out Material UI's MD3 components as they're developed using the `@mui/material-next` package.
 
 :::warning
-The MD3 components are currently in alpha and subject to change.
+The Material 3 components are currently in alpha and subject to change.
 :::
 
 ## Supported components
@@ -44,11 +44,11 @@
 
 </codeblock>
 
-**Peer dependencies**
+#### Peer dependencies
 
 <!-- #react-peer-version -->
 
-Please note that [react](https://www.npmjs.com/package/react) and [react-dom](https://www.npmjs.com/package/react-dom) are peer dependencies too:
+Please note that [react](https://www.npmjs.com/package/react) and [react-dom](https://www.npmjs.com/package/react-dom) are peer dependencies, meaning you should ensure they are installed before installing the Material UI Next package.
 
 ```json
 "peerDependencies": {
@@ -57,7 +57,7 @@
 },
 ```
 
-**Roboto font**
+#### Roboto font
 
 Material UI uses the [Roboto](https://fonts.google.com/specimen/Roboto) font by default.
 Add it to your project via Fontsource, or with the Google Fonts CDN.
@@ -129,5 +129,5 @@
 
 ## Stable release
 
-The stable release of the MD3 components is tentatively targeted for Q4 2024 in Material UI v7.
-To follow the progress or contribute to the project, check out the [Material 3 GitHub issue](https://github.com/mui/material-ui/issues/29345).
+The stable release of the MD3 components is tentatively targeted for Q4 2024 in Material UI v7.
+To follow the progress or contribute to the project, check out [the Material 3 GitHub issue](https://github.com/mui/material-ui/issues/29345).

docs/src/components/action/Highlighter.tsx

@@ -52,9 +52,10 @@ export default function Highlighter({
           ...(selected && {
             bgcolor: `${alpha(theme.palette.primary[50], 0.5)}`,
             borderColor: 'primary.300',
-            boxShadow: `0px 1px 4px ${
-              (theme.vars || theme).palette.primary[200]
-            }, inset 0px 2px 4px ${alpha(theme.palette.primary[100], 0.5)}`,
+            boxShadow: `${alpha(theme.palette.primary[100], 0.4)} 0 -3px 1px inset, ${alpha(
+              theme.palette.primary[100],
+              0.3,
+            )} 0 2px 4px 0`,
             color: 'primary.500',
           }),
           ...(!selected && {
@@ -69,24 +70,24 @@ export default function Highlighter({
           ...theme.applyDarkStyles({
             color: 'primary.800',
             ...((!disableBorder || selected) && {
-              borderColor: `${alpha(theme.palette.primaryDark[600], 0.3)}`,
+              borderColor: alpha(theme.palette.primaryDark[600], 0.3),
             }),
             ...(!selected && {
               '&:hover, &:focus': {
-                bgcolor: `${alpha(theme.palette.primary[800], 0.1)}`,
-                borderColor: `${alpha(theme.palette.primary[500], 0.3)}`,
+                bgcolor: alpha(theme.palette.primary[800], 0.1),
+                borderColor: alpha(theme.palette.primary[500], 0.3),
                 '@media (hover: none)': {
                   bgcolor: 'transparent',
                 },
               },
             }),
             ...(selected && {
-              bgcolor: `${alpha(theme.palette.primary[800], 0.3)}`,
-              borderColor: 'primary.700',
+              bgcolor: alpha(theme.palette.primary[800], 0.2),
+              borderColor: alpha(theme.palette.primary[700], 0.8),
               color: 'primary.300',
-              boxShadow: `0px 1px 4px ${
-                (theme.vars || theme).palette.primary[900]
-              }, inset 0px 2px 4px ${(theme.vars || theme).palette.primaryDark[800]}`,
+              boxShadow: `${alpha(theme.palette.common.black, 0.5)} 0 -3px 1px inset, ${
+                theme.palette.common.black
+              } 0 2px 3px 0`,
             }),
           }),
           '&.Mui-disabled': {

docs/src/components/action/InfoCard.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { alpha } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Paper from '@mui/material/Paper';
 import Typography from '@mui/material/Typography';
@@ -22,13 +23,17 @@ export function GlowingIconContainer({ icon }: GlowingIconContainerProps) {
         border: '1px solid',
         borderColor: 'primary.200',
         bgcolor: 'primary.50',
-        boxShadow:
-          '0px 1px 6px 0px rgba(194, 224, 255, 1), 0px 2px 30px 0px rgba(234, 237, 241, 0.3) inset',
+        boxShadow: `0px 1px 6px 0px ${alpha(
+          theme.palette.primary[500],
+          0.4,
+        )}, 0px 2px 30px 0px rgba(234, 237, 241, 0.3) inset`,
         ...theme.applyDarkStyles({
-          borderColor: 'primary.400',
+          borderColor: alpha(theme.palette.primary[400], 0.6),
           bgcolor: 'primary.900',
-          boxShadow:
-            '0px 1px 6px 0px rgba(0, 89, 178, 1), 0px 2px 30px 0px rgba(0, 0, 0, 0.25) inset',
+          boxShadow: `0 2px 6px 0 ${alpha(
+            theme.palette.primary[600],
+            0.4,
+          )}, 0px 2px 30px 0px rgba(0, 0, 0, 0.25) inset`,
         }),
       })}
     >

docs/src/components/action/Item.tsx

@@ -14,7 +14,6 @@ export function Group({
       {...props}
       sx={{
         maxWidth: rowLayout ? 'none' : { md: 500 },
-        overflow: 'auto',
         display: { xs: 'grid', sm: rowLayout ? 'flex' : 'grid' },
         justifyContent: { xs: 'start', sm: rowLayout ? 'center' : null },
         gap: 1,
@@ -95,7 +94,7 @@ export default function Item({
       <Box component="span" sx={{ mr: 2, lineHeight: 0 }}>
         {icon}
       </Box>
-      <span>
+      <Box sx={{ flexWrap: 'wrap' }}>
         <Typography
           component="span"
           color="text.primary"
@@ -116,7 +115,7 @@ export default function Item({
             {description}
           </Typography>
         )}
-      </span>
+      </Box>
     </Box>
   );
 }

docs/src/components/action/NpmCopyButton.tsx

@@ -2,7 +2,7 @@
 import * as React from 'react';
 import copy from 'clipboard-copy';
 import { SxProps } from '@mui/system';
-import { styled, Theme } from '@mui/material/styles';
+import { styled, alpha, Theme } from '@mui/material/styles';
 import ContentCopyRounded from '@mui/icons-material/ContentCopyRounded';
 import CheckRounded from '@mui/icons-material/CheckRounded';
 
@@ -55,6 +55,10 @@ const Button = styled('button')(({ theme }) => ({
   '&:focus, &:hover svg': {
     opacity: 1,
   },
+  '&:focus-visible': {
+    outline: `3px solid ${alpha(theme.palette.primary[500], 0.5)}`,
+    outlineOffset: '2px',
+  },
 }));
 
 export default function NpmCopyButton(

docs/src/components/footer/EmailSubscribe.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import { SxProps } from '@mui/system';
 import { Theme, styled, alpha } from '@mui/material/styles';
 import Alert from '@mui/material/Alert';
-import AlertTitle from '@mui/material/AlertTitle';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import FormLabel from '@mui/material/FormLabel';
@@ -56,34 +55,23 @@ export default function EmailSubscribe({ sx }: { sx?: SxProps<Theme> }) {
   if (form.status === 'sent') {
     return (
       <Alert
+        icon={<CheckCircleRoundedIcon fontSize="small" />}
         severity="success"
         sx={[
           (theme) => ({
-            maxWidth: { sm: 400 },
+            fontWeight: 'medium',
             bgcolor: 'success.50',
+            border: '1px solid',
+            borderColor: 'success.200',
+            color: 'success.900',
             ...theme.applyDarkStyles({
-              bgcolor: 'primaryDark.700',
+              color: 'success.200',
+              bgcolor: alpha(theme.palette.success[700], 0.1),
+              borderColor: alpha(theme.palette.success[600], 0.3),
             }),
           }),
-          ...(Array.isArray(sx) ? sx : [sx]),
         ]}
-        iconMapping={{
-          success: (
-            <CheckCircleRoundedIcon
-              fontSize="small"
-              sx={(theme: Theme) => ({
-                color: 'success.700',
-                ...theme.applyDarkStyles({
-                  color: 'success.600',
-                }),
-              })}
-            />
-          ),
-        }}
       >
-        <AlertTitle sx={{ typography: 'body2', fontWeight: 700 }}>
-          Thanks for subscribing!
-        </AlertTitle>
         Go to your email and open the <strong>confirmation email</strong> to confirm your
         subscription.
       </Alert>
@@ -117,47 +105,44 @@ export default function EmailSubscribe({ sx }: { sx?: SxProps<Theme> }) {
           inputProps={{ required: true }}
           sx={[
             (theme) => ({
+              typography: 'body1',
+              flexGrow: 1,
               minWidth: 220,
               borderRadius: 1,
               border: '1px solid',
-              bgcolor: '#fff',
+              borderColor: 'grey.200',
+              bgcolor: '#FFF',
               boxShadow: `inset 0 1px 2px ${
                 (theme.vars || theme).palette.grey[50]
-              }, 0 1px 0.5px ${alpha(theme.palette.grey[100], 0.6)}`,
-              borderColor: 'grey.200',
-              typography: 'body2',
+              }, 0 2px .5px ${alpha(theme.palette.grey[100], 0.5)}`,
               '&:hover': {
                 borderColor: 'grey.300',
-                boxShadow: `inset 0 1px 2px ${(theme.vars || theme).palette.grey[50]}, 0 1px 2px ${
-                  (theme.vars || theme).palette.grey[100]
-                }`,
+                boxShadow: `inset 0 1px 2px ${(theme.vars || theme).palette.grey[100]}`,
               },
               [`&.${inputBaseClasses.focused}`]: {
                 boxShadow: `0 0 0 3px ${(theme.vars || theme).palette.primary[200]}`,
-                borderColor: 'primary.300',
+                borderColor: 'primary.500',
               },
               [`& .${inputBaseClasses.input}`]: {
-                borderRadius: `calc(${theme.shape.borderRadius}px - 1px)`,
+                borderRadius: theme.shape.borderRadius,
                 py: 1,
                 px: 1.5,
               },
             }),
             (theme) =>
               theme.applyDarkStyles({
                 bgcolor: 'primaryDark.800',
+                borderColor: alpha(theme.palette.primaryDark[600], 0.8),
                 boxShadow: `inset 0 1px 1px ${
                   (theme.vars || theme).palette.primaryDark[900]
-                }, 0 1px 0.5px ${(theme.vars || theme).palette.common.black}`,
-                borderColor: 'primaryDark.600',
+                }, 0 2px .5px ${(theme.vars || theme).palette.common.black}`,
                 '&:hover': {
-                  borderColor: 'primaryDark.400',
-                  boxShadow: `inset 0 1px 1px ${
-                    (theme.vars || theme).palette.primaryDark[900]
-                  }, 0 1px 2px ${(theme.vars || theme).palette.common.black}`,
+                  borderColor: 'primaryDark.500',
+                  boxShadow: `inset 0 1px 2px ${(theme.vars || theme).palette.common.black}`,
                 },
                 [`&.${inputBaseClasses.focused}`]: {
                   boxShadow: `0 0 0 3px ${(theme.vars || theme).palette.primary[800]}`,
-                  borderColor: 'primary.600',
+                  borderColor: 'primary.400',
                 },
               }),
           ]}
@@ -169,9 +154,11 @@ export default function EmailSubscribe({ sx }: { sx?: SxProps<Theme> }) {
       {form.status === 'failure' && (
         <FormHelperText
           sx={(theme) => ({
-            color: 'warning.800',
+            mt: 1,
+            fontWeight: 'semiBold',
+            color: 'error.700',
             ...theme.applyDarkStyles({
-              color: 'warning.500',
+              color: 'error.400',
             }),
           })}
         >

docs/src/components/header/HeaderNavBar.tsx

@@ -47,10 +47,8 @@ const Navigation = styled('nav')(({ theme }) => [
           },
         },
         '&:focus-visible': {
-          outline: 0,
-          color: (theme.vars || theme).palette.grey[900],
-          backgroundColor: (theme.vars || theme).palette.grey[50],
-          borderColor: (theme.vars || theme).palette.primary[300],
+          outline: `3px solid ${alpha(theme.palette.primary[500], 0.5)}`,
+          outlineOffset: '2px',
         },
       },
     },
@@ -63,10 +61,6 @@ const Navigation = styled('nav')(({ theme }) => [
           backgroundColor: alpha(theme.palette.primaryDark[700], 0.8),
           borderColor: (theme.vars || theme).palette.divider,
         },
-        '&:focus-visible': {
-          color: (theme.vars || theme).palette.primary[50],
-          backgroundColor: (theme.vars || theme).palette.primaryDark[600],
-        },
       },
     },
   }),

docs/src/components/header/HeaderNavDropdown.tsx

@@ -162,16 +162,16 @@ export default function HeaderNavDropdown() {
             top: 56,
             left: 0,
             right: 0,
-            boxShadow: `0px 4px 20px rgba(170, 180, 190, 0.3)`,
+            boxShadow: `0px 16px 20px rgba(170, 180, 190, 0.3)`,
             ...theme.applyDarkStyles({
-              boxShadow: '0px 4px 20px rgba(0, 0, 0, 0.8)',
+              boxShadow: '0px 16px 20px rgba(0, 0, 0, 0.8)',
             }),
           })}
         >
           <Box
             sx={{
               p: 2,
-              bgcolor: 'background.paper',
+              bgcolor: 'background.default',
               maxHeight: 'calc(100vh - 56px)',
               overflow: 'auto',
             }}

docs/src/components/home/GetStartedButtons.tsx

@@ -47,6 +47,7 @@ export default function GetStartedButtons(props: GetStartedButtonsProps) {
         sx={{
           display: 'flex',
           flexWrap: { xs: 'wrap', md: 'nowrap' },
+          gap: 1.5,
           '&& > *': {
             minWidth: { xs: '100%', md: '0%' },
           },
@@ -64,7 +65,6 @@ export default function GetStartedButtons(props: GetStartedButtonsProps) {
           endIcon={<KeyboardArrowRightRounded />}
           sx={{
             flexShrink: 0,
-            mr: { xs: 0, md: 1.5 },
             mb: { xs: 2, md: 0 },
           }}
         >

docs/src/components/productBaseUI/components/BaseMenuDemo.tsx

@@ -47,6 +47,7 @@ const buttonStyles = `
 
     &:hover {
       background: var(--muidocs-palette-primaryDark-800);
+      border-color: var(--muidocs-palette-primaryDark-500);
     }
   }
 `;

docs/src/components/productMaterial/MaterialComponents.tsx

@@ -308,6 +308,7 @@ export default function MaterialComponents() {
               </CssVarsProvider>
             </Frame.Demo>
             <Frame.Info
+              data-mui-color-scheme="dark"
               sx={{
                 minHeight: 180,
                 maxHeight: demo === 'Table' ? 260 : 'none',

docs/src/layouts/HeroContainer.tsx

@@ -55,7 +55,7 @@ export default function HeroContainer(props: HeroContainerProps) {
       sx={[
         (theme) => ({
           minWidth: '50vw',
-          minHeight: 500,
+          minHeight: { xs: 'auto', sm: 500 },
           height: 'calc(100vh - 120px)',
           maxHeight: { md: 700, xl: 850 },
           borderBottomLeftRadius: 12,
@@ -94,7 +94,7 @@ export default function HeroContainer(props: HeroContainerProps) {
       <Box sx={{ overflow: 'hidden' }}>
         <Container
           sx={{
-            minHeight: 500,
+            minHeight: { xs: 'auto', sm: 500 },
             height: { md: 'calc(100vh - 120px)' },
             maxHeight: { md: 700, xl: 850 },
             transition: '0.3s',
@@ -139,7 +139,7 @@ export default function HeroContainer(props: HeroContainerProps) {
       <Container
         sx={{
           pt: { xs: 8, sm: 0 },
-          minHeight: 500,
+          minHeight: { xs: 'auto', sm: 500 },
           height: { md: 'calc(100vh - 120px)' },
           maxHeight: { md: 700, xl: 850 },
           transition: '0.3s',