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 all 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
37 changes: 13 additions & 24 deletions docs/src/modules/components/AppNavDrawerItem.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ const Item = styled(
...(subheader && {
marginTop: theme.spacing(1),
textTransform: 'uppercase',
letterSpacing: '.08rem',
letterSpacing: '.1rem',
fontWeight: theme.typography.fontWeightBold,
fontSize: theme.typography.pxToRem(11),
'&::before': {
Expand Down Expand Up @@ -101,26 +101,14 @@ const Item = styled(
color: (theme.vars || theme).palette.primary[600],
backgroundColor: (theme.vars || theme).palette.primary[50],
'&:hover': {
backgroundColor: theme.vars
? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))`
: alpha(
theme.palette.primary.main,
theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity,
),
backgroundColor: alpha(theme.palette.primary[100], 0.8),
color: (theme.vars || theme).palette.primary[700],
'@media (hover: none)': {
backgroundColor: theme.vars
? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})`
: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
},
},
'&.Mui-focusVisible': {
backgroundColor: theme.vars
? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))`
: alpha(
theme.palette.primary.main,
theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity,
),
},
'&::before': {
background: (theme.vars || theme).palette.primary[400],
},
Expand All @@ -138,19 +126,16 @@ const Item = styled(
},
},
}),
'&.Mui-focusVisible': {
backgroundColor: (theme.vars || theme).palette.divider,
},
[theme.breakpoints.up('md')]: {
paddingTop: 4,
paddingBottom: 4,
},
'& .ItemButtonIcon': {
marginRight: '5px',
marginRight: '6px',
color: (theme.vars || theme).palette.primary.main,
},
'&:hover .ItemButtonIcon': {
color: (theme.vars || theme).palette.text.primary,
color: (theme.vars || theme).palette.primary.light,
'@media (hover: none)': {
color: (theme.vars || theme).palette.primary.main,
},
Expand All @@ -164,6 +149,10 @@ const Item = styled(
'&.app-drawer-active': {
color: (theme.vars || theme).palette.primary[300],
backgroundColor: (theme.vars || theme).palette.primaryDark[700],
'&:hover': {
backgroundColor: (theme.vars || theme).palette.primaryDark[600],
color: (theme.vars || theme).palette.primary[200],
},
'&::before': {
background: (theme.vars || theme).palette.primary[400],
},
Expand Down Expand Up @@ -211,7 +200,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 +209,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
Loading