瀏覽代碼

refactor(mind-detail): B-1h soothe-toolbox 令牌化——29 处硬编码色收敛(零观感变化)

- 全全局映射、零局部调色板:呼吸圈薄荷/琥珀渐变落 §16 新登状态渐变阶
  (green-50/200/300、amber-200、sky-50、blue-600),免责声明落
  $status-warning-soft/-strong
- C-3 合规修复:transition: all 0.3s → background 0.3s ease
  (.breath-circle 各状态仅切换 background 渐变)
- 验证:等价回归唯一 DIFF 即上述 transition 行(有意变更),
  29 处色值编译产物逐字节相同
liaoxg 1 周之前
父節點
當前提交
45b3d87ee8
共有 1 個文件被更改,包括 27 次插入 和 27 次删除
  1. 27 27
      cfc-frontend/pages/mind-detail/soothe-toolbox.vue

+ 27 - 27
cfc-frontend/pages/mind-detail/soothe-toolbox.vue

@@ -182,16 +182,16 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .toolbox-container {
   min-height: 100vh;
-  background: linear-gradient(180deg, #F0FDF4 0%, #FFFFFF 50%, #FFF7ED 100%);
+  background: linear-gradient(180deg, $status-success-tint-2 0%, $app-surface 50%, $facade-brand-tint 100%);
   padding-bottom: 40rpx;
 }
 
 .tool-section {
   margin: 24rpx 32rpx;
-  background: #fff;
+  background: $app-surface;
   border-radius: 20rpx;
   padding: 28rpx;
   box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.04);
@@ -211,12 +211,12 @@ export default {
 .section-title {
   font-size: 30rpx;
   font-weight: 600;
-  color: #333;
+  color: $facade-text-strong;
 }
 
 .section-desc {
   font-size: 24rpx;
-  color: #999;
+  color: $facade-text-muted;
   display: block;
   margin-bottom: 20rpx;
 }
@@ -233,11 +233,11 @@ export default {
   width: 280rpx;
   height: 280rpx;
   border-radius: 50%;
-  background: linear-gradient(135deg, #A7F3D0, #6EE7B7);
+  background: linear-gradient(135deg, $status-success-light, $status-success-light-2);
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: all 0.3s;
+  transition: background 0.3s ease;
   box-shadow: 0 8rpx 40rpx rgba(16, 185, 129, 0.2);
 }
 
@@ -246,7 +246,7 @@ export default {
 }
 
 .breath-circle.hold {
-  background: linear-gradient(135deg, #FDE68A, #F59E0B);
+  background: linear-gradient(135deg, $status-warning-light, $dim-wealth);
   box-shadow: 0 8rpx 40rpx rgba(245, 158, 11, 0.3);
 }
 
@@ -257,21 +257,21 @@ export default {
 .breath-text {
   font-size: 36rpx;
   font-weight: 600;
-  color: #fff;
+  color: $app-surface;
 }
 
 .breath-hint {
   display: block;
   text-align: center;
   font-size: 24rpx;
-  color: #999;
+  color: $facade-text-muted;
 }
 
 .breath-count {
   display: block;
   text-align: center;
   font-size: 24rpx;
-  color: #10B981;
+  color: $status-success;
   margin-top: 8rpx;
 }
 
@@ -284,26 +284,26 @@ export default {
 
 .mind-card {
   padding: 20rpx;
-  background: #F9F9F9;
+  background: $facade-fill-ghost-2;
   border-radius: 12rpx;
   border: 2rpx solid transparent;
 }
 
 .mind-card-active {
-  background: #F0FDF4;
-  border-color: #10B981;
+  background: $status-success-tint-2;
+  border-color: $status-success;
 }
 
 .mind-card-title {
   font-size: 26rpx;
   font-weight: 600;
-  color: #333;
+  color: $facade-text-strong;
   display: block;
 }
 
 .mind-card-desc {
   font-size: 22rpx;
-  color: #999;
+  color: $facade-text-muted;
   display: block;
   margin-top: 4rpx;
 }
@@ -311,14 +311,14 @@ export default {
 .mindfulness-content {
   margin-top: 16rpx;
   padding: 20rpx;
-  background: #F0FDF4;
+  background: $status-success-tint-2;
   border-radius: 12rpx;
-  border-left: 6rpx solid #10B981;
+  border-left: 6rpx solid $status-success;
 }
 
 .mindfulness-text {
   font-size: 24rpx;
-  color: #555;
+  color: $facade-text-deep;
   line-height: 1.8;
   white-space: pre-wrap;
 }
@@ -336,7 +336,7 @@ export default {
   align-items: center;
   gap: 12rpx;
   padding: 20rpx;
-  background: #FFFBEB;
+  background: $dim-wealth-tint;
   border-radius: 12rpx;
   box-sizing: border-box;
 }
@@ -347,7 +347,7 @@ export default {
 
 .doodle-text {
   font-size: 24rpx;
-  color: #666;
+  color: $facade-text-body;
   flex: 1;
 }
 
@@ -360,22 +360,22 @@ export default {
 
 .exercise-item {
   padding: 20rpx;
-  background: #F0F9FF;
+  background: $tint-sky-soft;
   border-radius: 12rpx;
-  border-left: 6rpx solid #3B82F6;
+  border-left: 6rpx solid $status-info;
 }
 
 .exercise-name {
   font-size: 26rpx;
   font-weight: 600;
-  color: #2563EB;
+  color: $status-info-deep;
   display: block;
   margin-bottom: 6rpx;
 }
 
 .exercise-desc {
   font-size: 24rpx;
-  color: #666;
+  color: $facade-text-body;
   line-height: 1.6;
   display: block;
 }
@@ -384,13 +384,13 @@ export default {
 .disclaimer {
   margin: 32rpx;
   padding: 20rpx;
-  background: #FEF3C7;
+  background: $status-warning-soft;
   border-radius: 12rpx;
 }
 
 .disclaimer-text {
   font-size: 22rpx;
-  color: #92400E;
+  color: $status-warning-strong;
   line-height: 1.6;
 }
 </style>