Skip to content

[blog] Refresh the design slightly #41697

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
merged 11 commits into from
Apr 3, 2024
Merged

[blog] Refresh the design slightly #41697

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
6837926
redesign the page slightly
danilo-leal Mar 27, 2024
1001f20
update the stylizedRadio token
danilo-leal Mar 27, 2024
a5c71d8
Merge branch 'next' into blog-page-design-bump
danilo-leal Mar 28, 2024
df04bc1
remove non-used gradient styles
danilo-leal Mar 28, 2024
240f2aa
tweak the filter title
danilo-leal Mar 28, 2024
b16306c
spacing adjustments
danilo-leal Mar 28, 2024
2dcba22
improve chip focus-visible state
danilo-leal Mar 28, 2024
3b79dd9
refine the "radioSubtle" gradient token
danilo-leal Mar 28, 2024
c9341e3
Victor's gradient nudges
danilo-leal Mar 29, 2024
966ac02
run CI checks again
danilo-leal Mar 29, 2024
3ef737d
standardize <figure> and <figCaption> styles
danilo-leal Apr 1, 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
239 changes: 119 additions & 120 deletions docs/pages/blog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import * as React from 'react';
import { InferGetStaticPropsType } from 'next';
import { useRouter } from 'next/router';
import { alpha } from '@mui/material/styles';
import Avatar from '@mui/material/Avatar';
import AvatarGroup from '@mui/material/AvatarGroup';
import Box from '@mui/material/Box';
Expand Down Expand Up @@ -64,19 +63,12 @@ function PostPreview(props: BlogPost) {
/>
))}
</Box>
<Typography
component="h2"
fontWeight="bold"
variant="subtitle1"
sx={{
mb: 0.5,
}}
>
<Typography component="h2" fontWeight="bold" variant="subtitle1" gutterBottom>
<Link
aria-describedby={`describe-${props.slug}`}
href={`/blog/${props.slug}/`}
color="text.primary"
sx={{
color: 'text.primary',
'&:hover': {
textDecoration: 'underline',
},
Expand Down Expand Up @@ -153,7 +145,7 @@ function PostPreview(props: BlogPost) {
</Typography>
)}
{props.date && (
<Typography variant="caption" fontWeight="regular" color="text.secondary">
<Typography variant="caption" fontWeight="regular" color="text.tertiary">
{new Date(props.date).toDateString()}
</Typography>
)}
Expand All @@ -164,6 +156,7 @@ function PostPreview(props: BlogPost) {
href={`/blog/${props.slug}`}
id={`describe-${props.slug}`}
endIcon={<KeyboardArrowRightRoundedIcon />}
size="small"
sx={{ mt: { xs: 0.5, md: 0 }, p: { xs: 0, sm: '6px 8px' } }}
>
Read more
Expand All @@ -173,7 +166,7 @@ function PostPreview(props: BlogPost) {
);
}

const PAGE_SIZE = 5;
const PAGE_SIZE = 7;

export default function Blog(props: InferGetStaticPropsType<typeof getStaticProps>) {
const router = useRouter();
Expand Down Expand Up @@ -236,6 +229,7 @@ export default function Blog(props: InferGetStaticPropsType<typeof getStaticProp
{ shallow: true },
);
};

return (
<BrandingCssVarsProvider>
<Head
Expand All @@ -257,13 +251,15 @@ export default function Blog(props: InferGetStaticPropsType<typeof getStaticProp
</Typography>
}
/>
</Section>
<Divider />
<Container sx={{ mt: { xs: 2, sm: -6 } }}>
<Box
component="ul"
sx={{
display: 'grid',
m: 0,
p: 0,
pt: 8,
gap: 2,
gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
}}
Expand All @@ -273,25 +269,18 @@ export default function Blog(props: InferGetStaticPropsType<typeof getStaticProp
key={post.slug}
component="li"
variant="outlined"
sx={[
{
p: 2,
display: 'flex',
flexDirection: 'column',
position: 'relative',
borderColor: 'grey.200',
boxShadow: '0px 4px 12px rgba(170, 180, 190, 0.2)',
'&:focus-within': {
'& a': {
outline: 0,
},
},
},
(theme) =>
theme.applyDarkStyles({
boxShadow: '0px 4px 12px rgba(0, 0, 0, 0.4)',
}),
]}
sx={(theme) => ({
p: 2,
display: 'flex',
flexDirection: 'column',
backgroundImage: (theme.vars || theme).palette.gradients.radioSubtle,
boxShadow: '0 4px 12px rgba(170, 180, 190, 0.2)',
...theme.applyDarkStyles({
background: (theme.vars || theme).palette.primaryDark[900],
backgroundImage: (theme.vars || theme).palette.gradients.radioSubtle,
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.4)',
}),
})}
>
{post.image && (
<Box
Expand All @@ -310,8 +299,7 @@ export default function Blog(props: InferGetStaticPropsType<typeof getStaticProp
</Paper>
))}
</Box>
</Section>
<Divider />
</Container>
<Container
ref={postListRef}
sx={{
Expand All @@ -325,7 +313,7 @@ export default function Blog(props: InferGetStaticPropsType<typeof getStaticProp
<Typography
component="h2"
variant="h6"
fontWeight="700"
fontWeight="semiBold"
sx={{ mb: { xs: 1, sm: 2 }, mt: 8 }} // margin-top makes the title appear when scroll into view
>
Posts{' '}
Expand All @@ -342,94 +330,105 @@ export default function Blog(props: InferGetStaticPropsType<typeof getStaticProp
</Typography>
<Box sx={{ gridRow: 'span 2' }}>
<Box
sx={(theme) => ({
sx={{
position: 'sticky',
top: 100,
alignSelf: 'start',
mb: 2,
mt: { xs: 3, sm: 2, md: 9 }, // margin-top makes the title appear when scroll into view
p: 2,
borderRadius: 1,
border: '1px solid',
borderColor: (theme.vars || theme).palette.divider,
boxShadow: '0px 2px 6px rgba(170, 180, 190, 0.2)',
...theme.applyDarkStyles({
background: alpha(theme.palette.primaryDark[700], 0.2),
boxShadow: '0px 2px 6px rgba(0, 0, 0, 0.2)',
}),
})}
top: 90,
mt: { xs: 0, md: 9 },
mb: { xs: 2, md: 0 },
display: 'flex',
flexDirection: 'column',
gap: 2,
'& .MuiPaper-root': {
p: 2,
bgcolor: 'transparent',
borderColor: 'divider',
},
}}
>
<Typography color="text.primary" fontWeight="semiBold" sx={{ mb: 2 }}>
Filter by tag
</Typography>
<Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}>
{Object.keys(tagInfo).map((tag) => {
const selected = !!selectedTags[tag];
return (
<Chip
key={tag}
variant={selected ? 'filled' : 'outlined'}
color={selected ? 'primary' : undefined}
{...(selected
? {
label: tag,
onDelete: () => {
postListRef.current?.scrollIntoView();
removeTag(tag);
},
}
: {
label: tag,
onClick: () => {
postListRef.current?.scrollIntoView();
router.push(
{
query: {
...router.query,
tags: tag,
<Paper variant="outlined">
<Typography
color="text.primary"
fontWeight="semiBold"
variant="subtitle2"
sx={{ mb: 2 }}
>
Filter posts by tag
</Typography>
<Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}>
{Object.keys(tagInfo).map((tag) => {
const selected = !!selectedTags[tag];
return (
<Chip
key={tag}
variant={selected ? 'filled' : 'outlined'}
color={selected ? 'primary' : undefined}
{...(selected
? {
label: tag,
onDelete: () => {
postListRef.current?.scrollIntoView();
removeTag(tag);
},
}
: {
label: tag,
onClick: () => {
postListRef.current?.scrollIntoView();
router.push(
{
query: {
...router.query,
tags: tag,
},
},
},
undefined,
{ shallow: true },
);
},
})}
size="small"
sx={{
py: 1.2,
}}
/>
);
})}
</Box>
<Divider sx={{ my: 2 }} />
<Typography color="text.primary" fontWeight="semiBold" gutterBottom>
Want to hear more from us?
</Typography>
<Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
Get up to date with everything MUI-related through our social media:
</Typography>
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2, '* > svg': { mr: 1 } }}>
<Link href="https://github.com/mui" target="_blank" fontSize={14}>
<GitHubIcon fontSize="small" />
GitHub
</Link>
<Link href="https://twitter.com/MUI_hq" target="_blank" fontSize={14}>
<XIcon fontSize="small" />X
</Link>
<Link href="https://mui.com/r/discord/" target="_blank" fontSize={14}>
<DiscordIcon fontSize="small" />
Discord
</Link>
<Link href="https://www.linkedin.com/company/mui/" target="_blank" fontSize={14}>
<LinkedInIcon fontSize="small" />
LinkedIn
</Link>
<Link href="https://www.youtube.com/@MUI_hq" target="_blank" fontSize={14}>
<YouTubeIcon fontSize="small" />
Youtube
</Link>
</Box>
undefined,
{ shallow: true },
);
},
})}
size="small"
sx={{
py: 1.2,
}}
/>
);
})}
</Box>
</Paper>
<Paper variant="outlined">
<Typography
color="text.primary"
fontWeight="semiBold"
variant="subtitle2"
gutterBottom
>
Want to hear more from us?
</Typography>
<Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
Get up to date with everything MUI-related through our social media:
</Typography>
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2, '* > svg': { mr: 1 } }}>
<Link href="https://github.com/mui" target="_blank" fontSize={14}>
<GitHubIcon fontSize="small" />
GitHub
</Link>
<Link href="https://twitter.com/MUI_hq" target="_blank" fontSize={14}>
<XIcon fontSize="small" />X
</Link>
<Link href="https://mui.com/r/discord/" target="_blank" fontSize={14}>
<DiscordIcon fontSize="small" />
Discord
</Link>
<Link href="https://www.linkedin.com/company/mui/" target="_blank" fontSize={14}>
<LinkedInIcon fontSize="small" />
LinkedIn
</Link>
<Link href="https://www.youtube.com/@MUI_hq" target="_blank" fontSize={14}>
<YouTubeIcon fontSize="small" />
Youtube
</Link>
</Box>
</Paper>
</Box>
</Box>
<div>
Expand Down
14 changes: 7 additions & 7 deletions packages/mui-docs/src/branding/brandingTheme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,8 +32,7 @@ declare module '@mui/material/styles/createPalette' {
interface Palette {
primaryDark: PaletteColor;
gradients: {
lightGrayRadio: string;
stylizedRadio: string;
radioSubtle: string;
linearSubtle: string;
};
}
Expand Down Expand Up @@ -256,12 +255,10 @@ export const getDesignTokens = (mode: 'light' | 'dark') =>
},
warning,
gradients: {
lightGrayRadio:
'radial-gradient(50% 50% at 50% 50%, #F0F7FF 0%, rgba(240, 247, 255, 0.05) 100%)',
stylizedRadio:
radioSubtle:
mode === 'dark'
? 'linear-gradient(rgba(0 0 0 / 0.1), rgba(0 0 0 / 0.1)), linear-gradient(254.86deg, rgba(0, 58, 117, 0.18) 0%, rgba(11, 13, 14, 0.3) 49.98%, rgba(0, 76, 153, 0.21) 100.95%)'
: 'linear-gradient(rgba(255 255 255 / 0.3), rgba(255 255 255 / 0.3)), linear-gradient(254.86deg, rgba(194, 224, 255, 0.12) 0%, rgba(194, 224, 255, 0.12) 0%, rgba(255, 255, 255, 0.3) 49.98%, rgba(240, 247, 255, 0.3) 100.95%)',
? `radial-gradient(100% 100% at 50% 0, transparent 0, ${alpha(blue[900], 0.3)} 300%)`
: `radial-gradient(100% 90% at 50% 0, transparent 0, ${alpha(blue[100], 0.6)} 300%)`,
linearSubtle:
mode === 'light'
? `linear-gradient(to bottom right, ${alpha(blue[50], 0.3)} 25%, ${alpha(grey[50], 0.2)} 100%)`
Expand Down Expand Up @@ -955,6 +952,9 @@ export function getThemedComponents(): ThemeOptions {
color: (theme.vars || theme).palette.primary[700],
},
},
'&.Mui-focusVisible': {
backgroundColor: (theme.vars || theme).palette.primary[200],
},
...theme.applyDarkStyles({
color: (theme.vars || theme).palette.primary[100],
backgroundColor: alpha(theme.palette.primary[800], 0.5),
Expand Down