uni.scss 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599
  1. /**
  2. * ============================================================
  3. * 浠艾福 (XAF) Design System — UniApp SCSS Variables
  4. * ============================================================
  5. *
  6. * 色彩体系: 品牌橙 + 珊瑚暖色 (活力关怀 + 家庭温暖)
  7. * 风格: 极简扁平圆角 (全角色统一)
  8. * Logo配色参考: #6BB9F0 (中蓝) / #D6EAF8 (浅蓝) / ❤白色心形
  9. *
  10. * 设计原则:
  11. * - 扁平圆角:全端统一,无Claymorphism
  12. * - 品牌橙 #F97316 为主色:与 pages.json tabBar.selectedColor 一致(线上真值)
  13. * - 珊瑚暖色为点缀:保留"家庭温暖"和"关怀"
  14. * - 心形符号:品牌识别元素
  15. * - 减少装饰动效,聚焦内容可读性
  16. *
  17. * v3.1 — 2026-10-18 品牌令牌收敛:$uni-primary 系由旧蓝 #5B9BD5 翻转为品牌橙
  18. * (旧蓝与 tabBar.selectedColor / 线上实际主色不一致,详见 §12 背景说明)
  19. * v3.2 — 2026-10-18 维度生态共享令牌:新增 §16(B 批 mind-detail 15 兄弟页收敛)
  20. * ============================================================
  21. */
  22. // ============================================================
  23. // 1. 品牌色彩 (Brand Colors)
  24. // ============================================================
  25. // 主色调 - 品牌橙(2026-10 令牌收敛:原 #5B9BD5 旧蓝与线上实际主色不一致,已翻转;
  26. // 现值与 $brand-primary / tabBar.selectedColor 三方一致,见 §12)
  27. $uni-primary: #F97316; // 品牌主色
  28. $uni-primary-light: #FB923C; // 浅橙
  29. $uni-primary-dark: #EA580C; // 深橙
  30. $uni-primary-pale: #FFF7ED; // 极浅橙 (品牌淡底)
  31. // 辅助暖色 - 珊瑚粉 (家庭温暖)
  32. $uni-warm: #F08A7A; // 心形暖色 - 保留"关爱"感
  33. $uni-warm-light: #F4B0A5;
  34. $uni-warm-dark: #E06A58;
  35. // 语义色 (Semantic)
  36. // ---- Material 兜底色板族(全库 ≥2 页复用的 Material 值,统一一套命名:色相 × 档位)----
  37. // 档位约定:tint 极浅底 / light 亮档(渐变伴生)/ base 主色 / strong 深文字
  38. // 绿(成功 / 健康 / 选中态)
  39. $mat-green: #4CAF50; // green-500 主色(33 文件;原 $uni-success)
  40. $mat-green-light: #81C784; // green-300 亮档(5 文件;原 $uni-success-light)
  41. $mat-green-light-2:#66BB6A; // green-400 亮档·副档(5 文件;同渐变族不同档)
  42. $mat-green-tint: #E8F5E9; // green-50 极浅底(38 文件)
  43. $mat-green-strong: #2E7D32; // green-800 深文字(25 文件)
  44. // 琥珀(警示 / 提示 / 选中浅底)
  45. $mat-amber-tint: #FFF8E1; // amber-50 极浅底(14 文件)
  46. // 橙(警示文字)
  47. $mat-orange-strong:#E65100; // orange-900 深文字(24 文件)
  48. // 蓝(信息态)
  49. $mat-blue-tint: #E3F2FD; // blue-50 极浅底(29 文件)
  50. $mat-blue-strong: #1565C0; // blue-800 深文字(17 文件)
  51. $uni-warning: #FFB74D;
  52. $uni-warning-light: #FFD54F;
  53. $uni-error: #EF5350;
  54. $uni-error-light: #E57373;
  55. $uni-info: #0EA5E9; // 信息蓝(2026-10 起独立于品牌色,不再复用主色)
  56. // 中性色 (Neutral) — 冷调中性,匹配蓝色系
  57. $uni-bg-color: #F5F9FC; // 极浅蓝灰背景
  58. $uni-bg-color-grey: #EDF2F7; // 浅灰蓝
  59. $uni-bg-color-dark: #E2E8F0; // 灰蓝
  60. $uni-surface: #FFFFFF; // 卡片/表面
  61. $uni-border-color: #CBD5E1; // 冷灰边框
  62. $uni-border-color-light: #E2E8F0;
  63. $uni-text-color: #1E293B; // 深蓝灰 (正文)
  64. $uni-text-color-secondary: #64748B; // 次要文字
  65. $uni-text-color-grey: #94A3B8; // 灰色文字
  66. $uni-text-color-placeholder: #94A3B8;
  67. $uni-text-color-inverse: #FFFFFF;
  68. // ============================================================
  69. // 2. 字体系统 (Typography)
  70. // ============================================================
  71. // 字体栈 - 小程序不支持自定义字体
  72. $uni-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
  73. 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
  74. 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
  75. $uni-font-family-display: $uni-font-family;
  76. $uni-font-family-mono: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  77. // 字号
  78. $uni-font-size-xs: 20rpx;
  79. $uni-font-size-sm: 24rpx;
  80. $uni-font-size-base: 28rpx;
  81. $uni-font-size-lg: 32rpx;
  82. $uni-font-size-xl: 36rpx;
  83. $uni-font-size-2xl: 44rpx;
  84. $uni-font-size-3xl: 52rpx;
  85. // 字重
  86. $uni-font-weight-normal: 400;
  87. $uni-font-weight-medium: 500;
  88. $uni-font-weight-bold: 600;
  89. $uni-font-weight-black: 700;
  90. // ============================================================
  91. // 3. 间距系统 (Spacing)
  92. // ============================================================
  93. $uni-spacing-xs: 8rpx;
  94. $uni-spacing-sm: 16rpx;
  95. $uni-spacing-md: 24rpx;
  96. $uni-spacing-lg: 32rpx;
  97. $uni-spacing-xl: 48rpx;
  98. $uni-spacing-2xl: 64rpx;
  99. $uni-page-padding: 32rpx;
  100. // ============================================================
  101. // 4. 圆角 (Border Radius)
  102. // ============================================================
  103. $uni-radius-sm: 10rpx;
  104. $uni-radius-md: 16rpx;
  105. $uni-radius-lg: 24rpx;
  106. $uni-radius-xl: 32rpx;
  107. $uni-radius-full: 50%;
  108. $uni-radius-round: 9999rpx;
  109. // ============================================================
  110. // 5. 阴影 (Shadows) — 极简风格,轻微阴影
  111. // ============================================================
  112. $uni-shadow-sm: 0 2rpx 8rpx rgba(249, 115, 22, 0.06);
  113. $uni-shadow-md: 0 4rpx 16rpx rgba(249, 115, 22, 0.08);
  114. $uni-shadow-lg: 0 8rpx 32rpx rgba(249, 115, 22, 0.10);
  115. $uni-shadow-inner: inset 0 1rpx 4rpx rgba(0, 0, 0, 0.04);
  116. // ============================================================
  117. // 6. 动画 (Animations) — 节制使用
  118. // ============================================================
  119. $uni-transition-fast: 0.15s ease;
  120. $uni-transition-base: 0.25s ease;
  121. $uni-transition-slow: 0.3s ease;
  122. // ============================================================
  123. // 7. CSS 自定义属性
  124. // ============================================================
  125. :root {
  126. // 品牌色(2026-10 由旧蓝 #5B9BD5 系翻转为品牌橙,与 §1 SCSS 变量同值;
  127. // 注意 mp-weixin 对 :root 支持不稳,页面实际渲染以各处 var() 兜底值为准)
  128. --color-primary: #F97316;
  129. --color-primary-light: #FB923C;
  130. --color-primary-dark: #EA580C;
  131. --color-primary-pale: #FFF7ED;
  132. --color-warm: #F08A7A;
  133. --color-warm-light: #F4B0A5;
  134. // 语义色
  135. --color-success: #4CAF50;
  136. --color-warning: #FFB74D;
  137. --color-error: #EF5350;
  138. // 中性色
  139. --bg: #F5F9FC;
  140. --bg-grey: #EDF2F7;
  141. --surface: #FFFFFF;
  142. --text: #1E293B;
  143. --text-secondary: #64748B;
  144. --muted: #94A3B8;
  145. --border: #CBD5E1;
  146. --border-light: #E2E8F0;
  147. // 间距
  148. --space-xs: 4px;
  149. --space-sm: 8px;
  150. --space-md: 12px;
  151. --space-lg: 16px;
  152. --space-xl: 24px;
  153. --space-page: 16px;
  154. // 圆角
  155. --radius-sm: 5px;
  156. --radius-md: 8px;
  157. --radius-lg: 12px;
  158. --radius-xl: 16px;
  159. // 阴影 — 极简风格(色调随品牌色翻转为橙,2026-10)
  160. --shadow-sm: 0 1px 4px rgba(249, 115, 22, 0.06);
  161. --shadow-md: 0 2px 8px rgba(249, 115, 22, 0.08);
  162. --shadow-lg: 0 4px 16px rgba(249, 115, 22, 0.10);
  163. }
  164. // ============================================================
  165. // 8. 实用工具类
  166. // ============================================================
  167. // --- 文字色彩 ---
  168. .text-primary { color: $uni-primary; }
  169. .text-warm { color: $uni-warm; }
  170. .text-success { color: $mat-green; }
  171. .text-warning { color: $uni-warning; }
  172. .text-error { color: $uni-error; }
  173. .text-muted { color: $uni-text-color-grey; }
  174. .text-secondary { color: $uni-text-color-secondary; }
  175. .text-bold { font-weight: $uni-font-weight-bold; }
  176. .text-black { font-weight: $uni-font-weight-black; }
  177. .text-center { text-align: center; }
  178. // 正文工具类跟随用户字号系数(--font-scale);使用方式:在根节点 :style="{ '--font-scale': fontScale }"
  179. .text-sm { font-size: calc($uni-font-size-sm * var(--font-scale, 1)); }
  180. .text-base { font-size: calc($uni-font-size-base * var(--font-scale, 1)); }
  181. .text-lg { font-size: calc($uni-font-size-lg * var(--font-scale, 1)); }
  182. .text-xl { font-size: calc($uni-font-size-xl * var(--font-scale, 1)); }
  183. .text-2xl { font-size: calc($uni-font-size-2xl * var(--font-scale, 1)); }
  184. .text-3xl { font-size: calc($uni-font-size-3xl * var(--font-scale, 1)); }
  185. // --- 背景 ---
  186. .bg-primary { background-color: $uni-primary; }
  187. .bg-warm { background-color: $uni-warm; }
  188. .bg-surface { background-color: $uni-surface; }
  189. .bg-page { background-color: $uni-bg-color; }
  190. // --- 圆角 ---
  191. .radius-sm { border-radius: $uni-radius-sm; }
  192. .radius-md { border-radius: $uni-radius-md; }
  193. .radius-lg { border-radius: $uni-radius-lg; }
  194. .radius-xl { border-radius: $uni-radius-xl; }
  195. // --- 弹性布局 ---
  196. .flex { display: flex; }
  197. .flex-col { flex-direction: column; }
  198. .flex-row { flex-direction: row; }
  199. .flex-wrap { flex-wrap: wrap; }
  200. .flex-1 { flex: 1; }
  201. .items-center { align-items: center; }
  202. .justify-center { justify-content: center; }
  203. .justify-between { justify-content: space-between; }
  204. .justify-around { justify-content: space-around; }
  205. .gap-xs { gap: $uni-spacing-xs; }
  206. .gap-sm { gap: $uni-spacing-sm; }
  207. .gap-md { gap: $uni-spacing-md; }
  208. .gap-lg { gap: $uni-spacing-lg; }
  209. // --- 间距 ---
  210. .m-0 { margin: 0; }
  211. .p-0 { padding: 0; }
  212. .p-sm { padding: $uni-spacing-sm; }
  213. .p-md { padding: $uni-spacing-md; }
  214. .p-lg { padding: $uni-spacing-lg; }
  215. .mt-sm { margin-top: $uni-spacing-sm; }
  216. .mt-md { margin-top: $uni-spacing-md; }
  217. .mt-lg { margin-top: $uni-spacing-lg; }
  218. .mb-sm { margin-bottom: $uni-spacing-sm; }
  219. .mb-md { margin-bottom: $uni-spacing-md; }
  220. .mb-lg { margin-bottom: $uni-spacing-lg; }
  221. // --- 其他 ---
  222. .w-full { width: 100%; }
  223. .h-full { height: 100%; }
  224. .relative { position: relative; }
  225. .overflow-hidden { overflow: hidden; }
  226. .truncate {
  227. overflow: hidden;
  228. text-overflow: ellipsis;
  229. white-space: nowrap;
  230. }
  231. // ============================================================
  232. // 9. 扁平圆角卡片 (Flat Rounded Card) — 全端统一风格
  233. // ============================================================
  234. @mixin flat-card($border-color: $uni-border-color-light) {
  235. border-radius: $uni-radius-md;
  236. background: $uni-surface;
  237. border: 1rpx solid $border-color;
  238. box-shadow: $uni-shadow-sm;
  239. }
  240. @mixin flat-button($bg-color: $uni-primary) {
  241. border-radius: $uni-radius-lg;
  242. background: $bg-color;
  243. color: #FFFFFF;
  244. border: none;
  245. transition: opacity $uni-transition-fast;
  246. &:active {
  247. opacity: 0.85;
  248. }
  249. }
  250. .flat-card {
  251. @include flat-card;
  252. }
  253. // ============================================================
  254. // 10. 关键帧动画(精简)
  255. // ============================================================
  256. @keyframes fadeIn {
  257. from { opacity: 0; }
  258. to { opacity: 1; }
  259. }
  260. @keyframes slideUp {
  261. from { opacity: 0; transform: translateY(20rpx); }
  262. to { opacity: 1; transform: translateY(0); }
  263. }
  264. @keyframes scaleIn {
  265. from { opacity: 0; transform: scale(0.95); }
  266. to { opacity: 1; transform: scale(1); }
  267. }
  268. @keyframes pulseSoft {
  269. 0%, 100% { opacity: 1; }
  270. 50% { opacity: 0.7; }
  271. }
  272. // 动画实用类
  273. .animate-fade-in { animation: fadeIn $uni-transition-base both; }
  274. .animate-slide-up { animation: slideUp $uni-transition-slow both; }
  275. .animate-scale-in { animation: scaleIn $uni-transition-slow both; }
  276. .animate-pulse-soft { animation: pulseSoft 3s ease-in-out infinite; }
  277. // 交错入场
  278. @for $i from 1 through 20 {
  279. .animate-stagger-#{$i} {
  280. animation-delay: #{$i * 60}ms;
  281. }
  282. }
  283. // ============================================================
  284. // 11. 骨架屏
  285. // ============================================================
  286. @mixin skeleton {
  287. background: linear-gradient(
  288. 90deg,
  289. $uni-border-color-light 25%,
  290. #F5F9FC 50%,
  291. $uni-border-color-light 75%
  292. );
  293. background-size: 200% 100%;
  294. animation: shimmer 1.5s ease-in-out infinite;
  295. border-radius: $uni-radius-sm;
  296. }
  297. @keyframes shimmer {
  298. 0% { background-position: -200% 0; }
  299. 100% { background-position: 200% 0; }
  300. }
  301. .skeleton { @include skeleton; }
  302. .skeleton-text {
  303. @include skeleton;
  304. height: 28rpx;
  305. margin-bottom: 12rpx;
  306. }
  307. .skeleton-block {
  308. @include skeleton;
  309. height: 160rpx;
  310. }
  311. // ============================================================
  312. // 12. 五维 + 品牌运行时令牌(对齐真实线上视觉)
  313. // ============================================================
  314. // 背景:原 $uni-primary(#5B9BD5 蓝) 与线上实际主色不一致,且五维色长期硬编码在页面里。
  315. // 本段补齐「真实在用」的语义令牌;页面改用这些名字,避免逐个硬编码。
  316. // 注意:mp-weixin 对 CSS var(--x) 运行时解析不稳定,故统一用 SCSS 变量(编译期内联,零运行时风险)。
  317. // 品牌主色 —— 与 pages.json tabBar.selectedColor 一致
  318. $brand-primary: #F97316;
  319. $brand-primary-dark: #EA580C;
  320. $brand-primary-soft: rgba(249, 115, 22, 0.12);
  321. // 五维身份色:页面 PageBanner / 分段左条 / CTA / 价值卡浅底统一取用
  322. $dim-body: #FF8C42;
  323. $dim-mind: #FF6B9D;
  324. $dim-wisdom: #6366F1;
  325. $dim-action: #10B981;
  326. $dim-wealth: #F59E0B;
  327. $dim-body-soft: rgba(255, 140, 66, 0.15);
  328. $dim-mind-soft: rgba(255, 107, 157, 0.15);
  329. $dim-wisdom-soft: rgba(99, 102, 241, 0.15);
  330. $dim-action-soft: rgba(16, 185, 129, 0.15);
  331. $dim-wealth-soft: rgba(245, 158, 11, 0.15);
  332. // 语义角色(与应用真实观感一致)
  333. $app-bg: #F5F7FA;
  334. $app-surface: #FFFFFF;
  335. $app-surface-subtle: #F7F8FA;
  336. $app-text: #17181C;
  337. $app-text-secondary: #606875;
  338. $app-text-muted: #8A94A3;
  339. $app-border-subtle: #E7EBF0;
  340. $app-border: #CBD5E1;
  341. // 状态:按压/禁用用透明度与语言表达,不新增多套颜色
  342. $press-opacity: 0.85;
  343. $disabled-opacity: 0.45;
  344. // 动效令牌:只声明稳定属性,禁止 transition: all
  345. $ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  346. $dur-press: 0.12s;
  347. $dur-state: 0.2s;
  348. $dur-structural: 0.26s;
  349. // 可复用 mixin
  350. @mixin dim-card($radius: $uni-radius-md) {
  351. background: $app-surface;
  352. border-radius: $radius;
  353. box-shadow: $uni-shadow-sm;
  354. }
  355. @mixin press-scale {
  356. transition: opacity $dur-press $ease-standard, transform $dur-press $ease-standard;
  357. &:active { opacity: $press-opacity; }
  358. }
  359. @mixin touch-target($size: 88rpx) {
  360. min-height: $size;
  361. min-width: $size;
  362. }
  363. // ============================================================
  364. // 13. 状态色阶 / 品牌亮阶 / 维度浅底
  365. // ============================================================
  366. // 状态色只用于传达状态,禁止当装饰使用;浅底为不透明 tint,用于卡片与分区背景。
  367. // 状态色阶
  368. $status-success: #10B981;
  369. $status-success-soft: #D1FAE5;
  370. $status-success-strong: #065F46;
  371. $status-warning: #FBBF24;
  372. $status-warning-soft: #FEF3C7;
  373. $status-warning-strong: #92400E;
  374. $status-danger: #EF4444;
  375. $status-danger-soft: #FEE2E2;
  376. $status-danger-strong: #B91C1C;
  377. // 品牌橙亮阶(渐变/高亮用)
  378. $brand-primary-light: #FB923C;
  379. // 维度浅底(不透明 tint)
  380. $dim-body-tint: #FFF8F0;
  381. $dim-mind-tint: #FFF0F5;
  382. $dim-wisdom-tint: #F0F0FF;
  383. $dim-action-tint: #F0FFF4;
  384. $dim-wealth-tint: #FFFBEB;
  385. // 边框与文字的次级阶
  386. $app-border-strong: #D1D5DB;
  387. $app-text-subtle: #94A3B8;
  388. // ============================================================
  389. // 14. 状态深阶 / 品牌深阶(收尾:跨页共性)
  390. // ============================================================
  391. // -deep 为色板 600 档,用于状态文字与强调;-tint 为极浅底。
  392. // 仅收录在 2 个及以上页面中复用的色值,单页专有色阶由页面级局部变量承载。
  393. // 状态深阶(文字 / 强调)
  394. $status-danger-deep: #DC2626; // 危险态文字:较差 / 已过期
  395. $status-warning-deep: #D97706; // 警示态文字
  396. $status-success-deep: #059669; // 成功态文字
  397. $status-success-text: #16A34A; // 成功态文字(green-600)
  398. // 品牌 / 身 深阶文字
  399. $brand-primary-deep: #C2410C;
  400. // ============================================================
  401. // 15. 共享门面令牌(A 批 6 个门面页收敛,2026-10-18)
  402. // ============================================================
  403. // 来源:index-home / health-main / profile-main / growth-main / cognitive-hall /
  404. // service-center 六页原页面级局部调色板中跨页复用(≥2 页同值)的变量。
  405. // 命名:$facade- 前缀与页面局部 $c- 完全隔离,永不同名冲突。
  406. // 同名不同值的处理:$c-text-ghost 曾一页 #BBB / 四页 #CCC,拆为
  407. // $facade-text-ghost(#CCC) 与 $facade-text-ghost-light(#BBB) 两档,保零观感变化。
  408. // $c-text-slate-2 曾 #6B7280×2 / #64748B×1:仅提升 #6B7280 为 $facade-text-slate,
  409. // #64748B 为单页专有色,留在页面局部。
  410. // 各页单页专有色阶(维度深/浅阶、Material/Element/Ant 状态色等)仍由页面级局部变量承载。
  411. // 文字阶(6 页门面共用)
  412. $facade-text-muted: #999; // 次要文字(6 页复用)
  413. $facade-text-body: #666; // 正文灰(5 页复用)
  414. $facade-text-faint: #888; // 弱文字(5 页复用)
  415. $facade-text-strong: #333; // 强文字(4 页复用)
  416. $facade-text-ghost: #CCC; // 幽灵灰(4 页复用)
  417. $facade-text-ghost-light: #BBB; // 幽灵灰浅档(index-home + cognitive-hall)
  418. $facade-text-deep: #555; // 深灰文字(health-main + growth-main)
  419. $facade-text-slate: #6B7280; // gray-500(health-main + profile-main)
  420. // 填充阶
  421. $facade-fill: #F0F0F0; // 占位/分隔(4 页复用)
  422. $facade-fill-2: #F5F5F5; // 浅灰填充(index-home + growth-main)
  423. $facade-fill-cool: #F7F7F7; // 冷灰填充(health-main + growth-main)
  424. $facade-fill-warm-gray: #F8F4EF; // 暖灰填充(profile-main + service-center)
  425. // 品牌淡底(orange-50/100)
  426. $facade-brand-tint: #FFF7ED; // 品牌极浅底(4 页复用)
  427. $facade-brand-tint-2: #FFEDD5; // 品牌浅底(index-home + growth-main)
  428. // 维度共用色
  429. $facade-violet: #8B5CF6; // violet-500(index-home + cognitive-hall + service-center)
  430. // ============================================================
  431. // 16. 维度生态共享令牌(B 批 mind-detail 15 兄弟页收敛,2026-10-18)
  432. // ============================================================
  433. // 来源:mind-detail 生态(index.vue 除外,其已全令牌化)15 个兄弟文件
  434. // (articles / duo-compatibility / emotion-checkin / emotion-report / emotion-trend /
  435. // family-dashboard / innate-portrait / innate-trajectory / member-mind-detail /
  436. // screening / soothe-toolbox / traditional-mirror / training +
  437. // components/FamilyTianpanCard / components/PsychCrisisBanner)。
  438. // 收敛规则同 §14:≥2 页同值进全局;同名不同值拆双档;单页专有留 $c- 局部。
  439. // ---- 心理(mind)维度专有族 ----
  440. $dim-mind-light: #FF8CB3; // mind 亮粉·渐变端(emotion-checkin + emotion-trend)
  441. $dim-mind-light-2: #FF8FB1; // mind 亮粉·副档(FamilyTianpanCard + family-dashboard,同角色不同值)
  442. $dim-mind-tint-2: #FFF0F3; // mind 粉浅底·副档(vs $dim-mind-tint #FFF0F5;FamilyTianpanCard + family-dashboard)
  443. $mind-accent: #FF6B35; // 情绪/成就强调橙(emotion-report + member-mind-detail + index.vue 的 $c-accent 同值)
  444. // ---- 身体(body)维度伴生档(B-2 body-detail 生态收敛时登记)----
  445. $dim-body-light: #FFB366; // body 亮档(diet/discover/health 等 10 文件;vs $dim-body #FF8C42)
  446. $tint-warm-soft: #FFF1E6; // 暖白浅底(diet 4 + health + body-detail index)
  447. $tint-warm-edge: #FFE4CC; // 暖色渐变缘(ai/chat + body-detail index)
  448. // ---- violet 伴生档($facade-violet 的亮阶与浅底)----
  449. $facade-violet-light: #A78BFA; // violet-400(duo-compatibility + emotion-checkin + member-mind-detail)
  450. $facade-violet-tint: #F5F0FF; // violet 浅底(emotion-checkin + innate-portrait + traditional-mirror)
  451. $facade-violet-deep: #7C3AED; // violet-600 深档(mind-detail index + tianpan/wishes 等 10 文件;vs $facade-violet #8B5CF6 violet-500)
  452. $facade-violet-light-2: #A855F7; // violet 亮档·副档(mind-detail index + membership/upgrade 渐变伴生;vs $facade-violet-light #A78BFA)
  453. $facade-violet-tint-2: #F5F3FF; // violet-50 浅底(mind-detail index + growth/index-home 等 6 文件;vs $facade-violet-tint #F5F0FF)
  454. $tint-purple-soft: #F3E8FF; // purple-100 浅底(mind-detail index + stats;紫色系浅底补档)
  455. // ---- 文字补档 ----
  456. $facade-text-deep-2: #444; // 深灰文字·副档(vs $facade-text-deep #555;innate-portrait + innate-trajectory + screening)
  457. // ---- tailwind gray 阶(全库高频复用,B 批 family-dashboard 收敛时登记)----
  458. $facade-fill-gray-50: #F9FAFB; // gray-50 页面浅灰底(6 文件)
  459. $facade-fill-gray-100: #F3F4F6; // gray-100 发丝分隔/浅填充(13 文件)
  460. $facade-gray-200: #E5E7EB; // gray-200 填充/描边兼用(18 文件)
  461. $facade-text-gray-400: #9CA3AF; // gray-400 弱文字(18 文件)
  462. $facade-text-gray-700: #374151; // gray-700 深文字(12 文件)
  463. // ---- 运势五级 ramp(mind-detail index + FamilyTianpanCard 共用,Material 色系)----
  464. $fortune-0-ink: #D32F2F; // 大凶(red-700)
  465. $fortune-0-tint: #FFEBEE; // red-50
  466. $fortune-1-ink: #E65100; // 凶(orange-900)
  467. $fortune-1-tint: #FFF3E0; // orange-50
  468. $fortune-2-ink: #F9A825; // 平(yellow-800)
  469. $fortune-2-tint: #FFFDE7; // yellow-50
  470. $fortune-3-ink: #7B1FA2; // 吉(purple-700)
  471. $fortune-3-tint: #F3E5F5; // purple-50
  472. $fortune-4-ink: #B71C1C; // 大吉(red-900)
  473. $fortune-4-tint: #FFCDD2; // red-100
  474. // ---- 洞察文案 ----
  475. $mind-insight-ink: #8B6914; // 洞察/宜忌文案棕金(mind-detail index + FamilyTianpanCard)
  476. // ---- 全库高频补档(B 批 emotion-report 收敛时登记)----
  477. $accent-gold: #FFD700; // 金(14 文件)
  478. $status-success-tint: #ECFDF5; // emerald-50(11 文件;vs $status-success-soft #D1FAE5 深档)
  479. $status-info-tint: #EFF6FF; // blue-50(3 文件)
  480. $status-danger-tint-2: #FEF2F2; // tailwind red-50(11 文件;vs $status-danger-tint #FFF5F5 自定义浅档)
  481. $facade-border-soft: #DDD; // 描边灰(46 文件)
  482. $app-ink-night: #1A1A2E; // 深夜蓝黑(17 文件)
  483. // ---- 封面渐变 / 提示条(B 批 articles 收敛时登记)----
  484. $accent-indigo: #667EEA; // 靛紫渐变起点(封面/卡片,37 文件)
  485. $accent-indigo-deep: #764BA2; // 靛紫渐变终点(26 文件)
  486. $tint-info-soft: #E8F4FD; // 信息蓝浅底(article-edit + articles)
  487. $hint-cream-bg: #FEF9E7; // 提示条奶油底(articles + shop/index)
  488. $hint-cream-border: #F0E6C0; // 提示条奶油描边(articles + shop/index)
  489. $hint-gold-ink: #B8860B; // 提示条金褐文字(8 文件)
  490. $facade-fill-page: #F8F8F8; // 页面灰底(33 文件;health-main 原 $c-fill-warm 同值收敛于此)
  491. // ---- 状态色渐变阶(B 批 soothe-toolbox 收敛时登记)----
  492. $status-success-tint-2: #F0FDF4; // green-50(13 文件;vs $status-success-tint #ECFDF5)
  493. $status-success-light: #A7F3D0; // green-200 薄荷渐变浅档(2 文件)
  494. $status-success-light-2:#6EE7B7; // green-300 薄荷渐变深档(3 文件)
  495. $status-warning-light: #FDE68A; // amber-200(11 文件;vs $status-warning-soft #FEF3C7)
  496. $tint-sky-soft: #F0F9FF; // sky-50 浅蓝底(7 文件)
  497. $status-info-deep: #2563EB; // blue-600 深信息蓝(9 文件;vs $status-info #3B82F6)
  498. $app-ink-night-2: #16213E; // 深夜蓝黑·中档(13 文件)
  499. $app-ink-night-3: #0F3460; // 深夜蓝黑·深档(2 文件)
  500. // ---- 状态色补档(与 §13 既有令牌同角色不同值,拆档保零观感)----
  501. $status-info: #3B82F6; // 信息蓝(vs $uni-info #0EA5E9;PsychCrisisBanner + emotion-report + emotion-trend + soothe-toolbox)
  502. $status-danger-tint: #FFF5F5; // red-50 浅底(vs $status-danger-soft #FEE2E2;PsychCrisisBanner + emotion-checkin + screening)
  503. $status-warning-2: #F59E0B; // amber-500 警示主色·副档(vs $status-warning #FBBF24 amber-400;PsychCrisisBanner + action-detail/ai 等 8+ 文件)
  504. $status-warning-tint:#FFFBEB; // amber-50 警示极浅底(vs $status-warning-soft #FEF3C7 amber-100;PsychCrisisBanner + action-detail/wealth 等 8+ 文件)
  505. // ---- 填充补档($facade-fill 系的加深/暖色/近白档)----
  506. $facade-fill-3: #EEEEEE; // 灰填充·深(vs $facade-fill #F0F0F0;articles + emotion-checkin + training)
  507. $facade-fill-warm-tint:#F8F6F0; // 暖灰浅底(vs $facade-fill-warm-gray #F8F4EF;duo-compatibility + innate-portrait + innate-trajectory + traditional-mirror)
  508. $facade-fill-ghost: #FAFAFA; // 近白填充(duo-compatibility + emotion-checkin + screening)
  509. $facade-fill-ghost-2: #F9F9F9; // 近白填充·副档(emotion-checkin + emotion-report + soothe-toolbox,同角色不同值)