f3e6250505
- 新增训练计划页面，允许用户制定个性化的训练计划 - 集成打卡功能，用户可以记录每日的训练情况 - 更新 Redux 状态管理，添加训练计划相关的 reducer - 在首页中添加训练计划卡片，支持用户点击跳转 - 更新样式和布局，以适应新功能的展示和交互 - 添加日期选择器和相关依赖，支持用户选择训练日期
116 lines
3.1 KiB
TypeScript
116 lines
3.1 KiB
TypeScript
/**
|
|
* 应用全局配色规范（来自设计规范图）。
|
|
* 说明：保持原有导出结构不变，同时扩展更完整的语义令牌与原子调色板。
|
|
*/
|
|
|
|
// 原子调色板（与设计图一致）
|
|
export const palette = {
|
|
// Primary
|
|
primary: '#BBF246',
|
|
ink: '#192126',
|
|
|
|
// Secondary / Neutrals
|
|
neutral100: '#888F92',
|
|
neutral200: '#5E6468',
|
|
neutral300: '#384046',
|
|
|
|
// Accents
|
|
purple: '#A48AED',
|
|
red: '#ED4747',
|
|
orange: '#FCC46F',
|
|
blue: '#95CCE3',
|
|
} as const;
|
|
|
|
const primaryColor = palette.primary; // 应用主题色
|
|
const tintColorLight = primaryColor;
|
|
const tintColorDark = '#FFFFFF';
|
|
|
|
export const Colors = {
|
|
light: {
|
|
// 基础文本/背景
|
|
text: '#11181C',
|
|
textSecondary: palette.neutral300,
|
|
textMuted: palette.neutral200,
|
|
background: '#FFFFFF',
|
|
surface: '#FFFFFF',
|
|
card: '#FFFFFF',
|
|
|
|
// 品牌与可交互主色
|
|
tint: tintColorLight,
|
|
primary: primaryColor,
|
|
onPrimary: palette.ink, // 与主色搭配的前景色（按钮文字/图标）
|
|
|
|
// 中性色与辅助
|
|
neutral100: palette.neutral100,
|
|
neutral200: palette.neutral200,
|
|
neutral300: palette.neutral300,
|
|
|
|
// 状态/反馈色
|
|
success: palette.primary,
|
|
warning: palette.orange,
|
|
danger: palette.red,
|
|
info: palette.blue,
|
|
accentPurple: palette.purple,
|
|
|
|
// 结构色
|
|
border: palette.neutral100 + '33', // 20% 透明度
|
|
separator: palette.neutral100 + '33',
|
|
icon: '#687076',
|
|
|
|
// Tab 相关（保持兼容）
|
|
tabIconDefault: '#687076',
|
|
tabIconSelected: palette.ink, // tab 激活时的文字/图标颜色（深色，在亮色背景上显示）
|
|
tabBarBackground: palette.ink, // tab 栏背景色
|
|
tabBarActiveBackground: primaryColor, // tab 激活时的背景色
|
|
|
|
// 页面氛围与装饰（新）
|
|
pageBackgroundEmphasis: '#F9FBF2',
|
|
heroSurfaceTint: 'rgba(187,242,70,0.18)',
|
|
ornamentPrimary: 'rgba(187,242,70,0.22)',
|
|
ornamentAccent: 'rgba(164,138,237,0.16)',
|
|
},
|
|
dark: {
|
|
// 基础文本/背景
|
|
text: '#ECEDEE',
|
|
textSecondary: palette.neutral100,
|
|
textMuted: '#9BA1A6',
|
|
background: '#151718',
|
|
surface: '#1A1D1E',
|
|
card: '#1A1D1E',
|
|
|
|
// 品牌与可交互主色
|
|
tint: tintColorDark,
|
|
primary: primaryColor,
|
|
onPrimary: palette.ink,
|
|
|
|
// 中性色与辅助
|
|
neutral100: palette.neutral100,
|
|
neutral200: palette.neutral200,
|
|
neutral300: palette.neutral300,
|
|
|
|
// 状态/反馈色
|
|
success: palette.primary,
|
|
warning: palette.orange,
|
|
danger: palette.red,
|
|
info: palette.blue,
|
|
accentPurple: palette.purple,
|
|
|
|
// 结构色
|
|
border: '#2A2F32',
|
|
separator: '#2A2F32',
|
|
icon: '#9BA1A6',
|
|
|
|
// Tab 相关（保持兼容）
|
|
tabIconDefault: '#9BA1A6',
|
|
tabIconSelected: palette.ink, // 在亮色背景上使用深色文字
|
|
tabBarBackground: palette.ink,
|
|
tabBarActiveBackground: primaryColor,
|
|
|
|
// 页面氛围与装饰（新）
|
|
pageBackgroundEmphasis: '#151718',
|
|
heroSurfaceTint: 'rgba(187,242,70,0.12)',
|
|
ornamentPrimary: 'rgba(187,242,70,0.18)',
|
|
ornamentAccent: 'rgba(164,138,237,0.14)',
|
|
},
|
|
} as const;
|