diff --git a/docs/data/material/guides/material-3-components/material-3-components.md b/docs/data/material/guides/material-3-components/material-3-components.md index 1ca78344777972..da7cab6b47660c 100644 --- a/docs/data/material/guides/material-3-components/material-3-components.md +++ b/docs/data/material/guides/material-3-components/material-3-components.md @@ -10,7 +10,7 @@ MD3 implementation is a work in progress, targeted for completion in late 2024. 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 @@ pnpm add @mui/material-next @emotion/react @emotion/styled -**Peer dependencies** +#### Peer dependencies -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 @@ Please note that [react](https://www.npmjs.com/package/react) and [react-dom](ht }, ``` -**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 @@ You can use Material Design's [Figma MD3 Theme Builder](https://www.figma.com/co ## 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). diff --git a/docs/src/components/action/Highlighter.tsx b/docs/src/components/action/Highlighter.tsx index d4f580bc3c9938..712f694a45b3ac 100644 --- a/docs/src/components/action/Highlighter.tsx +++ b/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': { diff --git a/docs/src/components/action/InfoCard.tsx b/docs/src/components/action/InfoCard.tsx index 0a95f99dd6bb51..d40e24a6e71bee 100644 --- a/docs/src/components/action/InfoCard.tsx +++ b/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`, }), })} > diff --git a/docs/src/components/action/Item.tsx b/docs/src/components/action/Item.tsx index 41d673bdb21d42..af82e7ee62ff41 100644 --- a/docs/src/components/action/Item.tsx +++ b/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({ {icon} - + )} - + ); } diff --git a/docs/src/components/action/NpmCopyButton.tsx b/docs/src/components/action/NpmCopyButton.tsx index 761a099f86c1db..e74acf024aae3b 100644 --- a/docs/src/components/action/NpmCopyButton.tsx +++ b/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( diff --git a/docs/src/components/footer/EmailSubscribe.tsx b/docs/src/components/footer/EmailSubscribe.tsx index 7341e971b5284b..98bfdac6ee1d21 100644 --- a/docs/src/components/footer/EmailSubscribe.tsx +++ b/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 }) { if (form.status === 'sent') { return ( } 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: ( - ({ - color: 'success.700', - ...theme.applyDarkStyles({ - color: 'success.600', - }), - })} - /> - ), - }} > - - Thanks for subscribing! - Go to your email and open the confirmation email to confirm your subscription. @@ -117,27 +105,26 @@ export default function EmailSubscribe({ sx }: { sx?: SxProps }) { 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, }, @@ -145,19 +132,17 @@ export default function EmailSubscribe({ sx }: { sx?: SxProps }) { (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 }) { {form.status === 'failure' && ( ({ - color: 'warning.800', + mt: 1, + fontWeight: 'semiBold', + color: 'error.700', ...theme.applyDarkStyles({ - color: 'warning.500', + color: 'error.400', }), })} > diff --git a/docs/src/components/header/HeaderNavBar.tsx b/docs/src/components/header/HeaderNavBar.tsx index e485d2ff82bf23..8711e66a16f856 100644 --- a/docs/src/components/header/HeaderNavBar.tsx +++ b/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], - }, }, }, }), diff --git a/docs/src/components/header/HeaderNavDropdown.tsx b/docs/src/components/header/HeaderNavDropdown.tsx index 25845353beafd1..8474a58c071c95 100644 --- a/docs/src/components/header/HeaderNavDropdown.tsx +++ b/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)', }), })} > *': { minWidth: { xs: '100%', md: '0%' }, }, @@ -64,7 +65,6 @@ export default function GetStartedButtons(props: GetStartedButtonsProps) { endIcon={} sx={{ flexShrink: 0, - mr: { xs: 0, md: 1.5 }, mb: { xs: 2, md: 0 }, }} > diff --git a/docs/src/components/productBaseUI/components/BaseMenuDemo.tsx b/docs/src/components/productBaseUI/components/BaseMenuDemo.tsx index 24d94a2c55b53f..057b2c75d9c5fe 100644 --- a/docs/src/components/productBaseUI/components/BaseMenuDemo.tsx +++ b/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); } } `; diff --git a/docs/src/components/productMaterial/MaterialComponents.tsx b/docs/src/components/productMaterial/MaterialComponents.tsx index a5c36ba2be2bc4..81a7036fac7d60 100644 --- a/docs/src/components/productMaterial/MaterialComponents.tsx +++ b/docs/src/components/productMaterial/MaterialComponents.tsx @@ -308,6 +308,7 @@ export default function MaterialComponents() { ({ 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) { ({ + transition: 'all 100ms ease-in', + '&:active': { transform: 'scale(.98)' }, + '&:focus-visible': { + outline: `3px solid ${alpha(theme.palette.primary[500], 0.5)}`, + outlineOffset: '2px', + }, + }), }, }, MuiButton: { @@ -464,17 +475,21 @@ export function getThemedComponents(): ThemeOptions { }, styleOverrides: { root: ({ theme, ownerState }) => ({ + transition: 'all 120ms ease-in', + '&:active': { transform: 'scale(.96)' }, ...(ownerState.size === 'large' && { ...theme.typography.body1, lineHeight: 21 / 16, - fontWeight: theme.typography.fontWeightBold, - padding: theme.spacing('12px', '12px', '12px', '14px'), - minHeight: 0, + padding: theme.spacing('8px', '12px', '10px', '14px'), + fontWeight: theme.typography.fontWeightSemiBold, + borderRadius: 10, '& > span': { transition: '0.2s', marginLeft: 4 }, '&:hover > span': { transform: 'translateX(2px)' }, }), ...(ownerState.size === 'medium' && { - padding: theme.spacing('8px', '12px'), + padding: theme.spacing('6px', '12px', '8px', '12px'), + fontWeight: theme.typography.fontWeightSemiBold, + borderRadius: 8, '& > span': { transition: '0.2s', marginLeft: 4 }, '&:hover > span': { transform: 'translateX(2px)' }, }), @@ -500,47 +515,50 @@ export function getThemedComponents(): ThemeOptions { }), ...(ownerState.variant === 'outlined' && ownerState.color === 'secondary' && { - color: (theme.vars || theme).palette.text.secondary, + color: (theme.vars || theme).palette.text.primary, backgroundColor: alpha(theme.palette.primaryDark[50], 0.3), borderColor: (theme.vars || theme).palette.primaryDark[100], - boxShadow: `0px 2px 1px ${alpha( - theme.palette.grey[200], - 0.3, - )}, inset 0px 2px 3px ${alpha(theme.palette.primaryDark[100], 0.2)}`, + boxShadow: `${alpha(theme.palette.grey[50], 0.5)} 0 2px 0.5px inset, ${alpha( + theme.palette.grey[100], + 0.8, + )} 0 -2px 0 inset, ${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`, '&:hover': { background: (theme.vars || theme).palette.primaryDark[50], }, ...theme.applyDarkStyles({ color: (theme.vars || theme).palette.primaryDark[100], - borderColor: (theme.vars || theme).palette.primaryDark[600], - backgroundColor: (theme.vars || theme).palette.primaryDark[700], - boxShadow: `0px 2px 1px ${theme.palette.common.black}, inset 0px 2px 3px ${alpha( - theme.palette.primaryDark[500], - 0.3, - )}`, + borderColor: alpha(theme.palette.primaryDark[600], 0.5), + backgroundColor: alpha(theme.palette.primaryDark[700], 0.4), + boxShadow: `${alpha(theme.palette.primaryDark[600], 0.2)} 0 2px 0 inset, ${alpha( + theme.palette.primaryDark[900], + 0.5, + )} 0 -3px 1px inset, ${theme.palette.common.black} 0 1px 2px 0`, '&:hover': { - backgroundColor: (theme.vars || theme).palette.primaryDark[600], + backgroundColor: (theme.vars || theme).palette.primaryDark[700], }, }), }), ...(ownerState.variant === 'outlined' && ownerState.color === 'primary' && { - color: (theme.vars || theme).palette.primary[500], + color: (theme.vars || theme).palette.primary[600], backgroundColor: alpha(theme.palette.primary[50], 0.3), borderColor: (theme.vars || theme).palette.primary[100], - boxShadow: `0px 1px 1px ${alpha( + boxShadow: `${theme.palette.primary[50]} 0 2px 0.5px inset, ${alpha( theme.palette.primary[100], - 0.5, - )}, inset 0px 4px 2px ${alpha(theme.palette.primary[100], 0.1)}`, + 0.2, + )} 0 -3px 0 inset, ${alpha(theme.palette.primary[100], 0.3)} 0 1px 2px 0`, '&:hover': { background: (theme.vars || theme).palette.primary[50], borderColor: (theme.vars || theme).palette.primary[300], }, ...theme.applyDarkStyles({ color: (theme.vars || theme).palette.primary[200], - borderColor: (theme.vars || theme).palette.primary[900], + borderColor: alpha(theme.palette.primary[900], 0.7), backgroundColor: alpha(theme.palette.primary[900], 0.2), - boxShadow: '0px 2px 2px #0B0D0E, inset 0px 4px 4px rgba(20, 25, 31, 0.3)', + boxShadow: `${alpha(theme.palette.primary[900], 0.1)} 0 2px 1px inset, ${alpha( + theme.palette.common.black, + 0.5, + )} 0 -3px 0 inset, ${theme.palette.common.black} 0 1px 2px 0`, '&:hover': { backgroundColor: (theme.vars || theme).palette.primary[900], borderColor: (theme.vars || theme).palette.primary[700], @@ -550,36 +568,18 @@ export function getThemedComponents(): ThemeOptions { ...(ownerState.variant === 'contained' && ownerState.color === 'primary' && { color: '#FFF', - backgroundImage: `linear-gradient(180deg, ${alpha( - theme.palette.primary[300], - 0.5, - )} 0%, ${alpha(theme.palette.primary[600], 0.5)} 100%)`, - boxShadow: `0px 1px 2px ${alpha( - theme.palette.primary[900], - 0.1, - )}, inset 0px 0px 0px 1px ${ - theme.palette.primary[600] - }, inset 0px 0px 0px 2px rgba(255, 255, 255, 0.2), 0px 2px 1px ${alpha( - theme.palette.primary[200], - 0.3, - )} `, + textShadow: `0 1px 1px ${alpha(theme.palette.common.black, 0.6)}`, + backgroundImage: `linear-gradient(180deg, ${theme.palette.primary[500]} 0%, ${theme.palette.primary[700]} 100%)`, + boxShadow: `${theme.palette.primary[400]} 0 2px 0.5px inset, ${alpha( + theme.palette.primary[800], + 0.6, + )} 0 -3px 1px inset, ${alpha(theme.palette.common.black, 0.1)} 0 2px 4px 0`, '&:hover': { - backgroundColor: (theme.vars || theme).palette.primary[600], + backgroundImage: `linear-gradient(180deg, ${theme.palette.primary[600]} 0%, ${theme.palette.primary[800]} 100%)`, }, - textShadow: `0px 1px 1px ${alpha(theme.palette.grey[900], 0.3)}`, ...theme.applyDarkStyles({ - backgroundImage: `linear-gradient(180deg, ${alpha( - theme.palette.primary[400], - 0.2, - )} 0%, ${alpha(theme.palette.primary[700], 0.8)} 100%)`, - boxShadow: `0px 1px 2px ${alpha( - theme.palette.primary[900], - 0.1, - )}, inset 0px 0px 0px 1px ${ - theme.palette.primary[600] - }, inset 0px 0px 0px 2px rgba(255, 255, 255, 0.1), 0px 2px 1px ${ - theme.palette.common.black - } `, + backgroundColor: (theme.vars || theme).palette.primary[600], + boxShadow: `${theme.palette.primary[400]} 0 2px 0.5px inset, ${theme.palette.primary[800]} 0 -3px 1px inset, ${theme.palette.common.black} 0 2px 4px 0`, }), }), }), @@ -850,7 +850,7 @@ export function getThemedComponents(): ThemeOptions { underline: 'none', }, styleOverrides: { - root: { + root: ({ theme }) => ({ fontWeight: 700, display: 'inline-flex', alignItems: 'center', @@ -860,7 +860,11 @@ export function getThemedComponents(): ThemeOptions { '& svg:last-child': { marginLeft: 2, }, - }, + '&:focus-visible': { + outline: `3px solid ${alpha(theme.palette.primary[500], 0.5)}`, + outlineOffset: '2px', + }, + }), }, variants: [ { @@ -1086,6 +1090,10 @@ export function getThemedComponents(): ThemeOptions { borderColor: (theme.vars || theme).palette.primary[200], boxShadow: `0px 4px 16px ${(theme.vars || theme).palette.grey[200]}`, }, + '&:focus-visible': { + outline: `3px solid ${alpha(theme.palette.primary[500], 0.5)}`, + outlineOffset: '2px', + }, }, ':is(a&), :is(button&)': { '&:hover': { diff --git a/docs/src/modules/components/AppNavDrawerItem.js b/docs/src/modules/components/AppNavDrawerItem.js index 93d96fd15fbfe6..85b75564982e48 100644 --- a/docs/src/modules/components/AppNavDrawerItem.js +++ b/docs/src/modules/components/AppNavDrawerItem.js @@ -139,7 +139,7 @@ const Item = styled( }, }), '&.Mui-focusVisible': { - backgroundColor: (theme.vars || theme).palette.action.focus, + backgroundColor: (theme.vars || theme).palette.divider, }, [theme.breakpoints.up('md')]: { paddingTop: 4, diff --git a/docs/src/modules/components/AppSearch.js b/docs/src/modules/components/AppSearch.js index 5b1650f7d13274..4de63710815fef 100644 --- a/docs/src/modules/components/AppSearch.js +++ b/docs/src/modules/components/AppSearch.js @@ -62,6 +62,10 @@ const SearchButton = styled('button')(({ theme }) => [ background: (theme.vars || theme).palette.grey[100], borderColor: (theme.vars || theme).palette.grey[300], }, + '&:focus-visible': { + outline: `3px solid ${alpha(theme.palette.primary[500], 0.5)}`, + outlineOffset: '2px', + }, }, theme.applyDarkStyles({ backgroundColor: alpha(theme.palette.primaryDark[700], 0.4), diff --git a/docs/src/modules/components/ComponentLinkHeader.js b/docs/src/modules/components/ComponentLinkHeader.js index b16baa3f1256ac..1be2351a21016b 100644 --- a/docs/src/modules/components/ComponentLinkHeader.js +++ b/docs/src/modules/components/ComponentLinkHeader.js @@ -19,8 +19,15 @@ const Root = styled('ul')({ display: 'flex', flexWrap: 'wrap', gap: 8, - '& .MuiChip-root .MuiChip-iconSmall': { - marginLeft: 4, + '& .MuiChip-root': { + height: 26, + padding: '0 8px', + gap: 6, + '& .MuiChip-label': { padding: 0 }, + '& .MuiChip-iconSmall': { + margin: 0, + fontSize: 14, + }, }, }); diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js index 3fc459c9da8585..15250e4312f19a 100644 --- a/docs/src/modules/components/Demo.js +++ b/docs/src/modules/components/Demo.js @@ -240,36 +240,20 @@ const DemoRootMaterial = styled('div', { }), /* Mostly meant for introduction demos. */ ...(bg === 'gradient' && { + overflow: 'auto', padding: theme.spacing(20, 8), border: `1px solid`, borderColor: (theme.vars || theme).palette.divider, - overflow: 'auto', - backgroundColor: alpha(theme.palette.primary[50], 0.5), backgroundClip: 'padding-box', - backgroundImage: `radial-gradient(at 51% 52%, ${alpha( - theme.palette.primary[50], - 0.5, - )} 0px, transparent 50%), - radial-gradient(at 80% 0%, #FFFFFF 0px, transparent 20%), - radial-gradient(at 0% 95%, ${alpha(theme.palette.primary[100], 0.3)}, transparent 40%), - radial-gradient(at 0% 20%, ${ - (theme.vars || theme).palette.primary[50] - } 0px, transparent 50%), - radial-gradient(at 93% 85%, ${alpha( - theme.palette.primary[100], - 0.2, - )} 0px, transparent 50%);`, + 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%)`, ...theme.applyDarkStyles({ - borderColor: alpha(theme.palette.primaryDark[500], 0.7), - backgroundColor: alpha(theme.palette.primary[900], 0.1), - backgroundImage: `radial-gradient(at 51% 52%, ${alpha( - theme.palette.primaryDark[700], - 0.5, - )} 0px, transparent 50%), - radial-gradient(at 80% 0%, ${alpha(theme.palette.primary[900], 0.3)} 0px, transparent 50%), - radial-gradient(at 0% 95%, ${alpha(theme.palette.primary[900], 0.5)} 0px, transparent 50%), - radial-gradient(at 0% 5%, ${alpha(theme.palette.primary[900], 0.5)} 0px, transparent 35%), - radial-gradient(at 93% 85%, ${alpha(theme.palette.primary[900], 0.3)} 0px, transparent 50%);`, + borderColor: (theme.vars || theme).palette.divider, + backgroundColor: '#00111A', + backgroundImage: + 'radial-gradient(140% 120% at 50% 8%, transparent 40%, #051729 70%, #041425 100%)', }), }), })); diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js index fec99e40a86ea0..0b255ea5254d9e 100644 --- a/docs/src/modules/components/MarkdownElement.js +++ b/docs/src/modules/components/MarkdownElement.js @@ -10,7 +10,7 @@ import { const Root = styled('div')( ({ theme }) => ({ ...lightTheme.typography.body1, - lineHeight: 1.5625, // Increased compared to the 1.5 default to make the docs easier to read. + lineHeight: 1.6, // Increased compared to the 1.5 default to make the docs easier to read. color: `var(--muidocs-palette-text-primary, ${lightTheme.palette.text.primary})`, '& strong': { color: `var(--muidocs-palette-text-primary, ${lightTheme.palette.text.primary})`, @@ -72,7 +72,7 @@ const Root = styled('div')( '& .description': { ...lightTheme.typography.subtitle1, fontWeight: 400, - margin: '0 0 28px', + margin: '0 0 24px', }, '& .component-tabs': { margin: '0 0 40px', diff --git a/docs/src/modules/components/MaterialFreeTemplatesCollection.js b/docs/src/modules/components/MaterialFreeTemplatesCollection.js index 26f99861d83f73..05c068fc5a63c0 100644 --- a/docs/src/modules/components/MaterialFreeTemplatesCollection.js +++ b/docs/src/modules/components/MaterialFreeTemplatesCollection.js @@ -115,7 +115,15 @@ export default function Templates() { title={layout.title} rel="nofollow" target="_blank" - sx={{ height: 0, pt: '65%' }} + sx={(theme) => ({ + height: 0, + pt: '65%', + '&:focus-visible': { + borderRadius: 1, + outline: `3px solid ${alpha(theme.palette.primary[500], 0.5)}`, + outlineOffset: '-8px', + }, + })} /> {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */} @@ -140,7 +148,7 @@ export default function Templates() { bgcolor: alpha(theme.palette.primary[50], 0.5), backdropFilter: 'blur(4px)', opacity: 0, - '&:hover, &:focus': { + '&:hover, &:focus-visible': { opacity: 1, }, ...theme.applyDarkStyles({