init project

test/regressions/fixtures/JoyColorInversion/DrawerColorInversion.js

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import { CssVarsProvider } from '@mui/joy/styles';
+import CssBaseline from '@mui/joy/CssBaseline';
+import Box from '@mui/joy/Box';
+import Card from '@mui/joy/Card';
+import Drawer from '@mui/joy/Drawer';
+import Divider from '@mui/joy/Divider';
+import List from '@mui/joy/List';
+import ListItem from '@mui/joy/ListItem';
+import ListItemButton from '@mui/joy/ListItemButton';
+import Typography from '@mui/joy/Typography';
+
+export default function DrawerColorInversion() {
+  return (
+    <CssVarsProvider>
+      <CssBaseline />
+      <Box sx={{ width: '100vw', height: '100vh', bgcolor: 'background.body' }} />
+      <Drawer open color="primary" variant="solid" invertedColors>
+        <Box role="presentation">
+          <List>
+            {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text) => (
+              <ListItem key={text}>
+                <ListItemButton>{text}</ListItemButton>
+              </ListItem>
+            ))}
+          </List>
+          <Divider />
+          <List>
+            {['All mail', 'Trash', 'Spam'].map((text) => (
+              <ListItem key={text}>
+                <ListItemButton>{text}</ListItemButton>
+              </ListItem>
+            ))}
+          </List>
+        </Box>
+        <Card variant="soft">
+          <Typography level="title-lg" fontFamily="code">
+            •••• •••• •••• 1212
+          </Typography>
+          <Box sx={{ display: 'flex', gap: 2, justifyContent: 'space-between' }}>
+            <div>
+              <Typography fontSize="xs" fontFamily="code">
+                CARD NAME
+              </Typography>
+              <Typography level="title-sm" fontSize="sm">
+                JOHN DOE
+              </Typography>
+            </div>
+            <div>
+              <Typography fontSize="xs" textAlign="right" fontFamily="code">
+                EXPIRE
+              </Typography>
+              <Typography level="title-sm" fontSize="sm" textAlign="right">
+                07/25
+              </Typography>
+            </div>
+          </Box>
+        </Card>
+      </Drawer>
+    </CssVarsProvider>
+  );
+}

test/regressions/fixtures/JoyColorInversion/JoyColorInversion.js

@@ -0,0 +1,169 @@
+import * as React from 'react';
+import { CssVarsProvider } from '@mui/joy/styles';
+import {
+  CssBaseline,
+  Sheet,
+  Box,
+  Alert,
+  AspectRatio,
+  Avatar,
+  Badge,
+  Button,
+  Card,
+  CardContent,
+  CardOverflow,
+  Checkbox,
+  Chip,
+  ChipDelete,
+  CircularProgress,
+  Divider,
+  IconButton,
+  Input,
+  LinearProgress,
+  Link,
+  List,
+  ListDivider,
+  ListItem,
+  ListItemButton,
+  ListSubheader,
+  Option,
+  Radio,
+  Select,
+  Slider,
+  Switch,
+  Tab,
+  TabList,
+  Tabs,
+  Textarea,
+  Typography,
+} from '@mui/joy';
+
+const VARIANTS = ['plain', 'outlined', 'soft', 'solid'];
+
+export default function JoyColorInversion() {
+  const renderComponents = (elm) => (
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+    >
+      {React.Children.toArray(VARIANTS.map((variant) => React.cloneElement(elm, { variant })))}
+    </Box>
+  );
+  const elements = (
+    <React.Fragment>
+      {renderComponents(<Alert>This is an alert.</Alert>)}
+      {renderComponents(
+        <AspectRatio sx={{ minWidth: 120 }}>
+          <div>Image</div>
+        </AspectRatio>,
+      )}
+      {renderComponents(<Avatar>MA</Avatar>)}
+      {renderComponents(
+        <Badge badgeContent={1000}>
+          <IconButton>😀</IconButton>
+        </Badge>,
+      )}
+      {renderComponents(<Button>Button</Button>)}
+      <Card sx={{ minWidth: 256 }}>
+        <AspectRatio>
+          <div>Image</div>
+        </AspectRatio>
+        <CardContent>Content</CardContent>
+        <Divider />
+        <CardOverflow variant="soft">
+          <Box sx={{ display: 'flex', py: 1.5, textAlign: 'right' }}>
+            <Button>Next</Button>
+          </Box>
+        </CardOverflow>
+      </Card>
+      {renderComponents(<Checkbox label="Label" />)}
+      {renderComponents(<Chip endDecorator={<ChipDelete />}>Chip</Chip>)}
+      {renderComponents(
+        <CircularProgress determinate value={25}>
+          25%
+        </CircularProgress>,
+      )}
+      {renderComponents(<Input placeholder="Placeholder" />)}
+      {renderComponents(
+        <LinearProgress determinate value={25} sx={{ width: '100%', flex: 'none' }} />,
+      )}
+      {renderComponents(<Link href="/">Link</Link>)}
+      <List variant="outlined">
+        <ListItem>Item 1</ListItem>
+        <ListDivider />
+        <ListItem>Item 2</ListItem>
+        <ListItem>Item 3</ListItem>
+      </List>
+      {renderComponents(<ListItem>Item</ListItem>)}
+      {renderComponents(<ListItemButton>Item</ListItemButton>)}
+      {renderComponents(<ListSubheader>Subheader</ListSubheader>)}
+      {renderComponents(
+        <Select placeholder="Choose one">
+          <Option value={0}>Option</Option>
+        </Select>,
+      )}
+      {renderComponents(<Radio label="Label" />)}
+      {renderComponents(<Slider defaultValue={50} />)}
+      {renderComponents(<Switch />)}
+      <Tabs defaultValue={0}>
+        <TabList variant="plain">
+          <Tab variant="soft">Tab 1</Tab>
+          <Tab>Tab 2</Tab>
+          <Tab>Tab 3</Tab>
+        </TabList>
+      </Tabs>
+      <Tabs defaultValue={0}>
+        <TabList variant="outlined">
+          <Tab variant="soft">Tab 1</Tab>
+          <Tab>Tab 2</Tab>
+          <Tab>Tab 3</Tab>
+        </TabList>
+      </Tabs>
+      <Tabs defaultValue={0}>
+        <TabList variant="soft">
+          <Tab variant="solid">Tab 1</Tab>
+          <Tab>Tab 2</Tab>
+          <Tab>Tab 3</Tab>
+        </TabList>
+      </Tabs>
+      {renderComponents(<Textarea placeholder="Placeholder" />)}
+      {renderComponents(<Typography>Text</Typography>)}
+    </React.Fragment>
+  );
+  return (
+    <CssVarsProvider>
+      <CssBaseline />
+      <Sheet
+        variant="soft"
+        color="primary"
+        invertedColors
+        sx={{
+          p: 2,
+          display: 'grid',
+          gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))',
+          gap: 2,
+        }}
+      >
+        {elements}
+      </Sheet>
+      <Sheet
+        variant="solid"
+        color="primary"
+        invertedColors
+        sx={{
+          p: 2,
+          display: 'grid',
+          gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))',
+          gap: 2,
+        }}
+      >
+        {elements}
+      </Sheet>
+    </CssVarsProvider>
+  );
+}

test/regressions/fixtures/JoyColorInversion/JoyColorInversionPortal.js

@@ -0,0 +1,125 @@
+import * as React from 'react';
+import { CssVarsProvider } from '@mui/joy/styles';
+import CssBaseline from '@mui/joy/CssBaseline';
+import Autocomplete from '@mui/joy/Autocomplete';
+import Button from '@mui/joy/Button';
+import Card from '@mui/joy/Card';
+import Menu from '@mui/joy/Menu';
+import MenuItem from '@mui/joy/MenuItem';
+import ListDivider from '@mui/joy/ListDivider';
+import Tooltip from '@mui/joy/Tooltip';
+import Stack from '@mui/joy/Stack';
+import Select from '@mui/joy/Select';
+import Option from '@mui/joy/Option';
+
+const films = [
+  { label: 'The Shawshank Redemption', year: 1994 },
+  { label: 'The Godfather', year: 1972 },
+  { label: 'The Godfather: Part II', year: 1974 },
+  { label: 'The Dark Knight', year: 2008 },
+  { label: '12 Angry Men', year: 1957 },
+  { label: "Schindler's List", year: 1993 },
+  { label: 'Pulp Fiction', year: 1994 },
+];
+
+export default function ColorInversionPopup() {
+  const [menuButton, setMenuButton] = React.useState(null);
+  const [menuButton2, setMenuButton2] = React.useState(null);
+  return (
+    <CssVarsProvider>
+      <CssBaseline />
+      <Stack spacing={2}>
+        <Card
+          orientation="horizontal"
+          variant="solid"
+          color="primary"
+          invertedColors
+          sx={{
+            gap: 10,
+            minHeight: 240,
+            alignItems: 'flex-start',
+            justifyContent: 'center',
+            flexGrow: 1,
+            zIndex: 0,
+          }}
+        >
+          <Autocomplete
+            placeholder="Combo box"
+            options={films}
+            sx={{ width: 240 }}
+            open
+            slotProps={{
+              listbox: { disablePortal: false, sx: { maxHeight: 160 } },
+            }}
+          />
+          <Button ref={(node) => setMenuButton(node)} variant="soft">
+            Actions
+          </Button>
+          <Menu disablePortal={false} anchorEl={menuButton} open={!!menuButton}>
+            <MenuItem>New tab</MenuItem>
+            <MenuItem>New window</MenuItem>
+            <ListDivider />
+            <MenuItem>Delete</MenuItem>
+          </Menu>
+          <Select
+            placeholder="Choose one"
+            listboxOpen
+            slotProps={{ listbox: { disablePortal: false } }}
+          >
+            <Option value="1">Option 1</Option>
+            <Option value="2">Option 2</Option>
+            <Option value="3">Option 3</Option>
+          </Select>
+          <Tooltip title="Bookmark" disablePortal={false} open variant="solid">
+            <span>test</span>
+          </Tooltip>
+        </Card>
+        <Card
+          orientation="horizontal"
+          variant="solid"
+          color="primary"
+          invertedColors
+          sx={{
+            gap: 10,
+            minHeight: 240,
+            alignItems: 'flex-start',
+            justifyContent: 'center',
+            flexGrow: 1,
+            zIndex: 0,
+          }}
+        >
+          <Autocomplete
+            placeholder="Combo box"
+            options={films}
+            sx={{ width: 240 }}
+            open
+            slotProps={{
+              listbox: { disablePortal: true, sx: { maxHeight: 160 } },
+            }}
+          />
+          <Button ref={(node) => setMenuButton2(node)} variant="soft">
+            Actions
+          </Button>
+          <Menu disablePortal anchorEl={menuButton2} open={!!menuButton2}>
+            <MenuItem>New tab</MenuItem>
+            <MenuItem>New window</MenuItem>
+            <ListDivider />
+            <MenuItem>Delete</MenuItem>
+          </Menu>
+          <Select
+            placeholder="Choose one"
+            listboxOpen
+            slotProps={{ listbox: { disablePortal: true } }}
+          >
+            <Option value="1">Option 1</Option>
+            <Option value="2">Option 2</Option>
+            <Option value="3">Option 3</Option>
+          </Select>
+          <Tooltip title="Bookmark" disablePortal open variant="solid">
+            <span>test</span>
+          </Tooltip>
+        </Card>
+      </Stack>
+    </CssVarsProvider>
+  );
+}

test/regressions/fixtures/JoyColorInversion/JoyColorInversionStyled.js

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import { CssVarsProvider, styled } from '@mui/joy/styles';
+import { applySolidInversion } from '@mui/joy/colorInversion';
+import CssBaseline from '@mui/joy/CssBaseline';
+import Box from '@mui/joy/Box';
+import Typography from '@mui/joy/Typography';
+import SvgIcon from '@mui/joy/SvgIcon';
+
+const Wrapper = styled('div')(
+  ({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '1.5rem',
+    padding: '1.5rem',
+    borderRadius: 20,
+    width: 300,
+    maxWidth: '100%',
+    ...theme.variants.solid.warning,
+  }),
+  applySolidInversion('warning'),
+);
+
+export default function JoyColorInversionStyled() {
+  return (
+    <CssVarsProvider>
+      <CssBaseline />
+      <Wrapper>
+        <Box sx={{ display: 'flex', gap: 1 }}>
+          <div>
+            <Typography level="title-lg">$4,236</Typography>
+            <Typography fontSize="xs" fontFamily="code">
+              CREDIT
+            </Typography>
+          </div>
+          <SvgIcon sx={{ ml: 'auto' }}>
+            <svg
+              width="50"
+              height="39"
+              viewBox="0 0 50 39"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path d="M16.4992 2H37.5808L22.0816 24.9729H1L16.4992 2Z" fill="currentColor" />
+              <path
+                d="M17.4224 27.102L11.4192 36H33.5008L49 13.0271H32.7024L23.2064 27.102H17.4224Z"
+                fill="#312ECB"
+              />
+            </svg>
+          </SvgIcon>
+        </Box>
+        <Typography level="title-lg" fontFamily="code">
+          •••• •••• •••• 1212
+        </Typography>
+        <Box sx={{ display: 'flex', gap: 2, justifyContent: 'space-between' }}>
+          <div>
+            <Typography fontSize="xs" fontFamily="code">
+              CARD NAME
+            </Typography>
+            <Typography level="title-sm" fontSize="sm">
+              JOHN DOE
+            </Typography>
+          </div>
+          <div>
+            <Typography fontSize="xs" textAlign="right" fontFamily="code">
+              EXPIRE
+            </Typography>
+            <Typography level="title-sm" fontSize="sm" textAlign="right">
+              07/25
+            </Typography>
+          </div>
+        </Box>
+      </Wrapper>
+    </CssVarsProvider>
+  );
+}