[blog] Add new product tags and stray adjustments

docs/lib/sourcing.ts

@@ -33,13 +33,15 @@ export function getBlogPost(filePath: string): BlogPost {
 // Avoid typos in the blog markdown pages.
 // https://www.notion.so/mui-org/Blog-247ec2bff5fa46e799ef06a693c94917
 const ALLOWED_TAGS = [
-  'MUI Core',
-  'MUI X',
-  'News',
+  'Base UI',
   'Company',
   'Developer Survey',
+  'Guide',
+  'Joy UI',
+  'MUI X',
+  'Material UI',
+  'News',
   'Product',
-  'Base UI',
 ];
 
 export const getAllBlogPosts = () => {

docs/pages/blog.tsx

@@ -28,6 +28,7 @@ import HeroEnd from 'docs/src/components/home/HeroEnd';
 import Link from 'docs/src/modules/components/Link';
 import generateRssFeed from 'docs/scripts/generateRSSFeed';
 import Section from 'docs/src/layouts/Section';
+import SectionHeadline from 'docs/src/components/typography/SectionHeadline';
 import { getAllBlogPosts, BlogPost } from 'docs/lib/sourcing';
 
 export const getStaticProps = () => {
@@ -41,7 +42,7 @@ export const getStaticProps = () => {
 function PostPreview(props: BlogPost) {
   return (
     <React.Fragment>
-      <Box sx={{ display: 'flex', gap: '6px', mb: 1.5 }}>
+      <Box sx={{ display: 'flex', gap: 0.5, mb: 1.5 }}>
         {props.tags.map((tag) => (
           <Chip
             key={tag}
@@ -50,8 +51,12 @@ function PostPreview(props: BlogPost) {
             variant="outlined"
             color="primary"
             sx={(theme) => ({
+              height: 22,
               fontWeight: 'medium',
-              fontSize: theme.typography.pxToRem(12),
+              fontSize: theme.typography.pxToRem(13),
+              '& .MuiChip-label': {
+                px: '6px',
+              },
               ...theme.applyDarkStyles({
                 color: (theme.vars || theme).palette.grey[200],
               }),
@@ -254,91 +259,70 @@ export default function Blog(props: InferGetStaticPropsType<typeof getStaticProp
       />
       <AppHeader />
       <main id="main-content">
-        <Box
-          sx={(theme) => ({
-            background: `linear-gradient(180deg, #FFF 50%,
-          ${(theme.vars || theme).palette.primary[50]} 100%)
-        `,
-            ...theme.applyDarkStyles({
-              background: `linear-gradient(180deg, ${
-                (theme.vars || theme).palette.primaryDark[900]
-              } 50%,
-          ${alpha(theme.palette.primary[800], 0.2)} 100%)
-          `,
-            }),
-          })}
-        >
-          <Section bg="transparent" cozy>
-            <Typography
-              variant="body2"
-              color="primary.main"
-              fontWeight="bold"
-              textAlign="center"
-              gutterBottom
-            >
-              Blog
-            </Typography>
-            <Typography
-              component="h1"
-              variant="h2"
-              textAlign="center"
-              sx={{ mb: { xs: 5, md: 10 } }}
-            >
-              The <GradientText>latest</GradientText> about MUI
-            </Typography>
-            <Box
-              component="ul"
-              sx={{
-                display: 'grid',
-                m: 0,
-                p: 0,
-                gap: 2,
-                gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
-              }}
-            >
-              {[firstPost, secondPost].map((post) => (
-                <Paper
-                  key={post.slug}
-                  component="li"
-                  variant="outlined"
-                  sx={[
-                    {
-                      p: 2,
-                      display: 'flex',
-                      flexDirection: 'column',
-                      position: 'relative',
-                      boxShadow: '0px 4px 16px rgba(170, 180, 190, 0.2)',
-                      '&:focus-within': {
-                        '& a': {
-                          outline: 0,
-                        },
+        <Section cozy bg="gradient">
+          <SectionHeadline
+            alwaysCenter
+            overline="Blog"
+            title={
+              <Typography variant="h2" component="h1">
+                Stay <GradientText>in the loop</GradientText> with
+                <br /> the latest about MUI&apos;s products
+              </Typography>
+            }
+          />
+          <Box
+            component="ul"
+            sx={{
+              display: 'grid',
+              m: 0,
+              p: 0,
+              pt: 8,
+              gap: 2,
+              gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
+            }}
+          >
+            {[firstPost, secondPost].map((post) => (
+              <Paper
+                key={post.slug}
+                component="li"
+                variant="outlined"
+                sx={[
+                  {
+                    p: 2,
+                    display: 'flex',
+                    flexDirection: 'column',
+                    position: 'relative',
+                    boxShadow: '0px 4px 16px rgba(170, 180, 190, 0.2)',
+                    '&:focus-within': {
+                      '& a': {
+                        outline: 0,
                       },
                     },
-                    (theme) =>
-                      theme.applyDarkStyles({
-                        boxShadow: '0px 4px 16px rgba(0, 0, 0, 0.4)',
-                      }),
-                  ]}
-                >
-                  {post.image && (
-                    <Box
-                      component="img"
-                      src={post.image}
-                      sx={{
-                        aspectRatio: '16 / 9',
-                        width: '100%',
-                        height: 'auto',
-                        objectFit: 'cover',
-                        borderRadius: '4px',
-                      }}
-                    />
-                  )}
-                  <PostPreview {...post} />
-                </Paper>
-              ))}
-            </Box>
-          </Section>
-        </Box>
+                  },
+                  (theme) =>
+                    theme.applyDarkStyles({
+                      boxShadow: '0px 4px 16px rgba(0, 0, 0, 0.4)',
+                    }),
+                ]}
+              >
+                {post.image && (
+                  <Box
+                    component="img"
+                    src={post.image}
+                    sx={{
+                      aspectRatio: '16 / 9',
+                      width: '100%',
+                      height: 'auto',
+                      objectFit: 'cover',
+                      borderRadius: '4px',
+                    }}
+                  />
+                )}
+                <PostPreview {...post} />
+              </Paper>
+            ))}
+          </Box>
+        </Section>
         <Divider />
         <Container
           ref={postListRef}
@@ -379,11 +363,11 @@ export default function Blog(props: InferGetStaticPropsType<typeof getStaticProp
                 p: 2,
                 borderRadius: 1,
                 border: '1px solid',
-                background: 'rgba(255, 255, 255, 0.2)',
-                borderColor: (theme.vars || theme).palette.grey[200],
+                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),
-                  borderColor: (theme.vars || theme).palette.primaryDark[700],
+                  boxShadow: '0px 2px 6px rgba(0, 0, 0, 0.2)',
                 }),
               })}
             >
@@ -430,8 +414,8 @@ export default function Blog(props: InferGetStaticPropsType<typeof getStaticProp
                   );
                 })}
               </Box>
-              <Divider sx={{ mt: 3, mb: 2 }} />
-              <Typography color="text.primary" fontWeight="semiBold" sx={{ mb: 1 }}>
+              <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 }}>

docs/pages/blog/2020-introducing-sketch.md

@@ -3,7 +3,7 @@ title: Introducing Material UI for Sketch
 description: Today, we're excited to announce the introduction of official Sketch symbols for Material UI.
 date: 2020-03-30T00:00:00.000Z
 authors: ['oliviertassinari']
-tags: ['News']
+tags: ['Material UI', 'Product']
 card: true
 ---
 

docs/pages/blog/2023-material-ui-v6-and-beyond.md

@@ -4,7 +4,7 @@ description: We're tightening up the Material UI release schedule and shipping
 date: 2023-12-23T00:00:00.000Z
 authors: ['mnajdova']
 card: true
-tags: ['MUI Core', 'News']
+tags: ['Material UI', 'Product']
 ---
 
 As we approach the end of 2023, we've had our heads down working on some very exciting projects for the future of Material UI in the next year.

docs/pages/blog/build-layouts-faster-with-grid-v2.md

@@ -3,7 +3,7 @@ title: Build layouts faster with the new Grid component
 description: The new Grid v2 features simplified logic, support for offsetting and nested grids, and more.
 date: 2022-08-20T00:00:00.000Z
 authors: ['siriwatknp']
-tags: ['MUI Core', 'News']
+tags: ['Material UI', 'Guide']
 card: true
 ---
 

docs/pages/blog/callback-support-in-style-overrides.md

@@ -3,7 +3,7 @@ title: Introducing callback support in style overrides
 description: We're excited to introduce callback support for global theme overrides in this minor version update!
 date: 2022-01-31T00:00:00.000Z
 authors: ['siriwatknp']
-tags: ['MUI Core', 'News']
+tags: ['Material UI', 'Product']
 card: true
 ---
 

docs/pages/blog/first-look-at-joy.md

@@ -3,7 +3,7 @@ title: First look at Joy UI 🥳
 description: A sneak peek at MUI's new starting point for your design system.
 date: 2022-06-08T00:00:00.000Z
 authors: ['danilo-leal', 'siriwatknp']
-tags: ['News', 'MUI Core']
+tags: ['Joy UI', 'Product']
 card: true
 ---
 

docs/pages/blog/making-customizable-components.md

@@ -3,11 +3,11 @@ title: Strategies for building customizable components
 description: Explore the tradeoffs between different customization techniques, and how we landed on our strategy at MUI.
 date: 2022-08-22T00:00:00.000Z
 authors: ['alexfauquette']
-tags: ['MUI X', 'MUI Core']
+tags: ['MUI X', 'Material UI', 'Guide']
 card: true
 ---
 
-MUI's components are used by hundreds of thousands of developers worldwide, encompassing the full range of implementation from minor side projects to massive company websites.
+Material UI's components are used by hundreds of thousands of developers worldwide, encompassing the full range of implementation from minor side projects to massive company websites.
 
 This variety of users presents a dilemma for us as maintainers: hobbyists working on side projects want fully built components that work right out of the box, so they can focus on the application logic; many larger companies, by contrast, want to be able to fully customize components to respect their brand design.
 
@@ -64,7 +64,7 @@ you can play around with it in [CodeSandbox](https://codesandbox.io/p/sandbox/fa
 Maybe you don't want to spend your time switching between CSS and JavaScript files, or writing long, cluttered stylesheets.
 To avoid these problems you can integrate styles directly into your JS code. 🎉
 
-Because the level of customization varies across projects, MUI's components can be customized in several different ways.
+Because the level of customization varies across projects, Material UI's components can be customized in several different ways.
 For more information on this topic, check out the [Material UI customization documentation](https://mui.com/material-ui/customization/how-to-customize/).
 
 ## Logic modification
@@ -136,7 +136,7 @@ If your main priority is to get up and running quickly, then this may not be a v
 #### Subdivide your components
 
 Another approach I like is to provide subcomponents.
-This is what we do for MUI Core components such as the [Menu](https://mui.com/material-ui/react-menu/).
+This is what we do for Material UI components such as the [Menu](https://mui.com/material-ui/react-menu/).
 
 This is also the approach used by [react-admin](https://marmelab.com/react-admin/) to provide a customizable administration interface.
 Here is their quick start example:
@@ -303,7 +303,7 @@ For example, a grid can exist without its filter panel, or without its toolbar.
 
 In our last two annual [Developer Surveys](/blog/2021-developer-survey-results/), our users made it clear that customization is always a top priority when choosing a UI library.
 
-Thanks to the slot strategy and the introduction of supplementary tools like [MUI System's `sx` prop](https://mui.com/system/getting-started/the-sx-prop/), it has never been easier to customize MUI's components to suit your specific needs.
+Thanks to the slot strategy and the introduction of supplementary tools like [MUI System's `sx` prop](https://mui.com/system/getting-started/the-sx-prop/), it has never been easier to customize Material UI's components to suit your specific needs.
 
 [Material UI](https://mui.com/material-ui/getting-started/) and [Joy UI](https://mui.com/joy-ui/getting-started/) are designed to be both beautiful and flexible right out of the box, while [Base UI](https://mui.com/base-ui/getting-started/) gives you the most freedom to implement your own custom styling solution.
 [MUI X](https://mui.com/x/introduction/) is comprised of fully featured complex components like the `DataGrid` which—as we've seen—can still be customized in many ways with minimal friction.

docs/pages/blog/material-ui-is-now-mui.md

@@ -3,7 +3,7 @@ title: Material-UI is now Material UI!
 description: Starting today, we are evolving our brand identity. We are clarifying the difference between our company and our products.
 date: 2021-09-16T00:00:00.000Z
 authors: ['oliviertassinari', 'danilo-leal', 'mbrookes']
-tags: ['Company']
+tags: ['Material UI']
 card: true
 ---
 

docs/pages/blog/material-ui-v1-is-out.md

@@ -3,7 +3,7 @@ title: Material UI v1 is out 🎉
 description: It has taken us two years to do it, but Material UI v1 has finally arrived!
 date: 2018-05-18T00:00:00.000Z
 authors: ['oliviertassinari', 'mbrookes']
-tags: ['Company']
+tags: ['Material UI', 'Product']
 card: true
 ---
 

docs/pages/blog/material-ui-v4-is-out.md

@@ -3,7 +3,7 @@ title: Material UI v4 is out 🎉
 description: Material UI v4 has finally arrived. We are so excited about this release, as it defines better foundations for the UI components.
 date: 2019-05-23T00:00:00.000Z
 authors: ['oliviertassinari', 'mbrookes', 'eps1lon']
-tags: ['Company']
+tags: ['Material UI', 'Product']
 card: true
 ---
 

docs/pages/blog/mui-core-v5-migration-update.md

@@ -4,7 +4,7 @@ description: We have completely revamped our Migration guide to reduce friction
 date: 2022-06-20T00:00:00.000Z
 authors: ['samuelsycamore']
 card: true
-tags: ['MUI Core']
+tags: ['Material UI']
 ---
 
 Are you still using Material UI v4 in 2022?

docs/src/modules/brandingTheme.ts

@@ -951,6 +951,9 @@ export function getThemedComponents(): ThemeOptions {
                 },
                 '& .MuiChip-deleteIcon': {
                   color: (theme.vars || theme).palette.primary[600],
+                  '&:hover': {
+                    color: (theme.vars || theme).palette.primary[700],
+                  },
                 },
                 ...theme.applyDarkStyles({
                   color: (theme.vars || theme).palette.primary[100],
@@ -960,6 +963,9 @@ export function getThemedComponents(): ThemeOptions {
                   },
                   '& .MuiChip-deleteIcon': {
                     color: (theme.vars || theme).palette.primary[100],
+                    '&:hover': {
+                      color: (theme.vars || theme).palette.primary[50],
+                    },
                   },
                 }),
               }),