706 lines
18 KiB
JavaScript
706 lines
18 KiB
JavaScript
import { typographyLevels } from "./constants";
|
|
const fontFamilyPrimary = '"Inter" , sans-serif';
|
|
// const fontFamilySecondary = '"Avenir", sans-serif';
|
|
|
|
/* TODO take the color out from here */
|
|
const shadow =
|
|
"0px 4px 24px -4px rgba(16, 24, 40, 0.08), 0px 3px 3px -3px rgba(16, 24, 40, 0.03)";
|
|
|
|
const baseTheme = (palette) => ({
|
|
typography: {
|
|
fontFamily: fontFamilyPrimary,
|
|
fontSize: typographyLevels.base,
|
|
h1: {
|
|
fontSize: typographyLevels.xl,
|
|
color: palette.primary.contrastText,
|
|
fontWeight: 500,
|
|
},
|
|
h2: {
|
|
fontSize: typographyLevels.l,
|
|
color: palette.primary.contrastTextSecondary,
|
|
fontWeight: 400,
|
|
},
|
|
// CAIO_REVIEW, need a brighter color for dark bg
|
|
h2DarkBg: {
|
|
fontSize: typographyLevels.l,
|
|
color: palette.primary.contrastTextSecondaryDarkBg,
|
|
fontWeight: 400,
|
|
},
|
|
body1: {
|
|
fontSize: typographyLevels.m,
|
|
color: palette.primary.contrastTextTertiary,
|
|
fontWeight: 400,
|
|
},
|
|
body2: {
|
|
fontSize: typographyLevels.s,
|
|
color: palette.primary.contrastTextTertiary,
|
|
fontWeight: 400,
|
|
},
|
|
},
|
|
/* TODO change to 4 */
|
|
spacing: 2,
|
|
/* TODO we can skip using the callback functions on the next lines since we are already accessing it on line 10. That was the last thing I managed to do, so we are sort of doing it twice*/
|
|
/* TODO All these should live inside of a component*/
|
|
components: {
|
|
MuiButton: {
|
|
defaultProps: {
|
|
disableRipple: true,
|
|
},
|
|
|
|
styleOverrides: {
|
|
root: ({ theme }) => ({
|
|
variants: [
|
|
{
|
|
props: (props) => props.color === "accent",
|
|
style: {
|
|
"&:hover": {
|
|
backgroundColor: theme.palette.accent.darker,
|
|
},
|
|
},
|
|
},
|
|
{
|
|
props: (props) => props.color === "error",
|
|
style: {
|
|
"&.Mui-disabled": {
|
|
backgroundColor: theme.palette.error.lowContrast,
|
|
},
|
|
"& .MuiButton-loadingIndicator": {
|
|
// styles for error variant loading indicator
|
|
color: theme.palette.error.contrastText,
|
|
},
|
|
},
|
|
},
|
|
{
|
|
props: (props) => props.variant === "group",
|
|
style: {
|
|
/* color: theme.palette.secondary.contrastText, */
|
|
color: theme.palette.primary.contrastText,
|
|
backgroundColor: theme.palette.primary.main,
|
|
border: 1,
|
|
borderStyle: "solid",
|
|
borderColor: theme.palette.primary.lowContrast,
|
|
},
|
|
},
|
|
{
|
|
props: (props) => props.variant === "group" && props.filled === "true",
|
|
style: {
|
|
backgroundColor: theme.palette.secondary.main,
|
|
},
|
|
},
|
|
/* {
|
|
props: (props) => props.variant === "contained",
|
|
style: {
|
|
backgroundColor: `${theme.palette.accent.main} !important`,
|
|
},
|
|
}, */
|
|
|
|
{
|
|
props: (props) =>
|
|
props.variant === "contained" && props.color === "secondary",
|
|
style: {
|
|
border: 1,
|
|
borderStyle: "solid",
|
|
borderColor: theme.palette.primary.lowContrast,
|
|
},
|
|
},
|
|
{
|
|
props: (props) => {
|
|
return (
|
|
props.variant === "contained" &&
|
|
props.disabled &&
|
|
props?.classes?.loadingIndicator === undefined // Do not apply to loading button
|
|
);
|
|
},
|
|
style: {
|
|
backgroundColor: `${theme.palette.secondary.main} !important`,
|
|
color: `${theme.palette.secondary.contrastText} !important`,
|
|
},
|
|
},
|
|
|
|
{
|
|
props: { variant: "text", color: "info" },
|
|
style: {
|
|
textDecoration: "underline",
|
|
color: theme.palette.primary.contrastText,
|
|
padding: 0,
|
|
margin: 0,
|
|
fontSize: typographyLevels.m,
|
|
fontWeight: theme.typography.body2.fontWeight,
|
|
backgroundColor: "transparent",
|
|
"&:hover": {
|
|
backgroundColor: "transparent",
|
|
textDecoration: "underline",
|
|
},
|
|
"&.Mui-disabled": {
|
|
backgroundColor: "transparent",
|
|
color: theme.palette.text.primary,
|
|
opacity: 0.5,
|
|
"&.MuiButton-text": {
|
|
backgroundColor: "transparent",
|
|
},
|
|
},
|
|
minWidth: 0,
|
|
boxShadow: "none",
|
|
border: "none",
|
|
},
|
|
},
|
|
],
|
|
height: 34,
|
|
fontWeight: 400,
|
|
borderRadius: 4,
|
|
boxShadow: "none",
|
|
textTransform: "none",
|
|
"&:focus": {
|
|
outline: "none",
|
|
},
|
|
"&:hover": {
|
|
boxShadow: "none",
|
|
},
|
|
"&.Mui-disabled": {
|
|
backgroundColor: theme.palette.secondary.main,
|
|
color: theme.palette.primary.contrastText,
|
|
},
|
|
"&.MuiButton-root": {
|
|
"&:disabled": {
|
|
backgroundColor: theme.palette.secondary.main,
|
|
color: theme.palette.primary.contrastText,
|
|
},
|
|
"&.MuiButton-colorAccent:hover": {
|
|
boxShadow: `0 0 0 1px ${theme.palette.accent.main}`, // CAIO_REVIEW, this should really have a solid BG color
|
|
},
|
|
},
|
|
"&.MuiButton-loading": {
|
|
"&:disabled": {
|
|
color: "transparent",
|
|
},
|
|
|
|
"& .MuiButton-loadingIndicator": {
|
|
color: theme.palette.primary.contrastText,
|
|
},
|
|
},
|
|
}),
|
|
},
|
|
},
|
|
|
|
MuiIconButton: {
|
|
styleOverrides: {
|
|
root: ({ theme }) => ({
|
|
padding: 4,
|
|
transition: "none",
|
|
"&:hover": {
|
|
backgroundColor: theme.palette.primary.lowContrast,
|
|
},
|
|
}),
|
|
},
|
|
},
|
|
MuiPaper: {
|
|
styleOverrides: {
|
|
root: ({ theme }) => {
|
|
return {
|
|
marginTop: 4,
|
|
padding: 0,
|
|
border: 1,
|
|
borderStyle: "solid",
|
|
borderColor: theme.palette.primary.lowContrast,
|
|
borderRadius: 4,
|
|
boxShadow: shadow,
|
|
backgroundColor: theme.palette.primary.main,
|
|
backgroundImage: "none",
|
|
};
|
|
},
|
|
},
|
|
},
|
|
MuiList: {
|
|
styleOverrides: {
|
|
root: {
|
|
padding: 0,
|
|
},
|
|
},
|
|
},
|
|
MuiListItemButton: {
|
|
styleOverrides: {
|
|
root: {
|
|
transition: "none",
|
|
},
|
|
},
|
|
},
|
|
MuiListItemText: {
|
|
styleOverrides: {
|
|
root: ({ theme }) => ({
|
|
"& .MuiTypography-root": {
|
|
color: theme.palette.primary.contrastText,
|
|
},
|
|
}),
|
|
},
|
|
},
|
|
MuiMenuItem: {
|
|
styleOverrides: {
|
|
root: ({ theme }) => ({
|
|
borderRadius: 4,
|
|
backgroundColor: "inherit",
|
|
padding: "4px 6px",
|
|
color: theme.palette.primary.contrastTextSecondary,
|
|
fontSize: 13,
|
|
margin: 2,
|
|
minWidth: 100,
|
|
"&:hover, &.Mui-selected, &.Mui-selected:hover, &.Mui-selected.Mui-focusVisible":
|
|
{
|
|
backgroundColor: theme.palette.primary.lowContrast,
|
|
},
|
|
}),
|
|
},
|
|
},
|
|
MuiTableCell: {
|
|
styleOverrides: {
|
|
root: ({ theme }) => ({
|
|
fontSize: typographyLevels.base,
|
|
borderBottomColor: theme.palette.primary.lowContrast,
|
|
}),
|
|
},
|
|
},
|
|
MuiTableHead: {
|
|
styleOverrides: {
|
|
root: ({ theme }) => ({
|
|
backgroundColor: theme.palette.tertiary.main,
|
|
}),
|
|
},
|
|
},
|
|
MuiPagination: {
|
|
styleOverrides: {
|
|
root: ({ theme }) => ({
|
|
backgroundColor: theme.palette.primary.main,
|
|
border: 1,
|
|
borderStyle: "solid",
|
|
borderColor: theme.palette.primary.lowContrast,
|
|
"& button": {
|
|
color: theme.palette.primary.contrastTextTertiary,
|
|
borderRadius: 4,
|
|
},
|
|
"& li:first-of-type button, & li:last-of-type button": {
|
|
border: 1,
|
|
borderStyle: "solid",
|
|
borderColor: theme.palette.primary.lowContrast,
|
|
},
|
|
}),
|
|
},
|
|
},
|
|
MuiPaginationItem: {
|
|
styleOverrides: {
|
|
root: ({ theme }) => ({
|
|
"&:not(.MuiPaginationItem-ellipsis):hover, &.Mui-selected": {
|
|
backgroundColor: theme.palette.primary.lowContrast,
|
|
},
|
|
}),
|
|
},
|
|
},
|
|
MuiSkeleton: {
|
|
styleOverrides: {
|
|
root: ({ theme }) => ({
|
|
backgroundColor: theme.palette.primary.lowContrast,
|
|
}),
|
|
},
|
|
},
|
|
|
|
MuiTextField: {
|
|
styleOverrides: {
|
|
root: ({ theme }) => ({
|
|
"& fieldset": {
|
|
borderColor: theme.palette.primary.lowContrast,
|
|
borderRadius: theme.shape.borderRadius,
|
|
},
|
|
|
|
"& .MuiInputBase-input": {
|
|
padding: ".75em",
|
|
minHeight: "var(--env-var-height-2)",
|
|
fontSize: "var(--env-var-font-size-medium)",
|
|
fontWeight: 400,
|
|
color: palette.primary.contrastTextSecondary,
|
|
"&.Mui-disabled": {
|
|
opacity: 0.3,
|
|
WebkitTextFillColor: "unset",
|
|
},
|
|
"& .Mui-focused": {
|
|
/* color: "#ff0000", */
|
|
/* borderColor: theme.palette.primary.contrastText, */
|
|
},
|
|
},
|
|
|
|
"& .MuiInputBase-input:-webkit-autofill": {
|
|
transition: "background-color 5000s ease-in-out 0s",
|
|
WebkitBoxShadow: `0 0 0px 1000px ${theme.palette.primary.main} inset`,
|
|
WebkitTextFillColor: theme.palette.primary.contrastText,
|
|
},
|
|
|
|
"& .MuiInputBase-input.MuiOutlinedInput-input": {
|
|
padding: "0 var(--env-var-spacing-1-minus) !important",
|
|
},
|
|
|
|
"& .MuiOutlinedInput-root": {
|
|
color: theme.palette.primary.contrastTextSecondary,
|
|
borderRadius: 4,
|
|
},
|
|
|
|
"& .MuiOutlinedInput-notchedOutline": {
|
|
borderRadius: 4,
|
|
},
|
|
|
|
"& .MuiFormHelperText-root": {
|
|
color: palette.error.main,
|
|
opacity: 0.8,
|
|
fontSize: "var(--env-var-font-size-medium)",
|
|
marginLeft: 0,
|
|
},
|
|
|
|
"& .MuiFormHelperText-root.Mui-error": {
|
|
opacity: 0.8,
|
|
fontSize: "var(--env-var-font-size-medium)",
|
|
color: palette.error.main,
|
|
whiteSpace: "nowrap",
|
|
},
|
|
}),
|
|
},
|
|
},
|
|
|
|
MuiOutlinedInput: {
|
|
styleOverrides: {
|
|
root: {
|
|
"&.Mui-disabled .MuiOutlinedInput-notchedOutline": {
|
|
borderColor: palette.primary.contrastBorderDisabled,
|
|
},
|
|
"&.Mui-disabled:hover .MuiOutlinedInput-notchedOutline": {
|
|
borderColor: palette.primary.contrastBorderDisabled,
|
|
},
|
|
"&:hover .MuiOutlinedInput-notchedOutline": {
|
|
borderColor: palette.primary.lowContrast, // Adjust hover border color
|
|
},
|
|
"&.Mui-focused .MuiOutlinedInput-notchedOutline": {
|
|
borderColor: palette.accent.main, // Adjust focus border color
|
|
},
|
|
color: palette.primary.contrastText,
|
|
},
|
|
},
|
|
},
|
|
|
|
MuiAutocomplete: {
|
|
styleOverrides: {
|
|
root: ({ theme }) => ({
|
|
"& .MuiOutlinedInput-root": {
|
|
paddingTop: 0,
|
|
paddingBottom: 0,
|
|
},
|
|
"& fieldset": {
|
|
borderColor: theme.palette.primary.lowContrast,
|
|
borderRadius: theme.shape.borderRadius,
|
|
},
|
|
"& .MuiOutlinedInput-root:hover:not(:has(input:focus)):not(:has(textarea:focus)) fieldset":
|
|
{
|
|
borderColor: theme.palette.primary.lowContrast,
|
|
},
|
|
|
|
"& .MuiAutocomplete-tag": {
|
|
color: theme.palette.primary.contrastText,
|
|
backgroundColor: theme.palette.primary.lowContrast,
|
|
},
|
|
"& .MuiChip-deleteIcon": {
|
|
color: theme.palette.primary.contrastText, // CAIO_REVIEW
|
|
},
|
|
}),
|
|
},
|
|
},
|
|
MuiTab: {
|
|
styleOverrides: {
|
|
root: ({ theme }) => ({
|
|
color: theme.palette.tertiary.contrastText,
|
|
height: "34px",
|
|
minHeight: "34px",
|
|
borderRadius: 0,
|
|
textTransform: "none",
|
|
minWidth: "fit-content",
|
|
padding: `${theme.spacing(6)}px ${theme.spacing(4)}px`,
|
|
fontWeight: 400,
|
|
"&:focus-visible": {
|
|
color: theme.palette.primary.contrastText,
|
|
borderColor: theme.palette.tertiary.contrastText,
|
|
borderRightColor: theme.palette.primary.lowContrast,
|
|
},
|
|
"&.Mui-selected": {
|
|
color: theme.palette.secondary.contrastText,
|
|
},
|
|
"&:hover": {
|
|
borderColor: theme.palette.primary.lowContrast,
|
|
},
|
|
}),
|
|
},
|
|
variants: [
|
|
{
|
|
props: { orientation: "vertical" },
|
|
style: ({ theme }) => ({
|
|
alignItems: "flex-start",
|
|
padding: `${theme.spacing(1)}px ${theme.spacing(2)}px ${theme.spacing(1)}px ${theme.spacing(6)}px`,
|
|
minHeight: theme.spacing(12),
|
|
color: theme.palette.primary.contrastText,
|
|
backgroundColor: theme.palette.primary.main,
|
|
border: "none",
|
|
borderBottom: "none",
|
|
borderRight: "none",
|
|
borderRadius: theme.shape.borderRadius * 3,
|
|
margin: `${theme.spacing(1)}px ${theme.spacing(2)}px`,
|
|
"&.Mui-selected": {
|
|
color: theme.palette.primary.contrastText,
|
|
backgroundColor: theme.palette.tertiary.main,
|
|
opacity: 1,
|
|
border: "none",
|
|
borderBottom: "none",
|
|
borderRight: "none",
|
|
borderRadius: theme.shape.borderRadius * 3,
|
|
minHeight: theme.spacing(14),
|
|
},
|
|
"&:hover": {
|
|
backgroundColor: theme.palette.tertiary.main,
|
|
border: "none",
|
|
borderRadius: theme.shape.borderRadius * 3,
|
|
minHeight: theme.spacing(14),
|
|
},
|
|
}),
|
|
},
|
|
],
|
|
},
|
|
MuiSvgIcon: {
|
|
styleOverrides: {
|
|
root: ({ theme }) => ({
|
|
color: theme.palette.primary.contrastTextTertiary,
|
|
}),
|
|
},
|
|
},
|
|
MuiTabs: {
|
|
styleOverrides: {
|
|
root: ({ theme }) => ({
|
|
display: "inline-flex",
|
|
borderRadius: 0,
|
|
"& .MuiTabs-indicator": {
|
|
backgroundColor: theme.palette.tertiary.contrastText,
|
|
},
|
|
}),
|
|
},
|
|
variants: [
|
|
{
|
|
props: { orientation: "vertical" },
|
|
style: {
|
|
"& .MuiTabs-indicator": {
|
|
display: "none",
|
|
},
|
|
},
|
|
},
|
|
],
|
|
},
|
|
MuiSwitch: {
|
|
styleOverrides: {
|
|
root: ({ theme }) => ({
|
|
width: 42,
|
|
height: 26,
|
|
padding: 0,
|
|
"& .MuiSwitch-switchBase": {
|
|
padding: 0,
|
|
margin: 2,
|
|
transitionDuration: "300ms",
|
|
"&.Mui-checked": {
|
|
transform: "translateX(16px)",
|
|
color: "#fff",
|
|
"& + .MuiSwitch-track": {
|
|
backgroundColor: theme.palette.accent.main,
|
|
opacity: 1,
|
|
border: 0,
|
|
},
|
|
},
|
|
},
|
|
"& .MuiSwitch-thumb": {
|
|
boxSizing: "border-box",
|
|
width: 22,
|
|
height: 22,
|
|
},
|
|
"& .MuiSwitch-track": {
|
|
borderRadius: 13,
|
|
backgroundColor: theme.palette.secondary.light,
|
|
opacity: 1,
|
|
},
|
|
}),
|
|
},
|
|
},
|
|
MuiSelect: {
|
|
styleOverrides: {
|
|
root: ({ theme }) => ({
|
|
"& .MuiOutlinedInput-input": {
|
|
color: theme.palette.primary.contrastText,
|
|
},
|
|
"& .MuiOutlinedInput-notchedOutline": {
|
|
borderColor: theme.palette.primary.lowContrast,
|
|
borderRadius: theme.shape.borderRadius,
|
|
},
|
|
"& .MuiSelect-icon": {
|
|
color: theme.palette.primary.contrastTextSecondary, // Dropdown + color
|
|
},
|
|
"&:hover": {
|
|
backgroundColor: theme.palette.primary.main, // Background on hover
|
|
},
|
|
"&:hover .MuiOutlinedInput-notchedOutline": {
|
|
borderColor: theme.palette.primary.lowContrast,
|
|
},
|
|
}),
|
|
},
|
|
},
|
|
MuiButtonGroup: {
|
|
styleOverrides: {
|
|
root: ({ theme }) => ({
|
|
ml: "auto",
|
|
"& .MuiButtonBase-root, & .MuiButtonBase-root:hover": {
|
|
borderColor: theme.palette.primary.contrastBorder,
|
|
width: "auto",
|
|
whiteSpace: "nowrap",
|
|
},
|
|
}),
|
|
},
|
|
},
|
|
|
|
// This code is added for clock in maintenance page
|
|
// code starts from here.
|
|
MuiClock: {
|
|
// Directly target the clock component
|
|
styleOverrides: {
|
|
root: ({ theme }) => ({
|
|
backgroundColor: theme.palette.primary.main, // Alternative target
|
|
"& .MuiClock-clock": {
|
|
// Inner clock face
|
|
backgroundColor: theme.palette.secondary.main,
|
|
},
|
|
}),
|
|
},
|
|
},
|
|
MuiClockPicker: {
|
|
styleOverrides: {
|
|
root: ({ theme }) => ({
|
|
backgroundColor: theme.palette.secondary.main, // Outer container background
|
|
"& .MuiClock-root": {
|
|
color: theme.palette.primary.lowContrast,
|
|
},
|
|
"& .MuiClock-clock": {
|
|
backgroundColor: theme.palette.background.default, // Clock face background
|
|
borderColor: theme.palette.secondary.lowContrast,
|
|
},
|
|
}),
|
|
},
|
|
},
|
|
// The clock pointer ( pointer to number like hour/minute hand)
|
|
MuiClockPointer: {
|
|
styleOverrides: {
|
|
root: ({ theme }) => ({
|
|
// Main pointer line color
|
|
backgroundColor: theme.palette.accent.main,
|
|
"& .MuiClockPointer-thumb": {
|
|
backgroundColor: theme.palette.grey[500], // Use your desired grey
|
|
},
|
|
}),
|
|
},
|
|
},
|
|
// This is for numbers in the clock (circular one's)
|
|
MuiClockNumber: {
|
|
styleOverrides: {
|
|
root: ({ theme }) => ({
|
|
color: theme.palette.primary.contrastText,
|
|
"&.Mui-selected": {
|
|
color: theme.palette.accent.contrastText,
|
|
backgroundColor: theme.palette.accent.main,
|
|
},
|
|
}),
|
|
},
|
|
},
|
|
// This is for 00:00 am and pm (top bar)
|
|
MuiTimePickerToolbar: {
|
|
styleOverrides: {
|
|
root: ({ theme }) => ({
|
|
backgroundColor: theme.palette.secondary.lowContrast,
|
|
// General text color
|
|
"& .MuiTypography-root": {
|
|
color: theme.palette.primary.contrastTextTertiary,
|
|
},
|
|
// Selected time (hour/minute) color
|
|
"& .Mui-selected": {
|
|
color: `${theme.palette.accent.main} !important`,
|
|
},
|
|
// AM/PM buttons color
|
|
"& .MuiButtonBase-root": {
|
|
"&.Mui-selected": {
|
|
backgroundColor: theme.palette.accent.main,
|
|
},
|
|
},
|
|
}),
|
|
},
|
|
},
|
|
// left and right direction style
|
|
MuiPickersArrowSwitcher: {
|
|
styleOverrides: {
|
|
root: ({ theme }) => ({
|
|
"& .MuiIconButton-root": {
|
|
color: theme.palette.primary.contrastText,
|
|
},
|
|
}),
|
|
},
|
|
},
|
|
// cancel and okay actions style
|
|
MuiDialogActions: {
|
|
styleOverrides: {
|
|
root: ({ theme }) => ({
|
|
backgroundColor: theme.palette.primary.main,
|
|
}),
|
|
},
|
|
},
|
|
// code ends here.
|
|
|
|
// For labels of input fields
|
|
MuiInputLabel: {
|
|
styleOverrides: {
|
|
root: ({ theme }) => ({
|
|
"&.Mui-focused": {
|
|
color: theme.palette.accent.main,
|
|
},
|
|
}),
|
|
},
|
|
},
|
|
MuiTypography: {
|
|
variants: [
|
|
{
|
|
props: { variant: "monitorName" },
|
|
style: {
|
|
fontSize: typographyLevels.xl,
|
|
color: palette.primary.contrastText,
|
|
fontWeight: 500,
|
|
overflow: "hidden",
|
|
textOverflow: "ellipsis",
|
|
whiteSpace: "nowrap",
|
|
maxWidth: "calc((100vw - var(--env-var-width-2)) / 2)",
|
|
},
|
|
},
|
|
{
|
|
props: { variant: "monitorUrl" },
|
|
style: {
|
|
fontSize: typographyLevels.l,
|
|
color: palette.primary.contrastTextSecondary,
|
|
fontWeight: "bolder",
|
|
fontFamily: "monospace",
|
|
overflow: "hidden",
|
|
textOverflow: "ellipsis",
|
|
whiteSpace: "nowrap",
|
|
maxWidth: "calc((100vw - var(--env-var-width-2)) / 2)",
|
|
},
|
|
},
|
|
],
|
|
},
|
|
},
|
|
shape: {
|
|
borderRadius: 2,
|
|
borderThick: 2,
|
|
boxShadow: shadow,
|
|
},
|
|
});
|
|
|
|
export { baseTheme };
|