[blog] Add post to introduce the Connect plugin

docs/lib/sourcing.ts

@@ -44,6 +44,7 @@ const ALLOWED_TAGS = [
   'MUI X',
   'MUI System',
   'Toolpad',
+  'Connect',
 ];
 
 export const getAllBlogPosts = () => {

docs/pages/blog/introducing-connect.js

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
+import { docs } from './introducing-connect.md?muiMarkdown';
+
+export default function Page() {
+  return <TopLayoutBlog docs={docs} />;
+}

docs/pages/blog/introducing-connect.md

@@ -0,0 +1,59 @@
+---
+title: 'Introducing Connect: a Figma plugin that exports Material UI code'
+description: Connect is a Figma plugin that lets you generate a theme from the Material UI for Figma Design Kit.
+date: 2024-04-16T00:00:00.000Z
+authors: ['danilo-leal', 'DavidCnoops']
+tags: ['Connect', 'Material UI', 'Product']
+card: true
+---
+
+Ever since we released the [Material UI Design Kit for Figma](/store/items/figma-react/), designers continuously expressed how much faster and more efficient their experience collaborating with developers would be if they could hand over production-ready code generated directly from the design software that nicely integrates with a codebase using Material UI.
+
+That's why Connect was created!
+We're happy to share that the beta version is [available now, for free on Figma](https://www.figma.com/community/plugin/1336346114713490235/connect).
+Let's walkthough some of the available features.
+
+## Theme customization
+
+Figma's local variables significantly matured the use of design tokens, making it possible to mirror Material UI more closely.
+Parting from version [v5.16.0 and later versions](https://github.com/mui/mui-design-kits/releases/tag/v5.16.0), Connect takes advantage of that to allow you to generate code for any available or created token using local variables.
+
+<video preload="metadata" controls muted loop playsinline width="1584" height="1080">
+  <source src="/static/blog/introducing-connect/theme-customization.mp4" type="video/mp4">
+</video>
+
+Visit the documentation to learn [how to insert the generated code into your theme file](/material-ui/design-resources/connect/#using-the-generated-theme/).
+
+## Component customization
+
+You can fully customize a component's appearance across multiple states in the Design Kit and then generate the corresponding theme code.
+This is one of the most exciting features because it makes tweaking components incredibly fast and easier for designers!
+
+<video preload="metadata" controls muted loop playsinline width="1584" height="1080">
+  <source src="/static/blog/introducing-connect/custom-component.mp4" type="video/mp4">
+</video>
+
+:::warning
+While in beta, not all components are supported yet.
+We'll expand component coverage progressively in the coming months.
+For now you can experiment with the Button and Switch.
+:::
+
+## Quick Storybook preview
+
+The Connect plugin also bakes in an embedded Storybook preview panel so that you can conveniently play around with your changes and see how they interact with other props and states available in the component API.
+
+<video preload="metadata" autoplay muted loop playsinline width="1584" height="1080">
+  <source src="/static/blog/introducing-connect/storybook.mp4" type="video/mp4">
+</video>
+
+## Try Connect now
+
+Get the beta version of Connect now, availble **for free** on the [Figma Community](https://www.figma.com/community/plugin/1336346114713490235/connect)!
+
+There's still a lot to do, and we're looking forward to hearing from all of you [who requested this plugin years ago](https://github.com/mui/mui-design-kits/issues/10).
+
+- Check out further documentation for [the Connect plugin](/material-ui/design-resources/connect/) and [the Material UI Design Kit](/material-ui/design-resources/material-ui-for-figma/).
+- If you've got any feedback, we'd love to [hear from you](https://mui-connect.canny.io/feedback).
+
+Happy designing! 👨‍🎨

docs/pages/careers.tsx

@@ -467,15 +467,26 @@ export default function Careers() {
                     href={routeUrl}
                     noLinkStyle
                     variant="outlined"
-                    sx={{ p: 2, width: '100%', flexGrow: 1 }}
+                    sx={{
+                      p: 2,
+                      width: '100%',
+                      flexGrow: 1,
+                      display: 'flex',
+                      flexDirection: 'column',
+                    }}
                   >
                     <Typography variant="body2" fontWeight="bold" sx={{ mb: 0.5 }}>
                       {title}
                     </Typography>
                     <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
                       {description}
                     </Typography>
-                    <Typography variant="body2" fontWeight="bold" color="primary">
+                    <Typography
+                      variant="body2"
+                      fontWeight="bold"
+                      color="primary"
+                      sx={{ mt: 'auto' }}
+                    >
                       Learn more{' '}
                       <KeyboardArrowRightRounded
                         fontSize="small"

docs/src/modules/components/TopLayoutBlog.js

@@ -116,6 +116,11 @@ export const authors = {
     avatar: 'https://avatars.githubusercontent.com/u/16889233',
     github: 'DiegoAndai',
   },
+  DavidCnoops: {
+    name: 'David Cnoops',
+    avatar: 'https://avatars.githubusercontent.com/u/28001064',
+    github: 'DavidCnoops',
+  },
 };
 
 const classes = {

packages/mui-docs/src/branding/brandingTheme.ts

@@ -905,7 +905,7 @@ export function getThemedComponents(): ThemeOptions {
             ...(variant === 'outlined' &&
               color === 'primary' && {
                 borderColor: (theme.vars || theme).palette.primary[100],
-                backgroundColor: (theme.vars || theme).palette.primary[50],
+                backgroundColor: alpha(theme.palette.primary[100], 0.2),
                 ...theme.applyDarkStyles({
                   color: (theme.vars || theme).palette.primary[300],
                   borderColor: alpha(theme.palette.primary[500], 0.2),