PNSPS-frontend-MaterialUI/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', '#0c489e', '#e03c04'
];

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

export const GENERAL_RED_COLOR = '#e03c04';

export const TABLE_HEADER_TEXT_COLOR = "#1565C0";

export const GENERAL_INFO_COLOR = '#0c489e';

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';

/** Page header bar background (gazette banner strip). */
export const HEADER_BACKGROUND_COLOR = '#0C489E';

/** MUI default primary — used by applyPublicNotice contained button (PNSPS_LONG_BUTTON_THEME). WCAG AA: 3:1+ for UI components on white. */
export const CONTAINED_PRIMARY_BLUE = '#0c489e';

/** Validation error text/border — matches FormHelperText in styles.css (e.g. "Please enter password"). WCAG AA on white. */
export const VALIDATION_ERROR_COLOR = '#B00020';

/** WCAG 2.0 AA contained error button red — lightest tone passing 4.5:1 with white text (~4.57:1). */
export const CONTAINED_ERROR_RED = '#e61f2a';

export const ERROR_CONTAINED_BUTTON_SX = {
    backgroundColor: CONTAINED_ERROR_RED,
    color: '#FFFFFF',
    '&:hover': {
        backgroundColor: '#d32f2f',
    },
};

/** WCAG 2.2 AA contained grey — matches PNSPS containedCancel (#616161 + white, ~5.7:1). */
export const CONTAINED_NEUTRAL_GREY = '#616161';

export const GREY_CONTAINED_BUTTON_SX = {
    backgroundColor: CONTAINED_NEUTRAL_GREY,
    color: '#FFFFFF',
    '&:hover': {
        backgroundColor: '#545454',
    },
    '&:focus-visible': {
        outline: '2px solid #616161',
        outlineOffset: '2px',
    },
};

export const PRIMARY_CONTAINED_BUTTON_SX = {
    backgroundColor: CONTAINED_PRIMARY_BLUE,
    color: '#FFFFFF',
    '&:hover': {
        backgroundColor: '#1565c0',
    },
};

/** Dark green for Pay actions — matches PNSPS_BUTTON_THEME create color (#57B962), not light green (#4ac234). */
export const CONTAINED_DARK_GREEN = '#57B962';

export const PAY_CONTAINED_BUTTON_SX = {
    backgroundColor: CONTAINED_DARK_GREEN,
    color: '#FFFFFF',
    '&:hover': {
        backgroundColor: '#488F52',
    },
};

export const PRIMARY_OUTLINED_BUTTON_SX = {
    color: CONTAINED_PRIMARY_BLUE,
    borderColor: CONTAINED_PRIMARY_BLUE,
    '&:hover': {
        borderColor: CONTAINED_PRIMARY_BLUE,
        backgroundColor: 'rgba(25, 118, 210, 0.08)',
    },
};

export const PRIMARY_TEXT_BUTTON_SX = {
    color: CONTAINED_PRIMARY_BLUE,
    fontWeight: 600,
    '&:hover': {
        backgroundColor: 'rgba(25, 118, 210, 0.08)',
    },
};

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