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:
2025-10-17 00:13:15 +08:00
parent 9474f9e7f7
commit b0a7c2e3d5
11 changed files with 1766 additions and 6 deletions

View File

@@ -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