[docs-infra] Move BrandingProvider/brandingTheme/InfoCard to @mui/docs

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/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

docs/src/BrandingCssVarsProvider.tsx

@@ -7,7 +7,7 @@ import {
 } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
 import { NextNProgressBar } from 'docs/src/modules/components/AppFrame';
-import { getDesignTokens, getThemedComponents } from 'docs/src/modules/brandingTheme';
+import { getDesignTokens, getThemedComponents } from '@mui/docs/branding';
 import SkipLink from 'docs/src/modules/components/SkipLink';
 import MarkdownLinks from 'docs/src/modules/components/MarkdownLinks';
 

docs/src/BrandingProvider.tsx

@@ -1,19 +1,4 @@
-import * as React from 'react';
-import { ThemeProvider, useTheme } from '@mui/material/styles';
-import { brandingDarkTheme, brandingLightTheme } from 'docs/src/modules/brandingTheme';
+// Backwards compatibility for Toolpad and X.
+// TODO: remove when Toolpad and X migrated to `@mui/docs/branding`
 
-interface BrandingProviderProps {
-  children: React.ReactNode;
-  /**
-   * If not `undefined`, the provider is considered nesting and does not render NextNProgressBar & CssBaseline
-   */
-  mode: 'light' | 'dark';
-}
-
-export default function BrandingProvider(props: BrandingProviderProps) {
-  const { children, mode: modeProp } = props;
-  const upperTheme = useTheme();
-  const mode = modeProp || upperTheme.palette.mode;
-  const theme = mode === 'dark' ? brandingDarkTheme : brandingLightTheme;
-  return <ThemeProvider theme={modeProp ? () => theme : theme}>{children}</ThemeProvider>;
-}
+export { BrandingProvider as default } from '@mui/docs/branding';

docs/src/components/about/HowToSupport.tsx

@@ -12,7 +12,7 @@ import GradientText from 'docs/src/components/typography/GradientText';
 import { Link } from '@mui/docs/Link';
 import Section from 'docs/src/layouts/Section';
 import SectionHeadline from 'docs/src/components/typography/SectionHeadline';
-import { GlowingIconContainer } from 'docs/src/components/action/InfoCard';
+import { GlowingIconContainer } from '@mui/docs/InfoCard';
 
 function Widget({
   children,

docs/src/components/action/InfoCard.tsx

@@ -1,114 +1,5 @@
-import * as React from 'react';
-import { alpha } from '@mui/material/styles';
-import Box from '@mui/material/Box';
-import Paper from '@mui/material/Paper';
-import Typography, { TypographyProps } from '@mui/material/Typography';
-import { Link, LinkProps } from '@mui/docs/Link';
+// Backwards compatibility for Toolpad and X.
+// TODO: remove when Toolpad and X migrated to `@mui/docs/InfoCard`
 
-interface GlowingIconContainerProps {
-  icon: React.ReactNode;
-}
-
-export function GlowingIconContainer({ icon }: GlowingIconContainerProps) {
-  return (
-    <Box
-      sx={(theme) => ({
-        width: 40,
-        height: 40,
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        flexShrink: 0,
-        borderRadius: 1,
-        border: '1px solid',
-        borderColor: 'primary.200',
-        bgcolor: 'primary.50',
-        boxShadow: `0px 1px 6px 0px ${alpha(
-          theme.palette.primary[500],
-          0.4,
-        )}, 0px 2px 30px 0px rgba(234, 237, 241, 0.3) inset`,
-        ...theme.applyDarkStyles({
-          borderColor: alpha(theme.palette.primary[400], 0.6),
-          bgcolor: 'primary.900',
-          boxShadow: `0 2px 6px 0 ${alpha(
-            theme.palette.primary[600],
-            0.4,
-          )}, 0px 2px 30px 0px rgba(0, 0, 0, 0.25) inset`,
-        }),
-      })}
-    >
-      {icon}
-    </Box>
-  );
-}
-
-interface InfoCardProps {
-  classNameDescription?: string;
-  classNameTitle?: string;
-  dense?: boolean;
-  description?: string;
-  icon?: React.ReactNode;
-  link?: string;
-  prefetch?: LinkProps['prefetch'];
-  svg?: React.ReactNode;
-  title: string;
-  titleProps?: TypographyProps;
-}
-
-export default function InfoCard(props: InfoCardProps) {
-  const {
-    classNameDescription,
-    classNameTitle,
-    dense,
-    description,
-    icon,
-    link,
-    svg,
-    title,
-    titleProps,
-    ...other
-  } = props;
-  return (
-    <Paper
-      variant="outlined"
-      component={link ? Link : 'div'}
-      href={link}
-      {...(link
-        ? {
-            noLinkStyle: true,
-            // Fix overloading with prefetch={false}, only prefetch on hover.
-            prefetch: false,
-          }
-        : {})}
-      sx={(theme) => ({
-        p: dense ? 2.5 : 3.5,
-        height: '100%',
-        background: `${(theme.vars || theme).palette.gradients.linearSubtle}`,
-        ...theme.applyDarkStyles({
-          bgcolor: 'primaryDark.900',
-          background: `${(theme.vars || theme).palette.gradients.linearSubtle}`,
-          borderColor: 'primaryDark.700',
-        }),
-      })}
-      {...other}
-    >
-      {svg && svg}
-      {icon && <GlowingIconContainer icon={icon} />}
-      <Typography
-        fontWeight="bold"
-        component="h3"
-        color="text.primary"
-        variant="body2"
-        mt={icon ? 2 : 0}
-        mb={description ? 0.5 : 0}
-        className={classNameTitle}
-        {...titleProps}
-      >
-        {title}
-      </Typography>
-      <Typography variant="body2" color="text.secondary" className={classNameDescription}>
-        {description}
-      </Typography>
-    </Paper>
-  );
-}
+export * from '@mui/docs/InfoCard';
+export { InfoCard as default } from '@mui/docs/InfoCard';

docs/src/components/home/MaterialDesignComponents.tsx

@@ -34,7 +34,7 @@ import VerifiedUserRounded from '@mui/icons-material/VerifiedUserRounded';
 import HelpCenterRounded from '@mui/icons-material/HelpCenterRounded';
 import ROUTES from 'docs/src/route';
 import { Link } from '@mui/docs/Link';
-import { getDesignTokens, getThemedComponents } from 'docs/src/modules/brandingTheme';
+import { getDesignTokens, getThemedComponents } from '@mui/docs/branding';
 
 const Grid = styled('div')(({ theme }) => [
   {

docs/src/components/home/ValueProposition.tsx

@@ -8,7 +8,7 @@ import AccessibilityNewRounded from '@mui/icons-material/AccessibilityNewRounded
 import GradientText from 'docs/src/components/typography/GradientText';
 import Section from 'docs/src/layouts/Section';
 import SectionHeadline from 'docs/src/components/typography/SectionHeadline';
-import InfoCard from 'docs/src/components/action/InfoCard';
+import { InfoCard } from '@mui/docs/InfoCard';
 
 const content = [
   {

docs/src/components/productBaseUI/BaseUIEnd.tsx

@@ -6,7 +6,7 @@ import ListItem from '@mui/material/ListItem';
 import Typography from '@mui/material/Typography';
 import CompareIcon from '@mui/icons-material/Compare';
 import StyleRoundedIcon from '@mui/icons-material/StyleRounded';
-import { GlowingIconContainer } from 'docs/src/components/action/InfoCard';
+import { GlowingIconContainer } from '@mui/docs/InfoCard';
 import GetStartedButtons from 'docs/src/components/home/GetStartedButtons';
 import Section from 'docs/src/layouts/Section';
 import SectionHeadline from 'docs/src/components/typography/SectionHeadline';

docs/src/components/productBaseUI/BaseUISummary.tsx

@@ -8,7 +8,7 @@ import PhishingRoundedIcon from '@mui/icons-material/PhishingRounded';
 import Section from 'docs/src/layouts/Section';
 import SectionHeadline from 'docs/src/components/typography/SectionHeadline';
 import GradientText from 'docs/src/components/typography/GradientText';
-import InfoCard from 'docs/src/components/action/InfoCard';
+import { InfoCard } from '@mui/docs/InfoCard';
 
 const content = [
   {

docs/src/components/productCore/CoreProducts.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Grid from '@mui/material/Grid';
 import Section from 'docs/src/layouts/Section';
-import InfoCard from 'docs/src/components/action/InfoCard';
+import { InfoCard } from '@mui/docs/InfoCard';
 
 // Note: All of the commented code will be put back in once logos for each Core product are done.
 

docs/src/components/productDesignKit/DesignKitValues.tsx

@@ -6,7 +6,7 @@ import LibraryBooks from '@mui/icons-material/LibraryBooks';
 import CodeRounded from '@mui/icons-material/CodeRounded';
 import GradientText from 'docs/src/components/typography/GradientText';
 import Section from 'docs/src/layouts/Section';
-import InfoCard from 'docs/src/components/action/InfoCard';
+import { InfoCard } from '@mui/docs/InfoCard';
 
 const content = [
   {

docs/src/components/productMaterial/MaterialEnd.tsx

@@ -6,7 +6,7 @@ import ListItem from '@mui/material/ListItem';
 import Typography from '@mui/material/Typography';
 import CompareIcon from '@mui/icons-material/Compare';
 import StyleRoundedIcon from '@mui/icons-material/StyleRounded';
-import { GlowingIconContainer } from 'docs/src/components/action/InfoCard';
+import { GlowingIconContainer } from '@mui/docs/InfoCard';
 import GetStartedButtons from 'docs/src/components/home/GetStartedButtons';
 import Section from 'docs/src/layouts/Section';
 import SectionHeadline from 'docs/src/components/typography/SectionHeadline';

docs/src/components/productMaterial/MaterialHero.tsx

@@ -59,7 +59,7 @@ import IconImage from 'docs/src/components/icon/IconImage';
 import HeroContainer from 'docs/src/layouts/HeroContainer';
 import GetStartedButtons from 'docs/src/components/home/GetStartedButtons';
 import GradientText from 'docs/src/components/typography/GradientText';
-import { getDesignTokens } from 'docs/src/modules/brandingTheme';
+import { getDesignTokens } from '@mui/docs/branding';
 import { Link } from '@mui/docs/Link';
 import ROUTES from 'docs/src/route';
 

docs/src/components/productX/XPlans.tsx

@@ -6,7 +6,7 @@ import Section from 'docs/src/layouts/Section';
 import SectionHeadline from 'docs/src/components/typography/SectionHeadline';
 import GradientText from 'docs/src/components/typography/GradientText';
 import ROUTES from 'docs/src/route';
-import InfoCard from 'docs/src/components/action/InfoCard';
+import { InfoCard } from '@mui/docs/InfoCard';
 import IconImage from 'docs/src/components/icon/IconImage';
 import GetStartedButtons from 'docs/src/components/home/GetStartedButtons';