feat: 实现三层颜色架构和浅色主题系统
基于 Apple Human Interface Guidelines 实现完整的三层颜色架构:
- Primitives Layer: 原子层,定义 Apple 系统颜色的 Color 资源
- Semantic Layer: 语义层,提供可读性强的颜色命名和用途分类
- Component Layer: 组件层(计划中),为控件专用颜色 Token
主要功能:
• 完整的 Apple 系统颜色定义(支持 Light/Dark 模式)
• 6 大类语义化颜色:Background, Foreground, Border, Accent, State, Surface
• 统一的主题入口 Theme.axaml
• 颜色系统演示页面,展示所有语义化颜色
• 更新 README.md 添加颜色系统详细说明
技术改进:
• 使用 {DynamicResource} 支持主题切换
• 遵循 Apple HIG 可访问性标准
• 建立清晰的命名规范:{类别}.{用途}.{状态}
• 为后续控件开发奠定坚实基础
This commit is contained in:
55
README.md
55
README.md
@@ -12,6 +12,61 @@
|
||||
| Semi.Avalonia | 11.2.1.9 | 现代化设计主题 |
|
||||
| xUnit | 2.6.6 | 单元测试框架 |
|
||||
|
||||
## 颜色系统
|
||||
|
||||
Penguin.AvaloniaUI 的颜色系统完全基于 **Apple Human Interface Guidelines**,使用苹果官方标准色值,确保与 iOS、macOS、iPadOS 等平台的视觉一致性。
|
||||
|
||||
### 核心语义化颜色
|
||||
|
||||
颜色系统提供三个主要类别:
|
||||
|
||||
**System Colors(系统颜色)** - 用于强调和状态指示
|
||||
- `SystemBlue` - 主色,用于主要按钮、链接、活动状态
|
||||
- `SystemIndigo` - 次要色,用于次要操作、备选强调
|
||||
- `SystemGreen` - 成功状态指示,确认操作
|
||||
- `SystemOrange` - 警告状态指示,需注意的信息
|
||||
- `SystemRed` - 错误状态指示,删除、危险操作
|
||||
- 以及其他扩展颜色:SystemYellow, SystemPink, SystemPurple, SystemTeal, SystemGray
|
||||
|
||||
**Text Colors(文本颜色)** - 用于所有文本内容
|
||||
- `TextPrimary` - 主要文本,标题、正文、重要内容
|
||||
- `TextSecondary` - 次要文本,副标题、说明性文字
|
||||
- `TextTertiary` - 三级文本,占位符、辅助信息
|
||||
- `TextQuaternary` - 四级文本,极弱文本、水印
|
||||
|
||||
**Background Colors(背景颜色)** - 用于视图层次
|
||||
- `SystemBackground` - 主背景,窗口、视图的基础背景
|
||||
- `SecondarySystemBackground` - 次要背景,卡片、分组内容背景
|
||||
- `TertiarySystemBackground` - 三级背景,嵌套内容背景
|
||||
|
||||
### 主题支持
|
||||
|
||||
- ✅ **浅色主题** - 已实现
|
||||
- 🔜 **暗色主题** - 计划在 Story 1.3 实现
|
||||
- 🔜 **动态主题切换** - 计划在 Story 1.4 实现
|
||||
|
||||
### 使用示例
|
||||
|
||||
在 XAML 中使用语义化颜色(必须使用 `{DynamicResource}` 以支持主题切换):
|
||||
|
||||
```xml
|
||||
<Window Background="{DynamicResource SystemBackground}">
|
||||
<StackPanel>
|
||||
<TextBlock Text="主要文本"
|
||||
Foreground="{DynamicResource TextPrimary}" />
|
||||
<TextBlock Text="次要文本"
|
||||
Foreground="{DynamicResource TextSecondary}" />
|
||||
<Button Background="{DynamicResource SystemBlue}"
|
||||
Foreground="{DynamicResource TextPrimary}" />
|
||||
</StackPanel>
|
||||
</Window>
|
||||
```
|
||||
|
||||
### 参考资料
|
||||
|
||||
- [Apple HIG - Color](https://developer.apple.com/design/human-interface-guidelines/color)
|
||||
- [Apple HIG - Dark Mode](https://developer.apple.com/design/human-interface-guidelines/dark-mode)
|
||||
|
||||
## 样式系统决策
|
||||
|
||||
- **日期**: 2025-10-16
|
||||
|
||||
Reference in New Issue
Block a user