[joy-ui][docs] Refresh the marketing example on the Color Inversion p…

…age (mui#41497) Co-authored-by: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
pluvio72 · Mar 28, 2024 · d10803f · d10803f
1 parent 91e32dc
commit d10803f
Show file tree

Hide file tree

Showing 8 changed files with 207 additions and 103 deletions.
diff --git a/docs/data/joy/main-features/color-inversion/ColorInversionMarketing.js b/docs/data/joy/main-features/color-inversion/ColorInversionMarketing.js
@@ -1,84 +1,127 @@
 import * as React from 'react';
-
+import { useTheme } from '@mui/joy/styles';
 import Box from '@mui/joy/Box';
 import Button from '@mui/joy/Button';
 import IconButton from '@mui/joy/IconButton';
 import Typography from '@mui/joy/Typography';
 import Sheet from '@mui/joy/Sheet';
 import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 import ColorLensRoundedIcon from '@mui/icons-material/ColorLensRounded';
+import InvertColorsIcon from '@mui/icons-material/InvertColors';
 
 /**
  * Design credit: https://flutter.dev/
  */
 
 export default function ColorInversionMarketing() {
   const [color, setColor] = React.useState('primary');
+  const [solid, setSolid] = React.useState(true);
+  const theme = useTheme();
+
+  const shade = (x) => theme.vars.palette[color][x];
+  const color1 = solid ? shade(800) : shade(600);
+  const color2 = solid ? shade(600) : shade(200);
+  const color3 = shade(900);
+  const gradient1 = `${color1}, ${color2} 65%`;
+  const gradient2 = `${color1} 65%, ${color3}`;
+  const textColor = { color: solid ? shade(50) : shade(700) };
+
+  const buttonStyles = {
+    borderRadius: 99,
+    '&:hover': {
+      '& .MuiButton-endDecorator': { transform: 'translate(4px, 0px)' },
+    },
+    '& span': { transition: '0.15s' },
+  };
+
   return (
     <Sheet
-      variant="solid"
+      variant={solid ? 'solid' : 'soft'}
       color={color}
       invertedColors
       sx={{
         flexGrow: 1,
+        position: 'relative',
         display: 'flex',
-        bgcolor: color === 'primary' ? '#042449' : undefined,
-        p: { xs: '36px', md: '70px' },
-        pt: { xs: '24px', md: '60px' },
-        borderRadius: 'lg',
-        overflow: 'hidden',
-        '& button': { borderRadius: 'xl' },
+        bgcolor: solid ? shade(800) : shade(100),
+        p: '6rem 3rem',
+        borderRadius: 'md',
+        overflow: 'clip',
+        '&::after': {
+          content: `""`,
+          display: 'block',
+          width: '20rem',
+          height: '40rem',
+          background: `linear-gradient(to top, ${gradient1}, ${gradient2})`,
+          position: 'absolute',
+          transform: 'rotate(-45deg)',
+          top: { xs: '-80%', sm: '-95%', md: '-65%', lg: '-70%' },
+          right: { xs: '-70%', sm: '-15%' },
+        },
       }}
     >
-      <Box sx={{ zIndex: 1, position: 'relative' }}>
-        <Typography level="h2">Get started</Typography>
-        <Typography sx={{ mt: 0.5, mb: 2 }}>
+      <div>
+        <Typography level="h1" component="h2" sx={textColor}>
+          Get started
+        </Typography>
+        <Typography sx={{ mt: 1, mb: 2, ...textColor }}>
           Instant access to the power of the Joy UI library.
         </Typography>
         <Box
           sx={{
             display: 'flex',
-            gap: 1,
             flexWrap: 'wrap',
-            maxWidth: 'max-content',
-            '& > *': { flexGrow: 1, fontWeight: 'lg' },
+            gap: 1,
           }}
         >
-          <Button sx={{ minWidth: 120 }}>Install</Button>
+          <Button
+            endDecorator={<ArrowForwardIcon fontSize="md" />}
+            sx={{
+              ...buttonStyles,
+              '&:active': { bgcolor: solid ? shade(200) : shade(700) },
+            }}
+          >
+            Install
+          </Button>
           <Button
             variant="plain"
             endDecorator={<ArrowForwardIcon fontSize="md" />}
             sx={{
-              '&:hover': { '--Button-gap': '0.625rem' },
-              '& span': { transition: '0.15s' },
+              ...textColor,
+              ...buttonStyles,
             }}
           >
             See the docs
           </Button>
         </Box>
-      </Box>
-      <Box
-        component="img"
-        alt=""
-        src="https://storage.googleapis.com/cms-storage-bucket/72521e62275b24d3c37d.png"
-        sx={{ position: 'absolute', height: '100%', top: 0, right: 0 }}
-      />
-      <IconButton
+      </div>
+      <Sheet
         sx={{
+          zIndex: 1,
           position: 'absolute',
           bottom: '1.5rem',
           right: '1.5rem',
-          borderRadius: '50%',
-        }}
-        onClick={() => {
-          const colors = ['primary', 'neutral', 'danger', 'success', 'warning'];
-
-          const nextColorIndex = colors.indexOf(color) + 1;
-          setColor(colors[nextColorIndex] ?? colors[0]);
+          bgcolor: 'transparent',
+          display: 'flex',
+          gap: 2,
+          '& button': { borderRadius: '50%' },
         }}
       >
-        <ColorLensRoundedIcon fontSize="small" />
-      </IconButton>
+        <IconButton variant="solid" onClick={() => setSolid((state) => !state)}>
+          <InvertColorsIcon fontSize="xl" />
+        </IconButton>
+        <IconButton
+          variant="soft"
+          onClick={() => {
+            const colors = ['primary', 'neutral', 'danger', 'success', 'warning'];
+
+            const nextColorIndex = colors.indexOf(color) + 1;
+            setColor(colors[nextColorIndex] ?? colors[0]);
+          }}
+        >
+          <ColorLensRoundedIcon fontSize="xl" />
+        </IconButton>
+      </Sheet>
     </Sheet>
   );
 }
diff --git a/docs/data/joy/main-features/color-inversion/ColorInversionMarketing.tsx b/docs/data/joy/main-features/color-inversion/ColorInversionMarketing.tsx
@@ -1,89 +1,132 @@
 import * as React from 'react';
-import { ColorPaletteProp } from '@mui/joy/styles';
+import { ColorPaletteProp, PaletteRange, useTheme } from '@mui/joy/styles';
 import Box from '@mui/joy/Box';
 import Button from '@mui/joy/Button';
 import IconButton from '@mui/joy/IconButton';
 import Typography from '@mui/joy/Typography';
 import Sheet from '@mui/joy/Sheet';
 import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 import ColorLensRoundedIcon from '@mui/icons-material/ColorLensRounded';
+import InvertColorsIcon from '@mui/icons-material/InvertColors';
 
 /**
  * Design credit: https://flutter.dev/
  */
 
 export default function ColorInversionMarketing() {
   const [color, setColor] = React.useState<ColorPaletteProp>('primary');
+  const [solid, setSolid] = React.useState(true);
+  const theme = useTheme();
+
+  const shade = (x: keyof PaletteRange): string => theme.vars.palette[color][x];
+  const color1 = solid ? shade(800) : shade(600);
+  const color2 = solid ? shade(600) : shade(200);
+  const color3 = shade(900);
+  const gradient1 = `${color1}, ${color2} 65%`;
+  const gradient2 = `${color1} 65%, ${color3}`;
+  const textColor = { color: solid ? shade(50) : shade(700) };
+
+  const buttonStyles = {
+    borderRadius: 99,
+    '&:hover': {
+      '& .MuiButton-endDecorator': { transform: 'translate(4px, 0px)' },
+    },
+    '& span': { transition: '0.15s' },
+  };
+
   return (
     <Sheet
-      variant="solid"
+      variant={solid ? 'solid' : 'soft'}
       color={color}
       invertedColors
       sx={{
         flexGrow: 1,
+        position: 'relative',
         display: 'flex',
-        bgcolor: color === 'primary' ? '#042449' : undefined,
-        p: { xs: '36px', md: '70px' },
-        pt: { xs: '24px', md: '60px' },
-        borderRadius: 'lg',
-        overflow: 'hidden',
-        '& button': { borderRadius: 'xl' },
+        bgcolor: solid ? shade(800) : shade(100),
+        p: '6rem 3rem',
+        borderRadius: 'md',
+        overflow: 'clip',
+        '&::after': {
+          content: `""`,
+          display: 'block',
+          width: '20rem',
+          height: '40rem',
+          background: `linear-gradient(to top, ${gradient1}, ${gradient2})`,
+          position: 'absolute',
+          transform: 'rotate(-45deg)',
+          top: { xs: '-80%', sm: '-95%', md: '-65%', lg: '-70%' },
+          right: { xs: '-70%', sm: '-15%' },
+        },
       }}
     >
-      <Box sx={{ zIndex: 1, position: 'relative' }}>
-        <Typography level="h2">Get started</Typography>
-        <Typography sx={{ mt: 0.5, mb: 2 }}>
+      <div>
+        <Typography level="h1" component="h2" sx={textColor}>
+          Get started
+        </Typography>
+        <Typography sx={{ mt: 1, mb: 2, ...textColor }}>
           Instant access to the power of the Joy UI library.
         </Typography>
         <Box
           sx={{
             display: 'flex',
-            gap: 1,
             flexWrap: 'wrap',
-            maxWidth: 'max-content',
-            '& > *': { flexGrow: 1, fontWeight: 'lg' },
+            gap: 1,
           }}
         >
-          <Button sx={{ minWidth: 120 }}>Install</Button>
+          <Button
+            endDecorator={<ArrowForwardIcon fontSize="md" />}
+            sx={{
+              ...buttonStyles,
+              '&:active': { bgcolor: solid ? shade(200) : shade(700) },
+            }}
+          >
+            Install
+          </Button>
           <Button
             variant="plain"
             endDecorator={<ArrowForwardIcon fontSize="md" />}
             sx={{
-              '&:hover': { '--Button-gap': '0.625rem' },
-              '& span': { transition: '0.15s' },
+              ...textColor,
+              ...buttonStyles,
             }}
           >
             See the docs
           </Button>
         </Box>
-      </Box>
-      <Box
-        component="img"
-        alt=""
-        src="https://storage.googleapis.com/cms-storage-bucket/72521e62275b24d3c37d.png"
-        sx={{ position: 'absolute', height: '100%', top: 0, right: 0 }}
-      />
-      <IconButton
+      </div>
+      <Sheet
         sx={{
+          zIndex: 1,
           position: 'absolute',
           bottom: '1.5rem',
           right: '1.5rem',
-          borderRadius: '50%',
-        }}
-        onClick={() => {
-          const colors: ColorPaletteProp[] = [
-            'primary',
-            'neutral',
-            'danger',
-            'success',
-            'warning',
-          ];
-          const nextColorIndex = colors.indexOf(color) + 1;
-          setColor(colors[nextColorIndex] ?? colors[0]);
+          bgcolor: 'transparent',
+          display: 'flex',
+          gap: 2,
+          '& button': { borderRadius: '50%' },
         }}
       >
-        <ColorLensRoundedIcon fontSize="small" />
-      </IconButton>
+        <IconButton variant="solid" onClick={() => setSolid((state) => !state)}>
+          <InvertColorsIcon fontSize="xl" />
+        </IconButton>
+        <IconButton
+          variant="soft"
+          onClick={() => {
+            const colors: ColorPaletteProp[] = [
+              'primary',
+              'neutral',
+              'danger',
+              'success',
+              'warning',
+            ];
+            const nextColorIndex = colors.indexOf(color) + 1;
+            setColor(colors[nextColorIndex] ?? colors[0]);
+          }}
+        >
+          <ColorLensRoundedIcon fontSize="xl" />
+        </IconButton>
+      </Sheet>
     </Sheet>
   );
 }
diff --git a/docs/data/joy/main-features/color-inversion/ColorInversionMotivation.js b/docs/data/joy/main-features/color-inversion/ColorInversionMotivation.js
@@ -10,7 +10,7 @@ import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
 
 export default function ColorInversionMotivation() {
   const demo = (
-    <Card sx={{ gap: 2, maxWidth: 300 }}>
+    <Card sx={{ gap: 2, maxWidth: { xs: '100%', sm: 300 } }}>
       <Chip
         size="sm"
         variant="soft"
@@ -41,11 +41,10 @@ export default function ColorInversionMotivation() {
         display: 'flex',
         flexWrap: 'wrap',
         gap: 6,
-        pt: 3,
       }}
     >
       {/* Left: The global variants are applied to children only */}
-      <Box sx={{ maxWidth: 300 }}>
+      <Box sx={{ maxWidth: { xs: '100%', sm: 300 } }}>
         {demo}
         <Typography level="body-sm" mt={2} textAlign="center">
           <b>One layer</b>
@@ -55,7 +54,7 @@ export default function ColorInversionMotivation() {
       </Box>
 
       {/* Right: The global variants are applied to both parent and children */}
-      <Box sx={{ maxWidth: 300 }}>
+      <Box sx={{ maxWidth: { xs: '100%', sm: 300 } }}>
         {React.cloneElement(demo, {
           variant: 'solid',
           color: 'primary',

diff --git a/docs/data/joy/main-features/color-inversion/ColorInversionMotivation.tsx b/docs/data/joy/main-features/color-inversion/ColorInversionMotivation.tsx
@@ -10,7 +10,7 @@ import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
 
 export default function ColorInversionMotivation() {
   const demo = (
-    <Card sx={{ gap: 2, maxWidth: 300 }}>
+    <Card sx={{ gap: 2, maxWidth: { xs: '100%', sm: 300 } }}>
       <Chip
         size="sm"
         variant="soft"
@@ -40,11 +40,10 @@ export default function ColorInversionMotivation() {
         display: 'flex',
         flexWrap: 'wrap',
         gap: 6,
-        pt: 3,
       }}
     >
       {/* Left: The global variants are applied to children only */}
-      <Box sx={{ maxWidth: 300 }}>
+      <Box sx={{ maxWidth: { xs: '100%', sm: 300 } }}>
         {demo}
         <Typography level="body-sm" mt={2} textAlign="center">
           <b>One layer</b>
@@ -54,7 +53,7 @@ export default function ColorInversionMotivation() {
       </Box>
 
       {/* Right: The global variants are applied to both parent and children */}
-      <Box sx={{ maxWidth: 300 }}>
+      <Box sx={{ maxWidth: { xs: '100%', sm: 300 } }}>
         {React.cloneElement(demo, {
           variant: 'solid',
           color: 'primary',