Skip to content

[docs-infra] Add spacing and contrast improvements #41191

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
danilo-leal merged 14 commits into from
Feb 21, 2024
Merged

[docs-infra] Add spacing and contrast improvements #41191

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
b2c45f9
fine-tune spacing on the product switcher
danilo-leal Feb 19, 2024
28b4299
improve contrast of the nav items chips
danilo-leal Feb 19, 2024
f0242c0
fix cut focus-visible outline styles
danilo-leal Feb 19, 2024
dfab403
simplify and enhance the diamond sponsors TOC section
danilo-leal Feb 19, 2024
bbcb60b
add focus-visible styles to Markdown links
danilo-leal Feb 19, 2024
a20687b
remove unused imports
danilo-leal Feb 19, 2024
d4da63c
simplify Diamond Sponsors styles more
danilo-leal Feb 19, 2024
fda8f94
Merge branch 'master' into stray-docs-infra-improvements
danilo-leal Feb 20, 2024
bbb5df4
fix light theme color in the dark mode theme
danilo-leal Feb 20, 2024
f4c8b9c
lint: Link import
danilo-leal Feb 20, 2024
111c870
rearrage focus-visible styles declarations
danilo-leal Feb 20, 2024
62e0c65
simplifying and small fine-tunes to the nav drawer item
danilo-leal Feb 20, 2024
186537f
fine-tune diamond sponsors colors
danilo-leal Feb 20, 2024
062881a
remove repeated focus-visible style declarations in favor of a global…
danilo-leal Feb 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 3 additions & 7 deletions docs/src/modules/components/AppNavDrawer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,19 +64,15 @@ function ProductDrawerButton(props) {
onClick={handleClick}
endIcon={<ArrowDropDownRoundedIcon fontSize="small" sx={{ ml: -0.5 }} />}
sx={(theme) => ({
py: 0.1,
minWidth: 0,
p: '1px 8px',
fontSize: theme.typography.pxToRem(13),
fontWeight: theme.typography.fontWeightMedium,
color: (theme.vars || theme).palette.primary[600],
'& svg': {
ml: -0.6,
width: 18,
height: 18,
},
'& > span': {
ml: '4px',
},
...theme.applyDarkStyles({
color: (theme.vars || theme).palette.primary[300],
}),
Expand Down Expand Up @@ -114,7 +110,7 @@ function ProductIdentifier(props) {
<Box sx={{ flexGrow: 1 }}>
<Typography
sx={(theme) => ({
ml: 1.5,
ml: 1,
color: (theme.vars || theme).palette.grey[600],
fontSize: theme.typography.pxToRem(11),
fontWeight: 700,
Expand Down Expand Up @@ -402,7 +398,7 @@ export default function AppNavDrawer(props) {
aria-label={t('goToHome')}
sx={{
pr: '12px',
mr: '4px',
mr: '8px',
borderRight: '1px solid',
borderColor: 'divider',
}}
Expand Down
8 changes: 4 additions & 4 deletions docs/src/modules/components/AppNavDrawerItem.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -211,7 +211,7 @@ const StyledLi = styled('li', { shouldForwardProp: (prop) => prop !== 'depth' })

export const sxChip = (color) => [
(theme) => ({
ml: 1.5,
ml: 1,
fontSize: theme.typography.pxToRem(10),
fontWeight: 'semiBold',
textTransform: 'uppercase',
Expand All @@ -220,18 +220,18 @@ export const sxChip = (color) => [
border: 1,
borderColor: (theme.vars || theme).palette[color][300],
bgcolor: alpha(theme.palette[color][100], 0.5),
color: (theme.vars || theme).palette[color][700],
color: (theme.vars || theme).palette[color][900],
'&:hover': {
bgcolor: alpha(theme.palette[color][100], 0.5),
},
'& .MuiChip-label': {
px: 0.6,
px: '4px',
},
}),
(theme) =>
theme.applyDarkStyles({
borderColor: alpha(theme.palette[color][800], 0.5),
bgcolor: alpha(theme.palette[color][800], 0.5),
bgcolor: alpha(theme.palette[color][900], 0.5),
color: (theme.vars || theme).palette[color][300],
'&:hover': {
bgcolor: alpha(theme.palette[color][900], 0.5),
Expand Down
2 changes: 1 addition & 1 deletion docs/src/modules/components/AppTableOfContents.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import DiamondSponsors from 'docs/src/modules/components/DiamondSponsors';
const Nav = styled('nav')(({ theme }) => ({
top: 'var(--MuiDocs-header-height)',
marginTop: 'var(--MuiDocs-header-height)',
paddingLeft: 2, // Fix truncated focus outline style
paddingLeft: 6, // Fix truncated focus outline style
position: 'sticky',
height: 'calc(100vh - var(--MuiDocs-header-height))',
overflowY: 'auto',
Expand Down
249 changes: 110 additions & 139 deletions docs/src/modules/components/DiamondSponsors.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,9 @@ import * as React from 'react';
import { styled, alpha } from '@mui/material/styles';
import Box from '@mui/material/Box';
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';
import DiamondOutlinedIcon from '@mui/icons-material/DiamondOutlined';
import { useTranslate } from 'docs/src/modules/utils/i18n';
import Link from 'docs/src/modules/components/Link';
import { useTranslate } from 'docs/src/modules/utils/i18n';

const NativeLink = styled('a')(({ theme }) => ({
boxSizing: 'border-box', // TODO have CssBaseline in the Next.js layout
Expand All @@ -26,6 +24,10 @@ const NativeLink = styled('a')(({ theme }) => ({
'&:hover': {
backgroundColor: (theme.vars || theme).palette.grey[50],
},
'&:focus-visible': {
outline: `3px solid ${alpha((theme.vars || theme).palette.primary[500], 0.5)}`,
outlineOffset: '2px',
},
'& img': {
display: 'inline-block',
},
Expand All @@ -44,147 +46,116 @@ export default function DiamondSponsors() {
const t = useTranslate();

return (
<Stack
spacing={0.5}
direction="column"
sx={{
mt: 1.5,
pt: 1.5,
borderTop: '1px solid',
borderColor: 'divider',
}}
>
<Button
Copy link
Member

@alexfauquette alexfauquette Feb 20, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Feels a bit weird to have nothing do show a distinction between the nav and sponsors. And the explaination about what are those logo can only be inferred from the "Become a Diamond sponsor" after them.

image

Copy link
Collaborator Author

@danilo-leal danilo-leal Feb 20, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I felt like having both the "Become a Diamond Sponsor" and "Diamond Sponsor" buttons was redundant, particularly as they were taking to, essentially, the same place. I experimented with adding a "Sponsors" nav label, sort of similar to the "Contents" on the top of the TOC, but felt like visitors would be able to understand what these logos are even without a label?

component="a"
href="/material-ui/discover-more/backers/"
<Stack direction="column" mt={2} spacing={1} useFlexGap>
<NativeLink
data-ga-event-category="sponsor"
data-ga-event-action="docs-premium"
data-ga-event-label="octopus.com"
href="https://octopus.com/?utm_source=materialui&utm_medium=referral"
rel="noopener sponsored"
target="_blank"
>
<Box
component="img"
height="25px"
width="116px"
src="/static/sponsors/octopus-light.svg"
alt="octopus"
title="Repeatable, reliable deployments"
loading="lazy"
sx={(theme) =>
theme.applyDarkStyles({
content: `url(/static/sponsors/octopus-dark.svg)`,
})
}
/>
</NativeLink>
<NativeLink
data-ga-event-category="sponsor"
data-ga-event-action="docs-premium"
data-ga-event-label="doit.com"
href="https://www.doit.com/flexsave/?utm_source=materialui&utm_medium=referral"
rel="noopener sponsored"
target="_blank"
>
<Box
component="img"
height="29px"
width="70px"
src="/static/sponsors/doit-light.svg"
alt="doit"
title="Management Platform for Google Cloud and AWS"
loading="lazy"
sx={(theme) =>
theme.applyDarkStyles({
content: `url(/static/sponsors/doit-dark.svg)`,
})
}
/>
</NativeLink>
<NativeLink
data-ga-event-category="sponsor"
data-ga-event-action="docs-premium"
data-ga-event-label="marblism.com"
href="https://www.marblism.com/?utm_source=mui"
rel="noopener sponsored"
target="_blank"
rel="noopener nofollow"
size="small"
startIcon={<DiamondOutlinedIcon />}
sx={{
width: 'fit-content',
fontSize: (theme) => theme.typography.pxToRem(12.5),
'& svg': {
marginRight: 0.5,
width: 16,
height: 16,
},
}}
>
{t('diamondSponsors')}
</Button>
<Stack spacing={1}>
<NativeLink
data-ga-event-category="sponsor"
data-ga-event-action="docs-premium"
data-ga-event-label="octopus.com"
href="https://octopus.com/?utm_source=materialui&utm_medium=referral"
rel="noopener sponsored"
target="_blank"
>
<Box
component="img"
height="25px"
width="116px"
src="/static/sponsors/octopus-light.svg"
alt="octopus"
title="Repeatable, reliable deployments"
loading="lazy"
sx={(theme) =>
theme.applyDarkStyles({
content: `url(/static/sponsors/octopus-dark.svg)`,
})
}
/>
</NativeLink>
<NativeLink
data-ga-event-category="sponsor"
data-ga-event-action="docs-premium"
data-ga-event-label="doit.com"
href="https://www.doit.com/flexsave/?utm_source=materialui&utm_medium=referral"
rel="noopener sponsored"
target="_blank"
>
<Box
component="img"
height="29px"
width="70px"
src="/static/sponsors/doit-light.svg"
alt="doit"
title="Management Platform for Google Cloud and AWS"
loading="lazy"
sx={(theme) =>
theme.applyDarkStyles({
content: `url(/static/sponsors/doit-dark.svg)`,
})
}
/>
</NativeLink>
<NativeLink
data-ga-event-category="sponsor"
data-ga-event-action="docs-premium"
data-ga-event-label="marblism.com"
href="https://www.marblism.com/?utm_source=mui"
rel="noopener sponsored"
target="_blank"
>
<Box
component="img"
height="27px"
width="90px"
src="/static/sponsors/marblism-light.svg"
alt="marblism"
title="AI web app generation"
loading="lazy"
sx={(theme) =>
theme.applyDarkStyles({
content: `url(/static/sponsors/marblism-dark.svg)`,
})
}
/>
</NativeLink>
<Link
href="/material-ui/discover-more/backers/#diamond-sponsors"
sx={(theme) => ({
width: '100%',
p: 1,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
borderRadius: 1,
border: '1px dashed',
transition: theme.transitions.create(['color', 'border-color', 'background-color']),
backgroundColor: alpha(theme.palette.primary[50], 0.5),
borderColor: (theme.vars || theme).palette.primary[200],
<Box
component="img"
height="27px"
width="90px"
src="/static/sponsors/marblism-light.svg"
alt="marblism"
title="AI web app generation"
loading="lazy"
sx={(theme) =>
theme.applyDarkStyles({
content: `url(/static/sponsors/marblism-dark.svg)`,
})
}
/>
</NativeLink>
<Link
href="/material-ui/discover-more/backers/#diamond-sponsors"
sx={(theme) => ({
p: 1.5,
width: '100%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
borderRadius: 1,
border: '1px dashed',
transition: theme.transitions.create(['color', 'border-color', 'background-color']),
backgroundColor: alpha(theme.palette.primary[50], 0.5),
borderColor: (theme.vars || theme).palette.primary[200],
boxShadow: `inset 0 1px 1px ${
(theme.vars || theme).palette.grey[50]
}, 0 1px 2px ${alpha(theme.palette.primary[100], 0.8)}`,
'&:hover': {
backgroundColor: alpha(theme.palette.primary[100], 0.5),
borderColor: (theme.vars || theme).palette.primary[300],
},
...theme.applyDarkStyles({
backgroundColor: alpha(theme.palette.primary[700], 0.1),
borderColor: alpha(theme.palette.primary[400], 0.2),
boxShadow: `inset 0 1px 1px ${
(theme.vars || theme).palette.grey[50]
}, 0 1px 2px ${alpha(theme.palette.primary[100], 0.8)}`,
(theme.vars || theme).palette.primaryDark[800]
}, 0 1px 0.5px ${(theme.vars || theme).palette.common.black}`,
'&:hover': {
backgroundColor: alpha(theme.palette.primary[100], 0.5),
borderColor: (theme.vars || theme).palette.primary[300],
backgroundColor: alpha(theme.palette.primary[700], 0.2),
borderColor: (theme.vars || theme).palette.primary[400],
},
...theme.applyDarkStyles({
backgroundColor: alpha(theme.palette.primary[400], 0.05),
borderColor: alpha(theme.palette.primary[300], 0.3),
boxShadow: `inset 0 1px 1px ${
(theme.vars || theme).palette.primaryDark[800]
}, 0 1px 0.5px ${(theme.vars || theme).palette.common.black}`,
'&:hover': {
backgroundColor: alpha(theme.palette.primary[400], 0.1),
borderColor: (theme.vars || theme).palette.primary[400],
},
}),
})}
>
<Typography variant="caption" fontWeight="semiBold" textAlign="center">
{t('becomeADiamondSponsor')}
</Typography>
{/* <Typography variant="caption" fontWeight="regular" color="text.secondary">
{t('diamondSponsorVacancies')}
</Typography> */}
</Link>
</Stack>
}),
})}
>
<Typography variant="caption" fontWeight="semiBold" textAlign="center">
{t('becomeADiamondSponsor')}
</Typography>
{/* <Typography variant="caption" fontWeight="regular" color="text.secondary">
{t('diamondSponsorVacancies')}
</Typography> */}
</Link>
</Stack>
);
}
Loading