From db5bc580222a44919d5d438ce4e23f5157d40bae Mon Sep 17 00:00:00 2001 From: Jessica Pinheiro <82549482+jesrodri@users.noreply.github.com> Date: Tue, 1 Nov 2022 03:37:26 -0300 Subject: [PATCH] [website] Migrate Design-kits page to use CSS theme variables (#34920) --- docs/pages/design-kits.tsx | 6 +- docs/src/components/home/DesignKits.tsx | 123 +++++++++--------- .../productDesignKit/DesignKitDemo.tsx | 120 ++++++++++------- .../productDesignKit/DesignKitFAQ.tsx | 13 +- .../productDesignKit/DesignKitHero.tsx | 26 ++-- 5 files changed, 161 insertions(+), 127 deletions(-) diff --git a/docs/pages/design-kits.tsx b/docs/pages/design-kits.tsx index 909b5ef4f93740..bb7e696f1512fc 100644 --- a/docs/pages/design-kits.tsx +++ b/docs/pages/design-kits.tsx @@ -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 ( - + - + ); } diff --git a/docs/src/components/home/DesignKits.tsx b/docs/src/components/home/DesignKits.tsx index 4f257ca0bdbec2..5c5f6fc53c1563 100644 --- a/docs/src/components/home/DesignKits.tsx +++ b/docs/src/components/home/DesignKits.tsx @@ -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, @@ -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]), + ]} /> ); }); @@ -225,64 +230,60 @@ export default function DesignKits() { }} > ({ 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', + }), + })} /> ({ 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%)`, + }), + })} /> ({ 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)})`, + }), + })} /> ({ - 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]]: , @@ -82,93 +80,121 @@ 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)`, + }) + } /> ({ 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)`, + }), + })} /> diff --git a/docs/src/components/productDesignKit/DesignKitFAQ.tsx b/docs/src/components/productDesignKit/DesignKitFAQ.tsx index f527668b358696..dcd8891eb65304 100644 --- a/docs/src/components/productDesignKit/DesignKitFAQ.tsx +++ b/docs/src/components/productDesignKit/DesignKitFAQ.tsx @@ -152,15 +152,18 @@ export default function DesignKitFAQ() { {renderItem(4)} ({ pt: 2, pb: 1, px: 2, borderStyle: 'dashed', - borderColor: (theme) => - theme.palette.mode === 'dark' ? 'primaryDark.400' : 'grey.300', - bgcolor: (theme) => (theme.palette.mode === 'dark' ? 'primaryDark.800' : 'white'), - }} + borderColor: 'grey.300', + bgcolor: 'white', + ...theme.applyDarkStyles({ + borderColor: 'primaryDark.400', + bgcolor: 'primaryDark.800', + }), + })} > diff --git a/docs/src/components/productDesignKit/DesignKitHero.tsx b/docs/src/components/productDesignKit/DesignKitHero.tsx index ee55dac8510e82..e49b001401233e 100644 --- a/docs/src/components/productDesignKit/DesignKitHero.tsx +++ b/docs/src/components/productDesignKit/DesignKitHero.tsx @@ -22,13 +22,16 @@ export default function TemplateHero() { (theme.palette.mode === 'dark' ? 'primary.400' : 'primary.600')} - sx={{ + sx={(theme) => ({ + color: 'primary.600', display: 'flex', alignItems: 'center', justifyContent: { xs: 'center', md: 'start' }, '& > *': { mr: 1, width: 28, height: 28 }, - }} + ...theme.applyDarkStyles({ + color: 'primary.400', + }), + })} > Design kits @@ -57,20 +60,21 @@ export default function TemplateHero() { ({ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', zIndex: 1, - background: (theme) => - `linear-gradient(90deg, ${theme.palette.primaryDark[900]} 1%, ${alpha( - theme.palette.primaryDark[900], - 0.5, - )})`, - opacity: (theme) => (theme.palette.mode === 'dark' ? 1 : 0), - }} + background: `linear-gradient(90deg, ${ + (theme.vars || theme).palette.primaryDark[900] + } 1%, ${alpha(theme.palette.primaryDark[900], 0.5)})`, + opacity: 0, + ...theme.applyDarkStyles({ + opacity: 1, + }), + })} />