@nethru/ui 1.0.81 → 2.0.0

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]
+      }
+    })
+  }
+};

package/base/styles/mui/switch.js

@@ -0,0 +1,33 @@
+import { blue, grey } from "../../colors";
+export const styles = {
+  styleOverrides: {
+    root: {
+      '& + .MuiFormControlLabel-label': {
+        margin: -5
+      }
+    },
+    switchBase: ({
+      ownerState
+    }) => ({
+      ':hover, &.Mui-focusVisible': {
+        backgroundColor: grey[5]
+      },
+      '&.Mui-checked + .MuiSwitch-track': {
+        backgroundColor: blue[100],
+        opacity: 1
+      },
+      '&.Mui-disabled .MuiSwitch-thumb': {
+        backgroundColor: grey[50],
+        opacity: 1
+      },
+      '&.Mui-disabled + .MuiSwitch-track': {
+        backgroundColor: ownerState.checked ? blue[100] : grey[150],
+        opacity: 1
+      }
+    }),
+    track: {
+      backgroundColor: grey[300],
+      opacity: 1
+    }
+  }
+};

package/base/styles/mui/tab.js

@@ -0,0 +1,23 @@
+import typography from "../typography";
+import { grey } from "../../colors";
+export const styles = {
+  styleOverrides: {
+    root: {
+      fontFamily: typography.fontFamily,
+      ...typography.bodyXlMedium,
+      color: grey[600],
+      '&:hover, &.Mui-focusVisible': {
+        color: grey[900]
+      },
+      '&.Mui-focusVisible.Mui-selected': {
+        backgroundColor: grey[5]
+      },
+      '&.Mui-selected': {
+        ...typography.headline2
+      },
+      minWidth: 'unset',
+      minHeight: 40,
+      padding: 0
+    }
+  }
+};

package/base/styles/mui/tablePagination.js

@@ -0,0 +1,8 @@
+import { grey } from "../../colors";
+export const styles = {
+  styleOverrides: {
+    selectLabel: {
+      color: grey[700]
+    }
+  }
+};

package/base/styles/mui/tabs.js

@@ -0,0 +1,20 @@
+export const styles = {
+  styleOverrides: {
+    root: {
+      minHeight: 42
+    },
+    flexContainer: {
+      gap: 16
+    },
+    flexContainerVertical: ({
+      ownerState,
+      theme
+    }) => ({
+      gap: 16,
+      '.MuiTab-root': {
+        minHeight: 'unset',
+        paddingRight: theme.spacing(2)
+      }
+    })
+  }
+};

package/base/styles/mui/textField.js

@@ -0,0 +1,11 @@
+export const styles = {
+  styleOverrides: {
+    root: ({
+      ownerState
+    }) => {
+      return ownerState.label && {
+        marginTop: 17
+      };
+    }
+  }
+};

package/base/styles/mui/toggleButton.js

@@ -0,0 +1,96 @@
+import { blue, grey } from "../../colors";
+import typography from "../typography";
+import borderRadius from "../borderRadius";
+export const styles = {
+  variants: [{
+    props: {
+      variant: 'normal'
+    },
+    style: {}
+  }, {
+    props: {
+      variant: 'apps'
+    },
+    style: {
+      '&': {
+        borderColor: 'transparent'
+      },
+      '&.Mui-selected': {
+        backgroundColor: grey[10],
+        borderColor: grey[700]
+      }
+    }
+  }, {
+    props: {
+      variant: 'gnb'
+    },
+    style: {
+      '&.Mui-selected': {
+        backgroundColor: grey[10],
+        borderColor: grey[700]
+      }
+    }
+  }, {
+    props: {
+      variant: 'lnb'
+    },
+    style: {
+      '&': {
+        borderColor: 'transparent'
+      },
+      '&.Mui-selected': {
+        backgroundColor: grey[10]
+      }
+    }
+  }],
+  defaultProps: {
+    variant: 'normal'
+  },
+  styleOverrides: {
+    root: ({
+      ownerState,
+      theme
+    }) => ({
+      fontFamily: typography.fontFamily,
+      ...typography.bodyMdMedium,
+      color: grey[600],
+      borderColor: grey[300],
+      borderRadius: borderRadius[2],
+      ':hover, &.Mui-focusVisible': {
+        backgroundColor: grey[5]
+      },
+      '&:active': {
+        backgroundColor: grey[10]
+      },
+      '&.Mui-selected': {
+        color: theme.palette.info.main,
+        backgroundColor: blue[50],
+        ':hover, &.Mui-focusVisible': {
+          backgroundColor: blue[100]
+        },
+        '&.MuiToggleButtonGroup-grouped.MuiToggleButtonGroup-middleButton': {
+          borderLeftColor: grey[300]
+        }
+      },
+      '&.Mui-disabled': {
+        color: grey[400],
+        borderColor: grey[300]
+      }
+    }),
+    sizeLarge: undefined,
+    sizeMedium: ({
+      ownerState,
+      theme
+    }) => ({
+      width: ownerState.variant === 'apps' || ownerState.variant === 'gnb' ? 36 : undefined,
+      height: 36
+    }),
+    sizeSmall: ({
+      ownerState,
+      theme
+    }) => ({
+      width: ownerState.variant === 'apps' || ownerState.variant === 'gnb' ? 26 : undefined,
+      height: 26
+    })
+  }
+};

package/base/styles/mui/tooltip.js

@@ -0,0 +1,22 @@
+import typography from "../typography";
+import shadow from "../shadow";
+import { grey } from "../../colors";
+export const styles = {
+  defaultProps: {
+    arrow: true
+  },
+  styleOverrides: {
+    root: {
+      fontFamily: typography.fontFamily,
+      ...typography.bodySmMedium
+    },
+    tooltip: {
+      color: grey[900],
+      backgroundColor: '#fff',
+      boxShadow: shadow[4]
+    },
+    arrow: {
+      color: '#fff'
+    }
+  }
+};

package/base/styles/palette.js

@@ -0,0 +1,40 @@
+import { blue, green, grey, lime, orange, red } from "../colors";
+const palette = {
+  primary: {
+    main: grey[900],
+    contrastText: '#fff'
+  },
+  info: {
+    main: blue[500],
+    contrastText: '#fff'
+  },
+  warning: {
+    main: orange[500],
+    contrastText: '#fff'
+  },
+  error: {
+    main: red[500],
+    contrastText: '#fff'
+  },
+  crud: {
+    main: blue[50],
+    contrastText: blue[500]
+  },
+  blue: {
+    main: blue[500],
+    contrastText: blue[700]
+  },
+  green: {
+    main: green[500],
+    contrastText: green[700]
+  },
+  orange: {
+    main: orange[500],
+    contrastText: orange[700]
+  },
+  lime: {
+    main: lime[500],
+    contrastText: lime[700]
+  }
+};
+export default palette;

package/base/styles/shadow.js

@@ -0,0 +1,8 @@
+const shadow = {
+  1: '0px 18px 20px -20px rgba(90, 90, 90, 0.20)',
+  2: '1px 1px 8px 1px rgba(101, 101, 101, 0.20)',
+  3: '0px 5px 10px 0px rgba(101, 101, 101, 0.16),' + '0px 3px 4px -1px rgba(101, 101, 101, 0.08)',
+  4: '0px 2px 10px 0px rgba(0, 0, 0, 0.14),' + '0px 1px 5px -1px rgba(0, 0, 0, 0.20)',
+  5: '0px 20px 31px 3px rgba(0, 0, 0, 0.14),' + '0px 10px 13px -6px rgba(0, 0, 0, 0.20)'
+};
+export default shadow;