120 lines
2.9 KiB
TypeScript
120 lines
2.9 KiB
TypeScript
import { createTheme } from "@mui/material";
|
|
import { lightPalette, darkPalette, typographyLevels } from "./palette";
|
|
|
|
import type { Theme } from "@mui/material/styles";
|
|
|
|
export type PaletteKey = {
|
|
[K in keyof Theme["palette"]]: Theme["palette"][K] extends { main: any }
|
|
? K
|
|
: never;
|
|
}[keyof Theme["palette"]];
|
|
|
|
const fontFamilyPrimary = 'system-ui, sans-serif';
|
|
const shadow =
|
|
"0px 4px 24px -4px rgba(16, 24, 40, 0.08), 0px 3px 3px -3px rgba(16, 24, 40, 0.03)";
|
|
|
|
export const theme = (mode: string, palette: any) =>
|
|
createTheme({
|
|
breakpoints: {
|
|
values: {
|
|
xs: 300,
|
|
sm: 600,
|
|
md: 900,
|
|
lg: 1200,
|
|
xl: 1536,
|
|
},
|
|
},
|
|
spacing: 2,
|
|
palette: {
|
|
mode: mode,
|
|
...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,
|
|
},
|
|
|
|
body1: {
|
|
fontSize: typographyLevels.m,
|
|
color: palette.primary.contrastTextTertiary,
|
|
fontWeight: 400,
|
|
},
|
|
body2: {
|
|
fontSize: typographyLevels.s,
|
|
color: palette.primary.contrastTextTertiary,
|
|
fontWeight: 400,
|
|
},
|
|
},
|
|
|
|
components: {
|
|
MuiButtonBase: {
|
|
defaultProps: {
|
|
disableRipple: true,
|
|
},
|
|
},
|
|
MuiFormLabel: {
|
|
styleOverrides: {
|
|
root: ({ theme }) => ({
|
|
fontSize: typographyLevels.base,
|
|
"&.Mui-focused": {
|
|
color: theme.palette.secondary.contrastText,
|
|
},
|
|
}),
|
|
},
|
|
},
|
|
MuiInputLabel: {
|
|
styleOverrides: {
|
|
root: ({ theme }) => ({
|
|
top: `-${theme.spacing(4)}`,
|
|
"&.MuiInputLabel-shrink": {
|
|
top: 0,
|
|
},
|
|
}),
|
|
},
|
|
},
|
|
|
|
MuiOutlinedInput: {
|
|
styleOverrides: {
|
|
root: {
|
|
"&.Mui-focused .MuiOutlinedInput-notchedOutline": {
|
|
borderColor: palette.accent.main,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
|
|
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",
|
|
};
|
|
},
|
|
},
|
|
},
|
|
},
|
|
shape: {
|
|
borderRadius: 2,
|
|
},
|
|
});
|
|
|
|
export const lightTheme = createTheme(theme("light", lightPalette));
|
|
export const darkTheme = createTheme(theme("dark", darkPalette));
|