b0602b0a99
- 重构挑战列表为横向轮播，支持多进行中的挑战 - 新增挑战详情页 /challenges/[id]/index 与排行榜 /challenges/[id]/leaderboard - ChallengeProgressCard 支持小时级剩余时间显示 - 新增 ChallengeRankingItem 组件展示榜单项 - 排行榜支持分页加载、下拉刷新与错误重试 - 挑战卡片新增已结束角标与渐变遮罩 - 加入/退出挑战时展示庆祝动画与错误提示 - 统一背景渐变色与卡片阴影细节
213 lines
6.0 KiB
TypeScript
213 lines
6.0 KiB
TypeScript
/**
|
||
* 应用全局配色规范（基于设计规范图）。
|
||
* 包含完整的语义化颜色系统：灰色、紫色、成功色、错误色、警告色和基础色。
|
||
*/
|
||
|
||
// 原子调色板（与设计图一致）
|
||
export const palette = {
|
||
// 灰色系统 - 中性色，UI设计的基础
|
||
gray: {
|
||
25: '#fcfcfd',
|
||
50: '#ebecee',
|
||
100: '#c0c4ca',
|
||
200: '#a2a7b0',
|
||
300: '#777f8c',
|
||
400: '#5d6676',
|
||
500: '#344054',
|
||
600: '#2f3a4c',
|
||
700: '#252d3c',
|
||
800: '#1d232e',
|
||
900: '#161b23',
|
||
},
|
||
|
||
// 紫色系统 - 品牌主色，用于交互元素
|
||
purple: {
|
||
25: '#fafaff',
|
||
50: '#f4f3ff',
|
||
100: '#ebe9fe',
|
||
200: '#d9d6fe',
|
||
300: '#bdb4fe',
|
||
400: '#9b8afb',
|
||
500: '#7a5af8',
|
||
600: '#6938ef',
|
||
700: '#5925dc',
|
||
800: '#4a1fb8',
|
||
900: '#3e1c96',
|
||
},
|
||
|
||
// 成功色系统 - 绿色，用于正面反馈
|
||
success: {
|
||
25: '#f6fef9',
|
||
50: '#e8f7f1',
|
||
100: '#b8e7d2',
|
||
200: '#95dcbc',
|
||
300: '#65cc9e',
|
||
400: '#47c28b',
|
||
500: '#19b36e',
|
||
600: '#17a364',
|
||
700: '#127f4e',
|
||
800: '#0e623d',
|
||
900: '#0b4b2e',
|
||
},
|
||
|
||
// 错误色系统 - 红色，用于错误状态和破坏性操作
|
||
error: {
|
||
25: '#fffbfa',
|
||
50: '#feeeee',
|
||
100: '#fdcaca',
|
||
200: '#fcb1b1',
|
||
300: '#fb8d8d',
|
||
400: '#fa7777',
|
||
500: '#f95555',
|
||
600: '#e34d4d',
|
||
700: '#b13c3c',
|
||
800: '#892f2f',
|
||
900: '#692424',
|
||
},
|
||
|
||
// 警告色系统 - 黄色/橙色，用于警告和确认
|
||
warning: {
|
||
25: '#fff7ec',
|
||
50: '#fff7ec',
|
||
100: '#ffe6c4',
|
||
200: '#ffd9a8',
|
||
300: '#ffc880',
|
||
400: '#ffbd68',
|
||
500: '#ffad42',
|
||
600: '#e89d3c',
|
||
700: '#b57b2f',
|
||
800: '#8c5f24',
|
||
900: '#6b491c',
|
||
},
|
||
|
||
// 基础色
|
||
base: {
|
||
white: '#ffffff',
|
||
black: '#1d232e',
|
||
}
|
||
} as const;
|
||
|
||
// 主色调定义
|
||
const primaryColor = palette.purple[500]; // 紫色500作为主色
|
||
const tintColorLight = primaryColor;
|
||
const tintColorDark = palette.base.white;
|
||
|
||
export const Colors = {
|
||
light: {
|
||
// 基础文本/背景
|
||
text: palette.gray[900], // 最深灰色用于主要文本
|
||
textSecondary: palette.gray[600], // 中等灰色用于次要文本
|
||
textMuted: palette.gray[400], // 浅灰色用于静音文本
|
||
background: palette.base.white,
|
||
surface: palette.base.white,
|
||
card: '#ffffff', // 最浅灰色用于卡片背景
|
||
|
||
// 品牌与可交互主色
|
||
tint: tintColorLight,
|
||
primary: primaryColor,
|
||
onPrimary: palette.base.white, // 主色上的文字/图标颜色
|
||
|
||
// 中性色与辅助
|
||
neutral100: palette.gray[100],
|
||
neutral200: palette.gray[200],
|
||
neutral300: palette.gray[300],
|
||
|
||
// 状态/反馈色
|
||
success: palette.success[500],
|
||
successLight: palette.success[100],
|
||
successDark: palette.success[700],
|
||
warning: palette.warning[500],
|
||
warningLight: palette.warning[100],
|
||
warningDark: palette.warning[700],
|
||
danger: palette.error[500],
|
||
dangerLight: palette.error[100],
|
||
dangerDark: palette.error[700],
|
||
info: palette.purple[500],
|
||
accentPurple: palette.purple[400],
|
||
accentGreen: palette.success[400],
|
||
|
||
// 日期选择器主题色
|
||
datePickerNormal: palette.purple[500],
|
||
datePickerSelected: palette.success[500],
|
||
|
||
// 结构色
|
||
border: palette.gray[200], // 浅灰色边框
|
||
separator: palette.gray[100], // 更浅的分隔线
|
||
icon: palette.gray[500], // 中等灰色图标
|
||
|
||
// Tab 相关
|
||
tabIconDefault: palette.gray[400],
|
||
tabIconSelected: palette.base.white, // 选中时使用白色文字/图标，确保在紫色背景上清晰可见
|
||
tabBarBackground: palette.base.white,
|
||
tabBarActiveBackground: palette.purple[500], // 使用主色作为选中背景
|
||
|
||
// 页面氛围与装饰
|
||
pageBackgroundEmphasis: palette.gray[25],
|
||
heroSurfaceTint: palette.purple[25],
|
||
ornamentPrimary: palette.purple[100],
|
||
ornamentAccent: palette.success[100],
|
||
|
||
// 背景渐变色
|
||
backgroundGradientStart: palette.purple[100],
|
||
backgroundGradientEnd: palette.purple[25],
|
||
},
|
||
dark: {
|
||
// 基础文本/背景
|
||
text: palette.gray[25], // 最浅灰色用于主要文本
|
||
textSecondary: palette.gray[100], // 浅灰色用于次要文本
|
||
textMuted: palette.gray[300], // 中等灰色用于静音文本
|
||
background: palette.gray[900],
|
||
surface: palette.gray[800],
|
||
card: palette.gray[800],
|
||
|
||
// 品牌与可交互主色
|
||
tint: tintColorDark,
|
||
primary: primaryColor,
|
||
onPrimary: palette.base.white,
|
||
|
||
// 中性色与辅助
|
||
neutral100: palette.gray[100],
|
||
neutral200: palette.gray[200],
|
||
neutral300: palette.gray[300],
|
||
|
||
// 状态/反馈色
|
||
success: palette.success[400], // 深色模式下使用较亮的成功色
|
||
successLight: palette.success[200],
|
||
successDark: palette.success[600],
|
||
warning: palette.warning[400],
|
||
warningLight: palette.warning[200],
|
||
warningDark: palette.warning[600],
|
||
danger: palette.error[400],
|
||
dangerLight: palette.error[200],
|
||
dangerDark: palette.error[600],
|
||
info: palette.purple[400],
|
||
accentPurple: palette.purple[300],
|
||
accentGreen: palette.success[300],
|
||
|
||
// 日期选择器主题色
|
||
datePickerNormal: palette.purple[400],
|
||
datePickerSelected: palette.success[400],
|
||
|
||
// 结构色
|
||
border: palette.gray[700],
|
||
separator: palette.gray[700],
|
||
icon: palette.gray[300],
|
||
|
||
// Tab 相关
|
||
tabIconDefault: palette.gray[400],
|
||
tabIconSelected: palette.base.white, // 选中时使用白色文字/图标，确保在紫色背景上清晰可见
|
||
tabBarBackground: palette.gray[800],
|
||
tabBarActiveBackground: palette.purple[500], // 使用主色作为选中背景，在深色模式下更突出
|
||
|
||
// 页面氛围与装饰
|
||
pageBackgroundEmphasis: palette.gray[800],
|
||
heroSurfaceTint: palette.purple[900],
|
||
ornamentPrimary: palette.purple[800],
|
||
ornamentAccent: palette.success[800],
|
||
|
||
// 背景渐变色
|
||
backgroundGradientStart: palette.gray[900],
|
||
backgroundGradientEnd: palette.gray[800],
|
||
},
|
||
} as const;
|