diff --git a/docs/data/material/design-resources/connect/connect.md b/docs/data/material/design-resources/connect/connect.md index 01770968df80cc..b441a460c6ee6d 100644 --- a/docs/data/material/design-resources/connect/connect.md +++ b/docs/data/material/design-resources/connect/connect.md @@ -59,7 +59,7 @@ After you've added your custom tokens, click on **Regenerate theme** to include Connect can also generate theme styles for customized components, enabling you to completely change their look and feel and create your custom design system from within Figma. :::info -This feature is currently limited to the Button and Switch components. +This feature is currently limited to the Button, Switch, and Typography components. Support for more components is coming soon. ::: diff --git a/docs/lib/sourcing.ts b/docs/lib/sourcing.ts index 7ade883964584f..7f4dd30bfbbe43 100644 --- a/docs/lib/sourcing.ts +++ b/docs/lib/sourcing.ts @@ -44,6 +44,7 @@ const ALLOWED_TAGS = [ 'MUI X', 'MUI System', 'Toolpad', + 'Connect', ]; export const getAllBlogPosts = () => { diff --git a/docs/pages/blog/introducing-connect.js b/docs/pages/blog/introducing-connect.js new file mode 100644 index 00000000000000..100b8643fa753f --- /dev/null +++ b/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 ; +} diff --git a/docs/pages/blog/introducing-connect.md b/docs/pages/blog/introducing-connect.md new file mode 100644 index 00000000000000..7b87e783d34727 --- /dev/null +++ b/docs/pages/blog/introducing-connect.md @@ -0,0 +1,68 @@ +--- +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'] +manualCard: true +--- + +Over the last few years we've seen designers increasingly seeking out ways to participate more directly and collaborate more effectively in the development process. +The [Material UI Design Kit for Figma](/store/items/figma-react/) was our first attempt to meet those needs by providing designers with one-to-one mockups of Material UI components for implementing custom design systems. +But it doesn't go far enough on its own to bridge the gap between design and code—the developer still need to write the designer's custom styles from scratch. + +That got us thinking: +What if designers could generate production-ready code directly from their design software to hand off to developers working with a Material UI codebase? + +That's why we created Connect, a Figma plugin for generating styles that can be copied and pasted straight into your Material UI app's theme. +We're happy to share that the beta version is [available now on Figma](https://www.figma.com/community/plugin/1336346114713490235/connect). 🚀 + +Connect is a Figma plugin that lets you generate a theme from the Material UI for Figma Design Kit. + +Let's take a look at some of its key features: + +## Theme customization + +Figma's local variables significantly matured the use of design tokens, making it possible to mirror Material UI more closely. +Connect relies on these local variables to generate code corresponding to each element and state. +(As such, it requires [v5.16.0 or later](https://github.com/mui/mui-design-kits/releases/tag/v5.16.0) of the Material UI Design Kit; earlier versions do not support local variables.) + + + +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 enables designers to use the visual design tools they're already comfortable with to make changes to the code itself. + + + +:::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, Switch, and Typography. +::: + +## 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. + + + +## Try Connect now + +Get the beta version of Connect now, available for free in 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! 👨‍🎨 diff --git a/docs/pages/careers.tsx b/docs/pages/careers.tsx index c1abb1f4579da4..8e2d58f4b98d27 100644 --- a/docs/pages/careers.tsx +++ b/docs/pages/careers.tsx @@ -467,7 +467,13 @@ 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', + }} > {title} @@ -475,7 +481,12 @@ export default function Careers() { {description} - + Learn more{' '} { const { github, name } = authors[author]; diff --git a/packages/mui-docs/src/branding/brandingTheme.ts b/packages/mui-docs/src/branding/brandingTheme.ts index 7cda32366b9313..d6e428314aeeee 100644 --- a/packages/mui-docs/src/branding/brandingTheme.ts +++ b/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),