194 lines
10 KiB
Markdown
194 lines
10 KiB
Markdown
# Material Design 3 主题配置说明
|
||
|
||
## 简介
|
||
|
||
Material Design 3 (MD3) 主题配置提供了一套完整的接口定义，用于构建符合MD3设计规范的主题。这包括颜色调色板、亮色和暗色模式的颜色方案等。
|
||
|
||
## 代码示例
|
||
|
||
```typescript
|
||
import { generateTheme } from './generateTheme';
|
||
|
||
const theme = generateTheme({
|
||
primary: '#FF6F00',
|
||
secondary: '#00B0FF',
|
||
tertiary: '#00C853',
|
||
error: '#B00020',
|
||
info: '#304FFE',
|
||
warning: '#FF9100',
|
||
success: '#00C853',
|
||
neutral: '#000000',
|
||
neutralVariant: '#757575',
|
||
});
|
||
```
|
||
|
||
## 返回值
|
||
|
||
生成的主题对象包含以下属性：
|
||
|
||
| 属性名称 | 描述 |
|
||
| ----------- | -------------------- |
|
||
| palette | 主题的颜色调色板 |
|
||
| lightScheme | 亮色模式下的颜色方案 |
|
||
| darkScheme | 暗色模式下的颜色方案 |
|
||
|
||
## MD3ColorSchemeTokens 接口
|
||
|
||
`MD3ColorSchemeTokens` 定义了颜色方案的详细配置，包括亮色模式和暗色模式。
|
||
|
||
### 主色（Primary）
|
||
|
||
| 属性名称 | 描述 | 用途 |
|
||
| ------------------ | ------------------------------ | -------------------------------- |
|
||
| primary | 主色 | 用于按钮、开关等主色调背景 |
|
||
| onPrimary | 主色上的文本和图标颜色 | 用于主色调背景上的文本和图标 |
|
||
| primaryContainer | 主色容器颜色 | 用于卡片、对话框等主色调背景 |
|
||
| onPrimaryContainer | 主色容器颜色上的文本和图标颜色 | 用于主色调容器背景上的文本和图标 |
|
||
|
||
### 次色（Secondary）
|
||
|
||
| 属性名称 | 描述 | 用途 |
|
||
| -------------------- | ------------------------------ | -------------------------------- |
|
||
| secondary | 次色 | 用于按钮、开关等次色调背景 |
|
||
| onSecondary | 次色上的文本和图标颜色 | 用于次色调背景上的文本和图标 |
|
||
| secondaryContainer | 次色容器颜色 | 用于卡片、对话框等次色调背景 |
|
||
| onSecondaryContainer | 次色容器颜色上的文本和图标颜色 | 用于次色调容器背景上的文本和图标 |
|
||
|
||
### 第三色（Tertiary）
|
||
|
||
| 属性名称 | 描述 | 用途 |
|
||
| ------------------- | -------------------------------- | ---------------------------------- |
|
||
| tertiary | 第三色 | 用于按钮、开关等第三色调背景 |
|
||
| onTertiary | 第三色上的文本和图标颜色 | 用于第三色调背景上的文本和图标 |
|
||
| tertiaryContainer | 第三色容器颜色 | 用于卡片、对话框等第三色调背景 |
|
||
| onTertiaryContainer | 第三色容器颜色上的文本和图标颜色 | 用于第三色调容器背景上的文本和图标 |
|
||
|
||
### 错误色（Error）
|
||
|
||
| 属性名称 | 描述 | 用途 |
|
||
| ---------------- | ------------------------------ | ------------------------------ |
|
||
| error | 错误色 | 用于错误提示按钮、文本等 |
|
||
| onError | 错误色上的文本和图标颜色 | 用于错误色背景上的文本和图标 |
|
||
| errorContainer | 错误容器颜色 | 用于错误提示卡片、对话框等 |
|
||
| onErrorContainer | 错误容器颜色上的文本和图标颜色 | 用于错误容器背景上的文本和图标 |
|
||
|
||
### 信息色（Info）
|
||
|
||
| 属性名称 | 描述 | 用途 |
|
||
| --------------- | ------------------------------ | ------------------------------ |
|
||
| info | 信息色 | 用于信息提示按钮、文本等 |
|
||
| onInfo | 信息色上的文本和图标颜色 | 用于信息色背景上的文本和图标 |
|
||
| infoContainer | 信息容器颜色 | 用于信息提示卡片、对话框等 |
|
||
| onInfoContainer | 信息容器颜色上的文本和图标颜色 | 用于信息容器背景上的文本和图标 |
|
||
|
||
### 警告色（Warning）
|
||
|
||
| 属性名称 | 描述 | 用途 |
|
||
| ------------------ | ------------------------------ | ------------------------------ |
|
||
| warning | 警告色 | 用于警告提示按钮、文本等 |
|
||
| onWarning | 警告色上的文本和图标颜色 | 用于警告色背景上的文本和图标 |
|
||
| warningContainer | 警告容器颜色 | 用于警告提示卡片、对话框等 |
|
||
| onWarningContainer | 警告容器颜色上的文本和图标颜色 | 用于警告容器背景上的文本和图标 |
|
||
|
||
### 成功色（Success）
|
||
|
||
| 属性名称 | 描述 | 用途 |
|
||
| ------------------ | ------------------------------ | ------------------------------ |
|
||
| success | 成功色 | 用于成功提示按钮、文本等 |
|
||
| onSuccess | 成功色上的文本和图标颜色 | 用于成功色背景上的文本和图标 |
|
||
| successContainer | 成功容器颜色 | 用于成功提示卡片、对话框等 |
|
||
| onSuccessContainer | 成功容器颜色上的文本和图标颜色 | 用于成功容器背景上的文本和图标 |
|
||
|
||
### 背景和表面（Background and Surface）
|
||
|
||
| 属性名称 | 描述 | 用途 |
|
||
| ----------------------- | ---------------------------- | ------------------------------ |
|
||
| background | 背景色 | 用于应用或网页的背景色 |
|
||
| onBackground | 背景色上的文本和图标颜色 | 用于背景色上的文本和图标 |
|
||
| surface | 表面色 | 用于表面元素，如卡片、对话框等 |
|
||
| onSurface | 表面色上的文本和图标颜色 | 用于表面元素上的文本和图标 |
|
||
| surfaceVariant | 表面变体色 | 用于不同层次的表面元素 |
|
||
| onSurfaceVariant | 表面变体色上的文本和图标颜色 | 用于表面变体元素上的文本和图标 |
|
||
| surfaceContainerLowest | 最低表面容器颜色 | 用于最低层次的容器背景色 |
|
||
| surfaceContainerLow | 低表面容器颜色 | 用于低层次的容器背景色 |
|
||
| surfaceContainer | 表面容器颜色 | 用于中层次的容器背景色 |
|
||
| surfaceContainerHigh | 高表面容器颜色 | 用于高层次的容器背景色 |
|
||
| surfaceContainerHighest | 最高表面容器颜色 | 用于最高层次的容器背景色 |
|
||
|
||
### 其他（Others）
|
||
|
||
| 属性名称 | 描述 | 用途 |
|
||
| ---------------- | ---------------------------- | ---------------------------- |
|
||
| inverseSurface | 反色表面色 | 用于在暗色背景上提供亮色表面 |
|
||
| inverseOnSurface | 反色表面色上的文本和图标颜色 | 用于在暗色背景上的文本和图标 |
|
||
| inversePrimary | 反色主色 | 用于在暗色背景上提供主色调 |
|
||
| surfaceTint | 表面色调 | 用于调整表面元素的颜色深浅 |
|
||
| outline | 轮廓色 | 用于边框、线条等 |
|
||
| outlineVariant | 轮廓变体色 | 用于不同层次的边框、线条等 |
|
||
| shadow | 阴影色 | 用于提供阴影效果，增强立体感 |
|
||
|
||
## MD3Palettes 接口
|
||
|
||
`MD3Palettes` 定义了主题的颜色调色板，包括各种色调的集合。
|
||
|
||
### 主色调（Primary）
|
||
|
||
| 属性名称 | 色调值 | 描述 | 用途 |
|
||
| -------- | ------ | ------ | -------------------------- |
|
||
| primary | 0-100 | 主色调 | 用于按钮、开关等主色调背景 |
|
||
|
||
### 次色调（Secondary）
|
||
|
||
| 属性名称 | 色调值 | 描述 | 用途 |
|
||
| --------- | ------ | ------ | -------------------------- |
|
||
| secondary | 0-100 | 次色调 | 用于按钮、开关等次色调背景 |
|
||
|
||
### 第三色（Tertiary）
|
||
|
||
| 属性名称 | 色调值 | 描述 | 用途 |
|
||
| -------- | ------ | ------ | ---------------------------- |
|
||
| tertiary | 0-100 | 第三色 | 用于按钮、开关等第三色调背景 |
|
||
|
||
### 错误色（Error）
|
||
|
||
| 属性名称 | 色调值 | 描述 | 用途 |
|
||
| -------- | ------ | ------ | ------------------------ |
|
||
| error | 0-100 | 错误色 | 用于错误提示按钮、文本等 |
|
||
|
||
### 信息色（Info）
|
||
|
||
| 属性名称 | 色调值 | 描述 | 用途 |
|
||
| -------- | ------ | ------ | ------------------------ |
|
||
| info | 0-100 | 信息色 | 用于信息提示按钮、文本等 |
|
||
|
||
### 警告色（Warning）
|
||
|
||
| 属性名称 | 色调值 | 描述 | 用途 |
|
||
| -------- | ------ | ------ | ------------------------ |
|
||
| warning | 0-100 | 警告色 | 用于警告提示按钮、文本等 |
|
||
|
||
### 成功色（Success）
|
||
|
||
| 属性名称 | 色调值 | 描述 | 用途 |
|
||
| -------- | ------ | ------ | ------------------------ |
|
||
| success | 0-100 | 成功色 | 用于成功提示按钮、文本等 |
|
||
|
||
### 中性色（Neutral）
|
||
|
||
| 属性名称 | 色调值 | 描述 | 用途 |
|
||
| -------- | ------ | ------ | ------------------------ |
|
||
| neutral | 0-100 | 中性色 | 用于文本、图标等默认颜色 |
|
||
|
||
### 中性色变体（Neutral Variant）
|
||
|
||
| 属性名称 | 色调值 | 描述 | 用途 |
|
||
| -------------- | ------ | ---------- | ---------------------------------- |
|
||
| neutralVariant | 0-100 | 中性色变体 | 用于提供中性色的变体，以增加层次感 |
|
||
|
||
### 常用颜色（Common）
|
||
|
||
| 属性名称 | 描述 | 用途 |
|
||
| -------- | ---- | ---------------------------------- |
|
||
| black | 黑色 | 用于文本、图标等需要强调的地方 |
|
||
| white | 白色 | 用于背景、弹窗等需要高亮显示的地方 |
|