PNSPS-frontend-MaterialUI/src/themes/buttonConst.js

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

export const PNSPS_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',
        },
        error:{
            main: '#F3AF2B',
            contrastText: '#FFFFFF',
        },
        exportExcel:{
            main: '#6A8B9E',
            contrastText: '#FFFFFF',
        },
        success:{
            main: '#448DF2',
            contrastText: '#FFFFFF',
        },
        green:{
            main: '#4ac234',
            contrastText: '#FFFFFF',
        },
        orange: {
            main: '#ed9740',
            light: '#ff5e5e',
            dark: '#b0671e',
            contrastText: '#fff',
        },
    },
    components: {
        MuiDataGrid: {
            styleOverrides: {
                actionsCell: {
                    '& .MuiDataGrid-actionsContainer .MuiIconButton-root': {
                        fontSize: '80px', // Set the desired icon size here
                    },
                },
            },
        },
        MuiButton: {
            defaultProps: {
                disableRipple: true,
            },
            styleOverrides: {
                /* -----------------------------
                Icon alignment
                ------------------------------ */
                startIcon: {
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                '& > *:nth-of-type(1)': { fontSize: '28px' },
                },

                /* -----------------------------
                Base button styles
                ------------------------------ */
                root: {
                fontSize: '1.2rem',
                fontWeight: '600',
                height: '45px',
                minWidth: '35vw',
                '@media (min-width: 600px)': { minWidth: '20vw' },
                '@media (min-width: 960px)': { minWidth: '15vw' },
                '@media (min-width: 1280px)': { minWidth: '9vw' },
                textTransform: 'none',
                alignItems: 'normal',
                '&:active': {
                    boxShadow: 'none',
                    transform: 'none',
                },
                },

                /* -----------------------------
                Remove default contained elevation / blue focus
                ------------------------------ */
                contained: ({ theme, ownerState }) => ({
                boxShadow: 'none',
                '&:hover': { boxShadow: 'none' },
                '&:active': {
                    backgroundColor: theme.palette[ownerState.color]?.main ?? theme.palette.primary.main,
                    boxShadow: 'none',
                },
                '&.Mui-focusVisible': { boxShadow: 'none' },
                }),

                /* -----------------------------
                RESET / CANCEL (contained + cancel)
                WCAG 2.1 AA compliant
                ------------------------------ */
                containedCancel: {
                backgroundColor: '#616161', // dark grey (passes with white text)
                color: '#FFFFFF',

                border: '0 !important',
                outline: 'none',
                boxShadow: 'none !important',

                '&:hover': {
                    backgroundColor: '#545454',
                    boxShadow: 'none !important',
                },

                '&:active': {
                    backgroundColor: '#616161',
                    boxShadow: 'none !important',
                },

                /* ✅ Keyboard TAB focus (visible & accessible) */
                '&.Mui-focusVisible': {
                    boxShadow: '0 0 0 3px rgba(255,255,255,0.6) !important',
                },
                },

                /* -----------------------------
                Optional: outlined cancel variant
                ------------------------------ */
                outlinedCancel: {
                borderColor: '#616161',
                color: '#424242',

                '&:hover': {
                    borderColor: '#616161',
                    backgroundColor: 'transparent',
                },

                '&:active': {
                    backgroundColor: 'transparent',
                },

                '&.Mui-focusVisible': {
                    boxShadow: '0 0 0 3px rgba(66,66,66,0.4)',
                },
                },

                outlined: {
                '&:active': {
                    backgroundColor: 'transparent',
                },
                },
            },
        },
    }
});

export const PNSPS_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: '#ffa733',
            contrastText: '#FFFFFF',
        },
        exportExcel:{
            main: '#60667E',
            contrastText: '#FFFFFF',
        },
        success:{
            main: '#3f50b5',
            contrastText: '#FFFFFF',
        },
        orange: {
            main: '#ed9740',
            light: '#ff5e5e',
            dark: '#b0671e',
            contrastText: '#fff',
        },
    },
    components: {
        MuiDataGrid: {
            styleOverrides: {
                actionsCell: {
                    '& .MuiDataGrid-actionsContainer .MuiIconButton-root': {
                        fontSize: '80px', // Set the desired icon size here
                    },
                },
            },
        },
        MuiButton: {
            defaultProps: {
                disableRipple: true,
            },
            styleOverrides: {
                startIcon:{
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    '& > *:nth-of-type(1)': {
                        fontSize: '28px',
                    },
                },
                root: {
                    fontSize: '1.2rem',
                    fontWeight: '600',
                    height: '45px',
                    minWidth: '60vw', // Default width for xs screen sizes
                    '@media (min-width: 600px)': { // sm breakpoint
                        minWidth: '33vw',
                    },
                    '@media (min-width: 960px)': { // md breakpoint
                        minWidth: '25vw',
                    },
                    '@media (min-width: 1280px)': { // lg breakpoint
                        minWidth: '16vw',
                    },
                    textTransform: "none",
                    alignItems: 'normal',
                    '&:active': {
                        boxShadow: 'none',
                        transform: 'none',
                    },
                },
                contained: ({ theme, ownerState }) => ({
                    boxShadow: 'none',
                    '&:hover': { boxShadow: 'none' },
                    '&:active': {
                        backgroundColor: theme.palette[ownerState.color]?.main ?? theme.palette.primary.main,
                        boxShadow: 'none',
                    },
                    '&.Mui-focusVisible': { boxShadow: 'none' },
                }),
                outlined: {
                    '&:active': {
                        backgroundColor: 'transparent',
                    },
                },
            },
        },
    }
});