f166c04422
- Create Tailwind CSS configuration with design tokens from UIDesignSpec - Create globals.css with CSS variables and component styles - Add React component library: - UI components: Button, Card, Tag, Input, Select, ProgressBar, Modal - Navigation: BottomNav, Sidebar, StatusBar - Layout: MobileLayout, DesktopLayout - Add constants for colors, icons, and layout - Update tasks.md with 31 UI development tasks linked to design node IDs - Configure package.json, tsconfig.json, and postcss.config.js Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
67 lines
1.3 KiB
TypeScript
67 lines
1.3 KiB
TypeScript
/**
|
|
* 颜色常量
|
|
* 设计稿参考: UIDesignSpec.md 1.1
|
|
*/
|
|
|
|
// 背景色
|
|
export const BG_COLORS = {
|
|
page: '#0B0B0E',
|
|
card: '#16161A',
|
|
elevated: '#1A1A1E',
|
|
} as const;
|
|
|
|
// 文字色
|
|
export const TEXT_COLORS = {
|
|
primary: '#FAFAF9',
|
|
secondary: '#A1A1AA',
|
|
tertiary: '#71717A',
|
|
} as const;
|
|
|
|
// 强调色
|
|
export const ACCENT_COLORS = {
|
|
indigo: '#6366F1',
|
|
green: '#32D583',
|
|
coral: '#E85A4F',
|
|
amber: '#F59E0B',
|
|
} as const;
|
|
|
|
// 边框色
|
|
export const BORDER_COLORS = {
|
|
subtle: '#27272A',
|
|
} as const;
|
|
|
|
// 状态色 (带透明度用于背景)
|
|
export const STATUS_COLORS = {
|
|
success: {
|
|
bg: 'rgba(50, 213, 131, 0.125)',
|
|
text: '#32D583',
|
|
},
|
|
pending: {
|
|
bg: 'rgba(99, 102, 241, 0.125)',
|
|
text: '#6366F1',
|
|
},
|
|
warning: {
|
|
bg: 'rgba(245, 158, 11, 0.125)',
|
|
text: '#F59E0B',
|
|
},
|
|
error: {
|
|
bg: 'rgba(232, 90, 79, 0.125)',
|
|
text: '#E85A4F',
|
|
},
|
|
} as const;
|
|
|
|
// CSS 变量名映射
|
|
export const CSS_VARS = {
|
|
bgPage: '--bg-page',
|
|
bgCard: '--bg-card',
|
|
bgElevated: '--bg-elevated',
|
|
textPrimary: '--text-primary',
|
|
textSecondary: '--text-secondary',
|
|
textTertiary: '--text-tertiary',
|
|
accentIndigo: '--accent-indigo',
|
|
accentGreen: '--accent-green',
|
|
accentCoral: '--accent-coral',
|
|
accentAmber: '--accent-amber',
|
|
borderSubtle: '--border-subtle',
|
|
} as const;
|