[joy] Refine the default theme

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"

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"

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>

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>

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',

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>

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>

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>
  );

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>
  );

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>
  }

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>
  }