FPSMS-frontend/src/theme/colorConst.js

import { createTheme } from "@mui/material";
import { aborted } from "util";

//  -    -   -   -   -   -   WORK IN PROGRESS    -  -   -   -   -   -    //

export const chartColor = [
  "#CB4047",
  "#ED3A41",
  "#F47B50",
  "#FBA647",
  "#FDB64C",
  "#CCBB32",
  "#9ACC59",
  "#57B962",
  "#1E83C5",
  "#7C4A9D",
];

export const chartSingleColor = [
  "#f2969a",
  "#fc9599",
  "#faa789",
  "#f7ae94",
  "#ffd491",
  "#ede5a1",
  "#d1f5a2",
  "#9de0a4",
  "#a2d4f5",
  "#b685d6",
];

export const rankColor = [
  "#FFD700",
  "#C0C0C0",
  "#CD853F",
  "#57B962",
  "#57B962",
  "#57B962",
  "#57B962",
  "#57B962",
  "#57B962",
  "#57B962",
];

export const piechartColor1 = [
  "#E84A3E",
  "#F2883C",
  "#FDCD4D",
  "#CE478A",
  "#B63D2A",
  "#6A8B9E",
  "#60667E",
  "#58865F",
  "#2F763E",
  "#7D80B5",
];

export const piechartColor2 = [
  "#6A8B9E",
  "#60667E",
  "#58865F",
  "#2F763E",
  "#7D80B5",
  "#E84A3E",
  "#F2883C",
  "#FDCD4D",
  "#CE478A",
  "#B63D2A",
];

export const cardBorderColor = ["#efb142", "#4bb641", "#448df2", "#e03c04"];

export const chartLineColor = ["#FFFFFF", "#D9D9D9"];

export const GENERAL_RED_COLOR = "#e03c04";

export const TABLE_HEADER_TEXT_COLOR = "#3367D1";

export const GENERAL_INFO_COLOR = "#448df2";

export const GENERAL_SETTING_COLOR = "#666666";

export const GENERAL_BORDER_COLOR = "#e6ebf1";

export const GENERAL_TEXT_COLOR = "#262626";

export const FONT_SIZE_L = "1.875rem";

export const FONT_SIZE_M = "1.5rem";

export const FONT_SIZE_S = "1.25rem";

export const PROJECT_CARD_STYLE = {
  borderRadius: "10px",
  //border: '10px dotted #ccc',
  width: "20rem",
  margin: "20px",
  //backgroundColor:"pink"
};

export const PROJECT_MODAL_STYLE = {
  position: "absolute",
  width: "85%",
  borderRadius: "10px",
  height: "75%",
  // top: '50%',
  // left: '50%',
  transform: "translate(10%, 15%)",
  backgroundColor: "white",
  padding: "20px",
  display: "flex",
  flexDirection: "column",
};

export const DATAGRID_STYLE = {
  boxShadow: 2,
  border: 2,
  borderColor: "primary.light",
  "& .MuiDataGrid-cell:hover": {
    color: "primary.main",
  },
  "& .MuiDataGrid-root": {
    overflow: "auto",
  },
};

export const TAB_THEME = {
  components: {
    MuiTab: {
      styleOverrides: {
        root: {
          // fontSize: '1.0rem',
          fontSize: "1.25rem", //'20px',
          // height: '40px',
          // width: '40vw', // Default width for xs screen sizes
          // '@media (min-width: 600px)': { // sm breakpoint
          //     width: '20vw',
          // },
          // '@media (min-width: 960px)': { // md breakpoint
          //     width: '15vw',
          // },
          // '@media (min-width: 1280px)': { // lg breakpoint
          //     width: '7vw',
          // },
          // textTransform: "none",
          // alignItems: 'center'
        },
      },
    },
  },
};

// copy from MTMS
export const FPSMS_BUTTON_THEME = createTheme({
  palette: {
    primary: {
      main: "#92C1E9",
      contrastText: "#FFFFFF",
    },
    secondary: {
      main: "#898D8D",
      contrastText: "#FFFFFF",
    },
    success: {
      main: "#ADCAB8",
      contrastText: "#FFFFFF",
    },
    danger: {
      main: "#F890A5",
      contrastText: "#FFFFFF",
    },
    warning: {
      main: "#EFBE7D",
      contrastText: "#FFFFFF",
    },
    disable: {
      main: "#B2B4B2",
      contrastText: "#FFFFFF",
    },
    create: {
      // main: '#57B962',
      main: "#ADCAB8",
      // light: will be calculated from palette.primary.main,
      // dark: will be calculated from palette.primary.main,
      // contrastText: will be calculated to contrast with palette.primary.main
      contrastText: "#FFFFFF",
    },
    delete: {
      // main: '#E03C04',
      main: "#F890A5",
      contrastText: "#FFFFFF",
    },
    cancel: {
      // main: '#999999',
      main: "#F890A5",
      contrastText: "#FFFFFF",
    },
    back: {
      // main: '#999999',
      main: "#898D8D",
      contrastText: "#FFFFFF",
    },
    reset: {
      main: "#EFBE7D",
      contrastText: "#FFFFFF",
    },
    save: {
      // main: '#448DF2',
      main: "#92C1E9",
      contrastText: "#FFFFFF",
    },
    export: {
      main: "#8C52FF",
      contrastText: "#FFFFFF",
    },
    import: {
      main: "#92C1E9",
      contrastText: "#FFFFFF",
    },
    saveAs: {
      main: "#FFBD59",
      contrastText: "#FFFFFF",
    },
  },
  components: {
    MuiButton: {
      styleOverrides: {
        root: {
          "& .MuiButtonBase-root-MuiButton-root": {
            fontSize: FONT_SIZE_S,
          },
        },
      },
    },
    MuiButtonBase: {
      styleOverrides: {
        root: {
          "&.MuiChip-root.Mui-disabled": {
            opacity: 0.75,
          },
          "&.MuiButton-root": {
            fontSize: FONT_SIZE_S,
          },
        },
      },
    },
  },
});

export const formTheme = createTheme({
  components: {
    MuiFormLabel: {
      root: {
        // Name of the rule
        color: "rgba(0, 0, 0, 1)",
      },
      styleOverrides: {
        asterisk: {
          color: "#db3131",
          "&$error": {
            color: "#db3131",
          },
        },
      },
    },
  },
});

export const ARS_BUTTON_THEME = createTheme({
  palette: {
    create: {
      main: "#57B962",
      // light: will be calculated from palette.primary.main,
      // dark: will be calculated from palette.primary.main,
      // contrastText: will be calculated to contrast with palette.primary.main
      contrastText: "#FFFFFF",
    },
    delete: {
      main: "#E03C04",
      contrastText: "#FFFFFF",
    },
    cancel: {
      main: "#999999",
      contrastText: "#FFFFFF",
    },
    save: {
      main: "#448DF2",
      contrastText: "#FFFFFF",
    },
    export: {
      main: "#8C52FF",
      contrastText: "#FFFFFF",
    },
    saveAs: {
      main: "#FFBD59",
      contrastText: "#FFFFFF",
    },
    edit: {
      main: "#F3AF2B",
      contrastText: "#FFFFFF",
    },
    exportExcel: {
      main: "#6A8B9E",
      contrastText: "#FFFFFF",
    },
  },
  components: {
    MuiDataGrid: {
      styleOverrides: {
        actionsCell: {
          "& .MuiDataGrid-actionsContainer .MuiIconButton-root": {
            fontSize: "80px", // Set the desired icon size here
          },
        },
      },
    },
    MuiButton: {
      styleOverrides: {
        root: {
          // fontSize: '1.0rem',
          fontSize: "1.25rem",
          height: "40px",
          width: "40vw", // Default width for xs screen sizes
          "@media (min-width: 600px)": {
            // sm breakpoint
            width: "20vw",
          },
          "@media (min-width: 960px)": {
            // md breakpoint
            width: "15vw",
          },
          "@media (min-width: 1280px)": {
            // lg breakpoint
            width: "7vw",
          },
          textTransform: "none",
          alignItems: "center",
        },
      },
    },
  },
});

//from ARS
export const FPSMS_LONG_BUTTON_THEME = createTheme({
  palette: {
    create: {
      main: "#57B962",
      // light: will be calculated from palette.primary.main,
      // dark: will be calculated from palette.primary.main,
      // contrastText: will be calculated to contrast with palette.primary.main
      contrastText: "#FFFFFF",
    },
    delete: {
      main: "#E03C04",
      contrastText: "#FFFFFF",
    },
    cancel: {
      main: "#999999",
      contrastText: "#FFFFFF",
    },
    save: {
      main: "#448DF2",
      contrastText: "#FFFFFF",
    },
    export: {
      main: "#8C52FF",
      contrastText: "#FFFFFF",
    },
    saveAs: {
      main: "#FFBD59",
      contrastText: "#FFFFFF",
    },
    edit: {
      main: "#F3AF2B",
      contrastText: "#FFFFFF",
    },
    exportExcel: {
      main: "#60667E",
      contrastText: "#FFFFFF",
    },
  },
  components: {
    MuiDataGrid: {
      styleOverrides: {
        actionsCell: {
          "& .MuiDataGrid-actionsContainer .MuiIconButton-root": {
            fontSize: "80px", // Set the desired icon size here
          },
        },
      },
    },
    MuiButton: {
      styleOverrides: {
        root: {
          fontSize: "1.25rem",
          height: "40px",
          width: "40vw", // Default width for xs screen sizes
          "@media (min-width: 600px)": {
            // sm breakpoint
            width: "30vw",
          },
          "@media (min-width: 960px)": {
            // md breakpoint
            width: "25vw",
          },
          "@media (min-width: 1280px)": {
            // lg breakpoint
            width: "14vw",
          },
          textTransform: "none",
          alignItems: "center",
        },
      },
    },
  },
});