Revert "[docs] Use theme.applyDarkStyles for the rest of the docs" (m…

…ui#36602)
siriwatknp · Mar 21, 2023 · 3b7e93f · 3b7e93f
1 parent f34d17c
commit 3b7e93f
Show file tree

Hide file tree

Showing 29 changed files with 778 additions and 964 deletions.
diff --git a/docs/src/components/banner/AppFrameBanner.tsx b/docs/src/components/banner/AppFrameBanner.tsx
@@ -9,36 +9,35 @@ export default function AppFrameBanner() {
       href="https://mui.com/blog/mui-x-v6/"
       target="_blank"
       variant="caption"
-      sx={[
-        (theme) => ({
-          display: { xs: 'none', lg: 'block' },
-          p: 1,
-          maxHeight: '34px',
-          backgroundColor: (theme.vars || theme).palette.primary[50],
-          border: '1px solid',
-          borderColor: (theme.vars || theme).palette.grey[200],
-          borderRadius: 1,
-          transitionProperty: 'all',
-          transitionTiming: 'cubic-bezier(0.4, 0, 0.2, 1)',
-          transitionDuration: '150ms',
-          color: (theme.vars || theme).palette.primary[600],
-          fontWeight: 'medium',
-          '&:hover, &:focus-visible': {
-            backgroundColor: alpha(theme.palette.primary[100], 0.4),
-            borderColor: (theme.vars || theme).palette.primary[200],
-          },
-        }),
-        (theme) =>
-          theme.applyDarkStyles({
-            backgroundColor: alpha(theme.palette.primary[900], 0.3),
-            borderColor: (theme.vars || theme).palette.primaryDark[700],
-            color: (theme.vars || theme).palette.primary[100],
-            '&:hover, &:focus-visible': {
-              backgroundColor: alpha(theme.palette.primary[900], 0.6),
-              borderColor: (theme.vars || theme).palette.primaryDark[500],
-            },
-          }),
-      ]}
+      sx={(theme) => ({
+        display: { xs: 'none', lg: 'block' },
+        p: 1,
+        maxHeight: '34px',
+        backgroundColor:
+          theme.palette.mode === 'dark'
+            ? alpha(theme.palette.primary[900], 0.3)
+            : theme.palette.primary[50],
+        border: '1px solid',
+        borderColor:
+          theme.palette.mode === 'dark' ? theme.palette.primaryDark[700] : theme.palette.grey[200],
+        borderRadius: 1,
+        transitionProperty: 'all',
+        transitionTiming: 'cubic-bezier(0.4, 0, 0.2, 1)',
+        transitionDuration: '150ms',
+        color:
+          theme.palette.mode === 'dark' ? theme.palette.primary[100] : theme.palette.primary[600],
+        fontWeight: 'medium',
+        '&:hover, &:focus-visible': {
+          backgroundColor:
+            theme.palette.mode === 'dark'
+              ? alpha(theme.palette.primary[900], 0.6)
+              : alpha(theme.palette.primary[100], 0.4),
+          borderColor:
+            theme.palette.mode === 'dark'
+              ? theme.palette.primaryDark[500]
+              : theme.palette.primary[200],
+        },
+      })}
     >
       🚀 MUI X v6 is out! Discover what&apos;s new and get started now!
       <br />

diff --git a/docs/src/components/banner/TableOfContentsBanner.tsx b/docs/src/components/banner/TableOfContentsBanner.tsx
@@ -10,32 +10,29 @@ export default function TableOfContentsBanner() {
     <Link
       href="https://war.ukraine.ua/support-ukraine/"
       target="_blank"
-      sx={[
-        (theme) => ({
-          mb: 2,
-          display: 'flex',
-          flexDirection: 'column',
-          overflow: 'auto',
-          backgroundColor: alpha(theme.palette.grey[50], 0.4),
-          border: '1px solid',
-          borderColor: (theme.vars || theme).palette.grey[200],
-          borderRadius: 1,
-          transitionProperty: 'all',
-          transitionTiming: 'cubic-bezier(0.4, 0, 0.2, 1)',
-          transitionDuration: '150ms',
-          '&:hover, &:focus-visible': {
-            borderColor: (theme.vars || theme).palette.primary[200],
-          },
-        }),
-        (theme) =>
-          theme.applyDarkStyles({
-            backgroundColor: alpha(theme.palette.primary[900], 0.2),
-            borderColor: (theme.vars || theme).palette.primaryDark[700],
-            '&:hover, &:focus-visible': {
-              borderColor: (theme.vars || theme).palette.primaryDark[500],
-            },
-          }),
-      ]}
+      sx={(theme) => ({
+        mb: 2,
+        display: 'flex',
+        flexDirection: 'column',
+        overflow: 'auto',
+        backgroundColor:
+          theme.palette.mode === 'dark'
+            ? alpha(theme.palette.primary[900], 0.2)
+            : alpha(theme.palette.grey[50], 0.4),
+        border: '1px solid',
+        borderColor:
+          theme.palette.mode === 'dark' ? theme.palette.primaryDark[700] : theme.palette.grey[200],
+        borderRadius: 1,
+        transitionProperty: 'all',
+        transitionTiming: 'cubic-bezier(0.4, 0, 0.2, 1)',
+        transitionDuration: '150ms',
+        '&:hover, &:focus-visible': {
+          borderColor:
+            theme.palette.mode === 'dark'
+              ? theme.palette.primaryDark[500]
+              : theme.palette.primary[200],
+        },
+      })}
     >
       <Box sx={{ width: '100%' }}>
         <Box sx={{ height: '12px', backgroundColor: '#0057b7' }} />

diff --git a/docs/src/components/home/AdvancedShowcase.tsx b/docs/src/components/home/AdvancedShowcase.tsx
@@ -1687,28 +1687,23 @@ export default function DataTable() {
       preview={
         <Paper
           variant="outlined"
-          sx={(theme) => ({
+          sx={{
             overflow: 'hidden',
             width: '100%',
             boxShadow: '0px 4px 20px rgba(61, 71, 82, 0.25)',
-            bgcolor: '#fff',
-            ...theme.applyDarkStyles({
-              bgcolor: 'primaryDark.800',
-            }),
-          })}
+            bgcolor: (theme) => (theme.palette.mode === 'dark' ? 'primaryDark.800' : '#fff'),
+          }}
         >
           <XGridGlobalStyles />
           <Box
-            sx={(theme) => ({
+            sx={{
               textAlign: 'center',
               py: 1,
               position: 'relative',
               borderBottom: '1px solid',
-              borderColor: 'grey.100',
-              ...theme.applyDarkStyles({
-                borderColor: 'primaryDark.600',
-              }),
-            })}
+              borderColor: (theme) =>
+                theme.palette.mode === 'dark' ? 'primaryDark.600' : 'grey.100',
+            }}
           >
             <Typography color="primary.main" fontWeight={700}>
               Trades, October 2020

diff --git a/docs/src/components/home/NewsletterToast.tsx b/docs/src/components/home/NewsletterToast.tsx
@@ -41,7 +41,7 @@ export default function NewsletterToast() {
         <Card
           variant="outlined"
           role="alert"
-          sx={(theme) => ({
+          sx={{
             p: 1,
             position: 'absolute',
             left: '50%',
@@ -50,11 +50,11 @@ export default function NewsletterToast() {
             transition: '0.5s',
             display: 'flex',
             alignItems: 'center',
-            boxShadow: '0px 4px 20px rgba(61, 71, 82, 0.25)',
-            ...theme.applyDarkStyles({
-              boxShadow: '0px 4px 20px rgba(0, 0, 0, 0.6)',
-            }),
-          })}
+            boxShadow: (theme) =>
+              theme.palette.mode === 'dark'
+                ? '0px 4px 20px rgba(0, 0, 0, 0.6)'
+                : '0px 4px 20px rgba(61, 71, 82, 0.25)',
+          }}
         >
           <MarkEmailReadTwoTone color="success" sx={{ mx: 0.5 }} />
           <div>

diff --git a/docs/src/components/home/ShowcaseContainer.tsx b/docs/src/components/home/ShowcaseContainer.tsx
@@ -29,51 +29,40 @@ export default function ShowcaseContainer({
       >
         <Paper
           variant="outlined"
-          sx={[
-            {
-              display: 'flex',
-              position: 'relative',
-              minHeight: 220,
-              justifyContent: 'center',
-              alignItems: 'center',
-              p: 2,
-              bgcolor: 'grey.100',
-              borderColor: 'grey.300',
-              borderBottomLeftRadius: 0,
-              borderBottomRightRadius: 0,
-            },
-            (theme) =>
-              theme.applyDarkStyles({
-                bgcolor: 'primaryDark.700',
-                borderColor: 'primaryDark.600',
-              }),
-            ...(Array.isArray(previewSx) ? previewSx : [previewSx]),
-          ]}
+          sx={{
+            display: 'flex',
+            position: 'relative',
+            minHeight: 220,
+            justifyContent: 'center',
+            alignItems: 'center',
+            p: 2,
+            bgcolor: (theme) => (theme.palette.mode === 'dark' ? 'primaryDark.700' : 'grey.100'),
+            borderColor: (theme) =>
+              theme.palette.mode === 'dark' ? 'primaryDark.600' : 'grey.300',
+            borderBottomLeftRadius: 0,
+            borderBottomRightRadius: 0,
+            ...previewSx,
+          }}
         >
           {preview}
         </Paper>
         <Box
-          sx={[
-            {
-              flexGrow: 0,
-              display: 'flex',
-              flexDirection: 'column',
-              maxWidth: '100%',
-              position: 'relative',
-              minHeight: 200,
-              borderWidth: '0 1px 1px 1px',
-              borderStyle: 'solid',
-              borderColor: 'primaryDark.900',
-              bgcolor: 'primaryDark.800',
-              borderBottomLeftRadius: 10,
-              borderBottomRightRadius: 10,
-            },
-            (theme) =>
-              theme.applyDarkStyles({
-                borderColor: 'primaryDark.700',
-              }),
-            ...(Array.isArray(codeSx) ? codeSx : [codeSx]),
-          ]}
+          sx={{
+            flexGrow: 0,
+            display: 'flex',
+            flexDirection: 'column',
+            maxWidth: '100%',
+            position: 'relative',
+            minHeight: 200,
+            borderWidth: '0 1px 1px 1px',
+            borderStyle: 'solid',
+            borderColor: (theme) =>
+              theme.palette.mode === 'dark' ? 'primaryDark.700' : 'primaryDark.900',
+            bgcolor: 'primaryDark.800',
+            borderBottomLeftRadius: 10,
+            borderBottomRightRadius: 10,
+            ...codeSx,
+          }}
         >
           <NoSsr>{code}</NoSsr>
         </Box>

diff --git a/docs/src/components/productX/XComponents.tsx b/docs/src/components/productX/XComponents.tsx
@@ -32,14 +32,11 @@ const AspectRatioImage = styled('div', {
   shouldForwardProp: (prop) => shouldForwardProp(prop) && prop !== 'src' && prop !== 'ratio',
 })<{ ratio: number; src: string }>(({ src, ratio, theme }) => ({
   height: 0,
-  backgroundImage: `url(${src})`,
+  backgroundImage: `url(${src.replace('$mode', theme.palette.mode)})`,
   backgroundRepeat: 'no-repeat',
   backgroundSize: 'contain',
   paddingBottom: `${(1 / ratio) * 100}%`,
   margin: 'auto',
-  ...theme.applyDarkStyles({
-    backgroundImage: `url(${src.replace('-light', '-dark')})`,
-  }),
 }));
 
 function PrefetchImages() {
@@ -149,15 +146,15 @@ export default function XComponents() {
                         <Grid item xs={6}>
                           <Box sx={{ maxWidth: 200, ml: 'auto' }}>
                             <AspectRatioImage
-                              src="/static/branding/mui-x/sparkline-light1.png"
+                              src="/static/branding/mui-x/sparkline-$mode1.png"
                               ratio={211 / 220}
                             />
                           </Box>
                         </Grid>
                         <Grid item xs={6}>
                           <Box sx={{ maxWidth: 200, mr: 'auto' }}>
                             <AspectRatioImage
-                              src="/static/branding/mui-x/sparkline-light2.png"
+                              src="/static/branding/mui-x/sparkline-$mode2.png"
                               ratio={211 / 220}
                             />
                           </Box>
@@ -169,31 +166,31 @@ export default function XComponents() {
                         <Grid item xs={6}>
                           <Box sx={{ width: { xs: 200, sm: 240 }, maxWidth: '100%', ml: 'auto' }}>
                             <AspectRatioImage
-                              src="/static/branding/mui-x/chart-light1.png"
+                              src="/static/branding/mui-x/chart-$mode1.png"
                               ratio={219 / 120}
                             />
                           </Box>
                         </Grid>
                         <Grid item xs={6}>
                           <Box sx={{ width: { xs: 200, sm: 240 }, maxWidth: '100%', mr: 'auto' }}>
                             <AspectRatioImage
-                              src="/static/branding/mui-x/chart-light2.png"
+                              src="/static/branding/mui-x/chart-$mode2.png"
                               ratio={219 / 120}
                             />
                           </Box>
                         </Grid>
                         <Grid item xs={6}>
                           <Box sx={{ width: { xs: 200, sm: 240 }, maxWidth: '100%', ml: 'auto' }}>
                             <AspectRatioImage
-                              src="/static/branding/mui-x/chart-light3.png"
+                              src="/static/branding/mui-x/chart-$mode3.png"
                               ratio={219 / 120}
                             />
                           </Box>
                         </Grid>
                         <Grid item xs={6}>
                           <Box sx={{ width: { xs: 200, sm: 240 }, maxWidth: '100%', mr: 'auto' }}>
                             <AspectRatioImage
-                              src="/static/branding/mui-x/chart-light4.png"
+                              src="/static/branding/mui-x/chart-$mode4.png"
                               ratio={219 / 120}
                             />
                           </Box>