diff --git a/docs/pages/design-kits.tsx b/docs/pages/design-kits.tsx index 64eecfde906434..c8259e97bfb5e2 100644 --- a/docs/pages/design-kits.tsx +++ b/docs/pages/design-kits.tsx @@ -7,8 +7,8 @@ import DesignKitHero from 'docs/src/components/productDesignKit/DesignKitHero'; import DesignKitValues from 'docs/src/components/productDesignKit/DesignKitValues'; import DesignKitDemo from 'docs/src/components/productDesignKit/DesignKitDemo'; import DesignKitFAQ from 'docs/src/components/productDesignKit/DesignKitFAQ'; -import Testimonials from 'docs/src/components/home/Testimonials'; -import HeroEnd from 'docs/src/components/home/HeroEnd'; +import SyncFeatures from 'docs/src/components/productDesignKit/SyncFeatures'; +import MaterialEnd from 'docs/src/components/productMaterial/MaterialEnd'; import BrandingCssVarsProvider from 'docs/src/BrandingCssVarsProvider'; import References, { DESIGNKITS_CUSTOMERS } from 'docs/src/components/home/References'; import AppHeaderBanner from 'docs/src/components/banner/AppHeaderBanner'; @@ -31,11 +31,11 @@ export default function DesignKits() { - + - + - + diff --git a/docs/public/static/branding/design-kits/material-sync-dark.png b/docs/public/static/branding/design-kits/material-sync-dark.png new file mode 100644 index 00000000000000..3cba4740f68b10 Binary files /dev/null and b/docs/public/static/branding/design-kits/material-sync-dark.png differ diff --git a/docs/public/static/branding/design-kits/material-sync-light.png b/docs/public/static/branding/design-kits/material-sync-light.png new file mode 100644 index 00000000000000..e0ee6491a87ccc Binary files /dev/null and b/docs/public/static/branding/design-kits/material-sync-light.png differ diff --git a/docs/public/static/branding/design-kits/sync-base1-dark.png b/docs/public/static/branding/design-kits/sync-base1-dark.png new file mode 100644 index 00000000000000..1e7b15b95aa7eb Binary files /dev/null and b/docs/public/static/branding/design-kits/sync-base1-dark.png differ diff --git a/docs/public/static/branding/design-kits/sync-base1-light.png b/docs/public/static/branding/design-kits/sync-base1-light.png new file mode 100644 index 00000000000000..be25591a7324e2 Binary files /dev/null and b/docs/public/static/branding/design-kits/sync-base1-light.png differ diff --git a/docs/public/static/branding/design-kits/sync-base2-dark.png b/docs/public/static/branding/design-kits/sync-base2-dark.png new file mode 100644 index 00000000000000..a4bbfea480d9ce Binary files /dev/null and b/docs/public/static/branding/design-kits/sync-base2-dark.png differ diff --git a/docs/public/static/branding/design-kits/sync-base2-light.png b/docs/public/static/branding/design-kits/sync-base2-light.png new file mode 100644 index 00000000000000..d2e905a4a86c0e Binary files /dev/null and b/docs/public/static/branding/design-kits/sync-base2-light.png differ diff --git a/docs/public/static/branding/design-kits/sync-shot1-dark.png b/docs/public/static/branding/design-kits/sync-shot1-dark.png new file mode 100644 index 00000000000000..674ae8ff69d79e Binary files /dev/null and b/docs/public/static/branding/design-kits/sync-shot1-dark.png differ diff --git a/docs/public/static/branding/design-kits/sync-shot1-light.png b/docs/public/static/branding/design-kits/sync-shot1-light.png new file mode 100644 index 00000000000000..78dca9bffa2f72 Binary files /dev/null and b/docs/public/static/branding/design-kits/sync-shot1-light.png differ diff --git a/docs/public/static/branding/design-kits/sync-shot3-dark.png b/docs/public/static/branding/design-kits/sync-shot3-dark.png new file mode 100644 index 00000000000000..12dcb9abb6c2c7 Binary files /dev/null and b/docs/public/static/branding/design-kits/sync-shot3-dark.png differ diff --git a/docs/public/static/branding/design-kits/sync-shot3-light.png b/docs/public/static/branding/design-kits/sync-shot3-light.png new file mode 100644 index 00000000000000..67d09a4a001969 Binary files /dev/null and b/docs/public/static/branding/design-kits/sync-shot3-light.png differ diff --git a/docs/src/components/action/Item.tsx b/docs/src/components/action/Item.tsx index 4385f5573a84ba..7d391225a73e31 100644 --- a/docs/src/components/action/Item.tsx +++ b/docs/src/components/action/Item.tsx @@ -91,7 +91,9 @@ export default function Item({ p: 2, pr: smallerIconDistance ? 3 : 2, display: 'flex', - alignItems: 'center', + flexDirection: { xs: 'column', sm: 'row' }, + alignItems: { xs: 'start', sm: 'center' }, + gap: { xs: 2, sm: 0.5 }, ...props.sx, }} > diff --git a/docs/src/components/action/NpmCopyButton.tsx b/docs/src/components/action/NpmCopyButton.tsx index e74acf024aae3b..55f45d35bc1f31 100644 --- a/docs/src/components/action/NpmCopyButton.tsx +++ b/docs/src/components/action/NpmCopyButton.tsx @@ -13,6 +13,7 @@ const Button = styled('button')(({ theme }) => ({ marginTop: 16, cursor: 'copy', padding: 0, + position: 'relative', display: 'inline-flex', alignItems: 'flex-start', justifyContent: 'center', @@ -43,8 +44,8 @@ const Button = styled('button')(({ theme }) => ({ }, '& svg': { display: 'inline-block', - position: 'relative', - right: 3, + position: 'absolute', + right: -24, top: 1, opacity: 0, transition: theme.transitions.create('opacity', { diff --git a/docs/src/components/header/HeaderNavBar.tsx b/docs/src/components/header/HeaderNavBar.tsx index 5d53a9b03d7100..a2c3f3fadff065 100644 --- a/docs/src/components/header/HeaderNavBar.tsx +++ b/docs/src/components/header/HeaderNavBar.tsx @@ -69,9 +69,9 @@ const Navigation = styled('nav')(({ theme }) => [ const PRODUCT_IDS = [ 'product-core', 'product-advanced', + 'product-toolpad', 'product-templates', 'product-design', - 'product-toolpad', ]; type ProductSubMenuProps = { @@ -282,29 +282,29 @@ export default function HeaderNavBar() {
  • } - name="Templates" - description="Fully built, out-of-the-box, templates for your application." + href={ROUTES.productToolpad} + icon={} + name="Toolpad" + chip={} + description="Low-code admin builder." />
  • } - name="Design kits" - description="Our components available in your favorite design tool." + href={ROUTES.productTemplates} + icon={} + name="Templates" + description="Fully built, out-of-the-box, templates for your application." />
  • } - name="Toolpad" - chip={} - description="Low-code admin builder." + href={ROUTES.productDesignKits} + icon={} + name="Design Kits" + description="Material UI components in your favorite design tool." />
    • diff --git a/docs/src/components/header/HeaderNavDropdown.tsx b/docs/src/components/header/HeaderNavDropdown.tsx index b48ed4d0a64b44..e625a7443e7fa6 100644 --- a/docs/src/components/header/HeaderNavDropdown.tsx +++ b/docs/src/components/header/HeaderNavDropdown.tsx @@ -71,8 +71,8 @@ const PRODUCTS = [ href: ROUTES.productTemplates, }, { - name: 'Design kits', - description: 'Our components available in your favorite design tool.', + name: 'Design Kits', + description: 'Material UI components in your favorite design tool.', href: ROUTES.productDesignKits, }, { diff --git a/docs/src/components/home/CompaniesGrid.tsx b/docs/src/components/home/CompaniesGrid.tsx index 2591dda6a9be02..691f9aefc3e043 100644 --- a/docs/src/components/home/CompaniesGrid.tsx +++ b/docs/src/components/home/CompaniesGrid.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import Grid from '@mui/material/Grid'; +import Grid from '@mui/material/Unstable_Grid2'; import IconImage, { IconImageProps } from 'docs/src/components/icon/IconImage'; export const CORE_CUSTOMERS: Array = [ @@ -189,7 +189,6 @@ export default function CompaniesGrid({ data }: { data: Array }) {data.map((imgProps) => ( ({ objectFit: 'cover', transitionProperty: 'all', transitionDuration: '150ms', - boxShadow: '0px 4px 20px rgba(61, 71, 82, 0.25)', + boxShadow: '0 4px 20px rgba(61, 71, 82, 0.2)', ...theme.applyDarkStyles({ borderColor: (theme.vars || theme).palette.grey[800], - boxShadow: '0px 4px 20px rgba(0, 0, 0, 0.6)', + boxShadow: '0 4px 20px rgba(0, 0, 0, 0.6)', }), })); @@ -40,23 +40,26 @@ const Anchor = styled('a')(({ theme }) => [ { display: 'inline-block', position: 'relative', - transitionProperty: 'all', - transitionDuration: '150ms', + transition: 'all 120ms ease', borderRadius: '50%', border: '1px solid', borderColor: (theme.vars || theme).palette.grey[200], - boxShadow: `0px 2px 12px ${alpha(theme.palette.primary[200], 0.3)}`, + boxShadow: `0 2px 12px ${alpha(theme.palette.primary[200], 0.3)}`, + backgroundColor: '#FFF', '&:hover, &:focus': { borderColor: (theme.vars || theme).palette.primary[300], - boxShadow: `0px 4px 20px ${alpha(theme.palette.primary[400], 0.3)}`, + boxShadow: `0 4px 20px ${alpha(theme.palette.primary[400], 0.3)}`, + backgroundColor: (theme.vars || theme).palette.primary[50], }, } as const, theme.applyDarkStyles({ - borderColor: (theme.vars || theme).palette.primary[900], - boxShadow: `0px 2px 12px ${alpha(theme.palette.primaryDark[800], 0.5)}`, + backgroundColor: alpha(theme.palette.primaryDark[900], 0.8), + borderColor: (theme.vars || theme).palette.primaryDark[600], + boxShadow: `0 2px 12px ${alpha(theme.palette.primaryDark[800], 0.5)}`, '&:hover, &:focus': { + backgroundColor: alpha(theme.palette.primary[900], 0.8), borderColor: (theme.vars || theme).palette.primary[700], - boxShadow: `0 2px 20px 0 ${alpha(theme.palette.primary[800], 0.5)}`, + boxShadow: `0 2px 16px 0 ${alpha(theme.palette.primary[800], 0.5)}`, }, }), ]); @@ -94,18 +97,12 @@ const DesignToolLogo = React.forwardRef< ({ - display: 'flex', - backgroundColor: '#FFF', - p: 2, - borderRadius: '50%', - ...theme.applyDarkStyles({ - backgroundColor: alpha(theme.palette.primary[900], 0.5), - }), - }), + sx={{ + display: 'flex', + p: 2, + borderRadius: '50%', ...(Array.isArray(props.sx) ? props.sx : [props.sx]), - ]} + }} > ({ - filter: 'drop-shadow(-8px 4px 20px rgba(61, 71, 82, 0.2))', transition: '0.4s', display: 'block', height: 'auto', - borderRadius: '10px', + borderRadius: 6, + border: '1px solid', + borderColor: theme.palette.divider, + filter: `drop-shadow(-2px 4px 6px ${alpha(theme.palette.grey[500], 0.5)})`, ...theme.applyDarkStyles({ - filter: 'drop-shadow(-8px 4px 20px rgba(0, 0, 0, 0.4))', + filter: `drop-shadow(-2px 4px 6px ${alpha(theme.palette.common.black, 0.2)})`, + borderColor: theme.palette.primaryDark[600], }), })); -export default function TemplateDemo() { +interface MaterialFigmaComponentsProps { + fadeIn?: boolean; +} + +export function MaterialFigmaComponents({ fadeIn }: MaterialFigmaComponentsProps) { + return ( + + + theme.applyDarkStyles({ + '&:hover': { + '& img': { + filter: 'drop-shadow(-16px 12px 20px rgba(0, 0, 0, 0.4))', + }, + }, + }), + ]} + > + Material UI Button component variations in the Figma Design Kit. + theme.applyDarkStyles({ + content: `url(/static/branding/design-kits/Button-dark.jpeg)`, + }) + } + /> + Material UI Alert component variations in the Figma Design Kit. + theme.applyDarkStyles({ + content: `url(/static/branding/design-kits/Alert-dark.jpeg)`, + }) + } + /> + Material UI Slider component variations in the Figma Design Kit. + theme.applyDarkStyles({ + content: `url(/static/branding/design-kits/Slider-dark.jpeg)`, + }) + } + /> + + + ); +} + +export function MaterialDesignKitInfo() { + return ( + + + + Available in: + + img': { width: 20, height: 20 } }}> + Figma logo. + Sketch logo. + Adobe XD logo. + + + + We frequently update them to stay up-to-date with the latest release. + + + + + + + ); +} + +export default function DesignKitsDemo() { const [demo, setDemo] = React.useState(DEMOS[0]); const icons = { [DEMOS[0]]: , @@ -41,15 +200,15 @@ export default function TemplateDemo() { return (
    - + - Upgrade your design workflow + Enhance your design workflow } - description="The Design kits contain many of the Material UI components with states, variations, colors, typography, and icons. We frequently update it to sync with the most up-to-date release." + description="The Design Kits contain many of the Material UI components with states, variations, colors, typography, and icons." /> {DEMOS.map((name) => ( @@ -67,102 +226,19 @@ export default function TemplateDemo() { /> - + - - - theme.applyDarkStyles({ - '&:hover': { - '& img': { - filter: 'drop-shadow(-16px 12px 20px rgba(0, 0, 0, 0.4))', - }, - }, - }), - ]} - > - - theme.applyDarkStyles({ - content: `url(/static/branding/design-kits/Button-dark.jpeg)`, - }) - } - /> - - theme.applyDarkStyles({ - content: `url(/static/branding/design-kits/Alert-dark.jpeg)`, - }) - } - /> - - theme.applyDarkStyles({ - content: `url(/static/branding/design-kits/Slider-dark.jpeg)`, - }) - } - /> - - + ({ @@ -179,8 +255,8 @@ export default function TemplateDemo() { ({ @@ -196,47 +272,7 @@ export default function TemplateDemo() { /> - - - - Available for: - - img': { width: 26, height: 26 } }}> - - - - - - - + diff --git a/docs/src/components/productDesignKit/DesignKitFAQ.tsx b/docs/src/components/productDesignKit/DesignKitFAQ.tsx index 5e4f052cc9a4c3..25ab7e0e454d5f 100644 --- a/docs/src/components/productDesignKit/DesignKitFAQ.tsx +++ b/docs/src/components/productDesignKit/DesignKitFAQ.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import { styled } from '@mui/material/styles'; -import Box from '@mui/material/Box'; -import Grid from '@mui/material/Grid'; +import Grid from '@mui/material/Unstable_Grid2'; import Button from '@mui/material/Button'; import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded'; import Paper from '@mui/material/Paper'; @@ -31,18 +30,27 @@ const faqData = [ The number of licenses purchased must correspond to the maximum number of editors working concurrently in a 24 hour period. An editor is somebody contributing changes to the designed - screens that use the UI kits. No licenses are required for viewing the designs. + screens that use the Design Kits. No licenses are required for viewing the designs. ), }, { - summary: 'The UI kit got an update. How do I get it?', + summary: 'The Design Kit got an update. How do I get it?', detail: ( We'll send you an email when a new release is available. You can access the item on the{' '} download page - of your store account. You can find a detailed description of the changes under the - "Changelog" tab on this page. + of your store account and find a detailed description of the changes under + the"Changelog" tab on this page. + + ), + }, + { + summary: 'Is the Material UI Sync plugin paid?', + detail: ( + + No. We're still in alpha mode and rolling out more features progressively, as per your + feedback. We might introduce paid tiers in the future, though. ), }, @@ -64,7 +72,7 @@ const faqData = [ detail: ( We aim to keep feature parity between the Figma, Sketch, and Adobe XD kits where possible. - We have a 50% off coupon for past customers who want to switch between two design tools. + We have a 50% off coupon for past customers who want to switch between them. ), }, @@ -77,7 +85,7 @@ const Accordion = styled(MuiAccordion)(({ theme }) => ({ borderRadius: theme.shape.borderRadius, }, '&:hover': { - boxShadow: '1px 1px 20px 0 rgb(90 105 120 / 20%)', + boxShadow: '1px 1px 8px 0 rgb(90 105 120 / 20%)', }, '&:not(:last-of-type)': { marginBottom: theme.spacing(2), @@ -142,12 +150,12 @@ export default function DesignKitFAQ() { Frequently asked questions - + {renderItem(0)} {renderItem(1)} {renderItem(2)} - + {renderItem(3)} {renderItem(4)} - - - Got any questions unanswered or need more help? - - - + + Got any questions unanswered or need more help? + + From community help to premium business support, we're here to help. + } right={ @@ -69,9 +63,10 @@ export default function TemplateHero() { width: '100%', height: '100%', zIndex: 1, - background: `linear-gradient(90deg, ${ - (theme.vars || theme).palette.primaryDark[900] - } 1%, ${alpha(theme.palette.primaryDark[900], 0.5)})`, + background: `linear-gradient(90deg, ${alpha( + theme.palette.primaryDark[900], + 0.8, + )} 1%, ${alpha(theme.palette.primaryDark[900], 0.1)})`, opacity: 0, ...theme.applyDarkStyles({ opacity: 1, diff --git a/docs/src/components/productDesignKit/DesignKitValues.tsx b/docs/src/components/productDesignKit/DesignKitValues.tsx index 72bca07d667fdf..489f8105933d8d 100644 --- a/docs/src/components/productDesignKit/DesignKitValues.tsx +++ b/docs/src/components/productDesignKit/DesignKitValues.tsx @@ -3,10 +3,11 @@ import Typography from '@mui/material/Typography'; import Grid from '@mui/material/Unstable_Grid2'; import Palette from '@mui/icons-material/Palette'; import LibraryBooks from '@mui/icons-material/LibraryBooks'; +import { InfoCard } from '@mui/docs/InfoCard'; 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 '@mui/docs/InfoCard'; +import SectionHeadline from 'docs/src/components/typography/SectionHeadline'; const content = [ { @@ -25,21 +26,23 @@ const content = [ icon: , title: 'For developers', description: - 'Effortlessly communicate with designers using the same language around the MUI Core components props and variants.', + 'Effortlessly communicate with designers using the same language around the Material UI components props and variants.', }, ]; -function DesignKitValues() { +export default function DesignKitValues() { return ( -
    - - Collaboration - - - Be more efficient designing and developing with the same - library - - +
    + + Be more efficient designing and developing with the same + library + + } + /> + {content.map(({ icon, title, description }) => ( @@ -49,5 +52,3 @@ function DesignKitValues() {
    ); } - -export default DesignKitValues; diff --git a/docs/src/components/productDesignKit/SyncFeatures.tsx b/docs/src/components/productDesignKit/SyncFeatures.tsx new file mode 100644 index 00000000000000..d2973f10529665 --- /dev/null +++ b/docs/src/components/productDesignKit/SyncFeatures.tsx @@ -0,0 +1,395 @@ +import * as React from 'react'; +import { styled, alpha } from '@mui/material/styles'; +import Box from '@mui/material/Box'; +import Grid from '@mui/material/Unstable_Grid2'; +import Button from '@mui/material/Button'; +import Typography from '@mui/material/Typography'; +import Fade from '@mui/material/Fade'; +import FormatShapesRoundedIcon from '@mui/icons-material/FormatShapesRounded'; +import SvgStorybook from 'docs/src/icons/SvgStorybook'; +import ImagesearchRollerRoundedIcon from '@mui/icons-material/ImagesearchRollerRounded'; +import Section from 'docs/src/layouts/Section'; +import SectionHeadline from 'docs/src/components/typography/SectionHeadline'; +import GradientText from 'docs/src/components/typography/GradientText'; +import Item, { Group } from 'docs/src/components/action/Item'; +import Highlighter from 'docs/src/components/action/Highlighter'; +import Frame from 'docs/src/components/action/Frame'; +import { Link } from '@mui/docs/Link'; + +const Image = styled('img')(({ theme }) => ({ + transition: '0.4s', + display: 'block', + height: 'auto', + borderRadius: 6, + border: '1px solid', + borderColor: theme.palette.divider, + filter: `drop-shadow(-2px 4px 6px ${alpha(theme.palette.grey[500], 0.5)})`, + ...theme.applyDarkStyles({ + filter: `drop-shadow(-2px 4px 6px ${alpha(theme.palette.common.black, 0.2)})`, + borderColor: theme.palette.primaryDark[600], + }), +})); + +export default function ConnectFeatures() { + const [index, setIndex] = React.useState(0); + function getSelectedProps(i: number) { + return { + selected: index === i, + sx: { '& svg': { opacity: index === i ? 1 : 0.5 } }, + }; + } + return ( +
    + + + + The way developers and designers ship faster + + } + description="The Sync plugin is perfect for designing and developing using the Material UI React library and Design Kit." + /> + + setIndex(0)}> + } + title="Theme customization" + description="Generate theme code with custom colors, typography styles, shadows, spacing values, and border-radius." + /> + + setIndex(1)}> + } + title="Component customization" + description="Fully customize a component's design across multiple states and then generate the corresponding theme code." + /> + + setIndex(2)}> + } + title="Preview your changes on Storybook" + description="Quickly visualize all the changes you run through Sync on a built-in Storybook preview instance." + /> + + + + + + + + {index === 0 && ( + + ({ + width: '100%', + height: '100%', + '& img': { + position: 'absolute', + '&:nth-of-type(1)': { + visibility: { xs: 'hidden', sm: 'visible' }, + width: { xs: 240, sm: 600 }, + top: 100, + left: '50%', + transform: 'translate(-40%)', + }, + '&:nth-of-type(2)': { + width: { xs: 240, sm: 560 }, + top: { xs: 100, sm: 40 }, + left: { xs: '60%', sm: '40%' }, + transform: { + xs: 'scale(1.8) translate(-20%)', + sm: 'scale(1) translate(0%)', + }, + }, + }, + '&:hover': { + '& img': { + '&:nth-of-type(2)': { + top: { xs: 100, sm: 60 }, + transform: { + xs: 'scale(1.8) translate(-20%)', + sm: 'scale(1.1) translate(-15%)', + }, + filter: { + xs: 'auto', + sm: `drop-shadow(-16px 12px 20px ${alpha( + theme.palette.grey[600], + 0.5, + )})`, + }, + }, + }, + }, + ...theme.applyDarkStyles({ + '&:hover': { + '& img': { + '&:nth-of-type(2)': { + filter: { + xs: 'auto', + sm: `drop-shadow(-16px 12px 20px ${alpha( + theme.palette.common.black, + 0.8, + )})`, + }, + }, + filter: `drop-shadow(-16px 12px 20px ${alpha( + theme.palette.common.black, + 0.2, + )})`, + }, + }, + }), + })} + > + The Material UI Design Kit for Figma. + theme.applyDarkStyles({ + content: `url(/static/branding/design-kits/sync-base1-dark.png)`, + }) + } + /> + The Material UI Sync plugin displaying theme code. + theme.applyDarkStyles({ + content: `url(/static/branding/design-kits/sync-shot1-dark.png)`, + }) + } + /> + + + )} + {index === 1 && ( + + ({ + width: '100%', + height: '100%', + '& img': { + position: 'absolute', + '&:nth-of-type(1)': { + visibility: { xs: 'hidden', sm: 'visible' }, + width: { xs: 240, sm: 600 }, + top: 100, + left: '50%', + transform: 'translate(-40%)', + }, + '&:nth-of-type(2)': { + width: { xs: 240, sm: 560 }, + top: { xs: 100, sm: 40 }, + left: { xs: '60%', sm: '50%' }, + transform: { + xs: 'scale(1.8) translate(-20%)', + sm: 'none', + }, + }, + }, + '&:hover': { + '& img': { + '&:nth-of-type(2)': { + top: { xs: 100, sm: 60 }, + transform: { + xs: 'scale(1.8) translate(-20%)', + sm: 'scale(1.1) translate(-30%)', + }, + filter: { + xs: 'auto', + sm: `drop-shadow(-16px 12px 20px ${alpha( + theme.palette.grey[600], + 0.5, + )})`, + }, + }, + }, + }, + ...theme.applyDarkStyles({ + '&:hover': { + '& img': { + '&:nth-of-type(2)': { + filter: { + xs: 'auto', + sm: `drop-shadow(-16px 12px 20px ${alpha( + theme.palette.common.black, + 0.8, + )})`, + }, + }, + filter: `drop-shadow(-16px 12px 20px ${alpha( + theme.palette.common.black, + 0.2, + )})`, + }, + }, + }), + })} + > + The Material UI Design Kit for Figma. + theme.applyDarkStyles({ + content: `url(/static/branding/design-kits/sync-base2-dark.png)`, + }) + } + /> + The Material UI Sync plugin displaying theme code. + theme.applyDarkStyles({ + content: `url(/static/branding/design-kits/material-sync-dark.png)`, + }) + } + /> + + + )} + {index === 2 && ( + + ({ + width: '100%', + height: '100%', + '& img': { + position: 'absolute', + '&:nth-of-type(1)': { + visibility: { xs: 'hidden', sm: 'visible' }, + width: { xs: 240, sm: 600 }, + top: 100, + left: '50%', + transform: 'translate(-40%)', + }, + '&:nth-of-type(2)': { + width: { xs: 240, sm: 560 }, + top: { xs: 100, sm: 40 }, + left: { xs: '60%', sm: '40%' }, + transform: { + xs: 'scale(1.8) translate(-20%)', + sm: 'none', + }, + }, + }, + '&:hover': { + '& img': { + '&:nth-of-type(2)': { + top: { xs: 100, sm: 60 }, + transform: { + xs: 'scale(1.8) translate(-20%)', + sm: 'scale(1.1) translate(-25%)', + }, + filter: { + xs: 'auto', + sm: `drop-shadow(-16px 12px 20px ${alpha( + theme.palette.grey[600], + 0.5, + )})`, + }, + }, + }, + }, + ...theme.applyDarkStyles({ + '&:hover': { + '& img': { + '&:nth-of-type(2)': { + filter: { + xs: 'auto', + sm: `drop-shadow(-16px 12px 20px ${alpha( + theme.palette.common.black, + 0.8, + )})`, + }, + }, + filter: `drop-shadow(-16px 12px 20px ${alpha( + theme.palette.common.black, + 0.2, + )})`, + }, + }, + }), + })} + > + The Material UI Design Kit for Figma. + theme.applyDarkStyles({ + content: `url(/static/branding/design-kits/sync-base2-dark.png)`, + }) + } + /> + The Material UI Sync plugin displaying theme code. + theme.applyDarkStyles({ + content: `url(/static/branding/design-kits/sync-shot3-dark.png)`, + }) + } + /> + + + )} + + + + + Get the beta version of Material UI Sync now! + + + There's still a lot to do, and we're looking forward to hearing from all + of you. + + + + + + + + + +
    + ); +} diff --git a/docs/src/components/productMaterial/MaterialDesignKits.tsx b/docs/src/components/productMaterial/MaterialDesignKits.tsx index ef65d052dee64a..20cb16e9d070cf 100644 --- a/docs/src/components/productMaterial/MaterialDesignKits.tsx +++ b/docs/src/components/productMaterial/MaterialDesignKits.tsx @@ -1,244 +1,204 @@ import * as React from 'react'; -import { styled } from '@mui/material/styles'; +import { styled, alpha } from '@mui/material/styles'; import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; -import Grid from '@mui/material/Grid'; +import Grid from '@mui/material/Unstable_Grid2'; import Fade from '@mui/material/Fade'; import Typography from '@mui/material/Typography'; -import LaunchRounded from '@mui/icons-material/LaunchRounded'; -import TextFieldsRounded from '@mui/icons-material/TextFieldsRounded'; -import WidgetsRounded from '@mui/icons-material/WidgetsRounded'; -import ToggleOnRounded from '@mui/icons-material/ToggleOnRounded'; +import ExtensionRoundedIcon from '@mui/icons-material/ExtensionRounded'; +import DrawRoundedIcon from '@mui/icons-material/DrawRounded'; import Section from 'docs/src/layouts/Section'; import SectionHeadline from 'docs/src/components/typography/SectionHeadline'; import GradientText from 'docs/src/components/typography/GradientText'; import Item, { Group } from 'docs/src/components/action/Item'; import Highlighter from 'docs/src/components/action/Highlighter'; -import More from 'docs/src/components/action/More'; import Frame from 'docs/src/components/action/Frame'; +import { + MaterialDesignKitInfo, + MaterialFigmaComponents, +} from 'docs/src/components/productDesignKit/DesignKitDemo'; import { Link } from '@mui/docs/Link'; -const DEMOS = ['Components', 'Branding', 'Iconography']; - const Image = styled('img')(({ theme }) => ({ - filter: 'drop-shadow(-2px 4px 4px rgba(61, 71, 82, 0.1))', transition: '0.4s', display: 'block', height: 'auto', - borderRadius: '10px', + borderRadius: 6, + border: '1px solid', + borderColor: theme.palette.divider, + filter: `drop-shadow(-2px 4px 6px ${alpha(theme.palette.grey[500], 0.5)})`, ...theme.applyDarkStyles({ - filter: 'drop-shadow(-2px 4px 4px rgba(0, 0, 0, 0.3))', + filter: `drop-shadow(-2px 4px 6px ${alpha(theme.palette.common.black, 0.2)})`, + borderColor: theme.palette.primaryDark[600], }), })); -export default function MaterialDesignKits() { - const [demo, setDemo] = React.useState(DEMOS[0]); - const icons = { - [DEMOS[0]]: , - [DEMOS[1]]: , - [DEMOS[2]]: , - }; +interface MaterialDesignKitsProps { + gradient?: boolean; +} + +export default function MaterialDesignKits({ gradient }: MaterialDesignKitsProps) { + const [customized, setCustomized] = React.useState(true); + return ( -
    +
    - - - - Enhance your design workflow - - } - description="The Design kits contain many of the Material UI components with states, variations, colors, typography, and icons. We frequently update it to sync with the most up-to-date release." - /> - - - {DEMOS.map((name) => ( - setDemo(name)}> - - - ))} - + + + Enhance your design workflow + + } + description="Reach out for the Figma Design Kit and the Sync plugin to bridge the gap between development and design when using Material UI." + /> + + setCustomized(true)}> + } + title="Design Kit" + description="Get many Material UI components with states, variations, colors, typography, and icons on your preferred design tool." + /> + + setCustomized(false)}> + } + title="Sync plugin" + description="Quickly generate a Material UI theme file with token and component customizations done on Figma." + /> + - + - + + ({ + display: !customized ? 'auto' : 'none', + width: '100%', + height: '100%', + '& img': { + position: 'absolute', + '&:nth-of-type(1)': { + visibility: { xs: 'hidden', sm: 'visible' }, + width: { xs: 240, sm: 600 }, + top: 100, left: '50%', - width: { xs: 240, sm: 300 }, - '&:nth-of-type(1)': { - top: 120, - transform: 'translate(-70%)', + transform: 'translate(-40%)', + }, + '&:nth-of-type(2)': { + width: { xs: 240, sm: 560 }, + top: { xs: 100, sm: 40 }, + left: { xs: '60%', sm: '60%' }, + transform: { + xs: 'scale(1.8) translate(-20%)', + sm: 'none', }, + }, + }, + '&:hover': { + '& img': { '&:nth-of-type(2)': { - top: 80, - transform: 'translate(-50%)', - }, - '&:nth-of-type(3)': { - top: 40, - transform: 'translate(-30%)', + top: { xs: 100, sm: 60 }, + transform: { + xs: 'scale(1.8) translate(-20%)', + sm: 'scale(1.1) translate(-30%)', + }, + filter: { + xs: 'auto', + sm: `drop-shadow(-16px 12px 20px ${alpha( + theme.palette.grey[600], + 0.5, + )})`, + }, }, }, + }, + ...theme.applyDarkStyles({ '&:hover': { '& img': { - filter: 'drop-shadow(-16px 12px 20px rgba(61, 71, 82, 0.2))', - '&:nth-of-type(1)': { - top: 0, - transform: 'scale(0.8) translate(-108%) rotateY(30deg)', - }, '&:nth-of-type(2)': { - top: 40, - transform: 'scale(0.8) translate(-54%) rotateY(30deg)', - }, - '&:nth-of-type(3)': { - top: 40, - transform: 'scale(0.8) translate(-0%) rotateY(30deg)', + filter: { + xs: 'auto', + sm: `drop-shadow(-16px 12px 20px ${alpha( + theme.palette.common.black, + 0.8, + )})`, + }, }, + filter: `drop-shadow(-16px 12px 20px ${alpha( + theme.palette.common.black, + 0.2, + )})`, }, }, - }, - (theme) => - theme.applyDarkStyles({ - '&:hover': { - '& img': { - filter: 'drop-shadow(-16px 12px 20px rgba(0, 0, 0, 0.4))', - }, - }, - }), - ]} + }), + })} > theme.applyDarkStyles({ - content: `url(/static/branding/design-kits/Button-dark.jpeg)`, + content: `url(/static/branding/design-kits/sync-base2-dark.png)`, }) } /> theme.applyDarkStyles({ - content: `url(/static/branding/design-kits/Alert-dark.jpeg)`, - }) - } - /> - - theme.applyDarkStyles({ - content: `url(/static/branding/design-kits/Slider-dark.jpeg)`, + content: `url(/static/branding/design-kits/material-sync-dark.png)`, }) } /> - - ({ - width: { sm: 400 }, - position: 'absolute', - left: '50%', - top: '50%', - transform: 'translate(-50%, -50%)', - ...theme.applyDarkStyles({ - content: `url(/static/branding/design-kits/Colors-dark.jpeg)`, - }), - })} - /> - - - ({ - width: { sm: 500 }, - position: 'absolute', - left: '50%', - top: 60, - transform: 'translate(-40%)', - ...theme.applyDarkStyles({ - content: `url(/static/branding/design-kits/Icons-dark.jpeg)`, - }), - })} - /> - - - - - Available for: + {customized ? ( + + ) : ( + + + Get the beta version of Material UI Sync now! + + + There's still a lot to do, and we're looking forward to hearing from all + of you. - img': { width: 26, height: 26 } }}> - - - + + + - - - + + )} diff --git a/docs/src/components/productMaterial/MaterialEnd.tsx b/docs/src/components/productMaterial/MaterialEnd.tsx index be40de0a8cfb73..e3308a4e06a972 100644 --- a/docs/src/components/productMaterial/MaterialEnd.tsx +++ b/docs/src/components/productMaterial/MaterialEnd.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import { alpha } from '@mui/material/styles'; +import Box from '@mui/material/Box'; import Grid from '@mui/material/Unstable_Grid2'; import List from '@mui/material/List'; import ListItem from '@mui/material/ListItem'; @@ -14,9 +15,14 @@ import GradientText from 'docs/src/components/typography/GradientText'; import { Link } from '@mui/docs/Link'; import ROUTES from 'docs/src/route'; -export default function MaterialEnd() { +interface MaterialEndProps { + noFaq?: boolean; +} + +export default function MaterialEnd({ noFaq }: MaterialEndProps) { return (
    - - + {noFaq ? ( + @@ -49,44 +56,70 @@ export default function MaterialEnd() { secondaryUrl={ROUTES.freeTemplates} altInstallation="npm install @mui/material @emotion/react @emotion/styled" /> - - - li': { alignItems: 'flex-start' } }}> - - } /> -
    - - Material UI vs. Base UI - - - Material UI implements Google's Material Design whereas Base UI features many - of the same components, but without the Material Design implementation. - -
    -     - - } /> -
    - - Does it support Material Design 3? - - - The adoption of Material Design 3 is tentatively planned for Material UI v7. See - the{' '} - - the release schedule - {' '} - and follow{' '} - - this GitHub issue - {' '} - for future updates. + + ) : ( + + + + Join our global community -
    -     -     + } + description={ + + Material UI wouldn't be possible without our global community of + contributors. Join us today to get help when you need it, and lend a hand when you + can. + + } + /> + +     + + li': { alignItems: 'flex-start' } }}> + + } /> +
    + + Material UI vs. Base UI + + + Material UI implements Google's Material Design whereas Base UI features + many of the same components, but without the Material Design implementation. + +
    +     + + } /> +
    + + Does it support Material Design 3? + + + The adoption of Material Design 3 is tentatively planned for Material UI v7. See + the{' '} + + the release schedule + {' '} + and follow{' '} + + this GitHub issue + {' '} + for future updates. + +
    +     +     +     - + )}
    ); } diff --git a/docs/src/icons/SvgStorybook.tsx b/docs/src/icons/SvgStorybook.tsx new file mode 100644 index 00000000000000..543a081c1686c6 --- /dev/null +++ b/docs/src/icons/SvgStorybook.tsx @@ -0,0 +1,22 @@ +import * as React from 'react'; +import RootSvg, { RootSvgProps } from 'docs/src/icons/RootSvg'; + +export default function SvgStorybook(props: RootSvgProps) { + return ( + + + + ); +} diff --git a/docs/src/layouts/AppFooter.tsx b/docs/src/layouts/AppFooter.tsx index c0894f21ec8e3f..1ae5ba22cff1ff 100644 --- a/docs/src/layouts/AppFooter.tsx +++ b/docs/src/layouts/AppFooter.tsx @@ -85,12 +85,6 @@ export default function AppFooter(props: AppFooterProps) { Toolpad - - Templates - - - Design kits - @@ -100,7 +94,7 @@ export default function AppFooter(props: AppFooterProps) { Material Icons - Free templates + Templates Components @@ -108,8 +102,8 @@ export default function AppFooter(props: AppFooterProps) { Customization - - Theming + + Design Kits diff --git a/packages/mui-docs/src/branding/brandingTheme.ts b/packages/mui-docs/src/branding/brandingTheme.ts index d6e428314aeeee..59013ee0e1d539 100644 --- a/packages/mui-docs/src/branding/brandingTheme.ts +++ b/packages/mui-docs/src/branding/brandingTheme.ts @@ -485,7 +485,7 @@ export function getThemedComponents(): ThemeOptions { '&:hover > span': { transform: 'translateX(2px)' }, }), ...(ownerState.size === 'small' && { - padding: theme.spacing('6px', 1), + padding: theme.spacing('6px', 1.5), fontFamily: theme.typography.fontFamily, fontSize: defaultTheme.typography.pxToRem(13), fontWeight: theme.typography.fontWeightSemiBold,