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',