-
-
Notifications
You must be signed in to change notification settings - Fork 32.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[joy-ui] Introduce color inversion utilities (#38916)
- Loading branch information
1 parent
58504fa
commit 73a7cde
Showing
129 changed files
with
1,409 additions
and
1,683 deletions.
There are no files selected for viewing
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
88 changes: 88 additions & 0 deletions
88
docs/data/joy/main-features/color-inversion/ColorInversionAnyParent.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 |
|---|---|---|
| @@ -0,0 +1,88 @@ | ||
| import * as React from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import { applySolidInversion } from '@mui/joy/colorInversion'; | ||
| import Box from '@mui/joy/Box'; | ||
| import Button from '@mui/joy/Button'; | ||
| import Typography from '@mui/joy/Typography'; | ||
|
|
||
| function Stat({ description, value, sx, ...props }) { | ||
| return ( | ||
| <Box | ||
| {...props} | ||
| sx={[ | ||
| { borderLeft: 3, borderColor: 'divider', px: 2, py: 0.5 }, | ||
| ...(Array.isArray(sx) ? sx : [sx]), | ||
| ]} | ||
| > | ||
| <Typography level="h3" component="div"> | ||
| {value} | ||
| </Typography> | ||
| <Typography level="title-sm" textColor="text.secondary"> | ||
| {description} | ||
| </Typography> | ||
| </Box> | ||
| ); | ||
| } | ||
|
|
||
| Stat.propTypes = { | ||
| description: PropTypes.node, | ||
| /** | ||
| * The system prop that allows defining system overrides as well as additional CSS styles. | ||
| */ | ||
| sx: PropTypes.oneOfType([ | ||
| PropTypes.arrayOf( | ||
| PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool]), | ||
| ), | ||
| PropTypes.func, | ||
| PropTypes.object, | ||
| ]), | ||
| value: PropTypes.node, | ||
| }; | ||
|
|
||
| export default function ColorInversionAnyParent() { | ||
| return ( | ||
| <Box | ||
| sx={[ | ||
| { | ||
| display: 'grid', | ||
| gridTemplateColumns: { sm: '1fr 1fr' }, | ||
| alignItems: 'center', | ||
| rowGap: 2, | ||
| columnGap: 8, | ||
| p: 2, | ||
| background: (theme) => | ||
| `linear-gradient(45deg, ${theme.vars.palette.neutral[800]}, ${theme.vars.palette.neutral[600]})`, | ||
| borderRadius: 'sm', | ||
| }, | ||
| applySolidInversion('neutral'), | ||
| ]} | ||
| > | ||
| <div> | ||
| <Typography sx={{ my: 2 }}> | ||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod | ||
| tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim | ||
| veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea | ||
| commodo consequat. | ||
| </Typography> | ||
| <Button variant="soft" sx={{ mt: 1 }}> | ||
| Learn more | ||
| </Button> | ||
| </div> | ||
| <Box | ||
| sx={{ | ||
| display: 'grid', | ||
| gridTemplateColumns: { | ||
| xs: 'repeat(auto-fill, minmax(min(100%, 180px), 1fr))', | ||
| sm: '1fr 1fr', | ||
| }, | ||
| gap: 3, | ||
| }} | ||
| > | ||
| <Stat value="4M" description="Weekly download on NPM" /> | ||
| <Stat value="87k" description="Stars on Github" /> | ||
| <Stat value="2.7k" description="Open source contributors" /> | ||
| <Stat value="18.4k" description="Followers on Twitter" /> | ||
| </Box> | ||
| </Box> | ||
| ); | ||
| } |
80 changes: 80 additions & 0 deletions
80
docs/data/joy/main-features/color-inversion/ColorInversionAnyParent.tsx
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 |
|---|---|---|
| @@ -0,0 +1,80 @@ | ||
| import * as React from 'react'; | ||
| import { applySolidInversion } from '@mui/joy/colorInversion'; | ||
| import Box, { BoxProps } from '@mui/joy/Box'; | ||
| import Button from '@mui/joy/Button'; | ||
| import Typography from '@mui/joy/Typography'; | ||
|
|
||
| function Stat({ | ||
| description, | ||
| value, | ||
| sx, | ||
| ...props | ||
| }: { | ||
| description: React.ReactNode; | ||
| value: React.ReactNode; | ||
| } & BoxProps) { | ||
| return ( | ||
| <Box | ||
| {...props} | ||
| sx={[ | ||
| { borderLeft: 3, borderColor: 'divider', px: 2, py: 0.5 }, | ||
| ...(Array.isArray(sx) ? sx : [sx]), | ||
| ]} | ||
| > | ||
| <Typography level="h3" component="div"> | ||
| {value} | ||
| </Typography> | ||
| <Typography level="title-sm" textColor="text.secondary"> | ||
| {description} | ||
| </Typography> | ||
| </Box> | ||
| ); | ||
| } | ||
|
|
||
| export default function ColorInversionAnyParent() { | ||
| return ( | ||
| <Box | ||
| sx={[ | ||
| { | ||
| display: 'grid', | ||
| gridTemplateColumns: { sm: '1fr 1fr' }, | ||
| alignItems: 'center', | ||
| rowGap: 2, | ||
| columnGap: 8, | ||
| p: 2, | ||
| background: (theme) => | ||
| `linear-gradient(45deg, ${theme.vars.palette.neutral[800]}, ${theme.vars.palette.neutral[600]})`, | ||
| borderRadius: 'sm', | ||
| }, | ||
| applySolidInversion('neutral'), | ||
| ]} | ||
| > | ||
| <div> | ||
| <Typography sx={{ my: 2 }}> | ||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod | ||
| tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim | ||
| veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea | ||
| commodo consequat. | ||
| </Typography> | ||
| <Button variant="soft" sx={{ mt: 1 }}> | ||
| Learn more | ||
| </Button> | ||
| </div> | ||
| <Box | ||
| sx={{ | ||
| display: 'grid', | ||
| gridTemplateColumns: { | ||
| xs: 'repeat(auto-fill, minmax(min(100%, 180px), 1fr))', | ||
| sm: '1fr 1fr', | ||
| }, | ||
| gap: 3, | ||
| }} | ||
| > | ||
| <Stat value="4M" description="Weekly download on NPM" /> | ||
| <Stat value="87k" description="Stars on Github" /> | ||
| <Stat value="2.7k" description="Open source contributors" /> | ||
| <Stat value="18.4k" description="Followers on Twitter" /> | ||
| </Box> | ||
| </Box> | ||
| ); | ||
| } |
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
62 changes: 62 additions & 0 deletions
62
docs/data/joy/main-features/color-inversion/ColorInversionSkip.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 |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| import * as React from 'react'; | ||
| import AspectRatio from '@mui/joy/AspectRatio'; | ||
| import Card from '@mui/joy/Card'; | ||
| import SvgIcon from '@mui/joy/SvgIcon'; | ||
| import IconButton from '@mui/joy/IconButton'; | ||
| import Typography from '@mui/joy/Typography'; | ||
| import ArrowForward from '@mui/icons-material/ArrowForward'; | ||
|
|
||
| export default function ColorInversionSkip() { | ||
| return ( | ||
| <Card | ||
| size="lg" | ||
| variant="solid" | ||
| color="neutral" | ||
| invertedColors | ||
| sx={{ maxWidth: 300, boxShadow: 'lg', borderRadius: 'xl' }} | ||
| > | ||
| <AspectRatio | ||
| data-skip-inverted-colors | ||
| variant="soft" | ||
| color="success" | ||
| ratio="1" | ||
| sx={{ width: 48 }} | ||
| > | ||
| <div> | ||
| <SvgIcon> | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| width="24" | ||
| height="24" | ||
| viewBox="0 0 24 24" | ||
| fill="none" | ||
| stroke="currentColor" | ||
| strokeWidth="2" | ||
| strokeLinecap="round" | ||
| strokeLinejoin="round" | ||
| > | ||
| <rect x="3" y="8" width="18" height="4" rx="1" /> | ||
| <path d="M12 8v13" /> | ||
| <path d="M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7" /> | ||
| <path d="M7.5 8a2.5 2.5 0 0 1 0-5A4.8 8 0 0 1 12 8a4.8 8 0 0 1 4.5-5 2.5 2.5 0 0 1 0 5" /> | ||
| </svg> | ||
| </SvgIcon> | ||
| </div> | ||
| </AspectRatio> | ||
|
|
||
| <Typography level="h3">Design Thinking</Typography> | ||
| <Typography level="body-sm"> | ||
| How to apply design thinking to your problem in order to generate innovative | ||
| and user-centric solutions. | ||
| </Typography> | ||
|
|
||
| <IconButton | ||
| variant="plain" | ||
| size="lg" | ||
| sx={{ alignSelf: 'flex-end', borderRadius: '50%', mr: -1, my: -1 }} | ||
| > | ||
| <ArrowForward /> | ||
| </IconButton> | ||
| </Card> | ||
| ); | ||
| } |
62 changes: 62 additions & 0 deletions
62
docs/data/joy/main-features/color-inversion/ColorInversionSkip.tsx
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 |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| import * as React from 'react'; | ||
| import AspectRatio from '@mui/joy/AspectRatio'; | ||
| import Card from '@mui/joy/Card'; | ||
| import SvgIcon from '@mui/joy/SvgIcon'; | ||
| import IconButton from '@mui/joy/IconButton'; | ||
| import Typography from '@mui/joy/Typography'; | ||
| import ArrowForward from '@mui/icons-material/ArrowForward'; | ||
|
|
||
| export default function ColorInversionSkip() { | ||
| return ( | ||
| <Card | ||
| size="lg" | ||
| variant="solid" | ||
| color="neutral" | ||
| invertedColors | ||
| sx={{ maxWidth: 300, boxShadow: 'lg', borderRadius: 'xl' }} | ||
| > | ||
| <AspectRatio | ||
| data-skip-inverted-colors | ||
| variant="soft" | ||
| color="success" | ||
| ratio="1" | ||
| sx={{ width: 48 }} | ||
| > | ||
| <div> | ||
| <SvgIcon> | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| width="24" | ||
| height="24" | ||
| viewBox="0 0 24 24" | ||
| fill="none" | ||
| stroke="currentColor" | ||
| strokeWidth="2" | ||
| strokeLinecap="round" | ||
| strokeLinejoin="round" | ||
| > | ||
| <rect x="3" y="8" width="18" height="4" rx="1" /> | ||
| <path d="M12 8v13" /> | ||
| <path d="M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7" /> | ||
| <path d="M7.5 8a2.5 2.5 0 0 1 0-5A4.8 8 0 0 1 12 8a4.8 8 0 0 1 4.5-5 2.5 2.5 0 0 1 0 5" /> | ||
| </svg> | ||
| </SvgIcon> | ||
| </div> | ||
| </AspectRatio> | ||
|
|
||
| <Typography level="h3">Design Thinking</Typography> | ||
| <Typography level="body-sm"> | ||
| How to apply design thinking to your problem in order to generate innovative | ||
| and user-centric solutions. | ||
| </Typography> | ||
|
|
||
| <IconButton | ||
| variant="plain" | ||
| size="lg" | ||
| sx={{ alignSelf: 'flex-end', borderRadius: '50%', mr: -1, my: -1 }} | ||
| > | ||
| <ArrowForward /> | ||
| </IconButton> | ||
| </Card> | ||
| ); | ||
| } |
Oops, something went wrong.