# HyperOS 设计 Token 参考

> 完整的设计 Token 体系：colorToken（88 个字段，含深色模式）、radiusToken（圆角）、Fonts（字体）、spaceToken（间距）、ColorType（5 种色系）。字段和取值以 `src/hyperOS/styles` 下的源码为准。

## 颜色 Token (`colorToken`)

通过 `ConfigContext` 获取，支持深色模式自动切换。

```tsx
import { colorToken } from 'mhui-rn';
// 或
const { colorToken } = useContext(ConfigContext);
```

### 内容色（Content）

| Token | 用途 |
|---|---|
| `contentPrimaryNormal` | 主要文字 |
| `contentPrimaryPress` | 主要文字按压态 |
| `contentSecondaryNormal` | 次要文字 |
| `contentSecondaryPress` | 次要文字按压态 |
| `contentTertiaryNormal` | 三级文字 |
| `contentTertiaryPress` | 三级文字按压态 |
| `contentQuaternaryNormal` | 四级文字 |
| `contentQuaternaryPress` | 四级文字按压态 |
| `contentDisabledPrimary` | 禁用主要文字 |
| `contentDisabledSecondary` | 禁用次要文字 |
| `contentInverseNormal` | 反色文字 |
| `contentInverseDisabled` | 反色禁用文字 |

### 表面色（Surface）

| Token | 用途 |
|---|---|
| `surfacePageBase` | 页面基础背景 |
| `surfacePageLow` | 页面低层背景 |
| `surfaceModalBase` | 弹窗背景 |
| `surfaceModalLow` | 弹窗低层背景 |
| `surfaceToast` | Toast 背景 |
| `surfacePopover` | 弹出菜单背景 |
| `surfaceCardPrimary` | 卡片主背景 |
| `surfaceCardModal` | 卡片弹窗背景 |
| `surfaceCardTranslucent` | 半透明卡片 |
| `surfaceCardSubtle` | 微弱卡片背景 |

### 填充色（Fill）

| Token | 用途 |
|---|---|
| `fillPrimary` | 主要填充 |
| `fillSecondary` | 次要填充 |
| `fillTertiary` | 三级填充 |
| `fillQuaternary` | 四级填充 |
| `fillInverse` | 反色填充 |
| `fillSwitchNormal` | Switch 常态填充 |
| `fillSwitchDisabled` | Switch 禁用填充 |

### 分割线（Divider）

| Token | 用途 |
|---|---|
| `dividerPrimary` | 主要分割线 |
| `dividerSecondary` | 次要分割线 |

### 遮罩

| Token | 用途 |
|---|---|
| `mask` | 弹窗遮罩层 |

### 强调色（Accent）

9 组强调色，每组 4 个变体：

| 色系 | Fill | Content | Low | Subtle |
|---|---|---|---|---|
| Yellow | `accentYellowFill` | `accentYellowContent` | `accentYellowLow` | `accentYellowSubtle` |
| Blue | `accentBlueFill` | `accentBlueContent` | `accentBlueLow` | `accentBlueSubtle` |
| Green | `accentGreenFill` | `accentGreenContent` | `accentGreenLow` | `accentGreenSubtle` |
| Orange | `accentOrangeFill` | `accentOrangeContent` | `accentOrangeLow` | `accentOrangeSubtle` |
| Wathet | `accentWathetFill` | `accentWathetContent` | `accentWathetLow` | `accentWathetSubtle` |
| Purple | `accentPurpleFill` | `accentPurpleContent` | `accentPurpleLow` | `accentPurpleSubtle` |
| Red | `accentRedFill` | `accentRedContent` | `accentRedLow` | `accentRedSubtle` |
| OS | `accentOsFill` | `accentOsContent` | `accentOsLow` | `accentOsSubtle` |
| Apricot Orange | `accentApricotOrangeFill` | `accentApricotOrangeContent` | `accentApricotOrangeLow` | `accentApricotOrangeSubtle` |

### 静态色（Static）

静态色不随主题语义变化，主要用于固定的黑白叠加色：

| Token | 用途 |
|---|---|
| `staticBlack` | 静态黑色 |
| `staticBlack80` / `staticBlack50` / `staticBlack40` / `staticBlack30` / `staticBlack10` | 静态黑色不同透明度 |
| `staticWhite` | 静态白色 |
| `staticWhite80` / `staticWhite70` / `staticWhite60` / `staticWhite50` / `staticWhite40` / `staticWhite30` / `staticWhite20` / `staticWhite15` / `staticWhite10` | 静态白色不同透明度 |

### 其他

| Token | 用途 |
|---|---|
| `otherBorder` | 边框 |
| `otherButtonPressed` | 按钮按压态叠加 |
| `otherListPressed` | 列表按压态叠加 |
| `otherAlertShadow` | 告警堆叠阴影 |

---

## 圆角 Token (`radiusToken`)

```tsx
import { radiusToken } from 'mhui-rn';
```

| Token | 值 | 用途 |
|---|---|---|
| `dialog` | 32 | 弹窗 |
| `drawer` | 32 | 抽屉 |
| `floatingWindow` | 32 | 浮窗 |
| `menuContainer` | 20 | 菜单容器 |
| `menuItem` | 14 | 菜单项 |
| `cardExtraLarge` | 24 | 超大卡片 |
| `cardLarge` | 20 | 大卡片 |
| `cardMedium` | 16 | 中卡片 |
| `cardSmall` | 14 | 小卡片 |
| `cardExtraSmall` | 12 | 超小卡片 |
| `buttonLarge` | 24 | 大按钮 |
| `buttonMedium` | 20 | 中按钮 |
| `buttonSmall` | 16 | 小按钮 |
| `input` | 20 | 输入框 |
| `noticeBar` | 16 | 通知栏 |
| `toast` | 16 | Toast |
| `statusButton` | 12 | 状态按钮 |
| `selectorContainer` | 16 | 选择器容器 |
| `selectorItem` | 8 | 选择器项 |
| `segmentedContainer` | 999 | 分段控制容器 |
| `segmentedItem` | 999 | 分段选项 |
| `rounded` | 999 | 全圆角 |

---

## 字体 Token (`Fonts`)

```tsx
import { Fonts } from 'mhui-rn';
<Text style={Fonts.fontSystem16Medium}>标题</Text>
```

### systemFont

| Token | 字号 | 字重 |
|---|---|---|
| `fontSystem10Medium` | 10 | Medium |
| `fontSystem10Regular` | 10 | Regular |
| `fontSystem11Medium` | 11 | Medium |
| `fontSystem11Regular` | 11 | Regular |
| `fontSystem12Medium` | 12 | Medium |
| `fontSystem12Regular` | 12 | Regular |
| `fontSystem13Medium` | 13 | Medium |
| `fontSystem13Regular` | 13 | Regular |
| `fontSystem14Medium` | 14 | Medium |
| `fontSystem14Regular` | 14 | Regular |
| `fontSystem15Medium` | 15 | Medium |
| `fontSystem15Regular` | 15 | Regular |
| `fontSystem16Medium` | 16 | Medium |
| `fontSystem16Regular` | 16 | Regular |
| `fontSystem17Medium` | 17 | Medium |
| `fontSystem17Regular` | 17 | Regular |
| `fontSystem18Medium` | 18 | Medium |
| `fontSystem18Regular` | 18 | Regular |
| `fontSystem20Medium` | 20 | Medium |
| `fontSystem20Regular` | 20 | Regular |
| `fontSystem22Medium` | 22 | Medium |
| `fontSystem22Regular` | 22 | Regular |
| `fontSystem24Medium` | 24 | Medium |
| `fontSystem26Medium` | 26 | Medium |
| `fontSystem32Medium` | 32 | Medium |
| `fontSystem32Regular` | 32 | Regular |

### customNumericFont

| Token | 字号 | 字重 |
|---|---|---|
| `fontNumber24Demibold` | 24 | DemiBold |
| `fontNumber26Demibold` | 26 | DemiBold |
| `fontNumber28Demibold` | 28 | DemiBold |

---

## 间距 Token (`spaceToken`)

```tsx
import { spaceToken } from 'mhui-rn/dist/hyperOS/styles/space';
```

| Token | 值 |
|---|---|
| `spacing0` - `spacing8` | 0 - 8 |
| `spacing10` | 10 |
| `spacing12` | 12 |
| `spacing14` | 14 |
| `spacing16` | 16 |
| `spacing18` | 18 |
| `spacing20` | 20 |
| `spacing24` | 24 |
| `spacing26` | 26 |
| `spacing28` | 28 |
| `spacing30` | 30 |
| `spacing32` | 32 |

---

## ColorType

多个 IoT 组件共用的色系类型：

```typescript
type ColorType = 'green' | 'blue' | 'wathet' | 'purple' | 'orange';
```

通过 `useColorTypeState({ colorType, disabled })` Hook 获取对应色值。

---

## AI 排查速查

| 问题 | 关键词/入口 |
|------|------------|
| 找不到某个颜色 Token | 搜索 `src/hyperOS/styles/color/` |
| 深色模式颜色不对 | 检查是否用了 `colorToken` 而非硬编码色值 |
| 圆角值查询 | `radiusToken.xxx`，见上方圆角 Token 表 |
| 字体大小查询 | `Fonts.xxx`，格式 `{类型}{size}{weight}` |
| 间距值查询 | `spaceToken.spacingN`，N 为间距值 |
| 色系类型支持 | `ColorType = 'green' \| 'blue' \| 'wathet' \| 'purple' \| 'orange'` |