@nethru/ui 1.0.82 → 2.0.0

package/base/styles/mui/checkbox.js

@@ -0,0 +1,37 @@
+import { grey } from "../../colors";
+export const styles = {
+  styleOverrides: {
+    root: ({
+      ownerState,
+      theme
+    }) => ({
+      ':hover, &.Mui-focusVisible': {
+        backgroundColor: grey[10]
+      },
+      '&:active': {
+        backgroundColor: grey[20]
+      },
+      '& svg': {
+        fill: fillColor(ownerState, theme),
+        width: 20,
+        height: 20
+      }
+    }),
+    sizeLarge: {
+      width: 28,
+      height: 28
+    },
+    sizeMedium: {
+      width: 26,
+      height: 26
+    },
+    sizeSmall: {
+      width: 24,
+      height: 24
+    }
+  }
+};
+function fillColor(ownerState, theme) {
+  if (ownerState.disabled) return ownerState.checked ? grey[700] : grey[400];
+  // return ownerState.checked ? theme.palette.info.main : grey[700];
+}

package/base/styles/mui/chip.js

@@ -0,0 +1,83 @@
+import { blue, green, grey, lime, orange } from "../../colors";
+import typography from "../typography";
+import { lighten } from "@mui/material/styles";
+export const styles = {
+  defaultProps: {
+    size: 'small'
+  },
+  styleOverrides: {
+    root: ({
+      ownerState,
+      theme
+    }) => ({
+      fontFamily: typography.fontFamily,
+      fontSize: typography.bodySmMedium.fontSize,
+      fontWeight: typography.bodySmMedium.fontWeight,
+      letterSpacing: typography.bodySmMedium.letterSpacing,
+      color: textColor(ownerState, theme),
+      backgroundColor: backgroundColor(ownerState, theme),
+      borderColor: borderColor(ownerState, theme),
+      '&:hover, &.Mui-focusVisible': {
+        backgroundColor: hoverColor(ownerState, theme)
+      },
+      '&:active': {
+        backgroundColor: activeColor(ownerState, theme),
+        boxShadow: 'none'
+      }
+    }),
+    sizeMedium: undefined,
+    sizeSmall: {
+      height: 26
+    }
+  }
+};
+function textColor(ownerState, theme) {
+  switch (ownerState.color) {
+    case 'blue':
+      return theme.palette.blue.contrastText;
+    case 'green':
+      return theme.palette.green.contrastText;
+    case 'orange':
+      return theme.palette.orange.contrastText;
+    case 'lime':
+      return theme.palette.lime.contrastText;
+    default:
+      return grey[900];
+  }
+}
+function backgroundColor(ownerState, theme) {
+  if (ownerState.variant === 'outlined') return undefined;
+  switch (ownerState.color) {
+    case 'blue':
+      return blue[50];
+    case 'green':
+      return green[50];
+    case 'orange':
+      return orange[50];
+    case 'lime':
+      return lime[50];
+    default:
+      return grey[7];
+  }
+}
+function borderColor(ownerState, theme) {
+  if (ownerState.variant !== 'outlined') return undefined;
+  switch (ownerState.color) {
+    case 'blue':
+      return blue[500];
+    case 'green':
+      return green[500];
+    case 'orange':
+      return orange[500];
+    case 'lime':
+      return lime[500];
+    default:
+      return grey[300];
+  }
+}
+function hoverColor(ownerState, theme) {
+  return ownerState.clickable && lighten(textColor(ownerState, theme), 0.8);
+}
+function activeColor(ownerState, theme) {
+  return ownerState.clickable && lighten(textColor(ownerState, theme), 0.7);
+}

package/base/styles/mui/cssBaseline.js

@@ -0,0 +1,12 @@
+export const styles = {
+  styleOverrides: {
+    '*': {
+      margin: 0,
+      padding: 0,
+      boxSizing: 'border-box'
+    },
+    body: {
+      height: '100%'
+    }
+  }
+};

package/base/styles/mui/dataGrid.js

@@ -0,0 +1,101 @@
+import typography from "../typography";
+import { blue, grey } from "../../colors";
+import borderRadius from "../borderRadius";
+export const styles = {
+  styleOverrides: {
+    root: {
+      fontFamily: typography.fontFamily,
+      ...typography.bodyMdMedium,
+      border: 'none'
+    },
+    main: ({
+      ownerState
+    }) => ({
+      border: `1px solid ${ownerState?.error ? 'red' : grey[300]}`,
+      borderRadius: borderRadius[2]
+    }),
+    footerContainer: {
+      border: 'none',
+      '.MuiDataGrid-selectedRowCount': {
+        ...typography.bodySmMedium,
+        color: grey[700]
+      }
+    },
+    columnHeaders: {
+      minHeight: 'unset !important'
+    },
+    columnHeader: {
+      ...typography.bodySmBold,
+      color: grey[600],
+      backgroundColor: grey[50],
+      height: '35px !important',
+      '&:focus, &:focus-within': {
+        outline: 'none'
+      },
+      '.Mui-checked, .MuiCheckbox-indeterminate': {
+        color: blue[500]
+      }
+    },
+    iconButtonContainer: {
+      ...typography.bodySmRegular,
+      marginLeft: 2,
+      '.MuiIconButton-root': {
+        color: grey[600],
+        width: 16,
+        height: 16
+      },
+      '.MuiIconButton-root svg': {
+        width: 14,
+        height: 14
+      }
+    },
+    row: {
+      minHeight: 'unset !important',
+      '.MuiDataGrid-cell .MuiDataGrid-actions': {
+        display: 'none'
+      },
+      '&.Mui-hovered': {
+        backgroundColor: grey[5],
+        '.MuiDataGrid-cell .MuiDataGrid-actions': {
+          display: 'block'
+        }
+      },
+      '&.Mui-selected, &.Mui-selected.Mui-hovered': {
+        backgroundColor: blue[5]
+      }
+    },
+    rowReorderCell: {
+      color: grey[700]
+    },
+    cell: ({
+      ownerState
+    }) => ({
+      minHeight: '40px !important',
+      paddingTop: 10,
+      paddingBottom: 10,
+      '&.MuiTypography-bold': {
+        fontWeight: 'bold'
+      },
+      '&.MuiTypography-greyed': {
+        color: grey[600]
+      },
+      '&:focus, &:focus-within': {
+        outline: ownerState?.editable ? `solid ${blue[500]} 1px` : 'none'
+      },
+      '&.MuiDataGrid-cell--editing': {
+        boxShadow: 'none',
+        '&:focus, &:focus-within': {
+          outline: `solid ${blue[500]} 1px`
+        }
+      }
+    }),
+    cellCheckbox: {
+      '.Mui-checked': {
+        color: blue[500]
+      }
+    },
+    overlayWrapperInner: {
+      ...typography.bodySmRegular
+    }
+  }
+};

package/base/styles/mui/dialog.js

@@ -0,0 +1,13 @@
+import shadow from "../shadow";
+export const styles = {
+  styleOverrides: {
+    root: {
+      '.MuiModal-backdrop': {
+        backgroundColor: 'rgba(48, 50, 54, 0.6)'
+      }
+    },
+    paper: {
+      boxShadow: shadow[5]
+    }
+  }
+};

package/base/styles/mui/dialogActions.js

@@ -0,0 +1,8 @@
+export const styles = {
+  styleOverrides: {
+    root: {
+      justifyContent: 'center',
+      padding: '0px 24px 24px 24px'
+    }
+  }
+};

package/base/styles/mui/dialogContent.js

@@ -0,0 +1,10 @@
+import typography from "../typography";
+export const styles = {
+  styleOverrides: {
+    root: {
+      fontFamily: typography.fontFamily,
+      ...typography.bodyMdSemibold,
+      padding: 24
+    }
+  }
+};

package/base/styles/mui/dialogTitle.js

@@ -0,0 +1,11 @@
+import typography from "../typography";
+export const styles = {
+  styleOverrides: {
+    root: {
+      fontFamily: typography.fontFamily,
+      ...typography.bodyXlSemibold,
+      marginBottom: -8,
+      padding: '24px 24px 0px 24px'
+    }
+  }
+};

package/base/styles/mui/formControl.js

@@ -0,0 +1,8 @@
+import typography from "../typography";
+export const styles = {
+  styleOverrides: {
+    root: {
+      fontFamily: typography.fontFamily
+    }
+  }
+};

package/base/styles/mui/formControlLabel.js

@@ -0,0 +1,9 @@
+import typography from "../typography";
+export const styles = {
+  styleOverrides: {
+    root: {
+      fontFamily: typography.fontFamily,
+      ...typography.bodyMdMedium
+    }
+  }
+};

package/base/styles/mui/formHelperText.js

@@ -0,0 +1,10 @@
+import typography from "../typography";
+export const styles = {
+  styleOverrides: {
+    root: {
+      fontSize: typography.bodyXsMedium.fontSize,
+      marginTop: 0,
+      marginLeft: 4
+    }
+  }
+};

package/base/styles/mui/grid.js

@@ -0,0 +1,15 @@
+import { grey } from "../../colors";
+import borderRadius from "../borderRadius";
+export const styles = {
+  styleOverrides: {
+    item: {
+      '.MuiGrid-box': {
+        // height: 'calc(100% - 32px)',
+        backgroundColor: grey[50],
+        border: `1px solid ${grey[300]}`,
+        padding: '16px !important',
+        borderRadius: `${borderRadius[2]}px`
+      }
+    }
+  }
+};

package/base/styles/mui/icon.js

@@ -0,0 +1,12 @@
+export const styles = {
+  styleOverrides: {
+    fontSizeLarge: {
+      width: 20,
+      height: 20
+    },
+    fontSizeSmall: {
+      width: 16,
+      height: 16
+    }
+  }
+};

package/base/styles/mui/iconButton.js

@@ -0,0 +1,79 @@
+import { grey } from "../../colors";
+import borderRadius from "../borderRadius";
+import typography from "../typography";
+export const styles = {
+  variants: [{
+    props: {
+      variant: 'normal'
+    },
+    style: {}
+  }, {
+    props: {
+      variant: 'crud'
+    },
+    style: {
+      '&': {
+        backgroundColor: grey[7],
+        borderRadius: borderRadius[2],
+        '&.Mui-disabled': {
+          backgroundColor: grey[150],
+          borderRadius: borderRadius[2]
+        }
+      }
+    }
+  }, {
+    props: {
+      variant: 'menu'
+    },
+    style: {
+      '&': {
+        backgroundColor: undefined,
+        borderRadius: borderRadius[2],
+        '&:active': {
+          backgroundColor: grey[10],
+          border: `1px solid ${grey[700]}`
+        },
+        '&.Mui-disabled': {
+          backgroundColor: grey[150],
+          borderRadius: borderRadius[2]
+        }
+      }
+    }
+  }],
+  defaultProps: {
+    variant: 'normal'
+  },
+  styleOverrides: {
+    root: {
+      fontFamily: typography.fontFamily,
+      color: grey[600],
+      backgroundColor: undefined,
+      borderRadius: borderRadius['circle'],
+      ':hover, &.Mui-focusVisible': {
+        backgroundColor: grey[10]
+      },
+      '&:active': {
+        backgroundColor: grey[20]
+      },
+      '&.Mui-disabled': {
+        backgroundColor: undefined,
+        borderRadius: undefined
+      },
+      '&.Mui-disabled svg': {
+        color: grey[400]
+      }
+    },
+    sizeLarge: {
+      width: 36,
+      height: 36
+    },
+    sizeMedium: {
+      width: 26,
+      height: 26
+    },
+    sizeSmall: {
+      width: 24,
+      height: 24
+    }
+  }
+};

package/base/styles/mui/inputLabel.js

@@ -0,0 +1,13 @@
+import typography from "../typography";
+export const styles = {
+  styleOverrides: {
+    root: {
+      ...typography.bodyMdSemibold,
+      top: -17,
+      transform: 'none',
+      '&.MuiInputLabel-shrink': {
+        transform: 'none'
+      }
+    }
+  }
+};

package/base/styles/mui/list.js

@@ -0,0 +1,11 @@
+import typography from "../typography";
+import { grey } from "../../colors";
+export const styles = {
+  styleOverrides: {
+    root: {
+      fontFamily: typography.fontFamily,
+      ...typography.bodyMdMedium,
+      color: grey[800]
+    }
+  }
+};

package/base/styles/mui/menuItem.js

@@ -0,0 +1,83 @@
+import typography from "../typography";
+import { grey } from "../../colors";
+import borderRadius from "../borderRadius";
+export const styles = {
+  variants: [{
+    props: {
+      variant: 'normal'
+    },
+    style: {}
+  }, {
+    props: {
+      variant: 'placeholder'
+    },
+    style: {
+      '&': {
+        ...typography.bodySmSemibold,
+        color: grey[900]
+      },
+      '&.Mui-disabled': {
+        opacity: 1
+      }
+    }
+  }, {
+    props: {
+      variant: 'menusection'
+    },
+    style: {
+      '&': {
+        ...typography.bodySmSemibold,
+        color: grey[600],
+        height: 25
+      },
+      '&.Mui-disabled': {
+        opacity: 1
+      }
+    }
+  }, {
+    props: {
+      variant: 'spacer'
+    },
+    style: {
+      '&': {
+        height: 24
+      },
+      '&.Mui-disabled': {
+        opacity: 1
+      }
+    }
+  }, {
+    props: {
+      variant: 'menuitem'
+    },
+    style: {
+      '&': {
+        ...typography.bodyLgMedium,
+        color: grey[800],
+        height: 30
+      },
+      '&:hover, &.Mui-focusVisible, &.Mui-selected': {
+        borderRadius: borderRadius[1]
+      },
+      '&:hover, &.Mui-focusVisible': {
+        color: grey[900],
+        backgroundColor: grey[5]
+      },
+      '&.Mui-selected': {
+        ...typography.bodyLgSemibold,
+        color: grey[900],
+        backgroundColor: grey[10]
+      }
+    }
+  }],
+  defaultProps: {
+    variant: 'normal'
+  },
+  styleOverrides: {
+    root: {
+      '& .MuiListItemIcon-root': {
+        minWidth: 27
+      }
+    }
+  }
+};

package/base/styles/mui/outlinedInput.js

@@ -0,0 +1,53 @@
+import typography from "../typography";
+import borderRadius from "../borderRadius";
+import { grey, red } from "../../colors";
+export const styles = {
+  styleOverrides: {
+    root: ({
+      ownerState
+    }) => ({
+      height: 36,
+      backgroundColor: '#fff',
+      borderRadius: borderRadius[2],
+      '& .MuiInputBase-input::placeholder': {
+        color: grey[400],
+        opacity: 1
+      },
+      '& .MuiOutlinedInput-notchedOutline': {
+        borderColor: grey[300]
+      },
+      '&:hover .MuiOutlinedInput-notchedOutline': {
+        borderColor: !ownerState.disabled ? ownerState.error ? red[500] : grey[300] : 'unset',
+        backgroundColor: !ownerState.disabled ? grey[10] : 'unset'
+      },
+      '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+        borderWidth: 1,
+        borderColor: ownerState.error ? red[500] : grey[900],
+        backgroundColor: 'unset'
+      },
+      '&.Mui-disabled': {
+        backgroundColor: grey[150]
+      },
+      '&.Mui-disabled .MuiOutlinedInput-notchedOutline': {
+        borderColor: grey[200]
+      },
+      '&.Mui-Error .MuiOutlinedInput-notchedOutline': {
+        borderColor: red[500]
+      },
+      'fieldset legend': {
+        width: 0
+      }
+    }),
+    input: {
+      ...typography.bodyMdMedium,
+      fontSize: `${typography.bodyMdMedium.fontSize} !important`,
+      paddingLeft: 10,
+      paddingRight: 10,
+      '&.Mui-disabled': {
+        color: grey[500],
+        '-webkit-text-fill-color': grey[500]
+      }
+    },
+    sizeSmall: undefined
+  }
+};

package/base/styles/mui/paginationItem.js

@@ -0,0 +1,25 @@
+import { grey } from "../../colors";
+import typography from "../typography";
+export const styles = {
+  styleOverrides: {
+    root: {
+      fontFamily: typography.fontFamily,
+      ...typography.bodyLgMedium,
+      '&:hover': {
+        backgroundColor: grey[5]
+      },
+      '&.Mui-selected': {
+        color: grey[900],
+        backgroundColor: grey[10],
+        '&:hover': {
+          backgroundColor: grey[5]
+        }
+      }
+    },
+    previousNext: {
+      'svg': {
+        fontSize: 21
+      }
+    }
+  }
+};

package/base/styles/mui/paper.js

@@ -0,0 +1,8 @@
+import shadow from "../shadow";
+export const styles = {
+  styleOverrides: {
+    root: {
+      boxShadow: shadow[3]
+    }
+  }
+};

package/base/styles/mui/popover.js

@@ -0,0 +1,11 @@
+import borderRadius from "../borderRadius";
+import { grey } from "../../colors";
+export const styles = {
+  styleOverrides: {
+    paper: {
+      border: `1px solid ${grey[300]}`,
+      borderRadius: borderRadius[3],
+      marginTop: 3
+    }
+  }
+};

package/base/styles/mui/select.js

@@ -0,0 +1,11 @@
+import { grey } from "../../colors";
+export const styles = {
+  styleOverrides: {
+    icon: {
+      color: grey[600],
+      '&.Mui-disabled': {
+        color: grey[400]
+      }
+    }
+  }
+};

package/base/styles/mui/slider.js

@@ -0,0 +1,15 @@
+import typography from "../typography";
+export const styles = {
+  defaultProps: {
+    size: 'small'
+  },
+  styleOverrides: {
+    root: {
+      fontFamily: typography.fontFamily,
+      ...typography.bodySmMedium
+    },
+    markLabel: {
+      top: '25px'
+    }
+  }
+};

package/base/styles/mui/snackbar.js

@@ -0,0 +1,24 @@
+import typography from "../typography";
+import shadow from "../shadow";
+export const styles = {
+  defaultProps: {
+    anchorOrigin: {
+      vertical: 'top',
+      horizontal: 'right'
+    },
+    autoHideDuration: 3000
+  },
+  styleOverrides: {
+    root: ({
+      ownerState
+    }) => ({
+      fontFamily: typography.fontFamily,
+      ...typography.bodyLgSemibold,
+      // ...typography.bodyXlSemibold,
+      '.MuiPaper-root': {
+        // minWidth: 300,
+        boxShadow: shadow[3]
+      }
+    })
+  }
+};