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

package/src/themes/overrides/Slider.jsx

@@ -0,0 +1,66 @@
+import getColors from '../getColors'
+
+function getColorStyle({ color, theme }) {
+  const colors = getColors(theme, color)
+  const { main } = colors
+
+  return {
+    border: `2px solid ${main}`,
+  }
+}
+
+export default function Slider(theme) {
+  return {
+    MuiSlider: {
+      styleOverrides: {
+        track: {
+          height: '1px',
+        },
+        thumb: {
+          width: 14,
+          height: 14,
+          border: `2px solid ${theme.palette.primary.main}`,
+          backgroundColor: theme.palette.background.paper,
+          '&.MuiSlider-thumbColorPrimary': getColorStyle({ color: 'primary', theme }),
+          '&.MuiSlider-thumbColorSecondary': getColorStyle({ color: 'secondary', theme }),
+          '&.MuiSlider-thumbColorSuccess': getColorStyle({ color: 'success', theme }),
+          '&.MuiSlider-thumbColorWarning': getColorStyle({ color: 'warning', theme }),
+          '&.MuiSlider-thumbColorInfo': getColorStyle({ color: 'info', theme }),
+          '&.MuiSlider-thumbColorError': getColorStyle({ color: 'error', theme }),
+        },
+        mark: {
+          width: 4,
+          height: 4,
+          borderRadius: '50%',
+          border: `1px solid ${theme.palette.secondary.light}`,
+          backgroundColor: theme.palette.background.paper,
+          '&.MuiSlider-markActive': {
+            opacity: 1,
+            borderColor: 'inherit',
+            borderWidth: 2,
+          },
+        },
+        rail: {
+          color: theme.palette.secondary.light,
+        },
+        root: {
+          '&.Mui-disabled': {
+            '.MuiSlider-rail': {
+              opacity: 0.25,
+            },
+            '.MuiSlider-track': {
+              color: theme.palette.secondary.lighter,
+            },
+            '.MuiSlider-thumb': {
+              border: `2px solid ${theme.palette.secondary.lighter}`,
+            },
+          },
+        },
+        valueLabel: {
+          backgroundColor: theme.palette.grey[600],
+          color: theme.palette.grey[0],
+        },
+      },
+    },
+  }
+}

package/src/themes/overrides/Switch.jsx

@@ -0,0 +1,88 @@
+// ==============================|| SWITCH - SIZE STYLE ||============================== //
+
+function getSizeStyle(size) {
+  switch (size) {
+    case 'small':
+      return { width: 28, height: 16, base: 12, thumb: 10, trackRadius: 8 }
+    case 'large':
+      return { width: 60, height: 28, base: 32, thumb: 22, trackRadius: 24 }
+    case 'medium':
+    default:
+      return { width: 44, height: 22, base: 22, thumb: 16, trackRadius: 16 }
+  }
+}
+
+function switchStyle(theme, size) {
+  const sizes = getSizeStyle(size)
+
+  return {
+    width: sizes.width,
+    height: sizes.height,
+    '& .MuiSwitch-switchBase': {
+      padding: 3,
+      '&.Mui-checked': {
+        transform: `translateX(${sizes.base}px)`,
+      },
+    },
+    '& .MuiSwitch-thumb': {
+      width: sizes.thumb,
+      height: sizes.thumb,
+    },
+    '& .MuiSwitch-track': {
+      borderRadius: sizes.trackRadius,
+    },
+  }
+}
+
+// ==============================|| OVERRIDES - TAB ||============================== //
+
+export default function Switch(theme) {
+  return {
+    MuiSwitch: {
+      styleOverrides: {
+        track: {
+          opacity: 1,
+          backgroundColor: theme.palette.secondary[400],
+          boxSizing: 'border-box',
+        },
+        thumb: {
+          borderRadius: '50%',
+          transition: theme.transitions.create(['width'], {
+            duration: 200,
+          }),
+        },
+        switchBase: {
+          '&.Mui-checked': {
+            color: '#fff',
+            '& + .MuiSwitch-track': {
+              opacity: 1,
+            },
+            '&.Mui-disabled': {
+              color: theme.palette.background.paper,
+            },
+          },
+          '&.Mui-disabled': {
+            color: theme.palette.background.paper,
+            '+.MuiSwitch-track': {
+              opacity: 0.3,
+            },
+          },
+        },
+        root: {
+          color: theme.palette.text.primary,
+          padding: 0,
+          margin: 8,
+          display: 'flex',
+          '& ~ .MuiFormControlLabel-label': {
+            margin: 6,
+          },
+          ...switchStyle(theme, 'medium'),
+        },
+        sizeLarge: { ...switchStyle(theme, 'large') },
+        sizeSmall: {
+          ...switchStyle(theme, 'small'),
+        },
+      },
+    },
+  }
+}

package/src/themes/overrides/Tab.jsx

@@ -0,0 +1,24 @@
+// ==============================|| OVERRIDES - TAB ||============================== //
+
+export default function Tab(theme) {
+  return {
+    MuiTab: {
+      styleOverrides: {
+        root: {
+          minHeight: 46,
+          color: theme.palette.text.primary,
+          borderRadius: 4,
+          '&:hover': {
+            backgroundColor: theme.palette.primary.lighter + 60,
+            color: theme.palette.primary.main,
+          },
+          '&:focus-visible': {
+            borderRadius: 4,
+            outline: `2px solid ${theme.palette.secondary.dark}`,
+            outlineOffset: -3,
+          },
+        },
+      },
+    },
+  }
+}

package/src/themes/overrides/TableBody.jsx

@@ -0,0 +1,27 @@
+// ==============================|| OVERRIDES - TABLE ROW ||============================== //
+
+export default function TableBody(theme) {
+  const hoverStyle = {
+    '&:hover': {
+      backgroundColor: theme.palette.secondary.lighter,
+    },
+  }
+
+  return {
+    MuiTableBody: {
+      styleOverrides: {
+        root: {
+          '&.striped .MuiTableRow-root': {
+            '&:nth-of-type(even)': {
+              backgroundColor: theme.palette.grey[50],
+            },
+            ...hoverStyle,
+          },
+          '& .MuiTableRow-root': {
+            ...hoverStyle,
+          },
+        },
+      },
+    },
+  }
+}

package/src/themes/overrides/TableCell.jsx

@@ -0,0 +1,44 @@
+// ==============================|| OVERRIDES - TABLE CELL ||============================== //
+
+export default function TableCell(theme) {
+  const commonCell = {
+    '&:not(:last-of-type)': {
+      position: 'relative',
+      '&:after': {
+        position: 'absolute',
+        content: '""',
+        backgroundColor: theme.palette.divider,
+        width: 1,
+        height: 'calc(100% - 30px)',
+        right: 0,
+        top: 16,
+      },
+    },
+  }
+
+  return {
+    MuiTableCell: {
+      styleOverrides: {
+        root: {
+          fontSize: '0.875rem',
+          padding: 12,
+          borderColor: theme.palette.divider,
+        },
+        sizeSmall: {
+          padding: 8,
+        },
+        head: {
+          fontSize: '0.75rem',
+          fontWeight: 700,
+          textTransform: 'uppercase',
+          ...commonCell,
+        },
+        footer: {
+          fontSize: '0.75rem',
+          textTransform: 'uppercase',
+          ...commonCell,
+        },
+      },
+    },
+  }
+}

package/src/themes/overrides/TableFooter.jsx

@@ -0,0 +1,15 @@
+// ==============================|| OVERRIDES - TABLE CELL ||============================== //
+
+export default function TableFooter(theme) {
+  return {
+    MuiTableFooter: {
+      styleOverrides: {
+        root: {
+          backgroundColor: theme.palette.grey[50],
+          borderTop: `2px solid ${theme.palette.divider}`,
+          borderBottom: `1px solid ${theme.palette.divider}`,
+        },
+      },
+    },
+  }
+}

package/src/themes/overrides/TableHead.jsx

@@ -0,0 +1,15 @@
+// ==============================|| OVERRIDES - TABLE CELL ||============================== //
+
+export default function TableHead(theme) {
+  return {
+    MuiTableHead: {
+      styleOverrides: {
+        root: {
+          backgroundColor: theme.palette.grey[50],
+          borderTop: `1px solid ${theme.palette.divider}`,
+          borderBottom: `2px solid ${theme.palette.divider}`,
+        },
+      },
+    },
+  }
+}

package/src/themes/overrides/TablePagination.jsx

@@ -0,0 +1,16 @@
+// ==============================|| OVERRIDES - TABLE PAGINATION ||============================== //
+
+export default function TablePagination() {
+  return {
+    MuiTablePagination: {
+      styleOverrides: {
+        selectLabel: {
+          fontSize: '0.875rem',
+        },
+        displayedRows: {
+          fontSize: '0.875rem',
+        },
+      },
+    },
+  }
+}

package/src/themes/overrides/TableRow.jsx

@@ -0,0 +1,25 @@
+// ==============================|| OVERRIDES - TABLE ROW ||============================== //
+
+export default function TableRow() {
+  return {
+    MuiTableRow: {
+      styleOverrides: {
+        root: {
+          '&:last-of-type': {
+            '& .MuiTableCell-root': {
+              borderBottom: 'none',
+            },
+          },
+          '& .MuiTableCell-root': {
+            '&:last-of-type': {
+              paddingRight: 24,
+            },
+            '&:first-of-type': {
+              paddingLeft: 24,
+            },
+          },
+        },
+      },
+    },
+  }
+}

package/src/themes/overrides/Tabs.jsx

@@ -0,0 +1,13 @@
+// ==============================|| OVERRIDES - TABS ||============================== //
+
+export default function Tabs() {
+  return {
+    MuiTabs: {
+      styleOverrides: {
+        vertical: {
+          overflow: 'visible',
+        },
+      },
+    },
+  }
+}

package/src/themes/overrides/ToggleButton.jsx

@@ -0,0 +1,20 @@
+// ==============================|| OVERRIDES - TOGGLE BUTTON ||============================== //
+
+export default function ToggleButton(theme) {
+  return {
+    MuiToggleButton: {
+      styleOverrides: {
+        root: {
+          '&.Mui-disabled': {
+            borderColor: theme.palette.divider,
+            color: theme.palette.text.disabled,
+          },
+          '&:focus-visible': {
+            outline: `2px solid ${theme.palette.secondary.dark}`,
+            outlineOffset: 2,
+          },
+        },
+      },
+    },
+  }
+}

package/src/themes/overrides/Tooltip.jsx

@@ -0,0 +1,13 @@
+// ==============================|| OVERRIDES - TOOLTIP ||============================== //
+
+export default function Tooltip(theme) {
+  return {
+    MuiTooltip: {
+      styleOverrides: {
+        tooltip: {
+          color: theme.palette.background.paper,
+        },
+      },
+    },
+  }
+}

package/src/themes/overrides/TreeItem.jsx

@@ -0,0 +1,18 @@
+// ==============================|| OVERRIDES - TREE ITEM ||============================== //
+
+export default function TreeItem() {
+  return {
+    MuiTreeItem: {
+      styleOverrides: {
+        content: {
+          padding: 8,
+        },
+        iconContainer: {
+          '& svg': {
+            fontSize: '0.625rem',
+          },
+        },
+      },
+    },
+  }
+}

package/src/themes/overrides/Typography.jsx

@@ -0,0 +1,13 @@
+// ==============================|| OVERRIDES - TYPOGRAPHY ||============================== //
+
+export default function Typography() {
+  return {
+    MuiTypography: {
+      styleOverrides: {
+        gutterBottom: {
+          marginBottom: 12,
+        },
+      },
+    },
+  }
+}

package/src/themes/overrides/index.jsx

@@ -0,0 +1,98 @@
+// project import
+import Accordion from './Accordion'
+import AccordionDetails from './AccordionDetails'
+import AccordionSummary from './AccordionSummary'
+import Alert from './Alert'
+import AlertTitle from './AlertTitle'
+import Autocomplete from './Autocomplete'
+import Badge from './Badge'
+import Button from './Button'
+import ButtonBase from './ButtonBase'
+import ButtonGroup from './ButtonGroup'
+import CardContent from './CardContent'
+import Checkbox from './Checkbox'
+import Chip from './Chip'
+import Dialog from './Dialog'
+import DialogContentText from './DialogContentText'
+import DialogTitle from './DialogTitle'
+import Fab from './Fab'
+import IconButton from './IconButton'
+import InputBase from './InputBase'
+import InputLabel from './InputLabel'
+import LinearProgress from './LinearProgress'
+import Link from './Link'
+import ListItemButton from './ListItemButton'
+import ListItemIcon from './ListItemIcon'
+import LoadingButton from './LoadingButton'
+import OutlinedInput from './OutlinedInput'
+import Pagination from './Pagination'
+import PaginationItem from './PaginationItem'
+import Popover from './Popover'
+import Radio from './Radio'
+import Slider from './Slider'
+import Switch from './Switch'
+import Tab from './Tab'
+import TableBody from './TableBody'
+import TableCell from './TableCell'
+import TableFooter from './TableFooter'
+import TableHead from './TableHead'
+import TablePagination from './TablePagination'
+import TableRow from './TableRow'
+import Tabs from './Tabs'
+import ToggleButton from './ToggleButton'
+import Tooltip from './Tooltip'
+import TreeItem from './TreeItem'
+import Typography from './Typography'
+// third-party
+import { merge } from 'lodash'
+
+// ==============================|| OVERRIDES - MAIN ||============================== //
+
+export default function ComponentsOverrides(theme) {
+  return merge(
+    Accordion(theme),
+    AccordionDetails(theme),
+    AccordionSummary(theme),
+    Alert(theme),
+    AlertTitle(),
+    Autocomplete(),
+    Badge(theme),
+    Button(theme),
+    ButtonBase(),
+    ButtonGroup(),
+    CardContent(),
+    Checkbox(theme),
+    Chip(theme),
+    Dialog(),
+    DialogContentText(theme),
+    DialogTitle(),
+    Fab(theme),
+    IconButton(theme),
+    InputBase(theme),
+    InputLabel(theme),
+    LinearProgress(),
+    Link(),
+    ListItemButton(theme),
+    ListItemIcon(theme),
+    LoadingButton(),
+    OutlinedInput(theme),
+    Pagination(),
+    PaginationItem(theme),
+    Popover(theme),
+    Radio(theme),
+    Slider(theme),
+    Switch(theme),
+    Tab(theme),
+    TableBody(theme),
+    TableCell(theme),
+    TableFooter(theme),
+    TableHead(theme),
+    TablePagination(),
+    TableRow(),
+    Tabs(),
+    ToggleButton(theme),
+    Tooltip(theme),
+    TreeItem(),
+    Typography(),
+  )
+}

package/src/themes/palette.jsx

@@ -0,0 +1,78 @@
+// material-ui
+import { alpha, createTheme } from '@mui/material/styles'
+
+// third-party
+import { presetDarkPalettes, presetPalettes } from '@ant-design/colors'
+
+// project import
+import ThemeOption from './theme'
+
+// ==============================|| DEFAULT THEME - PALETTE  ||============================== //
+
+const Palette = (mode, presetColor) => {
+  const colors = mode === 'dark' ? presetDarkPalettes : presetPalettes
+
+  let greyPrimary = [
+    '#ffffff',
+    '#fafafa',
+    '#f5f5f5',
+    '#f0f0f0',
+    '#d9d9d9',
+    '#bfbfbf',
+    '#8c8c8c',
+    '#595959',
+    '#262626',
+    '#141414',
+    '#000000',
+  ]
+  let greyAscent = ['#fafafa', '#bfbfbf', '#434343', '#1f1f1f']
+  let greyConstant = ['#fafafb', '#e6ebf1']
+
+  if (mode === 'dark') {
+    greyPrimary = [
+      '#000000',
+      '#141414',
+      '#1e1e1e',
+      '#595959',
+      '#8c8c8c',
+      '#bfbfbf',
+      '#d9d9d9',
+      '#f0f0f0',
+      '#f5f5f5',
+      '#fafafa',
+      '#ffffff',
+    ]
+    // greyPrimary.reverse();
+    greyAscent = ['#fafafa', '#bfbfbf', '#434343', '#1f1f1f']
+    greyConstant = ['#121212', '#d3d8db']
+  }
+  colors.grey = [...greyPrimary, ...greyAscent, ...greyConstant]
+
+  const paletteColor = ThemeOption(colors, presetColor, mode)
+
+  return createTheme({
+    palette: {
+      mode,
+      common: {
+        black: '#000',
+        white: '#fff',
+      },
+      ...paletteColor,
+      text: {
+        primary: mode === 'dark' ? alpha(paletteColor.grey[900], 0.87) : paletteColor.grey[700],
+        secondary: mode === 'dark' ? alpha(paletteColor.grey[900], 0.45) : paletteColor.grey[500],
+        disabled: mode === 'dark' ? alpha(paletteColor.grey[900], 0.1) : paletteColor.grey[400],
+      },
+      action: {
+        disabled: paletteColor.grey[300],
+      },
+      divider: mode === 'dark' ? alpha(paletteColor.grey[900], 0.05) : paletteColor.grey[200],
+      background: {
+        paper: mode === 'dark' ? paletteColor.grey[100] : paletteColor.grey[0],
+        default: paletteColor.grey.A50,
+      },
+    },
+  })
+}
+
+export default Palette

package/src/themes/shadows.jsx

@@ -0,0 +1,27 @@
+import { alpha } from '@mui/material/styles'
+
+const CustomShadows = (theme) => ({
+  // z1: `0px 2px 8px rgba(0, 0, 0, 0.15)`,
+  button: theme.palette.mode === 'dark' ? `0 2px 0 rgb(0 0 0 / 5%)` : `0 2px #0000000b`,
+  text: `0 -1px 0 rgb(0 0 0 / 12%)`,
+  z1:
+    theme.palette.mode === 'dark'
+      ? `0px 1px 1px rgb(0 0 0 / 14%), 0px 2px 1px rgb(0 0 0 / 12%), 0px 1px 3px rgb(0 0 0 / 20%)`
+      : `0px 1px 4px ${alpha(theme.palette.grey[900], 0.08)}`,
+  primary: `0 0 0 2px ${alpha(theme.palette.primary.main, 0.2)}`,
+  secondary: `0 0 0 2px ${alpha(theme.palette.secondary.main, 0.2)}`,
+  error: `0 0 0 2px ${alpha(theme.palette.error.main, 0.2)}`,
+  warning: `0 0 0 2px ${alpha(theme.palette.warning.main, 0.2)}`,
+  info: `0 0 0 2px ${alpha(theme.palette.info.main, 0.2)}`,
+  success: `0 0 0 2px ${alpha(theme.palette.success.main, 0.2)}`,
+  grey: `0 0 0 2px ${alpha(theme.palette.grey[500], 0.2)}`,
+  primaryButton: `0 14px 12px ${alpha(theme.palette.primary.main, 0.2)}`,
+  secondaryButton: `0 14px 12px ${alpha(theme.palette.secondary.main, 0.2)}`,
+  errorButton: `0 14px 12px ${alpha(theme.palette.error.main, 0.2)}`,
+  warningButton: `0 14px 12px ${alpha(theme.palette.warning.main, 0.2)}`,
+  infoButton: `0 14px 12px ${alpha(theme.palette.info.main, 0.2)}`,
+  successButton: `0 14px 12px ${alpha(theme.palette.success.main, 0.2)}`,
+  greyButton: `0 14px 12px ${alpha(theme.palette.grey[500], 0.2)}`,
+})
+
+export default CustomShadows