[joy-ui] Introduce color inversion utilities

docs/data/joy/getting-started/templates/framesx-web-blocks/theme.tsx

@@ -55,14 +55,13 @@ export default extendTheme({
     JoyInput: {
       styleOverrides: {
         root: ({ ownerState, theme }) => ({
-          ...(ownerState.variant === 'outlined' &&
-            ownerState.color !== 'context' && {
-              [`&:not(.${inputClasses.focused}):hover::before`]: {
-                boxShadow: `inset 0 0 0 2px ${
-                  theme.vars.palette?.[ownerState.color!]?.outlinedBorder
-                }`,
-              },
-            }),
+          ...(ownerState.variant === 'outlined' && {
+            [`&:not(.${inputClasses.focused}):hover::before`]: {
+              boxShadow: `inset 0 0 0 2px ${
+                theme.vars.palette?.[ownerState.color!]?.outlinedBorder
+              }`,
+            },
+          }),
         }),
         input: {
           caretColor: 'var(--Input-focusedHighlight)',

docs/data/joy/main-features/color-inversion/ColorInversionAnyParent.js

@@ -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>
+  );
+}

docs/data/joy/main-features/color-inversion/ColorInversionAnyParent.tsx

@@ -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>
+  );
+}

docs/data/joy/main-features/color-inversion/ColorInversionNavigation.js

@@ -86,7 +86,13 @@ export default function ColorInversionNavigation() {
               <SmsIcon />
             </ListItemDecorator>
             Chat
-            <Chip size="sm" color="warning" variant="soft" sx={{ ml: 'auto' }}>
+            <Chip
+              data-skip-inverted-colors
+              size="sm"
+              color="warning"
+              variant="soft"
+              sx={{ ml: 'auto' }}
+            >
               5
             </Chip>
           </ListItemButton>

docs/data/joy/main-features/color-inversion/ColorInversionNavigation.tsx

@@ -86,7 +86,13 @@ export default function ColorInversionNavigation() {
               <SmsIcon />
             </ListItemDecorator>
             Chat
-            <Chip size="sm" color="warning" variant="soft" sx={{ ml: 'auto' }}>
+            <Chip
+              data-skip-inverted-colors
+              size="sm"
+              color="warning"
+              variant="soft"
+              sx={{ ml: 'auto' }}
+            >
               5
             </Chip>
           </ListItemButton>

docs/data/joy/main-features/color-inversion/ColorInversionOverview.js

@@ -29,9 +29,7 @@ export default function ColorInversionOverview() {
       >
         <BookmarkOutlinedIcon />
       </IconButton>
-      <Typography fontSize="xl2" fontWeight="lg">
-        Learn how to build super fast websites.
-      </Typography>
+      <Typography level="h3">Learn how to build super fast websites.</Typography>
       <Button variant="solid" endDecorator={<KeyboardArrowRightIcon />}>
         Read more
       </Button>

docs/data/joy/main-features/color-inversion/ColorInversionOverview.tsx

@@ -29,9 +29,7 @@ export default function ColorInversionOverview() {
       >
         <BookmarkOutlinedIcon />
       </IconButton>
-      <Typography fontSize="xl2" fontWeight="lg">
-        Learn how to build super fast websites.
-      </Typography>
+      <Typography level="h3">Learn how to build super fast websites.</Typography>
       <Button variant="solid" endDecorator={<KeyboardArrowRightIcon />}>
         Read more
       </Button>

docs/data/joy/main-features/color-inversion/ColorInversionSkip.js

@@ -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>
+  );
+}

docs/data/joy/main-features/color-inversion/ColorInversionSkip.tsx

@@ -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>
+  );
+}