diff --git a/docs/UIUX设计系统与约束规范文档.md b/docs/UIUX设计系统与约束规范文档.md index 15ddb1d..314060f 100644 --- a/docs/UIUX设计系统与约束规范文档.md +++ b/docs/UIUX设计系统与约束规范文档.md @@ -108,28 +108,28 @@ $border-subtle: #1E293B; // 卡片外描边/分割线 $border-focus: #4F46E5; // 激活描边色 ``` -#### 3.1.2 暖阳赤焰暖色系 (Sunset Amber & Warm Ember) -以暖夜焦糖深褐黑为底色,以暖阳曜橙与琥珀金为流光,契合同城探店、陪吃、陪喝、陪唱等温暖治愈系生活场景: +#### 3.1.2 浅色暖阳晨曦暖色系 (Light Warm Sunset Morning) +以明亮温润的奶油米白为底色,以纯白卡片与曜橙暖金为视觉焦点,摆脱暗色压抑感,呈现治愈、清爽的日间同城生活陪伴体验: ```scss -// 暖阳赤焰专属 Tokens -$warm-bg-primary: #140E0A; // 页面全局最底色 (暖夜焦糖深褐黑) -$warm-bg-surface: #221711; // 卡片容器底色 (暗夜暖咖琥珀) -$warm-bg-surface-elevated: #2E1F17; // 次级浮层底色 (浅暖咖) -$warm-bg-surface-glass: rgba(34, 23, 17, 0.85); // 拟态磨砂玻璃 +// 浅色暖阳晨曦专属 Tokens +$warm-bg-primary: #FDFBF7; // 页面全局最底色 (温润奶油米白) +$warm-bg-surface: #FFFFFF; // 卡片容器底色 (高洁暖白) +$warm-bg-surface-elevated: #F8F5F0; // 次级浮层底色 (浅暖米杏) +$warm-bg-surface-glass: rgba(255, 255, 255, 0.90); // 暖白透亮磨砂玻璃 // 品牌核心与暖色流光 -$warm-color-brand: #F97316; // 核心曜橙 (Primary CTA,极具温度与能量) -$warm-color-brand-light: #FB923C; // 暖橙高光 -$warm-color-brand-gold: #F59E0B; // 琥珀暖金流光 -$warm-color-brand-glow: rgba(249, 115, 22, 0.35); // 暖橙弥散发光光晕 -$warm-color-brand-gradient: linear-gradient(135deg, #F97316, #F59E0B); +$warm-color-brand: #EA580C; // 核心曜橙 (Primary CTA,浅底高对比度聚焦色) +$warm-color-brand-light: #F97316; // 暖橙高光 +$warm-color-brand-gold: #F59E0B; // 暖金流光 +$warm-color-brand-glow: rgba(234, 88, 12, 0.18); // 柔和暖橙弥散微光 +$warm-color-brand-gradient: linear-gradient(135deg, #F97316, #FB923C); // 文本与无障碍对比色阶 (严格满足 WCAG AA 标准) -$warm-text-primary: #FFF7ED; // 一级主文本 (暖白,对比度 > 13:1) -$warm-text-secondary: #C7B5A7; // 二级描述文本 (暖灰褐,对比度 > 5.5:1) -$warm-text-muted: #8C7565; // 三级占位说明 (暗咖灰,对比度 > 3.5:1) -$warm-border-subtle: #342217; // 暖色分割线与卡片描边 +$warm-text-primary: #1C1917; // 一级主文本 (暖炭黑,对比度 > 15:1,超越 AAA 级) +$warm-text-secondary: #57534E; // 二级描述文本 (暖深灰,对比度 > 7:1) +$warm-text-muted: #78716C; // 三级占位说明 (暖中灰,对比度 > 4.5:1) +$warm-border-subtle: #F0ECE4; // 浅米暖灰分割线与卡片描边 $warm-border-focus: #EA580C; // 激活描边色 ``` diff --git a/pwuniapp/pages/activity/create.vue b/pwuniapp/pages/activity/create.vue index 6911a51..338ebe9 100644 --- a/pwuniapp/pages/activity/create.vue +++ b/pwuniapp/pages/activity/create.vue @@ -438,30 +438,61 @@ const handleSubmit = () => { } .create-activity-container.theme-warm { - background-color: #140E0A; + background-color: #FDFBF7; .mode-switch-wrap .mode-item { - background-color: #221711; - border-color: rgba(249, 115, 22, 0.12); + background-color: #FFFFFF; + border-color: #F0ECE4; + box-shadow: 0 4rpx 16rpx rgba(28, 25, 23, 0.04); + + .mode-text-box .mode-title { + color: #1C1917; + } + .mode-text-box .mode-desc { + color: #78716C; + } &.active { - background: rgba(249, 115, 22, 0.15); - border-color: #F97316; + background: rgba(234, 88, 12, 0.08); + border-color: #EA580C; + .mode-text-box .mode-title { + color: #EA580C; + } } } .form-card { - background-color: #221711; - border-color: rgba(249, 115, 22, 0.12); + background-color: #FFFFFF; + border-color: #F0ECE4; + box-shadow: 0 4rpx 20rpx rgba(28, 25, 23, 0.05); + + .form-title { + color: #1C1917; + } + .input-row { + border-bottom-color: #F5F2EC; + .row-label { + color: #1C1917; + } + .row-input { + color: #1C1917; + } + } + .calc-preview { + background: #F8F5F0; + .preview-label { + color: #78716C; + } + } } .bottom-bar { - background-color: rgba(34, 23, 17, 0.95); - border-top-color: rgba(249, 115, 22, 0.15); + background-color: rgba(253, 251, 247, 0.95); + border-top-color: #F0ECE4; .btn-submit { background: linear-gradient(135deg, #F97316 0%, #EA580C 100%); - box-shadow: 0 4rpx 20rpx rgba(249, 115, 22, 0.45); + box-shadow: 0 4rpx 20rpx rgba(234, 88, 12, 0.35); } } }