diff --git a/docs/pages/connect.tsx b/docs/pages/connect.tsx index 2ee1dab1cbbf09..f8e6ddeb079c1e 100644 --- a/docs/pages/connect.tsx +++ b/docs/pages/connect.tsx @@ -22,7 +22,7 @@ const Image = styled('img')(({ theme }) => ({ height: 'auto', borderRadius: 0, border: 'none', - filter: `drop-shadow(-2px 4px 6px ${alpha(theme.palette.primary[200], 0.5)})`, + filter: `drop-shadow(-2px 4px 12px ${alpha(theme.palette.primary[200], 0.3)})`, overflow: 'clip', backgroundClip: 'padding-box', [theme.breakpoints.up('sm')]: { @@ -32,7 +32,7 @@ const Image = styled('img')(({ theme }) => ({ }, ...theme.applyDarkStyles({ borderColor: theme.palette.primaryDark[600], - filter: `drop-shadow(-2px 6px 24px ${alpha(theme.palette.primary[900], 0.8)})`, + filter: `drop-shadow(-2px 4px 12px ${alpha(theme.palette.primary[900], 0.8)})`, }), })); @@ -68,8 +68,10 @@ export default function Connect() { description="Connect is a Figma plugin that exports a full-fledged Material UI theme to get your design customization up as fast as possible." /> diff --git a/docs/src/components/productConnect/ConnectFeatures.tsx b/docs/src/components/productConnect/ConnectFeatures.tsx index 353f1f6cd55034..8d1f6bcc9737d5 100644 --- a/docs/src/components/productConnect/ConnectFeatures.tsx +++ b/docs/src/components/productConnect/ConnectFeatures.tsx @@ -55,21 +55,21 @@ export default function ConnectFeatures() { } title="Customize your design tokens" - description="Visually tweak your colors, typography styles, shadows, spacing values, and border-radius through Figma's variables panel. Then, generate the theme with these changes!" + description="Change your colors, typography styles, shadows, spacing values, and border-radius through Figma's variables panel. Then, quickly generate a theme with these changes." /> setIndex(1)}> } title="Redesign your components" - description="Want to make your primary button fully rounded and with lowercase text? Use Connect to customize component styles." + description="Want to make your primary button fully rounded and with lowercase text? Use Connect to output code for custom component styles." /> setIndex(2)}> } title="Preview your changes on Storybook" - description="All of the changes you run through the Connect plugin can also be visualized on a baked-in Storybook preview instance." + description="All of the changes you run through the Connect plugin can also be visualized on a built-in Storybook preview instance." /> @@ -125,7 +125,7 @@ export default function ConnectFeatures() { top: { xs: 100, sm: 60 }, transform: { xs: 'scale(1.8) translate(-20%)', - sm: 'scale(1.1) translate(-25%)', + sm: 'scale(1.1) translate(-15%)', }, filter: { xs: 'auto', @@ -299,7 +299,7 @@ export default function ConnectFeatures() { top: { xs: 100, sm: 60 }, transform: { xs: 'scale(1.8) translate(-20%)', - sm: 'scale(1.1) translate(-30%)', + sm: 'scale(1.1) translate(-25%)', }, filter: { xs: 'auto',