# 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    | 白色 | 用于背景、弹窗等需要高亮显示的地方 |