Skip to content

Commit

Permalink
[website] Migrate Design-kits page to use CSS theme variables (mui#34920
Browse files Browse the repository at this point in the history 
)
  • Loading branch information
@jesrodri
jesrodri authored and felipe.richter committed Dec 6, 2022
1 parent b83d290 commit db5bc58
Show file tree
Hide file tree
Showing 5 changed files with 161 additions and 127 deletions.
6 changes: 3 additions & 3 deletions docs/pages/design-kits.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,13 @@ 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 BrandingProvider from 'docs/src/BrandingProvider';
import BrandingCssVarsProvider from 'docs/src/BrandingCssVarsProvider';
import References, { DESIGNKITS_CUSTOMERS } from 'docs/src/components/home/References';
import AppHeaderBanner from 'docs/src/components/banner/AppHeaderBanner';

export default function DesignKits() {
return (
<BrandingProvider>
<BrandingCssVarsProvider>
<Head
title="MUI in your favorite design tool"
description="Pick your favorite design tool to enjoy and use MUI components. Boost consistency and facilitate communication when working with developers."
Expand All @@ -34,6 +34,6 @@ export default function DesignKits() {
</main>
<Divider />
<AppFooter />
</BrandingProvider>
</BrandingCssVarsProvider>
);
}
123 changes: 62 additions & 61 deletions docs/src/components/home/DesignKits.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,30 +20,35 @@ const Image = styled('img')(({ theme }) => ({
height: 450 / ratio,
},
border: '6px solid',
borderColor: theme.palette.mode === 'dark' ? theme.palette.grey[800] : theme.palette.grey[400],
borderColor: (theme.vars || theme).palette.grey[400],
borderRadius: theme.shape.borderRadius,
objectFit: 'cover',
transitionProperty: 'all',
transitionDuration: '150ms',
boxShadow:
theme.palette.mode === 'dark'
? '0px 4px 20px rgba(0, 0, 0, 0.6)'
: '0px 4px 20px rgba(61, 71, 82, 0.25)',
boxShadow: '0px 4px 20px rgba(61, 71, 82, 0.25)',
...theme.applyDarkStyles({
borderColor: (theme.vars || theme).palette.grey[800],
boxShadow: '0px 4px 20px rgba(0, 0, 0, 0.6)',
}),
}));

const Anchor = styled('a')(({ theme }) => ({
display: 'inline-block',
position: 'relative',
transitionProperty: 'all',
transitionDuration: '150ms',
borderRadius: '50%',
'&:hover, &:focus': {
boxShadow:
theme.palette.mode === 'dark'
? `0 6px 20px 0 ${alpha(theme.palette.primaryDark[100], 0.5)}`
: '0 6px 20px 0 rgba(0,0,0,0.2)',
const Anchor = styled('a')(({ theme }) => [
{
display: 'inline-block',
position: 'relative',
transitionProperty: 'all',
transitionDuration: '150ms',
borderRadius: '50%',
'&:hover, &:focus': {
boxShadow: '0 6px 20px 0 rgba(0,0,0,0.2)',
},
},
}));
theme.applyDarkStyles({
'&:hover, &:focus': {
boxShadow: `0 6px 20px 0 ${alpha(theme.palette.primaryDark[100], 0.5)}`,
},
}),
]);

const DesignToolLink = React.forwardRef<
HTMLAnchorElement,
Expand Down Expand Up @@ -80,15 +85,15 @@ const DesignToolLogo = React.forwardRef<
src={`/static/branding/design-kits/designkits-${brand}.png`}
alt=""
{...props}
sx={{
boxShadow: (theme) =>
`0px 3.57436px 44.6795px ${
theme.palette.mode === 'dark'
? theme.palette.primaryDark[900]
: 'rgba(90, 105, 120, 0.36)'
}`,
...props.sx,
}}
sx={[
(theme) => ({
boxShadow: `0px 3.57436px 44.6795px ${'rgba(90, 105, 120, 0.36)'}`,
...theme.applyDarkStyles({
boxShadow: `0px 3.57436px 44.6795px ${(theme.vars || theme).palette.primaryDark[900]}`,
}),
}),
...(Array.isArray(props.sx) ? props.sx : [props.sx]),
]}
/>
);
});
Expand Down Expand Up @@ -225,64 +230,60 @@ export default function DesignKits() {
}}
>
<Box
sx={{
sx={(theme) => ({
position: 'absolute',
width: '100%',
height: '100%',
bgcolor: (theme) => (theme.palette.mode === 'dark' ? 'primaryDark.900' : 'grey.50'),
bgcolor: 'grey.50',
opacity: 0.6,
zIndex: 1,
}}
...theme.applyDarkStyles({
bgcolor: 'primaryDark.900',
}),
})}
/>
<Box
sx={{
sx={(theme) => ({
display: { xs: 'block', md: 'none' },
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
background: (theme) =>
`linear-gradient(to bottom, ${
theme.palette.mode === 'dark'
? theme.palette.primaryDark[900]
: theme.palette.grey[50]
} 0%, ${
theme.palette.mode === 'dark'
? alpha(theme.palette.primaryDark[900], 0)
: 'rgba(255,255,255,0)' // transparent does not work in Safari & Mobile device
} 30%, ${
theme.palette.mode === 'dark'
? alpha(theme.palette.primaryDark[900], 0)
: 'rgba(255,255,255,0)' // transparent does not work in Safari & Mobile device
} 70%, ${
theme.palette.mode === 'dark'
? theme.palette.primaryDark[900]
: theme.palette.grey[50]
} 100%)`,
background: `linear-gradient(to bottom, ${(theme.vars || theme).palette.grey[50]} 0%, ${
'rgba(255,255,255,0)' // transparent does not work in Safari & Mobile device
} 30%, ${
'rgba(255,255,255,0)' // transparent does not work in Safari & Mobile device
} 70%, ${(theme.vars || theme).palette.grey[50]} 100%)`,
zIndex: 2,
}}
...theme.applyDarkStyles({
background: `linear-gradient(to bottom, ${
(theme.vars || theme).palette.primaryDark[900]
} 0%, ${alpha((theme.vars || theme).palette.primaryDark[900], 0)} 30%, ${alpha(
(theme.vars || theme).palette.primaryDark[900],
0,
)} 70%, ${(theme.vars || theme).palette.primaryDark[900]} 100%)`,
}),
})}
/>
<Box
sx={{
sx={(theme) => ({
display: { xs: 'none', md: 'block' },
position: 'absolute',
top: 0,
left: 0,
width: 400,
height: '100%',
background: (theme) =>
`linear-gradient(to right, ${
theme.palette.mode === 'dark'
? theme.palette.primaryDark[900]
: theme.palette.grey[50]
}, ${
theme.palette.mode === 'dark'
? alpha(theme.palette.primaryDark[900], 0)
: 'rgba(255,255,255,0)' // transparent does not work in Safari & Mobile device
})`,
background: `linear-gradient(to right, ${(theme.vars || theme).palette.grey[50]}, ${
'rgba(255,255,255,0)' // transparent does not work in Safari & Mobile device
})`,
zIndex: 2,
}}
...theme.applyDarkStyles({
background: `linear-gradient(to right, ${
(theme.vars || theme).palette.primaryDark[900]
}, ${alpha((theme.vars || theme).palette.primaryDark[900], 0)})`,
}),
})}
/>
<DesignKitTools
sx={{
Expand Down
120 changes: 73 additions & 47 deletions docs/src/components/productDesignKit/DesignKitDemo.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from 'react';
import { useTheme, styled } from '@mui/material/styles';
import { styled } from '@mui/material/styles';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Grid from '@mui/material/Grid';
Expand All @@ -21,19 +21,17 @@ import Link from 'docs/src/modules/components/Link';
const DEMOS = ['Components', 'Branding', 'Iconography'];

const Image = styled('img')(({ theme }) => ({
filter:
theme.palette.mode === 'dark'
? 'drop-shadow(-8px 4px 20px rgba(0, 0, 0, 0.4))'
: 'drop-shadow(-8px 4px 20px rgba(61, 71, 82, 0.2))',
filter: 'drop-shadow(-8px 4px 20px rgba(61, 71, 82, 0.2))',
transition: '0.4s',
display: 'block',
height: 'auto',
borderRadius: '10px',
...theme.applyDarkStyles({
filter: 'drop-shadow(-8px 4px 20px rgba(0, 0, 0, 0.4))',
}),
}));

export default function TemplateDemo() {
const globalTheme = useTheme();
const mode = globalTheme.palette.mode;
const [demo, setDemo] = React.useState(DEMOS[0]);
const icons = {
[DEMOS[0]]: <ToggleOnRounded fontSize="small" />,
Expand Down Expand Up @@ -82,93 +80,121 @@ export default function TemplateDemo() {
>
<Fade in={demo === 'Components'} timeout={500}>
<Box
sx={{
width: '100%',
height: '100%',
'& img': {
position: 'absolute',
left: '50%',
width: { xs: 240, sm: 300 },
'&:nth-of-type(1)': {
top: 120,
transform: 'translate(-70%)',
},
'&:nth-of-type(2)': {
top: 80,
transform: 'translate(-50%)',
},
'&:nth-of-type(3)': {
top: 40,
transform: 'translate(-30%)',
},
},
'&:hover': {
sx={[
{
width: '100%',
height: '100%',
'& img': {
filter:
mode === 'dark'
? 'drop-shadow(-16px 12px 20px rgba(0, 0, 0, 0.4))'
: 'drop-shadow(-16px 12px 20px rgba(61, 71, 82, 0.2))',
position: 'absolute',
left: '50%',
width: { xs: 240, sm: 300 },
'&:nth-of-type(1)': {
top: 0,
transform: 'scale(0.8) translate(-108%) rotateY(30deg)',
top: 120,
transform: 'translate(-70%)',
},
'&:nth-of-type(2)': {
top: 40,
transform: 'scale(0.8) translate(-54%) rotateY(30deg)',
top: 80,
transform: 'translate(-50%)',
},
'&:nth-of-type(3)': {
top: 40,
transform: 'scale(0.8) translate(-0%) rotateY(30deg)',
transform: 'translate(-30%)',
},
},
'&: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)',
},
},
},
},
}}
(theme) =>
theme.applyDarkStyles({
'&:hover': {
'& img': {
filter: 'drop-shadow(-16px 12px 20px rgba(0, 0, 0, 0.4))',
},
},
}),
]}
>
<Image
src={`/static/branding/design-kits/Button-${mode}.jpeg`}
src={`/static/branding/design-kits/Button-light.jpeg`}
alt=""
loading="lazy"
sx={(theme) =>
theme.applyDarkStyles({
content: `url(/static/branding/design-kits/Button-dark.jpeg)`,
})
}
/>
<Image
src={`/static/branding/design-kits/Alert-${mode}.jpeg`}
src={`/static/branding/design-kits/Alert-light.jpeg`}
alt=""
loading="lazy"
sx={(theme) =>
theme.applyDarkStyles({
content: `url(/static/branding/design-kits/Alert-dark.jpeg)`,
})
}
/>
<Image
src={`/static/branding/design-kits/Slider-${mode}.jpeg`}
src={`/static/branding/design-kits/Slider-light.jpeg`}
alt=""
loading="lazy"
sx={(theme) =>
theme.applyDarkStyles({
content: `url(/static/branding/design-kits/Slider-dark.jpeg)`,
})
}
/>
</Box>
</Fade>
<Fade in={demo === 'Branding'} timeout={500}>
<Image
src={`/static/branding/design-kits/Colors-${mode}.jpeg`}
src={`/static/branding/design-kits/Colors-light.jpeg`}
alt=""
loading="lazy"
width="300"
sx={{
sx={(theme) => ({
width: { sm: 400 },
position: 'absolute',
left: '50%',
top: '50%',
transform: 'translate(-50%, -50%)',
}}
...theme.applyDarkStyles({
content: `url(/static/branding/design-kits/Colors-dark.jpeg)`,
}),
})}
/>
</Fade>
<Fade in={demo === 'Iconography'} timeout={500}>
<Image
src={`/static/branding/design-kits/Icons-${mode}.jpeg`}
src={`/static/branding/design-kits/Icons-light.jpeg`}
alt=""
loading="lazy"
width="300"
sx={{
sx={(theme) => ({
width: { sm: 500 },
position: 'absolute',
left: '50%',
top: 60,
transform: 'translate(-40%)',
}}
...theme.applyDarkStyles({
content: `url(/static/branding/design-kits/Icons-dark.jpeg)`,
}),
})}
/>
</Fade>
</Frame.Demo>
Expand Down
Loading

0 comments on commit db5bc58

Please sign in to comment.