[website] Migrate Product-Templates page to use CSS theme variables (m…

…ui#34913)
jesrodri · Dec 6, 2022 · 18f304b · 18f304b
1 parent 074d7f1
commit 18f304b
Show file tree

Hide file tree

Showing 8 changed files with 194 additions and 136 deletions.
diff --git a/docs/pages/templates.tsx b/docs/pages/templates.tsx
@@ -8,13 +8,13 @@ import ValueProposition from 'docs/src/components/home/ValueProposition';
 import TemplateDemo from 'docs/src/components/productTemplate/TemplateDemo';
 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, { TEMPLATES_CUSTOMERS } from 'docs/src/components/home/References';
 import AppHeaderBanner from 'docs/src/components/banner/AppHeaderBanner';
 
 export default function Templates() {
   return (
-    <BrandingProvider>
+    <BrandingCssVarsProvider>
       <Head
         title="Fully built templates for your app - MUI"
         description="A collection of 4.5 average rating templates, selected and curated by MUI's team of maintainers to get your projects up and running today."
@@ -32,6 +32,6 @@ export default function Templates() {
       </main>
       <Divider />
       <AppFooter />
-    </BrandingProvider>
+    </BrandingCssVarsProvider>
   );
 }
diff --git a/docs/src/components/action/Frame.tsx b/docs/src/components/action/Frame.tsx
@@ -6,13 +6,19 @@ const FrameDemo = React.forwardRef<HTMLDivElement, BoxProps>(function FrameDemo(
     <Box
       ref={ref}
       {...props}
-      sx={{
-        position: 'relative',
-        bgcolor: (theme) => (theme.palette.mode === 'dark' ? 'primaryDark.700' : 'grey.100'),
-        border: '1px solid',
-        borderColor: (theme) => (theme.palette.mode === 'dark' ? 'primaryDark.600' : 'grey.200'),
-        ...props.sx,
-      }}
+      sx={[
+        (theme) => ({
+          position: 'relative',
+          border: '1px solid',
+          bgcolor: 'grey.100',
+          borderColor: 'grey.200',
+          ...theme.applyDarkStyles({
+            bgcolor: 'primaryDark.700',
+            borderColor: 'primaryDark.600',
+          }),
+        }),
+        ...(Array.isArray(props.sx) ? props.sx : [props.sx]),
+      ]}
     />
   );
 });

diff --git a/docs/src/components/action/More.tsx b/docs/src/components/action/More.tsx
@@ -27,27 +27,36 @@ export default (function More(props: ButtonBaseProps) {
           props.onFocusVisible(event);
         }
       }}
-      sx={{
-        p: 2,
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'flex-start',
-        cursor: 'pointer',
-        borderRadius: 1,
-        height: '100%',
-        border: '2px dashed',
-        transitionProperty: 'all',
-        transitionDuration: '150ms',
-        borderColor: (theme) => (theme.palette.mode === 'dark' ? 'primaryDark.500' : 'grey.200'),
-        '&:hover, &:focus': {
-          borderColor: 'primary.main',
-          bgcolor: (theme) => (theme.palette.mode === 'dark' ? 'primaryDark.700' : 'primary.50'),
-          '@media (hover: none)': {
-            bgcolor: 'transparent',
+      sx={[
+        {
+          p: 2,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'flex-start',
+          cursor: 'pointer',
+          borderRadius: 1,
+          height: '100%',
+          border: '2px dashed',
+          transitionProperty: 'all',
+          transitionDuration: '150ms',
+          borderColor: 'grey.200',
+          '&:hover, &:focus': {
+            borderColor: 'primary.main',
+            bgcolor: 'primary.50',
+            '@media (hover: none)': {
+              bgcolor: 'transparent',
+            },
           },
         },
-        ...props.sx,
-      }}
+        (theme) =>
+          theme.applyDarkStyles({
+            borderColor: 'primaryDark.500',
+            '&:hover, &:focus': {
+              bgcolor: 'primaryDark.700',
+            },
+          }),
+        ...(Array.isArray(props.sx) ? props.sx : [props.sx]),
+      ]}
     >
       <Box component="span" sx={{ mr: 1, px: '3px', lineHeight: 0 }}>
         <AddCircleOutlineRounded color="primary" fontSize="small" />

diff --git a/docs/src/components/banner/AppHeaderBanner.tsx b/docs/src/components/banner/AppHeaderBanner.tsx
@@ -8,19 +8,23 @@ export default function AppHeaderBanner() {
   return FEATURE_TOGGLE.enable_website_banner ? (
     <Typography
       fontWeight="medium"
-      sx={{
+      sx={(theme) => ({
         color: '#fff',
         p: '12px',
         display: 'flex',
         flexDirection: { xs: 'column', md: 'row' },
         alignItems: { xs: 'start', sm: 'center' },
         justifyContent: 'center',
-        background: (theme) =>
-          theme.palette.mode === 'dark'
-            ? `linear-gradient(90deg, ${theme.palette.primary[900]}, ${theme.palette.primary[600]} 120%)`
-            : `linear-gradient(-90deg, ${theme.palette.primary[700]}, ${theme.palette.primary[500]} 120%)`,
-        fontSize: (theme) => theme.typography.pxToRem(13),
-      }}
+        fontSize: theme.typography.pxToRem(13),
+        background: `linear-gradient(-90deg, ${(theme.vars || theme).palette.primary[700]}, ${
+          (theme.vars || theme).palette.primary[500]
+        } 120%)`,
+        ...theme.applyDarkStyles({
+          background: `linear-gradient(90deg, ${(theme.vars || theme).palette.primary[900]}, ${
+            (theme.vars || theme).palette.primary[600]
+          } 120%)`,
+        }),
+      })}
     >
       🚀&#160;&#160;We&apos;re hiring a Designer, Full-stack Engineer, React Support Engineer, and
       more!&nbsp;&#160;

diff --git a/docs/src/components/home/StoreTemplatesBanner.tsx b/docs/src/components/home/StoreTemplatesBanner.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { styled, alpha, useTheme } from '@mui/material/styles';
+import { styled, alpha } from '@mui/material/styles';
 import Box, { BoxProps } from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 import LaunchRounded from '@mui/icons-material/LaunchRounded';
@@ -21,13 +21,14 @@ const Image = styled('img')(({ theme }) => ({
     height: 450 / ratio,
   },
   border: '6px solid',
-  borderColor: theme.palette.mode === 'dark' ? theme.palette.grey[800] : theme.palette.grey[400],
-  borderRadius: theme.shape.borderRadius,
+  borderColor: (theme.vars || theme).palette.grey[400],
+  borderRadius: (theme.vars || theme).shape.borderRadius,
   objectFit: 'cover',
-  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')({
@@ -96,15 +97,20 @@ const StoreTemplateImage = React.forwardRef<
   HTMLImageElement,
   { brand: TemplateBrand } & Omit<JSX.IntrinsicElements['img'], 'ref'>
 >(function StoreTemplateImage({ brand, ...props }, ref) {
-  const globalTheme = useTheme();
-  const mode = globalTheme.palette.mode;
   return (
     <Image
       ref={ref}
-      src={`/static/branding/store-templates/template-${mode}${
+      src={`/static/branding/store-templates/template-light${
         Object.keys(linkMapping).indexOf(brand) + 1
       }.jpeg`}
       alt=""
+      sx={(theme) =>
+        theme.applyDarkStyles({
+          content: `url(/static/branding/store-templates/template-dark${
+            Object.keys(linkMapping).indexOf(brand) + 1
+          }.jpeg)`,
+        })
+      }
       {...props}
     />
   );
@@ -219,34 +225,29 @@ export default function StoreTemplatesBanner() {
       }}
     >
       <Box
-        sx={{
+        sx={(theme) => ({
           display: { xs: 'block', md: 'none' },
           position: 'absolute',
           top: 0,
           left: 0,
           width: '100%',
           height: '100%',
           pointerEvents: 'none',
-          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.palette.primaryDark[900], 0)} 30%, ${alpha(
+              theme.palette.primaryDark[900],
+              0,
+            )} 70%, ${(theme.vars || theme).palette.primaryDark[900]} 100%)`,
+          }),
+        })}
       />
       <Box
         sx={{
@@ -271,26 +272,24 @@ export default function StoreTemplatesBanner() {
         </Box>
       </Box>
       <Box
-        sx={{
+        sx={(theme) => ({
           display: { xs: 'none', md: 'block' },
           position: 'absolute',
           top: 0,
           left: 0,
           width: 400,
           height: '150%',
           pointerEvents: 'none',
-          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)'
-            })`,
           zIndex: 10,
-        }}
+          background: `linear-gradient(to right, ${
+            (theme.vars || theme).palette.grey[50]
+          }, ${'rgba(255,255,255,0)'})`,
+          ...theme.applyDarkStyles({
+            background: `linear-gradient(to right, ${
+              (theme.vars || theme).palette.primaryDark[900]
+            }, ${alpha(theme.palette.primaryDark[900], 0)})`,
+          }),
+        })}
       />
     </Box>
   );