LIONER-frontend/src/themes/colorConst.js

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

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_GREEN_COLOR = '#57B962';

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_TABLE_BOARDER_COLOR = '#F0F0F0';

export const GENERAL_BORDER_COLOR ='#e6ebf1';

export const GENERAL_TEXT_COLOR ='#262626';

export const LIONER_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',
        },
        upload:{
            main: '#6A8B9E',
            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',
                    height: '40px',
                    minWidth: '40vw', // Default width for xs screen sizes
                    '@media (min-width: 600px)': { // sm breakpoint
                        minWidth: '40vw',
                    },
                    '@media (min-width: 960px)': { // md breakpoint
                        minWidth: '15vw',
                    },
                    '@media (min-width: 1280px)': { // lg breakpoint
                        minWidth: '7vw',
                    },
                    textTransform: "none",
                    alignItems: 'center'
                },
            },
        },
    }
});

export const LIONER_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.0rem',
                    height: '40px',
                    minWidth: '40vw', // Default width for xs screen sizes
                    '@media (min-width: 600px)': { // sm breakpoint
                        minWidth: '30vw',
                    },
                    '@media (min-width: 960px)': { // md breakpoint
                        minWidth: '25vw',
                    },
                    '@media (min-width: 1280px)': { // lg breakpoint
                        minWidth: '14vw',
                    },
                    textTransform: "none",
                    alignItems: 'center'
                },
            },
        },
    }
});

export const LIONER_MEDIUM_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.0rem',
                    height: '40px',
                    minWidth: '40vw', // Default width for xs screen sizes
                    '@media (min-width: 600px)': { // sm breakpoint
                        minWidth: '40vw',
                    },
                    '@media (min-width: 960px)': { // md breakpoint
                        minWidth: '22vw',
                    },
                    '@media (min-width: 1280px)': { // lg breakpoint
                        minWidth: '13vw',
                    },
                    textTransform: "none",
                    alignItems: 'center'
                },
            },
        },
    }
});


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