docs(appearance): document control variants

packages/appearance/docs/zh-Hans/advanced/atomic-composition.mdx

@@ -15,19 +15,23 @@ toc:
 
 ## 受控原子组件 {#controlled-atoms}
 
-`ThemeModeField`、`ColorVisionModeField`、`TextScaleField`、`MotionModeField`、`BrightnessField`、`ThemeColorPicker` 和 `ThemeToggle` 都由 `value` 与回调驱动。它们不要求使用偏好上下文，因此可以接入表单、预览工具或其他状态库。
+`ThemeModeField`、`ThemeModeOptionList`、`ColorVisionModeField`、`TextScaleField`、`TextScaleOptionList`、`MotionModeField`、`BrightnessField`、`ThemeColorPicker` 和 `ThemeToggle` 都由 `value` 与回调驱动。它们不要求使用偏好上下文，因此可以接入表单、预览工具或其他状态库。
 
 ```tsx
 <ThemeModeField value={mode} onValueChange={setMode} />
+<ThemeModeOptionList value={mode} onValueChange={setMode} />
 <ColorVisionModeField value={colorVisionMode} onValueChange={setColorVisionMode} />
 <TextScaleField value={textScale} onValueChange={setTextScale} />
 <MotionModeField value={motionMode} onValueChange={setMotionMode} />
 <BrightnessField value={brightness} onValueChange={setBrightness} />
+<TextScaleOptionList value={textScale} onValueChange={setTextScale} />
 ```
 
+`AppearanceOptionList` 提供 `TextScaleOptionList` 使用的通用单选列表。向 `items` 传入 `value`、`label`、可选 `icon` 与 `description`，即可用相同风格实现主题、动态效果、色彩辨识和亮度选择器。组件使用原生 radio，自动支持键盘导航与表单语义。
+
 ## 组合主题卡片 {#compose-card}
 
-`ThemeConfigCard` 把预览、基础色和强调色选择组合在一起，但仍由调用方持有配置。
+`ThemeConfigCard` 把基础色和强调色选择组合在一起，但仍由调用方持有配置。
 
 ```tsx
 <ThemeConfigCard
@@ -37,7 +41,19 @@ toc:
 />
 ```
 
-需要更细粒度的布局时，可以分别使用 `ThemePreview`、`baseColorSwatches`、`accentColorSwatches` 和 `ThemeColorSwatchButton`。
+需要更细粒度的布局时，可以分别使用 `baseColorSwatches`、`accentColorSwatches` 和 `ThemeColorSwatchButton`。
+
+`ThemeColorPicker` 默认使用带文字的 `pill` 样式；空间紧凑时可切换为仅显示颜色和选中标记的 `swatch` 样式：
+
+```tsx
+<ThemeColorPicker
+  title="强调色"
+  swatches={accentColorSwatches}
+  value={accentColor}
+  variant="swatch"
+  onValueChange={setAccentColor}
+/>
+```
 
 ## 状态连接层 {#connected-layer}