[website] Polish dark mode colors (#40052)

mui · Dec 4, 2023 · 46ba0cb · 46ba0cb
1 parent a62ec63
commit 46ba0cb
Show file tree

Hide file tree

Showing 32 changed files with 124 additions and 101 deletions.
diff --git a/docs/pages/blog.tsx b/docs/pages/blog.tsx
@@ -270,9 +270,9 @@ export default function Blog(props: InferGetStaticPropsType<typeof getStaticProp
         `,
             ...theme.applyDarkStyles({
               background: `linear-gradient(180deg, ${
-                (theme.vars || theme).palette.primaryDark[800]
+                (theme.vars || theme).palette.primaryDark[900]
               } 50%,
-          ${alpha(theme.palette.primary[900], 0.2)} 100%)
+          ${alpha(theme.palette.primary[800], 0.2)} 100%)
           `,
             }),
           })}

diff --git a/docs/pages/careers.tsx b/docs/pages/careers.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { styled } from '@mui/material/styles';
+import { styled, alpha } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Divider from '@mui/material/Divider';
 import Grid from '@mui/material/Grid';
@@ -83,7 +83,8 @@ const Accordion = styled(MuiAccordion)(({ theme }) => ({
   transition: theme.transitions.create('box-shadow'),
   borderRadius: theme.shape.borderRadius,
   '&:hover': {
-    boxShadow: '0 4px 8px 0 rgb(90 105 120 / 20%)',
+    borderColor: theme.palette.primary[300],
+    boxShadow: `0px 4px 8px ${alpha(theme.palette.grey[200], 0.6)}`,
   },
   '&:not(:last-of-type)': {
     marginBottom: theme.spacing(2),
@@ -94,6 +95,12 @@ const Accordion = styled(MuiAccordion)(({ theme }) => ({
   '&:after': {
     display: 'none',
   },
+  ...theme.applyDarkStyles({
+    '&:hover': {
+      borderColor: alpha(theme.palette.primary[600], 0.6),
+      boxShadow: '0px 4px 20px rgba(0, 0, 0, 0.8)',
+    },
+  }),
 }));
 
 const AccordionSummary = styled(MuiAccordionSummary)(({ theme }) => ({
@@ -469,7 +476,7 @@ function CareersContent() {
       <Divider />
       {/* Next roles */}
       {nextRolesData.length > 0 && (
-        <Box data-mui-color-scheme="dark" sx={{ bgcolor: 'primaryDark.900' }}>
+        <Box data-mui-color-scheme="dark" sx={{ bgcolor: 'common.black' }}>
           <Section bg="transparent">
             <SectionHeadline
               title={

diff --git a/docs/src/components/about/Team.tsx b/docs/src/components/about/Team.tsx
@@ -378,7 +378,7 @@ export default function Team() {
       </Section>
       <Divider />
       {/* Community contributors */}
-      <Box data-mui-color-scheme="dark" sx={{ bgcolor: 'primaryDark.900' }}>
+      <Box data-mui-color-scheme="dark" sx={{ bgcolor: 'common.black' }}>
         <Container sx={{ py: { xs: 4, sm: 8 } }}>
           <Typography component="h3" variant="h4" color="primary.200" fontWeight="semiBold">
             Community contributors

diff --git a/docs/src/components/action/StylingInfo.tsx b/docs/src/components/action/StylingInfo.tsx
@@ -42,7 +42,7 @@ export default function StylingInfo({
         px: 2,
         pt: 1,
         pb: 2,
-        background: ({ palette }) => alpha(palette.primaryDark[900], 0.95),
+        background: ({ palette }) => alpha(palette.common.black, 0.5),
         backdropFilter: 'blur(8px)',
         zIndex: 1,
         borderTop: '1px solid',

diff --git a/docs/src/components/footer/EmailSubscribe.tsx b/docs/src/components/footer/EmailSubscribe.tsx
@@ -144,11 +144,11 @@ export default function EmailSubscribe({ sx }: { sx?: SxProps<Theme> }) {
             }),
             (theme) =>
               theme.applyDarkStyles({
-                bgcolor: 'primaryDark.900',
+                bgcolor: 'primaryDark.800',
                 boxShadow: `inset 0 1px 1px ${
                   (theme.vars || theme).palette.primaryDark[900]
                 }, 0 1px 0.5px ${(theme.vars || theme).palette.common.black}`,
-                borderColor: 'primaryDark.500',
+                borderColor: 'primaryDark.600',
                 '&:hover': {
                   borderColor: 'primaryDark.400',
                   boxShadow: `inset 0 1px 1px ${

diff --git a/docs/src/components/header/HeaderNavBar.tsx b/docs/src/components/header/HeaderNavBar.tsx
@@ -60,8 +60,8 @@ const Navigation = styled('nav')(({ theme }) => [
       '& > a, & > button': {
         '&:hover': {
           color: (theme.vars || theme).palette.primary[50],
-          backgroundColor: (theme.vars || theme).palette.primaryDark[700],
-          borderColor: alpha(theme.palette.primaryDark[600], 0.5),
+          backgroundColor: alpha(theme.palette.primaryDark[700], 0.8),
+          borderColor: (theme.vars || theme).palette.divider,
         },
         '&:focus-visible': {
           color: (theme.vars || theme).palette.primary[50],

diff --git a/docs/src/components/header/HeaderNavDropdown.tsx b/docs/src/components/header/HeaderNavDropdown.tsx
@@ -164,7 +164,7 @@ export default function HeaderNavDropdown() {
             right: 0,
             boxShadow: `0px 4px 20px rgba(170, 180, 190, 0.3)`,
             ...theme.applyDarkStyles({
-              boxShadow: '0px 4px 20px rgba(0, 0, 0, 0.5)',
+              boxShadow: '0px 4px 20px rgba(0, 0, 0, 0.8)',
             }),
           })}
         >

diff --git a/docs/src/components/home/DiamondSponsors.tsx b/docs/src/components/home/DiamondSponsors.tsx
@@ -59,17 +59,13 @@ export default function DiamondSponsors() {
           <Grid item xs={12} sm={6} md={4}>
             <Paper
               variant="outlined"
-              sx={(theme) => ({
+              sx={{
                 p: 2,
                 display: 'flex',
                 alignItems: 'center',
                 height: '100%',
                 borderStyle: 'dashed',
-                borderColor: 'grey.300',
-                ...theme.applyDarkStyles({
-                  borderColor: 'primaryDark.400',
-                }),
-              })}
+              }}
             >
               <IconButton
                 aria-label="Become MUI sponsor"
@@ -83,7 +79,7 @@ export default function DiamondSponsors() {
                   border: '1px solid',
                   borderColor: 'grey.300',
                   ...theme.applyDarkStyles({
-                    borderColor: 'primaryDark.400',
+                    borderColor: 'primaryDark.600',
                   }),
                 })}
               >

diff --git a/docs/src/components/home/GoldSponsors.tsx b/docs/src/components/home/GoldSponsors.tsx
@@ -100,17 +100,13 @@ export default function GoldSponsors() {
         <Grid item xs={12} sm={6} md={4} lg={3}>
           <Paper
             variant="outlined"
-            sx={(theme) => ({
+            sx={{
               p: 2,
               display: 'flex',
               alignItems: 'center',
               height: '100%',
               borderStyle: 'dashed',
-              borderColor: 'grey.300',
-              ...theme.applyDarkStyles({
-                borderColor: 'primaryDark.400',
-              }),
-            })}
+            }}
           >
             <IconButton
               aria-label="Sponsor MUI"
@@ -124,7 +120,7 @@ export default function GoldSponsors() {
                 border: '1px solid',
                 borderColor: 'grey.300',
                 ...theme.applyDarkStyles({
-                  borderColor: 'primaryDark.400',
+                  borderColor: 'primaryDark.600',
                 }),
               })}
             >

diff --git a/docs/src/components/home/HeroEnd.tsx b/docs/src/components/home/HeroEnd.tsx
@@ -25,7 +25,7 @@ export default function HeroEnd() {
         `,
         ...theme.applyDarkStyles({
           background: `linear-gradient(180deg, ${
-            (theme.vars || theme).palette.primaryDark[800]
+            (theme.vars || theme).palette.primaryDark[900]
           } 50%,
           ${alpha(theme.palette.primary[900], 0.2)} 100%)
           `,

diff --git a/docs/src/components/home/MaterialDesignComponents.tsx b/docs/src/components/home/MaterialDesignComponents.tsx
@@ -342,7 +342,7 @@ export function buildTheme(): ThemeOptions {
               },
             },
             theme.applyDarkStyles({
-              backgroundColor: alpha(theme.palette.primaryDark[900], 0.5),
+              backgroundColor: alpha(theme.palette.primaryDark[700], 0.5),
               color: (theme.vars || theme).palette.primaryDark[50],
               borderColor: alpha(theme.palette.primaryDark[500], 0.2),
               '& .MuiAlert-icon': {
@@ -419,25 +419,25 @@ export function buildTheme(): ThemeOptions {
                 borderColor: (theme.vars || theme).palette.primary[300],
               },
               '& .MuiOutlinedInput-input': {
-                backgroundColor: 'transparent',
+                backgroundColor: (theme.vars || theme).palette.primaryDark[900],
               },
               '& .MuiFilledInput-root': {
-                borderColor: (theme.vars || theme).palette.primaryDark[800],
-                backgroundColor: alpha(theme.palette.primaryDark[800], 0.5),
+                borderColor: (theme.vars || theme).palette.primaryDark[700],
+                backgroundColor: alpha(theme.palette.primaryDark[900], 0.5),
                 '&:after': {
                   borderColor: (theme.vars || theme).palette.primary[300],
                 },
                 '&:hover': {
                   backgroundColor: alpha(theme.palette.primaryDark[700], 0.8),
-                  borderColor: (theme.vars || theme).palette.primaryDark[500],
+                  borderColor: (theme.vars || theme).palette.primaryDark[600],
                 },
               },
               '& .MuiInputLabel-filled.Mui-focused': {
                 color: (theme.vars || theme).palette.grey[500],
               },
               '& .MuiInput-root.Mui-focused': {
                 '&:after': {
-                  borderColor: (theme.vars || theme).palette.primaryDark[800],
+                  borderColor: (theme.vars || theme).palette.primaryDark[400],
                 },
               },
               '& .MuiInputLabel-root.Mui-focused': {

diff --git a/docs/src/components/home/ProductSuite.tsx b/docs/src/components/home/ProductSuite.tsx
@@ -50,17 +50,15 @@ function ProductSuite() {
     <Section bg="gradient" ref={ref}>
       <Grid container spacing={2}>
         <Grid item md={6}>
-          <Box sx={{ maxWidth: 500 }}>
-            <SectionHeadline
-              overline="Products"
-              title={
-                <Typography variant="h2" sx={{ my: 1 }}>
-                  Every component you need is <GradientText>ready for production</GradientText>
-                </Typography>
-              }
-              description="Build at an accelerated pace without sacrificing flexibility or control."
-            />
-          </Box>
+          <SectionHeadline
+            overline="Products"
+            title={
+              <Typography variant="h2" sx={{ my: 1 }}>
+                Every component you need is <GradientText>ready for production</GradientText>
+              </Typography>
+            }
+            description="Build at an accelerated pace without sacrificing flexibility or control."
+          />
           <Box sx={{ mt: 4 }} />
           <ProductsSwitcher
             inView={inView}

diff --git a/docs/src/components/home/ShowcaseContainer.tsx b/docs/src/components/home/ShowcaseContainer.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { alpha } from '@mui/material/styles';
 import Box, { BoxProps } from '@mui/material/Box';
 import Fade from '@mui/material/Fade';
 import NoSsr from '@mui/material/NoSsr';
@@ -44,7 +45,7 @@ export default function ShowcaseContainer({
             },
             (theme) =>
               theme.applyDarkStyles({
-                bgcolor: 'primaryDark.700',
+                bgcolor: alpha(theme.palette.primaryDark[800], 0.5),
                 borderColor: 'divider',
               }),
             ...(Array.isArray(previewSx) ? previewSx : [previewSx]),
@@ -64,14 +65,10 @@ export default function ShowcaseContainer({
               borderWidth: '0 1px 1px 1px',
               borderStyle: 'solid',
               borderColor: 'divider',
-              bgcolor: 'primaryDark.800',
-              borderBottomLeftRadius: 10,
-              borderBottomRightRadius: 10,
+              bgcolor: 'common.black',
+              borderBottomLeftRadius: 12,
+              borderBottomRightRadius: 12,
             },
-            (theme) =>
-              theme.applyDarkStyles({
-                borderColor: 'divider',
-              }),
             ...(Array.isArray(codeSx) ? codeSx : [codeSx]),
           ]}
         >

diff --git a/docs/src/components/home/Testimonials.tsx b/docs/src/components/home/Testimonials.tsx
@@ -21,8 +21,8 @@ function Testimonials() {
       ref={ref}
       sx={(theme) => ({
         background: `linear-gradient(180deg, ${
-          (theme.vars || theme).palette.primaryDark[900]
-        } 2%, ${alpha(theme.palette.primaryDark[700], 0.5)} 80%),
+          (theme.vars || theme).palette.primaryDark[800]
+        } 2%, ${alpha(theme.palette.primaryDark[700], 0.4)} 80%),
         ${(theme.vars || theme).palette.primaryDark[900]}
         `,
       })}

diff --git a/docs/src/components/pricing/PricingFAQ.tsx b/docs/src/components/pricing/PricingFAQ.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable react/no-unescaped-entities */
 import * as React from 'react';
-import { styled } from '@mui/material/styles';
+import { styled, alpha } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Grid from '@mui/material/Grid';
 import Link from '@mui/material/Link';
@@ -200,7 +200,8 @@ const Accordion = styled(MuiAccordion)(({ theme }) => ({
     borderRadius: theme.shape.borderRadius,
   },
   '&:hover': {
-    boxShadow: '1px 1px 20px 0 rgb(90 105 120 / 20%)',
+    borderColor: theme.palette.primary[300],
+    boxShadow: `0px 4px 8px ${alpha(theme.palette.grey[200], 0.6)}`,
   },
   '&:not(:last-of-type)': {
     marginBottom: theme.spacing(2),
@@ -211,6 +212,12 @@ const Accordion = styled(MuiAccordion)(({ theme }) => ({
   '&:after': {
     display: 'none',
   },
+  ...theme.applyDarkStyles({
+    '&:hover': {
+      borderColor: alpha(theme.palette.primary[600], 0.6),
+      boxShadow: '0px 4px 20px rgba(0, 0, 0, 0.8)',
+    },
+  }),
 }));
 
 const AccordionSummary = styled(MuiAccordionSummary)(({ theme }) => ({
@@ -287,7 +294,7 @@ export default function PricingFAQ() {
               borderColor: 'grey.300',
               bgcolor: 'white',
               ...theme.applyDarkStyles({
-                borderColor: 'primaryDark.400',
+                borderColor: 'divider',
                 bgcolor: 'primaryDark.800',
               }),
             })}

diff --git a/docs/src/components/pricing/PricingTable.tsx b/docs/src/components/pricing/PricingTable.tsx
@@ -339,7 +339,7 @@ function ColumnHeadHighlight(props: BoxProps) {
         (theme) =>
           theme.applyDarkStyles({
             borderColor: 'primaryDark.700',
-            background: alpha(theme.palette.primaryDark[900], 0.5),
+            background: alpha(theme.palette.primaryDark[700], 0.3),
           }),
         ...(Array.isArray(props.sx) ? props.sx : [props.sx]),
       ]}
@@ -373,7 +373,7 @@ function Cell({ highlighted = false, ...props }: BoxProps & { highlighted?: bool
           theme.applyDarkStyles({
             ...(highlighted && {
               borderColor: 'primaryDark.700',
-              bgcolor: alpha(theme.palette.primaryDark[900], 0.5),
+              bgcolor: alpha(theme.palette.primaryDark[700], 0.3),
             }),
           }),
         ...(Array.isArray(props.sx) ? props.sx : [props.sx]),
@@ -402,7 +402,7 @@ function RowHead({ children, startIcon, ...props }: BoxProps & { startIcon?: Rea
         },
         (theme) =>
           theme.applyDarkStyles({
-            bgcolor: 'primaryDark.900',
+            bgcolor: 'primaryDark.800',
           }),
         ...(Array.isArray(props.sx) ? props.sx : [props.sx]),
       ]}
@@ -1118,7 +1118,7 @@ function renderMasterRow(key: string, gridSx: object, plans: Array<any>) {
           },
           ...theme.applyDarkStyles({
             '&:hover > div': {
-              bgcolor: alpha(theme.palette.primaryDark[900], 0.5),
+              bgcolor: theme.palette.primaryDark[800],
             },
           }),
         }),

diff --git a/docs/src/components/productBaseUI/BaseUIEnd.tsx b/docs/src/components/productBaseUI/BaseUIEnd.tsx
@@ -20,9 +20,9 @@ export default function BaseUIEnd() {
       sx={{
         color: 'text.secondary',
         background: (theme) =>
-          `linear-gradient(180deg, ${(theme.vars || theme).palette.primaryDark[800]} 50%, 
+          `linear-gradient(180deg, ${(theme.vars || theme).palette.primaryDark[900]} 50%, 
           ${alpha(theme.palette.primary[800], 0.2)} 100%), ${
-            (theme.vars || theme).palette.primaryDark[800]
+            (theme.vars || theme).palette.primaryDark[900]
           }`,
       }}
     >

diff --git a/docs/src/components/productBaseUI/BaseUITestimonial.tsx b/docs/src/components/productBaseUI/BaseUITestimonial.tsx
@@ -49,7 +49,7 @@ export default function BaseUITestimonial() {
           </Box>
           <Typography variant="body2" sx={{ mt: 2 }}>
             Nhost&apos;s new dashboard, powered by Base UI &nbsp;&nbsp;
-            <Typography component="span" variant="inherit" color="divider">
+            <Typography component="span" variant="inherit" color="grey.500" sx={{ opacity: '50%' }}>
               /
             </Typography>
             &nbsp;&nbsp;

diff --git a/docs/src/components/productCore/CoreHeroEnd.tsx b/docs/src/components/productCore/CoreHeroEnd.tsx
@@ -19,9 +19,9 @@ export default function CoreHeroEnd() {
       data-mui-color-scheme="dark"
       sx={{
         background: (theme) =>
-          `linear-gradient(180deg, ${(theme.vars || theme).palette.primaryDark[800]} 50%,
+          `linear-gradient(180deg, ${(theme.vars || theme).palette.primaryDark[900]} 50%,
         ${alpha(theme.palette.primary[800], 0.2)} 100%), ${
-            (theme.vars || theme).palette.primaryDark[800]
+            (theme.vars || theme).palette.primaryDark[900]
           }`,
       }}
     >