brand-colors.js 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. /**
  2. * 品牌色板 — JS 侧单一事实源
  3. *
  4. * 说明:
  5. * - SCSS 变量编译期才解析,JS 块内无法引用 $var,因此在此处维护一份等值副本。
  6. * - 替换原则:仅替换 <script> 块内的纯 hex 字符串字面量(颜色字面量,如 '#F97316')。
  7. * - 不替换 canvas 绘图参数、动态拼接色、数据中携带的 hex(保持原始)。
  8. *
  9. * 对应 uni.scss §12-§16 令牌:
  10. * $brand-primary #F97316 → BrandColors.primary
  11. * $brand-primary-light #FB923C → BrandColors.primaryLight
  12. * $uni-primary-pale #FFF7ED → BrandColors.primaryPale
  13. * $dim-body #FF8C42 → BrandColors.body
  14. * $dim-mind #FF6B9D → BrandColors.mind
  15. * $dim-wisdom #6366F1 → BrandColors.wisdom
  16. * $dim-action #10B981 → BrandColors.action
  17. * $dim-wealth #F59E0B → BrandColors.wealth
  18. * $status-success #10B981 → BrandColors.success
  19. * $status-danger #EF4444 → BrandColors.danger
  20. * $status-warning #FBBF24 → BrandColors.warning
  21. * $facade-text-strong #333 → BrandColors.textStrong
  22. * $facade-text-body #666 → BrandColors.textBody
  23. * $facade-text-muted #999 → BrandColors.textMuted
  24. * $facade-fill-ghost #FAFAFA → BrandColors.fillGhost
  25. * $facade-fill-gray-50 #F9FAFB → BrandColors.fillGray50
  26. * $app-surface #FFFFFF → BrandColors.white
  27. * $status-danger-strong-2 #C62828 → BrandColors.dangerDeep
  28. */
  29. export const BrandColors = {
  30. // 品牌橙族
  31. primary: '#F97316',
  32. primaryLight: '#FB923C',
  33. primaryPale: '#FFF7ED',
  34. primaryDark: '#EA580C',
  35. primaryDeep: '#C2410C', // 深橙(画布卡片文字档)
  36. bodyLight: '#FFB366', // 身体维度亮档(画布渐变终)
  37. // 五维身份色
  38. body: '#FF8C42',
  39. mind: '#FF6B9D',
  40. wisdom: '#6366F1',
  41. action: '#10B981',
  42. wealth: '#F59E0B',
  43. // 状态色
  44. success: '#10B981',
  45. successLight3: '#34D399', // emerald-400 成功亮档·三档
  46. warning: '#FBBF24',
  47. danger: '#EF4444',
  48. dangerLight2: '#FB7185', // rose-400 危险亮档·二档(睡眠质量条)
  49. info: '#0EA5E9', // sky-500 信息
  50. infoLight: '#38BDF8', // sky-400 信息亮档
  51. infoBlue: '#3B82F6', // blue-500 信息蓝(智慧维度组件色板)
  52. infoBlueLight: '#60A5FA', // blue-400 信息蓝亮档
  53. wisdomLight: '#818CF8', // indigo-400 智慧亮档
  54. // 中性灰阶
  55. white: '#FFFFFF',
  56. textStrong: '#333333',
  57. textBody: '#666666',
  58. textMuted: '#999999',
  59. fillGhost: '#FAFAFA',
  60. fillGray50: '#F9FAFB',
  61. // 状态深阶
  62. dangerDeep: '#C62828',
  63. violetDeep: '#7C3AED', // violet-600 深紫(#7C3AED)
  64. // 中性灰阶扩展(对应 $facade-text-gray-400 / $facade-text-slate / $facade-hairline-2)
  65. textGray400: '#9CA3AF',
  66. textSlate: '#6B7280',
  67. hairline2: '#EEE',
  68. textFaint: '#888',
  69. gray200: '#E5E7EB', // gray-200 浅灰(canvas 连线/分隔)
  70. // Plutchik 八基本情绪色板(情绪打卡专属;单一事实源)
  71. emotionJoy: '#FFD93D', // 开心
  72. emotionTrust: '#6BCB77', // 信任
  73. emotionFear: '#9B59B6', // 恐惧
  74. emotionSurprise: '#FF9FF3', // 惊讶
  75. emotionSadness: '#6B9BD2', // 悲伤/难过
  76. emotionDisgust: '#A0A0A0', // 厌恶
  77. emotionAnger: '#FF6B6B', // 烦躁/愤怒
  78. // 语义别名(后端配置色兜底;SCSS 侧等值令牌见 uni.scss $facade-violet/$status-info)
  79. violet: '#8B5CF6', // violet-500 紫罗兰(心智维度组件色板)
  80. infoBlue: '#3B82F6', // blue-500 信息蓝(智慧维度组件色板)
  81. // 通用语义别名(方便使用)
  82. brand: '#F97316',
  83. dimMind: '#FF6B9D',
  84. dimWisdom: '#6366F1',
  85. dimAction: '#10B981',
  86. dimBody: '#FF8C42',
  87. dimWealth: '#F59E0B',
  88. }
  89. // 向后兼容导出(避免 import 路径散乱)
  90. export default BrandColors