[blog] Add post to introduce the Connect plugin (@danilo-leal) (#41929)

Author: DiegoAndai

docs/data/joy/components/accordion/AccordionTransition.js

@@ -9,7 +9,7 @@ import Radio from '@mui/joy/Radio';
 import Stack from '@mui/joy/Stack';
 import Typography from '@mui/joy/Typography';
 import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
-import BrandingProvider from 'docs/src/BrandingProvider';
+import { BrandingProvider } from '@mui/docs/branding';
 
 export default function AccordionTransition() {
   const [transition, setTransition] = React.useState('0.2s ease');

docs/data/joy/components/badge/BadgeAlignment.js

@@ -6,7 +6,7 @@ import IconButton from '@mui/joy/IconButton';
 import ArrowUpward from '@mui/icons-material/ArrowUpward';
 import ArrowDownward from '@mui/icons-material/ArrowDownward';
 import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
-import BrandingProvider from 'docs/src/BrandingProvider';
+import { BrandingProvider } from '@mui/docs/branding';
 
 export default function BadgeAlignment() {
   const [anchorOrigin, setAnchorOrigin] = React.useState({

docs/data/joy/components/badge/BadgeAlignment.tsx

@@ -6,7 +6,7 @@ import IconButton from '@mui/joy/IconButton';
 import ArrowUpward from '@mui/icons-material/ArrowUpward';
 import ArrowDownward from '@mui/icons-material/ArrowDownward';
 import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
-import BrandingProvider from 'docs/src/BrandingProvider';
+import { BrandingProvider } from '@mui/docs/branding';
 
 export default function BadgeAlignment() {
   const [anchorOrigin, setAnchorOrigin] = React.useState<BadgeProps['anchorOrigin']>(

docs/data/joy/components/grid/InteractiveGrid.js

@@ -6,7 +6,7 @@ import RadioGroup from '@mui/joy/RadioGroup';
 import Radio from '@mui/joy/Radio';
 import Sheet from '@mui/joy/Sheet';
 
-import BrandingProvider from 'docs/src/BrandingProvider';
+import { BrandingProvider } from '@mui/docs/branding';
 import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
 
 export default function InteractiveGrid() {

docs/data/joy/components/grid/InteractiveGrid.tsx

@@ -6,7 +6,7 @@ import RadioGroup from '@mui/joy/RadioGroup';
 import Radio from '@mui/joy/Radio';
 import Sheet from '@mui/joy/Sheet';
 import { GridDirection } from '@mui/system';
-import BrandingProvider from 'docs/src/BrandingProvider';
+import { BrandingProvider } from '@mui/docs/branding';
 import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
 
 type GridItemsAlignment =

docs/data/joy/components/grid/SpacingGrid.js

@@ -6,7 +6,7 @@ import RadioGroup from '@mui/joy/RadioGroup';
 import Radio from '@mui/joy/Radio';
 import Sheet from '@mui/joy/Sheet';
 import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
-import BrandingProvider from 'docs/src/BrandingProvider';
+import { BrandingProvider } from '@mui/docs/branding';
 
 export default function SpacingGrid() {
   const [spacing, setSpacing] = React.useState(2);

docs/data/joy/components/grid/SpacingGrid.tsx

@@ -6,7 +6,7 @@ import RadioGroup from '@mui/joy/RadioGroup';
 import Radio from '@mui/joy/Radio';
 import Sheet from '@mui/joy/Sheet';
 import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
-import BrandingProvider from 'docs/src/BrandingProvider';
+import { BrandingProvider } from '@mui/docs/branding';
 
 export default function SpacingGrid() {
   const [spacing, setSpacing] = React.useState(2);

docs/data/joy/components/stack/InteractiveStack.js

@@ -8,7 +8,7 @@ import Radio from '@mui/joy/Radio';
 import Stack from '@mui/joy/Stack';
 import { styled } from '@mui/joy/styles';
 import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
-import BrandingProvider from 'docs/src/BrandingProvider';
+import { BrandingProvider } from '@mui/docs/branding';
 
 const Item = styled(Sheet)(({ theme }) => ({
   ...theme.typography['body-sm'],

docs/data/joy/components/stack/InteractiveStack.tsx

@@ -8,7 +8,7 @@ import Radio from '@mui/joy/Radio';
 import Stack, { StackProps } from '@mui/joy/Stack';
 import { styled } from '@mui/joy/styles';
 import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
-import BrandingProvider from 'docs/src/BrandingProvider';
+import { BrandingProvider } from '@mui/docs/branding';
 
 const Item = styled(Sheet)(({ theme }) => ({
   ...theme.typography['body-sm'],

docs/data/joy/customization/approaches/ButtonThemes.js

@@ -6,7 +6,7 @@ import FormLabel from '@mui/joy/FormLabel';
 import Select from '@mui/joy/Select';
 import Option from '@mui/joy/Option';
 import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
-import BrandingProvider from 'docs/src/BrandingProvider';
+import { BrandingProvider } from '@mui/docs/branding';
 
 const githubTheme = extendTheme({
   cssVarPrefix: 'gh',

docs/data/joy/main-features/automatic-adjustment/ListThemes.js

@@ -10,7 +10,7 @@ import Option from '@mui/joy/Option';
 import ArticleRoundedIcon from '@mui/icons-material/ArticleRounded';
 import ToggleOffRoundedIcon from '@mui/icons-material/ToggleOffRounded';
 import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
-import BrandingProvider from 'docs/src/BrandingProvider';
+import { BrandingProvider } from '@mui/docs/branding';
 
 export default function ListThemes() {
   const [preset, setPreset] = React.useState('');

docs/data/material/customization/default-theme/DefaultTheme.js

@@ -8,7 +8,7 @@ import { useTranslate } from '@mui/docs/i18n';
 import ThemeViewer, {
   useNodeIdsLazy,
 } from 'docs/src/modules/components/ThemeViewer';
-import { blue, grey } from 'docs/src/modules/brandingTheme';
+import { blue, grey } from '@mui/docs/branding';
 
 const StyledSwitch = styled(Switch)(({ theme }) => [
   {

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.
 :::
 

docs/lib/sourcing.ts

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

docs/pages/_document.js

@@ -9,7 +9,7 @@ import { getInitColorSchemeScript as getMuiInitColorSchemeScript } from '@mui/ma
 import { getInitColorSchemeScript as getJoyInitColorSchemeScript } from '@mui/joy/styles';
 import { pathnameToLanguage } from 'docs/src/modules/utils/helpers';
 import createEmotionCache from 'docs/src/createEmotionCache';
-import { getMetaThemeColor } from 'docs/src/modules/brandingTheme';
+import { getMetaThemeColor } from '@mui/docs/branding';
 
 // You can find a benchmark of the available CSS minifiers under
 // https://github.com/GoalSmashers/css-minification-benchmark