docs(theme): 同步浅色暖阳晨曦设计系统规范文档与活动发起页主题样式

这个提交包含在:
wikiboss
2026-09-16 20:23:04 +08:00
父节点 75e5e3d03a
当前提交 9641dfba47
共有 2 个文件被更改,包括 57 次插入 和 26 次删除

查看文件

@@ -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; // 激活描边色
```

查看文件

@@ -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);
}
}
}