@ebubekirylmaz/link-test 1.0.0

package/src/theme/overrides/components/avatar.js

@@ -0,0 +1,111 @@
+import { alpha } from "@mui/material/styles";
+import { avatarGroupClasses } from "@mui/material/AvatarGroup";
+
+// ----------------------------------------------------------------------
+
+const COLORS = [
+  "default",
+  "primary",
+  "secondary",
+  "info",
+  "success",
+  "warning",
+  "error",
+];
+
+const colorByName = (name) => {
+  const charAt = name.charAt(0).toLowerCase();
+
+  if (["a", "c", "f"].includes(charAt)) return "primary";
+  if (["e", "d", "h"].includes(charAt)) return "secondary";
+  if (["i", "k", "l"].includes(charAt)) return "info";
+  if (["m", "n", "p"].includes(charAt)) return "success";
+  if (["q", "s", "t"].includes(charAt)) return "warning";
+  if (["v", "x", "y"].includes(charAt)) return "error";
+  return "default";
+};
+
+// ----------------------------------------------------------------------
+
+export function avatar(theme) {
+  return {
+    MuiAvatar: {
+      variants: COLORS.map((color) =>
+        color === "default"
+          ? {
+              props: { color: "default" },
+              style: {
+                color: theme.palette.text.secondary,
+                backgroundColor: alpha(theme.palette.grey[500], 0.24),
+              },
+            }
+          : {
+              props: { color },
+              style: {
+                color: theme.palette[color].contrastText,
+                backgroundColor: theme.palette[color].main,
+              },
+            }
+      ),
+
+      styleOverrides: {
+        rounded: {
+          borderRadius: theme.shape.borderRadius * 1.5,
+        },
+        colorDefault: ({ ownerState }) => {
+          const color = colorByName(`${ownerState.alt}`);
+
+          return {
+            ...(!!ownerState.alt && {
+              ...(color !== "default"
+                ? {
+                    color: theme.palette[color].contrastText,
+                    backgroundColor: theme.palette[color].main,
+                  }
+                : {
+                    color: theme.palette.text.secondary,
+                    backgroundColor: alpha(theme.palette.grey[500], 0.24),
+                  }),
+            }),
+          };
+        },
+      },
+    },
+    MuiAvatarGroup: {
+      styleOverrides: {
+        root: ({ ownerState }) => ({
+          justifyContent: "flex-end",
+          ...(ownerState.variant === "compact" && {
+            width: 40,
+            height: 40,
+            position: "relative",
+            [`& .${avatarGroupClasses.avatar}`]: {
+              margin: 0,
+              width: 28,
+              height: 28,
+              position: "absolute",
+              "&:first-of-type": {
+                left: 0,
+                bottom: 0,
+                zIndex: 9,
+              },
+              "&:last-of-type": {
+                top: 0,
+                right: 0,
+              },
+            },
+          }),
+        }),
+        avatar: {
+          fontSize: 16,
+          fontWeight: theme.typography.fontWeightSemiBold,
+          "&:first-of-type": {
+            fontSize: 12,
+            color: theme.palette.primary.dark,
+            backgroundColor: theme.palette.primary.lighter,
+          },
+        },
+      },
+    },
+  };
+}

package/src/theme/overrides/components/backdrop.js

@@ -0,0 +1,18 @@
+import { alpha } from "@mui/material/styles";
+
+// ----------------------------------------------------------------------
+
+export function backdrop(theme) {
+  return {
+    MuiBackdrop: {
+      styleOverrides: {
+        root: {
+          backgroundColor: alpha(theme.palette.grey[900], 0.8),
+        },
+        invisible: {
+          background: "transparent",
+        },
+      },
+    },
+  };
+}

package/src/theme/overrides/components/badge.js

@@ -0,0 +1,90 @@
+import { badgeClasses } from "@mui/material/Badge";
+
+// ----------------------------------------------------------------------
+
+export function badge(theme) {
+  return {
+    MuiBadge: {
+      styleOverrides: {
+        dot: {
+          borderRadius: "50%",
+        },
+        root: ({ ownerState }) => {
+          const alway = ownerState.variant === "alway";
+
+          const online = ownerState.variant === "online";
+
+          const busy = ownerState.variant === "busy";
+
+          const offline = ownerState.variant === "offline";
+
+          const invisible = ownerState.variant === "invisible";
+
+          const baseStyles = {
+            [`&.${badgeClasses.invisible}`]: {
+              transform: "unset",
+            },
+            width: 10,
+            zIndex: 9,
+            padding: 0,
+            height: 10,
+            minWidth: "auto",
+            "&:before, &:after": {
+              content: "''",
+              borderRadius: 1,
+              backgroundColor: theme.palette.common.white,
+            },
+          };
+
+          return {
+            ...(online && {
+              [`& .${badgeClasses.badge}`]: {
+                ...baseStyles,
+                backgroundColor: theme.palette.success.main,
+              },
+            }),
+            ...(busy && {
+              [`& .${badgeClasses.badge}`]: {
+                ...baseStyles,
+                backgroundColor: theme.palette.error.main,
+                "&:before": { width: 6, height: 2 },
+              },
+            }),
+            ...(offline && {
+              [`& .${badgeClasses.badge}`]: {
+                ...baseStyles,
+                backgroundColor: theme.palette.text.disabled,
+                "&:before": {
+                  width: 6,
+                  height: 6,
+                  borderRadius: "50%",
+                },
+              },
+            }),
+            ...(alway && {
+              [`& .${badgeClasses.badge}`]: {
+                ...baseStyles,
+                backgroundColor: theme.palette.warning.main,
+                "&:before": {
+                  width: 2,
+                  height: 4,
+                  transform: "translateX(1px) translateY(-1px)",
+                },
+                "&:after": {
+                  width: 2,
+                  height: 4,
+                  transform: "translateY(1px) rotate(125deg)",
+                },
+              },
+            }),
+            ...(invisible && {
+              [`& .${badgeClasses.badge}`]: {
+                display: "none",
+              },
+            }),
+          };
+        },
+      },
+    },
+  };
+}

package/src/theme/overrides/components/breadcrumbs.js

@@ -0,0 +1,21 @@
+// ----------------------------------------------------------------------
+
+export function breadcrumbs(theme) {
+  return {
+    MuiBreadcrumbs: {
+      styleOverrides: {
+        separator: {
+          marginLeft: theme.spacing(2),
+          marginRight: theme.spacing(2),
+        },
+        li: {
+          display: "inline-flex",
+          margin: theme.spacing(0.25, 0),
+          "& > *": {
+            ...theme.typography.body2,
+          },
+        },
+      },
+    },
+  };
+}

package/src/theme/overrides/components/button-group.js

@@ -0,0 +1,90 @@
+import { alpha } from "@mui/material/styles";
+import { buttonGroupClasses } from "@mui/material/ButtonGroup";
+
+// ----------------------------------------------------------------------
+
+const COLORS = ["primary", "secondary", "info", "success", "warning", "error"];
+
+// ----------------------------------------------------------------------
+
+export function buttonGroup(theme) {
+  const rootStyles = (ownerState) => {
+    const inheritColor = ownerState.color === "inherit";
+
+    const containedVariant = ownerState.variant === "contained";
+
+    const outlinedVariant = ownerState.variant === "outlined";
+
+    const textVariant = ownerState.variant === "text";
+
+    const softVariant = ownerState.variant === "soft";
+
+    const horizontalOrientation = ownerState.orientation === "horizontal";
+
+    const verticalOrientation = ownerState.orientation === "vertical";
+
+    const defaultStyle = {
+      [`& .${buttonGroupClasses.grouped}`]: {
+        "&:not(:last-of-type)": {
+          ...(!outlinedVariant && {
+            borderStyle: "solid",
+            ...(inheritColor && {
+              borderColor: alpha(theme.palette.grey[500], 0.32),
+            }),
+            // HORIZONTAL
+            ...(horizontalOrientation && {
+              borderWidth: "0px 1px 0px 0px",
+            }),
+            // VERTICAL
+            ...(verticalOrientation && {
+              borderWidth: "0px 0px 1px 0px",
+            }),
+          }),
+        },
+      },
+    };
+
+    const colorStyle = COLORS.map((color) => ({
+      [`& .${buttonGroupClasses.grouped}`]: {
+        "&:not(:last-of-type)": {
+          ...(!outlinedVariant && {
+            ...(ownerState.color === color && {
+              // CONTAINED
+              ...(containedVariant && {
+                borderColor: alpha(theme.palette[color].dark, 0.48),
+              }),
+              // TEXT
+              ...(textVariant && {
+                borderColor: alpha(theme.palette[color].main, 0.48),
+              }),
+              // SOFT
+              ...(softVariant && {
+                borderColor: alpha(theme.palette[color].dark, 0.24),
+              }),
+            }),
+          }),
+        },
+      },
+    }));
+
+    const disabledState = {
+      [`& .${buttonGroupClasses.grouped}`]: {
+        [`&.${buttonGroupClasses.disabled}`]: {
+          "&:not(:last-of-type)": {
+            borderColor: theme.palette.action.disabledBackground,
+          },
+        },
+      },
+    };
+
+    return [defaultStyle, ...colorStyle, disabledState];
+  };
+
+  return {
+    MuiButtonGroup: {
+      styleOverrides: {
+        root: ({ ownerState }) => rootStyles(ownerState),
+      },
+    },
+  };
+}

package/src/theme/overrides/components/button.js

@@ -0,0 +1,145 @@
+import { alpha } from "@mui/material/styles";
+import { buttonClasses } from "@mui/material/Button";
+
+// ----------------------------------------------------------------------
+
+const COLORS = ["primary", "secondary", "info", "success", "warning", "error"];
+
+// ----------------------------------------------------------------------
+
+export function button(theme) {
+  const lightMode = theme.palette.mode === "light";
+
+  const rootStyles = (ownerState) => {
+    const inheritColor = ownerState.color === "inherit";
+
+    const containedVariant = ownerState.variant === "contained";
+
+    const outlinedVariant = ownerState.variant === "outlined";
+
+    const textVariant = ownerState.variant === "text";
+
+    const softVariant = ownerState.variant === "soft";
+
+    const smallSize = ownerState.size === "small";
+
+    const mediumSize = ownerState.size === "medium";
+
+    const largeSize = ownerState.size === "large";
+
+    const defaultStyle = {
+      ...(inheritColor && {
+        // CONTAINED
+        ...(containedVariant && {
+          color: lightMode
+            ? theme.palette.common.white
+            : theme.palette.grey[800],
+          backgroundColor: lightMode
+            ? theme.palette.grey[800]
+            : theme.palette.common.white,
+          "&:hover": {
+            backgroundColor: lightMode
+              ? theme.palette.grey[700]
+              : theme.palette.grey[400],
+          },
+        }),
+        // OUTLINED
+        ...(outlinedVariant && {
+          borderColor: alpha(theme.palette.grey[500], 0.32),
+          "&:hover": {
+            backgroundColor: theme.palette.action.hover,
+          },
+        }),
+        // TEXT
+        ...(textVariant && {
+          "&:hover": {
+            backgroundColor: theme.palette.action.hover,
+          },
+        }),
+        // SOFT
+        ...(softVariant && {
+          color: theme.palette.text.primary,
+          backgroundColor: alpha(theme.palette.grey[500], 0.08),
+          "&:hover": {
+            backgroundColor: alpha(theme.palette.grey[500], 0.24),
+          },
+        }),
+      }),
+      ...(outlinedVariant && {
+        "&:hover": {
+          borderColor: "currentColor",
+          boxShadow: "0 0 0 0.5px currentColor",
+        },
+      }),
+    };
+
+    const colorStyle = COLORS.map((color) => ({
+      ...(ownerState.color === color && {
+        // CONTAINED
+        ...(containedVariant && {
+          "&:hover": {
+            boxShadow: theme.customShadows[color],
+          },
+        }),
+        // SOFT
+        ...(softVariant && {
+          color: theme.palette[color][lightMode ? "dark" : "light"],
+          backgroundColor: alpha(theme.palette[color].main, 0.16),
+          "&:hover": {
+            backgroundColor: alpha(theme.palette[color].main, 0.32),
+          },
+        }),
+      }),
+    }));
+
+    const disabledState = {
+      [`&.${buttonClasses.disabled}`]: {
+        // SOFT
+        ...(softVariant && {
+          backgroundColor: theme.palette.action.disabledBackground,
+        }),
+      },
+    };
+
+    const size = {
+      ...(smallSize && {
+        height: 30,
+        fontSize: 13,
+        paddingLeft: 8,
+        paddingRight: 8,
+        ...(textVariant && {
+          paddingLeft: 4,
+          paddingRight: 4,
+        }),
+      }),
+      ...(mediumSize && {
+        paddingLeft: 12,
+        paddingRight: 12,
+        ...(textVariant && {
+          paddingLeft: 8,
+          paddingRight: 8,
+        }),
+      }),
+      ...(largeSize && {
+        height: 48,
+        fontSize: 15,
+        paddingLeft: 16,
+        paddingRight: 16,
+        ...(textVariant && {
+          paddingLeft: 10,
+          paddingRight: 10,
+        }),
+      }),
+    };
+
+    return [defaultStyle, ...colorStyle, disabledState, size];
+  };
+
+  return {
+    MuiButton: {
+      styleOverrides: {
+        root: ({ ownerState }) => rootStyles(ownerState),
+      },
+    },
+  };
+}

package/src/theme/overrides/components/card.js

@@ -0,0 +1,30 @@
+// ----------------------------------------------------------------------
+
+export function card(theme) {
+  return {
+    MuiCard: {
+      styleOverrides: {
+        root: {
+          position: "relative",
+          boxShadow: theme.customShadows.card,
+          borderRadius: theme.shape.borderRadius * 2,
+          zIndex: 0, // Fix Safari overflow: hidden with border radius
+        },
+      },
+    },
+    MuiCardHeader: {
+      styleOverrides: {
+        root: {
+          padding: theme.spacing(3, 3, 0),
+        },
+      },
+    },
+    MuiCardContent: {
+      styleOverrides: {
+        root: {
+          padding: theme.spacing(3),
+        },
+      },
+    },
+  };
+}

package/src/theme/overrides/components/checkbox.js

@@ -0,0 +1,13 @@
+// ----------------------------------------------------------------------
+
+export function checkbox(theme) {
+  return {
+    MuiCheckbox: {
+      styleOverrides: {
+        root: {
+          padding: theme.spacing(1),
+        },
+      },
+    },
+  };
+}

package/src/theme/overrides/components/chip.js

@@ -0,0 +1,129 @@
+import { alpha } from "@mui/material/styles";
+import { chipClasses } from "@mui/material/Chip";
+
+// ----------------------------------------------------------------------
+
+const COLORS = ["primary", "secondary", "info", "success", "warning", "error"];
+
+// ----------------------------------------------------------------------
+
+export function chip(theme) {
+  const lightMode = theme.palette.mode === "light";
+
+  const rootStyles = (ownerState) => {
+    const defaultColor = ownerState.color === "default";
+
+    const filledVariant = ownerState.variant === "filled";
+
+    const outlinedVariant = ownerState.variant === "outlined";
+
+    const softVariant = ownerState.variant === "soft";
+
+    const defaultStyle = {
+      [`& .${chipClasses.deleteIcon}`]: {
+        opacity: 0.48,
+        color: "currentColor",
+        "&:hover": {
+          opacity: 1,
+          color: "currentColor",
+        },
+      },
+
+      ...(defaultColor && {
+        [`& .${chipClasses.avatar}`]: {
+          color: theme.palette.text.primary,
+        },
+        // FILLED
+        ...(filledVariant && {
+          color: lightMode
+            ? theme.palette.common.white
+            : theme.palette.grey[800],
+          backgroundColor: theme.palette.text.primary,
+          "&:hover": {
+            backgroundColor: lightMode
+              ? theme.palette.grey[700]
+              : theme.palette.grey[100],
+          },
+          [`& .${chipClasses.icon}`]: {
+            color: lightMode
+              ? theme.palette.common.white
+              : theme.palette.grey[800],
+          },
+        }),
+        // OUTLINED
+        ...(outlinedVariant && {
+          border: `solid 1px ${alpha(theme.palette.grey[500], 0.32)}`,
+        }),
+        // SOFT
+        ...(softVariant && {
+          color: theme.palette.text.primary,
+          backgroundColor: alpha(theme.palette.grey[500], 0.16),
+          "&:hover": {
+            backgroundColor: alpha(theme.palette.grey[500], 0.32),
+          },
+        }),
+      }),
+    };
+
+    const colorStyle = COLORS.map((color) => ({
+      ...(ownerState.color === color && {
+        [`& .${chipClasses.avatar}`]: {
+          color: theme.palette[color].lighter,
+          backgroundColor: theme.palette[color].dark,
+        },
+        // SOFT
+        ...(softVariant && {
+          color: theme.palette[color][lightMode ? "dark" : "light"],
+          backgroundColor: alpha(theme.palette[color].main, 0.16),
+          "&:hover": {
+            backgroundColor: alpha(theme.palette[color].main, 0.32),
+          },
+        }),
+      }),
+    }));
+
+    const disabledState = {
+      [`&.${chipClasses.disabled}`]: {
+        opacity: 1,
+        color: theme.palette.action.disabled,
+        [`& .${chipClasses.icon}`]: {
+          color: theme.palette.action.disabled,
+        },
+        [`& .${chipClasses.avatar}`]: {
+          color: theme.palette.action.disabled,
+          backgroundColor: theme.palette.action.disabledBackground,
+        },
+        // FILLED
+        ...(filledVariant && {
+          backgroundColor: theme.palette.action.disabledBackground,
+        }),
+        // OUTLINED
+        ...(outlinedVariant && {
+          borderColor: theme.palette.action.disabledBackground,
+        }),
+        // SOFT
+        ...(softVariant && {
+          backgroundColor: theme.palette.action.disabledBackground,
+        }),
+      },
+    };
+
+    return [
+      defaultStyle,
+      ...colorStyle,
+      disabledState,
+      {
+        fontWeight: 500,
+        borderRadius: theme.shape.borderRadius,
+      },
+    ];
+  };
+
+  return {
+    MuiChip: {
+      styleOverrides: {
+        root: ({ ownerState }) => rootStyles(ownerState),
+      },
+    },
+  };
+}

package/src/theme/overrides/components/css-baseline.js

@@ -0,0 +1,48 @@
+// ----------------------------------------------------------------------
+
+export function cssBaseline(theme) {
+  return {
+    MuiCssBaseline: {
+      styleOverrides: {
+        "*": {
+          boxSizing: "border-box",
+        },
+        html: {
+          margin: 0,
+          padding: 0,
+          width: "100%",
+          height: "100%",
+          WebkitOverflowScrolling: "touch",
+        },
+        body: {
+          margin: 0,
+          padding: 0,
+          width: "100%",
+          height: "100%",
+        },
+        "#root, #__next": {
+          width: "100%",
+          height: "100%",
+        },
+        input: {
+          "&[type=number]": {
+            MozAppearance: "textfield",
+            "&::-webkit-outer-spin-button": {
+              margin: 0,
+              WebkitAppearance: "none",
+            },
+            "&::-webkit-inner-spin-button": {
+              margin: 0,
+              WebkitAppearance: "none",
+            },
+          },
+        },
+        img: {
+          maxWidth: "100%",
+          display: "inline-block",
+          verticalAlign: "bottom",
+        },
+      },
+    },
+  };
+}