brand-colors.js 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  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. // 五维身份色
  36. body: '#FF8C42',
  37. mind: '#FF6B9D',
  38. wisdom: '#6366F1',
  39. action: '#10B981',
  40. wealth: '#F59E0B',
  41. // 状态色
  42. success: '#10B981',
  43. successLight3: '#34D399', // emerald-400 成功亮档·三档
  44. warning: '#FBBF24',
  45. danger: '#EF4444',
  46. dangerLight2: '#FB7185', // rose-400 危险亮档·二档(睡眠质量条)
  47. info: '#0EA5E9', // sky-500 信息
  48. infoLight: '#38BDF8', // sky-400 信息亮档
  49. wisdomLight: '#818CF8', // indigo-400 智慧亮档
  50. // 中性灰阶
  51. white: '#FFFFFF',
  52. textStrong: '#333333',
  53. textBody: '#666666',
  54. textMuted: '#999999',
  55. fillGhost: '#FAFAFA',
  56. fillGray50: '#F9FAFB',
  57. // 状态深阶
  58. dangerDeep: '#C62828',
  59. // 语义别名(后端配置色兜底;SCSS 侧等值令牌见 uni.scss $facade-violet/$status-info)
  60. violet: '#8B5CF6', // violet-500 紫罗兰(心智维度组件色板)
  61. infoBlue: '#3B82F6', // blue-500 信息蓝(智慧维度组件色板)
  62. // 通用语义别名(方便使用)
  63. brand: '#F97316',
  64. dimMind: '#FF6B9D',
  65. dimWisdom: '#6366F1',
  66. dimAction: '#10B981',
  67. dimBody: '#FF8C42',
  68. dimWealth: '#F59E0B',
  69. }
  70. // 向后兼容导出(避免 import 路径散乱)
  71. export default BrandColors