src/theme/buttonStyles.ts - main - laborgit/laborgit-frontend

src/theme/buttonStyles.ts
95 строк2 KB
gdev2018
refactor relative paths
28 фев 2025, 22:45
28 фев 2025, 22:45cb9bcb4
import { Components, Theme } from "@mui/material/styles";
import * as colors from "theme/color";

declare module "@mui/material/Button" {
  interface ButtonPropsVariantOverrides {
    filled: true;
  }
}

export const buttonStyles: Components<Theme>["MuiButton"] = {
  variants: [
    {
      props: { size: "small" },
      style: {
        padding: "8px 14px 8px 14px",
        fontSize: "14px",
        lineHeight: "20px"
      }
    },
    {
      props: { size: "medium" },
      style: {
        padding: "10px 16px 10px 16px",
        fontSize: "14px",
        lineHeight: "20px"
      }
    },
    {
      props: { size: "large" },
      style: {
        padding: "10px 18px 10px 18px",
        fontSize: "16px",
        lineHeight: "24px"
      }
    },
    {
      props: { variant: "contained" },
      style: {
        backgroundColor: colors.primary[500],
        color: "white",
        "&:hover": {
          backgroundColor: colors.primary[600]
        }
      }
    },
    {
      props: { variant: "filled" },
      style: {
        backgroundColor: colors.blue[50],
        color: colors.blue[700],
        "&:hover": {
          backgroundColor: colors.blue[100],
          color: colors.blue[800]
        }
      }
    },
    {
      props: { variant: "outlined" },
      style: {
        backgroundColor: "white",
        border: `1px solid ${colors.gray[300]}`,
        color: colors.gray[700],
        "&:hover": {
          backgroundColor: colors.gray[50],
          border: `1px solid ${colors.gray[300]}`
        }
      }
    },
    {
      props: { variant: "text" },
      style: {
        backgroundColor: "transparent",
        color: colors.primary[400],
        "&:hover": {
          backgroundColor: colors.blue[50]
        }
      }
    }
  ],
  styleOverrides: {
    root: {
      ":hover": {
        boxShadow: "none"
      },
      boxShadow: "none",
      whiteSpace: "nowrap",
      textTransform: "none",
      borderRadius: "8px"
    },
    text: { fontWeight: 600 },
    outlinedSecondary: {
      borderColor: colors.gray[300]
    }
  }
};