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

import {createTheme} from "@mui/material";
import Palette from "./palette";
import Typography from "./typography";
import {GENERAL_TABLE_BOARDER_COLOR, TABLE_HEADER_TEXT_COLOR, CONTAINED_PRIMARY_BLUE, VALIDATION_ERROR_COLOR} from "./colorConst";
const FONT_SIZE = '1.1rem';
const TABLE_FONT_SIZE = '1.0rem';
const HELPER_FONT_SIZE = '0.9rem';
const ROW_HEIGHT = '46px';
const theme = Palette('light', 'default');
export const CARD_MAX_WIDTH = "98%"

const themeTypography = Typography(
    `'Public Sans', sans-serif`,
);

export const PNSPS_THEME = createTheme({
    palette: theme.palette,
    typography: themeTypography,
    cancel: {
      main: '#424242',        // dark gray, WCAG safe
      contrastText: '#FFFFFF'
    },
    components: {
        MuiImage: {
            root: {
                position: 'relative',
                '&:hover': {
                    '&::after': {
                        content: '""',
                        position: 'absolute',
                        top: 0,
                        left: 0,
                        width: '100%',
                        height: '100%',
                        background: 'rgba(0, 0, 0, 0.5)',
                        opacity: 0,
                        transition: 'opacity 0.3s ease',
                    },
                    '&:hover::after': {
                        opacity: 1,
                    },
                },
            },
        },
        MuiButton: {
            defaultProps: {
                disableRipple: true,
            },
            styleOverrides: {
                root: ({ ownerState }) => ({
                    ...(ownerState.color === "cancel" && {
                        borderColor: "#9E9E9E",
                    }),
                    textTransform: 'none',
                    '&:active': {
                        boxShadow: 'none',
                        transform: 'none',
                    },
                }),
                contained: ({ theme, ownerState }) => ({
                ...(ownerState.color === "cancel" && {
                    border: "2px solid #9E9E9E",
                    boxShadow: "none",
                }),
                '&:active': {
                    backgroundColor: theme.palette[ownerState.color]?.main ?? theme.palette.primary.main,
                    boxShadow: 'none',
                },
                }),
                outlined: {
                '&:active': {
                    backgroundColor: 'transparent',
                },
                },
            },
        },
        MuiInputAdornment: {
            styleOverrides: {
                root: {
                    marginLeft: '-1px',
                    //marginRight: '0px',
                },
            },
        },
        MuiFormHelperText: {
            styleOverrides: {
                root: {
                    fontSize: HELPER_FONT_SIZE, // Adjust the font size as needed
                },
            },
        },
        MuiPickersBasePicker: {
            styleOverrides: {
                toolbar: {
                    height: ROW_HEIGHT // Set the desired height value here
                }
            }
        },
        MuiPickersDay: {
            root:{
                height: ROW_HEIGHT,
            },
            day: {
                padding: '20px', // Set the desired padding value here
            },
        },
        MuiButtonBase:{
            styleOverrides:{
                root:{
                    '&.MuiChip-root.Mui-disabled':{
                        opacity: 0.75,
                    },
                    '&.MuiButton-root':{
                        fontSize: '1.2rem',
                        fontWeight: '600',
                        alignItems: 'center',
                    },
                }
            }
        },
        MuiIconButton: {
            styleOverrides: {
                root: {
                    marginRight: '-2px',
                    borderRadius: 3
                },
                marginRight: '-3px',
                sizeLarge: {
                    width: theme.spacing(5.5),
                    height: theme.spacing(5.5),
                    fontSize: '1.25rem'
                },
                sizeMedium: {
                    width: theme.spacing(4.5),
                    height: theme.spacing(4.5),
                    fontSize: '1rem'
                },
                sizeSmall: {
                    width: theme.spacing(3.75),
                    height: theme.spacing(3.75),
                    fontSize: '0.75rem'
                }
            }
        },
        MuiInputLabel: {
            styleOverrides: {
                root: {
                    color: 'rgba(0, 0, 0, 0.8)',
                    fontSize: '1.15rem',
                    '&.Mui-focused': {
                        color: CONTAINED_PRIMARY_BLUE,
                    },
                    '&.Mui-error': {
                        color: VALIDATION_ERROR_COLOR,
                    },
                    '&.Mui-focused.Mui-error': {
                        color: VALIDATION_ERROR_COLOR,
                    },
                },
            },
        },
        MuiChip:{
            styleOverrides: {
                label: {
                    lineHeight: 'normal',
                    whiteSpace: "inherit",
                    paddingTop: '2px',
                    paddingBottom: '2px'
                },
            },
        },
        MuiAutocomplete: {
            styleOverrides: {
                tag: {
                    height: 'auto',
                    whiteSpace: 'normal',
                },
                inputRoot: {
                    maxHeight: '30vh', // Set the desired height value here
                },
                root: {
                    minHeight: ROW_HEIGHT,
                    '&:MuiAutocomplete-input': {
                        display: 'flex',
                        alignItems: 'center',
                    },
                },
                popupIndicator: {
                    height: '30px',
                    width: '30px',
                },
                endAdornment: {
                    root: {
                        height: '30px',
                        width: '30px',
                        marginRight: '-2px',
                        marginBottom: '3px',
                        borderRadius: 3
                    },
                    marginRight: '-3px',
                    sizeLarge: {
                        width: theme.spacing(5.5),
                        height: theme.spacing(5.5),
                        fontSize: '1.25rem'
                    },
                    sizeMedium: {
                        width: theme.spacing(3.75),
                        height: theme.spacing(3.75),
                        fontSize: '1rem'
                    },
                    sizeSmall: {
                        width: theme.spacing(3.75),
                        height: theme.spacing(3.75),
                        fontSize: '0.75rem'
                    },
                    top: "auto"
                },
            },
        },
        MuiInputBase: {
            root: {
                padding: '2px', // Set the desired padding value here
            },
        },
        MuiOutlinedInput: {
            styleOverrides: {
                input: {
                padding: '10.5px 14px 10.5px 12px',
                '&.MuiOutlinedInput-input.Mui-disabled': {
                    WebkitTextFillColor: 'rgba(0, 0, 0, 1)',
                },
                color: 'rgba(0, 0, 0, 0.85)',
                },

                root: {
                /* =============================
                    Issue 1: Input boundary contrast
                    ============================= */
                '& .MuiOutlinedInput-notchedOutline': {
                    borderColor: '#767676',  // >= 3:1 on white
                    borderWidth: 1,
                },
                '&:hover .MuiOutlinedInput-notchedOutline': {
                    borderColor: '#767676',
                },

                '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
                    borderColor: CONTAINED_PRIMARY_BLUE,
                    borderWidth: 3,                 // thick focus indicator
                },

                /* Prevent “shrinking” of inner area when border gets thicker */
                '&.Mui-focused .MuiOutlinedInput-input': {
                    padding: '8.5px 12px 8.5px 10px', // 10.5-2, 14-2, 10.5-2, 12-2
                },
                '&.Mui-focused.MuiInputBase-sizeSmall .MuiOutlinedInput-input': {
                    padding: '5.5px 6px 5.5px 10px',  // 7.5-2, 8-2, 7.5-2, 12-2
                },

                /* Error state — same red as FormHelperText (#B00020) */
                '&.Mui-error .MuiOutlinedInput-notchedOutline': {
                    borderColor: VALIDATION_ERROR_COLOR,
                    borderWidth: 1,
                },
                '&.Mui-error:hover .MuiOutlinedInput-notchedOutline': {
                    borderColor: VALIDATION_ERROR_COLOR,
                },
                '&.Mui-error.Mui-focused .MuiOutlinedInput-notchedOutline': {
                    borderColor: VALIDATION_ERROR_COLOR,
                    borderWidth: 3,
                },

                height: ROW_HEIGHT,
                },

                inputSizeSmall: {
                padding: '7.5px 8px 7.5px 12px',
                },

                inputMultiline: {
                root: {
                    minHeight: ROW_HEIGHT,
                    maxHeight: '50vh',
                },
                padding: '7.5px 8px 7.5px 12px',
                },
            },
        },
        MuiCheckbox: {
            defaultProps: {
                disableRipple: true,
            },
            styleOverrides: {
                root: {
                /* Default (unchecked) state — darker */
                color: '#595959', // >= 3:1 on white

                /* Hover (keep contrast) */
                '&:hover': {
                    backgroundColor: 'transparent',
                },

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

                /* Checked state — same blue as applyPublicNotice button */
                '&.Mui-checked': {
                    color: CONTAINED_PRIMARY_BLUE,
                },

                /* Focus-visible */
                '&.Mui-focusVisible': {
                    boxShadow: `0 0 0 3px ${CONTAINED_PRIMARY_BLUE}`,
                },
                },
            },
        },
        MuiRadio: {
            defaultProps: {
                disableRipple: true,
            },
            styleOverrides: {
                root: {
                color: '#595959',

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

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

                '&.Mui-checked': {
                    color: CONTAINED_PRIMARY_BLUE,
                },

                '&.Mui-focusVisible': {
                    boxShadow: `0 0 0 3px ${CONTAINED_PRIMARY_BLUE}`,
                },
                },
            },
        },
        MuiTextField: {
            styleOverrides: {
                root: {
                    '& .MuiInputBase-input': {
                        fontSize: FONT_SIZE,
                        display: 'flex',
                        alignItems: 'center',
                        color: 'rgba(0, 0, 0, 0.85)'
                    },
                    '& .MuiInputBase-root': {
                        //height: '40px',
                        minHeight: ROW_HEIGHT,
                        maxHeight: ROW_HEIGHT,
                        boxSizing: 'border-box', // Ensure the background shape follows the size of the TextField
                        //padding: '1px', // Adjust the padding as needed
                    },
                    '& .MuiInputBase-input:disabled': {
                        color: 'rgba(0, 0, 0, 1)',
                        backgroundColor: "#f8f8f8",
                        //backgroundColor: '#777777', // Set background color to #777777 for disabled state
                        //color: '#010101', // Set text color to #111111 for disabled state
                    },
                    '& .Mui-focused.MuiAutocomplete-input': {
                        color: "red"
                    },
                },
            },
        },
        MuiTableCell: {
            styleOverrides: {
                root: {
                    fontSize: TABLE_FONT_SIZE,
                    borderColor: theme.palette.divider
                },
                head: {
                    fontWeight: 600,
                    paddingTop: 3,
                    paddingBottom: 3
                }
            }
        },
        MuiTablePagination:{
            styleOverrides:{
                root:{
                    fontSize: HELPER_FONT_SIZE,
                },
                selectLabel:{
                    fontSize: HELPER_FONT_SIZE,
                },
                displayedRows:{
                    fontSize: HELPER_FONT_SIZE,
                }
            }
        },
        MuiDataGrid: {
            styleOverrides: {
                '&>.MuiDataGrid-main': {
                    '&>.MuiDataGrid-columnHeaders': {
                        borderBottom: 'none',
                        fontWeight: '900',
                    },
                },
                root: {
                    fontSize: TABLE_FONT_SIZE, // Set the font size
                    maxWidth: '98vw',
                    border: 'none !important',
                    '& .MuiDataGrid-cell': {
                        whiteSpace: 'normal', // Enable auto-wrapping
                        wordBreak: 'break-word', // Break words if needed
                    },
                },
                footerContainer:{
                    maxHeight: "40px",
                    minHeight: "40px",
                },
                editInputCell:{
                    fontSize: TABLE_FONT_SIZE,
                },
                cell: {
                    fontSize: TABLE_FONT_SIZE,
                    borderBottom: 'none',
                    '& .MuiDataGrid-cellValue': {
                        whiteSpace: 'normal', // Enable auto-wrapping
                        wordBreak: 'break-word', // Break words if needed
                    },
                },
                columnHeaderCell: {
                    '&:focus': {
                        outline: 'none', // Remove the outline on focus
                    },
                },
                columnHeaders: {
                    borderBottom: '1px solid ' + GENERAL_TABLE_BOARDER_COLOR + ' !important',
                },
                columnHeader: {
                    color: TABLE_HEADER_TEXT_COLOR,
                    fontSize: TABLE_FONT_SIZE,

                    '&:focus': {
                        outline: 'none', // Remove the outline on focus
                    },
                    '&:not(:last-child)': {
                        borderRight: 'none', // Remove the border between column headers
                    },
                    fontWeight: '900',
                },
                row: {
                    borderBottom: 'none',
                },
                pagination: {
                    borderTop: 'none !important',
                    fontSize: TABLE_FONT_SIZE,
                    "& .MuiTablePagination-actions": {
                        border: 'none', // Remove the border around the pagination actions
                    }
                },
                '& .MuiPaginationItem-root': {
                    borderRadius: 0,
                },
            },
        },
        MuiCssBaseline: {
            styleOverrides: {
                '.MuiDataGrid-root .MuiDataGrid-row': {
                    borderBottom: 'none', // Disable the border under each record
                },
                '.MuiDataGrid-root .MuiDataGrid-columnHeader': {
                    borderBottom: 'none', // Disable the border near the column headers
                },
            },
        },
        MuiTab: {
            defaultProps: {
                disableRipple: true,
            },
            styleOverrides: {
                root: {
                fontSize: TABLE_FONT_SIZE,   // ✅ unchanged
                minHeight: 46,
                textTransform: 'none',

                // Unselected tab text on white – AA compliant
                color: '#424242',

                // Selected tab text – AA compliant blue
                '&.Mui-selected': {
                    color: '#1565C0',
                },

                // Hover (optional but consistent)
                '&:hover': {
                    color: '#1565C0',
                },

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

                '&:active:not(.Mui-selected)': {
                    color: '#424242',
                },

                // ✅ Keyboard TAB focus (visible & accessible)
                '&.Mui-focusVisible': {
                    outline: `3px solid ${CONTAINED_PRIMARY_BLUE}`,
                    outlineOffset: '3px',
                    borderRadius: '6px',
                },
                },
            },
        },  

        MuiTabs: {
            styleOverrides: {
                vertical: {
                overflow: 'visible',
                },

                // ✅ Selected tab indicator – AA compliant blue
                indicator: {
                backgroundColor: '#1565C0',
                height: '3px',
                },
            },
        },
        MuiFormLabel: {
            styleOverrides: {
                root:{
                    color: "#000000"
                }
            }
        },
        MuiTabPanel:{
            styleOverrides:{
                root:{
                    padding: 0
                }
            }
        }
    },
});

export const ARS_NAV_THEME = createTheme({
    typography: {
        fontSize: 14,
    },
});

export const ARS_LOGIN_THEME = createTheme({
    components: {
        MuiFormHelperText: {
            styleOverrides: {
                root: {
                    fontSize: HELPER_FONT_SIZE, // Adjust the font size as needed
                },
            },
        },
        MuiInputLabel: {
            styleOverrides: {
                root: {
                    fontSize: '1.15rem',
                },
            },
        },
        MuiTextField: {
            styleOverrides: {
                root: {
                    '& .MuiInputBase-input': {
                        fontSize: '1.3rem',
                        display: 'flex',
                        alignItems: 'flex-end',
                    },
                    '& .MuiInputBase-root': {
                        height: '50px',
                    },
                },
            },
        },
    },
});