Lujiangc 主题与UI规范展示
颜色系统
背景 (Background)
浅色：#ffffff / 深色：#292929前景 (Foreground)
浅色：#333333 / 深色：#ffffff主色 (Primary)
浅/深色：#f3799e次要色 (Secondary)
浅/深色：#f9c7d9静音色 (Muted)
浅色：#e8e9e9 / 深色：#464646强调色 (Accent)
浅色：#f8f8ff / 深色：#2d353e间距规范
2xs - 0.25rem (4px)
最小间距，用于紧凑元素
xs - 0.5rem (8px)
小间距，内部元素
sm - 0.75rem (12px)
较小间距
md - 1rem (16px)
中等间距，标准使用
lg - 1.5rem (24px)
大间距
阴影系统
shadow-sm轻微阴影
shadow默认阴影
shadow-md中等阴影
shadow-lg大型阴影
shadow-xl超大阴影
响应式设计
断点规范
| 断点名称 | 尺寸 | 描述 |
|---|---|---|
| xs | 480px | 超小型设备 (小型手机) |
| sm | 640px | 小型设备 (大型手机) |
| md | 768px | 中型设备 (平板) |
| lg | 1024px | 大型设备 (笔记本) |
| xl | 1280px | 超大型设备 (桌面) |
| 2xl | 1400px | 特大型设备 (大桌面) |
Z-Index层级规范
| 层级名称 | 值 | 描述 |
|---|---|---|
| behind | -1 | 位于默认层级之后 |
| base | 0 | 基础层级 |
| raised | 1 | 轻微提升 |
| dropdown | 10 | 下拉菜单 |
| sticky | 20 | 粘性元素 |
| overlay | 30 | 覆盖层 |
| modal | 40 | 模态框 |
| popover | 50 | 弹出框 |
| tooltip | 60 | 工具提示 |
边框圆角规范
sm
圆角-小 (sm)calc(var(--radius) - 4px)md
圆角-中 (md)calc(var(--radius) - 2px)lg
圆角-大 (lg)var(--radius) (0.5rem)