270 lines
7.5 KiB
JavaScript
270 lines
7.5 KiB
JavaScript
import { createTheme } from "@mui/material/styles";
|
|
|
|
const token = (name) => `var(--${name})`;
|
|
|
|
export const theme = createTheme({
|
|
palette: {
|
|
mode: "light",
|
|
primary: {
|
|
main: "hsl(221, 83%, 53%)",
|
|
contrastText: "hsl(0, 0%, 100%)"
|
|
},
|
|
success: {
|
|
main: "hsl(142, 76%, 36%)"
|
|
},
|
|
warning: {
|
|
main: "hsl(32, 95%, 44%)"
|
|
},
|
|
error: {
|
|
main: "hsl(0, 72%, 51%)"
|
|
},
|
|
background: {
|
|
default: "hsl(215, 47%, 97%)",
|
|
paper: "hsl(0, 0%, 100%)"
|
|
},
|
|
text: {
|
|
primary: "hsl(222, 47%, 11%)",
|
|
secondary: "hsl(215, 25%, 35%)",
|
|
disabled: "hsl(215, 16%, 47%)"
|
|
},
|
|
divider: "hsl(216, 37%, 89%)"
|
|
},
|
|
typography: {
|
|
fontFamily: '-apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif',
|
|
fontSize: 14,
|
|
allVariants: {
|
|
fontSize: 14
|
|
},
|
|
button: {
|
|
fontSize: 14,
|
|
textTransform: "none",
|
|
fontWeight: 650
|
|
}
|
|
},
|
|
shape: {
|
|
borderRadius: 8
|
|
},
|
|
components: {
|
|
MuiButton: {
|
|
defaultProps: {
|
|
disableRipple: false
|
|
},
|
|
styleOverrides: {
|
|
root: {
|
|
minWidth: 0,
|
|
height: token("control-height"),
|
|
borderRadius: token("radius-control"),
|
|
padding: `0 ${token("space-3")}`,
|
|
fontSize: 14,
|
|
transition:
|
|
"background-color 150ms cubic-bezier(0.2, 0, 0, 1), border-color 150ms cubic-bezier(0.2, 0, 0, 1), box-shadow 150ms cubic-bezier(0.2, 0, 0, 1), transform 220ms cubic-bezier(0.16, 1, 0.3, 1)"
|
|
},
|
|
outlined: {
|
|
borderColor: token("border"),
|
|
color: token("text-secondary"),
|
|
backgroundColor: token("bg-card"),
|
|
"&:hover": {
|
|
borderColor: token("primary-border-strong"),
|
|
backgroundColor: token("primary-hover"),
|
|
color: token("text-primary")
|
|
}
|
|
},
|
|
containedPrimary: {
|
|
backgroundColor: token("primary"),
|
|
"&:hover": {
|
|
backgroundColor: token("primary-strong")
|
|
}
|
|
}
|
|
}
|
|
},
|
|
MuiCard: {
|
|
styleOverrides: {
|
|
root: {
|
|
border: `1px solid ${token("border")}`,
|
|
borderRadius: token("radius-card"),
|
|
backgroundColor: token("bg-card"),
|
|
backgroundImage: "none",
|
|
color: token("text-primary"),
|
|
transition:
|
|
"border-color 220ms cubic-bezier(0.2, 0, 0, 1), box-shadow 220ms cubic-bezier(0.2, 0, 0, 1), transform 220ms cubic-bezier(0.16, 1, 0.3, 1)"
|
|
}
|
|
}
|
|
},
|
|
MuiChip: {
|
|
styleOverrides: {
|
|
root: {
|
|
height: token("admin-tag-height"),
|
|
border: `1px solid ${token("admin-tag-border")}`,
|
|
borderRadius: token("admin-tag-radius"),
|
|
backgroundColor: token("admin-tag-bg"),
|
|
color: token("admin-tag-color"),
|
|
fontSize: token("admin-tag-font-size"),
|
|
fontWeight: token("admin-tag-font-weight"),
|
|
transition:
|
|
"background-color 150ms cubic-bezier(0.2, 0, 0, 1), border-color 150ms cubic-bezier(0.2, 0, 0, 1), color 150ms cubic-bezier(0.2, 0, 0, 1), transform 220ms cubic-bezier(0.16, 1, 0.3, 1)"
|
|
},
|
|
icon: {
|
|
marginLeft: 8,
|
|
marginRight: -2
|
|
},
|
|
label: {
|
|
paddingLeft: token("admin-tag-padding-x"),
|
|
paddingRight: token("admin-tag-padding-x")
|
|
}
|
|
}
|
|
},
|
|
MuiIconButton: {
|
|
styleOverrides: {
|
|
root: {
|
|
borderRadius: token("radius-control"),
|
|
color: token("text-secondary"),
|
|
transition:
|
|
"background-color 150ms cubic-bezier(0.2, 0, 0, 1), border-color 150ms cubic-bezier(0.2, 0, 0, 1), color 150ms cubic-bezier(0.2, 0, 0, 1), transform 220ms cubic-bezier(0.16, 1, 0.3, 1)"
|
|
}
|
|
}
|
|
},
|
|
MuiInputBase: {
|
|
styleOverrides: {
|
|
root: {
|
|
fontSize: 14
|
|
},
|
|
input: {
|
|
fontSize: 14,
|
|
"&[type='number']": {
|
|
MozAppearance: "textfield"
|
|
},
|
|
"&[type='number']::-webkit-outer-spin-button, &[type='number']::-webkit-inner-spin-button": {
|
|
WebkitAppearance: "none",
|
|
margin: 0
|
|
},
|
|
"&::placeholder": {
|
|
color: token("text-tertiary"),
|
|
opacity: 1
|
|
}
|
|
}
|
|
}
|
|
},
|
|
MuiMenu: {
|
|
styleOverrides: {
|
|
paper: {
|
|
border: `1px solid ${token("border")}`,
|
|
backgroundImage: "none",
|
|
backgroundColor: token("bg-card"),
|
|
transformOrigin: "top right"
|
|
}
|
|
}
|
|
},
|
|
MuiSelect: {
|
|
styleOverrides: {
|
|
root: {
|
|
color: token("text-secondary"),
|
|
fontSize: 14
|
|
},
|
|
icon: {
|
|
color: token("text-secondary")
|
|
}
|
|
}
|
|
},
|
|
MuiSwitch: {
|
|
defaultProps: {
|
|
disableRipple: true
|
|
},
|
|
styleOverrides: {
|
|
root: {
|
|
width: token("switch-width"),
|
|
height: token("switch-height"),
|
|
padding: 0,
|
|
margin: `0 ${token("space-2")}`,
|
|
overflow: "visible"
|
|
},
|
|
switchBase: {
|
|
padding: token("switch-padding"),
|
|
color: token("active-contrast"),
|
|
transition: "transform 220ms cubic-bezier(0.16, 1, 0.3, 1)",
|
|
"&.Mui-checked": {
|
|
color: token("active-contrast"),
|
|
transform: `translateX(${token("switch-translate-x")})`,
|
|
"& + .MuiSwitch-track": {
|
|
borderColor: token("primary-border"),
|
|
background: token("brand-gradient"),
|
|
boxShadow: token("shadow-soft"),
|
|
opacity: 1
|
|
},
|
|
"& .MuiSwitch-thumb": {
|
|
boxShadow: token("shadow-soft")
|
|
}
|
|
},
|
|
"&.Mui-disabled": {
|
|
color: token("active-contrast"),
|
|
"& + .MuiSwitch-track": {
|
|
opacity: 0.5
|
|
}
|
|
}
|
|
},
|
|
thumb: {
|
|
width: token("switch-thumb-size"),
|
|
height: token("switch-thumb-size"),
|
|
backgroundColor: token("active-contrast"),
|
|
boxShadow: token("shadow-soft")
|
|
},
|
|
track: {
|
|
border: `1px solid ${token("border")}`,
|
|
borderRadius: token("radius-pill"),
|
|
backgroundColor: token("bg-card-strong"),
|
|
boxShadow: "none",
|
|
opacity: 1,
|
|
transition:
|
|
"background 220ms cubic-bezier(0.2, 0, 0, 1), border-color 220ms cubic-bezier(0.2, 0, 0, 1), box-shadow 220ms cubic-bezier(0.2, 0, 0, 1)"
|
|
}
|
|
}
|
|
},
|
|
MuiOutlinedInput: {
|
|
styleOverrides: {
|
|
notchedOutline: {
|
|
borderColor: token("border")
|
|
},
|
|
root: {
|
|
backgroundColor: token("bg-input"),
|
|
backdropFilter: token("glass-blur"),
|
|
transition:
|
|
"background-color 150ms cubic-bezier(0.2, 0, 0, 1), border-color 220ms cubic-bezier(0.2, 0, 0, 1)",
|
|
"&:hover .MuiOutlinedInput-notchedOutline": {
|
|
borderColor: token("primary-border-strong")
|
|
},
|
|
"&.Mui-focused .MuiOutlinedInput-notchedOutline": {
|
|
borderColor: token("primary")
|
|
},
|
|
"&.Mui-focused": {
|
|
boxShadow: "none"
|
|
}
|
|
}
|
|
}
|
|
},
|
|
MuiFormLabel: {
|
|
styleOverrides: {
|
|
root: {
|
|
fontSize: 14
|
|
},
|
|
asterisk: {
|
|
color: token("danger"),
|
|
marginLeft: 2
|
|
}
|
|
}
|
|
},
|
|
MuiFormHelperText: {
|
|
styleOverrides: {
|
|
root: {
|
|
fontSize: 14
|
|
}
|
|
}
|
|
},
|
|
MuiMenuItem: {
|
|
styleOverrides: {
|
|
root: {
|
|
fontSize: 14
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|