-
-
Notifications
You must be signed in to change notification settings - Fork 32.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'next' into deprecate-slider-components
- Loading branch information
Showing
62 changed files
with
1,378 additions
and
283 deletions.
There are no files selected for viewing
File renamed without changes.
File renamed without changes.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
111 changes: 77 additions & 34 deletions
111
docs/data/joy/main-features/color-inversion/ColorInversionMarketing.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| ); | ||
| } |
Oops, something went wrong.