@ebubekirylmaz/link-test 1.0.0

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

@@ -0,0 +1,22 @@
+// ----------------------------------------------------------------------
+
+export function radio(theme) {
+  return {
+    // CHECKBOX, RADIO, SWITCH
+    MuiFormControlLabel: {
+      styleOverrides: {
+        label: {
+          ...theme.typography.body2,
+        },
+      },
+    },
+
+    MuiRadio: {
+      styleOverrides: {
+        root: {
+          padding: theme.spacing(1),
+        },
+      },
+    },
+  };
+}

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

@@ -0,0 +1,40 @@
+import { alpha } from "@mui/material/styles";
+import { ratingClasses } from "@mui/material/Rating";
+import { svgIconClasses } from "@mui/material/SvgIcon";
+
+// ----------------------------------------------------------------------
+
+export function rating(theme) {
+  return {
+    MuiRating: {
+      styleOverrides: {
+        root: {
+          [`&.${ratingClasses.disabled}`]: {
+            opacity: 0.48,
+          },
+        },
+        iconEmpty: {
+          color: alpha(theme.palette.grey[500], 0.48),
+        },
+        sizeSmall: {
+          [`& .${svgIconClasses.root}`]: {
+            width: 20,
+            height: 20,
+          },
+        },
+        sizeMedium: {
+          [`& .${svgIconClasses.root}`]: {
+            width: 24,
+            height: 24,
+          },
+        },
+        sizeLarge: {
+          [`& .${svgIconClasses.root}`]: {
+            width: 28,
+            height: 28,
+          },
+        },
+      },
+    },
+  };
+}

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

@@ -0,0 +1,26 @@
+// ----------------------------------------------------------------------
+
+export function select(theme) {
+  return {
+    MuiSelect: {
+      styleOverrides: {
+        icon: {
+          right: 10,
+          width: 18,
+          height: 18,
+          top: "calc(50% - 9px)",
+        },
+      },
+    },
+    MuiNativeSelect: {
+      styleOverrides: {
+        icon: {
+          right: 10,
+          width: 18,
+          height: 18,
+          top: "calc(50% - 9px)",
+        },
+      },
+    },
+  };
+}

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

@@ -0,0 +1,16 @@
+// ----------------------------------------------------------------------
+
+export function skeleton(theme) {
+  return {
+    MuiSkeleton: {
+      styleOverrides: {
+        root: {
+          backgroundColor: theme.palette.background.neutral,
+        },
+        rounded: {
+          borderRadius: theme.shape.borderRadius * 2,
+        },
+      },
+    },
+  };
+}

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

@@ -0,0 +1,30 @@
+import { sliderClasses } from "@mui/material/Slider";
+
+// ----------------------------------------------------------------------
+
+export function slider(theme) {
+  const lightMode = theme.palette.mode === "light";
+
+  return {
+    MuiSlider: {
+      styleOverrides: {
+        root: {
+          [`&.${sliderClasses.disabled}`]: {
+            color: theme.palette.action.disabled,
+          },
+        },
+        rail: {
+          opacity: 0.32,
+        },
+        markLabel: {
+          fontSize: 13,
+          color: theme.palette.text.disabled,
+        },
+        valueLabel: {
+          borderRadius: 8,
+          backgroundColor: theme.palette.grey[lightMode ? 800 : 700],
+        },
+      },
+    },
+  };
+}

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

@@ -0,0 +1,13 @@
+// ----------------------------------------------------------------------
+
+export function stepper(theme) {
+  return {
+    MuiStepConnector: {
+      styleOverrides: {
+        line: {
+          borderColor: theme.palette.divider,
+        },
+      },
+    },
+  };
+}

package/src/theme/overrides/components/svg-icon.js

@@ -0,0 +1,15 @@
+// ----------------------------------------------------------------------
+
+export function svgIcon(theme) {
+  return {
+    MuiSvgIcon: {
+      styleOverrides: {
+        fontSizeLarge: {
+          width: 32,
+          height: 32,
+          fontSize: "inherit",
+        },
+      },
+    },
+  };
+}

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

@@ -0,0 +1,66 @@
+import { alpha } from "@mui/material/styles";
+import { switchClasses } from "@mui/material/Switch";
+
+// ----------------------------------------------------------------------
+
+export function switches(theme) {
+  const lightMode = theme.palette.mode === "light";
+
+  const rootStyles = (ownerState) => ({
+    padding: "9px 13px 9px 12px",
+    width: 58,
+    height: 38,
+    ...(ownerState.size === "small" && {
+      padding: "4px 8px 4px 7px",
+      width: 40,
+      height: 24,
+    }),
+    [`& .${switchClasses.thumb}`]: {
+      width: 14,
+      height: 14,
+      boxShadow: "none",
+      color: theme.palette.common.white,
+      ...(ownerState.size === "small" && {
+        width: 10,
+        height: 10,
+      }),
+    },
+    [`& .${switchClasses.track}`]: {
+      opacity: 1,
+      borderRadius: 14,
+      backgroundColor: alpha(theme.palette.grey[500], 0.48),
+    },
+    [`& .${switchClasses.switchBase}`]: {
+      left: 3,
+      padding: 12,
+      ...(ownerState.size === "small" && {
+        padding: 7,
+      }),
+      [`&.${switchClasses.checked}`]: {
+        transform: "translateX(13px)",
+        [`&+.${switchClasses.track}`]: {
+          opacity: 1,
+        },
+        ...(ownerState.size === "small" && {
+          transform: "translateX(9px)",
+        }),
+      },
+      [`&.${switchClasses.disabled}`]: {
+        [`& .${switchClasses.thumb}`]: {
+          opacity: lightMode ? 1 : 0.48,
+        },
+        [`&+.${switchClasses.track}`]: {
+          opacity: 0.48,
+        },
+      },
+    },
+  });
+
+  return {
+    MuiSwitch: {
+      styleOverrides: {
+        root: ({ ownerState }) => rootStyles(ownerState),
+      },
+    },
+  };
+}

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

@@ -0,0 +1,79 @@
+import { alpha } from "@mui/material/styles";
+import { tableCellClasses } from "@mui/material/TableCell";
+import { tableRowClasses } from "@mui/material/TableRow";
+
+// ----------------------------------------------------------------------
+
+export function table(theme) {
+  return {
+    MuiTableContainer: {
+      styleOverrides: {
+        root: {
+          position: "relative",
+        },
+      },
+    },
+    MuiTableRow: {
+      styleOverrides: {
+        root: {
+          [`&.${tableRowClasses.selected}`]: {
+            backgroundColor: alpha(theme.palette.primary.dark, 0.04),
+            "&:hover": {
+              backgroundColor: alpha(theme.palette.primary.dark, 0.08),
+            },
+          },
+          "&:last-of-type": {
+            [`& .${tableCellClasses.root}`]: {
+              borderColor: "transparent",
+            },
+          },
+        },
+      },
+    },
+    MuiTableCell: {
+      styleOverrides: {
+        root: {
+          borderBottomStyle: "dashed",
+        },
+        head: {
+          fontSize: 14,
+          color: theme.palette.text.secondary,
+          fontWeight: theme.typography.fontWeightSemiBold,
+          backgroundColor: theme.palette.background.neutral,
+        },
+        stickyHeader: {
+          backgroundColor: theme.palette.background.paper,
+          backgroundImage: `linear-gradient(to bottom, ${theme.palette.background.neutral} 0%, ${theme.palette.background.neutral} 100%)`,
+        },
+        paddingCheckbox: {
+          paddingLeft: theme.spacing(1),
+        },
+      },
+    },
+    MuiTablePagination: {
+      styleOverrides: {
+        root: {
+          width: "100%",
+        },
+        toolbar: {
+          height: 64,
+        },
+        actions: {
+          marginRight: 8,
+        },
+        select: {
+          paddingLeft: 8,
+          "&:focus": {
+            borderRadius: theme.shape.borderRadius,
+          },
+        },
+        selectIcon: {
+          right: 4,
+          width: 16,
+          height: 16,
+          top: "calc(50% - 8px)",
+        },
+      },
+    },
+  };
+}

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

@@ -0,0 +1,39 @@
+import { tabClasses } from "@mui/material/Tab";
+
+// ----------------------------------------------------------------------
+
+export function tabs(theme) {
+  return {
+    MuiTabs: {
+      styleOverrides: {
+        indicator: {
+          backgroundColor: theme.palette.text.primary,
+        },
+        scrollButtons: {
+          width: 48,
+          borderRadius: "50%",
+        },
+      },
+    },
+    MuiTab: {
+      styleOverrides: {
+        root: {
+          padding: 0,
+          opacity: 1,
+          minWidth: 48,
+          minHeight: 48,
+          fontWeight: theme.typography.fontWeightSemiBold,
+          "&:not(:last-of-type)": {
+            marginRight: theme.spacing(3),
+            [theme.breakpoints.up("sm")]: {
+              marginRight: theme.spacing(5),
+            },
+          },
+          [`&:not(.${tabClasses.selected})`]: {
+            color: theme.palette.text.secondary,
+          },
+        },
+      },
+    },
+  };
+}

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

@@ -0,0 +1,146 @@
+import { alpha } from "@mui/material/styles";
+import { filledInputClasses } from "@mui/material/FilledInput";
+import { inputBaseClasses } from "@mui/material/InputBase";
+import { inputLabelClasses } from "@mui/material/InputLabel";
+import { outlinedInputClasses } from "@mui/material/OutlinedInput";
+
+// ----------------------------------------------------------------------
+
+export function textField(theme) {
+  const color = {
+    focused: theme.palette.text.primary,
+    active: theme.palette.text.secondary,
+    placeholder: theme.palette.text.disabled,
+  };
+
+  const font = {
+    label: theme.typography.body1,
+    value: theme.typography.body2,
+  };
+
+  return {
+    // HELPER
+    MuiFormHelperText: {
+      styleOverrides: {
+        root: {
+          marginTop: theme.spacing(1),
+        },
+      },
+    },
+
+    // LABEL
+    MuiFormLabel: {
+      styleOverrides: {
+        root: {
+          ...font.value,
+          color: color.placeholder,
+          [`&.${inputLabelClasses.shrink}`]: {
+            ...font.label,
+            fontWeight: 600,
+            color: color.active,
+            [`&.${inputLabelClasses.focused}`]: {
+              color: color.focused,
+            },
+            [`&.${inputLabelClasses.error}`]: {
+              color: theme.palette.error.main,
+            },
+            [`&.${inputLabelClasses.disabled}`]: {
+              color: theme.palette.text.disabled,
+            },
+            [`&.${inputLabelClasses.filled}`]: {
+              transform: "translate(12px, 6px) scale(0.75)",
+            },
+          },
+        },
+      },
+    },
+
+    // BASE
+    MuiInputBase: {
+      styleOverrides: {
+        root: {
+          [`&.${inputBaseClasses.disabled}`]: {
+            "& svg": {
+              color: theme.palette.text.disabled,
+            },
+          },
+        },
+        input: {
+          ...font.value,
+          "&::placeholder": {
+            opacity: 1,
+            color: color.placeholder,
+          },
+        },
+      },
+    },
+
+    // STANDARD
+    MuiInput: {
+      styleOverrides: {
+        underline: {
+          "&:before": {
+            borderBottomColor: alpha(theme.palette.grey[500], 0.32),
+          },
+          "&:after": {
+            borderBottomColor: color.focused,
+          },
+        },
+      },
+    },
+
+    // OUTLINED
+    MuiOutlinedInput: {
+      styleOverrides: {
+        root: {
+          [`&.${outlinedInputClasses.focused}`]: {
+            [`& .${outlinedInputClasses.notchedOutline}`]: {
+              borderColor: color.focused,
+            },
+          },
+          [`&.${outlinedInputClasses.error}`]: {
+            [`& .${outlinedInputClasses.notchedOutline}`]: {
+              borderColor: theme.palette.error.main,
+            },
+          },
+          [`&.${outlinedInputClasses.disabled}`]: {
+            [`& .${outlinedInputClasses.notchedOutline}`]: {
+              borderColor: theme.palette.action.disabledBackground,
+            },
+          },
+        },
+        notchedOutline: {
+          borderColor: alpha(theme.palette.grey[500], 0.2),
+          transition: theme.transitions.create(["border-color"], {
+            duration: theme.transitions.duration.shortest,
+          }),
+        },
+      },
+    },
+
+    // FILLED
+    MuiFilledInput: {
+      styleOverrides: {
+        root: {
+          borderRadius: theme.shape.borderRadius,
+          backgroundColor: alpha(theme.palette.grey[500], 0.08),
+          "&:hover": {
+            backgroundColor: alpha(theme.palette.grey[500], 0.16),
+          },
+          [`&.${filledInputClasses.focused}`]: {
+            backgroundColor: alpha(theme.palette.grey[500], 0.16),
+          },
+          [`&.${filledInputClasses.error}`]: {
+            backgroundColor: alpha(theme.palette.error.main, 0.08),
+            [`&.${filledInputClasses.focused}`]: {
+              backgroundColor: alpha(theme.palette.error.main, 0.16),
+            },
+          },
+          [`&.${filledInputClasses.disabled}`]: {
+            backgroundColor: theme.palette.action.disabledBackground,
+          },
+        },
+      },
+    },
+  };
+}

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

@@ -0,0 +1,20 @@
+// ----------------------------------------------------------------------
+
+export function timeline(theme) {
+  return {
+    MuiTimelineDot: {
+      styleOverrides: {
+        root: {
+          boxShadow: "none",
+        },
+      },
+    },
+    MuiTimelineConnector: {
+      styleOverrides: {
+        root: {
+          backgroundColor: theme.palette.divider,
+        },
+      },
+    },
+  };
+}

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

@@ -0,0 +1,70 @@
+import { alpha } from "@mui/material/styles";
+import { toggleButtonClasses } from "@mui/material/ToggleButton";
+
+// ----------------------------------------------------------------------
+
+const COLORS = ["primary", "secondary", "info", "success", "warning", "error"];
+
+// ----------------------------------------------------------------------
+
+export function toggleButton(theme) {
+  const rootStyles = (ownerState) => {
+    const defaultStyle = {
+      [`&.${toggleButtonClasses.selected}`]: {
+        borderColor: "currentColor",
+        boxShadow: "0 0 0 0.5px currentColor",
+      },
+    };
+
+    const colorStyle = COLORS.map((color) => ({
+      ...(ownerState.color === color && {
+        "&:hover": {
+          borderColor: alpha(theme.palette[color].main, 0.48),
+          backgroundColor: alpha(
+            theme.palette[color].main,
+            theme.palette.action.hoverOpacity
+          ),
+        },
+      }),
+    }));
+
+    const disabledState = {
+      [`&.${toggleButtonClasses.disabled}`]: {
+        [`&.${toggleButtonClasses.selected}`]: {
+          color: theme.palette.action.disabled,
+          backgroundColor: theme.palette.action.selected,
+          borderColor: theme.palette.action.disabledBackground,
+        },
+      },
+    };
+
+    return [defaultStyle, ...colorStyle, disabledState];
+  };
+
+  return {
+    MuiToggleButton: {
+      styleOverrides: {
+        root: ({ ownerState }) => rootStyles(ownerState),
+      },
+    },
+    MuiToggleButtonGroup: {
+      styleOverrides: {
+        root: {
+          borderRadius: theme.shape.borderRadius,
+          backgroundColor: theme.palette.background.paper,
+          border: `solid 1px ${alpha(theme.palette.grey[500], 0.08)}`,
+        },
+        grouped: {
+          margin: 4,
+          [`&.${toggleButtonClasses.selected}`]: {
+            boxShadow: "none",
+          },
+          "&:not(:first-of-type), &:not(:last-of-type)": {
+            borderRadius: theme.shape.borderRadius,
+            borderColor: "transparent",
+          },
+        },
+      },
+    },
+  };
+}

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

@@ -0,0 +1,18 @@
+// ----------------------------------------------------------------------
+
+export function tooltip(theme) {
+  const lightMode = theme.palette.mode === "light";
+
+  return {
+    MuiTooltip: {
+      styleOverrides: {
+        tooltip: {
+          backgroundColor: theme.palette.grey[lightMode ? 800 : 700],
+        },
+        arrow: {
+          color: theme.palette.grey[lightMode ? 800 : 700],
+        },
+      },
+    },
+  };
+}

package/src/theme/overrides/components/tree-view.js

@@ -0,0 +1,16 @@
+// ----------------------------------------------------------------------
+
+export function treeView(theme) {
+  return {
+    MuiTreeItem: {
+      styleOverrides: {
+        label: {
+          ...theme.typography.body2,
+        },
+        iconContainer: {
+          width: "auto",
+        },
+      },
+    },
+  };
+}

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

@@ -0,0 +1,16 @@
+// ----------------------------------------------------------------------
+
+export function typography(theme) {
+  return {
+    MuiTypography: {
+      styleOverrides: {
+        paragraph: {
+          marginBottom: theme.spacing(2),
+        },
+        gutterBottom: {
+          marginBottom: theme.spacing(1),
+        },
+      },
+    },
+  };
+}