Просмотр исходного кода

style(cfc-frontend): 小程序全局配色迁移「暖调 + 深橙」(令牌值 + tabBar)

任务:把 login-sheet-mock 草稿的暖调 + 深橙配色推广为小程序全局配色。
本批只改令牌值与 pages.json tabBar,不做硬编码色值治理。

uni.scss(只改值,不动结构、不加新令牌):
- $brand-primary        #F97316 -> #C2410C
- $brand-primary-dark   #EA580C -> #A0340B
- $brand-primary-light  #FB923C -> #E8A87C
- $brand-primary-deep   #C2410C -> #7A2A09
- $uni-primary          #F97316 -> #C2410C
- $uni-primary-dark     #EA580C -> #A0340B
- $uni-primary-light    #FB923C -> #E8A87C
- $brand-secondary      #EA580C -> #A0340B
- $app-bg               #F5F7FA -> #FBF4EA(页面底色暖米)
- $app-bg-2             #f5f6fa -> #F6EAD8
- $app-border-subtle    #E7EBF0 -> #F0E7DB
- $app-border           #CBD5E1 -> #E8DFD5
- $app-border-strong    #D1D5DB -> #DCD3C8
- 同步更新引用旧值的注释(含 v3.3 变更记录)

pages.json: tabBar.selectedColor #F97316 -> #C2410C(与 $brand-primary 三方一致)

明确未改:$facade-text-*、$dim-*、$status-*、$app-surface、
$app-ink-night*、$brand-primary-soft、§7 :root CSS 变量、
以及全部页面硬编码色值(后续批次治理)。

验证:npm run build:mp-weixin EXIT=0;产物 app.json tabBar.selectedColor=#C2410C。
opencode 1 неделя назад
Родитель
Сommit
b9408b9916
2 измененных файлов с 24 добавлено и 20 удалено
  1. 1 1
      cfc-frontend/pages.json
  2. 23 19
      cfc-frontend/uni.scss

+ 1 - 1
cfc-frontend/pages.json

@@ -2033,7 +2033,7 @@
   "lazyCodeLoading": "requiredComponents",
   "lazyCodeLoading": "requiredComponents",
   "tabBar": {
   "tabBar": {
     "color": "#7A7E83",
     "color": "#7A7E83",
-    "selectedColor": "#F97316",
+    "selectedColor": "#C2410C",
     "borderStyle": "black",
     "borderStyle": "black",
     "backgroundColor": "#FFFFFF",
     "backgroundColor": "#FFFFFF",
     "custom": true,
     "custom": true,

+ 23 - 19
cfc-frontend/uni.scss

@@ -9,7 +9,7 @@
  *
  *
  * 设计原则:
  * 设计原则:
  * - 扁平圆角:全端统一,无Claymorphism
  * - 扁平圆角:全端统一,无Claymorphism
- * - 品牌橙 #F97316 为主色:与 pages.json tabBar.selectedColor 一致(线上真值)
+ * - 品牌深橙 #C2410C 为主色:与 pages.json tabBar.selectedColor 一致(暖调 + 深橙)
  * - 珊瑚暖色为点缀:保留"家庭温暖"和"关怀"
  * - 珊瑚暖色为点缀:保留"家庭温暖"和"关怀"
  * - 心形符号:品牌识别元素
  * - 心形符号:品牌识别元素
  * - 减少装饰动效,聚焦内容可读性
  * - 减少装饰动效,聚焦内容可读性
@@ -17,6 +17,9 @@
  * v3.1 — 2026-10-18 品牌令牌收敛:$uni-primary 系由旧蓝 #5B9BD5 翻转为品牌橙
  * v3.1 — 2026-10-18 品牌令牌收敛:$uni-primary 系由旧蓝 #5B9BD5 翻转为品牌橙
  *        (旧蓝与 tabBar.selectedColor / 线上实际主色不一致,详见 §12 背景说明)
  *        (旧蓝与 tabBar.selectedColor / 线上实际主色不一致,详见 §12 背景说明)
  * v3.2 — 2026-10-18 维度生态共享令牌:新增 §16(B 批 mind-detail 15 兄弟页收敛)
  * v3.2 — 2026-10-18 维度生态共享令牌:新增 §16(B 批 mind-detail 15 兄弟页收敛)
+ * v3.3 — 2026-11-02 暖调 + 深橙:品牌主色降档为 #C2410C(亮度收敛、对比度提升),
+ *        页面底色由冷灰蓝 #F5F7FA 改为暖米 #FBF4EA,边框改暖发丝色。
+ *        本批仅改令牌值 + pages.json tabBar.selectedColor,硬编码色值治理留待后续批次。
  * ============================================================
  * ============================================================
  */
  */
 
 
@@ -24,11 +27,11 @@
 // 1. 品牌色彩 (Brand Colors)
 // 1. 品牌色彩 (Brand Colors)
 // ============================================================
 // ============================================================
 
 
-// 主色调 - 品牌橙(2026-10 令牌收敛:原 #5B9BD5 旧蓝与线上实际主色不一致,已翻转;
-// 现值与 $brand-primary / tabBar.selectedColor 三方一致,见 §12)
-$uni-primary: #F97316;          // 品牌主色
-$uni-primary-light: #FB923C;    // 浅橙
-$uni-primary-dark: #EA580C;     // 深橙
+// 主色调 - 品牌深橙(2026-10 令牌收敛:原 #5B9BD5 旧蓝与线上实际主色不一致,已翻转;
+// 2026-11 暖调批次再降档为 #C2410C;现值与 $brand-primary / tabBar.selectedColor 三方一致,见 §12)
+$uni-primary: #C2410C;          // 品牌主色(深橙)
+$uni-primary-light: #E8A87C;    // 浅橙(暖调)
+$uni-primary-dark: #A0340B;     // 深橙(降档)
 $uni-primary-pale: #FFF7ED;     // 极浅橙 (品牌淡底)
 $uni-primary-pale: #FFF7ED;     // 极浅橙 (品牌淡底)
 
 
 // 辅助暖色 - 珊瑚粉 (家庭温暖)
 // 辅助暖色 - 珊瑚粉 (家庭温暖)
@@ -403,13 +406,13 @@ $uni-transition-slow: 0.3s ease;
 // 本段补齐「真实在用」的语义令牌;页面改用这些名字,避免逐个硬编码。
 // 本段补齐「真实在用」的语义令牌;页面改用这些名字,避免逐个硬编码。
 // 注意:mp-weixin 对 CSS var(--x) 运行时解析不稳定,故统一用 SCSS 变量(编译期内联,零运行时风险)。
 // 注意:mp-weixin 对 CSS var(--x) 运行时解析不稳定,故统一用 SCSS 变量(编译期内联,零运行时风险)。
 
 
-// 品牌主色 —— 与 pages.json tabBar.selectedColor 一致
-$brand-primary: #F97316;
-$brand-primary-dark: #EA580C;
+// 品牌主色 —— 与 pages.json tabBar.selectedColor 一致(2026-11 暖调 + 深橙降档)
+$brand-primary: #C2410C;
+$brand-primary-dark: #A0340B;
 $brand-primary-soft: rgba(249, 115, 22, 0.12);
 $brand-primary-soft: rgba(249, 115, 22, 0.12);
 // 次级品牌色:认证中心等页面渐变第二色(W3 提交 3366cff22 遗漏定义,此处补齐,
 // 次级品牌色:认证中心等页面渐变第二色(W3 提交 3366cff22 遗漏定义,此处补齐,
 // 与 brand-primary-dark 同值,保证深橙渐变背景上白字可读)
 // 与 brand-primary-dark 同值,保证深橙渐变背景上白字可读)
-$brand-secondary: #EA580C;
+$brand-secondary: #A0340B;
 
 
 // 五维身份色:页面 PageBanner / 分段左条 / CTA / 价值卡浅底统一取用
 // 五维身份色:页面 PageBanner / 分段左条 / CTA / 价值卡浅底统一取用
 // 身 = 赤陶/土调 #C2703D(2026-10-27 设计稿定稿,替代旧 #FF8C42 亮橙;C2 统一土系)
 // 身 = 赤陶/土调 #C2703D(2026-10-27 设计稿定稿,替代旧 #FF8C42 亮橙;C2 统一土系)
@@ -433,15 +436,16 @@ $dim-action-deep: #047857;  // 行·森林绿深档(badge 文字用)
 $dim-wealth-deep: #92400E;  // 富·黄土深档(badge 文字用)
 $dim-wealth-deep: #92400E;  // 富·黄土深档(badge 文字用)
 
 
 // 语义角色(与应用真实观感一致)
 // 语义角色(与应用真实观感一致)
-$app-bg:             #F5F7FA;
-$app-bg-2:           #f5f6fa; // 浅灰蓝底·副档(3 文件;vs $app-bg #F5F7FA)
+// 2026-11 暖调:底色由冷灰蓝转暖米,边框转暖发丝色
+$app-bg:             #FBF4EA;
+$app-bg-2:           #F6EAD8; // 暖米底·副档(3 文件;vs $app-bg #FBF4EA)
 $app-surface:        #FFFFFF;
 $app-surface:        #FFFFFF;
 $app-surface-subtle: #F7F8FA;
 $app-surface-subtle: #F7F8FA;
 $app-text:           #17181C;
 $app-text:           #17181C;
 $app-text-secondary: #606875;
 $app-text-secondary: #606875;
 $app-text-muted:     #8A94A3;
 $app-text-muted:     #8A94A3;
-$app-border-subtle:  #E7EBF0;
-$app-border:         #CBD5E1;
+$app-border-subtle:  #F0E7DB;
+$app-border:         #E8DFD5;
 
 
 // 状态:按压/禁用用透明度与语言表达,不新增多套颜色
 // 状态:按压/禁用用透明度与语言表达,不新增多套颜色
 $press-opacity:    0.85;
 $press-opacity:    0.85;
@@ -488,8 +492,8 @@ $status-danger-soft:    #FEE2E2;
 $status-danger-strong:  #B91C1C;
 $status-danger-strong:  #B91C1C;
 
 
 // 品牌橙亮阶(渐变/高亮用)
 // 品牌橙亮阶(渐变/高亮用)
-$brand-primary-light:   #FB923C;
-$brand-primary-light-2: #FED7AA; // 品牌橙浅档 orange-200(29 文件;vs $brand-primary-light #FB923C orange-400)
+$brand-primary-light:   #E8A87C;
+$brand-primary-light-2: #FED7AA; // 品牌橙浅档 orange-200(29 文件;vs $brand-primary-light #E8A87C 暖调浅档)
 
 
 // 维度浅底(不透明 tint)
 // 维度浅底(不透明 tint)
 $dim-body-tint:   #FFF8F0;
 $dim-body-tint:   #FFF8F0;
@@ -511,7 +515,7 @@ $dim-data-wealth: #92400E;  // 富·黄土深档  对 #FCE7CE 5.90:1
 $dim-data-action: #047857;  // 行·森林绿深档 对 #FCE7CE 4.56:1
 $dim-data-action: #047857;  // 行·森林绿深档 对 #FCE7CE 4.56:1
 
 
 // 边框与文字的次级阶
 // 边框与文字的次级阶
-$app-border-strong: #D1D5DB;
+$app-border-strong: #DCD3C8;
 $app-text-subtle:   #94A3B8;
 $app-text-subtle:   #94A3B8;
 
 
 
 
@@ -529,7 +533,7 @@ $status-success-deep:   #059669;  // 成功态文字
 $status-success-text:   #16A34A;  // 成功态文字(green-600)
 $status-success-text:   #16A34A;  // 成功态文字(green-600)
 
 
 // 品牌 / 身 深阶文字
 // 品牌 / 身 深阶文字
-$brand-primary-deep:    #C2410C;
+$brand-primary-deep:    #7A2A09;
 
 
 
 
 // ============================================================
 // ============================================================
@@ -743,7 +747,7 @@ $status-danger-tint-3:  #FFF1F0; // antd red-1 危险浅底·三档(3 文件
 $status-warning-strong-2: #B45309; // amber-700 警示深文字·副档(9 文件;vs $status-warning-strong #92400E amber-800)
 $status-warning-strong-2: #B45309; // amber-700 警示深文字·副档(9 文件;vs $status-warning-strong #92400E amber-800)
 $status-info-3:       #1890FF; // antd blue-500 信息主色·三档(6 文件;vs $status-info #3B82F6)
 $status-info-3:       #1890FF; // antd blue-500 信息主色·三档(6 文件;vs $status-info #3B82F6)
 $status-info-tint-3:  #E6F7FF; // antd blue-1 信息浅底·三档(5 文件)
 $status-info-tint-3:  #E6F7FF; // antd blue-1 信息浅底·三档(5 文件)
-$brand-primary-2:     #FA8C16; // 品牌橙·副档 antd orange(4 文件;vs $brand-primary #F97316)
+$brand-primary-2:     #FA8C16; // 品牌橙·副档 antd orange(4 文件;vs $brand-primary #C2410C 深橙)
 $brand-primary-tint-2:#FFF7E6; // 品牌橙浅底·副档 antd orange-1(15 文件;vs $uni-primary-pale #FFF7ED)
 $brand-primary-tint-2:#FFF7E6; // 品牌橙浅底·副档 antd orange-1(15 文件;vs $uni-primary-pale #FFF7ED)
 
 
 // ============================================================
 // ============================================================