robobyte-front-builder 1.0.0

package/src/@core/theme/overrides/select.jsx

@@ -0,0 +1,52 @@
+// React Imports
+import React from 'react'
+
+const SelectIcon = () => {
+  return <i className='ri-arrow-down-s-line' />
+}
+
+const iconStyles = theme => ({
+  userSelect: 'none',
+  display: 'inline-block',
+  fill: 'currentColor',
+  flexShrink: 0,
+  transition: theme.transitions.create('fill', {
+    duration: theme.transitions.duration.shorter
+  }),
+  fontSize: '1.25rem',
+  position: 'absolute',
+  right: '1rem',
+  top: 'calc(50% - 0.5em)',
+  pointerEvents: 'none'
+})
+
+const select = {
+  MuiSelect: {
+    defaultProps: {
+      IconComponent: SelectIcon
+    },
+    styleOverrides: {
+      select: ({ theme, ownerState }) => ({
+        ...(ownerState.variant === 'outlined' && {
+          minBlockSize: '1.5em'
+        }),
+        '&[aria-expanded="true"] ~ i, &[aria-expanded="true"] ~ svg': {
+          transform: 'rotate(180deg)'
+        },
+        '& ~ i, & ~ svg': iconStyles(theme),
+        '&:not(aria-label="Without label") ~ .MuiOutlinedInput-notchedOutline > legend > span': {
+          paddingInline: '5px'
+        }
+      })
+    }
+  },
+  MuiNativeSelect: {
+    styleOverrides: {
+      select: ({ theme }) => ({
+        '& + i, & + svg': iconStyles(theme)
+      })
+    }
+  }
+}
+
+export default select

package/src/@core/theme/overrides/slider.js

@@ -0,0 +1,97 @@
+const slider = {
+  MuiSlider: {
+    styleOverrides: {
+      root: ({ ownerState }) => ({
+        boxSizing: 'border-box',
+        ...(ownerState.orientation === 'horizontal'
+          ? ownerState.size !== 'small'
+            ? { blockSize: 6 }
+            : { blockSize: 4 }
+          : ownerState.size !== 'small'
+            ? { inlineSize: 6 }
+            : { inlineSize: 4 }),
+        '&.Mui-disabled': {
+          opacity: 0.45,
+          color: `var(--mui-palette-${ownerState.color}-main)`
+        }
+      }),
+      thumb: ({ ownerState }) => ({
+        ...(ownerState.size === 'small'
+          ? {
+              blockSize: 14,
+              inlineSize: 14,
+              border: '2px solid currentColor',
+              '&:hover, &.Mui-focusVisible': {
+                boxShadow: `0 0 0 7px var(--mui-palette-${ownerState.color}-lightOpacity)`
+              },
+              '&.Mui-active.Mui-focusVisible': {
+                boxShadow: `0 0 0 10px var(--mui-palette-${ownerState.color}-lightOpacity)`
+              }
+            }
+          : {
+              blockSize: 22,
+              inlineSize: 22,
+              border: '4px solid currentColor'
+            }),
+        backgroundColor: 'var(--mui-palette-common-white)',
+        ...(!ownerState.disabled && {
+          boxShadow: 'var(--mui-customShadows-sm)'
+        }),
+        '&:before': {
+          boxShadow: 'none'
+        },
+        '&:after': {
+          ...(ownerState.size === 'small'
+            ? {
+                blockSize: 28,
+                inlineSize: 28
+              }
+            : {
+                blockSize: 38,
+                inlineSize: 38
+              })
+        },
+        '&:hover, &.Mui-focusVisible': {
+          boxShadow: `0 0 0 8px var(--mui-palette-${ownerState.color}-lightOpacity)`
+        },
+        '&.Mui-active.Mui-focusVisible': {
+          boxShadow: `0 0 0 13px var(--mui-palette-${ownerState.color}-lightOpacity)`
+        }
+      }),
+      rail: ({ ownerState }) => ({
+        opacity: 1,
+        color: `var(--mui-palette-${ownerState.color}-lightOpacity)`,
+        ...(ownerState.track === 'inverted' && {
+          backgroundColor: `var(--mui-palette-${ownerState.color}-main)`
+        })
+      }),
+      valueLabel: ({ theme, ownerState }) => ({
+        ...(ownerState.size === 'small'
+          ? {
+              ...theme.typography.caption,
+              borderRadius: 'var(--mui-shape-customBorderRadius-sm)',
+              padding: theme.spacing(1, 2)
+            }
+          : {
+              ...theme.typography.body2,
+              fontWeight: theme.typography.fontWeightMedium,
+              borderRadius: 'var(--mui-shape-customBorderRadius-md)',
+              padding: theme.spacing(1, 2.5)
+            }),
+        color: 'var(--mui-palette-customColors-tooltipText)',
+        backgroundColor: 'var(--mui-palette-Tooltip-bg)',
+        '&:before': {
+          display: 'none'
+        }
+      }),
+      track: ({ theme, ownerState }) => ({
+        ...(ownerState.track === 'inverted' && {
+          backgroundColor: `color-mix(in srgb, ${theme.palette[ownerState.color || 'primary'].main} 16%, var(--mui-palette-background-paper))`,
+          borderColor: `color-mix(in srgb, ${theme.palette[ownerState.color || 'primary'].main} 16%, var(--mui-palette-background-paper))`
+        })
+      })
+    }
+  }
+}
+
+export default slider

package/src/@core/theme/overrides/snackbar.js

@@ -0,0 +1,19 @@
+const Snackbar = (theme, skin) => {
+  return {
+    MuiSnackbarContent: {
+      styleOverrides: {
+        root: {
+          borderRadius: 8,
+          padding: theme.spacing(1.75, 4),
+          ...(skin === 'bordered' && { boxShadow: 'none' }),
+          backgroundColor: theme.palette.mode === 'light' ? theme.palette.grey[900] : theme.palette.grey[100],
+          '& .MuiSnackbarContent-message': {
+            lineHeight: 1.429
+          }
+        }
+      }
+    }
+  }
+}
+
+export default Snackbar

package/src/@core/theme/overrides/switch.js

@@ -0,0 +1,73 @@
+const switchOverrides = {
+  MuiSwitch: {
+    defaultProps: {
+      disableRipple: true
+    },
+    styleOverrides: {
+      root: ({ theme, ownerState }) => ({
+        '&:has(.Mui-disabled)': {
+          opacity: 0.45
+        },
+        ...(ownerState.size !== 'small'
+          ? {
+              width: 46,
+              height: 38,
+              padding: theme.spacing(2.5, 2)
+            }
+          : {
+              width: 42,
+              height: 30,
+              padding: theme.spacing(1.75, 2),
+              '& .MuiSwitch-thumb': {
+                width: 12,
+                height: 12
+              },
+              '& .MuiSwitch-switchBase': {
+                padding: 7,
+                left: 3,
+                '&.Mui-checked': {
+                  left: -3
+                }
+              }
+            })
+      }),
+      switchBase: ({ ownerState }) => ({
+        ...(ownerState.size !== 'small'
+          ? {
+              top: 3,
+              left: 1
+            }
+          : {
+              top: 2,
+              left: 1
+            }),
+        '&.Mui-checked': {
+          left: -7,
+          color: 'var(--mui-palette-common-white)',
+          '& + .MuiSwitch-track': {
+            opacity: 1
+          }
+        },
+        '&.Mui-disabled + .MuiSwitch-track': {
+          opacity: 1
+        },
+        '&:hover:not(:has(span.MuiTouchRipple-root))': {
+          backgroundColor: 'transparent'
+        }
+      }),
+      thumb: {
+        width: 14,
+        height: 14,
+        boxShadow: 'var(--mui-customShadows-xs)'
+      },
+      track: {
+        opacity: 1,
+        borderRadius: 10,
+        backgroundColor: 'var(--mui-palette-action-focus)',
+        boxShadow: '0 0 4px rgb(0 0 0 / 0.16) inset'
+      }
+    }
+  }
+}
+
+export default switchOverrides

package/src/@core/theme/overrides/switches.js

@@ -0,0 +1,25 @@
+const Switch = theme => {
+  return {
+    MuiSwitch: {
+      styleOverrides: {
+        root: {
+          '& .MuiSwitch-track': {
+            borderRadius: theme.shape.borderRadius
+          },
+          '& .MuiSwitch-switchBase': {
+            '&:not(.Mui-checked)': {
+              '& .MuiSwitch-thumb': {
+                color: theme.palette.grey[50]
+              }
+            }
+          },
+          '& .Mui-disabled + .MuiSwitch-track': {
+            backgroundColor: `rgb(${theme.palette.customColors.main})`
+          }
+        }
+      }
+    }
+  }
+}
+
+export default Switch

package/src/@core/theme/overrides/table-pagination.js

@@ -0,0 +1,39 @@
+const tablePagination = {
+  MuiTablePagination: {
+    styleOverrides: {
+      toolbar: ({ theme }) => ({
+        paddingInlineEnd: `${theme.spacing(3)} !important`
+      }),
+      select: ({ theme }) => ({
+        ...theme.typography.body1,
+        paddingInlineStart: 0,
+        '& ~ i, & ~ svg': {
+          fontSize: 20,
+          right: '2px !important',
+          color: 'var(--mui-palette-action-active)'
+        }
+      }),
+      selectLabel: ({ theme }) => ({
+        ...theme.typography.body1,
+        color: 'var(--mui-palette-text-secondary)'
+      }),
+      input: ({ theme }) => ({
+        marginInlineEnd: theme.spacing(6)
+      }),
+      displayedRows: ({ theme }) => ({
+        ...theme.typography.body1
+      }),
+      actions: ({ theme }) => ({
+        marginInlineStart: theme.spacing(6),
+        '& .Mui-disabled': {
+          color: 'var(--mui-palette-action-active)'
+        },
+        '& .MuiIconButton-root:last-of-type': {
+          marginInlineStart: theme.spacing(2)
+        }
+      })
+    }
+  }
+}
+
+export default tablePagination

package/src/@core/theme/overrides/table.js

@@ -0,0 +1,81 @@
+const Table = theme => {
+  return {
+    MuiTableContainer: {
+      styleOverrides: {
+        root: {
+          boxShadow: theme.shadows[0],
+          borderTopColor: theme.palette.divider
+        }
+      }
+    },
+    MuiTableHead: {
+      styleOverrides: {
+        root: {
+          textTransform: 'uppercase',
+          '& .MuiTableCell-head': {
+            fontWeight: 500,
+            fontSize: '0.75rem',
+            lineHeight: '1.959rem',
+            letterSpacing: '0.17px'
+          }
+        }
+      }
+    },
+    MuiTableBody: {
+      styleOverrides: {
+        root: {
+          '& .MuiTableCell-body': {
+            fontWeight: 400,
+            fontSize: '0.875rem',
+            lineHeight: '1.358rem',
+            letterSpacing: '0.15px',
+            '&:not(.MuiTableCell-sizeSmall):not(.MuiTableCell-paddingCheckbox):not(.MuiTableCell-paddingNone)': {
+              paddingTop: theme.spacing(4),
+              paddingBottom: theme.spacing(4)
+            }
+          }
+        }
+      }
+    },
+    MuiTableRow: {
+      styleOverrides: {
+        root: {
+          '& .MuiTableCell-head:first-child, & .MuiTableCell-root:first-child ': {
+            paddingLeft: theme.spacing(5)
+          },
+          '& .MuiTableCell-head:last-child, & .MuiTableCell-root:last-child': {
+            paddingRight: theme.spacing(5)
+          }
+        }
+      }
+    },
+    MuiTableCell: {
+      styleOverrides: {
+        root: {
+          borderBottom: `1px solid ${theme.palette.divider}`,
+          '& .MuiButton-root': {
+            textTransform: 'uppercase',
+            color: theme.palette.text.secondary
+          }
+        },
+        stickyHeader: {
+          backgroundColor: theme.palette.customColors.tableHeaderBg
+        }
+      }
+    },
+    MuiTablePagination: {
+      styleOverrides: {
+        root: {
+          '& .MuiIconButton-root.Mui-disabled': {
+            color: theme.palette.action.active
+          }
+        },
+        displayedRows: {
+          color: theme.palette.text.primary
+        }
+      }
+    }
+  }
+}
+
+export default Table

package/src/@core/theme/overrides/tabs.js

@@ -0,0 +1,30 @@
+const Tabs = theme => {
+  return {
+    MuiTabs: {
+      styleOverrides: {
+        vertical: {
+          minWidth: 130,
+          marginRight: theme.spacing(4),
+          borderRight: `1px solid ${theme.palette.divider}`,
+          '& .MuiTab-root': {
+            minWidth: 130
+          }
+        }
+      }
+    },
+    MuiTab: {
+      styleOverrides: {
+        root: {
+          lineHeight: 1.5
+        },
+        textColorSecondary: {
+          '&.Mui-selected': {
+            color: theme.palette.text.secondary
+          }
+        }
+      }
+    }
+  }
+}
+
+export default Tabs

package/src/@core/theme/overrides/timeline.js

@@ -0,0 +1,80 @@
+// ** Util Import
+import { hexToRGBA } from 'src/@core/utils/hex-to-rgba'
+
+const Timeline = theme => {
+  return {
+    MuiTimelineItem: {
+      styleOverrides: {
+        root: {
+          '&:not(:last-of-type)': {
+            '& .MuiTimelineContent-root': {
+              marginBottom: theme.spacing(4)
+            }
+          }
+        }
+      }
+    },
+    MuiTimelineConnector: {
+      styleOverrides: {
+        root: {
+          backgroundColor: theme.palette.divider
+        }
+      }
+    },
+    MuiTimelineContent: {
+      styleOverrides: {
+        root: {
+          marginTop: theme.spacing(0.5)
+        }
+      }
+    },
+    MuiTimelineDot: {
+      styleOverrides: {
+        filledPrimary: {
+          boxShadow: `0 0 0 3px ${hexToRGBA(theme.palette.primary.main, 0.12)}`
+        },
+        filledSecondary: {
+          boxShadow: `0 0 0 3px ${hexToRGBA(theme.palette.secondary.main, 0.12)}`
+        },
+        filledSuccess: {
+          boxShadow: `0 0 0 3px ${hexToRGBA(theme.palette.success.main, 0.12)}`
+        },
+        filledError: {
+          boxShadow: `0 0 0 3px ${hexToRGBA(theme.palette.error.main, 0.12)}`
+        },
+        filledWarning: {
+          boxShadow: `0 0 0 3px ${hexToRGBA(theme.palette.warning.main, 0.12)}`
+        },
+        filledInfo: {
+          boxShadow: `0 0 0 3px ${hexToRGBA(theme.palette.info.main, 0.12)}`
+        },
+        filledGrey: {
+          boxShadow: `0 0 0 3px ${hexToRGBA(theme.palette.grey[400], 0.12)}`
+        },
+        outlinedPrimary: {
+          '& svg': { color: theme.palette.primary.main }
+        },
+        outlinedSecondary: {
+          '& svg': { color: theme.palette.secondary.main }
+        },
+        outlinedSuccess: {
+          '& svg': { color: theme.palette.success.main }
+        },
+        outlinedError: {
+          '& svg': { color: theme.palette.error.main }
+        },
+        outlinedWarning: {
+          '& svg': { color: theme.palette.warning.main }
+        },
+        outlinedInfo: {
+          '& svg': { color: theme.palette.info.main }
+        },
+        outlinedGrey: {
+          '& svg': { color: theme.palette.grey[400] }
+        }
+      }
+    }
+  }
+}
+
+export default Timeline

package/src/@core/theme/overrides/toggle-button.js

@@ -0,0 +1,33 @@
+const toggleButton = {
+  MuiToggleButtonGroup: {
+    styleOverrides: {
+      root: ({ ownerState }) => ({
+        borderRadius: 'var(--mui-shape-customBorderRadius-lg)',
+        ...(ownerState.size === 'small' && {
+          borderRadius: 'var(--mui-shape-customBorderRadius-md)'
+        }),
+        ...(ownerState.size === 'large' && {
+          borderRadius: 'var(--mui-shape-borderRadius)'
+        })
+      })
+    }
+  },
+  MuiToggleButton: {
+    styleOverrides: {
+      root: {
+        borderRadius: 'var(--mui-shape-customBorderRadius-lg)',
+        '&:not(.Mui-selected):not(.Mui-disabled)': {
+          color: 'var(--mui-palette-text-secondary)'
+        }
+      },
+      sizeSmall: {
+        borderRadius: 'var(--mui-shape-customBorderRadius-md)'
+      },
+      sizeLarge: {
+        borderRadius: 'var(--mui-shape-borderRadius)'
+      }
+    }
+  }
+}
+
+export default toggleButton

package/src/@core/theme/overrides/toggleButton.js

@@ -0,0 +1,16 @@
+export default {
+  MuiToggleButtonGroup: {
+    styleOverrides: {
+      root: {
+        borderRadius: 8
+      }
+    }
+  },
+  MuiToggleButton: {
+    styleOverrides: {
+      root: {
+        borderRadius: 8
+      }
+    }
+  }
+}

package/src/@core/theme/overrides/tooltip.js

@@ -0,0 +1,21 @@
+// ** Util Import
+import { hexToRGBA } from 'src/@core/utils/hex-to-rgba'
+
+const Tooltip = theme => {
+  return {
+    MuiTooltip: {
+      styleOverrides: {
+        tooltip: {
+          borderRadius: 6,
+          lineHeight: 1.455,
+          backgroundColor: hexToRGBA(theme.palette.customColors.tooltipBg, 0.9)
+        },
+        arrow: {
+          color: hexToRGBA(theme.palette.customColors.tooltipBg, 0.9)
+        }
+      }
+    }
+  }
+}
+
+export default Tooltip

package/src/@core/theme/overrides/typography.js

@@ -0,0 +1,13 @@
+const Typography = theme => {
+  return {
+    MuiTypography: {
+      styleOverrides: {
+        gutterBottom: {
+          marginBottom: theme.spacing(2)
+        }
+      }
+    }
+  }
+}
+
+export default Typography

package/src/@core/theme/palette/index.js

@@ -0,0 +1,107 @@
+const DefaultPalette = (mode, skin) => {
+  // ** Vars
+  const lightColor = '76, 78, 100'
+  const darkColor = '234, 234, 255'
+  const mainColor = mode === 'light' ? lightColor : darkColor
+
+  const defaultBgColor = () => {
+    if (skin === 'bordered' && mode === 'light') {
+      return '#FFF'
+    } else if (skin === 'bordered' && mode === 'dark') {
+      return '#30334E'
+    } else if (mode === 'light') {
+      return '#F7F7F9'
+    } else return '#282A42'
+  }
+
+  return {
+    customColors: {
+      dark: `rgba(${darkColor}, 1)`,
+      main: `rgba(${mainColor}, 1)`,
+      light:`rgba(${lightColor}, 1)`,
+      darkBg: '#282A42',
+      lightBg: '#F7F7F9',
+      bodyBg: mode === 'light' ? '#F7F7F9' : '#282A42',
+      tooltipBg: mode === 'light' ? '#262732' : '#464A65',
+      tableHeaderBg: mode === 'light' ? '#F5F5F7' : '#3A3E5B'
+    },
+    common: {
+      black: '#000',
+      white: '#FFF'
+    },
+    mode: mode,
+    primary: {
+      light: '#787EFF',
+      main: '#666CFF',
+      dark: '#5A5FE0',
+      contrastText: '#FFF'
+    },
+    secondary: {
+      light: '#7F889B',
+      main: '#6D788D',
+      dark: '#606A7C',
+      contrastText: '#FFF'
+    },
+    success: {
+      light: '#83E542',
+      main: '#72E128',
+      dark: '#64C623',
+      contrastText: '#FFF'
+    },
+    error: {
+      light: '#FF625F',
+      main: '#FF4D49',
+      dark: '#E04440',
+      contrastText: '#FFF'
+    },
+    warning: {
+      light: '#FDBE42',
+      main: '#FDB528',
+      dark: '#DF9F23',
+      contrastText: '#FFF'
+    },
+    info: {
+      light: '#40CDFA',
+      main: '#26C6F9',
+      dark: '#21AEDB',
+      contrastText: '#FFF'
+    },
+    grey: {
+      50: '#FAFAFA',
+      100: '#F5F5F5',
+      200: '#EEEEEE',
+      300: '#E0E0E0',
+      400: '#BDBDBD',
+      500: '#9E9E9E',
+      600: '#757575',
+      700: '#616161',
+      800: '#424242',
+      900: '#212121',
+      A100: '#D5D5D5',
+      A200: '#AAAAAA',
+      A400: '#616161',
+      A700: '#303030'
+    },
+    text: {
+      primary: `rgba(${mainColor}, 0.87)`,
+      secondary: `rgba(${mainColor}, 0.68)`,
+      disabled: `rgba(${mainColor}, 0.38)`
+    },
+    divider: `rgba(${mainColor}, 0.12)`,
+    background: {
+      paper: mode === 'light' ? '#FFF' : '#30334E',
+      default: defaultBgColor()
+    },
+    action: {
+      active: `rgba(${mainColor}, 0.54)`,
+      hover: `rgba(${mainColor}, 0.05)`,
+      hoverOpacity: 0.05,
+      selected: `rgba(${mainColor}, 0.08)`,
+      disabled: `rgba(${mainColor}, 0.26)`,
+      disabledBackground: `rgba(${mainColor}, 0.12)`,
+      focus: `rgba(${mainColor}, 0.12)`
+    }
+  }
+}
+
+export default DefaultPalette