uni.scss 25 KB

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