188 lines
4.0 KiB
TypeScript
188 lines
4.0 KiB
TypeScript
// theme.ts
|
|
import { Button, Menu, createTheme, MantineColorsTuple } from "@mantine/core"
|
|
|
|
/* -------- 1. 自定义颜色（可删/可改） -------- */
|
|
const brandColors: MantineColorsTuple = [
|
|
"#E8F3FF",
|
|
"#D6E8FF",
|
|
"#B8D5FF",
|
|
"#8DBAFF",
|
|
"#5C9AFF",
|
|
"#3283FF",
|
|
"#1874FF",
|
|
"#0F68EB",
|
|
"#0D59C9",
|
|
"#0B4AA6",
|
|
]
|
|
|
|
const greyColors: MantineColorsTuple = [
|
|
"#FFFFFF",
|
|
"#F7F8F9",
|
|
"#F1F2F4",
|
|
"#DCDFE4",
|
|
"#B5BBC2",
|
|
"#8F979F",
|
|
"#5D6872",
|
|
"#47535F",
|
|
"#1B2A38",
|
|
"#0F151B",
|
|
]
|
|
|
|
const darkColors: MantineColorsTuple = [
|
|
"#FFFFFF",
|
|
"#EBEEF7",
|
|
"#D3D4D8",
|
|
"#7E858F",
|
|
"#3C4859",
|
|
"#2B3648",
|
|
"#212A39",
|
|
"#1A222D",
|
|
"#151C24",
|
|
"#0D0E12",
|
|
]
|
|
|
|
const successColors: MantineColorsTuple = [
|
|
"#E6FCF5",
|
|
"#C3FAE8",
|
|
"#96F2D7",
|
|
"#5BE7B6",
|
|
"#38D9A9",
|
|
"#20C997",
|
|
"#0EA879",
|
|
"#07815B",
|
|
"#076B3F",
|
|
"#043E22",
|
|
]
|
|
|
|
/* -------- 2. 创建主题 -------- */
|
|
export const theme = createTheme({
|
|
/* ---- 颜色系统 ---- */
|
|
primaryColor: "brand",
|
|
cursorType: "pointer",
|
|
// primaryShade: { light: 5, dark: 6 },
|
|
colors: {
|
|
brand: brandColors,
|
|
success: successColors,
|
|
grey: greyColors,
|
|
dark: darkColors,
|
|
},
|
|
|
|
/* ---- 圆角 ---- */
|
|
defaultRadius: "md",
|
|
radius: {
|
|
xs: "2px",
|
|
sm: "4px",
|
|
md: "8px",
|
|
lg: "12px",
|
|
xl: "16px",
|
|
xxl: "24px",
|
|
},
|
|
|
|
/* ---- 字体排版 ---- */
|
|
fontFamily:
|
|
'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
|
|
fontFamilyMonospace:
|
|
'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
|
|
fontSizes: {
|
|
xs: "0.75rem",
|
|
sm: "0.875rem",
|
|
md: "1rem",
|
|
lg: "1.125rem",
|
|
xl: "1.25rem",
|
|
xxl: "1.5rem",
|
|
},
|
|
headings: {
|
|
fontFamily:
|
|
'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
|
|
fontWeight: "700",
|
|
sizes: {
|
|
h1: { fontSize: "2.25rem", lineHeight: "1.2" },
|
|
h2: { fontSize: "1.875rem", lineHeight: "1.3" },
|
|
h3: { fontSize: "1.5rem", lineHeight: "1.35" },
|
|
h4: { fontSize: "1.25rem", lineHeight: "1.4" },
|
|
h5: { fontSize: "1.125rem", lineHeight: "1.45" },
|
|
h6: { fontSize: "1rem", lineHeight: "1.5" },
|
|
},
|
|
},
|
|
|
|
/* ---- 间距 ---- */
|
|
spacing: {
|
|
xs: "8px",
|
|
sm: "12px",
|
|
md: "16px",
|
|
lg: "24px",
|
|
xl: "32px",
|
|
xxl: "48px",
|
|
},
|
|
|
|
/* ---- 阴影 ---- */
|
|
shadows: {
|
|
xs: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
|
|
sm: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
|
|
md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
|
|
lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
|
|
xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
|
|
},
|
|
|
|
/* ---- 响应式断点 ---- */
|
|
breakpoints: {
|
|
xs: "36em", // 576px
|
|
sm: "48em", // 768px
|
|
md: "62em", // 992px
|
|
lg: "75em", // 1200px
|
|
xl: "88em", // 1408px
|
|
},
|
|
|
|
/* ---- 默认渐变 ---- */
|
|
defaultGradient: {
|
|
from: "brand",
|
|
to: "success",
|
|
deg: 45,
|
|
},
|
|
|
|
/* ---- 组件默认行为（示例） ---- */
|
|
components: {
|
|
Button: Button.extend({
|
|
styles() {
|
|
return {
|
|
root: {
|
|
outline: "none",
|
|
},
|
|
}
|
|
},
|
|
}),
|
|
Menu: Menu.extend({
|
|
defaultProps: {
|
|
radius: "sm",
|
|
shadow: "sm",
|
|
},
|
|
styles() {
|
|
return {
|
|
dropdown: {
|
|
border: "1px solid #E5E6EB",
|
|
borderRadius: "4px",
|
|
background: "#FFFFFF",
|
|
boxShadow: "0 8px 20px rgba(15, 23, 42, 0.08)",
|
|
padding: "4px",
|
|
},
|
|
item: {
|
|
minHeight: "28px",
|
|
borderRadius: "4px",
|
|
padding: "4px 8px",
|
|
fontSize: "12px",
|
|
lineHeight: "20px",
|
|
color: "#4E5969",
|
|
},
|
|
arrow: {
|
|
borderTopColor: "#E5E6EB",
|
|
borderRightColor: "#E5E6EB",
|
|
borderBottomColor: "#E5E6EB",
|
|
borderLeftColor: "#E5E6EB",
|
|
background: "#FFFFFF",
|
|
},
|
|
}
|
|
},
|
|
}),
|
|
},
|
|
})
|