[joy] Refine the default theme (#36843)

mui · Jul 29, 2023 · bfd248c · bfd248c
1 parent a0d2b0d
commit bfd248c
Show file tree

Hide file tree

Showing 801 changed files with 8,490 additions and 6,223 deletions.
diff --git a/docs/data/joy/components/alert/AlertColors.js b/docs/data/joy/components/alert/AlertColors.js
@@ -29,9 +29,6 @@ export default function AlertColors() {
         <Alert variant={variant} color="danger">
           Danger
         </Alert>
-        <Alert variant={variant} color="info">
-          Info
-        </Alert>
         <Alert variant={variant} color="success">
           Success
         </Alert>
@@ -41,7 +38,7 @@ export default function AlertColors() {
       </Stack>
       <Sheet sx={{ pl: 4, ml: 3, borderLeft: '1px solid', borderColor: 'divider' }}>
         <Typography
-          level="body2"
+          level="body-sm"
           fontWeight="xl"
           id="variant-label"
           textColor="text.primary"

diff --git a/docs/data/joy/components/alert/AlertColors.tsx b/docs/data/joy/components/alert/AlertColors.tsx
@@ -29,9 +29,6 @@ export default function AlertColors() {
         <Alert variant={variant} color="danger">
           Danger
         </Alert>
-        <Alert variant={variant} color="info">
-          Info
-        </Alert>
         <Alert variant={variant} color="success">
           Success
         </Alert>
@@ -41,7 +38,7 @@ export default function AlertColors() {
       </Stack>
       <Sheet sx={{ pl: 4, ml: 3, borderLeft: '1px solid', borderColor: 'divider' }}>
         <Typography
-          level="body2"
+          level="body-sm"
           fontWeight="xl"
           id="variant-label"
           textColor="text.primary"

diff --git a/docs/data/joy/components/alert/AlertInvertedColors.js b/docs/data/joy/components/alert/AlertInvertedColors.js
@@ -48,14 +48,12 @@ export default function AlertInvertedColors() {
         }
         sx={{ alignItems: 'flex-start', overflow: 'hidden' }}
       >
-        <Box>
-          <Typography level="body1" fontWeight="lg">
-            Success
-          </Typography>
-          <Typography level="body3">
+        <div>
+          <Typography level="title-lg">Success</Typography>
+          <Typography level="body-sm">
             Success is walking from failure to failure with no loss of enthusiam.
           </Typography>
-        </Box>
+        </div>
         <LinearProgress
           variant="soft"
           value={40}
@@ -69,7 +67,6 @@ export default function AlertInvertedColors() {
           })}
         />
       </Alert>
-
       <Alert
         variant="soft"
         color="danger"
@@ -79,18 +76,19 @@ export default function AlertInvertedColors() {
             <Warning />
           </CircularProgress>
         }
-        sx={{ alignItems: 'flex-start', '--Alert-gap': '1rem' }}
+        sx={{ alignItems: 'flex-start', gap: '1rem' }}
       >
         <Box sx={{ flex: 1 }}>
-          <Typography sx={{ mt: 1 }}>
-            Network loss, please recheck your connection.
+          <Typography level="title-md">Lost connection</Typography>
+          <Typography level="body-md">
+            Please verify your network connection and try again.
           </Typography>
           <Box sx={{ mt: 2, display: 'flex', justifyContent: 'flex-end', gap: 1 }}>
             <Button variant="outlined" size="sm">
-              Open network setting
+              Open network settings
             </Button>
-            <Button variant="soft" size="sm">
-              Okay
+            <Button variant="solid" size="sm">
+              Try again
             </Button>
           </Box>
         </Box>

diff --git a/docs/data/joy/components/alert/AlertInvertedColors.tsx b/docs/data/joy/components/alert/AlertInvertedColors.tsx
@@ -48,14 +48,12 @@ export default function AlertInvertedColors() {
         }
         sx={{ alignItems: 'flex-start', overflow: 'hidden' }}
       >
-        <Box>
-          <Typography level="body1" fontWeight="lg">
-            Success
-          </Typography>
-          <Typography level="body3">
+        <div>
+          <Typography level="title-lg">Success</Typography>
+          <Typography level="body-sm">
             Success is walking from failure to failure with no loss of enthusiam.
           </Typography>
-        </Box>
+        </div>
         <LinearProgress
           variant="soft"
           value={40}
@@ -69,7 +67,6 @@ export default function AlertInvertedColors() {
           })}
         />
       </Alert>
-
       <Alert
         variant="soft"
         color="danger"
@@ -79,18 +76,19 @@ export default function AlertInvertedColors() {
             <Warning />
           </CircularProgress>
         }
-        sx={{ alignItems: 'flex-start', '--Alert-gap': '1rem' }}
+        sx={{ alignItems: 'flex-start', gap: '1rem' }}
       >
         <Box sx={{ flex: 1 }}>
-          <Typography sx={{ mt: 1 }}>
-            Network loss, please recheck your connection.
+          <Typography level="title-md">Lost connection</Typography>
+          <Typography level="body-md">
+            Please verify your network connection and try again.
           </Typography>
           <Box sx={{ mt: 2, display: 'flex', justifyContent: 'flex-end', gap: 1 }}>
             <Button variant="outlined" size="sm">
-              Open network setting
+              Open network settings
             </Button>
-            <Button variant="soft" size="sm">
-              Okay
+            <Button variant="solid" size="sm">
+              Try again
             </Button>
           </Box>
         </Box>

diff --git a/docs/data/joy/components/alert/AlertUsage.js b/docs/data/joy/components/alert/AlertUsage.js
@@ -10,13 +10,13 @@ export default function AlertUsage() {
         {
           propName: 'variant',
           knob: 'radio',
-          defaultValue: 'soft',
+          defaultValue: 'outlined',
           options: ['plain', 'outlined', 'soft', 'solid'],
         },
         {
           propName: 'color',
           knob: 'color',
-          defaultValue: 'primary',
+          defaultValue: 'neutral',
         },
         {
           propName: 'size',

diff --git a/docs/data/joy/components/alert/AlertVariousStates.js b/docs/data/joy/components/alert/AlertVariousStates.js
@@ -14,7 +14,7 @@ export default function AlertVariousStates() {
     { title: 'Success', color: 'success', icon: <CheckCircleIcon /> },
     { title: 'Warning', color: 'warning', icon: <WarningIcon /> },
     { title: 'Error', color: 'danger', icon: <ReportIcon /> },
-    { title: 'Info', color: 'info', icon: <InfoIcon /> },
+    { title: 'Neutral', color: 'neutral', icon: <InfoIcon /> },
   ];
 
   return (
@@ -23,23 +23,18 @@ export default function AlertVariousStates() {
         <Alert
           key={title}
           sx={{ alignItems: 'flex-start' }}
-          startDecorator={React.cloneElement(icon, {
-            sx: { mt: '2px', mx: '4px' },
-            fontSize: 'xl2',
-          })}
+          startDecorator={icon}
           variant="soft"
           color={color}
           endDecorator={
-            <IconButton variant="soft" size="sm" color={color}>
+            <IconButton variant="soft" color={color}>
               <CloseRoundedIcon />
             </IconButton>
           }
         >
           <div>
-            <Typography fontWeight="lg" mt={0.25}>
-              {title}
-            </Typography>
-            <Typography fontSize="sm" sx={{ opacity: 0.8 }}>
+            <div>{title}</div>
+            <Typography level="body-sm" color={color}>
               This is a time-sensitive {title} Alert.
             </Typography>
           </div>

diff --git a/docs/data/joy/components/alert/AlertVariousStates.tsx b/docs/data/joy/components/alert/AlertVariousStates.tsx
@@ -19,31 +19,26 @@ export default function AlertVariousStates() {
     { title: 'Success', color: 'success', icon: <CheckCircleIcon /> },
     { title: 'Warning', color: 'warning', icon: <WarningIcon /> },
     { title: 'Error', color: 'danger', icon: <ReportIcon /> },
-    { title: 'Info', color: 'info', icon: <InfoIcon /> },
+    { title: 'Neutral', color: 'neutral', icon: <InfoIcon /> },
   ];
   return (
     <Box sx={{ display: 'flex', gap: 2, width: '100%', flexDirection: 'column' }}>
       {items.map(({ title, color, icon }) => (
         <Alert
           key={title}
           sx={{ alignItems: 'flex-start' }}
-          startDecorator={React.cloneElement(icon, {
-            sx: { mt: '2px', mx: '4px' },
-            fontSize: 'xl2',
-          })}
+          startDecorator={icon}
           variant="soft"
           color={color}
           endDecorator={
-            <IconButton variant="soft" size="sm" color={color}>
+            <IconButton variant="soft" color={color}>
               <CloseRoundedIcon />
             </IconButton>
           }
         >
           <div>
-            <Typography fontWeight="lg" mt={0.25}>
-              {title}
-            </Typography>
-            <Typography fontSize="sm" sx={{ opacity: 0.8 }}>
+            <div>{title}</div>
+            <Typography level="body-sm" color={color}>
               This is a time-sensitive {title} Alert.
             </Typography>
           </div>

diff --git a/docs/data/joy/components/alert/AlertWithDangerState.js b/docs/data/joy/components/alert/AlertWithDangerState.js
@@ -4,14 +4,13 @@ import * as React from 'react';
 import Box from '@mui/joy/Box';
 import Alert from '@mui/joy/Alert';
 import IconButton from '@mui/joy/IconButton';
-import Typography from '@mui/joy/Typography';
 import Button from '@mui/joy/Button';
 
 export default function AlertWithDangerState() {
   return (
     <Box sx={{ display: 'flex', gap: 2, width: '100%', flexDirection: 'column' }}>
       <Alert
-        startDecorator={<WarningIcon sx={{ mx: 0.5 }} />}
+        startDecorator={<WarningIcon />}
         variant="soft"
         color="danger"
         endDecorator={
@@ -25,12 +24,10 @@ export default function AlertWithDangerState() {
           </React.Fragment>
         }
       >
-        <Typography color="danger" fontWeight="md">
-          This file was successfully deleted
-        </Typography>
+        This file was successfully deleted
       </Alert>
       <Alert
-        startDecorator={<WarningIcon sx={{ mx: 0.5 }} />}
+        startDecorator={<WarningIcon />}
         variant="solid"
         color="danger"
         endDecorator={
@@ -44,13 +41,11 @@ export default function AlertWithDangerState() {
           </React.Fragment>
         }
       >
-        <Typography sx={{ color: 'white' }} fontWeight="md">
-          This file was successfully deleted
-        </Typography>
+        This file was successfully deleted
       </Alert>
 
       <Alert
-        startDecorator={<WarningIcon sx={{ mx: 0.5 }} />}
+        startDecorator={<WarningIcon />}
         variant="outlined"
         color="danger"
         endDecorator={
@@ -64,9 +59,7 @@ export default function AlertWithDangerState() {
           </React.Fragment>
         }
       >
-        <Typography color="danger" fontWeight="md">
-          This file was successfully deleted
-        </Typography>
+        This file was successfully deleted
       </Alert>
     </Box>
   );

diff --git a/docs/data/joy/components/alert/AlertWithDangerState.tsx b/docs/data/joy/components/alert/AlertWithDangerState.tsx
@@ -4,14 +4,13 @@ import * as React from 'react';
 import Box from '@mui/joy/Box';
 import Alert from '@mui/joy/Alert';
 import IconButton from '@mui/joy/IconButton';
-import Typography from '@mui/joy/Typography';
 import Button from '@mui/joy/Button';
 
 export default function AlertWithDangerState() {
   return (
     <Box sx={{ display: 'flex', gap: 2, width: '100%', flexDirection: 'column' }}>
       <Alert
-        startDecorator={<WarningIcon sx={{ mx: 0.5 }} />}
+        startDecorator={<WarningIcon />}
         variant="soft"
         color="danger"
         endDecorator={
@@ -25,12 +24,10 @@ export default function AlertWithDangerState() {
           </React.Fragment>
         }
       >
-        <Typography color="danger" fontWeight="md">
-          This file was successfully deleted
-        </Typography>
+        This file was successfully deleted
       </Alert>
       <Alert
-        startDecorator={<WarningIcon sx={{ mx: 0.5 }} />}
+        startDecorator={<WarningIcon />}
         variant="solid"
         color="danger"
         endDecorator={
@@ -44,13 +41,11 @@ export default function AlertWithDangerState() {
           </React.Fragment>
         }
       >
-        <Typography sx={{ color: 'white' }} fontWeight="md">
-          This file was successfully deleted
-        </Typography>
+        This file was successfully deleted
       </Alert>
 
       <Alert
-        startDecorator={<WarningIcon sx={{ mx: 0.5 }} />}
+        startDecorator={<WarningIcon />}
         variant="outlined"
         color="danger"
         endDecorator={
@@ -64,9 +59,7 @@ export default function AlertWithDangerState() {
           </React.Fragment>
         }
       >
-        <Typography color="danger" fontWeight="md">
-          This file was successfully deleted
-        </Typography>
+        This file was successfully deleted
       </Alert>
     </Box>
   );

diff --git a/docs/data/joy/components/alert/AlertWithDecorators.js b/docs/data/joy/components/alert/AlertWithDecorators.js
@@ -15,16 +15,7 @@ export default function AlertWithDecorators() {
         color="success"
         startDecorator={<PlaylistAddCheckCircleRoundedIcon />}
         endDecorator={
-          <Button
-            size="sm"
-            variant="outlined"
-            color="success"
-            sx={{
-              textTransform: 'uppercase',
-              fontSize: 'xs',
-              fontWeight: 'xl',
-            }}
-          >
+          <Button size="sm" variant="solid" color="success">
             Close
           </Button>
         }

diff --git a/docs/data/joy/components/alert/AlertWithDecorators.tsx b/docs/data/joy/components/alert/AlertWithDecorators.tsx
@@ -15,16 +15,7 @@ export default function AlertWithDecorators() {
         color="success"
         startDecorator={<PlaylistAddCheckCircleRoundedIcon />}
         endDecorator={
-          <Button
-            size="sm"
-            variant="outlined"
-            color="success"
-            sx={{
-              textTransform: 'uppercase',
-              fontSize: 'xs',
-              fontWeight: 'xl',
-            }}
-          >
+          <Button size="sm" variant="solid" color="success">
             Close
           </Button>
         }