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", }), '&: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 rgba(25, 118, 210, 0.35)', }, }, }, }, 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 rgba(25, 118, 210, 0.35)', }, }, }, }, 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 rgba(21, 101, 192, 0.55)', 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', }, }, }, }, }, });