Parcourir la source

refactor(tokens): C-1 品牌令牌收敛——旧蓝 #5B9BD5 系翻转为品牌橙 #F97316

对齐线上真值:tabBar.selectedColor 早已是 #F97316,但全局令牌层还锁在旧蓝,
导致同一 --color-primary 变量名渲染出蓝橙混合(29 处兜底旧蓝 vs 23 处兜底橙)。

uni.scss(5 处):
- §1 $uni-primary 系:#5B9BD5/#8FC5E8/#3A7CC4/#D6EAF8 → #F97316/#FB923C/#EA580C/#FFF7ED
- §1 $uni-info:从"复用品牌蓝"独立为信息蓝 #0EA5E9
- §5 $uni-shadow 系 + §7 :root --shadow 系:蓝色调 rgba(91,155,213) → 橙色调 rgba(249,115,22)
- §7 :root --color-primary 系同步翻转;文件头口径 v3.0→v3.1

9 个文件 32 处 var() 兜底值(兜底值即实际渲染值,mp-weixin 对 :root 支持不稳):
- var(--color-primary, #5B9BD5) → #F97316 ×29
- var(--color-primary-light, #8FC5E8) → #FB923C ×3
- 涉及 ai/chat、child/tasks、home-pages/child-index+parent-index、tasks/review、
  wishes/index、components/OnboardingGuide+PlayfulButton+PlayfulCard

验证:dart-sass 编译 PASS;.text-primary/.bg-primary 产物为 #F97316;
4 处渐变(child/tasks 451、wishes 671/910、parent-index 1415)两端翻橙后
仍为异色,无退化;旧蓝仅存于 4 处刻意保留的历史说明注释。

后续债务(不在本提交):parent-index 1415 渐变 #F97316→#F59E0B 为邻近色,
D 批动 home-pages 时处理;~20 个文件的旧蓝姊妹色硬编码渐变归 C-2 按角色分流。
liaoxg il y a 1 semaine
Parent
commit
b2d71f1ffe

+ 1 - 1
cfc-frontend/components/OnboardingGuide.vue

@@ -272,7 +272,7 @@ export default {
   width: 100%;
   height: 88rpx;
   border-radius: 999rpx;
-  background: var(--color-primary, #5B9BD5);
+  background: var(--color-primary, #F97316);
   color: #FFFFFF;
   font-size: 32rpx;
   font-weight: 700;

+ 4 - 4
cfc-frontend/components/PlayfulButton.vue

@@ -51,7 +51,7 @@ export default {
 
 /* ---- Primary ---- */
 .playful-btn--primary {
-  background: var(--color-primary, #5B9BD5);
+  background: var(--color-primary, #F97316);
   color: #fff;
   box-shadow: 0 2px 8px rgba(91, 155, 213, 0.3);
 }
@@ -87,7 +87,7 @@ export default {
 
 /* ---- Clay (孩子端玩具风) ---- */
 .playful-btn--clay {
-  background: var(--color-primary, #5B9BD5);
+  background: var(--color-primary, #F97316);
   color: #fff;
   border: 2rpx solid var(--border, #CBD5E1);
   box-shadow: 0 2px 8px rgba(91, 155, 213, 0.15);
@@ -96,8 +96,8 @@ export default {
 /* ---- Outline ---- */
 .playful-btn--outline {
   background: transparent;
-  color: var(--color-primary, #5B9BD5);
-  border: 2rpx solid var(--color-primary, #5B9BD5);
+  color: var(--color-primary, #F97316);
+  border: 2rpx solid var(--color-primary, #F97316);
 }
 
 /* ---- Sizes ---- */

+ 1 - 1
cfc-frontend/components/PlayfulCard.vue

@@ -73,7 +73,7 @@ export default {
   border: 1px solid var(--border-light, #E2E8F0);
 }
 .playful-card--teacher {
-  border-left: 4px solid var(--color-primary, #5B9BD5);
+  border-left: 4px solid var(--color-primary, #F97316);
   border-top: 1px solid var(--border-light, #E2E8F0);
   border-right: 1px solid var(--border-light, #E2E8F0);
   border-bottom: 1px solid var(--border-light, #E2E8F0);

+ 4 - 4
cfc-frontend/pages/ai/chat.vue

@@ -600,7 +600,7 @@ export default {
 
 .conv-header-new {
   font-size: 24rpx;
-  color: var(--color-primary, #5B9BD5);
+  color: var(--color-primary, #F97316);
   font-weight: 500;
 }
 
@@ -756,7 +756,7 @@ export default {
 }
 
 .user-bubble {
-  background: var(--color-primary, #5B9BD5);
+  background: var(--color-primary, #F97316);
   color: #fff;
   border-bottom-right-radius: 4rpx;
 }
@@ -824,7 +824,7 @@ export default {
 }
 
 .chat-send-active {
-  background: var(--color-primary, #5B9BD5);
+  background: var(--color-primary, #F97316);
 }
 
 .send-icon {
@@ -920,7 +920,7 @@ export default {
 .rec-type-tag {
   display: inline-block;
   font-size: 18rpx;
-  color: var(--color-primary, #5B9BD5);
+  color: var(--color-primary, #F97316);
   background: rgba(91, 155, 213, 0.1);
   padding: 2rpx 12rpx;
   border-radius: 8rpx;

+ 2 - 2
cfc-frontend/pages/child/tasks.vue

@@ -448,7 +448,7 @@ export default {
 }
 
 .tab-item--active {
-  background: linear-gradient(145deg, var(--color-primary-light, #8FC5E8), var(--color-primary, #5B9BD5));
+  background: linear-gradient(145deg, var(--color-primary-light, #FB923C), var(--color-primary, #F97316));
   box-shadow: inset -2rpx -2rpx 8rpx rgba(255, 255, 255, 0.3),
     4rpx 4rpx 12rpx rgba(91, 155, 213, 0.2);
 }
@@ -474,7 +474,7 @@ export default {
   padding: 0 8rpx;
   border-radius: 999rpx;
   background: rgba(91, 155, 213, 0.12);
-  color: var(--color-primary, #5B9BD5);
+  color: var(--color-primary, #F97316);
   font-size: 20rpx;
   font-weight: var(--font-weight-bold, 600);
   line-height: 1;

+ 2 - 2
cfc-frontend/pages/home-pages/child-index.vue

@@ -1149,7 +1149,7 @@ padding-top: 4rpx;
 .section-link {
   font-size: 24rpx;
   font-weight: 600;
-  color: var(--color-primary, #5B9BD5);
+  color: var(--color-primary, #F97316);
   padding: 8rpx 4rpx;
 }
 
@@ -1235,7 +1235,7 @@ padding-top: 4rpx;
 .task-card-points {
   font-size: 24rpx;
   font-weight: 700;
-  color: var(--color-primary, #5B9BD5);
+  color: var(--color-primary, #F97316);
   margin-bottom: 10rpx;
 }
 

+ 4 - 4
cfc-frontend/pages/home-pages/parent-index.vue

@@ -1412,7 +1412,7 @@ export default {
 
 .progress-fill-sm {
   height: 100%;
-  background: linear-gradient(90deg, var(--color-primary, #5B9BD5), #F59E0B);
+  background: linear-gradient(90deg, var(--color-primary, #F97316), #F59E0B);
   border-radius: 999rpx;
   transition: width 0.3s ease;
 }
@@ -1421,7 +1421,7 @@ export default {
   background: linear-gradient(90deg, #94A3B8, #CBD5E1);
 }
 
-.accent-color { color: var(--color-primary, #5B9BD5); }
+.accent-color { color: var(--color-primary, #F97316); }
 .gold-color { color: #F59E0B; }
 
 .stat-more {
@@ -1464,7 +1464,7 @@ export default {
 
 .today-count {
   font-size: 24rpx;
-  color: var(--color-primary, #5B9BD5);
+  color: var(--color-primary, #F97316);
   font-weight: 600;
 }
 
@@ -1491,7 +1491,7 @@ export default {
   flex-shrink: 0;
 }
 
-.dot-color-0 { background: var(--color-primary, #5B9BD5); }
+.dot-color-0 { background: var(--color-primary, #F97316); }
 .dot-color-1 { background: #10B981; }
 .dot-color-2 { background: var(--color-accent, #0EA5E9); }
 .dot-color-3 { background: #F59E0B; }

+ 4 - 4
cfc-frontend/pages/tasks/review.vue

@@ -196,7 +196,7 @@ export default {
 }
 
 .tab-bar__item--active .tab-bar__label {
-  color: var(--color-primary, #5B9BD5);
+  color: var(--color-primary, #F97316);
 }
 
 .tab-bar__item--active::after {
@@ -207,12 +207,12 @@ export default {
   transform: translateX(-50%);
   width: 40%;
   height: 4rpx;
-  background: var(--color-primary, #5B9BD5);
+  background: var(--color-primary, #F97316);
   border-radius: 4rpx;
 }
 
 .tab-bar__badge {
-  background: var(--color-primary, #5B9BD5);
+  background: var(--color-primary, #F97316);
   border-radius: 999rpx;
   min-width: 36rpx;
   height: 36rpx;
@@ -293,7 +293,7 @@ export default {
 }
 
 .card-points {
-  color: var(--color-primary, #5B9BD5);
+  color: var(--color-primary, #F97316);
   font-weight: 600;
 }
 

+ 7 - 7
cfc-frontend/pages/wishes/index.vue

@@ -645,7 +645,7 @@ export default {
   display: block;
   font-size: 72rpx;
   font-weight: 800;
-  color: var(--color-primary, #5B9BD5);
+  color: var(--color-primary, #F97316);
   line-height: 1.1;
   margin-bottom: 20rpx;
   letter-spacing: -2rpx;
@@ -668,7 +668,7 @@ export default {
 .milestone__fill {
   height: 100%;
   border-radius: 999rpx;
-  background: linear-gradient(90deg, var(--color-primary-light, #8FC5E8), var(--color-primary, #5B9BD5));
+  background: linear-gradient(90deg, var(--color-primary-light, #FB923C), var(--color-primary, #F97316));
   transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 
@@ -709,8 +709,8 @@ export default {
 }
 
 .filter-tab--active {
-  background: var(--color-primary, #5B9BD5);
-  border-color: var(--color-primary, #5B9BD5);
+  background: var(--color-primary, #F97316);
+  border-color: var(--color-primary, #F97316);
   color: #FFFFFF;
   box-shadow: 0 4rpx 16rpx rgba(91, 155, 213, 0.25);
 }
@@ -907,7 +907,7 @@ export default {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: linear-gradient(145deg, var(--color-primary-light, #8FC5E8), var(--color-primary, #5B9BD5));
+  background: linear-gradient(145deg, var(--color-primary-light, #FB923C), var(--color-primary, #F97316));
   border: 4rpx solid var(--border, #CBD5E1);
   box-shadow:
     inset -3rpx -3rpx 10rpx rgba(255, 255, 255, 0.3),
@@ -1020,7 +1020,7 @@ export default {
 
 .emoji-item--active {
   background: linear-gradient(145deg, #FFFFFF, var(--bg-grey, #EDF2F7));
-  border-color: var(--color-primary, #5B9BD5);
+  border-color: var(--color-primary, #F97316);
   box-shadow: 0 4rpx 12rpx rgba(91, 155, 213, 0.15);
 }
 
@@ -1041,7 +1041,7 @@ export default {
 }
 
 .emoji-item--active .emoji-item__label {
-  color: var(--color-primary, #5B9BD5);
+  color: var(--color-primary, #F97316);
   font-weight: 600;
 }
 

+ 26 - 23
cfc-frontend/uni.scss

@@ -3,18 +3,19 @@
  * 浠艾福 (XAF) Design System — UniApp SCSS Variables
  * ============================================================
  *
- * 色彩体系: 柔和天蓝 + 珊瑚暖色 (信任专业 + 家庭温暖)
- * 风格: 极简扁平圆角 (全角色统一) 
+ * 色彩体系: 品牌橙 + 珊瑚暖色 (活力关怀 + 家庭温暖)
+ * 风格: 极简扁平圆角 (全角色统一)
  * Logo配色参考: #6BB9F0 (中蓝) / #D6EAF8 (浅蓝) / ❤白色心形
- * 
+ *
  * 设计原则:
  * - 扁平圆角:全端统一,无Claymorphism
- * - 蓝色为品牌色:传递信任/专业/平静
+ * - 品牌橙 #F97316 为主色:与 pages.json tabBar.selectedColor 一致(线上真值)
  * - 珊瑚暖色为点缀:保留"家庭温暖"和"关怀"
  * - 心形符号:品牌识别元素
  * - 减少装饰动效,聚焦内容可读性
  *
- * v3.0 — 2026-06-06
+ * v3.1 — 2026-10-18 品牌令牌收敛:$uni-primary 系由旧蓝 #5B9BD5 翻转为品牌橙
+ *        (旧蓝与 tabBar.selectedColor / 线上实际主色不一致,详见 §12 背景说明)
  * ============================================================
  */
 
@@ -22,11 +23,12 @@
 // 1. 品牌色彩 (Brand Colors)
 // ============================================================
 
-// 主色调 - 柔和天蓝 (Logo蓝色)
-$uni-primary: #5B9BD5;          // Logo中蓝 - 主品牌色
-$uni-primary-light: #8FC5E8;    // 浅蓝
-$uni-primary-dark: #3A7CC4;     // 深蓝
-$uni-primary-pale: #D6EAF8;     // 极浅蓝 (Logo背景色)
+// 主色调 - 品牌橙(2026-10 令牌收敛:原 #5B9BD5 旧蓝与线上实际主色不一致,已翻转;
+// 现值与 $brand-primary / tabBar.selectedColor 三方一致,见 §12)
+$uni-primary: #F97316;          // 品牌主色
+$uni-primary-light: #FB923C;    // 浅橙
+$uni-primary-dark: #EA580C;     // 深橙
+$uni-primary-pale: #FFF7ED;     // 极浅橙 (品牌淡底)
 
 // 辅助暖色 - 珊瑚粉 (家庭温暖)
 $uni-warm: #F08A7A;             // 心形暖色 - 保留"关爱"感
@@ -40,7 +42,7 @@ $uni-warning: #FFB74D;
 $uni-warning-light: #FFD54F;
 $uni-error: #EF5350;
 $uni-error-light: #E57373;
-$uni-info: #5B9BD5;             // 复用了品牌蓝
+$uni-info: #0EA5E9;             // 信息蓝(2026-10 起独立于品牌色,不再复用主色)
 
 // 中性色 (Neutral) — 冷调中性,匹配蓝色系
 $uni-bg-color: #F5F9FC;        // 极浅蓝灰背景
@@ -110,9 +112,9 @@ $uni-radius-round: 9999rpx;
 // 5. 阴影 (Shadows) — 极简风格,轻微阴影
 // ============================================================
 
-$uni-shadow-sm: 0 2rpx 8rpx rgba(91, 155, 213, 0.06);
-$uni-shadow-md: 0 4rpx 16rpx rgba(91, 155, 213, 0.08);
-$uni-shadow-lg: 0 8rpx 32rpx rgba(91, 155, 213, 0.10);
+$uni-shadow-sm: 0 2rpx 8rpx rgba(249, 115, 22, 0.06);
+$uni-shadow-md: 0 4rpx 16rpx rgba(249, 115, 22, 0.08);
+$uni-shadow-lg: 0 8rpx 32rpx rgba(249, 115, 22, 0.10);
 $uni-shadow-inner: inset 0 1rpx 4rpx rgba(0, 0, 0, 0.04);
 
 // ============================================================
@@ -128,11 +130,12 @@ $uni-transition-slow: 0.3s ease;
 // ============================================================
 
 :root {
-  // 品牌色
-  --color-primary: #5B9BD5;
-  --color-primary-light: #8FC5E8;
-  --color-primary-dark: #3A7CC4;
-  --color-primary-pale: #D6EAF8;
+  // 品牌色(2026-10 由旧蓝 #5B9BD5 系翻转为品牌橙,与 §1 SCSS 变量同值;
+  // 注意 mp-weixin 对 :root 支持不稳,页面实际渲染以各处 var() 兜底值为准)
+  --color-primary: #F97316;
+  --color-primary-light: #FB923C;
+  --color-primary-dark: #EA580C;
+  --color-primary-pale: #FFF7ED;
   --color-warm: #F08A7A;
   --color-warm-light: #F4B0A5;
 
@@ -165,10 +168,10 @@ $uni-transition-slow: 0.3s ease;
   --radius-lg: 12px;
   --radius-xl: 16px;
 
-  // 阴影 — 极简风格
-  --shadow-sm: 0 1px 4px rgba(91, 155, 213, 0.06);
-  --shadow-md: 0 2px 8px rgba(91, 155, 213, 0.08);
-  --shadow-lg: 0 4px 16px rgba(91, 155, 213, 0.10);
+  // 阴影 — 极简风格(色调随品牌色翻转为橙,2026-10)
+  --shadow-sm: 0 1px 4px rgba(249, 115, 22, 0.06);
+  --shadow-md: 0 2px 8px rgba(249, 115, 22, 0.08);
+  --shadow-lg: 0 4px 16px rgba(249, 115, 22, 0.10);
 }
 
 // ============================================================