@ebubekirylmaz/link-test 1.0.0

package/src/theme/css.js

@@ -0,0 +1,152 @@
+import { alpha } from "@mui/material/styles";
+import { autocompleteClasses } from "@mui/material/Autocomplete";
+import { checkboxClasses } from "@mui/material/Checkbox";
+import { dividerClasses } from "@mui/material/Divider";
+import { menuItemClasses } from "@mui/material/MenuItem";
+
+// ----------------------------------------------------------------------
+
+export const paper = ({ theme, bgcolor, dropdown }) => ({
+  ...bgBlur({
+    blur: 20,
+    opacity: 0.9,
+    color: theme.palette.background.paper,
+    ...(!!bgcolor && {
+      color: bgcolor,
+    }),
+  }),
+  backgroundImage: "url(/assets/cyan-blur.png), url(/assets/red-blur.png)",
+  backgroundRepeat: "no-repeat, no-repeat",
+  backgroundPosition: "top right, left bottom",
+  backgroundSize: "50%, 50%",
+  ...(theme.direction === "rtl" && {
+    backgroundPosition: "top left, right bottom",
+  }),
+  ...(dropdown && {
+    padding: theme.spacing(0.5),
+    boxShadow: theme.customShadows.dropdown,
+    borderRadius: theme.shape.borderRadius * 1.25,
+  }),
+});
+
+// ----------------------------------------------------------------------
+
+export const menuItem = (theme) => ({
+  ...theme.typography.body2,
+  padding: theme.spacing(0.75, 1),
+  borderRadius: theme.shape.borderRadius * 0.75,
+  "&:not(:last-of-type)": {
+    marginBottom: 4,
+  },
+  [`&.${menuItemClasses.selected}`]: {
+    fontWeight: theme.typography.fontWeightSemiBold,
+    backgroundColor: theme.palette.action.selected,
+    "&:hover": {
+      backgroundColor: theme.palette.action.hover,
+    },
+  },
+  [`& .${checkboxClasses.root}`]: {
+    padding: theme.spacing(0.5),
+    marginLeft: theme.spacing(-0.5),
+    marginRight: theme.spacing(0.5),
+  },
+  [`&.${autocompleteClasses.option}[aria-selected="true"]`]: {
+    backgroundColor: theme.palette.action.selected,
+    "&:hover": {
+      backgroundColor: theme.palette.action.hover,
+    },
+  },
+  [`&+.${dividerClasses.root}`]: {
+    margin: theme.spacing(0.5, 0),
+  },
+});
+
+// ----------------------------------------------------------------------
+
+export function bgBlur(props) {
+  const color = props?.color || "#000000";
+  const blur = props?.blur || 6;
+  const opacity = props?.opacity || 0.8;
+  const imgUrl = props?.imgUrl;
+
+  if (imgUrl) {
+    return {
+      position: "relative",
+      backgroundImage: `url(${imgUrl})`,
+      "&:before": {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        zIndex: 9,
+        content: '""',
+        width: "100%",
+        height: "100%",
+        backdropFilter: `blur(${blur}px)`,
+        WebkitBackdropFilter: `blur(${blur}px)`,
+        backgroundColor: alpha(color, opacity),
+      },
+    };
+  }
+
+  return {
+    backdropFilter: `blur(${blur}px)`,
+    WebkitBackdropFilter: `blur(${blur}px)`,
+    backgroundColor: alpha(color, opacity),
+  };
+}
+
+// ----------------------------------------------------------------------
+
+export function bgGradient(props) {
+  const direction = props?.direction || "to bottom";
+  const startColor = props?.startColor;
+  const endColor = props?.endColor;
+  const imgUrl = props?.imgUrl;
+  const color = props?.color;
+
+  if (imgUrl) {
+    return {
+      background: `linear-gradient(${direction}, ${startColor || color}, ${
+        endColor || color
+      }), url(${imgUrl})`,
+      backgroundSize: "cover",
+      backgroundRepeat: "no-repeat",
+      backgroundPosition: "center center",
+    };
+  }
+
+  return {
+    background: `linear-gradient(${direction}, ${startColor}, ${endColor})`,
+  };
+}
+
+// ----------------------------------------------------------------------
+
+export function textGradient(value) {
+  return {
+    background: `-webkit-linear-gradient(${value})`,
+    WebkitBackgroundClip: "text",
+    WebkitTextFillColor: "transparent",
+  };
+}
+
+// ----------------------------------------------------------------------
+
+export const hideScroll = {
+  x: {
+    msOverflowStyle: "none",
+    scrollbarWidth: "none",
+    overflowX: "scroll",
+    "&::-webkit-scrollbar": {
+      display: "none",
+    },
+  },
+  y: {
+    msOverflowStyle: "none",
+    scrollbarWidth: "none",
+    overflowY: "scroll",
+    "&::-webkit-scrollbar": {
+      display: "none",
+    },
+  },
+};

package/src/theme/custom-shadows.js

@@ -0,0 +1,47 @@
+import { alpha } from "@mui/material/styles";
+
+import {
+  common,
+  error,
+  grey,
+  info,
+  primary,
+  secondary,
+  success,
+  warning,
+} from "./palette";
+
+// ----------------------------------------------------------------------
+
+export function customShadows(mode) {
+  const color = mode === "light" ? grey[500] : common.black;
+
+  const transparent = alpha(color, 0.16);
+
+  return {
+    z1: `0 1px 2px 0 ${transparent}`,
+    z4: `0 4px 8px 0 ${transparent}`,
+    z8: `0 8px 16px 0 ${transparent}`,
+    z12: `0 12px 24px -4px ${transparent}`,
+    z16: `0 16px 32px -4px ${transparent}`,
+    z20: `0 20px 40px -4px ${transparent}`,
+    z24: `0 24px 48px 0 ${transparent}`,
+    //
+    card: `0 0 2px 0 ${alpha(color, 0.2)}, 0 12px 24px -4px ${alpha(
+      color,
+      0.12
+    )}`,
+    dropdown: `0 0 2px 0 ${alpha(color, 0.24)}, -20px 20px 40px -4px ${alpha(
+      color,
+      0.24
+    )}`,
+    dialog: `-40px 40px 80px -8px ${alpha(common.black, 0.24)}`,
+    //
+    primary: `0 8px 16px 0 ${alpha(primary.main, 0.24)}`,
+    info: `0 8px 16px 0 ${alpha(info.main, 0.24)}`,
+    secondary: `0 8px 16px 0 ${alpha(secondary.main, 0.24)}`,
+    success: `0 8px 16px 0 ${alpha(success.main, 0.24)}`,
+    warning: `0 8px 16px 0 ${alpha(warning.main, 0.24)}`,
+    error: `0 8px 16px 0 ${alpha(error.main, 0.24)}`,
+  };
+}

package/src/theme/index.jsx

@@ -0,0 +1,100 @@
+"use client";
+
+import CssBaseline from "@mui/material/CssBaseline";
+import RTL from "./options/right-to-left";
+import { componentsOverrides } from "./overrides";
+import { createContrast } from "./options/contrast";
+import { createPresets } from "./options/presets";
+import { customShadows } from "./custom-shadows";
+import merge from "lodash/merge";
+import { palette } from "./palette";
+import { shadows } from "./shadows";
+import { typography } from "./typography";
+import { useSettingsContext } from "../components/settings";
+
+import {
+  ThemeProvider as MuiThemeProvider,
+  createTheme,
+} from "@mui/material/styles";
+import React, { useMemo } from "react";
+
+export default function ThemeProvider({ children }) {
+  const settings = useSettingsContext();
+  const contrast = createContrast(settings.themeContrast, settings.themeMode);
+  const presets = createPresets(settings.themeColorPresets);
+
+  const memoizedValue = useMemo(
+    () => ({
+      palette: {
+        ...palette(settings.themeMode),
+        ...presets.palette,
+        ...contrast.palette,
+      },
+      customShadows: {
+        ...customShadows(settings.themeMode),
+        ...presets.customShadows,
+      },
+      direction: settings.themeDirection,
+      shadows: shadows(settings.themeMode),
+      shape: { borderRadius: 8 },
+      typography,
+    }),
+    [
+      settings.themeMode,
+      settings.themeDirection,
+      presets.palette,
+      presets.customShadows,
+      contrast.palette,
+    ]
+  );
+
+  const theme = createTheme(memoizedValue);
+
+  theme.components = merge(componentsOverrides(theme), contrast.components, {
+    MuiCssBaseline: {
+      styleOverrides: {
+        body: {
+          scrollbarColor:
+            theme.palette.mode === "dark"
+              ? `${theme.palette.grey[700]} ${theme.palette.background.default}`
+              : `${theme.palette.grey[500]} ${theme.palette.background.default}`,
+          scrollbarWidth: "thin",
+
+          "&::-webkit-scrollbar": {
+            width: 10,
+            height: 10,
+          },
+
+          "&::-webkit-scrollbar-track": {
+            backgroundColor: theme.palette.background.default,
+          },
+
+          "&::-webkit-scrollbar-thumb": {
+            backgroundColor:
+              theme.palette.mode === "dark"
+                ? theme.palette.grey[700]
+                : theme.palette.grey[500],
+            borderRadius: 8,
+            border: `2px solid ${theme.palette.background.default}`,
+          },
+
+          "&::-webkit-scrollbar-thumb:hover": {
+            backgroundColor:
+              theme.palette.mode === "dark"
+                ? theme.palette.grey[600]
+                : theme.palette.grey[700],
+          },
+        },
+      },
+    },
+  });
+
+  return (
+    <MuiThemeProvider theme={theme}>
+      <RTL themeDirection={settings.themeDirection}>
+        <CssBaseline />
+        {children}
+      </RTL>
+    </MuiThemeProvider>
+  );
+}

package/src/theme/options/contrast.js

@@ -0,0 +1,34 @@
+import { customShadows } from "../custom-shadows";
+import { grey } from "../palette";
+
+// ----------------------------------------------------------------------
+
+export function createContrast(contrast, mode) {
+  const theme = {
+    ...(contrast === "bold" &&
+      mode === "light" && {
+        palette: {
+          background: {
+            default: grey[200],
+          },
+        },
+      }),
+  };
+
+  const components = {
+    ...(contrast === "bold" && {
+      MuiCard: {
+        styleOverrides: {
+          root: {
+            boxShadow: customShadows(mode).z1,
+          },
+        },
+      },
+    }),
+  };
+
+  return {
+    ...theme,
+    components,
+  };
+}

package/src/theme/options/presets.js

@@ -0,0 +1,89 @@
+import { alpha } from "@mui/material/styles";
+
+import { grey, primary } from "../palette";
+
+// ----------------------------------------------------------------------
+
+export function createPresets(preset) {
+  const primaryColor = getPrimary(preset);
+
+  const theme = {
+    palette: {
+      primary: primaryColor,
+    },
+    customShadows: {
+      primary: `0 8px 16px 0 ${alpha(`${primaryColor?.main}`, 0.24)}`,
+    },
+  };
+
+  return {
+    ...theme,
+  };
+}
+
+// ----------------------------------------------------------------------
+
+const cyan = {
+  lighter: "#CCF4FE",
+  light: "#68CDF9",
+  main: "#078DEE",
+  dark: "#0351AB",
+  darker: "#012972",
+  contrastText: "#FFFFFF",
+};
+
+const purple = {
+  lighter: "#EBD6FD",
+  light: "#B985F4",
+  main: "#7635dc",
+  dark: "#431A9E",
+  darker: "#200A69",
+  contrastText: "#FFFFFF",
+};
+
+const blue = {
+  lighter: "#D1E9FC",
+  light: "#76B0F1",
+  main: "#2065D1",
+  dark: "#103996",
+  darker: "#061B64",
+  contrastText: "#FFFFFF",
+};
+
+const orange = {
+  lighter: "#FEF4D4",
+  light: "#FED680",
+  main: "#fda92d",
+  dark: "#B66816",
+  darker: "#793908",
+  contrastText: grey[800],
+};
+
+const red = {
+  lighter: "#FFE3D5",
+  light: "#FFC1AC",
+  main: "#FF3030",
+  dark: "#B71833",
+  darker: "#7A0930",
+  contrastText: "#FFFFFF",
+};
+
+export const presetOptions = [
+  { name: "default", value: primary.main },
+  { name: "cyan", value: cyan.main },
+  { name: "purple", value: purple.main },
+  { name: "blue", value: blue.main },
+  { name: "orange", value: orange.main },
+  { name: "red", value: red.main },
+];
+
+export function getPrimary(preset) {
+  return {
+    default: primary,
+    cyan,
+    purple,
+    blue,
+    orange,
+    red,
+  }[preset];
+}

package/src/theme/options/right-to-left.jsx

@@ -0,0 +1,26 @@
+import { CacheProvider } from "@emotion/react";
+import React from "react";
+import createCache from "@emotion/cache";
+import rtlPlugin from "stylis-plugin-rtl";
+import { useEffect } from "react";
+
+// ----------------------------------------------------------------------
+
+export default function RTL({ children, themeDirection }) {
+  useEffect(() => {
+    document.dir = themeDirection;
+  }, [themeDirection]);
+
+  const cacheRtl = createCache({
+    key: "rtl",
+    prepend: true,
+    // https://github.com/styled-components/stylis-plugin-rtl/issues/35
+    stylisPlugins: [rtlPlugin],
+  });
+
+  if (themeDirection === "rtl") {
+    return <CacheProvider value={cacheRtl}>{children}</CacheProvider>;
+  }
+
+  return <>{children}</>;
+}

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

@@ -0,0 +1,43 @@
+import { accordionClasses } from "@mui/material/Accordion";
+import { accordionSummaryClasses } from "@mui/material/AccordionSummary";
+import { typographyClasses } from "@mui/material/Typography";
+
+// ----------------------------------------------------------------------
+
+export function accordion(theme) {
+  return {
+    MuiAccordion: {
+      styleOverrides: {
+        root: {
+          backgroundColor: "transparent",
+          [`&.${accordionClasses.expanded}`]: {
+            boxShadow: theme.customShadows.z8,
+            borderRadius: theme.shape.borderRadius,
+            backgroundColor: theme.palette.background.paper,
+          },
+          [`&.${accordionClasses.disabled}`]: {
+            backgroundColor: "transparent",
+          },
+        },
+      },
+    },
+    MuiAccordionSummary: {
+      styleOverrides: {
+        root: {
+          paddingLeft: theme.spacing(2),
+          paddingRight: theme.spacing(1),
+          [`&.${accordionSummaryClasses.disabled}`]: {
+            opacity: 1,
+            color: theme.palette.action.disabled,
+            [`& .${typographyClasses.root}`]: {
+              color: "inherit",
+            },
+          },
+        },
+        expandIconWrapper: {
+          color: "inherit",
+        },
+      },
+    },
+  };
+}

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

@@ -0,0 +1,69 @@
+import { alertClasses } from "@mui/material/Alert";
+import { alpha } from "@mui/material/styles";
+
+// ----------------------------------------------------------------------
+
+const COLORS = ["info", "success", "warning", "error"];
+
+// ----------------------------------------------------------------------
+
+export function alert(theme) {
+  const lightMode = theme.palette.mode === "light";
+
+  const rootStyles = (ownerState) => {
+    const standardVariant = ownerState.variant === "standard";
+
+    const filledVariant = ownerState.variant === "filled";
+
+    const outlinedVariant = ownerState.variant === "outlined";
+
+    const colorStyle = COLORS.map((color) => ({
+      ...(ownerState.severity === color && {
+        // STANDARD
+        ...(standardVariant && {
+          color: theme.palette[color][lightMode ? "darker" : "lighter"],
+          backgroundColor:
+            theme.palette[color][lightMode ? "lighter" : "darker"],
+          [`& .${alertClasses.icon}`]: {
+            color: theme.palette[color][lightMode ? "main" : "light"],
+          },
+        }),
+        // FILLED
+        ...(filledVariant && {
+          color: theme.palette[color].contrastText,
+          backgroundColor: theme.palette[color].main,
+        }),
+        // OUTLINED
+        ...(outlinedVariant && {
+          backgroundColor: alpha(theme.palette[color].main, 0.08),
+          color: theme.palette[color][lightMode ? "dark" : "light"],
+          border: `solid 1px ${alpha(theme.palette[color].main, 0.16)}`,
+          [`& .${alertClasses.icon}`]: {
+            color: theme.palette[color].main,
+          },
+        }),
+      }),
+    }));
+
+    return [...colorStyle];
+  };
+
+  return {
+    MuiAlert: {
+      styleOverrides: {
+        root: ({ ownerState }) => rootStyles(ownerState),
+        icon: {
+          opacity: 1,
+        },
+      },
+    },
+    MuiAlertTitle: {
+      styleOverrides: {
+        root: {
+          marginBottom: theme.spacing(0.5),
+          fontWeight: theme.typography.fontWeightSemiBold,
+        },
+      },
+    },
+  };
+}

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

@@ -0,0 +1,13 @@
+// ----------------------------------------------------------------------
+
+export function appBar(theme) {
+  return {
+    MuiAppBar: {
+      styleOverrides: {
+        root: {
+          boxShadow: "none",
+        },
+      },
+    },
+  };
+}

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

@@ -0,0 +1,44 @@
+import { alpha } from "@mui/material/styles";
+import { autocompleteClasses } from "@mui/material/Autocomplete";
+import { svgIconClasses } from "@mui/material/SvgIcon";
+
+import { menuItem, paper } from "../../css";
+
+// ----------------------------------------------------------------------
+
+export function autocomplete(theme) {
+  return {
+    MuiAutocomplete: {
+      styleOverrides: {
+        root: {
+          [`& span.${autocompleteClasses.tag}`]: {
+            ...theme.typography.subtitle2,
+            height: 24,
+            minWidth: 24,
+            lineHeight: "24px",
+            textAlign: "center",
+            padding: theme.spacing(0, 0.75),
+            color: theme.palette.text.secondary,
+            borderRadius: theme.shape.borderRadius,
+            backgroundColor: alpha(theme.palette.grey[500], 0.16),
+          },
+        },
+        paper: {
+          ...paper({ theme, dropdown: true }),
+        },
+        listbox: {
+          padding: 0,
+          [`& .${autocompleteClasses.option}`]: {
+            ...menuItem(theme),
+          },
+        },
+        endAdornment: {
+          [`& .${svgIconClasses.root}`]: {
+            width: 18,
+            height: 18,
+          },
+        },
+      },
+    },
+  };
+}