@applica-software-guru/react-admin 1.0.32 → 1.0.34

package/src/themes/overrides/Alert.jsx

@@ -0,0 +1,72 @@
+import { alpha } from '@mui/material/styles'
+import getColors from '../getColors'
+
+// ==============================|| ALERT - COLORS ||============================== //
+
+function getColorStyle({ color, theme }) {
+  const colors = getColors(theme, color)
+  const { lighter, light, main } = colors
+
+  return {
+    borderColor: alpha(light, 0.5),
+    backgroundColor: lighter,
+    '& .MuiAlert-icon': {
+      color: main,
+    },
+  }
+}
+
+// ==============================|| OVERRIDES - ALERT ||============================== //
+
+export default function Alert(theme) {
+  const primaryDashed = getColorStyle({ color: 'primary', theme })
+
+  return {
+    MuiAlert: {
+      styleOverrides: {
+        root: {
+          color: theme.palette.text.primary,
+          fontSize: '0.875rem',
+        },
+        icon: {
+          fontSize: '1rem',
+        },
+        message: {
+          padding: 0,
+          marginTop: 3,
+        },
+        filled: {
+          color: theme.palette.grey[0],
+        },
+        border: {
+          padding: '10px 16px',
+          border: '1px solid',
+          ...primaryDashed,
+          '&.MuiAlert-borderPrimary': getColorStyle({ color: 'primary', theme }),
+          '&.MuiAlert-borderSecondary': getColorStyle({ color: 'secondary', theme }),
+          '&.MuiAlert-borderError': getColorStyle({ color: 'error', theme }),
+          '&.MuiAlert-borderSuccess': getColorStyle({ color: 'success', theme }),
+          '&.MuiAlert-borderInfo': getColorStyle({ color: 'info', theme }),
+          '&.MuiAlert-borderWarning': getColorStyle({ color: 'warning', theme }),
+        },
+        action: {
+          '& .MuiButton-root': {
+            padding: 2,
+            height: 'auto',
+            fontSize: '0.75rem',
+            marginTop: -2,
+          },
+          '& .MuiIconButton-root': {
+            width: 'auto',
+            height: 'auto',
+            padding: 2,
+            marginRight: 6,
+            '& .MuiSvgIcon-root': {
+              fontSize: '1rem',
+            },
+          },
+        },
+      },
+    },
+  }
+}

package/src/themes/overrides/AlertTitle.jsx

@@ -0,0 +1,15 @@
+// ==============================|| OVERRIDES - ALERT TITLE ||============================== //
+
+export default function AlertTitle() {
+  return {
+    MuiAlertTitle: {
+      styleOverrides: {
+        root: {
+          marginBottom: 4,
+          marginTop: 0,
+          fontWeight: 400,
+        },
+      },
+    },
+  }
+}

package/src/themes/overrides/Autocomplete.jsx

@@ -0,0 +1,23 @@
+// ==============================|| OVERRIDES - AUTOCOMPLETE ||============================== //
+
+export default function Autocomplete() {
+  return {
+    MuiAutocomplete: {
+      styleOverrides: {
+        root: {
+          '& .MuiOutlinedInput-root': {
+            padding: '3px 9px',
+          },
+        },
+        popupIndicator: {
+          width: 'auto',
+          height: 'auto',
+        },
+        clearIndicator: {
+          width: 'auto',
+          height: 'auto',
+        },
+      },
+    },
+  }
+}

package/src/themes/overrides/Badge.jsx

@@ -0,0 +1,36 @@
+import getColors from '../getColors'
+
+function getColorStyle({ color, theme }) {
+  const colors = getColors(theme, color)
+  const { lighter, main } = colors
+
+  return {
+    color: main,
+    backgroundColor: lighter,
+  }
+}
+
+export default function Badge(theme) {
+  const defaultLightBadge = getColorStyle({ color: 'primary', theme })
+
+  return {
+    MuiBadge: {
+      styleOverrides: {
+        standard: {
+          minWidth: theme.spacing(2),
+          height: theme.spacing(2),
+          padding: theme.spacing(0.5),
+        },
+        light: {
+          ...defaultLightBadge,
+          '&.MuiBadge-colorPrimary': getColorStyle({ color: 'primary', theme }),
+          '&.MuiBadge-colorSecondary': getColorStyle({ color: 'secondary', theme }),
+          '&.MuiBadge-colorError': getColorStyle({ color: 'error', theme }),
+          '&.MuiBadge-colorInfo': getColorStyle({ color: 'info', theme }),
+          '&.MuiBadge-colorSuccess': getColorStyle({ color: 'success', theme }),
+          '&.MuiBadge-colorWarning': getColorStyle({ color: 'warning', theme }),
+        },
+      },
+    },
+  }
+}

package/src/themes/overrides/Button.jsx

@@ -0,0 +1,229 @@
+import { alpha } from '@mui/material/styles'
+import getColors from '../getColors'
+import getShadow from '../getShadow'
+
+function getColorStyle({ variant, color, theme }) {
+  const colors = getColors(theme, color)
+  const { lighter, main, dark, contrastText } = colors
+
+  const buttonShadow = `${color}Button`
+  const shadows = getShadow(theme, buttonShadow)
+
+  const commonShadow = {
+    '&::after': {
+      boxShadow: `0 0 5px 5px ${alpha(main, 0.9)}`,
+    },
+    '&:active::after': {
+      boxShadow: `0 0 0 0 ${alpha(main, 0.9)}`,
+    },
+    '&:focus-visible': {
+      outline: `2px solid ${dark}`,
+      outlineOffset: 2,
+    },
+  }
+
+  switch (variant) {
+    case 'contained':
+      return {
+        '&:hover': {
+          backgroundColor: dark,
+        },
+        ...commonShadow,
+      }
+    case 'shadow':
+      return {
+        color: contrastText,
+        backgroundColor: main,
+        boxShadow: shadows,
+        '&:hover': {
+          boxShadow: 'none',
+          backgroundColor: dark,
+        },
+        ...commonShadow,
+      }
+    case 'outlined':
+      return {
+        borderColor: main,
+        '&:hover': {
+          color: dark,
+          backgroundColor: 'transparent',
+          borderColor: dark,
+        },
+        ...commonShadow,
+      }
+    case 'dashed':
+      return {
+        color: main,
+        borderColor: main,
+        backgroundColor: lighter,
+        '&:hover': {
+          color: dark,
+          borderColor: dark,
+        },
+        ...commonShadow,
+      }
+    case 'text':
+    default:
+      return {
+        '&:hover': {
+          color: dark,
+          backgroundColor: lighter,
+        },
+        ...commonShadow,
+      }
+  }
+}
+
+// ==============================|| OVERRIDES - BUTTON ||============================== //
+
+export default function Button(theme) {
+  const primaryDashed = getColorStyle({ variant: 'dashed', color: 'primary', theme })
+  const primaryShadow = getColorStyle({ variant: 'shadow', color: 'primary', theme })
+
+  const disabledStyle = {
+    '&.Mui-disabled': {
+      backgroundColor: theme.palette.grey[200],
+    },
+  }
+  const iconStyle = {
+    '&>*:nth-of-type(1)': {
+      fontSize: 'inherit',
+    },
+  }
+
+  return {
+    MuiButton: {
+      defaultProps: {
+        disableElevation: true,
+      },
+      styleOverrides: {
+        root: {
+          fontWeight: 400,
+          '&::after': {
+            content: '""',
+            display: 'block',
+            position: 'absolute',
+            left: 0,
+            top: 0,
+            width: '100%',
+            height: '100%',
+            borderRadius: 4,
+            opacity: 0,
+            transition: 'all 0.5s',
+          },
+
+          '&:active::after': {
+            position: 'absolute',
+            borderRadius: 4,
+            left: 0,
+            top: 0,
+            opacity: 1,
+            transition: '0s',
+          },
+        },
+        contained: {
+          ...disabledStyle,
+        },
+        outlined: {
+          ...disabledStyle,
+        },
+        text: {
+          boxShadow: 'none',
+          '&:hover': {
+            boxShadow: 'none',
+          },
+        },
+        endIcon: {
+          ...iconStyle,
+        },
+        startIcon: {
+          ...iconStyle,
+        },
+        dashed: {
+          border: '1px dashed',
+          ...primaryDashed,
+          '&.MuiButton-dashedPrimary': getColorStyle({
+            variant: 'dashed',
+            color: 'primary',
+            theme,
+          }),
+          '&.MuiButton-dashedSecondary': getColorStyle({
+            variant: 'dashed',
+            color: 'secondary',
+            theme,
+          }),
+          '&.MuiButton-dashedError': getColorStyle({ variant: 'dashed', color: 'error', theme }),
+          '&.MuiButton-dashedSuccess': getColorStyle({
+            variant: 'dashed',
+            color: 'success',
+            theme,
+          }),
+          '&.MuiButton-dashedInfo': getColorStyle({ variant: 'dashed', color: 'info', theme }),
+          '&.MuiButton-dashedWarning': getColorStyle({
+            variant: 'dashed',
+            color: 'warning',
+            theme,
+          }),
+          '&.Mui-disabled': {
+            color: `${theme.palette.grey[300]} !important`,
+            borderColor: `${theme.palette.grey[400]} !important`,
+            backgroundColor: `${theme.palette.grey[200]} !important`,
+          },
+        },
+        shadow: {
+          ...primaryShadow,
+          '&.MuiButton-shadowPrimary': getColorStyle({
+            variant: 'shadow',
+            color: 'primary',
+            theme,
+          }),
+          '&.MuiButton-shadowSecondary': getColorStyle({
+            variant: 'shadow',
+            color: 'secondary',
+            theme,
+          }),
+          '&.MuiButton-shadowError': getColorStyle({ variant: 'shadow', color: 'error', theme }),
+          '&.MuiButton-shadowSuccess': getColorStyle({
+            variant: 'shadow',
+            color: 'success',
+            theme,
+          }),
+          '&.MuiButton-shadowInfo': getColorStyle({ variant: 'shadow', color: 'info', theme }),
+          '&.MuiButton-shadowWarning': getColorStyle({
+            variant: 'shadow',
+            color: 'warning',
+            theme,
+          }),
+          '&.Mui-disabled': {
+            color: `${theme.palette.grey[300]} !important`,
+            borderColor: `${theme.palette.grey[400]} !important`,
+            backgroundColor: `${theme.palette.grey[200]} !important`,
+          },
+        },
+        containedPrimary: getColorStyle({ variant: 'contained', color: 'primary', theme }),
+        containedSecondary: getColorStyle({ variant: 'contained', color: 'secondary', theme }),
+        containedError: getColorStyle({ variant: 'contained', color: 'error', theme }),
+        containedSuccess: getColorStyle({ variant: 'contained', color: 'success', theme }),
+        containedInfo: getColorStyle({ variant: 'contained', color: 'info', theme }),
+        containedWarning: getColorStyle({ variant: 'contained', color: 'warning', theme }),
+        outlinedPrimary: getColorStyle({ variant: 'outlined', color: 'primary', theme }),
+        outlinedSecondary: getColorStyle({ variant: 'outlined', color: 'secondary', theme }),
+        outlinedError: getColorStyle({ variant: 'outlined', color: 'error', theme }),
+        outlinedSuccess: getColorStyle({ variant: 'outlined', color: 'success', theme }),
+        outlinedInfo: getColorStyle({ variant: 'outlined', color: 'info', theme }),
+        outlinedWarning: getColorStyle({ variant: 'outlined', color: 'warning', theme }),
+        textPrimary: getColorStyle({ variant: 'text', color: 'primary', theme }),
+        textSecondary: getColorStyle({ variant: 'text', color: 'secondary', theme }),
+        textError: getColorStyle({ variant: 'text', color: 'error', theme }),
+        textSuccess: getColorStyle({ variant: 'text', color: 'success', theme }),
+        textInfo: getColorStyle({ variant: 'text', color: 'info', theme }),
+        textWarning: getColorStyle({ variant: 'text', color: 'warning', theme }),
+        sizeExtraSmall: {
+          minWidth: 56,
+          fontSize: '0.625rem',
+          padding: '2px 8px',
+        },
+      },
+    },
+  }
+}

package/src/themes/overrides/ButtonBase.jsx

@@ -0,0 +1,12 @@
+// ==============================|| OVERRIDES - BUTTON ||============================== //
+
+export default function ButtonBase() {
+  return {
+    MuiButtonBase: {
+      defaultProps: {
+        disableRipple: true,
+        size: 'medium',
+      },
+    },
+  }
+}

package/src/themes/overrides/ButtonGroup.jsx

@@ -0,0 +1,11 @@
+// ==============================|| OVERRIDES - BUTTON GROUP ||============================== //
+
+export default function ButtonGroup() {
+  return {
+    MuiButtonGroup: {
+      defaultProps: {
+        disableRipple: true,
+      },
+    },
+  }
+}

package/src/themes/overrides/CardContent.jsx

@@ -0,0 +1,16 @@
+// ==============================|| OVERRIDES - CARD CONTENT ||============================== //
+
+export default function CardContent() {
+  return {
+    MuiCardContent: {
+      styleOverrides: {
+        root: {
+          padding: 20,
+          '&:last-child': {
+            paddingBottom: 20,
+          },
+        },
+      },
+    },
+  }
+}

package/src/themes/overrides/Checkbox.jsx

@@ -0,0 +1,125 @@
+import { CheckSquareFilled, MinusSquareFilled } from '@ant-design/icons'
+
+import { Box } from '@mui/material'
+import getColors from '../getColors'
+
+function getColorStyle({ color, theme }) {
+  const colors = getColors(theme, color)
+  const { lighter, main, dark } = colors
+
+  return {
+    '&:hover': {
+      backgroundColor: lighter,
+      '& .icon': {
+        borderColor: main,
+      },
+    },
+    '&.Mui-focusVisible': {
+      outline: `2px solid ${dark}`,
+      outlineOffset: -4,
+    },
+  }
+}
+
+function getSizeStyle(size) {
+  switch (size) {
+    case 'small':
+      return { size: 16, fontSize: 1, position: 1 }
+    case 'large':
+      return { size: 24, fontSize: 1.6, position: 2 }
+    case 'medium':
+    default:
+      return { size: 20, fontSize: 1.35, position: 2 }
+  }
+}
+
+function checkboxStyle(size) {
+  const sizes = getSizeStyle(size)
+
+  return {
+    '& .icon': {
+      width: sizes.size,
+      height: sizes.size,
+      '& .filled': {
+        fontSize: `${sizes.fontSize}rem`,
+        top: -sizes.position,
+        left: -sizes.position,
+      },
+    },
+  }
+}
+
+export default function Checkbox(theme) {
+  const { palette } = theme
+
+  return {
+    MuiCheckbox: {
+      defaultProps: {
+        className: 'size-small',
+        icon: (
+          <Box
+            className="icon"
+            sx={{
+              width: 16,
+              height: 16,
+              border: '1px solid',
+              borderColor: 'inherit',
+              borderRadius: 0.25,
+            }}
+          />
+        ),
+        checkedIcon: (
+          <Box
+            className="icon"
+            sx={{
+              width: 16,
+              height: 16,
+              border: '1px solid',
+              borderColor: 'inherit',
+              borderRadius: 0.25,
+              position: 'relative',
+            }}
+          >
+            <CheckSquareFilled className="filled" style={{ position: 'absolute' }} />
+          </Box>
+        ),
+        indeterminateIcon: (
+          <Box
+            className="icon"
+            sx={{
+              width: 16,
+              height: 16,
+              border: '1px solid',
+              borderColor: 'inherit',
+              borderRadius: 0.25,
+              position: 'relative',
+            }}
+          >
+            <MinusSquareFilled className="filled" style={{ position: 'absolute' }} />
+          </Box>
+        ),
+      },
+      styleOverrides: {
+        root: {
+          borderRadius: 0,
+          color: palette.secondary[300],
+          '&.size-small': {
+            ...checkboxStyle('small'),
+          },
+          '&.size-medium': {
+            ...checkboxStyle('medium'),
+          },
+          '&.size-large': {
+            ...checkboxStyle('large'),
+          },
+        },
+        colorPrimary: getColorStyle({ color: 'primary', theme }),
+        colorSecondary: getColorStyle({ color: 'secondary', theme }),
+        colorSuccess: getColorStyle({ color: 'success', theme }),
+        colorWarning: getColorStyle({ color: 'warning', theme }),
+        colorInfo: getColorStyle({ color: 'info', theme }),
+        colorError: getColorStyle({ color: 'error', theme }),
+      },
+    },
+  }
+}

package/src/themes/overrides/Chip.jsx

@@ -0,0 +1,75 @@
+import getColors from '../getColors'
+
+function getColor({ color, theme }) {
+  const colors = getColors(theme, color)
+  const { dark } = colors
+
+  return {
+    '&.Mui-focusVisible': {
+      outline: `2px solid ${dark}`,
+      outlineOffset: 2,
+    },
+  }
+}
+
+function getColorStyle({ color, theme }) {
+  const colors = getColors(theme, color)
+  const { light, lighter, main } = colors
+
+  return {
+    color: main,
+    backgroundColor: lighter,
+    borderColor: light,
+    '& .MuiChip-deleteIcon': {
+      color: main,
+      '&:hover': {
+        color: light,
+      },
+    },
+  }
+}
+
+export default function Chip(theme) {
+  const defaultLightChip = getColorStyle({ color: 'secondary', theme })
+  return {
+    MuiChip: {
+      styleOverrides: {
+        root: {
+          borderRadius: 4,
+          '&:active': {
+            boxShadow: 'none',
+          },
+          '&.MuiChip-colorPrimary': getColor({ color: 'primary', theme }),
+          '&.MuiChip-colorSecondary': getColor({ color: 'secondary', theme }),
+          '&.MuiChip-colorError': getColor({ color: 'error', theme }),
+          '&.MuiChip-colorInfo': getColor({ color: 'info', theme }),
+          '&.MuiChip-colorSuccess': getColor({ color: 'success', theme }),
+          '&.MuiChip-colorWarning': getColor({ color: 'warning', theme }),
+        },
+        sizeLarge: {
+          fontSize: '1rem',
+          height: 40,
+        },
+        light: {
+          ...defaultLightChip,
+          '&.MuiChip-lightPrimary': getColorStyle({ color: 'primary', theme }),
+          '&.MuiChip-lightSecondary': getColorStyle({ color: 'secondary', theme }),
+          '&.MuiChip-lightError': getColorStyle({ color: 'error', theme }),
+          '&.MuiChip-lightInfo': getColorStyle({ color: 'info', theme }),
+          '&.MuiChip-lightSuccess': getColorStyle({ color: 'success', theme }),
+          '&.MuiChip-lightWarning': getColorStyle({ color: 'warning', theme }),
+        },
+        combined: {
+          border: '1px solid',
+          ...defaultLightChip,
+          '&.MuiChip-combinedPrimary': getColorStyle({ color: 'primary', theme }),
+          '&.MuiChip-combinedSecondary': getColorStyle({ color: 'secondary', theme }),
+          '&.MuiChip-combinedError': getColorStyle({ color: 'error', theme }),
+          '&.MuiChip-combinedInfo': getColorStyle({ color: 'info', theme }),
+          '&.MuiChip-combinedSuccess': getColorStyle({ color: 'success', theme }),
+          '&.MuiChip-combinedWarning': getColorStyle({ color: 'warning', theme }),
+        },
+      },
+    },
+  }
+}

package/src/themes/overrides/Dialog.jsx

@@ -0,0 +1,18 @@
+// material-ui
+import { alpha } from '@mui/material/styles'
+
+// ==============================|| OVERRIDES - DIALOG ||============================== //
+
+export default function Dialog() {
+  return {
+    MuiDialog: {
+      styleOverrides: {
+        root: {
+          '& .MuiBackdrop-root': {
+            backgroundColor: alpha('#000', 0.7),
+          },
+        },
+      },
+    },
+  }
+}

package/src/themes/overrides/DialogContentText.jsx

@@ -0,0 +1,14 @@
+// ==============================|| OVERRIDES - DIALOG CONTENT TEXT ||============================== //
+
+export default function DialogContentText(theme) {
+  return {
+    MuiDialogContentText: {
+      styleOverrides: {
+        root: {
+          fontSize: '0.875rem',
+          color: theme.palette.text.primary,
+        },
+      },
+    },
+  }
+}

package/src/themes/overrides/DialogTitle.jsx

@@ -0,0 +1,14 @@
+// ==============================|| OVERRIDES - DIALOG TITLE ||============================== //
+
+export default function DialogTitle() {
+  return {
+    MuiDialogTitle: {
+      styleOverrides: {
+        root: {
+          fontSize: '1rem',
+          fontWeight: 500,
+        },
+      },
+    },
+  }
+}