docs(appearance): document display preferences
This commit is contained in:
@@ -13,14 +13,17 @@ toc:
|
||||
|
||||
## 包的职责 {#package-role}
|
||||
|
||||
`@workspace/appearance` 提供主题模式、基础色、强调色和紧凑布局所需的定义、副作用、主题数据与界面组件。它不创建自己的 Provider 或 store,而是由应用通过 `@workspace/preferences` 与其他偏好 package 统一聚合。
|
||||
`@workspace/appearance` 负责主题模式、基础色、强调色、色彩辨识、文字缩放、动态效果和界面亮度。它不创建自己的 Provider 或 store,也不要求修改 `@workspace/ui`;应用通过 `@workspace/preferences` 与其他偏好 package 统一聚合。
|
||||
|
||||
## 原子组件 {#atomic-components}
|
||||
|
||||
受控组件可以独立组合,不依赖偏好上下文:
|
||||
|
||||
- `ThemeModeField` 选择浅色、深色或跟随系统。
|
||||
- `CompactLayoutField` 切换主内容宽度。
|
||||
- `ColorVisionModeField` 选择标准、Protan、Deutan 或 Tritan 辅助色板。
|
||||
- `TextScaleField` 将界面缩放到 100%、125%、150% 或 200%。
|
||||
- `MotionModeField` 跟随系统、减少动态效果或启用完整动效。
|
||||
- `BrightnessField` 选择柔暗、标准或明亮的界面表面。
|
||||
- `ThemeColorPicker` 与 `ThemeColorSwatchButton` 选择主题颜色。
|
||||
- `ThemePreview` 预览一组主题变量。
|
||||
- `ThemeConfigCard` 组合预览、基础色与强调色设置。
|
||||
@@ -60,3 +63,7 @@ export function App() {
|
||||
```
|
||||
|
||||
把语言、快捷键等 package 的 definitions 和 effects 添加到相同对象即可。应用可以通过共享的 `onPreferenceChange` 持久化所有 `{ key, value }` 更新,并在服务端使用聚合后的 definitions 解析 Cookie。
|
||||
|
||||
色彩辨识辅助不会给整个页面或图片添加滤镜。它只替换 `destructive` 与 `chart-*` 等语义颜色,并在 `<html>` 上写入 `data-ui-color-vision`,供业务组件添加图标、文字、形状或纹理。关键信息不能只靠颜色表达。
|
||||
|
||||
文字、动态效果和亮度同样只通过根节点属性与 CSS 变量实现。导入 Appearance 样式后,现有 UI 组件、Portal 和应用内容都会继承这些设置。
|
||||
|
||||
Reference in New Issue
Block a user